Glava 8
XML, HTML, XHTML i DHTML
U ovom poglavlju biće reči o pomenutim jezicima, gde će se obratiti pažnja na svaki od
njih. Reč je glavnim tehnologijama koje se koriste u razvoju jednostavnih, složenih, kao i
dinamičkih Web sajtova.
8.1.
XML
Još dalekih 60-tih godina, ljudi su se bavili idejom o strukturiranju dokumenata u standardizovani oblik da bi se olakšala razmena i rukovanje podacima. Tada je IBM kreirao
GML (Generalized Markup Language) za vlastite potrebe. Koristili su GML za izveštaje,
knjige, i druge dokumente iz izvornih datoteka. I druge organizacije i kompanije stvarale su vlastita rešenja strukturiranja informacija, ali ništa nije bilo napravljeno za opštu
upotrebu.
Prva značajna standardizovana tehnologija strukturiranja informacija bio je SGML (Standard Generalized Markup Language), takođe iz IBM-a. SGML je dao način formatiranja
i održavanja pravovaljanih dokumenata unutar IBM-a, a kasnije je proširen i prilagođen
za upotrebu u raznim područjima industrije kao opšti standard informatizacije. Ipak, tek
1986. godine SGML je prihvaćen od ISO standarda. Iako velikih mogućnosti, SGML je
vrlo složen, dok obrada traži zahtevnu programsku podršku. U ranim danima Interneta,
zbog složenosti i zahtevnosti, SGML sigurno nije mogao predstaviti hipertekst.
Tim Berners-Lee i Andres Berglund, dva istraživača iz CERN-a, 1989. godine kreirali
su jezik oznaka (markup language) za obeležavanje tehničkih dokumenata koji su se prenosili putem Interneta. Ovaj jezik se razvio kao pojednostavljena primena SGML-a, nazvan
je HTML (HyperText Markup Language), i postao standardni oblik prikaza informacija
za Web.
Razvoj Web aplikacija u zadnjih deset godina dostigao je takav nivo da problemi koje
danas susrećemo nisu se tada mogli ni zamisliti. Sistemi koji su distribuirani hiljadama
kilometara moraju zadržati brzinu i besprekornu funkcionalnost bez obzira na udaljenost.
Svi se prenosi moraju obaviti tako da ni najmanji deo pojedinog podatka iz baze podataka,
heterogenog sistema, direktorijuma usluga i aplikacija ne bude izgubljen. Aplikacije moraju
188
Multimedija
biti u stanju da komuniciraju, ne samo unutar poslovnih komponenti već sa svim poslovnim
sistemima, često preko različitih proizvođača, pa čak i različitih tehnologija. Klijenti više
nisu strogo definisani, nego mogu biti i mrežni pretraživači koji podržavaju HTML, mobilni
telefoni koji podržavaju WAP (Wireless Application Protocol) ili personalni organizatori
sa potpuno drugačijim jezicima oznaka. Osnova razvoja svih današnjih aplikacija postali
su podaci i informacije izvedene iz tih podataka. [H.M. Deitel, P.J. Deitel, T.R. Nieto:
"Internet and World Wide Web - How to Program", Prentice Hall, Upper Saddle River,
New Jersey, 2000.]
HTML nije imao rešenje za sve ove probleme. Najočiglednije ograničenje HTML-a je njegov strogo definisan skup oznaka. Članovi World Wide Web Consortiuma (W3C) 1996.
godine uočili su tri značajne prednosti SGML-a u odnosu na HTML, i to su: proširivost,
strukturiranost i pravovaljanost.
Okupili su tim SGML stručnjaka koji su kreirali novi jezik oznaka s jezgrom SGML-a i
jednostavnošću HTML-a. Nastao je XML (eXtensible Markup Language) jezik. [T. Bray,
J. Paoli, C.M. Sperberg-McQueen, E. Maler: "Extensible Markup Language (XML) 1.0
(Second Edition) ", W3C Recommandation, 2000. http://www.w3.org/TR/REC-xml].
Kao i SGML, i XML se koristi za definisanje drugih jezika, pa se naziva meta - jezik. Međutim, XML je mnogo jednostavniji od SGML-a. XML je jezik oznaka koji ne ograničava
skup oznaka (markup tags) koje se mogu koristiti niti gramatiku tog jezika. Skup oznaka
(tag set) za jezik oznaka tačno definiše oznake - tagove koje ćemo koristiti i kako. Postoje dva osnovna koncepta kod XML dokumenta. Prvi koncept uslovljava da svaki XML
dokument mora bit dobro strukturiran (well-formed) da bi bio iskoristiv i ispravno razložen
(parsiran). Dobro strukturiran dokument je onaj čiji su svi otvoreni tagovi i zatvoreni i to
po istom redosledu, te korišćena sintaksa sledi specifikaciju. Definisanje specifikacije za
dokumente ne ograničava proširivost XML-a, već je potrebna da bi date principe mogle
iskoristiti aplikacije i parseri XML dokumenta a da bi se tako uređeni podaci mogli ispravno
upotrebiti.
Drugi koncept XML dokumenta je pravovaljanost (valjanost ili validnost) dokumenta.
Pravovaljan dokument je onaj koji se pridržava svoje definicije tipa dokumenta (DTD Document Type Definition). DTD tačno navodi oznake elemenata koje se mogu koristiti
u XML dokumentu i raspored tih elemenata. Ako XML dokument ima DTD specifikaciju
i ako se upravlja prema tim DTD pravilima, kaže se da je XML dokument valjan.
DTD definiše pravila za pojedinačni XML dokument ili skup dokumenata. Razvojni programer ili autor sadržaja dokumenta takođe kreira pripadajući DTD kao dodatni dokument
na koji se poziva u svojim XML datotekama ili je već uključen u sam XML dokument.
Tako, ne može se smatrati da DTD na bilo koji način ograničava XML. U stvari, DTD
je taj koji omogućava prenosivost XML podataka. Prema definiciji tipa dokumenta u aplikaciji se može odrediti da li je sadržaj XML dokumenta prihvatljiv i na taj način sprečiti
greške.
XML, HTML, XHTML i DHTML
8.1.1.
189
Šta je XML?
XML predstavlja podatke za opis podataka tj. sintaksu, u tekstualnom formatu. On je
kreiran sa namerom da bude jednostavan za učenje, jevtin, brz i optimizovan za Internet.
XML se naziva i eXcellent Marketing Language jer predstavlja:
• Univerzalni format podataka – XML omogućuje kreiranje sopstvenih formata
podataka i njihovu razmenu preko postojećih mreža i aplikacija.
• Integracija podataka – XML vrši jednostavnu integraciju podataka kod već postojećih aplikacija i platformi.
• Prilagodiv – On je prilagodiv tj. razumljiv i za čoveka i za mašinu, primaoca i pošiljaoca, te predstavlja najupotrebljiviji standard za manipulaciju podataka i njihovu
razmenu.
Svrha XML je da generiše sopstvene tagove, njihovo značenje i njihov prikaz. XML
neradi ništa, on samo nosi informacije okružene XML tagovima. Znači, XML definiše
strukturu dokumenata. On menja način na koji browser-i prikazuju, organizuju i pretražuju
informacije. XML se može shvatiti kao osiromašena verzija SGML-a i proširiv je za razliku
od HTML. XML uklanja granice HTML-ovog ograničenog skupa oznaka, dozvoljavajući
ljudima koji se bave rezvojem da definišu neograničen broj oznaka za opis bilo kakvih
podataka.
8.1.2.
Šta XML nije?
XML je jezik za označavanje i ništa više od toga. To treba zapamtiti. Priča o XML-u se
toliko naduvala da ima ljudi koji od XML-a očekuju da radi sve i svašta, ako treba i kola
da opere.
Pre svega, XML nije programski jezik. Ne postoji kompajler XML-a koji čita XML
datoteke i daje izvršni kôd. Eventualno biste mogli definisati skript jezik koji koristi format
XML-a kao matični, a interpretira ga neki binarni program, ali bi čak i ta primena bila
neobična. XML se može upotrebiti kao format naredaba u programima koji nešto rade, kao
što i tradicionalni programi mogu čitati tekstualne konfiguracijske datoteke i preduzimati
razne akcije na osnovu pročitanog. Zaista nema razloga da konfiguracijska datoteka ne
bude u formatu XML, umesto u formatu nestrukturiranog teksta. Neki noviji programi
upotreb?avaju XML konfiguracijske datoteke; ali je uvek program taj koji preduzima akciju,
a ne sam XML dokument. XML dokument ne radi ništa, on samo postoji.
Drugo, XML nije protokol za mrežni prenos. XML ne šalje podatke preko mreže,
kao ni HTML. Podaci poslati preko mreže HTTP-om, FTP-om, NFS-om ili nekim drugim
protokolom, mogu biti kodirani u XML-u; ali opet mora postojati neki softver izvan XML
dokumenta koji će poslati dokument.
Najzad, da pomenemo primer gde priče najčešće sakrivaju istinu, XML nije baza podataka.
XML-om ne možete zameniti Oracle ili MySQL server. Baza podataka može sadržati XML
podatke, bilo kao VARCHAR ili BLOB ili neki namenski XML tip podataka, ali sama
baza podataka nije XML dokument. XML podatke možete smestiti u bazu podataka na
190
Multimedija
serveru i preuzeti ih iz nje u formatu XML, ali vam za to treba softver napisan na pravom
programskom jeziku kao što su C ili Java. Da bi smestio XML podatke u bazu podataka,
softver na klijentskoj strani šalje ih serveru pomoću ustanovljenog mrežnog protokola kao
što je TCP/IP. Softver na serverskoj strani prima XML podatke, raščlanjuje ih i smešta
u bazu. Da biste preuzeli XML dokument iz baze podataka, po pravilu ćete morati da
upotrebite neki posrednički program (middleware product) kao što je Enhydra, koja će
napraviti i poslati SQL upite bazi podataka, a skup rezultata formatirati kao XML pre
nego što ih vrati klijentu. Činjenica je da neke baze podataka integrišu taj softver u svoje
servere ili za obavljanje te funkcije obezbeđuju softverske dodatke, kao što je Oracleov servlet XSQL. U tim scenarijima, XML služi veoma dobro kao sveprisutan prenosni
format, nezavisan od platforme. Međutim, on nije baza podataka, niti ga tako treba
upotrebljavati.
8.1.3.
Namena
XML je tu da opiše strukturu, integriše protokole između aplikacija, da razmenjuje podatke. XML je skup pravila koja omogućavaju kreiranje tekstualnog formata koji opisuje
strukturu podataka (adresari, konfiguracioni parametri, finansijske transakcije itd.)
XML opisuju podatke u tekstualnom formatu te omogućuje razmenu podataka nezavisno
od sistema i formata podataka i predstavlja budućnost mrežnog programiranja. Veliku
primenu ima u razmeni podataka, pogotov za komunikaciju client-server preko Interneta.
Pogledajmo gde je sve XML našao svoju primenu:
• XML for Content Providers – Istoj informaciji može se pristupati i čitati na
različitim jezicima. Različit prikaz istih podataka mogu se prezentovati različitim
korisnicima. Svaki XML dokument može da sadrži opis gramatike ili sintakse kako
bi se moglo proveriti i ispravnost sadržaja.
• XML for Content and knowledge management – Pretraživanje, indeksiranje i
lokacija podataka postaje jednostavnija pošto XML nosi informaciju o sadržaju, on
je samo opisujući dokument. Transformacija podataka iz XML omogućava prikaz
na različite medije (Web, CD ROM, papir) bez nepotrebnih modifikacija i dupliranja
sadržaja.
• XML for Content Aggregation – XML obezbeđuje da se informacije sa različitih
mesta integrišu na jednom mestu i da se one prikupljaju na osnovu akcija krajnjeg
korisnika. XML na taj način obezbeđuje vezu B2C preko B2B veze.
• XML for Electronic Document Interchange – XML omogućava kreiranje strukture za razmenu informacija kao i da objedini postojeće protokole i standarde.
• XML and E-Commerce – XML obezbeđuje sintaksu da indetifikuje svaku informaciju potrebnu za kompletnu transakciju. Drugi spoj je poverenje, jer XML omogućuje
da se informacija o učesnicima u transakciji nosi zajedno sa transakcijom. Da bi se
pratila promena tržišta potrebno je mnogo manje vremena i novca sa XML-om.
XML, HTML, XHTML i DHTML
191
• XML for Design – Scalable Vector Graphic (SVG) predstavlja jezik za opis dvodimenzionalnih vektora pomoću XML-a. SVG-a omogućuje da svaki korisnik u realnom vremnu pristupa slici u bilo koje vreme i sa bilo kojim uređajem, sa bilo kog
mesta.
XML omogućuje da se strukturni podaci iz različitih izvora jednostavno kombinuju. XML
dokument kao poruka je samobjašnjiv skup podataka, jer pored samih podataka koji su
predmet poruke, XML dokument sadrži i meta podatke pomoću kojih se ti podaci mogu
interpretirati. Programski agenti, mogu se koristiti da integrišu podatke u srednjem sloju
servera iz baze za druge aplikacije. Ovi podaci mogu da se prenose klijentima ili drugim
serverima za dalju agregaciju, procesiranje ili distribuciju. Fleksibilnost XML-a omogućava
da se opišu podaci sadržani u širokom krugu različitih aplikacija, od opisa Web strane do
polja baze podataka.
Prvi čitač Weba koji je omogućio pregled XML -a je Internet Explorer 5.0+, a Netscape
podržava XML specifikaciju od verzije 6 svog čitača.
8.1.4.
Standard
Mogućnost da se podaci odvoje od procesa predstavlja ključ uspeha XML-a. XML je
otvoreni standard, te omogućava da XML funkcioniše na bilo kojoj platformi sa bilo kojim
programskim jezikom. Veliki broj programskih jezika omogućuje rad sa XML-om poput
Jave, MS Visual Basica, MS Visual C++, Perl, Cobol i C#.
Pomoću XML mogu se napisati i novi jezici. WML (Wireless Markup Language), koristi
se za kreiranje Internet aplikacija u mobilnim telefonima, i napisan je u XML-u. XML je
nezampamćenom brzinom postao standard, zbog svoje jednostavnosti.
• XML 1.0, je usvojen kao W3C Recommendation u februaru 1998. godine i predstavlja sintaksu definisanu po W3C specifikaciji.
Takođe W3C omogućava progrmiranje efikasinijim, kreirajući familiju tehnologija koje
podržavaju XML kao što su:
• XML Schema, takođe predstavlja XML dokument, omogućava modularnost jer
kreira strukturu i opis samih XML dokumenta. Jednostavno kombinuje više različitih
šema koje pokriva i sjedinjava strukturu dokumenta. Znači, nasleđuju se pravila
sa drugih šema. Nastale su kao alternativna zamena za DTD (Document Type
Definition), pošto DTD nije bio XML dokument. XML šeme obezbeđuju podršku
za standardne tipove podataka kao što su broj, datum,... i omogućuju definisanje
novih tipova.
• Namespace, eleminiše konfuziju prilikom kombinovanja više šema u jednom XML
dokumentu. On upućuje XML procesor da pronađe strukturna pravila (definisanih u
šemi) koji se primenjuju na sam dokument. U slučaju kada u dokumentu koristimo
dva eksterna dokumenta koji poseduju isti naziv, a različito značenje elemenata
koristimo namespace, kako bi ukazali na koje se elemente odnose i koje značnje
poseduju. Namespace ukazuje na šemu koja sadrži informacije o dokumentu koji se
koristi.
192
Multimedija
• XSLT/xPath vrši transformaciju sadržaja XML dokumenta u bilo šta, najčešće
HTML, omogućavajući na taj način razdvajanje podataka od prezentacije.
8.1.5.
Kako radi XML?
XML je na prvom mestu tehnologija i sam za sebe ne predstavlja nešto posebno već tek
sa srodnim tehnologijama daje pune rezultate. Srodne tehnologije su:
• DTD,
• CSS,
• XLS,
• DOM,
• ADO,
• XLink,
• XFragments,
• XPointer,
• ... itd.
U nekim od pomenutih tehnologija XML se ponaša kao klijent dok je za neke server, a
može biti i jedno i drugo istovremeno.
Jedan od najvećih problema kada je u pitanju transfer informacija je njihov sadržaj u
logičkom smislu te reči. XML služi kao kontejner za transfer jer u sebi pored informacije
ima i njenu poziciju u odnosu na ostale informacije - XML pored informacije opisuje i
strukturu. Detaljna specifikacija XML-a je data na adresi www.w3.org i svakako je vredi
pročitati.
XML je u svojoj osnovi informacija o informaciji. Više nije dovoljno imati samo informaciju, jer to u današnjim uslovima znači tražiti i pronaći istu već je potreban način
da opišemo informaciju, a da taj opis informacije upotrebimo dalje za pronalaženje iste
i za njenu dalju obradu. Neka vam je potrebna neka konkretna informacija. Možete
otići na neki sajt i tamo pronaći tu informaciju, ali to zahteva da neka osoba to i uradi.
Možda biste mogli i da napišete neki parser koji će sadržaj tog sajta rasčlaniti i pronaći
potrebnu informaciju, ali zamislite šta vam je sve potrebno da znate da napišete takav
parser. Morate znati gde je i kako je ta informacija smeštena. Prilično komplikovano, a
rezultati su i dalje diskutabilni. Međutim kada biste imali informaciju koja opisuje informaciju stvari bi bile mnogo lakše. Lako biste mogli da dođete do potrebne informacije to bi mašina mogla da uradi umesto vas, a kad neko stalno nudi takve informacije kojima
biste mogli da pristupite lako onda je pojam Web servisa lako razumljiv. Ideja se dalje
razvija i dobijamo Internet kao mrežnu infrastrukturu tako da na kraju krajeva Internet ili
barem jedan njegov segment će biti uskoro čisto poslovna mreža kojom će se razmenjivati
samo informacije u sirovom obliku. Uslov te razmene je da informacije na neki način budu
XML, HTML, XHTML i DHTML
193
obeležene da bi se mogle identifikovati i koristiti, a upravo to je ono što XML nudi.
Podaci se smeštaju u XML dokumente u obliku znakovnih nizova (strings), između tekstualnih oznaka koje ih opisuju. Osnovne jedinice podataka i oznaka u XML-u nazivaju
se elementi. XML specifikacija precizno definiše sintaksu koje se morate pridržavati pri
pisanju oznaka – kako su elementi razgraničeni oznakama, kako oznaka izgleda, kakva
imena elementi mogu imati, gde se stavljaju atributi itd. Površno gledano, oznake XML
dokumenta mnogo liče na oznake HTML dokumenta, ali među njima postoje bitne razlike.
Najvažnije je da je XML jezik za metaoznačavanje. To znači da on nema fiksan skup
oznaka i elemenata koji bi trebalo da zadovolje svačije potrebe u svim oblastima i zauvek.
Svaki pokušaj da se napravi konačan skup takvih oznaka, osuđen je na neuspeh. Umesto
toga, XML omogućava programerima i piscima da izmišljaju potrebne elemente onda
kad im zatrebaju. Hemičari mogu upotrebljavati elemente koji opisuju molekule, atome,
veze, reakcije i ostale entitete koji se sreću u hemiji. Agenti za prodaju nekretnina mogu
upotrebljavati elemente koji opisuju stanove, stanarine, provizije, lokacije i druge entitete
potrebne za nekretnine. Muzičari mogu upotrebljavati elemente koji opisuju četvrtine
nota, polovine nota, violinske ključeve, tekstove pesama i ostale objekte uobičajene u
muzici.
Slovo X u imenu XML potiče od reči Extensible (proširiv), što znači da se jezik može
proširivati i prilagođavati da bi zadovoljio različite potrebe.
Iako je XML veoma fleksibilan kad je reč o elementima koji se mogu koristiti, veoma
je strog u mnogim drugim aspektima. Specifikacija XML-a definiše gramatiku XML dokumenata, koja kazuje gde se oznake moraju staviti, kako one moraju izgledati, kakva
su imena (nazivi) elemenata dozvoljena, kako se elementima pridružuju atributi itd. Ta
gramatika je dovoljno specifična da omogućava pravljenje raščlanjivača i analizatora sintakse XML-a koji mogu pročitati svaki XML dokument. Za dokumente koji zadovoljavaju
pravila te gramatike kažemo da su dobro oblikovani (well-formed). Dokumenti koji nisu
dobro oblikovani bivaju odbijeni, kao što biva odbijen svaki C program koji sadrži sintaksnu grešku. Programi za obradu XML-a (XML processors) odbijaju dokumente koji nisu
dobro oblikovani.
Radi interoperabilnosti, pojedinci i organizacije mogu se dogovoriti da upotrebljavaju samo
određene oznake. Takve skupove XML oznaka nazivamo primene XML-a (XML applications) ili XML aplikacije. XML aplikacija nije softverska aplikacija koja upotrebljava
XML, kao što su Mozilla ili Microsoftov Word. To su primene XML-a u određenoj oblasti,
na primer, u vektorskoj grafici ili u kulinarstvu.
Oznake u XML dokumentu opisuju njegovu strukturu. Pomoću njih možete videti koji
elementi su pridruženi kojim drugim elementima. U dobro projektovanom XML dokumentu, oznake opisuju i semantiku dokumenta. Primera radi, oznaka može ukazati na to da
je element datum ili ime osobe ili bar-kod. U dobro projektovanim XML aplikacijama,
oznake ništa ne kazuju o tome kako dokument treba prikazati. Drugim rečima, ne kazuju
da li je određeni element ispisan polucrno ili kurzivom ili je stavka nabrajanja u listi. XML
je jezik za označavanje strukture i semantike, a ne za označavanje načina prikazivanja.
Postoji nekoliko XML aplikacija za opisivanje načina predstavljanja teksta; jedna takva
194
Multimedija
je XSL-FO (XSL Formatting Objects). Međutim, to su izuzeci koji potvrđuju pravilo.
Iako XSL-FO opisuje prezentaciju, XSL-FO dokument se nikada ne piše direktno. Umesto
njega napisali biste semantički bolje strukturiran XML dokument, a potom biste upotrebili opis stilova XSL Transformations da biste strukturno orijentisani XML izmenili u
prezentacijski orijentisan XML.
Oznake dozvoljene u određenoj primeni XML-a mogu se dokumentovati u šemi (schema).
Sa šemom se mogu porediti pojedini primerci dokumenta. Za dokumente koji zadovoljavaju šemu kažemo da su validni (valid). Za one koji ne zadovoljavaju tu šemu kažemo
da su, u odnosu na nju, nevalidni (invalid). Dakle, validnost dokumenta zavisi od šeme
sa kojom se dokument poredi. Ne moraju svi dokumenti biti validni. Za mnoge primene
dovoljno je da dokument bude dobro oblikovan.
Postoji mnogo raznih jezika za XML šeme i njihovi nivoi izražajnosti su različiti. Najrašireniji jezik za XML šeme i jedini definisan u samoj specifikaciji XML-a jeste definicija
tipa dokumenta (document type definition – DTD). Svaki DTD navodi sve dozvoljene
oznake i određuje gde se i na koji način one mogu pojaviti u dokumentu.
U XML-u DTD-ovi nisu obavezni, nego opcioni. S druge strane, DTD-ovi nisu uvek dovoljni. Sintaksa DTD-ova je veoma ograničena i ne omogućava pravljenje raznih korisnih
iskaza poput "Ovaj element sadrži broj" ili "Ovaj znakovni niz je datum koji pada između
1974. i 2032". Takva ograničenja možete izraziti jezikom XML Schema Language, koji
je prihvatio W3C. (Taj jezik se ponekad pogrešno naziva opštim imenom schemas, tj.
šeme.) Pored DTD-a i XML Schema Language-a, postoji još mnogo jezika za opisivanje
šema.
Prethodno je navedeno da je za funkcionalnost koju pruža XML potreban parser. Parsiranje, kada je XML u pitanju znači sledeće – raščlanjivanje tekstualnog fajla i pravljenje
strukture koja se rekurzivno puni elementima XML stabla. To, očigledno, znači da parser
izvodi sledeće operacije:
1. Iščitava preprocesorski deo dokumenta (deo na početku dokumenta između ? znakova) da bi došao od informacija koje se odnose na dokument, a nisu deo samog
XML stabla. Na primer: <?xml version="1.0" encoding="windows-1252"?>
2. Zatim se isčitava prvi tag u XML strukturi i zapisuje njegovo ime – ovo je top level
ili startni tag.
3. Sledi zapisivanje imena elementa.
4. Potom se iščitavaju ostali elementi redom da bi se odredilo koja svojstva ima dati
element strukture i zatim se ta svojstva upisuju – ako je u pitanju element upisuje se
njegova vrednost ili u formi uređenih parova atribut = vrednost, ako je u pitanju
atribut.
5. Ako sledeći tag nakon prvog nađenog nije oznaka za zatvaranje iščitava se sledeći
tag i on se definiše kao dete trenutnog elementa. Onda se parser vraća na korak 3.
Ako je nađeni tag oznaka za zatvaranje onda je element definisan.
6. Ovaj proces se ponavlja dok se ne obradi čitav dokument.
XML, HTML, XHTML i DHTML
8.1.6.
195
Imenovanje elemenata
XML elementi moraju da poštuju sledeća pravila:
• Imena mogu sadržavati slova brojeve i druge karaktere.
• Imena ne smeju počinjati brojem ili interpunkcijskim karakterom.
• Imena ne smeju počinjati slovima xml ili XML ili Xml.
• Imena ne mogu imati prazan prostor u sebi.
Sledi nekoliko opštih preporuka. Imena treba da budu samoopisujuća. Primeri su:
<prezime>, <adresa_stanovanja>
Imena treba da budu kratka i jasna, jer to olakšava rukovanje:
<naslov_knjige>
a ne
<naslov_knige_u_biblioteci>
XML dokumenti imaju često odgovarajuću bazu podataka pa nazivi elemenata treba da
odgovaraju poljima u bazi.
XML atributi
XML elementi mogu imati atribute u otvarajućem tagu kao i HTML. Oni se koriste za
dodatne informacije o elementu. Iz HTML-a se sećamo ovoga:
<IMG SRC="slika.gif">
Atribut SRC daje dodatne informacije o IMG elementu. Atributi često pružaju informacije
koje nisu deo podataka. U sledećem primeru tip fajla je irelevantan za podatke, ali je
veoma bitan za softver koji manipuliše elemenom:
<file type="gif">slika.gif</file>
Znaci navoda
Vrednosti atributa moraju uvek biti unutar znaka navoda. Međutim moguće je koristiti
jednostruke ili dvostruke znake navoda:
<ime="Krcun">
ili:
<ime=’Krcun’>
Dupli znaci navoda su češći, međutim, nekada je neophodno koristiti jednostruke kao u
sledećem primeru:
<ime=’Slobodan "Krcun" Penezic’>
196
Multimedija
Šta koristiti - element ili atribut?
Podaci se mogu skladištiti ili u elementima ili u atributima. Element ima sledeću formu:
<ime>Krcun</ime>
dok je atribut u formi:
<nesto ime="Krcun">
Pogledajmo sledeća dva primera:
<komintent tip="nabavljac">
<ime>Pera</ime>
<prezime>Peric</prezime>
</komintent>
ili
<komintent>nabavljac</komintent>
<ime>Pera</ime>
<prezime>Peric</prezime>
U prvom primeru tip je atribut. U drugom primeru tip je element. Oba primera daju iste
informacije. Ne postoje određena pravila kada koristiti atribute a kada elemente. Neka
načelna preporuka je da se elementi koriste kada je u pitanju nešto što je samo po sebi
celokupna informacija a ne neki njen pomoćni deo.
Potencijalni problemi prilikom korišćenja atributa
• Atributi ne mogu sadržavati višestruke vrednosti (elementi mogu).
• Atributi nisu lako proširivi.
• Atributi ne opisuju strukturu.
• Atributima se teže manipuliše u programskom kodu.
• Vrednosti atributa se teško testiraju u odnosu na DTD (Document Type Definition
- definicija tipa dokumenta).
8.1.7.
Sintaksa XML-a
Sintaksna pravila XML-a su veoma jednostavna i striktna. Lako se uče i još lakše primenjuju. Zbog toga je kreiranje aplikacija koje su u stanju da čitaju i manipulišu XML-om
relativno jednostavno. Pogledajmo opet primer:
XML, HTML, XHTML i DHTML
197
<?xml version="1.0" ?>
<note>
<to>Pera</to>
<from>Mika</from>
<subject>pozdrav</ subject>
<body>Puno pozdrava iz Beograda</body>
</note>
Prva linija XML dokumenta – XML deklaracija – određuje XML verziju dokumenta. U
ovom slučaju dokument poštuje specifikaciju 1.0 XML-a koju propisuje W3Consortium.
Ovaj red ujedno i govori Internet Exploreru da parsira (rasčlani) dokument XML parserom
odnosno da dokument tretira kao XML fajl, a ne kao HTML fajl. Bez ove linije dobili
bismo poruku o grešci od IE. Ova linija nema svoj zatvarajući ekvivalent, jer ona nije deo
XML dokumenta već njegova deklaracija. Sledeće je osnovni tag koji dokument formira
kao poruku (<note>). Moguć je samo jedan osnovni tag, inače opet dobijamo poruku
o grešci. Sledeće četiri linije opisuju četiri podčlana osnovnog člana (to, from, subject i
body). Poslednja linija zatvara osnovni tag (</note>).
• Svi XML elementi moraju da budu zatvoreni.
U XML-u, izostavljanje završnog taga vodi u grešku. Dok je u HTML-u prolazilo:
<p>ovo je paragraf<p>ovo je jos jedan paragraf
u XML-u ovo ne bi bilo ispravno, već bi ispravan dokument izgledao ovako:
<p>ovo je paragraf</p><p>ovo je jos jedan paragraf</p>
• XML tagovi razlikuju mala i velika slova.
Za razliku od HTML-a, XML tagovi su case sensitive. U XML-u, tag <Poruka> nije isti
kao tag <poruka>. Stoga, trebalo bi voditi računa da otvarajući i zatvarajući tagovi budu
potpuno identični. I po nazivu i po upotrebljenim karakterima:
<Poruka>Ovo je neispravno</poruka>
<poruka>Ovo je ispravno</poruka>
• Svi XML elementi moraju biti propisno ugnežđeni.
Neispravno ugnežđeni elementi nemaju smisla u XML-u. Dok se u HTML-u elementi
mogu preklapati u XML to nikako nije slučaj. Pogledajmo sledeći primer:
HTML ispravno
<b><i>Ovo je tekst</b></i>
XML ispravno
<b><i>Ovo je tekst</i></b>
198
Multimedija
• Svi XML dokumenti moraju da imaju osnovni (top level) ili startni tag.
Prvi tag u XML dokumentu je osnovni tag. Svi XML dokumenti moraju da imaju jedan par
tagova koji definiše osnovni tag. Svi ostali elementi su ugnežđeni u osnovni tag. Gnežđenje
u dubinu je neograničeno. Znači, element može imati neograničen broj elemenata – dece.
Odnos koji vlada je takozvani roditelj – dete odnos.
<note>
<to>Pera</to>
<from>Mika</from>
<subject>pozdrav</ subject>
<body>Puno pozdrava iz Beograda</body>
</note>
Ovde je par osnovnih tagova <note> i </note>, dok su podčlanovi parovi:
<to> i </to>
<from> i </from>
<subject> i </subject>
<body> i </body>
• Vrednosti atributa moraju biti pod znacima navoda.
U XML-u se vrednosti atributa moraju uokviriti znacima navoda. XML elementi mogu
imati atribute u formi ime = vrednost parova (kao i u HTML). Pogledajmo ova dva
XML dokumenta. Prvi je neispravan, a drugi je ispravan:
<?xml version="1.0"?>
<note date=10/06/2000>
<note>
<to>Pera</to>
<from>Mika</from>
<subject>pozdrav</ subject>
<body>Puno pozdrava iz Beograda</body>
</note>
<?xml version="1.0"?>
<note date="10/06/2001">
<note>
<to>Pera</to>
<from>Mika</from>
<subject>pozdrav</ subject>
<body>Puno pozdrava iz Beograda</body>
</note>
• U XML-u je sačuvan prazan prostor.
Korišćenjem XML-a prazan prostor je prikazan u parsiranom dokumentu. Na primer:
XML, HTML, XHTML i DHTML
199
<body>Puno pozdrava iz Beograda</body>
će u parseru biti:
Puno pozdrava iz Beograda
dok to sa HTML-om nije slučaj.
• U XML-u, CR/LF karakteri se pretvaraju u LF karakter.
U XML-u, nov red u tekstu je uvek sačuvan kao LF (line feed). U Windows aplikacijama
nov red je par CR (carriage return) i LF (line feed) karaktera. Kod UNIX sistema karakter
za nov red je LF, mada neke aplikacije koriste i samo CR. Ova razlika među operativnim
sistemima često za posledicu ima da se podaci vraćaju u obliku strima (toka), a ne u
željenom formatu.
• XML nije nešto specijalno, ali ima svoje male tajne.
XML je zapravo samo tekst, dizajniran tako da ga čita mašina odnosno softver, a ne
čovek. Softver koji podržava čisti tekst može da obrađuje XML. Na primer, u Notepad-u
se može obrađivati XML dokument. XML može da sadrži ne-engleske karaktere (č, ć, ž,
đ...), međutim tada je potrebno dokument sačuvati u Unicode formatu, što nije moguće
u nekim verzijama Windows na primer u 95/98 dok je pod Windows 2000 operativnim
sistemima to moguće. Stoga je u samu deklaraciju XML fajla uveden i atribut encoding
(dešifrovanje) što zapravo govori čitaču koju kodnu stranu da koristi.
<?xml version="1.0" encoding="windows-1252"?>
Ovde je potrebno obratiti pažnju. Fajlovi sačuvani kao Unicode ne mogu imati i encoding
atribut, inače se pojavljuje greška u Internet Exploreru.
Do sada smo se upoznali sa XML-om, njegovom strukturom, sintaksom i stekli smo predstavu o njegovoj nameni. Međutim priča o XML-u se tu ne završava, ali to prevazilazi
namenu ove knjige.
8.2.
HTML
Kada u svom Web čitaču otkucate adresu Web sajta koga želite da pogledate, vaš zahtev
se preko DNS servisa usmerava na IP adresu računara gde se nalazi zahtevani Web sajt
ili strana. Terminološki ovo se naziva zahtevom (Request).
Kada sa pronađe zahtevana IP adresa računara ka njoj se prosleđuje ovaj zahtev. Naredne
akcije koje preduzima Web server zavise od toga šta ste tražili – da li je zahtevana
statična ili dinamična Web strana, neki dokument ili na primer multimedijalni sadržaj. U
najjednostavnijem slučaju, kada je zahtevana statička Web stranica, Web server na vašu
IP adresu (setite se da i vi imate jedinstvenu IP adresu kada ste povezani na Internet),
prosleđuje traženu HTML stranu. Ovaj postupak se naziva odgovorom (Response). Ova
priča je ilustrovana na slici 8.1.
200
Multimedija
Slika 8.1. Procedura Request / Response
Na kraju vaš Web čitač prikazuje uredno formatiranu stranicu sa slikama, linkovima i
ostalim elementima.
Ono što verovatno nije očigledno većini korisnika računara je da će se ova stranica na
(skoro) isti način prikazati bez obzira na operativni sistem, tip računara ili Web čitača/pretraživača koji se koriste. Očigledno postoji standardizovani način formatiranja
i prikaza Web strana koji su svi usvojili.
HTML je standardizovan jezik koji se koristi na Webu i čija je namena opisivanja formata
Web stranice i njenih elemenata.
Da biste bili uspešan stvaralac Web stranica morate znati HyperText Markup Language
tj. HTML. On je relativno jednostavan jezik za opis dokumenata i njihovih međusobnih
veza a koji se prikazuju u Web čitačima (browser-ima).
8.2.1.
Šta je to HTML?
HTML predstavlja hipertekstualne (hypertext) dokumente, dokumenti koji su međusobno
povezani. Hipertekst se sastoji od međusobno povezanih delova teksta (ili drugih informacija) tako da čitalac interaktivno određuje redosled čitanja. Kretanje kroz takve
dokumente neziva se navigacija a ne čitanje. Zato Web dokumenti treba da pruže korisniku utisak da se može slobodno kretati kroz informacioni prostor. Međusobno povezani
dokumenti na Webu nisu samo tekstovi već i slike, zvuci, video, pa se Web može nazvati
hipermedijalnim sistemom. A kako se dokumenti mogu nalaziti bilo gde na mreži svih
mreža, ovo je distribuirani sistem.
HTML nije zaista programski jezik u onom smislu u kom su to C++ ili Visual Basic, on
je više sintaksni jezik za formatiranje dokumenata, nastao je od SGML-a (Standard Generalized Markup Language), koji je daleko kompleksniji "meta jezik" a služi za specifiranje
elemenata koje se koriste u dokumentima i značenje elemenata. Rast HTML-a je inicirao
Netscape, uvođenjem nestandardnih proširenja u jezik, a trenutno se proširenjima i novim
verzijama bavi se W3C komitet. Znači HTML je živ jezik koji se intezivno razvija, pa se
povremeno se pojavljuju problemi sa novitetima koje pojedini Web čitači ne podržavaju.
HTML je u tekstualnom formatu pa se može kreirati u bilo kom od tekst editora, poseduje
XML, HTML, XHTML i DHTML
201
ekstenziju .htm ili .html. Postoje mnogi programi koji pojednostavljuju kreiranje HTML
Web strana, ali potpuna kontrola podrzumeva mnoge akcije na najnižem nivo.
Da bi ste izbegli da izgled vaše strane zavisi od Web čitača u kojem se pregleda, držite se
podalje od elemenata koji su specifični za neki od Web čitača i nisu podržani u ostalima.
8.2.2.
Istorijat
Autor HTML je Tim Barners-Lee iz CERN-a (Švajcarska, centar za visokoenergetsku
fiziku) i nastao je 1991. godine na osnovama SGML-a (Standard Generalized Markup Language). Značajan doprinos razvoju i prihvatanju Web-a je dao program za pregled HTML
strana tj. Web čitač , Mosaic za X i MS Windows. Prvi Web čitač razvijen januara
1993. godine u NCSA instituciji (National Centre for Supercomputing, Chicago, autori
mnogih programa u slobodnoj distribuciji za pristup Internet-u). Sistem je brzo stekao
veliku popularnost i do danas su razvijeni mnogi Web čitači.
Početkom 1994. godine HTML specifikacija je zastarela u odnosu na razvoj jezika već
implementiranog u Web čitačima kao što je NCSA Mosaic. Najvećim delom oslanjajući
se na poboljšanja u ovom Web čitaču, Dan Connelly je napravio reviziju prve specifikacije
i nazvao je HTML 2.0.
Uporedo je počeo sa formiranjem komiteta za dalji razvoj jezika. Prvi sastanak je bio na
WWW konferenciji u CERN-u, maja 1994. godine, a sledeći na IETF (Internet Engineering Task Force) sastanku u Torontu, kada je oformljena HTML radna grupa.
HTML 2.0 specifikacija je pokušala da obuhvati postojeće načine korišćenja HTML-a.
Osnovne novine se tiču rada sa slikama i fontovima kao i formama. HTML 2.0 je postao
zvanični standard za kreiranje Web strana. Strane kreirane u ovo standardu mogu i dalje
da se prikazuju u okviru Web čitača.
HTML 3.0 specifikacija donosi novosti u svim aspektima jezika, a pre svega u radu sa
matematičkim formulama, tabelama, internacionalnoj podršci itd. Ubrzo je zamenjena sa
HTML 3.2 specifikacijom koja se i danas koristi.
Pojavom četvrte verzije, HTML se vratio svom početnom cilju. HTML treba da bude
strukturni jezik, a ne jezik za formatiranje korišćenjem tagova <font> ili <b> za prikaz.
Najznačajnija specifikacija HTML 4.1 omogućava formatiranje HTML dokumenta iz odvojnih šema stilova (style sheet), jednostvno skriptovanje dokumenta i poseduje veću kontrolu nad HTML elementima.
Rast HTML-a je inicirao Netscape, uvođenjem nestandardnih proširenja u jezik, a trenutno
se proširenjima i novim verzijama bavi se W3C komitet.
8.2.3.
Sintaksa
HTML dokument je tekstualni fajl sa ekstenzijom .htm ili .html, koji sadrži set elemenata i atributa, kojim se određuje struktura sadržaja kojeg nosi. HTML može da se piše u
obično tekstualnom editoru, kao što je Notepad ili u nekom od specijalizovanih programa
za obradu Web dokumenata.
202
Multimedija
Bez obzira na automatizaciju procesa kreiranja Web dokumenata, morate posedovati dosta
znanja o HTML-u, kako bi posedovali punu kontrolu nad Web dokumentima. Znanje
HTML nije prednost već uslov da bi bili uspešan kreator Web prezentacija. HTML dokument sastoji se od deklaracija, elemenata i atributa.
8.2.4.
Elementi
Elementi predstavljaju strukturu HTML-a a opisuju delove HTML dokumenta. Mogu da
se nalaze bilo gde u okviru HTML dokumentu. Na primer, P element predstavlja paragraf,
dok EM element proizvodi naglašen sadržaj. Svaki element poseduje tri dela: početni tag,
sadržaj i završni tag.
Tag je specijalni tekst tkz. "markup" – marker koji je ograđen sa < i >. A završni tag
uključuje i znak / posle znaka <. Znači sve što se nalazi u tagovima HTML dokumenta
Web čitač prihvata kao komande, a sve ostalo predstavlja klasičan tekst u ekranu Web
čitača. Na primer EM element ima početni tag, <EM>, i završni, </EM>. Početni i završni
tag okružuju sadržaj EM elementa:
<EM>Ovo je naglesen tekst</EM>
U HTML-u ne postoji razlika između malih i velikih slova za elemente u tagovima tako,
na primer, <em>, <eM> i <EM> predstavljaju iste elemente. Preporučuje se da elemente
HTML-a pišete malim slovima. Takođe sve suvišne znakove razmaka (space), tabulator i
znake za novi red Web čitač ignoriše, ali utiču na veličinu samih Web dokumenata.
Elementi ne smeju da se preklapaju tj. ukoliko se početni tag EM elementa pojavljuje
zajedno sa tagom P elementa, tada se završni tag EM elementa mora takođe pojaviti
zajedno sa završnim tagom P elementa.
Neki elementi dopuštaju da se izuzme završni tag, na primer, element LI opciono može da
sadrži završni tag pošto se on u stvari završava sa sledećim početnim tagom LI elementa:
<UL>
<LI>Prvi, nema zavrsni tag
<LI>Drugi, opcioni zavrsni tag je ukljucen</LI>
<LI>Treci, nema zavrsni tag
</UL>
Neki elementi nemaju završni tag pošto nemaju sadržaj kao, na primer, BR element za
novi red (line breaks).
Web čitači u mnogome nepoštuju ova pravila, tako da se i nepravilni HTML dokument
"pravilno" prikazuje, ovo je nastalo usled rata Web čitača, kada su se grabili za tržište i
što veću upotrebljivost pa i kod nekvalitetnih Web dokumenata.
8.2.5.
Atributi
Elementi mogu da sadrže atribute, to je par ključa i vrednosti koji definiše različite osobine
elementa. Na primer, IMG element poseduje SRC atribut koji obezbeđuje lokaciju slike i
atribut ALT koji obezbeđuje alternativni tekst ukoliko se slika ne učita:
XML, HTML, XHTML i DHTML
203
<IMG SRC="slika.gif" ALT="ZdravaHrana.com ’my’ Logo">
Atributi se uvek uključuju u početni tag nikad u završni, a sintaksa je sledeća:
Naziv_Atributa = " Vrednost_Atributa "
Vrednost atributa ukoliko postoji je ograničena jednostrukim ili dvostrukim navodnicima.
Uobičajeno je da se navode dvostruki kako bi u okviru njih mogli postaviti i jednostruki.
Kod atributa ne smeju da se mešaju mala i velika slova, oni su osetljivi na promenu slova
(case-sensitive).
8.2.6.
Entiteti
Specijalni znaci ili entiteti obezbeđuju metod da se unesu karakteri koji ne mogu da se
unesu sa tastature ili su zauzeti, na primer, znak manje < ne može da se koristi pri unosu
sadržaja, pošto se taj znak koristi za tagove.
Samo pojedini karakteri imaju svoje nazive (slovnu oznaku) dok se ostali dobijaju navođenjem broja karaktera tj. njegovog koda. Možemo ispisati bilo koji znak iz Unicode kodnog
rasporeda. Entiteti imaju sledeću sintaksu:
• &naziv_entiteta;
• &#broj_entiteta;
• &#xheksadecimalni_broj_entiteta;
Da bi ispisali znak manje moramo u HTML dokumentu otkucati &lt;
Primer upotrebe entiteta:
204
Multimedija
8.2.7.
Karakteri
HTML 4.0. usvojio je Universal Character Set kao svoj karakter set. Ovaj karakter set je
ekvivalent Unicode 2.0 kodnom rasporedu koji sadrži karaktere skoro svih svetskih jezike
uključujići i naš. Prethodne verzije HTML koristile su ISO-8859-1 kodni raspord koji je
podržavao samo karaktere nekih Zapadno Evropskh jezika.
Najednostvniji način da koristite naša slova je da HTML dokument sa našim slovima
snimite u UTF-8 formatu i da u zaglavlju HTML dokumenta tj. u okviru HEAD tagova
unesete sledeće:
<meta content="text/html; charset=utf-8" http-equiv=content-type>
Ubacivanje naših slova pomoću kodnog rasporeda CP1250 je vrlo jednostavno, i sastoji se
iz dva koraka:
1. U HTML kodu svake stranice unutar HEAD tagova ubacite META tag:
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1250">
Napomena: LATIN-2 kodni raspored omogućuje prikaz naših latiničnih slova u prozoru
Web čitača, a odgovara kodnoj strani 1250 u Windowsu.
2. U vašem HTML kodu na mestu gde treba da stoji neko naše slovo ubacite sledeće
ASCII kodove tj. simbole:
• &#268; za naše veliko Č
• &#269; za naše malo č
• &#262; za naše veliko Ć
• &#263; za naše malo ć
• &#352; za naše veliko Š
• &#353; za naše malo š
• &#272; za naše veliko Ð
• &#273; za naše malo đ
• Ž za naše veliko Ž
• ž za naše malo ž
Primer upotrebe CP1250 kodnog rasporeda:
XML, HTML, XHTML i DHTML
8.2.8.
205
Struktura
Svaki HTML dokument poseduje svoju strukturu koja se sastoji od nosača HTML dokumenta, a koji sadrži samo zaglavlje i telo HTML dokumenta. U zaglavlju se definišu razni
podaci potrebni web čitaču dok telo sadrži sadržaj i HTML elemenate za formatiranje tog
sadržaja.
Elementi najvišeg nivoa:
• HTML
– HEAD
– BODY
DOCTYPE
HTML dokument započinje sa DOCTYPE (Document Type Declaration) deklaracijom
koja definiše verziju HTML u kojoj je dokument napisan. U verziji 4.01 postoje sledeće
definicije:
• HTML 4.01 Strict, opisuje strukturu HTML 4.01 dokumenta i ne poseduje elemente i atribute za okvire (frames).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• HTML 4.01 Transitional, uključuje i elemente za formatiranje tkz. prezentacione
markere kao što su <B> i <FONT>, ali ne uključuje okvire.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• HTML 4.01 Frameset, poseduje sve što i prethodni plus opis za okvire.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
8.2.9.
HTML element
Da bi Web čitač utvrdio da je tekstualni dokument ustvari HTML dokument on uvek mora
da započinje tagom <HTML> i da se završava sa tagom </HTML>. Ovi tagovi predstavljaju
elemente najvećeg nivoa i govore Web čitaču da dokument sadrži HTML elemente.
HTML tag može da sadrži sledeće argumente TITLE i LANG koji služe da se definiše
komentar odnosno da se setuje jezik koji će da koristi dati dokument (na primer, "en" za
Engleski, "de" za Nemački, "sr" za Srpski itd.) Unutar <HTML> tagova definiše se jedino
zaglavlje (Head) i telo (Body) HTML dokumenta.
Kompletan HTML dokument:
206
Multimedija
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML title="Ovo je HTML dokument" lang="sr">
<HEAD>
<TITLE>Naslov dokumenta</TITLE>
</HEAD>
<BODY>
Zdravo, Svete!
</BODY>
</HTML>
Napomena: Otkucajte ovaj kôd u običnom tekst editoru, na primer, Notepad-u (ili ga
prebacite u Notepad sa Copy/Paste) i snimite ga sa ekstenzijom .htm ili .html, potom
isti dokument otvorite u jednom od najpopularnijih Web čitača kako bi videli rezultat.
Za određivanje prikaza elemenat koristite CSS, a ne HTML tagove tipa FONT ili B.
8.2.10.
HEAD element
Zaglavlje služi da prosleđuje razne informacije Web čitaču, da definiše Web dokument, a
ne utiče na prikaz HTML dokumenta. Definiše se pomoću <HEAD> i </HEAD> tagova unutar kojih obavezno se postavlja naslov, a koji se nalazi između tagova <TITLE> i </TITLE>
(naslov se prikazuje na vrhu Web čitača zajedno sa imenom Web čitača).
U okviru HEAD elementa navode se razne informacije Web čitaču kao što je naslov dokumenta, uključivanje eksternih stilova i script funkcija i informacije o samo Web dokumentu
tj. meta informacija.
HEAD može da sadrži sledeće HTML elemente:
• BASE - Osnovna adresa dokumenta
• LINK - Povezivanje dokumenata
• SCRIPT - Navođenje klijentskog skript - programskog koda koji Web čitač razume
• STYLE - Definisanje stilova za prikaz
• ISINDEX - Input prompt
• TITLE - Naslov dokumenta
• META - Meta informacije, informacije o samom web dokumentu
8.2.11.
BASE element
BASE element navodi osnovnu URL adresu Web prezentacije i pomaže Web čitaču u
slučaju određivanja relativnih adresa koje se navode prilikom referenciranja u okviru A
elementa.
XML, HTML, XHTML i DHTML
207
Osnovna adresa na osnovu koje se određuju relativne adrese navodi se u atributu HREF.
<BASE HREF="http://www.ZdravaHrana.com">
8.2.12.
LINK element
LINK element se koristi za povezivanje HTML dokumenta sa nekim drugim objektom.
Prima iste atribute kao i A element. Najviše se koristi za povezivanje eksterne stil šeme
sa HTML dokumentom.
<LINK REL="stylesheets" HREF="stilovi.css">
Atribut REL koristi se za navođenje odnosa između dokumenta, tj. dokument koji se uvozi
je šema stilova stylesheets.
Netscape Navigator 4.0 koristi ovaj element za koncept "dinamičkih fontova" tj. povezivanje fontova sa HTML dokumentom na sledeći način:
<LINK REL="fontdef" SRC="http://site/path/fontdef.pfr">
Gde je fontdef.pfr dokument koji obezbeđuje fontove. Internet Explorer podržava
dinmičke fontove ali kroz W3C standard za šeme stilova.
8.2.13.
STYLE element
STYLE element se koristi za definisanje stilova u okviru samog HTML dokumenta. Koristi
atribute TYPE da se navede MIME tip za stil šeme tj. "text/css" i TITLE u kome može
da se naslovi definicija šeme stilova.
<HTML>
<HEAD>
<TITLE>Introduction to Style Sheets</TITLE>
<STYLE TYPE="text/css" TITLE="Bright Colours">
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
</HEAD>
<BODY>
...
Po HTML4 specifikaciji ukjučen je i atribut MEDIA u okviru STYLE taga za određivanje
medija na koji se stil primenjuje. Atribut MEDIA ima sledeće vrednosti:
208
Multimedija
• sreen – Izlazni medij je ekran.
• print – Izlazni medij je štampač.
• projection – Izlazni mediji je projektor.
• speech – Izlazni medij je uređaj za sintezu govora.
• all – Koristi sve izlazne medije.
Atribut MEDIA omogućava definisanje različitih stilova za različite medije, pogodni su
priliko definisanja strana koje su samo, na primer, za štampanje itd.
8.2.14.
SCRIPT element
Ovim elementom možete uključiti klijentski skript, a zadaje se pomoću tagova <SCRIPT>
i </SCRIPT>. Klijentski skript "client-side script" omogućava veću intraktivnost u dokumentu odgovarujući korsniku na određene događaje.
Na primer, skriptovi se koriste da se proveri validnost unešenih informacija u formulare
kako bi odmah obavestio korisnika na grešku, bez potrebe slanja informacija preko Interneta na Web server. Može da se nalazi i u okviru BODY elementa ali prepručujemo da se
SCRIPT blokovi nalazi u okviru HEAD elementa zato što se nalaze iznad elementa koji
pozivaju te skriptove u suprotnom Web čitač će izadati grešku.
Pomoću atribut LANGUAGE navodimo jezik koji koristimo za klijentski script, na primer,
JavaScript, PHP & VBScript.
<script language=javascript>
<!-// ovo je skript blok
// -->
</script>
Korišćenjem atributa SRC možete uključiti eksterni skript.
<script language="javascript" src="szw.js">
<!-// ovo je skript blok
// -->
</script>
XML, HTML, XHTML i DHTML
8.2.15.
209
BODY element
Sve što se nalazi unutar HEAD tagova ne prikazuje se u Web čitaču. Unutar BODY taga
nalaze se svi ostali tagovi (inline elementi i block elementi) i naravno sam sadržaj.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML title="Ovo je HTML dokument" lang="sr">
<HEAD>
<TITLE>Naslov dokumenta</TITLE>
</HEAD>
<BODY>
Zdravo, Svete!
</BODY>
</HTML>
Znači prethodni primer na ekranu Web čitača prikazaće:
Zdravo, Svete!
BODY tag sadrži mnoge atribute za kontrolu i format prikaza koji se odnose na ceo
dokument neki od njih su:
• BGCOLOR - pomoću koga se navodi boja pozadine.
• TEXT - boja teksta.
• LINK - boja linka (kojeg nismo dirali).
• VLINK - boja posećenog linka (na koji smo već kliknuli).
• ALINK - boja aktivnog linka (to je boja koja se prikazuje sve vreme dok je link
aktivan, tj. kliknut).
Boja se unosi kao heksadecimalni broj prema RGB kolornoj šemi, kojoj prethodi znak #.
Prva dva heksadecimalna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na
plavu (na primer, crvena boja je #FF0000).
<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF
VLINK=#800080 ALINK=#FF0000>
Unapred definisane vrednosti za hiperveze (linkove) su: LINK=plavo, VLINK=ljubičasto,
ALINK=crveno.
Unutar BODY taga može se navesti i slika pozadine pomoću atributa BACKGROUND:
<BODY BACKGROUND="pozadina.gif" TEXT=#000000 LINK=#0000FF
VLINK=#800080 ALINK=#FF0000>
210
Multimedija
Slika za pozadinu se ponavlja po širini i visini ekrana koliko puta je potrebno. Pri tome
treba birati slike koje su specijalno dizajnirane za tu namenu (da se nebi primećivala
nadovezivanja). Slike za pozadinu se nazivaju pločice (tile) - pošto se lepe kao pločice na
pozadinu ekrana.
Poželjno je da pozadina bude neutralna i da ne umanjuje čitljivost teksta. Interlaced
GIF-ove ne treba koristiti za pozadinu. Po nekim autorima, najbolja veličina za pozadinu
je 256 bajta. Ukoliko želite da fiksirate pozadinsku sliku tako da se ona ne skroluje kao
normalna pozadinska slika, postavite atribut BGPROPERTIES=FIXED u BODY elementu
ali preporuka je korišćenje CSS-a:
<BODY BACKGROUND="nazivslike.gif" BGPROPERTIES=FIXED>
8.2.16.
Komentar
Između ovih tagova <!-- i --> se unosi komenar. Web čitač ignoriše tekst koji se nalazi
unutar ovih tagova. Mogu se nalaziti bilo gde unutar HTML dokumenta, služe za opis
složenih stranica. Pazite na razmake tj. <! --. Neki Web čitači podrzumevaju da je >
oznaka za kraj komentara.
<!-- komentar -->
Komentar može da se unese i pomoću tagova <COMMENT>:
<COMMENT>Tekst izmedju ovih tagova se ne prikazuje u Web citacu
tako da se izmedju njih moze napisati svasta</COMMENT>
8.2.17.
Meta tagovi
Meta elementi se koriste unutar HEAD elemenata, a koriste se za dodavanje informacija
koja nije definisana od strane drugih elemenata. META tagovi služe Web čitaču korisnika
da uradi potrebne radnje sa stranom koju učitava, pri čemu se prema strani odnosi kao
prema objektu. Ovim tagovima može se postići, na primer, vreme trajanja strane u kešu
(cache) tj. memoriji Web čitača, automatski redirekt (prebacivanje na drugi URL) Web
strane, onemogućavanje pojavljivanja strane u tuđem okviru (frejmu) itd.
Ove informacije koriste i razni serverski programi, kako bi lakše protumačili Web dokument.
Rangiranje sajta na pretraživačima često zavisi baš od informacija u okviru ovih taga, a
neki pretraživači neće ni uzeti u obzir Web prezentaciju, ukoliko ih nemate. Često su oni
uzrok dolaska novih posetilaca na Web prezentaciju, zato ne potcenjujte META tagove.
Ali, ni ovde ne treba preterivati. Pre njihovog korišćenja treba obratiti pažnju na svrhu
svakog od njih i pažljivo odabrati sadržaj.
Pozabavićemo se sa najinteresantnijim:
XML, HTML, XHTML i DHTML
211
HTTP-EQUIV atribut upisuju se HTTP zaglavlje pri prenosu HTML dokumenta na Internetu. Za više informacije o HTTP 1.1 specifikaciji trebalo bi pogledati na adresi
http://www.ietf.org/rfc/rfc2616.txt. Atribut NAME koristi se za imenovanje meta informacije i ne koristi se zajedno sa HTTP-EQUIV argumenta. A meta informaciju
navodimo u okviru atributa CONTENT.
Sledi spisak meta tagova sa HTTP-EQUIV atributom:
Pomoću HTTP-EQUIV="Content Type" navodi se karakter set HTML dokumenta. Recimo, kada u HTML dokumentu želite da koristite windows-1250 kodnu stranu koja sadrži
i naše latinične znake onda otkucajte sledeći META tag:
<META HTTP-EQUIV="Content Type" CONTENT="text/HTML;
charset=windows-1250">
Meta tag sa HTTP-EQUIV="Expires" govori Web čitaču od kada da smatra tu stranu
"isteklom". Dakle, ako se korisniku strana već nalazi u keš memoriji, i ima ovaj tag, koji
je istekao, Web čitač će od servera da zatraži novu stranicu, i neće koristiti onu iz keša.
<META HTTP-EQUIV="expires" CONTENT="Fri, 21 Jan 2000 14:05:00 GMT>
Meta tag sa HTTP-EQUIV="Refresh" ponovo učitava stranu što omogućuje komunikaciju sa serverom tkz. client-pull, ili, ukoliko sadrži URL neke druge strane prosleđuje
korisnika na tu stranu. U navedenom primeru, "5" označava vreme u sekundama posle
koga reload/redirekt počinje, a www.svezaweb.com adresa označava adresu na koju bi
korisnik bio prosleđen posle 5 sekundi:
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.svezaweb.com">
Meta tag sa HTTP-EQUIV="Window-target" meta tag određuje ime prozora u kome se
pojavljuje stranica. To je korisno kada neko hoće da stavi vašu stranicu u frejm (okvir)
na njegovom sajtu, tako da izgleda da je i vaša strana deo sadržaja njegovog sajta.
<META HTTP-EQUIV="Window-target" CONTENT="_top">
Meta tag sa HTTP-EQUIV="Set-Cookie" postvlja kolačić (cookie) u Web čitač. Ukoliko
mu zadate expires atribut biće snimljen na disk i postojaće sve do dana postavljenim
ovim atributom, u suprotnom kolačić biće validan samo u toku sesije i biće izbrisan po
zatvaranju Web čitača.
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
expires=Tuesday, 31-Oct-99 14:32:21 GMT; path=/">
212
Multimedija
Definicije skripta i stila koji se koriste u okviru dokumenta:
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Najznačajnji su META tagovi sa NAME atributom, jer imaju najveću ulogu pri prijavljivanju Web strana na pretrazivače (search engines). Upravo oni sadrže podatke koje pretraživači najviše cene (naravno, osim samog sadržaja strane). To su, na primer, ključne
reči (keywords) i opis strane (description).
NAME atributi su:
Posle prijave vašeg sajta na pretrazivače, "robot" pretrazivača poseti vašu stranu i pokupi
potrebne podatke za indeksiranje. Da bi taj proces bio brži, tj. da robot ne bi skupljao
sve ključne reči iz teksta strane, potrebno je navesti meta tag sa sledećim atributom
NAME="Keywords". Dok ključne reči sa HTML dokumenta navodite u okviru atributa
CONTENT="rec1, rec2, ... ".
<META NAME="keywords" content="web, dizajn, uputstva, HTML,
html, napredni, elementi, meta">
Ovom tagu se obično pridružuje i tag za opis vaše strane:
<META NAME="description" content=" Ova strana sadrzi uputstvo za
koriscenje Osnovnih HTML elemenata. Osnovni elementi su: html,
head i body. Naucite vise o njima i njihovom koriscenju.">
Opisni META tag takođe koriste roboti za pretraživanje, tj. kada vaš sajt bude pronađen
prilikom pretraživanja ispod vaše Web adrese pisaće opis koji se nalazi u ovom tagu.
Preporučuje se da u okviru opisa ne koristite naša slova.
Još jedan zanimljiv i koristan META tag je za navođenje autora HTML dokumenta:
<META NAME="author" CONTENT="Darone, [email protected]">
Meta tag sa NAME="ROBOTS" govori robotima pretrazivača šta da rade sa dotičnom
stranom, a opcije se navodi u okviru CONTENT:
• ALL da indeksira tu stranu, i da indeksira strane koje su povezane linkovima...
• NONE ni jedno ni drugo.
XML, HTML, XHTML i DHTML
213
• INDEX samo da indeksira.
• FOLLOW samo da prati linkove.
• NOINDEX da ne indeksira.
• NOFOLLOW da ne prati linkove.
<META NAME="robots" CONTENT="all">
Možete zamoliti pauka (tj. agenti za pretraživanje sadržaja na Internetu) da vam dođe
ponovo u posetu, kako ne bi lutao mrežom:
<META NAME="revisit-after" CONTENT="14 days">
8.2.18.
Atributi
Po HTML 4.0 specifikaciji skoro svi HTML elementi podržavaju jedan skup zajedničkih
atributa (Common Attributes) a to su:
• ID
• CLASS
• STYLE
• TITLE
• LANG
• DIR
Ovi atributi omogućavaju lako povezivanje elemenata sa stilovima i skriptovima, definisanja lokalnog jezika kao i mnoge skript događaje.
ID atribut
Atribut ID postvlja jedinstveni identifikator za element u dokumentu. Ne mogu postojati
dva elementa sa istom vrednošću ID atributa u jednom dokumentu. U sledećem primeru
ID atribut se koristi da identifikuje koji paragraf je prvi, a koji drugi u dokumentu:
<P ID=prvi>Moj prvi paragraf.</P>
<P ID=drugi>Moj drugi paragraf.</P>
Paragrafi u ovom primeru mogu da se kroz ID atribut povežu sa stilom definisanom u stil
šemi (Cascading Style Sheet):
214
Multimedija
P#prvi {
color: navy;
background: transparent
}
P#drugi {
color: black;
background: transparent
}
Takođe ID atribut se koristi da obezbedi jedinstveno ime za HTML element kako bi mu
se moglo pristupiti kao objektu iz skripta:
alert(prvi.innerText); //Direktno
ili
alert(document.all("prvi").innerText); //Preko kolekcije elemenata
CLASS atribut
Atribut CLASS se koristi za povezivanje elementa sa pravilima definisanim u šemi stilova.
Na primer:
<DIV CLASS=navbar>
<P><A HREF="/">Home</A> | <A HREF="./">Index</A> |
<A HREF="/search.html">Search</A></P>
<P><A HREF="/"> <IMG SRC="logo.gif" ALT="SveZaWeb Logo"></A></P>
</DIV>
U ovom primeru koristimo CLASS atribut kako bi povezali stil sa elementom:
.navbar {
margin-top: 2em;
padding-top: 1em;
border-top: solid thin navy
}
.navbar IMG { float: right }
@media print {
.navbar { display: none }
}
STYLE atribut
Atribut STYLE omogućava da se navede stil u okviru samog elementa tj. van okvira šeme
stilova na primer:
XML, HTML, XHTML i DHTML
215
<P>Popularni font za \v citanje preko ekrana monitora je
<SPAN STYLE="font-family: Verdana">Verdana</SPAN>.</P>
Kada se STYLE atribut koristi potrebno je da se postavi style sheet language pomoću
META taga na sledeći način:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Preporučuje se upotreba CLASS ili ID atributa za postavljanje stilova u odnosu na STYLE
pošto ID i CLASS mogu da se primene na različite medije i obezbeđuju odvajanje sadržaja
i formatiranja prikaza.
TITLE atribut
Atribut TITLE obezbeđuje naslov za element i implementiran je kao "tooltip" u Web
čitačima. Primena ovog atributa mnogo koristi kod referenciranja, slika itd., a koriste ga
i mnogi pretraživači. Koristite ovaj atribut na svakom mestu.
<A HREF="mailto:[email protected]" TITLE="Posaljte mail autoru
sajta">[email protected]</A>
<A HREF="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/
cgi_docs.html" TITLE="CGI.pm - a Perl5
CGI Biblioteka">CGI.pm</A>
<LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr
TITLE="Version francaise"> <OBJECT CLASSID="java:Yahtzee.class"
CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready
to play Yahtzee?" TITLE="My Yahtzee Game">
<IMG SRC="yahtzee.gif" ALT="A Yahtzee animation picture" TITLE="A
Yahtzee animation"> Yahtzee is my <EM>favorite</EM> game! </OBJECT>
LANG atribut
Atribut LANG definiše jezik za sadržaj elementa uključujući i ostale HTML elemente koji se nalaze u njemu, a nije naveden atribut LANG. Ovaj atribut je veoma značajan za
pretraživače Interneta.
Vrednosti atributa su definisani prema specifikaciji RFC 1766, evo nekoliko primera: sr
za Srpski, en za Engleski, en − US za Američki engleski.
Korišćenjem LANG atributa omogućava vam i lako menjanje stila sadržaja zavisno od
jezika. Osnovni jezik HTML dokumenta se postavlja korišćenjem LANG atributa kod
HTML elementa ili korišćenjem Content-Language u HTTP zaglavlju pomoću meta tagova.
<html lang="sr">
<head>
<meta http-equiv="Content-Language" content="sr">
</head>
216
Multimedija
8.2.19.
Događaji u Web čitaču
Broj atributa koji definišu klijentski skript je zajednički za većinu elemenata. Vrednost
atributa je ili poziv funkcije ili pet kratkih komandi koji se izvršavaju pošto se događaj
desi.
<INPUT TYPE=submit ONMOUSEOVER=’window.status="Did you fill in all
required fields?";’ ONMOUSEOUT=’window.status="";’>
Kada se koristi atribut za događaj potrebno je da se definiše osnovni script jezik:
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
Mogući događaji su sledeći:
• ONCLICK, kada je nad elementom pristisnuto dugme na mišu;
• ONDBLCLICK, kada je nad elementom načinjen dvostruki klik na mišu;
• ONMOUSEDOWN, kada se nad elementom drži pritisnuto dugme na mišu;
• ONMOUSEUP, kada se nad elementom pusti dugeme na mišu;
• ONMOUSEOVER, kada se pređe mišem preko elementa;
• ONMOUSEMOVE, kada se miš pomeri u okviru elementa;
• ONMOUSEOUT, kada se mišem pomeri sa elementa;
• ONKEYPRESS, kada se pritisne tipka nad elementom;
• ONKEYDOWN, kada se drži pritisnut taster nad elementom;
• ONKEYUP, kada se pusti taster nad elementom.
Napomenimo još jednom da su ovi atributi zajednički za skoro sve elemente i da se veoma
upotrebljivi jer omogućuju proširenje funkcionalnosti samih Web dokumenata.
8.2.20.
Hx elementi - naslovi
U svakom dokumentu potrebno je prvo da definišemo naslov tj. tekst koji se prikazuje
slovima većim od standardnih, kako bi bio upadljiviji. Na raspolaganju je šest nivoa naslova.
Najveća slova odgovaraju naslovu prvog nivoa <H1>, a najmanja naslovu obeleženom
kao <H6>. Ustvari H1 treba da predstavlja naslov knjige, H2 naslov sekcije, a H3 naslov
poglavlja itd., ali HTML standard to ne zahteva.
XML, HTML, XHTML i DHTML
217
Pored zajedničkih atributa koristi i ALIGN atribut sa vrednostima: left, right i center.
8.2.21.
P element
Pasus (paragraf) se definiše tagom <P>, a sadrži tekst i ostale HTML elemente, osim
TABLE i ADRESS elementa. Između pasusa se prikazuje jedna prazna linija. Završni tag
je opcioni, ali se preporučuje da ga koristite pogotova, ako povezujete ovaj element sa
šemom stilova.
Pored zajedničkih atributa koristi i ALIGN atribut sa vrednostima: left, right, center i
justify. U sledećem primeru, tekst u okviru pasusa možemo poravnati sa levom ili desnom
ivicom ekrana ili pak da ga centriramo, korišćenjem atributa ALIGN.
8.2.22.
BR element
Prelazak u novi red vrši se komandom <BR>, skraćenica od Brek Line (prelomi liniju).
<BR> tag nema završni tag pošto nema nikakav sadržaj.
Preporuka je da se ovaj tag ipak zatvara (da ne ostaje otvoren), na primer, <br /> zbog
XHTML specifikacije.
218
Multimedija
Pored zajedničkih atributa koristi i CLEAR atribut sa vrednostima: left, right, all i none.
Atribut CLEAR se koristi kod slika ili tabela da bi novi red započeo ispod ovih elemenata.
8.2.23.
STRONG, EM, CITE, DFN, VAR, B, I & U element
Kada treba nešto isticati, a ne predstavlja ni poseban pasus, niti naslov koristimo podebljana ili iskošena slova. Za jako isticanje koristimo elementa <STRONG>, Web čitači ovaj
elemnt prikazuju kao "bold" tj. podebljana slova, ali preko stilova možemo da regulišemo
prikaz ovog elementa.
Za slabije isticanje koristimo element <EM>, Web čitač ovaj element prikazuju kao "italic"
tj. iskošena slova, ali preko stilova možemo regulisati i prikaz ovog elementa. Ovi elementi
prihvataju jedino zajedničke atribute (id, class, style, lang i dir).
Element <b> se više koriste kada je potrebno prikazati samo jedan znak kao podebljan, u
suprotnom koristite element STRONG. Dok umesto elementa <i> preporučuje se više da
koristite <em>, <dfn>, <var> ili <cite>, jer ističu više smisao teksta kojeg formatiraju.
Navođenje nekog teksta je obično italic, pa se koristi element <CITE> koji u Web čitaču
prikazuje sadržaj tog elementa iskošenim slovima.
Takođe, prilikom definisanja promenjivih u tekstu koriste se iskošena slova pa se zato
umesto <i> elementa koristi <VAR> element.
Napomena: Podvučen tekst treba izbegavati, jer se sa njim označavaju reference ka
drugim dokumentima.
Tagovi, kao što smo napomenuli, se ugnježđavaju, a nikad ne ukrštaju:
XML, HTML, XHTML i DHTML
8.2.24.
219
FONT element
Element <FONT> vam omogućuje da definišete veličinu, boju i tip (font) teksta.
Tag Font sadrži argumente:
• SIZE koji se odnosi na veličinu fonta,
• COLOR koji se odnosi na boju fonta i
• FACE koji se odnosi na tip fonta.
Atribut SIZE prima vrednosti od 1 do 7, a ukoliko se ne navede njegova vrednost je 3.
Najmanje treba definisati dva fonta, uz to treba imati u vidu koji su fontovi najviše zastupljeni na računarima i da li u našem slučaju podržavaju naša slova. U opštem slučaju
to su: Arial, Times New Roman, Verdana, Tahoma i Courier fontovi.
8.2.25.
Center element
Tag <center> služi za centriranje svih elemenata zaključno sa </center>. Element ne
poseduje atribute.
Centriranje postoji kao atribut u mnogim elementima, na primer, za naslov:
Kod HTML-a nije moguće poravnanje obe ivice teksta, on raspoređuje tekst poravnat sa
levom ivicom ekrana.
8.2.26.
BLOCKQUOTE element
Citati se navode pomoću taga BLOCKQUOTE on može da sadrži i ostale HTML elemente.
Pored zajedničkih atributa koristi i CITE atribut u kome se navodi lokacija citata.
220
Multimedija
<blockquote>
Sta ce se desiti ako ovde stavimo novi pasus i novi red pa
pogledajmo kako to izgleda: <p align="right"> Pasus </p>
<p> Pasus 2</p>
<p align="center"> Pasus 3 </p>
<p> Prva linija <br> druga linija <br> treca linija ....
</blockquote>
8.2.27.
HR element
Tekstove možemo razdvajati i horizontalnim linijama pomoću taga <hr> (horizontal ruler).
Debljina linje se posatvlja u pikselima pomoću atributa size i ukoliko se ne zada ima
vrednost 2, širina se zadaje u procentima ekrana, a može i u pikselima atributom width,
a boja se zadaje u heksadecimalnom formatu color atributom. Atribut color podržava
samo Internet Explorer.
8.2.28.
Povezivanje
Najvažnija osobina HTML dokumenta je ta da se oni mogu međusobno referencirati
(povezati tj. da jedan ukazuje na drugi itd.), što je zapravo osobina hiperteksta.
XML, HTML, XHTML i DHTML
8.2.29.
221
A element
Element HTML koji omogućuje povezivanje HTML dokumenta naziva se Anchor "sidro"
i definiše se tagom <A> i </A>. Kako bi se razlikovala od ostatka teksta, veza između
dokumenata je obično podvučena i/ili u drugoj boji.
Veza ka drugom dokumentu ostvaruje se navođenjem mesta gde se nalazi referencirani
dokument, pomoću atributa href (koji je inače obavezan, a ostali atributi su neobavezni)
u a tagu. Referencirani dokument može da se nalazi u istom ili drugom katalogu (direktorijumu) ili na drugom. Obavezno koristite TITLE atribut.
Veza ka <a href="adresa_drugog_dokumenta" title="Ovo je prica
o vezi ka drugom dokumentu"> drugom </a> dokumentu.
U Web čitaču se pojavljuje podvučena reč "drugom" i ako kliknemo na podvučenu reč,
automatski se otvara dokument sa zadate adrese.
Adresa je u opštem slučaju u istom katalogu <a href="primer.htm"> drugom </a> ili
u nekom drugom. Pri tome se koristi UNIX sintaksa sa desnim kosim crtama / i gde treba
voditi računa o malim i velikim slovima.
Ukoliko se dokument nalazi u prethodnom direktorijum u odnosu na tekući u kome se
nalazi i sam dokument referenca glasi:
<a href="../primer.htm">drugom</a>
A ukoliko se dokument nalazi u sledećem podktalogu u odnosu na tekući:
<a href="podkatalog/datoteka.htm">drugom</a>
Ako je referencirana datoteka slika, klik na referencu će prikazati tu sliku na praznom
ekranu:
Pogledajte <a href="slika.gif">sliku</a> velicine 20kb.
Pri referenciranju dokumenata na drugim računarima, uz korišćenje raznih mrežnih protokola navodi se kompletna URL adresa. Uniform Resurce Locator, skraćeno URL predstavalja adresu preko koje se pristupa određenom mrežnom servisu, a sadrži naziv protokola, adresu servera i putanju do dokumenta.
<a href="http://zmaj.etf.bg.ac.rs/Etf/Rc/index.html" > RC ETF BG </a>
222
Multimedija
Pomoću ove komande mogu se pozvati i drugi mrežni servisi (ovi podaci se navode u
okvru HREF atributa):
• gopher://galeb.etf.bg.ac.rs/linux/texts/sendmail
• ftp://ubbg/net/internet/netscape/n601.exe
• telnet://afrodita.rcub.bg.ac.rs
• news:soc.culture.rs
8.2.30.
Tabele
Tabele sadrže tri glavna elementa. Tag <TABLE>, zatim tag reda u tabeli <TR> i tag ćelije
<TD>. Sledi lista tagova i njihovih atributa koji se koriste u izradi tabela.
Atributi taga <TABLE>:
• align - smešta tabelu u levu, centar ili desnu stranu stranice.
• bgcolor - definiše boju pozadine cele tabele.
• border - određuje debljinu ivice tabele u pikselima.
• cellpadding - je nevidljivi prostor između sadržaja ćelije i zida ćelije.
• cellspacing - je prostor između dve ćelije.
• width - definiše širinu tabele u pikselima ili procentima.
Primer koda:
<TABLE align="left" bgcolor="red" border="1" cellpadding="5"
cellspacing="2" width="100%">
Atributi taga <TR>:
• align - smesta sadržaj reda u levo, sredinu ili desno.
• bgcolor - definiše boju pozadine reda.
• valign - smešta vertikalno sadržaj reda gore, sredina i dole.
Primer koda:
<TR align="right" bgcolor="blue" valign="middle">
Atributi taga <TD>:
• align - smešta sadržaj ćelije u levo, sredinu ili desno.
• background - smešta sliku pozadine u ćeliju.
• bgcolor - definiše boju pozadine ćelije.
XML, HTML, XHTML i DHTML
223
• colspan - pokazuje preko koliko kolona se proteže ćelija.
• height - određuje visinu ćelije u pikselima
• rowspan - pokazuje preko koliko redova se proteže ćelija.
• valign - vertikalno pomera sadržaj ćelije gore, u sredinu ili dole.
• width - definiše širinu ćelije u pixelima ili procentima.
Primer koda:
<TD align="center" background="pozadina.gif" bgcolor="red"
colspan="2" height="150" rowspan="2" valign="bottom" width="250">
Sada pošto ste upoznati sa osnovnim tagovima i pripadajućim atributima za pravljenje
tabela pogledajte par praktičnih primera tabela sa pripadajućim programskim kodom.
224
Multimedija
8.2.31.
Obrasci
Web stranice često prikupljaju podatke od korisnika. Obrasci (Forms) omogućavaju da
korisnici pomoću svog čitača unose neke podatke i šalju ih na e-mail, snimaju na serveru
ili prosleđuju nekoj aplikaciji. Obrasci u sebi sadrže različite vrste polja za unos ili izbor
ponuđenih podataka.
8.2.32.
Element FORM
Element (tag) FORM između ostalog pokazuje čitaču gde počinje i gde se završava obrazac/formular. Unutar početnog i krajnjeg taga se smeštaju elementi za unos podataka
(tzv. ulazne kontrole), ali mogu i svi drugi mogući HTML tagovi. Na primer, možemo
uneti tekst koji objašnjava šta pisati u poljima, slike, linkove itd. Takođe, vrlo često se
elementi forme raspoređuju tabelarno, što znači da se i tabele mogu smeštati u formama,
itd. Minimalni izgled forme je:
<body>
<form>
XML, HTML, XHTML i DHTML
225
<!-- Ovde se smestaju jedan ili vise elemenata forme za
unos podataka ali mogu i svi moguci drugi HTML tagovi -->
</form>
</body>
Ovaj kod naravno nema nikakvu funkciju. FORM tag treba shvatiti kao nevidljivi kontejner
u kome se smeštaju elementi forme koji su vidljivi.
Svaka forma može imati svoje ime. Ime forme je neophodno nekim skriptama koje se
koriste u izradi Web stranica, na primer JavaScript skriptama.
<body>
<form NAME="forma1">
<!-- Telo forme -->
</form>
</body>
Obratite pažnju na navodnike u imenu. Vrednosti nekih atributa ne moramo stavljati u
dvostrukim navodnicima, ali ovde to moramo. Da ne bi razmišljali u kojim to atributima
ne moraju navodnici a u kojim moraju savetuje se da sve moguće vrednosti svih HTML
atributa smeštate u dvostrukim navodnicima jer tako sigurno nećete nikad pogrešiti.
Kao što smo već napisali, elementi forme su vidljivi i oni sakupljaju podatke. Kad se klikne
na submit dugme sve te podatke, iz svih elemenata, forma šalje nekoj skripti na obradu.
Definisanje adrese, tj. skriptnog fajla kome se šalju podaci vrši se ACTION atributom koji
se smešta u FORM tagu:
<form ACTION="cgi/obrada.cgi">
U vrednost atributa ACTION se dakle stavlja adresa skripte za obradu podataka. Možete
podatke prikupljene iz forme poslati na neku mejl adresu. U tom slučaju bi kôd izgledao:
<form method="post" action="mailto:[email protected]" enctype="text/plain">
Postoje dva metoda prenosa podataka. Zato i u samoj formi ponekad moramo definisati
metodu prenosa podataka. Atribut kojim se definiše metoda prenosa je METHOD. Metoda
prenosa podataka nije direktno bitna za samu formi, već za skriptni deo. Za JavaScript
gotovo da i nije bitna, ali na primer za PHP skripte je neophodna. Te dve metode su GET
i POST. Znači ako je potrebno u formi definisati metodu prenosa onda se piše:
<form METHOD="POST">
Ako koristimo sve elemente forme osim element za ubacivanje fajlova (slika, videa, muzike
itd), onda su NAME, ACTION i METHOD argumenti sasvim dovoljni u FORM tagu (osim ako
šaljete podatke na mejl jer onda je obavezno i enctype="text/plain" kao što je već rečeno).
Pošto postoji očigledna potreba za više različitih načina prikupljanja podataka od korisnika,
postoje i različiti elementi za prihvat podataka od kojih svaki ima neke svoje osobine. Neki
elementi imaju mogućnost direktnog unosa podataka od strane korisnika, dok mu drugi
omogućuju da izabere jednu od ponuđenih vrednosti, neke vidi u formi a neke ne. Sada
ćemo se upoznati sa svim tim različitim elementima i njihovim karakteristikama.
Elementi HTML forme:
226
Multimedija
• Element tipa text
• Element tipa textarea
• Element tipa hidden
• Element tipa checkbox
• Element tipa radio
• Element tipa select
• Element tipa submit
• Element tipa reset
Standardno, u okviru svake web forme postoje dva dugmeta: submit (potvrdi) i reset
(poništi).
Dugme submit prosleđuje unete podatke Web serveru na obradu. Dugme reset poništava (briše) podatke koje je korisnik uneo, ili ih postavlja na inicijalne vrednosti ako
postoje. Oznaka za oba dugmeta je <input> a razlikuje ih atribut type:
<form>
<input type="submit" value="Potvrdi" />
<input type="reset" value="Ponisti" />
</form>
Za unos teksta koristi se oznaka <input> sa atributom type="text".
<input type="text" />
Pošto obično u okviru jedne Web forme postoji više različitih ulaznih kontrola, obavezno se
svakoj dodeljuje jedinstveno ime. Ovo se radi pomoću atributa name="ime_kontrole".
Dopunite primer na sledeći način:
<form>
Ime: <input type="text" name="tIme" /><br />
Prezime: <input type="text" name="tPrezime" /><br />
<input type="submit" value="Potvrdi" />
<input type="reset" value="Ponisti" />
</form>
U kontroli za unos teksta obično se postavljaju još dva atributa – size="x", gde je x broj
karaktera koji definiše širinu kontrole i maxlength="y", gde y predstavlja maksimalno
mogući broj karaktera koji se može uneti u kontrolu.
Dopunite kôd:
XML, HTML, XHTML i DHTML
227
<form>
Ime: <input type="text" name="tIme" size="10" maxlength="10"/><br />
Prezime: <input type="text" name="tPrezime" size="15"
maxlength="20" /><br />
<input type="submit" value="Potvrdi" />
<input type="reset" value="Ponisti" />
</form>
Ulazna kontrola radio omogućava korisniku da izabere jednu od ponuđenih opcija. Opcije
se međusobno isključuju i obično se postavlja da najčešća od njih bude inicijalno uključena.
Atribut type za ovu kontrolu je "radio".
<input type="radio" name="ime_kontrole" valu-e="vrednost_kontrole" />
U našem primeru želimo da znamo da li je korisnik student ili profesor. Pošto ima više
studenata, postavićemo da inicijalno bude označen:
<form>
Ime: <input type="text" name="tIme" size="10" maxlength="10"/><br />
Prezime: <input type="text" name="tPrezime" size="15"
maxlength="20" /><br />
Student:<input type="radio" name="status" valu-e="student"
checked /><br />
Profesor:<input type="radio" name="status" valu-e="profesor" /><br />
<input type="submit" value="Potvrdi">
<input type="reset" value="Poni\v sti">
</form>
Parametar checked znači da će kontrola biti inicijalno označena.
Ime (name atribut) je isti kod obe kontrole što znači da predstavljaju istu grupu - samo
jedna u okviru grupe može biti označena.
Atribut value, za razliku od ranije, ne označava natpis na kontroli već vrednost koja će
biti preneta serveru kada korisnik klikne na submit dugme.
Polje za potvrdu je tip ulazne kontrole koji korisniku omogućava odabir jedne ili više
ponuđenih opcija, što ovu kontrolu razlikuje od radio dugmadi, kod kojih korisnik može u
grupi odabrati samo jednu od ponuđenih opcija. Atribut type za ovu kontrolu je "checkbox". Web čitač ovu kontrolu prikazuje kao prazan kvadrat, koji može biti čekiran.
<input type="checkbox" name="ime_kontrole"
value="vrednost_kontrole" checked >
Vrednost koju vidi korisnik
</input>
Da bismo isprobali ovu i druge kontrole, napravićemo jednu stranicu za prijavu diplomskog
rada. Prvo ćemo napraviti novu Web stranicu i u nju dodati kontrole koje smo prethodno
opisali.
228
Multimedija
<form>
<h1>Prijava diplomskog rada</h1>
Ime i prezime: <input type="text" name="tImePrezime" size="30"
maxlength="50"/>
<br />
Naziv teme: <input type="text" name="tTema" size="30"
maxlength="50" />
<br />
<br />
<input type="submit" value="Prijavi">
<input type="reset" value="Ponisti">
</form>
Ulazna kontrola select služi za kreiranje tzv. padajućih listi, koristi se u kombinaciji sa
OPTION tagom kojim se određuju stavke u listi. Ako želimo da omogućimo izbor više
opcija mora se navesti svojstvo multiple.
<p> Govorim:
<select multiple>
<option value="it" selected> italijanski </option>
<option value="eng" selected> engleski </option>
<option value="ru" selected> ruski </option>
</select>
</p>
Ulazna kontrola textarea predstavlja tip ulazne kontrole, koja korisniku omogućava unos
više linija teksta ili informacija. Obavezno je definisanje rows i cols atributa, jer oni određuju veličinu kontrole (broj redova teksta i broj kolona u svakom redu). Ovi atributi ne
ograničavaju dužinu teksta za unos, već samo opisuju veličinu definisane kontrole. Ukoliko
je zbog veličine unešenog teksta neophodno, pojavljuju se skrolbarovi. Atribut wrap sa
vrednošću virtual nije obavezan, a stavlja se ukoliko ne želite da se pojavljuje horizontalni
skrolbar.
<textarea name="ime_kontrole"
rows="visina kontrole u redovima"
cols="sirina kontrole u kolonama"
wrap="virtual">
inicijelni tekst koji vidi korisnik
</textarea>
Ulazna kontrola hidden definiše nevidljivo ulazno polje čija će vrednost biti poslata sa
drugim vrednostima iz formulara kada se ovaj pošalje ka serveru kao, na primer, sledeći
formular:
<FORM>
<input type=hidden name=ident value="08100-BGD-3088">
</FORM>
XML, HTML, XHTML i DHTML
229
Multimedija
Najnovija HTML specifikacija omogućava da se skoro sve može uključiti u HTML dokument kao, na primer, Java apleti, ActivX kontrole, muzički fajlovi i drugi objekti. Ubacivanje ne tekstualnih medija u dokument datira još iz HTML 2.0 kada je omogućeno
ubacivanje slika pomoću <IMG> elementa.
IMG element
Element <IMG> drugi je po važnosti element (posle anchor elementa) jer Web ne bi bio
danas to što jeste da nema slika.
Preporuka je da se .GIF format koristi za ikone, a .JPG za skenirane slike u istom ili
nekom drugom katalogu. Treba biti umeren oko broja i veličine slika jer znatno utiču na
brzinu učitavanja sajta.
Pored gore navedenih atributa IMG tag podržava i zajedničke atribute.
Obavezno pri unosu slika unesite i njihovu širinu (WIDTH) i dužinu (HEIGHT) jer ubrzava
učitavanje tako što Web čitača ne mora da troši vreme na izračunavanje tih podataka.
Pored toga najvažniji atribut je ALT koji ispsuje tekst umesto slike dok se ona ne učita
(vrlo korisno ako se slike koriste kao reference ka drugim dokumentima).
Ako se slika nalazi u drugom katalogu treba navesti relativnu putanju:
<img src="../slike/slika.gif" width=161 height=151 border=1
alt="autor">
Reference ka slikama na drugom računaru izbegavajte zbog brzine i efikasnosti rada. Slike
se veoma lepo koriste za referenciranje drugih dokumenata ako se između krajeva referenci
na drugom dokumentu stavi prikaz slike, klikom na sliku dobija se referencirani dokument.
<a href="../index.htm"><img src="../slike/slika.gif" width=161
height=151 border=0 alt="Bla .. bla "></a>
Pomoću BORDER atributa zadajemo okvir slike u pikselima, ukoliko je slika referencirana
kao u prethodnom primeru poželjno je da border bude postavljen na nulu da se ne bi
pojavio plavi okvir oko nje koji ukazuje da je slika referncirana na neki dokument.
230
Multimedija
Atributom ALIGN možemo da postignemo da se tekst pojavljuje sa leve ili desne strane
slike. ALIGN ima vrednost left, right, middle, top i bottom.
Ako je poravnavanje ulevo, slika ide na levu stranu a tekst desno od nje. Prilikom poravnavanja udesno slika se prikazuje na desnoj ivici ekrana, a tekst ide u levo. Pomoću
MIDDLE vrednosti atributa ALIGN centriramo sliku unutar linije sa tekstom.
Atributima VSPACE i HSPACE kontrolišemo vertikalni prostor iznad i ispod slike tj. horizontalni ispred i iza slike. Vrednosti se postavljaju u pikselima. Ovo je dobro ukoliko se
vrši poravnavanje teksta sa slikom, jer omogućava razdvajanje teksta i slike.
Ponekad je potrebno stavljanje velike količine slika na Web (katalozi proizvoda) koje predstavljaju kvalitetne fotografije pa im je veličina poveća. Stoga se vrši pravljenje umanjenih
sličica (thumbnail) koje predstavljaju linkove ka orginalima – male slike su obično dovoljne
da se sazna o čemu se radi.
EMBED
EMBED element omogućava ugrađivanje objekata bilo kog tipa u HTML dokument, pri
tome korisnik mora posedovati aplikaciju na svom sistemu koja omogućava pregled datih
objekata, ili da poseduje plug-in za pregled datih objekta.
<EMBED SRC="_URL_">
<NOEMBED>Alternative content</NOEMBED>
</EMBED>
<EMBED> element je sličan <IMG> elementu pa nasleđuje iste atribute kao što su ALIGN,
ALT, BORDER, WIDTH, HEIGHT, HSPACE, VSPACE i NAME (za referenciranje ugrađenog objekta kroz skript).
Mnogi atributi ovog elementa zavise od dodatka (plug-in), ali poseduje i standardne atribute za rad sa dodacima:
Za ubacivanje VRML datoteka jednostavno u okviru taga referencirate datu datoteku:
<EMBED SRC="../Media_Embedding/example.wrl" WIDTH="200" HEIGHT="150">
Web čitači će da povežu datu datoteku sa dodatkom koji omogućava pregled VRML-a.
XML, HTML, XHTML i DHTML
231
BGSOUND
<BGSOUND> element omogućava da se pušta muzika u .WAV, .AU i .MID format. Muzički
fajl koji želimo da pustimo navodi se kao vrednost atributa SRC.
<BGSOUND SRC="start.wav">
Pomoću atributa BALANCE podešavamo jačinu zvuka stereo balance i poprima vrednosti
između −10 000 i 10 000.
Atributom LOOP podešavamo koliko se puta ponavlja muzička numera. Ukoliko se LOOP
atribut postavi na −1 ili INFINITE muzička numera se non stop vrti.
Atributom VOLUME podešavamo jačinu između −10 000 i 0, pri čemu je 0 maksimalna
jačina tj. jačina će biti 100% prema podešavanju jačine zvuka na korisnikovom sistemu.
<BGSOUND SRC="../Dynamic_Documents/clouds.mid">
Ovaj element podržava samo Internet Explorer, ali isti efekat se postiže korišćenjem EMBED
elementa.
<EMBED SRC="../DynamicDocuments/clouds.mid" HIDDEN="True">
8.3.
XHTML
XHTML (eXtensible HyperText Markup Language) nastao je sa ciljem da reši probleme
koje je HTML zajedno sa Web čitačima doneo. XHTML je identičan sa HTML 4.01 i vraća
HTML prvobitnoj nameni, a to je struktuiranje Web dokumenata. XHTML je definisan
kao XML (eXtensible Markup Language) tj. svi elementi iz HTML 4.01 kombinovani sa
snitaksom XML-a. XHTML 1.0 je oficijalna preporuka W3C od 26. januara 2000. godine,
te predstavlja standard za kreiranje Web dokumenata.
XHTML je svojevrsni pogled na HTML kroz oči strogo definisanog XML-a. Pritom, sva
pravila definisana u XML-u primenjena su na jezik HTML. Rezultat je XHTML – jezik za
opis Web stranica, strogo definisanih sintaktičkih i strukturnih pravila.
Uvođenjem XHTML-a, radi se na odvajanju prezentacije od sadržaja, dok je HTML,
osim za opis sadržaja, često bio korišćen i za prezentaciju (grafičko oblikovanje sadržaja).
XHTML stavlja veći naglasak na standarde i ispravno oblikovane dokumente, koji će se
moći ispravno prikazivati na svim platformama (desktop, laptop, PDA, mobilnim i sličnim
uređajima).
U primeni na webu, XHTML ne bi imao velik značaj da ne podržava usku integraciju sa
tehnologijom CSS (Cascading Style Sheets) koja omogućuje izradu prezentacijskog sloja
Web stranice. Iako XHTML stranici nije potrebno pružiti CSS definicije kako bi ista bila
sintaksno ispravna, svakako se preporučuje da ih dodate jer će u protivnom svaki čitač
XHTML sadržaj prikazati prema svojim unapred definisanim postavkama.
CSS takođe omogućuje definisanje zasebnih stilova prikaza Web stranice za prikaz na
različitim medijima – računarskom monitoru, elektronskom projektoru, PDA uređaju, ispis
232
Multimedija
sadržaja na štampaču i dr. Uz navedenu funkcionalnost, omogućeno je da se izgled (prezentacija) Web stranice, neretko i znatno promeni u zavisnosti od medija na kom je istu
potrebno prikazati.
Kod kvalitetno dizajniranih korisničkih interfejsa na Webu koja koriste XHTML i CSS, u
potpunosti je odvojen sadržaj Web stranice od prikaza iste (prezentacijski sloj). Trebalo
bi XHTML-om opisivati samo elemente sadržaja i hijerarhijske strukture stranice, pritom
izostavljajući opisne atribute koji bi definisali kako taj podatak prikazati u čitaču.
8.3.1.
Mane HTML-a
HTML je bar u početku sadržao jednostavnu sintaksu, koja je godinama rasla. Ta jednostavnost se pretvorila u najveću noćnu moru. Ne mogu da se stvore sopstvene oznake
koje označavaju semantičke odnose unutar sadržaja, jer HTML nije proširiv. Prilikom
automatske, pouzdane razmene podataka HTML ne pomaže. Nedostaje podrška strukture
u HTML i proveravanje sintakse. Web stranice se stalno pomeraju, a webmaster-i ne
mogu da idu u korak sa promenama URL-ova, tj. problem je što HTML nema koncepciju
centralne baze linkova.
Mnoge stranice na Internetu sadrže loš HTML. U sledećem primeru videćemo loš HTML
kôd, ali koji će raditi u Web čitačima, iako se ne drži HTML pravila:
<html>
<head>
<title>Ovo je los HTML</title>
<body>
<h1>Los HTML
</body>
XML je markerski jezik u kome sve mora da se markira ispravno. XML je napravljen da
opiše informacije, a HTML da ispisuje te informacije. Danas postoje različiti Web čitači,
neki prikazuju Internet na računaru, a neki na mobilnim telefonima i PDA uređajima. Ti
drugi Web čitači nemaju resursa da interpretiraju "loš" markerski jezik, ali XHTML je tu
da premosti tu manu kombinujući snagu HTML i XML kako danas, tako i u budućnosti.
8.3.2.
Razlike
XHTML strane mogu biti gledane na svim uređajima koji podržavaju XML. XHTML
predstvlja sledeću generaciju HTML. U suštim XHTML nije toliko različit od HTML 4.01,
i ukoliko ste prebacili vaš HTML kôd na ovaj standard, neće vam biti teško da pređete na
XHTML.
Odmah sad započnite da HTML kod pišete malim slovima i sve elemente zatvarajte
završnim tagom, pogotovo mislim na paragraf </p> i elemente liste </li> kod kojih je
završni tag opcioni.
Pogledajmo razlike između XHTML i HTML-a i neka osnovna pravila.
XML, HTML, XHTML i DHTML
233
Ugnježđavanje
Kao prvo svi XHTML elementi moraju biti ispravno ugnježđeni:
Dokument mora biti pravilno struktuiran
Svi XHTML elementi moraju biti unutar <html> tj. osnovnog elementa. Svi ostali elementi mogu da imjau svoje podelemente (decu). Elementi koji sadrže podelemente, tj.
decu nazivaju se roditelji, na primer, <html> je roditelj za sve ostale elemente. Deca
moraju da budu u paru i pravilno ugnježđeni sa roditeljem. Osnovna struktura dokumenta
je:
<html>
<head> ... </head>
<body> ... </body>
</html>
Imena elementa u tagovima moraju biti pisana malim slovima. Zato što je XML
case-sensitve tj. osetljiv je na znakove, ili pišete sve malim ili sve velikim. Ispravno je
samo <html> dok je <HtML> neispravno, tj. tag <li> je različit od <LI>.
Svi elementi moraju imati svoj početni i završni tag. Ispravno je samo napisana
sledeća konstatacija <p>Ovo je paragraf</p>, dok <p>Ovo je paragraf je neispravno.
Prazni elementi moraju biti zatvoreni. Prazni elementi tj. elementi koji ne sadrže
nikakav sadržaj moraju biti zatvoreni. Prazni elementi započinju sa početnim tagom i
moraju da se završavaju sa />.
Atributi u tagovima moraju biti pisani malim slovima. XML je case-sensitive, tj.
osetljiv je na znakove. Zato je ispravno napisati samo <table width="100%">, dok je
<table WIDTH="100%"> neispravno.
Vrednosti atributa obavezno se pišu pod navodnicima. I ovde je ispravno je samo
234
Multimedija
napisati <h1 align="center">, dok je <h1 align=center> neispravno.
Nije dozvoljena minimizacija atributa:
Evo liste minimiziranih atributa u HTML-u i kako oni treba da se pišu u XHTML:
Normativa
Postoje elementi kojima je zabranjeno da sadrže pojedine elemente, tj.
• a – ne sme da sadrži druge a elemente.
• pre – ne sme da sadrži img, object, big, small, sub ili sup elemente.
• button – ne sme da sadrži druge input, select, textarea, label, button, form, fieldset,
iframe ili isindex elemente.
• label – ne sme da sadrži druge label elemente.
• form - ne sme da sadrži druge form elemente.
Script i Style elementi
Pošto unutar script i style elemenata se nalazi ne-XML sadržaj, pa bi se znak manje
tretirao kao &lt; i skript ne bi radio. Tada se takav ne-XML sadržaj postavlja unutar
CDATA elementa, kako se ne bi vršila data konverzija.
<script type="text/javascript">
<![CDATA[
... unescaped script content ...
XML, HTML, XHTML i DHTML
235
]]>
</script>
Atribut "id" zamenjuje "name" atribut. U HTML 4.01 definisan je atribut name za
elemente a, applet, frame, iframe, img i map, a u XHTML on je isključen i umesto njega
koristi se id atribut.
Lang atribut
Atribut lang primenjuje se na skoro svaki XHTML element i navodi jezik sadržaja unutar
elementa.
<div lang="no" xml:lang="no">Heia Norge!</div>
8.3.3.
Osnove XHTML dokumenta
Svaki XHTML dokument započinje sa DOCTYPE deklaracijom, što predstavlja definiciju
strukture dokumenta u vidu DTD-a (Document Type Definitions).
Minimalna osnova XHTML dokumenta:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<!-- ovde ide sadrzaj -->
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
1. Osnovni element mora biti html.
2. Osnovni element mora da poseduje deklaraciju namespace-a, tj. da definiše datu
adresu http://www.w3.org/1999/xhtml.
3. Mora da započinje sa DOCTYPE deklaracijom koja referencira na jednu od tri
definisane definicije tipa dokumenta, tj. DTD.
236
8.3.4.
Multimedija
Deklaracija
DOCTYPE deklaracija nije XHTML element i nema svoj završni tag. Deklaracija mora
uvek da se nalazi u prvoj liniji XHTML dokumenta i nosi tip DTD-a, tj. tip definicije
dokumenta.
DTD specificira sintaksu Web strana u SGML-u, kao na primer, HTML, gde su navedena
pravila o primeni markera na određeni tip, uključujići set elemenata i deklaracije entiteta.
Znači, DTD definiše strukturu dokumenta, odnosno, sâm XHTML i njegovo značenje.
Primer DTD-a je HTML specifikacija koja definiše značenje HTML elemenata koju Web
čitači koriste kako bi prikazali Web stranicu. Inače bi svaki Web čitač tumačio HTML na
svoj način.
XHTML DTD omogućava sintaksu i gramatiku XHTML markera, a koristi se za validaciju
samog dokumenta. Postoje tri deklaracije: Strict, Transitional i Frameset. Najpopularnija
je XHTML Transitional.
XHTML 1.0 Strict
Strict DTD uključuje definicuju elementa i atributa za strukturu HTML dokumenata bez
elemenata i atributa formatiranja sadržaja, a ne sadrži definiciju okvira (framesets):
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ova deklaracija se koristi kada imate čist kôd i želite da izbegnete greške, a koristite CSS
(Cascading Style Sheets).
XHTML 1.0 Transitional
Transitional DTD uključuje sve elemente i atribute, bez definicije okvira:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ova deklaracija se koristi kada koristite sve prednosti HTML-a i kada želite da podržite
Web čitače koji ne razumeju CSS.
XHTML 1.0 Frameset
Frameset DTD uključuje sve što i prethodni plus okvire:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Ovu deklaraciju upotrebljavate kada koristite HTML okvire za deljenje prozora Web čitača
na dva ili više okvira.
XML, HTML, XHTML i DHTML
8.3.5.
237
Validacija XHTML sa DTD
Prethodno opisanim radnjama pretvorite vaš HTML u XHTML. Da bi izvršla validacija
XHTML dokumenta potrebno je referencirati odgovarajući DTD fajl. W3C validator se
nalazi na adresi http://validator.w3.org/.
Pomoću programa HTML TIDY možete automatski prebaciti kod iz HTML u XHTML.
Program HTML TIDY autora Davea Raggetta je besplatni program za validaciju i čišćenje
HTML koda. Omogućava i čišćenje nepotrebnog koda kojeg unose razni HTML editori i
razni drugi alati, na primer, Microsoft Word. Program zamenjuje složene atribute fontova
stilovima i uvlači oznake radi bolje čitljivosti. Program je veličine 136 kilobajta i koristi se
iz komandne linije. Program se može preuzeti sa www.w3.org/people/raggett/tidy
strane.
I na kraju sledi jednostavan XHTML dokument:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sr" lang="sr">
<head>
<title>Jednostavan dokument</title>
</head>
<body>
<p>Jednostavan paragraf</p>
</body>
</html>
Ukoliko započinjete kreiranje Web prezentacije rukovodite se ovim pravilima radi standardizacije i kreiranja čistog koda.
8.4.
Dinamički HTML – DHTML
Većina današnjih internet stranica su izrađene u većoj ili manjoj meri korišćenjem dinamičkog HTML-a (u nastavku teksta – DHTML). Iako bi se po samom nazivu dalo
zaključiti da je reč samo o novijoj tj. naprednijoj verziji jezika HTML, DHTML predstavlja
ipak nešto drugo. DHTML je samo oznaka da se pri izradi Internet stranica koristi nekoliko tehnologija. To je zapravo ideja o tome koje (već postojeće) jezike i na koji način ih
koristiti pri izradi stranica. Ti jezici su:
• HTML;
• CSS;
• skriptni jezik: JavaScript, VBScript.
Ovde je važno pomenuti i Document Object Model (skraćeno DOM). DOM ne predstavlja
neki konkretan jezik, već je to model po kom se u HTML-u stranica gradi od objekata.
238
Multimedija
On je bitan, jer predstavlja vezu između HTML-a koji sadrži objekte i CSS-a i skriptnog
jezika koji tim objektima na neki način upravljaju, tj. dodeljuju ili menjanju objektima u
HTML-u neka svojstva.
Ispravnom upotrebom i kombinacijom jezika koji sačinjavaju DHTML pružaju se velike
mogućnosti za manipulisanje stranicama. Vredi istaći par najvažnijih (u zagradi je navedeno koji od jezika omogućava pojedinu opciju):
• interakcija s posetiocem stranice (JavaScript),
• mogućnost prilagođenja stranica ljudima s posebnim potrebama (CSS),
• menjanje izgleda stranice nakon učitavanja – "živi" elementi (JavaScript) i
• lakše održavanje, tj. izmena izgleda stranica (CSS).
Slika 8.2. Grafički prikaz odnosa klijentskih Web tehnologija
8.4.1.
Statičke i dinamičke stranice
Osnovni HTML dokumenti su statični; prikaz u pretraživaču se ne menja ukoliko ne
kliknete na link za drugu stranicu. Jezik JavaScript, predstavljen prvi put 1995. godine u Netscapeu 2.0, uneo je revoluciju u Web stranice time što ih je učinio dinamičkim.
Sa JavaSciptom su došle forme koje se dinamički ažuriraju i upozoravaju nas ako unesemo pogrešne podatke, grafika koja se menja kada pređete mišem preko nje, i dosadne
skrolujuće poruke u statusnoj liniji. Dok JavaScript daje život statičkom HTML-u, on ne
čini da cela Web strana bude dinamička – skriptovi mogu da menjaju grafiku, statusnu
liniju ili forme u realnom vremenu, ali ne postoji način da se promeni zaglavlje na vrhu
strane ili neki manji deo teksta u okviru stranice.
DHTML uklanja ova ograničenja. Upotrebom DOM-a, skript može da modifikuje bilo
koji deo stranice – bilo koju reč, link ili čak celu stranicu. Da biste ovo postigli možete
da koristite isti JavaScript jezik sa novim objektima koji su dostupni uz DOM.
XML, HTML, XHTML i DHTML
239
Kao primer koji pokazuje moć DHTML-a, pomislite na grafiku koja se menja kada je
pokazivač miša nad njom – danas su ovakve stvari rasprostranjene na Webu. To se postiže
upotrebom JavaScripta koji zamenjuje jednu sliku sa drugom. Upotrebom DHTML-a
možete da primenite istu mogućnost na tekstualne menije. Reči u meniju mogu dinamički
da menjaju boju, stil ili font.
Pomoću CSS-a i DHTML-a možete da odredite tačnu poziciju objekta u prozoru pretraživača, dok ovo nije moguće učiniti upotrebom HTML-a. Takođe, možete dinamički da
menjate poziciju objekta čime se omogućava animacija.
DHTML animacija je korisna za igre i specijalne efekte, ali može biti korišćena i u standardnim stranicama – meniji mogu da klize po ekranu kada se aktiviraju ili tekst može da
se kreće preko ekrana da bi skrenuo pažnju.
Kada se DHTML prvi put pojavio u pretraživačima verzije 4.0, bio je usmeren na koncepte
slojeva – delovi unutar Web stranice koji mogu da budu sakriveni, pokazivani ili pomerani
dinamički. Iako su Netscape i Internet Explorer podržavali dosta različitih metoda za
upotrebu slojeva, oni su i dalje bili veoma popularni elementi dinamičkih sajtova. Iako novi
DOM dozvoljava dinamičku kontrolu nad svim elementima na stranici u pretraživačima
koji ga podržavaju, slojevi i dalje predstavljaju pogodan način rukovanja sa delovima na
stranici, kao što su meniji.
CSS (Cascading Style Sheets) menja način upotrebe teksta na Webu. Sada postoji standardan i precizan način kontrole fonta, veličine, boje i pozicije teksta u okviru Web stranica. Iako sa regularnim HTML-om možete, do neke mere, da kontrolišete izgled teksta,
proizvod toga je kompleksan HTML koji nije standardan i može da "sruši" neke pretraživače. Sa CSS-om, možete da kontrolišete izgled stranice na standardan način, a stariji
pretraživači će biti u stanju da prikažu taj dokument bez prednosti CSS-a. Takođe, da
biste tekst učinili dinamičnim, možete da koristite DHTML. Možete podesiti da tekst
bledi i da se vraća u normalno stanje, možete da ga pomerate po ekranu, da mu menjate
veličinu, boju ili font, na komandu.
8.4.2.
DOM
Kao što je prethodno rečeno, DOM predstavlja izuzetno bitan faktor u DHTML-u. Prevod
bi za Document Object Model bio objektni model dokumenta. Upravo se iz imena može
videti čemu on služi. Kao prvo, reč je o modelu, tj. definisanju strukture HTML dokumenta. Prilikom definisanja strukture HTML dokumenta postavljaju se sledeća pitanja:
• Koji sve tagovi postoje na stranici?
• Koliko ih ima?
• Na koji način su poređani?
• Koja su svojstva tih tagova?
• Na koji se način elementi tih tagova prikazuju na stranici?
240
Multimedija
DOM daje odgovor na ova pitanja. On izražava strukturu HTML dokumenta na univerzalan, sadržajno nezavisan način. Postoji više nivoa DOM-a koji se međusobno razlikuju po
objektima koje sadrže kao i mogućnostima menjanja svojstava i prikaza tih objekata.
DOM nivo 0
Kada ga je Netscape prvi put predstavio, JavaScript je uključivao hijerarhiju objekata pod
imenom DOM, a još više objekata je dodato u Netscapeu 3.0. Iako nisu bili standardizovani, ipak su bili podržani od strane Microsofta koji je razvijao nove verzije Internet
Explorera.
Ako ste koristili JavaScript za upravljanje statusnom linijom, prozorom, formom ili slikama,
onda ste sigurno koristili ovaj jednostavan DOM. Ovi objekti su se nezvanično nazivali
DOM nivo 0, iako nisu bili W3C standard.
DOM nivo 1
W3C je otišao korak napred i kreirao standardnu hijerarhiju DOM objekata koji su nazvani
DOM nivo 1. Ova preporuka W3C-a je uključivala osnovne nivo 0 objekte koji su već
bili podržani od strane oba popularna pretraživača. Nivo 1 sadrži objekte koji dozvoljavaju
upravljanje sa bilo kojim delom Web stranice. Oni obezbeđuju iste osobine, kao i dodaci
koji su specifični za svaki pretraživač, ali na standardan način. Posle mnogih protesta
Web dizajnera, koji su imali mnogobrojne glavobolje zbog višestrukih DOM standarda,
Netscape i Misrosoft su odlučili da podrže W3C DOM standard. Netscape 6.0 i Internet
Explorer 5.0 su bile prve verzije koje su podržavale standardni DOM.
DOM nivo 2
W3C je nastavio sa radom na DOM specifikaciji i kao preporuku dao DOM nivo 2. Nivo
2 dodaje brojne osobine, uključujući mogućnost menjanja stilova (definisanih CSS-om)
dinamički na standardan način.
DOM u nivou 3 se, uglavnom, fokusira na podršku za XML.
Glava 9
Uvod u CSS
CSS (Cascading Style Sheets) je specifikacija koja služi za definisanje stilova koji određuju
izgled nekog HTML elemenata (fontovi, boje, pozicija, dimenzija...). Ti stilovi se čuvaju
ili u eksternim fajlovima sa ekstenzijom .css , ili su interni gde se vezuju samo za jednu
stranicu kojoj pripadaju ili se pišu inline, tj. u okviru taga samog elementa.
Web dokument može da se sastoji od tri sloja – sadržaj, prezentacija i ponašanje. Sloj
prezentacije definiše kako će izgledati sadržaj kada mu korisnik pristupi. Konvencionalni
način je da se sadržaj razgleda Web čitačem ali postoje i drugi načini pristupa. Na primer,
sadržaj može da se konvertuje u sintetizovani govor za korisnike koji su slabovidi ili imaju
probleme sa čitanjem.
Slika 9.1. Slojevi Web dokumenta
CSS stilovi pružaju dizajnerima dve ključne prednosti. To je, najpre, precizno razdvajanje forme od sadržaja, pri čemu naznačavanje teksta odražava logičku strukturu informacija, a dizajner ima slobodu da odredi kako će koji HTML tag izgledati. Druga
pogodnost je efikasna kontrola velike količine dokumenata, jer se izmenom jedne datoteke koja sadrži opise stilova, automatski menja dizajn proizvoljnog broja Web stranica.
Stilovi omogućavaju veću kontrolu sa manje koda, što ubrzava proces izrade i održavanja
prezentacija. Da bismo u standardom HTML-u oblikovali svojstva elementa <h1> koji se
najčešće koristi za naslove, koristićemo nešto nalik na:
242
Multimedija
<h1 align="center">
<font face="Verdana, Helvetica,Arial, sans-serif" size="6"
color="gray">Naslov odeljka</font></h1>
Ovakvo formatiranje ima lokalni domet i odnosi se samo na tekući pasus označen tagom
<h1>; svaki sledeći naslov morao bi da bude oblikovan na isti način. Ako svojstva ovog
pasusa definišemo stilom, tj. skupom pravila za formatiranje, stil utiče na sve instance
elementa <h1> u svim dokumentima na koje se taj stil odnosi. Da bi se to ostvarilo potrebno je da HTML stranice u svom zaglavlju, negde između oznaka <head> i </head>,
sadrže nešto poput
<link rel="stylesheet" href="stilovi.css" type="text/css">
U ovom slučaju radi se o spoljašnjim kaskadnim stilovima. Iako stilove možemo da definišemo u okviru jedne Web stranice ili lokalno, za jedan tag, centralizovano upravljanje
moguće je samo ako opise stilova izdvojimo u zasebnu datoteku. Radi se o najobičnijem
tekstualnom fajlu (u našem primeru stilovi.css) koji sadrži i sledeći segment:
h1 { text-align: center;
font-size: 16pt;
font-family: Verdana,
Helvetica, Arial,
sans-serif; color: gray;}
CSS je predstavljen kao skup pravila, koja se pišu na sledeći način:
selektor
{
atribut1: vrednost1;
atribut2: vrednost2;
}
Selektor može biti HTML element, stil klasa, kao i pseudo klasa ili pseudo element.
9.1.
Dodavanje CSS u HTML stranu
CSS stil se može dodati u Web stranu korišćenjem sledećih načina:
1. inline (definicija stila se vezuje za pojedinačni HTML element preko HTML atributa
style):
<html>
<head>
<title>Primer za inline CSS stil</title>
</head>
<body style="background-color: #c0c0c0;">
<p>Ova strana ima sivu pozadinu.</p>
</body>
</html>
243
Uvod u CSS
2. ugrađivanjem (interni stil - definicije stilova su sastavni deo HTML dokumenta,
dodaju se u <head> deo dokumenta pomoću taga <style>):
<html>
<head>
<title>Primer za ugradjivanje CSS stila</title>
<style type="text/css">
body {background-color: #c0c0c0;}
</style>
</head>
<body>
<p>Strana sa sivom bojom pozadine.</p>
</body>
</html>
3. povezivanjem (eksterni stil - definicije stilova su u odvojenom CSS dokumentu):
<html>
<head>
<title>Primer povezivanja eksternog CSS-a
</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
</body>
</html>
Navedeni načini za kreiranje stila mogu biti istovremeno definisani za jednu Web stranu
i/ili njene pojedinačne elemente. U takvom slučaju, kreira se novi "virtuelni" stil, koji se
primenjuje sledećim redosledom: 1 – eksterni, 2 – interni i 3 – inline.
Način primene je kaskadni – stil na nižem nivou prekriće stil na višem nivou, odnosno,
inline stil ima najveći prioritet, što znači da će prekriti stil definisan unutar <head> taga,
a stil, definisan unutar <head> taga, prekriće stil definisan u posebnom CSS dokumentu.
Slika 9.2. Kaskadni način primene stilova
244
9.2.
Multimedija
CSS "kutije"
Stilovi (CSS) uz pomoć HTML <div> elemenata nude veću kontrolu prikaza stranice. Sa
njima možemo neki sadržaj pozicionirati bilo gde na stranici uz preciznost u pikselima. Bilo
koji sadržaj se može staviti unutar <div> elemenata i onda oblikovati uz pomoć stilova.
Može se menjati bordura, pozadina, veličina i pozicija elementa na stranici. U ovom
slučaju, tabele su potrebne samo u svojoj osnovnoj formi - za prikaz skupa numeričkih
podataka.
Ovi odeljci su kao mini stranice i često se nazivaju CSS kutije (CSS boxes). To su fundamentalni gradivni blokovi kada su u pitanju Web stranice i raspoređivanje elemenata na
njima.
CSS kutije imaju širinu (width) i visinu (height), boju podloge (background colour) ili
čak sliku pozadine (background image) koja može da se ponavlja i tako formira mustru.
Podrazumeva se da se CSS kutija proteže od leve margine do desne margine tela stranice.
Ukoliko niste specificirali margine tela stranice, to će biti puna širina prozora čitača. Ako
ne specificirate visinu CSS kutije, ona je neće imati. Ako stavite neki tekst u kutiju, ona
će se raširiti po vertikali da se prilagodi tom tekstu - ili slici. Da biste tekst odmakli od
ivice kutije možete dodati tzv. padding (uvlake).
Slika 9.3. Uvlake
Primer koda:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Leva uvlaka</title>
</head>
<body>
<DIV style="padding-left:100px;">Ovaj red (kutija) ima levu
uvlaku od 100 piksela.</DIV>
</body>
</html>
245
Uvod u CSS
Slika 9.4. Prikaz u Internet Exploreru
Morate biti pažljivi kod korišćenja paddinga zato što on funkcioniše potpuno drugačije u
Microsoft Internet Exploreru nego kod drugih čitača. Za razliku od prikazane slike, IE
stavlja padding unutar kutije, tako da njena visina i širina ostaju iste. Svi drugi čitači
stavljaju paddding izvan kutije, dodajući ga na visinu i širinu. Prema tome, veličina kutije
će se menjati u zavisnosti od toga koji se čitač koristi za pregledanje stranice i to može
stvoriti potpuno nepredviđene rezultate ako vaš layout zavisi od preciznih pikselskih mera.
Pored paddinga, možete definisati i granicu (border).
Slika 9.5. Granica
Primer koda:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dvostruka bordura</title>
</head>
246
Multimedija
<body>
<DIV style="width:300px; border-style:double">Oko ove kutije je
dvostruka bordura.</DIV>
</body>
</html>
Slika 9.6. Prikaz u Internet Exploreru
Da biste odvojili jednu kutiju od druge, možete im dodeliti margine.
Slika 9.7. Margine
Primer koda:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
247
Uvod u CSS
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Desna margina</title>
</head>
<body>
<DIV style="margin-right:350px; border-style:double">Ova kutija ima
desnu marginu od 350 piksela.</DIV>
</body>
</html>
Slika 9.8. Prikaz u Internet Exploreru
Margine i padding se često "brkaju". Zapamtite da kod tela Web stranice margine idu od
ivica ka unutra, a sve druge CSS margine idu u polje.
Slika 9.9. Razlika između uvlaka i margina
248
9.3.
Multimedija
CSS pozicioniranje
Postoje više potpuno različitih metoda za pozicioniranje sadržaja na stranici, to su: relativno, apsolutno i fiksno pozicioniranje, kao i pozicioniranje sadržaja float metodom što
se smatra za potpuno izdvojenu tehniku u odnosu na tri prvo navedena.
Prvo ćemo da biste tehnike pozicioniranja što lakše shvatili , pre nego što svaku detaljno
objasnimo ponaosob, utvrditi generalnu razliku između relativnog, apsolutnog i fiksnog
pozicioniranja sa jedne strane i pozioniranja float metodom sa druge strane. Dakle, dok
prve tri metode (positioning) koriste x i y koordinate za precizno pozicioniranje elemenata
na stranici mereno u pikselima, float metod je pozicioniranje gde se određenom sadržaju
"naređuje" da se prilepi krajnje levo ili krajnje desno koliko god može do susednog elementa i na ovaj način elementi se "lepe" jedan do drugog i na taj način postavljaju na stranici.
Svaka od ovih metoda ima neke svoje prednosti i ne možete se osloniti na korišćenje samo
jedne metode, već ćete ih koristiti sve zavisno od slučaja do slučaja.
Apsolutno pozicioniranje
Pored visine i širine, CSS kutije se mogu postaviti na bilo koje mesto na stranici specificiranjem parametra position:
position: absolute;
Apsolutno pozicioniranje je lako razumeti, jer po tom principu funkcionišu i stvari u
realnom životu. Vaša kuća može biti na 50 m od centra grada, a kilometar od železničke
stanice, na primer.
Češći je slučaj da se položaj kutije definiše sledećim tipom specifikacije:
top:50px; left:100px
to ne znači da mora da budu parametri top i left, to mogu biti i top i right, bottom i left
ili bottom i right.
Primer koda za apsolutno pozicioniranje slika:
<html>
<head><title> Absolute position </title></head>
<body>
<img style="position:absolute; top:100px; left:20px"
width="164" height="110" src="C:/Documents and
Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg">
<img style="position:absolute; top:100px; left:200px"
width="164" height="110" src="C:/Documents and
Settings/All Users/Documents/My Pictures/Sample Pictures/Winter.jpg">
</body>
</html>
249
Uvod u CSS
Slika 9.10. Prikaz u Internet Exploreru
Relativno pozicioniranje
Ukoliko želite da opišete poziciju kuće svog najbližeg suseda, možete reći da je 60 m
od centra grada ili možete reći da je 10 m od vaše kuće. Relativno pozicioniranje
podrazumeva da su CSS kutije jedna do druge. Prva kutija je na vrhu, sledeća je ispod
i tako redom. One efektivno plove nizbrdo od vrha stranice. To je nešto što se retko
dešava u realnom životu, ali možete to zamisliti kao bazen koji je pun vazdušnih dušeka.
Jedan može biti na vrhu, sledeći pluta i podvučen je delom pod onaj koji je iznad njega
itd. Primer koda za relativno pozicioniranje slika:
<html>
<head><title> Relative position </title></head>
<body>
<img width="164" height="110" src="C:/Documents and Settings/
All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg">
<img style="position:relative; left:100px" width="164"
height="110" src="C:/Documents and Settings/All Users/
Documents/My Pictures/Sample Pictures/Winter.jpg">
</body>
</html>
Slika 9.11. Prikaz u Internet Exploreru
250
Multimedija
Fiksno pozicioniranje
Kod ove vrste pozicioniranja elementu zadajete koordinate na stranici gde se položaj
elementa neće menjati ni ukoliko, na primer, skrolujete celu stranicu. Ovo je veoma zanimljiva mogućnost, jer je možete recimo koristiti kako biste napravili meni za vaš Web
sajt koji uvek stoji u istoj poziciji (recimo sam vrh ili sam levi ugao) nezavisno od ostatka
sajta koji se nezavisno od ovog elementa sasvim normalno skroluje. Takođe, ovako možete
fiksirati polozaj i bilo kog drugog elementa, recimo slike.
Pozicioniranje metodom float
Da dobijete da CSS kutije budu jedna pored druge, a ne jedna ispod druge, trebalo bi da
specificirate:
float: left;
ili
float: right;
Kao i napumpani vazdušni dušeci u širokom bazenu kutije će biti jedna pored druge gde ima
dovoljno prostora. U suprotnom dolazi do preklapanja. Da biste izbegli tu situaciju treba
da obezbedite da ukupna širina svih kutija u jednom redu bude manja od širine stranice.
To možete postići specificiranjem širine u pikselima – ali total treba da bude manji od
minimalne širine prozora čitača. Takođe, možete da koristite procentualne vrednosti, i na
taj obezbeđujući da total bude manji od 100 procenata. Kod relativnog pozicioniranja
izbegavajte da mešate piksele i procentualne vrednosti, jer se rezultati ne mogu predvideti.
Primer koda sa float za realizaciju tzv. inicijala u tekstu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inicijal 1</title>
</head>
<body>
<DIV style="text-align:justify;width:250px">
<p>
<span style="float:left;color:red;font-size:100px;line-height:70px;
padding-top:2px;font-family: Times, serif, Georgia;">P</span>rimer
inicijala, tj. prvog slova u prvom redu koje visinom zahvata vise
redova. Velicina fonta je podesena na 100 piksela dok je visina
reda 70 piksela. Probana je visina reda od 80 piksela ali je tada
bilo previse beline.
</p>
251
Uvod u CSS
</DIV>
</body>
</html>
Slika 9.12. Prikaz u Internet Exploreru
9.4.
Identifikatori
Kod definisanja <div> elementa unutar HTML koda, može mu se dodeliti atribut id koji
ga jedinstveno definiše. Primer koda:
<div id="mojDiv">
Ovde ide sav potreban sadrzaj.
</div>
Identifikatorski atribut omogućuje da <div> elementu menjamo razna svojstva korišćenjem
stilova. Evo primera kako se gornji element može oblikovati:
<style type="text/css">
#mojDiv{definicije stilova koji oblikuju <div> element}
</style>
Važno je odmah na početku primetiti da se koristi znak # ispred imena id elementa.
Tom oznakom dajemo čitaču na znanje da koristi tačno definisane stilove za jedan <div>
element koji ima takav id.
Ako želimo koristiti iste stilove na više <div> elemenata, tada ne koristimo atribut id već
class. U stilovima onda definišemo tzv. klase koje započinju znakom . (tačka).
Pomoću ovog selektora možete pridodati različite stilove istoj vrsti HTML elementa.
Klase (ali ne id-ovi) mogu da se primene na nivou teksta. Ako želimo da obojimo tekst u
252
Multimedija
crvenu boju, a samo par reči u plavu boju, možemo kreirati klase, nazovimo ih .redtext
i .bluetext.
<html>
<head>
<style type="text/css">
.redtext,.bluetext {
font-family: Arial;
}
.redText {
color : red
}
.blueText {
color : blue
}
</style>
</head>
<body>
<div class="redText">
Tekst ove stranice je crven <span class="blueText"> izuzev
dela</span> koji je plav.
</div>
</body>
</html>
Iz listinga se vidi da umesto "pakovanja" teksta koji želimo da obojimo u plavu boju u
tagove <div>...</div>, koristimo tagove <span>...</span>.
Slika 9.13. Prikaz u Internet Exploreru
Uvod u CSS
9.5.
253
Linkovi
Suština HTML-a je to što je HT (HyperText) hipertekstualan dokument. Linkovi (veze)
dodati na reči, fraze ili slike mogu se klikom miša aktivirati i prebaciti vas na neko drugo
mesto. Ta druga mesta se nazivaju ankeri (kotve, sidra; engleski anchors). Baš kao što se
brod ukotvljuje, tako se i ovde ukotvljujete na nekom mestu u okviru mora World Wide
Web.
Svaka stranica ima bar jedan anker. Podrazumevani anker je upravo vrh stranice, ali
možete dodati još ankera na bilo koji deo stranice na koji želite da omogućite skok.
<a href="http://www.xxxxxx.com/index.htm">Ovo je link na home page</a>
Kao što znate, linkovi na stranici se vizuelno prikazuju drugačije od okolnog teksta. Podrazumevana prezentacija hipertekst linkova u HTML-u ima tri različita stanja.
Naravno, sa dizajnerske tačke gledišta nismo zadovoljni podrazumevanim izgledom linkova. Podvučeni tekst je možda praktičan, ali deluje nekako ružno. Ključni zahtev koji
treba ostvariti je da linkovi izgledaju drugačije od okolnog teksta kako bi označavali nešto
posebno. Kontekst je takođe važan faktor. Neki tekst je očigledno meni izbora bez obzira
da li je podvučen ili ne. Njegova istaknutost i položaj na stranici i činjenica da vas reči
pozivaju da idete negde daju jasno značenje njegove funkcije.
Slično, kada reč ili fraza unutar bloka teksta izgleda drugačije, može se smatrati da ima
posebno značenje. Naravno, ponovo je kontekst taj koji daje konačno značenje a za to je
potrebno da i druge slične reči ili fraze imaju isti konzistentan izgled. Ovo ne funkcioniše
ako svaki link ima drugačiju boju.
CSS omogućava da se poigrate sa izgledom linkova. Linkovi ne moraju biti podvučeni, ne
moraju biti plavi. Sve što treba da uradimo je da postavimo definiciju za a - anker.
a:link { color: #696; text-decoration: none }
Pošto naša stranica ima drugačiju kolornu šemu od podrazumevane (crno-belo), boje
linkova se mogu promeniti u neke druge koje nisu podrazumevane blue/purple.
text-decoration:none
Ovime se oslobađamo podvlačenja. Ako želite da posećeni (visited) link bude druge boje,
to radite sa kodom:
a:visited { color: #699; text-decoration: none }
CSS omogućava i dodatno stanje koje se naziva hover. To stanje nastaje kada se pokazivačem miša prelazi preko teksta i tekst menja boju čime daje jasan signal da se radi o
hipertekstualnom linku.
a:hover { color: #c93; text-decoration: underline }
Tradicionalno podvlačenje je ponovo na sceni ako to želite, ali samo privremeno dok je
pokazivač iznad teksta.
254
Multimedija
Aktivno (active) stanje linka je ono što vidite kada kliknete mišem na link. Obično se
tada menja boja a neki čitači još stavljaju okvir oko teksta linka.
Da bi postavili stilove za linkove koji se primenjuju na celu stranicu, treba unutar definicija
stilova u zaglavlju stranice da stavite nešto slično niže navedenom kodu.
a:link { color: #696; text-decoration: none; background-color:
transparent }
a:visited { color: #699; text-decoration: none; background-color:
transparent }
a:hover { color: #c93; text-decoration: underline; background-color:
transparent }
a:active { color: #900; text-decoration: underline; background-color:
transparent }
Ovde je važan redosled definicija stilova. Obično, redosled nema uticaj u CSS definicijama
ali ovde je važno da a:hover i a:active definicije budu poslednje ili neće raditi.
9.6.
CSS dokument
Detaljnije ćemo se baviti definisanjem stilova Web strane, korišćenjem posebnog CSS
dokumenta.
CSS dokument je tekstualna datoteka sa ekstenzijom .css koja sadrži niz CSS pravila.
Dodavanje <link> taga u <head> sekciju Web strane, omogućava formatiranje te strane
na način definisan u CSS dokumentu.
U našem primeru, CSS dokument se zove HorNav.css. Njime definišemo navigacionu
traku stranice sajta. Jedna ili više HTML strana, može biti povezana sa istim CSS dokumentom. Time postižemo da promena, načinjena u CSS dokumentu, bude vidljiva na svim
stranama, koje za svoje formatiranje koriste taj CSS dokument. Ako je potrebno promeniti
boju pozadine, na primer na 50 strana, CSS stil u kome je definisana boja pozadine i koji
je povezan sa tim stranama, će nas spasiti od menjanja svih 50 Web strana.
Listing CSS dokumenta HorNav.css:
#navhorizontal {
MARGIN-TOP: 0px; FLOAT: left; MARGIN-BOTTOM: 0px; MARGIN-LEFT:
0px; WIDTH: 740px; LIST-STYLE-TYPE: none; BACKGROUND-COLOR: #b3200c
}
#navhorizontal UL {
MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 0px; MARGIN-LEFT:
0px; LIST-STYLE-TYPE: none
}
#navhorizontal LI {
PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP:
0px; TEXT-ALIGN: right
}
255
Uvod u CSS
#navhorizontal UL LI A {
PADDING-RIGHT: 21px; DISPLAY: block; PADDING-LEFT: 21px; FONT-WEIGHT:
normal; FONT-SIZE: 0.8em; PADDING-BOTTOM: 8px; BORDER-LEFT:
#fff 1px solid; COLOR: #ecf9ff; LINE-HEIGHT: 2.5em; MARGIN-RIGHT: 0px;
PADDING-TOP: 8px; BACKGROUND-COLOR: #b3200c; TEXT-DECORATION: none
}
#navhorizontal LI A:hover {
COLOR: #ecf9ff; BACKGROUND-COLOR: #e67e1f
}
#navhorizontal UL LI .selected {
COLOR: #ecf9ff; BACKGROUND-COLOR: #e67e1f
}
Slika 9.14. Prikaz u Internet Exploreru
Listing HTML stranice koja koristi CSS dokument HorNav.css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Moja kompnija</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<LINK href="HorNav.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.6000.16544" name=GENERATOR></HEAD>
<BODY>
<DIV id=navhorizontal>
<UL>
<LI><A href="kontakt.htm">Kontakt </A></LI>
<LI><A href="reference.htm">Reference </A></LI>
256
Multimedija
<LI><A href="projekti.htm">Projekti </A></LI>
<LI><A href="usluge.htm">Usluge </A></LI>
<LI><A href="ofirmi.htm">O kompaniji </A></LI>
<LI><A class=selected href="index.htm">Mati\v cna </A></LI>
</UL>
</DIV><!-- END horizontal NAV-->
</BODY>
</HTML>
9.7.
Osvrt na klase, nasleđivanje, kaskade, ...
Koncept CSS stilova sličan je stilovima koji se koriste u Wordu ili DTP programima. Sami
po sebi, stilovi ne znače ništa - radi se o skupu pravila koji moramo najpre da povežemo sa
elementom. Povezivanje se sastoji od selektora (imena elementa) i pravila koje navodimo
unutar vitičastih zagrada i razdavajamo znakom tačka-zarez.
Važni detalji ovog koncepta su klase i nasleđivanje. Iako zvuči previše programerski, radi
se o principima od suštinskog značaja za efikasnu primenu stilova, pa ćemo ih podrobno
opisati.
Pretpostavimo da na Web stranicama neke delove teksta želimo da ispišemo na žutoj
pozadini, tako da budu posebno istaknuti. U datoteku stilovi.css unećemo definiciju
.istaknuto {background-color: yellow;}. Pasus koji započnemo sa sledećom konstatacijom <p class="istaknuto"> biće ispisan na žutoj pozadini. Sva ostala svojstva
koja smo definisali ostaće netaknuta, menja se samo boja pozadine.
Slika 9.15. Primer višestrukog korišćenja klase stila
Pogodnost je u tome što klasu koju smo upravo definisali mogu da koriste i drugi elementi,
baš kao što je prikazano u primeru na slici. Klase lako postaju stilovi karaktera – ukoliko
257
Uvod u CSS
želimo da samo jedan deo teksta unutar pasusa istaknemo, stavićemo ga unutar oznaka
<span class="istaknuto"> i </span>. Alternativa za klase je upotreba id atributa, sa
sličnim efektom.
HTML dokumenti imaju implicitnu strukturu. Obavezno je prisustvo elementa <html>
unutar koga se nalaze elementi <head> i <body>. Elementi <head> i <body> mogu da
sadrže elemente <title> i <p>, respektivno, ali to nije obavezno.
Kako će Web čitač protumačiti pravila koja smo definisali? Svi pasusi u navedenom primeru nalaze se unutar elementa <body> i svi nasleđuju njegove atribute koje smo zadali u
stilu. Pasus koji se ne nalazi unutar tagova, biće centriran i ispisan fontom Georgia, veličine dvanaest tačaka. Pasus označen tagom <p> nasleđuje atribute elementa <body>, ali
se ispisuje crvenom bojom, u skladu sa sopstvenim stilom. Kako to da se prethodni pasus
ispisao crnom bojom, iako ona nigde nije navedena? Neki atributi se podrazumevaju, ako
ih nismo zadali. Na mnoge default parametre možemo da utičemo u podešavanjima Web
čitača i tako ostvarimo kontrolu nad onim svojstvima koja nisu eksplicitno definisana na
Web stranicama. Podrazumevana boja ispisa teksta je crna i nju će čitač automatski
dodeliti elementu <body>, ako to dizajner ne promeni.
Slika 9.16. Stablo elemenata
Element <b> nasleđuje atribute elementa <p>, pa će deo teksta u drugom pasusu biti
ispisan bold varijantom fonta. Kada bi u definiciji tekućih stilova postojalo i sledeće pravilo b {color: yellow;}, bilo koji tekst koji se nalazi unutar tagova <b> i </b> bio bi
ispisan žutom bojom. Atributi se, dakle, nasleđuju, ali svaka lokalna promena određenog
atributa poništava dejstvo nasleđivanja. Ovde možemo uspostaviti analogiju sa objektima na matičnim stranama u nekom od DTP programa. Svojstva takvih objekata važe
i na stranicama dokumenta, ali ukoliko promenimo boju objekta na stranici dokumenta,
izmene boje na matičnoj strani više se neće odražavati na taj objekat.
Kaskadni stilovi su zasnovani upravo na upotrebi različitih pravila, pri čemu elementi neka
pravila nasleđuju, a druga poništavaju novim pravilom. Radi se o sistemu po kome je
moguće utvrditi koja se pravila primenjuju u dokumentu koji sadrži mnoštvo stilova. Na
primer, pravilo za element <p> koji koristi atribut id ima prioritet nad klasom, a klasa ima
prioritet nad samim elementom <p>. Lokalni, inline stilovi su "stariji" ili "jači" od stilova
dokumenta ili eksternih stilova.
Što je pravilo specifičnije, njegova snaga je veća. Drugim rečima, prioritet ima ono pravilo
koje je "bliže" tagu. Ukoliko želimo da većem broju elemenata dodelimo ista pravila,
258
Multimedija
navešćemo ih razdvojene zarezima. Navođenje elemenata bez zareza ukazuje na kontekstualne selektore. Na primer, p strong {color: green;} označava da će element
<strong> unutar elementa <p> biti ispisan zelenom bojom. Ako se element <strong>
nađe, na primer, unutar elementa <h1>, boja ne mora biti zelena, već je određena nasleđivanjem.
Vratimo se tipografskim parametrima koja nam omogućavaju stilovi. Neki od njih zahtevaju određenu meru, pa se najčešće koriste oznake pt (tipografska tačka), px (piksel), in
(inč), pc (pajk), cm, mm, em (označava em kvadrat) itd. Na primer, font-size: 12pt
zadaje veličinu slova, a line-height: 2 definiše dvostruki prored. Moguće je napisati i
line-height: 14pt i time zadati apsolutnu meru proreda. Kada je u pitanju poravnavanje teksta, na raspolaganju nam je pravilo text-align i njegovi atributi left (podrazumevani), right, center i justified.
Iako se na Web stranama može koristiti obostrano poravnati tekst, još uvek smo daleko
od pogodnosti koje nam pružaju programi za prelom stranica. Pošto nema automatske
hifenacije, poravnanje se postiže promenom razmaka između reči, što često daje neprihvatljive rezultate. Obostrano poravnanje ima smisla samo ako su redovi dovoljno široki,
u protivnom ga treba izbegavati.
Programi za Web ne podržavaju kerning, a u mnoge Web fontove kerning nije ugrađen, što
može da stvori probleme sa estetikom stranica na kojima se koriste krupna slova. Atribut
letter-spacing može da bude od velike pomoći, jer se njime zadaje razmak između
slova. Ako u nekoj klasi definišemo negativan razmak i primenimo ga na izabrane parove
slova, postići ćemo efekat kerning-a. Atribut text-indent određuje uvlačenje prvog reda
pasusa i eliminiše potrebu za postavljanjem nevidljivih piksela.
Kaskadni stilovi na Web stranama predstavljaju veoma moćnu tehnologiju kojom se može
upravljati i ugrađenim, do skora potpuno nedodirljivim elementima HTML jezika. U tipografskom pogledu, mnoge parametre formatiranja možemo da kontrolišemo isključivo
stilovima. Njihovom pravilnom i preciznom upotrebom tekst na prezentacijama može da
se oblikuje tako da bude usklađen sa karakteristikama ekrana. To obuhvata izbor fonta,
proreda, poravnanja, dužine redova i mnogih drugih elemenata preloma koji imaju isti
značaj i funkciju kao i u štamparstvu.
Dizajn Web stranica otvara mnoge teme koje nismo obradili u ovom tekstu. Tu je kontraverzna problematika veličine slova, koja se različito prikazuju u Windows i Macintosh
okruženjima, kao i večita dilema treba li dozvoliti korisnicima da menjaju veličinu teksta. Kada su u pitanju tehnike dizajna, još uvek se intenzivno koriste tabele, iako CSS
omogućava precizno raspoređivanje tekstualnih i grafičkih objekata zadavanjem njihovih
apsolutnih ili relativnih pozicija, prilagođavanje širine stranice rezoluciji prozora čitača itd.
Glava 10
Uvod u JavaScript
JavaScript je programski jezik koji se interpretira, sa objektno orijentisanim mogućnostima. Po sintaksi, jezgro jezika JavaScript slično je jezicima C, C++ i Java, s programskim konstrukcijama kao što su naredba if, petlja while i operator &&. Međutim, ova
sličnost se završava sa sintaksom. JavaScript je slabo tipiziran jezik, što znači da se za
promenljive ne mora definisati tip. Objekti u JavaScriptu preslikavaju (mapiraju) imena
svojstava u proizvoljne vrednosti svojstava. Zbog toga su sličniji heš tabelama ili asocijativnim nizovima (u Perlu), nego strukturama (u C-u) ili objektima (u jezicima C++
ili Java). Mehanizam objektno orijentisanog nasleđivanja u JavaScriptu zasnovan je na
prototipovima, kao u malo poznatom jeziku Self. On je potpuno različit od nasleđivanja
u jezicima C++ i Java. Kao i Perl, JavaScript je jezik koji se interpretira i nadahnut je
Perlom u mnogim oblastima, kakve su regularni izrazi i mogućnosti rada sa nizovima.
Jezgro (core) jezika JavaScript podržava brojeve, znakovne nizove (strings) i logičke
vrednosti kao osnovne tipove podataka. Osim toga, ono ima ugrađenu podršku za objekte kao što su nizovi (arrays), datumi i regularni izrazi.
JavaScript se najčešće koristi u čitačima Weba (Web browsers), pa se jezgro opšte namene
proširuje objektima koji omogućavaju skriptovima interakciju sa korisnikom, upravljanje
čitačem Weba i izmene sadržaja dokumenta koji se pojavljuje unutar prozora čitača. Ova
ugrađena (embedded) verzija JavaScripta izvršava skriptove koji su ugrađeni u HTML
Web stranice. To se obično zove klijentski (client-side) JavaScript, da bi se naglasilo
kako se skriptovi izvršavaju na klijentskom računaru, a ne na Web serveru.
Jezgro jezika JavaScript i njegovi ugrađeni tipovi predmet su međunarodnih standarda, i
veoma je dobra kompatibilnost različitih implementacija. Neki delovi programa klijentskog
JavaScripta zvanično su standardizovani, neki su de facto standardi, a ostali predstavljaju
proširenja koja zavise od čitača. Kompatibilnost između različitih čitača značajna je za
programere koji koriste klijentski JavaScript.
Jedna od najčešćih zabluda o JavaScriptu jeste da je to pojednostavljena verzija Jave,
programskog jezika kompanije Sun Microsystems. Osim delimične sličnosti u sintaksi i
činjenice da i Java i JavaScript daju sadržaj koji može da se izvršava u čitačima Weba,
između ova dva jezika ne postoji nikakva veza. Sličnost naziva je čisto marketinški potez
260
Multimedija
kompanija Netscape i Sun (ovaj jezik je prvobitno nazvan LiveScript i ime mu je u poslednjem trenutku promenjeno u JavaScript). Međutim, JavaScript može da skriptuje Javu.
Pošto se JavaScript interpretira umesto da se prevodi, često se smatra da je to jezik za
skriptovanje, a ne pravi programski jezik. Time se nagoveštava da su jezici za skriptovanje
jednostavniji i da su to programski jezici za osobe koje nisu programeri. Činjenica da je
JavaScript manje strog po pitanju tipova podataka čini ga nešto pristupačnijim neiskusnim programerima. Osim toga, mnogi Web dizajneri mogu da koriste JavaScript za brzo
rešavanje manjih programerskih zadataka.
Međutim, ispod svoje tanke glazure jednostavnosti, JavaScript je programski jezik sa potpunim skupom mogućnosti, složen kao i bilo koji drugi, a od nekih i složeniji. Programeri
koji pokušaju da iskoriste JavaScript za rešavanje netrivijalnih zadataka često otkrivaju
da je taj postupak težak, ukoliko dobro ne razumeju ovaj jezik.
Kao i sve nove tehnologije, JavaScript se brzo razvijao u početku, što je rezultiralo brojnim verzijama. Međutim, vremenom se jezik ustalio i standardizovalo ga je udruženje
European Computer Manufacturer’s Association (ECMA). Zvanično ime (naziv) jezika
je ECMAScript, prema standardu ECMA-262. Međutim, ovaj zbunjujući naziv koristi se
samo pri eksplicitnom pozivanju na standard. Naziv "JavaScript" se tehnički odnosi samo
na implementacije ovog jezika, koje su dale kompanije Netscape i Mozilla Foundation. U
praksi, svi taj jezik zovu JavaScript.
Osim specifikacije ECMA-262, koja standardizuje jezgro jezika JavaScript, organizacija
ECMA objavila je još jedan standard koji se, takođe, odnosi na JavaScript. Specifikacija ECMA-357 standardizuje proširenje JavaScripta, poznato kao E4X ili ECMAScript
za XML. To proširenje dodaje ovom jeziku tip podataka XML, zajedno sa operatorima i
naredbama za rad sa vrednostima tipa XML.
Razmatranje predloga za četvrto izdanje specifikacije ECMA-262, kojom bi se standardizovao JavaScript 2.0, odlaže se godinama. U tim predlozima je potpuna revizija jezika,
uključujući strogo tipiziranje i pravo nasleđivanje, zasnovano na klasama.
Kada je interpreter JavaScripta umetnut u čitač Weba, rezultat je klijentski JavaScript.
To je, do sada, najčešća varijanta JavaScripta – kada se govori o JavaScriptu, većina ljudi
misli na klijentski JavaScript. U klijentskom JavaScriptu kombinuju se mogućnosti interpretera JavaScripta da izvršava skriptove sa objektnim modelom dokumenta (Document
Object Model – DOM), definisanim u čitaču Weba. Dokumenti mogu da sadrže skriptove
napisane na JavaScriptu, a ti skriptovi mogu da koriste DOM za izmenu dokumenta ili
upravljanje čitačem Weba koji prikazuje taj dokument. Drugim rečima, možemo kazati da
klijentski JavaScript dodaje ponašanje statičkim sadržajima Weba. Klijentski JavaScript
čini srž tehnika koje služe za razvoj Web aplikacija, kao što je DHTML i arhitektura kao
što je Ajax.
JavaScript je programski jezik opšte namene i ne koristi se samo u čitačima Weba.
JavaScript može da bude umetnut u bilo koju aplikaciju i da obezbedi izvršavanje skriptova. U stvari, od prvih dana su Netscapeovi Web serveri uključivali interpreter JavaScripta, tako da su se serverski skriptovi mogli pisati na JavaScriptu. Slično, Microsoft
koristi svoj interpreter za JScript u svom IIS Web serveru i u svom proizvodu Windows
Uvod u JavaScript
261
Scripting Host, pored toga što ga koristi u Internet Exploreru. Adobe koristi jezik izveden
iz JavaScripta, za izvršavanje skriptova u programu Flash Player. Kompanija Sun dodaje
interpeter za JavaScript prilikom distribuiranja svoje Jave 6.0, tako da se mogućnosti
izvršavanja skriptova lako mogu dodati svakoj aplikaciji napisanoj na Javi.
I Netscape i Microsoft učinili su svoje interpretere za JavaScript dostupnim kompanijama
i programerima koji hoće da ih uključe u svoje aplikacije. Netscapeov interpreter je objavljen u vidu otvorenog koda i sada je dostupan preko organizacije Mozilla (Internet adresa
http://www.mozilla.org/js/).
10.1.
Programiranje u JavaScript-u
Pre nego što počnete da programirate u jeziku JavaScript, potrebno je da znate kako
se izvršava jedan takav program. Svaki JavaScript program napravljen za izvršavanje u
Web čitaču mora da bude uključen u Web dokument. U većini slučajeva to će biti HTML
ili XHTML dokument, ali može da bude XML, SVG ili nešto sa čime se do sada nismo
susreli. Ovde ćemo razmatrati uključivanje u HTML, zato što 99% ljudi koristi JavaScript
u toj kombinaciji.
Da bi uključili JavaScript kôd u HTML stranicu, morali bi da uključimo tag/marker pod
nazivom <script> unutar zaglavlja (head) dokumenta. Dati skript ne mora da bude
JavaScript, zato moramo čitaču da saopštimo koji tip skripta uključujemo dodavanjem
atributa type sa vrednošću text/javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Pozdrav</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<script type="text/javascript">
</script>
</head>
</html>
Možete da stavite onoliko JavaScript koda koliko želite unutar taga <script> – čitač će
ga izvršiti čim bude učitan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Pozdrav</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<script type="text/javascript">
262
Multimedija
alert("Zdravo svima!");
</script>
</head>
</html>
Mada je dosta zgodno i lako direktno uključiti JavaScript kôd u HTML kôd, preporučuje
se da uključujete JavaScript kôd iz posebnog spoljašnjeg fajla. Ovaj pristup ima više
prednosti:
• Zadržava odvojenost sadržaja i ponašanja (HTML i JavaScript).
• Olakšava održavanje Web stranica.
• Omogućava da lakše višestruko koristite iste JavaScript programe na različitim stranicama sajta.
Da biste naveli/referencirali spoljašnji JavaScript fajl, potrebno je da koristite atribut src
unutar <script> taga:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Pozdrav</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<script type="text/javascript" src="primer.js"></script>
</head>
</html>
Slično atributu src kod uključivanja slika u HTML, možete da referencirate fajl koji se
nalazi bilo gde na vašem serveru ili bilo kom serveru:
<script type="text/javascript"
src="http://www.NekiServer.com/script.js"></script>
Ukoliko želite možete na stranicu uključiti više spoljašnjih skriptova:
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript" src="animacija.js"></script>
<script type="text/javascript" src="example.js"></script>
U programiranju se koristi princip raščlanjavanja problema na manje probleme koje računar
ponaosob može da razume i reši u okviru jednog koraka. Svaki takav mali korak koji
preduzmete u programu naziva se naredba i saopštava čitaču da izvrši neku radnju.
Slažući nizove tih radnji pravimo program. Naredbe su za programe ono što su rečenice
za knjige.
U JavaScriptu svaka naredba trebalo bi da bude odvojena znakom za novi red ili tačkazapetom. Prema tome, dve naredbe se mogu napisati na sledeći način:
Uvod u JavaScript
263
Naredba 1
Naredba 2
ili na sledeći način:
Naredba 1;Naredba 2;
Komentar je napomena u programskom kodu koju će čitač potpuno ignorisati. U principu,
komentari objašnjavaju programski kôd čime omogućavaju lakše ažuriranje koda u nekom
budućem vremenu od strane autora programa ili nekoga ko bude održavao program tokom
eksploatacije. JavaScript podržava dva tipa komentara. Prvi tip je jednoredni komentar,
koji počinje sa dve kose crte (//) i proteže se do kraja reda:
Naredba 1; // Jednoredni komentar
Naredba 2;
Kada prilikom interpretiranja koda čitač naiđe na dve kose crte, on ignoriše sve što se
nalazi posle toga u tom redu i nastavlja da čita dalje sledeći red programa na uobičajen.
Ukoliko se javi potreba da napišete veći komentar, možete ga smestiti u više redova tako
što ćete ga staviti između sledećih oznaka /* i */:
/* Ovo je moj prvi JavaScript program. Oprostite ako ima gresaka.
Pronadjene greske mozete mi prijaviti na mail [email protected] */
Naredba 1; // Prva naredba
Naredba 2;
Možete da napišete program kod koga je unapred definisan svaki podatak koji on koristi,
što se može uporediti sa upravljanjem ski liftom – nemate mogućnost promene odredišta,
stalno se vozite istom stazom. Ukoliko želite da napišete program koji će komunicirati
sa korisnikom i prilagođavati se različitim situacijama, morate imati mogućnost rada sa
vrednostima koje ne poznajete.
Promenljiva/varijabla omogućava da se nekom podatku dodeli naziv, zatim se taj podatak
u programu može referencirati preko tog naziva. Na taj način može se koristiti neki podatak, a da se unapred ne zna njegova stvarna vrednost, ono čega treba da se seća programer
je naziv promenljive.
U JavaScriptu promenljiva se kreira upotrebom službene reči var i specificiranjem naziva
koji želimo da koristimo:
var boja;
Prethodni red koda se naziva deklarisanje promenljive.
Nakon što je deklarisana, promenljiva boja je spremna da joj se dodeli podatak. To se
radi upotrebom operatora dodeljivanja (=), tako što se naziv promenljive postavlja sa
leve strane tog operatora, a podatak sa desne:
var boja;
boja = "plavo";
264
Multimedija
Cela procedura se može skratiti objedinjavanjem deklarisanja i dodeljivanja u jednu naredbu:
var boja = "plavo";
U praksi, to je ono što radi većina JavaScript programera – deklariše promenljivu upravo
onda kada se toj promenljivoj prvi put dodeljuje neki podatak.
Iako niste prethodno referencirali/deklarisali konkretan naziv promenljive, možete joj dodeliti vrednost bez upotrebe var službene reči za deklarisanje:
boja = "plavo";
JavaScript interpreter će detektovati da ta promenljiva nije prethodno deklarisana i automatski će je deklarisati prilikom dodeljivanja vrednosti.
Službena reč var treba da se koristi samo prilikom deklarisanja promenljive. Ukoliko kasnije
želite da promenite vrednost promenljive, to radite bez var:
var boja = "plavo";
boja = "crveno";
Za korišćenje vrednosti promenljive dovoljno je navesti naziv promenljive. Svako pojavljivanje naziva promenljive biće automatski zamenjeno sa njenom vrednošću prilikom
izvršavanja programa:
var boja = "plavo";
alert(boja);
Druga naredba u prethodnom segmentu koda saopštava čitaču da prikaže okvir za upozorenje sa obezbeđenom vrednošću, koja će u ovom slučaju biti vrednost promenljive boja.
Nazivi promenljivih mogu se obrazovati skoro iz bilo koje kombinacije slova i brojeva,
uz ograničenje da znaci razmaka/belina nisu dozvoljeni. Većina znakova interpunkcije i
simboli imaju specijalno značenje u okviru programa JavaScript, stoga su znak za dolar
($) i podvlaka (_) jedini ne-numerički znaci/karakteri dozvoljeni za korišćenje u nazivima
promenljivih. Nazivi promenljivih su osetljivi na tip veličine slova (Case sensitive), stoga
nazivi boja, Boja i BOJA referenciraju unikatne/različite promenljive koje mogu da postoje
istovremeno.
Mnogi programski jezici karakteristični su po tome što koriste strogo tipizirane promenljive. Kod njih morate programu prilikom deklarisanja promenljive da saopštite koji tip
podatka će promenljiva sadržati i ne može se promeniti tip promenljive kada je jednom
kreirana.
Međutim, JavaScript je slabo tipiziran jezik – skript jezik koji ne vodi računa šta promenljive sadrže. Promenljiva, na primer, u početku može čuvati broj, zatim može sadržaj
promeniti u znak, reč ili nešto drugo.
Uprkos činjenici da ne morate u startu da deklarišete tip podatka, bitno je da znate koji
tip podatka promenljiva može da čuva kako biste mogli da ih korektno koristite u okviru
programa. U JavaScript programima možete da radite sa brojevima, stringovima (niskama
karaktera), logičkim vrednostima (Booleans), nizovima i objektima.
Uvod u JavaScript
10.1.1.
265
Brojevi
Brojevi se u JavaScriptu pojavljuju u dva oblika, kao celi i decimalni brojevi. U svetu
programiranja celi brojevi se terminološki označavaju kao integer ili int, a decimalni kao
brojevi sa pokretnom tačkom/zapetom (floating point number) ili float.
Da biste kreirali promenljivu koja će čuvati numerički podatak treba da nazivu promenljive
dodelite broj:
var ceobroj = 3;
var decimalni = 3.14159265;
Brojevi sa pokretnom tačkom mogu imati proizvoljan broj decimalnih mesta:
var kratakDecimalni = 3.1;
var dugDecimalni = 3.14159265358979323846264338327950288419716939937;
I brojevi sa pokretnom tačkom i celi brojevi mogu imati negativne vrednosti ako se stavi
znak minusa ispred njih:
var negativniInt = -3;
var negativniFloat = -3.14159265;
10.2.
Operatori
U ovom odeljku biće predstavljeni svi operatori koje JavaScript podžava a koji su organizovani po sledećim kategorijama:
• aritmetički operatori,
• logički operatori,
• operatori poređenja,
• operatori stringova,
• operatori za manipulaciju bitovima,
• operatori dodele,
• uslovni operatori.
Započnimo razjašnjavanje terminologije. Operator se koristi za transformisanje jedne, ili
više vrednosti u jednu rezultujuću vrednost. Vrednosti na koje se operator primenjuje nazivaju se operandi. Kombinacija operatora i njegovih operanada poznata je kao izraz. Izrazi
se izračunavaju da bi se odredila sama vrednost izraza, koja predstavlja rezultat primene
operatora nad operandima. Neki operatori, kao, na primer, operator (dodele) =, kao
ishod daju vrednost koja se dodeljuje promenljivoj. Drugi proizvode vrednost koja se može
koristiti u drugim izrazima.
Za neke operatore, kao što je * operator množenja, redosled operanada nije važan - na
266
Multimedija
primer, x * y = y * x predstavlja tačan izraz za sve cele i realne brojeve. Drugi operatori, kao što je + (konkatenacija stringova) operator, daju različite rezultate za različite
redoslede svojih operanada. Na primer, .ab.+.cd. nije isto što i .cd.+.ab..
Unarni operatori se koriste samo sa jednim operandom. Na primer, unarni operator ! se
primenjuje na logičku vrednost i vraća logičku not vrednost te vrednosti. Većina JavaScript
operatora predstavlja binarne operatore, koji imaju po dva operanda. Jedan primer binarnog operatora je operator * (množenja), koji se koristi za izračunavanje proizvoda dva
broja. Na primer, dati izraz 8 * 6 se izračunava kao 48 primenom * operatora nad operandima 8 i 6.
Do sada smo se bavili samo prostim izrazima. Složeniji izrazi mogu da se naprave kombinovanjem prostih unarnih i binarnih izraza. Da biste izračunali složene izraze, morate da ih
raščlanite na njihove komponente unarnih i binarnih izraza, primenjujući pravila redosleda,
ili prioriteta (na primer, izračunavanjem grupa pre njihovog sabiranja ili množenja).
10.2.1.
Aritmetički operatori
Aritmetičke operatore svakodnevno koristimo za izvršavanje jednostavnih matematičkih
izračunavanja. Matematički operatori koje podržava JavaScript se nalaze ispod:
• (+) "−→ sabiranje;
• (-) "−→ oduzimanje ili unarna negacija;
• (*) "−→ množenje;
• (/) "−→ deljenje;
• (%) "−→ moduo;
• (++) "−→ inkrementiraj i vrati vrednost (ili vrati vrednost, pa inkrementiraj);
• (--) "−→ dekrementiraj i vrati vrednost (ili vrati vrednost, pa dekrementiraj).
Operator % (moduo) izračunava ostatak deljenja dva cela broja. Na primer, za dati izraz
razultat je 17 % 3 = 2, zato što je 17/3 = 5 sa ostatkom 2.
10.2.2.
Logički operatori
Logički operatori se koriste za izvođenje logičkih (Boolean) operacija nad logičkim operandima, kao što su logičko I, logičko ILI i logička negacija. Logički operatori koje podržava
JavaScript prikazani su ispod.
• (&&) "−→ logičko I;
• (.) "−→ logičko ILI;
• (!) "−→ logička negacija.
Uvod u JavaScript
10.2.3.
267
Operatori poređenja
Operatori poređenja se koriste za određivanje kada su dve vrednosti jednake, ili za poređenje numeričkih vrednosti, da bi se ustanovilo koja je vrednost veća od one druge.
Operatori poređenja koje podržava JavaScript prikazani su ispod.
• (==) "−→ jednako;
• (===) "−→ strogo jednako;
• (!=) "−→ nije jednako;
• (!==) "−→ strogo nije jednako;
• (<) "−→ manje;
• (<=) "−→ manje ili jednako;
• (>) "−→ veće;
• (>=) "−→ veće ili jednako.
Operatori jednako (==) i nije jednako (!=) vrše konverziju tipa pre provere jednakosti.
Na primer, .5. == 5 se izračunava kao true. Operatori strogo jednako (===) i strogo
nije jednako (!==) ne vrše konverziju tipa pre provere jednakosti. Na primer, .5. === 5
se izračunava kao false, a .5. !== 5 vraća true. Operatori strogo jednako (===) i strogo
nije jednako (!==) su deo ECMAScript 1 standarda. Oni su uvedeni u Navigatoru samo
za JavaScript 1.3 i podržali su ih Navigator 4.06 i kasniji. Takođe su ih podržali Internet
Explorer 4 i kasniji.
10.2.4.
String operatori
String operatori se koriste za izvođenje operacija nad stringovima. JavaScript trenutno
podržava samo operator string konkatenacije +. On se koristi za spajanje dva navedena
stringa nadovezivanjem. Na primer, .ab. + .cd. proizvodi .abcd..
10.2.5.
Operatori za manipulaciju bitovima
Operatori za manipulaciju bitovima sprovode operacije nad vrednošću predstavljenu bitovima, kao što su pomeranje bitova ulevo ili udesno. Operatori za manipulaciju bitovima
koje podržava JavaScript prikazani su ispod.
• (&) "−→ I;
• (|) "−→ ILI;
• (^) "−→ ekskluzivno ILI;
• (<<) "−→ pomeranje ulevo;
• (>>) "−→ pomeranje udesno sa čuvanjem znaka;
• (>>>) "−→ pomeranje udesno sa punjenjem mesta najveće težine nulama.
268
10.2.6.
Multimedija
Operatori dodele
Operatori dodele se koriste za ažuriranje vrednosti promenljive. Neki operatori dodele se
kombinuju sa drugim operatorima, da bi sproveli proračun nad vrednošću koja se nalazi u
promenljivoj i da, potom, ažuriraju promenljivu novom vrednošću. Operatori dodele koje
podržava JavaScript prikazani su ispod.
• (=) "−→ Postavlja promenljivu sa leve strane operatora = na vrednost izraza sa
njegove desne strane.
• (+=) "−→ Uvećava promenljivu sa leve strane operatora += za vrednost izraza sa
njegove desne strane. Kada se koristi sa stringovima vrednost sa desne strane se
nadovezuje na vrednost promenljive sa leve strane operatora +=.
• (-=) "−→ Umanjuje promenljivu sa leve strane operatora -= za vrednost izraza sa
njegove desne strane.
• (*=) "−→ Množi promenljivu sa leve strane operatora *= sa vrednošću izraza sa
njegove desne strane.
• (/=) "−→ Deli promenljivu sa leve strane operatora /= sa vrednošću izraza sa njegove
desne strane.
• (%=) "−→ Izdvaja moduo promenljive sa leve strane operatora %=, koristeći izraz sa
njegove desne strane.
• (<<=) "−→ Pomera ulevo promenljivu sa leve strane operatora <<=, upotrebljavajući
vrednost izraza sa njegove desne strane.
• (>>=) "−→ Sprovodi pomeranje udesno sa zadržavanjem znaka promenljive sa leve
strane operatora >>=, koristeći vrednost izraza sa njegove desne strane.
• (>>>=) "−→ Sprovodi pomeranje udesno sa punjenjavanjem mesta najveće težine
nulama promenljive sa leve strane operatora >>>=, koristeći vrednost izraza sa njegove desne strane.
• (&=) "−→ Sprovodi logičko I nad bitovima promenljive sa leve strane operatora &=,
koristeći vrednost izraza sa njegove desne strane.
• (=) "−→ Sprovodi logičko ILI nad bitovima promenljive sa leve strane operatora =,
koristeći vrednost izraza sa njegove desne strane.
• (^=) "−→ Sprovodi ekskluzivno ILI nad bitovima promenljive sa leve strane operatora ^=, koristeći vrednost izraza sa njegove desne strane.
Uvod u JavaScript
10.2.7.
269
Ternarni operator uslovnog izraza
JavaScript podržava operator uslovnog izraza ? :, koji se može naći i u Javi, C-u i C++u. Ovo je ternarni operator, budući da prihvata tri operanda – uslov koji treba izračunati
i dve alternativne vrednosti, od kojih treba vratiti samo jednu, u zavisnosti da li je uslov
ispunjen ili ne. Format za ovaj uslovni izraz je sledeći:
uslov ? vrednost1 : vrednost2
Uslov je izraz koji kao rezultat daje logičku vrednost – na primer, tačno, ili netačno. Ako
je uslov tačno, vrednost1 je rezultat ovog izraza. U suprotnom, rezultat je vrednost2.
Primer upotrebe ovog izraza je sledeći:
(x > y) ? 5 : 7
Ako je vrednost promenljive x veća od vrednosti koja se nalazi u promenljivoj y, rezultat
izraza je 5. Ako je vrednost x manja od vrednosti y ili su njih dve jednake, rezultat ovog
izraza je 7.
10.2.8.
Specijalni operatori
JavaScript podržava i brojne specijalne operatore, koji se ne uklapaju ni u jednu od kategorija operatora navedenih u prethodnim odeljcima:
• ZAREZ (,) OPERATOR - Ovaj operator izračunava dva izraza i vraća vrednost drugog. Razmotrite naredbu a = (5+6),(2*2). Oba izraza (5+6) i (2*2) se izračunavaju, a vrednost drugog izraza (4) se dodeljuje promenljivoj a.
• DELETE OPERATOR - koristi se za brisanje osobine nekog objekta ili elemenata niza do
navedenog indeksa. Na primer, delete myArray[5] briše šest elemenata myArray
niza. Od JavaScript verzije 1.2 delete operator uvek vraća undefined vrednost.
• NEW OPERATOR - koristi se za kreiranje nove instance nekog tipa objekta.
• TYPEOF OPERATOR - vraća string vrednost čiji je zadatak da identifikuje tip operanda. Trebalo bi razmotriti naredbu a = typeof 17. Vrednost dodeljena promenljivoj a je number. Pokušajte da upotrebite typeof sa različitim izrazima i da vidite
vrednosti koje ovaj operator vraća. Možete ga koristiti i sa objektima i funkcijama.
• VOID OPERATOR - ne vraća vrednost. On se, obično, koristi sa JavaScript protokolom da vrati URL koji nema vrednost.
10.3.
Kontrolne strukture i petlje
Vrste naredbi koje donose oduke i ponavljaju se u petlji u programiranju se nazivaju
kontrolne strukture. Važan deo komandne strukture je uslov. Svaki uslov je jedan logički
izraz koji dobija vrednost true ili false. JavaScript obezbeđuje nekoliko vrsta kontrolnih
struktura za različite programske situacije.
270
10.3.1.
Multimedija
Naredbe odlučivanja
Najjednostavnija odluka u programu jeste praćenje neke grane ili putanje programa ako
je ispunjen određen uslov. Formalna sintaksa za ovu konstrukciju je:
if (uslov) {
kôd koji se izvrsava ako je vrednost izraza true
}
Ako su umesto jedne grane potrebne dve ili više koje obrada treba da prati, koristi se
if.. else tj. if.. else if.. else konstrukcija. Formalna definicija if.. else je:
if (uslov) {
kôd koji se izvrsava ako je vrednost izraza uslov true
}
else {
kôd koji se izvrsava ako je vrednost izraza uslov false
}
Konstrukcija if.. else if.. else\verb je pogodna kada je potrebno pratiti nekoliko
izvršnih linija. Sintaksa:
if (uslov1) {
kôd koji se izvrsava ako je vrednost izraza uslov1 true
}
else if (uslov2) {
kôd koji se izvrsava ako je vrednost izraza uslov2 true
}
else {
kôd koji se izvrsava ako ni jedan od izraza uslov1 i uslov2
nema vrednsot true
}
Pod nekim okolnostima, odluka tipa true ili false nije dovoljna za obradu podataka u
skriptu. Svojstvo objekta ili vrednost promenljive mogu sadržavati bilo koju od nekoliko
vrednosti i potreban je poseban put izračunavanja za svaku od njih. U JavaScriptu postoji
kontrolna struktura koju koriste mnogi jezici. Na početku strukture se identifikuje o kom
izrazu se radi i svakoj putanji izvršavanja dodeljuje se oznaka koja odgovara određenoj
vrednosti. U pitanju je switch naredba.
switch(izraz) {
case oznaka1:
naredbe
break
case oznaka2:
naredbe
break
default:
Uvod u JavaScript
271
naredbe
}
Izraz može biti bilo koji znakovni niz ili numerička vrednost. Naredba default obezbeđuje
nastavak po putanji izvršavanja kada vrednost izraza ne odgovara ni jednoj oznaci naredbe
case.
Naredba break, koja služi za izlazak iz petlje, ovde ima značajnu ulogu. Naime, ako nije
navedeno break posle svake grupe naredbi u case granama, izvršiće se sve naredbe iz svake
case grane, bez obzira na to da li je nađena odgovarajuća oznaka.
10.3.2.
Programske petlje
Za neke JavaScript skriptove bitno je da mogu da kruže kroz svaki element niza ili svaku
stavku formulara/obrasca. Jedna od struktura JavaScripta koja dozvoljava ponavljanje
prolazaka jeste petlja for.
for (pocetniIzraz; uslov; korak) {
naredbe
}
Tri naredbe unutar zagrada (parametri petlje for) igraju ključnu ulogu. pocetniIzraz u
petlji for izvršava se samo jednom, prvi put kada se pokreće petlja. Najčešća primena
početnog izraza je dodela imena i početne vrednosti promenljivoj brojača petlje. Koristi
se naredba var koja i deklariše ime promenljive i dodeljuje joj početnu vrednost. Kada
je promenljiva brojača definisana u početnom izrazu, izraz uslov obično definiše do koje
vrednosti brojač petlje treba da ide pre nego što se kruženje završi. Poslednji izraz, korak,
izvršava se na kraju svakog izvršenja petlje nakon što su se pokrenule sve naredbe unutar
for-a. Obično je to povećavanje brojača petlje za jedan za svaki sledeći prolaz, tzv. inkrementiranje vrednosti.
Sledeći primer je skript koji ispisuje brojeve od 0 do 10, svaki u posebnom redu. Znači,
početna vrednost je 0, a krajnja, maksimalna, je 10. Inkrement iznosi 1. Dakle, sve dok
i ne dobije vrednost 10, skript ispisuje brojeve svaki put povećavajući brojač i za 1.
<html>
<body>
<script language="javascript">
for (var i=0; i<=10; i++) {
document.write("Broj " + i)
document.write("<br>")
}
</script>
</body>
</html>
Svaki od parametara for petlje je opcioni. Ponekad se vrednost brojača petlje kontroliše
na osnovu vrednosti koje se izvršavaju unutar tela petlje. Pogledajmo primer. Poslednji
parametar – inkrementacija vrednosti – je izostavljen.
272
Multimedija
<html>
<body>
<script language="javascript">
document.write("Parni brojevi u otvorenom intervalu od 1 do 10 su:");
for (var i=1; i<=10) {
if (i%2 == 0) {
document.write("Broj " + i+ "je paran!");
document.write("<br>");
i += 2;
}
else {
i++;
}
}
</script>
</body>
</html>
Petlja for nije jedina vrsta ponavljačke petlje u JavaScript-u. Druga naredba, while,
postavlja malo drugačiju petlju. While petlja pretpostavlja da će naredbe skripta doći u
stanje u kome se automatski izlazi iz petlje.
while (uslov) {
naredbe
}
Ova petlja izvodi akciju sve dok izraz uslov ne dobije vrednost false. JavaScript nudi još
jednu konstrukciju petlje zvanu do.. while. Formalna sintaksa za ovu konstrukciju je
sledeća:
do {
naredbe
}
while (uslov)
Razlika između while i do.. while petlje je ta što se u do.. while petlji naredbe
izvršavaju bar jednom pre nego što se uslov ispita, dok u petlji while to nije slučaj.
Break i continue
U neke konstrukcije petlje skript ulazi samo kada se ispuni određeni uslov usled čega više
nemaju potrebu da nastave kruženje kroz ostatak vrednosti u opsegu brojača petlje. Za
izlazak iz petlje koristi se naredba break. Ona govori JavaScriptu da izađe iz petlje for,
a izvršavanje skripta se nastavlja odmah iza te petlje (iza vitičaste zagrade koja zatvara
telo petlje).
for (var i=0; i< array.length; i++) {
Uvod u JavaScript
273
if (array[i]. property == wantedValue) {
naredbe;
break
}
}
Petlja for omogućava i da se preskoči izvršavanje naredbi unutar nje zbog samo jednog
uslova. Može da postoji neka vrednost brojača za koju nije poželjno da se naredbe izvrše.
Naredba continue primorava skript da, ako je uslov ispunjen, pređe na sledeći korak tj.
poveća vrednost brojača i nastavi petlju od te vrednosti.
for(var i=1; i <=20; i++){
if (i==13) {
continue;
naredbe
...
U slučaju ugnežđenih for petlji, naredba continue utiče na petlju for u čiji trenutni opseg
spada i konstrukcija if.
10.3.3.
Nizovi
Nizovi u JavaScriptu su jedna od najkorisnijih struktura podataka. Elementi niza su
numerisani, počevši od nule, i redni broj predstavlja indeks datog elementa. Da bi se
pristupilo nekom elementu niza, potrebno je znati njegovo ime i indeks. Pošto vrednosti
indeksa počinju nulom, broj elemenata niza (što je određeno svojstvom niza length), uvek
je za jedan veći od najvećeg indeksa niza. Elementi u nizovima JavaScripta mogu da
pripadaju bilo kom tipu podataka, uključujući i objekte.
Niz je smešten u promenljivoj tako da kada se pravi niz, promenljivoj se dodaje novi
objekat niza. Posebna ključna reč – new – prethodi pozivu funkcije za generisanje niza u
JavaScriptu, koja u memoriji obezbeđuje prostor za niz. Međutim, u JavaScriptu veličinu
niza moguće je promeniti bilo kad.
new mojNiz = new Array(duzina)
Popunjavanje niza vrši se operatorom dodele, prethodno se u uglastim (velikim) zagradama navodi indeks elementa.
mojNiz [0] = "tekst"
mojNiz [1] = "slika"
mojNiz [2] = "zvuk"
Postoji i kraći način formiranja niza. Umesto serije naredbi dodele, podaci se predaju kao
parametri konstruktoru Array():
mojNiz = new Array ("tekst", "slika", "zvuk")
274
Multimedija
Za pristup podacima niza ključ je indeks niza. Ime niza i indeks u uglastim zagradama
dobijaju vrednost sadržaja te lokacije u nizu.
Da bi se obrisao sadržaj koji je zauzimao prostor na određenoj lokaciji niza, dovoljno je
postaviti ga na null ili prazan znakovni niz. Međutim, stvarno brisanje elementa niza
moguće je operatorom delete.
mojNiz.length;
// rezultat je 3
delete mojNiz[1];
mojNiz.length = 3; // rezultat je ponovo 3
mojNiz[1];
// rezultat je undefined
Primetimo da operator delete briše dati element, ali ne narušava strukturu niza! Dakle,
sadržaj koji se nalazio na datoj poziciji više ne postoji, ali uređenost niza je sačuvana i
nema potrebe za premeštanjem elemenata i menjanjem njihovih indeksa da bi se očuvala
uređenost niza. Znači, mesto sa datim indeksom postoji u nizu, ali je prazno.
10.3.4.
Funkcije
Vrlo često javlja se potreba da se neki delovi programa izvršavaju u različito vreme ili
da se isti kod izvršava više puta. Da bi to elegantno izveli potrebno je da odgovarajući
programski kôd stavimo u funkcije.
Funkcije su mali paketi JavaScript koda koji čekaju da budu pozvani da obave svoj posao.
Već ste se upoznali sa jednom funkcijom u ovom poglavlju – alert funkciju smo koristili
da u čitaču aktivira tzv. iskačući okvir. Funkcija alert je sastavni deo svih čitača – to
znači da je ugrađena u čitačev JavaScript interpreter. Pored toga, vi imate mogućnost da
kreirate svoje funkcije koje ćete pozivati kada vi to želite. Funkcija se može posmatrati
kao omotač bloka programskog koda. Ono što je potrebno da uradite je da dodelite naziv
tom bloku koda i moći ćete da ga pozivate iz drugih delova svog programa kada poželite.
Funkcije se definišu upotrebom službene reči function. Ta reč saopštava programu da
želite da definišete novu funkciju i da se kôd koji se nalazi između tzv. vitičastih zagrada
izvršava svaki put kada se ta funkcija pozove:
function upozorenje()
{
alert("Ovo je kriticno upozorenje!");
}
Termin koji sledi službenu reč function je naziv koji želite da date funkciji (nazivi funkcija
podležu istim ograničenjima kao i nazivi promenljivih). To je naziv koji ćete pozivati/navoditi kadgod želite da se u programu izvrši kôd koji se nalazi unutar funkcije. Naziv mora
biti praćen malim zagradama – u prethodno navedenom slučaju one su prazne, međutim
to neće uvek biti tako što ćete videti u primerima koji će kasnije biti navedeni.
U prethodnom primeru kreirana je funkcija koja se zove upozorenje, stoga kadgod pozovemo tu funkciju, izvršavaće se naredbe unutar funkcije koje aktiviraju pojavljivanje
iskačućeg okvira koji prikazuje tekstualnu poruku "Ovo je kriticno upozorenje!". Kao i
Uvod u JavaScript
275
kod deklaracije funkcije, male zagrade se moraju pojaviti neposredno posle naziva funkcije
prilikom pozivanja funkcije:
upozorenje();
Te zagrade imaju dvostruku ulogu: one saopštavaju programu da želite da izvršite tu
funkciju i one mogu da sadrže podatke – koji se terminološki nazivaju argumenti – koje
želite da prosledite funkciji. Ne moraju svakoj funkciji da budu prosleđeni argumenti, ali
je obavezno da se koriste male zagrade u pozivu funkcije.
Vratimo se na primer korišćenja funkcije alert. Svakako ste uočili da smo kod pozivanja
funkcije stavljali neki string unutar zagrada:
alert("Ubaci i igraj");
String "Ubaci i igraj" je u stvaru argument koji smo prosledili funkciji alert; upozorenje je
dizajnirano tako da prihvati argument i prikaže ga u okviru upozorenja čitača.
Funkcije mogu biti dizajnirane da prihvate više argumenata i ti argumenti ne moraju da
budu stringovi – mogu biti podaci bilo kog tipa koji možete kreirati u JavaScriptu.
Kada definišete svoju funkciju, možete da obezbedite nazive za argumente koji će joj biti
prosleđeni. Oni se uključuju unutar malih zagrada neposredno posle naziva funkcije i ako
ih ima više odvajaju se zagradama:
function sendvic(hleb, meso)
{
alert(hleb + meso + hleb);
}
Kada je naziv argumenta definisan u deklaraciji funkcije, taj argument postaje promenljiva
koja je na raspolaganju svaki put kada se funkcija izvršava i ona omogućava da koristimo
funkciji prosleđene podatke unutar same funkcije.
Iz prethodnog primera funkcije sendvic vidite da su definisana dva argumenta: hleb i
meso. Ta dva argumenta se koriste kod pozivanja upozorenja da generišu donekle za
korisnika besmislenu poruku.
Prema tome, rezultat rada većine funkcija koje napišemo biće prikazivanje okvira upozorenja sa porukom korisniku. Međutim, postoje situacije kada su nam potrebne nešto
inteligentnije funkcije koje prosleđuju podatak drugim delovima programa. Funkcija može
da vrati (return) podatak naredbi koja ju je pozvala. Zgodna stvar u svemu ovome je
da možete dodeliti poziv funkcije kao vrednost promenljive i da tako vrednost promenljive
bude nešto što funkcija vrati kao rezultat svog izračunavanja. Da bi funkcija mogla da
vrati vrednost potrebno je da se upotrebi u telu funkcije službena reč return iza koje sledi
vrednost koja treba da se vrati:
function sendvic(hleb, meso)
{
var napravljen = hleb + meso + hleb;
return napravljen;
}
276
Multimedija
Sada je funkcija potpuno spremna da se koristi u nekom izrazu:
var dorucak = sendvic("Tost", "Sir");
Promenljiva dorucak sada sadrži string "TostSirTost". Možemo biti i malo dovitljiviji i
koristiti mogućnost da vraćena vrednost može biti čak i izraz:
function sandwich(hleb, meso)
{
return hleb + meso + hleb;
}
U ovakvom slučaju biće izračunat izraz i biće vraćen rezultat koji će proizvesti isti efekat
kao prethodna verzija koda.
Naredba return je uvek završni/konačni akt funkcije; ništa se više ne dešava u funkciji
posle vraćanja vrednosti.
10.4.
Objekti
Do sada smo razmatrali promenljive i funkcije, a sada je red da razmotrimo objekte.
Objekti su u suštini amorfni programski blokovi. Oni su amalgam svih drugih tipova podataka i uglavnom postoje da olakšaju život programerima. Njihov nejasan karakter još
uvek ne znači da oni nisu korisni.
Objekti egzistiraju kao oblik organizovanja promenljivih i funkcija u logičkim grupama.
Ako se vaš program bavi zečevima i robotima onda ima smisla da imate sve funkcije i
promenljive koje se odnose na robota u jednoj oblasti a sve funkcije i promenljive koje
se odnose na zečeve u drugoj oblasti. Objekti to rade grupisanjem skupova svojstava i
metoda.
Svojstva su promenljive kojima se može pristupiti samo preko njihovog objekta, a metode
su funkcije kojima se može pristupiti samo preko njihovog objekta. Zahtevajući da se sva
pristupanja svojstvima i metodama obavljaju preko objekata koji ih sadrže, JavaScript
objekti olakšavaju programerima upravljanje programima.
Skriptabilni čitač ima dosta posla oko pravljenja programskih objekata, koji generalno predstavljaju vidljive elemente HTML stranice u prozoru čitača. U vidljive objekte spadaju slike
i elementi obrazaca. Međutim, postoje objekti koji nisu tako očigledni, ali imaju smisla
kada se uzmu u obzir HTML oznake koje su korišćene da bi se napravio sadržaj stranice.
Da bi se pomoglo skriptovima da kontrolišu ove objekte, ali i autorima da pronađu neki
sistem u mnoštvu objekata na stranici, definisan je model objekata dokumenta (Document
Object Model, DOM). Model je nešto kao prototip ili plan organizacije objekata na stranici.
Svaki objekat je na neki način jedinstven. Tri najvažnije odlike objekta, uobičajeno, definišu šta je on – kako izgleda, kako se ponaša i kako ga skript kontroliše. To su svojstva
(properties), metode i procedure za obradu događaja (event handlers).
Svaki fizički objekat ima skup karakteristika koji ga definiše – oblik, boju, težinu i još
277
Uvod u JavaScript
mnogo drugih koje ga razlikuju od ostalih objekata. Svaka od ovih osobina naziva se svojstvo, i svako od svojstava ima neku vrstu vrednosti koja mu je dodeljena. Svojstva HTML
objekta najčešće se podešavaju atributima HTML oznaka. Prisustvo JavaScripta često
dodaje opcione atribute čija se inicijalna vrednost može modifikovati kada se dokument
učita.
Ako svojstvo liči na opisni pridev za objekat (name, value, ...), onda je metoda glagol.
Metoda je sve u vezi sa akcijom objekta. Ona ili nešto radi objektu, ili nešto sa objektom
što ima uticaja na ostale delove skripta ili dokumenta. One su neka vrsta komandi, ali
takvih čija su ponašanja povezana sa određenim objektima.
Jedan objekat može imati neodređen broj metoda koje su sa njim povezane uključujući
i ni jednu. Imena metoda se završavaju parom zagrada, a da bi se metoda pokrenula,
naredba JavaScripta mora sadržati njenu referencu, preko njegovog objekta.
document.orderForm.submit()
Ponekad metoda zahteva da se s njom pošalju i dodatne informacije tj. parametri ili
argumenti, koji se tada navode unutar zagrada.
Poslednja karakteristika objekta JavaScripta je procedura za obradu događaja. Događaji
(events) su akcije koje se odvijaju u dokumentu, obično kao posledica akcije korisnika kao
što su pritisak mišem na dugme ili upisivanje teksta u polje za unos.
Gotovo svaki objekat JavaScripta u dokumentu prima događaj neke vrste. Da li će objekat
uraditi bilo šta drugo kao odgovor na događaj, zavisi od atributa koji se unosi u definiciju
HTML objekta. Atribut se sastoji od imena objekta i znaka jednakosti, kao i uputstva šta
da se radi kada određeni događaj otpočne.
Slika 10.1. Hijerarhija objekata Navigatora
278
Multimedija
Slika 10.2. Hijerarhija objekata Internet Explorer
10.4.1.
Objekat window
Objekat prozor tj. window, nalazi se na vrhu hijerarhije objekata JavaScripta i predstavlja
mesto za sadržaj HTML dokumenta u prozoru browser-a. Kako se sve akcije dokumenta
odigravaju unutar prozora, prozor je na vrhu hijerarhije objekata JavaScripta. Njegove
fizičke granice sadrže JavaScript. Pored onog dela prozora gde se smešta sadržaj dokumenta, sfera uticaja prozora uključuje dimenzije prozora i sve ostale potrebne sastavne
delove koji okružuju oblast sa sadržajem, kao što su scrollbars, toolbars, menu, statusbar
i dr.
Svojstva i metode objekta prozora mogu se u skriptu referencirati na nekoliko načina.
Najčešći način je da se u referencu uključi objekat prozora:
window.imeSvojstva
window.imeMetoda(parametri)
Kada pri referenciranju skript pokazuje na prozor u kome je smešten dokument, za objekat
prozora postoji i sinonim – self. Nije poželjno da se self kombinuje u referencama u
skriptu za prozor sa jednim okvirom; kada postoji više okvira self svakako olakšava čitanje
i ispravku koda.
self.imeSvojstva
self.imeMetoda(parametri)
Nije uvek potrebno praviti novi objekat window koristeći kôd JavaScripta. Skript ne pravi
glavni prozor čitača, to čini korisnik aktiviranjem čitača ili otvaranjem URL-a ili datoteke
iz menija čitača. Taj prozor je automatski formiran valjan objekat window čak iako je
prazan. Ali skript može generisati bilo koji broj potprozora ako je otvoren glavni prozor (i
ako sadrži dokument čiji će skript otvoriti potprozor).
Metoda koja pravi novi prozor je window.open() i sadrži više parametara koji definišu
karakteristike prozora.
279
Uvod u JavaScript
window. open("URL", "imeProzora", "osobineProzora")
osobineProzora je znakovni niz koji se sastoji od liste atributa, razdvojenih zarezima.
Atributi koji se mogu kontrolisati u novonapravljenim prozorima su: toolbar, location,
directories, status, menubar, scrollbar, resizable, copyhistory, width, height.
<html><head><title>otvaranje prozora</title>
<script language = " javascript">
function openAccessories(){
window.open ("accessories.html", "accessories", width= 100,
height= 100, scrollbars= no, resizable= no, menubar= yes,
location= yes ")
}
</script>
</head>
<body>
<form>
<input type="button" value="accessories" onclick= "openAccessories()">
</form>
</body>
</html>
Na sledećoj slici vidi se novootvoreni manji prozor koga je "definisao" i otvorio gornji
skript.
Slika 10.3. Otvaranje novog prozora
Čim se napravi drugi prozor u okruženju Web stranice, vazno je obratiti pažnju na upravljenje prozorskim slojevima. Korisnik vrlo lako može izgubiti manji prozor iza većeg.
280
Multimedija
Metoda window. focus() stavlja navedeni prozor ispred svih prozora. Nasuprot focus()
je blur() koja odabrani prozor gura u pozadinu svih otvorenih prozora.
Statusbar na dnu prozora čitača redovno prikazuje URL veze kada na nju postavite pokazivač/kursor miša. I druge poruke se pojavljuju na statusnoj traci u vreme kad se dokument
učitava. JavaScript se može zgodno iskoristiti za prikazivanje vlastite poruke na statusnoj traci u željenom trenutku. Svojstvu window.status se može pridružiti neki drugi
tekst. Da bi se promenio tekst u vezi, akcija se pokreće procedurom za obradu događaja
onMouseOver= povezanog objekta. Osobitost korišćenja ove naredbe za podešavanje statusne trake je da dodatna naredba return true mora da bude deo procedure za obradu
događaja. Radi jednostavnijeg podešavanja svojstva window.status, naredbe skripta se
najčešće pišu kao skriptovi u redu u sklopu definicije procedure za obradu događaja.
HTML se označi, a jednostavno se dodaju naredbe skripta:
<a href="http://home.mySite.com"
onMouseOver=
"window.status=’posetite homepage mog website- a’ ; true"> mySite
</a>
Još jedna zanimljiva i korisna metoda objekta window je setInterval. setInterval()
se koristi kada je potrebno da skript pozove funkciju ili više puta izvrši neki izraz sa fiksnim
kašnjenjem između poziva te funkcije i izraza. Tipične aplikacije su animacije, pomeranjem
objekta po stranici kontrolisanom brzinom. Objekat prozora reaguje na nekoliko događaja
koje prouzrokuje sistem i korisnik, ali verovatno najčešće korišćen je događaj koji se aktivira
odmah čim se cela stranica učita – onload=. Prednost korišćenja ovog događaja je što
pruža sigurnost o tome da su svi objekti u modelu jer ako se dozvoli pristup elementu
objekta, dok objekat još nije učitan, može se desiti greška u skriptu. Procedure za obradu
događaja objekta prozora smeštaju se unutar oznake body.
10.4.2.
Iskrsavajući prozori
JavaScript omogućava kreiranje tri "iskrsavajuća/iskačuća" prozora (popup box):
1. alert box (upozorenje)
2. confirm box (dijalog za potvrdu)
3. prompt box (odzivni okvir za dijalog).
Metoda alert() generiše okvir za dijalog koji prikazuje svaki tekst koji se preda kao
parametar, a dugme OK omogućava korisniku da ukloni upozorenje. Čitač ubacuje reči
koje ukazuju na to da je alert box upozorenje JavaScripta – JavaScript Alert, i ovaj tekst
se ne može menjati skriptom; samo se sadržaj druge poruke može menjati. Sledi sintaksa:
alert("sometext")
Sledi primer primene upozorenja. U pitanju je skup radio dugmadi čiji atributi value sadrže
imena boja. Petljom for skript nalazi odabrano dugme i upozorava korisnika.
Uvod u JavaScript
281
<html>
<head>
<title>alert box boje</title>
<script language= "javascript">
function kojaBoja() {
var form= document.forms[0]
for (var i=0; i< form.boje.length; i++) {
if (form.boje[i].checked) {
break
}
}
alert(’odabrali ste’ + form.boje[i].value + ’!’)
}
</script>
</head>
<body>
<form>
<input type="radio" name="boje" value= "crvena" onClick="kojaBoja() ">
<input type="radio" name="boje" value= "plava" onClick="kojaBoja() ">
<input type="radio" name="boje" value= "zuta" onClick="kojaBoja() ">
</form>
</body>
</html>
Vidimo da, ako je svojstvo checked true, tj. data opcija je odabrana, break naredba
uslovljava izlazak iz petlje i indeks odabrane opcije pronađen pomoću for petlje koristi se
za ispis poruke alert prozora.
Drugi stil iskrsavajućeg prozora prikazuje dva dugmeta: Cancel i OK, i naziva se confirm
box. window.confirm() je jedna od metoda koja vraća vrednost: true ako korisnik
pritisne OK i false ako pritisne Cancel. Ovaj okvir za dijalog može se koristiti kao podsticaj korisniku da donese odluku o tome kako da se nastavi skript. Izlazna vrednost može
se koristiti i kao uslov u nekoj if konstrukciji. Sledi sintaksa:
confirm("sometext")
Sledeći primer prikazuje kako to korisnik preko confirm prozora može uticati na dalji "tok"
skripta:
<html>
<head>
<script language = " javascript">
function potvrdi() {
var odgovor = confirm("Napustate ovu stranicu?")
if (odgovor){
alert("Dovidjenja!")
window.location = "http://www.singidunum.ac.rs/";
282
Multimedija
}
else{
alert("Hvala sto ostajete!")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="potvrdi()" value="Napusti ...">
</form>
</body>
</html>
Slika 10.4. Iskrsavajući prozor tipa Confirm
Dakle, ako korisnik potvrdi odlazak pritiskajući OK (promenljiva odgovor je true), skript
ga šalje na matičnu stranu Univerziteta Singidunum (www.singidunum.ac.rs). Inače,
iskače alert prozor koji zahvaljuje korisniku što ostaje.
Poslednji okvir za dijalog objekta prozora – prompt box, prikazuje zadatu poruku i obezbeđuje polje za unos teksta u koje korisnik unosi odgovor. Dva dugmeta, Cancel i
OK, omogućavaju korisniku da ukloni okvir za dijalog sa dva efekta – otkazivanje cele
operacije ili prihvatanje unetog. Metoda window.prompt() ima dva parametra. Prvi
je poruka koja se prikazuje korisniku. U polju za unos može se priložiti podrazumevani
odgovor kao drugi parametar metode. Ako to nije potrebno, navodi se prazan niz – "".
Pritiskom na dugme Cancel, metoda vraća null (u uslovu neke if konstrukcije smatra se
za false); pritiskom na OK vraća se vrednost unetog znakovnog niza. Sintaksa je:
prompt("sometext", "defaultvalue")
283
Uvod u JavaScript
Sledi primer:
<head>
<script type="text/javascript">
function prompter() {
var reply =
prompt("Dobar dan korisnice! Kako je Vase ime?", "")
alert (reply)
}
</script>
</head>
<body>
<input type="button" onclick="prompter()" value="Moje ime!">
</body>
Slika 10.5. Iskrsavajući prozor tipa Prompt
Skript u gornjem primeru koristi prompt prozor da bi od korisnika dobio informaciju o
njegovom imenu, a zatim ga prikazuje u alert prozoru.
10.4.3.
Objekat document
Objekat document sadrži stvarni sadržaj stranice i on je sve ono što postoji u oblasti
prozora čitača ili okvira prozora (naravno, izuzev trake sa alatima, statusne trake i sl.).
Svojstva i metode ovog objekta utiču na izgled i sadržaj dokumenta koji se nalazi u prozoru.
Mnoga od tih svojstava uspostavljaju se pomoću atributa iz tagova/oznaka body, i mnoga
druga svojstva su nizovi drugih objekata u dokumentu. Svojstvima i metodama objekta
dokumenta pristupa se direktno:
284
Multimedija
window.document.imeSvojstva
window.document.imeMetoda(parametri)
Referenca window je opciona kada se pristupa objektu dokumenta koji sadrži skript.
Ne zadaju se sva svojstva vezana za objekat dokumenta kao atributi oznaka body. Ako
se stranica naslovi nalazi unutar oznaka title u zaglavlju, na taj naslov utiče svojstvo
document.title. Naslov dokumenta je uglavnom kozmetičko podešavanje koje se prikazuje u naslovnoj traci čitača. Takođe, skriptovi unutar oznaka script su deo dokumenta.
Drugi način da se napravi dokument je metodom document.write() i da se jednostavno
ceo sadržaj ili deo HTML stranice smesti u prozor ili okvir. Metoda document.write()
se koristi u dve vrste skriptova – u trenutnim koji prave sadržaj stranice dok se učitava, i
u odloženim, koji prave novi sadržaj u postojećem ili novom prozoru. Dva najbezbednija
načina za upotrebu metoda document.write() i document.writeln() (razlikuje se od
write() po tome što dodaje još i novi red) su sledeća:
• ugrađivanje skripta u HTML dokument da bi se napisao deo ili ceo sadržaj stranice;
• slanje HTML koda, ili u novi prozor ili uzaseban okvir u prozoru sa više okvira.
U prvom slučaju se prepliću delovi skripta i HTML-a; skript se pokreće kada se dokument
učita, upisujući HTML sadržaj. U drugom slučaju, skript prihvata unos korisnika u jednom
okviru i određuje izgled i sadržaj koji je namenjen drugom okviru.
10.4.4.
Objekat Math
JavaScript obezbeđuje mnoštvo matematičkih mogućnosti. Sve ove mogućnosti sadržane
su u matemetičkom objektu Math. Ovaj objekat se razlikuje od drugih objekata programa
JavaScripta po tome što se za njegovu upotrebu ne pravi njegova kopija. Skriptovi direktno
pozivaju svojstva i metode objekta Math i on je deo reference.
var brojPi = Math.PI
var drugiKoren = Math.SQRT2
Metode pokrivaju širok dijapazon trigonometrijskih i drugih matematičkih funkcija koje
rade sa brojnim vrednostima koje su prethodno definisane u skriptu.
var kojiJeVeci = Math. max(broj1, broj2)
var naStepen = Math. pow (broj, stepen)
var zaokruzi = Math.round(broj)
10.4.5.
Objekat Date
Rad sa datumom počinje pozivanjem konstruktora objekta Date da bi se dobio jedan
objekat klase Date povezan sa određenim vremenom i datumom.
var danas = new Date()
Uvod u JavaScript
285
Objekat Date uzima snimak PC-jevog internog sata i vraća datumski objekat za taj momenat. Interno, vrednost datumskog objekta u nekom momentu je vreme u milisekundama
počev od nula časova 1. januara 1970. po Griniču (GMT) - svetskoj referentnoj tački za
sve vremenske konverzije. Tako datumski objekat sadrži informacije i o datumu i o vremenu. Moguće je definisati objekat Date za neki drugi trenutak, navodeći tu informaciju
kao parametar u konstruktorskoj funkciji Date:
var nekiDatum = new Date ("Month dd, yyyy hh:mm:ss")
var nekiDatum = new Date ("Month dd, yyyy")
var nekiDatum = new Date (yy, mm, dd)
Komponente datumskog objekta mogu se izdvojiti pomoću niza metoda koje se mogu
primeniti na trenutni datumski objekat, kao što su: getTime(), getYear(), getHours(),
..., setMinutes(val), setSeconds(val).
Slika 10.6. Rezultat rada skripta za prikaz tekućeg vremena
Sledi primer skripta za prikaz trenutnog vremena.
<html>
<head>
<script type="text/javascript">
function startTime() {
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
document.getElementById(’txt’).innerHTML=h+":"+m+":"+s
286
Multimedija
t=setTimeout(’startTime()’,500)
}
// ispred brojeva manjih od 10 dodaje se nula
function checkTime(i) {
if (i<10) { i="0" + i }
return i
}
</script>
</head>
<body onload="startTime()">
<h1>
<div id="txt"></div>
</body>
</html>
10.5.
Događaji u JavaScriptu
JavaScript programi su većinom pokretani događajima (event-driven). Događaji su akcije
koje se pojavljuju, obično, kao rezultat nečega što korisnik uradi. Na primer, događaj je
klik mišem, kada elemenat forme dobije fokus i slično.
Koristeći obrađivače događaja (event handler) ugrađene u JavaScript, mogu se pisati
funkcije koje se aktiviraju kada se određeni događaj desi.
Obrađivači događaja su predstavljeni kao specijalni atributi koji modifikuju ponašanje
HTML elemenata u okviru kojih se nalaze. Na primer:
<body OnLoad="alert(Dobrodosli!)">
U prethodnom, oznaci početka tela HTML dokumenta dodat je atribut OnLoad, koji
obrađuje događaj učitavanja HTML dokumenta. U konkretnom slučaju, kada se učitavanje
HTML dokumenta završi, izvršiće se naredba JavaScripta dodeljena atributu OnLoad, u
prozoru će se ispisati poruka "Dobrodosli".
Generalno, sintaksa za upotrebu obrađivača događaja je:
<HTML_Oznaka Ostali_atributi eventHandler="JavaScript program">
10.5.1.
Šta su to događaji?
Događaji su signali koji se generišu kada se odigra određena akcija. JavaScript može da
detektuje te signale i mogu da se pišu programi koji reaguju na te događaje.
Događaji se u čitaču javljaju kada korisnik klikne na hipertekstualni link, kada se promeni
podatak u ulaznom polju obrasca ili kada se završi učitavanje Web dokumenta itd.
Uvod u JavaScript
10.6.
287
Animiranje objekta
Koncept animiranja objekta u JavaScriptu je sličan animiranju grafičkog objekta u bilo
kom programskom jeziku. Objekat se animira tako što se "menja" u više koraka tokom
nekog definisanog vremenskog intervala. U svakom od koraka objekat može biti promenjen
na više načina, tj. mogu mu se menjati različita svojstva (veličina, položaj, transparentnost, ...).
Jedna od animacija koju je relativno lako realizovati u JavaScriptu je iščezavanje objekta, tj. promena transparentnosti. Međutim, pre nego što se upustimo u programiranje,
potrebno je objasniti jednu važnu funkciju i jedan stil.
Funkcija setTimeout() je deo JavaScript biblioteke i poziva specificirani programski kôd
code posle isteka nekog vremenskog intervala milliseconds. Ovo je podržano od svih čitača pošto se radi o delu standardne biblioteke.
Stil transparentnosti je uveden sa tehnologijom CSS2. Podržan je i u Internet Exploreru
(IE) i u Mozilla tipu čitača (Firefox, Safari, ... ), ali je različito implementiran. U IE
je implementiran kao filtar (obj.style.filter), sa vrednošću alpha(opacity=o), gde
je o broj između 0 i 100. Vrednost 0 znači potpunu providnost, dok 100 znači potpunu
neprovidnost. Kod Mozilla tipa čitača implemeniran je kao stil (obj.style.opacity),
opacity, sa vrednošću između 0 i 1, gde 0 znači potpunu providnost, a 1 potpunu neprovidnost.
Kod animacije iščezavanja (fade animation), objekat koji iščezava postepeno menja transparentnost između graničnih vrednosti. Sledeći primer demonstrira animaciju iščezavanja,
tj. objektu se menja neprovidnost od 100% do 0%, u 10 "koraka".
<head>
<title>Uvod u Javascript animaciju - jednostavan primer</title>
<script language="Javascript">
288
//
//Detekcija citaca
browser = undefined;
if(navigator.userAgent.indexOf("MSIE")!=-1)
browser = "IE";
else
browser = "Mozilla";
//Pozivanje funkcije fade
function fade(element)
{
//Objekat iscezava u 10 koraka
var steps = 10;
//postavljanje startne providnosti
setOpacity(element, 1);
// Petlja tajmerske funkcije
for(i=0; i<steps; ++i) {
setTimeout(function(){fadeCallback(element);}, (30*i));
}
}
//Callback to timer function
function fadeCallback(element)
{
//Prihvatanje tekuce providnosti
var opacity=getOpacity(element);
//Postavljanje nove providnosti
setOpacity(element, opacity-0.1);
}
//Detektovanje providnosti
function getOpacity(element)
{
var opacity = null;
//Providnost tekuceg citaca
if(browser=="IE") {
filter = element.style.filter;
if(filter) {
Multimedija
Uvod u JavaScript
289
alpha = filter.split("alpha(opacity=");
opacity = alpha[1].substr(0,(alpha[1].length-1))/100;
}
}
else {
opacity = element.style.opacity;
}
return opacity;
}
//postavljanje providnosti
function setOpacity(element, o)
{
//detekcija koji citac se koristi i postavljanje providnosti
if(browser=="IE") {
element.style.filter = "alpha(opacity=" + (o*100) + ")";
}
else {
element.style.opacity = o;
}
}
</script>
</head>
<body>
<div style="width: 50px; height: 50px; background-color: red;"
onClick="fade(this);"></div>
</body>
Animacija se izvršava pozivanjem funkcije fade (element), gde je element referenca na
element/objekat, na primer:
<div style="width: 50px; height: 50px; background-color: red;"
onClick="fade(this);">
</div>
</body>
Usled čega iščezava DIV element kada se na njega klikne mišem.
Verovatno da je za većinu početnika teško da shvate kompletan programski kôd koji
realizuje pomenutu animaciju i zato izdelićemo ga na sekcije i ponaosob obrazložiti.
if(navigator.userAgent.indexOf("MSIE")!=-1)
290
Multimedija
browser = "IE";
else
browser = "Mozilla";
Prvi deo koda na jednostavan način detektuje o kom tipu čitača se radi pošto je to
bitno kod potonje primene promene transparentnosti. Kôd koristi sledeću promenljivu
pod nazivom navigator.userAgent koja vraća identifikacioni string tekućeg čitača, a
zatim proverava da li sadrži "MSIE", što bi značilo da se radi o Internet Exploreru. Ako
nije u pitanju IE, tada je nebitno koji je čitač jer svi ostali koriste isti standardni stil
providnosti.
10.6.1.
Funkcija fade()
function fade(element)
{
//Objekat iscezava u 10 koraka
var steps = 10;
//postavljanje startne providnosti
setOpacity(element, 1);
// Petlja tajmerske funkcije
for(i=0; i<steps; ++i) {
setTimeout(function(){fadeCallback(element);}, (30*i));
}
}
Ova funkcija se poziva da realizuje iščezavanje objekta. Ona prihvata jedan argument,
element, koji je referenca elementa koji iščezava. Funkcija setTimeout() se poziva unutar ove funkcije. Ona se poziva u petlji i ona ujedno poziva funkciju fadeCallback()
koja će promeniti transparentnost iščezavajućeg objekta/elementa. Izraz (30*i) definiše
vremenski interval posle koga se funkcija fadeCallback poziva, tj. ona se poziva svakih
30 milisekundi. Neprovidnost elementa je postavljena na 1 i to je početna vrednost.
Trebalo bi imati u vidu da je funkcija povratnog poziva (callback function) omeđena sa
function(){...}. To je zato što funkcija ima argumente primenjene na element iako
je jednostavno zapisana kao fadeCallback(element) tako da treba da bude pozvana
neposredno, a ne da bude setovana kao vremenska funkcija.
10.6.2.
Funkcija fadeCallback()
function fadeCallback(element)
{
//Prihvatanje tekuce providnosti
var opacity=getOpacity(element);
//Postavljanje nove providnosti
Uvod u JavaScript
291
setOpacity(element, opacity-0.1);
}
To je funkcija povratnog poziva koju poziva funkcija setTimeout(). Ona utvrđuje tekuću
transparentnost elementa koji iščezava i zatim postavlja novu smanjujući tekuću transparentnost za 0.1.
10.6.3.
Funkcija getOpacity()
function getOpacity(element)
{
var opacity = null;
//Providnost tekuceg citaca
if(browser=="IE") {
filter = element.style.filter;
if(filter) {
alpha = filter.split("alpha(opacity=");
opacity = alpha[1].substr(0,(alpha[1].length-1))/100;
}
}
else {
opacity = element.style.opacity;
}
return opacity;
}
Ova funkcija registruje tekuću transparentnost elementa koji iščezava. Pošto je implementacija transparentnosti u čitačima različita, ova funkcija koristi ranije postavljenu promenljivu browser da utvrdi koju metodu da primeni. Na kraju vraća transparentnost kao
skaliranu vrednost između 0 i 1.
10.6.4.
Funkcija setOpacity()
function setOpacity(element, o)
{
//detekcija koji citac se koristi i postavljanje providnosti
if(browser=="IE") {
element.style.filter = "alpha(opacity=" + (o*100) + ")";
}
else {
element.style.opacity = o;
}
}
292
Multimedija
To je funkcija koja postavlja providnost/neprovidnost elementa koji se animira/iščezava.
Kao i funkcija getOpacity(), radi detekciju tipa čitača korišćenjem prethodno postavljene
promenljive browser i menja providnost.
10.6.5.
Dilema – setTimeout() ili setInterval()?
Postoje dve ključne funkcije u JavaScriptu koje mogu da se koriste kod animacije objekata. Jedna, koju smo već upoznali, je setTimeout(), a druga je setInterval().
Obe obavljaju sličnu operaciju, ali postoji suptilna razlika. Ono što je zajedničko za obe je
poziv funkcije pošto je istekao vremenski period specificiran u milisekundama. Međutim,
dok setTimeout() poziva tu funkciju posle isteka specificiranog perioda samo jedanput,
dotle setInterval() poziva tu funkciju posle svakog protoka specificiranog perioda, u
petlji, sve dok se ne pozove funkcija clearInterval().
Koju funkciju je bolje koristiti? Posle eksperimentisanja sa obe funkcije utvrđeno je da su
obe podjednako korisne i da obe zahtevaju pisanje koda koji proverava da li je animacija
završena ili ne. U slučaju korišćenja funkcije setTimeout(), funkcija fade() izračunava koliko puta je mora pozvati na osnovu broja koraka, a u slučaju korišćenja funkcije
setInterval(), kôd u funkciji povratnog poziva određuje da li je animacija završena
ili ne. U slučaju prikazanog primera jednostavne animacije, setTimeout() je pogodnija
jer se broj pozivanja animacionog povratnog poziva izračunava u funkciji fade(), dok
se u slučaju setInterval() u animacionoj funkciji povratnog poziva utvrđuje da li je
animacija završena ili ne i ID tajmera mora biti memorisan (analizirati sledeći primer).
Međutim, ustanovljeno je da je za veće i složenije animacije funkcija setInterval()
pogodnija naročito kod metode variranja inkrementiranjem/dekrementiranjem transparentnosti po koraku.
Sledi primer animacije koja koristi funkciju setInterval().
<head>
<title>Uvod u Javascript animaciju - koristi se setInterval()</title>
<script language="Javascript">
//
//Detekcija citaca
browser = undefined;
if(navigator.userAgent.indexOf("MSIE")!=-1)
browser = "IE";
else
browser = "Mozilla";
timer = null;
//Called to fade element
Uvod u JavaScript
function fade(element)
{
//We will fade the object in 10 steps
var steps = 10;
//Set the timer interval to 30ms and store the setInterval() ID
timer = setInterval(function(){fadeCallback(element);}, 30);
}
//Callback to timer function
function fadeCallback(element)
{
//Get the current opacity
var opacity=getOpacity(element);
if((opacity-0.1)==0)
clearInterval(timer);
//Sets the new opacity
setOpacity(element, opacity-0.1);
}
//Gets an element’s opacity
function getOpacity(element)
{
var opacity = null;
//Get the opacity based on the current browser used
if(browser=="IE") {
filter = element.style.filter;
if(filter) {
alpha = filter.split("alpha(opacity=");
opacity = alpha[1].substr(0,(alpha[1].length-1))/100;
}
}
else {
opacity = element.style.opacity;
}
//If no opacity has been set make it 100%
if(!opacity) {
setOpacity(element, 1);
opacity = 1;
}
293
294
Multimedija
return opacity;
}
//Sets an element’s opacity
function setOpacity(element, o)
{
//Set the opacity based on the current browser used
if(browser=="IE") {
element.style.filter = "alpha(opacity=" + (o*100) + ")";
}
else {
element.style.opacity = o;
}
}
</script>
</head>
<body>
<div style="width: 50px; height: 50px; background-color: red;"
onClick="fade(this);"></div>
</body>
Primer je sličan primeru koji koristi funkciju setTimeout(), ali postoji par bitnih razlika.
Pažljivim proučavanjem prethodnog listinga uočava se da je kôd za utvrđivanje okončanja
animacije uključen u animacionu funkciju povratnog poziva.
function fadeCallback(element)
{
//Get the current opacity
var opacity=getOpacity(element);
if((opacity-0.1)==0)
clearInterval(timer);
Pomenuti segment koda koristi funkciju clearInterval(), koja briše tajmer koji je
kreirala funkcija setInterval(), čiji je jedini argument ID (identifikator) kreiranog tajmera. Kao što se iz primera vidi, ID tajmera se vraća kada se poziva funkcija setInterval().
//Set the timer interval to 30ms and store the setInterval() ID
timer = setInterval(function(){fadeCallback(element);}, 30);
Prema tome, ID se mora memorisati/čuvati kako bi tajmer mogao da se obriše posle
korišćenja.
Uvod u JavaScript
10.7.
295
Provera matičnog broja građanina pomoću
JavaScripta
Često je potrebno na Webu u nekom formularu upisati jedinstveni matični broj građanina,
JMBG. Broj je dužine 13 znakova/cifara i moguće su greške prilikom upisivanja, zato je
potrebno izvršiti proveru unetog podatka.
Matični broj ima 13 cifara od kojih je trinaesta cifra kontrolni broj.
Oblik/struktura matičnog broja je DDMMGGGRRSSSK, gde je:
• DD - dan rođenja,
• MM - mesec rođenja,
• GGG - godina rođenja, bez prve cifre,
• RR - oznaka regiona,
• SSS - redni broj osobe unutar datuma rođenja i regiona plus oznaka pola (ako je
SSS < 500, onda je reč o muškom polu, a za SSS > 499 reč je ženskom polu),
• K - kontrolni broj (od 0 do 9).
Računanje kontrolnog broja:
D D M M G G G R R S S S K
7 6 5 4 3 2 7 6 5 4 3 2
1. Pomnoži se gornji broj (prvi red) sa donjim (drugi red) i dobijeni umnošci saberu.
2. Označimo dobijeni zbir sa SUMA.
3. Podelimo celobrojno dobijeni zbir sa 11, tj. SUMA%11.
4. Označimo dobijeni ostatak kao OST.
5. Oduzmimo ostatak od 11 i dobijenu razliku označimo kao RAZ (RAZ=11-OST).
• Ako je ostatak 1 (OST=1, RAZ=10) matični broj je pogrešan.
• Ako je ostatak 0 (OST=0, tj. SUMA je deljiv sa 11 bez ostatka), kontrolni broj
K je 0.
• Ako je ostatak broj između 1 i 11 (1<OST<11) kontrolni broj K je razlika između
11 i ostatka (K=RAZ).
• Ako je K različito od RAZ matični broj je pogrešan.
Niže je dat primer HTML formulara u koji se upisuje samo JMBG i vrši provera unosa.
296
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function validJMBG(jmbg)
{
kon="765432765432";
suma=0;
len=jmbg.length;
digits="0123456789123";
if(len != 13)
{
alert("JMBG nije korektne duzine!")
document.dataentry.jmbg.focus()}
for(i=0; i<13; i++)
{if (digits.indexOf(jmbg.charAt(i))<0)
{alert("Svi znaci moraju biti brojevi!")
document.dataentry.jmbg.focus()
}
}
for(i=0; i<12; i++)
{s=jmbg.substring(i,i+1);
s=parseInt(s);
kk=kon.substring(i,i+1);
kk=parseInt(kk);
suma=suma+s*kk;
}
ost=suma%11;
raz=11-ost;
k=jmbg.substring(12,13);
if(ost==1)
{alert("JMBG nije ispravno upisan!")
document.dataentry.jmbg.focus()}
if(k!=raz)
{alert("JMBG nije ispravno upisan!")
document.dataentry.jmbg.focus()}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry">
<h2>Provera ispravnosti JMBG-a</h2>
<p>
Upi\v site JMBG broj (9999999999999):<br>
<INPUT TYPE="text" NAME="jmbg" SIZE=10 >
<P>
<INPUT TYPE="button" VALUE="Posalji"
Multimedija
Uvod u JavaScript
297
onClick="validJMBG(jmbg.value)">
</BODY>
</HTML>
Slika 10.7. Formular sa proverom JMBG pomoću Javascripta
10.8.
Kolačići
Svakako nešto sa čime se srećemo relativno često na Webu jesu kolačići - cookies. Mehanizam cookies omogućava skladištenje male količine informacija na računaru na dosta
bezbedan način. Cookie se često koristi za skladištenje korisnikovog imena i/ili lozinke na
Web prezentacijama. Postoji nekoliko vrsta cookies-a:
• Name cookie - prvi put kada neko poseti Web prezentaciju koja sadrži skript za ovaj
cookie, posetilac mora da unese neko korisničko ime. To ime se čuva u cookie-ju
i sledeći put kada dati korisnik pristupi toj lokaciji, dobiće pozdravnu poruku tipa:
"Zdravo Jelena!". Ime se izdvaja iz cookie-ja.
• Password cookie - slično Name cookie-ju, ali ovde se unosi lozinka koja se takođe
čuva u cookie-ju.
• Date cookie - datum prve posete datog korisnika Web prezentaciji stavlja se u
cookie. Pri sledećoj poseti moguće je ispisati poruku korisniku tipa: "Poslednji put
ste posetili ovu prezentaciju u utorak, 20.03. 2010."
Kada se prvi put takve informacije unesu u obrazac koji se šalje CGI programu (skript
na serverskoj strani), CGI program preporučuje čitaču da tu informaciju zapiše na hard
disk računara. Međutim, čitač ne otvara svima direktorijum hard diska. Mehanizam
cookies obezbeđuje pristup do posebne tekstualne datoteke na hard disku, koja se nalazi
298
Multimedija
na mestu koje zavisi od operativnog sistema. U Windows verziji Navigatora datoteka se
zove cookies.txt i smeštena je u direktorijumu Navigatora. Internet Explorer koristi malo
drugačiji sistem – svaki cookie se snima u sopstvenu datoteku u direktorijumu Cookies
koji je smešten među sistemskim direktorijumima. U poljima svakog zapisa cookie nalazi
se sledeće:
• domen servera koji je napravio cooki-e
• informacija o tome da li je potrebna zaštićena HTTP veza da se pristupi cookie-ju
• putanja URL-a koji mogu pristupiti cookie-ju
• ime cookie-ja
• znakovni nz koje je povezan sa cookie-jem
Pristup cookies-ima iz JavaScripta ograničen je na postavljanje vrednosti (sa opcionim
parametrima) i čitanje podataka iz njih (bez parametara). Da bi se podaci sa cookie-ja
upisali u za njih predviđenu datoteku, koristi se JavaScript operator dodele i svojstvo
document.cookie. Sintaksa za dodeljivanje vrednosti kolačiću je:
document. cookie =" cookieName= cookieData
; expires= timeInGMTString
; path= pathName
; domain= domainName
; secure "
Svaki cookie mora imati ime i znakovni niz kao vrednost (čak i kada je u pitanju prazan
niz). Par ime – podatak mora biti jedan niz bez tačke i zareza, zareza ili znaka razmaka.
Za razmak između reči poželjno je koristiti funkciju escape() koja kodira ASCII razmak kao
%20 (a zatim unescape() za dekodiranje na običan razmak za kasnije kada cookie bude
pozvan). Na primer, ako se kolačiću userName dodaje znakovni niz Jelena, to izgleda
ovako:
document. cookie = "userName=Jelena"
Ako se dodaje još parametara i oni svi moraju biti uključeni u jedan znakovni niz i
pridruženi svojstvu document.cookie. Dakle, podaci koji se pozivaju iz cookie-ja pomoću JavaScripta smeštaju se u jedan znakovni niz, uključujući i ceo par ime - podatak.
Kolačići se ne mogu tretirati kao objekti, već se iz znakovnog niza mora izdvojiti željeni
podatak iz para ime - podaci koristeći metod substring(). Prvi parametar metoda substring sadrži znak jednakosti, kojim se razdvaja ime od podataka.
Najbolje rešenje je napraviti funkciju opšte namene koja može da radi i samo sa jednim i
sa više cookies-a.
function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=")
Uvod u JavaScript
299
if (c_start!=-1) {
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return
unescape(document.cookie.substring(c_start,c_end))
} } return "" }
Pozivanjem ove funkcije predaje se ime cookie-ja kao parametar. Funkcija raščlanjuje
ceo znakovni niz cookie-ja odbacujući sve unose koji se ne slažu sve dok ne pronađe ime
cookie-ja.
Cookies imaju i rok trajanja. Ako cookie treba da opstane i posle tekuće sesije, on ima
i rok trajanja koji postavlja pisac cookie-ja. Datum roka trajanja mora biti predat kao
znakovni niz koji označava vreme po Griniču (GMT).
Sledeća funkcija kao parametre ima ime cookie-ja, njegovu vrednost i broj dana preostalih
do isteka roka cookie-ja. Prvo, broj dana se konvertuje u odgovarajući datum, zatim se
dodaje broj dana posle kog ističe rok cookie-ja. Posle toga, pamti se ime, vrednost i
datum isteka roka cookie-ja u document.cookie objektu.
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" :
;expires="+exdate.toGMTString()) }
Konačno, funkcija koja ispisuje pozdravnu poruku nakon što prepozna korisnika po korisničkom imenu, ako je cookie postavljen. Ako cookie nije postavljen, od korisnika se traži
da unese ime u prompt box.
function checkCookie() {
username=getCookie(’username’)
if (username!=null && username!="") {
alert(’Welcome again ’+username+’!’)}
else {
username=prompt(’Please enter your name:’,"")
if (username!=null && username!="") {
setCookie(’username’,username,365)
}}}
10.9.
Namenske JavaScript biblioteke
Prateći razvoj Weba i trendove u dizajnu primećuje se da pored velike pažnje koju je
privukao tzv. Web 2.0 koncept može se izvući par korisnih i suštinskih zaključaka. Iako
su namenske/specijalizovane JavaScript biblioteke postojale u principu otkad postoji i
300
Multimedija
sâm JavaScript došlo je vreme da takve biblioteke postanu opšteprihvaćene. Istovremenim razvojem Web 2.0, AJAX-a i modernih Web aplikacija (kao što su Google Mail ili
Google Docs&Spreadsheets) počelo se o tim bibliotekama sve više pričati. Očito je da se
konstantno napredovanje tehnologija i softvera odrazilo i na ponudu Web aplikacija – sve
više stvari je moguće ponuditi korisnicima kroz Web stranice i prozor čitača.
Većina osveženja na aktuelnim dinamičnim i interaktivnim stranicama je napravljena pomoću neke od namenskih JavaScript biblioteka koje omogućuju fleksibilno i jednostavno
kreiranje takvih sadržaja. Nameće se potreba za razmatranjem kakve prednosti Web stvaraocima donose te mnogobrojne JavaScript biblioteke.
Funkcionalnost JavaScript biblioteka možemo podeliti u tri osnovne kategorije:
• DOM pristup i manipulacija,
• olakšavanje i ubrzavanje programiranja,
• proširivanje funkcionalnosti pomoću gotovih komponenti.
10.9.1.
DOM pristup i manipulacija
DOM pristup i manipulacija su najvažniji za efikasno upravljanje sadržajem Web stranice.
DOM je standardni model koji raščlanjuje Web stranicu na tačno definisani niz (stablo)
objekata koji sadrže druge objekte, i pomoću takvog modela moguće je pristupiti bilo
kom delu Web stranice da bi pročitali ili izmenili neko njegovo svojstvo. Zbog toga je rad
sa DOM-om zapravo jezgro oko kog se temelji bilo kakva manipulacija Web stranicama.
DOM je vrlo pouzdan i podržan u svim čitačima, ali osnovne metode implementirane u
JavaScript (jedna od njih je i, na primer, document.getElementById) često su nedovoljne za elegantno rešavanje tipičnih zadataka. Tu na red dolaze razne biblioteke koje
unapređuju i olakšavaju rad sa DOM-om. Osim toga, neke biblioteke čak nude implementaciju novih CSS selektora (koji su uvedeni u novu verziju 3 CSS standarda koji još
nije implementiran u sve čitače) ili neke druge načine pristupa elementima.
Osim podrške za DOM skoro sve biblioteke pokušavaju (i uspevaju) što je moguće više
izgladiti svima mrske razlike prikaza elemenata između raznih čitača.
Ako animaciju na Web stranici posmatramo kao promenu nekog svojstva određenog
elementa tokom vremena, onda ćemo lako zaključiti da pomoću JavaScript biblioteka
možemo jednostavno izraditi animacije koje će podići nivo upotrebljivosti i zanimljivosti
Web stranica (naravno, uz smišljenu i umerenu upotrebu).
10.9.2.
Olakšavanje i ubrzavanje programiranja
Osim samog olakšavanja pristupa i manipulacije DOM objektima (elementima stranice),
JavaScript biblioteke omogućuju korisnicima razne druge mogućnosti koje se razlikuju od
biblioteke do biblioteke i zavise od njene namene. Većina ih ima ugrađene efekte koje
je moguće primeniti na elemente web stranica. Efekti se kreću od običnih promena CSS
svojstva elementa do animacija i sličnih komplikovanih efekata koje bi bilo vrlo teško
pouzdano implementirati u JavaScriptu.
Uvod u JavaScript
301
Skoro sve biblioteke olakšavaju najkomplikovaniji i možda najvažniji deo razvijanja Weba,
takozvani event handling (upravljanje "događajima" koji pokreću neki efekt, npr. dolazak
pokazivača miša iznad nekog elementa). Biblioteke pomoću svojih ugrađenih metoda
pružaju programeru lakši i razumljiviji način pokretanja čestih funkcija, koje će u bilo
kom čitaču imati isti efekt. Većina njih olakšava manipulaciju stringovima i kolekcijama
(bilo kakvih podataka) i podržava asinhrono dohvatanje/dopremanje podataka sa raznih
lokacija (najčešće u XML ili JSON obliku).
10.9.3.
Proširivanje funkcionalnosti pomoću gotovih komponenti
Neke biblioteke podržavaju dodavanje gotovih komponenti koje proširuju funkcionalnost
stranica na vrlo jednostavan način. Primer proširenja je jQuery.lightbox koji omogućava efektno pregledavanje slika. Obično su te komponente osmišljene na način da
zauzimaju malo prostora i da se lako dodaju već aktivnoj biblioteci. Na taj način je moguće
uz relativno malo truda dodati stranici novu funkcionalnost čija je implementacija već
proverena i radi brzo i pouzdano umesto da svaki autor razvija svoju varijantu potrebnog
dodatka.
10.9.4.
Izbor JavaScript biblioteke
Trenutno se na Internetu može pronaći ogroman broj biblioteka (prema nekim izvorima
preko 1 000). Ali od takvog "izobilja" u obzir se isplati uzeti samo nekih 20-ak biblioteka.
Ostale otpadaju iz raznih razloga (funkcionalnost, nepridržavanje standarda, prestanak
razvoja i sl.).
Za izbor JavaScript biblioteke su presudna dva faktora – namena i veličina biblioteke. Postoje krajnosti koje omogućuju napredno objektno programiranje u JavaScriptu i koje predstavljaju pravo malo razvojno okruženje. Primer takvog okruženja je Prototype+ExtJS,
gde ExtJS predstavlja samu JavaScript biblioteku. Nedostaci takvih okruženja su komplikovano korišćenje, teško savladavanje osnova i veličina same biblioteke koja će usporiti
učitavanje Web stranice. Postoje i biblioteke koje jednostavno olakšavaju manipulaciju
elementima stranice, dodajući razne efekte i olakšavajući izbor DOM elementa kojim manipulišemo. Takve biblioteke su jednostavnije koncipirane, manje su i lakše je naučiti
njihovo korišćenje. Primeri takvih biblioteka su jQuery i Mootools (koja čak omogućava
da odaberemo samo one funkcionalne delove koji su nam potrebni).
10.10.
Fiksni i "kolapsabilni" paneli
U ovom delu biće reči o fiksnim i "kolapsabilnim" panelima, a biće prikazani i odgovarajući
primeri.
10.10.1.
Dizajn fiksnog panela
Prvo ćemo krenuti sa izradom fiksnog panela. To bi zaista trebalo da bude trivijalno.
Mislim da je sasvim jasno da je lako kreirati i koristiti HTML TABLE sa dva reda, gde
302
Multimedija
se u prvom redu nalazi tekst naslova i neka obojena pozadina. Da bi sve izgledalo lepše,
trebalo bi dodati i borduru.
To je zaista lako, međutim, većina Web programera troši ogromno vreme na izbor najboljih atributa, kolornih šema, rasporeda i definicija. Tu su od ogromne pomoći šabloni
(templejti), zato što su taj deo posla već odradili neki drugi ljudi.
Takođe, postoji mnogo potencijalnih prepreka. Na primer, postavljanje bordure border=1
za element TABLE daje punu borduru široku jedan piksel. Zatim, tabele sa podrazumevanim bordurama ne izgledaju isto u Internet Exploreru i Firefoxu. Prema tome, bolje je da
koristite CSS, sa stilom style="border: solid 1px".
<html>
<body>
<!-- TABLE-based HTML panel sa border=1 -->
<table cellspacing="0" cellpadding="5" width="170"
border="1" style="border-color:#336699; text-align:center;">
<tr><td bgcolor="#336699" style="color:#ffffff;">
N A S L O V
</td></tr>
<tr><td bgcolor="#f5f5f5">
<img width="150" height="100" src="../images/photo.jpg"
alt="Ovo je slika" title="Ovo je slika" /><br />
Sadrzaj ...
</td></tr>
</table>
</body>
</html>
Takođe, preporučuje se da koristite DIV, a ne TABLE, sa istom CSS style postavkom za
borduru. I DIV i TABLE su blok HTML elementi, ali DIV rendering se smatra pouzdanijim.
Uvod u JavaScript
303
Pored toga, ne morate uopšte da koristite TR i TD elemente. Bilo kako bilo, mnoge tehnike
koriste ili DIV, ili TABLE, ili kombinaciju.
Nisu potrebne slike, JavaScript kôd, eksterni fajlovi ili druge sekvence koda. Koristimo
takvu kolornu šemu (dark blue za traku sa potpisom za sliku i tanku borduru – u tonu sa
dominantnom bojom slike – a svetlo sivu za pozadinu) da je kontrast dovoljno izražen i
da su linije oštre.
Obratite pažnju na korišćenje float:right stila u DIV elementu, koji omogućava da
poravnamo boks desno u redu sa tekstom.
Donekle zbunjujući su oni atributi koji se odnose na margine između "rođačkih" (sibling)
i ugnježđenih (nested) HTML elemenata. TABLE cellpadding – koji podrazumevano nije
nula – definiše prostor između zida ćelije i sadržaja (margine).
TABLE cellspacing - takođe podrazumevano nije nula – definiše prostor između susednih
ćelija i redova. Ukoliko vam nisu potrebni, isključite ih eksplicitnom postavkom na 0.
Bolje je da ih definišete kroz CSS. Oni važe i za TABLE i za DIV, a možete da ih deklarišete
pojedinačno za svaku stranu (top, bottom, left i right). Za TABLE, padding je sličan sa
cellpadding, ali ne postoji CSS atribut za razmak. Postoji atribut margin, ali on definiše
prostor upolje (outer space) – ne unutar – ono što ostaje između elementa i njegovog
prethodnika (roditelja).
Sledi HTML kôd za jednostavan panel sa zaista tankom bordurom, koji koristi TABLE
kontejner i neposrednu stilsku deklaraciju unutar reda:
<html>
<body>
<!-- TABLE-based HTML panel sa tankom bordurom -->
<table cellspacing="0" cellpadding="0"
style="width:170px; border: solid 1px #336699; text-align:center;">
<tr>
<td style="background-color:#336699;color:#ffffff;padding:5px;">
N A S L O V
</td>
</tr>
<tr><td style="background-color:#f5f5f5;padding:10px;">
<img width="150" height="100" src="../images/photo.jpg"
alt="Ovo je slika" title="Ovo je slika " /><br />
Sadrzaj...
</td></tr>
</table>
</body>
</html>
A evo i ekvivalentne verzije koja koristi DIV kontejner:
<html>
<body>
304
Multimedija
<!-- DIV-based HTML panel sa tankom bordurom -->
<div style="width:170px;border:solid 1px #336699;text-align:center;">
<div style="background-color:#336699;color:#ffffff;padding:5px;">
N A S L O V
</div>
<div style="background-color:#f5f5f5;padding:10px;">
<img width="150" height="100" src="../images/photo.jpg"
alt="Ovo je slika" title="Ovo je slika" /><br />
Sadrzaj...
</div>
</div>
</body>
</html>
Dalji rad nastavićemo sa potonjom DIV verzijom i dodaćemo još dva nova elementa: (1)
gradijentnu pozadinu za naslovnu traku i (2) senku ispod panela sa sadržajem.
Gradijentne pozadine prikazuju osnovnu boju u različitim nijansama, od svetle do tamne,
po vertikalnoj ili horizontalnoj osi. Najjednostavnije rešenje za gradijentnu pozadinu je da
napravite malu sliku koja se ponavlja (repeat). Ovde je upotrebljena plava grdijentna slika
dimenzija 20 × 60 piksela u PNG formatu, koja će se ponavljanjem "razvući" (popločati)
prema veličini naše trake sa naslovom. Sve što je potrebno da uradite je da zamenite
stilski atribut background-color za naslovnu traku sa atributom background-image. Naravno, nemojte da zaboravite deklaraciju background-repeat:repeat-x, za automatsko
ponavljanje slike duž horizontalne ose.
Postoji više tehnika za kreiranje senke (shadow), ali je svakako najjednostavnije i vizuelno
sasvim efektno korišćenje jedne proste slike koja se dodaje neposredno ispod panela. Slika
mora da bude dovoljno velika kako bi mogla da se koristi i kod najvećeg mogućeg panela
koji u tom trenutku koristite. Kada se prikaže unutar IMG taga, njena širina mora da bude
postavljena na širinu koju ima i panel. Njena visina takođe mora da bude prilagođena sa
istim faktorom kako bi se održala proporcionalnost.
<html>
<body>
<!-- DIV-based HTML panel sa gradijent pozadinom i senkom -->
<div style="width:170px;border:solid 1px #336699;text-align:center;">
<div style="background-image: url(../images/gradient_blue.png);
background-repeat: repeat-x; color:#ffffff; padding:5px;">
N A S L O V
</div>
<div style="background-color:#f5f5f5;padding:10px;">
<img width="150" height="100" src="../images/photo.jpg"
alt="This is an image" title="This is an image" /><br />
Sadrzaj...
</div>
</div>
Uvod u JavaScript
305
<img width="170" height="20" src="../images/shadow.gif" alt="" />
</body>
</html>
10.10.2.
Dizajn "kolapsabilnog" panela
Sledi jedan relativno složen primer izrade tzv. "kolapsabilnog" panela u kome će biti
objedinjeno znanje HTML-a, CSS-a i JavaScripta.
Došlo je vreme da dodamo našem panelu funkcionalnost skupljanja i razvijanja (expand
and collapse). Ovo dinamičko ponašanje zahteva JavaScript kôd na klijentskoj strani.
Pre toga, potrebno je da dodamo jedan vizuelni element, takozvani ševron (chevron image, trakasti čin) na naslovnoj traci, koji se koristi kao okidač događaja za razvijanje i
skupljanje, a takođe pokazuje tekuće stanje panela. Stoga su nam potrebne dve slike
za ševron, druga je za 180 stepeni zarotirana prva slika. Imenovaćemo ih jednostavno
expand.gif i collapse.gif, a kreirati kao transparentne GIF slike.
Prikazaćemo ševron na desnoj strani trake za naslov, a tekst potpisa poravnaćemo ulevo.
Da bi to realizovali, podelićemo naš prethodni DIV caption element (element za naslov
i ševron sliku) na dva DIV-potomka, koji koriste float:left i float:right stilove za
svoje horizontalno poravnanje unutar pretka. Kada pređemo mišem preko njih pokazivač
menja oblik u šaku sa ispruženim kažiprstom i kada kliknemo "okida" se događaj pod
nazivom togglePanelStatus.
Za pretraživač Firefox, potrebno je takođe da postavimo njegovu visinu. CSS postavka
overflow:hidden diktira da će bilo koji ugrađeni sadržaj koji je veći od pretka biti automatski sakriven.
Podrazumeva se da većina čitača ne štampa pozadinske slike i boje. To možete videti
u Print Preview režimu, ako je vaša Page Setup ili čitačeva postavka koja se odnosi na
background printing isključena. Naš panel neće štampati svoju boju pozadine naslovne
306
Multimedija
trake, ali bi želeli da vidimo bar jednu tanku liniju koja odvaja potpis od sadržaja. Zato
smo postavili stil atribut border-top za oblast sadržaja.
<html>
<head>
<style type="text/css">
.squarebox {
width: 100%;
border: solid 1px #336699;
text-align: center;
overflow: hidden; }
.squareboxgradientcaption {
color: #ffffff;
padding: 5px;
background-image: url(../images/gradient_blue.png);
background-repeat: repeat-x; }
.squareboxcontent {
background-color: #f5f5f5;
padding: 10px;
overflow: hidden;
border-top: solid 1px #336699; }
</style>
<script language="javascript" type="text/javascript">
function togglePannelStatus(content)
{
var expand = (content.style.display=="none");
content.style.display = (expand ? "block" : "none");
var chevron = content.parentNode
.firstChild.childNodes[1].childNodes[0];
chevron.src = chevron.src
.split(expand ? "expand.gif" : "collapse.gif")
.join(expand ? "collapse.gif" : "expand.gif");
}
</script>
</head>
<body>
<!-- Kolapsabilni panel, sa odvojenim CSS-om i JavaScriptom -->
<div style="width:170px;">
<div class="squarebox"><div
class="squareboxgradientcaption"
style="height:20px; cursor: pointer;"
onclick="togglePannelStatus(this.nextSibling)"><div
style="float: left">N A S L O V...</div><div
style="float: right; vertical-align: middle"><img
src="../images/collapse.gif" width="13"
Uvod u JavaScript
307
height="14" border="0"
alt="Show/Hide" title="Show/Hide" /></div>
</div><div class="squareboxcontent">
<img width="150" height="100"
src="../images/photo.jpg"
alt="Ovo je slika" title="Ovo je slika" /><br />
Sadrzaj...
</div>
</div>
<img width="170" height="20" alt="" src="../images/shadow.gif" />
</div>
</body>
</html>
Uočite par izmena u ovom kodu. Odvojili smo glavne CSS stilove kao CSS klase, deklarisane u bloku STYLE sekcije HEAD Web stranice.
Slika 10.8. Animirani kolapsabilni panel u akciji
308
Multimedija
Stilovi se sada referenciraju od strane HTML elemenata po nazivu (imenu) klase. Ovo je
zgodno zbog višestruke iskoristivosti, boljeg strukturiranja i kreiranja kompaktnijeg HTML
koda. Ako kreirate više panela na istoj stranici sa sličnim stilovim, lakše je da specificirate samo naziv CSS klase, a ne da ponavljate više puta iste vrednosti. Kadgod su vam
potrebni dodatni stilovi za HTML element koji je već renderovan kroz CSS klasu, dodajte
stilski atribut neposredno preko inline pristupa.
Pogledajte sada JavaScript kôd, unutar SCRIPT tagova u sekciji HEAD. Potpis (caption
title) poziva togglePannelStatus funkciju kada se na njega klikne, prosleđujući kao
argument DIV content element. Ovaj element će biti sakriven (display="none") kod skupljanja (on collapse), a prikazan (display="block") kod razvijanja (on expand). Ostatak
koda menja izvor slike ševrona. Zapazite da sa SPLIT-JOIN kombinacijom na SRC string
atributu od IMG, menjamo samo naziv fajla, ne vodeći računa o celoj URL putanji.
10.10.3.
Osnovna JavaScript DOM svojstva
Većina implementacija sličnih kolapsabilnih panela koje možete naći na vebu su sasvim
nepotrebno suviše složeni. Neki zahtevaju jedinstvene vrednosti id atributa, kukije na
klijentskoj strani, elemente kojima se pristupa kroz pozive document.getElementById...
U našem slučaju nije potrebno ništa od toga. Koristićemo samo JavaScript DOM (Document Object Model) blok koda i ništa više, i to ćemo referencirati ka HTML elementima
na relativan način. U tom smislu postoje četiri osnovna DOM svojstva koja treba da
znate i da koristite, a prikazana su na slici: parentNode, nextSibling, firstChild i
childNodes.
JavaScript DOM je sada standard za većinu čitača, ali postoji jedna stvar o kojoj treba
da vodite računa: za razliku od Internet Explorera, Firefox neće ignorisati beline između
dva elementa, već će ih smatrati #Text DOM čvorom. Stoga striktno se pridržavajte
neposrednog ređanja HTML tagova, bez belina između zatvarajućeg taga i početka sledećeg taga.
Mogli biste i da enkapsulirate kompletan HTML kôd panela u funkciju, klasu ili Web
kontrolu na serverskoj strani, koju možete pozvati sa različitim vrednostima parametara,
kao što su da li je panel inicijalno razvijen ili skupljen, njegova širina, string naslova,
HTML sadržaj, da li želite senku itd.
Dobra stvar kod serverske ASP.NET/PHP ili čak klijentske JavaScript funkcije je da možete
automatski da podesite veličinu slike senke i da vaš kôd postane još kompaktniji. Buduća
Uvod u JavaScript
309
poboljšanja ove funkcije bi mogla da se odnose na automatsko propagiranje na sve stranice
sajta gde se panel koristi.
10.10.4.
Dizajn animiranog kolapsabilnog panela
Trenutak je da se doda završna finesa – animacija. Kada se panel razvija ili skuplja,
korisnik mora da vidi da se visina sadržaja postepeno povećava ili skuplja, što u stvari
stvara utisak animacije.
I ovoga puta učinjen je pokušaj da se stvari učine što je moguće prostijim, tako da je
izbegavano korišćenje ID-ova ili smeštanje međuvrednosti u kukije na klijentskoj strani.
Potpuno je jasno da treba da odredimo šta će biti visina (height) renderovanog sadržaja.
To je obično teško, zato što nemamo postavljenu vrednost visine i stvarna vrednost visine
se dinamički određuje u vreme izvršavanja od strane čitača.
Međutim, srećna okolnost je što imamo na raspolaganju offsetHeight svojstvo HTML
elementa, ali on mora biti vidljiv (HTML element). Kada je naš sadržaj skupljen i sakriven, prva stvar koju moramo da uradimo je da ga učinimo vidljivim (postavljamo display="block") i očitavamo njegov offsetHeight.
<html>
<head>
<link type="text/css" rel="stylesheet"
href="Animated-Collapsible-Panel-5.css" />
<script language="javascript" type="text/javascript"
src="Animated-Collapsible-Panel-5.js"></script>
</head>
<body>
<!-Animirani kolapsabilni panel, sa odvojenim CSS-om i JavaScriptom->
<div style="width:170px;">
<div class="squarebox"><div
class="squareboxgradientcaption"
style="height:20px; cursor: pointer;"
onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div
style="float: left">N A S L O V...</div><div
style="float: right; vertical-align: middle"><img
src="../images/collapse.gif"
width="13" height="14" border="0"
alt="Show/Hide" title="Show/Hide" /></div>
</div><div class="squareboxcontent">
<img width="150" height="100"
src="../images/photo.jpg"
alt="This is an image" title="This is an image" /><br />
Sadrzaj...
</div>
</div>
310
Multimedija
<img width="170" height="20" alt="" src="../images/shadow.gif" />
</div>
</body>
</html>
Završna implementacija koristi posebne CSS i JavaScript fajlove, koje referencira HTML
stranica.
Eksterni stilski fajlovi (.css) mogu da se referenciraju sa
<link type="text/css" rel="stylesheet" href="...css" />
redom koda u sekciji HEAD. Sledi sadržaj CSS-a koji smo prethodno koristili:
.squarebox {
width: 100%;
border: solid 1px #336699;
text-align: center;
overflow: hidden; }
.squareboxgradientcaption {
color: #ffffff;
padding: 5px;
background-image: url(../images/gradient_blue.png);
background-repeat: repeat-x; }
.squareboxcontent {
background-color: #f5f5f5;
padding: 10px;
overflow: hidden;
border-top: solid 1px #336699; }
Eksterni JavaScript fajl (.js) sa kodom može se referencirati sa
<script type="text/javascript" src="...js"></script>
Sledi potrebni JavaScript (JS) fajl koji smo odvojili od HTML stranice:
function togglePannelStatus(content)
{
var expand = (content.style.display=="none");
content.style.display = (expand ? "block" : "none");
toggleChevronIcon(content);
}
var currentContent = null;
function togglePannelAnimatedStatus(content, interval, step)
{
if (currentContent==null)
{
Uvod u JavaScript
311
currentContent = content;
var expand = (content.style.display=="none");
if (expand)
content.style.display = "block";
var max_height = content.offsetHeight;
var step_height = step + (expand ? 0 : -max_height);
toggleChevronIcon(content);
content.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ interval + "," + step
+ "," + max_height + "," + step_height + ")", interval);
}}
function togglePannelAnimatingStatus(interval,
step, max_height, step_height)
{
var step_height_abs = Math.abs(step_height);
if (step_height_abs>=step && step_height_abs<=(max_height-step))
{
step_height += step;
currentContent.style.height = Math.abs(step_height) + "px";
setTimeout("togglePannelAnimatingStatus("
+ interval + "," + step
+ "," + max_height + "," + step_height + ")", interval);
} else {
if (step_height_abs<step)
currentContent.style.display = "none";
currentContent.style.height = "";
currentContent = null;
}}
function toggleChevronIcon(content)
{
var chevron = content.parentNode
.firstChild.childNodes[1].childNodes[0];
var expand = (chevron.src.indexOf("expand.gif")>0);
chevron.src = chevron.src
.split(expand ? "expand.gif" : "collapse.gif")
.join(expand ? "collapse.gif" : "expand.gif"); }
Da bi inicijalno prikazali panel u skupljenom stanju, radimo ono što smo i ranije radili,
postavljamo stil za prikaz sadržaja na "none", a izvor ševrona na expand.gif.
Držimo neanimirano skupljeno stanje panela preko togglePanelStatus. Odvojili smo
312
Multimedija
menjanje ševron slike u toggleChevronIcon, zato što ta akcija mora da se koristi za animirani panel. Svaka animacija pozivaće togglePanelAnimatedStatus, prosleđujući kao
argumente neke parameter za podešavanje animacije – interval specificira broj milisekundi
između osvežavanja prikaza čitača za vreme animacije, a step daje broj piksela za koji
se uvećava ili smanjuje visina između dve sekvence osvežavanja. Kombinacija ove dve
veličine definiše u suštini brzinu animacije.
Kada animacija skupljanja/razvijanja počne, globalna promenljiva currentContent je postavljena na panel koji se procesira. Ovo sprečava uticaj na druge panele u tom trenutku.
Ne treba da se poziva document.getElementById iz togglePanelAnimatingStatus.
Realizovano je tako zato što je planirano da se ova poslednja funkcija uvek izvršava posle
vrednosti interval preko Javascript poziva setTimeout, i ne možete proslediti objekte kao
argumente ovoj funkciji.
Da bi koristili ove funkcije i za skupljanje i za razvijanje, pozitivnu step_height vrednost prosleđujemo za skupljanje, a negativnu za razvijanje. Kada step_height (koja drži
tekuću visinu animiranog panela) postane manja od 0 ili veća od max_height (koja drži
renderovanu offsetHeight vrednost panela) animacija se završava.
10.10.5.
Reverzni inženjering
Kada ovo vidite, prvo što ćete se zapitati: "Kako je ovo urađeno?" To nije teško utvrditi.
Skoro sve "kockice su skrojene" od malih slika i CSS klasa primenjenih na HTML elemente. Ako se javlja neko dinamičko ponašanje usled korisnikove akcije, kao što je skupljanje
ili razvijanje, ili promena oblika na klik miša ili prelazak miša preko elemenata, to najverovatnije znači da neki HTML elementi imaju JavaScript funkcije "prikačene" njihovim
događajima. Ono što je potrebno da locirate i izdvojite kako bi kreirali svoja rešenja je:
• Blok HTML koda koji renderuje prezentacioni boks. Dovoljno je da pogledate izvorni
kôd i locirate određene sekvence tražeći neke vidljive ključne reči prema prikazanom
tekstu.
• Definicije CSS stilova korišćenih sa tim HTML elementima. Neki elementi mogu da
imaju tzv. inline stilske deklaracije, preko style i drugih HTML specifičnih atributa.
Međutim, većina Web programera koristi posebne CSS definicije, bilo inline, unutar
STYLE blokova deklarisanih na istoj stranici, ili češće u posebnim CSS fajlovima,
linkovanih iz header sekcije stranice. Kad god vidite HTML atribut class, radi se o
CSS stil definiciji, lociranoj negde, a koja je potrebna za vaš dizajn.
• Slike korišćene za okvir. One se mogu pojaviti i kao IMG tagovi u HTML sekvenci
i u CSS stil definicijama.
• Definicija eventualnog JavaScript koda koji se koristi za boksove. JavaScript funkcije
i kôd pojavljuju se često unutar deklaracija događaja HTML elementa, kao što je
onclick, onmouseover, onmouseout... Kao i kod CSS-a, JavaScript kôd može biti
ili deklarisan inline, na istoj Web stranici, unutar SCRIPT blokova, ili definisan u
posebnim JS fajlovima, linkovanih iz header sekcije stranice.
Glava 11
Multimedijalno umrežavanje
Definisaćemo principe multimedijalnog umrežavanja i mrežne servise. Klasifikovaćemo
multimedijalne aplikacije i dati mehanizme za obezbeđivanje kvaliteta servisa, odnosno
specifične protokole za servis najboljeg pokušaja. Prikazaćemo odgovarajuće protokole i
arhitekture.
11.1.
Multimedijalne mrežne aplikacije
Osnovne karakteristike multimedijalnih aplikacija su:
1. tipična osetljivost na kašnjenje (end-to-end kašnjenje, jitter kašnjenje – promena
kašnjenja paketa unutar istog toka paketa) i
2. tolerancija gubitaka.
Ove karakteristike se razlikuju od "elastičnih" Web aplikacija, e-mail, FTP i Telnet, koje
su netolerantne na gubitke, ali tolerantne na kašnjenje.
Postoje tri klase multimedijalnih aplikacija:
1. Streaming (kontinualna isporuka) uskladištenog audio i video sadržaja,
2. Streaming audio i video signala-zapisa "uživo" i
3. interaktivni audio i video u realnom vremenu.
11.1.1.
Streaming uskladištenog audio i video sadržaja
Osnovne karakteristike ove klase aplikacija su:
• Audio i vodeo sadržaj je memorisan na hard disku. Moguće je koristiti funkcije
pauze, brzog premotavanja itd.
• Reprodukcija zvuka/videa iz fajla koji je uskladišten na server strani može da otpočne
i pre kompletnog "skidanja" fajla sa servera.
314
Multimedija
• Kontinualna reprodukcija.
Vremenska ograničenja za podatke koji još uvek treba da se prenesu nisu toliko stroga kao
kod aplikacija "uživo", interaktivnih aplikacija kao što su telefoniranje preko Interneta i
video konferencije.
Za reprodukciju se najčešće koristi sledeći softveri – RealPlayer, QuickTime i Media
Player.
11.1.2.
Streaming audio i video signala – zapisa "uživo"
Ova klasa aplikacija radi kao klasični radio i televizijski difuzni prenos gde je prenosni
medijum Internet. Koriste se IP tehnike višestrukog upućivanja. Mogu da se tolerišu kašnjenja do desetine sekundi od trenutka podnošenja zahteva za reprodukcijom. Nemuguće
je brzo premotavanje, ali je moguće premotavanje, pa pauza. Primeri aplikacija su Internet
radio talk show, uživo sportski događaji itd.
11.1.3.
Interaktivni audio i video u realnom vremenu
Tipične aplikacije su: IP telefoniranje, video konferencije, distribuirane interaktivne aplikacije itd. Pri prenosu glasa kašnjenja manja od 150 ms slušalac ne primećuje, kašnjenja
između 150 ms i 400 ms mogu biti prihvatljiva.
11.1.4.
Prenos glasa preko Interneta (Voice over IP – VoIP)
Prototip sistema za telefoniranje preko Interneta na osnovu prenosa paketa napravljen
je osamdesetih godina prošloga veka. Prva varijanta Internet telefoniranja realizovana je
devedesetih godina dvadesetog veka od jednog PC-ja do drugog PC-ja. Komunikacija
glasom preko Interneta postala je popularna krajem devedesetih godina. Aplikacija od
PC-ja do telefona dozvoljava korisniku sa Internet konekcijom i mikrofonom da pozove
svaki običan telefon. Veza se ostvaruje od PC-ja, preko mrežnog prolaza, komutiranih
telefonskih mreža, do telefona (fiksnog i/ili mobilnog). Za komunikaciju preko Interneta
između PC-ja i mrežnog prolaza, koriste se protokoli kao što je RTP, SIP i H.323. Druga
klasa aplikacija je od telefona preko Interneta do telefona. Ovo telefoniranje je jeftinije
od klasičnog telefoniranja.
11.1.5.
Problemi sa multimedijom na Internetu
Multimedijalne aplikacije su tipično osetljive na kašnjenja, ali su tolerantne na gubitke, za
razliku od od aplikacija koje rade sa podacima.
IP protokol obezbeđuje najbolju moguću uslugu svim datagramima (podaci na nivou
mrežnog sloja) koji se prenose preko Interneta. Protokol ne može da garantuje određeno
vreme prenosa zbog različitih kašnjenja individualnih paketa od jednog do drugog kraja i
zbog promene kašnjenja paketa unutar toka paketa. Protokol ne garantuje ni propusnost.
Kako TCP (Transmission Control Protocol) i UDP (User Datagram Protocol) protokoli rade
na vrhu IP (Internet protocol) protokola, oni ne garantuju određeno kašnjenje aplikacijama
Multimedijalno umrežavanje
315
koje ih pozivaju. Sistem Internet telefona i interaktivni video u realnom vremenu manje
su se koristili od prenosa uskladištenog zvučnog/video zapisa u realnom vremenu. Jitter
("treperenje") predstavlja različita kašnjenja paketa unutar istog toka paketa. Širina propusnog opsega, odnosno zagušenje na linkovima utiče na kvalitet prenosa glasa i videa u
realnom vremenu.
Aplikacijama se nudi najbolje rešenje od ponuđenih servisa najboljih pokušaja:
• bafering na klijent strani;
• korišćenje UDP protokola umesto TCP protokola;
• korišćenje više tipova kodiranja i izbor onog tipa koji se najbolje može isporučiti.
11.2.
Streaming uskladištene audio i video aplikacije
Poslednjih godina protok (streaming) zvučnog/video signala u realnom vremenu je bio
veoma popularna aplikacija. Kako cene diskova padaju, a kapaciteti rastu i kako se brzine
prenosa koje su korisnicima na raspolaganju povećavaju (kablovski modemi, ADSL), kao
i primena distribuiranog sadržaja (keširanje i CDN – Content Delivery Network) i novih
protokola koji zadovoljavaju određeni QoS (Quality of Service), ove aplikacije se sve više
koriste. Jedna od takvih aplikacija je i video visokog kvaliteta na zahtev korisnika.
Internet podržava QoS na tri načina:
• ne menja se ništa – koriste se tehnike aplikacionog nivoa da bi se ublažili efekti kašnjenja i džitera; ISP povećavaju širinu propusnog opsega kako zahtevi rastu; mreže
sa distribucijom sadržaja CDN repliciraju uskladišten sadržaj na krajeve Internet-a
(Web strane, MP3, video); koristi se višestruko upućivanje na aplikacionom sloju za
prenos "uživo" (sportski događaji), ...
• integrisani servisi – treba da se izvrše fundamentalne promene rutera i host računara tako da se obezbedi da virtuelna kola garantuju širinu propusnog opsega i
odgovarajuća kašnjenja.
• različite klase servisa – od klase virtuelnih kola gde se garantuje širina propusnog
opsega i određeno kašnjenje korisnika kojima se garantuje određeni saobraćaj na
Internetu.
Na klijentov zahtev server šalje komprimovani zapis na soket kao krajnju tačku komunikacija. U praksi se za multimedijalne aplikacije koriste UDP soketi. Pre slanja datoteke
sa audio/video zapisom u mrežu, datoteka se deli na segmente, a zaglavlja se obično
enkapsuliraju u UDP segment. Protokol RTP (Real Time Protocol) za rad u realnom vremenu predstavlja standard za enkapsulaciju. Interaktivnost korisnika (pauza, skok, ...) je
obezbeđena protokolom RTSP (Real Time Streaming Protocol).
Klijent prima zahtevanu datoteku koristeći medija plejer aplikaciju. Medija plejer ima
grafički interfejs sa odgovarajućim tasterima (kontrolna dugmad) kojima se ostvaruje interaktivnost. Funkcije medija plejera su:
316
Multimedija
• dekompresija audio/video zapisa,
• uklanjanje jitter-a koristeći privremenu memoriju (bafer),
• ispravljanje grešaka (prenos redundantnih paketa, ponovni prenos izgubljenih paketa
na zahtev klijenta, ...).
11.2.1.
Tipična arhitektura za striming
Ova arhitektura zahteva dva servera, HTTP server koji opslužuje Web stranice (uključujući
metadatoteke) i striming server, koji opslužuje audio/video fajlove.
Slika 11.1. Tipična arhitektura za striming – od striming servera do medija plejera
U ovom slučaju medija plejer koji izvršava reprodukciju audio/video datoteka, zahteva fajl
od striming servera, a ne od Web servera. Ovi serveri mogu međusobno da komuniciraju
koristeći sopstvene protokole.
Komprimovani video se smešta na prijemnoj strani u privremenu memoriju medija plejera. Posle početnog kašnjenja od nekoliko sekundi, medija plejer čita iz svoje privremene
memorije brzinom d i prosleđuje deo iz bafera na dekompresiju i reprodukciju.
Bafer se na klijent strani puni promenljivom brzinom x(t) i prazni brzinom d koja je konstantna u vremenu (slika 11.2).
Izbegavanje jitter-a se ostvaruje pridruživanjem broja sekvenci (sequence numbers), vremenskim markicama (timestamps) i playout kašnjenjem (slika 11.3).
Opšte osobine TCP protokola su:
• konekciono – orijentisani: zahteva se setup između klijent i server procesa
Multimedijalno umrežavanje
317
• pouzdani transport između šaljućeg i primajućeg procesa
• kontrola toka: pošiljalac neće preplaviti primaoca paketima
• kontrola preopterećenja: zagušenje pošiljaoca kada mreža postane preopterećena
• ne obezbeđuje određeno vreme, niti garantuje minimum širine opsega
Slika 11.2. Uklanjanje džitera koristeći privremenu memoriju (bafer)
Opšte osobine UDP protokola su:
• nepouzdani transfer podataka između procesa koji šalju i primaju podatke
• ne obezbeđuje se: setup konekcija, pouzdanost, kontrola toka, kontrola zagušenja
• ne garantuje se određeno vreme, ni širina opsega
Slika 11.3. Kašnjenje usled džitera
318
Multimedija
Za multimedijalne aplikacije više se koristi UDP protokol za koga je karakteristično:
• server šalje pakete brzinom koja odgovara klijentu (često se ignoriše kontrola mrežnih
zagušenja)
brzina slanja = brzina kodiranja = konstantna brzina
brzina punjenja = konstantna brzina - paketni gubici
• kratko kašnjenje (2 ÷ 5 sekundi) reprodukcije (playout) da bi kompenzovalo mrežno
jitter kašnjenje
• oporavak od greške ako vreme dozvoljava
Za TCP kada se koristi za multimedijalne aplikacije karakteristično je:
• slanje maksimalno mogućom brzinom uz kontrolu zagušenja
• brzina punjenja se menja zbog TCP kontrole zagušenja i retransmisije izgubljenih
paketa
• veće playout kašnjenje da bi bila "glatka" TCP brzina isporuke
• HTTP/TCP prolazi lakše kroz zaštitne barijere na Internetu
Tabela 11.1. Aplikacije i odgovarajući transportni protokoli
11.2.2.
Protokol za striming signala u realnom vremenu
(Real Time Streaming Protocol - RTSP)
Protokolu HTTP nije primarni cilj prenos multimedijalnog sadržaja. Ne postoje komande
za brzo premotavanje, repozicioniranje itd. Protokol RTSP (definisan RFC 2326) je klijentserver protokol aplikacionog sloja. Korisniku je omogućeno da kontroliše displej: premotavanje, brzo premotavanje, pauzu, nastavak itd.
Multimedijalno umrežavanje
319
Ovaj protokol ne definiše kompresione šeme za audio i video signale, ne definiše kako je
audio/video enkapsuliran za striming preko mreže, ne određuje kako se strimovani multimedijalni podaci transportuju (može biti transportovan preko UDP-a ili TCP-a) i ne određuje
kako media player baferuje audio/video pakete.
Na donjoj slici je prikazan način rada RTSP. Web brauzer zahteva metafajl od Web servera.
Brauzer startuje plejer. Player postavlja RTSP kontrolnu konekciju i konekciju za podatke
ka streaming server-u.
Slika 11.4. Rad RTSP protokola
11.3.
Multimedija u realnom vremenu:
Proučavanje telefoniranja preko Interneta
Kada govornik priča koristeći računar, naizmenično se smenjuju priča-govor (talkspurt) i
tišina. Frekvencija odabiranja audio signala je 64 kbps za vreme priče, gde se i paketi
generišu samo za vreme priče. Trajanje paketa je 20 ms, odnosno 160 bajtova po paketu.
Svakom skupu podataka govora dodaje se zaglavlje aplikacionog sloja, gde se zajedno
enkapsuliraju u UDP segment. Aplikacija šalje UDP segment na soket svakih 20 ms za
vreme talkspurt (slika 11.5).
320
Multimedija
IP datagram može biti izgubljen zbog zagušenja na mreži računara (to znači da je popunjen bafer rutera).
Mogući su gubici usled kašnjenja: IP datagram stiže suviše kasno za playout kod primaoca.
Ti gubici su zbog kašnjenja usled procesiranja, rada sa redovima u mreži i kašnjenja zbog
prostiranja od kraja do kraja mreže (pošiljalac i primalac). Tipično maksimalno dozvoljeno kašnjenje je 400 ms, dok je kašnjenje manje od 150 ms idealno.
Tolerancija gubitaka zavisno od kodiranja glasa, prikrivanja gubitaka, brzine gubitaka paketa ne prelazi 20%.
Za prenos multimedijalnih podataka na Internetu koristi se UDP protokol da bi se izbeglo kašnjenje koje unosi TCP protokol zbog kontrole zagušenja (congestion control) za
vremenski – osetljiv saobraćaj. Na klijent strani koristi se adaptivno playout kašnjenje za
kompenzaciju kašnjenja. Na server strani podešava se širina propusnog opsega strima od
klijenta do servera.
Slika 11.5. Enkapsulacija i prenos paketa
Oporavak od grešaka (na vrhu UDP-a) se izvodi preko preklapanja i ponovnog slanja
paketa (retransmisija).
11.4.
Protokoli za interaktivne aplikacije koje rade u
realnom vremenu – RTP, RTCP i SIP
Razmotrićemo sada osnovne osobine standarda za interaktivne aplikacije u realnom vremenu.
Multimedijalno umrežavanje
11.4.1.
321
Protokol za rad u realnom vremenu
(Real Time Protocol – RTP)
Ovaj protokol određuje strukturu paketa audio i video strimova. Predajna strana multimedijalne aplikacije dodaje polja zaglavlja malim delovima paketa (chunk) koji nose audio
i video podatke pre nego što ih prosledi transportnom sloju. Ta polja zaglavlja uključuju
identifikaciju korisnika, brojeve sekvenci i vremenske oznake paketa.
Ovaj protokol se koristi za interoperabilnost između multimedijalnih aplikacija (Internet
phone aplikacije). Radi na vrhu UDP protokola, odnosno RTP paketi su enkapsulirani u
UDP segmente (RFC 1889). RTP radi na krajevima sistema. RTP biblioteke obezbeđuju
interfejs transportnog sloja što proširuje UDP: broj porta, IP adresa, identifikacija tipa
podataka koji se prenose, brojevi sekvenci i vremenske oznake paketa.
Slika 11.6. RTP se može posmatrati kao podsloj transportnog sloja
Kao primer posmatramo slanje 64 kbps PCM – kodiranog glasa (impulsno kodna modulacija) preko RTP-a. Aplikacija sakuplja kodirane podatke u celine (na primer, svakih
20 ms, odnosno 160 bajtova po chunk-u).
Audio chunk sa RTP header-om formira RTP paket, koji je enkapsuliran u UDP segment.
RTP header pokazuje tip audio kodiranja u svakom paketu. Sender može da menja
kodiranje za vreme konferencije.
RTP ne daje bilo kakav mehanizam za obezbeđivanje isporuke podataka za određeno
vreme ili druge garancije za kvalitet servisa.
RTP enkapsulacija se jedino vidi na krajevima sistema: ona se ne vidi na ruterima između.
Ruteri koji obezbeđuju servis najboljeg pokušaja ne čine ništa da bi obezbedili da RTP
paketi stignu na odredište za određeno vreme.
11.4.2.
Real Time Control Protocol – RTCP
Radi u spoju sa RTP protokolom. Svaki učesnik u RTP sesiji periodično transmituje
RTCP kontrolne pakete svim ostalim učesnicima. Svaki RTCP paket sadrži sender i/ili
322
Multimedija
receiver izveštaje - statistiku. Statistika uključuje za korisnika koji šalje pakete: sinhronizaciju kolizije, trenutno vreme, broj poslatih paketa, broj poslatih bajtova. Na prijemnoj
strani: broj izgubljenih paketa, broj poslednje sekvence, srednju vrednost jitter-a itd.
Povratna sprega može da se koristi za kontrolu performansi (kontrola zagušenja, tip
kodovanja). Pošiljalac može da modifikuje transmisiju korišćenjem povratne sprege. Za
jednu RTP sesiju postoji tipično jedna višestruka (multicast) adresa; svi RTP i RTCP
paketi koji pripadaju toj sesiji koriste tu multicast adresu.
Paketi se šalju koristeći isti mehanizam kao podaci, jednostruko ili višestruko upućivanje
(unikast ili multikast).
RTP i RTCP paketi se razlikuju međusobno po različitim brojevima portova (+1). Da bi
ograničili saobraćaj, svaki učesnik smanjuje svoj RTCP saobraćaj kako se broj učesnika na
konferenciji povećava.
RTCP pokušava da ograniči svoj saobraćaj na 5% širine opsega sesije. Na primer – pretpostavimo da jedan korisnik šalje video zapis brzinom od 2 Mbps. RTCP pokušava da
ograniči svoj saobraćaj na 100 Kbps. RTCP daje 75% od ove brzine primaocu; preostalih
25% pošiljaocu. 75 kbps se podjednako deli između primaoca. Sa R primaoca, svaki primalac dobija da pošalje RTCP saobraćaj od 75/R kbps. Pošiljalac dobija za slanje RTCP
saobraćaj brzine 25 kbps.
Učesnik određuje RTCP brzinu transmisije paketa proračunavajući srednju vrednost veličine RTCP paketa (kroz celu sesiju) i deleći je sa alociranom brzinom.
11.4.3.
Protokol za inicijalizaciju sesije
(Session Initiation Protocol – SIP)
Pretpostavimo: da svi telefonski pozivi i pozivi video konferencija idu preko Interneta, da
se ljudi identifikuju po imenima ili e-mail adresama radije nego po telefonskim brojevima
i da se korisnik koji poziva može naći (dostupan je) bez obzira gde je ili koji IP uređaj
trenutno koristi.
Uspostavljanje poziva se zasniva na startu, upoznavanju pozvanog korisnika sa željom za
uspostavljanje poziva i završetku poziva, kao i dogovaranju o tipu medijuma i kodiranju.
Obezbeđuje se tekuća IP adresa pozivaoca. Mapiranje imena i e-mail adrese na IP adresu
definiše mobilnost, promenu IP adrese zavisno od DHCP-a, više različitih IP uređaja po
korisniku i preusmeravanje poziva.
Upravljanje pozivom podrazumeva: dodavanje novih strimova za vreme poziva, promenu
vrste kodiranja za vreme poziva, poziv drugih korisnika i transfer i zadržavanje poziva.
11.5.
Računarske mreže sa distribuiranim sadržajima
za isporuku
Problem predstavlja slanje velikih fajlova (na primer, video stream-a) sa jednog izvorišnog
servera u realnom vremenu drugim klijentima koji se nalaze na geografski udaljenim mes-
Multimedijalno umrežavanje
323
tima. Rešenje je pravljenje replika sadržaja na stotine servera kroz Internet, i mešanje
sadržaja "blizu" korisnika izbegavajući gubitke i kašnjenja sadržaja koji se šalje duž dugih
putanja. CDN (Content Delivery Network) server se nalazi tipično na ivici/pristupnoj mreži
(slika 11.7).
Slika 11.7. Tipičan CDN distribuirani čvor za isporuku sadržaja
Na slici 11.8 izvorni server (www.foo.com) distribuira HTML stranu. Zamenjuje adresu:
http://www.foo.com/sports.ruth.gif
adresom
http://www.cdn.com/www.foo.com/sports/ruth.gif
CDN kompanija (cdn.com) distribuira određeni gif fajl. Koristi svoj authoritative (nadležan) DNS server da rutira odnosno preusmeri zahteve.
11.6.
Distribuirani multimedijalni sistemi
Multimedijalne aplikacije zahtevaju nove sistemske mehanizme kako bi sebi obezbedile rad
sa velikim brojem vremenski zavisnih podataka (slika 11.9).
324
Multimedija
Slika 11.8. Rutiranje (preusmeravanje) zahteva
Najvažniji od ovih mehanizama se bave upravljanjem kvalitetom servisa. Oni treba da
alociraju širinu propusnog opsega i druge resurse na način koji obezbeđuje ispunjenje
zahteva aplikacije.
Slika 11.9. Tipična infrastruktura za multimedijalne aplikacije
Upravljanje kvalitetom servisa definisano je zahtevima aplikacije: širina propusnog opsega,
kašnjenje i broj izgubljenih paketa strima, kontrola pristupa, pregovori sa aplikacijom oko
karakteristika. Jednom kada se QoS zahtevi prihvate, resursi se rezervišu i garantuju aplikaciji.
Multimedijalno umrežavanje
325
Oblikovanje saobraćaja koristi algoritme koji baferuju podatke u realnom vremenu kako
bi saobraćaj bio uravnotežen (bez "uskog grla" i "špiceva"), koristeći princip "kofe koja
curi" (slika 11.10).
Slika 11.10. Algoritmi za ujednačavanje saobraćaja
Strimovi se mogu prilagoditi za iskorišćenje više resursa smanjenjem širine opsega resursa
(skaliranje) ili u tačkama na putu prenosa (filtriranje), gde se mogu rezervisati određene
širine propusnog opsega.
"Tigar" video fajl server je primer skalabilnog sistema (Sjedinjene američke države) koji
obezbeđuje isporuku video strimova u realnom vremenu na zahtev na velikim rastojanjima
sa jakim garancijama za QoS. Sistem može da servisira 602 istovremene isporuke strimova
brzinom od 2 Mbps sa gubicima koji su manji od jednog bloka (video strim trajanja 1 s)
od 180 000 prenetih blokova.
11.7.
Iznad najboljeg pokušaja
Postavlja se pitanje kako razvijati Internet da bi se obezbedio garantovani kvalitet usluga
(QoS) korisnikovim aplikacijama.
Slika 11.11. Garantovani kvalitet usluga (QoS)
326
Multimedija
Postoje četiri principa kao odgovor na ovo pitanje:
1. markiranje paketa za ruter kako bi vodio računa o različitim klasama, kao i nova
politika raspoređivanja na ruterima na osnovu koje se tretiraju paketi;
2. obezbeđivanje zaštite (izolacije) jedne klase od drugih;
3. što efikasnije korišćenje resursa; i
4. dopuštanje poziva – protok deklariše svoje potrebe, mreža može da blokira poziv
(na primer, signal zauzeća) ako ne može da ispuni zahtevani uslov.
Glava 12
Internet i Web servisi
Internet je nastao kao rezultat rada istraživačke mreže američke agencije ARPA krajem
šezdesetih godina dvadesetog veka. Od tada, ubrzani razvoj Interneta je doveo do toga
da je 2009. godine. Internetom bilo povezano 1, 73 milijarde korisnika i registrovano više
od 81, 8 miliona domena imena ".com". Tokom 1992. godine dozvoljeno je komercijalno
i poslovno korišćenje Interneta.
12.1.
Umrežavanje
Mreža je skup računara, sa jednim računarom koji radi kao server da bi obezbedio mrežne
servise kao što je fajl transfer, elektronska pošta ili štampanje dokumenata na računaru
klijenta. Koristeći mrežne prolaze i rutere, lokalne mreže (LAN) mogu da se povežu sa
drugim lokalnim mrežama i formiraju veće mreže (WAN). Ove mreže mogu da se povežu
na Internet kroz servere koji obezbeđuju neophodan softver za Internet i konekciju za
podatke (obično širokopropusne telefonske linije).
12.1.1.
Domeni najvišeg nivoa
Kada su originalni ARPANET protokoli za komunikaciju između računara uključeni u
protokol TCP/IP (Transmission Control Protocol/Internet Protocol) 1983. godine, sistem
domenskih imena (Domain Name System – DNS) je bio razvijen za dodelu imena i adresa
računarima koji su povezani na Internet. Domeni najvišeg nivoa (TLD) su uspostavljeni
kao kategorije za lakše snalaženje korisnika na Internetu (com, edu, gov, int, mil, net,
org, kodovi od dva slova za više od 240 zemalja i teritorija). Ime se gradi od domena
najvišeg nivoa, preko domena različitih nivoa odvojenih tačkom polazeći od desne strane
ka levoj.
Za e-mail račun se kaže da je "na" ("at" - @) domenu. U nazivu e-mail adrese nema blank
znakova i mada se adrese na Internetu mogu pisati i velikim i malim slovima, uobičajeno
je da se koriste mala slova.
328
Multimedija
12.1.2.
IP adrese i paketi podataka
Kada se tok (stream) podataka pošalje preko Interneta, TCP protokol ga prvo podeli na
pakete. Svaki paket uključuje adresu odredišnog računara, broj sekvence ("ovo je paket
broj 7"), informacije za korekciju greške i deo podataka koji se šalju. Nakon kreiranja
paketa od strane TCP protokola, IP protokol šalje paket na odredište duž putanje (rute)
koja može da uključi više drugih računara.
Tridesetdvobitna adresa (IPv4) uključena u paket podataka, IP adresa, je stvarna Internet
adresa. Sastavljena je od četiri broja odvojena tačkama (na primer, 140.174.162.10).
Neki od ovih brojeva su dodeljeni od strane Interneta, a neki mogu dinamički biti dodeljeni
od strane Internet Service Providera (ISP) kada se računar priključi na Internet preko dialup konekcije. U primeni je nov standard 128-bitnog adresiranja IPv6.
Na Internetu postoje serveri domenskih imena čiji je posao da brzo pretraže tekstualne
adrese imena domena u velikim distribuiranim bazama podataka, konvertuju ih u realne
IP adrese, a zatim ih vrate i insertuju u pakete podataka. Kad god se konektujete na
http://www.google.com
ili pošaljete e-mail, server domena imena se konsultuje i odredišna adresa se konvertuje u
brojeve. IP adrese i imena domena mogu da se koriste naizmenično. Servis ping, ili "whois"
funkcija u Unix-u, mogu da otkriju IP adresu domena. Adresiranje uključuje osim IP adrese
i broj porta. Popularnim protokolima aplkacijskog sloja dodeljeni su određeni brojevi
portova, na primer za HTTP server 80, za mail server 25 itd. Spisak poznatih brojeva
portova za sve standardne Internet protokole nalazi se na adresi: http://www.iana.org.
12.1.3.
Povezivanje na Internet
Postoji više načina povezivanja na Internet: telefonski dial-up račun ili širokopojasni kabl,
digitalne pretplatničke linije (DSL), ili bežična oprema za povezivanje na Internet Service
Provider (ISP). Postoje i online servisi kao što su America Online (AOL) ili Microsoft Network (MSN) koji koriste specijalni softver i rade kao provajderi za povezivanje na "kičmu"
Interneta - ultra širokopojasne mreže sa kojima rade MCI, AT&T, Sprint i druge telekomunikacione kompanije.
12.1.4.
Mala širina propusnog opsega
Propusni opseg se definiše preko količine podataka, odnosno preko broja bitova u sekundu
(bps), koji se mogu poslati sa jednog računara na drugi u datom intervalu vremena. Što
je brži prenos (što je veća širina propusnog opsega određene veze) manje vremena se čeka
na tekst, slike, zvuk i animirane ilustracije za upload ili download sa računara na računar.
Ako želite da računate brzinu u bajtovima u sekundu, podelite brzinu sa 8.
Internet i Web servisi
12.2.
329
Internet servisi
Za mnoge korisnike Internet znači World Wide Web. Ali Web je samo poslednji i najpopularniji od servisa koji su dostupni na Internetu. E-mail, fajl transfer, diskusione grupe i
vesti, ćaskanje u realnom vremenu koristeći tekst, glas i video, i sposobnost prijave (logovanja) na udaljene računare su ostali Internet servisi.
Svaki Intenet servis je implementiran na Internet serveru kao posvećeni softver poznat kao
daemon. (Ustvari,daemon-i samo postoje u Unix/Linux sistemima. Na drugim sistemima
kao što je Windows NT, servisi mogu da rade kao obične aplikacije ili procesi koji rade u
pozadini). Postoji podela Internet servisa na osnovne, javne, sigurnosne i sistemske.
330
Multimedija
Daemon je agent program koji se izvršava u pozadini, čekajući da reaguje na spoljne
zahteve. u slučaju Interneta, daemon-i podržavaju protokole kao što je HTTP za World
Wide Web, POP3 protokol za e-mail, ili FTP protokol za razmenu fajlova. Ovi programi
mogu biti smešteni na različitim serverima.
12.2.1.
MIME tipovi
Rad sa multimedijom na Internetu zahteva rad sa odgovarajućim protokolima koristeći prepoznatljiva dokumenta i formate. Snimljeni glas kao attachment e-mail poruci, na primer,
mora da identifikuje Post Office daemon, a zatim treba da bude prenešen sa korektnim
kodovanjem do odredišnog računara. Odredišni računar treba da ima odgovarajući softver
(i hardver) za dekodiranje informacija i preslušavanje poruke. Da bi identifikovao prirodu
podataka koji se prenose, i zaključio koja je svrha tih podataka, Internet koristi standardnu listu ekstenzije imena fajla zvanu MIME – tipovi (Multipurpose Internet Mail
Extensions). Mnogi brauzeri dozvoljavaju definisanje MIME – tipova. Na primer, sa
Netscape navigatorom možete da definišete Adobe-ove akrobat fajlove (PDF fajlove) kao
MIME – tip i selektujete Acrobat Reader kao plejer aplikaciju.
Ovo ne koristi samo e-mail daemon, već, po konvenciji, i drugi Internet daemoni uključujući Web-ov HTTP daemon. Možda najčešće instaliran HTTP softver za upravljanje Web
stranicama je aplikacija otvorenog koda zvana Apache (http://www.apache.org).
Multimedijalni elementi su tipično čuvani i prenošeni na Internetu u odgovarajućem MIMEtip formatu i imaju odgovarajuće ekstenzije toga tipa. Na primer, Shockwave Flash fajlovi
sa animacijom imaju ekstenziju .swf, fajlovi sa slikom .jpg, .jpeg, .gif ili .png, fajlovi
sa zvučnim zapisom završavaju se sa .au, .wav, .aif, .mp3; Quick Time i drugi video
klipovi završavaju se ekstenzijom .qt, .mov ili .avi.
Slika 12.1. Browser (aplikacija za pronalaženje i prikaz Web stranica) određuje kako da
procesira podatke
Internet i Web servisi
12.3.
331
Mrežne aplikacije
Klijent je proces koji inicira komukikaciju sa serverom. Server je proces koji pruža usluge klijentima. Proces je program koji se izvršava na host računaru. Na istom hostu,
dva procesa komuniciraju koristeći međuprocesne komunikacije (definisane operativnim
sistemom). Procesi na različitim hostovima komuniciraju razmenom poruka. Proces šalje/prima poruke ka/od svog socket-a. Soket je krajnja tačka komunikacije. Trebalo bi i
napomenuti da postoji analogija soketa i vrata.
Mrežne aplikacije mogu biti klijent server, P2P i njihova kombinacija.
12.3.1.
World Wide Web i HTTP
Web obezbeđuje interfejs za pristup ogromnim količinama zvučnog i video materijala koji
se čuva na Internetu. Ovim i drugim multimedijalnim sadržajima se pristupa na zahtev.
Web strana (dokument) se sastoji od objekata. Objekat može biti HTML fajl, JPEG
slika, Java aplet, audio fajl... Web strana se sastoji od osnovnog HTML-fajla koji uključuje
nekoliko referenciranih objekata. Svaki objekat može da se adresira koristeći URL (Uniform
Resource Locator), na primer:
www.someschool.edu/someDept/pic.gif
gde prvi deo definiše ime host računara, a drugi deo putanju do određenog objekta, u
ovom slučaju gif fajla. Browser je korisnički agent za Web. Softverski agent se definiše
kao autonomni proces sposoban da reaguje i inicira promene u svom okruženju, posebno
u saradnji sa drugim korisnicima i drugim agentima. Proces je program u izvršenju.
HTTP (Hypertext Transfer Protocol) je protokol sloja Web aplikacija. On definiše način
na koji Web klijenti (na primer brauzeri - čitači, pregledači) traže Web strane od Web
servera, kao i način na koji Web serveri šalju tražene strane klijentima.
Posmatramo klijent/server model. Klijent koristi browser koji zahteva, prima, "prikazuje
na displeju" Web objekte. Server šalje objekte kao odziv na zahteve klijenta. Klijent
inicira TCP konekciju (kreira soket) ka serveru, port 80. Server prihvata TCP konekciju
od klijenta. HTTP poruke (poruke protokola aplikacijskog sloja) se razmenjuju između
browser-a (HTTP klijent) i Web servera (HTTP server). Zatvara se TCP konekcija.
HTTP je "stateless" protokol, odnosno server ne održava informacije o prethodnim zahtevima klijenata. Interakcija između korisnika i servera se odvija preko kolačića (cookies),
koji vode računa o "stanju" konekcija. Tehnologija kolačića definisana je preko četiri
komponente:
• linija u zaglavlju HTTP odzivne poruke
• linija u zaglavlju HTTP poruke sa zahtevom
• cookie fajl koji se čuva na korisnikovom host računaru i kojim se upravlja od strane
korisnikovog browser-a
• pozadinsku bazu podataka koja se nalazi na Web lokaciji
332
Multimedija
Kolačiće koriste veliki portali, sajtovi za elektronsku trgovinu, oglašavanje itd. Korišćenje
kolačića može narušiti privatnost klijenata.
Web keš (zastupnik – proksi server) se koristi da se zadovolji klijentov zahtev bez uključenja
izvornog Web servera. Korisnik startuje browser koji šalje sve HTTP zahteve kešu. Ako
je objekat u kešu – keš vraća objekat, ako nije, keš zahteva objekat od izvornog servera,
a zatim vraća objekat klijentu. Zašto se koristi Web keširanje? Smanjuje se vreme odziva
na zahtev klijenta. Smanjuje saobraćaj na pristupnom linku korisnika. Internet sa kešom
omogućuje da "siromašan" sadržaj provajdera bude efikasno isporučen.
Slika 12.2. Zahtev za korišćenje objekata koristeći Web keš
12.3.2.
Protokol za transfer fajlova
(the File Transfer Protocol – FTP)
Ovaj protokol se koristi za transfer fajlova ka ili sa udaljenog host računara. Posmatra se
klijent/server model, odnosno klijent je strana koja inicira transfer (daljinski), a server je
udaljeni host računar. Definisan je u RFC 959.
Slika 12.3. Elektronska pošta
FTP klijent kontaktira FTP server na portu 21, određujući TCP kao transportni protokol.
Klijent dobija autorizaciju preko kontrolne konekcije. Klijent pretražuje udaljeni direktorijum šaljući komande preko kontrolne konekcije. Kada server primi komandu za transfer
Internet i Web servisi
333
fajla, server otvara TCP konekciju za prenos podataka ka klijentu. Nakon transfera jednog
fajla, server zatvara konekciju.
FTP server održava "stanje" korisnika – tekući direktorijum, prethodna autorizacija, korisnički nalog itd.
Postoje tri glavne komponente elektronske pošte korisnički agenti, mail serveri i protokol
za transfer elektronske pošte (Simple Mail Transfer Protocol – SMTP).
Korisnički agent (aplikacija), često nazvan i "čitač pošte", kreira, edituje, čita mail poruke.
Popularni korisnički agenti su Mozilla Firefox, Microsoft Outlook, Netscape Messenger, a
tekstualni elm, mail itd. Odlazeće i dolazeće poruke su uskladištene na serveru.
Mail serveri u mailbox – poštanskom sandučetu sadrže dolazeće poruke za korisnika, kao
i red odlazećih poruka (koje će biti poslate). Za slanje poruka između mail servera koristi
se SMTP protokol.
Za pouzdan transfer e-mail poruke od klijenta do servera na portu 25 koristi se TCP
protokol. Transfer je direktan bez posrednika od servera koji šalje do servera koji prima
poruke.
SMTP je mnogo stariji protokol od HTTP-a. SMTP koristi perzistentne konekcije i zahteva da poruka (zaglavlje i telo) bude u 7-bitnom ASCII formatu, dok HTTP protokol
nema to ograničenje. Dakle, oba protokola se koriste za transfer fajlova. HTTP protokol
je "pull" protokol koji "vuče" podatke, dok SMTP "push" "gura" podatke. Oba protokola
imaju interakciju komanda/odziv u ASCII kodu i statusni kôd. Kod HTTP protokola svaki
objekat je enkapsuliran u svoju sopstvenu odziv-poruku. Kod SMTP protokola svi objekati
su u jednoj poruci.
MIME (Multipurpose Internet Mail Extension) je proširenje za rad sa multimedijom (RFC
2045, RFC 2056). Dodatne linije u zaglavlju poruke deklarišu MIME tip sadržaja.
Slika 12.4. Format poruke: multimedijalne ekstenzije
Protokoli za pristup pošti (mail access protocol) i pronalaženje pošte na serveru su POP3
(Post Office Protocol) (RFC 1939) i IMAP (Internet Mail Access Protocol) (RFC 1730)
koji ima bolje karakteristike, ali je kompleksniji.
Postoje i Web bazirani e-mail koji rade sa HTTP protokolom: Hotmail, Yahoo, Mail itd.
334
12.4.
Multimedija
World Wide Web i HTML
World Wide Web je startovao 1989. godine u CERNU kao "distribuirani kolaborativni
hipermedijalni informacioni sistem". Projektovao ga je Tim Berners - Lee kao protokol
za povezivanje više dokumenata lociranih na računaru bilo gde na Internetu. Hyper Text
Transfer Protocol (HTTP) je obezbedio pravila za jednostavne transakcije između dva
računara na Internetu a sastavljen je od
1. uspostavljanja konekcije,
2. zahteva da dokument treba da bude poslat,
3. slanja dokumenta, i
4. zatvaranja konekcije.
On takođe zahteva jednostavan format dokumenta nazvan Hypertext Markup Language
(HTML) za predstavljanje strukturiranog teksta pomešanog sa slikama.
Jedan HTML dokument može da sadrži hiperlinkove ili anchor-e koji upućuju na druge
slične dokumente. Korisnik može da surfuje iz dokumenta u dokument po Webu koristeći
HTML okruženje.
12.4.1.
Dinamičke Web stranice i XML
HTML je pogodan za pravljenje i isporuku jednostavnijih statičkih Web stranica. Međutim, za isporuku dinamičkih stranica izgrađenih kao kombinacija teksta, grafike, animacija
informacija sadržanih u bazama podataka ili dokumentima, potrebni su drugi alati i programerske veštine. JavaScript i programi napisani u Java programskom jeziku mogu da
se insertuju u HTML stranice kako bi se izvršile funkcije i složeniji zadaci.
Cold Fusion i PHP su aplikacije koje rade jedna sa drugom i sa Web serverom kao što
je Apache; oni skeniraju odlazeću Web stranicu za specijalne komande i naredbe, obično
ugrađene u specijalne tagove. Kada naiđe na specijalni tag na stranici, softver će uraditi
ono što tag definiše, na primer, "uzmi današnji datum i ubaci ga u ćeliju tabele". Radeći
paralelno sa aplikacionim serverima, Oracle, Sybase i mySQL nude softver za upravljanje
SQL (Structured Query Language) bazama koje mogu da sadrže ne samo teks već i grafiku
i multimediju.
Flash animacije i Director aplikacije mogu takođe da se pozovu iz HTML stranica. Ove
multimedijalne mini aplikacije, često programirane od strane Web developer-a, koriste
brauzerove plaginove za prikaz akcije i izvođenje zadataka kao što su izvođenje zvučnih
zapisa, prikazivanje videa ili neko drugo izračunavanje. Kao i Cold Fusion i PHP i oni
koriste programske jezike, odnosno, skripta (ActionScript i Lingo).
XML (eXtensible Markup Language) ide iznad HTML-a. To je novi korak u razvoju Interneta za formatizovanje i isporuku Web stranica koristeći stilove. Za razliku od HTML-a
možete da kreirate sopsvene tagove u XML-u za opis tačno onoga što podaci znače i
možete dobiti te podatke sa bilo kog mesta na Webu. Na primer:
Internet i Web servisi
335
<voce>
<vrsta>Jabuka</vrsta>
<podneblje>Metohija </podneblje>
<cena>50dinara </cena>
</voce>
AJAX (Asynchronous JavaScript AND XML) kao nova tehnika za isporuku Web stranica,
koristi kombinaciju XML-a, CSS-a (cascading style sheets informacije o obeležavanju i
stilu) i JavaScript za generisanje dinamičkih prikaza i interakciju unutar Web brauzera.
12.5.
Web servisi
Web servis je sofverski sistem dizajniran da podrži interoperabilne interakcije od računara
ka računaru preko računarske mreže. Interfejs je opisan u formatu koji može da procesira
računar WSDL (Web Services Description Language). Drugi sistemi interaguju sa Web
servisom na način opisan koristeći SOAP (Simple Object Access Protocol) poruke, tipično
prenošene koristeći HTTP sa XML serijalizacijom u spoju sa drugim Web-povezanim standardima.
Web servis je apstraktan pojam koji mora biti implementiran konkretnim agentom. Agent
je deo softvera ili hardvera koji šalje ili prima poruke, dok je servis resurs okarakterisan sa
apstraktnim skupom funkcionalnosti kojima je obezbeđen.
12.6.
Mrežne multimedijalne aplikacije
Postavljanje multimedijalne aplikacije 1994. godine između Kalifornije i Kopenhagena
trajalo je nekoliko dana i koštalo je oko 100 000 dolara za radne sate, opremu i komunikacije. Od tada cena postavljanja multimedijalnih aplikacija stalno opada. Multimedijalne mrežne aplikacije prožimaju sve oblasti od video igara na računarskim mrežama do
edukacije, odnosno, učenja na daljinu.
Postoji još jedna klasifikacija multimedijalnih aplikacija u dve grupe. Prva grupa aplokacija
Multimedia Content Delivery – MCD aplikacije koje dozvoljavaju ljudima da pristupe i rade
sa elektronskim sadržajem (isporuka multimedijalnog sadržaja). Primeri su – pristup digitalnim video bibliotekama, praćenje video programa, kombinovanje delova različitih video
programa da bi se napravio novi program.
Druga grupa zvana PMC – Personal Multimedia Communication aplikacije koje omogućuju
ljudima širok opseg komunikacionih aplikacija sa bilo kog terminala i sa bilo koje lokacije.
Primeri PSTN i ISDN su osnov telefonskih servisa i video konferensije, dok primeri iz sveta
mobilnih telefona (cellular) i Internet sveta koriste dobro poznate multimedijalne servise
kao što su SMS/MMS, Presence, Instant Messaging, Push to Talk, Unified Messaging
itd.
Na komercijalnom nivou provajderi pristupa nude istovremeno fiksne i mobilne IP telefonske servise, IPTV i Web pristup i pružaju korisniku mogućnost da plaća sve servise
preko jednog računa.
336
Multimedija
Ako kao primer uzmemo Microsoft Messenger servis, on obezbeđuje ne samo rad sa
porukama nego i telefiniranje, video telefoniranje, razmenu sadržaja, tekstualne/audio/video vesti, jaku spregu ka elektronskoj pošti, news grupe, kupovinu preko mreže, blogove
itd. Ovo znači da je veoma teško posmatrati određeni servis kao usamljenu mrežnu aplikaciju. To je komponenta koja treba da bude pridružena drugim mrežnim aplikacijama
uz standardizovane mrežne interfejse, ne samo za korisnika sevisa (klijenta) nego i za
infrastrukturu servis provajdera.
Tehnički posmatrano postoji trend konvergencije PC industrije i difuzne (broadcast) industrije.
Televizijski terminali zahtevaju uređaje koji primaju i dekodiraju digitalni televizijski signal
koji se difuzno prostire i imaju interfejs ka Internetu kroz korisnikov televizor. U IPTV
mrežama, taj uređaj je mali računar koji obezbeđuje dvosmernu komunikaciju na IP mreži
i dekodira video striming podatke. Ovo dozvoljava podacima iz različitih aplikacija da se
prostiru zajedno sa TV strimovima, interaguju sa TV programom i kreiraju nove aplikacije.
Internet Protocol televizija (IPTV) je sistem koji televizijske i/ili video signale distribuira
do pretplatnika ili gledaoca koristeći difuzne konekcije preko Internet protokola. Često je
ovo paralelno sa pretplatnikovom Internet konekcijom dobijenom od broadband operatora
koristeći istu infrastrukturu, ali preko dodeljene određene širine propusnog opsega. Dok
fiksne broadband konekcije imaju dovoljno veliku širinu propusnog opsega koja garantuje
visok kvalitet interaktivnih multimedijalnih aplikacija, ovo još uvek nije primenjeno na
GSM/GPRS pristup mobilnim mrežama.
IPTV kombinuje televiziju visoke definicije (High Definition TV – HDTV) i nove standarde
kompresije AVC (Advanced Video Compression). Prednosti IPTV uključuju dvosmernu
komunikaciju kao i point-to-point distribuciju dozvoljavajući svakom gledaocu da gleda
program koji želi. Ovo znači – sopstvena kontrola (pauza, premotavanje ...) i slobodna
selekcija programa. Omogućena je i integracija sa drugim uređajima kao što su PDA i
mobilni telefoni.
Interaktivna televizija nudi (Interactive Digital Television – iDTV) prošireni TV sa različitim
sadržajem (teks, grafika ili video), Internet dozvoljavajući korisniku da surfuje Webom,
elektronsku poštu (čitanje i pisanje), ćaskanje itd. Individualno korišćenje TV resursa
omogućuje korisniku promenu ugla kamere, pozive i trenutne odgovore. Drugi zajednički
elementi iDTV su video na zahtev (Video-on-Demand – VOD) i funkcije personalnog video
rekordera.
Glava 13
PHP
PHP predstavlja jezik za pisanje skriptova koji rade na serveru. Projektovan je za upotrebu
na Web-u. Njegovu početnu verziju je 1994. godine napravio Rasmus Lerdorf. Razvijen
je da bi mogao da "prati" posetioce njegovog sajta. Kasnije je PHP prošao kroz nekoliko
verzija dok nije došao do aktuelne verzije PHP 5.
PHP je inicijalno bila skraćenica za Personal Home Page, ali je značenje kasnije izmenjeno,
pa sada označava PHP Hypertext Preprocessor.
PHP je proizvod otvorenog koda, tj. slobodan je pristup njegovom izvornom kodu koji
može besplatno da se koristi, menja i dalje distribuira.
PHP se koristi za rad sa formama, procesiranje fajlova i pristup bazama podataka (MS
SQL Server, MySQL, Oracle, PostgreSQL, Sybase...).
Kao Web server može da koristi: Apache, MS Internet Information Server (IIS)... Od
PHP-a verzija 4, a posebno u PHP 5 omogućeno je objektno orijentisano programiranje.
Koristi se za kreiranje zaštićenih Web strana.
PHP je alternativa sledećim tehnologijama CGI (Common Gateway Interface), ASP.NET
(Active Server Pages) i Java servletima. PHP procesor ima dva moda – copy (XHTML) i
interpret (PHP).
PHP naredbe se ne vide na klijentskoj strani zato što interpreter PHP koda naredbe
zamenjuje rezultatom. To znači da se iz PHP koda dobija čisti HTML kôd koji se može
pregledati pomoću svakog čitača – brauzera.
PHP kôd se interpretira i izvršava na serveru (za razliku od JavaScript koda koji se izvršava
unutar čitača na klijentskoj strani). PHP sintaksa je slična sintaksi JavaScript-a.
13.1.
Interakcija sa server stranom
U odnosu na svoje glavne konkurente koji se koriste za programiranje na server strani
(Perl, MS ASP.NET, JSP i ColdFusion), PHP ima sledeće prednosti:
• Visoke performanse. PHP je vrlo efikasan.
338
Multimedija
• PHP je besplatan. Trebalo bi napomenuti da najnovija verzija može da se preuzme
sa adrese http://www.php.net.
• Lako se uči i upotrebljava. Sintaksa PHP-a je slična sintaksama drugih programskih
jezika
• Prenosivost. PHP je na raspolaganju za različite operativne sisteme. Napisani kôd
najčešće će raditi bez izmena i pod drugim operativnim sistemima gde je instaliran
PHP.
• Izvorni kôd je dostupan svima.
• Dobra podrška za objektno-orijentisano programiranje (nasleđivanje, privatni i zaštićeni atributi i metode, apstraktne klase i metode, intefejsi, konstruktori i destruktori).
• Ugrađene biblioteke za obavljanje velikog broja poslova uobičajenih u Web aplikacijama. PHP-ove biblioteke omogućavaju veliki broj funkcija kao što su: generisanje
slike tokom rada aplikacije, uspostavljanje veze sa Web servisima, korišćenje XML
dokumenata, generisanje PDF dokumenata, slanje poruke e-mail-om itd.
• Povezivanje sa brojnim sistemima za upravljanje bazama podataka.
Primeri aplikacija na server strani koji su urađeni u PHP-u su:
• Sistemi pretraživanja
• Sistemi upravljanja dokumentima
• Registracija/administracija/profili korisnika
• Transakcije
• E-komerc
13.2.
Sintaksne karakteristike
PHP tag, koji pokazuje serveru gde počinje, a gde se završava PHP kôd u okviru HTML
koda, može biti napisan na više načina od kojih su najčešći:
interno:
<?php
?>
ili eksterno:
include ("myScript.inc")
339
PHP
Prazan prostor - beline nemaju uticaja. Naredbe se završavaju sa ; (tačka zapeta). Startovanje može da se ostvari preko komandne linije ili preko Web servera. Web server
interpretira PHP kôd. Može doći do "mešanja" PHP koda i HTML koda, što kao rezultat
daje teško održavanje koda i odvajanje sadržaja od stila (koriste se šabloni).
Komentari se pišu na sledeće načine:
// Mozete da koristite
# stil komentara
/* koji vama
odgovara */
Ime promenljive počinje sa $. Imena promenljivih su case sensitive. Skup naredbi se formira koristeći zagrade. Skup naredbi ne može da definiše lokalni doseg promenljivih (osim
u funkciji)
Rezervisane reči PHP-a nisu case sensitive.
Slika 13.1. Rezervisane reči
13.2.1.
Promenljive
Ne postoji deklaracija tipa (type). Neoznačena (neograničena, nereferencirana) varijabla
ima vrednost NULL. Funkcija unset postavlja varijablu na NULL. Funkcija IsSet se koristi za
određivanje da li je varijabla NULL. Kada se neograničena varijabla referencira interpreter
prikazuje grešku
error_reporting(15);
13.2.2.
Osnovni tipovi
Postoje četiri skalarna tipa: boolean, integer, double i string; dva složena tipa: array –
niz i object – objekat; dva specijalna tipa: resource i NULL. Celobrojna varijabla integer i
promenljiva dvostruke tačnosti double su kao kod drugih jezika, dok je boolean – vrednost
ili true ili false (case insensitive).
340
13.2.3.
Multimedija
Strings (nizovi karaktera - znakova)
Karakter je jedan bajt. String literali koriste jednostruke ili dvostruke znake navoda.
13.2.4.
Operatori
Operatori su simboli koji omogućavaju izvršavanje operacija nad vrednostima i promenljivama. U PHP-u postoje sledeće vrste operatora:
• Aritmetički operatori
• String operator (operator za konkatenaciju, tj. spajanje stringova)
• Operatori dodele (na primer, =, +=, -= i dr.)
• Operatori poređenja
• Logički operatori
• Operatori nad bitovima
• Operatori za rad sa nizovima (na primer, [ ] za pristup elementu niza)
• Ostali operatori (na primer, operator zanemarivanja greške, uslovni operator i dr.)
13.2.5.
Pre-definisane funkcije
Aritmetičke funkcije
• floor, ceil, round, abs, min, max, rand itd.
String funkcije
• strlen, strcmp, strpos, substr
• chop - uklanja prazan prostor sa desnog kraja
• trim - uklanja prazan prostor sa oba kraja
• ltrim - uklanja prazan prostor sa leve strane
• strtolower, strtoupper
13.2.6.
Konverzije tipova
Implicitna konverzija tipa, na primer konverzija stringa u broj:
• Ako string sadrži e ili E, konvertuje se u double; inače u integer
• Ako string ne počinje znakom ili cifrom koristi se nula
341
PHP
Eksplicitna konverzija - casts (kastovanje), na primer: (int)$total ili intval($total)
ili settype($total, "integer").
Tip ili varijabla mogu da se odrede sa gettype ili is_type funkcijom na primer:
• gettype($total) može da vrati "unknown"
• is_integer($total) vraća Boolean vrednost
13.2.7.
Izlaz
Izlaz iz PHP skripta je XHTML koji se šalje brauzeru kroz standardni output. Postoje tri
načina da bi se proizveo output: echo, print i printf. Ako se koriste echo i print uzima se
string. Na primer:
echo "Hello there!";
echo("Hello there!"); echo $sum;
print "Welcome!";
print("Wellcome"); print (46);
13.2.8.
Kontrolne naredbe
Selekcije
• if, else, else if
• switch, pri čemu switch izraz mora biti integer, double ili string.
Petlje
• while, do-while, for.
13.2.9.
Nizovi
Nizovi nisu definisani kao kod drugih programskih jezika. PHP niz je generalizacija nizova
drugih jezika. PHP niz je stvarno mapiranje ključeva na vrednosti, gde ključevi mogu da
budu brojevi (da bi dobili tradicionalni niz) ili stringovi (da bi dobili hash).
13.2.10.
Kreiranje nizova
Koristi se array() konstrukcija, koja ima jedan ili više parova (ključ => vrednost) kao
parametre i vraća niz njihovih vrednosti. Ključevi su nenegativni integer literali ili string
literali – slova. Kao vrednost može da se uzme bilo šta. Slede primeri nizova i elemenata:
$list1
$list2
$list3
$list4
=
=
=
=
array();
array (17, 24, 45, 90);
array(0 => "jabuke", 1 => "pomorandze", 2 => "kruske")
array("Joe" => 42, "Mary" => 41, "Jan" => 17);
342
13.2.11.
Multimedija
Pristupanje elementima niza
Individualnim elementima može da se pristupi kroz indekse
$list[4] = 7;
$list["day"] = "Tuesday";
$list[] = 17;
Ako elemenat sa određenim ključem ne postoji, kreira se. Ako niz ne postoji, niz se kreira.
Ključevi ili vrednosti mogu da se dobiju iz niza:
$highs = array("Mon" => 74, "Tue" => 70, "Wed" => 67, "Thu" => 62,
"Fri" => 65);
$days = array_keys($highs);
$temps = array_values($highs);
13.2.12.
Rad sa nizovima
Niz može biti izbrisan sa unset, na primer:
• unset($list);
• unset($list[4]); # Ne postoji više element niza sa indeksom 4
• is_array($list) vraća true ako je $list niz
• in_array(17, $list) vraća true ako je 17 element niza $list
• explode(" ", $str) kreira niz čija su vrednosti karakteri reči $str odvojeni razmaknicom (spacebar-om)
• implode(" ", $list) kreira string elemenata od reči $list odvojenih praznim
(blanko) znacima
13.2.13.
Sortiranje niza
Za sortiranje vrednosti niza koristi se funkcija sort, ostavljajući ključeve u njihovom sadašnjem redosledu. Funkcija je namenjena za tradicionalne nizove. Na primer:
sort($list);
radi i za stringove i za brojeve, čak i mešovito
$list = (’h’, 100, ’c’, 20, ’a’);
sort($list);
// Proizvodi (’a’, ’c’, ’h’, 20, 100)
343
PHP
13.2.14.
Funkcije
Funkcije se definišu na sledeći način:
function ime_funkcije([formalni_parametri]) {
...
}
Funkcije ne treba da se definišu pre poziva. Preklapanje funkcija nije podržano. Pogrešno
je redefinisanje funkcije. Imena funkcija nisu case sensitive. Naredba return vraća vrenost
iz funkcije.
13.2.15.
Parametri funkcije
Ako pri pozivu funkcije ima previše stvarnih parametara, funkcija ignoriše višak. Default
metod prosleđivanja parametara je prosleđivanje po vrednosti – pass by value (jednosmerna
komunikacija). Da bi se odredilo prosleđivanje po referenci – pass-by-reference, dodaje se
ampersand & ispred formalnog parametra:
function addOne(&$param) {
$param++;
}
$it = 16;
addOne($it); // $it je sada 17
13.2.16.
Doseg i trajanje promenljivih
Promenljive definisane u funkciji imaju lokalni doseg - local. Da bi pristupili varijablama
koje nisu lokalne u funkciji, mora varijable da deklarišemo kao globalne - global (unutar
koda funkcije)
global $sum;
Normalno, vreme trajanja varijable u funkciji je od njenog prvog poziva do kraja izvršenja
funkcije.
13.2.17.
Rad sa formama
Formama treba da rukuje isti dokument koji kreira formu, ali ovo može biti zbunjujuće.
Odvojeni dokument koji rukuje formom može da bude specificiran kao vrednost action
atributa.
Nije važno da li se GET ili POST metodi koriste za prenos podataka forme.
PHP gradi niz vrednosti forme
• $_GET za GET metod
• $_POST za POST metod
gde su indeksi imena kontrola (widget).
344
Multimedija
13.2.18.
Fajlovi
PHP je sposoban da kreira fajlove, čita iz fajlova i upisuje u fajlove na server sistemu.
Otvaranje fajla se izvršava funkcijom fopen gde se fajlu pridružuje varijabla za buduće
referenciranja. Na primer:
$fptr = fopen(filename, use_indicator)
Svaki otvoren fajl ima interni pointer. Ako fopen ne uspe, koristi se die
$file_var = fopen ("test.dat", "r") or
die ("Error - test.dat can’t be opened");
Indikatori korišćenja fajla su: "r", "r+", "w", "w+", "a", "a+".
Koristite file_exists(ime_fajla) za određivanje da li fajl postoji pre pokušaja otvaranja. Za zatvaranje fajla koristi se fclose(file_var).
Čitanje iz fajla se može prikazati preko sledećih primera:
1. Čitanje celog ili dela fajla i ubacivanje tog sadržaja u string varijablu:
$str = fread($file_var, #bytes)
Za čitanje celog fajla treba da se koristi filesize(ime_fajla) kao drugi parametar:
$file_string = fread ($file_var, filesize("test.dat"));
2. Čitanje linija iz fajla i smeštanje u niz:
$file_lines = file(ime_fajla);
Ne podrazumeva se otvaranje ili zatvaranje fajla.
3. Čitanje jedne linije iz fajla
$line = fgets(file_var, #bytes)
čita karaktere do kraja linije eoln, do kraja fajla eof, ili broja bajtova #bytes karaktera koji se čitaju.
4. Čita se jedan karakter:
$ch = fgetc(file_var)
Kontrola čitanja linija ili karaktera do detekcije kraja fajla koristeći feof (TRUE za eof;
FALSE za ostalo):
345
PHP
while(!feof($file_var)) {
$ch = fgetc($file_var);
}
Upis u fajl:
$bytes_written = fwrite($file_var, $out_data);
fwrite vraća broj upisanih bajtova.
Fajlovi mogu biti zaključani (da bi se izbego problem istovremenog pristupa) koristeći
funkciju flock koja ima dva parametra, promenjivu koja je pridružena fajlu i ceo broj koji
određuje određenu operaciju: 1 – fajl mogu da čitaju drugi, 2 – zabranjeno korišćenje fajla
i 3 – otključavanje fajla.
13.2.19.
Kolačići (cookies)
Kolačić - kuki je mali objekat informacija koji je sastavljen od imena i tekstuelnih vrednosti.
Kuki kreira neki softverski sistem na serveru. U trenutku kada se kreira daje mu se
vreme trajanja – lifetime. Svaka HTTP komunikacija između brauzera i servera uključuje
informacije u njegov heder o poruci (ovo može da uključi cookies). Brauzer može da bude
postavljen da odbaci sve kolačiće.
Kolačići se kreiraju funkcijom setcookie:
setcookie(cookie_name, cookie_value, lifetime);
setcookie("voted", "true", time() + 86400);
Kolačići mora da budu kreirani pre bilo kog drugog XHTML kreiranja od strane PHP
dokumenta, zato što se kolačići skladište u zaglavlju HTTP protokola.
Slika 13.2. Korišćenje Cookie mehanizma
13.2.20.
Praćenje sesije
Sesija je vreme za koje brauzer interaguje sa određenim serverom. HTTP protokol ne
vodi računa o statusu konekcija (stateless). Alternativa su kolačićima. Postoji nekoliko
razloga zašto je koristan za server koji povezuje zahtev sa sesijom:
346
Multimedija
• šoping karta za mnoge različite simultane potrošače,
• potrošački profili za reklamiranje i
• potrošački interfejsi za određene klijente.
Za praćenje sesije, PHP kreira i održava identifkacioni broj – session tracking id. Kreira se
id pozivom session_start bez parametara. Varijabla sesije se kreira ili menja dodelom
$_SESSION niza.
Kao primer posmatraćemo broj poseta strani nekog sajta. Treba da se postavi sledeći kôd
u sva dokumenta:
session_start();
if (!IsSet($_SESSION["page_number"}))
$_SESSION["page_number"]= 1;
$page_num = $_SESSION["page_number"];
print("You have now visited $page_num");
print(" page(s) <br />");
$_SESSION["page_number"]++;
13.3.
Arhitekture za pristup bazama podataka
Posmatramo dvoslojni sistem sa klijentima koji su povezani direktno na server baze podataka. Zadaci klijenata su:
• obezbediti kako da korisnici ostvare podnošenje – submit upita,
• startovati aplikacije koje koriste rezultate upita i
• prikazati rezultate upita.
Zadatak servera baze podataka je implementacija jezika za manipulaciju podacima, koji
može direktno da pristupi i ažurira bazu podataka. Rešenje problema dvoslojnih sistema je
dodavanje komponente u sredini čime se kreira troslojni sistem. Za Web bazirani pristup
bazi podataka, srednji sloj može da startuje aplikacije (klijent samo treba da pokupi
rezultate).
Slika 13.3. Troslojna Web bazirana arhitektura
Svaka relaciona baza podataka se sastoji iz kolekcije tabela. Svaki red je jedinstveni zapis
– record, dok je svaka kolona atribut zapisa. Primarni ključ je jedan ili više ključeva koji
jedinstveno identifikuju svaki red u tabeli.
347
PHP
13.3.1.
Arhitektura za pristup bazi podataka
Treba definisati API interfejs (Application Programming Interface) za svaki specifičan sistem baze podataka (na primer MySQL API). Pogodan je za Web pristup bazama podataka,
zato što se PHP izvršava na Web serveru.
13.3.2.
MySQL sistem baze podataka
MySQL je slobodna, efikasna, široko korišćena SQL (Structured Query Language) implementacija. Ova baza podataka je definisana na adresi http://www.mysql.org. Da bi
pristupili MySQL bazi podataka u Unix sistemu treba da dodate mysql vašoj tekućoj listi
paketa. Treba da kreirate račun - account:
create_mysql
i promenite šifru kada se sledeći put prijavite
mysql [-u USERNAME] [DATABASE NAME] -p
USERNAME je MySQL korisničko ime, DATABASE NAME je ime baze podataka koje je najčešće isto kao i vaše Unix korisničko ime. Opcija -p vam omogućava ubacivanje šifre.
Promenite šifru sa:
set PASSWORD=PASSWORD(’Vasa_nova_sifra’);
Tabele kreirate komandom CREATE TABLE
CREATE TABLE Equipment (Equip_id INT UNSIGNED NOT NULL
AUTO_INCREMENT PRIMARY KEY, Equip CHAR(10));
Tabele baze podataka možete videti sa:
SHOW TABLES;
Opis tabele (kolone) vidi se pomoću:
DESCRIBE Equipment;
Druge komande – INSERT, SELECT, DROP, UPDATE, DELETE su iste kao SQL komande
(MySQL Reference Manual za verziju 4.0.13).
13.3.3.
Pristup bazi podataka sa PHP/MySQL
Za povezivanje PHP-a na bazu, koristi se mysql_connect, koji može imati tri parametra:
• Host (default je localhost)
• Username (default je korisničko ime PHP script)
• Password (default je blanko, koji radi ako baza ne zahteva šifru)
348
Multimedija
$db = mysql_pconnect();
obično proverava greške. Zatvorite konekciju ka bazi sa:
mysql_close
Selektujte bazu podataka sa:
mysql_select_db("automobili");
Poziv MySQL operacija je sa Call mysql_query sa string parametrom koji je SQL komanda:
$query = "SELECT * from States";
$result = mysql_query($query);
Sledi rad sa rezultatima. Broj redova rezultata se definiše:
$num_rows = mysql_num_rows($result);
Broj polja u rezultatu se definiše kao:
$num_fields = mysql_num_fields($result);
Uzmi redove sa mysql_fetch_array. Vrati niz iz sledećeg reda:
for ($row_num = 1; $row_num < = $num_rows; $row_num++)
{
$row = mysql_fetch_array($result);
print "<p> Result row number" . $row_num . " State_id: ";
print htmlspecialchars($row["State_id"]);
print "State: ";
print htmlspecialchars($row["State"]);
print "</p>";
}
Download

Glava 8 XML, HTML, XHTML i DHTML