1. Mục tiêu bài học
Sau bài này, bạn sẽ:
Cài xong các công cụ cơ bản:
Trình duyệt (Chrome hoặc tương đương).
VS Code để viết code.
Node.js (chuẩn bị cho các bài sau).
Tạo được thư mục dự án đầu tiên.
Tạo được file
index.htmlvà filescript.js.Mở trang web và thấy JavaScript chạy thực sự.
2. Các công cụ chúng ta sẽ dùng
Để học theo seri này, bạn chỉ cần:
Trình duyệt hiện đại
Khuyến nghị: Google Chrome.
Nếu bạn đang dùng Edge / Cốc Cốc / Firefox vẫn được, nhưng ví dụ thường sẽ minh họa bằng Chrome.
Visual Studio Code (VS Code)
Đây là trình soạn thảo/code editor rất phổ biến cho lập trình web.
Xem thêm tại: Hướng dẫn sử dụng Visual Studio Code (VS Code) cho người mới bắt đầu
Node.js
Về sau dùng để:
Chạy một số công cụ (như Vite, ESLint…).
Chạy JavaScript ngoài trình duyệt.
Ở những bài đầu, bạn chỉ cần cài, chưa cần hiểu sâu.
3. Cài Chrome (nếu bạn chưa có)
Nếu máy bạn đã có Chrome và đang dùng bình thường → có thể bỏ qua mục này.
Nếu chưa có:
Mở bất kỳ trình duyệt nào bạn đang có.
Tìm “Google Chrome download”.
Vào trang chính thức của Chrome.
Tải về, cài đặt như phần mềm bình thường.
Sau khi cài xong, từ giờ khi học seri này, bạn nên mở web bằng Chrome để thao tác cho đồng nhất.
5. Cài Visual Studio Code
Mở Chrome.
Tìm “Visual Studio Code download”.
Vào trang chính thức của VS Code.
Tải bản phù hợp với hệ điều hành của bạn (Windows / macOS).
Cài đặt theo hướng dẫn mặc định (Next → Next…).
Sau khi cài xong:
Mở VS Code.
Giao diện sẽ hơi nhiều nút, nhưng trong phạm vi seri này, ban đầu bạn chỉ cần để ý:
Thanh bên trái: biểu tượng Explorer (hình hai file chồng lên nhau).
Khu vực chính để mở file code.
Thanh dưới cùng (Status bar) – tạm thời chưa cần quan tâm nhiều.
6. Cài Node.js
Mở Chrome.
Tìm “Node.js download”.
Vào trang chính thức của Node.js.
Chọn bản “LTS” (Long Term Support) – thường được khuyến nghị.
Tải về và cài đặt với thiết lập mặc định.
Kiểm tra nhanh:
Mở Command Prompt (Windows) hoặc Terminal (macOS).
Gõ:
node -v
Nếu thấy hiện ra một phiên bản kiểu như
v18.x.xhoặcv20.x.xlà được.
Ở những bài đầu, bạn chưa cần dùng Node.js trực tiếp; chỉ cần cài để sau này không phải quay lại bước này nữa.
7. Tạo thư mục dự án đầu tiên
Bây giờ chúng ta sẽ chuẩn bị “sân chơi” cho các bài sau:
Ở máy tính, tạo một thư mục (folder) mới, ví dụ:
js-hoc-tu-co-ban
Bên trong đó, tạo tiếp một thư mục con cho chương 0, ví dụ:
chuong-0-gioi-thieu
Trong
chuong-0-gioi-thieu, tạo tiếp thư mục:bai-0-3-setup-moi-truong
Cấu trúc lúc này:
js-hoc-tu-co-ban/
chuong-0-gioi-thieu/
bai-0-3-setup-moi-truong/
Về sau, mỗi bài bạn có thể tạo một thư mục riêng, hoặc gom vài bài vào chung tùy cách tổ chức.
8. Mở thư mục bằng VS Code
Mở VS Code.
Chọn File → Open Folder… (hoặc “Open…” tùy hệ điều hành).
Chọn thư mục:
bai-0-3-setup-moi-truong.Bấm Select Folder (hoặc Open).
Giờ bên trái (Explorer) bạn sẽ thấy thư mục trống, chưa có file nào.
9. Tạo file index.html và script.js
Trong VS Code:
Ở Explorer (cột bên trái), bấm vào biểu tượng New File.
Tạo file đầu tiên:
index.html.Tạo file thứ hai:
script.js.
9.1. Nội dung mẫu cho index.html
Dán nội dung sau vào index.html:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Bài 0.3 - Setup môi trường học JavaScript</title>
</head>
<body>
<h1>Xin chào JavaScript!</h1>
<p>Nếu bạn thấy dòng chữ này, HTML của bạn đã chạy.</p>
<!-- Kết nối file JavaScript -->
<script src="script.js"></script>
</body>
</html>
Ở đây, dòng quan trọng là:
<script src="script.js"></script>Nó nói với trình duyệt:
“Hãy tải và chạy file JavaScript có tên
script.jsnằm cùng thư mục.”
9.2. Nội dung mẫu cho script.js
Dán nội dung sau vào script.js:
console.log("Xin chào, đây là JavaScript đang chạy từ file script.js!");
alert("Chào mừng bạn đến với hành trình học JavaScript!");
// Đổi màu nền nhẹ để bạn thấy có sự khác biệt
document.body.style.backgroundColor = "#f0f4ff";
Giải thích nhanh:
console.log(...): in ra thông báo trong Console (dùng để kiểm tra kết quả).alert(...): hiện một hộp thoại thông báo trên trang.document.body.style.backgroundColor = "...";:Đổi màu nền của trang.
Bạn chưa cần nhớ hết ý nghĩa từng phần, chỉ cần làm được bước này và thấy nó chạy.
10. Mở index.html trong trình duyệt
Có 2 cách đơn giản:
Cách 1 – Mở trực tiếp file
Mở thư mục
bai-0-3-setup-moi-truongtrong File Explorer (Windows) hoặc Finder (macOS).Double click vào
index.html.Trình duyệt (Chrome) sẽ mở file này.
Bạn sẽ thấy:
Dòng chữ: “Xin chào JavaScript!”
Và một hộp thoại nhỏ (alert) hiện lên:
“Chào mừng bạn đến với hành trình học JavaScript!”Màu nền trang hơi xanh nhạt.
Cách 2 – Dùng extension Live Server (tuỳ chọn, bước sau sẽ nói kỹ hơn)
Ở các bài đầu, cách 1 là đủ.
Các bài sau, khi cần tự động reload mỗi lần bạn lưu file, chúng ta sẽ cài Live Server trong VS Code.
11. Kiểm tra Console
Bước này giúp bạn làm quen với việc xem log (rất quan trọng khi học JS):
Ở trang
index.htmlvừa mở trên Chrome:Bấm F12 (hoặc chuột phải → Inspect).
Chọn tab Console.
Bạn sẽ thấy dòng:
Xin chào, đây là JavaScript đang chạy từ file script.js!Nếu thấy dòng đó, tức là:
HTML chạy.
JS chạy.
Liên kết
<script src="script.js"></script>hoạt động đúng.
12. Bài tập nhỏ trong bài 0.3
Bài 1 – Tùy biến thông điệp chào mừng
Mở file script.js và thử:
Thay nội dung trong
alert(...)thành một câu của riêng bạn, ví dụ:
alert("Hôm nay mình bắt đầu nghiêm túc học JavaScript.");
Lưu file (
Ctrl + S).Reload lại trang
index.htmltrên trình duyệt (F5).
Bài 2 – Đổi màu nền
Thử đổi dòng:
document.body.style.backgroundColor = "#f0f4ff";
thành các màu khác, ví dụ:
