Javascript Tutorial and Projects Course

Khóa học Hướng dẫn và Dự án Javascript

Học Javascript qua việc xây dựng 30+ dự án thú vị

4.7

(4,559 đánh giá)

27,805 học viên

Giảng viên

Jānis Smilga

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

79.000đ 2.339.000đ -97%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

46.5 giờ video

450 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

#Dom #Javascript #Web Development

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

Hiểu Javascript là gì

Biết cách thêm Javascript vào dự án

Nắm vững kiến thức cơ bản về Javascript

Xây dựng dự án thực tế bằng Javascript

Yêu cầu

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

Máy tính

Trình soạn thảo văn bản

Trình duyệt web

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

Dành cho tất cả những ai muốn bắt đầu học Javascript

Nội dung khóa học

23 phần • 450 bài giảng

1 Tổng quan

2 Mục tiêu khóa học

3 Cấu trúc khóa học

4 Sửa lỗi mờ video

5 Đánh giá khóa học

6 Kênh Discord

1 Giới thiệu

2 Cài đặt Google Chrome

3 Cài đặt VS-CODE

4 Tổng quan về VS-CODE

5 Cài đặt Live-Preview

6 Cài đặt Prettier

7 Emmet

8 Thiết lập của tôi

1 Giới thiệu phần cơ bản

2 Dự án cơ bản

3 Javascript nội tuyến

4 Javascript nội bộ

5 Javascript bên ngoài

6 Dọn dẹp không gian làm việc

7 Phương thức hỗ trợ

8 Câu lệnh và chú thích

9 Biến

10 Gán giá trị biến sau

11 Quy tắc đặt tên biến

12 const, let, var

13 Giới thiệu thử thách

14 Thử thách về Biến

15 Cài đặt Prettier

16 Dấu ngoặc kép

17 Nối chuỗi

18 Thử thách nối chuỗi

19 Cơ bản về Số

20 Số - Tính năng bổ sung

21 Thử thách về Số

22 Chuyển đổi kiểu ngầm định

23 Kiểu dữ liệu

24 Mảng

25 Thử thách về Mảng

26 Hàm - Khai báo, Gọi hàm

27 Hàm - Tham số, Đối số

28 Hàm - Trả về giá trị

29 Biểu thức hàm

30 Thử thách về Hàm

31 Đối tượng

32 Thử thách về Đối tượng

33 Câu lệnh điều kiện - Cơ bản

34 Câu lệnh điều kiện tiếp theo

35 So sánh bằng

36 Toán tử logic

37 Câu lệnh Switch

38 Thử thách điều kiện

39 Vòng lặp while

40 Vòng lặp do while

41 Vòng lặp for

1 Kết nối các điểm

2 Thuộc tính và phương thức Chuỗi

3 Chuỗi mẫu

4 Thử thách về Chuỗi

5 Thuộc tính và phương thức Mảng

6 Bài tập - Họ và tên

7 Bài tập - Tính tổng

8 Giá trị vs Tham chiếu

9 Null và Undefined

10 Truthy và Falsy

11 Toán tử ba ngôi

12 Phạm vi toàn cục

13 Phạm vi cục bộ

14 Tra cứu biến

15 Hàm gọi lại, Hàm bậc cao

16 Bộ lặp mảng

17 forEach

18 map

19 filter

20 find

21 reduce

22 Thử thách Mảng - Giới thiệu

23 Thử thách Mảng - Thiết lập dữ liệu

24 Thử thách Mảng - Nhiều tệp

25 Thử thách Mảng - Map

26 Thử thách Mảng - Filter

27 Thử thách Mảng - Cú pháp Filter thay thế

28 Thử thách Mảng - Find

29 Thử thách Mảng - Reduce #1

30 Ký hiệu ngoặc vuông

31 Thử thách Mảng - Reduce #2

32 Đối tượng Math

33 Đối tượng Date

1 DOM - Giới thiệu

2 DOM - Khái niệm chung

3 Tổng quan về Window và Document

4 Get Element By ID

5 Get Elements By Tag Name

6 Get Element By Class Name

7 Query Selector và Query Selector ALL

8 Điều hướng DOM - Phần tử con

9 Điều hướng DOM - parentElement

10 Điều hướng DOM - nextSibling, previousSibling

11 Điều hướng DOM - nextElementSibling, previousElementSibling

12 textContent nodeValue

13 getAttribute() setAttribute()

14 classList và className

15 createElement - createTextNode - appendChild

16 insertBefore

17 replaceChild

18 prepend innerText

19 remove removeChild

20 innerHTML và textContent

21 Thay đổi CSS với thuộc tính style

22 Tổng quan về Sự kiện

23 Sự kiện Click

24 Tham chiếu hàm

25 Sự kiện Chuột

26 Sự kiện Bàn phím

27 Đối tượng Sự kiện

28 CurrentTarget vs Target

29 Lan truyền sự kiện - Bubbling - Capturing

30 Ví dụ về lan truyền sự kiện

31 Biểu mẫu

32 Bộ nhớ cục bộ

33 Bộ nhớ cục bộ với nhiều giá trị

34 setTimeout

35 setInterval

36 Sự kiện - "DOMContentLoaded"

37 Sự kiện - "load"

38 Sự kiện - "scroll"

39 Width, Height, GetBoundingClientRect

40 Sự kiện - "resize"

1 Giới thiệu

2 Dự án mẫu

3 Thiết lập

4 Color Flipper - HTML đơn giản

5 Color Flipper - Javascript đơn giản

6 Color Flipper - Mã Hex

7 Counter HTML

8 Counter JS

9 Reviews HTML

10 Reviews JS

11 Navbar HTML

12 Navbar - Khái niệm chung

13 Navbar JS

14 Sidebar HTML

15 Sidebar - Thiết lập thủ công

16 Sidebar JS

17 Modal HTML

18 Thử thách Modal

19 Modal JS

20 Questions HTML

21 Questions - Khái niệm chung

22 Questions JS - Điều hướng DOM

23 Questions JS - Sử dụng bộ chọn bên trong phần tử

24 Menu HTML

25 Hiển thị mục khi trang tải

26 Tái cấu trúc

27 Filter Buttons HTML

28 Filter Buttons JS

29 Nút lọc động

30 Danh mục duy nhất

31 Hoàn thiện nút lọc động

32 Giới thiệu Video

33 Video HTML

34 Thiết lập lớp phủ video

35 Video JS

36 Bộ tải trước video

37 Giới thiệu Scroll

38 Scroll HTML

39 Scroll - Thiết lập ngày

40 Scroll - Thiết lập chuyển đổi đơn giản

41 Scroll - Chuyển đổi động

42 Scroll - Thanh điều hướng cố định

43 Thiết lập cuộn mượt

44 Hoàn thiện cuộn mượt

45 Tabs HTML

46 Tabs JS

47 Countdown HTML

48 Đặt ngày

49 Tính thời gian còn lại

50 Thời gian từ bây giờ

51 Lorem Ipsum HTML

52 Lorem Ipsum JS

53 GroceryBud - Giới thiệu

54 GroceryBud - HTML

55 GroceryBud - Chọn phần tử

56 GroceryBud - Thiết lập addItem

57 GroceryBud - Truthy shortcut

58 GroceryBud - Hiển thị thông báo

59 GroceryBud - Thêm mục

60 GroceryBud - Đặt lại mặc định

61 GroceryBud - Xóa tất cả mục

62 GroceryBud - Chọn nút chỉnh sửa và xóa

63 GroceryBud - Xóa mục

64 GroceryBud - Chỉnh sửa mục

65 GroceryBud - Thông tin localStorage

66 GroceryBud - Thêm vào localStorage

67 GroceryBud - Xóa khỏi localStorage

68 GroceryBud - Chỉnh sửa localStorage

69 GroceryBud - Tải mục từ localStorage

