javaScript document.ready (dökümanın hazır olması)

JQuery'de geliştiriciler $ (document) .ready (); fonksiyonu ile, Website belgenizin tamamen yüklenip yüklenmediğini ve gerekli tüm öğelerin sayfanızda olup olmadığını kontrol etmekteler.

JQuery'de olan bu işlemin vanilla javascript'de karşılığı nedir?

Bu arada vanilla javascript nedir? diyenler olacaktır onu açıklayalım. "Vanilla JS" kullanımı, jQuery gibi ek kütüphaneler olmaksızın düz JavaScript kullanmanız anlamına gelir.

Webmaster'lar, diğer geliştiricilere, günümüzde pek çok şeyin, ek JavaScript kitaplıklarına ihtiyaç duymadan yapılabileceğini hatırlatmak için bir şaka olarak kullanıyorlar.

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 tümü 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 özellikleri çalışmayacaktır.

ÖRNEK:

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. Yazı rengini mavi yapmamasının sebebi DOM yüklenmeden önce sizin hazırladığınız scriptin çalışmış olduğundan dolayıdır. Web tarayıcılarının HTML belgenizi yukarıdan aşağıya doğru okur, Bu sebeple okuma sırası şu şekilde olacaktır;

html | head | meta | title | script | body | p

Yukarda Turuncu yazılı yerlere dikkat ederseniz önce bizim hazırladığımız script çalışmış oldu. Sonrasında p elementi yüklendi. Yani javaScript aslında olmayan bir p etiketini mavi yapmaya çalıştığı için sonuç başarısız oldu.

Bu yöntemde javaScript komutları, çalışması için parağraf altında belirlenmesi gerekir.

ÖRNEK:

Yukarıda ki örnekte javaScript kodları çalışacaktır. Fakat biz javaScript kodlarımızı head alanında yada harici javaScript dosyasında tanımlamak istiyoruz. Nedeni ise body etiketleri arasına yazdığımız kodlar düsensiz , karmaşık kod görünmesi ve HTML kodları okumamızı zorlaştırması.

DOMContentLoaded

DOMContentLoaded , DOM yüklemeyi bitirdiğinde tetiklenen ancak stil sayfalarının veya resimlerin yüklenmesini beklemeyen bir etkinliktir. Bu bakımdan, jQuery'nin $(document).ready() olayına özdeştir. DOM değiştirilebilir özelliğinde olur olmaz olay çalışır. Örnek kullanım:


document.addEventListener("DOMContentLoaded", function() {

   alert('Döküman hazır!');

});

Belgenin salt JavaScript'e yüklenip yüklenmediğini kontrol etmek için tarayıcılar yol olarak readyState kullanıyor.


document.onreadystatechange = () => {

  if (document.readyState === 'complete') {

    // document ready
  }
};

Belgenin ne zaman hazır olduğunu tespit edebilirsiniz.


let stateCheck = setInterval(() => {

  if (document.readyState === 'complete') {

    clearInterval(stateCheck);

    // document ready
  }

}, 100);

Jquery gibi bir fonksiyon yazabiliriz. İE>8 ve modern tarayıcılar için:


function ready(callback){
    // belge yüklendiğinde

    if (document.readyState!='loading') callback();

    // modern browsers

    else if (document.addEventListener) 

    document.addEventListener('DOMContentLoaded', callback);

    // IE <= 8

    else document.attachEvent('onreadystatechange', function(){

        if (document.readyState=='complete') callback();
    });
}

ready(function(){

    // javascript kodları
    
});

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.

9234

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
WEBCEBİR © 2013 Tüm hakları saklıdır.