Web Tasarımı - Yrd. Doç. Devkan Kaleci 1

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Web Tasarımı - Yrd. Doç. Devkan Kaleci 1"

Yağmur Öcalan
5 yıl önce
İzleme sayısı:

2 . onclick 2. onmouseover ve OnMouseOut 3. onload ve onunload 4. onsubmit 5. onreset 6. onfocus ve onblur 7. onchange 8. onabort, onerror 2

3 Bir olayın oluşması, mevcut durumda bir değişiklik olması anlamına gelir. JavaScript açısından kullanıcının bir yere tıklaması, mouse un oynatması, sayfanın yüklenmesi, sayfadan çıkılması hep birer olay olarak yorumlanır. Kullanımı: 3

4 Web sayfası üzerinde bir nesnenin mouse ile üzerine tıklanması sonucu onclick olayı gerçekleşir. Olayın gerçekleşmesi için mouse un nesneyi tıklayıp bırakması gereklidir. Yani mouse tuşuna basıldığında onclick olayı gerçekleşmiş olmaz. onclick olayı tuşa basılıp bırakıldıktan sonra gerçekleşir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır. OnClick yönlendiricisine bu durumda ne yapacağını Html etiketleri arasında bildirmesi gerekir. 4

5 <html> <body> <h>bu sayfa onclick testi iç in hazı rlanmı ş tı r.</h> <form> <input type="button" value="tı klayı n" onclick="alert('hello World')"> </input> </form> </body> </html> 5

6 onmouseover fare ile bir link üzerine gelindiğinde bir işlem yapmak için kullanılır. OnMouseOut ise tam tersine fare link'in üzerinden ayrıldığı zaman bir işlem gerçekleştirmek içindir. onmouseover => mouse işaretçisi üzerindeyken, onmouseout => mouse işaretçisi üzerinden ayrıldığında çalışır. 6

7 <html> <body> <h>bu sayfa onm ouseo ver ve onm ouseo ut testi iç in hazı rlanmı ş tı r.</h> <a href="" onm ouseo ver="alert('merhaba')">m ouse u Ü zerine G etirin</a> <br> <a href="" onm ouseo ut="alert('hello World')">M ouse la U zaklaş ı n</a> </body> </html> 7

8 onload sayfa yüklenir yüklenmez bir kod çağırmak için kullanılır. onunload ise sayfa kapatıldığı zaman bir işlem yapmak için kullanılır onlaod ve unload body tag'inin içinde olmalıdır. 8

