JavaScript SVE

PROJEKTOVANJE U OBLASTI INTERNET PROGRAMIRANJA
Java Script
Šta ćete naučiti
• Postavljanje skripta sa JavaScript kodom
• Prikaz podataka “preko” JavaScripta
• JavaScript tipovi podataka
• JavaScript objekti
• Rezervisane reči
• Operatori
• Funkcije
• Petlje – ciklusi
• Break i continue rezervisane reči
• Labele
Šta ćete naučiti
• DOM
• Reference objekata u JavaScriptu
• Svojstva i metode objekata
• Događaji u JavaScript-u
• Nizovi
JavaScript
• JavaScript je skript jezik kojim Web dizajneri mogu da automatizuju postupke
unutar Web stranice
• Skript jezik - jer omogućava pisanje skripta (niza naredbi) koje će Web čitač izvršiti
• Ne koristi se za pravljenje spoljnog programa koji se izvršava nezavisno od čitača
• JavaScript se ugrađuje u HTML Web stranice – nije potreban poseban alat; može
se koristiti isti program za uređenje teksta koji se koristi za izradu Web stranice
• Najpopularniji čitači Weba imaju ugrađenu podršku za JavaScript – posetioci
lokacije ne moraju instalirati dodatne programe na svoje računare
• JavaScript iskazi postavljaju se između oznaka <script> i </script>, koje će ukazati
čitaču Weba da izvrši JavaScript iskaze umesto da prikaže tekst na ekranu
5
JavaScript
• JavaScript može menjati HTML sadržaj
• Jedna od velikog broja JavaScript HTML metoda je getElementById().
• Sledeći primer koristi ovaj metod da nađe HTML element (sa id="demo") i
promeni sadržaj tog elementa (innerHTML) u "Zdravo JavaScript":
• Primer 1
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML =
'Zdravo JavaScript!'">Klikni na mene!</button>
</body>
</html>
6
JavaScript
• JavaScript može promeniti HTML Styles (CSS)
• Promena stila HTML elementa, predstavlja, zapravo, promenu
HTML atributa:
document.getElementById("demo").style.fontSize = "25px";
• JavaScript može sakriti HTML element ili ga prikazati
document.getElementById("demo").style.display = "none";
document.getElementById("demo").style.display = "block";
7
Pozicije oznaka
Skriptovi u zaglavlju dokumenta Skriptovi u telu dokumenta
<html> <html>
<head> <head>
<title> Dokument</title> <title> Dokument</title>
<script type="text/javascript"> </head>
//naredbe <body>
</script> <script type="text/javascript">
</head> //naredbe
<body> </script>
</body> </body>
</html> </html>
8
Pozicije oznaka
Skriptovi u zaglavlju i telu dokumenta Dva skripta u telu dokumenta
<html> <html>
<head><title> Dokument</title> <head><title> Dokument</title>
<script type="text/javascript"> </head>
//naredbe <body>
</script> <script type="text/javascript">
</head> //naredbe
<body> </script>
<script type="text/javascript"> <more html>
//naredbe <script type="text/javascript">
</script> //naredbe
</body> </script>
</html> </body>
</html>
9
<HEAD> vs <BODY>
• Scripte u head sekciij:
– Izvršavaju se kad se pozovu.
– Kada postavimo skript u head sekciju, osiguraćemo da se skript učita pre nego
ga bilo ko bude koristio.
– Funkcija će se izvršiti samo ako se pozove ili aktivira od strane nekog događaja.
Kad je funkcija u head sekciji, bićemo sigurni da će se učitati funkcija pre nego
što posetilac izazove događaj s kojim je funkcija povezana.
• Scripte u body sekciji:
– Izvršavaju se dok se stranica učitava.
– Postavljanje skripta u body sekciju generiše sadržaj strane.
10
JavaScript
• Novije verzije Java Scripta koriste samo tagove <script> i
</script>
• Moguće je skript smestiti u eksterni fajl sa ekstenzijom .js

• Da bi koristili eksterni skript potrebno je staviti ime fajla u atribut
src taga <script>
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
11
JavaScript
• Eksterni fajl možemo smestiti u tag <body> ili <head>
• Eksterni fajl ne može sadržati <script> tag
• Korišćenje eksternog skripta ima određene prednosti:
– Odvojen je Java Script i HTML
– Čini HTML i JavaScript lakši za čitanje
– JavaScript falovi mogu ubrzati brzinu učitavanja stranice
• Moguće je dodati više eksternih skripti
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
12
Mogućnosti prikaza
• JavaScript može "prikazati" podatke na različite načine:
– Ispisivanje u alert box, korišćenjem window.alert().
– Ispisivanje u HTML dokument pomoću document.write().
– Ispisivanje u HTML element, preko innerHTML.
– Ispisivanje u browser konzolu, preko console.log().
13
Mogućnosti prikaza
window.alert document.write
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h1>My First Web Page</h1> <h1>My First Web Page</h1>
<p>My first paragraph.</p> <p>My first paragraph.</p>
<script> <button onclick="document.write(5 + 6)">
window.alert(5 + 6); Try it</button>
</script>
</body>
</body> </html>
</html>
14
Mogućnosti prikaza
• Za pristup HTML elementu, JavaScript može koristiti
document.getElementById(id) metod.
• id atribut definiše HTML element, dok innerHTML svojstvo definiše
HTML sadržaj:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html> 15
JavaScript
• JavaScript sintaksa predstavlja skup pravila, kojima se konstruišu
JavaScript programi.
• JavaScript statemant predstavljaju instrukcije – naredbe. One su
odvojene i završavaju se sa tačka zarez ;
• JavaScript statement se sastoje od: vrednosti, operatora,
izraza, ključnih reči i komentara.
16
Primer 1.
<html>
<head> <title> Primer izvrsavanja JavaScripta </title> </head>
<body>
<p> Tekst koji se ispisuje pre izvrsavanja iskaza.</p>
<script type="text/javascript"> Naredba

</script>
<p> Tekst koji se ispisuje nakon izvrsavanja iskaza.</p>
</body>
</html>
17
JavaScript
• Iskazi skripta mogu se uokviriti HTML oznakama za komentar
() kako bi se sprečilo da čitači koji ne podržavaju
JavaScript na ekranu prikažu iskaze skripta.
• Čitači koji ne podržavaju JavaScript ignorisaće oznake skripta i
sve što se nalazi između početne i završne oznake komentara.
• Obrnuto, čitači koji podržavaju JavaScript ignorisaće oznake
komentara i izvršiti funkciju skripta.
18
JavaScript tipovi podataka
• JavaScript variable mogu sadržati različite tipove
podataka: brojeve, stringove, objekte...
var length = 16; // Number
var lastName = "Johnson"; // String
var x = {firstName:"John", lastName:"Doe"}; // Object
19
JavaScript tipovi podataka
• String predstavlja niz karaktera, npr. "John Doe".
• Stringovi mogu biti oivičeni jednostrukim ili dvostrukim
navodnicima:
var answer = "It's alright"; // Single quote inside double quotes
var answer = "He is called 'Johnny'";// Single quotes inside double
quotes
var answer = 'He is called "Johnny"';// Double quotes inside single
quotes
• JavaScript ima samo jedan tip brojeva, brojevi sa ili bez decimala
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
• Java Script boolean može imati dve vrednosti
var x = true; 20
JavaScript objekti
• JavaScript objekti se pišu u vitičastim zagradama.
• Svojstva objekata se pišu u vidu para name:value, odvojenih
zarezima.
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
21
JavaScript objekti
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html> 22
typeof operator
• typeof "John" // Returns "string"
typeof 3.14 // Returns "number"
typeof true // Returns "boolean"
typeof false // Returns "boolean„
• typeof [1,2,3,4] // Returns "object" (not "array ")
typeof {name:'John', age:34} // Returns "object"
typeof function myFunc(){} // Returns "function"
23
Rezervisane reči JavaScripta
• Prilikom imenovanja funkcija ili definicija promenljive za smeštanje informacija dok čitač izvršava
iskaze u funkciji ili skriptu – moraju se izabrati imena funkcija i promenljivih koje nisu u sukobu sa
rezervisanim rečima JavaScripta
abstract continue finally instanceof protected throws

boolean default float int public transient
break delete for interface return true
byte do function long short try
case double goto native static typeof
catch else if new super switch var
char extends implements null synchronized void
class false import package this while
const final in private throw with
24
Deklarisanje promenljivih u JavaScriptu
• U JavaScript iskazima informacije se čuvaju u promenljivama

• Za razliku od većine prgramskih jezika nije potrebno zadati tip
informacije koji se smešta u promenljivu kada se ona deklariše
• JavaScript određuje tip promenljive na osnovu podatka koji se
smešta u promenljivu
• Tip podatka promenljive može se promeniti zavisno od
operacije u kojoj se koristi promenljiva
25
Deklarisanje promenljivih u JavaScriptu
• Sama deklaracija promenljive u skriptu zadaje se imenom

nakon ključne reči var:
var BookTitle, ChapterNumber;
var Publisher;
• Ako se promenljivoj daje početna vrednost iza njenog
imena postavlja se operator dodele (=) i početna vrednost:
var StringValue = 10;
var IntValue = 20;
26
Ograničenja pri deklaraciji promenljivih
• Ime promenljive ne sme se sukobiti sa rezervisanom reči JavaScripta

