Sabtu, 09 April 2016

Tentang peletakan javascript


Pernah ada yang ngalamin gak, udah nulis javascript capek2 eh kode yang ditulis malah gak bekerja, padahal menurut kita kodenya udah benar?
Pasti adalah ya? selain akibat dari kesalahan penulisan kode, biasa juga kita salah menempatkan kode tersebut.

Misalnya kita mempunyai kode seperti 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</p>
<div id="div_semangat"></div>
</body>
</html>

CONTOH

Tag HTML dengan id="div_semangat" yang berada di dalam sebuah tag div sebelum tag penutup body. Pada tag inilah kita mengisi kalimat yang dibuat dengan JavaScript.
Jika kita menjalankan halaman tersebut, hasil tampilan pada web browser tidak akan menampilkan kalimat yang kita buat dari JavaScript. Apa yang terjadi?
Untuk melihat kenapa kalimat tersebut tidak tampil, kita bisa melihatnya dari pesan error JavaScript. jika menggunakan Google Chrome anda bisa menekan tombol Ctrl+shift+i Dan klik pada tab Console disitu kita bisa melihat hasil errornya. mengapa kok error? karena javascriptnya ter-Eksekusi duluan dan dia belum menemukan Tag HTML yang di maksud yaitu tag dengan ID div_semangat. bisa saja kita menempatkan javascriptnya tetap berada diatas </head> dan bekerja secara normal tapi kita harus menggunakan fungsi window.onload pada javascriptnya. jadi seperti ini kodenya

<!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");
   a.innerHTML="<p>Sedang Belajar JavaScript, Semangat...!!!</p>";
}
</script>
 
</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript</p>
<div id="div_semangat"></div>
</body>
</html>

Fungsi kode window.onload adalah meng-Eksekusi kode setelah semua halaman termuat kadang itu membuat jenuh juga, tapi tenang ada satu lagi cara yaitu menyimpan kode javascriptnya diatas tag </body> atau </html> jadi seperti ini kodenya:

<!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</p>
<div id="div_semangat"></div>
<script>
var a=document.getElementById("div_semangat");
   a.innerHTML="<p>Sedang Belajar JavaScript, Semangat...!!!</p>";
</script>
</body>
</html>

Penjelasan kode diatas adalah saat semua kode telah termuat sampai tag </body> maka kode javascriptnya akan mengEksekusi tag dengan ID div_semangat jadi walau tanpa window.onload kodenya akan tetap bekerja.

CONTOH

Referensi Artikel : Duniailkom.