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

Bạn đã biết dựng một trang HTML nhưng chưa biết làm thế nào để nút bấm phản hồi, kiểm tra biểu mẫu hay lọc danh sách sản phẩm? JavaScript là bước tiếp theo giúp bạn tạo những tương tác đó. Bộ bài này dành cho người mới, ưu tiên hiểu cách chương trình hoạt động và tự viết lại được ví dụ.

JavaScript làm gì trên một trang web?

HTML mô tả nội dung và cấu trúc; CSS điều chỉnh cách trình bày; JavaScript xử lý hành vi và dữ liệu. Khi người dùng nhập tên rồi bấm chào, HTML cung cấp ô nhập và nút, CSS trang trí chúng, còn JavaScript đọc tên và cập nhật lời chào.

JavaScript là ngôn ngữ khác với Java. Trên trình duyệt, nó có thể truy cập cây tài liệu DOM và lắng nghe sự kiện. Ngoài trình duyệt, những môi trường như Node.js cũng chạy được JavaScript nhưng không có sẵn DOM của trang web. Trong bộ nhập môn này, môi trường thực hành chính là trình duyệt máy tính.

Cần chuẩn bị gì?

• Biết các thẻ HTML cơ bản: tiêu đề, đoạn văn, liên kết, input, button.
• Một trình soạn thảo văn bản và trình duyệt có Developer Tools.
• Một thư mục riêng cho mỗi bài; tự gõ và chạy mã thay vì chỉ đọc.

Chưa cần cài framework hoặc thư viện. Bạn có thể bắt đầu bằng Console của Developer Tools, sau đó chuyển sang cặp tệp index.html và app.js. Khi thử ví dụ mới trong Console, tải lại trang nếu xuất hiện lỗi khai báo trùng tên biến.

Lộ trình 18 bài

Bài 2–5 giúp bạn chạy chương trình, dùng biến, kiểu dữ liệu và toán tử. Bài 6–9 rèn tư duy điều kiện, vòng lặp, hàm và phạm vi biến. Bài 10–13 xử lý mảng, đối tượng và chuỗi. Bài 14–17 đưa kiến thức vào giao diện, sự kiện, biểu mẫu và lưu dữ liệu. Bài 18 ghép các phần thành ứng dụng quản lý công việc.

Không cần thuộc mọi phương thức ngay lần đầu. Với mỗi bài, hãy trả lời: dữ liệu đầu vào là gì, kết quả mong muốn là gì, chương trình biến đổi dữ liệu qua những bước nào?

Bài thực hành đầu tiên

Mở một trang trống, mở Developer Tools rồi chọn Console. Tự gõ:

console.log("Xin chào Học Việt Code!");
console.log(12 + 8);

Kết quả mong đợi là một lời chào và số 20. Thử đổi phép cộng thành phép nhân, rồi giải thích vì sao dòng có dấu ngoặc kép được coi là văn bản.

Cách tự kiểm tra tiến bộ

1. Chạy đúng ví dụ mẫu.
2. Thay đổi ít nhất hai giá trị và dự đoán kết quả trước khi chạy.
3. Viết một biến thể không nhìn mẫu.
4. Ghi lại một lỗi bạn gặp và cách sửa.

Ghi nhớ: JavaScript cơ bản là nền tảng để học DOM, bất đồng bộ và các framework sau này. Hãy hoàn thành ứng dụng nhỏ bằng JavaScript thuần trước khi mở rộng công nghệ.

Mục lục toàn bộ loạt bài

2. JavaScript cơ bản – Bài 02: Chạy chương trình đầu tiên với Console và tệp app.js
3. JavaScript cơ bản – Bài 03: Biến, let, const và cách đặt tên
4. JavaScript cơ bản – Bài 04: Kiểu dữ liệu, typeof và chuyển đổi giá trị
5. JavaScript cơ bản – Bài 05: Toán tử, so sánh và biểu thức logic
6. JavaScript cơ bản – Bài 06: Rẽ nhánh với if, else và switch
7. JavaScript cơ bản – Bài 07: Vòng lặp for, while, break và continue
8. JavaScript cơ bản – Bài 08: Hàm, tham số, return và arrow function
9. JavaScript cơ bản – Bài 09: Phạm vi biến và cách tránh lỗi ReferenceError
10. JavaScript cơ bản – Bài 10: Mảng, chỉ số và cách duyệt danh sách
11. JavaScript cơ bản – Bài 11: Xử lý mảng với map, filter, find và reduce
12. JavaScript cơ bản – Bài 12: Đối tượng, thuộc tính và danh sách đối tượng
13. JavaScript cơ bản – Bài 13: Xử lý chuỗi và template literal
14. JavaScript cơ bản – Bài 14: DOM: chọn phần tử, đổi nội dung và tạo danh sách
15. JavaScript cơ bản – Bài 15: Sự kiện và addEventListener: làm bộ đếm tương tác
16. JavaScript cơ bản – Bài 16: Biểu mẫu, preventDefault và kiểm tra dữ liệu nhập
17. JavaScript cơ bản – Bài 17: Lưu dữ liệu với localStorage, JSON và try…catch
18. JavaScript cơ bản – Bài 18: Dự án thực hành: ứng dụng quản lý công việc học tập