根據上一堂課所下載的課程教材，第一堂課我們要做的是一個相當有趣的實作—「鍵盤爵士鼓組」。敲打鍵盤特定字母，發出對應的打擊聲，範例如下：
Drum Kit實作範例

邏輯流程

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

1. 按下按鍵播放對應的音檔
2. 按下按鍵加入該按鈕的顯示效果

課程重點

1. data-* attribute：在HTML5中，有個特別的元素屬性"data-XXX"，XXX是自訂的任何字串。此為客製化屬性，使用者可以在這屬性中儲存資料。像是在實作中，我們賦予div一個data-key的屬性，裡面儲存鍵盤按鍵所對應的編碼。如：

   <div data-key="65" class="key">
     <kbd>A</kbd>
     <span class="sound">clap</span>
   </div>
   <div data-key="83" class="key">
     <kbd>S</kbd>
     <span class="sound">hihat</span>
   </div>
   <div data-key="68" class="key">
     <kbd>D</kbd>
     <span class="sound">kick</span>
   </div>
   

   而這個屬性有兩個需要注意的地方：

   • 屬性名稱不能含有大寫字母，且開頭必須為"data-"。
   • 屬性值必須為字串。

2. addEventListener()：本實作的重要函數，用來監聽keydown以及transitionend，分別是按下鍵盤的動作以及css的過場結束。

3. 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}"]`)
   

4. ES6 Arrow Function：箭頭函式有幾個好處，簡潔、好讀、綁定this。 直接示範如何使用，傳統函式宣告：

   const func = function (x) { return x + 1 }
   

   箭頭函式宣告：

   const func = (x) => x + 1
   

   • 若箭頭函式有多行則需要{}，而有{}時就必須要有return這個關鍵字。
   • 若箭頭函式只有一個參數，參數可不需要()。
   • 若無參數或多參數，則()為必要。

延伸閱讀

1. keydown和keypress有什麼不同?
   • keydown：按下鍵盤的瞬間，鍵盤上任何按鍵都有其對應的代碼，而代碼不區分大小寫。
   • keypress：按下鍵盤的瞬間，只有輸出文字符號的按鍵有效(ESC、方向鍵、倒退鍵等無效)，且代碼有區分大小寫。
2. 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
   

參考來源

上面許多範例只有點到皮毛，想要看更多，請至下列參考來源

• data-* attribute
• ES6 Template literals
• ES6 Arrow Function 1
• ES6 Arrow Function 2
• keydown和keypress有什麼不同?
• ES5 const & let