JAVASCRİPT onload EVENT (DÖKÜMANIN HAZIR OLMASI)

Javascript kodlarının, eksiksiz bir şekilde çalışması için web sayfasının tam yüklenmiş olması gerekir. onload eventi(olay dinleyicisi) web sayfası tamamen (Resimler, komut dosyaları, CSS dosyaları, vb..) tüm içeriği yüklendikten sonra bir komut dosyası çalıştırmak için kullanılır.

onload eventi sayfanın hazır olduğunu ve artık işlem yapabileceğimizi gösterir. Kullanımı:

İki şekilde kullanılır bunları görelim.

Söz Dizimi:


window.onload = Fonksiyon ;

       onload = Fonksiyon ; 
	   

Yukarıda ki örnekte, iki yolda çalışır. JavaScript Window Nesnesi, web tarayıcı penceresine karşılık gelen en yüksek seviyede JavaScript nesnesidir. Şu an web tarayıcı ekranında bulunduğumuz için window nesnesini yazmasakda olur.

Alternatif kullanımı:


window.onload = function () {

//Kodlar buraya yazılır
	
  };

Javasvript'de jquery kütüphanesini kullananlar bilir; jquery'de bir döküman üzerinde script kodlarının çalışması için dökümanın tarayıcıya başarılı bir şekilde yüklenmiş olması gerekir. Bunun için jquery kodları aşağıdaki gibi bir ifade içerisine alınır :


$(document).ready(function(){

 // Kodlar buraya yazılır
 
});

HTML web sayfasının çalışma prensipi, en üsteki satırdan(yani 1. satırdan) en alt satıra (yani sonuncu satıra) Doğru tarayıcılar, verileri okur işlem yapar. Body etiketinin üstünde tanımladığımız javaScript komutları bu çalışma prensibine göre önce çalışacak HTML etiketleride javaScript komutlarından sonra çalışacak ve HTML etiketlerine verdiğimiz JavaScript özellikler çalışmayacaktır.

Örnek:

javaScript:


document.getElementById("p1").style.color = "blue";

HTML:


Merhaba dünya

Yukarıda ki örnekte paragrafımızın renk özelliğini mavi verdiğimiz halde mavi renk olmadı. Nedeni javaScript komutları önce çalışmasından dolayı, paragraf etiketi'de daha yüklenmediği için javaScript parağrafımızın rengini değiştirmedi. Bu javaScript komutları, çalışması için parağraf altında belirlenmesi gerekir.

Örnek:


<!DOCTYPE html>

<html>

<body>

Merhaba dünya

<script> document.getElementById("p1").style.color = "blue"; </script> </body> </html>

Yukarıda ki örnekte javaScript kodları çalışacaktır.

javascript kodlarını yine body etiketinin üstünde tanımlayalım. Ekrana merhaba javascript yazsın.

javaScript:


 alert("merhaba javaScript");
 

HTML:


WEBCEBİR BLOG

DERS JAVASCRİPT

Konu: windows onload eventi

önizleme buton

Yukarıda ki örnekte ekrana önce merhaba javaScript yazacak ve tamam düğmesine tıkladığımızda HTML etiketler daha sonra görünecektir. Bu istenmeyen durumdur. onload eventi ile sayfanın hazır olması sağlanır, daha sonra javaScript komutları çalışacaktır.

Örnek:

javaScript:


function renk() {

document.getElementById("p1").style.color = "blue";

}

onload=renk;

HTML:


Merhaba dünya

Örnekte görüldüğü üzere daha önce body etiketini üst tarafında ki javaScript komutlar çalışmamıştı şimdi onload yöntemi ile döküman hazır olduğunda renk fonksiyonun çalışmasına izin veriyor ve parağrafımız mavi renkli oluyor.

Örneğimizi başka bir türde yazalım.

javaScript:


window.onload = function() {

document.getElementById("p1").style.color = "blue";
  
};

Adınız

Eposta

Mesaj

1354

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE