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ı
    
});