[JS作品]JS30系列01：JavaScript Drum Kit監聽按鍵事件及撥放音效
JS30系列：監聽按鍵事件及撥放音效 作品網址 需求思考分析 瀏覽器能夠辨認使用者在鍵盤上所按下的按鍵 當鍵盤 […]
JS30系列：監聽按鍵事件及撥放音效
作品網址
需求思考分析
-
瀏覽器能夠辨認使用者在鍵盤上所按下的按鍵
-
當鍵盤按下指定的按鍵後能夠觸發音效
-
當鍵盤按下指定的按鍵後能夠觸發網頁上的元件產生動畫
-
網頁上元件的變化要能夠回覆成原本的狀態
-
播放的音效撥放完會停止
特別技術、函式
data-* attribute：有時我們會需要使用到某些自定義的屬性，但是為了要避免大家在 HTML 中隨意的添加屬性，於是在 HTML5 中就多了 data-* attribte 這個屬性，其中的 * 就是一個可以自定義的名稱。
JS Arrays(陣列、數組)：
Array.from()：會將「類陣列物件」或是「可迭代的物件」轉換成陣列，
Array. forEach()：會將陣列中每個元素套用到指定的函式裡進行運算。
JS Objects：
Properties(屬性) ： Properties 是JavaScript Objects 關聯的值。
propertyName：當transitionEvent發生時，propertyName屬性返回與該 transition (過渡)關聯的CSS屬性的名稱。
JS Event：
KeyboardEvent.keyCode：keycode是指當鍵盤下時產生鍵盤的對應值。
查詢鍵盤值keyCode： https://keycode.info/
參考資料：
JavaScript Array 陣列操作方法大全 ( 含 ES6 ) ： https://www.oxxostudio.tw/articles/201908/js-array.html
WESBOS：wesbos.com
該來理解 JavaScript 的原型鍊了： https://blog.techbridge.cc/2017/04/22/javascript-prototype/
[筆記] JS30系列：監聽按鍵事件及撥放音效（Day1）：https://pjchender.blogspot.com/2017/01/js30day1.html