Ada beberapa cara untuk menambahkan JavaScript ke dalam dokumen HTML, yaitu melalui `Internal JavaScript`, `External JavaScript`, `Inline JavaScript` sebagai atribut elemen. Mari kita bahas satu per satu.
Internal JavaScript
Internal JavaScript mengacu pada penempatan kode JavaScript di dalam elemen
<script>
yang berada di dalam bagian
<head>
atau <body>
dokumen HTML. Berikut
adalah contoh penggunaan Internal JavaScript:
a. JavaScript di bagian Head:
Pada contoh di atas, kode JavaScript ditempatkan di dalam elemen `<script>` di bagian `<head>`. Fungsi `hello()` akan dipanggil saat halaman web dimuat.
b. JavaScript di bagian Body:
Pada contoh ini, kode JavaScript ditempatkan di dalam elemen
<script>
di bagian <body>
. Pesan "Halo, dunia!"
akan
muncul sebagai kotak pesan saat halaman web dimuat.
External JavaScript
External JavaScript mengacu pada penggunaan file JavaScript terpisah yang
dihubungkan dengan dokumen HTML menggunakan elemen
<script src="namafile.js"></script>
. Berikut adalah
contoh penggunaan External JavaScript:
a. Buat file JavaScript terpisah dengan nama "main.js":
Letakan dalam folder yang sama dengan file html.
b. Hubungkan file JavaScript eksternal dengan dokumen HTML:
<script src="main.js"></script>
. Saat tombol diklik,
fungsi hello()
dalam file JavaScript akan dipanggil.
Inline JavaScript
Inline JavaScript mengacu pada penempatan kode JavaScript langsung di dalam atribut HTML, seperti onclick, onload, dan sebagainya.
Berikut adalah contoh penggunaan Inline JavaScript:
JavaScript yang tertanam dalam atribut `onclick` tombol akan dieksekusi saat
tombol tersebut diklik oleh pengguna. Dalam contoh tersebut, saat tombol
diklik, JavaScript akan menjalankan kode `alert('Halo, dunia!')
`.
Hal ini akan menyebabkan munculnya sebuah kotak pesan dengan teks
"Halo, dunia!"
sebagai respons terhadap tindakan pengguna yang
mengklik tombol.
Anda dapat mengganti kode JavaScript yang tertanam dalam atribut
`onclick
` atau mengganti atributnya menjadi `onload`
atau lainnya sesuai kebutuhan.
Selain atribut `onclick` dan `onload`, ada beberapa atribut lain yang dapat digunakan untuk menambahkan Inline JavaScript ke elemen HTML. Berikut adalah beberapa atribut yang umum digunakan:
-
`
onsubmit
`: Digunakan pada elemen `<form>
` untuk menentukan kode JavaScript yang akan dieksekusi saat formulir disubmit.
<form onsubmit="validateForm()"><!-- Isi formulir --><input type="submit" value="Submit"></form>
-
`
onchange
`: Digunakan pada elemen `<input>
`, `<select>
`, atau `<textarea>
` untuk menentukan kode JavaScript yang akan dieksekusi saat nilai elemen berubah.
<input type="text" onchange="updateValue(this.value)" />
-
`
onmouseover
` dan `onmouseout
`: Digunakan pada elemen untuk menentukan kode JavaScript yang akan dieksekusi saat kursor mouse bergerak ke atas elemen (`onmouseover`) atau keluar dari elemen (`onmouseout`).
<img src="gambar.jpg" onmouseover="showTooltip()" onmouseout="hideTooltip()" />
-
`
onkeydown
`, `onkeyup
`, dan `onkeydivss
`: Digunakan pada elemen untuk menentukan kode JavaScript yang akan dieksekusi saat pengguna menekan tombol pada keyboard (`onkeydown`), melepaskan tombol yang ditekan (`onkeyup`), atau karakter diketik (`onkeydivss`).
<input type="text" onkeydown="handleKeyDown(event)" />
-
`
onfocus
` dan `onblur
`: Digunakan pada elemen untuk menentukan kode JavaScript yang akan dieksekusi saat elemen mendapatkan fokus (`onfocus`) atau kehilangan fokus (`onblur`).
<input type="text" onfocus="highlightInput()" onblur="removeHighlight()" />
-
`
onerror
`: Digunakan pada elemen `<img>
` untuk menentukan kode JavaScript yang akan dieksekusi saat gambar gagal dimuat.
<img src="gambar.jpg" onerror="handleImageError()" />
Tentu saja, ini hanya beberapa contoh atribut yang umum digunakan. Ada juga atribut lain yang dapat digunakan tergantung pada elemen HTML dan kebutuhan spesifik Anda.
Penggunaan atribut ini untuk menangani kejadian (event) yang terjadi pada sebuah element. Selanjutnya, kita akan mempelajari cara lain yang lebih mudah untuk menangani event di JavaScript menggunakan `EventListener`.