2020-01-02
정리
: Javascript30을 공부한 내용 기록
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를 이용하여 쉽게 클래스를 추가(add), 삭제(remove), 변경(toggle)할 수 있다.
const div = divPicker(key);
div.classList.add("playing");
setTimeout(() => div.classList.remove("playing"), 100);
audio를 사용할 때 currentTime
을 0으로 변경하면 지연없이 바로 실행이 가능하다.
const audio = audioPicker(key);
audio.currentTime = 0; // 재생 딜레이를 0으로 변경한다.
audio.play();
키보드를 입력할 때는 keydown을 사용하자.
keypress는 Deprecated 되었음.
key이벤트에서 keyCode도 Deprecated 되었음.
window.addEventListener("keydown", (e) => {
kickTheDrum(e.key);
});
👋