2023-01-06 TIL (JS) 자바스크립트 : 자바스크립트이 코드리팩토링.

키보드로 입력값을 입력받는 이벤트.

 document.addEventListener('keydown', function (e) {

   console.log(e.key)
 })

키보드로 입력값중 필요한 부분은 'key'부분.. e.key를 활용해서 입력받은 버튼하나당 이벤트를 관리할 수 있다.

코드 리팩토링

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function () {
    sound(this.textContent)
    animationDrum(this.textContent)
  });
}




for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('keydown', function (e) {
    animationDrum(e.key)
    sound(e.key)
  });
}


function animationDrum(key) {
  switch (key) {
    case 'w':
      buttons[0].classList.add('pressed');
      setTimeout(function () {
        buttons[0].classList.remove('pressed');
      }, 200); // 0.2초 후 실행.
      var audio = new Audio('sounds/crash.mp3');
      audio.play();
      break
    case 'a':
      buttons[1].classList.add('pressed');
      setTimeout(function () {
        buttons[1].classList.remove('pressed');
      }, 200); // 0.2초 후 실행.
      var audio = new Audio('sounds/kick-bass.mp3');
      audio.play();
      break
    case 's':
      buttons[2].classList.add('pressed');
      setTimeout(function () {
        buttons[2].classList.remove('pressed');
      }, 200); // 0.2초 후 실행.
      var audio = new Audio('sounds/snare.mp3');
      audio.play();
      break
    case 'd':
      buttons[3].classList.add('pressed');
      setTimeout(function () {
        buttons[3].classList.remove('pressed');
      }, 200); // 0.2초 후 실행.
      var audio = new Audio('sounds/tom-1.mp3');
      audio.play();
      break
    case 'j':
      buttons[4].classList.add('pressed');
      setTimeout(function () {
        buttons[4].classList.remove('pressed');
      }, 200); // 0.2초 후 실행.
      var audio = new Audio('sounds/tom-2.mp3');
      audio.play();
      break
    case 'k':
      buttons[5].classList.add('pressed');
      setTimeout(function () {
        buttons[5].classList.remove('pressed');
      }, 200); // 0.2초 후 실행.
      var audio = new Audio('sounds/tom-3.mp3');
      audio.play();
      break
    case 'l':
      buttons[6].classList.add('pressed');
      setTimeout(function () {
        buttons[6].classList.remove('pressed');
      }, 200); // 0.2초 후 실행.
      var audio = new Audio('sounds/tom-4.mp3');
      audio.play();
      break

  }

}

function sound(key) {
  switch (key) {
    case 'w':
      var audio = new Audio('sounds/crash.mp3');
      audio.play();
      break
    case 'a':
      var audio = new Audio('sounds/kick-bass.mp3');
      audio.play();
      break
    case 's':
      var audio = new Audio('sounds/snare.mp3');
      audio.play();
      break
    case 'd':
      var audio = new Audio('sounds/tom-1.mp3');
      audio.play();
      break
    case 'j':
      var audio = new Audio('sounds/tom-2.mp3');
      audio.play();
      break
    case 'k':
      var audio = new Audio('sounds/tom-3.mp3');
      audio.play();
      break
    case 'l':
      var audio = new Audio('sounds/tom-4.mp3');
      audio.play();
      break
  }
}

중복사용되는 기능은 함수를 통해 작성.