一個鍵盤爵士鼓

• 功能
  • 按下鍵盤，出現相對應的聲音
• 畫面
  • 按下鍵盤，畫面上的字母方塊，做點小動畫
    • 加上黃色陰影
    • 按鈕彈一下(微小放大)的動畫

• lambda 在Javascript裡叫 arrow function

一般js的匿名函數這樣寫

funtion (key) {
  key.addEventListener('transitionend', removeTransition);
}

用arrow function的寫法就是

key => key.addEventListener('transitionend', removeTransition)

不同之處在於this，一般的寫法有this=function本身，但是「誰」呼叫arrow function，「誰」=this。

jsref: The Window Object

• setTimeout(function, ms) 設定「執行一次」的function與延遲時間

jsref: The HTML DOM Document Object

• document.querySelector()找到第一個符合指定CSS selector(s)的HTML節點
• document.querySelectorAll()找到符合指定CSS selector(s)的HTML節點們

jsref: The HTML DOM Element Object

• element.addEventListener() 加一個事件到Element上
• element.classList 回傳NodeList，element上的class屬性的內容

jsref: JavaScript HTML DOM Node List

• NodeList.forEach()

querySelectorAll()出來的物件都是NodeList，它不是Array，能使用的方法不同，在此使用forEach()走訪每一個元素。

參考: Array.forEach

jsref: HTML DOM Events

• Transition Events 過場結束(transition end)執行 myFunction

「過場」唯一事件

element.addEventListener("transitionend", myFunction)