Javascript'te Nesneler

Javascript'te web sayfasını ve browser'ın özelliklerini kontrol etmeniz için nesneler vardır. Örneğin Navigator nesnesi Browser hakkında bilgi öğrenmeniz için kullanılır. Bu nesnenin app özelliği browser'ın adını verir. Bazı nesneler html elementlerine karşılık gelirler. Örneğin sayfanızda form varsa Form nesneside var demektir. Bu formun özelliklerini javascript ile değiştirebilirsiniz. Navigator ve Window nesnesi ise html tag'ine karşılık gelmez. Bu nesneler browser ile ilgili işlemler için kullanılır. Sırayla bu nesneleri ileyeceğiz.

Navigator Nesnesi

Bu nesne browser'a karşılık gelir. Browser hakkında bilgi almak için bu nesne kullanılır. Aşağıdaki örnekte browser'ın adını ve versiyonunu gösteren bir kod bulunmaktadır.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function infoNavigator(){
  5 				alert(navigator.appName+" "+navigator.appVersion);	
  6 			}
  7 		</script>
  8 	</head>
  9 <body onLoad="infoNavigator()">
 10 </body>
 11 </html>

Sayfa yüklenir yüklenmez infoNavigator fonksiyonu çağrılmaktadır. Bu fonksiyon navigatorun adını ve versiyonunu bir mesaj penceresinde göstermektedir. Alert ekrana bir mesaj gösteren bir method'tur.

Window Nesnesi

Bir browser penceresi anlamına gelir. Bir pencere açmak, kapatmak, dialog kutuları açmak için kullanılır. Yukarıdaki örnekte kullanılan alert method'u window nesnesinin bir method'dudur.

Pencere açmak için window nesnesini open method'u kullanılır. Aşağıdaki örnekte bir popup pencere açıyoruz.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function openPopup(){
  5 				window.open("test.html",'_blank','width=500,height=500,scrollbars=auto');
  6 			}
  7 		</script>
  8 	</head>
  9 <body>
 10 	<form>
 11 		<input type="button" onClick="openPopup()" value="open popup"></input>		
 12 	</form>
 13 </body>
 14 </html>

open method'unun ilk parametresi açılacak sayfanın adı, ikinci paramtre sayfanın target'idir. Üçüncü paramtre ise açılacak pencerenin özelliklerinin verilediği paramtredir. Burada özellikler aralarına virgül koyularak verilirler. Eğer toolbar istiyorsanız üçüncü paramtreye toolbar=yes diyeceksiniz. Bunun gibi bir çok özelliği değiştirmeniz mümkündür.

Bir pencereden başka bir pencereyi açtınız. Peki yeni pencereden eski pencerenin özelliklerine nasıl erişeceksiniz. Yeni pencereden opener ile eski pencerenin özelliklerine erişilebilir. Aşağıdaki örnekte açılan pencere açan pencerenin status barına bir yazı yazmaktadır.

  1 <html>
  2 <body>
  3 	<form>
  4 		<input type="button" onClick="open(ScriptOpenerPopup.html','_blank','width=500,height=500')" value="open popup">
  5 		</input>	
  6 	</form>
  7 </body>
  8 </html>

  1 <html>
  2 <body onLoad="opener.status='merhaba popuptan'">
  3 </body>
  4 </html>

Ana pencere bir ScriptOpenerPopup.html dosyasını bir pencerede açmaktadır. ScriptOpenerPopup.html ise yüklenir yüklenmez opener pencerenin (yani ScriptOpenerExample sayfasının) statusbar'ında bir yazı yazıyor.

Message Kutuları

En basit mesaj kutusu ekrana verilen yazıyı yazan alert() method'u ile görüne kutudur. Diğer tip ise tamam ve iptal cevabı alan onaylatma işlemine yarayan confirm methodudur. Aşağıdaki örnekte bir düğme vardır. Düğme tıklandığında confirm kutusu çıkar. Sizden alınan cevabı alert ile ekranda gösterir.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function question(){
  5 				var result=confirm("tamam mı iptal mi ?");
  6 				alert("Cevabın: "+ result);
  7 			}
  8 		</script>
  9 	</head>
 10 <body onLoad="question()">
 11 </body>
 12 </html>

Eğer tamam derseniz cevap true olur. İptal derseniz cevap false olur.Diğer bir mesaj kutusuda kullanıcdan bilgi girişi olan prompt dialog kutusudur. Aşağıdaki örnekte prompt kutusuna girilen yazıyı alert ile gösteren bir örnek görülmektedir.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function question(){
  5 				var result=prompt("Bir şeyler yazın","");
  6 				alert("yazdığın şey: "+ result);
  7 			}
  8 		</script>
  9 	</head>
 10 <body onLoad="question()">
 11 </body>
 12 </html>

Document Nesnesi

