제어문

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

Info: 💡

1. 제어문

제어문이란 프로그램의 실행 흐름을 제어하는 구문 입니다.

Info: 제어문 에는 조건문, 선택문, 반복문 이 있습니다.

조건문이란 조건에 따라 실행이 달라지게 할 때 사용되는 제어문입니다. ◦ 자바 스크립트의 조건문 에는if, else, else if가 있습니다.

선택문이란 값에 따라서 실행 내용을 선택하여 실행 할때 사용되는 제어문입니다. ◦ 자바 스크립트의 선택문 에는 switch가 있습니다.

반복문이란 주어진 조건에 따라서 문장을 반복 실행 할때 사용되는 제어문 입니다 - 자바 스크립트의 반복문 에는 for, while, do while 등이 있습니다.

1.1. 조건문

1.1.1. if

프로그래밍을 할때는 특정 조건과 명령에 따라 실행 순서를 정해야 합니다. 이때 특정 조건이 맞는지 확인하기 위해** 조건문** 을 사용하며 프로그래밍 시 가장 빈번히 사용하는 구문입니다. 조건문을 작성할때 if라는 명령어를 사용합니다. 그리고 if문에 구체적인 조건의 내용을 작성하는데 이때 다양한 연산자를 활용하여 조건의 범위를 지정할수 있습니다.

지금부터 자바스크립트의 조건문과 조건 연산자에 대해 학습하겠습니다.

if문은 소괄호 안의 조건을 체크하여 결괏값이 true 면 중괄호 내부의 실행문을 실행하고 조건의 결과가 false 이면 중괄호의 실행문을 무시합니다. 아래는 if 문의 기본 문법 예시입니다.

if (//조건) {
//조건이 참일때 실행문;
}

실행

let gender = "남자";
document.write("당신은" + gender + "이므로");
if (gender == "남자") document.write("치마를 입으세요.");
if (gender == "여자") document.write("바지를 입으세요.");

실행

const date = new Date();
const hour = date.getHours();
console.log(hour);
if (hour < 12) {
  document.querySelector("body").style.backgroundColor = "ivory";
  document.querySelector("body").style.color = "red";
}
if (hour > 12) {
  document.querySelector("body").style.backgroundColor = "black";
  document.querySelector("body").style.color = "white";
}

1.1.2. if ~ else if

if문은 조건이 true 일때만 실행할수 있으므로 false 일때도 명령을 하려면 실행문을 두번 작성해야 하는 번거로움이 있습니다.

이럴때 else 를 사용하면 됩니다. 아래는 if ~ else if 문의 기본 문법 예시입니다.

if (//조건A) {
	//조건A가 참일때 실행문
} else if (//조건B){
	//조건A가 거짓이고 조건B가 참일때 실행문
}

실행

<!DOCTYPE html><html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Else-If & Nesting</title>
  </head>
  <body>
    <h1>Else-If & Nesting</h1>

    <script>
		const d = new Date(10, 30, 2022, 6, 0, 0);
		const hour = d.getHours();

		if (hour < 12) {
		  console.log('Good Morning');
		} else if (hour < 18) {
		  console.log('Good Afternoon');
		} else {
		  console.log('Good Night');
		}

		// Nested If
		if (hour < 12) {
		  console.log('Good Morning');

		  if (hour === 6) {
		    console.log('Wake Up!');
		  }
		} else if (hour < 18) {
		  console.log('Good Afternoon');
		} else {
		  console.log('Good Night');

		  if (hour >= 20) {
		    console.log('zzzzzzzz');
		  }
		}

		if (hour >= 7 && hour < 15) {
		  console.log('It is work time!');
		}

		if (hour === 6 || hour === 20) {
		  console.log('양치해!');
		}
	</script>
  </body>
</html>

1.1.3. 문제

실행

Info: 질의응답 창(prompt)을 이용하여 사용자의 시험점수를 입력 받으시오. 시험 점수가 70점 이상이면 ‘합격’이라는 메시지를 출력하시오

1.1.4. .문제

실행

Info: 사용자로부터 입력받은 숫자가 3의 배수인지를 확인후 결과를 출력하는 프로그램을 작성하시오

1.1.5. 문제

실행

Info: if-else 나이가 20세 이상이고, 30세 미만일 경우에는 ’통과’라고 출력하고, 그렇지 않으면 ’비통과’라고 출력하시오.

힌트 : 이상은 해당 숫자를 포함하고 미만은 해당 숫자를 포함하지 않아요

1.1.6. 문제

실행

Info: if-else if

사용자가 입력한 숫자가 3의 배수인지를 판별하여 알려주고 취소를 누를 경우 입력이 취소됨을 표시하는 프로그램을 작성해보자 힌트: 순서도를 그려보세요

1.1.7. 문제

Info: 4.1.6 의 조건문을 if~else 문으로 변경해 보세요.

힌트: 조건문을 줄여보는 거에요

1.1.8. 문제

실행

Info: 사용자로 취득점수를 입력 받습니다. 점수가 90점 이상 일 경우 A학점, 80점 이상 일 경우 B학점, 70점 이상 일 경우 C학점 , 60점 이상 일 경우 D학점, 60점 이하 일 경우 F학점 의 메시지를 출력하는 프로그램을 작성하세요

1.1.9. 논리연산자를 활용한 조건문

두조건이 true 일 경우와 조건 1개만 true 일 경우 처럼 여러 경우의 수를 따질때는 논리 연산자를 사용합니다.

1.1.9.1. OR

Info: OR 연산자는 || 를 사용하며 우항의 2개중 true가 하나라도 있으면 결과를 true로 반환합니다.

Info: 실행

OR 연산자를 사용하여 50보다 작은 숫자 2개를 입력받아 둘 중 하나가 50보다 작은 지를 판단하는 프로그램을 작성해 보자

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>조건문</title>
  </head>
  <body>
    <script>
      let numberOne = prompt('50미만의 숫자를 입력하세요.');
      let numberTwo = prompt('50미만의 숫자를 입력하세요.');
      if (numberOne < 50 || numberTwo < 50) alert('두 개의 숫자 중 최소한 하나는 50 미만이군요.');
      else alert('두 개의 숫자 중 50 미만인 수는 없습니다.');
    </script>
  </body>
</html>

1.1.9.2. AND

Info: *AND 연산자는 && 를 사용하며 우항의 2개중 false가 하나라도 있으면 결과를 false로 반환합니다

Info: 실행

AND 연산자를 사용하여 입력한 두개의 숫자가 50보다 작은지 체크하는 프로그램을 작성해보자.

let numberOne = prompt("50미만의 숫자를 입력하세요.");
let numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne < 50 && numberTwo < 50) alert("두 개의 숫자 모두 50 미만이군요.");
else alert("조건에 맞지 않는 숫자가 있습니다.");

1.1.9.3. NOT

Info: 🐸 NOT 연산자는 ! 를 사용하며 청개구리 처럼 결과값을 반대로 반환합니다. 결과가 true 이면 false 를 결과가 false 이면 true 를 반환합니다.

Info: 실행

NOT 연산자를 사용하여 사용자가 입력한 값이 null 이 아닌지를 체크해 보자.

let numberOne = prompt("50미만의 숫자를 입력하세요.");
let numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne !== null && numberTwo !== null) {
  if (numberOne < 10 || numberTwo < 10)
    alert("두 개의 숫자 중 최소한 하나는 10 미만이군요.");
  else alert("두 개의 숫자 중 10 미만인 수는 없습니다.");
} else {
  alert("50 미만의 숫자를 입력하세요.");
}

1.1.10. 조건 계산을 빠르게 하는 방법

조건이 2가지 이상일 경우 동시에 함께 체크하는 조건식을 만들때는 첫번째 조건을 보고 빠르게 판단할수 있도록 작성해야 합니다. 예를 들어 다음과 같은 조건식의 경우를 살펴보겠습니다. (( x === 10 ) && ( y === 20 )) AND 연산자는 조건식이 둘 이상일 경우 하나만 false 라도 최종값이 false 입니다. 그러므로 첫번째 조건식의 결과를 false 로 작성할 경우 두번째 조건은 체크 하지 않고 바로 false 를 반환하게 됩니다. 이런 식으로 AND 연산자 사용시 false 를 반환하게 될 확률이 높은 식을 첫번째 조건으로 사용하게 된다면 컴퓨터의 일을 덜어주는 셈이 됩니다. 반대로 OR 연산자의 경우 하나만 true 라도 최종 값이 true 이기 때문에 첫번째 조건으로 true 를 반환하는 식을 작성한다면 효율적인 코드를 작성할수 있습니다. 이런 연산 방식을 단축평가(short circuit evaluation) 라고 합니다

1.2. 선택문

선택문은 switch 가 있습니다. switch는 하나의 변수 값을 여러 개의 값과 비교하여 해당하는 case 절의 코드를 실행하는 제어문 입니다. 변수에 저장된 데이터(data)와 정확히 일치되는 경우(case)가 있는지 검사 후 일치하는 데이터가 있을 때 해당 실행문을 수행한 뒤 마지막의 break문으로 반복을 끝냅니다. 일치되는 값이 없을 때에는 default에 해당하는 실행문을 수행한 뒤 문장을 마칩니다.

switch (조건) {
  case 값1:
    명령1;
    break;
  case 값2:
    명령2;
    break;
  default:
    기본명령;
}

1.2.1. switch

Info: 실행

사용자에게 1,2,3 중 하나의 값을 입력받아 session 변수에 저장한다. switch 문을 이용해 session 값을 체크하여 입력받은 값이 1이면 마케팅-201호, 2이면 개발-203호, 3이면 디자인-204호로 안내하는 프로그램을 작성해보자

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>세션 선택 - switch문</title>
    <link rel="stylesheet" href="css/switch.css" />
  </head>
  <body>
    <script>
      let session = prompt('관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인');
        switch (session) {
          case '1':
          document.write('<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>');
          break;
            case '2':
            document.write('<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>');
            break;
            case '3':
            document.write('<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>');
            break;
            default:
            alert('잘못 입력했습니다.');
          }
    </script>
  </body>
</html>

CSS

body {
background-color: #0c3268;
color: rgb(243, 243, 243);
}
p {
margin-top: 80px;
font-size: 2em;
font-weight: 700;
text-align: center;
text-shadow: 1px 2px 1px #000;
}
p strong {
font-size: 2.2em;
color: yellow;
}

1.2.2. 문제

Info: 실행

사용자로 부터 입력받은 숫자가 짝수인지 홀수인지 판별하여 메시지를 출력하시오. 만약 사용자가 숫자가 아닌 값을 입력 할 경우 숫자가 아닙니다 라는 메시지를 출력하시오.

1.2.3. 문제

Info: 실행

제어문을 사용하여 자리배치도에 필요한 줄의 갯수를 구하시오 대관서비스 앱을 제작 중입니다. 사용자로 부터 총 입장객과 한줄에 앉을 인원수를 입력받아 총 몇개의 줄이 필요한지 출력해주세요 힌트

전체 입장객의 수가 10명이고 한줄에 2명씩 앉아야 한다면 10/2 를 하여 총 5줄이 필요하겠죠?
필요한 값들을 변수로 지정하고 프로그램을 작성해보세요.

해답

1.3. 반복문

반목문이란 주어진 조건에 따라서 문장을 반복 실행하게 하는 제어문입니다. 자바 스크립트에서 반복문은 for문, while문, do while문이 있습니다.

1.3.1. for

for 문의 기본 문법은 아래와 같습니다.

for (초기값; 조건; 증가식) {
  실행문;
}

for문의 연산순서는 아래 그림과 같습니다. 번호 라는 변수에 할당된 값을 2→3→4→1 순으로 반복수행 하며 2번의 조건에서 false 반환시 반복문을 중단합니다.

Info: 실행

for 문을 활용하여 1부터 5를 더한 합을 출력하는 프로그램을 작성해봅시다. 우선 반복문 없이 작성해 보겠습니다.

// 반복문 사용전
let sum = 0;

sum += 1;
sum += 2;
sum += 3;
sum += 4;
sum += 5;
document.write(‘1부터 5까지 더하면’ + sum);

위의 코드를 반복문으로 작성할 경우 훨씬 간단히 작성할수 있습니다. (refectoring) 실행

//반복문 사용후

let i;
let sum = 0;

for (i = 1; i < 6; i++) {
    sum += i;
}
document.write('1부터 5까지 더하면 ' + sum);

for 문은 초기값->조건->실행문->증가식의 순서로 수행합니다.

Info: 실행

for 문을 사용해 1부터 100까지 숫자를 더하는 프로그램을 작성해보세요.

해답

let i;
let sum = 0;

for(i = 1; i < 1001; i++) {
    sum += i;
}
document.write("1부터 5까지 더하면 " + sum);

1.3.2. 중첩 for

for문 안에 for문이 포함될 경우 어떻게 연산이 이루어지는지 알아보겠습니다. 중첩for 문은 아래와 같은 형태를 가집니다.

for (초기값1; 조건1; 증가식1) {
  실행문1;
  for (초기값2; 조건2; 증가식2) {
    실행문2;
  }
}

연산순서는 아래의 그림과 같습니다.

3-2에서 false 가 나올때까지 3-1~3-4 를 수행합니다. 3-2에서 false 가 나오면 바깥의 for문을 다시 반복합니다.

1 → 2 → 3
    ↓
   3-1 → 3-2 → 3-3 → 3-4

Info: 실행

중첩 for문으로 1단부터 9단까지 구구단을 계산하는 프로그램을 작성 해보겠습니다

<!DOCTYPE html><html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>구구단 - for문</title>
</head>
<body>
	<h1>구구단</h1>
	<script>
		var i, j;

		for (i = 1; i <= 9; i++) {
			document.write("<h3>" + i + "단</h3>");
			for (j = 1; j <= 9; j++) {
				document.write(i +" X " + j + " = " + i*j + "<br>");
			}
		}
	</script>
</body>
</html>

Info: 실행

동적요소를 추가하여 디자인을 수정 해봅시다.

스타일을 작성합니다

div {
    display: inline-block;
    padding: 0 20px 30px 20px;
    margin: 15px;
    border: 1px solid #ccc;
    line-height: 2;
}
div h3 {
    text-align: center;
    font-weight: bold;
}

동적요소를 추가합니다

let i, j;
for (i = 1; i <= 9; i++) {
  document.write(`<div><h3>${i}단</h3>`);
  for (j = 1; j <= 9; j++) {
    document.write(`${i}X${j}=${i * j}<br>`);
  }
  document.write("</div>");
  if (i === 3) break;
}

⚠️ document.write($\{i\}단); document.write 메서드의 인자로 태그를 전달하면 간단한 구조의 동적요소를 추가할수 있습니다.

1.3.3. 문제

Info: 실행1

중첩for문 을 활용하여 실행화면을 출력하는 프로그램을 작성하시오.

Info: 실행2

중첩for문 을 활용하여 실행화면을 출력하는 프로그램을 작성하시오.

1.3.4. 반복문-do/while

Info: while 문은 do와 함께 사용하기도 하고 단독으로 사용하기도 한다. while 문을 활용한 반복문을 알아보자.

아래는 while 문의 기본형이다.

let init=초기값;
while(조건식){
//조건식이 참일때 실행문
//증가식
}

1.3.4.1. while

Info: 실행

1부터 10까지 더하는 프로그램을 작성해보자

var i = 1; //초기값
while (i <= 10) {
  document.write(i + "<br />");
  i++;
}

1.3.4.2. do/while

Info: do/while 문은 최초 한번은 무조건 실행한후 조건을 비교하는 것이 특징이다. 아래는 while 문의 기본형이다.

