Javascript Olaylar

OLAYLAR

Javascript ve niteliklerini etkilediği HTML, bir işletim sistemi ortamında, Grafik Kullanıcı Arayüzü (GUI) ile çalışan bir Browser programının içinde yer alırlar. Browser programları kendiliklerinden veya GUI sonucu, öyle bazı olaylara (örneğin Mouse işaretçisinin bir nesnenin üzerine gelmesi veya bilgisayar kullanıcısının Mouse’un veya klavyenin bir düğmesini tıklaması gibi) yol açarlar ki, bu olay işletim sistemi-GUI-Browser yoluyla HTML belgesi (ve dolayısıyla Javascript) açısından önem taşıyabilir. Bunlara Event (olay) denir, ve Javascript’e bu olayın olması halinde icra edilmek üzere özel emirler verilebilir. Bu tür komutların yazılmasında şu yöntem izlenir:

event = ”fonksiyon_veya_metod (argüman)”

Örneğin onclick = "yeniden()"

Browser programları, olaylı bir yaşama sahiptir! Ya bilgisayar sistemi, ya da kullanıcı (ziyaretçi), sürekli bir takım olayların (Event) oluşmasına sebep olurlar. Ya Mouse’un bir düğmesine basılır “Click” adı verilen olay oluşur; ya klavyede bir tuşa basılır, “KeyDown” olayı oluşur. Bir HTML sayfasının yüklenmesi biterse “Load,” sayfadan çıkma işlemi tamamlanırsa “unLoad” olayı olur.

Her Pencere, Browser veya Kullanıcı olayına karşılık, Javascript’in bir Olay Yönlendiricisi (Event Handler) vardır. Örneğin, kullanıcının Mouse’un bir düğmesini tıklaması, Click, bu olayı karşılayan ve yönlendiren metod ise onClick (tıklandığında, tıklama halinde) adını taşır.Yani onclick bir event Handler'dır.

onAbort	Bir resim yüklenirken kullanıcı vazgeçtiği zaman gerçekleşir.
onBlur	Bir form elementi veya window veya frame nesnesinden çıkıldığında (focus özelliğini kaybettiğinde) gerçekleşir.
onChange	Select, Text veya Textarea nesnelerinin değeri değiştiğinde gerçekleşir.
onClick	Form üzerinde bir nesneye tıklandığında gerçekleşir.
onDblClick	Kullanıcı bir form elementine veya linke çift tıkladığı zaman gerçekleşir.
onDragDrop	Kullanıcı taracıyıcı penceresine bir nesne (sürükleyip) bıraktığı zaman gerçekleşir.
onError	Bir döküman veya resim yüklenirken hata meydana gelirse gerçekleşir.
onFocus	Bir form elementine veya window, frame veya frameset nesnesine odaklanıldığında gerçekleşir.
onKeyDown	Kullanıcı bir tuşa bastığı zaman gerçekleşir.
onKeyPress	Kullanıcı bir tuşa bastığında veya basılı tuttuğunda gerçekleşir.
onKeyUp	Kullanıcı bastığı tuşu bıraktığında gerçekleşir.
onLoad	Tarayıcı dökümanı yüklediğinde gerçekleşir.
onMouseDown	Farenin bir tuşuna basıldığı zaman gerçekleşir.
onMouseMove	Fare işaretçisi hareket ettirildiği zaman gerçekleşir.
onMouseOut	Fare işaretçisi sayfa üzerindeki bir alandan veya bir linkten çıktığı zaman gerçekleşir.
onMouseOver	Fare işaretçisi sayfa üzerindeki bir nesnenin veya alanın kapsadığı alana girdiği zaman gerçekleşir.
onMouseUp	Farenin basılı tuşu bırakıldığı zaman gerçekleşir.
onMove	Kullanıcı veya bir script pencereyi veya frame'i taşıdığı zaman gerçekleşir.
onReset	Form resetlendiğinde (Reset butonuna basıldığında) gerçekleşir.
onResize	Kullanıcı veya bir script pencereyi veya frame'i tekrar boyutlandırdığı zaman gerçekleşir.
onSelect	Kullanıcı text veya textarea içinde bir metni seçtiği zaman gerçekleşir.
onSubmit	Kullanıcı formu gönderdiği zaman (Submit butonuna bastığında) gerçekleşir.
onUnload	Kullanıcı bir belgeyi kapattığı zaman gerçekleşir.

