Bagaimanakah HTML memanggil hasil JavaScript?-Soal Jawab bahagian hadapan-php.cn

Bagaimanakah HTML memanggil hasil JavaScript?

PHPz

Lepaskan： 2023-04-25 18:18:32

asal

1387 orang telah melayarinya

Dalam pembangunan web, JavaScript digunakan secara meluas untuk menyediakan kesan dinamik dan fungsi interaksi pengguna. Tetapi untuk kod JavaScript berkuat kuasa, ia perlu dipanggil dalam fail HTML. Artikel ini akan memperkenalkan cara memanggil JavaScript dalam HTML dan memberikan beberapa contoh kod.

1. Pengepala dokumen

Sebelum memanggil JavaScript dalam dokumen HTML, kod JavaScript perlu diisytiharkan dalam pengepala dokumen seperti berikut:

<head>
  <script type="text/javascript">
      // JavaScript代码
  </script>
</head>

Salin selepas log masuk

di mana type Atribut diperlukan dan digunakan untuk menentukan jenis bahasa skrip, text/javascript mewakili kod JavaScript. Jika anda menggunakan HTML5, anda boleh meninggalkan atribut type.

2. Kod JavaScript Dalaman

Anda boleh menulis kod JavaScript terus dalam fail HTML dan menyimpannya dalam teg <script>, contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>调用JavaScript的例子</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>内部JavaScript的例子</h1>
    <script>
      function showMessage() {
        alert("你好，欢迎访问我的网站！");
      }
      showMessage();
    </script>
  </body>
</html>

Salin selepas log masuk

Dalam contoh di atas, fungsi showMessage() digunakan untuk memunculkan kotak dialog yang mengandungi mesej alu-aluan. Baris terakhir kod memanggil fungsi ini, dan kotak dialog muncul serta-merta selepas halaman dimuatkan.

3. Fail JavaScript luaran

Apabila kod JavaScript panjang atau perlu digunakan berulang kali, ia biasanya disimpan dalam fail luaran dan kemudian dirujuk dalam fail HTML. Sebagai contoh, anda boleh menyimpan kod JavaScript untuk contoh di atas dalam fail yang dipanggil myscript.js.

Dalam fail HTML, gunakan teg <script> untuk merujuk fail ini seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>调用JavaScript的例子</title>
    <meta charset="utf-8" />
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1>外部JavaScript的例子</h1>
  </body>
</html>

Salin selepas log masuk

Nama fail ialah myscript.js dan diletakkan dalam direktori yang sama dengan fail HTML . Atribut <script> dalam teg src digunakan untuk menentukan laluan fail luaran.

4. Pengendali acara memanggil JavaScript

Dalam dokumen HTML, peristiwa interaksi pengguna (seperti klik tetikus, tuding tetikus, kekunci papan kekunci, dll.) boleh dijawab melalui JavaScript. Bahagian ini akan menunjukkan cara memanggil JavaScript melalui pengendali acara.

1. Nyatakan pengendali acara

Berikut ialah contoh pengendali acara klik tetikus:

<!DOCTYPE html>
<html>
  <head>
    <title>event handling example</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function showMessage() {
        alert("你好，欢迎访问我的网站！");
      }
    </script>
  </head>
  <body>
    <h1>事件处理器调用JavaScript的例子</h1>
    <button onclick="showMessage()">点击这里发送欢迎消息</button>
  </body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menambah pengendali acara pada butang elemen onclick atribut, nilai atribut ini ialah fungsi showMessage(). Apabila butang diklik, pelayar akan melaksanakan fungsi ini dan muncul kotak dialog.

Model acara 2.DOM

Dalam model acara DOM, balas peristiwa interaksi pengguna dengan menambahkan pendengar acara. Sebagai contoh, kod berikut akan muncul mesej apabila tetikus melayang di atas elemen:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DOM事件模型的例子</title>
    <script type="text/javascript">
      function showMessage() {
        alert("你好，欢迎访问我的网站！");
      }
      var myButton = document.getElementById("myButton");
      myButton.addEventListener("mouseover", showMessage);
    </script>
  </head>
  <body>
    <h1>调用JavaScript的例子</h1>
    <button id="myButton">鼠标悬停在此处弹出欢迎消息</button>
  </body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan kaedah DOM addEventListener() untuk menambah pendengar acara, sama seperti kaedah onclick sebelumnya berbeza. mouseover ialah jenis acara dan showMessage ialah fungsi tindak balas acara.

Ringkasan

Artikel ini memperkenalkan pelbagai cara untuk memanggil JavaScript dalam HTML, termasuk kod JavaScript dalaman, fail JavaScript luaran, pengendali acara yang memanggil JavaScript, dsb. Kaedah ini membolehkan pembangun web menggunakan JavaScript untuk mencapai kesan dinamik dan pengalaman interaktif yang lebih baik.

Atas ialah kandungan terperinci Bagaimanakah HTML memanggil hasil JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!