Web programiranje

Ve ba 2

Zadatak 1
U Javascript-u napraviti klasu MenuItem koja predstavlja stavku menija. Od atributa treba da sadri
naziv, adresu na koju ukazuje, i naziv CSS klase koja mu se moe pridruiti. Stavku menija treba
realizovati pomou <A> elementa. Od funkcija sadri:
Funkciju koja vri validaciju (proverava da li su naziv ili adresa prazni i vraa 0 ukoliko je bar
jedan od njih prazan)
Funkciju koja postavlja atribute
Zatim napraviti klasu DynamicMenu koja od atributa sadri vektor elemenata tipa MenuItem, i naziv
HTML elementa u koji se meni iscrtava (kontejner). Od funkcija sadri:
Funkciju koja kao parametar ima ID HTML elementa i njega postavlja kao kontejner
Funkciju koja dodaje novu stavku menija
Funkciju koja brie stavku menija iji je naziv naveden
Funkciju koja crta dinamiki meni u kontejner
Obe klase smestiti u eksternu Javascript datoteku, koju potom treba uitati u HTML iz prethodne
vebe. Zatim pomou Javascripta dodati stavke menija koje su takoe date u prethodnoj vebi.

Zadatak 2
U Javascript-u napraviti klasu Knjiga koja slui za prikaz podataka o knjizi. Od atributa treba da sadri
naziv, ISBN broj, godinu izdanja, autora, izdavaa, kratak opis knjige i URL slike knjige (apsolutni ili
relativni). Od funkcija sadri:
Funkciju koja postavlja sve atribute
slika Naziv
Funkciju koja generie prikaz kao na slici i dodaje ga
HTML elementu iji je ID dat u vidu parametra Kratak opis
ISBN
Za generisanje prikaza napraviti DIV element, a potom mu
God.
dodavati HTML elemente po potrebi, tako da se dobije prikaz
Autor
kao na slici. Tako dobijeni DIV element dodati navedenom
Izdava
HTML elementu.
U Web strani iz prethodne vebe uitati klasu Knjiga koja je
data u vidu eksterne datoteke, i zatim pomou Javascripta dodati 8 knjiga. Knjige bi trebalo da se
prikau u delu za sadraj, jedna ispod druge.
Zadatak 3
U Javascript-u napraviti klasu Knjiga koja slui za prikaz podataka o knjizi. Od atributa treba da sadri
naziv, ISBN broj, godinu izdanja, autora, izdavaa, kratak opis knjige i URL slike knjige (apsolutni ili
relativni). Od funkcija sadri:
Funkciju koja postavlja sve atribute
slika ISBN
Funkciju koja generie prikaz kao na slici i dodaje ga
God.
HTML elementu iji je ID dat u vidu parametra
Autor
Za generisanje prikaza napraviti DIV element, a potom mu Naziv Izdava
dodavati HTML elemente po potrebi, tako da se dobije prikaz Kratak opis
kao na slici. Tako dobijeni DIV element dodati navedenom
HTML elementu.
U Web strani iz prethodne vebe uitati klasu Knjiga koja je
data u vidu eksterne datoteke, i zatim pomou Javascripta dodati 8 knjiga. Knjige bi trebalo da se
prikau u delu za sadraj, jedna ispod druge.

Zadatak 4
U Javascript-u napraviti klasu Artikal sa sledeim atributima: ifra (broj), naziv, URL slike artikla
(apsolutni ili relativni), cena, stanje (da li ga ima na lageru). Ova klasa sadri i sledee funkcije:
Konstruktor koji postavlja sve atribute
Funkciju koja vri validaciju artikla (ispituje da li su ifra, naziv ili cena prazni, ukoliko je bar
jedan on njih prazan, vraa 0)
Zatim napraviti klasu ListaArtikala koja sadri vektor objekata klase Artikal. Klasa treba da ima
sledee funkcije:
Funkciju za dodavanje novog artikla
Funkciju za tabelarni prikaz artikala

ifra Naziv slika cena stanje

Funkciju za sortiranje po ceni

Funkciju za sortiranje po ifri
U Web stranu iz prethodne vebe uitati eksternu JS datoteku koja sadri navedene klase, i preko
objekta klase ListaArtikala dodati 10 artikala u deo za sadraj. Zatim ih sortirati po ifri, a potom po
ceni.
Zadatak 5
U Javascript-u napraviti klasu Automobil sa sledeim atributima: ifra, naziv, vektor URL adresa slika
automobila (apsolutne ili relativne adrese), cena, kilometraa, snaga motora (broj), boja (string). Ova
klasa sadri i sledee funkcije:
Konstruktor koji postavlja sve atribute Podaci o
Funkciju koja vri validaciju artikla (ispituje
automobilu
da li su ifra, naziv ili cena prazni, ukoliko slika
je bar jedan on njih prazan, vraa 0)
Funkciju za prikaz podataka o automobilu
(slika sa leve strane, podaci sa desne
strane), koja kao parametar ima ID
elementa ijem e sadraju biti dodati << >>
podaci.
Prikaz realizovati tako to treba napraviti DIV element koji e sluiti kao kontejner u kome e biti
smeteni svi potrebni podaci. Zatim taj DIV element dodati navedenom HTML elementu.
Ispod HTML elementa u kome se prikazuju automobili postaviti dva dugmeta. Prvo dugme uitava
prethodnu sliku u nizu, a drugo dugme uitava sledeu sliku u nizu (voditi rauna da li postoji
prethodna odnosno naredna slika). Funkcionalnost dugmeta realizovati pomou dve funkcije i
globalnih atributa (koji pamte trenutni indeks slike i niz automobila).

U Web stranu iz prethodne vebe uitati eksternu JS datoteku koja sadri klasu Automobil, i
programskim putem dodati 10 automobila u niz. Svaki automobil treba imati bar 2 slike.
Zadatak 6
U Javascript-u napraviti klasu Automobil sa sledeim atributima: ifra, naziv, URL adresa slike
automobila (apsolutna ili relativna adresa), cena, kilometraa, godina proizvodnje, snaga motora
(broj), boja (string), stanje (da li je auto
iznajmljen). Ova klasa sadri i sledee funkcije: Lista
Konstruktor koji postavlja sve atribute automobila
Funkciju koja vri validaciju artikla (ispituje slika
da li su ifra, naziv ili cena prazni, ukoliko
je bar jedan on njih prazan, vraa 0)
Funkciju za prikaz podataka o automobilu
(bez slike), koja vraa generisani HTML
Podaci o
Napraviti klasu GalerijaAutomobila koja sadri niz automobilu
automobila. Ova klasa sadri sledee funkcije:
Funkciju za dodavanje automobila u
galeriju (broj parametara je jednak broju atributa klase Automobil)
Funkciju koja obrauje dogaaj kad se klikne miem (onclick) na neki od automobila iz liste
(ime se menja stanje automobila iznajmljen/slobodan). Ukoliko je automobil iznajmljen,
pozadina naziva automobila u listi treba biti crvene boje.
Funkciju koja obrauje dogaaj kad se miem pree preko nekog automobila u listi
(onmouseover)
Funkciju za prikazivanje galerije (kao na slici) u navedeni HTML element. Prikaz realizovati
tako to treba napraviti DIV element koji e sluiti kao kontejner u kome e biti smeteni svi
potrebni podaci. Zatim taj DIV element dodati navedenom HTML elementu.

Uitavanje slike se vri promenom src atributa <img> elementa. Zbog jednostavnosti, pretpostaviti da
postoji samo jedan objekat klase GalerijaAutomobila na Web strani.

U Web stranu iz prethodne vebe uitati eksternu JS datoteku koja sadri ove klase, i programskim
putem dodati 10 automobila u galeriju koja e biti .
Zadatak 7
U Javascript-u napraviti klasu MenuItem koja predstavlja stavku menija. Od atributa treba da sadri
naziv, adresu na koju ukazuje, i URL slike klase koja mu se moe pridruiti. Od funkcija sadri:
Funkciju koja vri validaciju (proverava da li su naziv ili adresa prazni i vraa 0 ukoliko je bar
jedan od njih prazan)
Funkciju koja postavlja atribute
Funkciju koja postavlja sliku
Zatim napraviti klasu DynamicMenu koja od atributa sadri vektor elemenata tipa MenuItem, i naziv
HTML elementa u koji se meni iscrtava (kontejner). Od funkcija sadri:
Funkciju koja kao parametar ima ID HTML elementa i njega postavlja kao kontejner
Funkciju koja dodaje novu stavku menija
Funkciju koja postavlja pozadinsku sliku kontejnera
Funkciju koja menja CSS klasu pridruenu kontejneru
Funkciju koja crta dinamiki meni u kontejner
Obe klase smestiti u eksternu Javascript datoteku, koju potom treba uitati u HTML iz prethodne
vebe. Zatim pomou Javascripta dodati stavke menija koje su takoe date u prethodnoj vebi.

Zadatak 8
Dizajn strane uraen u prethodnoj vebi realizovati pomou Javascript klase. Zatim uokviru prazne
HTML strane uitati tu klasu (eksterna JS datoteka), i generisati dizajn strane. Takoe treba da sadri
sledee funkcije:
Funkciju za promenu CSS klase za naslov (className atribut HTML elementa)
Funkciju za promenu CSS klase za sadraj
Funkciju za promenu CSS klase za navigaciju
Funkciju za definisanje naslova koji e biti prikazan u odgovarajuem delu strane
Funkciju za iscrtavanje dizajna strane.
Na osnovu date funkcionalnosti proceniti koje dodatne atribute klasa treba da sadri. Napraviti 6 CSS
klasa i dinamiki menjati izgled naslova, sadraja i navigacije.
Zadatak 9
Dizajn strane uraen u prethodnoj vebi realizovati pomou Javascript klase. Zatim uokviru prazne
HTML strane uitati tu klasu (eksterna JS datoteka), i generisati dizajn strane. Klasa treba da sadri
sledee funkcije:
Funkciju za dodavanje stavke menija u navigaciju
Funkciju za definisanje naslova koji e biti prikazan u odgovarajuem delu strane
Funkciju za iscrtavanje dizajna strane.
Na osnovu date funkcionalnosti proceniti koje atribute klasa treba da sadri. Stavke menija dodati
korienjem funkcija klase.

Zadatak 10
Dizajn strane uraen u prethodnoj vebi realizovati pomou Javascript klase. Zatim uokviru prazne
HTML strane uitati tu klasu (eksterna JS datoteka), i generisati dizajn strane. Klasa treba da sadri
sledee funkcije:
Funkciju za dodavanje stavke menija u navigaciju
Funkciju za definisanje naslova koji e biti prikazan u odgovarajuem delu strane
Funkciju za iscrtavanje dizajna strane.
Na osnovu date funkcionalnosti proceniti koje atribute klasa treba da sadri. Stavke menija dodati
korienjem funkcija klase.
Zadatak 11
Napraviti Javascript klasu Slika koja e
od atibuta imati naziv, opis i URL
adresu slike.
Napraviti klasu Galerija koja sadri niz slika
slika. Zbog jednostavnosti
pretpostaviti da postoji samo jedan
objekat te klase na Web strani. Klasa
sadri sledee funkcije: slik slik << >> slik slik
za dodavanje slike
a a a a
za rotiranje trake ulevo (slika Podaci o slici
sa desne strane se pomera
ulevo i time se menja
centralna, uveliana slika)
za rotiranje trake udesno
za prikaz (kao na slici, iscrtavaju se svi potrebni elementi u DIV element i on se dodaje
navedenom HTML elementu. Dva dugmeta << i >> slue za rotiranje trake ulevo odnosno
udesno)
Veliina malih slika i velike slike su atributi klase (zbog jednostavnosti koristiti width atribut <img>
elementa). U delu za sadraj Web strane iz prethodne vebe uitati eksternu JS datoteku koja sadri
obe klase i napraviti galeriju od najmanje 8 slika.

