Javascript'de Browser Nesneleri ve DOM ~ Webkolog

Merhaba Webkolog Takipçileri!

Bugün JavaScript'in web sayfalarıyla etkileşim kurma gücünün temelini oluşturan iki önemli kavramı inceleyeceğiz: Tarayıcı Nesneleri (Browser Objects) ve Belge Nesne Modeli (DOM - Document Object Model). Bu ikili, JavaScript'in bir web sayfasını ve kullanıcının tarayıcı ortamını anlayıp manipüle etmesini sağlar. Bir sayfadaki butona tıklamaktan, tarayıcının geçmişini yönetmeye, kullanıcının ekran boyutunu algılamaktan, dinamik içerik oluşturmaya kadar her şey bu nesneler sayesinde mümkün olur. Hazırsanız, web'in kalbine bir yolculuğa çıkalım!

Tarayıcı Nesne Modeli (BOM - Browser Object Model) Nedir?

Tarayıcı Nesne Modeli (BOM), JavaScript'in tarayıcı penceresiyle etkileşim kurmasını sağlayan nesnelerin hiyerarşik bir yapısıdır. BOM, HTML standartlarının bir parçası değildir; farklı tarayıcılar arasında farklılık gösterebilir. Ancak, pratik olarak tüm modern tarayıcılar benzer BOM nesnelerini destekler. BOM'un en üstündeki nesne, her zaman global nesne olan window nesnesidir.

1. `window` Nesnesi

window nesnesi, bir tarayıcı penceresini veya çerçevesini temsil eder. Tarayıcıda JavaScript'in çalıştığı global kapsamı sağlar. Tüm global değişkenler ve fonksiyonlar otomatik olarak window nesnesinin özellikleri ve metotları olur.

Sık Kullanılan Özellikler:

window.innerWidth ve window.innerHeight: Tarayıcı penceresinin içeriğinin genişliğini ve yüksekliğini (piksel cinsinden) döndürür.
window.outerWidth ve window.outerHeight: Tarayıcı penceresinin tamamının (menüler, çubuklar dahil) genişliğini ve yüksekliğini döndürür.
window.pageXOffset ve window.pageYOffset: Sayfanın yatay ve dikey olarak ne kadar kaydırıldığını gösterir.
window.closed: Pencerenin kapalı olup olmadığını kontrol eder (boolean).
window.name: Pencereye verilen ismi okur veya ayarlar.

Sık Kullanılan Metotlar:

window.alert("Mesaj"): Kullanıcıya basit bir uyarı mesajı gösterir.


            window.alert("Merhaba Webkolog!");

window.confirm("Soru"): Kullanıcıya bir onay penceresi gösterir ve seçimine göre true veya false döndürür.


            const onay = window.confirm("Devam etmek istediğinizden emin misiniz?");
            if (onay) {
                console.log("Kullanıcı onayladı.");
            } else {
                console.log("Kullanıcı iptal etti.");
            }

window.prompt("Soru", "Varsayılan"): Kullanıcıdan bir girdi almanızı sağlar.


            const ad = window.prompt("Adınız nedir?", "Misafir");
            console.log("Merhaba, " + ad);

window.open(URL, name, specs, replace): Yeni bir pencere veya sekme açar.


            // Yeni bir sekme açar
            window.open("https://www.webkolog.net", "_blank");

            // Belirli boyutlarda bir pop-up açar
            const popup = window.open("", "WebkologPopup", "width=400,height=300,resizable=yes,scrollbars=yes");
            if (popup) {
                popup.document.write("Merhaba Pop-up!
Bu Webkolog'dan bir pop-up sayfasıdır.");
                // popup.close(); // Pop-up'ı kapatmak için
            }

window.close(): Açılmış pencereyi kapatır (sadece JavaScript ile açılan pencereler için güvenilir çalışır).

window.setTimeout(function, milliseconds): Belirtilen süre sonra tek seferlik bir fonksiyon çalıştırır.


            setTimeout(() => {
                console.log("Bu mesaj 2 saniye sonra görünecek.");
            }, 2000);

window.setInterval(function, milliseconds): Belirtilen aralıklarla tekrarlayan bir fonksiyon çalıştırır.


            let sayac = 0;
            const intervalId = setInterval(() => {
                sayac++;
                console.log(`Geçen süre: ${sayac} saniye`);
                if (sayac >= 5) {
                    clearInterval(intervalId); // 5 saniye sonra durdur
                    console.log("Sayaç durduruldu.");
                }
            }, 1000);

window.scrollTo(x, y), window.scrollBy(x, y): Sayfayı belirli bir konuma kaydırır veya mevcut konumdan belirli bir miktar kaydırır.

2. `navigator` Nesnesi

navigator nesnesi, tarayıcı (browser) hakkında bilgi içerir.

navigator.userAgent: Tarayıcının kullanıcı aracısı (User Agent) string'ini döndürür. Bu, tarayıcının tipini, versiyonunu ve işletim sistemini belirlemek için kullanılabilir.
navigator.appName: Tarayıcının adını döndürür (çoğu modern tarayıcı için "Netscape").
navigator.platform: Tarayıcının çalıştığı platformu (örneğin, "Win32", "MacIntel") döndürür.
navigator.cookieEnabled: Tarayıcıda çerezlerin etkin olup olmadığını gösterir (boolean).
navigator.onLine: Tarayıcının çevrimiçi olup olmadığını gösterir (boolean).

navigator.geolocation: Kullanıcının coğrafi konum bilgilerine erişim sağlar. Bu özellik kullanıcının iznini gerektirir.


            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const lat = position.coords.latitude;
                    const lon = position.coords.longitude;
                    document.body.innerHTML += `Enlem: ${lat}, Boylam: ${lon}`;
                });
            } else {
                console.log("Tarayıcınız coğrafi konumu desteklemiyor.");
            }

3. `screen` Nesnesi

screen nesnesi, kullanıcının ekranı hakkındaki bilgileri içerir.

screen.width ve screen.height: Ekranın toplam genişliğini ve yüksekliğini (piksel cinsinden) döndürür.
screen.availWidth ve screen.availHeight: Tarayıcı penceresinin kullanabileceği ekran alanının genişliğini ve yüksekliğini döndürür (görev çubuğu, dock gibi işletim sistemi elemanlarının kapladığı alan hariç).
screen.colorDepth: Ekranın renk derinliğini döndürür (piksel başına bit sayısı, örn: 24).

4. `history` Nesnesi

history nesnesi, tarayıcının oturum geçmişine erişim sağlar.

history.length: Tarayıcı geçmişindeki sayfa sayısını döndürür.

history.back(): Tarayıcı geçmişinde bir önceki sayfaya döner.


            // Bir önceki sayfaya git
            // history.back();

history.forward(): Tarayıcı geçmişinde bir sonraki sayfaya gider.


            // Bir sonraki sayfaya git
            // history.forward();

history.go(sayi): Geçmişte belirli bir sayıda ileri veya geri gider (pozitif sayılar ileri, negatif sayılar geri).
```
            // İki sayfa geri git
            // history.go(-2);
        
```

5. `location` Nesnesi

location nesnesi, geçerli URL'nin bilgilerini içerir ve tarayıcıyı yeni bir URL'ye yönlendirmek için kullanılabilir.

location.href: Sayfanın tam URL'sini döndürür veya ayarlar.
location.hostname: Host adını (domain) döndürür (örneğin, "www.webkolog.net").
location.pathname: URL'nin yol ve dosya adı kısmını döndürür (örneğin, "/blog/makale.html").
location.protocol: URL'nin protokolünü döndürür (örneğin, "http:", "https:").
location.search: URL'deki sorgu dizesini (? karakteri dahil) döndürür.
location.hash: URL'deki çapa (hash) kısmını (# karakteri dahil) döndürür.

location.assign(URL): Yeni bir URL'ye gider (geçmişe yeni bir giriş ekler).


            // location.assign("https://www.webkolog.net/iletisim");

location.replace(URL): Yeni bir URL'ye gider, ancak mevcut sayfayı tarayıcı geçmişinden kaldırır (geri tuşuyla dönülemez).
```
            // location.replace("https://www.webkolog.net/yeni-sayfa");
        
```

location.reload(): Geçerli sayfayı yeniden yükler.


            // location.reload();

Belge Nesne Modeli (DOM - Document Object Model) Nedir?

Belge Nesne Modeli (DOM), HTML veya XML belgeleri için bir programlama arayüzüdür. Tarayıcı, bir HTML belgesini yüklediğinde, bu belgeyi bir nesne ağacına dönüştürür. Bu ağaçtaki her düğüm (node), belgedeki bir parçayı (bir element, metin, yorum vb.) temsil eder. JavaScript kullanarak bu DOM ağacına erişebilir, üzerinde değişiklik yapabilir, yeni elementler ekleyebilir veya mevcutları kaldırabilirsiniz. Kısacası, DOM, JavaScript'in web sayfasının yapısı, içeriği ve stilini değiştirmesini sağlar.

1. `document` Nesnesi

document nesnesi, mevcut web sayfasını temsil eder. window nesnesinin bir özelliğidir ve HTML belgesinin tamamına erişim noktamızdır.

Sık Kullanılan Özellikler:

document.title: Belgenin başlığını okur veya ayarlar (<title> etiketinin içeriği).


            console.log(document.title);
            document.title = "Webkolog - Yeni Başlık";

document.URL: Belgenin tam URL'sini döndürür.
document.body: Belgenin <body> elementine doğrudan erişim sağlar.
document.cookie: Web sayfasının çerezlerini okur veya yazar.
document.links, document.forms, document.images: Belgedeki tüm link, form veya resim elementlerinin koleksiyonlarını döndürür.

Sık Kullanılan Metotlar (Element Seçme):

document.getElementById('id-degeri'): Belirtilen ID'ye sahip ilk elementi döndürür. ID'ler benzersiz olmalıdır.


            const baslikElementi = document.getElementById('anaBaslik');
            if (baslikElementi) {
                baslikElementi.style.color = "blue";
            }

document.getElementsByClassName('sinif-adi'): Belirtilen sınıf adına sahip tüm elementlerin bir koleksiyonunu (HTMLCollection) döndürür.


            const kartlar = document.getElementsByClassName('urun-karti');
            for (let i = 0; i < kartlar.length; i++) {
                kartlar[i].style.border = "1px solid gray";
            }

document.getElementsByTagName('etiket-adi'): Belirtilen etiket adına sahip tüm elementlerin bir koleksiyonunu döndürür.


            const paragraflar = document.getElementsByTagName('p');
            console.log("Sayfadaki paragraf sayısı:", paragraflar.length);

document.querySelector('CSS-seçici'): Belirtilen CSS seçicisine uyan ilk elementi döndürür.


            const ilkResim = document.querySelector('img'); // Sayfadaki ilk img elementi
            console.log(ilkResim.src);

            const ozelDiv = document.querySelector('#icerikDiv .ozelParagraf'); // ID'si icerikDiv olanın içindeki ozelParagraf sınıfına sahip element
            if (ozelDiv) {
                ozelDiv.textContent = "Bu metin querySelector ile değiştirildi!";
            }

document.querySelectorAll('CSS-seçici'): Belirtilen CSS seçicisine uyan tüm elementlerin bir NodeList'ini döndürür.


            const tumButonlar = document.querySelectorAll('button');
            tumButonlar.forEach(btn => {
                btn.style.backgroundColor = "green";
                btn.style.color = "white";
            });

DOM Manipülasyon Metotları:

document.createElement('etiketAdi'): Yeni bir HTML elementi oluşturur.


            const yeniDiv = document.createElement('div');
            yeniDiv.textContent = "Bu dinamik olarak oluşturulmuş bir div!";
            yeniDiv.id = "yeni-div";
            yeniDiv.style.backgroundColor = "lightyellow";
            yeniDiv.style.padding = "10px";
            document.body.appendChild(yeniDiv); // Oluşturulan elementi body'ye ekle

document.createTextNode('metin'): Yeni bir metin düğümü oluşturur.


            const yeniMetin = document.createTextNode("Merhaba dünya!");
            const pElement = document.createElement('p');
            pElement.appendChild(yeniMetin);
            document.body.appendChild(pElement);

document.write('HTML içeriği'): Belgeye doğrudan HTML içeriği yazar. Ancak sayfa yüklendikten sonra kullanılırsa, mevcut belgenin içeriğini silebilir, bu yüzden dikkatli kullanılmalıdır.

2. Element Nesnesinin Özellik ve Metotları

Yukarıdaki metotlarla seçtiğimiz her bir HTML elementi aslında bir nesnedir ve kendine ait birçok özellik ve metodu vardır.

Sık Kullanılan Özellikler:

element.textContent: Elementin ve alt elementlerinin tüm metin içeriğini döndürür veya ayarlar (HTML etiketlerini göz ardı eder).

element.innerHTML: Elementin içindeki tüm HTML içeriğini döndürür veya ayarlar. HTML etiketlerini de içerir.


            const divIcerik = document.getElementById('anaDiv');
            console.log(divIcerik.innerHTML); // <p>Merhaba</p><span>Dünya</span>
            divIcerik.innerHTML = '<h5>Yeni Başlık</h5>'; // İçeriği tamamen değiştirir

element.value: Form elemanlarının (input, textarea, select) değerini döndürür veya ayarlar.
element.id, element.className: Elementin ID ve sınıf niteliklerini okur veya ayarlar.

element.style: Elementin CSS stil özelliklerine doğrudan erişim sağlayan bir CSSStyleDeclaration nesnesi döndürür.


            const buton = document.getElementById('myButton');
            buton.style.backgroundColor = "purple"; // CSS background-color
            buton.style.fontSize = "18px";          // CSS font-size
            buton.style.padding = "10px 20px";

