inflearn logo

HTML/CSS tiếp theo là JavaScript! Kiến thức cơ bản về JavaScript cho phát triển web

Nếu bạn đã học HTML/CSS, giờ là lúc làm cho trang web hoạt động bằng JavaScript. Hãy nắm vững các kiến thức nền tảng về JavaScript để tiếp tục học frontend như React, từ những kiến thức lập trình cơ bản như biến, hàm, mảng, câu lệnh điều kiện, vòng lặp đến việc điều khiển các phần tử DOM, xử lý sự kiện và triển khai các UI như tab, accordion.

(5.0) 1 đánh giá

20 học viên

Độ khó Cơ bản

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

HTML/CSS
HTML/CSS
JavaScript
JavaScript
css-flexbox
css-flexbox
vanilla-javascript
vanilla-javascript
HTML/CSS
HTML/CSS
JavaScript
JavaScript
css-flexbox
css-flexbox
vanilla-javascript
vanilla-javascript

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

  • Nền tảng JavaScript

  • Có thể chọn phần tử bằng JavaScript.

  • Có thể thay đổi kiểu dáng của phần tử.

  • Có thể áp dụng nhiều sự kiện khác nhau

  • Có thể triển khai các hiệu ứng UI/UX

🚀 Bước tiếp theo sau HTML/CSS, giờ là JavaScript

Nếu đã tạo cấu trúc trang web bằng HTML và thiết kế bằng CSS, thì giờ là lúc thêm chức năng và tính tương tác cho trang web bằng JavaScript.

Một trang web trong đó màn hình thay đổi khi nhấp vào nút, nội dung thay đổi theo dữ liệu người dùng nhập vào, còn các tab hoặc menu accordion hoạt động. JavaScript là ngôn ngữ cốt lõi để triển khai những tính năng này.

Trong khóa học này, bạn không chỉ đơn thuần ghi nhớ cú pháp,

Cú pháp JavaScript cơ bản → Điều khiển phần tử DOM → Sự kiện → Triển khai UI thực tế

theo thứ tự.

Hãy trực tiếp tìm hiểu cách biến trang tĩnh được tạo bằng HTML/CSS thành trang hoạt động bằng JavaScript trong khi kiểm tra cách biến và hàm được sử dụng trên trang web thực tế.

🤖 Vì sao vẫn cần nền tảng JavaScript trong thời đại AI

Đã đến thời đại AI có thể nhanh chóng tạo ra mã JavaScript.

Tuy nhiên, để hiểu vì sao mã do AI tạo ra hoạt động, chỉnh sửa mã theo chức năng mong muốn và tìm ra vấn đề khi xảy ra lỗi, bạn cần hiểu các nguyên lý cơ bản của JavaScript.

Đặc biệt, các công nghệ frontend như React và Next.js cũng được xây dựng trên nền tảng JavaScript.

Cùng với khả năng yêu cầu AI viết mã, nếu bạn trang bị nền tảng cơ bản để đọc, hiểu và chỉnh sửa mã được tạo ra, bạn có thể tận dụng AI như một công cụ phát triển hiệu quả hơn.

🎯 Khóa học này phù hợp với những aiWe need translate only. Korean phrase means "Recommended for these people". Natural: "🎯 Khuyến nghị dành cho những ai..." Maybe context list. Output only. Ensure no extra.

Dành cho người mới học JavaScript
Phù hợp với những người đã học xong HTML/CSS và bắt đầu lập trình lần đầu.

Dành cho những ai muốn mở rộng năng lực xây dựng giao diện web
Phù hợp với những ai muốn tạo các trang web tương tác phản hồi theo thao tác nhấp, nhập liệu, cuộn, thay vì chỉ dừng lại ở các trang tĩnh.

Đã học cú pháp JavaScript nhưng gặp khó khăn khi ứng dụng
Nội dung này sẽ hữu ích cho những ai biết về biến, hàm và câu lệnh điều kiện nhưng không biết phải áp dụng chúng vào các phần tử HTML thực tế như thế nào.

Dành cho những ai muốn học các công nghệ frontend như React
Bạn có thể nắm được các khái niệm cơ bản về JavaScript, DOM và sự kiện cần thiết trước khi học React.


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

BƯỚC 01. Nền tảng lập trình JavaScript

Bắt đầu từ các cú pháp cốt lõi của JavaScript, nền tảng của lập trình.

  • Biến và toán tử

  • Hàm và đối tượng

  • Tạo và sử dụng mảng

  • Câu lệnh điều kiện và các toán tử logic

  • Các vòng lặp như for, while, forEach, for...of

Thay vì ghi nhớ từng cú pháp một, hãy tập trung vào việc hiểu luồng hoạt động của mã.

BƯỚC 02. Sử dụng chuỗi và bộ hẹn giờ

Học cách xử lý chuỗi thường được sử dụng trong phát triển web và các hoạt động theo thời gian.

  • Trích xuất và nối chuỗi

  • Thay đổi nội dung chuỗi ký tự

  • Bộ hẹn giờ JavaScript

