이번에 웹서핑을 하면서 좋은 것을 보게 되었다
바로 javascript challenge 30 이라는 것이다. https://javascript30.com/ - 해당 사이트에 들어가면 무료로 콘텐츠를 사용할 수 있다.
제목에서도 알 수 있듯이, 30일 동안 매일 하나씩 JS 과제를 하는 것이다.
내가 하려는 것은
https://github.com/nicewook/JavaScript30 - 해당 깃헙을 fork해서 각 폴더에 있는 start파일을 써서 finished파일 처럼 작동할 수 있게 만드는 것이다. 막히는 것이 있으면 강의영상(무료다!!)을 참고하고 공부한 것들을 정리해서 여기 블로그에 쓸 것이다.
1. 오늘의 과제는?
오늘은 첫번째로 드럼 사이트를 만들게 된다. html css js로 키보드를 쳤을 때 해당 되는 드럼 네모박스를 하이라이트 시키고 드럼 소리가 나게 하면 된다.
https://www.youtube.com/watch?v=VuN8qwZoego
이 강의영상 초반부에 드럼을 치는 것을 볼 수 있다. 우리는 start파일을 참고해서 이런 식으로 구현하면 되는구나 이렇게 생각하면 된다.
2. 내가 만든 파일(사실 강의 내용이랑 거의 비슷함...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keys">
<div class="key" data-key="65">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div class="key" data-key="83">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div class="key" data-key="68">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div class="key" data-key="70">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div class="key" data-key="71">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div class="key" data-key="72">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div class="key" data-key="74">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div class="key" data-key="75">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div class="key" data-key="76">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<audio data-key="65" src="sound/01 - JavaScript Drum Kit_sounds_clap.wav"></audio>
<audio data-key="83" src="sound/01 - JavaScript Drum Kit_sounds_hihat.wav"></audio>
<audio data-key="68" src="sound/01 - JavaScript Drum Kit_sounds_kick.wav"></audio>
<audio data-key="70" src="sound/01 - JavaScript Drum Kit_sounds_openhat.wav"></audio>
<audio data-key="71" src="sound/01 - JavaScript Drum Kit_sounds_boom.wav"></audio>
<audio data-key="72" src="sound/01 - JavaScript Drum Kit_sounds_ride.wav"></audio>
<audio data-key="74" src="sound/01 - JavaScript Drum Kit_sounds_snare.wav"></audio>
<audio data-key="75" src="sound/01 - JavaScript Drum Kit_sounds_tom.wav"></audio>
<audio data-key="76" src="sound/01 - JavaScript Drum Kit_sounds_tink.wav"></audio>
<script>
//소리를 재생하는 함수
function audioPlay(e) {
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
//무시
if(!audio) return;
key.classList.add("playing"); //클래스 추가
audio.currentTime = 0;
audio.play();
}
//클래스 제거 함수
function removeClass(e) {
if(e.propertyName !== "transform") return;
e.target.classList.remove("playing");
}
//transitionend이벤트가 발생하면 removeClass를 호출한다
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeClass));
//keydown 이벤트가 발생하면 audioPlay를 호출한다
document.addEventListener('keydown', audioPlay);
</script>
</body>
</html>
3. 배운 점 & 느낀 점
| html - kbd태그 - https://developer.mozilla.org/ko/docs/Web/HTML/Element/kbd 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. |
| html - data-* 속성 - https://mygumi.tistory.com/341#:~:text=data 속성은 HTML 요소,저장한다고 생각하면 된다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM속성 등 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. 어느 엘리먼트에서나 data-로 시작하는 속성을 추가할 수 있습니다. 자바스크립트에서 getAttribute()나 dataset.* 으로 읽어낼 수 있습니다. |
| 자스 - 키보드 이벤트 - https://hianna.tistory.com/496 대표적으로 keydown, keyup, keypress 등이 있고 document.addEventListener('~', ~)를 통해서 쓸 수 있다. 키보드 이벤트 객체에서는 key속성, code속성 등이 있다. |
| 자스 - 오디오 객체 얻어서 실행시키기 - https://curryyou.tistory.com/337 객체를 얻어내서 play() 메서드를 사용하면 된다 ex) audioObj.play() |
| 자바스크립트 classList - https://velog.io/@rimu/자바스크립트-classList.add-remove-contains-toggle classList를 이용하면 클래스를 조작하는 다양한 메서드들을 쓸 수 있다. classList.add : 클래스를 필요에 따라 삽입한다. classList.remove : 클래스를 필요에 따라 제거한다. |
| transitionend 이벤트 - http://www.w3bai.com/ko/jsref/event_transitionend.html CSS 전환이 완료되면 transitionend 이벤트가 반환됩니다. |
여기까지 읽어주셔서 감사합니다!!
이번에 웹서핑을 하면서 좋은 것을 보게 되었다
바로 javascript challenge 30 이라는 것이다. https://javascript30.com/ - 해당 사이트에 들어가면 무료로 콘텐츠를 사용할 수 있다.
제목에서도 알 수 있듯이, 30일 동안 매일 하나씩 JS 과제를 하는 것이다.
내가 하려는 것은
https://github.com/nicewook/JavaScript30 - 해당 깃헙을 fork해서 각 폴더에 있는 start파일을 써서 finished파일 처럼 작동할 수 있게 만드는 것이다. 막히는 것이 있으면 강의영상(무료다!!)을 참고하고 공부한 것들을 정리해서 여기 블로그에 쓸 것이다.
1. 오늘의 과제는?
오늘은 첫번째로 드럼 사이트를 만들게 된다. html css js로 키보드를 쳤을 때 해당 되는 드럼 네모박스를 하이라이트 시키고 드럼 소리가 나게 하면 된다.
https://www.youtube.com/watch?v=VuN8qwZoego
이 강의영상 초반부에 드럼을 치는 것을 볼 수 있다. 우리는 start파일을 참고해서 이런 식으로 구현하면 되는구나 이렇게 생각하면 된다.
2. 내가 만든 파일(사실 강의 내용이랑 거의 비슷함...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keys">
<div class="key" data-key="65">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div class="key" data-key="83">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div class="key" data-key="68">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div class="key" data-key="70">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div class="key" data-key="71">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div class="key" data-key="72">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div class="key" data-key="74">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div class="key" data-key="75">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div class="key" data-key="76">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<audio data-key="65" src="sound/01 - JavaScript Drum Kit_sounds_clap.wav"></audio>
<audio data-key="83" src="sound/01 - JavaScript Drum Kit_sounds_hihat.wav"></audio>
<audio data-key="68" src="sound/01 - JavaScript Drum Kit_sounds_kick.wav"></audio>
<audio data-key="70" src="sound/01 - JavaScript Drum Kit_sounds_openhat.wav"></audio>
<audio data-key="71" src="sound/01 - JavaScript Drum Kit_sounds_boom.wav"></audio>
<audio data-key="72" src="sound/01 - JavaScript Drum Kit_sounds_ride.wav"></audio>
<audio data-key="74" src="sound/01 - JavaScript Drum Kit_sounds_snare.wav"></audio>
<audio data-key="75" src="sound/01 - JavaScript Drum Kit_sounds_tom.wav"></audio>
<audio data-key="76" src="sound/01 - JavaScript Drum Kit_sounds_tink.wav"></audio>
<script>
//소리를 재생하는 함수
function audioPlay(e) {
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
//무시
if(!audio) return;
key.classList.add("playing"); //클래스 추가
audio.currentTime = 0;
audio.play();
}
//클래스 제거 함수
function removeClass(e) {
if(e.propertyName !== "transform") return;
e.target.classList.remove("playing");
}
//transitionend이벤트가 발생하면 removeClass를 호출한다
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeClass));
//keydown 이벤트가 발생하면 audioPlay를 호출한다
document.addEventListener('keydown', audioPlay);
</script>
</body>
</html>
3. 배운 점 & 느낀 점
| html - kbd태그 - https://developer.mozilla.org/ko/docs/Web/HTML/Element/kbd 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. |
| html - data-* 속성 - https://mygumi.tistory.com/341#:~:text=data 속성은 HTML 요소,저장한다고 생각하면 된다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM속성 등 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. 어느 엘리먼트에서나 data-로 시작하는 속성을 추가할 수 있습니다. 자바스크립트에서 getAttribute()나 dataset.* 으로 읽어낼 수 있습니다. |
| 자스 - 키보드 이벤트 - https://hianna.tistory.com/496 대표적으로 keydown, keyup, keypress 등이 있고 document.addEventListener('~', ~)를 통해서 쓸 수 있다. 키보드 이벤트 객체에서는 key속성, code속성 등이 있다. |
| 자스 - 오디오 객체 얻어서 실행시키기 - https://curryyou.tistory.com/337 객체를 얻어내서 play() 메서드를 사용하면 된다 ex) audioObj.play() |
| 자바스크립트 classList - https://velog.io/@rimu/자바스크립트-classList.add-remove-contains-toggle classList를 이용하면 클래스를 조작하는 다양한 메서드들을 쓸 수 있다. classList.add : 클래스를 필요에 따라 삽입한다. classList.remove : 클래스를 필요에 따라 제거한다. |
| transitionend 이벤트 - http://www.w3bai.com/ko/jsref/event_transitionend.html CSS 전환이 완료되면 transitionend 이벤트가 반환됩니다. |
여기까지 읽어주셔서 감사합니다!!
