코드
<script>
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
key.classList.add("playing"); // audio.play 될때 css 효과
audio.currentTime = 0;
// 같은 키를 연달아 빠르게 눌렀을 때 반응이 없는 것을 막기 위한 예외 처리
audio.play();
}
/* 키를 누르고 난 후 */
function removeTransition(e) {
if (e.propertyName !== "transform") return;
e.target.classList.remove("playing"); // css 효과 제거
}
const keys = Array.from(document.querySelectorAll(".key"));
keys.forEach((key) =>
key.addEventListener("transitionend", removeTransition)
);
window.addEventListener("keydown", playSound);
</script>e
-
이벤트 리스너가 호출될 때 자동으로 전달해주는 이벤트 객체
const audio = document.querySelector(audio[data-key="${e.keyCode}"]);- 그래서 위 코드에서 e를 빼고 keyCode만 했을 때 아무 변수도 없는 이름 값을 가져오게 된다
- e가 없으면 ReferenceError 발생
event.keyCode
- 사용자의 키 입력을 감지하여 값을 나타냄
- ASCII 코드에 기반
- A : 65
- keycode.info에 들어가서 키보드 눌러보면 해당하는 keycode를 볼 수 있다
querySelector()
- 괄호 속에 제공한 선택자와 일치하는 문서 내 첫번째 Element를 반환
- 일치하는 요소가 없다면 null 반환
예시
<body>
<h1>h1</h1>
<h2 class="h2">h2</h2>
<h3 id="h3">h3</h3>
<h3>h3_2</h3>
<div>
<span>Span1</span>
<span>Span2</span>
</div>
<script src="app.js"></script>
</body>
- 태그 select
const selected = document.querySelector("h1");
selected.style.color = "red";- 클래스 select
const selected = document.querySelector(".h2");
selected.style.color = "red";- id select
const selected = document.querySelector("#h3");
selected.style.color = "red";- 복합 select
const selected = document.querySelector("div span");
selected.style.color = "red";-
Q) 왜 div를 선택하는데 span1만 빨간색이 될까?
- 여기서 querySelector와 querySelectorAll 차이가 나타남
- querySelector
- 첫 번째 일치하는 요소 하나만 선택
- querySelectorAll
- 일치하는 모든 요소 선택
transitionend 이벤트
-
transofrm?
HTML 요소를 이동, 회전, 크기 조정, 기울임 등을 통해 변형할 수 있게 해주는 css 속성- ex) transform: scale(1.1); >>> 요소의 크기를 1.1배로 확대하라는 뜻
-
transition이 완료된 이후에 발생하는 이벤트, transition 완료를 감지한다
-
transition과 함께 사용하는 함수
-
addEventListenrer를 사용하여 이벤트 모니터링 가능
css class 변경
- playSound 함수에서 - class 추가
key.classList.add("playing");- removeTransition 함수에서 - 소리가 끝나고 난 후 class 제거
e.target.classList.remove("playing"); - div의 class가 key > key playing > key로 변경
