SVEUILITE/ UNIVERZITET VITEZ U TRAVNIKU FAKULTET POSLOVNE INFORMATIKE U TRAVNIKU TRAVNIK

WEB PROGRAMIRANJE NA STRANI KLIJENTA

SEMINARSKI RAD

Predmet: Mentor: Asistent: Student: Broj indeksa: Smjer:

Osnove web tehnologija doc. dr. Muharem Kozi Salim abi Ahmet Hadijusufovi 0044-10/VIT Informacione tehnologije

Travnik, novembar 2011.

SVEUILITE/ UNIVERZITET VITEZ U TRAVNIKU FAKULTET POSLOVNE INFORMATIKE U TRAVNIKU TRAVNIK

WEB PROGRAMIRANJE NA STRANI KLIJENTA

SEMINARSKI RAD

IZJAVA O ORIGINALNOSTI IZRADE: Ja, Ahmet Hadijusufovi, student Sveuilita/Univerziteta "VITEZ" Travnik, index broj 004410/VIT, odgovorno i uz moralnu i akademsku odgovornost izjavljujem da sam ovaj rad izradio potpuno samostalno uz koritenje citirane literature i pomoi asistenta, odnosno profesora.

Potpis:_________________________

Predmet: Mentor: Asistent: Student: Broj indeksa: Smjer:

Osnove web tehnologija doc. dr. Muharem Kozi Salim abi Ahmet Hadijusufovi 0044-10/VIT Informacione tehnologije

Travnik, novembar 2011.

SADRAJ
1. 2. UVOD .................................................................................................... 1 Programiranje za Web ............................................................................ 2 2.1. Osnovni mehanizmi rada weba .......................................................... 2 2.2. HTTP protokol ................................................................................... 3 2.3. Web browser....................................................................................... 4 2.4. Programiranje na strani klijenta ......................................................... 5 2.5. Programiranje na strani servera .......................................................... 6 3. Osnove HTML-a .................................................................................... 8 3.1. HTML / XHTML ............................................................................... 8 3.2. Elementi / Tagovi ............................................................................... 9 3.3. Atributi ............................................................................................... 9 3.4. HTML Layout .................................................................................... 9 4. Osnove CSS-a ...................................................................................... 11 4.1. Cascading Style Sheets ..................................................................... 11 4.2. Identifikatori ..................................................................................... 11 4.3. Klase ................................................................................................. 12 5. Osnove JavaScript-a ............................................................................. 13 5.1. JavaScript ......................................................................................... 13 5.2. Promjenjive ...................................................................................... 13 5.3. Funkcije ............................................................................................ 14 5.4. Klase ................................................................................................. 14 5.4.1. Definiranje klase pomou funkcije ............................................ 15 5.4.2. Definiranje klase pomou literala .............................................. 15 6. 7. 8. 9. jQuery................................................................................................... 16 Primjer Web aplikacije......................................................................... 17 ZAKLJUAK ...................................................................................... 21 LITERATURA ..................................................................................... 22

1. UVOD
U mom dugogodinjem profesionalnom angamanu, i kao softver developer i kao mentor za nove kolege u kompaniji u kojoj radim, mnogo puta sam bio svjedok nepoznavanja osnovnih principa rada weba, ak i kod iskusnijih kolega, koji ve godinama rade aplikacije za web. U osnovnim principima, programiranje za web moe biti izuzetno jednostavno. Na tritu se nalazi puno alata/tehnologija za brzi razvoj web stranica/aplikacija, poevi od DreamViewera, gotovih CSS predloaka, preko PHP/ASP/ASP.NET alata za brzi razvoj aplikacija (RAD Rapid Application Development). Veina proizvoaa ovih alata trudili su se da u startu od programera sakriju sutinu, i da mu ubrzaju uenje i razvoj web aplikacija. I kao i obino, ovo je za poetak sasvim dovoljno mogue je napraviti sasvim solidnu apliakciju za vrlo kratko vrijeme. Meutim, kad se zahtjevi uslone, a znanje je na nivou koritenja RAD alata, tad poinju muke: takvi "programeri" obino ne razlikuju serversku od klijentske strane, mijeaju tehnologije i "na svoj nain" pokuavaju nai rjeenje, koje je na ovakav nain teko nai. Zbog toga smatram da je za solidnog web programera kljuno poznavati web tehnologije u samoj njihovoj sutini: znati ta je HTTP protokol, ta su HTML/CSS/JavaScript, kako radi HTTP Request/Response mehanizam, i tek nakon toga poeti uiti neku serversku tehnologiju (PHP, ASP.NET, JSP...). U ovom dokumentu opisau osnovne mehanizme rada weba: HTTP protokol, dati osnove za HTML/CSS/JavaScript, te razgraniiti programiranje na strani klijenta i servera. Na kraju dokumenta opisau izradu web aplikacije koristei samo tehnologije sa klijentske strane. Cilj ovog rada je napraviti jednostavnu web aplikaciju koristei iskljuivo klijentske web tehnologije, te kroz njen razvoj upoznati osnovne principe rada weba i klijentskih web tehnologija. Ovo e biti sasvim solidna osnova za dalje nadograivanje znanja kod kasnijeg uenja programiranja na serverskoj strani.

