티스토리 뷰

[JQUERY]자바스크립트

jQuery 036. 다중 for() , 중첩 for()

가산동 2018. 11. 20. 23:24

아래는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <style>
        #buttonP{
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        } 
    </style>
    
    <script>
        $(function(){       // jquery 시작
            /*
                다중 for()
            */
            
            $("#buttonP").click(function(){
                
                for(var i=0; i<3; i++){
                    for(var j=0; j<2; j++){
                        alert(i+"의"+j+"번");
                    }
                }
                
            });
        });
    </script>
    
</head>
    <body>
        <p id="buttonP">'다중 for()' 버튼</p>
    </body>
</html>
cs


아래는 미리보기입니다 클릭해보세요.


'다중 for()' 버튼



이전 예제에서 for()에 대해 간략하게 봤었습니다. 이번 예제는 다중, 혹은 중첩 for() 입니다.

for()의 예제는 아래링크를 참조해주세요.

>>[[JQUERY]자바스크립트] - jQuery 035. 반복문 for()


예제를 라인별로 보겠습니다.

34
35
36
    <body>
        <p id="buttonP">'다중 for()' 버튼</p>
    </body>
cs

라인 35.    버튼으로 사용할 p태그를 만들어줍니다.


7
8
9
10
11
12
13
    <style>
        #buttonP{
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        } 
    </style>
cs

라인 7~13.    p태그에 style을 입혀줍니다.


21
            $("#buttonP").click(function(){
cs

라인 21.    p태그에 클릭 이벤트를 설정합니다. click() 예제는 아래링크를 참조해주세요

>>[[JQUERY]자바스크립트] - jQuery 020. 이벤트 on(), 클릭이벤트 click()


23
                for(var i=0; i<3; i++){
cs

라인 23.    첫번째(바깥쪽) for() 입니다. 초기식은 변수 i = 0 , 조건식은 i < 3, 증감은 i++ 입니다.

   초기식과 조건, 증감을 봤을때, 첫번째 for()는 3번 반복 합니다.


24
                    for(var j=0; j<2; j++){
cs

라인 24.    두번째(안쪽) for() 입니다. 초기식은 변수 j = 0, 조건식은 j<2, 증감은 j++ 입니다.

   초기식과 조건, 증갑을 봤을때, 두번째 for()는 2번 반복합니다.


25
                       alert(i+"의"+j+"번");
cs

라인 25.    두번째(안쪽) for() 에서 첫번째(바깥쪽) for() 에서 사용한 i 와 두번째 에서 사용한 j를 

   alert()으로 출력합니다.


# 결과를 보면, 

i가 증가할때마다 j가 두번, i는 3번 반복하기 때문에 총 6회 반복하는 것을 확인 할 수 있습니다. 

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

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

jQuery 038. llist[](배열)을 활용한 for()  (0) 2018.11.23
jQuery 037. for() 응용, 구구단 출력하기  (0) 2018.11.22
jQuery 035. 반복문 for()  (0) 2018.11.19
jQuery 034. html(), 요소의 html 다루기  (0) 2018.11.18
jQuery 033. 요소를 숨기기 hide(), 보이기 show()  (0) 2018.11.18
댓글