inflearn logo
inflearn logo

JavaScript hoàn thành trong một lần: Từ JavaScript thuần đến phát triển SPA

Hãy cùng học từ cú pháp cơ bản đến các khái niệm chuyên sâu và phát triển SPA bằng Vanilla JavaScript nhé🔥

(4.9) 148 đánh giá

8,403 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

JavaScript
JavaScript
SPA
SPA
DOM
DOM
REST API
REST API
JavaScript
JavaScript
SPA
SPA
DOM
DOM
REST API
REST API

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

4.9

5.0

Chan

89% đã tham gia

Tôi đã từng học các khóa học JavaScript một hoặc hai lần rồi. Nhưng lạ thay, tôi luôn cảm thấy như mình đã biết, nhưng khi thực sự muốn sử dụng thì lại không được, và tình trạng này cứ tiếp diễn mãi. Khóa học này đã giúp tôi sắp xếp từng phần mơ hồ đó một cách rõ ràng. Không chỉ giải thích cú pháp rồi kết thúc, mà còn liên tục giải thích tại sao cần khái niệm này, và sau này nó được sử dụng như thế nào trong SPA, điều đó thật tuyệt vời. Đặc biệt phần dự án rất hay. Thông thường chỉ gõ theo rồi kết thúc, nhưng khóa học này có luồng: dự án trung gian → nhận ra vấn đề → bổ sung khái niệm → dự án cuối cùng, nên không thể không suy nghĩ. Thành thật mà nói thì không dễ, nhưng nhờ đó mà học được rất nhiều. Tài liệu khóa học (handbook) cũng được tổ chức rất tốt, nên không chỉ khi học mà cả khi ôn tập tôi cũng liên tục tham khảo. Tôi muốn giới thiệu khóa học này cho những ai muốn sắp xếp lại JavaScript một cách đúng đắn.

5.0

산독기

100% đã tham gia

Tôi đã hoàn thành khóa học! Điều tôi cảm nhận được khi hoàn thành khóa học là rất vui vì có thể nghe được một khóa học được chuẩn bị thật kỹ lưỡng với mức giá hợp lý. Các khóa học lập trình có giá cả rất đa dạng, và tôi hiện tại cũng đang học nhiều khóa học khác nhau, nhưng không phải khóa học nào đắt tiền thì giảng viên sẽ trả lời câu hỏi tốt hay có cập nhật code. Vì vậy tôi đã rất thất vọng với một giảng viên nào đó, nhưng khi nghe khóa học của anh Hyobin thì thực sự khác biệt rõ rệt. Tuy hơi ngại khi so sánh với người khác, nhưng tôi mong những nhà giáo dục như anh Hyobin sẽ ngày càng thành công hơn. Nếu anh mở rộng khóa học sang React hay Next.js ngoài JavaScript thì sẽ rất tuyệt! Với tư cách là người dùng Inflearn n năm, đây là khóa học có tính hiệu quả chi phí cao nhất và bổ ích nhất. Tất nhiên dự án cuối cùng khá khó, nhưng tôi nghĩ độ khó đó có ý nghĩa là phải khiêm tốn ôn tập lại, nên nó đã tạo động lực cho tôi. Tôi chưa bao giờ viết đánh giá khóa học dài như thế này, nhưng vì đã trở thành fan của anh Hyobin nên tôi viết đánh giá này để giới thiệu cho những người khác! Sổ tay chi tiết, phát âm rõ ràng, ví dụ gọn gàng, trả lời câu hỏi nhanh chóng, v.v. không có điểm nào đáng tiếc. Mong anh sẽ ngày càng nổi tiếng hơn ở Inflearn và trong ngành giáo dục! Cảm ơn anh vì khóa học hay!

5.0

kimday365

100% đã tham gia

Tôi đã chuẩn bị chuyển việc và sau gần 5 năm lại quay trở lại với FE. Khi bắt đầu lại thì không biết nên học từ đâu, cảm thấy rất bối rối, Qua việc nghe bài giảng này, từ việc ôn tập lại những phần tôi đã biết sơ qua trước đây, đến cấu trúc ngữ pháp mới, và các khóa học nâng cao như đơn vị object / property / component, tôi đã có thể học được rất nhiều điều bổ ích. Đặc biệt việc tiến hành dự án thực sự là khoảng thời gian rất có ích. Không chỉ đơn thuần học kiến thức cơ bản & ngữ pháp mà còn học được cách sử dụng trong thực tế sẽ như thế nào, Thay vì tạo todo list như mọi lần, việc tiến hành một dự án mới đã là khoảng thời gian thú vị hơn nữa! Tôi rất mong chờ bài giảng tiếp theo! Cảm ơn bài giảng hay :)

