1.

Kompletan JavaScript projekat

Do ovog trenutka ste već naučili 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 budžet. Evo liste funkcionalnih zahteva: • Dinamički kalendari. Studenti su tražili da mogu da vide svoje domaće zadatke i odgovarajuće rokove. Takođe ih interesuju i važni datumi (početak/kraj školske godine, odmori, sastanci, ...). Web strana treba da sadrži nekoliko dinamičkih kalendara, tako da svaki korisnik može da dobije informacije na način koji mu odgovara. • Mogućnost testiranja i ispitivanja. Potrebna je mogućnost vršenja online testiranja. Ova funkcionalnost je zgodan metod za ocenjivanje naprednih studenata u kontinualnom obrazovanju, kao i način za vršenje online istraživanja. • Online prodavnica. Prikupljanje sredstava je veoma važno za podržavanje programa i inicijativa. Zbog toga je potrebna online prodavnica gde je jednostavno dodati artikle za prikupljanje sredstava u bilo koje doba dana. Takođe je potrebno da strana sadrži i jednostavni digitron, tako da bi posetioci i članovi mogli da jednostavno preračunaju cene. • Siguran pristup, samo za članove. Mnoge od funkcionalnosti škole zahtevaju siguran pristup, samo za učenike i osoblje. • Rotirajući baneri. Potrebno je obezbediti prostor za reklame, za razlicite organizacije (sportske timove, orkestar ili razne učeničke klubove). Više rotirajućih banera će obezbediti linkove na odgovarajuće delove sajta. • Atraktivan izgled. Konačno, pored pomenutih funkcionalnosti, nas sajt treba i da izgleda lepo. Zbog toga mora da sadrži i različite dinamičke efekte. Kao što može da se vidi sa liste, projektovanje strane sadrži i neke napredne JavaScript funkcionalnosti. Međutim, iako su funkcionalnosti napredne, relativno ih je lako implementirati. Ne zaboravite da planirate! Iako se ovaj tekst ne tiče planiranja, planiranje je ključna tema koja ovde treba da bude pomenuta. Nezavisno od veličine vaše web strane planiranje je obavezno. Kad planirate stranu, budite sigurni da ste uzeli u obzir sledeća pitanja: • Koliki je rad potreban. Za razliku od jednostavnog spiska zahteva navedenog ranije, ovaj nivo planiranja definiše većinu funkcionalosti projekta, kao i aktere. • Posebni zahtevi za okruženje. Koji elektronski sistemi, hardver i softver već postoje, i koji treba da budu obezbeđeni za da bi strana funkcionisala? Da li se koriste specijalni proizvedi koji ograničavaju pristup strani (korišćenje ActiveX kontrola)? • Dizajn i dokumentacija. Šta ako uradite samo pola strane i udari vas autobus (ili pređete na drugi projekat, u manje nasilnom scenariju). Da bi vaši naslednici mogli da nastave vaš posao, potrebno je da dobro dokumentujete kod i svaki korak. Ovo je takođe korisno i ako vi kasnije želite da izmenite neku funkcionalnost, ili da ispravite grešku. Projekat 1

• Obuka. Iako ono što pravite ima smisla za vas, možda nije tako podrazumevajuće za vaše korisnike. Iako prethodno pomenuta dokumentacija može da pomogne, možda bi trebalo da razmislite o časovima obuke, kao i o pisanim uputstvima za upotrebu • Držanje postavljenih granica. Izuzetno je važno da izbegnete da vaš projekat ode u smeru koji niste planirali jer ćete sigurno biti ograničeni vremenom i sredstvima. To znači: pažljivo planirajte i držite se plana!

3.

Kreiranje JavaScript kalendara
3.1. Uvod

Učenici su u suštini neorganizovani. Administratori škole Center Park su se susreli sa istim problemom kad su probali da srede i prikažu informacije različitim zainteresovanim: učenicima, tutorima, roditeljima. Problem takođe nastaje kod organizovanja rada učenika, uključujući domaće zadatke i testove. Posebno je bitno da se studenti uloguju (koristeći 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.

Beskonačni kalendar

Postoje tri osobine koje dobar kalendar treba da poseduje: • Dobar kalendar treba da bude pregledan • Dobar kalendar treba da ima mogućnost promene meseca koji se prikazuje • Dobar kalendar treba da poseduje mogućnost interakcije sa podacima (u našem slučaju sa bazom podataka koja sadrži zadatke, tako da se ažurira po potrebi) Prikazivanje kalendara Možda najteži deo kreiranja online kalendara je kreiranje korisničkog interfejsa. Na sreću, JavaScript uključuje mnoge osobine koje ovo omogućavaju. Kao prvi korak u projektovanju, kreiraćemo kalendar koji prikazuje samo trenutni mesec (fajl Static_Calendar.html)
<html> <head> <title>Calendar</title> <script language="JavaScript"> <!-var now = new Date(); var month = new Date( fixYear( now.getYear() ), now.getMonth(), 1 ); var months = new Array( "Januar", "Februar", "Mart", "April", "Maj", "Jun", "Jul", "Avgust", "Septembar", "Octobar", "Novembar", "Decembar" ); function fixYear( year ) { return( year < 1000 ? year + 1900 : year ); } 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:

Projekat

2

return( 30 ); case 2: return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); } } // --> </script> </head> <body> <table border="1" cellpadding="2" width="75%"> <tr> <td colspan="7" align="center"> <font size="6"><b> <script language="JavaScript"> <!-document.write( months[month.getMonth()] + " " + fixYear( month.getYear() ) ); // --> </script> </b></font> </td> </tr> <tr> <td width="14%"><b><i>Nedelja</i></b></td> <td width="14%"><b><i>Ponedeljak</i></b></td> <td width="14%"><b><i>Utorak</i></b></td> <td width="14%"><b><i>Sreda</i></b></td> <td width="14%"><b><i>Cetvrtak</i></b></td> <td width="14%"><b><i>Petak</i></b></td> <td width="14%"><b><i>Subota</i></b></td> </tr> <tr> <script language="JavaScript"> <!-var startDay = month.getDay(); for( i = 0 ; i < startDay ; i++ ) { document.write( "<td></td>" ); } var numDays = getNumberDays( month ); for( i = 0 ; i < numDays ; i++ ) { if( ( i + startDay + 1 ) % 7 == 1 ) { document.write( "</tr><tr>" ); } document.write( "<td height='75' valign='top'><b>" + (i+1) + "</b></td>" ); } // --> </script> </tr> </table> </body> </html>

Ovaj primer prikazuje jednostavan kalendar. HTML kod se sastoji iz dva dela, funkcije i tabele. Na prvi pogled se čini da funkcije nisu neophodne. Međutim, 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

3

ispravlja ovaj bug i dozvoljava da se kalendar prikaže 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 očekivali da je deo JavaScript objekta Date, ali nije. Funkcija ima kao parametar objekat Date i vraća broj dana u mesecu (mesec se pročita iz atributa month). Ova funkcija se koristi kasnije, da bi se prikazao tačan broj dana. Drugi deo primera je prikaz tabele. Sad ćemo da prođemo kroz sve logičke korake kroz koje treba proći da bi kalendar bio ispravno prikazan. Prvo, trebaju vam dva različita naslovna reda, jedan za ime meseca, i jedan za imena dana.
<table border="1" cellpadding="2" width="75%"> <tr> <td colspan="7" align="center"> <font size="6"><b> <script language="JavaScript"> <!-document.write( months[month.getMonth()] + " " + fixYear( month.getYear() ) ); // --> </script> </b></font> </td> </tr> <tr> <td width="14%"><b><i>Nedelja</i></b></td> <td width="14%"><b><i>Ponedeljak</i></b></td> <td width="14%"><b><i>Utorak</i></b></td> <td width="14%"><b><i>Sreda</i></b></td> <td width="14%"><b><i>Cetvrtak</i></b></td> <td width="14%"><b><i>Petak</i></b></td> <td width="14%"><b><i>Subota</i></b></td> </tr>

Ime meseca se generiše iz niza months. Imena dana su jednostavno kodirana direktno na strani. Sledeći deo je komplikovaniji. Nije svakoga meseca prvi dan nedelja, tako da morate da nađete neki način da poravnate mesec sa prethodnim mesecom. Srećom, ako postavite da JavaScript Date objekat da bude prvi dan u mesecu, saznaćete koji je to dan, tako da ćete znati koliko dana treba da preskočite da bi ispravno prikazali kalendar. Za svaki dan koji treba da preskočite, jednostavno ostavite praznu ćeliju u tabeli.
<tr> <script language="JavaScript"> <!-var startDay = month.getDay(); for( i = 0 ; i < startDay ; i++ ) { document.write( "<td></td>" ); }

Promeljiva month sadrži datum koji odgovara prvom danu u tekućem mesecu. Poslednji deo je dodavanje dana u mesecu. Pošto već znate da ste počeli tačnog dana u nedelji, jednostavno ih dodate.
var numDays = getNumberDays( month ); for( i = 0 ; i < numDays ; i++ )

Projekat

4

{ if( ( i + startDay + 1 ) % 7 == 1 ) { document.write( "</tr><tr>" ); } document.write( "<td height='75' valign='top'><b>" + (i+1) + "</b></td>" ); } // --> </script> </tr> </table>

Ovde treba da brinete o početku novog reda. Uvek kad brojač (i) stigne do nedelje (koja se prikazuje u novoj vrsti), potrebno je da završite vrstu i započnete novu (pisanjem tagova </tr> i <tr>).

Rotiranje kalendara
Kalendar nije veoma koristan ako prikazuje samo jedan mesec. Ljudi često žele da planiraju mesecima, pa i godinama unapred. Na sreću, 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 prikažete neki drugi mesec, samo je potrebno da promenite ovu promenljivu. Postoje dva načina za dodavanje ove funkcionalnosti: korišćenjem URL parametara (prikazan sledeći) 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. Biće 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.
<script language="JavaScript"> <!-var y = fixYear( month.getYear()+ <change> ); var m = fixMonth( month.getMonth() + <change> ); document.write( "<a href='" + getLocation() + "?year=" + y + "&month=" + m + "'>" + months[m] + "</a>" ); // --> </script>

Svaki link generiše vrednost za godinu i mesec na osnovu trenutnih vrednost. Pošto se generiše nova vrednost, odgovarajući link se upiše u dokument. Da bi bilo jasnije, evo primera za vraćanje jedan mesec u nazad:
<script language="JavaScript"> <!-var y = fixYear( month.getYear() ); var m = fixMonth( month.getMonth()- 1 ); document.write( "<a href='" + getLocation() + "?year=" + y + "&month=" + m + "'>" + months[m] + "</a>" ); // --> </script>

