JavaScript Formlar #10
FORMLAR
Formlar HTML'in en önemli unsurlarından biridir, belki de en önemlisidir. Formlar bize ziyaretçiden bilgi alma olanağı verirler. JavaScript açısından formlar da birer nesnedirler. Bir formun elemanlarınının JavaScript'dek adı, 'n' form elemanının sırası olmak üzere, formAdı.elements[n]'dir. Bu bağlamda,örneğin 'formAdı.elements.length' ifadesi form'un eleman sayısını, 'formAdı.elements[n].value' ifadesi n'inci elemanın değerini, 'formAdı.elements[n].name ifadesi n'inci elemanın değerinini verir. Şimdi JavaScript ile formlara neler yapabileceğimizi öğrenelim. Bu noktada Form'ları ve elemanlarını bildiğinizi varsayıyoruz. Eksiklerinizi HTML bölümünden tamamlayabilirsiniz.
Kod:
<html><head><title>Radio</title><**** content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="JavaScript1.2"><!-- function yazdir(selNesnesi){
</script>return selNesnesi.options[selNesnesi.selectedIndex].value} --> </head> <body> <form name="form1"><select name="dil">
<option value="Formları değerlendiren programlar yazmanıza yarar.">CGI<option value="Web sayfalarının temel taşıdır.">HTML<option value="Olaylara duyarlı sayfalar yapmanıza yarar.">JavaScript</select> <p></html><input type="Button" onClick="alert(yazdir(this.form.dil))" value="Açıklama için tıklayın!"></p></form></body>
Buradaki fonksiyona 'this.form.dil' ifadesiyle formun select bölümünü gönderiyoruz. Fonksiyonda bu değer selNesnesi argümanıyla temsil edilmiş. Return ifadesiyle seçilen option'un değerini tekrar fonsiyonun çağırıldığı yer olan alert metoduna gonderiyoruz, bu metod da işini yapıp bu değeri görüntülüyor. Burada selNesnesi.selectedIndex ifadesi bize seçilen option'un index'ini , yani sıra numarasını verir.
Kod:
<html><head><title>Radio</title><****content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type><script language="JavaScript1.2"><!--for(ctr=0;ctr<radyoNesnesi.length ;ctr++)function yazdir(radyoNesnesi){ var sonuc=null var ctr {break}if(radyoNesnesi[ctr].checked){sonuc=radyoNesnesi[ctr].value}
<input type="radio" name="dil" value="Web sayfalarının temel taşıdır.">HTML<br>********.form1.aciklama.value=sonuc} --> </script> </head> <body><form name="form1" >
<input type="radio" name="dil" value="Formları değerlenderen programlar yazmanıza yarar.">CGI<input type="radio" name="dil" value="Olaylara duyarlı sayfalar yapmanıza yarar.">JavaScript<br><p><input type="text" size="50" name="aciklama" ></p></html><input type="Button" onClick="yazdir(this.form.dil)" value="Açıklama için tıklayın!"></form></body>
Buradaki fonksiyon bir for döngüsüyle radyo düğmelerinin işaretli(checked) olup olmadığını kontrol etmeye başlıyor.Eğer if metodu true sonucunu verirse, yani o radyo düğmesi işaretliyse, döngüyü kesiyor ve işaretli düğmenin değerini 'sonuc' değişkeni aracılığıyla formun text bölümüne yazdırıyor. Burada ve bir önceki örnekte geçen 'onClick' ifadesi bir olaydır, olayları bir sonraki bölümde öğreneceğiz.
