Obrada događaja |
JavaScript programi mogu prekinuti sekvencijalno izvršavanje otkrivanjem
događaja i reakcijom na njega. Događaj predstavlja akciju koja se desila
unutar navigatora kao što je, na primer, klik korisnika ili pritisnuta
dirka na tastaturi ili učitavanje slike...
Jedna od najmoćnijih karakteristika JavaScript-a jeste detektovanje
i odziv na događaj (event handler) i to daje statičnom HTML dokumentu izvesnu
interaktivnost.
Događaj se može desiti na više mesta, ali svaki događaj je u
vezi sa nekim objektom i svaki događaj ima svoje ime. Događaj onMouseOver
nastaje prelaskom pokazivača miša preko objekta na web strani i tada se
poziva (ako postoji) onMouseOver obrada događaja.
Događaj | Objekat u kom se koristi događaj |
onAbort
onBlur onChange onClick onError onFocus onLoad onMouseOver onMouseOut onSelect onSubmit onUnload | image
select, text, text area select, text, textarea button, checkbox, radio, link, reset, submit, area image select, text, textarea windows, image link, area link, area text, textarea form window |
Pogledajte primer (koji prolazi W3C validaciju!!!)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <TITLE> Primer onAbort </HEAD> <BODY> <H3>Primer onAbort </H3> <strong>Zaustavite ucitavanje slike i pratite sta se desava-ukljucuje se ALERT dijalog:</strong> <p> <script language="JavaScript" type="text/javascript"> <IMG SRC="bkgr2.jpg" onAbort="alert('Zaustavili ste ucitavanje slike!')" ALT="slika"> </script> </BODY> </HTML>
<BODY>
atribut.
Na primer:
<BODY BGCOLOR='#ffffff' onBlur="document.bgcolor='#000000'">Napomena: Na Windows platformi onBlur obrada ne radi uvek unutar
<FRAMESET>
.
<HTML> <TITLE>Primer onBlur</TITLE> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(form){ var input=0; input=document.myform.podatak.value; if (input<0){ alert("Uneli ste negativan ceo broj"); } } </SCRIPT> </HEAD> <BODY> <H3> Primer onBlur </H3> Ako unesete negativan broj pojava ALERT dijaloga:<br> <form name="myform"> <input type="text" name="podatak" value="" size=10 onBlur="valid(this.form)"> </form> </BODY> </HTML>U ovom primeru imenovano text polje 'podatak' prihvata vrednost koju unosi posetilac. Kada posetilac pokusa da napusti polje događaj onBlur poziva funkciju valid() radi potvrde da polje 'data' je popunjeno nenegativnim brojem, a u suprotnom izdaje se alert dijalog. Kljucna rec this je upotrebljena da bi se referisalo na tekuci objekat.
Pogledajte primer konvertora valuta:
U ovom primeru postoje dva text polja: id='dinari', id='evri'. Pri napustanju jednog polja nakon editovanja vrednosti (bilo sa backspace, bilo dodavanjem,...) posetiocu se ispisuje konvertovana vrednost u drugo polje kao posledica obrade događaja onChange i poziva ili funkcije postaviVrednostEvra(dinari) ili postaviVrednostDinara(evri). Ako se ne desi editovanje polja, ne ispisuje se vrednost. Ako se desi editovanje polja belinom, ispisuje se vrednost 0.
<html> <head> <title>Konverzija valuta</title> <script type='text/javascript'> var kurs = 94.80; function postaviVrednostEvra(dinari) { document.getElementById('evri').value = dinari/kurs; } function postaviVrednostDinara(evri) { document.getElementById('dinari').value = evri * kurs; } </script> </head> <body> <table> <tr> <td>Dinari: </td> <td><input type='text' id='dinari' onChange="postaviVrednostEvra(this.value)"></td> </tr> <tr> <td>Evri: </td> <td><input type='text' id='evri' onChange="postaviVrednostDinara(this.value)"></td> </tr> </body> </html>
U ovom primeru 'podatak ' je text polje. Pri napustanju polja nakon editovanja vrednosti (bilo sa backspace, bilo dodavanjem,...) posetiocu se ispisuje alert dijalog kao posledica obrade događaja onChange i poziva valid() funkcije. Ako se ne desi editovanje polja, ne ispisuje se ni dijalog.
<HTML> <TITLE>Primer onChange</TITLE> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(form){ var input=0; input=document.myform.podatak.value; alert("Vrednost polja je promenjena sa 10 na " + input ); } </SCRIPT> </HEAD> <BODY> <H3>Primer</H3> Promenite vrednost polja sa 10 na neku drugu i pratite desavanja:<br> <form name="myform"> <input type="text" name="podatak" value="10" size=10 onChange="valid(this.form)"> </form> </BODY> </HTML>
<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit" onClick="return confirm(`Sigurni ste da zelite obradu formulara?')"> <A onclick="alert('Google Search Engine!');" href="http://www.google.com/">Link na Google</A> <BR>Note: Pod Windows platformom događaj onClick moze da ne funkcionise sa reset dugmetom.
U narednom primeru, kada se desi događaj onClick, poziva se funkcija valid koja ispisuje alert pozdravnu
poruku posetiocu.
Pogledajte primer:
<HTML> <TITLE>Primer onClick </TITLE> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function valid(form){ var input=0; input=document.myform.data.value; alert("Pozdrav " + input + " ! Srecno..."); } </SCRIPT> </HEAD> <BODY> <H3> Primer onClick </H3> Kliknite na dugme nakon unosa imena u text polje:<br> <form name="myform"> <input type="text" name="data" value="" size=10> <INPUT TYPE="button" VALUE="KLIKNITE" onClick="valid(this.form)"> </form> </BODY> </HTML>
U narednom primeru, kada se desi događaj onClick, poziva se funkcija proveri
koja ispisuje alert poruku posetiocu koje dugme je čekirano.
Pogledajte primer:
<html> <head> <script type='text/javascript'> function proveri() { if (document.getElementById('chk1').checked) alert('Prvi cekiran'); if (document.getElementById('chk2').checked) alert('Drugi cekiran'); } </script> </head> <body> Chk1: <input type='checkbox' id='chk1'> <br> Chk2: <input type='checkbox' id='chk2'> <br> <input type='button' value='Pritisni' onClick = 'proveri();'> </body> </html>
window.onerror=null
i pozvati funkciju za obradu greski onError="myerrorfunction()"
.
<HTML> <TITLE>Primer onError</TITLE> <HEAD> <SCRIPT Language="JavaScript"> window.onerror = ObradaGreske var e_msg=""; var e_file=""; var e_line=""; document.form[8].value="myButton"; //GRESKA function ObradaGreske(msg, file_loc, line_no) { e_msg=msg; e_file=file_loc; e_line=line_no; return true; } function prikaz() { var error_d = "Greska u datoteci: " + e_file + "\nredni broj linije:" + e_line + "\ntip:" + e_msg; alert("Greska:\n"+error_d); } </SCRIPT> </HEAD> <BODY> <h3> Primer onError </h3> <form> <input type="button" value="PRIKAZI GRESKU" onClick="prikaz()"></form> </body> </HTML>Funkcija ObradaGreske() prihvata tri argumenta: URL, redni broj linije i tekst greske. Putem alert metoda se vrsi njihov ispis u korisnickoj funkciji prikaz()
Napomena: Ako se funkcija ObradaGreske() postavi da vraca False, prikazuje se standardni dijalog.
<FORM><INPUT onfocus="window.status='Tekst u statusnoj liniji';" size=30> </FORM>
<HTML> <HEAD><TITLE>Event Handler: onFocus</TITLE> </HEAD> <BODY> <FORM><INPUT type="text" onfocus="window.status='Tekst u statusnoj liniji';" size=30> </FORM><BR> <FORM>Ime: <INPUT type="text" onblur="alert('Da li ste upisali ime?');" size=30 value="Upišite ime"> </FORM> <BR> </BODY> </HTML>Vezba za samostalni rad: kreirati formular sa tri elementa - textbox, 2 checkbox-a i submit dugme.
BODY
.
Primer:
<IMG NAME="slika" SRC="slika.gif" onLoad="alert('UCITANA SLIKA')">Pogledajte primer:
<HTML> <TITLE>Primer onLoad </TITLE> <HEAD> <SCRIPT LANGUGE="JavaScript"> function pozdrav(){ alert("Pozdrav...\nPrimer onLoad."); } </SCRIPT> </HEAD> <BODY onLoad="pozdrav()"> <H3>PRIMER onLoad </H3> </BODY> </HTML>U ovom primeru funkcija pozdrav se poziva() kao reakcija na događaj onLoad .
<HTML> <TITLE>Primer onMouseOver </TITLE> <HEAD> </HEAD> <BODY> <H3> Primer onMouseOver </H3> Pozicionirajte miš preko <A HREF="" onMouseOver="window.status='Pozdrav! Kako ste danas?' ; return true;"> ove pozicije</a> i pogledajte na status bar ( npr. dno prozora). </BODY> </HTML>U gornjem primeru kada se pređe mišem preko hiperveze ispisuje se poruka u status baru.
<HTML> <TITLE> Primer onMouseOut </TITLE> <HEAD> </HEAD> <BODY> <H3> Primer onMouseOut </H3> Pozicionirajte miš preko <A HREF="" onMouseOut="window.status='NAPUSTILI STE LINK!' ; return true;"> hiperveze ovde</a> i onda napustite hipervezu i pogledajte status bar. </BODY> </HTML>U gornjem primeru kada se pređe mišem preko hiperveze i potom napusti hiperveza, ispisuje se poruka u status baru.
Moguce je isprogramirati reakciju na oba dogadjaja onMouseOut i onMouseOver na jednom objektu, na primer slici kao u ovom primeru
<HTML> <TITLE>PRIMER onReset </TITLE> <HEAD></HEAD> <BODY> <H3> Primer onReset </H3> Molimo Vas, popunite text polje i kliknite na dugme reset:<br> <form name="myform" onReset="alert('OPREZ! RESETOVALI STE FORMU')"> <input type="text" name="data" value="" size="20"> <input type="reset" Value="Reset" name="myreset"> </form> </BODY> </HTML>
Obrada događaja tastature |
Datoteka pr81.htm
<html>
<head>
<title> Tasteri </title>
<script language="javascript" type="text/javascript">
function PrikaziTaster(t) {
if (t.keyCode)
keycode=t.keyCode;
else keycode=t.which;
znak=String.fromCharCode(keycode);
window.status
+= znak;
}
</script>
</head>
<body onKeyPress="PrikaziTaster(event);">
<h1 align="center">Prikaz tastera</h1>
<HR>
<p><strong> <i>Ako pritisnete tastere na tastaturi, skript
iz ovog dokumenta prikazuje
sadrzaj u statusnoj liniji.</I></STRONG> </p>
<hr>
<p> </p>
</body>
</html>
Ovaj primer prikazuje kao rezultat pritisnute dirke u statusnoj liniji.
NN 4.0 nije mogao da radi sa skriptovima ovog tipa, jer nije
mogao da otkrije akciju nad tastaturom. Ali JavaScript 1.2 i kasnije verzije
mogu da otkriju i ove akcije. Glavna procedura za obradu događaj je onKeyPress
koja
se pojavljuje kada je taster pritisnut i pusten ili kada se drzi pritisnutim.
Kao i kod miša, moze se otkriti donji i gornji deo pritisnutog tastera
uz događaje onKeyDown i onKeyUp.
Sadrzaj pritisnutog tastera se otkriva pomocu event objekta
koji se salje proceduri za obradu događaja. Kod NN svojstvo event.which
cuva ASCII kod karaktera za taster, dok u IE to cuva event.keyCode.
Za pretvaranje numerickog ASCII koda u string ekvivalent sluzi
metod fromCharCode.
U primeru prikaz tastera u statusnoj liniji se obavlja
u f-ji PrikaziTaster
function PrikaziTaster(t) {
if (t.keyCode)
keycode=t.keyCode;
else keycode=t.which;
znak=String.fromCharCode(keycode);
window.status
+= znak;
}
Ulazni parametar funkcije je event objekat (dobijen od procedure
za obradu događaja-videti telo i oznaku <body>). F-ja proverava da li
postoji svojstvo t.KeyCode i ako postoji cuva se u promenljivoj
keycode. Inace, keycode dobija ASCII vrednost t.which.
Potom se obavi konverzija sa dodelom
znak=String.fromCharCode(keycode);
tj. znakovni ekvivalent ASCII keyCode se
upisuje u promenljivu znak, a potom izvrsi i konkatnacija sa sadrzajem statusne
linije.
Napomene
1. Događaj onMouseOver se može koristiti za etiketu <IMG>, ali to je podrzano od strane IE i NN6, ali ne u ranijim verzijama Netscape-a. Tada je zgodno napraviti sliku kao hipervezu (ukinite okvir) i u okviru oznake <A> pozivati procedure za obradu događaja.
2. Ako postoje i onKeyDown i onKeyPress procedure za obradu događaja,
prvo se poziva onKeyDown kada se pritisne taster, a ne obe. Ako se vrati
true, onda se poziva obrada onKeyPress, a inace se ne generise događaj
onKeyPress.
Obrada događaja miša |
Pogledajte primer
<html>
<head>
<title>Opisne hiperveze</title>
<script LANGUAGE="JavaScript">
function OpisVeze(text) {
window.status = text;
return true;
}
function Eliminisi() {
window.status="";
}
</script>
</head>
<body>
<h1 align="center">Opisne hiperveze</h1>
<hr>
<p align="center"><strong><i>Dole navedena lista hiperveza
sadrži i opise koji se prikazuju u statusnoj liniji nakon prelaska
miša preko hiperveze </I> </strong></p>
<hr>
<ol> Numerisana lista hiperveza ka dokumentima o JavaScript-u
<li><a HREF="skolajs5.htm"
onMouseOver="OpisVeze('Peti
nastavak'); return true;"
onMouseOut="Eliminisi();">
Animacija u JavaScript-u</a>
<li><a HREF="skolajs6.htm"
onMouseOver="OpisVeze('JavaScript
i plug-in'); return true;"
onMouseOut="Eliminisi();">
Zvuk u JavaScript-u</a>
<li><A HREF="skolajs3.htm"
onMouseOver="OpisVeze('Detektovanje
podataka o navigatoru putem JavaScript-a'); return true;"
onMouseOut="Eliminisi();">
Podaci o navigatoru</a>
</ol>
<hr>
<P> </p>
</body>
</html>
Ako se pogleda izvorni kod datoteke pr82.html uočava se da dominantna
akcija jeste dodavanje opisa hiperveze prirodnim jezikom, a sadržaj se
prikazuje u statusnoj liniji. To može biti zgodno ako se nastrani nalaze
hiperveze ka formularima, pa se na taj način sam formular zadaje deskriptivnije
(e-narudžbenice, plaćanje,...).
Tekst poruke se ispisuje onMouseOver procedurom za obradu
događaja, a uklanja se onMouseOut procedurom za obradu događaja, tj. svaki
link tela dokumenta sadrži pozive dve funkcije. Skript radi u svim JavaScript
enabled browser-ima.
U statusnoj liniji se uglavnom ispisuje Intenet adresa
objekta na koji vodi hiperveza što često nije dovoljno deskriptivno, te
bi sadržaj poruka koja se navode kao argument (u ovom primeru korisničke
funkcije) OpisVeze morao biti sadržajniji i dovoljno jasan.
Hiperveza sa procedurom za obradu događaja koji prikazuje poruku
u statusnoj liniji glasi
<a
HREF="skolajs6.htm"
onMouseOver="OpisVeze('JavaScript
i plug-in'); return true;"
onMouseOut="Eliminisi();">
Zvuk u JavaScript-u
</a>
Uočite da tekst poruke je ograđen jednostrukim, a ne dvostrukim znacima navoda. To je NEOPHODNO, jer se dvostruki znak naovoda koristi da ogradi sam poziv procedure za obradu događaja. Moguće je upotrebiti i jednostruke znake navoda oko procedure za obradu događaja, ali dvostruke znake navoda unutar skript iskaza.
Neophodan je iskaz return true; da bi sprečio da
se poruka statusne linije prepiše po prikazu Internet adrese. U f-ji OpisVeze
ulazni parametar je tekst poruke koji se u f-ji kopira u statusnu liniju
dodelom sadržaja za window.status.
Kako f-ja vraća vrednost true, to se poruka
prikazuje u statusnoj liniji sve dok ne bude izbrisana ne Internet adresom,
već rezulattom f-je Eliminisi kao reakcijom na onMouseOut događaj.
function Eliminisi() {
window.status="";
}
JavaScript sadrzi objekat event koji obezbeđuje informacije
o događaju.
(pocev od verzije 4.0) |
(pocev od verzije 4.0) |
event.button
taster miša koji je pritisnut; obicno 1 za levi, 2 za desni |
event.modifiers
ukazuje koji taster za promenu (SHIFT, CTRL, ALT) je pritisnut tokom događaja |
event.clientX
x-koordinata u pixelima nastanka događaja |
event.pageX
x-koordinata događaj unitar strane |
event.clientY
y-koordinata nastanka događaja |
event.pageY
y-koordinat adogađaj unutar strane (prema gornjem levom uglu) |
event.altkey
indikator pritska tastera ALT tokom događaja |
event.which
Unicode tastera |
event,ctrlkey
indikator pritska tastera CTRL tokom događaja |
event.target
objekat gde se događaj pojavio |
event.shiftkey
indikator pritska tastera SHIFT tokom događaja |
|
event.keyCode
Unicode tastera |
|
event.srcElement
objekat lokacije elementa |