티스토리 뷰

[JQUERY]자바스크립트

jQuery 032. 조건문 switch()

가산동 2018. 11. 18. 14:30

아래는 예제입니다.

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
54
55
56
57
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <style>
        #exampleP{
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    
    <script>
        $(function(){       // jquery 시작
            /*
                swich()  
            */
            $("#exampleP").click(function(){
                var inputNum = prompt("숫자(1~5) 를 입력해주세요");
                
                switch(inputNum){
                    case "1" :
                        alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다.");
                        $(this).css("color","red");
                    break
                    case "2" :
                        alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다.");
                        $(this).css("color","purple");
                    break
                    case "3" :
                        alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다.");
                        $(this).css("color","yellow");
                    break
                    case "4" :
                        alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다.");
                        $(this).css("color","green");
                    break
                    case "5" :
                        alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다.");
                        $(this).css("color","blue");
                    break
                    default :
                        alert("p태그의 글자색을 초기화합니다.");
                        $(this).css("color","black");
                    break
                }
            })
        });
    </script>
    
</head>
    <body>
        <p id="exampleP">클릭시 시작</p>
    </body>
</html>
cs


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


클릭시 시작



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


54
55
56
    <body>
        <p id="exampleP">클릭시 시작</p>
    </body>
cs

먼저 html 부분 입니다. p태그를 생성합니다.


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

p태그에 style 을 줬습니다.


20
            $("#exampleP").click(function(){
cs

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

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


21
                var inputNum = prompt("숫자(1~5) 를 입력해주세요");
cs

라인 21.    클릭이벤트가 실행되면, 변수 inputNum 에 prompt() 함수를 이용해서 값을 받습니다.

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

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


23
                switch(inputNum){
cs

라인 23.    switch() 문을 실행합니다. switch()는 매개변수를 받아서 그값에 따라 처리할 수 있습니다.

   매개변수로 입력받은 inputNum을 넣어줍니다.


24
25
26
27
                    case "1" :
                        alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다.");
                        $(this).css("color","red");
                    break
cs

라인 24.    inputNum 의 값이 "1" 이라면 아래 구문을 실행합니다.

라인 25.    alert()을 활용해 입력받은 값을 출력합니다.

라인 26.    p태그의 글자색을 css()함수를 이용해서 'red' 로 변경합니다.

라인 27.    switch()함수를 종료합니다.


28
29
30
31
                    case "2" :
                        alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다.");
                        $(this).css("color","purple");
                    break
cs

라인 28.    inputNum 의 값이 "2" 이라면 아래 구문을 실행합니다.

라인 29.    alert()을 활용해 입력받은 값을 출력합니다.

라인 30.    p태그의 글자색을 css()함수를 이용해서 'purple' 로 변경합니다.

라인 31.    switch()함수를 종료합니다.


라인 32~43 까지 1~5 조건에 따라 반복이기 때문에 생략합니다.


44
45
46
47
                    default :
                        alert("p태그의 글자색을 초기화합니다.");
                        $(this).css("color","black");
                    break
cs

라인 44.    inputNum이 위 조건들인 1~5 가 아니라면 실행됩니다.

라인 47.    switch()함수를 종료합니다.

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

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

jQuery 034. html(), 요소의 html 다루기  (0) 2018.11.18
jQuery 033. 요소를 숨기기 hide(), 보이기 show()  (0) 2018.11.18
jQuery 031. 클래스 추가 및 제거 addClass(), removeClass()  (0) 2018.11.18
jQuery 030. if() 와 삼항연산자(조건부연산자)  (0) 2018.11.04
jQuery 029. 입력창 prompt()  (0) 2018.11.01
댓글