JS30 day01 - Drum Kit

###為什麼會想要做 JS30 呢？

在看職缺的時候，因為看到很多公司要求同時寫過 Rails 又要會前端框架的能力，所以想要試試看前端框架，但在用框架之前，覺得自己對 JS 還太不熟惹～ 所以想要先做過 JS30 培養一下基礎的能力再來做個小專案練練 React JS

作業內容

今天要做的是做出一個網頁，可以按下 A ~ L 這排的按鍵發出不同的鼓聲，根據你按的按鍵，螢幕上相對應的按鈕也會變化

完成品大致上可以看這份code pen，但因為沒辦法輸入音檔，所以就比較沒效果ＸＤ

JS 的部分我放在下面這邊：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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; //rewind to the start
      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);

學到什麼

因為 JS 的基礎實在太爛，所以其實感覺什麼都是新學的ＸＤ

重要的列點如下：

1. 其實每個按鍵在 JS 裡面有普遍公認的 keyCode，可以參考 https://keycode.info/

2. 純 JS 的監聽方式： 節點.addEventListener
   ex. window.addEventListener / key.addEventListener

3. 純 JS 的事件種類這次用到 keydown 跟 transitionend
   其他種類可以參考 https://developer.mozilla.org/zh-TW/docs/Web/Events

4. 裡面用到 return 的技巧，表示如果找不到這個節點就不用繼續下去了：if(!audio) return;

5. audio.currentTime = 0; 讓事件重置

6. 在 JS 裡面使用 forEach 做陣列演算keys.forEach(key => key.addEventListener('transitionend', removeTransition));

總結

老實說如果沒有看這影片示範的話我根本不會寫ＸＤ 但第一天練習後，覺得比自己想像中有趣！希望可以順利地進行下去然後更熟悉 JS!

參考資料：
https://github.com/wesbos/JavaScript30

• ← Previous Post
• Next Post →