關於 Javascript 30天 課程介紹

Javascript30，是由加拿大全端工程師 Wes Bos所建立的免費課程，只需透過信箱申請就能夠開始學習。
在課程中對於Javascript的運用，對於初學者的我來說是十分好的練習。網路上也有很多大大推薦，這次主要希望自己能夠有計劃有效率熟悉Javascript。堅持最後，將課程順利完成～

[Day1] JavaScript Drum Kit

需要用到的技巧與練習目標

1. 鍵盤偵測技巧 Keydown
2. 音效播放
3. data-* 自定義的標籤使用
4. 監聽 transitionend

鍵盤偵測技巧 Keydown

window.addEventListener("keydown", function (e) {
  console.log(e.keyCode); // keydown事件觸發  e.keyCode 抓出選取按鍵的數字
});

關於 keydown / keypress / keyup 三者之間的比較

• keydown
  按鍵按下那一霎那所觸發，任何按鍵都可以取得相對應的keyCode代碼，而且不分輸入大小寫(大小寫皆為同一個keyCode代碼)，一直按住不放則會連續觸發此事件。
• keypress
  只針對可以輸入的的按鍵做觸發，大小寫觸發時會產生不同keyCode代碼，按住不放也會一直連續觸發。
• keyup
  按鍵放開那一霎那所觸發，所以不會和前兩者一樣連續觸發。取到的keyCode和keydown的部分依樣，如果要取得input.value只能用keyup事件還獲取。

參考文章來源:

1. https://medium.com/@yitailin/%E6%AF%94%E8%BC%83-keydown-keypress-keyup-%E7%9A%84%E5%B7%AE%E7%95%B0-4e873ba17e81
2. https://ithelp.ithome.com.tw/articles/10259079
3. https://pjchender.blogspot.com/2017/06/js30.html