İnternet Programlama-I

İ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.

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.

Ö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ı.."); }

</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>

<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

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.

Ö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ş );

} </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>

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=" ">

Ö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…

<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>

<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>

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 ". 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

Ö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"

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ı"

Ö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..") }

</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>

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ı"

Ö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…

<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>

<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>

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>

İnternet Programlama-I

Benzer bir sunumlar

... konulu sunumlar: "İnternet Programlama-I"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

İnternet Programlama-I

Benzer bir sunumlar

... konulu sunumlar: "İnternet Programlama-I"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim