Javascript30-dustin

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #go #golang #android #rust #deep-learning #docker #windows #vue #pytorch

Javascript30-dustin

(★ 66)

30(天)個的JS實作，取自https://github.com/wesbos/JavaScript30

Javascript30-dustin 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![](https://javascript30.com/images/JS3-social-share.png)

# JavaScript30

Javascript30是一個線上的教學課程，利用三十天的時間每天實作一個簡單的JS作品並自身初學者的角度講解相關概念。
詳見教學網站：[https://JavaScript30.com](https://JavaScript30.com)。
原Github位址：[wesbos/Javascript30](https://github.com/wesbos/JavaScript30)

網頁版可以參考詳見[gh-page](https://dustinhsiao21.github.io/Javascript30-dustin/)。

### [view on github](https://github.com/dustinhsiao21/Javascript30-dustin)

以下是 demo 目錄：

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

Javascript30-dustin

Javascript30-dustin 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Javascript30-dustin

Javascript30-dustin 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README