Strana 1 od 22

2. Programiranje za Web
2.1. Osnovni mehanizmi rada weba
World Wide Web (skraeno WWW, W3, ili samo Web) jedan je od najkoritenijih servisa Interneta. Ovaj servis omoguava manipulaciju hipertekstualnim dokumentima. Dokumenti mogu sadravati tekst, slike i multimedijalne sadraje a meusobno su povezani tzv. hiperlinkovima. Za skidanje i prikaz sadraja koriste se raunarski programi koji se nazivaju web -preglednici (web browsers).1 Projekt kojim je poeo razvoj Weba zapoeli su 1990. u CERN-u engleski fiziar Tim Berners-Lee i belgijski naunik Robert Cailliau. Pregled web stranice na World Wide Webu obino poinje ili upisivanjem URL-a stranice u web pregledniku ili slijedei (koristei) hiperveze na tu stranicu ili resurs. Web preglednik zatim pokree niz komunikacijskih poruka (nevidljivih krajnjem korisniku), kako bi se dokument skinuo i prikazao unutar preglednika. Kao primjer, uzeemo web stranicu fakulteta:
http://fpi.unvi.edu.ba/

Prvo, web preglednik prevodi URL (unvi.edu.ba) u adresu Internet protokola koristei globalno distribuirane baze podataka (poznate kao Domain Name System DNS). Vraena IP adresa u ovom sluaju je 109.205.32.86. Preglednik zatim trai resurse slanjem HTTP zahtjeva preko Interneta na raunar na toj adresi. Tipian HTTP Request moe biti jednostavan kao u sljedeem sluaju:
GET http://unvi.edu.ba/ HTTP/1.1 Host: unvi.edu.ba

U naem sluaju, kompletan HTTP Request bio je:

GET http://unvi.edu.ba/ HTTP/1.1 Host: unvi.edu.ba User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip, deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Cookie:__utma=76611153.489079354.1301619055.1319398683.1320787979.34; __utmz=76611153.1317476333.30.1.utmccn=(direct)|utmcsr=(direct)|utmcmd=(none); mbfcookie[lang]=ba; __utmb=76611153

http://en.wikipedia.org/wiki/World_Wide_Web

Strana 2 od 22

HTTP Response (odgovor) servera je 200 OK:

HTTP/1.0 200 OK Date: Tue, 08 Nov 2011 21:40:26 GMT Server: Apache/2.2.3 (CentOS) X-Powered-By: PHP/5.2.17

U ostatku odgovora (response) nalazi se i kompletan HTML kod stranice koja je zahtijevana. Web preglednik uzima HTML kod, interpretira ga i prikazuje krajnjem korisniku:

2.2. HTTP protokol

Hypertext Transfer Protocol (HTTP) je mreni protokol za distribuirane, kolaborativne, hipermedijalne informacijske
2

sisteme.

HTTP

je

osnovni

komunikacijski protokol za World Wide Web.

Standardi razvoja HTTP-a su koordinirani od strane Internet Engineering Task Force (IETF) i World Wide Web Consortium (W3C). HTTP je request/response protokol za komunikaciju izmeu posluitelja (servera) i klijenta. HTTP klijent, kao to je web preglednik najee inicira prijenos
2

http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Strana 3 od 22

