Dogodki

Dogodki so zelo pomembni pri programiranju v JavaScript. Dogodke običajno sproži uporabnik s svojimi dejanji. Predstavljajo nam torej odziv na nek dogodek. Če uporabnik klikne na gumb, se sproži dogodek click. Če pomakne kazalec čez povezavo, se sproži dogodek mouseover. Obstaja še več drugih dogodkov.

Z JavaScript lahko vplivamo, da se spletna stran odziva na določene dogodke. Pomagamo si z dogodkovnimi stanji. Na primer; ko kliknemo na gumb, se odpre novo okno z določeno vsebino. Torej novo okno se odpre kot reakcija na dogodek click. Dogodek, ki ga uporabimo se imenuje onclick. Ta pove računalniku, kaj mora narediti, če uporabnik klikne na gumb. Naslednja koda prikazuje primer uporabe dogodka onclick:

<form action="dogodki.html">
<input type="button" value="Klikni na gumb"
onclick="alert('Lep pozdrav!')">
</form>

V zgornjem primeru je narejen obrazec (form) z gumbom. Obrazci so narejeni v HTML, privzeti izgled pa je odvisen tudi od operacijskega sistema. JavaScript prispeva svoj del z onclick="alert('Lep pozdrav!')" znotraj značke <input>. Ta lastnost pomeni, da če se zgodi dogodek click, bo brskalnik izvedel alert('Lep pozdrav!'). To je koda JavaScript (V tem primeru ne potrebujemo oznak <script>).

Z ukazom alert() poženemo sporočilno okno. Med oklepaji moramo podati sporočilo v narekovajih. V našem primeru je to 'Lep pozdrav!'. To besedilo se izpiše v sporočilnem oknu. Torej skripta prikaže okno z vsebino Lep pozdrav!, ko uporabnik klikne na gumb.

V zgornjem primeru so bili v ukazu document.write() uporabljeni dvojni narekovaji " in v ukazu alert() enojni narekovaji '. V bistvu je vseeno katere narekovaje uporabimo. Toda ne smemo uporabiti enakih narekovajev, kajti potem brskalnik ne ve, kdaj se dogodek onclick konča:

onclick="alert("Lep pozdrav!")" // To je NAROBE!!!

Lahko pa bi za zunanje narekovaje uporabili enojne in za notranje dvojne. To pomeni, da bi lahko zapisali:

onclick='alert("Lep pozdrav!")'

Dogodke predpisuje standard XHTML (zanj je zadolžena organizacija W3C). Nekaj nestandardnih sta jih dodala tudi Microsoft in Netscape.

Upravljanje z dogodki

Za izdelavo interaktivnih spletnih strani se lahko doda ukaze JavaScript, ki se sprožijo ob želenem trenutku. Tipično se skripti odzivajo na miškine klike, premike, izbiro v menijih. Za opredelitev teh skript je potrebno poznati zbirko vseh dogodkov, ki jih podpira posamezen spletni jezik (danes predvsem HTML). V HTML so ti dogodki določeni kot lastnosti posameznih elementov, začenjajo se z besedo on, na primer: onclick, ondblclick in onmouseover. Preprost primer prikazuje dogodek, ki se sproži ob pritisku na gumb:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="si" xml:lang="si" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript in dogodek v HTML</title>
</head>
<body>
<form action="akcija.html">
 <input type="button" value="Pritisni"
 onclick="alert('Pozdravljen, Svet!');">
</form>
</body>
</html>

Pri pisanju tradicionalnih dokumentov HTML velike in male črke niso pomembne. JavaScript je občutljiv na male in velike črke. Predpisano je bilo, da se dogodki pišejo z uporabo velikih začetnic besede: OnMouseOver, onClick. Nekateri strežniki in tudi brskalniki še danes zahtevajo takšno uporabo. Vendar novi standardi HTML (od XHTML 1.0 dalje) zahtevajo uporabo izključno malih črk za lastnosti. Težave lahko nastanejo le pri pisanje skript na nekaterih strežniških UNIX ali Linux, kjer je potrebno uporabljati velike začetnice besed. V naslednjem primeru je pokazano kako kličemo skripti, ki se nahajajo v glavi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="si" xml:lang="si" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ubogaj!</title>
<script type="text/javascript">
<! -
function sporocilo()
{
alert("Zakaj ne ubogaš?");
}
// ->
</script>
</head>
<body>
<div style="text-align:center">
<form action="akcija.html">
<input type="button" id="Test" value="Ne pritisni!" onclick="sporocilo()">
</form>
</div>
</body>
</html>

V specifikaciji XHTML (glej W3C.org) so navedeni dogodki na katere se bo brskalnik odzval, ti so npr. onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout in onmouseover. W3C pripravlja na tem področju tudi nekaj sprememb.

Primer odziva

<p onclick="window.status='Izpis v statusni vrstici!'">
Opazuj statusno vrstico</p>

je videti v brskalniku takole:

Opazuj statusno vrstico

Klikni na gornji odstavek in se prepričaj sam.

Pri uporabi HTML4 in novejšega je mogoče dogodke pripisati skoraj vsakemu elementu v dokumentu HTML. Starejši brskalniki so poznali dogodke le pri nalaganju, zapiranju, izpolnjevanju obrazcev in pri miškinih dogodkih.

JavaScript v posebni datoteki

Zelo pomemben način vključevanja JavaScript v dokument HTML je uporaba povezav z lastnostjo src v znaČki <script>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="si" xml:lang="si" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="pozor.js">
</script>
</head>
<body onload="rotiraj()">
<div style="text-align:center">
<form action="akcija.html">
<input type="button" id="gumb" value="Klikni!" onclick="opozorilo()">
</form>
</div>
</body>
</html>

V zgornjem primeru je lastnost src postavljena na vrednost pozor.js. Vrednost je podana kot URL zapis poti do datoteke s skriptom. V tem primeru je ta datoteka v isti mapi, v splošnem pa je lahko zapisana kot absolutni ali relativni naslov. V datoteki je torej zapisana vsebina, ki smo jo prej pisali znotraj elementa <script> v dokumentu HTML:

function opozorilo( )
{
alert("Pozor! JavaScript!");
}

Kot vidimo v zgornjem primeru v dokumentu z napisano skripto ne pišemo elementa script. Prednost ločene skriptne datoteke je v tem, da jo ločimo od vsebine HTML in jo naredimo preglednejšo. Skripto lahko večkrat kličemo v različnih dokumentih HTML. Spletišče lahko aktualiziramo s spremembami nekaj skript, ni pa potrebno posegati v smo zgradbo in vsebino dokumentov HTML. Skripti se lahko naložijo v medpomnilnik za hranjenje spletnih strani, tako da se ne naložijo vsakič. S tem pospešimo prenos spletnih strani.

Četudi imajo povezave na zunanji skripti mnogo dobrih lastnosti, lahko nastopi tudi nekaj težav. Prvič, vsi brskalniki ne podpirajo povezanih skript. Ta težava se pojavlja v danes že prazgodovinskem Netscape Navigatorju in tudi v Internet Explorerju 3. Druga težava je lahko pri zelo dolgih skriptnih datotekah. Taka datoteka se dalj časa nalaga, kakšen bo v tem času izgled dokumenta HTML pa je vprašanje. Če oblikovanju HTML uporabljamo datoteke s kodo HTML v večini programov (tudi najboljših) ta ni na ogled.

Seznam lastnosti

Sledi seznam lastnosti, s katerimi lahko določimo reakcijo na različne dogodke. Večino od njih lahko predpišemo skoraj katerikoli znački. Če temu ni tako, je na koncu opisa v oklepaju navedeno, pri katerih značkah lahko lastnost uporabimo.

Dogodek onload: Dododek se zgodi, ko je dokument naložen v okno brskalnika. Tedaj se pokliče funkcija, ki je povezana s tem dogodkom. Npr. opozorilno okno nudi uporabniku določeno informacijo.
(body)
Dogodek onunload: Dododek se zgodi, ko je dokument odstranjen iz okna brskalnika (to se zgodi tudi tedaj, ko je stran osvežena). Tedaj se pokliče funkcija, ki je povezana s tem dogodkom. Npr. opozorilno okno nudi uporabniku določeno informacijo.
(body)
Dogodek onclick: Dogodek je povezan z dvojnim klikom na elementu. Tedaj se pokliče določena funkcija.
Dogodek ondblclick: Dogodek je povezan z dvojnim klikom na elementu. Tedaj se pokliče določena funkcija.
Dogodek onmousedown: Dogodek je povezan s pritiskom miške, ko je le-ta na elementu. Tedaj se pokliče določena funkcija.
Dogodek onmouseup: Dogodek je povezan s sprostitvijo miške, ko je le-ta na elementu. Tedaj se pokliče določena funkcija.
Dogodek onmouseover: Dogodek je povezan s premikom miške nad določen element. Tedaj se pokliče določena funkcija.
Dogodek onmousemove: Dogodek je povezan s premikom miške nad izbranim elementom. Tedaj se pokliče določena funkcija.
Dogodek onmouseout: Dogodek je povezan z umikom miške z določenega elementa. Tedaj se pokliče določena funkcija.
Dogodek onfocus: Dogodek je povezan z aktivacijo določenega elementa z miško ali s tipko TAB. Tedaj se pokliče določena funkcija.
(a, area, label, input, select, textarea in button)
Dogodek onblur: Dogodek je povezan z deaktivacijo določenega elementa z miško ali s tipko TAB. Tedaj se pokliče določena funkcija.
(a, area, label, input, select, textarea in button)
Dogodek onkeypress: Dogodek se bo pripetil, ko bo pritisnjena in spuščena tipka na tipkovnici in bo element HTML postavljen v žarišče.
Dogodek onkeydown: Dogodek se bo pripetil, ko bo pritisnjena tipka na tipkovnici in bo element HTML postavljen v žarišče.
Dogodek onkeyup: Dogodek se bo pripetil, ko bo spuščena tipka na tipkovnici in bo element HTML postavljen v žarišče
Dogodek onsubmit: Dogodek se bo pripetil, ko bo porabnik v obrazcu pritisnil gumb submit.
(form)
Dogodek onreset: Dogodek se bo pripetil, ko bo uporabnik v obrazcu pritisnil gumb reset.
(form)
Dogodek onselect: Dogodek se bo pripetil, ko bo uporabnik označil vsaj en znak besedila.
(input in textarea)
Dogodek onchange: Dogodek se bo pripetil, ko bo uporabnik spremenil vrednost vnosnega polja ali izbral opcijo v seznamu ter ga deaktiviral.
(input, select in textarea)

Gor e-gradiva JavaScript Skrivanje Podatkovni tipi

SERŠ Maribor : Strokovna gimnazija : 2003 : Mario Kropej

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri