여러 개의 조건을 한 번에 표현할 때 switch문이 유용하게 쓰인다. if문으로도 같은 결과는 도출할 수 있지만 코드의 중복이 엄청나기 때문에 조건이 한정되어 있을 경우 switch문으로 표현하는 게 좋다.
아래와 같은 식으로 표현한다. 임의로 case에 숫자 1을 넣었다. break; 도 꼭 잊지 말고 넣어주자. swich문을 쓰면서 제대로 입력한 것 같은데 엉뚱한 결과가 나온다면 10중 8,9는 break; 를 빠뜨린 경우다.
switch(변수){
case 1:조건;break;
}
1~7 사이의 숫자를 입력했을 때 무지개 색의 순서대로 배경이 깔리는 예제를 만들어보자.
먼저, if문을 활용한 식을 보면 아래와 같다.
<script>
function setBg(){
var bg;
var n=prompt("1~7사이의 숫자를 입력하세요");
if(n==1){
bg="red";
}
else if(n==2){
bg="orange";
}
else if(n==3){
bg="yellow";
}
else if(n==4){
bg="green";
}
else if(n==5){
bg="blue";
}
else if(n==6){
bg="navy";
}
else if(n==7){
bg="purple";
}
else{
alert("1~7사이의 숫자만 입력하세요");
}
document.body.style.background=bg;
}
</script>
</head>
<body onLoad="setBg()">
Else를 써서 숫자 별로 구구절절 같은 식을 반복해야 한다. 값은 나오겠지만 저렇게는 하지 말자. switch문을 쓰면 한 가지 조건당 한 줄로 끝난다.
<script>
function setBg(){
var bg;
var n=prompt("1~7사이의 숫자를 입력하세요");
n=parseInt(n);
switch(n){
case 1:bg="red";break;
case 2:bg="orange";break;
case 3:bg="yellow";break
case 4:bg="green";break;
case 5:bg="blue";break;
case 6:bg="navy";break;
case 7:bg="purple";break;
default:alert("1~7사이 숫자만 넣어달라구요");
}
document.body.style.background=bg;
}
</script>
</head>
<body onLoad="setBg()">
Case를 7까지 만들어서 숫자와 무지개 색을 매칭시켰다. Default 값을 하나 넣었는데 만약 사용자가 1~7 사이의 숫자 이외에 다른 값을 입력 했을 경우 alert 괄호 안의 문구가 뜨도록 세팅 했다.
Switch문은 게임을 만들 때도 유용하게 쓰인다. 방향키의 키 값을 넣고 움직이는 조건을 주면 방향키를 넣을 때마다 캐릭터가 움직이게 만들 수 있다.
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| [문돌이의IT]자바스크립트로 이미지 자동으로 움직이기 (6) | 2016.02.06 |
|---|---|
| [문돌이의IT] 자바스크립트 연산자를 활용해서 윤년 여부를 판단해보자 (0) | 2016.02.05 |
| [문돌이의IT] 자바스크립트 for문을 심도있게 이해해보자 (0) | 2016.02.02 |
| [문돌이의IT] 자바스크립트 논리연산자, 삼항연산자에 대해 알아보자 (0) | 2016.01.25 |
| [문돌이의IT] 자바스크립트 산술연산자의 종류를 알아보자 (0) | 2016.01.24 |