Projekat 1

1. Kompletan JavaScript projekat Do ovog trenutka ste ve nauili osnove JavaScript-a, i vreme je da to znanje primenimo. U ovom dokumentu emo, korak po korak, projektovati web stranu za neku srednju kolu, recimo Center Park.

2. Planiranje web strane kole Center Park Prva stvar koja treba da se uradi, je da se od kolskih administratora dobije lista funkcionalnih zahteva, rokovi za projektovanje i budet. Evo liste funkcionalnih zahteva: Dinamiki kalendari. Studenti su traili da mogu da vide svoje domae zadatke i odgovarajue rokove.

Takoe ih interesuju i vani datumi (poetak/kraj kolske godine, odmori, sastanci, ...). Web strana treba da sadri nekoliko dinamikih kalendara, tako da svaki korisnik moe da dobije informacije na nain koji mu odgovara.

Mogunost testiranja i ispitivanja. Potrebna je mogunost vrenja online testiranja. Ova funkcionalnost je zgodan metod za ocenjivanje naprednih studenata u kontinualnom obrazovanju, kao i nain za vrenje online istraivanja.

Online prodavnica. Prikupljanje sredstava je veoma vano za podravanje programa i inicijativa. Zbog toga je potrebna online prodavnica gde je jednostavno dodati artikle za prikupljanje sredstava u bilo koje doba dana. Takoe je potrebno da strana sadri i jednostavni digitron, tako da bi posetioci i lanovi mogli da jednostavno preraunaju cene.

Siguran pristup, samo za lanove. Mnoge od funkcionalnosti kole zahtevaju siguran pristup, samo za uenike i osoblje.

Rotirajui baneri. Potrebno je obezbediti prostor za reklame, za razlicite organizacije (sportske timove, orkestar ili razne uenike klubove). Vie rotirajuih banera e obezbediti linkove na odgovarajue delove sajta.

Atraktivan izgled. Konano, pored pomenutih funkcionalnosti, nas sajt treba i da izgleda lepo. Zbog toga mora da sadri i razliite dinamike efekte.

Kao to moe da se vidi sa liste, projektovanje strane sadri i neke napredne JavaScript funkcionalnosti. Meutim, iako su funkcionalnosti napredne, relativno ih je lako implementirati.

Ne zaboravite da planirate!

Iako se ovaj tekst ne tie planiranja, planiranje je kljuna tema koja ovde treba da bude pomenuta. Nezavisno od veliine vae web strane planiranje je obavezno. Kad planirate stranu, budite sigurni da ste uzeli u obzir sledea pitanja: Koliki je rad potreban. Za razliku od jednostavnog spiska zahteva navedenog ranije, ovaj nivo

planiranja definie veinu funkcionalosti projekta, kao i aktere. Posebni zahtevi za okruenje. Koji elektronski sistemi, hardver i softver ve postoje, i koji treba da

budu obezbeeni za da bi strana funkcionisala? Da li se koriste specijalni proizvedi koji ograniavaju pristup strani (korienje ActiveX kontrola)?

Dizajn i dokumentacija. ta ako uradite samo pola strane i udari vas autobus (ili preete na drugi projekat, u manje nasilnom scenariju). Da bi vai naslednici mogli da nastave va posao, potrebno je da dobro dokumentujete kod i svaki korak. Ovo je takoe korisno i ako vi kasnije elite da izmenite neku funkcionalnost, ili da ispravite greku.

Projekat 2

Obuka. Iako ono to pravite ima smisla za vas, moda nije tako podrazumevajue za vae korisnike. Iako prethodno pomenuta dokumentacija moe da pomogne, moda bi trebalo da razmislite o asovima obuke, kao i o pisanim uputstvima za upotrebu

Dranje postavljenih granica. Izuzetno je vano da izbegnete da va projekat ode u smeru koji niste planirali jer ete sigurno biti ogranieni vremenom i sredstvima. To znai: paljivo planirajte i drite se plana!

3. Kreiranje JavaScript kalendara 3.1. Uvod

Uenici su u sutini neorganizovani. Administratori kole Center Park su se susreli sa istim problemom kad su probali da srede i prikau informacije razliitim zainteresovanim: uenicima, tutorima, roditeljima. Problem takoe nastaje kod organizovanja rada uenika, ukljuujui domae zadatke i testove. Posebno je bitno da se studenti uloguju (koristei svoju ifru) i vide svoje rasporede. Ovo poglavlje pokriva dva tipa kalendara: jedan prikazuje zadatke (standardni tip kalendara) a drugi dodaje podatke u formu koja se popunjava.

3.2. Beskonani kalendar

Postoje tri osobine koje dobar kalendar treba da poseduje: Dobar kalendar treba da bude pregledan Dobar kalendar treba da ima mogunost promene meseca koji se prikazuje Dobar kalendar treba da poseduje mogunost interakcije sa podacima (u naem sluaju sa bazom

podataka koja sadri zadatke, tako da se aurira po potrebi)

Prikazivanje kalendara Moda najtei deo kreiranja online kalendara je kreiranje korisnikog interfejsa. Na sreu, JavaScript ukljuuje mnoge osobine koje ovo omoguavaju. Kao prvi korak u projektovanju, kreiraemo kalendar koji prikazuje samo trenutni mesec (fajl Static_Calendar.html) Calendar

Projekat 3

return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } // --> Nedelja Ponedeljak Utorak Sreda Cetvrtak Petak Subota Ovaj primer prikazuje jednostavan kalendar. HTML kod se sastoji iz dva dela, funkcije i tabele. Na prvi pogled se ini da funkcije nisu neophodne. Meutim, jesu. Neki browser-i jos uvek pamte godinu u JavaScript objektu Date. Ovo pravi problem za datume posle 2000. Funkcija fixYear(), function fixYear( year ) { return( year < 1000 ? year + 1900 : year ); }

Projekat 4

ispravlja ovaj bug i dozvoljava da se kalendar prikae ispravno. Druga funkcija, getNumberDays(): function getNumberDays( d ) { switch( d.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ); case 4: case 6: case 9: case 11: return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } obavlja funkcionalnost, za koju bi oekivali da je deo JavaScript objekta Date, ali nije. Funkcija ima kao parametar objekat Date i vraa broj dana u mesecu (mesec se proita iz atributa month). Ova funkcija se koristi kasnije, da bi se prikazao taan broj dana. Drugi deo primera je prikaz tabele. Sad emo da proemo kroz sve logike korake kroz koje treba proi da bi kalendar bio ispravno prikazan. Prvo, trebaju vam dva razliita naslovna reda, jedan za ime meseca, i jedan za imena dana. Nedelja Ponedeljak Utorak Sreda Cetvrtak Petak Subota Ime meseca se generie iz niza months. Imena dana su jednostavno kodirana direktno na strani. Sledei deo je komplikovaniji. Nije svakoga meseca prvi dan nedelja, tako da morate da naete neki nain da poravnate mesec sa prethodnim mesecom. Sreom, ako postavite da JavaScript Date objekat da bude prvi dan u mesecu, saznaete koji je to dan, tako da ete znati koliko dana treba da preskoite da bi ispravno prikazali kalendar. Za svaki dan koji treba da preskoite, jednostavno ostavite praznu eliju u tabeli.

Projekat 5

{ if( ( i + startDay + 1 ) % 7 == 1 ) { document.write( "" ); } document.write( "" + (i+1) + "" ); } // --> Ovde treba da brinete o poetku novog reda. Uvek kad broja (i) stigne do nedelje (koja se prikazuje u novoj vrsti), potrebno je da zavrite vrstu i zaponete novu (pisanjem tagova i ).

Rotiranje kalendara Kalendar nije veoma koristan ako prikazuje samo jedan mesec. Ljudi esto ele da planiraju mesecima, pa i godinama unapred. Na sreu, prethodni primer je jednostavno modifikovati tako da se rotira, ili pomeri na neki drugi mesec ili godinu. U prethodnom primeru, ceo prikaz zavisi od jedne promenljive, month (tipa Date objekat). Ako elite da prikaete neki drugi mesec, samo je potrebno da promenite ovu promenljivu. Postoje dva naina za dodavanje ove funkcionalnosti: korienjem URL parametara (prikazan sledei) i cookie-ja (prikazano kasnije u ovom poglavlju). Za rotiranje kalendara, kod mora da se promeni na dva mesta. Prvo mesto je u script tagu, da bi se dobili novi parametri iz URL-a i modifikovala se month promenljiva. Drugo mesto je u body sekciji, da bi se dodali parametri u URL. Prvo diskutujemo prvi deo. Dodavanje linkova za rotiranje kalendara nije jednostavno. Bie nam potrebna etiri linka, dva za rotiranje meseca i dva za rotiranje godine. Po jedan link u svakoj grupi rotira u napred a po jedan u nazad. Da bi sve bilo preglednije, linkove za rotaciju, kao i zaglavlje za naslov su stavljeni u posebnu tabelu, bez ivica. Svaki od etiri linka prati isti obrazac. Svaki link generie vrednost za godinu i mesec na osnovu trenutnih vrednost. Poto se generie nova vrednost, odgovarajui link se upie u dokument. Da bi bilo jasnije, evo primera za vraanje jedan mesec u nazad: Primetite, u ovom primeru nije modifikovana godina. Ovo je zbog toga to treba rotirati samo jednu vrednost u jednom trenutku. Vrednost za promenu meseca je u ovom sluaju 1. Da bi prikazali promenjen kalendar, potreban je nain da iz URL stringa izvuete parametre i da modifikujete promenljivu month. Ova promena je kratka, u poreenju sa prethodnom. var urlquery = location.href.split( "?" ); if( urlquery[1] ) { var params = urlquery[1].split( "&" );

Projekat 6

var y = ( params[0] ? params[0].split( "=" )[1] : fixYear( now.getYear() ) ); var m = ( params[1] ? params[1].split( "=" )[1] : fixMonth( now.getMonth() ) ); month = new Date( y, m, 1 ); } Funkcija split objekta String deli string u vie stringova, razdvojenih znakom koji se navodi kao parametar. Ovim se vri prevoenje stringa u niz stringova. Ovaj deo koda dolazi posle deklarisanja promenljive month. Iako deluje komplikovano, funkcija je jednostavna: Ako u URL stringu postoji parametar za rotiranje URL stringa, primenjuje se na promenljivu month. Evo kompletnog primera za rotirajui kalendar (fajl Rotating_Calendar.html): Calendar

Projekat 7

Nedelja

Projekat 8

Ponedeljak Utorak Sreda Cetvrtak Petak Subota

Dobijanje i postavljanje dogaaja za kalendar Poto JavaScript nema ulaz/izlaz, i ne moe da komunicira sa serverom da bi zatraio podatke iz baze podataka, dobijanje i postavljanje dogaaja ne moe da se napie samo u JavaScript-u. Server-side jezik, kao to je ASP ili ASP.NET, je potreban za slanje upita bazi podataka, da bi se dobili dogaaji za eljeni mesec. Evo jednostavnog primera za uitavanje podataka iz baze na serveru, koristei ASP: Calendar Example

Projekat 9

JavaScript moe da prikae informacije koje dobije. Da bi pojednostavili, smatramo da ASP vraa podatke u obliku JavaScript polja, i ime polja je tasks. U ovom sluaju, prikazivanje informacije je jednostavno. Nedelja Ponedeljak Utorak Sreda Cetvrtak Petak Subota Ovaj primer kreira kalendar i puni ga. Linija if( tasks[i+1] ) document.write( tasks[i+1] ); proverava polje sa zadacima, i, ako zadatak postoji, upisuje ga u trenutnu eliju tabele. Zavisno od upotrebe tabele, moda je dobra ideja da se obelei elija koja predstavlja dananji dan. Sledei kod dodaje ovu funkcionalnost document.write( "" + (i+1) + "" ); if( tasks[i+1] ) document.write( tasks[i+1] ); document.write( "" ); Naredba if crta crveni okvir oko polja ako se prikazuju trenutni mesec i godina. Evo kompletnog primera koji koristi rotirajui kalendar i prikazuje nekoliko zadataka u odgovarajuim danima (ime fajla je Calendar.html):

Projekat 10

Welcome Here are your tasks for

Projekat 11

Nedelja Ponedeljak Utorak Sreda Cetvrtak Petak Subota

Projekat 12

document.write( "onClick=\"JavaScript: document.cookie='month=" + fixMonth(m+1) + "';\">" ); document.write( months[fixMonth(m+1)] + "" ); // --> Ovaj primer je deo Center Park Web strane i to je ono to korisnik vidi, u trenutku kad se loguje na stranu (ovo e biti objanjeno kasnije). Bitna stvar je da ovaj primer koristi cookie-je umesto URL stringa za prenos parametara za mesec i godinu. Dva linka na dnu strane omoguavaju korisniku da rotira kalendar. Evo osnovnog formata za ova dva linka. Iako se ovaj nain prenosa parametara razlikuje, funkcionalnost je identina. Kod koji izdvaja parameter iz cookie-ja je sledei: var yString = getCookieValue( "year" ); var mString = getCookieValue( "month" ); var y = fixYear( yString ? parseInt( yString ) : now.getYear() ); var m = fixMonth( mString ? parseInt( mString ) : now.getMonth() ); var month = new Date( y, m, 1 ); Ovaj metod je skoro isti kao izdvajanje parametara iz URL stringa. Oba metoda funkcioniu dobro, od vas zavisi koji ete izabrati za svoju stranu.

3.3. Pop-Up kalendar za kompletiranje forme

Pop-up kalendar je potpuno drugaiji tip kalendara. Iako se razlikuje od beskonanog kalendara, veina koda za njegovo kreiranje je skoro identina. Razlozi zbog ega se pop-up kalendar razlikuje od beskonanog kalendara: pop-up kalendar se prikazuje u posebnom prozoru poto korisnik izabere datum, pop-up prozor se zatvara i popunjava se polje u poetnom prozoru u ovom kalendaru se ne prikazuju dogaaji I kod pop-up kalendara su prikazivanje i rotacija dve osnovne funkcionalnosti. Sreom, ovde ne treba prikazati dogaaje. Meutim, sada treba voditi rauna o komunikaciji izmeu prozora izmeu kalendara i poetnog (roditeljskog) prozora..

3.4. Prikazivanje pop-up kalendara

Prikazivanje kaledara je u stvari kreiranje tabele i popunjavanje podacima. Korienje roditeljskog prozora za poziv kalendara e biti razmotreno kasnije Kod za prikazivanje kalendara bi do sada trebao da vam bude jasan, tako ga jednostavno dajemo, i objanjavamo samo neke osobine.Ime ovog fajla je Simple_Popup_Calendar.html: Date Chooser

Projekat 13

Ned Pon Uto Sre Cet Pet Sub

Projekat 14

U ovom primeru, pitanje je veliina kalendara. Zbog toga to e kalendar da se prikae u novom prozoru, verovatno e biti manji od roditeljskog prozora. Dugmad se koriste u elijama tabele zbog toga to na taj nain izazivaju dogaaje koji se jednostavno hvataju. Funkcija onSelect() i sakriveno polje forme e biti objanjeno kasnije.

3.5. Rotiranje pop-up kalendara

Kod treba da se modifikuje na dva mesta, da bi kalendar mogao da se rotira. Prvo mest je tag script, da bi mogli da iz URL-a izviemo nove parametre pomou kojih modifikujemo promenljivu month. Drugo mesto je u sekciji body, gde dodajemo linkove koji dodaju parametre u URL, da bi kalendar mogao da se rotira. Prvo diskutujemo drugi deo, da bi razumeli kako funkcionie prvi deo. Ovog puta, dodajemo tekst polje da bi korisnik mogao da unese broj meseca i datum koji eli da vidi. Ovo modifikuje samo prvu vrstu kalendara. Evo modifikovanog koda: Month:

Projekat 15

Year: Prva elija u redu sadri teks polje za unos meseca a trea elija sadri tekst polje za unos godine. Obe kontrolie Submit dugme koje se nalazi ispod naslova meseca. Mesec i godina keje se prikazuju u kaledaru su podrazumevane vrednosti za oba tekst polja. Kad se pritisne dugme Submit, vri se osveavanje strane i menja se kalendar. Poto su imena tekst polja Month i Year, moemo da koristimo isti kod koji je korien za beskonani kalendar, za njihovo dobijanje iz URL stringa: var urlquery = location.href.split( "?" ); if( urlquery[1] ) { var params = urlquery[1].split( "&" ); var m = ( params[0] ? params[0].split( "=" )[1]: fixMonth( now.getMonth() ) ); var y = ( params[1] ? params[1].split( "=" )[1] : fixYear( now.getYear() ) ); month = new Date( y, m, 1 ); } Modifikovanje promenljive month e, kao i ranije, promeniti tekst koji se prikazuje u tabeli kalendara. Evo kompletnog koda za rotirajui pop-up kalendar (fajl PopUpCalendar.html): Izbor datuma

Projekat 16

switch( d.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ); case 4: case 6: case 9: case 11: return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } function onSelect() { window.opener.setDate( document.theForm.date.value ); self.close(); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Mesec: Godina:

Projekat 17

Ned Pon Uto Sre Cet Pet Sub

4. Kreiranje online testa ili istraivanja 4.1. Kreiranje testa

Kreiranje test dela online testa (za razliku od dela sa ocenjivanjem) je veoma jednostavno. Do sad bi trebalo da ste nauili kako da kreirate obrazac i da proverite ispravnost unetih podataka pre njegovog slanja. Evo kompletnog koda (fajl Test.html): Center Park - Prvi kolokvijum iz predmeta Internet i Web tehnologije

Projekat 18

if( getCookieValue( "loggedin" ) != "true" ) document.location = "Main.html"; function validate( form ) { for( i = 0 ; i < form.elements.length ; i++ ) { with( form.elements[i] ) { if( type == "text" && value == "" ) { alert( "Odgovorite na sva pitanja." ); return( false ); } } } return( true ); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Internet i web tehnologije - Prvi kolokvijum Sva pitanja su obavezna. Pazljivo procitajte pitanje pre nego sto na njega odgovorite. Ne trosite previse vremena na neko pitanje. Imate 30 minuta da zavrsite kolokvijum. Srecno! 1) Zamislite da aritmeticki operatori nemaju prioritet. Pretpostavljajuci da su operatori levo asocijativni, koja je vrednost izraza 5-3*4/2+6 ?

Projekat 19

Odgovor 2) u kom HTML tagu moraju da budu ugnjezdeni sve JavaScript funkcije? Odgovor 3) Koji se dogadjaj poziva posto koristnik selektuje tekst ili HTML element na web strani? Odgovor 4) Koji tip opsega vazenja promenljive koristi JavaScript? Odgovor 5) Koji relacioni oparator se koristi da bi se proverilo da li dve promenljive istog tipa nisu jednake? Odgovor

Projekat 20

Kompletan test bi trebao da vam bude poznat. Forma sadri pet pitanja, svako sa tekst poljem u koje korisnik upisuje odgovor. Pre nego to se poalje forma, poziva se funkcija validate(), function validate( form ) { for( i = 0 ; i < form.elements.length ; i++ ) { with( form.elements[i] ) { if( type == "text" && value == " " ) { alert( "Please answer all questions." ); return( false ); } } } return( true ); } koja proverava da li su sva tekst polja popunjena. Ako neko polje nije popunjeno, pojavljuje se poruka upozorenja i forma se ne alje. Ako je odgovoreno na sva pitanja, forma se alje u posebnu HTML stranu, koja se zove Grade.html. Funkcionalnost ove druge strane je objanjena kasnije. Stvar koju moda niste videli do sada je vremensko ogranienje. Poslednji script tag blokira dugme Submit 30 minuta poto je strana uitana. Napomena: U Internet Explorer-u se deava interesantna pojava. Kad se jednom pritisne dugme Submit, tajmer prestaje da broji. Ovo je razlog to nismo uvrstili i preostalo vreme na stranu, da korisnik ne bi postao svestan ovog bag-a. U Netscape browser-ima se ovo ne deava.

4.2. Kreiranje strane koja vri automatsko ocenjivanje

Ideja je bila da se test automatski oceni, kad se pritisne dugme Submit i da se odmah prikau rezultati. Sada postoji problem, kako preneti podatke iz forme sa jedne strane na drugu? U prethodnoj sekciji smo podatke iz forme slali posebnoj stranici, koja se zove Grade.html, u obliku name=value preko URL stringa. Na alost, ne moemo unapred da znamo kojim redosledom e polja forme da se pojave u URL stringu, tako da nam treba reenje koje dobija parove name=value u bilo kom redosledu. Na sreu, isti problem smo imali i u radu sa cookie fajlovima, tako da modifikujemo funkciju getCookieValue() tako da radi sa URL stringom. function getFormValue( name ) { var c = location.href.split( "?" )[1]; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( "&", begin ); if( end == -1 ) end = c.length; return( unescape( c.slice( begin, end ) ) ); } Umesto da u cookie fajlu traimo parove name=value, ova funkcija pretrauje URL string u potrazi za eljenom informacijom, koristei znak (&) kao delimiter. Poto smo ovo reili, sad treba da generiemo rezultat. Evo kompletnog koda za stranu Grade.html:

Projekat 21

Center Park - Rezultati testa Center Park - Prvi kolokvijum iz predmeta Internet i Web tehnologije Sva pitanja su obavezna. Pazljivo procitajte pitanje pre nego sto na njega odgovorite. Ne trosite previse vremena na neko pitanje. Imate 30 minuta da zavrsite kolokvijum. Srecno! 1) Zamislite da aritmeticki operatori nemaju prioritet. Pretpostavljajuci da su operatori levo asocijativni, koja je vrednost izraza 5-3*4/2+6 ?

Projekat 22

Odgovor 10 2) u kom HTML tagu moraju da budu ugnjezdeni sve JavaScript funkcije? Odgovor SCRIPT 3) Koji se dogadjaj poziva posto koristnik selektuje tekst ili HTML element na web strani? Odgovor OnSelect

Projekat 23

} else { document.write( "Pogresno Vi ste odgovorili: " + getFormValue( "Q3" ) ); } total++; // --> 4) Koji tip opsega vazenja promenljive koristi JavaScript? Odgovor Static 5) What relational operator is used to determine if two variables of the same type are not equal to each other? Answer !=

Projekat 24

Jedina razlika izmedju testa i istrazivanja je u tome to istrazivanje ne sadrzi deo sa ocenjivanjem, tako da ovde nee biti dat primer istraivanja.

5. Kreiranje strane za kupovinu 5.1. Uvod

Online prodavnicu je relativno lako implementirati. Na alost, postoje ozbiljni problemi u voenju iste. Postoje ozbiljni problemi u naplati, kontroli inventara, isporuci... Naa strana sadri stranu za kupovinu, koja se u potpunosti nalazi na raunaru klijenta i oslanja se na kreiranje cookie-ja. Postoje tri dela strane za kupovinu. Prvi deo su strane gde se stavke dodaju na listu. Drugi deo je strana gde moe da se dobije pregled liste, radi eventualnog uklanjanja stavki. Poslednji deo je izlazna strana.

5.2. Izbor stavki i dodavanje u listu

Najvanija osobina liste za kupovinu je mogunost da uva stvari (pointere na robu). Prvo treba odluiti gde i kako treba uvati podatke. Jedno od mesta su URL parametri. Na alost, ovde postoji puno problema: postoji ogranienje u duini i prave probleme kad se koristi vie strana. Poto ulaz/izlaz iz fajla ne postoji u JavaScript-u, postoji samo jo jedan nain da se uvaju podaci o kupovini - cookie fajl. U cookie fajlu, podaci se uvaju u obliku name=value. Kad je u pitanju lista za kupovinu, potrebno je da se pamti i cena, tako da za uvanje podataka o kupovini uvamo u formatu number=description,cost. Deo number je redni broj stavke u listi, description je ime stavke i cost je cena stavke. Treba napisati funkciju koja dodaje stavku u listu. Ako koristite prethodni format, funkcija ima sledei izgled: function addItem( name, price ) { var i = 1; for( ; getCookieValue( "item" + i ) != "" ; i++ ); document.cookie = "item" + i + "=" + name + "," + price; document.cookie = "items=" + i; } Funkcija stavlja stavke u cookie u sledeem formatu: item# = String za opis stavke,#.## Treba zapamtiti da String za opis stavke ne sme da sadri zareze, jer ovo kasnije komplikuje prikazivanje liste. Ova funkcija, pored toga to dodaje stavku na prvo slobodno mesto, ve i uva podatke o broju stavki. Prethodna funkcija koristi posebnu funkciju, getCookieValue(), koja se koristi u skoro svakom programu koji radi sa cookie fajlovima: function getCookieValue( name ) {

Projekat 25

var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } Poto smo reili preoblem uvanja podataka i dodavanja stavke u cookie, kreiranje ostatka koda je jednostavno. Evo kompletnog koda (fajl Store.html): Center Park - Prodavnica Prodavnica skole Center Park- za sve vase potrebe za skolskim priborom Skolska kapa - Jedna velicina odgovara svima, amblem skole na prednjoj strani. $9.99 Skolska majica - velicine S-M-L, amblem skole na prednjoj strani. $19.99

Projekat 26

Karte za fudbalsku sezonu - Gledajte Bobcats cele sezone. $12.99 Ova online prodavnica nudi tri proizvoda. Dugme pored svake stavke omoguava kupcu da doda stavku u listu, pozivajui funkciju addItem() . Dva dugmeta u dnu strane omoguavaju kupcu da vidi svoju listu za kupovinu i da se izloguje kad zavri.

5.3. Pregled sadraja liste

Ovo je jedan deo strane koji nije zahtevan, ali se obino oekuje. Pre nego to napiemo kompletan kod, trebalo bi da reimo problem: kako dobiti podatke iz cookie fajla. Evo traenog koda: function getItemName( item ) { var c = getCookieValue( item ); if( c ) { return( c.split(" ,")[0]); } else return( "" ); } function getItemPrice( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[1] ); } else return( "" ); } Funkcije su identine, osim to jedna vraa opis a druga cenu stavke. Poto dobiju vrednost value iz para name=value iz cookie-ja, funkcija ga deli koristei zarez kao graninik i prikazuju prvi, odnosno drugi deo niza. Poto su napisane ove dve funkcije, prikaz sadraja je jednostavan, korienjem for petlji (fajl Prikaz.html): Center Park - Pregled spiska

Projekat 27

{ var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function getItemName( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[0] ); } else return( "" ); } function getItemPrice( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[1] ); } else return( "" ); } // --> Prodavnica skole Center Park - za sve vase potrebe za skolskim priborom

Projekat 28

document.location = document.location; } Umesto da ukloni svaki trag iz cookie fajla, funkcija uklanja opis i cenu iz fajla. Ovo uklanja deo value iz para name=value. Zbog toga to se stavka ne uklanja u potpunosti sa liste, potrebno je da uvedete dodatnu proveru pre prikazivanja liste, da se ne bi prikazale prazne stavke. Naredba if ugnjedena u for petlji proverava da stavka nije bila uklonjena i prikazuje samo stavke koje jo uvek imaju opis i cenu. Sad treba dodati dugme za uklanjanje stavke, koje e, kad je pritisnuto, da pozove funkciju removeItem() za odgovarajuu stavku. Evo kompletnog primera koji sadri i dugme koje uklanja stavku (fajl ViewCart.html): Center Park - Pregled spiska

Projekat 29

return( c.split( "," )[1] ); } else return( "" ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Prodavnica skole Center Park - za sve vase potrebe za skolskim priborom

5.4. Odjavljivanje i naruivanje

Jedna od najvanijih delova kupovine je naruivanje. Bez ove strane, ostali delovi bi bilo besmisleni. Strana za odjavljivanje i naruivanje prikazuje listu stavki i ukupnu cenu. Evo kompletnog koda (fajl CheckOut.html): Center Park - Odjavljivanje iz prodavnice

Projekat 30

function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function getItemName( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[0] ); } else return( "" ); } function getItemPrice( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[1] ); } else return( "" ); } function fixTotal( n ) { n *= 100; var good = parseInt( n ); while( good < n ) good += 1; return( good / 100 ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Prodavnica skole Center Park - za sve vase potrebe za skolskim priborom Do sada ste potrosili:

Projekat 31

} } // --> Total $ Vrati se na pocetnu stranu Veina primera bi trebalo da vam bude poznata. Funkcije, getItemName() i getItemPrice(), function getItemName( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[0] ); } else return( "" ); } function getItemPrice( item ) { var c = getCookieValue( item ); if( c ) { return( c.split( "," )[1] ); } else return( "" ); } vraaju informacije o stavkama iz cookie fajla i stavljaju ih u tabelu pomou for petlje. Poslendnji deo tabele sadri ukupnu cenu, koja se rauna kad se prikazuju stavke, po sledeem obrascu: total += parseFloat( getItemPrice( "item" + i ) ); Promenljiva total je deklarisana u head sekciji strane i postavljena na nulu. Poto se prikau sve stavke, ukupna cena se prikazuje na kraju tabele, na ovaj nain:

Projekat 32

Total $ Jedna od funkcionalnosti koja nije ukljuena u ovu stranu, a trebalo bi da postoji, je forma koju naruilac treba da popuni, i dugme submit, kojim roba zaista naruuje.

6. Zatita strane pristup samo za lanove, strana zatiena ifrom 6.1. Uvod

Ozbiljan je problem kreirati sigurnu web stranu koristei samo JavaScript. Dodue, postoji puno pokuaja, i svi su manje-vie neuspeni. Ovo poglavlje prikazuje jednostavno reenje, kao i mnoga druga, neuspena reenja. Sigurnost podrazumeva dve stvari: prva, da samo autorizovane osobe imaju pristup odreenim podacima i da prikaz podataka bude prilagoen odreenoj osobi.

6.2. Jednostavna provera ifre

Najjednostavniji nain da strana bude zatiena ifrom je da se zatrai od korisnika da unese ifru, ta ifra se proveri i zatim se dozvoli korisniku da poseti stranu. Sledei primer prikazuje ovu (fajl Bad_Checking.html). Password Protected Site Please enter your password:

Projekat 33

Na prvi pogled, ovo se ini kao dobro reenje. Ako se unese ispravna ifra (sesame), prikazuje se strana Continue.html; Na alost, postoji ozbiljan propust u planu: kod sadri ifru, kao i ime strane kojoj treba pristupiti. Korisnik moe da vidi HTML kod strane koju prikazuje, i time da proita traenu iru. Ova tehnika moda moe da sprei prosenog posetioca, ali ne i korisnika koji ima makar minimalno znanje. Znai, bilo bi zgodno kad bi mogli da spreimo posetioca da vidi kod.

6.3. Sakrivanje ifre u strani sa okvirima

Postoji nain da spreite posetioca da vidi izvorni kod strane. Ako stranu za proveru sakrijete u stranu sa okvirima, na izgled ste postigli cilj (fajl Frames_Password.html): Frames Page: Password Protected Site

This page uses frames, but your browser doesn't support them.

Authenticate.html: Password Protected Site Please enter your password: Reenje i nije tako dobro. Sad uporan posetilac samo treba iz kontekstnom menija u okviru izabere opciju View Source i ponovo je video ifru, iako je na izgled bila sakrivena..

Projekat 34

Sada, problem nije kako da sakrijemo kod, ve kako da spreimo da se prikae konteksni meni.

6.4. Sakrivanje konktekstnog menija na web stranama

Spreavanje pojavljivanja kontekstnog menija na webe strani zahteva izvestan posao. Potrebno je da uhvatite svaki dogaaj mia na strani, da izdvojite samo desni klik, i da zatraite od browser-a da ne prikae kontekstni meni. Ceo proces bi mogao da izgleda ovako: Sada ovaj kod treba ubaciti u head sekciju strane. Evo poboljanog koda (fajl No_Context_Password.html), koji treba smestiti u frejm (fajl Frames.html). Password Protected Site

Projekat 35

} } } if( document.layers ) { document.captureEvents( Event.MOUSEDOWN ); document.onmousedown = clickNS4; } else if( document.all && !document.getElementById ) { document.onmousedown = clickIE4; } document.oncontextmenu = new Function( "return( false );"); function verifyPassword( word ) { return( word == "sesame" ); } --> Please enter your password: Sada smo dobili na izgled sigurnu stranu. Meutim, nije sve ba tako kako se ini...

6.5. Problem sa JavaScript sigurnou

Web strana se uvek uita na raunar posetioca pre nego to se prikae. To znai da ak i ako spreimo posetioca da vido kod, on i dalje moe da pogleda u folder temporary Internet . Mogue je rei browser-u da ne uita stranu pre nego to je prikae. Primer neemo prikazati, poto to i dalje nije sigurno reenje. Ako je posetilaci dovoljno uporan, i dalje moe da nae ifru koja je sauvana negde u memoriji browser-a. Iako to nije mnogo verovatno, mogue je da se uradi. Ovo nas dovodi do osnovnog problema JavaScript sigurnostiifra se uvek alje na raunar posetioca. Bez obzira koliko se trudili, vaa strana nikad nije u potpunosti zatiena. Meutim, postoji zaista jednostavno reenje za zatitu strane koristei iskljuivo JavaScript.

6.6. Strana zatiena ifrom

Reenje je jednostavno: Ime druge strane, koja treba da proveri ifru je isto kao ifra. Ovim ne moramo da aljemo ifru na raunar posetioca, pa samim tim i ne moramo da je krijemo. Evo kompletnog koda (fajl Protected_Page.html): Password Protected Site

Projekat 36

Please enter your password: Kompletak kod za sakrivanje ifre je zamenjen funkcijom verifyPassword() function verifyPassword( word ) { document.location = word + ".html" } Ako je ifra recimo y7v2xu89, i postoji fajl koji se zove y7v2xu89.html u istom folderu kao strana za proveru, dobili smo sigurnu stranu. Ako korisnik unese pravu ifru, otvorie mu se sigurna strana. Ako pogrei, prikazuje mu se greka 404. Na strani kole Center Park primenjena je ova tehnika. Prvo, postoji strana na kojoj posetilac treba da unese korisnino ime i ifru (fajl LogIn.html). Center Park - Logovanje

Projekat 37

Dobrodosli na pocetnu stranu skole Center Park Da bi pristupili sadrzaju ove strane, logujte se pomocu korisnickog imena i sifre: Log In Korisnicko ime: Sifra:

Fajl koji se otvara je y7v2xu89.html:

Projekat 38

