조건문
조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다. 조건문의 종류에는 if문, else문, if else문, 중첩 if문이 있습니다.
if문
if문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 조건식은 앞에서 배웠던 Boolean( ) 내장 메서드와 마찬가지로 그 어떤 데이터를 입력해도 true 또는 false를 반환합니다.
if(조건식){
자바스크립트 코드;
}
예제를 통해 if문을 살펴보겠습니다. 질의응답 창에 "당신의 하루 통화량은 몇 분인가요?"라고 출력되게 하고, 사용자가 입력한 값이 60분 이상이면 "많이 사용하는 편이네요."라고 출력되게 하였습니다.
<script>
var min = prompt("당신의 하루 통화량은 몇 분인가요?","0");
if(min >= 60) {document.write("많이 사용하는 편이네요", "<br>");}
document.write("===== The End =====");
</script>위 문서를 저장하고 브라우저에서 열면 다음과 같은 결과 화면이 나타납니다. 120을 입력하고 [확인] 버튼을 누른다면 "많이 사용하시는 편이네요"라고 출력됩니다. 만약 60 이하의 값이 입력되면 조건에 맞지 않기 때문에 아무것도 출력되지 않습니다.
결과화면
<60분 이상의 값을 입력하였을 경우>
많이 사용하는 편이네요
===== The End =====
<60이하의 값 또는 아무 것도 적지 않은 경우>
조건식에 논리형 데이터가 아닌 다른 형이 오는 경우
조건식에는 논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식됩니다.
다음은 조건식에 논리형 데이터가 아닌 다른 형의 데이터가 입력되었을 때 반환되는 결과입니다.
다음 값이 조건식에 입력되면 false를 반환하지만 그 밖의 값은 true로 인식합니다.
else문
else 문은 조건식을 만족할(true) 경우와 만족하지 않을(false) 경우에 따라 실행되는 코드가 달라집니다. 즉, 두 가지 결과가 나올 수 있습니다. 다음은 조건식의 만족 여부에 따라 실행되는 코드가 달라지는 else문의 기본형입니다.
if(조건식){
자바스크립트 코드1;
} else{
자바스크립트 코드2;
}
다음 예제를 통해 else문에 대해 알아보겠습니다. 방문자에게 질의응답 창으로 좋아하는 숫자를 입력받고 if~else문을 사용하여 입력된 값이 짝수인지, 홀수인지에 따라 출력되는 결과가 다르게 나타나도록 하였습니다.
<script>
var num = prompt("당신이 좋아하는 숫자는?", "0");
if(num % 2 == 0){
document.write("당신이 좋아하는 숫자는 짝수입니다.");
} else {
document.write("당신이 좋아하는 숫자는 홀수입니다.");
}
</script>if else문
if else문은 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드 로 이루어져 있습니다.
다음은 else if문의 기본형입니다. 가장 위에 있는 조건식1부터 5까지 차례로 조건 검사를 하면서 만족(true)하는 값이 나오면
그에 해당하는 코드를 실행하고 조건문을 종료합니다. 조건식 중 만족(true)하는 값이 하나도 없으면 else문의 중괄호{...}에 있는 코드를 실행합니다.
if(조건식){
코드1;
} else if(조건식2){
코드2;
} else if(조건식3){
코드3;
} else if(조건식4){
코드4;
} else if(조건식5){
코드5;
} else (조건식6){
코드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>질의응답 창에 6을 입력하면 조건식을 검사하여 6월에 해당하는 문구인 "여행가기 좋은 여름이네요!!"가 출력됩니다.
중첩 if문
조건문 안에 조건문이 있으면 중첩 if문이라고 합니다. 중첩 if문의 기본형은 다음과 같습니다.
if(조건식){
if(조건식2){
자바스크립트 코드;
}
}
중첩 if문은 바깥쪽에 있는 조건문인 조건식1을 만족해야만 안쪽에 있는 조건문인 조건식2를 검사합니다.
만약 안쪽 if문의 조건식2를 만족하지 않으면 바깥쪽 조건문인 조건식1의 중괄호 안에 있는 코드만 실행하고 종료됩니다.
다음 예제와 같이 방문자로부터 아이디와 비밀번호를 입력받았을 때 아이디와 비밀번호를 한 번에 처리하지 않아도 됩니다.
방문자의 아이디가 일치하지 않으면 비밀번호의 일치 여부를 굳이 검사하지 않아도 되니까요.
다음은 중첩 if문을 사용해 아이디와 비밀번호가 일치했을 때 환영 문구가 출력되도록 작성한 예제입니다.
비밀번호가 일치하지 않을 경우에는 브라우저가 새로고침이 되도록 했습니다.
<script>
var id = "easy1004";
var pw = "112233"
var user_id = prompt("아이디는?","");
var user_pw = prompt("비밀번호는?","");
if(id == user_id) {
if(pw == user_pw) {
document.write(used_id+"님 반갑습니다!");
} else {
alert("비밀번호가 일치하지 않습니다.");
}
} else {
alert("아이디가 일치하지 않습니다.");
location.reload();
}
</script>