본문 바로가기
HTML+CSS+Javascript/Javascript

4. 조건문

by 김마리님 2020. 3. 11.

원래 프로그램은 코딩된 코드를 왼쪽에서부터 오른쪽으로, 위에서 아래로 읽는다. 조건문은 특정한 조건을 걸어 조건에 따라 특정 코드를 건너뛰도록 하는 문법이다.

조건문은 크게 if문과 switch문으로 나뉜다.

 

 

1. if-else문

 

- if문

if만으로도 조건문을 만들 수 있다.

        var a=5; b=3;
        if(a>b){
            document.writeln("a는 b보다 크다.");
        }

다음처럼 if만 있어도 만들 수 있다. 다만, if(조건문) 내의 조건이 거짓이라면 {} 내의 실행문은 실행되지 않는다.

 

-if-else문

        gender="남자";
        if(gender=="남자"){
            document.writeln("당신은 남자입니다.");
        }else{
            document.writeln("당신은 여자입니다.");
        }

기존 if문과 다르게 조건문(주황색 부분)이 참이면 빨간색 실행문이, 거짓이면 프로그램을 통과하는 것이 아닌, 빨간색 실행문을 뛰어넘고 파란색 실행문이 실행된다.

if-else문을 사용할 때 주의 사항이 있다.

        if(false)
            document.writeln("실행1");
            document.writeln("실행2");
        if(false)
         document.writeln("실행3");
         document.writeln("실행4");

다음과 같이, 조건이 없으므로 항상 참이 문구에서, 실행2와 실행4는 문구가 출력됐다. 

if문은 실행문이 다중일때는 반드시 {}(중괄호)로 묶어두어야만 조건문에 들어갈 수 있다.

 

-다중 if-else문

if문은 여러개를 겹쳐서 사용할 수 있다. 이것을 이용해 다양한 조건에 맞추여 코드를 실행할 수 있다.

        grade="3";
        if(grade==1||grade==2){ 
            document.writeln("저학년입니다");
        }else if(grade==3||grade==4){ 
            document.writeln("중간학년입니다");
        }else if(grade==5||grade==6){ 
            document.writeln("고학년입니다");
        }else{
            document.writeln("범위를 벗어났습니다.");
        }

다음과 같이 첫 if문에서 조건이 성립하지 않으면, if 문을 건너뛰고 else if문으로 이동한다. 이렇게 마지막까지, 조건을 맞추어 가다가 최종까지 조건이 맞지 않으면 else문의 실행문을 실행한다.

 

- if-else 응용문

        var month1 = prompt("당신이 좋아하는 달을 입력하세요.","3");
        var season;
        month=parseInt(month1);
        if(month==1,2,12)
        season="겨울";
        if ((month>=3)&&(month<=5))
        season="봄";
        if((month>=6)&&(month<=8))
        season="여름";
        if((month>=9)&&(month<=11))
        season="가을";
        if((month>=1)&&(month<=12)){
            document.writeln(month+"월은 "+season+"입니다.");
        }else{
            document.writeln("해당하는 계절이 없습니다.");
        }
    </script>

다음이 조건연산과 if-else문을 이용한 계절 맞추기이다.

조건 연산을 이용하기 위해 처음에, 들어오는 값을 모두 정수로 변환할 수 있는 함수를 입력한다(주황색).

if else문으로 연결하지 않아도 되는 이유는 실행문이 간단하여 if문에 충족하지 못하면, if의 실행문을 넘기고, 다음 if문을 만나서 조건을 확인하게 되기 때문이다.

다음처럼 입력한 변수가 조건문을 통과하고, 조건문에 맞는 계절이 나타나게 된다.

 

 

 

-switch문

switch문과 if문의 가장 큰 차이는, if문은 조건에 수식이 들어가도 되지만, switch문은 조건에 절대 상수만 들어갈 수 있다. 또한, switch문에서 일치하는 결과값을 만나게 될 경우, break; 를 이용해 즉시 수식에서 벗어날 수 있도록 한다.

        var price=0;
        var coffee=prompt("무슨 커피 드릴까요?","에스프레소");
        switch(coffee){
            case "에스프레소":
                price=2000;
                break;
            case "카푸치노":
                price=3000;
                break;
            case "카페라떼":
                price=3500;
                break;
            case "espresso":
                price=2000;
                break;
            default:
                document.writeln(coffee+"는 없습니다.");
                break;
        }
        if(price!=0){
            document.writeln(coffee+"는 "+price+"원입니다.");
        }

다음처럼 case가 if의 조건문처럼 작용한다. 다음과 같이 값이 변하는 변수가 아닌, 상수의 값임을 확인할 수 있다.

조건에 모두 일치하지 않을 경우, default 값이 적용되게 된다.

이 프로그램은 다음처럼 동작한다.

이 switch문은 잘 쓰이지 않는데, 조건이 반드시 상수여야한다는 점이다.

switch문은 if문으로 변경이 가능하다.

        if(coffee=="에스프레소"||coffee=="espresso"){
            price=2000;
        }else if(coffee=="카푸치노"){
            price=3000;
        }else if(coffee=="카페라떼"){
            price=3500;
        }else{
            price=0;
                }
        if(price>0){
            document.writeln(coffee+"는 "+price+"원입니다.");
        }else{
            document.writeln(coffee+"는 없습니다.");
        } 

다음처럼 상수를 == 의 비교연산자를 이용해서 구현할 수 있다.

반응형

'HTML+CSS+Javascript > Javascript' 카테고리의 다른 글

6. 함수  (0) 2020.03.11
5. 반복문  (0) 2020.03.11
3. 연산  (0) 2020.03.10
2. 변수  (0) 2020.03.10
1. 자바스크립트 시작  (0) 2020.03.10