• Imena promenljivih moraju počinjati slovom ili donjom crtom (_) i
mogu sadržati brojeve ili slova nakon prvog znaka.
• Imena promenljivih ne mogu sadržati znakove za razmak ili
interpunkciju.
• U nazivima i rezervisanim rečima JavaScripta (kao var) treba voditi
računa o veličini slova (eng. Case-sensitive)
– var je rezervisana reč, a Var nije
– Promenljiva stringvalue je različita od StringValue
27
JavaScript operatori
• Operatori dozvoljavaju kombinovanje promenljivih i/ili slovnih vrednosti u
izraze koji daju vrednosti
• Ti izrazi se mogu prikazivati, smeštati u promenljive ili koristiti kao delovi
drugih izraza
• JavaScript operatori mogu se grupisati u nekoliko klasa na osnovu njihove
namene:
– aritmetički operatori – zahtevaju dve promenljive, dve vrednosti ili dva
izraza ( po jedan na svakoj strani operatora)
– unarni JavaScript operatori – odnose se na jedan operand
– operatori poređenja – omogućavaju poređenje jednog izraza, promenljive
ili slovne vrednosti s nekom drugom
– logički operatori – omogućavaju poređenje dve logičke vrednosti
28
Aritmetički operatori
Operator Namena Primer
+ Sabiranje Izraz+izraz
- Oduzimanje Izraz-izraz
* Množenje Izraz*izraz
/ Deljenje Izraz/izraz
Deljenje po modulu (vraća

% ostatak pri deljenju)
Izraz % izraz
29
Unarni JavaScript operatori
++ Povećanje za 1 promenljiva++ ili ++promenljiva
-- Smanjenje za 1 Promenljiva-- ili --promenljiva
- Promena znaka -izraz

! Komplement (operator !izraz
negacije)
• Kada se dvostruki plus (++) ili dvostruki minus (--) stavi ispred promenljive, kao prefiks,
operacija se obavlja pre dodele vrednosti
• Ako se operator postavi kao sufiks, nakon promenljive, operacija se obavlja nakon dodele
vrednosti.
• Na primer:
i = 10;
j = --i; //i=9,. j=9
j = i++; //j=10, i=11 30
Operatori poređenja
< Manje od izraz<izraz
> Veće od izraz>izraz
<= Manje ili jednako izraz<=izraz
>= Veće ili jednako izraz>=izraz
== Jednako izraz==izraz
!= Različito od izraz!=izraz
31
Logički operatori
&& Logičko I Izraz&&izraz

|| Logičko ILI Izraz||izraz
• Logički operatori obično se koriste za poređenje rezultata dva izraza u

uslovnom iskazu ili u upravljačkoj petlji
32
JavaScript funkcije
• Srodne naredbe (iskazi) grupišu se u funkciju
• U okviru Web stranice svaka JavaScript funkcija mora imati
jedinstveno ime
• Definicija počinje ključnom rečju function, zatim sledi ime
funkcije i neobavezni niz parametara (obuhvaćenih zagradama)
• Nakon imena funkcije i neobaveznog niza parametara, između
vitičastih zagrada {} navode se JavaScript iskazi koji izvode
zadatak funkcije
33
JavaScript funkcije
function greetVisitor(){
alert(“Welcome to My Site”);
return;
}
• Iskazi JavaScripta završavaju se tačkom i zarezom (;)
• Na kraju funkcije (pre zatvaranja desne vitičaste zagrade) umeće se
ključna reč return - vraća upravljanje čitača Weba iskazu koji je
pozvao funkciju
• Funkcije je najbolje ugraditi na kraj zaglavlja (neposredno ispred
oznake </head>) - osigurava da će čitač Weba učitati telo funkcije
pre nego što posetilac izazove događaj s kojim je funkcija povezana
34
Primer 3.
<html>
<head> <title> Funkcije JavaScripta </title>
<script type="text/javascript">

</script>
</head>
<body>
<p> Tekst koji se ispisuje pre izvršavanja iskaza JavaScript-a.</p>

</script>
<p> Tekst koji se ispisuje nakon izvršavanja iskaza JavaScript-a.</p>
</body> </html>
35
Prosleđivanje vrednosti u JavaScript funkciju i iz
nje
• Kada se pozove JavaScript funkcija moguće je proslediti vrednosti u funkciju preko
promenljivih koje se zovu parametri
• Niz parametara funkcije nalazi se u zagradama, posle imena u deklaraciji funkcije
• Sledeći kod deklariše funkciju sa tri parametra – first, next i last:
function find_total(first,next,last){
var total = first + next + last;
document.write (“Rezultat je: ” + total + “ . ” );
return;
}
• Tekst i naredbe HTML-a se stavljaju unutar navodnika.
• Naredbom document.write(...) unutar Java Scripta se u dokument ispisuje HTML kod ili korisnički
tekst.
• Java Script i HTML iskazi međusobno se povezuju znakom plus (+).
36
Primer 4a.
<html>
<head> Parametri funkcije
<title> Funkcija zbira </title>

</script>
</head>
<body>

</script>
</body>
</html>
37
Primer 4b.
• Napraviti Web stranu koja prikazuje tri vrednosti i njihov
proizvod, kao što je prikazano na slici.
38
Primer 4b.
<html> <head> <title> Funkcija proizvoda </title>

</script> </head>
<body>

</script>
</body> </html>
39
Predefinisani objekti
• JavaScript poseduje izvestan skup predefinisanih objekata: Date, Array, Math.
• Date objekt omogućava rad sa datumima(godine, meseci, dani, sati, minute,
sekunde i milisekunde)
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>

40
Predefinisani objekti
• Date objekat se kreira konstruktorom new Data()
• Postoji četiri načina za inicjalizaciju Date() objekta
new Date();
new Date(milliseconds);
new Date(dateString);
new Date(year, month, day, hours, minutes, seconds, milliseconds);
• Primer
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html> 41
Primer 5.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var sada = new Date();
var time = sada.getHours();
var minut =sada.getMinutes();
document.write("Vreme je:"+time+":"+minut+"<br />");
if (time > 10) {
document.write("<b>Good day</b>");
}
</script>
</body>
</html>
42
Uslovni iskazi i petlje
• Skriptovi koji donose odluke – obavljaju uslovnu obradu
• Zavisno od rezultata jednog ili više uslova, čitač će izvršiti
određene iskaze
• Da bi doneli odluku – skriptovi moraju izvršiti neku vrstu provere
– koriste operatore poređenja
• Rezultat poređenja dve vrednosti relacionim operatorima je
logičkog tipa: ili true (tačno) ili false (netačno)
43
Uslovno izvršavanje
• Iskaz if omogućava skriptovima da izvrše provere, a potom izvrše
iskaze zavisno od rezultata provere
• Ako je rezultat poređenja tačan, skript izvršava iskaz koji sledi iza
iskaza if
• S druge strane, ako je rezultat provere pogrešan, skript preskače
iskaz koji sledi
• Format iskaza if je sledeći:
if (uslov je ispunjen)
iskaz;
44
• Uslov if može da se koristi za izvršavanje jednog ili više iskaza
• Kada skript izvršava samo jedan iskaz koji dolazi iza if, to je prost iskaz:
if (Age >= 18)
alert(“Vi ste punoletni!”);
• Za skriptove koji treba da izvrše nekoliko iskaza kada uslov bude ispunjen,
iskazi se moraju grupisati između leve i desne vitičaste zagrade ({}). Iskazi koji
se nalaze u zagradama sačinjavaju složen iskaz:
if (time > 10) {
document.bgColor="lightyellow";
}
45
• Većinom skriptovi zadaju jedan skup iskaza koji se izvršava kada
je uslov ispunjen i drugi skup ako uslov nije ispunjen
• Definisanje iskaza koji se izvršavaju kada uslov nije ispunjen
realizuje se iskazom else
• Format iskaza else je sledeći:
if (uslov je ispunjen)
iskaz;
else
iskaz;
46
Primer 6.
<html><head>
<title> Primer uslovnog izvršavanja </title>
</head>
<body>
var sada = new Date();
var time = sada.getHours();
document.write("Vreme je:" +sada.getHours()+ ":" +sada.getMinutes()+ "<br />");
if (time < 10) {
document.write("<b>Good morning</b>");
}
else{
}
</script>
</body>
</html>
47
Petlje ponavljanja
• Petlje ponavljanje – označavaju ponavljanje niza koraka dok se

