[JS] 연산자

연산자

<h2> 1) 산술연산자 (+ - * / %)</h2> 
		<!-- 더하기, 빼기, 곱하기, 나누기, 나머지-->

    <script>
        var num1 = 10;
        var num2 = 2;
        // 산술연산의 결과를 출력
        document.write("+ : " + (num1 + num2)+ "<br>"); 
        document.write("- : " + (num1 - num2)+ "<br>"); 
        document.write("* : " + (num1 * num2)+ "<br>"); 
        document.write("/ : " + (num1 / num2)+ "<br>"); 
        document.write("% : " + (num1 % num2)+ "<br>"); 

    </script>

// Q. 과일(50개)을 상자에 담으려고한다.
//    이때 상자의 크기는 한번에 5개씩 저장가능
//    필요한 상자의 개수?

var fruit = 50;
var sizeOfBox = 5;
document.write("필요한 상자의 개수: " + (fruit / box) + "개 <br>");

box → sizeOfBox : box의 의미가 달라진다. — 협업을 위해 쓰는게좋음

// Q. 895 -> ???? -> 800
//    472 -> ???? -> 400
//    123 -> ???? -> 100

//952 -> ???? -> 900 (hint : 버림)
var n1 = 952;
document.write(n1-(n1%100));

//Q.856 -> ???? -> 851
// => 999일때의 값을 계산

var n5 = 999;
document.write(Math.floor(n5/10)*10 + 1 + "<br>"); -- 999/10 = 99 -> 99*10 = 990 -> 990 + 1 -> 991

대입연산자 (=) : 연산의 방향 (오 -> 왼)

복합 대입연산자

// A = B;
        // A += B; <=> A = A + B; (누적합)
        // A -= B; <=> A = A - B;
        // A *= B; <=> A = A * B;
        // A /= B; <=> A = A / B;
        // A %= B; <=> A = A % B;

        document.write( num1 ); //10
        document.write( num1 += num2 ); // 12
        document.write( num1 ); //12

테이블

<table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

<script>
		var tag = "";
    tag += "<table border='1'>";
    tag += "<tr>";
    tag += "<td>1</td>";
    tag += "<td>2</td>";
    tag += "</tr>";
    tag += "</table>";

		document.write(tag);
</script>

증감연산자 (++A, A++, --A, A--) : 데이터를 1씩 증가/감소

<h2> 3. 증감연산자 (++A, A++, --A, A--) : 데이터를 1씩 증가/감소 </h2>
    <script>
        var A = 100;
        ++A; // 101
        A++; // 101
        A; //102

        A = 100;
        document.write("A : " + A + "<br>");
        ++A; //101 : 전위연산 - 변수를 사용할 때 숫자를 1증가 후 사용
        document.write("A : " + A + "<br>");
        A++; //101 : 후위연산 - 변수를 사용할 때 그냥 사용 후 1증가
        document.write("A : " + A + "<br>"); //102

        A=100;
        ++A; //1++ 101
        A--; //101
        A++; //100 -> 100
        A--; // 101 -> 101
        ++A; // 101
        document.write(A--); // 101
        A--; //100
        ++A; //100
        document.write(++A) ; //101

    </script>

4. 비교연산자

-피연산자 2개를 사용해서 값을 비교 후 결과를 참/거짓 형태 리턴(반환)

 > <
= <=
== !=
=== !===

== 와 ===의 차이점 (타입 상관유무)

val1 = 10; // 변수 재사용
val2 ="10"; // 문자 형태의 데이터 10

document.write("val1 == val2 : " + (val1 == val2) + "<br>");
// 타입 상관없이 값만 비교할때 (==) 사용
document.write("val1 === val2 : " + (val1 === val2) + "<br>");
// 타입과 값을 모두 비교할때 (===) 사용

아스키코드

대-소문자의 차이는 32이다.

document.write("A" > "B"); //false
// 아스키코드값을 사용한 문자 크기 비교 가능
document.write("JavaScript" > "javaScript"); //false
document.write("javascript" > "javaScript"); //true

 

-아스키 코드 테이블 : 숫자> 문자

                          소문자 > 대문자

비교연산자 코드

