Internet programiranje JavaScript

Uvod
(X)HTML u jednom trenutku postaje ograniavajui faktor Potrebna je nova tehnologija za realizaciju dinamikih 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 identini u preko 95% sluajeva

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 uopte

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

Zata se koristi JavaScript?

Omoguava dinamiki (X)HTML sadraj Moe da menja vrednosti (X)HTML elemenata i atributa Koristi se za proveru ispravnosti popunjenih formulara Reaguje na dogaaje tipa klika, slanja formulara itd. Ostvaruje razne vremenske funkcije

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

Izvravanje 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 zavrava taka zarezom ;

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 - write
Primer: <script type=text/javascript"> document.write(<b>Prvi red</b><br /><i>Drugi red</i>); </script> Rezultat primera: Prvi red Drugi red

Promenljive

Sadre vrednosti koje program smeta u okviru memorije raunara Da bi se koristile u okviru programa:

Na kraju vrednost treba da se dodeli promenljivoj

Napisati naredbu koja kreira promenljivu Dodeliti joj eljeno ime

Imena promenljivih

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

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 znakovna ili numerika vrednost

Tipovi podataka

Specifina kategorija informacija koje se sadre u okviru promenljive Pomae da raunar odredi koliko je prostora potrebno da bi se smestila odreena promenljiva Tip podataka definie i vrstu operacija koje se mogu izvriti sa datom promenljivom

Null vrednost

Vrednost null je

Tip podataka/vrednost koja se moe dodeliti promenljivoj Pokazuje da promenljiva ne sadri nikakvu korisnu vrednost Vrednost null se dodeljuje promenljivoj kada se eli definisati da promenljiva ne sadri nikakav podatak

Deklaracija tipova

Striktni programski jezici

Zahtevaju da se deklarie tip podataka promenljive Statiki tip podataka

Tip podataka se ne menja nakon same deklaracije

Jednostavniji programski jezici - JavaScript

Ne zahtevaju da se deklarie tip podataka promenljive Dinamiki tip podataka

Tip podataka se moe 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 smeten u okviru promenljive Dodeljuje tip podatka promenljivoj dinamiki

Tipovi podataka u JavaScript-u

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).

Operatori
Aritmetiki Na nivou bita Relacionalni Logiki

Aritmetiki operatori
Operator Opis Operator Opis

+
* / % ++

sabiranje
oduzimanje mnoenje deljenje moduo inkrement

+=
-= *= /= %= --

sabiranje dodela
oduzimanje dodela mnoenje dodela deljenje dodela Moduo dodela dekrement

Aritmetiki 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 izvravanja prethodnog primera dobija se sledei tekst na ekranu: a, b, c, d, e, su 2 6 1.5 4 -4

Na nivou bita
Operator Upotreba Opis

Logiko I (AND)
Logiko ILI (OR) Logiko eksluzivno ILI (XOR) Logiko NE (NOT) Pomeranje ulevo Pomeranje udesno sa znakom Pomeranje udesno sa nulama

a&b
a|b a^b ~a a << b a >> b a >>> b

Rezultatni bit je 1, jedino ako su oba bita 1 u ostalim sluajevima rezultat je 0.

Rezultatni bit je 0, jedino ako su oba bita 0 u ostalim sluajevima rezultat je 1. Rezultatni bit je 1, ako biti imaju razliite vrednosti, u suprotnom je 0. Komplementira bitove operanda a. Pomera binarni sadraj operanda za b mesta ulevo. Prazna mesta popunjava sa vrednou 0. Pomera binarni sadraj operanda za b mesta udesno. Prazna mesta popunjava sa vrednou najstarijeg bita. Pomera binarni sadraj operanda za b mesta udesno. Prazna mesta popunjava sa vrednou 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)

Logiki operatori
Operator I (&&) ILI (||) NE (!) Upotreba expr1 && expr2 expr1 || expr2 !expr Opis Rezultat je true, jedino ako su oba operanda true, u ostalim sluajevima rezultat je false. Rezultat se dobija false, jedino ako su oba operanda false, u ostalim sluajevima rezultat je true. Rezultat se dobija komplement od vrednosti operanada. Ako je operand true, rezultat je false, ako je operand false, rezultat je true

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