ne postigne uslov koji će dozvoliti da se iz petlje izađe
• Najčešća konstrukcija povratne petlje koja se koristi u JavaSript-u
for (početni izraz; uslov; obnavljajući izraz){
naredbe unutar petlje;
}
48
Petlje ponavljanja
Na primer:
for (Count = 1; Count <=5; Count++)
Iskaz;
• Iskaz Count=1 dodeljuje kontrolnoj promenljivoj početnu vrednost
– Petlja for izvodi ovu inicijalizaciju samo jednom, kada se pokrene
• Zatim proverava uslov Count<=5
– Ako je uslov ispunjen petlja for će izvršiti iskaz koji sledi
– Ako uslov nije ispunjen, petlja će se završiti i skript će nastaviti sa
izvršavanjem od prvog iskaza koji sledi nakon petlje
– Ako je uslov ispunjen i petlja for izvršava iskaz povećaće
promenljivu Count korišćenjem iskaza Count++
49
Primer 7.
<html>
<head>
<title> For petlja </title>
</head>
<body>
for (i = 0; i <= 5; i++){
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
50
Ponavljanje iskaza dok je uslov ispunjen
• Kad skriptovi moraju da prolaze kroz petlju dok god je određeni
uslov ispunjen, ali ne obavezno određen broj puta, mogu da
koriste while petlju
• Opšti oblik while petlje:
while (Uslov je ispunjen)
iskaz;
51
Ponavljanje iskaza dok je uslov ispunjen
• Na primer:
while (i <= 10)
iskaz;
• Kada skript naiđe na petlju while, prvo proverava zadati uslov,
ako je ispunjen – skript izvršava iskaze petlje while.
• Nakon što se izvrši poslednji iskaz u petlji, petlja while ponovo
proverava uslov, ako je uslov i dalje ispunjen, iskazi će se ponoviti
i proces će se nastaviti.
• Kada uslov ne bude ispunjen, petlja će se završiti i skript će
nastaviti izvršenje od prvog iskaza koji sledi petlju.
52
Primer 8.
<html>
<head>
<title> While petlja </title>
</head>
<body>

</script>
</body> </html>
53
JavaScript Break and Continue
• break statement "iskače" iz petlje.
• continue statement "preskače" iteraciju u petlji.
<!DOCTYPE html>
<html><body>
<p>A loop with a break.</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body></html>
54
JavaScript Break and Continue
<!DOCTYPE html>
<html>
<body>
<p>A loop which will skip the step where i = 3.</p>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
</script>
</body>
</html>
55
JavaScript Labele
• Služe za označavanje dela koda. Sintaksa je:
label:
statements
• Možemo koristiti
break labelname;
continue labelname;
56
JavaScript Labele
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"]; document.getElementById("demo").innerHTML
= text;
var text = "";
</script>
list: {
text += cars[0] + "<br>"; </body>
text += cars[1] + "<br>"; </html>
text += cars[2] + "<br>";
break list;
}
57
Model objekata dokumenta
HTML DOM (Document Object Model)
• Sa HTML DOM, JavaScript može pristupiti i promenite sve elemente HTML
dokumenta
• Kada se web strana učitava, browser kreira Document Object Model strane.
• HTML DOM model je konstruisan kao drvo objekata:
window
docume toolbar,
history location
nt etc
link anchor layer form applet image area
fileuplo
text radio button select
ad
textarea checkbo
reset option
passwor x
d submit
59
HTML DOM (Document Object Model)
• Sa DOM, JavaScript čini HTML dinamičnim:
– JavaScript može menjati sve HTML elementi na strani
– JavaScript može menjati sve HTML attribute na strani
– JavaScript može menjati sve CSS styles na strani
– JavaScript može brisati HTML elemente i atribute
– JavaScript može dodati novi HTML elemente i atribute
60
Model objekata dokumenta
window Objekat prozora
document Objekat dokumenta
Objekat obrasca
form
Elementi obrasca
text radio button select
textarea checkbox reset option
password
submit
61
Jednostavan dokument
<html>
<head><title> Window
Simple doc
</title></head> Document
<body>
<h1> Hello </h1>
</body>
</html>
62
Dodavanje obrasca
<html>
<head><title>
Simple doc
Window
</title></head>
<body>
<h1> Hello </h1> Document
<form>
</form> Form
</body>
</html>
63
Dodavanje elementa za unos teksta
<html>
<head><title>
Simple doc
Window
</title></head>
<body>
Document
<h1> Hello </h1>
<form>
Form
<input type=“text”>
</form>
</body> Text
</html>
64
Dodavanje elementa dugme
<html>
<head><title>
Simple doc
Window
</title></head>
<body>
Document
<h1> Hello </h1>
<form>
Form
<input type=“text”>
<input type=“button”>
Text Button
</form>
</body>
</html>
65
JavaScript Object
• U JavaScript-u, skoro "sve" je objekat:
– polje za unos teksta,
– dugme ili ceo HTML dokument
– Boolean može biti objekat (if defined with the new keyword)
– Brojevi mogu biti objekti (if defined with the new keyword)
– Stringovi mogu biti objekti(if defined with the new keyword)
– Datumi su uvek objekti
– Regularni izrazi su uvek objekti
– Nizovi su uvek objekti
– Funkcije su uvek objekti
– Objekti su uvek objekti
66
Reference objekata
• Pošto je dokument učitan u čitač, svi njegovi objekti su sigurno
uskladišteni u memoriji, sa strukturom koja zadržava hijerarhiju
po specifikaciji čitača
• Kako bi skript kontrolisao jedan od objekata – mora da postoji
način da se pokaže na objekat i saznaju podaci koje sadrži
• Jezik JavaScript koristi strukturu koja zadržava hijerarhiju kako bi
omogućio skriptovima da stupe u vezu sa objektima u
dokumentu – referenca objekta
67
Imenovanje objekta
• Za referenciranje objekata u skriptovima – dodeljivanje imena
svakom objektu kome se može dodeliti skript u HTML-u
• Skriptabilni čitači prihvataju opcioni atribut oznake koji se
zove name
• Omogućava da se svakom objektu dodeli jedinstveno ime
• Referenca svakog objekta mora da uključi korake duž
hijerarhije objekata, počev od vrha do samog objekta, bez
obzira koliko nivoa će biti uključeno
• U jeziku JavaScripta svaki uzastopni objekat tačkom je
odvojen od drugog objekta
68
Reference prozora, dokumenta i objekta obrasca
window Window
Document
window.document
window Window
Document
window.document
Form
window.document.formName
69
Referenca objekta – polje za unos teksta
window
Window
window.document
Document
window.document.formName Form
window.document.formName.textName
Text
70
Referenca objekta dugme
window Window
window.document Document
window.document.formName Form
window.document.formName.textName
window.document.formName.buttonName Text Button
• S obzirom da se samo jedan document može naći u prozoru, referenca

objekta u dokumentu može da se piše bez dela window.
71
Definicija objekata
• Svaki od objekata je jedinstven, definisan je
nazivom.
• Tri najvažnije odlike objekata definišu kako izgleda,
kako se ponaša i kako ga skript kontroliše, to su:
– svojstva (properties)
– metodi
– procedure za obradu događaja
72
Kreiranje objekata
• Postoje različiti načini za kreiranje novih objekata:
– Definisanje i kreiranje objekta, korišćenjem objekt literala
(lista parova name:value u okviru {}.).
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
– Definisanje i kreiranje objekta, ključnom rečju new.

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
– Definisanje konstruktora objekta, i kreiranje objekta

konstrukcionog tipa.
73
Kreiranje objekata
• Postoje različiti načini za kreiranje novih objekata:
– Definisanje konstruktora objekta, i kreiranje objekta
konstrukcionog tipa.
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
74
Svojstva objekata u JavaScriptu
• Svojstva ukazuju na to kako se objekat ponaša.
• Svojstva HTML objekta najčešće se podešavaju atributima HTML oznaka.
• Prisustvo JavaScripta često dodaje opcione atribute čija se inicijalna vrednost
može modifikovati kada se dokument učita
• Na primer, sledeća HTML oznaka definiše objekat dugme koji dodeljuje
vrednosti za dva svojstva:
<input type=“button” name=“dugme” value=“pritisni
dugme”>
• Ne moraju se za svaki objekat podesiti sva svojstva – većina svojstava ima
početne vrednosti koje se automatski dodeljuju ako se ništa ne podešava u
HTML-u
75
Svojstva objekata u JavaScriptu
• Za pristupanje svojstvima objekata u sintaksi se koristi tačka, kao u
hijerarhijskoj šemi adresiranja
• Kako je svojstvo sadržano u objektu, njegova referenca se sastoji od reference
objekta i još jednog dodatka za ime objekta
• Za oznaku objekta dugme:
<input type=“button” name=“dugme” value=“pritisni dugme”>
• Referenca do svojstva bila bi:
document.formName.dugme.value
• S obzirom da se samo jedan dokument može naći u prozoru, referenca
objekta u dokumentu može da izostavi deo window
76
Vrednosti bez svojstava - primitivne
• Primitivna vrednost je vrednost koja nema svojstvo ni metodu.
• Imaju primitivne vrednosti.
• JavaScript definiše 5 tipova primitivnih tipova podataka:
– string
– number
– boolean
– null
– Undefined
• Objekti su varijable koje sadrže vaijable
77
Svojstva objekata
• U JavaScript-u objekat je kolekcija imenovanih vrednosti, koje se
nazivaju svojstva.
Property Value
firstNam John
e
lastName Doe
age 50
eyeColor blue
• Objekti pisani kao parovi ime - vrenost slični kao:
– Asocijativni nizovi u in PHP
– Hash tabele u C
– Hash mape u Javi
– Hash u Ruby i Perl
78
JavaScript svojstva
• JavaScript objekti predstavljaju kolekciju unordered svojstava.
• Svojstva mogu biti promenjena,
– Dodata person.nationality = "English";,
– Obrisana
delete person.age; // or delete person["age"];,
– dok su neka read only.
• Pristup svojstvima objekta možemo odraditi na neki od sledećih
načina:
– objectName.property // person.age
– objectName["property"] // person["age"]
– objectName[expression] // x = "age"; person[x]
79
HTML DOM metode
• Metode su akcije koje mogu da se izvrše nad objektom. One ukazuju na to kako se
objekat ponaša.
• Kreiranje metode
– methodName : function() { code lines }
– objectName.methodName()
• JavaScript objekti su kontejneri za svojstva i metode
Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}
80
HTML DOM metode
• HTML DOM methode su akcije koje se mogu izvršiti na HTML
elementima.
• Čest način za pristup HTML elementu je korišćenjem id elementa
– document.getElementById("demo").innerHTML = "Hello World!";
• Najjednostavniji način za pristup sadržaju elementu jeste
korišćenjem innerHTML svojstva.
• innerHTML svojstvo je korisno za pristup ili promenu sadržaja HTML
elemenata.
• innerHTML svojstvo može biti korišćeno za pristup ili promenu HTML
element, uključujući <html> i <body>.
81
HTML DOM Document
• Promena HTML elemenata
Method Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML element
element.setAttribute(attribute, value) Change the attribute value of an HTML element
element.style.property = new style Change the style of an HTML element
• Dodavanje i brisanje HTML elemenata

Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(element) Replace an HTML element
document.write(text) Write into the HTML output stream
82
HTML DOM Document
• HTML DOM Document objekt je vlasnik svih ostalih objekata na web
stranici.
• Pristup bilo kom elementu HTML stranice uvek počinje document
objektom.
• Pretraga HTML elemenata
Method Description
document.getElementById(id) Pronalazi elemente po id elementa
document.getElementsByTagName(name) Pronalazi elemente po nazivu taga
document.getElementsByClassName(name) Pronalazi elemente po nazivu klase
83
Kako doći do HTML elementa
• Postoji više načina na koji možemo doći do HTML elementa kako
bi nešto uradili sa njim:
– Pristup HTML elementima preko id
– Pristup HTML elementima preko naziva taga
– Pristup HTML elementima preko naziva class
– Pristup HTML elementima preko CSS selectora
– Pristup HTML elementima preko kolekcije HTML objekta
84
Pristup preko id
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
"The text from the intro paragraph is " + myElement.innerHTML;
</script>
</body>
</html>
85
Pristup preko naziva taga
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
'The first paragraph (index 0) is: ' + x[0].innerHTML;
</script>
</body>
</html>
86
Pristup preko naziva class
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b>
method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
87
Pristup preko CSS selektora
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b>
method.</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
88
Pristup preko kolekcije HTML objekta
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value of each element in the form.</p>
<button onclick="myFunction()">Try it</button>
<script>
<p id="demo"></p>
function myFunction() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
}
</script>
</body>
</html>
89
Pristup preko kolekcije HTML objekta
• Sledeći HTML objekti (i kolekcije objekata) su takođe pristupačni:
– document.anchors
– document.body
– document.documentElement
– document.embeds
– document.forms
– document.head
– document.images
– document.links
– document.scripts
– document.title
90
JavaScript HTML DOM - Menjanje HTML
• HTML DOM dozvoljava JavaScript-u da menja sadržaj HTML elemenata.
• U JavaScript-u, document.write() može da se koristi za direktno
ispisivanje u HTML dokument.
• Nikad ne treba koristiti document.write() poto je dokument učitan, jer
će to dovesti do ispisivanja preko postojećeg dokumenta.
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
91
• Najjednostavniji način za modifikovanje sadržja HTML elemenata
je korišćenjem svojstva innerHTML.
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
92
• Primer promene <h1>
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
<p>"Old Header" was changed to "New Header"</p>
</body>
</html>
93
• Java Script omogućava promenu atributa.
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
94
• HTML DOM omogućava JavaScript-u da menja stil HTML
elemenata.
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
95
Obrada događaja u JavaScriptu
• Procedure za obradu događaja definišu kako skript kontroliše
objekat. Atribut obrade
događaja
Primenjuje se na: Događaj nastupa kad:
onClick Polja za potvrdu, hiperveze, aktivno mesto na Posetilac pritisne mišem element
slici, dugmad, radio-dugmad, dugmad Submit i na obrascu ili hipervezu.
Reset
Oznake: <a>, <body>, <input>
onLoad Telo dokumenta Čitač Weba učitava Web stranicu.
Oznake: <body>, <img>
onMouseOver Područja, hiperveze Posetilac pomeri pokazivač miša u
Oznake: <a>, <body>, <input> područje mapirane slike ili na
hipervezu.
onReset Obrasce Posetilac pritisne dugme Reset.
Oznake: <form>
onSubmit Obrasce Posetilac pritisne dugme Submit.
Oznake: <form>
onError Slike, prozore Čitač naiđe na grešku kada učitava
Oznake:<body>, <img> sliku ili Web stranicu.
96
Obrada događaja u JavaScriptu
onClick="javascript: function('value');"
• ili
onClick="function('value');"
97
Primer onClick
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
98
Primer onLoad
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
}
</script>
</body>
</html>
99
Primer onChange
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<p> When you leave the input field, a function is triggered which transforms the input text
to upper case.</p>
</body>
</html>
100
Primer onmouseover onmouseout
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
101
Primer 9.
<html>
<head>
<title> Obrada događaja Click </title>
</head>
<body>
<form>
Primer poziva dijaloga:
<br />
<input type="button" value="Dijalog ALERT!" onClick="alert('Ovo je dijalog
ALERT!');">
<br />
</form>
</body>
</html>
102
Primer 10.
<html>
<head>
</head>
<body>
<form>
Primer poziva dijaloga:<br />
<input type="submit" onClick="alert('Submit Me!')">

