JavaScript

Osnove programskog jezika

2 JavaScript

 JavaScript je pod ovim imenom nastao u prosincu 1995. godine. Prije

toga, njegovo ime je bilo LiveScript, ali su se njegovi osnivači
(Netscape i Sun Microsystems) odlučili na promjenu imena iz čisto
marketinških razloga radi velike popularnosti programskog jezika Java
u to vrijeme.
 JavaScript nije pojednostavljena inačica programskog jezika Java.
JavaScript i Java imaju neusporedivo više razlika nego sličnosti.
 Oznaka Script u nazivu jezika ukazuje da je riječ o skriptnom jeziku.
 Skriptni jezici su u pravilu manje kompleksni, imaju prostiju i manje
strogu sintaksu, lakši su za razumijevanje, lakše se uče, najčešće su
interpreteri i platformski su neovisni.
3 JavaScript

 Iako je JavaScript inicijalno povezan sa izradom interaktivnih web

stranica, on sasvim uspješno može da funkcionira i u okruženjima koja
nemaju veze sa web -om.
 JavaScript je već duže vrijeme objektno orijentiran i podržava rad sa
objektima.
 U posljednjih desetak godina ovaj jezik je doživio najveći obim
promjena od svih drugih jezika i iz jednog relativno skromnog jezika
počeo da se razvija u ozbiljan i respektabilan, ne samo jezik ili
okruženje, nego tehnologiju.
 Za kratko vrijeme pojavio se veliki broj biblioteka koje su korisnicima
dodatno olakšale upotrebu ovog jezika (jQuery, Bootstrap, Modernizr,
MooTools…)
4 JavaScript

 Microsoft je nedugo nakon pojave JavaScript –a izdao Jscript, jezik vrlo

sličan JavaScript –u.
 Za standardizaciju skriptnih jezika, pa tako i JavaScript –a, zadužena je
organizacija ECMA (European Computer Manufacturers Association).
Standardi se objavljuju pod nazivom ECMAScript.
 Danas je podrška za JavaScript odlična u svim popularnim
preglednicima.
 Za pisanje programa u ovom jeziku nije potrebno nikakvo posebno
razvojno okruženje, programi se mogu pisati u bilo kojem editoru.
5 JavaScript

Document Object Model (DOM)

 DOM je model za prikaz i interakciju s objektima u HTML dokumentu.
Omogućava jednoznačan i jednostavan pristup dijelovima (HTML)
dokumenta te rukovanje tim dijelovima.
 DOM predstavlja jednu vrstu plana organizacije svih objekata koji se
nalaze na web strani.
 JavaScript definira svoj DOM u obliku ovakve hijerarhijske strukture:
6 JavaScript

elements[ ]
forms[ ]

button
anchors[ ]
checkbox
fileupload
document links[ ] hidden
password
images[ ] radio
select options[ ]
window applets[ ] submit
text
textarea
7 JavaScript

 Svakom objektu ili svojstvu pristupa se kroz taj model, tj. document je
osnovni objekt preko kojeg se pristupa svim drugim objektima.
 Objekt window također je važan objekt pomoću kojeg se upravlja
prozorom preglednika.
 Dvije često korištene funkcije vezane su uz objekte document i window:
 document.write – upisuje niz znakova koji se proslijedi kao prvi
argument u HTML dokument na mjestu gdje se funkcija poziva;
 window.alert – ispisuje niz znakova koji se proslijedi kao prvi argument
u zasebnom prozoru i ne dopušta nastavak izvršavanja programa dok se ne
zatvori.
8 Osnovne karakteristike i pravila

Velika i mala slova

 JavaScript razlikuje velika i mala slova!
 Ključne riječi, varijable, funkcije i drugi nazivi moraju se pisati dosljedno s
obzirom na velika i mala slova. Tako se, primjerice, ključna riječ mora
pisati while, a ne While ili WHILE. Isto tako, varijable stranaa, stranaA,
StranaA i STRANAA predstavljaju četiri različite varijable.
 Radi izbjegavanja pogrešaka, preporuča se dosljednost prilikom korištenja
malih i velikih slova u nazivima.
 Dobra praksa je slijediti način imenovanja koji se već koristi za nazive
postojećih funkcija i svojstava u JavaScriptu, a to je tzv. camelCasing.
Nazivi se pišu malim slovima, a ako naziv sadrži dvije ili više riječi, druga
i svaka sljedeća riječ počinju velikim slovom (npr. getElementById).
9 Osnovne karakteristike i pravila

Završetak naredbe
 Znak kojim se u JavaScript -u označava kraj naredbe je točka-zarez (;).
 Točka-zarez nije obavezan znak, ali se njegova uporaba preporuča.
Naime, JavaScript ubacuje "; "na kraju retka ako pojedini kôd izgleda
kao naredba, što u nekim situacijama nije ono što programer želi.
Komentari u JavaScript –u
 Označavaju se jednako kao i u prog. jezicima C i C++.
// Jednoredni komentar
/* I ovo je komentar,
koji se može protezati na više redova */
10 Osnovne karakteristike i pravila

Imenovanje varijabli i funkcija

 Nazivi varijabli i funkcija trebaju zadovoljavati ovo pravilo: prvi znak
u nazivu treba biti slovo, podcrta ( _ ) ili dolarski znak ($).
 Znakovi koji slijede mogu biti slova, brojevi, podcrta ili dolarski znak.
 Primjeri ispravnih naziva: i, moja_var, _temp, sImePrezime
 Nazivi ne smiju biti isti kao ključne riječi jezika:

break do if switch typeof

case else in this var
catch false instanceof throw void
continue finally new true while
default for null try with
delete function return    
11 Osnovne karakteristike i pravila

 Također, izbjegavati i nazive globalnih varijabli i funkcija

predefiniranih u JavaScript –u:

arguments encodeURI Infinity Object String

Array Error isFinite parseFloat SyntaxError
Boolean escape isNaN parseInt TypeError
Date eval Math RangeError undefined
Decode€URI EvalError NaN ReferenceError unescape
decodeURIComponent Function Number RegExp URIError
12 Uključivanje JavaScripta u HTML
 JavaScript kôd se može uključiti u HTML dokument na jedan od
sljedećih načina:
 pisanjem kôda između oznaka <script> i </script>
 iz vanjske datoteke uporabom atributa src u oznaci <script>
 preko obrade događaja navedenog kao HTML atribut (npr. onclick
ili onmouseover)
 u URL -u koji se koristi posebnim protokolom javascript:
13 Uključivanje JavaScripta u HTML
JavaScript unutar HTML datoteke
 Element <script> može se pojaviti u elementu <head> ili u
elementu <body>.
 U elementu <head> uobičajeno je pisati programe koji očekuju neku
korisnikovu radnju, tj. učitaju se u preglednik i čekaju događaj koji bi ih
pokrenuo.
 U elementu <body> uobičajeno je pisati programe koji se izvršavaju
odmah pri učitavanju. Najčešće je to generiranje nekog dijela HTML
dokumenta.
 Jedan HTML dokument može sadržavati nekoliko elemenata
<script>.
 Odvojene skripte obrađuju se redom kojim su napisane u dokumentu i
čine jedan JavaScript program u jednom HTML dokumentu, tj. funkcije
i varijable definirane u jednoj skripti dostupne su u svim sljedećim
skriptama u istom HTML dokumentu.
14 Uključivanje JavaScripta u HTML
JavaScript u zasebnoj datoteci
 Od inačice 1.1 JavaScript u elementu <script> podržava atribut src.
Vrijednost tog atributa je URL datoteke koja sadrži JavaScript program.
<script type="text/javascript" src="prog.js"></script>
 Datoteka JavaScript obično ima nastavak .js i sadrži čisti JavaScript, bez
elementa <script>
 Prednosti upotrebe ovog načina:
 Pojednostavljuje HTML datoteku i smanjuje njezinu veličinu;
 Jednostavnije održavanje;
 Kada više HTML dokumenata koristi jednu datoteku JavaScripta, ona se učitava
u preglednik samo prilikom prve uporabe, nakon čega se lokalno sprema na
disk;
 JavaScript program s jednog poslužitelja može se rabiti na nekoliko drugih.
15 Uključivanje JavaScripta u HTML
Obrada događaja
 HTML elementi imaju posebne atribute pomoću kojih se može povezati
kôd JavaScripta s određenim događajem. Ti atributi počinju slovima on... ,
a kao vrijednost atributa navode se naredbe JavaScripta koje će se izvršiti
kad se dogodi taj događaj,
 Primjer:
<input type="button"
value="Poruka"
onclick="window.alert('JavaScript');" />
16 Uključivanje JavaScripta u HTML
JavaScript u URL -u
 Kôd JavaScripta može se uključiti u HTML i pomoću pseudoprotokolne
oznake javascript u URL-u.
 Taj posebni protokol označava da je tijelo stranice iza navedenog URL-a
proizvoljan JavaScript program koji će obraditi interpreter.
 Ako JavaScript program u javascript: URL-u ima više naredbi, one
moraju biti odvojene znakom ";".
 Primjer:
…
<body>
<a href="javascript:var sada=new Date(); 'Sada je:' +
sada;" target="_blank">JavaScript</a>
</body>
17 Uključivanje JavaScripta u HTML
 Vrlo često se javascript: URL koristi za izvršavanje programa
JavaScripta bez promjene sadržaja dokumenta.
 To se postiže tako da se osigura da posljednja naredba u URL-u ne vraća
nikakvu vrijednost.
 Jedan od načina je uporaba operatora void.
 Primjer:
…
<body>
<a href="javascript:window.open('about:blank'); void
0;">JavaScript</a>
</body>
18 Greške
 Ako se program JavaScripta ne ponaša kako se očekuje, najbolje je
pokrenuti F12, konzolu developer tools, gdje je moguće pratiti sve
pogreške koje se javljaju tijekom izvođenja programa.
 Primjer:
…
<body>
<script>
var i = 1;
document.writ('i= ' + i + '<br>');
</script>
</body>
…
19 Vrste podataka
Brojevi
 Svi brojevi u JavaScriptu prikazuju se kao brojevi s pomičnim zarezom
(floating-point) u 64-bitnom formatu, tj. mogu se prikazati brojevi koji nisu
veći (po apsolutnoj vrijednosti) od 1,7976931348623157 x 10308 i nisu
manji od 5 x 10 -324.
 Cijeli brojevi mogu se prikazati od -9007199254740992 (-253) do
9007199254740992 (253).
 Osim brojeva s bazom 10, JavaScript prepoznaje i brojeve s bazom 16
(heksadekadske). Heksadekadski broj mora započeti s „0x” ili „0X”. i
nastaviti se nizom heksadekadskih znamenki (0 - F), primjerice: 0x12f
 Brojevi s pomičnim zarezom prikazuju se na dva načina: klasični način
(3.14 ili 2345.789) ili tzv. „inženjerski” način 6.02e23
20 Vrste podataka
 Kad rezultat operacije nad brojevima postane prevelik za prikaz u
JavaScriptu, broj se prikazuje kao posebna vrijednost Infinity. Slično
tome, kad je negativan broj manji od najmanjeg broja koji se može
prikazati u JavaScriptu, prikazuje se kao posebna vrijednost -Infinity.
 Ako se prilikom neke matematičke operacije dobije nedefinirani rezultat
(npr. dijeljenje s nulom), broj se prikazuje pomoću posebne vrijednosti NaN
(Not-a-Number = nije broj). Ta vrijednost nije jednaka ni jednoj drugoj
vrijednosti, pa čak ni samoj sebi.
 Funkcija isNaN(), koja provjerava je li neka vrijednost broj ili ne.
 Funkcija isFinite() provjerava je li vrijednost broj i može li se prikazati
kao konačan broj u JavaScriptu.
21 Vrste podataka
Konstanta Značenje

Infinity Posebna vrijednost koja predstavlja beskonačnost.

NaN Posebna vrijednost nije-broj.

Number.MAX_VALUE Najveći broj koji se može prikazati.
Number.MIN_VALUE Najmanji (najbliži nuli) broj koji se može
prikazati.
Number.NaN Posebna vrijednost nije-broj.
Number.POSITIVE_INFINITY Posebna vrijednost koja predstavlja beskonačnost.

Number.NEGATIVE_INFINITY Posebna vrijednost koja predstavlja negativnu

beskonačnost.
22 Vrste podataka
Nizovi znakova
 U JavaScriptu se nizom znakova smatra bilo koji niz znakova duljine 1 ili
više, omeđen dvostrukim ili jednostrukim navodnicima (" ili ').
 Niz znakova započet s dvostrukim navodnikom mora završiti dvostrukim
navodnikom. Također, niz znakova započet jednostrukim navodnikom
mora završiti jednostrukim navodnikom.
 Niz znakova započet dvostrukim navodnikom može sadržavati proizvoljan
broj jednostrukih navodnika i obratno.
 Niz znakova treba biti napisan u jednom retku. Ako postoji potreba za
unosom novog retka, potrebno je rabiti znak \n.
23 Vrste podataka
 Primjeri:
'test' // Niz znakova omeđen jednostrukim navodnicima
"3.14" // Ovo nije broj već niz znakova
'Potrebno je upisati "password"' // Dvostruki navodnici
unutar niza znakova
"Običan niz znakova."
"Ovaj niz je\n u dva reda"
poruka="Dobrodošli u " + "SMŠ 'Žepče'"; // Nizovi znakova
spajaju se operatorom +
24 Vrste podataka
Logičke vrijednosti
 Logičke (Booleove) vrijednosti imaju samo dvije moguće vrijednosti koje
se prikazuju pomoću konstanti true i false.
 Logičke vrijednosti najčešće su rezultat uspoređivanja:
var a,b;
a = 4;
b = 7;
logVar = a > b; // logVar sadrži false jer je 4 < 7
25 Vrste podataka
Polja
 Polje je skup vrijednosti u kojem svaki element ima jedinstveni redni broj
koji se naziva indeks.
 Vrijednost određenog elementa dobije se tako da se iza naziva polja
vrijednost indeksa stavi u uglate zagrade, primjerice a[2] označava treći
element u polju a, jer su u elementi polja indeksirani od nule (a[0] je prvi
element polja a).
 Polja se stvaraju pomoću objekta Array.
 Primjer kreiranja i "punjenja" polja:
var a = new Array();
a[0] = 1.2;
JavaScript, za razliku od
a[1] = "JavaScript"; mnogih drugih jezika,
omogućava različite tipove
a[2] = true; podatka u jednom polju.
a[3] = iVarijabla;
26 Vrste podataka
 Polja se mogu stvoriti i tako da im se odmah postave početne vrijednosti
var a = new Array(1.2, "JavaScript", true, iVarijabla);
 Ako se pri kreiranju objekta Array proslijedi samo jedan parametar, on
označava duljinu polja. Sljedeći primjer stvara novo polje od 10 elemenata:
var a = new Array(10);
27 Vrste podataka
Nepostojeća i nedefnirana vrijednost
 Ključna riječ null označava posebnu vrijednost koja nema nikakvu
vrijednost. Kad varijabla ima vrijednost null, tada ne sadrži ni jednu
ispravnu vrstu podatka: objekt, polje, broj, niz znakova ili logičku
vrijednost.
 Druga je posebna vrijednost undefined, koja se dobije kad se uporabi
varijabla koja je bila deklarirana, ali nema početnu vrijednost ili svojstvo
objekta koje ne postoji.
28 Varijable
 Varijabla ili promjenljiva je memorijska lokacija čiji se sadržaj može
mijenjati tokom izvođenja programa.
 Svaka varijabla u programu predstavlja neku memorijsku lokaciju i
memorijsko zauzeće koje mi možemo mijenjati.
 Varijablu bi najlakše mogli zamisliti kao jednu ladicu u velikom ormaru
gdje se mogu staviti određene stvari.
 JavaScript u varijablama pohranjuje podatke.
 Računalo varijable čuva u memoriji a mi im dajemo simboličko ime,
pomoću kojeg pristupamo sadržaju varijable.
 Prilikom imenovanja varijabli treba voditi računa da prvi znak naziva
varijable mora biti slovo, podcrta ( _) ili dolarski znak ($).
 Preporučuje se korištenje samo znakova engleske abecede u imenovanju
varijabli.
29 Varijable
 JavaScript je jezik u kojem se prilikom deklariranja varijable ne navodi
vrsta podatka.
 Varijabla dobije vrstu podatka na osnovi podatka koji sadrži.
 Prije same upotrebe varijable, poželjno ju je deklarirati pomoću ključne
riječi var.
 Primjeri deklariranja:
var i;
var sum;
var i, sum; // Ili obje odjednom
var i=5; // Deklaracija s početnom vrijednosti
 Ako pri deklaraciji varijable nije navedena početna vrijednost, ona se
automatski postavlja na vrijednost undefined.
30 Objekti
 JavaScript je jezik baziran na objektima. Sa izuzetkom konstrukcija kao što
su petlje i operatori, skoro sve JavaScript mogućnosti su, u većoj ili manjoj
mjeri, implementirane korištenjem objekata.
 Objekt je kombinacija promjenljivih i funkcija.
 Promjenljive koje pripadaju objektu nazivaju se svojstva (properties), a
funkcije objekta nazivaju se metode (methods).
 Objekt se može definirati i kao složena vrsta podatka koji skuplja više
vrijednosti u jednu cjelinu.
 Želi li se pristupiti određenom svojstvu, potrebno je navesti ime objekta,
znak "." (točku) i na kraju ime svojstva.
osoba.ime
osoba.prezime
31 Objekti
 Objekti se stvaraju pozivom posebne funkcije (konstruktor).
 Primjeri kreiranja objekata:
var objekt = new Object();
var sada = new Date();
var osoba = new Osoba('Pero', 'Perić');
 Metoda je funkcija pridružena objektu.
imeObjekta.imeMetode = nazivFunkcije;
 Primjer:
function identitet() {
return "Ja sam " + this.ime + " po zanimanju " +
this.zanimanje; //
}
osoba.predstaviSe = identitet; // Povezivanje s objektom
32 Objekti
 Objekti u JavaScriptu se mogu podijeliti u četiri grupe:
1. Objekti koje definira sam programer;
2. Objekti ugrađeni u JavaScript
3. Objekti web preglednika.
4. Dokument objekti, koji su dio Document Object Modela (DOM

O Svojstva
b
j
Metode
e
k
t
33 Zadatak za vježbu
1. Izraditi HTML datoteku naziva varijable.html sljedećeg sadržaja:
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8" />
<title>Varijable</title>
</head>
<body>
<script type="text/javascript">
<!--
. . .
-->
</script>
</body>
</html>
34 Zadatak za vježbu
2. JavaScript program piši unutar elementa <script>.
3. Deklariraj varijablu iBroj i dodiijeli joj vrijednost 1.
4. Deklariraj varijablu sNiz1 i dodijeli joj vrijednost 'Niz znakova'.
5. Deklariraj varijablu sNiz2 i dodijeli joj vrijednost '3.14' .
6. Deklariraj varijablu sNiz3 i dodijeli joj vrijednost 'U dva <br/>retka'.
7. Deklariraj varijablu bLogicka i dodijeli joj vrijednost true.
8. Vrijednosti ispiši pomoću funkcije document.write.
9. Promijeni vrijednost varijable bLogicka u false te ju ponovo ispiši.
35 Rješenje:
…
<script>
var iBroj = 1,
sNiz1 = 'Niz znakova',
sNiz2 = '3.14',
sNiz3 = 'U dva<br />retka!',
bLogicka = true;

document.write('Broj: ' + iBroj + '<br />');

document.write('Niz 1: ' + sNiz1 + '<br />');
document.write('Niz 2: ' + sNiz2 + '<br />');
document.write('Niz 3: ' + sNiz3 + '<br />');
document.write('Logička: ' + bLogicka + '<br />');
bLogicka = false;
document.write('Logička: ' + bLogicka + '<br />');
</script>
…
36 Operatori
Operatori u JavaScriptu predstavljaju simbole, koji označavaju određenu
operaciju i koji povezuju jedan ili više operanada u jedan izraz (aritmetički,
logički...).
Aritmetički operatori
 Aritmetički operatori su operatori osnovnih računskih matematičkih
operacija.
Operator Značenje

zbrajanje (+) zbraja dva broja ili spaja dva niza znakova

oduzima drugi broj od prvoga ili kao unaran operator vraća

oduzimanje (-)
negativnu vrijednost broja

množenje (*) množi dva broja

dijeli prvi broj drugim i rezultat je uvijek decimalan broj;

dijeljenje (/) dijeljenje s nulom daje pozitivnu ili negativnu beskonačnost
(ovisi o prvom broju) dok 0/0 daje NaN

modulo (%) vraća ostatak od dijeljenja prvog broja drugim

inkrement (++) povećava vrijednost operanda za jedan
dekrement (--) umanjuje vrijednost operanda za jedan
37 Operatori
Operator pridruživanja
 Ovaj operator (znak "=") se koristi za pridruživanje vrijednosti varijabli.
a = 3;
b = b + 2;
c = a + b;
 Operator pridruživanja je asocijativan s desne strane
var x = y = z = 0; /*sve tri varijable će imati
vrijednost 0 */
 Operator pridruživanja ima i poseban oblik - pridruživanje s operacijom
x += y; // isto je što i x = x + y
 Operator pridruživanja s operacijom ne može se koristiti s operatorima
inkrement (++) i dekrement (--).
38 Operatori
Operatori usporedbe
 Operator usporedbe uspoređuje vrijednosti dvije varijable ili izraza i ovisno
o točnosti usporedbe vraća logičke izraze true ili false.

Operator Značenje

manji od (<) rezultat je true ako je prvi operand manji od drugoga; inače false

veći od (>) rezultat je true ako je prvi operand veći od drugoga; inače false

manji ili jednak (<=) rezultat je true ako je prvi operand manji ili jednak drugom; inače false

veći ili jednak (>=) rezultat je true ako je prvi operand veći ili jednak drugom; inače false

jednak (==) rezultat je true ako je prvi operand jednak drugom; inače false

rezultat je true ako je prvi operand jednak drugom i jednake su vrste podatka;
identičan (===)
inače false

različit (!=) rezultat je true ako je prvi operand različit od drugoga; inače false

rezultat je true ako je prvi operand različit od drugoga ili su različite vrste
ne-identičan (!==)
podatka; inače false
39 Operatori
 Uspoređivati se mogu samo brojevi i nizovi znakova.
 JavaScript prije uspoređivanja obavlja određena pretvaranja i to:
 ako su oba operanda brojevi ili se mogu pretvoriti u brojeve, uspoređuju se kao
brojevi;
 ako su oba operanda nizovi znakova ili se mogu pretvoriti u niz znakova,
uspoređuju se kao nizovi znakova;
 ako je jedan operand niz znakova ili se može pretvoriti u niz znakova te ako je
drugi operand broj ili se može pretvoriti u broj, niz znakova se pokušava
pretvoriti u broj i uspoređuju se kao brojevi. Ako niz znakova nije broj, pretvara
se u NaN, tj. uspoređivanje nije uspjelo;
 ako se objekt može pretvoriti u broj ili u niz znakova, JavaScript pretvara objekt
u broj. To znači da se objekti Date uspoređuju kao brojevi.
40 Operatori
 ako se jedan od operanada koji se uspoređuju ne može uspješno pretvoriti u broj
ili u niz znakova, uspoređivanje je uvijek neuspješno, tj. Rezultat je false;
 ako je jedan od operanda NaN, uspoređivanje je uvijek neuspješno.
 Gore navedena pravila za pretvaranje tipova prilikom uspoređivanja ne
primijenjuju se za operator identičnosti (===), koji zahtijeva da dvije
varijable budu jednake i po vrijednosti i po vrsti podatka.
 U sljedećem primjeru dobivaju se različiti rezultati:
var a = 2;
var b = "2";
document.write(a == b); // true
document.write(a === b); // false
41 Operatori
Logički operatori
 Logički operatori povezuju dva ili više logičkih izraza i vraćaju, ovisno o
vrijednosti logičkih izraza, true ili false.
 Najčešće se koriste kod složenih uvjeta za grananja i petlje.
 Operatori i značenje:
 && /* logički operator I (AND) vraća vrijednost true ako su oba
izraza true, inače false
 || /* logički operator ILI (OR) vraća vrijednost true ako je barem
jedan izraz true
 ! // logički operator NE (NOT) vraća vrijednost true ako je izraz false
odnosno false ako je izraz true.
var a = true;
var b = false;
document.write(a && b); // false
document.write(a || b); // true
42 Operatori
Operator spajanja (konkatenacije)
 Operator + spaja nizove znakova u jedan novi.
 Primjer:
a = "2"; b = "2";
c = a + b; // c je 22, a ne 4!!!
 VAŽNO: Operator + daje viši prioritet nizovima znakova nego brojevima.
Dakle, ako je jedan operand niz znakova, onda se i drugi operand pretvara
u niz znakova i obavlja se spajanje. Kod operatora uspoređivanja je
obratno, tj. ako je jedan operand broj, drugi se pretvara u broj i potom se
obavlja uspoređivanje.
43 Operatori
 Nekoliko slučajeva za analizu:
1 + 2 /* Oba operanda su brojevi, rezultat je 3 */
"1" + "2" /* Oba operanda su nizovi znakova, rezultat
je "12 */
"1" + 2 /* Drugi operand se pretvara u niz znakova,
rezultat je "12" */
11 < 3 /* Oba operanda su brojevi, rezultat je
false */
"11" < "3" /* Oba operanda su nizovi znakova, rezultat
je true */
"11" < 3 /* Prvi operand se pretvara u broj, rezultat
je false */
"one" < 3 /* Prvi operand se pretvara u broj (postaje
Nan), rezultat je false */
44 Zadatak za vježbu
1. Izradi HTML datoteku naziva vjezba_operatori.html i unutar nje napiši program u JavaScriptu.
2. Deklariraj dvije varijable iA i iB i dodijelite im proizvoljne cjelobrojne vrijednosti.
3. Deklariraj varijable iSuma, iRazlika i iModulo koje će sadržavati redom: sumu, razliku i
modulo varijabli iA i iB.
4. Postavite inicijalne vrijednosti varijabli iSuma, iRazlika i iModulo na nulu koristeći se
operatorom pridruživanja.
5. Deklarirajte varijablu bLog.
6. Prikažite inicijalne vrijednosti varijabli iA i iB pomoću funkcije document.write.
7. Izračunaj vrijednosti varijabli iz 3. točke i prikažite ih na ekranu.
8. Inkrementiraj varijablu iA i dekrementiraj varijablu iB te prikaži nove vrijednosti varijabli iA i
iB.
9. Već izračunatoj sumi dodaj novu vrijednost varijable iA koristeći se pridruživanjem s
operacijom. Prikaži novu vrijednost varijable iSuma.
10. Varijabli bLog dodijeli rezultat usporedbe je li vrijednost varijable iA veća od 5. Prikaži
vrijednost varijable bLog.
11. Prikaži iA + iB i zaključi što se dobije kao rezultat i zašto.
12. Ispišite (iA + iB) i zaključi što se dobije kao rezultat i zašto.
45 Rješenje:
...
<script>
var iA = 16,
iB = 6,
iSuma,
iRazlika,
iModulo,
bLog;
iSuma = iRazlika = iModulo = 0;
document.write('Početna vrijednost iA: ' + iA + '<br />');
document.write('Početna vrijednost iB: ' + iB + '<br /> <br />');
iSuma = iA + iB;
iRazlika = iA - iB;
iModulo = iA % iB;
document.write('Suma: ' + iSuma + '<br />');
document.write('Razlika: ' + iRazlika + '<br />');
document.write('Modulo: ' + iModulo + '<br /> <br />');
iA++;
iB--;
document.write('iA nakon inkrementiranja: ' + iA + '<br />');
document.write('iB nakon dekrementiranja: ' + iB + '<br />');
iSuma += iA;
document.write('Sumi dodamo '+iA+' tako da je suma sada = '+iSuma+'<br/><br/>');
bLog = iA > 5;
document.write('Vrijednost varijable iA je veća od 5? ' + bLog + '<br/><br/>');
document.write('iA + iB: ' + iA + iB + '<br />');
document.write('(iA + iB): ' + (iA + iB) + '<br />');
</script>
...
46 Funkcije
 Funkcija je blok koda koji se definira jednom, ali se može pozvati, odnosno
izvršavati proizvoljan broj puta. Tako skraćujemo pisanje programa i
pojednostavljujemo sam program.
 JavaScript ima veliki broj ugrađenih funkcija, ali korisnik može definirati i
svoje funkcije.
 Funkcije se najčešće definiraju pomoću ključne riječi function, iza koje
slijedi naziv funkcije i popis argumenata unutar malih (okruglih) zagrada.
Tijelo funkcije piše se unutar vitičastih zagrada.
 Funkcija može vratiti vrijednost naredbom return, ali i ne mora.
function funkcija1 (par1, par2, par3, ...) {
naredba_1; // tijelo funkcije
naredba_2;
naredba_n;
}
47 Funkcije
 Primjer jednostavne funkcije kojom se izračunava i vraća zbroj dva broja:

function zbroji (x, y) {

return x+y;
}
 Funkcija ne mora vraćati vrijednost, što znači da u tijelu funkcije ne mora
biti ključna riječ return:

function obavijest() {
alert(poruka);
}
48 Funkcije
 Funkcija se poziva tako što se navede njezin naziv i (eventualno) argumenti
unutar malih zagrada. Ako funkcija nema argumenata, ne navodi se ništa,
ali su zagrade obavezne.
 Ako se funkciji proslijedi manje argumenata nego ih sadrži definicija
funkcije, drugi argumenti dobiju vrijednost undefined.
 Ako se proslijedi više argumenata nego što funkcija očekuje, ona će
zanemariti višak argumenata.
 Primjer (poziv funkcija zbroji i obavijest):
rezultat=zbroji(10, 6);
obavijest();
49 Funkcije
Doseg varijabli
 Sve varijable imaju svoj doseg, odnosno oblast ili opseg važenja.
 Globalne varijable su dostupne u cijelom programu, odnosno ne pripadaju
ekskluzivno ni jednoj oblasti.
 Lokalne varijable su vidljive samo unutar funkcije u kojoj su deklarirane.
 Blok varijable važe samo unutar bloka u kojem su definirane. Njihov
opseg važenja je omeđen vitičastim zagradama. Takve varijable se
deklariraju pomoću ključne riječi let.
50 Funkcije
 Primjer 1:

// a je u globalnom prostoru
var a = 10;
// b je unutar bloka
{
let b = 20;
}
document.write(a); // a je dostupno
document.write(b); // b je nedostupno
 Primjer 2:

var c = 1;
function f() {
var d = 1;
}
document.write(c + '<br>'); // c je globalna varijabla
document.write(d + '<br>'); // d nije dostupno van funkcije
51 Funkcije
 Primjer 3 (Što će se ispisati na ekranu i zašto?):

let ime = 'Pero Perić';

{
let ime = 'Marko Marković'
}
document.write(ime);

 Primjer 4 (Što će se ispisati na ekranu i zašto?):

let ime = 'Pero Perić';

{
ime = 'Marko Marković';
}
document.write(ime);
52 Funkcije
 Primjer 5 (Što će se ispisati na ekranu i zašto?):

var a = 10;
var b = 5;
{
let b = 20;
document.write('Rezultat=' + (a+b) + '<br>');
}
document.write('Rezultat=' + (a+b) + '<br>');
53 Kontrola tijeka programa
Uvjetno izvođenje naredbi
 Osnovna naredba za grananje je naredba if, čiji je osnovni
(najjednostavniji) oblik:
if (log_uvjet) {
naredba_1;
naredba_2;
naredba_3;
…
naredba_n;
}
 log_uvjet je logički izraz čiji je rezultat istina (true) ili neistina (false).
54 Kontrola tijeka programa
 Ukoliko je rezultat ispitivanja logičkog uvjeta u zagradi true (ili se može
konvertiraati u true), izvršava se naredba ili niz naredbi unutar bloka.
Ukoliko je vrijednost usvjeta u zagradi false (ili se može konvertirati u,
false) naredba ili naredbe koje slijede se neće izvršiti.
 Kad operandi u izrazu nisu logički, prevode se u logičke vrijednosti.
 Sljedeće vrijednosti se uvijek prevode u false:
 null
 undefined
 prazan niz znakova ('' ili "")
 broj 0
 NaN.
 Sve druge vrijednosti prevode se u true.

.
55 Kontrola tijeka programa
 Primjeri:
if (n != 0) {
suma = suma / n;
n --;
}

var ime = '';

if (ime) {
window.alert('Ime je uneseno');
}

.
56 Kontrola tijeka programa
if … else
 Ovaj oblik naredbe omogućava definiranje bloka naredbi koji će se izvršiti ako
uvjet nije zadovoljen.
if (log_uvjet) {
blok_naredbi_1; // ako je log_uvjet=true
}
else {
blok_naredbi_2; // ako je log_uvjet=false
}
 Primjer: if (a > b) {
window.alert(a + ' je veće od ' + b);
} else {
window.alert(a + ' nije veće od ' + b);
}
57 Kontrola tijeka programa
if … else if … oblik (višestruka usporedba)
 Primjenjuje se ukoliko je potrebno izvršiti jednu od nekoliko mogućnosti
(više od dvije) .
 Osnovna sintaksa je:
if (log_uvjet1) {
blok_naredbi_1;
}
else if (log_uvjet2) {
blok_naredb_2;
}
else if (log_uvjet3) {
blok_naredb_2;
}
else {
blok_naredbi_4; //ako ni jedan uvjet nije ispunjen
}
58 Kontrola tijeka programa
Primjer:

var bod=65;
if (bod>=61 && bod<=80) {
ocjena=3;
}
else if (bod>=81 && bod<=90) {
ocjena=4;
}
else if (bod>=91) {
ocjena=5;
}
else {
alert('Nemaš pojma!!!');
}
alert('Osvojio si ' + bod + ' bodova i dobio ocjenu ' +
ocjena);
59 Kontrola tijeka programa
Naredba switch ()
 Omogućava veću preglednost koda u slučajevima višestruke usporedbe,
alternativa if… else if … strukturi
 Osnovna sintaksa je:
switch(n){
case 1:
// naredbe1
break;
case 2:
// naredbe2
break;
case 3:
// naredbe3
break;
default:
// naredbe4
break;
}
60 Kontrola tijeka programa
 Naredba switch provjerava je li izraz u okruglim zagradama (odmah iza ključne
riječi switch) istovjetan (koristi se operator ===), dakle, i po vrsti jednak, jednoj od
vrijednosti iza ključne riječi case. Ako takva vrijednost postoji, izvršava se blok
naredbi iza te vrijednosti do kraja cijele naredbe switch ili do ključne riječi break,
koja prekida blok koji se trenutačno izvršava, tj. završava naredbu switch. Dakle,
moguće je tu naredbu napisati tako da se jedan blok izvrši za više vrijednosti:
switch(n){
case 1:
case 2:
case 3:
// naredbe1
break;
case 4:
// naredbe2
break;
default:
// naredbe3
break;
}
61 Kontrola tijeka programa
 Treba pripaziti da se na kraju svakog bloka naredbi navede naredba break. Ako
se ona nehotice izostavi, neće biti prijavljena pogreška, nego će se izvršiti i
sljedeći blok naredbi.
 Ako ne postoji vrijednost koja je istovjetna provjeravanom izrazu, izvršava se
blok iza ključne riječi default.
 Primjer:
switch (znak) {
case '+':
z = x + y;
break;
case '-':
z = x - y;
break;
case '*':
z = x * y;
break;
case '/':
z = x / y;
break;
}
62 Kontrola tijeka programa
Uvjetni operator
 Uvjetni operator jedini je operator s tri operanda u JavaScriptu:
<uvjet> ? naredba1 : naredba2;
 što je jednako ovom:
if(<uvjet>)
naredba1;
else
naredba2;
 Ovaj operator se najčešće koristi pri inicijalizaciji varijabli, primjerice:
sPunoIme = sIme != null ? sIme : 'No name';
63 Kontrola tijeka programa
Petlje (iteracije)
 Petlja je struktura koja omogućava da se neki dio programskog koda izvrši
više puta.

Petlja while
 Osnovni oblik ove petlje je:
while (log_uvjet) {
//sekvenca_naredbi
}
 Tijelo petlje izvršava se sve dok je uvjet zadovoljen.
 Ako uvjet nije zadovoljen prije početka petlje, njezino tijelo se neće izvesti
niti jednom.
64 Kontrola tijeka programa
 Primjer:
// Suma prvih 50 prirodnih brojeva
var i = 1;
var suma = 0;
while (i <= 50) {
suma += i;
i ++;
}
 Ako nema bloka naredbi uokvirenih vitičastim zagradama nakon, onda se
samo prva naredba iza while(log_uvjet) tretira kao tijelo petlje. U
sljedećem primjeru
while(i<j)
i++;
j--;
samo se naredba i ++ ponavlja unutar petlje, a naredba j -- izvršit će se
po izlasku iz petlje.
65 Kontrola tijeka programa
Petlja do...while
 Osnovni oblik ove petlje je:
do {
//sekvenca_naredbi
}
while (uvjet);
 Ova petlja se razlikuje od while petlje po tome što se uvjet ispituje na kraju
petlje, što znači da se naredba ili blok naredbi unutar petlje izvršavaju
najmanje jedanput.
 Primjer:

// Suma brojeva od 1 - 50
var i = 1; var suma = 0;
do {
suma += i;
i ++;
} while (i <= 50);
66 Kontrola tijeka programa
Petlja for
 Osnovni oblik ove petlje je:
for(<inicijalizacija>; <uvjet>; <prirast>) {
// naredbe
}
 Petlja for se koristi kada je unaprijed poznat broj ponavljanja
 Primjer:

// Suma brojeva od 1 – 50 pomoću for petlje

var suma = 0;
for (var i=1; i<=50; i++) {
suma += i;
}
67 Obrasci
HTML obrazac dio je dokumenta koji, pored teksta, sadrži i posebne elemente
- kontrole (checkbox, radio button …). Obrasci su najčešći način prijave ili
ispunjavanja podataka na web stranicama.

Unos kraćih nizova znakova

Kraći nizovi znakova (nizovi znakova u jednom redu) unose se u tekstualno
polje.
Primjer: Kreirati jednostavnu formu sa jednim tekstualnim poljem i dugmetom.
U polje se unosi ime korisnika, a klikom na dugme u prozoru (alert) se ispisuje
sadržaj tekstualnog polja.
68 Obrasci
HTML
…
<form action="">
Unesi ime:
<input type="text" name="ime" id="ime" value=""/>
<br>
<input type="button" value="Provjeri" onclick="provjeri();" />
</form>
…

JavaScript
function provjeri() {
var sIme = '';
sIme = document.getElementById('ime').value;
window.alert('Uneseno ime je: ' + sIme);
}
69 Obrasci
Prvi korak u provjeri podataka koje korisnik upisuje je provjera je li uopće
upisan podatak koji se očekuje. U tu svrhu ćemo modificirati JavaScript kod u
funkciji provjeri().
function provjeri() {
var sIme='';
sIme=document.getElementById('ime').value;
if (sIme==='')
window.alert('Niste ništa unijeli. Molim unesite ime!');
else
window.alert('Uneseno ime je: ' + sIme);
}

Zadatak za vježbu: Izraditi obrazac koji omogućava ispis imena i prezimena u

posebna tekstualna polja. Nakon klika na dugme u prozoru (alert) ispisati
sadržaj polja.
70 Obrasci
HTML
<form action="">
<div>
<label for="ime"> Unesi ime</label><br>
<input type="text"
name="ime"
id="ime"
value="" />
</div>
<div>
<label for="prezime"> Unesi prezime</label><br>
<input type="text"
name="prezime"
id="prezime"
value="" />
</div>
<input type="submit"
value="Pošalji"
onclick="provjeri();" />
</form>
71 Obrasci
JavaScript

function provjeri() {
var sIme='';
var sPrez='';
sIme=document.getElementById('ime').value;
sPrez=document.getElementById('prezime').value;
if (sIme==="") {
window.alert('Nisu uneseni potrebni podaci.');
}
else {
window.alert('Vaše ime je ' + sIme + '\n' +
'Vaše prezime je ' +sPrez);
}
}
72 Obrasci
Funkcija za provjeru oba polja: }
if (sPrezime === '') {
function provjeri() { sPogreska += '\nPrezime je
var sIme = '', prazno!';
sPrezime = '', } else {
sPogreska = '', sPoruka += '\nPrezime je: ' +
sPoruka = ''; sPrezime;
}
sIme = if (sPogreska === '') {
document.getElementById('ime').value; window.alert(sPoruka);
sPrezime = return true;
document.getElementById('prezime').va } else {
lue; window.alert(sPogreska);
if (sIme === '') { return false;
sPogreska += 'Ime je }
prazno!'; }
} else {
sPoruka += 'Ime je: ' + sIme;
73 Obrasci
Odabir jedne od ponuđenih mogućnosti (radio buttons)
Za ilustraciju ćemo u naš obrazac dodati i element input tipa radio za
odabir spola korisnika:
…
<div>
<label for="spol">Spol</label><br>
<input type="radio"
name="spol"
value="m" />Muški
<input type="radio"
name="spol"
value="z" />Ženski
</div>
…

Funkciju provjeri() sada je potrebno upotpuniti i kodom koji će provjeriti

da li je nešto odabrano i što.
74 Obrasci
Kod za provjeru radio dugmadi:

…
aSpol = document.getElementsByName('spol');
for (i = 0; i < aSpol.length; i++) {
if (aSpol[i].checked) {
sSpol = aSpol[i].value;
}
}
if (sSpol === '') {
sPogreska += '\nOdaberite spol!';
} else {
sPoruka += '\nSpol: ' + sSpol;
}
…
75 Obrasci
Dodavanje i obrada checkbox polja u obrascu
U obrazac ćemo dodati jedno checkbox polje

…
<div>
<input type="checkbox"
name="dob"
id="dob"/>
<label for = "dob" >
Punoljetna osoba</label>
</div>
…

Obrada checkbox polja je jednostavna.

76 Obrasci
JavaScript kod koji treba dodati u funkciju provjeri():

/* Obrada checkbox polja */

iIzbor=document.getElementById('dob').checked;
if(iIzbor === false) {
sPoruka += '\nOsoba nije punoljetna';
} else {
sPoruka +='\nOsoba je punoljetna';
}
77 Obrasci
Dodavanje i obrada select elementa u obrascu
Kada je potrebno navesti veći broj mogućnosti na obrascu, najbolji izbor je
korištenje select elementa.
Za potrebe našeg primjera u obrazac će biti dodano jedno select polje za izbor
države.
78 Obrasci
HTML:
…
<div>
<label for="drzava"> Država:</label><br>
<select name="drzava" id="drzava">
<option value="bih">Bosna i Hercegovina</option>
<option value="rh">Hrvatska</option>
<option value="slo">Slovenija</option>
<option value="aut">Austrija</option>
<option value="ger">Njemačka</option>
</select>
</div>
…
79 Obrasci
JavaScript kod koji treba dodati u funkciju provjeri():

/* Obrada select polja */

iStavka=document.getElementById('drzava').selectedIndex;
sPoruka += '\nDržava: ';
sPoruka+=document.getElementById('drzava').options[iStavka].text;
80 Objekti JavaScript-a
UVOD U JAVASCRIPT OBJEKTE
JavaScript je jezik temeljen na objektima i njihovoj primjeni. Gotovo sve
mogućnosti JavaScript –a su, u većoj ili manjoj mjeri, implementirane
primjenom objekata.
Objekt je, u osnovi, kombinacija varijabli i funkcija, pri čemu se varijable
(promjenljive) koje pripadaju objektu nazivaju svojstva (engl. properties), a
funkcije objekta nazivaju se metode (engl. methods).
Objekti JavaScript –a se mogu podijeliti na sljedeći način:
1. Objekti ugrađeni u JavaScript – olakšavaju rad s različitim tipovima
podataka (String, Date, Math, Array...)
2. Dokument objekti – objekti Document Object Modela (DOM)
omogućavaju manipuliranje nad CSS –om i HTML elementima;
3. Objekti web preglednika – pružaju raznovrsne informacije o pregledniku,
postavkama ekrana, povijesti pretraživanja i sl.;
4. Korisnički objekti – objekti koje definira sam programer.
81 Objekti JavaScript-a
Nekoliko je načina na koji se mogu kreirati objekti u JavaScript -u. Mi ćemo
ovdje pomenuti dva osnovna načina:
1. pomoću literala tipa objekta
2. kreiranjem nove instance tipa Object
1. Način (objektni literal):
Literal tipa objekt (inicijalizator objekta) sastoji se od liste parova
svojstvo/vriednost, razdvojenih znakom " : ". Parovi se međusobno razdvajaju
zarezima, a lista se navodi unutar para vitičastih zagrada.
var tocka = {x:0, y:0}; ili
var osoba = {
ime: "Marko",
prezime: "Marković",
god_rod: 2010,
zvanje: "web dizajner"
};
82 Objekti JavaScript-a
2. Način (korištenjem konstruktora Object):
Funkcija koja se koristi sa operatorom new naziva konstruktor. Konstruktor
ima zadatak da inicijalizira novi objekt, zadajući vrijednosti svojstvima za koje
je to neophodno prije nego što se objekt upotrijebi.

var osoba2 = new Object();

osoba2.ime = "Marko";
osoba2.prezime = "Marković";
osoba2.godinaRod = "2010.";
osoba2.zvanje = "programer";

Zadatak: Kreirati objekt tocka sa svojstvima x i y, kojima dodijeliti vrijednosti.

83 Objekti JavaScript-a
Objekt je skup imenovanih vrijednosti, koje nazivamo svojstvima. Svojstvima
objekta se pristupa navođenjem:
nazivObjekta.nazivSvojstva
Vrijednost svojstva može biti i funkcija. Za ilustraciju u definiciju objekta
osoba dodat ćemo sljedeće svojstvo:
var osoba = {
ime: "Marko",
prezime: "Marković",
god_rod: 2010,
zvanje: "web dizajner",
iGodina: function(god_rod) {
this.starost=2020-this.god_rod;
}
};
osoba.iGodina();
84 Objekti JavaScript-a
Vrijednost novog svojstva osoba.starost, kreiranog unutar funkcije, ispisat
ćemo na ekran pomoću sljedećeg koda:
document.write('Starost: ' + osoba.starost + ' godina
<br><br>');
Svojstvo objekta se može primijeniti tako da se svojstvu dodijeli nova
vrijednost, primjerice:
osoba2.ime="Luka";
Za pristupanje svojstvima objekta može se koristiti i operator [ ].
Sljedeća dva izraza daju identičan rezultat:
osoba2.prezime="Lukić";
osoba2["prezime"]="Lukić";
85 Objekti JavaScript-a
Metoda objekta je funkcija pridružena tom objektu.
Metoda se definira na isti način kao i funkcija, a pridružuje se objektu na
sljedeći način:
imeObjekta.imeMetode = imeFunkcije;
Metoda pridružena objektu se poziva ovako:
imeObjekta.imeMetode(parametri);

Primjer:
osoba2.punoime = spoji; //definiranje metode punoime
// definiranje funkcije
function spoji(ime, prezime) {
return this.ime + ' ' + this.prezime;}
// poziv metode
document.write(osoba2.punoime(this.ime, this.prezime));
…
86 Objekti JavaScript-a
Objekti ugrađeni u JavaScript

Objekt String
Objekt String osigurava svojstva i metode za manipuliranje nizovima znakova
(stringovima).
Konstruktor String() ima opcioni argument kojim se inicijalizira objekt:
var str = new String("Pozdrav web dizajneri!");
Ukoliko se izostavi ovaj argument, konstruktor inicijalizira prazan string:
var str2 = new String();
U praksi se rijetko koristi navedeni način kreiranja String objekta, jer se sva
svojstva i metode objekta String mogu pozvati preko stringova kao osnovnih
tipova podataka.
87 Objekti JavaScript-a
var str3 = "string je standardni tip podataka u JS";

Najčešće korištena svojstva i metode String objekta

Svojstvo length
Ovo svojstvo vraća kao rezultat dužinu stringa, odnosno broj znakova u
stringu.
var s1 = str.length;
var s2 = str2.length;
var s3 = str3.length;
Svojstvo length se automatski ažurira kada se promijeni string i ne može biti
direktno izmijenjeno od strane programera.
88 Objekti JavaScript-a
Metoda toUpperCase()
Mijenja mala slova u velika, na primjer:
str3 = str3.toUpperCase();

Metoda charAt()
Omogućava pristup pojedinačnim karakterima u stringu. Prihvaća cjelobrojni
argument koji određuje poziciju znaka koji će biti vraćen kao rezultat. Pozicija
prvog člana je 0, drugog 1 …
var zn = str3.charAt(5); // vratit će 6. znak u stringu str3

Metoda indexOf
Pronalazi prvo pojavljivanje podstringa (substring) i vraća njegov indeks. Ako ne
pronađe podstring kao rezultat vraća -1.
var pp = str3.indexOf("TIP"); // vratit će 21
89 Objekti JavaScript-a
Metoda substring()
Omogućava izdvajanje niza znakova koji se nalaze između zadanog početnog i
krajnjeg indeksa pozicije.
var pStr = str3.substring(0, 10);
Ako se navede samo jedan argument, onda metoda vraća niz znakova koji se
nalazie od zadane pozicije do kraja stringa.
var p1Str = str.substring(11);

Metoda charCodeAt(index)
Vraća kôd karaktera (Unicode) koji se nalazi na zadanoj poziciji.
var n=str3.charCodeAt(0); // vraća kod prvog znaka stringa
90 Objekti JavaScript-a
Metoda fromCharCode(code)
Vraća znak (karakter) čiji je kod naveden kao argument.
var zn = String.fromCharCode(83); // vratit će znak S

Metoda charCodeAt(index)
Vraća kôd karaktera (Unicode) koji se nalazi na zadanoj poziciji.
var n=str3.charCodeAt(0); // vraća kod prvog znaka stringa

Metoda concat(string)
Spaja string sa drugim stringom.
var str4='2.d ';
var str5='web dizajneri';
document.write(str4.concat(str5)); //ispisat će: 2.d web
dizajneri
91 Objekti JavaScript-a
Metoda replace(str1, str2)
Omogućava zamjenu prvog podstringa (str1) drugim (str2) u nekom nizu znakova.
var str6 = 'Programiranje u jeziku JavaScript';
var str7 = str6.replace('JavaScript', 'C++'); // zamijenit će
JavaScript sa C++

Zadatak za vježbu:
Definirati dva String objekta str1 i str2. Stringu str1 pridružiti vrijednost "Pero Perić", a
stringu str2 vrijednost "najbolji učenik 2.d razreda".
a) Ispisati stringove i njihove dužine (broj znakova);
b) Sadržaj stringa str1 pretvoriti u velika slova;
c) Iz stringa str1 izdvojiti samo prezime i spremiti ga u novi string str3;
d) Ispisati Unicode kod zadnjeg znaka u stringu str2;
e) Spojiti stringove str1 i str2 i ispisati sadržaj;
f) U stringu str2 tekst "najbolji" zamijeniti sa "najgori"
92 Objekti JavaScript-a
Objekt
  Math