Event Handler’ları, bir tür adlandırılmış ama içi boş fonksiyonlar gibi düşünebilirsiniz. Programcı olarak bize düşen, bu olay karşısında olay yöndendiricisinin ne yapmasını istediğimi belirtmekten ibarettir. Event Handler’lar, daha önceden hazırladığımız bir fonksiyonu göreve çağırabilir; veya hemen oracıkta bir Javascript metodunu da devreye sokabiliriz.

onclick

Ziyaretçinin, Mosue işaretçisi tıklanabilir bir nesne üzerinde iken Mouse’nun düğmesine basması, Click olayını doğurur; bu olayı onClick yönlendirir. Düğmeler, işaretleme kutuları, radyo düğmeleri ve bağlantılar tıklanabilir. Olayın oluşması için varsayılan Mouse düğmesinin basılması ve bırakılması gerekir. Düğme basılı durursa, Click olayı gerçekleşmiş olmaz.

onClick yönlendiricisine, “Click” olayı halinde ne yapmasını istediğinizi ait olduğu nesnenin HTML etiketi içinde bildirmeniz gerekir.

<html>
<head>

<script language="JavaScript">

function yonlendir()

{

location = "javadiziler.html"
}
</script>

</head>
<body>

<form>
<input type="button" name="buton1"onclick="yonlendir()" value="javadiziler">
</form>

</body>
</html>

Burada buton1 isimle butona tıklanması halinde yonlendir fonksiyonunu çalıştırmasını söylüyoruz. Burada olay (event) tıklama (click), olay yönlendirici(event handler) ise onclick işlemidir. Buton nesnesine ait olduğu için onclick="yonlendir()" ifadesi bu nesneyi oluşturan html ifade içerisine yaızlmıştır.

Bağlantıya onclick uygulamak!

Kimi zaman onClick yönlendiricisi, bağlantı nesnesi (a etiketi) ile doğrudan kullanılabilir. Bağlantı nesnesi olan <A HREF=....> etiketi, bir bağlantı protokolü adresi (URL) verilmesini ister. Ancak HTTP veya FILE protokolü yerine buraya doğrudan JavaScript’in adını ve icra etmesi istenen fonksiyonu yazabilirsiniz. Örneğin,

<a href = ” JavaScript : resim1() ”>

şeklinde bir ifade, protokol olarak Javascript’i göstermemizi sağlayabilir.

<html>
<head>

<script language="JavaScript">

function yonlendir()

{

location = "javadiziler.html"

}
</script>

</head>
<body>

<form>
<a href="javascript : yonlendir()"> TIKLA </a>
</form>

</body>
</html>

Script çalıştığında TIKLA isimli bir link oluşacak ve bu bağ tıklandığında yonlendir fonksiyonu işleyecektir. Burada <a> etiketi içerisine link verirmiş gibi fonksiyon ismini yazıyoruz ancak önüne javascript: ifadesini ekliyoruz.

<html>
<head>

<script language="JavaScript">

function alarm()

{

alert( "javadiziler.html")

}
</script>

</head>
<body>

<form>
<a href = "javadiziler.html" onclick="alarm()"> TIKLA </a>
</form>

</body>
</html>

Burada ise <a> etiketinin referansı (href) doğrudan verilmiş. Ancak ayrıca onclick ile bir fonksiyon çağrılmıştır. Bu durumda TKLA linki tıklandığında önce alarm fonksiyonu çalışacak ve ekranda uyarı görüntülenecektir. Kullanıcı bu uyarı kutusuna TAMAM der demez ise javadiziler.html açılacaktır.

onSubmit

Javascript’in, HTML’i tamamladığı noktaların başında Form ve Form yoluyla elde edilecek bilgilerle ilgili işlemler gelir. Bu işlemlerin başında ise Form’daki bilgilerin Server’a gönderilmeden önce, daha Browser’da iken doğrulanması ve hatalardan arındırılması vardır. Javascript, bunu ziyaretçinin formda, Submit (Gönder) olayına yol açan herhangi bir düğmenin tıklanması halinde yapar. Bir form, ziyaretçi tarafından türü Submit olan bir düğmenin tıklanması halinde, Browser tarafından HTTP protokolü ile Server’a gönderilir. Javascript, onSubmit yönlendiricisi ile bu olaya ilişkin işler yapabilir, fonksiyonlar icra edebilir. Fakat burada dikkat edeceğiniz nokta, “Submit” olayına engel olmamak veya bu işlemi şarta bağladı iseniz, bu şartın yerine gelmesini sağlamaktır.

Form gönderilirken submit olayı oluşur ve bu olayın yönlendiricisi de onSubmit metodudur. Burada dikkat edilmesigerekn noktalardan biri eklenen butonun submit özelliğini sağlamasıdır. <input type="submit"......>

<html>
<head>

<script language="JavaScript">

function onay()

{
confirm("Form gönderilecek Onaylıyormusunuz")
}

</script>

</head>
<body>

<form action=”form_islem.pl” method=”post” onSubmit="onay()">
<input type="submit" name="buton1" value="gönder">
</form>

</body>
</html>

Formu göndermek için butona basıldığında form nesnesi için submit olayı gerçeleşir.Ancak Form etiketi içerisindeki onSubmit="onay()" yönlendirmesi, submit olayı gerçekleşmeden önce onay fonksiyonunu çalıştırır. Onay fonksiyonunda gördüğünüz “confirm” komutu, Javascript’e, Browser’ın kullanıcıdan OK (Tamam) ve Cancel (İptal) yazılı bir kutu ile onay almasını sağlar. Kullanıcı OK düğmesini tıklarsa, Browser, Javascript’e “true” (doğru), kullanıcı Cancel (İptal) düğmesini tıklarsa “false” (yanlış) değeri gönderecektir; sanılabilir ki, Javascript’e “true” değeri dönerse formu gönderilecek, fakat “false” değeri dönerse form gitmeyecektir.Bu doğru değil! Her iki değerde de form gidecektir; çünkü, yukarıdaki kodda Browser’ın Confirm kutusunun oluşturacağı değerin türü ile onSubmit olay yönlendiricisi arasında bir bağ kurulmuyor; başka bir deyişle onSumbit’e kendisine dönmesi gereken bir sonuç olduğu bildirilmiyor.

Bunu “return” anahtar kelimesiyle sağlarız. “return” (anlamı: geri dön) kelimesi, bir fonksiyona kendisini göreve çağıran unsura mutlaka bir değer göndermesi gerektiğini bildirir. “return” kelimesini kullanarak kodları tekrar yazarsak;

<html>
<head>

<script language="JavaScript">

function onay()

{
return confirm("Form gönderilecek Onaylıyormusunuz")
}

</script>

</head>
<body>

<form action=”form_islem.pl” method=”post” onSubmit="return onay()">
<input type="submit" name="buton1" value="gönder">
</form>

</body>
</html>

Hem fonksiyondaki confirm ifadesinden önce, hemde onSubmit ifadesinde ofonksiyon isminden önce return kelimesini yerleştirsdik. Yani onSubmit="return onay()" satırıyla; onay fonksiyonunu çalışır ve ordan gelen bilgiye göre hareket et diyoruz. FOnksiyonu tanımlarken yazdığımız return confirm cümlesiylede, karar kutusunu çalıştır ve sonucu, fonksiyonu çağıran yere geri döndür demiş oluyoruz.

