Pada tutorial sebelumnya: Cara Memasukkan (input) kode JavaScript ke dalam HTML saya meletakkan kode JavaScript di dalam tag HTML. Namun pada posisi manakah kode JavaScript sebaiknya 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 )
Pada dasarnya, anda bebas meletakkan kode program JavaScript dibagian manapun dalam HTML, selama berada di dalam tag
Saya sedang belajar JavaScript di Duniailkom
Belajar Web Programming di Duniailkom
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
Belajar JavaScript
Saya sedang belajar JavaScript di duniailkom.com
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 pada Cara 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)
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 . 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 )
Dari contoh sebelumnya, kita dapat melihat permasalahan yang terjadi jika kode JavaScript diposisikan pada awal halaman.
Untuk mengatasi permasalahan tersebut, beberapa programmer menyarankan untuk meletakkan kode JavaScript di akhir halaman (yakni sebelum tag penutup ). Peletakan tag
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 kode JavaScript. Kita ingin kode javascript di jalankan ketika seluruh dokumen telah tampil, tanpa memperhatikan pada posisi mana kode JavaScript di letakkan. Untuk hal ini, JavaScript menyediakan event onload.
Menjalankan JavaScript pada event onload, akan membuat javascript ‘menunggu’ seluruh tag HTML tampil sebelum memprosesnya, walaupun tag
Belajar JavaScript
Saya sedang belajar JavaScript di duniailkom.com
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.
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.
Sumber wk.com
EmoticonEmoticon