Bagaimana untuk menambah javascript ke html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menambah javascript ke html

PHPz

Lepaskan： 2023-05-27 09:02:37

asal

1686 orang telah melayarinya

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 <script> terbina dalam untuk membenamkan kod JavaScript dalam halaman. Anda boleh meletakkan tag <script> 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>

Salin selepas log masuk

Dalam kod di atas, kami menambahkan kotak dialog <script> ringkas di dalam teg alert untuk memaparkan mesej apabila halaman dimuatkan. Adalah penting untuk ambil perhatian bahawa jika anda meletakkan teg <script> 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 <script> 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>

Salin selepas log masuk

Dalam kod di atas, kami merujuk fail JavaScript luaran bernama <script> 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 <script> dalam teg <head> atau <body> dokumen HTML. Meletakkannya dalam <head> 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 <body>.

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>

Salin selepas log masuk

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("已点击按钮");
});

Salin selepas log masuk

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!