Bu makalemizde, JavaScript'te nesnelerin oluşturulmasını ve kullanımını işleyeceğiz. Bundan önceki iki makalede, içlerinde tek bir değer saklayabilen değişkenleri ve birden fazla değer saklayabilen dizileri görmüştük. Nesneler ise, daha kompleks verileri saklamamıza imkan sağlar.

İşin aslı, nesneler programcılığın kalbi sayılır. Burada göreceğimiz nesne kavramını, bundan sonraki neredeyse tüm konularda genişleterek kullanacağız. En basitten başlayarak, daha karmaşığa doğru örnekler üzerinden birlikte ilerleyelim. Her zamanki gibi öncelikle HTML belgemizi hazırlayalım.












<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="program.js"></script>
</head>
<body>
</body>
</html>

Ardından "program.js" dosyamızı hazırlayalım.

"use strict";

$(document).ready(function(){

    var nesne = new Object();
    
    nesne.Adi = "Ali";
    nesne.Yasi = 40;
    
    $("body").append(nesne.Adi);
    $("body").append("<br>");

    $("body").append(nesne.Yasi);
    
});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Bu örneğimizde, en basit nesne tanımlamasını ve kullanımını görüyoruz. Satır satır gidelim.

    var nesne = new Object();

Burada "nesne" adında bir nesne tanımlıyoruz. "new Object()" söz dizimi ile tarayıcı bunun bir nesne olduğunu anlıyor.

    nesne.Adi = "Ali";
    nesne.Yasi = 40;

Buradaki iki satırda ise nesnemize, biri metinsel diğeri sayısal iki yeni değişken ekliyoruz. Bu şekilde nesnemize istediğimiz kadar değişken ekleyebiliriz. Nesnemiz tüm değişkenlerin değerlerini aynı anda tutacaktır.

    $("body").append(nesne.Adi);

    $("body").append(nesne.Yasi);

Burada da, nesnemize eklediğimiz değişkenlerin değerlerini sayfamıza yazdırıyoruz. Böylece hem nesne tanımlamayı ve içerisine değişken eklemeyi, hem de değişkenlerin değerlerini okumayı öğrendik. Kolay, değil mi? Bu şekilde istediğimiz kadar değişkeni tek bir nesne içerisine gömebiliriz.

Bir önceki makaleden hatırlarsan, "new Array()" yerine "[]" işaretleri ile kısa yoldan dizi tanımlayabileceğimizi görmüştük. Aynı durum nesneler için de geçerlidir. Nesneler için kullanılan işaret ise "{}" şeklindedir. Hemen örnek üzerinde görelim. "program.js" dosyamızın içeriğini aşağıdaki gibi değiştirelim.

"use strict";

$(document).ready(function(){

    var nesne = { Adi: "Ali", Yasi: 40 };
    
    $("body").append(nesne.Adi);
    $("body").append("<br>");

    $("body").append(nesne.Yasi);
    
});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Gördüğün gibi işi tek satırda bitirdik ve sonuç değişmedi. Tahmin edebileceğin gibi, nesnelerin bu tarz kullanımı programcılar arasında daha yaygındır.

Nesneler içeriklerinde değişkenler gibi dizileri de barındırabilirler. Bunun için aşağıdaki örneği inceleyelim. "program.js" dosyamızın içeriğini aşağıdaki gibi değiştirelim.

"use strict";

$(document).ready(function () {

    var nesne = {
        Adi: "Ali",
        Yasi: 40,
        Arkadaslari: ["Veli", "Ahmet", "Mehmet"]
    };

    $("body").append(nesne.Adi);
    $("body").append("<br>");

    $("body").append(nesne.Yasi);
    $("body").append("<br>");

    $("body").append(nesne.Arkadaslari[1]);

});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Böylece bir önceki makalemizde kullandığımız dizi örneğini burada nesne içerisinde kullanmış olduk. Nesneler kompleks değerleri saklamakta oldukça kabiliyetli kod bloklarıdır.

Şimdi geldi nesnelerin en kuvvetli özelliğine. Nesneler, içeriklerinde başka nesneleri de barındırabilirler. Hemen bir örnek üzerinde görelim."program.js" dosyamızın içeriğini aşağıdaki gibi değiştirelim.

"use strict";

$(document).ready(function () {

    var nesne = {
        Adi: "Ali",
        Yasi: 40,
        Arkadaslari: ["Veli", "Ahmet", "Mehmet"],
        DigerOzellikleri: {
            Cinsiyeti: "Erkek",
            MedeniHali: "Evli"
        }
    };

    $("body").append(nesne.Adi);
    $("body").append("<br>");

    $("body").append(nesne.Yasi);
    $("body").append("<br>");

    $("body").append(nesne.Arkadaslari[1]);
    $("body").append("<br>");
    
    $("body").append(nesne.DigerOzellikleri.Cinsiyeti);

});

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Gördüğün gibi "nesne" isimli nesnemiz içerisine "DigerOzellikleri" isimli ikinci bir nesne gömdük. 24. satırda da bu alt nesnenin içerisindeki bir değişkeni okuduk. Bu şekilde iç içe istediğimiz kadar nesne gömebiliriz ve ihtiyacımız olan ultra kompleks nesne yapılarını oluşturabiliriz.

Not : "Yasi" veya "DigerOzellikleri" gibi isimlendirmeler senin de kulağını tırmalamaya başladı mı? İsimlendirmelerde Türkçe karakterler kullanamadığımız için programcılıkta değişken, nesne veya fonksiyon isimlendirmelerinde Türkçe kelimeler pek kullanılmaz. Bunların yerine uygun İngilizce kelimeler kullanılır. Henüz giriş seviyesinde olduğumuz için kolay akılda kalması açısından Türkçe isimlendirmeler kullanıyorum ama bir süre sonra bu işkenceden ikimiz de kurtulacağız inşallah.

Bu makalemizde, nesneleri kompleks veri tiplerini saklamada nasıl kullanacağımızı gördük. İşin aslı, nesneler bunlardan çok daha fazlasını yapabilir ancak henüz bu konulara girmek için fazla erken. Zamanı geldikçe, bilgilerimize yeni bilgiler katıyor olacağız inşallah. Şimdilik bu kadarıyla makalemizi noktalayalım ve öğrendiklerimizi özetleyelim.
  • Nesneler kompleks veri tiplerini saklamamıza imkan sağlar.
  • Nesneleri, aynı diziler gibi, uzun ve kısa olmak üzere iki çeşit tanımlama yolu vardır.
  • Nesneler içerisine istediğimiz kadar değişken ekleyebiliriz.
  • Nesneler içerisine istediğimiz kadar dizi ekleyebiliriz.
  • Nesneler içerisine istediğimiz kadar nesne (ve onların da altına nesne...) ekleyebiliriz.
  • İsimlendirmelerde Türkçe kelimeleri kullanma alışkanlığımızı yavaş yavaş bırakmamız gerekiyor.


Yorum Gönder

 
Top