Javascript Proje Kat

Projekat 1

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 2

• 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">  </script> </head> <body> <table border="1" cellpadding="2" width="75%"> <tr> <td colspan="7" align="center"> <font size="6"><b> <script language="JavaScript">  </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">  </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 4

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">  </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">  </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">  </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">  </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 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 više stringova, razdvojenih znakom koji se navodi kao parametar. Ovim se vrši prevođenje 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 rotirajući kalendar (fajl Rotating_Calendar.html): <html> <head> <title>Calendar</title> <script language="JavaScript">  </script>

Projekat 7

</head> <body> <table cellpadding="2" width="75%"> <tr> <td> <script language="JavaScript">  </script> </td> <td rowspan="2"> <center><font size="6"><b> <script language="JavaScript">  </script> </center></b></font> </td> <td align="right"> <script language="JavaScript">  </script> </td> </tr> <tr> <td> <script language="JavaScript">  </script> </td> <td align="right"> <script language="JavaScript">  </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 8

<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">  </script> </tr> </table> </body> </html>

Dobijanje i postavljanje događaja za kalendar Pošto JavaScript nema ulaz/izlaz, i ne može da komunicira sa serverom da bi zatražio podatke iz baze podataka, dobijanje i postavljanje događaja ne može da se napiše 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 događaji za željeni mesec. Evo jednostavnog primera za učitavanje podataka iz baze na serveru, koristeći ASP: <%@ LANGUAGE=VBSCRIPT %> <% Dim Database_Connection Set Database_Connection = Server.CreateObject( "ADODB.Connection" ) Database_Connection.Open( "DRIVER={SQL Server};" & "SERVER=MyServer;DATABASE=MyDatabase" ) Dim SQL_Statement Dim Record_Set SQL_Statement = "Select * FROM Calendar_Events_Table" Set Record_Set = Database_Connection.Execute( SQL_Statement ) %> <html> <head> <title>Calendar Example</title> <script language="JavaScript">  </script> </head>

Projekat 9

<body> <!-Place calendar here --;> </body> </html> JavaScript može da prikaže informacije koje dobije. Da bi pojednostavili, smatramo da ASP vraća podatke u obliku JavaScript polja, i ime polja je tasks. U ovom slučaju, prikazivanje informacije je jednostavno. <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">  </script> </tr> </table> 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, možda je dobra ideja da se obeleži ćelija koja predstavlja današnji dan. Sledeći kod dodaje ovu funkcionalnost document.write( "<td height='75' valign='top'" ); if( fixYear( now.getYear() ) == fixYear( month.getYear() ) && now.getMonth() == month.getMonth() && now.getDate() == i + 1 ) document.write( " bordercolor='red'" ); document.write( "><b>" + (i+1) + "</b><br>" ); if( tasks[i+1] ) document.write( tasks[i+1] ); document.write( "</td>" ); Naredba if crta crveni okvir oko polja ako se prikazuju trenutni mesec i godina. Evo kompletnog primera koji koristi rotirajući kalendar i prikazuje nekoliko zadataka u odgovarajućim danima (ime fajla je Calendar.html): <html>

Projekat 10

<head> <title></title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: document.cookie='loggedin=true';"> <i>Welcome</i><b> <script language="JavaScript">  </script> <i>Here are your tasks for</i>

Projekat 11

<table width="75%"> <tr><td align="center"> <font size="6"><b> <script language="JavaScript">  </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">  </script> </tr> </table> <table width="75%"> <tr> <td> <script language="JavaScript">  </script> </td> <td align="right"> <script language="JavaScript">  </script> </td> </tr> </table> </body> </html> 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 objašnjeno 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 omogućavaju korisniku da rotira kalendar. Evo osnovnog formata za ova dva linka. <script language="JavaScript">  </script> Iako se ovaj način prenosa parametara razlikuje, funkcionalnost je identična. Kod koji izdvaja parameter iz cookie-ja je sledeći: 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 funkcionišu dobro, od vas zavisi koji ćete izabrati za svoju stranu.

3.3. Pop-Up kalendar za kompletiranje forme

