Khóa Học JavaScript

Khóa học JavaScript miễn phí, chạy code ngay trên trình duyệt. Từ let và const, chuỗi, mảng, object, sang if / for, hàm, map / filter / reduce, bất đồng bộ, class và kế thừa, tới Browser API: DOM, sự kiện, fetch, localStorage. Học bằng sơ đồ và bài tập, không cần cài môi trường.

0/55テキスト終了（0%）

Cơ Bản JavaScript

Bạn Sẽ Học Gì Trong Khóa JavaScript Này
Đi qua cách JavaScript chạy trong cả trình duyệt lẫn Node.js, thứ tự học qua 4 nhóm của khóa học, và cách đọc một thông báo lỗi.
let và const — Kiểm Soát Gán Lại và Khai Báo Lại
Gồm chọn giữa const và let, TypeError khi gán lại một const và SyntaxError khi khai báo lại nó, và quy tắc đặt tên camelCase.
Số và Phép Tính — Kiểu Number và Math
Gồm cách số nguyên và số thập phân dùng chung kiểu Number, toán tử phần dư và lũy thừa, làm tròn với Math, căn chỉnh chữ số thập phân với toFixed, và tránh sai số dấu phẩy động.
Chuỗi và Template Literal
Gồm chọn giữa 3 kiểu dấu ngoặc, nhúng giá trị bằng template literal, định dạng với trim và slice, split và join, và replaceAll cùng padStart.
Boolean và So Sánh — Khác Biệt Giữa == và ===
Gồm khác biệt giữa === (kiểm tra cả kiểu lẫn giá trị) và == (chuyển kiểu trước khi so sánh), toán tử so sánh và logic, 6 giá trị falsy mà if coi là false, và đặt giá trị mặc định bằng ||.
Chuyển Đổi Kiểu — Number / String / parseInt và Chuyển Đổi Ngầm
Gồm kiểm tra kiểu bằng typeof, chuyển đổi tường minh với Number / String / Boolean, chuyển đổi ngầm nơi chỉ + thành nối chuỗi, parseInt và parseFloat, và phát hiện chuyển đổi thất bại bằng Number.isNaN.
Mảng — Thêm, Xóa, và Lấy Ra
Gồm lấy phần tử bằng index và length, thêm và xóa với push / pop / shift / unshift, kiểm tra bằng includes và indexOf, và chọn giữa slice và splice.
Object — Đọc và Ghi Property
Gồm xây một object gom dữ liệu theo cặp key-value, chọn giữa dot notation và bracket notation, delete và in, và Object.keys / values / entries.
null và undefined — Đọc An Toàn Với ?. và ??
Gồm khác biệt giữa null và undefined khi biểu diễn "không có giá trị," đọc qua một chuỗi lồng nhau mà không dừng lại bằng ?., và áp dụng mặc định bằng ?? mà giữ nguyên 0 và chuỗi rỗng.
Destructuring — Lấy Giá Trị Ra Khỏi Object và Mảng
Gồm destructuring, lấy chỉ những giá trị bạn cần vào biến cùng lúc bằng cách khớp tên key của object hay vị trí của mảng — qua giá trị mặc định, đổi tên, và rest.
Spread Syntax — Sao Chép, Kết Hợp, và Ghi Đè Cài Đặt
Gồm spread syntax, trải nội dung của mảng hay object ra tại chỗ, để sao chép và kết hợp mà không đổi bản gốc, và xếp chồng chỉ thay đổi của người dùng lên trên cài đặt mặc định.
Map và Set — Bỏ Trùng Lặp và Đếm Theo Key
Gồm bỏ trùng lặp với Set, chỉ giữ 1 bản của mỗi giá trị, set / get của Map cho cặp key-value giữ theo thứ tự đăng ký, và chọn giữa Map và Object dựa trên kiểu key và thứ tự.
Tham Chiếu và Sao Chép — Cạm Bẫy Của Mảng và Object
Gồm việc gán một mảng hay object chỉ truyền một tham chiếu, === so sánh tham chiếu thế nào, sao chép nông của spread syntax so với sao chép sâu của structuredClone, và Object.freeze.
JSON — stringify và parse
Gồm JSON.stringify để biến một object thành chuỗi và JSON.parse để biến nó trở lại, thụt lề bằng đối số thứ 3, SyntaxError mà một chuỗi hỏng ném ra, và giá trị bị mất trong vòng qua lại.
Tổng Kết Kiểu Dữ Liệu — typeof và Bảng Tra Cứu Nhanh
Tổng kết sự phân chia giữa 7 giá trị nguyên thủy và Object, typeof trả về gì, vì sao null và mảng đều trả về object cộng với Array.isArray, và cách kiểm tra một thứ có thể coi là số hay không.

