Kodealgo

4 Cara Membuat Kode JavaScript di HTML

Ada beberapa cara yang bisa kita gunakan untuk memanggil atau membuat kode JavaScript di dalam HTML.

Di sini kita akan belajar mulai dari cara yang umum digunakan hingga yang jarang atau bahakn tidak direkomendasikan untuk digunakan.

Sebelum memulai, silahkan buat terlebih dahulu folder atau direktori baru, kemudian buat file baru bernama index.html dan script.js.

Kata html dan js setelah titik adalah ekstensi, html adalah ekstensi untuk file HTML sedangkan js untuk JavaScript.

Di dalam file index.html buat struktur atau tag dasar HTML, jika menggunakan Visual Studio Code ketik tanda seru ! lalu tekan tombol Enter pada keyboard.

Stuktur direktori kita sekarang kurang lebih seperti ini:

.
├── index.html
├── script.js

Mari kita modifikasi terlebih dahulu file index.html kita, dengan menambahkan kode JavaScript yang menampilkan pesan "hello world" ke console browser:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>
    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

Mari kita buka file index.html di browser...

Jika Anda menggunakan ekstensi Live Server di Visual Studio Code, klik kanan file index.html lalu pilih opsi Open With Live Server.

Jika tidak menggunakan Live Server, klik kanan file index.html kemudian pilih opsi Copy Relative Path, lalu tempelkan ke address bar browser, setelah itu tekan tombol Enter.

Untuk memastikan bahwa file tersebut berhasil dibuka, lihat console browser apakah menampilkan pesan "Hello World" atau tidak.

Mari kita bahas berbagai cara membuat kode JavaScript di dalam HTML:

  1. Dalam Tag <script> HTML
    1. Sebelum Tag </head>
    2. Sebelum Tag </body>
  2. JavaScript Eksternal
    1. Sebelum Tag </head>
    2. Sebelum Tag </body>
  3. Atribut Event HTML
  4. URL Tautan

Membuat Kode JavaScript di Dalam Tag <script> HTML

Untuk membuat kode JavaScript di dalam HTML kita bisa menulisnya langsung di dalam file HTML, namun kode JavaScript harus berada di dalam tag <script>.

<script>
  console.log('Hello World');
</script>

Kode ini bisa kita tempatkan di dalam tag HTML <head> atau <body>.

Kita bisa menempatkannya di mana saja di dalam tag <head> atau <body>, tapi umumnya kode JavaScript ditempatkan tepat sebelum tag </head> atau </body>.

Menulis kode JavaScript di dalam file HTML dikenal sebagai Inline atau internal JavaScript.

Sebelum Tag </head>

Untuk menulis kode JavaScript di dalam tag <head> HTML, kodenya akan terlihat seperti ini:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>

    <script>
      console.log('Hello World');
    </script>

  </head>
  <body>

  </body>
</html>

Perlu diketahui, kode HTML dieksekusi dari atas ke bawah...

Jika kita menempatkan kode JavaScript di dalam tag <head>, itu berarti kode JavaScript akan dieksekusi terlebih sebelum kode apa pun yang ada di dalam tag <body>, termasuk tag <body> karena berada di bawah tag <head>.

Padahal kontent yang berada di dalam tag <body> adalah yang dilihat pengguna.

Oleh karena itu menempatkan kode JavaScript di dalam tag <head> tidak direkomendasikan kecuali ada alasan tertentu yang mengharuskan kode JavaScript dieksekusi terlebih dahulu.

Selain itu, jika kode JavaScript perlu memanipulasi DOM atau HTML yang ada di dalam tag <body>, ini akan menjadi error.

Mari kita buktikan, perhatikan kode di bawah ini:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      document.getElementById('paragraf').innerHTML = 'Belajar JavaScript';
    </script>

  </head>
  <body>
    <h1 id="paragraf">Hello World</h1>
  </body>
</html>

Kode JavaScript yang ada di dalam tag <head> di atas dimaksudkan untuk mengganti tulisan "Hello World" yang ada di dalam tag <h1> menjadi "Belajar JavaScript".

Tapi kode ini malah error karena kode JavaScript dieksekusi terlebih dahulu sebelum tag <h1> dimuat.

Pesan kesalahannya "Uncaught TypeError: Cannot set property 'innerHTML' of null", dapat dilihat di console browser

Kita sebetulnya bisa mengakalinya agar kode JavaScript yang ada di dalam tag <head> dieksekusi setelah DOM dimuat termasuk tag <body> menggunakan event DOMContentLoaded, ini akan kita pelajari pada materi tentang DOM.

Untuk saat ini kita hanya perlu tau bahwa penempatan kode JavaScript dapat mempengaruhi waktu eksekusinya, karena kode di dalam file HTML dieksekusi dari atas ke bawah.

Sebelum Tag </body>

Contoh kode JavaScript di dalam tag <body>:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar JavaScript - KodeAlgo</title>
  </head>
  <body>

    <script>
      console.log('Hello World');
    </script>
  </body>
</html>

Karena sekarang kode HTML kita berada tepat sebelum tag </body> kita bisa memanipulasi kode HTML yang ada di atasnya.

Mari kita gunakan kode sebelumnya:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="paragraf">Hello World</h1>

    <script>
      document.getElementById('paragraf').innerHTML = 'Belajar JavaScript';
    </script>
  </body>
</html>

Kode diatas berhasil mengubah tulisan "Hello World" yang ada di dalam tag <h1> menjadi "Belajar JavaScript" karena tag tersebut dimuat sebelum kode JavaScript.

Memanggil Kode JavaScript Eksternal di HTML

Memanggil atau memuat kode JavaScript yang berada di luar file HTML disebut eksternal JavaScript.

Maksud dari eksternal adalah kode JavaScript tidak berada di dalam file HTML saat ini atau yang memanggil.

Untuk memanggil file JavaScript eksternal mirip seperti inline, kita bisa menggunakan tag <script>.

Hanya saja kita tidak perlu memasukkan kode JavaScript diantara tag <script> dan </script>.

Kita hanya perlu menambahkan atribut src (source) untuk mendeklarasikan lokasi file JavaScript yang ingin dipanggil.

Kita bisa memanggil file JavaScript yang ada di penyimpanan lokal, kode di bawah ini memanggil file bernama script.js yang berada di dalam direktori yang sama dengan file HTML yang memanggil.

.
├── index.html
├── script.js

<script src="script.js"></script>

Jika berada di dalam direktori yang berbeda tapi direktori yang memuat file script.js sejajar dengan file index.html:

.
├── index.html
├── js
    └── script.js

<script src="/js/script.js"></script>

Jika masing-masing berada di direktori yang berbeda, tapi kedua direktori yang menampung script.js dan index.html sejajar:

.
├── js
    └── script.js
├── html
    └── index.html

<script src="../js/script.js"></script>

Notasi titik dua kali .. digunakan untuk keluar dari direktori saat ini, naik ke atasnya.

Atau, memanggil JavaScript yang ada di internet, jQuery misalnya:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Metode ini dianggap sebagai praktik terbaik karena kode JavaScript tidak bercampur dengan kode HTML, sehingga kode kita lebih mudah dipelihara.

Apalagi jika kode JavaScript dipanggil tepat setelah tag </body>, karena kode JavaScript dieksekusi setelah konten HTML yang dilihat pengguna dimuat.

Urutan eksekusi kode di dalam file HTML tetap dari atas ke bawah, perilakunya sama dengan kita menulis kode JavaScript secara inline.

Sebelum Tag </head>

Contoh memanggil JavaScript eksternal tepat sebelum tag </head>:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="script.js"></script>
  </head>
  <body></body>
</html>

Sebelum Tag </body>

Contoh memanggil JavaScript eksternal tepat sebelum tag </body>:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

Membuat Kode JavaScript di Atribut Event HTML

Kita juga bisa menyisipkan kode JavaScript didalam attribut event HTML, ada banyak yang bisa kita gunakan, sebagai contoh mari kita gunakan onClick.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="confirm('Belajar JavaScript')">Confirm</button>
    <button onclick="console.log('Belajar JavaScript')">Log</button>
  </body>
</html>

Kode html di atas akan membuat dua buah tombol, yakni tombol Confirm dan Log.

Ketika tombol Confirm diklik, browser akan mengeksekusi kode JavaScript yang kita sematkan di dalam atribut event onClick dalam hal ini kode untuk menampilkan popup konfirmasi yang berisi teks "Belajar JavaScript".

Sedangkan tombol Log, akan menulis pesan "Belajar JavaScript" ke console browser.

Jika memungkinkan, jangan gunakan metode ini karena kita bisa membuat hal yang sama menggunakan DOM, tapi lebih rapi.

Membuat Kode JavaScript di URL Tautan

Metode ini hanya untuk pengetahuan saja, jangan pernah digunakan.

Metode ini mungkin tidak berjalan di beberapa browser karena sering digunakan untuk melakukan serangan XSS, beberapa browser dibekali dengan fitur untuk memproteksi serangan ini.

Untuk menulis kode JavaScript di URL, kita bisa membuat tag <a> dan memasukkannya ke dalam atribut href, kode yang kita buat harus diawali dengan kata kunci javascript:.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="javascript:alert('Hello World')">Link</a>
  </body>
</html>

Ketika kita mengklik tulisan "Link", browser akan mengeksekusi kode JavaScript yang ada di dalam atribut href.

Selain menyisipkan di atribut href, kita juga bisa menulisnya langsung di address bar browser, coba ketik javascript:alert('Hello World').

Kesimpulan

Ada beberapa cara yang bisa kita gunakan untuk membuat membuat JavaScript di HTML, kita bisa menulisnya secara langsung di dalam file HTML (inline), memanggil file JavaScript eksternal, di dalam atribut event tag HTML, bahkan di URL.

Metode yang direkomendasikan adalah memanggil file JavaScript ekternal tepat sebelum tag </body>.

Ini membuat kode kita terlihat rapi dan mudah dipelihara, karena kode HTML dan JavaScript terpisah.

« Sebelumnya
Lingkungan PengembanganSelanjutnya »
Komentar