JavaScript trong HTML

Trong bài viết trước Taimienphi.vn đã giới thiệu cho bạn về thẻ iframe trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về JavaScript trong HTML.

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.

javascript trong html hoc html

JavaScript trong HTML

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu JavaScript trong HTML.
 

Mục Lục bài viết:
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

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:

javascript trong html 2

Kết quả trả về có dạng như dưới đây:

javascript trong html 3

javascript trong html 4

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:

javascript trong html 5

Ví dụ: Dưới đây là ví dụ minh họa xử lý sự kiện trên trang HTML với JavaScript:

javascript trong html 6

Kết quả trả về có dạng như dưới đây:

javascript trong html 7

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:

javascript trong html 8

javascript trong html 9

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:

javascript trong html 10

Kết quả trả về có dạng như dưới đây:

javascript trong html 11

javascript trong html 12

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:

javascript trong html 13

Kết quả trả về có dạng như dưới đây:

javascript trong html 14

javascript trong html 15

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:

javascript trong html 16

Kết quả trả về có dạng như dưới đây:

javascript trong html 17

javascript trong html 18

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:

javascript trong html 19

Ví dụ: trong ví dụ dưới đây minh họa cách sử dụng file JavaScript bên ngoài:

javascript trong html 20

Kết quả trả về có dạng như dưới đây:

javascript trong html 21

Mã JavaScript chúng ta sử dụng:

javascript trong html 22

javascript trong html 23

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ẻ javascript trong html 24không được hiển thị trên trình duyệt.

Ví dụ: Dưới đây là ví dụ minh họa cách sử dụng thẻ noscript trong HTML:

javascript trong html 25

Kết quả trả về sau khi áp dụng thẻ noscript có dạng như dưới đây:

javascript trong html 26

https://thuthuat.taimienphi.vn/javascript-trong-html-50703n.aspx
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é.

Tác giả: Duy Tâm     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Đường dẫn file trong HTML, link Ảnh tuyệt đối và tương đối
Học bảng (table) trong HTML
Thuộc tính id trong HTML, thẻ ID
Tìm hiểu các phần tử block trong HTML
Thẻ comment trong HTML, tạo chú thích bằng HTML
Từ khoá liên quan:

javascript trong html

, html, the iframe trong html,

SOFT LIÊN QUAN
  • HTML Kit

    Thiết kế web bằng HTML

    HTML-Kit là phần mềm thiết kế và chỉnh sửa web với ngôn ngữ html phần mềm cung cấp các tính năng mạnh mẽ tạo ra bố cục của một trang web bạn có thể sử dụng tiện ích để soạn thảo ngôn ngữ lập trình, chỉnh sửa code, thay đ ...

Tin Mới

  • Sự khác nhau giữa JSON và XML

    XML (Extensible Markup Language) và JSON (JavaScript Object Notation) là 2 định dạng trao đổi dữ liệu phổ biến nhất hiện nay. So sánh JSON và XML, sự khác nhau giữa JSON và XML là gì? Cùng theo dõi bài viết dưới đây để tìm hiểu nhé.

  • Danh sách (list) trong HTML

    Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về bảng (table) trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách (list) trong

  • Thẻ img trong HTML

    Trên các trang web đều sử dụng hình ảnh minh họa để làm nổi bật nội dung, đồng thời để tránh người dùng cảm thấy khó chịu vì text quá dài. Trong HTML hình ảnh được chỉ định bằng thẻ img. Tham khaor tiếp bài viết dưới

  • Taxi Kiên Giang, bảng giá, số điện thoại

    Đến với Phú Quốc, đến với Kiên Giang, bạn không nên bỏ qua trải nghiệm ngồi chiếc một chiếc taxi để thoải mái ngắm khung cảnh thiên nhiên yên bình


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá