157
Internet programiranje JavaScript

JavaScript

Embed Size (px)

DESCRIPTION

JavaScript

Citation preview

Page 1: JavaScript

Internet programiranje JavaScript

Page 2: JavaScript

Uvod (X)HTML u jednom trenutku postaje

ograničavajući faktor Potrebna je nova tehnologija za

realizaciju dinamičkih delova aplikacije

Page 3: JavaScript

Uvod Decembar 1995.god, Netscape i Sun

su predstavili JavaScript 1.0, originalno nazvan LiveScript

Microsoft prati sa jezikom JScript ECMAScript 5.1, ili ISO/IEC 16262

standard Danas Netscape, odnosno Mozilla, i

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

Page 4: JavaScript

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 www.jquery.com David Falangan, JavaScript: The Definitive Guide,

O'Reilly Media, Inc., 6th edition, April 2011 www uopšte

Page 5: JavaScript

Osobine

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

Page 6: JavaScript

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

Page 7: JavaScript

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

Page 8: JavaScript

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 ;

Page 9: JavaScript

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

Page 10: JavaScript

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

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

Prikaz - write

Page 11: JavaScript

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

Page 12: JavaScript

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

Page 13: JavaScript

var

U okviru JavaScript jezika, rezervisana reč var 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

Page 14: JavaScript

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

Page 15: JavaScript

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

Page 16: JavaScript

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

Page 17: JavaScript

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

Page 18: JavaScript

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

Page 19: JavaScript

Aritmetički Na nivou bita Relacionalni Logički

Operatori

Page 20: JavaScript

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

Page 21: JavaScript

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

Page 22: JavaScript

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.

Page 23: JavaScript

Na nivou bita

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

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

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

Page 24: JavaScript

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

Page 25: JavaScript

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

Page 26: JavaScript

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

Page 27: JavaScript

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

Page 28: JavaScript

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

Page 29: JavaScript

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;}

Page 30: JavaScript

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 okviru zagrada

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

Page 31: JavaScript

Naredba return

Služi da bi se vratio rezultat funkcije pozvanoj naredbi

Dodeljuje pozvanoj naredbi vrednost određene promenljive

return 8;return p*m;

Page 32: JavaScript

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.

Page 33: JavaScript

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.

Page 34: JavaScript

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

Page 35: JavaScript

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

Page 36: JavaScript

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.

Page 37: JavaScript

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;

Page 38: JavaScript

Primer rada sa objektima<html><body><script type=“text/javascript”>function osoba(ime,prezime,godine){this.ime=ime;this.prezime=prezime;this.godine=godine;}mojOtac=new osoba(“Jovan”,”Simić”,50);document.write(mojOtac.ime + “ “ +

mojOtac.prezime + “ je “ + mojOtac.godine + “ godina star.”);

</script></body></html> RezultatJovan Simić je 50 godina star.

Page 39: JavaScript

Primer rada sa objektima<html><body><script type=“text/javascript”>function osoba(ime,prezime,godine){this.ime=ime;this.prezime=prezime;this.godine=godine;}mojOtac=new osoba(“Jovan”,”Simić”,50);mojOtac.ime=“Petar”;document.write(mojOtac.ime + “ “ + mojOtac.prezime

+ “ je “ + mojOtac.godine + “ godina star.”);</script></body></html> RezultatPetar Simić je 50 godina star.

Page 40: JavaScript

Primer rada sa objektima<html><body><script type=“text/javascript”>function osoba(prezime,godine){this.prezime=prezime;this.godine=godine;}mojOtac=new osoba(”Simić”,50);mojOtac.ime=“Ivan”;document.write(mojOtac.ime + “ “ +

mojOtac.prezime + “ je “ + mojOtac.godine + “ godina star.”);

</script></body></html> RezultatIvan Simić je 50 godina star.

Page 41: JavaScript

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; }

Page 42: JavaScript

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; };

Page 43: JavaScript

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

Page 44: JavaScript

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

Page 45: JavaScript

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

For petlja While petlja

Izlazi iz blokova Break Continue

With naredba

Page 46: JavaScript

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

Page 47: JavaScript

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

[else {naredbe2;}]

Primer: if (x == 8) {

                    y=x;           }

else {                z=x;

y=y*x; }

Page 48: JavaScript

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”;

Page 49: JavaScript

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

Page 50: JavaScript

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 ”;}

Page 51: JavaScript

Petlje - while Sintaksa: [inicijalizacija;]

while(logIzraz){ naredbe; }

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

i=i+1;}

Page 52: JavaScript

Petlje - do-while Sintaksa: [inicijalizacija;]