element.parentNode, element.parentElement: Elementin üst (ebeveyn) düğümünü veya elementini döndürür.
element.childNodes: Elementin tüm alt düğümlerinin (elementler, metin düğümleri, yorumlar vb.) bir NodeList'ini döndürür.
element.children: Elementin sadece alt elementlerinin bir HTMLCollection'ını döndürür.
element.firstChild, element.lastChild: Elementin ilk veya son alt düğümünü döndürür.
element.nextSibling, element.previousSibling: Aynı seviyede sonraki veya önceki kardeş düğümü döndürür.

Sık Kullanılan Metotlar (DOM Manipülasyonu):

element.appendChild(childElement): Yeni bir alt elementi, mevcut elementin sonuna ekler.


            const liste = document.getElementById('urunListesi');
            const yeniMadde = document.createElement('li');
            yeniMadde.textContent = "Yeni Ürün";
            liste.appendChild(yeniMadde);

element.removeChild(childElement): Belirtilen alt elementi kaldırır.


            const kaldirilacakMadde = document.getElementById('eskiMadde');
            if (kaldirilacakMadde && kaldirilacakMadde.parentNode) {
                kaldirilacakMadde.parentNode.removeChild(kaldirilacakMadde);
            }

element.replaceChild(newChild, oldChild): Mevcut bir alt elementi başka bir alt elementle değiştirir.
element.cloneNode(deep): Elementi klonlar. deep değeri true ise alt elementleri de klonlar.

element.setAttribute(attributeName, value): Elementin bir niteliğini ayarlar.


            const resimElementi = document.getElementById('profilResmi');
            resimElementi.setAttribute('src', 'yeni_profil.jpg');
            resimElementi.setAttribute('alt', 'Yeni Profil Resmi');

element.getAttribute(attributeName): Elementin bir niteliğinin değerini döndürür.

element.addEventListener('event', handlerFunction): Bir elemente olay dinleyicisi ekler (örneğin, tıklama, fareyle üzerine gelme, klavye basma).


            const tiklaBanaButon = document.getElementById('tiklaBana');
            tiklaBanaButon.addEventListener('click', () => {
                alert("Butona tıklandı!");
            });

3. Olay Nesnesi (Event Object)

Bir olay (event) tetiklendiğinde, olay dinleyici fonksiyonuna bir olay nesnesi (event object) argüman olarak geçirilir. Bu nesne, olayla ilgili detaylı bilgiler içerir.

e.target: Olayı tetikleyen elementi döndürür.
e.type: Olayın tipini döndürür (örneğin, "click", "keydown").
e.clientX, e.clientY: Fare işaretçisinin tarayıcı penceresine göre X ve Y koordinatlarını verir.
e.screenX, e.screenY: Fare işaretçisinin ekran koordinatlarını verir.
e.keyCode (eski), e.key (yeni): Klavye olaylarında basılan tuşun kodunu veya karakterini verir.
e.altKey, e.ctrlKey, e.shiftKey: Olay anında Alt, Ctrl veya Shift tuşlarının basılı olup olmadığını gösterir (boolean).

e.preventDefault(): Olayın varsayılan davranışını engeller (örneğin, formun gönderilmesini veya linke tıklanınca sayfanın yenilenmesini).


            const formElementi = document.getElementById('iletisimFormu');
            formElementi.addEventListener('submit', (e) => {
                e.preventDefault(); // Formun normal gönderimini engelle
                console.log("Form gönderilmedi, JavaScript ile işlenecek.");
                // Form verilerini al, AJAX ile gönder vb.
            });

e.stopPropagation(): Olayın DOM ağacında yukarı doğru yayılmasını (bubbling) durdurur.

Sonuç

JavaScript'teki Tarayıcı Nesne Modeli (BOM) ve Belge Nesne Modeli (DOM), web sayfalarınızı dinamik, etkileşimli ve kullanıcı dostu hale getirmenin temel araçlarıdır. BOM ile tarayıcı ortamıyla (pencere, geçmiş, konum vb.) etkileşim kurarken, DOM ile HTML belgesinin kendisini manipüle ederiz. Bu nesnelerin özelliklerini ve metotlarını iyi anlamak, modern web geliştirmede ustalaşmanın kilit noktasıdır. Unutmayın, pratik yaparak ve bol bol deneyerek bu konulara hakim olabilirsiniz. Başka bir Webkolog makalesinde görüşmek üzere!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!

29 Eylül 2016 Perşembe