Sadrži svojstva i metode za rad sa složenijim matematičkim operacijama i
izrazima.
Ne sadrži konstruktor, svim svojstvima i metodama pristupa se izravno pozivom
objekta Math.
Matematičke konstante kao svojstva objekta Math():
 Math.E – baza prirodnog logaritma (Napierov ili Eulerov broj) e≈2,71828
 Math.LN2 – prirodni logaritam od 2, ≈ 0,693
 Math.LN10 – prirodni logaritam od 10, ≈ 2,302
 Math.LOG2E – logaritam od e po bazi 2, ≈ 1,442
 Math.LOG10E – logaritam od e po bazi 10, ≈ 0,434
 Math.PI – Ludolfov broj (), ≈ 3,14159
 Math.SQRT1_2 – kvadratni korijen broja ½, , ≈ 0,707
 Math.SQRT2 – kvadratni korijen broja 2, , ≈ 1,414
93 Objekti JavaScript-a
Zadatak za vježbu:
Izraditi skriptu kojom će se ispisati vrijednosti matematičkih konstanti pomoću
navedenih svojstava Math objekta. Izgled stranice s ispisom:
94 Objekti JavaScript-a
Rješenje:

<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Objekt Math</title>
</head>
<body>
<script>
document.write('<h2>Math objekt</h2>');
document.write('<h3>Svojstva Math objekta</h3>');
document.write('Baza prirodnog logaritma e = ' + Math.E + '<br>');
document.write('Prirodni logaritam broja 2 = ' + Math.LN2 + '<br>');
document.write('Prirodni logaritam broja 10 = ' + Math.LN10 + '<br>');
document.write('Logaritam od e po bazi 2 = ' + Math.LOG2E + '<br>');
document.write('Logaritam od e po bazi 10 = ' + Math.LOG10E + '<br>');
document.write('PI (Ludolfov broj) = ' + Math.PI + '<br>');
document.write('Kvadratni korijen broja 1/2 = ' + Math.SQRT1_2 + '<br>');
document.write('Kvadratni korijen broja 2 = ' + Math.SQRT2 + '<br>');
</script>
</body>
</html>
95 Objekti JavaScript-a
Objekt Math podržava brojne matematičke funkcije preko svojih metoda:
 Math.abs(x) – izračunava apsolutnu vrijednost broja
 Math.sin(x), Math.cos(), Math.tan() – trigonometrijske
