Script là chương trình nhỏ được sử dụng cùng HTML để tăng độ hấp dẫn và tương tác cho trang web, chẳng hạn như các cửa sổ pop-up hiển thị trên màn hình khi người dùng click chuột. JavaScript hiện là ngôn ngữ script được sử dụng phổ biến nhất cho các trang web.
Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu JavaScript trong HTML.
1. JavaScript trong HTML
1.1 Thẻ script trong HTML
Thẻ script trong HTML được sử dụng để chỉ định script phía máy khách. Nó có thể là file JavaScript bên trong hoặc bên ngoài có chứa các câu lệnh script, vì vậy chúng ta có thể đặt thẻ script trong phần body hoặc head.
JavaScript được sử dụng chủ yếu để thao tác với hình ảnh, xác nhận biểu mẫu và thay đổi nội dung. Ngoài ra JavaScript 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 thẻ script trong HTML:
Kết quả trả về có dạng như dưới đây:
2. Xử lý sự kiện trên trang HTML với JavaScript
Sự kiện (event) trong HTML có thể hiểu là những hành động mà người dùng hoặc trình duyệt thực hiện, chẳng hạn như click chuột hay tải trang. JavaScript đóng vai trò xử lý các sự kiện này.
HTML bao gồm các thuộc tính xử lý sự kiện hoạt động cùng mã JavaScript và có thể thực hiện một số hành động với sự kiện.
Cú pháp xử lý sự kiện trên trang HTML với JavaScript có dạng:
Ví dụ: Dưới đây là ví dụ minh họa xử lý sự kiện trên trang HTML với JavaScript:
Kết quả trả về có dạng như dưới đây:
Các sự kiện trong HTML bao gồm:
- Form events: reset, submit, ... .
- Select events: text field (khung text), ... .
- Focus event: focus, blur, ... .\
- Mouse events: 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 sự kiện:
2.1 Thay đổi nội dung HTML với JavaScript
Ví dụ: dưới đây là ví dụ minh họa cách JavaScript thay đổi nội dung trên trang HTML:
Kết quả trả về có dạng như dưới đây:
2.2 Thay đổi style HTML với JavaScript
Ví dụ: dưới đây là ví dụ minh họa cách thay đổi style phần tử HTML với JavaScript:
Kết quả trả về có dạng như dưới đâ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 để thay đổi thuộc tính HTML:
Kết quả trả về có dạng như dưới đây:
3. Sử dụng Script bên ngoài (External Script)
Giả sử chúng ta có các file HTML khác nhau nhưng có cùng một script, sau đó chúng ta có thể lưu mã JavaScript vào file riêng biệt và đặt tên là file HTML. Lưu file JavaScript bên ngoài có phần đuôi mở rộng là .js.
Lưu ý: chúng ta không thêm thẻ script vào file bên ngoài và cung cấp đường dẫn đầy đủ vị trí lưu file JavaScript.
Cú pháp có dạng như dưới đây:
Ví dụ: trong ví dụ dưới đây minh họa cách sử dụng file JavaScript bên ngoài:
Kết quả trả về có dạng như dưới đây:
Mã JavaScript chúng ta sử dụng:
4. Thẻ noscript trong HTML
Thẻ noscript trong HTML được sử dụng để viết script bị vô hiệu hóa trên trình duyệt. Văn bản được viết trong thẻ
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 có dạng như dưới đây:
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về JavaScript trong HTML. Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về đường dẫn file trong HTML. Ngoài ra 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 của mình trong phần bình luận bên dưới bài viết dể tìm hiểu và học HTML tốt nhé.