do { naredbe;

} while (logIzraz);

Primer: i=1;

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

} while(i<=10)

Page 53: JavaScript

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

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

Page 54: JavaScript

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

Page 55: JavaScript

Kontrola toka - break Primer: a: {

b: {c: {

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

Rezultat: pre break-a posle break-a

Page 56: JavaScript

Kontrola toka - break Primer: a: {

b: {c: {

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

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

Page 57: JavaScript

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

Rezultat: 0 1

2 34 56 78 9

Page 58: JavaScript

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);}x=r*Math.cos(Math.PI);

Page 59: JavaScript

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

Page 60: JavaScript

Osobine i metodi ugrađenih objekata

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

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

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

Reference http://www.javascriptkit.com/domref/

Page 61: JavaScript

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");

Page 62: JavaScript

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

Page 63: JavaScript

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

Page 64: JavaScript

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

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

HondaVolvoJugo

Page 65: JavaScript

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

Page 66: JavaScript

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

Page 67: JavaScript

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

Page 68: JavaScript

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

Page 69: JavaScript

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

Page 70: JavaScript

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

Page 71: JavaScript

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

Page 72: JavaScript

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

Page 73: JavaScript

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

Page 74: JavaScript

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

Page 75: JavaScript

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 = datum.getDate();document.write(dan); Rezultat primera: 25

Page 76: JavaScript

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 = datum.getDay();document.write(dan); Rezultat primera: 2

Page 77: JavaScript

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 = datum.getMinutes(); document.write(minuta); Rezultat primera: 15

Page 78: JavaScript

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)

Page 79: JavaScript

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)

Page 80: JavaScript

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

Page 81: JavaScript

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

Page 82: JavaScript

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!

Page 83: JavaScript

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.

Page 84: JavaScript

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

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

Page 85: JavaScript

Osobine i metodi objekta uzorka Osobine uzorka su global,

ignoreCase, multiline, lastIndex, leftContext, rightContext,…

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

Page 86: JavaScript

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

Page 87: JavaScript

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

Page 88: JavaScript

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

Page 89: JavaScript

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

Page 90: JavaScript

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”

Page 91: JavaScript

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.

Page 92: JavaScript

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

Page 93: JavaScript

Osobine uzorka – lastIndex Osobina lastIndex je indeks

poslednjeg znaka koji je nađen. Sledeće pretraživanje treba da počne od parametra lastIndex.

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

Page 94: JavaScript

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.

Page 95: JavaScript

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

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

Page 96: JavaScript

Primer – exec - IE<html><body><script type=“text/javascript”>var uzorak=/Java/g;var text = “JavaScript je mnogo zabavniji nego Java!”;while ((rez=uzorak.exec(text))){ document.write(“Pronađen

‘“ + rez[0] + “’ na poziciji” + rez.index +”; Sledeća pretraga počinje od “ + uzorak.lastIndex + “.<br />”);}

</script></body></html> RezultatPronađen ‘Java’ na poziciji 0; Sledeća pretraga počinje od 4.Pronađen ‘Java’ na poziciji 35; Sledeća pretraga počinje od 39.

Page 97: JavaScript

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);…

Page 98: JavaScript

Primer upotrebe lastIndex - IE<html><body><script type=“text/javascript”>var str=“The rain in Spain staysmainly in the plain”;var pat = new RegExp(“ain”,”g”);for (i=0;i<4;i++){pat.test(str);document.write(“ain found. Index is now at:” + pat.lastIndex

+ “<br />”);}</script></body></html> Rezultatain found. Index now at: 8ain found. Index now at: 17ain found. Index now at: 28ain found. Index now at: 43

Page 99: JavaScript

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;

Page 100: JavaScript

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

Page 101: JavaScript

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!

Page 102: JavaScript

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!

Page 103: JavaScript

Metode objekta string – search, replace ...

Metodi search, match, replace i slični pretražuju string . Search nalazi poziciju uzorka, match nalazi sve podstringove u stringu koji odgovaraju uzorku.

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

Page 104: JavaScript

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

Page 105: JavaScript

Metode objekta string – substring, slice ...

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

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

Page 106: JavaScript

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!

Page 107: JavaScript

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.

Page 108: JavaScript

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

Page 109: JavaScript

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

Page 110: JavaScript

Metoda objekta Math - max Metoda max je ustvari matematička funkcija. Sintaksa:var imePromenljive = izraz (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

Page 111: JavaScript

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

Page 112: JavaScript

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

Page 113: JavaScript

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

kliknuto clientX, clientY – x i y koordinata

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

kursora u odnosu na ekran ...

Page 114: JavaScript

Primer primene osobine objekta Event

Page 115: JavaScript

Primer primene osobine objekta Event

Page 116: JavaScript

Primer primene osobine objekta Event

Page 117: JavaScript

DOM 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-bindi

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

Page 118: JavaScript

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

Page 119: JavaScript

Zajedničke metode DOM objekataappendChild(element)getAttribute(imeAtributa)getElementsByTagName(imeTaga)getElementsByName(imeNameAtributa)hasAttribute(imeAtributa)insertBefore(noviElement, targetElement)removeAttribute(imeAtributa)removeChild(imeDeteta)replaceChild(novoDete, staroDete)...

Page 120: JavaScript

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

Page 121: JavaScript

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=firstChild… Ukoliko је specifikacija elementa ista za više

elemenata onda kao rezultat daje niz tih elemenata

Page 122: JavaScript

Metode DOM objekta - getElementsById

Page 123: JavaScript

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

Page 124: JavaScript

Primeri pristupa DOM objektima - getElementById

Page 125: JavaScript

Primeri pristupa DOM objektima - getElemengById

Page 126: JavaScript

Primeri pristupa DOM objektima – getElementByTagName

Page 127: JavaScript

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 =“klasa1”;

Page 128: JavaScript

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>

Page 129: JavaScript

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

Page 130: JavaScript

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

Page 131: JavaScript

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…

Page 132: JavaScript

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>

Page 133: JavaScript

Rezultat primera korišćenja osobine window.opener

Page 134: JavaScript

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)

Page 135: JavaScript

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)

Page 136: JavaScript

Primer Alert prozorčića<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script type="text/javascript">function disp_alert(){alert('Ja sam Alert prozorčić');}</script></head><body><input type="button" onclick="disp_alert();"value="Pokaži Alert prozorčić" /></body></html>

Page 137: JavaScript

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)

Page 138: JavaScript

Primer korišćenja metode setTimeout

Page 139: JavaScript

Primer korišćenja metode setInterval

Page 140: JavaScript

DOM objekat navigator Daje informacije o brauzeru kroz

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

Page 141: JavaScript

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 …

Page 142: JavaScript

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)

Page 143: JavaScript

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)

Page 144: JavaScript

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 (opšta metoda), getElementsByTagName (opšta metoda)

Page 145: JavaScript

Osobina forms objekta document

Page 146: JavaScript

Slanje formulara<html><head><script>function formularSubmit(y){document.getElementById(y).submit();}</script></head><body><p>Enter some text in the fields below, then press the "Submit form" button

to submit the form.</p><form id="frm1" action="formularAkcija.php">First name: <input type="text" name="fname"><br /> Last name: <input type="text" name="lname"><br /><br /><input type=“submit" onclick="formularSubmit(‘frm1’)" value="Submit form"></form></body></html>

Page 147: JavaScript

Slanje formulara - validacija

Validacija formulara se može vršiti u funkciji koja se poziva kao vrednost atributa onclick kada se klikne na “submit” dugme.

Alternativno mоže se vršiti validacija za svako polje formulara, u funkciji koja se poziva kao vrednost atributa onblur ili onchange.

Page 148: JavaScript

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]

Page 149: JavaScript

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.

Page 150: JavaScript

Primer upotrebe osobine cookie objekta document

<!DOCTYPE html><html><head><script type="text/javascript">function postavljanjeCookie(){document.cookie='Cookie je='+document.forma1.imeCookie.value;}function prikazCookie(){alert(document.cookie);}</script></head><body><h2> Postavljanje i pregled <i>cookie</i> fajlova </h2><form name="forma1"><p><input name="imeCookie" type="text" id="imeCookie" size="20"></p><p><input type="button" value="Upišite ime" onClick="postavljanjeCookie()"><input type="button" value="Prikaži cookie" onClick="prikazCookie()"></p></form></body></html>

Page 151: JavaScript

Osobina lastModified objekta document

Page 152: JavaScript

Osobina referrer objekta document

Page 153: JavaScript

Metodi objekta document – open i close

Page 154: JavaScript

Metodi objekta document – open i close

Page 155: JavaScript

Primer promene atributa elementa anchor

Page 156: JavaScript

Primer rada sa formularom

Page 157: JavaScript

<html><head><script>function checkLen(x,y){if (y.length==x.maxLength) {var next=x.tabIndex; if (next<document.getElementById("myForm").length) {document.getElementById("myForm").elements[next].focus(); }}}</script></head>

<body><p>This script automatically jumps to the next field when a field's maxlength has been reached:</p><form id="myForm"><input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)"><input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)"><input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)"></form></body></html>

Primer rada sa formularom