Tutorial Belajar JavaScript Part 6: Posisi Terbaik Meletakkan Kode JavaScript

Pada tutorial sebelumnya mengenai Cara Memasukkan Kode JavaScript ke file HTML, saya meletakkan tag <script> di dalam tag <head>.

Namun sebenarnya di bagian manakah kode JavaScript sebaiknya ditempatkan? Pada tutorial kali ini kita akan bahas tentang Posisi Terbaik Meletakkan Kode JavaScript.


Posisi JavaScript di Dalam Tag <head>

Pada dasarnya, kita bebas ingin meletakkan kode JavaScript di bagian mana saja, selama berada di dalam tag <script>.

Umumnya, tag <script> diletakkan pada awal kode HTML di akhir tag <head>, atau di akhir tag <body>. Posisi peletakan ini akan mempengaruhi bagaimana urutan kode JavaScript berjalan.

Halaman HTML di proses oleh web browser dari atas ke bawah secara berurutan. Aturan ini juga berlaku untuk kode HTML, CSS, dan JavaScript, sehingga kode JavaScript yang ada di dalam tag <head>, akan diproses lebih dahulu dari pada isi dokumen HTML yang terdapat di dalam tag <body>.

Untuk melihat efeknya, silahkan coba kode berikut:

<!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>

Contoh ini sama persis dengan praktek yang kita jalankan pada tutorial sebelumnya (Internal JavaScript). Kali ini kita akan fokus ke cara web browser mengeksekusi halaman ini.

Dalam contoh diatas, tag <script> yang berisi kode JavaScript berada di dalam tag <head>. Berikut tampilannya saat dijalankan:

Cara Memasukkan kode JavaScript ke File HTML - Internal JS

Sebelum kita men-klik tombol OK dari kotak alert, perhatikan tampilan teks HTML di halaman tersebut. Di situ tidak terlihat tulisan apapun, padahal di dalam kode HTML terdapat 2 kalimat di dalam tag <p>. Hanya setelah men-klik tombol OK, barulah teks tersebut bisa terlihat.

Ini berarti jika kode JavaScript diletakkan pada tag <head>, kode tersebut akan diproses sebelum konten web yang ada di dalam tag <body>.

Posisi peletakan JavaScript diawal seperti ini bisa mendatangkan masalah. Berikut contoh kasusnya:

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

  <script>
    let a = document.getElementById("div_semangat");
    a.innerHTML += "<p>Sedang belajar JavaScript, semangat...!!!</p>";
  </script>

</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="div_semangat"></div> 
</body>
</html>

Dalam kode ini saya membuat 2 perintah JavaScript di baris 7-8. Untuk sementara, kode ini tidak perlu dipahami, kita akan bahas dalam tutorial terpisah. Namun inti dari kode tersebut dipakai untuk menambah 1 tag <p> ke dalam element HTML yang memiliki id="div semangat". Tag HTML dengan id="div semangat"merujuk ke sebuah tag div di baris 15.

Ketika dijalankan, tidak ada tambahan kalimat apapun, jadi apa yang terjadi?

Untuk melihat kenapa kalimat tersebut tidak tampil, kita bisa cek pesan error JavaScript dari tab console Developer Tools. Tutorialnya pernah dibahas pada Cara Menampilkan Pesan Error JavaScript. Berikut pesan error yang tampil:

Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')

Posisi Terbaik Meletakkan Kode JavaScript - Error

Error ini berisi penjelasan bahwa JavaScript tidak bisa membaca property innerHTML dari sebuah nilai null. Dalam JavaScript, null merupakan tipe data khusus yang berarti 'tidak ada data'. 

Ini terjadi karena pada saat kode JavaScript di eksekusi, tag div masih belum tersedia dan belum sempat diproses. Salah satu solusi dari masalah ini adalah dengan memindahkan tag <script> ke akhir tag <body>.


Posisi JavaScript di Akhir Tag <body>

Untuk mengatasi masalah urutan eksekusi, mayoritas programmer lebih memilih meletakkan kode JavaScript di akhir tag <body>. Tujuannya agar memastikan seluruh tag HTML sudah tampil dan siap dimanipulasi dari JavaScript.

Sebagai pembuktian, mari kita pindahkan posisi tag <script> ke akhir tag <body>:

<!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 </p>
  <div id="div_semangat"></div> 

  <script>
    let a = document.getElementById("div_semangat");
    a.innerHTML += "<p>Sedang belajar JavaScript, semangat...!!!</p>";
  </script>

</body>
</html>

Posisi Terbaik Meletakkan Kode JavaScript

Hasilnya, kalimat "Sedang Belajar JavaScript, Semangat…!!!" sukses ditampilkan ke dalam web browser.

Saat ini mayoritas programmer lebih menyarankan meletakkan kode JavaScript di akhir tag<body> seperti ini. Selain bisa mengatasi contoh masalah kita diatas, hal tersebut juga untuk menghindari terjadinya render blocking JavaScript.

Render blocking JavaScript adalah proses tertundanya loading halaman web karena web browser sibuk mengeksekusi kode program JavaScript.

Seperti yang sudah kita bahas, web browser mengeksekusi kode program secara berurutan dari atas ke bawah. Dengan menempatkan kode JavaScript di akhir tag <body>, user sudah bisa melihat tampilan halaman web terlebih dahulu sembari kode JavaScript di eksekusi web browser.

Sebenarnya terdapat berbagai teknik lain untuk mengatasi masalah render blocking JavaScript, yang salah satunya menggunakan atribut async dan defer. Namun karena materi tersebut sedikit advanced dan penjelasannya cukup panjang, saya siapkan di buku JavaScript Uncover.

Dalam tutorial berikutnya, kita akan bahas tentang bagaimana Cara Menampilkan Hasil Program 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.

21 Comments

  1. nabil
    15 Jan 15
    • Andre
      19 Jan 15
  2. dhia
    09 Nov 15
    • Andre
      12 Nov 15
  3. anandia
    05 Feb 16
    • Andre
      07 Feb 16
  4. senrif
    22 Jul 16
  5. Rick-Gil
    04 Feb 17
  6. Tomo Koeswoyo
    27 Aug 17
    • Andre
      27 Aug 17
  7. Jojod
    29 Jan 18
    • Andre
      30 Jan 18
  8. deny
    26 Mar 18
    • Andre
      26 Mar 18
  9. gens
    18 May 18
  10. Gerry
    17 Jul 18
  11. Farina A
    20 May 20
  12. supermoon
    10 Jun 23
    • Andre
      11 Jun 23

Add Comment