FED Priručnik Za Pripremu PDF

Priručnik za pripremu
Front-end web development
2019
─
Laze Nančića 34
21000 Novi Sad, Serbia
Sadržaj
1. Uvod u Front-end development ........................................................................................... 1

1.1. Arhitektura modernih web-aplikacija ............................................................................ 1
1.2. Fundamentalne front-end tehnologije ........................................................................... 2
1.2.1. Web-čitači (browseri) i način prikazivanja web stranica ......................................... 2
1.2.2. HTML .................................................................................................................... 4
1.2.3. CSS ...................................................................................................................... 6
1.2.4. JavaScript ............................................................................................................. 7
1.3. Developer tools ............................................................................................................ 9
1.3.1. Elements............................................................................................................... 9
1.3.2. Console ...............................................................................................................10
1.3.3. Sources ...............................................................................................................11
1.3.4. Network ...............................................................................................................12
2. Uvod u programiranje ........................................................................................................13
2.1. Algoritamsko razmišljanje ...........................................................................................13
2.2. Pisanje algoritma ........................................................................................................13
2.3. Primeri algoritama .......................................................................................................14
2.3.1. Primer 1: Konverter potrošnje automobila ............................................................15
2.3.2. Primer 2: Računanje proseka ocena ....................................................................16
2.3.3. Primer 3: Prijava na web sajt sa brojačem pokušaja ............................................17
2.3.4. Primer 4: Podizanje novca sa bankomata ............................................................18
2.3.5. Primer 5: Rešavanje kvadratne jednačine ............................................................20
2.4. Zadaci za vežbu ..........................................................................................................22
3. Programiranje u JavaScript-u .............................................................................................23
3.1. Pisanje JavaScript programa ......................................................................................23
3.1.1. Potreban softver ..................................................................................................23
3.1.2. Primer JavaScript programa ................................................................................24
3.2. Komentari ...................................................................................................................26
3.3. Promenljive .................................................................................................................26
3.3.1. Ključna reč let ....................................................................................................28
3.4. Osnovni tipovi podataka ..............................................................................................28
3.4.1. Numerički tipovi ...................................................................................................29
3.4.2. Tekstualni tip........................................................................................................29
3.4.3. Logički tip.............................................................................................................29
3.4.4. null .................................................................................................................30
3.5. Operatori.....................................................................................................................30
3.5.1. Aritmetički operatori i operatori dodele .................................................................30
3.5.2. Relacioni operatori ...............................................................................................32
3.5.3. Logički operatori ..................................................................................................33
3.6. Kontrola toka i petlje ...................................................................................................35
3.6.1. if-else ..................................................................................................................35
3.6.2. else-if ...................................................................................................................37
3.6.3. switch ..................................................................................................................37
3.6.4. while ....................................................................................................................38
3.6.5. for ........................................................................................................................39
3.6.6. Naredbe break i continue .....................................................................................40
3.6.7. Nizovi ...................................................................................................................41
3.6.8. Dvodimenzionalni nizovi ......................................................................................43
3.6.9. Zadaci ..................................................................................................................46
3.7. Funkcije ......................................................................................................................52
3.8. Objekti ........................................................................................................................62
4. TypeScript programski jezik ...............................................................................................72
4.1. Тipovi podataka ..........................................................................................................72
4.2. Anotiranje tipova .........................................................................................................73
4.3. Type Assertions ..........................................................................................................73
4.4. Funkcije ......................................................................................................................74
4.4.1. Opcioni i podrazumevani parametri......................................................................74
4.5. Kompajliranje ..............................................................................................................75
4.6. Zadaci .........................................................................................................................76
5. Osnove objektno-orijentisanog programiranja ....................................................................79
5.1. Osnovni koncepti ........................................................................................................79
5.1.1. Definisanje klase u programskom jeziku TypeScript ............................................81
5.1.2. Kreiranje instance klase .......................................................................................81
5.1.3. Dot (.) operator ....................................................................................................82
5.1.4. Konstruktor ..........................................................................................................83
5.1.5. Modifikatori kontrole pristupa ...............................................................................84
5.1.6. Sakrivanje informacija i enkapsulacija ..................................................................85
5.1.7. this .......................................................................................................................88
5.1.8. Zadaci ..................................................................................................................89
5.2. Nasleđivanje ...............................................................................................................96
5.2.1. Polimorfizam ......................................................................................................101
5.2.2. Redefinisanje metoda (method overriding) .........................................................102
5.2.4. Interfejsi .............................................................................................................107
1. Uvod u Front-end development
1.1. Arhitektura modernih web-aplikacija

Kako bi se pravilno usvojili koncepti i terminologija razvoja front-end aplikacija i web stranica,
ovde ćemo se ukratko osvrnuti na njihove osnovne delove i dati kratak pregled web tehnologija
pre nego što pokrijemo programiranje u jeziku JavaScript. Što se tiče terminologije, izrazi web
aplikacija i web stranica će se u ovom priručniku koristiti kako bi označili istu stvar. Sa
stanovišta tehnologija i osnovnih gradivnih delova, web aplikacije i web stranice i jesu iste pri
čemu je jedina razlika u kompleksnosti i načinu korišćenja jednih i drugih. Izraz web stranica se
uglavnom koristi za stranice koje su isključivo prezentacione prirode, namenjene pružanju
informacija korisnicima. Web stranice su prilagođene pregledu sadržaja i pored toga pružaju
vrlo malo interaktivnih funkcionalnosti. Sa druge strane, web aplikacije služe kako bi nam
pomogle u rešavanju nekog problema (vođenje evidencije, uređivanje multimedijalnog sadržaja,
skladištenje podataka, ...) ili zabavi (streaming, socijalne mreže, video igre, ...), tako da u tom
smislu podsećaju na programe koje imamo instalirane na našim računarima ili telefonima
(aplikacije) s’ tom razlikom što se izvršavaju u sklopu web-čitača (engl. browser).
Današnje web-aplikacije se, na najvišem nivou, mogu razdvojiti na dve osnovne celine:
1. Serverski (back-end) deo - programski kod koji se izvršava na računaru koji nazivamo
server. Server isporučuje podatke i stranice raznim klijentima koji ga kontaktiraju. Pored
toga, server prihvata podatke od klijentskih aplikacija, vrši komunikaciju sa bazama
podataka i drugim serverima, radi analize i obrade podataka, itd. Serverska aplikacija se
može pisati u bilo kom programskom jeziku (ili kombinacijom više njih), ali su
najzastupljeniji Java, C#, Python i PHP (sve više i sam JavaScript). Svaki računar može
da bude server, potrebno je samo da ima pokrenutu serversku aplikaciju i da bude
konfigurisan tako da bude dostupan za klijente.
2. Klijentski (front-end) deo - Izvršava se na računarima na kojima se prikazuje stranica u
sklopu web-čitača, poput Google Chrome i Mozilla Firefox. Ove računare nazivamo
klijentima. Klijentske aplikacije se razvijaju upotrebom HTML, CSS i JavaScript jezika. U
ovom priručniku naglasak će biti na tehnikama i tehnologijama za kreiranje front-end
dela web aplikacija.
Klijentski i serverski deo web aplikacija međusobno komuniciraju preko interneta poštujući
pravila HTTP protokola. HTTP protokol definiše format i sadržaj poruka koje se mogu
razmenjivati između klijenta i servera. Time što su ove poruke predefinisane je olakšana
komunikacija pošto programeri klijentskih i serverskih aplikacija znaju šta da očekuju od druge
strane. Slika 1-1 ilustruje opisanu arhitekturu web aplikacija (stranica).
U skladu sa prikazanom arhitekturom, firme koje se bave razvojem web-aplikacija imaju
posebne timove programera zaduženih za programiranje serverskih (back-end developeri) i
Arhitektura modernih web-aplikacija

Dokument za polaznike 1
klijentskih aplikacija (front-end developeri). Programeri koji su osposobljeni za kreiranje svih

delova web aplikacije se svrstavaju u full stack web developer-e.
Slika 1-1 Arhitektura modernih web-aplikacija
1.2. Fundamentalne front-end tehnologije

Kao što ne pomenuto u prethodnom poglavlju, sve web aplikacije se izvršavaju u sklopu
browsera. U ovom poglavlju ćemo opisati njegovo osnove funkcionisanja kao i način na koji oni
koriste 3 fundamentalne tehnologije (HTML, CSS i JavaScript) kako bi prikazali web stranicu.
1.2.1. Web-čitači (browseri) i način prikazivanja web stranica

Browser je program koji služi za učitavanje i prikazivanje web sadržaja sa određene adrese.
Možemo reći da je zadatak browsera da kôd koji dobiju od servera prevedu i prikažu korisniku u
vidu web stranice pri čemu svaki od njih ovo radi na različit način, tako da je uvek neophodno
testirati izgled i funkcionalnosti naših web aplikacija u što je većem broju različitih browser.
Među najpopularnije web browsere danas spadaju:
● Google Chrome
● Mozilla Firefox
● Apple Safari
● Opera
● Microsoft Edge
Fundamentalne front-end tehnologije

Slika 1-2 Princip prikaza web stranice na osnovu učitanih datoteka sa servera
Način na koji se web stranice prikazuju na osnovu kôda i podataka dobijenih sa tražene adrese
prikazaćemo na primeru otvaranja stranice http://www.google.com.
Svaka web stranica definisana je svojom web adresom, odnosno URL-om (skraćeno od
Uniform Resource Locator). Ovaj URL (koji mi, kao korisnik, unosimo u adresno polje) će web
browseru omogućiti da zaključi kako i odakle može da dobavi stranicu koju treba da nam
prikaže. Za ovo će mu biti od koristi 2 osnovna dela web adrese:
1. Protokol - http://
2. Adresa - www.google.com
Ovde je bitno napomenuti da se za prikaz web sadržaja danas koriste dva protokola: http
(Hyper Text Transfer Protocol) i https (HTTP Secure), pri čemu je tendencija da se potpuno
pređe na https koji podržava šifrovanje prenetih podataka i predstavlja sigurniju verziju http-a.
Ukoliko ne unesemo protokol, browser će dopuniti ovaj deo za nas. Sam URL će omogućiti
browseru da locira konkretan HTML fajl koji treba da nam prikaže. Više detalja o tome kako
browser koristi web adrese za lociranje konkretnog računara koji servira željenu stranicu možete
pronaći u okviru na dnu ovog poglavlja.
Server koji se nalazi na željenoj lokaciji, nakon primanja zahteva, šalje web browseru HTML
stranicu koja se nalazi na zadatom URL-u (pretpostavimo da se radi o datoteci index.html
koja je prikazana na Slici 1-2). Nakon uspešnog preuzimanja browser će, čitajući red po red u
primljenoj html datoteci, prikazati saržaj web stranice u formi koja je određena HTML jezikom.
HTML jezik definiše pravila koja diktiraju kako se određeni delovi web stranice prikazuju
korisniku. Kao primer ovoga, navešćemo sledeća 2 HTML elementa sa njihovim pripadajućim
značenjem:

● <h1>Dobrodošli</h1> - Tekst “Dobrodošli” pikaži kao glavni naslov na stranici

(podebljana slova koja su duplo veća nego običan tekst).
● <input type=”text”> - Na ovom mestu prikaži tekstualno polje u koje korisnik može da
unese tekst putem tastature.
Pored, HTML-a koji definiše sadržaj i strukturu naše stranice, u HTML datotekama se mogu
naći elementi još 2 jezika:
1. CSS (Cascading Style Sheets) - Jezik uz pomoć kojeg je moguće detaljno stilizovat
HTMLi elemente na stranici
2. JavaScript - Programski jezik putem kojeg je moguće isprogramirati ponašanje
elemenata naše stranice.
Ova tri jezika predstavljaju temelje modernih web stranica i jedini su jezici koje web browseri
znaju da tumače. Sve napredne tehnologije koje se danas koriste (TypeScript, Sass, Less, …)
moraju se prevesti na neki od navedenih jezika u finalnom (produktnom) obliku stranice. Svaku
od ovih tehnologija ćemo detaljnije predstaviti u poglavljima koje slede.
Za kraj, napomenimo da je uobičajena praksa da se kôd napisan u nekom od navedenih jezika
piše u posebnim datotekama (sa ekstenzijama .html, .css, i .js) pri čemu se u HTML datoteci
(jer je ona prva koja se preuzima i procesira) navode sve CSS i JavaScript datoteke koje su
povezane s njom, tako da je drugi zadatak web browsera da, nakon što naiđe na HTML
naredbu koja predstavlja vezu prema drugoj datoteci, tu datoteku učita i obradi pre nego što
nastavi sa daljom obradom. Slika 1-2 predstavlja primer učitavanja osnovne HTML datoteke
(index.html) u koju su povezane dodatne JavaScript i CSS datoteke, kao i unutar koje se nalazi
jedna slika (koja se takođe mora dodatno učitati sa servera).
1.2.2. HTML
HTML jezik predstavlja jezik za definisanje sadržaja web-stranica, tako što se tekstualni sadržaj
koji se prikazuje korisniku proširuje HTML elementima (stručno HTML tagovi). HTML tagovi
govore web-čitaču na koji način da prikaže (iscrta, renderuje) koji deo sadržaja. HTML elementi
koje možemo da koristimo su definisani HTML standardom i sa njima se polaznici upoznaju u
sklopu prvog modula kursa. Slika 1-3 prikazuje osnovnu strukturu jednostavnog taga.
Slika 1-3 Struktura HTML tag-a

Prvo što je potrebno uočiti je da se ovde radi o HTML tagu koji se naziva h1, koji je po HTML
standardu rezervisan za glavne naslove (Header 1). Ime taga se nalazi unutar zagrada < i >
(odnosno znakova manje od i veće od) i HTML tag-ovi poseduju svoj otvarajući i zatvarajući deo
tako da se sav sadržaj između otvarajućeg i zatvarajućeg taga smatra delom tog tag-a. HTML
elementi mogu da sadrže samo tekst (kao što je slučaj sa h1 tagom sa Slika 1-3) ili druge HTML
elemente. Zatvarajući tag se razlikuje od otvarajućeg po kosoj liniji (stručno slash ili forward
slash) koja se nalazi pre imena tag-a.
Unutar otvarajućeg taga, pored imena elementa, mogu se naći HTML atributi koji dodatno
proširuju značenje određenog elementa. Jedan HTML tag može da ima 0 ili više atributa, pri
čemu su atributi koji se mogu dodati HTML elementima takođe definisani standardom. U
primeru na slici, HTML element ima jedan atribut koji se zove class, i njegova vrednost je
naslovi crveno (detaljnije upoznavanje sa HTML atributima i njihovim vrednostima je predviđeno
na prvom modulu kursa).
Slika 1-4 Primer HTML tag-a sa jednim atributom
Primer HTML koda koji definiše web stranicu sa jednim naslovom, paragrafom teksta i linkom
kao i kako ta stranica izgleda prikazana u browseru možete videti na listingu i slici ispod.
Probajte da prepišete ovaj kod, snimite ga kao html datoteku (recimo primer.html) i otvorite u
svom browseru (duplim klikom na datoteku).
<html>
<head>
<title>HTML primer</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<h1>Dobrodošli</h1>
<p>
HTML (енгл. Hyper Text Markup Language, језик за означавање
хипертекста) је описни језик специјално намењен опису веб страница.
Помоћу њега се једноставно могу одвојити елементи као што су наслови,
параграфи, цитати и слично. Поред тога, у HTML стандард су уграђени
елементи који детаљније описују сам документ као што су кратак опис
документа, кључне речи, подаци о аутору и слично. Ови подаци су
општепознати као мета подаци и јасно су одвојени од садржаја
документа.
Актуелна верзија стандарда је HTML 4.01, а сам стандард одржава
Конзорцијум за Веб (W3C, World Wide Web Consortium).
</p>
<a href="https://sr.wikipedia.org/wiki/HTML">Pročitajte više</a>
</body>
</html>
Slika 1-5 Prikaz HTML stranice sa primera
1.2.3. CSS
CSS predstavlja jezik za definisanje stila HTML elemenata. Bez CSS stilova sve HTML stranice
bi izgledale isto, odnosno HTML elementima bi stilove dodeljivali browseri. Koristeći CSS
pravila, developeri i dizajneri mogu vrlo detaljno da definišu izgled pojedinih HTML elemenata.
CSS pravila su vezana na HTML stranice, i kao takva se mogu pisati u istim datotetakama kao i
HTML kod (datoteke sa ekstenzijom .html) ili u posebnim datotekama (ekstenzija .css) kako bi
mogli jedan skup CSS pravila povezati sa više HTML datoteka. Sintaksa CSS jezika je vrlo
jednostavna i lako se uči, osnovno što treba uočiti je da se jedna CSS datoteka sastoji od skupa
CSS pravila. Primer jednostavnog CSS pravila je dat na slici.
Slika 1-6 Primer CSS pravila
Osnovni deo CSS pravila je selektor koji govori browseru na koje HTML elemente se pravilo
odnosi (u ovom slučaju radi se o svim HTML elementima koji imaju class atribut čija je vrednost
naslovi, bez obzira na njihov naziv). Pored selektora, unutar vitičastih zagrada, navode se CSS
izrazi koji definišu kako će HTML elementi koji su obuhvaćeni selektorom da izgledaju. CSS
izrazi se sastoje od parova ime i vrednost koji su razdvojeni dvotačkom, dok su sami izrazi
međusobno razdvojeni tačka-zarezom. Važno je napomenuti da, iako se na srpskom jeziku i za
delove CSS izraza i za HTML atribute koristi termin atributi, na engleskom se HTML atributi
nazivaju HTML attributes, dok se kod CSS koristi naziv CSS properties.

Regulatorno telo koje je zaduženo za HTML i CSS standarde je firma pod nazivom World Wide
Web Consortium (W3C). Na W3C sajtu možete pronaći detaljne specifikacije HTML i CSS
jezika, kao i vrlo dobar izvor interaktrivnih primera, na delu koji se naziva W3C schools.
Na sledećem listingu dodaćemo sledeće stilove na html primer iz prethodnog poglavlja:
• Tekst glavnog naslova obojiti u crvenu boju i centrirati horizontalno;
• Ukositi tekst u paragrafu;
• Isključiti podvlačenje teksta u linku i povećati slova na 20px.
CSS kod koji omogućava ove izmene izgleda ovako:
h1 {
color: red;
text-align: center;
}
p {
font-style: italic;
}
a {
text-decoration: none;
font-size: 20px;
}
Ukoliko ovaj kod prepišete u CSS datoteku (stil.css) i snimite je u isti folder kao i datoteku iz
HTML primera, trebalo bi da vaša stranica sada izgleda ovako:
Slika 1-7 HTML primer sa dodatnim stilom
1.2.4. JavaScript
JavaScript je programski jezik koji se izvršava od strane web-čitača u okviru web-stranica. Bez
postojanja JavaScript naredbi, HTML stranice predstavljaju samo skup formatiranog teksta koji

ostaje nepromenljiv od trenutka prikaza bez obzira na korisničke akcije nad stranicom.
JavaScript čini HTML stranice dinamičnijim tako što omogućava pristup i menjanje HTML
elemenata u toku njihovog prikazivanja korisniku.
Interaktivnost i dinamičnost HTML elemenata se postiže sledećim JavaScript mogućnostima:
1. Pristup sadržaju - JavaScript omogućava selektovanje bilo kog HTML elementa,
njihovih atributa, tekstualnog sadržaja ili podelemenata. Na primer, u mogućnosti
smo da:
a. Selektujemo HTML elemente na sličan način kao pomoću CSS jezika.
Selekcijom (odabirom) HTML elementima dobijamo kontrolu nad elementom
unutar programskog koda;
b. Saznamo šta je uneseno u određeno tekstualno polje ili koji checkbox je
selektovan od strane korisnika.
2. Modifikacija sadržaja - Koristeći JavaScript naredbe u mogućnosti smo da dodamo
nove i obrišemo ili izmenimo postojeće HTML elemente u realnom vremenu. Na
primer, JavaScript nam omogućava da:
a. Dodamo pasus teksta na željenu poziciju;
b. Promenimo ime pridružene CSS klase određenim elementima kako bi
izazvali promenu njihovog izgleda pod određenim uslovima;
c. Promenimo dimenzije i pozicije odabranih elemenata na stranici.
3. Reakcija na događaje - Možemo da napišemo određene JavaScript naredbe koje
će se izvršiti kao reakcija na određene korisničke akcije (događaje). Neki od
događaja na koje možemo da reagujemo su:
a. Klik na dugme ili link na stranici;
b. Prelazak mišem preko određenog HTML elementa;
c. Unos teksta u elemente formi;
d. Kada istekne određeno vreme;
e. Kada web-čitač završi učitavanje stranice.
JavaScript predstavlja treći (i finalni) jezik koji web-čitači razumeju, pored HTML-a i CSS-a, sve
ostale web-tehnologije i jezici su izvedeni iz ova tri. Međutim, za razliku od HTML-a i CSS-a,
jedino JavaScript spada u programske jezike i kao takav zahteva poznavanje tehnika
programiranja kako bi se adekvatno koristio. U ovom priručniku biće pokrivene osnovne teme
koje su neophodne za savladavanje tehnika programiranja u JavaScript jeziku u sklopu Front-
end development kursa koji organizuje FTN Informatika D.O.O. Novi Sad.

Detaljnije o web adresama

Problem ovde jeste to što se računari na internetu ne identifikuju web adresom (URL-om)
već IP adresom, tako da web browser treba na neki način da sazna IP adresu računara
koji je vezan za uneti URL. Ovo će mu omogućiti neki od brojnih DNS servera. DNS
(Domain Name Server) je server koji sadrži spisak svih URL-ova na internetu i njima
pripadajućih IP adresa. Svaki browser ima preferirani DNS server kojem se obraća kada
mu treba IP adresa određenje web stranice, međutim ovo je moguće izmeniti u
podešavanjima (biranjem bržeg ili nama bližeg DNS servera možemo u nekoj meriti
ubrzati učitavanje web stranica na našem računaru).
Nakon kontaktiranja DNS servera, web browser saznaje da IP adresa za
www.google.com glasi 172.217.169.110 i spreman je da pošalje http zahtev za
početnom stranicom prema serveru koji se nalazi na toj IP adresi. Opisani proces koji
uključuje otkrivanje IP adrese uz pomoć DNS servera nije bitan samom browseru (on bi
nam prikazao stranicu i ako bismo uneli IP adresu u adresno polje), ali nam olakšava
pamćenje adresa web stranica jer ne moramo da pamtimo numeričke IP adrese, već
tekstualne (i često deskriptivne) URL-ove.
1.3. Developer tools

