Tutorial Belajar JavaScript Part 5: Cara Memasukkan Kode JavaScript ke File HTML

Di beberapa tutorial sebelumnya, kita sudah bahas Cara Menjalankan Kode Program JavaScript,. Sekarang akan dilanjutkan dengan metode atau Cara untuk Memasukkan Kode JavaScript ke dalam file HTML.


Cara Memasukkan kode JavaScript ke file HTML

JavaScript termasuk jenis bahasa script yang di sisipkan ke dalam file HTML. Untuk menginput atau memasukkan kode JavaScript ke dalam HTML, tersedia 4 cara:

  • Internal JavaScript
  • External JavaScript
  • Inline JavaScript
  • JavaScript Protocol

Kita akan bahas ke empat metode ini dengan lebih detail.


Pengertian Internal JavaScript

Cara pertama untuk menginput kode JavaScript ke dalam file HTML adalah dengan Internal JavaScript. Disebut sebagai 'internal' karena kode JavaScript itu ditulis pada halaman yang sama dengan kode HTML, atau di dalam satu file HTML. Kode JavaScript di input menggunakan tag <script>.

Internal JavaScript cukup sering digunakan, terutama jika kode itu tidak begitu panjang dan hanya dibutuhkan pada satu halaman saja. Kode JavaScript di tulis antara tag pembuka <script> dan tag penutup </script> seperti berikut:

<script>
  //kode javascript diletakkan disini
</script>

Tag <script> akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah HTML, tetapi JavaScript.

Berikut contoh prakteknya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 

  <script>
    alert("Hello World!!");
  </script>
  
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p>Saya sedang belajar JavaScript di duniailkom.com</p>
  <p>Belajar Web Programming di Duniailkom.</p>
</body>
</html>

Saya menempatkan tag <script> ke dalam tag <head> pada baris ke 6. Tag <script> tersebut berisi 1 baris perintah, yakni alert("Hello World!!");. Ini adalah kode untuk menjalankan fungsi alert() milik JavaScript.

alert() adalah perintah khusus untuk menampilkan kotak informasi. Fungsi ini sering dipakai dalam proses pembuatan kode JavaScript sekedar untuk menampilkan output sederhana. Teks informasi tersebut ditulis antara tanda kurung dan dalam tanda kutip.

Save file diatas dengan nama sembarang selama memiliki extension .html, misalnya index.html, lalu akses di web browser:

Cara Memasukkan kode JavaScript ke File HTML - Internal JS

Hasilnya, akan tampil jendela alert yang berisi teks "Hello World". Inilah contoh dari internal JavaScript.

Dalam beberapa tutorial JavaScript yang agak lama, mungkin anda juga menemukan tambahan atribut type="text/javascript" seperti contoh berikut:

<script type="text/javascript">
  //kode javascript diletakkan disini
</script>

Dulunya, atribut type="text/javascript" dipakai untuk membedakan JavaScript dengan bahasa script lain seperti VBScript atau JScript. Namun karena VBScript dan JScript sudah punah, hampir semua web browser modern menjadikan JavaScript sebagai bahasa default. Oleh karena itu penulisan type="text/javascript" tidak lagi diperlukan.

Selain itu kadang juga ada yang menulis atribut language sebagai pengganti atribut type seperti contoh berikut:

<script language="text/javascript">
  //kode javascript diletakkan disini
</script>

Atribut language sudah dianggap usang (deprecated) dan disarankan untuk tidak dipakai lagi.


Pengertian External JavaScript

Cara kedua untuk menginput kode JavaScript ke dalam file HTML adalah dengan memindahkan kode JavaScript ke dalam sebuah file terpisah, lalu diakses dari file HTML. Karena file JavaScript ini berada di luar file HTML, disebut juga sebagai external JavaScript. Cara ini lebih disarankan untuk kode JavaScript yang panjang, dan dipakai oleh banyak halaman.

File JavaScript external disimpan dalam ekstensi .js, seperti: kode.js, register.js, atau kodeku.js. Dari halaman HTML, kita memanggilnya menggunakan juga dengan tag <script>, tapi kali ini dengan tambahan atribut src. Atribut src berisi alamat dari file JavaScript tersebut, seperti berikut ini:

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

Perhatikan bahwa tag <script> langsung ditutup dengan tag </script>. Di antara tag ini, tidak bisa ditulis kode internal JavaScript lain, tapi harus dipisah ke dalam tag tersendiri:

