ÞAHÝN KALEM

	Sign In Sign-Up

JAVA

HAREKET

Javascripte olaylar-event

Javascript ile hazrilanan programlarin çalismalari için belli bir hareketin olusmasi gerekir. Bu harekete event adi veriliyor. Hareketen(olay) kastimiz bir butona basilmasi, bir linkin üzerine gelinmesi veya bir formun içeriginin gönderilmesi gibi durumlardir.

Javascript ile hazirlanan bir programin pencere açmasini istedigimiz zaman pencereyi açmak için bir hareketin olusmasi gerekmektedir. Bu hareketi bir butonun tiklanmasi-onClick-, html sayfasinin yüklenmesi-onLoad-, bir resmin üzerine gelinmesi-onMouseOver- gibi eventler ile saglayabiliriz.

Simdi basit bir örnek ile onClick eventini görelim:

<form>

</form>

Bir buton olusturduk. Butona tiklandiginda ise alert metodu ile bir mesaj kutusuna mesajimizi yazdiriyoruz. Burada butona tiklandigini javascriptin anlamasi için kullandigimiz metod onClick eventidir. Bu event butona tiklandigini javascripte bildirir ve bu event ile etiketlenmis fonksiyon ve/veya programi çalistirir.

Biz bu bölümde su eventleri görecegiz; onClick, onFocus, onBlur, onLoad, onUnLoad, onMouseOver, onMouseOut, onSubmit, onReset, onSelect.

onClick eventi-

Bir linke, bir butona, bir alana veya bir seçim kutusuna mouse ile tiklama durumunu kontrol eden evente verilen ad onClicktir. onClick eventini su sekilde kullaniyoruz:

<form>

</form>

Burada input tagi ile olusturdugumuz butona onClick parametresini ekliyoruz. fonksiyonAdi() seklinde tanimladigimiz bölüme butona tiklandiginda çalistirmak istedigimiz fonksiyon adini ve gerekli parametreleri yaziyoruz.

Basit bir örnek ile bir pencereyi buton ile açalim. Javascript ile pencere açmak için kulladigimiz metod window.open() dir. Açilacak pencereye bir çok parametre girilerek pencere özellikleri ayarlanabilir. Hazirlayacagimiz program ile sadece pencerenin genislik ve yüksekligini belirleyecegiz. Diger ayarlamalar default olarak kalacaktir.

<!-- gizle

function yeniPencere(sayfa){

window.open("sayfa","","width=300, height=200");

}

// gizleme sonu -->

</script>

Hazirladigimiz yeniPencere fonksiyonu bir pencere açmak için kullaniliyor. Bu fonksiyona bir deger aktariyoruz. sayfa adli degisken ile fonksiyona açilacak pencerede gösterilecek html sayfasinin adi giriliyor. Açilan pencerenin genisligi 300 ve yüksekligi ise 200 olarak belirleniyor.

Simdi bu fonksiyonumuzu çalistiracak onClick eventini nasil kullanacagimizi görelim.

<form>

</form>

Hazirladigimiz butona onClick eventini ekledik. Bu event ile yeniPencere fonksiyonunu çagiriyoruz. Yine bu fonksiyona açilacak yeni sayfayi gönderiyoruz.
Burada onClick="yeniPencere('yenisayfa.html')" seklinde kullanarak istedigimiz sonuca ulasiyoruz.

Kodlarin tamami:

<html>

<head>

<title>onClick eventi</title>

</head>

<body>

Yeni pencere açmak ve onClick eventini görmek için butona tiklayin.

<form>

</form>

</body>

</html>

Bu sayfayi deneme.html olarak kayit edin. Bu arada yenisayfa.html için bir html dosyasi olusturmamiz gerekiyor.

<html>

<head>

<title>yeni sayfa</title>

</head>

<body>

Yeni sayfamiz açildi.

</body>

</html>

onFocus, onBlur eventleri-

