跳至主要內容

JavaScript 基礎

Jia-Yin2025年3月4日大约 2 分鐘coursefrontendweb

📌 學習內容

  • 了解 JavaScript 的基本語法
  • 學習變數、運算符、條件判斷、迴圈等基礎概念
  • 透過操作 DOM，讓 JavaScript 改變網頁內容
  • 完成一個小練習，動手實作

1️⃣ JavaScript 簡介與環境設置

什麼是 JavaScript？

JavaScript 是一種 前端語言，主要用來操控 網頁互動，例如：
✅ 操控 HTML 和 CSS
✅ 監聽使用者行為（點擊、輸入）
✅ 進行網頁動態效果

如何執行 JavaScript？

你可以用以下方式執行 JavaScript：

  1. 瀏覽器開發者工具（F12 → Console）
  2. 在 HTML 內部加上 <script>
  3. 外部 JavaScript 檔案 (.js)

📌 範例：內嵌 JavaScript

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 測試</title>
</head>
<body>
    <h1>你好，JavaScript！</h1>
    <script>
        console.log("Hello, JavaScript!");
        alert("歡迎來到 JavaScript 課程！");
    </script>
</body>
</html>

2️⃣ 變數與資料型別

變數宣告 (let, const, var)

let name = "Alice";  // 可變數
const PI = 3.14;     // 常數
var age = 25;        // 舊版變數宣告（不推薦）

資料型別

類型說明範例
string字串"Hello"
number數字123, 3.14
boolean布林值true, false
array陣列[1, 2, 3]
object物件{name: "John", age: 25}

📌 範例：資料型別與 typeof

let a = "Hello";
let b = 42;
let c = true;
console.log(typeof a); // "string"
console.log(typeof b); // "number"
console.log(typeof c); // "boolean"

3️⃣ 運算符與條件判斷

基本運算符

let x = 10;
let y = 3;
console.log(x + y);  // 13
console.log(x - y);  // 7
console.log(x * y);  // 30
console.log(x / y);  // 3.33
console.log(x % y);  // 1

比較運算符與 if 判斷

let score = 85;
if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else {
    console.log("C");
}

邏輯運算符 (&&, ||, !)

let isAdult = (age >= 18 && age < 65);
let isChild = (age < 18 || age > 65);
console.log(!isAdult);  // 反轉布林值

4️⃣ 迴圈與函式

for 迴圈

for (let i = 0; i < 5; i++) {
    console.log("數字：" + i);
}

while 迴圈

let count = 0;
while (count < 5) {
    console.log("計數：" + count);
    count++;
}

函式 (function)

function greet(name) {
    return "你好, " + name + "!";
}
console.log(greet("Alice"));

5️⃣ DOM 操作與事件處理

如何選取 HTML 元素

let title = document.querySelector("h1");  // 選取 `<h1>`
console.log(title.innerText);

修改 HTML 內容

document.querySelector("h1").innerText = "JavaScript 超好玩!";

事件監聽

<button id="myButton">點我一下</button>
<script>
    document.querySelector("#myButton").addEventListener("click", function() {
        alert("你按下了按鈕！");
    });
</script>

6️⃣ 互動範例

💡 設計一個簡單的 HTML 頁面，包含：
✅ 一個 <input> 讓使用者輸入名字
✅ 一個按鈕，點擊後顯示「你好，(名字)！」

📌 範例程式碼

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>互動式 JavaScript</title>
</head>
<body>
    <input type="text" id="nameInput" placeholder="輸入你的名字">
    <button id="sayHello">打招呼</button>
    <h2 id="greeting"></h2>

    <script>
        document.querySelector("#sayHello").addEventListener("click", function() {
            let name = document.querySelector("#nameInput").value;
            document.querySelector("#greeting").innerText = "你好，" + name + "!";
        });
    </script>
</body>
</html>

🎯 動手實作：挑一個範例練習

  1. 計算機功能：讓使用者輸入兩個數字，點擊按鈕後顯示相加結果
  2. 背景顏色切換：按按鈕切換背景顏色
  3. 倒數計時器：讓使用者輸入秒數，點擊後開始倒數
Copyright © 2025 Jia-Yin