JavaScript 速查表

編寫頁面內 JavaScript

要在 HTML 文件中新增頁面內 JavaScript，請使用以下指令碼標籤 -

<script type="text/javascript">
// Write your JavaScript code here
</script>

插入外部 JavaScript 檔案

您可以使用 HTML 的 <script> 標籤在 HTML 文件中插入外部 JavaScript 檔案，方法是使用 src 屬性指定檔案路徑。

<script src="file.js"></script>

列印/輸出

JavaScript 提供三種在螢幕上列印任何內容的方法。

控制檯輸出
警告框
文件寫入

控制檯輸出 (console.log())

console.log() 在 Web 控制檯中列印。它用於除錯和記錄目的。

console.log("Hello, World!");

警告框

JavaScript alert() 方法在瀏覽器上顯示一個彈出警告框，其中包含指定的訊息，例如文字、變數的值等。

alert("Hello World!");
var x = 10;
alert("Value of x is :" + x);

document.write()

document.write() 方法用於將內容直接寫入 HTML 文件。

document.write("Hello World!");
var x = 10;
document.write("Value of x is :", x);

變數

JavaScript 變數可以使用 var、 let 或 const 關鍵字宣告。

var - 宣告函式作用域變數，這些變數可以重新賦值。
let - 宣告塊作用域變數，這些變數可以重新賦值。
const - 宣告常量，其值不能重新賦值。

var x = 5; 
let y = 10; 
const z = 15;

資料型別

JavaScript 資料型別可以分為以下兩類 -

1. 基本型別

基本資料型別為：String、Number、Boolean、Undefined、Null、Symbol、BigInt

2. 物件型別

物件資料型別為：{}、陣列 []、函式 () => {}

let str = "Kelly Hu"; 
let num = 123; 
let bool = true; 
let und = undefined; 
let n = null;

運算子

以下是 JavaScript 運算子 -

算術運算子

算術運算子為：+、-、*、/、%、++、--

let a = 10;
let b = 3;
console.log("a =", a, ", b =", b);

// Addition (+)
let sum = a + b;
console.log("a + b =", sum);
// Subtraction (-)
let difference = a - b;
console.log("a - b =", difference);
// Multiplication (*)
let product = a * b;
console.log("a * b =", product);
// Division (/)
let quotient = a / b;
console.log("a / b =", quotient);
// Modulus (remainder) (%)
let remainder = a % b;
console.log("a % b =", remainder);
// Increment (++)
a++;
console.log("After a++:", a);
// Decrement (--)
b--;
console.log("After b--:", b);

賦值運算子

賦值運算子為：=、+=、-=、*=、/=

let x = 10;
console.log("x:", x);
x = 5;
console.log("x:", x);
x += 3;
console.log("x:", x);
x -= 2;
console.log("x:", x);
x *= 4;
console.log("x:", x);
x /= 6;
console.log("x:", x);
x %= 3;
console.log("x:", x);

比較運算子

比較運算子為：==、===、!=、!==、>、<、>=、<=

let x = 5;
let y = "5";
let z = 10;

console.log(x == y); 
console.log(x === y);
console.log(x != z);
console.log(x !== y);
console.log(z > x);
console.log(x < z);
console.log(z >= 10);
console.log(x <= 5);

邏輯運算子

邏輯運算子為：&&（與）、||（或）和!（非）

let a = true;
let b = false;
let c = 5;
let d = 10;

console.log(a && c < d);
console.log(b && c < d);
console.log(a || b);
console.log(b || d < c);
console.log(!a);
console.log(!b);

條件語句

JavaScript 條件語句包含不同型別的 if-else 語句和三元運算子。

If else 語句

if-else 語句的語法為 -

if (condition) {
   // block of code
} else if (condition) {
   // block of code
} else {
   // block of code
}

以下是 if-else 語句的示例 -

let age = 20;

if (age < 18) {
   console.log("You are a minor.");
} else if (age >= 18 && age < 65) {
   console.log("You are an adult.");
} else {
   console.log("You are a senior citizen.");
}

三元運算子

三元運算子是簡單 if else 語句的替代方案。以下是三元運算子的語法：

let result = condition ? 'value1' : 'value2';

三元運算子的示例如下：

let age = 20;

let message = age < 18 
   ? "You are a minor." 
   : age >= 18 && age < 65 
   ? "You are an adult." 
   : "You are a senior citizen.";

console.log(message);

迴圈

JavaScript 迴圈包括：

for 迴圈
while 迴圈
do-while 迴圈

for 迴圈

for 迴圈是一種入口控制迴圈。

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

while 迴圈

while 迴圈也是一種入口控制迴圈，在執行迴圈體之前檢查條件。

let i = 0;
while (i < 5) {
   console.log(i);
   i++;
}