Windows ortaminda çalisanlar bir pencereye tiklandiginda bu pencerenin renginin degistigini bilirler. Bunun nedeni pencerenin kullanicidan komut almaya hazir olmasidir. Kullanicidan ayni anda sadece bir pencere komut alabilir. Bunun için de pencerenin aktif hala geçmesi gerekir. Bu durum javascript içinde aynidir. Mesela bir text alanina yazi yazabilmemiz için bu text alaninin aktif hale gelmesi gerekir. Bir alanin aktif hale gelmesine focus bir alanin aktif hale geçtigini belirten evente ise onFocus adiveriyoruz.

Yine bir pencere focus durumundan çiktiginda yani kullanici ile iletisimi bittigi andaki duruma ise blur, bu durumu kontrol eden evente ise onBlur adi veriyoruz.

onFocus ve onBlur eventlerini text alanlarinda ve texterea alanlarinda kullanabiliriz. Simdi bu konuda bir örnek görelim. Yapacagimiz örnekte iki text alani açacagiz. Text alanlari blur durumunda ikin yazi yazamazsiniz seklinde bir yazi yazilacak, durum focus oldugunda ise artik yazi yazabilirsiniz yazisi yazilacaktir. Bu durumu daha net bir sekilde görmek için iki text alani kullanacagiz. Öncelikle form bölümünü görelim.

</form>

Formu hazirlarken öncelikle forma bir ad verdik. name parametresi ile verdigimiz bu isim focus dur. Bu isim seçimliktir. Dilediginiz bir ismi verebilirsiniz.
Yine input parametresi ile bir text alani olusturduk. Bu alana da bir isim veriyoruz. Ayrica ismin yaninda onFocus="yazilir(1)" seklinde bir tanimlama ile focus aninda yazilir(deger) fonksiyonunun çalismasini sagliyoruz. 1 olarak kullandigimiz deger ise fonksiyona hangi text alanina yazilacagini belirlemek için kullaniyoruz.
onBlur="yazilmaz(1)" seklinde tanimlama ilede blur halinde yazilmaz(deger) fonksiyonunu çagiriyoruz. Ikinci text kutusu içinde ayni tamimlamalari yapiyoruz.

Burada dikkat etmemiz gereken javascriptin bir formu ve/veya form elamanini kullanabilmesi için forma ve elemanlarina mutlaka birer isim vermemiz gerçegidir. Nesnesel bir programlama dili olan javascript formalari nesne olarak görüyor ve mutlaka bir isim verilmesini istiyor.

Simdi scriptimizi görelim.

<!--

function yazilir(hangiAlana){

if(hangiAlana==1) document.focus.textalani1.value="Yazi yazabilirsiniz : ";

if(hangiAlana==2) document.focus.textalani2.value="Yazi yazabilirsiniz : ";

}

function yazilmaz(hangiAlana){

if(hangiAlana==1) document.focus.textalani1.value="Yazi yazamazsiniz!!!";

if(hangiAlana==2) document.focus.textalani2.value="Yazi yazamazsiniz!!!";

}

//-->

</script>

Öncelikle yazilir(hangiAlana) fonksiyonunu inceleyelim. Bu fonksiyon onFocus halinde çalisacaktir. Fonksiyona girilen geger local hangiAlana degiskenine aktarilir. Bu degisken hangi text kususuna degerin girilecegini kontrol eder. Sonra bir kontrol blogu bulunuyor. Ilk kontrol ilk text kutusunun focus oldugunu kontrol eder. Eger ilk text kutusu focus haline gelmisse su islemi yapar. Önce kisa bir açiklama; document bizim html belgemize javascriptin verdigi isimdir. <html>...</html> taglari arasinda kalan bölümdür. focus ise olusturdugumuz forma verdigimiz isimdir. textalani1 ilk olusturdugumuz text alanina vedigimiz isimdir ve value ise text alaninin içerigidir; yani bu alana yazili olan ve/veya yazilacak degerdir. Bu kisa açiklamadan sonra ki nesne yapisi bölümünde daha ayrintili olarak görülecek yaptigimiz isi görelim.

if(hangiAlana==1) eger textalani1 focus durumuna geçti ise;
document.focus.textalani1.value= sayfamizdaki focus formunun textalani1 adli bölümünün degerini
"Yazi yazabilirsiniz : "; Yazi yazabilirsiniz : olarak degistir. Yapilan islem bu kadardir. Yine ikinci kontrol blogu ise ikinci text alaninin focus haline gelmesi durumunda ayni islemi yapacaktir.

Ikinci fonksiyonumuz olan yazilamaz(hangiAlana) fonksiyonu da ayni mantikla çalisir. Text alani blur haline geldiginde bu fonksiyon çalisir ve blur haline gelen textalanina Yazi yazamazsiniz!!! uyarisini yazar.

Peki ne isimize yarayacak focus ve blur durumlari. Bu program yazarken bize yardimci olacaktir. Bazi durumlarda açiklama yapmak, bazi durmlarda ise bir alanin isaretlendigi ani tespit etmek ve hemen bir müdahale yapmak için kullanabiliriz. Meselan bir alan focus durumuna geçtiginde yeni bir pencere açabilir ve blur durumuna geçtiginde bu pencereyi otomatikman kapatabiliriz. focus durumuna geçildigini bir mesaj olarak verebiliriz gibi. Simdi bu konuyla ilgili örnegimizi deneyelim.

Yazý yazamazsiniz : Yazý yazabilirsiniz :

Dikkat ettiyseniz yazi yazilacak hale gelen kutuya Yazi yazabilirsiniz : uyarisi yaziliyor. Blur durumuna düsüldügünde ise Yazi yazamazsiniz!!! uyarisi yaziliyor. Iki textalani da blur haline düstügünde; bunu sayfanin bos bir yerini tiklayarak veya baska bir pencereyi tiklayarak görebiliriz; iki textalaninada Yazi yazamazsiniz!!! uyarisi yazilacaktir

onLoad, onUnLoad eventleri-

Web sayfasinin yüklendigini belirten evente javascript onLoad adi veriyor. Bu event sayfanin yüklenmesi bittiginde harekete geçer ve istenilen fonksiyonu çagirir.
Yine bir web sayfasindan çikildigini kontrol eden event ise onUnLoad eventidir. Bir websayfasi ile isimiz bittiginde diger web sayfasina geçerken çalisan bu event istenilen fonksiyonu çalistirir.

onLoad eventine deginmek istyorum. Bu event bize çok gereklidir. Bunun nedeni javascriptin html belgesi içerisinde olan bir çok elemeni(form, frame, resim gibi.) nesne olarak görmesi ve bunlar üzerinde islem yapabilmesidir.
Bu eventin ne zaman lazim oldugunu bir örnek ile anlatalim. Bir saat scripti yazdigimizda bu script head taglari arasina yazilir. Fakat script sonuçlari bir form içerisindeki text kutusuna yazar. Bu durumda script çalistiginda form daha yüklenmemis ve dolayisiyla yoktur. Javascript ise bu forma saati yazmak istediginde bir hata mesaji verecek ve duracaktir.
Bu gibi durumlarin önüne geçmek için sayfanin yüklenmesini beklemek ve scripti sayfa yüklendikten sonra çalistirmakta fayda bulunuyor. Bununda onLoad eventi rahatlikla yapiyor.

onLoad ve onUnLoad eventleri body tagi içerisinde kullanilirlar.
<body onLoad="saat()" onUnLoad="gulegule()"> gibi.

Bir örnek üzerinde sonucu görelim. Hazirlayacagimiz script sayfa yüklendiginde bir formla hazirlanmis text kutusuna hosgeldin yazsin. Fakat önce ismimizi isteyerek. Sonra ise sayfadan çikarken güle güle desin.

<html>

<head>

<title>denemeler</title>

<!-- gizle

function giris(){

isim=prompt("Lütfen adinizi giriniz : ","");

mesaj=isim+" hosgeldin.";

document.yaziForm.yaz.value=mesaj;

}

function cikis(){

alert("Sayfamizi ziyaret ettiginiz için teskkürler.");

}

// gizleme sonu -->

</script>

</head>

Bu bölümde sayfa içerigi bulunuyor.

<form>

</body>

</html>

