Javascript30-dustin
JavaScript30
Javascript30是一個線上的教學課程，利用三十天的時間每天實作一個簡單的JS作品並自身初學者的角度講解相關概念。 詳見教學網站：https://JavaScript30.com。 原Github位址：wesbos/Javascript30
網頁版可以參考詳見gh-page。
view on github
以下是 demo 目錄：
| 單元 | 簡介 | Demo效果 | 詳解 |
|---|---|---|---|
| 1. Drum kit | 實作按下鍵盤發出的效果 | 效果 | 詳解 |
| 2. JS and CSS Clock | 以JS及CSS實作時鐘 | 效果 | 詳解 |
| 3. Update CSS variable with JS | 利用 CSS變數去改變CSS及JS的值造成效果 | 效果 | 詳解 |
| 4. Array Cardio Day 1 | 介紹JS array的使用(filter, map, sort, reduce) | 無，用console操作 | 詳解 |
| 5. Flex Panel Gallery | 利用 flex 的特性及 transition 的動畫效果做出點擊後的效果呈現。 |
效果 | 詳解 |
| 6. Type Ahead | 介紹 Fetch api用 ajax的方式來取資料(城市名稱)，並依使用者輸入字符的不同查找不同的資料，會使用到正規表達式來處理字串。 |
效果 | 詳解 |
| 7. Array Cardio Day 2 | 本篇延續Day4 的陣列常使用方法做介紹。本篇包含some()，every()，find()，findIndex()，利用也提到了關於splice(), slice(), ...的應用。 |
無，用console操作 | 詳解 |
| 8. Fun with HTML5 Canvas | 本篇主要透過Html的canvas 標籤搭配Javascript做出畫布的效果。效果包括:顏色的變化(hsl)及軌跡的粗細縮放。 |
效果 | 詳解 |
| 9. Dev Tools Domination | 本篇主要介紹幾個常用的dev tool，可以增加您在開發javascript的除錯速度。 |
無，用console操作 | 詳解 |
| 10. Hold Shift and Check Checkboxes | 本篇主要是要實作透過點擊checkbox後按下shift鍵之後一次選取多個checkbox的功能。 | 效果 | 詳解 |
| 11. Custom Video Player | 今天要練習的是如何製作一個客製化的撥放器。我們會把chrome預設的撥放器取消，然後放上客製化的撥放器。會學到關於撥放器的事件及屬性。 | 效果 | 詳解 |
| 12. Key Sequence Detection | 以前一定曾有過要輸入一段密碼之後會出現特定的畫面，稱為Key Sequence，今日要做的是如何偵測Key Sequence並產生特殊畫面。試著輸入看看’dustin’ | 效果 | 詳解 |
| 13. Slide in on Scroll | 今日要介紹一般網站上常出現的照片移入移出效果製作。當視窗移到照片的區域以動畫方式出現。 | 效果 | 詳解 |
| 14. JavaScript References VS Copying | 本日要介紹Javascript付值時，何時是用copy，何時是用reference。 | 無，用console操作 | 詳解 |
| 15. LocalStorage and Event Delegate | 今日主要介紹兩個部分:LocalStorage的使用。 Event Delegate的介紹 |
效果 | 詳解 |
| 16. Mouse Move Shadow | 今日要實作的是滑鼠在圖片的四周移動，會產生不一樣的效果，會應用到offset的操作。 |
效果 | 詳解 |
| 17. Sort Without Articles | 今日要透過編排文章排序來複習sort, map, join 及replace, trim的使用。 |
效果 | 詳解 |
| 18. Adding Up Time With Reduce | 今日是透過計算複數影片的長度來複習reduce及map的應用。 |
效果 | 詳解 |
| 19. WebCam Fun | 今日要使用原生的Javascript來驅動webcam來紀錄影像資訊，並輸出到canvas上，並用canvas對圖像進行拍照及濾鏡處理。 |
效果 | 詳解 |
| 20. Speech Detection | 今日要介紹如何使用browser內建的語音轉換APIweb speech api。須注意和昨日相同，需要同意授權使用麥克風才能使用API，同理也需要建置本地端伺服器。 |
效果 | 詳解 |
| 21. Geolocation | 本日要介紹如何使用Navigator.geolocation的API去擷取當前的地理位置狀況，包含 指向 及 速度。 |
效果 | 詳解 |
| 22. Follow Along Link Highlight | 今日要練習的是動畫效果，當游標移往含有a的element時，加入span，並在span在加入style用css做出反白的動畫效果。 |
效果 | 詳解 |
| 23. Speech Synthesis | 今日要使用SpeechSynthesisUtterance物件，透過可以驅動瀏覽器說話的APIspeechSynthesis，來實作類似google小姐的說話(utterance)功能，包含講話速度(rate)及音頻(pitch)的高低。 |
效果 | 詳解 |
| 24. Sticky Nav | 今日要介紹的是如何實作當scroll超過Nav時，把Nav 固定在上方的效果。 | 效果 | 詳解 |
| 25. Event Capture, Propagation, Bubbling and Once | 今天要介紹的是觀念的理解:關於DOM事件的機制:Event Capture(事件捕捉), Event Bubbling(事件冒泡), Propagation, 及Once(單次執行)。要打開console看結果 | 效果 | 詳解 |
| 26. Stripe Follow Along Nav | 今天要實作的是製作當滑鼠在NAV橫移時產生的動畫內容 | 效果 | 詳解 |
| 27. Click and Drag | 今天要練習的是如何實作滑鼠點擊後(mousedown)，左右橫移移動內容的效果。 |
效果 | 詳解 |
| 28. Video speed controller | 本日要實作的是製作控制撥放速度的bar，及套用在video上。 | 效果 | 詳解 |
| 29. Countdown Timer | 今日要練習如何製作倒數計時，可點選已經設置好的時間及可自行輸入時間的功能。 | 效果 | 詳解 |
| 30. Whack a Hole! | 今天要實作的是打地鼠的遊戲，打地鼠的內容如下: 有六個洞會隨機出現地鼠，對著地鼠點擊即可得一分，遊戲時間10秒鐘。 | 效果 | 詳解 |