在 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...