|
Java Script Form Nesnesi
Bir önceki sayfamızda form nesnesinin hiyerarşi sıralamasında sayfa
nesnesinden sonra geldiğini ve forms ismiyle bir dizi oluşturduğunu
görmüştük. Bu sayfada form nesnesini kullanmayı öğreneceğiz.
Form Komutları
Sayfadaki form nesnelerini, name parametresiyle tanımladığımız
isimler aracılığıyla çağırabiliriz: document.forms.yeniform gibi.
Form komutlarını da bu kök üzerine yerleştiririz. Form komutlarını
topluca listeledim.
action Formun işlem sayfasına girmesini sağlar.
method Formun metodunu girer (post/get).
reset() Form bilgilerini siler (resetler).
submit() Form bilgilerini girer.
acceptCharset İstemcinin (server`ın) desteklediği karakter listesini
girer.
elements Form 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 ve 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, Tartışma 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
araçları sadece HTML ve JavaScript ile yapamazsınız. JavaScript
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 ve bu sayfanın altındaki
bilgileri öğrenmeye çalışsınlar. CGI ve 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ı HTML derslerimizde görmüştük. O sayfada form
araçlarının parametreleri de tanıtılmıştı. İstersek o parametreleri
JavaScript koduyla tanımlayabiliriz. Örneğin metin kutusunun
uzunluğunu karakter cinsinden belirleyen size parametresini
JavaScript kodlarıyla tanımlayalım:
Javascript:
<html>
<head>
<title>Size Parametresi,</title>
<script language="JavaScript">
function uzunluk(x)
{
document.forms.Form1.mesaj.size=x
}
</script>
</head>
<body>
<form 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>
</form>
</body>
</html>
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. JavaScript kodlarıyla bu
parametreyi, metin kutusuna yazılı olan ifadeyi değişkenlere
aktarmak için kullanabiliriz:
Javascript:
<html>
<head>
<title>Form Sayfası,</title>
<script language="JavaScript">
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>
<form 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>
</form>
</body>
</html>
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: JavaScript bilgileri aktarmaya ve
dönüştürmeye yarar ancak o bilgileri saklamaya yaramaz. Bunun için
veri tabanı gereklidir ve bu veri tabanını CGI ve ASP derslerimizde
oluşturacağız. Sanırım şimdi daha iyi anlaşıldı.
Veri tabansız da birçok güzel şey yapılabiliniyor. Son uygulamamızı
anlayan arkadaşlar rahatlıkla basit bir hesap makinesi
yapabileceklerdir. Normal metin kutusu ve 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 JavaScript 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.
Javascript:
<html>
<head>
<title>Bundylogy Sorusu,</title>
<script language="JavaScript">
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>
<form name="soru">
<b>Al Bundy soruyor:</b>Marcy Darcy kimdir? (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> </form>
</body>
</html>
Sözün özü, tüm parametreleri komut haline getirebiliyoruz. Bunun
yanısıra Form Elemanları için kullanılan başka komutlar da var:
focus() Tanımlanan bilgi giriş aracına odaklanmayı sağlar.
blur() Tanımlanan bilgi giriş aracının odak halinden çıkmasını
sağlar.
click() Tanımlanan bilgi giriş aracını tıklamaya yarar.
select() Tanımlanan bilgi giriş aracının seçili hale gelmesini
sağlar..
Tüm bu komutların yer aldığı öğretici bir uygulama yapalım:
Javascript:
<html>
<head>
<title>Bilgi giriş eleman komutları,</title>
<script language="JavaScript">
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>
<form 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 çıkar"
onclick="komut(3)"><br>
<input type="button" value="Uyarı düğmesine bas" onclick="komut(4)"><br>
</form>
</body>
</html>
Bu uygulamamızı irdeleyelim biraz: select() komutu form aracını
seçili hale getiriyor ve 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
HTML derslerinde seçenek kutusunun nasıl görüntülendiği
anlatılmıştı ama nasıl 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:
Javascript:
<html>
<head>
<title>Seçenek Kutusu İndeksleri,</title>
<script language="JavaScript">
function sec()
{
var x=document.sira_no.yazar.selectedIndex
alert(x+1)
}
</script>
</head>
<body>
<form 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()">
</form>
</body>
</html>
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 nasıl ifade edebiliriz?
Javascript:
<html>
<head>
<title>Seçenek Kutusu: Seçilen Seçeneği Gösterme,</title>
<script language="JavaScript">
function sec()
{
var x=document.secenek.yazar.selectedIndex
var y=document.secenek.yazar.options[x].text
alert(y)
}
</script>
</head>
<body>
<form 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()">
</form>
</body>
</html>
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 ve 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.
Javascript:
<html>
<head>
<title>Seçenek Kutusu Seçenek Değiştirme,</title>
<script language="JavaScript">
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>
<form 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()">
</form>
</body>
</html>
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.
Javascript:
<html>
<head>
<title>Seçenek Kutusu: OnChange Olayı,</title>
<script language="JavaScript">
function degistir()
{
var x=document.secenek.yazar.selectedIndex
yazi.innerHTML=document.secenek.yazar.options[x].text
}
</script>
</head>
<body>
<form 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>
</form>
</body>
</html>
 |