Hazirladigimiz script iki fonksiyondan olusuyor. Birici fonksiyon giris() isimli. isim adli degiskene propmt ile alin kullanici adi giriliyor. mesaj degiskenine ise isim degiskeni ile birlikte hosgeldiniz. kelimesinin birlestirilmesi sonucu deger ataniyor. Elde edilen mesaj yaziForm un yaz isimli textkutusuna yazliliyor. Aslinda dikkat etmemiz gereken konu giris() fonksiyonunun çagrilmasidir. Bu fonksiyonu sadece onLoad="giris()" seklinde body tagina bir parametre olarak çagirdik. Bu sayede sayfa yüklendikten sonra giris() fonksiyonunun çalismasini sagladik.

cikis() adli fonksiyon ise sadece ekrana bir mesaj basiyor. Önemli olan bu mesaji ekrana basmasi için fonksiyonun onUnLoad eventi ile çagrilmasidir. Sayfadan herhangi bir nedenle çikildiginda unOnLoad="cikic()" kondlari cikis() fonksiyonunu çagiracak ve bu fonksiyon görevini icra edecektir.

onMouseOver, onMouseOut eventleri-

Siklikla kullanacagimiz eventler olan onMouseOver ve onMouseOut ikilisi mouseun bir link veya baska bir elemanin üzerine gelip gitmesini kontrol ederler. onMouseOver mouse bir linkin üzerine geldiginde gerekli fonksiyonu çalistirir. onMouseOver ise mosuse linkin üzerinden gittiginde gerekli fonksiyonu çalistirir.
Bu eventlerin çokça kullanildigi hareketli butonlarin nasil olusturuldugunu bir örnek üzerinde görelim. Öncelikle iki adet buton resmi hazirlayin; biri mouse buton üzerinde degilken, digeri mouse buton üzerinde bulunuyorken.

Buton resimlerinin hazir oldugunu kabul ederek devam ediyorum.
Javascript resimleri nesne olarak kabul eder ve adi ise Image dir. Her resim Image nesnesinin bir elemanidir. Bu nedenle bir resmi yüklemeden önce javascript resme bir yer açacak ve isim verecektir. Bunu su seklilde yapiyoruz.
var resim=new Image(); // resim egiskenini Image olarak tanimladik.
resim.src="yeniresim.gif"; //yeni Image nesnesine yeniresim.gif atandi.
var resim=new Image() seklinde tanimlama su islemi javascripte yaptiriyor. öncelikle resim isimli bir degisken adi tanimliyor; sonra bu degiskenin yeni bir nesne olarak atiyor(new) ve bu nesnenin bir Image nesnesi oldugunu belirtiyor. resim artik bir nesne olduguna göre üzerinde Image nesnesinin metodlarini uygulamamiz mümkün olmaktadir. Ilk olarak bu nesneye bir deger atiyoruz. Bunu resim.src metodunu kullanarak yapiyoruz. src metodu bir Image nesnesine deger atamak için kullanilir. Atanacak resmin tam yolu verilmelidir.
resim.src=yeniresim.gif; seklinde resim nesnesine yeniresim.gif resmi atanmis oldu.

Simdi scriptimizi hazirlayalim. Scriptimiz iki adet Image nesnesi tanimliyor.

<!-- gizle

var butonBir=new Image();

var butonIki=new Image();

butonBir.src=buton1.gif;

butonIki.src=buton2.gif;

// gizleme sonu -->

</script>

Burada butonBir ve butonIki nesnelerini tanimladik ve onlara deger atadik. Bu nesneleri bir resim üzerinde kullanmak istedigimizde kullanacagimiz resme bir isim veriyoruz.
<img src="bizimresim.gif" name="birIsim"> böylece kullandigimiz resmin bir adi oluyor ve biz javascriptle bu adi olan resme müdahale edebiliyoruz. Bunu su sekilde yapiyoruz.

<a href="yeni.html" onMouseOver="tablo.src=butonIki.src"

onMouseOut="tablo.src=butonBir.src">

Kullanima dikkat edin. img tagi içerisinde kullanacagimiz resme bir isim veriyoruz. Bu örnegimizde tablo adini resme verdik. Artik tanimladigimiz resmin adi tablo dur ve javascript bu resme ulasmak için tablo adini kullanacaktir. tablo ya bir deger atamak için src metodunu kullanacagiz; tablo.src= bir deger atamamiz gerekiyor. Bu degeri daha önce tanimladigimiz butonIki.src ile belirtiyoruz. tablo.src=butonIki.src seklinde bir tanimlama ile tablo adli resme daha önce tanimladigimiz butonIki.src resmini atiyoruz. Basit bir kullanim.

Bir resmin degerini degistirmenin yolunu ögrendik. Peki bu ögrendigimizi nasil uyguluyoruz. onMOuseOver ve onMouseOut yöntemlerini kullaniyoruz. Peki nasil? Bu eventleri A tagi içerisinde kullaniyoruz. Bu tag bir link olusturuyor. Bu linkin üzerine gelindigini belirleyen onMouseOver eventi ile mouse link üzerine geldiginde tablo resminin degerini degistiriyoruz. onMouseOver="tablo.src=butonIki.src" butonIki olarak belirledigimiz resmin üzerine gelince görülecek resim tablo resmine ataniyor. Böylece otomatikman tablo resmi oldugu gibi degisir.
Daha sonra ise linkin üzerinden mouse çekildiginde ki bu durumu onMouseOut eventi kontrol eder; tablo eski haline dönmelidir. Böylece butonumuz hareketli oldugu gibi bir izlenim olusturur. Bunu da onMOuseOver="tablo.src=butonBir.src" tanimlamasi ile yapiyoruz. Böylece buton için mouse yok iken olmasi gereken seklini tanimlamis olduk.

Yöntemi anladigimizi umarim. Önce iki resim tanimliyoruz. Bunlari yüklüyoruz. onMouseOver halinde kullanilan resim degistiriliyor ve onMouseOut halinde resim eski durumuna çevriliyor. Sonuç hareket eden bir buton.

onChange eventi-

Text, textarea, secim kultularinda bir degisiklik oldugunu anlayan event onChange dir. Bir text alanina bilgi girildiginde içerigi degisir, bu durumda bir hareket olusacaktir.

Bu durum özellikle menü hazirlarken isimizi kolaylastiran bir haldir. Bu nedenle bir menü içerisinde onChange eventini görelim.

<html>

<body>

<head>

<title>onChange eventi</title>

<!-- eski browserlerden gizle

function git(){

adres=document.menuForm.secim[document.menuForm.secim.selectedIndex].value;

window.location=adres;

}

// gizleme sonu-->

</head>

<body>

<option>Gideceginiz bölüm

<option value="http://members.xoom.com/bilgicom">Gezgin

<option value="http://members.xoom.com/bilgicom/sayfalar/css/">Css nedir

p><option value="http://members.xoom.com/bilgicom/sayfalar/jscript/">Javascript örnekleri

</select>

</form>

</body>

</htmle>

Hazirladigimiz formun içerigi degistiginde onChange eventi git() fonksiyonunu çagiriyor. git() fonksiyonu ise formun yeni içerigine göre seçilen adrese gidiyor. Bunun için bir menü formun ürettigi degeri bulmayi görelim:
adres=document.menuForm.secim[document.menuForm.secim.selectedIndex].value;
aslinda document.menuForm.secim.value; bize bir menü içerisindeki textalaninin degerini verecektir. Fakat bir seçim menüsü oldugu zaman bu menünün içerigi bir indexte tutulur. selectedIndex adi verilen bu index ile yapilan seçimin sonucu görülecekti. selectedIndex i kullanirken öncelikle forma ulasmak için gerekli olan; document.menuForm.secim yazilimini yaziyoruz. Böylece menuForm unun secim adli kutusuna ulasiyoruz. secim bir seçim kutusu olduguna göre bu kutunun o anki degerini elde etmek için selectedIndex elemanindan yararlaniyoruz.
[ducument.menuForm.secim.selectedIndex] bu sekilde bir yazim menuForm.secim.selectedIndex elemanini verir. Bütün bu islemden sonra .value; yazarak

<=Geri