Pop-up kalendar je potpuno drugačiji tip kalendara. Iako se razlikuje od beskonačnog kalendara, većina koda za njegovo kreiranje je skoro identična. 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, 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. Srećom, ovde ne treba prikazati događaje. Međutim, sada treba voditi računa o komunikaciji između prozora između kalendara i početnog (roditeljskog) prozora..

3.4. Prikazivanje pop-up kalendara

Prikazivanje kaledara je u stvari kreiranje tabele i popunjavanje podacima. Korišćenje 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 objašnjavamo samo neke osobine.Ime ovog fajla je Simple_Popup_Calendar.html: <html> <head> <title>Date Chooser</title>

Projekat 13

<script language="JavaScript">  </script> </head> <body> <form name="theForm"> <table border="1" width="75%" style="border-collapse: collapse"> <tr> <td align="left" colspan=2> </td> <td colspan=3> <center> <b><script language="JavaScript">  </script></b></center> </td> <td align="right" colspan=2> </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 14

<script language="JavaScript">  </script> </tr> </table> <input type="hidden" name="date"> </form> </body> </html> U ovom primeru, pitanje je veličina kalendara. Zbog toga što će kalendar da se prikaže u novom prozoru, verovatno će biti manji od roditeljskog prozora. Dugmad se koriste u ćelijama tabele zbog toga što na taj način izazivaju događaje koji se jednostavno hvataju. Funkcija onSelect() i sakriveno polje forme će biti objašnjeno 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 izvičemo nove parametre pomoću 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 funkcioniše 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: <tr> <td align="left" colspan=2> <b>Month:</b> <input type="text" name="Month" size="5"> <script language="JavaScript"> <!- document.theForm.Month.value = fixMonth( month.getMonth() + 1 ); // --> </script> </td> <td colspan=3> <center> <b><script language="JavaScript">  </script></b><br> <input type="submit" value="Submit"> </center> </td>

Projekat 15

<td align="right" colspan=2> <b>Year:</b> <input type="text" name="Year" size="5"> <script language="JavaScript">  </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. Obe kontroliše 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, vrši se osvežavanje strane i menja se kalendar. Pošto su imena tekst polja Month i Year, možemo da koristimo isti kod koji je korišćen za beskonačni 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 rotirajući pop-up kalendar (fajl PopUpCalendar.html): <html> <head> <title>Izbor datuma</title> <style type="text/css">  </style> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <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">  </script> </td> <td colspan=3> <center> <b><script language="JavaScript">  </script></b><br> <input type="submit" value="Submit"> </center> </td> <td align="right" colspan=2> <b>Godina:</b>

Projekat 17

<input type="text" name="Year" size="5"> <script language="JavaScript">  </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">  </script> </tr> </table> <input type="hidden" name="date"> </form> </body> </html>

4. Kreiranje online testa ili istraživanja 4.1. Kreiranje testa

Kreiranje test dela online testa (za razliku od dela sa ocenjivanjem) je veoma jednostavno. Do sad bi trebalo da ste naučili kako da kreirate obrazac i da proverite ispravnost unetih podataka pre njegovog slanja. Evo kompletnog koda (fajl Test.html): <html> <head> <title>Center Park - Prvi kolokvijum iz predmeta Internet i Web tehnologije</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <b><font size="5">Internet i web tehnologije - 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. Ne trosite previse vremena na neko pitanje. Imate 30 minuta da zavrsite kolokvijum. Srecno! </font> <br><br> <form name="TestForm" action="Grade.html" onSubmit="JavaScript: return( validate( this ) );"> <table width="100%" cellpadding="2" cellspacing="2"> <tr> <td>1)</td> <td> <font face="Courier"> Zamislite da aritmeticki operatori nemaju prioritet. Pretpostavljajuci da su operatori levo asocijativni, koja je vrednost izraza 5-3*4/2+6 ? </font> </td> </tr>

Projekat 19

<tr> <td>Odgovor</td> <td><input type="text" name="Q1" size="20"></td> </tr> <tr><td> </td><td> </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> </td><td> </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> </td><td> </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> </td><td> </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"> 

Projekat 20

</script> </body> </html> Kompletan test bi trebao da vam bude poznat. Forma sadrži pet pitanja, svako sa tekst poljem u koje korisnik upisuje odgovor. Pre nego što se pošalje 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 objašnjena kasnije. Stvar koju možda niste videli do sada je vremensko ograničenje. Poslednji script tag blokira dugme Submit 30 minuta pošto je strana učitana. <script language="JavaScript">  </script> Napomena: U Internet Explorer-u se dešava 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 dešava.

4.2. Kreiranje strane koja vrši automatsko ocenjivanje

Ideja je bila da se test automatski oceni, kad se pritisne dugme Submit i da se odmah prikažu 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 možemo unapred da znamo kojim redosledom će polja forme da se pojave u URL stringu, tako da nam treba rešenje koje dobija parove name=value u bilo kom redosledu. Na sreću, 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 tražimo parove name=value, ova funkcija pretražuje URL string u potrazi za željenom informacijom, koristeći znak (&) kao delimiter. Pošto smo ovo rešili, sad treba da generišemo rezultat. Evo kompletnog koda za stranu Grade.html:

Projekat 21

<html> <head> <title>Center Park - Rezultati testa</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <b><font size="5">Center Park - Prvi kolokvijum iz predmeta Internet i Web tehnologije</font> </b> <br><br> <font face="Courier"> Sva pitanja su <b>obavezna</b>. <i>Pazljivo</i> procitajte pitanje pre nego sto na njega odgovorite. Ne trosite previse vremena na neko pitanje. Imate 30 minuta da zavrsite kolokvijum. 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. Pretpostavljajuci da su operatori levo asocijativni, koja je vrednost izraza 5-3*4/2+6 ? </font> </td> </tr>

Projekat 22

<tr> <td>Odgovor</td> <td><b>10</b>      <script language="JavaScript">  </script> </td> </tr> <tr><td> </td><td> </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>      <script language="JavaScript">  </script> </td> </tr> <tr><td> </td><td> </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>      <script language="JavaScript">  </script> </td> </tr> <tr><td> </td><td> </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>      <script language="JavaScript">  </script> </td> </tr> <tr><td> </td><td> </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>      <script language="JavaScript">  </script>

Projekat 24

</td> </tr> </table> </form> <br><br> <script language="JavaScript">  </script> </body> </html> Jedina razlika izmedju testa i istrazivanja je u tome što istrazivanje ne sadrzi deo sa ocenjivanjem, tako da ovde neće biti dat primer istraživanja.

5. Kreiranje strane za kupovinu 5.1. Uvod

Online prodavnicu je relativno lako implementirati. Na žalost, postoje ozbiljni problemi u vođenju iste. Postoje ozbiljni problemi u naplati, kontroli inventara, isporuci... Naša strana sadrži stranu za kupovinu, koja se u potpunosti nalazi na računaru 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 može da se dobije pregled liste, radi eventualnog uklanjanja stavki. Poslednji deo je izlazna strana.

5.2. Izbor stavki i dodavanje u listu

Najvažnija osobina liste za kupovinu je mogućnost da čuva stvari (pointere na robu). Prvo treba odlučiti gde i kako treba čuvati podatke. Jedno od mesta su URL parametri. Na žalost, ovde postoji puno problema: postoji ograničenje u dužini i prave probleme kad se koristi više strana. Pošto ulaz/izlaz iz fajla ne postoji u JavaScript-u, postoji samo još jedan način 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 sledeći 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 sledećem formatu: item# = String za opis stavke,#.## Treba zapamtiti da String za opis stavke ne sme da sadrži 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 ) ); } Pošto smo rešili preoblem čuvanja podataka i dodavanja stavke u cookie, kreiranje ostatka koda je jednostavno. Evo kompletnog koda (fajl Store.html): <html> <head> <title>Center Park - Prodavnica</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <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 - Jedna velicina odgovara svima, amblem skole na prednjoj strani.</td> <td> $9.99</td><td align="center"> <input type="button" value="Add" onClick="JavaScript: addItem( 'Skolska kapa - Jedna velicina odgovara svima amblem skole na prednjoj strani.', 9.99 );"> </td> </tr> <tr> <td>Skolska majica - velicine S-M-L, amblem skole na prednjoj strani.</td> <td> $19.99</td><td align="center">

Projekat 26

<input type="button" value="Add" onClick="JavaScript: addItem( 'Skolska majica - velicine S-M-L amblem skole na prednjoj strani.', 19.99 );"> </td> </tr> <tr> <td>Karte za fudbalsku sezonu - Gledajte Bobcats cele sezone.</td> <td> $12.99</td><td align="center"> <input type="button" value="Add" onClick="JavaScript: addItem( 'Karte za fudbalsku sezonu - Gledajte Bobcats cele sezone.', 12.99 );"> </td> </tr> <tr><td colspan="3" align="center"> <input type="button" value="View Cart" onClick="JavaScript: document.location='ViewCart.html';">       <input type="button" value="Check Out" onClick="JavaScript: document.location='CheckOut.html';"> </td></tr> </table> </form> </body> </html> Ova online prodavnica nudi tri proizvoda. Dugme pored svake stavke omogućava kupcu da doda stavku u listu, pozivajući funkciju addItem() . Dva dugmeta u dnu strane omogućavaju kupcu da vidi svoju listu za kupovinu i da se izloguje kad završi.

5.3. Pregled sadržaja liste

Ovo je jedan deo strane koji nije zahtevan, ali se obično očekuje. Pre nego što napišemo kompletan kod, trebalo bi da rešimo problem: kako dobiti podatke iz cookie fajla. Evo traženog 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 identične, osim što jedna vraća opis a druga cenu stavke. Pošto dobiju vrednost value iz para name=value iz cookie-ja, funkcija ga deli koristeći zarez kao graničnik i prikazuju prvi, odnosno drugi deo niza. Pošto su napisane ove dve funkcije, prikaz sadržaja je jednostavan, korišćenjem for petlji (fajl Prikaz.html): <html> <head> <title>Center Park - Pregled spiska</title> <script language="JavaScript">  </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">  </script> <tr><td colspan="3" align="center"> <input type="button" value="Nastavite kupovinu" onClick="JavaScript: document.location='Store.html';">       <input type="button" value="Izlogujte se" onClick="JavaScript: document.location='CheckOut.html";"> </td></tr> </table> </form> </body> </html> Ponekad se korisnik predomisli, tako da je dobra ideja da mu se omogući da ukloni stavku sa liste. Sledeća funkcija omogućava upravo: function removeItem( name ) { document.cookie = name + "=;";

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. <script language="JavaScript">  </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. Sad treba dodati dugme za uklanjanje stavke, koje će, kad je pritisnuto, da pozove funkciju removeItem() za odgovarajuću stavku. Evo kompletnog primera koji sadrži i dugme koje uklanja stavku (fajl ViewCart.html): <html> <head> <title>Center Park - Pregled spiska</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <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">  </script> <tr><td colspan="3" align="center"> <input type="button" value="Nastavite kupovinu" onClick="JavaScript: document.location='Store.html';">       <input type="button" value="Izlogujte se" onClick="JavaScript: document.location='CheckOut.html';"> </td></tr> </table> </form> </body> </html>

5.4. Odjavljivanje i naručivanje

Jedna od najvažnijih delova kupovine je naručivanje. Bez ove strane, ostali delovi bi bilo besmisleni. Strana za odjavljivanje i naručivanje prikazuje listu stavki i ukupnu cenu. Evo kompletnog koda (fajl CheckOut.html): <html> <head> <title>Center Park - Odjavljivanje iz prodavnice</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <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">  </script> <tr> <td><b>Total</b></td> <td>$ <script language="JavaScript">  </script> </td> </tr> </table> </form> <a href="home.html"> Vrati se na pocetnu stranu</a> </body> </html> Većina 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( "" ); } vraćaju informacije o stavkama iz cookie fajla i stavljaju ih u tabelu pomoću for petlje. <script language="JavaScript">  </script> Poslendnji deo tabele sadrži ukupnu cenu, koja se računa kad se prikazuju stavke, po sledećem obrascu: total += parseFloat( getItemPrice( "item" + i ) ); Promenljiva total je deklarisana u head sekciji strane i postavljena na nulu. Pošto se prikažu sve stavke, ukupna cena se prikazuje na kraju tabele, na ovaj način: <tr>

Projekat 32

<td><b>Total</b></td> <td>$ <script language="JavaScript">  </script> </td> </tr> </table> Jedna od funkcionalnosti koja nije uključena u ovu stranu, a trebalo bi da postoji, je forma koju naručilac treba da popuni, i dugme submit, kojim roba zaista naručuje.

6. Zaštita strane – pristup samo za članove, strana zaštićena šifrom 6.1. Uvod

Ozbiljan je problem kreirati sigurnu web stranu koristeći samo JavaScript. Doduše, postoji puno pokušaja, i svi su manje-više neuspešni. Ovo poglavlje prikazuje jednostavno rešenje, kao i mnoga druga, neuspešna rešenja. Sigurnost podrazumeva dve stvari: prva, da samo autorizovane osobe imaju pristup određenim podacima i da prikaz podataka bude prilagođen određenoj osobi.

6.2. Jednostavna provera šifre

Najjednostavniji način da strana bude zaštićena šifrom je da se zatraži od korisnika da unese šifru, ta šifra se proveri i zatim se dozvoli korisniku da poseti stranu. Sledeći primer prikazuje ovu (fajl Bad_Checking.html). <html> <head> <title> Password Protected Site </title> <script language="JavaScript">  </script> </head> <body> <form action="Continue.html" onSubmit="JavaScript: return(verifyPassword(this.password.value));"> Please enter your password: <input type="text" name="password" size="20"><br> <input type="submit" value="Submit"> </form> </body> </html>

Projekat 33

Na prvi pogled, ovo se čini kao dobro rešenje. Ako se unese ispravna šifra (sesame), prikazuje se strana Continue.html; Na žalost, postoji ozbiljan propust u planu: kod sadrži šifru, kao i ime strane kojoj treba pristupiti. Korisnik može da vidi HTML kod strane koju prikazuje, i time da pročita traženu širu. Ova tehnika možda može da spreči prosečnog posetioca, ali ne i korisnika koji ima makar minimalno znanje. Znači, bilo bi zgodno kad bi mogli da sprečimo posetioca da vidi kod.

6.3. Sakrivanje šifre u strani sa okvirima

Postoji način da sprečite 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: <html> <head> <title> Password Protected Site </title> </head> <frameset cols="0,*"> <frame name="contents" target="main"> <frame name="main" src="Authenticate.html"> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html> Authenticate.html: <html> <head> <title> Password Protected Site </title> <script language="JavaScript">  </script> </head> <body> <form action="Continue.html" onSubmit="JavaScript: return(verifyPassword(this.password.value));"> Please enter your password: <input type="text" name="password" size="20"><br> <input type="submit" value="Submit"> </form> </body> </html> Rešenje 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 sprečimo da se prikaže konteksni meni.

6.4. Sakrivanje konktekstnog menija na web stranama

Sprečavanje pojavljivanja kontekstnog menija na webe strani zahteva izvestan posao. Potrebno je da uhvatite svaki događaj miša na strani, da izdvojite samo desni klik, i da zatražite od browser-a da ne prikaže kontekstni meni. Ceo proces bi mogao da izgleda ovako: <script language=JavaScript>  </script> Sada ovaj kod treba ubaciti u head sekciju strane. Evo poboljšanog koda (fajl No_Context_Password.html), koji treba smestiti u frejm (fajl Frames.html). <html> <head> <title> Password Protected Site </title> <script language="JavaScript">  </script> </head> <body> <form action="Continue.html" onSubmit="JavaScript: return(verifyPassword(this.password.value));"> Please enter your password: <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, nije sve baš tako kako se čini...

6.5. Problem sa JavaScript sigurnošću

Web strana se uvek učita na računar posetioca pre nego što se prikaže. To znači da čak i ako sprečimo posetioca da vido kod, on i dalje može da pogleda u folder temporary Internet . Moguće je reći browser-u da ne učita stranu pre nego što je prikaže. Primer nećemo prikazati, pošto to i dalje nije sigurno rešenje. Ako je posetilaci dovoljno uporan, i dalje može da nađe šifru koja je sačuvana negde u memoriji browser-a. Iako to nije mnogo verovatno, moguće je da se uradi. Ovo nas dovodi do osnovnog problema JavaScript sigurnosti—šifra se uvek šalje na računar posetioca. Bez obzira koliko se trudili, vaša strana nikad nije u potpunosti zaštićena. Međutim, postoji zaista jednostavno rešenje za zaštitu strane koristeći isključivo JavaScript.

6.6. Strana zaštićena šifrom

Rešenje je jednostavno: Ime druge strane, koja treba da proveri šifru je isto kao šifra. Ovim ne moramo da šaljemo šifru na računar posetioca, pa samim tim i ne moramo da je krijemo. Evo kompletnog koda (fajl Protected_Page.html): <html> <head> <title> Password Protected Site </title> <script language="JavaScript">

Projekat 36

 </script> </head> <body> <form onSubmit="JavaScript: verifyPassword( this.password.value );"> Please enter your password: <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.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, otvoriće mu se sigurna strana. Ako pogreši, prikazuje mu se greška 404. Na strani škole Center Park primenjena je ova tehnika. Prvo, postoji strana na kojoj posetilac treba da unese korisnično ime i šifru (fajl LogIn.html). <html> <head> <title> Center Park - Logovanje </title> <script language="JavaScript">  </script>

Projekat 37

</head> <body onLoad="JavaScript: setCustoms();"> <center><font size=6><b>Dobrodosli na pocetnu stranu skole Center Park</b></font></center> <br><br> Da bi pristupili sadrzaju ove strane, logujte se pomocu korisnickog imena i sifre: <br><br> <form name="login" onSubmit="JavaScript: LogIn( this ); return( false );" > <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">  </script> </body> </html> Fajl koji se otvara je y7v2xu89.html: <html> <head> <title></title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms(); document.cookie='loggedin=true';"> <i>Dobrodosli</i><b> <script language="JavaScript">  </script> <i>Evo vasih zadataka za</i> <table width="75%"> <tr><td align="center"> <font size="6"><b> <script language="JavaScript">  </script> </b></font> </td></tr> </table> <table border="1" cellpadding="2" width="75%"> <tr>

Projekat 39

<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">  </script> </tr> </table> <table width="75%"> <tr> <td> <script language="JavaScript">  </script> </td> <td align="center"> <a href="AddTask.html">Dodaj zadatak</a> </td> <td align="right"> <script language="JavaScript">  </script> </td> </tr> </table> <br> <br> <a href="home.html"> Vrati se na pocetnu stranu</a> </body>

Projekat 40

</html> Ovim posao nije završen. Prometićete da kad se strana učita, 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 našeg sajta koji mora da proverava ovu vrednost (fajl AddTask.html): <html> <head> <title>Center Park - Dodavanje zadatka</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <br> <br> <i>Raspored zadataka skole Center Park za </i><b> <script language="JavaScript">  </script></b>. <br><br> <br><br>

Projekat 41

<form name="taskForm" onSubmit="JavaScript: return( false );"> <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: <input type="text" name="date" size="10"> <input type="button" value="..." onClick="JavaScript: openDatePicker( document.taskForm.date );"> </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> Prva naredba koja se izvršava, if( getCookieValue( "loggedin" ) != "true" ) document.location = "Main.html"; proverava loggedin cookie vrednost i preusmerava posetioca na glavnu stranu ukoliko nije ulogovan. Ovim se sprečava posetilac da direktno unese URL i time izbegne unošenje šifre.

7. Kreiranje linkovanih rotirajućih oglasa Pošto je prostor na web strani ograničen, a postoji tako mnogo oglasa koje treba prikazati, naša ideja je da ih sve prikažemo na istom mestu.

7.1. Prikazivanje različitog oglasa svaki put kad se strana učita

