javascript internet programiranje

Internet programiranje JavaScript

Uvod (X)HTML u jednom trenutku postaje

ograničavajući faktor Potrebna je nova tehnologija za

realizaciju dinamičkih delova aplikacije

Uvod Decembar 1995.god, Netscape i Sun

su predstavili JavaScript 1.0, originalno nazvan LiveScript

Microsoft prati sa jezikom JScript ECMAScript 1.0, kasnije ISO/IEC

16262 standard Danas Netscape, odnosno Mozilla, i

Microsoft standardi su identični u preko 95% slučajeva

Reference Trenutno je aktuelan Javascript 1.8, koji je opisan

u standardu ECMAScript verzija 3, sa ekstenzijama.

www.w3schools.com www.ecma-international.org https://developer.mozilla.org/en/JavaScript David Falangan, JavaScript: The Definitive Guide,

O'Reilly Media, Inc., 5th edition, August 17, 2006 www uopšte

Osobine

Platformski neutralan Modularno programiranje Integrisanost sa (X)HTML-om Nema velikih sličnosti sa Javom

Zašta se koristi JavaScript? Omogućava dinamički (X)HTML

sadržaj Može da menja vrednosti (X)HTML

elemenata i atributa Koristi se za proveru ispravnosti

popunjenih formulara Reaguje na događaje tipa klika,

slanja formulara itd. Ostvaruje razne vremenske funkcije

1. Osnove JavaScript-a Tag Komentari Prikaz Promenljive i njihovi tipovi Operatori Funkcije Objekti

Izvršavanje koda U okviru (X)HTML koda: <script type=“text/javascript">...JavaScript kod…;</script> Ili u eksternom fajlu:<script type=“text/javascript" src="

jskod.js"></script> Ili nekad bez script taga Naredba se završava tačka zarezom ;

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

Za komentar više redova - „/*” za početak bloka pod komentarom i „*/” za kraj bloka pod komentarom:

/* komentar u više redova...*/

Komentari

Primer:<script type=“text/javascript">document.write(“<b>Prvi red</b><br

/><i>Drugi red</i>”);</script> Rezultat primera:Prvi redDrugi red

Prikaz - write

Promenljive

Sadrže vrednosti koje program smešta u okviru memorije računara

Da bi se koristile u okviru programa: Napisati naredbu koja kreira promenljivu Dodeliti joj željeno ime

Na kraju vrednost treba da se dodeli promenljivoj

Imena promenljivih

Ime koje se dodeljuje promenljivoj se naziva i identifikator

Pravila i konvencije pri imenovanju promenljivih: Identifikator mora počinjati 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 reči za

identifikatore

var

U okviru JavaScript jezika, rezervisana reč se koristi za kreiranje promenljivih

Kreiranje promenljive se naziva i deklaracija promenljive

Da bi se dodelila određena vrednost ili da bi se inicijalizovala promenljiva koristi se sintaksa:var imePromenljive = vrednost;

Vrednost dodeljena promenljivoj može biti znakovna ili numerička vrednost

Tipovi podataka Specifična kategorija informacija koje se

sadrže u okviru promenljive Pomaže da računar odredi koliko je

prostora potrebno da bi se smestila određena promenljiva

Tip podataka definiše i vrstu operacija koje se mogu izvršiti sa datom promenljivom

Null vrednost Vrednost null je

Tip podataka/vrednost koja se može dodeliti promenljivoj

Pokazuje da promenljiva ne sadrži nikakvu korisnu vrednost

Vrednost “null” se dodeljuje promenljivoj kada se želi definisati da promenljiva ne sadrži nikakav podatak

Deklaracija tipova Striktni programski jezici

Zahtevaju da se deklariše tip podataka promenljive

Statički tip podataka• Tip podataka se ne menja nakon same

deklaracije Jednostavniji programski jezici - JavaScript

Ne zahtevaju da se deklariše tip podataka promenljive

Dinamički tip podataka • Tip podataka se može menjati nakon same

deklaracije

Deklaracija tipova u JavaScript-u

JavaScript je jednostavniji programski jezik Ne zahteva se, i nije dozvoljeno, deklarisati tip

podataka promenljive JavaScript interpreter

Automatski prepoznaje koji tip podataka je smešten u okviru promenljive

Dodeljuje tip podatka promenljivoj dinamički

JavaScript je “case sensitive” jezik. Tipovi podataka koji su podržani su

celobrojni brojevi, racionalni brojevi, stringovi i logički 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 između navodnika (“neki tekst”) ili apostrofa (‘neki tekst’).

Tipovi podataka u JavaScript-u

Aritmetički Na nivou bita Relacionalni Logički

Operatori

Operator Opis Operator Opis

+ sabiranje += sabiranje dodela

- oduzimanje -= oduzimanje dodela

* množenje *= množenje dodela

/ deljenje /= deljenje dodela

% moduo %= Moduo dodela

++ inkrement -- dekrement

Aritmetički operatori

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 izvršavanja prethodnog primera dobija se

sledeći tekst na ekranu: a, b, c, d, e, su 2 6 1.5 4 -4

Aritmetički operatori

Na nivou bita

Operator Upotreba Opis

Logičko I (AND) a & b Rezultatni bit je 1, jedino ako su oba bita 1 u ostalim slučajevima rezultat je 0.

Logičko ILI (OR) a | b Rezultatni bit je 0, jedino ako su oba bita 0 u ostalim slučajevima rezultat je 1.

Logičko eksluzivno ILI (XOR)

a ^ b Rezultatni bit je 1, ako biti imaju različite vrednosti, u suprotnom je 0.