Hiểu các nguyên lý cơ bản về xử lý dữ liệu bằng JavaScript và thực thi mã vào một thời điểm cụ thể.

BƯỚC 03. Điều khiển trang web bằng JavaScript

Kết nối các cú pháp đã học ở phần trước với HTML/CSS thực tế.

  • Chọn phần tử DOM

  • Thay đổi kiểu dáng của phần tử đã chọn

  • Điều khiển nhiều phần tử bằng cách sử dụng vòng lặp

  • Các sự kiện như click, mouseover, mouseout

  • Các sự kiện của phần tử nhập liệu như change

Từ đây, bạn sẽ thực sự trải nghiệm cách cú pháp JavaScript được sử dụng trên các trang web thực tế. Trong khóa học hiện tại, việc chọn DOM, thay đổi kiểu dáng và các sự kiện cũng được sắp xếp thành những bài học riêng. Inflearn

BƯỚC 04. Học các cú pháp JavaScript hiện đại

Học các cú pháp chính của ES6 để hiểu mã JavaScript hiện đại.

  • let, const

  • Template literal

  • Hàm mũi tên

Học cách viết JavaScript ngắn gọn và hiện đại hơn bằng cách so sánh với cú pháp hiện có.

BƯỚC 05. Triển khai UI thực tế bằng JavaScript

Kết hợp các cú pháp, DOM và sự kiện đã học, bạn sẽ trực tiếp xây dựng những UI thường thấy trên các website thực tế.

Quay lại đầu trang
Sử dụng thao tác cuộn và sự kiện để triển khai chức năng di chuyển lên đầu trang.

Tabs
Triển khai UI tab, trong đó nội dung thay đổi khi chọn menu.

Accordion
Triển khai UI accordion, trong đó nội dung được mở rộng và thu gọn theo thao tác nhấp.

Không chỉ viết theo mã đã hoàn thiện, bạn sẽ kiểm tra JavaScript đã học ở phần trước được kết nối như thế nào khi triển khai UI thực tế.


✅ Sau khóa học, bạn có thể làm được những điều sau

Sau khi hoàn thành khóa học, bạn có thể hiểu các cú pháp chính của JavaScript và tự viết mã, đồng thời sử dụng câu lệnh điều kiện và vòng lặp để kiểm soát luồng chương trình.

Ngoài ra, bạn sẽ có được năng lực nền tảng để kết hợp HTML/CSS và JavaScript nhằm tạo ra các trang web hoạt động thực tế, đồng thời có thể chọn và thay đổi các phần tử DOM cũng như triển khai các chức năng phản hồi sự kiện của người dùng.

Trên hết, bạn có thể xây dựng nền tảng JavaScript để học các công nghệ phát triển web ở bước tiếp theo như jQuery, React và TypeScript.

🛠 Những điều cần chuẩn bị trước khi tham gia khóa học

Ngay cả những người mới bắt đầu học JavaScript cũng có thể tham gia khóa học.

Tuy nhiên, vì trong phần thực hành bạn sẽ trực tiếp điều khiển các phần tử HTML và kiểu CSS bằng JavaScript, nếu biết cú pháp cơ bản của HTML và CSS thì bạn sẽ học dễ dàng hơn.

Không cần có kinh nghiệm trước về JavaScript.

Trong phần thực hành, bạn sẽ sử dụng Visual Studio Code và các trình duyệt web mới nhất như Chrome; chúng tôi khuyến khích bạn không chỉ xem bài giảng mà còn tự viết và chạy thử mã ví dụ.

Nếu bạn mới bắt đầu với HTML/CSS, bạn cũng có thể học khóa học cơ bản miễn phí trước rồi hãy bắt đầu.

Khóa học cơ bản về HTML
Khóa học cơ bản về CSS

Triển khai tab chuyển động

Triển khai accordion

Triển khai hiệu ứng cuộn “Back to Top”

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

Q1. JavaScript (JS) là ngôn ngữ gì?

JavaScript là ngôn ngữ lập trình dùng để thao tác động trên trang web. Bằng cách thêm tương tác và logic vào cấu trúc tĩnh được tạo bằng HTML·CSS, bạn có thể triển khai thao tác nhấp chuột, chức năng nút, hiệu ứng hoạt ảnh, v.v.

Q2. Chưa học HTML/CSS thì chỉ học khóa này có được không?

Khóa học này được thiết kế theo cấu trúc yêu cầu kiến thức nền tảng về xuất bản web (HTML·CSS), vì vậy nếu bạn biết cấu trúc tài liệu cơ bản thì sẽ học dễ dàng hơn.

Câu 3. Trong khóa học này, bạn sẽ học những nội dung gì?

Trong khóa học này, chúng ta sẽ tìm hiểu các nội dung sau:

  • Các cú pháp cơ bản như biến, toán tử, hàm, đối tượng và mảng

  • Xây dựng luồng logic bằng câu lệnh điều kiện và vòng lặp

  • Lựa chọn các phần tử HTML và thay đổi kiểu dáng

  • Xử lý sự kiện (click, hover, v.v.)

  • Triển khai các ví dụ thực tế đơn giản như nút quay lại đầu trang, menu tab và accordion

