Rumah > Artikel > hujung hadapan web > Bagaimana untuk memperkenalkan javascript ke dalam html
Bagaimana untuk memperkenalkan javascript ke dalam html
- WBOYasal
- 2023-05-09 15:24:3716517semak imbas
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 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 Langkah-langkah khusus adalah seperti berikut:
- Cari teg 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 dalam fail HTML
-
Tambah 855348821b2e8f2cc4b633bf98f064dfe7f36630bb4dd7af8cc2a52575449408 /script> Tag
<!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 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 untuk membenamkan kod JavaScript ke dalam fail HTML atau merujuk kod tersebut fail js.
Antaranya, kami menggunakan 352b1442a1f39d4f49881b7e5087d9182cacc6d41bbb37262a98f745aa00fbf0 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 855348821b2e8f2cc4b633bf98f064df 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 855348821b2e8f2cc4b633bf98f064df Jadi, apakah atribut lain bagi teg 855348821b2e8f2cc4b633bf98f064df Bagaimanakah saya boleh menggunakan atribut ini untuk memasukkan JavaScript? Di bawah, kami memperkenalkan beberapa atribut penting teg 855348821b2e8f2cc4b633bf98f064df
- atribut src
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 async
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 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>
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 855348821b2e8f2cc4b633bf98f064df
<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:
- 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 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!