###### 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 變數的運用
- 使用函式製作迴圈的方式
{"metaMigratedAt":"2023-06-17T00:17:10.927Z","metaMigratedFrom":"Content","title":"JavaScript 30 Challenge","breaks":"true","contributors":"[{\"id\":\"19f2c715-daae-4955-b32e-8684b2b3e6b2\",\"add\":3549,\"del\":159}]"}