You are on page 1of 28

Uvod

HTML u jednom trenutku postaje


ograniavajui faktor
Potrebna je nova tehnologija za
realizaciju dinamikih delova
aplikacije
CGI (Common Gateway Interface)

Internet programiranje
JavaScript

Uvod

Opis jezika

Decembar 1995.god, Netscape i Sun


su predstavili JavaScript 1.0,
originalno nazvan LiveScript
JScript
ECMAScript 1.0, kasnije ISO/IEC
16262 standard
Danas Netscape i Microsoft standardi
su identini u preko 95% sluajeva

Osobine
Platformski neutralan
Modularno programiranje
Integrisanost sa HTML-om
Nema velikih slinosti sa Javom

Izvravanje koda
<SCRIPT LANGUAGE="JavaScript">
...JavaScript kod
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript"
SRC=" JSkod.js">
</SCRIPT>

Komentari
Za komentar jedne linije - oznaka //
:
// komentar u jednoj liniji ...

Za komentar vie redova - /* za


poetak bloka pod komentarom i */
za kraj bloka pod komentarom:
/*
komentar u vie redova...
*/

Prikaz
<SCRIPT
LANGUAGE="JavaScript">
document.write(<B>Prvi
red</B><BR><I>Drugi
red</I>)
</SCRIPT>
Moe, ali i ne mora simbol ;

Imena promenljivih

Promenljive

Sadre vrednosti koje program smeta u


okviru memorije raunara

Slinost sa kutijama

Da bi se koristile u okviru programa:

Napisati naredbu koja kreira promenljivu

Dodeliti joj eljeno ime

Dodeljivanje vrednosti promenljivoj je


isto kao i smetanje vrednosti u okviru
promenljive

var

U okviru JavaScript jezika, rezervisana


re se koristi za kreiranje promenljivih

Kreiranje promenljive se naziva i


deklaracija promenljive

Da bi se dodelila odreena vrednost ili da


bi se inicijalizovala promenljiva koristi se
sintaksa:

var imePromenljive = vrednost;

Vrednost dodeljena promenljivoj moe


biti string ili numerika vrednost

Ime koje se dodeljuje promenljivoj se naziva i


identifikator

Pravila i konvencije pri imenovanju promenljivih:

Identifikator mora poinjati slovom, znakom dolar


($), ili donjom crtom ( _ )
U okviru imena se mogu koristiti brojevi, ali ne kao
prvi karakter

Ne mogu se koristiti prazna mesta u okviru imena

Ne mogu se koristiti rezervisane rei za identifikatore

Tipovi podataka

Specifina kategorija informacija koje se


sadre u okviru promenljive

Pomae da raunar odredi koliko j


eprostora potrebno da bi se smestila
odreena promenljiva

Tip podataka definie i vrstu operacija


koje se mogu izvriti sa datom
promenljivom

Null vrednost

Deklaracija

Vrednost null je

tip podataka/vrednost koja se moe dodeliti


promenljivoj

Pokazuje da promenljiva ne sadri nikakvu korisnu


vrednost
Promenljiva sa vrednou null ima takvu
dodeljenu vrednost

JavaScript je jednostavniji programski jezik

Ne zahteva se, i nije dozvoljeno, deklarisati tip


podataka promenljive

JavaScript interpreter

Automatski prepoznaje koji tip podataka je smeten


u okviru promenljive

Jednostavniji programski jezici - JavaScript

Ne zahtevaju da se deklarie tip podataka


promenljive
Dinamiki tip podataka
Tip podataka se moe menjati nakon same
deklaracije

Vrednost null se dodeljuje promenljivoj kada se


eli definisati da promenljiva ne sadri nikakav
podatak

Definicija tipa podataka

Zahtevaju da se deklarie tip podataka


promenljive
Statiki tip podataka

Tip podataka se ne menja nakon same deklaracije

Null je u stvari bez vrednosti

Vii programski jezici

Osobine

Dodeljuje tip podatka promenljivoj dinamiki

JavaScript je case sensitive jezik


Tipovi podataka koji su podrani su
celobrojni brojevi, racionalni brojevi,
stringovi i logiki tip.
Celobrojni brojevi se mogu koristiti sa
brojnom osnovom 10, 8 ili 16.
Racionalni brojevi - 3.14, 314E-2 ili
314e-2.
String predstavlja proizvoljan niz
karaktera izmeu navodnika (neki
tekst) ili apostrofa (neki tekst)

Aritmetiki

Operatori
Aritmetiki
Na nivou bita
Relacionalni
Logiki

Aritmetiki
a = 1 + 1;
b = a * 3;
c = b / 4;
d = b a;
e = -d;
document.write(a, b, c, d, e, su , ,a,
,b, ,c, ,d, ,e);
Nakon izvravanja prethodnog primera
dobija se sledei tekst na ekranu:
a, b, c, d, e, su 2 6 1.5 4 -4

Operator

Opis

Operator

Opis

sabiranje

+=

sabiranje dodela

oduzimanje

-=

oduzimanje dodela

mnoenje

*=

mnoenje dodela

deljenje

/=

deljenje dodela

moduo

%=

Moduo dodela

++

inkrement

--

dekrement

Na nivou bita
Operator

Upotreba

Opis

Logiko I (AND)

a&b

Rezultat se dobija 1, jedino ako su oba bita 1, u ostalim sluajevima rezultat je 0.

Logiko ILI (OR)

a|b

