鐵人檔案
雖然有人說Javascript 30（JS30）已經過時，但還是前端新手從靜態網頁跨動態網頁，學習上最捷徑的必經之路，透過30天每天完成不同小作品，只使用原生Javascript，了解如何操作DOM，並藉此學會使用不少實務上常用的Web API。
或許已經許多人寫過這個題材，但我打算自己的方式、敘述的非常白話、讓每個人都能看懂各個步驟，並藉此訓練自己寫學習筆記、文章的能力
做一個網頁羅盤，監聽使用者位置資訊（使用方位及時速改變羅盤） Web 導航器 API：Navigator - Web APIs | MDN 取得地理定位：N...
為網頁所有連結做一個會偵測使用者鼠標位置並移動的 highlight 滑鼠事件：Element: mouseenter event 元素上邊緣的偏移量：HT...
做一個語音閱讀器，可播放使用者輸入的訊息 語音合成 API：SpeechSynthesis - Web APIs 語音改變事件：SpeechSynthesi...
將 nav-bar 固定於網頁上方 黏貼定位：position:sticky 固定定位：position:fixed 要 nav-bar 在視窗滑動超...
認識事件捕獲、冒泡、傳播、單次事件 事件介紹：Introduction to events 事件監聽器：EventTarget: addEventListe...
做一個 nav-bar 當使用者 hover 時會展開下拉式清單，搭配動畫緩進緩出 ClassList 新增指定項：DOMTokenList: add()...
做一個區塊可以讓使用者左右拖曳顯示的項目 新增事件監聽：EventTarget: addEventListener() method 移除事件監聽器：rem...
自定義一個影片播放速率控制器 事件（滑鼠移動）：Element: mousemove event 影片元素速率：HTMLMediaElement: play...
做一個網頁倒數裝置，設有 5 種常用快速選項，也可以讓使用者自行輸入，並會將倒數時間顯示於畫面及分頁標籤上 日期物件：Date - JavaScript 週...
做一個打地鼠遊戲網站，按下開始後可以開啟遊戲(約 10 秒)、有計分功能、地鼠會隨機出現，腳本作弊點擊不計分 週期執行：setInterval() globa...
