Sayfadaki nesnelerini, name parametresiyle mladığımız isimler aracılığıyla çağırabiliriz: document.forms.yeniform gibi. komutlarını da bu kök üzerine yerleştiririz. komutlarını topluca listeledim.

action Formun işlem sayfasına girmesini sağlar.
method Formun metodunu girer (post/get).
reset() bilgilerini siler (resetler).
submit() bilgilerini girer.
acceptCharset İstemcinin (server'ın) desteklediği karakter listesini girer.
elements elemanlarını bir dizi haline getirerek girer.

Bu komutlar üzerinde şimdilik fazla durmayalım, çünkü henüz bu tip bir uygulama yapmaya bilgilerimiz yeterli değil. ASP CGI derslerimizde bu komutları fazlasıyla kullanacağız. Yine de bazılarının işlevini sizler anlamışsınızdır. Çoğu okuyucunun Ziyaretçi Defteri, Bilgi Giriş Formu, Forumu, Arama Motoru yapmak için sabırsızlandığını hatta için için henüz göstermediğim için bana kızdığını biliyorum. :) Ama şunu belirtmeliyim ki bu tip ları sadece ile yapamazsınız. bilgileri saklamaz, depolamaz, veri tabanı oluşturmaz; sadece sayfa yüklüyken değişkenlerinde veri tutabilir. Herşeyi hemen yapmak isteyen arkadaşlar birazcık sabretsin bu sayfanın altındaki bilgileri öğrenmeye çalışsınlar. CGI ASP derslerinde acısını çıkaracağız ama önce bir script dilini çok iyi öğrenmek gerekir.

Bilgi Giriş Elemanları
Bilgi giriş elemanlarının (düğme, metin kutusu, kontrol kutusu,vb.) yapısını derslerimizde görmüştük. O sayfada larının parametreleri de tılmıştı. İstersek o parametreleri koduyla mlayabiliriz. Örneğin metin kutusunun uzunluğunu karakter cinsinden belirleyen size parametresini kodlarıyla mlayalım:

<>
<head>
<title>Size Parametresi,</title>
<script language="">

function uzunluk(x)
{
document.forms.Form1.mesaj.size=x
}

</script>
</head>
<body>

< name="Form1">
Notunuz:<input name="mesaj"><br><br>
<table cellpadding="0" cellspacing="0" border="0" width="400"><tr>
<td><input type="button" onclick="uzunluk(10)" value="Kısa Not"></td>
<td><input type="button" onclick="uzunluk(40)" value="Orta Not"></td>
<td><input type="button" onclick="uzunluk(70)" value="Uzun Not"></td>
</tr></table>
</>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

size parametresi öğrendiklerimizden sadece bir tanesi. Diğer parametreleri de bu şekilde kullanabiliriz. Örneğin maksimum karakter girişini belirlemek için document.forms.Form1.mesaj.maxlength kodundan yararlanabiliriz. Gerisini sizlerin yaratıcılığına bırakayım.

Hatırlarsanız, bir de value parametresi vardı. Bu parametreyle metin kutusuna yazı yazdırabiliyorduk. kodlarıyla bu parametreyi, metin kutusuna yazılı olan ifadeyi değişkenlere aktarmak için kullanabiliriz:

<>
<head>
<title> Sayfası,</title>
<script language="">

function gir()
{
bilgi1.innerHTML=document.forms.kimlik.veri1.value
bilgi2.innerHTML=document.forms.kimlik.veri2.value
bilgi3.innerHTML=document.forms.kimlik.veri3.value
bilgi4.innerHTML=document.forms.kimlik.veri4.value
bilgi5.innerHTML=document.forms.kimlik.veri5.value
}

</script>
</head>
<body>

< name="kimlik">
Adınız:<input name="veri1">
SoyAdınız:<input name="veri2"><br>
Yaşınız:<input name="veri3">
Cinsiyetiniz:<input name="veri4">
Telefonunuz:<input name="veri5"><br><br>
<input type="button" value="Bilgileri Tabloya Gir" onclick="gir()"><br><br>
<table cellpadding="5" cellspacing="0" border="1">
<tr><td width="100">Adı:</td><td id="bilgi1" width="300"> </td></tr>
<tr><td>SoyAdı:</td><td id="bilgi2"> </td></tr>
<tr><td>Yaşı:</td><td id="bilgi3"> </td></tr>
<tr><td>Cinsiyeti:</td><td id="bilgi4"> </td></tr>
<tr><td>Telefonu:</td><td id="bilgi5"> </td></tr>
</table>
</>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Bu uygulamayla bir Bilgi Giriş Formu yaptık aslında. Ama bir farkla, girdiğimiz bilgiler pencere kapatılınca yok oluyor. Buradan şu sonucu çıkartabilirsiniz: bilgileri aktarmaya dönüştürmeye yarar ancak o bilgileri saklamaya yaramaz. Bunun için veri tabanı gereklidir bu veri tabanını CGI ASP derslerimizde oluşturacağız. Sanırım şimdi daha iyi anlaşıldı.

Veri tabansız da birçok şey yapılabiliniyor. Son uygulamamızı anlayan arkadaşlar rahatlıkla basit bir hesap makinesi yapabileceklerdir. Normal metin kutusu düğmeler yerine resimler de kullanılabilinir. İsterseniz deneyin, zor bir tarafı yok. Ders sayfalarının sonunda yer alan Hesap Makineleri örneklerine de bakabilirsiniz.

Kontrol kutularını seçmek için checked parametresini true değeri verebiliriz veya bunu ile document.forms.form1.kontrolkutusu1.checked=true şeklinde ifade edebiliriz. Hatırlayacağınız üzere; radyo kutusunun işlevi gereği sadece birinin seçilmesi için, her kutuya aynı ismi veriyorduk. Bu durumda yukarıda yazıldığı gibi name özelliğini kullanamayız ama id parametresini kullanarak bu sorunu halledebiliriz. Aşağıdaki uygulamaya bakalım.

<>
<head>
<title>Bundylogy Sorusu,</title>
<script language="">

function cevap()
{
if (document.soru.rad3.checked==true) paragraf.innerHTML="En doğru cevabı işaretlediniz. Bravooo!"
else paragraf.innerHTML="Doğru ama en doğru değil, Al Bundy mantığıyla düşünün."
}

</script>
</head>
<body>

< name="soru">
<b>Al Bundy soruyor:</b>Marcy Darcy ? (Doğruluk derecesi en yüksek olanı işaretleyin lütfen…)<br>
<label for="rad1">
<input type="radio" id="rad1" name="radyo"> Part time çalışan bir paperboy'dur.
</label><br>
<label for="rad2">
<input type="radio" id="rad2" name="radyo"> Jefferson Darcy'nin kocasıdır.
</label><br>
<label for="rad3">
<input type="radio" id="rad3" name="radyo"> Bir tavuktur.
</label><br>
<label for="rad4">
<input type="radio" id="rad4" name="radyo"> Materyalist ruhu gelişkin bir banka çalışanıdır.
</label><br>
<label for="rad5">
<input type="radio" id="rad5" name="radyo"> Bundy'lerin komşusudur.
</label><br>
<input type="button" value="Değerlendir" onclick="cevap()">
<p id="paragraf">Doğru seçeneği işaretlediğinizden eminseniz, yukarıdaki düğmeye basın.</p> </>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Sözün özü, tüm parametreleri komut haline getirebiliyoruz. Bunun yanısıra Elemanları için kullanılan başka komutlar da var:

focus() mlanan bilgi giriş aracına odaklanmayı sağlar.
blur() mlanan bilgi giriş aracının odak halinden çıkmasını sağlar.
click() mlanan bilgi giriş aracını tıklamaya yarar.
select() mlanan bilgi giriş aracının seçili hale gelmesini sağlar..

Tüm bu komutların yer aldığı öğretici bir uygulama yapalım:

<>
<head>
<title>Bilgi giriş eleman komutları,</title>
<script language="">

function komut(x)
{
switch(x)
{
case 1: document.form1.metinkutusu.select()
break
case 2: document.form1.metinkutusu.focus()
break
case 3: document.form1.metinkutusu.blur()
break
case 4: document.form1.dugme.click()
}
}

</script>
</head>
<body>

