最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JavaScript Drum Kit

XAMPP下载 admin 713浏览 0评论
 邏輯流程
基本上這個實作所要做的只有兩件事:

按下按鍵播放對應的音檔
按下按鍵加入該按鈕的顯示效果
課程重點
data-* attribute:在HTML5中,有個特別的元素屬性”data-XXX”,XXX是自訂的任何字串。此為客製化屬性,使用者可以在這屬性中儲存資料。像是在實作中,我們賦予div一個data-key的屬性,裡面儲存鍵盤按鍵所對應的編碼。如:

<div data-key=”65″ class=”key”>
<kbd>A<d>
<span class=”sound”>clap</span>
</div>
<div data-key=”83″ class=”key”>
<kbd>S<d>
<span class=”sound”>hihat</span>
</div>
<div data-key=”68″ class=”key”>
<kbd>D<d>
<span class=”sound”>kick</span>
</div>
而這個屬性有兩個需要注意的地方:

屬性名稱不能含有大寫字母,且開頭必須為”data-“。
屬性值必須為字串。
addEventListener():本實作的重要函數,用來監聽keydown以及transitionend,分別是按下鍵盤的動作以及css的過場結束。

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}”]`)
ES6 Arrow Function:箭頭函式有幾個好處,簡潔、好讀、綁定this。 直接示範如何使用,傳統函式宣告:

const func = function (x) { return x + 1 }
箭頭函式宣告:

const func = (x) => x + 1
若箭頭函式有多行則需要{},而有{}時就必須要有return這個關鍵字。
若箭頭函式只有一個參數,參數可不需要()。
若無參數或多參數,則()為必要。
延伸閱讀
keydown和keypress有什麼不同?
keydown:按下鍵盤的瞬間,鍵盤上任何按鍵都有其對應的代碼,而代碼不區分大小寫。
keypress:按下鍵盤的瞬間,只有輸出文字符號的按鍵有效(ESC、方向鍵、倒退鍵等無效),且代碼有區分大小寫。
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

转载请注明:XAMPP中文组官网 » JavaScript Drum Kit

您必须 登录 才能发表评论!