Hai semua. Maaf kerana lambat menyiarkan ini. Saya mempunyai beberapa masalah semasa menulis dan menerbitkan artikel ini tetapi semuanya telah diselesaikan sekarang. Apa-apa pun, mari lupakan itu dan fokus pada artikel hari ini - Memautkan Javascript ke dokumen HTML,
HTML (Hypertext Markup Language) ialah bahasa yang digunakan untuk menstruktur kandungan di web. Ia menyusun elemen seperti teks, imej dan pautan ke dalam reka letak yang padu, membentuk asas bagi mana-mana halaman web. Walau bagaimanapun, HTML adalah statik—ia memaparkan kandungan tetapi tidak menambah interaktiviti.
JavaScript ialah bahasa pengaturcaraan dinamik yang membolehkan anda menambah interaktiviti dan tingkah laku pada halaman web anda. Dengan JavaScript, anda boleh membuat animasi, mengesahkan borang, mengendalikan acara dan mengemas kini kandungan tanpa memuatkan semula halaman, menjadikan tapak web anda lebih menarik dan responsif.
Memautkan JavaScript kepada HTML adalah penting kerana ia membolehkan anda menggabungkan struktur yang disediakan oleh HTML dengan ciri dinamik JavaScript:
Apabila bekerja dengan JavaScript, terdapat tiga cara utama untuk memasukkannya ke dalam HTML anda: JavaScript Sebaris, Dalaman dan Luaran. Berikut ialah gambaran keseluruhan pantas bagi setiap kaedah, dengan tumpuan utama pada JavaScript Luaran.
JavaScript Sebaris ditulis terus dalam teg elemen HTML menggunakan onclick, onmouseover atau atribut acara lain. Contohnya:
`<button onclick="alert('Hello, World!')">Click Me</button>`
Walaupun mudah untuk tugasan kecil, JavaScript sebaris biasanya tidak digalakkan kerana ia mencampurkan HTML dan JavaScript, membawa kepada kod yang lebih sukar dibaca dan diselenggara.
JavaScript Dalaman diletakkan dalam
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal JavaScript Example</title>
<script>
function showMessage() {
alert('Hello, World!');
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
JavaScript Dalaman berguna untuk projek kecil atau aplikasi satu halaman tetapi boleh menjadi berselerak dengan cepat apabila pangkalan kod anda berkembang.
JavaScript Luaran ialah kaedah yang paling disyorkan untuk memautkan JavaScript ke HTML. Ia melibatkan penulisan kod JavaScript anda dalam fail .js yang berasingan dan memautkannya ke dokumen HTML anda menggunakan
// script.js
function showMessage() {
alert('Hello, World!');
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>External JavaScript Example</title> </head> <body> <button onclick="showMessage()">Click Me</button> <script src="script.js"></script> </body> </html>
Walaupun JavaScript Sebaris dan Dalaman sesuai untuk projek mudah atau berskala kecil, JavaScript Luaran ialah kaedah pilihan untuk kebanyakan pembangunan web. Ia menggalakkan kod yang lebih bersih, organisasi yang lebih baik dan prestasi yang lebih baik, menjadikannya amalan terbaik untuk memautkan JavaScript ke HTML.
Apabila memautkan JavaScript ke HTML, adalah penting untuk mengikuti amalan terbaik untuk mengoptimumkan prestasi dan memastikan kod anda berjalan dengan cekap. Berikut ialah beberapa amalan utama, termasuk menggunakan atribut tangguh dan tak segerak serta pertimbangan prestasi lain.
Atribut tangguh memastikan fail JavaScript anda dimuatkan mengikut susunan yang dipaparkan tetapi hanya dilaksanakan selepas dokumen HTML dimuatkan sepenuhnya. Ini amat berguna apabila skrip anda bergantung pada struktur HTML yang dipaparkan sepenuhnya.
<script src="script.js" defer></script>
Atribut async membolehkan penyemak imbas memuat turun fail JavaScript secara tidak segerak sambil terus menghuraikan dokumen HTML. Setelah skrip dimuat turun, ia dilaksanakan serta-merta, yang mungkin berlaku sebelum atau selepas HTML dimuatkan sepenuhnya.
<script src="script.js" async></script>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
