Nội dung
37.17 Event JS Project 03 - code JS - Tạo Progress Bar dùng HTML, CSS, JS - hoàn thành dự án
Giảng viên: cc tuhocThời lượng: 29 phútThuộc khoá: JavaScript siêu tốc - Khóa học lập trình JavaScript từ cơ bản đến nâng cao (146 bài · miễn phí)
Trong video này, chúng ta sẽ cùng nhau học cách tạo một thanh tiến trình động (progress bar) sử dụng HTML, CSS và JavaScript. Đây là một dự án nhỏ nhưng rất hữu ích, giúp bạn hiểu rõ hơn về cách tương tác giữa các thành phần trên trang web và cách cập nhật giao diện người dùng một cách trực quan. Video bắt đầu bằng việc thiết lập cơ bản HTML cho thanh tiến trình, bao gồm các phần tử cần thiết như các bước (steps) và các nút điều khiển (previous và next). Tiếp theo, chúng ta sẽ sử dụng CSS để tạo kiểu cho thanh tiến trình và các bước, đảm bảo rằng chúng hiển thị đẹp mắt và dễ hiểu. Bạn sẽ học cách sử dụng biến CSS để quản lý màu sắc và các thuộc tính khác, giúp mã của bạn dễ duy trì và tùy chỉnh. Sau khi hoàn thiện phần giao diện, chúng ta sẽ chuyển sang JavaScript để thêm các tính năng động cho thanh tiến trình. Bạn sẽ học cách sử dụng các sự kiện (events) và hàm (functions) để cập nhật giao diện khi người dùng nhấn các nút điều khiển. Chúng ta sẽ tạo các hàm để thay đổi bước hiện tại, cập nhật thanh tiến trình và kích hoạt hoặc vô hiệu hóa các nút điều khiển dựa trên bước hiện tại. Video này cũng sẽ giải thích chi tiết cách hoạt động của từng phần tử và từng dòng mã, giúp bạn nắm vững kiến thức và có thể áp dụng vào các dự án thực tế của mình. Chúng ta sẽ tìm hiểu về cách quản lý trạng thái (state) của ứng dụng, đảm bảo rằng thanh tiến trình hoạt động mượt mà và chính xác. Ngoài ra, video còn cung cấp các mẹo và thủ thuật hữu ích trong quá trình lập trình, giúp bạn viết mã hiệu quả hơn và tránh các lỗi phổ biến. Bạn sẽ học được cách sử dụng các phương pháp JavaScript hiện đại, như querySelector và addEventListener, để làm việc với DOM một cách dễ dàng và hiệu quả. Cuối cùng, video sẽ hướng dẫn bạn cách kiểm tra và gỡ lỗi (debug) mã của mình, đảm bảo rằng mọi thứ hoạt động đúng như mong đợi. Bạn sẽ học cách sử dụng công cụ DevTools trong trình duyệt để kiểm tra cấu trúc DOM, kiểm tra các sự kiện và xem xét mã CSS để đảm bảo rằng mọi thứ được căn chỉnh chính xác. Video này không chỉ giúp bạn tạo ra một thanh tiến trình động đẹp mắt mà còn cung cấp cho bạn các kỹ năng quan trọng trong lập trình web, bao gồm việc làm việc với DOM, quản lý trạng thái và xử lý sự kiện. Những kỹ năng này sẽ rất hữu ích trong các dự án lập trình của bạn, giúp bạn tạo ra các ứng dụng web tương tác và thân thiện với người dùng. Hy vọng rằng sau khi xem video này, bạn sẽ cảm thấy tự tin hơn trong việc sử dụng JavaScript và CSS để tạo ra các giao diện người dùng động. Hãy cùng bắt đầu và tạo ra một thanh tiến trình động tuyệt vời nhé. Chúc bạn học tập vui vẻ và thành công!
Học bài này kèm ghi chú theo giây video
Ghi chú gắn đúng giây video, click là nhảy về vị trí đó — kèm tiến độ học, XP và bảng xếp hạng. Khoá này hoàn toàn miễn phí.
← Bài trước37.16 Event JS Project 03 - Tạo Progress Bar dùng HTML, CSS, JS - hướng dẫn từng bướcBài tiếp theo →37.18 Event JS Project 04 - Tạo Search Box với hiệu ứng mở rộng bằng CSS và JavaScript
Nội dung khoá JavaScript siêu tốc - Khóa học lập trình JavaScript từ cơ bản đến nâng cao
Nội dung
- JavaScript siêu tốc - Khóa học lập trình JavaScript từ cơ bản đến nâng cao - JS Full Course for free1 phút
- 1. Mở đầu - Phương pháp học tập và những điểm cần lưu ý của khóa học -JavaScript từ A đến Z tuhoc.cc11 phút
- 2. javascript introduction - Những điều cơ bản mà bạn cần biết | Học JavaScript từ A đến Z tuhoc.cc6 phút
- 3. Console.log và Alert trong JavaScript - Khóa học js cơ bản chi tiết cho người mới7 phút
- 4. JavaScript Cho Người Mới Cách Thêm JavaScript vào HTML Đơn Giản - Nhập Môn JavaScript tuhoc.cc5 phút
- 5.1 JavaScript variable_ Hướng Dẫn Chi Tiết về Khai Báo và Khởi Tạo Biến - JavaScript for beginner13 phút
- 5.2. Quy Tắc Đặt Tên Biến JavaScript_ Bí Quyết để Viết Mã Đẹp và Dễ Đọc -Học JavaScript từ A đến Z6 phút
- 6. Primitive Data Types trong JavaScript - Understanding JavaScript Data Types- JavaScript siêu tốc9 phút
- 7. Các Cách Xuất Dữ Liệu với Biến - Explore JavaScript_ Cách Sử Dụng Console.log và Biến Hiệu Quả10 phút
- 7.2 Các phép toán cơ bản trong JavaScript - Hướng dẫn tự học JS chi tiết cho người mới4 phút
- 7.3 Hướng dẫn quy tắc ưu tiên phép toán JavaScript 2024 - JavaScript Operator Precedence5 phút
- 8. Ép Kiểu Dữ Liệu Trong JavaScript - Hướng Dẫn lập trình JavaScript chi tiết cho Người Mới Học13 phút
- 9. Toán tử gán trong JavaScript Hướng dẫn từ cơ bản đến nâng cao - Series Tự học JS từ A đến Z8 phút
- 10. Toán tử tăng giảm trong javascript - Toán tử tiền tố, hậu tố (prefix, postfix)7 phút
- 11.1 Toán tử logic trong JavaScript - Bài tập thực hành javascript cơ bản 04-0611 phút
- 11.2 Giải Bài tập 04 - tính chu vi, diện tích hình tròn -thực hành javascript cơ bản4 phút
- 11.3 Giải Bài tập 05 - tính chu vi, diện tích hình chữ nhật JS - thực hành javascript cơ bản2 phút
- 11.4 Giải Bài tập 06 - tính điểm trung bình JS - thực hành javascript cơ bản2 phút
- 12. Toán tử So Sánh trong JS - sự khác nhau giữa == và === , khác nhau giữa != và !==14 phút
- 12.2 Làm rõ 1 số phép toán với string và cách hành xử của JS khi bị ép kiểu ngầm định coercion4 phút
- 13. Các hàm toán học thông dụng trong javascript - Học JavaScript căn bản cho người mới8 phút
- 14. Làm rõ hàm Number, isNaN và Number.isNaN trong JavaScript - Khóa học js chi tiết cho người mới16 phút
- 15. Tạo số ngẫu nhiên trong JavaScript với Math.random() - Tự học js cho người mới bắt đầu7 phút
- 16.1 if, else trong JS , Sử dụng VSCode và Chrome Developer Tools để debug JavaScript như thế nào12 phút
- 16.2 if- else if - else trong JS , JS Coding Challenge bài tập js 07 -1219 phút
- 16.3 Giải bài tập JS 07 - tim x, y khi biết tổng và hiệu- Phần cấu trúc điều kiện với If Else4 phút
- 16.4 Giải bài tập JS 08 - Tính BMI - Phần cấu trúc điều kiện với If Else11 phút
- 16.5 Giải bài tập JS 09 - Kiểm tra năm nhuận - Phần cấu trúc điều kiện với If Else7 phút
- 16.6 Giải bài tập JS 10 - Kiểm tra số ngày trong tháng - Phần cấu trúc điều kiện với If Else19 phút
- 16.7 Giải bài tập JS 11 - Giải phương trình bậc 2 - Phần cấu trúc điều kiện với If Else7 phút
- 16.8 Giải bài tập JS 12 - Kiểm tra tháng thuộc quý mấy - Phần cấu trúc điều kiện với If Else5 phút
- 17. Toán tử 3 ngôi trong js - JS Ternary operator - Hướng dẫn về toán tử ba ngôi js và cách áp dụng6 phút
- 17.2 Giải bài tập Js 13 - Toán tử 3 ngôi trong js - Hướng dẫn lập trình js chi tiết cho người mới5 phút
- 18. Truthy and Falsy Values - Chuyển đổi kiểu dữ liệu với Truthy và Falsy - Hướng dẫn chi tiết10 phút
- 19.1 JavaScript Switch Case_ Cơ bản và ví dụ minh họa cho người mới học - xuất dữ liệu nhiều dòng js14 phút
- 19.2 Giải bài tập js 14 - JavaScript Switch Case - Khóa học js cho người mới bắt đầu by tuhoc.cc4 phút
- 20. JavaScript while Loop - Vòng lặp while trong JavaScript Tất cả những gì bạn cần biết13 phút
- 21. JavaScript do...while Loop - Giới thiệu về Vòng Lặp do-while trong JavaScript5 phút
- 22. while(true) in JavaScript_ Cách Kiểm soát và Thoát Khỏi Vòng Lặp Vô Tận - lập trình js pro2 phút
- 23. Vòng lặp for trong JavaScript - Hướng dẫn chi tiết về vòng lặp for JS Từ zero đến hero -tuhoc.cc14 phút
- 24.1 Sử dụng 'continue' và 'break' để kiểm soát vòng lặp trong JavaScript - bài tập js 15 -219 phút
- 24.2 Giải bài tập js 15 - Tính n! dùng vòng lặp while và for - Number.isInteger trong js23 phút
- 24.3 Giải bài tập js 16 - Tính Tổng Số Chẵn, Lẻ - JavaScript Coding Challenge10 phút
- 24.4 Giải bài tập js 17 - Tính Tổng Số lẻ từ 1 đến n - Learn JavaScript Exercise 177 phút
- 24.5 Giải bài tập js 18 - Tìm những số chia hết cho 3 - Coding Challenge JavaScript3 phút
- 24.6 Giải bài tập js 19 - Tính tổng S của các giai thừa từ 1!+...10! - JavaScript Challenge12 phút
- 24.7 Giải bài tập js 20 - Số Hoàn Hảo trong Phạm Vi 1-1000 - avaScript Exercise - khóa học JS cơ bản16 phút
- 24.8 Giải bài tập js 21 - Kiểm Tra Số Nguyên Tố trong JavaScript Javascript for Beginners14 phút
- 25.1 Function Là Gì Hướng Dẫn Cơ Bản Cho Người Mới Học JavaScript - JavaScript Function Mastery17 phút
- 25.2 Các cách Khai báo Hàm trong JavaScript - Function Declaration vs Function Expression7 phút
- 25.3 Arrow Functions in JavaScript - Các cách Khai báo Hàm trong JavaScript - JavaScript ES68 phút
- 25.4 Hàm Gọi Hàm trong JavaScript - Functions Calling Other Functions - Khóa học JavaScript pro6 phút
- 25.5 Giải bài tập js 22 - Tính n! sử dụng Functions JS - Hướng dẫn js chi tiết cho người mới9 phút
- 25.6 Giải bài tập js 23 - Giải phương trình bậc 2 sử dụng Functions JS - Tự học js từ A đến Z10 phút
- 26. Phạm vi Sử dụng (Scope) trong JavaScript - Phân biệt Global, Function và Block Scope trong JS13 phút
- 27.1 JavaScript Hoisting So sánh sự khác nhau giữa var và let - const trong JavaScript16 phút
- 27.2 Hoisting trong JavaScript Functions - Hướng dẫn chi tiết JavaScript5 phút
- 28. Đệ quy với JavaScript - Hướng Dẫn Đệ Quy Chi Tiết dễ hiểu nhất qua ví dụ12 phút
- 29.1 Xử lý Chuỗi trong JS p1 - index chuỗi trong js, và kiểm tra độ dài chuỗi js - length10 phút
- 29.2 String JS part2 - cắt chuỗi string.slice() và string.substring() trong JS - hướng dẫn chi tiết22 phút
- 29.3 Tối ưu hóa Chuỗi JavaScript - trim(), trimEnd(), và trimStart() trong JavaScript3 phút
- 29.4 JavaScript String Methods concat(), toUpperCase(), toLowerCase(), charAt()5 phút
- 29.5 JavaScript String Methods replace (oldValue, newValue) repeat (count) in JS5 phút
- 29.6 JavaScript String Methods indexOf , lastIndexOf, includes - Xử lý chuỗi trong JavaScript11 phút
- 29.7 String Methods JavaScript startsWith() endsWith trong JS, xử lý chuỗi trong JavaScript8 phút
- 29.8 split() trong JavaScript Hướng dẫn JavaScript chi tiết cho người mới học - tuhoc.cc4 phút
- 30.1 Bài Tập Chuỗi JavaScript , bài tập js 24 -28 Bài Tập JavaScript Vận Dụng Kiến Thức Chuỗi8 phút
- 30.2 Giải bài tập JavaScript 24 _ Đếm ký tự in hoa, in thường, số, space10 phút
- 30.3 Giải bài tập JavaScript 25 _ Kiểm tra tính hợp lệ của mật khẩu - Lập Trình JavaScript28 phút
- 30.4 Giải bài tập JavaScript 26 _ Chuyển tin nhắn sang mật mã - Bài tập chuỗi trong JavaScript16 phút
- 30.5 Giải bài tập JavaScript 27 _ Đếm từ tôi trong chuỗi - Bài tập JavaScript có giải chi tiết11 phút
- 30.6 Giải bài tập JavaScript 28 _ Tách số và chữ từ chuỗi cho trước - Bài tập thực hành JS có giải4 phút
- 31.1 Date and Time trong JavaScript - Working with Javascript Dates for Beginners - tuhoc.cc9 phút
- 31.2 Xử lý ngày tháng trong JavaScript, Date Set Methods , định dạng và hiển thị ngày tháng trong JS14 phút
- 31.3 setTimeout trong JavaScript _ Video hướng dẫn đầy đủ và chi tiết tại khoá học JavaScript pro12 phút
- 31.4 Javascript setInterval Explained _ Hiểu rõ setInterval trong JavaScript với ví dụ thực tế12 phút
- 31.5 Giải Bài tập JS 29_ Tính tuổi từ năm sinh - Bài tập vận dụng date time Javascript8 phút
- 31.6 Giải Bài tập JS 30_ Countdown Timer - Bài tập thực hành date time javascript cho người mới9 phút
- 31.7 Giải Bài tập JS 31_ Xây dựng chức năng hiển thị thời gian offline - bài tập thực hành js9 phút
- 32.1 JavaScript Array Tutorial -Mảng trong JavaScript p1 Tìm hiểu về mảng js Từ Cơ Bản đến Nâng Cao20 phút
- 32.2 JavaScript Array Methods p1 _ Tìm hiểu về các phương thức làm việc với Array JS cơ bản phần 114 phút
- 32.3 JavaScript Array Methods p2 _ Các phương thức làm việc với Array JS cơ bản phần 29 phút
- 32.4 Hiểu Rõ Sức Mạnh của splice() - Chinh Phục Mảng JavaScript8 phút
- 32.5 Toán Tử Spread trong JavaScript - ES6 - Hướng Dẫn Toàn Diện về Toán Tử Spread Trong JavaScript8 phút
- 32.6 Phương Thức sort() trong JavaScript - ES6 - Sắp Xếp Mảng trong JavaScript một Cách Hiệu Quả17 phút
- 32.7 Phương Thức reduce() trong JavaScript - Hướng Dẫn Chi Tiết với Ví Dụ Thực Tế15 phút
- 32.8 JavaScript Filter() Method - Sử dụng filter() để làm việc với dữ liệu mảng trong JavaScript6 phút
- 33.1 Bài tập thực hành JavaScript Array - Bài tập JavaScript 32 333 phút
- 33.2 Giải bài tập js 32 - Nhập mảng số nguyên từ bàn phím - Bài tập thực hành JavaScript Array7 phút
- 33.3 Giải bài tập js 33 - Thực hành JavaScript Array - Tạo mảng ngẫu nhiên , thao tác cơ bản mảng JS20 phút
- 34.1 JavaScript Objects - Cơ Bản về Objects JS, Lập trình hướng đối tượng JS, Literal syntax JS17 phút
- 34.2 Truy Cập Thuộc Tính Dot Notation và Bracket Notation - Lập trình hướng đối tượng JS chi tiết12 phút
- 34.3 Truy Cập Phương thức - hướng đối tượng JavaScript chi tiết nhất cho người mới6 phút
- 34.4 OOP JS - Thêm, sửa, xóa thuộc tính trong đối tượng JavaScript Kiến thức căn bản3 phút
- 34.5 Object JS methods - Các phương thức sẵn có trong JS phần 1 - khóa học javaScript Pro9 phút
- 34.6 Object JS methods - Các phương thức sẵn có trong JS phần 2 - khóa học javaScript Pro6 phút
- 34.7 Tại sao bạn nên sử dụng 'const' thay vì 'let' cho đối tượng trong JavaScript8 phút
- 34.8 JavaScript Function Constructor - Hàm Tạo và Constructor - giải thích chi tiết23 phút
- 34.9 Prototype trong JavaScript - JavaScript Prototype Explained - Hướng dẫn Prototype JS chi tiết11 phút
- 34.10 Khám phá sâu hơn về Prototype và OOP trong JavaScript phần 215 phút
- 34.11 Hiểu Rõ ES6 Classes - Learn JavaScript CLASSES - Hướng Dẫn Đầy Đủ về ES6 Classes18 phút
- 34.12 Instance Method và Static Method trong JS Hiểu rõ về Static method trong JS JS OOP Explained14 phút
- 34.13 JavaScript ES6 - Học Kế thừa trong JavaScript ES6 một cách Dễ dàng - Classes and Inheritance17 phút
- 34.14 Giải bài tập js 34 - bài tập kế thừa - lập trình hướng đối tượng js - Khóa học JS Pro11 phút
- 34.15 Getter and Setter JavaScript - JavaScript Getters and Setters Explained - Ví dụ thực tế14 phút
- 34.16 Tính Đóng Gói Trong JavaScript p1 - Encapsulation in JavaScript (JavaScript OOP Tutorial)10 phút
- 34.17 Tính Đóng Gói Trong JavaScript p2 - Encapsulation in JavaScript (JavaScript OOP Tutorial)16 phút
- 35.1 JavaScript BOM (Browser Object Model) - Giải thích chi tiết cho người mới13 phút
- 36.1 JAVASCRIPT DOM TUTORIAL _ DOM Document Object trong JavaScript _ HTML DOM13 phút
- 36.2 DOM JavaScript _ Sử dụng innerHTML và các phương thức getElement _ Hướng dẫn JavaScript DOM13 phút
- 36.3 DOM JavaScript_ Hiểu rõ querySelector và querySelectorAll để tìm kiếm và thay đổi phần tử8 phút
- 36.4 DOM JavaScript Digital Clock - Hiển thị thời gian thực với DOM - học DOM JavaScript qua Ví dụ15 phút
- 36.5 JavaScript DOM Hiểu rõ getAttribute và setAttribute Understanding getAttribute vs setAttribute12 phút
- 36.6 JavaScript DOM | Using removeAttribute and hasAttribute | Hướng dẫn chi tiết6 phút
- 36.7 JS DOM Hiểu rõ về textContent, innerText, và innerHTML trong JavaScript - Hướng dẫn chi tiết9 phút
- 36.8 JS DOM | dom style javascript |Tùy chỉnh CSS thông qua JavaScript DOM Hướng dẫn từ cơ bản8 phút
- 36.9 JS DOM_ dom style part 2 - window.getComputedStyle vs. .style_ Sự Khác Biệt Là Gì14 phút
- 36.10 JS DOM_ classlist javascript _ Quản lý Class CSS _ add, remove, toggle, replace, contains10 phút
- 36.11 JS DOMTutorial Truy cập Parent, Child, and Siblings - Truy Cập Phần Tử Cha, Con và Anh Em JS10 phút
- 36.12 JS DOMTutorial Tạo và Thêm Phần Tử Mới Vào DOM Với Append và Prepend17 phút
- 36.13 JS DOM appendChild trong JavaScript - So sánh appendChild và append trong DOM JavaScript18 phút
- 36.14 JS DOM Bài tập JS 35, vận dụng kiến thức append hoặc appendChild DOM trong JS6 phút
- 36.15 JS DOM removeChild vs remove - Cách Xóa Phần Tử DOM Với JavaScript8 phút
- 36.16 Dự Án Thực Tế với JavaScript DOM Tạo Gallery Ảnh - Pokemon by JS19 phút
- 37.1 DOM Event Là Gì Giới Thiệu Các Sự Kiện Phổ Biến - Tổng quan về DOM EVENT javascript5 phút
- 37.2 Event JS Tìm Hiểu Về Inline Event Trong JavaScript Hướng Dẫn Dễ Hiểu10 phút
- 37.3 Event JS DOM Level 0 Event Handling Trong JavaScript Hướng Dẫn Toàn Diện19 phút
- 37.4 Event JS addEventListener Trong JavaScript - Cách Thêm, Xóa Và Quản Lý Sự Kiện13 phút
- 37.5 Event JS Mini Project JS - Random Color Background - Bài Tập Thực Hành JS 3611 phút
- 37.6 Event JS Sử dụng từ khóa 'this' để tối ưu hóa code - Thay đổi màu sắc cho các phần tử HTML10 phút
- 37.7 Event JS Event Object and keyboard events trong JavaScript - Tất cả những điều bạn cần biết10 phút
- 37.8 Event JS _ Cách Sử Dụng preventDefault() trong JavaScript _ Ngăn Chuyển Hướng Form5 phút
- 37.9 Event JS _ Ví dụ vận dụng preventDefault() -Hướng dẫn sử dụng preventDefault và sự kiện form JS11 phút
- 37.10 Event JS Input & Change Events - Hướng dẫn chi tiết, dễ hiểu5 phút
- 37.11 Event JS JavaScript Event Bubbling Cách Ngăn Chặn Với stopPropagation10 phút
- 37.12 Event JS: Event Bubbling và Event Capturing, stopPropagation và stopImmediatePropagation9 phút
- 37.13 Event JS: Event Delegation trong JavaScript _ Quản Lý Sự Kiện Trong JS Với Event Delegation15 phút
- 37.14 Event JS Project 02 Slide Ảnh Tương Tác Bằng JavaScript - Bài tập vận dụng event js18 phút
- 37.15 Event JS Project 02 - hoàn thành Slide Ảnh Tương Tác Bằng JavaScript14 phút
- 37.16 Event JS Project 03 - Tạo Progress Bar dùng HTML, CSS, JS - hướng dẫn từng bước22 phút
- ▸ 37.17 Event JS Project 03 - code JS - Tạo Progress Bar dùng HTML, CSS, JS - hoàn thành dự án29 phút
- 37.18 Event JS Project 04 - Tạo Search Box với hiệu ứng mở rộng bằng CSS và JavaScript12 phút
- 37.19 Event JS Project 04 Hoàn thiện - Tạo Search Box với hiệu ứng mở rộng bằng CSS và JavaScript6 phút
- 37.20 Event JS Project 05 - Hướng Dẫn Tạo Hiệu Ứng Nút Bấm Tuyệt Đẹp với JavaScript - Button effect10 phút
- 37.21 Event JS Project 05 Finish - Hướng Dẫn Tạo Hiệu Ứng Nút Bấm Tuyệt Đẹp với JavaScript17 phút
- 38. Array map method - Giải thích map() trong JavaScript qua ví dụ dễ hiểu22 phút