單元 2：理解 Javascript 的功能
你好，未來的網頁開發者！
歡迎來到這個關鍵章節！我們將深入探討 Javascript (JS)，這是一種為靜態網頁注入生命、動態與智能的語言。如果說 HTML 是建築結構，CSS 是裝潢設計，那麼 JS 就是電力與大腦！
別擔心，如果指令碼（Scripting）起初看起來有點複雜，我們會將 Javascript 的核心功能拆解成簡單易懂的部分。學完這一節，你將會完全明白 JS 的作用，以及為何它在現代網頁開發中不可或缺。
第一部分：Javascript 在網頁「三劍客」中的角色
什麼是 Javascript？（前備知識檢查）
一個網站通常由三種核心技術構建而成。要理解 JS，我們必須先簡要回顧一下它的兩位夥伴：
- HTML (超文本標記語言)： 定義結構（標題、段落、圖片、連結）。可以把它想像成房子的骨架。
- CSS (層疊樣式表)： 定義外觀（顏色、字體、排版、間距）。這就像是房子的室內設計與油漆。
- Javascript (JS)： 定義行為與互動性。這就是讓房子運作起來的電力、水管與自動化系統。
你知道嗎？
JS 主要是一種客戶端指令碼語言（client-side scripting language）。這意味著程式碼是直接在用戶的網頁瀏覽器（客戶端）中執行，而不是在託管網站的伺服器上執行。這使得互動過程感覺非常即時！
重點總結： Javascript 是網頁的大腦，負責處理動態內容並回應使用者的操作。
第二部分：Javascript 的核心功能
2.1 功能：客戶端互動性
Javascript 最顯著的功能是在無需重新載入整個頁面的情況下實現互動。它將靜態文件轉變為動態應用程式。
JS 如何實現互動性（讓東西動起來！）
- 動態內容更新： 根據不同條件更改文字或圖片。（例如：根據一天中的不同時間顯示不同的歡迎訊息。）
- 互動元素： 建立幻燈片、動畫轉場或滑鼠懸停效果，以顯示隱藏資訊。
- 使用者回饋： 在使用者執行操作（例如將商品加入購物車）後，立即顯示提示或訊息。
類比：遙控器
想像 HTML 是電視機，CSS 是螢幕邊框和顏色。Javascript 就是遙控器——它讓你無需重新拆裝電視機，就能即時切換頻道、調整音量並存取選單。
2.2 功能：事件處理（Event Handling）
要讓網站具備互動性，它必須能夠識別並回應事件。事件 (event) 是指網頁元素上發生的任何事情。
事件處理的步驟
Javascript 扮演著網站觀察者與指揮官的角色，遵循三個步驟：
- 監聽 (Listening)： JS 持續「監聽」由使用者或瀏覽器觸發的特定事件。
- 識別事件 (Identifying the Event)： 常見事件包括：click（按下滑鼠按鍵）、mouseover（滑鼠指標移到元素上）、keypress（按下按鍵），或 load（頁面載入完成）。
- 回應 (Executing a Function)： 當特定事件發生時，JS 會執行一段預先寫好的程式碼，稱為函數 (function)，以執行某項動作。
關鍵術語： JS 中的函數 (function) 就是一塊為了執行特定任務而設計的可重複使用程式碼區塊。
常見錯誤提示
同學們有時會混淆事件 (event)（觸發器）與函數 (function)（動作）。請記住：click 是事件，而隱藏選單則是該事件所觸發的函數。
2.3 功能：DOM 操作
這是 Javascript 最強大的功能之一。要理解 JS 如何更改網頁，你必須先了解 DOM。
認識文件物件模型 (DOM)
DOM (Document Object Model) 是 HTML 和 XML 文件的一種編程介面。它將頁面呈現為一個模型，讓程式（如 Javascript）能夠更改文件的結構、樣式與內容。
- 將 HTML 頁面想像成一個家族樹。
<html>標籤是祖父母，<body>和<head>是子女，而<p>或<img>標籤則是孫子女。 - DOM 為 Javascript 提供了一個導航這棵樹的結構。
JS 如何運用 DOM：
透過操控 DOM，Javascript 可以：
- 更改元素： 更新段落內的文字（例如：將狀態從「離線」改為「線上」）。
- 更改屬性： 修改圖片的來源 (
src) 或超連結的網址 (href)。 - 更改樣式（透過 CSS）： 直接改變元素的顏色、大小或可見度。
- 新增或刪除元素： 從頁面上完全移除元素，或產生新元素（例如在購物車中加入新的一行）。
快速回顧： JS 使用 DOM 結構來定位網頁的特定部分並進行動態修改。
2.4 功能：輸入驗證 (Input Validation)
Javascript 的一項關鍵安全與可用性功能，是在資料發送到伺服器之前檢查表單輸入內容。這稱為客戶端驗證 (client-side validation)。
為什麼客戶端驗證很重要？
- 速度與效率： 它能即時給使用者回饋。如果使用者忘了輸入電子郵件，JS 可以立即提醒他們，而無需等待伺服器處理請求。
- 減輕伺服器負擔： 它避免了不必要的伺服器請求，節省了伺服器的頻寬與處理能力。
- 提升使用者體驗： 使用者會欣賞即時指引來修正錯誤。
JS 會驗證什麼？
JS 函數常用於檢查常見限制，例如：
- 欄位是否留空？（必填欄位）
- 輸入格式是否正確？（電子郵件地址是否包含 "@" 和 "."）
- 密碼是否符合最低要求？（長度、是否包含數字/符號）
- 兩個欄位是否相符？（確認密碼欄位）
給同學們的叮嚀：
雖然客戶端驗證對提升使用者體驗非常好，但它不足以保證安全性。攻擊者可以輕易繞過客戶端的 JS 驗證。因此，伺服器端驗證 (server-side validation) 仍然是確保資料完整性與安全性的絕對必要程序，但該程序是在 JS 完成客戶端工作之後才進行的。
記憶口訣： JS 是網頁的 V.I.P.：Validation（驗證）、Interactivity（互動性）、Page (DOM) Manipulation（頁面操控）。
第三部分：應用與功能總結
我們在日常生活中哪裡能看到 JS 的功能？
每次你使用現代網站時，你都在受惠於 Javascript 的核心功能：
- 購物車： 當你點擊「加入購物車」時，JS 會即時更新小型購物車圖示上的數字 (DOM 操作)，並確認商品已成功加入 (互動/事件處理)。
- 搜尋篩選器： 當你選擇價格區間或類別時，顯示的結果會變更，而不需要整個頁面閃爍或重新載入 (DOM 操作)。
- 線上表單（註冊/登入）： 當你輸入錯誤的密碼格式時，JS 會在你點擊提交前立即顯示紅色錯誤訊息 (輸入驗證)。
- 圖片庫： 點擊縮圖以顯示放大影像 (事件處理)。
快速回顧盒：Javascript 的主要功能
JS 提供客戶端指令碼編寫以實現：
- 啟用互動性（動態變更）。
- 處理事件（回應點擊/動作）。
- DOM 操作（更改結構、內容與樣式）。
- 輸入驗證（在本地檢查表單資料）。
恭喜你！現在你已經打下了堅實的基礎，理解了為什麼 Javascript 對網際網路的功能如此重要。繼續練習這些定義吧！