<script src="kode_javascript.js">Tidak boleh ada kode lagi disini</script>

Sebagai contoh praktek, saya akan pindahkan perintah alert("Hello World!!") ke dalam file tersendiri. Silahkan buat file baru dengan nama kode_javascript.js, kemudian isi dengan perintah berikut:

alert("Hello World!!")

Ya, hanya 1 baris itu saja, dan pastikan simpan di folder yang sama dengan tempat kode HTML berada. Di HTML, kita akan panggil file JavaScript tersebut dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
  <script src="kode_javascript.js"></script>
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p>Saya sedang belajar JavaScript di duniailkom.com</p>
  <p>Belajar Web Programming di Duniailkom.</p>
</body>
</html>

Dalam kode ini, perintah pemanggilan file kode_javascript.js ada di baris 5. Hasilnya, ketika di jalankan akan langsung tampil jendela alert seperti contoh di internal JavaScript.

Alamat file external JavaScript boleh berbentuk alamat relatif seperti contoh diatas, atau bisa juga alamat absolut seperti https://www.duniailkom.com/kode_javascript.js. Aturan penulisan alamat ini sama seperti atribut src di HTML. Lebih lanjut tentang perbedaan alamat relatif dan absolut bisa ke Tutorial HTML cara membuat link HTML.

Penamaan file JavaScript dengan akhiran .js sebenarnya juga sebuah kesepakatan. Meskipun tidak umum, web browser tetap mengizinkan kita membuat akhiran atau extension lain seperti: kode_javascript.aku, atau kode_javascript.duniailkom, selama pemanggilan tag <script> harus sesuai dengan nama file tersebut, seperti <script src="kode_javascript.duniailkom"></script>. Namun agar lebih nyaman dan tidak membuat bingung, sebaiknya tetap mengikuti kesepakatan dengan menggunakan akhiran .js.


Pengertian Inline JavaScript

Cara ketiga untuk menjalankan JavaScript adalah dengan metode inline JavaScript. Ini bisa dilakukan menggunakan konsep event handler.

Konsep event handler termasuk bagian dari DOM (Document Object Model) baru baru kita pelajari secara khusus pada tutorial terpisah. Namun sederhananya, event handler adalah memanggil kode javascript ketika 'sesuatu' terjadi di dalam tag HTML.

Sesuatu ini maksudnya ketika sebuah element HTML di klik, di klik kanan, di arahkan mouse, dll. Event handler di dalam JavaScript ditulis dengan penambahan kata on, sehingga jika sebuah tombol di-klik, menggunakan onclick, atau jika mouse berada diatas element disebut sebagai onmouseover, dst.

Berikut praktek dari inline JavaScript yang berjalan saat sebuah tombol di klik:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p>Saya sedang belajar JavaScript di duniailkom.com</p>
  <p>Belajar Web Programming di Duniailkom.</p>
  <button onclick="alert('Hello World!!')">Klik Saya</button>
</body>
</html>

Cara Memasukkan kode JavaScript ke File HTML - Inline JS

Perhatikan baris 10 dari contoh kode di atas. Ke dalam tag <button>, saya menambahkan onclick="alert('Hello World!!')", ini merupakan kode JavaScript yang diinput melalui metode event handler.

Meskipun praktis, cara menginput kode JavaScript seperti ini kurang disarankan. Alasannya karena kita mencampurkan kode JavaScript dengan HTML. Dan jika kode JavaScript agak panjang, tidak lagi praktis ditulis dalam 1 baris saja.

Di dalam pemrograman Javascript, ada istilah yang disebut sebagai unobtrusive JavaScript. Unobtrusive JavaScript adalah filosofi atau paradigma yang berpendapat bahwa content (HTML) sedapat mungkin harus terpisah dari behavior (JavaScript) agar mudah dalam pemeliharaan dan lebih fleksibel. Konsep ini dapat dibaca pada http://en.wikipedia.org/wiki/Unobtrusive_JavaScript.


Pengertian JavaScript Protocol

Cara terakhir dan juga sudah sangat jarang dipakai, adalah dengan menyisipkan kode JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga sebagai JavaScript Protocol. Disebut demikian, karena kita mengganti alamat link dari yang biasa menggunakan protocol http// menjadi javascript.

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p>Saya sedang belajar JavaScript di duniailkom.com</p>
  <p>Belajar Web Programming di Duniailkom.</p>
  <a href="javascript:alert('Hello World!!')">Hallo Dunia...</a>
