CourseJavaLearn from zeroHọc miễn phí
← Quay về khóa học

Tư duy lập trình web

JavaScript Foundation cho frontend

Học tư duy lập trình bằng JavaScript: biến, hàm, object, array, DOM, event, async và cách debug lỗi.

Sau khóa học, bạn có thể viết logic tương tác cho website, đọc hiểu code JavaScript cơ bản và sẵn sàng học React/Next.js.

Xem syllabus JavaScriptXem bài tập DOM

Phù hợp với

  • Người đã học HTML/CSS và muốn thêm tương tác
  • Người học JavaScript nhiều lần nhưng chưa hiểu bản chất
  • Người chuẩn bị học React/Next.js

Cần chuẩn bị

  • Nên biết HTML/CSS cơ bản
  • Có VS Code và trình duyệt Chrome/Edge
  • Biết mở DevTools console để xem lỗi

Kết quả đạt được

  • Viết được hàm, điều kiện, vòng lặp và xử lý array/object
  • Tương tác DOM bằng event, form và state đơn giản
  • Hiểu async/await ở mức đủ dùng với API cơ bản

Study method

Cách học để không bị ngợp.

Mỗi khóa được thiết kế theo nhịp: hiểu khái niệm, làm bài tập nhỏ, áp dụng vào project và review lại bằng checklist.

Step 01

Mỗi khái niệm đều gắn với một bài tập trên trình duyệt

Step 02

Tập đọc lỗi trong console trước khi tìm đáp án

Step 03

Viết function nhỏ, test bằng nhiều input khác nhau

Step 04

Cuối khóa làm Todo App có filter và localStorage

Syllabus chi tiết

Module, mục tiêu và bài tập sau từng bài.

Lesson nào cũng có mục tiêu học và bài thực hành cụ thể để người mới biết mình cần làm gì sau khi xem tài liệu.

01

Ngôn ngữ JavaScript căn bản

4 bài học

Nắm biến, kiểu dữ liệu, toán tử, điều kiện và vòng lặp để có nền tư duy lập trình.

  1. 01

    Variables and data types

    Mục tiêu: Hiểu let, const, string, number, boolean, null, undefined.

    Bài tập: Tạo profile object và in câu giới thiệu từ dữ liệu.

  2. 02

    Operators and conditions

    Mục tiêu: Viết điều kiện if/else, so sánh và logic boolean.

    Bài tập: Viết chương trình xếp loại điểm học viên.

  3. 03

    Loops

    Mục tiêu: Dùng for, while và biết khi nào nên tránh loop phức tạp.

    Bài tập: In bảng cửu chương và lọc số chẵn trong danh sách.

  4. 04

    Functions

    Mục tiêu: Tách logic thành function có tham số và return rõ ràng.

    Bài tập: Viết function tính tổng giỏ hàng và giảm giá.

02

Object, Array và xử lý dữ liệu

4 bài học

Làm việc với dữ liệu dạng danh sách và object, nền tảng quan trọng cho React và API.

  1. 01

    Objects

    Mục tiêu: Tạo, đọc, cập nhật object và hiểu nested object.

    Bài tập: Quản lý thông tin course gồm title, lessons, author.

  2. 02

    Arrays

    Mục tiêu: Dùng push, map, filter, find, reduce ở mức nhập môn.

    Bài tập: Lọc khóa học miễn phí và tính tổng số bài học.

  3. 03

    Destructuring and spread

    Mục tiêu: Viết code cập nhật dữ liệu gọn hơn, không sửa trực tiếp object cũ.

    Bài tập: Clone course object và cập nhật trạng thái hoàn thành.

  4. 04

    Clean data functions

    Mục tiêu: Viết function xử lý dữ liệu dễ test.

    Bài tập: Viết searchCourses(keyword) không phụ thuộc DOM.

03

DOM, Event và Async

4 bài học

Biến trang HTML/CSS thành ứng dụng nhỏ có tương tác, lưu dữ liệu và gọi API cơ bản.

  1. 01

    DOM selection

    Mục tiêu: Chọn element và thay đổi text, class, attribute đúng cách.

    Bài tập: Tạo counter tăng/giảm với trạng thái disabled.

  2. 02

    Events and forms

    Mục tiêu: Bắt click, submit, input và validate form cơ bản.

    Bài tập: Tạo form thêm task và báo lỗi khi nhập trống.

  3. 03

    LocalStorage

    Mục tiêu: Lưu dữ liệu nhỏ trong trình duyệt và parse JSON an toàn.

    Bài tập: Lưu danh sách todo sau khi reload trang.

  4. 04

    Fetch and async/await

    Mục tiêu: Gọi API, xử lý loading/error và render dữ liệu.

    Bài tập: Fetch danh sách bài viết giả lập và hiển thị skeleton đơn giản.

Project cuối khóa

Todo App có filter và localStorage

Ứng dụng quản lý task gồm thêm, sửa trạng thái, xóa, filter theo trạng thái và lưu dữ liệu localStorage.

Yêu cầu sản phẩm

  • Có form thêm task và validate input
  • Có filter all/active/completed
  • Có localStorage để giữ dữ liệu sau reload
  • Code chia function render, add, remove, toggle, filter rõ ràng

Tiêu chí đạt

  • Không thao tác DOM lặp lại quá mức cần thiết
  • Function có tên rõ và ít phụ thuộc biến global
  • Xử lý input trống và trạng thái danh sách rỗng
  • Giao diện dùng được tốt trên mobile

Tài liệu học tập

Checklist, bài tập và tài liệu đi kèm.

Các tài liệu này giúp người học tự kiểm tra, luyện tập và hoàn thiện project theo chuẩn dễ theo dõi.

Practice

JavaScript function drills

Bài tập luyện function, array method và object transformation.

Checklist

DOM events checklist

Checklist khi làm form, event delegation và render UI.

Documentation

MDN reading guide

Cách đọc MDN cho người mới mà không bị quá tải thuật ngữ.

Next steps

Học xong nên làm gì tiếp?

Đừng học rời rạc. Mỗi khóa đều dẫn sang kỹ năng hoặc project kế tiếp trong lộ trình full-stack.

1

Học React/Next.js để quản lý UI bằng component và state tốt hơn

2

Làm Project Portfolio có tương tác nhỏ

3

Học fetch API sâu hơn khi bắt đầu ghép backend

Cần gì thì gọi Nghĩa
Mascot