开源软件名称：

dustinhsiao21/Javascript30-dustin

开源软件地址：

https://github.com/dustinhsiao21/Javascript30-dustin

开源编程语言：

HTML 87.5%

开源软件介绍：

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內建的語音轉換API`web speech api`。須注意和昨日相同，需要同意授權使用麥克風才能使用API，同理也需要建置本地端伺服器。	效果	詳解
21. Geolocation	本日要介紹如何使用`Navigator.geolocation`的API去擷取當前的地理位置狀況，包含指向及速度。	效果	詳解
22. Follow Along Link Highlight	今日要練習的是動畫效果，當游標移往含有`a`的element時，加入`span`，並在`span`在加入style用css做出反白的動畫效果。	效果	詳解
23. Speech Synthesis	今日要使用`SpeechSynthesisUtterance`物件，透過可以驅動瀏覽器說話的API`speechSynthesis`，來實作類似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秒鐘。	效果	詳解