Bạn Sẽ Học Gì Trong Khóa JavaScript Này
Tổng quan khóa JavaScript: khác biệt giữa trình duyệt và Node.js, cùng thứ tự học của 4 nhóm bài.
Đây là khóa học miễn phí giúp bạn viết được JavaScript chạy trên trình duyệt ở mức dùng thật trong công việc. Bạn sẽ đi từ phần cơ bản — biến, mảng — sang câu điều kiện, vòng lặp, hàm, rồi tới lập trình hướng đối tượng với class, và kết thúc ở DOM (cơ chế để đọc và ghi các phần tử HTML từ JavaScript) cùng fetch để giao tiếp mạng. Sơ đồ và bài tập sẽ dẫn bạn đi từng bước.
Bài này nói về nơi JavaScript thực sự chạy, và khóa học gồm những gì, học theo thứ tự nào.
Vì Sao Học JavaScript — Trình Duyệt Chạy Nó Trực Tiếp
Bấm một nút thì màn hình đổi. Nội dung vừa gõ được kiểm tra ngay tại chỗ. Dữ liệu sản phẩm lấy về từ server rồi hiện thành danh sách. Mọi chuyển động như vậy trên một trang web đều do JavaScript làm.
JavaScript là ngôn ngữ duy nhất mà trình duyệt web chạy được thẳng từ mã nguồn, nên chỉ cần bạn làm bất cứ thứ gì hiển thị lên giao diện là sẽ phải viết JavaScript.
Node.js (phần mềm để chạy JavaScript bên ngoài trình duyệt) nay cũng được dùng khắp nơi, nên xử lý phía server và các công cụ build đều viết được bằng cùng một ngôn ngữ. Chỉ cần học JavaScript một lần, bạn làm được cả phía giao diện lẫn phía server.
JavaScript Chạy Ở Đâu — Trình Duyệt, Node.js, và Console Của Trang Này
Cùng một đoạn JavaScript nhưng chạy ở đâu thì dùng được những gì lại khác nhau. Bản thân ngôn ngữ — biến, mảng, object, hàm, class — thì chạy ở đâu cũng như nhau.
Thứ thay đổi là những chức năng mà nơi chạy bổ sung thêm. Trình duyệt cho bạn màn hình (DOM) và khả năng lưu dữ liệu ngay trong trình duyệt; Node.js cho bạn đọc ghi file và dựng server. Nắm được khác biệt này, bạn sẽ tìm ra lý do code không chạy nhanh hơn hẳn.
Đoạn code ví dụ bên dưới chưa cần hiểu vội — bạn chỉ cần để ý xem ba nơi này khác nhau ở chỗ nào.
// Ở đâu cũng như nhau ― bản thân ngôn ngữ
const cart = [
{ name: "Cốc", price: 1200 },
{ name: "Đế lót ly", price: 400 },
];
console.log(cart.length); // 2
// Chỉ trình duyệt mới có ― ghi lại nội dung màn hình
document.querySelector("#total").textContent = "1600đ";
// Chỉ Node.js mới có ― đọc file
const fs = require("node:fs");
console.log(fs.readFileSync("orders.csv", "utf-8"));
Console Của Trang Này Không Có Màn Hình
Console bài tập chạy code của bạn trong môi trường trình duyệt nhưng không có màn hình. Phần tử bạn tạo ra sẽ không hiện lên ở đâu cả, nên bạn kiểm tra kết quả bằng cách đọc phần văn bản in ra với console.log. Các hộp thoại như alert cũng không dùng được. Ngay cả ở chương Browser API, bạn vẫn xác nhận kết quả bằng cách in nội dung của các phần tử vừa tạo ra dưới dạng văn bản.
Khóa Học Này Gồm Những Gì — 4 Nhóm
Khóa học này chia thành 4 nhóm. Bạn bắt đầu với giá trị và cấu trúc dữ liệu cơ bản, sang luồng điều khiển và hàm, rồi tới lập trình hướng đối tượng với class, và kết thúc ở Browser API (thao tác DOM, sự kiện, giao tiếp mạng, lưu trữ) để làm việc với màn hình và dữ liệu.
Hãy học lần lượt từ trên xuống, vì bài sau đều dựa trên kiến thức của bài trước. Ngoại lệ duy nhất là if dùng để kiểm tra điều kiện — nó xuất hiện ở dạng đơn giản nhất ngay trong các bài cơ bản, khi so sánh giá trị.
| Nhóm | Bạn Sẽ Học Gì | Chủ Đề Chính |
|---|---|---|
| 1. Cơ bản | Giá trị & cấu trúc dữ liệu | let & const, số, chuỗi, mảng, object, JSON |
| 2. Cú pháp | Luồng điều khiển & hàm | if / for, hàm, arrow function, map / filter / reduce, xử lý lỗi, async |
| 3. OOP | Thiết kế class | class, constructor, kế thừa, getter / setter, this |
| 4. Browser API | Màn hình & mạng | lấy/tạo phần tử, sự kiện, form, fetch, localStorage |
Mỗi bài đều đi theo cùng một mạch: giải thích → sơ đồ → bài tập → quiz. Bài tập chạy được ngay trong console trên trang, nên bạn không cần cài editor hay dựng môi trường.
Khóa học được thiết kế để bạn không chỉ đọc, mà bài nào cũng tự tay viết và chạy code.
Vì Sao Nền Tảng Vẫn Quan Trọng Trong Thời Đại AI — Đọc và Sửa Lỗi
Ngày nay AI viết code thay bạn ngày một nhiều. Nhưng đọc đoạn code nó tạo ra, chạy thử, và sửa khi chương trình dừng vì lỗi vẫn là việc của con người.
JavaScript cho phép truyền giá trị qua lại mà không phải khai báo kiểu, nên một giá trị sai kiểu sẽ không làm chương trình dừng ngay tại chỗ — mãi tới một dòng hoàn toàn khác nó mới báo lỗi. Biết lần ngược về chỗ giá trị bắt đầu sai chính là thứ quyết định bạn debug nhanh hay chậm.
Khi chương trình dừng vì lỗi, thứ đầu tiên cần đọc là thông báo lỗi (error message). Phần lớn thông báo lỗi của JavaScript gói loại lỗi, tình huống và đối tượng bị lỗi vào chung một dòng. Đọc tách riêng ba phần đó, bạn khoanh được chỗ cần sửa về "giá trị ở bước ngay trước dòng báo lỗi".
Hai khái niệm xuất hiện trong ví dụ sau — property (cặp tên - giá trị nằm trong một object) và undefined (giá trị cho biết chưa có gì được gán vào) — sẽ được giải thích kỹ ở bài 8 và bài 9.
const user = { name: "Alice", age: 34 };
// user không có property tên là profile
console.log(user.profile.age);
// TypeError: Cannot read properties of undefined (reading 'age')
Khóa học cố tình đưa những tình huống báo lỗi vào bài tập, để bạn luyện đọc thông báo rồi tự sửa. Học hết 4 nhóm theo thứ tự, bạn sẽ tới được mức tự viết JavaScript dùng thật trong công việc và tự sửa khi chương trình báo lỗi.
Bài tiếp theo, bạn sẽ vừa viết code vừa học let và const — hai cách khai báo biến.