ANA SAYFA -
HTML DERSİ -
JAVASCRİPT DERSİ -
JAVASCRİPT KODLARI -
CSS DERSİ -
ÖNERİLER
10. OLAYLAR
Bir olayın oluşması, mevcut durumda bir değişikik olması anlamına gelir.Javascript açısından kullanıcının
bir yere tıklaması, mousunu oynatması, sayfanın yüklenmesi, sayfadan çıkılması hep birer olay olarak
yorumlanır. Olayların genel kullanımları:
| <form name=isim olayAdı="ilgiliFonksiyon()"> |
şeklindedir. Bu kullanımı her olay için verilen örnekleri inceleyerek daha iyi anlayabilirsiniz.
JavaScript'de olaylar ve adlarını aşağıda görmektesiniz.
- onClick
Mouse'un tıklanması olayıdır. Tıklanabilecek, dolayısıyla onClick metodu'nun kullanılabileceği
yerler submit, reset, buton, radio, checkbox ve link nesneleridir.
Aşağıdaki örnekte onClick ile bir text nesnesine yazı yazdıracağız.
<html>
<head>
<title>onClick</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="Javascript1.2">
<!--
function
yazdir(formNesnesi)
{
formNesnesi.value="Bu işi onClick ile
yaptık!"
}
-->
</script>
</script>
</head>
<body
>
<form name="form1" >
<input type="Button"
value="Tıklayın" onClick="yazdir(document.form1.mesaj)">
<input
type="text" name="mesaj"
value="1">
</form>
</body>
</html> |
- onMouseOver, onMouseOut
Mouse'un imleçinin bir nesne üzerinde olması onMouseOver, o nesne üzerinde olmaması onMouseOut
olayı olarak adlandırılır.
Aşağıdaki örnekteki linkin üzerine gelince yeni bir pencere açılacak, açılan bu pencere mouse'u
linkin üzerinden çekince kapanacak.
<html>
<head>
<title>onMouseOver,onMouseOut</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="Javascript1.2">
function
ustunde()
<!--
{
yenipencere=window.open("oneri","oneriPenceresi","toolbar=0,width=200,height=200")
yenipencere.document.writeln("<h3>Yeni
sayfa!</h3>")
}
function
disinda()
{
yenipencere.close()
}
-->
</script>
</head>
<body>
<a
href="#" onMouseover="ustunde()"
onMouseout="disinda()"><b>Ustüme
Gel!</b></a>
</body>
</html> |
- onLoad, onUnLoad
web sayfasının yüklenmesi onLoad, sayfadan çıkılması ise onUnLoad olayına karşılık gelir.
Aşağıdaki örnekte sayfa yüklenince bize browser'ımızın hangisi olduğunu söyleyecek, çıkarken
ise bir uğurlama mesajı verecek
<html>
<head>
<title>onLoad,
onUnLoad</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="Javascript1.2">
<!--
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> |
- onSubmit, onReset
Form'ların vazgeçilmez ögeleri olan submit butonuna basılması onSubmit, reset butonuna
basılması onReset olayıyla tanımlanır.
Aşağıdaki örnek formu gönderirken ve silerken bizim onayımızı isteyecek.
<html>
<head>
<title>onSubmit,onReset</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="JavaScript1.2">
<!--
function
dogruMu()
{
return confirm("Bilgilerin doğru olduğuna emin
misiniz?")
}
function sor()
{
return confirm("Silmek
istediğinize emin
misiniz?")
}
-->
</script>
</head>
<body>
<form
name="form1" onsubmit="return dogruMu()" onReset="return sor()"
method="post">
<p><h3>Isim</h3></p>
<input
type="text" size="30"
name="isim">
<p><h3>adres</h3></p>
<input
type="text" size="30"
name="adres">
<p><h3>telefon#</h3></p>
<input
type="text" size="30" name="telefon">
<p><input
type="Submit" value="Gonder">
<input type="Reset"
value="Sil"></p>
</form>
</body>
</html> |
- onChange
Text veya textarea unsurlarına birşey yazılması ya da select unsurunda bir seçim yapılması onChange olayına
karşılık gelir.
Aşağıda onChange ile yapılmış bir örnek görüyoruz.
<html>
<head>
<title>onChange</title>
<METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="JavaScript1.2">
<!--
function
yaz(secnesnesi){
return
secnesnesi.options[secnesnesi.selectedIndex].value}
-->
</script>
</head>
<body>
<form
name="form1">
<select name="mesaj" size="3"
onchange="alert(yaz(this.form.mesaj))">
<option name="mesaj"
value="Bu">mesaj1
<option name="mesaj"
value="program">mesaj2
<option name="mesaj" value="onChange
komutu ile yapılmıştır">mesaj3
</select>
</form>
</body>
</html> |
- onFocus, onBlur
Sayfanızdaki 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ırabilriz; aynı şekilde
kullanıcının dikkatinin başka yöne kayması halinde yapılacak başka bir iş tanımlayabiliriz.
<html>
<head>
<title>onFocus,onBlur</title><
BR><METAcontent=text/html;CHARSET=iso-8859-9
http-equiv=Content-Type>
<script
language="JavaScript1.2">
<!--
function
dogru()
{
document.form1.mesaj.value="Lütfen hata
yapmayın!"
}
function
sor()
{
document.form1.mesaj.value="isminiz
alındı"
}
-->
</script>
</head>
<body>
<form
name="form1" method="post">
<p><h3>Lütfen
isminizi yazınız!</h3></p>
<input type="text"
size="20" name="isim" onfocus="dogru()"
onblur="sor()">
<p><input type="text"
name="mesaj"></p>
</form>
</body>
</html>
|
- onAbort, onError
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.
|