Rezultat se dobija 0, jedino ako su oba bita 0, u ostalim sluajevima rezultat je 1.

Logiko eksluzivno ILI


(XOR)

a^b

Rezultat se dobija 1, ako biti imaju razliite vrednosti, u sluaju da imaju iste
vrednosti, rezultat je 0.

Logiko NE (NOT)

~a

Komplementira bitove operanda a.

Pomeranje ulevo

a << b

Pomera binarni sadraj operanda a za b mesta ulevo. Prazna mesta popunjava sa


vrednou 0.

Pomeranje udesno sa
znakom

a >> b

Pomera binarni sadraj operanda a za b mesta udesno. Prazna mesta popunjavju sa


vrednou najstarijeg bita.

Pomeranje udesno sa
nulama

a >>> b

Pomera binarni sadraj operanda a za b mesta udesno. Prazna mesta popunjavju sa


vrednou 0.

Na nivou bita
& 9 rezulat 9 (1111 & 1001
= 1001)
15 | 9 rezulat 15 (1111 | 1001
= 1111)
15 ^ 9 rezulat 6 (1111 ^ 1001
= 0110)

Logiki

15

Logiki
a = true;
b = false;
c = a || b;
d = a && b;
f = (!a && b) || (a && !b);
g = !a;
document.write( " a = " + a + "<BR>" );
document.write ( " b = " + b + "<BR>" );
document.write ( " c = " + c + "<BR>" );
document.write ( " d = " + d + "<BR>" );
document.write ( " f = " + f + "<BR>" );
document.write ( " g = " + g);

Rezultat izvravanja prethodnog primera je:


a = true
b = false
c = true
d = false
f = true
g = false

Operator

Upotreba

I (&&)

expr1 && expr2

Opis
Rezultat se dobija true, jedino ako su oba operanda true, u ostalim sluajevima rezultat je false.

ILI (||)

expr1 || expr2

Rezultat se dobija false, jedino ako su oba operanda false, u ostalim sluajevima rezultat je true.

NE (!)

!expr

Rezultat se dobija komplement od vrednosti operanada. Ako je operand true, rezultat je false, ako
je operand false, rezultat je true

Operatori poreenja
Operator

Upotreba

Opis

Jednakost (==)

Rezultat je true ako su operandi jednaki

x == y rezultat je true ako su x i y jednaki.

Nejednakost (!=)

Rezultat je true ako su operandi razliiti.

x != y rezultat je true ako su x i y razliiti.

Vee (>)

Rezultat je true ako je levi operand vei od


desnog operanda.

x > y rezultat je true ako je x vee od y.

Vee ili jednako (>=)

Rezultat je true ako je levi operand vei ili


jednak desnom operandu

x >= y rezultat je true ako je x vee ili jednako


y.

Manje (<)

Rezultat je true ako je levi operand manji od


desnog operanda

x < y rezultat je true ako je x manje od y.

Manje ili jednako (<=)

Rezultat je true ako je levi operand manji ili


jednak desnom operandu

x <= y rezultat je true ako je x manje ili jednako


y.

Jednako bez konverzije


tipova (===)

Rezultat je true ako su operandi jednaki bez


konverzije podataka

x === y rezultat je true ako su x i y jednaki bez


konverzije podataka

Razliito bez konverzije


tipova (!==)

Rezultat je true ako su operandi razliiti bez


konverzije podataka

x !== y rezultat je true ako su x i y razliiti bez


konverzije podataka

Operatori poreenja

Ternarni operator

a = 4;
b = 1;
c = a < b;
d = a == b;
document.write( c = + c + <BR> );
document.write ( d = + d );
Rezultat izvravanja prethodnog primera
je
c = false
d = false

Kontrole toka - if

switch

if (boolean_izraz) blok1;
[else blok2;]

