JavaScript Nesneler (Objects)

JavaScript’te object (nesne), birden fazla veriyi ve davranışı birlikte tutan yapıdır. Nesneler özellikler (properties) ve metodlar (methods) içerir. Tarayıcı tarafında ise ayrıca Browser/DOM nesneleri (window, document, location, history, …) bulunur.

Temel Yazım

Özellik erişimi: nesne.ozellik | Metod çağrısı: nesne.metod(arg)

1) JavaScript Object Nedir?


const kullanici = {
  id: 45,
  ad: "Mehmet",
  aktif: true,
  selamla() {
    return `Merhaba ${this.ad}`;
  }
};

console.log(kullanici.ad);        // property
console.log(kullanici.selamla()); // method

Püf Nokta: Property vs Method

kullanici.ad bir değer döndürür.
kullanici.selamla() ise bir fonksiyonu çalıştırır.

2) Dot (.) ve Köşeli Parantez ([ ]) Erişimi


const kisi = { ad: "Ayşe", "soy-ad": "Yılmaz" };

console.log(kisi.ad);          // ✅
console.log(kisi["soy-ad"]);   // ✅ (özel karakter varsa şart)

İnce İpucu

Dinamik anahtarlar için de [] gerekir: kisi[degiskenAnahtar]

3) DOM ve Browser Nesneleri

Tarayıcı tarafında JavaScript, Window nesnesi altında çalışan bir ortamda çalışır. En çok kullanılanlar: window, document, location, history, navigator.


console.log(window.innerWidth);        // pencere genişliği
console.log(document.title);           // sayfa başlığı
console.log(location.href);            // tam URL
console.log(history.length);           // geçmiş uzunluğu
console.log(navigator.userAgent);      // tarayıcı bilgisi

4) Modern Örnek: Butona Basınca Yeni Pencere Açmak

Popup Engeli

Modern tarayıcılar, kullanıcı etkileşimi olmadan (click gibi) açılan pencereleri engeller. Bu yüzden window.open genelde bir buton tıklaması içinde çalıştırılmalıdır.

Aşağıdaki örnekte inline onClick yerine modern yaklaşım olan addEventListener kullanılır.


<button id="btnOpen">Pencere Aç</button>
<button id="btnClose">Pencere Kapat</button>


let popup = null;

document.getElementById("btnOpen").addEventListener("click", () => {
  // Güvenlik: noopener/noreferrer (bazı tarayıcılarda özellik stringi ile sınırlı)
  popup = window.open("", "YeniPencere", "width=420,height=260");

  if (!popup) {
    alert("Popup engellendi. Tarayıcı ayarlarından izin verin.");
    return;
  }

  popup.document.write("<h3>Yeni pencere açtınız. Tebrikler!</h3>");
});

document.getElementById("btnClose").addEventListener("click", () => {
  if (popup && !popup.closed) popup.close();
});

Püf Nokta

popup değişkeni açılan pencerenin “referansı”dır. Bu referansla pencereye yazı yazabilir, kapatabilir veya kapalı mı kontrol edebilirsiniz: popup.closed

5) Document Nesnesi: document.write Yerine Ne Kullanmalı?

Dikkat

document.write modern projelerde önerilmez. Sayfayı yeniden oluşturabilir ve DOM’u bozabilir. Bunun yerine DOM’a eleman ekleme yöntemleri kullanılır.


<div id="sonuc"></div>


const sonuc = document.getElementById("sonuc");
sonuc.textContent = "Merhaba! (textContent güvenlidir)";

6) Location Nesnesi

location sayfanın adres bilgilerini verir ve yönlendirme yapılmasını sağlar.


console.log(location.protocol); // "http:" veya "https:"
console.log(location.host);     // "site.com:443"
console.log(location.pathname); // "/sayfa.html"
console.log(location.search);   // "?id=45"


// Yönlendirme:
 // location.href = "/menu.php";

İnce İpucu: URLSearchParams

Query string okumada URLSearchParams çok pratiktir:


const params = new URLSearchParams(location.search);
console.log(params.get("id")); // örn: 45

7) History Nesnesi


function geriGit() {
  history.back();     // history.go(-1) ile aynı
}

function ileriGit() {
  history.forward();  // history.go(1) ile aynı
}

Püf Nokta: SPA Mantığı

Tek sayfa uygulamalarında history.pushState() ve popstate olayı ile sayfa yenilemeden URL değiştirme yapılabilir.

8) Modern JS Püf Noktaları (Çok İşe Yarar)


// Optional chaining (undefined hatalarını azaltır)
const ad = kullanici?.profil?.ad ?? "Bilinmiyor";

// Destructuring
const { id, aktif } = kullanici;

// Object kopyalama (shallow)
const kopya = { ...kullanici, aktif: false };

Eski Tabloyu Güncelleyelim (DOM Karşılıkları)

Aşağıdaki tablo, klasik “HTML elemanı ↔ JS nesnesi” yaklaşımının modern karşılığıdır. (Frame/Applet gibi etiketler artık kullanılmıyor.)

JavaScript / DOM	HTML Karşılığı	Modern Not
window	(Yok)	Tarayıcı penceresi / global ortam
document	<html> / <body>	DOM ağacı buradan yönetilir
HTMLFormElement	<form>	Form elemanları: `form.elements`
HTMLInputElement	<input>	type=text/password/file/... hepsi input
HTMLSelectElement	<select>	`select.value` ile okunur
HTMLTextAreaElement	<textarea>	Uzun metin girdisi
HTMLAnchorElement	<a>	Link: `a.href`
HTMLImageElement	<img>	Resim: `img.src`

Dikkat: Same-Origin (Güvenlik)

Başka bir domain’de açtığınız pencerenin içeriğine her zaman erişemezsiniz. Tarayıcı güvenliği (same-origin policy) bunu sınırlar.

Özet

Nesne = property + method yapısı
DOM/Browser nesneleri: window, document, location, history…
document.write yerine DOM güncelleme tercih edilir
window.open kullanıcı etkileşimi ile çalıştırılmalıdır
Modern ipuçları: optional chaining, destructuring, spread

JS Kod Örnekleri Tüm Örnekler

Sonraki →
Event ve DOM Olayları