JavaScript cơ bản Bài 2: Cài đặt môi trường (VS Code, Chrome DevTools) & Chạy dòng code đầu tiên

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

Biết cách cài đặt và sử dụng công cụ lập trình phổ biến nhất hiện nay: VS Code.
Biết cách sử dụng Chrome DevTools (Console) để chạy thử code nhanh chóng.
Hiểu cách kết nối file JavaScript (.js) vào trang web HTML và chạy dòng code đầu tiên thành công.

2. Nội dung chi tiết (Script / Outline)

Phần 1: Giới thiệu bộ công cụ của lập trình viên Front-end

Để làm việc với JavaScript trên web, chúng ta chỉ cần 2 công cụ cốt lõi:

Nơi viết code (Code Editor): Visual Studio Code (VS Code). Đây là phần mềm miễn phí, nhẹ, hỗ trợ cực tốt cho lập trình web nhờ hàng loạt extension (tiện ích mở rộng).
Nơi chạy code: Trình duyệt web (Google Chrome, Microsoft Edge, Firefox...). Mọi trình duyệt hiện đại đều có sẵn một bộ công cụ gọi là Developer Tools (DevTools), trong đó có phần Console sinh ra để chạy thử JavaScript.

Phần 2: Làm quen nhanh với Chrome DevTools (Chạy code ngay lập tức)

Trước khi cài đặt phần mềm, chúng ta có thể thử nghiệm ngay trên trình duyệt có sẵn:

Cách mở: Mở trình duyệt Chrome, nhấn phím F12 (hoặc chuột phải chọn Inspect / Kiểm tra), sau đó chọn tab Console.
Thực hành:
- Gõ thử dòng lệnh: console.log("Hello World!"); và nhấn Enter.
- Thử làm phép tính đơn giản: 10 + 5 hoặc 20 * 3.
- Gõ hàm thông báo: alert("Chào mừng bạn đến với JS!");

Phần 3: Cài đặt VS Code và Extension "thần thánh"

Bước 1: Tải và cài đặt VS Code từ trang chủ (code.visualstudio.com).
Bước 2: Cài đặt extension hỗ trợ để việc viết code nhẹ nhàng hơn:
- Live Server: Giúp tự động cập nhật (reload) trang web mỗi khi bạn bấm lưu file (Ctrl + S), không cần phải bấm F5 thủ công nữa.
- Prettier - Code formatter: Giúp tự động làm đẹp và căn chỉnh lề code cho gọn gàng.
- JavaScript (ES6) code snippets: Hỗ trợ gợi ý cú pháp nhanh.

Phần 4: Viết file JavaScript thực tế đầu tiên

Bây giờ chúng ta sẽ tạo một dự án (project) mini đầu tiên trên máy tính:

Tạo thư mục: Tạo một thư mục mới trên máy tính đặt tên là js-co-ban.
Mở bằng VS Code: Kéo thư mục đó vào VS Code (hoặc chọn File > Open Folder).
Tạo 2 file:
- File index.html (chứa giao diện).
- File app.js (chứa code JavaScript).

Viết nội dung cho file index.html:

HTML

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Bài 2 - JavaScript Đầu Tiên</title>
</head>
<body>
    <h1>Xin chào thế giới JavaScript!</h1>

    <!-- Nhúng file JavaScript vào HTML -->
    <script src="app.js"></script>
</body>
</html>

Viết nội dung cho file app.js:

JavaScript

console.log("Tôi đang chạy file app.js thành công!");
alert("Code JS bên trong file app.js đã hoạt động!");

Chạy thử: Click chuột phải vào file index.html chọn Open with Live Server. Bạn sẽ thấy trang web hiện lên, bảng thông báo alert xuất hiện, và khi mở F12 > Console sẽ thấy dòng chữ thông báo từ app.js.

3. Tổng kết & Bài tập nhỏ cho học viên

Key takeaway:
- Dùng VS Code để viết và lưu trữ mã nguồn.
- Dùng Console (trên VS Code hoặc trình duyệt) để gỡ lỗi và kiểm tra kết quả.
- Dùng thẻ <script src="..."></script> để kết nối file JS vào HTML.
Thử thách tại nhà: Tạo thành công thư mục dự án gồm 2 file index.html và app.js, sau đó in ra console tên và sở thích của bạn bằng lệnh console.log().

Bạn thấy bài 2 này đã đủ chi tiết và dễ hiểu chưa? Khi nào bạn sẵn sàng, chúng ta chuyển sang Bài 3 (Biến: Khái niệm let, const, var) nhé!

Array JavaScript