[JavaScript30] Day 1

JavaScript Drum Kit

window.addEventListener('keydown', function(e) {
  /* body */
}, capture?: bollean);

 

window.addEventListener('keydown', function(e) {
  console.log(e);
});

 

 

window.addEventListener('keydown', function(e) {
  console.log(e.keyCode);
});

 

 

window.addEventListener('keydown', function(e) {
  const audio = document.querySelector('audio[data-key="65"]');
});

 

window.addEventListener('keydown', function(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  console.log(audio);
});

 

window.addEventListener('keydown', function(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  if (!audio) return; // 오디오가 없는 키를 누르면 함수 실행 중지

  audio.currentTime = 0; // 이미 실행중인 키를 또 누르면 0초로 돌아가서 재생
  audio.play();
});

 

 

window.addEventListener('keydown', function(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
  if (!audio) return; // 오디오가 없는 키를 누르면 함수 실행 중지

  audio.currentTime = 0; // 이미 실행중인 키를 또 누르면 0초로 돌아가서 재생
  audio.play();
  key.classList.add('playing');
  
  setTimeout(function() {
    // 효과 없애기
  }, 0.07); 
  // css에서 시간을 변경하면 스크립트도 변경해야하기때문에 애니메이션이 끝나는 시점에 이벤트를 사용하는 것이 낫다.
})

 

window.addEventListener('keydown', function(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
  if (!audio) return; // 오디오가 없는 키를 누르면 함수 실행 중지
  
  audio.currentTime = 0; // 이미 실행중인 키를 또 누르면 0초로 돌아가서 재생
  audio.play();
  key.classList.add('playing');
});

const keys = document.querySelectorAll('.key');

 

 

window.addEventListener('keydown', function(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
  if (!audio) return; // stop the function form running all together 함수가 모두 함께 실행되는 것을 중지

  audio.currentTime = 0; // 같은 키를 반복적으로 누를 경우 다시 0초로 돌아가서 재생
  audio.play();
  key.classList.add('playing');
});

function removeTransition(e) {
  console.log(e);
}

const keys = document.querySelectorAll('.key'); //keys는 배열이 아닌 유사 배열
keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // keys가 유사 배열 형태이기 떄문에 forEach를 사용해서 각각에 이벤트 리스너를 추가

 

 

window.addEventListener('keydown', function(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
  if (!audio) return; // stop the function form running all together 함수가 모두 함께 실행되는 것을 중지

  audio.currentTime = 0; // 같은 키를 반복적으로 누를 경우 다시 0초로 돌아가서 재생
  audio.play();
  key.classList.add('playing');
});

function removeTransition(e) {
  if(e.propertyName !== 'transform') return; // skip it if it's not a  transform
  console.log(this);
}

const keys = document.querySelectorAll('.key'); //keys는 배열이 아닌 유사 배열
keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // keys가 유사 배열 형태이기 떄문에 forEach를 사용해서 각각에 이벤트 리스너를 추가

 

 

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.currentTime = 0;
  audio.play();
  key.classList.add('playing');
}

function removeTransition(e) {
  if(e.propertyName !== 'transform') return;
  this.classList.remove('playing')
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

 

 

 

 

---

EventTarget.addEventListener() : 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정하는 메서드

Element.classList : 클래스 속성을 DOMTokenList형식으로 보여주는 읽기 전용 프로퍼티

classList와 className의 차이

HTMLMediaElement.currentTime : HTMLMediaElement의 현재 재생 시간(단위: 초)을 지정하는 프로퍼티

HTMLMediaElement.play() : HTMLMediaElement의 재생을 시작하는 메서드

Document.querySelector(): 일치하는 첫 번째 요소를 반환하는 메서드

Document.querySelectorAll() : 일치하는 모든 요소 목록을 반환하는 메서드

DOMTokenList.add() : DOMTokenList에 지정된 토큰을 추가하는 메서드

DOMTokenList.remove() : DOMTokenList에서 지정된 토큰을 제거하는 메서드

Array.from() : 유사 배열이나 반복 가능한 객체를 복사 한 새로운 array 인스턴스를 반환하는 메서드

transitionend : transition이 완료되었을 때 발생하는 이벤트

keydown : 키보드 키가 눌렸을 때 발생하는 이벤트

setTimeOut() : 일정 시간 후 지정된 코드를 실행하는 타이머 함수

forEach() : 요소 각각에 대해 실행하는 메서드

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)