Download Free Designs http://bigtheme.net/ Free Websites Templates
Başlangıç / Programlama / Javascript (Olaylar)

Javascript (Olaylar)

Javascript

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.

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.’)”>

Hakkında Volkan ŞABAHAT

İlginizi Çekebilir

Scratch Eğitimi

Scratch Eğitimi – Videolu Dersler 4 (Paint Uygulaması)

Scratch programı ile bugün basit bir paint uygulaması yapacağız. Nasıl yapılacağını videoyu izleyerek öğrenebilirsiniz. Ben ...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Güvenlik Kodu * Time limit is exhausted. Please reload CAPTCHA.