Zadatak 12
Napraviti Javascript klasu Slika koja e od atibuta imati naziv, , lokaciju i datum gde je snimljena
fotografija i URL adresu slike.
U delu za sadraj iz prethodne vebe
(Web strana za galeriju) napraviti galeriju
slika za potrebe hotela. U gornjem delu slika
se iscrtava traka sa slikama sa strane po
dve slike manjih dimenzija (zbog
jednostavnosti koristiti width atribut
<img> elementa), a u centralnom delu slik slik
a << >> a
velika slika. Obavezno ispotovati pozicije
slika. Veliina male i velike slike su slik slik
Podaci o slici
globalni parametri. Ispod velike slike su a a
dva dugmeta koja slue za uitavanje
prethodne odnosno sledee slike. Na
primer, ukoliko se klikne na desno dugme, slike na traci se pomeraju za jedno mesto ulevo, tako da se
uveliava slika koje je prethodno bila sa desne strane.
U donjem delu se nalaze podaci o uvelianoj slici. Realizovati sve potrebne funkcije i promenljive.
Zadatak 13
Generisati HTML kod koji odreuje dizajn strane za potrebe sajta hotela. Arhitektura strane je
trokolonska i data je na slici desno. Srednja kolona treba biti irine 700px. Deo sa sadrajem treba da
ima pozadinu bele boje i proizvoljan sadraj, dok za ostale
delove stil (boja pozadine, slova, slike) proizvoljno odrediti. naslov
Naslov treba obavezno da sadri naziv sajta i da bude visine
navigacija
50px, a navigacija sledee linkove:
Poetna strana
Rezervacija sobe
Galerija (slike hotela i okoline) sadraj
Prijava korisnika
Registracija korisnika
Kontakt

Deo za navigaciju treba imati (proizvoljnu) pozadinsku sliku u donjem desnom uglu i irine je 20%.
Footer je visine 30px. Dizajn strane uraditi pomou tabela. Celokupan izgled (stilove) staviti u
zasebnu CSS datoteku.

Zadatak 14
Generisati HTML kod koji odreuje dizajn strane za potrebe sajta softverske firme. Arhitektura strane
je data na slici desno. Deo sa sadrajem treba da ima pozadinu bele boje, proizvoljnu pozadinsku
sliku u donjem desnom uglu i proizvoljan sadraj, dok za ostale delove stil (boja
pozadine, slova, slike) proizvoljno odrediti. Naslov treba da
naslov

navigacija
sadri naziv sajta i da ima visinu 100px, a navigacija sledee
linkove:
Poetna strana
Pregled softverskih reenja sadraj
Kupovina softverskih reenja
Prijava korisnika
Registracija korisnika
footer
Deo za navigaciju treba imati (proizvoljnu) pozadinsku sliku u
koja se ponavlja vertikalno i da ima irinu 150px. Footer je visine 30px. Dizajn strane uraditi
pomou tabela. Celokupan izgled (stilove) staviti u zasebnu CSS datoteku.
Zadatak 15
Generisati HTML kod koji odreuje dizajn strane za potrebe sajta agencije za nekretnine. Arhitektura
strane je trokolonska i data je na slici desno. Srednja kolona treba biti irine 700px. Deo sa sadrajem
treba da ima pozadinu bele boje i proizvoljan sadraj, dok za
ostale delove stil (boja pozadine, slova, slike) proizvoljno naslov
odrediti. Naslov treba obavezno da sadri naziv sajta i da
bude visine 50px, a navigacija sledee linkove:
Poetna strana sadraj
Pregled nekretnina
Prijava korisnika
Registracija korisnika
navigacija
Deo za navigaciju treba da bude visine 20px. Dizajn strane
uraditi pomou div elemenata. Celokupan izgled (stilove)
staviti u zasebnu CSS datoteku.