강의

멘토링

로드맵

Inflearn brand logo image
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) 109 đánh giá

8,230 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,728

Học viên

190

Đá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ả

109 đánh giá

4.9

109 đánh giá

  • minzinging님의 프로필 이미지
    minzinging

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    33% đã tham gia

    시각자료도 깔끔하고 무엇보다 라이브 코딩으로 천천히 하나하나 알려주셔서 좋았습니다. 꾸준히 수강 후 완강해보겠습니다! 좋은 강의 감사합니다.

    • 효빈 Hyobin
      Giảng viên

      좋은 수강평 감사합니다😀 꼭 완강하셨으면 좋겠습니다!!

  • SK님의 프로필 이미지
    SK

    Đánh giá 13

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    56% đã tham gia

    이정환님 강의를 보고 한입 커뮤니티에 가입하여 해당 강의를 알게되었습니다. SPA 를 이용만 해봤지 직접 만드는건 안해본거 같아서 이미 결제 버튼을 누르고 있더라구요 ㅋㅋ 하고있는게 있어서 한입 챌린지는 참여하지 못했지만 매우 만족하는 강의 입니다. 아는 부분은 넘겨가며, 핸드북으로 복습 하면서 강의 후반부만 들었는데 매우 만족하는 강의 입니다. 이정환님도 딕션이 좋아 듣기 편했는데 효빈님도 딕션이 남다르게 좋네요. 감사합니다.

    • 효빈 Hyobin
      Giảng viên

      SK님! 좋은 수강평 감사드립니다 😊 추후에 다시 한 번 복습용으로 한입 챌린지에 참여해보시는 것도 좋을 것 같습니다 :) 다시 한 번 좋은 수강평 감사드립니다 👍

  • 노홍기님의 프로필 이미지
    노홍기

    Đánh giá 3

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    목소리가 잘들리고 발음도 또박또박 정확해서 2배속으로 들어도 잘 들립니다! 그리고 이해하기 쉬운 구성으로 되어있네요. 감사합니다.

    • 효빈 Hyobin
      Giảng viên

      노홍기님! 좋은 수강평 감사드립니다 :) 완강 축하드립니다👍👍

  • 동우님의 프로필 이미지
    동우

    Đánh giá 21

    Đánh giá trung bình 5.0

    5

    15% đã tham gia

    자바스크립트를 처음 접하더라도 기초부터 탄탄하게 리액트를 배우기전 공부하기 좋은 최고의 강의인것 같아요! 좋은강의 만들어주셔서 감사합니다!!

    • 효빈 Hyobin
      Giảng viên

      동우님! 좋은 수강평 감사합니다 😊

  • 라따뚜이님의 프로필 이미지
    라따뚜이

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    자바스크립트 개념이 부족한 저에게 적합한 강의라고 생각합니다. 바닐라 자바스크립트에 대해 필요한 개념들만 쏙쏙 얻고 가는것 같아 정말 많은 도움이 되었습니다 👍 핸드북이 제공되서 프로젝트 코드를 작성하는데 편했습니다!! 복습하기도 좋고 강의를 들으면서 함께 보기에도 아주 좋습니다. 좋은 강의를 저렴하게 수강할 수 있었습니다. 감사합니다!!

    • 효빈 Hyobin
      Giảng viên

      라따뚜이님 😊 좋은 수강평 감사합니다!! 완강 축하드립니다 🥳🥳

747.355 ₫

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!