JavaScriptYazılım

JAVASCRIPT’TE WINDOW OBJESİ NEDİR? GENEL BAKIŞ #10

WINDOW OBJESİ NEDİR ?

Hatırlarsanız, derslerimizde daha önceden “alert()” ya da “console.log()” gibi methodlar kullanmıştık.Peki bu methodlar aslında nereden geliyor ? Bu dersimizde bunu öğrenmeye çalışacağız. Yani window objesini öğrenmeye çalışacağız.

Window objesi bizim tarayıcımız üzerinde yapmak istediğimiz işlemleri ve pencerenin özelliklerini taşıyan, aslında bir javascript objesi. Ve bir javascript objesi olduğu içinde, haliyle içinde bir çok özellik ve bir çok method barındırmaktadır. Eğer yapıyı kurup javascript dosyasının içine şunu yazarsak;

console.log(this);

Console’da çıktı olarak karşımıza “Window” adında bir obje gelecektir. Burada this, aslında bizim üzerinde durduğumuz obje demektir. Yani burada bizim Javascript’te ki en genel objemiz aslında window objesidir. Yani aslında biz alert vermek istediğimizde şöyle bir kullanım yapabiliriz;

console.log(this.alert("kodportali"));

ve karşımıza normal bir “alert()” methodu kullanmışız gibi aynı şey sayfada gelir. Aslında biz burada normal “alert()” fonksiyonunu değilde “Window objesinin içindeki alert()” methodunu kullandık. Bu window objesini aynı zamanda şöyle yazarak görüntüleyebiliriz;

console.log(window);

Yine aynı şekilde Console’da window objesini göreceğiz.

JAVASCRIPT’TE WINDOW OBJESİNİN İÇİNDEKİLER

Console’da çıkan window objesinin içini açtığımızda karşımıza bir sürü şey gelecektir. Ve ilk başta karşımızda “alert” methodunu göreceğiz. Yani alert aslında bizim pencere üzerinde işlem yapmamızı sağlayan aslında bir methodumuz ve buda yine window objesinin bir methodudur. Ve bakalım başka ne gibi özelliklerimiz var;

Örneğin “L” harfi bölümünde bizim Location diye bir methodumuz var ve biz onu açarak onun kendi içindede bir obje olduğunu görebiliyoruz. Ve bu objeninde ayrıca “host” , “hostname” , “href” gibi değişik özellikleri bulunur ve değişik methodları bulunur. Örneğin orada location’ın reload adında bir methodu var biz bunu birazdan göreceğiz. Biraz daha incelersek;

Orada “C” harfi bölümünde “Confirm” adında bir methodumuz var. Bu confirmde aslında bizim pencere üzerinde emin misiniz tarzında soruları sormamızı sağlayan bir pop-up açmamızı sağlıyor ve biz bu sayede de işlemlerimizi gerçekleştirebiliyoruz.

Aynı şekilde “P” harfi bölümünde bulunan “Prompt” adında bir methodumuz var. Bu prompt ise kullanıcıdan input almamızı sağlıyor. Yani kullanıcı bir değer giriyor ve biz bu değeri alabiliyoruz. Ve aldığımız değere , cevaba göre işlemlerimizi yapıyoruz.

Window objesinde bir çok özellik var fakat bunların hepsini kullanmamız imkansız. Biz gerektiği yerde işimize yarayan methodu kullanacağız. Şimdi bunların kullanımlarını görelim.

WINDOW METHODLARININ KULLANIMI

1 – Alert : 

Hemen kod örneğinde görelim;

alert("Merhaba Javascript");

Tarayıcımızı açtığımızda ekranda “Merhaba Javascript” yazan bir pop-up çıkıyor.

2- Confirm : 

Sayfa açıldığında bir pop-up çıkar ve altında “OK” ve “Cancel” diye iki seçenek bulunur. Eğer bu confirmi bir değişkene atayıp neye bastığına göre cevap değişkenini Console’a yazdırısanız eğer “OK” a basarsa true , “Cancel” a basarsa false çıktısını alırsınız. Hemen kod örneği görelim;

const cevap = confirm("Emin misiniz?");
console.log(cevap); // Ok'a basarsa true, cancel'a basarsa false çıktısını alırız.

Eğer ben true ya da false olmasına göre bir kontrol yapmak istersem , yani;

const cevap = confirm("Emin misiniz?");
console.log(cevap);
if(cevap){
  console.log("OK'a basıldı.");
}
else {
  console.log("Cancel'a basıldı");
}

Duruma göre Console’da ifadeyi yazar.

3 – Prompt :

Kod örneği üzerinden anlatalım;

const cevap = prompt("2 + 2 = ?");
console.log(cevap);

kodu çalıştırınca ekranda bir pop-up açılır ve ” 2+2 = ? “ diye sorar ve bizden değer girmemizi bekleyip “OK” veya “Cancel”a basmamızı ister. Sonrasında girilen değeri Console’a yazdırabiliriz. Şimdi gelen cevapla bir kontrol ifadesi yazalım;

const cevap = prompt("2 + 2 = ?");
if(cevap == "4"){
   console.log("Doğru cevap");
}
else {
   console.log("Yanlış cevap");
}

Burada kullanıcıdan alınan değere göre eğer cevap 4 ise console’a doğru cevap çıktısını basar fakat yanlış yani 4’ten başka bir şey ise yanlış cevap çıktısını basar.

Evet arkadaşlar bunlar window objesini bazı methodları ve sık sık kullanacağımız methodlar.

Şimdi window objesinin çeşitli özelliklerini görelim;

WINDOW OBJESİNİN ÇEŞİTLİ ÖZELLİKLERİ

Uzun bir kod şablonu yazacağım ve console’da ne çıktıları vereceğini göstereceğim;

let value;

value = window; // window objesini çıktı olarak verir.
value = window.location; // o anki konumunuzu verir sayfa üzerindeki.
value = window.location.host; // host bilgisini verir.
value = window.location.hostname; // host'un kısa hali hostname bilgisini verir.
value = window.location.port; // sayfanın port'unu verir.
value = window.location.href; // o anki url inizi verir tarayıcıda üstte bulabilirsiniz.

if(confirm("sayfa yenilensin mi ?")) { // Buradaki if blokları
  window.location.reload();           // bir confirm sorar ve eğer true ise 
}                                     // sayfayı yeniler. 
else {                                // ama false ise
  console.log("sayfa yenilenmedi");   // Console'a
}                                     // sayfa yenilenmedi yazar
  
value = window.outerHeight; // o anki pencerenin yüksekliğini belirtir.

console.log(value);

BİTİRİŞ

Evet arkadaşlar DOM olaylarına geçmeden önce window objesini genel bir şekilde görmemiz gerekiyordu. Ve güzel bir şekilde methodlarımızı ve window objesinin özelliklerini gördük. Bir sonraki dersimizde görüşmek üzere…

Javascript’te Template Literal ve Date Objesi

Javascript Videolu Eğitim Serisi

Oylamak için tıklayınız :
[Toplam: 0 Puan: 0]
Etiketler

İlgili Makaleler

Bir cevap yazın

Başa dön tuşu
Kapalı

Reklam Engelleyici Algılandı !

Reklam engelleyiciyi kapatarak bize destek olabilirsiniz..