< name="form1">
<input name="metinkutusu" value="metin kutusu">
<input type="button" name="dugme" value="uyarı düğmesi" onclick="alert('Alarm!!!')"><br><br>
<input type="button" value="Metin kutusuna odaklan" onclick="komut(2)"><br>
<input type="button" value="Metin kutusundaki yazıyı seç" onclick="komut(1)"><br>
<input type="button" value="Metin kutusunu seçili halden çı" onclick="komut(3)"><br>
<input type="button" value="Uyarı düğmesine bas" onclick="komut(4)"><br>
</>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Bu uygulamamızı irdeleyelim biraz: select() komutu aracını seçili hale getiriyor odaklıyor. Yani ayrıca odaklamamıza gerek kalmıyor, üzerine blur() komutunu uygularsak, odaklanma kalkıyor ama seçili hal devam ediyor tabi.

Seçenek Kutusu
derslerinde seçenek kutusunun görüntülendiği anlatılmıştı ama kullanıldığı üzerine birşey söylenilmemişti. Şimdi söyleyelim. Seçenek kutusunda kullanıcının işaretlediği seçeneği selectedIndex komutuyla indeks (sıra) numarası cinsinden ifade ediyoruz:

<>
<head>
<title>Seçenek Kutusu İndeksleri,</title>
<script language="">

function sec()
{
var x=document.sira_no.yazar.selectedIndex
alert(x+1)
}

</script>
</head>
<body>

< name="sira_no">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>

<input type="button" value="Kaçıncı Seçenek" onclick="sec()">
</>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Bu uygulama, kullanıcının seçtiği seçeneğin sıra numarasını gösteriyor. selectedIndex komutu ile seçeneğe 0 (sıfır) değeri verdiğinden, uygulamada sıra numarasını x+1 şeklinde ifade ettik.

Seçenek kutusundaki seçenekler options isimli bir dizi oluşturur. İlk seçenek options[0] şeklinde belirtilir. options[0].text ise, ilk seçeneği metinsel değer olarak ifade eder. Önceki uygulamada kullanıcının seçtiği seçeneğin sıra numarasını ifade ediyorduk. Sıra numarası yerine, seçeneği doğrudan ifade edebiliriz?

<>
<head>
<title>Seçenek Kutusu: Seçilen Seçeneği Gösterme,</title>
<script language="">

function sec()
{
var x=document.secenek.yazar.selectedIndex
var y=document.secenek.yazar.options[x].text
alert(y)
}

</script>
</head>
<body>

< name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select>

<input type="button" value="Hangi Seçenek" onclick="sec()">
</>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Ne yaptık? Kullanıcının seçtiği seçeneği sıra sayısı cinsinden ifade ettik. (selectedIndex ile) Sonra seçilen sıra numarasını options dizini text komutu sayesinde metinsel değere dönüştürdük. text yerine index komutu kullansaydık, yine sıra numarası elde edecektik.

Dilersek text komutunu seçeneklerin metnini değiştirmek için kullanabiliriz.

<>
<head>
<title>Seçenek Kutusu Seçenek Değiştirme,</title>
<script language="">

function secenekekle()
{
var x=document.forms.secenek.adsoyad.value
var y=document.secenek.yazar.selectedIndex
document.secenek.yazar.options[y].text=x
}

</script>
</head>
<body>

< name="secenek">
<select name="yazar"
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
Yazar ismi:
<input name="adsoyad" size="80">

<input type="button" value="Seçeneği Değiştir" onclick="secenekekle()">
</>

</body>
</>
[Sayfayı göster] [Temizle] [İlk haline getir]

Seçenek kutusunu düğmeyle beraber kullanmak zorunda değiliz. Seçenek kutusunda başka bir seçeneği işaretlediğimiz zaman işlem yapılacaksa onchange olayı kullanılmalıdır.

<>
<head>
<title>Seçenek Kutusu: OnChange Olayı,</title>
<script language="">

function degistir()
{
var x=document.secenek.yazar.selectedIndex
yazi.innerHTML=document.secenek.yazar.options[x].text
}

</script>
</head>
<body>

< name="secenek" onchange="degistir()">
<select name="yazar">
<option>Mario Llosa Vargas
<option>Amin Maalouf
<option>John Steinback
<option>Ursula K. Leguin
<option>Panait Istrati
</select><br>
<p id="yazi">Seçeneği değiştiriniz…</p>
</>

</body>
</>

kaynak: ordan burdan

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Javascript - Form Nesnesi (scripti, nasıl, nedir?) konusu
Benzer yazılar:
    Benzer yazı yok