ABECEM Net logo
ABECE Nazar Boncuğu
ABECE Oyun: Web Kursu Ana Sayfa
Bu sayfayı arkadaşınıza önerin.










Tüm Haberler için tıklayınız

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.

  1. 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>

  2. 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>

  3. 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>

  4. 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>

  5. 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>

  6. 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>

  7. 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.


Copyright © ABECE Web Hizmetleri: http://www.abecem.net