if (x == 8) {

y=x;
}else {
z=x;
y=y*x

expression ? statement1 : statement2


gde je izraz expression bilo koji izraz iji
rezultat je vrednost logikog tipa. Ako je
rezultat izraza true, onda se izvrava
statement1, u suprotnom statement2.
ratio = denom ==0 ? 0 : num / denom

switch (izraz) {
case vr1: blok1; [break];
...
case vrN: blokN; [break];
[default: blok_def]

if (mesec == 1)
ime_meseca = Januar
else if (mesec == 2)
ime_meseca = Februar
else if (mesec == 3)
ime_meseca = Mart
else if (mesec == 4)
ime_meseca = Maj
else
....
else if (mesec == 12)
ime_meseca = Decembar

switch

switch(mesec) {
case 1: ime_meseca = Januar; break;
case 3: ime_meseca = Mart; break;
case 5: ime_meseca = Maj; break;
case 7: ime_meseca = Jul; break;
case 8: ime_meseca = Avgust; break;
case 10: ime_meseca = Oktobar; break;
case 12: ime_meseca = Decembar; break;
case 4: ime_meseca = April ; break;
case 6: ime_meseca = Jun; break;
case 9: ime_meseca = Septembar; break;
case 11: ime_meseca = Novembar; break;
case 2: ime_meseca = Februar ;

do-while

[inicijalizacija]
do {
telo_petlje
[iteracija]
} while (uslov);
i=1

do {

document.write(i+ "<br>");
i=i+1;
} while(i<=10)

while

[inicijalizacija;]
while(uslov_ostanka){
telo_petlje;
}
i=1
while(i<=10){
document.write(i+ "<br>");

i=i+1;
}

for

for( inicijalizacija; uslov; iteracija){


telo_petlje;

for(i=1; i<=10; i++){

document.write(i+ "<br>");
}

break

a:
b:
c:

{
document.writeln(pre break-a);
break b;
document.writeln(ovo nece biti prikazano);

}
}
document.writeln(posle break-a);

pre break-a
posle break-a

for in

continue

function dump_props(obj, objName) {


var result = "";
for (var i in obj) {
result += objName + "." + i + " = " +
obj[i] + "<BR>";
}
result += "<HR>";
return result;

for(i=0; i<10; i++){


document.write(i+ );
if (i%2 ==0)
continue;
document.writeln( );
}
0
2
4
6
8

1
3
5
7
9

with
var a, x, y;
var r=10;
with (Math) {
a = PI * r * r;
x = r * cos(PI);
y = r * sin(PI/2);
}

Nizovi

Sadre skup podataka koji je definisan u


okviru jedne promenljive

Kolekcija promenljivih koja sadrana u


okviru jedne promenljive

Konstruktor

Zastupljen je u JavaScript-u pomou


objekta Array:

Konstruktor:

Array()

Niz se kreira pomou rei new i konstruktora


Array() na sledei nain:

Brojanje elemenata u okviru niza startuje


sa indeksom nula (0)

Indeks:

specijalni tip funkcije koji re koristi za


kreiranje osnovne reference promenljive

Pozicija u okviru niza

var arrayName = new Array();


arrayObjectName = new Array([element0, element1,
..., elementn])

Koristi se specijalni konstruktor Array() da


bi se kreirao niz

Svaki podatak u okviru niza se naziva element

Numerika pozicija elementa u okviru niza

Pojedinanom elementu se pristupa tako


to se navodi njegov indeks u okviru
srednjih zagrada

10

Nizovi

Dodeljivanje vrednosti pojedinanom


lanu niza se izvrava na isti nain kao i
dodela vrednosti standardnoj promenljivoj

Jedina razlika je to se mora navesti


indeks elementa kome se eli pristupiti

Veliina niza se moe dinamiki menjati

Date objekat
dateObjectIme = new Date()
dateObjectIme = new Date("month
day, year hours:minutes:seconds")
dateObjectIme = new Date(year,
month, day)
dateObjectIme = new Date(year,
month, day, hours, minutes,
seconds)

Date objekat

Date objekat

today = new Date()


birthday = new Date("December 17,
1995 03:24:00")
birthday = new Date(95,12,17)
birthday = new
Date(95,12,17,3,24,0)

Date.parse(datum)
Ovaj metod vraa broj milisekundi do navedenog
datuma po lokalnom vremenu (od 1.1.1970
00:00:00)
datum.setTime(Date.parse("Aug 9, 2005")
Date.UTC(gg,mm,dd [,hh][,mh][,sec])
Ovaj metod vraa broj milisekundi od 1.1.1970
00:00:00 do datuma, prema Universal
Coordinate Time (GMT). Primer:
gmtDatum = new Date(Date.UTC(96, 11, 1, 0, 0,
0))

11

Date objekat

Date objekat

datum.getDate()
Ovaj metod vraa dan u mesecu (1-31) za
navedeni datum. Primer:
datum = new Date("December 25, 2001
23:15:00");
dan = datum.getDate()
datum.getDay()
Ovaj metod vraa dan u nedelji (0-ned, 1-pon ...
6-sub) za navedeni datum. Primer:
datum = new Date("December 25, 2001
23:15:00");
dan = datum.getDay()

datum.getHours()
Ovaj metod vraa sat za navedeni datum,
mogue vrednosti su brojevi u opsegu od 0 do
23. Primer:
datum = new Date("December 25, 2001
23:15:00");
sati = datum.getHours()
datum.getMinutes()
Ovaj metod vraa minute za navedeni datum,
mogue vrednosti su brojevi u opsegu od 0 do
59. Primer:
datum = new Date("December 25, 2001
23:15:00");
minuti = datum.getMinutes()

Date objekat

Date objekat

datum.getMonth()
Ovaj metod vraa mesec za navedeni datum (0januar, 2-februar, ... 11-decembar). Primer:
datum = new Date("December 25, 2001
23:15:00");
mesec = datum.getMonth()
datum.getSeconds()
Ovaj metod vraa sekunde za navedeni datum,
mogue vrednosti su brojevi u opsegu od 0 do
59. Primer:
datum = new Date("December 25, 2001
23:15:08");
sekunde = datum.getSeconds()

datum.getYear()
Ovaj metod vraa godinu iz navedenog datuma
(dvocifreno, od 1900 do 1999, u ostalim
sluajevima 4 cifre). Primer:
datum = new Date();
godina = datum.getYear()
datum.setDate(brojDana)
Ovaj metod postavlja dan u mesecu za navedeni
datum. Argument metoda je broj u opsegu od 1
do 31. Primer:
datum = new Date("July 27, 1960 23:30:00");
datum.setDate(24)

12

Date objekat

Date objekat

datum.setHours(brojSata)
Ovaj metod postavlja broj sati za navedeni
datum. Argument metoda je broj u opsegu od 0
do 23. Primer
datum = new Date("July 27, 1960 23:30:00");
datum.setHours(7)
datum.setMinutes(brojMinuta)
Ovaj metod postavlja broj minuta za navedeni
datum. Argument metoda je broj u opsegu od 0
do 59. Primer:
datum = new Date("July 27, 1960 23:30:00");
datum.setMinutes(35)

datum.setMonth(brojMeseca)
Ovaj metod postavlja broj meseci za navedeni
datum. Argument metoda je broj u opsegu od 0
do 11. Primer:
datum = new Date("July 27, 1960 23:30:00");
datum.setMonth(11)
datum.setSeconds(brojSekundi)
Ovaj metod postavlja dan u mesecu za navedeni
datum. Argument metoda je broj u opsegu od 0
do 59. Primer:
datum = new Date("July 27, 1960 23:30:00");
datum.setSeconds(35)

Date objekat

Date objekat

datum.setTime(vreme)
Ovaj metod definie novi datum. Argument
metoda je broj milisecundi od 1.1.1970
00:00:00 do eljenog datuma.
datum.setTime(1009318500000)
datum.setYear(brojGodine)
Ovaj metod postavlja godinu za navedeni
datum. Argument metoda je broj u opsegu od 0
do 99 za godine koje poinju sa 19, za ostale je
4 cifre.
datum = new Date("July 27, 1960 23:30:00");
datum.setYear(2010)

datum.toGMTString()
Ovaj metod vri konverziju datuma u GMT string
iz lokalne vremenske zone. Primer:
datum = new Date("December 25, 2001
23:15:00");
datum.toGMTString()
datum.toLocaleString()
Ovaj metod vri konverziju datuma u lokalni
datum string iz GMT. Primer:
datum.toLocaleString()

13

Date objekat

Date objekat

<SCRIPT language="JavaScript">
function JavaScriptVreme(){
time = new Date()
cas=time.getHours()
minuti=time.getMinutes()
sekunde=time.getSeconds()
temp = "" + ((cas>12)?cas-12:cas)
temp += ((minuti<10)?":0":":")+minuti
temp += ((sekunde<10)?":0":":")+sekunde
temp += ((cas>=12)?" P.M.":" A.M.")
document.vremeForma.cifre.value=temp
setTimeout("JavaScriptVreme()",1000)
}
</SCRIPT>

<script language="JavaScript">
today = new Date( );
christmas = new Date( );
christmas.setMonth(0);
christmas.setDate(7);
christmas.setYear(2007);
if (today.getTime( ) < christmas.getTime( )) {
difference = christmas.getTime( ) - today.getTime( );
difference = Math.floor(difference / (1000 * 60 * 60 *
24));
document.write(samo ' + difference + ' dana do
Bozica!<p>');
}
</script>

String objekat

String objekat

escape("string")
Ova funkcija kao rezultat vraa ASCII kdove
karaktera u okviru argumenta. Primer:
y = escape("!#")
Nakon izvravanja primera promenljiva y dobija
vrednost %21%23, jer su ASCII kdovi za
simbole ! i # 21 i 23.
eval(izraz)
Ova funkcija izraunava vrednost izraza koji je
definisan kao argument funkcije. Primer
var x = eval("4+5-8")

linkTekst.link(linkURL)
Ovaj metod kreira tekst linkTekst koji predstavlja HTML
link na neku drugu stranicu, iji je adrsa definisana sa
argumentom linkURL (desjtvokao i HTML taga <A
HREF...>), Primer
var naziv = link ka prezentaciji Elektrotehnicke skole";
var URL = "http://www.svets.edu.yu";
document.write("Ovo je " + naziv.link(URL))
parseInt(stringBroj [,osnova])
Ova funkcija kao rezultat vraa ceo broj dobijen
konverzijom argumenta stringBroj koji je tipa String u
brojnom sistemu sa osnovom koju definie argument
osnova. Primer:
x = parseInt("17", 8);
y = parseInt("15", 10)

14

String objekat

String objekat

string.big()
Ovaj metod prikazuje string sa uveanim slovima (isto
dejstvo kao HTML tag <BIG>). Primer:
"Dobar dan!".big()
string.blink()
Ovaj metod prikazuje string sa blinkovanjem (isto dejstvo
kao HTML tag <BLINK>) . Primer:
"Dobar dan!".blink()
string.bold()
Ovaj metod prikazuje string boldovano (isto dejstvo kao
HTML tag <B>). Primer:
"Dobar dan!".bold()

string.fontcolor("boja")
Ovaj metod prikazuje string u zadanoj boji (isto dejstvo
kao HTML tag <FONT COLOR=...>). Primer:
"Dobar dan!".fontcolor("blue")
string.fontsize(broj)
Ovaj metod prikazuje string u zadatoj veliini (isto dejstvo
kao HTML tag <FONT SIZE=...>)
"Dobar dan!".fontsize(7)
string.italics()
Ovaj metod prikazuje string sa italik stilom (isto dejstvo
kao HTML tag <I>). Primer:
"Dobar dan!".italics()

String objekat

String objekat

string.strike()
Ovaj metod prikazuje precrtani string (isto dejstvo kao
HTML tag <STRIKE>). Primer:
"Dobar dan!".strike()
string.sub()
Ovaj metod prikazuje string kao subscript (isto dejstvo kao
HTML tag <SUB>). Primer:
"Hej!".sub()
string.sup()
Ovaj metod prikazuje string kao superscript (isto dejstvo
kao HTML tag <SUP>). Primer:
"Hej!".sub()

string.toLowerCase()
Ovaj metod izvri konverzija svih karaktera u okviru
stringa u mala slova. Primer:
x = Dobar dan!.toLowerCase()

string.toUpperCase()
Ovaj metod izvri konverzija svih karaktera u okviru
stringa u velika slova. Primer:
x = Dobar dan!.toUpperCase()

15

String objekat

String objekat

string.charAt(broj)
Ovaj metod kao rezultat vraa znak na
navedenoj poziciji. Pozicije unutar stringa se
raunaju sa leve na desnu stranu i prva pozicija
ima indeks 0. U okviru svakog objekta tipa
String postoji i osobina (property) length koja je
jednaka broju karaktera u posmatranom stringu.
Korienjem ovog podatka moe se odrediti i
indeks poslednjeg karakera u stringu, a to je
vrednost string.length. 1. Primer:
x= "Dobar dan!".charAt(4)
y= "Dobar dan!".charAt(6)

String objekat

String objekat

string.lastIndexOf(traziString, [doPozicije])
Ovaj metod vraa broj pozicije na kojoj se
poslednji put pojavljuje argument tipa String
traziString. U sluaju da se trazeni string ne
nalazi u poetnom stringu kao rezultat se vraa
vrednost -1. Ako postoji i drugi argument
doPozicije, tada e se pretraga izvravati do
zadate pozicije. Primer:
x = "Dobar dan!".lastIndexOf("a")
y = "Dobar dan!".lastIndexOf("a", 6)
Nakon izvravanja primera promenljiva x dobija
vrednost 7, jer je to poslednje pojavljivanje
stringa "a", a promenljiva y je 3, jer je to
poslednje pojavljivanje stringa "a" do poziciji 6.

string.indexOf(traziString, [odPozicije])
Ovaj metod vraa broj pozicije na kojoj je prvi
put pronaen argument tipa String traziString. U
sluaju da se trazeni string ne nalazi u poetnom
stringukao rezultat se vraa vrednost -1. Ako
postoji i drugi argument odPozicije, tada e se
pretraga izvravati od zadate pozicije. Primer:
x ="Dobar dan!".indexOf("r")
y ="Dobar dan!".indexOf("a",4)
Nakon izvravanja primera promenljiva x dobija
vrednost 4, a promenljiva y je 7.

string.substring(prvi, poslednji)
Ovaj metod vraa deo stringa poev od pozicije
prvi do pozicije poslednji, t.j. uzima redom
karaktere na pozicijama prvi, prvi + 1, prvi + 2,
..., poslednji -2, poslednji 1.
x = "Dobar dan!".substring(6,9)
Nakon izvravanja primera promenljiva x dobija
vrednost "dan", jer su to karakteri na pozicijama
6, 7 i 8.

16

Funkcije

Funkcije:

Grupa naredbi koja se moe izvriti kao


pojedinana jedinica

Funkcije su korisne

Kao i bilo koji drugi JavaScript kod,


funkcije se moraju definisati u okviru
<script> elementa

Imena parametara

Definisanje funkcija

Parametar:

Sintaksa za definisanje funkcije je :

function
functionName(parameters) {
statements;
}

Pozivanje funkcije

Da bi se izvrila funkcija:

Promenljiva koja se koristi u okviru


funkcije

Kada se definie parametar u okviru


funkcije, na taj nain se deklarie i nova
promenljiva
Funkcije ne moraju sadravati parametre

Poziv funkcije:

potrebno ju je pozvati sa odreenog mesta


u okviru programa

kod pomou koga se poziva funkcija

Argument:

Promenljive ili vrednosti koje se navode u


okviru zagrada pri pozivu funkcije

17

Prosleivanje argumenata

Prosleivanje argumenata:

Naredba return

Prosleivanje argumenata parametrima


pozvane funkcije

Kada se prosleuju argumenti fukciji:

Opseg vaenja promenljive:

Localno u okviru funkcije

Localne promenljive prestaju da postoje u


trenutku kada se funkcija zavri

Korienje lokalnih promenljivih izvan


funkcije dovodi do greke

Parametri definisani u okviru funkcije su


takoe lokalne promenljive

Globalne promenljive:

globalna ili lokalna


Deklariu se izvan funkcije
Moe im se pristupiti iz bilo kog dela
programa

Localne promenljive:

Dodeljuje pozvanoj naredbi vrednost


odreene promenljive

return 8;

vrednost svakog argumenta se dodeljuje


odreenom parametru u okviru definicije
funkcije

Opseg vaenja promenljive

slui da bi se vratio rezultat funkcije


pozvanoj naredbi

Deklariu se u okviru funkcije


Jedino su dostupne u okviru funkcije u
kojoj su deklarisane

18

Rad sa uzorcima

var uPrimer = new RegExp(HTML)


var uPrimer = /HTML/
var uPrimer = new RegExp(s$)
var uPrimer = /s$/

Rad sa uzorcima

Rad sa uzorcima
Karakter
Slovo ili broj
\0

Predstavlja
Istu vrednost
Specijalni NUL karakter

\t

Tab znak

\n

Nova linija

\v

Vertikalni tab znak

\f

Form feed

\r

Carriage return

\uxxxx

Unicode karakter definisan pomou heksadecimalnog boja xxxx; na primer, \u0009 ima isti efekat kao i \t

Rad sa uzorcima

Karakter

Predstavlja pojavljivanje

[...]

Bilo kog karaktera od onih koji su navedeni


izmeu [ i ].

[^...]

Bilo kog karaktera koji nije naveden izmeu [ i ].

Bilo kog karaktera osim nove linije

\w

Bilo kog ASCII definisanog slova.

\W

Bilo kog karaktera koji nije ASCII definisano


slovo.

\d

Bilo koje ASCII definisane cifre

\D

Bilo kog karaktera koji nije ASCII definisana cifra

[\b]

Blanko znak

/[abc]/
predstavlja jedno pojavljivanje simbola a ili
jedno pojavljivanje simbola b ili jedno
pojavljivanje simbola c.
/[^abc]/
predstavlja karakter koji nije simbol a ili b c.
/\d\d\d\d\d/
Pomou ovog uzorka se definie bror koji se
sastoji od 5 cifara

19

Rad sa uzorcima
Oznaka

Rad sa uzorcima
Znaenje

Ponavljanje prethodne grupe najmanje n puta, ali najvie m


puta.

{n,m}

{n,}

Ponavljanje prethodne grupe n ili vie puta.

{n}

Ponavljanje prethodne grupe tano n puta.

Ponavljanje prethodne grupe jednom ili nijednom. Isto dejstvo


kao i {0,1}.

Ponavljanje prethodne grupe jednom ili vie puta. Isto dejstvo


kao i {1,}.

Ponavljanje prethodne grupe nijednom ili vie puta. Isto


dejstvo kao i {0,}.

Alternative. Pojavljivanje dela izraza sa desne ili pojavljivanje


izraza sa leve strane.

(...)

Grupisanje simbola u jedan objekat nad kojim se mogu


koristiti oznake *, +, ?, |, itd.

Pretraga uzorka se obavlja na poetku stringa

Pretraga uzorka se obavlja na kraju stringa

Rad sa uzorcima
Atribut

/\d{2,4}/
// uzorak koji oznaava 2, 3 ili 4
pojavljivanje cifara
/\w{3}\d?/ // uzorak koji oznaava tano tri
pojavljivljavanja slova i opciono jedne cifre, Na primer
string koji odgovara ovom uzorku je abc8 ili qqq.
/\s+java\s+/ // uzorak koji oznaava string "java" sa
jednim ili vie prostora pre ili posle stringa
/[^"]*/
// uzorak koji oznaava nula ili vie
pojavljivanje karaktera navoda
/ab|cd|ef/ // uzorak koji oznaava pojavljivanje ab ili
pojavljivanje cd ili pojavljivanje ef
/\d{3}|[a-z]{4}/ // uzorak koji oznaava pojavljivanje
tri cifre ili 4 mala slova
/java(script)?/ // uzorak koji oznaava pojavljivanje
stringa java ili stringa javascript
/(ab|cd)+|ef)/ // uzorak koji oznaava pojavljivanje
stringa ef ili pojavljivanje jednom ili vie puta stringa
ab ili pojavljivanje jednom ili vie puta stringa cd

Rad sa uzorcima
Znaenje

Izvravanje case-insensitive ispitivanja.

Izvrava globalno ispitivanje, znai


pronai e se sva pojavljivanja
definisanog uzorka, a nee se
ispitivanje zaustaviti posle prvog
pronalaska uzorka.

Rad sa vie linija. ^ oznaava poetak


linije ili stringa, a $ predstavlja
kraj linije ili stringa.

search( ) - Ovaj metod ispituje da li u okviru stringa


postoji defnisani uzorak, i kao rezultat vraa poziciju
njegovog prvog pojavljivanja, ili -1 ako ne pronae
uzorak. Primer:
x = /script/
y = "JavaScript".search(x,i);
replace(). Ovaj metod obavlja ispitivanje da li u stringu
postoji uzorak i ako postoji zamenu uzorka unutar stringa
sa nekom drugom vrednou
text = "JAVascriPT"
text.replace(/javascript/gi, "JavaScript");

str = "Lana ima 5 pomorandzi i 135 limuna"


promena3u5 = new RegExp("[3-5]", "g")
str.replace(promena3u5, "9")

20

Rad sa uzorcima

match( ) je najoptiji metod od moguih metoda


objkta tipa string. Ovaj metod ima samo jedan
argument, i to argument tipa uzorka.
Rezultat njegovog izvravanja je niz koji sadri
rezultate ispitivanja. Ako je u okviru uzorka
definisan atribut g, rezultat je niz sa svim
pojavljivanjem definisanog uzorka.
"1 plus 2 equals 3".match(/\d+/g)
Rezultat je niz ["1", "2", "3"]

Rad sa uzorcima
test( ). Ovaj metod je mnogo jednostavniji nego
prethodni. Njegov argument je string, a rezultat
true ako string odgovra uzorku. Na primer:
var pattern = /java/i;
pattern.test("JavaScript");

Rad sa uzorcima
exec( ) vraa isti rezultat ako postoji atribut g i
ako ne postoji, i to uvek prvo poklapanje i sve
relaventne informacije o njemu
var pattern = /Java/g;
var text = "JavaScript je mnogo zabavniji nego
Java!";
var result;
while((result = pattern.exec(text)) != null) {
alert("Pronadjen `" + result[0] + "'" +
" na poziciji " + result.index +"; sledeca
pretraga pocinje od " + pattern.lastIndex);
}

Rad sa dogaajima
Dogaaj

Nastaje kada korisnik...

Kod

blur

izae iz fokusa elementa forme

onBlur

click

klikne na element forme ili link

onClick

change

promeni vrednost izabranog elementa forme

onChange

focus

ue u fokus nekog elementa forme

onFocus

load

uita stranicu u browser

onLoad

mouseover

pree pokazivaem mia preko linka i sl.

onMouseOver

mouseout

izae kurzorom mia sa odreene povrine ili linka

onMouseOut

select

izabere polje elementa forme

onSelect

submit

izvri slanje forme

onSubmit

unload

napusti stranicu

onUnload

reset

resetuje sadraj forme

error

dobije greku prilikom uitavanja slike ili stranice

onError

abort

prekine uitavanja slike ili stranice

onAbort

onReset

21

Rad sa dogaajima
<script language="JavaScript">
var counter=0;
function alertme(){
alert("Gotovo je!");
window.close();
}
function track_Moves(){
counter++;
if(counter==1){
alert(counter + " prelazak preko dugmeta!");
}
else{
alert(counter + " prelaska preko dugmeta!");
}
}
</script>

Rad sa dogaajima

document.imeForme.imeElementa.value

<FORM NAME=PrimerForme>
<INPUT TYPE=text NAME=PrimerTekstPolja>
</FORM>

document.PrimerForme.PrimerTekstPolja.value
x = document.PrimerForme.PrimerTekstPolja.value
document.PrimerForme.PrimerTekstPolja.value = x

Rad sa dogaajima
Registruje se prelazak misa preko linka.
<a href="#" onMouseOver="alert('Event:
onMouseOver');">onMouseOver
</a><p>
Registruje se odlazak misa sa linka.
<a href="#" onMouseOut="alert('Event:
onMouseOut');">onMouseOut
</a><p>
Kada se mis pozicionira na dugme i pomeri poziva se
funkcija<br>
koja broji koliko puta se desio ovakav dogadjaj.
<form>
<input type="button"
value="onMouseMove"
onMouseMove="track_Moves();">
</form>

Rad sa dogaajima
<FORM METHOD="post" NAME="mojaforma">
Upiite prvi broj (0-10)...: &nbsp;
<INPUT TYPE="text" NAME="broj1" SIZE=5>
<br>
Upiite drugi broj (0-10)..: &nbsp;
<INPUT TYPE="text" NAME="broj2" SIZE=5>
<br><br>
<INPUT TYPE="button" VALUE="SABERI" NAME="dugme"
onClick="Saberi()">
<br><br>
ZBIR TA DVA BROJA IZNOSI..: &nbsp;
<INPUT TYPE="text" NAME="zbir" SIZE=5>
<br>
Tekstualni podatak o rezultatu: &nbsp;
<INPUT TYPE="text" NAME="tekst" SIZE=30>
</FORM>

22

Rad sa dogaajima
<SCRIPT LANGUAGE="JavaScript">
function Saberi() {
var br1 = document.mojaforma.broj1.value - 0;
var br2 = document.mojaforma.broj2.value - 0;
var ukupno = br1 + br2;
var poruka = "";
if (ukupno <= 0)
poruka = "nula ili negativan!";
else if (ukupno > 10)
poruka = "vei od deset!";
else
poruka = "izmeu 1 i 10!";
document.mojaforma.zbir.value = ukupno;
document.mojaforma.tekst.value = "Zbir je " + poruka;
}
</SCRIPT>

Rad sa dogaajima
function proveriTelefon(tel){
var validanTel=/^(\d{10}|\d{3}-\d{3}-\d{4}|\(\d{3}\)\d{3}\d{4})$/;
return validanTel.test(tel);}
function proveriPostBroj(broj_cifara){
var unetPostBrojStr=document.info.postBroj.value;
var unetPostBroj=parseInt(unetPostBrojStr,10);
if (unetPostBrojStr.length==broj_cifara){
if(unetPostBroj!=0 && isNaN(unetPostBroj)==false){
return true;
}else {
return false;
}
}else{
return false;
}

Rad sa dogaajima
<html>
<head><title>onChange Obrada dogadjaja</title>
</head>
<body>
<form>
Unesite procenat:
<input type="text" onChange="grade=parseInt(this.value);
if(grade < 0 || grade > 100){
alert('Molimo unesite broj izmedju 0 i 100');
}
else{
confirm('Da li je '+ grade + ' korektno?');
}
">
</form>
</body>
</html>

Rad sa vie prozora


Alerti se koriste unutar HTML stranice kada se eli prikazati
odreeno obavetenje - novi manji prozor
<form action="">
<input type="button" value="Pritisni me" onClick="alert()" />
</form>
<script type="javascript">

function alert()
{
alert ("Prvi red "+"i ovde je prvi red - \n Drugi red!");
}
</script>

23

Rad sa vie prozora


<script type="javascript">
<!--//
function alert()
{
Ime=document.Form1.VaseIme.value;
alert(Vase ime je '+Ime);

Rad sa vie prozora

deteProz.deteForma.deteObjekat.value
deteProz = open(noviProzor.html,
deteProz)
window.opener.document.otacForma.ot
acObjekat.value

}
//-->
</script>

Rad sa vie prozora


<html>
<head>
<title>PROZORI</title>
<script language="javascript">
function prozor( page, width, height, top, left ) {
var yes = 1; var no = 0;
var menubar
= no;
var scrollbars = yes;
var locationbar = no;
var directories = no;
var resizable = no;
var statusbar = no;
var toolbar
= no;
features = "" +
"width=" + width + "," +
"height=" + height + "," +
"top=" + top + "," +
"left=" + left + "";
features += "" +
(menubar ? ",menubars" : "") +
(scrollbars ? ",scrollbars" : "") +
(locationbar ? ",location" : "") +
(directories ? ",directories" : "") +
(resizable ? ",resizable" : "") +
(statusbar ? ",status" : "") +
(toolbar ? ",toolbar" : "");
window.open( page, 'fullPopup', features );
}
</script></head>
<body>
<h1>Otvori novi <a href="javascript:prozor('http://www.vets.edu.yu',720,750,0,0)"> prozor.</a></h1>
</body>
</html>

Cookie
Cookie

su tekstualni fajlovi koji se


mogu zapamtiti na maini klijenta.
Format koji cookie fajl mora da
zadovolji je:
ime=vrednost[;EXPIRES=datum][;DOM
AIN=imeDomena][;PATH=putanja]
[;SECURE]

24

Cookie
ime

- ime koje definie upisani cookie.


- je upravo informacija koja se eli zapamtiti
datum - je datum koji definie do kada cookie ostaje upisan na
klijentskoj maini.
imeDomena - definie jedini domen sa kog cookie moe da se
ita i da mu se menja vrednost.
putanja - definie jedinu putanju sa koje cookie moe da se
ita i da mu se menja vrednost.
SECURE - upis i itanje cookie se izvrava preko posebnih,
bezbednijih linija.
Opcije EXPIRES, DOMAIN, PATH, SECURE su opcione i nije
bitan redosled u kom se pojavljuju.
vrednost

Cookie
<html>
<head>
<script language="javascript">
function postavljanjeCookie(){
document.cookie = 'Cookie je='+document.forma1.imeCookie.value;
}
function prikazCookie(){
alert(document.cookie);
}
</script>
</head>
<body>
<h1>Cookie 1</h1>
<h2>Postavljanje i pregled cookie</h2>
<form name="forma1">
<p><input name="imeCookie" type="text" id="imeCookie" size="20">
</p>
<p><input type="button" value="Upisite ime" name="B1" onClick="postavljanjeCookie()">
<input type="button" value="Prikazi cookie" name="B2" onClick="prikazCookie()"></p>
</form>
</body>
</html>

Cookie
var citamCookie=document.cookie
document.cookie =
primerCookie=+vrednostKojuPamtim
+;secure

Rad sa pauzama i intervalima

Korienjem metoda objekta Window


moe se realizovati kod koji izvrava
automatski

Metod setTimeout():

Koristi se u okviru JavaScript-a za


izvravanje odreenog koda nakon
specificiranog vremesnkog intervala
Kod koji se definie u okviru setTimeout()
metoda, izvrava se samo jednom

25

setTimeout()

Sintaksa upotrebe setTimeout() metoda:

setInterval()

var variable = setTimeout(kod, brMilSek);

Metod ClearTimeout() se koristi da bi se


prekinuo metod setTimeout() pre nego
to se izvri
Promenljivu koja predstavlja poziv metoda
setTimeout()

clearInterval()
clearInterval():

Koristi se da bi prekinuo izvravanje


metoda setInterval() na isti nain kao to
metod clearTimeout() ponitava poziv
metoda setTimeout()

setInterval() metod

clearInterval() metod

setInterval():

ClearTimeout() sadri jedan argument:

Druga dva metoda JavaScripta koji


automatski izvravaju odreeni kod su:

Je slian metodu setTimeout() metodu,


OSIM
to ponavlja izvravanje istog koda, koji je
pozvan samo jednom

Objekat History

U okviru web itaa odrava se interna


lista (poznata pod imenom history list)
svih dokumenata koji su bili otvarani
tokom trenutne sesije Web itaa

Svaki prozor Web itaa i frejm sadre


svoj sopstveni objekat History, koji
predstavlja internu listu dokumenata

26

URL i History

Neka ogranienja

U okviru history list ne mogu se videti poseeni


URL:

Ali se moe napisati script koji koristei ovu listu


prolazi kroz Web stranice koje su bile otvarane
tokom sesije Web itaa

Objekat Location

Dozvoljava da se promeni adresa nove


Web stranice pomou JavaScript koda

Jedan razlog za ovu promenu je i


mogunost

Ukljuiti i referenca na sam Location


objekat

Jedino ako se trenutna Web page stranica nalazi


na istom domenu kao i Web stranica koja sadri
JavaScript kod koji pokuava pretrai listu

Objekat Navigator

Koristi se da bi se dobile informacije o


trenutnom Web itau

Netscape i Internet Explorer sadre


jedinstvene metode i properties objekta
Navigator koje se ne mogu koristiti sa
ostalim itaima

Najvie se koriste metodi pomou kojih se


prepoznaje tip web itaa koji se koristi

Da se izvri redirekcija korisnika stranice


na drugu stranicu ili drugi URL

Kada se koristi metod ili property objekta


Location mora se

U okviru Internet Explorera, moe se koristiti


JavaScript kod da bi se pretraivala history list

27

Frame i Target

Atribut Target definie koji frejm ili


prozor Web itaa e prikazati
dokument:

Bazira se na vrednosti prikazanoj u okviru


target atributa <a> elementa ili vrednosti
u okviru atributa name <frame> elementa

<base>

Atribut target se koristi i sa <base>


elementom

da specificira default target za sve linkove


u okviru dokumenta
Koristi data imena prozora ili frejma

28

You might also like