Các Cách Sử Dụng Javascript Trong Trang Web | Nền Tảng

Trang chủ » Cách Dùng Javascript » Các Cách Sử Dụng Javascript Trong Trang Web | Nền Tảng

Có thể bạn quan tâm

NenTang.vn
  • Trang chủ
  • Về chúng tôi
    • Giới thiệu
    • Liên hệ
  • Đào tạo
    • Các khóa học
    • Giáo vụ
  • Tin tức
    • Các tin tức
    • Tuyển dụng
  • Đăng nhập
đôi cánh Nền tảng bay tới tương lai đôi cánh Nền tảng bay tới tương lai
  1. Trang chủ Giáo dục
  2. Thiết kế web căn bản - HTML CSS JS
  3. Các cách sử dụng Javascript trong tra...
Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn
  1. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
    1. Cài đặt trình soạn thảo code Visual Studio Code IDE
    2. Cài đặt tiện ích mở rộng Live Server Extension cho Visual Studio Code
  2. HTML5 là gì? Các thẻ (tag) HTML cơ bản 19
    1. HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML
    2. Khác biệt giữa HTML và HTML5
    3. Cấu trúc file HTML5 cơ bản
    4. Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS
    5. Các thói quen cần có khi lập trình web sử dụng HTML
    6. Các thẻ (tag) định nghĩa mô tả (meta) cho trang web
    7. Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text)
    8. Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule)
    9. Các thẻ (tag) định dạng kiểu font chữ
    10. Các thẻ (tag) định dạng hiển thị cho văn bản (text)
    11. Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF
    12. Các thẻ (tag) tạo Siêu liên kết (hyperlink)
    13. Các thẻ (tag) tạo Danh sách (list)
    14. Các thẻ (tag) chèn hình ảnh vào trang web
    15. Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web
    16. Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web
    17. Các ký tự đặc biệt trong HTML
    18. Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình
    19. Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE
  3. Thiết kế bố cục trang web (layout) 12
    1. Thẻ TABLE (TABLE tag) là gì?
    2. Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag)
    3. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản
    4. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ
    5. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu
    6. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ
    7. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm
    8. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết
    9. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng
    10. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm
    11. Thẻ DIV (DIV tag) là gì?
    12. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag)
  4. Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM 21
    1. Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì?
    2. Tạo ô nhập liệu INPUT 1 dòng (single line text)
    3. Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text)
    4. Tạo ô nhập liệu INPUT dạng ẩn (hidden)
    5. Tạo nút bấm BUTTON
    6. Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn
    7. Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn
    8. Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn
    9. Tạo ô nhập liệu INPUT kiểu COLOR
    10. Tạo ô nhập liệu INPUT kiểu DATE
    11. Tạo ô nhập liệu INPUT kiểu EMAIL
    12. Tạo ô nhập liệu INPUT kiểu NUMBER
    13. Tạo ô nhập liệu INPUT kiểu RANGE
    14. Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại)
    15. Tạo ô nhập liệu INPUT kiểu TIME
    16. Tạo ô nhập liệu INPUT kiểu URL
    17. Tạo thanh đo lường METER
    18. Tạo thanh tiến trình PROGRESS
    19. Tạo biểu mẫu (Form) đặt vé Máy bay
    20. Tạo biểu mẫu (Form) Đăng nhập
    21. Tạo biểu mẫu (Form) Đăng ký
  5. CSS là gì? 34
    1. CSS là gì? Cú pháp sử dụng CSS
    2. Các cách áp dụng CSS để định dạng trang web
    3. Các thuộc tính CSS định dạng font chữ
    4. Các thuộc tính CSS quy định màu sắc đối tượng
    5. Đơn vị đo lường trong CSS
    6. Bài tập - Tạo menu ngang đa cấp bằng CSS
    7. Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử
    8. Tìm hiểu về Thuộc tính vị trí Position trong CSS
    9. Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS
    10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix
    11. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1
    12. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2
    13. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3
    14. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action
    15. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product
    16. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services
    17. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team
    18. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience
    19. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1
    20. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2
    21. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3
    22. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic
    23. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials
    24. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables
    25. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1
    26. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2
    27. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer
    28. Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS
    29. Bộ lựa chọn trong CSS (CSS Selector)
    30. Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography
    31. Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic
    32. Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web
    33. Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS
    34. Bài tập - Thiết kế mẫu hóa đơn bán hàng cho máy in nhiệt khổ giấy K80 và K57
  6. Javascript căn bản 8
    1. Javascript là gì? Ứng dụng của Javascript
    2. Các cách sử dụng Javascript trong trang web
    3. Biến trong Javascript
    4. Hàm trong Javascript
    5. Lab 01 - tạo chương trình tính toán cơ bản
    6. Bài tập Ghép chuỗi String
    7. Cấu trúc điều khiển sử dụng IF ELSE
    8. Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM)
  7. JQuery căn bản 10
    1. Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web
    2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web
    3. Tìm hiểu quy tắc vận hành của JQUERY
    4. Toàn tập về Bộ lựa chọn (selector)
    5. Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY
    6. Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout
    7. Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval
    8. Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY
    9. Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR
    10. Tích hợp công cụ chọn Ngày Tháng Date Picker
  8. Bootstrap là gì? JQuery là cái chi? 8
    1. Giới thiệu Bootstrap
    2. Cách sử dụng Bootstrap trong dự án của bạn
    3. Hệ thống Lưới (GRID) của Bootstrap
    4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap
    5. Ràng buộc dữ liệu (validation) bằng Bootstrap
    6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty
    7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive)
    8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query
  9. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
    1. Lộ trình (Roadmap) Thực hiện Đồ án
    2. Khởi tạo thư mục dự án
    3. Phân tích Bố cục (layout)
    4. Xây dựng Trang chủ (index)
    5. Xây dựng Trang Giới thiệu (about)
    6. Xây dựng Trang Liên hệ (contact)
    7. Xây dựng Trang Danh sách Sản phẩm (products)
    8. Xây dựng Trang Chi tiết Sản phẩm (product_detail)
    9. Xây dựng Trang Giỏ hàng (cart)
    10. Xây dựng Trang Thanh toán (checkout)
    11. Xây dựng Trang Đăng nhập (login)
    12. Xây dựng Trang Đăng ký (register)
    13. Xây dựng Trang Tìm kiếm (search)
    14. Thưởng thức Kết quả (demo version)
  10. Kiểm tra
  11. Tài liệu tham khảo 4
    1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend HTML CSS JS
    2. SourceCode tham khảo Lập trình web Frontend HTML CSS JS
    3. Các thể loại Menu trong Thiết kế Web
    4. Tổng hợp các công cụ tự sinh Giao diện HTML, CSS, JS tuyệt vời dành cho Nhà phát triển thiết kế Web
  12. VueJS 7
    1. VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd
    2. Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel
    3. Component trong VueJS
    4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản
    5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap
    6. Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ
    7. Test
  13. UI/UX trong lập trình Web 2
    1. Tìm hiểu về khái niệm UI/UX trong thiết kế ứng dụng
    2. Quy trình Xây dựng, Thiết kế một trang Web
  14. CSS Flexbox 1
    1. Tạo cấu trúc Dòng x Cột trong CSS Flexbox
  15. Extras 2
    1. Bài tập xử lý lưu trữ dữ liệu với LocalStorage
    2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS
  16. Video khóa học 1
    1. Video khóa học toàn tập
