Svrha vježbe:
Stjecanje iskustva sa osnovama JavaScript-a i CSS-a.
Zadatak:
- Na osnovu već gotovih primjera potrebno je (korištenjem
JavaScripta-a) postojećoj formi koja je izrađena u prošloj vježbi
dodati funkciju provjere unešenih podataka prije nego se njen sadržaj
pošalje web poslužitelju. Po želji dodati i neke druge JavaScript
elemente.
- Omogućiti da se sadržaj jedne stranice prikaže (korištenjem CSS-a)
na dva različita načina
(boje, veličine slova, margine, hover...).
Uvod u 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: izrada aktivnog gumba (najčešća 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 događaja)
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 veličine
Uvod u CSS:
CSS je kratica od Cascading Style Sheets. CSS je dodatak na HTML koji
omogućava primjenu stilova (styles), npr. boja, fontova, veličina
za različite elemente hipertekstualnog dokumenta. Informacija o stilu može
se nalaziti u samom HTML dokumentu ili u zasebnoj CSS datoteci. Korištenjem
zasebne CSS datoteke omogućeno je da više HTML dokumenata dijeli ista
pravila prikaza.
Primjer: definiranja boje naslova tipa H1:
H1 { color: green }
Ovime se postiže da svi naslovi tipa H1 budu prikazani zelenom bojom.
Referentna dokumentacija:
JavaScript
Guide
JavaScript Source
The Java Boutique
CSS
Adding a touch of style
Cascading Style Sheets, designing for the Web, poglavlje 2
CSS2 Specification
Primjeri:
JavaScript
Tipka upozorenja
Primjeri provjere vrijednosti unesenih u formu: 1,
2, 3
i 4
Kalkulator s pet funkcija
Igre: zmija i potapanje
brodova
CSS
Različiti prikazi iste stranice sa formom: 1 i 2
Alati:
WWW browser (Internet Explorer, Netscape)
editor (notepad, wordpad, edit, itd.)
|