<input type="radio" name="radset" onClick="alert('Radio Selected!')">
<br />
</form>
</body>
</html>
103
Primer 11.
<html>
<head>
</head>
<body>
<a href="http://www.htmlgoodies.com" onClick="alert('Pristupamo sajtu o HTML-
u.?')";>HTML Goodies </a>
</body>
</html>
104
Primer 12.
<html> <head> <title> Obrada događaja MouseOver </title>
</head>
<body bgcolor="ffffff" text="000000" link="0000ff" vlink="800080" alink="ff0000">
<p> </p><p> </p>
<center>
<font size="+2">
<a href = "" onMouseOver="document.bgColor='black'">Black</a>
<a href = "" onMouseOver="document.bgColor='green'">Green</a>
<a href = "" onMouseOver="document.bgColor='yellow'">Yellow</a>
<a href = "" onMouseOver="document.bgColor='red'">Red</a>
<a href = "" onMouseOver="document.bgColor='brown'">Brown</a>
<a href = "" onMouseOver="document.bgColor='white'">White</a>
</font>
</center>
</body>
</html>
105
Primer 13.
<html>
<head> <title> Obrada događaja Error </title>
function abort_image(){
alert('Error: Loading of the image was aborted');
}
</script>
</head>
<body>
<img src="image.gif" onError="abort_image()">
</body>
</html>
106
Primer 14.
<html> <head>
<title> Obrada događaja Submit i Load </title>
function load(){
window.status="Page is loaded";
}
</script>
</head>
<body onload="load()">
<form name="testform" action="http://www.nstrade.net/forma.php?action=proizvod"
onSubmit="alert('Hello ' +testform.fname.value+'!')">What is your name?
<br />
<input type="text" name="fname" value="">
<input type="submit" value="Submit">
</form>
</body> </html>
107
Primer 15.
<html>
<head>
<title> Obrada događaja Reset </title>
</head>
<body>
<form onReset="alert('The form will be reset')">
Firstname: <input type="text" name="fname"> <br />
Lastname: <input type="text" name="lname"> <br />
<input type="reset" value="Reset">
</form>
</body>
</html>
108
JavaScript nizovi
JavaScript nizovi
• Niz je promenljiva koja sadrži skup vrednosti istih tipova
podataka
• Na primer, za prodaju pet predmeta prati se količina i cena
svakog predmeta
var ItemCount1, ItemCount2, ItemCount3, ItemCount4, ItemCount5
var ItemPrice1, ItemPrice2, ItemPrice3, ItemPrice4, ItemPrice5
• JavaScript omogućava formiranje jedne promenljive koja može
da skladišti količinu i cenu za svaki od 100 predmeta, koristeći
sledeće iskaze:
var ItemCount = new Array(100);
var ItemPrice = new Array (100);
110
JavaScript nizovi
• Svakom elementu niza pristupa se preko indeksa koristeći sledeću sintaksu:
ImeNiza[Index]
• Prvi predmet u nizu ima indeks nula (0). Da bi se na primer postavila cena i
količina predmeta 1, potrebno je napisati:
– ItemCount[0] = 5;
– ItemPrice[0] = 125.50;
• Količina i cena predmeta 100 smešta se u elemenat niza sa indeksom 99
sledećim iskazom:
– ItemCount[99] = 10;
– ItemPrice[99] = 88.66;
111
Definicija niza elemenata
Broj elemenata
niza
var myArray= new Array(3)
myArray[0]="ant"; Zadavanje
myArray[1]="bat"; elemenata niza
myArray[2]="cat";
document.write ("The third element is "+myArray[2]);
112
Definicija niza elemenata
• Postoje tri načina definicije niza:
1. način
myArray=["ant","bat","cat"]
2. način
var myArray= new Array(3)
myArray[0]="ant";
myArray[1]="bat"
myArray[2]="cat"
3. način
myArray= new Array("ant","bat","cat")
113
Primer 16.
<html>
<head>
<title> Primer niza </title>
</head>
<body>
var zaposlenik = new Array (3)
zaposlenik[0] = "Petar";
zaposlenik[1] = "Marko";
zaposlenik[2] = "Ivana";
document.write(zaposlenik[1]);
</script>
</body>
</html>
114
Primer 17.
<html>
<head>
<title> Primer nesortiranog niza </title>
</head>
<body>

</script>
</body>
</html>
115
Primer 18.
<html>
<body>
<title> Primer sortiranog niza </title>

