JavaScript'te Nesne Oluşturma, Fonksiyonlar ve Metotlar

JavaScript, nesne yönelimli (object oriented) paradigmanın basitleştirilmiş bir şekline dayalı bir programlama dildir.

JavaScript içinde bir nesne özellikleri ile oluşturulur. Bu özellikler JavaScript değişkenleri olabileceği gibi diğer nesneler de olabilir.

Bir nesnenin kendisine özgü fonksiyonları olabilir. Bu fonksiyonlar nesneye yönelik programlama terminolojisinde "metotlar" olarak isimlendirilir.

Nesneler (Objects) ve Özellikler (Properties)

Bir JavaScript nesnesinin kendisine özgü özellikleri vardır. Bir nesnenin bir özelliğine referans vermek için aşağıdaki basit bağıntıyı kullanabilirsiniz:

nesneAdı.özellikAdı

Burada hem nesne adı ve hem de özellik adı için büyük-küçük harf ayrımı mevcuttur.

Bir nesne özelliği, kendisine atanacak değer ile anlam kazanır. Örneğin otomobili temsil eden bir nesne olduğunu var sayalım. Bu nesneye Oto adını vermiş olalım. Bu durumda,

Oto.marka="Renault" ;

Oto.model="Scenic" ;

Oto.yil=1998 ;

atamaları ile Oto nesnesinin üç özelliğine (property) üç değer (value) atanmış olacaktır.

JavaScript'te Nesneler

Nesneye yönelik programlama modelinde, nesneler, veri ve bu veriyi kullanacak olan fonksiyonların paketlenmiş hali (encapsulated) olarak tanımlanır. Klasik yapısal programlama dillerinde olduğu gibi programa yeni bir takım fonksiyonlar ve değişkenler eklemek yerine nesneye yönelik programlama dillerinde bu işlem bir nesne içinde gerçekleştirilir.

Her nesne sınıf hiyerarşisi içinde bir nesne sınıfına aittir. Bir nesne ait olduğu sınıfın bir görünümüdür ya da bir örneğidir (instance). JavaScript ile uygulama yazarken JavaScript'in yapısı içinde önceden yerleştirilmiş sınıf ve nesnelerden de yararlanabilirsiniz.

Nesneleri ve sınıfları kullanmak için üç farklı olanak mevcuttur. Nesne adları bir küçük harfle başlar; sınıf adları ise büyük harfle başlar.

JavaScript'te hazır bulunan bir nesneyi kullanabilirsiniz. Örneğin window ve document nesneleri bu tür nesnelerdir.

Herhangi bir nesne oluşturmadan bir sınıfa ait özellikleri ve metotları kullanabilirsiniz. Örneğin, Math sınıfının nesne oluşturmadan doğrudan doğruya sınıf üzerinden kullanılacak birçok metodu vardır.

Bir sınıftan bir nesne oluşturabilirsiniz. Örneğin, Date sınıfı içinden bir nesne oluşturarak buna arzu edilen tarihi yerleştirebilirsiniz. Nesneler ait oldukları sınıfa ait tüm işlevsel yeteneklere sahiptirler fakat sadece kendilerine ait veriyi (özellikler) taşırlar.

Nitelik (Property)

Bir nitelik (property) dediğimiz zaman gerçekte söz konusu olan şey nesneye ait bir değerdir. Bir sınıftan üretilmiş her nesne o sınıfın niteliklerini taşır, ancak bu nitelikler o nesnenin kendisine ait özgün değerlere sahiptirler.

Programlama dilleri açısından daha somut olarak konuşacak olursak, nitelik gerçekte bir değişkendir (variable) ve dolayısıyla nesnenin oluşturulduğu dilde bir değişken hangi veri tiplerinde olabiliyorsa nitelikler de aynı veri tiplerinde olabilir.

Niteliklerden bazıları sonradan değiştirilebilir niteliktedir bazıları ise sadece okunabilir nitelikte (read-only) olur. Bunun sonucunda bu tür nitelikler üzerinde bir değişiklik yapılamaz. Nesne adı ile özelliği arasında bir nokta (.) sembolü bulunur. Bir nesne başka bir nesne içinde ise bu durumda nesne adları arasına da nokta (.) sembolü konulmalıdır.

t = document.lastModified;

document.form1.txtOut.value = "MİMAR SİNAN"

Burada lastModified, document nesnesinin sadece okunabilir türde bir niteliğidir. txtOut nesnesinin value niteliği ise değiştirilebilir özelliktedir ve buna değer olarak "MİMAR SİNAN" string'i atanmaktadır.

JavaScript Nesnelerinin Kullanılması

Nesneler dil içinde fonksiyonlardan sonra bir sonraki soyutlaştırma düzeyini temsil eder.

Bir JavaScript programı deyimlerden (statements) oluşur. Deyimler gruplandırılarak fonksiyonları, fonksiyon ve veriler de gruplandırılarak nesneleri oluşturur.

Örneğin frm1 formu üzerindeki txtOut form elemanına bir değer atamak için;

t = window.document.frm1.txtOut.value;

ifadesini kullanabilirsiniz.

JavaScript Nesnelerini Oluşturmak

JavaScript dilinde kullanıcı kendi nesnelerini de oluşturabilir. Aşağıda bu konu bir örnekle açıklanmaktadır.

Basit bir uygulama olarak saat ücreti ile çalışan personelin alacağı ücretleri hesaplayan bir programı nesneye yönelik yaklaşımla oluşturmak isteyelim.

Personel verileri personelin adı ve alacağı saat ücreti ve ödenecek ücret bilgilerinden oluşsun. Personel nesnesini Pers sınıfı ile oluşturalım. Bunun için aşağıdaki yapıcı (constructor) fonksiyon kullanılabilir:

function Pers(ad, saatucret)

{

this.ad = ad;

this.saatucret = saatucret;

this.odeUcret = odeUcret;

}

Pers sınıfı üzerinde ödenecek ücreti hesaplayan odeUcret adlı fonksiyon ise aşağıdaki gibi oluşturulabilir:

function odeUcret(saat)

{

return this.saatucretsaat;

}

Pers sınıfından iki nesne oluşturmak istiyoruz. Pers1 ve Pers2 adlı bu nesneler JavaScript'teki new anahtar sözcüğü yardımı ile,

pers1= new Pers("Hasan",50);

pers2 = new Pers("Berna", 40);

şeklinde oluşturulabilir. Burada Hasan ve Berna adlı personel saat ücretleri 50 ve 40 olarak oluşturulmaktadır.

Programda her personelin çalıştığı saat miktarı ise klavyeden,

s1=parseInt(window.prompt("birinci personelin calistigi saat miktari...","0"))

şeklinde bir komut ile girilmektedir.

Programın tam listesi ve çıktısı aşağıda verilmiştir:

<HTML>

<HEAD>

<TITLE>JScript İlk Uygulama</TITLE>

<SCRIPT LANGUAGE="JAVASCRIPT">

function Pers(ad, saatucret)

{

this.ad = ad;

this.saatucret = saatucret;

this.odeUcret = odeUcret;

}

function odeUcret(saat)

{

return this.saatucretsaat;

}

pers1= new Pers("Hasan",50);

pers2 = new Pers("Berna", 40);

s1=parseInt(window.prompt("birinci personelin calistigi saat miktari...","0"))

p1 = pers1.odeUcret(s1);

s2=parseInt(window.prompt("ikinci personelin calistigi saat miktari...","0"))

p2 = pers2.odeUcret(s2);

document.write("<H3>Personelin Adi="+pers1.ad+"</H3>");

document.write("<H3>Calistigi saat="+s1+"</H3>");

document.write("<H3>Saat Ucreti="+pers1.saatucret+"</H3>");

document.write("<H3>Alacagi Maas="+p1+"</H3>");

document.write("<H3>Personelin Adi="+pers2.ad+"</H3>");

document.write("<H3>Calistigi saat="+s2+"</H3>");

document.write("<H3>Saat Ucreti="+pers2.saatucret+"</H3>");

