Olaylar
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.
1 onClick
Web sayfası üzerinde bir nesnenin mosue 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'un tüşüna
basıldığında onClik 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.
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>
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 fonksiyonuda ş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.
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>
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>
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.
Şimdide 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>
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.')">
|