Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Modern JavaScript From The Beginning 2.0 (Just Updated)

Khóa học JavaScript Hiện Đại Từ Cơ Bản 2.0 (Vừa Cập Nhật)

Khóa học JavaScript Hiện Đại Từ Cơ Bản 2.0 (Vừa Cập Nhật)

Khóa học chuyên sâu 40 giờ đưa bạn từ người mới bắt đầu đến trình độ nâng cao trong JavaScript

4.7
(36,097 đánh giá)
127,629 học viên
Giảng viên
Brad Traversy
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 639.000đ -88%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
40.0 giờ video
285 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026

Bạn sẽ học được gì

Học những kiến thức nền tảng (Biến số, Vòng lặp, Hàm, v.v.)
Hiểu cách JavaScript hoạt động (Ngữ cảnh Thực thi, Call Stack, JavaScript Bất đồng bộ)
Thành thạo Document Object Model & Sự kiện (Tạo tính tương tác)
JavaScript Bất đồng bộ (Callback, Promise, Fetch, Ajax)
Lập trình Hướng đối tượng (Constructor, Prototype, Class)
Công cụ & Quy trình làm việc hiện đại (Webpack, Babel, Cấu trúc tệp, NPM, Plugin & Loader)
Dự án Full Stack với Webpack, Node, Express & MongoDB
5 Dự án thực tế & Hơn 10 dự án nhỏ

Yêu cầu

Kiến thức cơ bản về HTML / CSS

Đối tượng phù hợp

Dành cho những ai muốn học JavaScript hiện đại từ cơ bản đến nâng cao, bao gồm công cụ và thiết lập quy trình làm việc hiện đại

Nội dung khóa học

