조건문

조건문은 조건식의 값이 참(true)dlswl,거짓(false)인지에 따라 자바스크립트 코드를 제어합니다. 예를 들어 질의응답 창을 이용해 방문자가 좋아하는 숫자를 입력받습니다. 이때 입력된 값을 2호 나누어 나머지 값이 0이면 "단신이 좋아하는 숫자는 짝수입니다."라고 출력하게 한다고 합시다. 이렇게 수를 나눈 나머지 값에 따라 다른 결과를 출력하게 하려면 조건문을 사용해야 합니다. 조건문의 종류에는 if 문else문 그리고 else if문이 있습니다.

if문

if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 다음은 if문의 기본형입니다. 조건식은 앞에서 배웟던 Boolean() 내장 메서드와 마찬가지로 그 어던 데이터를 입력해도 true또는 false를 반환합니다. 이 내용은 적용 예제를 보며 자세히 살펴보겠습니다.

if(조건식){ 
자바스크립트 코드;
} 

[적용예제 1]에서 num<500의 비교 결과는 10<500이므로 true를 반환합니다. 조건문 내외 코드를 실행하면 "hello"가 출력되죠

 va rum=10;
if(num<500){ //true를 반환합니다.
    document.write("hello");
}

[적용예제 2]의 도건식에 있는0은 Boolean() 메서드에 0을 입력했을 때와 결과가 같습니다. 그 결과 false를 반환하여 조건문의 코드를 실행하지 않습니다.


if(0){ //true를 반환합니다.
document.write("hello");
}

그럼 예제를 통해 if문을 살펴 보겠습니다. 다음 예제는 방문자로서 입력받은 걸음 수를 조건문으로 만들고, 걸음수가 10,000 보 이상일 경우 결과를 출력하도록 작성했습니다

코딩해 보세요


06: <script>
07:     var walkAmount=prompt("당신의 하루 걷는 양은 몇 보인가요?", "0");
08:
09:    if(walkAmount >= 10000){
10:         document.write("매우 좋은 습관을 지니고 계시군요!!", "<br>");
11:         }
12:         document.write("======The End======");
13: </script>

앞에서 배운 조건문 if 문과 질의응답 창을 이용한 예제를 하나 더 살펴보겠습니다. 질의 응답 창에 "당신의 하루 통화량은 몇분인가요?"라고 출력되게 하고, 사용자가 입력한 값이 60분 이상이면 "많이 사용하는 편이네요."라고 출력되게 하였습니다.

코딩해 보세요


06: <script>
07:     var min=prompt("당신의 하루통화량은 몇 분인가요?", "0");
08:    if(min >= 60){document.write("많이 사용하시는 편이네요", "<br>");}
09:         document.write("======The End======");
10: </script>

if(min >=60){...}는 질의응답 창에 60 이상 값을 입력하면 중괄호({...})의 코드를 실행합니다.

위 문서를 저장하고 브라우저에서 열면 다음과 같은 결과 화면이 나타납니다. 나타나는 질의응답창에'120'을 입력하고 {확인]버튼을 눌러보세요. 60분 이상의 값이 입력돠었기 때문에 결과 화면에 "많이 사용하는 편이네요."라고 출력됩니다. 만약 60 이하의 값이 입력되면 조건에 맞지 않기 때문에 아무것도 출력되지 않습니다.

조건식에 논리형 데이터가 아니라 다른 형이 나오는 경우

조건식에 논리형 태이터(true,false)가 아닌 다른형의 데이터가 입력되었을때 반환되는 결과 입니다.
다음 값이 입력되면 false를 반환하지만 그 밖에 값은 true로 인식합니다.


0,null,""(빈 문자),uderfind

출력되는 경우


va num=3;
if(num){ //3은 true입니다 
     document.write(num);}

출력되지 않는 경우


    va num=0;
    if(num){ //0은 false입니다 
         document.write(num);}

다음 예제에서 방문자가 질의 음답 창에 이름을 입력하지 않으면 기본 응답값인 빈 문자가("")가 변수에 저장되어 조건식에 거짓(false)값이 반환되고 그 결과 문장이 출력되지 않습니다.

출력되지 않는 경우


06: <script>
07:     var userName=prompt("방문자의 이름은?","");
08:
09:    if(userName)){
10:         document.write(userName= "님 반값습니다! 방문을 환영합니다");
11:         }
12: </script>
    

else 문

else 문은 조건식을 만족할(true)경우와 만족하지 않을(false)경우에 따라 실행되는 코드가 달라집니다. 즉,두 가지 결과가 나올수 있습니다 다음은 조건식의 만족 여부에 따라 실행되는 코드가 달라. else문의 기본형입니다.

기본형


if(조건식){
    자바스키립트 코드1;
}else{
    자바스크립트 코드 2;
}

다음 예제를 통해 eles문에 대해 알아보겠습니다. 방문자에게 질의응답 창으로 좋아하는 숫자를 입력받고 if~elese문을 사용하여 입력된 값이 짝수인지,홀수인지 따라 출력되는 결과가 다르게 나타나도록 하였습니다.

코딩해 보세요


06: <script>
07:     var num=prompt("당신이 좋아하는 숫자는?","0");
08:
09:    if(num % 2 ==0)){
10:         document.write("당신이 좋아하는 짝수입니다");
11:         }else{
12   document.write("당신이 좋아하는 홀수입니다");}
13   }
14: </script>
    

09~13행num의 값을 2로 나눈 나머지의 값이 0이변 코드 1을 실행하고, 0이 아니면 코드 2를 실행합니다