Bạn sẽ nhận được điều này sau khi học.

  • Cú pháp cơ bản của Vanilla JavaScript

  • Các khái niệm JavaScript cần thiết cho phát triển thực tế

  • Lập trình bất đồng bộ thông qua đối tượng Promise và async/await

  • Component và mô-đun hóa

  • Thao tác với các phần tử web bằng DOM API

  • Quản lý trạng thái bằng cách sử dụng state và setState

  • Phát triển SPA không cần thư viện

  • Điều hướng thông qua History API

  • Sử dụng JavaScript như React

> Đăng ký Thử thách Một miếng - Khóa 8 : https://link.onebitefe.com/r/vd8zra

🍀 Các học viên của khóa 'Bước đầu học JavaScript dành cho Web Frontend'
vui lòng mua khóa học với mức giá ưu đãi (giảm 35%) thông qua liên kết dưới đây!!

-> Link mã giảm giá

🤯 Vanilla JavaScript
Tại sao chúng ta cần phải học nó một cách chi tiết?

Vanilla JavaScript về cơ bản có nghĩa là viết mã bằng
JavaScript thuần túy mà không cần bất kỳ thư viện hay khung (framework) nào.

Học Vanilla JavaScript là một quá trình quan trọng để xây dựng nền tảng phát triển web,
giúp bạn có thể hiểu được nguyên lý cơ bảncách thức hoạt động của JavaScript,
từ đó có thể sử dụng các công cụ và công nghệ đa dạng một cách hiệu quả.

Ngay cả trong những tình huống sử dụng các thư viện như React.js, bạn vẫn có thể hiểu được các công nghệ này hoạt động như thế nào và
nuôi dưỡng khả năng phát triển tự do mà không phụ thuộc vào thư viện, vì vậy việc học JavaScript thuần túy là một quá trình rất quan trọng đối với các nhà phát triển.

Khóa học JavaScript hoàn thành trong một lần là..!

Khóa học này bao gồm các cú pháp mới nhất của JavaScript, giúp bạn học cách phát triển 2 dự án từ gọi API, thao tác DOM, cho đến quản lý trạng thái, định tuyến (routing) và phát triển SPA bằng cách chỉ sử dụng JavaScript thuần túy
mà không cần thư viện.

Học cú pháp JavaScript mới nhất
phiên bản ES6+

Từ API, thao tác DOM, quản lý trạng thái cho đến phát triển SPA, tất cả trong một!

Kiểm tra nội dung và học lặp lại
thông qua tổng cộng 2 dự án

Bạn có thể học các khái niệm JavaScript cùng với tài liệu giảng dạy gọn gàng 👍
Toàn bộ tài liệu giảng dạy được cung cấp dưới dạng tệp pdf như dưới đây.

Xem trước tài liệu bài giảng Section 1~Section 5

Xem trước tài liệu bài giảng Section 6~Section 9

Khi hoàn thành khóa học JavaScript trong một lần, bạn có thể phát triển 2 dự án như
dưới đây.

Dự án giữa kỳ

Dự án cuối khóa

Để bạn có thể kiểm tra lại những phần chưa hiểu rõ trong khi học,
hoặc ôn tập lại nội dung ngay cả sau khi kết thúc khóa học,
chúng tôi cũng cung cấp sổ tay (handbook) đi kèm với bài giảng như hình minh họa bên dưới!

Sổ tay (Website giáo trình bài giảng)

🙋🏻‍♀️ Rất đề xuất cho những đối tượng sau đây

Từ cơ bản đến nâng cao trong một lần!
Những ai muốn học từ các khái niệm cơ bản đến chuyên sâu cùng một lúc.
Hãy học các khái niệm cần thiết thông qua việc trực tiếp phát triển dự án.

Tôi đang chuẩn bị xin việc ở vị trí Frontend.
Những người đang chuẩn bị tìm việc làm với tư cách là nhà phát triển Frontend.

Hãy học các khái niệm về thao tác DOM, quản lý trạng thái và SPA.

Tôi không rành về Vanilla JavaScript.
Những người đang sử dụng React.js, Next.js nhưng không tự tin về JavaScript.

Hãy học lại các khái niệm cần thiết trước khi sử dụng thư viện và framework.

