JavaScript trong HTML

Script là một đoạn chương trình nhỏ có thể thêm tính tương tác vào trang web của bạn. Ví dụ: một script có thể tạo thông báo hộp cảnh báo pop-up hoặc cung cấp menu thả xuống. Tập lệnh này có thể được viết bằng JavaScript hoặc VBScript.

Bạn có thể viết các hàm nhỏ khác nhau, được gọi là trình xử lý sự kiện bằng bất kỳ ngôn ngữ kịch bản nào và sau đó bạn có thể kích hoạt các hàm đó bằng cách sử dụng các thuộc tính HTML.

Ngày nay, hầu hết các nhà phát triển web chỉ sử dụng JavaScript và các frameworks liên quan, VBScript thậm chí không được hỗ trợ bởi nhiều trình duyệt.

Bạn có thể tạo mã JavaScript trong một tệp riêng biệt và sau đó đưa vào bất cứ nơi nào cần thiết hoặc bạn có thể xác định hàm bên trong chính tài liệu HTML. Chúng ta hãy xem từng trường hợp một với các ví dụ phù hợp.


JavaScript bên ngoài (External JavaScript)

Nếu bạn sẽ định nghĩa một chức năng và nó sẽ được sử dụng trong các tài liệu HTML khác nhau thì tốt nhất nên tạo chức năng đó trong một tệp JavaScript riêng và sau đó đưa tệp đó vào tài liệu HTML của bạn. Một tệp JavaScript sẽ có phần mở rộng là .js và nó sẽ được nhúng trong các tệp HTML bằng thẻ <script>.

Hãy xem xét chúng ta định nghĩa một hàm nhỏ bằng cách sử dụng JavaScript trong script.js có mã sau

function Hello() {
   alert("Hello, World");
}

Bây giờ hãy sử dụng tệp JavaScript bên ngoài ở trên trong tài liệu HTML sau của chúng ta

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>


Internal Script

Bạn có thể viết mã script trực tiếp vào tài liệu HTML của mình. Thông thường, chúng ta tạo mã script trong head của tài liệu bằng thẻ <script>. Tuy nhiên, không có giới hạn và bạn có thể đặt mã nguồn của mình ở bất kỳ đâu trong tài liệu nhưng bên trong thẻ <script>.

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://learnskill.vn/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>


Các trình xử lý sự kiện (Event)

Trình xử lý sự kiện không là gì ngoài các hàm được xác định đơn giản có thể được gọi đối với bất kỳ sự kiện chuột hoặc bàn phím nào. Bạn có thể định nghĩa logic tác nghiệp của mình bên trong trình xử lý sự kiện có thể thay đổi từ một mã đến 1000 dòng.

Ví dụ sau giải thích cách viết một trình xử lý sự kiện. Hãy viết một hàm đơn giản EventHandler() trong head của tài liệu. Chúng ta sẽ gọi hàm này khi bất kỳ người dùng nào đưa chuột qua một đoạn văn.

Di chuyển chuột của bạn vào đây để thấy cảnh báo

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ trình xử lý sự kiện</title>
      <base href = "https://learnskill.vn/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("Tôi là trình xử lý sự kiện!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Di chuyển chuột của bạn vào đây để thấy cảnh báo</p>
   </body>

</html>


Ẩn script khỏi trình duyệt cũ

Mặc dù hầu hết (nếu không phải tất cả) trình duyệt ngày nay đều hỗ trợ JavaScript, nhưng một số trình duyệt cũ hơn thì không. Nếu một trình duyệt không hỗ trợ JavaScript, thay vì chạy tập lệnh của bạn, nó sẽ hiển thị mã cho người dùng. Để ngăn chặn điều này, bạn chỉ cần đặt các chú thích HTML xung quanh tập lệnh như được hiển thị bên dưới.

Ví dụ JavaScript:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

Ví dụ VBScript:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>


Phần tử <noscript>

Bạn cũng có thể cung cấp thông tin thay thế cho những người dùng có trình duyệt không hỗ trợ script và cho những người dùng đã tắt tùy chọn script trên trình duyệt của họ. Bạn có thể thực hiện việc này bằng thẻ <noscript>.

Ví dụ JavaScript:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Trình duyệt của bạn không hỗ trợ JavaScript!</noscript>

Ví dụ VBScript:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>


Ngôn ngữ kịch bản mặc định

Có thể có một tình huống khi bạn sẽ nhúng nhiều tệp script và không giới hạn việc sử dụng nhiều thẻ <script>. Bạn có thể chỉ định một ngôn ngữ kịch bản mặc định cho tất cả các thẻ script của mình. Điều này giúp bạn không phải định nghĩa ngôn ngữ mỗi khi bạn sử dụng thẻ script trong trang. Dưới đây là ví dụ:

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />
Lưu ý rằng bạn vẫn có thể ghi đè mặc định bằng cách chỉ định một ngôn ngữ trong thẻ script.