4.

Primjer stranice sa JavaScriptom

Za primjer stranice sa JavaScriptom napravljena je stranica za trgovinu knjiga. Stranica ima

tri unosna polja (naslov, autor i ID). Ispod se nalazi tabela koja prikazuje dodane knjige.
Klikom na dugme se dodaje knjiga u tabelu sa podacima unesenim u unosna polja. Izgled
stranice je prikazan na slici 4.1.

Slika 4.1. Izgled stranice

Elementi stranice su napravljeni koristeći HTML i uljepšani koristeći Bootstrap CSS.

Budući da je fokus ovog rada na JavaScript, HTML i CSS će se preskočiti.
Bez JavaScripta ova stranica je statična, što znači da praktično nema nikakvu funkciju,
samo ima dati izgled. Implementiranjem JavaScripta ova stranica postaje dinamična. U
sljedećem dijelu rada će biti prikazani dio po dio koda i objašnjene njihove funkcije.

Slika 4.2. Klasa Book

Na slici 4.2. je prikazan kod klase Book. Svrha ove klase je olakšanje programiranja.
Mnogo je lakše programirati koristeći klase jer klase dodaju jedan nivo apstrakcije koji
doprinosi lakšem shvatanju logike i povezanosti koda. Klasa ima konstruktor koji svakom
objektu ove klase dodjeljuje tri vrijednosti, a to su naslov (title), autor (author) i ID (id).
Ove tri vrijednosti su upravo paralelne unosnim poljima naslov, autor i ID.

13
 Slika 4.3. Klasa Store

Klasa Store je klasa koja za razliku od klase Book ne sadrži nikakve podatke, nego umjesto
podataka sadrži funkcije koje, odrađuju sve poslove vezano sa trgovinom. Npr. dobijanje
liste svih knjiga u trgovini (getBooks), dodavanje nove knjige (addBook) i uklanjanje neke
knjige (removeBook).
Naravno, moguće je napisati kod sa ovim funkcijama bez korištenja klase, ali korištenjem
klase se lakše prepoznaje na šta se odnose funkcije (u ovom slučaju svaka od ovih funkcija
se odnosi na samu trgovinu).
Takođe se da primijetiti da je svaka funkcija unutar Store klase statična (static). To
omogućava korištenje funkcija klase Store bez kreiranja objekta klase Store.
LocalStorage je svojstvo koje omogućava JavaScript stranicama i aplikacijama da spremaju
parove ključ/vrijednost u web pretraživaču bez datuma isteka. To znači da će podaci
pohranjeni u pretraživaču postojati čak i nakon zatvaranja prozora pretraživača. U ovom
slučaju localStorage je korišten da se pohrane (sačuvaju, spreme) sve knjige koje korisnik
unese. Knjige su pohranjene u localStorage u JSON formatu.

14
Funkcija getBooks() jednostavno vraća listu svih knjiga koje se nalaze u localStorage-u. U
slučaju da nema knjiga u localStorage-u funkcija vraća prazan niz.
Funkcija addBook(book) dodaje novu knjigu u localStorage. To radi tako što prvo uzima
listu svih knjiga koje se trenutno nalaze u localStorage-u koristeći funkciju getBooks(), a
zatim dodaje novu knjigu, koja je prenesena kao parametar funkcije, na kraj te liste i na
kraju ažurira listu knjiga u localStorage-u.
Funkcija removeBook(id) uklanja knjigu koja ima istu id vrijednost kao vrijednost
parametra id. Kao i addBook, ova funkcija prvo uzima listu svih knjiga. Zatim prolazi kroz
listu i provjerava da li je id knjige koju provjerava isti kao vrijednosti parametra id. Ovo
radi preko forEach petlje. Kada nađe traženu knjigu, uklanja je iz liste i na kraju ažurira
listu u localStorage-u.

Slika 4.4. Klasa UI

15