Javascript30

Javascript30 영상을 보고 개인적으로 정리 하는 글입니다.

제 이해가 틀린 부분도 있을 수 있으니 틀린 부분이 있다면 댓글로 적어주시면 감사하겠습니다.

자바스크립트30은 총 30개의 예제를 따라해보면서 순수 자바스크립트만 사용해서 이벤트를 작동시킨다.

요즘 React,Vue.js 등 프레임워크가 많아지고 제이쿼리로 사용이 편해지면서 접할 기회가 없어져가는데 가장 중요한

기본기를 다질 수 있는 예제인거 같다. 앞으로 예제를 하나씩 따라해보면서 내가 몰랐던것에 대해서도 배워보고

응용해서 다른것도 만들어보는 시간을 가지려고한다.

1 - Javascript Drum Kit

Keycode.info - 컴퓨터에 입력되는 키의 event.which값을 쉽게 확인할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
function playSound(e){
    const audio = document.querySelector('audio[data-key="${e.keycode}"]');
    const key = document.querySelector('key[data-key="${e.keycode}"]');
    if(!audio) return;//지정안한 키를 눌렀을때 입력을 막는 조건문
    audio.currenTime = 0; //키를 연속해서 눌렀을때 딜레이를 조절
    audio.play();
    key.classList.add('playing');
}
 
function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    //이벤트 실행시 propertyName의 transform이 있는지 아닌지 확인하는 조건문
    this.classList.remove('playing');
    //위 조건문이 통과하면 this에 playing 클라스를 제거
}
 
const keys = document.querySelectorAll('.key');
keys.forEach(key=> key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown',playSound});
</script>
Colored by Color Scripter
cs