70 Giới thiệu Slider

71 Slider HTML

72 Khái niệm chung về Slider

73 Thiết lập Slider JS

74 Slider JS - Cách tiếp cận Slides

75 Slider JS - Cách tiếp cận Button

1 Giới thiệu Netlify

2 Tùy chọn Kéo và Thả

3 Triển khai liên tục

1 Giới thiệu

2 Cơ bản về Đối tượng

3 Đối tượng lồng nhau, Ký hiệu ngoặc vuông

4 'this' - Cơ bản về từ khóa

5 "this" - Nâng cao về từ khóa

6 Hàm Factory

7 Hàm Constructor

8 Thuộc tính Constructor

9 Thuộc tính Prototype

10 Tra cứu thuộc tính

11 Cú pháp Class ES6

12 Call

13 Apply, Arguments

14 Bind

15 Ví dụ về Button

1 Giới thiệu

2 Thiết lập

3 Counter - HTML

4 Thiết lập Counter

5 Counter - Chọn phần tử

6 Counter - Các hàm

7 Counter - Hoàn thiện

8 Counter - Tái cấu trúc bằng Class

9 Giới thiệu Gallery

10 Gallery - HTML

11 Gallery - Chọn phần tử

12 Gallery - Thiết lập mở Modal

13 Gallery - Hoàn thiện mở Modal

14 Gallery - Đóng Modal

15 Gallery - Prev và Next

16 Gallery - Chọn hình ảnh

17 Gallery - Tái cấu trúc bằng Class

1 Giới thiệu

2 IIFE

3 Hoisting

4 Closure

5 Closure - Ví dụ cơ bản

6 Closure - Ví dụ hoàn chỉnh

1 Giới thiệu ES6 Module

2 VAR, LET, CONST

3 Phạm vi hàm và phạm vi khối

4 Chuỗi mẫu

5 Chuỗi mẫu - HTML

6 Tagged Template Literals

7 Hàm mũi tên - Cơ bản

8 Hàm mũi tên - Đối tượng và "this"

9 Hàm mũi tên - Chọn phần tử và "this"

10 Tham số mặc định và các vấn đề Hoisting

11 Phân rã mảng

12 Hoán đổi biến

13 Phân rã đối tượng

14 Phân rã tham số hàm

15 Phương thức chuỗi mới

16 Vòng lặp "for of"

17 Toán tử Spread - Cơ bản

18 Toán tử Spread - Đối tượng

19 Toán tử Spread - Phần tử DOM

20 Toán tử Spread - Đối số hàm

21 Toán tử Rest

22 Array.of

23 Array.from - Chuỗi và Đối tượng Arguments

24 Array.from - Phần tử DOM (NodeList)

25 find, findIndex, every, some

26 Vòng lặp "for in"

27 Object.keys()

28 Object.values()

29 Object.entries()

30 new Set() - Tổng quan

31 new Set() - Trường hợp sử dụng

32 String includes()

33 Array includes()

34 Thông tin quan trọng

1 Giới thiệu dự án

2 Numbers - Giới thiệu

3 Numbers - Thiết lập

4 Readme

5 Numbers - Cấu trúc HTML

6 Numbers - Chọn phần tử

7 Numbers - Biến ban đầu

8 Numbers - Hoàn thiện

9 Dark Mode - Giới thiệu

10 Dark Mode - Thiết lập

11 Dark Mode - Cấu trúc HTML

12 Dark Mode - Chuyển đổi CSS

13 Dark Mode - Nhập dữ liệu

14 Dark Mode - Hiển thị mục

15 Dark Mode - Moment.js

16 Filters - Giới thiệu

17 Filters - Cấu trúc HTML

18 Filters - Hiển thị sản phẩm

19 Filters - Bộ lọc văn bản

20 Filters - Let và mảng gốc

21 Filters - Mảng rỗng

22 Filters - Hiển thị nút

23 Filters - Bộ lọc nút

1 Giới thiệu

2 Thiết lập

3 Xuất có tên