DOlayısıyla kullanıcı/ziyaretçi “confirm” kutusunun OK (Tamam) düğmesini tıklarsa onSubmit yönlendiricisi Form’u gönderecek; Cancel (İptal) düğmesi tıklanırsa, onSubmit yönlendiricisi submit olayını durduracaktır.

NOT : Aynı durum bir bağlantıyı (<a>) çalıştırmadan öncede yapılabilir.Ancak bağlantılarda submitolayı değil click olayı olduğundan onsubmit yerine onclick yönlendiricisi kullanılır.

<html>
<head>

<script language="JavaScript">

function onay()

{

return confirm ( "javadiziler açılsınmı")

}
</script>

</head>
<body>

<form>
<a href = "javadiziler.html" onclick="return onay()"> TIKLA </a>
</form>

</body>
</html>

Bu durumda ilgili bağlantı kullanıcı confirm kutusunda OK tıklarsa aaçılacak , Cancel tıklarsa açılmayacaktır.

onReset

Formlara koyduğunuz Reset (Başa dön) düğmesi, bir Form’daki bütün bilgilerin silinmesini sağlar; Browser’ın Geri düğmesini tıklamak dahil, hiç bir eylem ziyaretçinin yanlışlıkla bastığı Sil düğmesinin sildiğini geri getiremez. Fakat programcı olarak siz böyle bir hatayı önleyebilirsiniz. Çünkü Sil düğmesinin oluşturduğu “reset” olayını yönlendiren onReset, size bu imkanı verir. Tıpkı onSubmit’teki gibi FORM etiketinize onReset tarafından devreye sokulacak bir doğrulama fonksiyonu koyabilirsiniz.

<html>
<head>

<script language="JavaScript">

function onay()

{
return confirm("Form verilerei silinecek Onaylıyormusunuz?")
}

</script>

</head>
<body>

<form action=”form_islem.pl” method=”post” onSubmit="return onay()">
<input type="reset" name="buton1" value="temizle">
</form>

</body>
</html>

Temizle butonuna basıldığında onay fonksiyonu çalışacak ve kullanıcının cevabına göre verilersilinecek veya aynı kalacaktır.

onChange

HTML sayfanızda olabilecek tek değişiklik, ziyaretçinin içine bir şeyler yazabildiği veya bazı işaretler koyabildiği üç alandır: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Metin ve metinalanın içini tıklayarak Browser Penceresi’nin odak noktasını buraya getiren ziyaretçi klavyesine basarak, bu alanlara metin girebilir; bu HTML sayfasında “change” (değişiklik) olması anlamına gelir Select etiketinin sağladığı şıklardan birini seçen ziyaretçi de sayfada değişiklik olayına yol açar. “change” olayı halinde, onChange bu olayı yönlendirir. Javascript programcısı olarak siz bu yönlendiriciye belirli bir fonksiyonu çalıştırmasını bildirebilirsiniz.

function degisim()

{

form1.metin2.value="üsttekimetin kutusunun içeriği değişti"

}
</script>

</head>
<body>

</body>
</html>

Burada metin1 isimli metin kutusuna birşey yazıldığı zaman, change olayı oluşacaktır.onChange="degisim()"yönlendirmesi le degisim fonksiyonu çalışcak ve metin2 isimli kutunun içeriği (value) "üsttekimetin kutusunun içeriği değişti" olacaktır. Change olayının tam olarak gerçekleşmesi için metin1 isimli kutuya birşey yazıldıktan sonra enter tuşuna basılmalı veya sayfada başka bir yere tıklanmalıdır.

onFocus ve onBlur

