Web - Front end 12. Javascript 조건문
Web - Front end 12. Javascript 조건문
조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업(프로그램 코드)을 실행
if - else , switch
1. if
if 문 만으로 조건문을 만들 수 있음
참이면 실행문을 실행한 후 if문을 벗어남
거짓이면 바로 if문을 벗어남
if (조건식){
...실행문... //조건식이 참인 경우
}
2. if - else
조건식이 참인 경우와 거짓인 경우에 다른 코드를 실행
if (조건식){
...실행문... //조건식이 참인 경우
}
else {
...실행문... //조건식이 거짓인 경우
}
3. 다중 if - else 문
if-else를 연속 작성해서 각 조건에 맞는 코드를 실행
if (조건식1){
...실행문1... //조건식1이 참인 경우
}
else if (조건식2){
...실행문2... //조건식2이 참인 경우
}
....
else {
...실행문n... //앞의 모든 조건이 거짓인 경우
}
* 예시 - 학점 출력 프로그램
<body>
<h2>학점 알아보기</h2>
<hr>
<script>
let score = parseInt(prompt("점수를 입력하시오", 50));
let grade;
if (score >= 90)
grade = 'A'
else if (score >= 80)
grade = 'B'
else if (score >= 70)
grade = 'C'
else if (score >= 60)
grade = 'D'
else
grade = 'F'
document.write("당신의 학점은 " + grade + "입니다.")
</script>
</body>
4. switch
값에 따라 서로 다른 코드를 실행할 때 if-else 문보다 더 효율적
switch (식){
case 값1: // 식의 결과과 값1과 같을 때
실행문장1
break;
case 값2: // 식의 결과과 값2과 같을 때
실행문장2
break;
case 값3: // 식의 결과과 값3과 같을 때
실행문장3
break;
...
case 값n: // 식의 결과과 값n과 같을 때
실행문장n
break;
default : // 일치하는 결과가 없을 때
실행문장
}
괄호 안에 있는 식의 결과가 case 문의 값과 일치하는 실행문장으로 분기
실행 후 break 문 만날 때까지 아래에 있는 실행문들 실행하다가 break문 만나면 switch문 벗어남
식과 일치하는 값이 없는 경우 default 문으로 바로 분기 (default문은 생략 가능)
실행문이 여러줄이여도 중괄호({})로 감싸지 않음
식에는 정수나 문자열에 해당하는 수식이나 변수가 옴
case문의 값에는 const로 선언된 상수나 리터럴 값만 가능(정수, 실수, 문자열, 불리언, 수식 등)
case문의 값에는 변수나 식은 올 수 없음
* 예시 - 커피 주문 받는 프로그램
<body>
<h2>커피를 주문해 주세요</h2>
<hr>
<script>
let price = 0;
let coffee = prompt("커피 종류를 입력하세요");
switch(coffee){
case "아메리카노" :
price = 3500;
break;
case "콜드브루" :
price = 4700;
break;
case "카푸치노" :
price = 4500;
break;
case "카페라떼" :
price = 4200;
break;
default :
document.write("<h3>판매하지 않는 커피</h3>");
break;
}
if (price != 0){ // 커피 가격이 책정된 경우에만 실행
document.write("<h3>" + coffee +"의 가격은 ");
document.write("price + "원 입니다. </h3>");
}
</script>
</body>
여러 case에 대해 동일한 코드를 실행할 경우 break문을 의도적으로 생략
* 예시 - 요일별 휴무 여부를 출력
<body>
<h1>의도적인 break문 생략</h1>
<hr>
<script>
let day = prompt("요일을 입력하시오");
switch(day){
case "월":
case "화":
case "수":
case "목":
case "금": // 월~금인 경우 동일한 코드 실행
document.write("<h3>" + day + "요일은 정상영업</h3>");
break;
case "토":
case "일": // 토, 일인 경우 동일한 코드 실행
document.write("<h3>" + day + "요일은 휴일</h3>");
break;
default:
document.write("<h3>요일을 잘못입력</h3>")
}
</script>
</body>
댓글
댓글 쓰기