Sau khi khóa học kết thúc..

  • Bạn có thể hiểu được cú pháp cơ bản của Vanilla JavaScript cũng như các khái niệm từ cơ bản đến chuyên sâu.

  • Bạn có thể hiểu được các khái niệm như phương thức mảng, xử lý bất đồng bộ, thành phần và mô-đun hóa thường được sử dụng trong thực tế.

  • Thao tác DOM, gọi API, quản lý trạng thái, phát triển SPA, v.v. có thể được thực hiện chỉ bằng JavaScript.


  • Bạn có thể học React.js và Next.js một cách dễ dàng hơn.

💥 Điểm khác biệt so với các bài giảng khác là đây

Khóa học JavaScript hoàn thành trong một lần này có những điểm khác biệt sau đây.

Giải thích chi tiết khái niệm thông qua tài liệu bài giảng

Hình ảnh động được áp dụng vào tài liệu rõ ràng và trực quan, cùng với mã ví dụ, bạn sẽ được học tập một cách tỉ mỉ từ ngữ pháp và khái niệm cơ bản cho đến các khái niệm nâng cao.

Mã ví dụ cùng nhau soạn thảo

Viết trực tiếp các khái niệm đã học vào VSCode.
Thực hành viết mã JavaScript cùng nhau thông qua live coding.

Phát triển dự án giữa kỳ và học thêm các khái niệm bổ sung

Dự án giữa kỳ giúp bạn kiểm tra xem mình đã hiểu rõ những nội dung đã học hay chưa. Sau đó, chúng ta sẽ xác định các vấn đề của dự án đã phát triển và học thêm các khái niệm cần thiết để tạo ra một dự án tốt hơn.

Ôn tập toàn bộ nội dung thông qua phát triển dự án cuối khóa

Sử dụng tất cả nội dung đã học trong bài giảng để cùng nhau phát triển dự án cuối khóa. Thông qua việc phát triển dự án, bạn có thể ôn tập lại các nội dung một lần nữa.

Cung cấp tất cả tài liệu

Đối với các học viên, giáo trình bài giảng sẽ được cung cấp dưới dạng trang web (sổ tay),
còn mã dự án và các tài liệu sử dụng trong bài giảng sẽ được cung cấp lần lượt qua github và tệp pdf.

🔎 Tôi muốn biết chi tiết về chương trình học cụ thể

Chương trình giảng dạy của khóa học JavaScript trọn gói như sau:

📌 Phần 1. Cơ bản về JavaScript ~ Phần 2. Bất đồng bộ và API

Đầu tiên, bạn sẽ học các cú pháp cơ bản và khái niệm chuyên sâu thông qua tài liệu bài giảng (ppt), sau đó
áp dụng những gì đã học để trực tiếp viết mã ví dụ nhằm củng cố vững chắc các khái niệm.

📌 Phần 3. DOM và DOM API

Sau khi tìm hiểu kỹ về DOM, chúng ta sẽ học về nhiều DOM API khác nhau để có thể thao tác với DOM.

Trong khi học cách thao tác với các phần tử form thường được sử dụng, chúng ta sẽ trực tiếp thao tác với DOM bằng cách sử dụng DOM API.

📌 Phần 4. this và hàm mũi tên

Chúng ta sẽ tìm hiểu về từ khóa this trong JavaScript
và thông qua thực hành để kiểm tra xem giá trị nào được ràng buộc với this tùy theo từng tình huống.

Sau đó, chúng ta cũng sẽ tìm hiểu về mối quan hệ giữa this và hàm mũi tên (arrow function), cũng như giữa this và hàm thông thường (regular function).

📌 Phần 5. Dự án giữa kỳ

Chúng ta sẽ phát triển một trang web đơn giản bằng cách sử dụng những nội dung đã học cho đến nay.
Sau khi phát triển trang web, chúng ta sẽ từng bước xác định các vấn đề nảy sinh trong quá trình thực hiện.

📌 Phần 6. Thành phần và Hệ thống mô-đun

Chúng ta sẽ tìm hiểu về hệ thống component và module để giải quyết các vấn đề phát sinh trong quá trình phát triển dự án giữa kỳ.
Đầu tiên, chúng ta sẽ học qua tài liệu bài giảng và mã ví dụ, sau đó áp dụng những nội dung đã học vào dự án giữa kỳ để khắc phục các vấn đề.

📌 Phần 7. Quản lý trạng thái và SPA

