crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Window Objesi Nedir?
Window objesi, JavaScript'in tarayıcıdaki Global Objesi'dir. Tarayıcıda açık olan her sekme, kendine ait bir window nesnesine sahiptir. alert(), setTimeout() veya document gibi sık kullandığımız özellikler aslında window.alert() veya window.document şeklindedir; ancak window global olduğu için başına yazmamıza gerek kalmaz.
2. Pencere ve Ekran Boyutlarını Alma
Kullanıcının ekran çözünürlüğünü veya tarayıcı penceresinin o anki boyutunu bilmek, özellikle dinamik arayüzler tasarlarken hayati önem taşır.
[]window.innerWidth / innerHeight: Tarayıcının içeriği gösteren kısmının (scroll barlar dahil) genişlik ve yüksekliği.
[]window.outerWidth / outerHeight: Tarayıcı penceresinin tüm dış boyutları.- screen.width / screen.height: Kullanıcının monitörünün toplam çözünürlüğü.
JavaScript:
console.log(Tarayıcı İç Genişliği: ${window.innerWidth}px);
console.log(Ekran Çözünürlüğü: ${screen.width}x${screen.height});
// Pencere boyutu değiştikçe takip etmek için:
window.addEventListener("resize", () => {
console.log("Yeni Boyut: " + window.innerWidth);
});3. Location Objesi: URL Yönetimi
window.location objesi, o an bulunduğunuz web sayfasının adresiyle ilgili tüm detayları verir ve sayfayı yönlendirmenizi sağlar.
[]location.href: Sayfanın tam URL adresi.
[]location.hostname: Sadece alan adı (örn: www.google.com).
[]location.pathname: Alan adından sonraki yol (örn: /konu/javascript-rehberi).
[]location.reload(): Sayfayı yeniler.- location.assign("url"): Yeni bir sayfaya yönlendirir.
JavaScript:
// Kullanıcıyı başka bir sayfaya yönlendirme
if (confirm("Haberler sayfasına gitmek ister misiniz?")) {
window.location.href = "https://www.haberler.com";
}4. Navigator Objesi: Tarayıcı Bilgileri
Kullanıcının hangi tarayıcıyı kullandığını, internete bağlı olup olmadığını veya hangi işletim sistemini kullandığını window.navigator üzerinden öğrenebiliriz.
[]navigator.onLine: Kullanıcı internete bağlı mı? (true/false)
[]navigator.userAgent: Tarayıcı ve sistem detaylarını içeren metin.
[]navigator.language: Tarayıcının varsayılan dili.
[]navigator.clipboard: Panoya kopyalama işlemleri için kullanılır.
JavaScript:
if (navigator.onLine) {
console.log("Bağlantı aktif.");
} else {
alert("İnternet bağlantınız koptu!");
}5. History Objesi: Sayfa Geçmişi
window.history, kullanıcının o sekmedeki gezinti geçmişine erişmenizi sağlar. Güvenlik nedeniyle tam olarak hangi sitelere gidildiğini göremezsiniz, ancak ileri/geri komutları verebilirsiniz.
JavaScript:
window.history.back(); // Bir önceki sayfaya gider (Tarayıcı geri butonu gibi)
window.history.forward(); // Bir sonraki sayfaya gider
window.history.go(-2); // 2 sayfa geriye giderPratik Forum Senaryosu: "Yukarı Çık" Butonu
Window objesinin scrollTo metodunu kullanarak sayfanın en başına yumuşak bir geçiş yapabiliriz:
JavaScript:
const yukariButon = document.querySelector("#go-top");
window.addEventListener("scroll", () => {
// 500px aşağı inince butonu göster
if (window.scrollY > 500) {
yukariButon.style.display = "block";
} else {
yukariButon.style.display = "none";
}
});
yukariButon.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth" // Yumuşak kaydırma efekti
});
});Sonuç
Window objesi, JavaScript'in tarayıcı üzerindeki hakimiyet merkezidir. Bu objenin sunduğu imkanları bilmek; ekran boyutuna göre tasarım değiştirmekten, URL parametrelerini okumaya, internet bağlantısını kontrol etmekten sayfa yönlendirmelerine kadar her alanda işinizi kolaylaştıracaktır.