Internet Explorer omogućava da se sadržaj menja u pokretu, korišćenjem atributa innerHTML. Sledeći primer prikazuje drugi tekstualni oglas svaki put kad se učita strana. (fajl IE.html) <html> <head> <title>Center Park Home Page - Main Page</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms(); rotateAd();"> <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.html">Log In</a><br> <a href="store.html">Store</a><br> <a href="customize.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> - Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students.<br> <br> <b>July 3rd</b> - First annual Adopt a Nerd Day! They are people too.<br> <br> <b>June 12th</b> - June Bug festival begins. </td> </tr> </table> </body> </html> Svaki put kad se učita, strana slučajno bira jedan sa liste predefinisanih oglasa i prikazuje ga.

Projekat 43

7.2. Kreiranje linkovanog tekstualnog oglasa koji se sam menja

Pošto učenici obično ne otvaraju istu stranu više puta, bolje bi bilo kad bi se oglasi sami menjali. Koristeći metod setTimeout() objekta Window, moguće me menjati oglas, recimo na svakih 10 sekundi. Menjajući sadržaj samog oglasa, oglasi postaju linkovi (fajl IE_rot.html). <html> <head> <title>Center Park Home Page - Main Page</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms(); rotateAd();"> <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 44

<td width="50%"> <a href="login.html">Log In</a><br> <a href="store.html">Store</a><br> <a href="customize.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> - Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students.<br> <br> <b>July 3rd</b> - First annual Adopt a Nerd Day! They are people too.<br> <br> <b>June 12th</b> - June Bug festival begins. </td> </tr> </table> </body> </html>

7.3. Kreiranje linkovanog slikovnog oglasa koji se menja

Ovo se postiže jednostavnom modifikacijom prethodnog primera. Jednostavno, svuda gde se nalazio tekst, treba staviti odgovarajuću sliku (fajl IE_img.html): <html> <head> <title>Center Park Home Page - Main Page</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms(); rotateAd();"> <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.html">Log In</a><br> <a href="store.html">Store</a><br> <a href="customize.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> - Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students.<br> <br> <b>July 3rd</b> - First annual Adopt a Nerd Day! They are people too.<br> <br> <b>June 12th</b> - June Bug festival begins. </td> </tr> </table> </body> </html> Sledeća stvar koju treba uraditi je da se problem reši nezavisno od browser-a.

7.4. Nezavisnost od platforme

Problem sa prethodnim primerima je taj da funkcionišu samo u Internet Explorer-u. Netscape ne može da referencira HTML elemente direktno kroz atribud ID. Srećom, postoji rešenje. 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 učita strana (fajl Main.html): <html> <head> <title>Center Park - Pocetna strana</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms(); rotateAd();"> <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.html"><img name="adImage" border="0" width="345" height="200"></a> </td> <td width="50%"> <a href="login.html">Log In</a><br> <a href="store.html">Store</a><br> <a href="customize.html">Customize</a> </td> </tr>

Projekat 47

<tr> <td width="100%" colspan="2"> <hr> <font face="Courier" size="5">*** Skolske novosti ***</font> <br> <br> <b>4. Jun</b> - Vatromet u trznom centru! Dodjite da uzivate u prazniku sa nastavnicima, osobljem i ucenicima skole Center Park.<br> <br> <b>2. Jun</b> - Prvi godisnji DAN USVOJITE KRELCA ! Oni su takodje ljudi.<br> <br> <b>12. Jun</b> - Pocinje junski festival buba.</td> </tr> </table> </body> </html> Na svakih 10 sekundi se menjaju vrednosti atributa href i src. Ovo obezbeđuje istu funkcionalnost kao prethodni primer, ali je kod malo duži i teži za praćenje.

8. Korišćenje JavaScript-a za kreiranje dinamičkih HTML (DHTML) efekata

8.1. Uvod

Do sada smo dodavali funkcionalnosti web strani. Ovo poglavlje se odnosi na poboljšavanje izgleda strane. Fokusiraćemo se na dva tipa dinamičkog sadržaja: promenu izgleda dugmeta i promenu šeme boja za celu stranu.

8.2. Promena izgleda slike prelaskom miša

Ovo je možda najčešći dinamički efekat na internetu. Zbog jednostavnosti, postoje različiti načini implementacije. Na našoj strani koristimo jednostavan pristup – za img tag postoji događaj miša. Sledeći primer koristi jednostavan tekst link. Svrha primera je da se na njemu prikažu poboljšanja do kojih dolazi dodavanjem ovog jednostavnog efekta.(fajl Text.html). <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"> Home </a> </td></tr> <tr><td> <a href="LogIn.html" target="main"> Login </a> </td></tr> <tr><td> <a href="Store.html" target="main"> Store </a>

Projekat 48

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

Projekat 49

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

Projekat 50

<img border="0" src="login1.bmp" name="login" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> </a> </td></tr> <tr><td> <a href="Store.html" target="main"> <img border="0" src="store1.bmp" name="store" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> </a> </td></tr> <tr><td> <a href="Customize.html" target="main"> <img border="0" src="customize1.bmp" name="customize" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> </a> </td></tr> </table> </body> </html> Svi događaji sa slikama se obrađuju 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 događaj. Drugi parametar je broj koji određuje tip događaja. Izabrana je vrednost 2 za događaj onMouseOver a vrednost 1 za događaj onMouseOut. Za svako dugme, treba kreirati posebnu sliku za svaki tip događaja. Možete da primetite dsa je dodat atribut name svakom image elementu. On se koristi u funkciji change() da bi se prikazala odgovarajuća slika u elementu. Odgovarajući kod u elementu image je: <img src="image1.bmp" name="image" border="0" onMouseOver="JavaScript: change( this, 2 );" onMouseOut="JavaScript: change( this, 1 );"> Ovaj metod se jednostavnije čita nego prethodni i smanjiće vreme učitavanja ukoliko postoji više slika na strani. Osim toga, obe metode identično funkcionišu.

8.3. Promena šeme boja

Još jedna od dinamičkih osobina strane mogu da budu šeme boja. Ako boje sačuvamo u cookie fajlu, 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, i promenljive sačuvati u cookie fajlu (fajl Custom.html). <html> <head> <title> Center Park - Podesavanja </title> <script language="JavaScript">  </script> </head> <body>

Projekat 51

<form onSubmit="JavaScript: saveCustoms( this );"> <table> <tr> <td> <b><font size="5">Podesite <br> boje na web strani:<br> <br></font></b> </td> <tr> <td> <b>Boja pozadine:    </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.html"> Vrati se na pocetnu stranu</a> </body> </html> 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 odgovarajući kod za promenu boje, biće prikazana sa odgovarajućom šemom boja. Kod kojim se učitava šema boja je jednostavan (fajl Customize.html). <html> <head> <title>Center Park - Podesavanja</title> <script language="JavaScript">  </script> </head> <body onLoad="JavaScript: setCustoms();"> <form onSubmit="JavaScript: saveCustoms( this );"> <table> <tr> <td><b><font size="5">Podesite <br> boje na web strani:<br> <br></font></b></td> <tr> <td><b>Boja pozadine:    </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.html"> Vrati se na pocetnu stranu</a> </body> </html> Ovaj, malo modifikovan primer, ne samo da čuva boje, već ih i učitava i primenjuje sledeći put kad se strana učita. 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 događaj onLoad, <body onLoad="JavaScript: setCustoms();"> čita vrednosti odgovarajućih promenljivih iz cookie fajla i primenjuje ih na boje dokumenta. Isti princip može da se primeni na svaku stranu koja ima pristup cookie fajlu.

9. Web strana škole Center Park: Kompletan kod Gotova strana se sastoji iz sledećih fajlova: • MenuBar.html - Kod koji se prikazuje u levom frejmu početne strane, deo za navigaciju. Kod se

nalazi u poglavlju 8.2 • Main.html - Kod koji se prikazuje u desnom frejmu na početnoj 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 objašnjenja, 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 - Sledeća strana omogućava posetiocu da doda događaj 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 - Početna strana prodavnice, prikazuje listu proizvoda, i pruža mogućnost 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 – Početna strana sa okvirima, prikazuje MenuBar.html u levom i Main.html u desnom

okviru. Kod ove strane je: <html> <head> <title>Center Park Home Page</title> </head> <frameset cols="150,*"> <frame name="contents" target="main" src="MenuBar.html" scrolling="no" noresize> <frame name="main" src="Main.html" scrolling="auto" noresize> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </frameset> </html>

Documents

Javascript Proje Kat