Java Script Giriş Konu: 4

Nesneler ve Olayları Birleştirelim
Şimdi Javascript açısından Browser nesnelerinin neler olduğunu biliyoruz; Browser’ın Javascript açısından ne gibi olaylar oluşturduğunu ve bu olayları nasıl kullandığımızı küçük örneklerle gördük. Olaylardan yararlanarak Javascript’le nesneleri etkileyen programlar yazabiliriz; fakat bunun için nesnelerin ne gibi özellikleri olduğunu ve bunları nasıl etkileyebileceğimizi de bilmemiz gerekir. Bu bölümde nesnelerin Javascript ile etkilenebilir özelliklerinin neler olduğunu ele alacağız.

Nesnelerin ayrıntılarına girmeden önce bir noktaya açıklık getirelim: Javascript ile bir HTML unsurunu etkileyebilmek, örneğin bir çerçevenin (Frame) içeriğini değiştirebilmek için mutlaka o nesnenin bir olaya karşılık verir olması gerekmez. Çerçeveler HTML etiketleri ile şekillenirler; herhangi bir olaya karşılık vermezler. Dolayısıyla olaylara yanıt vermeyen nesneleri, olaylara yanıt veren nesneler yoluyla etkileyebiliriz; bunun için de bir çok HTML nesnesinin özellikleri bilmemiz gerekir.

Bu açıdan bakınca, olaylara yanıt versin-vermesin, HTML nesnelerimizi, Browser Nesneleri, Belge Nesneleri, Form Nesneleri ve Javascript Dil nesneleri olarak dört ana gruba ayıracağız.


Browser Nesneleri
Browser’ın Javascript dilinde adı Navigator’dır. Ziyaretçinin Browser programı ister Netscape Navigator olsun, isten Internet Explorer olsun, Javascript için Navigator’dır; nesnelerine de Navigator Nesneleri denir. Bunların başında, Browser’ın pencereleri ve Çerçeveler gelir.



Pencere (window)
Şu ana kadar yazdığımız bir çok Javascript kodunda Navigator penceresinin bazı özelliklerini kullandık: width (genişlik), height (yükseklik), toolbar (araç çubuğu) gibi. Şimdi bu özellikleri toplu olarak sıralayalım:

width Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel olarak genişliği.

height Navigator’ın sayfanın görüntülenmesi için ekrandaki temiz alanının piksel olarak yüksekliği.

toolbar Navigator’ın araç çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

menubar Navigator’ın menü çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

scrollbars Navigator’ın sağ ve alt kenardaki kaydırma çubuklarının gösterilmesi (=1) veya gizlenmesi (=0).

resizable Navigator penceresinin büyütülebilir-küçültülebilir olması (=1) veya olmaması (=0).

status Navigator penceresinin alt kenarındaki mesaj çubuğunun gösterilmesi (=1) veya gizlenmesi (=0).

location Navigator penceresinin URL adres çubunun gösterilmesi (=1) veya gizlenmesi (=0).

directories Netscape’de ikinci araç çubunun gösterilmesi (=1) veya gizlenmesi (=0).

copyhistory Mevcut Navigator penceresinin history kaydının (daha önce ziyaret edilen URl adreslerinin tutulduğu çizelgenin) yeni pencereye de kopyalanması.

outerWidth Navigator penceresinin piksel olarak genişliği.

outerHeight Navigator penceresinin piksel olarak yüksekliği.

left Navigator penceresinin ekranın sol kenarından piksel olarak uzaklığı.

top Navigator penceresinin ekranın üst kenarından piksel olarak uzaklığı.

alwaysRaised Navigator penceresinin masaüstünde açık bütün pencerelerin üzerinde kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)

z-lock Navigator penceresinin içi tıklansa bile masaüstünde açık bütün pencerelerin altında kalmasını sağlar. (Sadece Windows ve MacOS’de işler.)

(Evet-Hayır anlamına değer alan özellikleri 1 ve 0 ile belirtebileceğiniz gibi yes (evet) ve no (hayır) ile de belirtebilirsiniz.)

Javascript’in yeni Navigator penceresi açma metodu, window.open() şeklinde yazılır:

yeniPencere = window.open(“yenisayfa.htm”, “YeniPencereninAdı”, “toolbar=1, menubar=yes, resizable=no”)

Burada, yeni pencereye vermek istediğiniz adın tek kelime olduğuna, özelliklerin bir çift-tırnak içinde toplandığına dikkat edin.

Navigator pencereleri, xxxx.close() metodu ile kapatılır. xxxx yerine açık pencerenin adını yazmanız gerekir. Aksi taktirde Javascript komutunu icra ettiğiniz pencerenin kendisi (yani Browser) kapanır. (Bazı Browser’ların bazı sürümleri Javascript tarafından açılmamış Navigator pencerelerinin Javascript ile kapatılmasına izin vermezler.)

Bu nesnenin ve her iki metodun da kullanımını daha önce gördük. Mevcut bir HTML belgesinin adını vermeden, yeni pencereyi açtırıp, içine Belge nesnesini kullanarak HTML komutları yazdırmayı, aşağıda Belge Nesnesi bölümünde ele alacağız.

Bu arada, Browser’ın kendisinin bazı özellikleri ile Javascript açısından nesne olduğunu tekrarlayalım. Bu açıdan Browser’ın Javascript için şu özellikleri vardır:

appname Browser’ın adı

appVersion Browser’ın sürümü

appCodeName Browser’ın kod adı

userAgent Browser’ın Server’a kendisini tanıtırken verdiği isim.

Şu kısa kodu browser.htm adıyla kaydeder ve farklı Browser’larla açarsanız, Netscape ve IE hakkında bilgileri bir kutu içinde görebilirsiniz:

<HTML>

<HEAD>

<SCRIPT LANGUAGE = "JavaScript">

function siziTaniyalim () {

var BrowserAdi = ""

BrowserAdi += "Browser: " + navigator.appName + "\r"

BrowserAdi += "Sürümü:" + navigator.appVersion + "\r"

BrowserAdi += "Kod Adı: " + navigator.appCodeName + "\r"

BrowserAdı += "userAgent: " + navigator.userAgent + "\r"

alert(BrowserAdi)

}

</SCRIPT>

<BODY>

<H1>Browser’ınızı Tanıyor Musunuz?</H1>

<FORM>

<INPUT Type="button" Value="Browser Hakkında Bilgi Ver" OnClick="siziTaniyalim()"

</INPUT>

</FORM>

</BODY>

</HTML>

Mesaj Kutuları
Navigator penceresi, üç tür mesaj kutusu açabilir. Bunlar basit bilgi verme kutusu (alert), doğrulama kutusu (confirm) ve kullanıcının bilgi girme kutusudur (prompt).

Bunların genel yazım kuralı şöyledir:

window.alert(mesaj)

return window.confirm(mesaj)

return window.prompt(mesaj, varsayılanCevap)

Bu üç kutunun çeşitli kullanım şeklini, başka vesilelerle, daha önceki örneklerde gördük.

Çerçeve Nesnesi
Bir Navigator penceresinde birden fazla HTML belgesi görüntüleme imkanı veren çerçeve (Frame) tekniği, tasarım açısından kolaylık sağlar. Bununla birlikte halâ bazı Web ziyaretçilerinin çerçeveden hoşlanmadıkları da gerçektir.

Çerçevelerin, Navigator açısından nasıl bir hiyerarşı işlediğini daha önce gördük. Javascript açısından her bir çerçeve bir pencere sayılır; bunlara atıfta bulunurken şu adlandırma uygulanır:

top En üst pencere. yani Browser’ın kendisi.

parent Herhangi bir Frame’i oluşturan Frameset. Çerçeve çerçeve içinde ise, bir çerçevenin içinde bulunduğu çerçeve parent sayılır. Sayfada bir Frameset varsa, bütün çerçeveler için “top” aynı zamanda “parent” sayılır.

self Çerçevenin kendisi.

Daha önce de belirttiğimiz gibi, Javascript, bir parent (ebeveyn) Frameset’in yavru çerçevelerini 0’dan itibaren numaralar. Yani, sayfanızda iki çerçeveniz varsa, birincisi “parent.frames[0]” ikincisi ise “parent.frames[1]” adıyla bilinir. Herhangi bir çerçevenin içeriğini dinamik biçimde belirlemenin bir örneğini yukarıda gördük. Burada write() metodunu kullanarak, aynı işi nasıl yapabileceğimizi ele alalım.

Şimdi, iki çerçeveli bir Frameset için şu HTML kodunu “anacerceve.htm” adıyla kaydedin:

<html>

<head>

<title>Dinamik Cerceve</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

</head>

<frameset cols="40%,*">

<frame SRC="doc1.htm" NAME="cerceve1">

<frame SRC="doc2.htm" NAME="cerceve2">

</frameset>

<noframes>

<body>

</body>

</noframes>

</frameset>

</html>

Sonra, bu Frameset’in çağrıda bulunduğu “doc1.htm” olarak, şu kodu kaydedin:

<html>

<head>

<title>Cerceve 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<script LANGUAGE="JavaScript1.2">

<!-- Javascript kodunu eski sürüm Browserlardan saklayalim

//fonksiyonumuzu tanimlayalim

function belgeYazdir()

{

parent.frames[1].document.clear();

parent.frames[1].document.write("<HTML><HEAD>" +

"<TITLE>Dinamik Güncelleme Örnegi</TITLE>");

parent.frames[1].document.write(" </HEAD><BODY BGCOLOR="" +

document.form1.bginput.value + "">");

parent.frames[1].document.write("<H1>Güncellenmiş sayfa</H1>");

parent.frames[1].document.write("Bu sayfayı güncelleştiren unsur:" + document.form1.input1.value);

parent.frames[1].document.write("</BODY></HTML>");

parent.frames[1].document.close();

}

// -->

</script>

</head>

<body>

<form NAME="form1">

<input type="hidden" name="bginput" value="white">

<p><input TYPE="text" NAME="input1" size="20"></p>

<p>Bir zemin rengi seçiniz:<br>

<input TYPE="radio" NAME="radio1" VALUE="white" CHECKED

onClick="document.form1.bginput.value=&quot;white& quot;">Beyaz<br>

<input TYPE="radio" NAME="radio1" VALUE="red"

onClick="document.form1.bginput.value=&quot;red&qu ot;">Kırmızı<br>

<input TYPE="radio" NAME="radio1" VALUE="blue"

onClick="document.form1.bginput.value=&quot;blue&q uot;">Mavi<br>

<input TYPE="radio" NAME="radio1" VALUE="green"

onClick="document.form1.bginput.value=&quot;green& quot;">Yeşil<br>

<br>

<input TYPE="button" VALUE="Çerçeve 2'yi güncelle" onClick="belgeYazdir()"> </p>

</form>

</body>

</html>

“doc2.htm” ise oldukça basit:

<html>

<head>

<title>Çerçeve 2</title>

</head>

<body>

<p>Bu sayfa güncellenecek</p>

</body>

</html>

Burada, document.write() metoduyla, hedef çerçevemiz olan iki numaralı çerçevenin (parent.frames[1]) birinci çerçevedeki formdan aldığımız unsurları kullanarak, zemin rengini ve içeriğini değiştiriyoruz. Buradaki örnekten hareketle, çerçevelerinizin içeriğini, bir diğer çerçevede yapılan tercihlere, yapılan arama sonuçlarına veya veri-yönlendirmeli sonuçlara ayırabilir ve dinamik olarak değiştirebilirsiniz.

Belge (Document) Nesneleri
Web sayfasının Javascript dilinde adı Belge’dir. İster metin, ister sadece Javascript kodu, ister sadece grafik içersin, <HTML> diye başlayan ve </HTML> diye biten herşey, Javascript gözüyle belgedir.

Javascript’in gözüyle dünyaya bakarsanız, dünyayı içiçe kaplardan ibaret görürsünüz. En dış kabın adı, Navigator; içindeki ikinci kabın adı Belge’dir. Belge’nin içinde ise, yine birbirinin içinde olmak şartıyla, HTML ile oluşturulan nesneler vardır. Sayfanızda örneğin faturaForm adlı bir form varsa, bu Javascript için document.faturaForm demektir, ziyaretçinin doldurduğu bilgilerle Server’a gönderilmesi için document.faturaForm.submit() metodunun kullanılması gerekir. Bu bölümde bir belgedeki Javascript kodu ile yeni bir belge oluşturup, ya içinde bulunduğumuz sayfanın yerine, ya da yeni bir pencereye yollama yolunu ve HTML nesnelerinin özelliklerini Javascript aracılığıyla nasıl etkileyeceğimize bakalım.

Javascript, içinde bulunduğu HTML belgesi yerine sizin arzu ettiğiniz başka bir belgeyi görüntülüyebilir. Bu belgenin içeriği, ziyaretçinin bir önceki sayfada yaptığı bazı tercihleri yansıtabilir; ziyaretçinin Browser türünden veya kullandığı bilgisayar işletim sisteminin türünden kaynaklanabilir. Aşadığıdaki örnekte, Javascript ziyaretçinin Browser türünü algılayıp, ona göre bir içerik sunuyor. Bu içerik burada olduğu gibi sadece bir hoşgeldin mesajı olmayabilir, Browser türüne uygun içerik olabilirdi. Bu dosyayı, yenibelge01.htm adıyla kaydedip, Browser’ınızda açarsanız, Browser’ınıza uygun mesajı göreceksiniz:

<html>

<head>

<title>Yeni Belge</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

</head>

<SCRIPT LANGUAGE = "JavaScript1.2">var Browser = navigator.appNamedocument.open()if (Browser == "Netscape") {document.write("<h2>Sayın <a href='http://home.netscape.com'>Netscape</a> kullanıcısı</h2><p><p>")}else {if (Browser == "Microsoft Internet Explorer") {document.write("<h2>Sayın <a href='http://www.microsoft.com'>Microsoft</a> Internet Explorer kullanıcısı</h2><p><p>") }else {document.write("<h1>Hoş geldiniz! Ne tür Browser kullandığınızı anlayamadık!</h1><p><p>")}}document.write("Sitemize hoş geldiniz.<p><p>")document.write("Kullandığınız Browser türünü anladık diye şaşırdınız mı?")document.close()</SCRIPT><body>

</body>

</html>

Burada olduğu gibi, yeni belge mevcut belgenin yerine açılmak yerine, Frameset ile oluşturduğunuz çerçeveli bir sayfada arzu ettiğiniz bir çerçevenin içeriğini de oluşturabilir. Bunun için, yukarıda olduğu gibi document.write() metodu yerine,

parent.form[0].document.write()

metodunu kullanmanız gerekir. Burada, birinci çerçeve için köşeli parantez içine 0, ikinci çerçeve için 1, üçüncü çerçeve için 2 yazmanız gerektiğini daha önce belirtmiştik.

Javascript ile oluşturacağınız yeni belge, tamamen başka ve hatta yeni bir Browser penceresi içinde de görüntülenebilir. Bu teknikten, sayfalarınızda açıklayıcı bilgi ve yardım bilgisi vermekte yararlanabilirsiniz; hatta reklam amacıyla bile bu yöntemi kullanabilirsiniz. Aşağıdaki kodu, yenibelge02.htm adıyla kaydederseniz, ziyaretçinin Mouse işaretçisini bağlantılı gibi görünen kelimelerin üzerine getirdiğinde, Javascript anında yeni bir pencere açacak, ve içine arzu ettiğiniz metni yazacaktır:

<html>

<head>

<title>Yeni Belge</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<script LANGUAGE="JavaScript1.2">

function acYardim01(){

yeniPencere = window.open("", "yardim01", "height=300,width=400")

yeniPencere.document.write("<h2>Bu pencerede Konu 1 ile ilgili ek bilgiler olacak</h2>")

yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>")

yeniPencere.document.write("<p><font size=-1><a href="javascript:self.close()">Mevzuya Donmek Icin Tiklayin</a></font>")

yeniPencere.document.close()

}

function acYardim02(){

yeniPencere = window.open("", "yardim02", "height=300,width=400")

yeniPencere.document.write("<h2>Bu pencerede Konu 2 ile ilgili ek bilgiler olacak</h2>")

yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>")

yeniPencere.document.write("<p><font size=-1><a href="javascript:self.close()">Mevzuya Donmek Icin Tiklayin</a></font>")

yeniPencere.document.close()

}

function acYardim03(){

yeniPencere = window.open("", "yardim03", "height=300,width=400")

yeniPencere.document.write("<h2>Bu pencerede Konu 3 ile ilgili ek bilgiler olacak</h2>")

yeniPencere.document.write("<p>Tabii birisi zahmet edip, yazarsa!</p>")

yeniPencere.document.write("<p><font size=-1><a href="javascript:self.close()">Mevzuya Donmek Icin Tiklayin</a></font>")

yeniPencere.document.close()

}

</script>

</head>

<body>

<h1>Sitemizdeki yeni konular aşağıdadır:</h1>

<h2>Konular hakkinda daha fazla bilgi almak icin Mouse isaretcisini konunun uzerine getirin.</h2>

<p><a HREF="#" onMouseOver="acYardim01()">Yeni konu 1</a></p>

<p><a HREF="#" onMouseOver="acYardim02()">Yeni konu 2</a></p>

<p><a HREF="#" onMouseOver="acYardim03()">Yeni konu 3</a></p>

</body>

</html>

Böyle bir pencerede görüntülemek istediğiniz metin, Javascript fonksiyonu ile yazdırılamayacak kadar uzun ise, yeni pencere açtırma kodunuzda şöyle bir değişiklik yapabilirsiniz:

function acYardim01(){

yeniPencere = window.open("yardim01.htm", "yardim01", "height=300,width=400")

}

Bu durumda, Javascript, yeni pencerenin içeriğini kendisi document.write() metodu ile kendisi yazmayacak, pencere içeriği olarak örneğin yardım01.htm adlı dosyayı görüntüleyecektir.

Bu konuyu kapatmadan; yukarıdaki örnek kodda, Javascript’in yeni pencerenin içeriğini kendisi yazdığı acYardim01 adlı fonksiyonda kullandığımız şu koda dikkat edin:

yeniPencere.document.write("<p><font size=-1><a href="javascript:self.close()">Mevzuya Donmek Icin Tiklayin</a></font>")

yeniPencere.document.close()

Burada kullandığımız yerel Javascript kodundaki “self.close()” metodu, Javascript’e belgenin içinde bulunduğu kendi penceresini kapattırmaktadır. (self, kendisi anlamına geliyor.)

Kodumuzu biraz daha geliştirebiliriz. Sözgelimi, MouseOver olayı ile açtığımız ikinci penceresi, MouseOut olayı ile kapatabiliriz. Bunun için, tabiî önce yeni pencere açan fonksiyonlarımızdan sonra bir de pencere kapatan fonksiyon yazmamız gerekir:

function kapat() {

yeniPencere.close();

}

Sonra, yardım pencerelerini açtığımız onMouseOver yönlendirisiyle ilgili kodun hemen arkasına, bu kez kapat() fonksiyonunu çağıran onMouseOut yönlendiricisini yazacağız. Bu örnekteki üç satırdan biri, şöyle olabilir:

<p><a HREF="#" onMouseOver="acYardim01()" onMouseOut="kapat()">Yeni konu 1</a></p>

Bu durumda, açılan yeni pencerelerin içindeki kendi kendisini kapatan kodu iliştirdiğimiz satırı tıklama imkanınız hiç olmayacağı için (neden?), bu kodun satırını, acYardim01() diğer fonksiyonlarımızdan çıkartmamız yerinde olur. Bu yeni şekliyle kodunuzu yenibelge03.htm adıyla kaydedebilirsiniz.

Form Nesneleri
Javascript’in icad edilme nedenlerinin başında, ziyaretçi ile etkileşme gelir; ziyaretçi ise Web tasarımcısı olarak size bilgileri ancak ve sadece Form ile ulaştırabilir. Bu sebeple Javascript açısından HTML’in en önemli nesneleri, Form nesneleridir.

HTML, kendi formunu kendisi oluşturur; bu bakımdan Javascript’e bir görev düşmez. Javascript formdaki bilgilerin işlenmesi sırasında devreye girer. Önce Form nesnesinin özelliklerini hatırlayalım:

<FORM

NAME=formun_adı

ACTION=CGI_programı

ENCTYPE=kodlama_türü

METHOD= GET veya POST

TARGET= pencere_adı

onSubmit=”metodun_adı”>

</FORM>

Bu durumda, tam teşekküllü bir form etiketi şöyle olabilir:

<FORM NAME=”form1” ACTION=”http://www.pcworld.com.tr/cgi-bin/form.pl” METHOD= GET></FORM>

Bu, gerçek bir bilgi derleme formu örneği. Fakat Form nesnesi, Server’a bilgi göndermek amacı dışında da kullanılabilir; bir form nesnesi olan IPNUT’un bir türü olan düğmeleri (button) farklı amaçlı Javascript fonksiyonlarına bağlanabilir.

Form, gerçek amacıyla kullanıldığı durumlarda, Javascript, formdaki bilgilerin Server’a gönderilmeden önce sınanmasını sağlayabilir. Bunun bir örneğini, ziyaretçinin telefon numarasını doğru biçimde yazıp yazmadığını sınadığımız kodda görmüştük. Burada kısaca, Javascript açısından form nesnesinin unsurlarını nasıl tanıyabileceğimizi ele alalım. Benzeri sınama kodları yazarken, bu unsurlara referans yapacağınız zaman, bu unsurların adlarını ve değerlerini bulma yöntemini bilmeniz gerekir.

Form etiketi içindeki bütün unsurlar element adlı dizi-değişkenin içine yazılırlar ve içerikleri form.element[i].value (i, unsurun sıra numarası olmak üzere) metoduyla bilinirler. Diyelim ki “bilgiForm” adlı formunuzun birinci unsuru “<INTPUT TPYE=”text” NAME=”musteriAdi”...> şeklinde bir etiket. Bu etiketin oluşturacağı kutuya ziyaretçinin yazacağı isim, Javascript açısından bilgiForm.elements[0].value veya bilgiForm.musteriAdi.value şeklinde bilinir.

Formun unsurları
Şimdi bir form içeren sayfa örneği yapalım; Javascript ile formun tamamen doldurulmuş olup olmadığını sınayalım. Böylece ziyaretçinin göndereceği formun eksik olduğunu anlamakta geç kalmamış oluruz. Aşağıdaki kodu, form01.htm adıyla kaydedip, Browser’da bir yerini eksik olarak duldurun ve Gönder düğmesini tıklayın.

<html>

<head>

<title>Form</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<script LANGUAGE="JavaScript1.2">

function denetle() {

var num = document.form1.elements.length

var dogruMu = true

for (var i=0; i<num; i++) {

if ((document.form1.elements[i].value == null ||

document.form1.elements[i].value == "") &&

(typeof document.form1.elements[i] != 'submit' ||

typeof document.form1.elements[i] != 'reset'))

{

dogruMu = false

alert("Formdaki " + document.form1.elements[i].name +

" alanı doldurulmamış bulunuyor. Lütfen doldurunuz!")

break }

}

return dogruMu

}

// -->

</script>

</head>

<body>

<form name="form1" method="POST" onSubmit="return denetle()">

<h2>Abone Formu</h2>

<p>Adınız:<br>

<input type=text size=25 maxlength=256 name="Abone_Adı"><br>

İlgi Alanı:<br>

<input type=text size=25 maxlength=256 name="İlgi"><br>

<strong>Oturduğunuz İl: <br></strong>

<input type=text size=25 maxlength=256 name="İl"><br>

<strong>Elektronik Posta Adresiniz: <br></strong>

<input type=text size=25 maxlength=256 name="ElektronikAddress"></p>

<input type=submit value="Gönder"> <input type=reset value="Sil">

</form>

</body>

</html>

Daha önceki örneklerden hatırlıyorsunuz; formun içerdiği bilgilerin gerçekten Server’a gitmesi için gerekli “submit” olayının önünü kesebilmek için kullandığımız “onSubmit” olayına bağlı fonksiyonun “return” ifadesiyle, kendisini görevlendiren olay-yönlendiriciye bir sonuç bildirmesini sağlamak zorundayız. Fonksiyonu biraz irdelersek, başta tanımladığımız Boolean değişkeni “dogruMu” bize doğru-yanlış türü bir sonuç vermek zorunda; ziyaretçi herşeyi doldurmuşsa (yani her alana hiç değilse bir harf yazmışsa!) bu değişkenin değeri değişmiyor. Fakat “if” sorgulamasında düğme olmayan unsurlardan birinin değeri boşsa (yani null veya "" ise) değişkenin değeri false olacaktır. “if” sorgulamasını kaç kere yapacağız? Bu sayıyı, belgenin form elemanlarının yazıldığı dizi-değişkenin büyüklüğünden (document.form1.elements.length) öğreniyoruz, ve num adlı değişkene yazıyoruz. Dolayısıyla Forma yeni alanlar da eklesek, fonksiyonu yeniden yazmamıza gerek yok. Sonra, i adını verdiğimiz bir sayaç, num değişkeninin değerine eşit oluncaya kadar, elements dizi-değişkenindeki (submit ve reset dışındaki) bütün elemanların değerlerin boş olup olmadıklarına bakıyoruz. Bu değerlerden herhangi biri boş ise, if döngüsü o noktada kesiliyor ve ziyaretçiye bir uyarı kutusu ile formu doldurmasını hatırlatıyoruz. Bu arada uyarı kutumuz, boş olan alanın adını da bildiriyor. Bunu, if döngüsü kesildiği andaki i değişkeni değerindeki form elemanının adını alarak yapıyoruz.

Buradaki örnekte düğme (button) nesnesinin Click olayını onClick yönlendiricisi ile yakaladık. Form nesnesindeki diğer nesnelerden metin (text) ve metin alanı (textarea) nesneleri, onBlur, onChange, onFocus, onSelect yönlendiricileri ile; işaret kutusu (checkbox) ve radyo düğmesi (radio) onClick yönlendiricisi ile, seçme listesi (select) onBlur, onChange ve onFocus yönlendiricileri ile fonksiyon çağırabilirler.

Javascript fonksiyonlarımızda Form nesnesinin işaretleme kutularından hangisinin işaretlenmiş olduğunu belirlemek işaretli unsurun değerlerini bulabilmek, değiştirebilmek veya başka bir yerde kullanabilmek için önem taşır. Browser, ele aldığı bir HTML sayfasındaki Form nesnesinin unsurlarını ve burada CHECKBOX nesnesini bir dizi-değişkenin içinde tutar; bunlardan işaretlenmiş olanın CHECKED (işaretli) özelliğini True (doğru) yapar. Bu durumdan yararlanarak istediğimiz kutunun işaretli olup olmadığını sorgulayabiliriz. Burada nesnenin “.value” özelliği işe yaramaz; çünkü kutu işaretli olsa da olmasa da “.value” özelliği aynıdır. İşaretleme kutularında bilmek istediğimiz husus, bu nedenle işaretli olup olmadıklarıdır. Örneğin, sayfamızda, “form1” adlı bir formda “isaret01” adlı bir işaret kutusu varsa, bu kutunun işaretli olup olmadığını şu if döngüsü sınayabilir:

if (document.form1.isaret01.checked) {

.......

Bu ifade, kutu gerçekten işaretli arzu ettiğimiz bir işi yapar, değilse yapmaz.

Radyo Düğmesi (Radio)
Ziyaretçinin bir HTML sayfasında bir çok şık’tan birini seçmesini sağlayan radyo düğmesi (radio) isimli işaretleme yönteminde ise, aynı adı taşıyan bütün radyo düğmelerinden biri işaretlenince, Browser diğerlerini işaretlenmemiş hele getirir; dolayısıyla bu düğmenin değeri (.value özelliği) kullanılabilir. Aşağıdaki kodu yazar ve radyo.htm adıyla kaydederek, Browser’da açarsanız, seçtiğiniz radyo düğmesinin değerinin uyarı kutusunda kullanıldığını göreceksiniz.

<HTML>

<HEAD>

<TITLE>Radyo Dugmesi Örnegi</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=windows-1254">

<SCRIPT LANGUAGE = "JavaScript1.2">function radyoDegeri(radyoNesnesi) {var deger = nullfor (var i=0; i<radyoNesnesi.length; i++) {if (radyoNesnesi[i].checked) {deger = radyoNesnesi[i].valuebreak }}return deger}</SCRIPT></HEAD><BODY><FORM name="form1"><p><input type=radio name="sanatci" value="Türkü">Neşet Ertaş</p><p><input type=radio name="sanatci" value="Şarkı">Zeki Müren</p><p><input type=radio name="sanatci" value="Pek anlamadım!">Sezen Aksu</p><input type=button value="Ne tür müzik seviyorum?" onClick="alert(radyoDegeri(this.form.sanatci))"></FORM></BODY></HTML>

HTML kuralları gereği, bir grup oluşturan radyo düğmeleri aynı adı taşırlar. Burada “this” anahtar kelimesi ile içinde bulunduğumuz yani “bu formun,” “sanatcı” dizi-değişkeninin tümüyle fonksiyona gönderilmesini sağlıyoruz. “radyoDegeri” adlı fonksiyonumuz zaten böyle bir öbek bilgi bekliyor ve aldığı tüm radyo düğmesi nesnesine “radyoNesnesi” adını verip, önce büyüklüğüne bakıyor. Bir dizi-değişkenin büyüklüğü eleman sayısıdır; ki bu bizim örneğimizde üçtür. “i” sayacı 0, 1 ve 2 değerleri için sınanıyor ve bunlardan birinin işaretli olması bekleniyor. İşaretli radyo düğmesi bulunduğu anda değeri “deger” değişkenine yazılıyor ve döngü kesiliyor (break). Gerisi, uyarı kutusunun “değer” değişkeni ziyaretçiye göstermesinden ibaret.

Select
Form nesnelerimizden bir diğeri ise SELECT etiketiyle oluşturduğumuz seçme kutusu. NAME, SIZE, ve MULTIPLE özelliklerine sahip olan bu nesne, onBlur, onChange, onFocus olay-yönlendiricileri ile kullanılabilir. SELECT nesnesinin değeri, kendisinin ayrılmaz parçası olan OPTION etiketinin VALUE özelliğinden gelir. Yukarıdaki radyo.htm kodunu, aşağıdaki şekilde değiştirip, sec01.htm adıyla kaydedin:

<HTML>

<HEAD>

<title>Seçme Kutusu Ornegi</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<SCRIPT LANGUAGE = "JavaScript1.2">

function secDegeri(secNesnesi) {

return secNesnesi.options[secNesnesi.selectedIndex].value}

</SCRIPT></HEAD><BODY><FORM name="form1">

<p><SELECT NAME="sanatci" SIZE=1>

<OPTION value="Türkü">Neset Ertas</OPTION><OPTION value="Sarki">Zeki Müren</OPTION><OPTION value="Pek anlamadim!">Sezen Aksu</OPTION></P><input type=button value="Ne tür müzik seviyorum?" onClick="alert(secDegeri(this.form.sanatci))"></FORM></BODY></HTML>

Burada ziyaretçi açısından seçme işlemi, seçme kutusunun sağındaki seçme okuna basarak yapılıyor; fakat bizim açımızdan da önemli bir değişiklik var. Seçilen unsur, SELECT nesnesinin dizi-değişkenine değil, “selectedIndex” adlı endeksin değer (.value) özelliğine yazılıyor. Dolayısıyla, bir if döngüsü ile arama yapmak gerekmiyor; bu değeri uyarı kutusuna sadece ayıklama işlemiyle belirleyip geri gönderiyoruz. Burada dikkat edeceğiniz husus, fonksiyona verilen “bu form” nesnesinin “sanatcı” adlı SELECT nesnesinin bilgi kümesi içinde sadece biri, “selectedIndex” adlı endekse sahiptir. Fonksiyon bu bilgi kümesini “secNesnesi” adıyla ele alıyor ve içindeki “options” dizi-değişkenin ziyaretçinin seçtiği ve dolayısıyla sıra numarası “selectedIndex” olarak işaretlenmiş olanın değerini (.value) alıyor ve bunu doğruca Uyarı kutusuna gönderiyor.

Fakat, HTML’den biliyorsunuz ki, SELECT etiketine MULTIPLE anahtar kelimesini koyarak, ziyaretçinin birden çok seçme yapmasına izin verebilirsiniz. Bu durumda “selectedIndex” işaretini kullanabilir miyiz? Hayır; bu bir değişken olduğuna göre sadece bir değer (seçilen ilk OPTION’ın sıra numarasını) tutacaktır. Fakat SELECT nesnesinin bir de “selected” özelliği vardır ki içinde seçilen bütün OPTION’ların numarası yazılıdır. Son kod örneğimizi bu kez şöyle değiştirelim ve sec02.htm adıyla kaydedelim.

<html>

<head>

<title>Seçme Listesi Ornegi</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<SCRIPT LANGUAGE = "JavaScript1.2">function secDegeri(secilenIsim) { var liste = ""

for (var i=0; i<secilenIsim.length; i++) {

if (secilenIsim.options[i].selected) {

liste += secilenIsim.options[i].text + "<p>"

}

}

yeniPencere = window.open ("", "Seçtikleriniz", "height=200, width=200")

yeniPencere.document.write("<H2>Şu şarkıları seçtiniz:</H2><P><P>")

yeniPencere.document.write(liste)

}

</SCRIPT></HEAD><BODY><FORM name="form1">

<p><SELECT NAME="sanatci" SIZE=4 MULTIPLE>

<OPTION>Neset Ertas</OPTION><OPTION>Zeki Müren</OPTION><OPTION>Sezen Aksu</OPTION>

<OPTION>Kayahan</OPTION><OPTION>Mustafa Sandal</OPTION><OPTION>Müşerref Tezcan</OPTION>

</P><input type=button value="Hangilerini seçtim?" onClick="secDegeri(this.form.sanatci)"></FORM></BODY></HTML>

Burada seçilenlerin listesini yeni bir pencerede açtığımız belgeye yazdırıyoruz. Bu size, bir formun unsurlarını elde ettiğiniz listeyi daha sonraki bir sayfada, HTML unsuru olarak kullanabileceğinizi gösteriyor. Kodu kısaca irdelersek; fonksiyonumuz, for döngüsünün içindeki if döngüsü ile, kendisine ulaşan bilgi kümesinde “selected” olarak işaretlenenleri seçmekte ve bunların metnini (.text), liste değişkenine, aralarına <P> etiketi koyarak yazıyor.

Password
Form nesnesinin Javascript yoluyla mutlaka kullanmak isteyeceğiniz bir ögesi, Password (Parola) nesnesidir. Ziyaretçinin, Password olarak nitelediğiniz INPUT kutusuna yazdığı metin, kendisine * olarak görünür; fakat Browser ve dolayısıyla Javascript bu metni bilir.

Javascript’in ilk sürümlerinde Password nesnesinin değeri Javascript tarafından bilinemezdi; fakat 1.1 sürümü ile Javascript bu nesnenin de bütün kontrolünü ele geçirdi. Aşağıdaki kodu parola.htm adıyla kaydederseniz, Password nesnesinin de değerini elde ederek, kullanabileceğinizi göreceksiniz.

<html>

<head>

<title>Parolayı Görüntüle</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<SCRIPT LANGUAGE = "JavaScript1.2">function parolaNedir()

{

alert("\nisim --->" + document.form1.gizli.name +

"\ndeger --->" + document.form1.gizli.value)

}

</SCRIPT>

</HEAD>

<BODY><FORM NAME="form1">

<BR>

<B>Lütfen parola olarak herhangi bir kelime yazıp düğmeyi tıklayın:</B>

<BR><BR>

<INPUT TYPE="password" NAME="gizli" SIZE="15">

<INPUT TYPE="button" NAME="goster" VALUE="Metni görmek için tiklayin"

onClick="parolaNedir()">

</FORM>

</BODY>

</HTML>

Burada herhangi bir form unsuru gibi, form1’in “gizli” adlı nesnesinin değerini alarak Uyarı kutusunda gösteriyoruz. Gerçek bir programda, bu değeri bir liste ile karşılaştırarak, kullanabilirsiniz. Ancak bu karşılaştırma işleminin ziyaretçinin bilgisayarında değil, Server’da yapılması gerekir; bunun için Password nesnesinin değerinin bir CGI programında veya ASP uygulamasında değerlendirilmesi gerekir. Browser’lar bunu bildikleri için Password nesnesini daima Server’a yollarlar. Bunu sınamak istiyorsanız, yukarıdaki kod Browser’ınızda açıkken, düğmeyi tıklamayın, klavyede Enter tuşuna basın!

Gizli Nesneler (Hidden)
HTML’in INPUT etiketiyle sayfanıza türü Hidden (Gizlenmiş) olan değişkenler koyabilirsiniz. Hidden etiketi, NAME ve VALUE özelliklerine sahiptir. Bu etiketten, genellikle ziyaretçinin Form verilerini değerlendirirken, ziyaretçi sayfa değiştirdiği halde Server’da değeri sabit kalan değişken olarak yararlanabiliriz.