Tutorial Belajar JavaScript Part 6: Posisi Terbaik Meletakkan kode JavaScript di dalam HTML ~ ILham Zakaria || Web

Pada tutorial sebelumnya: Cara Memasukkan (input) kode JavaScript ke dalam HTML saya meletakkan kode JavaScript di dalam tag <head> HTML. Namun pada posisi manakah kode JavaScriptsebaiknya ditempatkan? Pada tutorial kali ini saya akan membahas tentang posisi peletakan kode JavaScipt di dalam HTML.

Posisi JavaScript pada di awal HTML (di dalam tag <head>)

Pada dasarnya, anda bebas meletakkan kode program JavaScript dibagian manapun dalam HTML, selama berada di dalam tag <script> (atau melalui event handler, walaupun tidak disarankan).

Tag <script> bisa diletakan pada awal HTML (di dalam tag <head>), di tengah HTML (di dalam tag <body>), maupun diakhir HTML (sebelum tag penutup </html>). Posisi peletakan ini akan mempengaruhi bagaimana urutan kode JavaScript dijalankan.

Halaman HTML diproses oleh web browser dari atas ke bawah secara berurutan. Hal ini berlaku juga untuk HTML, CSS, dan JavaScript. Kode JavaScript yang diletakkan pada awal dokumen (didalamtag <head>), akan diproses terlebih dahulu sebelum web browser memproses isi dokumen HTML yang terdapat di dalam tag <body>.

Untuk melihat efeknya,mari kita coba contoh kode HTML dan JavaScript berikut ini:

<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<head>

<title>Belajar Tag Label HTML</title>

<script>

   alert("Hello World!!");

</script>

</head>

<body>

<p>Saya sedang belajar JavaScript di Duniailkom</p>

<p>Belajar Web Programming di Duniailkom</p>

</body>

</html>

Contoh kode diatas sama persis dengan contoh yang saya jalankan ketika membahas tentang cara men-input kode javascript pada tutorial sebelumnya. Namun kali ini saya akan fokus bagaimana web browser mengeksekusi halaman tersebut.

Dalam contoh diatas, tag <script> berisi kode JavaScript yang diletakkan pada awal halaman (di dalam tag <head>). Jika anda menjalankan program diatas, maka di dalam web browser akan tampil hasil seperti berikut ini:

Cara Memasukkan kode JavaScript ke dalam HTML - tag script

Sebelum anda men-klik tombol OK dari kotak dialog alert, perhatikan tampilan text HTML dari halaman tersebut. Pada halaman web tidak terlihat tulisan apapun, padahal di dalam kode HTML, saya telah menambahkan 2 kalimat di dalam tag <p>. Dan hanya jika anda men-klik tombol OK, baru setelahnya akan tampil 2 kalimat tersebut.

Hal ini berarti bahwa jika kode JavaScript diletakkan pada posisi tag <head>, maka kode tersebut akan dijalankan (diproses) sebelum ‘isi’ website (tag <body>) ditampilkan. Sehingga disimpulkan bahwa pemrosesan program dimulai dari atas ke bawah halaman web.

Posisi peletakan JavaScript diawal HTML ini , bisa menjadi permasalahan tersendiri dalam membuat kode JavaScript.

Pada saat kita menulis program JavaScript, sebagian besar kode tersebut digunakan untuk memanipulasi halaman web. Permasalahan muncul jika saat kode JavaScript dieksekusi, halaman atau tag HTML yang akan diproses belum tersedia.

Sebagai contoh lain, silahkan jalankan kode program HTML berikut ini:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Belajar JavaScript</title>

<script>

   var 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.com </p>

<div id="div_semangat"></div>

</body>

</html>

Dalam file HTML diatas, saya membuat beberapa baris kode JavaScript, anda tidak perlu memahami kode tersebut, karena kita akan mempelajarinya nanti. Namun inti dari kode tersebut adalah menambahkan 1 kalimat ke dalam tag HTML yang memiliki id=”div semangat”.

Tag HTML dengan id=”div_semangat” berada di dalam sebuah tag div pada baris ke. Pada tag inilah saya akan mengisi kalimat yang dibuat dengan JavaScript.

Jika anda menjalankan halaman tersebut, hasil tampilan pada web browser tidak akan menampilkan kalimat yang saya buat dari JavaScript. Apa yang terjadi?

Untuk melihat kenapa kalimat tersebut tidak tampil, anda bisa melihatnya dari error JavaScript. Silahkan aktifkan menu Web Developer dari web browser (seperti yang pernah saya bahas padaCara Menampilkan Pesan Kesalahan (Error) JavaScript). Dari tab console, anda bisa melihat 1 buah error, yakni :

Uncaught TypeError: Cannot set property 'innerHTML' of null (pada Google Chrome)

atau

TypeError: a is null (pada Mozilla Firefox)

Error pada saat JavaScript di posisi head HTML

Kedua web browser tersebut menampilkan error yang menyatakan bahwa variabel a yang digunakan di dalam JavaScript tidak bisa menemukan tag dengan id=”div semangat”.

Hal ini terjadi karena pada saat JavaScript di eksekusi, tag div tersebut belum tersedia (belum sempat diproses), karena JavaScript di jalankan sebelum tag <body>. Tag div baru tersedia ketika web browser telah selesai menjalankan JavaScript.

Salah satu solusi untuk permasalahan ini adalah dengan memindahkan kode JavaScript ke akhir halaman HTML.

Posisi JavaScript pada di akhir HTML (sebelum tag </html>)

Dari contoh sebelumnya, kita dapat melihat permasalahan yang terjadi jika kode JavaScriptdiposisikan pada awal halaman.

Untuk mengatasi permasalahan tersebut, beberapa programmer menyarankan untuk meletakkan kode JavaScript di akhir halaman (yakni sebelum tag penutup </html>). Peletakan tag <script>diakhir halaman akan memastikan bahwa seluruh tag HTML telah tampil pada web browser sebelum kode JavaScript.

Untuk membuktikannya, mari kita ubah kode program sebelumnya, dan memindahkan kodeJavaScript ke posisi akhir halaman:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Belajar JavaScript</title>

</head>

<body>

<h1>Belajar JavaScript</h1>

<p> Saya sedang belajar JavaScript di duniailkom.com </p>

<div id="div_semangat"></div>

</body>

<script>

   var a=document.getElementById("div_semangat");

   a.innerHTML="<p>Sedang Belajar JavaScript, Semangat...!!!</p>";

</script>

</html>

Hasil tampilan contoh penempatan JavaScript di akhir HTML

Dan, seperti yang terlihat, kalimat “Sedang Belajar JavaScript, Semangat…!!!” sukses ditampilkan ke dalam web browser hanya dengan memindahkan kode JavaScript ke akhir halaman.

Namun sebagian programmer tidak menyukai peletakan JavaScript di akhir halaman seperti ini, karena terkesan kurang ‘elegan’. Untungnya JavaScript menyediakan solusi untuk hal ini.

Solusi Elegan JavaScript : Fungsi Event onload

JavaScript menyediakan solusi untuk programmer yang tetap ‘keras kepala’ -termasuk saya :) untuk tetap meletakkan JavaScript di awal halaman, yakni menggunakan Event Onload.

Walaupun saya belum membahas tentang konsep event, Event di dalam JavaScript dapat dibayangkan dengan sebuah ‘kejadian’ yang terjadi pada suatu elemen. Pada pembahasan tentang cara menginput kode JavaScript, sekilas saya telah membahas tentang ‘kejadian’ ini, yaitu ketika sebuah tombol di-klik, atau di-klik kanan. Klik dan klik kanan adalah kejadian (atau event) yang terjadi pada sebuah tombol.

Sebuah event di dalam javascript tidak harus ‘berwujud’ seperti klik atau klik kanan,namun bisa juga yang ’tidak berwujud’. Salah satu event yang ‘tidak berwujud’ ini adalah event pada saat halaman di tampilkan, atau di dalam bahasa inggris, pada saat halaman loading.

Event pada saat halaman ditampilkan (load) inilah yang bisa dimanfaatkan untuk mengeksekusi kodeJavaScript. Kita ingin kode javascript di jalankan ketika seluruh dokumen telah tampil, tanpa memperhatikan pada posisi mana kode JavaScript di letakkan. Untuk hal ini, JavaScript menyediakanevent onload.

Menjalankan JavaScript pada event onload, akan membuat javascript ‘menunggu’ seluruh tag HTML tampil sebelum memprosesnya, walaupun tag <script> berada di awal halaman (bahkan di posisi manapun).

Berikut adalah kode JavaScript yang diletakkan di awal halaman HTML, dan menggunakan event onload:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Belajar JavaScript</title>

<script>

window.onload = function()

{

   var a=document.getElementById("div_semangat");

   .innerHTML="<p>Sedang Belajar JavaScript, Semangat...!!!</p>";

}

</script>

</head>

<body>

<h1>Belajar JavaScript</h1>

<p> Saya sedang belajar JavaScript di duniailkom.com </p>

<div id="div_semangat"></div>

</body>

</html>

Perhatikan cara penulisan event onload pada baris ke 7. Event onload adalah salah satu method(atau fungsi) dari objek window dalam JavaScript (anda tidak perlu memahaminya maksudnya, saya akan membahasnya secara lebih dalam pada tutorial khusus JavaScript mengenai event).

Dengan menggunakan event onload, seluruh kode JavaScript dapat diletakkan di awal halaman, tanpa perlu khawatir dengan urutan pengeksekusian oleh web browser.

Dalam beberapa tutorial JavaScript berikutnya, saya akan menggunakan cara penulisan JavaScript menggunakan event onload seperti ini. Anda cukup mengetahui cara penulisan event onload saja, saya akan membahas konsep event pada tutorial JavaScripttersendiri.

Pada tutorial JavaScript kali ini, kita telah membahas tentang posisi terbaik meletakkan kode JavaScript. Dalam tutorial berikutnya, kita akan membahas tentang bagaimana cara menampilkan hasil program di dalam JavaScript.

source : www.duniailkom.com

ILham Zakaria || Web

Tempatnya Berbagi Ilmu, Tips n Trik, dan Belajar

Minggu, 12 Juli 2015