Buổi 08: JavaScript — Siêu Năng Lực Cho Website ⚡

Thành quả: Thêm 3 tính năng interactive vào trang Profile: Dark Mode, Counter, Animation!

---

🎯 Mục tiêu buổi học

1. Hiểu JavaScript làm gì (làm website "sống")
2. Biết 5 khái niệm cốt lõi: Variable, Function, Event, Condition, DOM
3. Thêm interactivity cho website
4. Hiểu cách debug khi JS bị lỗi
5. Liên hệ cm-debugging trong CodyMaster

---

📖 Phần 1: JavaScript = Bộ Não

Vai trò

HTML = Bộ xương    → CẤU TRÚC (cái gì ở đâu)
CSS  = Quần áo     → HÌNH THỨC (trông như thế nào)
JS   = Bộ não      → HÀNH ĐỘNG (làm gì khi click/hover/scroll)

Ví dụ thực tế

Không có JS ❌	Có JS ✅
Nhấn nút → không có gì	Nhấn nút → popup "Xin chào!"
Trang web tĩnh, chán	Trang web động, thú vị
Form gửi → reload	Form gửi → loading + thành công
Dark/Light mode? Không	Click switch = theme thay đổi

---

📖 Phần 2: 5 Khái Niệm Cốt Lõi

2.1 Variable (Biến) 📦

Variable = hộp chứa đồ. Đặt tên hộp → bỏ đồ vào.

// Khai báo biến
let ten = "Minh";           // Text (chuỗi)
let tuoi = 15;              // Số
let dangHoc = true;         // Đúng/Sai
let skills = ["HTML", "CSS", "JS"];  // Danh sách

// Dùng biến
console.log("Tên: " + ten);        // "Tên: Minh"
console.log("Tuổi: " + tuoi);      // "Tuổi: 15"

💡 let = hộp có thể thay đổi. const = hộp bị khóa (không đổi được).

2.2 Function (Hàm) 🎰

Function = máy bán nước tự động. Bỏ tiền vào (input) → ra nước (output).

// Tạo function
function chaoMung(ten) {
    return "Xin chào, " + ten + "! 🎉";
}

// Gọi function
let loiChao = chaoMung("Minh");
console.log(loiChao);  // "Xin chào, Minh! 🎉"

// Function tính tuổi
function tinhTuoi(namSinh) {
    return 2026 - namSinh;
}
console.log(tinhTuoi(2010));  // 16

2.3 Event (Sự kiện) 🎯

Event = chuông cửa. Ai đó bấm chuông → bạn ra mở cửa!

// Khi click nút → hiện thông báo
let nutBam = document.getElementById("myButton");
nutBam.addEventListener("click", function() {
    alert("Bạn vừa click! 🎉");
});

// Khi hover → đổi màu
nutBam.addEventListener("mouseover", function() {
    nutBam.style.background = "red";
});

Các event phổ biến:

Event	Khi nào	Ví dụ
click	Click chuột	Nút bấm, link
mouseover	Rê chuột vào	Hover effect
keydown	Nhấn phím	Phím tắt
submit	Gửi form	Đăng ký, đăng nhập
scroll	Cuộn trang	Hiệu ứng parallax

2.4 Condition (Điều kiện) 🚦

Condition = đèn giao thông. Đỏ → dừng. Xanh → đi.

let diem = 85;

if (diem >= 90) {
    console.log("Xuất sắc! 🌟");
} else if (diem >= 70) {
    console.log("Giỏi! 👍");     // ← Đoạn này chạy (85 >= 70)
} else {
    console.log("Cần cố gắng 💪");
}

2.5 DOM (Document Object Model) 🌳

DOM = bản đồ của trang web. JS dùng DOM để tìm và thay đổi elements.

// Tìm element
let tieuDe = document.getElementById("title");       // Tìm bằng ID
let cards = document.querySelectorAll(".card");       // Tìm tất cả class

// Thay đổi nội dung
tieuDe.textContent = "Tiêu đề mới!";                // Thay text
tieuDe.style.color = "red";                           // Thay màu
tieuDe.classList.add("highlight");                    // Thêm class

---

📖 Phần 3: Thực Hành — 3 Tính Năng

Tính năng 1: Dark Mode Toggle 🌙

<button id="toggleTheme" onclick="toggleDarkMode()">🌙 Dark Mode</button>

<script>
function toggleDarkMode() {
    document.body.classList.toggle("dark");
    let btn = document.getElementById("toggleTheme");
    if (document.body.classList.contains("dark")) {
        btn.textContent = "☀️ Light Mode";
    } else {
        btn.textContent = "🌙 Dark Mode";
    }
}
</script>

<style>
body.dark {
    background: #1a1a2e;
    color: #eee;
}
body.dark .card {
    background: #16213e;
}
</style>

Tính năng 2: Like Counter ❤️

<button id="likeBtn" onclick="tangLike()">❤️ <span id="count">0</span></button>

<script>
let soLike = 0;
function tangLike() {
    soLike++;
    document.getElementById("count").textContent = soLike;
    // Hiệu ứng nảy
    let btn = document.getElementById("likeBtn");
    btn.style.transform = "scale(1.2)";
    setTimeout(() => { btn.style.transform = "scale(1)"; }, 200);
}
</script>

Tính năng 3: Typing Animation ⌨️

<h1 id="typing"></h1>

<script>
let text = "Xin chào, tôi là VibeCoder! 🚀";
let i = 0;

function typeWriter() {
    if (i < text.length) {
        document.getElementById("typing").textContent += text.charAt(i);
        i++;
        setTimeout(typeWriter, 100);  // 100ms mỗi ký tự
    }
}
typeWriter();  // Bắt đầu animation
</script>

---

📖 Phần 4: Debug — Tìm và Sửa Lỗi

Console — Bạn thân của Developer

Nhấn F12 → Tab "Console" → Xem lỗi ở đây!

3 cách debug:

// 1. console.log — in giá trị ra Console
console.log("Giá trị biến:", myVariable);

// 2. debugger — dừng code tại dòng này
debugger;

// 3. try-catch — bắt lỗi không crash
try {
    // code có thể lỗi
} catch (error) {
    console.log("Lỗi:", error.message);
}

cm-debugging trong CodyMaster

Skill này dạy: KHÔNG sửa ngẫu nhiên. Tìm GỐC RỄ trước!

1. Reproduce → Tái hiện lỗi
2. Isolate → Thu hẹp phạm vi
3. Identify → Tìm nguyên nhân gốc
4. Fix → Sửa đúng chỗ
5. Verify → Kiểm tra đã hết lỗi

---

🎓 Tóm tắt

Khái niệm	Ví von	Code
Variable	Hộp chứa đồ	let x = 10;
Function	Máy bán nước	function add(a,b) { return a+b; }
Event	Chuông cửa	btn.addEventListener("click", ...)
Condition	Đèn giao thông	if (x > 5) { ... }
DOM	Bản đồ web	document.getElementById("id")

---

⏭️ Buổi tiếp theo

Buổi 09: Dự Án Thật — Landing Page Hoàn Chỉnh 🌐

Bạn sẽ kết hợp mọi thứ đã học để tạo 1 Landing Page sản phẩm thật!