|
Ziyaretçiye sunulan bir web sayfası üzerinde
ziyaretçinin yaptığı her tür hareket bir bağlantıyı tıklaması, bir
resmin üzerine gelmesi, resmin üzerinde ayrılması, bir formu
yanlış doldurup hataya yol açması hep bir olaydır.
Şimdi bu olayları inceleyelim.
8.1 onClick
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 bildirmeniz gerekir. Şimdi
bunu bir örnekle açıklayalım.
<html>
<head><title>onClick</title>
<script language="javascript1.2">
<!--
function merhaba()
{alert ("beni tikladiniz"); }
-->
</script></head>
<body>
<input type="button" name="tikla" value="tikla" onClick=merhaba()>
</body>
</html>
Burada yaptığımız işlem html etiketleri
arasında yer verdiğimiz bir butona tıklama (onClick) ile ne
yapacağını merhaba fonksiyonuna git diyoruz. Fonksiyonda ekrana
bir uyarı ile beni tıkladınız diye bir uyarı mesajı geçiyor.
Şimdi burada alert nesnesini de görmüş
olduk. Alert nesnesi ziyaretçiye herhangi bir durumda uyarı vermek
amacıyla kullanılır. Görüldüğü üzere parantez içerisinde çift
tırnak içine uyarı yazısı yazılır.
OnDblClick olayı da onClick olayı ile yapı
olarak aynıdır. onClick'ten farkı nesneye çift tıklandığında
çalışmasıdır. Diğer yöntemler onClick ile aynıdır.
8.2 onMouseOver , onMouseOut
Bu tür nesne olayları ingilizce adı (onMouseOver
= mouse işaretçisi(imleç) üzerindeyken , onMouseOut = mouse
işaretçisi üzerinden ayrıldığında) üzerinde olmakla birlikte
mouse'un nesnenin üzerinde olup olmadığı ile ilgilenir.
Bir örnek ile açıklayalım:
<html>
<head><title>onMouseOver ve onMouseOut </title>
<script language="javascript1.2">
<!--
function uzerinde()
{window.status="Tıklayın ve Webteknikleri.com adresine gidin" }
function disinda()
{window.status="Webteknikleri.com baglantisina tıklayın" }
-->
</script></head>
<body>
<a href="http://www.webteknikleri/index.htm" onMouseOver = uzerinde()
onMouseOut =disinda()>
Webteknikleri.com </a>
</body>
</html>
onMouseOver ve onMouseOut metodu ile ilgili
güzel bir örnek daha :
<html>
<head><title>OnMouseOver</title>
<script language="javascript1.2">
<!--
function altavista()
{document.web.mesaj.value="En unlu web motorlarindan biri" }
function altavistasil()
{ document.web.mesaj.value="" }
function yahoo()
{ document.web.mesaj.value="En unlulerden bir tane daha" }
function yahoosil()
{document.web.mesaj.value="" }
function hotbot()
{document.web.mesaj.value="Ve bir tanesi daha" }
function hotbotsil()
{document.web.mesaj.value="" }
-->
</script></head>
<body>
<a href="www.altavista.com" onMouseOver="altavista()"
onMouseOut = "altavistasil()"> Altavista</a><br>
<a href="www.yahoo.com" onMouseOver="yahoo()"
onMouseOut="yahoosil()">Yahoo</a><br>
<a href="www.hotbot.com" onMouseOver="hotbot()"
onMouseOut="hotbotsil()">Hotbot</a><p>
<form name="web">
<input type="text" name="mesaj" size="50">
</form>
</body>
</html>
8.3 onSubmit
Web-de sörf yaparken çoğunlukla karşımıza
çıkan formlar biz doldurduktan sonra sayfanın bağlı bulunduğu
server (ana makine) ya gönderilir. Fakat biz bu onSubmit olayı ile
form gönderilmeden önce formun düzgün doldurulup doldurulmadığını
kontrol edebiliriz.
Bunu örnek bir kod ile açıklayalım. Html
sayfamızda body etiketleri arasında doldurulmasını istediğimiz bir
form var ve ona ilişkin kod başlangıcı ise şöyle :
<form action="mail.pl" method="post" onSubmit="dogrula()">
Bu satır ile formun gönderilmesiyle (onSubmit)
dogrula fonksiyonunu çağırıyoruz.
dogrula fonksiyonu da şu şekilde
olabilir.(Bu fonksiyon head etiketleri arasında olan script
etiketleri arasında olmalıdır.)
function dogrula()
{ confirm ("Formu düzgün doldurduysanız OK'i tıklayınız'); }
Bu fonksiyonda kullandığımız confirm nesnesi
ile kullanıcıya OK ve Cancel tuşları ile emin misin ? Gönderiyorum
denilmektedir.
8.4 onReset
Bu olay ile web sayfanızda bulunan formdaki
yazdıklarınızın tamamen silinir. Yani yazdığınızın yanlış olduğunu
farkettiniz bu durumda Sil (Reset) tuşunu tıklarsınız ve size boş
bir form gelir. Yalnız burada birşeyi belirtmek isterim. Reset(Sil)
tuşuna tıkladıktan sonra tarayıcının back(geri) düğmesini
tıkladığınızda formunuzda yazdıklarınız tekrar geri gelmez. Fakat
siz onReset olayı ile bu durum için son bir ziyaretçiye seçenek
sunabilirsiniz.
Bunun ile ilgili bir örnek yapalım :
<html>
<head><title>onReset</title>
<script language="javascript1.2">
<!--
function sil()
{ return confirm('Silmek istediginize emin misiniz?'); }
-->
</script>
</head>
<body>
<form onReset="return sil()">
<input type="text" name="mail">
<input type="reset" value="sil">
</form>
</body>
</html>
8.5 onChange
Web sayfası üzerinde ziyaretçinin
değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea
(geniş metin alanı) select (seçim alanı) dır. Mouse u bu alanlar
üzerine getirip tıkladığınızda onChange(değişti) olayını
gerçekleştirmiş olursunuz. Şimdi bunu select yöntemi ile nasıl
olduğunu görelim. Örneğimizde aşağı düşmeli bir menü
tasarlayacağız ve şeçili durumda olan web sayfasına gönderme
yapacağız.
<html>
<head><title>OnChange</title>
<script language="javascript1.2">
<!--
function degisti()
{ window.open("www.altavista.com"); }
-->
</script>
</head>
<body>
<form method="post">
<p><select name="degistir" size="1" onChange="degisti()">
<option>Adresi tikla
<option>Altavista
</select>
</form>
</body>
</html>
8.6 onLoad , onUnLoad
Bu olaylar bize sayfanın yüklenmeye
başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan
yapılacak işlemler için gereklidir. Bir Javascript fonksiyonun web
sayfası yüklenmeye başladığında otomatik olarak çalışmasını
istiyorsak onLoad olayını kullanırız. Eski DOS'çular bilirler
Autoexec.bat dosyası nasıl makine açıldığında yapılmak istenenleri
yapıyorsa onLoad olayında da sayfa yüklenmeye başladığında nelerin
otomatik olarak başlatılacağını belirleyebiliriz. Mesela sayfa
yüklenmeye başladığında (onLoad) ziyaretçiye Web sitemiz hoş
geldiniz diyebiliriz. Sayfadan ayrıldığında (onUnLoad) ise İyi
sörfler diyebiliriz. Örnek kodlara geçmeden önce şunu belirtmekte
yarar var. Bildiğiniz üzere web sayfası kod açısında iki kısıma
ayrılır. Bunlar head ve body kısmıdır. Tarayıcı açısında body
kısmı asıl kısımdır. Head kısmında sayanın nasıl görüntüleneceği
gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body
etiketleri arasında yer alır.
Şimdi de bunun için gerekli kodlara bir göz
atalım.
<html>
<head>
<title>onLoad onUnLoad</title>
<script language="javascript1.2">
<!--
function hosgeldiniz()
{
alert("Web Sitemize Hosgeldiniz")
}
function gulegule()
{
alert("Iyi sorfler..")
}
-->
</script>
</head>
<body onLoad="hosgeldiniz()" onUnload="gulegule()">
</body>
</html>
8.7 onError onAbort
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.
Örnek :
<img src="resim.gif" onError="alert("Resim dosyası tam olarak yüklenemedi')">
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.
<img src="resim.gif" onAbort="alert("Resim harita dosyası
tam olarak yüklenemedi. İlgili resim bir harita olduğu için
yüklenmesini tavsiye ederiz.')">
|