do-while 迴圈是一種出口控制迴圈，在執行迴圈體之後檢查條件。

let i=0;
do {
   console.log(i);
   i++;
} while (i < 5);

函式

JavaScript 函式是用於執行特定任務的程式碼塊。

使用者定義函式

以下是一個用於新增兩個數字的函式示例：

// Function Declaration
function addNumbers(a, b) {
   return a + b;  // Return the sum of a and b
}

// Example usage
let sum = addNumbers(5, 10);
console.log("The sum is:", sum);  // The sum is: 15

函式表示式

函式表示式的語法如下：

const multiply = function(a, b) {
   return a * b;
}

箭頭函式

JavaScript 箭頭函式用於編寫函式表示式。

以下是一個建立箭頭函式的簡單語句：

const divide = (a, b) => a / b;

新增兩個數字的箭頭函式示例：

// Arrow function
const addNumbers = (a, b) => a + b;
// Calling
let sum = addNumbers(5, 10);
console.log("The sum is:", sum);

物件

JavaScript 物件是鍵值對的集合，用於儲存不同型別的資料，包括其他物件、函式、陣列和原始值。

以下是在 JS 中建立物件的示例：

const person = {
   name: "Kelly Hu",
   age: 27,
   display: function() {
      console.log("Hello, " + this.name);
   }
};

console.log(person.name);  // Access property
person.display();            // Call method

陣列

JavaScript 陣列在單個變數中儲存任何型別的多個值。

陣列宣告

宣告陣列的語法為：

let array_name = [value1, value2, value3, …];

陣列示例

以下是如何建立整數陣列的示例。

let arr = [10, 20, 30, 40, 50];
// Printing array
console.log("arr:", arr);

陣列方法

常用的陣列方法包括：

push() - 用於向陣列中新增一個或多個元素。
pop() - 用於刪除最後一個元素並返回已刪除的元素。
shift() - 用於刪除第一個元素並返回已刪除的元素。
unshift() - 用於在陣列開頭新增一個或多個元素。
concat() - 用於新增一個或多個數組並返回一個新陣列。
join() - 用於將陣列的所有元素連線成一個字串。

以下是一個演示所有上述方法的示例：

// Initialize the original array
let students = ["Kelly Hu", "Peter", "John"];
// push()
students.push("Bobby", "Catty");
console.log(students); 
// pop()
console.log("Removed :", students.pop()); 
// shift()
console.log("Removed :", students.shift()); 
// unshift()
students.unshift("Julia", "Halle");
console.log(students); 
// concat()
const newNames = ["Emma", "Reese"];
const newArray = students.concat(newNames);
console.log("After concat:", newArray); 
// join()
const str = students.join(", ");
console.log("Joined string:", str);

遍歷陣列元素

可以使用 forEach() 方法遍歷所有陣列元素：

var arr = [10, 20, 30, 40, 50]
arr.forEach((item) => console.log(item));

DOM 操作

JavaScript DOM 操作允許您動態地操作網頁的內容和結構。

let element = document.getElementById('myElement');
element.innerHTML = 'New Content';  // Change content
element.style.color = 'red';        // Change style
document.querySelector('.class');   // Select by class

事件監聽器

JavaScript 事件監聽器允許您在響應各種使用者操作（例如點選、按鍵、滑鼠移動等）時執行程式碼。

以下是一個按鈕點選事件的示例：

element.addEventListener('click', function() {
  alert('Clicked!');
});

Promise

JavaScript Promise 表示可能現在、將來或永遠不可用的值。

// Promises
let promise = new Promise((resolve, reject) => {
   // asynchronous code
   if (success) resolve('Success');
   else reject('Error');
});

promise.then(result => console.log(result)).catch(err => console.log(err));

Async/Await

JavaScript Async/Await 用於處理非同步操作。

以下是一個 Async/Await 的示例：

async function fetchData() {
   try {
      let response = await fetch('url');
      let data = await response.json();
      console.log(data);
   } catch (error) {
      console.log(error);
   }
}

錯誤處理

JavaScript 錯誤處理允許您處理執行時發生的錯誤/異常。try、catch 和 finally 塊用於處理異常。

錯誤處理的語法為：

try {
   // Code that may throw an error
} catch (error) {
   console.log(error.message);  // Handle the error
} finally {
   console.log("Finally block executed");
}

以下是一個簡單的示例，演示了在 JavaScript 中使用 try、catch 和 finally：

function divideNumbers(num1, num2) {
   try {
      if (num2 === 0) {
         throw new Error("Cannot divide by zero!");
      }
      const result = num1 / num2;
      console.log(`Result: ${result}`);
   } catch (error) {
      console.error("Error:", error.message);
   } finally {
      console.log("Execution completed.");
   }
}

// Calling 
divideNumbers(10, 2);
divideNumbers(10, 0);

列印頁面