다음은 질의응답 창에 홀수(7)를 입력 했을때 결과 화면입니다. 앞의 예제에서 else문으로 방문자가 입력한 값이 홀수일 경우에는 else 문의 중괄호{...}안의 코드가 실행되어 "당신이 좋아하는 숫자로는 홀수 입니다"라고 출력됩니다.

eles 조건문에 대해 더 알아 보계습니다 요즘 어느 사이트에서나 회원 가입과 탈퇴를 하지요? 이번에는 confirm 객채를 사용하여 웹페이지에 회원 탈퇴 여부를 묻는 확인/취소 창이 나타나게 하고 else 조건문으로 사용자가[확인] 버튼을 눌렀을때 결과 화면이 다타나주도록 할겁니다 [cnl[]

예제를 살펴보기 전에 확인/취소 창의 기본 사용법에 대해 먼저 알아보겟습니다. 확인/취소 창은 confirm() 메서드를 사용합니다 다음과 같이 confirm()메서드로 생성된 창에서[확인] 버튼을 누르며 true를 반환하고 [취소] [취소] 버튼을 누르면 false를 반환합니다

코딩해 보세요


06: <script>
07:     var result =  confirm("정말로 회원을 탈퇴하시겠습니까?");
08:     /*
09:    여기에 if 문을 작성합니다.
10:         
11:         
12  
13   */
14: </script>

다음은 사종자가 탈퇴 여부를 묻는 메세지 창에서 [확인]버튼과 [취소]버튼을 누를 경우 각각 결과가 다르게 나오도록 하는 코드를 작성한 예제입니다

코딩해 보세요


                        06: <script>
                        07:     var resut =confirm("정말로 회원을 탈퇴하시겠습니까?");
                        08:
                        09:    if(result)){
                        10:         document.write("탈퇴 처리되었습니다");
                        11:         }else{
                        12   document.write("탈퇴 처리되었습니다");}
                        13   }
                        14: </script>
                    

07행 confirm() 메서드는 [확인] 버튼을 누르면 true값을 반환하고 [취소]버튼을 누르면 false값을 반환하여 면수 ruult에 저장합니다

위에서 작성한 문서를 저장한후 브라우저에서 [확인]버튼과 [취소] 버튼을 눌렀을때 결과가 각각 다르게 나타나는 것을 확인 할 수있습니다.

else if문

else if문은 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있습니다.

다은은 else if문의 기본형입니다. 가장 위에 있는 조건식1부터5까지 차례로 조건 검사를 하면서 만족(true)하는 값이 나오면 그에 해당하는 코드를 실행하고 조건문을 종료합니다. 조건식 중 만족(true)하는 값이 하나도 없으면 문의 중괄호{...}에 있는 코드를 실행합니다

코딩해 보세요


if(조건식1){
      코드1;
}if(조건식2){
       코드2;
}if(조건식3){
    }   코드3;
}if(조건식4){
      코드4;
}if(조건식5){
       코드5;
}if(조건식6){
     코드6;
 }  

다음은 질의응답 창을 이용하여 "현재는 몇 월입니까?를 묻고, else if문을 사용햐 현재 월에 해당하는 계절과 관련된 문구가 출력되도록 작성한 예제 입니다.

코딩해 보세요


06: <script>
07:     var resut =confirm("정말로 회원을 탈퇴하시겠습니까?");
08:
09:  if(mo >=9&&mon<=11){
10:    document.write("독서의 계절 가을이네요!!");
11:  }else if(mo >=6&&mon<=8){
12   document.write("여행가기 좋은 여름이네요!!");
13    }else if(mo >=9&&mon<=11){
14    document.write("햇살 가득한 봄이네요!!");
15:  }else if(mo >=9&&mon<=11){
16:  document.write("스키의 계절 겨울이네요!!");
17: }
18: </script>
             

09~17행 mon의 값의 따라 다른 문장을 출력합니다.

중첩 if문

조건문 안에 조건문이 있으면 if문이라고 합니다. 중첩if문의 기본형은 다음과 같습니다.

코딩해 보세요


if(조건식1){
  if(조건식2){
      자바스크립트 코드;
  }
}
              

중첩if문은 바깥쪽에 있는 조건문인 조건식1을 만족해야만 안쪽에 있는 조건문인 조건식2를 검사합니다. 만일 안쪽 if문의 조건식2를 만족하지 않으면 바깥쪽 조건문인 조건식1의 중괄호 안에 있는 코드만 실행하고 종료됩니다
다음 예제와 같이 방문자로부터 아이디와 비밀번호를 입력받았을때 아이디와 비밀번호를 한번에 처리하지 않아도 됩니다. 방문자의 아이디가 일치하지 않으면 비밀번호의 일치 여부를 굳이 검사하지 않아도 되니까요
다음은 중첩if문을 이용해 아이디와 비밀번호가 일치하지 않을 경우에는 브라우저가 새로 고침이 되도록 했습니다.

코딩해 보세요


06: <script>
07: var id = "easy1004";    //아이디
08: var pw = "112233";      //비밀번호
09: 
10: var user_id = prompt("아이디는?","");   //아이디 입력
11: var user_pw = prempt("비밀번호는?",""); //비밀번호 입력
12:
13: if( id == user_id){
14: if( pw == user_pw){
15:    docmuent.wrtie(user_id+"님 반갑습니다.");
16: }else{
17:   alert("비밀번호가 일치하지 않습니다.");
18:   location.reload();
19:    }
20: }else{
21:    alert("아이디가 일치하지 않습니다.");
22:    locatoon.reload();
23:    }
24:</script>