cloud-hosting-terbaik-indonesia

Tutorial Belajar JavaScript Part 6: Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML

Posted on

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


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

Di dasarnya, sahabat bebas meletakkan kode program JavaScript dibagian manapun pada HTML, dalam rentang waktu berada di pada tag <script> (atau via event handler, walaupun tak disarankan).

Tag <script> dapat diletakan di awal HTML (di pada tag <head>), di tengah HTML (di pada 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 pun bagi HTML, CSS, dan JavaScript. Kode JavaScript yang diletakkan di awal dokumen (didalam tag <head>), akan diproses terlebih dahulu sebelum web browser memproses isi dokumen HTML yang terdapat di pada tag <body>.

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

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

Pada contoh diatas, tag <script> berisi kode JavaScript yang diletakkan di awal halaman (di pada tag <head>). Seandainya sahabat menjalankan program diatas, karenanya di pada web browser akan tampil hasil seperti berikut ini:

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

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

Posisi peletakan JavaScript diawal HTML ini , dapat menjadi permasalahan tersendiri pada membangun kode JavaScript.

Di ketika kita menulis program JavaScript, sebahagian besar kode tersebut digunakan bagi memanipulasi halaman web. Permasalahan muncul kalau ketika kode JavaScript dieksekusi, halaman atau tag HTML yang akan diproses belum terdapat.

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

Pada file HTML diatas, saya membangun beberapa baris kode JavaScript, sahabat tak perlu memahami kode tersebut, karena kita akan mempelajarinya nanti. Namun inti dari kode tersebut yakni menambahkan 1 kalimat ke pada tag HTML yang mempunyai id=”div semangat”.

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

Seandainya sahabat menjalankan halaman tersebut, hasil tampilan di web browser tak akan menampilkan kalimat yang saya bikin dari JavaScript. Apa yang terjadi?

Bagi melihat kenapa kalimat tersebut tak tampil, sahabat dapat melihatnya dari error JavaScript. Silahkan aktifkan fitur Web Developer dari web browser (seperti yang pernah saya bahas di Cara Menampilkan Pesan Kesalahan (Error) JavaScript). Dari tab console, sahabat dapat melihat 1 buah error, yakni :

atau

 Kedua web browser tersebut menampilkan error yang menyatakan bahwa variabel a yang digunakan di pada JavaScript tak dapat menemukan tag dengan id=”div semangat”.

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

Diantara solusi bagi permasalahan ini yakni dengan memindahkan kode JavaScript ke ahir halaman HTML.


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

Dari contoh sebelumnya, kita dapat melihat permasalahan yang terjadi kalau kode JavaScript diposisikan di awal halaman.

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

Bagi membuktikannya, mari kita ubah kode program sebelumnya, dan memindahkan kode JavaScript ke posisi ahir halaman:

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

Namun sebahagian programmer tak menyukai peletakan JavaScript di ahir halaman seperti ini, karena terkesan kurang ‘elegan’. Untungnya JavaScript menyediakan solusi bagi hal ini.


Solusi Elegan JavaScript : Manfaat Event onload

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

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

Sebuah event di pada javascript tak mesti ‘berwujud’ seperti klik atau klik kanan,namun dapat pun yang ’tak berwujud’. Diantara event yang ‘tak berwujud’ ini yakni event di ketika halaman di tampilkan, atau di pada bahasa inggris, di ketika halaman loading.

Event di ketika halaman ditampilkan (load) inilah yang dapat dimanfaatkan bagi mengeksekusi kode JavaScript. Kita ingin kode javascript di jalankan ketika seluruh dokumen telah tampil, tanpa memperhatikan di posisi mana kode JavaScript di letakkan. Bagi hal ini, JavaScript menyediakan event onload.

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

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

Perhatikan cara penulisan event onload di baris ke 7. Event onload yakni diantara method (atau kegunaan)
dari objek window pada JavaScript (sahabat tak perlu memahaminya maksudnya, saya akan membahasnya secara lebih pada di panduan 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 beberapa panduan JavaScript berikutnya, saya akan menggunakan cara penulisan JavaScript menggunakan event onload seperti ini. Kamu lumayan mengetahui cara penulisan event onload saja, saya akan membahas konsep event di panduan JavaScript tersendiri.

Di panduan JavaScript kali ini, kita telah membahas mengenai posisi terbaik meletakkan kode JavaScript. Pada panduan berikutnya, kita akan membahas mengenai bagaimana cara menampilkan hasil program di dalam JavaScript.


eBook JavaScript Uncover Duniailkom

JavaScript telah menjadi fitur wajib di setiap situs modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih komplit, mulai dari mendasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut dapat ke eBook JavaScript Uncover Duniailkom.


Sumber https://www.duniailkom.com/