JavaScript 簡介與網頁互動基礎
JavaScript 是一種廣泛應用於網頁開發的程式語言，主要用於實現網頁的互動性與動態行為。與 HTML 和 CSS 一同構成現代網頁的三大核心技術，JavaScript 讓開發者能夠操控網頁內容、響應使用者操作、處理資料並與伺服器溝通。
靜態網站與動態網站
網站可分為靜態與動態兩種類型。靜態網站的內容固定，所有使用者看到的內容相同，通常只使用 HTML 和 CSS 建構，適合展示長期不變的資訊，如「關於我們」或聯絡方式頁面。動態網站則能根據使用者或資料來源顯示不同內容，通常包含伺服器端程式碼與資料庫整合，常見於社交媒體、會員系統或即時資訊平台。
JavaScript 的用途與優勢
JavaScript 可用於修改 HTML 元素、控制多媒體、建立動畫效果、處理表單輸入、與伺服器溝通等。其執行速度快、語法簡單、資源豐富，並且支援多種瀏覽器，是前端開發者必學的語言之一。JavaScript 也因其普及性與社群活躍度，成為最受歡迎的網頁程式語言。
JavaScript 的嵌入方式
JavaScript 可透過三種方式嵌入網頁：
- 直接寫在 HTML 的
<script>標籤中（內嵌式） - 放在
<head>或<body>中的<script>區塊 - 引用外部
.js檔案（外部式）
最佳實踐是將 <script> 放在 </body> 結尾，以提升頁面載入效能。
JavaScript 的輸出方法
JavaScript 提供多種方式輸出資料：
document.getElementById().innerHTML：修改網頁內容document.write()：直接寫入頁面（僅限測試）alert()：顯示提示框console.log()：輸出至瀏覽器主控台（用於除錯）
JavaScript 語法與變數基礎
JavaScript 是一種用於網頁開發的程式語言，其語法結構簡潔，適合初學者入門。理解 JavaScript 的語法、變數、資料型別與運算子，是建立互動式網頁的第一步。
語法與語句
JavaScript 程式由一系列語句（Statements）組成，每個語句都是一條指令，從上到下依序執行。語句可包含值、運算子、表達式、關鍵字與註解。
變數與資料型別
- 字串（String）：儲存文字，例如
"Hello" - 數字（Number）：儲存整數或小數，例如
10 - 布林值（Boolean）：儲存
true或false - undefined：變數已宣告但尚未賦值
- null：主動設定為空值
var x = 5;
console.log(typeof x); // "number"命名與賦值
變數命名應具描述性，並遵循 camelCase 命名規則，例如 userName。
var x = 10;
x = 20; // x 現在為 20嚴格模式（Strict Mode）
"use strict";
x = 10; // ReferenceError: x is not defined算術運算子
| 運算子 | 功能 |
|---|---|
| + | 加法 |
| - | 減法 |
| * | 乘法 |
| / | 除法 |
| % | 餘數 |
| ** | 次方 |
| ++ | 遞增 |
| -- | 遞減 |
var x = (1 + 2) * 3; // x 為 9註解
// 單行註解
/*
多行註解
*/良好的註解習慣有助於維護程式碼與團隊合作。
JavaScript 字串與數值操作基礎
JavaScript 是一種功能強大的網頁程式語言，支援多種資料型別與操作方法。在前端開發中，字串與數值是最常見的資料型別，掌握它們的屬性與方法能有效提升程式的靈活性與可讀性。
字串（String）
字串是由一連串文字組成的資料型別，通常以雙引號或單引號包裹。JavaScript 提供多種字串方法：
.length：取得字串長度.search()：搜尋特定字元的位置.charAt()：根據索引取得字元.slice()：擷取字串的一部分.concat()或+：合併字串
var text = "Hello, World!";
text.length; // 13
text.search("W"); // 7
text.charAt(0); // "H"
text.slice(7, 12); // "World"
"Good".concat("bye"); // "Goodbye"數值（Number）
JavaScript 的數值型別不區分整數與浮點數，皆以雙精度浮點格式儲存。常見方法與屬性包括：
.toFixed(n)：保留 n 位小數.toPrecision(n)：保留 n 位有效數字.toExponential(n)：轉換為科學記號.toString(base)：轉換為指定進位的字串Number.MAX_VALUE/Number.MIN_VALUEInfinity/-InfinityNaN：非法數值isNaN()：判斷是否為非法數值
var pi = 3.14159;
pi.toFixed(2); // "3.14"
(204227677).toExponential(3); // "2.042e+8"
(64).toString(2); // "1000000"
isNaN(10 / "Hello"); // trueJavaScript 比較與邏輯運算子
JavaScript 提供多種比較與邏輯運算子，用於判斷資料之間的關係與邏輯條件。這些運算子是控制流程、條件判斷與資料驗證的基礎，廣泛應用於表單驗證、使用者登入、資料篩選等場景。
賦值運算子
x += y等同於x = x + yx -= y等同於x = x - yx *= y等同於x = x * yx /= y等同於x = x / yx %= y等同於x = x % y
資料型別轉換
使用 String()、Number()、Boolean() 進行顯式轉換，也可透過運算觸發隱式轉換。
var x = 10;
typeof(x); // "number"
x = String(x);
typeof(x); // "string"比較運算子
| 運算子 | 說明 | 範例 |
|---|---|---|
| == | 值相等 | x == "10" // true |
| === | 值與型別皆相等 | x === "10" // false |
| != | 值不相等 | x != 5 // true |
| !== | 值或型別不相等 | x !== "10" // true |
| > | 大於 | x > 5 // true |
| < | 小於 | x < 15 // true |
邏輯運算子
&&：AND，所有條件皆為 true||：OR，任一條件為 true!：NOT，反轉布林值
var x = 5, y = 10;
(x < y && typeof(x) === "number"); // true
!(x < y); // false真值表
| x | y | x && y | x || y |
|---|---|---|---|
| false | false | false | false |
| false | true | false | true |
| true | false | false | true |
| true | true | true | true |
JavaScript 條件判斷語句
在 JavaScript 中，條件判斷語句（Conditional Statements）是控制程式流程的核心工具。它們允許根據不同的條件執行不同的程式碼區塊，實現邏輯分支與決策判斷。
比較與邏輯運算子
條件語句通常依賴比較運算子（如 ==, ===, !=, >, <）與邏輯運算子（如 &&, ||, !）來判斷條件是否成立。
if 語句
if (score >= 40) {
result = "pass";
}else 語句
if (score >= 40) {
result = "pass";
} else {
result = "fail";
}else if 語句
if (score >= 80) {
result = "merit";
} else if (score >= 40) {
result = "pass";
} else if (score == "absent" && doctorsNote == true) {
result = "exempt";
} else {
result = "fail";
}switch 語句
switch (day) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
weekend = false;
break;
case "Saturday":
case "Sunday":
weekend = true;
break;
}switch 與 if-else 可互相替代，但 switch 在處理明確值比對時更簡潔。
JavaScript 物件與陣列
JavaScript 是一種物件導向程式語言，物件（Object）與陣列（Array）是其核心資料結構。它們能儲存複雜資料並提供靈活操作方式，是前端開發不可或缺的工具。
物件（Object）
物件是由「鍵值對」組成的資料結構，用於描述具有屬性與行為的實體。
var dog = {
name: "Marley",
gender: "Male",
age: 2,
breed: "Labrador retriever"
};也可使用 new Object() 建立空物件並逐一指定屬性。
var dog = new Object();
dog.name = "Marley";屬性存取方式：
dog.name; // "Marley"
dog["gender"]; // "Male"修改與刪除屬性：
dog.name = "Rex";
delete dog.breed;陣列（Array）
陣列用於儲存一組有序資料，索引從 0 開始。
var students = ["Chris", "Kim", "Ben", "Matt"];常用方法：
students.length：取得元素數量students.push("Tom")：新增元素students.pop()：移除尾端元素students.shift()：移除開頭元素students.splice(1, 2, "Tim")：插入或刪除元素delete students[0]：設為 undefined（不建議）
存取方式：
students[0]; // "Chris"JavaScript 迴圈基礎
在程式設計中，迴圈（Loop）是一種控制流程的結構，用於重複執行某段程式碼直到特定條件不再成立。JavaScript 提供多種迴圈語法，包括 while、do-while 等，並搭配 break 與 continue 控制迴圈行為。
while 迴圈
var i = 1;
while (i <= 10) {
console.log(i);
i++;
}先檢查條件再執行，若條件永遠為真可能造成無限迴圈。
do-while 迴圈
do {
console.log("執行一次");
} while (條件);至少執行一次，常用於使用者輸入驗證。
break 陳述式
var i = 0;
while (i <= 10) {
if (i == 4) break;
console.log(i);
i++;
}強制中斷迴圈。
continue 陳述式
var i = 0;
while (i <= 10) {
if (i == 4) {
i++;
continue;
}
console.log(i);
i++;
}跳過本次迴圈剩餘程式碼，進入下一次。
JavaScript 進階迴圈語法
JavaScript 提供多種迴圈語法，包括 for、for-in、for-of，以及巢狀結構與標籤式跳出等技巧。
for 迴圈
for (let i = 1; i <= 10; i++) {
console.log(i);
}for-in 迴圈
var dog = { name: "Marley", age: 2 };
for (let key in dog) {
console.log(key + ": " + dog[key]);
}for-of 迴圈
var animals = ["Cat", "Dog", "Cow"];
for (let animal of animals) {
console.log(animal);
}巢狀結構
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 2; j++) {
console.log(i, j);
}
}break 與 continue
outerLoop:
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (j == 1) break outerLoop;
console.log(i, j);
}
}JavaScript 方法與內建物件
方法是附屬於物件的函式，用於執行特定動作。JavaScript 提供多種內建物件與方法，協助處理數學、日期、陣列等常見需求。
方法定義與使用
var dog = {
name: "Marley",
bark: function() {
console.log("Woof!");
}
};
dog.bark();Math 物件
Math.PI：3.14159Math.abs(-5)：5Math.pow(2, 3)：8Math.random()：0~1 間隨機數
Date 物件
var date = new Date();
date.setFullYear(2020, 5, 25);
date.getDate(); // 25陣列方法
.pop()：移除最後一項.sort()：排序JavaScript 函式與方法
函式是可重複使用的程式碼區塊，可提升程式的可讀性與維護性。
函式定義與呼叫
function greet(name) { return "Hello, " + name + "!"; } greet("Alice"); // "Hello, Alice!"參數與預設值
function message(name = "anonymous", msg = "Default message") { return name + ": " + msg; } message(); // "anonymous: Default message"區域變數與回傳值
function add(a, b) { return a + b; } var sum = add(3, 5); // 8函式提升（Hoisting）
sayHi(); // "Hi!" function sayHi() { console.log("Hi!"); }遞迴（Recursion）
function countdown(x) { if (x > 0) { console.log(x); countdown(x - 1); } } countdown(5); // 5, 4, 3, 2, 1方法與 this
var person = { firstName: "Joe", lastName: "Schmoe", introduce() { return "I'm " + this.firstName + " " + this.lastName + "."; } }; person.introduce(); // "I'm Joe Schmoe."JavaScript 錯誤處理與除錯
錯誤處理與除錯是 JavaScript 開發中不可或缺的技能，能協助開發者排除程式問題。
錯誤類型
- 語法錯誤：拼寫錯誤或語法不正確
- 執行錯誤：程式執行時發生錯誤
- 邏輯錯誤：程式執行但結果不正確
錯誤訊息類型
類型 說明 ReferenceError 參照未定義變數 SyntaxError 語法錯誤 RangeError 數值超出範圍 TypeError 操作錯誤型別 try...catch...finally 範例
try { var x = 123; x.toUpperCase(); } catch (e) { console.log("錯誤類型：" + e.name); console.log("錯誤訊息：" + e.message); } finally { console.log("程式結束"); }throw 自訂錯誤
throw new Error("無效輸入");JavaScript 語言總複習
JavaScript 是網頁行為控制的核心語言，廣泛應用於前端與後端開發。
資料型別與語法
- 字串、數字、布林值、未定義、空值、物件、陣列
typeof()可檢查型別
變數與運算
var x = 10; x += 5; // 15 x === "10"; // false條件與迴圈
if (score >= 80) { result = "merit"; } for (let i = 0; i < 5; i++) { console.log(i); }物件與陣列
var dog = { name: "Marley", bark() { return "Woof!"; } }; var food = ["Rice", "Chicken"]; food.push("Fish");字串與轉型
"key".charAt(2); // "y" String(123); // "123"註解與除錯
// 單行註解 /* 多行註解 */