klijentske web tehnologije.pdf
TRANSCRIPT
SVEUČILIŠTE U ZAGREBU
FAKULTET ORGANIZACIJE I INFORMATIKE VARAŽDIN
Irena Holjevac
Smjer: Primjena informacijske tehnologije u poslovanju
VI/1 stupanj
klijentske web tehnologije
DIPLOMSKI RAD
Voditelj rada:
prof.dr.sc. Neven Vrček
Varaždin, travanj 2010.
1. UVOD
2. HYPERTEXT MARKUP LANGUAGE (HTML)
o Povijest HTML-a
o HTML dokument
o Sintaksa HTML elemenata
o Struktura HTML dokumenta
Deklaracija vrste dokumenta
Dokument
Zaglavlje dokumenta
Tijelo dokumenta
HTML tagovi tijela dokumenta i njihov opis
Elementi formatiranja teksta
Tip teksta
Slike
Liste
Tablice
Hyperlink
Forme
Generički tagovi
Ugradjeni-objekti
Ostali tagovi
o Extensible HyperText Markup Language (XHTML)
Neke od kodnih razlika XHTML-a u odnosu na HTML
o HTML5
3. CASCADING STYLE SHEETS (CSS)
o Sintaksa
Vrste selektora
o Vrijednosti svojstava
Dimenzije
Boje
Konstante specifične za pojedina CSS svojstva
o Stiliziranje elemenata
Box-model elementa: dimenzija, razmak, rub, margina
Rub (border)
Opći vizualni stilovi elemenata
Pozadina
Font
Osobine teksta
Specifični stilovi pojedinih elemenata
Hyperlink
Lista
Tablica
Pseudoklase i pseudoelementi
o Pozicioniranje elemenata
Predefinirano pozicioniranje u HTML-u
Pozicioniranje elemenata pomoću CSS-a
Vrste pozicioniranja
Float elementi
Prikaz i vidljivost elemenata
o Implementacija stilova i kaskadni poredak
Načini implementacije stilova
Kaskadni poredak
o Prikaz dokumenta na različitim medijima
o Prednosti upotrebe CSS-a u web dokumentima
o Budućnost CSS-a
4. JAVASCRIPT
o Povijest JavaScripta
JavaScript unutar browser-a
Netscape
Microsoft
Standardizacija
o Sintaksa i sematika JavaScripta
Ključne riječi i tipovi podataka
Varijable i literali
Operatori i izrazi
Komentari i programske naredbe
Kontrola toka programa, funkcije i objekti
Globalni objekt u JavaScriptu
Predefinirani objekti
Funcija eval()
Funkcije za enkodiranje i dekodiranje stringova
Konverzija tipova podataka
Testiranje sadržaja varijable
5. DINAMIKA I INTERAKTIVNOST WEB SADRŽAJA
o Povijest dinamičkog web sadržaja
o Primjena JavaScripta u web stranicama
JavaScript unutar <script> tagova
Vanjske datoteke koje sadrže JavaScript kod
JavaScript unutar HTML event handler-a
JavaScript kao specijalni URL
JavaScript u browser-ima u kojim je isključen ili nije podržan
o W3C Document Object Model (W3C DOM)
o Struktura W3C DOM dokumenta
Svojstva DOM elemenata
Standardna svojstva DOM elemenata
Atributi
Stilovi
Vizualna svojstva elementa
Referenciranje elemenata web stranice pomoću DOM-a
Programabilno mijenjanje sadržaja web dokumenta
o DOM eventi
Vrste DOM evenata
Korisnički eventi
Logički eventi
Eventi browser-a
Ostali eventi
Redosljed evenata nad ugiježđenim elementima
Načini implementacije evenata
DOM Level 0
DOM Level 2
6. AJAX
o Definicija i povijest
o MODEL AJAX WEB APLIKACIJA
o XMLHttpRequest objekt
Instanciranje XMLHttpRequest objekta
Metode
Svojstva
Parcijalno obnavljanje web stranice
o Arhitektura Ajax aplikacija
o Postojeća ograničenja i budućnost Ajaxa
7. ZAKLJUČAK
8. LITERATURA
1. UVOD
World Wide Web, ili jednostavno web, je kijentsko-serverski model razmjene informacija
izgrađen na infrastrukturi interneta, te na HTTP protokolu za prijenos podataka. Korisnici
web-a pristupaju informacijama putem web preglednika (browser-a) - klijentske aplikacije
namijenjene preuzimanju i prezentaciji web dokumenata sa servera, navigaciji među
dokumentima, te slanju povratnih, korisničkih informacija na server.
Ovim radom su prezentirane mainstream klijentske web tehnologije današnjice. One čine
temelj za implementaciju klasičnih web sadržaja, ali i modernih, interaktivnih rješenja koja
krajnjim korisnicima osiguravaju kvalitetno iskustvo u korištenju širokog spektra online
usluga upotrebom isključivo web browser-a:
Meta-jezici HTML i CSS čine osnovu klijenstkih web tehnologija. Njima se definira
strukturirani sadržaj web stranice (HTML), te način prezentacije unutar browser-a
(CSS).
Prve verzije HTML-a i CSS-a su ograničavale dokument prikazan u browser-u na
statički sadržaj. Zbog rastućih potreba vremenom je browser-ima dodana mogućnost
izvršavanja skriptnih jezika unutar web stranice, te izmjena a samim time i dinamika
nekih elemenata stranice nakon što je ista već učitana i prikazana u browser-u
(DHTML). Standardizacijom programskog sučelja prema svim elemenatima web
dokumenta, njihovim osobinama, te korisničkim akcijama nad svakim elementom
(Document Object Model ili skraćeno DOM), omogućeno je kreiranje dinamičkih i
interaktivnih web stranica neovisno o korištenom browser-u.
Obrađen je i JavaScript koje se nametnuo kao de facto jedini standardni skriptni jezik
unutar browser-a, i poveznica je svih klijentskih web tehnologija, pa i onih koje ovaj
rad ne obuhvaća.
Nakon uvođenja i standardiziranja XMLHttpRequest objekta unutar browser-a, web
stranice su dobile dodatnu, ali ključnu mogućnost: asinkronu komunikacije sa
serverom, i to nakon učitavanja i prikazivanja u browser-u. Time web sadržaj izlazi iz
dotadašnjeg primarnog okvira čistog prezentiranja informacija. Danas se govori o
serverski baziranim web aplikacijama (AJAX), za čije korištenje nije potrebno ništa
više od računala s internetskom vezom i instaliranim browser-om, a koje s aspekta
upotrebljivosti sve manje zaostaju za standardnim desktop aplikacijama.
Svaka od obrađenih tehnologija prezentirana je s povijesnog aspekta, definicijom sintakse i
semantike prema aktualnim standardima, demonstracijom upotrebe, te smjernicama daljnjeg
razvoja.
2. HYPERTEXT MARKUP LANGUAGE (HTML)
HTML nije programski jezik već jednostavan meta-jezik za stanrdardizirano strukturiranje
web dokumenata. Web dokument je, dakle, u potpunosti tekstualni dokument koji se može
kreirati u bilo kojem tekst editoru. Sastoji se od označnih elemenata - tagova, unutar kojih se
smiješta sadržaj. Tipom taga određuje se (označava) vrsta sadržaja taga, tj. da li je nositelj
informacije unutar elementa paragraf, zaglavlje, tablica itd.
Internet browser nakon učitavanja web dokumenta parsira dobiveni tekst, interpretira tagove i
njihov sadržaj prema specifikaciji HTML standarda, te ga na kraju prikazuje kao cjelinu, to
jest web stranicu.
Web dokumente karakterizira jedinstvena osobina koja ih fundamentalno razlikuje od ostalih
vrsta elektronskih dokumenata, a to je njihova lokacija na internetu, odnosno jedinsveni
identifikator te lokacije - URL (Uniform Resource Locator). Time web dokumenti donose
mnoge prednosti u odnosu na klasične elektronske dokumente. Neke od tih prednosti su:
mobilnost pristupa, obzirom da se web dokumentima može pristupati s bilo koje
lokacije i bilo kojeg uređaja
mogućnost da se unutar dokumenta definiraju poveznice prema drugim dokumentima
jednostavnim navođenjem njihovih URL-ova
razmjena i kolaboracija
mogućnost centraliziranog, serverski kontroliranog verzioniranja i arhiviranja
Povijest HTML-a
Prva ideja iz koje se razvio World Wide Web nastala je 1989. godine kao posljedica potrebe
za razmjenom informacija. U to vrijeme rad na mreži koristili su uglavnom znanstvenici koji
su za korištenje mrežnih usluga morali poznavati veliki broj Unix naredbi. Tim Berners-Lee u
CERN-u je predložio stvaranje hipertekstualnog sistema koji će omogućiti jednostavnu
razmjenu informacija među stručnjacima iz cijelog svijeta. [1]
Prikaz 1. Originalni prijedlog za WorldWidwWeb kojeg je izradio Tim Berners-Lee (u
samom početku imao je naziv 'Mesh') [2]
Berners-Lee je sa svojim timom kreirao HyperText Transfer Protocol (HTTP), protokol za
standardizaciju komunikacije između klijenta i servera. 1990. godine tim je počeo razvijati
projekt World Wide Web-a i specificirao označni jezik za kreiranje strukturiranih
dokumenata koji trebaju biti prikazani na internetu: "HyperText Markup Language" ili
skraćeno HTML. Tada je napisan i prvi tekstualni pretraživački program za web (web
browser) jednostavnog naziva 'WorldWideWeb'. Smatra se da je prvi grafički web browser
MOSAIC koji je nastao početkom 1993. godine, iako su mu prethodili neki manje poznati
browser-i npr. Erwise i ViolaWWW.
Prikaz 2. Mosaic browser koji se još uvijek može download-ati sa site-a NCSA
U listopadu 1994. Breners-Lee je osnovao međunarodni konzorcij World Wide Web
Consortium (W3C), čija je misija: "Da vodi World Wide Web do njegovog maksimalnog
potencijala razvijajući protokole i smjernice koje osiguravaju dugotrajni rast web-a". Cilj
W3C-a je držati specifikacije web formata i protokola međusobno kompatibilnim i omogućiti
bilo kojem hardware-u i software-u koji se koristi za pristup webu da rade zajedno. W3C
promovira interoperabilnost dizajnirajući i promovirajući otvorene, nevlasničke formate i
protokole kako bi se izbjegla tržišna i web fragmentacija. [3]
HTML dokument
HTML dokument je tekstualna datoteka, te ju je moguće kreirati bilo kojim tekst editorom.
Osim tekstualnog sadržaja dokumenta, u HTML datoteci koriste se specijalne sekvence
karaktera kojima se opisuje struktura i značenje pojedinih dijelova dokumenta. Tim označnim
sekvencama, koji se nazivaju tagovi, omeđuju se dijelovi sadržaja dokumenta čineći tako
HTML elemente.
Sintaksa HTML elemenata
Osnovna strukturna jedinica HTML dokumenta jest HTML element, koji se sintaksno opisuje
na sljedeći način:
počinje otvarajućim tagom (opening tag)
završava zatvarajućim tagom (closing tag)
sadržaj elementa je sve što se nalazi između otvarajućeg i zatvarajućeg taga
neki elementi imaju prazan sadržaj
prazni elementi (bez sadržaja) zatvoreni su u otvarajućem tagu
većina HTML elemenata može imati atribute koji dodatno opisuju specifičnosti
pojedinih tagova [4]
Prikaz 3.
Sastavni dijelovi HTML elementa prikazani na primjeru <a> taga (anchor)
Neki tagovi ne mogu imati sadržaj, to su tzv. "prazni elementi" i kao takvi oni nemaju
zatvarajući tag.
Prikaz 4. Sintaksa praznog
elementa je ista uz izostavljanje zatvarajućeg taga
HTML elementi mogu imati više različitih atributa; svaki atribut sastoji se od imena i
vrijednosti (ime="vrijednost"), a specificira se u otvarajućem tagu elementa. Atributi daju
browser-u dodatne informacije, specifične za pojedinu vrstu elementa.
Osim tagova za strukturiranje tekstualnih ili grafičkih informacija, pojedini tagovi služe
grupiranju drugih tagova, te tako tvore hijerarhijsku strukturu HTML dokumenta.
Primjer fragmenta HTML koda:
<div id="login">
<h4>Ispit iz Izgradnje web aplikacija</h4>
<form method=post action='index.php'>
<p>
<label for="email">e-mail:</label>
<input type="text" name="email" id="email"><br>
<label for="password">password:</label>
<input type="password" name="password" id="password"><br>
<input class="button" type="submit" value="Login" name="btnEnter"
id="btnEnter">
</p>
</form>
</div>
Iako HTML dopušta nedosljednosti pri ugnježđivanju tagova, pa čak i izostavljanje
zatvarajućih tagova, preporučljivo je držati se specifikacije pune sintakse.
Struktura HTML dokumenta
Osnovna struktura HTML dokumenta također je jednostavna: započinje tagom deklaracije
vrste dokumenta <!DOCTYPE>. Iza deklaracije slijedi <html> tag unutar kojeg je smješten
cijeli dokument, a završava sa zatvarajućom oznakom </html>. Dokument se sastoji od dva
dijela: <head> sekcije, koja sadrži opće, nevizualne informacije, iza koje slijedi <body>
sekcija s vizualnim komponentama dokumenta.
Elementi HTML stranice ne zahtijevaju razdvajanje nekim posebnim karakterom ili novim
retkom. Svaki tag ima definiranu oznaku za svoj početak i kraj, pa je sasvim moguće da se
datoteka koja definira sadržaj i izgled kompletne web stranice sastoji od jedne dugačke linije,
bez ijednog karaktera razmaka. Naravno, u praksi je dobro težiti što boljoj čitkosti koda, pa je
preporuka, naročito za dulje tagove, izvorni kod stranice vizualno formatirati prateći model
standardnog formatiranja blokova kod klasičnih proceduralnih programskih jezika.
<html>
<head>
<title>unizg</title>
</head>
<body>
<h3>foi</h3>
<img src="foi&unizg.png">
</body>
</html>
Unutar HTML dokumenta moguće je napisati komentare koji nemaju nikakav utjecaj na
izgled web stranice, ali mogu poslužiti za lakše snalaženje u kodu. HTML komentari, kao i
tagovi, imaju oznaku za početak (<!--) i kraj (-->), mogu sadržavati razmake i tabove, te se
mogu protezati kroz više redaka:
<html>
<body>
<!—Ovo je komentar
unutar HTML koda-->
</body>
</html>
Deklaracija vrste dokumenta
Svaki HTML dokument trebao bi započeti osnovnom deklaracijom koja definira vrstu
dokumenta, a prema kojoj browser određuje način njegovog prikazivanja. Za tu svrhu
predviđen je HTML tag <!DOCTYPE>. On se sastoji od dva parametra prikazana sljedećim
primjerom:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"-//W3C//DTD HTML 4.01 Transitional//EN" određuje naziv verzije HTML-a. U
navedenom primjeru, specificirana je Transitional HTML verzija 4.01 definirana od
strane W3C konzorcija
"http://www.w3.org/TR/html4/loose.dtd" jest URL, to jest lokacija na kojoj se nalazi
definicija tipa dokumenta (DTD, odnosno Document Type Definition) za
specificiranu verziju HTML dokumenta.
W3C-ov HTML 4.01 specificira 3 moguća DTD-a:
HTML 4.01 Strict DTD podržava sve one elemente i atribute koji nisu proglašeni
neodobrenima ('deprecated'). Korištenjem ovog DTD-a, razvoj web stranice se u
startu orjentira na striktno provođenje standarda koji ima intenciju potpuno odijeliti
prezentaciju od sadržaja, budući da se neodobreni tagovi uglavnom odnose na
prezentaciju elementa. Prezentacijski dio stranice se u tom slucaju definira unutar
CSS-a, o čemu će biti riječi u sljedećem poglavlju. Također, ovim DTD-om nije
dopuštena upotreba <frameset> taga.
HTML 4.01 Transitional DTD uključuje sve što i Strict DTD, s tim da je dopuštena
upotreba neodobrenih elemenata i atributa. Razlog postojanja ovog DTD-a jest u
činjenici da u vrijeme donošenja standarda koji je neke elemente progasio
neodobrenima, za neke primjene još uvijek nije bilo postignuto suglasje oko
alternativnog rješenja, ili nije postojala podrška u browser-ima.
HTML 4.01 Frameset DTD uključuje sve što i transitional DTD, uz dodatnu
mogućnost upotrebe <frameset> taga.
Ukoliko u HTML kodu izostavimo <!DOCTYPE> browser će prikazati stranicu u tzv.
"quirks" modu koji renderira stranicu prema svojoj vlastitoj, nestandardiziranoj definiciji.
Quirks mod je, dakle, default definicija browser-a za renderiranje stranice ukoliko DTD nije
naveden ili ga browser ne prepoznaje. U tom slučaju prikaz stranice u raličitim browser-ima
neće biti konzistentan, pa je iz tog razloga preporučljivo uvijek deklarirati vrstu dokumenta.
Dokument
Uz izuzetak <!DOCTYPE> taga, <html> tag predstavlja cjelokupni HTML dokument. Svi
ostali tagovi od kojih se dokument sastoji moraju biti navedeni unutar njega. Dokument ne bi
trebao sadržavati nikakav tekst izvan <html> taga, a ostali tagovi unutar njega hijerarhijski su
organizirani.
Dokument je sačinjen od dvije cjeline unutar <html> taga: zaglavlja dokumenta i tijela
dokumenta.
Zaglavlje dokumenta
Zaglavlje dokumenta definira se <head> tagom i njime započinje definicija dokumenta.
Unutar zaglavlja navode se sve nevizualne informacije o dokumentu. Obzirom da se nalazi
praktički na samom početku dokumenta i kao takvo se prvo interpretira, u njemu može biti
definirano više karakteristika o kojima će ovisiti interpretacija vizualnog dijela dokumenta:
naslov dokumenta <title>
meta-naredbe, za postavljanje korisničkih atributa i vrijednosti dokumenta <meta>
globalni linkovi, koji definiraju adrese resursa korištenih u dokumentu <link>
deklaracije stilova za pojedine elemente dokumenta <style>
default URL i defaut cilj (target) za sve linkove na stranici <base>
skript funkcije koje omogućuju dodatnu funkcionalnost dokumenta <script>
Tijelo dokumenta
Tijelo HTML dokumenta definira se <body> tagom, unutar kojeg se smještaju sve vizualne
komponente web stranice: paragrafi, bitmape, tablice, itd. Cijeli sadržaj web stranice koji
vidimo u browser-u nalazi se unutar ovog taga. U nastavku će biti opisani tagovi koji se
mogu pojaviti u strukturi tijela HTML dokumenta, a sljedeći primjer pokazuje globalnu
strukturu jednog takvog dokumenta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
</head>
<body>
...
...
<body>
</html>
Osim tagova koji čine vizualne komponente stranice, tijelo dokumenta može sadržavati i
skriptni kod na isti način kao i u zaglavlju, upotrebom <script> taga. Ukoliko browser ne
podržava izvršavanje skriptnog koda ili je ono onemogućeno s korisničke strane, browser će
ga jednostavno ignorirati i u zaglavlju i u tijelu stranice.
Za takve slučajeve može se definirati alternativni sadržaj pomoću <noscript> elementa.
<noscript> element može sadržavati sve elemente koji se inače koriste unutar tijela
dokumenta. Sadržaj <noscript> elementa biti će prikazan samo ako skriptiranje nije podržano
ili je onemogućeno u browser-u korisnika, u suprotnom (ako browser može prikazati skriptu)
<noscript> element neće biti interpretiran.
HTML tagovi tijela dokumenta i njihov opis
HTML tagovi se mogu podijeliti u dvije glavne skupine: tzv. 'blok-level' tagove i 'inline'
tagove. Blok tagovi impliciraju prijelom retka u kojem se nalaze, a osim svoga sadržaja mogu
imati unutar sebe ugniježđene druge blok ili inline tagove, dok inline tagovi mogu sadržavati
isključivo tekst ili druge inline tagove.
U HTML-u, blok tagovi su:
<address
>
<blockquote
> <div> <dd>
<dl
> <dt>
<fieldset
> <form>
<h1..h6
> <li>
<ol
>
<p> <pre> <table
>
<tbody
>
<td
>
<tfoot
> <th>
<thead
> <tr>
<ul
>
Svi ostali tagovi su inline.
Slijedi puna lista svih dozvoljenih tagova u HTML 4 Strict definiciji, grupirano prema
namjeni odnosno vrsti sadržaja koju reprezentiraju:
Tag Značenje
formatiranje teksta
<h1> do <h6> Naslovi u dokumentu
<p> Paragraf teksta
<br> Prijelom u sljedeću liniju teksta
<hr> Prijelom u sljedeću liniju teksta s horizontalnom crtom
tip teksta
<b> Podebljani tekst (bold)
<i> Ukošeni tekst (italic)
<big> Povećani tekst
<small> Smanjeni tekst
<sub> Smanjeni i spušteni tekst (indeks)
<sup> Smanjeni i povišeni tekst (eksponent)
<blockquote> Citirani blok teksta
<q> Kratki tekst u navodnicima
<abbr> Definira kraticu
<acronym> Definira akronim
<bdo> Mijenja predefinirani smjer teksta u browser-u s "dir" atributom
<cite> Definira citat
<code> Tekst kompjuterskog koda
<dfn> Termin za definiciju
<em> Istaknuti tekst
<strong> Naglašeni tekst
<samp> Primjer kompjuterskog koda
<var> Varijabla unutar teksta
<kbd> Tekst tipkovnice
<pre> Preformatirani tekst (preslikava tekst točno kako je napisan u kodu, zajedno s
uzastopnim razmacima i prijelomima retka; ima fiksnu širinu fonta)
<tt> Tekst teleprintera
<address> Informacije o autoru/vlasniku dokumenta
<del> Izbačeni tekst
<ins> Umetnuti tekst
bitmape
<img> Definira sliku
<map> Mapa klikabilnih područja na slici
<area> Pojedino klikabilno područje na slici
liste
<ul>, <ol>,
<dl> Liste (nenumerirana, numerirana i lista definicija)
<li> Pojedina stavka numerirane ili nenumerirane liste
<dt> Termin u listi definicija
<dd> Opis termina u listi definicija
tablice
<table> Tabela
<caption> Naslov tabele
<thead> Grupira sadržaj zaglavlja u tabeli
<tbody> Grupira sadržaj tijela tabele
<tfoot> Grupira sadržaj podnožja u tabeli
<tr> Redak tabele
<td> Ćelija tabele
<th> Ćelija naslova
<col> Definira vrijednosti atributa za jednu ili više kolona
<colgroup> Grupira kolone tabele
hyperlink
<a> Hyperlink na drugi dokument ili područje unutar istog
forme
<form> Forma za unose korisnika
<fieldset> Okvir za elemente forme
<legend> Naslov za uokvirene elemente forme
<label> Oznaka (natpis) za pojedinu kontrolu
<input> Područje za unos informacija od strane korisnika
<select> Padajući izbornik
<option> Pojedine opcije u padajućem izborniku
<optgroup> Grupiranje sličnih opcija u padajućem izborniku
<button> Gumb na koji se može staviti sadržaj (za opis značenja gumba)
<textarea> Područje za unos teksta u više linija
generički tagovi
<div> Divizija u dokumentu
<span> Sekcija u dokumentu
ugrađeni objekti (Java applet, ActiveX, PDF, Flash)
<object> Definira ugrađeni objekt
<param> Pojedini parametar ili varijabla ugrađenog objekta
Kako je ranije spomenuto, tagovi osim svog sadržaja mogu imati definirane atribute. Oni su
gotovo uvijek opcionalni (uz izuzetak nekoliko tagova kojima atribut definira ključnu
osobinu), a možemo ih podijeliti u tri skupine:
Atributi koji se mogu definirati nad svim tagovima: id, style i class. Atributom id
elementu se pridodjeljuje jedinstveni identifikator preko kojega se element referencira
iz liste stilova ili iz skriptnog jezika. Atributom style definira se stil pojedinog
elementa, a atributom class moguće je za više različitih elemenata pridodijeliti istu
grupu stilova.
Zastarjeli atributi od kojih su neki standardom još uvijek podržani, ali će u narednim
verzijama HTML-a biti izbačeni te ih zato treba izbjegavati. Mahom se radi o
atributima koji definiraju izgled elemenata, npr border za okvir, bgcolor za boju
pozadine, height za visinu, align za poravnavanje teksta itd. Intencija je da se sve
vizualne osobine elemenata definiraju u listi stilova o čemu će biti riječi u sljedećem
poglavlju.
Atributi specifični za pojedine tagove, na primjer href atributom u tagu <a> navodi se
URL web stranice na koju upućuje hyperlink. Ti atributi biti će obrađeni kod
konkretnog opisa primjene pojedinih tagova.
U nastavku će biti opisana glavnina tagova s primjerima konkretne primjene. Zbog
jednostavnosti, iz primjera će biti izostavljeni deklaracija i zaglavlje dokumenta, drugim
riječima u primjerima izvornog koda biti će prikazan samo sadržaj <body> taga.
Elementi formatiranja teksta
HTML-om se može definirati: 6 nivoa naslova, paragrafi, forsirati prijelom teksta u sljedeći
red, te prijelom s horizontalnom crtom. Upotreba je prikazana sljedećim primjerom:
Klikabilan primjer:
Tip teksta
Unutar HTML dokumenta, pojedini dijelovi teksta imaju sadržajno različit karakter.
Primjerice: akronimi, eksponenti ili citati se u sadržajnom smislu razlikuju od standardnog
teksta. U svrhu njihovog označavanja definirano je preko dvadeset tagova čija je upotreba
krajnje jednostavna, a primjena očigledna:
Klikabilan primjer:
Važno je napomenuti da iako pojedini tipovi teksta sugeriraju isključivo različit prikaz,
njihov primarni smisao jest u diferenciranju različitog sadržaja, a ne recimo različitog fonta.
Posljedica naravno jest i drugačiji izgled, ali kao i kod svih drugih tagova, finalne vizualne
osobine svih korištenih tipova teksta (boja, font, veličina itd) poželjno je definirati u listi
stilova.
Slike
Slike unutar HTML dokumenta specificiraju se URL adresama odgovarajućih bitmap-
datoteka koje su obično (ali ne i nužno) smještene na istom serveru s dokumentom. Slike
dakle nisu sadržane u dokumentu, nego se navode samo reference na datoteke sa slikama.
Tag za definiciju slike jest <img> tag, koji je samozatvarajući. Obavezni atributi su:
src, kojim se navodi URL datoteke slike
alt, s tekstom koji će se prikazati umjesto slike, u slučaju da datoteka nije dostupna
Opcionalno, mogu se definirati kllikabilna područja unutar slike koristeći atribut
usemap, te tagove <map> i <area>.
Klikabilan primjer:
Liste
HTML podržava tri vrste lista:
numerirane, koje se označavaju tagom <ol> (ordered list)
nenumerirane, označavaju se tagom <ul> (unordered list)
liste definicija, označavaju se tagom <dl> (ordered list) (definition list)
Za pojedine stavke numerirane i nenumerirane liste koristi se <li> tag. U listi definicija tagom
<dt> navodi se termin koji se definira, te tagom <dd> opis termina tj. definicija.
Upotrebljavaju se kako je navedeno sljedećim primjerom:
Klikabilan primjer:
Tablice
Prije zaživljavanja koncepta odvajanja sadržaja od prezentacije u web stranicama (dakle prije
pune afirmacije CSS-a), tablice su bile jedina mogućnost za iole specifičnije pozicioniranje
elemenata web stranice, pa su između ostalog korištene i za tu svrhu.
Već u prvim godinama evolucije web-a, pokazalo se da je struktura ugniježđenih tablica kao
alata za formatiranje dijelova stranice izuzetno neprikladna. Zbog činjenice da je kompletna
problematika pozicioniranja dijelova web stranice preseljena u CSS, upotreba tablica u tu
svrhu danas se smatra jednom od krupnijih grešaka pri dizajniranju stranice.
To ne znači da su tablice izgubile svoju namjenu, upotreba tablica je i dalje u potpunosti
opravdana za njihovu prirodnu namjenu: reprezentiranje tablične strukture sadržaja.
Sljedećim primjerom prikazana je kompleksnija tablica koja se sastoji od naslova, zaglavlja,
dva tijela i footera, te nekoliko dekorativnih elemenata: okvira, centriranja i boja pozadine.
Klikabilan primjer:
U navedenom primjeru korištene su sve vrste tagova koji mogu činiti tablicu, dok su za njenu
minimalnu definiciju dovoljni su samo tagovi <table> za definiciju tablice, te<tr> za redak
tablice i <td> za pojedinačnu ćeliju. Većina elemenata koji čine tablicu podržavaju nekoliko
atributa prezentacijske prirode (allign, valign, width, bgcolor itd), ali i te je osobine
preporučljivo kontrolirati iz CSS-a.
Hyperlink
Hyperlinkovi čine poveznice između html dokumenata. Klikom na hyperlink browser se
preusmjerava na drugi sadržaj, najčešće drugu HTML stranicu ili na unaprijed definirani
fragment HTML stranice. Hyperlinkovi se definiraju <a> tagom, pri čemu je atributom href
potrebno specificirati URL ciljanog dokumenta. Na URL ciljanog dokumenta može se dodati
sufiks koji počinje karakterom '#', te identifikatorom elementa na koji će novoučitana stranica
biti pozicionirana. Ukoliko ciljani URL započinje karakterom '#' radi se o pozicioniranju
unutar aktualne stranice. URL ciljanog dokumenta podržava i druge protokole osim HTTP
protokola, npr:
"mailto:[email protected]", otvara defaultni email klijent na korisnikovom
računalu s popunjenom email adresom primatelja
"javascript: <skriptni kod>", izvršava navedeni skriptni kod
"ftp://ftp.foi.hr/nastava/el_poslovanje/", preuzimanje datoteka preko ftp servera
Opcionalno, atributom target može se specificirati mjesto otvaranja ciljanog dokumenta.
Sljedećim primjerom obuhvaćeno je nekoliko primjena <a> taga:
Klikabilan primjer:
Forme
HTML forma je skup kontrola koje zajedno čine sadržajnu cjelinu. Kontrola je HTML
element čija je svrha unos podataka od strane korisnika. Tagovi kojima se definira sadržaj
forme su:
<input>, <select>, <textarea>, <button>; tag <input> podržava 10 tipova koji se
specificiraju atributom type (checkbox, text, radio, itd.)
<fieldset> i <legend> za vizualno odvajanje i naslov podgrupe u formi
<label> za opis pojedinih kontrola
Funkcija forme je da se na korisnički zahtjev (najčešće klikom na konkretni button) izvrši
slanje zahtjeva serveru s parametrima koje je korisnik unio u formi, a na temelju kojih server
generira odgovor te ga šalje natrag korisniku u obliku nove web stranice.
U sljedećem primjeru pritiskom na gumb (input element) "input type=submit", generira se
zahtjev prema serveru za novom web stranicom čiji je URL specifciran atributom acition.
Sam zahtjev dodatno sadrži identifikatore svih kontola koje čine formu, zajedno s
pripadajućim vrijednostima koje je korisnik unio.
Serverski kod po zaprimanju zahtjeva, a na osnovi sadržaja podataka koje je unio korisnik i
ostalih parametara koji se nalaze na serveru (baza podataka, vanjski web servisi, itd.),
isporučuje korisniku rezultirajući HTML dokument.
Klikabilan primjer:
Generički tagovi
Tagovi <div> i <span> služe za organiziranje dijelova dokumenta u grupe, odnosno
svojevrsne sekcije. U samom HTML-u oni nemaju neko posebno značenje odnosno
standardom definiran prikaz, ali dolaze do pravog izražaja u kombinaciji s primjenom stilova.
<div> tag jest blok-tag. Drugim riječima, njime se obuhaća veća sekcija tagova koji zajedno
čine logičku cjelinu u HTML stranici. Za razliku od njega, <span> tag je tzv. 'inline' tag,
najčešće korišten za manje i specifične dijelove sadržaja; obično se definiranjem stilova za
<span> tag kontrolira prikaz pojedinih dijelova teksta. <span> tag je svojevrsna zamjena za
tagove <i>, <b>, <strong>, <abbr>, <ins>, <del> i ostale prezentacijske tagove, uz dodatnu
puno veću fleksibilnost koju pružaju stilovi: boje pozadine i teksta, bitmap podloge, margine,
okviri, orjentacija, fontovi, itd.
Ugrađeni objekti
HTML podržava elemente kojima se rezervira prostor na web stranici za takozvane ugrađene
objekte (embedded objects). Ugrađeni objekti prezentiraju sadržaj koji izlazi van okvira
mogućnosti HTML-a, obično su vrlo kompleksnog sadržaja, te je za njihovo prikazivanje
potreban specijalni dodatak browser-u (plugin). Primjeri takvih objekata su Flash, PDF, Java
applet, ActiveX itd. Specificira se tagom <object>, te opcionalno ugniježđenim tagovima
<param> pomoću kojih se ugrađeni objekt može parametrizirati.
Klikabilan primjer:
Ostali tagovi
Prethodno navedeni tagovi su standardni HTML tagovi, a osim njih postoji još i skupina
tagova koji se uglavnom odnose na prezentaciju podataka. Iako su još uvijek podržani u
browser-ima zbog kompatibilnosti unatrag, dio ih je proglašen zastarjelima već u HTML
verziji 4.01. HTML 5 i XHTML neke od njih zabranjuju, a sigurno je da će svi biti izbačeni
iz narednih verzija standarda. Zbog toga ih nije preporučljivo koristiti.
Slijedi lista opisanih tagova:
Tag Značenje
okviri
<frameset> Definira grupu okvira u prozoru browser-a
<frame> Definira pojedinačni okvir u prozoru
<iframe> U dokument umetnuti okvir koji sadrži drugi dokument (dozvoljava ga
Transitional DTD)
<noframes> Alternativni sadržaj za korisnike čiji browser ne podržava frame-ove
zastarjeli tagovi
<isindex> Indeks pretraživanja, povezan s dokumentom (ulazna kontrola)
<basefont> Određuje default: font, boju i veličinu teksta
<applet> Ugrađeni applet
<center> Poravnava tekst u sredinu
<dir> Lista direktorija
<strike> Precrtani tekst
<font> Definira: font, boju i veličinu teksta
<menu> Meni lista
<s> Precrtani tekst
<u> Podcrtani tekst
Extensible HyperText Markup Language (XHTML)
Paralelno s razvojem HTML-a, krajem 1998. godine, W3C konzorcij objavljuje XHTML,
reformulaciju HTML-a u XML. Motivacija za reformulaciju u XML bila je rješavanje niza
problema koji postoje unutar HTML-a:
nepotpuna konzistentnost interpretacije među različitim browser-ima
vrlo ograničena mogućnost modularizacije HTML koda (u smislu ponovne upotrebe
pojedinih dijelova koda)
upitna proširivost na različite uređaje bez narušavanja kompatibilnosti unatrag
interoperabilnost s drugim XML-baziranim markup-jezicima (npr. SVG ili MathML)
Osim toga, reformulacijom u XML, dokumenti su dobili mogućnost obrade standardnim
XML alatima, puno jednostavnije pretraživanje i indeksiranje, te vrlo poželjnu mogućnost da
proxy-serveri relativno jednostavnim algoritmima dinamički prilagođavaju sadržaj
dokumenta ciljnom uređaju koji ne mora nužno biti stadardni web browser (mali mobilni
uređaji, TV, browser-i za slijepe itd.).
Za razliku od HTML-a, gdje ponašanje pojedinih tagova može biti prepušteno browser-u, u
XHTML-u ponašanje tagova striktno je definirano DTD-om. Time je postignuta modularnost
i jednostavna nadogradivost, uz puno efikasnije osiguravanje konzistentnosti standarda.
Mogućnosti XHTML-a mogu biti proširene prema potrebama budućih browser-a ili drugih
uređaja koji podržavaju web, bez žrtvovanja 'kompatibilnosti unatrag'. XHTML koristi
Document Type Definition (DTD) koji je kolekcija deklaracija XML-a i kao takav definira
kako browser treba tretirati strukturu, elemente i atribute tagova koji se nalaze u dokumentu.
Tagovi koje koristi XHTML su isti tagovi koje koristi i HTML.
Generalno, može se reći da je XHTML striktnija i čišća verzija HTML-a, a dokumenti manje
zavisni o ciljnom uređaju odnosno browser-u.
Intencija W3C-a je bila da, kroz naglašenu preporuku za korištenjem novog markup-a,
cjelokupna web zajednica ubrzano migrira na XHTML. No unatoč preporukama konzorcija,
web zajednica nije u širim okvirima prihvatila novi markup jezik. Pokazalo se da migracija
jednostavno zahtijeva previše resursa uz vrlo upitnu isplativost čak i u srednjoročnom smislu,
naročito ako većina posjetitelja pristupa web sadržaju klasičnim browser-ima.
Osim velikog broja gotovih produkata koji nakon migracije više ne bi radili u starijim
verzijama browser-a, za neke praktične probleme koji su već bili riješeni evoluiranjem
HTML-a, u XHTML-u ne postoji zamjensko rješenje. Također, za određene primjene
(dodavanje sadržaja od strane krajnjeg korisnika), neformalnost HTML-a, često kritizirana
kao mana, u praksi se pokazala kao prednost. Osim toga, neki proizvođači browser-a nisu
ulagali bitne napore za usklađivanjem novijih verzija browser-a s XHTML-om; Microsoft
Internet Explorer do verzije 7, primjerice, uopće nije podržavao XHTML, a u kasnijim
verzijama samo djelomično. Unatoč činjenici da XHTML nije uspio zamijeniti HTML u
klasičnim web sadržajima, njegova primjena je nezaobilazna u sadržajima koji zahtijevaju
neovisnost o ciljnom uređaju/browser-u (mail mobilni uređaji, TV, uređaji za slijepe itd), ili
integraciju s drugim XML baziranim markup jezicima kao što su MathML ili SVG.
Neke od kodnih razlika XHTML-a u odnosu na HTML
1. U XHTML-u tagovi i atributi moraju se pisati malim slovima. XML je 'case-sensitive'
tj. razlikuje velika i mala slova pa su npr. tagovi <table> i <TABLE> različiti tagovi.
2. Tagovi se ne smiju preklapati. Ako tagovi u HTML-u nisu propisno ugniježđeni nego
se preklapaju, npr. <p> preklopljeni <b> tag </p></b> većina browser-a će renderirati
i prikazati stranicu, što nije slučaj s XHTML-om koji će za ovaj primjer javiti grešku.
Kod prikaza XHTML-a browser striktno slijedi pravila definicije koja zahtijevaju
sljedeću formulaciju ugniježđivanja: <p> preklopljeni <b> tag </b></p>.
3. Uvijek se koristi zatvarajući tag. HTML dozvoljava nekim tagovima da ostanu
nezatvoreni npr. u HTML-u je ispravno napisati <div><p> nezatvoreni paragraf
</div> dok XHTML ovo ne dozvoljava (mora biti: <div><p> nezatvoreni paragraf
</p></div>).
4. Prazni tagovi (bez sadržaja) moraju biti zatvoreni na odgovarajući način. Ovi tagovi
prema XHTML formulaciji zatvaraju se razmakom i 'slash' karakterom prije šiljaste
zagrade: '<br />' (iako se može koristiti uobičajeni par otvarajućeg i zatvarajućeg taga
'<br></br>').
5. Vrijednosti atributa moraju biti u navodnicima. Ovo pravilo vrijedi i za numeričke
vrijednosti atributa. Dakle mora se pisati: <td rowspan="3">.
6. Vrijednost atributa ne smije imati skraćeni oblik. HTML dozvoljava sljedeću formu:
<input type="checkbox" checked/> dok kod XHTML-a vrijednost atributa mora imati
puni oblik: <input type="checkbox" checked="checked"/>.
7. Enkodiranje specijalnih karaktera. XHTML tretira neke ključne karaktere npr. šiljastu
zagradu '<' i ampersand '&' kao početak označavanja (markup-a) pa je potrebno
koristiti enkodirane oznake kada se oni koriste drugdje npr. ampersand u
vrijednostima atributa mora biti enkodiran: <img src="foi&unizg.png"/> potrebno je
pisati <img src="foi&unizg.png"/>. [5]
HTML5
Aktualna verzija HTML-a 4.01 bez izmjena je opstala punih 10 godina, a u tom periodu
kvalitativni razvoj web sadržaja oslanjao se na dvije raspoložive mogućnosti:
maksimalno korištenje komplementarnih tehnologija za implementaciju rješenja koja
unutar samog HTML 4.01 nije moguće izvesti: CSS, JavaScript, DOM, itd.
upotreba vlasničkih dodataka browser-ima za bogate web sadržaje: Flash, Java,
Silverlight, Google Gears itd.
Sredinom 2004. godine formirana je grupacija Web Hypertext Application Technology
Working Group (WHATWG), kao svojevrstan odgovor na relativno spor razvoj standarda od
strane W3C konzorcija. Okosnicu grupacije čine utjecajne osobe iz kompanija Apple,
Mozilla Foundation i Opera Software, uz značajnu potporu šire web zajednice, te naknadno
zajedničku suradnju s W3C-om. Nakon nekoliko godina definiranja standarda uz
konzultiranje svih zainteresiranih strana, u travnju 2010., dakle u vrijeme nastajanja ovog
rada, prijedlog specifikacije standarda HTML5 nalazi se pred konačnom objavom.
HTML5 će donijeti značajan napredak s aspekta strukture web dokumenata, definirajući nove
specijalizirane tagove kojima se dokument može organizirati jasnije i jednostavnije u odnosu
na postojeći potpuno generički <div> tag:
Prikaz 5. Specijalizirani
HTML5 tagovi za organizaciju dokumenta [6]
Također, neki često korišteni elementi modernih web dokumenta koji su morali biti
implementirani pomoću JavaScripta, biti će podržani specijaliziranim tagovima uz potpunu
kotrolu izlgleda kroz listu stilova. Radi se o poljima za različite korisničke unose s
automatskom validacijom (numeričke/email/datumske/vremenske), te često korištenim
kontrolama kao što su progressbar, interaktivni grid, meni, itd.
Stardadiziran je i <canvas> tag, do sada donekle podržan od nekih browser-a, kojim se
specificira dvodimenzionalno područje za crtanje upotrebom skriptnog jezika (grafikoni,
prezentacije itd).
Tagovi koji su u već u HTML verziji 4.01 bili proglašeni zastarjelima, sada su potpuno
izbačeni, primjerice: <applet>, <font>, <frame>, <s>, <strike>, <u> itd.
Možda najznačajniji iskorak napravljen je u standardizaciji podrške za bogate web sadržaje
koji su do sada bili rezervirani isključivo za različite vlasničke dodatke browser-u (plugins):
<audio> i <video> tagovi za multimedijalne sadržaje
podrška za geolokaciju korisnika
offline storage
offline application caching
Obzirom da će HTML5 kompatibilni browser-i imati nativnu podršku za bogate web
sadržaje, u najvećem broju primjena biti će eliminirana potreba za vlasničkim dodacima
(Flash, Silverlight, Java, GoogleGears, itd), a samim tim i različitim formatima i zaštićenim
protokolima koji su suprotni najznačajnijim načelima weba: otvorenost, interoperabilnost i
neovisnost o browser-u.
3. CASCADING STYLE SHEETS (CSS)
CSS je meta-jezik kojim se definira prezentacija dokumenata kreiranih bilo kojim markup
jezikom, pa time i HTML/XHTML dokumenata. Dodjeljivanjem stilova (fontova, boja,
pozadina, margina, pozicija...) pojedinim elementima ili grupama elemenata definira se
grafička prezentacija web dokumenta. Korištenjem CSS-a nad strukturiranim web
dokumentima moguće je utjecati na prezentaciju dokumenata bez potrebe za dodavanjem
novih HTML tagova, te bez žrtvovanja neovisnosti uređaja. Dosljednom upotrebom CSS-a,
postiže se potpuna separacija prezentacije web dokumenta od njegovog sadržaja.
Kada posjetitelj učita web stranicu, browser šalje dodatne upite na server za sve povezane i
ugrađene objekte (kao što su slike, video, itd.) među kojima su i datoteke sa CSS kodom.
Browser posjetitelja će interpretirati taj kod koristeći svoj vlastiti mehanizam za iscrtavanje
slike tzv. 'rendering engine', da primijeni CSS na HTML i prikaže stranicu u browser-u.
W3C je otišao dosta duboko u specifikaciji načina na koji bi browser-i trebali renderirati
CSS-om stilizirani HTML kod, ali kod većine browser-a još uvijek postoje greške i
nedosljednosti u implementaciji. Rezultat toga je da ne postoje dva browser-a koja će
potpuno jednako renderirati web stranicu. U većini slučajeva ove razlike korisnici neće ni
primijetiti ali u nekim slučajevima su te razlike jako uočljive i zahtijevaju dodatnu pozornost
pri razvoju kako bi stranica izgledala konzistentno u širokom spektru browser-a.
Kao primjer može se navesti prikaz objekta sa sljedećim svojstvima:
#objekt1 {
border: 5px solid #000;
padding: 10px;
width: 100px;
}
Većina browser-a će ovom objektu dati širinu prostora za sadržaj 100px na što će još dodati
debljinu okvira i debljinu padding-a, pa će cijeli objekt (njegovi vanjski rubovi) biti širok
130px. Internet Explorer 5.5 i ranije verzije dati će ukupnu širinu objekta 100px, što znači da
će prostor za sadržaj biti 70px. Srećom, u svim novijim verzijama browser-a takve banalne
nedosljednosti su ispravljene, no i dalje su prisutne neke sitne nedosljednosti. Na primjer, stil
width primijenjen nad inline-tagovima većina browser-a ignorira (kako je i predviđeno
standardnom), no čak i novije verzije Internet Explorera nepravilno interpretiraju taj stil kao
da se radi o blok-tagovima, to jest dodjeljuju inline elemnetu specificiranu fiksnu širinu.
Prvu draft CSS specifikaciju izdanu od World Wide Web Consortium-a koncipirali su Håkon
Wium Lie i Bert Bos 1996. godine. Dvije godine kasnije objavljena je verzija broj 2, a tek
8.9.2009. CSS-2.1., ali paralelno s razvojem CSS-2 radi se i na razvoju CSS-3 standarda.
Sintaksa
Sintaksa CSS-a sastoji se od samo dva elementa: selektora i deklaracijskog bloka. Selektor
označava HTML element ili skupinu elemenata nad kojima će biti primijenjen deklaracijski
blok, a deklaracijski blok se sastoji od grupe svojstava i njihovih vrijednosti.
Prikaz 6. Osnovna sintaksa CSS-a
Vrste selektora
Selektor može biti HTML tag što znači da će taj tag biti redefiniran u CSS-u i gdje god se
pojavljuje u dokumentu biti će prikazan kao što je definirano CSS-om. Npr. sljedećim kodom
će svaki <h1> tag imati svojstva definirana unutar vitičastih zagrada:
h1 {
font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times,
serif;
color: red; }
Korištenje klase kao selektora omogućava postavljanje neovisnog stila koji se može
primijeniti na bilo koji HTML tag. Klasa, za razliku od HTML selektora koji automatski cilja
specifični tag, daje jedinstveno ime koje se onda specificira u atributu bilo kojeg HTML taga
(ili tagova) na koji se želi primijeniti definirani stil. U sljedećem primjeru definirana je klasa
.nazivPoglavlja:
.nazivPoglavlja {
display: block;
margin-bottom: 8px;
font-size: smaller;
color:black; }
Klasa .nazivPoglavlja će redefinirati svaki tag HTML koda koji u svom atributu ima
specificirano njezino ime. Primjena ove klase može se vidjeti na primjerice <span> tagu:
<span class="nazivPoglavlja">
Sadržaj taga definiranog klasom "nazivPoglavlja"
</span>
ID selektor je jedinstveni identifikator koji se koristi za kreiranje stila neovisno o tagu.
Pomoću njega se uspostavlja struktura stranice. Kada HTML elementu dodijelimo ID kreirali
smo objekt, na taj način browser pristupa svojstvima tog elementa. Npr. ako div tagu
dodijelimo ID vrijednosti "sadrzaj":
<div id="sadrzaj">
identificirali smo taj div kao jedinstveni element na zaslonu kojim se kasnije može
manipulirati kroz CSS na sljedeći način:
#sadrzaj {
position: absolute;
top: 190px;
width: 480px; }
Naravno, "id" vrijednost ne može se ponoviti nigdje u cijelom dokumentu i tu je
konceptualna razlika u odnosu na ostale vrste selektora.
Atribut taga također može biti korišten kao selektor. Kod ovog selektora stil se može
primijeniti na različite načine:
na sve tagove koji imaju specificirani atribut bez obzira na njegovu vrijednost, npr.:
[onclick] {...} biti će primijenjen na sve tagove koji imaju onclick atribut,
na sve tagove koji imaju specificirani atribut i egzaktnu vrijednost tog atributa, npr.:
[href=index.html] {...} biti će primijenjen na sve tagove koji imaju navedeni atribut i
vrijednost
na tagove koji sadrže specificiranu vrijednost kao dio vrijednosti atributa odvojenu
razmacima od ostatka vrijednosti, npr.: [title~=Irena] {...} primijeniti će se na sve
tagove koji u vrijednosti atributa 'title' imaju riječ ' Irena' kao dio vrijednosti odvojen
razmacima od ostatka, npr.: title="Hello from Irena".
na tagove koji sadrže specificiranu vrijednost kao početak vrijednosti atributa odvojen
crticom od ostatka vrijednosti, npr.: [lang|=hr] {...} biti će primijenjen na sve tagove
kojima vrijednost atributa 'lang' počinje sa 'hr-' ili je cijela vrijednost samo 'hr', npr.:
lang="hr-bednja". ili lang="hr".
CSS podržava svojevrsnu hijerarhiju stilova pa je dozvoljeno kombinirati različite selektore u
koje se onda može uključiti i tzv. univerzalni selektor asterisk '*', npr. '#sadrzaj * i' biti će
primijenjen na <i> tag koji je ugniježđen u bilo koji tag kojem je roditelj tag s atributom
'id=sadrzaj'.
Vrijednosti svojstava
Vrijednosti svojstva pojedinih stilova mogu se ugrubo podijeliti u tri skupine: dimenzije, boje
i konstante specifične za pojedina CSS svojstava.
Osim eksplicitno navedenih vrijednosti, moguća vrijednost za većinu svojstava je inherit, što
označava da je vrijednost konkretnog svojstva naslijeđena od roditeljskog taga.
Dimenzije
Svojstva dimenzije deklariraju se u jednoj od dopuštenih mjernih jedinica, navodeći
numeričku vrijednost koju slijedi oznaka mjerne jedinice. Primjeri:
width: 33%; /* širina elementa biti će 1/3 predefinirane širine */
height: 250px; /* visina elementa biti će točno 250 piksela */
U sljedećoj tablici navedene su sve dopuštene mjerne jedinice:
Boje
Boje pojedinih svojstava svakog elementa mogu biti navedene na četiri načina:
Korištenjem decimalnih ili heksadecimalnih vrijednosti, moguće je definirati bilo koju od
2^24 (otprilike 16 miliona) nijansi.
CSS-om su definirani nazivi za osnovni skup od samo 16 boja: black, gray, silver, white, red,
maroon, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal i aqua.
Osim njih, od većine browser-a podržani su nazivi za skup od 216 tzv. web-sigurnih boja
(npr. DarkOliveGreen vrijednosti #556B2F), za ekrane s ograničenim mogućnostima prikaza
svih raspoloživih 16 miliona nijansi. Obzirom da u današnje vrijeme ekrani mogu prikazati
ukupni set od 16 miliona boja, ograničavanje dizajna na web-sigurne boje nije potrebno, osim
u slučaju da se cilja na skupinu korisnika koji web-u pristupaju sa specifičnih uređaja (npr.
malih prijenosnih uređaja, mobitela i sl.).
Konstante specifične za pojedina CSS svojstva
Pojedina svojstva mogu imati isključivo jednu od, za njih specifičnih, konstanti koje su
definirane ekvivalentima raspoloživih vrijednosti u engleskom jeziku. Tako primjerice:
svojstvo poravnavanja teksa text-align može imati jednu od dopuštenih vrijednosti:
left, right, center ili justify
svojstvo vidljivosti elementa visibility može imati jednu od dopuštenih vrijednosti:
visible, hidden ili collapse
itd.
Stiliziranje elemenata
CSS-om je moguće utjecati na izgled svakog pojedinačnog HTML elementa definiranjem
vrijednosti za jedno ili više vizualnih svojstava.
Podržano je postavljanje više srodnih svojstava u jednoj deklaraciji. Primjerice, grupu
svojstava koja definiraju margine:
{
margin-top: 30px;
margin-right: 15px;
margin-bottom: 6px;
margin-left: 100px;
}
, moguće je deklarirati skraćenim oblikom na sljedeći način:
{ margin: 30px 15px 6px 100px; }
pri čemu se potrebno držati propisanog redosljeda. U nastavku će srodna svojstva biti
tablično pobrojana upravo tim redosljedom.
Skraćeni oblik deklaracije srodnih svojstava dopušta izostavljanje pojedine vrijednosti pri
čemu treba biti oprezan jer generalno pravilo da se za izostavljenu vrijednost primjenjuje
inicijalna, nije isključivo. Tako će kod definiranja margine izostavljanje jedne vrijednosti
rezultirati da srednja vrijednost bude dodijeljena lijevoj i desnoj margini (prva je 'top', a
zadnja 'bottom').
Box-model elementa: dimenzija, razmak, rub, margina
Svi HTML elementi u osnovi su pravokutni. Predefinirane dimenzije elementa određene su
njegovim sadržajem; drugim riječima, veličina elementa prilagoditi će se prema njegovom
trenutnom sadržaju i dimenzijama elementa-roditelja (ukoliko su one eksplicitno ili
implicitno navedene; u suprotnom će se i dimenzija elementa-roditelja prilagoditi).
Dimenzije elementa mogu se CSS-om zadati i eksplicitno, postavljanjem sljedećih svojstava:
Izostavljanjem bilo kojeg od svojstava, element će zadržati predefiniranu dimenziju za to
svojstvo. Drugim riječima, ako se navede širina ali ne i visina elementa, njegova visina će se
prilagoditi sadržaju.
Osim samog sadržaja, dimenzije elementa su dodatno karakterizirane:
unutrašnjim razmakom sadržaja od ruba (padding); pozadina tog razmaka jednaka je
pozadini sadržaja elementa
linijom ruba (border); pozadina ruba jednaka je pozadini elementa, no rubu se osim
širine može zadati i stil linije (puna, isprekidana, itd.) i boja linije
marginom, tj razmakom između linije ruba i drugih elemenata (margin); pozadina
margine je uvijek potpuno transparentna
Zbog svega navedenog, model HTML elementa naziva se box-model:
Prikaz 7.
HTML box-model elementa [7]
Dimenzije unutarnjeg razmaka i margine podešavaju se svojstvima padding i margin, a mogu
biti definirane za svaku stranicu pravokutnika pojedinačno, svojstvima iz sljedeće tablice:
Podržan je i skraćeni oblik definiranja pojedinačnih dimenzija na način da se iza svojstva
navedu sve četiri dimenzije odvojene razmacima, pri čemu je redosljed vrijednosti sljedeći:
"gore desno dolje lijevo". U slučaju navođenja samo dvije dimenzije, prva dimenzija će se
odnositi na gornji i donji rub, a druga na lijevi i desni.
Nekoliko primjera:
pading: 2cm 3pt;
margin: 15px;
padding-left: 10em;
margin-top: 30mm;
margin-left: 6pt;
padding: 10px 12px 20px 15px;
Rub (border)
Liniju ruba obilježavaju svojstva boje, stila i debljine:
Svojstva linije ruba mogu se definirati za svaki od četiri ruba pojedinačno; prema tome
postoje podvarijante za svaki rub: border-bottom-width, border-bottom-style, border-bottom-
color, border-left-width itd.
Za isticanje ruba, moguće je dodijeliti svojstva "outline-" kojima se definira dodatna linija
oko linije ruba. Svojstva su analogna svojstvima linije ruba: outline-width, outline-style i
outline-color, ali bez mogućnosti definiranja svakog ruba pojedinačno.
Oba svojstva, i border- i outline- podržavaju skraćeni oblik.
Opći vizualni stilovi elemenata
Pozadina
Pozadina elementa može biti određena bojom i/ili bitmapom. Nenavođenje stila
podrazumijeva transparentnu pozadinu. Ukoliko je za pozadinu navedena bitmapa, ona može
biti prikazana samo jednom, ili se ponavljati po x i/ili y osi do pune veličine elementa,
zavisno od ostalih svojstava vezanih uz pozadinu. Također, početnu poziciju bitmape moguće
je podesiti kombinacijom uobičajenog poravnavanja: left, center, right i top, center, bottom,
kao i na apsolutnu ili relativnu poziciju unutar elementa.
Font
Pojedinom elementu moguće je dodijeliti proizvoljni font, no obzirom da nisu svi fontovi
podržani na svim računalima, CSS definira mogućnost specificiranja više fontova odvojenih
zarezima. Za prikaz će se koristiti prvi u nizu koji korisnikov browser ima na raspolaganju.
Tako će kod definiranja stila za element:
font-family:"verdana","kalimati",sans-serif;
browser koristiti prvi navedeni font ukoliko on postoji na korisničkom računalu. U
suprotnom, koristi se sljedeći font itd. Zbog toga je preporučljivo koristiti fontove za koje se
može pretpostaviti da ih većina korisnika ima instalirano, a za zadnji font obavezno navesti
jedan od 5 generičkih fontova za koje standard garantirana podržanost u svim browser-ima:
serif, sans-serif, monospace, cursive i fantasy. Za generičke fontove se ne koriste navodnici.
Osobine teksta
Osim vrste fonta, tekstu pojedinog elementa mogu se mijenjati sljedeća svojstva:
Klikabilan primjer:
Specifični stilovi pojedinih elemenata
Hyperlink
Osim što hyperlinkovi mogu biti stilizirani sa svim CSS svojstvima kao i ostali inline
elementi, za njih je moguće definirati četiri različita stila prema četiri moguća stanja
hyperlinka tzv. pseudoklase:
a:link - standardni hyperlink, kojeg korisnik još nije aktivirao
a:visited - hyperlink kojeg je korisnik već aktivirao (posjetio)
a:hover - miš je pozicionairan iznad hyperlinka (u deklaraciji se mora nalaziti iza :link
i :visited)
a:active - hyperlink je kliknut (u deklaraciji se mora nalazitai iza :hover)
Primjenom različitih stilova, hyperlink će mijenjati svoj izgled zavisno od aktivnosti
korisnika. Pseudoklase :active i :hover se mogu primijeniti i na neke druge elemente pa će
biti spomenute i kasnije, ovdje su navedene izdvojeno jer im je daleko najčešća upotreba
upravo s hyperlink elementima.
Lista
Svojstva liste mogu se primijeniti na cijelu listu (tagovi ul, ol) ili samo na pojedine stavke
liste (tag li).
Tablica
CSS podržava nekoliko svojstava specifičnih za tablice, kojima se podešava izgled linija
rubova, pozicija naslova i ponašanje praznih ćelija tablice. Osim toga, može se specificirati
automatski ili fiksni algoritam renderiranja tablice.
Pseudoklase i pseudoelementi
Pseudoklase se koriste za dodavanje specijalnih efekata nekim selektorima, a pseudoelementi
za stiliziranje dijela sadržaja elementa. Mogu biti kombinirani sa CSS klasama.
Pozicioniranje elemenata
Predefinirano pozicioniranje u HTML-u
Predefinirani raspored HTML elemenata na web stranici slijedi ranije spomenuti box-model,
pa se web stranica faktički sastoji od hijerarhijski organiziranih, odnosno ugniježđenih
pravokutnika tagova-roditelja i tagova-djece.
Tag <body> je korjenski (root) tag kojem je predefinirana širina trenutna širina browser-a, a
visina ovisi o sadržaju tagova-djece. Veličine pravokutnih područja u koje su smješteni
HTML elementi, i njihov raspored podložni su jednostavnim pravilima međuovisnosti
tagova-roditelja i tagova-djece, vrstom samih tagova (blok ili inline), te sadržajem tagova:
Blok-elementi zauzimaju punu širinu taga-roditelja, osim ako CSS-om nije eksplictno
zadano drugačije; visina blok-elementa prilagođava se sadržaju. Bez obzira na
eksplicitno zadanu širinu i/ili visinu, blok-elementi uvijek impliciraju prijelaz u
sljedeći red, i to ispred i iza pravokutnika kojeg zauzimaju. Blok elementi mogu
sadržavati druge inline- i blok-elemente.
Inline-elementi prilagođavaju svoje dimenzije sadržaju elementa, te im se one ne
mogu eksplicitno zadati. Oni mogu sadržavati isključivo inline-elemente, a ne i blok-
elemente.
Iniline-elementi se slažu jedan do drugog po x-osi web stranice, a element u nizu koji
po širini više ne može stati u trenutni redak prelazi u sljedeći. Ako je za konkretan
inline-element to moguće, on će se po potrebi prelamati kroz dva ili više redaka.
Relativna x-pozicija sljedećeg retka na HTML stranici uvijek je 0, tj. lijevi rub taga-
roditelja, a y-pozicija sljededećeg retka definirana je donjim rubom onog elementa iz
prethodnog retka koji ima maksimalnu y-poziciju donjeg ruba.
Pozicioniranje elemenata pomoću CSS-a
CSS zančajno proširuje prilično ograničene mogućnosti HTML-a za strukturiranje krajnjeg
izgleda web stranice. CSS podržava nekoliko vrsta pozicioniranja kojima se određuju
konačne koordinate elementa, vidljivost i prikaz elemenata, te kako će biti prikazan sadržaj
koji je prevelik za definirani pravokutnik.
Vrste pozicioniranja
Svojstvom position moguće je definirati jednu od četiri moguće vrste pozicioniranja
pojedinog elementa: static, relative, absolute i fixed.
Dodatno, svakoj vrsti pozicioniranja (izuzev static), najčešće se dodjeljuju neka od svojstava:
top, right, bottom, left, a koje označavaju odmak od rubova u odnosu na element na koji se
pozicioniranje odnosi.
Prijmjer različitog pozicioniranja elemenata prikazan je sljedećim primjerom (ponovno zbog
jednostavnosti prikazan je samo ključni dio koda):
<div id="MAIN">
<div id="HEADER">
header<br><br><br>
</div>
<div id="CONTENT">
<p> CONTENT: RELATIVE top/left=-15/35 </p>
<div id="ABSOLUTE_TO_CONTENT_2">
<p> ABSOLUTE_TO_CONTENT_2. right/left=40px </p>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
</p>
</div>
<div id="ABSOLUTE_TO_CONTENT_1">
<p> ABSOLUTE_TO_CONTENT_1, right/bottom=20px </p>
<p>
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.
</p>
</div>
</div>
<div id="FOOTER">
footer
</div>
<div id="ABSOLUTE_TO_BODY">
<br>
<p> ABSOLUTE_TO_BODY </p>
<p> absolute to body </p>
<br>
</div>
<div id="FIXED">
<p> FIXED </p>
</div>
</div>
Klikabilan primjer:
Float elementi
Osim svojstva position, svojstvom float koje može imati vrijednosti left ili right, element se
može pozicioniranti na maksimalnu moguću lijevu odnosno desnu poziciju unutar taga-
roditelja. Više float elemenata može biti složeno jedan do drugog na lijevoj odnosno desnoj
strani taga-roditelja. Ostali elementi unutar taga-roditelja koji nemaju definirano svojstvo
float popunjavaju prostor oko float-elementa do njihove visine, a kasnije po punoj širini taga-
roditelja.
Svojstvom clear određuje se s koje strane nije dozvoljeno popunjavanje taga-roditelja oko
float-elemenata. Moguće vrijednosti su left, right i both za onemogućavanje popunjavanja s
lijeve, desne ili obje strane float-elemenata. Y-pozicija elementa s definiranim svojstvom
clear definirana je donjim rubom jednog od prethodnih elemenata, i to onog koji ima
maksimalnu y-poziciju donjeg ruba. Tagovi koji imaju svojstvo position postavljeno na
absolute ignoriraju svojstvo float.
Primjer float i clear svojstava:
<div id="MAIN">
<div id="CONTENT">
<div id="FLOAT_RIGHT">
<p> FLOAT_RIGHT</p>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam
</p>
</div>
<div id="FLOAT_RIGHT2">
<p> FLOAT_RIGHT2 </p>
<div id="FLOAT_LEFT">
<p> FLOAT_LEFT </p>
</div>
<p>
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit.
</p>
</div>
<div id="NORMAL">
<p> NORMAL </p>
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
</p>
</div>
<div id="CLEAR">
<p> CLEAR </p>
</div>
</div>
</div>
Klikabilan primjer:
Prikaz i vidljivost elemenata
Vrstu prikaza i vidljivost elemenata te njihovog sadržaja CSS-om se kontrolira na nekoliko
načina:
Elementima je moguće promijeniti ponašanje koje proizlazi iz vrste taga (blok- ili
inline-) pomoću svojstva display. Najčešće korištene vrijednosti su:
Svojstvom visibility koje može imati vrijednosti visible ili hidden (vidljiv ili skriven)
element se može sakriti. Sa svojstvom visibility: hidden, element i dalje zauzima isti
prostor u hijerarhiji pravokutnika, za razliku od svojstva display: none, kada se
element potpuno miče van prikaza web stranice.
Blok-elementima kojima su dimenzije implicitno ili eksplicitno limitirane, sadržaj
koji ne stane u predviđeni pravokutnik može se kontrolirati svojtvom overflow:
Obzirom da elementi koji su pozicionirani CSS-om mogu biti smješteni na bilo kojoj
poziciji na web stranici, može doći do preklapanja njihovih pravokutnika i
pripadajućih sadržaja. Redosljed iscrtavanja podešava se svojstvom z-index, čija
vrijednost je cjelobrojni numerik. Prvo se iscrtavaju elementi s nižim vrijednostim
svojstva z-index, a preklapaju ih oni s višim.
Primjer primjene različitih vrijednosti overflow svojstva na isti div element:
Klikabilan primjer:
Implementacija stilova i kaskadni poredak
Načini implementacije stilova
CSS možemo implementirati u HTML na tri načina:
U pojedinačni HTML tag unutar HTML koda, tako da utječe samo na taj konkretan
tag u dokumentu (inline rule).
Prikaz 8. Sintaksa inline implementacije
Unutar 'head' taga HTML-a, da utječe na pojedinačnu web stranicu (internal rule).
Prikaz 9. Sintaksa internal implementacije
Kao eksterni dokument tako da utječe na cijeli web site (external rule). Eksterni
dokument može biti implementiran na dva načina:
o pomoću 'link' taga unutar zaglavlja HTML dokumenta
Prikaz 10. Sintaksa external implementacije putem linka
o ili importiran preko URL-a eksterne CSS datoteke.
Prikaz 11. Sintaksa external implementacije putem importa
Import se može koristiti ne samo kao import u HTML, nego se jedna eksterna
CSS datoteka može importirati u drugu.
Kaskadni poredak
Budući da postoji više načina implementacije CSS-a velika je šansa da različita pravila stila
budu dodijeljena istom elementu. Za ovaj problem preklapanja stilova bilo je potrebno
striktno definirati redoslijed utjecanja CSS-a na HTML kod.
Prva bitna stvar kod ovih preklapanja je činjenica da list stila ('style sheet') može doći s tri
različita izvora. Gledano prema prioritetima od najmanjeg prema najvećem to su sljedeći
izvori:
Browser – svaki browser ima svoj zadani (default) style sheet kojim kontrolira
prezentaciju elemenata HTML dokumenta ako taj dokument nema drugačije definiran
stil.
Korisnik – neki browser-i dozvoljavaju korisnicima da zamijene default style sheet
browser-a sa svojim lokalno generičkim stilom, koji će se ponašati kao default-ni stil
za sve dokumente.
Vanjski – stilovi autora (obično autora HTML-a) koji prate sadržaj konkretnog
HTML dokumenta bilo da su ugrađeni u HTML kod ili povezani eksternom CSS
datotekom.
Dakle, vanjski stil (stil autora) ima najveći prioritet, nakon njega korisnikov stil, a ako ne
postoji ni jedan od ovih stilova browser koristi svoj default-ni stil.
Danas vjerojatno ne postoji autor HTML koda koji će ostaviti čisti HTML kod bez korištenja
stilova. Stilovi autora, kao što je već rečeno, mogu biti implementirani na tri načina.
Promatrano prema prioritetima kaskadnog poretka gdje zadnji ima najviši prioritet, redoslijed
je sljedeći:
Eksterni style sheet (u vanjskoj datoteci)
Interni style sheet (unutar <head> taga HTML dokumenta)
'Inline' style sheet (unutar konkretnog HTML elementa na koji se odnosi)
Generalno gledano, uvijek viši prioritet imaju pravila koja konkretnije određuju element.
Prema tome će unutar eksternog ili internog style sheet-a prioriteti biti poredani prema vrsti
selektora. Gledano ponovno od najslabijeg prema najjačem, kaskadni poredak selektora je
sljedeći:
HTML selektor – selektira sve elemente jedne vrste, npr. sve <h1> elemenate
class selektor – klasa koja može ciljati bilo koji element i može biti dodijeljena više
od jednom elementu
ID selektor – cilja na jedan i samo jedan element HTML koda
Ako je definirano više pravila jednakog prioriteta prednost ima definicija koja je zadnja
specificirana.
Postoji jedna iznimka od ovih pravila, a to je '!important' deklaracija. Ona ima najveći
prioritet u kaskadnom poretku stilova. Može biti korištena od strane autora koda i tada ima
najveći prioritet od svih autorski definiranih stilova (veći od 'inline' pravila). Ali kada je
definirana od strane korisnika ima apsolutno najveći prioritet u cijelom kaskadnom poretku
(veći od autorove '!important' deklaracije). Na ovaj način ostavljena je mogućnost
korisnicima s posebnim potrebama (npr. osobe problematičnog vida koje trebaju ekstra veliki
font i/ili veliki kontrast boja), da prilagode prikaz HTML stranica svojim potrebama.
Prikaz dokumenta na različitim medijima
CSS-om je definirano posebno pravilo @media, kojim se kontrolira ponašanje dokumenta u
zavisnosti od medija na kojem se prikazuje. Sintaksa primjene različitih stilova u zavisnosti o
mediju pokazana je u sljedećem primjeru:
Klikabilan primjer:
Podržani mediiji, odnosno vrijednosti za pravilo @media navedene su u sljedećoj tablici:
Prednosti upotrebe CSS-a u web dokumentima
Iako je CSS moguće koristiti samo parcijalno, mnoge su prednosti njegove pune primjene od
samog početka razvoja web projekata:
1. Potpuno odvajanje sadržaja od prezentacije. Vanjski CSS može sadržavati stilove za
sve elemente svih stranica web site-a. Time se postiže dvostruka korist: sam sadržaj
ostaje rasterećen od prezentacijskih informacija, dok je s druge strane prezentacija
web site-a definirana centralizirano, te se svaka izmjena aplicira na sve stranice web
site-a.
2. Fleksibilno pozicioniranje elemenata. Bez upotrebe CSS-a, dijelove HTML
dokumenta moguće je samo donekle pozicionirati upotrebom tablica, no pokazalo se
kao neprecizno i izrazito štetno s aspekta strukture dokumenta.
3. Ubrzano učitavanje stranica. Renderiranje tablica, naročito ugniježđenih, daleko je
sporije od CSS-baziranog pozicioniranja, a osim toga HTML dokumenti su i svojom
veličinom bitno manji. Zbog toga se CSS-bazirane stranice učitavaju daleko brže.
4. Učitavanje stranica bez JavaScripta. Dio korisnika interneta ima deaktiviran
JavaScript u browser-u uglavnom radi zaštite kompjutera od virusa i/ili nametljivih
reklama. To znači da npr. JavaScript navigacija neće biti prikazana, a pomoću CSS-a
često je moguće postići isti ili barem sličan efekt.
5. Dostupnost na različitim medijima. CSS pravila za tipove media ('@media' rules)
specificiraju kako će dokument biti prezentiran na različitim medijima: ekran, papir,
braille-ov uređaj, sintetizator govora, handheld uređaji, itd. U zavisnosti od toga s
kojeg uređaja dolazi zahtjev za prikaz web stranice browser koristi odgovarajuću CSS
datoteku. Neka CSS svojstva dizajnirana su samo za jedan određeni tip medija, (npr.
'page-break-before' samo za stranične medije), dok neka svojstva mogu dijeliti
različiti mediji ali zahtijevaju i različite vrijednosti (npr. 'font-size' svojstvo koristi se
za 'print' i 'screan' medij ali radi njihovih razlika za printani dokument obično treba
manja veličina fonta).
6. Brži razvoj dizajna. CSS omogućava brže dizajniranje stranica jer često korištene
stilove možemo spremiti u odvojenu datoteku i tako učiniti lako dostupnim za
korištenje kod svakog novog dizajna. Osim toga, kod novog razvoja dizajna može se
koristiti postojeća CSS datoteka i na njoj raditi modifikacije umjesto razvoja nove.
Koliko je CSS efikasan u separaciji dizajna od sadržaja najbolje pokazuje primjer sa Zen
Garden site-a (profesionalni site za grafičku umjetnost CSS-a) gdje je identičan web sadržaj,
dakle ista HTML datoteka, stilizirana primjenom dvije različite CSS datoteke:
Prikaz 12. CSS dizajn Benjamina Klemma, Njemačka [8]
Prikaz 13. CSS dizajn Erica Stoltza, California [9]
Budućnost CSS-a
W3C konstantno radi na razvoju CSS-a i njegovog sljedećeg izdanja "CSS Level 3". Većina
problema koju CSS2 ne rješava na adekvatan način biti će riješena u nadolazećoj verziji. Iako
je standard još uvijek u razvoju mnoga najavljena proširenja zvuče impresivno:
Najznačajniji prijedlog proširenja jest mogućnost kreiranja fleksibilnih kolona za
izgled stranice. Implementacija višekolonskog prikaza umjesto HTML tablica je s
postojećom verzijom CSS-a moguća, ali komplicirana. Idealno bi bilo kada bi CSS3
potpuno riješio ovaj problem.
Iako CSS2 teoretski podržava mogućnost download-anih fontova (drugim riječima,
fontova koji ne postoje na korisnikovom računalu), tu mogućnost je i dalje teško
implementirati. W3C ima intenciju riješiti taj problem u potpunosti.
Jedan od prijedloga jest uvođenje 'profila boja'. Radi se o tome da grafički elementi
trenutno mogu izgledati svjetlije ili tamnije zavisno od računala na kojem se
prikazuju. CSS3 trebao bi dopustiti autorima da opisuju boje kako bi riješili ovaj
problem.
Kontrola ponašanja HTML elemenata iz CSS-a je ambiciozna ideja čijom bi se
implemntacijom postiglo da CSS ne određuje samo vizualni stil elemenata, nego i
njihovu dinamičku kontrolu. Ako bi ovo proširenje bilo postignuto značilo bi veliki
napredak, jer osim jednostavnih izmjena stilova nad hover, focus i active
pseudoklasama CSS trenutno ne pruža nikakvu mogućnost kontrole ponašanja nad
objektima.
4. JAVASCRIPT
Povijest JavaScripta
Povijest JavaScripta seže u 1992. godinu, kada je kompanija Nombas počela s razvojem
novog 'embedded' skriptnog jezika kojeg su nazvali C-minus-minus (ili Cmm kao
skraćenica). Motiv za definiranjem i razvojem potpuno novog skriptnog jezika bio je
jednostavan: potreba za skriptnim jezikom dovoljno moćnim da zamijeni makro-jezike koji
su osim često ograničenih mogućnosti bili i potpuno nekompatibilni među operacijskim
sustavima. Također, poželjna je bila sličnost s nekim od postojećih, rasprostranjenih
programskih jezika kako bi se izbjegla potreba za dugotrajnim procesom učenja nove sintakse
i interne logike novog alata od strane programera.
Kao logičan odabir modela, a naročito sintakse nametnuo se C i C++ zbog široke upotrebe na
svim tadašnjim operacijskim sustavima. Naravno, obzirom da C i C++ nemaju mogućnost
interpretativnog izvršavanja, u glavnini je preuzeta samo sintaksa. Interna struktura i logika
programskog jezika promijenjena je na način da slijedi samo osnovu navedenih jezika koji su
poslužili kao modeli, dok je glavnina prilagođena skriptnom izvršavanju.
Novi jezik je bio dio shareware paketa CEnvi, koji je među prvima demonstrirao prednosti
skriptnih jezika u odnosu na DOS batch makro-e. Nombas je uskoro promijenio naziv 'C-
minus-minus' u 'ScriptEase' iz dva čisto marketinška razloga: procjena je bila da 'minus' u
nazivu naprosto zvuči negativno, a da sam 'C' djeluje odbojno na širu korisničku populaciju,
obzirom da su C i C++ bili u domeni profesionalaca i relativno teški za savladati, a što
definitivno nije bio slučaj s Cmm-om.
JavaScript unutar browser-a
Kada je popularnost Netscape Navigatora počela naglo rasti, Nombas je razvio verziju
CEnvi-ja prilagođenog izvršavanju unutar browser-a, drugim riječima unutar web-stranica. Ti
rani eksperimenti su nazvani 'Espresso Pages', i predstavljaju prvi client-side skriptni
programski jezik korišten na World Wide Webu. U to vrijeme malo tko je mogao predvidjeti
da će ideja potekla iz male kompanije Nombas imati toliki utjecaj na kasniji razvoj interneta,
te postati jedna od njegovih temeljnih komponenti.
Kako je korištenje interneta dobivalo na popularnosti, postepeno je rasla i potreba za
standardnim client-side skriptnim jezikom, u najvećoj mjeri zbog jednostavne ali krucijalne
potrebe za validacijom web-formi. Bez skriptnog jezika unutar web browser-a, validnost
svake forme koju bi korsnik popunio morala bi se provjeriti na serverskoj strani. To znači da
bi korisnik nakon što je popunio formu i kliknuo na 'submit' button, bilo potreno sljedeće:
slanje podataka iz forme na server
provjera valjanosti unesenih podataka
u slučaju neispravnosti nekog od unesenih podataka, ponovno učitavanje stranice s
obavijesti koja od polja u formi nisu korektno popunjena
ponovno slanje forme na server, itd.
Uzme li se u obzir činjenica da je u to vrijeme najveći broj korisnika pristupao internetu
preko modema tipičnom brzinom 28.8 kbps, te da je i serverski potencijal tada bio bitno
manji nego danas, za samo jedan round-trip prilikom slanja forme bilo je potrebno i 30-ak
sekundi, i to za običnu validaciju web-forme. S korisničkog aspekta potpuno je neprihvatljivo
čekanje od pola minute da bi, primjerice, za željeni izvještaj dobio obavijest kako neko od
polja nije popunjeno, ili kako uneseni datum početka perioda mora biti manji od datuma
završetka perioda.
Netscape
Netscape, koji je u to vrijeme bio lider u inovativnosti na području web browser-a, ozbiljno je
počeo razmatrati razvoj ili preuzimanje nekog client-side skriptnog jezika. Korištenjem
skriptnog jezika, umjesto vremenski zahtjevnih round-trip provjera na serverskoj strani,
validacija korisničkog unosa (koja je u svojoj suštini jednostavan problem), mogla bi se
izvršiti direktno na klijentovom računalu, unutar browser-a. Na taj način ne samo da bi
korisnik dobio drastično povećanje brzine, nego bi se dodatno rasteretili serverski resursi kao
i serverski bandwidth. Brian Eich koji je u to vrijeme radio u Netscape-u, razvio je za novu
verziju Netscape Navigatora 2.0 skriptni jezik LiveScript, sintaksom baziran na C-u. Intencija
je bila da se novi jezik ne koristi isključivo u browser-u, nego i na serverskoj strani. Unatoč
njegovim tvrdnjama da nije bio inspiriran Nombasovim CEnvi-jem neosporno je da je,
slučajno ili ne, osnovna ideja gotovo identična. Netscape je tada ušao u partnerstvo sa Sun
Microsystems da bi se implementacija LiveScripta mogla dovršiti na vrijeme, kako bi novi
jezik mogao biti uključen u novi Netscape Navigator 2.0.
Netom prije nego što je Netscape Navigator 2.0 službeno pušten u upotrebu, Netscape je
promijenio ime LiveScripta u JavaScript 1.0, kako bi iskoristio naziv Java programskog
jezika u kreiranju novog internet 'buzzworda'. Zbog uspjeha koji je JavaScript polučio unutar
Netscape Navigatora 2.0, Netscape je uložio dodatne napore i na poboljšanju JavaScripta te je
implementirao JavaScript verziju 1.1 za naredni Netscape Navigator 3.0.
Microsoft
Microsoft je do tada imao svoju originalnu client-side alternativu – VBScript. VBScript je
slično kao i JavaScript preuzeo model postojećeg programskog jezika, VisualBasica. Ipak,
VisualBasic je kao programski jezik postojao isključivo na Microsoft platformi, pa samim
time nije mogao biti široko prihvaćen, pogotovo zbog činjenice da je Netscape Navigator
svoje browser-e isporučivao za sve popularne operacijske sustave. Nadalje, zbog uske
vezanosti na isključivo svoju platformu, ostalim korisnicima interneta stranice bazirane na
VBScript-u bile su potpuno neupotrebljive. Zbog toga je Microsoft morao odustati od
nametanja VBScripta kao jedinog client-side skriptnog jezika unutar svojih browser-a.
Verzijom Internet Explorera 3.0 u koji je ugrađena podrška za klon JavaScript interpretera
(nazvanog JScript, zbog potencijalne opasnosti od sudskog spora s Netscape-om), Microsoft
se aktivno uključuje u utrku za nametanjem vlastite JavaScript implementacije kao standarda.
Iako je Microsoft do danas zadržao i VBScript u svojim browser-ima, njegova upotreba je
zanemarivo mala.
Ozbiljnim ulaskom Microsofta u područje web browser-a Netscape počinje gubiti
neprikosnovenu dominaciju, ali se time na neki način desila i prekretnica u razvoju
JavaScripta kao programskog jezika. JavaScript, za razliku od C-a i mnogih drugih
programskih jezika nije bio definiran nekim standardom vezanim uz sintaksu, semantiku ili
mogućnosti. Dogodila se situacija u kojoj postoje tri različite, međusobono nekompatibilne
ali podjednako popularne implementacije JavaScripta (JavaScript 1.1 od Netscape-a, Jscript
od Microsoft-a i ScriptEase od Nombas-a) od kojih je svaka ima intenciju postati
dominantnom. Industrija je, s druge strane, nalagala da je jezik potrebno standardizirati što je
moguće prije.
Standardizacija
1997. godine, JavaScript 1.1 je poslan Europskoj Asocijaciji Proizvođača Računala
(European Computer Manufacturers Association – ECMA) kao prijedlog za standardizaciju.
Unutar ECMA-a, formiran je odjel 'Technical Committee #39' (TC39) sa zadatkom:
"'standardizacije sintkse i semantike višeplatformskog skriptnog jezika opće namjene,
nezavisno od proizvođača softwarea"
Sačinjen od programera iz Netscape-a, Sun-a, Microsoft-a, Borland-a, i drugih kompanija
zainteresiranih za budućnost skriptnog jezika (primarno, ali ne i nužno unutar browser-a),
TC39 je nakon nekoliko mjeseci dovršio dokument ECMA-262 – standard koji definira novi
skriptni jezik nazvan ECMAScript.
Iako se mnoga renomirana imena IT industrije ne izražavaju previše pohvalno o dokumentu
ECMA-262 i njegovim kasnijim revizijama, te opcenito o kvaliteti rada odjela TC39,
činjenca je da je zaživljavanje standarda, ma kakav on bio, uvelike pridonijelo razvoju weba.
Standard je konačno omogućio razvojnim timovima predvidljivost ponašanja njihovih
produkata na svim postojećim ali i budućim browser-ima.
Naredne godine, svjetska organizacija 'International Organization for Standardization and
International Electrotechnical Commission' (ISO/IEC) također je prihvatila ECMAScript kao
standard (ISO/IEC-16262). Od tada, proizvođači web browser-a koriste ECMAScript kao
osnovu za vlastite implementacije JavaScripta. Unatoč činjenici da standard nije ispoštivan
do kraja na gotovo svim browser-ima, stupanj međusobne kompatibilnosti je zadovoljavajući.
[10]
Sintaksa i sematika JavaScripta
Sintaksa i semantika JavaScripta biti će u ovom radu obrađeni prema verziji 1.5. Premda je
godina definiranja te verzije stara čak 9 godina, a aktualna verzija je 1.9, uglavnom je baš
verzija 1.5 najčešće okosnica razvoja većine web-projekata. Razlog tome je znatan broj
korisnika koji ne unaprijeđuju često svoje verzije browser-a; primjerice Internet Explorer 6
koji datira od 2001. godine, a prema statistikama još i danas zauzima visokih 13,6% tržišta (u
isto vrijeme prošle godine 24,5%).
Ključne riječi i tipovi podataka
JavaScript se sastoji od sljedećih ključnih riječi:
Neke od njih nisu u upotrebi, već su rezervirane za buduća proširenja. Bilo koja od ključnih
riječi se ne može koristiti za imenovanje varijabli ili funkcija.
JavasScript poznaje sljedeće tipove podataka:
numeričke (npr. 35 ili 12.341)
logičke (jedna od vrijednosti true ili false)
stringove (npr. 'Varaždin' ili 'poruka za korisnika') i
specijalni tip podataka, a radi se o samo dvije predefinirane vrijednosti: null za null-
vrijednost, i undefined za vrijednost varijable koja nije definirana
Ovako mali broj primitivnih tipova podataka pokazao se sasvim dostatanim u razvoju web
aplikacija, obzirom da za kompleksnije tipove podataka postoji mogućnost kreiranja struktura
sačinjenih od primitivnih tipova i/ili drugih struktura.
Varijable i literali
Varijable su, kao i u drugim programskim jezicima, simbolički nazivi vrijednosti u aplikaciji,
koji su podložni jednostavnim pravilima: naziv mora započeti alfa-karakterom (A-Z ili a-z),
underscore-om (_) ili dolar ($) karakterom, svi preostali karakteri u nazivu mogu dodatno
sadržavati i numeričke karaktere. JavaScript je case-sensitive, pa tako mogu postojati dvije
različite varijable s nazivima 'a123' i 'A123'.
Primjeri sintaksno korektnih naziva varijabli: a, x1, $1_abc, Razmak_u_imenu, _Clan
Primjeri pogrešnih naziva varijabli: 1a, Razmak u imenu, +abc
JavaScript je jezik koji tipove podataka interpretira dinamički, što znači da se tip varijable ne
specificira prilikom deklaracije, te da se podaci automatski konvertiraju prema potrebi
tijekom izvršavanja skripte. Varijable je potrebno deklarirati pomoću ključne riječi var, npr:
var abc;
Moguće ih je inicijalizirati istovremeno s deklaracijom:
var abc = 3;
Također, varijable je dopušteno redeklarirati, tako da je sljedeći kod valjan:
var abc = 3;
abc = abc + 1;
var abc = 'Irena';
Područje djelovanja (scope) svake varijable može biti lokalno ili globalno. Lokalne varijable
su one deklarirane unutar funkcije, i raspoložive su samo kodu unutar te funkcije, dok su
globalne deklarirane izvan funkcije i dostupne su kodu u cijeloj skripti. Varijable se mogu
deklarirati i bez ključne riječi var i u tom slučaju su globalne bez obzira na mjesto
deklaracije, ali taj je način izrazito nepoželjan sa stajališta strukture koda, te u tom slučaju
interpreter generira 'warning' poruku.
Konstante su podržane u JavaScriptu, i zapravo su samo specijalizacija varijabli od kojih se
razlikuju u točno tri osobine: deklariraju se ključnom riječi const (umjesto var), potrebno im
je inicijalizirati vrijednost prilikom deklaracije, i nemaju mogućnosti promjene vrijednosti
putem pridruživanja druge vrijednosti ili redeklaracije. Naravno, unutar istog scope-a ne
mogu postojati varijabla i konstanta s jednakim nazivima.
function f()
{
var a;
a = 3;
const b = 4;
const a = 5; // sintaksno ispravno, ali logička greška; varijabla tog
naziva postoji
b = b + 1; // greška, konstanta ne može mijenjati vrijednost
a = a + 1; // greška, iako na početku varijabla, kasnije redeklarirano
u const
}
Osim varijabli primitivnih tipova podataka, JavaScript podržava objekte, koji su u
generalnom smislu slični strukturama programskog jezika C, ali daleko fleksibilniji. U
osnovi, služe za kreiranje kompleksnih tipova podataka.
var objTest;
objTest.ime = 'Irena';
objTest.prezime = 'Holjevac'
objTest.koeficijent = 1.36;
var osnovica = 1250.78;
var rezultat = osnovica * objTest.koeficijent;
Numerički cjelobrojni literali se mogu izraziti u decimalnom sustavu (bez vodećih nula) ili
heksadecimalnom sustavu (s prefiksom '0x'). JavaScript je do verzije 1.5 podržavao i oktalni
sustav (uz jednu vodeću nulu), ali je izbačen iz standarda pa ga treba izbjegavati, iako ga neki
browser-i još uvijek podržavaju. Predznak '-' označava negativnu vrijednost, a predznak '+',
koji može biti izostavljen, pozitivnu.
Numerički decimalni literali sastoje se od:
cjelobrojnog dijela (cjelobrojni numerik) sa ili bez predznaka; može se izostaviti, i u
tom slučaju se podrazumijeva 0
decimalne točke
decimalnog dijela (drugi cjelobrojni numerik)
eksponenta (formata 'e' ili 'E' iza kojeg slijedi cjelobrojni numerik); eksponent se
može izostaviti, i u tom slučaju se podrazumijeva 1.
Logički literali mogu imati samo dvije vrijednosti: true ili false. Potrebno je obratiti pažnju na
činjenicu da je JavaScript case-sensitive, tako da npr. True nije korektno izražena logička
vrijednost.
String literali su proizvoljno dug skup karaktera, omeđen s obje strane ili jednostrukim (') ili
dvostrukim (") navodnicima. Unutar stringa se, slično kao i u programskom jeziku C, mogu
navesti specijalni karakteri kombinacijom backslash (\) karaktera i oznake za konkretni
specijalni karakter: \f = from feed, \t = tab, \r = carriage return, \n = new line, \\ = backslash, \'
= apostrof, \" = navodnici itd.
Operatori i izrazi
Osnovni operatori u JavaScriptu slični su većini jezika, a većina ima potpuno isto značenje
kao u programskom jeziku C. Tako je '=' operator pridruživanja, '+' operator zbrajanja, '=='
operator testiranja jednakosti itd.
Izrazi su bilo koji skup literala, varijabli, operatora i podizraza koji rezultira jedinstvenom
vrijednošću. JavaScript podržava tri osnovna tipa izraza, analogno primitivnim tipovima
podataka: aritmetičke, logičke i stringovne. Osim tih osnovnih tipova izraza, izrazi mogu
rezultirati i objektima.
Konceptualno, postoje dvije kategorije izraza:
izrazi koji pridodjeljuju vrijednost varijabli; npr. a = 7 jest izraz kojim se varijabli a
pridodjeljuje vrijednost 7; on sam (cijeli izraz) također ima vrijednost 7. Takvi izrazi
koriste operator pridruživanja (assignment operator)
izrazi koji jednostavno sadrže rezultirajuću vrijednost; npr. 3 + 5 jest izraz koji
jednostavno ima vrijednost 8
Pri evaluiranju izraza, vrijede više-manje uobičajena pravila važnosti (prednosti) operatora,
tako da primjerice izraz 3 + 2 * 6 rezultira s 15, a ne 30. Potpuna tablica prednosti opreatora u
JavaScriptu:
Komentari i programske naredbe
Sintaksa komentara potpuno je analogna programskom jeziku C. Moguće je koristiti dvije
vrste komentara: nakon dvostrukog 'foreslash' karaktera (//) ostatak do kraja linije neće biti
izvršen nego se smatra komentarom programera. Blok komentari (za komentiranje u sredini
programske linije, ili za komentiranje bloka linija) odvajaju se s karakterima /* na početku
komentara, te */ na kraju:
var a = 1; // primjer kometara s dva foreslash karaktera
var b /* blok komentar unutar jedne linije*/ = 1;
var c = 1;
/* Ovo je blok komentar
koji se može rasprostirati
kroz nekoliko
linija koda */ var d = 1;
Programske naredbe u JavaScriptu izrazito nalikuju sintaksi programskog jezika C. Pojedine
naredbe odvajaju se točkazarez karakterom (;).
var a = 1;
Nažalost, JavaScript je pri parsiranju izvornog koda prilično neformalan, te ponekad dopušta
izostavljanje točkazarez karaktera. Još nepoželjnije je to da sam interpreter nakon parsiranja
koda naknadno dodaje točkazarez karakter tamo gdje algoritam interpretera procjenjuje da
nedostaju. Zbog toga treba biti posebno pažljiv i konzistentan, jer se lako može desiti da
grešku koja je zapravo sintaksne prirode, interpreter naknadnim dodavanjem točkazarez
karaktera prije izvršavanja promijeni u sintaksno valjan kod, ali s teško pronalažljivom
logičkom greškom. Primjerice, u sljedećem jednostavnom fragmentu koda kojem je očita
namjena da rezultat funkcije vratiti objekt-literal:
return
{
javascript : "fantastic"
};
, JavaScript interpreter će prije samog izvršavanja nadomjestiti 'nedostajući' točkazarez, pa će
stvarni kod koji se izvršava (a programeru neće biti očigledan!) biti sljedeći:
return; // interpreter je dodao točkazarez karakter. rezultat funkcije biti
će 'undefined'
{ // Otvorena vitičasta zagrada smatra se 'anonimouus' blokom
javascript : "fantastic"
}; // Nakon zatvorenog bloka, preostali točkazarez se interpretira kao
'prazna' naredba
Prema tome, ispravno je pisati na način:
return {
javascript : "fantastic"
};
, ili: var result =
{
javascript : "fantastic"
};
return result;
Blok naredbi omeđuje se vitičastim zagradama. Blokovi služe za grupiranje više naredbi. Kao
i u programskom jeziku C, grupiranje je potrebno kod kontrole toka, tj. uvjetnih naredbi
(if..else, switch) i petlji (for, while, itd), jer sintaksa kontrole toka programa zahtijeva točno
jednu podnaredbu koja se izvršava ako je uvjet zadovoljen. U slučaju da je potrebno izvršiti
niz naredbi za zadovoljeni uvjet, potrebno ih je deklarirati kao blok koji interpreter onda
promatra kao jednu naredbu:
if( x > 0 )
{
var a = 1;
var b = 2;
c = a + b;
}
Važno je spomenuti da, za razliku od većine ostalih programskih jezika, JavaScript ne
podržava block-scope. Drugim riječima, varijable deklarirane unutar bloka imaju scope
funkcije u kojoj su deklarirane, odnosno globalni scope skripte ako je blok deklarairan izvan
funkcije.
var a = 1;
if( x > 0 )
{
var a = 2;
}
alert(a); // vrijednost varijable nije 1 nego 2!
Kontrola toka programa, funkcije i objekti
Naredbe za kontrolu toka u potpunosti slijede sintaksu i semantiku programskog jezika C.
Podržani su:
if.. [else if].. [else if].. [else]
switch..case..[case]..[dafault]
for..
do..while
while..
Također, podržane su i naredbe:
break, za prijevremeni izlazak iz petlje ili prekid switch uvjeta
continue, za prijevremeno završavanje jednog kruga petlje
Funkcija je izdvojeni, po potrebi i parametrizirani blok koda koji obavlja neki opći zadak, te
opcionalno vraća rezultat po završetku izvršavanja. Funkcija može biti pozvana s više mjesta
iz ostatka programa, iz drugih funkcija ili rekurzivno. Definicija funkcije sastoji se od ključne
riječi function, iza koje sljede:
naziv funkcije
lista argumenata odjeljenih zarezom i zatvorenih zagradama; zagrade su obavezne čak
i ako funkcija nema parametara
blok s nizom JavaScript naredbi zatvorenih vitičastim zagradama; unutar niza naredbi
od kojih se sastoji tijelo funkcije dopušteno je pozivati druge funkcije, a dopuštena je
i rekurzija
ključna riječ return se unutar funkcije ne mora pojaviti, ali može se pojaviti više puta,
u slučaju grananja pomoću naredbi za kontrolu toka. Ona prekida izvođenje funkcije.
Ako ju slijedi izraz, fukncija vraća rezultat izraza. U suprotnom (ili ako izvršavanje
koda dođe do kraja funkcije bez naredbe return), funkcija vraća undefined.
function fnEksponent( x, e )
{
var result = 1;
for( var i = 1; i < e; i++ )
{
result = result * x;
}
return result;
}
Funkcija se poziva jednostavno navođenjem imena i listom parametara odjeljenih zarezom i
zatvorenih zagradama; kao i kod definicije, tako su i kod poziva zagrade obavezne čak i ako
funkcija nema parametara. Obzirom da funkcija može vratiti neku vrijednost, poziv fukncije
je sam po sebi izraz, ili može biti dio kompleksnijeg izraza.
var baza = 5;
var eksponent = 3;
var PetNaTrecuPlus2 = fnEksponent( baza, exksponent ) + 2;
// varijabla PetNaTrecu sadrzi vrijednost 125 + 2 = 127
Kod prijenosa parametara, JavaScript je nalik programskom jeziku Java:
primitivni tipovi podataka se prenose iskljucivo 'by value', to jest prenosi se kopija
vrijednosti varijable. Izmjena parametra tijekom izvršavanja funkcije ne utječe na
varijablu koja je korištena kao parametar funkcije prilikom poziva.
objekti se prenose iskljucivo 'by reference', to jest prenosi se referenca na objekt
varijablu. To znači da će izmjena svakog elementa objekta tijekom izvršavanja
funkcije promijeniti varijablu koja je korištena prilikom poziva.
Objekt je u JavaScriptu korisnički definirana struktura podataka. Za razliku od programskih
jezika C++ ili Java, za objekte se ne deklarara 'klasa' na osnovi koje se objekti instanciraju,
nego se deklaracija i instanciranje vrše zajedno. Drugim riječima, ne definira se opis nove
strukture podatka za kojeg sve instance nužno moraju imati identičnu strukturu. Nad
objektima je također moguće definirati metode, tj. funkcije pridružene objektu, koje se
izvršavaju nad samim objektom i mogu manipulirati njegovim elementima. Unutar metode,
samom objektu, tj. njegovim elementima se pristupa pomoću ključne riječi this:
var obj;
obj.ime = 'Irena';
obj.prezime = 'Holjevac';
obj.ImePrezimeKordinate = function(x,y)
{
var kordinate = '(' + x + ',' + y + ')';
var result = this.ime + ' ' + this.prezime;
result = result + '; ' + kordinate;
return result;
}
var s = obj.ImePrezimeKordinate( 45.817, 15.983 );
Objekt je, dakle, struktura podataka koju sačinjava više primitivnih tipova podataka ili drugih
objekata, te eventualno metoda. Za potrebe kreiranja više istovrsnih objekata, postoji
mogućnost instanciranja objekta pomoću konstruktor-funkcije. Konstruktor je zapravo obična
globalna funkcija koja u svome tijelu definira elemente za sve objekte koji će na taj način biti
instancirani. U sljedećem primjeru definirana je konstruktor-funkcija, tj. struktura podataka
sačinjena od 3 elementa primitivnih tipova podataka, i jednom dodatnom metodom koju je
moguće pozvati nad tim objektom:
function Osoba( iIme, iPrezime, iGodinaRodjenja )
{
this.ime = iIme;
this.prezime = iPrezime;
this.godinarodjenja = iGodinaRodjenja;
}
Osoba.RazlikaUGodinama = function( drugaOsoba )
{
return this.godinarodjenja - drugaOsoba.godinarodjenja;
}
Instanciranje objekta izvodi se pomoću ključne riječi new. Struktura koja je definirana u
prethodnom primjeru mogla bi se koristiti na sljedeći način:
var osoba1 = new Osoba( 'Irena', 'Holjevac', 1974 );
var osoba2 = new Osoba( 'Petra', 'Petrić', 1981 );
var razlika = osoba2.RazlikaUGodinama( osoba1 );
var imena = osoba1.ime + ', ' + osoba2.ime;
Obzirom da se konstruktor-funkcija sintaksno ni po čemu ne razlikuje od ostalih funkcija, iz
toga slijedi da je faktički svaka JavaScript funkcija u isto vrijeme i objekt. Fukncije zbog toga
dijelimo prema njihovoj upotrebi na dvije glavne skupine (iako s aspekta interpretera ne
postoji razlika):
pod objektima podrazumijevamo one funkcije kojima se definira struktura, tj. koje
definiraju elemente objekta i/ili pripadajuće metode
ostale funkcije, koje nazivamo jednostavno 'funkcijama', tj. one koje ne definiraju ni
elemente objekta niti pripadajuće metode, nego procesiraju isključivo ulazne
argumente.
U radu s objektima, suštinska razlika JavaScripta u odnosu na klasične programske jezike jest
ta da je čak i objektu instanciranom pomoću konstruktor-funkcije moguće naknadno mijenjati
strukturu. Primjerice, sljedeća promjena koda iz prethodnog primjera ja valjana:
var osoba1 = new Osoba( 'Irena', 'Holjevac', 1974 );
var osoba2 = new Osoba( 'Petra', 'Petrić', 1981 );
osoba2.djevojačkoprezime = 'Ivić';
var razlika = osoba2.RazlikaUGodinama( osoba1 );
Sintaksa također dopušta instanciranje objekata pomoću objekt-literala. Objekt-literali su
omeđeni vitičastim zagradama, elementi objekta odjeljuju se zarezima, a naziv i vrijednost
pojedinog elementa dvotočkom:
var automobil = { brand: 'Ford', model: 'Mondeo', godina: 2004 };
, što je ekvivalentno:
var automobil;
automobil.brand = 'Ford';
automobil.model = 'Mondeo';
automobil.godina= 2004;
Ranije je spomenuto da se svakom objektu, čak i nakon instanciranja pomoću konstruktor-
funkcije, može naknadno mijenjati struktura jednostavnim navođenjem dodatnog elementa.
Time se ne mijenja struktura svih objekata instanciranih istom konstruktor-funkcijom, nego
samo tog konkretnog objekta. Promjena strukture svih objekata instanciranih istom
konstruktor-funkcijom moguća je upotrebom specijalnog, predefiniranog elementa svih
objekata: __proto__, a koji se referencira kao element naziva prototype, na sljedeći način:
function Osoba( iIme, iPrezime, iGodinaRodjenja )
{
this.ime = iIme;
this.prezime = iPrezime;
this.godinarodjenja = iGodinaRodjenja;
}
Osoba.RazlikaUGodinama = function( drugaOsoba )
{
return this.godinarodjenja - drugaOsoba.godinarodjenja;
}
var osoba1 = new Osoba( 'Irena', 'Holjevac', 1974 );
var osoba2 = new Osoba( 'Petra', 'Petrić', 1981 );
osoba2.djevojačkoprezime = 'Ivić';
Osoba.prototype.krvnagrupa = 'nepoznato';
osoba2.krvnagrupa = 'A+';
Nasljeđivanje korisnički definiranih struktura (objekata), a što je jedna od fundamentalnih
osobina objektno-orjentiranog pristupa je u JavaScriptu podržana, i također se implementira
pomoću predefiniranog elementa prototype. Za poziv konstruktora 'baznog' objekta koristi se
metoda call, koja je također predefinirana nad svim objektima:
Globalni objekt u JavaScriptu
JavaScript interpreter izvršava skriptu unutar konteksta tzv. globalnog JavaScript objekta.
Drugim riječima, sve korisnički definirane globalne funkcije i varijable zapravo predstavljaju
proširenje globalnog JavaScript objekta.
Globalni JavaScript objekt ima nekoliko predefiniranih objekata i funkcija.
Predefinirani objekti
Standardni predefinirani JavaScripta objekti unutar globalnog objekta su: Boolean, Number,
String, Date, Math, Array, i RegExp. Oni enkapsuiliraju nekoliko često korištenih
kompleksnih tipova podataka, i imaju definirana svojstva i metode za manipulaciju nad
njima. Primijerice:
objekt String sadrži metode za pronalazak karaktera, svojstvo duljine, pretvaranje u
velika ili mala slova itd.
objekt Date, koji enkapsulira konkretan datum i vrijeme, sadrži metode za
ekstrahiranje dana u tjednu, postavljanje dana u mjesecu, itd.
Funcija eval()
Parametar funkcije eval je string. Pozivom ove funkcije, interpreter će parsirati parametar, te
ga izvršiti na isti način kao i sve ostale skripte. Korištenjem funkcije eval() moguće je dakle
izvršiti dinamički kreirani JavaScript kod smješten u string.
Funkcije za enkodiranje i dekodiranje stringova
Ovim funkcijama se pojedini karakteri unutar stringa zamjenjuju s odgovarajućom Unicode-
sekvencom i obratno. To se odnosi na:
sve internacionalne ne-ASCII karaktere (što uključuje hrvatske dijakritike)
karakter razmaka (' ')
sve ostale ASCII karaktere koji nisu alfanumerici, osim izuzetaka specifičnih za svaku
od funkcija, a prema sljedećoj tablici:
Primjer enkodiranog stringa:
var s = encodeURI( "http://irenaholjevac.com?p1=AB CČĆ&p2='x<y" );
// s sadrži:
"http://irenaholjevac.com?p1=AB%20C%C4%8C%C4%86&p2='x%3Cy"
Konverzija tipova podataka
Testiranje sadržaja varijable
5. DINAMIKA I INTERAKTIVNOST WEB SADRŽAJA
Samo nekoliko godina od pojave web-a pokazala se potreba za većom kontrolom nad
izgledom web stranica, ali i za dinamikom samog web sadržaja. CSS je, osim pune kontrole
nad izgledom stranica, u nekoj mjeri omogućio i dinamiku web sadržaja. Ipak, upotrebljivost
CSS-a u tom smislu svodi se na jednostavne automatske izmjene izgleda ili vidljivosti
pojedinih HTML elemenata zavisno od pozicije miša ili fokusa nad elementom.
Povijest dinamičkog web sadržaja
Uvođenjem skriptnih jezika unutar browser-a, a slijedom tendencije za kreiranjem punog,
programabilnog dinamičkog web sadržaja, bilo je potrebno definirati:
programsko sučelje koje će omogućiti pristup elementima web stranice iz skriptnog
jezika
skup programabilnih korisničkih akcija (events) nad pojedinim HTML elementima,
kojima se može pridodijeliti izvršavanje skriptnog koda
JavaScript je već inicijalno bio zamišljen kao programski jezik koji se može izvršavati u
različitim okruženjima. Za pristup resursima specifičnih okruženju u kojem interpreter
izvršava skripte, u ovom slučaju za pristup elementima web stranice, predviđeno je generalno
riješenje kroz ekstenziju globalnog JavaScript objekta.
Implementacija JavaScript interpretera unutar browser-a podrazumijeva da se pojedini
elementi HTML stranice mogu se referencirati preko ugrađenog globalnog JavaScript
objekta, točnije njegovog člana document. Zbog toga se interni model html dokumenta
gledano s aspekta skriptnog jezika naziva document-model. Korisničke akcije (events)
uvrštene su u HTML standard kao atributi taga (npr. onclick za klik korisnika mišem na
HTML element, onkeydown za pritisak tipke itd.), pri čemu vrijednost atributa sadrži string s
JavaScript kodom.
Dynamic HTML, ili skraćeno DHTML je marketinški termin, a odnosi se na primjenu
skupine tehnologija: HTML, CSS i skriptiranje pomoću document-modela, u svrhu kreiranja
dinamičkog web sadržaja. Iako ne postoji W3C specifikacija koja službeno definira DHTML,
postoje smjernice od kojih se većina može primijeniti na aplikacije koje koriste DHTML.
[11]
U prvim godinama evoluiranja DHTML-a proizvođači browser-a nezavisno su razvijali
programsko sučelje za JavaScript, odnosno svoju ekstenziju document-modela unutar
globalnog JavaScript objekta. Zbog relativno jednostavnog modela kojim se pristupalo samo
nekolicini tipova elemenata, implementacije se sintaksno nisu bitno razlikovale. Primjerice,
većina browser-a koristila je niz (JavaScript array objekat) za interno čuvanje svih bitmapa na
web stranici. Tim objektima moglo se pristupiti iz JavaScript koda referencirajući
predefinirano svojstvo images globalnog objekta document na sljedeći način:
document.images[3].src = "graphics/button2.gif"
Takav rani model bio je dosta ograničen, obzirom da je bilo podržano samo nekoliko
osnovnih tipova elemenata i atributa: slike, linkovi ili forme. Ipak, web stranice dobile su
mogućnosti dinamičkog sadržaja, pa i interakcije. Unatoč ograničenjima, uspostava veze
između skriptnog jezika unutar browser-a i elemenata HTML stranice otvorila je put za
daljnji razvoj i standardizaciju dinamičkog web sadržaja.
Primjena JavaScripta u web stranicama
Globalni JavaScript objekt u web browser-u je Window objekt, a on se sastoji od nekoliko
elemenata koji sadrže:
informacije o trenutnom prozoru browser-a
sistemske informacije o browser-u (naziv, verzija, podrška za cookies, status interenet
veze itd.) i računalu (operacijcki sustav, vrsta centralnog procesora itd.)
svojstva zaslona računala (dimenzije i raspoloživost boja)
listu svih frame-ova, ukoliko je web stranica sačinjena od više njih
informacije vezane za adresu dokumenta
povijest adresa otvaranih dokumenata
kompletan sadržaj učitanog web dokumenta
Prikaz 14.
Struktura globalnog JavaScript objekta u browser-u [12]
Sve globalne varijable i funkcije JavaScript programa unutar web stranice zapravo su
elementi globalnog objekta. Dakle, na istom su hijerarhijskom nivou kao i navedeni
predefinirani elementi Window objekta.
Implementacija JavaScripta u browser-u ima nekoliko dodatnih globalnih funkcija od kojih
su najvažnije:
alert() i prompt() za prikazivanje jednostavnih pop-up prozora za kratke obavijesti (sa
i bez korisničkog unosa). Ti prozori nisu dio web dokumenta, i koriste se uglavnom
kao pomoćni alat tijekom razvoja dinamičke web stranice.
setTimeout(), za izvršavanje koda nakon određenog vremenskog intervala, te
setInterval(), za kontinuirano ponavljanje izvršavanja koda u pravilnim vremenskim
razmacima. S clearTimeout() odnosno clearInterval(), vremenski definirano
izvršavanje koda se prekida.
print(), za slanje web dokumenta na pisač.
JavaScript kod se može uključiti u HTML stranicu na nekoliko načina:
unutar <script>..</script> tagova
uključivanjem vanjskih datoteka koje sadrže JavaScript kod
unutar HTML event handler-a
kao specijalni URL koji počinje s javascript: specifikatorom pseudoprotokola
JavaScript unutar <script> tagova
Unutar HTML dokumenta, sav kod koji se pojavljuje unutar tagova <script>..</script> će se
smatrati JavaScript kodom. U otvarajućem <script> tagu potrebno je definirati naziv
skriptnog jezika (<script type="text/javascript">).
Pojavljivanje <script>..</script> taga je dopušteno bilo gdje unutar <head> ili <body> tagova
HTML dokumenta. Pojedini dijelovi tih JavaScript fragmenata se, naravno, zavisno od više
faktora izvršavaju u različito vrijeme, jer mogu biti inicirani:
redosljedom pojavljivanja u HTML dokumentu (u slučaju kada je JavaScript kod
unutar globalnog scope-a)
kao rezultat korisnicke akcije (event) nad HTML elementom
periodički, kao rezultat timer-a
pozivom funkcije iz bilo kojeg od gore navadenih konteksta izvršavanja koda
Sa aspekta interpretera, pa samim time i programera, svi <script>..</script> fragmenti u
HTML stranici čine jedan, jedinstveni JavaScript program unutar globalnog scope-a, čiji je
svaki globalni dio dostupan svim ostalim dijelovima koda. Prema tome, web stranicu:
<head>
<script>
var y = 13; // JavaScript
</scirpt>
</head>
<body>
<script>
var x = 6; // JavaScript
for( var a=1; a<10; a++ ) // JavaScript
{ // JavaScript
// komentar // JavaScript
} // JavaScript
x = x + 1; // JavaScript
</script>
<div>
<form>
<input id='inputA'>
<script>
y = y + x; // JavaScript
// varijabla y je globalna kao i x, te sadrži vrijednost 8
</scirpt>
</form>
</div>
</body>
, JavaScript interpreter vidi kao: var y = 13; // JavaScript
var x = 6; // JavaScript
for( var a=1; a<10; a++ ) // JavaScript
{ // JavaScript
// komentar // JavaScript
} // JavaScript
x = x + 1; // JavaScript
y = y + x; // JavaScript
// varijabla y je globalna kao i x, te sadrži vrijednost 20
Vanjske datoteke koje sadrže JavaScript kod
JavaScript program, ili samo neki njegov dio, može biti napisan u posebnoj datoteci, umjesto
unutar <script>..</script> tagova. Uobičajena ekstenzija za datoteke koje sadrže isključivo
JavaScript kod je '.js'. Vanjske datoteke uključuju se tako da se script tagu dodijeli vrijednost
za atribut src, a što predstavlja relativni ili apsolutni path do datoteke. Kod sadržan u
vanjskim datotekama ima globalni scope.
<head>
<script type="text/javascript"
src="../../javascript/extern1.js"></script>
<script type="text/javascript"
src="../../javascript/extern2.js"></script>
</head>
<body>
...
Kao i sa <script>..</script> blokovima, tako je i uključivanje više datoteka na različitim
mjestima dopušteno. Važno je napomenuti da će u prethodnom primjeru funkcije iz datoteke
extern1.js biti moguće pozvati iz globalnog koda koji se nalazi u extern2.js, ali ne i obratno.
JavaScript unutar HTML event handler-a
Unutar HTML event handler-a, fragment JavaScript koda se može navesti kao parametar
unutar navodnika samog event handler-a:
<input type="checkbox" name="opts" onclick="var a=1; var b=a+1; alert(b);">
Zbog preglednost koda, preporuča se enkapsulirati potreban kod event handler-a u globalnu
JavaScript funkciju, kako je prikazano sljedećim primjerom. Osim toga, parametrizirana
funkcija tada može biti izvedena za više HTML-elemenata.
<scirpt>
function onClickInput()
{
var a=1;
var b=a+1;
alert(b);
}
</scirpt>
<input type="checkbox" name="opts" onclick="onClickInput();" >
JavaScript kao specijalni URL
Na mjestima na kojima browser očekuje URL kao novu adresu koja će postati aktivna kao
rezultat neke korisničke akcije, moguće je umjesto stvarnog URL-a navesti korektan
JavaScript kod. Razlika između takvog i standardnog URL-a jest u tome što standardni URL
počinje najčešće s 'http://' (ili s ./ u slučaju specificiranja relativne adrese), dok se JavaScript
fragment označava javascript: specifikatorom pseudoprotokola:
<a href="javascript: alert('klik!');"> hyperlink </a>
JavaScript u browser-ima u kojim je isključen ili nije podržan
Pojedini browser-i, naročito na mobilnim uređajima, mogu biti implementirani bez podrške
za JavaScript. Osim toga, korisnik uvijek ima mogućnost isključiti izvršavanje JavaScripta i u
svim browser-ima. O tome treba uvijek voditi računa, te na inicijalnom učitavanju stranice
detektirati takvu situaciju i na prikladan način obavijestiti korisnika, jer je standardno
ponašanje browser-a u tom slučaju takvo da bi generirao seriju grešaka.
Za tu svrhu, browser-i mahom podržavaju tag <noscript>..</noscript>, čiji će sadržaj biti
interpretiran samo u slučaju da JavaScript nije podržan ili je isključen od strane korisnika.
Unutar <noscript> tagova tako se može navesti standardni HTML paragraf koji obavještava
korisnika da je za korištenje web stranice potrebno imati podržan ili uključen JavaScript.
W3C Document Object Model (W3C DOM)
U drugoj polovici 1990-ih, proizvođači browser-a su obogaćivali DHTML document-model u
svakoj novoj verziji svog proizvoda, dodajući mu sučelje za pristup sve većem broju tipova
elemenata. Zbog tadašnje sve izraženije kompetititvnosti na tržištu browser-a i težnjom
svakog proizvođača za globalnom dominacijom, nova programska sučelja i korisnički
događaji dodavani su neselektivno, bez konzultacija s web zajednicom, nezavisnim udrugama
ili konzorcijima. Cilj proizvođača browser-a bio je pružanje maksimalnog broja novih
mogućnosti kako bi se prestiglo konkurenciju i na taj način nametnulo svoje rješenje kao web
standard. Nažalost, to je neminovno dovelo do problema nekompatibilnosti.
Unatoč neospornoj činjenici da je taj problem bio rješiv detekcijom browser-a i verzije iz
JavaScripta, pa u zavisnosti od rezultata izvršavanjem različitog koda za različite browser-e,
eksponencijalno bi rasla kompleksnost i nepreglednost koda, te u konačnici cijena razvoja i
naročito održavanja.
Razvojnim timovima za web sadržaje takva je situacija postala neodrživa, pa im je preostalo
odustajanje od korištenja najnovijih mogućnosti pojedinih browser-a ma koliko one bile
izazovne, te zadržavanje na samo onim programskim sučeljima koja su zajednička u
najzastupljenijim browser-ima. Time je, naravno, dovedena u pitanje svrhovitost svih
poboljšanja novih verzija bilo kojeg browser-a.
Krajem 1998. W3C konzorcij objavljuje prvu specifikaciju standardizacije pristupa strukturi
XML dokumenata pod nazivom "DOM Level 1", koji osim dohvata elemenata uključuje i
naknadne izmjene bilo kojeg dijela dokumenta, dodavanje i brisanje elemenata. Obzirom da
je struktura elemenata u HTML dokumentu na sličan način hijerarhijski organizirana kao i
XML, primjena istog standarda na web sadržaje bila je logična. U narednih nekoliko godina
proizvođači browser-a prihvatili su W3C DOM, kao i nekoliko naknadnih dopuna standarda.
DOM je platformom i programskim jezikom neovisno generičko sučelje koje dopušta
programima i skriptama dinamički pristup i ažuriranje sadržaja, strukture i stilova
dokumenata. Osigurava standardni set objekata za reprezentaciju XML i HTML dokumenata,
standardni model kombiniranja ovih objekata i standardno sučelje za pristup i manipulaciju
njima. [13]
Prihvaćanjem DOM sučelja kao univerzalnog, generičkog programskog sučelja od strane
proizvođača browser-a, stekli su se uvjeti za kreiranje dinamičkog sadržaja koji se izvršava
na predvidljiv i jednak način neovisno o browser-u.
Struktura W3C DOM dokumenta
DOM dokument je stablasto strukturirana i objektno orjentirana apstrakcija HTML
dokumenta, odnosno svih njegovih elemenata. Browser interno vodi paralelno mapiranje web
dokumenta i DOM dokumenta, na način da inicijalno nakon učitavanja web stranice stvori
internu DOM reprezentaciju web dokumenta, te oba dokumenta čuva sinkronizirane obzirom
na sve naknadne izmjene. S aspekta programera, DOM dokumet je sučelje koje omogućava
programabilnu manipulaciju sadržajem web stranice nakon njezinog učitavanja u browser.
Korjenski element DOM dokumenta je član globalnog JavaScript objekta, dakle
predefinirana globalna varijabla naziva document, i faktički predstavlja <html> tag, web
dokumenta. DOM elementi su generička reprezentacija ne samo HTML tagova, nego i
tekstualnih sadržaja pojedinih tagova, odnosno teksta koji se može pojaviti unutar taga, ali i
između elemenata-djece. Svaki elementarni dio HTML koda, pa čak i komentar ili fragment
JavaScript koda reprezentiran je jednim DOM elementom. Atributi HTML elementa
pojavljuju se unutar DOM dokumenta također kao generički DOM elementi, jedino je njihov
kontekst, odnosno način dohvata nešto drugačiji.
Zbog toga svaki HTML DOM element ima svostvo nodeType, s mogućim vrijednostima: 1
za tag, 2 za atribut, 3 za tekst, 8 za HTML komentar itd.
Svojstva DOM elemenata
Standardna svojstva DOM elemenata
Svi HTML DOM elementi imaju svojstva kojima su karakterizirane osnovne osobine
elementa:
Svojstva id i nodeName odgovaraju HTML atributima id i name
tagName sadrži naziv HTML taga, a title naslov
nodeType obilježava vrstu DOM elementa, ima vrijednost 1 za HTML tag, 2 za
atribut, 3 za tekst, itd.
nodeValue sadrži vrijednost elementa; primjerice to može biti vrijednost <input> taga
odnosno sadržaj edit-boxa, ili tekst sadržan unutar sadržaj paragrafa - <p> taga (u tom
slučaju radi se o elementu-djetetu <p> taga sa svojstvom nodeType vrijednosti 3)
Postoji dodatno svojstvo innerHTML koje nije unutar W3C specifikacije, ali je
podržano u svim browser-ima. Njegov sadržaj je kompletan tekstualni oblik sadržaja
HTML elementa, pa je pomoću njega moguće na efikasan način izmijeniti
kompleksniji sadržaj HTML taga.
Atributi
Svi atributi pojedinog HTML DOM elementa sadržani su u nizu attributes, koje je svojstvo
samog DOM elementa. Svaki atribut je opet DOM element s relevantnim svojstvima
nodeName i value koji odgovaraju nazivu HTML atributa i pripadajućoj vrijednosti HTML
atributa.
Niz attributes je enkapsuliran unutar NamedNodeMap objekta. Time on ima proširenu
funkcionalnost klasičnog niza, te je pojedinim atributima moguće pristupiti ne samo putem
cjelobrojnog indeksa, nego i metodom getNamedItem(<naziv atributa>), a na raspolaganju su
i metode za dodavanje ili brisanje postojećih atributa.
Stilovi
Svi stilovi primijenjeni na konkretnom HTML elementu u DOM reprezentaciji elementa
nalaze se u svojstvu style. Svojstvo style je objekt sa svakim primijenjenim stilom kao
posebnim svojstvom i pripadajućom vrijednošću.
Nazivi podsvojstava stilova unutar DOM elementa style potpuno odgovaraju nazivima CSS
svojstava, pri čemu se primjenjuje nekoliko jednostavnih pravila. Nazivi CSS svojstva su
složenice engleskih riječi odvojenih znakom -. DOM ekvivalent također je složenica istih
riječi, s tom razlikom što nema separator znaka -, nego svaka riječ osim prve počinje velikim
slovom. Primjerice, CSS svojstvo border-left-width u DOM elementu ima naziv
borderLeftWidth.
Osim svojstva style, DOM element ima i svojstvo className, koje sadrži naziv CSS-klase
pripadajućeg HTML elementa.
Vizualna svojstva elementa
Vizualna svojstva DOM elemenata sadrže kalkulirane vrijednosti nakon renderiranja web
stranice unutar browser-a, i kao takva se ne mogu mijenjati iz skriptnog jezika. Njihove
vrijednosti izražene su u pikselima, i odražavaju trenutno stanje elementa u web stranici.
Važno je primijetiti da se te vrijednosti potencijalno mogu promijeniti svakom promjenom
veličine browser-a.
scrollLeft, scrollTop, scrollHeight i scrollWidth vezani su za elemente koji imaju scrollbar, te
određuju trenutnu scroll poziciju, odnosno ukupne dimenzije elementa zajedno s nevidljivim
dijelom do kojeg se dolazi putem scrollbar-a.
Svojstva clientWidth i clientHeight sadrže dimenzije vidljivog dijela sadržaja elementa, bez
okvira, margina ili scrollbar-a. Svojstva offsetWidth i offsetHeight sadrže dimenzije vidljivog
dijela sadržaja elementa uključujući okvir (border) i padding, ali bez margine.
Svojstvo offsetParent sadrži roditeljski DOM element u odnosu na kojeg se aktualni element
pozicionira. Kod apsolutnog CSS-pozicioniranja primjerice <div> taga, svi pripadajući
podelementi imaju za svojstvo offsetParent vrijednost upravo tog <div> taga; u suprotnom,
offsetParent je <body> tag. Svojstva offsetLeft i offsetTop određuju poziciju elementa u
odnosu na offsetParent element.
Izuzev scroll svojstava, ostala vizualna svojstva DOM elemenata kalkulirana su u trenutku
renderiranja u browser-u, te se ne mogu mijenjati skriptnim jezikom već samo očitavati.
Referenciranje elemenata web stranice pomoću DOM-a
Stablasta struktura HTML DOM dokumenta omogućava referenciranje pojedinih elemenata
na nekoliko načina, pomoću metoda koje su definirane nad svakim DOM elementom.
Njihova primjena biti će pokazana na primjeru jednostavne HTML stranice:
Klikabilan primjer:
Korjenski objekt document ima definiranu metodu getElementById(strId) pomoću koje se
referencira bilo koji HTML tag unutar web dokumenta, naravno uz uvjet da ima pridodijeljen
atribut id s jedinstvenom vrijednošću.
Svi DOM elementi, uključujući i korjenski document element, imaju svojstvo childNodes. To
svojstvo je collection objekt, vrlo sličan JavaScript nizu (array), koji sadrži sve direktne
elemente-djecu. Važno je primijetiti da između elemenata IN_0 i IN_1, te IN_3 i IN_4
postoje razmaci između tagova (space karakteri i karakteri za novi redak), te da su ti razmaci
također DOM elementi. Naravno, oni se ne vide na web stranici. Primjer upotrebe:
Klikabilan primjer:
Nadalje, osim svojstva childNodes, generički DOM element ima svojstva koja referenciraju
susjedne DOM elemente. Ta svojstva su:
parentNode, za dohvat elementa-roditelja
firstChild i lastChild, za dohvat prvog i zadnjeg elementa-djeteta
previousSibling i nextSibling, za dohvat prethodnog i sljedećeg elementa-brata
Njihovo značenje prikazano primjerom nad istim fragmentom HTML dokumenta:
Klikabilan primjer:
Kako je primjerima pokazano, definiranim svojstvima i metodama može se ostvariti
programska navigacija kroz kompletnu strukturu HTML DOM dokumenta.
Konačno, generički DOM element ima još dvije metode koje olakšavaju navigaciju i pretragu
kroz DOM strukturu:
metoda hasChildNodes() vraća vrijednost true ili false, zavisno od toga je li konkretan
DOM element roditelj drugim DOM elementima
getElementsByTagName(strTagType), kojom se dobiva collection objekt sa svim
onim elementima-nasljednicima (dakle, ne samo direktnim elementima-djecom)
kojima vrsta HTML taga odgovara zadanom parametru. Na primjer, pozivom te
metode parametrizirane stringom "span", moguće je dohvatiti sve <span> tagove koji
se nalaze unutar pojedinog DOM elementa.
Programabilno mijenjanje sadržaja web dokumenta
Nad objektom document definirane su dvije metode za programabilno kreiranje novih DOM
elemenata:
createElement('naziv_Taga'), kojom se kreira HTML DOM element bilo koje vrste.
createTextNode('tekstualni_sadržaj'), kojom se kreira tekstualni sadržaj, primjerice
sadržaj koji se nalazi unutar <p>..</p> taga.
Nad samim DOM elementom definirana je metoda cloneNode(boolCopyChildren), kojom se
kreira istovjetna kopija elementa. Opcionalni parametar je tipa boolean, i njime se specificira
da li kopirani DOM element sadrži i sve elemente-djecu originalnog elementa ili ne.
Dodavanje kreiranih elemenata u strukturu dokumenta uvijek se izvršava nad nekim
postojećim elementom, kojem novi element postaje element-dijete. Za tu svrhu predviđene su
dvije metode:
appendChild(elementNovi). Novi element će biti dodan kao dijete elementa nad kojim
je metoda pozvana, i to na kraj liste postojećih elemenata-djece (ako ih ima).
insertBefore(elementNovi,elementPostojeci). Novi element će biti dodan kao dijete
elementa nad kojim je metoda pozvana, i to na mjestu prije postojećeg djeteta
navedenog u drugom parametru.
Za brisanje i zamjenu elemenata predviđene su metode removeChild(elementKojiSeBrise) i
replaceChild(elementNovi, elementPostojeci). Primjer programabilnog mijenjanja sadržaja
web dokumenta:
Klikabilan primjer:
DOM eventi
DOM definira standardno programsko sučelje za kontrolu događaja (events) unutar web
dokumenta, što osim manipulacije sadržajem čini drugi ključni elemenat dinamičkog web
sadržaja. Za svaki event moguće je programski implementirati proizvoljnu akciju koja će se
desiti kada god se konkretan event dogodi.
Kada browser detektira određeni event, predefinirana funkcija za obradu događaja (event
handler) unutar browser-a izvršiti će standardnu posljedičnu akciju. Tako, primjerice,
predefinirani event handler za klik mišem u područje editbox-a, za posljedicu ima
postavljanje fokusa u taj editbox. Implementiranjem zamjenskog event handler-a pomoću
skriptnog jezika, programer može potpuno promijeniti standardno ponašanje ili samo
pokrenuti neku akciju i nakon toga prepustiti kontrolu predefiniranom event handler-u.
Primjer jednostavnog event handler-a, u kojem se boja pozadine editbox-a mijenja klikom na
editbox, pri čemu funkcionalnost editobx-a ostaje nepromijenjena:
<script type="text/javascript">
function handler(e)
{
var element = getElementById("idInput");
element.style.backgroundColor='cyan';
}
<body>
<input id="idInput" type="text" onclick="handler();" />
</body>
Programski definiran event handler će po završetku izvršavanja pozvati predefinirani,
browser-ov event handler. U ovom slučaju, editbox će postati fokusirani element s aktivnim
kursorom. To je moguće spriječiti tako da programski event handler vrati vrijednost false.
function handler()
{
// ...
// funkcionalnost event handler-a
// ...
return false;
}
Obzirom da bi implementacija zasebne funkcije za svaki HTML element rezultirala
mnoštvom vrlo sličnih funkcija, očigledna je potreba za mogućnošću implementacije
višenamjenskih event handler-a, odnosno skriptnih funkcija u kojima će se procesirati event-i
za više različitih HTML elemenata. Za to su nužne dvije informacije:
vrsta samog eventa koji se obrađuje
HTML element nad kojim se dogodio event
Te informaciju su zapisane u tzv. event-objektu. Event-objekt je u većini browser-a
automatski generirana varijabla naziva event i ona je parametar event handler funkcije.
Event-objekt u svojim svojstvima sadrži mnoštvo informacija o samom eventu (vrsta eventa,
egzaktna koordinata, pritisnuta tipka, da li je bila pritisnuta shift ili alt tipka za vrijeme
eventa, itd).
Event objekt i njegova svojstva, kao i informacija o elementu nad kojim se event dogodio
nažalost nisu potpuno kompatibilni između različitih browser-a, ali je moguće pokriti sve
slučajeve tehnikom ispitivanja definiranosti pojedinih svojstava. Na primjer, Internet
Explorer ne generira event-objekt kao automatski parametar event handler-a, nego kao
globalni JavaScript objekt naziva event.
Sljedećim primjerom pokazana je implementacija ponašanja unutar iste event handler
funkcije:
za dva različita eventa (klik mišem i pritisak na tipkovnicu)
nad dva različita HTML elementa
kompatibilno s popularnim browser-ima
<script type="text/javascript">
function handler(e)
{
// ---- Dohvat event objekta
if (!e)
e = window.event; // Internet Explorer
// ---- Dohvat elementa nad kojim se dogodio event
var element;
if (e.srcElement)
element = e.srcElement; // Internet Explorer
else if (e.target)
element = e.target; // ostali browseri
if (element.nodeType == 3)
element = element.parentNode; // Safari browser
// ---- Generiranje poruke: vrsta eventa, opcionalno i pritisnuta
tipka
var message = "ELEMENT: " + element.id + ", EVENT: " + e.type;
if( e.type == "keypress" )
message += "; TIPKA=" + String.fromCharCode(e.charCode);
// ---- Ispis poruke
alert( message );
}
</script>
<body>
<input id="idInput1" type="text" onclick="handler(event)"
onkeypress="handler(event)"/>
<br>
<input id="idInput2" type="text" onclick="handler(event)"
onkeypress="handler(event)"/>
</body>
Vrste DOM evenata
Eventi se ugrubo mogu podijeliti u tri grupe: korisničke evente, logičke evente i evente
browser-a.
Korisnički eventi
Korisnički eventi su posljedica elementarnih akcija korisnika putem miša ili tipkovnice kao
što su: pokret mišem, klik mišem, pritisak tipke na tipkovnici, itd. Vezani su za specifični,
pojedini element stranice.
Logički eventi
Logički eventi se događaju pri promjeni statusa ili stanja pojedinog HTML elementa,
najčešće kao indiretktna posljedica neke korisnikove akcije; primjerice 'element dobiva
fokus', 'forma se šalje na obradu', 'tekst je selektiran' itd.
Eventi browser-a
Eventi browser-a su događaji vezani uz browser, koji nisu rezultat korisnikove akcije vezane
uz konkretni element. Dešavaju se po kompletiranju pojedinih procesa u pozadini, ili kao
indirektna posljedica promjene stanja browser-a npr: 'dokument je učitan', 'slika je učitana',
'browser napušta stranicu', itd.
Ostali eventi
Osim navedenih evenata, DOM definira i skup evenata koji se događaju svakom promjenom
strukture dokumenta, što se odnosi na programabilne akcije nad dokumentom:
dodavanje novih elemenata
brisanje elemenata
izmjena atributa
izmjena tekstualnog sadržaja elementa
Podrška u browser-ima za te evente je još uvijek nepotpuna, pa oni u ovom dokumentu nisu
obrađeni.
Redosljed evenata nad ugiježđenim elementima
Prilikom ugniježđivanja HTML elemenata, element-dijete zauzima dio prostora elementa-
roditelja, što znači da se oni na tom dijelu web stranice preklapaju. Kada korisnik klikne na to
dijeljeno područje, nad oba HTML elementa će se desiti event click. Moguća su dva pristupa
u redosljedu kojim će se eventi dogoditi; prihvaćeni termini su event-capturing i event-
bubbling, a prikazani su na sljedećoj slici:
Prikaz 15. Mogući
redosljed evenata kod preklopljenih HTML elemenata [14]
Svaki event se uvijek propagira kroz čitav lanac elemenata u hijerarhiji, to jest od korjenskog
document elemnta do krajnjeg HTML elementa u hijerarhiji (ili obratno, zavisno od
implementacije browser-a).
Nažalost, proizvođači browser-a su na različit način pristupili problemu procesiranja evenata
nad ugniježđenim HTML elementima, što predstavlja svojevrsan problem kompatibilnosti
koji i u novijim browser-ima nije u potpunosti riješen. Microsoftov odabir je event-bubbling,
za razliku od većine ostalih proizvođača browser-a koji su se opredijelili za event-capturing.
O tome je potrebno posebno voditi računa pri implementaciji naprednih, visoko sofisticiranih
web stranica.
W3C definira univerzalno ponašanje u kojem se prvo dešava event-capturing, dakle od
dokumenta, preko najstarijeg elementa-roditelja, sve to zadnjeg ugniježđenog elementa u
hijerarhiji, a potom se dešava i event-bubbling, skroz do vrha hijerarhije odnosno samog
dokumenta.
Prikaz 16. Redosljed evenata prema definiciji W3C-a [14]
U event handler-u pojedinog elementa moguće je prekinuti daljnju propagaciju eventa u
event-bubbling sekvenci, pozivom funkcije stopPropagation (odnosno postavljanjem
vrijednosti true za svojstvo cancelBubble u Internet Exploreru). Univerzalno rješenje
pokazano je sljedećim primjerom:
function handlerClick(e)
{
if (!e) var e = window.event; // potrebno u Internet Exploreru
// ...
// funkcionalnost event handler-a
// ...
e.cancelBubble = true; // prekid propagacije za
Internet Exploreru
if (e.stopPropagation) e.stopPropagation(); // prekid propagacije za
ostale browsere
}
Načini implementacije evenata
DOM Level 0
Sve do 2005. godine, tradicionalni model Netscape Navigatora zadržao se u browser-ima kao
najšire prihvaćeni model implementacije programski definiranih evenata. U HTML elementu
se za svaki event pridodjeljuje točno jedan event handler, kojeg je moguće definirati na dva
načina:
Direktnim navođenjem atributa unutar HTML taga, pri čemu naziv atributa odgovara
nazivu eventa s prefiksom 'on' (primjerice, eventu click odgovara naziv atributa
onclick, eventu keypress - onkeypress itd.), a vrijednost atributa omeđena
navodnicima sadrži skriptni kod. Ova metoda korištena ju u prethodnim primjerima.
Dodjelom referenci na skriptne funkcije pojedinim svojstvima DOM elemenata.
Nazivi svojstva koja se odnose na event handler-e potpuno odgovaraju nazivima
atributa kod prvog načina definiranja event handler-a, dakle naziv samog eventa uz
prefiks 'on'. Vrijednost koja se dodjeljuje svojstvu nije string kao u slučaju
dodjeljivanja navođenjem HTML atributa (tj. nije omeđena navodnicima i ne sadrži
oble zagrade). Vrijednost svojstva je referenca na funkciju, što se prema JavaScript
sintaksi navodi kao naziv funkcije, kao da se radi o varijabli.
Ta dva načina su potpuno ravnopravna; primjena jednog ili drugog ima identičan rezultat.
Jedina razlika je u tome što se dodjela iz skriptnog koda svojstvima DOM elemenata dešava
nakon učitavanja stranice i nije dio HTML koda.
Sljedećim primjerom prikazana je dodjela iste event handler funkcije svim <input>
elementima unutar web stranice putem skriptnog koda:
<script type="text/javascript">
function handlerFN(e)
{
// ---- Dohvat event objekta
if (!e)
e = window.event; // Internet Explorer
// ---- Dohvat elementa nad kojim se dogodio event
var element;
if (e.srcElement)
element = e.srcElement; // Internet Explorer
else if (e.target)
element = e.target; // ostali
if (element.nodeType == 3)
element = element.parentNode; // Safari
// ---- Generiranje poruke: vrsta eventa, opcionalno i pritisnuta
tipka
var message = "ELEMENT: " + element.id + ", EVENT: " + e.type;
if( e.type == "keypress" )
message += "; TIPKA=" + String.fromCharCode(e.charCode);
// ---- Ispis poruke
alert( message );
}
function onLoad()
{
var arrInputTagovi = document.getElementsByTagName("input");
for( var i=0; i<arrInputTagovi.length; i++ )
{
// ************ DODJELA EVENT HANDLER-A ************
arrInputTagovi[i].onclick = handlerFN;
arrInputTagovi[i].onkeypress = handlerFN;
}
}
</script>
<body onload="onLoad();">
<input id="idInput1" type="text"/>
<input id="idInput2" type="text"/>
<input id="idInput3" type="text"/>
<input id="idInput4" type="text"/>
<input id="idInput5" type="text"/>
</body>
DOM Level 2
Tradicionalni model implementacije evenata ima nekoliko ograničenja: nije moguće dodijeliti
više ulančanih handler funkcija istom elementu, ili dodijeliti različite handler funkcije
zavisno od smjera propagacije eventa (capturing ili bubbling), ali je dostatan za većinu
uobičajenih primjena.
Naknadno uvedenim modelom od strane W3C-a, za definiranje programabilnih event
handler-a koriste se dvije nove metode nad DOM elementom:
addEventListener('vrsta_eventa', fnHandler, bCapture). Pozivom ove metode, DOM
elementu se dodaje tzv. 'listener' funkcija koja će biti izvršena kada se dogodi
specificirani event. Zadnji parametar je boolean tipa, i određuje da li će listener
funkcija biti izvršena u capturing ili bubbling sekvenci.
removeEventListener('vrsta_eventa', fnHandler), kojom se postojeća listener funkcija
uklanja
Njihovim korištenjem ostvaruje se veća fleksibilnost, jer je pojedinom eventu moguće
dodijeliti više event handler-a, te se mogu definirati različiti handleri za capturing i bubbling
sekvence.
6. AJAX
Definicija i povijest
Ajax je u svojem prvotnom značenju bila kratica od "Asynchronous, JavaScript And XML".
Sam termin je, prema većini izvora, prvi put upotrijebio 2005. godine Jesse James Garret u
svom članku "Ajax: A New Approach to Web applications" zbog potrebe za jednostavnim,
kratkim nazivom, pod kojim kojim bi se podrazumijevale JavaScript skripte izvršavane
unutar browser-a, a koje asinkrono dohvaćaju podatke sa servera u standardiziranom XML
formatu.
U to vrijeme, u web zajednici su se za istu ili sličnu primjenu već kombinirale različite
tehnologije, a koje su i same po sebi pojedinačno brzo evoluirale. Termin Ajax je uskoro
prihvaćnen unutar zajednice, iako se zapravo pod njime ne podrazumijevaju nužno
tehnologije iz koje je sama kratica nastala.
U svome punom smislu, Ajax dakle nije nastao od određenog autora, grupacije ili tržišnog
čimbenika, nego tek kao posljedica prepoznavanja evolucije u primjeni web tehnologija. Ajax
je zbog toga u terminološkom smislu teško precizno definirati. Na stranicama Wikipedije,
termin je definiran ne sljedeći način:
"Ajax, ponekad navođen kao AJAX (kratica od "Asynchronous, JavaScript And XML"), je
grupa međusobno povezanih web tehnologija, koja se primjenjuje na klijentskoj strani, a uz
pomoć koje je moguće kreirati interaktivne i funkcionalno bogate web aplikacije. Primjenom
Ajax-a, web aplikacije mogu dohvaćati sadržaj sa servera asinkrono, u pozadini, bez utjecaja
na trenutni prikaz i ponašanje web stranice. Korištenje Ajax-a je dovelo do povećanja
interaktivnosti i dinamičnosti web stranica, te zbog asinkronosti, i do poboljšane kvalitete
web servisa. Preuzimanje podataka sa servera se najčešće implementira korištenjem
XMLHttpRequest objekta. Unatoč nazivu, upotreba JavaScripta i XML-a zapravo nije nužna,
niti dohvat podataka sa servera nužno mora biti asinkron." [15]
Možda bi približnija bila definicija OpenAjax grupacije:
"Ajax je dizajnerski pristup i skup tehnika kojima se omogućava razvoj visoko interaktivnih
web aplikacija za popularne web browser-e. Ajax, što je kratica od 'Asynchronous, JavaScript
And XML', poboljšava korisnički doživljaj u korištenju web aplikacije, zadržavajući dobre
osobine HTML-a u smislu serverski baziranog smještanja odnosno installiranja aplikacija i
njihovih nadogradnji. Ajaxom se postiže velika sličnost web aplikacija unutar browser-a u
odnosu na desktop aplikacije pomoću tehnika parcijalnog obnavljanja dijelova web stranice
na svaki korisničku akciju, umjesto ponovnog učitavanja cijele stranice. Samo mala količina
podataka u pozadini se izmjenjuje sa serverom, pri čemu aplikacija ostaje potpuno
funkcionalno aktivna za krajnjeg korisnika. Prema tome, Ajax tehnike predstavljaju nastavak
evolucije DHTML-a u cilju produkcije visoko funkcionalnih web aplikacija i web 2.0
sučelja." [16]
MODEL AJAX WEB APLIKACIJA
Suština Ajax pristupa izgradnji web aplikacija jest parcijalno obnavljanje sadržaja stranice i
asinkrona komunikacija sa serverom u što je moguće većoj mjeri. Posljedično, model
programiranja nije nužno vezan uz format podataka (kao što je XML), specifični programski
jezik (kao što je JavaScript), ili specifični komunikacijski mehanizam, a što su u praksi
potvrdili neki produkti:
Google Suggest za Internet Explorer bio je implementiran VBScript-om a ne
JavaScriptom
Većina prometa na GoogleMaps-u su zapravo u formatu GIF bitmapa, a ne XML-a
Većina Gmail-a je bazirana na dohvatu HTML segmenata, a ne XML-a
Osim toga, i neke potpuno druge tehnologije također se i dalje koriste u izgradnji web
aplikacija kada god za to postoje specifične potrebe: Java (asinkroni Java Appleti + XML), ili
Flash (asinkroni ActionScript, SWF). Dakle, postoji izbor različitih tehnologija za
implentaciju Ajaxa od kojih svaka ima prednosti i mane. U nastavku će Ajax biti obrađen na
primjerima JavaScripta i web dokumenata.
Glavna razlika između funkcioniranja klasičnog i Ajax modela aplikacija odnosi se na
interakciju aplikacije i korisničkih akcija, a zorno je prikazana sljedećim dijagramima:
Prikaz 17.
Klasični model web aplikacija: učitava se cijela stranica i komunikacija je sinkrona [17]
Prikaz 18. Ajax
model web aplikacija: parcijalno ažuriranje kroz korisničko sučelje i asinkrona komunikacija
[17]
Umjesto potrebe da korisnik klikne na submit button ili hyperlink svaki put kada želi poslati
zahtjev na server, te nakon toga čeka da server procesira zahtjev i da se cijela stranica
ponovno učita, event handler u JavaScriptu obrađuje samo interakciju s korisnikom, a zahtjev
šalje serveru u pozadini. Odmah po slanju zahtjeva, korisnik može nastaviti interakciju s web
aplikacijom. Server nakon procesiranja šalje rezultirajuće podatke natrag browser-u. U
browser-u se tek tada ponovno generira JavaScript-event da su podaci pristigli. Tu programer
ima mogućnost implementirati event handler, te koristeći mogućnosti DOM dokumenta
skriptnim jezikom obnoviti samo dio sadržaja stranice koji se odnosi na konkretan zahtjev.
XMLHttpRequest objekt
XMLHttpRequest objekt jest predefinirani objekt unutar browser-a namijenjen instanciranju
proizvoljnog broja asinkronih zahtjeva prema serveru, a za kojeg je definirano sučelje prema
skriptnim jezicima unutar browser-a.
Iniciranjem asinkronog HTTP zahtjeva (requesta) prema serveru, tijek izvršavanja skriptnog
koda se nastavlja, a odgovor se obrađuje tek nakon što pristigne; do trenutka pristizanja
odgovora sa servera izvršavanje skriptnog koda unutar web stranice nije zaustavljeno.
Primjerice, lokalni JavaScript kod koji se izvršava u browser-u može odmah nakon slanja
zahtjeva pokrenuti animaciju, promijeniti dio HTML dokumenta ili čak inicirati novi,
paralelni HTTP zahtjev. Dakle, XMLHttpRequest objekt jest srce svake Ajax web aplikacije.
Prvotno razvijen u Microsoft-u, a kasnije implementiran i u Mozilla browser-u,
XMLHttpRequest na kraju je standardiziran od strane W3C konzorcija, te je danas zastupljen
u svim web browser-ima. Unatoč zadržanom nazivu (točnije, varijantama naziva), danas je s
XMLHttpRequest objektom moguć dohvat proizvoljnih tipova podataka (a ne isključivo
XML), te također podržava i neke druge protokole osim HTML-a (file i ftp).
Programsko sučelje XMLHttpRequest objekta sastoji se od samo 6 metoda koje se nad
objektom mogu pozvati, te od 6 svojstava kojima je definiran trenutni status tekućeg HTTP
zahtjeva ili rezultat u slučaju da je zahtjev kompletiran odgovorm sa servera. Tako mali skup
sasvim je dovoljan za kreiranje asinkronih HTTP zahtjeva i obrade odgovora.
Instanciranje XMLHttpRequest objekta
Egzaktna sintaksa instanciranja objekta, pa čak i sam naziv, variraju od browser-a do
browser-a, ali obzirom da je API tj. programsko sučelje objekta identično, može se reći da je
postignut vrlo visok stupanj međusobne kompatibilnosti. U Mozilla Firefox i Apple Safari
browser-ima, te u novijim verzijama Microsoft Internet Explorera, JavaScript objekt se
instancira na sljedeći način:
var req = new XMLHttpRequest();
, dok je primjerice u starijim verzijama Microsoft Internet Explorera interna implementacija
provedena kroz Microsoft-ovu ActiveX tehnologiju, te je samim time i sintaksa drugačija:
var req = new ActiveXObject('MSXML2.XMLHTTP.3.0');
ili, zavisno od verzije Internet Explorer odnosno konkretne ActiveX implementacije:
var req = new ActiveXObject("Microsoft.XMLHTTP");
Rezultat instanciranja je standardni objekt skripnog jezika, u našem slučaju JavaScript objekt.
Metode
XMLHttpRequest objekt ima točno 6 definiranih metoda kojima se kontrolira HTTP zahtjev.
Funkcionalna implementacija tih metoda je naravno skrivena od programera, jer je zavisna od
konkretnog operacijskog sustava i samog browser-a, te nije u domeni samog skripnog jezika.
Dakle, svih 6 JavaScript metoda instanciranog XMLHttpRequest objekta jednostavno
prosljeđuju pozive konkretnoj implementaciji unutar browser-a. Obzirom da se sučelje sastoji
od vrlo malog broja jednostavnih metoda koje su striktno standardizirane, nivo
kompatibilnosti među browser-ima i operacijckim sustavima je visok.
Svojstva
Svojstva XMLHttpRequest objekta sadrže:
status zahtjeva i podake vraćene sa servera: zaglavlje odgovora, standardni HTTP kod
i poruku rezultata, sadržaj odgovora
korisnički definiran event handler. Drugim riječima, moguće je definirati funkciju
koja će se izvršiti na svaku promjenu status zahtjeva, npr: "učitavanje odgovora u
tijeku" ili "HTTP zahtjev i odgovor su kompletirani"
* jedino svojstvo kojeg postavlja korisnik, tj. programer
Parcijalno obnavljanje web stranice
Sljedećim primjerom biti će prikazana primjena XMLHttpRequest objekta na jednostavnoj
web stranici. Stranica se sastoji od editbox-a za unos proizvoljne alfanumeričke vrijednosti,
buttona kojim se inicira Ajax zahtjev prema serveru, te pravokutnika u koji će se
sekvencijalno dodavati odgovori sa servera:
datoteka ajax.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax</title>
<link rel="stylesheet" href="ajax.css" type="text/css">
<script type="text/javascript" src="ajaxJavaScript.js"></script>
</head>
<body>
<input id="idEdit" type="text" name="idEdit" onfocus="fnPorukaGreske('-
');" />
<span id="idError">-</span>
<br>
<input id="idButton" type="button" value="Start Ajax"
onclick="fnStartAjax();" />
<div id="MAIN">
</div>
</body>
</html>
datoteka ajax.css:
#MAIN {
height:200px;
border: 1px solid black;
background-color:#FFFF88;
}
.clsRESPONSE {
margin: 10px;
display: inline-block;
width: 125px;
vertical-align: top;
font-family:sans-serif;
font-size:9pt;
}
Klikabilan primjer:
Klikom na button "Start Ajax" biti će pozvana JavaScript funkcija fnStartAjax(); ona će biti
detaljnije obrazložena kasnije. Generalno, ta funkcija uzima vrijednost unešenu u editbox, te
upućuje HTTP zahtjev prema serveru koristeći URL:
ajaxTest.php?idEdit=<vrijednost>
Serverski kod napisan je u jeziku PHP, sintaksno donekle sličnom JavaScriptu. Sam kod, kao
i tijek izvršavanja je krajnje jednostavan:
Preuzima se string poslan od strane klijenta
Ukoliko unesena vrijednost ne zadovoljava validaciju, jednostavno će biti vraćen
string s porukom o grešci, uz prefiks 0:
U suprotnom, biti će vraćen string identičan ulaznom parametru, uz prefiks 1:. Da bi
što zornije bila pokazana asinkrona priroda Ajax-poziva, serverski kod će vraćati
jedan po jedan karakter, s pauzom od 3 sekunde između svakog vraćenog karaktera.
Drugim riječima, trajanje odgovora biti će razmjerno duljini unešene vrijednosti od
strane korisnika - od nekoliko sekundi pa do pola minute.
datoteka ajaxTest.php:
<?php
// preuzimanje parametra iz HTTP zahtjeva
$in = $_REQUEST['idEdit'];
// validacija unosa - dozvoljeno je između 3 i 10 karaktera
$len = mb_strlen($in);
if( $len < 3 ) die( "0:Potrebno je unijeti minimalno tri karaktera"
);
else if( $len > 10 ) die( "0:Moguće je unijeti maksimalno 10 karaktera" );
// ukoliko je validacija zadovoljena, odgovor započinje prefiksom "1:" ,
nakon
// čega slijedi sekvencijalno čitanje jednog po jednog karaktera iz
stringa-parametra
echo "1:";
for( $ndx=0; $ndx<$len; $ndx++ )
{
flush(); // pražnjenje izlaznog buffer-a -> slanje djelomičnog
odgovora
sleep(3); // pauza od 3 sekunde
echo $in[$ndx]; // ispis sljedećeg karaktera
}
?>
Komunikacija web dokumenta sa serverom odvija se u JavaScriptu, a kompletan kod se
nalazi u datoteci ajaxJavaScript.js. Na početku je nekoliko pomoćnih funkcija koje se koriste
iz preostale dvije glavne funkcije:
datoteka ajaxJavaScript.js - 1. dio
// ------------------------------------------------------------------------
// Pomoćne funkcije
function fnTrenutnoVrijeme()
{ // vraća string s trenutnim vremenom
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if( minutes < 10 ) minutes = "0" + minutes;
if( seconds < 10 ) seconds = "0" + seconds;
var strTime = hours + ":" + minutes + ":" + seconds;
return strTime;
}
function fnKorektanOdgovor( req )
{ // vraća boolean vrijednost da li je odgovor korektan za ispis
if( req.responseText.length < 3 )
return false;
else
return req.responseText.substr(0,2) == "1:";
}
function fnPorukaGreske( msg )
{ // poruku greške prikazuje kao saržaj taga [idError]
document.getElementById("idError").innerHTML = msg;
}
function fnKreirajTag( txt )
{ // kreira DIV tag, s tekstualnim sadržajem
var divResult = document.createElement("DIV");
var textNew = document.createTextNode(txt);
divResult.style.backgroundColor = "white";
divResult.appendChild( textNew );
return divResult;
}
Funkcija fnObradaOdgovora() se poziva od strane browser-a na svaku promjenu statusa
pojedinog XMLHttpRequest objekta, odnosno svakog pojedinog Ajax zahtjeva:
datoteka ajaxJavaScript.js - 2. dio
// ------------------------------------------------------------------------
// AJAX obrada odgovora
function fnObradaOdgovora( req )
{
switch( req.readyState )
{
case 2: // LOADED: pristiglo zaglavlje odgovora
if( !req.elementDiv )
{
var divMessage = fnKreirajTag( "<..odgovor u tijeku..>");
req.elementDiv = document.createElement("DIV");
req.elementDiv.className = "clsRESPONSE";
req.elementDiv.appendChild(divMessage);
document.getElementById("MAIN").appendChild(req.elementDiv);
}
break;
case 3: // INTERACTIVE; pristigao djelomičan odgovor
if( !fnKorektanOdgovor(req) )
break;
// Prva dva karaktera u odgovoru su prefiks "1:"
var newlyArrivedText = req.responseText.substr( 2 );
var divMessage = fnKreirajTag( fnTrenutnoVrijeme() + " - " +
newlyArrivedText );
req.elementDiv.insertBefore( divMessage,
req.elementDiv.lastChild );
break;
case 4: // COMPLETED; odgovor kompletiran
if( fnKorektanOdgovor(req) )
{
var divMessage = fnKreirajTag( "[odgovor kompletiran]" );
divMessage.style.backgroundColor = "lime";
req.elementDiv.replaceChild( divMessage,
req.elementDiv.lastChild );
}
else
{
// Prva dva karaktera u odgovoru su prefiks "0:", ostatak
je poruka greške
document.getElementById("MAIN").removeChild(req.elementDiv);
fnPorukaGreske( "* " + req.responseText.substr(2) );
}
break;
}
Obzirom da u browser-u u isto vrijeme može biti aktivno više XMLHttpRequest objekata,
funkcija je pozvana s parametrom req, a to je upravo onaj XMLHttpRequest objekt na koji se
promjena statusa odnosi. Funkcija obrađuje sljedeće promjene statusa:
Inicijalni odgovor sa servera, tj. vraćanje zaglavlja odgovora, kada se unutar glavnog
(žutog) <div> taga kreira manji pravokutnik, također <div> tag. U njemu se može
pratiti pristizanje odgovora za pojedini konkretan zahtjev.
Svako pristizanje djelomičnog odgovora sa servera rezultira kreiranjem dodatne linije
unutar manjeg pravokutnika s ukupnim odgovorom koji je do tada pristigao.
Po kompletiranju cijelog odgovora (nakon što je vraćen i zadnji karakter), klijentski
JavaScript kod dodaje string "[odgovor kompletiran]".
Važno je uočiti da se pri kreiranju manjeg pravokutnika, objekt req proširuje sa svojstvom
elementDiv, (mogli smo ga naravno nazvati bilo kako), čija je vrijednost DOM element
upravo kreiranog <div> taga za manji pravokutnik. Na taj način postignuto je svojevrsno
vezanje novokreiranog DOM elementa za konkretan XMLHttpRequest objekt. Tako pri
svakom sljedećem asinkronom pozivu od strane browser-a, funkcija može nastaviti koristiti
upravo taj DOM element, vezan za trenutno obrađivani XMLHttpRequest objekt.
Funkcija fnStartAjax() se poziva kada god korisnik klikne na button "Start Ajax":
datoteka ajaxJavaScript.js - 3 dio
// ------------------------------------------------------------------------
// AJAX iniciranje zahtjeva
function fnStartAjax()
{
// Preuzimanje vrijednosti iz editbox-a
var value = document.getElementById("idEdit").value;
value = "?idEdit=" + encodeURIComponent(value);
// Neki browseri identične HTTP zahtjeve ne šalju paralelno, nego
sekvencijalno.
// Da bismo izbjegli takvo ponašanje, u URL dodajemo parametar s
trenutnim vremenom
var time = "&time=" + encodeURIComponent((new Date()).getTime());
var url = "ajaxTest.php" + value + time;
// Instanciranje XMLHttpRequest objekta
var req = new XMLHttpRequest();
req.open( "GET", url, true );
req.onreadystatechange = function()
fnObradaOdgovora(req);
};
// Iniciranje HTTP zahtjeva prema serveru
req.send();
// postavljanje fokusa u editbox
document.getElementById("idEdit").focus();
}
U njoj se preuzima vrijednost unešena u editbox, te se generira URL korišten za Ajax poziv.
Tada se kreira nova instanca XMLHttpRequest objekta pomoću koje se inicira HTTP poziv
prema serveru. Tzv. callback funkcija za obradu odgovora specificirana je svojstvom
onreadystatechange.
Unosom različitih vrijednosti, te praćenjem vremenskih točaka u komunikaciji, u primjeru je
vidljivo kako se odvija nekoliko paralelnih zahtjeva i obnavljanja sadržaja stranice. Iako
pojedini zahtjevi traju i nekoliko desetaka sekundi, korisnik nesmetano nastavlja koristiti web
stranicu:
Klikabilan primjer:
Arhitektura Ajax aplikacija
S askpekta arhitekture, klijentski dio Ajax aplikacije sadrži tzv. "Client-Side Ajax Engine", ili
samo skraćeno "Ajax engine". U najužem smislu to je XMLHttpRerquest objekt.
U nešto širem smislu, radi se o skupu JavaScript funkcija u kojima se enkapsulira prihvat i
obrada korisničkih akcija, interna logika međusobnih ovisnosti pojedinih dijelova web
stranica, te njihova komunikacija sa serverom. Obzirom da navedene osobine odlikuju visoko
funkcionalne web stranice, Ajax engine se ponekad naziva i "Rich Internet Application
Engine", ili skraćeno RIA engine.
Prikaz 19. Arhitektura klasične i Ajax web aplikacije [17]
Klasični model web aplikacija podrazumijeva da je aplikacijska logika implementirana
isključivo na serveru. Ajax model je znatno fleksibilniji, te pruža mogućnost minimalne,
djelomične, ali i gotovo kompletne aplikacijske logike implementirane na klijentu.
Server-centrični koncept težište aplikacijske logike ostavlja na serveru, te se Ajax koristi
isključivo za validaciju na strani servera, te parcijalno obnavljanje sadržaja web stranice.
Takve aplikacije nazivaju se "Thin" ili "Light", odnosno "lagane" aplikacije.
Ukoliko se većina aplikacijske logike izvršava na klijentu, govorimo o klijent-centričnom
konceptu, te "Rich", odnosno "bogatim" klijentskim aplikacijama. Njihove prednosti su:
rasterećenje serverskih resursa
bolje performanse i općenito bolji korisnički doživljaj
manja osjetljivost na nestabilnu internet konekciju
veća efikasnost u početnim fazama razvoja
No treba biti svjestan činjenice da integracija aplikacijske logike na klijentskoj strani briše
jasno definiranu granicu između prezentacije i programske logike. Samim time, povećanjem
kompleksnosti aplikacije klijentski JavaScript/HTML kod daleko je teže proširivati, a
naročito održavati.
Zbog toga je pri dizajniranju Ajax aplikacija najveći izazov upravo u pronalaženju pravog
omjera između klijenstkog i serverskog dijela aplikacijske logike - onog koji najbolje
odgovara ciljanom produktu.
Prikaz 20. Različit stupanj implementacije aplikacijske logike u klijentu [18]
Postojeća ograničenja i budućnost Ajaxa
Određeni broj problema koji su postojali unutar Ajax paradigme rješavan je "u tijeku",
proširivanjem korištenih tehnika ili primjenom nekih parcijalnh rješenja koja su se zbog
efikasnosti, ili naprosto nepostojanja kvalitetnijeg rješenja unutar postojećih okvira, sama po
sebi nametnula. Često su izolirani slučajevi programerskih trikova zbog brzog širenja
informacija unutar web zajednice ostajali prihvaćeni kao svojevrsni standard. Unatoč
prevladavanju pojedninih prepreka, za ta rješenja se ne bi moglo reći da su konceptualno
zadovoljavajuća, ali su svakako barem privremeno prihvatljiva jer su smanjila jaz između
rastućih potreba i objektivnih ograničenja. Nekoliko primjera:
Dinamički web sadržaj onemogućuje korisnika da bookmark-ira konkretna stanja
pojedine stranice. Rješenje ovog problema najčešće se implementira pomoću
fragment-indentifikatora ('#'). Drugim riječima, nakon uspješno izvršenog Ajax
ciklusa, na trenutni URL stranice može se dodati suffix koji počinje ASCII
karakterom '#', a slijedi ga proizvoljni string koji može označavati trenutno stanje
stranice. Takav URL korisnik može bookmark-irati. Nravno, potrebno je dodatno
implementirati i korektno procesiranje tog sufixa kada korisnik aktivira neki ranije
spremljeni bookmark (često se taj suffix naziva 'anchor portion of the URL', a
osnovna namjena mu je zapravo sasvim drugačija i odnosi se na HTML).
Stranice čiji se sadržaj dinamički kreira nakon svakog Ajax zahtjeva ne mogu se
registrirati kod browser-ovog sustava za praćenje povijesti posjećenih stranica. Zbog
te činjenice korisnik koji bi se nakon nekoliko akcija želio vratiti korak unazad (na
stanje stranice koje je bilo prije njegove posljednje akcije), to ne bi mogao putem
'Back' buttona na browser-u. Pritisak na 'Back' button bi ga vratio na zadnju potpuno
učitanu stranicu, što faktički znači na prethodno posjećeni web-site tj. na skroz drugu
domenu. Rješenje uključuje metodu iz prethodnog primjera vezanog uz bookmark-e,
uz dodatni nevidljivi IFrame objekt koji prati izmjenu glavnog URL-a, kopira ga i
aktivira kao svoj URL, te time forsira pamćenje URL-a u browser-ovoj povijesti
stranica.
Browser-i koji ne podržavaju JavaScript ili XMLHttpRequest, ili kojima je JavaScript
isključen, neće moći uopće korisititi web-site baziran an Ajaxu. Dio problema je
srećom riješen samom činjenicom da danas (što nije bio slučaj pred samo nekoliko
godina) čak i mali, mobilni uređaji uglavnom podržavaju JavaScript i
XMLHttpRequest. No uvijek treba voditi računa i o toj mogućnosti, te na inicijalnom
učitavanju stranice detektirati takvu situaciju i na prikladan način obavijestiti
korisnika ili mu ponuditi barem osnovnu funkcionalnost site-a paralelnom verzijom
koja ne koristi Ajax.
Ostaju, međutim, i dalje neki značajni problemi koji barem za sada ne mogu biti u potpunosti
riješeni unutar Ajax-a:
funkcioniranje aplikacije na nepouzdanoj vezi zbog povremenog offline-stanja,
naročito (ali ne i isključivo) na mobilnim uređajima
postojeći standard XMLHttpRequest objekta, a čega se većina browser-a striktno
drže, iz sigurnosnih razloga propisuje "same origin policy" [19], to jest zabranu
pristupa bilo kojoj drugoj domeni osim one s koje je web stranica inicijalno učitana
pristup Ajax-učitavanom sadržaju nije dostupan web-crawlerima. Posljedično, web
site se neće kvalitetno indeksirati od strane tražilica, što u komercijalnom smislu
može imati vrlo neželjene efekte
Većina navedenih problema nije u domeni paradigme Ajax-a, nego je naprosto posljedica
postojećih web standarda. Ipak, standardi su podložni promjenama, te se upravo o nekoliko
ključnih vrlo osjetljivih aspekata izmjene i unaprijeđenja pojedinih standarda vode rasprave u
svim slojevima web zajednice: od nezavisnih developera i manjih kompanija, preko velikih
tržišnih čimbenika i proizvođača browser-a, sve do udruga i akademske zajednice.
Ajax sam po sebi nije cilj, niti konačni oblik funkcioniranja web aplikacija, nego jedan od
vodećih indikatora smjera u kojem će web evoulirati.
7. ZAKLJUČAK
Web dokumenti su u svojim počecima rješavali jednostavnu potrebu za efikasnom
razmjenom informacija unutar akademske zajednice. Lako dostupni i međusobno povezivi
dokumenti uskoro su pokazali daleko širi potencijal, a razvojem internetske infrastrukture
postajali su sve pristupačniji i sve korišteniji. Odvajanjem sadržaja web dokumenata od
prezentacije, a kasnije i omogućavanjem programabilnog sadržaja kroz skriptne jezike, web
dokumenti postaju interaktivni, te se počinju razvijati u web aplikacije – aplikacije koje se
izvršavaju na serveru, a browser koriste kao jedino sučelje prema korisniku. Primjena Ajax-a
dodatno je uvelike unaprijedila web aplikacije, a u širem smislu moglo bi se ustvrditi da je
imala ključan utjecaj na razvoj web-a uopće. U samo nekoliko godina desio se evolucijski
skok kojim su se web aplikacije kvalitetom korisničkog doživljaja značajno približile desktop
aplikacijama. Pri tome su zadržale sve prednosti serverski baziranog koncepta, korištenja
interneta kao globalno dostupnog medija za prijenos podataka, te browser-a kao jedine
potrebne komponente instalirane na korisničkom računalu.
Desktop aplikacije često su limitirane na jednu platformu zbog čega dolazi do štetne tržišne
fragmentacije. Prilagodba različitim operacijskim sustavima ili primjerice sve prisutnijim
malim mobilnim uređajima izuzetno je skupa i često neisplativa. Kod web aplikacija taj
problem jednostavno ne postoji - browser je jedina platforma, te su u najgorem slučaju za
specifične uređaje potrebne tek manje prilagodbe. Korisnik ima potpunu slobodu izbora
hardware-a, operacijskog sustava i browsera.
Na području specijaliziranih poslovnih rješenja i aplikacija opće namjene u većim
organizacijama, klasični desktop software-i zahtijevaju nerijetko skup proces same
instalacije, te naknadnog verzioniranja. Ispravljanje grešaka nakon što je desktop aplikacija
već u upotrebi, razne nadogradnje prema novim zahtjevima, nužnost podrške korisnicima za
starije verzije, te rješavanje niza problema koji mogu nastati korištenjem različitih verzija
stvaraju dodatne troškove i čine životni vijek desktop rješenja skupim. Web aplikacije gotovo
da nemaju tih troškova - u svakom trenutku svi koriste identičnu, zadnju verziju.
Tržišni potencijal web aplikacija neusporedivo je veći od desktop aplikacija jer su instantno
dostupne svugdje, na svakom računalu sa internet vezom, neovisno o operacijskom sustavu ili
hardware-skom okruženju. Danas gotovo da i nema područja desktop aplikacija opće
namjene za koje ne postoji web-bazirani ekvivalent: od napredne obrade teksta, tabličnih
kalkulacija i kreiranja prezentacija, email-a i instant-messaging komunikacije, pa sve do
obrade multimedijalnih sadržaja.
Budućnost razvoja masovne primjene informacijskih tehnologija možda najbolje ilustrira
detalj izrazite ekspanzije tržišta netbooka često ograničenih hardware-skih resursa, što
ukazuje na imperativ korisnika za stalnom dostupnošću javnim i privatnim sadržajima. U
smislu mobilnosti i dostupnosti sadržaja 'uvijek, svugdje i sa svakog računala', desktop
aplikacije i podaci na lokalnom računalu naprosto su potpuno nepraktični.
Web aplikacije donijele su i neke potpuno nove aspekte masovne upotrebe informacijskih
tehnologija: socijalno umrežavanje, svakodnevnu poslovnu i profesionalnu kolaboraciju
neovisno o lokaciji, kreiranje i obogaćivanje sadržaja ne samo od strane pružatelja usluge
nego i samih korisnika, potpuno novo područje marketinga kroz mogućnost besplatnog
korištenja, itd.
Budući da je razvoj opisanih tehnologija izrazito aktivan, web zajednica kontinuirano radi na
unapređenju postojećih standarada i razvoju novih rješenja, može se reći da su promjene u
smjeru 'cloud computing' mreža i web-centričnih aplikacijskih rješenja tek počele.
Klijentske web tehnologije opisane ovim radom predstavljaju temelj za izgradnju modernih,
visoko sofisticiranih web aplikacija, a zadržale su osnovne ideje začetnika web-a: nevlasnički
formati i otvoreni standardi, kompatibilnost i dostupnost sa proizvoljnog hardware-a i
software-a i interoperabilnost. Sve su to razlozi široke prihvaćenosti i dominacije opisanih
tehnologija. Njihovu budućnost u razvoju standarda i dalje će karakterizirati nevlasnička
otvorenost, slobodna razmjena ideja, te doprinos svih segmenata web zajednice.
8. LITERATURA
1. Krusha, Edmond; Barbir, Ines; Kardum, Mladen; Haraminčić, Dalibor; Kralj, Damir:
"
Tim Berners-Lee 'Surfing the network' ", 3.7.2009.
2. Berners-Lee, Tim: "Information Management: A Proposal", 7.7.2009.
3. Jacobs, Ian: "About the World Wide Web Consortium (W3C)", 8.7.2009.
4. W3Schools: "HTML Tutorial", 10.7.2009.
5. W3C: "XHTML™ 1.0 The Extensible HyperText Markup Language (Second
Edition)", 18.10.2009.
6. Wright, Tim: "HTML5 and The Future of the Web", 12.8.2009.
7. W3C: "CSS Tutorial", 31.10.2009.
8. Klemm, Benjamin: "CSS Co., Ltd.", 13.9.2009.
9. Stoltz, Eric: "Under the Sea!", 13.9.2009.
10. Zakas, Nicholas C.: "History and evolution of Javascript", 30.12.2009.
11. W3C: "Web Content Accessibility Guidelines 1.0", 8.8.2009.
12. Flanagan, David: "JavaScript: The Definitive Guide, 4th Edition", 12.8.2009.
13. W3C: "Document Object Model (DOM) Requirements", 15.8.2009.
14. Huang, Vivian: "The DOM Event Model Basic", 18.3.2010.
15. Wikipedia: "Ajax (programming)", 19.8.2009.
16. OpenAjax Alliance: "Introducing Ajax and OpenAjax", 19.8.2009.
17. Wei, Coach K.: "AJAX: Asynchronous Java + XML?", 20.12.2009.
18. OpenAjax Alliance: "The characteristics of Ajax applications", 14.2.2010.
19. Wikipedia: "Same origin policy", 22.8.2009.