Operatori poreenja
Operator Jednakost (==) Nejednakost (!=) Vee (>) Vee ili jednako (>=) Manje (<) Manje ili jednako (<=) Jednako bez konverzije tipova (===) Razliito bez konverzije tipova (!==) Upotreba Rezultat je true ako su operandi jednaki Rezultat je true ako su operandi razliiti. Rezultat je true ako je levi operand vei od desnog operanda. Rezultat je true ako je levi operand vei ili jednak desnom operandu Rezultat je true ako je levi operand manji od desnog operanda Rezultat je true ako je levi operand manji ili jednak desnom operandu Rezultat je true ako su operandi jednaki bez konverzije podataka Rezultat je true ako su operandi razliiti bez konverzije podataka Opis x == y rezultat je true ako su x i y jednaki. x ! = y rezultat je true ako su x i y razliiti. x > y ako je x vee od y. x >= y ako je x vee ili jednako y. x < y rezultat je true ako je x manje od y. x <= y rezultat je true ako je x manje ili jednako y. x === y rezultat je true ako su x i y jednaki bez konverzije podataka x !== y rezultat je true ako su x i y razliiti bez konverzije podataka

Operatori poreenja
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

Funkcije

Funkcije predstavljaju grupu naredbi

koja se moe izvriti kao pojedinana jedinica

Funkcije su korisne jer ine program preglednijim i lakim za auriranje 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 moe nai u zaglavlju i telu (X)HTML koda, ali preporuivo je da se smesti u zaglavlje (X)HTML koda. Sintaksa za definisanje funkcije je : function imeFunkcije(parametri) { naredbe; }

Pozivanje funkcije
Da bi se izvrila funkcija potrebno ju je pozvati sa odreenog mesta u okviru programa Funkcija se poziva njenim imenom i specifikacijom argumenata u okvir zagrada Vrednosti argumenata se prosleuju odgovarajuim parametrima funkcije u skladu sa deklaracijom funkcije

Naredba return

Slui da bi se vratio rezultat funkcije pozvanoj naredbi

Dodeljuje pozvanoj naredbi vrednost odreene promenljive

return 8; return p*m;

Opseg vaenja promenljive

Prema opsegu vaenja promenljive se dele na globalne ili lokalne. Globalne promenljive se deklariu izvan funkcije, i moe im se pristupiti iz bilo kog dela programa. Lokalne promenljive se deklariu u okviru funkcije i jedino su dostupne u okviru funkcije u kojoj su deklarisane. Parametri su takoe lokalne promenljive.

Ugraene 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 81 y je 150

Objekti

JavaScript podravaju objekte kao strukture podataka Objekti se definiu pomou funkcija Za svaki objekat su vezane osobine i metode Osobine su promenljive kojima se dodaju odreene vrednosti Metode su funkcije u okviru objekata kojima mogu da se menjaju njihove osobine

Kreiranje klase i instance objekta

Klasa objekta ili prototip se definie funkcijom ija je sintaksa function mojObjekat (p1,p2,){ this.osobina1=f1(p1,p2,); this.osobina2=f2(p1,p2,); } Instanca objekta se definie pomou naredbe new mojaInstanca=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 moe koristiti na sledei nain: imePromenljive=mojaInstanca.Osobina1; Vrednost osobine instance objekta se moe promeniti ili naknadno definisati ukoliko nije bila ranije: mojaInstanca.Osobina1=vrednost1; Vrednost osobine klase objekta se moe 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; };

Korienje metoda
Primer korienja metoda iz prethodnog primera: var testkrug = new mojkrug(3,4,5); testkrug.pomeri(2,3); document.write( Povrina kruga je ' + testkrug.povrsina() ); document.write( <br />Obim kruga je ' + testkrug.obim() ); Rezultat prethodnih komandi je: Povrina kruga je 78.53981633974483 Obim kruga je 31.41592653589793

Ugraeni objekti

Array - niz RegExp uzorci za pretraivanje String - znakovni niz Date vreme Event objekti koje generiu dogaaji Boolean logika promenljiva Math - Matematiki objekt DOM (X)HTML i JavaScript objekti

2. Kontrola toka

Ternarni operator If-else naredba Switch naredba Petlje

Izlazi iz blokova

For petlja While petlja

Break Continue

With naredba

Ternarni operator
Sintaksa: logIzraz ? izraz1 : izraz2 gde je izraz log_izraz bilo koji izraz iji rezultat je vrednost logikog tipa. Ako je rezultat izraza true, onda se izvrava izraz1, u suprotnom izraz2. Primer: kolicnik = (imenioc ==0 ? 0 : brojioc/ imenioc)

Kontrole toka - if
Sintaksa: if (logIzraz) {naredbe1;} [else {naredbe2;}]

Primer: if (x == 8) {

else { }

y=x;

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=i+1; }

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

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 nee 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 nee biti prikazano); } document.writeln(posle break-a); } Rezultat: pre break-a ovo nee 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: 01 23 45 67 89

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 pretraivanje String - znakovni niz Date vreme Event objekti koje generiu dogaaji Math - Matematiki objekt DOM HTML i JavaScript objekti

Osobine i metodi ugraenih objekata

Mogu se nai na