Web sayfanızdaki tag'lere karşılık gelen tüm nesneler Document nesnesindedir. Document nesnesi en tepe nesnedir. Document nesnesinin içinde form,frame,link,image vb.. nesneler tutulur. Document nesnesini kullanarak yeni bir dokuman yaratabilir veya web sayfasının herhangi bir yerine kod ekleyebilirsiniz. Bunun için document nesnesinin write ve writeln method'ları kullanılır. Aşağıdaki örnekte açılan pencerede bir h1 başlığı yapıyoruz.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function openPopup(){
  5 				var newWindow=window.open("",'_blank','width=500,height=500');
  6 				newWindow.document.writeln("<html><body><h1>Merhaba</h1></body></html>");
  7 			}
  8 		</script>
  9 	</head>
 10 <body>
 11 	<form>
 12 		<input type="button" onClick="openPopup()" value="open popup"></input>		
 13 	</form>
 14 </body>
 15 </html>

Bu örnekte boş bir pencere açıyoruz. bu pencerenin document nesnesini alıyoruz. Bir pencerenin document'i window nesnesinin bir özelliğidir. window.document şeklinde ulaşılabilir. Açılan pencerenin document nesnesini aldıktan sonra writeln ile html,body ve h1 etiketini yazdırıyoruz. Böylece başlığımız yeni pencerede gözüküyor.

document nesnesinde linklerin, anchor'ların ,image'ların ,form'ların vs.. nesnelerin dizileri tutulur. Örneğin sayfanızdaki ikinci image nesnesine ulaşmak için document.images[1] yazmanız yeterlidir. Veya eğer image etiketin adını biliyorsanız document.imageName şeklinde de erişebilirsiniz. Aşağıdaki örnekte fare image'ın üzerine geldiğinde ikinci image gösteriliyor. Eğer fare image'ın üzerinden ayrılıyorsa ikinci image gösteriliyor.

  1 <html>
  2 	<head>
  3 		<script language="javascript">
  4 			function over(){
  5 				document.test.src="test2.gif";
  6 			}
  7 			function out(){
  8 				document.test.src="test1.gif";
  9 			}
 10 		</script>
 11 	</head>
 12 <body>
 13 	<img src="test1.gif" name="test" onMouseOver="over()" onMouseOut="out()"></img>
 14 </body>
 15 </html>

Fare image'ın üzerine geldiğinde out fonksiyonu çağrılır. document.test test adındaki bir elemente karşılık gelir. Image'a biz test ismini verdiğimiz için document.test image nesnesi olmaktadır. Image nesnesinin src özelliği gösterilecek image'ın adıdır. out fonksiyonu document.test.src="test2.gif" ile ikinci image'ı görünür hale getirir. over ise fare image'ın üzerinden ayrıldığı zaman çağrılır. over fonksiyonuda test1.gif image'nı tekrar görünür hale getirir.

Form Nesnesi

Form nesnesi web sayfasında kullandığınız form'ların özelliklerine erişmek için kullanılır. Form'da bulunana elementlerin nesnelerinide barındırır. Tüm nesneler element dizisinde tutulut. Örneğin document'teki ilk formun ikinci elementine erişmek için

yazmanız gerekir. Aşağıdaki örnekte bir formun ilk elementinin adını ekranda gösteren bir örnek görülmektedir.

  1 <html>
  2 <head>	
  3 	<script language="javascript">
  4 		function viewValue(){
  5 			alert(document.forms[0].elements[0].value);
  6 		}
  7 	</script>
  8 </head>
  9 <body onLoad="viewValue()">
 10 	<form name="test">
 11 		<input type="text" name="testField" value="test"></input>
 12 	</form>
 13 </body>
 14 </html>

Form ilk elemtinin değeri başlangışta test'tir. Sayfa yüklenir yüklenmez viewValue( fonksiyonu çağrılır. Bu fonksiyonda document'teki ilk form'un ilk elementinin value'sü ekranda gösterir.

Form'un bilgileri gönderilmeden form elemtlerini kontrol edebilirsiniz. Bunun içim form tag'in onSubmit özelliğini yakalarsınız. Eğer kurala uygunsa gönderir kurala uygun değilse göndermezsiniz.

  1 <html>
  2 <head>	
  3 	<script language="javascript">
  4 		function check(){
  5 			if(document.forms[0].elements[0].value==""){
  6 				alert("Text Alanı Boş");
  7 				return false;
  8 			}else{
  9 				alert("Form Bilgisi Gönderiliyor");
 10 				return true;
 11 			}
 12 		}
 13 	</script>
 14 </head>
 15 <body>
 16 	<form action="test.jsp" name="test" onSubmit="return check()">
 17 		<input type="text" name="testField"></input>
 18 		<input type="submit" value="submit"></input>
 19 	</form>
 20 </body>
 21 </html>

Form submit edildiğinde check fonksiyonu çağırılır. Eğer text alanı boşsa geriye false döndürülür. Böylece form bilgisi gönderilmez.