Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah javascript ke html
Bagaimana untuk menambah javascript ke html
- PHPzasal
- 2023-05-27 09:02:371560semak imbas
HTML dan JavaScript ialah dua teknologi pihak pelanggan yang paling biasa digunakan. HTML ialah asas halaman web, manakala JavaScript meningkatkan interaktiviti dan sifat dinamik tapak web. Apabila menulis kod HTML, kami boleh menambah kod JavaScript dengan mudah untuk mencapai lebih banyak fungsi dan kesan. Artikel ini menerangkan cara menambah JavaScript pada HTML.
I. Menggunakan teg terbina dalam
HTML 5 memperkenalkan teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a terbina dalam untuk membenamkan kod JavaScript dalam halaman. Anda boleh meletakkan tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a pada permulaan atau penghujung kod HTML anda dan menambah kod JavaScript di dalamnya. Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
<meta charset="UTF-8">
</head>
<body>
<h1>欢迎来到 JavaScript 世界</h1>
<script>
alert("Hello World!");
</script>
</body>
</html>Dalam kod di atas, kami menambahkan kotak dialog 3f1c4e4b6b16bbbd69b2ee476dc4f83a ringkas di dalam teg alert untuk memaparkan mesej apabila halaman dimuatkan. Adalah penting untuk ambil perhatian bahawa jika anda meletakkan teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a di kepala, anda harus menggunakan atribut async atau lazy untuk memuatkan fail JavaScript bagi memastikan halaman HTML tidak disekat oleh kod JavaScript.
II Menggunakan fail luaran
Jika kod JavaScript anda panjang atau perlu digunakan dalam berbilang halaman, sebaiknya simpannya dalam fail .js yang berasingan dan gunakan luaran 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag untuk rujukan. Contohnya:
<!DOCTYPE html> <html> <head> <title>JavaScript Demo</title> <meta charset="UTF-8"> <script src="script.js"></script> </head> <body> <h1>欢迎来到 JavaScript 世界</h1> </body> </html>
Dalam kod di atas, kami merujuk fail JavaScript luaran bernama 3f1c4e4b6b16bbbd69b2ee476dc4f83a menggunakan atribut src bagi teg script.js. Pendekatan ini meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod dan juga membantu memendekkan panjang kod HTML.
III Peletakan
Biasanya, kami meletakkan teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e atau 6c04bd5ca3fcae76e30b72ad730ca86d dokumen HTML. Meletakkannya dalam 93f0f5c25f18dab9d176bd4f6de5d30e memastikan kod JavaScript dilaksanakan sebelum kandungan halaman dimuatkan, membantu meningkatkan prestasi dan responsif halaman. Walau bagaimanapun, jika kod JavaScript anda melaksanakan kesan dinamik atau ciri interaktif pada halaman, ia harus diletakkan dalam teg 6c04bd5ca3fcae76e30b72ad730ca86d.
IV. Mendengar Acara
Dalam JavaScript, mendengar acara ialah cara penting untuk mencapai interaktiviti dan kesan khas dinamik. Sebagai contoh, anda boleh menambah butang dalam HTML dan menambah pendengar acara dalam kod JavaScript untuk membalas klik butang. Contohnya:
<!DOCTYPE html> <html> <head> <title>JavaScript Demo</title> <meta charset="UTF-8"> <script src="script.js"></script> </head> <body> <h1>欢迎来到 JavaScript 世界</h1> <button id="myButton">点击我</button> </body> </html>
Dalam kod di atas, kami telah menambahkan elemen butang dengan atribut id sebagai myButton. Kemudian tambah kod berikut dalam fail JavaScript:
document.getElementById("myButton").addEventListener("click", function() {
alert("已点击按钮");
});Dalam kod ini, kami telah menambah pendengar acara klik pada elemen addEventListener menggunakan kaedah myButton untuk memaparkan pop timbul apabila pengguna mengklik butang maklumat. Anda juga boleh menggunakan jenis acara lain, seperti mouseover dan keydown, dsb., untuk mencapai lebih banyak fungsi interaktif.
Ringkasan
Di atas ialah kaedah dan teknik untuk menambah JavaScript pada HTML. Sama ada membenamkan kod JavaScript ke dalam halaman HTML atau merujuk fail JavaScript luaran, kami boleh mencapai kesan interaktif dinamik pada tapak web dengan mudah. Jika anda ingin mempelajari JavaScript dengan lebih mendalam, terdapat beberapa tutorial dan sumber pembelajaran yang hebat seperti dokumentasi MDN, W3Schools, Codecademy dan banyak lagi. Selamat belajar!
Atas ialah kandungan terperinci Bagaimana untuk menambah javascript ke html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!