鐵人檔案
在 AI 輔助日益普及的今天，扎實的 JavaScript 基礎依然重要。Wes Bos 的 JavaScript30 系列，30 天帶你逐步掌握 JavaScript 的核心概念和實用技巧。無論你是初學者還是有經驗的開發者，這個系列將帶你一步步掌握 JavaScript 的精髓，並在實際應用中提升自我的技能。
透過鐵人賽自我挑戰，我將連續 30 天分享在 JavaScript30 系列中的學習筆記和實踐經驗。希望通過這次挑戰，不僅鞏固自己的基礎知識，還能提升撰寫技術文章的能力
主題 實作一個語音輸入文字輸出的工具。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配MDN 安裝/啟動 利用npm來安裝：np...
主題 實作一個顯示當前方位與速度的工具。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配文件 (MDN)這個題目在手機上比較好看到...
主題 實作一個跟隨滑鼠移動的 HightLight 效果。 成果 完整程式碼Demo效果 實作重點 Javascript 主要使用 getBoundingCl...
主題 實作一個文字輸入語音輸出的工具，有播放、暫停、語速、音量調整功能。 成果 完整程式碼Demo效果 實作重點 Javascript 可以搭配文件 Sp...
主題 實作一個置頂的 Navbar。 成果 完整程式碼Demo效果 實作重點 CSS 利用 fixed 製作一個會黏在頂部的 nav .fixed-nav...
主題 了解 addEventListener 中的第三個參數 Event Bubbling(冒泡事件), Event Capture(捕捉事件), Propa...
主題 實作一個隨著滑鼠停留後會下拉的選單列效果。 成果 完整程式碼Demo效果 實作重點 可以思考一下，動畫出現的時機。 CSS 先製作出樣式 滑鼠停留後會...
主題 實作一個隨著滑鼠點擊左右移動內容的效果。 成果 完整程式碼Demo效果 實作重點 CSS 可以把 overflow 改成 hidden 才不會漏出卷軸...
主題 實作一個影片播放器的調整播放速度 bar。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素：速度條外框、速度條內框、音樂...
主題 實作一個倒數計時器。 成果 完整程式碼Demo效果 實作重點 Javascript 取得元素 倒數計時器的數字顯示 預計結束時間的顯示 所有的按鈕...