podataka nakon to uspostavi TCP (vidi TCP/IP) vezu s udaljenim web serverom na odreenom portu. Server konstantno oslukuje zahtjeve na odreenom mrenom komunikacijskom portu (obino port 80), ekajui da klijent poalje niz znakova (string), kao to je "GET / HTTP/1.1" - kojim e zahtjevati uspostavljanje komunikacije - a nakon toga i tekstualnu MIME poruku koja sadri nekoliko slovnih nizova (zaglavlje) koji odreuju aspekte zahtjeva, te paket neobaveznih podataka. Nakon "GET" poruke, klijent mora poslati niz znakova koji odreuju adresu virtualnog hosta, na primjer "HOST:www.example.com". Zahtjev (engl. request) klijenta e rezultirati slanjem odgovora (engl. response) s posluitelja, kao to je "200 OK" - nakon ega e server poslati i svoj paket podataka koji najee sadri traenu datoteku ili poruku o greci. Odmah po ispunjenju zahtjeva klijenta, server e prekinuti komunikaciju. HTTP se razlikuje od ostalih TCP protokola kao to je npr. FTP, po tome to se konekcija i komunikacija sa serverom prekida odmah nakon izvrenja zahtjeva klijenta (isporuenog paketa traenih podataka). Zbog ovoga je HTTP idealan za Web, gdje je stranica obino povezana s drugim stranicama na drugim posluiteljima. Ova karakteristika HTTP protokola povremeno stvara probleme web dizajnerima, s obzirom da nedostatak "perzistentne konekcije" s posluiteljem moraju nadoknaditi upotrebom drugih metoda za ouvanjem korisnikog "stanja". Jedna od tih metoda ukljuuje upotrebu HTTP cookie-a.

2.3. Web browser

Web Browser ili web preglednik je softver koji omoguava prihvatanje, otvaranje i pregled informacija sadranih u resursima Word Wide Weba. Resursi pri tom mogu biti bilo ta: HTML dokumenti, slike, audio, video, animacije i td...3 Iako su inicijalno namijenjeni da rade sa resursima koji se nalaze na web serverima, web browseri mogu otvarati i datoteke sa lokalnog diska raunara na kom su instalirani. Najkoriteniji web browseri danas su Internet Explorer, Firefox, Google Chrome, Safari, i Opera.

http://en.wikipedia.org/wiki/Web_browser

Strana 4 od 22

Internet Explorer 8

Firefox 3+

Opera

Chrome

2.4. Programiranje na strani klijenta

U samim poecima weba, svako "programiranje" bilo je na strani klijenta. U stvari, to i nije bilo programiranje, to je bilo pisanje HTML dokumenata koji su se sastojali iskljuivo od HTML tagova i sadraja HTML stranice: tekstova, neto malo slika, i tek vrlo rijetko nekog zvuka. Stranice su bile u potpunosti statike, sa statikim sadrajem. Ukoliko je neka stranica trebala biti izmijenjena, to se radilo runo, direktno kroz HTML kod same stranice. Danas, u doba multimedije, to izgleda gotovo nezamislivo. Meutim, vrlo brzo, osjetila se potreba da stranice imaju bilo kakvu interakciju sa korisnikom, odnosno da vie ne budu statine. Jedno od rjeenja je programiranje na strani klijenta, upotrebom jednog od mnogih skriptnih jezika. Gotovo jedini skriptni jezik koji se koristi za web programiranje danas je JavaScript. Ideja skriptnih jezika je vrlo jednostavna: napisati kod koji e web browser znati interpretirati, a koji programeru daje mogunost interakcije sa korisnikom web

Strana 5 od 22

stranice. U poetku, jedan od najeih primjera upotrebe skriptova je bila validacija stranice. Uzmimo za primjer da korisnik popunjava neki web obrazac, gdje (izmeu ostalog) unosi svoju e-mail adresu. Uobiajeno je bilo da korisnik popuni sver podatke na stranici, pritisne neko dugme za potvrdu (najee submit), i kompletna stranica (odnosno njen sadraj, onaj koji je popunio korisnik) biva poslana na server. Server uradi validaciju, i ispostavi se da je e-mail adresa pogrena (recimo da ne sadri znak "@"). Onda se ponovo stranica vraa korisniku sa informacijom o greci, i od korisnika se oekuje da ponavlja ovaj proces sve dok validacija ne bude kompletna i dok svi podaci ne budu validni. Nekad je ova komunikacija izmeu klijenta (korisnikov web browser) i servera (koji hosta web stranicu koju korisnik popunjava) bila veoma spora. Idealno rjeenje je bilo napisati skript koji e se uitati u memoriju web browsera (zajedno sa samom stranicom), i koji e imati mogunost da uradi validaciju podataka koje korisnik unese na stranicu. Ako se pojavi greka u podacima, ona e biti prikazana korisniku momentalno, bez dodatnog ekanja na odgovor sa servera, jer ovaj put sadraj se nije ni poslao na server. Kada svi podaci budu validni, onda se konano alju na server i tamo se dalje obrauju. Naravno, iz dananje perspektive, sa dananjim vrlo velikim brzinama pristupa internetu, ovakva upotreba klijentskog programiranja moda se ini besmislenom, ali je ona jo i vie u upotrebi nego prije. Osim validacije, pomou skriptnih jezika mogue je raditi razliite animacije, promjenu sadraja stranica, pa i samih stilova elemenata na stranici. U stvari, mogue je napraviti potpuno dinaminu i interaktivnu aplikaciju koja se izvodi iskljuivo u web browseru, bez ikakvog servera.

