挑戰 JavaScript 30 Day1

自從疫情警戒第三級後，待在家除了作息不正常外，也沒做什麼營養的事 (大概就一直看劇滑手機)。最近終於覺得這樣下去不行，開始實施了「10 億早晨習慣」，生活狀態整個有所提升，覺得是很棒的早晨儀式，之後也來寫部落格分享給大家。

終於也把部落格翻新好，是不是比之前好看 XDD 也把舊文也刪一刪，覺得寫太爛藉著這次疫情，在家也想重拾回寫部落格的初心，就做做筆記，也紀錄生活吧。

其實這個之前一直很想做的挑戰，也做過大概前面幾個，就半途而廢了。希望這次能堅持，也從中學到被遺忘的 javascript 和自律。

事不宜遲馬上開始～ DAY 1 ～

專案介紹：按下鍵盤發出音樂效果。

作品頁面： https://iris1114.github.io/javascript30/01_JavaScript-Drum-Kit/index.html

1. 做法：

按下按鍵去執行播放音樂
取得按鍵的 DOM 物件及按鍵所對應的音樂
如果有對應的音樂，則播放，並對該按鍵做 css 效果
當該放下按鍵，則取消 css 效果

2. keydown, keypress, keyup 的差別

keydown
- 指按下鍵盤的那個剎那，任何的鍵盤按鍵按下都有 keyCode。
- 大寫和小寫是一樣的 keyCode。
- 按下鍵盤不放時，則會不斷地連續觸發該事件。
keypress
- 只會針對可以輸出文字符號的按鍵有效， ESC、方向鍵等等無法觸法。
- 會因為大小寫的不同取得不同的 keyCode。
- 按下鍵盤不放時，則會不斷地連續觸發該事件。
keyup
- 是指放開鍵盤的那個剎那
- 因為每次只會放開鍵盤一次，所以不會有連續觸發的狀況發生
- 任何的鍵盤按鍵按下都有 keyCode，大寫和小寫是一樣的 keyCode。
- 想要取得 input 的 value，也只有在 keyup 的事件上可以拿到目前最新的 value。

這三者事件的觸發優先順序為：keydown→keypress→keyup

3. transitionend 事件

transitionend 事件會在 CSS transition 結束後觸發。利用 transitionend 事件，監聽所有有 transition 的 CSS 屬性的 node 。

1key.addEventListener("transitionend", transitionendHandle);

4. audio 屬性

currentTime : 返回 audio/video 播放的當前位置（以秒計）

若要重複播放，則將 currentTime = 0; ，從 0 再開始播放。

5. code

1<script>
2      (() => {
3        const palyHandle = (e) => {
4          const audio = document.querySelector(
5            `audio[data-key="${e.keyCode}"]`
6          );
7          const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
8
9          if (audio) {
10            audio.currentTime = 0;
11            audio.play();
12            key.classList.add("playing");
13          }
14        };
15
16        const transitionendHandle = (e) => {
17          e.currentTarget.classList.remove("playing");
18        };
19
20        const keys = document.querySelectorAll(".key");
21        keys.forEach((key) => {
22          key.addEventListener("transitionend", transitionendHandle);
23        });
24
25        window.addEventListener("keydown", palyHandle);
26      })();
27</script>

6. 參考資料

audio /video method and properties: https://www.w3schools.com/tags/ref_av_dom.asp