Logičko NE (NOT) ~ a Komplementira bitove operanda a.

Pomeranje ulevo a << b Pomera binarni sadržaj operanda za b mesta ulevo. Prazna mesta popunjava sa vrednošću 0.

Pomeranje udesno sa znakom

a >> b Pomera binarni sadržaj operanda za b mesta udesno. Prazna mesta popunjava sa vrednošću najstarijeg bita.

Pomeranje udesno sa nulama

a >>> b Pomera binarni sadržaj operanda za b mesta udesno. Prazna mesta popunjava sa vrednošću 0.

Na nivou bita

15 & 9 rezulat 9 (1111 & 1001 = 1001)

15 | 9 rezulat 15 (1111 | 1001 = 1111)

15 ^ 9 rezulat 6 (1111 ^ 1001 = 0110)

Logički operatori

Operator Upotreba Opis

I (&&) expr1 && expr2 Rezultat je true, jedino ako su oba operanda true, u ostalim slučajevima rezultat je false.

ILI (||) expr1 || expr2 Rezultat se dobija false, jedino ako su oba operanda false, u ostalim slučajevima 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

Logičkia = 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 izvršavanja prethodnog primera je:a = trueb = falsec = trued = falsef = trueg = false

Operatori poređenja

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 različiti.

x ! = y rezultat je true ako su x i y različiti.

Veće (>) Rezultat je true ako je levi operand veći od desnog operanda.

x > y ako je x veće od y.

Veće ili jednako (>=)

Rezultat je true ako je levi operand veći ili jednak desnom operandu

x >= y ako je x veće 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

Različito bez konverzije tipova (!==)

Rezultat je true ako su operandi različiti bez konverzije podataka

x !== y rezultat je true ako su x i y različiti bez konverzije podataka

Operatori poređenja

a = 4;b = 1;c = a < b;d = a == b;document.write( “ c = “ + c + “<br />“ );document.write ( “ d = “ + d ); Rezultat izvršavanja prethodnog primera

jec = falsed = false

Funkcije

Funkcije predstavljaju grupu naredbi koja se može izvršiti kao pojedinačna jedinica

Funkcije su korisne jer čine program preglednijim i lakšim za ažuriranje

Kao i bilo koji drugi JavaScript kod, funkcije se moraju definisati u okviru <script> elementa

Funkcija se sastoji iz deklaracije funkcije i njenog poziva

Deklaracija funkcija Deklaracije funkcije se može naći u

zaglavlju i telu (X)HTML koda, ali preporučivo je da se smesti u zaglavlje (X)HTML koda.

Sintaksa za definisanje funkcije je :function imeFunkcije(parametri) {

naredbe;}

Pozivanje funkcije Da bi se izvršila funkcija potrebno ju je

pozvati sa određenog mesta u okviru programa

Funkcija se poziva njenim imenom i specifikacijom argumenata u okvir zagrada

Vrednosti argumenata se prosleđuju odgovarajućim parametrima funkcije u skladu sa deklaracijom funkcije

Naredba return

Služi da bi se vratio rezultat funkcije pozvanoj naredbi

Dodeljuje pozvanoj naredbi vrednost određene promenljive

return 8;return p*m;

Opseg važenja promenljivePrema opsegu važenja promenljive se dele na globalne ili lokalne.Globalne promenljive se deklarišu izvan funkcije, i može im se pristupiti iz bilo kog dela programa.Lokalne promenljive se deklarišu u okviru funkcije i jedino su dostupne u okviru funkcije u kojoj su deklarisane.Parametri su takođe lokalne promenljive.

Ugrađene funkcije Na primer:

eval(string) tretira string kao naredbu string(objekat) pretvara objekat u string number(objekat) pretvara objekat u broj parseInt(string[, osnova]) pretvara string u

celobrojnu vrednost sa specificiranom osnovom

parseFloat(string) pretvara string u realni broj itd.

Primer Primer deklaracije funkcije:function calculate(a,b,c) {

d = (a+b) * c;return d;

} Primer poziva funkcije:var x = calculate(4,5,9);document.write("x je ", x, "<br />");var y = calculate((x/3),3,5);document.write("y je ", y); Rezultat primera:x je 81y je 150

Objekti JavaScript podržavaju objekte kao

strukture podataka Objekti se definišu pomoću funkcija Za svaki objekat su vezane osobine i

metode Osobine su promenljive kojima se dodaju

određene vrednosti Metode su funkcije u okviru objekata

kojima mogu da se menjaju njihove osobine

Kreiranje klase i instance objekta Klasa objekta ili prototip se definiše funkcijom

čija je sintaksafunction mojObjekat (p1,p2,…){this.osobina1=f1(p1,p2,…);this.osobina2=f2(p1,p2,…);…} Instanca objekta se definiše pomoću naredbe

newmojaInstanca=new mojObjekat(c1,c2,…) Klasa mojObjekat ne mora biti definisana da bi

bila instancirana; klasa ne mora da ima parametre; f1,f2… mogu biti konstantne funkcije; ne moraju sve osobine klase biti definisane.

Rad sa osobinama objekata Vrednost osobine instance objekta se može

koristiti na sledeći način: imePromenljive=mojaInstanca.Osobina1; Vrednost osobine instance objekta se može

promeniti ili naknadno definisati ukoliko nije bila ranije:

mojaInstanca.Osobina1=vrednost1; Vrednost osobine klase objekta se može

naknadno definisati ukoliko nije bila ranije:mojObjekat.prototype.Osobina1=vrednost1;

Primer rada sa objektima

Primer rada sa objektima

Primer rada sa objektima

Kreiranje objekta sa metodom Primer metoda objekta:function mojkrug(x,y,r) { this.xkord = x; this.ykord = y; this.radius = r; this.povrsina = izrPovrsinu; this.obim = function () { return ( Math.PI * this.radius * 2 ); }; this.pomeri = pomeriKrug; } function izrPovrsinu() { return ( Math.PI * this.radius * this.radius ); } function pomeriKrug(xPom,yPom) { this.xkord += xPom; this.ykord += yPom; }

Kreiranje objekta sa metodom Alternativni primer kreiranja metoda objekta: function mojkrug(x,y,r) {this.xkord = x; this.ykord = y; this.radius = r; } mojkrug.prototype.povrsina = function () { return ( Math.PI * this.radius * this.radius );} mojkrug.prototype.obim = function () { return ( Math.PI * this.radius * 2 ); };mojkrug.prototype.pomeri = function (xPom,yPom)

{ this.xkord += xPom; this.ykord += yPom; };

Korišćenje metoda Primer korišćenja metoda iz prethodnog primera:var testkrug = new mojkrug(3,4,5);testkrug.pomeri(2,3); document.write( ‘Površina kruga je ' +

testkrug.povrsina() );document.write( ‘<br />Obim kruga je ' +

testkrug.obim() ); Rezultat prethodnih komandi je:Površina kruga je 78.53981633974483 Obim kruga je 31.41592653589793

Ugrađeni objekti Array - niz RegExp – uzorci za pretraživanje String - znakovni niz Date – vreme Event – objekti koje generišu događaji Boolean – logička promenljiva Math - Matematički objekt DOM – (X)HTML i JavaScript objekti

2. Kontrola toka Ternarni operator If-else naredba Switch naredba Petlje

For petlja While petlja

Izlazi iz blokova Break Continue

With naredba

Sintaksa:logIzraz ? izraz1 : izraz2 gde je izraz log_izraz bilo koji izraz čiji

rezultat je vrednost logičkog tipa. Ako je rezultat izraza true, onda se izvršava izraz1, u suprotnom izraz2.

Primer: kolicnik = (imenioc ==0 ? 0 : brojioc/

imenioc)

Ternarni operator

Kontrole toka - if Sintaksa: if (logIzraz) {naredbe1;}

[else {naredbe2;}]

Primer: if (x == 8) {

                    y=x;           }

else {                z=x;

y=y*x; }

Kontrola toka - if Još jedan primer: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”;

Kontrola toka - switch Sintaksa switch (izraz) { case vr1: naredbe1; [break;] ... case vrN: naredbeN; [break;] [default: naredbeDef;]}

Kontrola toka - switch Primer: 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 ”;}

Petlje - while Sintaksa: [inicijalizacija;]

while(logIzraz){ naredbe; }

Primer:i=1;while(i<=10){ document.write(i+ "<br />");

i=i+1;}

Petlje - do-while Sintaksa: [inicijalizacija;]

do { naredbe;

} while (logIzraz);

Primer: i=1;

do { document.write(i+ "<br />"); i=i+1;

} while(i<=10)

Petlje - for Sintaksa:for(inicijalizacija; logIzraz; iteracija){ naredbe;}

Primer: for(i=1; i<=10; i++){ document.write(i+ "<br />");}

Petlje – for-in Sintaksa: for (imePromenljive in imeSkupa) { naredbe; } Primer:for (x in mojaKola) {document.write(mojaKola[x] + "<br />"); }

Kontrola toka - break Primer: a: {

b: {c: {

document.writeln(“pre break-a”); break b; } document.writeln(“ovo neće biti prikazano”); } document.writeln(“posle break-a”); }

Rezultat: pre break-a posle break-a

Kontrola toka - break Primer: a: {

b: {c: {

document.writeln(“pre break-a”); break c; } documen writeln(“ovo neće biti prikazano”); } document.writeln(“posle break-a”); }

Rezultat: pre break-a ovo neće biti prikazano posle break-a

Kontrola toka - continue Primer:for(i=0; i<10; i++){ document.write(i+ “ “); if (i%2 ==0) continue; document.writeln(“<br />“); }

Rezultat: 0 1

2 34 56 78 9

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

3. Objekti Array - niz RegExp – uzorci za pretraživanje String - znakovni niz Date – vreme Event – objekti koje generišu događaji Math - Matematički objekt DOM – HTML i JavaScript objekti

Osobine i metodi ugrađenih objekata

Mogu se naći na http://www.w3schools.com/js/default.asp http://www.w3schools.com/htmldom/default.asp http://www.w3.org/TR/DOM-Level-2-HTML/

html.html http://www.w3.org/TR/DOM-Level-2-HTML/ecma-

script-binding.html https://developer.mozilla.org/en/

Gecko_DOM_Reference http://www.devguru.com/Technologies/

ecmascript/quickref/javascript_index.html http://www.javascriptkit.com/domref/

Niz Niz je objekat koji se sastoji iz više elemenata Niz se kreira pomoću reči new i konstruktora

Array() na sledeće načine:

var imeNiza = new Array();imeNiza = new Array(element0,

element1, ..., elementN); Primeri:var mojaKola=new

Array(“Honda","Volvo","BMV");

Pristup elementima niza Pojedinačnom elementu se pristupa tako što se

navodi njegov indeks u okviru srednjih zagrada, gde je indeks redni broj elemenata.

Brojanje elemenata u okviru niza startuje sa indeksom nula, 0.

Primer:var mojaKola=new Array("Honda","Volvo","BMV") mojaKola[2]="Jugo";document.write(mojaKola[0]," ",mojaKola[2]); Rezultat primera:Honda Jugo

Osobine i metode objekta niza - Array Osobina je length koja predstavlja broj

elemenata u nizu Neke od interesantnih metoda su:

concat – spajanje dva niza join – pretvaranje niza u string sort – sortiranje niza reverse – obrtanje redosleda slice – biranje izabranih elemenata push – dodavanje elementa na kraj pull – uzimanje poslednjeg elementa

Osobine objekta Array Primer korišćenja osobine lengthfor(i=0; i<mojaKola.length; i++){

document.write(mojaKola[i] + “<br />”); } Rezulat gornjeg primera:

HondaVolvoJugo

Metode objekta Array - concat Sintaksa metode concatimeNiza1.concat(imeNiza2,...); Primer metode:imena1 = new Array(“Goca”, “Pera”);imena2 = new Array(“Pavle”, “Aca”);imena=imena1.concat(imena2);document.write(imena); Rezultat primera:Goca,Pera,Pavle,Aca

Metode objekta Array - join Sintaksa metode concatimeNiza.join(separator); Primer metode:imena = new Array(“Goca”, “Pera”, “Pavle”,

“Aca”);svaImena=imena.join(“.”);document.write(svaImena); Rezultat primera:Goca.Pera.Pavle.Aca

Metode objekta Array - sort Sintaksa metode sortimeNiza.sort(funkcijaSortiranja); Primer metode:imena = new Array(“Goca”, “Pera”,

“Pavle”, “Aca”);document.write(imena.sort()); Rezultat primera:Aca,Goca,Pavle,Pera

Datum

Datum je objekat koji nosi informaciju o datumu i vremenu

Konstruktor objekta datum je Date, te se vreme instancira na sledeće načine:

imeDatuma = new Date();imeDatuma = new Date(datumString);imeDatuma = new Date(godina, mesec,

dan)imeDatuma = new Date(godina, mesec,

dan, sat, minut, sekund);

Datum Konstruktor Date() bez argumenta daje

trenutni datum i vreme Primer:

document.write(Date()); Rezultat primera:

Sat Mar 21 2009 22:57:30 GMT+0100 (Central Europe Standard Time)

Konstruktor Date(datumString) za argument može imati bilo koji string koga može da protumači metoda parse

GMT (Greenwich Mean Time) odnosno UTC (Universal Coordinated Time) su referentna vremena

Dozvoljeni formati datuma koje prihvata metoda parse Wed, 16 Jun 94 07:29:35 EST Thu, 13 Oct 94 10:13:13 -0700 Wed, 9 Nov 1994 09:50:32 -0500

(EST) 21 dec 93 17:05 21-dec-93 17:05 21/dec/93 17:05 16 Nov 94 22:28:20 PST

Primeri objekta datum - Date Primeri: danas = new Date();birthday = new Date("December 17,

1995 03:24:00");rodjendan = new Date(95,12,17);birthday = new

Date(95,12,17,3,24,0);

Metodi objekta datum - Date Brojni su metodi objekta datum:

getDate, getDay, getFullYear, getHours, getMilliseconds, getMinutes, getMonth, getSeconds, getTime, getTimezoneOffset, getUTCDate, getUTCDay, getUTCMonth, getUTCFullYear, getUTCHours, getUTCMinutes, getUTCSeconds, getUTCMilliseconds, getYear, parse, setDate, setFullYear,...

Metoda objekta Date – parse, UTC Metod parse vraća broj milisekundi do

navedenog datuma po lokalnom vremenu od 1.1.1970 00:00:00, a metod UTC po UTC-u

Sintaksa: Date.parse(datumString) Date.UTC(godina, mesec, dan, sat, minut, sekund) Primer:document.write(Date.parse("Aug 9, 2005")) Rezultat primera: 1123538400000

Metoda objekta Date - getTime Ovaj metod vraća broj milisekundi do navedenog

datuma po lokalnom vremenu (od 1.1.1970 00:00:00)

Sintaksa je malo drugačija: datum = new Date(arg);datum.getTime(); Primer:d = new Date(“Aug 9, 2005”);document.write(d.getTime()); Rezultat primera: 1123538400000

Metoda objekta Date - getDate Ovaj metod vraća dan u mesecu (1-31) za

navedeni datum Sintaksa: datum = new Date(arg);datum.getDate(); Primer:datum1 = new Date("December 25, 2001

23:15:00"); dan = datum1.getDate();document.write(dan); Rezultat primera: 25

Metoda objekta Date - getDay Ovaj metod vraća dan u nedelji (0-ned, 1-pon ...

6-sub) za navedeni datum Sintaksa: datum = new Date(arg);datum.getDay(); Primer:datum1 = new Date("December 25, 2001

23:15:00"); dan = datum1.getDay();document.write(dan); Rezultat primera: 2

Metoda objekta Date - getMinutes Ovaj metod vraća minute za navedeni datum,

moguće vrednosti su brojevi u opsegu od 0 do 59.

Sintaksa: datum = new Date(arg);datum.getMinutes(); Primer:datum1 = new Date("December 25, 2001

23:15:00"); minuta = datum1.getMinutes(); document.write(minuta); Rezultat primera: 15

Metoda objekta Date - setDate

Ovaj metod postavlja dan za navedeni datum. Sintaksa: datum = new Date(arg);datum.setDate(danUMesecu); Primer:datum1 = new Date("December 25, 2001

23:15:00"); datum1.setDate(2); document.write(datum1); Rezultat primera: Sun Dec 02 2001 23:15:00 GMT+0100 (Central

Europe Standard Time)

Metoda objekta Date - setMinutes

Ovaj metod postavlja broj minuta za navedeni datum.

Sintaksa: datum = new Date(arg);datum.setMinutes(minuta); Primer:datum1 = new Date("December 25, 2001

23:15:00"); datum1.setMinutes(24); document.write(datum1); Rezultat primera: Tue Dec 25 2001 23:24:00 GMT+0100 (Central

Europe Standard Time)

Metoda objekta Date - toLocaleString

Ovaj metod vrši konverziju datuma u lokalni datum string

Sintaksa: datum = new Date(arg);datum.toLocaleString(); Primer:datum1 = new Date("December 25, 2001

23:15:00"); document.write(datum1.toLocaleString()); Rezultat primera zavisi od podešavanja

operativnog sistema: 25. децембар 2001 23:15:00

Metoda objekta Date - toUTCString

Ovaj metod vrši konverziju datuma u datum string prema UTC standardu

Sintaksa: datum = new Date(arg);datum.toUTCString(); Primer:datum1 = new Date("December 25, 2001

23:15:00"); document.write(datum1.toUTCString()); Rezultat primera: Tue, 25 Dec 2001 22:15:00 GMT

Primer upotrebe Date objekta<script type="text/javascript">danas = new Date( ); bozic = new Date( ); bozic.setMonth(0); bozic.setDate(7); if (danas.getMonth()==0 && danas.getDate()<7){bozic.setFullYear(danas.getFullYear());}else {bozic.setFullYear(danas.getFullYear()+1);}document.write(danas);if (danas.getTime() < bozic.getTime()) { razlika = bozic.getTime() - danas.getTime(); razlika = Math.floor(razlika / (1000 * 60 * 60 * 24)); document.write("<br />Samo " + razlika + " dana do Božića!");}</script> Rezultat:Mon Mar 23 2009 00:12:50 GMT+0100 (Central Europe Standard

Time)Samo 290 dana do Božića!

Uzorak Uzorak je niz znakova i specijalnih znakova Konstruktor objekta uzorak je RegExp,

međutim on ne mora da se koristi: imeUzorka = new RegExp(“mustra”,

“atributi”);var imeUzorka = /mustra/atributi; Gde je mustra niz znakova i specijalnih

znakova, a atributi su znakovi koji specificiraju način apliciranja mustre.

Specijalni znakovi se koriste da bi se definisao izraz koji se traži u tekstu.

Deklaracija uzoraka var uPrimer = new RegExp(“HTML”) var uPrimer = /HTML/

var uPrimer = new RegExp(“s$”) var uPrimer = /s$/

Osobine i metodi objekta uzorka Osobine uzorka su global,

ignoreCase, multiline, lastIndex,… Metodi uzorka su compile, exec,

test, a metodi u kojima uzorak učestvuje su search, match, replace, split

Specijalni znaci u uzorcima

Karakter Predstavlja

Slovo ili broj Istu vrednost

\t Tab znak

\n Nova linija

\f Nova strana

\r Početak linije

\” Navodnici

\uxxxxUnicode karaktera definisan pomoću heksadecimalnog

boja xxxx; na primer, \u0009 ima isti efekat kao i \t

Specijalni znaci u uzorcimaKarakter Predstavlja pojavljivanje

[...] Bilo kog karaktera od onih koji su navedeni između [ i ].

[^...] Bilo kog karaktera koji nije naveden između [ 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

\s Blanko znak

\S Koji nije blanko znak

Primeri uzoraka/[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 ili c./\d\d\d\d\d/ Pomoću ovog uzorka se definiše broj koji se

sastoji od 5 cifara

Specijalni znaci u uzorcimaOznaka Značenje

{n,m} Ponavljanje prethodne grupe najmanje n puta, ali najviše

m puta.

{n,} Ponavljanje prethodne grupe n ili više puta.

{n} Ponavljanje prethodne grupe tačno n puta.

?Ponavljanje prethodne grupe jednom ili nijednom. Isto

dejstvo kao i {0,1}.

+Ponavljanje prethodne grupe jednom ili više puta. Isto

dejstvo kao i {1,}.

*Ponavljanje prethodne grupe nijednom ili više puta. Isto

dejstvo kao i {0,}.

|Alternative. Pojavljivanje 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 početku stringa

$ Pretraga uzorka se obavlja na kraju stringa

Primeri uzoraka /\d{2,4}/ // uzorak koji označava 2, 3 ili 4 pojavljivanje cifara /\w{3}\d?/ // uzorak koji označava tačno tri pojavljivljavanja slova i

opciono jedne cifre, npr. string koji odgovara ovom uzorku je „abc8” ili „qqq”.

/\s+java\s+/ // uzorak koji označava string "java" sa jednim ili više prostora pre ili posle stringa

/[\"]/ // uzorak koji označava karakter navoda /ab|cd|ef/ // uzorak koji označava pojavljivanje ab ili pojavljivanje cd ili

pojavljivanje ef /\d{3}|[a-z]{4}/ // uzorak koji označava pojavljivanje tri cifre ili 4 mala

slova /java(script)?/ // uzorak koji označava pojavljivanje stringa „java” ili

stringa „javascript” /(ab|cd)+|ef)/ // uzorak koji označava pojavljivanje stringa „ef” ili

pojavljivanje jednom ili više puta stringa „ab” ili pojavljivanje jednom ili više puta stringa „cd”

Atributi uzoraka

Atribut Značenje

iIzvršavanje case-insensitive

ispitivanja.

g

Izvršava globalno ispitivanje, znači pronaći će se sva pojavljivanja definisanog uzorka, a neće se ispitivanje zaustaviti posle prvog pronalaska uzorka.

m

Rad sa više linija. ^ označava početak linije ili stringa, a $

predstavlja kraj linije ili stringa.

Osobine uzorka – ignoreCase

Osobina ignoreCase daje informaciju da li je pretraga osetljiva na veličinu slova ili ne.

Sintaksa: var imeUzorka = uzorak;imeUzorka.ignoreCase; Primer:var uzorak1 = /S/i;if(uzorak1.ignoreCase) {document.write("ignoreCase atribut je on");} Rezultat primera: ignoreCase atribut je on

Osobine uzorka – lastIndex Osobina index, lastIndex o indeksu

prvog i poslednjeg znaka koji su nađeni. Sledeće pretraživanje treba da počne od sledećeg indeksa.

Sintaksa: var imeUzorka = uzorak;imeUzorka.lastIndex;imeUzorka.index;

Metode uzorka – exec Metoda exec daje sve uzorke iz zadatog

teksta. Sintaksa: var imeStringa = string; var imeUzorka = uzorak;rez = imeUzorka.exec(ImeStringa);rez = uzorak.exec(string);… Promenljiva rez je niz koji sadrži najduži

pronađeni uzorak i uzorke koji odgovaraju izrazima u zagradi, a rez.index je index nultog elementa ovog podniza.

Primer - exec Primer:var mojUzorak = /d(b+)(d)/ig; var rezultat =

mojUzorak.exec("cdbBdbsbz"); document.write(rezultat); Rezultat primera:dbBd,bB,d

Primer - exec

Metode uzorka – test Metoda test traži uzorak u datom

tekstu i vraća true ukoliko ga nađe ili false ukoliko ne.

Sintaksa: var imeStringa = string; var imeUzorka = uzorak;rez = imeUzorka.test(imeStringa);rez = uzorak.test(string);…

Primer upotrebe lastIndex

String String je objekat koji sadrži niz

znakova Konstruktor objekta string je String,

međutim on ne mora da se koristi: imeStringa = new String(string);var imeStringa = string; Gde je string niz znakova pod

navodnicima;

Osobine i metodi objekta string

Osobina objekta length izračunava broj znakova u stringu, i ima istu sintaksu kao i kod objekta niz

Brojni su metodi objekta string: Koji određuju stil niza:

• big, small, bold, italics, fontcolor, fontsize, toLowerCase, toUpperCase, sub, sup,...

Koji traže podniz niza: • search, match, replace, charCodeAt, indexOf...

Kojima se formiraju novi nizovi: • slice, substring, concat

Za kreiranje linkova:• link, anchor

Metoda objekta string – big, bold, toLowerCase, ...

Metodi big, bold, toLowerCase i slični vraćaju string u specificiranom formatu, i svi imaju sličnu sintaksu.

Sintaksa: var imeStringa = String;imeStringa.big(); imeStringa.bold();

imeStringa.toLowerCase(); Primer:var poz = “Dobar dan! ”;document.write(poz.big()+poz.bold()

+poz.toLowerCase()); Rezultat primera: Dobar dan! Dobar dan! dobar dan!

Metode objekta string – fontsize, fontcolor, ...

Metodi fontsize i fontcolor vraćaju string u specificiranom formatu, i imaju sličnu sintaksu.

Sintaksa: var imeStringa = String;imeStringa.fontsize(velicinaFonta);imeStringa.fontcolor(imeBoje); Primer:var poz = “Dobar dan! ”;document.write(poz.fontsize(30) +

poz.fontcolor(“blue”)+ poz.fontsize(30). poz.fontcolor(“red”));

Rezultat primera: Dobar dan! Dobar dan! Dobar dan!

Metode objekta string – search, replace ...

Metodi search, match, replace i slični vraćaju string u specificiranom formatu, i svi imaju sličnu sintaksu.

Sintaksa: var imeStringa1 = string1;imeStringa1.search(uzorak2);imeStringa1.replace(uzorak2, uzorak3); Primer:var poz = “Dobar dan! ”;document.write(poz.search(“dan”)+”<br />”);document.write(poz.replace(“dan”,”san”)); Rezultat primera: 6Dobar san!

Metode objekta string – match

Metoda match daje sve uzorke iz zadatkog teksta. Sintaksa: var imeStringa = string; var ImeUzorka = uzorak;imeStringa.match(uzorak);string.match(uzorak);… Primer:x="1 plus 2 jednako je 3".match(/\d+/g);document.write(x); Rezultat primera: 1,2,3

Metode objekta string – substring, slice ...

Metodi substring, i slice vraćaju deo stringa, i imaju sličnu sintaksu.

Sintaksa: var imeStringa = string;imeStringa.substring(pocetak,kraj);string.substring(pocetak,kraj);imeStringa.slice(pocetak,duzina); Primer:var poz = "Dobar dan! ";document.writeln(poz.slice(6,9));document.write(poz.substring(6,4)); Rezultat primera: dan dan

Metoda objekta string – link Metoda link služi za specificiranje linka. Sintaksa: var imeStringa = string1; var URL = string2;imeStringa.link(URL); Primer:var str="Free Web Tutorials!";var str2= "http://www.w3schools.com"; document.write(str.link(str2)); Rezultat primera (vodi na URL w3schools): Free Web Tutorials!

Math Math je objekat čije su osobine matematičke

konstante, a metode su matematičke funkcije Matematičke konstante: var imePromenljive = Math.osobina; Matematičke funkcije:var imePromenljive =

Math.metoda(imePromenljive1,imePromenljive2,…);

Promenljive u okviru Math objekta su brojevi, a argumenti metoda mogu biti i konstante.

Osobine i metodi objekta Math Osobine objekta Math su sledeće

konstante: E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2

Metode objekta Math su sledeće funkcije: abs(x), acos (x), asin(x), atan(x), atan2(y,x), ceil(x), cos(x), exp(x), floor(x), log(x), max(x,y), min(x,y), pow(x,y), random(), round(x), sin(x), sqrt(x), tan(x)…

Metoda objekta Math - PI Osobina PI je ustvari konstanta. Sintaksa

svih osobina objekta Math je ista. Sintaksa:var imePromenljive = izraz (Math.PI); Primer:var r=2;var povrsinaKruga=r*r*Math.PI;document.write(povrsinaKruga); Rezultat primera: 12.566370614359172

Metoda objekta Math - max Metoda max je ustvari matematička funkcija. Sintaksa:var imePromenljive = izraz

(Math.max(imePromenljive1, imePromenljive2)); Primer:var r1=2; r2=3;var max1 = Math.max(r2,Math.PI); max2 =

Math.max(r1,1);document.write(max1+ “<br />”+max2); Rezultat primera:3.1415926535897932

Objekat Event Objekat Event se generiše

automatski kada god se desi neki od događaja

Svaki objekt generisan usled nekog događaja ima svoje osobine

DogađajiKod Nastaje kada korisnik...

onBlur izađe iz fokusa elementa forme ili frejma ili prozora

onClick klikne na dokument, element forme ili link

onChange promeni vrednost izabranog elementa forme

onFocus uđe u fokus nekog elementa forme, frejma ili prozora

onLoad učita stranicu u brauzer

onMouseOver pređe pokazivačem miša preko linka ili površine

onMouseOut izađe kurzorom miša sa određene površine ili linka

onSelect izabere tekstualno polje elementa forme

onSubmit izvrši slanje forme

onUnload napusti stranicu

onReset resetuje sadržaj forme

onError dobije grešku prilikom učitavanja slike ili stranice

onAbort prekine učitavanja slike ili stranice

Osobine objekta Event type – tip događaja button – na koje dugme miša je bilo

kliknuto clientX, clientY (pageX, pageY) – x i

y koordinata kursora u odnosu na veb stranu

screenX, screenY – x i y koordinata kursora u odnosu na ekran

...

Primer primene osobine objekta Event

Primer primene osobine objekta Event

Primer primene osobine objekta Event

DOM (Document Object Model) objekti DOM objekti su

window – aktivni prozor navigator – daje info o brauzeru history – istorija brauzovanja screen – podaci o ekranu location – rad sa URL-om document – aktivni dokument je HTML DOM objekat svi HTML elementi su HTML DOM objekti

http://www.w3.org/TR/DOM-Level-2-HTML/html.html http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-

binding.html https://developer.mozilla.org/en/Gecko_DOM_Reference http://www.javascriptkit.com/domref/index.shtml

Zajedničke osobine DOM objekata attributes[] – niz atributa elementa childNodes[] – niz dece elementa className – ime klase elementa id – id elementa innerHTML – sadržaj elementa nodeName – ime entiteta nodeValue – vrednost entiteta parentNode – roditelj entiteta style – stil elementa ...

Zajedničke metode DOM objekata

appendChild(element)getAttribute(imeAtributa)getElementsByTagName(imeTaga)hasAttribute(imeAtributa)insertBefore(noviElement, targetElement)removeAttribute(imeAtributa)removeChild(imeDeteta)replaceChild(novoDete, staroDete)...

Osobine i metode DOM objekata Osim zajedničkih svaki objekat ima

svoje osobine i metode Specifične osobine (X)HTML

elemenata kao objekata su jednake njihovim atributima, dok su osobine elementa <style> jednake CSS osobinama

Detekcija događaje su takođe metodi određenih (X)HTML elemenata

Pristup DOM objektima DOM objektima se pristupa pomoću ID-a i

metode getElementsById ali i na druge načine Sintaksa:elNivo0.elNivo1...elNivoK.imeAtributaelNivo0.elNivo1...elNivoK.innerHTML Gde je:elNivoX=getElementsById(ID) ilielNivoX=getElementsByTagName(tag) ilielNivoX=imeAtributa ilielNivoX=firstChild… Ukoliko је specifikacija elementa ista za više

elemenata onda kao rezultat daje niz tih elemenata

Metode DOM objekta - getElementsById Sintaksa metode getElementsById:specifikacijaElemenata.getElementsById(id); Primer metode:

Osobina DOM objekta - attributes Sintaksa osobine attributes:atributi = new Array(specifikacijaElementa.attributes) Primer:<p> <a id="link" href=“http://www.etf.rs" > ETF </a> </p><script type="text/javascript">var atrSlike = document.getElementById("link").attributes; document.write(atrSlike[0].nodeName+"="+ atrSlike[0].nodeValue+"<br

/>");document.write(atrSlike[1].nodeName+"="+ atrSlike[1].nodeValue); </script> Rezultat primera:ETF

href=www.etf.rsid=link

Primeri pristupa DOM objektima - getElemengById

Primeri pristupa DOM objektima - getElemengById

Primeri pristupa DOM objektima – getElementByTagName

Primeri pristupa DOM objektima Primer za nodeName:If (document.getElementById("test").firstChild.

nodeName ==“div");document.write("This is a div");

Primer za className: document.getElementById("test").className ="class1”; document.getElementById("test").className +=" class2" ;

DOM objekat - window Objekat window je najviši u

hijerarhiji, i označava prozor brauzera u kome se posmatra veb strana

Instancira se automatski sa tagovima <body> i <frameset>

Osobine DOM objekta - window closed – true ako je prozor zatvoren document, history, location – DOM

objekti nižeg nivoa name opener – prozor u kome je otvoren

novi prozor outerHeight, outerWidth self ...

Metode DOM objekta - window open, close alert, confirm, prompt – popup prozorčići resizeBy, resizeTo – promena veličine moveBy, moveTo – pomeranje prozora scrollBy, scrollTo - skrolovanje focus – fokusiranje prozora setInterval, setTimeout – rad sa tajmerima

Metode DOM objekta window: open i close Metodi open i close služe za otvaranje i

zatvaranje prozora Sintaksawindow.open([URL][, ime][, opcije,zameniURL]); Primeri opcija:resizable=yes|no|1|0Menubar=yes|no|1|0top=brojPixelaleft=brojPixelawidth=brojPixelaheight=brojPixela…

Primer korišćenja osobine window.opener<html><body><script type="text/javascript">mojProzor=window.open('','','width=200,height=100');mojProzor.document.write("Ovo je 'mojProzor'");mojProzor.focus();mojProzor.opener.document.write("Ovo je prozor roditelj");</script></body></html>

Rezultat primera korišćenja osobine window.opener

Metode za promene DOM objekta window Za promenu veličine prozora i

njegove pozicije koriste se metode moveBy, moveTo, resizeBy, resizeTo, scrollBy, scrollTo

Ista sintaksa:moveBy(brojPixelaX,brojPixelaY)resizeBy(brojPixelaX,brojPixelaY)scrollBy(brojPixelaX,brojPixelaY)

PopUp prozorčići kao metode DOM objekta window

Metodi su alert-prozorčić upozorenja sa OK dugmetom confirm-prozorčić upozorenja sa OK i otkaži

dugmićima prompt-prozorčić u koji se može upisati tekst

Sintaksaalert(imeStringa)confirm(imeStringa)prompt(imeStringa1,imeStringa2)

Primer Alert prozorčića

Vremenske funkcije kao metode DOM objekta window

Za promenu veličine prozora i njegove pozicije koriste se metode setInterval, clearInterval, setTimeout, clearTimeout

Pomoću metode setInterval se pokreće funkcija sa određenom periodom, a pomoću metode setTimeout pokreće se kod posle zadatog vremena

Ista sintaksa:setIntervalID=setInterval(kod, intervalUMilisekundama)clearInterval(setIntervalID)setTimeoutID=setTimeout(kod, intervalUMilisekundama)clearTimeout(setTimeoutID)

Primer korišćenja metode setTimeout

Primer korišćenja metode setInterval

DOM objekat navigator Daje informacije o brauzeru kroz

sledeće osobine: appName – ime brauzera appVersion – verzija brauzera browserLanguage cpuClass onLine platform cookieEnabled...

DOM objekat screen Daje informacije o karakteristikama

ekrana: height width availHeight – visina bez tulbarova availWidth – širina bez tulbarova pixelDepth – broj bita boje po pixelu bufferDepth – broj bita boje u baferu updateInterval – interval osvežavanja ekrana …

DOM objekat history Objekat history čuva URL-ove koje je

korisnik posetio Osobina je length Pomoću metoda back i forward korisnik se

kreće kroz istoriju URL-ova, a pomoću metode go ide na partikularni URL

Sintaksahistory.back()history.forward()history.go(broj|URL)

DOM objekat location Osobine daju informacije o datom URL-u, npr.

href daje kompletan URL, host daje ime hosta i broj porta, pathname direktorijum datoteke, hostname samo ime hosta itd.

Metode objekta location su assign, reload, i replace i njima se učitava dati URL, osvežava postojeći ili učitava novi URL.

Sintaksa metoda:assign(URL)reload()replace(noviURL)

DOM objekat document Objekat document je dokument sa kojim

radimo i preko njega pristupamo svim njegovim elementima.

Osobine anchors, images, links i forms su nizovi koji sadrže odgovarajuće elemente

Skalarne osobine su: cookie, domain, lastModified, referrer, title, URL

Metodi su: open, close, write, writeln, getElementsByName, getElementsByTagName

Osobina anchors objekta document

Kolačić - cookie

Cookie su tekstualni fajlovi koje brauzer šalje klijentu kao njegov ID Format koji cookie fajl mora da zadovolji je:ime=vrednost[;expires=datum][;domain=imeDomena][;path=putanja] [;secure][;httpOnly]

Kolačić - cookie ime - ime koje definiše upisani cookie vrednost - je upravo informacija koja se želi zapamtiti datum - je datum koji definiše do kada cookie ostaje

upisan na klijentskoj mašini. imeDomena - definiše jedini domen sa kog cookie može

da se čita i da mu se menja vrednost putanja - definiše jedinu putanju sa koje cookie može da

se čita i da mu se menja vrednost. secure - upis i čitanje cookie se izvršava preko posebnih,

bezbednijih kanala Atributi kolačića expires, domain, path, secure, httpOnly

su opcione i nije bitan redosled u kom se pojavljuju.

Primer upotrebe osobine cookie objekta document

Osobina lastModified objekta document

Osobina referrer objekta document

Metodi objekta document – open i close

Metodi objekta document – open i close

Primer promene atributa elementa anchor

Primer promene atributa elementa anchor

Primer rada sa formularom

Primer rada sa formularom