반응형
switch 문
여러 케이스들 중에서 해당값이 일치하는 경우에 해당하는 코드문을 실행합니다.
만약, switch 변수의 값이 값1과 동일하다면 코드 1이 코드문이 실행됩니다.
값1이 아닌 swtich 변수의 값이 값2와 동일하면 코드2가 실행됩니다.
마찬가지로 값3과 동일하면 코드3, 값4와 동일하면 코드4가 실행되며,
그 외의 값일 경우 default로 처리되어 코드 5가 실행됩니다.
var 변수 = 초기값;
switch(변수){
case 값1 : 코드1;
break;
case 값2 : 코드2;
break;
case 값3 : 코드3;
break;
case 값4 : 코드4;
break;
default : 코드5;
}
switch문 실습 예제
prompt를 사용하여 포털사이트 이름을 입력값을 받아서 switch문으로 사이트를 판별한 후,
입력한 사이트로 이동하도록 작성된 예제를 실습해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택문 : switch</title>
</head>
<body>
<h3>선택문 : switch</h3>
<script>
let site = prompt("즐겨찾는 포털사이트 입력 (네이버, 다음, 네이트, 구글) : ", "");
let url; // 변수의 초기값은 undefined
// break; 문을 생략하면, 아래 case 구문이 동작된다.
// break; 문을 사용하면, switch문을 탈출한다.
switch(site){
case "네이버":
url = "www.naver.com";
break;
case "다음":
url = "www.daum.net";
break;
case "네이트":
url = "www.nate.com";
break;
case "구글":
url = "www.goolge.com";
break;
default:
url = "";
}
if(url){
// 주소이동 명령어
// location.href = "이동 주소";
location.href = "http://" + url;
}else{
alert("일치하는 주소가 없습니다. 정확히 입력해주세요.");
location.reload();
}
</script>
</body>
</html>
switch문에서 site 변수가 '구글'이면 url 변수에 구글 사이트(www.google.com)을 저장하는 코드가 실행되고,
site 변수가 '다음'이면 url 변수에 다음 사이트(www.daum.net)을 저장하는 코드가 실행되고,
마찬가지로 site가 네이버면 url 변수에 네이버 사이트(www.naver.com)를 저장하고,
site가 네이트이면 url 변수에 네이트 사이트(www.nate.com)을 저장합니다.
이 외의 값이 들어왔을 때는 "보기 중에 없는 사이트입니다"를 알림창으로 알려줍니다.
그 다음 if문으로 url 값이 있다면 location.href로 url에 저장된 해당 주소로 이동합니다.
만약 url값이 없다면 "일치하는 주소가 없습니다. 정확히 입력해주세요."를 출력하고, 다시 창이 새로고침 됩니다.
반응형
'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글
| [JavaScript] 객체(Object) (0) | 2024.01.28 |
|---|---|
| [JavaScript] 제어문 (3) - 반복문 while문, do while문, for문, 중첩 for문, break문, continue문 (0) | 2024.01.28 |
| [JavaScript] 제어문 (1) - 조건문(if, else, else if, 중첩 if) (0) | 2024.01.28 |
| [JavaScript] JavaScript 시작하기 (4) - 연산자 (0) | 2024.01.17 |
| [JavaScript] JavaScript 시작하기 (3) - 변수 (0) | 2024.01.17 |