</script>
</body>
</html>
116
AJAX
• AJAX može:
– Izmeniti web stranu bez ponovnog učitavanja
– Zahtevati podatke od servera - posle loadovanja
strane
– Primanje podataka od servera - neposredno posle
loadovanja strane
– Slati podatke serveru – u pozadini
Šta je AJAX
• AJAX = Asynchronous JavaScript And XML.
– AJAX nije programski jezik.
– AJAX samo koristi kombinaciju:
• browser XMLHttpRequest objekat (koji zahteva podatke od web servera)
• JavaScript i HTML DOM (za prikaz ili korišćenje dobijenih podatak)
• AJAX omogućava web stranama da se asinhrono ažuriraju
razmenom podataka sa web serverom iza scene, tj. u pozadini.
• To znači da je moguće update delova web strane, bez
ponovnog učitavanja cele web strane.
Kako AJAX radi
1. Događaj se dešava na veb stranici (stranica se učitava, dugme je kliknuto)
2. JavaScript kreira XMLHttpRequest objekat
3. XMLHttpRequest objekt šalje zahtev web serveru
4. Server obrađuje zahtev
5. Server šalje odgovor nazad veb strani
6. JavaScript čita poslati odgovor
7. JavaScript ažurira stranu
AJAX - The XMLHttpRequest Object
• Svi moderni pretraživači (Chrome, IE7+, Firefox, Safari, and
Opera) podržavaju XMLHttpRekuest objekat.
• Objekat XMLHttpRekuest se koristi za razmenu podataka sa
serverom, iza scene. To znači da je moguće ažuriranje delova veb
stranice, bez ponovnog učitavanja cele stranice.
variable = new XMLHttpRequest();
• Starije verzije Internet Explorera (IE5 i IE6) koriste ActiveX
Object.
XMLHttpRequest Object Metode
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method, url, async, user, Specifies the request
psw)
method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password
send() Sends the request to the server

Used for GET requests
send(string) Sends the request to the server.
Used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent
Svojstva XMLHttpRequest Object
Property Description
onreadystatechange Defines a function to be called when the readyState property
changes
readyState Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string

responseXML Returns the response data as XML data
status Returns the status-number of a request
200: "OK"
403: "Forbidden"
404: "Not Found"
For a complete list go to the Http Messages Reference
statusText Returns the status-text (e.g. "OK" or "Not Found")

Slanje zahteva serveru
• Kao što je već rečeno, Objekat XMLHttpRekuest se koristi za
razmenu podataka sa serverom, iza scene.
• Za slanje zahteva serveru, koriste se open() i send() metode
XMLHttpRequest objekta.
Method Description
open(method, url, async) Specifies the type of request
method: the type of request: GET or POST
url: the server (file) location
async: true (asynchronous) or false (synchronous)
send() Sends the request to the server (used for GET)

send(string) Sends the request to the server (used for POST)
Slanje zahteva serveru - GET
• GET zahtev
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
• GET zahtev
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Slanje zahteva serveru - POST
• POST zahev koristimo kod HTML fotmi, gde dodajemo HTTP heder sa
metodom setRequestHeader().
• Podake koje želimo da pošaljemo navodimo u send() metodi.
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Method Description
setRequestHeader(header, value) Adds HTTP headers to the request
header: specifies the header name
value: specifies the header value
URL u open() metodi
• URL predstavlja, zapravo, fajl koji se nalazi na serveru.
• Slanje asinhronog zahteva je veliki napredak za veb developere. Mnogi od
poslova koji se obavljaju na serveru traju dugo.
• Slanjem asinhrono, JavaScript ne mora da sačeka odgovor servera, već može
umesto toga da:
– obavlja i druge skripte čekajući odgovora server
– podeli odgovor kada bude spreman
• Kada koristite asinc = true, identifikujemo funkciju za izvršenje kada je odgovor
spreman u onreadystatechange događaju.
• Korišćenje asinc = false se ne preporučuje, ali za nekoliko manjih zahteva to
može biti u redu.
AJAX - Server Response
• Svojstva readyState nosi status XMLHttpRequest objekta.
• Svojstvo onreadystatechange definiše funkciju koja će se izvršiti
kada se readyState promeni.
• Svojstva status i statusText nose status XMLHttpRequest objekta.
onreadystatechange Defines a function to be called when the readyState property changes
readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"

403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages Reference
statusText Returns the status-text (e.g. "OK" or "Not Found")

