inflearn logo

[E-book] Học JavaScript chỉ với 10.000 won — Từ cú pháp đến UI thực tế

Xin chào, tôi là Gamja, một nhà phát triển Front-end với 4 năm kinh nghiệm. Nhớ lại lúc mới bắt đầu học JavaScript, khi xem YouTube hay làm theo sách, tôi cứ ngỡ mình đã hiểu hết tất cả, nhưng thực tế mỗi khi mở trình soạn thảo trống lên là đầu óc tôi lại trống rỗng. Lúc đầu, tôi chỉ mải mê sao chép và dán những đoạn mã tìm được trên Google. Chính vì thế, khi xảy ra lỗi, tôi không biết phải bắt đầu sửa từ đâu và đã có những đêm thức trắng, trải qua nhiều ngày tuyệt vọng. Lúc đó, tôi đã nhận ra một bài học xương máu: Tự mình hiểu rõ nguyên lý và viết ra dù chỉ 1 dòng code còn giá trị hơn việc sao chép code của người khác 100 lần. Rất nhiều người mới bắt đầu cũng đang gặp khó khăn trước bức tường cao mang tên JavaScript: 🚨 "Tôi đã tạo được giao diện đẹp bằng HTML/CSS, nhưng lại bế tắc khi muốn làm cho nó chuyển động." 🚨 "Tôi đã thuộc lòng cú pháp biến, hàm nhưng không biết cách kết hợp chúng trong thực tế." 🚨 "Chỉ cần nghe đến các thuật ngữ như Event Bubbling hay DOM manipulation là tôi đã thấy đau đầu." Vì vậy, tôi đã chuẩn bị khóa học này. Tôi sẽ tổng hợp lại 'con đường tắt chắc chắn nhất' mà tôi đã đúc kết được sau vô số lần vấp ngã. Khi chuẩn bị tài liệu, tôi không liệt kê những thuật ngữ lập trình khó hiểu. Tôi đã mạnh dạn loại bỏ những cú pháp xuất hiện trong các cuốn giáo trình dày cộp mà bạn sẽ chẳng dùng tới ngay. Thay vào đó, tôi sẽ truyền tải những nguyên lý cốt lõi được sử dụng hàng ngày trong công việc thực tế vào đầu bạn một cách trực quan thông qua những ví dụ đời thường như 'băng chuyền' hay 'bảng pha màu'. Trong khóa học này, chúng ta không chỉ học lý thuyết suông. Ngay sau khi học lý thuyết, bạn sẽ cùng tôi tự tay xây dựng từ con số 0 bốn loại giao diện UI cốt lõi mà chắc chắn bạn sẽ gặp trong thực tế Front-end như: Accordion, Tab menu, Dark mode toggle, v.v. Sau khi hoàn thành khóa học, bạn sẽ không còn là người đi sao chép code của người khác rồi cầu nguyện khi nhấn nút chạy nữa. Bạn sẽ lột xác thành một nhà phát triển Front-end thực thụ, người có thể tự mình thiết kế cấu trúc màn hình và viết code JavaScript theo đúng ý đồ của bản thân. Tôi đã dồn hết bí quyết thực vụ của mình vào đây. Đừng đứng khựng lại trước trình soạn thảo trống rỗng nữa. Đã đến lúc bắt đầu rồi.

5 học viên đang tham gia khóa học này

Độ khó Cơ bản

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

frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y
frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y

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

  • Hiểu nguyên lý hoạt động cốt lõi của JavaScript (Biến, Hàm, Câu lệnh điều khiển)

  • Hiểu biết hoàn hảo về thao tác DOM và xử lý sự kiện

  • Cách thổi hồn vào những trang màn hình tĩnh được tạo bằng HTML/CSS

  • Trực tiếp triển khai các thành phần UI thực tế như Accordion, Tab menu, Dark mode, v.v.

  • Khả năng tự viết mã theo ý muốn của bản thân, thay vì chỉ dừng lại ở việc 'sao chép và dán' mã của người khác.

