JavaScript cơ bản Bài 1: JavaScript là gì? Nó làm được những gì trên web?

1. Mục tiêu bài học

Để dễ hình dung nhất cho người mới bắt đầu, hãy tưởng tượng một trang web giống như một ngôi nhà:

HTML (HyperText Markup Language): Giống như phần khung nhà, tường, gạch, cửa (Bộ xương). Không có HTML, trang web chẳng có gì để hiển thị.
CSS (Cascading Style Sheets): Giống như sơn tường, rèm cửa, thiết kế nội thất, màu sắc (Lớp áo trang trí). Giúp ngôi nhà đẹp đẽ và bắt mắt.
JavaScript (JS): Giống như hệ thống điện, nước tự động, cửa cuốn tự động, đèn cảm ứng (Bộ não thông minh). Khi bạn bấm công tắc, đèn bật sáng; khi có trộm, chuông kêu. JavaScript mang lại hành động và sự tương tác.

Định nghĩa: JavaScript là một ngôn ngữ lập trình bậc cao, thông dịch, chạy trực tiếp trên trình duyệt web (Chrome, Firefox, Safari, Edge...).
Lịch sử ngắn gọn: Ra đời năm 1995 chỉ trong vòng 10 ngày bởi Brendan Eich (Netscape). Ban đầu nó chỉ dùng để làm các hiệu ứng đơn giản trên web (như chữ chạy, đổi màu), nhưng ngày nay nó đã phát triển thành một ngôn ngữ toàn năng (có thể làm cả Front-end, Back-end với Node.js, Mobile App, Desktop App...).

Không có JavaScript, các trang web hiện đại sẽ vô cùng nhàm chán (chỉ giống như một tờ báo giấy tĩnh). Nhờ có JS, chúng ta có thể:

Tạo hiệu ứng động & Tương tác giao diện:
- Bấm vào nút "Thêm vào giỏ hàng" -> Số lượng giỏ hàng nhảy lên +1 ngay lập tức mà không cần load lại trang.
- Mở menu dạng dropdown, ẩn/hiện mật khẩu (icon con mắt), modal popup đăng nhập.
Cập nhật dữ liệu ngầm (AJAX / Fetch API):
- Lướt Facebook/TikTok: Kéo xuống dưới là tự động tải thêm bài viết mới (Infinite Scroll).
- Xem thời tiết: Tự động cập nhật nhiệt độ theo thời gian thực mà không cần người dùng bấm F5 tải lại trang.
Xử lý và Kiểm tra form (Form Validation):
- Khi bạn đăng ký tài khoản, nếu quên nhập email hoặc mật khẩu quá ngắn, JS sẽ lập tức báo lỗi đỏ ngay tại ô nhập trước khi dữ liệu được gửi về máy chủ.
Trò chơi (Games) chạy ngay trên trình duyệt:
- Các tựa game web đơn giản như rắn săn mồi, Flappy Bird, hoặc các game 2D/3D phức tạp nhờ WebGL.

Key takeaway (Điểm cốt lõi cần nhớ): HTML là cấu trúc, CSS là giao diện, còn JavaScript là tương tác và logic.
Thử thách tại nhà (Bài tập):
- Mở một trang web bất kỳ bạn thích (ví dụ: YouTube hoặc Shopee).
- Thử bấm chuột phải chọn Inspect (hoặc nhấn F12), chuyển sang tab Console, gõ dòng lệnh này vào và nhấn Enter: alert("Xin chào, tôi vừa hack được trang web này bằng JS!");
- Xem điều gì xảy ra! (Đó chính là sức mạnh của JavaScript chạy trên trình duyệt của bạn).