2. HTML

Sistem koji nam pomae pri pronalaenju podataka na Internetu zove se World Wide Web (skraeno: Web, WWW ili W3). Svaki dokument koji vidimo na Webu opisan je jezikom zvanim HyperText M arkup Language (skraeno: HTML). Web ita (browser -na primer M icrosoft Internet Explorer, ili Netscape Navigator, ili bilo koji drugi) , koji koristimo da bi smo videli sadraj neke Web stranice, tumai specijalne znake HTML-a, takozvane tagove, koji opisuju sadraj stranice, i na osnovu tog tumaenja prikazuje sadraj opisan u datom HTML dokumentu (fajlu). Tagovi su specijalni znakovi koji se uvek nalaze unutar picastih zagrada, na primer . Sve to se napie unutar tih oznaka nee biti vidljivo u browseru ve e biti tretirano kao naredba HTML-a. Veina tagova je parna, pa tako tag uvek ima i svoj par . Tekst koji nije smeten u ove zagrade, Web ita ne tumai kao tag, ve kao obian niz znakova koje treba prikazati takve kakvi su, odnosno kako nam nalau tagovi unutar kojih je tekst naveden. Tako, na primer Probni tekst, e rezultovati time da e na Web stranici koju gledamo pomou naeg Web itaa, rei Probni tekst biti ispisane podebljano (bold), je r nam to govori tag . Tag oznaava dokle se prostire oblast vaenja taga . Tagovi se mogu i kombinovati - Na primer: < B x I >ovo e biti ispisano ipodebljano i ukoeno

Kako sada ceo sistem funkcionie? Onaj ko eli da napravi neku Web stranicu, kreirae datoteku u kojoj e kominovati obian tekst sa HTML tagovima koji daju opis sadraja stranice. Da bi ovo mogao da uradi, mora da zna HTML tagove, i da ima neki tekst editor (Windows Notepad e biti sasvim dovoljan). Ovako kreirani dokument mora u nazivu imati ekstenziju htm, ili html da bi Web ita znao da je u pitanju HTML opis Web stranice koju on treba da prikae.

Dakle, sada kada je jasan princip po kom ovo funkcionie, sve to nam jo treba da bi mogli da pravimo Web stranice je poznavanje HTML tagova, ime emo se u nastavku ovog poglavlja pozabaviti.

I

2.1 Osnovna struktura HTML dokumenta

Svaki HTML dokument mora imati odreenu strukturii: oznaku poetka dokumenta, tag i oznaku kraja

, zaglavlje omeeno tagovima ,unutar kojeg

upisujemo opte definicije, poput kodne stranice, podatka o autorstvu. opis dokumenta i dr.

telo oznaeno tagovima unutar kojeg upisujemo sve ono to elimo da se vidi u brovvseru.

Primer jednostavnog HTML dokumenta i odgovarajue objanjenje dati su u tabeli 2.1:

Izvorni kod HTM L-a (vidljiv u Notepadu)

Objanjenje

poetak HTML-a

Moj prvi HTML

poetak zaglavlja naziv dokumenta kraj zaglavlja

poetak tela

Prvi red teksta u dokumentu... Drugi red teksta u dokumentu...

tekst koji e biti vidljiv u browseru prekida red

kraj tela

kraj HTML-a

Tabela 2.1 Objanjenje osnovne strukture HTML dokumenta

Ako sada primer prikazan u prvoj koloni tabele 2.1 snimimo pomou Notepad-a kao dokument prva.html, i zatim startujemo Web ita, pa uitamo dati dokument, rezultat e biti kao na slici 2.1:

Done j My Computer

Slika 2.1 Rezultat prikaza HTML dokumenta iz tabele 2.1 u Web itau

2.2 Tagovi za obradu teksta

U ovu grupu spadaju tagovi za:

odreivanje veliine slova podebljavanje teksta

iskoavanje teksta prelazak u novi red ubacivanje vodoravne linije odreivanje boje slova poravnanje teksta

Koji su tagovi za pobrojanu obradu teksta i kako se oni koriste, bie prikazano kroz nekoliko narednih primera:

3

Druga.html -p rim er obrade teksta

Ovo je tekst ispisan bez ikakvog oblikovanjaO vo je tekst vel. H1Ovo je tekst vel. H2Ovo je tekst vel. H3Ovo je tekst vel. H4Ovo je tekst vel. H5Ovo je tekst vel. H6Ovo su podebljana slovaOvo su kosa slovaVodoravna linija preko cele sirine ekrana:

Vodoravna linija sirine 50% ekrana, plave boje i poravnata

levo:

Tagovi i oznaavaju poetak i kraj naslova dokumenta, koji e biti vidljiv u naslovnoj liniji Web itaa (gomja, plava traka itaa) u primeru sa slike 2.2, naslov je obezbeen linijom Druga.html -p rim er obrade teksta HTML koda. Tagovi H1 do H6 oznaavaju veliinu slova -H 1 najvea, i H6 najmanja slova koja raspoznaje HTML - u primeru sa slike 2.2 to se postie sledeim kodom:

O vo je tekst vel. H1Ovo je tekst vel. H2Ovo je tekst vel. H3Ovo je tekst vel. H4Ovo je tekst vel. H5Ovo je tekst vel. H6

Slika 2.2 Druga.html-veliina slova, bold, italik, i horizontalne linije

Tagovi za podebljavanje i iskoavanje teksta su ve obraeni na poetku poglavlja o HTML-u, a u primeru 2.2 podebljani i italik tekst u prikazu stranice postie se sledeim linijama koda:

Ovo su podebljana slovaOvo su kosa slova

Tag je neparan (nema ) i on daje uputstvo web itau da dalji tekst prebaci u novi red (break row)

Tag (Horizontal Rulle) oznaava horizontalnu liniju i takoe je neparan. Moe sadrati i dodatne atribute kojima se definie irina, boja i horizontalno poravnanje linije, kao u primeru 2.2, definisano sledeim linijama HTML dokumenta:

odnosno

Veliina i boja slova mogu se definisati i parom tagova i , uz koritenje atributa SIZE i COLOR, kao u primerima 2.3 i 2.4.

5

Primer 2.3 (treca.html) prikazuje koritenje taga font za podeavanje veliine slova:

Treca.html:

Treca.html -velicina slova

Ovo je tekst ispisan bez ikakvog formatiranjaOvo

su slova napisana sa FONT SIZE=1

Ovo

su slova napisana sa FONT SIZE=2

Ovo

su slova napisana sa FONT SIZE=3

Ovo

su slova napisana sa FONT SIZE=4

Ovo

su slova napisana sa FONT SIZE=5

Ovo

su slova napisana sa FONT SIZE=6

Ovo

su slova napisana sa FONT SIZE=7

Ovo

su slova napisana sa FONT SIZE=+3

Ovo su slova napisana sa FONT SIZE=-3

U Web itau, ovaj HTML kod daje sledei izgled stranice:

6

Slika 2.3 Treca.html -veliina slova primenom taga

Mogue veliine fonta su od SIZE=1 (najmanji) do SIZE=7 (najvei). M ogue je koristiti i relativnu referencu na veliinu, pri emu se poveanje, odnosno umanjenje definie na osnovni font (veliinu) koji se koristi u Web itau (basefont). Dakle SIZE="+3" oznaava uveanje za 3 u odnosu na podrazumevanu veliinu slova za ita (najee je podrazmevana veliina SIZE="3", pa bi u tom sluaju SIZE="+3" bilo isto to i SIZE="6").

HTML dokument je prim er primene atributa COLOR u okviru taga FONT, kojim se podeava boja teksta koji se ispiuje na stranici, kao u primeru datom listingom html dokumenta Cetvrta.html.

Na primer,

Ovo je plavi tekst

Potrebno je navesti jedino jo da se boja osim kljunom rei (blue, green, red) moe definisati i heksadecimalnim kodom boje. Na primer

Cetvrta.html:

Cetvrta.html-velicina i boja slova

Ovo je tekst ispisan bez ikakvog formatiranjaOvo je tekst ispisan sa FONT COLOR=blue

Ovo je tekst ispisan sa FONT COLOR=green

Ovo je tekst ispisan sa FONT COLOR=red Ovo je kombinacija ispisana sa FONT COLOR=blue SIZE=+3

U Web itau, ovaj HTML kod daje sledei izgled stranice:

Slika 2.4 Cetvrta.html -B o ja slova primenom taga

Primer poravnanja teksta uz levu, ili desnu ivicu i centriranja teksta, dat je html dokumentom peta.html:

Peta.html -poravnanje teksta

Tekst pisan u novom paragrafu i poravnat LEVO... Tekst pisan u novom paragrafu i poravnat LEVO... Tekst pisan u novom paragrafu i poravnat LEVO...

Tekst pisan u novom paragrafu i CENTRIRAN... Tekst pisan u novom paragrafu i CENTRIRAN... Tekst pisan u novom paragrafu i CENTRIRAN...

Tekst pisan u novom paragrafu i poravnat DESNO... Tekst pisan u novom paragrafu i poravnat DESNO... Tekst pisan u novom paragrafu i poravnat DESNO...

Par tagova i definie pasus (Paragraph) teksta. Za poravnanje teksta u datom pasusu, koristi se atribut ALIGN sa jednom od tri vrednosti: "left", "center", ili "right", kao u gornjem primeru. Rezultat koji se dobije u Web itau, prikazan je slikom 2.5:

9

Slika 2.5. Poravnanje teksta u pasusu

2.3 Definisanje podloge (pozadine) Web stranice

Postavka boje pozadine vri se atributom BGCOLOR u okviru BODY taga. Na primer, da bi boja pozadine bila ,,aqua, kucaemo:

Sledi primer html koda koji ilustruje odreivanje boje pozadine na stranici (Sesta.html).

Odgovarajui izgled stranice dat je slikom 2.6:

10

Sesta.html-boja pozadine

Boja podloge ovog dokumenta je "aqua"Probni tekst.. < /H l>Probni tekst.. Probni tekst.. Probni tekst.. Probni tekst.. Probni tekst..

Slika2.6 Odreivanje boje pozadine

11

M ogue je postaviti i neku sliku kao pozadinu dokumenta, to se postie atributom background taga body:

Sledi primer html koda koji ilustruje odreivanje slike kao pozadine na stranici (Sedma.html):

Sedma.html-slika kao pozadina

Boja teksta moe se menjati primenom atributa TEXT u tagu BODY. Na primer, da je u dokumentu sedma.html tag Body definisan kao:

deformisana. Odgovarajue naredbe u html kodu kojima se postavlja slika na stranicu su boldovane u primeru Osma.html.

Osma.html-slike

Ovo je slika u njenoj originalnoj velicini (irine 125 pixela i visine 83 pixela)

Ovo je slika u duplo veoj velicini (irine 250 pixela i visine 166 pixela)

Ovo je deformisana slika zbog promene odnosa sirina/visina (sirine 200 pixela i visine 50 pixela)

Takoe, uveavanje slike u prikazu u odnosu na original, dovodi do smanjene otrine slike u prikazu, kao to se u navedenom primeru moe uoiti.

Izgled odgovarajue Web stranice kada se startuje html dokument Osma.html, vidi se na slici 2.9:

14

Slika 2.9 Primer postavljanja slike na Web stranicu

Pozicioniranje slike po horizontali i odnos slike prema tekstu na stranici, definie se atributom ALIGN, kao u primeru

Deveta.html (redovi koji se koriste za pozicioniranje slike su boldovani):

Deveta.html-pozicioniranje slike

Ovde smo ucitali sliku i podesili da se poravna uz levi rub, tako da

15

sav tekst koji pisemo bude vidljiv s njene desne strane...Ako je tekst koji pisemoduzi od ukupne visine slikeonda ce se ostatak tekstanastaviti ispisivati ispod slike...

Ovde smo ucitali sliku i podesili da se poravna uz desni rub, tako da sav tekst koji pisemo bude vidljiv s njene leve strane...Ako je tekst koji pisemoduzi od ukupne visine slikeonda ce se ostatak tekstanastaviti ispisivati ispod slike...