Cú Pháp JavaScript

Rẽ nhánh điều kiện — else if, toán tử ba ngôi và switch
Chuỗi else if xét từ trên xuống và thứ tự đặt điều kiện, toán tử ba ngôi trả về thẳng một giá trị, và cách switch cùng break so một giá trị với các ứng viên.
Vòng lặp — for, for...of và for...in
Vòng lặp for đếm bằng ba biểu thức (khởi tạo, điều kiện, cập nhật), for...of và entries để lấy thẳng từng phần tử, for...in để duyệt key, và cách viết vòng lặp lồng nhau.
Lặp theo điều kiện — while, do...while, break và continue
while lặp chừng nào điều kiện còn đúng, do...while chạy thân trước, cách tránh vòng lặp vô hạn, continue để bỏ qua một vòng và break để thoát khỏi vòng lặp.
Khai báo hàm và biểu thức hàm — tham số và return
Cách đặt tên cho một đoạn xử lý bằng khai báo function để gọi lại, đối số được ghép theo vị trí, giá trị mà return trả về, biểu thức hàm để gán hàm vào biến như một giá trị, và undefined khi bạn quên viết return.
Arrow function — cách viết rút gọn và trả về object
Dạng cơ bản của arrow function tạo hàm bằng =>, cách viết rút gọn bỏ ngoặc tròn quanh tham số và ngoặc nhọn quanh thân hàm, ngoặc tròn khi trả về object, và thân dạng khối nhiều dòng với return.
Tham số mặc định và rest parameter — giá trị mặc định và cách nhận phần còn lại
Tham số mặc định được dùng khi bỏ qua đối số, điều kiện khiến undefined và null cho kết quả khác nhau, rest parameter gom các đối số còn lại vào một mảng, và options pattern truyền cấu hình bằng object.
Scope và hoisting — Biến đọc được ở đâu và từ khi nào
Tìm hiểu block scope và function scope được giới hạn bởi dấu ngoặc nhọn, shadowing khi khai báo bên trong che biến bên ngoài, hoisting của khai báo function, TDZ của let và lý do không dùng var.
Closure — Hàm ghi nhớ biến bên ngoài
Tìm hiểu closure — hàm ghi nhớ biến của scope bên ngoài: bộ đếm giữ giá trị qua các lần gọi, function factory trả về hàm đã gắn sẵn cấu hình, và các hàm được tạo trong vòng lặp.
Higher-order function và callback — Truyền hàm và trả về hàm
Tìm hiểu higher-order function — hàm nhận hàm khác làm đối số — và callback được truyền vào để gọi: xử lý từng phần tử bằng forEach, tự viết filter nhận hàm kiểm tra, và gọi 2 lần liên tiếp với hàm trả về hàm.
map và filter — biến đổi hay lọc mảng
Tìm hiểu map để biến đổi từng phần tử và filter để chỉ giữ lại phần tử thỏa điều kiện. Xem vì sao mảng gốc không đổi, cách nối filter với map bằng chaining và cách dùng tham số index.
reduce — gộp cả mảng thành một giá trị
Tìm hiểu reduce để gộp một mảng thành một giá trị: cách accumulator và giá trị khởi tạo được truyền qua các vòng, cách tính tổng, tìm max, thống kê theo danh mục, và TypeError xảy ra với mảng rỗng.
Sắp xếp và tìm kiếm — sort / find / some / every
Tìm hiểu sort sắp xếp theo giá trị hàm so sánh trả về, toSorted giữ nguyên mảng gốc, find và findIndex trả về một phần tử khớp, cùng some và every trả về giá trị boolean.
Bắt ngoại lệ — try / catch / finally
Cách bắt ngoại lệ bằng try và catch, khối finally luôn được chạy, ném lại ngoại lệ đã bắt cho phía gọi bằng throw, và rẽ nhánh theo loại lỗi bằng instanceof.
Ném ngoại lệ — throw và lỗi tùy chỉnh
Cách dùng throw new Error để ném ngoại lệ ngay tại chỗ phát hiện giá trị sai, tự định nghĩa loại lỗi bằng extends Error, thứ tự viết instanceof, và giữ lại ngoại lệ gốc bằng cause.
Promise — Nhận kết quả bất đồng bộ bằng then và catch
Các trạng thái pending, fulfilled, rejected của Promise (kết quả được xác định sau), hàm delay bọc setTimeout, nhận kết quả bằng then / catch / finally, chuỗi then, và chạy đồng thời bằng Promise.all.
async / await — Chờ kết quả Promise theo từng dòng từ trên xuống
Hàm async trả về Promise khi được gọi và cách chờ bằng await, bắt rejected bằng try / catch, khác biệt giữa await tuần tự và Promise.all song song, và cái bẫy khi quên await khiến biến chứa một Promise.
Iterator và generator — Lấy ra từng giá trị một
Generator dừng ở mỗi yield khi trả về giá trị và cách next() đẩy nó chạy tiếp, iterator protocol đứng sau for...of, spread các giá trị thành mảng và trạng thái sau khi đã đọc hết, cùng lazy evaluation để chỉ lấy đủ số giá trị cần từ một dãy vô tận.
Tổng kết cú pháp — Bảng tra nhanh phương thức mảng, bất đồng bộ và ngoại lệ
Bảng tra nhanh: chọn phương thức mảng theo dạng giá trị trả về, khi nào còn nối chuỗi được, ba cách chờ (callback, then và await), và nơi nhận lỗi từ throw đồng bộ và từ Promise thất bại.

