JavaScript 基礎

JavaScript 基礎入門教材

1. JavaScript 是什麼？

JavaScript 是一種運行在網頁上的腳本語言，用於讓網頁變得更具互動性。透過 JavaScript，我們可以操作網頁的內容、樣式，並處理使用者的輸入。

2. 如何在網頁中使用 JavaScript？

在 HTML 文件中，我們可以透過 <script> 標籤來嵌入 JavaScript 程式碼。將程式碼寫在 <script> 標籤中，或是連結到外部的 JavaScript 文件。

範例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 基本範例</title>
</head>
<body>
    <h1>歡迎來到 JavaScript 教材</h1>

    <script>
        alert('Hello, World!');
    </script>
</body>
</html>

這段程式會在網頁打開時彈出一個對話框，顯示 "Hello, World!"。

3. 變數與資料型別

JavaScript 中的變數用來儲存資料，可以使用 var、let 或 const 關鍵字來定義變數。

變數範例：

var name = 'Alice';   // 使用 var 定義變數
let age = 25;         // 使用 let 定義變數
const isStudent = true; // 使用 const 定義不可變變數

字串 (String): var greeting = 'Hello';
數字 (Number): var score = 90;
布林值 (Boolean): var isTrue = false;

4. 基本運算

JavaScript 支援數學運算符號，像是加法、減法、乘法、除法等。

運算符範例：

let a = 10;
let b = 5;

let sum = a + b; // 加法
let difference = a - b; // 減法
let product = a * b; // 乘法
let quotient = a / b; // 除法

5. 條件判斷 (if-else)

條件判斷用來執行某些情況下的程式碼。使用 if、else if 和 else 來實現。

範例：

let score = 85;

if (score >= 90) {
    console.log('成績優異');
} else if (score >= 60) {
    console.log('成績合格');
} else {
    console.log('成績不合格');
}

6. 迴圈 (Loop)

迴圈用來重複執行一段程式碼，直到條件不再滿足。最常用的迴圈是 for 和 while。

for 迴圈範例：

for (let i = 0; i < 5; i++) {
    console.log('這是第 ' + i + ' 次迴圈');
}

7. 函數 (Function)

函數是一段可以重複使用的程式碼。定義函數的方式如下：

函數範例：

function greet(name) {
    return 'Hello, ' + name + '!';
}

let message = greet('Alice');
console.log(message); // 輸出 'Hello, Alice!'

8. DOM 操作

DOM (Document Object Model) 是網頁的結構，我們可以使用 JavaScript 操作網頁上的元素。

範例：改變元素的文字內容

// 假設 HTML 中有 <p id="text">這是原始文字</p>
document.getElementById('text').textContent = '這是新的文字';

9. 事件處理

事件處理可以讓我們監聽和回應使用者的動作，如點擊、輸入等。

範例：按鈕點擊事件

<button id="myButton">點擊我</button>

<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('按鈕被點擊了！');
    });
</script>

10. 總結

變數：用來儲存資料 (字串、數字、布林值)。
條件判斷：根據條件執行不同的程式碼。
迴圈：重複執行程式碼。
函數：封裝重複使用的邏輯。
DOM 操作：控制網頁的元素和內容。
事件處理：監聽和回應使用者行為。

這是 JavaScript 的基本概念，了解了這些內容之後，您就可以開始撰寫自己的互動式網頁程式了！

JavaScript