</body>
</html>

Jika anda menjalankan kode diatas dan men-klik link Hallo Dunia… akan tampil alert Hello World!!. Jendela ini berasal dari kode JavaScript di tag <a> pada baris 10:

Cara Memasukkan kode JavaScript ke File HTML - JavaScript Protocol

Cara menjalankan JavaScript seperti ini berasal dari awal kemunculan JavaScript dan sudah banyak ditinggalkan.


Jadi Sebaiknya Pakai Metode Apa?

Selain JavaScript protocol, ketiga metode input JavaScript lain tidak masalah jika ingin dipakai, yakni internal, external dan inline. Pilihannya lebih ke situasi yang sedang dihadapi:

  • Jika kita membuat kode yang sangat singkat dan tidak masalah sedikit repot mencari letak posisinya di kemudian hari, silahkan pakai Inline JavaScript.
  • Jika kita membuat kode yang cukup singkat dan tidak dipakai oleh halaman lain, silahkan pakai Internal JavaScript.
  • Dan jika kita membuat kode yang lumayan panjang atau kode tersebut akan dipakai oleh banyak halaman, maka external JavaScript menjadi pilihan terbaik.

Note: Dulunya, inline JavaScript banyak di kritik karena mencampurkan kode JS dan HTML. Akan tetapi konsep tersebut malah banyak dipakai oleh library/framework seperti React atau Vue.

Berhubungan dengan cara menginput kode JavaScript ke halaman HTML, sebenarnya masih ada masalah yang harus dibahas, terutama jika kita menggunakan internal dan external JavaScript. Masalah tersebut adalah, dimanakan tag <script> sebaiknya ditempatkan? apakah di bagian <head>, atau di bagian <body>? Inilah materi kita selanjutnya dalam Posisi Terbaik Meletakkan kode JavaScript.


Saat ini di Duniailkom tersedia eBook / buku JavaScript Uncover. Dengan total lebih dari 650 halaman A4, materi di buku jauh lebih banyak daripada tutorial di web Duniailkom. Penjelasan lebih lanjut bisa ke: JavaScript Uncover – Panduan Belajar JavaScript.

48 Comments

  1. suhu-wow
    20 Jun 14
    • Andre
      21 Jun 14
  2. adi
    30 Sep 14
    • Andre
      30 Sep 14
  3. langcoto
    07 Jan 15
  4. Sam
    06 May 15
  5. Abdil aziz
    08 May 15
  6. Deagung
    06 Jun 15
    • Andre
      06 Jun 15
  7. Raihan
    16 Jun 15
  8. Crystal X
    27 Jul 15
    • Andre
      28 Jul 15
  9. psiXho13
    21 Nov 15
  10. Erfian Junianto
    04 Dec 15
  11. Wawan.Int
    11 Dec 15
  12. Pebri Antara
    28 Jan 16
  13. fandy
    09 Mar 16
  14. Anonymous
    03 Apr 16
  15. langcoto
    04 May 16
    • Andre
      05 May 16
  16. Dodi
    13 Jun 16
    • Andre
      14 Jun 16
  17. fikri wahyudi
    25 Oct 16
    • Andre
      26 Oct 16
      • fikri wahyudi
        26 Oct 16
        • Andre
          27 Oct 16
        • fikri wahyudi
          27 Oct 16
  18. Novi Okta Reza
    19 Nov 16
  19. I Wayan Sunanta, SSTP
    26 Dec 16
    • Andre
      27 Dec 16
  20. Tomo
    04 Jun 17
  21. Tommo van Gaal
    09 Jun 17
    • Andre
      10 Jun 17
  22. FullApkZ
    03 Oct 17
    • Andre
      04 Oct 17
  23. arif syaifudin
    23 Oct 17
    • Andre
      25 Oct 17
  24. asry florist
    30 Nov 17
    • Andre
      02 Dec 17
  25. Firman Maulana
    06 Dec 17
  26. Aweng
    19 Feb 19
  27. hans
    02 Apr 19
  28. Raul Ganteng
    03 Jul 19
  29. Claudio khelvin
    26 Mar 20
  30. Yusnita zahra
    01 Jun 21

Add Comment