JavaScript 基本功能

1) 操作網頁內容（DOM 操作）

DOM 就是把網頁當成「元素樹」。JS 可以讀取 / 修改文字、樣式，或新增刪除元素。

最常用

抓取元素：document.getElementById()、document.querySelector()
改文字：textContent / innerHTML
改樣式：element.style 或 classList.add()
新增/刪除：createElement()、appendChild()、remove()

// 把 id="msg" 的文字改掉
document.getElementById("msg").textContent = "已被 JavaScript 改變！";

// 新增一個 li 到 ul
const li = document.createElement("li");
li.textContent = "新項目";
document.querySelector("#list").appendChild(li);

2) 事件處理（Event）

事件是「使用者做了某個動作」。JS 透過監聽事件，讓網頁做出回應。

互動核心

常見事件：click、input、keydown、submit、load
建議寫法：addEventListener（可綁多個事件、不會覆蓋）

document.querySelector("#btn").addEventListener("click", () => {
  console.log("你點到按鈕了！");
});

3) 變數與資料型態（Data Types）

用變數存資料，再做運算或顯示。理解型態能避免很多 bug。

基礎必背

let：可改值（最常用）｜const：不可改值（常用固定設定）
常見型態：number、string、boolean、array、object、null、undefined

let age = 20;                 // number
const name = "小明";           // string
let ok = true;                // boolean
let scores = [80, 90, 70];    // array
let user = { name, age };     // object

4) 條件判斷與迴圈（控制流程）

讓程式能「依情況做不同事」或「重複執行」。

邏輯核心

條件：if / else、switch
迴圈：for、while（搭配 break / continue）

// 及格判斷
if (score >= 60) console.log("及格");
else console.log("不及格");

// 重複輸出 1~5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

5) 函式（Function）：封裝功能、重複使用

把一段流程包起來，需要時呼叫。可帶參數、可回傳結果。

可讀性提升

好處：重複使用、維護容易、程式更清楚
常見：一般函式、箭頭函式（arrow function）

function add(a, b) {
  return a + b;
}

const add2 = (a, b) => a + b;

console.log(add(3, 4));  // 7

6) 陣列與物件（資料結構）

網頁常常要處理很多資料：名單、商品、留言、分數…陣列與物件就是主要工具。

資料處理

陣列常用：push、map、filter、find、sort
物件用於「描述一個東西」：例如一位使用者（name、age、email…）

const scores = [60, 80, 95];

// 乘以 2
const doubled = scores.map(s => s * 2);

// 篩出 >= 80
const good = scores.filter(s => s >= 80);

const user = { name: "小明", age: 20 };
console.log(user.name);

7) 表單驗證（Validation）

在送出前檢查資料正確性：必填、格式、範圍，避免錯誤資料送到後端。

實務常見

例：Email 格式、密碼長度、欄位不可空白
可以用正規表達式 RegExp 做更嚴格檢查

const email = document.querySelector("#email").value.trim();
if (!email.includes("@")) {
  alert("Email 格式不正確");
}

8) 串接 API 與非同步（async / await）

網頁常需要向伺服器拿資料（天氣、新聞、登入資訊）。JS 用 fetch 呼叫 API。

進階必學

fetch() 取得資料（通常是 JSON）
async/await 讓非同步流程更好讀

async function loadData() {
  const res = await fetch("https://example.com/api/data");
  const data = await res.json();
  console.log(data);
}

9) 瀏覽器儲存（localStorage / sessionStorage）

可把資料存在使用者瀏覽器裡，像是：主題模式、登入狀態、待辦清單。

保存狀態

localStorage：關掉瀏覽器資料還在
sessionStorage：關掉分頁後資料消失

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");

10) 動畫與互動效果（Animation）

JS 常用來切換 class，搭配 CSS transition/animation 做出彈出、淡入淡出、滑動等效果。

視覺加分

做法：JS 控制 classList.add/remove，CSS 負責動畫
更細緻可用 requestAnimationFrame

// 讓某區塊顯示並播放動畫
box.classList.remove("hidden");
box.classList.add("fadePop");

🧠JavaScript 基本功能（詳細版）