Bilgisayarda bir program açıkken, Mouse ile programın başlık çubuğunu tıklayın; çubuğun renginden işletim sisteminin dikkatinin bu programın penceresinde yoğunlaştığını göreceksiniz. Bir de masaüstünde boş bir yeri tıklayın; bu pencere sistemin odak noktası olmaktan çıkacaktır. HTML sayfasında da Browser’ın Focus’unu (dikkat odağını) üzerinde topladığı veya odağın çekildiği üç nesne olabilir: Text (Metin), Textarea (Metinalanı) ve Select (Seç) etiketleri. Çünkü ziyaretçinin sadece bu etiketlerin oluşturduğu nesnelere klavyenin dikkatini çekme hakkı vardır. Bu nesnelerden biri tıklanınca Browser’ın focus’u bu nesneye dönmüş, yani “focus” olayı olmuş demektir; bu durumda, biz de bu olayı yönlendiren onFocus’u kullanabiliriz. Aynı mantıkla, ziyaretçi Browser’ın focus’unu bu nesneden başka bir yere çektiği zaman bu nesne focus’u kaybeder, “blur” (netlikten çıkma, flulaşma) olayı olur. Bunuda onblur ile yönlendirebiliriz.

<html>
<head>

<script language="JavaScript">

function temizle()

{

form1.metin1.value = " "

}
</script>

</head>
<body>

<form name="form1" id="form1">

<input type="text" name="metin1" id="metin1" value="adınızı yazınız" onFocus="temizle()">

</form>

</body>
</html>

Burada metin kutusunun içeriği value="adınızı yazın" komutundan dolayı dolu olarak gelir.Ancak buray afocus sağlandığında yanimouse ile kutunun içi tıklandığı anda onFocus="temizle()" ile temizle fonksiyonu çalıştırılır.Fonksiyon içerisindeki form1.metin1.value = " " ifadesi, form1 içindeki metin1 isimli kutunun value değerini [" "] yani boş yap demektir. Dolayısıyla sayfa açıldığında kutu içerisinde "adınızı yazın" yazıyor iken mouse ile tıklanır tıklanmaz bu yazı silinecektir.Kutunun içi boşaltılacaktır.

onMouseOver ve onMouseOut

Javascript dünyasında en çok kullanılan iki “event” varsa, birincisi Mouse işaretçisinin bir nesnenin üzerine gelmesi (“MouseOver” olayı), ikincisi ise Mouse iuşaretçisinin bir nesnenin üzerinden çekilmesi (“MouseOut” olayı) sayılabilir. Bu iki olayı onMouseOver ve onMouseOut yönlendiricileri ile karşılayabiliriz. Gerçekte bu iki olayla, Mouse işaretçisi bir bağlantı satırı veya grafiğinin ve bir grafik haritasının (Map, Area) üzerine geldiği veya üzerinden çekildiği zaman ilgilenebiliriz; çünkü diğer HTML unsurları ve Javascript nesneleri ile Mouse işaretçisinin işaretleme ilişkisi yoktur.

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te Fonksiyon</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">

</SCRIPT>
</HEAD>
<BODY>
<p onMouseOver="faregelince()" onMouseOut="return faregidince()"> PC World-Türkiye </p>
</BODY>
</HTML>

Mouse işaretçisini PCWORLD-TÜRKİYE yazısının üzerine getirirseniz, faregelince() fonksiyonu ile yeni bir pencere yaratılır; geri çektiğinizde de faregidince() fonksiyonu ile bu pencere otomatik olarak kapatılır.[yenisayfa.close()]

onLoad ve onUnload

Javascript açısından Browser’ın bir HTML sayfasını görüntülemeyi bitirmesi sayfanın “load” (yükleme), başka bir sayfaya geçilmesi ise önceki sayfanın “unload” (yüklenmişlikten çıkması) sayılır; ve bu iki olayı onLoad ve onUnLoad yönlendiricileri ile karşılayabiliriz. HTML dosyasının iki bölüm (HEAD ve BODY) olduğunu biliyorsunuz. Browser açısından asıl sayfa, BODY bölümüdür; HEAD bölümündeki komutlar sayfanın nasıl görüntüleneceğine ilişkin komutlar içerir.