📌 Đề xuất cho những đối tượng sau

  • Những người biết HTML/CSS nhưng lại khựng lại trước JS

  • Những người muốn học theo tốc độ của riêng mình bằng cách đọc thay vì xem video bài giảng

  • Những người có thể sao chép và dán mã nhưng không hiểu tại sao nó lại hoạt động được

  • Những người không biết phải bắt đầu xử lý từ đâu khi gặp lỗi phát sinh


🚨 Bạn đã từng có trải nghiệm như thế này chưa?

"Khi xem và làm theo các bài giảng trên YouTube thì tôi tưởng mình đã hiểu hết rồi, nhưng khi mở trình soạn thảo trống lên thì tôi lại chẳng biết phải làm gì cả."

"Tôi đã học thuộc cú pháp biến và hàm rồi, nhưng không biết cách kết hợp chúng như thế nào trong thực tế."

"Event bubbling, thao tác DOM... chỉ nghe thuật ngữ thôi đã thấy nhức đầu rồi."

Tôi cũng đã từng trải qua cảm giác bế tắc này. Khi mới học JS, tôi đã mải mê sao chép và dán những đoạn mã tìm được trên Google, và khi xảy ra lỗi, tôi đã thức trắng đêm trong tuyệt vọng vì không biết phải bắt đầu sửa từ đâu.

Lúc đó tôi đã nhận ra một cách xương máu.

"Thay vì sao chép mã của người khác 100 lần, việc hiểu rõ nguyên lý và tự mình viết ra 1 dòng mã mới chính là thực lực thực sự."

Khóa học này đã được bắt đầu từ chính kinh nghiệm đó.

📖 Khóa học này diễn ra như thế nào?

Bài giảng này được cung cấp dưới định dạng sách điện tử. Bạn có thể vừa đọc vừa học mà không cần video.

HTML và CSS được cung cấp ở trạng thái hoàn thiện, và chúng ta sẽ cùng nhau viết từng dòng mã JS. Mỗi khi thêm mã, phương pháp thực hiện sẽ là giải thích "tại sao lại sử dụng mã này" trước, sau đó mới kiểm tra kết quả thực thi.

Thay vì chỉ sao chép một cách máy móc, bạn sẽ viết mã sau khi đã hiểu rõ nguyên lý, nhờ đó bạn có thể ứng dụng vào các tình huống mới ngay cả sau khi khóa học kết thúc.

Ngoài ra, mỗi chương đều bao gồm 라이브 데모 mà bạn có thể trực tiếp nhấp vào và thao tác. Bạn có thể vừa đọc vừa xác nhận ngay kết quả bằng mắt nên việc thấu hiểu sẽ nhanh hơn nhiều.

🗂️ Lộ trình học tập

Phần 1. Cú pháp JS cơ bản — Nắm vững khung xương của ngôn ngữ

  • Chương 1. JavaScript là gì — Những việc JS làm trong trình duyệt, cách sử dụng console

  • Chương 2. Biến và kiểu dữ liệu — let/const, kiểu nguyên thủy, typeof, chuyển đổi kiểu dữ liệu

  • Chương 3. Toán tử — Toán tử số học/gán/so sánh/logic, đánh giá ngắn mạch, optional chaining

  • Chương 4. Câu lệnh điều kiện và Vòng lặp — if/else, switch, for/while/for...of, break/continue

  • Chương 5. Cơ bản về hàm — Khai báo/Biểu thức/Hàm mũi tên, Phạm vi (Scope), Các kiểu tham số

Phần 2. DOM và Sự kiện — Điều khiển trình duyệt theo ý muốn

  • Chương 6. DOM là gì — Cấu trúc cây DOM, vai trò của đối tượng document

  • Chương 7. Lựa chọn và thao tác DOM — querySelector, textContent/innerHTML, classList

  • Chương 8. Hệ thống sự kiện — addEventListener, đối tượng sự kiện, bubbling, ủy quyền sự kiện

Phần 3. Ví dụ thực tế — Tự tay tạo ra những gì đã học

  • Chương 9. Accordion — classList.toggle và mô hình ủy quyền sự kiện

  • Chương 10. Menu tab — Mô hình kết nối tab và bảng điều khiển bằng chỉ số (index)

  • Chương 11. Chế độ tối (Dark Mode) — Biến CSS, chuyển đổi class body, localStorage

  • Chương 12. Bộ đếm giới hạn số lượng ký tự — sự kiện input, phản ánh trạng thái thời gian thực

🛠️ Các ví dụ thực tế sẽ được tiến hành như sau

Tất cả các ví dụ thực tế đều được cung cấp dưới dạng tách biệt các tệp HTML, CSS và JS.

HTML/CSS — được cung cấp ở trạng thái đã hoàn thiện. Hãy kiểm tra cấu trúc và thiết kế trước khi bắt đầu.

JS — Chúng ta sẽ tự tay xây dựng bằng cách thêm từng dòng một theo từng bước. Ở mỗi bước, tôi sẽ giải thích "tại sao đoạn mã này lại cần thiết" trước khi chuyển sang dòng tiếp theo.

Thêm tính năng — Sau khi hoàn thành các chức năng cơ bản, chúng ta sẽ thử thêm các tính năng bổ sung. Ví dụ: đối với Accordion, chúng ta thêm "nút mở/đóng tất cả", còn đối với Tab, chúng ta thêm "di chuyển bằng phím mũi tên trên bàn phím".

Bản demo trực tiếp — Mỗi chương đều bao gồm các bản demo mà bạn có thể trực tiếp nhấp vào và thao tác. Bạn có thể kiểm tra kết quả ngay lập tức bằng mắt trong khi đang đọc mã.

✅ Những gì bạn có thể nhận được sau khóa học

Về mặt kiến thức

  • Toàn bộ cú pháp cơ bản của JS — Hiểu và có thể tự mình sử dụng biến, kiểu dữ liệu, toán tử, câu lệnh điều kiện, vòng lặp và hàm.

  • Hiểu nguyên lý trình duyệt chuyển đổi HTML thành DOM.

  • querySelector, classList, addEventListener, v.v. Bạn có thể tự do sử dụng các DOM API được dùng hàng ngày trong thực tế.

  • Có thể hiểu và áp dụng mô hình Event Bubbling (sự kiện sủi bọt) và Event Delegation (ủy quyền sự kiện).

Về mặt năng lực thực chiến

  • Bạn có thể tự tay tạo ra 4 thành phần UI có thể sử dụng ngay trong thực tế như: Accordion, Tab menu, Chế độ tối (Dark mode toggle) và Bộ đếm số ký tự.

  • Bạn sẽ hình thành thói quen viết code có cấu trúc bằng cách tách riêng các tệp HTML/CSS/JS.

  • Bạn sẽ nắm vững mô hình phân tách vai trò, trong đó JS chỉ đảm nhận việc toggle class, còn CSS sẽ chịu trách nhiệm cho các thay đổi về mặt thị giác.

  • Bạn sẽ biết cách lưu trữ cài đặt người dùng bằng localStorage và cách phát hiện chế độ tối (dark mode) của hệ thống.

Về mặt tư duy

  • Bạn sẽ có thể nhìn vào mã nguồn và giải thích được "tại sao nó lại được viết như thế này".

  • Bạn sẽ nắm được trình tự cách tiếp cận khi tạo một giao diện người dùng (UI) mới.

  • Bạn không còn cần phải sao chép mã của người khác nữa.

💬 Hướng dẫn Q&A

Nếu bạn gặp khó khăn trong khi xem bài giảng, hãy đặt câu hỏi bất cứ lúc nào.

