02.Javascript 조건문 기초 이론 및 예제풀이

오늘은 Javascript 조건문 기초 이론 및 예제풀이를 기록할 것이다.

 

01. if 문

( )안의 조건이 true면 { }안의 명령을 처리하고 false면 명령을 무시한다.

if(  ){

}

 

 

02. if else 문

( )안의 조건이 true면 { }안의 명령을 처리하고 false면 else{ } 안의 명령을 실행한다.

if( ){

}
else{ }

* else문 옆에는 조건문이 들어가지 않는다.

 

 

03. else if 문

( )안의 조건이 true면 { }안의 명령을 처리하며 하위 else if의 ( )안의 조건이 true인지 계속 거치면서 확인을 하고,

false일 경우 else{ } 안의 명령을 실행한다.

if( ){

}
else if( ){

}
else if( ){

}
else{ }

 

 

04. 조건 연산자

조건이 하나이고 실행할 명령도 하나일 때 사용한다.

( 조건 ) ? 명령1 : 명령2 ; 의 형태로 사용한다.

 

아래는 70점 이상 맞으면 합격인 시험을 합격, 불합격 결과로 나눴을 때를 예로 들은 조건 연사자의 사용 방법이다.

var score = 80;
(score >= 70) ? alert("합격") : alert("불합격");

해석 : 나의 점수를 변수로 설정한 score는 80점이다.

        이 score가 70점 이상이면 합격이라는 alert창을 띄우고 70점 이하라면 불합격이라는 alert창을 띄운다. 

 

 

05. switch 문

한정된 데이터를 사용했을 때 사용하는 조건문이다.

또한 한정된 데이터를 사용했을 때 if문보다 가독성이 좋다.

 

switch 문에는 필수 요소들이 있는데,

switch, case, break 가 있고 옵션으로 넣어도 되고 안 넣어도 된는 default로 이루어져 있다.

더 자세한 예시는 예제 문제에 기록을 해놨다.

switch( ){
	case " " :       ;
    	break;
	case " " :       ;
    	break;
	case " " :       ;
    	break; 
        
	default :        ;
}

* case를 사용한 후 break로 깨주지 않으면 break가 들어가지 않은 부분 하위 case 값이 한번에 출력이 되는 문제가 생긴다.

 

[예제] 로그인 만들기

---

---

현재 html과 css로 잡아놓은 로그인 화면이다.

 

저 input창에 각각 입력해 놓은 id 값과 password 값을 입력한 후 로그인 버튼을 눌렀을 때 값이 true면 로그인이 되었다는 alert창이 나오고, 각각 틀린 로그인 정보가 있다면 그 역시 alert창으로 잘못되었다는 정보를 알려주는 로그인 화면이다.

function login(){
    var userID = document.querySelector("#ID").value;
    var userPW = document.querySelector("#PW").value;

    if( userID == "kim ant" && userPW == "1234"){
        alert( userID + "님 환영합니다.");
    }
    else if( userID =="kim ant"){
        alert("패스워드가 틀렸습니다.");
    }
    else{
        alert("아이디가 틀렸습니다.");
    };
}

먼저 html에 있는 input에 각각에 맞는 id 값을 설정하고 나서 변수 var로 userID와 userPW를 설정해 준다.

 

그리고 정보를 입력하고 로그인 버튼을 눌렀을 때 그 정보의 true, false 에 따라 결과가 달리질 수 있도록 

if 와 else if  else를 사용하여 개발을 했다.

---

---

userID가 "kim ant"이면서 userPW가 "1234"로 true값을 입력을 하면 환영한다는 alert창이 나오며 로그인이 된다.

 

---

---

그리고 userID만 true일 경우 "패스워드가 틀렸습니다." 라는 alert 창을 띄우게 했고,

그 외의 정보를 입력하면 "아이디가 틀렸습니다." 라는 alert 창을 띄우게 했다.

 

 

[예제] 학점 계산기

var score = window.prompt("점수를 입력해 주세요.");

score = parseInt(score);

if(score <= 100 && score >= 90){
    document.write("당신의 점수는 " + score + "임으로 <span>A</span> 학점입니다.");
}
else if(score <= 89 && score >=80){
    document.write("당신의 점수는 " + score + "임으로 <span>B</span> 학점입니다.");
}
else if(score <= 79 && score >=70){
    document.write("당신의 점수는 " + score + "임으로 <span>C</span> 학점입니다.");
}
else if(score <= 69 && score > 0){
    document.write("당신의 점수는 " + score + "임으로 <span>기준 미달</span>입니다.");
}
else{
    document.write(score + "은 잘못된 점수입니다. <span>점수를 다시 입력해 주세요.</span>");
}

사용자로부터 입력을 받을 수 있는 prompt를 사용하여 점수값을 입력 받고 if문에 적용을 하는데, 

prompt로 입력을 받은 값은 문자(string)값으로 처리가 되기 때문에 에러가 생길 수 있기에

score = parseInt(score);

parseInt를 사용하여 문자(string)값을 숫자(number)값으로 강제 변환을 시켜줬다.

 

그리고 연산자를 이용하여 점수에 맞는 학점이 나오도록 적용을 하였다.

---

사용자로부터 입력값을 받을 수 있는 prompt

 

입력한 점수에 맞는 결과값이 화면에 나온다.

---

 

 

 

[예제] switch 문 과일 가격표

과일과 정해진 가격과 같이 한정된 데이터를 사용한 switch문 예제이다.

var rank = window.prompt("가격이 궁금한 과일을 입력해 주세요. 1-바나나, 2-메론, 3-청포도, 4-딸기, 5-수박");

rank = parseInt(rank);

switch(rank){
    case 1 : alert("바나나의 가격은 한송이에 5,000원 입니다.");
        break;
    case 2 : alert("메론의 가격은 한 개에 10,000원 입니다.");
        break;
    case 3 : alert("청포도의 가격은 한송이에 8,000원 입니다.");
        break;
    case 4 : alert("딸기의 가격은 한 바구니에 6,000원 입니다.");
        break;
    case 5 : alert("수박 한 통에 17,000원 입니다.");
        break;

    default : alert("다시 과일 번호를 선택해 주세요.");
}

prompt 입력창에 가격이 궁금한 과일의 번호를 입력하면 그에 맞는 alert창을 띄어주는 방식이다.

 

그리고 저 과일 번호들 중 입력이 되어야할 값이 아닌 다른 값이 입력이 된다면 default 를 사용하여 

"다시 과일 번호를 선택해 주세요." 라는 alert창을 띄운다.

 

* 항상 switch문에서 유의해야할 점은 case를 사용한 후 break로 깨주는 것이다.