2.5. Programiranje na strani servera

Programiranje na strani servera bilo je prvo "pravo" web programiranje. im su stranice trebale prikazati podatke iz neke baze podataka, programeri su se dosjetili da naprave program koji e se izvravati na web serveru, i koji e dinamiki kreirati HTML kod. Ovdje treba napomenuti da se ne radi o dinamikim web stranicama - one su sa strane krajnjeg korisnika itekako statine - sadre statine

Strana 6 od 22

podake iz neke baze podataka, jedino je nain na koje su ove stranice kreirane bio dinamian. Ideja je bila jednostavna i bazirana na sljedeem: web server je jednostavan program koji klijentskom browseru alje odreene resurse: HTML dokumente sa tekstovima, slikama, zvukom, videom i slino. Kad browser napravi zahtjev za stranicom ListaArtikala.htm, server pronae tu stranicu na svom lokalnom disku i poalje je korisniku nazad. Ako je ne nae, prijavi greku. Programeri su shvatili da imaju mogunost da naprave mali dodatak za web server, koji e kad server zatrai datoteku ListaArtikala.htm, tu datoteku dinamiki napraviti od podataka koje e proitati iz neke baze podataka, i formatirati na nain kako to HTML specifikacija zahtijeva. Onda e je vratiti web serveru, koji e je vratiti korisniku. Ni server, a ni klijent pogotovo, nisu ni svjesni da ta datoteka ne postoji na disku servera, nego je kreirana "u letu" - odnosno dinamiki u vrijeme izvravanja zahtjeva za samom stranicom. Prvi primjer definisanog standarda bio je Common Gateway Interface (CGI). Danas sami serveri imaju mogunost dinamikog procesiranja web zahtjeva. Danas najpopularnije i najee koritene serverske tehnologije su: PHP, ASP.NET, JSP, JSF, RUBY i td.

Strana 7 od 22

3. Osnove HTML-a
3.1. HTML / XHTML
HTML (od engl. HyperText Markup Language), je opisni jezik koji se koristi za izradu web (ili HTML) stranica.4 Tvorcem HTML jezika smatra se britanski fiziar, Sir Timothy Berners-Lee. On je 1980. godine, za interne potrebe na CERN-u u enevi, zapoeo rad na projektu ENQUIRE - softverskom alatu koji je direktna pretea dananjih web browsera. Za vrijeme svog rada u CERN-u, postavio je osnovne ideje onoga to mi danas zovemo Word Wide Web, ili jednostavno Web. Naime, u CERN-u je tad radilo oko 10.000 ljudi, koji su na razliite naine dijelili razliite dokumente, koji su bili pravljeni na razliitim platformama i razliitim alatima. Ideja ENQUIRE softvera je bila da omogui razmjenu dokumenata u ovako heterogenom okruenju. Same HTML stranice (ili hipertekstualni dokumenti) bazirane su na HTML jeziku. HTML jezikom oblikuje se sadraj i stvaraju se hiperveze hipertext dokumenta. HTML je jednostavan za upotrebu i (relativno) lako se ui, to je moda jedan od razloga njegove ope prihvaenosti i popularnosti. Prikaz HTML dokumenata omoguuju softverski programi koji se zovu web preglednici (ili web browseri). Osnovni zadatak HTML jezika jest stvoriti standardiziran dokument koji e web preglednik prikazati kao hipertekstualni dokument. Kljuno je da taj dokument izgleda isto bez obzira u kojem web pregledniku se otvara, ili na kojem raunaru ili operativnom sistemu se pokree sam web preglednik. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne moemo izvriti nikakvu zadau, pa ak ni najjednostavniju operaciju sabiranja ili oduzimanja dvaju cijelih brojeva. On slui samo za opis hipertekstualnih dokumenata. Osnovni graevni element svake stranice su kljune rijei ili tagovi (tags) koji opisuju kako e se neto prikazati u web pregledniku. Veze unutar HTML dokumenata povezuju dokumente u ureenu hijerarhijsku strukturu i time odreuju nain na koji posjetitelj doivljava sadraj stranica.

http://en.wikipedia.org/wiki/HTML

