Loạt bài JavaScript cơ bản · Bài 02/18 — Mục lục học tập

Mục tiêu của bài này là chạy JavaScript trong trang HTML và xác định đúng nơi xem kết quả. Bạn sẽ tạo hai tệp nhỏ, dùng Console để theo dõi và chủ động gây một lỗi để biết cách sửa.

Tạo trang HTML

Tạo thư mục javascript-bai-02. Bên trong, lưu tệp index.html với mã sau:

<!doctype html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JavaScript đầu tiên</title>
  <script src="app.js" defer></script>
</head>
<body>
  <h1>Học JavaScript từng bước</h1>
  <p>Mở Console để xem kết quả.</p>
</body>
</html>

Tạo app.js cùng cấp với index.html. Thuộc tính src là đường dẫn tương đối đến tệp mã. Với script ngoài thông thường ở ví dụ này, defer cho phép trình duyệt tải script trong lúc đọc HTML và thực thi sau khi phân tích xong tài liệu.

// app.js
console.log("Tệp app.js đã chạy");
console.log("Tổng:", 15 + 7);
console.log("Tích:", 6 * 4);

Mở và kiểm tra

1. Mở index.html bằng trình duyệt.
2. Mở Developer Tools bằng menu của trình duyệt, chọn Console.
3. Kiểm tra lời chào, tổng 22 và tích 24.
4. Sửa lời chào trong app.js, lưu tệp rồi tải lại trang.

console.log() ghi thông tin ra Console, không tự thêm nội dung vào phần trang người dùng đang nhìn. Đây là công cụ quan sát dữ liệu trong lúc học và gỡ lỗi. Muốn cập nhật giao diện, bạn sẽ dùng DOM ở các bài sau.

Cú pháp và chú thích

Một câu lệnh mô tả một thao tác. Bộ bài dùng dấu chấm phẩy để kết thúc câu lệnh nhất quán. JavaScript phân biệt chữ hoa và chữ thường: console.log đúng, còn Console.log thường gây ReferenceError. Chú thích // kéo dài đến hết dòng; /* ... */ phù hợp cho nhiều dòng.

Tự tạo lỗi để học cách đọc

Đổi console thành consol rồi tải lại trang. Console báo biến không được định nghĩa. Nhấp tên tệp và số dòng để tìm vị trí, sửa tên rồi chạy lại. Nếu không có bất kỳ log nào, hãy kiểm tra tên app.js, vị trí tệp, thuộc tính src và lỗi tải tài nguyên trong Network.

Bài tập và gợi ý

Viết ba dòng log: tên của bạn, số giờ dự định học mỗi tuần và tổng thời gian trong bốn tuần nếu mỗi tuần học 3 giờ.

console.log("Tên: Minh");
console.log("Mỗi tuần: 3 giờ");
console.log("Bốn tuần:", 3 * 4, "giờ");

Ghi nhớ: sửa mã → lưu tệp → tải lại trang → đọc Console. Giữ quy trình này cho các bài nền tảng tiếp theo.