Iako je primarna funkcija web browsera prikaz HTML stranica, oni poseduju određene
funkcionalnosti koje nam mogu pomoći prilikom razvoja istih. Jedan od najkorisnijih delova
browsera za programiranje je Developer tools. Ovoj funkcionalnosti se pristupa pritiskom tastera
F12 i vrlo je slično realizovana u svim modernim browserima. U ovom poglavlju biće ukratko
predstavljeni delovi Developer tools alata koji su korisni za front-end razvoj. Slike i primeri su
kreirani korišćenjem Google Chrome browsera, međutim i ostali moderni browseri pružaju
prikazane funkcionalnosti na vrlo sličan način uz male razlike u imenima funkcija.
1.3.1. Elements
Elements (u nekim browserima se Inspector) tab u sklopu Developer tools-a služi za prikaz i
manipulaciju HTML elementima i njima pripadajućim CSS stilom. Prilikom otvaranja ovog dela,
sa leve strane se prikazuje HTML kod stranice odakle je moguće odabrati neki element
(označeno brojem 1 na slici) pri čemu se u desnom delu Developer tools-a (broj 2 na slici)
prikazuju sva CSS pravila vazana za odabrani element. U isto vreme, odabrani element se
vizuelno ističe na samoj stranici tako što se preko njega prikazuje providni sloj koji označava
gde i kako se taj element prikazuje na stranici (broj 3 na slici: plavo - sadržaj elementa,
narandžasto - padding, žuto - margina). Iz ovoga taba je moguće menjati HTML i CSS kod pri
čemu su promene vidljive direktno na otvorenoj stranici što predstavlja vrlo korisnu
funkcionalnost (bitno je napomenuti da se izmene ne čuvaju u samim HTML i CSS datotekama,
već ih je potrebno tamo uneti i snimiti datoteke kako bi ih trajno sačuvali).
Developer tools
Slika 1-8 Elements tab
HTML elemente je moguće odabrati i direktno na stranici uz pomoć Inspector alata (prva ikonica
sa leve strane u delu označenom brojem 4 na slici). Uz pomoć ovog alata, klikom na element na
samoj stranici njegov HTML i CSS kod se prikazuju u Developer Tools kao što je prikazano na
slici. Pored ovoga, ovaj deo Developer tools alata omogućava simulaciju prikaza stranice na
mobilnom uređaju. Ovo je moguće uz pomoć alata koji se nalazi pored Inspector alatke (druga
ikonica u delu označenom brojem 4 na slici). Klikom na ikonicu ovog alata, u sklopu browsera
se otvara prikaz koji simulira mobilni browser. Ovde je na brz i lak način moguće testirati kako
se naša stranica ponaša i izgleda na mobilnim uređajima. Iznad same stranice se nalaze
kontrole za biranje rezolucije ali je moguće i ručno menjati veličine prikaza pri čemu se trenutna
rezolucija prikazuje u tim kontrolama.
1.3.2. Console
Console tab predstavlja mesto u kojem možemo videti greške u našem JavaScript kodu i zbog
toga je preporuka da ovaj tab uvek imamo otvoren prilikom JavaScript programiranja. Za
potrebe demonstracije, izmenićemo JavaScript komandu document.write() tako da ona glasi:
dokument.write(). Ovo je nevalidna komanda u JavaScript jeziku (promenjena je ključna reč
document u dokument), tako da je prikazana HTML stranica prazna, a u developer konzoli se
prikazuje poruka o grešci u programu. Iz ove poruke možemo videti detaljniji opis greške i broj
linije u kojem se desila greška. Izgled konzole prilikom pojave ove greške je prikazan na slici.
Developer tools
Slika 1-9 Prikaz developer konzole
Sa slike se vidi da poruka o grešci glasi “Uncaught ReferenceError: dokument is not defined” i
da je do greške došlo na liniji broj 7 u datoteci prvi.html. Pored ovoga, u Console deo je
moguće ispisivati željene vrednosti iz programa upotrebom komande console.log().
1.3.3. Sources
Sources tab prestavlja mesto na kojem možemo videti sve datoteke koje su uključene u našu
stranicu i koje nam omogućava debug-ovanje našeg JavaScript koda. Debug-ovanje je proces
traženja grešaka (ili generalne inspekcije) programskog koda pri čemu se izvršavanje programa
zaustavi na željenoj naredbi nakon čega programer može da ručno nastavi izvršavanje sledećih
naredbi po želji prateći pri tome željene vrednosti u programu.
Na slici je dat primer debug-ovanja jednostavnog programa koji sabira dva broja u JavaScriptu.
Zaustavljanje izvršavanja programa se vrši klikom na broj linije koja sadrži naradbu u kojoj
želimo da zaustavimo izvršavanje. Ovo će dodati prekidnu tačku (breakpoint) na toj liniji (broj 1
na slici prikazuje prekidnu tačku na liniji broj 4). Kako bi ponovo pokrenuli naš JavaScript
program (koji će se nakon toga zaustaviti na prvoj prekidnoj tački) potrebno je ponovo učitati
stranicu (refresh). Alatna traka, na slici označena brojem 3 omogućava kontrole putem kojih je
moguće upravljati daljem izvršavanjem programa:
1. Resume - Nastavlja normalno izvršavanje programa do sledeće prekidne tačke ili do
kraja programa.
2. Step over - Nastavlja izvršavanje do sledeće naredbe. Ovo je vrlo korisna opcija koja
omogućava izvršavanje programa liniju-po-liniju.
Developer tools
3. Step into/Step out - Ukoliko trenutna naredba koja se izvršava sadrži poziv neke
eksterne funkcije, ove komande omogućavaju ulazak u izvršavanje pozvane funkcije pri
čemu se debug nastavlja u kodu te funkcije.
Željene vrednsti iz našeg programa možemo pratiti u Watch delu (broj 2 na slici). Dodavanje
vrednosti koje želimo da pratimo vrši se klikom na “+” ikonicu u gornjem desnom uglu Watch
dela nakon čega je moguće uneti izraz koji želimo da pratimo. Na slici su u Watch deo dodane
promenljive a i b iz programa pri čemu se mogu videti njihove trenutne vrednosti (3 i 5).
Slika 1-10 Sources tab
1.3.4. Network
U ovo delu Developer tools-a je moguće videti sve zahteve koji se sa naše stranice šalju prema
serveru (označeno brojem 1 na slici). Na slici se može videti da prikazana stranica šalje 10
zahteva za dodatnim resursima (css datoteke, fontovi, slike). Klikom na neki zahtev iz liste
dobijamo detaljni prikaz podataka o tom zahtevu u desnom delu (broj 2 na slici). Između
ostalog, ovde je moguće pogledati sadržaj odgovora od servera što je vrlo korisno ukoliko se
naša aplikacija oslanja na čestu komunikaciju sa serverima.
Slika 1-11 Network tab

Developer tools
2. Uvod u programiranje
2.1. Algoritamsko razmišljanje

Kako bi adekvatno savladali tehnike programiranja pomoću bilo kojeg programskog jezika,
neophodno je prvo ovladati veštinom algoritamskog razmišljanja prilikom rešavanja problema
(engl.. Problem solving). Algoritamsko razmišljanje predstavlja sposobnost da se zadani
problem razloži na skup manjih podzadataka i njegovo rešenje predstavi kao niz koraka koji
postepeno dovode do rešenja. Mogućnost ovakvog sagledavanja problema korisna je u
različitim delatnostima, međutim u programiranju je ona najizraženija i upravo je stepen
savladavanja algoritamskog razmišljanja ono što definiše uspeh programera.
Algoritam predstavlja niz koraka koje je potrebno izvršiti u strogo definisanom redosledom kako
bi se u konačnom vremenu rešio neki problem. U opštem smislu, algoritme srećemo u
svakodnevnom životu u vidu različitih uputstava, recepata ili priručnika, tako da algoritamsko
razmišljanje u nekoj meri predstavlja prirodan način savladavanja svakodnevnih problema.
Jedan takav primer je problem koji svakodnevno rešavamo - pravljenje određenog jela.
Algoritam za rešavanje tog problema predstavlja niz koraka pripreme određenih sastojaka (npr.
meso, začini, povrće), zatim njihovu preradu (npr. mariniranje, dinstanje) i kombinovanje.
U ovom poglavlju biće predstavljene određene vežbe i smernice namenjene lakšem
savladavanju algoritamskog razmišljanja. Predstavljeni sadržaj je primenljiv na programiranje u
opštem smislu, ali će posebna pažnja biti obraćena na specifičnosti JavaScript jezika (ovo
posebno važi za korišćenu terminologiju, kao i za sam programski jezik).
2.2. Pisanje algoritma

Algoritme je korisno predstavljati grafičkim dijagramima koji se zovu dijagrami toka (engl.
Flowcharts). Važna veština programera početnika je mogućnost kreiranja ovih dijagrama bez
obzira na kompleksnost zadataka koji se rešava. Dijagrami toka imaju definisanu sintaksu koja
određuje koji simboli se mogu koristiti za koje instrukcije i korake kako bi bili čitljivi svima koji
poznaju ova pravila a ne samo onima koji su ih kreirali. Kreiranje dijagrama toka pre početka
programiranja se smatra dobrom praksom pogotovo u početnim fazama učenja programiranja.
Osnovni elementi dijagrama toka su prikazani na slici, a u nastavku je dato njihovo objašnjenje.
● Početak/Kraj - Simbol koji se obično stavlja na početak i kraj svakog algoritma
● Korak - Označava jedan konkretan korak u algoritmu
● Ulaz/Izlaz - Predstavlja trenutak u algoritmu kada se očekuju određeni ulazni podaci ili
se prikazuju rezultati bilo celog algoritma ili nekog njegovog podkoraka. Na ovom nivou
nam nije bitan konkretan način na koji se podaci unose u algoritam ni na koji način se
oni prikazuju korisniku. Ulazni podaci su poznati pre rešavanja problema dok ćemo
izlazni blok koristiti za prikaz rešenja.
Algoritamsko razmišljanje
● Grananje - Označava tačku kada se algoritam deli na više tokova izvršavanja. Tok kojim
će algoritam nastaviti svoje izvršavanje nakon koraka grananja zavisi od uslova koji je
zadat u grananju.
Sam tok izvršavanja algoritma vizualizovan je strelicama koje povezuju elemente dijagrama.
Smer strelica sugeriše smer izvršavanja algoritma (iako nije obavezno, opšti smer svih
dijagrama toka je od gore prema dole).
Slika 2-1 Osnovni simboli na dijagramu toka
2.3. Primeri algoritama

Pre nego što krenemo na skiciranje dijagrama toka za rešavanje problema, potrebno je posvetiti
se analizi problema kako bismo identifikovali ključne elemente algoritma rešenja. Nalaženje
odgovora na pitanja kao što su:
1. Kojim informacijama o problemu raspolažemo (šta od korisnih informacija i podataka
nam je poznato pre rešavanja problema)?
2. Šta je rezultat rešavanja zadatka?
3. Koji koraci su nam potrebni kako bih došli do željenih rezultata i koji su potencijalni
ostali koraci i njihove posledice?
Nam omogućava lakše konkretizovanje elemenata algoritma u odnosu na početni problem.
Primeri algoritama
2.3.1. Primer 1: Konverter potrošnje automobila

ZADATAK:
Napisati algoritam za pretvaranje potrošnje goriva iz jedinice MPG (Miles Per Gallon) u litre na
100 kilometara. Formula za konverziju je sledeća:
100 ∗ 3.78
𝐿 = 1.6 ∗ 𝑀𝑃𝐺
ANALIZA:
Zadan nam je podatak koliko milja (1,6 km) automobil može da pređe za 1 galon (3,78 litara)
goriva, tako da nam je ovo jedini ulazni podatak u algoritam. Ovu vrednost ćemo označiti sa
MPG. Jedini korak u algoritmu je izračunavanje broja litara koji automobil potroši na 100
kilometara na osnovu zadane formule. Ova vrednost nam je rezultat (izlazna vrednost)
algoritma i nju ćemo prikazati u izlaznom bloku.
Koraci algoritma:
1. Uneti MPG.
2. Unesenu vrednost primeniti u zadanoj formuli kako bi izračunali vrednost L.
3. Prikazati izračunatu vrednost.
Slika 2-2 Konverter potrošnje automobila
Primeri algoritama
2.3.2. Primer 2: Računanje proseka ocena

ZADATAK:
U ovom primeru zadatak nam je da izračunamo prosek 4 unesene ocene i na osnovu proseka
odredimo da li je polaznik položio kurs. Ocene su brojevi u rasponu od 0 do 50 i algoritam
određuje uspeh polaznika u zavisnosti od izračunatog proseka. Smatra se da je polaznik položio
kurs ukoliko mu je prosečna ocena veća od 65.
ANALIZA:
Poznati podaci za ovaj problem su nam ocene iz 4 modula kursa koje ćemo u algoritmu označiti
sa a, b, c i d. Rezultat algoritma je poruka koja govori da li je polaznik položio kurs, tako da za
različite unesene ocene, ovaj algoritam prikazuje jednu od dve moguće poruke: Polaznik je
položio kurs ili Polaznik nije položio kurs. Činjenica da biramo između dva moguća ishoda nam
govori da ćemo u ovaj algoritam morati da uvedemo grananje. Kako bi mogli da odredimo
rezultat, potrebno je u međukoraku izračunati prosek unetih ocena koji ćemo označiti sa x.
Koraci algoritma:
1. Uneti ocene a, b, c i d.
𝑎+𝑏+𝑐+𝑑
2. Izračunati prosek po formuli: 𝑥=
4
3. Ukoliko je x veće od 65 ispisujemo poruku: Polaznik je položio kurs.
4. Inače ispisujemo poruku: Polaznik nije položio kurs.
Slika 2-3 Algoritam za određivanje uspeha polaznika

Primeri algoritama
2.3.3. Primer 3: Prijava na web sajt sa brojačem pokušaja

ZADATAK:
Potrebno je kreirati algoritam koji opisuje proces prijave korisnika (login) na proizvoljnu web
stranicu. Korisnik se prijavljuje na stranicu unoseći svoje korisničko ime i lozinku nakon čega se
u sistemu proverava validnost podataka (za potrebe primera smatrati da se provera obavlja u
jednom koraku algoritma). Ukoliko je korisnik uneo ispravno korisničko ime i lozinku,
prikazujemo poruku o uspešnoj prijavi. Ukoliko korisnik pogreši, ispisujemo poruku o grešci.
Potrebno je omogućiti najviše 3 neuspešna pokušaja prijave. Korisnicima koji premaše ovaj broj
neuspelih pokušaja prijave prikazati poruku o tome i ne omogućiti dalju prijavu na sistem.
ANALIZA:
Kao ulazne podatke u proces prijave uzimamo korisničko ime i loziku koje korisnik unosi.
Algoritam se završava prikazom poruke o jednom od 2 moguća ishoda:
1. Uspešna prijava na sistem
2. Premašen je broj mogućih prijava, prijava je onemogućena
U ovom primeru imamo potrebu da evidentiramo broj neuspešnih pokušaja, tako da ćemo ovu
vrednost definisati u početnom koraku algoritma, ali ona po svojoj prirodi nije ulazni podatak,
već deo samog rešenja. Inicijalna vrednost brojača pokušaja je 1 i povećava se za 1 svakom
neuspelom prijavom. Nakon unosa pogrešnih podataka, potrebno je uvećati brojač i pomoću
grananja proveriti da li je trenutna vrednost brojača veća od 3. Ukoliko ovo nije slučaj, algoritam
se vraća na korak unosa korisničkog imena i lozinke omogućavajući korisniku da pokuša
ponovo da se prijavi. Ukoliko je broj pokušaja premašio 3, ispisati poruku da je dalje
prijavljivanje onemogućeno. U slučaju da korisnik unese ispravne podatke, prikazuje mu se
poruka o uspešnoj prijavi na sistem.
Koraci algoritma:
1. Definišemo brojač neuspelih prijava i postavimo mu vrednost na 1. Brojač ćemo označiti
sa n.
2. U ulaznom bloku preuzimamo korisničko ime i lozinku. Označićemo ih sa kIme i lozinka.
3. Pomoću grananja treba da proverimo da li su uneti podaci ispravni.
4. Ukoliko su podaci ispravni, prikažemo poruku o uspešnoj prijavi i završimo algoritam.
5. Ukoliko podaci nisu validni, uvećamo brojač pokušaja za 1 po formuli: n = n + 1
6. Definišemo korak grananja kojim proveravamo da li je brojač pokušaja veći od 3
7. Ukoliko je uslov u prethodnom grananju netačan, algoritam se vraća na korak 2
8. Ako je korisnik premašio broj mogućih neuspešnih pokušaja prijave, ispisujemo poruku
da je onemogućena dalja prijava i završavamo algoritam.
Primeri algoritama
Slika 2-4 Algoritam prijave na web sajt
2.3.4. Primer 4: Podizanje novca sa bankomata

Kao ilustraciju pisanja algoritama za probleme sa kojima se srećemo svaki dan iskoristićemo
zadatak podizanja novca sa bankomata.
ANALIZA:
S obzirom da problemu pristupamo sa stanovišta osobe koja koristi bankomat, naš zadatak je
da situaciju opišemo kao niz koraka i njihovih posledica koje je moguće preduzeti prilikom
korišćenja bankomata. U tom svetlu, nemamo ulazne niti izlazne podatke. Kada bi naš zadatak
bio pisanje programa za bankomat primer ulaznih podataka bi bio PIN i iznos za podizanje, dok
bi kao izlaz koristili poruke koje se ispisuju na bankomatu. Zbog jednostavnosti primera naš
bankomat je u mogućnosti samo da isplaćuje novac (ostale funkcije bankomata su izostavljene).
Koraci algoritma:
1. Ubacivanje kartice u bankomat
2. Unos PIN-a.
3. Ukoliko PIN nije ispravan, vraćamo se na korak 2.
Primeri algoritama
4. Unos željenog novčanog iznosa.

5. Ukoliko nemamo dovoljno novca na računu, biramo da unesemo novi iznos ili da
odustanemo.
6. Ako smo odabrali da ponovo unosimo iznos, vraćamo se na korak 4.
7. Ako smo odabrali odustajanje, preskačemo na korak 9.
8. Ukoliko imamo dovoljno sredstava na računu, bankomat nam isplaćuje željenu
sumu.
9. Bankomat nam vraća karticu nakon čega se završava rukovanje bankomatom.
Slika 2-5 Blok dijagram toka korišćenja bankomata
Primeri algoritama
NAPOMENE:
Ovde je bitno uočiti kako se i situacije koje se nama čine rutinske i očigledne stvari sastoje od
niza vrlo konkretnih koraka i uslova koji se moraju ispoštovati. Takođe, jedan zadatak može
imati beskonačno mnogo jednako dobrih rešenja, tako da svi prezentovani algoritmi ne
predstavljaju jedino moguće i najbolje rešenje datih zadataka.
2.3.5. Primer 5: Rešavanje kvadratne jednačine

Matematički problemi su po svojoj prirodi vrlo bliski problemima sa kojima se svakodnevno
srećemo prilikom programiranja. Ovo je pre svega posledica jasno definisanih početnih uslova
kao i pravila koja možemo u svakom koraku da primenimo. Zbog ovoga su opšte poznati
matematički zadaci vrlo dobro sredstvo za vežbanje algoritamskog razmišljanja.
U ovom primeru predstavićemo algoritamski postupak pronalaženja rešenja kvadratne
jednačine.
ANALIZA:
Ulazni podaci su koeficijenti jednačine a, b i c dok kao rezultat treba da dobijemo rešenja
jednačine x1 i x2. Prva stvar koju treba proveriti je da li jednačina uopšte ima realna rešenja.
Kako bi to bilo zadovoljeno, deo ispod korena (koji se još naziva i determinanta jednačine) ne
sme da bude negativan broj. Nakon toga, jednačina se rešava prema zadanoj formuli.
Koraci algoritma:
1. Zadati koeficijente a, b i c
2. Izračunati determinantu jednačine i označiti rezultat sa d
3. Proveriti da li je d negativan broj
4. Ukoliko jeste, rezultat je poruka da jednačina nema realna rešenja, nakon čega se
algoritam završava.
5. Ako je d veće od nule, izračunati x1 i x2
6. Predstaviti rezultate i završiti algoritam.
NAPOMENE:
Ovde smo videli jedan algoritam koji vrlo liči na algoritam izvršavanja računarskog programa
gde smo za određene ulazne podatke određenim transformacijama dobili dve moguće grane
izvršavanja koje rezultuju različitim izlaznim podacima. U zavisnosti od nivoa apstrakcije kojim
smo želeli da predstavimo ovaj problem, umesto jednog bloka sa ulaznim podacima, mogli smo
da koeficijente a, b i c zadamo u 3 zasebna bloka. Takođe, koraci u kojima se izračunavaju x1 i
x2 kao i blok u kojem su oni predstavljeni kao izlazni podaci su mogli da se razdvoje na dva
zasebna bloka.
Uočimo takođe da jednom kada smo izračunali determinantu i označili rezultat sa d, u ostatku
algoritma možemo koristiti oznaku umesto formule za determinantu. Ovo ne samo da olakšava
Primeri algoritama
pisanje formula, već predstavlja jedan od fundamentalnih mehanizama programiranja koji se

naziva promenljive, o čemu će detaljnije biti reči u nastavku teksta.
Pored ovoga, u slučaju da je determinanta jednaka nuli, jednačina će imati samo jedno rešenje.
Ovaj slučaj nije eksplicitno pokriven predloženim algoritmom (što ga ne čini pogrešnim jer ćemo
u tom slučaju dobiti dva ista rešenja). Ukoliko bi hteli da obradimo i ovaj slučaj, uslov d<0 bi
umesto 2 grane (Da i Ne) imao tri: d<0, d=0 i d>0. Ovde možemo da vidimo da blokovi grananja
mogu da imaju više od 2 rezultujuće grane.
Slika 2-6 Blok dijagram postupka rešavanja kvadratne jednačine
Primeri algoritama
2.4. Zadaci za vežbu

