티스토리 뷰

[JQUERY]자바스크립트

jQuery 043. 반복문 while()

가산동 2018. 12. 3. 23:28

아래는 예제입니다.

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>
    
    <script>
        $(function(){       // jquery 시작
            /*
                반복문 while()
            */
            
            //#exBtn 클릭이벤트
            $("#exBtn").click(function(){
                
                //input 변수
                var input = null;
                
                //반복시작
                while(input!=5){
                    //prompt() 로 숫자 5를 받으면 멈춤.
                    input = prompt("10-5 는 ???");
                }
                
            });
        });
    </script>
    
    <!-- 버튼 css #무시해도됨 -->
    <style>
        #exBtn{
            background-color: white;
            color: #3db39e;
            border:3px solid #3db39e; /* Green */
            border-radius: 10px;
            transition-duration: 0.4s;
            padding: 10px;
        }  
        #exBtn:hover{
            background-color: #3db39e; /* Green */
            color: white;
            cursor: pointer;
        } 
    </style>
    
</head>
    <body>
        <button id="exBtn">예제확인</button>
    </body>
</html>
cs


#위 예제는 숫자 반복문 while()을 사용해 숫자 5를 입력 받을 때까지 반복시키는 예제입니다.

아래는 미리보기 입니다. 버튼을 클릭하면, 예제를 확인 할 수 있습니다.




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


48
        <button id="exBtn">예제확인</button>
cs

<body>태그 사이에 버튼 <button id="exBtn">을 만들어줍니다. 예제를 확인 할때 사용됩니다.


13
14
            //#exBtn 클릭이벤트
            $("#exBtn").click(function(){
cs

라인 14.    <button id="exBtn">에 클릭이벤트를 설정 합니다. click() 예제는 아래링크를 참조해주세요.

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


16
17
                //input 변수
                var input = null;
cs

라인 17.    var input을 생성해줍니다. 초기 값은 null로 설정합니다. 

   prompt()로 받은 값을 저장 하는데 사용됩니다.    


19
20
21
22
23
                //반복시작
                while(input!=5){
                    //prompt() 로 숫자 5를 받으면 멈춤.
                    input = prompt("10-5 는 ???");
                }
cs

라인 20.    반복문 while 을 시작합니다. while 은 파라미터 값으로 조건식 하나만 받습니다. 

   값이 'true' 면 반복하고, 'false' 면 멈춥니다. 조건은 input!=5입니다. var input이 5 가 되면 멈춥니다.

라인 22.    조건이 'false' 값이 될때까지 반복해서 prompt() 를 받아, var input에 담아줍니다.

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

   [[JQUERY]자바스크립트] - jQuery 029. 입력창 prompt()


#prompt()로 숫자 5를 받을 때까지 반복합니다. while 은 반복횟수를 특정 하지 않는 경우 많이 사용 됩니다.

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

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

jQuery 045. function() 함수  (0) 2019.04.24
jQuery 044. 다중 for() 문  (0) 2019.04.22
jQuery 042. 난수(랜덤한 숫자) 생성, Math.random()  (0) 2018.12.02
jQuery 041. 소수점 올림, 버림(절사), 반올림  (0) 2018.12.01
jQuery 040. 반복문 for(), break  (0) 2018.11.24
댓글