<!DOCTYPE html>
<html> </script>
<body> </body>
<div id="demo"> </html>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
this.responseText;
}
};
xhttp.send();
}
Korišćenje callback fukncija
• Callback funkcije su funkcije koje se prosleđuju drugoj funkciji u
vidu parametra. <script>
function loadDoc(url, cFunction) {
<!DOCTYPE html> var xhttp;
<html> xhttp=new XMLHttpRequest();
<body> xhttp.onreadystatechange = function() {
cFunction(this);
<div id="demo"> }
};
<h1>The XMLHttpRequest Object</h1> xhttp.open("GET", url, true);
xhttp.send();
<button type="button" }
onclick="loadDoc('ajax_info.txt', myFunction)">Change function myFunction(xhttp) {
Content document.getElementById("demo").innerHTML =
</button> xhttp.responseText;
</div> }
</script>
</body>
</html>
Server Response svojstva i metode
responseText get the response data as a string
responseXML get the response data as XML data
Method Description
getResponseHeader() Returns specific header information from the server resource
getAllResponseHeaders Returns all the header information from the server resource
()
ResponseText Property
• Svojstvo responseText vraća odgovor servera kao JavaScript string
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
this.responseText;
}
};
xhttp.send();
}
</script>
getAllResponseHeaders() i
getResponseHeader() metode
• getAllResponseHeaders() metod vraća sve header informacije odgovora
koji šalje server, dok getResponseHeader() metod vraća specifične header
informacije odgovora koji šalje server.
<p id="demo"></p>
<script>
this.getAllResponseHeaders();
}
};
xhttp.send();
</script>
AJAX I baze podataka
• Sledeći primer demonstrira kako veb strana može prikazati
informacije iz baze korišćenjem AJAX-a
Objašnjenje
• Izgled baze podataka
id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano
Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot
Rešenje
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
Rešenje
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
Objašnjenje
• Prvo se proverava da li je osoba selektovana. Ako nije
selektovana (str == ""), obriši sadržaj txtHint-a i izađi iz
funkcije. Ako je osoba selektovana, uradi sledeće:
– KreirajXMLHttpRequest object
– Kreiraj funkciju koja će se izvršiti kada bude spreman odgovor
servera.
– Pošalji zahtev za fajlom koji se nalazi na serveru
– Naznači da će parameter (q) biti poslat preko URL (sadržaj
dropdown liste)
getuser.php
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
while($row = mysqli_fetch_array($result)) {
<tr>
echo "<tr>";
<th>Firstname</th>
echo "<td>" . $row['FirstName'] . "</td>";
<th>Lastname</th>
echo "<td>" . $row['LastName'] . "</td>";
<th>Age</th>
echo "<td>" . $row['Age'] . "</td>";
<th>Hometown</th>
echo "<td>" . $row['Hometown'] . "</td>";
<th>Job</th>
echo "<td>" . $row['Job'] . "</td>";
</tr>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Objašnjenje
• Kada je upit poslat od JavaScript-a prema PHP fajlu
dešavaju se sledeće stvari:
– PHP otvara konekciju sa MySQL serverom
– Pronalazi se odgovarajuća osoba na osnovu poslate vrednosti
promenljive q, koja se šalje GET metodom
– HTML tabela se kreira, puni se podacima za odabranog
korisnika i šalje se nazad u "txtHint" div
JSON
JSON
• JSON: JavaScript Object Notation.
• JSON predstavlja sintaksu za za skladištenje I razmenu
podataka
• JSON je tekst, pisan sa JavaScript object notacijom.
• JSON koristi JavaScript sintaksu, ali JSON format je
zapravo samo tekst
• Tekst je format podataka koji može biti korišćen od
strane bilo kog programskog jezika
JSON
• Prilikom razmene podataka između browsera i servera podaci
su samo u vidu teksta.
• JSON je tekst i možemo konverotivati bilo koji JavaScript
objekt u JSON i onda JSON poslati serveru.
• Takođe je moguće konverovati JSON odgovor servera u
JavaScript objekte.
• Na ovaj način možemo manipulisati podacima kao JavaScript
objektima bez komplikovanog parsiranja i prenosa.
Slanje i primanje podataka
• Podatke skladištene u JavaScript objektu je moguće konvertovati
u JSON i poslati serveru.
var myObj = { "name":"John", "age":31, "city":"New York" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
• Ako primate podatke u JSON formatu, moguće ih je konvertovati

u JavaScript objekat
var myJSON = '{ "name":"John", "age":31, "city":"New York" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myobj.name;
Skladištenje podataka
• Prilikom čuvanja podataka treba voditi računa o tome da
format podataka bude pouzdan.
• Text je uvek jedan od legalnih formata i JSON omogućava
čuvanje JavaScript objekata kao tekst.
//Storing data:
myObj = { "name":"John", "age":31, "city":"New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
//Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
Zašto koristiti JSON
• JavaScript ima ugrađene funkcije za konvertovanje JSON
stringa u JavaScript objekte:
– JSON.parse()
• Dakle, ako primate podatke od servera u JSON format-u,
moguće ga je koristiti u vidu bilo kog drugog JavaScript
objekta
JSON sintaksa
• JSON sintaksa je izvedena iz sintakse
JavaScript object notacije:
– Podaci su u vidu parova name/value
– Podaci su odvojeni zarezom
– Podaci su oivičeni vitičastom zagradama {}
– Uglaste zagrade se koriste kod nizova
JSON podaci
• JSON podaci se pišu u vidu praova name-value
• Name-velue parovi sastoje se od imena polja, pod dvostrukim
navodnicima, zatim idu dve tačke, pa vrednost, takođe pod dvostrukim
navodnicima.
"name":"John“
• Polje name je u JSON oivičeno dvostrukim navodnicima, dok u JavaScript-
u nisu.
– JSON: jsonObj = { "name":"John", "age":31, "city":"New York" };
– JavaScript: jsObj = { name:"John", age:31, city:"New York" };
• U JSON, name mora biti string, oivičen dvostrukim navodnicima, dok u
JavaScript-u, name može biti string ili broj
JSON fajlovi
• Ekstenzija JSON fajla je ".json“
• MIME tip za JSON text je "application/json"
JSON tipovi podataka
• JSON, vredsnoti moraju imati jedan od sledećih tipova podataka:
– string
– number
– object (JSON object)
– array
– boolean
– null
• JSON vrednosti ne mogu imatei jedan od sledećih tipova podataka:
– a function
– a date
– undefined
• JSON string mora biti sa dvostrukim navodnicima
{ "name":"John" }
• JSON broj mora biti tipa int ili float
{ "age":30 }
• JSON object
{
"employee":{ "name":"John", "age":30, "city":"New York" }
}
• JSON nizovi
{
"employees":[ "John", "Anna", "Peter" ]
}
• JSON bolean, vrednosti mogu bititrue ili
false
{ "sale":true }
• JSON null
{ "middlename":null }
Pristup vrednostima objekta
• Možete pristupiti svojstvima (vrednostima) objekta koristeći tačku(.):
myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;
• Vrednstima objekta je moguće pristupiti i koristeći uglaste zagrade([])
myObj = { "name":"John", "age":30, "car":null };
x = myObj["name"];
• Moguće svojstva objekta provući kroz petlju koristeći for-in petlju:
<p id="demo"></p>
<script>
var myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
Pristup vrednosti objekta
• U for-in petlji je moguće pristupiti i
svojstvima vrednost, koja se nalaze u
parovima
<p id="demo"></p>
<script>
var myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
</script>
Pristup vrednosti objekta
• Vrednosti u JSON objektu mogu sadržati i druge objekte
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
• Pristup grupi objekata je moguć:
document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
//or:
document.getElementById("demo").innerHTML += myObj.cars["car2"];
Modifikovanje JSON vrednosti
• Moguće je koristiti tačka notaciju da
modifikujemo bilo koju vrednostu JSON
objwektu
myObj.cars.car2 = "Mercedes"; ili
myObj.cars["car2"] = "Mercedes";
• Brisanje vrednosti objekta
– delete myObj.cars.car2;
Nizovi kao JSON objekti
• Primer [ "Ford", "BMW", "Fiat" ]
• Nizovi u JSON su skoro isti kao nizovi u JavaScript-u.
• U JSON, vrednosti mogu biti tipa string, niz, objekat,
boolean or null.
• U JavaScript-u vrednosti elemenata niza mogu biti sve
navedeno u JSON-u plus bilo koji drugi validan
JavaScript izraz, uključujući funkcije, datume i
nedefinisani tip.
Nizovi kao JSON objekti
• Nizovi mogu imati elemente čije su vrednosti svojstva JSON objekta:
{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
• Vrednostima niza možemo pristupiti koristeći broj indeks
x = myObj.cars[0];
• Vrednostima niza možemo pristupiti i for-in ili for petljom
for (i in myObj.cars) {
x += myObj.cars[i]; for (i = 0; i < myObj.cars.length; i++) {
} x += myObj.cars[i];
}
Ugnježdeni nizovi
• Vrednosti elemenata niza mogu biti i drugi nizovi ili čak drugi JSON
objekti:
myObj = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
Ugnježdeni nizovi
• Pristup ugnježdenom nizu je moguć for-in petljom
for (i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "</h1>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
• Modifikovanje vrednosti niza je moguće na sledeći način
myObj.cars[1] = "Mercedes";
• Brisanje elementa niza je moguće na sledeći način:
delete myObj.cars[1];
Parsiranje
• JSON se često koristi za razmenu podataka od/do veb servera.
• Podaci poslati od veb servera su uvek tipa string.
• Parsiranje podataka se vrši sa metodom JSON.parse(), i tada podaci postaju JavaScript
objekti.
• Pretpostavimo da je poslat sledeći tekst od strane veb servera
'{ "name":"John", "age":30, "city":"New York"}’
• Tekst se konvertuje u JavaScript objekat metodom parse(). Korišćenje JavaScript objekta
na na strani klijenta se vrši:
<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
JSON poslat od servera
• Moguće je zahtevati JSON od veb servera korišćenjem AJAX zahteva.
• Odgovor od servera napisan u JSON formatu je moguće parsirati iz stringa u
JavaScript objekat.
• Korišćenje XMLHttpRequest za preuzimanje podataka od veb servera:
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
</script>
Niz kao JSON
• Kada koristimo JSON.parse() na JSON dobijen od
niza, metod će vratiti JavaScript niz, umesto
JavaScript objekta.
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
};
xmlhttp.open("GET", "json_demo_array.txt", true); ["Ford", "BMW", "Audi", "Fiat"]
xmlhttp.send();
</script>
Izuzeci
• Datum objekti nisu dozvoljeni u JSON.
• Ako treba uključiti datum napisaćemo ga kao
string.
• Kasnije ga možemo vratiti u objekat datum.
<p id="demo"></p>
<script>
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
</script>
Parsiranje funkcija
• Funkcije nisu dozvoljene u JSON.
• Ako je potrebno uključiti funkcije potrebno ih je
ispsati kao string.
• Kasnije string možemo konvertova u funkciju
nazad.
<p id="demo"></p>
<script>
var text = '{ "name":"John", "age":"function() {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
</script>
Browser Support
• JSON.parse() funkcija je uključena u sve
velike browsere :
– Firefox 3.5
– Internet Explorer 8
– Chrome
– Opera 10
– Safari 4
JSON.stringify()
• Podaci koji se šalju prema veb serveru moraju biti tipa string.
• Pretvaranje JavaScript objekta u niz se vrši JSON.stringifi () metodom.
• Ako imamo JavaScript objekat
var obj = { "name":"John", "age":30, "city":"New York"};
• Konvertovanje ovog objekta u string ćemo obaviti metodom JSON.stringify
var myJSON = JSON.stringify(obj);
• Primer
<p id="demo"></p>
<script>
var obj = { "name":"John", "age":30, "city":"New York"};
document.getElementById("demo").innerHTML = myJSON;
</script>
Stringify JavaScript niz
• Moguće je primetiti metodu stringfy() i na niz.
• Ako imamo niz
var arr = [ "John", "Peter", "Sally", "Jane" ];
• Korišćenjem JavaScript funkcije JSON.stringfy
konvertovaćemo niz u string var myJSON = JSON.stringify(arr);
<p id="demo"></p>
<script>
var arr = [ "John", "Peter", "Sally", "Jane" ];
var myJSON = JSON.stringify(arr);
</script>
Stringify datum
• U JSON, objekat datum nije dozvoljen. JSON.stringify()
function konvertuje bilo koji datum u string.
<p id="demo"></p>
<script>
var obj = { "name":"John", "today":new Date(),
"city":"New York"};
myJSON;
</script>
Stringify funkcije
• U JSON-u funkcije nisu podržane kao vrednosti objekta.
• JSON.stringify() funkcija će obrisati bilo koju funkciju koja se
nalazi u JavaScript objektu, i ključ i vrednost:
<p id="demo"></p>
<script>
var obj = { "name":"John", "age":function () {return 30;}, "city":"New
York"};
</script>
Stringify funkcije
• Ovo možemo izbeći ako funkciju konvertujemo u string pre
pokretanja funkcije JSON.stringify().
<p id="demo"></p>
<script>
var obj = { "name":"John", "age":function () {return 30;}, "city":"New York"};
obj.age = obj.age.toString();
</script>
• Trebalo bi da izbegavate funkcije u JSON, funkcija će izgubiti svoj

obim, a ti bi da koristite eval () da ih pretvoriti natrag u funkcijama.
JSON PHP
• Ovde ćemo opisati razmenu JSON podataka između klijenta i PHP
servera.
• PHP ima ugrađene funkcije za rukovanje JSON.
• Objekti u PHP mogu biti konvertovani u JSON korićenjem PHP
funkcije json_encode():
<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>
JSON PHP
• Razmena podataka može da se obavi i od servera prema klijentu.
• Tada se koristi ugrađena PHP funkcija json_decode().
• Posmatrajmo JavaScript koji koristi Ajax za formiranje zahteva za php fajlom. Npr.
šaljemo zahtev serveru u kome tražimo prvih 10 zapisa iz tabele customers.
obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true);
xmlhttp.send();
JSON PHP
• Objašnjenje:
– Definišemo objekat koji sadrži svojstva tabela i limit
– Konvertujemo objekat u JSON string.
– Aljemo zahtev za PHP fajlom sa parametrom u vidu
JSON stinga.
– Čekamo povratak rezultata u vidu JSON-a
– Prikaz rezultata kojeg smo dobili u vidu odgovora
servera iz PHP fajla.
JSON PHP
• PHP fajl ima sledeću sadržinu
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>
• Objašnjenje
– Konvertujemo zahtev u vidu JSON stringa u PHP objekat koristeći PHP
funkciju json_decode().
– Pristupamo bazi podataka i punimo niz zahtevanim podacima.
– Niz je u vidu objekata koga vraćamo kao JSON korišćenjem json_encode() funkcije.
JQUERY
Neophodna predznanja
• Pre nego počnete sa izučavanjem JQUERY -em potrebno je da poznajete:
– HTML
– CSS
– JavaScript
• Jquery je lagana “piši manje radi više” JavaScript biblioteka.
• Svrha Jquery-ja je da omogući mnogo lakše koričćenje JavaScripta na
našem sajtu.
• Ogroman kod u JavaScript možemo smanjiti jednostavnim pozivanjem
JQUERY metoda.
• JQUERY, takođe, pojednostavljuje komplikovane stvari u JavaScriptu koje
se odnose na pozivanje AJAX-a i manipulacije DOM-om
Šta je JQUERY
• JQUERY biblioteka sadrži sledeće funkcije:
– HTML/DOM manipulacije
– CSS manipulacije
– HTML event methods
– Efekti i animacije
– AJAX
• Postoji mnogo JavaScript framework-a, ali je JQUERY najjednostavniji i ima
mogućnost proširenja.
• Mnoge kompanije na webu koriste JQUERY:
– Google
– Microsoft
– IBM
– Netflix
Instaliranje JQUERY-ja
• Postoji nekoliko načina da počnete da radite sa Jquery-jem
na vašem sajtu:
– Download jQuery biblioteku sa jQuery.com
– Uključivanjem jQuery sa CDN (Content Delivery Network), kao što
je Google
• Postoje dve verzije jQuery dostupne za downloadovanje:
– Production version – za realni sajt, jer je umanjen i komprimovan
– Development version – za testiranje i razvoj
• Obe verzije su dostupne na jQuery.com
Instaliranje JQUERY-ja
• jQuery biblioteka je JavaScript fajl koji postavljamo
u HTML <script> tag u <head> sekciji:
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>
• U HTML5 nije potrebno unositi

type="text/javascript" u <script> tag.
• JavaScript je default scripting jezik u HTML5 i
ostalim modernim browserima.
JQUERY CDN
• Ako ne želite da downloadujete jQuery na svoj server,
možete ga uključiti sa CDN (Content Delivery Network).
• Postoje Google i Microsoft host jQuery.
• Za korišćenje jQuery sa Google ili Microsoft, koristite
sledeći kod:
<head> <head>
<script src="https://ajax.googleapis.com/ <script src="https://ajax.aspnetcdn.com/
ajax/libs/jquery/3.1.1/jquery.min.js"></ ajax/jQuery/jquery-3.1.1.min.js"></script>
script> </head>
</head>
JQUERY sintaksa
• jQuery-jem možete selektovati (izvršiti query) HTML
elemente i izvršiti "akcije" na njima.
• jQuery sintaksa je is prilagođena
za selectovanje HTML elemenata i izvođenje
nekih accija nad elementima.
• Osnovna syntaksa je: $(selector).action()
– $ znak za definisanje/pristup jQuery-ju
– (selector) za "query (ili pronalaženje)" HTML elemenata
– jQuery action() koju treba izvršiti na elementima
JQUERY sintaksa
• Primeri:
– $(this).hide() skrivanje tekućeg elementa.
– $("p").hide() – skriva sve <p> elemente.
– $(".test").hide() - skriva sve elemente sa
class="test".
– $("#test").hide() – skriva element sa id="test".
• jQuery koristi CSS sintaksu da selektuje
elemente.
READY događaj
• Sve jQuery metode imaju unutar dokumenta imaju metodu
ready.
$(document).ready(function(){
// jQuery methods go here...
});
• Ovo je čisto iz preventivnih razloga da bi se sprečilo

pokretanje koda pre nego se dokument učita (readi).
• Evo nekih primera gde bi imali problema kada se bi se
metode pokrenule pre učitavanja dokumenta:
– Pokušaj da se sakrije element koji još nije kreiran
– Pokušaj da se dobije veličina slike koja još nije učitana
READY događaj
• Jquery tim je storio još kraći metod za dokument ready
događaj
$(function(){
// jQuery methods go here...
});
jQuery selektori
• Jquery selektori predstavljaju jedan od najvažnijih delova
Jquery biblioteke.
• jQuery selectori dozvoljavaju korisniku da selektuje i
manipuliše HTML elementima.
• jQuery selektori se korite da "pronađu" (selektuju) HTML
elemente na osnovu njihovog imena, id, class-a, tipova,
atributa, vrednosti ili atributa i još mnogo toga. Ovo se
bazira na postojećim CSS Selectorsima, uz dodatak nekih
sopstvenih prilagođenih selektora.
• Svi selektori u jQuery-ju počinju sa znakom dolar i
zagradama: $().
Element selektori
• jQuery element selector selektuje elemente na osnovu
njihovog imena.
• Sve <p> elemente na stranici je moguće selektovati sa: $
("p")
<script>
$("button").click(function(){
$("p").hide();
});
});
</script>
Element selektori
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
#ID selektor
• jQuery #id selector koristi id atribut jednog HTML
taga za gađanje specifičnog elementa.
• id je jedinstven na stranici, tako da možemo
koristiti #id selector kada želimo da pronađemo
jedinstven element na stranici.
• Pronalazak jedinstvenog elementa sa specifičnim
id-em vrši se unosom # ispred id-a HTML
elementa:
– $("#test")
#ID selektor
<head>
<script>
$("#test").hide();
});
});
</script>
</head>
<body>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
.class selektor
• jQuery class selektor pronalazi elemente
specificirane određenom class-om.
• Pronalazak elementa specificiranog class-om
vrši se na sledeći način:
– $(".test")
.class selektor
<head>
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<button>Click me</button>
</body>
Još jQuery selektori
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to
"_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
Funkcije u odvojenom fajlu
• Ako web sajt sadrži mnogo strana, i želite da vaše
jQuery funkcije budu jednostavne za održavanje,
možete staviti jQuery funkcije u odvojen .js file.
• Funkcije se dodaju u <head> sekciju:
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/
jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
jQuery događaju
• Događaji predstavljaju tačan momenat kada se
nešto desi.
• Npr:
– Postavljanje miša iznad elementa
– Selektovanje radiodugmeta
– Pritiskanje elementa
jQuery događaju
• Česti DOM događaji:
Mouse Keyboard Form Document/Window Events
Events Events Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