Bir sayfada başka bir sayfayı işaret eden bir bağlantıyı tıkladığınızda, Browser açık olan HTML kodunu silecek, yani sayfayı yüklenmemiş hale getirecektir. Bu Javascript açısından bir UnLoad olayıdır. O halde, BODY etiketimize onUnLoad yönlendiricisini harekete geçiren bir fonksiyonu çağırmasını söyleyebiliriz

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<TITLE>JavaScript'te onUnLoad</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function welcome()
{
alert("hoşgeldiniz!");
}
function gulegule()
{
alert("güle güle");
}

</script>
</head>
<bodyonLoad="welcome()" onUnLoad="gulegule()">
<a href="javadiziler.html">Baska sayfa</A>
</body>
</html>

Burada sayfa açılırken welcome fonksiyonu ve unLoad olayıyyla ekranda hoşgeldiniz yazan uyarı kutusu görünecektir.Sayfadaki bağlantı tıklandığında ise unload olayı gerçekleşecek ve onUnLoad yönlendirmesiye gulegule fonksiyonu çağıralacak, ekrana güle güle yazan uyarı kutusu gelecektir.

onError ve onAbort

onError

Ziyaretçinin Browser’ı açmak üzere olduğu sayfayı transfer hatası yüzünden açamaz, HTML veya Javascript kodunu doğru yorumlayamazsa, Error (hata) olayı oluşur. Javascript, sadece kendisine ilişkin hata durumlarını onError ile yakalayabilir.

HTML tasarımı sırasında grafik dosyalarının sayfaya veya sitenin kök dizinine göre göreli adresinin yazılmasında sık yapılan hatalar, grafik unsurların aktarılmasını engeller. Bu tür hatalarda ziyaretçinizi şu Javascript koduyla uyararabilirsiniz:

Resim yüklenemez ise (örneğin src ile belirtilen yol yanlışsa) Error oluşacak ve onError yönlendirmesi ile ekranda uyarı verilecektir. Burada iki şeye dikkat: ilki alert için ayrı bir fonksiyon tanımlanmamış,kendisi doğrudan hazır bir fonksiyon olduğu için doğrudan argumanı (mesaj) ile beraber onError dan sonra yazılmış. İkincisi on Error olduğund açalışacak fonksiyon belirtilirken çift tırnak kullanılmış ancak alert fonksiyonunun mesajı yazılırken tek tırnak kullanılmış.Java her ikisinide kabul eder.Bu gibi durumlarda yani ayrı ayrı iki tırnaklı ifade yazıalcağı zaman, biri çift biri tek yapılır ki scriptin kafası karışmasın!

onAbort

Sayfalarınıza koyduğunuz grafik unsurlar ziyaretçilerinizin sabrını taşırır da, grafiklerin sonuna kadar aktarılmasını beklemeden Browser’ın Stop düğmesini tıklarlarsa, bunun sayfanız için kötü sonuçları olabilir. Grafik unsurlara bağlantı belirten alan haritaları (AREA, MAP) etiketleri koymuş olabilirsiniz. Ziyaretçinin Browser’ının Stop düğmesini tıklaması, Javascript açısından abort (yarıda kes) olayının doğması demektir; bunu onAbort ile yönlendirebilirsiniz. Bu yönlendiriciden yararlanarak ziyaretçiye sayfanın eksik olduğunu bildirmeniz yerinde olur. Bunun için IMG etiketini şöyle yazabilirsiniz:

Bu durumda resim açılmadan kullanıcı stop düğmesinitıkalrsa abort işlemi olur ve ekranda alert kutusu görünür.