substring(0,9)=="microsoft") alert("explorer kullaniyosunuz!

9 <html> <head> <script language="javascript"> function hangibrowser() { var tur =navigator.appname+" "+navigator.appversion } if(tur.substring(0,8)=="netscape") alert("netscape kullaniyorsunuz") else if(tur.substring(0,9)=="microsoft") alert("explorer kullaniyosunuz!") else alert("ne tur browser kullandiginizi anlayamadik!") function mesaj() { alert("hoşçakalın!") } </script> </head> <body onload="hangibrowser()" onunload="mesaj()"> </body> </html> 9

10 Form bilgileri submit düğmesine tıklandığında form'un action property'sindeki programa gönderilir. Eğer gönderme işleminden önce bir işlem yapıacaksa form tag'in onsumbit property'sini kullanılır. Eğer form istediğiniz gibi doldurulmamışsa form bilgilerini gönderilmeyebilir. 0

11 <html> <head> <script language="javascript"> function check(aform) { if(aform.testtext.value=="") { alert("text Alanı Boş"); return false; } else { return true; } } </script> </head> <body> <form acton="test.jsp" name="testform" onsubmit="return check(this)"> <input type="text" name="testtext" size="0"></input> <input type="submit" value="submit"></input> </form> </body> </html>

12 Submit event'i gerçekleştiğinde check fonksiyonu çağrılmaktadır. Bu fonksiyon true gönderirse form bilgisi gönderilir. Eğer false gönderirse form bilgisi gönderilmez. check fonksiyonu form'daki adı testtext olan textfield'dinin boş olup olmadığını kontrol ediyor. Eğer boşsa alert ile bir mesaj gönderir ve textfield'in boş olduğunu söyler. Girilen form bilgilerini temizlemek için kullanılan reset düğmesi tıklandığında bir işlem yapılmak istenirse onreset kullanılır. 2

13 <html> <head> <script language="javascript"> function isreset() { alert("formunuzu resetliyorum. İşlem bir kaç dakika sürebilir."); return true; } </script> </head> <body> <form acton="test.jsp" name="testform" onreset="return isreset()"> <input type="text" name="testtext" size="0"></input> <input type="submit" value="submit"></input> <input type="reset" value="reset"></input> </form> </body> </html> // isreset fonksiyonu sonuç olarak true gönderdiği için işlem gerçekleşmektedir. 3

14 Sayfadaki Text, Textarea veya Select unsurlarının üzerine tıklandığında onfocus olayı gerçekleşir. Bu durumda mouse'un başka bir yeri tıklaması da onblur olayına karşılık gelir. Yani kullanıcı dikkatini bu üç unsurdan birine verdiği zaman browser'a bir iş yaptırılabilir. Aynı şekilde kullanıcının dikkatinin başka yöne kayması halinde yapılacak başka bir iş tanımlanabilir. 4

15 <html> <head> <script language="java Script. 2"> function dogru() { document.form.mesaj.value=" Lü tfen hata yapmayın!" } function sor() { document.form.mesaj.value="isminiz alındı" } </script> </head> <body> <form name="form" method="post"> <p><h 3> Lütfen isminizi yazınız!</h 3></p> <input type="text" size=" 20" name="isim" onfocus="dogru()" onblur="sor()"> <p><input type="text" name="mesaj"></p> </form> </body> </html> 5

16 Bir formda bir değişiklik yapıldığında bir işlem yapılmak istenirse onchange property'sini kullanılır. onchange özelliği ancak başka bir yere focus'landığında çağrılır. Her harf girişinde çağrılmaz. 6

17 <html> <head> <script language="java Script. 2"> function yaz(secnesnesi) { return secnesnesi.options [secnesnesi.selected Index ]. value } </script> </head> <body> <form name="form"> <select name="mesaj" size=" 3" onchange="alert(yaz(this.form.mesaj))"> <option name="mesaj" value="bu">mesaj <option name="mesaj" value="program">mesaj 2 <option name="mesaj" value="onchange komutu ile yapılmıştır">mesaj3 </select> </form> </body> </html> 7

18 Ziyaretçinin browser'ı sayfanızın bir kısmını veya tamamını yükleyemez, ya da sayfanızın JavaScript veya HTML kodlarını yorumlayamazsa hata durumu oluşur, bu durumun adı JavaScript dilinde onerror'dur. OnAbort olayı ise ziyaretçi sayfanız tamamen yüklenmeden stop tuşuna basarsa oluşur. Ziyaretçi sayfayı herhangi bir neden yüzünden tam haliyle yükleyememiş olabilir. Bu nedenler aktarım hızı veya tarayıcının Javascript kodunu tam manasıyla yorumlayamamış olmasıdır. İşte bu durumda Error(hata) oluşur. Html üzerinde oluşan en sık error(hata) resim haritalarının (image-map) tam anlamıyla yüklenmemesinden kaynaklanır. Çünkü bu durumda resim tam yüklenmemiştir. Bu da ziyaretçinin resim üzerinde tıklayacağı yerlerin yorumlanmamasını doğurur. 8

19 Ziyaretçi resimlerin yüklenmesi çok uzun sürüp yüklemeyi stop(dur) tuşu ile kestiyse bu durumda onabort olayı gerçekleşir. Bunun sonucu olarak ziyaretçiye bir hata mesajı verebilirsiniz. Bu durum daha önce bahsettiğimiz image-map ler içindir. 9

Benzer belgeler

Javascriptte Olaylar (events)

Javascriptte Olaylar (events) Desteklenen olaylar listesi JavaScript Events - Olaylar Events yani olayları Javascript nesnelerini tetikleyenler unsurlar olarak görmeliyiz. Örnegin; Mause linklerin üzerinde