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:


<p id="p1">Merhaba dünya</p>

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>

<p id="p1">Merhaba dünya</p>


<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:


<h1>WEBCEBİR BLOG</h1>

<h3>DERS JAVASCRİPT</h3>

<p>Konu: windows onload eventi</p>

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:


<p id="p1"> Merhaba dünya </p>

Ö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";
  
};

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET