03_연산자

03_연산자

연산자에 들어가면서

1) 단항 연산자 : 양수 연산자(-), 음수 연산자(+) 등 피 연산자가 한 개인 연산자

2) 이항 연산자 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/) 등 피 연산자가 두 개인 연산자

3) 삼항 연산자 : (조건: ? ) 등 피 연산자가 세 개인 연산자

산술 연산자

1) 더하기(+) 연산자

피 연사자가 숫자 또는 불린 경우 더하기 연산 / 피 연산자 중 하나라도 문자열이면 문자열 이어 붙이기 연산

2) 빼기(-) 연산자

3) 곱하기(*) 연산자

4) 나누기(/) 연산자

5) 나머지(%) 연산자

6) 단항 마이너스 연산자

7) 단 항 플러스 연산자

8) 증가(++) 연산자 : 전치 증가, 후치 증가 연산자

9) 감소(--) 연산자 : 전치 감소, 후치 감소 연산자

관계 연산자

1) 동등(==) 연산자

두 개의 피 연산자 값을 비교하여 동등하면 true를 반환 데이터 타입을 변환했을 때 같은 값을 가질 수 있으면, 동등

2) 일치(===) 연산자

일치는 데이터 타입도 같고, 데이터도 같으면 true가 반환됨

3)비동등(!=) 연산자

4)불일치(!==) 연산자

5)작음(<) 연산자, 큼(>) 연산자, 작거나 같음(<=) 연산자, 크거나 같음(>=) 등의 비교 연산자

논리 연산자

불린(boolean)연산을 하기 위해 &&, ||, ! 의 논리 연산자

1) &&

피 연산자 모두 true인 경우만 true를 돌려 주고, 그렇지 않으면 false를 돌려 주는 논리 AND(&&) 연산

2) ||

피 연산자 중 하나라도 true이면 true를 돌려 주고, 피 연산자가 모두 false이면 false를 돌려 주는 논리 OR(||) 연산

3) !

피 연산자의 값이 true이면 false를, false이면 true를 돌려주는 논리 NOT(!) 연산

비트 연산자

비트 단위의 연산하기 위해 &, |, ^, ~ 의 비트 연산자

1) & : 비트 AND(&) 연산자

2) | : 비트 OR(|) 연산자

3) ^ : 비트 XOR(^) 연산자

4) ~ : 비트 NOT (~) 연산자

5) >> : 비트 오른쪽 쉬프트(>>) 연산자

6) << : 다음은 비트 왼쪽 쉬프트(<<) 연산자

7) >>> : 오른쪽으로 비트를 이동한 후 오른쪽의 빈 비트들을 무조건 0으로 채움

할당 연산자

1) = : 가장 기본적인 할당 연산자

2) += : 더하기와 할당

3) -= : 빼기와 할당

4) 기타 할당 연산자들 (*=, /=, %=, <<=, >>=, >>>=, &=, |=, ^= )

기타 연산자

1) ? : 연산자

2) typeof 연산자

실습예제

예제 03-1.html

전치 증가 연산자와 후치 증가 연산자에 대한 자바스크립트 작성해보겠습니다.

.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } \n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">

<html>
<head>
    <script type="text/javascript">
        var i=10;
        var result1 = ++i;

        var j=10;
        var result2 = j++;

        alert(result1);
        alert(result2);

    </script>
</head>
</html>

예제 03-2.html

동등 연산자와 일치 연산자에 대한 자바스크립트 작성해보겠습니다.

if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2859442,"name":"hihellloitland","title":"27","isDormancy":false,"nickName":"hihelllo","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://hihellloitland.tistory.com/34","DEFAULT_URL":"https://hihellloitland.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":34,"isAuthor":false,"categoryId":766226,"categoryLabel":"프로그래밍/Javascript"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://hihellloitland.tistory.com", tistoryUrl: "https://hihellloitland.tistory.com", manageUrl: "https://hihellloitland.tistory.com/manage", token: "AOOAyEFXmL+B5u1UUcQ5XuqTgJcn3piAsDBQyDme6j9QpzXy4JlxO0V5w6PYXO6u" }; var servicePath = ""; var blogURL = ""; \n \n \n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">

<html>
<head>
    <script type="text/javascript">
        var i = 10;
        var j = "10";

        alert(i==j); // 동등 연산자
        alert(i===j);
    </script>
</head>
</html>

예제 03-3.html

typeof 연산자 예제입니다.

if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2859442,"name":"hihellloitland","title":"27","isDormancy":false,"nickName":"hihelllo","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://hihellloitland.tistory.com/34","DEFAULT_URL":"https://hihellloitland.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":34,"isAuthor":false,"categoryId":766226,"categoryLabel":"프로그래밍/Javascript"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://hihellloitland.tistory.com", tistoryUrl: "https://hihellloitland.tistory.com", manageUrl: "https://hihellloitland.tistory.com/manage", token: "AOOAyEFXmL+B5u1UUcQ5XuqTgJcn3piAsDBQyDme6j9QpzXy4JlxO0V5w6PYXO6u" }; var servicePath = ""; var blogURL = ""; \n \n \n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">

<html>
<head>
    <script type="text/javascript">
    
        var data1=90;
        var data2=true;

        var message1 = typeof data1;
        var message2 = typeof datat2;

        alert(message1);
        alert(message2);

    </script>
</head>
</html>