昨天，我們讓網頁「活了起來」──讓它會對使用者的點擊做出回應、能改變畫面顏色。
但 JS 的世界遠不止如此，今天，我們要更深入學習如何用「邏輯」控制網頁，讓它不只會動，還能「聰明地動」!

為什麼要學 JS 的邏輯？

想像你要做一個表單，使用者輸入電子郵件：

• 沒邏輯的網頁：使用者隨便打 abc 也都能送出，然後系統就會炸掉
• 有邏輯的網頁：輸入不符合格式，會即時提示，如：「請輸入正確的 Email」

這就是 JS 的強大之處：不只是互動，而是帶入條件判斷與運算，讓網站有「思考能力」

1. 變數與資料型態再深入

昨天我們提到 let 和 const，但變數內可以放什麼？

JS 有幾種常用資料型態：

• 字串 (String)：let name = "Hank";
• 數字 (Number)：let age = 25;
• 布林 (Boolean)：let isMember = true;
• 陣列 (Array)：let colors = ["red", "blue", "green"];
• 物件 (Object)：let user = { name: "Hank", age: 25 };

這些資料型態是控制邏輯的基礎

2. 判斷式 (if / else)

條件判斷是 JS 的「思考」核心

let age = 18;

if (age >= 18) {
  console.log("歡迎光臨此網站！");
} else {
  console.log("未滿 18 禁止進入");
}

可應用場景如：登入判斷、表單驗證、購物車折扣計算等等

3. 迴圈 (Loop) – 讓程式重複工作

假設你有 10 個商品要顯示，難道要 console.log 打 10 次？

for (let i = 1; i <= 10; i++) {
  console.log("商品編號：" + i);
}

可應用場景如：動態產生列表、跑 API 資料等等

4. 事件 + 邏輯：綜合應用練習

客戶需求：按按鈕，計算按了幾次，並於畫面中顯示
HTML：

<h1>您按了 0 次</h1>
<button id="btn">點我</button>

JS：

let count = 0;
const title = document.querySelector('h1');
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  count++;
  title.textContent = `您按了 ${count} 次`;
});

這是「有記憶」的網頁功能

5. JS 與現代前端的方向

學到這裡，可能都會想：「JS 這麼多，怎麼學的完(ノ▼Д▼)ノ？」
事實上，現代前端大多有以下進程：

• 原生 JS 基礎（目前）
• ES6+ 新語法（箭頭函式、模組化、解構）
• DOM & API 溝通（讓網站與後端資料互動）
• 框架 / 函式庫（React, Vue, Svelte, Angular）
• 工具鏈（Webpack, Vite, npm）

我們現在是在最基礎的第一步，
這一步看起來雖然既簡單又但又有難度，但它是後續所有學習的地基......

學習心得

今天寫了第一個「會記錄狀態」的小功能，對網頁不只是裝飾而是「工具」這點，更深有體會。
以前看網站，覺得功能理所當然；但現在學了 JS，才知道這背後有多少邏輯設計。
雖然常常會卡住，但當成功跑出結果的那一刻，真的會很開心!

下一步，我們將開始接觸 更進階的 DOM 操作 & 表單驗證，真正進入「動態網頁」的世界((└(:3」┌)┘))