Rumah > Artikel > hujung hadapan web > Bagaimanakah HTML memanggil hasil JavaScript?
Bagaimanakah HTML memanggil hasil JavaScript?
- PHPzasal
- 2023-04-25 17:30:551311semak imbas
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>
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>
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>
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>
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>
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!