歡迎來到網頁編程的世界！

你好！在本章節中，我們將學習如何讓網頁變得動態、具備思考能力，並能回應使用者的操作。如果說 HTML 是網頁的「骨架」，CSS 是網頁的「衣服」，那麼 JavaScript 就是網頁的「大腦」。學完這些筆記後，你將理解客戶端腳本（client-side scripting）的運作原理，並學會利用它來建立互動式網頁。別擔心，即使你從未寫過程式碼也沒關係——我們將會一步一步來！

1. 理解客戶端腳本 (Client-Side Scripting)

在 IT 領域，我們常提到「客戶端 (client)」與「伺服器 (server)」。客戶端就是正在使用網頁瀏覽器的你（例如你在用 Chrome 或 Safari）。伺服器則是一台遠端的高性能電腦，負責將網頁傳送給你。

客戶端腳本（使用 JavaScript）是指程式碼直接在「你的」電腦上執行，而不是在伺服器上執行。

比喻： 想像一下去訂做一份「DIY 薄餅」。
伺服器端： 廚師把薄餅烤好，然後把成品送給你。
客戶端： 廚師只把麵團和配料發給你，然後由「你」在餐桌上自己動手組裝。對餐廳來說這樣更有效率，而且你可以立即調整配料！

為什麼我們要用它？
  • 速度： 當使用者點擊某個東西時，瀏覽器不必每次都「詢問」伺服器。
  • 互動性： 例如圖片庫、倒數計時器，以及會彈出的選單。

快速回顧： 客戶端腳本在使用者的瀏覽器上執行，讓網頁速度更快，互動感更強。

2. 變數與資料類型

變數 (variable) 就像一個貼了標籤的盒子。你可以把一項資訊放進盒子裡，給它一個名稱，稍後在程式碼中隨時呼叫它。

「盒子」的種類（資料類型）

JavaScript 需要知道你儲存的是哪種資料：

  • 字串 (String)： 文字資料，必須寫在「引號」內。（例如："Hello Student"）
  • 整數 (Integer)： 沒有小數點的整數。（例如：10, -5）
  • 浮點數 (Float)： 帶有小數的數字。（例如：10.50）
  • 布林值 (Boolean)： 只有兩個可能值：true 或 false。就像電燈開關一樣！

全域變數 vs. 區域變數

你建立變數的位置非常重要！
1. 全域變數 (Global Variables)： 在函式外建立。腳本中的任何部分都能看到並使用它們。
2. 區域變數 (Local Variables)： 在特定函式內建立。它們只在該函式執行期間存在。

常見錯誤： 忘記給字串加上引號！如果你寫 name = John;，電腦會去尋找一個名為 John 的變數。如果你寫 name = "John";，它就會知道你是指文字 John。

重點總結： 變數用來儲存資料。文字請用字串，整數請用整數，而真/假判斷請用布林值。

3. 運算子：必備工具

運算子讓我們可以進行數學運算或進行比較。

算術運算子

它們的操作就像你的計算機一樣：
+ (加法)
- (減法)
* (乘法)
/ (除法)

比較運算子

它們會提出一個問題：「這是真的嗎？」
== (等於？) — 注意是兩個等號！
!= (不等於？)
> (大於)
< (小於)

你知道嗎？ 在 JavaScript 中，= 代表「把這個值放進盒子裡」，但 == 代表「檢查這兩樣東西是否相同」。

4. 控制結構 (做決策)

有時候，我們只希望程式碼在特定條件成立時才執行。

IF 敘述

這就像路口的「岔路」。
例子： IF 使用者年齡為 18 歲或以上，THEN 顯示「立即投票」按鈕。ELSE，顯示「未成年」。

迴圈 (For 與 While)

迴圈 (loop) 告訴電腦重複執行某個動作。
FOR 迴圈用於你知道要重複多少次時（例如：「列印這句話 10 次」）。
WHILE 迴圈用於只要某個條件為真，就一直執行（例如：「當『播放』按鈕為開啟時，持續播放音樂」）。

記憶小撇步： IF 是選擇題。LOOP 是一個圓圈。

5. 函式與事件

函式 (function) 是一段設計用來執行特定任務的程式碼區塊。當你需要時，可以隨時「呼叫」它。

透過事件 (Events) 觸發動作

JavaScript 會「傾聽」使用者做了什麼，這些動作稱為事件 (Events)。

  • onclick： 當使用者點擊元素（如按鈕）時發生。
  • onmouseover： 當滑鼠指標移到圖片或文字上方時發生。
  • onmouseout： 當滑鼠指標離開該區域時發生。

圖片變換範例步驟：
1. 使用 onmouseover 將圖片來源切換為「高亮」版本。
2. 使用 onmouseout 將圖片來源切回「原始」版本。
3. 這創造了「滑鼠懸停」效果，讓網頁更有靈活的回應感！

重點總結： 事件是觸發器，而函式則是觸發後執行的動作。

6. 表單驗證 (Form Validation)

這是課程綱要中 JavaScript 最重要的應用之一。它的作用是在資料傳送到伺服器「之前」進行檢查。

常見的驗證檢查：
  • 存在性檢查 (Presence Check)： 輸入框是否留空了？
  • 長度檢查 (Length Check)： 密碼是否足夠長？
  • 範圍檢查 (Range Check)： 年齡是否在 1 到 120 之間？
  • 類型檢查 (Type Check)： 是否在應該輸入文字的地方輸入了數字？

為什麼要這樣做？ 這可以節省時間！比起把資料傳送給伺服器，再等待伺服器傳回錯誤訊息，直接在螢幕上立即告訴使用者「你忘記輸入電子郵件」要快得多。

快速回顧： 使用 JavaScript 在客戶端驗證表單，可以優化使用者體驗並減少伺服器負載。

總結清單

如果剛開始覺得有些複雜，別擔心！程式設計是一門新語言。只要記住這些基礎：
- 客戶端 (Client-side) = 在瀏覽器中執行。
- 變數 (Variables) = 資料容器（字串、整數、浮點數、布林值）。
- IF 敘述 (IF Statements) = 決策判斷。
- 迴圈 (Loops) = 重複任務。
- 事件 (Events) = 觸發器，如 onclick 或 onmouseover。
- 驗證 (Validation) = 在提交前檢查錯誤。

你一定做得到的！持續練習邏輯，程式碼自然會寫得越來越順手。