23 phần • 285 bài giảng
1 Chào mừng đến với khóa học
2 Tổng quan khóa học
3 JavaScript là gì?
4 Công cụ & Thiết lập
5 Chạy JavaScript trong trình duyệt
6 Các liên kết khóa học
1 Giới thiệu phần
2 Các tệp Sandbox
3 Sử dụng Console
4 Chú thích & Phím tắt
5 Biến số & Hằng số
6 Kiểu dữ liệu
7 Kiểu Nguyên thủy vs Kiểu Tham chiếu
8 Chuyển đổi Kiểu dữ liệu
9 Toán tử
10 Ép kiểu
11 Làm việc với Chuỗi
12 Thử thách Viết hoa
13 Làm việc với Số
14 Đối tượng Math
15 Thử thách về Số
16 Ngày & Giờ
17 Phương thức Date & DateTimeFormat API
1 Giới thiệu phần
2 Tạo Mảng
3 Các phương thức Mảng cơ bản
4 Mảng lồng nhau, Nối mảng & Toán tử Spread
5 Thử thách về Mảng
6 Đối tượng Literal
7 Toán tử Spread & Phương thức của Đối tượng
8 Phân rã & Đặt tên
9 Giới thiệu JSON
10 Thử thách về Đối tượng
1 Giới thiệu phần
2 Cơ bản về Hàm
3 Thêm về Tham số & Đối số
4 Phạm vi Toàn cục & Phạm vi Hàm
5 Phạm vi Khối
6 Phạm vi Lồng nhau
7 Khai báo vs Biểu thức
8 Hàm Mũi tên
9 Biểu thức Hàm được Gọi ngay lập tức
10 Các thử thách về Hàm
11 Ngữ cảnh Thực thi
12 Ngữ cảnh Thực thi trong thực tế
13 Call Stack
1 Giới thiệu phần
2 Câu lệnh If
3 If Else & Lồng nhau
4 Câu lệnh Switch
5 Thử thách Máy tính
6 Truthy & Falsy
7 Toán tử Logic
8 Gán Logic
9 Toán tử Ba ngôi
1 Giới thiệu phần
2 Vòng lặp For
3 Break & Continue
4 Vòng lặp While & Do While
5 Thử thách FizzBuzz
6 Vòng lặp For Of
7 Vòng lặp For In
8 Array.forEach
9 Array.filter
10 Array.map
11 Array.reduce
12 Các thử thách về Phương thức Mảng
1 Giới thiệu phần
2 Giới thiệu về DOM
3 Thuộc tính Phần tử Document
4 Bộ chọn DOM - Phần tử đơn
5 Bộ chọn DOM - Nhiều phần tử
6 Duyệt DOM - Phần tử
7 Duyệt DOM - Node
8 Tạo & Thêm Phần tử
9 InnerHTML vs createElement()
10 Tái cấu trúc thành nhiều hàm
11 Chèn Phần tử, Văn bản & HTML
12 Thử thách Tạo hàm insertAfter tùy chỉnh
13 Thay thế Phần tử
14 Xóa Phần tử
15 Làm việc với Kiểu & Lớp
1 Giới thiệu phần
2 Trình nghe Sự kiện
3 Sự kiện Chuột
4 Đối tượng Sự kiện
5 Sự kiện Bàn phím & Thuộc tính Phím
6 Dự án nhỏ KeyCode
7 Sự kiện Input
8 Gửi Biểu mẫu & Đối tượng FormData
9 Nổi bọt Sự kiện
10 Ủy quyền Sự kiện & Nhiều phần tử
11 Tải Trang & Sự kiện Cửa sổ
1 Danh sách Mua sắm - Giới thiệu Dự án
2 Thêm mục vào Danh sách
3 Thiết lập Git & GitHub (Tùy chọn)
4 Xóa & Xóa toàn bộ mục
5 Xóa trạng thái Giao diện
6 Lọc mục
7 Khóa học cấp tốc về Local Storage
8 Thêm mục vào Local Storage
9 Hiển thị mục từ Local Storage
10 Xóa mục khỏi Local Storage
11 Đặt mục để Chỉnh sửa
12 Cập nhật & Đặt lại Trạng thái
13 Ngăn chặn mục trùng lặp
14 Triển khai lên Netlify
1 Giới thiệu phần
2 Luồng Thực thi
3 Cách JavaScript Bất đồng bộ hoạt động
4 setTimeout & clearTimeout
5 setInterval & clearInterval
6 Callback
7 Khóa học cấp tốc về Yêu cầu HTTP
8 Thẻ Network trong DevTools
9 AJAX & Đối tượng XHR
10 Thử thách Dự án Tạo Câu đùa
11 Callback Hell
12 Promise
13 Tái cấu trúc từ Callback sang Promise
14 Chuỗi Promise
15 Promise vs Callback Hell
16 promise.all()
1 Giới thiệu phần
2 Cơ bản về Fetch
3 Dự án nhỏ Random User
4 Tùy chọn Fetch - Phương thức, Body, Headers
5 Dự án nhỏ Typicode Todos [1]
6 Dự án nhỏ Typicode Todos [2]
7 Xử lý Lỗi Fetch API
8 Async & Await
9 Câu lệnh Try...Catch
10 Xử lý Lỗi với Async & Await
11 Nhiều Promise với Async & Await
1 Ứng dụng Phim Flixx - Giới thiệu Dự án
2 Tổng quan Giao diện & Chuẩn bị
3 Tổng quan API & Khóa API
4 Bộ định tuyến Trang & Liên kết Hoạt động
5 Hiển thị Phim Phổ biến
6 Hiệu ứng Quay & Chương trình TV Phổ biến
7 Trang Chi tiết Phim
8 Hình nền Trang Chi tiết
9 Trang Chi tiết Chương trình TV
10 Thanh trượt Swiper
11 Chức năng Tìm kiếm & Cảnh báo Tùy chỉnh
12 Hiển thị Kết quả Tìm kiếm
13 Thêm Phân trang cho Tìm kiếm
1 Giới thiệu phần
2 GeoLocation API
3 Hiển thị Vị trí trên Bản đồ
4 Canvas API
5 requestAnimationFrame
6 Dự án nhỏ Đồng hồ Hoạt hình [1]
7 Dự án nhỏ Đồng hồ Hoạt hình [2]
8 Web Audio API
9 Dự án Trình phát Nhạc
10 Dự án Máy trống
11 Video API
12 Dự án Trình phát Video
13 Web Animations API - Dự án Quả bóng
14 Speech Recognition API
15 Speech Synthesis API
1 Giới thiệu phần
2 OOP là gì?
3 4 Nguyên tắc Cơ bản của OOP
4 Thêm về Đối tượng Literal & Từ khóa "this"
5 Hàm Constructor
6 Literal vs Constructor có sẵn
7 Làm việc với Thuộc tính Đối tượng
8 Prototype & Chuỗi Prototype
9 Thêm Phương thức vào Prototype
10 Object.create
11 Kế thừa Prototype & call()
12 Thử thách Trò chơi OOP
1 Lớp (Classes)
2 Kế thừa Lớp
3 Phương thức Tĩnh
4 bind() & Xác định "this"
5 Getter & Setter với Lớp
6 Getter & Setter với defineProperty()
7 Quy ước Thuộc tính Riêng tư
8 Trường Lớp Riêng tư ES2022
9 Cờ & Mô tả Thuộc tính
10 Đóng dấu & Đóng băng Đối tượng
1 Ứng dụng Tracalorie - Giới thiệu Dự án
2 Thiết lập Giao diện
3 Lập kế hoạch & Tổng quan Dự án
4 Lớp Cơ sở Tracker, Meal & Workout
5 Hiển thị Thống kê Tracker
6 Thanh Tiến trình & Cảnh báo Calo
7 Lớp App, Meal & Workout Mới
8 Tái cấu trúc thành Phương thức _newItem() Duy nhất
9 Hiển thị Meal & Workout Mới
10 Xóa Meal & Workout
11 Lọc & Đặt lại
12 Đặt Giới hạn Calo
13 Lớp Storage & Duy trì Giới hạn Calo
14 Duy trì Tổng Calo vào Local Storage
15 Lưu Meal vào Local Storage
16 Lưu Workout vào Local Storage
17 Xóa Meal & Workout khỏi Local Storage
18 Xóa Mục Storage
1 Giới thiệu Phần
2 Module là gì?
3 Cài đặt & Sử dụng Node.js
4 Module CommonJS
5 Gói NPM
6 Module ES
7 Trình đóng gói Module
8 Thiết lập Webpack Cơ bản
9 CSS & Trình tải Kiểu
10 Plugin HTML Webpack
11 Thiết lập Webpack Dev Server
12 Thiết lập Babel
13 Plugin Trích xuất & Thu nhỏ CSS
14 Tái cấu trúc Tracalorie cho Webpack
15 Triển khai Tracalorie lên Netlify
1 Giới thiệu Phần
2 Symbols
3 Trình lặp (Iterators)
4 Trình tạo (Generators)
5 Dự án nhỏ Profile Scroller
6 Tập hợp (Sets)
7 Bản đồ (Maps)
8 Dự án nhỏ Bình chọn (Poll)
9 Ngăn xếp (Stacks)
10 Hàng đợi (Queues)
11 Danh sách Liên kết (Linked Lists)
1 Giới thiệu & Thuật toán là gì?
2 Kiểm thử Đơn vị là gì?
3 Bắt đầu với Jest
4 Nhóm Kiểm thử với describe()
5 Thuật toán Đảo ngược Chuỗi
6 Thuật toán Palindrome
7 Chia nhỏ Mảng (Array Chunking)
8 Thuật toán Anagram
9 Lấy Phần tử Theo Thẻ - jsdom
10 Có ID Trùng lặp - jsdom
1 Giới thiệu Phần
2 Module FS (Hệ thống Tệp)
3 Module Đường dẫn (Path)
4 Module Hệ điều hành (OS)
5 Module URL & QueryString
6 Module HTTP
1 Ứng dụng Full Stack RandomIdeas - Giới thiệu Dự án
2 Thiết lập Express & API Cơ bản
3 Nodemon & Dọn dẹp Route
4 Xử lý Yêu cầu POST - Thêm Ý tưởng
5 Yêu cầu PUT & DELETE - Cập nhật & Xóa Ý tưởng
6 MongoDB là gì?
7 Thiết lập MongoDB Atlas
8 Kết nối Mongoose & Dotenv
9 Lược đồ & Mô hình Mongoose
10 Truy vấn Cơ sở dữ liệu
1 Quy trình Fullstack
2 Thiết lập Thư mục Client
3 Thành phần Modal
4 Thành phần Ideaform
5 Thành phần IdeaList
6 Dịch vụ API - Lấy Ý tưởng
7 Tạo Ý tưởng qua Biểu mẫu
8 Lưu Tên người dùng vào Local Storage
9 Thêm Xác thực Tên người dùng vào Máy chủ
10 Thêm Chức năng Xóa
11 Triển khai Ứng dụng Fullstack
1 Giới thiệu Dự án
2 Kiến trúc & Tổng quan
3 Thiết lập Mẫu
4 Dữ liệu Âm thanh & Khởi tạo Lớp Chính
5 Trình quản lý Âm thanh & Tải Âm thanh
6 Phát, Tạm dừng & Âm lượng
7 Lớp Giao diện & Thẻ Âm thanh
8 Trình nghe Sự kiện & Chuyển đổi Âm thanh
9 Thanh trượt Âm lượng
10 Âm lượng Tổng (Master)
11 Nút Phát Tổng
12 Nút Đặt lại
13 Cài đặt Mặc định
14 Lưu Cài đặt Tùy chỉnh
15 Hiển thị Cài đặt Tùy chỉnh
16 Tải Cài đặt Tùy chỉnh
17 Xóa Cài đặt Tùy chỉnh
18 Hẹn giờ Ngủ (Sleep Timer)
19 Công tắc Chủ đề (Theme Toggler)
20 Triển khai lên Vercel

Giới thiệu khóa học

This is a 40+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM manipulation, asynchronous JS with promises, async/await and much more. You will even learn how to write unit tests for algorithms. We go into how JavaScript works under the hood including execution context, the call stack, event loop, etc. We learn about Webpack tooling and how to create a modern development environment. At the end, we build a Node.js/Express API with a custom Webpack frontend.


All of the code in the learning modules will go into a folder called "JavaScript Sandbox". This is so we can keep things organized and you can always refer back to it for any code snippets that you may need. All of the final and starter code for the projects is included as well as links to the GitHub Repos.


WHAT YOU WILL LEARN


  • Basics & Fundamentals: Data types, let & const variables, functions, conditionals, loops, object literals, etc

  • Data Structures - Arrays, objects, maps, sets as well as custom data structures like stacks and queues

  • DOM Manipulation - Selectors, traversing the DOM, show/hide, creating & removing elements, event listeners

  • OOP - Constructor functions, prototypes, inheritance, classes, protected properties, getters/setters

  • Async JS - Ajax & XHR, Fetch API, callbacks, promises, async / await

  • Error Handling - Try...Catch, HTTP errors

  • Web & Browser APIs - Canvas, geolocation, audio/video, web animations API

  • Modules & Tooling - CommonJS & ES Modules, Webpack,  plugins, loaders, modern dev environment &  workflow

  • Unit Testing Algorithms - Learn the Jest testing library and algorithms like palindromes and anagrams

  • Node.js & Express - Learn about Node modules, NPM packages and build a REST API with Express & MongoDB

  • Full Stack Development - We build an API with Express and a frontend with Webpack. No frontend frameworks!

  • So So Much More!


COURSE PROJECTS & MINI-PROJECTS


  1. Shopping List

  2. Flix Movie App

  3. Tracalorie OOP Project

  4. Tracalorie Webpack Refactor

  5. Chuck Norris Joke Generator

  6. RandomIdeas Full Stack APP - API & Frontend

  7. Webpack Starter Project

  8. Keycode Mini-Project

  9. Random User Generator

  10. Music Player

  11. Video Player

  12. Drum Machine

  13. Profile Scroller

  14. Polling App

  15. Joke Generator

  16. Ball Animation

  17. Animated Clock

  18. Typicode Todos

  19. Text To Speech

  20. Ambient Sound Mixer - OOP Project


Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Node Js
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