티스토리 뷰

[JQUERY]자바스크립트

jQuery 039. 반복문 for(), continue

가산동 2018. 11. 24. 22:52

예제를 보기에 앞서 아래는 이전에 올려둔 for() 예제입니다.

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

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

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


아래는 예제입니다.

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
<!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() , continue
            */
            
            //#buttionP 클릭이벤트
            var text = "";
            $("#buttonP").click(function(){
                
                //for()
                for(var i=0; i<10; i++){
                    
                    //홀수일 때 continue
                    if(i%2 != 0){
                        continue;
                    }
                    
                    //i 출력
                    text += "<p>"+i+"</p>"
                }
 
                //text 출력
                $("#resultDiv").html(text);
                
            });
        });
    </script>
    
</head>
    <body>
        <p id="buttonP">예제 실행버튼</p>
        <div id="resultDiv">
        </div>
    </body>
</html>
cs


아래는 예제입니다. 실제로 작동하니 클릭해보세요


예제 실행버튼


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


45
46
47
48
49
    <body>
        <p id="buttonP">예제 실행버튼</p>
        <div id="resultDiv">
        </div>
    </body>
cs

먼저 button 으로 사용할 <p id="buttonP">와 결과를 출력할때 <div id="resultDiv">사용할 을 만들어 줍니다.


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

간단하게 <p id="buttonP">에만 스타일을 줬습니다.


21
22
23
            //#buttionP 클릭이벤트
            var text = "";
            $("#buttonP").click(function(){
cs

라인 22.    var text를 생성합니다. for() 의 i 를 담아 둘때 사용합니다.

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


25
26
                //for()
                for(var i=0; i<10; i++){
cs

라인 26.    for()를 시작합니다. i 는 0 부터 10보다 작을때 까지 1씩증가합니다. 총 0~9 까지 10번 반복합니다.


28
29
30
31
                    //홀수일 때 continue
                    if(i%2 != 0){
                        continue;
                    }
cs

라인 29.    if()를 사용해 i가 '짝수'가 아닌지(i%2 != 0) 확인합니다. 

   if() 예제와 %연산 예제는 아래링크를 참조하세요 

   [[JQUERY]자바스크립트] - jQuery 023. 조건문 if()

   [[JQUERY]자바스크립트] - jQuery 024. 조건문 if() 의 활용

   [[JQUERY]자바스크립트] - jQuery 025. 조건문 if() ,else if(), else()의 활용 #폰트 사이즈 변경하기

   [[JQUERY]자바스크립트] - jQuery 006. 연산자 +-*/%

라인 30.    continue;입니다. continue;는 해당 for()의 자신 아래에 있는 구문을 무시한채 

   처음부터 시작합니다. 증감은 그대로 유지합니다.

   결과를 보시면 짝수가 아닌 조건은 출력이 되지 않는걸 볼 수 있습니다.


33
34
                    //i 출력
                    text += "<p>"+i+"</p>"
cs

라인 34.    for() 의 i 값을 p태그로 감싸서  var text에 저장합니다.


37
38
                //text 출력
                $("#resultDiv").html(text);
cs

라인 38.    html() 을 사용해서 <div id="resultDiv">의 innerHtml을 변경합니다.

   html() 예제는 아래링크를 참조하세요.

   [[JQUERY]자바스크립트] - jQuery 034. html(), 요소의 html 다루기


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

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

jQuery 041. 소수점 올림, 버림(절사), 반올림  (0) 2018.12.01
jQuery 040. 반복문 for(), break  (0) 2018.11.24
jQuery 038. llist[](배열)을 활용한 for()  (0) 2018.11.23
jQuery 037. for() 응용, 구구단 출력하기  (0) 2018.11.22
jQuery 036. 다중 for() , 중첩 for()  (0) 2018.11.20
댓글