티스토리 뷰

[JQUERY]자바스크립트

jQuery 044. 다중 for() 문

가산동 2019. 4. 22. 22:34 
        $(function(){
            for(var i=0;i<5;i++){
            //for(초깃값;조건식;증감식)    
                console.log('!')

                for(var j=0;j<5;j++){
                //inner for(초깃값;조건식;증감식)
                    console.log('!!')
                }
            }    
        })

다중 for() 문은 for()문안에 또다른 for()문이 있는 구조를 말합니다. 주의 해야 할점은, 바깥쪽 for()문 에서 초깃값으로 사용한 변수명과 두번째 for()문에서 초깃값으로 사용되는 변수명이 같지 않아야 정상적으로 두번째 for()문이 반복하게 됩니다.

for(var i=0;i<5;i++){

첫번째(바깥쪽) for()문의 초깃값을 보면, var i 로 선언하였고,

for(var j=0;j<5;j++){

두번째(안쪽) for()문에서는 var j를 사용한것을 볼 수 있습니다.

첫번째 for()문의 조건식을 보면, var i 가 0 이고, 조건식이 5 보다 작을때 까지니까 총 5번 반복합니다. 첫번째 for()문의 실행문은 아래와 같고, 아래의 실행문이 5번 반복됩니다.

                console.log('!')

                for(var j=0;j<5;j++){
                //inner for(초깃값;조건식;증감식)
                    console.log('!!')
                }

위 실행문이 첫번째 for()의 조건만큼인 5번 반복하게되는데, 이때 안쪽, 두번째 for()문은 첫번째 for()문이 반복할때 마다, 자신의 조건식 만큼 반복하게됩니다. 위 소스코드를 실행하면

콘솔창에 위와 같이 로그를 찍게됩니다.

아래는 예제 입니다.

위 에서 보이는 것 처럼 다중 for()를 활욜해 html을 생성해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="js/jquery-3.4.0.min.js"></script>
    <script>
        //ex.044 다중 for()문 * 찍기
        $(function(){

            var contents = "";

            for(var i=0;i<5;i++){
                //바깥 for()에서 p태그 생성
                contents += "<p>"

                for(var j=0;j<i+1;j++){
                    //안쪽 for()에서 p태그 내용 생성
                    contents += "*"
                }
            }

            //다중 for() 종료 후 hrml변경
            $('.ExInDiv').html(contents);
        })
    </script>
</head>
    <body>
        <div class = 'ExOutDiv' style="width: 100%; text-align: center;">
            <div class = 'ExInDiv' style="width: 50%; display: inline-block; border: 5px solid #7dc1c7; border-radius: 20%">

            </div>     
        </div>
    </body>
</html>

위는 예제 전문입니다. 먼저 body 태그 안에 html을 생성할 div를 만들어줍니다.

            var contents = "";

            for(var i=0;i<5;i++){
                //바깥 for()에서 p태그 생성
                contents += "<p>"

                for(var j=0;j<i+1;j++){
                    //안쪽 for()에서 p태그 내용 생성
                    contents += "*"
                }
            }

            //다중 for() 종료 후 hrml변경
            $('.ExInDiv').html(contents);

스크립트 부분만 살펴보면, html 코드를 저장할 변수 var contents 를 하나 생성해주고,

바깥 for() (0 부터 5보다 작을때까지, 총 5회 반복합니다.) 에서 contents 에 p태그를 열어주고,

안쪽 for() (바깥 for()에서 사용한 var i +1 보다 작을때 까지 반복합니다.) 에서 i+1 만큼 * 를 찍어 줍니다.

첫번째 반복에서, var i 가 0 이므로, i+1 인 1만큼 *을 찍고, 두번째 반복에서는 두번, 세번째 반복에서는 세번 .......

이렇게 다섯개의 p태그를 만들어준뒤, div태그의 html을 var contents 로 변경해줍니다.

저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 046. 리터럴 방식 & 객체 방식 & 익명함수  (0) 2019.04.29
jQuery 045. function() 함수  (0) 2019.04.24
jQuery 043. 반복문 while()  (0) 2018.12.03
jQuery 042. 난수(랜덤한 숫자) 생성, Math.random()  (0) 2018.12.02
jQuery 041. 소수점 올림, 버림(절사), 반올림  (0) 2018.12.01
댓글