11 반복문 실습, 예제 및 실행 흐름 분석!
# 반복문 실습
## 미션
반복문의 개념과 각 요소별 사용법을 실제 코드를 통해 익히시오.
<img src="http://drive.google.com/uc?export=view&id=1ifX1pNpjZtrETEr3283O6gLW8xOGuZCB" alt="홍팍-자바스크립트-반복문-실습-미션">
## 00:56 기본파일 생성
loops.html
```
<!-- HTML 관련 구글링 -->
<!-- 👉 site:developer.mozilla.org {연관_키워드} -->
<html lang="en">
<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>
<!-- 외부 파일 연결 -->
<link rel="stylesheet" href="loops.css">
<Script defer src="loops.js"></Script>
</head>
<body>
<h1>반복문, 노가다 코딩 줄이기!</h1>
<h2>for 문: 술래잡기</h2>
<pre>
1
2
3
..
10
찾는다~
</pre>
<h2>for 문: 홀수 세기</h2>
<pre>
1
3
5
7
9
찾는다~
</pre>
<h2>for 문: 카운트다운</h2>
<pre>
카운트다운을 시작합니다..
5
4
3
2
1
0
발사!!
</pre>
<h2>while 문: 숫자 맞추기#1</h2>
<pre>
### START ###
랜덤 정수 X(1~10)를 맞춰주세요: 3
UP 👍
랜덤 정수 X(1~10)를 맞춰주세요: 7
DOWN 👎
랜덤 정수 X(1~10)를 맞춰주세요: 5
UP 👍
랜덤 정수 X(1~10)를 맞춰주세요: 6
X = 6, 정답입니다 ⭕️
랜덤 정수 X(1~10)를 맞춰주세요: q
### END ###
</pre>
<h2>break: 숫자 맞추기#2</h2>
<pre>
### START ###
랜덤 정수 X(1~10)를 맞춰주세요: 3
UP 👍
랜덤 정수 X(1~10)를 맞춰주세요: 7
DOWN 👎
랜덤 정수 X(1~10)를 맞춰주세요: 5
UP 👍
랜덤 정수 X(1~10)를 맞춰주세요: 6
X = 6, 정답입니다 ⭕️
### END ###
</pre>
<h2>continue: 심플 삼육구!</h2>
<pre>
### START ###
1
2
짝
4
5
짝
7
8
짝
10
### END ###
</pre>
<h2>nested: 구구단!</h2>
<pre>
2 x 1 = 2
2 x 2 = 3
..
2 x 9 = 18
3 x 1 = 3
3 x 2 = 6
..
9 x 8 = 72
9 x 9 = 81
</pre>
</body>
</html>
```
loops.css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
pre {
background-color: #efefef;
padding-top: 1rem;
margin: 0;
}
```
loops.js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
## 02:00 for 문 - 숫자세기
```
// 1. for 문
// - 반복 횟수가 명확할 때 좋은 반복문
// - 구성요소는 다음과 같음
// (a) 초기화: 반복 시작시 단 한번 실행
// (b) 조건식: 참이면 반복구문을 수행
// (c) 반복코드: 반복할 명령들
// (d) 갱신: 반복코드의 실행이 끝난 뒤, 수행
// 상황설정: 술래잡기 시작 전, 숫자세기!
function countUpNumbers() {
console.log("1부터 10까지 세고 시작한다~");
for (let num = 1; num <= 10; num += 1) {
console.log(num);
}
console.log("찾는다~");
}
countUpNumbers();
```
## 05:44 for 문 - 홀수세기
```
// 상황설정: 술래잡기 시작 전, 숫자세기!
function countUpNumbers() {
console.log("1부터 10까지 세고 시작한다~");
for (let num = 1; num <= 10; num += 2) {
console.log(num);
}
console.log("찾는다~");
}
countUpNumbers();
```
## 06:24 for 문 - 카운트다운
```
// 상황설정: 누리호, 카운트다운!
function countdown() {
console.log("카운트다운을 시작합니다..");
for (let count = 5; count >= 0; count -= 1) {
console.log(count);
}
console.log("발사!!");
}
countdown();
```
## 08:11 while 문
업다운 숫자 맞추기, prompt(), Math.random(), Math.trunc()
```
// 상황설정: 업다운, 숫자게임! 1~10 중 임의의 정수 찾기!
// - 정답이 입력값보다 크면 UP, 작으면 DOWN 멘트가 나옴
// - q 입력 시, 종료
function playUpdownGame() {
// 시작 멘트
console.log("### START ###");
// 난수 생성(1~10 사이 정수)
const randIntNum = Math.trunc(Math.random() * 10 + 1); // 1 ~ 10
// 사용자 입력 받기
let inputStr = prompt("랜덤 정수 X(1~10)를 맞춰주세요:");
// 정답 확인
while (inputStr !== "q") {
let inputNum = parseInt(inputStr); // "3" => 3
if (inputNum === randIntNum) { // 정답!
console.log(`X = ${randIntNum}, 정답입니다 ⭕️`);
} else if (inputNum < randIntNum) {
console.log("UP 👍");
} else {
console.log("DOWN 👎");
}
// 다음 입력 받기
inputStr = prompt("랜덤 정수 X(1~10)를 맞춰주세요:");
}
// 종료 멘트
console.log("### END ###");
}
playUpdownGame();
```
## 17:38 break - 반복 흐름 탈출하기
```
// 3. break
// - 코드실행을 현재 흐름에서 탈출시킴
// - 반복문에서 사용되는 경우, 가장 가까운 반복흐름을 탈출함
// 상황설정: 업다운, 숫자게임! 1~10 중 임의의 정수 찾기!
// - 정답이 입력값보다 크면 UP, 작으면 DOWN 멘트가 나옴
// - q 입력 시, 종료
function playUpdownGame() {
// 시작 멘트
console.log("### START ###");
// 난수 생성(1~10 사이 정수)
const randIntNum = Math.trunc(Math.random() * 10 + 1); // 1 ~ 10
// 사용자 입력 받기
let inputStr = prompt("랜덤 정수 X(1~10)를 맞춰주세요:");
// 정답 확인
while (inputStr !== "q") {
let inputNum = parseInt(inputStr); // "3" => 3
if (inputNum === randIntNum) { // 정답!
console.log(`X = ${randIntNum}, 정답입니다 ⭕️`);
break;
} else if (inputNum < randIntNum) {
console.log("UP 👍");
} else {
console.log("DOWN 👎");
}
// 다음 입력 받기
inputStr = prompt("랜덤 정수 X(1~10)를 맞춰주세요:");
}
// 종료 멘트
console.log("### END ###");
}
playUpdownGame();
```
## 18:38 continue - 다음 반복으로 강제 이동
```
// 4. continue
// - 반복 흐름을 강제로 다음으로 넘김
// 상황설정: 369 게임
// - 숫자에 3,6,9가 들어가면 박수소리 "짝"을 출력
// - 코드 단순화를 위해 1부터 10까지 숫자를 출력
function play369Game() {
// 시작
console.log("### START ###");
// 진행
for (let i = 1; i <= 10; i += 1) {
if (i === 3 || i === 6 || i === 9) {
console.log("짝");
continue;
}
console.log(i);
}
// 종료
console.log("### END ###");
}
play369Game();
```
## 21:24 nested loop - 구구단 출력하기
```
// 5. 중첩 반복문(nested loop)
// - 반복문 속에 반복문이 들어올 수 있음
// 상황설정: 구구단, 2~9단 출력하기!
function printDan(dan) {
for (let j = 1; j <= 9; j += 1) {
console.log(`${dan} x ${j} = ${dan * j}`);
}
}
function printGuGuDan() {
for (let i = 2; i <= 9; i += 1) {
printDan(i);
}
}
printGuGuDan();
```
## 구글링 훈련🔥
- 자바스크립트 블록 스코프
- 자바스크립트 prompt()
- 자바스크립트 Math.random()
- 자바스크립트 Math.trunc()
- 자바스크립트 break
- 자바스크립트 continue
- VSCode 멀티 커서
- 자바스크립트 중첩 반복문