switch문
특정 값과 비교하여 참인 경우 실행.
복수의 if 조건문을 switch문으로 대체할 수 있음.
하나 이상의 case문을 포함하며 마지막 default문은 생략 가능하다.
switch (비교값) { //비교시 엄격한 비교 ===
case 비교할 값: //이 값과 비교하여 참인 경우 실행
실행문;
break; //비교값이 참인 경우 다음으로 넘어가지 않고 구문을 벗어남.
case 비교할 값 :
실행문;
break;
default: //위의 비교값과 일치하는 값이 없는 경우 실행. else와 같은 역할을 하며 생략 가능
실행문;
break; //제일 마지막 값이기 때문에 생략 가능
}
1~4 숫자 중 하나를 입력하면 브라우저에 텍스트 표시
<script>
let num = prompt("1~4 숫자 중 하나만 작성해주세요.");
num *= 1;
// switch문은 엄격한 비교(===)이기 때문에
// 숫자형 문자열로 입력받는 prompt값의 데이터를 숫자로 변환해야 함.
switch (num) {
case 1: //case 값으로 문자열, 숫자, 논리, null, undefined 등이 가능
document.body.innerHTML = `<h2>입력한 숫자는 ${num}입니다.</h2>`;
break;
case 2:
document.body.innerHTML = `<h2>입력한 숫자는 ${num}입니다.</h2>`;
break;
case 3:
document.body.innerHTML = `<h2>입력한 숫자는 ${num}입니다.</h2>`;
break;
case 4:
document.body.innerHTML = `<h2>입력한 숫자는 ${num}입니다.</h2>`;
break;
default:
document.body.innerHTML = `<h2>1~4 숫자만 입력해주세요.</h2>`;
break;
}
</script>
사이트 이름을 입력하면 해당 사이트 새창으로 열기
<script>
// 사이트 입력 시 해당 사이트로 이동
let site = prompt(`네이버, 구글, 다음 중 원하는 사이트를 입력`);
let url = "";
switch (site) {
case `네이버`:
url = "https://naver.com";
break;
case `구글`:
url = "https://google.com";
break;
case `다음`:
url = "https://daum.net";
break;
default:
alert(`제시된 사이트가 아닙니다`);
break;
}
window.open("about:blank").location.href = url
</script>
prompt 창을 빈 칸으로 두거나 취소 버튼을 눌렀을 때의 지시문을 적용하려면
document.body.innderHTML이 해당 지시문을 덮어쓰지 않게 if문으로 제어해줘야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<script>
let coffee = prompt("아메리카노, 카페라떼, 카페모카, 바닐라라떼 중 하나를 입력하세요", "");
let price;
switch (coffee) {
case '아메리카노':
price = '15000원';
break;
case '카페라떼':
price = '20000원';
break;
case '카페모카':
price = '20000원';
break;
case '바닐라라떼':
price = '25000원';
break;
case '':
alert("커피를 입력해주세요.")
break;
case null:
alert("주문을 취소하셨습니다.")
break;
default: //지시문은 있지만 만약 아래 if문을 생략하면 해당 텍스트에 덮여 보이지 않음
document.body.textContent = "없는 메뉴입니다."
break;
}
if (coffee && price) { //coffee와 price의 값이 모두 입력되어야 출력되는 if문으로 제어
document.body.innerHTML = `주문한 커피는 ${coffee}이고 가격은 ${price}입니다.`
}
</script>
</body>
</html>
switch문 안에 switch문을 작성하는 것도 가능.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<script>
const defaultId = "web";
const defaultPw = 1234;
let user = prompt("아이디를 입력해주세요", "");
let userpw;
switch (user === defaultId) {
case true:
alert("아이디가 일치합니다");
userpw = prompt("비밀번호를 입력하세요", "");
userpw = Number(userpw);
switch (userpw) {
case defaultPw:
alert("로그인 성공");
break;
default:
alert("비밀번호가 틀렸습니다");
break;
}
break;
default:
alert("아이디가 틀렸습니다.");
break;
}
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [JavaScript] 화살표 함수 (arrow function) (0) | 2022.12.01 |
|---|---|
| [JavaScript] 함수 function (0) | 2022.12.01 |
| [JavaScript] 반복문 for, while (0) | 2022.11.30 |
| [JavaScript] 변수와 상수 (var, let, const) (0) | 2022.11.29 |
| [JavaScript] if 조건문, if else 조건문, else if 조건문, 중첩 조건문 (0) | 2022.09.19 |