Lập Trình Hướng Đối Tượng JavaScript

Class cơ bản — định nghĩa class và tạo instance
Dùng class để tạo nhiều object có cùng cấu trúc: tạo instance bằng constructor và new, phương thức đọc giá trị của chính nó qua this, và khi nào nên dùng object literal.
constructor và class field — cách đặt giá trị ban đầu
Dùng constructor và class field để đặt giá trị ban đầu cho instance: cách nhận đối số, thứ tự field được thêm vào, giá trị mặc định khi bỏ qua đối số và chặn giá trị không hợp lệ ngay lúc tạo.
Instance member và static — giá trị và phương thức thuộc về class
Dùng static để đặt giá trị và phương thức lên chính class thay vì instance: static field đếm số lượng đã tạo, factory method tạo từ JSON, hằng số dùng chung và khi nào dùng instance member.
Getter và setter — chạy code khi đọc hoặc gán property
Getter và setter chạy code khi property được đọc hoặc gán. Gồm computed property tính lại mỗi lần đọc, kiểm tra giá trị được gán, đi qua setter từ constructor và property chỉ đọc.
Private field (#) và đóng gói
Private field và private method có # ở đầu tên, không thể đọc hay ghi từ ngoài class. Gồm SyntaxError xảy ra trước khi chạy khi viết từ bên ngoài và khác biệt với quy ước _.
Kế thừa — extends và super
Kế thừa: tạo class mới dựa trên một class có sẵn. Bạn sẽ học cách viết extends, gọi super() trong constructor của class con, override, và super.tênPhươngThức() để gọi phương thức của class cha.
Polymorphism — cùng một lời gọi, cách chạy khác nhau
Polymorphism: mỗi class có một phương thức cùng tên để phía gọi chỉ cần một cách viết. Bạn sẽ học cách gọi một lượt cho mảng lẫn nhiều loại, khi nào rẽ nhánh bằng instanceof, và duck typing cho những giá trị không kế thừa.
this binding — this thay đổi theo cách gọi và cách cố định nó
Cách this được quyết định khi bạn tách phương thức ra biến hoặc truyền làm callback: TypeError khi tách ra, cố định bằng bind, arrow function field và lưu ý khi truyền cho setTimeout.
Prototype — phía sau class
Prototype, nơi chứa các phương thức của class, và prototype chain, thứ tự tìm một cái tên. Bạn sẽ học Object.getPrototypeOf, sự khác nhau giữa hasOwnProperty và in, và cách thêm hàm.
Phương thức đặc biệt — toString, toJSON và Symbol.iterator
Bài viết về toString, toJSON và Symbol.iterator, các method JavaScript tự gọi trong những tình huống nhất định: cách quyết định dạng hiển thị của object, cách chọn giá trị đưa vào JSON và cách làm cho class lặp được bằng for...of.
Module — import và export
Bài viết về export để công khai giá trị trong một file và import để nạp giá trị đó: khác biệt giữa named export và default export, type="module" trên trình duyệt, và cách phân biệt ESM với CommonJS trong Node.js.
Composition và kế thừa — Object.assign và mixin
Bài viết về composition, cách chia tính năng thành từng thành phần rồi ghép vào một object: gắn thêm sau bằng Object.assign, hàm trả về thành phần kết hợp với cú pháp spread, hàm mixin xếp chồng tính năng lên class, và khi nào nên dùng kế thừa.
Tổng kết OOP — bảng tra nhanh cú pháp class và this
Các bảng tra nhanh sắp xếp cú pháp class theo nơi mỗi member nằm, cách lần xem định nghĩa nào chạy với extends và super, this theo từng cách gọi, phạm vi tính năng tới được với kế thừa, prototype và composition, và thời điểm lỗi dừng code.

Browser API JavaScript

Cách JavaScript chạy trong trình duyệt
Cách trình duyệt dựng DOM từ HTML, thứ tự xử lý link và script, thuộc tính defer, xem lỗi bằng Console của DevTools và kiểm tra kết quả dưới dạng văn bản trong console bài tập.
Cây DOM và cách lấy phần tử — querySelector và querySelectorAll
Lấy phần tử từ cây DOM bằng querySelector và querySelectorAll. Bạn học cách tìm theo class, id, data attribute, chuyển NodeList thành mảng và dùng ?. khi không tìm thấy.
Tạo, thay đổi và xóa phần tử — createElement / classList / remove
Thêm phần tử bằng createElement và append, xóa bằng remove, đổi class và thuộc tính bằng classList và dataset, và textContent so với innerHTML khi hiển thị dữ liệu người dùng nhập.
Sự kiện — addEventListener và cơ chế lan truyền
addEventListener gọi hàm khi phần tử được click, event.target cho biết phần tử được nhấn, event delegation dựa trên bubbling lên phần tử cha, stopPropagation, và cách gỡ listener bằng once và removeEventListener.
Form — giá trị nhập vào và submit
value và checked để đọc giá trị trong ô nhập, sự kiện input và change xảy ra khi nhập liệu, submit và preventDefault để hủy việc gửi form, và FormData để gom các ô nhập cùng lúc.
fetch — lấy dữ liệu từ API
Lấy JSON từ một URL bằng fetch và json(), nhận biết lỗi bằng response.ok, viết URL tương đối và tải hai file cùng lúc bằng Promise.all.
Xử lý lỗi fetch và timeout — AbortController và thử lại
Lỗi HTTP mà fetch không ném ra, lỗi mạng khiến chính fetch thất bại, timeout bằng AbortController và setTimeout, và cách chỉ thử lại một lần.
localStorage — lưu dữ liệu trong trình duyệt
setItem, getItem, removeItem của localStorage để lưu giá trị trong trình duyệt, cách lưu mảng dưới dạng JSON vì giá trị bị đổi thành chuỗi, null trả về khi key không tồn tại, và giới hạn dung lượng.
Hẹn giờ và ngày tháng — setTimeout / Date / Intl
Hẹn giờ gọi hàm bằng setTimeout, dừng setInterval, tháng tính từ 0 của Date, hiển thị ngày bằng Intl.DateTimeFormat và đếm số ngày giữa hai mốc.