JavaScript từ cơ bản đến nâng cao
Chào mừng bạn đến với khóa học JavaScript từ cơ bản đến nâng cao theo mô hình Project-Based Learning (PBL)!
🎯 Giới thiệu khóa học
Khóa học này được thiết kế với phương pháp học qua dự án, giúp bạn vừa hiểu lý thuyết, vừa áp dụng ngay vào thực tế thông qua việc xây dựng một ứng dụng hoàn chỉnh.
Thông tin chung
- Tổng thời lượng: 16 buổi (mỗi buổi 120 phút)
- Cấu trúc: 8 cặp buổi (Lý thuyết - Thực hành)
- Dự án xuyên suốt: Mini Website Quản lý Công Việc (To-Do App)
- Đối tượng: Sinh viên cao đẳng ngành lập trình web (đã học HTML/CSS cơ bản)
- Phương pháp: 20% lý thuyết, 80% thực hành
Điều kiện tiên quyết
✅ HTML cơ bản (thẻ, form, cấu trúc trang)
✅ CSS cơ bản (selectors, properties, layout)
✅ Biết cách sử dụng trình soạn thảo code (VS Code)
✅ Biết cách mở file HTML trong trình duyệt
Kết quả học tập
Sau khóa học, bạn sẽ có thể:
- ✅ Hiểu rõ cách JavaScript vận hành trong trình duyệt
- ✅ Sử dụng thành thạo biến, kiểu dữ liệu, toán tử, hàm
- ✅ Làm việc với DOM để thao tác trang web
- ✅ Xử lý sự kiện (click, submit, input...)
- ✅ Làm việc với Mảng và Object để quản lý dữ liệu
- ✅ Lưu trữ dữ liệu bằng LocalStorage
- ✅ Gọi API và xử lý dữ liệu bất đồng bộ
- ✅ Tổ chức code theo module (ES6 Modules)
- ✅ Debug và tối ưu hóa code
- ✅ Xây dựng một ứng dụng web hoàn chỉnh
📚 Nội dung khóa học
📊 Bảng tổng hợp 16 buổi học
| Buổi | Loại | Chủ đề chính | Mục tiêu | Nội dung chính | Task / Bài tập / Quiz |
|---|---|---|---|---|---|
| 1 | LT | Giới thiệu JS, biến, kiểu dữ liệu, toán tử | Hiểu JavaScript là gì, cách khai báo biến, sử dụng toán tử cơ bản | - JavaScript là gì? - Biến (var, let, const) - Kiểu dữ liệu (string, number, boolean, null, undefined) - Toán tử (+, -, *, /, %, ==, ===, &&, ||) | Quiz: 7 câu về biến và kiểu dữ liệu |
| 2 | TH | Tạo giao diện & xử lý form nhập liệu cơ bản | Tạo HTML/CSS cho To-Do App, nhập liệu và hiển thị thông tin | - Tạo form nhập công việc - Lấy giá trị từ input - Hiển thị thông tin ra console/alert - Task: Hoàn thành form nhập liệu cơ bản | Task: Tạo form + xử lý submit, hiển thị dữ liệu |
| 3 | LT | Cấu trúc điều khiển (if, loop), hàm, scope | Sử dụng if/else, vòng lặp, tạo và gọi hàm | - if/else, switch - for, while, forEach - Hàm (function, arrow function) - Scope (global, local, block) | Quiz: 7 câu về điều khiển và hàm |
| 4 | TH | Thêm chức năng "Thêm công việc" | Áp dụng hàm và điều kiện để thêm công việc vào danh sách | - Tạo hàm thêm công việc - Validate dữ liệu đầu vào - Hiển thị danh sách công việc (tạm thời bằng alert/console) | Task: Thêm công việc với validation |
| 5 | LT | Mảng, Object, destructuring | Làm việc với mảng và object để quản lý dữ liệu | - Array (khai báo, truy cập, thêm/xóa) - Object (khai báo, truy cập, thêm/sửa/xóa) - Destructuring (array, object) - Các method: push, pop, filter, map | Quiz: 7 câu về Array và Object |
| 6 | TH | Hiển thị danh sách + thao tác dữ liệu | Dùng Array/Object để lưu trữ và hiển thị danh sách công việc | - Lưu danh sách công việc vào array - Render danh sách ra HTML - Thêm công việc vào array | Task: Hiển thị danh sách công việc động |
| 7 | LT | DOM & Event | Thao tác với DOM và xử lý sự kiện | - DOM là gì? - querySelector, getElementById - createElement, appendChild - addEventListener (click, submit, change) - Event object, preventDefault | Quiz: 7 câu về DOM và Event |
| 8 | TH | Chức năng "Sửa / Xóa / Tìm kiếm" | Tạo các chức năng CRUD cơ bản cho ứng dụng | - Xóa công việc (delete) - Sửa công việc (edit) - Tìm kiếm công việc (filter) - Đánh dấu hoàn thành | Task: Hoàn thiện CRUD cơ bản |
| 9 | LT | JSON & LocalStorage | Lưu trữ dữ liệu trên trình duyệt | - JSON là gì? - JSON.stringify / JSON.parse - LocalStorage API - setItem, getItem, removeItem - SessionStorage | Quiz: 7 câu về JSON và Storage |
| 10 | TH | Lưu dữ liệu vào LocalStorage | Lưu và khôi phục dữ liệu khi reload trang | - Lưu danh sách công việc vào LocalStorage - Load dữ liệu khi trang load - Xử lý trường hợp dữ liệu rỗng | Task: Lưu trữ dữ liệu persistent |
| 11 | LT | Fetch API, Promise, Async/Await | Gọi API và xử lý dữ liệu bất đồng bộ | - HTTP là gì? - Fetch API cơ bản - Promise (then, catch) - Async/Await - Error handling (try/catch) | Quiz: 7 câu về API và Promise |
| 12 | TH | Lấy dữ liệu từ API (JSON Server) | Tích hợp API vào ứng dụng | - Setup JSON Server - Fetch dữ liệu từ API - POST, PUT, DELETE requests - Xử lý loading và error | Task: Tích hợp API vào To-Do App |
| 13 | LT | Module, ES6+, Refactor code | Tổ chức code theo module và best practices | - ES6 Modules (import/export) - Arrow functions, Template literals - Spread operator, Rest parameters - Code organization - Naming conventions | Quiz: 7 câu về Module và ES6+ |
| 14 | TH | Tách module code (storage.js, dom.js, main.js) | Refactor code để dễ bảo trì và mở rộng | - Tách code thành modules - storage.js (quản lý LocalStorage) - dom.js (thao tác DOM) - main.js (logic chính) - Tổ chức thư mục | Task: Refactor code theo module |
| 15 | LT | Debug, Optimization, Best Practices | Kỹ năng debug và tối ưu hóa code | - Console.log, debugger - Chrome DevTools - Performance tips - Code review checklist - Git cơ bản | Quiz: 7 câu về Debug và Best Practices |
| 16 | TH | Tổng hợp & Demo Project cuối khóa | Hoàn thiện project và thuyết trình | - Hoàn thiện tất cả tính năng - Fix bugs - Cải thiện UI/UX - Chuẩn bị demo - Thuyết trình project | Task: Demo Project + Thuyết trình |
Chú thích:
- LT: Lý thuyết
- TH: Thực hành
📁 Cấu trúc dự án
Xem chi tiết cấu trúc thư mục và rubric đánh giá tại Dự án cuối khóa.
🎓 Phương pháp học
Cấu trúc mỗi buổi học
- 🎯 Mục tiêu học tập - Xác định rõ bạn sẽ học được gì
- 🧠 Nội dung chính - Lý thuyết hoặc hướng dẫn project
- 💻 Ví dụ minh họa - Code mẫu và giải thích
- 🧩 Bài tập/Task - Thực hành ngay tại lớp
- 🧪 Quiz/Checkpoint - Kiểm tra kiến thức (5-7 câu)
Nguyên tắc học tập
- ✅ Học qua làm: Tập trung vào thực hành (80%)
- ✅ Incremental Build: Xây dựng project từng bước, buổi sau nâng cấp buổi trước
- ✅ Hiểu bản chất: Không chỉ học syntax, mà hiểu tại sao và khi nào dùng
- ✅ Ví dụ thực tế: Gần gũi với đời sống sinh viên
📖 Danh sách bài học
Giai đoạn 1: Nền tảng JavaScript (Buổi 1-4)
- Buổi 1: Giới thiệu JS, biến, kiểu dữ liệu, toán tử (LT)
- Buổi 2: Tạo giao diện & xử lý form nhập liệu (TH)
- Buổi 3: Cấu trúc điều khiển, hàm, scope (LT)
- Buổi 4: Thêm chức năng "Thêm công việc" (TH)
Giai đoạn 2: Dữ liệu & Cấu trúc (Buổi 5-6)
Giai đoạn 3: DOM & Tương tác (Buổi 7-8)
Giai đoạn 4: Lưu trữ & API (Buổi 9-12)
- Buổi 9: JSON & LocalStorage (LT)
- Buổi 10: Lưu dữ liệu vào LocalStorage (TH)
- Buổi 11: Fetch API, Promise, Async/Await (LT)
- Buổi 12: Lấy dữ liệu từ API (TH)
Giai đoạn 5: Code Organization (Buổi 13-14)
Giai đoạn 6: Tối ưu & Hoàn thiện (Buổi 15-16)
🎯 Dự án cuối khóa
Xem chi tiết yêu cầu và rubric tại Dự án cuối khóa.
Chúc bạn học tập hiệu quả! 🚀