funkcije sinus, kosinus, tangens (vrijednost parametra je u radijanima)
 Math.asin(x), Math.acos(), Math.atan() – inverzne
trigonometrijske funkcije arkus sinus, arkus kosinus, arkus tangens (rezultat
funkcije je izražen u radijanima)
 Math.exp(n) – vraća en, gdje je n argument funkcije
 Math.log(x) – vraća prirodni logaritam broja – ln(x)
 Math.ceil(x) – zaokružuje broj na najbliži veći cijeli broj
 Math.floor(x) – zaokružuje broj na najbliži manji cijeli broj
 Math.round(x) – zaokružuje broj na najbližu cjelobrojnu vrijednost
96 Objekti JavaScript-a
 Math.trunc(x) – vraća samo cijeli dio realnog broja, "odsijeca" decimalni
dio
 Math.max() – vraća najveći broj od više unesenih brojeva
 Math.min() – vraća najmanji broj od više unesenih brojeva
 Math.random() – generira pseudo slučajan broj iz intervala 0 – 1 (ne
uključuje 1)
 Math.sqrt(x) – funkcija vraća kvadratni broj broja
 Math.pow(x,y) – stupnjevanje, npr: Math.pow(10, 3) = 103 = 1000
97 Objekti JavaScript-a
Zadatak
  za vježbu:
