자바스크립트의 특징

• HTML 문서 내의 객체를 핸들링 할 수 있다.
• HTML 문서 내의 css 요소를 핸들링 할 수 있다.
• 서버와 통신 하여 얻은 respons를 동적으로 표현 해 준다.(Ajax)
• 자바스크립트 객체 형태의 데이터를 서버와 주고 받을 수 있다.(Json)
• 자바스크립트를 이용한 라이브러리 들이 계속적으로 나타나고 있다.(node.js, jQuery, Electron…)

변수(Variable)란?

변수는 변할 수 있는 값, 상수는 변하지 않는 값을 뜻한다.
변수는 프로그래밍 상에선 데이터가 변할 수 있다라는 뜻이고,
쉽게, 데이터를 저장하는 공간으로 생각하면 된다.
그래서 변수선언은 데이터 저장공간의 이름을 정해주는(선언해주는) 거라고 보면 된다.

📌요약(Summary)

1. 변수(Variable)는 무언가를 담는 컵과 같다.
2. 여러 변수를 구분하거나 부르기 위한 이름이 있다.
3. 변수에는 다양한 데이터가 담길 수 있다.

변수의 영역

❗변수는 선언된 곳보다 바깥쪽 영역에서는 사용 불가능하다.

<script>
        // 우리가 배우는 언어에서는 {}가 하나의 영역이다.
        var str = "some text"; // 여기서 아무데나 갈 수 있다.

        function main(){
            var num = 123; // 함수 안에서 사용할 수 있지만 밖으로는 못나감.

            for(var i=0;i<5;i++){ // 문장
                var sum = num + i; // 문장 밖으로 못 나간다.
                console.log(sum);
            }
            console.log("num : "+num);
            console.log("sum : "+sum);
            console.log("str : "+str);
        }

        main();
    </script>

위 코드와 같이 지역변수는 선언된 해당 지역에서만 변수 사용이 가능하다.

연산자

- Computer의 가장 기본이 되는 기능은 바로 연산이다.
- 연산은 피연산자(Operand)들을 연산자(operator)를 통해 계산하는 것이다.

- 연산자에 붙는 항의 수에 따라 단항 연산자, 이항 연산자, 삼항 연산자로 분류된다.

단항 연산자

- 부호에 붙는 피 연산자가 하나인 경우를 단 항 연산자 라고 한다.(예: -1, i++)

2항 연산자

- 부호에 붙는 피 연산자가 두개인 경우를 이항 연산자라 한다.(예: x+y)

- 그리고 문자열은 더할 수도 있다.
“A”+”B” => AB 문자열 이구나!
12+13+”A” => 25A ! 숫자인가? 문자열 이네!

- 2항 연산에서는 두개의 항을 비교(compare)하는 비교 연산자가 있다.
- 비교 연산은 항상 왼쪽을 기준으로 한다.

- 그리고 비교 연산 결과를 다시 OR 와 AND 조건으로 결과를 낼 수 있다.
- AND 와 OR 조건은 선택 영역의 교집합과 합집합을 의미한다.

- 복합 대입(compound assignment) 연산자를 사용 하여 좀 더 편리하게 계산 할 수 있다.

- 3항 연산자는 항이 3개 인 경우 이다.
- 조건이 true 면 A, false 면 B 값이 대입 된다.


variable = condition ? value1 : value2

var score = 85;

var grade = score > 90 ? 'A' : 'B';

📌요약(Summary)

1. 연산자는 피 연산자 수에 따라 단 항, 2항, 3항 연산자로 나뉜다.
2. 모든 연산자를 다 알 필요는 없다.
3. %, ++, --, !, ==, ||, && 의 뜻만 알아도 된다.
4. 이마저도 계속 사용 할 것이므로 굳이 외우려 하지 말자

조건문

- 우리가 앞으로 작성할 프로그램의 많은 부분이 조건문과 반복문으로 이루어진다.

If문

- if 는 만약에 어떤 상황(조건)이 일어 났을 경우(true) 특정 내용({…})을 실행 하도록 합니다.

- if 안의 조건을 만족(true)시키지 못할 경우가 있다. 이럴 경우는 else 를 활용 할 수 있다.

- else 는 조건에 부합하느냐 그렇지 않느냐 두가지 경우만 처리 가능하다.
  여러 경우를 처리 할 경우는 else if 를 활용 할 수 있다.

#If문 예제

