Skip to content

dustinhsiao21/Javascript30-dustin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JavaScript30

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

網頁版可以參考詳見gh-page

以下是 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, joinreplace, trim的使用。 效果 詳解
18. Adding Up Time With Reduce 今日是透過計算複數影片的長度來複習reducemap的應用。 效果 詳解
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秒鐘。 效果 詳解