jQuery syntaksa za methode događaja
• U jQuery-ju, mnogi DOM događaji imaju ekivalentan jQuery
metod.
• Dodeljivanje click događaja svim paragrafima na strani vrši
se sa:
– $("p").click();
• Sledeći korak je definisanje onoga šta će se desiti kada se
događaj aktivira.
• Potrebno je dodati funkciju događaju:
$("p").click(function(){
// action goes here!!
});
Najčešće korišćene jQuery metode događaja
• $(document).ready() metod nam omogućava da izvršimo

funkciju kada je fokument potpuno učitan.
• click() metod kači rukovaoca događaja funkcije
pojedinačnom HTML elementu.
• Funkcja se izvršava kada korisnik klikne na HTML element.
• U sledećem primeru klikom na <p> element dolazi od
njegovog skrivanja:
$(this).hide();
});
• $(document).ready() metod nam omogućava da izvršimo

funkciju kada je fokument potpuno učitan.
• click() metod kači rukovaoca događaja funkcije
• Funkcja se izvršava kada korisnik klikne na HTML element.
• U sledećem primeru klikom na <p> element dolazi od
njegovog skrivanja:
$(this).hide();
});
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jqu
ery.min.js"></script>
<script>
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
• dblclick() metod kači rukovaoca događaja funkcije

• Funkcija se izvršava kada korisnik izvede double-clicks na
HTML element:
$("p").dblclick(function(){
$(this).hide();
});
<script
<script>
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
• mouseenter() metod kači rukovaoca događaja

funkcije pojedinačnom HTML elementu.
• Funkcija se izvršava kada korisnik postavi pokazivač
miša na HTML element:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
<script
<script>
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
• mouseleave() metod kači rukovaoca događaja

• Funkcija se izvršava kada korisnik povuče pokazivač
miša koji se nalazi nad HTML elementom:
$("#p1").mouseleave(function(){
alert("Bye! You now leave
p1!");
});
<script
<script>
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
• mousedown() metod kači rukovaoca događaja

• Funkcija se izvršava kada korisnik klikne levo,
srednje ili desno dugme na HTML element:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
<script
<script>
$("#p1").mousedown(function(){
});
});
</script>
</head>
<body>
</body>
• mouseup() metod kači rukovaoca događaja

• Funkcija se izvršava kada korisnik otpusti levo,
srednje ili desno dugme na HTML element:
$("#p1"). mouseup(function(){
});
<script
<script>
$("#p1").mouseup(function(){
});
});
</script>
</head>
<body>
</body>
• focus() metod kači rukovaoca događaja funkcije

• Funkcija se izvršava kada element forme bude u
fokusu:
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
jQuery manipulacija DOM-om
• Veoma bitno svojstvo jQuery-ja je
mogućnost manipulacije DOM-om
• jQuery sadrži gomilu metoda vezanih za DOM koje
olakšavaju pristup i manipulaciju DOM.
• DOM definiše standarde za pristup HTML i
XML dokumentima.
Get Content - text(), html(), and val()
• Tri jednostavne, ali moćne, jQuery metode

