ForumCSDark
ForumCSDark

ID: 86437 Kategori: Javascript Konu Sahibi: The Simtem 2 Yorum 339 Okunma
Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
Etiket
nesne object kullanımı javascript

JavaScript Object (Nesne) Kullanımı
ChromaX Theme
Forum Üyesi

Ömer Faruk
*
77
konular
351
mesajlar
17 Eki 2019
Kayıt Tarihi
108
Forum Puanı
Seviye: 19 [LevelLevelLevel]
Toplam Puan: 1,731
Rütbe 47 / 471
92% kaldı

Rütbe
Aktiviteler 153 / 1731
93% kaldı

Aktiviteler
Deneyim 85
15% kaldı

Deneyim
#1
FCD  19-10-2019, Saat: 19:56
Ö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>

Örnekli kullanımları gösterdim elimden geldiğince kolaylaştırmaya çalıştım öğrenmek için sonuna kadar okuduysanız teşekkür ederim. Smile
<?PHP
Echo "Code is Life";
?>
Beğenenler:
JavaScript Object (Nesne) Kullanımı
ChromaX Theme
Forum Üyesi

Forum Üyesi
*
89
konular
456
mesajlar
4 Eki 2018
Kayıt Tarihi
107
Forum Puanı
Seviye: 21 [LevelLevelLevelLevel]
Toplam Puan: 2,343
Rütbe 52 / 520
91% kaldı

Rütbe
Aktiviteler 187 / 2343
94% kaldı

Aktiviteler
Deneyim 80
20% kaldı

Deneyim
#2
20-10-2019, Saat: 16:30
Teşekkür ederim gerçekten başarılı olmuş Smile
"Uçamıyorsan Kaliteli Otur."
Beğenenler:
JavaScript Object (Nesne) Kullanımı
ChromaX Theme
Forum Üyesi

Forum Üyesi
*
1,717
konular
4,085
mesajlar
27 Eki 2018
Kayıt Tarihi
13
Forum Puanı
Seviye: 48 [Level]
Toplam Puan: 38,641
Rütbe 117 / 1178
92% kaldı

Rütbe
Aktiviteler 1,366 / 38641
98% kaldı

Aktiviteler
Deneyim 14
86% kaldı

Deneyim
#3
30-01-2020, Saat: 10:45
Teşekkür ederiz broom Smile
İnadım inat hep tersine koşarım.'   Wink




-IMANSIZ BARAN HOCA
Beğenenler:



Benzer Konular...
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  JavaScript ile Basit Bir Program Kardelen 0 42 21-06-2020, Saat: 21:21
Son Mesaj: Kardelen
  JavaScript Bilgi Girişi ve Hesaplama Kardelen 0 36 21-06-2020, Saat: 21:17
Son Mesaj: Kardelen
  JavaScript Dilinde Değişken İsimleri Kardelen 0 18 21-06-2020, Saat: 21:17
Son Mesaj: Kardelen
  JavaScript Değişkenlerin Bildirimi: var Deyimi Kardelen 0 22 21-06-2020, Saat: 21:16
Son Mesaj: Kardelen
  JavaScript Yorum (Comment) Satırları Kardelen 0 25 21-06-2020, Saat: 21:16
Son Mesaj: Kardelen
  JavaScript Kontrol ve Karar Verme İşlemleri Kardelen 0 25 21-06-2020, Saat: 21:14
Son Mesaj: Kardelen
  JavaScript Döngü (Loop) Oluşturma Kardelen 0 20 21-06-2020, Saat: 21:13
Son Mesaj: Kardelen

Foruma Git:

Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi

ForumCSDark