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 bạn đã 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 thông tin người dùng nhập vào, và các tab hoặc menu accordion hoạt động. JavaScript là ngôn ngữ cốt lõi để triển khai những chức 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 cơ bản của JavaScript → Điều khiển phần tử DOM → Sự kiện → Triển khai UI thực tế

Bạn sẽ học theo trình tự.

Hãy trực tiếp kiểm tra cách biến và hàm được sử dụng trên trang web thực tế, đồng thời trải nghiệm quá trình biến trang tĩnh được tạo bằng HTML/CSS thành trang có thể tương tác bằng JavaScript.

🤖 Lý do nền tảng JavaScript vẫn cần thiết 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 tại sao mã do AI tạo ra lại hoạt động, chỉnh sửa mã thành 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 dựa trên 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ã do AI 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 ai:

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

Những người muốn mở rộng năng lực phát triể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 khi nhấp chuột, nhập liệu, cuộn trang, thay vì chỉ dừng lại ở các trang tĩnh.

Dành cho những ai đã học cú pháp JavaScript nhưng gặp khó khăn khi vận 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 vẫn bối rối không biết á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 vững 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ừ những 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à toán tử logic

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

Thay vì học thuộc từng cú pháp một, chúng tôi tập trung vào việc hiểu luồng hoạt động của mã nguồn.

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

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

  • 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 nguyên lý cơ bản của việc xử lý dữ liệu bằng JavaScript và thực thi mã vào 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 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à sự kiện cũng được 구성 thành các bài học riêng. Inflearn

BƯỚC 04. Nắm vững 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

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

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

Tổng hợp các cú pháp, DOM và sự kiện đã học, bạn sẽ trực tiếp triển khai những UI thường thấy trên các trang web thực tế.

Lên đầu trang
Triển khai chức năng di chuyển lên đầu trang bằng cách sử dụng thao tác cuộn và sự kiện.

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

Accordion
Triển khai giao diện 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 chỉnh có sẵn, bạn sẽ kiểm tra cách JavaScript đã học ở những phần trước được kết nối như thế nào khi triển khai UI thực tế.

Cookie & Không hiển thị lại trong hôm nay
Tìm hiểu các khái niệm cơ bản và cách hoạt động của cookie (Cookie), đồng thời học cách tạo, đọc và xóa cookie bằng JavaScript. Dựa trên đó, bạn sẽ trực tiếp triển khai tính năng “Không hiển thị lại trong hôm nay”, thường được sử dụng trong các cửa sổ bật lên sự kiện trên website thực tế.

Không chỉ làm theo mã hoàn chỉnh có sẵn, bạn sẽ kiểm tra cách JavaScript đã học ở phần trước được kết nối với các tính năng UI thực tế và việc quản lý trạng thái người dùng như thế nào.


✅ Sau khi hoàn thành 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 để điều khiển luồng chương trình.

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

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 học JavaScript lần đầu 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ên việc biết cú pháp cơ bản của HTML và CSS sẽ giúp bạn 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ó thể học khóa cơ bản miễn phí trước rồi bắt đầu cũng được.

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

Câu 1. 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ạn có thể thêm tương tác và logic vào cấu trúc tĩnh được tạo bằng HTML·CSS để triển khai thao tác nhấp chuột, hoạt động của nút, hiệu ứng hoạt ảnh, v.v.

Q2. Chưa học HTML/CSS thì chỉ học khóa học 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.

C3. Khóa học này sẽ dạy những nội dung gì?

Trong khóa học này, bạn sẽ học 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 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

  • Bạn có thể trực tiếp viết mã để triển khai các UI tương tác, chẳng hạn như áp dụng hiệu ứng theo thao tác cuộn
    và các tính năng tương tự.

📚 Đã nắm vững kiến thức cơ bản về JavaScript? Hãy tiến đến bước tiếp theo!

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


Nếu bạn muốn học 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 thực hiện các 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,007

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, giảng dạy từ xuất bản web đến thực hành JavaScript·React và phát triển ứng dụng bằng AI.

Tôi đã giảng dạy cho những người trái ngành, người mới bắt đầu và người đang chuẩn bị tìm việc tại ESTSOFT KDT, Green Computer Academy cùng nhiều nơi khác. Tôi hướng đến phương pháp giảng dạy lấy dự án làm trọng tâm, trong đó các khái niệm phức tạp được chia thành những bài thực hành nhỏ, giúp học viên tự mình hoàn thiện sản phẩm.

Lĩnh vực đào tạo chính

  • Dàn trang web HTML/CSS

  • Kiến thức cơ bản về JavaScript và tương tác web

  • Phát triển frontend dựa trên React

  • Triển khai dịch vụ web bằng Firebase

  • Thiết kế UI trên Figma và kết nối với quá trình phát triển gyrus

  • Phát triển web cùng AI tạo sinh

  • Thực hành chứng chỉ Kỹ thuật viên Thiết kế Web

Đào tạo cho doanh nghiệp và tổ chức

Đào tạo nhân viên doanh nghiệp, triển khai các khóa học KDT và tổ chức các buổi chuyên đề tại trường đại học/trung tâm đào tạo.

Chúng tôi xây dựng chương trình học và các dự án thực hành phù hợp với đối tượng đào tạo, kiến thức nền tảng, thời lượng đào tạo và sản phẩm đầu ra mục tiêu. Có thể triển khai giảng dạy trực tiếp, lớp học trực tuyến theo thời gian thực và sản xuất nội dung đào tạo dạng ghi hình.

Sản xuất nội dung đào tạo trực tuyến

Tiến hành các công việc sản xuất nội dung đào tạo trực tuyến như sau.

  • Thiết kế chương trình giảng dạy và mục tiêu học tập

  • Biên soạn giáo trình và bài thuyết trình

  • Cấu trúc mã thực hành và dự án ví dụ theo từng bước

  • Soạn kịch bản bài giảng dùng cho quay phim

  • Quay bài giảng và bàn giao nội dung

Hoạt động chính

  • Bài giảng frontend KDT của ESTSOFT

  • Khóa học xuất bản web và frontend tại Học viện Máy tính Green gras.

  • Vận hành kênh YouTube về web publishing ‘ezweb’

  • Biên soạn sách trong lĩnh vực xuất bản web và thiết kế web

Sách đã xuất bản

Chúng tôi nhận các yêu cầu về việc giảng dạy tại doanh nghiệp, cơ quan và sản xuất nội dung đào tạo trực tuyến.

Liên hệ: ezwebpub@gmail.com

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.035 ₫

    25%

    293.385 ₫