Cẩm Nang JavaScript Cơ Bản (Tương Tác Web)

Phần 1

Biến (Variables) và Kiểu dữ liệu

JavaScript dùng từ khóa let hoặc const để lưu trữ dữ liệu (giống như những chiếc hộp chứa đồ có dán nhãn).

// Khai báo biến lưu tên và tuổi
let tenNguoiDung = "Nguyễn Văn A";
const tuoi = 25;

// In kết quả ra bảng điều khiển console của trình duyệt
console.log("Xin chào: " + tenNguoiDung);

Phần 2

Hàm (Functions) và Sự kiện (Events)

Hàm là một tập hợp các câu lệnh thực hiện một nhiệm vụ cụ thể. Nó thường được kích hoạt thông qua các hành động của người dùng như bấm nút (click).

// Định nghĩa hàm chào mừng
function thongBaoChaoMung() {
    alert("Chào mừng bạn đến với khóa học lập trình Web!");
}

Khu vực thử nghiệm tương tác thực tế

Phần 3

Thao tác với DOM (Thay đổi nội dung trang web trực tiếp)

DOM (Document Object Model) cho phép JavaScript đọc và thay đổi bất kỳ nội dung, màu sắc hoặc hình ảnh nào trên trang HTML mà không cần tải lại trang.

// Đoạn mã thay đổi chữ và màu sắc của một thẻ khi được gọi
function thayDoiNoiDung() {
    const theTieuDe = document.getElementById("output-text");
    theTieuDe.innerText = "🎉 Chúc mừng! Bạn vừa thay đổi nội dung trang web bằng JavaScript thành công!";
}

Khu vực thử nghiệm thay đổi DOM

Chờ bấm nút để thay đổi nội dung ở đây...

Phần 4

Câu lệnh điều kiện (If / Else)

Giúp chương trình có khả năng "tư duy" và đưa ra các quyết định xử lý khác nhau dựa trên tình huống thực tế.

let diemSo = 8;

if (diemSo >= 5) {
    console.log("Bạn đã vượt qua bài kiểm tra!");
} else {
    console.log("Bạn cần cố gắng ôn tập thêm nhé.");
}