İnternet Programlama-I

Slides:



Advertisements
Benzer bir sunumlar
HTML e GİRİŞ Temel HTML etiketleri.
Advertisements

Not Sosyal Bilgiler Öğretmenliği
MIT504 İnternet ve Web Programlama: Javascript programlama devam Yrd. Doç. Dr. Yuriy Mishchenko.
PHP ile Lab Örnekleri Lab Çalışması.
JavaScript Birinci Hafta.
Menü’den Evrak Projesine ulaşılır.
OPTİMİZASYON VE AKTARMA İŞLEMİ
PHP KURULUMU PHP kurulum dosyasına çift tıklayınız.
İSİM UZAYLARI.
Visual Basic 6.0 Ders Notları
Bölüm 2: Program Denetimi
Javascript Oğuz İNAL.
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
JAVA SCRIPT TEMELLERİ.
Halk Sağlığı Müdürlüğü
Excel’de VBA programlama (Visual Basic Application) Ders 7
Php Form İşlemleri.
HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
Form İşlemleri. Form İşlemleri Bütün programlama dillerinde kullanıcının girmiş olduğu bilgiler üzerinde.
İNTERNET PROGRAMCILIĞI I BTP 207 Ders 9. Tek değişkende birden fazla bilgi tutulmak istendiğinde kullanılır. Kullanım şekli: var dizi_adı= new Array(eleman1,
 HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form kontrolleridir.  Formlar, web sayfası tasarlayan kişi veya şirketlerle internet.
BAĞLANTI (KÖPRÜ) OLUŞTURMA
PROGRAMLAMA DİLLERİNE GİRİŞ Ders 8: Windows Formları
WEB TASARIMININ TEMELLERİ HTML. HTML FORMLARI VE BİLGİ GİRİŞİ FORM, FORM ELEMANLARI BARINDIRAN BİR ALANDIR. FORM ELEMANLARI KULLANICILARDAN BİLGİ GİRİŞİNE.
TEFBİS DÖNER SERMAYE İŞLETMELERİ MODÜLÜ KULLANICI EĞİTİMİ
MESAJ KUTUSU.
Bilgisayarda Ofis Programları
2.4. Dönüşümlü Resimler (Rollover) Oluşturma
TEMEL NESNE VE TABLO İŞLEMLERİ
MICROSOFT WORD ŞEYMA ŞAFAK
Name formun adı Action formun gönderilecegi adres. Bu adres uzun URL yada lokaldeki CGI adresi Kullanılan method POST yada GET GET ile adres satırında.
Hafta 9. 2 Form Hazırlamak Veritabanın da bulunan tablolara veri girilmesini kolaylaştırmak ve görünümünü güzelleştirmek için form özelliğini kullanabilirsiniz.
Javascriptte Olay Fonksiyonları (Events)
BİLGİSAYAR MUHASEBE YAZILIMLARI
BİLGİSAYAR MUHASEBE YAZILIMLARI
PROGRAMLAMA DİLLERİNE GİRİŞ Ders 4: Diziler
TEFBİS DÖNER SERMAYE İŞLETMELERİ MODÜLÜ KULLANICI EĞİTİMİ
Bilgisayar Entegre Ofis Programları-I
Form İşlemleri. Bütün programlama dillerinde kullanıcının girmiş olduğu bilgiler üzerinde işlem yapılır. Php'de kullanıcı tarafından bilgileri alabilmek.
İnternet Programlama-I
İnternet Programlama-I
İnternet Programlama-I
İnternet Programlama-I JAVASCRİPT. JavaScript Nedir? JavaScript web programlama dilleri arasında yer almaktadır. JavaScript, adından da anlaşılacağı gibi.
İnternet Programlama-I
DYNAMİC HTML EVENT MODELS SİNEM YARDIMCI ÇAKIL SU KIRLI.
ELEKTRONİK TABLOLAMA PROGRAMI: EXCEL
HTML Dili ’ nin Genel Özellikleri. HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu (Tim Berners-Lee) W3 konsorsiyumu.
Web Teknolojileri Hafta 6 1. İçerik  Html Formlar  Javascript 2.
HTML. Tablo Etiketleri 5 Tablolar sayesinde sayfamızdaki nesnelerin yerleşimini, hizalamasını ve sayfa yapısını istediğimiz şekilde ayarlayabiliriz.
KURTKÖY TİCARET MESLEK LİSESİ EĞİTİM ÖĞRETİM YILI
PROGRAMLAMA DİLLERİNE GİRİŞ Ders 9: Genel Kontroller (1)
PHP'de Program Denetimi
İnternet Programlama-I
PHP İş Başında (Formlarla PHP)
JAVA SCRIPT TEMELLERİ.
Javascriptte Olay Fonksiyonları (Events)
Web Teknolojileri Hafta 6.
Diyalog pencereleri.
Javascript Kullanım Şekilleri.
ACTIVE DIRECTORY.
Kayıt Yöneticisi (Records Manager) Kullanımı İçin;
İNTERNET PROGRAMCILIĞI 1
2. VISUAL BASIC PROGRAM YAPISI
WEB TASARIMI – HTML BİLGİSİ SAVAŞ TUNÇER
WEB TASARIMI-HTML FORMLAR SAVAŞ TUNÇER
Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir?
JavaScript Javascript , Netscape firması tarafından C dilinden esinlenilerek yazılmıştır Yazılma amacı Html'in sahip olmadığı bazı özelliklerin web sayfalarında.
İST1111 BİLGİSAYAR UYGULAMALARI HTML-3 Form Oluşturma
İNTERNET PROGRAMCILIĞI 2
Milli Eğitim Bakanlığı Eğitek Haydar TUNA Teknik Öğretmen ve Yazar
Sunum transkripti:

İ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ör­dü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 kutu­ları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ğin­de onLoad olayını oluşturur. Örneğin bir resim sayfaya yük­lendiğ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ğin­de onLoad olayını oluşturur. Örneğin bir resim sayfaya yük­lendiğ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>