Buzz
Chương trình nhỏ, kết hợp với HTML để làm tăng tính tương tác và hấp dẫn của trang web. Ví dụ, có thể tạo cửa sổ pop-up khi người dùng click chuột. JavaScript hiện đang là ngôn ngữ script phổ biến nhất cho trang web.
JavaScript trong HTML
Tiếp tục khám phá JavaScript trong HTML thông qua bài viết dưới đây của Mytour.
1. JavaScript trong HTML.
1.1. Thẻ script trong HTML.
2. Xử lý sự kiện trên trang HTML với JavaScript.
2.1. Thay đổi nội dung HTML với JavaScript.
2.2. Thay đổi style HTML với JavaScript.
2.3. Thay đổi thuộc tính HTML với JavaScript.
3. Sử dụng Script bên ngoài (External Script).
4. Thẻ noscript trong HTML.
1. JavaScript trong HTML
1.1 Thẻ script trong HTML
Thẻ script trong HTML được dùng để xác định script phía máy khách. Nó có thể là file JavaScript ở cả trong hoặc ngoài, chứa các câu lệnh script. Do đó, bạn có thể đặt thẻ script trong phần body hoặc head.
JavaScript chủ yếu được sử dụng để thao tác với hình ảnh, xác nhận biểu mẫu và điều chỉnh nội dung. JavaScript còn sử dụng phương thức document.getElementById() để chọn một phần tử HTML.
Ví dụ: Dưới đây là ví dụ minh họa về thẻ script trong HTML:
Kết quả trả về sẽ có dạng như sau:
2. Xử lý sự kiện trên trang HTML với JavaScript
Sự kiện (event) trong HTML là các hành động mà người dùng hoặc trình duyệt thực hiện, như click chuột hay tải trang. JavaScript đóng vai trò xử lý các sự kiện này.
HTML có các thuộc tính xử lý sự kiện hoạt động kết hợp với mã JavaScript và có thể thực hiện nhiều hành động với sự kiện.
Ví dụ: Dưới đây là ví dụ về cách xử lý sự kiện trên trang HTML bằng JavaScript:
Kết quả trả về sẽ có dạng như sau:
Sự kiện trong HTML đa dạng:
- Sự kiện Form: reset, submit, ... .
- Sự kiện Select: text field (khung text), ... .
- Sự kiện Focus: focus, blur, ... .\
- Sự kiện Chuột: select (chọn), mouseup (nhả chuột), mousemove (di chuyển chuột), mousedown (click chuột), click, dblclick (kích đúp chuột), .... .
Dưới đây là danh sách các thuộc tính của sự kiện:
2.1 Thay đổi nội dung HTML với JavaScript
Ví dụ: Dưới đây là minh họa về cách JavaScript thay đổi nội dung trang HTML:
Kết quả trả về sẽ giống như sau đây:
2.2 Thay đổi phong cách HTML bằng JavaScript
Ví dụ: Dưới đây là minh họa về cách JavaScript thay đổi phong cách của phần tử HTML:
Kết quả trả về có dạng như sau đây:
2.3 Thay đổi thuộc tính HTML với JavaScript
Ví dụ: Trong ví dụ này, chúng ta sử dụng JavaScript để điều chỉnh thuộc tính của các phần tử HTML:
Kết quả trả về sẽ có dạng như sau:
3. Sử dụng Script từ Bên Ngoài (External Script)
Giả sử bạn có nhiều trang HTML khác nhau, nhưng muốn chúng chia sẻ một đoạn mã JavaScript. Điều này có thể thực hiện bằng cách lưu mã JavaScript vào một file riêng biệt và đặt tên cho nó với phần mở rộng là .js.
Lưu ý: Không cần thêm thẻ script vào file bên ngoài và hãy cung cấp đường dẫn đầy đủ đến vị trí lưu trữ file JavaScript.
Cú pháp như sau:
Ví dụ: Dưới đây là một ví dụ minh họa về cách sử dụng file JavaScript từ bên ngoài:
Kết quả trả về sẽ có dạng như sau:
Đoạn mã JavaScript được sử dụng:
4. Thẻ noscript trong HTML
Ví dụ: Dưới đây là ví dụ minh họa cách sử dụng thẻ noscript trong HTML:
Kết quả trả về sau khi áp dụng thẻ noscript sẽ có dạng như sau:
Trong bài viết này, Mytour đã giới thiệu về JavaScript trong HTML. Bài viết tiếp theo sẽ hướng dẫn chi tiết về đường dẫn file trong HTML. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến trong phần bình luận dưới bài viết để cùng nhau học HTML nhé.
