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:
Tambah
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript引入</title> <script src="test.js"></script> <!-- 引入test.js文件 --> </head> <body> <h1>Hello World!</h1> </body> </html>
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!");
Apabila fail HTML dimuatkan ke dalam teg
2. Pengenalan kepada atribut teg skrip
Dalam kod di atas, kami menggunakan atribut src bagi teg
Atribut ini digunakan untuk menentukan fail JavaScript yang perlu dipautkan.
<script src="test.js"></script>
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 ini digunakan untuk melaksanakan kod JavaScript secara tidak segerak tanpa menyekat halaman. Contohnya:
<script src="test.js" async></script>
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 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>
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 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>
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:
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!