javascript 첫번째

1. Javascript

• '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어.

2. Vanilla JS

• 바닐라 자바스크립트란 플러그인이나, 라이브러리를 사용하지 않은 순수
  자바스크립트를 이야기한다. 즉, 바닐라 자바스크립트 = 자바스크립트 라고
  생각하면 된다.

3. 데이터타입

• javascript의 변수는 표현하는 값의 종류에 따라서 형식 구분된다.
• 이러한 변수의 종류를 데이터 형이라고 한다.
• Number
• String
• Boolean
• Object
• Null : 개발자가 의도적으로 변수의 공간을 비워 놓은 상태를 의미한다.
• undefined : 정의되지 않음,처음부터 변수가 선언만 되고 아무런 값도
  할당되지 않은 상태를 의미한다. 이 상태의 변수는 어떠한 처리도 불가능하다.

4. 조건식

• if

• if ~ else

• if ~ else if ~ else

• switch

  id를 prompt 입력받고,id가 usertest1, usertest2, usertest3 이면
  인증되었습니다. alert id가 usertest1, usertest2, usertest3 아니면
  인증에 실패하였습니다. alert

     <script>
         var id = prompt("아이디를 입력해주세요");
         if( id == "usertest1" || id == "usertest2" || id == "usertest3"  ){
             alert("인증성공");
         } else {
             alert("인증실패");
         }
  
     </script>
  
      <script>
         // boolean의 대체제
         // false로 간주되는 데이터형
  
         if( !'' ){
             console.log("빈 문자열");
         }
  
         if( !undefined ){
             console.log("undefined");
         }
         var a;
         if( !a ){
             console.log("값이 할당되지 않은 변수");
         }
  
         if( !null ){
             console.log("null");
         }
  
         if( !NaN ){
             console.log("NaN");
         }
  
     </script>
  

5. document.write(출력내용)

• HTML 태그안에 출력되는 내용이므로, 다른 HTML태그를 포함하여 출력 할 수
  있다.

   <script>
        // 함수의 선언
        function sayHello(){
            document.write("<h1>안녕하세요</h1>");
            document.write("<h1>자바스크립트</h1>");
        }
        // 함수의 호출
        sayHello();
        sayHello();
    </script>

6. prompt

• 입력창

  아이디 입력받는 prompt, 아이디가 usertest 인 경우,
  password 입력받는다(prompt).
  password가 1234 인 경우, 인증되었습니다 alert
  password가 1234 아닌 경우, 인증에 실패하였습니다 alert
  아이디가 usertest 아닌 경우, 인증에 실패하였습니다. alert

     <script>
         var id = prompt("아이디를 입력해주세요");
         if( id == 'usertest' ){
             var pw = prompt("패스워드를 입력해주세요");
             if( pw == '1234' ){
                 alert("인증되었습니다.");
             } else {
                 alert("인증에 실패 했습니다.");
             }
         } else {
             alert("인증에 실패했습니다.");
         }
     </script>

## 7. 삼항연산자
 condition ? expTrue : expFalse;
 
 - condition : 조건식
 - expTrue : 참일 때 실행할 식
 - expFalse : 거짓일 때 실행할 식
 ```javascript
    <script>
        var myAge = 19;

        if( myAge == 19 ){
            document.write("<h1>19살 입니다</h1>");
        }

        if( myAge != 20 ){
            document.write("<h1>20살이 아닙니다.</h1>");
        }
    </script>

    <script>
        var num1 = 100+30;
        var num2 = 100-30;
        var num3 = 100*30;
        var num4 = 100/30;
        var num5 = 100%30;

        console.log(num1);
        console.log(num2);
        console.log(num3);
        console.log(num4);
        console.log(num5);

    </script>

	<script>
        var plus_num = 1;

        plus_num = plus_num + 1;
        plus_num += 1;
        plus_num++;
        ++plus_num;
        console.log(plus_num);

        var minus_num = 4;
        
        minus_num = minus_num -1;
        minus_num -= 1;
        minus_num--;
        --minus_num;
        console.log(minus_num);

    </script>

8. 반복문

• for
• while
• break : 반복작업을 중간에 중단시키고 싶을때 사용.
• continue : 해당 조건의 실행을 중단 하지만, 반복은 지속된다.
  바로 증감식으로 이동한다.

    <script>
        var sum = 0;

        for( var i = 1; i<=100; i++ ){
            sum += i;
        }
        document.write("<h1>1부터 100까지의 합은 " + sum + "입니다.</h1>");

    </script>

   <script>
        var sum = 0;
        var i = 1;

        while( i <= 100) {
            sum += i;
            i++;
        }

        document.write("<h1>while : 1부터 100까지의 합은 " + sum + "입니다.</h1>")

    </script>

    <script>
        for( var i = 0; i<10; i++ ){
            if( i == 5 ){
                break;
            }
            document.write("Hello world " + i + "<br/>");
        }

    </script>

   <script>
        for( var i = 0; i < 10; i++){
            if( i == 5){
                continue;
            }

            document.write("continue " + i + "<br/>");
        }

    </script>

 구구단 1단 + 9단

  <script>
       
        for( var i = 2; i < 10; i++ ) {
            document.write("<h1> " + i + "단</h1>");

            document.write("<ul>");
            for ( var j = 1; j < 10; j++ ) {
                var k = i * j;
                var result = i + " x " + j + " = " + k;
                document.write("<li>" + result + "</li>");
            }
            document.write("</ul>");
            
        }

    </script>

9. 함수 function()

    <script>
        function f( x ){
            var y = x + 1;
            document.write("<h1> " + y + "</h1>");
        }

        function f2( x, y ){
            var z = x + y;
            document.write("<h1>" + z + "</h1>");
        }

        function f3(x, y){
            return x + y;
        }
        
        var a = f3(1, 2);
        document.write("<h1> a : " + a + "</h1>");
        var b = f3(2, 10, 6);
        document.write("<h1> b : " + b + "</h1>");
        document.write("---------------");
        f2(2, 5);
        f2(5);
        f2(2, 7, 9, 10, 50);

        document.write("---------------");
        f(5);
        f(7);
        f(10);
        f("javascript");
        f(5, 10);
        f();


    </script>