Jelena Grmusa: Mala škola Java Script-a sa primerima

Reakcija na događaje u JavaScript-u

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.
JavaScript sadrzu objekat event koji obezbedjuje informacije o dogadjaju.

IE event (pocev od verzije 4.0)	NN event (pocev od verzije 4.0)
event.button taster mia koji je pritisnut; obicno 1 za levi, 2 za desni	event.modifiers ukazuje koji taster za promenu (SHIFT, CTRL, ALT) je pritisnut tokom dogadjaja
event.clientX x-koordinata u pixelima nastanka dogadjaja	event.pageX x-koordinata dogadjaj unitar strane
event.clientY y-koordinata nastanka dogadjaja	event.pageY y-koordinat adogadjaj unutar strane (prema gornjem levom uglu)
event.altkey indikator pritska tastera ALT tokom dogadjaja	event.which Unicode tastera
event,ctrlkey indikator pritska tastera CTRL tokom dogadjaja	event.target objekat gde se dogadjaj pojavio
event.shiftkey indikator pritska tastera SHIFT tokom dogadjaja
event.keyCode Unicode tastera
event.srcElement objekat lokacije elementa

Obrada događaja miša

Datoteka pr82.html

<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 kojae 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 statsusne linije prepiše po prikazi 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="";
}

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 dokuenra 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 dogadjaj je onKeyPress koja se pojavljuje kada je taster pritisnut i pusten ili kada se drzi pritisnutim. Kao i kod misa, moze se otkriti donji i gornji deo protisnutog tastera uz dogadjaje onKeyDown i onKeyUp.
Sadrzaj pritisnutog tastera se otkriva pomocu event objekta koji se salje proceduri za obradu dogadjaja. Kod NN sbvojstvo 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 funkvije je event objekat (dobijen od procedure za oradu dogadjaja-videti telo i oznaku <body>). F-ja proverava da li postoji svojstvo t.KeyCode ako postoji cuva u promenljivoj
keycode. Inace, tak keycode dobija vrednost ASCII t.which.
Potom se obavi konverzija sa dodelom
znak=String.fromCharCode(keycode);
tj. znakovni ekvivalent ASCII keyCode se upisuje u promenljivu znak, apotom 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 ygodno napraviti sliku kao hipervezu (ukinite okvir) i u okviru oynake <A> pozivati procedure za obradu dogadjaja.

2. Ako postoje i onKeyDown i onKeyPress procedure za obradu dogadjaja, prvo se poziva onKeyDown kada se ritisne taster, a ne obe. Ako se vrati true, onda se poziva obrada onKeyPress, a inace se ne generise dogadjaj onKeyPress.