web programiranje - skripta · 2019. 8. 3. · glava8 xml,html,xhtmlidhtml...

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 odnjih. Reč je glavnim tehnologijama koje se koriste u razvoju jednostavnih, složenih, kao idinamičkih Web sajtova.

8.1. XML

Još dalekih 60-tih godina, ljudi su se bavili idejom o strukturiranju dokumenata u stan-dardizovani oblik da bi se olakšala razmena i rukovanje podacima. Tada je IBM kreiraoGML (Generalized Markup Language) za vlastite potrebe. Koristili su GML za izveštaje,knjige, i druge dokumente iz izvornih datoteka. I druge organizacije i kompanije stva-rale su vlastita rešenja strukturiranja informacija, ali ništa nije bilo napravljeno za opštuupotrebu.

Prva značajna standardizovana tehnologija strukturiranja informacija bio je SGML (Stan-dard Generalized Markup Language), takođe iz IBM-a. SGML je dao način formatiranjai održavanja pravovaljanih dokumenata unutar IBM-a, a kasnije je proširen i prilagođenza upotrebu u raznim područjima industrije kao opšti standard informatizacije. Ipak, tek1986. godine SGML je prihvaćen od ISO standarda. Iako velikih mogućnosti, SGML jevrlo 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 kreiralisu jezik oznaka (markup language) za obeležavanje tehničkih dokumenata koji su se preno-sili putem Interneta. Ovaj jezik se razvio kao pojednostavljena primena SGML-a, nazvanje HTML (HyperText Markup Language), i postao standardni oblik prikaza informacijaza Web.

Razvoj Web aplikacija u zadnjih deset godina dostigao je takav nivo da problemi kojedanas susrećemo nisu se tada mogli ni zamisliti. Sistemi koji su distribuirani hiljadamakilometara 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 poslovnimsistemima, često preko različitih proizvođača, pa čak i različitih tehnologija. Klijenti višenisu strogo definisani, nego mogu biti i mrežni pretraživači koji podržavaju HTML, mobilnitelefoni koji podržavaju WAP (Wireless Application Protocol) ili personalni organizatorisa potpuno drugačijim jezicima oznaka. Osnova razvoja svih današnjih aplikacija postalisu 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 nje-gov 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 ijednostavnošć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đu-tim, XML je mnogo jednostavniji od SGML-a. XML je jezik oznaka koji ne ograničavaskup 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. Pos-toje dva osnovna koncepta kod XML dokumenta. Prvi koncept uslovljava da svaki XMLdokument 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 topo istom redosledu, te korišćena sintaksa sledi specifikaciju. Definisanje specifikacije zadokumente ne ograničava proširivost XML-a, već je potrebna da bi date principe mogleiskoristiti aplikacije i parseri XML dokumenta a da bi se tako uređeni podaci mogli ispravnoupotrebiti.

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 koristitiu XML dokumentu i raspored tih elemenata. Ako XML dokument ima DTD specifikacijui 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 pro-gramer ili autor sadržaja dokumenta takođe kreira pripadajući DTD kao dodatni dokumentna 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, DTDje taj koji omogućava prenosivost XML podataka. Prema definiciji tipa dokumenta u ap-likaciji se može odrediti da li je sadržaj XML dokumenta prihvatljiv i na taj način sprečitigreške.

XML, HTML, XHTML i DHTML 189

8.1.1. Šta je XML?

XML predstavlja podatke za opis podataka tj. sintaksu, u tekstualnom formatu. On jekreiran 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 formatapodataka i njihovu razmenu preko postojećih mreža i aplikacija.

• Integracija podataka – XML vrši jednostavnu integraciju podataka kod već pos-tojeć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 njihovurazmenu.

Svrha XML je da generiše sopstvene tagove, njihovo značenje i njihov prikaz. XMLneradi ništa, on samo nosi informacije okružene XML tagovima. Znači, XML definišestrukturu dokumenata. On menja način na koji browser-i prikazuju, organizuju i pretražujuinformacije. XML se može shvatiti kao osiromašena verzija SGML-a i proširiv je za razlikuod HTML. XML uklanja granice HTML-ovog ograničenog skupa oznaka, dozvoljavajućiljudima koji se bave rezvojem da definišu neograničen broj oznaka za opis bilo kakvihpodataka.

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 setoliko naduvala da ima ljudi koji od XML-a očekuju da radi sve i svašta, ako treba i kolada opere.

Pre svega, XML nije programski jezik. Ne postoji kompajler XML-a koji čita XMLdatoteke i daje izvršni kôd. Eventualno biste mogli definisati skript jezik koji koristi formatXML-a kao matični, a interpretira ga neki binarni program, ali bi čak i ta primena bilaneobič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 preduzimatirazne akcije na osnovu pročitanog. Zaista nema razloga da konfiguracijska datoteka nebude u formatu XML, umesto u formatu nestrukturiranog teksta. Neki noviji programiupotreb?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 drugimprotokolom, mogu biti kodirani u XML-u; ali opet mora postojati neki softver izvan XMLdokumenta 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 XMLpodatke, bilo kao VARCHAR ili BLOB ili neki namenski XML tip podataka, ali samabaza 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 pravomprogramskom 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štau bazu. Da biste preuzeli XML dokument iz baze podataka, po pravilu ćete morati daupotrebite neki posrednički program (middleware product) kao što je Enhydra, koja ćenapraviti i poslati SQL upite bazi podataka, a skup rezultata formatirati kao XML prenego što ih vrati klijentu. Činjenica je da neke baze podataka integrišu taj softver u svojeservere ili za obavljanje te funkcije obezbeđuju softverske dodatke, kao što je Oracle-ov servlet XSQL. U tim scenarijima, XML služi veoma dobro kao sveprisutan prenosniformat, nezavisan od platforme. Međutim, on nije baza podataka, niti ga tako trebaupotrebljavati.

8.1.3. Namena

XML je tu da opiše strukturu, integriše protokole između aplikacija, da razmenjuje po-datke. XML je skup pravila koja omogućavaju kreiranje tekstualnog formata koji opisujestrukturu podataka (adresari, konfiguracioni parametri, finansijske transakcije itd.)

XML opisuju podatke u tekstualnom formatu te omogućuje razmenu podataka nezavisnood sistema i formata podataka i predstavlja budućnost mrežnog programiranja. Velikuprimenu 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 narazličitim jezicima. Različit prikaz istih podataka mogu se prezentovati različitimkorisnicima. Svaki XML dokument može da sadrži opis gramatike ili sintakse kakobi se moglo proveriti i ispravnost sadržaja.

• XML for Content and knowledge management – Pretraživanje, indeksiranje ilokacija podataka postaje jednostavnija pošto XML nosi informaciju o sadržaju, onje samo opisujući dokument. Transformacija podataka iz XML omogućava prikazna različite medije (Web, CD ROM, papir) bez nepotrebnih modifikacija i dupliranjasadržaja.

• XML for Content Aggregation – XML obezbeđuje da se informacije sa različitihmesta integrišu na jednom mestu i da se one prikupljaju na osnovu akcija krajnjegkorisnika. XML na taj način obezbeđuje vezu B2C preko B2B veze.

• XML for Electronic Document Interchange – XML omogućava kreiranje struk-ture za razmenu informacija kao i da objedini postojeće protokole i standarde.

• XML and E-Commerce – XML obezbeđuje sintaksu da indetifikuje svaku informa-ciju potrebnu za kompletnu transakciju. Drugi spoj je poverenje, jer XML omogućujeda se informacija o učesnicima u transakciji nosi zajedno sa transakcijom. Da bi sepratila promena tržišta potrebno je mnogo manje vremena i novca sa XML-om.


• XML for Design – Scalable Vector Graphic (SVG) predstavlja jezik za opis dvodi-menzionalnih vektora pomoću XML-a. SVG-a omogućuje da svaki korisnik u real-nom vremnu pristupa slici u bilo koje vreme i sa bilo kojim uređajem, sa bilo kogmesta.

XML omogućuje da se strukturni podaci iz različitih izvora jednostavno kombinuju. XMLdokument kao poruka je samobjašnjiv skup podataka, jer pored samih podataka koji supredmet poruke, XML dokument sadrži i meta podatke pomoću kojih se ti podaci moguinterpretirati. Programski agenti, mogu se koristiti da integrišu podatke u srednjem slojuservera iz baze za druge aplikacije. Ovi podaci mogu da se prenose klijentima ili drugimserverima za dalju agregaciju, procesiranje ili distribuciju. Fleksibilnost XML-a omogućavada se opišu podaci sadržani u širokom krugu različitih aplikacija, od opisa Web strane dopolja baze podataka.

Prvi čitač Weba koji je omogućio pregled XML -a je Internet Explorer 5.0+, a Netscapepodrž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 jeotvoreni standard, te omogućava da XML funkcioniše na bilo kojoj platformi sa bilo kojimprogramskim jezikom. Veliki broj programskih jezika omogućuje rad sa XML-om poputJave, MS Visual Basica, MS Visual C++, Perl, Cobol i C#.

Pomoću XML mogu se napisati i novi jezici. WML (Wireless Markup Language), koristise za kreiranje Internet aplikacija u mobilnim telefonima, i napisan je u XML-u. XML jenezampamćenom brzinom postao standard, zbog svoje jednostavnosti.

• XML 1.0, je usvojen kao W3C Recommendation u februaru 1998. godine i pred-stavlja sintaksu definisanu po W3C specifikaciji.

Takođe W3C omogućava progrmiranje efikasinijim, kreirajući familiju tehnologija kojepodržavaju XML kao što su:

• XML Schema, takođe predstavlja XML dokument, omogućava modularnost jerkreira strukturu i opis samih XML dokumenta. Jednostavno kombinuje više različitihšema koje pokriva i sjedinjava strukturu dokumenta. Znači, nasleđuju se pravilasa drugih šema. Nastale su kao alternativna zamena za DTD (Document TypeDefinition), pošto DTD nije bio XML dokument. XML šeme obezbeđuju podrškuza standardne tipove podataka kao što su broj, datum,... i omogućuju definisanjenovih tipova.

• Namespace, eleminiše konfuziju prilikom kombinovanja više šema u jednom XMLdokumentu. 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 koristimodva eksterna dokumenta koji poseduju isti naziv, a različito značenje elemenatakoristimo namespace, kako bi ukazali na koje se elemente odnose i koje značnjeposeduju. Namespace ukazuje na šemu koja sadrži informacije o dokumentu koji sekoristi.

192 Multimedija

• XSLT/xPath vrši transformaciju sadržaja XML dokumenta u bilo šta, najčešćeHTML, 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ć teksa 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, amože biti i jedno i drugo istovremeno.

Jedan od najvećih problema kada je u pitanju transfer informacija je njihov sadržaj ulogičkom smislu te reči. XML služi kao kontejner za transfer jer u sebi pored informacijeima i njenu poziciju u odnosu na ostale informacije - XML pored informacije opisuje istrukturu. Detaljna specifikacija XML-a je data na adresi www.w3.org i svakako je vredipročitati.

XML je u svojoj osnovi informacija o informaciji. Više nije dovoljno imati samo infor-maciju, jer to u današnjim uslovima znači tražiti i pronaći istu već je potreban načinda opišemo informaciju, a da taj opis informacije upotrebimo dalje za pronalaženje istei za njenu dalju obradu. Neka vam je potrebna neka konkretna informacija. Možeteotić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ćipotrebnu informaciju, ali zamislite šta vam je sve potrebno da znate da napišete takavparser. Morate znati gde je i kako je ta informacija smeštena. Prilično komplikovano, arezultati su i dalje diskutabilni. Međutim kada biste imali informaciju koja opisuje infor-maciju 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 kojimabiste mogli da pristupite lako onda je pojam Web servisa lako razumljiv. Ideja se daljerazvija i dobijamo Internet kao mrežnu infrastrukturu tako da na kraju krajeva Internet ilibarem jedan njegov segment će biti uskoro čisto poslovna mreža kojom će se razmenjivatisamo informacije u sirovom obliku. Uslov te razmene je da informacije na neki način budu


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 tek-stualnih oznaka koje ih opisuju. Osnovne jedinice podataka i oznaka u XML-u nazivajuse elementi. XML specifikacija precizno definiše sintaksu koje se morate pridržavati pripisanju oznaka – kako su elementi razgraničeni oznakama, kako oznaka izgleda, kakvaimena elementi mogu imati, gde se stavljaju atributi itd. Površno gledano, oznake XMLdokumenta 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 skupoznaka 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. Umestotoga, XML omogućava programerima i piscima da izmišljaju potrebne elemente ondakad 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 moguupotrebljavati elemente koji opisuju stanove, stanarine, provizije, lokacije i druge entitetepotrebne za nekretnine. Muzičari mogu upotrebljavati elemente koji opisuju četvrtinenota, polovine nota, violinske ključeve, tekstove pesama i ostale objekte uobičajene umuzici.

Slovo X u imenu XML potiče od reči Extensible (proširiv), što znači da se jezik možeproširivati i prilagođavati da bi zadovoljio različite potrebe.

Iako je XML veoma fleksibilan kad je reč o elementima koji se mogu koristiti, veomaje strog u mnogim drugim aspektima. Specifikacija XML-a definiše gramatiku XML do-kumenata, koja kazuje gde se oznake moraju staviti, kako one moraju izgledati, kakvasu imena (nazivi) elemenata dozvoljena, kako se elementima pridružuju atributi itd. Tagramatika je dovoljno specifična da omogućava pravljenje raščlanjivača i analizatora sin-takse XML-a koji mogu pročitati svaki XML dokument. Za dokumente koji zadovoljavajupravila te gramatike kažemo da su dobro oblikovani (well-formed). Dokumenti koji nisudobro oblikovani bivaju odbijeni, kao što biva odbijen svaki C program koji sadrži sintak-snu grešku. Programi za obradu XML-a (XML processors) odbijaju dokumente koji nisudobro oblikovani.

Radi interoperabilnosti, pojedinci i organizacije mogu se dogovoriti da upotrebljavaju samoodređene oznake. Takve skupove XML oznaka nazivamo primene XML-a (XML appli-cations) ili XML aplikacije. XML aplikacija nije softverska aplikacija koja upotrebljavaXML, 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 kojielementi su pridruženi kojim drugim elementima. U dobro projektovanom XML dokumen-tu, oznake opisuju i semantiku dokumenta. Primera radi, oznaka može ukazati na to daje 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 kazujuda li je određeni element ispisan polucrno ili kurzivom ili je stavka nabrajanja u listi. XMLje 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. Umestonjega napisali biste semantički bolje strukturiran XML dokument, a potom biste upotre-bili opis stilova XSL Transformations da biste strukturno orijentisani XML izmenili uprezentacijski 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 zadovolja-vaju šemu kažemo da su validni (valid). Za one koji ne zadovoljavaju tu šemu kažemoda su, u odnosu na nju, nevalidni (invalid). Dakle, validnost dokumenta zavisi od šemesa kojom se dokument poredi. Ne moraju svi dokumenti biti validni. Za mnoge primenedovoljno je da dokument bude dobro oblikovan.

Postoji mnogo raznih jezika za XML šeme i njihovi nivoi izražajnosti su različiti. Na-jrašireniji jezik za XML šeme i jedini definisan u samoj specifikaciji XML-a jeste definicijatipa dokumenta (document type definition – DTD). Svaki DTD navodi sve dozvoljeneoznake 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 do-voljni. Sintaksa DTD-ova je veoma ograničena i ne omogućava pravljenje raznih korisnihiskaza poput "Ovaj element sadrži broj" ili "Ovaj znakovni niz je datum koji pada između1974. i 2032". Takva ograničenja možete izraziti jezikom XML Schema Language, kojije 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. Parsi-ranje, kada je XML u pitanju znači sledeće – raščlanjivanje tekstualnog fajla i pravljenjestrukture koja se rekurzivno puni elementima XML stabla. To, očigledno, znači da parserizvodi sledeće operacije:

1. Iščitava preprocesorski deo dokumenta (deo na početku dokumenta između ? zna-kova) da bi došao od informacija koje se odnose na dokument, a nisu deo samogXML 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 levelili startni tag.

3. Sledi zapisivanje imena elementa.

4. Potom se iščitavaju ostali elementi redom da bi se odredilo koja svojstva ima datielement strukture i zatim se ta svojstva upisuju – ako je u pitanju element upisuje senjegova vrednost ili u formi uređenih parova atribut = vrednost, ako je u pitanjuatribut.

5. Ako sledeći tag nakon prvog nađenog nije oznaka za zatvaranje iščitava se sledećitag 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.


8.1.6. 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 daodgovaraju poljima u bazi.

XML atributi

XML elementi mogu imati atribute u otvarajućem tagu kao i HTML. Oni se koriste zadodatne 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 informacijekoje nisu deo podataka. U sledećem primeru tip fajla je irelevantan za podatke, ali jeveoma 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 koristitijednostruke ili dvostruke znake navoda:

<ime="Krcun">

ili:

<ime=’Krcun’>

Dupli znaci navoda su češći, međutim, nekada je neophodno koristiti jednostruke kao usledeć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 isteinformacije. Ne postoje određena pravila kada koristiti atribute a kada elemente. Nekanačelna preporuka je da se elementi koriste kada je u pitanju nešto što je samo po sebicelokupna 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 prime-njuju. Zbog toga je kreiranje aplikacija koje su u stanju da čitaju i manipulišu XML-omrelativno jednostavno. Pogledajmo opet primer:


<?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. Uovom 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 parseromodnosno da dokument tretira kao XML fajl, a ne kao HTML fajl. Bez ove linije dobilibismo poruku o grešci od IE. Ova linija nema svoj zatvarajući ekvivalent, jer ona nije deoXML dokumenta već njegova deklaracija. Sledeće je osnovni tag koji dokument formirakao poruku (<note>). Moguć je samo jedan osnovni tag, inače opet dobijamo porukuo grešci. Sledeće četiri linije opisuju četiri podčlana osnovnog člana (to, from, subject ibody). 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 istikao tag <poruka>. Stoga, trebalo bi voditi računa da otvarajući i zatvarajući tagovi budupotpuno 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 elementimogu 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 partagova koji definiše osnovni tag. Svi ostali elementi su ugnežđeni u osnovni tag. Gnežđenjeu 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>



</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 moguimati atribute u formi ime = vrednost parova (kao i u HTML). Pogledajmo ova dvaXML dokumenta. Prvi je neispravan, a drugi je ispravan:

<?xml version="1.0"?>

<note date=10/06/2000>

<note>

<to>Pera</to>

<from>Mika</from>



</note>

<?xml version="1.0"?>

<note date="10/06/2001">

<note>

<to>Pera</to>

<from>Mika</from>



</note>

• U XML-u je sačuvan prazan prostor.

Korišćenjem XML-a prazan prostor je prikazan u parsiranom dokumentu. Na primer:



ć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 aplikacijamanov red je par CR (carriage return) i LF (line feed) karaktera. Kod UNIX sistema karakterza nov red je LF, mada neke aplikacije koriste i samo CR. Ova razlika među operativnimsistemima č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-use 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ćeu nekim verzijama Windows na primer u 95/98 dok je pod Windows 2000 operativnimsistemima 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 encodingatribut, inače se pojavljuje greška u Internet Exploreru.

Do sada smo se upoznali sa XML-om, njegovom strukturom, sintaksom i stekli smo pred-stavu o njegovoj nameni. Međutim priča o XML-u se tu ne završava, ali to prevazilazinamenu ove knjige.

8.2. HTML

Kada u svom Web čitaču otkucate adresu Web sajta koga želite da pogledate, vaš zahtevse preko DNS servisa usmerava na IP adresu računara gde se nalazi zahtevani Web sajtili strana. Terminološki ovo se naziva zahtevom (Request).

Kada sa pronađe zahtevana IP adresa računara ka njoj se prosleđuje ovaj zahtev. Naredneakcije koje preduzima Web server zavise od toga šta ste tražili – da li je zahtevanastatična ili dinamična Web strana, neki dokument ili na primer multimedijalni sadržaj. Unajjednostavnijem slučaju, kada je zahtevana statička Web stranica, Web server na vašuIP 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). Ovaprič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 iostalim 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 či-tača/pretraživača koji se koriste. Očigledno postoji standardizovani način formatiranjai prikaza Web strana koji su svi usvojili.

HTML je standardizovan jezik koji se koristi na Webu i čija je namena opisivanja formataWeb stranice i njenih elemenata.

Da biste bili uspešan stvaralac Web stranica morate znati HyperText Markup Languagetj. HTML. On je relativno jednostavan jezik za opis dokumenata i njihovih međusobnihveza 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đusobnopovezani. Hipertekst se sastoji od međusobno povezanih delova teksta (ili drugih in-formacija) tako da čitalac interaktivno određuje redosled čitanja. Kretanje kroz takvedokumente neziva se navigacija a ne čitanje. Zato Web dokumenti treba da pruže koris-niku utisak da se može slobodno kretati kroz informacioni prostor. Međusobno povezanidokumenti na Webu nisu samo tekstovi već i slike, zvuci, video, pa se Web može nazvatihipermedijalnim sistemom. A kako se dokumenti mogu nalaziti bilo gde na mreži svihmreža, ovo je distribuirani sistem.

HTML nije zaista programski jezik u onom smislu u kom su to C++ ili Visual Basic, onje više sintaksni jezik za formatiranje dokumenata, nastao je od SGML-a (Standard Gene-ralized Markup Language), koji je daleko kompleksniji "meta jezik" a služi za specifiranjeelemenata koje se koriste u dokumentima i značenje elemenata. Rast HTML-a je iniciraoNetscape, uvođenjem nestandardnih proširenja u jezik, a trenutno se proširenjima i novimverzijama bavi se W3C komitet. Znači HTML je živ jezik koji se intezivno razvija, pa sepovremeno 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


ekstenziju .htm ili .html. Postoje mnogi programi koji pojednostavljuju kreiranje HTMLWeb 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 sepodalje 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 visokoenergetskufiziku) i nastao je 1991. godine na osnovama SGML-a (Standard Generalized Markup Lan-guage). Značajan doprinos razvoju i prihvatanju Web-a je dao program za pregled HTMLstrana tj. Web čitač , Mosaic za X i MS Windows. Prvi Web čitač razvijen januara1993. godine u NCSA instituciji (National Centre for Supercomputing, Chicago, autorimnogih programa u slobodnoj distribuciji za pristup Internet-u). Sistem je brzo stekaoveliku 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ćise na poboljšanja u ovom Web čitaču, Dan Connelly je napravio reviziju prve specifikacijei nazvao je HTML 2.0.

Uporedo je počeo sa formiranjem komiteta za dalji razvoj jezika. Prvi sastanak je bio naWWW konferenciji u CERN-u, maja 1994. godine, a sledeći na IETF (Internet Engineer-ing 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 postaozvanični standard za kreiranje Web strana. Strane kreirane u ovo standardu mogu i daljeda se prikazuju u okviru Web čitača.

HTML 3.0 specifikacija donosi novosti u svim aspektima jezika, a pre svega u radu samatematičkim formulama, tabelama, internacionalnoj podršci itd. Ubrzo je zamenjena saHTML 3.2 specifikacijom koja se i danas koristi.

Pojavom četvrte verzije, HTML se vratio svom početnom cilju. HTML treba da budestrukturni 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 odvo-jnih šema stilova (style sheet), jednostvno skriptovanje dokumenta i poseduje veću kon-trolu nad HTML elementima.

Rast HTML-a je inicirao Netscape, uvođenjem nestandardnih proširenja u jezik, a trenutnose 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 eleme-nata i atributa, kojim se određuje struktura sadržaja kojeg nosi. HTML može da se piše uobično tekstualnom editoru, kao što je Notepad ili u nekom od specijalizovanih programaza obradu Web dokumenata.

202 Multimedija

Bez obzira na automatizaciju procesa kreiranja Web dokumenata, morate posedovati dostaznanja o HTML-u, kako bi posedovali punu kontrolu nad Web dokumentima. ZnanjeHTML nije prednost već uslov da bi bili uspešan kreator Web prezentacija. HTML doku-ment sastoji se od deklaracija, elemenata i atributa.

8.2.4. Elementi

Elementi predstavljaju strukturu HTML-a a opisuju delove HTML dokumenta. Mogu dase 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 taguključuje i znak / posle znaka <. Znači sve što se nalazi u tagovima HTML dokumentaWeb č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šnitag 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 elementeHTML-a pišete malim slovima. Takođe sve suvišne znakove razmaka (space), tabulator iznake 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 pojavljujezajedno sa tagom P elementa, tada se završni tag EM elementa mora takođe pojavitizajedno sa završnim tagom P elementa.

Neki elementi dopuštaju da se izuzme završni tag, na primer, element LI opciono može dasadrž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 zanovi 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 osobineelementa. Na primer, IMG element poseduje SRC atribut koji obezbeđuje lokaciju slike iatribut ALT koji obezbeđuje alternativni tekst ukoliko se slika ne učita:


<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 seunesu sa tastature ili su zauzeti, na primer, znak manje < ne može da se koristi pri unosusadržaja, pošto se taj znak koristi za tagove.

Samo pojedini karakteri imaju svoje nazive (slovnu oznaku) dok se ostali dobijaju navođe-njem broja karaktera tj. njegovog koda. Možemo ispisati bilo koji znak iz Unicode kodnograsporeda. Entiteti imaju sledeću sintaksu:

• &naziv_entiteta;

• &#broj_entiteta;

• &#xheksadecimalni_broj_entiteta;

Da bi ispisali znak manje moramo u HTML dokumentu otkucati <

Primer upotrebe entiteta:

204 Multimedija

8.2.7. Karakteri

HTML 4.0. usvojio je Universal Character Set kao svoj karakter set. Ovaj karakter set jeekvivalent Unicode 2.0 kodnom rasporedu koji sadrži karaktere skoro svih svetskih jezikeuključujići i naš. Prethodne verzije HTML koristile su ISO-8859-1 kodni raspord koji jepodržavao samo karaktere nekih Zapadno Evropskh jezika.

Najednostvniji način da koristite naša slova je da HTML dokument sa našim slovimasnimite u UTF-8 formatu i da u zaglavlju HTML dokumenta tj. u okviru HEAD tagovaunesete 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 seiz 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 prozoruWeb č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ćeASCII kodove tj. simbole:

• Č za naše veliko Č

• č za naše malo č

• Ć za naše veliko Ć

• ć za naše malo ć

• Š za naše veliko Š

• š za naše malo š

• Đ za naše veliko Ð

• đ za naše malo đ

• Ž za naše veliko Ž

• ž za naše malo ž

Primer upotrebe CP1250 kodnog rasporeda:


8.2.8. Struktura

Svaki HTML dokument poseduje svoju strukturu koja se sastoji od nosača HTML doku-menta, a koji sadrži samo zaglavlje i telo HTML dokumenta. U zaglavlju se definišu raznipodaci potrebni web čitaču dok telo sadrži sadržaj i HTML elemenate za formatiranje togsadržaja.

Elementi najvišeg nivoa:

• HTML

– HEAD

– BODY

DOCTYPE

HTML dokument započinje sa DOCTYPE (Document Type Declaration) deklaracijomkoja definiše verziju HTML u kojoj je dokument napisan. U verziji 4.01 postoje sledećedefinicije:

• HTML 4.01 Strict, opisuje strukturu HTML 4.01 dokumenta i ne poseduje ele-mente 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. prezentacionemarkere 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 morada započinje tagom <HTML> i da se završava sa tagom </HTML>. Ovi tagovi predstavljajuelemente 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šekomentar odnosno da se setuje jezik koji će da koristi dati dokument (na primer, "en" zaEngleski, "de" za Nemački, "sr" za Srpski itd.) Unutar <HTML> tagova definiše se jedinozaglavlje (Head) i telo (Body) HTML dokumenta.

Kompletan HTML dokument:

206 Multimedija



<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 gaprebacite u Notepad sa Copy/Paste) i snimite ga sa ekstenzijom .htm ili .html, potomisti 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, ane utiče na prikaz HTML dokumenta. Definiše se pomoću <HEAD> i </HEAD> tagova unu-tar 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 doku-menta, uključivanje eksternih stilova i script funkcija i informacije o samo Web dokumentutj. 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 uslučaju određivanja relativnih adresa koje se navode prilikom referenciranja u okviru Aelementa.


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 šemesa HTML dokumentom.

<LINK REL="stylesheets" HREF="stilovi.css">

Atribut REL koristi se za navođenje odnosa između dokumenta, tj. dokument koji se uvozije šema stilova stylesheets.

Netscape Navigator 4.0 koristi ovaj element za koncept "dinamičkih fontova" tj. povezi-vanje 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žavadinmič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. Koristiatribute TYPE da se navede MIME tip za stil šeme tj. "text/css" i TITLE u kome možeda 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đivanjemedija 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 supriliko 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 doku-mentu odgovarujući korsniku na određene događaje.

Na primer, skriptovi se koriste da se proveri validnost unešenih informacija u formularekako bi odmah obavestio korisnika na grešku, bez potrebe slanja informacija preko Inter-neta na Web server. Može da se nalazi i u okviru BODY elementa ali prepručujemo da seSCRIPT blokovi nalazi u okviru HEAD elementa zato što se nalaze iznad elementa kojipozivaju 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>



</script>

Korišćenjem atributa SRC možete uključiti eksterni skript.

<script language="javascript" src="szw.js">



</script>


8.2.15. BODY element

Sve što se nalazi unutar HEAD tagova ne prikazuje se u Web čitaču. Unutar BODY taganalaze se svi ostali tagovi (inline elementi i block elementi) i naravno sam sadržaj.



<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 ceodokument 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 linkaktivan, 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 naplavu (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 tometreba birati slike koje su specijalno dizajnirane za tu namenu (da se nebi primećivalanadovezivanja). Slike za pozadinu se nazivaju pločice (tile) - pošto se lepe kao pločice napozadinu ekrana.

Poželjno je da pozadina bude neutralna i da ne umanjuje čitljivost teksta. InterlacedGIF-ove ne treba koristiti za pozadinu. Po nekim autorima, najbolja veličina za pozadinuje 256 bajta. Ukoliko želite da fiksirate pozadinsku sliku tako da se ona ne skroluje kaonormalna pozadinska slika, postavite atribut BGPROPERTIES=FIXED u BODY elementuali preporuka je korišćenje CSS-a:

<BODY BACKGROUND="nazivslike.gif" BGPROPERTIES=FIXED>

8.2.16. Komentar

Između ovih tagova  se unosi komenar. Web čitač ignoriše tekst koji se nalaziunutar ovih tagova. Mogu se nalaziti bilo gde unutar HTML dokumenta, služe za opissloženih stranica. Pazite na razmake tj. <! --. Neki Web čitači podrzumevaju da je >

oznaka za kraj komentara.



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 informacijakoja nije definisana od strane drugih elemenata. META tagovi služe Web čitaču korisnikada uradi potrebne radnje sa stranom koju učitava, pri čemu se prema strani odnosi kaoprema 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) Webstrane, 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, aneki pretraživači neće ni uzeti u obzir Web prezentaciju, ukoliko ih nemate. Često su oniuzrok 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 svrhusvakog od njih i pažljivo odabrati sadržaj.

Pozabavićemo se sa najinteresantnijim:


HTTP-EQUIV atribut upisuju se HTTP zaglavlje pri prenosu HTML dokumenta na In-ternetu. Za više informacije o HTTP 1.1 specifikaciji trebalo bi pogledati na adresihttp://www.ietf.org/rfc/rfc2616.txt. Atribut NAME koristi se za imenovanje me-ta informacije i ne koristi se zajedno sa HTTP-EQUIV argumenta. A meta informacijunavodimo u okviru atributa CONTENT.

Sledi spisak meta tagova sa HTTP-EQUIV atributom:

Pomoću HTTP-EQUIV="Content Type" navodi se karakter set HTML dokumenta. Reci-mo, kada u HTML dokumentu želite da koristite windows-1250 kodnu stranu koja sadržii 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, kojije 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 komu-nikaciju sa serverom tkz. client-pull, ili, ukoliko sadrži URL neke druge strane prosleđujekorisnika na tu stranu. U navedenom primeru, "5" označava vreme u sekundama poslekoga reload/redirekt počinje, a www.svezaweb.com adresa označava adresu na koju bikorisnik 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 sepojavljuje 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č. Ukolikomu zadate expires atribut biće snimljen na disk i postojaće sve do dana postavljenimovim atributom, u suprotnom kolačić biće validan samo u toku sesije i biće izbrisan pozatvaranju 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 prijavlji-vanju Web strana na pretrazivače (search engines). Upravo oni sadrže podatke koje pre-traživači najviše cene (naravno, osim samog sadržaja strane). To su, na primer, ključnereč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 pokupipotrebne podatke za indeksiranje. Da bi taj proces bio brži, tj. da robot ne bi skupljaosve ključne reči iz teksta strane, potrebno je navesti meta tag sa sledećim atributomNAME="Keywords". Dok ključne reči sa HTML dokumenta navodite u okviru atributaCONTENT="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đenprilikom 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čnomstranom, 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.


• 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đeponovo 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čkihatributa (Common Attributes) a to su:

• ID

• CLASS

• STYLE

• TITLE

• LANG

• DIR

Ovi atributi omogućavaju lako povezivanje elemenata sa stilovima i skriptovima, defin-isanja lokalnog jezika kao i mnoge skript događaje.

ID atribut

Atribut ID postvlja jedinstveni identifikator za element u dokumentu. Ne mogu postojatidva elementa sa istom vrednošću ID atributa u jednom dokumentu. U sledećem primeruID 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 muse 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 šemestilova na primer:


<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ćuMETA 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 STYLEpošto ID i CLASS mogu da se primene na različite medije i obezbeđuju odvajanje sadržajai 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 gai 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 ko-ji se nalaze u njemu, a nije naveden atribut LANG. Ovaj atribut je veoma značajan zapretraživače Interneta.

Vrednosti atributa su definisani prema specifikaciji RFC 1766, evo nekoliko primera: srza Srpski, en za Engleski, en−US za Američki engleski.

Korišćenjem LANG atributa omogućava vam i lako menjanje stila sadržaja zavisno odjezika. Osnovni jezik HTML dokumenta se postavlja korišćenjem LANG atributa kodHTML elementa ili korišćenjem Content-Language u HTTP zaglavlju pomoću meta ta-gova.

<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. Vrednostatributa je ili poziv funkcije ili pet kratkih komandi koji se izvršavaju pošto se događajdesi.

<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 veomaupotrebljivi 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 prikazujeslovima većim od standardnih, kako bi bio upadljiviji. Na raspolaganju je šest nivoa nas-lova.

Najveća slova odgovaraju naslovu prvog nivoa <H1>, a najmanja naslovu obeleženomkao <H6>. Ustvari H1 treba da predstavlja naslov knjige, H2 naslov sekcije, a H3 naslovpoglavlja itd., ali HTML standard to ne zahteva.


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, osimTABLE i ADRESS elementa. Između pasusa se prikazuje jedna prazna linija. Završni tagje 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 ijustify. U sledećem primeru, tekst u okviru pasusa možemo poravnati sa levom ili desnomivicom 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 /> zbogXHTML 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 pode-bljana ili iskošena slova. Za jako isticanje koristimo elementa <STRONG>, Web čitači ovajelemnt prikazuju kao "bold" tj. podebljana slova, ali preko stilova možemo da regulišemoprikaz 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 elementiprihvataju 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, usuprotnom koristite element STRONG. Dok umesto elementa <i> preporučuje se više dakoristite <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čuprikazuje sadržaj tog elementa iskošenim slovima.

Takođe, prilikom definisanja promenjivih u tekstu koriste se iskošena slova pa se zatoumesto <i> elementa koristi <VAR> element.

Napomena: Podvučen tekst treba izbegavati, jer se sa njim označavaju reference kadrugim dokumentima.

Tagovi, kao što smo napomenuli, se ugnježđavaju, a nikad ne ukrštaju:


8.2.24. 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 zas-tupljeni na računarima i da li u našem slučaju podržavaju naša slova. U opštem slučajuto 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 neposeduje 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 salevom 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 imavrednost 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žavasamo 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.


8.2.29. 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đudokumenata je obično podvučena i/ili u drugoj boji.

Veza ka drugom dokumentu ostvaruje se navođenjem mesta gde se nalazi referenciranidokument, 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 (direk-torijumu) 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> iliu nekom drugom. Pri tome se koristi UNIX sintaksa sa desnim kosim crtama / i gde trebavoditi računa o malim i velikim slovima.

Ukoliko se dokument nalazi u prethodnom direktorijum u odnosu na tekući u kome senalazi 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 praznomekranu:

Pogledajte <a href="slika.gif">sliku</a> velicine 20kb.

Pri referenciranju dokumenata na drugim računarima, uz korišćenje raznih mrežnih pro-tokola navodi se kompletna URL adresa. Uniform Resurce Locator, skraćeno URL pred-stavalja adresu preko koje se pristupa određenom mrežnom servisu, a sadrži naziv pro-tokola, 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 uokvru 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.


• 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 pravljenjetabela 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 dakorisnici pomoću svog čitača unose neke podatke i šalju ih na e-mail, snimaju na serveruili prosleđuju nekoj aplikaciji. Obrasci u sebi sadrže različite vrste polja za unos ili izborponuđenih podataka.

8.2.32. Element FORM

Element (tag) FORM između ostalog pokazuje čitaču gde počinje i gde se završava obra-zac/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žemouneti tekst koji objašnjava šta pisati u poljima, slike, linkove itd. Takođe, vrlo često seelementi forme raspoređuju tabelarno, što znači da se i tabele mogu smeštati u formama,itd. Minimalni izgled forme je:

<body>

<form>

</form>

</body>

Ovaj kod naravno nema nikakvu funkciju. FORM tag treba shvatiti kao nevidljivi kontejneru kome se smeštaju elementi forme koji su vidljivi.

Svaka forma može imati svoje ime. Ime forme je neophodno nekim skriptama koje sekoriste u izradi Web stranica, na primer JavaScript skriptama.

<body>

<form NAME="forma1">



</form>

</body>

Obratite pažnju na navodnike u imenu. Vrednosti nekih atributa ne moramo stavljati udvostrukim navodnicima, ali ovde to moramo. Da ne bi razmišljali u kojim to atributimane moraju navodnici a u kojim moraju savetuje se da sve moguće vrednosti svih HTMLatributa 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 kliknena 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 kojise smešta u FORM tagu:

<form ACTION="cgi/obrada.cgi">

U vrednost atributa ACTION se dakle stavlja adresa skripte za obradu podataka. Možetepodatke 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 definisatimetodu prenosa podataka. Atribut kojim se definiše metoda prenosa je METHOD. Metodaprenosa podataka nije direktno bitna za samu formi, već za skriptni deo. Za JavaScriptgotovo 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, muzikeitd), 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. Nekielementi imaju mogućnost direktnog unosa podataka od strane korisnika, dok mu drugiomoguć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 akopostoje. 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 sesvakoj 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 />



</form>

U kontroli za unos teksta obično se postavljaju još dva atributa – size="x", gde je x brojkaraktera koji definiše širinu kontrole i maxlength="y", gde y predstavlja maksimalnomogući broj karaktera koji se može uneti u kontrolu.

Dopunite kôd:


<form>

Ime: <input type="text" name="tIme" size="10" maxlength="10"/><br />

Prezime: <input type="text" name="tPrezime" size="15"

maxlength="20" /><br />



</form>

Ulazna kontrola radio omogućava korisniku da izabere jednu od ponuđenih opcija. Opcijese 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šestudenata, 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 - samojedna u okviru grupe može biti označena.

Atribut value, za razliku od ranije, ne označava natpis na kontroli već vrednost koja ćebiti preneta serveru kada korisnik klikne na submit dugme.

Polje za potvrdu je tip ulazne kontrole koji korisniku omogućava odabir jedne ili višeponuđenih opcija, što ovu kontrolu razlikuje od radio dugmadi, kod kojih korisnik može ugrupi odabrati samo jednu od ponuđenih opcija. Atribut type za ovu kontrolu je "check-box". 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 diplomskograda. Prvo ćemo napraviti novu Web stranicu i u nju dodati kontrole koje smo prethodnoopisali.

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 saOPTION tagom kojim se određuju stavke u listi. Ako želimo da omogućimo izbor višeopcija 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 unosviše linija teksta ili informacija. Obavezno je definisanje rows i cols atributa, jer oni od-ređuju veličinu kontrole (broj redova teksta i broj kolona u svakom redu). Ovi atributi neograničavaju dužinu teksta za unos, već samo opisuju veličinu definisane kontrole. Ukolikoje zbog veličine unešenog teksta neophodno, pojavljuju se skrolbarovi. Atribut wrap savrednošću virtual nije obavezan, a stavlja se ukoliko ne želite da se pojavljuje horizontalniskrolbar.

<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 sadrugim vrednostima iz formulara kada se ovaj pošalje ka serveru kao, na primer, sledećiformular:

<FORM>

<input type=hidden name=ident value="08100-BGD-3088">

</FORM>


Multimedija

Najnovija HTML specifikacija omogućava da se skoro sve može uključiti u HTML doku-ment kao, na primer, Java apleti, ActivX kontrole, muzički fajlovi i drugi objekti. Ubaci-vanje ne tekstualnih medija u dokument datira još iz HTML 2.0 kada je omogućenoubacivanje slika pomoću <IMG> elementa.

IMG element

Element <IMG> drugi je po važnosti element (posle anchor elementa) jer Web ne bi biodanas to što jeste da nema slika.

Preporuka je da se .GIF format koristi za ikone, a .JPG za skenirane slike u istom ilinekom drugom katalogu. Treba biti umeren oko broja i veličine slika jer znatno utiču nabrzinu 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 ubrzavauč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. Slikese veoma lepo koriste za referenciranje drugih dokumenata ako se između krajeva referencina 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 referenciranakao u prethodnom primeru poželjno je da border bude postavljen na nulu da se ne bipojavio 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 straneslike. ALIGN ima vrednost left, right, middle, top i bottom.

Ako je poravnavanje ulevo, slika ide na levu stranu a tekst desno od nje. Prilikom po-ravnavanja udesno slika se prikazuje na desnoj ivici ekrana, a tekst ide u levo. PomoćuMIDDLE vrednosti atributa ALIGN centriramo sliku unutar linije sa tekstom.

Atributima VSPACE i HSPACE kontrolišemo vertikalni prostor iznad i ispod slike tj. hori-zontalni ispred i iza slike. Vrednosti se postavljaju u pikselima. Ovo je dobro ukoliko sevrš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 pred-stavljaju kvalitetne fotografije pa im je veličina poveća. Stoga se vrši pravljenje umanjenihsličica (thumbnail) koje predstavljaju linkove ka orginalima – male slike su obično dovoljneda se sazna o čemu se radi.

EMBED

EMBED element omogućava ugrađivanje objekata bilo kog tipa u HTML dokument, pritome korisnik mora posedovati aplikaciju na svom sistemu koja omogućava pregled datihobjekata, 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 ob-jekta kroz skript).

Mnogi atributi ovog elementa zavise od dodatka (plug-in), ali poseduje i standardne atri-bute 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.


BGSOUND

<BGSOUND> element omogućava da se pušta muzika u .WAV, .AU i .MID format. Muzičkifajl 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 vrednostiizmeđ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 maksimalnajač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 problemekoje je HTML zajedno sa Web čitačima doneo. XHTML je identičan sa HTML 4.01 i vraćaHTML prvobitnoj nameni, a to je struktuiranje Web dokumenata. XHTML je definisankao XML (eXtensible Markup Language) tj. svi elementi iz HTML 4.01 kombinovani sasnitaksom 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, svapravila definisana u XML-u primenjena su na jezik HTML. Rezultat je XHTML – jezik zaopis 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 semoći ispravno prikazivati na svim platformama (desktop, laptop, PDA, mobilnim i sličnimuređajima).

U primeni na webu, XHTML ne bi imao velik značaj da ne podržava usku integraciju satehnologijom CSS (Cascading Style Sheets) koja omogućuje izradu prezentacijskog slojaWeb stranice. Iako XHTML stranici nije potrebno pružiti CSS definicije kako bi ista bilasintaksno 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 narazlič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 (pre-zentacija) Web stranice, neretko i znatno promeni u zavisnosti od medija na kom je istupotrebno prikazati.

Kod kvalitetno dizajniranih korisničkih interfejsa na Webu koja koriste XHTML i CSS, upotpunosti je odvojen sadržaj Web stranice od prikaza iste (prezentacijski sloj). Trebalobi XHTML-om opisivati samo elemente sadržaja i hijerarhijske strukture stranice, pritomizostavljajuć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 jed-nostavnost se pretvorila u najveću noćnu moru. Ne mogu da se stvore sopstvene oznakekoje označavaju semantičke odnose unutar sadržaja, jer HTML nije proširiv. Prilikomautomatske, pouzdane razmene podataka HTML ne pomaže. Nedostaje podrška struktureu HTML i proveravanje sintakse. Web stranice se stalno pomeraju, a webmaster-i nemogu da idu u korak sa promenama URL-ova, tj. problem je što HTML nema koncepcijucentralne baze linkova.

Mnoge stranice na Internetu sadrže loš HTML. U sledećem primeru videćemo loš HTMLkô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 daopiš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. Tidrugi Web čitači nemaju resursa da interpretiraju "loš" markerski jezik, ali XHTML je tuda 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. XHTMLpredstvlja 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 naXHTML.

Odmah sad započnite da HTML kod pišete malim slovima i sve elemente zatvarajtezavršnim tagom, pogotovo mislim na paragraf </p> i elemente liste </li> kod kojih jezavršni tag opcioni.

Pogledajmo razlike između XHTML i HTML-a i neka osnovna pravila.


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 ele-menti 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. Decamoraju da budu u paru i pravilno ugnježđeni sa roditeljem. Osnovna struktura dokumentaje:

<html>

<head> ... </head>

<body> ... </body>

</html>

Imena elementa u tagovima moraju biti pisana malim slovima. Zato što je XMLcase-sensitve tj. osetljiv je na znakove, ili pišete sve malim ili sve velikim. Ispravno jesamo <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 napisanasledeća konstatacija <p>Ovo je paragraf</p>, dok <p>Ovo je paragraf je neisprav-no.

Prazni elementi moraju biti zatvoreni. Prazni elementi tj. elementi koji ne sadrženikakav sadržaj moraju biti zatvoreni. Prazni elementi započinju sa početnim tagom imoraju 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 manjetretirao kao < i skript ne bi radio. Tada se takav ne-XML sadržaj postavlja unutarCDATA elementa, kako se ne bi vršila data konverzija.

<script type="text/javascript">

<![CDATA[

... unescaped script content ...

]]>

</script>

Atribut "id" zamenjuje "name" atribut. U HTML 4.01 definisan je atribut name zaelemente a, applet, frame, iframe, img i map, a u XHTML on je isključen i umesto njegakoristi se id atribut.

Lang atribut

Atribut lang primenjuje se na skoro svaki XHTML element i navodi jezik sadržaja unutarelementa.

<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 definicijustrukture 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>



<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 datuadresu http://www.w3.org/1999/xhtml.

3. Mora da započinje sa DOCTYPE deklaracijom koja referencira na jednu od tridefinisane definicije tipa dokumenta, tj. DTD.

236 Multimedija

8.3.4. Deklaracija

DOCTYPE deklaracija nije XHTML element i nema svoj završni tag. Deklaracija morauvek da se nalazi u prvoj liniji XHTML dokumenta i nosi tip DTD-a, tj. tip definicijedokumenta.

DTD specificira sintaksu Web strana u SGML-u, kao na primer, HTML, gde su navedenapravila 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 nasvoj način.

XHTML DTD omogućava sintaksu i gramatiku XHTML markera, a koristi se za validacijusamog dokumenta. Postoje tri deklaracije: Strict, Transitional i Frameset. Najpopularnijaje XHTML Transitional.

XHTML 1.0 Strict

Strict DTD uključuje definicuju elementa i atributa za strukturu HTML dokumenata bezelemenata i atributa formatiranja sadržaja, a ne sadrži definiciju okvira (framesets):

<!DOCTYPE html



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žiteWeb č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čana dva ili više okvira.


8.3.5. Validacija XHTML sa DTD

Prethodno opisanim radnjama pretvorite vaš HTML u XHTML. Da bi izvršla validacijaXHTML dokumenta potrebno je referencirati odgovarajući DTD fajl. W3C validator senalazi 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šćenjeHTML koda. Omogućava i čišćenje nepotrebnog koda kojeg unose razni HTML editori irazni drugi alati, na primer, Microsoft Word. Program zamenjuje složene atribute fontovastilovima i uvlači oznake radi bolje čitljivosti. Program je veličine 136 kilobajta i koristi seiz komandne linije. Program se može preuzeti sa www.w3.org/people/raggett/tidy

strane.

I na kraju sledi jednostavan XHTML dokument:

<!DOCTYPE html



<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 standar-dizacije 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 di-namičkog HTML-a (u nastavku teksta – DHTML). Iako bi se po samom nazivu dalozaključiti da je reč samo o novijoj tj. naprednijoj verziji jezika HTML, DHTML predstavljaipak nešto drugo. DHTML je samo oznaka da se pri izradi Internet stranica koristi neko-liko tehnologija. To je zapravo ideja o tome koje (već postojeće) jezike i na koji način ihkoristiti pri izradi stranica. Ti jezici su:

• HTML;

• CSS;

• skriptni jezik: JavaScript, VBScript.

Ovde je važno pomenuti i Document Object Model (skraćenoDOM). DOM ne predstavljaneki 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 skriptnogjezika koji tim objektima na neki način upravljaju, tj. dodeljuju ili menjanju objektima uHTML-u neka svojstva.

Ispravnom upotrebom i kombinacijom jezika koji sačinjavaju DHTML pružaju se velikemogućnosti za manipulisanje stranicama. Vredi istaći par najvažnijih (u zagradi je nave-deno 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 nekliknete na link za drugu stranicu. Jezik JavaScript, predstavljen prvi put 1995. go-dine 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 une-semo pogrešne podatke, grafika koja se menja kada pređete mišem preko nje, i dosadneskrolujuć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, statusnuliniju ili forme u realnom vremenu, ali ne postoji način da se promeni zaglavlje na vrhustrane ili neki manji deo teksta u okviru stranice.

DHTML uklanja ova ograničenja. Upotrebom DOM-a, skript može da modifikuje bilokoji deo stranice – bilo koju reč, link ili čak celu stranicu. Da biste ovo postigli možeteda koristite isti JavaScript jezik sa novim objektima koji su dostupni uz DOM.


Kao primer koji pokazuje moć DHTML-a, pomislite na grafiku koja se menja kada jepokazivač miša nad njom – danas su ovakve stvari rasprostranjene na Webu. To se postižeupotrebom JavaScripta koji zamenjuje jednu sliku sa drugom. Upotrebom DHTML-amožete da primenite istu mogućnost na tekstualne menije. Reči u meniju mogu dinamičkida menjaju boju, stil ili font.

Pomoću CSS-a i DHTML-a možete da odredite tačnu poziciju objekta u prozoru pretraži-vača, dok ovo nije moguće učiniti upotrebom HTML-a. Takođe, možete dinamički damenjate poziciju objekta čime se omogućava animacija.

DHTML animacija je korisna za igre i specijalne efekte, ali može biti korišćena i u stan-dardnim stranicama – meniji mogu da klize po ekranu kada se aktiviraju ili tekst može dase 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 koncepteslojeva – delovi unutar Web stranice koji mogu da budu sakriveni, pokazivani ili pomeranidinamički. Iako su Netscape i Internet Explorer podržavali dosta različitih metoda zaupotrebu slojeva, oni su i dalje bili veoma popularni elementi dinamičkih sajtova. Iako noviDOM dozvoljava dinamičku kontrolu nad svim elementima na stranici u pretraživačimakoji ga podržavaju, slojevi i dalje predstavljaju pogodan način rukovanja sa delovima nastranici, kao što su meniji.

CSS (Cascading Style Sheets) menja način upotrebe teksta na Webu. Sada postoji stan-dardan i precizan način kontrole fonta, veličine, boje i pozicije teksta u okviru Web stra-nica. 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ži-vače. Sa CSS-om, možete da kontrolišete izgled stranice na standardan način, a starijipretraživači će biti u stanju da prikažu taj dokument bez prednosti CSS-a. Takođe, dabiste tekst učinili dinamičnim, možete da koristite DHTML. Možete podesiti da tekstbledi i da se vraća u normalno stanje, možete da ga pomerate po ekranu, da mu menjateveličinu, boju ili font, na komandu.

8.4.2. DOM

Kao što je prethodno rečeno, DOM predstavlja izuzetno bitan faktor u DHTML-u. Prevodbi za Document Object Model bio objektni model dokumenta. Upravo se iz imena moževideti čemu on služi. Kao prvo, reč je o modelu, tj. definisanju strukture HTML doku-menta. 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 univerza-lan, sadržajno nezavisan način. Postoji više nivoa DOM-a koji se međusobno razlikuju poobjektima 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 podimenom DOM, a još više objekata je dodato u Netscapeu 3.0. Iako nisu bili standardi-zovani, ipak su bili podržani od strane Microsofta koji je razvijao nove verzije InternetExplorera.

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 nazivaliDOM nivo 0, iako nisu bili W3C standard.

DOM nivo 1

W3C je otišao korak napred i kreirao standardnu hijerarhiju DOM objekata koji su nazvaniDOM 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 dozvoljavajuupravljanje sa bilo kojim delom Web stranice. Oni obezbeđuju iste osobine, kao i dodacikoji su specifični za svaki pretraživač, ali na standardan način. Posle mnogih protestaWeb 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 InternetExplorer 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. Nivo2 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đujuizgled nekog HTML elemenata (fontovi, boje, pozicija, dimenzija...). Ti stilovi se čuvajuili u eksternim fajlovima sa ekstenzijom .css , ili su interni gde se vezuju samo za jednustranicu 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. Slojprezentacije definiše kako će izgledati sadržaj kada mu korisnik pristupi. Konvencionalninač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 imajuprobleme sa čitanjem.

Slika 9.1. Slojevi Web dokumenta

CSS stilovi pružaju dizajnerima dve ključne prednosti. To je, najpre, precizno razdva-janje forme od sadržaja, pri čemu naznačavanje teksta odražava logičku strukturu in-formacija, a dizajner ima slobodu da odredi kako će koji HTML tag izgledati. Drugapogodnost je efikasna kontrola velike količine dokumenata, jer se izmenom jedne da-toteke 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žavanjaprezentacija. Da bismo u standardom HTML-u oblikovali svojstva elementa <h1> koji senajč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 ovogpasusa definišemo stilom, tj. skupom pravila za formatiranje, stil utiče na sve instanceelementa <h1> u svim dokumentima na koje se taj stil odnosi. Da bi se to ostvarilo po-trebno 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 defi-nišemo u okviru jedne Web stranice ili lokalno, za jedan tag, centralizovano upravljanjemoguće je samo ako opise stilova izdvojimo u zasebnu datoteku. Radi se o najobičnijemtekstualnom 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 atributastyle):

<html>

<head>

<title>Primer za inline CSS stil</title>

</head>

<body style="background-color: #c0c0c0;">

<p>Ova strana ima sivu pozadinu.</p>

</body>

</html>

Uvod u CSS 243

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 stranui/ili njene pojedinačne elemente. U takvom slučaju, kreira se novi "virtuelni" stil, koji seprimenjuje 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 Multimedija

9.2. CSS "kutije"

Stilovi (CSS) uz pomoć HTML <div> elemenata nude veću kontrolu prikaza stranice. Sanjima možemo neki sadržaj pozicionirati bilo gde na stranici uz preciznost u pikselima. Bilokoji 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 ovomslučaju, tabele su potrebne samo u svojoj osnovnoj formi - za prikaz skupa numeričkihpodataka.

Ovi odeljci su kao mini stranice i često se nazivaju CSS kutije (CSS boxes). To su fun-damentalni gradivni blokovi kada su u pitanju Web stranice i raspoređivanje elemenata nanjima.

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. Akone 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 odivice kutije možete dodati tzv. padding (uvlake).

Slika 9.3. Uvlake

Primer koda:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<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>

Uvod u CSS 245

Slika 9.4. Prikaz u Internet Exploreru

Morate biti pažljivi kod korišćenja paddinga zato što on funkcioniše potpuno drugačije uMicrosoft Internet Exploreru nego kod drugih čitača. Za razliku od prikazane slike, IEstavlja padding unutar kutije, tako da njena visina i širina ostaju iste. Svi drugi čitačistavljaju 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žestvoriti 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:




<head>


<title>Dvostruka bordura</title>

</head>

246 Multimedija

<body>

<DIV style="width:300px; border-style:double">Oko ove kutije je

dvostruka bordura.</DIV>

</body>

</html>


Da biste odvojili jednu kutiju od druge, možete im dodeliti margine.

Slika 9.7. Margine

Primer koda:




<head>

Uvod u CSS 247


<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>


Margine i padding se često "brkaju". Zapamtite da kod tela Web stranice margine idu odivica ka unutra, a sve druge CSS margine idu u polje.

Slika 9.9. Razlika između uvlaka i margina

248 Multimedija

9.3. CSS pozicioniranje

Postoje više potpuno različitih metoda za pozicioniranje sadržaja na stranici, to su: rela-tivno, apsolutno i fiksno pozicioniranje, kao i pozicioniranje sadržaja float metodom štose 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 detaljnoobjasnimo ponaosob, utvrditi generalnu razliku između relativnog, apsolutnog i fiksnogpozicioniranja sa jedne strane i pozioniranja float metodom sa druge strane. Dakle, dokprve tri metode (positioning) koriste x i y koordinate za precizno pozicioniranje elemenatana 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 elemen-ta 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 samojedne 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 specifi-ciranjem parametra position:

position: absolute;

Apsolutno pozicioniranje je lako razumeti, jer po tom principu funkcionišu i stvari urealnom životu. Vaša kuća može biti na 50m od centra grada, a kilometar od železničkestanice, 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 leftili 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>

Uvod u CSS 249


Relativno pozicioniranje

Ukoliko želite da opišete poziciju kuće svog najbližeg suseda, možete reći da je 60m

od centra grada ili možete reći da je 10m od vaše kuće. Relativno pozicioniranjepodrazumeva da su CSS kutije jedna do druge. Prva kutija je na vrhu, sledeća je ispodi tako redom. One efektivno plove nizbrdo od vrha stranice. To je nešto što se retkodeš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 njegaitd. 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>


250 Multimedija

Fiksno pozicioniranje

Kod ove vrste pozicioniranja elementu zadajete koordinate na stranici gde se položajelementa neće menjati ni ukoliko, na primer, skrolujete celu stranicu. Ovo je veoma za-nimljiva mogućnost, jer je možete recimo koristiti kako biste napravili meni za vaš Websajt koji uvek stoji u istoj poziciji (recimo sam vrh ili sam levi ugao) nezavisno od ostatkasajta koji se nezavisno od ovog elementa sasvim normalno skroluje. Takođe, ovako možetefiksirati 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 daspecificirate:

float: left;

ili

float: right;

Kao i napumpani vazdušni dušeci u širokom bazenu kutije će biti jedna pored druge gde imadovoljno prostora. U suprotnom dolazi do preklapanja. Da biste izbegli tu situaciju trebada 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 odminimalne širine prozora čitača. Takođe, možete da koristite procentualne vrednosti, i nataj obezbeđujući da total bude manji od 100 procenata. Kod relativnog pozicioniranjaizbegavajte da mešate piksele i procentualne vrednosti, jer se rezultati ne mogu predvideti.

Primer koda sa float za realizaciju tzv. inicijala u tekstu:




<head>


<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>

Uvod u CSS 251

</DIV>

</body>

</html>


9.4. Identifikatori

Kod definisanja <div> elementa unutar HTML koda, može mu se dodeliti atribut id kojiga 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šćenjemstilova. Evo primera kako se gornji element može oblikovati:


#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>


.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 utagove <div>...</div>, koristimo tagove <span>...</span>.


Uvod u CSS 253

9.5. 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 drugomesto. Ta druga mesta se nazivaju ankeri (kotve, sidra; engleski anchors). Baš kao što sebrod ukotvljuje, tako se i ovde ukotvljujete na nekom mestu u okviru mora World WideWeb.

Svaka stranica ima bar jedan anker. Podrazumevani anker je upravo vrh stranice, alimož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. Po-drazumevana prezentacija hipertekst linkova u HTML-u ima tri različita stanja.

Naravno, sa dizajnerske tačke gledišta nismo zadovoljni podrazumevanim izgledom lin-kova. Podvučeni tekst je možda praktičan, ali deluje nekako ružno. Ključni zahtev kojitreba ostvariti je da linkovi izgledaju drugačije od okolnog teksta kako bi označavali neštoposebno. Kontekst je takođe važan faktor. Neki tekst je očigledno meni izbora bez obzirada li je podvučen ili ne. Njegova istaknutost i položaj na stranici i činjenica da vas rečipozivaju 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 imaposebno značenje. Naravno, ponovo je kontekst taj koji daje konačno značenje a za to jepotrebno da i druge slične reči ili fraze imaju isti konzistentan izgled. Ovo ne funkcionišeako svaki link ima drugačiju boju.

CSS omogućava da se poigrate sa izgledom linkova. Linkovi ne moraju biti podvučeni, nemoraju 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), bojelinkova 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 pokazi-vačem miša prelazi preko teksta i tekst menja boju čime daje jasan signal da se radi ohipertekstualnom linku.

a:hover { color: #c93; text-decoration: underline }

Tradicionalno podvlačenje je ponovo na sceni ako to želite, ali samo privremeno dok jepokazivač iznad teksta.

254 Multimedija

Aktivno (active) stanje linka je ono što vidite kada kliknete mišem na link. Obično setada 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 definicijastilova 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 definicijamaali 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 CSSdokumenta.

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 stranena način definisan u CSS dokumentu.

U našem primeru, CSS dokument se zove HorNav.css. Njime definišemo navigacionutraku stranice sajta. Jedna ili više HTML strana, može biti povezana sa istim CSS doku-mentom. Time postižemo da promena, načinjena u CSS dokumentu, bude vidljiva na svimstranama, koje za svoje formatiranje koriste taj CSS dokument. Ako je potrebno promenitiboju pozadine, na primer na 50 strana, CSS stil u kome je definisana boja pozadine i kojije 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

}

Uvod u CSS 255

#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

}


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>

</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. Samipo sebi, stilovi ne znače ništa - radi se o skupu pravila koji moramo najpre da povežemo saelementom. Povezivanje se sastoji od selektora (imena elementa) i pravila koje navodimounutar 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, radise o principima od suštinskog značaja za efikasnu primenu stilova, pa ćemo ih podrobnoopisati.

Pretpostavimo da na Web stranicama neke delove teksta želimo da ispišemo na žutojpozadini, tako da budu posebno istaknuti. U datoteku stilovi.css unećemo definiciju.istaknuto {background-color: yellow;}. Pasus koji započnemo sa sledećom kon-statacijom <p class="istaknuto"> biće ispisan na žutoj pozadini. Sva ostala svojstvakoja 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

Uvod u CSS 257

ž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, saslič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 dasadrže elemente <title> i <p>, respektivno, ali to nije obavezno.

Kako će Web čitač protumačiti pravila koja smo definisali? Svi pasusi u navedenom pri-meru nalaze se unutar elementa <body> i svi nasleđuju njegove atribute koje smo zadali ustilu. 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>, alise ispisuje crvenom bojom, u skladu sa sopstvenim stilom. Kako to da se prethodni pasusispisao crnom bojom, iako ona nigde nije navedena? Neki atributi se podrazumevaju, akoih 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 naWeb stranicama. Podrazumevana boja ispisa teksta je crna i nju će čitač automatskidodeliti 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 bitiispisan bold varijantom fonta. Kada bi u definiciji tekućih stilova postojalo i sledeće prav-ilo b {color: yellow;}, bilo koji tekst koji se nalazi unutar tagova <b> i </b> bio biispisan žutom bojom. Atributi se, dakle, nasleđuju, ali svaka lokalna promena određenogatributa poništava dejstvo nasleđivanja. Ovde možemo uspostaviti analogiju sa objek-tima na matičnim stranama u nekom od DTP programa. Svojstva takvih objekata važei 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 nekapravila nasleđuju, a druga poništavaju novim pravilom. Radi se o sistemu po kome jemoguće utvrditi koja se pravila primenjuju u dokumentu koji sadrži mnoštvo stilova. Naprimer, pravilo za element <p> koji koristi atribut id ima prioritet nad klasom, a klasa imaprioritet nad samim elementom <p>. Lokalni, inline stilovi su "stariji" ili "jači" od stilovadokumenta ili eksternih stilova.

Što je pravilo specifičnije, njegova snaga je veća. Drugim rečima, prioritet ima ono pravilokoje 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 kon-tekstualne 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đi-vanjem.

Vratimo se tipografskim parametrima koja nam omogućavaju stilovi. Neki od njih zahte-vaju 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 iline-height: 14pt i time zadati apsolutnu meru proreda. Kada je u pitanju poravna-vanje teksta, na raspolaganju nam je pravilo text-align i njegovi atributi left (podrazu-mevani), right, center i justified.

Iako se na Web stranama može koristiti obostrano poravnati tekst, još uvek smo dalekood pogodnosti koje nam pružaju programi za prelom stranica. Pošto nema automatskehifenacije, poravnanje se postiže promenom razmaka između reči, što često daje neprih-vatljive 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, štomože da stvori probleme sa estetikom stranica na kojima se koriste krupna slova. Atributletter-spacing može da bude od velike pomoći, jer se njime zadaje razmak izmeđuslova. Ako u nekoj klasi definišemo negativan razmak i primenimo ga na izabrane paroveslova, postići ćemo efekat kerning-a. Atribut text-indent određuje uvlačenje prvog redapasusa i eliminiše potrebu za postavljanjem nevidljivih piksela.

Kaskadni stilovi na Web stranama predstavljaju veoma moćnu tehnologiju kojom se možeupravljati i ugrađenim, do skora potpuno nedodirljivim elementima HTML jezika. U ti-pografskom pogledu, mnoge parametre formatiranja možemo da kontrolišemo isključivostilovima. Njihovom pravilnom i preciznom upotrebom tekst na prezentacijama može dase 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 istiznačaj i funkciju kao i u štamparstvu.

Dizajn Web stranica otvara mnoge teme koje nismo obradili u ovom tekstu. Tu je kontra-verzna problematika veličine slova, koja se različito prikazuju u Windows i Macintoshokruženjima, kao i večita dilema treba li dozvoliti korisnicima da menjaju veličinu tek-sta. Kada su u pitanju tehnike dizajna, još uvek se intenzivno koriste tabele, iako CSSomogućava precizno raspoređivanje tekstualnih i grafičkih objekata zadavanjem njihovihapsolutnih 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ćnos-tima. Po sintaksi, jezgro jezika JavaScript slično je jezicima C, C++ i Java, s program-skim konstrukcijama kao što su naredba if, petlja while i operator &&. Međutim, ovasličnost se završava sa sintaksom. JavaScript je slabo tipiziran jezik, što znači da se zapromenljive ne mora definisati tip. Objekti u JavaScriptu preslikavaju (mapiraju) imenasvojstava u proizvoljne vrednosti svojstava. Zbog toga su sličniji heš tabelama ili aso-cijativnim nizovima (u Perlu), nego strukturama (u C-u) ili objektima (u jezicima C++ili Java). Mehanizam objektno orijentisanog nasleđivanja u JavaScriptu zasnovan je naprototipovima, kao u malo poznatom jeziku Self. On je potpuno različit od nasleđivanjau jezicima C++ i Java. Kao i Perl, JavaScript je jezik koji se interpretira i nadahnut jePerlom 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čkevrednosti kao osnovne tipove podataka. Osim toga, ono ima ugrađenu podršku za ob-jekte 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 nameneproš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. Ovaugrađena (embedded) verzija JavaScripta izvršava skriptove koji su ugrađeni u HTMLWeb stranice. To se obično zove klijentski (client-side) JavaScript, da bi se naglasilokako 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, iveoma je dobra kompatibilnost različitih implementacija. Neki delovi programa klijentskogJavaScripta zvanično su standardizovani, neki su de facto standardi, a ostali predstavljajuproširenja koja zavise od čitača. Kompatibilnost između različitih čitača značajna je zaprogramere 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 posled-njem 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 zaskriptovanje, a ne pravi programski jezik. Time se nagoveštava da su jezici za skriptovanjejednostavniji i da su to programski jezici za osobe koje nisu programeri. Činjenica da jeJavaScript manje strog po pitanju tipova podataka čini ga nešto pristupačnijim neiskus-nim programerima. Osim toga, mnogi Web dizajneri mogu da koriste JavaScript za brzorešavanje manjih programerskih zadataka.

Međutim, ispod svoje tanke glazure jednostavnosti, JavaScript je programski jezik sa pot-punim skupom mogućnosti, složen kao i bilo koji drugi, a od nekih i složeniji. Programerikoji pokušaju da iskoriste JavaScript za rešavanje netrivijalnih zadataka često otkrivajuda 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 broj-nim verzijama. Međutim, vremenom se jezik ustalio i standardizovalo ga je udruženjeEuropean Computer Manufacturer’s Association (ECMA). Zvanično ime (naziv) jezikaje ECMAScript, prema standardu ECMA-262. Međutim, ovaj zbunjujući naziv koristi sesamo pri eksplicitnom pozivanju na standard. Naziv "JavaScript" se tehnički odnosi samona implementacije ovog jezika, koje su dale kompanije Netscape i Mozilla Foundation. Upraksi, svi taj jezik zovu JavaScript.

Osim specifikacije ECMA-262, koja standardizuje jezgro jezika JavaScript, organizacijaECMA objavila je još jedan standard koji se, takođe, odnosi na JavaScript. Specifika-cija ECMA-357 standardizuje proširenje JavaScripta, poznato kao E4X ili ECMAScriptza XML. To proširenje dodaje ovom jeziku tip podataka XML, zajedno sa operatorima inaredbama za rad sa vrednostima tipa XML.

Razmatranje predloga za četvrto izdanje specifikacije ECMA-262, kojom bi se standardi-zovao 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 ljudimisli na klijentski JavaScript. U klijentskom JavaScriptu kombinuju se mogućnosti inter-pretera JavaScripta da izvršava skriptove sa objektnim modelom dokumenta (DocumentObject Model – DOM), definisanim u čitaču Weba. Dokumenti mogu da sadrže skriptovenapisane na JavaScriptu, a ti skriptovi mogu da koriste DOM za izmenu dokumenta iliupravljanje čitačem Weba koji prikazuje taj dokument. Drugim rečima, možemo kazati daklijentski 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 skrip-tova. U stvari, od prvih dana su Netscapeovi Web serveri uključivali interpreter Java-Scripta, tako da su se serverski skriptovi mogli pisati na JavaScriptu. Slično, Microsoftkoristi 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 izvedeniz JavaScripta, za izvršavanje skriptova u programu Flash Player. Kompanija Sun dodajeinterpeter za JavaScript prilikom distribuiranja svoje Jave 6.0, tako da se mogućnostiizvršavanja skriptova lako mogu dodati svakoj aplikaciji napisanoj na Javi.

I Netscape i Microsoft učinili su svoje interpretere za JavaScript dostupnim kompanijamai programerima koji hoće da ih uključe u svoje aplikacije. Netscapeov interpreter je objav-ljen u vidu otvorenog koda i sada je dostupan preko organizacije Mozilla (Internet adresahttp://www.mozilla.org/js/).

10.1. Programiranje u JavaScript-u

Pre nego što počnete da programirate u jeziku JavaScript, potrebno je da znate kakose izvršava jedan takav program. Svaki JavaScript program napravljen za izvršavanje uWeb čitaču mora da bude uključen u Web dokument. U većini slučajeva to će biti HTMLili XHTML dokument, ali može da bude XML, SVG ili nešto sa čime se do sada nismosusreli. Ovde ćemo razmatrati uključivanje u HTML, zato što 99% ljudi koristi JavaScriptu toj kombinaciji.

Da bi uključili JavaScript kôd u HTML stranicu, morali bi da uključimo tag/marker podnazivom <script> unutar zaglavlja (head) dokumenta. Dati skript ne mora da budeJavaScript, zato moramo čitaču da saopštimo koji tip skripta uključujemo dodavanjematributa type sa vrednošću text/javascript:



<html lang="en-US">

<head>

<title>Pozdrav</title>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8">


</script>

</head>

</html>

Možete da stavite onoliko JavaScript koda koliko želite unutar taga <script> – čitač ćega izvršiti čim bude učitan:



<html lang="en-US">

<head>



content="text/html; charset=utf-8">


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čujese da uključujete JavaScript kôd iz posebnog spoljašnjeg fajla. Ovaj pristup ima višeprednosti:

• 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 stra-nicama sajta.

Da biste naveli/referencirali spoljašnji JavaScript fajl, potrebno je da koristite atribut srcunutar <script> taga:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>



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 senalazi 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čunarponaosob može da razume i reši u okviru jednog koraka. Svaki takav mali korak kojipreduzmete 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čeniceza knjige.

U JavaScriptu svaka naredba trebalo bi da bude odvojena znakom za novi red ili tačka-zapetom. Prema tome, dve naredbe se mogu napisati na sledeći način:


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 nekombudućem vremenu od strane autora programa ili nekoga ko bude održavao program tokomeksploatacije. 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 senalazi 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 komuniciratisa korisnikom i prilagođavati se različitim situacijama, morate imati mogućnost rada savrednostima koje ne poznajete.

Promenljiva/varijabla omogućava da se nekom podatku dodeli naziv, zatim se taj podataku programu može referencirati preko tog naziva. Na taj način može se koristiti neki poda-tak, a da se unapred ne zna njegova stvarna vrednost, ono čega treba da se seća programerje naziv promenljive.

U JavaScriptu promenljiva se kreira upotrebom službene reči var i specificiranjem nazivakoji ž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 seradi upotrebom operatora dodeljivanja (=), tako što se naziv promenljive postavlja saleve 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 na-redbu:

var boja = "plavo";

U praksi, to je ono što radi većina JavaScript programera – deklariše promenljivu upravoonda kada se toj promenljivoj prvi put dodeljuje neki podatak.

Iako niste prethodno referencirali/deklarisali konkretan naziv promenljive, možete joj do-deliti vrednost bez upotrebe var službene reči za deklarisanje:

boja = "plavo";

JavaScript interpreter će detektovati da ta promenljiva nije prethodno deklarisana i au-tomatski ć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 po-javljivanje naziva promenljive biće automatski zamenjeno sa njenom vrednošću prilikomizvršavanja programa:

var boja = "plavo";

alert(boja);

Druga naredba u prethodnom segmentu koda saopštava čitaču da prikaže okvir za upozo-renje 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 isimboli 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 nazivimapromenljivih. Nazivi promenljivih su osetljivi na tip veličine slova (Case sensitive), stoganazivi boja, Boja i BOJA referenciraju unikatne/različite promenljive koje mogu da postojeistovremeno.

Mnogi programski jezici karakteristični su po tome što koriste strogo tipizirane promen-ljive. Kod njih morate programu prilikom deklarisanja promenljive da saopštite koji tippodatka će promenljiva sadržati i ne može se promeniti tip promenljive kada je jednomkreirana.

Međutim, JavaScript je slabo tipiziran jezik – skript jezik koji ne vodi računa šta pro-menljive sadrže. Promenljiva, na primer, u početku može čuvati broj, zatim može sadržajpromeniti u znak, reč ili nešto drugo.

Uprkos činjenici da ne morate u startu da deklarišete tip podatka, bitno je da znate kojitip podatka promenljiva može da čuva kako biste mogli da ih korektno koristite u okviruprograma. U JavaScript programima možete da radite sa brojevima, stringovima (niskamakaraktera), logičkim vrednostima (Booleans), nizovima i objektima.


10.1.1. Brojevi

Brojevi se u JavaScriptu pojavljuju u dva oblika, kao celi i decimalni brojevi. U svetuprogramiranja celi brojevi se terminološki označavaju kao integer ili int, a decimalni kaobrojevi sa pokretnom tačkom/zapetom (floating point number) ili float.

Da biste kreirali promenljivu koja će čuvati numerički podatak treba da nazivu promenljivedodelite 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 staviznak 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 organi-zovani 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, iliviše vrednosti u jednu rezultujuću vrednost. Vrednosti na koje se operator primenjuje nazi-vaju se operandi. Kombinacija operatora i njegovih operanada poznata je kao izraz. Izrazise izračunavaju da bi se odredila sama vrednost izraza, koja predstavlja rezultat primeneoperatora nad operandima. Neki operatori, kao, na primer, operator (dodele) =, kaoishod daju vrednost koja se dodeljuje promenljivoj. Drugi proizvode vrednost koja se možekoristiti 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 ope-ratori, kao što je + (konkatenacija stringova) operator, daju različite rezultate za različiteredoslede svojih operanada. Na primer, .ab.+.cd. nije isto što i .cd.+.ab..

Unarni operatori se koriste samo sa jednim operandom. Na primer, unarni operator ! seprimenjuje na logičku vrednost i vraća logičku not vrednost te vrednosti. Većina JavaScriptoperatora predstavlja binarne operatore, koji imaju po dva operanda. Jedan primer bi-narnog operatora je operator * (množenja), koji se koristi za izračunavanje proizvoda dvabroja. Na primer, dati izraz 8 * 6 se izračunava kao 48 primenom * operatora nad ope-randima 8 i 6.

Do sada smo se bavili samo prostim izrazima. Složeniji izrazi mogu da se naprave kombi-novanjem prostih unarnih i binarnih izraza. Da biste izračunali složene izraze, morate da ihrašč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čkihizrač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 izrazrazultat 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 operan-dima, kao što su logičko I, logičko ILI i logička negacija. Logički operatori koje podržavaJavaScript prikazani su ispod.

• (&&) "−→ logičko I;

• (.) "−→ logičko ILI;

• (!) "−→ logička negacija.


10.2.3. Operatori poređenja

Operatori poređenja se koriste za određivanje kada su dve vrednosti jednake, ili za po-ređ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 strogonije 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 strogonije jednako (!==) su deo ECMAScript 1 standarda. Oni su uvedeni u Navigatoru samoza JavaScript 1.3 i podržali su ih Navigator 4.06 i kasniji. Takođe su ih podržali InternetExplorer 4 i kasniji.

10.2.4. String operatori

String operatori se koriste za izvođenje operacija nad stringovima. JavaScript trenutnopodržava samo operator string konkatenacije +. On se koristi za spajanje dva navedenastringa nadovezivanjem. Na primer, .ab. + .cd. proizvodi .abcd..

10.2.5. Operatori za manipulaciju bitovima

Operatori za manipulaciju bitovima sprovode operacije nad vrednošću predstavljenu bito-vima, kao što su pomeranje bitova ulevo ili udesno. Operatori za manipulaciju bitovimakoje 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 Multimedija

10.2.6. Operatori dodele

Operatori dodele se koriste za ažuriranje vrednosti promenljive. Neki operatori dodele sekombinuju sa drugim operatorima, da bi sproveli proračun nad vrednošću koja se nalazi upromenljivoj i da, potom, ažuriraju promenljivu novom vrednošću. Operatori dodele kojepodržava JavaScript prikazani su ispod.

• (=) "−→ Postavlja promenljivu sa leve strane operatora = na vrednost izraza sanjegove desne strane.

• (+=) "−→ Uvećava promenljivu sa leve strane operatora += za vrednost izraza sanjegove desne strane. Kada se koristi sa stringovima vrednost sa desne strane senadovezuje na vrednost promenljive sa leve strane operatora +=.

• (-=) "−→ Umanjuje promenljivu sa leve strane operatora -= za vrednost izraza sanjegove desne strane.

• (*=) "−→ Množi promenljivu sa leve strane operatora *= sa vrednošću izraza sanjegove desne strane.

• (/=) "−→ Deli promenljivu sa leve strane operatora /= sa vrednošću izraza sa njegovedesne strane.

• (%=) "−→ Izdvaja moduo promenljive sa leve strane operatora %=, koristeći izraz sanjegove desne strane.

• (<<=) "−→ Pomera ulevo promenljivu sa leve strane operatora <<=, upotrebljavajućivrednost izraza sa njegove desne strane.

• (>>=) "−→ Sprovodi pomeranje udesno sa zadržavanjem znaka promenljive sa levestrane operatora >>=, koristeći vrednost izraza sa njegove desne strane.

• (>>>=) "−→ Sprovodi pomeranje udesno sa punjenjavanjem mesta najveće težinenulama promenljive sa leve strane operatora >>>=, koristeći vrednost izraza sa nje-gove 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 opera-tora ^=, koristeći vrednost izraza sa njegove desne strane.


10.2.7. 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čunatii dve alternativne vrednosti, od kojih treba vratiti samo jednu, u zavisnosti da li je uslovispunjen 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. Akoje 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, rezultatizraza je 5. Ako je vrednost x manja od vrednosti y ili su njih dve jednake, rezultat ovogizraza je 7.

10.2.8. Specijalni operatori

JavaScript podržava i brojne specijalne operatore, koji se ne uklapaju ni u jednu od kate-gorija operatora navedenih u prethodnim odeljcima:

• ZAREZ (,) OPERATOR - Ovaj operator izračunava dva izraza i vraća vrednost dru-gog. Razmotrite naredbu a = (5+6),(2*2). Oba izraza (5+6) i (2*2) se izraču-navaju, a vrednost drugog izraza (4) se dodeljuje promenljivoj a.

• DELETE OPERATOR - koristi se za brisanje osobine nekog objekta ili elemenata niza donavedenog indeksa. Na primer, delete myArray[5] briše šest elemenata myArrayniza. 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 operan-da. Trebalo bi razmotriti naredbu a = typeof 17. Vrednost dodeljena promenlji-voj a je number. Pokušajte da upotrebite typeof sa različitim izrazima i da viditevrednosti 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 protoko-lom 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 nazivajukontrolne strukture. Važan deo komandne strukture je uslov. Svaki uslov je jedan logičkiizraz koji dobija vrednost true ili false. JavaScript obezbeđuje nekoliko vrsta kontrolnihstruktura za različite programske situacije.

270 Multimedija

10.3.1. Naredbe odlučivanja

Najjednostavnija odluka u programu jeste praćenje neke grane ili putanje programa akoje 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 seif.. 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 nekolikoizvrš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 uskriptu. Svojstvo objekta ili vrednost promenljive mogu sadržavati bilo koju od nekolikovrednosti i potreban je poseban put izračunavanja za svaku od njih. U JavaScriptu postojikontrolna struktura koju koriste mnogi jezici. Na početku strukture se identifikuje o komizrazu se radi i svakoj putanji izvršavanja dodeljuje se oznaka koja odgovara određenojvrednosti. U pitanju je switch naredba.

switch(izraz) {

case oznaka1:

naredbe

break

case oznaka2:

naredbe

break

default:


naredbe

}

Izraz može biti bilo koji znakovni niz ili numerička vrednost. Naredba default obezbeđujenastavak po putanji izvršavanja kada vrednost izraza ne odgovara ni jednoj oznaci naredbecase.

Naredba break, koja služi za izlazak iz petlje, ovde ima značajnu ulogu. Naime, ako nijenavedeno break posle svake grupe naredbi u case granama, izvršiće se sve naredbe iz svakecase 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 svakustavku formulara/obrasca. Jedna od struktura JavaScripta koja dozvoljava ponavljanjeprolazaka jeste petlja for.

for (pocetniIzraz; uslov; korak) {

naredbe

}

Tri naredbe unutar zagrada (parametri petlje for) igraju ključnu ulogu. pocetniIzraz upetlji for izvršava se samo jednom, prvi put kada se pokreće petlja. Najčešća primenapočetnog izraza je dodela imena i početne vrednosti promenljivoj brojača petlje. Koristise naredba var koja i deklariše ime promenljive i dodeljuje joj početnu vrednost. Kadaje promenljiva brojača definisana u početnom izrazu, izraz uslov obično definiše do kojevrednosti 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 unutarfor-a. Obično je to povećavanje brojača petlje za jedan za svaki sledeći prolaz, tzv. in-krementiranje 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 doki 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šena osnovu vrednosti koje se izvršavaju unutar tela petlje. Pogledajmo primer. Poslednjiparametar – 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 ustanje 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 jesledeća:

do {

naredbe

}

while (uslov)

Razlika između while i do.. while petlje je ta što se u do.. while petlji naredbeizvrš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šenemaju potrebu da nastave kruženje kroz ostatak vrednosti u opsegu brojača petlje. Zaizlazak 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 zatvaratelo petlje).

for (var i=0; i< array.length; i++) {


if (array[i]. property == wantedValue) {

naredbe;

break

}

}

Petlja for omogućava i da se preskoči izvršavanje naredbi unutar nje zbog samo jednoguslova. 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 opsegspada i konstrukcija if.

10.3.3. Nizovi

Nizovi u JavaScriptu su jedna od najkorisnijih struktura podataka. Elementi niza sunumerisani, počevši od nule, i redni broj predstavlja indeks datog elementa. Da bi sepristupilo nekom elementu niza, potrebno je znati njegovo ime i indeks. Pošto vrednostiindeksa počinju nulom, broj elemenata niza (što je određeno svojstvom niza length), uvekje za jedan veći od najvećeg indeksa niza. Elementi u nizovima JavaScripta mogu dapripadaju bilo kom tipu podataka, uključujući i objekte.

Niz je smešten u promenljivoj tako da kada se pravi niz, promenljivoj se dodaje noviobjekat niza. Posebna ključna reč – new – prethodi pozivu funkcije za generisanje niza uJavaScriptu, koja u memoriji obezbeđuje prostor za niz. Međutim, u JavaScriptu veličinuniza moguće je promeniti bilo kad.

new mojNiz = new Array(duzina)

Popunjavanje niza vrši se operatorom dodele, prethodno se u uglastim (velikim) zagrada-ma 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 kaoparametri konstruktoru Array():

mojNiz = new Array ("tekst", "slika", "zvuk")

274 Multimedija

Za pristup podacima niza ključ je indeks niza. Ime niza i indeks u uglastim zagradamadobijaju vrednost sadržaja te lokacije u nizu.

Da bi se obrisao sadržaj koji je zauzimao prostor na određenoj lokaciji niza, dovoljno jepostaviti ga na null ili prazan znakovni niz. Međutim, stvarno brisanje elementa nizamoguć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 inema potrebe za premeštanjem elemenata i menjanjem njihovih indeksa da bi se očuvalauređ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 ilida se isti kod izvršava više puta. Da bi to elegantno izveli potrebno je da odgovarajućiprogramski 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 koristilida u čitaču aktivira tzv. iskačući okvir. Funkcija alert je sastavni deo svih čitača – toznači da je ugrađena u čitačev JavaScript interpreter. Pored toga, vi imate mogućnost dakreirate svoje funkcije koje ćete pozivati kada vi to želite. Funkcija se može posmatratikao omotač bloka programskog koda. Ono što je potrebno da uradite je da dodelite nazivtom 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 zagradaizvrš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 funkcijapodležu istim ograničenjima kao i nazivi promenljivih). To je naziv koji ćete pozivati/na-voditi kadgod želite da se u programu izvrši kôd koji se nalazi unutar funkcije. Naziv morabiti praćen malim zagradama – u prethodno navedenom slučaju one su prazne, međutimto 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 po-zovemo tu funkciju, izvršavaće se naredbe unutar funkcije koje aktiviraju pojavljivanjeiskačućeg okvira koji prikazuje tekstualnu poruku "Ovo je kriticno upozorenje!". Kao i


kod deklaracije funkcije, male zagrade se moraju pojaviti neposredno posle naziva funkcijeprilikom pozivanja funkcije:

upozorenje();

Te zagrade imaju dvostruku ulogu: one saopštavaju programu da želite da izvršite tufunkciju 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, alije obavezno da se koriste male zagrade u pozivu funkcije.

Vratimo se na primer korišćenja funkcije alert. Svakako ste uočili da smo kod pozivanjafunkcije stavljali neki string unutar zagrada:

alert("Ubaci i igraj");

String "Ubaci i igraj" je u stvaru argument koji smo prosledili funkciji alert; upozorenje jedizajnirano 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 dabudu 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 bitiprosleđeni. Oni se uključuju unutar malih zagrada neposredno posle naziva funkcije i akoih 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 promenljivakoja je na raspolaganju svaki put kada se funkcija izvršava i ona omogućava da koristimofunkciji prosleđene podatke unutar same funkcije.

Iz prethodnog primera funkcije sendvic vidite da su definisana dva argumenta: hleb imeso. Ta dva argumenta se koriste kod pozivanja upozorenja da generišu donekle zakorisnika besmislenu poruku.

Prema tome, rezultat rada većine funkcija koje napišemo biće prikazivanje okvira upo-zorenja sa porukom korisniku. Međutim, postoje situacije kada su nam potrebne neštointeligentnije funkcije koje prosleđuju podatak drugim delovima programa. Funkcija možeda vrati (return) podatak naredbi koja ju je pozvala. Zgodna stvar u svemu ovome jeda možete dodeliti poziv funkcije kao vrednost promenljive i da tako vrednost promenljivebude nešto što funkcija vrati kao rezultat svog izračunavanja. Da bi funkcija mogla davrati vrednost potrebno je da se upotrebi u telu funkcije službena reč return iza koje sledivrednost 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 ikoristiti 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 efekatkao prethodna verzija koda.

Naredba return je uvek završni/konačni akt funkcije; ništa se više ne dešava u funkcijiposle 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 po-dataka 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 ipromenljive koje se odnose na robota u jednoj oblasti a sve funkcije i promenljive kojese odnose na zečeve u drugoj oblasti. Objekti to rade grupisanjem skupova svojstava imetoda.

Svojstva su promenljive kojima se može pristupiti samo preko njihovog objekta, a metodesu funkcije kojima se može pristupiti samo preko njihovog objekta. Zahtevajući da se svapristupanja svojstvima i metodama obavljaju preko objekata koji ih sadrže, JavaScriptobjekti olakšavaju programerima upravljanje programima.

Skriptabilni čitač ima dosta posla oko pravljenja programskih objekata, koji generalno pred-stavljaju vidljive elemente HTML stranice u prozoru čitača. U vidljive objekte spadaju slikei elementi obrazaca. Međutim, postoje objekti koji nisu tako očigledni, ali imaju smislakada 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 nekisistem u mnoštvu objekata na stranici, definisan je model objekata dokumenta (DocumentObject 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, defi-niš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š


mnogo drugih koje ga razlikuju od ostalih objekata. Svaka od ovih osobina naziva se svoj-stvo, i svako od svojstava ima neku vrstu vrednosti koja mu je dodeljena. Svojstva HTMLobjekta najčešće se podešavaju atributima HTML oznaka. Prisustvo JavaScripta čestododaje opcione atribute čija se inicijalna vrednost može modifikovati kada se dokumentuč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, alitakvih č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ćii 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 iliargumenti, 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 objekaturaditi bilo šta drugo kao odgovor na događaj, zavisi od atributa koji se unosi u definicijuHTML objekta. Atribut se sastoji od imena objekta i znaka jednakosti, kao i uputstva štada 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 predstavljamesto za sadržaj HTML dokumenta u prozoru browser-a. Kako se sve akcije dokumentaodigravaju unutar prozora, prozor je na vrhu hijerarhije objekata JavaScripta. Njegovefizičke granice sadrže JavaScript. Pored onog dela prozora gde se smešta sadržaj doku-menta, sfera uticaja prozora uključuje dimenzije prozora i sve ostale potrebne sastavnedelove koji okružuju oblast sa sadržajem, kao što su scrollbars, toolbars, menu, statusbari 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 objekatprozora postoji i sinonim – self. Nije poželjno da se self kombinuje u referencama uskriptu za prozor sa jednim okvirom; kada postoji više okvira self svakako olakšava čitanjei ispravku koda.

self.imeSvojstva

self.imeMetoda(parametri)

Nije uvek potrebno praviti novi objekat window koristeći kôd JavaScripta. Skript ne praviglavni prozor čitača, to čini korisnik aktiviranjem čitača ili otvaranjem URL-a ili datotekeiz menija čitača. Taj prozor je automatski formiran valjan objekat window čak iako jeprazan. Ali skript može generisati bilo koji broj potprozora ako je otvoren glavni prozor (iako sadrži dokument čiji će skript otvoriti potprozor).

Metoda koja pravi novi prozor je window.open() i sadrži više parametara koji definišukarakteristike prozora.


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 gornjiskript.

Slika 10.3. Otvaranje novog prozora

Čim se napravi drugi prozor u okruženju Web stranice, vazno je obratiti pažnju na up-ravljenje 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 pokazi-vač/kursor miša. I druge poruke se pojavljuju na statusnoj traci u vreme kad se dokumentučitava. JavaScript se može zgodno iskoristiti za prikazivanje vlastite poruke na status-noj traci u željenom trenutku. Svojstvu window.status se može pridružiti neki drugitekst. Da bi se promenio tekst u vezi, akcija se pokreće procedurom za obradu događajaonMouseOver= povezanog objekta. Osobitost korišćenja ove naredbe za podešavanje sta-tusne trake je da dodatna naredba return true mora da bude deo procedure za obradudogađaja. Radi jednostavnijeg podešavanja svojstva window.status, naredbe skripta senajč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 fiksnimkašnjenjem između poziva te funkcije i izraza. Tipične aplikacije su animacije, pomeranjemobjekta po stranici kontrolisanom brzinom. Objekat prozora reaguje na nekoliko događajakoje prouzrokuje sistem i korisnik, ali verovatno najčešće korišćen je događaj koji se aktiviraodmah čim se cela stranica učita – onload=. Prednost korišćenja ovog događaja je štopruža sigurnost o tome da su svi objekti u modelu jer ako se dozvoli pristup elementuobjekta, dok objekat još nije učitan, može se desiti greška u skriptu. Procedure za obradudogađ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 kaoparametar, a dugme OK omogućava korisniku da ukloni upozorenje. Čitač ubacuje rečikoje ukazuju na to da je alert box upozorenje JavaScripta – JavaScript Alert, i ovaj tekstse 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žeimena boja. Petljom for skript nalazi odabrano dugme i upozorava korisnika.


<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 naredbauslovljava izlazak iz petlje i indeks odabrane opcije pronađen pomoću for petlje koristi seza ispis poruke alert prozora.

Drugi stil iskrsavajućeg prozora prikazuje dva dugmeta: Cancel i OK, i naziva se confirmbox. window.confirm() je jedna od metoda koja vraća vrednost: true ako korisnikpritisne OK i false ako pritisne Cancel. Ovaj okvir za dijalog može se koristiti kao pod-sticaj korisniku da donese odluku o tome kako da se nastavi skript. Izlazna vrednost možese 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), skriptga š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 obe-zbeđuje polje za unos teksta u koje korisnik unosi odgovor. Dva dugmeta, Cancel iOK, omogućavaju korisniku da ukloni okvir za dijalog sa dva efekta – otkazivanje celeoperacije ili prihvatanje unetog. Metoda window.prompt() ima dva parametra. Prvije poruka koja se prikazuje korisniku. U polju za unos može se priložiti podrazumevaniodgovor 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 seza false); pritiskom na OK vraća se vrednost unetog znakovnog niza. Sintaksa je:

prompt("sometext", "defaultvalue")


Sledi primer:

<head>


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 onjegovom 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 oblastiprozora č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 mnogadruga svojstva su nizovi drugih objekata u dokumentu. Svojstvima i metodama objektadokumenta 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. Akose stranica naslovi nalazi unutar oznaka title u zaglavlju, na taj naslov utiče svojstvodocument.title. Naslov dokumenta je uglavnom kozmetičko podešavanje koje se prika-zuje 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 jednostavnoceo 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, iu odloženim, koji prave novi sadržaj u postojećem ili novom prozoru. Dva najbezbednijanačina za upotrebu metoda document.write() i document.writeln() (razlikuje se odwrite() 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 dokumentučita, upisujući HTML sadržaj. U drugom slučaju, skript prihvata unos korisnika u jednomokviru 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žanesu u matemetičkom objektu Math. Ovaj objekat se razlikuje od drugih objekata programaJavaScripta po tome što se za njegovu upotrebu ne pravi njegova kopija. Skriptovi direktnopozivaju 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 kojerade 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 jedanobjekat klase Date povezan sa određenim vremenom i datumom.

var danas = new Date()


Objekat Date uzima snimak PC-jevog internog sata i vraća datumski objekat za taj mome-nat. Interno, vrednost datumskog objekta u nekom momentu je vreme u milisekundamapočev od nula časova 1. januara 1970. po Griniču (GMT) - svetskoj referentnoj tački zasve vremenske konverzije. Tako datumski objekat sadrži informacije i o datumu i o vre-menu. Moguće je definisati objekat Date za neki drugi trenutak, navodeći tu informacijukao 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 moguprimeniti 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>


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 akcijekoje se pojavljuju, obično, kao rezultat nečega što korisnik uradi. Na primer, događaj jeklik 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 pisatifunkcije koje se aktiviraju kada se određeni događaj desi.

Obrađivači događaja su predstavljeni kao specijalni atributi koji modifikuju ponašanjeHTML elemenata u okviru kojih se nalaze. Na primer:

<body OnLoad="alert(Dobrodosli!)">

U prethodnom, oznaci početka tela HTML dokumenta dodat je atribut OnLoad, kojiobrađuje događaj učitavanja HTML dokumenta. U konkretnom slučaju, kada se učitavanjeHTML dokumenta završi, izvršiće se naredba JavaScripta dodeljena atributu OnLoad, uprozoru ć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 dadetektuje 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 promenipodatak u ulaznom polju obrasca ili kada se završi učitavanje Web dokumenta itd.


10.6. Animiranje objekta

Koncept animiranja objekta u JavaScriptu je sličan animiranju grafičkog objekta u bilokom programskom jeziku. Objekat se animira tako što se "menja" u više koraka tokomnekog definisanog vremenskog intervala. U svakom od koraka objekat može biti promenjenna više načina, tj. mogu mu se menjati različita svojstva (veličina, položaj, transparent-nost, ...).

Jedna od animacija koju je relativno lako realizovati u JavaScriptu je iščezavanje ob-jekta, 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ôdcode posle isteka nekog vremenskog intervala milliseconds. Ovo je podržano od svih či-tač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 IEje implementiran kao filtar (obj.style.filter), sa vrednošću alpha(opacity=o), gdeje o broj između 0 i 100. Vrednost 0 znači potpunu providnost, dok 100 znači potpununeprovidnost. 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 ne-providnost.

Kod animacije iščezavanja (fade animation), objekat koji iščezava postepeno menja trans-parentnost 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 Multimedija

//

//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) {


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 naelement/objekat, na primer:


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 kojirealizuje pomenutu animaciju i zato izdelićemo ga na sekcije i ponaosob obrazložiti.


290 Multimedija

browser = "IE";

else


Prvi deo koda na jednostavan način detektuje o kom tipu čitača se radi pošto je tobitno kod potonje primene promene transparentnosti. Kôd koristi sledeću promenljivupod nazivom navigator.userAgent koja vraća identifikacioni string tekućeg čitača, azatim proverava da li sadrži "MSIE", što bi značilo da se radi o Internet Exploreru. Akonije u pitanju IE, tada je nebitno koji je čitač jer svi ostali koriste isti standardni stilprovidnosti.

10.6.1. Funkcija fade()


{

//Objekat iscezava u 10 koraka

var steps = 10;

//postavljanje startne providnosti


// 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 unu-tar 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ševremenski interval posle koga se funkcija fadeCallback poziva, tj. ona se poziva svakih30 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 safunction(){...}. To je zato što funkcija ima argumente primenjene na element iakoje jednostavno zapisana kao fadeCallback(element) tako da treba da bude pozvananeposredno, a ne da bude setovana kao vremenska funkcija.

10.6.2. Funkcija fadeCallback()


{

//Prihvatanje tekuce providnosti


//Postavljanje nove providnosti



}

To je funkcija povratnog poziva koju poziva funkcija setTimeout(). Ona utvrđuje tekućutransparentnost elementa koji iščezava i zatim postavlja novu smanjujući tekuću trans-parentnost za 0.1.

10.6.3. Funkcija getOpacity()


{

var opacity = null;

//Providnost tekuceg citaca

if(browser=="IE") {


if(filter) {



}

}

else {


}

return opacity;

}

Ova funkcija registruje tekuću transparentnost elementa koji iščezava. Pošto je imple-mentacija transparentnosti u čitačima različita, ova funkcija koristi ranije postavljenu pro-menljivu browser da utvrdi koju metodu da primeni. Na kraju vraća transparentnost kaoskaliranu vrednost između 0 i 1.

10.6.4. Funkcija setOpacity()


{

//detekcija koji citac se koristi i postavljanje providnosti

if(browser=="IE") {


}

else {


}

}

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 postavljenepromenljive 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 ob-jekata. 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 jepoziv 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, upetlji, sve dok se ne pozove funkcija clearInterval().

Koju funkciju je bolje koristiti? Posle eksperimentisanja sa obe funkcije utvrđeno je da suobe podjednako korisne i da obe zahtevaju pisanje koda koji proverava da li je animacijazavršena ili ne. U slučaju korišćenja funkcije setTimeout(), funkcija fade() izraču-nava koliko puta je mora pozvati na osnovu broja koraka, a u slučaju korišćenja funkcijesetInterval(), kôd u funkciji povratnog poziva određuje da li je animacija završenaili ne. U slučaju prikazanog primera jednostavne animacije, setTimeout() je pogodnijajer se broj pozivanja animacionog povratnog poziva izračunava u funkciji fade(), dokse u slučaju setInterval() u animacionoj funkciji povratnog poziva utvrđuje da li jeanimacija 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 transpa-rentnosti 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;


browser = "IE";

else


timer = null;

//Called to 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


{

//Get the current opacity


if((opacity-0.1)==0)

clearInterval(timer);

//Sets the new opacity


}

//Gets an element’s opacity


{

var opacity = null;

//Get the opacity based on the current browser used

if(browser=="IE") {


if(filter) {



}

}

else {


}

//If no opacity has been set make it 100%

if(!opacity) {


opacity = 1;

}

294 Multimedija

return opacity;

}

//Sets an element’s opacity


{

//Set the opacity based on the current browser used

if(browser=="IE") {


}

else {


}

}

</script>

</head>

<body>


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čanjaanimacije uključen u animacionu funkciju povratnog poziva.


{

//Get the current opacity


if((opacity-0.1)==0)

clearInterval(timer);

Pomenuti segment koda koristi funkciju clearInterval(), koja briše tajmer koji jekreirala funkcija setInterval(), čiji je jedini argument ID (identifikator) kreiranog tajme-ra. 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 poslekorišćenja.


10.7. 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 jepotrebno 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 jeSSS < 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 brojK je 0.

• Ako je ostatak broj između 1 i 11 (1<OST<11) kontrolni broj K je razlika između11 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 Multimedija

<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!")


if(k!=raz)

{alert("JMBG nije ispravno upisan!")


}

</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"


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. Me-hanizam cookies omogućava skladištenje male količine informacija na računaru na dostabezbedan način. Cookie se često koristi za skladištenje korisnikovog imena i/ili lozinke naWeb prezentacijama. Postoji nekoliko vrsta cookies-a:

• Name cookie - prvi put kada neko poseti Web prezentaciju koja sadrži skript za ovajcookie, posetilac mora da unese neko korisničko ime. To ime se čuva u cookie-jui 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 ucookie. Pri sledećoj poseti moguće je ispisati poruku korisniku tipa: "Poslednji putste posetili ovu prezentaciju u utorak, 20.03. 2010."

Kada se prvi put takve informacije unesu u obrazac koji se šalje CGI programu (skriptna serverskoj strani), CGI program preporučuje čitaču da tu informaciju zapiše na harddisk računara. Međutim, čitač ne otvara svima direktorijum hard diska. Mehanizamcookies 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 sezove cookies.txt i smeštena je u direktorijumu Navigatora. Internet Explorer koristi malodrugačiji sistem – svaki cookie se snima u sopstvenu datoteku u direktorijumu Cookieskoji je smešten među sistemskim direktorijumima. U poljima svakog zapisa cookie nalazise 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 opcionimparametrima) i čitanje podataka iz njih (bez parametara). Da bi se podaci sa cookie-jaupisali u za njih predviđenu datoteku, koristi se JavaScript operator dodele i svojstvodocument.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 prazanniz). 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 budepozvan). Na primer, ako se kolačiću userName dodaje znakovni niz Jelena, to izgledaovako:

document. cookie = "userName=Jelena"

Ako se dodaje još parametara i oni svi moraju biti uključeni u jedan znakovni niz ipridruženi svojstvu document.cookie. Dakle, podaci koji se pozivaju iz cookie-ja po-moć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 željenipodatak iz para ime - podaci koristeći metod substring(). Prvi parametar metoda sub-string 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 isa više cookies-a.

function getCookie(c_name) {

if (document.cookie.length>0) {

c_start=document.cookie.indexOf(c_name + "=")


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ščlanjujeceo znakovni niz cookie-ja odbacujući sve unose koji se ne slažu sve dok ne pronađe imecookie-ja.

Cookies imaju i rok trajanja. Ako cookie treba da opstane i posle tekuće sesije, on imai rok trajanja koji postavlja pisac cookie-ja. Datum roka trajanja mora biti predat kaoznakovni niz koji označava vreme po Griniču (GMT).

Sledeća funkcija kao parametre ima ime cookie-ja, njegovu vrednost i broj dana preostalihdo isteka roka cookie-ja. Prvo, broj dana se konvertuje u odgovarajući datum, zatim sedodaje broj dana posle kog ističe rok cookie-ja. Posle toga, pamti se ime, vrednost idatum 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 koris-ničkom imenu, ako je cookie postavljen. Ako cookie nije postavljen, od korisnika se tražida 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 jeprivukao tzv. Web 2.0 koncept može se izvući par korisnih i suštinskih zaključaka. Iakosu 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. Istovre-menim razvojem Web 2.0, AJAX-a i modernih Web aplikacija (kao što su Google Mail iliGoogle Docs&Spreadsheets) počelo se o tim bibliotekama sve više pričati. Očito je da sekonstantno napredovanje tehnologija i softvera odrazilo i na ponudu Web aplikacija – sveviš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 po-moću neke od namenskih JavaScript biblioteka koje omogućuju fleksibilno i jednostavnokreiranje takvih sadržaja. Nameće se potreba za razmatranjem kakve prednosti Web stva-raocima 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 bilokom delu Web stranice da bi pročitali ili izmenili neko njegovo svojstvo. Zbog toga je radsa 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 uJavaScript (jedna od njih je i, na primer, document.getElementById) često su nedo-voljne za elegantno rešavanje tipičnih zadataka. Tu na red dolaze razne biblioteke kojeunapređuju i olakšavaju rad sa DOM-om. Osim toga, neke biblioteke čak nude imple-mentaciju 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šeizgladiti svima mrske razlike prikaza elemenata između raznih čitača.

Ako animaciju na Web stranici posmatramo kao promenu nekog svojstva određenogelementa tokom vremena, onda ćemo lako zaključiti da pomoću JavaScript bibliotekamožemo jednostavno izraditi animacije koje će podići nivo upotrebljivosti i zanimljivostiWeb 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 odbiblioteke do biblioteke i zavise od njene namene. Većina ih ima ugrađene efekte kojeje moguće primeniti na elemente web stranica. Efekti se kreću od običnih promena CSSsvojstva elementa do animacija i sličnih komplikovanih efekata koje bi bilo vrlo teškopouzdano implementirati u JavaScriptu.


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. dolazakpokazivača miša iznad nekog elementa). Biblioteke pomoću svojih ugrađenih metodapružaju programeru lakši i razumljiviji način pokretanja čestih funkcija, koje će u bilokom č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 raznihlokacija (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 funkcionalnoststranica na vrlo jednostavan način. Primer proširenja je jQuery.lightbox koji omo-gućava efektno pregledavanje slika. Obično su te komponente osmišljene na način dazauzimaju malo prostora i da se lako dodaju već aktivnoj biblioteci. Na taj način je mogućeuz relativno malo truda dodati stranici novu funkcionalnost čija je implementacija većproverena i radi brzo i pouzdano umesto da svaki autor razvija svoju varijantu potrebnogdodatka.

10.9.4. Izbor JavaScript biblioteke

Trenutno se na Internetu može pronaći ogroman broj biblioteka (prema nekim izvorimapreko 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, prestanakrazvoja i sl.).

Za izbor JavaScript biblioteke su presudna dva faktora – namena i veličina biblioteke. Pos-toje krajnosti koje omogućuju napredno objektno programiranje u JavaScriptu i koje pred-stavljaju pravo malo razvojno okruženje. Primer takvog okruženja je Prototype+ExtJS,gde ExtJS predstavlja samu JavaScript biblioteku. Nedostaci takvih okruženja su komp-likovano korišćenje, teško savladavanje osnova i veličina same biblioteke koja će usporitiučitavanje Web stranice. Postoje i biblioteke koje jednostavno olakšavaju manipulacijuelementima stranice, dodajući razne efekte i olakšavajući izbor DOM elementa kojim ma-nipulišemo. Takve biblioteke su jednostavnije koncipirane, manje su i lakše je naučitinjihovo korišćenje. Primeri takvih biblioteka su jQuery i Mootools (koja čak omogućavada 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ćiprimeri.

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 naj-boljih 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=1za element TABLE daje punu borduru široku jedan piksel. Zatim, tabele sa podrazumeva-nim bordurama ne izgledaju isto u Internet Exploreru i Firefoxu. Prema tome, bolje je dakoristite CSS, sa stilom style="border: solid 1px".

<html>

<body>



<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 zaborduru. I DIV i TABLE su blok HTML elementi, ali DIV rendering se smatra pouzdanijim.

Pored toga, ne morate uopšte da koristite TR i TD elemente. Bilo kako bilo, mnoge tehnikekoriste ili DIV, ili TABLE, ili kombinaciju.

Nisu potrebne slike, JavaScript kôd, eksterni fajlovi ili druge sekvence koda. Koristimotakvu kolornu šemu (dark blue za traku sa potpisom za sliku i tanku borduru – u tonu sadominantnom bojom slike – a svetlo sivu za pozadinu) da je kontrast dovoljno izražen ida su linije oštre.

Obratite pažnju na korišćenje float:right stila u DIV elementu, koji omogućava daporavnamo 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 nijenula – 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šetepojedinačno za svaku stranu (top, bottom, left i right). Za TABLE, padding je sličan sacellpadding, ali ne postoji CSS atribut za razmak. Postoji atribut margin, ali on definišeprostor upolje (outer space) – ne unutar – ono što ostaje između elementa i njegovogprethodnika (roditelja).

Sledi HTML kôd za jednostavan panel sa zaista tankom bordurom, koji koristi TABLEkontejner i neposrednu stilsku deklaraciju unutar reda:

<html>

<body>



<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;">


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 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;">



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 danapravite malu sliku koja se ponavlja (repeat). Ovde je upotrebljena plava grdijentna slikadimenzija 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 zamenitestilski atribut background-color za naslovnu traku sa atributom background-image. Na-ravno, nemojte da zaboravite deklaraciju background-repeat:repeat-x, za automatskoponavljanje slike duž horizontalne ose.

Postoji više tehnika za kreiranje senke (shadow), ali je svakako najjednostavnije i vizuelnosasvim efektno korišćenje jedne proste slike koja se dodaje neposredno ispod panela. Slikamora da bude dovoljno velika kako bi mogla da se koristi i kod najvećeg mogućeg panelakoji u tom trenutku koristite. Kada se prikaže unutar IMG taga, njena širina mora da budepostavljena na širinu koju ima i panel. Njena visina takođe mora da bude prilagođena saistim faktorom kako bi se održala proporcionalnost.

<html>

<body>



<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;">


alt="This is an image" title="This is an image" /><br />

Sadrzaj...

</div>

</div>


<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 bitiobjedinjeno znanje HTML-a, CSS-a i JavaScripta.

Došlo je vreme da dodamo našem panelu funkcionalnost skupljanja i razvijanja (expandand 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 ima-ge, trakasti čin) na naslovnoj traci, koji se koristi kao okidač događaja za razvijanje iskupljanje, a takođe pokazuje tekuće stanje panela. Stoga su nam potrebne dve slikeza ševron, druga je za 180 stepeni zarotirana prva slika. Imenovaćemo ih jednostavnoexpand.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 naslovi ševron sliku) na dva DIV-potomka, koji koriste float:left i float:right stilove zasvoje 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 podnazivom togglePanelStatus.

Za pretraživač Firefox, potrebno je takođe da postavimo njegovu visinu. CSS postavkaoverflow:hidden diktira da će bilo koji ugrađeni sadržaj koji je veći od pretka biti au-tomatski sakriven.

Podrazumeva se da većina čitača ne štampa pozadinske slike i boje. To možete videtiu Print Preview režimu, ako je vaša Page Setup ili čitačeva postavka koja se odnosi nabackground 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. Zatosmo postavili stil atribut border-top za oblast sadržaja.

<html>

<head>


.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>



<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"


height="14" border="0"

alt="Show/Hide" title="Show/Hide" /></div>

</div><div class="squareboxcontent">

<img width="150" height="100"

src="../images/photo.jpg"


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, dekla-risane 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 jezgodno zbog višestruke iskoristivosti, boljeg strukturiranja i kreiranja kompaktnijeg HTMLkoda. Ako kreirate više panela na istoj stranici sa sličnim stilovim, lakše je da specifici-rate samo naziv CSS klase, a ne da ponavljate više puta iste vrednosti. Kadgod su vampotrebni dodatni stilovi za HTML element koji je već renderovan kroz CSS klasu, dodajtestilski atribut neposredno preko inline pristupa.

Pogledajte sada JavaScript kôd, unutar SCRIPT tagova u sekciji HEAD. Potpis (captiontitle) poziva togglePannelStatus funkciju kada se na njega klikne, prosleđujući kaoargument DIV content element. Ovaj element će biti sakriven (display="none") kod sku-pljanja (on collapse), a prikazan (display="block") kod razvijanja (on expand). Ostatakkoda menja izvor slike ševrona. Zapazite da sa SPLIT-JOIN kombinacijom na SRC stringatributu 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 sasvimnepotrebno suviše složeni. Neki zahtevaju jedinstvene vrednosti id atributa, kukije naklijentskoj 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 (Docu-ment Object Model) blok koda i ništa više, i to ćemo referencirati ka HTML elementimana relativan način. U tom smislu postoje četiri osnovna DOM svojstva koja treba daznate i da koristite, a prikazana su na slici: parentNode, nextSibling, firstChild ichildNodes.

JavaScript DOM je sada standard za većinu čitača, ali postoji jedna stvar o kojoj trebada vodite računa: za razliku od Internet Explorera, Firefox neće ignorisati beline izmeđudva elementa, već će ih smatrati #Text DOM čvorom. Stoga striktno se pridržavajteneposrednog ređanja HTML tagova, bez belina između zatvarajućeg taga i početka sle-dećeg taga.

Mogli biste i da enkapsulirate kompletan HTML kôd panela u funkciju, klasu ili Webkontrolu 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žeteautomatski da podesite veličinu slike senke i da vaš kôd postane još kompaktniji. Buduća


poboljšanja ove funkcije bi mogla da se odnose na automatsko propagiranje na sve stranicesajta 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 stvaristvara utisak animacije.

I ovoga puta učinjen je pokušaj da se stvari učine što je moguće prostijim, tako da jeizbegavano 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 visinese dinamički određuje u vreme izvršavanja od strane čitača.

Međutim, srećna okolnost je što imamo na raspolaganju offsetHeight svojstvo HTMLelementa, ali on mora biti vidljiv (HTML element). Kada je naš sadržaj skupljen i sa-kriven, prva stvar koju moramo da uradimo je da ga učinimo vidljivim (postavljamo dis-play="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 HTMLstranica.

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)

{


content.style.display = (expand ? "block" : "none");

toggleChevronIcon(content);

}

var currentContent = null;

function togglePannelAnimatedStatus(content, interval, step)

{

if (currentContent==null)

{


currentContent = content;


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 ani-mirani panel. Svaka animacija pozivaće togglePanelAnimatedStatus, prosleđujući kaoargumente neke parameter za podešavanje animacije – interval specificira broj milisekundiizmeđu osvežavanja prikaza čitača za vreme animacije, a step daje broj piksela za kojise uvećava ili smanjuje visina između dve sekvence osvežavanja. Kombinacija ove dveveličine definiše u suštini brzinu animacije.

Kada animacija skupljanja/razvijanja počne, globalna promenljiva currentContent je pos-tavljena 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 poslevrednosti interval preko Javascript poziva setTimeout, i ne možete proslediti objekte kaoargumente ovoj funkciji.

Da bi koristili ove funkcije i za skupljanje i za razvijanje, pozitivnu step_height vred-nost prosleđujemo za skupljanje, a negativnu za razvijanje. Kada step_height (koja držitekuću visinu animiranog panela) postane manja od 0 ili veća od max_height (koja držirenderovanu 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 elemen-te. Ako se javlja neko dinamičko ponašanje usled korisnikove akcije, kao što je skupljanjeili razvijanje, ili promena oblika na klik miša ili prelazak miša preko elemenata, to najve-rovatnije znači da neki HTML elementi imaju JavaScript funkcije "prikačene" njihovimdogađ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 izvornikôd i locirate određene sekvence tražeći neke vidljive ključne reči prema prikazanomtekstu.

• Definicije CSS stilova korišćenih sa tim HTML elementima. Neki elementi mogu daimaju tzv. inline stilske deklaracije, preko style i drugih HTML specifičnih atributa.Međutim, većina Web programera koristi posebne CSS definicije, bilo inline, unutarSTYLE 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 oCSS 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 sekvencii u CSS stil definicijama.

• Definicija eventualnog JavaScript koda koji se koristi za boksove. JavaScript funkcijei kôd pojavljuju se često unutar deklaracija događaja HTML elementa, kao što jeonclick, onmouseover, onmouseout... Kao i kod CSS-a, JavaScript kôd može bitiili deklarisan inline, na istoj Web stranici, unutar SCRIPT blokova, ili definisan uposebnim JS fajlovima, linkovanih iz header sekcije stranice.

Glava 11

Multimedijalno umrežavanje

Definisaćemo principe multimedijalnog umrežavanja i mrežne servise. Klasifikovaćemomultimedijalne aplikacije i dati mehanizme za obezbeđivanje kvaliteta servisa, odnosnospecifične protokole za servis najboljeg pokušaja. Prikazaćemo odgovarajuće protokole iarhitekture.

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 – promenakašnjenja paketa unutar istog toka paketa) i

2. tolerancija gubitaka.

Ove karakteristike se razlikuju od "elastičnih" Web aplikacija, e-mail, FTP i Telnet, kojesu 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 funkcijepauze, brzog premotavanja itd.

• Reprodukcija zvuka/videa iz fajla koji je uskladišten na server strani može da otpočnei 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 kaokod aplikacija "uživo", interaktivnih aplikacija kao što su telefoniranje preko Interneta ivideo konferencije.

Za reprodukciju se najčešće koristi sledeći softveri – RealPlayer, QuickTime i MediaPlayer.

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 prenosnimedijum 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ćeje brzo premotavanje, ali je moguće premotavanje, pa pauza. Primeri aplikacija su Internetradio 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 apli-kacije itd. Pri prenosu glasa kašnjenja manja od 150ms slušalac ne primećuje, kašnjenjaizmeđu 150ms i 400ms mogu biti prihvatljiva.

11.1.4. Prenos glasa preko Interneta (Voice over IP – VoIP)

Prototip sistema za telefoniranje preko Interneta na osnovu prenosa paketa napravljenje osamdesetih godina prošloga veka. Prva varijanta Internet telefoniranja realizovana jedevedesetih godina dvadesetog veka od jednog PC-ja do drugog PC-ja. Komunikacijaglasom preko Interneta postala je popularna krajem devedesetih godina. Aplikacija odPC-ja do telefona dozvoljava korisniku sa Internet konekcijom i mikrofonom da pozovesvaki običan telefon. Veza se ostvaruje od PC-ja, preko mrežnog prolaza, komutiranihtelefonskih mreža, do telefona (fiksnog i/ili mobilnog). Za komunikaciju preko Internetaizmeđu PC-ja i mrežnog prolaza, koriste se protokoli kao što je RTP, SIP i H.323. Drugaklasa aplikacija je od telefona preko Interneta do telefona. Ovo telefoniranje je jeftinijeod 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, zarazliku od od aplikacija koje rade sa podacima.

IP protokol obezbeđuje najbolju moguću uslugu svim datagramima (podaci na nivoumrežnog sloja) koji se prenose preko Interneta. Protokol ne može da garantuje određenovreme prenosa zbog različitih kašnjenja individualnih paketa od jednog do drugog kraja izbog promene kašnjenja paketa unutar toka paketa. Protokol ne garantuje ni propusnost.Kako TCP (Transmission Control Protocol) i UDP (User Datagram Protocol) protokoli radena 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 manjesu 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 pro-pusnog opsega, odnosno zagušenje na linkovima utiče na kvalitet prenosa glasa i videa urealnom 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 bioveoma popularna aplikacija. Kako cene diskova padaju, a kapaciteti rastu i kako se brzineprenosa koje su korisnicima na raspolaganju povećavaju (kablovski modemi, ADSL), kaoi primena distribuiranog sadržaja (keširanje i CDN – Content Delivery Network) i novihprotokola koji zadovoljavaju određeni QoS (Quality of Service), ove aplikacije se sve višekoriste. 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žesa 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 zaprenos "uživo" (sportski događaji), ...

• integrisani servisi – treba da se izvrše fundamentalne promene rutera i host raču-nara tako da se obezbedi da virtuelna kola garantuju širinu propusnog opsega iodgovarajuća kašnjenja.

• različite klase servisa – od klase virtuelnih kola gde se garantuje širina propusnogopsega i određeno kašnjenje korisnika kojima se garantuje određeni saobraćaj naInternetu.

Na klijentov zahtev server šalje komprimovani zapis na soket kao krajnju tačku komuni-kacija. U praksi se za multimedijalne aplikacije koriste UDP soketi. Pre slanja datotekesa audio/video zapisom u mrežu, datoteka se deli na segmente, a zaglavlja se običnoenkapsuliraju u UDP segment. Protokol RTP (Real Time Protocol) za rad u realnom vre-menu predstavlja standard za enkapsulaciju. Interaktivnost korisnika (pauza, skok, ...) jeobezbeđena protokolom RTSP (Real Time Streaming Protocol).

Klijent prima zahtevanu datoteku koristeći medija plejer aplikaciju. Medija plejer imagrafički interfejs sa odgovarajućim tasterima (kontrolna dugmad) kojima se ostvaruje in-teraktivnost. 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 paketana zahtev klijenta, ...).

11.2.1. Tipična arhitektura za striming

Ova arhitektura zahteva dva servera, HTTP server koji opslužuje Web stranice (uključujućimetadatoteke) 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 fajlod striming servera, a ne od Web servera. Ovi serveri mogu međusobno da komunicirajukoristeći sopstvene protokole.

Komprimovani video se smešta na prijemnoj strani u privremenu memoriju medija ple-jera. Posle početnog kašnjenja od nekoliko sekundi, medija plejer čita iz svoje privremenememorije 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 kon-stantna u vremenu (slika 11.2).

Izbegavanje jitter-a se ostvaruje pridruživanjem broja sekvenci (sequence numbers), vre-menskim 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


• 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žnihzaguš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žnojitter 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 izgubljenihpaketa

• 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 komandeza brzo premotavanje, repozicioniranje itd. Protokol RTSP (definisan RFC 2326) je klijent-server protokol aplikacionog sloja. Korisniku je omogućeno da kontroliše displej: premo-tavanje, brzo premotavanje, pauzu, nastavak itd.


Ovaj protokol ne definiše kompresione šeme za audio i video signale, ne definiše kako jeaudio/video enkapsuliran za striming preko mreže, ne određuje kako se strimovani multi-medijalni podaci transportuju (može biti transportovan preko UDP-a ili TCP-a) i ne određujekako 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 podatkeka 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) itišina. Frekvencija odabiranja audio signala je 64 kbps za vreme priče, gde se i paketigenerišu samo za vreme priče. Trajanje paketa je 20ms, odnosno 160 bajtova po paketu.Svakom skupu podataka govora dodaje se zaglavlje aplikacionog sloja, gde se zajednoenkapsuliraju u UDP segment. Aplikacija šalje UDP segment na soket svakih 20ms zavreme 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 popu-njen 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 zbogprostiranja od kraja do kraja mreže (pošiljalac i primalac). Tipično maksimalno dozvolje-no kašnjenje je 400ms, dok je kašnjenje manje od 150ms idealno.

Tolerancija gubitaka zavisno od kodiranja glasa, prikrivanja gubitaka, brzine gubitaka pa-keta ne prelazi 20%.

Za prenos multimedijalnih podataka na Internetu koristi se UDP protokol da bi se izbe-glo kašnjenje koje unosi TCP protokol zbog kontrole zagušenja (congestion control) zavremenski – osetljiv saobraćaj. Na klijent strani koristi se adaptivno playout kašnjenje zakompenzaciju kašnjenja. Na server strani podešava se širina propusnog opsega strima odklijenta do servera.

Slika 11.5. Enkapsulacija i prenos paketa

Oporavak od grešaka (na vrhu UDP-a) se izvodi preko preklapanja i ponovnog slanjapaketa (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 vre-menu.


11.4.1. Protokol za rad u realnom vremenu(Real Time Protocol – RTP)

Ovaj protokol određuje strukturu paketa audio i video strimova. Predajna strana multi-medijalne aplikacije dodaje polja zaglavlja malim delovima paketa (chunk) koji nose audioi video podatke pre nego što ih prosledi transportnom sloju. Ta polja zaglavlja uključujuidentifikaciju korisnika, brojeve sekvenci i vremenske oznake paketa.

Ovaj protokol se koristi za interoperabilnost između multimedijalnih aplikacija (Internetphone aplikacije). Radi na vrhu UDP protokola, odnosno RTP paketi su enkapsulirani uUDP segmente (RFC 1889). RTP radi na krajevima sistema. RTP biblioteke obezbeđujuinterfejs transportnog sloja što proširuje UDP: broj porta, IP adresa, identifikacija tipapodataka 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 mo-dulacija) preko RTP-a. Aplikacija sakuplja kodirane podatke u celine (na primer, svakih20ms, 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 menjakodiranje za vreme konferencije.

RTP ne daje bilo kakav mehanizam za obezbeđivanje isporuke podataka za određenovreme 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 RTPpaketi 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 transmitujeRTCP 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: sinhro-nizaciju kolizije, trenutno vreme, broj poslatih paketa, broj poslatih bajtova. Na prijemnojstrani: broj izgubljenih paketa, broj poslednje sekvence, srednju vrednost jitter-a itd.

Povratna sprega može da se koristi za kontrolu performansi (kontrola zagušenja, tipkodovanja). Pošiljalac može da modifikuje transmisiju korišćenjem povratne sprege. Zajednu RTP sesiju postoji tipično jedna višestruka (multicast) adresa; svi RTP i RTCPpaketi 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 biograničili saobraćaj, svaki učesnik smanjuje svoj RTCP saobraćaj kako se broj učesnika nakonferenciji povećava.

RTCP pokušava da ograniči svoj saobraćaj na 5% širine opsega sesije. Na primer – pret-postavimo da jedan korisnik šalje video zapis brzinom od 2Mbps. RTCP pokušava daograniči svoj saobraćaj na 100Kbps. RTCP daje 75% od ove brzine primaocu; preostalih25% pošiljaocu. 75 kbps se podjednako deli između primaoca. Sa R primaoca, svaki pri-malac dobija da pošalje RTCP saobraćaj od 75/R kbps. Pošiljalac dobija za slanje RTCPsaobrać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, dase ljudi identifikuju po imenima ili e-mail adresama radije nego po telefonskim brojevimai da se korisnik koji poziva može naći (dostupan je) bez obzira gde je ili koji IP uređajtrenutno koristi.

Uspostavljanje poziva se zasniva na startu, upoznavanju pozvanog korisnika sa željom zauspostavljanje 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 adresudefiniše mobilnost, promenu IP adrese zavisno od DHCP-a, više različitih IP uređaja pokorisniku i preusmeravanje poziva.

Upravljanje pozivom podrazumeva: dodavanje novih strimova za vreme poziva, promenuvrste 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šnogservera u realnom vremenu drugim klijentima koji se nalaze na geografski udaljenim mes-


tima. Rešenje je pravljenje replika sadržaja na stotine servera kroz Internet, i mešanjesadržaja "blizu" korisnika izbegavajući gubitke i kašnjenja sadržaja koji se šalje duž dugihputanja. 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 radsa 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 daalociraju širinu propusnog opsega i druge resurse na način koji obezbeđuje ispunjenjezahteva 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 okokarakteristika. Jednom kada se QoS zahtevi prihvate, resursi se rezervišu i garantuju apli-kaciji.


Oblikovanje saobraćaja koristi algoritme koji baferuju podatke u realnom vremenu kakobi saobraćaj bio uravnotežen (bez "uskog grla" i "špiceva"), koristeći princip "kofe kojacuri" (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) kojiobezbeđuje isporuku video strimova u realnom vremenu na zahtev na velikim rastojanjimasa jakim garancijama za QoS. Sistem može da servisira 602 istovremene isporuke strimovabrzinom od 2Mbps 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 novapolitika 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 togada je 2009. godine. Internetom bilo povezano 1, 73 milijarde korisnika i registrovano višeod 81, 8 miliona domena imena ".com". Tokom 1992. godine dozvoljeno je komercijalnoi 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žneservise kao što je fajl transfer, elektronska pošta ili štampanje dokumenata na računaruklijenta. Koristeći mrežne prolaze i rutere, lokalne mreže (LAN) mogu da se povežu sadrugim lokalnim mrežama i formiraju veće mreže (WAN). Ove mreže mogu da se povežuna Internet kroz servere koji obezbeđuju neophodan softver za Internet i konekciju zapodatke (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 uprotokol TCP/IP (Transmission Control Protocol/Internet Protocol) 1983. godine, sistemdomenskih imena (Domain Name System – DNS) je bio razvijen za dodelu imena i adresaračunarima koji su povezani na Internet. Domeni najvišeg nivoa (TLD) su uspostavljenikao 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 domenanajvišeg nivoa, preko domena različitih nivoa odvojenih tačkom polazeći od desne straneka levoj.

Za e-mail račun se kaže da je "na" ("at" - @) domenu. U nazivu e-mail adrese nema blankznakova i mada se adrese na Internetu mogu pisati i velikim i malim slovima, uobičajenoje 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 napakete. Svaki paket uključuje adresu odredišnog računara, broj sekvence ("ovo je paketbroj 7"), informacije za korekciju greške i deo podataka koji se šalju. Nakon kreiranjapaketa 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 Internetadresa. 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 dodeljeniod strane Internet Service Providera (ISP) kada se računar priključi na Internet preko dial-up konekcije. U primeni je nov standard 128-bitnog adresiranja IPv6.

Na Internetu postoje serveri domenskih imena čiji je posao da brzo pretraže tekstualneadrese imena domena u velikim distribuiranim bazama podataka, konvertuju ih u realneIP 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 ubrojeve. 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 adresei broj porta. Popularnim protokolima aplkacijskog sloja dodeljeni su određeni brojeviportova, na primer za HTTP server 80, za mail server 25 itd. Spisak poznatih brojevaportova 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 ServiceProvider (ISP). Postoje i online servisi kao što su America Online (AOL) ili Microsoft Net-work (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 teleko-munikacione 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. Štoje brži prenos (što je veća širina propusnog opsega određene veze) manje vremena se čekana 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 329

12.2. Internet servisi

Za mnoge korisnike Internet znači World Wide Web. Ali Web je samo poslednji i najpo-pularniji od servisa koji su dostupni na Internetu. E-mail, fajl transfer, diskusione grupe ivesti, ćaskanje u realnom vremenu koristeći tekst, glas i video, i sposobnost prijave (logo-vanja) na udaljene računare su ostali Internet servisi.

Svaki Intenet servis je implementiran na Internet serveru kao posvećeni softver poznat kaodaemon. (Ustvari,daemon-i samo postoje u Unix/Linux sistemima. Na drugim sistemimakao što je Windows NT, servisi mogu da rade kao obične aplikacije ili procesi koji rade upozadini). 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 spoljnezahteve. u slučaju Interneta, daemon-i podržavaju protokole kao što je HTTP za WorldWide Web, POP3 protokol za e-mail, ili FTP protokol za razmenu fajlova. Ovi programimogu 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 pre-poznatljiva 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 korektnimkodovanjem 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 prirodupodataka koji se prenose, i zaključio koja je svrha tih podataka, Internet koristi stan-dardnu listu ekstenzije imena fajla zvanu MIME – tipovi (Multipurpose Internet MailExtensions). Mnogi brauzeri dozvoljavaju definisanje MIME – tipova. Na primer, saNetscape navigatorom možete da definišete Adobe-ove akrobat fajlove (PDF fajlove) kaoMIME – tip i selektujete Acrobat Reader kao plejer aplikaciju.

Ovo ne koristi samo e-mail daemon, već, po konvenciji, i drugi Internet daemoni uključu-jući Web-ov HTTP daemon. Možda najčešće instaliran HTTP softver za upravljanje Webstranicama je aplikacija otvorenog koda zvana Apache (http://www.apache.org).

Multimedijalni elementi su tipično čuvani i prenošeni na Internetu u odgovarajućem MIME-tip formatu i imaju odgovarajuće ekstenzije toga tipa. Na primer, Shockwave Flash fajlovisa animacijom imaju ekstenziju .swf, fajlovi sa slikom .jpg, .jpeg, .gif ili .png, fajlovisa zvučnim zapisom završavaju se sa .au, .wav, .aif, .mp3; Quick Time i drugi videoklipovi završavaju se ekstenzijom .qt, .mov ili .avi.

Slika 12.1. Browser (aplikacija za pronalaženje i prikaz Web stranica) određuje kako daprocesira podatke


12.3. Mrežne aplikacije

Klijent je proces koji inicira komukikaciju sa serverom. Server je proces koji pruža us-luge klijentima. Proces je program koji se izvršava na host računaru. Na istom hostu,dva procesa komuniciraju koristeći međuprocesne komunikacije (definisane operativnimsistemom). Procesi na različitim hostovima komuniciraju razmenom poruka. Proces ša-lje/prima poruke ka/od svog socket-a. Soket je krajnja tačka komunikacije. Trebalo bi inapomenuti 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 kojise č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, JPEGslika, Java aplet, audio fajl... Web strana se sastoji od osnovnog HTML-fajla koji uključujenekoliko referenciranih objekata. Svaki objekat može da se adresira koristeći URL (UniformResource 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, uovom slučaju gif fajla. Browser je korisnički agent za Web. Softverski agent se definišekao autonomni proces sposoban da reaguje i inicira promene u svom okruženju, posebnou 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činna koji Web klijenti (na primer brauzeri - čitači, pregledači) traže Web strane od Webservera, kao i način na koji Web serveri šalju tražene strane klijentima.

Posmatramo klijent/server model. Klijent koristi browser koji zahteva, prima, "prikazujena displeju" Web objekte. Server šalje objekte kao odziv na zahteve klijenta. Klijentinicira TCP konekciju (kreira soket) ka serveru, port 80. Server prihvata TCP konekcijuod klijenta. HTTP poruke (poruke protokola aplikacijskog sloja) se razmenjuju izmeđubrowser-a (HTTP klijent) i Web servera (HTTP server). Zatvara se TCP konekcija.

HTTP je "stateless" protokol, odnosno server ne održava informacije o prethodnim zahte-vima 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 četirikomponente:

• 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 stranekorisnikovog 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šćenjekolačića može narušiti privatnost klijenata.

Web keš (zastupnik – proksi server) se koristi da se zadovolji klijentov zahtev bez uključenjaizvornog Web servera. Korisnik startuje browser koji šalje sve HTTP zahteve kešu. Akoje 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 odzivana zahtev klijenta. Smanjuje saobraćaj na pristupnom linku korisnika. Internet sa kešomomoguć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 seklijent/server model, odnosno klijent je strana koja inicira transfer (daljinski), a server jeudaljeni 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 direktori-jum šaljući komande preko kontrolne konekcije. Kada server primi komandu za transfer


fajla, server otvara TCP konekciju za prenos podataka ka klijentu. Nakon transfera jednogfajla, server zatvara konekciju.

FTP server održava "stanje" korisnika – tekući direktorijum, prethodna autorizacija, ko-risnički nalog itd.

Postoje tri glavne komponente elektronske pošte korisnički agenti, mail serveri i protokolza 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, atekstualni 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, kaoi red odlazećih poruka (koje će biti poslate). Za slanje poruka između mail servera koristise SMTP protokol.

Za pouzdan transfer e-mail poruke od klijenta do servera na portu 25 koristi se TCPprotokol. Transfer je direktan bez posrednika od servera koji šalje do servera koji primaporuke.

SMTP je mnogo stariji protokol od HTTP-a. SMTP koristi perzistentne konekcije i za-hteva da poruka (zaglavlje i telo) bude u 7-bitnom ASCII formatu, dok HTTP protokolnema to ograničenje. Dakle, oba protokola se koriste za transfer fajlova. HTTP protokolje "pull" protokol koji "vuče" podatke, dok SMTP "push" "gura" podatke. Oba protokolaimaju interakciju komanda/odziv u ASCII kodu i statusni kôd. Kod HTTP protokola svakiobjekat je enkapsuliran u svoju sopstvenu odziv-poruku. Kod SMTP protokola svi objekatisu u jednoj poruci.

MIME (Multipurpose Internet Mail Extension) je proširenje za rad sa multimedijom (RFC2045, 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 Multimedija

12.4. World Wide Web i HTML

World Wide Web je startovao 1989. godine u CERNU kao "distribuirani kolaborativnihipermedijalni informacioni sistem". Projektovao ga je Tim Berners - Lee kao protokolza povezivanje više dokumenata lociranih na računaru bilo gde na Internetu. Hyper TextTransfer Protocol (HTTP) je obezbedio pravila za jednostavne transakcije između dvarač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 drugeslične dokumente. Korisnik može da surfuje iz dokumenta u dokument po Webu koristećiHTML okruženje.

12.4.1. Dinamičke Web stranice i XML

HTML je pogodan za pravljenje i isporuku jednostavnijih statičkih Web stranica. Među-tim, za isporuku dinamičkih stranica izgrađenih kao kombinacija teksta, grafike, animacijainformacija sadržanih u bazama podataka ili dokumentima, potrebni su drugi alati i pro-gramerske veštine. JavaScript i programi napisani u Java programskom jeziku mogu dase 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 štoje Apache; oni skeniraju odlazeću Web stranicu za specijalne komande i naredbe, običnougrađene u specijalne tagove. Kada naiđe na specijalni tag na stranici, softver će uraditiono što tag definiše, na primer, "uzmi današnji datum i ubaci ga u ćeliju tabele". Radećiparalelno sa aplikacionim serverima, Oracle, Sybase i mySQL nude softver za upravljanjeSQL (Structured Query Language) bazama koje mogu da sadrže ne samo teks već i grafikui multimediju.

Flash animacije i Director aplikacije mogu takođe da se pozovu iz HTML stranica. Ovemultimedijalne mini aplikacije, često programirane od strane Web developer-a, koristebrauzerove plaginove za prikaz akcije i izvođenje zadataka kao što su izvođenje zvučnihzapisa, prikazivanje videa ili neko drugo izračunavanje. Kao i Cold Fusion i PHP i onikoriste programske jezike, odnosno, skripta (ActionScript i Lingo).

XML (eXtensible Markup Language) ide iznad HTML-a. To je novi korak u razvoju Inter-neta za formatizovanje i isporuku Web stranica koristeći stilove. Za razliku od HTML-amožete da kreirate sopsvene tagove u XML-u za opis tačno onoga što podaci znače imožete dobiti te podatke sa bilo kog mesta na Webu. Na primer:


<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 istilu) 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čunaraka računaru preko računarske mreže. Interfejs je opisan u formatu koji može da procesiraračunar WSDL (Web Services Description Language). Drugi sistemi interaguju sa Webservisom na način opisan koristeći SOAP (Simple Object Access Protocol) poruke, tipičnoprenošene koristeći HTTP sa XML serijalizacijom u spoju sa drugim Web-povezanim stan-dardima.

Web servis je apstraktan pojam koji mora biti implementiran konkretnim agentom. Agentje deo softvera ili hardvera koji šalje ili prima poruke, dok je servis resurs okarakterisan saapstraktnim skupom funkcionalnosti kojima je obezbeđen.

12.6. Mrežne multimedijalne aplikacije

Postavljanje multimedijalne aplikacije 1994. godine između Kalifornije i Kopenhagenatrajalo je nekoliko dana i koštalo je oko 100 000 dolara za radne sate, opremu i komu-nikacije. Od tada cena postavljanja multimedijalnih aplikacija stalno opada. Multimedi-jalne mrežne aplikacije prožimaju sve oblasti od video igara na računarskim mrežama doedukacije, odnosno, učenja na daljinu.

Postoji još jedna klasifikacija multimedijalnih aplikacija u dve grupe. Prva grupa aplokacijaMultimedia Content Delivery – MCD aplikacije koje dozvoljavaju ljudima da pristupe i radesa elektronskim sadržajem (isporuka multimedijalnog sadržaja). Primeri su – pristup digi-talnim video bibliotekama, praćenje video programa, kombinovanje delova različitih videoprograma da bi se napravio novi program.

Druga grupa zvana PMC – Personal Multimedia Communication aplikacije koje omogućujuljudima š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 svetamobilnih telefona (cellular) i Internet sveta koriste dobro poznate multimedijalne servisekao što su SMS/MMS, Presence, Instant Messaging, Push to Talk, Unified Messagingitd.

Na komercijalnom nivou provajderi pristupa nude istovremeno fiksne i mobilne IP tele-fonske servise, IPTV i Web pristup i pružaju korisniku mogućnost da plaća sve servisepreko jednog računa.

336 Multimedija

Ako kao primer uzmemo Microsoft Messenger servis, on obezbeđuje ne samo rad saporukama nego i telefiniranje, video telefoniranje, razmenu sadržaja, tekstualne/audio/vi-deo vesti, jaku spregu ka elektronskoj pošti, news grupe, kupovinu preko mreže, blogoveitd. Ovo znači da je veoma teško posmatrati određeni servis kao usamljenu mrežnu ap-likaciju. To je komponenta koja treba da bude pridružena drugim mrežnim aplikacijamauz standardizovane mrežne interfejse, ne samo za korisnika sevisa (klijenta) nego i zainfrastrukturu servis provajdera.

Tehnički posmatrano postoji trend konvergencije PC industrije i difuzne (broadcast) in-dustrije.

Televizijski terminali zahtevaju uređaje koji primaju i dekodiraju digitalni televizijski signalkoji se difuzno prostire i imaju interfejs ka Internetu kroz korisnikov televizor. U IPTVmrežama, taj uređaj je mali računar koji obezbeđuje dvosmernu komunikaciju na IP mrežii dekodira video striming podatke. Ovo dozvoljava podacima iz različitih aplikacija da seprostiru zajedno sa TV strimovima, interaguju sa TV programom i kreiraju nove aplikacije.

Internet Protocol televizija (IPTV) je sistem koji televizijske i/ili video signale distribuirado pretplatnika ili gledaoca koristeći difuzne konekcije preko Internet protokola. Često jeovo paralelno sa pretplatnikovom Internet konekcijom dobijenom od broadband operatorakoristeći istu infrastrukturu, ali preko dodeljene određene širine propusnog opsega. Dokfiksne broadband konekcije imaju dovoljno veliku širinu propusnog opsega koja garantujevisok kvalitet interaktivnih multimedijalnih aplikacija, ovo još uvek nije primenjeno naGSM/GPRS pristup mobilnim mrežama.

IPTV kombinuje televiziju visoke definicije (High Definition TV – HDTV) i nove standardekompresije AVC (Advanced Video Compression). Prednosti IPTV uključuju dvosmernukomunikaciju kao i point-to-point distribuciju dozvoljavajući svakom gledaocu da gledaprogram koji želi. Ovo znači – sopstvena kontrola (pauza, premotavanje ...) i slobodnaselekcija programa. Omogućena je i integracija sa drugim uređajima kao što su PDA imobilni telefoni.

Interaktivna televizija nudi (Interactive Digital Television – iDTV) prošireni TV sa različitimsadržajem (teks, grafika ili video), Internet dozvoljavajući korisniku da surfuje Webom,elektronsku poštu (čitanje i pisanje), ćaskanje itd. Individualno korišćenje TV resursaomogućuje korisniku promenu ugla kamere, pozive i trenutne odgovore. Drugi zajedničkielementi iDTV su video na zahtev (Video-on-Demand – VOD) i funkcije personalnog videorekordera.

Glava 13

PHP

PHP predstavlja jezik za pisanje skriptova koji rade na serveru. Projektovan je za upotrebuna Web-u. Njegovu početnu verziju je 1994. godine napravio Rasmus Lerdorf. Razvijenje da bi mogao da "prati" posetioce njegovog sajta. Kasnije je PHP prošao kroz nekolikoverzija 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 kojimože besplatno da se koristi, menja i dalje distribuira.

PHP se koristi za rad sa formama, procesiranje fajlova i pristup bazama podataka (MSSQL Server, MySQL, Oracle, PostgreSQL, Sybase...).

Kao Web server može da koristi: Apache, MS Internet Information Server (IIS)... OdPHP-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) iinterpret (PHP).

PHP naredbe se ne vide na klijentskoj strani zato što interpreter PHP koda naredbezamenjuje rezultatom. To znači da se iz PHP koda dobija čisti HTML kôd koji se možepregledati pomoću svakog čitača – brauzera.

PHP kôd se interpretira i izvršava na serveru (za razliku od JavaScript koda koji se izvršavaunutar č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 preuzmesa adrese http://www.php.net.

• Lako se uči i upotrebljava. Sintaksa PHP-a je slična sintaksama drugih programskihjezika

• Prenosivost. PHP je na raspolaganju za različite operativne sisteme. Napisani kôdnajčešće će raditi bez izmena i pod drugim operativnim sistemima gde je instaliranPHP.

• 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 destruk-tori).

• Ugrađene biblioteke za obavljanje velikog broja poslova uobičajenih u Web aplikaci-jama. PHP-ove biblioteke omogućavaju veliki broj funkcija kao što su: generisanjeslike tokom rada aplikacije, uspostavljanje veze sa Web servisima, korišćenje XMLdokumenata, 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 HTMLkoda, može biti napisan na više načina od kojih su najčešći:

interno:

<?php

?>

ili eksterno:

include ("myScript.inc")

PHP 339

Prazan prostor - beline nemaju uticaja. Naredbe se završavaju sa ; (tačka zapeta). Star-tovanje može da se ostvari preko komandne linije ili preko Web servera. Web serverinterpretira PHP kôd. Može doći do "mešanja" PHP koda i HTML koda, što kao rezultatdaje 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 for-mira koristeći zagrade. Skup naredbi ne može da definiše lokalni doseg promenljivih (osimu 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) varijablaima vrednost NULL. Funkcija unset postavlja varijablu na NULL. Funkcija IsSet se koristi zaodređivanje da li je varijabla NULL. Kada se neograničena varijabla referencira interpreterprikazuje 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 ipromenljiva dvostruke tačnosti double su kao kod drugih jezika, dok je boolean – vrednostili true ili false (case insensitive).

340 Multimedija

13.2.3. 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 promenlji-vama. 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

PHP 341

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 trinačina da bi se proizveo output: echo, print i printf. Ako se koriste echo i print uzima sestring. 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 nizovadrugih jezika. PHP niz je stvarno mapiranje ključeva na vrednosti, gde ključevi mogu dabudu 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) kaoparametre i vraća niz njihovih vrednosti. Ključevi su nenegativni integer literali ili stringliterali – slova. Kao vrednost može da se uzme bilo šta. Slede primeri nizova i elemenata:

$list1 = array();

$list2 = array (17, 24, 45, 90);

$list3 = array(0 => "jabuke", 1 => "pomorandze", 2 => "kruske")

$list4 = array("Joe" => 42, "Mary" => 41, "Jan" => 17);

342 Multimedija

13.2.11. 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 raz-maknicom (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 sa-daš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)

PHP 343

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šnoje redefinisanje funkcije. Imena funkcija nisu case sensitive. Naredba return vraća vrenostiz funkcije.

13.2.15. Parametri funkcije

Ako pri pozivu funkcije ima previše stvarnih parametara, funkcija ignoriše višak. Defaultmetod prosleđivanja parametara je prosleđivanje po vrednosti – pass by value (jednosmernakomunikacija). Da bi se odredilo prosleđivanje po referenci – pass-by-reference, dodaje seampersand & 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 varijablamakoje nisu lokalne u funkciji, mora varijable da deklarišemo kao globalne - global (unutarkoda funkcije)

global $sum;

Normalno, vreme trajanja varijable u funkciji je od njenog prvog poziva do kraja izvršenjafunkcije.

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 actionatributa.

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ćereferenciranja. 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 otva-ranja. 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 parame-tar:

$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 karak-tera 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):

PHP 345

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ćifunkciju flock koja ima dva parametra, promenjivu koja je pridružena fajlu i ceo broj kojiodređuje određenu operaciju: 1 – fajl mogu da čitaju drugi, 2 – zabranjeno korišćenje fajlai 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 sevreme trajanja – lifetime. Svaka HTTP komunikacija između brauzera i servera uključujeinformacije u njegov heder o poruci (ovo može da uključi cookies). Brauzer može da budepostavljen 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 PHPdokumenta, 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 nevodi računa o statusu konekcija (stateless). Alternativa su kolačićima. Postoji nekolikorazloga 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 seid 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ôdu 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 po-dataka. 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, kojimože direktno da pristupi i ažurira bazu podataka. Rešenje problema dvoslojnih sistema jedodavanje komponente u sredini čime se kreira troslojni sistem. Za Web bazirani pristupbazi podataka, srednji sloj može da startuje aplikacije (klijent samo treba da pokupirezultate).

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 kojijedinstveno identifikuju svaki red u tabeli.

PHP 347

13.3.1. Arhitektura za pristup bazi podataka

Treba definisati API interfejs (Application Programming Interface) za svaki specifičan sis-tem 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) imple-mentacija. Ova baza podataka je definisana na adresi http://www.mysql.org. Da bipristupili MySQL bazi podataka u Unix sistemu treba da dodate mysql vašoj tekućoj listipaketa. 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 ko-manda:

$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>";

}