[JS作品]JS30系列01：JavaScript Drum Kit監聽按鍵事件及撥放音效

JS30系列：監聽按鍵事件及撥放音效

作品網址

Demo作品連結
JavaScript 30 作品目錄

需求思考分析

  1. 瀏覽器能夠辨認使用者在鍵盤上所按下的按鍵
  2. 當鍵盤按下指定的按鍵後能夠觸發音效
  3. 當鍵盤按下指定的按鍵後能夠觸發網頁上的元件產生動畫
  4. 網頁上元件的變化要能夠回覆成原本的狀態
  5. 播放的音效撥放完會停止

特別技術、函式

<HTML>

data-* attribute：有時我們會需要使用到某些自定義的屬性，但是為了要避免大家在 HTML 中隨意的添加屬性，於是在 HTML5 中就多了 data-* attribte 這個屬性，其中的 * 就是一個可以自定義的名稱。

<kbd> </kbd> ：短語標籤。它定義鍵盤輸入​​。

<CSS>

<JavaScript>

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

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言