강의

멘토링

로드맵

BEST
Programming

/

Front-end

Hoàn thành JavaScript một lần: Phát triển SPA với Vanilla JavaScript

Vừa học từ ngữ pháp cơ bản đến khái niệm chuyên sâu, hãy phát triển SPA với Vanilla JavaScript🔥

(4.9) 116 đánh giá

8,253 học viên

  • hyobin
이론 실습 모두
자바스크립트
JavaScript
SPA
DOM
REST API

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

Dịch cái này sang tiếng Việt

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

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

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

  • Thành phần và Mô đun hóa

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

  • Quản lý trạng thái dùng state và setState

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

  • Routing thông qua history API

  • Sử dụng JavaScript như React

🍀 Học viên tham gia khóa học ' Những bước đầu tiên trong JavaScript cho Web Frontend '
Mua khóa học với giá ưu đãi (giảm 35%) thông qua liên kết bên dưới!!

-> Liên kết phiếu giảm giá

🤯 JavaScript vani
Tại sao chúng ta nên tìm hiểu chi tiết?

Vanilla JavaScript về cơ bản là JavaScript không có bất kỳ thư viện hoặc khuôn khổ nào.
Điều này có nghĩa là viết mã bằng JavaScript thuần túy .

Học JavaScript cơ bản là bước quan trọng để đặt nền tảng cho phát triển web .
Bạn có thể hiểu được các nguyên tắc cơ bảncách thức hoạt động của JavaScript.
Bạn sẽ có thể sử dụng nhiều công cụ và kỹ thuật khác nhau một cách hiệu quả.

Bạn có thể hiểu cách thức hoạt động của các công nghệ này ngay cả khi sử dụng các thư viện như React.js ,
Bởi vì nó cho phép bạn phát triển tự do mà không cần dựa vào thư viện.
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.

Một khóa học JavaScript mà bạn có thể hoàn thành chỉ trong một lần!

Bao gồm cú pháp mới nhất của JavaScript, không có thư viện.
Gọi API, thao tác DOM, quản lý trạng thái, định tuyến và phát triển SPA chỉ sử dụng JavaScript thuần túy .
Đây là khóa học mà bạn sẽ học bằng cách phát triển hai dự án.

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

API, thao tác DOM, quản lý trạng thái và phát triển SPA tất cả trong một!

Thông qua tổng cộng 2 dự án
Xem lại nội dung và học lại

Bạn có thể học các khái niệm về JavaScript với tài liệu bài giảng rõ ràng 👍
Tất cả tài liệu bài giảng đều được cung cấp ở định dạng PDF như hiển thị bên dưới.

Xem trước tài liệu bài giảng cho Phần 1-5

Xem trước tài liệu bài giảng cho Phần 6-9

Nếu bạn tham gia khóa học JavaScript mà bạn có thể hoàn thành trong một lần,
Bạn có thể phát triển hai dự án như sau:

Dự án giữa kỳ

Dự án cuối cùng

Trong khi học, hãy kiểm tra lại những phần bạn chưa hiểu rõ,
Để bạn có thể xem lại nội dung ngay cả sau khi đã học xong.
Như hình ảnh bên dưới, một cuốn sổ tay cũng được cung cấp kèm theo bài giảng!

Sổ tay (trang web tài liệu bài giảng)

🙋🏻‍♀️ Tôi giới thiệu điều này cho những người này

Từ cơ bản đến nâng cao, tất cả tại một nơi!
Dành cho những ai muốn học từ những khái niệm cơ bản đến nâng cao cùng một lúc.
Học các khái niệm cần thiết bằng cách phát triển dự án của riêng bạn.

Tôi đang chuẩn bị cho một công việc front-end.
Người tìm việc đang chuẩn bị xin việc làm lập trình viên front-end.

Tìm hiểu các khái niệm về thao tác DOM, quản lý trạng thái và SPA.

Tôi không biết nhiều về JavaScript gốc.
Những người đang sử dụng React.js, Next.js, v.v. nhưng không tự tin vào JavaScript.

Trước khi sử dụng thư viện và framework, chúng ta hãy cùng xem lại các khái niệm cần thiết.

