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

Bagaimana untuk menambah javascript ke halaman HTML

PHPz

Lepaskan： 2023-04-26 10:45:25

asal

5232 orang telah melayarinya

Memandangkan aplikasi web terus berkembang, JavaScript menjadi semakin popular, menyediakan interaksi dinamik dan fungsi yang lebih kompleks untuk halaman web dan aplikasi web. Artikel ini akan membantu anda mempelajari cara menambahkan JavaScript pada halaman HTML.

1. JavaScript Dalaman

JavaScript Dalaman merujuk kepada meletakkan kod JavaScript terus dalam dokumen HTML. Kod ini mesti disertakan dalam teg dan diletakkan di dalam

Contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script>
      function welcome() {
        alert("Hello World!");
      }
    </script>
  </head>
  <body>
    <button onclick="welcome()">Click me!</button>
  </body>
</html>

Salin selepas log masuk

Apabila pengguna mengklik butang, kotak mesej akan muncul yang menunjukkan "Hello World!".

2. JavaScript Luaran

Apabila terdapat banyak kod JavaScript, adalah lebih sesuai untuk memasukkannya ke dalam fail luaran yang berasingan daripada memasukkannya ke dalam dokumen HTML. Ini menjadikan kod lebih mudah untuk diselenggara, diubah suai dan digunakan semula merentas berbilang halaman.

Untuk menambah kod JavaScript luaran pada dokumen HTML, gunakan teg

Contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src="example.js"></script>
  </head>
  <body>
    <button onclick="welcome()">Click me!</button>
  </body>
</html>

Salin selepas log masuk

Di sini, kami menambahkan teg dalam dan menetapkan atribut src sebagai URL fail JavaScript "example.js" . Di mana kod JavaScript diperlukan, kami boleh merujuk terus fungsi tersebut.

3. Pustaka luaran

Pustaka JavaScript ialah satu set fungsi boleh guna semula dan coretan kod yang boleh digunakan untuk mempercepatkan pembangunan web. Pustaka ini memudahkan pembangun melaksanakan tugas biasa seperti jQuery, React dan Vue.js.

Untuk menambah pustaka luaran pada dokumen HTML, gunakan kaedah yang sama seperti skrip JavaScript luaran.

Contohnya:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <button onclick="$(&#39;.welcome-message&#39;).toggle()">Click me!</button>
    <p class="welcome-message" style="display: none;">Hello World!</p>
  </body>
</html>

Salin selepas log masuk

Di sini, kami menambahkan teg dan menetapkan pautan jQuery CDN dengan atribut src. Di mana kita perlu menggunakan jQuery, kita boleh terus menggunakan fungsinya.

Ringkasan:

Di atas ialah tiga kaedah tentang cara menambah JavaScript pada halaman HTML: JavaScript dalaman, JavaScript luaran dan perpustakaan luaran. Kami secara fleksibel boleh memilih kaedah yang berbeza untuk menulis kod JavaScript mengikut keperluan projek.

Walau apa pun, penting untuk diingat untuk sentiasa memastikan kod anda jelas, mudah dibaca dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk menambah javascript ke halaman HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!