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

Bagaimana untuk memperkenalkan javascript ke dalam html

WBOY

Lepaskan： 2023-05-09 15:24:37

asal

16484 orang telah melayarinya

Dalam proses pembangunan web, kami selalunya perlu menggunakan JavaScript untuk menambah kesan dinamik dan fungsi interaktif pada halaman web. Jadi, bagaimana untuk memperkenalkan JavaScript ke dalam fail HTML? Artikel ini akan memperkenalkan cara memperkenalkan JavaScript dan perkara yang perlu diberi perhatian.

1. Gunakan teg skrip untuk memperkenalkan JavaScript

Dalam fail HTML, kami boleh menggunakan teg <script></script> Langkah-langkah khusus adalah seperti berikut:

Cari teg
dalam fail HTML
Tambah < ;head> /script> Tag
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入</title>
  <script src="test.js"></script> 

</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>
```
Salin selepas log masuk
Seperti yang ditunjukkan dalam kod di atas, kami boleh menggunakan teg <script></script> untuk membenamkan kod JavaScript ke dalam fail HTML atau merujuk kod tersebut fail js.

Antaranya, kami menggunakan <script src="test.js"></script> Fail test.js diletakkan dalam direktori yang sama dengan halaman HTML dan kandungannya adalah seperti berikut:

alert("Hello World!");

Salin selepas log masuk

Apabila fail HTML dimuatkan ke dalam teg ia akan mentafsir dan melaksanakan secara automatik JavaScript dalam kod fail test.js. Pada masa ini, kotak dialog dengan kandungan "Hello World" muncul.

2. Pengenalan kepada atribut teg skrip

Dalam kod di atas, kami menggunakan atribut src bagi teg Jadi, apakah atribut lain bagi teg Bagaimanakah saya boleh menggunakan atribut ini untuk memasukkan JavaScript? Di bawah, kami memperkenalkan beberapa atribut penting teg

atribut src

Atribut ini digunakan untuk menentukan fail JavaScript yang perlu dipautkan.

<script src="test.js"></script>

Salin selepas log masuk

Seperti yang ditunjukkan dalam kod di atas, kami boleh menentukan laluan fail JavaScript yang perlu diimport dalam atribut src.

Jika laluan adalah laluan relatif, ia adalah laluan relatif berdasarkan lokasi fail HTML Apabila menentukan laluan, anda perlu memberi perhatian kepada ketepatan laluan.

atribut async

Atribut ini digunakan untuk melaksanakan kod JavaScript secara tidak segerak tanpa menyekat halaman. Contohnya:

<script src="test.js" async></script>

Salin selepas log masuk

Atribut async menghalang penyemak imbas daripada menunggu fail JavaScript dimuatkan sebelum terus memuatkan sumber dan elemen lain dalam halaman web, sebaliknya, ia memuatkan fail JS selepas memuatkan sumber lain dan elemen. Akibatnya, halaman dipaparkan dengan lebih pantas dan pengguna boleh melihat kandungan halaman dengan lebih pantas. Walau bagaimanapun, JavaScript yang diperkenalkan oleh atribut async akan dilaksanakan selepas pemaparan halaman selesai, jadi ia mungkin mempunyai kesan pada tingkah laku halaman berikutnya.

atribut tangguh

Atribut ini juga digunakan untuk melaksanakan kod JavaScript secara tidak segerak, ia akan dipaparkan pada halaman "DOMContentLoaded" selepas fail HTML dihuraikan kod JavaScript dilaksanakan sebelum acara.

<script src="test.js" defer></script>

Salin selepas log masuk

Berbanding dengan atribut async, atribut defer lebih sesuai untuk JavaScript yang perlu bergantung pada elemen DOM, kerana apabila ia dilaksanakan, semua elemen DOM telah dimuatkan. Oleh itu, kami biasanya menambah atribut tangguh apabila memperkenalkan fail JavaScript.

atribut jenis

Atribut ini menentukan jenis MIME kod JavaScript yang dibenamkan atau dipautkan. Dalam HTML5, jenis MIME JavaScript secara lalai kepada "teks/javascript", jadi kami biasanya tidak perlu memaparkan atribut jenis yang ditentukan dalam teg

<script type="text/javascript" src="test.js"></script>

Salin selepas log masuk

Walau bagaimanapun, jika anda ingin memperkenalkan jenis fail JavaScript lain (seperti fail ts), anda perlu menentukan jenis fail yang sepadan melalui atribut jenis.

3. Langkah berjaga-jaga untuk memperkenalkan JavaScript

Apabila memperkenalkan fail JavaScript, kami juga perlu memberi perhatian kepada perkara berikut:

Cuba letakkan fail JavaScript untuk kurangkan bilangan Bilangan permintaan HTTP.
Jika anda boleh menggunakan pecutan CDN, cuba gunakan fail JavaScript CDN.
Perkenalkan fail JavaScript ke bahagian bawah halaman atau tandainya sebagai tangguh atau tak segerak.
Jangan tulis JavaScript secara langsung dalam halaman Sebaliknya, ia harus diperkenalkan dalam fail JS luaran.

Ringkasnya, memperkenalkan JavaScript ke dalam HTML adalah sangat mudah, hanya gunakan teg <script></script> Walau bagaimanapun, dalam pembangunan sebenar, kita juga perlu menggunakan pelbagai sifat dan langkah berjaga-jaga dengan baik untuk meningkatkan prestasi dan kualiti kod. Saya harap artikel ini dapat membantu semua orang lebih memahami dan menggunakan kaedah pengenalan JavaScript dalam HTML.

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