Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

JavaScript DOM for Beginners Learn how to code

JavaScript DOM cho Người Mới Bắt Đầu - Học cách lập trình

JavaScript DOM cho Người Mới Bắt Đầu - Học cách lập trình

Ví dụ mã JavaScript DOM - Học cách tạo trang web tương tác và động: Chọn và cập nhật phần tử

4.3
(148 đánh giá)
14,737 học viên
Giảng viên
Laurence Svekis
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
6.0 giờ video
67 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Cách sử dụng JavaScript
Cách tạo phần tử động
Thao tác với phần tử bằng JavaScript

Yêu cầu

Khái niệm JavaScript cơ bản
Có máy tính
Biết sử dụng trình soạn thảo để viết code
Có kiến thức về HTML và CSS

Đối tượng phù hợp

Người mới học JavaScript
Ai muốn thực hành viết JavaScript
Nhà phát triển web
Quản trị viên web
Ai muốn học làm game JavaScript mà không cần thư viện

Nội dung khóa học

5 phần • 67 bài giảng
1 Giới thiệu DOM - Lập trình JavaScript cho phần tử trang tương tác
2 Phần bài học: Mã nguồn và ví dụ lập trình JavaScript DOM
3 Đối tượng Document và Thiết lập
4 Chọn phần tử trang
5 Thử thách chọn phần tử
6 Thêm và xóa phần tử
7 Tạo kiểu phần tử DOM bằng JavaScript
8 Tương tác phần tử với sự kiện Click trong JavaScript DOM
9 Đối tượng sự kiện (Event Object) và tham số E trong phần tử DOM
10 So sánh Event Listeners và Handlers cho phần tử trang
11 Thêm Event Listeners vào phần tử
12 Event Listeners trong JavaScript
13 Sự kiện trên trường Form trong phần tử DOM
14 Bài tập danh sách
15 Sự kiện DOM Content Loaded
16 Đối tượng Window và các sự kiện
17 Thuộc tính phần tử DOM
18 Lấy và kiểm tra thuộc tính phần tử
19 Thêm và xóa lớp CSS
20 Di chuyển giữa các phần tử
21 Bài tập danh sách phần tử trang động
22 Chuyển động với requestAnimationFrame
23 Thử thách lập trình: Animation bóng nảy
1 Giới thiệu ví dụ JavaScript
2 Thiết lập bộ đếm ký tự TextArea
3 Mã nguồn
4 Thêm nhiều Event Listeners
5 Mã nguồn
6 Bộ đếm ký tự
7 Mã nguồn
8 Thông báo cảnh báo số ký tự
9 Mã nguồn
1 Thiết lập bộ cuộn chữ JavaScript
2 Mã nguồn
3 Thiết lập cuộn JavaScript
4 Mã nguồn
5 Sẵn sàng cuộn
6 Mã nguồn
7 Dừng khi di chuột qua
8 Mã nguồn
9 Tốc độ động tương tác
10 Mã nguồn
11 Đánh giá mã bộ cuộn
1 Thao tác phần tử DOM vui nhộn
2 Mã nguồn
3 Sao chép phần tử JavaScript
4 Mã nguồn
5 Di chuyển phần tử mới
6 Mã nguồn
7 Cách kéo thả phần tử mới trong JavaScript
8 Mã nguồn
9 Tạo bộ tạo màu ngẫu nhiên
10 Mã nguồn
11 Thùng rác cho phần tử
12 Mã nguồn
13 Cách xóa phần tử khỏi trang
14 Mã nguồn
15 Đánh giá mã phần tử DOM
16 Mã nguồn
1 Game JavaScript từ đầu: Game đoán mật khẩu số
2 Sử dụng phương thức String và Array để chọn và đếm nguyên âm
3 Bài tập đếm nguyên âm chuỗi JavaScript
4 Lấy dữ liệu JSON
5 Hiệu ứng mờ dần thuần JavaScript
6 Closure trong JavaScript
7 Ví dụ về Higher Order Function
8 Tài liệu học bổ sung: Nội dung tải về và ví dụ thực tế

Giới thiệu khóa học

Perfect course to learn more about JavaScript and how to apply JavaScript in real world applications.  Make your web pages come to life with JavaScript.  Create interactive and dynamic web page content today!!!  Learn how to animate page elements, use the page element object properties and values within your code.

Includes 30+ Page Downloadable Source Code and JavaScript Resource Guide

LifeTime Access with new updates - Professional support within the Q&A section.

JavaScript is used when creating interactive and dynamic web content. It allows you to bring your web pages to life. Almost all modern websites use JavaScript and becoming more familiar with how you can add Javascript code to interact and manipulate your web page elements will propel your web pages to the next level.

JavaScript DOM coding Lessons

  • Simple HTML page with innerHTML update

  • Page Element Selection

  • Select and update only divs with a class of output

  • Create Elements and Remove Elements

  • Page Element Style Property

  • Interactive Page elements Events

  • Event Object values

  • Event Listeners vs Event Handlers

  • UseCapture Event Listener Optional

  • Mouse Movement Events

  • Form Field Event listeners

  • List Exercise on events

  • Window Object WOM

  • DOM element attributes

  • Element Get and Has attribute

  • Adding and Removing Classes

  • Traversing between elements

  • List Exercise

  • requestAnimationFrame movement

  • Bouncing Ball Animation

JavaScript and the DOM Page Elements : JavaScript and the DOM

Document Object Model (DOM) is a programming interface for HTML documents, that is the logical structure of a page and how the page content can be accessed and manipulated. Bring your web pages to life with JavaScript and connect to the web page elements. Create fully interactive content that responds to the user. Create Dynamic web page content that can change without page refresh and present new elements and updated content to the user. Improve your web users experience with JavaScript and the DOM. What is the DOM Document Object Model How to select elements from your webpage with JavaScript Manipulate and change your page elements with JavaScript How to set styling attributes for elements Make them interactive with Event listeners DOM events and Page events with JavaScript How to create elements with code and add them to your webpage Moving elements and animation of elements.


  • Element Selection

  • DOM tree

  • Multiple Elements selection

  • Element Manipulation

  • Adding event listeners

  • Input Values

  • Create Elements

  • Animation

  • Element Movement

  • Window events

  • Document Events

  • Keyboard Events

  • Tracking key presses

Practice JavaScript while building fun interactive and dynamic min applications with JavaScript

Text area character counter

  • Events handlers

  • Keyboard events

  • Element manipulation

Text scroll box

  • Word scrolling

  • Mouse events

Fun with Elements

  • Clone elements

  • create and remove elements

  • animate elements

  • draw elements

  • attaching drag and more

No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.

Step by step learning with all steps included.

Beginner JavaScript knowledge is required as the course covers only JavaScript relevant to the building of the game.  Also HTML and CSS knowledge is essential as scope of this course is all JavaScript focused.  

Along with friendly support in the Q&A to help you learn and answer any questions you may have.

Try it now you have nothing to lose, comes with a 30 day money back guarantee.  

Start building your own version of the game today!!!!


Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Dom Manipulation
Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