본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 중첩 for문

중첩 for문

for문 안에 for문이 있는 형태입니다.


중첩 for문

for(var i=0; i<100; i++){
    for(var j=0; j<100; j++){
        //반복코드
    }
}

Sample1

중첩 for문을 이용한 예제입니다.

html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        //for문을 이용해서 1~10까지 출력하세요~
        for(var i=1; i<=10; i++){
            document.write(i);
        }
        document.write("<br><br>");

        //중첩 for문을 이용해서 1~10까지 출력하세요~
        for(var i=1; i<=10; i++){
            for(var j=1; j<=10; j++){
                document.write(i +","+ j , "<br>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

Sample2

중첩 for문을 이용한 구구단 출력하기 예제입니다.

결과
2X1=2
2X2=4
2X3=6
2X4=8
2X5=10
2X6=12
.......
9X5=45
9X6=54
9X7=63
9X8=72
9X9=81
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        //구구단을 출력하세요~

        //num1 2 ~ 9 for(var i=2; i<=9; i++)
        //num2 1 ~ 9 for(var j=1; j<=9; j++)
        //num1 * num2 = sum
        //2 * 1 = 2
        //2 * 2 = 4
        //2 * 3 = 6
        //2 * 4 = 8

        //3 * 1 = 3
        //3 * 2 = 6
        //3 * 3 = 8
        //3 * 4 = 12

        for(var i=2; i<=9; i++){
            for(var j=1; j<=9; j++){
                let sum = i * j;
                document.write(i +"*"+ j +"="+ sum);
                document.write("<br>");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

Sample3

중첩 for문을 이용한 테이블 만들기 예제입니다.

결과
12345678910
11121314151617181920
21222324252627282930
31323334353637383940
41424344454647484950
51525354555657585960
61626364656667686970
71727374757677787980
81828384858687888990
919293949596979899100
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
    <script>
        let num = 1;
        let table = "<table border='1'>";

            for(var i=1; i<=10; i++){
                table += "<tr>";
                
                for(var j=1; j<=10; j++){
                    table += "<td>"+ num +"</td>";
                    num++;
                }

                table += "</tr>";
            }
            table += "</table>";

        document.write(table);
        console.log(table);
    </script>
</head>
<body>
    <!-- <table border='1'>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table> -->
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기