[Javascript] 3일차 - 제어문

🚩 3일차 : 『Do it! 자바스크립트 입문』 4장

04-1 조건에 따라 흐름 조절하기 - if문, if...else문과 조건 연산자

if문과 if...else문 작동 원리 알아보기

① if문
if문은 소괄호 안의 조건이 true일 때 중괄호 안의 자바스크립트 소스를 실행하고, false이면 중괄호 안의 자바스크립트 소스를 무시한다.

② if...else문
조건이 true일 때 실행할 명령과 조건이 false일 때 실행할 명령이 따로 있다면 if문과 else문을 함께 사용한다.

1분 복습 변수 age 값이 18보다 크거나 같으면 "성인입니다."라고 표시하고 그렇지 않으면 "미성년입니다."라고 알림 창에 표시하는 소스를 작성하세요.

var age = prompt("나이를 입력하세요 : ");
if(age>=18) {
    alert("성인입니다.");
}
else {
    alert("미성년입니다.");
}

조건 연산자 - ?(물음표)와 :(콜론)

조건도 하나, true일 때와 false일 때 실행할 명령도 각각 하나씩이라면 if...else문 대신 조건 연산자를 사용하는 것이 간단하다.

(조건) ? 조건이true일때명령 : 조건이false일때명령

위와 같은 형식으로 조건 연산자를 사용할 수 있다. 예컨대, 다음과 같다.

var score = 75;
(score >= 60) ? alert("통과") : alert("실패");

truthy 값과 falsy 값

truthy는 true로 인정할 수 있는 값, falsy는 false로 인정할 수 있는 값이다. falsy를 제외한 나머지는 truthy이다. 다음은 falsy하게 인정되는 값들이다.

0			// 숫자
""			// 빈 문자열
NaN			// 숫자가 아님(Not a Number)
undefined
null

truthy와 falsy는 조건을 확인할 때 이용할 수 있다.

var input = prompt("이름을 입력하세요.");
if(input) {
  alert("이름을 입력했습니다 : " + input);
}
else {
  alert("이름을 입력하지 않았습니다.");
}

프롬프트창에 아무것도 입력하지 않거나(input = ""), 취소 버튼을 누르면(input = null) 확인 결과는 false가 되고, 무엇이든 값을 입력하면 true가 된다.

실습 : 3의 배수 검사기 만들기

	<script>
		var userNumber = prompt("숫자를 입력하세요.");
		var displayArea = document.querySelector('#result');
		if(userNumber != null) {
			if(userNumber % 3 === 0) {
				displayArea.innerHTML = userNumber + "은 3의 배수입니다.";
			}
			else {
				displayArea.innerHTML = userNumber + "은 3의 배수가 아닙니다.";
			}
		}
		else {
			alert("입력이 취소되었습니다.");
		}
	</script>

04-2 조건이 많을 때 흐름 조절하기 - switch문

실습 : switch문으로 여러 조건 값 확인하기

switch문 사용법
1. switch 예약어 오른쪽에 괄호와 함께 값을 확인할 변수를 지정한다.
2. 조건은 case문 다음에 콜론(:)을 붙여 지정하고, 해당 값일 때 실행할 명령도 콜론 다음에 나열한다. 명령이 둘 이상일 경우 명령을 중괄호로 묶는다.
3. 명령을 실행한 뒤에는 break문을 사용해서 switch문에서 완전히 빠져나온다.
4. default:는 사용자가 입력한 값이 case문에서 지정한 조건 값과 전부 일치하지 않을 때 실행할 명령이다. default:에서는 break문을 사용하지 않는다.

	<script>
		var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인", "1");
		
		switch(session) {
			case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>");
				break;
			case "1" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
				break;
			case "1" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>");
				break;
			default: alert("잘못 입력했습니다.");
		}
	</script>

04-3 명령 반복 실행하기 - for문

실습 : for문 작동 과정 이해하기

<script>
    var sum = 0;

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

1분 복습 1부터 100까지 더하는 for문 작성하기

var sum = 0;

for(var i = 1; i < 101; i++) {
    sum += i;
}
document.write("1부터 100까지 더하면 " + sum + " 입니다.");