4 Xuất mặc định

5 Lấy phần tử

1 Giới thiệu

2 Đồng bộ

3 Ví dụ công thức

4 Bất đồng bộ

5 Callback Hell

6 Callback Hell - Ví dụ DOM

7 Promises

8 Cập nhật API Unsplash quan trọng!!!

9 Ví dụ Reject

10 Promises - Ví dụ DOM

11 Async/Await

1 Giới thiệu

2 AJAX, HTTP, API

3 Văn bản đơn giản

4 Thêm nút

5 JSON

6 Fetch

7 Fetch - Lỗi "gotcha"

8 Fetch - Bức tranh tổng thể

9 Fetch với hàm

10 Fetch - với async/await

11 Try / Catch

1 Giới thiệu dự án AJAX

2 Dad Jokes - Giới thiệu

3 Dad Jokes - Cấu trúc HTML

4 Nguyên tắc cơ bản API

5 Dad Jokes - Tài liệu

6 Dad Jokes - Chọn phần tử

7 Dad Jokes - Lấy câu đùa ngẫu nhiên

8 Dad Jokes - Đang tải

9 Dad Jokes - Try / Catch

10 Dad Jokes - Throw New Error

11 Products - Giới thiệu

12 Products - Cấu trúc HTML

13 Products - Các trạng thái AJAX có thể

14 Products - Tài liệu API

15 Products - Lấy sản phẩm

16 Products - Đang tải và lỗi

17 Products - Hàm bắt đầu

18 Products - Hiển thị sản phẩm

19 Products - Tham số truy vấn

20 Products - HTML sản phẩm đơn

21 Products - Logic ban đầu

22 Products - Lấy sản phẩm

23 Products - Hiển thị sản phẩm đơn

24 Products - Hiển thị màu sắc

25 Random User - Giới thiệu

26 Random User - HTML

27 Random User - API

28 Random User - Chọn phần tử

29 Random User - Lấy người dùng

30 Random User - Hiển thị người dùng

31 Cocktails - Giới thiệu

32 Cocktails - Thiết lập

33 Cocktails - HTML

34 Cocktails - API

35 Cocktails - Trình bày đồ uống

36 Cocktails - Lấy đồ uống

37 Cocktails - Hiển thị đồ uống

38 Cocktails - Biểu mẫu tìm kiếm

39 Cocktails - Đang tải

40 Cocktails - Đặt đồ uống

41 Cocktails - HTML đồ uống đơn

42 Cocktails - Đồ uống đơn

43 Cocktails - Hiển thị đồ uống đơn

1 Giới thiệu thêm dự án

1 Giới thiệu

2 Dự án mẫu

3 Thiết lập HTML

4 Hiển thị danh sách người

5 Áp dụng CSS

6 Chuyển slide tiếp theo

7 Chuyển slide tiếp theo - Kết thúc mảng

8 Chuyển slide trước đó

1 Giới thiệu

2 Dự án mẫu

3 HTML

4 Bật/tắt thanh bên

5 Hoàn thiện thanh bên

6 Thiết lập menu phụ

7 Liên kết menu phụ

8 Menu phụ - Ẩn và bố cục cột

1 Giới thiệu

2 Dự án mẫu

3 Thiết lập

4 Lấy dữ liệu người theo dõi

5 Hiển thị người theo dõi

6 Phân trang - Tạo các trang

7 Hiển thị nút bấm

8 Chức năng nút bấm

1 Giới thiệu

2 Cấu trúc HTML

3 Tài liệu API

4 Thiết lập ban đầu

5 Lấy dữ liệu trang

6 Hiển thị kết quả

1 Giới thiệu

2 Giới thiệu về dự án

3 Dự án mẫu

4 Thiết lập

5 Tổng quan dự án mẫu

6 Thanh điều hướng, Hero - HTML

7 HTML thanh bên

8 Bật/tắt thanh bên

9 HTML giỏ hàng

10 Bật/tắt giỏ hàng

11 Trang Giới thiệu

