JavaScript, web geliştirmede en sık kullanılan dillerden biridir. Özellikle JavaScript nesneleri (Object), verileri bir arada tutmak, düzenlemek ve gerektiğinde güncellemek için çok güçlü bir yapı sağlar. JavaScript’te nesne, anahtar-değer çiftleri halinde tanımlanır ve bu, bize çok yönlü ve esnek bir yapı sunar.

JavaScript Nesne Nedir?

JavaScript’te nesne, anahtar-değer (key-value) çiftlerinden oluşur. Her anahtar bir özellik adı olarak işlev görür ve ona karşılık gelen değer ile bir özelliği ifade eder. Nesneler, veriyi yapılandırılmış bir şekilde saklamamızı sağlar ve özelliklerine kolayca erişim imkanı sunar. Örneğin, bir kullanıcıyı tanımlayan bir nesne aşağıdaki gibi olabilir:

let kullanici = {
  isim: "Serdar",
  yas: 30,
  gorev: "Developer"
};

Burada kullanici nesnesi, isim, yas, ve gorev gibi özelliklere sahiptir ve bu özelliklerin değerlerine kolaylıkla erişebiliriz

console.log(kullanici.isim); // Çıktı: Serdar
console.log(kullanici.yas);  // Çıktı: 30
console.log(kullanici.gorev);  // Çıktı: Developer

JavaScript Nesne Özellikleri

JavaScript nesneleri, çeşitli kullanım kolaylıkları sunar. Öne çıkan bazı özellikleri şunlardır:

1. Dinamik Yapı: Nesnelere yeni özellikler eklemek veya mevcut özellikleri kaldırmak mümkündür.
2. Güçlü Veri Saklama: Birden fazla veri türünü bir arada saklayabiliriz (string, number, array, vb).
3. Metotlar: Nesneye fonksiyon ekleyerek daha işlevsel hale getirebiliriz.

JavaScript Nesne Kullanımı Örneği

Bu örnekte, bir kullanıcı nesnesi tanımlayarak basit bir kullanıcı kartı oluşturacağız. Modern tasarımla kullanıcı bilgilerini HTML ve CSS kullanarak ekranda göstereceğiz.

HTML Kodu

Öncelikle HTML yapısını oluşturalım. Koyu temaya uygun olması için arka planı siyah, metin rengini ise beyaz olarak belirleyeceğiz.

<div class="user-card" id="userCard"></div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #1e1e1e;
  color: #fff;
  font-family: Arial, sans-serif;
}
.user-card {
  background-color: #333;
  border-radius: 10px;
  padding: 20px;
  width: 250px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.user-card h2 {
  margin: 0 0 10px;
}
.user-card p {
  margin: 5px 0;
}

Yukarıdaki HTML yapısında user-card sınıfı ile kullanıcı kartı için bir stil tanımladık. Arka plan siyah (#1e1e1e) ve kart rengi koyu gri (#333) olarak ayarlandı.

JavaScript Kodu

Şimdi, JavaScript kullanarak bir user nesnesi tanımlayacağız ve bu nesnenin özelliklerini HTML’de göstereceğiz.

let kullanici = {
  isim: "Serdar Karaca",
  yas: 30,
  gorev: "Yazılım Geliştirici",
  konum: "İstanbul",
  showDetails: function() {
    return `Merhaba, ben ${this.isim}, ${this.yas} yaşındayım ve ${this.gorev} olarak çalışıyorum.`;
  }
};

function displayUserCard() {
  const userCard = document.getElementById("userCard");
  userCard.innerHTML = `
    <h2>${kullanici.isim}</h2>
    <p>Yaş: ${kullanici.yas}</p>
    <p>Meslek: ${kullanici.gorev}</p>
    <p>Konum: ${kullanici.konum}</p>
    <p>${kullanici.showDetails()}</p>
  `;
}

displayUserCard();

Bu JavaScript kodunda, kullanici adında bir nesne oluşturduk. kullanici nesnesi isim, yas, gorev, ve konum gibi özelliklere sahip ve bir showDetails adlı metot içeriyor. displayUserCard fonksiyonu ise userCard div’inin içine kullanıcı bilgilerini dinamik olarak yerleştiriyor.

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.