Javascript'te nesne tipleri aşağıdaki gibidir :
Aşağıda nesneler için genel yazım yapısını gösteren örnek ifadeler görülmektedir :
objectName=new Object(parametreler); //yeni bir nesne yaratılıldı objectName.property="yeni deger"; //nesnenin özelliği değiştirildi. value=objectName.property; //nensenin özelliği başka bir değişkene atandı objectName.methodName(parametreler); //nesnenin methodu kullanıldı
İlk satırda nesne yaratma yapısı örnek verliyor. İkinci satırda yaratılan nesnenin bir özelliği set ediliyor. Üçüncü satırda nesnenin özelliği bir değişkene atanıyor. Dördüncü satırda ise nesnenin bir fonksiyonu (method'u) çağrılıyor.
Javascript ile kendinize yeni nesne tipi yaratabilirisiniz :
function Name(first,last) {
this.first = first;
this.last = last;
this.display = displayName;
}
function displayName() {
alert(this.first + " " + this.last);
}
Yukarıda Name adında bir nesne tipi yaratılmıştır. Bu nesne tipinin first, last adındanüç değişkeni ve display adında bir method'u (fonksiyon) bulunmaktadır. (displayName fonskiyonun ismi display olarak set edilmiştir). Bu tip için bir nesne aşağıdaki gibi yaratılabilir :
var zafer=new name("zafer","teker")
Yukarıdaki nesnenin bir sayfa içerisinde bir kullanım örneği aşağıdaki gibidir :
<html> <head> <script language="Javascript"> function Name(first,last) { this.first = first; this.last = last; this.display = displayName; } function displayName() { alert(this.first + " " + this.last); } var aName = new Name("Mesut","Alioglu"); </script> <body> <form> <input type="button" name="display" value="display" onClick="aName.display()"> </form> </body> </html>
Name tipinde bir nesne tipi yaratılmaktadır. Nesne tipi yaratıldıktan hemen sonraki satırnda Name tipinde bir aName değişkeni yaratılmıştır. Safya içinde bir düğme koyulmuştur ve düğme tıklandığında display fonksiyonu çağrılmaktadır. Dikkat edilirse this.display=displayName şeklinde fonskiyon ataması yapılmıştır. Yani fonksiyon adı displayName ancak dışarıdan çağrılması gereken method adı display'dir. aName nesnesinin display fonskiyonu çağrıldığında ekrana (alert ile) ad soyad bilgisi görüntülenecektir
Aşağıda başka bir yeni yaratılmış nesneyi kullanılabilen bir nesne örneği görülmektedir :
<html> <script language="Javascript"> function name(firstname,lastname){ this.firstname=firstname; this.lastname=lastname; } function Human(name,email) { this.firstname=name.firstname; this.lastname=name.lastname; this.email=email; } function start(){ var myname=new name("Ali","Mesut"); var myhuman=new Human(myname,"mesutali@yahoo.com") alert(myhuman.firstname+" "+ myhuman.lastname+" "+myhuman.email) } </script> <body onLoad="start()"> </body> </html>
name ve Human adında iki yeni nesne yaratılmıştır. Human nesnesi kurucusunda name nesnesini almaktadır.
Sayfa ilk yüklendiğinde (onLoad ile) start fonksiyonu çağrılacaktır. start fonskiyonu önce name nesnesinden bir değişken yaratmaktadır. Ardından Human tipinde bir nesne yaratmakta ve myname değişkenini o nesneye vermektedir. En son satırda human nesnesinden ad , soyad , email bilgileri alert ile ekranda gösterilecektir
Aşağıda bir başka yeni nesneden türeyen nesne örneği görülmektedir :
<html> <head> <script language="javascript"> function human(name,id){ this.name=name; this.id=id; } function engineer(name,id,job){ this.job=job; this.base=human; this.base(name,2); } function ComputerEngineer(name,id){ var job="Bilgisayar Mühendisi"; this.job=job; this.base=engineer; this.base(name,id,job); } function yap(){ serhat=new ComputerEngineer("Serhat","2"); alert("Job: "+serhat.job+" Name: "+ serhat.name+" İd: "+serhat.id); } </script> <body> <form> <input type="button" onClick="yap()" value=" yap "> </form> </body> </html>
Örnekte ComputerEngineer nesnesi engineer nesnesinden, engineer nesnesi ise human nesnesinden türemiştir (inheritance). Yeni nesnenin başka bir nesneden türediğini velirtmek için .base özelliği kullanılınır. base ile üst nesnenin tipi verilir ve base(parameterler) ile o nesnenin kurucusu çağrılır. Örnekte düğme tıklandığında yap fonskiyonu çağrılır. yap fonksiyonu içinde ComputerEngineer nesnesinden bir değişken yaratılır ve ilk değerleri verilir. Daha sonra ekrana görev , ad ve id basılır. görev (job) ComputetEngineer içerinde "Bilgisayar Mühendisi" olarak atanmıştır.
Aşağıda navigator nesnesini kullanan örnek görülmektedir :
<html> <head> <script language="javascript"> function infoNavigator(){ alert(navigator.appName+" "+navigator.appVersion); } </script> </head> <body onLoad="infoNavigator()"> </body> </html>
Sayfa yüklendiğinde infoNavigator fonksiyonu çağrılmaktadır. Bu fonskyion tarayıcının adını ve versiyon bilgisini mesaj olarak ekranda gösterecektir.
Aşağıda window nesnesi kullanılarak yeni pencere açma örneği gözükmektedir :
<html> <head> <script language="javascript"> function openPopup(){ window.open("test.html",'_blank', 'width=500,height=500,scrollbars=auto'); } </script> </head> <body> <form> <input type="button" onClick="openPopup()" value="open popup"></input> </form> </body> </html>
"open popup" yazan düğmeye basıldığı zaman openPopup() fonskiyonu çağrılacaktır. Bu fonksiyon ise 500 px genişiliğinde ve yüksekliğinde , scrollbar'ın otomatik olarak gözükeceği (içerik ekrana sığmaz ise gözükecek) yeni bir pencere açacak ve o pencerede test.html'in gözükmesi sağlayacaktır.
Aşağıda yeni pencere açılıp , içeriğinin document.write ile oluşturulması örneği görülmektedir :
html> <head> <script language="javascript"> function openPopup(){ var newWindow=window.open("",'_blank', 'width=500,height=500'); newWindow.document.writeln("<html><body> <h1>Merhaba</h1></body></html>"); } </script> </head> <body> <form> <input type="button" onClick="openPopup()" value="open popup"></input> </form> </body> </html>
Düğme tıklandığında openPopup fonskiyonu çağrılır. Bu fonksiyon boş bir yeni sayfa açar ve pencerenin içeriğini document.writeln ile oluşturur. Yeni açılan pencerede H1 elementi ile yapılan "Merhaba " başlığı görülecektir
Aşağıda basit bir resim hover (Fare üzerine gelindiğinde farkı, fare üzerinde değilken farklı davranmayı sağlayan özelliklere hover deniyor) örneği görülmektedir :
<html> <head> <script language="javascript"> function over(){ document.test.src="test2.gif"; } function out(){ document.test.src="test1.gif"; } </script> </head> <body> <img src="test1.gif" name="test" onMouseOver="over()" onMouseOut="out()"></img> </body> </html>
test adındaki resmin üzerine fare ile gelindiğinde over fonksiyonu , fare üzerinden ayrıldığında ise out fonskiyonu çalışmaktadır. over fonskiyonu test adındaki resim nesnesinde gözüken resmi test2.gif yapmaktadır. out fonskiyonuda ise test adındaki resim nesnesinde gözüken resmi test1.gif yapmaktadır. Bu şekilde fare resim üzerinde gelindiğinde test2.gif , çekildiğinde (normal durumda) test1.gif resmi gözükecektir.
Aşağıda bir formun yazı alanına erişme örneği görülmektedir :
<html> <head> <script language="javascript"> function viewValue(){ alert(document.forms[0].elements[0].value); } </script> </head> <body onLoad="viewValue()"> <form name="test"> <input type="text" name="testField" value="test"></input> </form> </body> </html>
Sayfa yüklendiğinde viewValue fonskiyonu çağrılacaktır. Bu fonksiyon belge (document) üzerindeki ilk formun (tek form olduğu için ilk eleman) ilk elementine (sadece yazı alanı olduğu için) erişip girilen yazıyı alert ile ekranda gösterecektir. İndex yerine element'lerin adlarıda kullanılabilir.