Câu 4. Sau khi học khóa học này, bạn có thể tạo ra những gì?

Sau khi hoàn thành khóa học này, bạn sẽ có khả năng điều khiển các phần tử HTML như một chương trình.
Ví dụ:

  • Thay đổi nội dung khi nhấp vào nút

  • Chuyển đổi menu tab

  • Áp dụng hiệu ứng theo thao tác cuộn
    và có thể trực tiếp viết mã để triển khai các giao diện người dùng tương tác.

📚 Nếu đã nắm vững kiến thức cơ bản về JavaScript, hãy tiến tới bước tiếp theo!

Nếu bạn đã hiểu cú pháp cơ bản của JavaScript, DOM và các sự kiện, giờ hãy mở rộng sang bước tiếp theo tùy theo mục đích học tập của mình.


Nếu muốn tìm hiểu sâu hơn về xuất bản web
Bạn có thể học cách triển khai nhiều UI thực tế khác nhau như tab, accordion, slide bằng jQuery.


Nếu bạn muốn mở rộng sang phát triển frontend
Hãy học về component, Props, State của React và thử sức xây dựng dự án thực tế.

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

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

  • Những người đã học kiến thức cơ bản về HTML

  • Dành cho những người đã học các kiến thức cơ bản về CSS

  • Dành cho những ai muốn triển khai hiệu ứng động trên trang web

  • Dành cho những người muốn tìm việc với tư cách là nhà phát triển web (web publisher)

  • Những người mơ ước trở thành nhà phát triển frontend

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

  • HTML

  • CSS

Xin chào
Đây là ezweb

Xác minh sự nghiệp

3,003

Học viên

78

Đánh giá

4

Trả lời

4.9

Xếp hạng

15

Các khóa học

Tôi là giảng viên chuyên về frontend web, cung cấp đào tạo thực tiễn về frontend, giảng dạy tại doanh nghiệp và cơ quan, cũng như sản xuất các khóa học trực tuyến.

■ Các khóa học chuyên sâu về frontend
HTML/CSS, JavaScript, React, Firebase, Figma, phát triển web ứng dụng AI, v.v.
Đào tạo theo từng bước từ xuất bản web đến nghiệp vụ frontend thực tế.

■ Có thể giảng dạy tại doanh nghiệp, cơ quan và cơ sở giáo dục
Đào tạo nhân sự doanh nghiệp, chương trình KDT, chuyên đề tại trường đại học·học viện, v.v.
Có thể xây dựng chương trình giảng dạy và trực tiếp giảng dạy phù hợp với đối tượng và trình độ học viên.

■ Có thể thiết kế và sản xuất khóa học trực tuyến
Từ lên kế hoạch chương trình giảng dạy, biên soạn giáo trình, PPT, tài liệu thực hành và mã ví dụ,
đến quay bài giảng và bàn giao nội dung, có thể thực hiện toàn bộ quy trình sản xuất nội dung đào tạo trực tuyến.

■ Có thể giảng dạy cả trực tuyến và trực tiếp
Không chỉ giảng dạy trực tiếp tại học viện mà còn thực hiện nhiều hình thức khác nhau như giảng dạy trực tuyến theo thời gian thực, sản xuất nội dung ghi hình
phù hợp với môi trường giáo dục.


■ Hoạt động chính

  • Khóa học frontend KDT của ESTSOFT

  • Bài giảng xuất bản web và frontend tại Học viện Máy tính Green

  • Vận hành kênh YouTube về xuất bản web ‘ezweb’

  • Biên soạn sách liên quan đến xuất bản web và thiết kế web


■ Sách
2021.07 / Cẩm nang sử dụng Figma toàn diện cho thiết kế web & web publishing / BJ Public

2022.08 / Lần đầu học coding cùng web publishing  / Nhà xuất bản Youngjin

2023.10 / Sổ tay học kèm thực hành Chứng chỉ Kỹ năng Thiết kế Web 2024 SD Edu Yuseonbae / Sidae Gosi Gihoek

2024.11 / Sổ tay ôn thi thực hành Chứng chỉ Kỹ năng thiết kế web Yuseonbae SD Edu 2025 / Nhà xuất bản Sidae Gosi Planning

2025.11 / Sổ tay kèm học thực hành Chứng chỉ Thiết kế Web SD Edu Yoo Sun-bae 2026 / Sidae Gosi Planning

 

Thêm

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

Tất cả

15 bài giảng ∙ (5giờ 37phú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ả

1 đánh giá

5.0

1 đánh giá

  • mrnobody님의 프로필 이미지
    mrnobody

    Đánh giá 8

    ∙

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Cảm ơn bạn vì khóa học tuyệt vời.

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

    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!

    Giảm 25% cho thành viên mới

    220.869 ₫

    25%

    294.489 ₫