Event Handlers - Java Script

krivac: Mithat Hackovic

Sadrzaj

Uvod
Kontrolisanje polozaja misa
Slika kao link
Drop Down Meny

Uvod

JavaScript nam daje mogucnost da saznamo i jednim dijelom kontrolisemo ono sto se dogadja kod korisnika (client-side). Moguce je znati koju rezoluciju korisnik korsti, onda operativni sistem, citac (IE ili Netscape), trenutno vrijeme, aktivne prozore i jos mnogo toga.

Najinteresantnija upotreba javascripta je kontrolisanje polozaja misa. Odredjeni script se izvrsava u zavisnosti od toga sta vi radite sa misem. U primjeru 1 mozete pogledati jedan mali script koji koristi tag ONMOUSEOVER i poziva razlicite slike u zavisnosti gdje se mis nalazi tj. ako predjete misem iznad linka Pazi Lijevo , Pazi Desno ili iznad slike. Tada se pozivaju funkcije lijevo(), desno() i vrati() npr:

<A HREF="" ONMOUSEOVER="lijevo();return true"> Pazi Lijevo </A>

Ako autor neke HTML stranice zeli da kontrolise sta posjetioci te stranice trebaju da vide u odredjenim situacijama, moze se koristiti dogadjajima (eng: events) koji se registruju prilikom koristenja. Ti dogadjaji se kontrolisu pomocu Event handlers. Npr: Kada kliknete misem onda se taj dogadjaj referira kao click a odgovor ili reakciju mozete postici pomocu event handler-a: onClick (npr: pozivanjem neke funkcije). Dogadjaji su podijeljeni prema tome ko ih moze registrovati. Npr A tag posjeduje sljedece Event handlers

onMouseOver
onMouseOut
onLoad
onFocus
onBlur

IMG tag posjeduje sljedece Event handlers

onAbort
onError
onKeyDown
onKeyPress
onKeyUp
onLoad

top

Kontrolisanje polozaja misa

(onMouseOver)

Primjer 1

Pazi Lijevo

Pazi Desno

Script za primjer iznad izgleda ovako

<script language="JavaScript">
<!--// sakrij od starih citaca

slika1 = new Image();
slika1.src = "zajedno.jpg";

slika2 = new Image();
slika2.src = "zajedno2.jpg";

slika3 = new Image();
slika3.src = "zajedno3.jpg";

function lijevo(){
	document.slika1.src = slika3.src;
}

function desno(){
	document.slika1.src = slika2.src;
}

function vrati(){
	document.slika1.src = slika1.src;
}// --></script>

Ovaj dio treba da stoji u HEAD tag-u da jer se tako ovaj dio prvo evaluira. Objasnicu redom sta koji red znaci


slika1 = new Image();

slika1.src = "zajedno.jpg";

Ovim stvaramo novu sliku u memoriji koja ima ime slika1. Ova dva reda mogu napisati u HTML-u

<IMG SRC="zajedno.jpg" NAME="slika1">

samo sto zadnja komanda znaci da se ta slika prikazuje korisniku dok je u prvom slucaj u slika samo u memoriji

Svaka slika na stranici (documentu) ima svoje ime. Do svake slike se moze doci pomocu komande:

document.images[0] - (prva slika po redu)
document.images[1] - (druga slika po redu)

Ili ako u IMG tag-u napisete u NAME atributu nrp: NAME="slika" onda mozete se koristiti i komandom

document.images["slika"] ili
document.slika

Mi se koristimo ovim u sljedecoj funkciji

function lijevo(){
	document.slika1.src = slika3.src;
}

Prilikom poziva ove funkcije mi mjenjamo sliku koja se zove slika1 Isto bi smo postigli da smo napisali

function lijevo(){
	document.slika1.src = "zajedno3.jpg";
}

Ove tri funkcije se mogu napisati kao jedna u koju saljemo parametar. Npr:

function stavi(nova_slika){
	document.slika1.src = nova_slika ;
}

tako da bi vazilo sljedece

lijevo() je isto sto i: stavi('zajedno3.jpg')
desno() je isto sto i: stavi('zajedno2.jpg')
vrati() je isto sto i: stavi('zajedno1.jpg')

Stvar je vaseg ukusa kako ce te vi napisati.

Ovaj dio koda se ne izvrsava sve dok se ne pozove jer je ovo funkcija. U nasem slucaju mi koristimo Event Handler onMouseOver za A tag za poziv ove funkcije. HTML koji koristi ovaj script moze izgledati ovako

    <A HREF=""  
       ONMOUSEOVER="lijevo();return true">
       Pazi Lijevo</A>
    
    <A HREF="" 
       ONMOUSEOVER="vrati();return true">
       
    	<img src="zajedno.jpg" 
    		 border="0" 
    	 	 name="slika1">
    	 	 
    </A>
        
    <A HREF=""  
       ONMOUSEOVER="desno();return true;">
       Pazi Desno</A>

top

Slika kao link

(onMouseOver - onMouseOut)

Sigurno ste vec mnogo puta naisli na stranice koje koriste slike koje se mijenjaju kad nadnesete misa iznad linka. Princip je isti kao i u primjeru 1 samo sto se koristi i Event Handler onMouseOut.

Primjer 2

Kod koji se koristi u ovom primjeru izgleda ovako

<script language="JavaScript">
<!--// sakrij od starih citaca
// Primjer 2
myArray = new Array("slika4","hackoPark.jpg",
                    "slika5","hackoPark_on.jpg",
                    "slika6","javaScript.jpg",
                    "slika7","javaScript_on.jpg");

for (i=0 ; i< myArray.length ;i++){
	myArray[i] = new Image(); 
	myArray[i].src = myArray[i+1];
	i++;
	}

function switched (ime_slike, url_slike){
	document.images[ime_slike].src = url_slike;
	}

// --></script>

Ovaj dio koda je lagodniji za upotrebu nego kod za primjer 1. U ovom dijelu mi trebamo samo da dodajemo elemente na listu slika i to u paru "ime slike", "url slike". Smjestanje u memoriju se vrsi pomocu for (i=0 ; i< myA ... petlje.
Funkcija switched je ista kao i funkcije u primjeru 1 samo sto u ovom slucaju ime i url slike saljemo kao parametre.

HTML dio moze izgledati ovako

<A HREF="java_script_primjeri.html" 
       ONMOUSEOVER="switched('slika6','javaScript_on.jpg');return true"
       ONMOUSEOUT ="switched('slika6','javaScript.jpg');return true">
    	<img src="javaScript.jpg" 
    		 border="0" 
    	 	 name="slika6">
</A>
 
<br>

<A HREF="../../hindex.html" 
       ONMOUSEOVER="switched('slika4','hackoPark_on.jpg');return true"
       ONMOUSEOUT ="switched('slika4','hackoPark.jpg');return true">
    	<img src="hackoPark.jpg" 
    		 border="0" 
    	 	 name="slika4">
</A>

top

Drop Down Meny

(onChange)

Na nekim stranicama mozete vidjeti Drag Down Meny (Select tag) sa listom linkova na koje mozete otici. Na ovaj nacin stranica biva kompaktna i manja (a samim tim i nepreglednija). Mada nekad zna biti od velike pomoci, narocito kod duge liste linkova koji nisu tako vazni. U ovom primjeru dajem jedan takav javascript.

Primjer 3

JavaScript koristen za ovaj primjer:

<script language="JavaScript">
<!-- Sakrij od starih citaca --

     function idiNaLink(form){

             i = form.Izaberi.selectedIndex;
             if (i == 0) return;
             document.location.href = form.Izaberi.options[i].value ;
     }
// -->
</script>

... i HTML dio :


<FORM NAME="sForm">
  <SELECT NAME="Izaberi"  onChange="idiNaLink(this.form)">
    <OPTION SELECTED> Jednostavan Drag Down Meny
    <OPTION VALUE="../../hindex.html"            >  HackoPark     </OPTION> 
    <OPTION VALUE="http://altavista.digital.com/">  Alta Vista    </OPTION> 
    <OPTION VALUE="#top"               > Ova stranica - Vrh       </OPTION> 
    <OPTION VALUE="#mis"               > Ova stranica - Primjer 1 </OPTION> 
    <OPTION VALUE="#link"              > Ova stranica - Primjer 2 </OPTION> 
    <OPTION VALUE="#drop"              > Ova stranica - Primjer 3 </OPTION> 
  </SELECT>

</FORM>

SELECT tag mozete dopunjavati tako sto dodajete redove

<OPTION VALUE="url_vase_stranice"> Ime stranice </OPTION>

top

(onClick)

Drop Down Meny moze biti veoma dug i ponekad je lakse misem markirati Meny i onda tipkama traziti odredjeni link. U primjeru 3 je to nemoguce raditi jer kad markirate jednu opciju aktivira se Event Handler onChange koji u ovom primjeru poziva nasu malu funkciju idiNaLink. Ovo se moze izbeci ako dodamo jedno dugme i koristimo Event Handler onClick.

Primjer 4

JavaScript je isti samo treba izmijeniti HTML dio

<FORM NAME="sForm">
  <SELECT NAME="Izaberi"  >
    <OPTION SELECTED> Jednostavan Drag Down Meny
    <OPTION VALUE="../../hindex.html"            >  HackoPark     </OPTION> 
    <OPTION VALUE="http://altavista.digital.com/">  Alta Vista    </OPTION> 
    <OPTION VALUE="#top"               > Ova stranica - Vrh       </OPTION> 
    <OPTION VALUE="#mis"               > Ova stranica - Primjer 1 </OPTION> 
    <OPTION VALUE="#link"              > Ova stranica - Primjer 2 </OPTION> 
    <OPTION VALUE="#drop"              > Ova stranica - Primjer 3 </OPTION> 
  </SELECT>
<INPUT type="button" value=" Idi !" onClick="idiNaLink(this.form)">
</FORM>

top