Ako sliku zelimo postaviti na sredinu ekrana, onda se moramo posluziti naredbom P ALIGN=CENTER

kako bi definisali da svi objekti u novom paragrafu budu centrirani na sredinu ekrana...

Slika 2.10 Primer pozicioniranja slike na Web stranici

Korisno je obezbediti da se, kada korisnik dovede pokaziva mia na sliku unutar neke Web stranice, pojavi tekst-komentar slike. U primeru deseta.html, kada korisnik dovede pokaziva mia na sliku labuda, pokazuje se komentar Labud, kao na slici 2.11.

Takoe, mogue je i postaviti okvir oko slike, kao u navedenom primeru (gde je oko slike postavljen okvir debljine 4 piksela)

Komentar za sliku se dodaje atributom ALT, u okviru taga IMG, a okvir atributom BORDER u okviru istog taga:

Deseta.html:

Deseta.html-komentar i okvir oko slike

Ovde je uitana slika, postavljen okvir debljine 4 pixela i obezbedjeno da se pojavi komentar "LABUD" kada se mi bude nalazio iznad slike...

Sliku i tekst smo poravnali na sredinu ekrana koristei naredbu CENTER!

Izgled stranice vidi se na slici 2.11:

L

Slika 2.11 Primer okvira slike, i komentara za sliku

18

2.5 Rad sa tabelama

U HTML-u, tablica je predstavljena brojem kolona (vertikalno) i brojem redova (horizontalo). Svako pojedino polje unutar tablice zove se elija, unutar koje se moe upisati neki tekst, postaviti slika ili kombinovati oboje. U svakoj tablici moe se podesiti debljina njenog okvira (BORDER), zatim irina i visina tablice u odnosu na veliinu ekrana (W IDTH/HEIGHT), kao i druge opcije.

Svaka tabela u HTML kodu pounje tagom i zavrava se tagom . Unutar ovog para tagova, svaki red kolone poinje i zavrava tagovima i (Table Row). Svaka elija unutar jednog reda, poinje i zavrava tagovima i (Table Data). Okvir tabele definie se atributom BORDER unutar taga . Naredni segment HTML koda definie tabelu sa samo jednom elijom:

proba

Ako elimo tabelu s jednim redom, tri kolone i okvirom debljine 5 piksela, tada bi to definisali sledeim segmentom koda:

ko lona 1 kolona2kolona3

Tabela sa dve kolone i dva reda, prikazana na slici 2.12, realizuje se HTML datotekom Jedanaesta.html:

19

Jedanaesta.html:

Jedanaesta.html

redl-kolonal

redl-kolona2

red2-kolonal

red2-kolona2

Atribut bgcolor="yellow" unutar taga TABLE definie da e boja pozadine tabele biti uta. Atribut bgcolor="aqua" unutar TD taga koji definie eliju u preseku drugog reda i druge kolone, definie da e boja pozadine te elije biti aqua-plava, kako se vidi na slici 2.12:

Tabelu je mogue i poravnati uz levu ili desnu ivicu stranice, ili je centrirati, primenom atributa ALIGN, a isto tako odrediti i njenu irinu u odnosu na irinu stranice, odnosno prozora Web itaa (u procentima) primenom atributa W IDTH, unutar taga .

20

.# ] Done j My Computer

Slika 2.12 Primer tabele sa definisanim bojama pozadine

U prethodnom primeru, ako bi red sa tagom izmenili da bude:

Dobili bi izmenjen izgled stranice sa slike 2.12, kako se vidi na slici 2.13:

Slika 2.13 Promena irine i poravnanja tabele

21

M ogue je odrediti i da slika predstavlja pozadinu cele tabele. ili pak samo jedne elije, a takoe je mogue i ubaciti sliku kao sadraj ili deo sadraja neke elije tabele. Atributi, odnosno tagovi kojima se ovo postie, prikazani su podebljano u primeru Dvanaesta.html, a rezultujua Web strana vidi se na slici 2.14:

Dvanaesta.html:

Dvanaesta.html

Slika 2.14 Podeavanje pozadine tabele i elije i umetanje slike kao sadraja elije

Unutar tabele. mogue je definisati posebno zaglavlje, telo, i dno (footer) tabele, kao i naslov tabele, koji postaje njen sastavni deo. Izmeu para tagova i navodi se naslov tabele. Ako je posebno definisano zaglavlje tabele, ono se formira izmeu tagova i . Celije u zaglavlju nisu omeene tagovima i , ve umesto toga tagovima i . Telo tabele (redovi i kolone tela tabele) nalazi se izmeu tagova i . Podnoje tabele (footer) zapoinje tagom i zavrava sa

Unutar tagova

Trinaesta.html

tag obezbedjuje naslov tabele --> C ene okolade < /stron gx /cap tion >

definie zaglavlje tabele >

umee jedan red u zaglavlju > Cokolada

M ilka 100

Galeb85.00

Najlepe elje87.50

Nestle93.00

tag definie ponoje tabele- takozvani futer >

Prosena cena< th>91.375

24

Slika 2.15 Primer tabele sa naslovom, zaglavljem, i podnojem

Mogue je spajati pojedine elije tabele, ili ih razdvajati, uz pomo odgovarajuih tagova.

Da bi formatizovali odednom jednu ili vie kolina, koristiemo tagove i . Atribut span definie na koliko kolona se odnosi naredba za formatizovanje, kao u sledeem primeru, gde e u svim elijama prve kolone biti primenjeno desno poravnanje:

tag deluje >

Rowspans i colspans spajaju specificirani broj elija vertikalno ili horizontalno, kao u sledeem primeru:

25

< tr^

Kod html fajla Cetrnaesta.html, koji rezultuje slikom 2.16 kada se startuje u Web itau, je sledei:

Cetrnaest.html:

Cetrnaesta.html

M alo kompleksnija tabela

Ovo je prim er kompleksnije tabele i tagovi su koristeni da >

tag deluje >

Internet jezici i alati 2ObavezanDaDa

Elektronako poslovanje lOpcioni

2.6 Rad sa listama

Liste (nabrajanja) mogu biti numerisane i nenumerisane. Numerisana lista zapoinje tagom (ordered list) i zavrava tagom .

Nenumerisana lista zapoinje tagom (unordered list) i zavrava tagom .

Svaka stavka u listi, bila ona numerisana ili nenumerisana, zapoinje tagom (list item), koji je neparan.

Da li e nabrajanje u listi biti arapskim ili rimskim brojevima, ili slovima abecede u numerisanoj, odnosno cmim ili belim kruiima ili cmim kvadratiima u nenumerisanoj listi, odreuje se atributom TYPE unutar taga , odnosno .

Izgled vie razliitih numerisanih listi dat je na slici 2.17, a html kod koji u prozoru Web itaa ispisuje navedene liste, dat je u nastavku u fajlu Petnaesta.html:

28

Petnaesta.html:

Petnaesta.html

Primer obicne OL liste:

Prva stavka u listi Druga stavka u listi Treca stavka u listi

Primer OL TYPE="I" liste:

Izgled vie razliitih nenumerisanih listi dat je na slici 2.18, a html kod koji u prozoru Web itaa ispisuje navedene liste, dat je u nastavku u fajlu Sesnaesta.html:

30

Sesnaesta.html:

Sesnaesta.html

Primer obiene UL liste:

Prva stavka u listi Druga stavka u listi Trea;a stavka u listi

Primer UL TYPE="circle" liste:

Prva stavka u listi Druga stavka u listi Treaea stavka u listi

Prim erU L TYPE="square" liste:

Prva stavka u listi Druga stavka u listi Treaea stavka u listi

Slika 2.18 Primer razliith vrsta nenumerisanih listi

2.7 Rad sa linkovima

M ogu je link na drugu W eb stranu, link na drugo mesto na tekuoj Web strani, ili download (link na neki drugi dokument, koji nije Web stranica, kako bi se mogao sa serverskog raunara kopirati na korisnikov (klijentski) raunar). Takoe, moemo linkom startovati slanje e-mail pote.

Link na drugu Web stranu, obezbeuje se uz pomo taga, kao u narednom primeru:

32

Slika 2.19. Izgled stranice sa linkovima

Boja linka za Google je drugaija to indicira da je korisnik ve kliknuo na ovaj link (posetio sajt google.com), dok na druga dva linka korisnik jo nije kliknuo.

Kada korisnik klikne na link na kompleksnu tabelu, otvara se novi prozor sa stranicom cetrnaesta.html, kao na slici 2.20:

34

Slika 2.20. Prelazak na stranicu pomou linka

Link na drugu Web stranicu umesto teksta, kao na slici 2.19, moe biti i slika. U tom sluaju, umesto teksta koji e biti link, a koji se umee izmeu i taga, sada e biti umetnut tag sa nazivom slike koja e predstavljati link. Na primer, umesto

Iink2.html:

Primer linka pomocu slike

Primer linka koji poziva HTML dokument "cetrnaesta.html" :

Da bi video kompleksnu tabelu, klikni na sliku devojcice

Link na drugo mesto na tekuoj Web strani obavlja se takoe tagom , ali se sada kao vrednost atributa HREF navodi oznaka sidra koje je postavljeno na mesto u tekstu na koje se vri skok, odnosno gde link vodi. Na mestu gde link treba da odvedeonoga ko klikne na njega, sidro se postavlja koritenjem taga . Atribut Name ima kao vrednost ime sidra navedeno unutar navodnika. Isto ime sidra navodi se i na mestu linka kao vrednost atributa HREF, sa navoenjem znaka # ispred imena, unutar navodnika. Dakle,

TEM A BROJ 1.

na mestu gde e se nalaziti link, i

na mestu na stranici gde link treba da vodi (u datom primeru gde poinje tema brojl).

Primer korienja ove varijante linka dat je listingom fajla link3.html:

Link na poziciju u okviru iste stranice

Primer upotrebe Atributa NAM E u duem HTML dokumentu.

Izaberite: TEMA BROJ 1.TEM A BROJ 2.

UVOD:uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod uvod

TEM A BROJ 1 ,tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1

37

tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1 tema broj 1

TEM A BROJ 2. tema br2 tem a br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tem a br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tem a br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tem a br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tema br2 tem a br2 tem a br2 tem a br2 tema br2 tema br2

(idi na TEM U BROJ 1)

Fajl link3.html proizvodi stranicu ija je duina tolika da ne moe cela stati u prozor Web itaa, ve je neophodno skrolovati je (pomerati se ka dole u tekstu pomou desnog vertikalnog kilzaa u prozoru) da bi videli njen celokupan sadraj. Da bi bre dolazili do dela sadraja koji nije trenutno vidljiv u prozoru, koristi se sistem linkova kako je u navedenom fajlu pokazano. Izgled Web stranice kada se uita fajl link3.html, dat je na slici 2.22. Klikom na link TEM A BROJ 1, dobija se sadraj prozora kao na slici 2.23, a da je korisnik kliknuo na link TEM A BROJ 2 dobio bi izgled prozora kao na slici 2.24

38

Slika 2.23 Rezultat posle klika na link TEMA BROJ 1

39

Slika 2.24 Rezultat posle klika na link TEM A BROJ 2

Klikom na link (idi na TEM U BROJ 1) u prozoru sa slike 2.24, ponovo bi dobili prozor kao na slici 2.23.

Download (link na neki drugi dokument, koji nije Web stranica, kako bi se mogao sa serverskog raunara kopirati na korisnikov (klijentski) raunar), i link kojim se automatski pokree slanje e-mail pote, prikazani su listingom fajla link4.html:

40

Primer download-a i linka na e-mail adresu

Primer DOW NLOADA zip fajla i primer linka na e-mail:

Pokrenite download clanka o CMS sistemu klikom o v d e !

Piite na na: ovu

adresu.

Kada se link4.html pokrene u Web itau, dobije se prozor kao na slici 2.25:

Slika 2.25 Link za download, i link na mejl adresu

41

Klikom na link ovde, startuje se itanje ili kopiranje fajla intranet2.zip sa servera na raunar korisnika (klijenta). Sama procedura kopiranja (download-a) se neznatno razlikuje u zavisnosti od toga koje programe za download korisnik ima (ili nema) instalirane na svom raunaru.

