JavaScript Drum Kit

 邏輯流程
基本上這個實作所要做的只有兩件事：

按下按鍵播放對應的音檔
按下按鍵加入該按鈕的顯示效果
課程重點
data-* attribute：在HTML5中，有個特別的元素屬性”data-XXX”，XXX是自訂的任何字串。此為客製化屬性，使用者可以在這屬性中儲存資料。像是在實作中，我們賦予div一個data-key的屬性，裡面儲存鍵盤按鍵所對應的編碼。如：

<div data-key=”65″ class=”key”>
<kbd>A<d>
<span class=”sound”>clap</span>
</div>
<div data-key=”83″ class=”key”>
<kbd>S<d>
<span class=”sound”>hihat</span>
</div>
<div data-key=”68″ class=”key”>
<kbd>D<d>
<span class=”sound”>kick</span>
</div>
而這個屬性有兩個需要注意的地方：

屬性名稱不能含有大寫字母，且開頭必須為”data-“。
屬性值必須為字串。
addEventListener()：本實作的重要函數，用來監聽keydown以及transitionend，分別是按下鍵盤的動作以及css的過場結束。

ES6 Template literals：JavaScript ES6 中的模版字符串，當你需要在JS裡加入HTML內容，或是要打需要換行的字串，又或是想要將變數插入字串中，這是一個非常好用的方法。請大家熟練這個方法，因為後面的課程會常常用到。那要如何使用呢？就是鍵盤左上角的反引號”`”。

例如，在以前在JS寫HTML內容：

var content_old = ‘<header>\n’+
‘<div class=”banner”>\n’+
‘<img src=”apple.jpg”\n’+
‘</div>\n’+
‘</header>’
現在我們可以這樣寫：

var content_new = `
<header>
<div class=’banner’>
<img src=”apple.jpg>
</div>
</header>
`
那如果要在字串中插入變數，方法為${…}，在這次實作的程式碼中，範例如下：

const audio = document.querySelector(`audio[data-key=”${e.keyCode}”]`)
const key = document.querySelector(`.key[data-key=”${e.keyCode}”]`)
ES6 Arrow Function：箭頭函式有幾個好處，簡潔、好讀、綁定this。 直接示範如何使用，傳統函式宣告：

const func = function (x) { return x + 1 }
箭頭函式宣告：

const func = (x) => x + 1
若箭頭函式有多行則需要{}，而有{}時就必須要有return這個關鍵字。
若箭頭函式只有一個參數，參數可不需要()。
若無參數或多參數，則()為必要。
延伸閱讀
keydown和keypress有什麼不同?
keydown：按下鍵盤的瞬間，鍵盤上任何按鍵都有其對應的代碼，而代碼不區分大小寫。
keypress：按下鍵盤的瞬間，只有輸出文字符號的按鍵有效(ESC、方向鍵、倒退鍵等無效)，且代碼有區分大小寫。
ES5 const & let：
ES5的兩種變數型態，const就是常數，指定後無法被變更。而let和const都可以是Block Scope的變數。例如：
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10