JS] switch statement | switch, case, break, default

 

switch statement

variable의 value에 따라 다른 트랙으로 가는 것

각 버튼에 다른 소리가 나게 하려면 switch statement가 필요하다.

if statement를 쓸 수도 있지만

그럼 if, else를 너무 많이 써야하니 switch를 쓴다.

 

 

 

참고) 7개의 드럼 html 코드

html

 

 

switch bare bones

 

 

7. 각 버튼의 innerHTML을 뽑아서 buttonInnerHTML에 담았다.

각 letter를 뽑아서 buttonInnerHTML에 담는 것이다.

 

8. switch (expression) switch on 할 variable을 넣는다. 

switch(buttonInnerHTML) : 각 letter를 담은 variable에 스위치 온할 것이다. 

 

9,10,11 case "w": 

첫 번째 버튼의 letter가 w 이다. 

buttonInnerHTML에 담긴 문자가 w인지 묻는다.

buttonInnerHTML가 w와 같다면 아래의 내용을 실행한다. 

var crash = new Audio("sounds/crash.mp3");

crash.play();

괄호를 사용하지 않고, 콜론을 사용한다.

 

12. break;

여기 switch statement을 exit하고 다음 코드로 가라. 

 

00. default:

if-else에서 else와 비슷하다. 

default 나올 일 없다하더라도 내용 채워 주는 것이 좋다. 

 

완성

각 드럼을 클릭하면 다른 소리가 난다.

 

---

 

var numberOfDrums = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrums; i++) {

document.querySelectorAll(".drum")[i].addEventListener("click", function() {

 

var buttonInnerHTML = this.innerHTML;

switch (buttonInnerHTML) {

case "w":

var crash = new Audio("sounds/crash.mp3");

crash.play();

break;

 

case "a":

var kickBass = new Audio('sounds/kick-bass.mp3');

kickBass.play();

break;

 

case "s":

var snare = new Audio('sounds/snare.mp3');

snare.play();

break;

 

case "d":

var tom1 = new Audio('sounds/tom-1.mp3');

tom1.play();

break;

 

case "j":

var tom2 = new Audio('sounds/tom-2.mp3');

tom2.play();

break;

 

case "k":

var tom3 = new Audio('sounds/tom-3.mp3');

tom3.play();

break;

 

case "l":

var tom4 = new Audio('sounds/tom-4.mp3');

tom4.play();

break;

 

default:

console.log(buttonInnerHTML);

break;

}

});

}