2. laboratorijska vježba
JavaScript i CGI
Svrha vježbe:
Stjecanje iskustva sa server-side
te client-side skriptama te programima. Razlikovanje server-side te
client-side implementacija.
Zadatak
- Napraviti stranicu koja koristi elemente formulara: polja za unos,
gumbe za submit i resetiranje formulara. Cilj je stvoriti sučelje prema
programu na poslužitelju koji provodi matematičku operaciju zbrajanja
dva broja. Komunikacija s programom se ostvaruje kroz CGI sučelje GET
metodom.
- Dodati na stranicu iz 1. zadatka provjeru unosa parametara, tj. spriječiti
JavaScriptom obavljanje submit akcije dok korisnik ne unese oba broja
koja želi zbrojiti. Upozoriti korisnika koji od brojeva nije unešen
(prvi ili drugi ili oba). Za maksimalne bodove napraviti provjeru da
li je korisnik unio broj ili nije (npr. provjeravati da li je unešen
niz slova a ne broj).
Upute - CGI
CGI je kratica za Common Gateway Interface. On omogucava izvršavanje
funkcija na strani servera. Pokretanje tih funkcija se vrši tako da korisnik
u svojem web pregledniku pošalje zahtjev za odgovarajucim CGI programom
ili skriptom (obicno odabirom nekog linka ili "submit" tipke).
Podaci koje je korisnik unio unutar forme prenose se kao dodatni parametri
i postaju ulazni parametri tražene CGI skripte. CGI programi ovisno o
podacima koje je korisnik u web pregledniku unio generiraju odredene rezultate
koje vracaju natrag korisniku (najcešce u formi HTML dokumenta, ali nije
nužno).
Za pisanje CGI programa i skripti obicno se koristi C, C++, Perl, TCL,
shell skripte, Python ili nešto trece. CGI programi (ili skripte) mogu
se pokretati samo iz direktorija koji su za to namijenjeni. Naime, u konfiguraciji
web servera (npr. Apache) mora biti omoguceno da se u nekom direktoriju
mogu izvršavati CGI skripte (ili programi). Obicno se omogucava da se
CGI skripte izvršavaju iskljucivo u cgi-bin poddirektoriju web servera
(no, za potrebe ovih vježbi svaki ce student moci pokretati CGI skripte
u svom vlastitom direktoriju). Isto tako, potrebno je podesiti da se skripte
smiju izvršavati (chmod naredba u UNIX-u).
Upute - JavaScript
JavaScript je objektno orjentirani skriptni jezik. Skripte se dodaju
bilo u zaglavlje HTML dokumenta u <SCRIPT> tag ili se dodaju samo
event handleri (kao u primjeru) koji se direktno pozivaju. Da bi skripta
mogla utjecati na neki element u stranici njemu mora biti definiran parametar
"name" te je tada (DOM) referenca takvog objekta document.name.
Primjer vulgaris: izrada aktivnog gumba (najcešca primjena):
<a href="link" onmouseover="javascript:document.ime.src='slika2.gif';"
onmouseout="javascript:document.ime.src='slika1.gif';"><img
src="slika1.gif"
name="ime"></a>
onmouseover i onmouseout - event handleri (obrada dogadaja)
document.ime - DOM referenca slike (slika kao objekt)
document.ime.src - polje objekta slike (sadrži URL slike)
slika1.gif i slika2.gif - poželjno iste velicine
Primjeri
CGI - elementi formulara
| primjer formulara za zbrajanje
CGI skripta koju koristimo u vježbi se nalazi na http://www.zesoi.fer.hr/cgi-bin/zbroji.cgi
(action FORM taga) te prima dva parametra: prvi i drugi.
JavaScript - primjeri provjere formulara:
jedan | dva
| tri | cetiri
Proučite skripte iz ovih stranica te prema njima napravite provjeru da
li je korisnik unio nešto u polja formulara. Također, napraviti provjeru
da li je korisnik unio broj (vidjeti po uputama za JavaScript kako provjeriti
da li je nešto broj ili nije - funkcije parseInt, parseFloat i isNaN u
Math objektu)
Putokazi
|
