JavaScript 선택문(Switch~case문)

191223 수업 내용 정리

---

선택문

switch~case 문

몇 가지 값이 정해져 있는 경우에 함수를 제어하기 용이함, else if문보다 속도가 빠름

• 형식

  	switch(변수){
  	 case 값1: 코드1; //값1에 해당하는 변수가 들어오면 코드1을 실행
  	 break; // ※탈출문, 케이스1의 경우에 함수에서 빠져나감(종료)
  	 case 값2: 코드2;
  	 break;
  	 case 값3: 코드3;
  	 break;
  	
  	 default: 코드4; //설정한 값 중에 일치하는 값이 없다면 default에 해당하는 코드4가 실행됨
  	}

 

• 예제 : div 박스 색깔 변경 버튼 만들기

  	<!--html-->
  	<input type="button" value="Red" onclick="setColor(1)">
  	<input type="button" value="Green" onclick="setColor(2)">
  	<input type="button" value="Blue" onclick="setColor(3)">
  	<div id="box" style="width: 200px;height: 60px;    border: 2px solid black;"></div>

  	//JavaScript
  	function setColor(n) {
  	 var box = document.getElementById("box"); /* getElementById("")
  							id값으로 html요소를 제어할 수 있는 속성
  							다음에 더 자세히 다룰 예정 */ 
  	 var color = "#ffffff"; // White, RGB를 16진수로 표현한 것
  
   	 switch(n) {
    	 case 1: color = "#ff0000"; // Red
  	 break; // 탈출문, 케이스 1의 경우에 함수를 종료하라는 뜻
  	 case 2: color = "#00ff00"; // Green
  	 break;
  	 case 3: color = "#0000ff"; // Blue
  	 break;
  	 // case 1: Red, case 2:Green, case 3: Blue 
  	 }
  	 box.style.background = color;
  	 }

---

선택지가 많지 않은 경우에는 switch문을 활용하는 것이 효과적일 듯 합니다.