Javascript30. 01 - JavaScript Drum Kit
2020-01-02
Javascript30
정리: Javascript30을 공부한 내용 기록
01 - JavaScript Drum Kit
목표
요구사항
- 정해진 키를 누른다.
- 키를 누르면 소리가 재생된다.
- 키를 누르면 CSS 효과가 발생한다.
- CSS 효과는 0.5초 간 적용된 후 사라진다.
필요기술
- 입력된 키의 값을 확인한다.
- audio를 재생한다.
- class를 적용한다.
- class를 제거한다.
배운 것
Document.querySelector()
querySelector의 사용 방법.
const tagPicker = tag => key => document.querySelector(`${tag}[data-key="${key}"]`);
const divPicker = tagPicker("div"); // div[data-key="${key}"]
const audioPicker = tagPicker("audio"); // audio[data-key="${key}"]Element.classList
Element.classList를 이용하여 쉽게 클래스를 추가(add), 삭제(remove), 변경(toggle)할 수 있다.
const div = divPicker(key);
div.classList.add("playing");
setTimeout(() => div.classList.remove("playing"), 100);audio
audio를 사용할 때 currentTime을 0으로 변경하면 지연없이 바로 실행이 가능하다.
const audio = audioPicker(key);
audio.currentTime = 0; // 재생 딜레이를 0으로 변경한다.
audio.play();keydown
키보드를 입력할 때는 keydown을 사용하자.
keypress는 Deprecated 되었음.
key이벤트에서 keyCode도 Deprecated 되었음.
window.addEventListener("keydown", (e) => {
kickTheDrum(e.key);
});👋
