MỤC TIÊU VÀ CẤU TRÚC KHÓA HỌC

Người học ở nhóm này đã nắm vững tư duy lập trình (biến, hàm, OOP, luồng xử lý), các khái niệm mạng (HTTP, Request/Response, RESTful API) và cấu trúc web cơ bản. Do đó, khóa học sẽ không đi lại các lý thuyết nhập môn lập trình chung, mà tập trung vào:

  1. Sự khác biệt cốt lõi về tư duy giữa Python và JavaScript (Bất đồng bộ, Event Loop, Dynamic Typing, Scope, Object-oriented qua Prototype).

  2. Kỹ năng thao tác DOM & Event Driven trên trình duyệt.

  3. JavaScript Hiện đại (ES6+) & Bất đồng bộ (Async/Await, Fetch API) để kết nối mượt mà với Backend (Django/Flask).

  4. Hướng mở rộng Fullstack/Frontend Framework (Node.js hoặc React/Vue) dựa trên tư duy đã có.

TÊN KHÓA HỌC DỰ KIẾN

"JavaScript Modern & Async: Chuyển dịch Tư duy từ Python sang Fullstack Web Development"

KHUNG CHƯƠNG TRÌNH KHÓA HỌC (PROPOSED CURRICULUM)

MODULE 1: Cú pháp ES6+ & Chuyển đổi Tư duy Python ➔ JavaScript

  • Mục tiêu: Nắm vững cú pháp hiện đại, hiểu sự giống/khác nhau về Kiểu dữ liệu và Phạm vi hoạt động (Scope) giữa Python và JS.

  • Nội dung chính:

    • Scope & Variables: Phân biệt var, let, const vs Phạm vi biến trong Python.

    • Data Types & Equalities: So sánh == vs ===, hiện tượng Type Coercion (Ép kiểu tự động) và các giá trị Truthy/Falsy.

    • Functions: Function Declaration vs Arrow Functions () => {} (So sánh với lambda trong Python nhưng mạnh mẽ hơn).

    • Destructuring, Spread/Rest Operators: Tương đương với Unpacking *args, **kwargs trong Python.

    • Array & Object Methods: map(), filter(), reduce() (So sánh với List Comprehensions trong Python).

MODULE 2: DOM Manipulation & Hệ thống Sự kiện (Event-Driven Architecture)

  • Mục tiêu: Thao tác động lên HTML/CSS và xây dựng tương tác người dùng trên Browser.

  • Nội dung chính:

    • DOM Tree: Truy vấn phần tử (querySelector, querySelectorAll) và thay đổi Attributes/Styles/ClassList.

    • Event Handling: Sự kiện Click, Submit, Input... Cơ chế Event Bubbling & Event Capturing.

    • Dynamic Rendering: Tạo, thêm, xóa các thẻ HTML động bằng JS (createElement, innerHTML, Template Literals).

    • Form Validation: Xử lý và kiểm tra dữ liệu Form phía Client trước khi gửi về Python Backend.

MODULE 3: Bất đồng bộ (Asynchronous JS) & Kết nối Python Backend (Django/Flask API)

  • Mục tiêu: Hiểu bản chất Single-threaded & Event Loop của JS. Làm chủ kỹ thuật gọi API không load lại trang (AJAX/Fetch).

  • Nội dung chính:

    • Tư duy Synchronous vs Asynchronous: Tại sao JS lại chạy bất đồng bộ?

    • Event Loop, Call Stack & Task Queue: Bức tranh toàn cảnh về cách JavaScript thực thi mã.

    • Callbacks, Promises & Async/Await: Từ "Callback Hell" đến cú pháp async/await sạch sẽ.

    • Fetch API & Axios: Gửi Request (GET, POST, PUT, DELETE) kèm Headers/JSON payload tới Django REST Framework hoặc Flask API.

    • Xử lý CORS & Authentication: Truyền JWT/Session Token từ JS sang Python API.

MODULE 4: Hướng đối tượng (OOP) & Modules trong JavaScript

  • Mục tiêu: So sánh mô hình OOP của Python và JS, chuẩn hóa cách tổ chức Code base.

  • Nội dung chính:

    • Prototype & Prototypal Inheritance: Bản chất hướng đối tượng của JS (Khác biệt so với Class-based inheritance của Python).

    • ES6 Classes: Cú pháp class, constructor, extends, super (Cú pháp Sugar-coat giúp dân Python thấy quen thuộc).

    • ES6 Modules: import / export (So sánh trực tiếp với import trong Python).

MODULE 5: Đồ án Cuối khóa (Capstone Project)

  • Đề tài: Xây dựng Single Page Application (SPA) - "Interactive Dashboard"

  • Mô tả:

    • Backend (Sử dụng kiến thức Python sẵn có): Django REST Framework hoặc Flask cung cấp các RESTful API endpoints.

    • Frontend (Sử dụng kiến thức JS vừa học): Viết thuần (Vanilla JS ES6+) để gọi API, render dữ liệu biểu đồ/bảng tương tác, xử lý Login/Logout bằng JWT, filter dữ liệu realtime không reload trang.