티스토리 뷰

[JQUERY]자바스크립트

jQuery 030. if() 와 삼항연산자(조건부연산자)

가산동 2018. 11. 4. 13:18

아래는 예제입니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            //짝수 홀수 
            
            //if
            $('#btn_prompt_type01').click(function(){
                var num = prompt("숫자를 입력해주세요");
                
                if(num%2 == 0){
                    alert('짝수 입니다.')
                }else{
                    alert('홀수 입니다.')
                }
            });
            
            //삼항연산자
            $('#btn_prompt_type02').click(function(){
                var num = prompt("숫자를 입력해주세요");
                
                num%2 == 0 ? alert("짝수 입니다") : alert("홀수 입니다.");   
            });
            
        });
    </script>
</head>
    <body>
        <button id="btn_prompt_type01">수 입력(if)</button>
        <button id="btn_prompt_type02">수 입력(삼항연산자)</button>
    </body>
</html>
cs


아래는 미리보기 입니다. 실제로 동작하니 확인해보세요.




삼항연산자(조건부 연산자)는 if() 문과 비슷한 구조 입니다. 좀더 간결하게 표현할 수 있는 장점이 있지만, 때에 따라서는 if()문이 가독성이 좋은 경우가 있으니, 잘 판단해서 사용하시는게 좋습니다.

if() 함수의 예제는 아래 링크하겠습니다

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

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

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



위 예제는 prompt()를 통해 숫자를 입력 받은뒤, 짝수인지 홀수인지 alert() 을 이용해 보여주는 예제입니다.

prompt() 함수와 alert()함수의 예제는 아래 링크하겠습니다.

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

[[JQUERY]자바스크립트] - jQuery 002. 알림창 alert()


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

36
37
38
39
    <body>
        <button id="btn_prompt_type01">수 입력(if)</button>
        <button id="btn_prompt_type02">수 입력(삼항연산자)</button>
    </body>
cs

먼저 body 태그 안에 button 두개를 생성합니다. 하나는 if()문을 적용한 이벤트를, 나머지는 삼항연산자(조건부연산자)를 적용한 이벤트를 적용 할 것입니다.


11
12
13
14
15
16
17
18
19
20
            //if
            $('#btn_prompt_type01').click(function(){
                var num = prompt("숫자를 입력해주세요");
                
                if(num%2 == 0){
                    alert('짝수 입니다.')
                }else{
                    alert('홀수 입니다.')
                }
            });
cs

먼저, if()문을 활용한 이벤트 입니다.


라인 12. 선택자를 활용해 button에 click이벤트를 생성합니다.

선택자와 클릭 이벤트에 대한 예제는 아래링크를 확인하세요.

>>[[JQUERY]자바스크립트] - jQuery 018. jquery 선택자 (tag,id,class,name)

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


라인 13. 변수 num에 prompt()를 활용해 숫자를 저장합니다. 

라인 15. if()를 활용해 num 에 %계산을해서 나머지를 구합니다. 짝수의 경우 2로 나눈 나머지 값은 0 이됩니다.

나머지가 0이라면 '짝수' 가됩니다.

%연산(모듈러연산) 의 예제는 아래 링크를 참조하세요.

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


라인 16. 변수 num이 짝수 라면 alert()을 통해 '짝수 입니다.' 를 출력합니다.

라인 18. 변수 num이 홀수 라면 alert()을 통해 '홀수 입니다.' 를 출력합니다.



22
23
24
25
26
27
            //삼항연산자
            $('#btn_prompt_type02').click(function(){
                var num = prompt("숫자를 입력해주세요");
                
                num%2 == 0 ? alert("짝수 입니다") : alert("홀수 입니다.");   
            });
cs

오늘 예제의 목적인 삼항연산자(조건부연산자) 입니다.


라인 23. 선택자를 활용해 button에 click이벤트를 생성합니다.

라인 24. 변수 num에 prompt() 함수를 활용해 숫자를 저장합니다.

라인 26. num%2 == 0 의 값은 짝수라면 true , 홀수라면 false 가됩니다. 

삼항연산자는 조건 ? true : false 구조입니다.

' : ' 를 축으로 좌측은 조건이 true 일때 실행이되고 우측은 false 일때 실행이 됩니다.

입력 받은 숫자가 짝수라면 좌측이, 홀수라면 우측이 실행되게 됩니다.

 

비교연산자의 예제는 아래링크를 참조해주세요.

>>[[JQUERY]자바스크립트] - jQuery 021. 비교연산자 >,<,>=,<=,==,!=


if() 와 삼항연산자는 쓰임이 비슷합니다. 많이 쓰다보면 삼항연산자가 좀더 간결하게 조건을 가지고 나눠 줄 수 있습니다. 


#조건이 까다로워 지고, else if() 조건까지 추가해주어야 한다면 삼항연산자(조건부연산자)를 활용하는 것이 불가능 하지는 않지만 가독성면에서 if()보다 떨어지는 경우가 많습니다. 


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

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

jQuery 032. 조건문 switch()  (0) 2018.11.18
jQuery 031. 클래스 추가 및 제거 addClass(), removeClass()  (0) 2018.11.18
jQuery 029. 입력창 prompt()  (0) 2018.11.01
jQuery 028. == 연산과 === 연산의 차이  (0) 2018.10.29
jQuery 027. 텍스트 값 가져오기 text()  (0) 2018.10.19
댓글