자바스크립트

조건문

조건문은 조건식의 값이 참인지 거짓인지에 따라 자바스크립트 코드를 제어합니다. 조건문의 종류에는 if문 else문 그리고 else if문 등이 있습니다.

if문

if문은 조건식을 만족하는 경우에만 코드를 실행합니다. 조건식은 앞에서 배웠던 Boolean()과 마찬가지로 어떤 데이터를 입력해도 참 또는 거짓으로 결괏값을 반환합니다.

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

예제1

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


결과:
hello

예제2

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


결과:

다음 예제는 방문자로부터 입력받은 걸음 수를 조건문으로 만들고, 걸음 수가 10,000보 이상일 경우에만 결과를 출력하도록 작성했습니다.

예제3

<script>
    var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?","0");

    if(walkAmount >= 10000){
        document.write("매우 좋은 습관을 지니고 계시는군요!","<br>");
    }
    document.write("========== The end ==========");
</script>

이 예제에서 만약 입력한 값이 10000 이상일 경우에는 조건식에 true를 반환하여 중괄호 문장을 출력하지만 아닌 경우에는 The end만 화면에 출력합니다.

질의응답 창에 '당신의 하루 통화량은 몇 분인가요?' 라고 출력하게 하고 사용자가 입력한 값이 60분 이상이면 "많이 사용하는 편이네요" 라고 출력하는 예제입니다.

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

이 예제에서 만약 60 이상을 입력하고 출력하면 "많이 사용하는 편이네요" 가 출력됩니다.

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

조건식에 논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식됩니다.

다음은 조건식에 논리형 데이터가 아닌 다른 형의 데이터가 입력되었을 때 반환되는 결과입니다.

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

출력되는 경우

var num = 3;
if(num){
    document.write(num);
}


결과 :
3

출력되지 않는 경우

var num = 0;
if(num){
    document.write(num);
}


결과 :

else문

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

기본형

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

다음 예제는 방문자에게 질의응답 창으로 좋아하는 숫자를 입력받고 입력된 값이 짝수인지, 홀수인지에 따라 출력되는 결과가 다르게 나타나게 하였습니다.

<script>
    var num = prompt("당신이 좋아하는 숫자는?","0");
    if(num % 2 == 0){
        document.write("당신이 좋아하는 숫자는 짝수입니다.","<br>");
    }
    else {
        document.write("당신이 좋아하는 숫자는 홀수입니다.","<br>");
    }
    document.write("========== The end ==========");
</script>

다음은 confirm()메서드를 사용하여 회원탈퇴 여부를 확인하는 예제입니다.

<script>
    var result = confirm("정말 회원을 탈퇴하시겠습니까?");

    if (result){
        document.write("탈퇴 처리되었습니다.");
    }
    else {
        document.write("탈퇴 취소되었습니다.");
    }
</script>

confirm()메서드는 확인을 누르면 true, 취소를 누르면 false값을 반환합니다.

if else문

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

기본형

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

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

<script>
    var mon = prompt('현재는 몇 월입니까?',"0");

    if(mon >= 9 && mon <=11) {
        document.write("독서의 계절 가을이네요");
    }else if(mon >=6 && mon <=8){
        document.write("여행가기 좋은 여름이네요");
    }else if(mon >=3 && mon <=5){
        document.write("햇살 가득한 봄이네요");
    }else{
        document.write("스키의 계절 겨울이네요");
    }
</script>

중첩 if 문

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

기본형

if(조건식1){
    if(조건식2){
        코드;
    } 
}

결과:

중첩 if문은 바깥쪽에 있는 조건문인 조건식1을 만족해야만 안쪽에 있는 조건문 2를 검사합니다. 만일 안쪽의 조건식2를 만족하지 않으면 바깥쪽 조건문인 조건식1에 해당하는 코드만 실행합니다.

다음은 중첩 if문을 사용해 아이디와 비밀번호가 일치했을 때 환영 문구가 출력되도록 한 예제입니다.

예제

<script>
    var id = "easy1004";
    var pw = "112233";

    var user_id = prompt("아이디는?","");
    var user_id = prompt("비밀번호는?","");

    if(id == user_id){
        if(pw == user_pw){
            document.write(user_id + "님 반갑습니다.");
        }
        else{
            document.write("비밀번호가 일치하지 않습니다.");
            location.reload();
        }
    }
    else {
        alert("아이디가 일치하지 않습니다.");
        location.reload();
    }
</script>

질의응답 창에 입력한 아이디와 비밀번호가 저장된 값과 일치하면 "id님 반갑습니다" 라는 문구가 출력됩니다.

선택문

switch문

선택문인 switch문은 변수에 저장된 값과 switch문에 있는 case의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때, 그에 해당하는 코드를 실행합니다. 다음은 switch문의 기본형입니다.

기본형

var 변수 = 초깃값;
switch(변수){
    case 값1 : 코드;
    break;
    case 값2 : 코드;
    break;
    case 값3 : 코드;
    break;
    case 값4 : 코드;
    break;
    default: 코드;
}

변수에 저장된 값은 switch문을 만나면 case의 값을 하나씩 검사합니다. 일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break문을 만나 switch문을 종료합니다. 만일 일치하는 case가 없다면 default에 있는 코드를 실행하고 break문을 만나 switch문을 종료합니다.

다음은 질의응답 창을 통해 포털 검색 사이트 이름을 입력받고 switch문을 이용하여 입력한 이름에 해당하는 사이트로 이동하도록 작성한 예제입니다.

예제

<script>
    var site = prompt("네이버, 다음, 네이트, 구글 중 즐겨 사용하는 포털 검색 사이트는?", "");
    var url;

    switch(site){
        case "구글" : url = "www.google.com";
        break;
        case "다음" : url = "www.daum.net";
        break;
        case "네이버" : url = "www.naver.com";
        break
        case "네이트" : url = "www.nate.com";
        break;
        default : alert("보기에 없는 사이트입니다.");
    }

    if(url) location.href = "http://" + url;
</script>