iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
自我挑戰組

JavaScript DOM 操作 系列

探討如何使用 JavaScript 操作 DOM,改變頁面內容、樣式、事件處理等。

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 21

DAY 21: 創建動態導航選單

今天我學習了如何用 JavaScript 來動態生成一個導航選單。雖然剛開始時覺得這個概念有點難,但隨著嘗試多次,我發現其實只要掌握了迭代和 DOM 操作的基礎...

2024-10-05 ‧ 由 jlll 分享
DAY 22

DAY 22: 操作多媒體元素

大家好!今天我們來學習如何用 JavaScript 操作網頁中的多媒體元素,如音頻和視頻。我個人覺得這部分的內容非常有趣,因為它可以讓我們輕鬆控制媒體播放的行為...

2024-10-06 ‧ 由 jlll 分享
DAY 23

DAY 23: 建立模態框 (Modal)

今天學習了如何使用 JavaScript 操作 DOM 來控制模態框的顯示與隱藏。這是一個實用的功能,尤其在彈出提示或通知時很有幫助。過程中讓我對事件處理和元素...

2024-10-07 ‧ 由 jlll 分享
DAY 24

DAY 24: 實作拖放功能 (Drag and Drop)

今天學習了如何透過 JavaScript 實作拖放功能,這是個常見但實用的功能,例如在許多網站上用來拖放圖片或檔案。這次嘗試讓我更熟悉 ondragstart...

2024-10-08 ‧ 由 jlll 分享
DAY 25

DAY 25: 實作自動完成 (Autocomplete) 功能

今天的挑戰是實作表單欄位的自動完成功能,讓我們的網頁可以在使用者輸入時自動顯示下拉建議。這種功能在很多現代網站都很常見,像是搜尋引擎或註冊表單都會用到。我透過這...

2024-10-09 ‧ 由 jlll 分享
DAY 26

DAY 26: 動態載入內容

今天學習了如何使用 JavaScript 來動態載入頁面部分內容,讓網站更具互動性。例如,使用 fetch() 可以從伺服器獲取資料,再透過 DOM 操作來更新...

2024-10-10 ‧ 由 jlll 分享
DAY 27

DAY 27: 進階事件處理 - 觸控事件

大家好!今天是挑戰的第 27 天,我決定探討如何在移動裝置上處理觸控事件。隨著行動裝置的普及,能夠靈活處理觸控事件變得越來越重要。透過這次學習,我發現到在實作觸...

2024-10-11 ‧ 由 jlll 分享
DAY 28

DAY 28: 本地存儲與 DOM 操作

在今天的學習中,我探索了如何將使用者的操作結果保存至本地存儲,並且利用 DOM 操作即時展示。這樣的功能在許多網頁應用中十分常見,例如保存表單填寫進度或使用者設...

2024-10-12 ‧ 由 jlll 分享
DAY 29

DAY 29: 建立倒數計時器

今天挑戰的主題是使用 JavaScript 創建一個倒數計時器。這次學習讓我進一步掌握了如何利用 setInterval() 持續更新網頁上的時間。我覺得這種動...

2024-10-13 ‧ 由 jlll 分享
DAY 30

DAY 30: 綜合實作 - 單頁應用程式 (SPA) 的簡單範例

今天是最後一天的挑戰,我們將綜合過去所學,實作一個簡單的單頁應用程式 (Single Page Application, SPA)。這個範例將展示如何透過按鈕切...

2024-10-14 ‧ 由 jlll 分享