let init=초기값;
do{
	//실행문
	//증가식
}
while(조건식)

Info: 실행

사용자가 입력한 값이 숫자가 맞다면 1부터 입력한 숫자까지의 합을 출력하는 프로그램을 만들어보자

let num;
let sum = 0;
do {
  num = prompt("숫자를 입력하세요");
} while (
  //isNaN은 자료형이 isNaN 인지 검사한다. 즉 num의 값이 isNaN 이면 조건이 false 가 된다.
  isNaN(num)
);
// parseInt 함수는 소수점자리를 버리기 위해 사용하였다.
for (let i = 1; i <= parseInt(num); i++) {
  sum += i;
}

document.write("1부터 입력한 숫자까지의 합은 " + sum + "입니다.");

1.3.5. break

Info: 반복문에서 탈출할때는 break를 사용한다. 아래는 break의 기본 문법이다.

break

Info: 실행 반복문에서 헤어나오지 못하는 상황을 무한루프 라고 한다. break문으로 무한루프에서 탈출해보자

항상 true인 조건에 반복문을 작성한다.

for (let i = 0; true; i++) {
  alert(i + "번째 반복문입니다.");
}

위의 조건은 늘 참이므로 계속 실행된다. 이렇게 끝도 없이 반복되는 현상을 무한 루프에 빠졌다고 표현한다.

반복문은 거짓이 되는 조건문과 함께 작성해서 무한반복이 되지 않도록 해야한다. break 문을 사용하여 무한루프에서 빠져나오게 처리할수도 있다.

for (let i = 0; true; i++) {
  alert(i + "번째 반복문입니다.");
  let isContinue = comfirm("계속 하시겠습니까?");
  if (!isContinue) {
    break;
  }
}

1.3.6. continue

Info: 👩🏽‍🤝‍🧑🏾빨간티는 통과

반목문에서 특정 부분을 실행하지 않게 하고 싶을 때 사용 아래는 continue의 기본 문법이다.

continue

Info: 실행

1부터 10까지에서 3의 배수를 제외한 나머지 수의 합을 구해보자

  let x = 0;
  let total = 0;
  while(x < 10) {
    x++;
    if(0 == x % 3) { continue; }
    total = total + x;
    document.write(x);
    if(x != 10) { document.write('+'); }
  }
  document.write("=", total)

1.3.7. for-in

Info: 배열을 순회하면서 요소의 인덱스 번호를 반환

객체에도 사용가능

const strArr = ["a", "b", "c", "d", "e", "f",];
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
for (let index in strArr) {
  console.log(index);
}
for (let key in obj) {
  console.log(key);
}

1.3.8. for-of

1.4. 반복문 총정리

위에서 학습한것 이외에도 반복문은 더 많은 종류가 있으며 다양하게 활용활수 있다. 이번에는 다양한 반복문과 활용사례를 알아보자

1.4.1. 반복문과 dom 조작

Info: 실행

반복문을 사용하여 태그와 콘텐츠를 삽입 해 보자. 이런 작업을** 동적 할당 **이라고 한다.

**시작코드**

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>반복문</h1>
    <h2>for</h2>
    <div id="for"></div>
    <hr />
    <h2>forEach</h2>
    <div id="foreach"></div>
    <hr />
    <h2>for of</h2>
    <div id="forof"></div>
    <hr />
    <h2>for in</h2>
    <div id="forin"></div>
    <hr />
    <h2>do / while</h2>
    <div id="dowhile"></div>
  </body>
</html>

다양한 반복문을 작성해보자

//lunch_menus 배열 변수를 선언하고  "떡볶이", "순대", "오뎅" 을 할당후 초기화 하였다.
const lunch_menus = ["떡볶이", "순대", "오뎅"];
//반복문 for 를 사용하여 lunch_menus 배열 원소의 갯수 만큼 동적요소를 #for 하위에 할당한다.
for (let i = 0; i < lunch_menu.lenght; i++) {
  document.querySelector("#for").innerHTML += `${i}:${lunch_menus[i]}<br>`;
}

forEach

//foreach -> 배열에만 사용 인자의 첫번째는 요소, 두번째는 인덱스번호
lunch_menus.forEach(function myFunction(item, index) {
  document.getElementById("foreach").innerHTML += index + " : " + item + "<br>";
});

for (let x of lunch_menus) {
  document.querySelector("#forof").innerHTML += x + "<br>";
}

for (let j in lunch_menus) {
  document.querySelector("#forin").innerHTML += `${j}:${lunch_menus[j]}<br>`;
}

do/while

let d = 0;
do {
  document.getElementById("dowhile").innerHTML += lunch_menus[d] + "<br>";
  d++;
} while (d < lunch_menus.length);
/* while 안의 조건이 참인동안 do를 실행 */

1.5. 마무리문제

1.5.1. 문제1

Info: 실행 자리배치도를 만드세요

🔗이전문제에서 작성했던 조건문을 활용하여 좌석의 번호를 출력하는 프로그램을 작성하세요

**시작코드**

<!DOCTYPE html>
<html lang="ko">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>문제1</title>
     <style>
         table,
         td {
             border: 1px solid #ccc;
             border-collapse: collapse;
         }
         td {
             padding: 5px;
             font-size: 0.9em;
         }
     </style>
 </head>
 <body>
     <h1>자리 배치도</h1>
     <script>
        //중첩for문 활용
     </script>
 </body>
</html>

1.5.2. 문제2

Info: 실행 다음 조건을 확인하여 사용자가 입력한 숫자가 4의 배수인지 확인하는 프로그램을 작성하세요

프롬프트 문을 이용하여 숫자를 입력 받으세요
[취소] 버튼을 누르면 결과를 출력하지 않습니다.
입력받은 숫자를 4로 나눈 나머지가 0이면 4의 배수이고 아니면 4의 배수가 아닙니다.

**시작코드**

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>문제2</title>
	<style>
		body {
			font-size:1.2em;
			text-align:center;
		}
	</style>
</head>
<body>
	<h2>4의 배수일까 아닐까</h2>
	<script>
	//코드를 작성하세요
	</script>
</body>
</html>

1.5.3. 문제3

Info: 실행 숫자를 입력 받은후 1부터 그 숫자까지 3의 배수를 모두 출력합니다.

그후 출력된 3의 배수가 총 몇 개인지 출력합니다. 아래의 조건을 확인하여 프로그램을 작성하세요

프롬프트 문을 이용하여 숫자를 입력 받으세요
[취소] 버튼을 누르면 결과를 출력하지 않습니다.
반복문을 이용해서 1부터 입력받은 숫자까지 실행합니다.
3의 배수인지 알려면 입력받은 숫자를 3으로 나눈 나머지가 0인지 확인합니다.
카운터의 갯수를 함께 출력합니다.

**시작코드**

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>문제3</title>
    <style>
      body {
      	font-size:1.2em;
      	text-align:center;
      }
      p {
      	color:#f00;
      	font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>3의 배수 찾기</h2>
    <script>
      //코드를 작성하세요
    </script>
  </body>
</html>

제어문

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

Info: 💡

1. 제어문

제어문이란 프로그램의 실행 흐름을 제어하는 구문 입니다.

Info: 제어문 에는 조건문, 선택문, 반복문 이 있습니다.

조건문이란 조건에 따라 실행이 달라지게 할 때 사용되는 제어문입니다. ◦ 자바 스크립트의 조건문 에는if, else, else if가 있습니다.

선택문이란 값에 따라서 실행 내용을 선택하여 실행 할때 사용되는 제어문입니다. ◦ 자바 스크립트의 선택문 에는 switch가 있습니다.

반복문이란 주어진 조건에 따라서 문장을 반복 실행 할때 사용되는 제어문 입니다 - 자바 스크립트의 반복문 에는 for, while, do while 등이 있습니다.

1.1. 조건문

1.1.1. if

지금부터 자바스크립트의 조건문과 조건 연산자에 대해 학습하겠습니다.

if (//조건) {
//조건이 참일때 실행문;
}

실행

let gender = "남자";
document.write("당신은" + gender + "이므로");
if (gender == "남자") document.write("치마를 입으세요.");
if (gender == "여자") document.write("바지를 입으세요.");

실행

const date = new Date();
const hour = date.getHours();
console.log(hour);
if (hour < 12) {
  document.querySelector("body").style.backgroundColor = "ivory";
  document.querySelector("body").style.color = "red";
}
if (hour > 12) {
  document.querySelector("body").style.backgroundColor = "black";
  document.querySelector("body").style.color = "white";
}

1.1.2. if ~ else if

if문은 조건이 true 일때만 실행할수 있으므로 false 일때도 명령을 하려면 실행문을 두번 작성해야 하는 번거로움이 있습니다.

이럴때 else 를 사용하면 됩니다. 아래는 if ~ else if 문의 기본 문법 예시입니다.

if (//조건A) {
	//조건A가 참일때 실행문
} else if (//조건B){
	//조건A가 거짓이고 조건B가 참일때 실행문
}

실행

<!DOCTYPE html><html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Else-If & Nesting</title>
  </head>
  <body>
    <h1>Else-If & Nesting</h1>

    <script>
		const d = new Date(10, 30, 2022, 6, 0, 0);
		const hour = d.getHours();

		if (hour < 12) {
		  console.log('Good Morning');
		} else if (hour < 18) {
		  console.log('Good Afternoon');
		} else {
		  console.log('Good Night');
		}

		// Nested If
		if (hour < 12) {
		  console.log('Good Morning');

		  if (hour === 6) {
		    console.log('Wake Up!');
		  }
		} else if (hour < 18) {
		  console.log('Good Afternoon');
		} else {
		  console.log('Good Night');

		  if (hour >= 20) {
		    console.log('zzzzzzzz');
		  }
		}

		if (hour >= 7 && hour < 15) {
		  console.log('It is work time!');
		}

		if (hour === 6 || hour === 20) {
		  console.log('양치해!');
		}
	</script>
  </body>
</html>

1.1.3. 문제

실행

Info: 질의응답 창(prompt)을 이용하여 사용자의 시험점수를 입력 받으시오. 시험 점수가 70점 이상이면 ‘합격’이라는 메시지를 출력하시오

1.1.4. .문제

실행

Info: 사용자로부터 입력받은 숫자가 3의 배수인지를 확인후 결과를 출력하는 프로그램을 작성하시오

1.1.5. 문제

실행

Info: if-else 나이가 20세 이상이고, 30세 미만일 경우에는 ’통과’라고 출력하고, 그렇지 않으면 ’비통과’라고 출력하시오.

힌트 : 이상은 해당 숫자를 포함하고 미만은 해당 숫자를 포함하지 않아요

1.1.6. 문제

실행

Info: if-else if

1.1.7. 문제

Info: 4.1.6 의 조건문을 if~else 문으로 변경해 보세요.

힌트: 조건문을 줄여보는 거에요

1.1.8. 문제

실행

Info: 사용자로 취득점수를 입력 받습니다. 점수가 90점 이상 일 경우 A학점, 80점 이상 일 경우 B학점, 70점 이상 일 경우 C학점 , 60점 이상 일 경우 D학점, 60점 이하 일 경우 F학점 의 메시지를 출력하는 프로그램을 작성하세요

1.1.9. 논리연산자를 활용한 조건문

두조건이 true 일 경우와 조건 1개만 true 일 경우 처럼 여러 경우의 수를 따질때는 논리 연산자를 사용합니다.

1.1.9.1. OR

Info: OR 연산자는 || 를 사용하며 우항의 2개중 true가 하나라도 있으면 결과를 true로 반환합니다.

Info: 실행

OR 연산자를 사용하여 50보다 작은 숫자 2개를 입력받아 둘 중 하나가 50보다 작은 지를 판단하는 프로그램을 작성해 보자

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>조건문</title>
  </head>
  <body>
    <script>
      let numberOne = prompt('50미만의 숫자를 입력하세요.');
      let numberTwo = prompt('50미만의 숫자를 입력하세요.');
      if (numberOne < 50 || numberTwo < 50) alert('두 개의 숫자 중 최소한 하나는 50 미만이군요.');
      else alert('두 개의 숫자 중 50 미만인 수는 없습니다.');
    </script>
  </body>
</html>

1.1.9.2. AND

Info: *AND 연산자는 && 를 사용하며 우항의 2개중 false가 하나라도 있으면 결과를 false로 반환합니다

Info: 실행

AND 연산자를 사용하여 입력한 두개의 숫자가 50보다 작은지 체크하는 프로그램을 작성해보자.

let numberOne = prompt("50미만의 숫자를 입력하세요.");
let numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne < 50 && numberTwo < 50) alert("두 개의 숫자 모두 50 미만이군요.");
else alert("조건에 맞지 않는 숫자가 있습니다.");