Izraditi skriptu kojom se omogućava unos 3 decimalna broja i obavlja sljedeće:
a) zaokružiti prvi broj na najbliži veći cijeli broj,
b) zaokružiti drugi broj na najbliži manji cijeli broj,
c) zaokružiti treći broj sukladno pravilima zaokruživanja,
d) ispisati najmanji od 3 unesena broja,
e) ispisati najveći od 3 unesena broja,
d) izračunati i ispisati rezultat izračunavanja prema sljedećem izrazu
98 Objekti JavaScript-a
Projektni zadatak:
Izraditi web aplikaciju za igru pogađanja brojeva (.html, .css i .js
datoteke).
Kratke upute:
Stvoriti skriptu koja omogućava generiranje pseudo slučajnog broja iz intervala
[0 - 10] i koja omogućava korisniku da unosi brojeve dok ne pogodi generirani
broj.
Na ekranu ispisati i iz koliko je pokušaja korisnik pogodio broj.
99 Objekti JavaScript-a
Object Date()
Objekt tipa Date() koristi se za rad sa datumom i vremenom na klijentskoj
strani.
Date() objekt vraća datum i vrijeme sa lokalnog računala, a ne sa poslužitelja.
Ne podržava datume prije 1.1.1970. godine.
Objekt tipa Date u JS –u se pravi pomoću operatora new i konstruktora
Date().
Instance objekta Date() se mogu kreirati na sljedeće načine:
new Date(); // kreira objekt koji sadrži tekući datum i
vrijeme
new Date(ms); // argument ms (milisekunde) predstavlja
broj milisekundi od 1.1.1970. 00:00:00
new Date(date_data); // argument u zagradi je datum u
odgovarajućem formatu
100 Objekti JavaScript-a
Metode objekta Date()
 getDate() – vraća dan (1 – 31) u mjesecu za trenutni Date objekt;
 getDay() - vraća dan u tjednu za trenutni Date objekat kao cijeli broj od 0
(nedelja) do 6 (subota);
 getHours() – vraća sat (0 – 24) iz vremena za trenutni Date objekt;
 getMinutes() – vraća minute (0 – 59) iz vremena za Date objekt;
 getSeconds() - vraća sekunde (0 – 59) iz vremena;
 getMonth() – vraća broj mjeseca (0 – 11) iz datuma;
 getYear() – vraća godinu iz datuma kao cijeli broj (godina – 1900).
 getFullYear() – vraća godinu iz datuma;
 getTime() – vraća broj milisekundi od 1.1.1970. 00:00:00;
101 Objekti JavaScript-a
 setDate(dan) - postavlja dan u mjesecu, dan je cijeli broj između 1 i 31;
 setMinutes(min) - postavlja minute u vremenu Date objekta, vrijednosti od
0 - 59;
 setHours(sat) – postavlja sat u Date objekt, vrijednosti od 0 – 11;
 setMonth(mjesec) - postavlja mjesec za Date objekt, vrijednosti od 0 do 11;
 setYear(godina) – postavlja godinu, godina>1900;
 setFullYear(godina) – postavlja godinu u Date objekt, vrijednosti od 1000 –
9999. Koristi se i za postavljanja dana i mjeseca, npr.
Date.SetFullYear(2020, 3, 28);
 toGMTString() – vraća vrijednost Date objekta kao string formata:
naziv_dana, d.d. mjesec godina sat:minut:sek GMT
102 Objekti JavaScript-a
Primjeri za vježbu:
1) Ispisati u pregledniku datum i trenutno vrijeme.
2) Stvoriti novu instancu objekta Date() sa sljedećim argumentom: March 28,
2020 10:22:30. Izdvojiti i ispisati dan, mjesec i godinu iz datuma, te sate,
minute i sekunde iz vremena.
3) Kreirati instancu Date objekta sa datumom tvog rođenja i instancu Date
objekta koja sadržava trenutni datum. Izdvoji i ispiši svoju godinu rođenja i
aktualnu godinu, a zatim izračunaj i ispiši koliko imaš godina.
103 Objekti JavaScript-a
Projektni zadatak
Izraditi skriptu za prikaz sata sa točnim vremenom na proizvoljnom dijelu
web stranice. Vrijeme se ažurira svake sekunde.
U izradi zadatka je potrebno koristiti metod setTimeout(funkcija,
broj_milisekundi) HTML DOM Window objekta, koja izvršava funkciju
nakon zadanog broja milisekundi.
104 Objekti JavaScript-a
Object Array()
Array() objekt se koristi za pohranjivanje skupa vrijednosti u jednoj varijabli.
Novi niz se kreira pomoću ključne riječi new i konstruktora Array().
(Konstruktor je specijalni tip funkcije koja se koristi za kreiranje instance
objekta (varijable) i vraća referencu na kreiranu instancu.)
Svaka vrijednost je element niza i ima svoj redni broj – indeks.
Pojedinom elementu se pristupa koristeći naziv niza i odgovarajući indeks, koji
se navodi unutar srednjih zagrada.
Indeks prvog elementa niza je 0, a zadnjeg (n-1), gdje je n broj elemenata niza,
105 Objekti JavaScript-a

Primjer:
var vozilo = new Array(); // definiranje niza
vozilo[0] = "Audi"; // dodavanje prvog elementa u niz
vozilo[1] = "Ford";
vozilo[2] = "VW";

// ispis svih elemenata niza

for (var i=0; i<vozilo.length; i++) {
document.write(vozilo[i] + '<br>');
}

Svojstvo length vraća broj elemenata niza. U našem primjeru

vozilo.length = 3.
Jedan od načina „pražnjenja” niza je postavljanje vrijednost svojstva length
na 0.
106 Objekti JavaScript-a

Veličina (dimenzija) niza se može dinamički mijenjati.

Primjer:
var vozilo = new Array(3); // definiran je niz od 3 elem.
vozilo[0] = "Audi";
vozilo[1] = "Ford";
vozilo[2] = "VW";
vozilo[3] = "Mercedes"; // niz se dinamički proširuje

vozilo[1] = "Fiat"; // promjena 2. elementa

// ispis svih elemenata niza

for (var i=0; i<vozilo.length; i++) {
document.write(vozilo[i] + '<br>');
}
107 Objekti JavaScript-a

Metode Array() objekta

- sort()

Uređuje (sortira) elemente niza u izvornom nizu i vraća tako sortiran niz. Kada
se pozove bez argumenata elemente uređuje po abecednom redu.

document.write(vozilo + '<br>');
document.write(vozilo.sort()); // ispisuje sortiran niz po
abecedi

Da bi se niz sortirao po numeričkom redoslijedu, metodi sort() se mora

proslijediti neka funkcija za poređenje kao argument.

function sortNumber(a,b){
return a-b;
} //vraca vrednost <0, 0 ili >0
108 Objekti JavaScript-a

Primjer - Abecedno i numeričko sortiranje:

function sortNumber(a,b){
return a-b;
}

var brojevi= new Array(3,44,11,222);

document.write('Abecedno sortiranje: ');
document.write(brojevi.sort() + '<br />');
document.write('Numeričko sortirane: ');
document.write(brojevi.sort(sortNumber));
109 Objekti JavaScript-a

- reverse()

Ova metoda vraća niz sa obrnutim rasporedom elemenata, Naime, element a[0]
postaje a[n], a[1] postaje [n-1] …

Primjer:
var imena = new Array('Pero', 'Marko', 'Adi', 'Jana',
'Sara', 'Tamara', 'Leo', 'Adna', 'Fabs');
document.write(imena.sort() + '<br>'); // sortirani niz
document.write(imena.reverse()); // niz u obrnutom
redoslijedu
110 Objekti JavaScript-a

- join()

Metoda join() pretvara elemente niza u znakovne nizove (stringove).

Primjer:
var br=[1, 2, 3, 4];
var str=br.join(); // izlaz: 1,2,3,4
document.write(str + '<br>');
var ucenici=imena.join(" *** "); // separator ***
document.write(ucenici);
111 Objekti JavaScript-a

- slice()

Vraća podniz ili isječak originalnog niza . Metoda može imati jedan ili dva
argumenta.

Primjer:
var num=[1, 2, 3, 4, 5, 6, 7];
document.write(num + '<br>');
document.write(num.slice(0, 2) + '<br>');
document.write(num.slice(4) + '<br>');
document.write(num.slice(1,7) + '<br>');

Uradi primjer.
Što si zaključio/zaključila?
112 Objekti JavaScript-a

- push()

Dodaje jedan ili više elemenata na kraj niza i vraća novu dužinu niza.

- pop()

Briše posljednji element niza i skraćuje niz za jedan.

Voditi računa da obje metode mijenjaju izvorni niz, ne prave promijenjenu kopiju niza

Primjer:
num.push(8,9,10); // dodaje nove elemente na kraj niza
document.write(num + '<br>');
num.pop(); // uklanja posljednji element niza
document.write(num + '<br>');
num.pop();
document.write(num + '<br>');
113 Objekti JavaScript-a

- toString()

Vraća string u kome su elementi niza odvojeni zarezom.

Primjer:
var s = num.toString();
document.write(s + '<br>');
document.write(imena.toString() + ' su učenici II.d. <br>');
s=[num[0], num[2], num[4]].toString();
document.write(s);
114
Zadatci za vježbu (Nizovi)

1. Napisati funkciju koja vraća podniz koji se sastoji od prvih n elemenata

zadanog niza.

2. Napisati JS program koji izračunava i ispisuje sumu i umnožak unaprijed

zadanog niza brojeva te ispisuje sortirani niz (od najmanjeg ka najvećem
broju).

3. Napisati JS program za dodavanje članova niza putem tekstualnog polja i

njihov ispis.
115 Rješenja
1. zadatak
…
<h3>Zadatak 1: PODNIZ</h3>
<p id="1"></p>
<script>
var podniz = function(niz, n) {
if (n == null)
return niz[0];
if (n < 0)
return [];
return niz.slice(0, n);
};
moj_niz=[1,2,3,4,5,6,7]
var br=prompt('Unesi broj prvih članova niza koje želiš ispisati');
var rez = 'Članovi podniza su: ' + podniz(moj_niz,br);
var str = moj_niz.toString();
document.getElementById("1").innerHTML = 'Moj niz: ' + str + '<br>';
document.getElementById("1").innerHTML += rez;
</script>
…
116 Rješenja
2. zadatak
…
<h3> Zadatak 2: SUMA I UMNOŽAK NIZA</h3>
<p id="2"></p>
<script>
var brojevi = [1, 5, 1, 3, 4, 5, 2],
suma = 0, umn = 1, i;
for (i = 0; i < brojevi.length; i++) {
suma += brojevi[i];
umn *= brojevi[i];
}
function sortNumber(a,b) {return a-b;}
var str2 = brojevi.toString();
document.getElementById('2').innerHTML = 'Niz: ' + str2 + '<br>';
document.getElementById('2').innerHTML += 'Suma niza: ' +suma + '<br>';
document.getElementById('2').innerHTML += 'Umnožak niza: ' + umn + '<br>';
document.getElementById('2').innerHTML += 'Sortirani niz: ' +
brojevi.sort(sortNumber);
</script>
…
117 Rješenja
3. zadatak
…
<h3> Zadatak 3: Dodavanje i ispis članova numeričkog niza</h3>
<input type="number" id="broj"></input>
<button type="button" id="bt1" onclick="dodaj_u_niz();">Dodaj u niz</button>
<button type="button" id="bt2" onclick="prikazi_niz();">Prikaži</button>
<p id="3"></p>
<script>
var x = 0;
var niz3 = Array();
function dodaj_u_niz() {
niz3[x] = document.getElementById("broj").value;
alert("Element: " + niz3[x] + " dodan na poziciju " + x);
x++;
document.getElementById("broj").value = "";
}
function prikazi_niz() {
var e = "<hr/>";
for (var y=0; y<niz3.length; y++) {
e += "Element " + y + " = " + niz3[y] + "<br/>";
}
document.getElementById("3").innerHTML = e;
}
</script>
…
118 Događaji (Events)

Događaji i programiranje zasnovano na događajima

Jedan od temeljnih stupova na kojima se gradi interaktivnost između korisnika i

web sadržaja je mogućnost rada sa događajima (engl. events).

Događaji su akcije ili pojave koje je sustav u stanju registrirati kako bi se

omogućilo definiranje načina reagiranja na njih. Web preglednik detektira veliki
broj akcija korisnika i stanja elemenata na web strani što programerima pruža
mogućnost realiziranja koda koji će se izvršiti u određenom specifičnom trenutku
(npr. nakon klika mišem, pri prelasku mišem preko nekog HTML elementa,
prilikom učitavanja web strane, pri pritisku na neku tipku na tipkovnici …)
119 Događaji (Events)

Programiranje zasnovano na događajima (engl. event driven programming) je

praktično obvezan pristup prilkom izrade aplikacija sa grafičkim korisničkim
sučeljem.