<script>
       var item = "콜라";

       if(item == "식혜"){
           console.log(item+"가 나왔습니다.");
       }else if(item == "콜라"){
           console.log(item+"가 나왔습니다 다시 선택해 주세요.");
       }else if(item == "생수"){
           console.log(item+"가 나왔습니다 다시 선택해 주세요.");
       }else if(item == "오렌지주스"){
           console.log(item+"가 나왔습니다 다시 선택해 주세요.");
       }else if(item == "사이다"){
           console.log(item+"가 나왔습니다 다시 선택해 주세요.");
       }else if(item == "에너지음료"){
           console.log(item+"가 나왔습니다 다시 선택해 주세요.");
       }else{
           console.log(item+"는 보유하지 않는 음료입니다. 다시 선택해 주세요.");
       }
</script>

Case by Case (Switch문)

- 선택사항이 if else 를 추가해 주는 것은 힘도 들지만 모양도 예쁘지 않다.
   그래서 다른 선택 사항으로 switch문을 활용 할 수 있다.

#Switch문 예제

• 자판기에 음료를 선택해서 해당 음료가 콘솔에 찍히도록 하자
  가지고 있는 음료(콜라, 생수, 오렌지주스, 사이다, 에너지음료, 식혜)

<script>
        var item = "식혜";

        // 값이 case와 일치되면 실행
        switch(item){
            case "콜라" :
                console.log("콜라가 나왔습니다.");
                break;

            case "생수" :
                console.log("생수가 나왔습니다.");
                break;

            case "오렌지주스" :
                console.log("오렌지주스가 나왔습니다.");
                break;

            case "사이다" :
                console.log("사이다가 나왔습니다.");
                break;

            case "에너지음료" :
                console.log("에너지음료가 나왔습니다.");
                break;

            case "식혜" : // case는 값만 넣을 수 있다. 그래서 단순하다.
                console.log("식혜가 나왔습니다.");
                // {에서 }까지 실행해야 하는데
                // 해당 case 내용만 실행하고 빠져나오기 위해 break 사용
                break;


            default:
                console.log("해당 음료가 없습니다.")
        }
    </script>

📌요약(Summary)

1. 조건 문 중 if 문은 조건을 만족(true) 하면 실행된다.
2. 조건을 만족하지 않는 경우 실행 되는 else 문도 있다.
3. else if를 통해 다른 조건을 제시 할 수도 있다.
4. switch문은 특정 case 마다 특정 내용을 실행 한다.
5. switch문은 조건문이 단순한 대신, 속도가 빠르다.

반복문

- 반복(loop) 문은 단순한 일을 반복 할 때 사용 한다.
- 반복(loop)은 “자동화” 를 위해 가장 중요한 조건이다.
- 반복 역시 “특정한 조건” 이 만족 되어야 반복 된다.

for( 초기값; 조건; 증감 ){
	해야 할 일;
}

For문 예제

<script>
        // for(i=2;i<10;i++){
        //     for(c=1;c<10;c++)
        //     console.log(i+"x"+c+"="+c*i)
        // }

        for(var num=2; num<=9; num++){
            console.log(num+" 단 시작");
                for(var i=1; i<=9; i++){
                    console.log(num+" X "+i+" = "+(num*i));
                }
                console.log("_________________");
            }
</script>

While문 예제

<script>
        var i = 1;
        while(i<=10){ // while 안의 조건이 true이면 반복한다.
            // 반복할 내용
            // 조건이 어느상황에서도 true이면 반복이 멈추지 않는다.
            console.log(i);
            i++;
        }
        // while은 반복 횟수가 정해지지 않은 경우 적합하다.
    </script>

Do-While문 예제

<script>
        var cnt = 11;

        while(cnt<10){
            cnt++;
        }
        console.log("while :"+cnt);

        cnt = 11;
        do{
            cnt++;
        }while(cnt<10);
        console.log("do while : "+cnt);

        // while과 do-while은 기본적으로 같은 값을 반환
        // 조건을 벗어난 값이 들어왔을 때 차이가 생긴다.
    </script>

📌요약(Summary)

1. 반복 문은 for 문과 while 문이 있다.
2. for 문은 반복 횟수가 정해진 경우 유용 하다.
3. While 문은 반복 횟수가 정해지지 않은 경우 유용 하다.
4. do while 은 일단 실행하고 나서 조건을 체크 한다.
5. 반복 문 역시도 굳이 애쓸 필요 없다.