티스토리 뷰

[JQUERY]자바스크립트

jQuery 040. 반복문 for(), break

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

예제에 앞서, 아래는 이전에 올린 for() 예제 링크 입니다. 참고해주세요

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

[[JQUERY]자바스크립트] - jQuery 036. 다중 for() , 중첩 for()

[[JQUERY]자바스크립트] - jQuery 037. for() 응용, 구구단 출력하기

[[JQUERY]자바스크립트] - jQuery 038. llist[](배열)을 활용한 for()

[[JQUERY]자바스크립트] - jQuery 039. 반복문 for(), continue


아래는 예제입니다.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            /*
                for() , break
            */
            
            var list = ["계속","계속","중지","계속","계속","계속"]
            
            //#buttionP 클릭이벤트
            var text = "";
            $("#buttonP").click(function(){
                
                //for()
                for(var i=0; list.length; i++){
                    
                    //i 출력
                    text += "<p> i = "+i+" ,list["+i+"] = "+list[i]+"</p>"
                    
                    //"계속" 이 아니면 break
                    if(list[i] != "계속"){
                        break;
                    }
                    
                }
 
                //text 출력
                $("#resultDiv").html(text);
                
            });
        });
    </script>
    
    <style>
        #buttonP{
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        } 
    </style>
    
</head>
    <body>
        <p id="buttonP">예제 실행버튼</p>
        <div id="resultDiv">
        </div>
    </body>
</html>
cs




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


예제 실행버튼


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


48
49
50
51
52
    <body>
        <p id="buttonP">예제 실행버튼</p>
        <div id="resultDiv">
        </div>
    </body>
cs

먼저, body 태그 안에 버튼으로 사용할 <p id="buttonP">와 출력값을 넣어줄 <div id="resultDiv">를 생성합니다.


13
            var list = ["계속","계속","중지","계속","계속","계속"]
cs

라인 13.    for()에서 사용할 var list를 만들어줍니다.


15
16
17
            //#buttionP 클릭이벤트
            var text = "";
            $("#buttonP").click(function(){
cs

라인 16.    for()에서 찍어낼 html 소스를 담아둘 var text를 만들어줍니다.

라인 17.    <p id="buttonP">에 클릭이벤트를 생성합니다.


19
20
                //for()
                for(var i=0; list.length; i++){
cs

라인 20.    for()를 실행합니다. var i가 0부터, var list의 길이만큼인 6보다 작을때까지, 

   0~5, 총 6회 반복합니다.


22
23
                    //i 출력
                    text += "<p> i = "+i+" ,list["+i+"] = "+list[i]+"</p>"
cs

라인 23.    var text에 var i의 값과, var list의 var i번째 값을 p태그로 감싸서 저장합니다.


25
26
27
28
                    //"계속" 이 아니면 break
                    if(list[i] != "계속"){
                        break;
                    }
cs

라인 26.    var list의 var i번째 값이 이 아니라면, break;합니다.

   break;는 해당 루프(for())를 바로 종료 시킵니다.


32
33
                //text 출력
                $("#resultDiv").html(text);
cs

라인 33.    <div id="resultDiv">에 html() 을 활용해서, innerHtml 을 var text로 바꿉니다.

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

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

jQuery 042. 난수(랜덤한 숫자) 생성, Math.random()  (0) 2018.12.02
jQuery 041. 소수점 올림, 버림(절사), 반올림  (0) 2018.12.01
jQuery 039. 반복문 for(), continue  (0) 2018.11.24
jQuery 038. llist[](배열)을 활용한 for()  (0) 2018.11.23
jQuery 037. for() 응용, 구구단 출력하기  (0) 2018.11.22
댓글