鐵人檔案
雖然有人說Javascript 30（JS30）已經過時，但還是前端新手從靜態網頁跨動態網頁，學習上最捷徑的必經之路，透過30天每天完成不同小作品，只使用原生Javascript，了解如何操作DOM，並藉此學會使用不少實務上常用的Web API。
或許已經許多人寫過這個題材，但我打算自己的方式、敘述的非常白話、讓每個人都能看懂各個步驟，並藉此訓練自己寫學習筆記、文章的能力
來自定義一個影片播放器吧！ 影片嵌入元素：Video Embed element 媒體元素：HTMLMediaElement 影片時間更新事件：HTML...
按鍵佇列檢測，當輸入通關密語螢幕上則會出現獨角獸 鍵盤事件-按鍵彈起：Element: keyup event 陣列拼接：Array.prototype.s...
實作頁面滾動式視差設計 滾動事件：Document: scroll event 視窗可視高度Window: innerHeight property 垂直...
了解 javascript 傳值(拷貝)、傳址(參照)、淺拷貝、深拷貝 物件參照：Object reference 淺拷貝:Shallow copy 深拷...
透過 Localstorage 儲存項目，新增、狀態切換、刪除(不在原題內) 本地儲存(讀取)：Storage: getItem() method 本地儲存...
透過 JS 將文字做出 4 層陰影，並隨著鼠標位置移動 文字陰影：text-shadow - CSS 元素內容可編輯：contenteditable...
將資料去掉 The/A/An 冠詞開頭後進行排序，再將原資料照排序結果渲染至畫面上 陣列排序：Array.prototype.sort() 正規表達式：Re...
透過 Array.reduce()算出影片總時間並印在 console 中 字串分割：String.prototype.split() 陣列映射：Array...
做一個網頁攝像機，可套用濾鏡調整濾鏡色彩並提供下載功能 Web 導航器 API：Navigator - Web APIs | MDN 訪問媒體裝置：Navi...
做一個網頁語音輸入功能，可將語音輸入的英文自動變成文字 語音識別 API：SpeechRecognition - Web APIs 語音識別事件(返回結果)...
