JavaScript - Penempatan dalam Fail HTML
Hai daar, para ahli JavaScript masa depan! Saya begitu gembira untuk menjadi pandu anda dalam perjalanan ini ke dunia yang magical penempatan JavaScript. Sebagai seseorang yang telah mengajar pemrograman untuk tahun-tahun, saya tidak sabar untuk berkongsi ilmu dan pengalaman saya dengan anda. Jadi, pegang keyboard anda (tongkat sihir), dan mari kita masuk ke dalam!
Penempatan JavaScript dalam Fail HTML
Sebelum kita mulakan melempar mantra (menulis kod), ia penting untuk memahami di mana kita boleh menempatkan mantra JavaScript kita dalam dokumen HTML. Seperti bagaimana seorang ahli sihir perlu tahu tempat yang betul untuk menarik keluar arnab dari topi mereka, kita perlu tahu tempat yang sempurna untuk meletakkan JavaScript kita agar ia boleh bekerja secara magical secara berkesan.
Ada tiga tempat utama di mana kita boleh menambah JavaScript ke fail HTML kita:
- Dalam seksyen
<head> - Dalam seksyen
<body> - Dalam fail eksternal
Mari kita jelajahi setiap pilihan ini secara detil, kenapa tidak?
JavaScript dalam seksyen <head>...</head>
Menempatkan JavaScript dalam seksyen <head> adalah seperti menyiapkan mantra anda sebelum pertunjukan dimulakan. Ia adalah tempat yang bagus untuk skrip yang perlu dimuat sebelum kandungan halaman muncul.
Ini adalah contoh:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya yang Magical</title>
<script>
function greet() {
alert("Selamat datang ke dunia sihir JavaScript!");
}
</script>
</head>
<body>
<h1>Mantra JavaScript Pertama Saya</h1>
<button onclick="greet()">Lakukan Mantra Selamat Datang</button>
</body>
</html>Dalam contoh ini, kita telah mendefinisikan fungsi greet() dalam seksyen <head>. Fungsi ini mencipta kotak alert dengan mesej selamat datang. Kemudian, kita menggunakan fungsi ini dalam seksyen <body> apabila butang diklik.
Mengapa meletakkannya dalam <head>? Well, ia memastikan bahawa mantra (fungsi) kita siap untuk dilempar sebaik sahaja halaman dimuat. Walau bagaimanapun, hati-hati! Terlalu banyak mantra dalam <head> boleh memperlambat masa muatan awal halaman anda.
JavaScript dalam seksyen <body>...</body>
Menempatkan JavaScript dalam seksyen <body> adalah seperti menjalankan trik sihir anda semasa pertunjukan. Ia sempurna untuk skrip yang berinteraksi dengan elemen HTML anda atau yang perlu dieksekusi selepas halaman dimuat.
Mari lihat contoh:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya yang Magical</title>
</head>
<body>
<h1>Mantra JavaScript Kedua Saya</h1>
<p id="demo">Tonton teks ini berubah!</p>
<script>
document.getElementById("demo").innerHTML = "Abracadabra! Teks telah berubah!";
</script>
</body>
</html>Dalam demonstrasi magical ini, kita telah meletakkan JavaScript tepat sebelum tag </body> ditutup. Skrip ini mencari elemen dengan id "demo" dan mengubah kandungannya. Dengan meletakkan skrip di akhir <body>, kita memastikan bahawa semua elemen HTML dimuat sebelum mantra kita cuba untuk memanipulasikan mereka.
JavaScript dalam Seksyen <body> dan <head>
kadang-kadang, seorang ahli sihir perlu mensiapkan beberapa trik sebelumnya dan menjalankan yang lain semasa pertunjukan. Secara serupa, kita boleh menggunakan kedua-dua seksyen <head> dan <body> untuk JavaScript kita.
Ini adalah bagaimana ia mungkin kelihatan:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya yang Magical</title>
<script>
function changeColor(newColor) {
document.body.style.backgroundColor = newColor;
}
</script>
</head>
<body>
<h1>Mantra JavaScript Ketiga Saya</h1>
<button onclick="changeColor('red')">Sihir Merah</button>
<button onclick="changeColor('blue')">Sihir Biru</button>
<script>
document.write("<p>Teks ini dicipta oleh JavaScript!</p>");
</script>
</body>
</html>Dalam contoh yang menakjubkan ini, kita mendefinisikan fungsi dalam <head> yang mengubah warna latar belakang. Kemudian, dalam <body>, kita ada butang yang memanggil fungsi ini dan skrip lain yang menulis teks langsung ke halaman.
JavaScript dalam Fail Eksternal
Sekarang, untuk penutup yang meriah - fail JavaScript eksternal! Ini seperti memiliki buku sihir yang anda boleh gunakan dalam beberapa pertunjukan. Ia mengekalkan HTML anda bersih dan JavaScript anda boleh digunakan semula.
Pertama, buat fail bernama magic.js dengan kandungan berikut:
function revealSecret() {
document.getElementById("secret").innerHTML = "Rahsia adalah... JavaScript adalah hebat!";
}Kemudian, dalam fail HTML anda:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya yang Magical</title>
<script src="magic.js"></script>
</head>
<body>
<h1>Mantra JavaScript Keempat Saya</h1>
<p id="secret">Rahsia disembunyikan...</p>
<button onclick="revealSecret()">Bongkar Rahsia</button>
</body>
</html>Dengan menggunakan atribut src dalam tag <script>, kita telah menghubungkan fail JavaScript eksternal. Dengan cara ini, kita boleh menggunakan yang sama spells (fungsi) di beberapa halaman!
Kelebihan penggunaan tag <script>
Sekarang, setelah kita menjelajahi cara-cara berbeza untuk menempatkan JavaScript, mari kita ringkaskan kelebihan penggunaan tag <script>:
| Kelebihan | Deskripsi |
|---|---|
| Flexibiliti | Boleh ditempatkan dalam <head> atau <body>
|
| Fail Eksternal | Membolehkan penghubungan ke fail .js eksternal |
| Banyak Skrip | Boleh ada beberapa tag <script> dalam satu dokumen |
| Atribut | Menyokong atribut berguna seperti src, async, dan defer
|
| Kod Dalam Talian | Boleh mengandungi kod JavaScript secara langsung |
Ingat, para ahli sihir muda, penempatan JavaScript anda boleh mempengaruhi prestasi dan tingkah laku halaman web anda. Pilih bijak, dan halaman web anda akan dipenuhi dengan sihir yang menakjubkan yang menarik dan menyenangkan pengguna anda!
Setelah penutup les magical ini, saya harap anda telah mendapatkan pengetahuan yang kukuh tentang penempatan JavaScript. Ingat, latihan membuat sempurna, jadi terus mencoba teknik ini. Sebelum anda tahu, anda akan mencipta pengalaman web yang menakjubkan seperti mana pertunjukan sihir! Sekarang, maju dan tulis, para pengikut saya! Dunia pengembangan web menunggu sentuhan sihir anda!
Credits: Image by storyset