JavaScript Object (Nesne) Kullanımı

քɦօɛռɨӼ ɖɨʐǟʏռ

649

Yorumu Paylaş

Öncelikle belirtmem gerekiyor uzun bir konu olacak anlamadığınız yerleri sorabilirsiniz!

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.

Kod:
var arac={
     marka:"Renault",
     model:"Clio",
     yil:2019,
     renk:"Beyaz",
     yakit:"Dizel",
     saatUcreti:120
 };

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.

Kod:
<!DOCTYPE html>
 <html>
     <head>
         <title>Dragons War</title>
         <meta charset="utf-8">
     </head>
 <body>
  
 <p><u>JavaScript Object Kullanımı / Dragons War</u></p>
  
 <p id="bilgi"></p>
 <p><b>Araç Detayları</b></p>
 <p id="detay"></p>
 <script>
 var arac={
     marka:"Renault",
     model:"Clio",
     yil:2019,
     renk:"Beyaz",
     yakit:"Dizel",
     saatUcreti:120
 };
  
 document.getElementById("bilgi").innerHTML =
 arac.marka + " " + arac.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;
     
 </script>
  
 </body>
 </html>

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

[Resim: c97L1.png]

Ş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.

Kod:
<!DOCTYPE html>
 <html>
     <head>
         <title>Dragons War</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:2019,
     renk:"Beyaz",
     yakit:"Dizel",
     saatUcreti:120,
     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ı:

[Resim: u9Y9D10.png]

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ı;

Kod:
<script>
 var Ogrenci={
 ad:"Dragons",
 soyad:"Wars",
 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.

Kod:
<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=22;
 /*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("Dragons");
 Uye1.setSoyisim("War");
 /*this anahtarı ile tanımlanan değişken doğrudan çarılıyor.*/
 Uye1.yas=22;
 document.write(Uye1.adSoyad());
 document.write("<br>");
 document.write(Uye1.getIsim()+" ");
 document.write("<br>");
 document.write(Uye1.yas);
 </script>