Professional Documents
Culture Documents
Java Script
Java Script
Uvod u JavaScript
JavaScript se koristi na milion Web stranica da bi se poboljalo dizajniranje, proverile forme, detektovali
browser-i, kreirali cookie-ji, i mnogo vie.
JavaScript je najpopularniji skript jezik na internetu, i funkcionie na svim poznatijim browser-ima, kao
to su Internet Explorer, Mozilla, Firefox, Netscape, Opera.
1.1. ta je JavaScript?
JavaScript daje HTML dizajnerima alat za programiranje - HTML autori obino nisu programeri,
ali JavaScript je skript jezik sa veoma jednostavnom sintaksom.
JavaScript moe da dinamiki ubaci kod u HTML stranu sledea JavaScript naredba:
document.write("<h1>" + name + "</h1>") moe da napie promenljiv tekst koji se
nalazi u promenljivoj name na HTML strani
JavaScript moe da reaguje na dogaaje - JavaScript moe da se podesi tako da se izvri kad se
neto desi, npr. kad se strana uita ili kad korisnik klikne na HTML element
JavaScript moe da proita ili ispie HTML elemente - JavaScript moe da proita i da promeni
sadraj HTML elementa
JavaScript moe da se koristi za proveru ispravnosti unetih podataka - JavaScript moe da se
koristi za proveru ispravnosti podataka unetih u formu, da proveri ispravnost podataka pre nego to se
poalju serveru
JavaScript moe da se koristi za detektovane browser-a korisnika - JavaScript moe da se koristi
za detektovanje browser-a iu zavisnosti od browser-a, uitavanje strane specijalno dizajnirane za taj
browser
JavaScript moe da se koristi za kreiranje cookie-ja - JavaScript moe da se koristi za uvanje i
vraanje informacija o raunaru posetioca
2.
2.1.
Primeri
2.2.
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
JavaScript
2.3.
Tradicionalni programski jezici, kao to je C++ ili Java, svaku instrukciju zavravaju takom i zarezom.
Mnogi programeri nastavljaju ovu naviku, ali je ona opciona u JavaScript-u. Obavezna je samo kad piete
vie od jedne naredbe u istoj liniji.
2.4.
Browser-i koji ne podravaju JavaScript, prikazuju ga kao sadraj strane. Da bi ih u tome spreili,
koristimo tag za umetanje komentara u HTML:
<script type="text/javascript">
<!-document.write("Hello World!")
//-->
</script>
Dve kose linije na kraju linije sa komentarom (//) su u JavaScript-u simboli za komentare. Ovim
spreavamo JavaScript kompajler da kompajlira liniju -->.
3.
JavaScript u sekciji body e biti izvren dok se strana uitava. JavaScript u sekciji head e se izvriti tek
kad bude pozvan.
3.1.
Primeri
Primer 3.1 Skript koji sadri funkcije ide u Head delu dokumenta. Ovako smo sigurni da se skript
uitava pre poziva funkcije
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>
JavaScript
3.2.
JavaScript se izvrava odmah kad browser uitava stranu. Ovo nije ba uvek poeljno, zato to nekad
elimo da izvrimo neki skript tek kad korisnik izazove dogaaj.
Script u sekciji head: Skriptovi koji treba da se izvre kad su pozvani, odnosno kad se izazove neki
dogaaj idu u sekciju head. Na ovaj nain sigurni smo da je skript uitan pre nego to ga bilo ko pozove.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
Script u sekciji body: Skriptovi koji treba da se izvre u trenutku uitavanja strane idu u sekciju body.
Ovakav skript generie sadraj strane.
<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
Script u obe sekcije, body i head: U dokumentu moe da postiji neogranieni broj skriptova, tako da
moete da ih stavite u obe sekcije.
<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>
3.3.
Nekada elite da isti skript koristite na vie stranica, a da ne morate da ga ponovo piete na svakoj strani.
Da bi ovo olakali, moete da napiete JavaScript u posebnom fajlu (sa .js ekstenzijom).
Primedba: Eksterni skript ne moe da sadri tag <script>!
Da bi koristili eksterni skript, stavite .js fajl za vrednost atributa src taga <script>:
JavaScript
<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>
4.
JavaScript promenljive
4.1.
Primeri
4.2.
the
Promenljive
U promeljivoj se uvaju podaci. U toku skripta moe da se promeni u toku skripta. Moete da pozovete
promenljivu po imenu da bi proverili vrednost, ili da bi proverili da li joj se promenila vrednost. Pravila za
zadavanje imena promenljivoj:
4.3.
Deklarisanje promenljive
4.4.
Ime promenljive mora da bude na levoj strani izraza a vrednost na desnoj strani.
JavaScript
4.5.
Ako deklariete promenljivu unutar funkcije, vidljiva je samo unutar funkcije. Kad izaete iz funkcije,
promenljiva e biti unitena. Ovo su lokalne promenljive. Moete da imate lokalne promenljive sa istim
imeno u razliitim funkcijama, zato to postoje samo u funkciji u kojoj su deklarisane.
Ako deklariete promenljivu van funkcije, sve funkcije na strani mogu da joj pristupe. ivotni vek ovakve
promenljive poinje u trenutku kad je deklarisana, a zavrava se kad se strana zatvori.
5.
Uslovne naredbe u JavaScript-u se koriste da bi se izvrile razliite akcije u zavisnosti od nekog uslova.
5.1.
Primeri
JavaScript
</body>
</html>
5.2.
Uslovne naredbe
if naredba ova naredba se koristi ako neki kod elite da izvrite samo ako je uslov ispunjen
if...else naredba ova naredba se koristi ako neki kod elite da izvrite ako je uslov ispunjen, a u
protivnom elite da izvrite neki drugi kod
if...else if....else naredba ova naredba se koristi kad elite da izvrite jedan, od vie moguih
delova koda
switch naredba - ova naredba se koristi kad elite da izvrite jedan, od vie moguih delova koda
JavaScript
5.3.
If naredba
Ova naredba se koristi ako neki kod elite da izvrite samo ako je uslov ispunjen.
Sintaksa
if (uslov)
{
kod koji treba da se ispuni ako je uslov ispunjen
}
Napomena: if se pie malim slovima, ako napiete IF, kompajler e prijaviti greku.
Primer 1
<script type="text/javascript">
//Napii poruku "Dobro jutro" ako je manje od 10 sati
var d=new Date()
var time=d.getHours()
if (time<10)
{
document.write("<b>Dobro jutro</b>")
}
</script>
Primer 2
<script type="text/javascript">
//Napii "Vreme za ruak!" ako je 11 sati
var d=new Date()
var time=d.getHours()
if (time==11)
{
document.write("<b>Vreme za ruak!</b>")
}
</script>
Napomena: Kad uporeujete promenljive, obavezno koristite dva znaka jednakost, jedan pored drugog
(==)!
5.4.
If...else naredba
Ova naredba se koristi ako neki kod elite da izvrite ako je uslov ispunjen, a u protivnom elite da
izvrite neki drugi.
Sintaksa
if (uslov)
{
kod koji treba da se izvrsi ako je uslov ispunjen
}
else
{
kod koji treba da se izvrsi ako uslov nije ispunjen
}
Primer
<script type="text/javascript">
//Ako je vreme manje od 10 h
JavaScript
5.5.
Ova naredba se koristi kad elite da izvrite jedan, od vie moguih delova koda.
Sintaksa
if (uslov)
{
kod koji treba da se izvrsi ako je uslov ispunjen
}
else if (uslov2)
{
kod koji treba da se izvrsi ako je uslov2 ispunjen
}
else
{
kod koji treba da se izvrsi ako ni jedan od uslova nije ispunjen
}
Primer
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Dobro jutro</b>")
}
else if (time>10 && time<16)
{
document.write("<b>Dobar dan</b>")
}
else
{
document.write("<b>Zdravo svima!</b>")
}
</script>
5.6.
Switch naredba
Ova naredba se koristi kad elite da izvrite jedan, od vie moguih delova koda.
Sintaksa
switch(n)
{
case 1:
JavaScript
Naredba ovako funkcionie: Prvo imamo jednostavan izraz n (veoma esto promenljivu), koja se
izraunava jednom. Vrednost izraza se zatim uporeuje sa vrednostima za svako case u strukturi. Ako
postoji poklapanje, izvrava se odgovarajui blok koda. Koristite naredbu break da bi spreili naredbu da
automatski pokrene sledei case.
Primer 5.5 Switch naredba
<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("<b>Konacno petak</b>")
break
case 6:
document.write("<b>Super subota</b>")
break
case 0:
document.write("<b>Pospana nedelja</b>")
break
default:
document.write("<b>Zaista jedva cekam vikend!</b>")
}
</script>
<p>Ovaj JavaScript generise razlicitu pozdravnu poruku
Nedelja=0, Ponedeljak=1, Utorak=2, itd.</p>
</body>
</html>
6.
Opis
Sabiranje
Oduzimanje
Mnoenje
Deljenje
osnovu
dana.
Primetite:
JavaScript operatori
6.1.
Operator
+
na
Aritmetiki operatori
Primer
x=2
y=2
x+y
x=5
y=2
x-y
x=5
y=4
x*y
15/5
5/2
Rezultat
4
20
3
2.5
JavaScript 10
++
Inkrement
--
Dekrement
6.2.
Operator
=
+=
-=
*=
/=
%=
5%2
10%8
10%2
x=5
x++
x=5
x--
Isto kao
x=y
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
6.3.
Operatori poreenja
Operator
==
===
Opis
je jednako
je jednako (poredi vrednost i tip)
!=
>
<
>=
<=
nije jednako
vee od
manje od
vee ili jednako
manje ili jednako
6.4.
Opis
and (i)
||
or (ili)
not (ne)
x=4
Operatori dodele
Primer
x=y
x+=y
x-=y
x*=y
x/=y
x%=y
Operator
&&
1
2
0
x=6
Primer
5==8 vraca false
x=5
y="5"
x==y vraa true
x===y vraa false
5!=8 vraa true
5>8 vraa false
5<8 vraa true
5>=8 returns false
5<=8 returns true
Logiki operatori
Primer
x=6
y=3
(x < 10 && y > 1) vraa true
x=6
y=3
(x==5 || y==5) vraa false
x=6
y=3
!(x==y) vraa true
6.5.
String operatori
JavaScript 11
String je najee tekst, na primer "Hello World!". Da bi spojili dve ili vie string promenljivih, koristimo
+ operator.
txt1="What a very"
txt2="nice day!"
txt3=txt1+txt2
6.6.
Uslovni operatori
JavaScript takoe sadri i uslovne operatore koji dodeljuju vrednost promenljivoj na osnovu nekog uslova.
Sintaksa
imepromenljive=(uslov)?vrednost:vrednost2
Primer
pozdrav=(posetilac=="PREDS")?"Dragi predsednice ":"Dragi "
Ako promenljiva posetilac ima vrednost PREDS, u promenljivu pozdrav stavljamo tekst "Dragi
predsednice ". U suprotnom u promenljivu stavljamo tekst "Dragi ".
7.
U JavaScript-u moemo da kreiramo razliite vrste poruka: poruku upozorenja (Alert box), poruka za
potvrdu (Confirm box) i poruke korisniku (Prompt box).
7.1.
Primeri
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Zdravo ponovo! Ovako mi" + '\n' + "dodajemo novi red u alert box!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>
JavaScript 13
7.2.
Alert Box
Alert box se koristi kad elite da budete sigurni da je informacija stigla do korisnika. Kada se pojavi alert
box, korisnik treba da pritisne dugme "OK" da bi nastavio.
Sintaksa:
alert("neki tekst")
7.3.
Confirm Box
Confirm box se koristi kad elite da korisnik potvrdi ili prihvati neto. Kad se pojavi confirm box, korisnik
mora da pritisne dugme "OK" ili "Cancel" da bi nastavio. Ako je pritisnuo dugme "OK", povratna
vrednost je true. Ako je pritisnuo dugme "Cancel", povratna vrednost je false.
Sintaksa:
confirm("neki tekst")
7.4.
Prompt Box
Prompt box se koristi kad elite da korisnik unese neku vrednost pre nego to pristupi strani. Kad se
pojavi prompt box, korinik mora da pritisne dugme "OK" ili "Cancel", poto je uneo vrednost. Ako je
pritisnuo dugme "OK", povratna vrednost je true. Ako je pritisnuo dugme "Cancel", povratna vrednost
je false.
Sintaksa:
prompt("neki tekst","poetna vrednost")
8.
JavaScript funkcije
Funkcija je blok koda koji moe da se koristi vie puta, izvrava se pri nastupanju nekog dogaaja ili kad
se pozove.
8.1.
Primeri
function
will
be
called.
The
function
will
alert
JavaScript 14
JavaScript 15
document.write(myFunction())
</script>
<p>The script in the body section calls a function.</p>
<p>The function returns a text.</p>
</body>
</html>
8.2.
JavaScript funkcije
Da bi spreili browser da neki skript izvri kad se uita strana, skript moete da napiete kao funkciju.
Funkcija sadri skript koji e se izvriti samo pri pozivu ili kad se desi neki dogaaj. Funkciju moete da
pozovete sa bilo kog mesta na strani (ili ak i sa druge strane ako je funkcija deo eksternog.js fajla).
Funkcije se definiu na poetku strane, u sekciji <head>.
Primer
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>
Da linija: alert("Hello world!!"), u gornjem primeru nije bila napisana u funkciji, izvrila bi se
kad se stranica uita. Ovako, skript nee biti izvren pre nego to korisnik pritisne dugme. Dodali smo
dogaaj onClick dugmetu koji e izvriti funkciju function displaymessage() kad se pritisne
dugme. Vie o JavaScript dogaajima ete nauiti kasnije u poglavlju 13.
8.3.
var1, var2, itd. su promenljive ili vrednosti koje se prenose funkciji. { i } definiu poetak i kraj
funkcije.
Napomena: Funkcija bez argumenata mora da ukljui zagrade () posle imena funkcije.
function imefunkcije()
{
neki kod
}
Napomena: Ne zaboravite na vanost velikih slova u JavaScript-u! Re function mora da bude napisana
malim slovima, inae se prijavljuje greka! Takoe, funkciju morate da zovete sa istim slovima kao to
stoji u definiciji funkcije.
8.4.
Naredba return
Naredba return se koristi da bi se specificirala vrednost koju funkcija. Dakle, ako funkcija ima
povratnu vrednost, mora da sadri return naredbu.
Primer
Sledea funkcija vraa proizvod dva broja(a i b):
function prod(a,b)
{
x=a*b
return x
}
9.
Petlje se u JavaScript-u koriste da bi se jedan blok naredbi izvrio specificiran broj puta, ili dok je neki
uslov ispunjen.
9.1.
Primeri
JavaScript 17
9.2.
JavaScript petlje
Vie puta, kad piete kod, elite da je jedan deo koda izvri vie puta za redom. Umesto da slian kod
napiete vie puta, za ovo moete da koristite petlje. U JavaScript-u postoje dve vrste petlji:
for petlje koje prolaze kroz deo koda specificiran broj puta
while petlje koje prolaze kroz deo koda sve dok je neki uslov ispunjen
9.3.
For petlja
For petlja se koristi kad u napred znate koliko puta neki skript treba da se izvri.
Sintaksa
for (prom=pocetnavrednost;prom<=krajnjavrednost;prom=prom+increment)
{
kod koji treba da se izvrsi
}
Primer 9.3
Objanjenje: Naredni primer definie petlju koja poinje sa i=0. Petlja se izvrava dok je i manje ili
jednako 10. i se poveava za 1 svaki put kad se petlja izvri.
Napomena: Parametar increment takoe moe da bude i negativan, a <= moe da bude bilo koja naredba
poreenja.
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("Broj je " + i)
document.write("<br />")
}
</script>
</body>
</html>
Rezultat:
Broj
Broj
Broj
Broj
Broj
je
je
je
je
je
0
1
2
3
4
JavaScript 18
Broj
Broj
Broj
Broj
Broj
Broj
je
je
je
je
je
je
5
6
7
8
9
10
10.
JavaScript 19
Rezultat
Broj
Broj
Broj
Broj
Broj
Broj
Broj
Broj
Broj
Broj
Broj
je
je
je
je
je
je
je
je
je
je
je
0
1
2
3
4
5
6
7
8
9
10
Primer 10.4
<html>
<body>
<script type="text/javascript">
var i=0
do
{
document.write("Broj je " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>
</body>
</html>
JavaScript 20
Rezultat
Broj je 0
11.
11.1. Primeri
Primer 11.1 Break
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("Broj je " + i)
document.write("<br />")
}
</script>
<p>Objanjenje: Za i=3 se izlazi iz petlje.</p>
</body>
</html>
Rezultat
Broj je 0
Broj je 1
Broj je 2
Rezultat
Broj je 0
JavaScript 21
Broj
Broj
Broj
Broj
Broj
Broj
Broj
Broj
Broj
je
je
je
je
je
je
je
je
je
1
2
4
5
6
7
8
9
10
12.
Naredba for...in
Naredba for...in se koristi da bi se prolo kroz elemente niza ili kroz atribute objekta. Kod u telu naredbe
se izvrava po jednom za svaki element/atribut.
Sintaksa
for (promenljiva u objektu)
{
kod koji treba da se izvri
}
13.
JavaScript dogaaji
Klik miem
Pritisak tastera
JavaScript 22
Napomena: Dogaaji se obino koriste u kombinaciji sa funkcijama, i funkcije se ne izvravaju pre nego
to se desi dogaaj.
13.4. onSubmit
Dogaaj onSubmit se koristi za validaciju SVIH polja forme, pre njihovog slanja.
Sledi primer korienja dogaaja onSubmit. Funkcija checkForm() se poziva kad korisnik pritisne
dugme submit u formi. Ako vrednosti polja nisu prihvaene, predaja e biti obustavljena. Funkcija
checkForm() vraa true ili false. Ako vrati true forma forma e biti predata, ako ne, slanje
forme ce biti obustavljeno:
<form method="post" action="xxx.htm"
onsubmit="return checkForm()">
14.
kako da hvatate greke i kako da ih obraujete, tako da ne izgubite posetioce. Postoje dva naina na koje
moete da uhvatite greku na strani:
Primer 14.1
Sledei primer sadri skript koji treba da prikae "Dobrodoli!" kad pritisnete dugme. Ali, postoji greka u
kucanju u funkciji message(). alert() je pogreno napisano kao adddlert(). Javlja se
JavaScript greka:
<html>
<head>
<script type="text/javascript">
function message()
{
adddlert("Dobrodoli!")
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
JavaScript 24
Primer 14.2
Sledei primer koristi dijalog sa potvrdom da obavesti korisnika o tome da je nastupila greka i da moe
da pritisnu dugme OK da bi nastavio da gleda stranu, ili dugme Cancel da bi se vratio na matinu stranu
(vri se redirekcija korisnika).
<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Dobrodosli!")
}
catch(err)
{
txt="Na ovoj strani se desila greska.\n\n"
txt+="Kliknite OK da bi nastavili da posmatrate stranu,\n"
txt+="ili Cancel da bi se vratili na maticnu stranu.\n\n"
if(!confirm(txt))
{
document.location.href="http://www.w3schools.com/"
}
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
JavaScript 25
<script type="text/javascript">
var x=prompt("Unesite broj izmedju 0 i 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er)
{
if(er=="Err1")
alert("Greska! Broj je prevelik")
if(er == "Err2")
alert("Greska! Broj je premali")
if(er == "Err3")
alert("Greska! Znak koji ste uneli nije broj")
}
</script>
</body>
</html>
Vrednost koju vraa onerror odreuje da li e browser da prikae standardnu error poruku. Ako vratite
false, browser prikazuje standardnu error poruku JavaScript consoli. Ako vratite true, browser ne
prikazuje standardnu error poruku.
Primer 14.4
Sledei primer pokazuje kako da uhvatite greku pomou:
<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="Na ovoj strani postoji greka.\n\n"
txt+="Greka: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Linija: " + l + "\n\n"
txt+="Pritisnite OK da bi nastavili.\n\n"
JavaScript 26
alert(txt)
return true
}
function message()
{
adddlert("Dobrodosli!")
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
15.
U JavaScript-u string poinje i zavrava se navodnicima ( ili ). To znai da e prethodni tekst da bude
odseen na: We are the so-called
Da bi reili ovaj prblem, moramo da stavimo znak (\) pre oba navodnika u rei "Viking". Ovo oba
navodnika pretvara u deo stringa.:
var txt="We are the so-called \"Vikings\" from the north."
document.write(txt)
JavasScript e sada da prikae pravilan tekst: We are the so-called "Vikings" from the north.
Evo jo jednog primer:
document.write ("You \& me are singing!")
U sledeoj tabeli su dati specijalni znaci za koje morate da koristite \ prilikom dodavanja u string:
Code
Izlaz
\'
apostrof
\"
navodnik
\&
ampersand
\\
backslash
\n
novi red
\r
carriage return
\t
tab
\b
backspace
\f
form feed
16.
JavaScript saveti
16.2. Razmaci
JavaScript ignorie dodatne razmake. Slobodno dodajte razmake da bi dobili pregledniji kod. Sledee
linije su ekvivalentne:
name="Hege"
name = "Hege"
16.4. Komentari
Komentare moete da unesete u skript pomou //:
//ovo je komentar
document.write("Hello World!")
17.
JavaScript 28
Metodi
Metodi su akcije koje mogu da se preduzmu nad objektima. U sledeem primeru koristimo metod
toUpperCase() objekta String da bi prikazali string velikim slovima:
<script type="text/javascript">
var str="Hello world!"
document.write(str.toUpperCase())
</script>
JavaScript 29
Primeri upotrebe:
Sleei primer koristi metod toUpperCase() da bi konvertovao string u string napisan velikim slovima.
var txt="Hello world!"
document.write(txt.toUpperCase())
JavaScript 30
JavaScript 31
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Objekat tipa Date definiemo pomou kljune rei new. Sledea linija definie objekat Date koji se
zove myDate:
var myDate=new Date()
Napomena: Date objekat automatski sadri u svojoj inicijalnoj vrednosti trenutno vreme i datum.
Datumom jednostavno manipuliemo koristei metode dostupne za objekat Date. U sledeem primeru
postavljamo objekat Date na odreeni datum (14. Januar 2010):
var myDate=new Date()
myDate.setFullYear(2010,0,14)
Primedba: Ako prethodno sabiranje promeni mesec ili godinu, objekat Date to sam prepozna i obradi.
Objekat tipa Date takoe moe i da uporedi dva datuma. Sledei primer uporeuje dananji datum sa
datumom 14. Januar 2010:
var myDate=new Date()
myDate.setFullYear(2010,0,14)
var today = new Date()
if (myDate>today)
alert("Danas je pre 14. Januara 2010")
else
alert("Today is 14. Januara 2010")
JavaScript 32
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = ""
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>
Objekat tipa Array definiemo pomou kljune rei new. Sledea linija koda definie objekat tipa
Array koji se zove myArray:
var myArray=new Array()
Postoje dva naina dodeljivanja vrednosti polju (moete da dodate koliko hoete vrednosti da bi definisali
onoliko promenljivih koliko vam je potrebno).
1:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
Takoe moete da prosledite integer argument kad kreirate polje da bi definisali njegovu veliinu:
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
var mycars=new Array("Saab","Volvo","BMW")
Napomena: Ako kao vrednosti lanova polja navedete vrednosti true/false tip promenljivih e biti
numeric ili Boolean a ne String.
Moete da se referencirate na konkretan element niza navoenjem imena niza i indeksa. Indeksi poinju
od 0.
Sledea linija koda:
document.write(mycars[0])
Da bi promenili vrednosti u postojeem nizu, samo dodelite novu vrednost odgovarajuem elementu niza:
mycars[0]="Opel"
Objekat tipa Boolean se koristi da bi konvertovali druge vrednosti u Boolean vrednosti (true ili
false).
Primer 17.18 Provera boolean vrednosti
<html>
<body>
<script type="text/javascript">
var b1=new Boolean( 0)
var b2=new Boolean(1)
var b3=new Boolean("")
var b4=new Boolean(null)
var b5=new Boolean(NaN)
var b6=new Boolean("false")
document.write("0 is boolean "+ b1 +"<br />")
document.write("1 is boolean "+ b2 +"<br />")
document.write("An empty string is boolean "+ b3 + "<br />")
document.write("null is boolean "+ b4+ "<br />")
document.write("NaN is boolean "+ b5 +"<br />")
document.write("The string 'false' is boolean "+ b6 +"<br />")
</script>
</body>
</html>
Objekat tipa Boolean definiemo pomou kljune rei new. Sledei kod definie objekat tipa Boolean
koji se zove myBoolean:
var myBoolean=new Boolean()
Napomena: Ako objekat tipa Boolean nema inicijalnu vrednost, ili je ta vrednost 0, -0, null,
"", false, nedefinisana ili NaN, vrednost objekta je false. U svim drugim sluajevima, vrednost je
true (ak i za string "false")!
Sve linije u narednom kodu kreiraju Boolean objekat sa inicijalnom vrednou false:
var
var
var
var
var
var
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
Boolean()
Boolean(0)
Boolean(null)
Boolean("")
Boolean(false)
Boolean(NaN)
Sve linije narednog koda kreiraju Boolean objekat sa inicijalnom vrednou true:
var
var
var
var
myBoolean=new
myBoolean=new
myBoolean=new
myBoolean=new
Boolean(true)
Boolean("true")
Boolean("false")
Boolean("Richard")
JavaScript 35
</html>
Primer 17.21
<html>
<body>
<script type="text/javascript">
document.write(Math.max(5,7) + "<br />")
document.write(Math.max(-3,5) + "<br />")
document.write(Math.max(-3,-5) + "<br />")
document.write(Math.max(7.25,7.30))
</script>
</body>
</html>
Objekat tipa Math ukljuuje vie matematikih vrednosti i funkcija. Pre korienja Math objekta,
potrebno je da ga definiete.
JavaScript obezbeuje osam matematikih vrednosti (konstanti) koje moete da koristite pomou Math
object. To su: E, PI, kvadratni koren od 2, kvadratni koren od 1/2, prirodni logaritam od 2, prirodni
logaritam od 10, logaritam sa osnovom 2 od E i logaritam sa osnovom 10 od E.
Ove vrednosti moete da koristite u JavaScript-u na sledei nain:
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Sledei primer koristi metod random() Math objekta da bi vratio sluajnu vrednost izmeu 0 i 1:
JavaScript 36
document.write(Math.random())
Sledei primer koristi metode floor() i random() Math objekta da bi vratio sluajan broj izmeu 0
i 10:
document.write(Math.floor(Math.random()*11))
18.
Detekcija browser-a
18.1. Primeri
Primer 18.1 Detektovanje browser-a i verzije browser-a posetioca
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>
</html>
JavaScript 37
document.write("<br />")
document.write("MinorVersion=" + x.appMinorVersion)
document.write("<br />")
document.write("Name=" + x.appName)
document.write("<br />")
document.write("Version=" + x.appVersion)
document.write("<br />")
document.write("CookieEnabled=" + x.cookieEnabled)
document.write("<br />")
document.write("CPUClass=" + x.cpuClass)
document.write("<br />")
document.write("OnLine=" + x.onLine)
document.write("<br />")
document.write("Platform=" + x.platform)
document.write("<br />")
document.write("UA=" + x.userAgent)
document.write("<br />")
document.write("BrowserLanguage=" + x.browserLanguage)
document.write("<br />")
document.write("SystemLanguage=" + x.systemLanguage)
document.write("<br />")
document.write("UserLanguage=" + x.userLanguage)
</script>
</body>
</html>
Primer 18.5
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>
</html>
Promenljiva browser u prethodnom primeru sadri ime browser-a, npr. "Netscape" ili "Microsoft
Internet Explorer".
Atribut appVersion vraa string koji sadri mnogo vie informacija od samo broja verzije, ali smo mi
za sada zainteresovani samo za ovaj podatak. Da bi izvukli broj verzije iz ovog stringa koristimo funkciju
parseFloat(), koja izvlai prvu stvar koja izgleda kao decimalni broj iz stringa.
VANA NAPOMENA! Broj verzije u IE 5.0 i kasnije je POGREAN! Microsoft poinje string
appVersion brojeviima 4.0. u IE 5.0 i IE 6.0!!! Ipak, JavaScript je isti u verzijama IE6, IE5 i IE4, tako
da je za veinu skriptova sve u redu.
Primer 18.6 Prikazivanje razliitog upozorenja, zavisno od verzije browser-a:
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
{alert("Your browser is good enough!")}
else
{alert("It's time to upgrade your browser!")}
}
</script>
</head>
<body onload="detectBrowser()">
</body>
</html>
19.
Cookie
19.1. Primeri
Primer 19.1 Kako se kreira cookie za dobrodolicu
<html>
<head>
<script type="text/javascript">
JavaScript 39
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return null
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate)
}
function checkCookie()
{
username=getCookie('username')
if (username!=null)
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null||username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</body>
</html>
19.2. ta je cookie?
Cookie je promenljiva koja se uva u raunaru posetioca. Svaki put kad browser sa nekog raunara zatrai
stranu, on e poslati i cookie. Pomou JavaScript-a, moete da kreirate i vratite vrednost cookie-ja.
Primeri za cookie:
Cookie za ime Prvi put kad posetilac poseti vau stranu, mora da unese svoje ime. Ime se uva u
cookie-ju. Sledei put kad vas poseti, moete da mu poaljete pozdravnu poruku tipa "Dobrodoli
John Doe!" Ime dobijate od sauvanog cookie-ja
Cookie za ifru - Prvi put kad posetilac poseti vau stranu, mora da unese ifru. ifra se uva u
cookie-ju. Sledei put kad vas poseti, ifru dobijate od sauvanog cookie-ja
Cookie za datum - Prvi put kad posetilac poseti vau stranu, moete da sauvate trenutni datum u
cookie-ju. Sledei put kad vas poseti, moete da mu poaljete pozdravnu poruku tipa "Vaa poslednja
poseta je u utorak, 11. avgusta, 2005!"
JavaScript 40
Parametri funkcije sadre ime za cookie, vrednost za cookie i broj dana za koji cookie-ju istie rok
vanosti.
U prethodnoj funkciji smo konvertovali broj dana u validan datum. Nakon toga smo sauvali ime za
cookie, vrednost i datum isticanja u objektu document.cookie.
Zatim, kreiramo drugu funkciju koja proverava da li je cookie postavljen:
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return null
}
Prethodna funkcija prvo proverava da li je cookie sauvan u objektu document.cookie. Ako objekat
document.cookie sadri neki cookie-je, proverava se da li je na cookie sauvan. Ako se pronae na
cookie, vraa se njegova vrednost, u suprotnom, vraa se null.
Na kraju, kreiramo funkciju koja prikazuje pozdravnu poruku ako je cookie postavljen, a ako nije,
prikazuje dijalog u kome trai da se unese ime korisnika:
function checkCookie()
{
username=getCookie('username')
if (username!=null)
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null||username!="")
{
setCookie('username',username,365)
}
}
}
JavaScript 41
20.
JavaScript moe da se koristi za proveru (validaciju) ulaznih podataka u HTML obrascu pre slanja
njihovog sadraja serveru. Najee se vre sledee provere:
JavaScript 42
JavaScript 43
{alert(alerttxt);return false}
else {return true}
}
}
21.
JavaScript animacije
21.1. Primeri
Primer 21.1 Animacija dugmeta
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
</head>
JavaScript 44
<body>
<a href="http://www.w3schools.com" target="_blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" name="b1" width="26" height="26"
/></a>
</body>
</html>
JavaScript 45
</head>
<body>
<a href="http://www.w3schools.com" target="_blank"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1" />
</a>
</body>
</html>
22.
JavaScript slike-mape
22.1. Primeri
Primer 22.1 Jednostavna HTML slika mapa
<html>
<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
</body>
</html>
JavaScript 46
<p id="desc"></p>
</body>
</html>
Rezultat
Moemo da dodamo dogaaje (koji pozivaju JavaScript) tagovima <area> unutar slike-mape. Tag
<area> podrava dogaaje onClick, onDblClick, onMouseDown, onMouseUp,
onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp,
onFocus, i onBlur.
Evo prethodnog primera, sa dodatim JavaScript-om:
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
JavaScript 47
23.
Pomou JavaScript-a, mogue je da se neki kod izvri ne odmah nakon to je funkcija pozvana, ve nakon
nekog navedenog vremenskog perioda. Ovo su vremenski dogaaji.
23.1. Primeri
Primer 23.1 Jednostavan tajming
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick = "timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
</html>
JavaScript 48
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will tell you when two, four, and six
seconds have passed.</p>
</body>
</html>
JavaScript 49
</html>
23.3. setTimeout()
Sintaksa:
var t=setTimeout("javascript naredba",broj milisekundi)
Metod setTimeout() vraa vrednost u prethodnoj naredbi, vrednost se uva u promenljivoj t. Ako
elite da obustavite metod setTimeout(), referencirate ga koristei ime promenljive.
Prvi parametar funkcije setTimeout() je string koji sadri JavaScript naredbu. Ovo moe da bude
naredba poput "alert('5 seconds!')" ili poziv funkcije, kao "alertMsg()".
Drugi parametar navodi za koliko sekundi elite da odloite izvrenje prethodne naredbe.
Napomena: Jedna sekunda sadri 1000 milisekundi.
Primer 23.6 Kad pritisnete dugme, prikazuje se poruka nakon 5 sekundi.
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
JavaScript 50
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
</body>
</html>
23.4. clearTimeout()
Sintaksa
clearTimeout(setTimeout_promenljiva)
Primer 23.8 Sledei primer je ista beskonana petlja iz prethodnog primera. Jedina razlika je to
smo dodali dugme"Stop Count!" koje zaustavlja tajmer:
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
JavaScript 51
<form>
<input type="button" value="Start count!"
onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!"
onClick="stopCount()">
</form>
</body>
</html>
24.
24.1. Primeri
Primer 24.1 Kreiranje direktne instance objekta
<html>
<body>
<script type="text/javascript">
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"
document.write(personObj.firstname + " is " + personObj.age + " years old.")
</script>
</body>
</html>
Atributi
Sintaksa za pristup atributima objekta je:
imeObjekta.imeAtributa
Atribut moe da se doda objektu, tako to mu se dodeli vrednost. Pretpostavimo da objekat personObj
ve postoji, moete da mu dodate atribut firstname, lastname, age, i eyecolor na sledei
nain:
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=30
personObj.eyecolor="blue"
document.write(personObj.firstname)
Metodi
Objekat moe da sadri i metode.
Metod se poziva na sledei nain:
imeObjekta.imeMetoda()
Dodavanje metoda objektu personObj je takoe jednostavno. Sledei kod dodaje motod eat()
objektu personObj:
personObj.eat=eat
Primetite da je ablon u stvari funkcija. Unutar funkcije dodeljujete vrednosti atributima objekta this.
Razlog korienja rei "this" je taj to u jednom trenutku moe da postoji vie razliitih osoba. Re
"this" se odnosi na konkretnu instancu objekta person (na konkretnu osobu).
Kad ste jednom definisali ablon, nove primerke (instance) objekta kreirate na sledei nain:
myFather=new person("John","Doe",50,"blue")
myMother=new person("Sally","Rally",48,"green")
JavaScript 53
Takoe moete da dodate i neko metode objektu person. Ovo se takoe radi unutar ablona:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
this.newlastname=newlastname
}
Primetite da su metodi samo funkcije dodate objektima. Nakon ovoga, treba da napiemo funkciju
newlastname():
function newlastname(new_lastname)
{
this.lastname=new_lastname
}
Funkcija newlastname() definie novo prezime osobe i dodeljuje ga osobi. JavaScript zna na koju
osobu mislite, zato to koristimo re this. Sada, moemo da napiemo kod:
myMother.newlastname("Doe").
JavaScript 54