javaScript Object (Nesne) Kullanımı

5 adet veri tip, 3 adet Object tipi bulunan javaScript dilinde veri tiplerini Number, String, Boolean, Undefined, ve Null (bu da bir object’dir). Object tipini ise fonksiyon, dizi, nesne (object) gibi referanslar oluşturmaktadır. Bu yazımızda JavaScript’te bir Object nasıl oluşturulur ve nasıl kullanılır bunu göreceğiz. Öncelikle Object oluşturma hangi yöntemlerle yapılır buna bakalım.

JavaScript’te nesne oluşturmak için { } süslü parantezler kullanılır.

var arac={ };

var ogrenci={ };

Yukarıdaki şekilde bir tanımlama yapıldığında içinde hiçbir şey bulunmayan arac ve ogrenci nesneleri oluşturulmuş olur.

Şimdi de oluşturulan nesnelere özellik atamasının nasıl yapılacağına bakalım.


var arac={
    marka:"Renault",
    model:"Clio",
    yil:2018,
    renk:"Beyaz",
    yakit:"Dizel",
    saatUcreti:60
};

var arac={

marka:"Renault",

model:"Clio",

yil:2018,

renk:"Beyaz",

yakit:"Dizel",

saatUcreti:60

};

Yukarıdaki tanımlamaya baktığımızda;

Özellik: değer

şeklinde bir atama yapıldığını ve birden fazla özellik eklendiğinde “,” virgül ile ayrıldığını görüyoruz.

Şimdi aşağıdaki örneği inceleyelim. Örneğimizde arac isimli Object (nesne) tanımlaması ve bu nesneye ait özellik tanımlaması yapılarak bu özelliklerin sayfada yazdırılması sağlanmakta.


<!DOCTYPE html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
    </head>
<body>

<p><u>JavaScript Object Kullanımı</u></p>

<p id="bilgi"></p>
<p><b>Araç Detayları</b></p>
<p id="detay"></p>
<script>
var arac={
    marka:"Renault",
    model:"Clio",
    yil:2018,
    renk:"Beyaz",
    yakit:"Dizel",
    saatUcreti:60
};

document.getElementById("bilgi").innerHTML =
arac.marka + " " + arac.model + " model "+arac.yakit+" aracın saatlik kiralama ücreti : "+arac.saatUcreti;
    
document.getElementById("detay").innerHTML=
    "Marka      : "+arac.marka+"<br>"+
    "Model      : "+arac.model+"<br>"+
    "Model Yılı : "+arac.model+"<br>"+
    "Renk       : "+arac.renk+"<br>"+
    "Yakıt Türü : "+arac.yakit+"<br>"+
    "Saat Ücreti: "+arac.saatUcreti;
    
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<body>

<p><u>JavaScript Object Kullanımı</u></p>

<p><b>Araç Detayları</b></p>

var arac={

marka:"Renault",

model:"Clio",

yil:2018,

renk:"Beyaz",

yakit:"Dizel",

saatUcreti:60

};

document.getElementById("bilgi").innerHTML =

arac.marka + " " + arac.model + " model "+arac.yakit+" aracın saatlik kiralama ücreti : "+arac.saatUcreti;

document.getElementById("detay").innerHTML=

"Marka : "+arac.marka+"<br>"+

"Model : "+arac.model+"<br>"+

"Model Yılı : "+arac.model+"<br>"+

"Renk : "+arac.renk+"<br>"+

"Yakıt Türü : "+arac.yakit+"<br>"+

"Saat Ücreti: "+arac.saatUcreti;

</script>

</body>

</html>

Sayfamızı çalıştırdığımızda aşağıdaki görüntü oluşacaktır.

Şimdi de nesnemize metot tanımlaması yapalım. Metot tanımlamasını yukarıdaki örnek üzerinde gerçekleştireceğiz. Nesnemize ucretHesapla isminde bir metot tanımlayacağız. Bu fonksiyon dışarıdan bir parametre alarak çalışacaktır. Dışarıdan gönderilen saat bilgisini saatUcreti ile çarparak ödenecek tutarın hesaplanması görevini üstlenecektir.

Burada altını çizmekte fayda gördüğüm bir hususu belirtmek isterim.

Nesne içindeki özelliklerden biri metot içinde kullanılacaksa bu özellik this anahtar sözcüğü ile kullanılmalıdır. (this.saatUcreti)

Kodlarımıza ve ekran çıktısına göz atalım.


<!DOCTYPE html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
    </head>
<body>

<p><u>JavaScript Object Kullanımı</u></p>

<p id="bilgi"></p>
<p><b>Araç Detayları</b></p>
<p id="detay"></p>
<p id="tutar"></p>
<script>
var arac={
    marka:"Renault",
    model:"Clio",
    yil:2018,
    renk:"Beyaz",
    yakit:"Dizel",
    saatUcreti:60,
    ucretHesapla:function(saat){
        return saat*this.saatUcreti;
    }
};

document.getElementById("bilgi").innerHTML =
arac.marka + " " + arac.model + " model "+arac.yakit+" aracın saatlik kiralama ücreti : "+arac.saatUcreti;
    