Klikom na link ovu adresu. startuje se korisnikov e-mail softver, slino kao na slici 2.26:

Slika 2.26 rezultat pokretanja linka na e-mail adresu

2.8 Rad sa formama (formularima)

Forme u HTML dokumentu koristimo kada od korisnika elimo prihvatiti neki podatak i zatim ga proslediti na dalju obradu, snimiti ga u bazu podataka ili ga jednostavno poslati e-mailom na odreenu adresu.

Na primer, korisne su ako elimo pribaviti podatke o nekom korisniku, obaviti neku anketu ili pak korisniku omoguiti da popuni i poalje neku narudbinu putem Interneta u cilju kupovine nekog proizvoda.

42

Princip rada forme je otprilike sledei (krajnje pojednostavljeno):

korisnik popuni polja koja su mu ponuena klikne na dugme "SUBMIT" ili "POALJI" podaci upisani u formu bivaju prosleeni do odreenog programa na

serveru (pisanog npr. u Javi, Perlu, PHP-u, ASP-u ili nekom drugom jeziku)

taj program ih prihvata, obrauje ih, snima u bazu podataka, alje povratnu informaciju, ili radi neto slino, zavisno ve koja je njegova namena...

Svaki HTML dokument moe imati vie formi, s tim da svaka poinje sledeim tagom:

form al.htm l:

Jednostavna forma

Upiite svoje ime i prezime:

Upiite svoju poruku ili komentar:

Slika 2.27 Primer forme date fajlom form al.htm l

44

Tag iz fajla form al.htm l koji rezultuje belim prozoriem (pravougaonikom) u koji korisnik treba da upie ime i prezime, je:

Vrednost atributa name (u ovom primeru "IME", e biti ime promenjive koja e kao vrednost imati ono to korisnik ukuca u navedeno polje (dakle vrednost string promenjive IME je konkretno ime i prezime koje korisnik ukuca). Ova promenjiva se post metodom alje u fajl obrada.php koji se nalazi na serveru. U tom fajlu, itajui vrednost promenjive IME, u stvari oitavamo ime i prezime koje je korisnik uneo u formu na svom (klijentskom) raunaru, moda hiljadama kilometara daleko od serverskog raunara gde je ovaj podatak prosleen kroz internet komunikacioni kanal. Kako znamo da je promenjiva IME prosleenja u fajl obrada.php i to metodom post? Pa tako je r to pie u tagu fajla form l.htm l:

Atributi size i maxlength su opcioni. Ako se izostave, size e biti postavljeno da default (podrazumevanu) vrednost, a maxlength e biti jednako sa size. Size odreuje duinu prozoria tipa text u koji se u navedenom primeru zahteva unos imena i prezimena korisnika. Maxlength odreuje najveu dozvoljenu duinu (u karakterima) koja se dozvoljava kao unos u dato polje. Ako je vrednost atributa maxlength vea od vrednosti atributa size, tada e se, u sluaju da je ime i prezime koje se unosi u polje due od duine polja na formi, tekst koji se unosi pomerati u levo, tako da poetak unetog teksta nee biti vidljiv u polju, ali e biti zapamen kao vrednost odgovrajue promenjive, u celosti.

Tag koji rezultuje prostorom u koji korisnik moe upisati svoj komentar, je

Vrednosti atributa rows i cols odreuju koliko redova i kolona e biti veliko polje za unos (u datom primeru poruke ili komentara koje unosi korisnik. Ako je poruka vea od veliine prozora polja, pojavie se klizai koji e omoguiti njeno skrolovanje unutar polja. Ime promenjive koja e nositi kao vrednost ukucani komentar ili poruku korisnika ka fajlu obrada.php na serveru, u ovom primeru je "KOMENTAR".

Tagovi koji prikazuju dugmad "Poalji" i "Prekini" na formi su:

45

Klikom na dugme "Poalji", aktivira se post metod i odgovrajue promenjive koje nose podatke iz forme se alju na odredite. Klikom na dugme "Prekini" brie se sve to je korisnik uneo u polja forme i omoguuje mu se ponovni unos podataka, koje e, eventualno, klikom na dugme "Poalji" i proslediti u fajl obrada.php na serveru.

Naredni listing fajla forma2.html pokazuje jo jedno polje za unos koje se moe postaviti na formi, takozvani ekboks. tag koji rezultuje postavljanjem ovog polja na formu je:

Atributi type i name taga input su ve poznati i opisani u prethodnom primeru. Atribut value moe imati vrednost "ON" ili "OFF". Par ime-vrednost e biti poslat polse klika na dugme submit samo ako je odgovarajui ekboks ekiran. Atribut "checked" u kockicu koja predstavlja polje ekboks upisuje "triklu" kao znak potvrde (automatsko ekiranje bez akcije korisnika). Listing fajla forma2.html je sledei:

Jos jedna jednostavna forma

OZNAITE ELJENE STAVKE: Naruujem knjigu HTML-a Naruujem knjigu JavaScripta

Rezultat izvrenja fajla forma2.html u Web itau je dat na slici 2.28:46

Slika 2.28 Primer checkbox polja u formi

Umesto ekboksova, mogu se na formu postaviti i takozvana "radio dugmad", na primer:

Volim plavu boju Volim zelenu boju

Razlika izmedu radio i checkbox dugmadi je to kod checkbox opcija korisnik moe izabrati (ekirati) proizvoljan broj ponuenih stavki, dok kod radio opcija moe da odabere (ekira) samo jednu od ponuenih stavki. Zato kod checkbox polja svaka opcija ima svoje ime, dok sve radio opcije imaju jedno, zajedniko ime.

Primer forme koja ima postavljena radio polja dat je listingom fajla forma3.html a rezultat izvrenja slikom 2.29:

47

forma3.html:

Forma sa radio dugmadima

Koju boju vie volite:Volim plavu bojuVolim zelenu boju

Slika 2.29 Forma sa radio dugmadima

48

Od polja koja se mogu postaviti na formu, ovde emo pomenuti jo etiri: SELECT i input polje tipa passvvord, label i input polje tipa hidden. Primer koritenja ovih polja dat je html kodom u listingu forma4.html, a rezultat izvrenja ovog koda je na slikama 2.30 i 2.31:

forma4.html

Select, password label i hidden polja forme

Ime:

Lozinka:

Ocenite ovaj Web sajt:

Superdobar Grozno

49

Slika 2.30 Primer korienja input polja tipa hidden i passvvord, i polja label i select

Slika 2.31 Primer popunjavanja input polja tipa passvvord, i odabiranja stavke polja select

50

Input polje tipa hidden nije vidljivo na formi, ali e promenjiva ije ime je definisano u okviru taga i njena vrednost koja je takoe unapred definisana biti prosleeni sa svim ostalim podacima sa forme kada korisnik klikne na dugme. Korisnik nije ni svestan postojanja ovog polja, niti toga da e njegova vrednost biti prosleena klikom na dugme. U prethodnom primeru, to polje definie sledei tag:

Uloga taga label je da tekst koji definie ta treba uneti u odreeno polje dri sigurno zajedno sa odgovarajuim poljem defmisanim unutar parova tagova label i /label, kao u sledeem primeru:

Ime:

Tag

je veoma slian input tagu tipa text, sa jedinom razlikom to se u ovom sluaju tekst koji korisnik unosi u polje ne vidi kao takav ve je "zamaskiran" crnim kruiima, kao na slici 2.30.

Tag select rezultuje padajuim menijem na formi, kao na slikama 2.29 i 2.30. Deo koda iz prethodnog primera koji se odnosi na ovo polje na formi je:

Superdobar Grozno

Svaka od stavki select menija je navedena unutar para i . Ako elimo da po "default-u" bude ponuena neka druga, a ne prva navedena stavka, to se postie navoenjem atributa selected = "selected" unutar odgovarajue option stavke. Ako je potrebno omoguiti korisniku da po elji odabere vie, a ne samo jednu od ponuenih stavki, tada se koristi atribut M ULTIPLE u okviru select taga,

51

'

3. CSS -Kaskadne stranice stilova (Cascading Style Sheets)

3.1 Zato stranice stilova?

HTML odreuje sadraj dokumenta, a ne njegov izgled. Tagovi opisuju deo sadraja dokumenta -paragraf, listu, zaglavlje, link na drugu stranicu. CSS omoguuje definisanje margina, boja, fontova, razmaka, pozicija objekata na stranici, itd. W3C -standardizuje primenu stilova u HTML dokumentu, tako to umesto promene ili dogradnje samog HTML jezika koji definie sadraj, dodaje CSS koji daje punu kontrolu nad izgledom stranice ili celog Web sajta. CSS omoguuje da izgled stranice odredite na jednom mestu, umesto da uvek iznova definiete boje, fontove i ostale parametre izgleda vae stranice svaki put kada zaponete novi pasus, listu ili eliju u tabeli. Izmene u izgledu stranice su neuporedivo jednostavnije, je r je izgled stranice definisan na jednom mestu, u CSS stilovima. Fontovi i ostali atributi se mogu deflnisati sa znatno veom preciznou nego to to doputa html. Moete pozicionirati sadraj stranice sa preciznou reda piksela. Moete definisati slojeve (layers) koji mogu biti pozicionirani na vrhu bilo kog drugog objekta (esto koriteno za pop-up menije). Stranice se uitavaju bre, je r nisu optereene tagovima koji definiu izgled -o n je definisan u CSS fajlu koji se uitava samo jedanput kada posetilac doe na va sajt.

3.2 Integracija CSS-a sa HTML-om

Stilove u HTML moete dodati na nekoliko naina:

upotrebom pojedinanih stilova u HTML tagovima upotrebom taga unutar HTML dokumenta kreiranjem eksterne stranice stilova

Definisanje CSS stila sastoji se od:

selektora, koji oznaava na koji objekat se odnosi stil svojstva, koje oznaava koju osobinu u okviru stila definiemo vrednosti svojstva u okviru jednog CSS stila (pravila) moemo definisati vie svojstava

i njihovih vrednosti (napr. boja, veliina fonta, ime fonta,...).

53

Svojstvo i odgovarajua vrednost se navode jedno za drugim, razdvojeni meusobno dvotakom. Vie parova svojstvo-vrednost se meusobno razdvajaju taka-zarezom. Skup svih parova svojstvo-vrednost za jedan CSS stil (jedno CSS pravilo) navode se unutar vitiastih zagrada nakon selektora.

prim erl:N

h l {co!or:bIue; font-size:40px; font-family:garamond}

Jedno CSS pravilo (skup parova svojstvo-vrednost unutar vitiastih zagrada) moe se odnositi na vie selektora. Svaki HTML tag moe biti selektor (u prethodnom primeru h l).

CSS pravilo iz prim eral kae da e tekst koji se nalazi izmeu tagova < h l> i < /h l> biti prikazan plavim slovima, veliine 40 piksela, fontom Garamond.

primer2:

h2, p, ul {color:green; font-family:arial}

Kontekst selektori su jedan ili vie selektora razdvojenih razmakom, koji omoguavaju primenu kaskadnog pravila:

P STRONG { background: yellow }

Ovo pravilo govori da svaki naglaeni tekst (STRONG) u okviru paragrafa (P) treba da poseduje utu boju kao boju pozadine. U koliko se STRONG element nalazi na primer u okviru naslova H3, dato pravilo se ne primenjuje.

Pravilo iz primera 2 govori Web itau da nalov drugog nivoa, pasusi nenumerisanu listu teksta prikae zelenom bojom i fontom Arial.

Osim tagova, selektori mogu biti i klase i objekat sa odreenim ID. Selektor tipa klasa poinje takom:

.menu {color:blue}

Dodeljivanje klase vri se atributom class u jedan ili vie HTMLtagova:

Takoe je mogue dodeliti pravilo za klasu i odreeni HTM L tag:

54

hl.m enu {color:black}

Ovo pravilo podeava crnu boju za bilo koji tekst veliine h l koji je dodeljen klasi menu. Sledee pravilo:

#headl {coIor:red}

odreuje da je tekst prikazan crveno za html tag iji je ID headl < h l ID=h ead l > Ovaj tekst je crven < /h l>

Tekst prikazan u okviru taga (u ovom sluaju h l) iji je identifikator head bie prikazan crvenom bojom.

3.2.1 Upotreba pojedinanih stilova u HTML tagovima

Pojedinani stil u html tagu se ugrauje primenom atributa style:

< h l STYLE=color:blue;>Ovo je plavi naslov

Korienjem STYLE atributa kod HTML elemenata liavate se prednosti razdvajanja sadraja od prezentacije.

3.2.2 Upotreba taga unutar HTML dokumenta

Ovo je mnogo bolji nain primene CSS pravila. Tag se uvek umee unutar head sekcije html dokumenta. U tom sluaju, pobroji se blok CSS pravila zatvorenih izmeu i tagova kao u sledeem primeru. Atribut TYPE=text/css u tagu govori Web itau da upotrebi CSS standard za stilove. Netscape je podravao alternativni nain Java Script Style Sheets, ali on nije podran u Netscape-u 6.

H l, H2 {color: blue; text-align: center}P {color: red}

Ovde su definisana dva pravila: -prvo pravilo definie da naslovi veliine h l i h2 budu centrirani i plave boje, a drugo pravilo definie da e tekst u paragrafima biti crvene boje.

55

U prethodnom primeru, tagovi za komentar () e biti ignorisani od strane web itaa koji raspoznaju stilove, a stariji itai, koji ne rade sa stilovima, CSS pravila e shvatiti kao komentar i nee ih prikazati kao nepoeljan tekst na ekranu.

3.2.3 Eksterne stranice stilova

esto je preglednije izdvojiti CSS pravila u poseban fajl. U tom sluaju, mogue je i istu eksternu stranicu stilova koristiti za vie razliitih html stranica, ili ak za itav sajt. Da bi koristili eksternu stranicu stilova, treba sva CSS pravila (koja bi inae kucali unutar tagova i ) ukucati u poseban fajl, bez poetnog i zavrnog taga . Dokument treba snimiti sa ekstenzijom css, na prim er mojstil.css

Stranica stilova se sa HTML dokumentom povezuje pomou taga unutar sekcije HTML fajla:

3.3 Svojstva koja se koriste u CSS pravilima

3.3.1 Biranje fonta

Svojstvo kojim se vri biranje fonta je: font-family Primer:

p {font-family: Times New Rom an, Times, Serif}

Ovde su navedeni W indows font Times New Roman, Macintosh font Times i generiki font Serif. Ako navedenog fonta nema, Web ita e koristiti svoj podrazumevani font. Font sa imenom od vie rei, mora biti u navodnicima.

56

3.3.2 Biranje veliine fonta

Svojstvo: font-size Primer:

b {font-size:18pt} p {font-size:1.5em}li {font-size:30px} cite {font-size:120%}

Kao to se vidi, veliina teksta moe biti data u pointima (takama - pt) i tada zavisi od rezolucije ekrana, u pikselima (ne zavisi od rezolucije- px), procentima do tada koritene veliine teksta, ili umnoku irine slova M do tada koritene veliine teksta (em)

3.3.3 Biranje stila fonta

Svojstvo font-style

M ogue vrednosti svojstva:

normal (podrazumevano) italic oblique

3.3.4 Biranje ebljine slova

Svojstvo font-weight

M ogue vrednosti svojstva:

normal (default) bold bolder lighter 100 do 900 u koracima po 100

57

3.3.5 Svojstvo font-variant

Mogue vrednosti svojstva:

normal (default) small-caps

3.3.6 Definisanje vie osobina fonta jednim svojstvom

Svojstvo: font

M ogue vrednosti svojstva:

vrednosti stilova font-style, font-variant, font-weight, font- size/line-height, font-family

Primer:

p { font: italic bold 12pt/14pt Times, s e r if }

Pasus e biti ispisan sa bold i italic Times ili serif fontom veliine12 pointa i visine linije 14 pointa.

Napomena: Redosled atributa je bitan: -font vveight i style moraju biti specificirani pre ostalih.

3.3.7 Biranje proreda (razmaka izmeu linija)

Svojstvo line-height

M ogue vrednosti svojstva:

normal, broj, px, procenat

Primeri:

58

line-height:normalline-height:1.5line-height:22pxline-height:150%

3.3.8 Podeavanje ostalih svojstava teksta

Svojstvo text-decoration

M ogue vrednosti svojstva:

none, underline, overline, line-through i blink

Primeri:

text-decoration: none text-decoration: underline text-decoration: overline text-decoration:line-through text-decoration:blink

Svojstvo text-transform

Mogue vrednosti svojstva:

none, capitalize, uppercase, lowercase

Primeri:

text-transform : none text-transform:capitalize text-transform:uppercase text-transform : lowercase

Svojstvo text-align

Mogue vrednosti svojstva:

59

left, right, center, justify (samo Windows)

Primeri:

text-align:lefttext-align:righttext-align:centertext-align:justify

Svojstvo text-indent

Uvlaenje prve rei u pasusu. Primeri:

text-indent:20px;text-indent:10%

Svojstvo white-space

Primeri:

white-space: normalwhite-space:pre (prikazae sve unete beline u tekstu)

Svojstva margin-left, margin-right, m argin-top, margin-bottom

M ogue vrednosti za ova svojstva su:

npx, n%, nem

Primeri:

m argin-left:40px margin-right: 10% margin-top:1.5em

60

3.3.9 Podeavanje boje

Boja teksta podeava se svojstvom: colorBoja pozadine podeava se svojstvom: background-color

Primeri:

.myclass {color:red; background-color:blue;}

.myclass {color:#000000; background-color:#FFCCOO;}

.myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);}

.myclass {color:rgb(100% ,100% ,81% );background-color:rgb(81% ,18% ,100% );}

BODY {background-color:#FF6666;}

3.3.10 Slika kao pozadina

Svojstvo background-image

Primer:

BODY {background-image:url(myimage.gif);}

Svojstvo background-repeat

M ogue vrednosti svojstva:

repeat, repeat-xrepeat-y, no-repeat

Svojstvo background-position (nije podrano u Netscape 4 Web itau)

Pozicioniranje se vri unoenjem ofseta od leve i gornje ivice

Primer:

BODY {background-image:url(myimage.gif);

background-position: 75px 75px;}

Svojstvo background-attachment

Koristi se za fiksiranje slike (da se slika ne pomera prilikom skrolovanja) -n ije podrano u Netscape 4 Web itau

Primer:

BODY {background-image:url(myimage.gif); background-attachment: fixed;}

Sva svojstva pozadine je mogue kombinovati u jedno CSS pravilo, na primer:

BODY {background:green url(myimage.gif); repeat-y fixed 75px 75px;}

3.3.11 Svojstva za linkove

Svojstva koja se koriste za podeavanje osobina linkova su:

A:linkA:visitedA:activeA:hover

Vrednosti koje se dodeljuju ovim svojstvima su neki drugi CSS stil, kao to se vidi u sledeem primeru:

A:link {text-decoration: none}A:visited {text-decoration: underline; color: red; }A:active {text-decoration: none}A:hover {font-size:24; font-weight:bold; color: red; }

3.3.12 Svojstva za liste

Svojstvo list-style type

M ogue vrednosti svojstva:

62

disccirclesquaredecimallower-romanupper-romanlower-alphaupper-alphanone

Svojstvo list-style image

Mogue vrednosti svojstva:

noneurl()

Svojstvo list-style position

M ogue vrednosti svojstva:

outsideinside

3.3.13 Svojstvo cursor

Ovo svojstvo slui za podeavanje izgleda kurzora kada se nalazi na delu stranice (teksta) na koji se svojstvo odnosi. M ogue vrednosti svojstvai odgovarajui izgled kurzora su pobrojani kroz sledee primere:

Izgled Vrednost Primer

default cursor:default

+ cro ssh a ir cursor:crosshairb hand cursor:handb pointer cursor:pointerb C r o s s b ro w ser cursor:pointer;cursor:hand

63

4+> m ove cursor:move

I text cursor: text

I wait cursor: waithelp cursor: help

f n -resize cursor: n-resize

n e-re s ize cursor: ne-resize

e -re s ize cursor: e-resize

se -re s iz e cursor: se-resize

4 s -re s ize cursor:s-resize

$ sw -re s ize cursor: sw-resize

.xlink {cursor:crosshair},hlink{cursor:help}

CROSS LlNK

HELP LINK

Primer koda sa primenom ovog svojstva:

3.3.14 Pozicioniranje objekata na stranici

Svojstvo: position

M ogue vrednosti svojstva:

absolute i relative

Primeri:

border-right-sty!eborder-bottom-styleborder-top-widthborder-left-widthborder-right-widthborder-bottom-widthborder-top-colorborder-left-colorborder-right-colorborder-bottom-color

Vrednosti za svojstva border-style su:none, solid, double, dotted, dashed, grove, ridge, inset, outset

Vrednosti za svojstva border-width mogu biti u in, cm, pt, px, em

3.3.16 Svojstvo float

Kada se svojstvo float primeni na neki objekat, on je izvuen iz njegovog uobiajenog rasporeda, i pomeren levo ili desno od elemenata koji ga prate u HTML kodu stranice

Primer:

Tekst koji u HTML-u dolazi posle ove slike, bie sada sa desne strane slike. Svojstvo float moe se primeniti i na druge elemente, a ne samo na slike, na primer

h6 {float:left}

3.3.17 Uloga tagova DIV i SPAN

Kako bi se omoguila vea fleksibilnost izrade dizajna Web strana u okviru HTML specifikacije dodata su dva nova taga DIV i SPAN, za rad sa stilovima. Tagovi i slue da omee deo html koda na koji se odnosi odreeni CSS stil. Ako unutar jednog DIV bloka sa odreenim CSS

66

stilom treba primeniti neki drugi CSS stil na samo jedan html red ili deo reda (html naredbe), tada se kao nosa tog stila koristi par tagova i . Jedan div blok moe biti ugnjeden unutar drugog div bloka. Primer upotrebe ovih tagova bie dat u sledeem poglavlju, uz objanjenje slojeva (layers-a).

3.3.18 Slojevi (Layers)

Volite li grafite po zidovima? Kada reite da napiete (ili nacrtate) grafit na zidu, moete ga pozicionirati-na kom delu zida e biti ispisan (nacrtan). Pozicioniranje moe biti apsolutno, od gornjeg levog ugla zida, ili relativno, od mesta gde trenutno drite boicu sa prejom kojim piete. Na jednom zidu moe biti vie grafita, od kojih neki mogu potpuno ili delimino prekrivati ranije uraene grafite. Ti, ranije uraeni grafiti, takoe mogu potpuno ili delimino, prekrivati jo ranije uraene grafite. Svaki uraeni grafit na zidu, dakle, predstavlja jedan sloj, koji moe, i ne mora (potpuno ili delimino) prekrivati druge slojeve, ili biti (potpuno ili delimino) prekriven drugim slojevima

Slina je pria i sa Web stranicama. U ovom sluaju, ulogu zida preuzima Web stranica, a ulogu grafita preuzimaju slojevi (Layer-i). Jedino to je na Webu, stvar jo bolja nego kada stvarate na obinom zidu: -neke slojeve moete uiniti nevidljivima, i JavaScript naredbama initi ih vidljivima pod odreenim uslovima (kada na njih doete pokazivaem mia, i slino). Kolika je dubina sloja, precizno se definie takozvanim z- indeksom: -ako, na primer, posmatrate pil od 52 karte, tada karta koja se nalazi na dnu pila, na stolu, ima z-index 1, a karta na vrhu pila z-index 52.

Jednostavan prim er primene slojeva (koji se u ovom primeru delimino preklapaju), dat je sledeim listingom:

OVO SU SLOJEVI:PRVI SLOJ

z-index:2">DRUGI SLOJ

TREI SLOJ

ETVRTI SLOJ

PETI SLOJ

Rezultat izvrenja ovog koda je sledea stranica prikazana u webitau:

| ? f Done \ % MY Computer

Slika 3.1 Primer primene layer-a (slojeva)

68

Zdravo!

Kada se detektuje dogaaj JavaScript-a mouse-over, svojstvo visibility moe automatski biti promenjeno, tako da sloj postaje vidljiv (visible). Ovo moe biti iskoriteno za kreiranje efektnih menija na vaoj Web stranici.

Zahvaljujui svojstvu position mogue je da na kraju HTML koda bude deo koji e kao sloj biti prikazan na vrhu rezultujue Web stranice. Left i top svojstva mogu se dinamiki menjati koritenjem JavaScript-a. To znai da je mogue postii da se objekti pomeraju po ekranu ak i nakon to je uitavanje Web stranice zavreno. Ovo moe biti koriteno za kreiranje igrica, ili pop-up menija.

I z-index takoe moe biti menjan dinamiki, pomou JavaScript-a. To znai da moete kreirati vie stranica u vidu slojeva, jedan preko drugog, a sve na istoj Web stranici. Kada korisnik klikne na odgovrajui link, jednostavno se, automatskom promenom z-indeksa dovodi sloj sa eljenom informacijom na vrh, umesto da se uitava nova stranica.

Slojevi su svakako nain i za definisanje i realizovanje banera na Web stranici.

Ovakvi efekti prevazilaze oblast istog CSS-a, i definisani su takozvanim DHTML (Dinamikim html-om), koji je ustvari kombinacija CSS-a i JavaScript-a.

Primer koda koji kreira nevidljivi sloj, je sledei:

3.4 Praktian primer primene CSS

U cilju potpunijeg razumevanja primene kaskadnih stilova na html dokument, dat je jedan konkretan, praktian primer. Paljiv italac e primetiti da neki od css stilova koji su koriteni u ovom primeru, nisu prethodno objanjeni - to je uraeno namerno, i sa odreenom idejom: -da itaocu pokae da ni jedan udbenik, ma kako dobar bio (pa ak ni savren, kao to je ovaj), ne moe obuhvatiti sve to se u praksi moe primeniti. I ne treba. Na vama je da, kada nauite ono to ste ovim udbenikom na tacni dobili, sami istraujete dalje, i koristei svoju kreativnost, vetinu i znanje, stvarate nove, sve bolje, lepe, uzbudljivije i primenjivije Web stranice.

69

HTML stranica na koju e se primeniti ekstemi fajl sa css stilovima za ovaj primer, je sledea:

M AGACIN

Administrator

Prijava | Odjava

D obro dosli na stranicu za prijavuDa bi ste pristupili magacinu, morate se prvo prijaviti!

Prij ava:

Unesite korisnicko ime: Unesite lozinku:

Ukoliko ne mozete da se prijavite, ne brinite, verovatno ce vas pre ili kasnije neko od komsija prijaviti.

70

MAGACIN

Unos materijala

Trebovanje materijala

PREGLED

Pregled stanja magacina Istorija ulaza i izlaza

K 0R I SNIK

PrijavaOdjava

2007 Upravljanje znanjem.

Eksterni css fajl, u kome su definisani stilovi (pravila) za ovaj htm] kod, je sledei:

71

extemi.css:/*definisanje visine stranice, margine i unutrasnjeg razmaka*/ html {min-height: 100%;}

* {margin: 0; padding: 0;

}

a {color: #048;} a:hover {color: #06C;}/*definisanje boje pozadine tela stranice, boje i vrste fonta*/ body {

background: #E7E7E2; color: #444;font: normal 62.5% Tahoma,sans-serif; padding-top: 10px;

}/*ponasanje lista i naslova*/ li {list-style: none;}

h l {font: normal 1.8em Tahoma,sans-serif;} h2 {font: bold 1.4em sans-serif;} h3 {font: bold lem Tahoma,sans-serif;}/*forme i polja za upis*/form.input {margin: 0; padding: 0; display: inline;}

h l,h2,h3 {padding-top: 6px; color: #553; margin-bottom: 4px;}

/* odvaja telo od footera */.clearer {clear: both; fon t-size:l.lem ; font-family:Verdana, Arial, Helvetica, sans-serif;}#left {

text-align:left; z-index:100; left: 57px; top: 195px;

}.right {float: right;}

/*deo u kom se nalazi sadrzaj stranice*/.sadrzaj-in {

border: 2px solid #D7D7D2;

72

background: #FFF; font-size: 1.2em; margin: 0 auto; padding: 10px; width: 780px;

}/*spoljasnji okvir*/.sadrzaj-out {

padding-bottom: 20px;}

/*baner*/.header {

background: #CCCCCC url('img/header2.jpg') no-repeat; height: 160px; margin-bottom: 5px; text-align: center;

}/*polje u kom je smesten link za administratora*/.header .admin {

font:"Courier New", Courier, mono;padding-top: 10px;padding-right: 10px;text-align:right;font-size:12px;color:#999999;

}.header .admin a:hover{text-decoration:none; color:#333333; background- color:#FFFFFF; border:thin; border-style:dashed; border-spacing:10px;} .header .admin a{text-decoration:none; color:#CCCCCC; background- color:#FFFFFF;}

/*klasa u kom su smesteni telo i navigacija*/.ispodheada {

background:#003366; color: #FFF;font: normal l .le m Verdana,sans-serif; padding: 8px 12px; text-align:right;

}/*linkovi*/.ispodheada a {

color: #FAFAFA;

73

text-decoration: none;}.ispodheada a:hover {

color: #FFE;text-decoration: underline;

}

/*pozadina tela */.main {

background: url(img/main.gif) repeat-y; border-top: 4px solid #FFF; padding: 8px 5px 0 0;

}

.telo {display:inline; float: right; width:538px; margin:2px;

}.telo .detaljnije {

color: #664; font-size: 0.9em; margin-bottom: 6px;

}/*definisanje lista u okviru klase telo*/.telo li {

list-style: url(img/li.gif); margin-left: 18px;

}.telo p {font-family: "Lucida Sans Unicode",sans-serif;} /*defmisanje klase forma*/,forma{

padding:10px; background: #FFF; border: lpx solid #EEE; color: #666;font: normal lem Tahoma,sans-serif;white-space: pre;margin:5px;

}

/*definisanje polja za navigaciju*/

74

.navigacija {float: left; width: 210px;

}.navigacija h2 {

color:#666666;font: bold 1.1 em Tahoma,sans-serif; line-height: 30px; margin: 0; padding-left: 12px;

}/*liste u okviru navigacije*/.navigacija ul {

padding: 0;border-top: lp x solid #EAEADA;

}.navigacija li {border-bottom: lpx solid #EAEADA;} /*linkovi u okviru lista klase navigacija*/.navigacija li a {

font-size: 1.1 em; color: #554; display: block; padding: 8px 0 8px 5%; text-decoration: none; width: 95%;

}.navigacija li a:hover {

background: #F0F0EB; color: #654; font-style:it^lic;

}

/*ponasanje footera*/.footer {

border: lpx solid #EEE; background :#F FFFFF; color:#CCCCCC; font: lem sans-serif; margin-top: 5px; padding: 10px 12px; text-align:center;

75

.footer a {color:#999999; text-decoration: none;

}.footer a:hover {color:#333333;}

Kao to ste, nadam se, i sami shvatili, oznake /* i */ omeuju komentar u css-u.

Rezultat primene CSS-a na navedeni html kod je izgled stranice kao na slici 3.2:

Slika 3.2 Web stranica sa primenjenim css pravilima kroz eksternu stranicu stilova

Ista ta html stranica, kada se ukloni eksterna datoteka stilova (css fajl), u Web itau izgleda kao na slici 3.3

76

MAGACIN - Microsoft Internet LxplorerFile Edit View Favorites Tools Help Links B

Amimstrator Pnjava 1 Odjava

A

Dobio dosli na stranicu za prijavuDa bi ste pristupili magacinu, morate se prvo prijaviti!

Prijava:

Unesite korisnicko ime:i |i .... ................... jUnesite lozinku:

[ Prijavite se |

| Ukoliko ne mozete a se prijavite, ne brinite, verovatno ce vas pre ili kasnije neko od komsija prijaviti.

M A G A C IN

Unos materiiala Trebovanie mateniala

PR E G L E D

Pregled stania magacina Istonia ulaza 1 izlaza

K O R ISN IK

Pniava Odiava

V

Slika 3.3. Html kod kao sa slike 3.2, ali bez primenjenih CSS pravila

Oigledna je mo primene stilova na html stranice. Naravno, treba imati u vidu da starfji Web itai ne podravaju CSS, noviji ne podravaju sva CSS pravila, i razliiti Web itai razliito tumae odreena css pravila. Zato stranicu koji ste napravili primenom stilova, isprobajte na to vie razliitih itaa, i pod razliitim operativnim sistemima, kako ne bi dolo do neugodnih iznenaenja.

Sledee poglavlje bavi se JavaScript-om, odnosno dinamikim aspektima html-a.

77

'

4. JavaScript -stvaranje dinamikih Web strana

JavaScript je kompaktan i objektno baziran skriptni jezik za razvoj Internet aplikacija. Programski kod upisuje se direktno u HTML stranicu i moguuje nam izradu dinaminih web stranica. JavaScript podsea na Javu i podrava mnoge Javine izraze, sintaksu i konstrukciju kontrole toka. Ima mali broj tipova podataka (numerike, boolean i string) i podrava funkcije ali bez posebnih zahteva za deklarisanjem.

Poetak JavaScript koda unutar HTML stranice zapoinje tagom:

a kraj JavaScript koda, iza koga moe slediti dalji html kod, oznaava se tagom

4.1 Nazivi promenjivih

Prvi znak u imenu promenjive (varijable) mora biti slovo engleske abecede ili znak potcrtavanja ("_"). Imena promenjivih mogu se sastojati od brojeva i slova engleske abecede. JavaScript u imenima promenjivih pravi razliku izmeu velikih i malih slova, no uobiajeno je da se imena promenjivih piu malim slovima! Kljne rei (for, if, else, class, byte, int...) ne mogu se koristiti u imenu promenjive.

4.2 Tipovi podataka

Podaci u JavaScriptu mogu biti:

numeriki (na primer: 42, 3.14159 ...) logiki (Boolean) - (true / false) stringovi (npr: "Dobar dan!") null (specijalne kljune rijei s null vrijednou)

79

4.3 Deklaracija promenjivih i konverzija tipa podataka

JavaScript je slobodan tip jezika i ne zahteva posebno deklasiranje tipa podataka, pa e se konverzija obaviti automatski. U principu, promenjive deklariemo na sledei nain:

var brojl = 42 var tekst = "Dobar dan!"

, ali mogu se deklarisati i ovako:

brojl = 42 tekst = "Dobar dan!"

U kombinaciji broja i stringa, JavaScript konvertuje broj u string. Na primer:

x = "Upisali ste broj " + 42 y = 42 + " je va odgovor."

Za konverziju stringa u broj, koriste se sledee funkcije:

EVAL - procenjuje string i ako je mogue pretvara ga u broj;

parselN T - konvertuje string u integer specificirane baze, ako je mogue;

parseFLOAT - konvertuje string u floating-point broj, ako je mogue.

4.4 Aritmetiki operatori

Aritmetiki operatori koriste se za izvrenje aritmetikih operacija u okviru JavaScript koda: -sabiranja, oduzimanja, mnoenja, delenja, izraunavanja ostatka celobrojnog delenja i prefiksnog i postfiksnog inkrementiranja i dekremenitranja.

Aritmetiki operatori koje raspoznaje JavaScript su dati u tabeli 4.1:

80

OPERACIJA OBJASNJENJE

X+Y sabiranje

X-Y oduzimanje

X*Y mnoenje

X/Y delenje

X%Y ostatak delenja (moduo)

X++ postfiksno uveanje za 1

++x prefiksno uveanje za 1

X - postfiksno umanjenje za 1

- X prefiksno umanjenje za 1

Tabela 4.1 Aritmetiki operatori u JavaScript-u

Razlika izmeu prefiksnog u postfiksnoginkrementiranj a/dekrementiranj a :

Ako je u nekom trenutku vrednost promenjive x=3, tada e rezultat izvrenja operacije

y=++X

, biti y=4, i x=4. Meutim, ako bi se umesto y=++x, izvrila operacija

y=x++

, tada bi bilo y=3, i x=4

81

4.5 Relacioni operatori

Relacioni operatori obezbeuju poreenje vrednosti numerikih promenjivih. Oni se najee koriste u sklopu struktura za kontrolu toka programa, kada je potrebno da se odreene naredbe izvre ako je dati uslov zadovoljen, a ne izvre (ili izvre neke druge naredbe), ako uslov nije zadovoljen. Za sada e biti samo pobrojani relacioni operatori koji se mogu koristiti u JavaScript-u, a njihova primena bie ilustrovana kasnije.

OPERACIJA OBJASNJENJE

X > Y X < Y X >= Y X

4.7. Operatori pridruivanja

Operatori pridruivanja, i njihovo objanjenje dati su u tabeli 4.4. Uloga ovih operatora je da nekoj promenjivoj dodeli novu vrednost, koja moe biti vrednost neke druge promenjive, ili odreene operacije nad prethodnim vrednostima promenjivih

OPERACIJA OBJASNJENJE

X = Y

X += Y

X -= Y

X *= Y

X /= Y

X %= Y

promenjivoj X pridruuje se vrednost promenjive Y

X = X + Y - promenjivoj X se dodeljuje vrednost zbira njene prethodne vrednosti i vrednosti promenjive Y

X = X - Y

X = X * Y

X = X / Y

X = X % Y (mod delienja)Tabela 4.4 Operatori pridruivanja

4.8 Uslovni izrazi

Uslovnim izrazom moemo prihvatiti jednu od dve vrednosti navedene u izrazu, zavisno od ispunjenosti uslova. Sintaksa uslovnog izraza je:

(uslov) ? izrazl : izraz2

Ako je uslov istinit (true), izraz ima vrednost izrazl, u suprotnom ima vrednost izraz2.

83

Primer:

status = (godina >= 18) ? "odrasli" : "deca"

Ako je vrednost promenjive godina vea ili jednaka 18, vrednost promenjive status e biti string odrasli, a u suprotnom, vrednost promenjive status e biti string deca .

4.9 Kontrola toka programa

4.9.1 IF-ELSE struktura

U najjednostavnijoj varijanti, sintaksa ove naredbe za kontrolu toka program a (koja obezbeuje grananje programa u zavisnosti od toga da li je posmatrani uslov ispunjen) je:

if (izrazl){...iskazi...

}

U slobodnom prevodu, ova kontrolna struktura bi glasila:

ako (je taan iz r a z l) ){...izvri ove iskaze

unutar vitiastih zagrada...}

Kada u toku izvrenja, skript stigne do i f programskog reda, proverava se vrednost izrazal , i ako je njegova vrednost true (taan), izvravaju se iskazi (naredbe) unutar tela if bloka, oiviene vitiastim zagradama, pa se prelazi na izvrenje prvog narednog iskaza (naredbe) iza if bloka, odnosno iza } . Pod iskazi se podrazum eva potreban broj, potrebnih naredbi JavaScript-a. Ukoliko je vrednost izraza false (netaan), iskazi unutar vitiastih zagrada se nee izvriti, ve e se odmah prei na izvrenje iskaza iza if bloka.

Proirena varijanta ove naredbe ima sledeu sintaksu:

84

if (izrazl){...iskaziT...

}else {

...iskaziF...}

Kada je izraz l taan, kao i u prethodnoj varijanti, izvravaju se iskaziT, a zatim se preskae else blok (ne izvravaju se iskaziF), i zatim se izvrava prva sledea naredba koja sledi nakon ove strukture za kontrolu toka programa. Ako je iz raz l netaan, preskae se if blok (ne izvravaju se iskaziT), ali se izvravaju naredbe u else bloku (iskaziF), i zatim prva sledea naredba koja sledi nakon ove strukture za kontrolu toka programa.

Kompletna sintaksa if-else strukture je:

if (izrazl){...iskazil...

}else if (izraz2) {

...iskazi2...}else {

...iskaziO...}

U odnosu na prethodnu varijantu, dodat je izmeu if i else bloka jo potreban broj else i f blokova (u sintaksi je prikazan samo jedan). Sada, ako je ispunjen izrazl, izvravaju se iskazil i zatim se preskau svi istali izrazi, pa se izvrenje programa prenosi na prvu naredbu iza ove kontrolne strukture. Ako izrazl nije taan, proverava se izraz2, pa ako je taan izvravaju se iskazi2 i potom prva naredba iza else bloka (iza celokupne kontrolne strukture). Ako i izraz2 nije taan, proverava se izraz sledeeg else if bloka, i tako redom. Ako ni jedan od izraza nije taan, izvravaju se iskazi unutar else bloka (ako on postoji, to nije obavezno), i naredba koja sledi nakon celokupne kontrolne strukture.

85

Prim erl:

if (godine 5 && sati < 13){ /* logika provera */document.write('Dobro jutro!')

/* boja pozadine Web stranice se postavlja u plavo i ispisuje poruka Dobro ju tro */

}if (sati > 12 & & sati < 19){ /* ako je sati vie od 12 i manje od 19 */

document.write('Dobar dan!')/* boja pozadine Web stranice se postavlja u zeleno i ispisuje poruka Dobar dan */

}if (sati > 18 || sati < 6){ /* ako je sati vie od 18 ili manje od 6 */

document.write('Dobro vee!')/* boja pozadine Web stranice se postavlja u sivo i ispisuje poruka Dobro vee */

}

Kompletan JavaScript kod koji e omoguiti da kada korisnik uita nau Web stranicu, automatski bude provereno doba dana, i u zavisnosti od toga postavi boju pozadine i ispie odgovarajuu poruku na stranici, je:

/* oznaka poetka JavaScripta */

if (sati > 5 & & sati < 13){ /* logika provera */ document.write('Dobro jutro!')

86

/* boja pozadine Web stranice se postavlja u plavo i ispisuje poruka Dobro ju tro */

}if (sati > 12 && sati < 19){ /* ako je sati vie od 12 i manje od 19 */

document.write('Dobar dan!')/* boja pozadine Web stranice se postavlja u zeleno i ispisuje poruka Dobar dan */

}if (sati > 18 || sati < 6){ /* ako je sati vie od 18 ili manje od 6 */

document.write('Dobro vee!')/* boja pozadine Web stranice se postavlja u sivo i ispisuje poruka Dobro vee */

} > /* oznaka kraja JavaScripta */

4.9.2 FOR petlja

Koristi se kada je potrebno obezbediti ponavljanje dela programskog koda (jedne ili vie naredbi), tano odreeni broj puta. Broj ponavljanja izvrenja naredbi navedenih u telu for petlje definie se takozvanom brojakom promenjivom unutar ove kontrolne strukture.

Sintaksa ove naredbe je:

for(var bprom=start_vr;bprom_uslov;promena_bprom){

iskazi;}

U slobodnom prevodu, ova kontrolna struktura bi bila:

za(promenu brojake promenjive od startne vrednosti;dok vai uslov da brojaka promenjiva nije dostigla krajnju vrednost;sa korakom promene brojake promenjive)

{radi iskaze;

}

Primer:87

for (var i = 1; i

U datom primeru, poetna vrednost bojake promenjive ije je ime i, je 1, i u svakom prolazu kroz petlju (svaki put kada se izvri naredba docum ent.write('Vrednost i=' + i);), poveae se vrednost i za 1 i istovremeno e se proveriti da li je i

Primeri definisanja for kontrolnih struktura:

for(var i=100; i>=l; i--)

Poetna vrednost brojake promenjive je 100, i u svakom izvrenju iskaza petlje ona e se umanjivati za 1, sve dok ne bude manja od 1, kada se izvrenje for petlje prekida i prelazi se na izvrenje prve sledee naredbe iza for strukture.

for(var i=7; i=2; j-=2)

Poetna vrednost brojake promenjive je 20, i u svakom izvrenju iskaza petlje ona e se umanjivati za 2, sve dok ne bude manja od 2, kada se izvrenje for petlje prekida i prelazi se na izvrenje prve sledee naredbe iza for strukture.

for(var j=x; j

Mogue je, u okviru koda, definisati petlju u petlji: -petlju moete staviti unutar neke druge petlje, pri emu se unutranja petlja izvrava u potpunosti svaki put kada tok programa proe kroz spoljanju petlju.

Time se, naprimer, moe proitati, kreirati ili urediti neka dvodimenzionalna tabela.

4.9.3. WHILE i DO-WHILE petlja

For petlje ponavljaju niz instrukcija tano odreeni broj puta. Veu fleksibilnost omoguuju while petlje, i to na dva naina:

uslov za izlaz iz petlje moe ispitivati ma koju promenjivu, a ne samo broja

uslov za izlaz moe biti na poetku ili na kraju petlje, tako da se, u odreenoj situaciji, u zavisnosti od uslova, petlja uopte ne mora izvriti

Sintaksa while kontrolne strukture je:

w hile (izraz){...iskazi...;

}

U slobodnom prevodu, ovo znai:

dok (je taan izraz){...izvri iskaz(e)...;

}

Primer:

var i= l; while(i

Rezultat izvrenja ove while petlje je identian izvrenju primera for petlje prikazanom na slici 4.1.

Kod DO-W HILE strukture, uslov se proverava pri izlasku iz petlje, a ne pri ulasku u petlju kao kod W HILE strukture. Ovo znai da se ovakva petlja mora izvriti barem jedanput, ak i kada uslov nije zadovoljen.

Sintaksa ove strukture je:

do {...iskazi...;

} while (izraz);

U slobodnom prevodu :

radi {...iskaze...;

} dok (je taan izraz);

Primer:

do{

var broj=M ath.round(10*M ath.random());/* sluajni broj izmeu 0 i 10 */

document.write('dobijeni broj je=' + broj);} while (broj != 7);

U ovom primeru koritene su i dve funkcije JavaScript-a, i to funkcija M ath.random() koja kada se pozove (izvri), kao rezultat vraa generisani sluajni broj u opsegu izmeu nula i jedan, i funkcija M ath.round() koja izraz unutar svojih zagrada zaokruuje na celobrojnu vrednost i to vraa kao rezultat izvrenja.

U prvom nailasku na ovu do-while petlju, promenjiva broj nije ak bila ni deklarisana, a sasvim sigurno njena vrednost nije bila 7. No naredbe u telu petlje su izvrene, je r se uslov proverava tek na kraju petlje. U toku izvrenja tela petlje, deklarisana je promenjiva broj, i kao rezultat izvrenja pomenute dve funkcije JavaScript-a dodeljena joj je vrednost- sluajano generisan ceo broj iz opsega 0-10. Tako dodeljena vrednost promenjive se ispisuje u prozoru Web itaa, a zatim se proverava da li je

91

generisani broj 7. Ako nije, opisani postupak se nastavlja, a ako jeste, izvrenje do-while petlje se zaustavlja. Rezultat izvrenja JavaScript koda koji se sastoji samo od do-while strukture iz prethodnog primera, dat je na slici 4.2:

Slika 4.2 Primer izvrenja D0-W H1LE petlje

4.9.4 SWITCH kontrolna struktura

Ovo je struktura koja zamenjuje itav niz if instrukcija koje ispituju istu promenjivu na razliite vrednosti. Tipina primena moe biti kod menija, gde switch struktura usmerava tok programa na rutinu koja obrauje izabranu opciju menija

Sintaksa ove naredbe za grananje toka programa je sledea:

92

switch (promenjiva){ case vrednostl:

iskazil; break;

case vrednost2: iskazi2; break;

default:iskazid;

}

U slobodnom prevodu :

preklopnik (promenjiva){sluaj promenjiva ima vrednostl:

iskazil;preskoi na naredbu iza };

sluaj promenjiva ima vrednost2: iskazi2;preskoi na naredbu iza };

promenjiva nema ni jednu od pobrojanih vrednosti: iskazid;

}

Vrednosti (vrednostl, vrednost2, ...) za koje se proverava da li su konkretna vrednost switch promenjive, moraju biti doslovne vrednosti a ne druge promenjive.

Switch vri jednostavno poreenje svake od navedenih vrednosti sa vrednou switch promenjive -ovde se ne mogu koristiti relacioni operatori

Linija default je opciona (kao else u if naredbi).

Primer:

93

switch (izbor){ case 1:

docum ent.write(Startujem...); break;

case 2 :docum ent.write(Otvaram ...); break;

case 3 :docum ent.write(Snim am...);

case 4 :docum ent.write(Izlazim...) ;

case 5 :docum ent.write(Kraj...);

default:docum ent.write(Nedozvoljena opcija...);

}

U zavisnosti od toga da li je vrednost promenjive izbor jednaka 1, 2, 3, 4, ili 5, na ekranu e biti ispisan tekst Startujem... , Otvaram... , Snimam... , Izlazim... , ili Kraj..., respektivno. Ako je vrednost promenjive izbor bilo koja druga osim 1, 2, 3, 4, ili 5, na ekranu se ispisuje tekst Nedozvoljena opcija... . Oigledno, ovo je gruba ideja za realizovanje menija u okviru JavaScript koda.

4.9.5 WITH iskaz

Sintaksa:

with (objekt) {...iskazi...

}

Naprimer, matematikim funkcijama mora prethoditi objekt Math. Sledei kod obezbeduje da je dodeljeno M ath ispred PI, COS() i SINQ:

94

a = PI / 2; x = cos(a); y = sin(a);

with (Math) {

4.9.6. BREAK i CONTINUE iskazi

BREAK prekida trenutno tekuu while, do-whi!e, switch ili for strukturu, prouzrokujui izlazak iz nje i nastavak sa prvom sledeom naredbom iza strukture u kojoj se nalazi break. CONTINUE prekida izvrenje preostalih iskaza u bloku u while, do-while ili for petlji , ali ne prekida kompletnu petlju, ve nastavlja sa sledeom iteracijom. U while i do-while petlji, izvrava skok nazad na "uslov" u petlji. U for petlji, uzima sledeu vrednost brojake promenjive, i proverava uslov izvrenje for petlje.

Napomena: Neproprisno koritenje iskaza continue u while petlji, moe pruzrokovati njeno beskonano izvrenje (neprekidno zadovoljen uslov petlje).

Prim erl:

for (var i = 1; i

Slika 4.3 Primer koritenja iskaza break

Primer2:

Done j My Computer

Slika 4.4 Primer koritenja iskaza continue

Uoite na slici 4.4 da u listi nema vrednost i=5, odnosno da je posle i=4, ispisano i=6, i dalje do kraja vaenja uslova izvrenja petlje. Ova dva primera jasno ilustruju nain koritenja iskaza break i continue i razliku izmeu njih

4.10 Iskazi FUNCTION i RETURN

Iskaz function se koristi za definisanje sopstvenih funkcija. Kada jedanput definiete neku funkciju, tada je neogranieni broj puta moete pozivati u kodu, kad god je to potrebno, bez da uvek iznova morate pisati ceo blok koda kojim se izvrava navedena funkcija.

Iskaz return definie koju vrednost funkcija kao rezultat vraa u kod iz koga je pozvana.

97

Primer:

return x * x}

x = kvadratBroja(5) /* poziv funkcije */ docum ent.write("Kvadrat od 5 je " + x)

>

Rezultat izvrenja ovog koda je dat na slici 4.5

Slika 4.5 Primer koritenja iskaza function i return

U prethodnom primeru, primenom iskaza function definisana je sopstvena funkcija ije ime je kvadratBroja, i koja ima jedan ulazni parametar, naveden u zagradama iza imena funkcije. Iskaz return definie da funkcija kvadratBroja kao rezultat vraa vrednost kvadrata preuzetog parametra (x*x). U pozivu funkcije, kao parametar prosleen je konkretan broj, 5, i on je dodeljen kao vrednost parametarskj promenjivoj x. Funkcija vraa rezultat x*x, odnosno u ovom konkretnom pozivu 5*5, odnosno 25. Ova vrednost je dodeljena promenjivoj x iskazom x = kvadratBroja(5).

98

Potrebno je uoiti da promenjiva x unutar funkcije kvadratBroja i promenjiva x izvan ove funkcije, imaju isto ime, ali to su dve razliite promenjive, sa razliitim vrednostima, i razliitim domenima vaenja. Promenjive definisane u nekoj funkciji, imaju oblast vaenja samo u telu te funkcije (osim ako eksplicitno nije drugaije definisano), dok promenjiva sa sistim imenom definisana u kodu izvan funkcije, vai u celom kodu, ali ne i u telu funkcije.

4.11 Iskazi NEW i THIS

NEW iskaz: definie novi objekt na bazi postojeeg.

Primer:

var datum = new Date();

Ovim primerom promenjivoj datum koja je objekat klase datum, pridruuje se tekui datum. O objektima i klasama e biti vie rei u nastavku.

THIS iskaz: predstavlja referencu na tekui objekt.

Primer:

ONCLICK="sIucajniBroj(this.form)"

Ovaj primer definie da se klikom na objekat poziva funkcija slucajniBroj() a kao parametar prenosi se naziv tekue (trenutno aktivne) forme (this.form).

99

4.12 Objekti, metode, svojstva i dogaaji

Objektno orijentisano projektovanje (object-oriented design) je metod za projektovanje softvera koji modelira karakteristike abstraktnih ili realnih objekata koristei klase i objekte. Sve to softverski objekt zna (stanja) i moe da uradi (ponaanje) je iskazano preko promenjivih (varijabli) i funkcija (metoda) unutar objekta. Jedan objekat sam, generalno nije mnogo koristan. Umesto toga, objekti se obino pojavljuju kao komponente veih programa ili aplikacija koje sadre mnoge druge objekte. Kroz interakciju ovih objekata, programeri dostiu funkcionalnost vieg reda i mnogo kompleksnije ponaanje. Interakcija izmeu dva objekta obezbeuje se porukama (message) koje jedan objekat alje drugom. To su ustvari pozivi funkcija tog, drugog objekta, koje definiu njegovo ponaanje. Ponekad, objekat koji prima poruku treba vie informacija kako bi tano znao ta da radi; na primer, kada menjate brzine na vaem biciklu, tada jedan objekat (vi) aljete poruku drugom objektu (biciklu) da ruicu menjaa prebaci u drugu brzinu. Vi treba da indicirate koju brzinu elite (viu ili niu od prethodne...). Ta informacija se prosleuje sa porukom kao parametar.

Klasa je ablon (blueprint), ili prototip, koji definie promenjive i metode zajednike svim objektima od iste vrste. Tako bi prim er klase mogao biti bicikl, a u tom sluaju primeri objekata (instance) date klase su moj bicikl, Jovin bicikl, M ilicin bicikl...Promenjive koje definiu klasu bicikl mogle bi biti, na primer brzina, broj_okreta_pedala_u_minuti, poloaj_ruice_menjaa, a funkcije date klase bi mogle biti, na primer prom enajbrzine, zatim promena_broja_okreta_pedala_u_minuti, i promena_poloaja_ruice_menjaa. Kada je u pitanju klasa, nisu definisane konkretene vrednosti promenjivih, ali kod svakog reprezenta (instance) klase -odnosno kod svakog objekta, jesu: -tako na primer, moj bicikl ide brzinom od 15km/h, broj okreta pedala u minuti je 18, i menja je trenutno u 3. brzini.

Za svaku klasu, mogue je napraviti i izvedene klase (subclass). Tako, na primer, klasa bicikl, moe imati izvedene klase (podklase) planinskijbicikl, trk ak ib ic ik l, tandem b icik l,... Svaka podklasa nasleuje (inherits) stanja (u formi deklaracije promenjivih) od svoje superklase. Nasleivanje (inheritance) je dakle, koncept po kom klase automatski sadre varijable i metode definisane u njihovoj superklasi (supertypes).

100

U JavaScript-u, svaka web stranica ima sledee objekte:

window: top-level objekt; sadri svojstva primenjiva na ceo prozor, location: sadri svojstva tekue URL, history: sadri svojstva prethodno poseenih URL, document: sadri svojstva sadraja tekueg dokumenta, kao to su

naziv (title), boja podloge (bgcolor) i forme.

Svojstva su dakle promenjive koje definiu dati objekat u JavaScript-u. Svojstvo se uvek vezuje za objekat. Kada elimo da defmiemo konkretnu vrednost svojstva (promenjive), uvek moramo navesti i ime objekta kojem svojstvo pripada. Imenu svojstva prethodi ime objekta kojem svojstvo pripada. M eusobno su ova dva imena razdvojena (ili povezana) takom.

Evo primera nekih svojstava:

location.href = "http://www.vtsns.edu.yu/upis.php"//lokacija dokumenta

document.title = "Probni dokument" //naziv dokumenta (title) docum ent.fgColor = #000000 //boja slova docum ent.bgColor = #FFFFFF //boja podloge history.length = 7 //koliko zadnjih dokumenta da "pamti" u history

Web ita mo-e kreirati obekte bazirane na sadraju stranice, npr.:

document.mojaforma //formadocum ent.m ojaform a.Checkl //check polje na formi docum ent.m ojaform a.Buttonl //dugme na formi

Oni mogu imati svojstva kao to su:

101

M nogi objekti imaju funkcije (metode) koje simuliraju dogaaje. Na primer, bu tton objekt ima click metodu koja simulira klik mia na tom dugmetu.

Dogaaji koji su praeni odgovarajuim metodama, dati su tabeli 4.5

Dogaaj(Event)

Nastaje kada korisnik... Rukovaoc dogaaja

(Event Handler)

blur izae iz fokusa elementa forme onBlur

click klikne na element forme ili link onClick

change podesi/promeni vrednost "text", "textarea" ili izabranog elementa

onChange

focus ue u fokus nekog elementa forme onFocus

load uita stranicu u browser onLoad

mouseover pomera pokaziva mia preko linka ili "anchora

onM ouseOver

select izabere "input" polje elementa forme onSelect

submit izvri "submit" (slanje) forme onSubmit

unload "napusti" stranicu onUnload

Tabela 4.5 Dogaaji vezani za objekte u JavaScript-u

U nastavku e kroz konretne primere, grupisane prema nameni, biti detaljnije objanjeni pojmovi objekata, svojstava, metoda i dogaaja.

102

4.13 Naini ispisa u JavaScript-u

4.13.1 Ispis u dokument

Primer ispisa u dokument dat je sledeim listingom koda:

< H E A D x/H E A D >

Primer ispisa u dokument:

kraj primera..

Rezltat izvrenja ovog koda dat je na slici 4.6

Slika 4.6 Primer ispisa u dokument

103

Dakle, naredbom document.write(...) unutar JavaScripta moemo u dokument ispisati ne samo svoj tekst ve i bilo koji drugi HTML kod.

U navedenom primeru funkcija document.IastModified vraa datum i vreme zadnje izmene dokumenta dok se tekst i naredbe HTML-a stavljaju unutar navodnika. Funkcije JavaScripta i HTML iskazi meusobno se povezuju znakom plus (+).

4.13.2 Ispis u polje forme

Primer ispisa u polje forme dat je sledeim listingom koda:

Ispis u polje forme

function izracunaj(nazivForme) { if (confirm("Zelite da izraunam taj izraz?"))

nazivForme.rezultatPolje.value = eval(nazivForme.upisnoPolje.value)

elsealert("Hvala, pokuajte sledei put!")

}

Upii matematiki izraz:

Nakon starta stranice koje sadri navedeni JavaScript kod, pojavljuje se ekran kao na slici 4.7.

Kada korisnik u polje predvieno za to upie bilo koji matematiki izraz, i klikne na dugme Izracunaj , pojavljuje se confirm prozor sa pitanjem korisniku da li eli da kompjuter izrauna upisani izraz Slika 4.8a.

Ako korisnik klikne na dugme Cancel , pojavljuje se alert prozor sa porukom Hvala, pokuajte sledei put (slika 4.8b), a ako klikne na OK, u za to predvienom polju pojavljuje se izraunati rezultat unetog izraza, kao na slici 4.9.

Slika 4.8a Ilustracija funkcije Prompt Slika 4.8b Ilustracija funkcije Alert

105

Slika 4.9 Izraunata vrednost matematikog izraza unetog od strane korisnika u formu polja

Unutar zaglavlja (head) ovog html koda, nalazi se definicija funkcije izracunaj.

function izracunaj(nazivForme) {if (confirm("Zelite da izraunam taj izraz?"))

nazivForme.rezultatPolje.value = eval(nazivForme.upisnoPolje.value)

elsealert("Hvala, pokuajte sledei put!")

}

Kao parametar, ovoj funkciji se prosleuje naziv forme. U telu funkcije (unutar vitiastih zagrada) definisano je ono to e se izvriti kada ova funkcija bude pozvana negde unutar tela (body) html fajla. U ovom sluaju, izvrie se JavaScript ugraena (built-in) funkcija confirm. Ona rezultuje pojavom prozora kao na slici 4.8a, i kao rezultat tamo odakle je pozvana vraa vrednost tano ako je korisnik kliknuo na dugme OK, odnosno netano ako je kliknuo na Cancel . Uslov u IF bloku je upravo rezultat izvrenja ove funkcije, dakle if uslov e biti zadovoljen, ako je korisnik kliknuo na dugme OK u prozoru sa slike 4.8a. U tom sluaju, svojstvo value objekta rezultatPolje koji pripada objektu nazivForme (prosleeni parametar funkcije) e dobiti vrednost eval funkcije sa

106

argumentom (parametrom)- svojstvom value objekta upisnoPolje koji takoe pripada objektu nazivForme. Svojstvo value definie vrednost upisanu u input objekat tipa text sa navedenim imenom. Dakle value objekta upisnoPolje u primeru na slici 4.9 je 5*(7-2)+75. Funkcija eval e izraunati vrednost izraza koji joj je posleen kao parametar, ako je to mogue (ako je izraz numeriki), dakle vrednost koju kao rezultat vraa funkcija eval u naem primeru je 100 (5*(7-2)+75=100). Ovaj broj se dodeljuje kao vrednos svojstvu eval objekta rezultatPolje, odnosno kao na slici 4.9 ispisuje se u input objekat tipa text kao rezultat izvrenja traenog izraza. Nakon ovog, izvrava se prvi sledei iskaz iza poziva funkcije izraunaj.

Ako je korisnik, u trenutku poziva funkcije izracunaj u prozoru sa slike 4.8a kliknuo na Cancel, tada if uslov nije zadovoljen, i nee se izvriti iskaz koji sledi iza if (opisana dodela vrednosti za nazivForme.rezuItatPolje.value), ve e se izvriti iskaz iza else, a to je funkcija alert. Rezultat izvrenja funkcije alert je prozor kao na slici 4.8b, i korisniku tada ostaje da klikom na dugme OK zavri izvrenje skripta, bez izraunavanja unetog izraza.

U nastavku navedenog listinga koda, sve je obian html, osimreda:

Ovde je za objekat tipa dugme, vezan rukovaoc dogaajem ONCLICK, koji motri na aktivnost korisnika i aktivirae se kada korisnik klikne na dato dugme.

On e na datu aktivnost (klik na dugme), izvriti automatski poziv fukcije izracunaj, a kao parametar (argument funkcije) e proslediti this.form, to ukazuje na trenutno aktivno formu, koja e biti dodeljena kao vrednost promenjivoj-objektu nazivForme unutar funkcije.

Svakim klikom na dugme sa natpisom Izracunaj, automatski se, dakle izvrava funkcija izracunaj, kako je to napred opisano.

107

4.13.3 ISPIS U STATUSNU LINlJU

Primer ispisa u statusnu liniju, dat je sledeim kodom:

Ispis u statusnu liniju

Pogledajmo najpre, ta se deava kada se pokrene ova stranica, a zatim emo analizirati linije koda. Nakon pokretanja ovog koda, dobijamo stranicu kao na slici 4.10:

ig ] Done My Com puter

Slika 4.10 Primer aplikacije za ispis u statusnu liniju

Nakon klika na dugme sa natpisom Klikni za ispis!, pojavljuje se ekran kao na slici 4.11:

Slika 4.11 Ispis u statusnu liniju i u polje forme

109

Statusna linija predstavlja traku u dnu web itaa u kojoj vidimo informacije o URL nekog linka i slino. Obzirom da je statusna linija objekt web itaa, i sa njom moemo upravljati, odnosno u nju upisivati podatke. Na slici 4.11 se vidi da je u statusnu liniju upisan tekst Dobar dan!, kao i u input polje forme. Nakon 5 sekundi od momenta ispisa teksta u statusnu

Slika 4.12 Softverski obrisan tekst iz statusne linije i input polja forme, i alert poruka na ekranu

Slika 4.13 Tekst poruke u prozoru a le rt

110

Tekst alert poruke u ovoj aplikaciji je vidljiv i na slici 4.13.

Analizirajmo sada pojedine linije koda:

U zaglavlju html-a su definisane dve nove funkcije, funkcija ispisi i funkcija obrisi:

function ispisi(tekst, forma) {window.status = tekst; /* ispis u statusnu traku */ forma.ispisnoPolje.value = tekst; /* ispis u polje forme */ setTimeout("obrisi()",5000); /* poziva funkciju "obrisi" nakon 5 sec*/

}function obrisi() {

window.status=""; /*brie ispis u statusnoj traci */ mojaForma.ispisnoPolje.value = /*brie ispis u polju forme */ alert("Prolo je 5 sekundi i tekst je obrisan \n iz statusne trake i polja

forme!");/*parametar \n odreuje prelaz u novi red! */

}

Funkcija ispisi pri svom pozivu kao parametre zahteva odreeni string koji se prosleuje kao vrednost parametarskoj promenjivoj tekst i naziv forme kao drugi parametar. Iskazom window.status = tekst; se string (tekst) prosleen kao parametar funkciji ispisuje u statusnu liniju web itaa. Iskaz forma.ispisnoPolje.value = tekst; je objanjen u prethodnom primeru. Iskaz setTimeout("obrisi()",5000); poziva JavaScript predefinisanu funkciju setTimeout, koja takode ima dva parametra. Prvi je naziv funkcije (u naem primeru obrisi) koja e se automatski izvriti nakon onoliko milisekundi koliko je definisano drugim parametrom funkcije (u naem primeru 5000 milisekundi, odnosno 5 sekundi). Funkcija obrisi koja se poziva kao parametar funkcije setTimeout unutar funkcije ispisi, definisana je iza definicije funkcije ispisi. Kako funkcija obrisi radi vidljivo je i sasvim jasno iz komentara unutar definicije funkcije. window.status=""; ustvari defmie da e vrednost statune linije biti zamenjena praznim stringom, to je isto kao da je prethodni tekst obrisan.

Funkcija ispisi e se automatski izvriti kada korisnik klikne na dugme na kome pie Klikni za ispis, to omoguuje iskaz u telu html koda:

111

Vidi se kako se string Dobar dan! prosleuje kao parametar funkcije, kao i trenutno aktivna forma (this.form). Nakon ispisa Dobar dan! u statusnu liniju i input polje tipa text, automatski se startuje funkcija setTimeout koja kroz 5 sekundi poziva funkciju obrisi. Funkcija obrisi nema parametara, i ona brie string Dobar dan! u statusnoj liniji i input polju forme tipa text, a zatim poziva funkciju alert, koja daje prozor sa porukom kao na slici 4.13.

4.13.4 Alert, Confirm i Prompt

Kako su ALERT i CONFIRM ve prikazani u prethodnim primerima, verovatno ste zakljuili kako nam oni slue za dijalog s korisnikom, u smislu da korisnik u posebnom dijalog prozoru (izvan web stranice) dobije potrebno obavetenje.

Ako od korisnika (izvan polja forme na web stranici) elimo prihvatiti neki podatak, tada moemo koristiti PROM PT. U sledeem primeru zastupljena su sva tri navedena objekta, pa ih moete isprobati:

Alert, Prompt i Confirm

Primer poziva razliitih vrsta dijaloga:

Slika 4.14 Primer za koritenje funkcija Prompt, A lert i Confirm

Klikom na dugme na kome pie Dijalog PROM PT!, dobija se novi prozor, kao na slici 4.15:

Slika 4.15 Dijalog prozor funkcije PROMPT

Naravno, u input objekat tipa text u ovom prozoru, korisnik moe putem tastature ukucati svoje ime (u primeru na slici 4.15 to je Zoran), koje e biti prosleeno u kod kao vrednost koju vraa funkcija prompt.

113

4.14 Kontrola prozora

4.14.1 Otvaranje prozora i objekti unutar njega

Kontrolu otvaranja prozora moemo ostvariti pozivom open funkcije objekta window, na primer:

window.open("proba.htm", "naziv", "menubar=no, toolbar=no, location=no, directories=no, status=no, scrollbars=yes, resizable=yes, copyhistory=no, width=400, height=100");

Objanjenje:

Unutar funkcije window.open(...) imamo tri parametra (para navodnika), unutar kojih se prosleuju sledei podaci:

unutar prvog para navodnika upisujemo link na .html stranicu koju elimo otvoriti (ili ostavimo prazno za blank);

unutar drugog para navodnika upisujemo opcioni naziv stranice (nije obavezno);

unutar treeg para navodnika upisujemo objekte browsera koje elimo ukljuiti (=yes) ili iskljuiti (=no), te definiemo veliinu novog prozora. Spisak objekata je dat sledeom tabelom:

Objekat Objanjenje

menubartoolbarlocationdirectoriesstatusscrollbarsresizablecopyhistorywidthheight

- meni u browseru (File, Edit...) funkcijske ikonice u browseru prozori za upis lokacije meni za direktorije

statusna traka (dole) klizai unutar prozora mogunost promene veliine praenje kretanja (history) irina prozora (u pixelima)

visina prozora (u pixelima)

Tabela 4.6 Objekti koji se definiu unutar treeg parametra funkcije open objekta window

114

Funkcije koje se takoe koriste (kao i funkcija window.open) zakontrolu prozora, date su u tabe i 4.7:FUNKCIJA Objanjenje

window.location - lokacija dokumenta

window.resizeT o(x,y) - poveaj prozor DO x,y

window.moveT o(x,y) - premesti prozor NA x,y

window.resizeBy(x,y) - poveaj prozor ZA x,y pix.

setTimeout("funkcija()",50) - poziv funkcije nakon 50 ms

screen.height - visina prozora

screen.width -irina prozora

screen.availHeight - preostala mogua visina

screen.availW idth - preostala mogua irina

href="javascript:funkcija()" - poziv funkcije kao linka

Tabela 4.7 JavaScript funkcije za kontrolu prozora

Kod koji demonstrira koritenje funkcije open za otvaranje prozora u web itau, je sledei:

Otvaranje prozora

window.open("", "toolbar=no, location=no, directories=no, status=no, scrollbars=no, resizable=yes, copyhistory=no, width=400, height=100");

return false;}~>

115

Primer otvaranja jednostavnog prozora...O voje linkkoji o tvara

U zaglavlju html-a je definisana funkcija otvoriProzor koja nema nikakvih parametara (argumenata). Funkcija window.open sa argumentima definisanim kao u funckiji otvoriProzor, otvara novi prozor kao na slici 4.17, kada u telu html-a bude pozvana funkcija otvoriProzor. Iskaz

return false;

da funkcija kao rezultat vraa logiku vrednost netano (false). Zbog ega je ovo potrebno? Pozivamo itaoca da isproba prethodno navedeni kod bez iskaza return false;, pa na osnovu toga sam zakljui zato je potreban ovaj iskaz.

Linija koda

Ovo je link koji otvara jednostavan prozor.

,pokazuje kako se klikom na link moe pozvati JavaScript funkcija.

4.14.2 Otvaranje prozora i ispis u njega

Sledei listing koda demonstrira otvaranje prozora i softverski upis teksta u novootvoreni prozor:

Otvaranje prozora i upis u njega

noviProzor = window.open("", "toolbar=no, location=no,directories=no, status=no, width=400, height=100");

text = "Prvi red teksta u novom prozoru.Drugi red teksta.Trei red..."

noviProzor.document.write(text); retum false;

}1 1 7

>

Ovo je primer otvaranja

U samom kodu