Strana 8 od 22

3.2. Elementi / Tagovi

HTML dokument sastavljen je od unaprijed predefinisanih rijei koje se zovu tagovi (od engl. tags). Nekad se tagovi nazivaju i komandama, to je pogreno, jer tagovi nisu komande, oni su jednostavne oznake, koje omoguavaju HTML browseru da "zna" na kakav nain da prikae HTML dokument. U HTML-u tagovi se mogu pisati i malim i velikim slovima - HTML ne razlikuje velika i mala slova, ali u standardu XHTML svi tagovi moraju se pisati malim slovima. Tagovi se oznaavaju znakovima < i >, izmeu kojih dolazi ime taga, npr <html>. Svi tagovi nakon to se otvore, moraju se i zatvoriti. Veina tagova kao znak za zatvaranje taga koristi </ime_taga> (primjer je <div>Sadraj_diva</div>, dok se neki tagovi zatvaraju dodavanjem samo kose crte prije zadnje zagrade (primjer je <br/>). Osnovni tagovi su: html, head, body, title, style, link, script, table, div, span, h1, h2, h3, p, hr, br, a, img, input.

3.3. Atributi
HTML atributi (engl. HTML Attributes) omoguavaju dodatne informacije o HTML elementima: HTML elementi mogu imati atribute Atributi dodaju dodatne informacije o HTML elementima Atributi su uvijek specificirani u poetnom dijelu taga Atributi uvijek dolaze kao name/value parovi, u formi: name="value" Primjer atributa su HTML linkovi definirani <a> tagom. Linkovana adresa je specificirana href atributom:
<a href="http://unvi.edu.ba">Link na UNVI</a>

3.4. HTML Layout

HTML Layout (ili raspored) moe biti postignut na dva naina: Koritenjem tabela Koritenjem div elemenata Raspored koritenjem tabela neemo razmatrati u ovom dokumentu.

Strana 9 od 22

DIV elementi u kombinaciji sa style atributom omoguavaju veoma efikasno pozicioniranje elemenata na stranici. Kao primjer, naveemo sljedei HTML kod:
<html> <body> <div id="sampleContainer" style="width: 500px"> <div id="sampleHeader" style="background-color: #FFA500;"> <h1 style="margin-bottom: 0;"> Main Title of Web Page</h1> </div> <div id="sampleMenu" style="background-color: #FFD700; height: 200px; width: 100px; float: left;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript</div> <div id="sampleContent" style="background-color: #EEEEEE; height: 200px; width: 400px; float: left;"> Content goes here</div> <div id="sampleFooter" style="background-color: #FFA500; clear: both; text-align: center;"> Copyright 2011 SomeName</div> </div> </body> </html>

Kada web preglednik interpretira ovaj HTML kod, dobili bi smo:

Strana 10 od 22

4. Osnove CSS-a
4.1. Cascading Style Sheets
Cascading Style Sheets (ili skraeno CSS) je stilski jezik, koji se koristi za opis prezentacije dokumenta napisanog pomou HTML koda.5 Kako se web razvijao, prvobitno su u HTML ubacivani elementi za definiranje prezentacije (npr. <font> tag itd.), ali je vrlo brzo uoena potreba za stilskim jezikom koji e HTML osloboditi potrebe prikazivanja sadraja (to je prvenstvena namjena HTML-a) i njegovog oblikovanja (za to se danas koristi CSS). Drugim rijeima, stil definira kako prikazati HTML elemente. CSS-om se ureuje sam izgled i raspored stranice. CSS moemo pisati unutar same HTML stranice, na tri naina: Kao stilove u zaglavlju HTML dokumenta (tj. izmeu <style> i /<style> elementa) Unutar samih HTML tagova, npr. <p style="color: red;">Neki tekst</p> Moemo ga definirati u posebnom dokumentu, i koristiti pomou poziva: <link rel="stylesheet" href="neki.css" type="text/css" />

4.2. Identifikatori
CSS identifikatori su oznake koje se koriste kao imena osobina (properties), kljune rijei, kao i imena tipova (types), klasa, ili kao ID-evi selektora.6 U sljedeem primjeru, fieldset, border i none su CSS identifikatori:
fieldset { border: none; }

Prema specifikaciji CSS2, mogu sadravati znakove A do Z i 0 do 9, ISO 10646 znakove (Unicode ekvivalenti) U+00A1 i znakove nakon toga, crticu (-) i podvlaka (_). Ne mogu poinjati cifrom, niti s crticom koju slijedi cifra. Identifikatori moge sadravati i specijalne "escape" znakove.

5 6

http://en.wikipedia.org/wiki/Cascading_Style_Sheets http://reference.sitepoint.com/css/identifiers

Strana 11 od 22

4.3. Klase
CSS klase su dijelovi CSS koda koji enkapsuliraju osobine objekata koji imaju ili trebaju imati istovjetno ponaanje. CSS klasa definira izgled HTML elementa kojem je pridruena. Kao primjer, recimo da definiramo klasu someClass:
.someClass { background-color: red; }

Klasu emo upotrijebiti u HTML kodu na sljedei nain:

<div class="someClass">Sadraj elementa</div>

Strana 12 od 22

5. Osnove JavaScript-a
5.1. JavaScript
JavaScript je prototipno-baziran skriptni jezik, koji je dinamian, slabo tipiziran (weakly typed) i koristi first-class funkcije (funkcije koje se ponaaju kao objekti). To je vie-paradigmatiki jezik, koji podrava objektno-orijentisano, imperativno, and funkcionalno programiranje.7 Jednostavnije reeno, JavaScript je u skriptni programski jezik, koji se izvrava (interpretira) u web pregledniku na strani korisnika. Zamiljen je da sintaksom bude slian Javi, ali nije u potpunosti objektno orijentisan kao Java, ve se temelji na prototipovima. Izvorno je razvijen u kompaniji Netscape (www.netscape.com). Tvorcem JavaScripta smatra se tadanji uposlenik Netscapea, Brendan Eich. JavaScript se esto mijea sa programskim jezikom Java, s kojim nema nikakve stvarne povezanosti, osim sline sintakse, koja u stvarnosti vodi porijeklo od jezika C / C++. JavaScript je baziran na ECMAScript standardu.

5.2. Promjenjive
JavaScript kao jezik nije strogo-tipiziran programski jezik, ali ipak razlikuje nekoliko osnovnih tipova podataka. Ti tipovi nisu definisani imenom i/ili kljunom rjeju, nego se razlikuju po sadraju. Imena varijabli moraju poeti malim ili velikim slovima od A do Z ili znakom "_". Ostatak imena mogu biti isti ovi znakovi ili cifre od 0 do 9. Tipovi varijabli su: Cjelobrojni tip (integer) - Moe biti u decimalnom, oktalnom, ili heksadecimalnom obliku. Kad vrijednost varijable poinje sa 0x i sadri karaktere 0-9, i a-f, radi se o heksadecimalnoj vrijednosti, kao npr. "0x24". Ekvivalentan oktalni broj bi bio 044 i decimalni 36. Realni tip (Floating point) - Primjer su 3.14, -3.14, 314e-2 Logiki tip (Boolean) - Ima vrijednosti true ili false.

http://en.wikipedia.org/wiki/JavaScript

Strana 13 od 22

Znakovni tip (String) - Moe biti izmeu jednostrukih ' ili dvostrukih " znakova navoda. Niz znakova \' ili \" predstavlja znakove navoda unutar stringa. Nizovi (Arrays) - Bilo koji od tipova iznad. Objekti (Objects). Takoer, posatoji specijalna NULL vrijednost, koja moe biti bilo koji tip iznad, osim nizova i objekata. Tip varijable je odreen u vrijeme kreiranja u memoriji, i to na osnovu dodijeljene vrijednosti. Na primjer: var firstvar=3 kreira cjelobrojnu varijablu. Ako se kasnije vrijednost promijeni kao: firstvar="tri", onda varijabla postaje string. Varijabla se deklarira nakon kljune rijei var.

5.3. Funkcije
Javascript funkcije definirane su korienjem kljune rijei "function" iza koje slijedi ime funkcije i promjenjive proslijeene kao lista parametara:
function fname(value1, value2, ...) { statement1; statement2; }

Za imena funkcija vae ista pravila kao i za imena varijabli. Lista parametara je opcionalna. Izrazi su odvojeni ili znakom ; ili prelaskom u novi red. Funkcije se mogu pozvati na vie naina. Jedan od primjera je unutar <a> taga:
<a href="javascript:alert('Neka poruka');">Neki JavaScript poziv</a>

Drugi primjer bi bio odgovaranjem na onClick dogaaj nekog elementa, npr. za <a> tag:
<a name="someName" onClick="javascript:alert('Neka poruka');">Neki JavaScript poziv</a>

5.4. Klase
Postoji nekoliko naina da se u JavaScriptu definira klasa. Dva najea su: Pomou funkcije Pomou objektnih literala

Strana 14 od 22

5.4.1. Definiranje klase pomou funkcije Pomou funkcije, klasa se definira:

function className (type) { this.type = type; this.color = "red"; this.getInfo = getClassInfo; }

Poslije u kodu, objekat se instancira na sljedei nain:

var someObject = new className('SomeClassType'); someObject.color = "lightred"; alert(someObject.getInfo());

5.4.2. Definiranje klase pomou literala Pomou objektnih literala, klasa se definira:
var someObject = { type: "SomeClassType", color: "red", getInfo: function () { return this.color + ' ' + this.type + ' class'; } }

U ovom sluaju nije potrebno objekat dodatno instancirati, jer je ve instanciran i moe se dalje koristiti u kodu:
someObject.color = "lightred"; alert(someObject.getInfo());

Strana 15 od 22

6. jQuery
jQuery je cross-browser JavaScript biblioteka dizajnirana da pojednostavi pisanje skripti na strani klijenta. Objavljena je u januaru 2006. u BarCampu u New Yorku. Autor je bio John Resig. Koristi se u vie od 49% od 10.000 najposjeenijih web stranica, to ju ini najpopularnijom JavaScript bibliotekom na svijetu.8 Microsoft i Nokia najavili su planove da ukljue jQuery na njihovim platformama. Microsoft je ukljuio jQuery u Visual Studio IDE, i to za upotrebu sa Microsoft ASP.NET AJAX i ASP.NET MVC, a Nokia ga je integrirala u svoje web Run-Time widget razvojne platforme. Trenutno najnovija verzija jQuery je 1.7, a zvanino je objavljena 3. novembra 2011. Najpopularniji i osnovni nain da se predstavi jQuery funkcija je korienjem .ready() funkcije:
$(document).ready(function() { // jquery goes here });

ili njen krai oblik:

$(function() { // jquery goes here });

Zbog vrlo fleksibilne jQuery arhitekture, postoji mnotvo plugina za jQuery, koji proiruju osnovnu jQuery funkcionalnost. Jedan od najeih tipova su razliite jQuery galerije (ovdje koriten je FancyBox), ili popup prozori (ovdje koriten je FaceBox).

http://en.wikipedia.org/wiki/JQuery

Strana 16 od 22

7. Primjer Web aplikacije

Aplikacija koja demonstrira koritenje klijentskih web tehnologija pisana je u Notepad++ editoru teksta. Za grafiko okruenje nacrtan je predloak u Adobe Photoshopu, i onda je napisan pomou HTML/CSS-a. Koriteni alati: o Adobe Photoshop o Notepad ++ o Microsoft Internet Explorer's Developer Tools o Firebug o Fiddler 2 Koritene tehnologije: o XHTML 1.1 o CSS 2.0 o JavaScript 1.8 o jQuery jQuery plugins: o FaceBox o FancyBox

Aplikacija ima jednu glavnu html datoteku, index.htm, koja je horizontlno podijeljena na zaglavlje, centralni dio i podnoje. Centralni dio je vertikalno podijeljen na dio sa linkovima (navigation bar) i sadraj (content).

Strana 17 od 22

Unutar sadraja (contenta) stranice dinamiki se uitavaju datoteke u koji ma se nalazi traeni sadraj. Na ovaj nain vrlo je lako promijeniti kompletan grafiki izgled apliakcije, jer se on nalazi na samo jednom mjestu, i to unutar index.htm datoteke, koja uitava sve stilove sadrane u main.css datoteci sa kaskadnim stilovima. Datoteka index.htm izgleda ovako (bez ukljuenih CSS i JavaScript funkcija):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Ahmet Hadijusufovi :: Seminarski rad</title> <!--CSS AND SCRIPT INCLUDES--> </head> <body> <div id="topBackground"> <div id="topBackgroundHeader"> </div> <div id="topBackgroundLine"> </div> </div> <div id="wrapper"> <div id="header"> </div> <div id="center"> <div id="NavBar"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> </html>

Iz priloenog koda se vidi da je sama datoteka izuzetno jednostavna. Glavnu zadau obavljaju CSS i JavaScript, a HTML je samo kostur za itavu stranicu. Kompletan JavaScript kod koji index.htm sadri, nalazi se u zaglavlju index.htm datoteke, unutar <script> tagova:
<script language="JavaScript" type="text/JavaScript"> /* jQuery DOM ready function */ $(function () { // Load initial page elements $('#header').load('header.xml'); $('#NavBar').load('navbar.xml'); $('#content').load('default.xml'); $('#footer').load('footer.xml'); // Handle for NavBar Heading OnClick setTimeout("$('div.Heading').click(headingClickHandler);", 300); // Handle for NavBar Button OnClick setTimeout("$('div.Button').click(buttonClickHandler);", 300);

Strana 18 od 22

}); function headingClickHandler() { $(this).parent().find('.Content').slideToggle('slow'); if ($(this).parent().hasClass('expanded')) $(this).parent().removeClass('expanded'); else $(this).parent().addClass('expanded'); } function buttonClickHandler() { // Take path for file which will be loaded var fileToOpen = $(this).attr('url'); // Load file to content DIV $('#content').load(fileToOpen); } </script>

Nakon to se stranica uita, pokree se jQuery funkcija koja uitava inicijalni sadraj elemenata

$(function () { };

#header, #NavBar, #content

#footer.

Stvarni

sadraj se uitava iz datoteka header, navbar, default i footer. Sve one imaju ekstenziju xml, iako ne predstavljaju prave xml datoteke, nego sadre HTML/XHTML sadraj. Ekstenzija xml je odabrana zato to velika veina HTTP servera podrava XML ekstenziju bez ikakvog dodatnog podeavanja. O ovom dijelu se postave i event handleri za NavBar dugmie i linkove. Jedna NavBar grupa sa sadrajem izgleda ovako:
<div class="NavBarGroup"> <div class="Heading"> <span>Osnove CSS-a</span> </div> <div class="Content"> <div class="Button" url="Content/CSS/css.xml"> <span>Cascading Style Sheets</span> </div> <div class="Button" url="Content/CSS/ids.xml"> <span>Identifikatori</span> </div> <div class="Button" url="Content/CSS/classes.xml"> <span>Klase</span> </div> </div> <div class="Bottom"> </div> </div>

Kao to se vidi, sastoji se od Headinga, Contenta i Footera. Klikom na heading, pokree se jQuery handler headingClickHandler, koji nad Content elementom

Strana 19 od 22

pokree

jQuery

funkciju

slideToggle('slow');.

Ovaj

handler

takoer

prikazuje/sakriva divove content i footer i mijenja pozadinsku sliku zaglavlja, i to sve pomou dodavanja/oduzimanja CSS klase 'expanded' za kliknuti div. Klikom na dugme unutar grupe uzima se njegov atribut URL (koji sadri putanju do resursa koji treba biti prikazan), i uitava se pomou jQuery funkcije
load(fileToOpen);

Strana 20 od 22

8. ZAKLJUAK
U najkraim crtama prikazana je sutina web tehnologija: HTTP protokola, HTML/CSS/JavaScript jezika, te su date osnovne informacije o jQuery biblioteci za JavaScript. Ovdje je i jasno objanjena razlika programiranja na strani klijenta i servera, te je otvoren put za dalje irenje znanja i uenje serverskih tehnologija. Kroz primjer priloene web aplikacije ovo je u praksi isprobano, te smo dokazali da je i uz pomo programiranja na strani klijenta mogue napraviti sasvim upotrebljivu web aplikaciju. Uvjerili smo se da je ak i za izradu relativno jednostavne web aplikacije potrebno upotrijebiti prilino veliki broj alata i tehnologija da bi smo sve to ostvarili: Adobe Photoshop za dizajniranje grafikog okruenja i obradu slika Notepad++ za unos HTML/CSS/JavaScript koda Firebug/Internet Explorer's Developer Tools za otklanjanje greaka (debugiranje) HTML/CSS/JavaScript koda Fidler 2 za provjeru HTTP Request /Response i dodatno debugiranje aplikacije. Naravno, ovdje nije kraj uenju klijentskog programiranja. Ovdje smo se samo dotakli osnova weba, a daleko je vie onoga to nismo obradili: Cookies kroz JavaScript, AJAX, JSON pozive kroz JavaScript i mnogo, mnogo drugog. Ipak, nakon usvajanja opisanih osnova na strani klijenta, daleko emo bre i efikasnije programirati i na strani servera, bez obzira koju tehnologiju koristili.

Strana 21 od 22

9. LITERATURA
1. http://en.wikipedia.org/wiki/World_Wide_Web 2. http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol 3. http://en.wikipedia.org/wiki/Web_browser 4. http://en.wikipedia.org/wiki/HTML 5. http://en.wikipedia.org/wiki/Cascading_Style_Sheets 6. http://reference.sitepoint.com/css/identifiers 7. http://en.wikipedia.org/wiki/JavaScript 8. http://en.wikipedia.org/wiki/JQuery

Strana 22 od 22