Understanding the functions of Javascript

簡介：讓你的網頁「活」起來！

歡迎來到第二單元！到目前為止，你已經學過 HTML 如何提供網頁的「骨架」，以及 CSS 如何為網頁添加「皮膚」或樣式。現在，是時候為它加上「大腦」了——這就是 JavaScript。JavaScript 是一種能增加互動性和響應能力的程式語言。沒有它，網站就像印刷海報一樣靜態。有了 JavaScript，我們可以建立圖片庫、驗證表單，並對使用者的每一次點擊或按鍵做出反應。如果程式編寫起初看起來有點嚇人，請別擔心；我們會一步一步地為你拆解！

9.1 文件物件模型 (DOM)

為了改變網頁上的任何內容，JavaScript 需要一種與 HTML「溝通」的方式。它就是通過 文件物件模型 (DOM) 來實現這一點的。

什麼是 DOM？

你可以把 DOM 想像成 HTML 文檔的地圖或族譜。當瀏覽器載入你的頁面時，它會建立這張地圖。JavaScript 可以利用 DOM 來執行以下操作：

• 存取 內容（例如讀取使用者在方框中輸入的文字）。
• 更新 內容（例如在不重新整理頁面的情況下更改標題文字）。
• 變更樣式（例如點擊按鈕時讓它變紅）。

類比： 想像你的網頁是一棟房子，DOM 就是電路圖。而 JavaScript 就像遙控器，利用這些電路來控制燈光的開關！

快速回顧： DOM 是你的 JavaScript 程式碼與瀏覽器視窗之間的橋樑。

重點總結： JavaScript 使用 DOM 來實時選擇、更改或移動頁面上的元素。

9.2 正規表達式 (Regex)

你有沒有試過在註冊網站時，系統提示你「密碼必須包含一個數字」？這通常就是透過 正規表達式 (Regular Expressions) 來處理的。

驗證與模式比對

正規表達式 (Regular Expression)（或簡稱 Regex）是一串特殊的字元序列，用於形成搜尋模式。我們使用它們進行 驗證檢查 (Validation checks)，以確保資料格式正確。

你需要了解 Regex 如何搜尋以下內容：

• 字母： 尋找特定的大小寫字元序列。
• 數字： 檢查欄位（如電話號碼）是否包含數字。
• 標點符號與符號： 尋找電子郵件中的 "@" 等符號。
• 重複模式： 檢查特定數量的數字，例如 5 位數的郵遞區號。

記憶小撇步： 把 Regex 想像成「搜尋與篩選」工具。如果輸入內容符合該模式，資料就是有效的！

重點總結： 正規表達式 用於透過比對字母、數字和符號的模式來驗證使用者輸入。

9.3 程式化功能

這是程式編寫的核心。要讓網頁能夠「執行」某些功能，你需要掌握程式碼的基本建構塊。

將 JavaScript 加入頁面

你可以使用 <script> 標籤將 JavaScript 加入 HTML。通常，這會放置在 HTML 檔案的底部，這樣頁面就能先載入其內容。

程式編寫核心概念

• 變數 (Variables)： 用於儲存資料的容器。把它們想像成貼了標籤的盒子，用來存放資訊。
• 賦值 (Assignment)： 使用 = 符號將值放入變數中。例如：let score = 10;
• 註解 (Comments)： 給人類看的筆記，電腦會忽略這些內容。在 JavaScript 中，我們用 // 來標註單行註解。
• 資料結構 (Data Structures)：
  一維陣列 (1D Array)： 單一的項目列表，例如購物清單：\( [ "牛奶", "麵包", "雞蛋" ] \)。
  二維陣列 (2D Array)： 列表的列表，例如帶有行列的電影院座位表。
• 選擇 (Selection)： 使用 if 陳述式來做決定。例如：如果使用者已登入，顯示「登出」按鈕。
• 重複與迭代 (Repetition and Iteration)： 使用 迴圈 (loops)（如 for 或 while）來重複執行任務，例如檢查列表中的每一個項目。
• 子程式 (Subprograms/Functions)： 專門執行特定任務的程式碼區塊。當你需要執行該任務時，只需「呼叫 (call)」該函式即可。
• 物件導向 (Object Orientation)： 一種透過將資料和行為分組為「物件」來組織程式碼的方式。

你知道嗎？ 二維資料結構 基本上就是一個表格！如果你會用試算表，你就能理解二維陣列。

重點總結： 像 選擇（決策）和 迭代（迴圈）這樣的邏輯結構，讓 JavaScript 能夠自動處理複雜任務。

9.3.3 理解事件 (Events)

JavaScript 不會隨機執行，它是在等待 事件 (Events) 發生。事件是指在瀏覽器中發生的某個動作。

常見事件類型：

• 使用者介面 (UI) 事件： 例如頁面載入完成。
• 鍵盤事件： 例如 keydown（當使用者按下按鍵時）。
• 滑鼠事件： 例如 click（點擊）或 mouseover（懸停）。
• 焦點與模糊事件 (Focus and Blur)： Focus 是指點擊文字方塊內部；Blur 是指點擊離開文字方塊。
• 表單事件： 例如 submit，當使用者點擊表單的「傳送」按鈕時觸發。

快速回顧：
動作 -> 事件 -> 函式
（使用者點擊）->（觸發點擊事件）->（JavaScript 執行程式碼）

9.3.4 結合 JavaScript、HTML 與 CSS

當這三者共同運作時，你可以建立互動式的 組件 (components)。課程大綱要求你了解如何建立：

• 幻燈片 (Slideshows)： 循環播放圖片。
• 模態視窗與圖片 (Modal Boxes and Images)： 在內容之上顯示的彈出式視窗。
• 篩選與排序列表 (Filter and Sort Lists)： 組織資料（例如將價格由低到高排序）。
• 彈出視窗 (Pop-ups)： 小型警告視窗。
• 標籤頁內容 (Tabbed Content)： 在不離開頁面的情況下切換不同區塊的內容。

邏輯步驟： 要製作 模態視窗，JavaScript 會在按鈕被點擊時，將 CSS 的 display 屬性從 "none"（隱藏）更改為 "block"（可見）。

9.3.5 錯誤處理與偵錯 (Debugging)

如果你的程式碼第一次沒有成功執行，請別擔心——即使是專業開發人員，大部分時間也都在修正錯誤！這個過程稱為 偵錯 (debugging)。

常見的錯誤類型：

• 語法錯誤 (Syntax Errors)： 程式碼中的拼字錯誤（例如忘記打括號）。
• 邏輯錯誤 (Logic Errors)： 程式碼可以執行，但執行結果不正確（例如本該相減卻變成了相加）。

如何處理錯誤：
你可以使用 錯誤處理 (error handling) 技術（例如 try...catch 區塊），以防止網站因發生問題而當機。使用瀏覽器開發者工具（按 F12）是找出並「偵錯」這些問題的最佳方法。

重點總結： 偵錯 是尋找並修正錯誤的過程，而 錯誤處理 則能幫助程式優雅地處理意料之外的問題。