if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function fixYear( year ) { return( year < 1000 ? year + 1900 : year ); } function fixMonth( month ) { return( month < 0 ? month + 12 : ( month > 11 ? month - 12 : month ) ); } function getNumberDays( d ) { switch( d.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ); case 4: case 6: case 9: case 11: return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } // Ovaj deo treba da se ucita sa servera (recimo ASP). //U nedostatku istog, pravimo nas niz sa zadacima var tasks = new Array( 30 ); tasks[5] = "Resite CS Test"; tasks[28] = "Rok za predaju rada iz engleskog jezika"; function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Dobrodosli Evo vasih zadataka za

Projekat 39

Nedelja Ponedeljak Utorak Sreda Cetvrtak Petak Subota Dodaj zadatak Vrati se na pocetnu stranu

Projekat 40

Ovim posao nije zavren. Prometiete da kad se strana uita, u cookie fajlu se postavlja vrednost koja pamti da je korisnik ulogovan. Da bi strana bilo potpuno sigurno, ova vrednost treba da se proverava na svakoj strani koja treba da bude sigurna. Evo jo jednog dokumenta sa naeg sajta koji mora da proverava ovu vrednost (fajl AddTask.html): Center Park - Dodavanje zadatka Raspored zadataka skole Center Park za .

Projekat 41

Schedule Task Date of task: Opis zadatka (HTML is ok): Prva naredba koja se izvrava, if( getCookieValue( "loggedin" ) != "true" ) document.location = "Main.html"; proverava loggedin cookie vrednost i preusmerava posetioca na glavnu stranu ukoliko nije ulogovan. Ovim se spreava posetilac da direktno unese URL i time izbegne unoenje ifre.

7. Kreiranje linkovanih rotirajuih oglasa Poto je prostor na web strani ogranien, a postoji tako mnogo oglasa koje treba prikazati, naa ideja je da ih sve prikaemo na istom mestu.

7.1. Prikazivanje razliitog oglasa svaki put kad se strana uita

Internet Explorer omoguava da se sadraj menja u pokretu, korienjem atributa innerHTML. Sledei primer prikazuje drugi tekstualni oglas svaki put kad se uita strana. (fajl IE.html) Center Park Home Page - Main Page

Projekat 42