Primetite, u ovom primeru nije modifikovana godina. Ovo je zbog toga što treba rotirati samo jednu vrednost u jednom trenutku. Vrednost <change> za promenu meseca je u ovom slučaju −1. Da bi prikazali promenjen kalendar, potreban je način da iz URL stringa izvučete parametre i da modifikujete promenljivu month. Ova promena je kratka, u poređenju sa prethodnom.
var urlquery = location.href.split( "?" ); if( urlquery[1] ) { var params = urlquery[1].split( "&" );

Projekat

5

split( "=" )[1] fixMonth( now.split( "?" ). var month = new Date( fixYear( now. now. } } // --> </script> Projekat 6 . funkcija je jednostavna: Ako u URL stringu postoji parametar za rotiranje URL stringa. "Maj". m.href. } function getNumberDays( d ) { switch( d.var y = ( params[0] ? params[0].getYear() ) var m = ( params[1] ? params[1].getYear % 4 == 0 ? 1 : 0 ) ).split( "=" )[1] : fixYear( now. case 2: return( 28 + ( d. if( urlquery[1] ) { var params = urlquery[1]. "Novembar". } function fixMonth( month ) { return( month < 0 ? month + 12 : (month > 11 ? month . Funkcija split objekta String deli string u više stringova. var m = ( params[1] ? params[1]. "Decembar" ). } function getLocation() { return( location.split( "&" ).getMonth() month = new Date( y. "Jul". "Octobar". month = new Date( y. m.getMonth() ) ). primenjuje se na promenljivu month. "Februar". Iako deluje komplikovano. var months = new Array( "Januar".html): <html> <head> <title>Calendar</title> <script language="JavaScript"> <!-var now = new Date().getMonth(). razdvojenih znakom koji se navodi kao parametar.getYear() ) ). var urlquery = location. "Mart". 1 ).12 : month) ).getYear() ). } function fixYear( year ) { return( year < 1000 ? year + 1900 : year ).split( "=" )[1] fixYear( now.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ). "Jun".split( "=" )[1] : fixMonth( now. "April". Ovim se vrši prevođenje stringa u niz stringova. case 4: case 6: case 9: case 11: return( 30 ). Ovaj deo koda dolazi posle deklarisanja promenljive month.split( "?" )[0] ). var y = ( params[0] ? params[0]. "Septembar". Evo kompletnog primera za rotirajući kalendar (fajl Rotating_Calendar. 1 ). } : ).href. 1 ). : ) ). "Avgust".

getYear() ) ). var m = fixMonth( month.getYear() . document.getMonth() ). document. // --> </script> </td> <td rowspan="2"> <center><font size="6"><b> <script language="JavaScript"> <!-document. document. document.1 ). // --> </script> </td> </tr> </table> <br><br> <br><br> <table border="1" cellpadding="2" width="75%"> <tr> <td width="14%"><b><i>Nedelja</i></b></td> Projekat 7 .write( "<a href='" + getLocation() + "?year=" + y + "&month=" + m + "'>" + y + "</a>" ).getYear() ).write( months[month.write( "<a href='" + getLocation() + "?year=" + y + "&month=" + m + "'>" + y + "</a>" ).getYear() + 1 ).write( "<a href='" + getLocation() + "?year=" + y + "&month=" + m + "'>" + months[m] + "</a>" ).write( "<a href='" + getLocation() + "?year=" + y + "&month=" + m + "'>" + months[m] + "</a>" ).</head> <body> <table cellpadding="2" width="75%"> <tr> <td> <script language="JavaScript"> <!-var y = fixYear( month.getMonth() + 1 ).getMonth()] + " " + fixYear( month.getMonth() ). var m = fixMonth( month. var m = fixMonth( month. // --> </script> </td> <td align="right"> <script language="JavaScript"> <!-var y = fixYear( month. // --> </script> </center></b></font> </td> <td align="right"> <script language="JavaScript"> <!-var y = fixYear( month. var m = fixMonth( month.getMonth(). // --> </script> </td> </tr> <tr> <td> <script language="JavaScript"> <!-var y = fixYear( month.1 ).getYear() ).

