JavaScript - 반복문

JavaScript

반복문

• 주어진 조건만큼 함수를 반복하는 것

• 자바의 반복문과 같음

• for문 / for in 문 / while 문 / do ~ while 문

for문 연습문제1

• 1~10까지의 합인 sum을 구하는 식 작성

forEx1.js

var i;
var sum = 0;
for(i = 1; i <=10; i++) {
    sum += i;
    document.write(i+"<br>");
}
document.write(sum);

for문 연습문제2

• 태그 반복 출력

forEx2.js

document.write('<ul><li>태그 반복 출력</li><ul><br>');
for(let i = 1; i <= 10; i++) {
    document.write('<li type="square"> i =' + i + '</li>');
}
document.write('</li></ul></ul>');

for문 연습문제3

• i 값과 sum 값을 테이블 형태로 출력

forEx3.js

var sum = 0;
document.write("<table border=\"1\">");
document.write("<tr><th>i</th><th>sum</th></tr>");

for(var i = 1; i<=10; i++) {
    sum += i;
    document.write("<tr><td>" + i + "</td><td>" + sum + "</td></tr>");
}
document.write("</table>");

for in 문

• 배열이나 객체를 쉽게 탐색 가능

• 형태

for(var 변수명 in 배열){
    num = arr[i];
}

forIn.js

var fruits = ["사과", "배", "포도"];

for(let i in fruits)
    document.write("fruits[" + i + "] = " + fruits[i] + "<br>");

forEach() 함수

• 배열.forEach()

배열.forEach(function(){
    실행문장
});

• function()의 인수 3개 지정되어 있는데 사용하지 않아도 되고
• 사용할 경우에는 순서를 잘 알고 사용해야 한다.
• 첫 번째 인수 : 배열의 항목
• 두 번째 인수 : 배열의 인덱스
• 세 번째 인수 : 배열 그 자체

function(item)
function(item, index)
function(item, index, fruits)

• 인수 이름은 상관 없음 (function(a, b, c)도 가능)

forEach.js

var fruits = ["사과", "배", "포도"];

fruits.forEach(function(item){
    document.write(item + "<br>");
});

document.write("<hr>");

fruits.forEach(function(item, index){
    document.write(index + " " + item + "<br>");
});

document.write("<hr>");

fruits.forEach(function(item, index, fruits){
    document.write(index + " " + item + " " + fruits + "<br>");
});

fruits.forEach(function(item, index, fruits){
    console.log(index, item,  fruits);
});

중첩 for문

• for문이 여러 개 중첩되어있는 형식

for(i=1; i<=3; i++){
    for(j=1; j<=5; j++){
        document.write(j + " ");
    }
    document.write("<br>");
}

중첩 for문 연습문제1

• apple.jpg 사용
• 가로 7개, 세로 4개 총 28개의 사과를 출력하는 코드를 작성하시오

nestedForEx.js

for(var i = 0; i<4; i++){
    for(var j = 0; j < 7; j++){
        document.write('<img src = \"image/apple.png\">');
    }
    document.write("<br>");
}

중첩 for문 연습문제2

• bomb.png 사용
• 연습문제 1에서 짝수번째 행에 폭탄 그림이 들어가는 코드를 작성하시오

netstedForEx2.js

for(var i = 1 ; i<=4 ; i++) {
    for(var j=1 ; j<=7 ; j++) {
        if(j%2==1)
            document.write('<img src = \"image/apple.png\">');
        else
            document.write('<img src = \"image/bomb.png\">');
    }
    document.write("<br>");
}

while문

• 조건식을 먼저 확인한 후 조건식이 참인 경우 문장 반복 수행

(초기값)
while(조건식){
    조건식이 참일 때 반복 수행되는 문장;
    (증감값)
}

while 연습문제

• 입력한 수만큼 이미지 출력
• 이미지 출력 순서 : cherry bomb apple

whileEx.js

var num = parseInt(prompt("숫자 입력"));
var x = 1;

document.write("<h2>총 " + num + "개의 이미지 출력 <h2>")

while(x<=num) {
    if(x % 3 == 1)
        document.write("<img src = 'image/cherry.png'>");
    else if(x % 3 == 2)
        document.write("<img src = 'image/bomb.png'>");
    else
        document.write("<img src = 'image/apple.png'>");

    x++;
}

do-while문

• 먼저 반복 수행되는 문장을 1번 수행한 후 뒤에 있는 조건식을 보고 참이면 계속 수행하고 거짓이면 반복문을 종료한다.

• 최초 1번은 수행된다.

• 형태

do{
    반복 수행되는 문장(조건식의 결과 참일 때 수행);
} while(조건식);

do-while 연습문제

• [취소] 버튼 누를 때까지 경고창 출력
• 경고창 출력 횟수 출력

doWhileEx.js

var cnt = 0;
do{
    var check = confirm("계속 경고창을 보시겠습니까?");
    if(check == true) {
        cnt++;
        alert("경고 " + cnt);
    }
}while(check == true);
document.write("경고창 출력 횟수 : " + cnt);