Chúng tôi sẽ phản hồi trong vòng 2 đến 3 ngày làm việc. Đừng một mình loay hoay suốt nhiều ngày rồi bỏ cuộc. Chúng tôi sẽ cùng bạn giải quyết những chỗ đang gặp vướng mắc.

Tuy nhiên, trong những trường hợp dưới đây, việc giải đáp có thể sẽ khó khăn.

  • Nội dung chuyên sâu nằm ngoài phạm vi bài giảng

  • Yêu cầu review toàn bộ mã nguồn dự án cá nhân

⚠️ Vui lòng kiểm tra trước khi học

Bạn cần có kiến thức nền tảng sau

  • Bạn cần có khả năng đọc các thẻ HTML cơ bản (div, button, input, v.v.).

  • Bạn cần phải biết khái niệm về việc áp dụng kiểu dáng (style) bằng classid trong CSS.

Những điều này bạn không cần biết cũng không sao

  • Bạn không cần biết gì về JS cũng được. Chúng ta sẽ bắt đầu cùng nhau từ con số 0.

  • Không có kinh nghiệm lập trình cũng không sao.

  • Bạn có thể bắt đầu ngay lập tức chỉ với một trình duyệt mà không cần thiết lập môi trường phát triển.

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

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

  • Những người biết HTML/CSS nhưng lại khựng lại trước JS

  • Những người cảm thấy khó chịu khi xem video bài giảng

  • Những người sao chép mã từ tìm kiếm về dùng nhưng lại không biết tại sao nó hoạt động được

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

  • Bạn cần có kiến thức rất cơ bản về HTML và CSS. (Chỉ cần hiểu khái niệm về thẻ, class và id là đủ rồi!)

  • Không có kinh nghiệm lập trình trước đó cũng không sao. Chúng tôi sẽ hướng dẫn bạn từng bước một từ con số không.

Xin chào
Đây là kamjaaaaaaa

Xin chào, tôi là Gamja, nhà phát triển Front-end với 4 năm kinh nghiệm.

Hiện tại tôi đang phát triển dịch vụ di động toàn cầu. Tôi đã tích lũy được nhiều kinh nghiệm thực tế thông qua việc xây dựng các dịch vụ đa ngôn ngữ, đồng thời cũng là một trong 30 người đóng góp hàng đầu thế giới cho thư viện mã nguồn mở react-hook-form mà các nhà phát triển trên khắp thế giới đang sử dụng.

Nhưng tôi không phải lúc nào cũng như vậy ngay từ đầu.

Khi mới học JS, tôi đã vô số lần trải qua cảm giác tưởng chừng như mình đã hiểu hết mọi thứ khi gõ theo các bài giảng trên YouTube, nhưng đến lúc mở trình soạn thảo trống lên thì đầu óc lại trắng xóa. Lúc đầu, tôi chỉ mải mê sao chép và dán những đoạn mã tìm được trên Google, và khi xảy ra lỗi, tôi không biết phải bắt đầu xử lý từ đâu, dẫn đến việc phải thức trắng đêm và nản lòng suốt nhiều ngày liền.

Trong quá trình đó, tôi đã thực sự rất mông lung. Tôi đã viết code mà thậm chí không biết DOM là gì, và từng lãng phí hàng giờ đồng hồ chỉ vì không hiểu tại sao một sự kiện lại thực thi tận hai lần. Điều tôi cần nhất lúc đó không phải là việc học thuộc lòng một lượng lớn ngữ pháp. Mà là một ai đó giải thích cho tôi rằng "tại sao đoạn code này lại hoạt động".

Tôi đã tạo ra khóa học này bằng cách tổng hợp những kinh nghiệm tích lũy được qua 4 năm làm việc thực tế, cũng như những phần mà tôi đã từng gặp khó khăn nhất khi còn là người mới bắt đầu. Bạn không cần phải đi đường vòng như tôi. Bởi vì tôi đã trải qua điều đó trước bạn rồi.

Thêm

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

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!

Ưu đãi có thời hạn

149.222 ₫

28%

208.910 ₫