「JavaScript 30」學習筆記（一）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作出可以用鍵盤敲出特定樂器聲的效果。

筆記

在 keydown 事件後觸發 playSound() 方法。

window.addEventListener('keydown', playSound);

• addEventListener() 方法會為元素添加事件。

---

選擇所有樣式為 key 的元素。

const keys = document.querySelectorAll('.key');

• querySelectorAll() 方法會找到所有匹配的元素並返回類陣列。

---

讓 keys 類陣列中的每一個元素在 transitionend 事件後觸發 removeTransition() 方法。

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

• forEach() 會將類陣列內的每個元素皆傳入並執行給定的方法一次。
• transitionend 事件會在 CSS transition 結束後觸發。

---

設定一個 playSound() 方法。

function playSound(e) {
    // 選擇所有含有屬性 data-key 且標籤為 audio 的元素
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

    // 如果 audio 是 null 則停止運行
    if (!audio) return;

    // 設定播放位置為 0 秒（從頭播放）
    audio.currentTime = 0;

    // 播放
    audio.play();

    // 選擇所有含有屬性 data-key 且樣式為 key 的元素。
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

    // 為 key 增加 playing 樣式。
    key.classList.add('playing');
}

• e 是用來傳入 event 物件的參數。
• 用反引號（``）圍住的語法為 ES 6 的新語法－－樣板字串。
• 占位符 ${expression} 可以實現多行字串及字符串插値。
• return 會返回 undefined。
• keyCode 屬性是 onkeypress 等事件觸發的鍵盤代碼。

---

設定一個 removeTransition() 的方法。

function removeTransition(e) {
    // 如果事件的 propertyName 不是 transform 則跳過。
    if (e.propertyName !== 'transform') return;

    // 移除 key 的 playing 樣式。
    this.classList.remove('playing');
}