HTML içinde JavaScript kodu nereye eklenir yada nereye yazılır sorusunun cevabı olarak genellikle <head> … </head> etiketleri arasında yazıldığını görmüşsünüzdür. Ancak bu kullanım günümüzden çok yıllar önce uygun bir kullanım yöntemiydi. Artık javascript kodları yada harici kodlar sayfadan önce yüklenmesi zorunlu değilse (istatistik yada ajax işlemleri gibi) </body> ifadesinden hemen önce yazılması gerekir.
Eğer bir javascript kodunu <head> etiketi içine koyarsanız sayfa yüklenirken javascript koduna geldiğinde yüklenmeyi durduracak ve javascript dosyasını yüklemeye başlayacaktır. Bu da sayfanızın gerektiği hızda yüklemesini engelleyecektir. Günümüzde kullanıcılar sayfaların yüklenmesi için 5 saniye kadar tahammül edebildiğini düşünürsek hız burada büyük önem göstermektedir. Ayrıca hız dışında DOM nesneleri ile etkileşimde olan javaScript kodları varsa sayfa yüklenirken bu nesnelerin de script kodundan hemen önce yüklenmesi gerekir. Bu nedenlerden dolayı <script> kodlarınızı </body> etiketinden hemen önce yazmanız zorunluluktan olmasa da bir gerekliliktir.
Örnek: Burada <script> kodu head etiketi arasında kullanılmış ve kendinden sonra yüklenecek bir nesneyi çağırmaktadır. <script> yüklenirken, kendinden sonra gelen HTML nesnesini göremediği için hata verecektir.
#mesaj nesnesi kendisinden sonra oluşturulduğu için sayfa yüklenirken mesaj.innerHTML nesnesini göremediğinden hata verecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.tasarimkodlama.com</title> </head> <body> <script> var mesaj=document.querySelector("#mesaj"); mesaj.innerHTML="Hoşgeldiniz!"; </script> <h1 id="mesaj">Mesaj burada olacak</h1> </body> </html> |
Örnek: Doğru kullanım ise şu şekilde olmalıdır. <script> etiketini </body> ifadesinin hemen önüne alınmalıdır. id=”mesaj” h1 etiketi script ifadesinden hemen önce yükleneceği için hata vermeyecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.tasarimkodlama.com</title> </head> <body> <h1 id="mesaj">Mesaj burada olacak</h1> <script> var mesaj=document.querySelector("#mesaj"); mesaj.innerHTML="Hoşgeldiniz!"; </script> </body> </html> |
1 Yorum