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


作品網址


需求思考分析


  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年台灣男,努力成為優秀的軟體工程師 和 創造多元收入,較常執行於 程式撰寫、網站系統架設規劃 和 商業策略分析規劃,目前在網站開發公司擔任工程師。

發佈留言