document.getElementById("detay").innerHTML=
    "Marka      : "+arac.marka+"<br>"+
    "Model      : "+arac.model+"<br>"+
    "Model Yılı : "+arac.yil+"<br>"+
    "Renk       : "+arac.renk+"<br>"+
    "Yakıt Türü : "+arac.yakit+"<br>"+
    "Saat Ücreti: "+arac.saatUcreti;
    
document.getElementById("tutar").innerHTML="Ödenecek Tutar : "+arac.ucretHesapla(3);
    
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<body>

<p><u>JavaScript Object Kullanımı</u></p>

<p><b>Araç Detayları</b></p>

var arac={

marka:"Renault",

model:"Clio",

yil:2018,

renk:"Beyaz",

yakit:"Dizel",

saatUcreti:60,

ucretHesapla:function(saat){

return saat*this.saatUcreti;

}

};

document.getElementById("bilgi").innerHTML =

arac.marka + " " + arac.model + " model "+arac.yakit+" aracın saatlik kiralama ücreti : "+arac.saatUcreti;

document.getElementById("detay").innerHTML=

"Marka : "+arac.marka+"<br>"+

"Model : "+arac.model+"<br>"+

"Model Yılı : "+arac.yil+"<br>"+

"Renk : "+arac.renk+"<br>"+

"Yakıt Türü : "+arac.yakit+"<br>"+

"Saat Ücreti: "+arac.saatUcreti;

document.getElementById("tutar").innerHTML="Ödenecek Tutar : "+arac.ucretHesapla(3);

</script>

</body>

</html>

Ekran Çıktısı:

Görüleceği üzere ödenecek tutar metot ile hesaplanarak gösterilmiştir.

Şimdi basit bir örnek daha oluşturalım. Bu örneğimizde ogrenci isimli bir object’ e ait özellik ve metot tanımlaması yapacağız. ad ve soyad özelliklerinin yazdırılmasını sağlayacağız. Örneğe ait <script> </script> kodları;


<script>
var Ogrenci={
ad:"Ali",
soyad:"Al",
adSoyad:function(){
 
return this.ad+" "+this.soyad;
}
 
}
 
document.write(Ogrenci.adSoyad());
</script>

var Ogrenci={

ad:"Ali",

soyad:"Al",

adSoyad:function(){

return this.ad+" "+this.soyad;

}

document.write(Ogrenci.adSoyad());

</script>

Başka bir JavaScript nesnesi oluşturma yöntemi de constructor pattern(yapıcı desen) olarak tanımlamak mümkündür. Fonksiyon tanımlama yöntemi ile sınıf oluşturup, oluşturulan sınıf new anahtarı ile nesne olarak türetilir.


<script>
var Uye=function(){
 
/*
var anahtarı ile fonksiyon içinde tanımlanmıştır. fonksiyon dışında çağırma şansımız yok
Uye.isim olarak çağıramayız. Sadece this.degiskenadi şeklinde yapılan bildirimler dışarıdan çağırır.
*/
var isim;
var soyisim;
this.yas=18;
 
/*fonksiyon içinde tanımlanan isim değişkenine dışarıdan değer aktarmak için kullanılır. setter metodu*/
this.setIsim=function(v)
{
isim=v;
}
/*fonksiyon içinde tanımlanan isim değişkenindeki değeri okumak için kullanılır. getter metodu*/
this.getIsim=function()
{
return isim;
}
 
this.setSoyisim=function(v)
{
soyisim=v;
}
 
/*sınıf içinde tanımlanmış bir fonksyion*/
this.adSoyad=function(){
 
return isim+" "+soyisim;
}
 
}
 
var Uye1=new Uye();
 
Uye1.setIsim("hayri");
Uye1.setSoyisim("KOÇ");
 
/*this anahtarı ile tanımlanan değişken doğrudan çarılıyor.*/
Uye1.yas=20;
document.write(Uye1.adSoyad());
document.write("<br>");
document.write(Uye1.getIsim()+" ");
document.write("<br>");
document.write(Uye1.yas);
 
</script>

var Uye=function(){

var anahtarı ile fonksiyon içinde tanımlanmıştır. fonksiyon dışında çağırma şansımız yok

Uye.isim olarak çağıramayız. Sadece this.degiskenadi şeklinde yapılan bildirimler dışarıdan çağırır.

var isim;

var soyisim;

this.yas=18;

/*fonksiyon içinde tanımlanan isim değişkenine dışarıdan değer aktarmak için kullanılır. setter metodu*/

this.setIsim=function(v)

{

isim=v;

}

/*fonksiyon içinde tanımlanan isim değişkenindeki değeri okumak için kullanılır. getter metodu*/

this.getIsim=function()

{

return isim;

}

this.setSoyisim=function(v)

{

soyisim=v;

}

/*sınıf içinde tanımlanmış bir fonksyion*/

this.adSoyad=function(){

return isim+" "+soyisim;

}

var Uye1=new Uye();

Uye1.setIsim("hayri");

Uye1.setSoyisim("KOÇ");

/*this anahtarı ile tanımlanan değişken doğrudan çarılıyor.*/

Uye1.yas=20;

document.write(Uye1.adSoyad());

document.write("<br>");

document.write(Uye1.getIsim()+" ");

document.write("<br>");

document.write(Uye1.yas);

</script>

javaScript Object (Nesne) Kullanımı

Diğer Örnekler:

Yorum yap X

Diğer Örnekler:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin