[JavaScript] 2. 출력문과 변수, 연산자

    <script>

        // 출력문

        // 1. alert();

        // alert(' 안녕하세요! ');

        // 2. document.write();

        // document.write(' 안녕하세요 아이티윌 입니다. ');

        // 3. console.log();

        // console.log('안녕하세요!');

       

        // 출력문을 사용하여 페이지에 이름 출력

        document.write("이름 : 아이티윌<br>");

        // alt shift + 방향키아래

        // alt + 방향키 위,아래

        document.write("<h1>이름 : 아이티윌</h1>");

        // 숫자 +(연산자) 숫자 => 숫자

        document.write(100 + 200);

        // 문자 +(연결자) 문자 => 문자(연결)

        document.write("100" + "200");

        document.write("<br>");

        // 문자 + 숫자 => 문자

        // =>  문자 + A => 문자

        document.write("100" + 200);

       

        document.write("<br>");

        document.write("100"+(200+300));

 

 

 

 

    <h2> 변수(Variables):데이터를 저장하는 공간(메모리) </h2>

    <h3> 변수 사용 방법 <br>

       1) 변수 선언 : var 변수명/ let 변수명/ const 변수명 <br>

       2) 변수 초기화 <br>

       3) 변수 사용

    </h3>

    <script>

        // 변수 선언

        var itwill;

        // 변수 초기화

        itwill = 1000;

        // 변수 사용

        document.write('변수 :'+itwill);

         // 변수 선언

         // [var] 변수명;

         // =>데이터타입 : 문자형(String),숫자형(Number),

         //               논리형(Boolean),Null

         // 변수명 : 한글사용X,영문자,숫자 조합,(특수문자_ $)

         //         가능하면 의미있는 단어,

         // 카멜표기법 : 두개 이상의 단어를 결합하여 작성

         //             두번째 단어의 첫글자를 대문자로 표시

         //   applebox  => appleBox

         document.write("<hr>");

         // 문자데이터 타입 : "",'' 사용하여 정보 저장

         // 본인 이름을 저장하는 변수 생성

        //  var myName = "아이티윌";

         var myName = '<h1>아이티윌</h1>';

         document.write(myName);

         document.write("<hr>");        

         document.write("아이티윌");

         document.write("<hr>");  

         // 숫자데이터 : 숫자정보 저장(실수,정수)

         var tmpValue = 100;

         document.write(tmpValue + 100);

         document.write("<hr>");  

         document.write(typeof tmpValue);

         document.write("<hr>");  

         var tmpValue2 = "100";

         document.write(tmpValue2 + 100);

         document.write("<hr>");  

         document.write(typeof tmpValue2);

         // 논리데이터 : true(참) / false(거짓)를 표시하는 데이터

         // null / undefined

         // => 변수값이 없음

         

         var a; // undefined (초기화X)

         var b = null;  // null (초기화O)

    </script>

 

연산자

 

1. 산술 연산자 (+ - * / %)

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>");

 

 

 

// Q. 과일(50개)을 상자에 담으려고한다.

        //    이때 상자의 크기는 한번에 5개씩 저장가능

        //    모든 과일을 포장할때 필요한 상자의 개수?

        var orange = 100;

        var sizeOfBox = 5;

        document.write("필요한 상자개수 : "+(orange/sizeOfBox)+"개<br>");

        // Q.  895 -> ???? -> 800

        //     472 -> ???? -> 400

        //     123 -> ???? -> 100

       

        //     952 -> ???? -> 900 (확인) /버림

        var number = 999;

        document.write( Math.floor(number/100) * 100 );

        // Q. 856 -> ??? -> 851

        // -> 999일 때의 값을 계산

        document.write( Math.floor(number/10) * 10 +1 );

 

2. 대입 연산자(=)

- 연산의 방향(오->왼)

- 복합 대입연산자 (+= -+ *= /= %=)

 

<script>

        //  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

        var tag = "";  //누적합을 이용한 테이블 만들기

        tag += "<table border='1'>";

        tag += "<tr>";

        tag += "<td>1</td>";

        tag += "<td>2</td>";

        tag += "</tr>";

        tag += "</table>";

        document.write(tag);

        document.write("<table border='1'><tr><td>1</td><td>2</td></tr></table>");

    </script>

 

 

 

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

 

<script>

        var A = 100;

        ++A; // 101

        A++; //102 -> 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; // 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개를 사용해서 값을 비교 후 결과를 참/거짓 형태로 리턴

 

<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";

        // 타입 상관없이 값만 비교할 때

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

        // 타입과 값을 모두 비교할 때

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

        // 아스키 코드값을 사용한 문자 크기 비교할 때

        document.write("A" > "B");

        document.write("JavaScrit" > "javaScript")

        document.write("javascrit" > "javaScript")

    </script>

 

 

 

 

5. 논리 연산자

-ture/false를 사용해서 연산

 

A	B	&&(AND)	||(OR)	!(NOT)
T	T	T	T	T -> !T = F F -> !F = T
T	F	F	T
F	T	F	T
F	F	F	F

<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>");

    </script>

 

 

6. 삼항(조건) 연산자 [조건식? 값1(참):값2(거짓)]

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

<script>

        var A =100;

        var B =200;

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

        //             B가 클 때 "B값이 더 크다"

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

       

        //Q. 과일(53개)을 상자에 담으려고 한다

        //   이때 상자의 크기는 한번에 5개씩 저장 가능

        //   필요한 상자의 개수?

        // ex) 53개 -> 11개 / 50개 -> 10개 / 15개 -> 3개 / 18개 -> 4개

        var sizeOfbox = 5;

        var orange = 53;

        // 나머지가 있을 때 / 없을 때

        // -> 소수점 버림

        document.write("필요한 상자 개수: " +Math.floor(orange / sizeOfbox)+"개" + "<br>");

        document.write("필요한 상자 개수: " +Math.floor(orange / sizeOfbox+1)+"개" + "<br>");

        document.write("필요한 상자 개수: " +(Math.floor(orange / sizeOfbox)+(orange%sizeOfbox>0? 1:0))+"개" + "<br>");

    </script>