04-4 for문 반복하기 - 중첩 for문

실습 : 별 찍기 실습으로 중첩 for문 알아보기

<script>
	for(var k = 0; k < 5; k++) {
		for(var i = 0; i < 30; i++) {
		document.write('*');
		}
		document.write("<br>");
	}
</script>

실습 : 구구단 프로그램 만들기

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

1분 복습 위 실습에서 작성한 소스는 2단에서 9단까지 표시하고 있다. 2단에서 5단까지만 표시하도록 소스를 수정하라.

	<script>
		for(i = 2; i <= 5; i++) {
			document.write("<div>");
			document.write("<h3>" + i + "단</h3>");
			for(j = 1; j < 10; j++) {
				document.write(i + " X " + j + " = " + i * j + "<br>");
			}
			document.write("</div>");
		}
	</script>

04-5 특정 조건에 따라 반복하기 - while문, do...while문

for문은 횟수가 정해져 있는 반복 명령을 작성할 때 편리하다. 반면에 while문와 do...while문은 특정 조건을 만족하는 동안에만 명령을 반복한다.

① while문

② do...while문
do...while문은 조건이 맨 뒤에 온다. 또한 do...while문은 조건이 false라고 해도 문장이 최소한 한 번은 실행된다.

어떤 반복문을 사용해야 할까?

for문 : 초깃값이 존재하면서 일정한 간격으로 반복할 때
while문, do...while문 : 초깃값이나 반복 주기가 없으므로 조건을 만족하는 동안만 반복될 때. 조건이 false일 때 아예 실행하지 않으려면 while문, 일단 한번 실행한 뒤에 상황에 따라 반복 여부를 지정할 때에는 do...while문

실습 : 팩토리얼 계산기 만들기

	<script>
		var n = prompt("숫자를 입력하세요.");
		// 몇까지 곱할지 사용자에게 프롬프트 창으로 입력받아 저장
		var nFact = 1;
		// 팩토리얼 계산 결괏값을 저장할 변수. 1을 기본 값으로 지정
		var i = 2;
		// 반복문에 사용할 카운터 변수

		while (i <= n) {
			nFact *= i;
			i++;
		}

		document.write(n + "!= " + nFact);
	</script>

1분 복습 프롬프트 창에 기본 값이 10으로 표시되게 하려면?

prompt("숫자를 입력하세요.", 10);

04-6 반복을 건너뛰거나 멈추기 - break문, continue문

break문 : 반복문의 특정 지점에서 반복을 중단함
continue문 : 반복문의 특정 지점에서 반복문의 시작 지점으로 되돌아감

실습 : 짝수 더하기 프로그램 만들기

	<script>
		var n = 10;
		var sum = 0;

		for (var i = 1; i <= n; i++) {
			if (i % 2 === 1) {
				continue;
			}
			else {
				sum += i;
			}

			document.write(i + " ------ " + sum + "<br>");
		}
	</script>

도전! 응용 문제

1번

	<script>
	var num = prompt("숫자를 입력하시오.");
	// 사용자가 프롬프트창에 입력한 숫자를 저장하는 변수
	
	if (num != null) {
    // 사용자가 프롬프트창에서 확인을 눌렀을 경우
		if (num % 2 === 0) {
        // 사용자가 입력한 값이 짝수일 경우
			document.write(num + "은 짝수입니다.");
		}
		else {
        // 사용자가 입력한 값이 홀수일 경우
			document.write(num + "은 홀수입니다.");
		}
	}
	else {
    // 사용자가 프롬프트창에서 취소를 눌렀을 경우
		alert("입력이 취소되었습니다.");
	}
	</script>

2번

	<script>
		
		var count = 0;
		// 3의 배수 개수를 저장하는 변수

		for(var i = 1; i <= 100; i++) {
			if (i % 3 != 0) {
				continue;
            // i가 3의 배수가 아니면 반복문의 처음으로 돌아감
			}
          
			else {
				document.write(i + ", ");
				count += 1;
            /* i가 3의 배수면 i를 화면에 출력하고,
            3의 배수 개수를 하나씩 늘린다. */
			}
		}
		document.write("<br>3의 배수의 개수는 " + count + "입니다.");
	</script>

요약

• 조건에 맞는지만 확인하면 if문, 조건이 true일 때와 false일 때를 구분해야 하면 if...else문을 활용한다.
• 조건 연산자에는 물음표와 콜론이 있다.
• truthy와 falsy : 숫자, 빈 문자열, NaN, undefined, null은 falsy다. falsy를 제외한 나머지는 truthy이다.
• switch문 사용법

1. switch 예약어 오른쪽에 괄호와 함께 값을 확인할 변수를 지정한다.
2. 조건은 case문 다음에 콜론(:)을 붙여 지정하고, 해당 값일 때 실행할 명령도 콜론 다음에 나열한다. 명령이 둘 이상일 경우 명령을 중괄호로 묶는다.
3. 명령을 실행한 뒤에는 break문을 사용해서 switch문에서 완전히 빠져나온다.
4. default:는 사용자가 입력한 값이 case문에서 지정한 조건 값과 전부 일치하지 않을 때 실행할 명령이다. default:에서는 break문을 사용하지 않는다.

• for문은 초깃값이 존재하면서 일정한 간격으로 반복할 때 사용한다. while문, do...while문은 초깃값이나 반복 주기가 없으므로 조건을 만족하는 동안만 반복될 때 사용한다. 조건이 false일 때 아예 실행하지 않으려면 while문, 일단 한번 실행한 뒤에 상황에 따라 반복 여부를 지정할 때에는 do...while문을 이용한다.
• break문은 반복문의 특정 지점에서 반복을 중단한다. continue문은 반복문의 특정 지점에서 반복문의 시작 지점으로 되돌아간다.

복습용 문제

책 참고해서 내가 만든 문제임. 익숙해졌다 싶으면 2, 4, 5, 6번 문제만 풀기

1) 7의 배수 검사기 만들기

프롬프트 창을 통해 사용자에게 값을 입력받는다. 해당 값이 7의 배수인지 아닌지 판단해서 맞으면 해당 값이 7의 배수가 맞다고, 아니면 아니라고 화면에 출력한다. 이때 사용자가 프롬프트 창에서 '취소' 버튼을 눌렀을 경우 "입력을 취소하였습니다."라는 알림 창이 뜬다.

• prompt(), if...else문, document.write()을 사용할 것.

2) 자신이 속한 인구 구조 집단 알아보기

프롬프트 창을 통해 사용자에게 나이를 입력받는다. 해당 값이 생산가능인구, 소년부양인구, 노인부양인구 중 어디에 속하는지 판단하고 화면에 결과를 출력한다. 사용자가 프롬프트 창에서 '취소' 버튼을 누를 경우는 생각하지 않는다.
생산가능인구 : 만 15세 이상 만 64세 이하 인구
소년부양인구 : 만 15세 미만 인구
노인부양인구 : 만 65세 이상 인구

• prompt(), switch문, case문, break문, document.write()을 사용할 것.

3) for문을 사용하여 팩토리얼 계산기 만들기

프롬프트 창을 통해 사용자에게 값을 입력받는다(항상 양의 정수를 입력받는다고 가정). for문을 이용하여 해당 값까지 반복해서 곱하고 결과를 화면에 출력하는 계산기를 만든다. 사용자가 프롬프트 창에서 '취소' 버튼을 누를 경우는 생각하지 않는다.

4) for문을 사용하며 1단부터 9단까지 출력하는 구구단 프로그램 만들기

for문을 이용하여 1단부터 9단까지 출력하는 구구단 프로그램을 만든다.

5) while문을 사용하여 1단부터 9단까지 출력하는 구구단 프로그램 만들기

6) 4의 배수 출력 및 더하는 프로그램 만들기

• 1부터 100까지 숫자 중 4의 배수를 모두 화면에 표시
• 1부터 100까지 4의 배수 개수를 화면에 표시
• 1부터 100까지 4의 배수를 모두 더한 결과를 화면에 표시
  
  

참고문헌
고경희, 『Do it! 자바스크립트 입문』, 이지스퍼블리싱, 2021