1.1.9.3. NOT

Info: 🐸 NOT 연산자는 ! 를 사용하며 청개구리 처럼 결과값을 반대로 반환합니다. 결과가 true 이면 false 를 결과가 false 이면 true 를 반환합니다.

Info: 실행

NOT 연산자를 사용하여 사용자가 입력한 값이 null 이 아닌지를 체크해 보자.

let numberOne = prompt("50미만의 숫자를 입력하세요.");
let numberTwo = prompt("50미만의 숫자를 입력하세요.");
if (numberOne !== null && numberTwo !== null) {
  if (numberOne < 10 || numberTwo < 10)
    alert("두 개의 숫자 중 최소한 하나는 10 미만이군요.");
  else alert("두 개의 숫자 중 10 미만인 수는 없습니다.");
} else {
  alert("50 미만의 숫자를 입력하세요.");
}

1.1.10. 조건 계산을 빠르게 하는 방법

1.2. 선택문

switch (조건) {
  case 값1:
    명령1;
    break;
  case 값2:
    명령2;
    break;
  default:
    기본명령;
}

1.2.1. switch

Info: 실행

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>세션 선택 - switch문</title>
    <link rel="stylesheet" href="css/switch.css" />
  </head>
  <body>
    <script>
      let session = prompt('관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인');
        switch (session) {
          case '1':
          document.write('<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>');
          break;
            case '2':
            document.write('<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>');
            break;
            case '3':
            document.write('<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>');
            break;
            default:
            alert('잘못 입력했습니다.');
          }
    </script>
  </body>
</html>

CSS

body {
background-color: #0c3268;
color: rgb(243, 243, 243);
}
p {
margin-top: 80px;
font-size: 2em;
font-weight: 700;
text-align: center;
text-shadow: 1px 2px 1px #000;
}
p strong {
font-size: 2.2em;
color: yellow;
}

1.2.2. 문제

Info: 실행

1.2.3. 문제

Info: 실행

전체 입장객의 수가 10명이고 한줄에 2명씩 앉아야 한다면 10/2 를 하여 총 5줄이 필요하겠죠?
필요한 값들을 변수로 지정하고 프로그램을 작성해보세요.

해답

1.3. 반복문

반목문이란 주어진 조건에 따라서 문장을 반복 실행하게 하는 제어문입니다. 자바 스크립트에서 반복문은 for문, while문, do while문이 있습니다.

1.3.1. for

for 문의 기본 문법은 아래와 같습니다.

for (초기값; 조건; 증가식) {
  실행문;
}

Info: 실행

for 문을 활용하여 1부터 5를 더한 합을 출력하는 프로그램을 작성해봅시다. 우선 반복문 없이 작성해 보겠습니다.

// 반복문 사용전
let sum = 0;

sum += 1;
sum += 2;
sum += 3;
sum += 4;
sum += 5;
document.write(‘1부터 5까지 더하면’ + sum);

위의 코드를 반복문으로 작성할 경우 훨씬 간단히 작성할수 있습니다. (refectoring) 실행