function rotateAd() { document.all.adCell.innerHTML = getAd(); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Center Park Home Page Log In Store Customize *** School News *** July 4th - Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students. July 3rd - First annual Adopt a Nerd Day! They are people too. June 12th - June Bug festival begins. Svaki put kad se uita, strana sluajno bira jedan sa liste predefinisanih oglasa i prikazuje ga.

Projekat 43

7.2. Kreiranje linkovanog tekstualnog oglasa koji se sam menja

Poto uenici obino ne otvaraju istu stranu vie puta, bolje bi bilo kad bi se oglasi sami menjali. Koristei metod setTimeout() objekta Window, mogue me menjati oglas, recimo na svakih 10 sekundi. Menjajui sadraj samog oglasa, oglasi postaju linkovi (fajl IE_rot.html). Center Park Home Page - Main Page Center Park Home Page

Projekat 44

Log In Store Customize *** School News *** July 4th - Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students. July 3rd - First annual Adopt a Nerd Day! They are people too. June 12th - June Bug festival begins.

7.3. Kreiranje linkovanog slikovnog oglasa koji se menja

Ovo se postie jednostavnom modifikacijom prethodnog primera. Jednostavno, svuda gde se nalazio tekst, treba staviti odgovarajuu sliku (fajl IE_img.html): Center Park Home Page - Main Page

Projekat 45

{ var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Center Park Home Page Log In Store Customize *** School News *** July 4th - Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students. July 3rd - First annual Adopt a Nerd Day! They are people too. June 12th - June Bug festival begins. Sledea stvar koju treba uraditi je da se problem rei nezavisno od browser-a.

7.4. Nezavisnost od platforme

Problem sa prethodnim primerima je taj da funkcioniu samo u Internet Explorer-u. Netscape ne moe da referencira HTML elemente direktno kroz atribud ID. Sreom, postoji reenje. Umesto da promenim HTML u eliji tabele, ovog puta menjamo vrednosti parametara taga. U narednom primeru tagovi link i img su na svom mestu kad se uita strana (fajl Main.html): Center Park - Pocetna strana

Projekat 46

ad += parseInt( Math.random() * 2 ) + 1; return( ad ); } function changeLink(name) { document.getElementById('ad_site').href= name + ".html"; } function rotateAd() { with( document ) { for( i = 0 ; i < images.length ; i++ ) { if( images[i].name == "adImage" ) { var ad_name=getAd(); images[i].alt = images[i].src = ad_name + ".jpg"; changeLink(ad_name); } } } window.setTimeout( "rotateAd()", 10000 ); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Pocetna strana skole Center Park Log In Store Customize

Projekat 47

*** Skolske novosti *** 4. Jun - Vatromet u trznom centru! Dodjite da uzivate u prazniku sa nastavnicima, osobljem i ucenicima skole Center Park. 2. Jun - Prvi godisnji DAN USVOJITE KRELCA ! Oni su takodje ljudi. 12. Jun - Pocinje junski festival buba. Na svakih 10 sekundi se menjaju vrednosti atributa href i src. Ovo obezbeuje istu funkcionalnost kao prethodni primer, ali je kod malo dui i tei za praenje.

8. Korienje JavaScript-a za kreiranje dinamikih HTML (DHTML) efekata

8.1. Uvod

Do sada smo dodavali funkcionalnosti web strani. Ovo poglavlje se odnosi na poboljavanje izgleda strane. Fokusiraemo se na dva tipa dinamikog sadraja: promenu izgleda dugmeta i promenu eme boja za celu stranu.

8.2. Promena izgleda slike prelaskom mia

Ovo je moda najei dinamiki efekat na internetu. Zbog jednostavnosti, postoje razliiti naini implementacije. Na naoj strani koristimo jednostavan pristup za img tag postoji dogaaj mia. Sledei primer koristi jednostavan tekst link. Svrha primera je da se na njemu prikau poboljanja do kojih dolazi dodavanjem ovog jednostavnog efekta.(fajl Text.html). Center Park Home Login Store

Projekat 48

Customize Prethodni primer ne sadri JavaScript. Jedan od naina da se pobolja izgled strane je da se tekstualni link zameni slikom (fajl Slika.html). Center Park Iako je strana sad interesantnija, jojs uvek ne izgleda dovoljno dobro. Sledee, dodaemo dinamiki efekat, slika dugmeta e se malo promeniti kad se pree pointerom preko nje. Za ovo se koriste dogaaji mia onMouseOver i onMouseOut. Kad se kursor postavi iznad slike, slika se menja, a kad se kursor skloni sa slike, vraa se poetna slika. To se radi na sledei nain:: Evo kompletnog koda (fajl Slika_d.html) : Center Park

Projekat 49

Ovo nije jedini nain za dodavanje ovog efekta. Postoje i bolji naini, ali ovo je najjednostavniji. Meutim, ako dodate vie dugmadi, poveava se koliina koda koja treba da se napie. Zbog toga bi bilo lepo kad bi postojala funkcija koja obrauje svaku promenu svake slike. Ovo je prilino jednostavno korienjem document object model (DOM), (fajl MenuBar.html): Center Park

Projekat 50

Svi dogaaji sa slikama se obrauju jednom funkcijom, change(), function change( image, event ) { image.src = image.name + event + ".bmp"; } Koja ima dva parametra. Prvi parametar je pointer na sliku koja je kreirala dogaaj. Drugi parametar je broj koji odreuje tip dogaaja. Izabrana je vrednost 2 za dogaaj onMouseOver a vrednost 1 za dogaaj onMouseOut. Za svako dugme, treba kreirati posebnu sliku za svaki tip dogaaja. Moete da primetite dsa je dodat atribut name svakom image elementu. On se koristi u funkciji change() da bi se prikazala odgovarajua slika u elementu. Odgovarajui kod u elementu image je: Ovaj metod se jednostavnije ita nego prethodni i smanjie vreme uitavanja ukoliko postoji vie slika na strani. Osim toga, obe metode identino funkcioniu.

8.3. Promena eme boja

Jo jedna od dinamikih osobina strane mogu da budu eme boja. Ako boje sauvamo u cookie fajlu, moemo da ih postavimo za svaku stranu koja se uita Prvi deo implementacije je kreiranje strane na kojoj je mogue uneti eljene boje, i promenljive sauvati u cookie fajlu (fajl Custom.html). Center Park - Podesavanja

Projekat 51

Podesite boje na web strani: Boja pozadine: Boja teksta: Vrati se na pocetnu stranu Jednostavna funkcija saveCustoms(): function saveCustoms( form ) { document.cookie = "bgColor=" + form.bgColor.value; document.cookie = "fgColor=" + form.fgColor.value; } se poziva kad se pritisne dugme Submit, i uva vrednosti promenljivih u cookie fajlu. Posle tog trenutka, svaka strana koja se otvori, a koja ima odgovarajui kod za promenu boje, bie prikazana sa odgovarajuom emom boja. Kod kojim se uitava ema boja je jednostavan (fajl Customize.html). Center Park - Podesavanja

Projekat 52

if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> Podesite boje na web strani: Boja pozadine: Boja teksta: Vrati se na pocetnu stranu Ovaj, malo modifikovan primer, ne samo da uva boje, ve ih i uitava i primenjuje sledei put kad se strana uita. Funkcija setCustoms(), function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } koja se poziva iz taga body na dogaaj onLoad, ita vrednosti odgovarajuih promenljivih iz cookie fajla i primenjuje ih na boje dokumenta. Isti princip moe da se primeni na svaku stranu koja ima pristup cookie fajlu.

9. Web strana kole Center Park: Kompletan kod Gotova strana se sastoji iz sledeih fajlova: MenuBar.html - Kod koji se prikazuje u levom frejmu poetne strane, deo za navigaciju. Kod se

nalazi u poglavlju 8.2 Main.html - Kod koji se prikazuje u desnom frejmu na poetnoj strani. Kompletan kod se nalazi u

poglavlju 7.4.

Projekat 53

LogIn.html - Kod za logovanje, koristi se za pristup kalendaru sa zadacima. Kompletan kod se nalazi u poglavlju 6.6.

y7v2xu89.html - Za potrebe objanjenja, strana ima ime ifre koja se unosi na strani za logovanje. Naravno, ovo nije ba najsigurniji dizajn, ali je napravljen kao takav namerno, da bi se shvatio princip rada. Kompletan kod se nalazi u poglavlju 6.6 .

AddTask.html - Sledea strana omoguava posetiocu da doda dogaaj u svoj kalendar. Kompletan kod se nalazi u poglavlju 6.6.

PopUpCalendar.html - Ovaj fajl prikazuje pop-up kalendar, da bi korisnik mogao da izabere datum za koji unosi zadatak. Kompletan kod se nalazi u poglavlju 3.5.

Test.html - Kod za online test se nalazi u poglavlju 4.1. Grade.html - Strana koja ocenjuje predat test. Kod se nalazi u poglavlju 4.2. Customize.html - Strana koja dozvoljava korisniku da promeni boju pozadine i teksta na strani.

Kod se nalazi u poglavlju Error! Reference source not found.. Store.html - Poetna strana prodavnice, prikazuje listu proizvoda, i prua mogunost da se

proizvodi dodaju u listu za kupovinu. Kod se nalazi u poglavlju 5.2. ViewCart.html - Strana koja prikazuje stavke koje je posetilaci izabrao i stavio u listu za

kupovinu. Kod se nalazi u poglavlju 5.3. Checkout.html - Strana prikazuje proizvode koji su tranutno na listi za kupovinu. Kod se nalazi u

poglavlju 5.4. home.html Poetna strana sa okvirima, prikazuje MenuBar.html u levom i Main.html u desnom

okviru. Kod ove strane je: Center Park Home Page

This page uses frames, but your browser doesn't support them.