za DOM manipulaciju su:
– text() – postavlja ili vraća tekst sadržaj
selektovanih elemenata
– html() - postavlja ili vraća sadržaj selektovanih
elemenata (uključujući HTML tagove)
– val() - postavlja ili vraća vrednost polja formi
• Sledeći primer demonstrira kako dobiti sadržaj pomoću
jQuery text() i html() methoda:
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
<script>
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
• Sledeći primer demonstrira kako dobiti vrednost
polja HTML forme pomoću jQuery val() metode:
alert("Value: " + $("#test").val());
});
<script>
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
attr()
• jQuery attr() metoda se koristi za dobijanje
vrednosti atributas.
• Sledeći primer demonstrira kako dobiti vrednost
href atributa linka.
alert($("#w3s").attr("href"));
})
attr()
<script>
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Show href Value</button>
</body>
jQuery - Postavljanje sadržaja I atributa
• Za postavljanje sadržaja koristimo sledeće

metode:
– text() – Postavlja ili vraća sadržaj selektovanih
elemenata
– html() - Postavlja ili vraća sadržaj selektovanih
elemenata (uključujući HTML tag)
– val() - Postavlja ili vraća vrednost elemenata
forme
Attr() metod
<script>
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});
});
</script>
</head>
<body>
<p><a href="https://www.w3schools.com" title="some title" id="w3s">W3Schools.com</a></p>
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>
</body>
jQuery - dodavanje elemenata
• jQuery methode koje se koriste za dodavanje novih
sadržaja:
– append() – dodavanje sadržaja na kraju selekovanog
elementa
– prepend() - dodavanje sadržaja na početku selekovanog
elementa
– after() - dodavanje sadržaja posle selekovanog elementa
– before() - dodavanje sadržaja pre selekovanog elementa
append() metod
<script>
$("p").append(" <b>Appended text</b>.");
});
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<ol>
<li>List item 1</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
prepend() metod
<script>
$("p").prepend("<b>Prepended text</b>. ");
});
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<ol>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
append() i prepend() metode
<script>
function appendText() {
var txt1 = "<p>Text.</p>"; // Create text with HTML
var txt2 = $("<p></p>").text("Text."); // Create text with jQuery
var txt3 = document.createElement("p");
txt3.innerHTML = "Text."; // Create text with DOM
$("body").append(txt1, txt2, txt3); // Append new elements
}
</script>
</head>
<body>
<button onclick="appendText()">Append text</button>
</body>
after() i before() metode
<script>
$("img").before("<b>Before</b>");
});
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140"><br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
after() i before() metode
<script>
function afterText() {
var txt1 = "<b>I </b>"; // Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert new elements after img
}
</script>
</head>
<body>
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">
<p>Click the button to insert text after the image.</p>
<button onclick="afterText()">Insert after</button>
</body>
jQuery - brisanje elemenata
• Brisanje elemenata i sadržaja:
– remove() – Briše selektovani element (i njegove
child elemente)
– empty() – briše child elemente selektovanog
elementa
remove() metode
<script>
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
remove() metode
<head>
<script>
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Empty the div element</button>
</body>
Filtriranje elemenata koji će biti obrisani
<script>
$("p").remove(".test, .demo");
});
});
</script>
<style>
.test {
color: red;
font-size: 20px;
}
.demo {
color: green;
font-size: 25px;
}
</style></head><body>
<p class="test">This is p element with class="test".</p>
<p class="test">This is p element with class="test".</p>
<p class="demo">This is p element with class="demo".</p>
<button>Remove all p elements with class="test" and class="demo"</button>
</body>
Manipulacija CSS-om
• jQuery metode za manipulaciju CSS-om. :
– addClass() – Dodavanje jedne ili više klasa selektovanom
elementu.
– removeClass() – Brisanje jedne ili više klasa
selektovanog elementy.
– toggleClass() - Uključivanje dodavanja/brisanja class-a
selektovanih elemenata
– css() – Postavljanje ili vraćanje stilova atributa
Dodavanje class-e elementu
<script>
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style></head><body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<div>This is some important text!</div><br>
<button>Add classes to elements</button>
</body>
Dodavanje više class-a elementu
<script>
$("#div1").addClass("important blue");
});
});
</script>
<style>
.important {
font-weight: bold;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>
<button>Add classes to first div element</button>
</body>
Brisanje class-e elementu
<script>
$("h1, h2, p").removeClass("blue");
});
});
</script>
<style>
.important {
font-weight: bold;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1 class="blue">Heading 1</h1>
<h2 class="blue">Heading 2</h2>
<p class="blue">This is a paragraph.</p>
<button>Remove class from elements</button>
</body>
toggleClass()
<script>
$("h1, h2, p").toggleClass("blue");
});
});
</script>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<button>Toggle class</button>
</body>
Vraćanje css() svojstva
• css() metoda postavlja ili vraća jedno ili više stil
svojstava koja se odnose na selektovani element.
css("propertyname");
• Vraćanje vrednosti svojstva background-color

prvog pronađenog elementa vrši se sledećim
kodom:
$("p").css("background-color");
Postavljanje css() svojstva
• Postavljanje css svojstva vrši se na sledeći način
css("propertyname","value");
• Postavljanje vrednosti background-color za sve

elemente koji se poklapaju.
$("p").css("background-color", "yellow");
• Postavljanje više svojstava

css({"propertyname":"value","propertyname":"value",...});
Postavljanje više svojstava
<script>
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<button>Set multiple styles for p</button>
</body>
Metode za dimenzije
• jQuery metode za rad sa dimenzijama:
– width() postavlja ili vraća širinu elementa (isključujući padding, border and margin).
– height(), postavlja ili vraća visinu elementa (isključujući padding, border and margin).
– innerWidth() postavlja ili vraća širinu elementa (uključujući padding).
– innerHeight() postavlja ili vraća visinu elementa (uključujući padding).
– outerWidth() postavlja ili vraća širinu elementa (uključujući padding i border).
– outerHeight() postavlja ili vraća visinu elementa (uključujući padding i border).
– outerWidth(true) postavlja ili vraća širinu elementa (uključujući padding, margine i border).
– outerHeight(true) postavlja ili vraća visinu elementa (uključujući padding, margine i border).
Vraćanje širine i visine
<script> <body>
$(document).ready(function(){ <div id="div1"></div>
$("button").click(function(){ <br>
var txt = ""; <button>Display dimensions of div</button>
txt += "Width of div: " + $("#div1").width() + "</br>"; </body>
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
Postavljanje širine i visine
<script>
$("#div1").width(200).height(200);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Resize div</button>
Literatura
Pitanja za proveru znanja
Na narednom času

JavaScript SVE

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

JavaScript SVE

Uploaded by

Copyright:

Available Formats

PROJEKTOVANJE U OBLASTI INTERNET PROGRAMIRANJA

• Moguće je skript smestiti u eksterni fajl sa ekstenzijom .js

abstract continue finally instanceof protected throws

• U JavaScript iskazima informacije se čuvaju u promenljivama

• Sama deklaracija promenljive u skriptu zadaje se imenom

• Ime promenljive ne sme se sukobiti sa rezervisanom reči JavaScripta

Deljenje po modulu (vraća

-- Smanjenje za 1 Promenljiva-- ili --promenljiva

- Promena znaka -izraz

< Manje od izraz<izraz

> Veće od izraz>izraz

<= Manje ili jednako izraz<=izraz

>= Veće ili jednako izraz>=izraz

&& Logičko I Izraz&&izraz

• Logički operatori obično se koriste za poređenje rezultata dva izraza u

• Petlje ponavljanje – označavaju ponavljanje niza koraka dok se

document Objekat dokumenta

text radio button select

textarea checkbox reset option

• S obzirom da se samo jedan document može naći u prozoru, referenca

– Definisanje i kreiranje objekta, ključnom rečju new.

– Definisanje konstruktora objekta, i kreiranje objekta

element.innerHTML = new html content Change the inner HTML of an element

element.attribute = new value Change the attribute value of an HTML element

element.setAttribute(attribute, value) Change the attribute value of an HTML element

element.style.property = new style Change the style of an HTML element

• Dodavanje i brisanje HTML elemenata

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(element) Replace an HTML element

document.write(text) Write into the HTML output stream

<input type="submit" onClick="alert('Submit Me!')">

send() Sends the request to the server

responseText Returns the response data as a string

statusText Returns the status-text (e.g. "OK" or "Not Found")

send() Sends the request to the server (used for GET)

readyState Holds the status of the XMLHttpRequest.

status 200: "OK"

statusText Returns the status-text (e.g. "OK" or "Not Found")

• Ako primate podatke u JSON formatu, moguće ih je konvertovati

• Trebalo bi da izbegavate funkcije u JSON, funkcija će izgubiti svoj

• U HTML5 nije potrebno unositi

• Ovo je čisto iz preventivnih razloga da bi se sprečilo

mouseleave blur unload

• $(document).ready() metod nam omogućava da izvršimo

• $(document).ready() metod nam omogućava da izvršimo

• dblclick() metod kači rukovaoca događaja funkcije

• mouseenter() metod kači rukovaoca događaja

• mouseleave() metod kači rukovaoca događaja

• mousedown() metod kači rukovaoca događaja

• mouseup() metod kači rukovaoca događaja

• focus() metod kači rukovaoca događaja funkcije

• Tri jednostavne, ali moćne, jQuery metode

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

• Za postavljanje sadržaja koristimo sledeće

• Vraćanje vrednosti svojstva background-color

• Postavljanje vrednosti background-color za sve

• Postavljanje više svojstava

You might also like