document.write("<H3>Alacagi Maas="+p2+"</H3>");

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Yukarıdaki örnekte gördüğünüz gibi Hasan'ın saat ücreti 50, Berna'nın saat ücreti ise 40 olarak belirledik. Uygulamayı çalıştırdığınızda ilk olarak birinci personelin çalıştığı saat miktarını giriyoruz.

Şimdi ise ikinci personelin çalıştığı saat miktarını giriyoruz.

Bu bilgileri girdikten sonra birinci ve ikinci personelin alacağı maaş belirlenip ekrana yazılıyor.

Yeni Nesneler Oluşturma

JavaScript'in gerek istemci (client) tarafında gerekse sunucu (server) tarafında kullanılabilecek, önceden tanımlanmış çok sayıda nesnesi mevcuttur. Kullanıcı dilerse kendi nesnelerini de oluşturabilir.

JavaScript'te bir nesnenin sadece bir tek görünümünü oluşturmak istiyorsanız bunu bir nesne başlatıcısı (object initializer) kullanarak gerçekleştirebilirsiniz.

Bir nesnenin çok sayıda görünümünü oluşturmak içinse, önce bir yapıcı fonksiyon (constructor function) oluşturmalı ve daha sonra bu fonksiyonu ve new operatörünü kullanarak bir nesne görünümünü oluşturmalısınız.

Nesne Başlatıcısı ile Nesne Görünümü Oluşturma

Nesne başlatıcısının yazılış biçimi,

var nesneAdı = {nitelik_1:"değer_1",nitelik_2:"değer_2",..,nitelik_n:"değer_n"};

şeklindedir.

Burada nesneAdı yeni oluşturulacak nesnenin ismidir; nitelik_i şeklinde gösterilen niteliklerin her biri nesneyi belirleyen şeylerdir. değer_i şeklinde gösterilenler ise bu niteliklere atanan belirli sabitlerdir.

Bir nesne nesne başlatıcısı ile oluşturulursa JavaScript nesneyi tanımlayan ifadeyi her seferinde yeniden yorumlayacaktır. Nesne başlatıcısı bir fonksiyon içinde tanımlanmışsa fonksiyonun her çağrılışında nesne yeniden oluşturulacaktır.

Oluşturucu Fonksiyon Kullanmak

Nesnelerinizi aşağıda belirtilen üç adımda da oluşturabilirsiniz:

Bir oluşturucu fonksiyon kullanarak nesne tipini tanımlayınız.
new operatörü ile bu nesnenin bir örneğini oluşturunuz.
Nesne tipini tanımlamak için, nesnenin adı, nitelikleri ve metotlarını belirleyen bir fonksiyon oluşturmalısınız.
Oluşturacağınız nesnenin otomobil olduğunu ve buna kısaca oto dediğinizi varsayalım.

Oto nesnesinin nitelikleri, marka, model, yıl ve renk olarak belirlenmiş olsun. Buna göre, aşağıdaki oluşturucu fonksiyon ile bu nesneyi tanımlayabilirsiniz:

function oto(marka, model, yıl,renk) {
this.marka = marka
this.model = model
this.yıl = yıl
this.renk=renk
}
Nesnenin bir örneğini ise aşağıdaki biçimde oluşturabilirsiniz:

otom = new oto("renault", "megane scenic", 1998,"bordo")

oto fonksiyonu yardımıyla daha sonra istediğiniz kadar otomobil nesnesi örneği oluşturabilirsiniz:

oton = new oto("opel", "zafira", 2000,"gri")

otosu = new oto("citroen", "picasso", 2000,"beyaz")

Niteliklerin Nesne Türünde Tanımlanması

Bir nesne tanımlanırken nesne içindeki bir nitelik gene bir nesne olarak tanımlanabilir.

Örneğin sahis adlı bir nesnenin aşağıdaki biçimde tanımlanmış olduğunu var sayalım:

function sahis(ad, yas, cins) {
this.ad = ad
this.yas = yas
this.cins = cins
}
Yukardaki sahis adlı nesnenin bazı örnekleri ise aşağıdaki biçimde oluşturulabilir:

function sahis(ad, yas, cins) {
this.ad = ad
this.yas = yas
this.cins = cins
}

selin=new sahis("selin can",27,"K")
Şimdi oto adlı nesneyi sahis niteliğini de ekleyerek yeniden tanımlayalım:

function oto(marka, model, yıl,renk,sahip) {
this.marka = marka
this.model = model
this.yıl = yıl
this.renk=renk
this.sahis=sahis
}
Buna göre oto nesnesinin örnekleri aşağıdaki biçimde oluşturulabilir:

Oto2 = new oto("citroen", "picasso", 2000,"beyaz",ayse)

Oto3 = new oto("honda", "crv", 2000,"yeşil",selin)

Bu durumda,

oto2.sahis.ad

ifadesi ile oto2'nin sahibinin adı elde edilecek.

Metotlar

Bir metot bir sınıfa ait tüm nesnelerin sahip olabileceği bir fonksiyon olarak tanımlanabilir. Bir sınıfa ait bir metot o sınıfın nesneleri üzerinde işlem görecektir.

Eğer metodun türü public ise bu durumda bu metot (fonksiyon) diğer sınıflardan nesneler tarafından da kullanılabilir. Metotlar kendilerine gönderilecek değerleri almak üzere bazı parametrelere sahip olabilirler. Metotlar çalıştıktan sonra değer de gönderebilirler.

JavaScript dilinde bir metot parametreye sahip olsa da olmasa da, metot isminden sonra parantez sembolleri kullanılır.

JavaScript'te metotların çağrılması tamamen niteliklerin kullanımına benzer; sınıf adından sonra nokta sembolü (.) yazılarak daha sonra metodun adı parantezlerle birlikte kullanılır.

Örnek:

a=Math.round(4.87965);

document.write("Geleceği Yazanlar");

Burada Math sınıfına ait olan round() metoduna 4.87965 parametresi gönderiliyor.

document nesnesine ait olan write metodu ise parametre olarak "geleceği yazanlar" değerini alıyor.

Metotların Tanımlanması

Metot nesne ile ilişkili bir fonksiyondur. Nesne için metot tanımlamak normal fonksiyon tanımlamaktan farklı değildir. Mevcut bir nesne ile ilişkili fonksiyon tanımlamak için kullanılan yazılış biçimi aşağıdaki gibidir:

nesne.metotadı=fonksiyon_adı

Bu metodu çağırmak için gerekli ifade ise aşağıdaki gibidir:

nesne.metotadı(parametreler)

Örnek:
Aşağıda oto adlı nesne tanımlanmıştır:

function oto(marka, model, yıl,renk,sahis) {
this.marka = marka
this.model = model
this.yıl = yıl
this.renk=renk
this.sahis=sahis
}
Bu nesneye ait otoBilgi adlı metodu nesne içine eklemek için nesne tanımına aşağıdaki ifadeyi eklemek gerekecektir:

this.otoBilgi=otoBilgi

otoBilgi adlı fonksiyon ise aşağıda tanımlanmıştır:

function otoBilgi() {
var bilgi = this.yıl + " " + this.marka
+ " " + this.model+" "+this.renk+" "+this.sahis.ad;
document.write(bilgi);
}
Buna göre oto nesnesinin son durumu aşağıdaki gibi olacaktır:

function oto(marka, model, yıl,renk,sahip) {
this.marka = marka
this.model = model
this.yıl = yıl
this.renk=renk
this.sahis=sahis
this.otoBilgi=otoBilgi
}
Bu tanımlamalardan sonra oto1 adlı nesne örneği hakkında bilgi edinmek için,

oto1.otoBilgi()

ifadesini kullanmak yeterli olacaktır.

Nesne örneği ve metot tanımı