<h2> 4. 비교연산자 </h2>
    <p>
        [   >   <   >=   <=   ==   !=   ===   !===   ]<br>
    
        피연산자 2개를 사용해서 값을 비교 후 결과를 참/거짓 형태 리턴(반환)
    </p>
    <script>
        var val1 = 10;
        var val2 = 20;

        document.write("val1 > val2 : " + (val1 > val2) + "<br>"); 
        document.write("val1 < val2 : " + (val1 > val2) + "<br>");
        document.write("val1 == val2 : " + (val1 == val2) + "<br>");
        document.write("val1 != val2 : " + (val1 != val2) + "<br>");

        val1 = 10; // 변수 재사용
        val2 ="10"; // 문자 형태의 데이터 10
        
        document.write("val1 == val2 : " + (val1 == val2) + "<br>");
        // 타입 상관없이 값만 비교할때 (==) 사용
        document.write("val1 === val2 : " + (val1 === val2) + "<br>");
        // 타입과 값을 모두 비교할때 (===) 사용
        document.write("A" > "B"); //false
        // 아스키코드값을 사용한 문자 크기 비교 가능
        document.write("JavaScript" > "javaScript"); //false
        document.write("javascript" > "javaScript"); //true
    </script>

5. 논리연산자

-true/false를 사용해서 연산

<h2> 5) 논리연산자 : true/false를 사용해서 연산 </h2>
    <p>
 <!--   A   B     &&(AND)     ||(OR)      !(NOT)<hr>
        T   T       T           T        T -> !T -> F
        T   F       F           T        F -> !F -> T           
        F   T       F           T           
        F   F       F           F           
                 A && B       A || B       !A           -->
    </p>

    <script>
        var T = true;
        var F = false;

        document.write("<hr>");
        document.write("t && t : "+(T&&T)+"<br>");
        document.write("t && f : "+(T&&F)+"<br>");
        document.write("f && t : "+(F&&T)+"<br>");
        document.write("f && f : "+(F&&F)+"<br>");

        document.write("<hr>");
        document.write("t || t : "+(T||T)+"<br>");
        document.write("t || f : "+(T||F)+"<br>");
        document.write("f || t : "+(F||T)+"<br>");
        document.write("f || f : "+(F||F)+"<br>");

        document.write("<hr>");
        document.write("t ! : "+(!T)+"<br>");
        document.write("f ! : "+(!F)+"<br>");

    </script>

6) 삼항(조건) 연산자

-조건식의 결과에 따른 실행결과를 변화가능

💡 조건식? 값1(참):값2(거짓)

<h2> 6) 삼항(조건) 연산자 </h2>
    <p>
        [  조건식? 값1(참):값2(거짓) ] <br>
        조건식의 결과에 따른 실행결과를 변화가능
    </p>
    <script>
        var A = 100;
        var B = 200;

        // A,B 비교해서 A가 클 때, "A값이 더 크다"
        //             B가 클 때, "B값이 더 크다"

        document.write( A > B ? "A값이 더 크다" : "B값이 더 크다" );
    </script>

 

<h2> 6) 삼항(조건) 연산자 </h2>
    <p>
        [  조건식? 값1(참):값2(거짓) ] <br>
        조건식의 결과에 따른 실행결과를 변화가능
    </p>
    <script>
        var A = 100;
        var B = 200;

        // A,B 비교해서 A가 클 때, "A값이 더 크다"
        //             B가 클 때, "B값이 더 크다"

        document.write( A > B ? "A값이 더 크다" : "B값이 더 크다" + "<br>" );

        // Q. 과일(53개)을 상자에 담으려고한다.
        //    이때 상자의 크기는 한번에 5개씩 저장가능
        //    필요한 상자의 개수?
        var fruit2 = 53; //과일
        var sizeOfBox2 = 5; // 상자의 크기
       
        document.write("필요한 상자의 개수 : " + Math.floor((fruit2/sizeOfBox2+0))+"개 <br>");
        document.write("필요한 상자의 개수 : " + Math.floor((fruit2/sizeOfBox2+1))+"개 <br>");
        
        document.write("필요한 상자의 개수 : " 
                    + (Math.floor(fruit2/sizeOfBox2) + (fruit2&sizeOfBox>0 ? 1 : 0))+"개 <br>"); 
        //삼항연산자를 이용한 올림 연산
        // document.write("필요한 상자의 개수 : " + Math.ceil((fruit2/sizeOfBox2))+"개 <br>"); // 올림 명령어

    </script>