Sadržaj

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.

UVOD
HYPERTEXT MARKUP LANGUAGE (HTML)
CASCADING STYLE SHEETS (CSS)
JAVASCRIPT
- Povijest JavaScripta
- Sintaksa i sematika JavaScripta
DINAMIKA I INTERAKTIVNOST WEB SADRŽAJA
AJAX
ZAKLJUČAK
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 (), 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:

Slika - Primjer klikabilnog područja unutar slike

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:miki.nosonja@gmail.com", 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

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.
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>.
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>).
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>').
Vrijednosti atributa moraju biti u navodnicima. Ovo pravilo vrijedi i za numeričke vrijednosti atributa. Dakle mora se pisati: <td rowspan="3">.
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"/>.
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:

Slika - Tablica za eksplicitno zadavanje dimenzija

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:

Slika - Tablica unutarnjeg razmak i margina

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.

Slika - Tablica za pseudoklase i presusoelemente

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:

Slika - Primjer različitog pozicioniranja

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:
- pomoću 'link' taga unutar zaglavlja HTML dokumenta
  
  Prikaz 10. Sintaksa external implementacije putem linka
- 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:

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

Slika - Tablica ključnih riječi JavaScripta

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

Slika - Tablica s primjerima naredbi za kontrolu toka programa

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&lt;y" );
//       s sadrži: "http://irenaholjevac.com?p1=AB%20C%C4%8C%C4%86&p2='x%3Cy"

Konverzija tipova podataka

Slika - Tablica za konverziju 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

Slika - Struktura globalnog JavaScript objekta u browser-u

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:

Slika - Primjer za DOM (sl.1 cisti HTML)

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:

Slika - Primjer za DOM (sl.2 dinamičko popunjavanje)

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:

Slika - Primjer za DOM (sl.3 dinamičko popunjavanje2)

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:

Slika - Primjer za DOM - programabilno mijenjanje sadržaja

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.

Slika - Različiti stupnjevi implementacije aplikacijske logike

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

Krusha, Edmond; Barbir, Ines; Kardum, Mladen; Haraminčić, Dalibor; Kralj, Damir: "
Tim Berners-Lee 'Surfing the network' ", 3.7.2009.
Berners-Lee, Tim: "Information Management: A Proposal", 7.7.2009.
Jacobs, Ian: "About the World Wide Web Consortium (W3C)", 8.7.2009.
W3Schools: "HTML Tutorial", 10.7.2009.
W3C: "XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)", 18.10.2009.
Wright, Tim: "HTML5 and The Future of the Web", 12.8.2009.
W3C: "CSS Tutorial", 31.10.2009.
Klemm, Benjamin: "CSS Co., Ltd.", 13.9.2009.
Stoltz, Eric: "Under the Sea!", 13.9.2009.
Zakas, Nicholas C.: "History and evolution of Javascript", 30.12.2009.
W3C: "Web Content Accessibility Guidelines 1.0", 8.8.2009.
Flanagan, David: "JavaScript: The Definitive Guide, 4th Edition", 12.8.2009.
W3C: "Document Object Model (DOM) Requirements", 15.8.2009.
Huang, Vivian: "The DOM Event Model Basic", 18.3.2010.
Wikipedia: "Ajax (programming)", 19.8.2009.
OpenAjax Alliance: "Introducing Ajax and OpenAjax", 19.8.2009.
Wei, Coach K.: "AJAX: Asynchronous Java + XML?", 20.12.2009.
OpenAjax Alliance: "The characteristics of Ajax applications", 14.2.2010.
Wikipedia: "Same origin policy", 22.8.2009.