Bài 1. Giới thiệu và môi trường

Khái niệm và lý thuyết

Một trang web gồm ba lớp: HTML mô tả cấu trúc và nội dung, CSS mô tả giao diện, JavaScript mô tả hành vi. Khi trình duyệt tải trang, nó dựng HTML thành một cây đối tượng gọi là DOM; JavaScript có thể đọc và sửa cây này nên trang thay đổi mà không cần tải lại.

JavaScript chạy bên trong công cụ JavaScript của trình duyệt (V8 trong Chrome). Node.js đưa cùng công cụ đó ra ngoài trình duyệt, nên cùng một ngôn ngữ dùng được cho cả giao diện lẫn máy chủ.

Ngôn ngữ được chuẩn hóa dưới tên ECMAScript, mỗi năm một bản. Từ ES6 (2015) JavaScript có let/const, hàm mũi tên, lớp, mô-đun, Promise. Khi tìm tài liệu hãy ưu tiên nội dung viết sau 2018 để tránh cách viết cũ.

Vai trò trong trang web

Chạy thử trong Console

Mở trình duyệt, nhấn F12, chọn thẻ Console và gõ:

console.log("Xin chào JavaScript!");
2 + 3 * 4;
alert("Chào bạn");

Nhúng vào trang HTML

<!DOCTYPE html>
<html lang="vi">
<body>
  <h1 id="tieu-de">Xin chào</h1>
  <button id="nut">Bấm vào tôi</button>
  <script src="/app.js"></script>
</body>
</html>

// app.js
document.getElementById("nut").onclick = () => {
  document.getElementById("tieu-de").textContent = "Bạn vừa bấm!";
};

Đặt <script> ở cuối body hoặc dùng thuộc tính defer để mã chạy sau khi trang tải xong.

Chuẩn bị công cụ

JavaScript chạy được ngay trong trình duyệt nên bạn chưa cần cài gì để bắt đầu. Để viết mã thoải mái hơn, hãy cài trình soạn thảo VS Code, và cài thêm Node.js nếu muốn chạy JavaScript ngoài trình duyệt.

Tải Visual Studio Code

Tải Node.js (bản LTS)

Chọn bản LTS (hỗ trợ dài hạn) vì ổn định nhất. Tài liệu tham khảo đáng tin cậy nhất là MDN Web Docs.

Node.js (tùy chọn)

node -v
node ung-dung.js

Cài từ nodejs.org (bản LTS). Node cho phép chạy mã không cần trình duyệt, cần khi học framework, TypeScript.

btn.onclick = () => document.body.classList.toggle("dark");