http://www.w3schools.com/js/default.asp http://www.w3schools.com/htmldom/default.asp http://www.w3.org/TR/DOM-Level-2HTML/html.html http://www.w3.org/TR/DOM-Level-2-HTML/ecmascript-binding.html https://developer.mozilla.org/en/Gecko_DOM_Ref erence http://www.devguru.com/Technologies/ecmascript /quickref/javascript_index.html http://www.javascriptkit.com/domref/

Niz

Niz je objekat koji se sastoji iz vie elemenata Niz se kreira pomou rei new i konstruktora Array() na sledee naine:

var imeNiza = new Array(); imeNiza = new Array(element0, element1, ..., elementN); Primeri:
var mojaKola=new Array(Honda","Volvo","BMV");

Pristup elementima niza

Pojedinanom 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 korienja osobine length for(i=0; i<mojaKola.length; i++){ document.write(mojaKola[i] + <br />); } Rezulat gornjeg primera:

Honda Volvo Jugo

Metode objekta Array concat

Sintaksa metode concat imeNiza1.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 concat imeNiza.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 sort imeNiza.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 sledee naine: 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 moe imati bilo koji string koga moe da protumai 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 vraa 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 vraa broj milisekundi do navedenog datuma po lokalnom vremenu (od 1.1.1970 00:00:00) Sintaksa je malo drugaija: 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 vraa 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 vraa 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 vraa minute za navedeni datum, mogue 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 vri 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 podeavanja operativnog sistema: 25. 2001 23:15:00

Metoda objekta Date toUTCString

Ovaj metod vri 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 Boia!");} </script> Rezultat: Mon Mar 23 2009 00:12:50 GMT+0100 (Central Europe Standard Time) Samo 290 dana do Boia!

Uzorak
Uzorak je niz znakova i specijalnih znakova Konstruktor objekta uzorak je RegExp, meutim 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 nain apliciranja mustre. Specijalni znakovi se koriste da bi se definisao izraz koji se trai 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 uestvuje su search, match, replace, split

Specijalni znaci u uzorcima

Karakter Slovo ili broj \t \n \f \r \ \uxxxx Istu vrednost Tab znak Nova linija Nova strana Poetak linije Navodnici Unicode karaktera definisan pomou heksadecimalnog boja xxxx; na primer, \u0009 ima isti efekat kao i \t Predstavlja

Specijalni znaci u uzorcima

Karakter
[...] [^...] . \w \W \d \D \s \S

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 Bilo kog ASCII definisanog slova. Bilo kog karaktera koji nije ASCII definisano slovo. Bilo koje ASCII definisane cifre Bilo kog karaktera koji nije ASCII definisana cifra Blanko znak 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/ Pomou ovog uzorka se definie broj koji se sastoji od 5 cifara

Specijalni znaci u uzorcima

Oznaka {n,m} {n,} {n} ? + * | (...) ^ $ Znaenje Ponavljanje prethodne grupe najmanje n puta, ali najvie m puta. Ponavljanje prethodne grupe n ili vie puta. 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 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

Primeri uzoraka

/\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, npr. 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 karakter 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

Atributi uzoraka
Atribut i 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.

Osobine uzorka ignoreCase

Osobina ignoreCase daje informaciju da li je pretraga osetljiva na veliinu 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 naeni. Sledee pretraivanje treba da pone od sledeeg 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 sadri najdui pronaeni 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 trai uzorak u datom tekstu i vraa true ukoliko ga nae 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 sadri niz znakova Konstruktor objekta string je String, meutim 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 izraunava broj znakova u stringu, i ima istu sintaksu kao i kod objekta niz Brojni su metodi objekta string:

Koji odreuju stil niza: Koji trae podniz niza:

slice, substring, concat link, anchor

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

Kojima se formiraju novi nizovi: Za kreiranje linkova:

search, match, replace, charCodeAt, indexOf...

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

Metodi big, bold, toLowerCase i slini vraaju string u specificiranom formatu, i svi imaju slinu sintaksu. Sintaksa: var imeStringa = String; imeStringa.big(); imeStringa.bold(); imeStringa.toLowerCase(); Primer: var poz = Dobar dan! ; document.write(poz.big()+poz.bold()+poz.toLowerC ase()); Rezultat primera: Dobar dan! Dobar dan! dobar dan!

Metode objekta string fontsize, fontcolor, ...

Metodi fontsize i fontcolor vraaju string u specificiranom formatu, i imaju slinu 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 slini vraaju string u specificiranom formatu, i svi imaju slinu 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: 6 Dobar 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 vraaju deo stringa, i imaju slinu 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 slui 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 matematike konstante, a metode su matematike funkcije Matematike konstante: var imePromenljive = Math.osobina; Matematike 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 sledee konstante: E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2 Metode objekta Math su sledee 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 matematika 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.141592653589793 2

Objekat Event
Objekat Event se generie automatski kada god se desi neki od dogaaja Svaki objekt generisan usled nekog dogaaja ima svoje osobine

Dogaaji
Kod onBlur onClick onChange onFocus onLoad onMouseOver onMouseOut onSelect onSubmit onUnload onReset onError onAbort Nastaje kada korisnik... izae iz fokusa elementa forme ili frejma ili prozora klikne na dokument, element forme ili link promeni vrednost izabranog elementa forme ue u fokus nekog elementa forme, frejma ili prozora uita stranicu u brauzer pree pokazivaem mia preko linka ili povrine izae kurzorom mia sa odreene povrine ili linka izabere tekstualno polje elementa forme izvri slanje forme napusti stranicu resetuje sadraj forme dobije greku prilikom uitavanja slike ili stranice prekine uitavanja slike ili stranice

Osobine objekta Event

type tip dogaaja button na koje dugme mia 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

http://www.w3.org/TR/DOM-Level-2-HTML/html.html http://www.w3.org/TR/DOM-Level-2-HTML/ecma-scriptbinding.html https://developer.mozilla.org/en/Gecko_DOM_Reference http://www.javascriptkit.com/domref/index.shtml

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

Zajednike osobine DOM objekata

attributes[] niz atributa elementa childNodes[] niz dece elementa className ime klase elementa id id elementa innerHTML sadraj elementa nodeName ime entiteta nodeValue vrednost entiteta parentNode roditelj entiteta style stil elementa ...

Zajednike 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 zajednikih svaki objekat ima svoje osobine i metode Specifine osobine (X)HTML elemenata kao objekata su jednake njihovim atributima, dok su osobine elementa <style> jednake CSS osobinama Detekcija dogaaje su takoe metodi odreenih (X)HTML elemenata

Pristup DOM objektima

DOM objektima se pristupa pomou ID-a i metode getElementsById ali i na druge naine Sintaksa: elNivo0.elNivo1...elNivoK.imeAtributa elNivo0.elNivo1...elNivoK.innerHTML Gde je: elNivoX=getElementsById(ID) ili elNivoX=getElementsByTagName(tag) ili elNivoX=imeAtributa ili elNivoX=firstChild Ukoliko specifikacija elementa ista za vie 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>

ETF

Rezultat primera:

href=www.etf.rs id=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 najvii u hijerarhiji, i oznaava 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 nieg nivoa name opener prozor u kome je otvoren novi prozor outerHeight, outerWidth self ...

Metode DOM objekta window

open, close alert, confirm, prompt popup prozorii resizeBy, resizeTo promena veliine 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 slue za otvaranje i zatvaranje prozora Sintaksa window.open([URL][, ime][, opcije, zameniURL]); Primeri opcija: resizable=yes|no|1|0 Menubar=yes|no|1|0 top=brojPixela left=brojPixela width=brojPixela height=brojPixela

Primer korienja 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 korienja osobine window.opener

Metode za promene DOM objekta window

Za promenu veliine 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 prozorii kao metode DOM objekta window

Metodi su

alert-prozori upozorenja sa OK dugmetom confirm-prozori upozorenja sa OK i otkai dugmiima prompt-prozori u koji se moe upisati tekst

Sintaksa alert(imeStringa) confirm(imeStringa) prompt(imeStringa1,imeStringa2)

Primer Alert prozoria

Vremenske funkcije kao metode DOM objekta window

Za promenu veliine prozora i njegove pozicije koriste se metode setInterval, clearInterval, setTimeout, clearTimeout Pomou metode setInterval se pokree funkcija sa odreenom periodom, a pomou metode setTimeout pokree se kod posle zadatog vremena Ista sintaksa: setIntervalID=setInterval(kod, intervalUMilisekundama) clearInterval(setIntervalID) setTimeoutID=setTimeout(kod, intervalUMilisekundama) clearTimeout(setTimeoutID)

Primer korienja metode setTimeout

Primer korienja metode setInterval

DOM objekat navigator

Daje informacije o brauzeru kroz sledee 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 osveavanja ekrana

DOM objekat history

Objekat history uva URL-ove koje je korisnik posetio Osobina je length Pomou metoda back i forward korisnik se kree kroz istoriju URL-ova, a pomou metode go ide na partikularni URL Sintaksa history.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 uitava dati URL, osveava postojei ili uitava 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 sadre odgovarajue elemente Skalarne osobine su: cookie, domain, lastModified, referrer, title, URL Metodi su: open, close, write, writeln, getElementsByName, getElementsByTagName

Osobina anchors objekta document

Kolai - 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]

Kolai - cookie

ime - ime koje definie upisani cookie vrednost - 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 kanala Atributi kolaia 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