###### tags: `JavaScript 30`

JavaScript 30 Challenge
===

[01. Drum Kit](/lExbJKSxRfiAeuF2N5LBuQ)
---
- Transitionend Event 過度結束事件
- HTML 影音 DOM
- data-* 屬性

[02. JS and CSS Clock](/MT_xvkm8TNCwYTIjqwdavw)
---
- 指定原點位置做元素變形 - transform-origin
- 用 JS 動態加入 CSS 樣式、屬性
- 設定間隔時間 - setInterval
- 認識時間戳

[03. CSS Variables](/v6eoR7iOQaCLiKDjC9049w)
---
- CSS 變數運用（CSS Variables）
- 用 JS 動態加入 / 修改 CSS 樣式、屬性
- oninput 事件
- CSS 濾鏡效果 - filter 屬性

[04. Array Cardio Day 1](/xdsc1QQxQm-kTFpald3lXw)
---
- 陣列的運用
- 物件取值
- console.table

[05. Flex Panel Gallery](/DBP1UbWxSjKZZe6CGskKAg)
---
- Flex 屬性運用
- 偽類運用

[06. Type Ahead](/a9umK1r_Rmml_KEy1MF2Iw)
---
- 字串方法
- 正則表達式

[07. Array Cardio Day 2](/04qP6JRyS-ybO9SwHcpCTg)
---
- 陣列的運用

[08. Fun with HTML 5 Canvas](/dvpjdCc_RxCL312mu-fJ6g)
---
- Canvas 運用
- 網頁色彩運用
- 任務程式碼解析

[09. Dev Tools Domination](/pi16RielSnWZhqVuoMwLKg)
---
- Console Methods 運用

[10. Hold Shift and Check Checkboxes](/wAWYphxcSH-c3co32xD27g)
---

[11. Custom Video Player](/lJf5HlRQTC2M7HMQzwM8PQ)
---
- video 屬性 / 方法的應用

[12. Key Sequence Detection](/ALnmsoXVTkWG0-W2Lww-pg)
---
- Cornify GitHub
- 實用陣列操作大全 (進階篇)
- 字串方法 - String.prototype

[13. Slide in on Scroll](/szgWAeEXReSIHEVT5SQbRA)
---
- 滑輪、視窗寬高、子元素位置 - scroll / innerHeight / offsetTop

[14. JavaScript References VS Copying](/OcXA5MOMS56m_OrxZSWGrA)
---
- 傳值(by Value)？ 傳址 = 傳參考(by Reference)？

[15. LocalStorage](/ANC-Y4UpTP-AavkJQc6Z1A)
---
- LocalStorage

[16. Mouse Move Shadow](/rirCj7cHSXmIRZBYpwIKQA)
---
- text-shadow 屬性
- contenteditable 屬性

[17. Sort Without Articles](/DJlemhkgRb6GEIv-lOm8MA)
---
- 字串方法 - split() 字串切割
- 字串方法 - replace() 替換字串
- 正則表達式 - RegExp

[18. Adding Up Times with Reduce](/TtY2miolSwKb5baFDC5cYQ)
---
- 字串方法 - split() 字串切割

[19. Webcam Fun](/_tyh3QjSR0yX3GucAnYbeA)
---
- 影像授權方式
- Canvas 畫布的應用
- Video 元素方法 srcObject
- 節點新增應用 Node.insertBefore() / Node.appendChild()

[20. Speech Detection](/E_UE1SdaT1yXpPl7VjO_Og)
---
- 語音辨識方法
- 監聽事件，`result`, `end`
- 節點新增應用 Node.insertBefore() / Node.appendChild()

[21. Geolocation](/4FNtueV-RRy6Gp3HJVgKCA)
---
- 位置辨識方法

[22. Follow Along Link Hightlighter](/rTJtjGs0Rxa_qFjJj3M-Yw)
---
- Element.getBoundingClientRect() 方法以及 DOMRect 物件
- 使用 JS 寫入 CSS 樣式
- mouseenter 事件

[23. Speech Synthesis](/PUs_WRdYTvGSdAkPU4g-_g)
---
- 閱讀文字方法
- speechThesis 的監聽事件 voiceschanged
- 熟悉物件取值（中括號取值）的使用時機
- 函式參數預設值的使用方式

[24. Sticky Nav](/8BJFJFRiSkmA5IRxuBYhAA)
---
- 使用 JS 的方式去置頂 navbar
- 滾動事件會用到的一些屬性：window.scrollY, offsetHeight, offsetTop
- 修改樣式的方法：Style 屬性、classList.add() / remove() 的方式

[25. Event Capture, Propagation, Bubbling and Once](/ijywClqhTHKKqu8j7Kvbzw)
---
- 監聽事件的參數與執行差異

[26. Stripe Follow Along Nav](/0ZaErWBXT--cYIqqSa1A2Q)
---
- setTimeout 的方法的運用與效果
- mouseenter, mouseleave 事件運用
- `Element.getBoundingClientRect()` 方法使用
- JS 寫入 CSS 樣式的技巧

[27. Click and Drag](/72UIORd-SSag-gAEsa_LtQ)
---
- MouseEvent.movementX
- Element.scrollLeft
- scaleX 與 rotateY 搭配使移動時有 3D 效果或是 perspective 呈現出立體視角

[28. Video Speed Controller](/axXO25GATWGBZsvx2MUEvA)
---
- 滑鼠監聽事件：mousemove
- 影片速度調節：video.playbackRate
- 取得畫面顯示高度或 Y 軸位置等方法：Element.offsetHeight、MouseEvent.offsetY

[29. Countdown Timer](/A5vrKImqSNWPFuWOm1v7kQ)
---
- 設定間隔時間 - setInterval
- 時間戳 ＆ 現在時間
- 型別轉換
- data-屬性妙用
- 三元運算子

[30. Whack A Mole](/fy0_7LKrTIGTEZDBPqOW3w)
---
- 隨機數的產生：Math.random()
- 數字轉換的處理：Math.round()、MDN - Math.floor()
- 設定時間的運用：setTimeout()
- 使用 flag 變數的運用
- 使用函式製作迴圈的方式