12 Thông tin quan trọng!!!

13 Tổng quan API

14 Sản phẩm nổi bật - HTML

15 Lấy dữ liệu sản phẩm

16 Thiết lập cửa hàng

17 Xuất - Cú pháp thay thế

18 LocalStorage

19 Sản phẩm nổi bật

20 Hiển thị sản phẩm

21 Định dạng giá

22 Thiết lập thêm vào giỏ hàng

23 HTML sản phẩm

24 Hiển thị tất cả sản phẩm

25 Tải trang

26 HTML bộ lọc

27 Bộ lọc tìm kiếm

28 Bộ lọc công ty

29 Bộ lọc giá

30 Sản phẩm đơn - Tổng quan

31 Sản phẩm đơn - HTML

32 Sản phẩm đơn - JS ban đầu

33 Sản phẩm đơn - Lấy dữ liệu sản phẩm

34 Sản phẩm đơn - Lỗi khi lấy dữ liệu

35 Sản phẩm đơn - Hoàn thiện

36 setupCart - Thiết lập ban đầu

37 addToCart - Thiết lập

38 Thêm vào DOM giỏ hàng

39 addToCart - Tổng số

40 setupCart - Khởi tạo

41 Giỏ hàng - Cập nhật sản phẩm

42 Giỏ hàng - Xóa sản phẩm

43 Giỏ hàng - Tăng số lượng

44 Giỏ hàng - Giảm số lượng

45 Sửa lỗi trang sản phẩm

46 Sửa lỗi 2

47 Dự án hoàn thiện

1 Phần thưởng

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

Master JavaScript: The Language Powering the Modern Web

Course Overview: JavaScript (JS), the pulsing heart of modern web development, is a versatile and powerful programming language, renowned for its lightweight, efficient, and highly adaptable nature. This course delves into JavaScript as not only the cornerstone of web scripting but also a robust language used in diverse environments beyond browsers, such as Node.js, Apache CouchDB, and Adobe Acrobat. Embrace the journey through JavaScript's dynamic and multi-faceted landscape, exploring its prototype-based structure, single-threaded execution, and support for various programming paradigms including object-oriented, imperative, and functional programming.

Why JavaScript?

Global Dominance: Stand at the forefront of programming with JavaScript, the world's most popular language.
Web's Backbone: Master the de facto language that shapes and animates the web.
Accessibility: Discover the ease of learning JavaScript, making it an ideal starting point for aspiring developers.
Career Gateway: Unlock abundant job opportunities by acquiring in-demand JavaScript skills.
Ubiquity: Experience JavaScript's versatility, powering everything from server-side applications (Node.js) to cross-platform desktop apps.

Course Structure: Designed for beginners and intermediate learners alike, this comprehensive course requires only a foundational knowledge of HTML and CSS. Step into the world of JavaScript, learning to integrate it into your projects, and understanding its core concepts. By the end of this journey, you will have built an impressive portfolio of projects, showcasing your newfound skills.

Project Portfolio:

Interactive Color Flipper
Dynamic Counter Application
Customer Review Interface
Responsive Navigation Bar
Customizable Sidebar
Interactive Modal Dialogs
FAQ Accordions
Dynamic Menu Builder
Custom Video Player
Smooth Scrolling Effects
Interactive Tabs System
Countdown Timer
Lorem Ipsum Generator
Grocery List App
Image Slider
Object-Oriented Counters
OOP-Based Gallery
Number Facts Generator
Dark Mode Toggle
Dynamic Content Filters
Dad Jokes Generator
Product Showcase
Random User Generator
Cocktail Recipes App
Advanced Image Slider
Stripe-Style Submenus
Pagination Systems
Wikipedia Viewer
Comfy Sloth E-commerce Store
Comfy Sloth E-commerce Store

Embrace the JavaScript Adventure! Join us on this exciting journey to master JavaScript, the language that powers the modern web. Equip yourself with the skills to build, innovate, and excel in the dynamic world of web development.