//반복문 사용후

let i;
let sum = 0;

for (i = 1; i < 6; i++) {
    sum += i;
}
document.write('1부터 5까지 더하면 ' + sum);

for 문은 초기값->조건->실행문->증가식의 순서로 수행합니다.

Info: 실행

for 문을 사용해 1부터 100까지 숫자를 더하는 프로그램을 작성해보세요.

해답

let i;
let sum = 0;

for(i = 1; i < 1001; i++) {
    sum += i;
}
document.write("1부터 5까지 더하면 " + sum);

1.3.2. 중첩 for

for문 안에 for문이 포함될 경우 어떻게 연산이 이루어지는지 알아보겠습니다. 중첩for 문은 아래와 같은 형태를 가집니다.

for (초기값1; 조건1; 증가식1) {
  실행문1;
  for (초기값2; 조건2; 증가식2) {
    실행문2;
  }
}

연산순서는 아래의 그림과 같습니다.

3-2에서 false 가 나올때까지 3-1~3-4 를 수행합니다. 3-2에서 false 가 나오면 바깥의 for문을 다시 반복합니다.

1 → 2 → 3
    ↓
   3-1 → 3-2 → 3-3 → 3-4

Info: 실행

중첩 for문으로 1단부터 9단까지 구구단을 계산하는 프로그램을 작성 해보겠습니다

<!DOCTYPE html><html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>구구단 - for문</title>
</head>
<body>
	<h1>구구단</h1>
	<script>
		var i, j;

		for (i = 1; i <= 9; i++) {
			document.write("<h3>" + i + "단</h3>");
			for (j = 1; j <= 9; j++) {
				document.write(i +" X " + j + " = " + i*j + "<br>");
			}
		}
	</script>
</body>
</html>

Info: 실행

동적요소를 추가하여 디자인을 수정 해봅시다.

스타일을 작성합니다

div {
    display: inline-block;
    padding: 0 20px 30px 20px;
    margin: 15px;
    border: 1px solid #ccc;
    line-height: 2;
}
div h3 {
    text-align: center;
    font-weight: bold;
}

동적요소를 추가합니다

let i, j;
for (i = 1; i <= 9; i++) {
  document.write(`<div><h3>${i}단</h3>`);
  for (j = 1; j <= 9; j++) {
    document.write(`${i}X${j}=${i * j}<br>`);
  }
  document.write("</div>");
  if (i === 3) break;
}

⚠️ document.write($\{i\}단); document.write 메서드의 인자로 태그를 전달하면 간단한 구조의 동적요소를 추가할수 있습니다.

1.3.3. 문제

Info: 실행1

중첩for문 을 활용하여 실행화면을 출력하는 프로그램을 작성하시오.

Info: 실행2

중첩for문 을 활용하여 실행화면을 출력하는 프로그램을 작성하시오.

1.3.4. 반복문-do/while

Info: while 문은 do와 함께 사용하기도 하고 단독으로 사용하기도 한다. while 문을 활용한 반복문을 알아보자.

아래는 while 문의 기본형이다.

let init=초기값;
while(조건식){
//조건식이 참일때 실행문
//증가식
}

1.3.4.1. while

Info: 실행

1부터 10까지 더하는 프로그램을 작성해보자

var i = 1; //초기값
while (i <= 10) {
  document.write(i + "<br />");
  i++;
}

1.3.4.2. do/while

Info: do/while 문은 최초 한번은 무조건 실행한후 조건을 비교하는 것이 특징이다. 아래는 while 문의 기본형이다.

let init=초기값;
do{
	//실행문
	//증가식
}
while(조건식)

Info: 실행

사용자가 입력한 값이 숫자가 맞다면 1부터 입력한 숫자까지의 합을 출력하는 프로그램을 만들어보자

let num;
let sum = 0;
do {
  num = prompt("숫자를 입력하세요");
} while (
  //isNaN은 자료형이 isNaN 인지 검사한다. 즉 num의 값이 isNaN 이면 조건이 false 가 된다.
  isNaN(num)
);
// parseInt 함수는 소수점자리를 버리기 위해 사용하였다.
for (let i = 1; i <= parseInt(num); i++) {
  sum += i;
}

document.write("1부터 입력한 숫자까지의 합은 " + sum + "입니다.");

1.3.5. break

Info: 반복문에서 탈출할때는 break를 사용한다. 아래는 break의 기본 문법이다.

break

Info: 실행 반복문에서 헤어나오지 못하는 상황을 무한루프 라고 한다. break문으로 무한루프에서 탈출해보자

항상 true인 조건에 반복문을 작성한다.

for (let i = 0; true; i++) {
  alert(i + "번째 반복문입니다.");
}

위의 조건은 늘 참이므로 계속 실행된다. 이렇게 끝도 없이 반복되는 현상을 무한 루프에 빠졌다고 표현한다.

반복문은 거짓이 되는 조건문과 함께 작성해서 무한반복이 되지 않도록 해야한다. break 문을 사용하여 무한루프에서 빠져나오게 처리할수도 있다.

for (let i = 0; true; i++) {
  alert(i + "번째 반복문입니다.");
  let isContinue = comfirm("계속 하시겠습니까?");
  if (!isContinue) {
    break;
  }
}

1.3.6. continue

