系列文章
[Day11] - Custom Video Player(JS30 x 鐵人 30 x MDN)
來自定義一個影片播放器吧！ 影片嵌入元素：Video Embed element 媒體元素：HTMLMediaElement 影片時間更新事件：HTML...
[Day12] - Key Sequence Detection(JS30 x 鐵人 30 x MDN)
按鍵佇列檢測，當輸入通關密語螢幕上則會出現獨角獸 鍵盤事件-按鍵彈起：Element: keyup event 陣列拼接：Array.prototype.s...
[Day13] - Slide in on Scroll(JS30 x 鐵人 30 x MDN)
實作頁面滾動式視差設計 滾動事件：Document: scroll event 視窗可視高度Window: innerHeight property 垂直...
[Day14] - JavaScript References VS Copying(JS30 x 鐵人 30 x MDN)
了解 javascript 傳值(拷貝)、傳址(參照)、淺拷貝、深拷貝 物件參照：Object reference 淺拷貝:Shallow copy 深拷...
[Day15] - LocalStorage(JS30 x 鐵人 30 x MDN)
透過 Localstorage 儲存項目，新增、狀態切換、刪除(不在原題內) 本地儲存(讀取)：Storage: getItem() method 本地儲存...
[Day16] - Mouse Move Shadow(JS30 x 鐵人 30 x MDN)
透過 JS 將文字做出 4 層陰影，並隨著鼠標位置移動 文字陰影：text-shadow - CSS 元素內容可編輯：contenteditable...
[Day17] - Sort Without Articles(JS30 x 鐵人 30 x MDN)
將資料去掉 The/A/An 冠詞開頭後進行排序，再將原資料照排序結果渲染至畫面上 陣列排序：Array.prototype.sort() 正規表達式：Re...
[Day18] - Adding Up Times with Reduce(JS30 x 鐵人 30 x MDN)
透過 Array.reduce()算出影片總時間並印在 console 中 字串分割：String.prototype.split() 陣列映射：Array...
[Day19] - Webcam Fun(JS30 x 鐵人 30 x MDN)
做一個網頁攝像機，可套用濾鏡調整濾鏡色彩並提供下載功能 Web 導航器 API：Navigator - Web APIs | MDN 訪問媒體裝置：Navi...
[Day20] - Speech Detection(JS30 x 鐵人 30 x MDN)
做一個網頁語音輸入功能，可將語音輸入的英文自動變成文字 語音識別 API：SpeechRecognition - Web APIs 語音識別事件(返回結果)...