©2023 ZendCode - Teman Belajar Coding

Top Advertisement

Menambahkan JavaScript di HTML: Internal, External, dan Inline (Sebagai Atribut)

ZendZend Juni 17, 2023
Menambahkan JavaScript di HTML: Internal, External, dan Inline

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:

<!DOCTYPE html>
<html>
<head>
  <title>Internal JavaScript di Head</title>
  <script>
    // Kode JavaScript di sini  
    function hello() {
      alert('Halo, sobat Zend!');
    }
  </script>
</head>
<body>
  <!-- Isi halaman web -->
</body>
</html>

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:


<!DOCTYPE html>
<html>
<head>
  <title>Internal JavaScript di Body</title>
</head>

<body>
  <!-- Isi halaman web -->

  <script>
    // Kode JavaScript di sini
    alert("Halo, dunia!");
  </script>

</body>
</html>

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. 


// main.js
function hello() {
    alert('Halo, sobat Zend!');
}

b. Hubungkan file JavaScript eksternal dengan dokumen HTML:


<!DOCTYPE html>
<html>
<head>
  <title>External JavaScript</title>
  <script src="main.js"></script>
</head>
<body>
  <!-- Isi halaman web -->
  <button onclick="hello()">Klik Saya!</button>
</body>
</html>


Dalam contoh ini, file JavaScript eksternal "main.js" terhubung dengan dokumen HTML menggunakan elemen <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:

<!DOCTYPE html>
<html>
<head>
  <title>Inline JavaScript</title>
</head>
<body>
  <!-- Isi halaman web -->
  <button onclick="alert('Halo, dunia!')">Klik Saya!</button>

</body>
</html>

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:

  1. `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>

  2. `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)" />

  3. `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()" />

  4. `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)" />

  5. `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()" />

  6. `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`. 

Tags
Zend

Diposting oleh Zend

"Don't be an ordinary person, be an extraordinary"