鐵人檔案
在 AI 輔助日益普及的今天，扎實的 JavaScript 基礎依然重要。Wes Bos 的 JavaScript30 系列，30 天帶你逐步掌握 JavaScript 的核心概念和實用技巧。無論你是初學者還是有經驗的開發者，這個系列將帶你一步步掌握 JavaScript 的精髓，並在實際應用中提升自我的技能。
透過鐵人賽自我挑戰，我將連續 30 天分享在 JavaScript30 系列中的學習筆記和實踐經驗。希望通過這次挑戰，不僅鞏固自己的基礎知識，還能提升撰寫技術文章的能力
前言 為什麼要寫這個？ 在學習的時候，老師有建議懂一點 JS 的人可以練這個，不要跟其他同學練習簡單的東西。那時候我就把它收藏起來了，想說之後也要練習！ 之前...
主題 利用鍵盤按鍵去觸發畫面上的呈現與音效。 成果 完整程式碼Demo效果 實作重點 Javascript 鍵盤事件keyboardEvent ：使用 k...
主題 實作一個小時鐘。 成果 完整程式碼Demo效果 實作重點 CSS 指針樣式先做完 調整時間起始位置在 0 的位置( 後面比較好算數學 ) 調整每個針...
主題 利用 JS 去改變 CSS 變數的值 成果 完整程式碼Demo效果 實作重點 CSS 偽類：:root 表示 <html> (MDN)元素，...
主題 練習 JavaScript Array 的方法，可以對照 MDN 文件： Array.prototype.filter() 、 Array.protot...
主題 實作一個圖片展開的動畫 成果 完整程式碼Demo效果 實作重點 CSS 先用把畫面調整出來 調整圖片：flex 、flex 佔比為 1 文字置中：...
主題 利用 Fetch API、非同步載入的方式，並配合正規表達式處理字串，實現使用者輸入的城市名稱時動態地查找相對應的資料。 成果 完整程式碼Demo效果...
主題 練習 JavaScript Array 的方法，可以對照 MDN 文件：Array.prototype.some() 、 Array.prototype...
主題 利用 HTML 的canvas 標籤搭配 JS 做出畫布的效果。實現畫筆顏色(hsl)和粗細變化。 成果 完整程式碼Demo效果 實作重點 Javasc...
主題 介紹 dev tool，了解 javascript 裡 console 的實用功能。 成果 完整程式碼Demo效果 實作重點 Javascript...