1. Napisati algoritam sabiranja dva broja. Ulazni podaci u algoritam su brojevi za sabiranje
(a i b) a i izlaz je zbir ta dva broja ( c )
2. Napisati algoritam koji određuje da li je broj paran ili neparan. Ulazni podatak je broj x,
dok su rezultati algoritma poruke Broj jeste paran ili Broj nije paran.
3. Za zadane dužine stranica nekog trougla A, B, i C napisati algoritam koji proverava da li
je trougao jednakostraničan, jednakokrak ili raznostraničan.
4. Izmeniti primer sa bankomatom tako da bankomat prvo vraća karticu, pa tek onda
isplaćuje traženu sumu.
5. Uslovi za zaposlenje u preduzeću FTN Informatika su da kandidat bude stariji od 25
godina ili da ima radno iskustvo od bar 3 godine. U suprotnom kandidat će biti zaposlen
samo ako ima prosečnu ocenu sa fakulteta veću od 8.5. Na početku se unose starost i
iskustvo, a tek ako zatreba, prosečna ocena. Algoritam treba da rezultuje porukom
"ZAPOSLITI" ili "ODBITI".
6. Dopuniti primer sa bankomatom tako da bankomat odbija posluživanje korisnika ukoliko
je tri puta unesen pogrešan PIN.
Zadaci za vežbu
3. Programiranje u JavaScript-u
Kako bi algoritam za naš program bio validan, kompjuteri moraju da budu u stanju da razumeju i
isprate sve predviđene korake. Ovi koraci koji su namenjeni izvršavanju od strane kompjutera
se stručno nazivaju instrukcije ili naredbe i specifične su za programski jezik koji koristimo.
3.1. Pisanje JavaScript programa

JavaScript kao programski jezik spada u grupu skriptnih jezika i zbog toga se JavaScript
programi pišu kao skup naredbi ugrađenih u HTML stranice. JavaScript programi se često
nazivaju i skrtipte (ili skriptovi) i za njih su određeni posebni <script> HTML elementi. Sa ciljem
što jasnijeg upoznavanja sa osnovnim konceptima programiranja u JavaScript jeziku, u ovom
priručniku ćemo usvojiti sledeća pravila:
1. Svaki JavaScript program se piše u posebnoj HTML datoteci unutar <script> tag-a.
2. <script> element u kojem pišemo programski kod se nalazi uvek na istom mestu u
HTML datoteci, na kraju <head> tag-a.
3. HTML datoteke imaju samo jedan <script> element.
4. JavaScript programi se pokreću otvaranjem HTML datoteke u web browseru. Dovoljno je
samo otvoriti stranicu i izvršavanje će automatski započeti.
U drugom modulu kursa, nakon obrađenih naprednijih tehnika programiranja u JavaScriptu,
videćemo da se ovih pravila ne moramo strogo držati.
3.1.1. Potreban softver

Za programiranje u JavaScriptu potrebna su nam dva programa (većina današnjih računara već
ima neki iz ove dve grupe programa):
1. Tekstualni editor - Služi za pisanje JavaScript programskog koda. Za ove svrhe može
da posluži bilo koji tekstualni editor opšte namene, međutim preporučuje se upotreba
specijalizovanih editora koji imaju funkcije dopunjavanja koda i bojanja ključnih reči.
Preporučeni programi: Visual Studio Code, Sublime Text, Brackets, Notepad++, Atom
2. Web browser - Služi za izvršavanje JavaScript programa.
Preporučeni programi: Google Chrome, Mozilla Firefox, Safari
Za potrebe ovog priručnika, kao i u sklopu kursa, koristiće se Visual Studio Code i Google
Chrome. Preporuka je da se nakon prvog snimanja, HTML stranica sa programom odmah otvori
u web browseru i da u toku daljeg pisanja koda držimo uporedno otvorene i tekstualni editor i
browser. Kada želimo da vidimo novouvedene izmene potrebno je da snimimo datoteku u
tekstualnom editoru i osvežimo stranicu u browseru (klikom na dugme refresh ili tasterom F5).
Pisanje JavaScript programa

3.1.2. Primer JavaScript programa

Kako bi ilustrovali navedene tehnike, kreiraćemo JavaScript program koji ispisuje zadani tekst
na HTML stranici. Trenutno se nećemo zadržavati na analiziranju napisanog HTML i JavaScript
koda već će naglasak biti na pisanju i pokretanju programa.
Pre svega, potrebno je kreirati HTML datoteku sa nazivom prvi.html. Naziv HTML datoteke
nije bitan, dok je .html ekstenzija obavezna. Na slici je prikazana opšta struktura HTML datoteka
koju ćemo koristiti u svim programima iz ovog priručnika. Ova HTML struktura poseduje
rezervisano mesto za pisanje naših JavaScript naredbi, ali trenutno ne sadrži nikakav
JavaScript kod.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript">
// OVDE ĆEMO PISATI NAŠ JAVASCRIPT KOD
</script>
</head>
<body>
</body>
Slika 3-1 Struktura HTML stranice
Naredba koja ispisuje željeni tekst na HTML stranici u JavaScript jeziku glasi:
document.write(), i od nas se očekuje da u zagradama navedemo tekst koji želimo da
ispišemo. Ovu naredbu ćemo koristiti za prikaz rezultata i poruka iz programa, tako da je
možemo smatrati JavaScript implementacijom izlaznog bloka iz dijagrama toka.
S obzirom da je jedina funkcija našeg programa ispisivanje teksta na HTML stranici, on će se
sastojati samo od jedne naredbe. Kompletan sadržaj datoteke prvi.html sa programom je
prikazan na slici.
Ukoliko smo sve dobro uradili, nakon snimanja i otvaranja ove datoteke u Google Chrome-u,
prikazuje nam se bela HTML stranica sa tekstom “Dobar dan!”.

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
document.write("Dobar dan!");
</script>
</head>
<body>
</body>
</html>
Slika 3-2 Jednostavan JavaScript program
NAPOMENE:
U prikazanom JavaScript programu potrebno je uočiti nekoliko bitnih pravila:
1. Sve JavaScript naredbe završavaju sa znakom tačka-zarez (;) iako je velika
verovatnoća da će naš program raditi i ako ovo zaboravimo, pisanje tačka-zareza je
obavezno na kraju naredbi.
2. Tekst se u programiskim jezicima piše pod znakovima navoda. U JavaScriptu je
tekstove moguće pisati i pod jednostrukim i pod dvostrukim navodnicima. Više detalja o
ovome u poglavlju u kojem se obrađuju tekstualni tipovi.
3. Prazne linije se ignorišu prilikom izvršavanja programa i koristićemo ih uglavnom sa
ciljem poboljšanja preglednosti napisanog koda.
4. Takođe, zbog čitljivosti koda, potrebno je obratiti pažnju na uvlačenje linija. Kao što se
vidi u primeru, sve naše naredbe se pišu uvučene za jedan TAB u odnosu na <script>
tab.

3.2. Komentari
Komentari predstavljaju delove programskog koda koji se ne izvršavaju već služe da detaljnije
opišu kod ili za ostavljanje beleški opšte namene. U JavaScript jeziku postoje dva tipa
komentara:
1. Jednolinijski komentari - Počinju znakovima // i završavaju se prelaskom u novi
red. Sledeća linija nije komentar osim ako ne počinje sa navedenim znakovima.
2. Višelinijski komentari - Sav tekst između znakova /* i */ se smatra delom
komentara bez obzira na nove redove.
Primeri komentara:
// Ovo je jednolinijski komentar.
/*
Ovo je primer viselinijskog komentara.
I ova linija je deo istog komentara jer se
nalazi unutar znakova za komentar.
*/
3.3. Promenljive
Prilikom pisanja programa, vrlo često imamo potrebu da spremimo određene vrednosti koje
koristimo kako bi mogli da ih ponovo upotrebimo kada su nam potrebne. Ako pogledamo primer
algoritma za rešavanje kvadratne jednačine, koeficijente jednačine, kao i determinantu smo
označili odgovarajućim slovima i kao takve ih koristili u našem algoritmu. Ove imenovane
vrednosti se u programiranju zovu promenljive i predstavljaju jedan od fundamentalnih
koncepata programiranja.
Dakle, promenljive nam omogućavaju da vrednostima koje koristimo u našem programu
dodelimo imena i pod tim imenima ih koristimo u daljem kodu. Promenljive se u JavaScript
programu definišu navođenjem ključne reči var, nakon čega sledi ime promenljive i dodela
vrednosti. Na primer, ukoliko želimo da kreiramo promenljivu a i dodelimo joj vrednost 5,
pisaćemo sledeći kod:
var a = 5;
Dalje, kada god nam je potrebna promenljiva a, dovoljno je da pišemo samo njeno ime, bez
navođenja bilo kakvih ključnih reči. Ukoliko unapred ne znamo vrednost promenljive, moguće je
da je kreiramo bez dodele vrednosti, a kasnije po potrebi je dodelimo (na isti način možemo da
promenimo inicijalno dodeljenu vrednost).
var a;
a = 5;
Komentari
Postupak kreiranja promenljive se naziva definisanje dok se dodela vrednosti zove

instanciranje ili inicijalizovanje (ove izraze ćemo koristiti u daljem tekstu). Bitno je primetiti da
se akcije definisanja i inicijalizovanja promenljivih vrše JavaScript naredbama, tako da je pisanje
tačka-zareza na kraju obavezno. Takođe, prilikom davanja imena promenljivama, moramo se
pridržavati sledećih pravila:
1. Ne smemo imati dve promenljive koje se isto zovu u sklopu istog programa.
2. Imena promenljivih moraju počinjati slovom, znakom za dolar ($) ili donjom crtom (_).
Imena promenljivih ne smeju da počinju brojevima.
3. Upotreba znakova koji nisu slova, brojevi, $ ili _ je zabranjena u imenima
promenljivih.
4. JavaScript poseduje skup rezervisanih reči, ove reči ne smemo da koristimo za
imenovanje promenljivih.
5. Razmaci takođe nisu dozvoljeni u imenima promenljivih. Nepisano pravilo u
JavaScriptu je da se reči spajaju, pri čemu svaka sledeća reč počinje velikim slovom
(npr. var determinantaJednacine). Ovaj način pisanja se u programiranju naziva
camel case. Reči u imenima promenljivih je moguće razdvajati i znakom _ (var
determinanta_jednacine) iako je ovo praksa uobičajenija u drugim programskim
jezicima (npr. Python).
Kao ilustraciju navedenih tehnika, napisaćemo program koji vrši sabiranje 2 broja. U programu
ćemo definisati brojeve za sabiranje u promenljivama a i b i nakon toga ćemo definisati
promenljivu c čija će vrednost biti zbir a i b (dakle, vrednost promenljivih ne mora uvek da bude
konkretna veličina, već može biti izvedena iz drugih promenljivih). Program se završava tako što
ispisuje rezultat sabiranja na HTML stranicu. Na slici je prikazan programski kod koji realizuje
navedeni algoritam.
Promenljive
<!DOCTYPE html>
<html>
<head>
<title>Javascript promenljive</title>
var a = 5;
var b = 3;
var c = a + b;
document.write("Rezultat sabiranja je:");
document.write(c);
</script>
</head>
<body>
</body>
</html> Slika 3-3 Program za sabiranje 2 broja
3.3.1. Ključna reč let

Ključna reč let je relativno novi načina za definisanje promenljivih u JavaScript jeziku, uveden
sa ES6 standardom. Uvedena je kao alternativa za ključnu reč var, i često se koristi pri pisanju
programa sa TypeScript-om (poglavlje 4.). Neke prednosti ključne reči let u odnosu na ključnu
reč var su:
● Ključna reč let ima blokovski opseg (block-scoped)
● Ne dozvoljava korišćnje promenljivih pre njihovog definisanja, tj. ne dozvoljava tzv.
hoisting
● Ne dozvoljava ponovno definisanje promenljivih
○ Ukoliko napravimo dve promenljive sa istim imenom JavaScript će nam prijaviti
grešku da smo ponovo definisali istu promenljivu
3.4. Osnovni tipovi podataka

U JavaScript jeziku vrednost promenljive određuje kojeg je ona tipa, tako za promenljive u
prethodnom primeru možemo reći da su celobrojnog tipa jer sadržavaju vrednosti koje su celi
brojevi. Vrlo je bitno da znamo kojeg tipa je promenljiva, jer tipovi definišu šta možemo da
Osnovni tipovi podataka
radimo sa njima. Na primer, celobrojne promenljive podležu pravilima celobrojne aritmetike i

nad njima možemo da primenjujemo sve matematičke funkcije na koje smo navikli, dok na
promenljive koje sadrže tekst to ne možemo. U ovom poglavlju biće obrađena tri osnovna tipa
podataka sa kojim ćemo se sretati prilikom učenja programiranja u JavaScript-u.
3.4.1. Numerički tipovi

Numerički (brojevni) tipovi u JavaScript jeziku služe za predstavljanje brojeva i dele se na:
1. Cele brojeve (integer) i
2. Decimalne brojeve (double ili float)
Za promenljive numeričkog tipa važe pravila celobrojne i aritmetike decimalnih brojeva (detaljan
prikaz JavaScript operatora će biti dat u posebnom poglavlju). Moguća je međusobna
kombinacija ova dva numerička podtipa, pri čemu je prilikom kombinovanja rezultat uvek
decimalni broj. U nastavku je dat primer definisanja i rukovanja numeričkim promenljivama.
var a = 3;
var b = 6.4;
var broj = 2;
var broj2 = a + b;
var rezultat = broj2 + 2 - a;
3.4.2. Tekstualni tip

Tekstualni tip, u programiranju nazvan string, služi za predstavljanje teksta. Manipulacija
tekstom je vrlo čest zadatak u programima, tako da će rukovanje ovim tipom biti detaljno
predstavljeno u posebnom poglavlju. Prilikom inicijalizacije promenljive tipa string njena
vrednost se piše pod znakovima navoda. U JavaScript-u je za tekstualni tip moguće koristiti i
jednostruke i dvostruke navodnike, međutim usvojićemo pravilo da se stringovi navode
dvostrukim navodnicima. Takođe, bitno je napomenuti da se, iako se pod navodnicima mogu
nalaziti i samo brojevi (ili bilo koje druge vrednosti koje nisu tekst), u programiranju se sve što
se nalazi pod znakovima navoda smatra stringom.
Primeri definisanja tekstualnih promenljivih:
var string1 = "Dobar dan";

var string1 = "324324!";
var a = "Godina 2017.";
3.4.3. Logički tip

Promenljive logičkog tipa (stručno boolean ili bool) su specifične po tome što njima ne
možemo da dodelimo proizvoljnu vrednost već smo ograničeni na samo dve mogućnosti a to su
Osnovni tipovi podataka

vrednosti true ili false. Ovo je posledica činjenice da su boolean tipovi uvedeni za
predstavljanje rezultata logičnih uslova koji mogu biti tačni ili netačni i ništa drugo (setimo se
uslova d<0 iz primera sa kvadratnom jednačinom, njegov rezultat je ili DA ili NE). Na logičke
tipove primenjujemo logičke operatore i pravila tzv. Bulove algebre o čemu će detaljnije biti reči
u sledećem poglavlju.
Primeri definisanja logičkih promenljivih:
var a = true;
var b = false;
3.4.4. null
Poseban tip za promenljive koje nemaju vrednost je tzv. nepostojeći tip ili null. Ovde je vrlo
važno naglasiti da, iako sličnost u imenu postoji, null promenljive nemaju vrednost 0, niti bilo
koju drugu vrednost. One prosto pokazuju na praznu memorijsku lokaciju i rukovanje null
vrednostima u kodu dovodi do greške u programu. Pokušaj manipulacije nepostojećim
vrednostima predstavlja jednu od najčešćih početničkih grešaka u programiranju (a i grešaka
uopšte), tako da je jako bitno od početka obraćati pažnju na izbegavanje nepostojećih vrednosti
(tako što ćemo inicijalizažovati promenljive kad god je to moguće i sl.).
var a; //Ova promenljiva je tipa null

var b = a + 2; //Ova linija će izazvati grešku
3.5. Operatori
Operatori predstavljaju način kojim vršimo akcije nad varijablama (promenljivim) i vrednostima.
U prethodnim primerima videli smo upotrebu operatora + koji predstavlja sabiranje i pripada
aritmetičkim operatorima. Najvažnije grupe operatora koje ćemo opisati su operatori dodele,
aritmetički, relacioni i logički operatori.
3.5.1. Aritmetički operatori i operatori dodele

Aritmetički operatori u JavaScriptu su: +, -, *, /, %, ++, --. Aritmetičke operatore kombinujemo sa
operatorima dodele. Osnovni operator dodele je =.
var a = 3 + 5;
Prvo smo izračunali vrednost sa desne strane operatora = i onda smo rezultat stavili u
promenljivu koju smo naveli sa leve strane operatora. Razmotrimo još jedan slučaj:
var a = 5;
var b = a + 2;
Operatori
U ovom primeru prvo je dodeljena vrednost 5 promenljivoj a. Onda u sledećoj liniji je uzeta
vrednost varijable a (koja je još uvek 5), na nju je dodata vrednost 2 i na kraju je rezultat
sačuvan u promenljivu b.
Pored osnovnog operatora dodele =, postoje i: +=, -=, *=, /=, %=. Ovi operatori predstavljaju
skraćeni način zapisa kombinacije osnovnih aritmetičkih operatora i operatora dodele. Dakle,
ako je dat sledeći izraz:
var a = 5;
a = a + 3;
On bi se mogao zapisati i na sledeći način:
var a = 5;
a += 3;
Što dalje implicira da je a = a + 3, isto kao i a += 3.
U narednim tabelama su dati primeri aritmetičkih operatora i operatora dodele. Pretpostavimo
da je:
var y = 10;
Operator Rezultat
x=y+3 x = 13
x=y-2 x=8
x=y%3 x=1
x = ++y x = 11, y = 11
x = y++ x = 10, y = 11
x = --y x=9
Operatori
Pretpostavimo da je:
var x = 10;
var y = 5;
Operator Isto kao Rezultat
x=y x=5
x += y x=x+y x = 15
x -= y x=x-y x=5
x *= y x=x*y x = 50
x /= y x=x/y x=2
x %= y x=x%y x=0
Napomena: Jako je važno obratiti pažnju na prvi red u tabeli gde se koristi x = y. Ovaj izraz
predstavlja dodelu vrednosti iz promenljive y u promenljivu x. Ne predstavlja poređenje.
3.5.2. Relacioni operatori

Relacioni operatori nam služe da odredimo jednakost, odnosno nejednakost. Relacioni operatori
su: ==, ===, !=, <, <=, >, >=. Rezultat izvršavanja ovih operatora je uvek boolean vrednost true
ili false. U JavaScriptu pored osnovnog operatora provere jednakosti == koji provera jednakost
samo po vrednosti, postoji i operator ===. Ovaj operator pored provere jednakosti vrši proveru i
po tipu.
Primer primene operatora ==
var x = 3;
var y = 5;
var rezultat = x == y;
U ovom primeru prvo smo preuzeli vrednost koju vraća operator ==, koja je u ovom slučaju
false i nakon toga tu vrednost upisali u promenljivu rezultat.
Primer primene operatora ===
Operatori
var x = 5;
var y = "5";
var rezultat = x == y;
U ovom primeru operator == vraća vrednost true, pošto promenljive x i y imaju iste vrednosti.
Međutim promenljiva y nije istog tipa kao i promenljiva x. Tu se može iskoristiti operator ===.
var x = 5;
var y = "5";
var rezultat = x === y;

U ovom slučaju operator === vraća vrednost false. Zato što, iako promenljive x i y imaju iste
vrednosti, one su različitih tipova (x je broj, dok je y string odnosno tekst). U tabeli ispod su dati
primeri svih pomenutih operatora i rezultati njihovog izvršavanja. Pretpostavimo da je:
var x = 10;
Operator Rezultat
== x == 5 je netačno (false)
=== x === 10 je tačno (true)

x === “10” je netačno (false)
!= x != 5 je tačno (true)
> x > 12 je netačno (false)
< x < 12 je tačno (true)
>= x >= 12 je netačno (false)
<= x <= 12 je tačno (true)
3.5.3. Logički operatori

Logički operatori se tipično koriste sa boolean logičkim vrednostima i kad se tako koriste oni
takođe vraćaju boolean vrednost. To su operatori && (AND), || (OR), ! (NOT). Operandi logičkih
operatora su logički izrazi. Da bi se logički operatori && i || primenili potrebne su im vrednosti sa
leve i sa desne strane, dok operator ! negira vrednost ispred koje je napisan. U tabeli su dati
rezultati logičkog operatora &&.
Operatori
&& false true
false false false
true false true
Kao što vidimo, operator && kao rezultat vraća true, samo kad su vrednosti sa njegove leve i
desne strane true. Tabela ispod sadrži rezultate logičkog operatora || (OR).
|| false true
false false true
true true true
Dakle, za logički operator || (OR) bitno je da je vrednost sa njegove leve ili sa desne strane true,
da bi kao rezultat vratio true. Tabela ispod sadrži rezultate operatora ! (NOT).
false true
true false
Kao što vidimo, operator ! (NOT) negira vrednosti, gde od vrednosti false primenom operatora
dobijamo vrednost true i gde od vrednosti true primenim operatora dobijamo vrednost false.
Tabela ispod prikazuje primer upotrebe ovih operatora. Pretpostavimo da je:
var x = 6;
var y = 3;
Operator Objašnjenje Primer
&& konjukcija (AND) x < 10 && y > 1

tačno (true)
|| disjunkcija (OR) x == 5 || y == 5
netačno (false)
! negaija (NOT) !(x==y)

tačno (true)
Operatori
3.6. Kontrola toka i petlje

Naredbe za kontrolu toka u JavaScriptu se koriste za izražavanje odluka i one određuju
redosled po kome se obavlja izvršavanje programa. Osnovna naredba za izražavanje odluka je
if-else naredba. Pored if-else u ovom poglavlju detaljno su obrađene i else-if, switch naredbe,
while, do while i for petlje, break i continue naredbe.
3.6.1. if-else
Formalno napisana, if-else naredba izgleda:
if (izraz)
naredba_1
else
naredba_2
U ovoj naredbi else deo nije obavezan da se napiše. Prvo se izračunava izraz, ako je tačan,
odnosno ako ima vrednost true, izvršava se naredba_1. Ako je izraz netačan (ima vrednost
false) i ako postoji else deo, izvršava se naredba_2. Ovaj tip naredbe možemo ilustrovati
sledećim primerom:
var vreme = 9;
if (vreme < 10)
console.log("Dobro jutro!");
else
console.log("Dobar dan!");
U primeru je deklarisana promenljiva vreme sa pridruženom vrednosti 9. U if delu naredbe
proverili smo da li je izraz vreme < 9 tačan. Pošto je to tačno, odnosno true, izvršeno je
ispisivanje poruke “Dobro jutro”. Treba obratiti pažnju na pomenuto, a to je da else deo nije
obavezan. Ukoliko je to potrebno primer možemo modifikovati tako da ima samo if deo i samo
da ispisuje “Dobro jutro”, ukoliko je vreme < 10. U tom slučaju primer izgleda:
var vreme = 9;
if (vreme < 10)
Svaka naredba može biti predstavljena algoritmima dijagrama toka. Na njima se jasno vidi put
koji je odabran u zavisnosti od uslova u if-else naredbi. Na slici 3.1. kojom je opisan prethodni
primer, uočava se da je odabrana desna grana za nastavak izvršavanja programa zbog toga što
je rezultat izraza vreme < 10 tačan, odnosno true.
Kontrola toka i petlje

Slika 3-4 Primer izvršavanja if-else naredbe
Ukoliko hoćemo da proširimo if-else naredbu, tako više naredbi bude izvršeno ukoliko je izraz
tačan koristimo vitičaste zagrade { i }. Vitičaste zagrade se koriste za grupisanje naredbi i
deklaracija u jednu celinu, odnosno blok. Prethodni primer modifikovan tako da koristi { i }.
var vreme = 9;
if (vreme < 10) {
console.log("Poranili ste!");
} else {
console.log("Dobar dan!");
console.log("Poslovi su uveliko u toku!");
}
Ovaj prošireni primer koristi dve naredbe u okviru jednog bloka. Sve od otvaranja bloka sa { pa
do njegovog zatvaranja sa } , smatra se delom jedne celine.

3.6.2. else-if
Formalno napisana, else-if naredba izgleda:
if (izraz_1)
naredba_1
else if (izraz_2)
naredba_2
else if (izraz_3)
naredba_3
else
naredba_4
Ovu naredbu možemo posmatrati kao if-else naredbu, sa dodatnim else-if naredbama. Ova
naredba u suštini predstavlja niz naredbi koji je najopštiji način za pisanje odluka sa više grana.
Izrazi u naredbama se izvršavaju po redosledu, tako da ako je neki izraz tačan, izvršava se
njegova pridružena naredba. Npr. ako je tačan izraz_2 izvršiće se naredba_2. Nakon što se
jedna naredba izvrši uslovi se više ne proveravaju, odnosno grane su međusobno isključive.
Kao i u prethodnom primeru možemo proširiti naredbe blokovima, odnosno sa { i }. Poslednji
deo else se odnosi na podrazumevani slučaj ukoliko nijedan od prethodnih uslova nije ispunjen.
Kao i kod if-else naredbe, else deo nije obavezan da se napiše.
3.6.3. switch
Naredba switch predstavlja odluku sa više grana, koja provera da li je neki izraz jednak jednoj
od više ponuđenih vrednosti i na osnovu toga bira tok daljeg izvršenja. Formalno napisana
switch naredba izgleda:
switch (izraz) {
case vrednost_1: naredbe_1
case vrednost_2: naredbe_2
default: naredbe
}
Svaki slučaj određen je konstantnom vrednosti. Ako neki slučaj odgovara vrednosti izraza,
izvršavanje počinje od tog slučaja. Svi slučajevi u switchu moraju biti različiti. Ukoliko nijedan od
drugih slučajeva nije zadovoljen, izvršava se slučaj default.
U svakom slučaju se može nalaziti naredba break i ona izaziva izlaz iz naredbe switch. Ukoliko
u slučaju nije napisana naredba break, izvršavanje se nastavlja na sledećem slučaju. Što znači
da naredba break služi kao eksplicitna akcija za izlaz iz naredbe switch.

Dat je primer switch naredbe:
var ocena = 3;
switch (ocena) {
case 1:
console.log("Nedovoljan");
break;
case 2:
console.log("Dovoljan");
break;
case 3:
console.log("Dobar");
break;
case 4:
console.log("Vrlo dobar");
break;
case 5:
console.log("Odličan");
break;
default:
console.log("Ocena je van opsega!");
}
U primeru je data promenljiva ocena kojoj je pridružena vrednost 3. Switch naredba treba da na
osnovu ocene, ispiše odgovarajuću poruku. Pošto je ocena 3, izvršava se case 3 i ispisuje se
“Dobar”. Pošto naredba sadrži i break, to znači da se neposredno nakon ispisa poruke izlazi iz
naredbe switch.
3.6.4. while
While predstavlja petlju, odnosno cikličnu strukturu kod koje se zna samo uslov za prekid. Telo
ciklusa ne mora da se izvrši ni jednom. Opšta sintaksa je:
while (uslov)
telo
Prvo se proverava uslov, ukoliko je on true, izvršava se telo petlje i zatim se ponovo proverava
uslov. Izlaz iz petlje je kada uslov postane false, onda se izvršavanje nastavlja posle tela petlje.
Dat je primer while petlje:

var i = 0;
while (i < 5) {
console.log("Vrednost je: " + i);
i++;
}
U nastavku je dat primer izvršavanja:
Vrednost je: 0
Vrednost je: 1
Vrednost je: 2
Vrednost je: 3
Vrednost je: 4
U ovom primeru promenljivoj i dodeljena je vrednost 0. Nakon toga, proveren je uslov u while
petlji. Pošto je on tačan, odnosno i < 5 je true, ulazi se u telo petlje. U telu petlje je izvršen
jednostavan ispis trenutne vrednosti promenljive i njena vrednost je uvećana za 1. Promena
vrednosti promenljive koja se nalazi u uslovu je jako bitan, jer da vrednost promenljive nije
povećana u sledećem ciklusu petlje ona bi i dalje bila 0. Time bismo dobili takozvanu
beskonačnu petlju, u kojoj bi se program “zaglavio” i koja bi se izvršavala sve dok ne dođe do
nasilnog prekida programa.
3.6.5. for
For predstavlja naredbu za organizaciju petlji, kod kojih se unapred zna koliko će se puta izvršiti
telo ciklusa. For petlja se zadaje sa početnom vrednošću, uslovom za kraj i blokom za korekciju.
Zbog toga for petlje se često koriste kolekcijama podataka (npr. niz) za koje se tačno zna koliko
ima elemenata, dok se while koristi npr. za čitanje sadržaja tekstualnih fajlova liniju po liniju dok
se ne pročita čitav sadržaj. Opšta sintaksa je:
for (inicijalizacija; uslov; korekcija)
telo
Dat je primer for petlje:
for (var i = 0; i < 5; i++){

}
U primeru primećujemo da je u delu za inicijalizaciju definisana promenljiva i sa dodeljenom
vrednošću koja je 0. Dakle prilikom inicijalizacije for petlje može se definisati promenljiva, koju
koristimo kao brojac, odnosno indikator o trenutnom ciklusu for petlje. Uslov je i < 5 i petlja se
izvršava sve dok god je uslov true. Na kraju je korekcija, koja se izvršava nakon jednog ciklusa
for petlje, odnosno na kraju svakog ciklusa vrednost promenljive i se uvećava za 1. Bitno je
naglasiti da se u prvom ciklusu vrši inicijalizacija i provera uslova, dok se u svim ostalim vrše
korekcija i provera uslova respektivno.
3.6.6. Naredbe break i continue

Često je potrebno da možemo izaći iz petlje prilikom provere uslova u samom telu petlje.
Naredba break omogućuje prevremen izlaz iz petlje for i while, kao i iz naredbe switch. Naredba
continue je povezana sa naredbom break i naredba continue izaziva početak naredne iteracije
obuhvatajuće for ili while petlje. Dat je primer naredbi break i continue:
for (var i = 1; i <= 5; i++){

if (i == 3) {
break;
}
}
U ovom primeru, for petlja se izvršava dva puta, u konzolu se ispisuje:
Vrednost je: 1
Vrednost je: 2
Dok prilikom treće iteracije for petlje, kad promenljiva i dobije vrednost 3, izvršava se if i u njemu
naredba break, koja izaziva izlaz iz for petlje.
Sličan primer dat je za naredbu continue:
for (var i = 1; i <= 5; i++){

if (i == 3) {
break;
}
}
U ovom primeru, for petlja se izvršava svih pet puta i u konzolu se ispisuje:
Vrednost je: 1
Vrednost je: 2
Vrednost je: 4
Vrednost je: 5

Prilikom treće iteracije, kad promenljiva i dobije vrednost 3, izvršava se if i u njemu naredba
continue, koja izaziva početak naredne iteracije for petlje. Za više informacija pogledajte You
Don’t Know JS (https://github.com/getify/You-Dont-Know-JS), Up & Going, Chapter 2: Into
JavaScript.
3.6.7. Nizovi
U JavaScriptu niz predstavlja kolekciju koja sadrži elemente bilo kog tipa. Vrednosti u nizu
nemaju nikakav poseban naziv, nego im se pristupa na osnovu indeksa. Niz definišemo putem
uglastih zagrada, [ i ]. Dakle prazan niz definišemo na sledeći način.
var niz = [];

Na ovaj način definisali smo promenljivu niz, koja nema elemenata, odnosno prazna je. Niz je
moguće kreirati i sa predefinisanim vrednostima.
var niz = ["saab", "audi", "bmw"];

Pristup elementima niza se radi preko indeksa (0, 1, 2, 3, itd..). U JavaScriptu indeksiranje
kreće od 0, tako da se saab nalazi na indeksu 0, audi na indeksu 1 i bmw na indeksu 2.
Pristupanje i preuzimanje elemenata niza se radi na sledeći način.
var auto = niz[0];

Dakle, na ovaj način smo izvršili sledeću operaciju, pristupi promenljivoj niz sa indeksom 0,
odnosno niz[0] i vrednost koja se tu nalazi prepiši u promenljivu auto. Tako da nakon izvršenja
ove operacije, promenljivoj auto pridružena je vrednost saab. Bitno je napomenuti da se prilikom
preuzimanja vrednosti iz niza pravi kopija originalne vrednosti i da se ona upisuje u navedenu
promenljivu. Odnosno ukoliko mi izmenimo vrednost promenljive auto, originalna vrednost u
nizu ostaje nepromenjena!
Ukoliko je potrebno promeniti originalnu vrednost u nizu, to se takođe, radi preko indeksa.
Recimo da je potrebno izmeniti vrednost na indeksu 1, odnosno audi.
niz[1] = "mercedes";
Na ovaj način pristupljeno je nizu na indeksu 1 i upisana je nova vrednost. Tako da sada niz
izgleda [“saab”, “mercedes”, “bmw”].
Napomena: Da bi pristupili bilo kom nizu, potrebno je prvo navesti ime promenljive i onda
neposredno nakon toga uglaste zagrade koje sadrže odgovarajući indeks. U dosadašnjim
primerima to je niz[indeks].
Na početku je pomenuto da su nizovi objekti, odnosno specijalni tipovi objekata u javascriptu.
To otvara mogućnost da nizovi imaju atribute i metode. Odnosno obeležja i funkcije koje
pomažu pri samom radu sa nizovima. Funkcije su detaljno opisane u sledećem poglavlju, za
potrebe ovog poglavlja pokazaćemo kako se koriste one bitne za nizove.

Svaki niz poseduje atribut length. Length je atribut koji sadrži vrednost o tome koliko elemenata
ima taj niz. Atribut se navodi na sledeći način:

var duzinaNiza = niz.length;
Dakle nakon promenljive niz, stavljamo .length. U ovom primeru promenljiva duzinaNiza dobija
vrednost 3. Atribut length je koristan ukoliko je potrebno da se izvrši iteracija kroz čitav niz i da
se vrše potrebne operacije sa njegovim elementima.
Primer: Proći kroz niz automobila i ispiši nazive svakog od njih.

for (var i = 0; i < niz.length; i++) {
var auto = niz[i];
console.log(auto);
}
Niz ima 3 elementa, zbog toga će uslov u for petlji biti i < 3. Rečeno je da indeksiranje ide od 0,
što implicira da se u prvoj iteraciji for petlje izvršava naredba: var auto = niz[0], pošto smo
objasnili da indeksiranje ide od 0 i način na koji se preuzimaju vrednosti iz niza, dolazimo do
zaključka da auto sadrži vrednost saab. For petlja se izvršava još dva puta, za indekse 1 i 2,
odnosno promenljiva auto imaće vrednosti audi i bmw.
Dodavanje elemenata u niz se radi pomoću metode push(). Pozivanje je slično kao kod metode
console.log(), međutim metoda push() se poziva za nizove. Dodavanje se radi na sledeći način.
var telefoni = ["apple", "samsung", "huawei"];

telefoni.push("xiaomi");
Inicijalno je dat niz telefoni, koji ima tri elementa. Nakon naredbe telefoni.push(“xiaomi”), na
poslednje mesto u nizu telefoni se dodaje nova vrednost i to xiaomi. Nakon te naredbe niz ima 4
elementa. Ukoliko bi nakon te naredbe izvršili ispis elemenata niza:
for (var i = 0; i < telefoni.length; i++) {

var telefon = telefoni[i];
console.log(telefon);
}
Rezultat izvršavanja koji je ispisan u konzoli nakon dodavanja elementa prikazan je na sledeći
način:
apple
samsung
huawei
xiaomi
Često je potrebno ukloniti, odnosno izbrisati element iz niza. Ukoliko je potrebno obrisati
poslednji element u nizu, moguće je iskoristiti funkciju pop().

telefoni.pop();
Na ovaj način iz niza je obrisan huawei. Napomena: Funkcija pop, vraća vrednost elementa
koga obriše, tako da je moguće preuzeti obrisani element. var obrisani = telefoni.pop(), za ovaj
primer promenljiva obrisani sadrži vrednost huawei.
Naravno, moguće je obrisati i elemente iz niza na određenim indeksima. Za to je zadužena
funkcija splice(), međutim ova funkcija je specifična po tome što zahteva da se navedu dve
vrednosti, odnosno indeks elementa koji se briše i broj elemenata koje treba obrisati, ukoliko
postoji potreba da se obriše više elemenata odjednom.

telefoni.splice(1, 1);
Na ovaj način smo na indeksu 1, obrisali 1 element. Odnosno samsung je izbrisan iz niza.
Ukoliko je potrebno obrisati samsung i huawei, funkcija splice izgleda:
telefoni.splice(1, 2);
3.6.8. Dvodimenzionalni nizovi

U praksi često se javlja potreba za korišćenjem dvodimenzionalnih nizova. Tu su nizovi čiji su
elementi nizovi, jedan najpoznatiji primer te strukture je matrica. Definicija jedna matrice data je
na sledeći način:
var matrica = [[1,2,3], [4,5,6], [7,8,9]];

Zadata matrica ima ukupno 9 elemenata, odnosno matrica 3x3 (tri reda i tri kolone). Ovaj primer
možemo razložiti na delove radi lakšeg razumevanja. Promenljivu matrica posmatramo kao niz
od tri elementa, jer to ona u suštini i jeste. Prvi element niza matrica je [1, 2, 3], drugi je [4, 5, 6]
i treći [7, 8, 9]. Tako da ukoliko hocemo da pristupimo prvom elementu iz niza matrica, kao i do
sada pristupa mu se na osnovu indeksa.
var element = matrica[0];

Dakle, postupak i dalje ostaje identičan, promenljiva element sada sadrži vrednost iz niza
matrica koji se nalazi na indeksu 0. Ta vrednost je [1, 2, 3]. Dakle promenljiva element je niz koji
ima vrednosti [1, 2, 3]. Na identičan način možemo pristupiti i ostalim elementima, za naredbu:

Promenljiva element je niz sa vrednostima [7, 8, 9]. Dalje, ukoliko je potrebno da iz niza element
preuzmemo vrednost 8, potrebno je napisati:

var broj = element[1];

Nakon izvršene naredbe, promenljiva broj sadrži vrednost 8. Ilustracija pomenutog može se
primeniti kroz primer.
Primer 1: Iz zadate matrice izdvojite brojeve 2, 4, 9.
var matrica = [[1,2,3], [4,5,6], [7,8,9]];

console.log("Rezultat je " + broj);
//Ispis: Rezultat je 2


Pored ovog načina, postoji još jedan način za pristup elementima u dvodimenzionalnim
nizovima koji se koristi češće. Pristup, koji pomenut u prethodnim primerima je odličan za
razumevanje dvodimenzionalnih nizova, međutim sa dosta manje koda moguće je postići istu
efikasnost. Recimo ukoliko prethodni primer želimo da rešimo efikasnije, to možemo uraditi na
sledeći način:
var matrica = [[1,2,3], [4,5,6], [7,8,9]];

var broj = matrica[0][1];
Ovaj primer koristi dva indeksa, gde je promenljiva matrica indeksirana dva puta. Prvi indeks
služi za odabir elementa u promenljivoj matrica, dok drugi indeks služi za odabir broja u
prethodno odabranom elementu. Rezultat ovog primera je broj 2, u nastavku je dat prethodni
primer, urađen sa duplim indeksiranjem.

var matrica = [[1,2,3], [4,5,6], [7,8,9]];



Iz primera primećujemo da se duplim indeksiranjem koristi jedan korak, umesto prethodno
opisana dva koraka.
Prilikom rada sa matricama javlja se potreba da se izvrše neke računske operacije nad
elementima matrice, da bi se to postiglo potrebno je izvršiti prolazak kroz sve elemente matrice i
na osnovu traženog zadatka izvršiti određenu operaciju. Međutim pošto je matrica
dvodimenzionalna struktura (niz koji sadrži više nizova) to je potrebno uraditi sa dve for petlje.
Jedna for petlja treba da vrši iteraciju po redovima matrice i nju ćemo nazvati spoljna for petlja,
dok druga treba da vrši iteraciju po kolonama matrice i nju nazivamo unutrašnja for petlja.
Primer: Za zadatu promenljivu matrica izvršiti ispisivanje svih njenih elemenata.
var matrica = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12]
];
for (var i = 0; i < matrica.length; i++) {

for (var j = 0; j < matrica[i].length; j++) {
console.log(matrica[i][j]);
}
}
Spoljašnja for petlja u prikazanom primeru izvršava inicijalizaciju promenljive i, koja zapravo
predstavlja brojač po redovima. Uslov je i < matrica.length, što znači da će i imati vrednosti 0, 1
i 2. Razlog je taj što matrica ima tri elementa, a to su tri niza sa svojim vrednostima koji
predstavljaju redove. Unutrašnja for petlja izvršava inicijalizaciju promenljive j, koja predstavlja
brojač po kolonama. Uslov je j < matrica[i].length, što znači da će j imati vrednosti 0, 1, 2 i 3.
Razlog je tome što matrica[i], bez obzira koja je vrednost i u tom trenutku ima 4 elementa i to su
0, 1, 2, i 3. Ispisivanje elemenata matrice se vrši na već opisani način, međutim umesto fiksnih
vrednosti koje su do sada navođenje, ispisivanje se radi sa promenljivim vrednostima i, j.
Ispisivanje elemenata matrice se odvija redovima, odnosno spoljašnja for petlja se izvršava
jednom, pa se onda unutrašnja for petlja izvrši još 4 puta. U nastavku dat je primer izvršavanja
for petlje za vrednost i, j.
i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 0, j = 3
Dakle u primeru su opisane vrednosti indeksa i,j za jednu iteraciju spoljašnje for petlje.
Vrednosti za zadate indekse su 1, 2, 3, 4, odnosno matrica[0][0], matrica[0][1], matrica[0][2],
matrica[0][3]. Izvršavanje se nastavlja i za preostala dva reda.
i = 1, j = 0
i = 1, j = 1
i = 1, j = 2
i = 1, j = 3
i = 2, j = 0
i = 2, j = 1
i = 2, j = 2
i = 2, j = 3
Zadatak: Odrediti vrednosti matrice za prikazane indekse.
3.6.9. Zadaci
ZADATAK 3.6.1
Napisati program koji ispisuje poruku u zavisnosti od doba dana. Ukoliko je vreme manje od 10
potrebno je ispisati “Dobro jutro”, ukoliko je vreme manje od 18 ispisati “Dobar dan”, za sve
ostale slučajeve ispisati dobro veče.
ANALIZA:
Za potrebe rešavanja ovog zadatka možemo iskoristiti i proširiti primer koji dat u sekciji 3.6.1.
Kao ulazni podatak neophodno je definisati promenljivu koju ćemo nazvati vreme kojoj će biti
pridružena neka vrednost. Na osnovu te vrednosti su napisani izrazi u if-else naredbi. Na
osnovu datih informacija, možemo skicirati blok dijagram koji je dat na slici.

Slika 3-5 Algoritam za rešavanje zadatka 3.6.1.
Dakle na primeru se vidi, da je prvo zadata vrednost za promenljivu vreme. Nakon toga je
izvršena provera da li je vreme < 10, u slučaju da jeste program bi odabrao prvu True granu i
ispisao bi “Dobro jutro”. Pošto to nije slučaj, ide se False granom za prvu proveru i dolazi se do
druge provere. Ova provera se izvršava tako što se postavlja uslov da li je vreme < 20. Pošto
jeste, odabira se True grana i ispisuje se “Dobar dan”. Bitno je napomenuti da je vreme
inicijalno dobilo neku vrednost koja je veća od 20, program bi odabrao poslednju False granu i
ispisao “Dobro veče”. Sada preostaje da se opisani algoritam implementira u Javascript kodu.
var vreme = 14;

if (vreme < 10) {
console.log("Dobro jutro");
} else if (vreme < 20) {
console.log("Dobar dan");
} else {
console.log("Dobro veče");
}

ZADATAK 3.6.2
Napisati program koji vrši konverziju iz Celzijusa u Farenhajte za svakih 10 stepeni od 0 do 100
stepeni Celzijusa. Formula za konverziju: C * 9/5 + 32 = F
ANALIZA:
Algoritam nam se nameće postavkom zadatka. Uočavamo da je data formula za konverziju, kao
i to da se konverzija izvršava više puta. Pored toga dat je i korak izvršavanja, koji traži da se
konverzija vrši za svakih 10 stepeni. Blok dijagram za ovaj zadatak je prikazan na slici.
Slika 3-6 Algoritam za rešavanje zadatka 3.6.2
Promenljivoj i je pridružena vrednost 0, kao što je traženo u zadatku. Nakon toga je izvršena
provera uslova da li je vrednost promenljive i <= 100, ukoliko je to tačno vršimo konverziju.
Prilikom vršenja konverzije vrednost pridružena promenljivoj i nam ujedno predstavlja i vrednost
temperature u Celzijusima. Nakon konverzije i ispisivanja, vrednost promenljiva i uvećana je za
10, nakon čega se proverava uslov. Ovaj blok dijagram algoritma opisuje cikličnu strukturu, koju
možemo predstaviti for ili while petljom. Dat je primer implementacije za obe petlje.
// Primer for
for (var i = 0; i <= 100; i += 10) {
var f = i * 9 / 5 + 32;
console.log("F je: " + f);
}
// Primer while
//
var Primer
i = 0; while
var
whilei (i
= 0;
<= 100) {
whilevar(if <=
= i100)
* 9 /{ 5 + 32;
var f = i * 9 je:
console.log("F / 5 "+ +32;
f);
iconsole.log("F
+= 10; je: " + f);
} i += 10;
}

ZADATAK 3.6.3
Napisati program koji obračunava zaradu radnika. Radnici koji rade više od 40 sati nedeljno su
plaćeni 1.5 puta više nego sto bi bili plaćeni da rade do 40 sati nedeljno. Broj radnih sati je
evidentiran u nizu po danima, a cena radnog sata iznosi 1000 za svakog radnika.
ANALIZA:
Za rešavanje ovog zadatka potrebno je izračunati koliko je radnik radio u toku radne nedelje i na
osnovu toga odredi ukupnu zaradu radnika. Za računanje ukupnog broja sati rada potrebno je
sa for petljom proći kroz niz koji sadrži broj sati rada po danima i sabrati ih. Nakon toga se
donosi odluka o tome koliko je radnik plaćen, odnosno provereno je da li ima više od 40 sati
rada nedeljno. Ovaj zadatak je predstavljen blok dijagramom na sledeći način:
Slika 3-7 Algoritam za rešavanje zadatka 3.6.3

Blok dijagram sadrži dve promenljive radna_nedelja i radni_sat koje su promenljive i zavise od
osobe za koju se računa plata. Naredne tri promenljive koje su navedene služe za izvršavanje
algoritma i uvek se inicijalizuju na nulu. Prvi uslov služi da izračuna ukupan broj sati koje radnik
radio, a drugi uslov određuje da li je potrebno pomnožiti ukupno zaradu sa 1.5 ili ne. Ostaje još
implementacija u JavaScriptu.
var ime = "Pera";

var radna_nedelja = [8, 9, 7, 8, 9];
var radniSat = 1000;
var ukupnoSati = 0;
var ukupnaZarada = 0;
for (var i = 0; i < radna_nedelja.length; i++) {
ukupnoSati += radna_nedelja[i];
}
if (ukupnoSati > 40) {
ukupnaZarada = ukupnoSati * radniSat * 1.5;
} else {
ukupnaZarada = ukupnoSati * radniSat;
}
console.log(ime + " " + " ima platu od " + ukupnaZarada);
ZADATAK 3.6.4
U dvodimenzionalnom nizu dati su podaci o određenim automobilima. Potrebno je izvršiti
iteraciju kroz zadati niz i ispisati podatke o svakom automobilu.
var automobili = [
["Naziv: Mazda 6", "Kubikaza: 1998", "Godiste: 2015"],
["Naziv: Ford Mondeo", "Kubikaza: 1997", "Godiste: 2011"],
["Naziv: Peugeot 207", "Kubikaza: 1398", "Godiste: 2007"]
];
ANALIZA:
Iz date strukture možemo da uočimo, da svaki red predstavlja informaciju o jednom automobilu.
Na osnovu toga dovoljno je da sa for petljom izvršimo iteraciju kroz niz automobila i da ispišemo
podatke o svakom od njih. Ono što uočavamo je da svaka kolona predstavlja novi podatak.
for (var i = 0; i < automobili.length; i++) {

for (var j = 0; j < automobili[i].length; j++) {
console.log(automobili[i][j]);
}
console.log("------------------");
}

Rezultat:
Naziv: Mazda 6
Kubikaza: 1998
Godiste: 2015
------------------
Naziv: Ford Mondeo
Kubikaza: 1997
Godiste: 2011
------------------
Naziv: Peugeot 207
Kubikaza: 1398
Godiste: 2007
------------------
ZADATAK 3.6.5
Data je matrica m, potrebno je sabrati sve vrednosti matrice i na kraju ispisati rezultat sabiranja.
var m = [
[1, 2, 3, 0],
[4, 0, 5, 6],
[0, 7, 5, 9],
[3, 5, 7, 3]
];
ANALIZA:
Rešenje ovog zadatka je jako slično rešenju ostalih zadataka sa matricama koji su urađeni.
Potrebno je izvršiti iteraciju kroz zadatu matricu sa dve for petlje. Međutim pošto se u zadatku
traži da se sabere rezultat izvršavanja potrebno je definisati još jednu promenljivu rezultat sa
pridruženom vrednošću 0. Ta promenljiva je iskorišćena za skladištenje svih ostalih vrednosti iz
matrice.
var rezultat = 0;
for (i = 0; i < m.length; i++) {
for (j = 0; j < m[i].length; j++) {
rezultat += m[i][j];
}
}
console.log("Rezultat je: " + rezultat);

3.7. Funkcije
Funkcije predstavljaju skupove naredbi koje zajedno obavljaju određeni zadatak, odnosno ideja
je da se podele veliki zadaci u manje celine i da omoguće programerima da iskoriste ono što su
drugi već uradili umesto da kreću od početka. Određene funkcije, takođe skrivaju detalje
implementacije time čineći program jasnijim i jednostavnijim za menjanje. Npr. za funkciju
console.log(), ne znamo detalje njene implementacije, međutim znamo kako da je koristimo i šta
treba da bude rezultat njenog izvršavanja. JavaScript programi se obično sastoje od mnogo
malih funkcija, koje su organizovane u .js fajlovima. Organizovanjem programa u funkcije
sprečava ponavljanje delova istog koda i čini programe čitljivijim i lakšim za održavanje.
Svaka funkcija je jednoznačno određena putem njenog imena, putem kojeg se vrši njeno
pozivanje. Pozivanjem funkcije se izvršavaju sve naredbe definisane u telu funkcije. Opšta
definicija funkcije je prikazana u sledećem primeru:
function imeFunkcije() {
// Telo funkcije
}
Funkcija u JavaScriptu obavezno počinje sa function pa zatim sledi konkretni naziv funkcije
odvojen razmakom od prethodne reči (function). Naziv, odnosno ime funkcije mora biti
jedinstveno unutar važenja funkcije (datoteka ili objekat), mora počinjati slovom i ne sme
sadržati razmake. Telo funkcije počinje i završava se sa vitičastim zagradama { i }. U telu
JavaScript funkcije moguće je definisati dodatne promenljive koje su lokalne za tu funkciju
(njihov “životni vek” je od početka do kraja funkcije), moguće je pozvati neku drugu funkciju, a
takođe je moguće i definisati neku drugu funkciju u telu JavaScript funkcije.
U nastavku je dat primer definicije i pozivanja JavaScript funkcije. Dakle da bi neka funkcija bila
izvršena, potrebno je prvo definisati (opisati šta ta funkcija radi) i nakon toga je pozvati, odnosno
izvršiti.
function pozdrav() {
console.log("Pozdrav iz JavaScripta!");
}
pozdrav();
U prethodnom primeru definisana je funkcija pozdrav, koja ima jednu naredbu a to je ispisivanje
teksta “Pozdrav iz JavaScripta” u konzolu. Funkcija se izvršava tek kada je pozovemo sa
pozdrav().
Funkcije mogu imati proizvoljan broj parametara. Parametri predstavljaju dodatne informacije
koji su potrebni funkciji da obavi svoj zadatak. Parametri se navode između malih zagrada ( i ).
Parametri su lokalne promenljive za tu funkciju, odnosno važe od početka do kraja funkcije i oni
predstavljaju ulazne informacije. Parametri dobijaju vrednosti prilikom pozivanja funkcije, kada
se prosleđuju konkretne vrednosti. Prethodni primer proširen je tako da sada uključuje
parametre.
Funkcije
function pozdrav(ime, prezime) {

console.log("Pozdrav " + ime + " " + prezime);
}
pozdrav("Jovo", "Jovic");
Parametri funkcije pozdrav su ime i prezime, nazivi parametara su proizvoljni. Vrednost

parametra odgovara vrednosti pozicije prilikom njenog pozivanja. Dakle parametar ime ima
vrednost Pero, dok parametar prezime ima vrednost Peric. Dakle izvršenjem funkcije dobija se
ispis Pozdrav Jovo Jovic. Funkciju je moguće pozvati više puta sa različitim parametrima, pri
čemu dobijamo različite ispise. Npr. za poziv funkcije pozdrav(“Marko”, “Markovic”) ispis u tom
slučaju je Pozdrav Marko Markovic, itd.
Funkcije često treba da vrate rezultat svog izvršavanja, taj rezultat nazivamo povratnom
vrednosti funkcije. To je vrednost koju funkcija vraća nakon ključne reci return. U primeru koji
sledi data je funkcija koja izračunava površinu pravougaonika koja ima povratnu vrednost.
function izracunajPovrsinu(sirina, visina) {

var povrsina = sirina * visina;
return povrsina;
}
var rezultat = izracunajPovrsinu(3, 5);
U prethodnom primeru, povratna vrednost funkcije izracunajPovrsinu je promenljiva povrsina.

Međutim da bi mogli da iskoristimo povratnu vrednost neke funkcije moramo prvo da je
preuzmemo. U tu svrhu je iskorišćena promenljiva rezultat. Dakle, da bi preuzeli rezultat
izvršenja neke funkcije, potrebno je dodeliti tu vrednost nekoj promenljivoj, kao što je to
prikazano u primeru, u tom slučaju se vrednost promenljive povrsina iz funkcije upisuje u
promenljivu rezultat. Povratna vrednost može biti neki broj, tekst, niz, objekat, poziv neke druge
funkcije, itd. Bitno je napomenuti da funkcija može, a ne mora imati povratnu vrednost. Za više
informacija pogledajte You Don’t Know JS (https://github.com/getify/You-Dont-Know-JS), Scope
& Closure, Chapter 3: Function vs Block Scope.
ZADATAK 3.7.1
Kazna za brzu vožnju se računa kao 5000 din + 500 din za svaki kilometar preko ograničenja +
10000 din za vožnju preko 120km/h. Napisati funkciju koja prima izmerenu brzinu vozila i
ograničenje brzine. Ako je brzina veća od dozvoljene funkcija vraća poruku sa cenom kazne, a
ako je manja vraća poruku da je sve u redu.
ANALIZA:
Na osnovu postavke zadatka, zaključujemo da je potrebno napisati funkciju koja će odrediti
cenu kazne ukoliko je došlo do prekoračenja brzine. Takođe iz postavke je definisano da ta
funkcija treba da primi dva parametra brzinu vozila i ograničenje brzine. Na osnovu opisanog
možemo krenuti sa implementacijom funkcije odrediKaznu.
Funkcije
function odrediKaznu(brzina, ogranicenje) {

if (brzina <= ogranicenje) {
return "Sve je u redu";
}
var fiksno = 5000;

var dodatno = 0;
var prekoracio = brzina-ogranicenje;
for (var i =0; i < prekoracio; i++) {
dodatno += 500;
}
var ukupno = 0;
if (brzina > 120) {
ukupno += 10000;
}
ukupno += fiksno + dodatno;
return "Vasa kazna iznosi " + ukupno;

}
Funkcija je implementirana sa dva parametra brzina i ogranicenje i na početku funkcije je

urađena provera da li je brzina <= ogranicenje. Ukoliko je provera tačna, onda nema potrebe za
daljim izvršavanjem funkcije i iz funkcije je vraćena vrednost “Sve je u redu”. Ukoliko malo
detaljnije obratimo pažnju na funkciju, vidimo da ona ima još jedan return koji vraća vrednost
kazne. Na osnovu toga zaključujemo da ova funkcija vraća kroz povratnu vrednost rezultat svog
izvršavanja, što je u ovom slučaju uslovljeno postavkom zadatka.
Preostaje još da se testira funkcionalnost, tako što ćemo pozvati funkciju sa raznim
parametrima.
var rezultat = odrediKaznu(68,80);

console.log(rezultat);
Rezultat izvršavanja: Sve je u redu

---------------------------------------------

Rezultat izvršavanja: Vasa kazna iznosi 8500
----------------------------------------------

Rezultat izvršavanja: Vasa kazna iznosi 27500
Funkcije
Provera funkcije je izvršena tako što smo je izvršili sa različitim vrednostima argumenata. U
prvom slučaju, pošto je brzina manja od ograničenja funkcija ispisuje Sve je u redu, prilikom
drugog poziva dat je primer gde je prekoračena brzina, međutim prekoračenje nije preko
120km/h i u trećem slučaju prekoračenje je preko 120 km/h. Kompletan urađen primer dat je na
slici u nastavku.
Slika 3-8 Rešenje zadatka 3.7.1.
ZADATAK 3.7.2
Modifikovati zadatak 3.6.3. tako da koristi funkcije. Potrebno je napraviti funkciju koja kao
parametar prima ime radnika, cenu radnog sata i broj radnih sati u nedelji kao i funkciju koja
sabira broj sati u nedelji.
Originalni tekst zadatka 3.6.3:
Funkcije
Napisati program koji obračunava zaradu radnika. Radnici koji rade više od 40 sati nedeljno su
plaćeni 1.5 puta više nego sto bi bili plaćeni da rade do 40 sati nedeljno. Broj radnih sati je
evidentiran u nizu po danima, a cena radnog sata iznosi 1000 za svakog radnika.
ANALIZA:
U zadatku 3.6.3. lako je uočiti odvojene celine, koje su pogodne za podelu u funkcije. Prva
funkcija koja treba da se izdvoji je ona za računanje ukupnog broja sati nedeljno, dok druga
treba da primi vrednosti navedene u tekstu samog zadatka, kao i da pozove prvu funkciju u cilju
računanja broja sati. Prvu funkciju nazivamo izracunajUkupanBrojSati, a drugu nazivamo
obracunajZaraduRadnika.
function izracunajUkupanBrojSati(param1) {
var ukupnoSati = 0;
for (var i = 0; i < param1.length; i++) {
ukupnoSati += param1[i];
}
return ukupnoSati;
}
JavaScript nema posebnu sintaksu kojom označavamo tip parametra u funkciji, međutim
prilikom pozivanja funkcije znamo tip argumenta koji ćemo proslediti istoj, a to je niz. Dakle
param1 je niz, obratiti pažnju i na to da je naziv promenljive proizvoljan, kao što je ranije i
pomenuto. Pogrešno je shvatanje da naziv parametra, mora biti isti kao i naziv argumenta
prilikom pozivanja funkcije, zbog toga se u ovom primeru koristi drugačiji naziv.
function obracunajZaraduRadnika(ime, radniSat, radnaNedelja) {

var ukupnoSati = izracunajUkupanBrojSati(radnaNedelja);
} else {
}
}
Kao što je traženo u zadatku funkcija obracunajZaraduRadnika ima tri parametra ime, radniSat i
radnaNedelja. Ono što je posebno interesantno je parametar radnaNedelja, koji se već u prvom
redu funkcije obracunajZaraduRadnika, prosleđuje funkciji izracunajUkupanBrojSati. Dakle,
parametar param1 u funkciji izracunajUkupanBrojSati, je zapravo radnaNedelja, jer je upravo on
prosleđen prilikom pozivanja te funkcije. Daljom analizom koda uočavamo da je u promenljivoj
ukupnoSati, smeštena povratna vrednost funkcije izracunajUkupanBrojSati. Ta promenljiva se
dalje koristi da se proveri broj sati i dalja zarada na osnovu toga. Na kraju funkcije ispisan je
rezultat njenog izvršavanja. Jedini deo koji je preostao je primer pozivanja funkcije, koji je dat u
nastavku.
Funkcije
obracunajZaraduRadnika("Pera", 1000, [8, 9, 7, 8, 9]);

Rezultat izvršavanja: Pera ima platu od 61500
Pošto je programski kod podeljen u više funkcija, funkciju obracunajZaraduRadnika možemo
pozvati sa različitim vrednostima, pri čemu dobijamo različite rezultate izvršavanja.
obracunajZaraduRadnika("Jova", 1200, [9, 9, 7, 8, 9]);

Rezultat izvršavanja: Jova ima platu od 75600
obracunajZaraduRadnika("Mika", 800, [8, 9, 7, 8, 9]);

Rezultat izvršavanja: Mika ima platu od 49200
Napomena: Redosled navođenja argumenata, mora odgovarati redosledu navođenja
parametara. Dakle, ukoliko bi “Mika” i 800 zamenili mesta, došlo bi do greške u programu, jer
funkcija očekuje na prvom mestu naziv radnika, a na drugom cenu po satu. Kompletan urađen
primer dat je na slici u nastavku.
Slika 3-9 Rešenja zadatka za obračunavanje zarade 3.7.2.
ZADATAK 3.7.3
Napisati funkciju koja prima dva parametra, prvi parametar treba da bude matrica, dok drugi
treba da ima boolean vrednost true ili false. Funkcija u zavisnosti od drugog parametra vrši
različite operacije. Odnosno ako je drugi parametar true, funkcija treba da odredi zbir elemenata
matrice, a ukoliko je njegova vrednost false treba da odredi ukupan broj nula u matrici.
Funkcije
ANALIZA:
Iz zadatka možemo da odredimo kako naša funkcija treba da izgleda i da treba da radi dve
različite operacije. Na osnovu toga možemo da krenemo sa implementacijom funkcije.
function srediMatricu(m, izraz) {

var rezultat = 0;
if (izraz == true) {
rezultat += m[i][j];
}
}
} else {
if (m[i][j] == 0) {
rezultat++;
}
}
}
}
console.log("Rezultat je " + rezultat);
}
Ponuđeno rešenje ovog zadatka je tačno, međutim primećuje se povećana kompleksnost

funkcije i praćenja toka izvršavanja zadatka, mnogo otvorenih i zatvorenih zagrada, kao i mnogo
ugneždenih petlji. Bez ulaska u detalje o implementaciji ovog zadatka, koji su dati kasnije,
zadatak koji se trenutno nameće je, kako pojednostaviti funkciju? Setimo se priče sa početka
ovog poglavlja u kome se kaže da se veliki zadaci podele u manje celine. U ovom zadatku
uočavamo dve jasne celine, koje možemo podeliti na dva manja zadatka. Prvi zadatak je
funkcija čiji je jedini zadatak da odredi zbir elemenata matrice, a drugi funkcija koja određuje
ukupan broj nula u matrici. Krećemo sa implementacijom funkcije koja određuje zbir elemenata
matrice.
function odrediZbirElemenata(m) {
var zbirElemenata = 0;
for (var i = 0; i < m.length; i++) {
for (var j = 0; j < m[i].length; j++) {
zbirElemenata += m[i][j];
}
}
return zbirElemenata;
}
Funkcija odrediZbirElemenata je napisana tako da ima jedan parametar m, matricu čiji elementi
treba da se saberu. Definisana je promenljiva zbirElemenata koja treba da sadrži zbir svih
Funkcije
elemenata matrice i koja je ujedno i povratna vrednost funkcije. Napisane su dve for petlje koje
prolaze kroz matricu i dodaju vrednost tekućeg elementa m[i][j] na promenljivu zbir elemenata.
Sledeću funkciju nazivamo odrediUkupanBrojNula.
function odrediUkupanBrojNula(m) {
var brNula = 0;
for (var i = 0; i < m.length; i++) {
if (m[i][j] == 0) {
brNula++;
}
}
}
return brNula;
}
Funkcija odrediUkupanBrojNula je takođe napisana da ima jedan parametar m, matricu za koju

treba da se odredi ukupan broj nula. Za zbir svih nula u matrici koristi se promenljiva brNula.
Prilikom prolaska kroz matricu, sa if-om se određuje da li je trenutni element matrice nula,
ukoliko je to tačno promenljiva brNula se uvećava za 1.
Ono što je još preostalo je da se modifikuje funkcija srediMatricu, tako da poziva dve novo
napisane funkcije i da koristi rezultat njihovog izvršavanja.
function srediMatricu(m, izraz) {

var rezultat;
if (izraz == true) {
rezultat = odrediZbirElemenata(m);
} else {
rezultat = odrediUkupanBrojNula(m);
}
console.log("Rezultat je " + rezultat);
}
Funkcija srediMatricu, ostaje sa dva parametra kao na početku, međutim sama funkcija je
pretrpela značajne izmene. Koristi se promenljiva rezultat koja sadrži rezultat izvršavanja neke
od funkcija. Funkcija je zadržala proveru ako je izraz == true, poziva se funkcija
odrediZbirElemenata, u suprotnom pozvana je funkcija odrediUkupanBrojNula. Povratne
vrednosti obe funkcije se upisuju u promenljivu rezultat koji se na kraju funkcije ispisuje. U
nastavku je dat primer pozivanja funkcije, sa matricom matrix i vrednostima true i false.
Funkcije
var matrix = [
[1, 2, 3, 0],
[4, 0, 5, 6],
[0, 7, 5, 9],
[3, 5, 7, 3]
];
srediMatricu(matrix, true);
Rezultat izvrsavanja: Rezultat je 60
srediMatricu(matrix, false);
Rezultat izvrsavanja: Rezultat je 3
Prednosti organizacije zadataka u funkcije su višestruke. Ovde vidimo da smo pojednostavili

funkciju srediMatricu tako što smo izolovali posebne celine i time povećali čitljivost funkcije.
Pored toga ukoliko se javi novi zahtev ili potreba da funkcija više ne računa npr. ukupan broj
nula, nego zbir elemenata na glavnoj dijagonali matrice, jedina izmena koja treba da se uradi je
poziv nove funkcije. Ne samo to, nego i funkcije odrediZbirElemenata i odrediUkupanBrojNula
su nezavisne i kao takve se mogu pozivati nezavisno od drugih funkcija. Kompletan urađen
primer dat je na slici u nastavku.
Zadaci za vežbu:
1. Modifikovati zadatak 3.7.1. tako da ukoliko je brzina veća od 180, program kao rezultat
izvršavanja vrati “Oduzeta Vam je dozvola”.
2. Napisati funkciju čiji je parametar vrednost temperature u celzijusima, funkcija treba kao
povratnu vrednost da vrati temperaturu u farenhajtima.
3. Napisati funkciju koja kao parametar ima niz koji sadrži temperature u celzijusima.
Funkcija treba da prođe kroz niz i da svaku temperaturu pretvori iz celzijusa u farenhajte.
Funkcije
Funkcije
3.8. Objekti
U objektno-orijentisanom programiranju (OOP), objektima su predstavljeni pojave i entiteti iz
sistema koji programiramo. U JavaScriptu, objekti se definišu kao promenljive var, ali za razliku
od promenljivih, objekti sadrže druge promenljive i funkcije. Promenljive sadržane u objektu
nazvaćemo atributima objekta, dok ćemo funkcije sadržane u objektu nazivati metodama
objekta. Za razliku od nizova, objekte definišemo između vitičastih zagrada { i }. Objekat se
sastoji od liste parova atribut-vrednost, razdvojenih dvotačkom, a parovi se međusobno
razdvajaju zarezima.
var obj1 = {};
var obj2 = {
ime: "Pera",
prezime: "Peric"
}
U datim primerima obj1 je prazan objekat, odnosno objekat koji nema atribute, dok je obj2
objekat koji ima dva atributa ime i prezime, sa vrednostima Pera i Peric.
Vrednostima atributa u objektima se pristupa na osnovu njihovih naziva. Dakle, ukoliko hoćemo
da dobijemo vrednost imena, potrebno je navesti obj2.ime, odnosno naziv objekta- tačka-atribut.
U nastavku je dat primer pristupa atributima objekta, preuzimanju njihovih vrednosti i njihovo
ispisivanje u konzolu.
var obj2 = {
ime: "Pera",
prezime: "Peric"
}
var x = obj2.ime;
console.log(x);
Rezultat: Pera
var y = obj2.prezime;
console.log(y);
Rezultat: Peric
Ukoliko je potrebno izmeniti vrednost atributa u objektu, to se radi na sledeći način:
obj2.ime = "Marko";
Vrednost atributa ime, u postojećem objektu promeniće vrednost u Marko. Iz navedenog
izvodimo zaključak da se atributi objekta ponašaju kao promenljive, odnosno u njih možemo
upisivati i čitati vrednosti.
Objekti
Metode, kao i atribute takođe navodimo u objektu. Recimo da je potrebno napraviti metodu da
se osoba, na osnovu njenog imena i prezimena predstavi. To je moguće rešiti na sledeći način:
var obj2 = {
ime: "Pera",
prezime: "Peric",
predstaviSe: function () {
console.log("Ja sam " + this.ime + " " + this.prezime);
}
}
Obj2 je proširen metodom predstaviSe, definicija metode je slična definiciji funkcije, međutim
potrebno je prvo navesti naziv metode-dvotačka-function(), gde je u malim zagradama moguće
navesti parametre. U metodi predstaviSe pojavljuje se nova konstrukcija i to je this. U
javascriptu this može imati različite vrednosti u zavisnosti od konteksta gde se koristi, međutim
u metodama this se odnosni na “vlasnika” metode, odnosno objekat. U našem primeru this
predstavlja objekat obj2. Što dalje implicira da this.ime, je isto kao da smo napisali obj2.ime, čija
je vrednost “Pera”.
Pozivanje metoda se vrši preko njihovog naziva, međutim potrebno je prvo navesti naziv
objekta. Nakon izvršenja u konzolu se ispisuje: “Ja sam Pera Peric”.
obj2.predstaviSe();
Rezultat: Ja sam Pera Peric
Recimo da je potrebno proširiti obj2 dodatnom metodom, omiljeniSport. Metoda ima jedan
parametar koji je naziv sporta i koja treba da u konzolu ispiše Moj omiljeni sport je X, gde je X
vrednost parametra koji je prosleđen.
var obj2 = {
ime: "Pera",
prezime: "Peric",
predstaviSe: function() {
},
omiljeniSport: function(nazivSporta) {
console.log("Moj omiljeni sport je " + nazivSporta);
}
}
U datom primeru, obj2 je proširen dodatnom metodom omiljeniSport. U metodi, kao i u
funkcijama parametar predstavlja promenljivu lokalnu za tu funkciju. U nastavku dat je primer
pozivanja nove funkcije.
obj2.omiljeniSport("Fudbal");
Rezultat: Moj omiljeni sport je Fudbal
Objekti
ZADATAK 3.8.1
Promeniti prethodni primer tako da, se prilikom poziva metode omiljeniSport, pre izvršavanja te
metode, izvrši metoda predstaviSe.
ANALIZA:
Za rešavanje ovog zadatka, potrebno je napraviti modifikaciju već postojećeg objekta, odnosno
u telu metode omiljeniSport, potrebo je prvo pozvati metodu predstaviSe.
var obj2 = {
ime: "Pera",
prezime: "Peric",
},
omiljeniSport: function (nazivSporta) {
this.predstaviSe();
}
}
obj2.omiljeniSport("Fudbal")
Moj omiljeni sport je Fudbal
Obratiti pažnju, da je metoda predstaviSe pozvana sa ključnom reči this. Zašto je potrebno
navesti this, probati primer i videti rezultat izvršavanja bez upotrebe this.
Do sada su dati primeri nizova sa brojevima ili stringovima, međutim nizovi u JavaScriptu mogu
da sadrže i objekte. Objektima u nizu, kao i ostalim vrednostima se pristupa putem indeksa. U
nastavku je dat niz osoba, za koji je potrebno za svaku osobu pozvati metodu predstaviSe.
Objekti
var osobe = [
{
ime: "Pera",
prezime: "Peric",
},
this.predstaviSe();
}
},
{
ime: "Marko",
prezime: "Markovic",
},
this.predstaviSe();
}
}];
for (var i = 0; i < osobe.length; i++) {

var osoba = osobe[i];
osoba.predstaviSe();
}

Ja sam Marko Markovic
U primeru je definisan niz osobe, koji sadrži dva objekta. Da bi pristupili objektima, kao i u
primerima do sada izvršena je iteracija kroz niz. U for petlji promenljiva osoba predstavlja
objekat koji se nalazi na indeksu i čija je vrednost dobijena korišćenjem indeksa nad
promenljivom osobe[i]. Za više informacija pogledajte You Don’t Know JS
(https://github.com/getify/You-Dont-Know-JS), this & Object Prototypes Chapter 3: Objects.
Objekti
ZADATAK 3.8.2
Objekat automobil je zadat na sledeći način:
var automobil = {
model: "6",
proizvodjac: "Mazda",
kubikaza: 1998,
kilovata: 100,
godiste: 2015,
kilometraza: 134000
}
Za zadati objekat, dodati metodu koja računa koliko konjskih snaga ima automobil, dobija se
tako što se broj kilovata pomnoži sa 1.34. Dodati metodu koja povećava broj kilometara na
osnovu vrednosti prosleđenog parametra.
ANALIZA:
Prvo je potrebno dodati metodu za računanje konjskih snaga, koja je nazvana izracunajHP.
var automobil = {
model: "6",
kubikaza: 1998,
kilovata: 100,
godiste: 2015,
kilometraza: 134000,
izracunajHP: function () {
return this.kilovata * 1.34;
}
}
Metoda izracunajHP koristi atribut kilovata, kome se pristupa sa this.kilovata. Kao povratnu
vrednost ima ukupan broj kilovata pomnožen sa konstantnom vrednošću 1.34. Potrebno je
dodati još jednu metodu, koja je nazvana povecajBrKilometara koja ima jedan parametar. Pošto
metoda treba da izmeni atribut objekta na osnovu prosleđene vrednosti, potrebno je pristupiti
postojećem atributu i upisati novu vrednost. To se može uraditi na sledeći način:
Objekti
var automobil = {
model: "6",
kubikaza: 1998,
kilovata: 100,
godiste: 2015,
izracunajHP: function () {
},
povecajBrKilometara: function (vrednost) {
this.kilometraza = this.kilometraza + vrednost;
}
}
Preostaje još da se proveri rezultat izvršavanja, prilikom pozivanja novih metoda.
var rezultat = automobil.izracunajHP();

Rezultat: 134
automobil.povecajBrKilometara(6000);
console.log(automobil.kilometraza);
Rezultat: 140000
Kompletan urađen primer dat je u nastavku:
Objekti
ZADATAK 3.8.3
Niz automobila je zadat na sledeći način:
var automobili = [
{
model: "6",
kubikaza: 1998,
kilovata: 100,
godiste: 2015,
kilometraza: 134000
},
{
model: "Mondeo",
proizvodjac: "Ford",
kubikaza: 1997,
kilovata: 96,
godiste: 2011,
kilometraza: 166000
},
{
model: "207",
proizvodjac: "Peugeot",
kubikaza: 1398,
kilovata: 50,
godiste: 2007,
kilometraza: 190000
}];
U zadatom nizu automobila pronaći sve automobile čije godište je veće od 2010 godine i ispisati
osnovne podatke o njima.
ANALIZA:
Zadati niz automobila ima jasnu strukturu, potrebno je sa for petljom proći kroz dati niz i za svaki
element niza proveriti da li je njegov atribut godiste veći od 2010.
for (var i = 0; i < automobili.length; i++) {

var a = automobili[i];
if (a.godiste > 2010) {
console.log(a.proizvodjac + " " + a.model);
}
}
Rezultat:
Mazda 6
Ford Mondeo
Objekti
Predlog: Pokušati implementirati funkcionalnost iz ovoga zadataka, za zadatak 3.6.4. gde su

dati nizovi umesto objekata.
Kompletan urađen primer dat je u nastavku:
ZADATAK 3.8.4
Modifikovati zadatak 3.7.2. tako da koristi objekte. Objekat treba da sadrži atribute ime,
prezime, niz radnih sati u nedelji. Potrebno je modifikovati funkciju koja kao parametar prima
ime radnika, cenu radnog sata i broj radnih sati u nedelji kao i funkciju koja sabira broj sati u
nedelji tako da mogu da rukuju sa objektima.
ANALIZA:
Ovaj zadatak predstavlja nadogradnju na zadatak 3.7.2. tako da se sada koriste objekti, koji
sadrže sve informacije o jednom radniku. Objekat je zadat na sledeći način:
Objekti
var radnik = {
ime: "Pera",
prezime: "Peric",
radniSat: 1000,
radnaNedelja: [8, 9, 7, 8, 9]
}
Sada su sve informacije sadržane u jednom objektu radnik. Dalje je potrebno proslediti taj
objekat funkciji obracunajZaraduRadnika, međutim potrebno je promeniti funkciju tako da ima
jedan parametar koji predstavlja prosleđeni objekat. Izmenjena funkcija izgleda:
function obracunajZaraduRadnika(radnik) {
var ukupnoSati = izracunajUkupanBrojSati(radnik.radnaNedelja);
ukupnaZarada = ukupnoSati * radnik.radniSat * 1.5;
} else {
ukupnaZarada = ukupnoSati * radnik.radniSat;
}
console.log(radnik.ime + " " + radnik.prezime
+ " ima platu od " + ukupnaZarada);
}
Funkcija obracunajZaraduRadnika koristi prosleđeni objekat radnik. Prilikom pozivanja funkcije

izracunajUkupanBrojSati, koristi se atribut radnaNedelja, koji pripada objektu radnik.
Primećujemo da nije potrebno vršiti modifikaciju funkcije izracunajUkupanBrojSati, jer joj
prosleđujemo niz koji ta funkcija zna da obradi. Na ovom primeru vidimo prednost dobro
napisanih funkcija, jer zahtevaju minimalne izmene ili ne zahtevaju uopšte! Primer pozivanja
funkcije sa objektom radnik dat je u nastavku:
var radnik = {
ime: "Pera",
prezime: "Peric",
radniSat: 1000,
}
obracunajZaraduRadnika(radnik);
Rezultat izvršavanja: Pera ima platu od 61500

Kompletan urađen primer dat je na slici u nastavku.
Objekti
Zadaci za vežbu:
1. Modifikovati zadatak 3.8.1. tako da se umesto godišta, filtriraju svi autmobili koji imaju
manje od 100 kilovati i manje od 1500 kubika
2. Nadograditi zadatak 3.8.3. tako da vrši računanje za nizove radnika. Odnosno funkcija
obracunajZaraduRadnika treba kao parametar da primi niz objekata radnik i da za
svakog izračuna platu.
3. Modifikovati zadatak 3.8.3. tako da koristi metode umesto funkcija, odnosno za svakog
radnika napraviti metodu izracunajUkupanBrojSati i obracunajZaraduRadnika. Pitanje za
razmišljanje nakon rešenog zadatka: Da li primećujete deo koji se ponavlja i kako bi se
to moglo rešiti?
Objekti
4. TypeScript programski jezik

TypeScript je programski jezik otvorenog koda, koji razvija i održava Microsoft. TypeScript
predstavlja nadskup, odnosno proširenje, JavaScript programskog jezika. Pri čemu je bitno
napomenuti, kao što je navedeno u prethodnim poglavljima, web browseri razumeju samo
JavaScript kao programski jezik, da je krajnji korak u razvoju TypeScript programa njihovo
provodjenje u JavaScript upotrebom kompajlera. Neke od prednosti koje nudi TypeScript su:
● Static typing - JavaScript dinamički određuje tip promenljivih na osnovu njihovih
vrednosti. Pri čitanju JavaScript programa ta osobina jezika stvara dodatan napor
programeru i čest je uzrok grešaka. TypeScript omogućava da se pri pisanju programa
dodeli tip vrednosti za promenljive, funkcije i sl.
● Provera sintakse - JavaScript programski jezik je interpetiran jezik, odnosno, kod se
proverava i izvršava u isto vreme. Tako da je česta situacija da za lako uočive greške
(npr. zabravljena zagrada, dodela vrednosti pogrešnog tipa u promenljivu i sl.) saznamo
kada pri pokretanju programa se naš kod ne izvrši. TypeScript omogućava proveru i
ispis sintaksičkih grešaka pri kompajliranju.
● TypeScript podržava koncepte iz objektno orijentisanog programiranja poput klasa,
interfejsa, nasleđivanja i sl.
4.1. Тipovi podataka

TypeScript nam omogućava da eksplicitno navedemo tipove podataka za promenljive,
parametre funkcija i za povratne vrednosti funkcija. Tipove koje TypeScript podržava možemo
podeliti u dve grupe: ugrađene tipove podataka i korisnički definisane. Ugrađene tipovi
predstavljaju osnovi tipovi podataka koje podržava JavaScript. Pod korisnički definisanim
tipovima se smatraju nizovi, enumeracije, klase, interfejsi i sl.
Ugrađeni tipovi
number Numerički tip podatka, predstavlja ceo ili decimalan broj.
string Tekstualni tip podatka, predstavlja sekvencu karaktera.
boolean Logički tip podatka, može biti true ili false.
void Tip koji se koristi kada želimo da naznačimo da funkcija neće imati
povratnu vrednost.
null Poseban tip koji naznačava da promenljiva nema dodeljenu vrednost.
undefined Tip koji predstavlja vrednost neinicijalizovane promenljive.
any Promenljiva koja je tipa any može da bude bilo kog tipa. Koristi se kada
želimo da imamo dinamičku određivanje tipa kao u JavaScriptu ili kada
nismo sugrni kog tipa će biti neka promenljiva.
Тipovi podataka
4.2. Anotiranje tipova

Tipovi se “dodeljuju” promenljivima tako što se nakon deklaracije promenljive stavi karakter “:” i
naziv tipa:
let broj: number;

let tekst: string = "Neki tekst...";
Ukoliko pokušamo da dodelimo vrednost pogrešnog tipa (npr. brojčanu vrednost u promenljivu
tipa string) u promenljivu prilikom kompajliranja od kompajlera dobićemo poruku o grešci. U
većini slučajeva, u specijalizovanim tekst editorima, greška će biti prikazana i u toku pisanja
koda. Npr. u Visual Studio Code-u promenljiva će biti podvučena crvenom linijom, i ako se
pozicioniramo mišem na tu promenljivu biće prikazana poruka o grešci:
Anotiranje (dodela) tipova promenljivima nije obavezna. Ukoliko ne navedemo tip promenljive,
TypeScript će pokušati automatski da dodeli promenljivoj tip. Automatska dodela posmatra izraz
sa desne strane jednakosti prilikom definisanja promenljive i pokušava da odredi tip vrednost na
osnovu izraza. Ukoliko ne može da odredi tip vrednosti izraza ili ukoliko prilikom definisanja
promenljiva nije instancirana, TypeScript će dodeliti tip any toj promenljivoj:
Anotiranje nizova se vrši navođenjem uglastih zagrada (“[]”) nakon navođenja tipa vrednosti
elemenata niza:
let nizStringova: string[] = ["Jabuka", "Banana", "Jagoda"];

let nizBrojeva: number[] = [2, 3, 4, 5];
let nizBiloCega: any[] = ["Pera", 23, true, 12];
4.3. Type Assertions

U određenim situacijama nama kao programeru će biti poznat tip promenljive, dok TypeScript
kompajleru neće (npr. selektovanje dom elementa na osnovu njegovog id-a, korišćenje globalne
promenljive iz drugog skript fajla i sl.). U tim situacijama možemo kompajleru eksplicitno reći
koja vrednost se nalazi u promenljivoj (Type Assertion). Sintaksa je sledeća:
Anotiranje tipova
<tip> promenljiva
ili
promenljiva as tip
Dobra praksa kada se koristi Type Assertion u izrazu je da bude okruzen zagradama:
let n: number = (<number> br) * 5;

let m: number = (br as number) * 5;
4.4. Funkcije
TypeScript nam omogućava da pišemo funkcije na deskreptivniji način anotiranjem tipa
parametarа funkcije, tipa povratne vrednosti i korišćenjem opcionih i podrazumevanih
parametara. Аnotiranje parametara se vrši na isti način kao i anotiranje promenljivih
(navođenjem karaktera “:” i tipa parametara), dok se anotiranje povratne vrednosti navodi nakon
zagrada za navođenje parametara:
function izracunajPovrsinu(sirina: number, visina: number): number {

let povrsina: number = sirina * visina;
return povrsina;
}
let rezultat: number = izracunajPovrsinu(3, 5);
4.4.1. Opcioni i podrazumevani parametri

TypeScript smatra da su svi parametri navedeni, na klasičan način, prilikom definicije funkcije
obavezni pri njenom pozivu, i ukoliko ih sve ne prosledimo prilikom poziva funkcije dobićemo
poruku o grešci. Ukoliko neki od parametara zapravo nisu obavezni pri pozivu funkcije,
TypeScript nam omogućava da ih naznačimo navođenjem karaktera “?” nakon njihovog naziva:
function predstaviSe(ime: string, prezime?: string): void {

if(prezime != undefined) {
console.log("Zdravo ja sam " + ime + " " + prezime + "!");
}else{
console.log("Zdravo ja sam " + ime + "!");
}
}
Gore navedena funkcija ima obavezan parametar ime tipa string i opcioni parametar prezime
tipa string, funkcija nema povratnu vrednost (nema return izraz) zbog čega je naveden tip void.
Funkciju predstavi se možemo da pozovemo prosleđivanjem samo parametra ime (pri čemu će
na konzolu biti ispisano samo ime u ispisu) ili prosleđivanjem parametra ime i opcionog
parametra prezime (pri čemu će na konzolu biti ispisano ime i prezime u ispisu).
Funkcije
Bitna napomena je da se svi opcioni parametri obavezno navode nakon obaveznih parametara.
Posebna vrsta opcionih parametara su parametri sa podrazumevanim vrednostima. Parametri
sa podrazumevanim vrednostima se navode tako što se priliko definicije funkcije, uz pomoć
karaktera “=”, dodeli podrazumevan vrednost parametru. Ukoliko korisnik pozove funkciju bez
prosleđivanja vrednosti za parametar sa podrazumevanom vrednošću, u toku izvršavanja
funckije će biti iskorištena podrazumevana vrednost, a ukoliko prosledi vrednost onda će biti
korišćena prosleđena vrednost kao vrednost parametra u toku izvršavanja funkcije:
function pozdravi(pozdrav: string = "Dobro jutro!"): void {

console.log(pozdrav);
}
pozdravi();
pozdravi("Dobar dan!")
4.5. Kompajliranje
TypeScript fajlove je potrebno kompajlirati (prevesti) u JavaScript fajlove upotrebom TypeScript
kompajlera. TypeScript komapjler se najlakse instalira kao Node.js paket:
1. Prvo je potrebno instalirati Node.js odlaskom na web stranicu https://nodejs.org/en/ i
izborom verzije koja je “Recommended For Most Users”:
Kompajliranje
2. Nakon instaliranja Node.js, u terminalu (command prompt ili power shell na windows-u) i
ukucati komandu: npm install -g typescript
3. Provera da li je TypeScript kompajler uspešno instaliran vrši se unosom komande:

tsc -v (komanda nam ispisuje verziju instaliranog typescript kompajlera).
Nakon instalacije možemo da kompajliramo TypeScript fajlove u JavaScript fajlove.
Najjednostavnije kompajliranje možemo da izvršimo tako što pozicioniramo terminal (ili
command prompt) u folder u kome se nalazi fajl koji želimo da komapajliramo i ukucamo
komandu: tsc imeFajla.ts. Kao rezultat u folderu dobijamo odgovarajući JavaScript fajl.
tsc
Da bi koristili napisani kod, u html stranici potrebno je putem script taga dodati dobijen
JavaScript fajl. Napomena: ukoliko kompajliramo klase, koje u sebi imaju getere i setere,
prilikom pisanja komande za kompajliranje treba da dodamo i komandu -target “es5” npr.:
tsc imeFajla.ts -target “es5”
4.6. Zadaci
ZADATAK 4.6.1
Ispraviti zadatak 3.6.3 tako da se koristi TypeScript. Tekst zadatka: Napisati program koji
obračunava zaradu radnika. Radnici koji rade više od 40 sati nedeljno su plaćeni 1.5 puta više
nego sto bi bili plaćeni da rade do 40 sati nedeljno. Broj radnih sati je evidentiran u nizu po
danima, a cena radnog sata iznosi 1000 za svakog radnika.
REŠENJE
Pošto je TypeScript nadskup JavaScript programskog jezika, odnosno njegovo proširenje, mogli
bi da kopiramo kod iz rešenja zadatak 3.6.3. i time bi dobili valida TypeScript odnosno
JavaScript kod. Ali prednost TypeScripta je da možemo da anotiramo tipove promenljivih, pri
čemu anotiranje nije obavezno, kako bi lakše mogli da prepoznamo u kodu koje vrednosti treba
da budu u kojoj promenljivoj. Tako da bi jedno od validnih rešenja bilo sledeće:
Zadaci
let ime: string = "Pera";

let radna_nedelja: number[] = [8, 9, 7, 8, 9];
let radniSat: number = 1000;
let ukupnoSati: number = 0;

let ukupnaZarada: number = 0;
for (let i = 0; i < radna_nedelja.length; i++) {
ukupnoSati += radna_nedelja[i];
}

} else {
}
NAPOMENA: Opšta preporuka je da se u TypeScript-u koristi ključna reč let umesto ključne
reči var.
ZADATAK 4.6.2
Prepraviti zadatak 3.7.1. tako da se koristi TypeScript. Tekst zadatka: Kazna za brzu vožnju
računa se kao 5000 din + 500 din za svaki kilometar preko ograničenja + 10000 din za vožnju
preko 120km/h. Napisati funkciju koja prima izmerenu brzinu vozila i ograničenje brzine. Ako je
brzina veća od dozvoljene funkcija vraća poruku sa cenom kazne, a ako je manja vraća poruku
da je sve u redu.
Iskoristiti podrazumevanu vrednost parametar funkcije tako da je u funkciji podrazumevano
ograničenje brzine 50.
REŠENJE
Za prepravku zadatak potrebno je samo da se izvrši anotiranje funkcije, parametara i
promenljivih, i da se postavi podrazumevana vrednost za jedan od parametara. Funkcija će
imati dva parametra tipa number, pri čemu parametar ograničenja ima podrazumevan vrednost
50, i povratan vrednost funkcije će biti tipa string:
Zadaci
function odrediKaznu(brzina: number, ogranicenje: number = 50): string

{
if (brzina <= ogranicenje) {
return "Sve je u redu";
}
let fiksno: number = 5000;

let dodatno: number = 0;
let prekoracio: number = brzina-ogranicenje;
for (let i = 0; i < prekoracio; i++) {
dodatno += 500;
}
let ukupno: number = 0;

if (brzina > 120) {
ukupno += 10000;
}
ukupno +=
ukupno += fiksno
fiksno ++ dodatno;
dodatno;
return "Vasa
return "Vasa kazna
kazna iznosi
iznosi "" ++ ukupno;
ukupno;
}
}
let rezultat_01
let rezultat_01 == odrediKaznu(68,80);
odrediKaznu(68,80);
console.log(rezultat_01);
izvršavanja: Sve
//Rezultat izvršavanja: Sve je
je uu redu
redu
//---------------------------------------------
//---------------------------------------------
rezultat_02 == odrediKaznu(67,60);
let rezultat_02 odrediKaznu(67,60);
izvršavanja: Vasa
//Rezultat izvršavanja: Vasa kazna
kazna iznosi
iznosi 8500
8500
//----------------------------------------------
//----------------------------------------------
let rezultat_03
rezultat_03 == odrediKaznu(125,100);
odrediKaznu(125,100);
//Rezultat izvršavanja: Vasa kazna iznosi 27500

//----------------------------------------------
let rezultat_04 = odrediKaznu(55);

//Rezultat izvršavanja: Vasa kazna iznosi 7500

//----------------------------------------------
Za vežbanje prepraviti ostale zadatke iz JavaScript poglavlja 3.6. I 3.7. da koriste TypeScript.
Zadaci
5. Osnove objektno-orijentisanog programiranja

5.1. Osnovni koncepti
U objektno-orijentisanom (OO) programiranju, aplikacije se sastoje od kolekcije objekata koji
međusobno interaguju. Svaki objekat predstavlja instancu klase, pri čemu klasa predstavlja
šablon (recept, blueprint) koji opisuje sve karakteristike objekta. Objekat se sastoji od podataka
(koji su sačuvani u poljima/atributima/svojstvima objekta), koji određuju njegovo stanje, i
procedura (metoda, odnosno funkcija objekta), koje određuju njegovo ponašanje.
Klasa je apstraktan pojam koji opisuje neku grupu objekata. Klasa može da bude stolica, tabla,
ili čovek. Objekat predstavlja konkretnu instancu neke klase. Školska učionica je puna objekata
čija klasa je stolica. To su, dakle, konkretne stolice koje se mogu locirati u prostoru (odnosno u
memoriji, kada pričamo o računarskom programu). Svaki student, pa i predavač, se može
posmatrati kao pojedinačni objekat, odnosno instanca klase čovek. U stvarnom svetu, često se
sreću pojedinačni objekti vrlo sličnih karakteristika, odnosno, iste vrste. Može postojati mnogo
različitih stolica, ali sve imaju zajedničke osobine, zbog toga što su pravljene po istom šablonu.
Ovaj šablon predstavlja klasa.
Klasa opisuje sve objekte određenog tipa i definiše: koje osobine svi objekti tog tipa imaju (ovo
nazivamo atributima/svojstvima/poljima klase); programski kod koji se može izvršiti nad
objektom tog tipa (ovo nazivamo metodama klase).
U literaturi klase se predstavljaju kao pravougaonici koji se sastoje iz tri sekcije, ilustrovano na
slici (UML notacija1):
Slika 5-1 UML predstavljanje klase
1. Naziv klase
● naziv počinje velikim slovom
● sastoji se od jedne ili više imenica u jednini koje precizno opisuju sadržaj klase
● naziv klase treba da bude jedinstven
● naziv se piše u pascal case-u (upper camel case)2
1 https://en.wikipedia.org/wiki/Unified_Modeling_Language
2 https://en.wikipedia.org/wiki/Camel_case
Osnovni koncepti
2. Atributi (promenljive, polja, stanje)

● vrednosti atributa definišu stanje objekta
● kada se promeni vrednost bilo kog atributa kaže se da je objekat promenio svoje
stanje
3. Metode (operacije, funkcije, ponašanja)
● predstavljaju akcije koje definišu ponašanje objekta
● sadrže kod koji manipuliše stanjem objekta
● mogu imati povratnu vrednost i parametre
Primer jednostavnih klasa je dat na slici:
Slika 5-2 Klase Radnik i Automobil
Klasa čije ime je radnik sadrži atribute ime i radnoVremeNedeljno,

ukupnoOdradjenoSatiNedeljno, osnovica, koeficijentRada. U realnosti, jedan radnik sadrži
mnogo više atributa, uključujući adresu stanovanja, ukupan radni staž, broj slobodnih dana, itd.
Klase predstavljaju model realnosti, tako da sadrže samo mali podskup podataka koji bi se
mogao naći u prirodi, i to one podatke koje su bitne za rad programa, odnosno računarskog
sistema za kog pišemo program.
Metode klase predstavljaju akcije koje definišu ponašanje objekta, i sadrže instrukcije na
osnovu kojih se menja stanje objekta. U primeru klase radnik navedene su tri metode:
povecajOdradjenoSati, izracunajPlatu, preostaloSatiNedeljno. Svaki radnik ima svoje radno
vreme, odnosno broj sati koje treba da odradi u toku radne nedelje (40 sati ukoliko se radi o
punom radnom vremenu), tako da je potrebno evidentirati na kraju svakog radnog dana koliko
sati je radnik proveo na svom radnom mestu. Metoda povecajOdradjenoSati kao parametar
prima koliko sati je radnik proveo na svom radnom mestu u toku dana, i sa tim parametrom
povećava vrednosti atributa ukupnoOdradjenoSatiNedeljno. Uz pomoć metode
preostaloSatiNedeljno moguće je videti koliko sati je preostalo radniku da odradi te nedelje. Ta
metoda vraća razliku atributa radnoVremeNedeljno i ukupnoOdradjenoSatiNedeljno. Svaki
radnik treba da dobije platu, metoda izračunajPlatu koristi atribute osnovica i koeficijenta rada
da izračuna koliku platu treba da dobije radnik (u realnom sistemu bi bili korišćeni i dodatni
podaci za izračunavanje plate, poput broj prekovremenih sati, iskorišćeno bolovanje i sl.).
Na slici su prikazane dve instance klase radnik, objekti pera i ana:
Osnovni koncepti
Slika 5-3 Instance klase Radnik
5.1.1. Definisanje klase u programskom jeziku TypeScript

U programskom jeziku TypeScript klasa se definiše upotrebom ključne reči class:
class Radnik {
ime: string;
radnoVremeNedeljno: number;
ukupnoOdradjenoSatiNedeljno: number;
osnovica: number;
koeficijentRada: number;
povecajOdradjenoSati(sati: number): void { ... }

izracunajPlatu(): void { ... }
preostaloSatiNedeljno(): number { ... }
5.1.2. Kreiranje instance klase

Za pravljenje instance klase potrebno je:
● Deklarisati identifikator instance te klase (promenljivu za objekat te klase)
● Konstruisati instancu (instancirati objekat klase, tj. alocirati memoriju za taj objekat i
inicijalizovati objekat)
o Ovo se postiže upotrebom operatora new
o Operator new kreira objekat i vraća referencu na njega
Primer:
let pera, ana: Radnik;

pera = new Radnik();
ana = new Radnik();
// ili
let mika: Radnik = new Radnik();
let zika: Radnik = new Radnik();
Osnovni koncepti
5.1.3. Dot (.) operator

Kada se instancira objekat klase, potreban je način da se pristupi atributima i metodama koje su
propisani klasom. Za to se koristi operator . (dot). Dot operator se poziva nad objektima tj.
njihovim identifikatorima. Primer:
let pera: Radnik = new Radnik();
pera.ime = "Pera Peric";
pera.ukupnoOdradjenoSatiNedeljno = 0;
pera.povecajOdradjenoSati(15);
Identifikator pomoću kog se pristupa objektu (u našem slučaju pera i mika) predstavlja referencu
na objekat u memoriji računara. Referenca se pridružuje objektu koji se nalazi u memoriji (heap)
računara, što je i prikazano na slici.
Slika 5-4 Referenciranje
Primer rada referenci:

//1. Instanciranje objekta pera:Radnik
let pera: Radnik = new Radnik();
pera.ime = "Pera Peric";
pera.osnovica = 650.0;
//2. Dodela promenljivoj sima vrednost promenljive pera (reference)

let sima: Radnik = pera;
//Izmena vrednosti atributa ime u objektu

sima.ime = "Sima Simic";
Koja bi bila vrednost pera.ime? U ovom slučaju vrednost pera.ime bi bila „Sima Simic“.
Korišćenjem ključne reči new (1) kreiran je novi objekat u memoriji, a referenca pera je
postavljena tako da pokazuje na njega. Dodelom let sima: Radnik = pera (2) nije kreiran novi
objekat u memoriji, već je vrednost reference pera dodeljena novokreiranoj referenci sima, što
znači da suštinski reference sima i pera od tog trenutka pokazuju na isti objekat u memoriji. To
znači da će promena objekta korišćenjem bilo koje od te dve reference uzrokovati promene nad
tim jednim, zajedničkim objektom u memoriji.
Osnovni koncepti
Slika 5-5 pera i sima referenciraju isti objekat
5.1.4. Konstruktor
Konstruktor u TypeScriptu je posebna metoda koja konstruiše objekat neke klase. Za
definisanje konstruktora se koristi ključna reč constructor. Ukoliko se konstruktor ne navede
eksplicitno unutar neke klase, ta klasa će imati podrazumevani konstruktor (konstruktor koji
nema parametre). U TypeScriptu moguće je imati samo jedan konstruktor u klasi.
Primer sa konstruktorom bez parametara:
class Radnik {
ime: string;
osnovica: number;
//Konsturktor bez parametara

constructor(){
this.ime = "";
this.radnoVremeNedeljno = 0;
this.ukupnoOdradjenoSatiNedeljno = 0;
this.osnovica = 0;
this.koeficijentRada = 0;
}
}
Primer sa konstruktorom sa parametrima:
Osnovni koncepti
class Radnik {
ime: string;
osnovica: number;
//Konsturktor sa parametrima
constructor(novIme, novoRVN, novoUOSN, novaOsnovica, noviKR){
this.ime = novIme;
this.radnoVremeNedeljno = novoRVN;
this.ukupnoOdradjenoSatiNedeljno = novoUOSN;
this.osnovica = novaOsnovica;
this.koeficijentRada = noviKR;
}

}
Konstruktor se može pozvati samo upotrebom operatora new, tako pozvani konstruktor
instancira odgovarajući objekat.
5.1.5. Modifikatori kontrole pristupa

Modifikatori kontrole pristupa se koriste kada želimo da kontrolišemo vidljivost 3 atributa ili
metode u klasi. Navode se ispred definicija metoda i atributa. U TypeScriptu postoje tri
modifikatora kontrole pristupa:
1. private – atributi i metode su vidljivi samo unutar klase
2. protected – atributi i metode su vidljivi samo za klase naslednice
3. public – atributi i metode su vidljivi za sve klase u programu
a. Ukoliko se eksplicitno ne navede modifikator pristupa ispred atributa ili metoda,
TypeScript podrazmeva da je taj atribut ili metoda public
Kada napišemo klasu i odredimo koji atributi i metode će imati koji modifikator pristupa,
dobijamo kod koji se može upotrebiti u drugim klasama ili programima. Pomoću javnih (public)
metoda objekti mogu međusobno da komuniciraju bez znanja o tome kako je nešto
implementirano u metodi (detalji implementacije su skriveni, tj. enkapsulirani unutar klase).
3
U ovom slučaju termin vidljivost ne odnosi se na to da li neko može da vidi da li se u kodu neke klase
nalazi član (atribut ili metoda), već se odnosi na mogućnost pristupa tom članu klase kada koristimo
objekat te klase.
Osnovni koncepti
U UML dijagramima public članovi su obeleženi sa prefikosm „+“, private članovi sa prefiskom „-
„ i protected članovi sa prefiksom „#“, npr.:
Slika 5-6 Klasa sa modifikatorima kontrole pristupa
Na gore navedenoj slici za private članove klase obeleženi su atributi klase (ime,
radnoVremeNedeljno i sl), a metode su obeležene sa public modifikatorom. Što znači da, u
ovom kontretnom slučaju, ne bismo mogli direktno da pristupam atributima sa kodom koji se
nalazi izvan klase. Kod klase:
class Radnik {
private _ime: string;
private _radnoVremeNedeljno: number;
private _ukupnoOdradjenoSatiNedeljno: number;
private _osnovica: number;
private _koeficijentRada: number;
public constructor(){
}
public povecajOdradjenoSati(sati: number): void { ... }

public izracunajPlatu(): void { ... }
public preostaloSatiNedeljno(): number { ... }
}
Ako bi pokušali direktno da menjamo vrednost atributa kao u primeru sa referencama, dobili
bismo grešku od kompajlera jer ti atributi više nisu vidljivi. Za pristup private atributima obično
se pišu public metode koje njima pristupaju, takozvani geteri i seteri. NAPOMENA: Po
konvenciji imenovanja u TypeScript private atributi bi trebalo da počnu sa donjom crtom “_”.
(Nije obavezno poštovati konvencije)
5.1.6. Sakrivanje informacija i enkapsulacija

Jedan od bitnih principa objektnog programiranja je princip sakrivanja informacija (information
hiding), koji predstavlja sakrivanje i zaštitu implementacionih detalja jedne klase od drugih
delova programa. Drugim rečima, objekti u programu treba da komuniciraju međusobno
isključivo upotrebom dobro definisanih interfejsa (tj. public metoda). Neke od prednost koju nam
Osnovni koncepti
donosi ovaj princip je: smanjenje potencijalnih greška koje bi napravili programeri prilikom
neadekvatne upotrebe klase sa čijim implementacionom detaljima nisu upoznati; omogućava
lakšu ponovnu upotrebu klasa u drugim delovim programa; znatno smanjuje posao prilikom
održavanja/promene implementacije neke klase.
U opštem slučaju, preporuka u objektnom programiranju je da ako nešto može da bude private
u klasi to i treba da bude private u klasi.
Kao trivijalan primer možemo posmatrati implementaciju klase trougao. Trougao se sastoji od 3
stranice a, b, c, koje prave zatvorenu figuru čiji unutrašnji zbir uglova je 180⁰.
Slika 5-7 Trougao sa public atributima
Ukoliko imamo klasu kao na slici, sa public atributima, programer koji koristi tu klasu može da
napiše sledeće:
let t: Trougao = new Trougao();
t.a = 12;
t.b = 3;
t.c = 4;
Gore navedeni kod je sintaksno ispravan, ali suštinski pogrešan jer programer koji je koristio
klasu trougao nije bio dovoljno upoznat sa činjenicom da trougao ne može da ima stranice tih
dimenzija. Odnosno dobili smo figuru sledećeg oblika:
Slika 5-8 Nepravilna figura
Takva figura bi prouzrokovala grešku u radu programa kada bi je koristili u našem programu kao
trougao (npr. u jednom trenutku treba da se izračunaju uglovi, ili visina trougla i sl.).
Sakrivanje implementacionih detalja bi sprečilo da nam se dogode takve greške, tj. programer
koji treba da napiše tu klasu bi napisao i metodu za postavljanje stranica trougla koja bi vršila
sve bitne provere (da li stranice zapravo pripadaju trouglu i sl.) i tek onda izmenila vrednosti
atributa. Čime bi izbegli grešku koja se desila u kodu iznad.
Osnovni koncepti
Slika 5-9 Trougao sa private atributima
Kao što se vidi na slici, atributi u klasi se obično proglašavaju privatnim. Da bi se moglo
pristupati tim atributima potrebno je kreirati public metode get i set za svaki pojedinačni atribut
(popularni geteri i seteri). Na taj način se može kontrolisati mogućnost pisanja (samo set
metoda) i mogućnost čitanja vrednosti atributa (samo get metoda). Konvencija pisanja naziva
metoda je get + ime atributa ili set + ime atributa. U set metodi se često dodaje i validacija
unetih podatak, tj. provera da li je nova vrednost koja je prosleđena ispravna.
U TypeScriptu, implementacija getera i setera se razlikuju od implementacije getera i setera u
klasični OO jezicima tako što se geteri i seteri ne tretiraju kao obične metode:
● Za kreiranje getera i setera koriste se ključne reči get i set pre imena metode
● Metode geter i setera se ne pozivaju kao ostale metode (upotrebom zagrada () ), već se
koriste kao što bi koristili public atribute
● Pristupa im se isključivo sa dot (.) notacijom
● Po konvenciji imenovanja get i set metode trebalo bi da imaju isti naziv (bez donje crtice)
kao i private atribut kome pristupaju
Primer:
Osnovni koncepti
class Trougao {
private _a: number;
private _b: number;
private _c: number;
public get a(): number { return this._a; }
public set a(v: number) {

//Ukoliko želimo da imamo validaciju mozemo
if (v + this._b > this._c &&
v + this._c > this._b && this._b + this._c > v) {
this._a = v;
} else {
console.log("Nije uneta stranica trougla");
}
}
public get b(): number { return this._b; }

public set b(value: number) { this._b = value; }
public get c(): number { return this._c; }
public set c(value: number) { this._c = value; }
let t: Trougao = new Trougao();

//Poziv setera
t.a = 2; t.b = 3; t.c = 4;
//Poziv gettera
console.log(t.a);
if(t.a > t.b){
console.log("Pozvani geteri a i b");
}
5.1.7. this4
Ključna reč „this“ u JavaScriptu se odnosi na objekat kome „this“ pripada. Upotreba ključne reči
„this“ u JavaSciptu je malo složenija nego u klasičnim OO programskim jezicima. Ukratko:
4 Više o this-u možete pronaći u knjizi You Don’t Know JS koja se nalazi na linku:
https://github.com/getify/You-Dont-Know-
JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-
prototypes
Osnovni koncepti
● U metodi ili konstruktoru, „this“ se odnosi na objekat kome pripada metoda.

● U funkciji, „this“ se odnosi na globalni objekat.
● U eventu, „this“ se odnosi na dom element koji koji je primio event.
● Samostalno, „this“ se odnosi na globalni objekat.
U klasama ”this” koristimo kako bi referencirali instancu (objekat) koja izvršava kod, odnosno
kako bi referencirali attribute ili metode tog objekta. Jedna od upotreba ključne reči “this” je da
reši problem dvosmislenosti (npr. parametar metode ima isti naziv kao atribut klase). Primer:
class Student {
ime: string; //Atribut ime
prosek: number; //Atribut prosek
//Konstruktor ima paramtere ime i prosek

constructor(ime: string, prosek: number){
this.ime = ime;
this.prosek = prosek;
//ime = ime je dvosmisleno
//this.ime se odnosi na atribut
//ime se odnosi na parametar
}
...
}
Kao što je već rečeno, ključna reč „this“ se koristi i u svim ostalim metodama klase koje
referenciraju atribute te iste klase. Bitno je voditi računa na šta se „this“ odnosi, u slučaju ako
imamo metodu koja treba da doda funkciju koja će reagovati na neki event dom elementa
(event listner) u toj funkciji nećemo moći da koristimo this kako bi referencirali atribute klase.
5.1.8. Zadaci
ZADATAK 5.1.1
Modifikovati zadatak 3.8.1. tako da se koriste klase. U klasi implementirati konstruktor sa
parametrima, ispoštovati princip sakrivanja informacija (atributi treba da budu private i da imaju
getere i setere).
ANALIZA:
Iz rešenja zadatka vidimo da objekat automobil se sastoji od 6 atributa i 2 metode.
U klasi pored privatnih atributa imaćemo konstruktor sa parametrima i getere-setere za sve
atribute. Pored getera i setera imaćemo dve metode: izracunajHP i povecajBrKilometara. Prva
metoda vraća broj koji predstavlja količinu konjskih snaga, a druga metoda nema povratnu
vrednost (samo povećava broj pređenih kilometara).
Osnovni koncepti
var automobil = {
model: "6",
kubikaza: 1998,
kilovata: 100,
godiste: 2015,
izracunajHP: function() {
},
povecajBrKilometara: function(vrednost) {
this.kilometraza = this.kilometraza + vrednost;
}
}
Osnovni koncepti
class Automobil {
private _model: string;
private _proizvodjac: string;
private _kubikaza: number;
private _kilovata: number;
private _godiste: number;
private _kilometraza: number;
public constructor(model: string, proizvodjac: string, kubikaza: number,

kilovata: number, godiste: number, kilometraza: number) {
this._model = model;
this._proizvodjac = proizvodjac;
this._kubikaza = kubikaza;
this._kilovata = kilovata;
this._godiste = godiste;
this._kilometraza = kilometraza;
}
public izracunajHP(): number {

return this._kilovata * 1.34;
}
public povecajBrKilometara(vrednost: number): void {

this._kilometraza = this._kilometraza + vrednost;
}
public get model(): string {

return this._model;
}
public get proizvodjac(): string {

return this._proizvodjac;
}
public get kubikaza(): number {

Osnovni koncepti
public get kubikaza(): number {

return this._kubikaza;
}
public get kilovata(): number {

return this._kilovata;
}
public get godiste(): number {

return this._godiste;
}
public get kilometraza(): number {

return this._kilometraza;
}
public set model(value: string) {

this._model = value;
}
public set proizvodjac(value: string) {

this._proizvodjac = value;
}
public set kubikaza(value: number) {

this._kubikaza = value;
}
public set kilovata(value: number) {

this._kilovata = value;
}
public set godiste(value: number) {

this._godiste = value;
}
Osnovni koncepti
public set kilometraza(value: number) {

this._kilometraza = value;
}
//Testiranje:
let automobil: Automobil = new Automobil("6", "Mazda", 1998, 100, 2015,
134000);
console.log("Konjskih snaga: " + automobil.izracunajHP());
//Rezultat: Konjskih snaga: 134
automobil.povecajBrKilometara(6000);
console.log(automobil.kilometraza);
//Rezultat: 140000
ZADATAK 5.1.2.
Modifikovati zadatak 3.8.3. tako da se koriste klase. Svi atributi objekta treba da budu atributi
klase, a funkcije iz zadatka koje su vezane isključivao za radnika možemo da implementiramo
kao metode klase.
ANALIZA:
Ovaj zadatak predstavlja proširenje zadatka 3.8.3. tako da se koriste klase. Kao što je
navedeno u tekstu, klasa je šablon koji opisuje karakteristike objekta, a na osnovu objekta iz
radnik iz zadatka 3.8.3. možemo identifikovati te karakteristike:
var radnik = {
ime: "Pera",
prezime: "Peric",
radniSat: 1000,
}
Iz navedenog objekta vidimo da naša klasa treba da ima 4 atributa. Kako bi bio ispoštovan
princip sakrivanja informacija, koji je bitan za OOP, atributi će biti privatni i u klasi je potrebno
imati getere i setere za njih. Pored getera i setera, može da se implementira i konstruktor sa
parametrima kako bi olakšao pravljenje novih objekata. Funkcije izracunajUkupanBrojSati i
obracunajZaraduRadnika mogu da postanu metode klase, a pošto će uvek pristupati objektu
radnika za koje su instancirane, umesto parametra mogu da koriste this kako bi prisutpile bitnim
atributima.
Osnovni koncepti
class Radnik {
private _prezime: string;
private _radniSati: number;
private _radnaNedelja: number[];
constructor(ime: string, prezime: string, radniSati: number,

radnaNedelja: number[]) {
this._ime = ime;
this._prezime = prezime;
this._radniSati = radniSati;
this._radnaNedelja = radnaNedelja;
}
public izracunajUkupanBrojSati(): number {
let ukupnoSati: number = 0;
for(let i = 0; i < this._radnaNedelja.length; i++){
ukupnoSati += this._radnaNedelja[i];
}
return ukupnoSati;
}
public obracunajZaraduRadnika(): void {

let ukupnoSati: number = this.izracunajUkupanBrojSati();
let ukupnaZarada: number = 0;
ukupnaZarada = ukupnoSati * this._radniSati * 1.5;
} else {
ukupnaZarada = ukupnoSati * this._radniSati;
}
console.log(this._ime + " " + this._prezime
+ " ima platu od " + ukupnaZarada);
}
public get ime(): string {

return this._ime;
}
Osnovni koncepti
public get prezime(): string {

return this._prezime;
}
public get radniSati(): number {

return this._radniSati;
}
public get radnaNedelja(): number[] {

return this._radnaNedelja;
}
public set ime(value: string) {

this._ime = value;
}
public set prezime(value: string) {

this._prezime = value;
}
public set radniSati(value: number) {

this._radniSati = value;
}
public set radnaNedelja(value: number[]) {

this._radnaNedelja = value;
}
Zadaci za vežbu:
1. Modifikovati zadatke iz poglavlja 3.8. tako da se koriste klase.
2. Napisati klasu Pas. Svaki pas ima ime, starost (u psećim godinama), podatak da li je
vakcinisan i naziv rase. Napisati konstruktor (sa podrazumevanim vrednostima za
parametre), gettere i settere. Psa je moguće vakcinisati, ispisati njegovu starost u
ljudskim godinama*, ispisati sve podatke o psu. (napraviti metode za navedene
funkcionalnosti). *Napomena: Jedna pseća godina je 7 ljudskih.
Osnovni koncepti
5.2. Nasleđivanje
Nasleđivanje se može definisati kao proces u kome jedna klasa preuzima (nasleđuje) osobine
(atribute i metode) neke druge klase. Klasa koja se nasleđuje obično se zove natklasa (super
class, ili roditeljska klasa) a klasa koja nasleđuje osobine se naziva potklasa (sub class, ili
naslednik). Upotreba mehanizma nasleđivanja omogućava hijerarhijsko modelovanje klasa na
osnovu njihovih odgovornosti i zaduženja.
Instanca objekta potklase će sadržati sve osobine koje sadrži i instanca natklase, pri čemu će
objekat potklase imati dodatne osobine koje definiše potklasa. Zbog toga se u konstruktoru
potklase poziva konstruktor natklase (kako bi se inicijalizovale nasleđene osobine).
U TypeScriptu nasleđivanje se postiže upotrebom ključne reči extends, kao što je ilustrovano u
narednoj tabeli. Postoji nekoliko tipova nasleđivanja:
Tip nasleđivanja: Kod:
Jednostruko nasleđivanje:
class A { ... }
class B extends A { ... }
Višesložno nasleđivanje:
class A { ... }
class C extends B { ... }
Nasleđivanje
Hijerarhijsko nasleđivanje:
class A { ... }
class C extends A { ... }
Kao konkretan primer upotrebe nasleđivanja možemo da iskoristimo primer modelovanja

korisnika aplikacije online prodavnice. Recimo da aplikacija treba da podržava tri tipa korisnika:
• Kupac – može da se loguje na aplikaciju, može da kupuje proizvode u aplikaciji, može

da ostavlja komentare na proizvode i sl.
• Prodavac – može da se loguje na aplikaciju, može da dodaje proizvode za prodaju,
može da odgovara na pitanja kupaca i sl.
• Administrator – može da se loguje na aplikaciju, zadužen za održavanje aplikacije.
Najjednostavniji način za modelovanje bi bio da se svaki od korisnika aplikacije predstavi kao
posebna klasa.
Slika 5-10 Modelovanje korisnika bez nasleđivanja
Kao što se vidi na slici, sve tri klase dele određene atribute (ime, prezime, korisnicko_ime,
lozinka) i metode (metode za rukovanje atributima, metoda za logovanje i sl.). Jedan od
problema sa ovim načinom modelovanja je višestruka implementacija identičnih metoda na više
mesta. Sve gore prikazane zajedničke metode rade identičan posao, i ne bi bilo loše da ih
možemo implementirati na jednom mestu. To bi mogli da postignemo upotrebom nasleđivanja i
sve zajedničke osobine da stavimo u natklasu. A ukoliko se kasnije mora održavati neka
Nasleđivanje
funkcionalnost (npr. promena načina logovanja korisnika), sa nasleđivanjem kod bi promenili na

jednom mestu, a bez nasleđivanja isti kod bi se trebao menjati na tri različita mesta.
Još jedan od problema pristupa bez nasleđivanja je nedostatak polimorfizma (opisan u sekciji
5.2.1. Polimorfizam). Na primer, ukoliko je moguće ostavljati komentare na proizvode od strane
korisnika, pri čemu je bitno pamtiti koji korisnik je ostavio komentar. Da bi to implementirali
potrebno je da u proizvodu imamo metodu koja kao parametar prima korisnika. Sa pristupom
bez nasleđivanja bi morali da u proizvodu implementiramo tri metode koje rade isti posao, ali
primaju različit tip parametra (za svakog od korisnika po jedan). Ukoliko bi koristili nasleđivanje,
mogli bismo da implementiramo samo jednu metodu koja kao parametar prima natklasu.
Na slici je prikazan model sa korišćenjem nasleđivanja.
Slika 5-11 Modelovanje korisnika sa upotrebom nasleđivanja
TypeScript kod za primer nasleđivanja između klasa Korisnik i Kupac je dat u tekstu ispod:
Nasleđivanje
class Korisnik {
//Ovi atributi bi mogli da budu protected
//Radi jednostavnosti primera to je izostavljeno
private _prezime: string;
private _korisnicko_ime: string;
private _lozinka: string;
constructor(i: string, p: string, ki: string, l: string) {

this._ime = i;
this._prezime = p;
this._korisnicko_ime = ki;
this._lozinka = l;
}
public get ime(): string { return this._ime; }

public set ime(v: string) { this._ime = v; }
public get prezime(): string { return this._prezime; }
public set prezime(v: string) { this._prezime = v; }
public get korisnicko_ime(): string { return this._korisnicko_ime; }
public set korisnicko_ime(v: string) { this._korisnicko_ime = v; }
public get lozinka(): string { return this._lozinka; }
public set lozinka(v: string) { this._lozinka = v; }
public login(): void {

//LOGIKA LOGOVANJA
//...
}
}
Nasleđivanje
class Kupac extends Korisnik {

private _stanje_na_racunu: number;
public constructor(i: string, p: string, ki: string, l: string, snr: number)

{
super(i, p, ki, l);
this._stanje_na_racunu = snr;
}
public get stanje_na_racunu(): number {

return this._stanje_na_racunu;
}
public set stanje_na_racunu(value: number) {

this._stanje_na_racunu = value;
}
public plati(): boolean{

//LOGIKA PLACANJA
return true;
}
private raspolozivaSredstva(): number {

//LOGIKA RACUNANJA RASPOLOZIVIH SREDSTAVA
return 0;
}
}
Obratiti pažnju na konstruktor klase Kupac. Taj konstruktor kao parametre treba da primi (nije
obavezno) sve parametre koje prima roditeljski konstruktor i parametre koji će se iskoristiti za
inicijalizaciju njegovih atributa. U konstruktoru klase Kupac je pozvan konstuktor natklase (klase
Korisnik), upotrebom ključne reči super, kako bi se inicijalzovali nasleđeni atributi. Instanca
klase Kupac (objekat) će sadržati attribute i metode iz obe klase, primer:
let k1: Kupac = new Kupac("Pera", "Peric", "pera", "1234", 120.0);
Nasleđivanje
Slika 5-12 Objekat klase Kupac
5.2.1. Polimorfizam
Po jednoj od definicija, polimorfizam (u programskim jezicima) je obezbeđivanje jedinstvenog
interfejsa entitetima različitih tipova. Polimorfizam često se koristi u programskim jezicima i
znatno olakšava implementaciju funkcionalnosti koje su zajedničke za više klasa. Najčešća
upotreba polimorfizma u OO jezcima je upotreba referenci natklase kako bi se referencirao
objekat potklase (kao u primeru za dodavanje komentara kod korisnika online prodavnice).
Primer:
let k:Korisnik = new Kupac("Pera", "Peric", "pera", "1234", 120.0);
// ili
function fja(k: Korisnik): void { ... };
let kp: Kupac = new Kupac("a", "a", "a", "a", 1);

fja(kp);
Pošto klasa Kupac nasleđuje klasu Korisnik, objekat klase Kupac će sadržati sve osobine koje
bi sadržao i objekat klase Korisnik (slika, osobine obeležene crvenom bojom). Odnosno, svaki
Kupac je Korisnik, ali svaki Korisnik nije Kupac. Tako da je dodela objekta klase Kupac
promenljivoj tipa Korisnik moguća, a u suprotnom smeru nije dozvoljeno zato što objekat
nadklase ne bi sadržao sve osobine podklase (npr. osobine ofarbane plavom bojom na slici).
Nasleđivanje
Slika 5-13 Referenciranje objekta u memoriji
Pošto su promenljive zapravo reference na objekat, korisnik koji koristi referencu tipa nadklase
će moći da pristupa osobinama samo za koje ta referenca zna. Iako taj objekat u sebi sadrži
više podataka (atributa i/ili metoda) korisnik će moći samo da koristi ono što je poznato tipu te
promenljive, u konkretnom primeru samo osobine klase Korisnik.
5.2.2. Redefinisanje metoda (method overriding)

Redefinisanje metoda (method overriding) predstavlja mogućnost da se u potklasi promeni
ponašanje (odnosno reimplementira) metoda natklase. Redefinisanje se postiže tako što se u
potklasi implementira metoda koja ima isto ime, parametre i povratnu vrednost kao i metoda u
natklasi. Redefinisanjem metodu u potklasi možemo da proširimo (tj. ukoliko smo pozvali
roditeljsku metodu upotrebom ključne reči super) ili da promenimo (tj. implementiramo metodu
kao što je to rađeno i do sada). Primer:
Nasleđivanje
class Osoba {
ime: string;
prezime: string;
constructor(ime: string, prezime: string){
this.ime = ime;
this.prezime = prezime;
}
predstaviSe(): void {
}
}
class Radnik extends Osoba {

radnoMesto: string;
constructor(ime: string, prezime: string, radnoMesto: string){
super(ime, prezime);
this.radnoMesto = radnoMesto;
}
//Method overriding
predstaviSe(): void {
super.predstaviSe();
console.log("Zaposlen na radnom mestu: " + this.radnoMesto);
}
}
let pera: Osoba = new Radnik("Pera", "Peric", "Bankar");

pera.predstaviSe();
//Ispis u konzoli je:
//Ja sam Pera Peric
//Zaposlen na radnom mestu: Bankar
Nasleđivanje
5.2.3. Zadaci
ZADATAK 5.2.1
Napisati klasu Poruka. Klasa Poruka se sastoji se od:
• Atributa:
o naziv_posiljaoca (string),
o naziv_primaoca (string),
o sadrzaj_poruke (string).
• Konstruktora sa parametrima
• Metoda:
o stampaj (void),
▪ metoda stampaj ispisuje vrednost atributa u konzolu
o getera i setera.
Napisati klasu SMSPoruka koja nasleđuje klasu Poruka. Klasa SMSPoruka ima dva dodatna
atributa: broj_telefona_posiljaoca (string), broj_telefona_primaoca (string). Pored getera i setera
za nove atribute, u klasi SMSPoruka redefinisati metodu stampaj tako da se ispisu i dodati
atributi klase SMSPoruka.
ANALIZA:
Implementiranje klase Poruka radimo po šablonu klasa, gde atribute možemo da označimo sa
modifikatorm pristupa protected (videti poglavlje 5.1.5.). Atributi mogu da budu i private, ali u
tom slučaju ako budemo morali da pristupamo tim atributima u klasi naslednice, umesto
direktnog pristupa, morali bi da koristimo getere i setere.
Nasleđivanje
class Poruka {
protected _naziv_posiljaoca: string;
protected _naziv_primaoca: string;
protected _sadrzaj_poruke: string;
constructor(naziv_posiljaoca: string, naziv_primaoca: string,

sadrzaj_poruke: string) {
this._naziv_posiljaoca = naziv_posiljaoca;
this._naziv_primaoca = naziv_primaoca;
this._sadrzaj_poruke = sadrzaj_poruke;
}
public stampaj(): void {
console.log("Sender: " + this._naziv_posiljaoca);
console.log("Receiver: " + this._naziv_primaoca);
console.log("Content: " + this._sadrzaj_poruke);
}
public get naziv_posiljaoca(): string {
return this._naziv_posiljaoca;
}
public set naziv_posiljaoca(value: string) {
this._naziv_posiljaoca = value;
}
public get naziv_primaoca(): string {
return this._naziv_primaoca;
}
public set naziv_primaoca(value: string) {
this._naziv_primaoca = value;
}
public get sadrzaj_poruke(): string {
return this._sadrzaj_poruke;
}
public set sadrzaj_poruke(value: string) {
this._sadrzaj_poruke = value;
}
}
Klasa SMSPoruka nasleđuje klasu poruka, što znači da konstruktor podklase mora da pozove
konstruktor nadklase upotrebom ključne reči super:
Nasleđivanje
class SMSPoruka extends Poruka {

private _broj_telefona_posiljaoca: string;
private _broj_telefona_primaoca: string;
constructor(naziv_posiljaoca: string, naziv_primaoca: string,
sadrzaj_poruke: string, broj_telefona_posiljaoca: string,
broj_telefona_primaoca: string) {
super(naziv_posiljaoca, naziv_primaoca, sadrzaj_poruke);
this._broj_telefona_posiljaoca = broj_telefona_posiljaoca;
this._broj_telefona_primaoca = broj_telefona_primaoca;
}
public stampaj(): void {
console.log("Sender number: " + this._broj_telefona_posiljaoca);
console.log("Receiver number: " + this._broj_telefona_primaoca);
super.stampaj();
}
}
//Testiranje
let p: Poruka = new Poruka("A", "B", "Hello World!");
p.stampaj();
let s: SMSPoruka = new SMSPoruka("A", "B", "Hello", "000", "111");
s.stampaj();
ZADATAK 5.2.2
Napisati klasu EmailPoruka koja nasleđuje klasu Poruka. Klasa EmailPoruka ima dva dodatna
atributa: email_posiljaoca (string), email_primaoca (string). Pored getera i setera za nove
atribute, u klasi EmailPoruka redefinisati metodu stampaj tako da se ispisu i dodati atributi klase
EmailPoruka.
ZADATAK 5.2.3.
Napisati klasu Smestaj. Klasa Smestaj sastoji se od:
• Atributa:
o naziv (string),
o adresa (string),
o grad (string).
• Konstruktora sa parametrima.
• Metoda:
o stampaj (void),
▪ metoda stampaj ispisuje vrednost atributa u konzolu
Nasleđivanje
o getera i setera.
Napisati klasu Hotel koja nasledjuje klasu Smestaj. Klasa hotel ima dodatan atribut
broj_zvezdica (number). Pored getera i setera za nove atribute, u klasi Hotel redefinisati metodu
stampaj tako da se ispisu i dodati atributi klase Hotel. Implementirati i metodu predstaviSe (void)
koja ukratko opisuje hotel (u konzolu ispisuje tekst npr. „Hotel Sheraton, Novi Sad, je hotel sa 4
zvezdice“, gde su podaci o nazivu, gradu i zvezdicama vrednosti atributa).
5.2.4. Interfejsi
U mnogim OO jezicima klase podržavaju samo jednostruko nasleđivanje, tj. klase mogu da
naslede samo jednu klasu. To može da bude veoma ograničavajuće, posebno kada određena
klasa naslednica (i sve njene naslednice) kao i druge klase u hijerarhiji klasa treba da imaju
neko zajedničko ponašanje.
U OO jezicima interfejs je kolekcija metoda koji ukazuju da klasa poseduje neko ponašanje
pored onoga koje nasleđuje od natklase. Interfejs ne sadrži implementaciju metoda, već samo
naznačava da klasa koja implementira interfejs mora da implementira i metode koje su
navedene u interfejsu.
Neke od razlika između interfejsa i klasa su:
● Interfejs se ne može instancirati;
● Interfejs ne sadrži konstruktore;
● Sve metode u interfejsu su apstraktne (sadrže samo definiciju metoda);
● Interfejs ne sadrži polja tj. atribute – (Interfejsi u TypeScript ovo dozvoljavaju);
● Klase ne nasleđuju interfejse, već ih implementiraju upotrebom ključne reči implements;
● Klasa može da implementira više interfejsa;
● Interfejs može da nasledi više drugih interfejsa upotrebom ključne reči extends.
Primer upotrebe interfejsa:
Nasleđivanje
interface Animal {
talk: () => void;
noOfLegs: () => number;
}
class Dog implements Animal {
public talk(): void {

console.log("Av av av av!");
}
public travel(): void {

console.log("Dog travels");
}
public noOfLegs(): number {

return 4;
}
}
Preporuke kada koristiti interfejs a kada klasu:

● Klase se obično koriste kada objekat te klase može samostalno da postoji u sistemu
● Interfejse obično koristimo kada objekat tog tipa ne treba samostalno da postoji u
sistemu, već želimo da taj objekat (odnosno neka klasa) ima implementaciju određenih
osobina
● Ukoliko je potrebno u roditelju implementirati metodu koja je zajednička za sve
naslednike, a objekat tog tipa ne treba samostalno da postoji u sistemu, za to se obično
koriste apstraktne klase.
o Apstraktne klase se ne mogu instancirati kao ni interfejsi, ali za razliku od
interfejsa mogu da sadrže atribute i implementaciju metoda, ali mogu da sadrži i
apstraktne metode kao interfejsi
o Primer gde bi koristili apstraktnu klasu je primer klase Korisnik online prodavnice,
ne bi trebalo da postoji objekat tipa Korisnik u sistemu (već objekti Kupac,
Prodavac ili Administrator) ali je potrebno implementirati određene zajedničke
metode poput login, getera i setera i sl.
Nasleđivanje

FED Priručnik Za Pripremu PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FED Priručnik Za Pripremu PDF

Uploaded by

Copyright:

Available Formats

Priručnik za pripremu

Front-end web development

1. Uvod u Front-end development ........................................................................................... 1

1. Uvod u Front-end development

1.1. Arhitektura modernih web-aplikacija

Arhitektura modernih web-aplikacija

klijentskih aplikacija (front-end developeri). Programeri koji su osposobljeni za kreiranje svih

Slika 1-1 Arhitektura modernih web-aplikacija

1.2. Fundamentalne front-end tehnologije

1.2.1. Web-čitači (browseri) i način prikazivanja web stranica

Fundamentalne front-end tehnologije

Fundamentalne front-end tehnologije

● <h1>Dobrodošli</h1> - Tekst “Dobrodošli” pikaži kao glavni naslov na stranici

Slika 1-3 Struktura HTML tag-a

Fundamentalne front-end tehnologije

Slika 1-4 Primer HTML tag-a sa jednim atributom

Slika 1-5 Prikaz HTML stranice sa primera

Slika 1-6 Primer CSS pravila

Fundamentalne front-end tehnologije

Slika 1-7 HTML primer sa dodatnim stilom

Fundamentalne front-end tehnologije

Fundamentalne front-end tehnologije

Detaljnije o web adresama

1.3. Developer tools

Slika 1-8 Elements tab

Slika 1-9 Prikaz developer konzole

Slika 1-10 Sources tab

Slika 1-11 Network tab

2.1. Algoritamsko razmišljanje

2.2. Pisanje algoritma

Slika 2-1 Osnovni simboli na dijagramu toka

2.3. Primeri algoritama

2.3.1. Primer 1: Konverter potrošnje automobila

Slika 2-2 Konverter potrošnje automobila

2.3.2. Primer 2: Računanje proseka ocena

Slika 2-3 Algoritam za određivanje uspeha polaznika

2.3.3. Primer 3: Prijava na web sajt sa brojačem pokušaja

Slika 2-4 Algoritam prijave na web sajt

2.3.4. Primer 4: Podizanje novca sa bankomata

4. Unos željenog novčanog iznosa.

Slika 2-5 Blok dijagram toka korišćenja bankomata

2.3.5. Primer 5: Rešavanje kvadratne jednačine

pisanje formula, već predstavlja jedan od fundamentalnih mehanizama programiranja koji se

Slika 2-6 Blok dijagram postupka rešavanja kvadratne jednačine

2.4. Zadaci za vežbu

3.1. Pisanje JavaScript programa

3.1.1. Potreban softver

Pisanje JavaScript programa

3.1.2. Primer JavaScript programa

// OVDE ĆEMO PISATI NAŠ JAVASCRIPT KOD

Pisanje JavaScript programa

Slika 3-2 Jednostavan JavaScript program

Pisanje JavaScript programa

Ovo je primer viselinijskog komentara.

I ova linija je deo istog komentara jer se

nalazi unutar znakova za komentar.

Postupak kreiranja promenljive se naziva definisanje dok se dodela vrednosti zove

document.write("Rezultat sabiranja je:");

</html> Slika 3-3 Program za sabiranje 2 broja

3.3.1. Ključna reč let

3.4. Osnovni tipovi podataka

radimo sa njima. Na primer, celobrojne promenljive podležu pravilima celobrojne aritmetike i

3.4.1. Numerički tipovi