perbedaan menggunakan window.onload dan tidak pada javascript
Didalam Katagori: Uncategorized, Javascript
dalam javascript dikenal istilah Event, atau suatu aturan yang menangani semua interaksi user dengan aplikasi, dalam hal ini website.
salah satu event yang sering digunakan adalah onload().
silahkan lihat contoh pada script berikut:
<html>
<head>
<title>DOM</title>
</head>
<body>
<div id="text">Hello World!</div>
<script type="text/javascript">
window.onload = function(){
alert(document.getElementById(’text’).innerHTML);
}
</script>
</body>
</html>
script diatas akan menghasilkan prompt alert "Hello World"
sekarang kembali ke judul artikel ini, kita akan mengetahui dimana letak perbedaan antara menggunakan event window.onload() dengan yang tidak menggunakannya. perhatikan contoh dibawah yang tidak menggunakan event onload():
<html>
<head>
<title>DOM</title>
</head>
<body>
<div id="text">Hello World!</div>
<script type="text/javascript">
alert(document.getElementById(’text’).innerHTML);
</script>
</body>
</html>
Ternyata hasilnya tetap sama, dengan script sebelumnya (yang menggunakan event window.onload()), nah lalu dimana letak perbedaannya??
Oke sekarang perhatikan contoh selanjutnya:
<html>
<head>
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
alert(document.getElementById(’text’).innerHTML);
</script>
<div id="text">Hello World!</div>
</body>
</html>
pada script diatas, posisi tag div saya pindahkan dibawah tag script, dan perhatikan bahwa script tersebut tanpa menggunakan event window.onload();, lihat bagaimana hasilnya??
YA! benar, hasilnya adalah error
document.getElementById("text") is null
tag dengan ID text tidak terdeteksi oleh script tersebut, itu dikarenakan letaknya tidak urut, karena secara default javascript akan diproses oleh browser dari atas ke bawah, Nah gimana?? 
Untuk memperjelas perbedaannya (nya => judul ) , perhatikan (atau kalo gak males dicoba
) sekali lagi script dibawah,
<html>
<head>
<title>DOM</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
alert(document.getElementById(’text’).innerHTML);
}
</script>
<div id="text">Hello World!</div>
</body>
</html>
script diatas saya tambahi event window.onload(). lihat hasilnya!!
kesimpulan :
- penggunaan window.onload() lebih aman
- bila tidak ingin menggunakan window.onload(), maka perhatikan urutan javascript DOM dan HTML TAG (Object) mana yang lebih dulu menjadi acuan/ program dibaca dari atas ke bawah
- bila menggunakan window.onload(), maka urutan script antara javascript DOM dan HTML TAG (Object) boleh diabaikan