Info: 👩🏽‍🤝‍🧑🏾빨간티는 통과

반목문에서 특정 부분을 실행하지 않게 하고 싶을 때 사용 아래는 continue의 기본 문법이다.

continue

Info: 실행

1부터 10까지에서 3의 배수를 제외한 나머지 수의 합을 구해보자

  let x = 0;
  let total = 0;
  while(x < 10) {
    x++;
    if(0 == x % 3) { continue; }
    total = total + x;
    document.write(x);
    if(x != 10) { document.write('+'); }
  }
  document.write("=", total)

1.3.7. for-in

Info: 배열을 순회하면서 요소의 인덱스 번호를 반환

객체에도 사용가능

const strArr = ["a", "b", "c", "d", "e", "f",];
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
for (let index in strArr) {
  console.log(index);
}
for (let key in obj) {
  console.log(key);
}

1.3.8. for-of

1.4. 반복문 총정리

위에서 학습한것 이외에도 반복문은 더 많은 종류가 있으며 다양하게 활용활수 있다. 이번에는 다양한 반복문과 활용사례를 알아보자

1.4.1. 반복문과 dom 조작

Info: 실행

반복문을 사용하여 태그와 콘텐츠를 삽입 해 보자. 이런 작업을** 동적 할당 **이라고 한다.

**시작코드**

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>반복문</h1>
    <h2>for</h2>
    <div id="for"></div>
    <hr />
    <h2>forEach</h2>
    <div id="foreach"></div>
    <hr />
    <h2>for of</h2>
    <div id="forof"></div>
    <hr />
    <h2>for in</h2>
    <div id="forin"></div>
    <hr />
    <h2>do / while</h2>
    <div id="dowhile"></div>
  </body>
</html>

다양한 반복문을 작성해보자

//lunch_menus 배열 변수를 선언하고  "떡볶이", "순대", "오뎅" 을 할당후 초기화 하였다.
const lunch_menus = ["떡볶이", "순대", "오뎅"];
//반복문 for 를 사용하여 lunch_menus 배열 원소의 갯수 만큼 동적요소를 #for 하위에 할당한다.
for (let i = 0; i < lunch_menu.lenght; i++) {
  document.querySelector("#for").innerHTML += `${i}:${lunch_menus[i]}<br>`;
}

forEach

//foreach -> 배열에만 사용 인자의 첫번째는 요소, 두번째는 인덱스번호
lunch_menus.forEach(function myFunction(item, index) {
  document.getElementById("foreach").innerHTML += index + " : " + item + "<br>";
});

for (let x of lunch_menus) {
  document.querySelector("#forof").innerHTML += x + "<br>";
}

for (let j in lunch_menus) {
  document.querySelector("#forin").innerHTML += `${j}:${lunch_menus[j]}<br>`;
}

do/while

let d = 0;
do {
  document.getElementById("dowhile").innerHTML += lunch_menus[d] + "<br>";
  d++;
} while (d < lunch_menus.length);
/* while 안의 조건이 참인동안 do를 실행 */

1.5. 마무리문제

1.5.1. 문제1

Info: 실행 자리배치도를 만드세요

🔗이전문제에서 작성했던 조건문을 활용하여 좌석의 번호를 출력하는 프로그램을 작성하세요

**시작코드**

<!DOCTYPE html>
<html lang="ko">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>문제1</title>
     <style>
         table,
         td {
             border: 1px solid #ccc;
             border-collapse: collapse;
         }
         td {
             padding: 5px;
             font-size: 0.9em;
         }
     </style>
 </head>
 <body>
     <h1>자리 배치도</h1>
     <script>
        //중첩for문 활용
     </script>
 </body>
</html>

1.5.2. 문제2

Info: 실행 다음 조건을 확인하여 사용자가 입력한 숫자가 4의 배수인지 확인하는 프로그램을 작성하세요

프롬프트 문을 이용하여 숫자를 입력 받으세요
[취소] 버튼을 누르면 결과를 출력하지 않습니다.
입력받은 숫자를 4로 나눈 나머지가 0이면 4의 배수이고 아니면 4의 배수가 아닙니다.

**시작코드**

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>문제2</title>
	<style>
		body {
			font-size:1.2em;
			text-align:center;
		}
	</style>
</head>
<body>
	<h2>4의 배수일까 아닐까</h2>
	<script>
	//코드를 작성하세요
	</script>
</body>
</html>

1.5.3. 문제3

Info: 실행 숫자를 입력 받은후 1부터 그 숫자까지 3의 배수를 모두 출력합니다.

그후 출력된 3의 배수가 총 몇 개인지 출력합니다. 아래의 조건을 확인하여 프로그램을 작성하세요

프롬프트 문을 이용하여 숫자를 입력 받으세요
[취소] 버튼을 누르면 결과를 출력하지 않습니다.
반복문을 이용해서 1부터 입력받은 숫자까지 실행합니다.
3의 배수인지 알려면 입력받은 숫자를 3으로 나눈 나머지가 0인지 확인합니다.
카운터의 갯수를 함께 출력합니다.

**시작코드**

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>문제3</title>
    <style>
      body {
      	font-size:1.2em;
      	text-align:center;
      }
      p {
      	color:#f00;
      	font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>3의 배수 찾기</h2>
    <script>
      //코드를 작성하세요
    </script>
  </body>
</html>