İnternet Programlama-I JAVASCRİPT -FORMLAR-
JavaScript’de Formların Kullanılması HTML ile ilgili birinci bölümünde formlardan söz etmiştik. Formlar, kullanıcının bazı bilgileri sunucuya aktarmasında yararlanılan arayüzler olarak karşımıza çıkmıştı. Form üzerinde düğme, radyo düğmesi, denetim kutusu ve listelerin tanımlanabildiğim biliyoruz. Ancak bu nesneler üzerinde bir olay ortaya çıktığında, örneğin form üzerindeki bir düğme tıklatıldığmda ne gibi bir işlemin yerine getirileceği belirlenmelidir.
JavaScript’de Formların Kullanılması Böyle durumları, yani bir olayın ortaya çıkması durumunda yapılacak işlemi belirlemek üzere JavaScript programlarından yararlanılır.
Form Üzerindeki bir Düğmenin Tıklatılması En yaygın kullanılan HTML olaylarından biri, form üzerindeki bir düğmenin tıklatılması olayıdır. Fare göstergesi düğme üzerine getirildikten sonra sağ düğmesi tıklatılır. Böylece form üzerindeki düğmenin tıklama olayını algılaması sağlanır. Ardından buna bağlı javaScript kodları çalışır. Ancak çoğunlukla olaya bağlı javaScript kodları bir satırdan fazladır.
Form Üzerindeki bir Düğmenin Tıklatılması JavaScript programları denetleme ve döngü işlemlerini yerine getiren satırlara sahip olabilir. Bu nedenle javaScript komutlar bir fonksiyon içinde yerleştirilir ve onclick komutu ile bu fonksiyon çağrılarak söz konusu deyimlerin topluca çalıştırılması sağlanabilir. Söz konusu olay, HTML içinde, <INPUT TYPE="button" NAME="düğmenin adı" VALUE ="Düğme baslığı"onClick= javaScript fonksiyonu"> biçiminde tanımlanır.
Form Üzerindeki bir Düğmenin Tıklatılması Örnek: Form üzerinde sadece bir düğmenin yer aldığını varsayalım. Bu düğmeye basıldığında “düğme tıklatıldı” mesajı görüntüleyelim… <HTML> <HEAD> <TITLE>Düğmenin tıklatılması</TITLE> <SCRIPT LANGUAGE="JavaScript"> function mesaj (form) { alert ("Düğme tıklatıldı.."); }
Form Üzerindeki bir Düğmenin Tıklatılması </SCRIPT> </HEAD> <BODY> <F0RM NAME="form1" ACTION="" METHOD="GET"> <INPUT TYPE =" button" NAME="dugme1" VALUE="Bu düğmeye basınız" onClick="mesaj(this.form)"> </F0RM> </BODY> </HTML>
Form Üzerindeki bir Düğmenin Tıklatılması <HTML> <HEAD> <TITLE>Düğmenin tıklatılması</TITLE> </HEAD> <BODY> <FORM NAME="form1" ACTION=" " METHOD="GET"> <INPUT TYPE="button" NAME="dugme1" Value="Bu düğmeye basınız" onClick="alert ('Düğme tıklatıldı...')"> </FORM> </BODY> </HTML>
Metin Kutusundan Okunan Değerlerin JavaScript İçinde Kullanılması JavaScript ve HTML kodlarının birlikte kullanılabileceği durumlardan birincisi, form üzerinde yer alan bir alan içeriğinin JavaScript kodları içinde değerlendirilmesidir. Bunun anlamı, formun bir metin alanı okunacak, elde edilen değer JavaScript içine aktarılarak orada kullanılması sağlanacaktır. Formun metin alanı JavaScript içinde aşağıda gösterildiği biçimde tanımlanmaktadır: değişken = form.formAlanAdı.value
Metin Kutusundan Okunan Değerlerin JavaScript İçinde Kullanılması değişken: Form üzerinde metin kutusuna girilen değerin aktarıldığı değişken formAlanAdı: Form üzerindeki metin alanının adı Yukarıda sözü edilen metin alanı HTML üzerinde, <INPUT TYPE="text" NAME= " formAlanAdı " VALUE= " "> biçiminde tanımlanır.
Metin Kutusundan Okunan Değerlerin JavaScript İçinde Kullanılması Örnek: Form üzerinde bir metin giriş alanının ve bir düğmenin tanımlandığını varsayalım. Bu alana herhangi bir metin girildikten sonra düğmeye basıldığında, girilen metin bir mesaj kutusunda görüntülensin… <HTML> <HEAD> <TITLE>Metin kutusuna girilen değerin görüntülenmesi</TITLE> <SCRIPT LANGUAGE="JavaScript"> function girisMesaj (form) { giriş =form.giris_kutusu.value; alert ("Girilen değer: " + giriş );
Metin Kutusundan Okunan Değerlerin JavaScript İçinde Kullanılması } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1" ACTION=" " METHOD="GET"> Kutu içine bir ifade yazınız: <BR> <INPUT TYPE="text" NAME="giris_kutusu" VALUE=" "><P> <INPUT TYPE="button" NAME="dugme1" Value="Görüntüle" onClick="girisMesaj(this.form)"> </FORM> </BODY> </HTML>
Metin Kutusundan Okunan Değerlerin JavaScript İçinde Kullanılması
JavaScript İçindeki bir Değerin Metin Kutusuna Yazdırılması Yukarıda yapılan işlem, bir form alanının içerdiği değeri JavaScript programına aktarıyordu. İşlemin tersini gerçekleştirebiliriz. JavaScript içinde üretilen bir değeri HTML içine aktarabiliriz. JavaScript programları içinde form üzerindeki bir alana, aşağıda gösterildiği biçimde bir dizgi atanabilir. form.formAlanAdı.value = ”Görüntülenecek değer” formAlanAdı: Form üzerindeki metin alanının adı Atama yapılan form alanı, form üzerinde aşağıdaki HTML deyimleri yardımıyla görüntülenir: <INPUT TYPE="text" NAME="formAlanAdı " VALUE=" ">
JavaScript İçindeki bir Değerin Metin Kutusuna Yazdırılması Örnek: Bu kez form üzerinde bir metin kutusu ve iki adet düğme yer alacaktır. Üzerinde “Görüntüle” yazılı düğme tıklatıldığında, metin kutusuna kaydedilen ifade mesaj kutusu içinde görüntülenecektir. Eğer üzerinde “Kutuya yaz” başlığı bulunan ikinci düğme tıklatılacak olursa, metin kutusuna ne yazılırsa yazılsın, onu silerek yerine “Merhaba lmyo” ifadesini kaydeden programı yazalım…
JavaScript İçindeki bir Değerin Metin Kutusuna Yazdırılması <HTML> <HEAD> <TITLE> Metin kutusuna yazdırma </TITLE> <SCRIPT LANGUAGE="JavaScript"> function girisMesaj (form) { giris =form.giris_kutusu.value; alert ("Girilen değer: " + giris ); } function yazilan (form) { form.giris_kutusu.value = "Merhaba lmyo" } </SCRIPT> </HEAD>
JavaScript İçindeki bir Değerin Metin Kutusuna Yazdırılması <BODY> <FORM NAME="form1" ACTION=" " METHOD="GET"> Kutu içine bir ifade yazınız: : <BR> <INPUT TYPE="text" NAME="giris_kutusu" VALUE=" "><P> <INPUT TYPE= "button" NAME="dugme1" Value="Görüntüle" onClick="girisMesaj(this.form)"> <INPUT TYPE="button" NAME="dugme2" Value="Kutuya yaz" onClick="yazilan (this.form)"> </F0RM> </B0DY> </HTML>
JavaScript İçindeki bir Değerin Metin Kutusuna Yazdırılması
Radyo Düğmeleri Form üzerinde kullanılabilecek bir diğer nesne ise radyo düğmeleri olarak bilinir. Bu düğmeler bir grup oluşturur. Grup içinden sadece bir tanesi seçilebilir. Bir diğeri seçilecek olursa, önceki iptal olur. HTML içinde radyo düğmeleri şu şekilde tanımlanır: <INPUT TYPE=" radio" NAME ="radyo düğmesi adı " Value= "değeri" onClick=0> düğme etiketi Radyo düğmelerinden hangisinin seçildiği javaScript programları içinde aşağıda belirtilen ifade yardımıyla belirlenir: form.radyo düğmesi adı[indeks].checked
Radyo Düğmeleri Bir radyo düğmesi seçilmiş ise, yukarıdaki ifade “true” değerini üretir. Radyo düğmelerinin sahip olduğu “true” ya da “false” değerleri kullanılarak programın akışı denetlenir. Radyo düğmelerinin her birinin bir indexe sabip olduğu görülüyor. Birinci düğmeden itibaren 0,1,2,.. biçiminde numaralanmıştır.
Radyo Düğmeleri Örnek: Form üzerinde altı adet seçeneğin yer almasını istiyoruz. Bu seçeneklerden sadece biri seçilebilecektir. <HTML> <HEAD> <TITLE>Radyo düğmesi test</TITLE> <SCRIPT LANGUAGE="JavaScript"> function radyoTest (form){ for (say = 0; say < 6; say++) { if (form.radyo[say].checked) break; } alert (say + 1 + ". düğmeyi seçtiniz.."); } </SCRIPT> <BODY> <FORM NAME="radyoform"> <INPUT TYPE="button" NAME="dugme" Value="Basınız"
Radyo Düğmeleri onClick="radyoTest(this.form)"> <BR> <INPUT TYPE="radio" NAME="radyo" Value=" " onClick=0>Akdeniz<BR> <INPUT TYPE="radio" NAME="radyo" Value=" " onClick=0>Karadeniz<BR> <INPUT TYPE="radio" NAME="radyo" Value=" " onClick=0>Ege<BR> <INPUT TYPE="radio" NAME="radyo" Value=" " onClick=0>İç Anadolu<BR> <INPUT TYPE="radio" NAME="radyo" Value=" " onClick=0>Trakya<BR> <INPUT TYPE="radio" NAME="radyo" Value=" " onClick=0>Doğu Anadolu<BR> </FORM> </BODY> </HTML>
Radyo Düğmeleri
Onay Kutuları Form üzerinde yer alan radyo düğmeleri grubundan sadece bir düğmenin seçilebileceğini gördük. Eğer bir seçenek grubundan birden fazla seçimin yapılması söz konusu ise onay kutularına başvurulur. Onay kutularından oluşan bir grup seçenekten istenildiği kadarı seçilebilir. HTML içinde denetim kutuları şu şekilde tanımlanır: <INPUT TYPE="checkbox" NAME="kutunun adı" Value=“ ">Seçenek etiketi
Onay Kutuları Onay kutularından hangilerinin seçildiği javaScript programları içinde aşağıda belirtilen ifade yardımıyla belirlenir: form.kutunun adı[indeks].checked Grup içinden hangi kutular işaretlenmiş ise bu kutular “true” değerini üretir. Onay kutularının sahip olduğu “true” ya da “false” değerleri kullanılarak programın akışı denetlenir.
Onay Kutuları Örnek: Form üzerinde üç adet seçenek oluşturarak bu seçeneklerden uygun olanlarının işaretlenmesini istiyoruz. Birden fazla seçeneğin işaretlenmesi söz konusudur. <HTML> <HEAD> <TITLE>denetim kutuları</TITLE> <SCRIPT LANGUAGE="JavaScript"> function denetimDugme(form){ var j = 0; var a = new Array(); for (say = 0; say < 3; say++) { if (form.denetim[say].checked) { j++; a[j] = say +1; } } for (i = 1; i < a.length; i++) {
Onay Kutuları document.write(a[i] + ".düğmeyi seçtiniz.." + "<BR>"); } } </SCRIPT> <BODY> <FORM NAME="denetimForm"> <INPUT TYPE="button" NAME="dugme" Value="Basınız" onClick="denetimDugme(this.form)"><BR> <INPUT TYPE="checkbox" NAME="denetim" Value="">Seçim 1<BR> <INPUT TYPE="checkbox" NAME="denetim" Value="">Seçim 2<BR> <INPUT TYPE="checkbox" NAME="denetim" Value="">Seçim 3<BR> </FORM> </BODY> </HTML>
Onay Kutuları
Çok Satırlı Metin Kutusu Bilgi girişlerini yerine getirmek amacıyla, birden fazla satırı içerecek biçimde metin alanları yaratılabilir. Form üzerindeki metin alanları HTML kullanılarak aşağıda görüldüğü biçimde tanımlanır: <TEXTAREA NAME= " alan adı" COLS ="kolon" R0WS="satır"></TEXTAREA> Metin alanları içine girilen bilgiler, javaScript içinde aşağıda görüldüğü biçimde okunarak program içinde gerekli yerlerde kullanılabilir. form.metin alan adı.value
Çok Satırlı Metin Kutusu Örnek: Form üzerinde bir metin giriş alanı yaratacağız. Bu alan 25 kolondan ve 5 satırdan oluşacaktır. Metin kutusuna girilen değer, bir düğmeye basıldığında mesaj kutusunda görüntülenmesi sağlanacaktır. <HTML> <HEAD> <TITLE>metin alanlar</TITLE> <SCRIPT LANGUAGE="JavaScript"> function textAlan(form) { alert (form.alan1.value); } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> <INPUT TYPE="button" NAME="dugme" Value="Basınız"
Çok Satırlı Metin Kutusu onClick="textAlan(this.form)"><BR> <TEXTAREA NAME="alan1" COLS="25" ROWS="5"> </TEXTAREA> </FORM> </BODY> </HTML>
Listeler Veri listeleri web sayfalarında sıkça kullanılan nesnelerdir. Kitabımızın ilk bölümünde, bir satırdan oluşan veri listelerini “açılan listeler”, birden fazla satırı görüntülenen listeleri ise “kayan listeler” olarak isimlendirmiştik. Veri listeleri, içinde birden fazla değeri içeren olanaklardır. Listede yer alan değerlerden biri seçilebilir. Form üzerindeki listeler HTML kullanılarak aşağıda görüldüğü biçimde tanımlanır: <SELECT NAME= " liste adı" SİZE=“liste bovutu"> <OPTI0N>liste değeri </SELECT> Listeden seçim yapıldığında javaScript içinde aşağıda görüldüğü biçimde okunarak program içinde gerekli yerlerde kullanılabilir. form.liste adı.selectedlndex
Listeler Örnek: Bazı il isimlerini içeren bir liste oluşturacağız. Bu listeden bir il seçildiğinde, mesaj kutusunda bu ile ilişkin sıra numarası görüntülenecektir. <HTML> <HEAD> <TITLE>Liste kutusu</TITLE> <SCRIPT LANGUAGE="JavaScript"> function liste(form) { alert(form.listeKutusu.selectedIndex); } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1" ACTION=" " METHOD="GET"> <INPUT TYPE="button" NAME="dugme" Value="Basınız"
Listeler onClick="liste(this.form)"><BR> <SELECT NAME="listeKutusu" SIZE="4"> <OPTION>ADANA <OPTION>ANKARA <OPTION>ANTALYA <OPTION>İSTANBUL <OPTION>İZMİR <OPTION>TRABZ0N <OPTION>ESKİŞEHİR <OPTION>KIRKLARELİ </SELECT>
HTML İçinde Tetiklenen Diğer Olaylar Bir form nesnesinin tıklanması durumunda, onclick olayının ortaya çıktığını ve bu olaya bağlı olarak program içinde çeşitli işlemlerin yapılabildiğini önceki sayfalarda ele alarak inceledik. Form üzerinde ortaya çıkabilecek tek olay bu değildir. Daha birçok olaydan söz edebiliriz.
Nesne Üzerine Odaklanıldığında Form üzerinde yer alan bir nesne veya bir HTML elemanı örneğin bir düğme ya da bir metin kutusu kullanılmak üzere seçildiğinde, yani o nesneye odaklanıldığında herhangi bir işlemin yapılması söz konusu olabilir. Böyle durumlarda onFocus olayı tanımlanır. Söz konusu onFocus aşağıda gösterildiği biçimde kullanılır: onFocus="JavaScript programı"
Nesne Üzerine Odaklanıldığında Örnek: Form üzerinde iki ayrı metin kutusunun yer aldığını varsayalım. İmleç bu kutulardan herhangi biri üzerine geldiğinde, yani kutulardan biri seçildiğinde bir uyarı penceresinin açılmasını ve kullanıcının büyük harflerle giriş yapması konusunda uyarılmasını sağlayalım… <HTML> <HEAD> <TITLE>Metin kutusuna odaklanma için test</TITLE> <SCRIPT LANGUAGE="JavaScript"> function buyukHarf(form) { alert ("Büyük harflerle giriş yapınız..") }
Nesne Üzerine Odaklanıldığında </SCRIPT> </HEAD> <B0DY> <FORM> <p>Personelin adı:</p> <p><input type="text" name="KUTU1" onFocus="buyukHarf(this.form)"></p> <p>Soyadı:</p> <p><input type="text" name="KUTU2" onFocus="buyukHarf(this.form)"></p> </F0RM> </BODY> </HTML>
Nesne Üzerine Odaklanıldığında JavaScript kodları çalıştığında, doğrudan doğruya alert komutu çalışarak belirtilen mesajın ayrı bir mesaj kutusu üzerinde görüntülenmesi sağlanmaktadır.
Odaklanma İşlemi Kalktığında Yukarıda belirtilen onFocus olayı, bir HTML elemanına odaklanma durumunda yapılacak işlemi tanımlıyordu. Bu işlemin tersini de gerçekleştirmek mümkündür. Yani, bir HTML elemanına odaklanma işlemine son verildiğinde bir eylem yapmak gerekebilir. Bu gibi durumlarda onBlur olayı tanımlanır. Sözü edilen onBlur olayı aşağıda gösterildiği biçimde kullanılır: onBlur="javaScript programı"
Odaklanma İşlemi Kalktığında Örnek: Yukarıdaki örnekte kullanılan formu yeniden göz önüne alalım. Bu kez birinci alana herhangi bir denetleme işlemi koymuyoruz. İkinci alana personelin soyadı girildikten sonra, sekme düğmesine basarak bir başka alana geçilmek istenildiğinde bir mesaj kutusu açılacak ve hangi personele ilişkin isim ve soyadının girildiğini görüntüleyelim…
Odaklanma İşlemi Kalktığında <HTML> <HEAD> <TITLE>Metin kutusunu terketme ile ilgili test</TITLE> <SCRIPT LANGUAGE="JavaScript"> function mesaj(form) { s = " isimli personel bilgileri giriliyor"; alert(form.KUTU1.value + " " + form.KUTU2.value + s); } </SCRIPT> </HEAD> <BODY>
Odaklanma İşlemi Kalktığında <FORM> <p>Personelin adı:</p> <p><input type="text" name="KUTU1"></p> <p>Soyadı:</p> <p><input type="text" name="KUTU2" onblur="mesaj(this.form)"></p> </FORM> </BODY>
Odaklanma İşlemi Kalktığında Program çalıştırıldığında aşağıda görüldüğü biçimde bir pencere açılır. Personelin adını ve soyadını girdikten sonra sekme tuşuna bastığımızda, bir uyarı kutusunun açıldığı görülür…
Değeri Değiştiğinde Üzerinde odaklanılan nesnenin içerdiği değerin değişmesi durumunda ne yapılacağını belirlemek üzere onChange olayının tanımlanması gerekecektir. Bu olay özellikle bir liste kutusundan seçim yapılması durumlarında kullanılır. Bunun dışında, bir metin kutusundaki değerin veya metin alanının içerdiği değerin değişmesi durumunda da bu olayın tanımlanması yoluna gidilebilir. Söz konusu olay, onChange="javaScript işlevi" biçiminde tanımlanır. Eğer bir liste kutusu için tanımlanacak ise şu şekilde bir tanım yapılır: <SELECT NAME=” listenin adı” onChange=” javaScript işlevi”
Değeri Değiştiğinde Örnek: Ülke isimlerinin bir liste içinde yer almasını ve bu listeden bir ülke seçildiğinde, o ülkeye ilişkin para biriminin bir metin kutusu içinde görüntüleyelim… <HTML> <HEAD> <TITLE>Ülkelere göre para birimleri</TITLE> <SCRIPT LANGUAGE="JavaScript" > function para(form) { form.p.value=form.ulke.options.value } </SCRIPT> </HEAD> <BODY> <FORM> <P>Ülkelere göre para birimleri</P>
Değeri Değiştiğinde Ülkeyi seçiniz:<BR> <SELECT NAME="ulke" onChange="para(this.form)"> <OPTION VALUE="TL">Türkiye </option> <OPTION VALUE="Tenge">Kazakistan </option> <OPTION VALUE="Dolar">ABD </option> <OPTION VALUE="Mark">Almanya </option> </SELECT> <P>Para birimi:<BR> <INPUT TYPE="text" NAME="p"> </FORM> </BODY> </HTML>
Değeri Değiştiğinde
Değeri Değiştiğinde Örnek: Form üzerinde yer alan bir metin kutusuna, form açıldığında otomatik olarak günü tarihinin yerleşmesini istiyoruz. Kullanıcı bu tarihi değiştirmek istediğinde, değişiklik yapmaması konusunda bir mesaj ile uyarılsın… <HTML> <HEAD> <TITLE>onChange için test</TITLE> <SCRIPT LANGUAGE="JavaScript"> function tarihGir(form) { t = new Date(); t = t .toLocaleString(); form.tarih.value = t;
Değeri Değiştiğinde } function mesaj(form) { alert('Tarih bilgisini değiştirmeyiniz..'); form.tarih.value = t; </SCRIPT> </HEAD> <BODY> <FORM> Günün tarihi : <BR> <INPUT TYPE="text" NAME="tarih" VALUE=" " onFocus ="tarihGir(this.form)" onChange = "mesaj(this.form)"> </FORM> </BODY> </HTML>
Değeri Değiştiğinde
ONLOAD Bir nesnenin yüklenmesinin bitmesi onLoad, nesnenin ekrandan kaldırılması onUnLoad olayını meydana getirir. Genel olarak <body> tagları içinde kullanılırlar. Tarayıcı bir HTML sayfasını yüklemeyi bitirdiğinde onLoad olayını oluşturur. Örneğin bir resim sayfaya yüklendiğinde onLoad olayı meydana gelecektir. body, frame, frameset, img tagları için kullanılabilirler.
ONLOAD <html> <head> <title>JavaScript onLoad Olay tutucu örneği</title> <script type="text/javascript"> function Yuklendi() { alert('Sayfa yüklendi!'); } window.onload = Yuklendi; </script> </head> <body> </body> </html>
ONLOAD <html > <head> <title>Untitled Document</title> <script type="text/javascript"> window.onload=function load_mesaj() { alert("Merhaba"); } </script> </head> <body > </body> </html>
ONCLICK Bir nesnenin yüklenmesinin bitmesi onLoad, nesnenin ekrandan kaldırılması onUnLoad olayını meydana getirir. Genel olarak <body> tagları içinde kullanılırlar. Tarayıcı bir HTML sayfasını yüklemeyi bitirdiğinde onLoad olayını oluşturur. Örneğin bir resim sayfaya yüklendiğinde onLoad olayı meydana gelecektir. body, frame, frameset, img tagları için kullanılabilirler.
ONCLICK <script> function onayla() { alert("Mesajınız başarı ile gönderildi. Sizinle en yakın zamanda iletişime geçeceğiz."); } function temizle() { return confirm("Form temizlensin mi?"); } </script> <form> <fieldset> <legend>Mesaj Gönder</legend> <label>Rumuzunuz:</label><input type="text"/><br/><br/>
ONCLICK <label>e-Posta Adresiniz:</label> <input type="text"/> <br/><br/> <label>Doğum Tarihiniz: </label> <input type="text"/> <br/><br/> <label>Mesajınız: </label> <textarea rows="2" cols="18"></textarea> <br/><br/> <input type="submit" value="Onayla" onclick="onayla()"/><br/><br/> <input type="reset" value="Formu Temizle" onclick="return temizle()"/> </fieldset> </form>
ONCLICK <html> <body> <p>Tarihi görmek için butona tıklayınız</p> <button onclick="getElementById('tarih').innerHTML= Date()"> Tarihi göster</button> <p id="tarih"></p> </body> </html>