<html>
<head>
<TITLE>İÇİNDEKİLER</TITLE>
</head>
<body bgColor="pink" text="darkblue">
<SCRIPT LANGUAGE="JavaScript">
function oto(marka, model, yil,renk,sahis) {
this.marka = marka
this.model = model
this.yil = yil
this.renk=renk
this.sahis=sahis
this.otoBilgi=otoBilgi
}
function otoBilgi() {
var bilgi = this.yil + " " + this.marka
+ " " + this.model+" "+this.renk+" "+this.sahis.ad+" ";
document.write("<H3>"+bilgi+"</H3>");
}
function sahis(ad, yas, cins) {
this.ad = ad
this.yas = yas
this.cins = cins
}
osman=new sahis("Osman uysal",46,"E");
ayse=new sahis("ayse okan",36,"K");
selin=new sahis("selin can",27,"K");
oto1 = new oto("opel", "zafira", 2000,"gri",osman);
oto2 = new oto("citroen", "picasso", 2000,"beyaz",ayse);
oto3 = new oto("honda", "crv", 2000,"yeşil",selin);
oto1.otoBilgi();
oto2.otoBilgi();
oto3.otoBilgi();
</SCRIPT>
</body>

</html>

Ekran Çıktısı;

Fonksiyonlar

Fonksiyonlar pek çok programlama dilinde olduğu gibi JavaScript'te de dilin temel yapı elemanlarından biridir. JavaScript'te bir fonksiyon belirli bir işi gerçekleştirmek üzere bir araya getirilen bir deyimler kümesine verilen addır. Bir fonksiyonun kullanılabilmesi için önce tanımlanması gerekmektedir.

Fonksiyonların Tanımlanması

JavaScript'te bir fonksiyon aşağıdaki bileşenlerden oluşur:

function anahtar sözcüğü

Fonksiyonun adı

Fonksiyona ait argüman listesi. Bu liste fonksiyon adını izleyen ( ) sembolleri içine ve eleman ayracı olarak virgül sembolü kullanılarak oluşturulur.

JavaScript fonksiyonu içinde yer alacak JavaScript deyimleri ise { } sembolleri içine yerleştirilir.

Bir fonksiyon içindeki bir deyim mevcut uygulama içinde tanımlanmış olan başka bir fonksiyonu çağırabilir.

Aşağıda f_yaz adlı bir JavaScript fonksiyonunu görüyorsunuz:

function f_yaz(string1) {

document.write("<HR><P>" + string1)

}

Bu fonksiyon string türündeki tek argümanını alarak bunu aktif belge üzerine yazdırıyor. Bu fonksiyonu tanımlayan ve kullanan bir HTML-JavaScript kodu ise aşağıda verilmiştir:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<H3>JAVASCRIPT UYGULAMALARI</H3>

<SCRIPT LANGUAGE="JAVASCRIPT">

function f_yaz(string1)

{

document.write("<H1>"+string1+"</H1>");

}

f_yaz("MIMAR SINAN UNIVERSITESI");

</SCRIPT>

</BODY>

</HTML>

Ekran Çıktısı;

Nesnelerin Fonksiyon Argümanı Olarak Kullanılması

JavaScript'te nesneler bir fonksiyon argümanı olarak kullanılabilir. Aşağıdaki örnek programda renkDeg fonksiyonunun argümanı olan x bir nesnedir.

renkDeg'in çağrılışında,

renkDeg(document)

ifadesi x argümanı yerine document nesnesi geçmektedir.

Aşağıda sayfanın rengini değiştiren fonksiyon örneğini inceleyebilirsiniz:

<HTML>
<HEAD>
<TITLE>FONKSİYON ÇAĞIRMADA NESNE ARGÜMAN</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<PRE><P STYLE="color:white;fontsize=24;font-family='Comic Sans MS',Mistral" ><BLINK>AKTİF PENCERENİN RENGİNİ DEĞİŞTİRME
</BLINK></P>
<SCRIPT Language="JavaScript">

</SCRIPT>
</PRE>
</BODY>

Ekran Çıktısı;

Özyineli Fonksiyonlar

JavaScript'te bir fonksiyon özyineli (rekürsif, İng. Recursive) olabilir. Özyineli fonksiyon kendini çağırabilen fonksiyondur. Örneğin aşağıdaki faktöriyel fonksiyonu bu türde bir fonksiyondur:

function fakt(n)
{
if ((n == 0) || (n == 1))
return 1
else {
result = (n * fakt(n-1) )
return result
}
}
Aşağıdaki HTML-JavaScript uygulaması bu fonksiyonu tanımlamakta ve kullanmaktadır. Bu örnekte faktöriyel hesaplayan özyineli bir JavaScript fonksiyonu ve bu fonksiyonun çağrılmasını göreceğiz:

<html>
<head>
<TITLE></TITLE>
</head>
<BODY>
<H3>JAVASCRIPT UYGULAMALARI</H3>
<SCRIPT LANGUAGE="JAVASCRIPT">
function fakt(n)
{
if ((n == 0) || (n == 1))
return 1
else {
result = (n * fakt(n-1) )
return result
}
}
for(i=5;i<=20;i=i+3)
document.write("<H3>"+i+"!="+fakt(i)+"</H3>");
</SCRIPT>
</BODY>
</html>

Ekran Çıktısı;

Fonksiyon Argümanlarının Dizi Elemanı Olarak Kullanılması

Bir fonksiyonun argümanları bir dizi içinde saklanabilir. Böyle bir durumda aşağıdaki yazılış biçimi kullanılacaktır:

fonksiyonAdı.arguments[i]

Burada fonksiyonAdı parametresi fonksiyonun adını, arguments adlı dizi ise fonksiyon argümanlarını içeren diziyi temsil etmektedir. i indisi ise argümanları birbirinden ayırdetmek üzere kullanılan indis değeridir. i indisinin ilk değeri 0'dır. Buna göre fonksiyona gönderilecek ilk argüman,

fonksiyonAdı.arguments[0]

şeklinde olacaktır. Toplam argüman sayısı ise,

arguments.length

değişkeni içinde saklanacaktır.

Fonksiyon argümanlarının dizi elemanı olarak kullanılması

<HTML>
<HEAD>
<TITLE>JavaScript İlk Uygulama</TITLE>
<H2>20.YUZYIL TURK EDEBIYATININ UNLU SAIRLERI</H2>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
yazSAIRLER("U","attila ilhan","melih cevdet anday","ceyhun atuf kansu","hilmi yavuz");
function yazSAIRLER(par) {
document.write("<" + par + "L>")
for (var i = 1; i < yazSAIRLER.arguments.length; i++)
document.write("<LI>" + yazSAIRLER.arguments[i])
document.write("</" + par + "L>")
}
</SCRIPT>
</BODY>

</HTML>

Ekran Çıktısı;

yazSAIRLER("U","attila ilhan","melih cevdet anday","ceyhun atuf kansu","hilmi yavuz");

deyimi ile yazSAIRLER adlı fonksiyon çağrılmakta ve listedeki ilk eleman olan "U" elemanı par argümanı yerine geçmektedir. Böylece document.write("<" + par + "L>") deyimi ile <UL> ifadesi döküman üzerine yazılarak HTML'in sırasız liste yapısı başlatılacaktır

function yazSAIRLER(par) {
document.write("<" + par + "L>")
for (var i = 1; i < yazSAIRLER.arguments.length; i++)
document.write("<LI>" + yazSAIRLER.arguments[i])
document.write("</" + par + "L>")
}
fonksiyonu içinde for çevrimi i parametresini 1'den 4'e kadar değiştiriyor. Çünkü;

yazSAIRLER.arguments.length=5
'tir.
Böylece,

yazSAIRLER.arguments[1]="attila ilhan"

yazSAIRLER.arguments[2]="melih cevdet anday"

yazSAIRLER.arguments[3]="ceyhun atuf kansu"

yazSAIRLER.arguments[4]="hilmi yavuz"
değerleri atanıyor ve aşağıdaki çıktıda görülen liste oluşturuluyor.

document.write("</" + par + "L>")
komutu ile <UL> etiketi sayesinde liste kapatılır.

Bu Blogda Ara

Öznur Kına Yazılım Notları