Bạn sẽ được học về Quản lý trạng thái và SPA, những khái niệm cần thiết để giải quyết các vấn đề phát sinh trong dự án giữa kỳ.
Trong khi tìm hiểu Quản lý trạng thái là gì và cách phát triển nó như thế nào, chúng ta cũng sẽ xem xét các khái niệm về SPA và MPA cũng như CSR và SSR. Cuối cùng, bạn sẽ áp dụng những kiến thức đã học để chỉnh sửa mã nguồn dự án giữa kỳ.

📌 Phần 8. Dự án cuối khóa

Sử dụng tất cả những nội dung đã học từ trước đến nay để phát triển dự án cuối khóa.

Chúng ta sẽ tìm hiểu các tính năng cần thiết cho một trang web, cùng nhau chia nhỏ các tính năng đó thành các component, sau đó trực tiếp phát triển trang web bằng VSCode.

Tính năng tìm kiếm, tính năng lọc, chuyển trang và các chức năng khác sẽ được phát triển.

💬 Câu hỏi thường gặp

Hỏi: Người không chuyên về công nghệ có thể theo học được không?

Vì khóa học bao gồm cả các khái niệm cơ bản và cung cấp đầy đủ tài liệu bài giảng, nên ngay cả những người mới bắt đầu học lập trình cũng có thể tham gia. Tuy nhiên, hãy cố gắng học đi học lại nhiều lần nhé!

Tôi muốn nghe thử bài giảng trước!

Chúng tôi đang công khai miễn phí 8 bài giảng.

Đối với những bạn muốn nghe thử bài giảng trước,
hãy học thử các bài giảng có ghi chữ 'Xem trước' nhé.

Q. Tôi không chắc liệu khóa học này có giúp ích được gì không..

Nếu bạn đã biết JavaScript ở một mức độ nhất định,
hãy thử tự chẩn đoán thông qua danh sách kiểm tra dưới đây!

Nếu bạn thuộc về từ 8 mục trở lên trong số 10 mục này,
bạn không cần phải tham gia khóa học cũng được 😄

  • Tôi hiểu rõ về phạm vi (scope)hoisting.

  • Hiểu về đối tượng Promisebất đồng bộ, đồng thời có thể gọi API để nhận dữ liệu.

  • Có thể thao tác với DOM bằng JavaScript.

  • Hiểu rõ về this trong JavaScript.

  • SPAcách thức hoạt động của SPA được hiểu rõ.

  • Có thể triển khai quản lý trạng thái mà không cần thư viện.

  • Có thể thành phần hóa (component hóa) trang web theo từng chức năng.

  • Mô-đun hóa các tệp và có thể phát triển bằng cách sử dụng import, export.

  • Có thể thực hiện điều hướng trang (routing) bằng cách sử dụng history api.

  • Có thể xây dựng SPA bằng JavaScript.


📣 Lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Sử dụng trình duyệt Chrome.

  • Sử dụng VSCode để viết mã. (Cách cài đặt và cách sử dụng đã được bao gồm trong bài giảng.)

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

  • Tài liệu được sử dụng trong bài giảng được cung cấp dưới định dạng pdf.

  • Nội dung được sử dụng trong bài giảng được cung cấp dưới định dạng trang web.

  • Mã nguồn dự án có thể được kiểm tra thông qua liên kết github.

Kiến thức tiên quyết và lưu ý

  • Kiến thức tiên quyết: HTML, CSS

    • Các thẻ thường được sử dụng trong HTML được giải thích trong bài giảng.

    • Mã CSS sẽ được cung cấp riêng.

  • Lưu ý cụ thể

    • Vui lòng sử dụng trình duyệt Chrome và VSCode để học tập.

    • Câu trả lời cho các câu hỏi sẽ được soạn thảo trong vòng 24 giờ.


띠배너

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những người muốn tìm việc làm với vị trí nhà phát triển Front-end

  • Những người muốn vừa phát triển dự án vừa học hỏi nhiều khái niệm khác nhau.

  • Những bạn muốn học Vanilla JavaScript

  • Những người muốn học cùng với tài liệu bài giảng

  • Những người muốn học tập cùng nhiều người khác thông qua các nhóm học tập (study)

Cần biết trước khi bắt đầu?

  • HTML

  • CSS

Xin chào
Đây là hyobin

11,988

Học viên

415

Đánh giá

137

Trả lời

4.9

Xếp hạng

14

Các khóa học

Xin chào, tôi là Kim Hyo-bin 😊
Tôi đang cung cấp các bài giảng dễ hiểu và tận tâm dành cho những bạn mong muốn trở thành nhà phát triển Front-end.

(Hiện tại) Giảng viên đào tạo lập trình Front-end

(Cựu) Trưởng nhóm phát triển Frontend tại Startup


Trang web

https://hyobb.com/

Bài giảng trực tuyến

Sách

Hoạt động bên ngoài

  • Tác giả YozumIT

  • Tiến hành các bài giảng đặc biệt tại Udemy, Codeit, Đại học Nữ Hanyang, v.v.

Thêm

Chương trình giảng dạy

Tất cả

55 bài giảng ∙ (9giờ 40phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

148 đánh giá

4.9

148 đánh giá

  • dangwoo님의 프로필 이미지
    dangwoo

    Đánh giá 21

    Đánh giá trung bình 5.0

    5

    15% đã tham gia

    Ngay cả khi bạn mới làm quen với JavaScript, tôi nghĩ đây là khóa học tốt nhất để học trước khi học React, bắt đầu từ những điều cơ bản! Cảm ơn bạn đã thực hiện một bài giảng tuyệt vời!!

    • hyobin
      Giảng viên

      Dongwoo! Cảm ơn bạn đã đánh giá tốt 😊

  • ygvbhy518205님의 프로필 이미지
    ygvbhy518205

    Đánh giá 13

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    56% đã tham gia

    Tôi đã biết đến khóa học này sau khi xem bài giảng của Lee Jung-hwan và đăng ký vào cộng đồng Hanib. Vì tôi chỉ mới sử dụng SPA chứ chưa tự mình tạo ra nó bao giờ, nên tôi đã nhấn nút thanh toán ngay lập tức 😆😆. Vì đang có việc phải làm nên tôi không thể tham gia thử thách Hanib, nhưng tôi rất hài lòng với khóa học này. Tôi đã tua qua những phần mình đã biết và chỉ nghe phần cuối của bài giảng trong khi ôn tập bằng sổ tay, và tôi rất hài lòng với khóa học này. Cách phát âm của Lee Jung-hwan rất tốt nên nghe rất dễ, còn 효빈님 thì có cách phát âm đặc biệt tốt. Cảm ơn bạn.

    • hyobin
      Giảng viên

      SK님! Cảm ơn bạn vì đánh giá tốt ạ 😊 Bạn có thể tham gia thử thách "Một miếng" để ôn tập lại sau này nhé :) Một lần nữa xin cảm ơn bạn vì đánh giá tốt ạ 👍

  • minzinging7984님의 프로필 이미지
    minzinging7984

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    33% đã tham gia

    Các tài liệu trực quan rõ ràng và hơn hết, thật tuyệt khi họ giải thích từng bước một cách chậm rãi thông qua mã hóa trực tiếp. Tôi sẽ tiếp tục học và hoàn thành khóa học! Cảm ơn bạn vì bài giảng tuyệt vời.

    • hyobin
      Giảng viên

      Cảm ơn bạn đã đánh giá tốt😀 Mong bạn kiên trì!!

  • skateboard295254님의 프로필 이미지
    skateboard295254

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi nghĩ rằng đây là một khóa học phù hợp với những người còn thiếu kiến thức về JavaScript. Tôi cảm thấy rất hữu ích vì tôi có thể nắm bắt được những khái niệm cần thiết về Vanilla JavaScript một cách dễ dàng 👍 Sổ tay được cung cấp giúp tôi viết code dự án một cách thuận tiện!! Nó rất tốt để ôn tập và cũng rất tuyệt để xem cùng với các bài giảng. Tôi đã có thể tham gia một khóa học hay với giá cả phải chăng. Cảm ơn bạn!!

    • hyobin
      Giảng viên

      Chào Ratatouille 😊 Cảm ơn bạn vì những đánh giá khoá học tích cực!! Chúc mừng bạn đã hoàn thành khoá học 🥳🥳

  • devrooney님의 프로필 이미지
    devrooney

    Đánh giá 3

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    Giọng nói rõ ràng và phát âm chuẩn xác nên nghe ở tốc độ 2x vẫn rõ! Và cấu trúc dễ hiểu. Cảm ơn bạn.

    • hyobin
      Giảng viên

      Ông No Hong-gi! Cảm ơn vì những đánh giá tốt đẹp :) Chúc mừng đã hoàn thành khóa học👍👍

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

737.725 ₫