Chương 6-Bài 2. Các cách sử dụng Javascript trong trang web
  • IN
Tác giả: Dương Nguyễn Phú Cường Số phút học: 123 phút Ngày đăng: 19/12/2025, 0:34 Lượt xem: 2714

Video hướng dẫn

Các cách sử dụng Javascript trong HTML

Cách 1: sử dụng file JavaScript rời (External File)

  • Đây là cách được sử dụng nhiều trong dự án thực tế.
  • Rất thuận tiện trong việc chia sẻ code Javascript giữa các dự án với nhau.
  • Thường sử dụng để lập trình các thư viện tiện ích (Javascript Library)

Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)

  • Thường được sử dụng để viết những đoạn code Javascript nhỏ gọn hoặc gọi hàm cần xử lý từ thư viện đã được liên kết

Cách 1: sử dụng file JavaScript rời (External File)

Ưu điểm và Nhược điểm

Ưu điểm Nhược điểm
Tách rời code xử lý JavaScript khỏi file giao diện HTML Cần phải Tổ chức thư mục và đặt tên file tốt để tránh gây rối dự án
Dễ dàng quản lý / tổ chức source code Cần phải liên kết chính xác đường dẫn đến file Javascript để sử dụng
Thường sử dụng trong các dự án thực tế
Thường được sử dụng để phát triển các thư viện tiện ích (Javascript library)

