前言

為什麼要寫這個？

• 在學習的時候，老師有建議懂一點 JS 的人可以練這個，不要跟其他同學練習簡單的東西。那時候我就把它收藏起來了，想說之後也要練習！
• 之前有嘗試過幾次，但都只有寫一兩天，趁著這次好好的把它完成並且記錄下來吧！

JavaScript30

是由 WES BOS 製作的免費教材，總共 30個題目。使用原生 JS 實作，並且有影片跟範例檔案可以參考。

• 官網
• Github
• yt

WES BOS 的成功名言
There is no formation without repetition.

學習方法

WES BOS 建議想要變得更好就是花更多時間去練習它，大家可以依照自己的喜好去做學習，以下提供幾個方式：

1. 直接參考 WES BOS 的影片學習、實作，不懂就多看幾次理解它，還可以練習英文聽力哦～
2. 找一個中文教學來學習、實作，這裡推薦Alex 大大的，當然一次看不懂就看二次、三次。
3. JS30 是相當多人練習的項目，可以找找看別人的筆記，找一個看得懂的或是喜歡的文筆方式跟著練習，也有會所收穫。
4. 最後一點就是最重要的一點。找一個自認最簡單的方式，從頭到尾完成它，不要每次都找不同的方法，這樣很容易迷失在網路的世界裡。

我的方式

1. 先看 WES BOS 的影片，理解要做什麼
2. 再看 Alex 大大的影片，跟著學習
3. 不太清楚的時候問爆 AI
4. 想知道更多的時候，問爆 AI + 查爆 google
5. 把知識點記錄下來

目錄

1. 【Day01】- 前言
2. 【Day02】01 - JavaScript Drum Kit - 利用鍵盤按鍵去觸發畫面上的呈現與音效。
3. 【Day03】02 - JS and CSS Clock - 實作一個小時鐘。
4. 【Day04】03 - CSS Variables - 利用 JS 去改變 CSS 變數的值
5. 【Day05】04 - Array Cardio Day 1 - 介紹JS array的使用(filter, map, sort, reduce)。
6. 【Day06】05 - Flex Panel Gallery - 實作一個圖片展開的動畫。
7. 【Day07】06 - Type Ahead - 利用 Fetch API、非同步載入的方式，並配合正規表達式處理字串，實現使用者輸入的城市名稱時動態地查找相對應的資料。
8. 【Day08】07 - Array Cardio Day 2 - 介紹JS array的使用(some, every, find, findIndex, splice, slice)。
9. Day09】08 - Fun with HTML5 Canvas - 利用 Html 的canvas 標籤搭配 JS 做出畫布的效果。 實現畫筆顏色(hsl)和粗細變化。
10. 【Day10】09 - Dev Tools Domination - 介紹 dev tool，了解 javascript 裡 console 的實用功能。
11. 【Day11】10 - Hold Shift and Check Checkboxes - 實作出按住 Shift 點擊 check list ，達到連續選取的效果。
12. 【Day12】11 - Custom Video Player - 利用 標籤，實作影片播放器的基礎功能
13. 【Day13】12 - Key Sequence Detection - 使用 Cornify.js 製作簡單的彩蛋效果。
14. 【Day14】13 - Slide in on Scroll - 實作一個當畫面滾動到圖片區域時圖片以動畫方式跑出
15. 【Day15】14 - JavaScript References VS Copying - 介紹 JS 賦值時，reference(參考、傳址) 與 copying(拷貝、傳值)。
16. 【Day16】15 - LocalStorage - 實作一個 LocalStorage 的紀錄菜單功能
17. 【Day17】16 - Mouse Move Shadow - 實作一個滑鼠移動時，產生不同陰影的效果。
18. 【Day18】17 - Sort Without Articles - 利用編排文章排序來複習陣列方法sort, map, join, replace, trim 並搭配正則使用。
19. 【Day19】18 - Adding Up Times with Reduce - 利用取得播放清單總秒數來複習陣列方法reduce, map的使用。
20. 【Day20】19 - Webcam Fun - 實作一個 webcam ，有拍照、下載、濾鏡的效果。
21. 【Day21】20 - Speech Detection - 實作一個語音輸入文字輸出的工具。
22. 【Day22】21 - Geolocation - 實作一個顯示當前方位與速度的工具。
23. 【Day23】22 - Follow Along Link Highlighter - 實作一個跟隨滑鼠移動的 HightLight 效果。
24. 【Day24】23 - Speech Synthesis - 實作一個文字輸入語音輸出的工具，有播放、暫停、語速、音量調整功能。
25. 【Day25】24 - Sticky Nav - 實作一個置頂的選單列。
26. 【Day26】25 - Event Capture, Propagation, Bubbling and Once - 了解 addEventListener 中的第三個參數 Event Capture(捕捉事件), Event Bubbling(冒泡事件), Propagation(傳遞)、Once(僅執行一次)。
27. 【Day27】26 - Stripe Follow Along - 實作一個隨著滑鼠停留後會下拉的選單列效果。
28. 【Day28】27 - Click and Drag - 實作一個隨著滑鼠點擊左右移動內容的效果。
29. 【Day29】28 - Video Speed Controller - 實作一個影片播放器的調整播放速度 bar。
30. 【Day30】29 - Countdown Timer - 實作一個倒數計時器。
31. 【Day31】30 - Whack A Mole - 實作一個打地鼠的遊戲，有計分/計時功能。

參考

• WES BOS 影片
• Alex 大大影片
• shunnien 大大筆記參考