JavaScript小弟 - 詳細教學

⚡ JavaScript小弟是誰？

💻 程式設計師

JavaScript就像程式設計師，負責讓網頁「活起來」！點擊按鈕、動畫效果、資料處理，全都靠JavaScript！

🎯 事件驅動

JavaScript透過「事件」與使用者互動，像是點擊、滑鼠移動、鍵盤輸入等，讓網頁變得智慧。

🚀 動態功能

可以改變HTML內容、修改CSS樣式、處理表單、發送請求，讓靜態網頁變成動態應用！

📝 JavaScript基本語法

// 變數宣告
let name = "小明";
const age = 16;
var school = "台北高中";

// 函數定義
function sayHello(name) {
    return "你好，" + name + "！";
}

// 呼叫函數
let greeting = sayHello("小華");
console.log(greeting); // 輸出：你好，小華！

🎯 試試看！點擊按鈕執行JavaScript

這裡的文字會被JavaScript改變！

📚 JavaScript語法教學

🔢 資料型態

字串 (String)

文字資料："Hello World"

數字 (Number)

數值資料：42, 3.14

布林 (Boolean)

真假值：true, false

陣列 (Array)

資料集合：[1, 2, 3, 4]

物件 (Object)

資料結構：{name: "小明", age: 16}

函數 (Function)

功能模組：function() { }

🔄 控制結構

// 條件判斷
if (age >= 18) {
    console.log("你是成人了！");
} else if (age >= 13) {
    console.log("你是青少年！");
} else {
    console.log("你還是小孩！");
}

// 迴圈
for (let i = 1; i <= 5; i++) {
    console.log("第" + i + "次迴圈");
}

// 陣列迴圈
let fruits = ["蘋果", "香蕉", "橘子"];
fruits.forEach(function(fruit) {
    console.log("我喜歡吃" + fruit);
});

🎯 迴圈示範

點擊按鈕看看迴圈的效果：

🎭 DOM操作 - 控制網頁元素

DOM (Document Object Model) 是JavaScript控制網頁的關鍵技術！

// 選取元素
let element = document.getElementById("myElement");
let elements = document.querySelectorAll(".myClass");

// 改變內容
element.innerHTML = "新的內容";
element.textContent = "純文字內容";

// 改變樣式
element.style.color = "red";
element.style.fontSize = "20px";

// 新增事件監聽器
element.addEventListener("click", function() {
    alert("元素被點擊了！");
});

// 新增/移除CSS類別
element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("highlight");

🎯 DOM操作示範

這個區塊會被JavaScript控制！

🚀 實作專案

🧮 專案一：簡易計算機

用JavaScript製作一個功能完整的計算機：

0

⭕ 專案二：井字遊戲

經典的井字遊戲，兩人對戰：

井字遊戲

輪到 X 下棋

📝 專案三：待辦事項清單

實用的待辦事項管理工具：

我的待辦事項

💡 JavaScript小弟的程式秘訣

🧠 邏輯思維

先想清楚流程再寫程式
將複雜問題分解成小步驟
多練習條件判斷和迴圈
學會除錯和測試

⚡ 效能優化

避免全域變數濫用
適當使用事件委派
減少DOM操作次數
使用現代ES6+語法

🛠️ 最佳實踐

保持程式碼簡潔易讀
適當添加註解說明
使用有意義的變數名稱
遵循一致的程式風格

⚡ JavaScript小弟的互動程式課堂