Step 1: tạo cấu trúc thư mục như sau

  • Cấu trúc Thư mục Dự án có sử dụng Javascript
\---ex1 <- thư mục gốc dự án | index.html <- trang chủ | \---js <- thư mục chứa các file JavaScript của dự án app.js <- file javascript dự án
  • Cấu trúc Thư mục dự án tạo trong Visual Studio Code

Step 2: viết code xử lý cho index.html và app.js

  • Nội dung file index.html
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Nền tảng | JavaScript căn bản</title> </head> <body>   <h1>Học JavaScript căn bản</h1> </body> </html>
  • Nội dung file app.js
// Gọi hàm alert('') để hiển thị thông báo alert('Chào mừng đến với JavaScript. Tôi là code JS trong file rời...');

Step 3: Nhúng/Liên kết code JavaScript vào trong file HTML

  • Hiệu chỉnh file index.html
  • Bổ sung đoạn code liên kết file app.js vào file index.html
  • Lưu ý: nên sử dụng đường dẫn liên kết tương đối (relative path) để liên kết file
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Nền tảng | JavaScript căn bản</title>   <!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->   <script src="js/app.js"></script> </head> <body>   <h1>Học JavaScript căn bản</h1> </body> </html>

Step 4: mở trang index.html bằng trình duyệt để xem kết quả

  • Mở bằng trình duyệt (Chrome, Firefox, Safari, ...) để xem kết quả
  • Chuột phải file index.html -> Open With -> Google Chrome
  • Màn hình hiển thị thông báo chào mừng

Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)

Ưu điểm và Nhược điểm

Ưu điểm Nhược điểm
Code trong cùng 1 file HTML nên thuận tiện việc lưu trữ Khó khăn trong việc chia sẻ code cho các dự án khác
Viết các đoạn code JavaScript một cách nhanh chóng Không tách biệt HTML và JavaScript dẫn đến file code HTML nặng nề và dài dòng
Thuận tiện khi viết các đoạn demo ngắn gọn Khó khăn trong việc bảo trì code

Step 1: tạo cấu trúc thư mục như sau

  • Cấu trúc Thư mục Dự án có sử dụng Javascript
\---ex1 <- thư mục gốc dự án | index.html <- trang chủ | \---js <- thư mục chứa các file JavaScript của dự án app.js <- file javascript dự án
  • Cấu trúc Thư mục dự án tạo trong Visual Studio Code

Step 2: viết code xử lý cho index.html và app.js

  • Nội dung file index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nền tảng | JavaScript căn bản</title> <!-- Nhúng/Liên kết code JavaScript vào trong file HTML --> <script src="js/app.js"></script> <!-- Đoạn code JavaScript bên trong file HTML --> <script> alert('Xin chào, tôi là đoạn code bên trong file HTML!'); </script> </head> <body> <h1>Học JavaScript căn bản</h1> </body> </html>

Step 3: mở trang index.html bằng trình duyệt để xem kết quả

  • Mở bằng trình duyệt (Chrome, Firefox, Safari, ...) để xem kết quả
  • Chuột phải file index.html -> Open With -> Google Chrome

Lưu ý: các trường hợp sai khi sử dụng JavaScript trong HTML

  • Thẻ <script></script> cùng 1 lúc chỉ được thực hiện 1 tác vụ, không thể vừa cùng lúc liên kết file, vừa chứa code bên trong
  • Ví dụ trường hợp sử dụng sai:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nền tảng | JavaScript căn bản</title> <!-- Nhúng/Liên kết code JavaScript vào trong file HTML --> <script src="js/app.js"></script> <!-- Đoạn code JavaScript bên trong file HTML --> <script> alert('Xin chào, tôi là đoạn code bên trong file HTML!'); </script> <!-- Đoạn code JavaScript sai, vì cùng lúc thực hiện nhiều tác vụ - Vừa liên kết file app.js - Vừa chạy đoạn script bên trong => Sai, một số trường hợp sẽ thực thi code không chính xác. Tốt nhất thực hiện chỉ 1 tác vụ cùng lúc. --> <script src="js/app.js"> alert('Xin chào, tôi là đoạn code thực hiện cùng lúc cả 2 tác vụ, tôi quá tải ?!'); </script> </head> <body> <h1>Học JavaScript căn bản</h1> </body> </html> Về trang chủ Về Chương trình học Bài học trước Bài học tiếp theo

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập Danh sách bình luận

Chưa có bình luận nào!

Mục lục

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...
  1. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
    1. Cài đặt trình soạn thảo code Visual Studio Code IDE
    2. Cài đặt tiện ích mở rộng Live Server Extension cho Visual Studio Code
  2. HTML5 là gì? Các thẻ (tag) HTML cơ bản 19
    1. HTML là gì? Cú pháp sử dụng thẻ (tag) trong HTML
    2. Khác biệt giữa HTML và HTML5
    3. Cấu trúc file HTML5 cơ bản
    4. Các Quy tắc và Quy ước nên tuân theo khi lập trình web HTML5 CSS JS
    5. Các thói quen cần có khi lập trình web sử dụng HTML
    6. Các thẻ (tag) định nghĩa mô tả (meta) cho trang web
    7. Các thẻ (tag) định dạng Đề mục (Heading), Phân đoạn (Paragraph), Ngắt dòng (Break) cho văn bản (Text)
    8. Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule)
    9. Các thẻ (tag) định dạng kiểu font chữ
    10. Các thẻ (tag) định dạng hiển thị cho văn bản (text)
    11. Phân biệt 2 họ font chữ phổ biến SERIF và SANS SERIF
    12. Các thẻ (tag) tạo Siêu liên kết (hyperlink)
    13. Các thẻ (tag) tạo Danh sách (list)
    14. Các thẻ (tag) chèn hình ảnh vào trang web
    15. Các thẻ (tag) chèn các đối tượng đa phương tiện (audio, video) vào trang web
    16. Các thẻ (tag) làm thanh tự động cuộn nội dung trong trang web
    17. Các ký tự đặc biệt trong HTML
    18. Thẻ (tag) IFRAME để nhúng trang web khác vào trang web của mình
    19. Các loại font chữ phổ biến trong thiết kế web SERIF, SANS SERIF, DISPLAY, HANDWRITING, MONOSPACE
  3. Thiết kế bố cục trang web (layout) 12
    1. Thẻ TABLE (TABLE tag) là gì?
    2. Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag)
    3. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Đơn giản
    4. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang chủ
    5. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giới thiệu
    6. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Liên hệ
    7. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Danh sách Sản phẩm
    8. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Sản phẩm chi tiết
    9. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Giỏ hàng
    10. Bài tập - Thiết kế bố cục trang web sử dụng thẻ TABLE (TABLE tag) - Web Bán hàng - Trang Tìm kiếm
    11. Thẻ DIV (DIV tag) là gì?
    12. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag)
  4. Tạo biểu mẫu nhập liệu sử dụng thẻ (tag) FORM 21
    1. Biểu mẫu nhập liệu (form) là gì? Thường được sử dụng vào mục đích gì?
    2. Tạo ô nhập liệu INPUT 1 dòng (single line text)
    3. Tạo ô nhập liệu TEXTAREA nhiều dòng (multiline text)
    4. Tạo ô nhập liệu INPUT dạng ẩn (hidden)
    5. Tạo nút bấm BUTTON
    6. Tạo ô nhập liệu CHECKBOX chọn 1 hoặc nhiều những tùy chọn
    7. Tạo ô nhập liệu RADIO chọn 1 trong những tùy chọn
    8. Tạo ô nhập liệu SELECT cho phép chọn lựa tùy chọn
    9. Tạo ô nhập liệu INPUT kiểu COLOR
    10. Tạo ô nhập liệu INPUT kiểu DATE
    11. Tạo ô nhập liệu INPUT kiểu EMAIL
    12. Tạo ô nhập liệu INPUT kiểu NUMBER
    13. Tạo ô nhập liệu INPUT kiểu RANGE
    14. Tạo ô nhập liệu INPUT kiểu TEL (số điện thoại)
    15. Tạo ô nhập liệu INPUT kiểu TIME
    16. Tạo ô nhập liệu INPUT kiểu URL
    17. Tạo thanh đo lường METER
    18. Tạo thanh tiến trình PROGRESS
    19. Tạo biểu mẫu (Form) đặt vé Máy bay
    20. Tạo biểu mẫu (Form) Đăng nhập
    21. Tạo biểu mẫu (Form) Đăng ký
  5. CSS là gì? 34
    1. CSS là gì? Cú pháp sử dụng CSS
    2. Các cách áp dụng CSS để định dạng trang web
    3. Các thuộc tính CSS định dạng font chữ
    4. Các thuộc tính CSS quy định màu sắc đối tượng
    5. Đơn vị đo lường trong CSS
    6. Bài tập - Tạo menu ngang đa cấp bằng CSS
    7. Các thuộc tính quy định Kích thước và Khoảng cách của các phần tử
    8. Tìm hiểu về Thuộc tính vị trí Position trong CSS
    9. Tìm hiểu các thuộc tính quy định vị trí Trôi nổi, Dàn hàng ngang sử dụng Float Left, Float Right trong CSS
    10. Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag), thuộc tính CSS Float left, right và kỹ thuật sử dụng điểm ngắt CSS class clear-fix
    11. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 1
    12. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 2
    13. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Header phong cách 3
    14. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Call for Action
    15. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Feature Product
    16. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Services
    17. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Team
    18. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Experience
    19. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 1
    20. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 2
    21. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Our Portfolio phong cách 3
    22. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Statistic
    23. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Testimonials
    24. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Pricing Tables
    25. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 1
    26. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Get in touch phong cách 2
    27. Bài tập - Thiết kế bố cục trang web sử dụng thẻ DIV (DIV tag) - Footer
    28. Bộ lựa chọn đặc biệt theo trạng thái Pseudo Class và Pseudo Element trong CSS
    29. Bộ lựa chọn trong CSS (CSS Selector)
    30. Sử dụng CSS để làm nhà sáng tạo Nghệ thuật sắp xếp trình bày chữ Typography
    31. Hướng dẫn phân tích Bố cục (layout) Web bán hàng Thực phẩm Dinh dưỡng Organic
    32. Tư duy Thiết kế Khung cần có khi xây dựng giao diện Một Trang web
    33. Tìm hiểu toàn diện về thuộc tính trình diễn ảnh object-fit trong CSS
    34. Bài tập - Thiết kế mẫu hóa đơn bán hàng cho máy in nhiệt khổ giấy K80 và K57
  6. Javascript căn bản 8
    1. Javascript là gì? Ứng dụng của Javascript
    2. Các cách sử dụng Javascript trong trang web
    3. Biến trong Javascript
    4. Hàm trong Javascript
    5. Lab 01 - tạo chương trình tính toán cơ bản
    6. Bài tập Ghép chuỗi String
    7. Cấu trúc điều khiển sử dụng IF ELSE
    8. Cách lấy dữ liệu Người dùng từ Biểu mẫu (FORM)
  7. JQuery căn bản 10
    1. Giới thiệu JQuery và ứng dụng của JQuery trong thiết kế, lập trình web
    2. Cú pháp của JQUERY và cách sử dụng JQUERY trong trang web
    3. Tìm hiểu quy tắc vận hành của JQUERY
    4. Toàn tập về Bộ lựa chọn (selector)
    5. Bài tập Tạo trang tùy chỉnh Nội dung và Giao diện bằng JQUERY
    6. Bài tập Thực thi một hàm xử lý sau một khoảng thời gian bằng hàm setTimeout
    7. Bài tập Thực thi một hàm xử lý liên tục sau 1 khoảng thời gian bằng hàm setInterval
    8. Thu thập dữ liệu người dùng nhập trong FORM bằng JQUERY
    9. Tích hợp bộ công cụ Soạn thảo văn bản Trực quan WYSIWYG CKEDITOR
    10. Tích hợp công cụ chọn Ngày Tháng Date Picker
  8. Bootstrap là gì? JQuery là cái chi? 8
    1. Giới thiệu Bootstrap
    2. Cách sử dụng Bootstrap trong dự án của bạn
    3. Hệ thống Lưới (GRID) của Bootstrap
    4. Bài tập - Thiết kế Bố cục (layout) bằng Bootstrap
    5. Ràng buộc dữ liệu (validation) bằng Bootstrap
    6. Bài tập Tổng hợp - Thực hiện Trang web Landing Page giới thiệu Công ty
    7. Thiết kế trang web bố cục (layout) tùy biến theo từng thiết bị màn hình (Responsive)
    8. Tùy biến giao diện theo từng thiết bị màn hình (Responsive) bằng kỹ thuật CSS Media Query
  9. Làm Đồ án Web thực tế Trang bán hàng Nền Tảng phiên bản Bootstrap 14
    1. Lộ trình (Roadmap) Thực hiện Đồ án
    2. Khởi tạo thư mục dự án
    3. Phân tích Bố cục (layout)
    4. Xây dựng Trang chủ (index)
    5. Xây dựng Trang Giới thiệu (about)
    6. Xây dựng Trang Liên hệ (contact)
    7. Xây dựng Trang Danh sách Sản phẩm (products)
    8. Xây dựng Trang Chi tiết Sản phẩm (product_detail)
    9. Xây dựng Trang Giỏ hàng (cart)
    10. Xây dựng Trang Thanh toán (checkout)
    11. Xây dựng Trang Đăng nhập (login)
    12. Xây dựng Trang Đăng ký (register)
    13. Xây dựng Trang Tìm kiếm (search)
    14. Thưởng thức Kết quả (demo version)
  10. Kiểm tra
  11. Tài liệu tham khảo 4
    1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend HTML CSS JS
    2. SourceCode tham khảo Lập trình web Frontend HTML CSS JS
    3. Các thể loại Menu trong Thiết kế Web
    4. Tổng hợp các công cụ tự sinh Giao diện HTML, CSS, JS tuyệt vời dành cho Nhà phát triển thiết kế Web
  12. VueJS 7
    1. VueJS là gì? Ứng dụng của VueJS trong phát triển web FrontEnd
    2. Tìm hiểu Kiến trúc Hệ thống Web MVVM - Model View ViewModel
    3. Component trong VueJS
    4. Kiểm tra ràng buộc dữ liệu (validation) bằng VueJS và Bootstrap đơn giản
    5. Kiểm tra ràng buộc dữ liệu (Validation) bằng VueJS và Bootstrap
    6. Bài tập - Sử dụng Bootstrap và VueJS để thiết kế Trang Tuyển dụng các Vị trí Việc làm Công nghệ
    7. Test
  13. UI/UX trong lập trình Web 2
    1. Tìm hiểu về khái niệm UI/UX trong thiết kế ứng dụng
    2. Quy trình Xây dựng, Thiết kế một trang Web
  14. CSS Flexbox 1
    1. Tạo cấu trúc Dòng x Cột trong CSS Flexbox
  15. Extras 2
    1. Bài tập xử lý lưu trữ dữ liệu với LocalStorage
    2. Tạo hiệu ứng chuyển động animation với tính năng motion-path CSS
  16. Video khóa học 1
    1. Video khóa học toàn tập
Về trang chủ Về Chương trình học Bài học trước Bài học tiếp theo

Menu Tiện ích

    Trang chủ Chia sẻ Facebook Liên hệ Hỏi đáp/Chat trợ giúp

Menu Hướng dẫn Học tập

  • Nhắc nhở
  • Các bước cần thực hiện

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Thực hiện các bước tuần tự theo nội dung Bài học nhé!

Nền tảng các kiến thức học tập

Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.

Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!

Khám phá, trải nghiệm ngay

Từ khóa » Cách Dùng Javascript