Sau khi tham gia lớp học...

  • Bạn có thể hiểu ngữ pháp cơ bản của JavaScript gốc, từ những khái niệm cơ bản đến nâng cao.

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

  • Bạn có thể phát triển thao tác DOM , lệnh gọi API , quản lý trạng thái , phát triển SPA , v.v. chỉ bằng JavaScript.


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

💥 Đây là điều làm cho nó khác biệt so với các bài giảng khác

Khóa học JavaScript mà bạn có thể hoàn thành ngay lập tức có những điểm khác biệt sau:

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

Học mọi thứ từ ngữ pháp và khái niệm cơ bản đến khái niệm nâng cao thông qua tài liệu rõ ràng, trực quan có hình ảnh độngmã ví dụ .

Mã ví dụ để viết cùng nhau

Chúng ta hãy viết trực tiếp các khái niệm đã học trong VSCode.
Thực hành viết mã JavaScript cùng với Live Coding .

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

Bạn có thể kiểm tra xem mình đã hiểu nội dung đã học chưa bằng cách phát triển một dự án trung gian . Sau đó, bạn có thể xác định các vấn đề của dự án đã phát triển và tìm hiểu thêm các khái niệm cần thiết để tạo ra một dự án tốt hơn .

Đánh giá toàn diện nội dung thông qua quá trình phát triển dự án cuối cùng

Chúng ta sẽ cùng nhau phát triển một dự án cuối kỳ dựa trên tất cả những gì đã học trên lớp . Bạn có thể xem lại nội dung trong quá trình phát triển dự án.

Cung cấp đầy đủ vật liệu

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

🔎 Tôi tò mò về chương trình giảng dạy chi tiết

Chương trình giảng dạy của khóa học JavaScript mà bạn có thể hoàn thành cùng một lúc như sau:

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

Đầu tiên, học ngữ pháp cơ bản và các khái niệm nâng cao thông qua tài liệu bài giảng (ppt) .
Áp dụng những gì bạn đã học và viết mã ví dụ của riêng mình để củng cố hiểu biết của bạn về các khái niệm.

📌 Phần 3. DOM và DOM API

Sau khi tìm hiểu chi tiết về DOM, bạn sẽ tìm hiểu về nhiều API DOM khác nhau có thể thao tác DOM.

Khi bạn học cách thao tác với các phần tử biểu mẫu thường dùng, bạn sẽ chuyển sang thao tác DOM trực tiếp bằng DOM API.

📌 Mục 4. hàm this và hàm mũi tên

Trong JavaScript Tìm hiểu về từ khóa này
Thông qua thực hành, chúng ta sẽ thấy giá trị nào được gắn vào tùy theo tình huống.

Sau đó, chúng ta sẽ xem xét mối quan hệ giữa this và hàm mũi tên, và this và hàm thông thường.

📌 Phần 5. Dự án trung gian

Hãy sử dụng những gì chúng ta đã học được để phát triển một trang web đơn giản.
Chúng tôi phát triển một trang web và xác định từng vấn đề phát sinh trong quá trình sản xuất .

📌 Mục 6. Thành phần và Hệ thống Mô-đun

Tìm hiểu về các thành phần và hệ thống mô-đun để giải quyết các vấn đề phát sinh trong khi phát triển các dự án trung gian.
Đầu tiên, bạn sẽ học thông qua tài liệu bài giảng và mã ví dụ, sau đó áp dụng những gì đã học vào một dự án trung gian để giải quyết vấn đề.

📌 Mục 7. Quản lý nhà nước và SPA

Tìm hiểu về quản lý trạng thái và SPA, những khái niệm bạn cần học để giải quyết các vấn đề phát sinh trong quá trình thực hiện dự án.
Chúng ta sẽ tìm hiểu quản lý trạng thái là gì và cách phát triển nó, đồng thời xem xét các khái niệm SPA, MPA, CSR và SSR . Cuối cùng, chúng ta sẽ áp dụng những kiến thức đã học và chỉnh sửa mã dự án trung gian .

📌 Mục 8. Đồ án cuối kỳ

Chúng ta sẽ phát triển một dự án cuối cùng bằng cách sử dụng mọi kiến thức đã học được cho đến nay.

Chúng ta hãy xem xét các tính năng cần thiết cho một trang web, kết hợp chúng lại với nhau theo từng tính năng, sau đó phát triển trang web trực tiếp bằng VSCode.

Chúng tôi phát triển các tính năng như chức năng tìm kiếm , chức năng lọc điều hướng trang .

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

H. Sinh viên không chuyên ngành cũng có thể tham gia khóa học này không?

Khóa học này bao gồm các khái niệm cơ bản và cung cấp tài liệu bài giảng, vì vậy ngay cả người mới bắt đầu cũng có thể tham gia.

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

Chúng tôi cung cấp 8 bài giảng miễn phí.

Đối với những người muốn nghe bài giảng trước,
Hãy tham gia các khóa học có ghi chữ "Xem trước".

H. Tôi không chắc bài giảng có giúp ích được gì không..

Nếu bạn biết một ít JavaScript,
Hãy thử tự chẩn đoán bằng cách sử dụng danh sách kiểm tra bên dưới!

Nếu 8 hoặc nhiều hơn trong số 10 mục áp dụng
Không sao đâu nếu bạn không tham dự buổi thuyết trình 😄

  • Tôi quen thuộc với phạm viviệc nâng hạ .

  • Bạn có thể tìm hiểu về đối tượng Promisetính bất đồng bộ , cũng như gọi API để nhận dữ liệu.

  • Bạn có thể thao tác DOM bằng JavaScript.

  • Tôi quen thuộc với điều này trong JavaScript.

  • Tôi biết SPAcách SPA hoạt động .

  • Quản lý trạng thái có thể được thực hiện mà không cần thư viện.

  • Trang web có thể được chia thành nhiều thành phần theo chức năng.

  • Bạn có thể mô-đun hóa các tệp và phát triển bằng cách sử dụng chức năng nhập và xuất .

  • Bạn có thể triển khai định tuyến trang bằng cách sử dụng API lịch sử .

  • Bạn có thể triển khai SPA bằng JavaScript .


📣 Những điều cần lưu ý trước khi tham gia lớp học

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

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

  • Viết mã bằng VSCode. (Hướng dẫn cài đặt và sử dụng có trong bài giảng.)

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

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

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

  • Mã dự án có thể được tìm thấy thông qua liên kết github .

Kiến thức và ghi chú của người chơi

  • Kiến thức của người chơi: HTML, CSS

    • Bài giảng sẽ giải thích các thẻ thường dùng trong HTML.

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

  • Ghi chú

    • Vui lòng học cách sử dụng trình duyệt Chrome và VSCode.

    • Câu hỏi của bạn sẽ được trả lời trong vòng 24 giờ .


Biểu ngữ ruy băng

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 làm lập trình viên frontend

  • Các bạn muốn học nhiều khái niệm khi phát triển dự án

  • Những người muốn học Vanilla JavaScript

  • Người muốn học kèm tài liệu khóa học

  • Những người muốn học cùng nhiều người thông qua học nhóm.

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

  • HTML

  • CSS

Xin chào
Đây là

9,765

Học viên

201

Đánh giá

108

Trả lời

4.9

Xếp hạng

2

Các khóa học

안녕하세요 김효빈 입니다 😊
프론트엔드를 희망하는 분들을 위해 쉽고 친절한 강의를 제공합니다.

(현) 프론트엔드 교육자

(전) 스타트업 프론트엔드 리드 개발자


웹 페이지

https://hyobb.com/

온라인 강의

도서

외부활동

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

Tất cả

55 bài giảng ∙ (9giờ 42phú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ả

116 đánh giá

4.9

116 đánh giá

  • 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ì!!

  • 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 ạ 👍

  • 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👍👍

  • 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 😊

  • 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 🥳🥳

Ưu đãi có thời hạn, kết thúc sau 4 ngày ngày

567.452 ₫

23%

746.647 ₫

Khóa học khác của hyobin

Hãy khám phá các khóa học khác của giảng viên!

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!