Programiranje zasnovano na događajima podrazumijeva pisanje funkcija obrade

događaja (engl. event handlers) koje se izvršavaju kao reakcija na određeni
događaj, kojih ima jako mnogo.

Kompletan popis događaja možete pogledati na sljedećoj web lokaciji:

https://www.w3schools.com/jsref/dom_obj_event.asp
120 Događaji (Events)

Registriranje događaja podrazumijeva vezivanje osluškivača događaja (engl. event

listener) za HTML element i definiranje posljedica tog događaja.

Osluškivač događaja nakon izvršenog (registriranog) događaja poziva obrađivače

događaja (engl. event handlers).

Event handler je funkcija koja se aktivira kao posljedica nekog događaja.

121 Događaji (Events)

Implementiranje događaja

Događaji se mogu primijeniti na nekoliko različitih načina, iako je efekt

djelovanja gotovo identičan.

1. Preko HTML atributa (Inline event handler)

Sintaksom HTML jezika je predviđena upotreba specifičnih atributa, kod

pojedinih tagova, koji počinju sa „on”, primjerice: onClick, onFocus …

Kako je riječ o atributima HTML -a, koristi se standardna sintaksa za

kreiranje HTML atributa, pri čemu je sadržaj atributa JavaScript kod. Obim koda
koji se može definirati kao vrijednost atributa nije ograničen
122 Događaji (Events)

Primjer A – Otvaranje alert okvira nakon klika na dugme:

<div id="primjer1">
<button type="button" onclick = "alert('Kliknuli ste na
dugme');">Ovo je dugme kojim upravlja JS kod!" </button>
</div>
123 Događaji (Events)

Primjer B – Promjena svojstava odlomka nakon klika na njega:

<script>
function oboji(element) {
element.style.color = "yellow";
element.style.textAlign = "center";
element.style.fontSize = "2rem";
element.style.backgroundColor = "black";
}
</script>

<div id="primjer2">
<p>Ovo je tekst prvog oglednog odlomka.</p>
<p onClick="oboji(this)"> Ovo je tekst drugog oglednog odlomka
kojem možeš promijeniti boju, način poravnavanja, veličinu znakova
i boju pozadine ukoliko dovedeš pokazivač miša iznad njega.</p>
</div>
124 Događaji (Events)

Ovaj način najmanje je preporučljiv, iako je najjednostavniji za početnike.

Danas se smatra lošom praksom iz više razloga:

 Ne odvaja se JS kod od HTML –a;

 Sprječava dodavanje većeg broja event handlera po istom događaju;

 Nije praktično kada treba primijeniti određeni događaj na više istih vrsta
HTML tagova (potrebno je upisivanje koda u svaki tag);

 Otežano održavanje …
125 Događaji (Events)

Preporučuje se, naročito kada je riječ o većoj količini koda, da se on ne piše unutar
HTML –a, nego u okviru eksterne JS datoteke u formi funkcija.

2. Implementiranje događaja unutar JavaScript –a

Danas češća i preporučena forma integracije događaja je kroz JavaScript. Takva

integracija se može obaviti na više načina:
 primjenom svojstva objekta,
 primjenom metode addEventListener()
 primjenom metode attachEvent() – neće biti obrađeno jer ovaj način ne
podržavaju svi relevantni preglednici.
126 Događaji (Events)

2.1. Integracija primjenom svojstva

objekt.događaj = funkcija_obrade;

Funkcija obrade (event handler) može biti dana kao referenca na već postojeću
funkciju, koju, u općem slučaju, pozivamo sa:

objekt.događaj = funkcija;

A može biti i tu deklarirana anonimna ili imenovana funkcija:

objekt.događaj = funkcija () { … }; // anonimna funkcija

objekt.događaj = funkcija ime_funkc() { … };// imenovana f.

127 Događaji (Events)

Anonimna funkcija nema ime jer se nigdje u kodu eksplicitno ne poziva, nego se tijelo
takve funkcije podrazumijevano izvršava u liniji koda u kojoj se događaj realizira.

Uklanjanje event handlera podrazumijeva jednostavno ukidanje reference na sljedeći

način:

objekt.događaj = none;

Da bi se event handler povezao sa konkretnim objektom (elementom) on se mora

dohvatiti ili selektirati (primjerice pomoću metoda getElementById() objekta
document).

document.getElementById("element").onclick = function () {
…
}
128 Događaji (Events)
Uradi i analiziraj sljedeći primjer:
…
<head>
<link rel="stylesheet" type="text/css" href="events2.css">
<script type="text/javascript" src="events2.js"></script>
</head>
<body>
<h1>Direktno referenciranje događaja</h1>
<div id="prvi">
Ovo je PRVI DIV. Pomjerite pokazivač miša u njegovo područje kako
biste mu promijenili svojstva.
</div>
<div id="drugi">
Ovo je DRUGI DIV. Kliknite ovdje kako biste mu promijenili
svojstva.
</div>
</body>
</html>
129 Događaji (Events)
events.css
events2.js
div {
function boja() { border: 1px solid black;
this.style.color = "yellow"; padding: 10px;
this.style.backgroundColor = "black"; font-size: 1.5rem;
} margin: 20px 0px;
max-width:50%;
}
function obrisi() {
this.style.color = "black";
this.style.backgroundColor = "white";
}

window.onload = function() {
document.getElementById("prvi").onmouseover = boja;
document.getElementById("drugi").onclick = boja;
// dvostrukim klikom unutar div elemenata „uklanjamo” boje
document.getElementById("prvi").ondblclick = obrisi;
document.getElementById("drugi").ondblclick = obrisi;
}
130 Događaji (Events)

2.2. Integracija primjenom metoda addEventListener()

Trenutno najkorišteniji način je upotreba metode addEventListener(), čiji

prvi argument ukazuje na događaj (piše se bez prefiksa „on”) a drugi ukazuje na
radnju, odnosno funkciju brade koju treba izvršiti.

objekt.addEventListener("događaj", funkcija);

Uklanjanje dodijeljene funkcije obrade obavlja se pomoću metode

removeEventListener().

objekt.removeEventListener("događaj", funkcija);
131 Događaji (Events)

Primjena ovog načina bit će bit će ilustrirana kroz realiziranje prethodno

obrađenog primjera.

Sve što treba napraviti je zamijeniti dio postojećeg koda u javascript datoteci sa
sljedećim:

// zamijeniti kod koji počinje sa window.onload

window.addEventListener("load", function() {
document.getElementById("prvi").addEventListener("mouseover", boja);
document.getElementById("drugi").addEventListener("click", boja);
document.getElementById("prvi").addEventListener("dblclick", obrisi);
document.getElementById("drugi").addEventListener("dblclick", obrisi);
});
132 Događaji (Events)
Neki od najčešće korištenih događaja
Događaji miša
click lijevi klik
dblclick dvoklik
mousemove pomjeranje miša
mouseover pokazivač iznad elementa
mouseout pokazivač je izvan elementa
mousedown pritisak lijeve tipke
mouseup otpuštanje lijeve tipke

Događaji tipkovnice
keydown tipka pritisnuta
keyup tipka otpuštena
keypress tipka pritisnuta i otpuštena
133 Događaji (Events)

Događaji forme
focus ulazak u polje forme
blur napuštanje polja forme
input unos u polje
change napuštanje polja nakon promjene sadržaja
submit slanje podataka iz forme
reset resetiranje forme

Događaji prozora
load učitavanje elemenata je završeno
error korisnik napušta stranicu
resize promijenjena veličina prozora
134
Zadatci za vježbu
1. Realiziraj zamjenu postojeće slike drugom slikom prilikom prelaska miša
preko nje. Događaj implementirati pomoću HTML atributa.

2. Realiziraj prikaz teksta ("Unesi ime i prezime!") i promjenu pozadinske boje

tekstualnog polja, klikom unutar polja, i vraćanje na početno stanje izlaskom
iz polja. Primjenu događaja focus i blur realizirati metodom
addEventListener( ).

3. Prilikom svakog klika na dugme mijenja se boja pozadine prozora. Boja

pozadine se generira pseudo-slučanjno. (Za generiranje boje koristiti
Math.random().)
135
Rješenja

1. zadatak
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Događaji: Zadatak1</title>
</head>
<body>
<img src="slika1.png" onmouseover="promijeni('slika2');"
onmouseout="promijeni('slika1');" id="slikaSite"/>
<script>
function promijeni(slika){
document.getElementById("slikaSite").src= slika + ".png";
}
</script>
</body>
</html>
136
Rješenja
2. zadatak
body>
<div id="okvir">
<p>Klikni unutar polja za unos kako bi se promijenila boja polja i tekst koji opisuje
što treba unijeti<br/>
Klikom van polja stanje se vraća na početno.</p>
<form action="#">
<input type="text" id="primjer" />
<span id="opis"></span>
</form>
</div>
<script>
document.getElementById("primjer").addEventListener("focus", function() {
document.getElementById("primjer").style.backgroundColor = "yellow";
document.getElementById("opis").textContent = "Unesi ime i prezime!";
});

document.getElementById("primjer").addEventListener("blur", function() {
document.getElementById("primjer").style.backgroundColor = "white";
document.getElementById("opis").textContent = "";
});
</script>
</body>
137
Rješenja
3. zadatak
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="utf-8">
<title>Događaji: Zadatak3</title>
<script type="text/javascript" src="zadatak3.js"></script>
</head>
<body>
<button>Promijeni boju!</button>
</body>
</html>

zadatak3.js
function rnd(br) {
return Math.floor(Math.random() * br);
}
function bgChange() {
rndBoja = 'rgb(' + rnd(255) + ',' + rnd(255) + ',' + rnd(255) + ')';
document.body.style.backgroundColor = rndBoja;
}
window.addEventListener("load", function() {
document.querySelector("button").addEventListener('click', bgChange);
});