write( "<td height='75' valign='top'b>" + (i+1) + "</b></td>" ). ") %> <% WEnd %> ). i++ ) { if( ( i + startDay + 1 ) % 7 == 1 ) { document. Evo jednostavnog primera za učitavanje podataka iz baze na serveru. kao što je ASP ili ASP.DATABASE=MyDatabase" ) Dim SQL_Statement Dim Record_Set SQL_Statement = "Select * FROM Calendar_Events_Table" Set Record_Set = Database_Connection. } document. Server-side jezik.getDay(). for( i = 0 . // --> </script> </head> Projekat 8 . i++ ) { document.write( "</tr><tr>" ).EOF %> <%=Response.Connection" ) Database_Connection.Execute( SQL_Statement ) %> <html> <head> <title>Calendar Example</title> <script language="JavaScript"> <!-// Other JavaScript functions var tasks = new Array( <% While NOT Record_Set." & "SERVER=MyServer. i < startDay . i < numDays .<td width="14%"><b><i>Ponedeljak</i></b></td> <td width="14%"><b><i>Utorak</i></b></td> <td width="14%"><b><i>Sreda</i></b></td> <td width="14%"><b><i>Cetvrtak</i></b></td> <td width="14%"><b><i>Petak</i></b></td> <td width="14%"><b><i>Subota</i></b></td> </tr> <tr> <script language="JavaScript"> <!-var startDay = month. } var numDays = getNumberDays( month ).write( "<td></td>" ). da bi se dobili događaji za željeni mesec. dobijanje i postavljanje događaja ne može da se napiše samo u JavaScript-u. } // --> </script> </tr> </table> </body> </html> Dobijanje i postavljanje događaja za kalendar Pošto JavaScript nema ulaz/izlaz.Open( "DRIVER={SQL Server}.CreateObject( "ADODB.write( "'Record_Set("task")'.NET. je potreban za slanje upita bazi podataka. for( i = 0 . i ne može da komunicira sa serverom da bi zatražio podatke iz baze podataka. koristeći ASP: <%@ LANGUAGE=VBSCRIPT %> <% Dim Database_Connection Set Database_Connection = Server.

write( " bordercolor='red'" ). } var numDays = getNumberDays( month ).getMonth() == month.getDate() == i + 1 ) document.write( "<td height="75" valign='top'" ).write( "<td height='75' valign='top'" ). U ovom slučaju. for( i = 0 . <table border="1" cellpadding="2" width="75%"> <tr> <td width="14%"><b><i>Nedelja</i></b></td> <td width="14%"><b><i>Ponedeljak</i></b></td> <td width="14%"><b><i>Utorak</i></b></td> <td width="14%"><b><i>Sreda</i></b></td> <td width="14%"><b><i>Cetvrtak</i></b></td> <td width="14%"><b><i>Petak</i></b></td> <td width="14%"><b><i>Subota</i></b></td> </tr> <tr> <script language="JavaScript"> <!-var startDay = month.write( "</tr><tr>" ).getMonth() && now.<body> <!-Place calendar here --.write( tasks[i+1] ).write( tasks[i+1] ).getYear() ) && now. i. if( tasks[i+1] ) document. document. Naredba if crta crveni okvir oko polja ako se prikazuju trenutni mesec i godina.getDate() == i + 1 ) document.write( " bordercolor='red'" ). upisuje ga u trenutnu ćeliju tabele. i++ ) { if( ( i + startDay + 1 ) % 7 == 1 ) { document.write( tasks[i+1] ). } document.> </body> </html> JavaScript može da prikaže informacije koje dobije.write( "><b>" + (i+1) + "</b><br>" ).getYear() ) == fixYear( month. i ime polja je tasks.write( "><b>" + (i+1) + "</b><br>" ). prikazivanje informacije je jednostavno. možda je dobra ideja da se obeleži ćelija koja predstavlja današnji dan. Zavisno od upotrebe tabele.getDay(). Da bi pojednostavili. if( fixYear( now. document.getYear() ) == fixYear( month. i++ ) { document.write( "</td>" ). for( i = 0 . document. Sledeći kod dodaje ovu funkcionalnost document.getMonth() == month. i < startDay .getYear() ) && now. Evo kompletnog primera koji koristi rotirajući kalendar i prikazuje nekoliko zadataka u odgovarajućim danima (ime fajla je Calendar. smatramo da ASP vraća podatke u obliku JavaScript polja.getMonth() && now. document. if( fixYear( now. ako zadatak postoji.html): <html> Projekat 9 . } // --> </script> </tr> </table> Ovaj primer kreira kalendar i puni ga. if( tasks[i+1] ) document. i < numDays . proverava polje sa zadacima. Linija if( tasks[i+1] ) document.write( "<td></td>" ).write( "</td>" ).

"Februar". "Decembar" ).getMonth() ). + ( d. "Mart". m = fixMonth( mString ? parseInt( mString ) : now. var now = new Date(). } function getNumberDays( d ) { switch( d. "Maj".html'>Take CS Test</a>".indexOf( name ). // --> Projekat 10 . y = fixYear( yString ? parseInt( yString ) : now.write( getCookieValue( "username" ) + "</b>!! " )."> <i>Welcome</i><b> <script language="JavaScript"> <!-document.getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 case 4: case return( 30 case 2: return( 28 } } // These should be loaded from a server-side language such as ASP var tasks = new Array( 30 ).length + 1. if( begin < 0 ) return( "" ).indexOf( ".". 1 ). var begin = c.cookie. 6: case 9: case 11: ). // --> </script> </head> <body onLoad="JavaScript: document. begin ). "Novembar". "Jul". if( end == -1 ) end = c.<head> <title></title> <script language="JavaScript"> <!-var months = new Array( "Januar". </script> <i>Here are your tasks for</i> ). "April". "Jun". m.slice( begin. month = new Date( y. } function fixYear( year ) { return( year < 1000 ? year + 1900 : year ). return( c. } function fixMonth( month ) { return( month < 0 ? month + 12 : (month > 11 ? month . mString = getCookieValue( "month" ).getYear % 4 == 0 ? 1 : 0 ) ). "Octobar". tasks[5] = "<a href='Test. "Avgust". end ) ). begin += name. "Septembar". var var var var var function getCookieValue( name ) { var c = document.getYear() ). tasks[28] = "English Paper Due". var end = c. yString = getCookieValue( "year" ).12 : month) ).length.cookie='loggedin=true'.

write( "onClick=\"JavaScript: document.location + "\" " ). // --> </script> </b></font> </td></tr> </table> <table border="1" cellpadding="2" width="75%"> <tr> <td width="14%"><b><i>Nedelja</i></b></td> <td width="14%"><b><i>Ponedeljak</i></b></td> <td width="14%"><b><i>Utorak</i></b></td> <td width="14%"><b><i>Sreda</i></b></td> <td width="14%"><b><i>Cetvrtak</i></b></td> <td width="14%"><b><i>Petak</i></b></td> <td width="14%"><b><i>Subota</i></b></td> </tr> <tr> <script language="JavaScript"> <!-var startDay = month. } document.write( "</td>" ).write( " bordercolor='red'" ). Projekat 11 . i++ ) { document.write( "<a href=\"" + document.write( "<td></td>" ). document.write( "<a href=\"" + document.getYear() ) == fixYear( month. } var numDays = getNumberDays( month ).write( "><b>"+(i+1)+"</b><br>" ).cookie='month=" + fixMonth(m-1) + "'. if( fixYear( now. i < startDay .write( "</tr><tr>" ).getDay().location + "\" " ).<table width="75%"> <tr><td align="center"> <font size="6"><b> <script language="JavaScript"> <!-document. document. // --> </script> </td> <td align="right"> <script language="JavaScript"> <!-document. i < numDays .getYear() ) && now. i++ ) { if( ( i + startDay + 1 ) % 7 == 1 ) { document. document. if( tasks[i+1] ) document. for( i = 0 . for( i = 0 .\">" ).write( months[fixMonth(m-1)] + "</a>" ).getDate() == i + 1 ) document.getMonth() && now. } // --> </script> </tr> </table> <table width="75%"> <tr> <td> <script language="JavaScript"> <!-document.getMonth() == month. document.write( "<td height='75' valign='top'" ).write( tasks[i+1] ).write( months[m] ).

write( "<a href=\"" + document. u trenutku kad se loguje na stranu (ovo će biti objašnjeno kasnije). y = fixYear( yString ? parseInt( yString ) : now. 3. Korišćenje roditeljskog prozora za poziv kalendara će biti razmotreno kasnije Kod za prikazivanje kalendara bi do sada trebao da vam bude jasan. Bitna stvar je da ovaj primer koristi cookie-je umesto URL stringa za prenos parametara za mesec i godinu. Oba metoda funkcionišu dobro.cookie='month=" + fixMonth(m+1) + "'. document. Prikazivanje pop-up kalendara Prikazivanje kaledara je u stvari kreiranje tabele i popunjavanje podacima. m = fixMonth( mString ? parseInt( mString ) : now. mString = getCookieValue( "month" ).4.getMonth() ). 3. // --> </script> Iako se ovaj način prenosa parametara razlikuje. 1 ). document. // --> </script> </td> </tr> </table> </body> </html> Ovaj primer je deo Center Park Web strane i to je ono što korisnik vidi.cookie='month=" + fixMonth(m-1) + "'. Ovaj metod je skoro isti kao izdvajanje parametara iz URL stringa. od vas zavisi koji ćete izabrati za svoju stranu. m.write( months[fixMonth(m+1)] + "</a>" ). tako ga jednostavno dajemo.\">" ). Srećom.\">" ). Međutim.. pop-up prozor se zatvara i popunjava se polje u početnom prozoru • u ovom kalendaru se ne prikazuju događaji I kod pop-up kalendara su prikazivanje i rotacija dve osnovne funkcionalnosti.html: <html> <head> <title>Date Chooser</title> Projekat 12 .Ime ovog fajla je Simple_Popup_Calendar. <script language="JavaScript"> <!-document.document. Dva linka na dnu strane omogućavaju korisniku da rotira kalendar. Pop-Up kalendar za kompletiranje forme Pop-up kalendar je potpuno drugačiji tip kalendara.getYear() ). funkcionalnost je identična. Evo osnovnog formata za ova dva linka.write( months[fixMonth(m+<change>)] + "</a>" ). Razlozi zbog čega se pop-up kalendar razlikuje od beskonačnog kalendara: • pop-up kalendar se prikazuje u posebnom prozoru • pošto korisnik izabere datum. document.write( "onClick=\"JavaScript: document. većina koda za njegovo kreiranje je skoro identična. sada treba voditi računa o komunikaciji između prozora između kalendara i početnog (roditeljskog) prozora. month = new Date( y. Iako se razlikuje od beskonačnog kalendara.3. Kod koji izdvaja parameter iz cookie-ja je sledeći: var var var var var yString = getCookieValue( "year" ).location + "\" " ). ovde ne treba prikazati događaje.write( "onClick=\"JavaScript: document. i objašnjavamo samo neke osobine.

write( months[fixMonth( month. "Novembar". "Jul". "Mart". "Jun". } } function onSelect() { } // --> </script> </head> <body> <form name="theForm"> <table border="1" width="75%" style="border-collapse: collapse"> <tr> <td align="left" colspan=2> &nbsp. now. 1 ).12 : month) ). "Avgust". case 2: return( 28 + ( d.getMonth().getYear() ).getYear() ) ). function fixYear( year ) { return( year < 1000 ? year + 1900 : year ). "April". "Decembar" ).getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ).</td> </tr> <tr> <td width="14%"><b><i>Ned</i></b></td> <td width="14%"><b><i>Pon</i></b></td> <td width="14%"><b><i>Uto</i></b></td> <td width="14%"><b><i>Sre</i></b></td> <td width="14%"><b><i>Cet</i></b></td> <td width="14%"><b><i>Pet</i></b></td> <td width="14%"><b><i>Sub</i></b></td> </tr> <tr> Projekat 13 . "Octobar". // --> </script></b></center> </td> <td align="right" colspan=2> &nbsp. "Februar". } function getNumberDays( d ) { switch( d. </td> <td colspan=3> <center> <b><script language="JavaScript"> <!-document.getMonth() )] + " " + fixYear( month. case 4: case 6: case 9: case 11: return( 30 ). "Maj". "Septembar".getYear % 4 == 0 ? 1 : 0 ) ). months = new Array( "Januar".<script <!-var var var language="JavaScript"> now = new Date(). month = new Date( fixYear( now. } function fixMonth( month ) { return( month < 0 ? month + 12 : (month > 11 ? month .

<script language="JavaScript"> <!-var startDay = month. } var numDays = getNumberDays( month ). da bi kalendar mogao da se rotira.getYear() ) ).' " + "value='" + (i < 10 ? " " : "") + i + "' " + "class='mono'>" + "</center></td>" ).getMonth() + 1 ) + "/" + i + "/" + fixYear( month. pitanje je veličina kalendara. // --> </script></b><br> <input type="submit" value="Submit"> </center> </td> Projekat 14 . Zbog toga što će kalendar da se prikaže u novom prozoru. for( i = 1 .write( "</tr><tr>" ). } document.write( "<td></td>" ). // --> </script> </td> <td colspan=3> <center> <b><script language="JavaScript"> <!-document. for( i = 0 . Dugmad se koriste u ćelijama tabele zbog toga što na taj način izazivaju događaje koji se jednostavno hvataju.value=\"" + fixMonth( month. Prvo mest je tag script. Rotiranje pop-up kalendara Kod treba da se modifikuje na dva mesta. i++ ) { document. } // --> </script> </tr> </table> <input type="hidden" name="date"> </form> </body> </html> U ovom primeru.getYear() ) + "\". gde dodajemo linkove koji dodaju parametre u URL.date. da bi razumeli kako funkcioniše prvi deo. onSelect().getMonth() )] + " " + fixYear( month. verovatno će biti manji od roditeljskog prozora. Evo modifikovanog koda: <tr> <td align="left" colspan=2> <b>Month:</b> <input type="text" name="Month" size="5"> <script language="JavaScript"> <!document. Prvo diskutujemo drugi deo.value = fixMonth( month. Ovog puta. Drugo mesto je u sekciji body. i < startDay . dodajemo tekst polje da bi korisnik mogao da unese broj meseca i datum koji želi da vidi. Funkcija onSelect() i sakriveno polje forme će biti objašnjeno kasnije.getMonth() + 1 ). da bi mogli da iz URL-a izvičemo nove parametre pomoću kojih modifikujemo promenljivu month.getDay(). da bi kalendar mogao da se rotira. 3.5. Ovo modifikuje samo prvu vrstu kalendara.write( "<td><center>" + "<input type='button' " + "onClick='JavaScript: document.write( months[fixMonth( month. i++ ) { if( ( i + startDay ) % 7 == 1 ) { document. i < numDays + 1 .Month.theForm.theForm.

"April".split( "?" ).1 : fixMonth( now. "Septembar". m. Evo kompletnog koda za rotirajući pop-up kalendar (fajl PopUpCalendar. 1 ). "Octobar".split( "?" ).value = fixYear( month. } function fixYear( year ) { return( year < 1000 ? year + 1900 : year ). 1 ).getMonth().theForm. Pošto su imena tekst polja Month i Year. možemo da koristimo isti kod koji je korišćen za beskonačni kalendar. } --> </style> <script language="JavaScript"> <!-var now = new Date(). var months = new Array( "Januar".Year. if( urlquery[1] ) { var params = urlquery[1]. Mesec i godina keje se prikazuju u kaledaru su podrazumevane vrednosti za oba tekst polja. 1 ). Obe kontroliše Submit dugme koje se nalazi ispod naslova meseca. month = new Date( y.split( "=" )[1] : fixYear( now.getYear() ) ). za njihovo dobijanje iz URL stringa: var urlquery = location.split( "&" ). vrši se osvežavanje strane i menja se kalendar.mono{ font-family: monospace.split( "=" )[1] .href. } function fixMonth( month ) { return( month < 0 ? month + 12 : ( month > 11 ? month . "Maj". m.getYear() ).12 : month ) ). var m = ( params[0] ? params[0].split( "=" )[1] : fixYear( now. if( urlquery[1] ) { var params = urlquery[1].getMonth() ) ). "Avgust". "Februar". Kad se pritisne dugme Submit. "Novembar". month = new Date( y.split( "&" ).<td align="right" colspan=2> <b>Year:</b> <input type="text" name="Year" size="5"> <script language="JavaScript"> <!-document. //--> </script> </td> </tr> Prva ćelija u redu sadrži teks polje za unos meseca a treća ćelija sadrži tekst polje za unos godine.getYear() ). "Jun". var month = new Date( fixYear( now.html): <html> <head> <title>Izbor datuma</title> <style type="text/css"> <!-. } function getNumberDays( d ) { Projekat 15 .getMonth() ) ). "Jul". var urlquery = location. "Mart". } Modifikovanje promenljive month će. var m = ( params[0] ? params[0]. var y = ( params[1] ? params[1].href.getYear() ) ). kao i ranije.split( "=" )[1]: fixMonth( now. now. promeniti tekst koji se prikazuje u tabeli kalendara. "Decembar" ). var y = ( params[1] ? params[1].

case 4: case 6: case 9: case 11: return( 30 ).bgColor = bg.indexOf( ". = getCookieValue( "fgColor" ).fgColor = fg.indexOf( name ).getMonth() )] + " month.setDate( document. // --> </script> </td> <td colspan=3> <center> <b><script language="JavaScript"> <!-document. if( end == -1 ) end = c. return( c. self.theForm. <body onLoad="JavaScript: setCustoms(). var end = c. case 2: return( 28 + ( d. } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ). != "" ) document.write( months[fixMonth( month. begin ).getMonth() + 1 ).theForm. } function getCookieValue( name ) { var c = document.opener.length."> <form name="theForm"> <table border="1" width="75%" style="border-collapse: collapse"> <tr> <td align="left" colspan=2> <b>Mesec:</b> <input type="text" name="Month" size="5"> <script language="JavaScript"> <!-document. if( begin < 0 ) return( "" ).slice( begin.value ). var begin = c. begin += name.length + 1.switch( d.close().getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ).date.Month. != "" ) document.cookie.getYear % 4 == 0 ? 1 : 0 ) ).value = fixMonth( month.". } } function onSelect() { window. end ) ).getYear() ) ). // --> </script></b><br> <input type="submit" value="Submit"> </center> </td> <td align="right" colspan=2> <b>Godina:</b> " + fixYear( Projekat 16 .

value=\"" fixMonth( month. Kreiranje online testa ili istraživanja 4. // --> </script> </td> </tr> <tr> <td width="14%"><b><i><center>Ned</center></i></b></td> <td width="14%"><b><i><center>Pon</center></i></b></td> <td width="14%"><b><i><center>Uto</center></i></b></td> <td width="14%"><b><i><center>Sre</center></i></b></td> <td width="14%"><b><i><center>Cet</center></i></b></td> <td width="14%"><b><i><center>Pet</center></i></b></td> <td width="14%"><b><i><center>Sub</center></i></b></td> </tr> <tr> <script language="JavaScript"> <!-var startDay = month.1. Evo kompletnog koda (fajl Test. for( i = 0 . } document.theForm. i++ ) { document.Year. Kreiranje testa Kreiranje test dela online testa (za razliku od dela sa ocenjivanjem) je veoma jednostavno.getMonth() + 1 ) + "/" + i + "/" + fixYear( month.<input type="text" name="Year" size="5"> <script language="JavaScript"> <!-document. i < numDays + 1 .getDay().value = fixYear( month.getYear() ) + onSelect().write( "<td></td>" ). i < startDay .write( "</tr><tr>" ).getYear() ). 4.' " + "value='" + ( i < 10 ? " " : "" ) + i + "' " + "class='mono'>" + "</center></td>" ). Do sad bi trebalo da ste naučili kako da kreirate obrazac i da proverite ispravnost unetih podataka pre njegovog slanja.html): <html> <head> <title>Center Park . i++ ) { if( ( i + startDay ) % 7 == 1 ) { document. } var numDays = getNumberDays( month ).Prvi kolokvijum iz predmeta Internet i Web tehnologije</title> <script language="JavaScript"> <!-- Projekat 17 . } // --> </script> </tr> </table> <input type="hidden" name="date"> </form> </body> </html> + "\".date.theForm. for( i = 1 .write( "<td><center>" + "<input type='button' " + "onClick='JavaScript: document.

Imate 30 minuta da zavrsite kolokvijum.length.bgColor = bg.indexOf( name ). begin ). } function getCookieValue( name ) { var c = document. var begin = c. if( begin < 0 ) return( "" ). Pretpostavljajuci da su operatori levo asocijativni."> <b><font size="5">Internet i web tehnologije . } } } return( true ).html". if( end == -1 ) end = c. function validate( form ) { for( i = 0 .location = "Main.if( getCookieValue( "loggedin" ) != "true" ) document. = getCookieValue( "fgColor" ). return( false ). Ne trosite previse vremena na neko pitanje. i++ ) { with( form.length .indexOf( ".cookie. != "" ) document."> <table width="100%" cellpadding="2" cellspacing="2"> <tr> <td>1)</td> <td> <font face="Courier"> Zamislite da aritmeticki operatori nemaju prioritet. return( c.fgColor = fg.Prvi kolokvijum</font> </b> <br><br> <font face="Courier"> Sva pitanja su <b>obavezna</b>. <i>Pazljivo</i> procitajte pitanje pre nego sto na njega odgovorite. end ) ).length + 1. begin += name.elements.".elements[i] ) { if( type == "text" && value == "" ) { alert( "Odgovorite na sva pitanja. Srecno! </font> <br><br> <form name="TestForm" action="Grade.slice( begin." ). koja je vrednost izraza 5-3*4/2+6 ? </font> </td> </tr> Projekat 18 . i < form. var end = c. <body onLoad="JavaScript: setCustoms(). != "" ) document.html" onSubmit="JavaScript: return( validate( this ) ). } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ).

1000 * 60 * 30 ).</td></tr> <tr> <td>4)</td> <td> <font face="Courier"> Koji tip opsega vazenja promenljive koristi JavaScript? </font> </td> </tr> <tr> <td>Odgovor</td> <td><input type="text" name="Q4" size="20"></td> </tr> <tr><td>&nbsp.</td><td>&nbsp.<tr> <td>Odgovor</td> <td><input type="text" name="Q1" size="20"></td> </tr> <tr><td>&nbsp.TestForm.</td></tr> <tr> <td>3)</td> <td> <font face="Courier"> Koji se dogadjaj poziva posto koristnik selektuje tekst ili HTML element na web strani? </font> </td> </tr> <tr> <td>Odgovor</td> <td><input type="text" name="Q3" size="20"></td> </tr> <tr><td>&nbsp.enabled=false".</td><td>&nbsp.</td><td>&nbsp.</td></tr> <tr> <td>2)</td> <td> <font face="Courier"> u kom HTML tagu moraju da budu ugnjezdeni sve JavaScript funkcije? </font> </td> </tr> <tr> <td>Odgovor</td> <td><input type="text" name="Q2" size="20"></td> </tr> <tr><td>&nbsp.</td><td>&nbsp.</td></tr> <tr> <td>5)</td> <td> <font face="Courier"> Koji relacioni oparator se koristi da bi se proverilo da li dve promenljive istog tipa nisu jednake? </font> </td> </tr> <tr> <td>Odgovor</td> <td><input type="text" name="Q5" size="20"></td> </tr> </table> <br> <input type="submit" value="Submit" name="SubmitButton"> </form> <script language="JavaScript"> <!-window.setTimeout( "document.SubmitButton. // --> Projekat 19 .

Pošto smo ovo rešili. } } } return( true ). tako da modifikujemo funkciju getCookieValue() tako da radi sa URL stringom. <script language="JavaScript"> <!-window. Evo kompletnog koda za stranu Grade. Funkcionalnost ove druge strane je objašnjena kasnije.SubmitButton. begin ).setTimeout( "document. poziva se funkcija validate().elements[i] ) { if( type == "text" && value == " " ) { alert( "Please answer all questions. 4. Na žalost. isti problem smo imali i u radu sa cookie fajlovima. Kreiranje strane koja vrši automatsko ocenjivanje Ideja je bila da se test automatski oceni.enabled=false". function validate( form ) { for( i = 0 . Sada postoji problem.length . var end = c. var begin = c. pojavljuje se poruka upozorenja i forma se ne šalje. Na sreću. tako da nam treba rešenje koje dobija parove name=value u bilo kom redosledu. kad se pritisne dugme Submit i da se odmah prikažu rezultati. U Netscape browser-ima se ovo ne dešava. koristeći znak (&) kao delimiter. end ) ) ). if( begin < 0 ) return( "" ).length + 1. begin += name.2. } koja proverava da li su sva tekst polja popunjena.href.TestForm. return( false ). u obliku name=value preko URL stringa. Forma sadrži pet pitanja. kako preneti podatke iz forme sa jedne strane na drugu? U prethodnoj sekciji smo podatke iz forme slali posebnoj stranici.slice( begin. forma se šalje u posebnu HTML stranu. Kad se jednom pritisne dugme Submit. Ovo je razlog što nismo uvrstili i preostalo vreme na stranu.elements. Ako neko polje nije popunjeno.length. Poslednji script tag blokira dugme Submit 30 minuta pošto je strana učitana. return( unescape( c. // --> </script> Napomena: U Internet Explorer-u se dešava interesantna pojava.indexOf( name ). } Umesto da u cookie fajlu tražimo parove name=value. svako sa tekst poljem u koje korisnik upisuje odgovor.indexOf( "&". koja se zove Grade. tajmer prestaje da broji. function getFormValue( name ) { var c = location. 1000 * 60 * 30 ). i < form. koja se zove Grade. da korisnik ne bi postao svestan ovog bag-a.html. i++ ) { with( form.</script> </body> </html> Kompletan test bi trebao da vam bude poznat. sad treba da generišemo rezultat. ne možemo unapred da znamo kojim redosledom će polja forme da se pojave u URL stringu. Ako je odgovoreno na sva pitanja.split( "?" )[1]. Stvar koju možda niste videli do sada je vremensko ograničenje." ).html. if( end == -1 ) end = c. Pre nego što se pošalje forma. ova funkcija pretražuje URL string u potrazi za željenom informacijom.html: Projekat 20 .

= getCookieValue( "fgColor" ). if( end == -1 ) end = c.<html> <head> <title>Center Park ."> <b><font size="5">Center tehnologije</font> </b> <br><br> <font face="Courier"> Sva pitanja su <b>obavezna</b>.cookie. var end = c. if( end == -1 ) end = c. function getFormValue( name ) { var c = location. end ) ) ).length + 1. begin += name. begin ).indexOf( "&". != "" ) document.length + 1.fgColor = fg.indexOf( ".". Imate 30 minuta da zavrsite kolokvijum.slice( begin. return( unescape( c. Srecno! </font> <br><br> <form> <table width="100%" cellpadding="2" cellspacing="2"> <tr> <td>1)</td> <td> <font face="Courier"> Zamislite da aritmeticki operatori nemaju prioritet. koja je vrednost izraza 5-3*4/2+6 ? </font> </td> </tr> Park Prvi kolokvijum iz predmeta Internet i Web Projekat 21 . <i>Pazljivo</i> procitajte pitanje pre nego sto na njega odgovorite. if( begin < 0 ) return( "" ). } function getCookieValue( name ) { var c = document. <body onLoad="JavaScript: setCustoms(). } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ).length. begin += name. begin ). return( c. var begin = c.indexOf( name ).split( "?" )[1]. Ne trosite previse vremena na neko pitanje. Pretpostavljajuci da su operatori levo asocijativni. != "" ) document.href. correct = 0. var begin = c.length.slice( begin.Rezultati testa</title> <script language="JavaScript"> <!-var total = 0.bgColor = bg. end ) ). var end = c.indexOf( name ). if( begin < 0 ) return( "" ).

<script language="JavaScript"> <!-if( parseInt( getFormValue( "Q1" ) ) == 10 ) { document. // --> </script> </td> </tr> <tr><td>&nbsp.<tr> <td>Odgovor</td> <td><b>10</b>&nbsp.&nbsp. correct++ Projekat 22 .&nbsp. <script language="JavaScript"> <!-if( getFormValue( "Q2" ).</td></tr> <tr> <td>2)</td> <td> <font face="Courier"> u kom HTML tagu moraju da budu ugnjezdeni sve JavaScript funkcije? </font> </td> </tr> <tr> <td>Odgovor</td> <td><b>SCRIPT</b>&nbsp.write( "<font color='red'><b>TACNO!</b></font>" ).</td><td>&nbsp.</td></tr> <tr> <td>3)</td> <td> <font face="Courier"> Koji se dogadjaj poziva posto koristnik selektuje tekst ili HTML element na web strani? </font> </td> </tr> <tr> <td>Odgovor</td> <td><b>OnSelect</b>&nbsp.</td><td>&nbsp.write( "<font color='red'><b>Pogresno</b></font> Vi ste ogovorili: " + getFormValue( "Q2" ) ).write( "<font color='red'><b>TACNO!</b></font>" ).&nbsp.write( "<font color='red'><b>Netacno</b></font> Vi ste odgovorili: " + getFormValue( "Q1" ) ).toUpperCase() == "SCRIPT" ) { document.&nbsp. } total++.&nbsp.toUpperCase() == "ONSELECT" ) { document.&nbsp. } total++.&nbsp. correct++ } else { document. <script language="JavaScript"> <!-if( getFormValue( "Q3" ).write( "<font color='red'><b>TACNO!</b></font>" ). correct++ } else { document.&nbsp.&nbsp. // --> </script> </td> </tr> <tr><td>&nbsp.&nbsp.&nbsp.&nbsp.

</td></tr> <tr> <td>4)</td> <td> <font face="Courier"> Koji tip opsega vazenja promenljive koristi JavaScript? </font> </td> </tr> <tr> <td>Odgovor</td> <td><b>Static</b>&nbsp. <script language="JavaScript"> <!-if( getFormValue( "Q4" ).write( "<font color='red'><b>CORRECT!</b></font>" ).&nbsp.&nbsp. // --> </script> </td> </tr> <tr><td>&nbsp. } total++.</td><td>&nbsp.write( "<font color='red'><b>CORRECT!</b></font>" ).</td></tr> <tr> <td>5)</td> <td> <font face="Courier"> What relational operator is used to determine if two variables of the same type are not equal to each other? </font> </td> </tr> <tr> <td>Answer</td> <td><b>!=</b>&nbsp.&nbsp. // --> </script> Projekat 23 .toUpperCase() == "STATIC" ) { document.</td><td>&nbsp. } total++.write( "<font color='red'><b>Wrong</b></font> You answered: " + getFormValue( "Q4" ) ).&nbsp.&nbsp. correct++ } else { document.write( "<font color='red'><b>Pogresno</b></font> Vi ste odgovorili: " + getFormValue( "Q3" ) ).} else { document.write( "<font color='red'><b>Wrong</b></font> You answered: " + getFormValue( "Q5" ) ). } total++. correct++ } else { document. // --> </script> </td> </tr> <tr><td>&nbsp.&nbsp. <script language="JavaScript"> <!-if( getFormValue( "Q5" ) == "!=" ) { document.&nbsp.&nbsp.

cookie fajl. price ) { var i = 1.## Treba zapamtiti da String za opis stavke ne sme da sadrži zareze. radi eventualnog uklanjanja stavki. Kad je u pitanju lista za kupovinu. Izbor stavki i dodavanje u listu Najvažnija osobina liste za kupovinu je mogućnost da čuva stvari (pointere na robu). Jedno od mesta su URL parametri.. Drugi deo je strana gde može da se dobije pregled liste. isporuci. document. podaci se čuvaju u obliku name=value. Ako koristite prethodni format. i++ ). Poslednji deo je izlazna strana. Na žalost.</td> </tr> </table> </form> <br><br> <script language="JavaScript"> <!-document. } Funkcija stavlja stavke u cookie u sledećem formatu: item# = String za opis stavke. Postoje tri dela strane za kupovinu.. Treba napisati funkciju koja dodaje stavku u listu.cookie = "items=" + i. Naša strana sadrži stranu za kupovinu. 5. Ova funkcija. tako da za čuvanje podataka o kupovini čuvamo u formatu number=description . Your score is " + (correct/total*100) + "%</b></font>" ). potrebno je da se pamti i cena. for( .#. već i čuva podatke o broju stavki. postoji samo još jedan način da se čuvaju podaci o kupovini .cookie = "item" + i + "=" + name + ". kontroli inventara.1. // --> </script> </body> </html> Jedina razlika izmedju testa i istrazivanja je u tome što istrazivanje ne sadrzi deo sa ocenjivanjem. pored toga što dodaje stavku na prvo slobodno mesto. getCookieValue( "item" + i ) != "" .cost. description je ime stavke i cost je cena stavke. ovde postoji puno problema: postoji ograničenje u dužini i prave probleme kad se koristi više strana. koja se koristi u skoro svakom programu koji radi sa cookie fajlovima: function getCookieValue( name ) { Projekat 24 . Prethodna funkcija koristi posebnu funkciju. funkcija ima sledeći izgled: function addItem( name. Postoje ozbiljni problemi u naplati. Prvi deo su strane gde se stavke dodaju na listu. Kreiranje strane za kupovinu 5. Na žalost. Deo number je redni broj stavke u listi. Uvod Online prodavnicu je relativno lako implementirati. tako da ovde neće biti dat primer istraživanja. Prvo treba odlučiti gde i kako treba čuvati podatke. Pošto ulaz/izlaz iz fajla ne postoji u JavaScript-u. U cookie fajlu." + price. postoje ozbiljni problemi u vođenju iste. 5. koja se u potpunosti nalazi na računaru klijenta i oslanja se na kreiranje cookie-ja.write( "<font color='red'><b>You got " + correct + " correct out of " + total + " questions.2. getCookieValue(). jer ovo kasnije komplikuje prikazivanje liste. document.

for( .</td> <td> $19.</td> <td> $9. != "" ) document.99</td><td align="center"> Projekat 25 .bgColor = bg.". Evo kompletnog koda (fajl Store. amblem skole na prednjoj strani. i++ ).indexOf( name ).length.slice( begin. var end = c."> <b><font size="6">Prodavnica skole Center Park-</font></b> <font size="4">za sve vase potrebe za skolskim priborom</font><br><br> <form> <table border="2" width="100%"> <tr> <td>Skolska kapa .cookie = "item" + i + "=" + name + ". if( begin < 0 ) return( "" ).cookie.". } function getCookieValue( name ) { var c = document. var begin = c. begin ).'.Jedna velicina odgovara svima. 9. } Pošto smo rešili preoblem čuvanja podataka i dodavanja stavke u cookie. amblem skole na prednjoj strani.cookie = "items=" + i. begin += name. document. price ) { var i = 1. var end = c. if( end == -1 ) end = c.99 ).length + 1. begin += name. end ) ). } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ). <body onLoad="JavaScript: setCustoms()."> </td> </tr> <tr> <td>Skolska majica .fgColor = fg.Prodavnica</title> <script language="JavaScript"> <!-function addItem( name. var begin = c.velicine S-M-L. return( c. if( begin < 0 ) return( "" ).99</td><td align="center"> <input type="button" value="Add" onClick="JavaScript: addItem( 'Skolska kapa Jedna velicina odgovara svima amblem skole na prednjoj strani. getCookieValue( "item" + i ) != "" ." + price.indexOf( ". return( c. document. kreiranje ostatka koda je jednostavno.length + 1.cookie.indexOf( ".slice( begin.html): <html> <head> <title>Center Park . != "" ) document. if( end == -1 ) end = c.var c = document. end ) ).length.indexOf( name ). = getCookieValue( "fgColor" ). begin ).

" )[1] ).'. if( c ) { return( c.html'."> </td> </tr> <tr><td colspan="3" align="center"> <input type="button" value="View Cart" onClick="JavaScript: document. Evo traženog koda: function getItemName( item ) { var c = getCookieValue( item ). funkcija ga deli koristeći zarez kao graničnik i prikazuju prvi.&nbsp.html): <html> <head> <title>Center Park . 19.&nbsp. Pošto su napisane ove dve funkcije."> &nbsp.&nbsp. 12.3.Gledajte Bobcats cele sezone. korišćenjem for petlji (fajl Prikaz."> </td> </tr> <tr> <td>Karte za fudbalsku sezonu . Pregled sadržaja liste Ovo je jedan deo strane koji nije zahtevan. if( c ) { return( c.Gledajte Bobcats cele sezone. } else return( "" ).split( "."> </td></tr> </table> </form> </body> </html> Ova online prodavnica nudi tri proizvoda.split(" . } function getItemPrice( item ) { var c = getCookieValue( item ). prikaz sadržaja je jednostavan. Dugme pored svake stavke omogućava kupcu da doda stavku u listu. 5.<input type="button" value="Add" onClick="JavaScript: addItem( 'Skolska majica velicine S-M-L amblem skole na prednjoj strani.html'.location='ViewCart. Pošto dobiju vrednost value iz para name=value iz cookie-ja.location='CheckOut.Pregled spiska</title> <script language="JavaScript"> <!-function getCookieValue( name ) Projekat 26 . Dva dugmeta u dnu strane omogućavaju kupcu da vidi svoju listu za kupovinu i da se izloguje kad završi. <input type="button" value="Check Out" onClick="JavaScript: document. odnosno drugi deo niza. ali se obično očekuje. } else return( "" ).'.&nbsp.99 ).99 ). osim što jedna vraća opis a druga cenu stavke. } Funkcije su identične.")[0]).</td> <td> $12. pozivajući funkciju addItem() . trebalo bi da rešimo problem: kako dobiti podatke iz cookie fajla.99</td><td align="center"> <input type="button" value="Add" onClick="JavaScript: addItem( 'Karte za fudbalsku sezonu . Pre nego što napišemo kompletan kod.

indexOf( ".location='Store. Sledeća funkcija omogućava upravo: function removeItem( name ) { document.".write( "</td></tr>" ).write( "<tr><td>" ). } // --> </script> <tr><td colspan="3" align="center"> <input type="button" value="Nastavite kupovinu" onClick="JavaScript: document. document. return( c.length + 1.html".length.write( "$" + getItemPrice( "item" + i ) ).location='CheckOut. var begin = c.write( getItemName( "item" + i ) + "</td><td>" ). if( begin < 0 ) return( "" ). i++ ) { document." )[1] ).slice( begin. <input type="button" value="Izlogujte se" onClick="JavaScript: document. if( c ) { return( c.split( ". if( c ) { return( c.indexOf( name ). i <= parseInt( getCookieValue( "items" ) ) . begin += name.html'. var end = c."> </td></tr> </table> </form> </body> </html> Ponekad se korisnik predomisli. Projekat 27 . begin ).cookie.&nbsp.&nbsp. end ) ). } else return( "" )."> &nbsp. tako da je dobra ideja da mu se omogući da ukloni stavku sa liste. } // --> </script> </head> <body> <b><font size="6">Prodavnica skole Center Park -</font></b> <font size="4">za sve vase potrebe za skolskim priborom</font><br><br> <form> <table width="100%" border="2"> <script language="JavaScript"> <!-for( i = 1 .". } function getItemName( item ) { var c = getCookieValue( item ). } else return( "" ).&nbsp.{ var c = document. document. } function getItemPrice( item ) { var c = getCookieValue( item ). if( end == -1 ) end = c.cookie = name + "=.&nbsp." )[0] ). document.split( ".

potrebno je da uvedete dodatnu proveru pre prikazivanja liste.".html): <html> <head> <title>Center Park . if( c ) { Projekat 28 . document. var begin = c. if( end == -1 ) end = c. Ovo uklanja deo value iz para name=value.write( "</td></tr>" ). end ) ). Sad treba dodati dugme za uklanjanje stavke.write( "$" + getItemPrice( "item" + i ) ). } else return( "" ). Evo kompletnog primera koji sadrži i dugme koje uklanja stavku (fajl ViewCart.slice( begin. } Umesto da ukloni svaki trag iz cookie fajla. } function getItemName( item ) { var c = getCookieValue( item ).indexOf( name ).location = document.cookie.".location." )[0] ). funkcija uklanja opis i cenu iz fajla. document. if( begin < 0 ) return( "" ). var end = c.indexOf( ". begin += name.length. kad je pritisnuto. koje će.write( getItemName( "item" + i ) + "</td><td>" ). i <= parseInt( getCookieValue( "items" ) ) . da pozove funkciju removeItem() za odgovarajuću stavku. da se ne bi prikazale prazne stavke.length + 1.write( "<tr><td>" ). Zbog toga što se stavka ne uklanja u potpunosti sa liste.cookie = name + "=.split( ". begin ). document. i++ ) { if( getItemName( "item" + i ) != "" && getItemPrice( "item" + i ) != undefined ) { document.location. return( c.Pregled spiska</title> <script language="JavaScript"> <!-function removeItem( name ) { document. if( c ) { return( c. } function getItemPrice( item ) { var c = getCookieValue( item ).location = document. <script language="JavaScript"> <!-for( i = 1 . } } // --> </script> Naredba if ugnježdena u for petlji proverava da stavka nije bila uklonjena i prikazuje samo stavke koje još uvek imaju opis i cenu.document. document. } function getCookieValue( name ) { var c = document.

write( "<tr><td>" ).&nbsp. } } // --> </script> <tr><td colspan="3" align="center"> <input type="button" value="Nastavite kupovinu" onClick="JavaScript: document.'>" )."> &nbsp."> <b><font size="6">Prodavnica skole Center Park -</font></b> <font size="4">za sve vase potrebe za skolskim priborom</font><br><br> <form> <table width="100%" border="2"> <script language="JavaScript"> <!-for( i = 1 .Odjavljivanje iz prodavnice</title> <script language="JavaScript"> <!-var total = 0.html'. document.location='Store. } else return( "" ). ostali delovi bi bilo besmisleni. Projekat 29 .write( getItemName( "item" + i ) + "</td><td>" ).split( ".html): <html> <head> <title>Center Park .&nbsp.bgColor = bg. <input type="button" value="Izlogujte se" onClick="JavaScript: document. i <= parseInt( getCookieValue( "items" ) ) .location='CheckOut." )[1] ). != "" ) document. Odjavljivanje i naručivanje Jedna od najvažnijih delova kupovine je naručivanje.html'. i++ ) { if( getItemName( "item" + i ) != "" && getItemPrice( "item" + i ) != undefined ) { document. Strana za odjavljivanje i naručivanje prikazuje listu stavki i ukupnu cenu.fgColor = fg. document. = getCookieValue( "fgColor" ).return( c. document."> </td></tr> </table> </form> </body> </html> 5.&nbsp. Evo kompletnog koda (fajl CheckOut.&nbsp.write( "</td></tr>" ).write( "<input type='button' value='Remove' onClick='JavaScript: removeItem( \"item" + i + "\" ).write( "$" + getItemPrice( "item" + i ) + "</td><td align='center'>" ). Bez ove strane. <body onLoad="JavaScript: setCustoms().4. != "" ) document. document. } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ).

begin += name. <body onLoad="JavaScript: setCustoms().write( "</td></tr>" ). } else return( "" ).length.write( getItemName( "item" + i ) + "</td><td>" ). } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ). i++ ) { if( getItemName( "item" + i ) != "" && getItemPrice( "item" + i ) != undefined ) { document.indexOf( name ).bgColor = bg.cookie." )[1] ).fgColor = fg.length + 1. Projekat 30 . if( begin < 0 ) return( "" ).function getCookieValue( name ) { var c = document." )[0] ). total += parseFloat( getItemPrice( "item" + i ) )."> <b><font size="6">Prodavnica skole Center Park -</font></b> <font size="4"> za sve vase potrebe za skolskim priborom</font><br><br> Do sada ste potrosili: <form> <table width="100%" border="2"> <script language="JavaScript"> <!-for( i = 1 . end ) ). while( good < n ) good += 1. != "" ) document. document.split( ". = getCookieValue( "fgColor" ). } function fixTotal( n ) { n *= 100. } else return( "" ). var begin = c. != "" ) document. document.write( "<tr><td>" ).write( getItemPrice( "item" + i ) ). var good = parseInt( n ). return( c. begin ). if( c ) { return( c. } function getItemPrice( item ) { var c = getCookieValue( item ). document. } function getItemName( item ) { var c = getCookieValue( item ).".split( ". return( good / 100 ). i <= parseInt( getCookieValue( "items" ) ) . var end = c. if( end == -1 ) end = c. if( c ) { return( c.indexOf( ".slice( begin.

" )[0] ). Pošto se prikažu sve stavke. na ovaj način: <tr> Projekat 31 . function getItemName( item ) { var c = getCookieValue( item ).write( fixTotal( total ) ). } } // --> </script> Poslendnji deo tabele sadrži ukupnu cenu.} } // --> </script> <tr> <td><b>Total</b></td> <td>$ <script language="JavaScript"> <!-document. koja se računa kad se prikazuju stavke.</td> </tr> </table> </form> <a href="home.write( getItemName( "item" + i ) + "</td><td>" ). document. } else return( "" ). if( c ) { return( c. Funkcije. } vraćaju informacije o stavkama iz cookie fajla i stavljaju ih u tabelu pomoću for petlje. Promenljiva total je deklarisana u head sekciji strane i postavljena na nulu.write( "<tr><td>" ). po sledećem obrascu: total += parseFloat( getItemPrice( "item" + i ) ).split( ". document.write( "</td></tr>" ). getItemName() i getItemPrice().write( getItemPrice( "item" + i ) ).html"> Vrati se na pocetnu stranu</a> </body> </html> Većina primera bi trebalo da vam bude poznata. i++ ) { if( getItemName( "item" + i ) != "" && getItemPrice( "item" + i ) != undefined ) { document. } function getItemPrice( item ) { var c = getCookieValue( item ).split( ". } else return( "" ). i <= parseInt( getCookieValue( "items" ) ) . --> </script> &nbsp. ukupna cena se prikazuje na kraju tabele. <script language="JavaScript"> <!-for( i = 1 . document." )[1] ). total += parseFloat( getItemPrice( "item" + i ) ). if( c ) { return( c.

je forma koju naručilac treba da popuni.value)). kojim roba zaista naručuje. Doduše. Uvod Ozbiljan je problem kreirati sigurnu web stranu koristeći samo JavaScript.</td> </tr> </table> Jedna od funkcionalnosti koja nije uključena u ovu stranu.2. postoji puno pokušaja.html" onSubmit="JavaScript: return(verifyPassword(this.write( fixTotal( total ) ). --> </script> &nbsp. Ovo poglavlje prikazuje jednostavno rešenje. da samo autorizovane osobe imaju pristup određenim podacima i da prikaz podataka bude prilagođen određenoj osobi.password. kao i mnoga druga. strana zaštićena šifrom 6. neuspešna rešenja. 6. Zaštita strane – pristup samo za članove. Jednostavna provera šifre Najjednostavniji način da strana bude zaštićena šifrom je da se zatraži od korisnika da unese šifru. i dugme submit. Sledeći primer prikazuje ovu (fajl Bad_Checking.html). <html> <head> <title> Password Protected Site </title> <script language="JavaScript"> <!-function verifyPassword( word ) { return( word == "sesame" )."> Please enter your password:&nbsp. 6. i svi su manje-više neuspešni.1. a trebalo bi da postoji. ta šifra se proveri i zatim se dozvoli korisniku da poseti stranu. Sigurnost podrazumeva dve stvari: prva.<td><b>Total</b></td> <td>$ <script language="JavaScript"> <!-document. <input type="text" name="password" size="20"><br> <input type="submit" value="Submit"> </form> </body> </html> Projekat 32 . } --> </script> </head> <body> <form action="Continue.

but your browser doesn't support them.Na prvi pogled.value)). prikazuje se strana Continue. Znači. } --> </script> </head> <body> <form action="Continue. ali ne i korisnika koji ima makar minimalno znanje. Ako se unese ispravna šifra (sesame). ovo se čini kao dobro rešenje. 6. postoji ozbiljan propust u planu: kod sadrži šifru. Projekat 33 .html: <html> <head> <title> Password Protected Site </title> <script language="JavaScript"> <!-function verifyPassword( word ) { return( word == "sesame" ).*"> <frame name="contents" target="main"> <frame name="main" src="Authenticate.</p> </body> </noframes> </frameset> </html> Authenticate.html"> <noframes> <body> <p>This page uses frames. Sad uporan posetilac samo treba iz kontekstnom menija u okviru izabere opciju View Source i ponovo je video šifru. i time da pročita traženu širu. na izgled ste postigli cilj (fajl Frames_Password. Ova tehnika možda može da spreči prosečnog posetioca. Na žalost. Sakrivanje šifre u strani sa okvirima Postoji način da sprečite posetioca da vidi izvorni kod strane.3. bilo bi zgodno kad bi mogli da sprečimo posetioca da vidi kod. Ako stranu za proveru sakrijete u stranu sa okvirima..html . kao i ime strane kojoj treba pristupiti.password. Korisnik može da vidi HTML kod strane koju prikazuje.html): Frames Page: <html> <head> <title> Password Protected Site </title> </head> <frameset cols="0. <input type="text" name="password" size="20"><br> <input type="submit" value="Submit"> </form> </body> </html> Rešenje i nije tako dobro.html" onSubmit="JavaScript: return(verifyPassword(this."> Please enter your password:&nbsp. iako je na izgled bila sakrivena.

getElementById && !document. da izdvojite samo desni klik. Ceo proces bi mogao da izgleda ovako: <script language=JavaScript> <!-function clickIE4() { if ( event.getElementById ) { document.all && !document.button==2 ) { return( false ). } else if( document.which == 3 ) { return( false ).button==2 ) { return( false ).onmousedown = clickIE4. 6.getElementById && !document.").onmousedown = clickNS4.which == 2 || e.4.captureEvents( Event. već kako da sprečimo da se prikaže konteksni meni.layers || document. Evo poboljšanog koda (fajl No_Context_Password. koji treba smestiti u frejm (fajl Frames.all ) { if( e. } document. // --> </script> Sada ovaj kod treba ubaciti u head sekciju strane. <html> <head> <title> Password Protected Site </title> <script language="JavaScript"> <!-function clickIE4() { if( event.html). } } function clickNS4(e) { if( document.Sada. i da zatražite od browser-a da ne prikaže kontekstni meni.MOUSEDOWN ).which == 2 || e. } } } if( document.all ) { if( e. } } function clickNS4(e) { if( document.which == 3 ) { return( false ).layers ) { document.oncontextmenu = new Function( "return( false ). problem nije kako da sakrijemo kod. Potrebno je da uhvatite svaki događaj miša na strani.layers || document.html). Projekat 34 . document. Sakrivanje konktekstnog menija na web stranama Sprečavanje pojavljivanja kontekstnog menija na webe strani zahteva izvestan posao.

. moguće je da se uradi. postoji zaista jednostavno rešenje za zaštitu strane koristeći isključivo JavaScript. Ovo nas dovodi do osnovnog problema JavaScript sigurnosti—šifra se uvek šalje na računar posetioca. } else if( document. 6. Moguće je reći browser-u da ne učita stranu pre nego što je prikaže. pa samim tim i ne moramo da je krijemo.value)).onmousedown = clickIE4.5. To znači da čak i ako sprečimo posetioca da vido kod. Evo kompletnog koda (fajl Protected_Page.captureEvents( Event.oncontextmenu = new Function( "return( false ). document. Bez obzira koliko se trudili. pošto to i dalje nije sigurno rešenje.6."> Please enter your password:&nbsp.layers ) { document. Primer nećemo prikazati. Međutim. } --> </script> </head> <body> <form action="Continue. Strana zaštićena šifrom Rešenje je jednostavno: Ime druge strane.MOUSEDOWN ).html): <html> <head> <title> Password Protected Site </title> <script language="JavaScript"> Projekat 35 .} } } if( document.onmousedown = clickNS4. function verifyPassword( word ) { return( word == "sesame" ). Iako to nije mnogo verovatno.getElementById ) { document.password.. Ovim ne moramo da šaljemo šifru na računar posetioca. } document. <input type="text" name="password" size="20"><br> <input type="submit" value="Submit"> </form> </body> </html> Sada smo dobili na izgled sigurnu stranu."). Međutim. koja treba da proveri šifru je isto kao šifra. nije sve baš tako kako se čini. Ako je posetilaci dovoljno uporan. vaša strana nikad nije u potpunosti zaštićena.html" onSubmit="JavaScript: return(verifyPassword(this. 6. on i dalje može da pogleda u folder temporary Internet .all && !document. Problem sa JavaScript sigurnošću Web strana se uvek učita na računar posetioca pre nego što se prikaže. i dalje može da nađe šifru koja je sačuvana negde u memoriji browser-a.

// Make sure the password is correct document. dobili smo sigurnu stranu.html" } Ako je šifra recimo y7v2xu89.location = word + ".cookie = "username=" + form.location = word + ".". } function getCookieValue( name ) { var c = document. Ako korisnik unese pravu šifru. var end = c.slice( begin. postoji strana na kojoj posetilac treba da unese korisnično ime i šifru (fajl LogIn. <input type="text" name="password" size="20"><br> <input type="submit" value="Submit"> </form> </body> </html> Kompletak kod za sakrivanje šifre je zamenjen funkcijom verifyPassword() function verifyPassword( word ) { document. begin ). Ako pogreši. <html> <head> <title> Center Park .username.indexOf( ".fgColor = fg. i postoji fajl koji se zove y7v2xu89. begin += name."> Please enter your password:&nbsp. return( c.html). != "" ) document. otvoriće mu se sigurna strana.<!-function verifyPassword( word ) { document.cookie.password.bgColor = bg. Na strani škole Center Park primenjena je ova tehnika.password. prikazuje mu se greška 404.html" } --> </script> </head> <body> <form onSubmit="JavaScript: verifyPassword( this.value ). if( end == -1 ) end = c.value. Prvo. if( begin < 0 ) return( "" ).indexOf( name ).length + 1. = getCookieValue( "fgColor" ). end ) ).html".Logovanje </title> <script language="JavaScript"> <!-function LogIn( form ) { // Store the student name in the cookie file for later reference document. } function { var bg var fg if( bg if( fg } // --> </script> setCustoms() = getCookieValue( "bgColor" ). var begin = c. Projekat 36 .html u istom folderu kao strana za proveru.location = form.value + ".length. != "" ) document.

"Decembar" ).getYear() ). month = new Date( y. "Novembar".login. Projekat 37 . var months = new Array( "Januar". "Avgust". "Septembar".html: <html> <head> <title></title> <script language="JavaScript"> <!-var now = new Date().indexOf( name ).length + 1.". "Mart". y = fixYear( yString ? parseInt( yString ) : now. 1 ). // --> </script> </body> </html> Fajl koji se otvara je y7v2xu89. var end = c. logujte se pomocu korisnickog imena i sifre: <br><br> <form name="login" onSubmit="JavaScript: LogIn( this ).</head> <body onLoad="JavaScript: setCustoms()." > <center> <table border="2" cellpadding="2" width="250"> <tr> <td colspan="2"><b>Log In</b></td> </tr> <tr> <td>Korisnicko ime:</td> <td align="right"><input name="username" size="10"></td> </tr> <tr> <td>Sifra:</td> <td align="right"><input name="password" size="10"></td> </tr> <tr> <td colspan="2"> <p align="center"><input type="submit" value="Submit"></td> </tr> </table> </center> </form> <script language="JavaScript"> <!-document.cookie. "Jul". "April". "Octobar". "Februar".value = getCookieValue( "username" ).username. begin ). m = fixMonth( mString ? parseInt( mString ) : now.getMonth() ). var begin = c. if( begin < 0 ) return( "" ). var var var var var yString = getCookieValue( "year" ). m. function getCookieValue( name ) { var c = document. begin += name. return( false ). "Maj". mString = getCookieValue( "month" ).indexOf( ". "Jun"."> <center><font size=6><b>Dobrodosli na pocetnu stranu skole Center Park</b></font></center> <br><br> Da bi pristupili sadrzaju ove strane.

length.cookie='loggedin=true'. <body onLoad="JavaScript: setCustoms(). } function fixYear( year ) { return( year < 1000 ? year + 1900 : year ). function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" )."> <i>Dobrodosli</i><b> <script language="JavaScript"> <!-document.12 : month ) ). document.write( getCookieValue( "username" ) + "</b>!! " ). case 4: case 6: case 9: case 11: return( 30 ). pravimo nas niz sa zadacima var tasks = new Array( 30 ).fgColor = fg.slice( begin. } function getNumberDays( d ) { switch( d. != "" ) document.if( end == -1 ) end = c.write( months[m] ). = getCookieValue( "fgColor" ). tasks[28] = "Rok za predaju rada iz engleskog jezika". tasks[5] = "<a href='Test. case 2: return( 28 + ( d. // --> </script> </b></font> </td></tr> </table> <table border="1" cellpadding="2" width="75%"> <tr> Projekat 38 .getYear % 4 == 0 ? 1 : 0 ) ). end ) ). != "" ) document. //U nedostatku istog. // --> </script> <i>Evo vasih zadataka za</i> <table width="75%"> <tr><td align="center"> <font size="6"><b> <script language="JavaScript"> <!-document. } } // Ovaj deo treba da se ucita sa servera (recimo ASP). return( c. } function fixMonth( month ) { return( month < 0 ? month + 12 : ( month > 11 ? month .getMonth() + 1 ) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: return( 31 ).bgColor = bg.html'>Resite CS Test</a>".

write( "<a href=\"" + document.cookie='month=" + fixMonth(m+1) + "'. document.html"> Vrati se na pocetnu stranu</a> </body> Projekat 39 .write( "<a href=\"" + document.write( "onClick=\"JavaScript: document. document.write( tasks[i+1] ).write( "</tr><tr>" ). document.location + "\" " ). // --> </script> </td> </tr> </table> <br> <br> <a href="home. if( tasks[i+1] ) document.getDate() == i + 1 ) document. for( i = 0 .getDay().write( months[fixMonth(m+1)] + "</a>" ). } </tr> document. if( fixYear( now.\">" ).getYear() ) && now. for( i = 0 . // --> </script> </td> <td align="center"> <a href="AddTask.\">" ).getMonth() && now.write( " bordercolor='red'" ).write( "<td height='75' valign='top'" ).write( "<td></td>" ).<td width="14%"><b><i>Nedelja</i></b></td> <td width="14%"><b><i>Ponedeljak</i></b></td> <td width="14%"><b><i>Utorak</i></b></td> <td width="14%"><b><i>Sreda</i></b></td> <td width="14%"><b><i>Cetvrtak</i></b></td> <td width="14%"><b><i>Petak</i></b></td> <td width="14%"><b><i>Subota</i></b></td> <tr> <script language="JavaScript"> <!-var startDay = month.getYear() ) == fixYear( month. } // --> </script> </tr> </table> <table width="75%"> <tr> <td> <script language="JavaScript"> <!-document.write( "onClick=\"JavaScript: document.location + "\" " ).cookie='month=" + fixMonth(m-1) + "'.getMonth() == month. document.write( months[fixMonth(m-1)] + "</a>" ).write( "><b>" + (i+1) + "</b><br>" ). document. i < numDays .write( "</td>" ).html">Dodaj zadatak</a> </td> <td align="right"> <script language="JavaScript"> <!-document. } var numDays = getNumberDays( month ). document. i++ ) { if( ( i + startDay + 1 ) % 7 == 1 ) { document. i < startDay . i++ ) { document.

function openDatePicker( target ) { dateElement = target.scrollbars=no.bgColor = bg.appName == "Netscape". return( c.indexOf( ". var begin = c.cookie. var dateElement. end ) ).value = date. var navSize = "width=480. begin ).open( "PopupCalendar. } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ). <br><br> <br><br> Projekat 40 .</html> Ovim posao nije završen.Dodavanje zadatka</title> <script language="JavaScript"> <!-if( getCookieValue( "loggedin" ) != "true" ) document.html"."> <br> <br> <i>Raspored zadataka skole Center Park za </i><b> <script language="JavaScript"> <!-document.length. var isNav = navigator. = getCookieValue( "fgColor" ).length + 1.write( getCookieValue( "username" ) ).toolbar=no.indexOf( name ). if( end == -1 ) end = c.resizable=no. } function setDate( date ) { dateElement. var ieSize = "width=380.slice( begin. // --> </script></b>.height=295". "calendar".html".html): <html> <head> <title>Center Park . u cookie fajlu se postavlja vrednost koja pamti da je korisnik ulogovan. ova vrednost treba da se proverava na svakoj strani koja treba da bude sigurna. != "" ) document. <body onLoad="JavaScript: setCustoms(). Evo još jednog dokumenta sa našeg sajta koji mora da proverava ovu vrednost (fajl AddTask.fgColor = fg." + ( isNav ? navSize : ieSize ) ). Da bi strana bilo potpuno sigurno. var end = c.location = "Main. "menubar=no. } function getCookieValue( name ) { var c = document. begin += name. window.status=yes. != "" ) document.".height=255". Prometićete da kad se strana učita. if( begin < 0 ) return( "" ).

7..random() * ads.". <input type="text" name="date" size="10"> <input type="button" value=". return( ads[ad] )."> </td> <td width="50%"> Opis zadatka (HTML is ok):<br> <textarea rows="7" cols="35"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="Submit" name="B1"> </td> </tr> </table> </center> </form> </body> </html> openDatePicker( Prva naredba koja se izvršava. } Projekat 41 .html) <html> <head> <title>Center Park Home Page .<form name="taskForm" onSubmit="JavaScript: return( false ). proverava loggedin cookie vrednost i preusmerava posetioca na glavnu stranu ukoliko nije ulogovan.1. Sledeći primer prikazuje drugi tekstualni oglas svaki put kad se učita strana. (fajl IE.". if( getCookieValue( "loggedin" ) != "true" ) document." onClick="JavaScript: document. Prikazivanje različitog oglasa svaki put kad se strana učita Internet Explorer omogućava da se sadržaj menja u pokretu."> <center> <table border="1" width="75%"> <tr> <td width="100%" colspan="2"><b>Schedule Task</b></td> </tr> <tr> <td width="50%"> Date of task:&nbsp. "July 3rd is the first annual Adopt a Nerd" + " Day!<br>They are people too.date ).Main Page</title> <script language="JavaScript"> <!-var ads = new Array( "Come watch the Center Park Bobcats!<br>Get your" + " schedules at the Union Building. a postoji tako mnogo oglasa koje treba prikazati.location = "Main.length ). Kreiranje linkovanih rotirajućih oglasa Pošto je prostor na web strani ograničen." ).html". function getAd() { var ad = parseInt( Math. naša ideja je da ih sve prikažemo na istom mestu.. korišćenjem atributa innerHTML. "Join us at the June Bug festival June 12-14th!" + "See you there.taskForm. 7.<br>Be kind adopt" + " a nerd. Ovim se sprečava posetilac da direktno unese URL i time izbegne unošenje šifre.

adCell. They are people too. staff and students. = getCookieValue( "fgColor" ).html">Log In</a><br> <a href="store. rotateAd().bgColor = bg.<br> <br> <b>July 3rd</b> .slice( begin. </td> </tr> </table> </body> </html> Svaki put kad se učita. if( end == -1 ) end = c. strana slučajno bira jedan sa liste predefinisanih oglasa i prikazuje ga.fgColor = fg.function rotateAd() { document. var end = c.".First annual Adopt a Nerd Day!&nbsp.length.<br> <br> <b>June 12th</b> . end ) ).indexOf( name )."> <center> <font color="red" size="6"><b> Center Park Home Page </b></font></center> <br><br> <table width="100%"> <tr> <td ID="adCell" width="50%"> </td> <td width="50%"> <a href="login. var begin = c.indexOf( ". } function getCookieValue( name ) { var c = document. begin ).all. != "" ) document. begin += name.length + 1.innerHTML = getAd().June Bug festival begins.html">Store</a><br> <a href="customize. <body onLoad="JavaScript: setCustoms(). Come enjoy the holiday with the Center Park faculty. return( c. } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" ). != "" ) document.Fireworks on the mall!&nbsp. if( begin < 0 ) return( "" ).cookie. Projekat 42 .html">Customize</a> </td> </tr> <tr> <td width="100%" colspan="2"> <hr> <font face="Courier" size="5">*** School News ***</font> <br> <br> <b>July 4th</b> .

setTimeout( "rotateAd()".length ). begin ).html'>Join us at the June" + " Bug festival June 12-14th! See you there.indexOf( name ). <html> <head> <title>Center Park Home Page . end ) ).innerHTML = getAd().". begin += name. moguće me menjati oglas.bgColor = bg.</a>". Koristeći metod setTimeout() objekta Window.all.</a>" ). if( begin < 0 ) return( "" ). "<a href='SchoolEvents.html'>Come watch the Center " + " Park Bobcats!<br>Get your schedules at the" + " Union Building. } function getCookieValue( name ) { var c = document.html).adCell.2.slice( begin. return( ads[ad] ). var begin = c. var end = c.indexOf( ".length. Kreiranje linkovanog tekstualnog oglasa koji se sam menja Pošto učenici obično ne otvaraju istu stranu više puta."> <center> <font color="red" size="6"><b> Center Park Home Page </b></font></center> <br><br> <table width="100%"> <tr> <td ID="adCell" width="50%"> </td> Projekat 43 .length + 1. } // --> </script> </head> <body onLoad="JavaScript: setCustoms(). recimo na svakih 10 sekundi. Menjajući sadržaj samog oglasa.cookie. } function rotateAd() { document. "<a href='JuneBug. 10000 ).random() * ads. if( fg != "" ) document. bolje bi bilo kad bi se oglasi sami menjali.html'>July 3rd is the" + " first annual Adopt a Nerd Day!<br>They are" + " people too — be kind adopt a nerd.7. function getAd() { var ad = parseInt( Math.</a>". rotateAd(). window. var fg = getCookieValue( "fgColor" ). oglasi postaju linkovi (fajl IE_rot.fgColor = fg. if( bg != "" ) document.Main Page</title> <script language="JavaScript"> <!-var ads = new Array( "<a href='Bobcats. if( end == -1 ) end = c. return( c. } function setCustoms() { var bg = getCookieValue( "bgColor" ).

First annual Adopt a Nerd Day!&nbsp.slice( begin.html">Customize</a> </td> </tr> <tr> <td width="100%" colspan="2"> <hr> <font face="Courier" size="5">*** School News ***</font> <br> <br> <b>July 4th</b> . Come enjoy the holiday with the Center Park faculty.html">Store</a><br> <a href="customize. } function setCustoms() Projekat 44 . return( ads[ad] ).<td width="50%"> <a href="login.random() * ads. They are people too. Kreiranje linkovanog slikovnog oglasa koji se menja Ovo se postiže jednostavnom modifikacijom prethodnog primera. var end = c. if( end == -1 ) end = c.<br> <br> <b>July 3rd</b> . function getAd() { var ad = parseInt( Math.all.June Bug festival begins.Fireworks on the mall!&nbsp. end ) ).adCell.length.3.". } function getCookieValue( name ) { var c = document. if( begin < 0 ) return( "" ). } function rotateAd() { document.html): <html> <head> <title>Center Park Home Page .innerHTML = getAd(). begin ). staff and students.indexOf( ". "<a href='Ad2. begin += name.jpg' border='0'>" + "</a>".<br> <br> <b>June 12th</b> .length + 1. Jednostavno.indexOf( name ). svuda gde se nalazio tekst.cookie. var begin = c.setTimeout( "rotateAd()".jpg' border='0'>" + "</a>" ).html'>" + "<image src='Ad1.html'>" + "<image src=' Ad2. 10000 ).Main Page</title> <script language="JavaScript"> <!-var ads = new Array( "<a href='Ad1. </td> </tr> </table> </body> </html> 7. treba staviti odgovarajuću sliku (fajl IE_img.html">Log In</a><br> <a href="store. return( c.length ). window.

Nezavisnost od platforme Problem sa prethodnim primerima je taj da funkcionišu samo u Internet Explorer-u. Srećom. ovog puta menjamo vrednosti parametara taga.html">Customize</a> </td> </tr> <tr> <td width="100%" colspan="2"> <hr> <font face="Courier" size="5">*** School News ***</font> <br> <br> <b>July 4th</b> .html): <html> <head> <title>Center Park . Netscape ne može da referencira HTML elemente direktno kroz atribud ID.{ var var if( if( } // --> </script> </head> <body onLoad="JavaScript: setCustoms().<br> <br> <b>July 3rd</b> . 7. postoji rešenje.fgColor = fg. Umesto da promenim HTML u ćeliji tabele.Fireworks on the mall!&nbsp. Projekat 45 . rotateAd().html">Store</a><br> <a href="customize. U narednom primeru tagovi link i img su na svom mestu kad se učita strana (fajl Main. </td> </tr> </table> </body> </html> bg fg bg fg = getCookieValue( "bgColor" ). = getCookieValue( "fgColor" ).html">Log In</a><br> <a href="store.First annual Adopt a Nerd Day!&nbsp.June Bug festival begins.bgColor = bg.Pocetna strana</title> <script language="JavaScript"> <!-function getAd() { var ad = "ad"."> <center> <font color="red" size="6"><b> Center Park Home Page </b></font></center> <br><br> <table width="100%"> <tr> <td ID="adCell" width="50%"> </td> <td width="50%"> <a href="login. != "" ) document. staff and students. Come enjoy the holiday with the Center Park faculty. Sledeća stvar koju treba uraditi je da se problem reši nezavisno od browser-a. != "" ) document. They are people too.4.<br> <br> <b>June 12th</b> .

html"><img height="200"></a> </td> <td width="50%"> <a href="login. images[i]. i++ ) { if( images[i].random() * 2 ) + 1. end ) ).length. var begin = c.length + 1. var end = c.href= name + ". != "" ) document.getElementById('ad_site').alt = images[i].fgColor = fg.setTimeout( "rotateAd()".html">Customize</a> </td> </tr> name="adImage" border="0" width="345" Projekat 46 . = getCookieValue( "fgColor" ). } function rotateAd() { with( document ) { for( i = 0 . changeLink(ad_name).indexOf( name ). <body onLoad="JavaScript: setCustoms(). } function { var bg var fg if( bg if( fg } // --> </script> </head> setCustoms() = getCookieValue( "bgColor" )."> <center> <font color="red" size="6"><b> Pocetna strana skole Center Park </b></font></center> <br><br> <table width="100%"> <tr> <td width="50%"> <a id="ad_site" href="Ad1. != "" ) document.ad += parseInt( Math.html".".slice( begin. } function changeLink(name) { document.jpg".html">Store</a><br> <a href="customize.indexOf( ". if( begin < 0 ) return( "" ).name == "adImage" ) { var ad_name=getAd().html">Log In</a><br> <a href="store.length . } } } window. } function getCookieValue( name ) { var c = document.bgColor = bg.cookie. rotateAd(). i < images. 10000 ). return( c.src = ad_name + ". begin ). return( ad ). if( end == -1 ) end = c. begin += name.

8.Vatromet u trznom centru!&nbsp. Ovo poglavlje se odnosi na poboljšavanje izgleda strane. Svrha primera je da se na njemu prikažu poboljšanja do kojih dolazi dodavanjem ovog jednostavnog efekta. <html> <head> <base target="main"> </head> <body> <font color="red" size="4"><b> Center Park<br> </b></font> <table width="100%"> <tr><td> <a href="Main.<br> <br> <b>2.</td> </tr> </table> </body> </html> Na svakih 10 sekundi se menjaju vrednosti atributa href i src.html). ali je kod malo duži i teži za praćenje.<tr> <td width="100%" colspan="2"> <hr> <font face="Courier" size="5">*** Skolske novosti ***</font> <br> <br> <b>4. Jun</b> . osobljem i ucenicima skole Center Park.html" target="main"> Home </a> </td></tr> <tr><td> <a href="LogIn. Jun</b> . Zbog jednostavnosti.1.(fajl Text.2.html" target="main"> Login </a> </td></tr> <tr><td> <a href="Store. Uvod Do sada smo dodavali funkcionalnosti web strani. Na našoj strani koristimo jednostavan pristup – za img tag postoji događaj miša. Ovo obezbeđuje istu funkcionalnost kao prethodni primer. 8. Dodjite da uzivate u prazniku sa nastavnicima. Sledeći primer koristi jednostavan tekst link.Pocinje junski festival buba. Oni su takodje ljudi.<br> <br> <b>12. Jun</b> . Fokusiraćemo se na dva tipa dinamičkog sadržaja: promenu izgleda dugmeta i promenu šeme boja za celu stranu. Promena izgleda slike prelaskom miša Ovo je možda najčešći dinamički efekat na internetu.html" target="main"> Store </a> Projekat 47 .Prvi godisnji DAN USVOJITE KRELCA !&nbsp. Korišćenje JavaScript-a za kreiranje dinamičkih HTML (DHTML) efekata 8. postoje različiti načini implementacije.

bmp" border="0" onMouseOver="JavaScript: this. slika se menja.html" target="main"> Customize </a> </td></tr> </table> </body> </html> Prethodni primer ne sadrži JavaScript.bmp"> </a> </td></tr> <tr><td> <a href="LogIn.bmp"> </a> </td></tr> </table> </body> </html> Iako je strana sad interesantnija. vraća se početna slika.html) : <html> <head> <base target="main"> </head> <body> <font color="red" size="4"><b> Center Park<br> </b></font> Projekat 48 . Jedan od načina da se poboljša izgled strane je da se tekstualni link zameni slikom (fajl Slika. Kad se kursor postavi iznad slike."> Evo kompletnog koda (fajl Slika_d.html"> <img border="0" src="home1. dodaćemo dinamički efekat.bmp"> </a> </td></tr> <tr><td> <a href="Store.</td></tr> <tr><td> <a href="Customize.html" target="main"> <img border="0" src="login1.bmp"> </a> </td></tr> <tr><td> <a href="Customize.src='image1.html). To se radi na sledeći način:: <img src="image1. slika dugmeta će se malo promeniti kad se pređe pointerom preko nje." onMouseOut="JavaScript: this.src='image2. a kad se kursor skloni sa slike. jojs uvek ne izgleda dovoljno dobro.bmp'. <html> <head> <base target="main"> </head> <body> <font color="red" size="4"><b> Center Park<br> </b></font> <table width="100%"> <tr><td> <a href="Main.html" target="main"> <img border="0" src="store1.html" target="main"> <img border="0" src="customize1.bmp'. Za ovo se koriste događaji miša onMouseOver i onMouseOut. Sledeće.

Zbog toga bi bilo lepo kad bi postojala funkcija koja obrađuje svaku promenu svake slike.src='store2.html" target="main"> <img border="0" src="home1.bmp'.src='customize1."> </a> </td></tr> <tr><td> <a href="LogIn. event ) { image. } // --> </script> </head> <body> <font color="red" size="4"><b> Center Park<br> </b></font> <table width="100%"> <tr><td> <a href="Main." onMouseOut="JavaScript: this." onMouseOut="JavaScript: this. 1 ). Postoje i bolji načini.html" target="main"> <img border="0" src="home1. (fajl MenuBar.src = image."> </a> </td></tr> <tr><td> <a href="Store.bmp" onMouseOver="JavaScript: this."> </a> </td></tr> <tr><td> <a href="Customize.bmp'.bmp'.src='login2." onMouseOut="JavaScript: change( this. Međutim." onMouseOut="JavaScript: this."> </a> </td></tr> </table> </body> </html> Ovo nije jedini način za dodavanje ovog efekta.bmp".src='home2.bmp'. 2 )."> </a> </td></tr> <tr><td> <a href="LogIn. povećava se količina koda koja treba da se napiše.name + event + ".html" target="main"> Projekat 49 .bmp'.src='login1.bmp'. Ovo je prilično jednostavno korišćenjem document object model (DOM).bmp" onMouseOver="JavaScript: this.html" target="main"> <img border="0" src="customize1.bmp" onMouseOver="JavaScript: this.html" target="main"> <img border="0" src="store1.src='customize2.src='store1.bmp" name="home" onMouseOver="JavaScript: change( this.bmp" onMouseOver="JavaScript: this.bmp'.<table width="100%"> <tr><td> <a href="Main.bmp'. ako dodate više dugmadi." onMouseOut="JavaScript: this.html" target="main"> <img border="0" src="login1.html): <html> <head> <base target="main"> <script language="JavaScript"> <!-function change( image. ali ovo je najjednostavniji.src='home1.

1 ).value.bmp". Drugi parametar je broj koji određuje tip događaja. 2 ).html). } Koja ima dva parametra. 1 ). obe metode identično funkcionišu." onMouseOut="JavaScript: change( this.name + event + ". Promena šeme boja Još jedna od dinamičkih osobina strane mogu da budu šeme boja.bmp" name="image" border="0" onMouseOver="JavaScript: change( this.bmp" name="store" onMouseOver="JavaScript: change( this."> Ovaj metod se jednostavnije čita nego prethodni i smanjiće vreme učitavanja ukoliko postoji više slika na strani.fgColor. Možete da primetite dsa je dodat atribut name svakom image elementu.bmp" name="login" onMouseOver="JavaScript: change( this.src = image. 8." onMouseOut="JavaScript: change( this. treba kreirati posebnu sliku za svaki tip događaja. možemo da ih postavimo za svaku stranu koja se učita Prvi deo implementacije je kreiranje strane na kojoj je moguće uneti željene boje. On se koristi u funkciji change() da bi se prikazala odgovarajuća slika u elementu. document. Prvi parametar je pointer na sliku koja je kreirala događaj.<img border="0" src="login1.html" target="main"> <img border="0" src="customize1. } // --> </script> </head> <body> Projekat 50 . 1 )."> </a> </td></tr> <tr><td> <a href="Customize."> </a> </td></tr> </table> </body> </html> Svi događaji sa slikama se obrađuju jednom funkcijom. Odgovarajući kod u elementu image je: <img src="image1." onMouseOut="JavaScript: change( this.3. 2 ).value."> </a> </td></tr> <tr><td> <a href="Store.cookie = "fgColor=" + form. 2 ).bgColor.Podesavanja </title> <script language="JavaScript"> <!-function saveCustoms( form ) { document. <html> <head> <title> Center Park ." onMouseOut="JavaScript: change( this. 1 ).bmp" name="customize" onMouseOver="JavaScript: change( this. change(). event ) { image. 2 ).cookie = "bgColor=" + form.html" target="main"> <img border="0" src="store1. function change( image. Osim toga. Za svako dugme. i promenljive sačuvati u cookie fajlu (fajl Custom. Izabrana je vrednost 2 za događaj onMouseOver a vrednost 1 za događaj onMouseOut. Ako boje sačuvamo u cookie fajlu.

document. Kod kojim se učitava šema boja je jednostavan (fajl Customize. <html> <head> <title>Center Park .&nbsp.fgColor. </b> </td> <td> <input type="text" name="bgColor" size="15" value="white"> </td> </tr> <tr> <td> <b>Boja teksta:</b> </td> <td> <input type="text" name="fgColor" size="15" value="black"> </td> <td> <input type="submit" value="Submit"> </td> </tr> </table> </form> <br> <br> <a href="home. if( begin < 0 ) return( "" ).<form onSubmit="JavaScript: saveCustoms( this ). } function getCookieValue( name ) { var c = document. biće prikazana sa odgovarajućom šemom boja.value.fgColor. var end = c.value.cookie = "fgColor=" + form.cookie = "bgColor=" + form.". var begin = c.cookie.html"> Vrati se na pocetnu stranu</a> </body> </html> Jednostavna funkcija saveCustoms(): function saveCustoms( form ) { document. Projekat 51 . } se poziva kad se pritisne dugme Submit.bgColor.indexOf( name ). begin ).cookie = "bgColor=" + form. begin += name.Podesavanja</title> <script language="JavaScript"> <!-function saveCustoms( form ) { document.cookie = "fgColor=" + form.indexOf( ". a koja ima odgovarajući kod za promenu boje. Posle tog trenutka.value.value.bgColor. svaka strana koja se otvori.length + 1.&nbsp. document.html). i čuva vrednosti promenljivih u cookie fajlu."> <table> <tr> <td> <b><font size="5">Podesite <br> boje na web strani:<br> <br></font></b> </td> <tr> <td> <b>Boja pozadine:&nbsp.

ne samo da čuva boje. već ih i učitava i primenjuje sledeći put kad se strana učita.&nbsp. Funkcija setCustoms(). Kod se nalazi u poglavlju 8. } // --> </script> </head> <body onLoad="JavaScript: setCustoms().html .html .html"> Vrati se na pocetnu stranu</a> </body> </html> Ovaj.Kod koji se prikazuje u desnom frejmu na početnoj strani. Projekat 52 . </b></td> <td><input type="text" name="bgColor" size="15" value="white"></td> </tr> <tr> <td><b>Boja teksta:</b></td> <td><input type="text" name="fgColor" size="15" value="black"></td> <td>&nbsp. Isti princip može da se primeni na svaku stranu koja ima pristup cookie fajlu. if( fg != "" ) document."> <table> <tr> <td><b><font size="5">Podesite <br> boje na web strani:<br> <br></font></b></td> <tr> <td><b>Boja pozadine:&nbsp. != "" ) document. return( c. function { var bg var fg if( bg if( fg } setCustoms() = getCookieValue( "bgColor" ).2 • Main. = getCookieValue( "fgColor" ). var fg = getCookieValue( "fgColor" ).bgColor = bg. if( bg != "" ) document. koja se poziva iz taga body na događaj onLoad. <body onLoad="JavaScript: setCustoms(). Web strana škole Center Park: Kompletan kod Gotova strana se sastoji iz sledećih fajlova: • MenuBar.slice( begin. deo za navigaciju."> <form onSubmit="JavaScript: saveCustoms( this ). 9.4. Kompletan kod se nalazi u poglavlju 7.if( end == -1 ) end = c. <input type="submit" value="Submit"></td> </tr> </table> </form> <br> <br> <a href="home.bgColor = bg.fgColor = fg.fgColor = fg. malo modifikovan primer."> čita vrednosti odgovarajućih promenljivih iz cookie fajla i primenjuje ih na boje dokumenta. != "" ) document. } function setCustoms() { var bg = getCookieValue( "bgColor" ). end ) ).&nbsp.Kod koji se prikazuje u levom frejmu početne strane.length.

html .5. • Store.html . i pruža mogućnost da se proizvodi dodaju u listu za kupovinu.html . da bi se shvatio princip rada.2.html .html . Kod se nalazi u poglavlju 4.html u desnom okviru. • home. • Customize. Kod se nalazi u poglavlju 5. Kod se nalazi u poglavlju 5. • AddTask.3.4.Kod za online test se nalazi u poglavlju 4.. • ViewCart.1.html" scrolling="auto" noresize> <noframes> <body> <p>This page uses frames.Ovaj fajl prikazuje pop-up kalendar.Strana koja prikazuje stavke koje je posetilaci izabrao i stavio u listu za kupovinu.Strana prikazuje proizvode koji su tranutno na listi za kupovinu.• LogIn. • Grade.Za potrebe objašnjenja.</p> </body> </noframes> </frameset> </html> Projekat 53 .6 .6.2. Kod se nalazi u poglavlju Error! Reference source not found. strana ima ime šifre koja se unosi na strani za logovanje. • PopUpCalendar. • y7v2xu89. Kompletan kod se nalazi u poglavlju 6. • Checkout.html . Kod ove strane je: <html> <head> <title>Center Park Home Page</title> </head> <frameset cols="150.html . • Test.Strana koja dozvoljava korisniku da promeni boju pozadine i teksta na strani. Kompletan kod se nalazi u poglavlju 6.html .Kod za logovanje.*"> <frame name="contents" target="main" src="MenuBar. koristi se za pristup kalendaru sa zadacima.Strana koja ocenjuje predat test.html u levom i Main. da bi korisnik mogao da izabere datum za koji unosi zadatak. Kod se nalazi u poglavlju 5.6.html – Početna strana sa okvirima.html .Sledeća strana omogućava posetiocu da doda događaj u svoj kalendar. Kompletan kod se nalazi u poglavlju 6. ovo nije baš najsigurniji dizajn. prikazuje listu proizvoda. ali je napravljen kao takav namerno.Početna strana prodavnice. prikazuje MenuBar.html . Kompletan kod se nalazi u poglavlju 3. Naravno.html" scrolling="no" noresize> <frame name="main" src="Main. but your browser doesn't support them.

Sign up to vote on this title
UsefulNot useful