鐵人檔案
很多人在學完JavaScript 之後，有了語法卻想不出能夠做些甚麼，所以我想要讓大家能夠在學完後有一點想法，學以致用，讓JavaScript 不要變得只是學了語法之後就荒廢。
【第一課】解決學了 JavaScript 卻做不出東西：用 DOM 操作打造 30 天實用網頁效果 前言：為什麼學了 JavaScript，打開空白網頁還是不知...
剛學完 JS 的變數和迴圈，打開空白的 HTML 卻不知道從何下手嗎？別擔心！今天我們用大家最常用的功能——「夜間模式切換」，教你使用 DOM 的第一步。 核心...
第二課：表單控制：手把手打造「顯示/隱藏密碼」切換功能 在輸入複雜密碼時，使用者常因無法確認自己是否打錯字而感到困擾。現代網站的標準配備「顯示/隱藏密碼」按鈕，...
前言 當頁面資料量變多時（例如商品目錄、通訊錄），給使用者一個搜尋框來「即時過濾內容」能大幅提升體驗。今天我們就來學習如何結合 DOM 的 input 事件與字...
前言 網站的「常見問題（FAQ）」頁面，若把所有答案一次攤開會讓頁面顯得很混亂。「手風琴折疊元件」讓使用者點擊標題時才展開對應答案，是維持介面整潔的好幫手。 核...
前言 在 Twitter (X)、FB 貼文或發送簡訊時，我們常看到「即時字數統計」與「超過上限顯示警告紅字」。這個即時視覺反饋能防止使用者送出無效資料。今天我...
觀念與函式深度解析 1. document.createElement('tagName') 與 appendChild()• 為什麼選用這個函式？當使用者在輸...
前言 在 Medium、新聞部落格或長篇文件網站中，我們常看到頁面最頂端有一條「隨著滾動顯示閱讀進度」的進度條。這個設計能讓讀者清晰掌握剩餘文章長度，提升閱讀體...
前言 在閱讀長篇網頁時，如果需要手動慢慢滾動回到頁面最頂端，對使用者來說非常不便。「回到頂部（Back to Top）」按鈕是現代網站標準的 UX 設計之一，今...
前言 不論是登入畫面、條款確認還是圖片放大看，Modal 燈箱元件在網站中隨處可見。看似簡單的彈窗，如果沒有處理好「背景鎖定」與「遮罩點擊關閉」，就會造成體驗感...
