⚡
JavaScript 入門教學
讓網頁動起來，變得可以互動！
什麼是 JavaScript？
JavaScript（簡稱 JS）是一種程式語言， 用來讓網頁變得可以互動！
💡 用遊樂園來比喻
如果 HTML 是遊樂園的設施（旋轉木馬、雲霄飛車），
CSS 是設施的外觀（顏色、裝飾），
那 JavaScript 就是讓設施動起來的電力！⚡
沒有 JavaScript，遊樂設施就只是靜態的裝飾品！
JavaScript 可以做到：
- 🖱️ 回應使用者動作：點擊按鈕、滑鼠移動
- ✨ 改變網頁內容：更新文字、顯示/隱藏元素
- 🎮 製作互動效果：動畫、遊戲、表單驗證
- 📡 和伺服器溝通：載入資料、送出表單
JavaScript 基本概念
變數 Variable
用來儲存資料的容器，像是一個箱子
函式 Function
把一段程式碼包起來，可以重複使用
條件判斷 If
根據條件決定要做什麼事
迴圈 Loop
重複執行某段程式碼
寫第一個程式！
讓我們從最簡單的程式開始：在畫面上顯示一段文字！
方法一：使用 alert() 彈出視窗
alert("哈囉！歡迎來到 JavaScript 的世界！");
// alert() 會彈出一個對話框
方法二：使用 console.log() 顯示在主控台
console.log("這行文字會顯示在開發者工具的主控台");
// 按 F12 打開開發者工具，切到 Console 標籤就能看到
> 這行文字會顯示在開發者工具的主控台
方法三：改變網頁內容
// 先在 HTML 放一個元素
<p id="demo">這是原本的文字</p>
// 用 JavaScript 改變它的內容
document.getElementById("demo").innerHTML = "文字被 JavaScript 改變了！";
互動體驗：按鈕點擊
點擊下面的按鈕，看看 JavaScript 的威力！
等待點擊...
這個按鈕的程式碼：
// HTML 按鈕
<button onclick="sayHello()">點我打招呼</button>
// JavaScript 函式
function sayHello() {
document.getElementById("greetingResult").innerHTML = "👋 哈囉！你好啊！";
}
互動體驗：計數器
這是一個簡單的計數器，可以加減數字：
0
計數器的程式碼：
// 宣告一個變數來儲存數字
let count = 0;
// 增加數字的函式
function increaseCount() {
count = count + 1; // 數字 +1
document.getElementById("countDisplay").innerHTML = count;
}
// 減少數字的函式
function decreaseCount() {
count = count - 1; // 數字 -1
document.getElementById("countDisplay").innerHTML = count;
}
互動體驗：個人化問候
輸入你的名字，JavaScript 會跟你打招呼：
你的名字會顯示在這裡...
這個功能的程式碼：
function greetByName() {
// 取得輸入框的內容
let name = document.getElementById("nameInput").value;
// 判斷有沒有輸入名字
if (name === "") {
alert("請輸入你的名字！");
} else {
document.getElementById("personalGreeting").innerHTML =
"🎉 歡迎你，" + name + "！很高興認識你！";
}
}