javascript skripta

8/18/2019 JavaScript Skripta

1/155

Contents

JavaScript.................................................................................................................... 1

Sintaksa....................................................................................................................... 1

Implementacija JavaScript u HTML................................................................................1

JavaScript promenjljive................................................................................................2

Tipovi podataka............................................................................................................3

Celi brojevi............................................................................................................... 3

Brojevi u pokretnom zarezu.......................................................................................4

Boolean.................................................................................................................... 4

Stringovi...................................................................................................................4

Operatori..................................................................................................................... 4

Aritmetički operatori:..................................................................................................4

Operatori dodeljivanja:................................................................................................ 4

Operatori poredjenja:.................................................................................................. 5

Logički operatori:....................................................................................................... 5

String operator..........................................................................................................5

slovni operator........................................................................................................ 5

!rioriteti operatora......................................................................................................6

"izovi.......................................................................................................................... 7

Osnovne #unkcije..........................................................................................................8

Op$te JavaScript #unkcije.............................................................................................8

eval% &.......................................................................................................................8

parse'loat% &............................................................................................................. 8

escape% &...................................................................................................................9

unescape% &(.............................................................................................................. 9

lengt).......................................................................................................................9

JavaScript #unkcije nizova.......................................................................................... 10

concat% &................................................................................................................. 10

join% &..................................................................................................................... 10

pop% &..................................................................................................................... 10

s)i#t% &.................................................................................................................... 11

pus)% &.................................................................................................................... 11

uns)i#t% &................................................................................................................ 11

reverse% &................................................................................................................11


2/155

slice% &.................................................................................................................... 12

sort% &..................................................................................................................... 12

splice% &.................................................................................................................. 12

Tekstualne string #unkcije...........................................................................................12

String #unkcije........................................................................................................... 13c)ar*t% &................................................................................................................. 14

c)arCode*t% &.......................................................................................................... 14

#romC)arCode% &......................................................................................................14

inde+O#% &............................................................................................................... 14

slice% &.................................................................................................................... 14

split% &....................................................................................................................15

substr% &.................................................................................................................. 15

toLo,erCase% &........................................................................................................16topperCase% &........................................................................................................ 16

JavaScript regularni izrazi.......................................................................................... 16

Modi#ikatori-........................................................................................................... 16

.agrade..................................................................................................................16

Metakarakteri..........................................................................................................17

/vanti#ikatori.......................................................................................................... 17

matc)% &..................................................................................................................18

replace% &................................................................................................................ 18searc)% &................................................................................................................. 18

Matemati0ke #unkcije................................................................................................. 19

'unkcije za brojeve.................................................................................................19

/onstante............................................................................................................... 19

Matemati0ke #unkcije..............................................................................................20

• 1atum #unkcije....................................................................................................20

/ontrolne strukture.................................................................................................... 23

JavaScript I'2 I' 3LS3 i S4ITCH grananja......................................................................23I# ............................................................................................................................ 23

S4ITCH...................................................................................................................24

JavaScript 'O52 4HIL3 i 1O 4HIL3 petlje....................................................................25

'or petlja................................................................................................................25

,)ile petlja............................................................................................................ 25


3/155

1o ,)ile................................................................................................................. 26

continue................................................................................................................. 26

Sopstvene #unkcije..................................................................................................... 26

Dogadjaji....................................................................................................................28

Obradjiva0i dogadjaja................................................................................................. 29OnLoad.......................................................................................................................30

OnUnload................................................................................................................... 30

OnClick...................................................................................................................... 31

OnFocus..................................................................................................................... 31

OnBlur........................................................................................................................31

OnChange................................................................................................................... 32

OnSelect.....................................................................................................................32

OnSubmit....................................................................................................................33OnMouseOver.............................................................................................................. 33

OnMouseOut................................................................................................................34

OnKeyUp.................................................................................................................... 34

OnMouseMove............................................................................................................. 35

Bro,ser #unkcije........................................................................................................ 35

*lert2 con#irm i prompt ,indo, dijalo$ki prozori..........................................................36

CO"'I5M................................................................................................................. 37

!5OM!T.................................................................................................................. 37Otvaranje stranice u iska0u6em prozoru......................................................................38

Close%&2 moveB7%&2 moveTo%&2 #ocus%& i blur%&................................................................39

Close% &...................................................................................................................39

MoveB7% &................................................................................................................40

MoveTo% &................................................................................................................ 40

'ocus% &.................................................................................................................. 40

Blur% &.....................................................................................................................40

rintanje strane.......................................................................................................... 40

SetTimeOut%&2clearTimeOut%&2setInterval%&2 clearInterval%&............................................41

SetTimeOut% &......................................................................................................... 41

ClearTimeOut% &...................................................................................................... 41

SetInterval% & i ClearInterval% &.................................................................................41

5esizeB7%& i resizeTo%&................................................................................................42


4/155

5esizeB7% &.............................................................................................................. 42

5esizeTo% &.............................................................................................................. 42

ScrollB7%& i scrollTo%&...................................................................................................42

ScrollB7% &............................................................................................................... 42

ScrollTo% &............................................................................................................... 43"avigatorske #unkcije................................................................................................. 43

Java3nabled% &........................................................................................................43

"kranske #screen$ %unkcije............................................................................................ 44

Histor7 #unkcije..........................................................................................................44

Histor78lengt)......................................................................................................... 44

Histor78back% & i )istor78#or,ard% &............................................................................ 45

9o%argument&.......................................................................................................... 45

Location %unkcije.........................................................................................................45&'ML DOM objekti.......................................................................................................46

Document(anchors)*.....................................................................................................46

document(%orms)* i document(images)*..........................................................................47

1ocument8links:;........................................................................................................47

1ocument8cookie i jo$ neke #unkcije...........................................................................49

Document(get"lementBy+d#id$.......................................................................................50

,nchor %unkcije........................................................................................................... 50

'astatura i mi- #"."/' atributi$.....................................................................................51'abele........................................................................................................................ 53

Cells)* i ro0s)*............................................................................................................ 53

Border1 celladding1 cellSpacing1 0idth i height..............................................................54

Frame........................................................................................................................ 54

2ules..........................................................................................................................55

+nsert2o0#$ i insertCell#$..............................................................................................56

Delete2o0#$1 deleteCell#$ i ro0+nde3.............................................................................56

,lign.......................................................................................................................... 57

ColSpan i ro0Span.......................................................................................................57

+nner&'ML.................................................................................................................. 58

4idth......................................................................................................................... 58

.,lign......................................................................................................................... 59

5S i CSS......................................................................................................................59


5/155

JS background CSS #unkcije.........................................................................................60

JS border CSS #unkcije................................................................................................ 61

JS margin CSS #unkcije................................................................................................62

JS padding CSS #unkcije..............................................................................................63

JS la7out CSS #unkcije.................................................................................................63JS list CSS #unkcije.....................................................................................................66

JS CSS #unkcije za poziciju..........................................................................................67

JS tekstualne CSS #unkcije.......................................................................................... 68

C,/.,S...................................................................................................................... 70

C,/.,S ugradnja u &'ML..............................................................................................71

Crtanje pravougaonika................................................................................................72

Crtanje razni) oblika..................................................................................................73

Be6ijerove krivulje......................................................................................................75/lasi0ne slike............................................................................................................. 77

Stilovi i boje.............................................................................................................. 79

'ransparentnost boja................................................................................................... 80

Stil linija.................................................................................................................... 81

"ijansiranje boja........................................................................................................ 82

attern.......................................................................................................................84

Senke......................................................................................................................... 85

Saving i restoring stanja..............................................................................................86'ranslacije.................................................................................................................. 87

2otacije..................................................................................................................... 88

Skaliranje................................................................................................................... 88

Trans#ormacije........................................................................................................... 90

/ompozicije............................................................................................................... 92

+se7ci......................................................................................................................... 93

Slo8eniji primeri C,/.,S gra%ike....................................................................................94

5avaScript skripte........................................................................................................ 95

U ovom delu da9emo vrlo prakti7ne skripte koje se 7esto koriste prilikom i6rade sajtova(+mplementacija je :asovnik.......................................................................................... 95

Kalendar.....................................................................................................................96

ovratak na vrh........................................................................................................... 96

Sneg........................................................................................................................... 98


6/155

Slajd -ou.................................................................................................................. 100

,nimirani tekst..........................................................................................................106

&armonika................................................................................................................ 108

Okvir 6a sadr6aj........................................................................................................113

Objasnjenje u %ormi...................................................................................................120Brojanje 6nakova.......................................................................................................122

'ekst editor.............................................................................................................. 124

Uvecanje slike........................................................................................................... 131

Lepljivi boks............................................................................................................. 134

Skrolovan tekst ;....................................................................................................... 137

Skrolovan tekst


7/155

U ovom delu ra6matra9emo najosnovnije stvari be6 kojih je nemogu9e bilo -ta kreirati ve6ano 6a5avaScript( 'u se pre svega misli na 5avaScript sintaksu1 tipove promenjljivih1 operatore itd( o8eljnoje ovaj deo dobro nau7iti kako bi se kasnije lak-e ra6umele kompleksnije stvari(

rimeri su kreirani tako da naj minimalnijim pisanjem do7aravaju najbolje -to je mogu9e ve6ano 6a ono-to bi trebalo da objasne( reporu7ujemo da ni jedan primer ne preska7ete( reporu7ujemo takodje da

svaki primer prepi-ete u notepad1 sa7uvate %ajl kao &'ML dokument i pokrenitega brau6erom1 kako biste videli re6ultat( Ovakvim na7inom u7enja ste9i9ete rutinu1 a i bolje 9e te 6apamtiti sintaksu('akodje je preporu7ljivo da sami i6vr-ite ra6na eksperimentisanja sa primerima(

Implementacija JavaScript u HTMLostoje nekoliko na7ina implementacija1 to jest umetanja 5avaScript koda unutar &'ML koda( Osnovnije pomo9u SC2+' taga1 koji ima i po7etni i krajnji tag1 ovakoA

Unutar SC5I!T taga koristi se atribut T

o nekad je 5avascript kod jako veliki pa da ne optere9ujemo &'ML %ajl mo8emo ga smestiti u poseban%ajl sa eksten6ijom 8js ( Umetanje takvog 5avaScript %ajla u &'ML kod vr-i se ovakoA

Kao -to vidimo dodali smo atribut S2C koji 6a vrednost ima lokaciju 5avaScript %ajla( U samom5avaScript %ajlu na po7etku ne stavljamo nikakve posebne tagove ili bilo kakve o6nake1 ve9 normalnopi-emo 7ist 5avaScript kod( Ovi 6asebni %ajlovi su jako 6godni u slu7ajevima kad jednom napisan5avaScript kod mo8emo upotrebljavati u vi-e &'ML dokumenata( Obi7no se 5avaScript %ajlovi ume9u u&",D delu ali i ne mora(

5avaScript kod1 kao -to smo rekli1 se ume9e u &",D delu &'ML koda1 i u tom slu7aju taj kod se nei6vr-ava sve dok se ne po6ove na i6vr-enje( U &",D delu se naj9e-9e sme-taju 5avaScript %unkcije kojemi pravimo( 'akodje 5avaScript kod mo8emo umetati i u BODH delu( Kada se umetne u BODH1 onogtrenutka kad brau6er naidje na SC2+' tag u kome je 5avaScript kod onda se taj kod i i6vr-ava( Brojumetanja je neograni7en1 kako u BODH tako i u &",D delu( Medjutim u &",D nema potrebe 6a

vi-estruko umetanje jer se 5avaScript kod i6vr-ava tek nakon po6iva1 -to 6na7i da komotno mo8emo sve5avaScript kodove smestiti u jedan SC2+' tag(

Medjutim odredjene 5avaScript naredbe mogu se na9i u &'ML kodu i i6van SC2+' taga( 'e naredbe seupotrebljavaju kao HTML atributi( "vo primeraA

Moj prvi JavaScript


8/155

test tela dometa

O/LO,D je 5avaScript naredba1 a kao -to vidimo unutar &'ML koda se tretira kao atribut( 'akvi

5avaScript &'ML atributi 6a vrednost mogu imati i neke na-e kreirane %unkcije u 5avaScript( Ukonkretno ovom primeru je to na-a nekaJavaScript'unkcija%& koja je de%inisana unutar%ajla javascript'ajl8js a koji smo umetnuli u &",D delu SC2+' tagom( " sad naravno1 ne mora samoBODH tag imati takve 5avaScript atribute( Iotovo svi &'ML tagovi mogu sadr8ati odredjene 5avaScriptnaredbe kao svoje atribute( U ovom konkretnom slu7aju O/LO,D atribut ima e%ekat da tek kad se ceoBODH tag reali6uje #drugim re7ima kad se u7ita cela stranica$ onda se aktivira vrednost atributa1 to jestu konkretnom slu7aju pokre9e se na i6vr-enje na-a %unkcija(

JavaScript promenjljiveU 5avaSript ra6likujemo %ormalne1 i na6ovimo1 ne%ormalne tipove podataka( Formalni podaci su onikoje programer de%ini-e u promenjljive1 a ne%ormalni su oni koji se ra6menjuju i6medju 5avaScriptkoda i Brau6era( /a primer ako postoji 5avaScript naredba koja kontroli-e kliktanje na neko dugme1onda kad se klikne brau6er i 5avaScript ra6menjuju ne%ormalne podatke o kliktanju( /e9emo ula6iti udetalje ne%ormalnih podataka ali eto 7isto da se napomene(

odaci koji nas kao 5avaScript programere najvi-e 6animaju su naravno %ormalni 5avaScript podaci(Formalni tipovi podataka suA

• String= ni6 6nakova unutar navodnika• Brojevi= bilo koji broj koji nije pod navodnicima

• Boolean= logi7ko istinito#true$ ili neistinito#%alse$

• "ull= li-eno vrednosti

• Object= sva svojstva i metodi koji pripadaju objektu ili ni6u

• 'unction= de%inicija %unkcije

/ajpogodniji na7in 6a rad sa podacima u skriptu je dodeljivanje podataka promenljivima( romenljivase u 5avaScript=u de%ini-e metodom dodeljivanja( /a primer promenjljivoj podna6ivom brojcenikadodelimo vrednost JA

broj#ceia = $%

Operator 6a dodeljivanje vrednosti je 6nak jednakosti( U 5avaScriptu imena promenljivih se sastoje od

slova engleske abecede #a=61 ,=$1 ci%ara #=>$ i donje crte # $( Kao po7etni 6nak u na6ivupromenjljive mo8e biti slovo i donja crta ali ne i broj( a ime promenljive ne mo8e se u6eti ni jedna5avaScript klju7na re7( romenljiva u na6ivu ne mo8e sadr8ati ra6mak( ,ko ipak postoji potreba 6aimenom od vi-e re7i1 postoje dve varijante 6dru8ivanja re7i u jednu( rva je da se re7i ra6dvojedonjom crtom #brojucenika$1 a u druga da po7etno slovo re7i bude veliko slovo #brojUcenika$( Upromenjljivama se ra6likuju mala i velika slova pa su brojKilograma i BrojKilograma dve ra6li7itepromenjljive(


9/155

romenjljivoj koja je deklarisana unutar %unkcije mo8e se pristupiti samo unutar te %unkcije( Kada se%unkcija napusti1 promenljiva prestaje da va8i( Ovakve promenljive se na6ivaju lokalne i mo8epostojati vi-e lokalnih promenljivih sa istim imenom u ra6li7itim %unkcijama( ,ko je promenljivadeklarisana van %unkcije tada je slobodna 6a pristup svim %unkcijama sa stranice1 ali koje su ispodpromenjljive u kodu( Oblast va8enja ovih promenljivih t6v( globalni)1 po7inje od mesta gde sudeklarisane pa sve do kraja koda(

Tipovi podataka

Celi brojevi

Celi brojevi u 5avaScript=u mogu biti predstavljeni u tri %ormataA u decimalnom #ba6a ;$1 u oktalnom#ba6a N$ i heksadecimalnom #ba6a ;?$( Decimalni celi brojevi se predstavljaju kao ni6 ci%ara #=>$ be6vode9e nule( Oktalni celi brojevi se predstavljaju kao ni6 ci%ara #=$ predvoen sa nulom #$(&eksadecimalni celi brojevi se predstavljaju kao ni6 ci%ara #=>$ i slova #a=% ili ,=F$ predvoen sa nulomkoju sledi slovo 3 #3 ili @$( rimer prestavljanja decimalnog celog broja deset #;$ u tri brojna

sistema jeA

• decimalnomA ;(• oktalnomA ;


10/155

• RstringR• R;b = pomeraj 6a jedno mesto ulevo #backspace$1• ># = pomeraj jedan red dole #%orm %eed$1

• >n = pomeraj na po7etak novog reda #ne0 line$1

• >r = povratak #carriage return$1

• >t = tabulator #tab$(

'akoe je 7esto neophodno koristiti navodnike unutar samih navodnika koji de%ini-u string( Kori-9enjenavodnika unutar stringa mo8ete reali6ovati upotrebom obrnute kose crte ispred navodnika( /aprimerA

avod = "

JavaScript je vrlo mo&o '"or(je'"."

rime9ujete da se kao string mogu koristiti i &'ML kodovi EEE

OperatoriAritmetički operatori:

Operator Naziv Primer rezultat

+ sabiranje 2 + 2 4- oduzimanje 2 - 2 0

* množenje 2 * 2 4

/ delenje 5 / 2 2.5

% moduo 5 % 2 1

++uvećanje za 1(inkrament

! " 4# !++

5

--umanjenje za 1

(dekrament! " 4# !-- $

Operatori dodeljivanja:

Operator Primer Ekvivalentno

" ! " ! "

+" ! +" ! " ! +

-= ! -" ! " ! - *" ! *" ! " ! *

/" ! /" ! " ! /

%" ! %" ! " ! %

Operatori poredjenja:

Operator Opis

" " jednako

&" nije jednako

> veće

Logički operatori:

Operator Opis

'' ) (loi,ko

. . (loi,ko

) (loi,ko )3


11/155

manje

" veće ili jednako

" manje ili jednako

String operatorString operator spaja dva ili vi-e stringa a 6nak je obi7an 6nak plus A

t) = "*obar"t+ = "da!"t$ = t) , t+

.rednost promenljive tJ sada je RDobardanER ,ko ho9emo ra6mak i6medju re7i onda pi-emoA

t) = "*obar"t+ = "da!"t$ = t) , " " , t+

+li da upi-emo ra6mak u jedan od stringovaA

t) = "*obar "t+ = "da!"t$ = t) , t+

slovni operator

5avaScript ima i jedan uslovni operator #ternarni$ koji dodeljuje vrednost promenljivoj na osnovu nekoguslova( Sintaksa je slede9aA

imeromeljive = slov 0 vredost) : vredost+

Dakle1 ako je uslov 6adovoljen promenljivoj imeromenljive se dodeljuje vrednost vrednost;1 a akonije 6adovoljen uslov onda vrednost


12/155

-- umanjenje za 1

t:eo8

void

delete brisanje elementa niza ili objekta

$* množenje/ deljenje

% modulo

4+ sabiranje

- oduzimanje

5

:omeranja u o:era9ijama nad bitovima

<

"

"

o:eratori :oredjenja

=" " jednako

&" nejednako

> ' ) nad bitovima

? @ A nad bitovima

10 . nad bitovima

11 '' loi,ko )

12 . . loi,ko

1$ B uslovni o:erator

14

"+"-"*"/"

%"""

"'"

@"."

o:eratori dodele

15 # zarez (za razdvajanje :arametara

.e9i prioritet imaju oni operatori koji su pod manjim rednim brojem1 a koji imaju isti redni broj1 ondaoni koji su pri vrhu(


13/155

"izovi.ideli smo kako se de%ini-u promenjljive( Medjutom u 5avaScript se mogu koristiti i ni6ovi( /i6 jepromenjljiva koja ima vi-e vrednosti( 5ednoj istoj promenjljivoj mo8emo dodeliti vi-e vrednosti u istovreme tako -to svaka vrednost ima svoj indeks( /a primer imamo promenjljivu brojevi i ajde da tojpromenjljivoj dodelimo Q ra6li7ita broja kao vrednostiA

brojevi = 1rray+2 32 )+2 3$2 4

+li mo8emo ovakoA

brojevi = 1rraybrojevi5%6 = +brojevi5)6 = 3brojevi5+6 = )+brojevi5$6 = 3$brojevi536 = 4

+li ovakoA

brojevi = 5+2 32 )+2 3$2 46

+li ovakoA

brojevi = 56brojevi5%6 = +brojevi5)6 = 3brojevi5+6 = )+brojevi5$6 = 3$brojevi536 = 4

.idite da kad god 8elimo napraviti neki ni6 moramo upotrebiti re6ervisanu re7 *rra7 6ajedno sa malim6agradama( i-ite tako da uvek prvo slovo R,R bude velikoE " sad ukoliko 6namo unapred vrednosti koje8elimo dodeliti ni6u onda te vrednosti i upisujemo direkto u 6agradama1 kao u prvom slu7aju( ,limo8emo i ostaviti pra6nu 6agradu pa dole ispod u nekim i6ra7unavanjima dodeliti vrednosti ni6u1 naprimer kad ne6namo unapred koje 9e se vrednosti dobijati u nekim i6ra7unavanjima( Mo8emo maloskratiti pisanje ako umesto *rra7%& pi-emo samo srednje 6agrade : ; kao u primeru J i P(

U daljim i6ra7unavanjima mo8emo pojedina7no koristiti koji god 8elimo konkretnu vrednost ni6a( /aprimer mo8emo i6ra7unati i ovakoA

s = brojevi5+6 , brojevi536

'akodje po-to je ni6 promenjljiva mo8emo u nastavku skripte i menjati vrednosti kako pojedina7nihvrednosti pojedinih elemenata ni6a tako i vi-e njih1 pa i svih ako se uka8e potreba(

Da re6imiramo1 indeksi ni6a su brojevi ?2 @ 2 A 2 2 a vrednosti su redom A2 2 @A2 2D1 a EbrojeviEje na6iv ni6a( U 5avaScript=u indeksi mogu biti samo brojevi(


14/155

Osnovne #unkcije5avaScrip ima i6u6etno mnogo ugradjenih %unkcija( Sve te ugradjene %unkcije imaju neku svrhu1 pa takoi ove osnovne( Osnovne %unkcije mogu manipulisati brojevima1 tekstovima1 uredjivti brojeve1 tekstove(Funkcije mogu i6vr-avati neke ugradjene matemati7ke radnje1 ili kao re6ultat da vra9aju vreme u

minutima1 7asovima1 danima1 itd1 itd( Spektar mogu9nosti ugradjenih %unkcija u 5avaScript je i6u6etnoveliki a upravo to daje velike mogu9nosti 5avaScript=u( Malte ne sve do kraja ovog kursa mi 9e moprou7avati u velikoj meri uglavnom ugradjene %unkcije1 a u ovom delu prou7i9emo one najosnovnijekoje se i najmasovnije i naj7e-9e i koriste(

Op$te JavaScript #unkcije

eval% &

,ko je argument eval %unkcije string koji predstavlja neki 5avaScript i6ra61 eval 9e i6vr-iti i6ra6( ,ko

argument predstavlja jednu ili vi-e 5avaScript naredbi1 eval 9e i6vr-iti te naredbe( Ova %unkcija jetakodje korisna 6a trans%ormisanje stringa koji predstavlja numeri7ki i6ra6 u broj1 itd( "vo primera i sve9e biti jasnoA

a = "$ , 7"docmet.8riteevala

2e6ultat 9e bitiA

N

parse'loat% &

,ko je string broj ili strin po7inje brojem1 parseFloat taj broj prebacuje i6 string u broj( "vo primer savi-e varijacijaA

docmet.8riteparseFloat")%" , "2 "9docmet.8riteparseFloat")%.%%" , "2 "9docmet.8riteparseFloat")%.$$" , "2 "9docmet.8riteparseFloat"$3 37 ::" , "2 "9docmet.8riteparseFloat" :% " , "2 "9docmet.8riteparseFloat"3% ;odia" , "2 "9docmet.8riteparseFloat"a ima 3% ;odia"9

2e6ultatA

;1 ;1 ;(JJ1 JP1 ?1 P1 /a/


15/155

escape% &

"scape vra9a string koji sadr8i ,SC++ kod karaktera koji nisu slova u obliku T331 gde je 33 numeri7ki kodkaraktera( "vo primeraA

docmet.8riteescape"Sta volis0 ?1*#!"9

2e6ultatA

StaT


16/155

concat# $ spaja dva ili vi-e ni6a( "vo primerA

a = 5+2 32 "Mila"6b = 572 +2 $6c = 5)2 A2 46

spoj = a.cocatb2 c

/i6 spoj 9e imati vrednostiA


17/155

shi%t# $ %unkcija je ista kao i pop# $ samo -to uklanja prvi element i vra9a ga ako je potrebno u nekojpromenjljivoj(

pus)% &

push# $ %unkcija dodaje nove elemente na kraj ni6a a ako nam je potrebno i vra9a broj koji je jednakukupnom broju elemenata ni6a sa novim elementima koji su dodati(

voce = 5"Baaa"2 "ivi"2 "Jaba"2 "Ma;o"69docmet.8ritevoce.psh"rsa" , "
"9docmet.8ritevoce.psh"?im"2 "EroDdje" , "
"9docmet.8ritevoce9

2e6ultatA

Q

Banana1Kivi15abuka1Mango1Kruska1Limun1Iro6dje

uns)i#t% &

unshi%t# $ %unkcija je skoro ista kao i push# $ samo -to dodaje nove elemente na po7etku ni6a( /aravno ion vra9a po potrebi broj elemenata novokomonovanog ni6a(

reverse% &

reverse# $ %unkcija pravi obrnuti redosle elemenata u ni6u( Onaj koji je prvi bi9e 6adnji1 drugi1 bi9epred6adnji itd(

voce = 5"Baaa"2 "ivi"2 "Jaba"2 "Ma;o"69docmet.8ritevoce.reverse 9

2e6ultatA

Mango15abuka1Kivi1Banana

slice% &slice# $ %unkcija odabira deo ni6a i vra9a u novi ni6( rvi broj u 6agradi je od kog broja elementa 9e seise9i ni6 a drugi broj je krajnji element( Broji se od ;(

voce = 5"Baaa"2 "Jaba"2 "CaradDa"2 "Ma;o"69docmet.8ritevoce.slice)2 $ , "
"9


18/155

docmet.8ritevoce.slice)2 + , "
"9docmet.8ritevoce.slice$9

2e6ultatA

5abuka1/arand6a5abukaMango

sort% &

sort# $ %unkcija sortira elemente ni6a po abecednom redosledu1 ili po broj7anom( Mislim da ovde netreba primer ali vi mo8ete da eksperimenti-ete(

splice% &

splice# $ %unkcija dodaje i uklanja elemente u ni6u( "vo primeraA

voce = 5"Baaa"2 "CaradDa"2 "Jaba"2 "Ma;o"69voce.splice+2 %2 "?im"9docmet.8ritevoce9

2e6ultatA

Banana1/arand6a1Limun15abuka1Mango

Tekstualne string #unkcijeOvde ne9u obja-njavati sve pojedina7no jer je lako shvatiti sve %unkcije i6 slede9eg primera #u6napomenu da ne rade ba- sve %unkcije u svim brau6erima$A

txt="ello Gorld!"9

docmet.8rite"

Bi;H " , txt. big() , "
"9docmet.8rite"
SmallH " , txt.small() , "

"9

docmet.8rite"

BoldH " , txt. bold() , "
"9docmet.8rite"
ItalicH " , txt.italics() , "
"9docmet.8rite"
BliH " , txt. blink() , "
"9docmet.8rite"
FixedH " , txt.i!ed() , "
"9docmet.8rite"
StrieH " , txt.strike() , "
"9docmet.8rite"
FotcolorH " , txt.ontcolor("ed") , "
"9docmet.8rite"
FotsiDeH " , txt.ontsi#e($%) , "
"9docmet.8rite"
SbscriptH " , txt.sub() , "

"9


19/155

docmet.8rite"

SperscriptH " , txt.sup() , "
"9docmet.8rite"
?iH " , txt.link("&ttp:''mmance.on.neobee.net") ,"

"9

2e6ultatA

BigA &ello 4orldE

SmallA &ello 4orldE

BoldA Hello 4orldF

+talicA Hello World!

BlinkA &ello 4orldE

Fi3edA ello Gorld!

StrikeA &ello 4orldE

FontcolorA &ello 4orldE

Fontsi6eA &ello 4orldESubscriptA &ello 4orldE

SuperscriptA &ello 4orldE

LinkA &ello 4orldE

String #unkcije

c)ar*t% &

char,t# $ %unkcija vra9a 6nak i6 stringa u 6avisnosti od polo8aja( Broji se od ( na7i prvi 6nak u stringuje na nultom polo8aju(

str="ello 8orld!"9docmet.8ritestr.char1t)2 str.char1t32 str.char1t:9

http://mmance02.on.neobee.net/http://mmance02.on.neobee.net/


20/155

2e6ultatA

eo0

c)arCode*t% &

charCode,t# $ %unkcija isto kao prethodna samo -to vra9a ,SC++ kod 6naka(

#romC)arCode% &

%romCharCode# $ %unkcija pretvara ,SC++ kodove u odgovaraju9e 6nakove(

docmet.8riteStri;.romharodeA+2:42A:2A:2A4

2e6ultatA

&"LLO

inde+O#% &

inde3O%# $ %unkcija vra9a broj koji pretstavlja po6iciju tra8enog teksta u stringu( Broji se od ( ,ko nenadje re7 vra9a =;( Obratite pa8nju da je %ukcija osetljiva na mala i velika slova(

str = "ello 8orld!"9docmet.8ritestr.idex"ello" , "
"9docmet.8ritestr.idex"GK?*" , "
"9docmet.8ritestr.idex"8orld"9

2e6ultatA

=;?

slice% &

slice# $ %unkcija se7e delove stringa i takve ih vra9a(

str="ello happy 8orld!"9docmet.8ritestr.slice%,"
"9 // e seLe itadocmet.8ritestr.slice:,"
"9 // seLe od Daa a poDiciji :docmet.8ritestr.slice-:,"
"9 // seLe od poDicije : ali od poDadidocmet.8ritestr.slice%2),"
"9docmet.8ritestr.slice:2)),"
"9


21/155

2e6ultatA

&ello happy 0orldEhappy 0orldE0orldE&

happy

split% &

split# $ %unkcija deli string na osnovu de%inisanog 6naka i du8ine1 i te delove sme-ta u ni6(

var str="o8 are yo doi; today0"9a=569 b=569 c=569 d=569a=str.split9b=str.split" "9c=str.split""9

d=str.split" "2$9docmet.8ritea ,"
", b ,"
", c ,"
", d9

2e6ultatA

&o0 are you doing today&o01are1you1doing1today&1o101 1a1r1e1 1y1o1u1 1d1o1i1n1g1 1t1o1d1a1y1&o01are1you

substr% &

substr# $ %unkcija i6vla7i odredjen broj 6nakova i6 string(

str="ello 8orld!"9docmet.8ritestr.sbstr$,"
"9docmet.8ritestr.sbstr$2 39

2e6ultati

lo 0orldE

lo 0

toLo,erCase% &

toLo0erCase# $ %unkcija prebacuje sve 6nakove stringa u mala slova

topperCase% &


22/155


23/155

$etakarakter Opis

. a,ka :ronalazi bilo koji znakG ili zamenjuje bilo koji znak

IJCronalazi bilo koji Jord znakD Hna,i slovaG brojevi i

:odvu,enoD

IK Cronalazi bilo koji znak osim Jord znakovaDId Cronalazi brojeve

I Cronalazi bilo koji znak osim brojeve

Is Cronalazi razmake i tabulatoreG ekvivalentno izrazu 6ItInIrI8Iv7

IL Cronalazi znakove a da nisu tabulatori i razmak

Ib Cronadji :odudaranje na :o,etku ili/i kraju re,i

IM Cronadji :odudaranje ali da nije na :o,etku i kraju re,i

I0 )adji null znak

In Cronadji znak novo reda

I8 Cronadji novi redIr :ronadji :ovratak

It Cronadji tabulator

Iv Cronadji vertikalni tabulator

I!!! Cronadji znak mimo oktalno broja !!!

I!dd Cronadji znak mimo Feksade9imalno broja dd

Iu!!!!Cronaći Nni9ode znak naveden mimo Feksade9imalno broja

!!!!

/vanti#ikatori

'vati%ikator Opis

n+Cronalazi jednom ili viOe :uta :retFodni znakD )a :rimer !o( će

:ronaći !oG i !ooG ali neće i !

n*sto kao ore samo Oto :ronalazi i nula :utaG odnosno :ronaći će

i !

nB Cronalazi na :rimer ! i !o ali neće !oo

nPAQCronalazi znak n ta,no A :utaD )a :rimer o)*+ :ronalazi

samo oo

nPAGRQ na :rimer o)*#,+ :ronalazi ooG oooG i samo joO oooo

nPAGQCronalazi minimum A :utaD )a

:rimer o)+ :ronalazioooG oooo i tako dalje

nSraži znak na kraju re,iD )a :rimer a!/ :odudariće se sa

re,i peg%a!

@nraži znak na :o,etku re,iD )a :rimer 0a! :odudariće se sa

re,i a!de%r


24/155

B"n Cronalazi bilo koji niz koji sledi s:e9i8i,an niz n

B&"n Cronalazi bilo koji niz koji ne sledi s:e9i8i,an niz n

matc)% &

match# $ %unkcija vra9a podudaranja ako ih nadje1 na primer i6medju regularnog i6ra6a i stringa koji sekontroli-e( ,ko ne nadje vra9a nulu( "vo primeraA

str="Mali pali Da palidrom"9docmet.8ritestr.match/ali/;i9

2e6ultatA

ali1ali1ali

replace% &

replace# $ %unkcija tra8i podudaranje i6medju stringova1 ili regularnog i6ra6a i stringa1 i ako nadje vr-i6amenu tog nadjenog sa novin stringom( "vo primeraA

str="oseti daas *aic."9docmet.8ritestr.replace/da/;i2 "ocas"9

2e6ultatA

oseti nocasas nocasicu(

searc)% &

search# $ %unkcija tra8i podudaranje i6meu regularnih i6ra6a i stringa1 i vra9a polo8aj podudaranjaAnakove broji od ( , ako ne nadje vra9a =;(

str="oseti daas *aic"9docmet.8ritestr.search/*a/i9

2e6ultatA

Matemati0ke #unkcije


25/155

'unkcije za brojeve

to'i+ed% & = %iksira odredjeni broj decimalnih mesta

m = )$.$A)39docmet.8ritem.toFixed,"
"9docmet.8ritem.toFixed),"
"9docmet.8ritem.toFixed$,"
"9docmet.8ritem.toFixed)%9

2e6ultatA

;J;J(P;J(J;;J(J;P

to!recision% & = kao gore samo obuhvata ceo broj

var m = e8 Cmber)$.$A)39docmet.8ritem.torecisio,"
"9docmet.8ritem.torecisio),"
"9docmet.8ritem.torecisio+,"
"9docmet.8ritem.torecisio$,"
"9docmet.8ritem.torecisio)%9

2e6ultatA;J(J;P;e;;J;J(P;J(J;P

toString% & = rebacuje broj u string

/onstante

• 3 = .ra9a "ulerov broj #appro3(


26/155

• !I = .ra9a + #appro3( J(;P;Q>$

• SG5T@A = .ra9a kvadratni koren od ;V< #appro3( ($

• SG5TA = .ra9a kvadratni koren od < #appro3( ;(P;P$

Matemati0ke #unkcijeabs% & = ,psolutna vrednost broja( "vo primera

docmet.8riteMath.absA.+7 , "
"9docmet.8riteMath.abs-A.+7 , "
"9docmet.8riteMath.absll , "
"9docmet.8riteMath.abs"ello" , "
"9docmet.8riteMath.absA.+7-)%9

2e6ultetA

(


27/155

• round%+& = .ra9a celi broj

• sin%+& = .ra9a sinus od 3

• srt%+& = .ra9a kvadratni koren od 3

• tan%+& = .ra9a tangens od 3

• 1atum #unkcije• get1ate% & = Daje teku9i dan u mesecu u broju(•

d = e8 *ateda#Mesec = d.;et*ate9docmet.8riteda#Mesec9

• 2e6ultatA• ?• Obratite pa8nju da smo prvo napravili na- objekat d u6 pomo9 ne, 1ate% & pa tek onda i6vukli

in%ormaciju i6 get1ata% & i to tako -to smo napisali d8get1ata% &( a ostale vremenske %unkcijene9u vi-e nadalje sve ovako pisati ali 6najte da se sve tako radi( Sad 9u dati spisak ostalihdatumskih %unkcija koje su interesantne namaA

1unkija Opis

eta(Traća tekućidan u nedelji(o:se 0-


28/155

vremenskurazliku

izmeXu YW ilokalno

vremenaG uminutama

etNZate(

Crikazuje danu mese9uG

:remauniverzalnomvremenu (1-

$1

etNZa(NniverzalnoGdan u nedelji

(0-


29/155

NZ+0100

toNZLtrin(

N 8ormatu[KedG 1< e9

200? 21[5?[5=NZ

toLtrin(

\om:letno u8ormatu[ Kede9 1<

22[5>[44NZ+0100

200?

/ontrolne struktureKontrolne strukture odnose se na upravljanje tokom i6voenja programa( Strukturno programiranjetemelji se na tri osnovne kontrolne struktureA

•

sekvenca #sled1 programski blok$1• selekcija #grananje1 odabir$ i

• iteracija #petlja$(

/estrukturno programiranje pridodaje jo- i skokove( 'ipi7na instrucija skoka je break i continue(

Sekvenca1 po6natija kao programski blok1 predstavlja ni6 instrukcija obrade koje se i6vode u6astopno(U 5avaScriptu po7etak sekvence o6na7ava se levom viti7astom 6agradom W 1a kraj sekvence desnomviti7astom 6agradom X( "vo primerA

N // Oelo bloa ome se smetaj JavaScript iDraDi istrcijeP

Svaka leva viti7asta 6agrada ima odgovaraju9u desnu1 odnosno svaki programski blok mora biti6atvoren( rogramski blok #sekvenca$ mo8e da se nadje u petljama1 kontrolnim strukturama kao -to su+F = else1 %unkcije itd( Specijalni slu7aj programskog bloka je onaj kada se on sastoji od samo jedneinstrukcije obrade( 'ad se ne moraju koristiti viti7aste 6agrade 6a o6na7avanje po7etka i krajasekvence(

JavaScript I'2 I' 3LS3 i S4ITCH grananja

I# /ajednostavnija odluka u programu jeste pra9enje neke grane ili putanje programa ako je ispunjenodreen uslov( Formalna sintaksa 6a ovu konstrukciju jeA

i slov N // od oji se iDvrava ao je slov treP


30/155

,ko se vr-i grananje u oba slu7aja1 i kad je uslov ispunjen a i kad nije1 koristi se onda i# elsekonstrukcija(

i slov N //od oji se iDvrava ao je slov treP else N

//od oji se iDvrava ao je slov alseP

, mo8emo pratiti i nekoliko uslova(

i slov) N //od oji se iDvrava ao je slov) treP else i slov+ N //od oji se iDvrava ao je slov+ treP else N //od oji se iDvrava ao slov) i slov+ emaj vredsot treP

"vo konkretan primer( a ve9e kupovine daje se popustA

• a manje od Q kupljenih artikla nema popusta1• Q Y ; Y popust ;T1

• ;; Y ;Q Y popust ;


31/155

brea9 dealtH docmet.8rite"vredost promejljive ije iD spa od jeda do tri"9 brea9P

Umesto na primer Rcase ;AR mo8emo pisati i neki matemati7ki i6ra6 ako je neophodno1 pa tako bi bilona primerA

case b R +7 , 39

+sto mo8e i neki ovakav program da se pojaviA

s8itch x N case y R 3H case 4 R $H docmet.8rite"apamti"9 brea9 dealtH

docmet.8rite"aboravi"9P

Dakle1 mogu se pojaviti vi-e C,S" naredbe sa jednom B2",K naredbom( /aredba D"F,UL' obe6beujenastavak po putanji i6vr-avanja kada vrednost i6ra6a ne odgovara ni jednoj o6naci naredbe C,S"(/aredba B2",K1 koja slu8i 6a i6la6ak i6 petlje1 ovde ima 6na7ajnu ulogu( /aime1 ako nije navedenobreak posle svake grupe naredbi u case granama1 i6vr-i9e se sve naredbe i6 svake case grane be6 ob6irana to da li je naena odgovaraju9a o6naka(

JavaScript 'O52 4HIL3 i 1O 4HIL3 petlje

'or petljaFor petlja omogu9ava vi-estruko prola8enje kro6 jedan te isti programski blok(

or pocetiIDraD9 slov9 ora N // aredbeP

'ri parametra unutar 6agrada petlje #or igraju klju7nu ulogu( U petlji pocetniIzraz i6vr-ava se samojednom kada se pokre9e petlja( /aj7e-9a primena po7etnog i6ra6a je dodela imena i po7etne vrednostipromenljivoj broja7a petlje( +6ra6 uslov de%ini-e do koje vrednosti broja7 petlje treba da ide pre nego-to se kru8enje 6avr-i( oslednja i6ra6 korak nakon svakog i6vr-enja petlje uve9ava ili smanjuje 6a

odredjeni korak broja7(

"vo na primer napi-imo kod koji ispisuje brojeve od do ;1 svaki u posebnom redu(

or var i=%9 i


32/155

P

,)ile petlja

4hile petlja i6vr-ava blok koda sve dok je uslov ispunjen( 4hile petlja se koristi kada ne6namo unapredbroj iteracija( Kada je po6nat broj iteracija obi7no se koristi %or petlja jer je br8a( Kao primer ispi-imobrojeve od ; do


33/155

Funkcije koje mi kreiramo predstavljaju jednu od veoma bitnih orudja 5avaScript=a( 5ednostavnore7eno1 %unkcija je imenovani blok koda koga sami pravimo jednom a po potrebi upotrebljavamo vi-eputa( ,ko se deo nekog koda1 ili neko i6ra7unavanje stalno i 7esto ponavlja1 onda se taj deo koda mo8ei6dvojiti u %unkciju( 'o 9e vam omogu9iti da %unkciju koju sami napi-ete koristite isto kao i nekuugradjenu %unkciju1 tako -to je po6ivate neograni7en broj puta dodeljivanjem neophodnih parametara(Mo8ete kreirati proi6voljan broj %unkcija u programu( Funkcija mo8e vra9ati vrednost1 bilo

promenjljivu1 objekt1 ili da i6vr-i neku akciju(Funkcija mo8e smestiti bilo gde u okviru jednog &'ML dokumenta1 ali obi7no sve %unkcije se grupi-u ujedan SC2+' tag u &",D tag( ,li mo8emo ih smestiti u poseban %ajl na primer #unkcije8js i umetnutiga u &'ML dokument(

Unutar %unkcije je mogu9e po6vati druge %unkcije de%inisane unutar istog &'ML dokumenta(

+6radu sopstvene %inkcije 6apo7injemo re6ervisanom re7ju #unction( atim po na-em i6boru sledi ime%unkcije( Slede u 6agradi parametri odvojeni 6are6om( + na kraju blok naredbi koji 9e biti i6vr-en svakiput kad se %unkcija po6ove( 'o i6gleda ovakoA

ctio ormla parametar)2 parametar+2....2 parametarC2 "stri;C"2 )%2T. N //telo cijeP

U telu %unkcije ina7e mo8ete koristite sve ve6ano 6a 5avaScript -to smo do sad nau7ili i -ta 9e monau7iti(

U skriptama se ova na-a %unkcija i6 gornjeg primera po6iva vi-e puta kad je potrebno na slede9i na7inA

ormla promejljiva)2 masa2....2 teDia2 "aa voli milovaa"2 ))%2 T.9

"vo na primer ne-to konkretnoA

ctio stampajstri;N docmet.8ritestri;P

Funkcija stampaj % & ima argument promenljivu string( Unutar tela %unkcije mo8emo sa tompromenjljivom raditi -ta god 8elimo( Funkciji se mogu prosleivati promenljive1 konstante1 ali i obi7nistringovi u navodnicima ili i obi7ni brojevi( Ukoliko se promenljiva prosledi %unkciji1 promena njenevrednosti unutar %unkcije ne menja njenu vrednost i6van %unkcije( arametri postoje samo 6a 8ivota%unkcije( Ukoliko 6ovete %unkciju vi-e puta1 svaki put kada 6ovete %unkcije ima9ete RnoveR parametre1odnosno vrednost koji 9e parametri imati na kraju prethodnog po6iva %unkcije ne9e biti sa7uvana(

/a primer1 %unkciju stampaj % & mo8emo po6vati sa bilo kojim parametromA

ime = "Oaja"9stampaj ime9

Kada %unkcija po7ne da se i6vr-ava1 promenljiva string u %unkciji 9e imati vrednost R'anjaR( +sto %unkcijustampaj #$ mo8emo po6vati sa konstantomA

stampaj "Oaja"9


34/155

Kada %unkcija po7ne da se i6vr-ava1 promenljiva string u %unkciji 9e takoe imati vrednost R'anjaR(

o6ivanje 5avaScript %unkcije se mo8e obaviti na vi-e na7ina(

1. +6 druge %unkcije ili 5avaScript programaA

stampaj"vo je test oji &e se priaDati."


35/155

Kad otvorite neku stranicu u brau6eru vi mo8ete kliktati1 linkovati1 pisati u ra6nim %ormama1 i sli7no(Sve te akcije su u stvari dogadjaji na osnovu kojih u &'ML dokumentu 5avaScript mo8e aktivirati daljeneka de-avanja na sajtu(

Obraiva7i dogaaja su predstavljeni kao specijalni atributi koji modi%ikuju pona-anje &'ML elemenatau okviru kojih se nala6e( /a primerA

U gornjem primeru1 u body tagu dodat je 5avaScript atribut OnLoad1 koji obrauje dogaaj u7itavanja&'ML dokumenta( U konkretnom slu7aju1 kada se u7itavanje &'ML dokumenta 6avr-i1 i6vr-i9e senaredba 5avaScripta dodeljena atributu OnLoad( Kao re6ultat u iska7u9em pro6or7etu ispisa9e seporuka RDobrodo-liR(

OnLoad se 6ove u stvari OB2,D5+.,: DOI,D5,5,( ostoje ve9i broj 5avaScript obradjiva7a dogadjaja(

Obradjiva0i dogadjajaDa9u sve obradjiva7e dogadjaja tabelarno sa obja-njenjima1 i mislim da 9e 6na7enje biti jasno( ,kasnije 9emo ve9inu obradjiva7a dogadjaja ponaosob potkrepiti primerima(

2ogadjaj Opis O!radjivač

dogadjaja

blur \ada :omeramo 8okus sa elementa onMlur

9li9k \lik miOa na objekat onZli9k

dbl9li9k u:li klik miOa na objekat onblZli9k

9FaneoaXa se kada korisnik :romeni vrednost u te!tG te!tarea ili sele9t

elementima 8ormeDonZFane

8o9us oaXa se kada element 8orme dobije ulazni 8okusD onUo9usload oaXa se nakon u,itavanja strani9eD onoad

mouseover oaXa se kada korisnik :omera miOa :reko objekta onWousever

mouseout oaXa se kada miO :reXe :reko objektaD onWouseut

sele9t oaXa se kada korisnik izabere ulazno :olje 8ormeD onLele9t

submitoaXa se kad je 8orma :rosleXena VC serveru (kada korisnik klikne

na dume za slanje sadržaja 8ormeDonLubmit

abort oadjaj koji se aktivira :ri :rekidu u9itavanja slike onbort

eror oadjaj koji se aktivira kada dodje do reske :ri u9itavanju slike on3ror

kedoJn oadjaj koji se aktivira kada se :ritisne taster on\eoJn

ke:ress oadjaj koji se aktivira kada se :ritisne taster ili ot:usti on\eCresskeu: oadjaj koji se aktivira kada se taster ot:usti on\eN:

mousedoJn oadjaj koji se aktivira kada se :ritisne taster misa onWouseoJn

mousemove oadjaj koji se aktivira kada se :omeri mis onWouseWove

mouseu: oadjaj koji se aktivira kada ot:usti taster misa onWouseN:

reset oadjaj koji se aktivira kada se :ritisne taster eset oneset

resize oadjaj koji se aktivira kada se :romeni veli9ina :rozora onesize

unload oaXa se kada korisnik na:uOta VW dokumentG :re neo Oto :o,ne onNnload


36/155

sa u,itavanjem novo VW dokumentaD

Dogaaje ve6ujemo 6a slede9e &'ML elementeA

34$L element Odre5ivači doga5aja koji mogu da se

primeneista za izbor onMlurG onZFaneG onUo9us

e!t element onMlurG onZFaneG onUo9usG onLele9t

e!tareaelement

onMlurG onZFaneG onUo9usG onLele9t

Mutton element onZli9k

ZFe9kbo! onZli9k

adio Mutton onZli9k

V:erte!t ink onZli9kG onWousever

eset Mutton onZli9k

Lubmit Mutton onZli9k

o9ument onoadG onNnload

KindoJ onoadG onNnload

Uorm onLubmit

Dosta objekata ima metode koji simuliraju dogaaje('o mo8e biti posebno korisno u nekim slu[ajevimaako 8elimo da simuliramo neke akcije korisnika( U 5avaScriptu su raspolo8ivi slede9i simulatoridogaaja koje 9e mo kasnije detaljnije prou7itiA

• blur# $• click# $

• %ocus# $• select# $

• submit# $

OnLoadOnLoad obradjiva7 dogaaja se aktivira po-to se &'ML dokument #i svi njegovi delovi$kompletno u7ita( Dodeljuje se uglavnom elementima BODHG i F2,M"S"'G( ,ko je nekad bitnokada 9e se i u kom roku u7itati neka stranica ako koristite OnLoad1 mo8ete biti sigurni da su sviostali okviri u7itani(

"vo jedan konkretan primer upotrebe OnLoad


37/155

// -->

?oad

OnnloadObradjiva7 dogaaja Onnload je koristan 6a R7i-9enjeR posle posete nekoj pre6entaciji( 'okom posetenekoj pre6entaciji1 korisniku se mo8e desiti da ima otvoreno nekoliko pro6ora kao re6ultat radaprograma u 5avaScriptu( /jih treba 6atvoriti1 a to se najlak-e obalja pomo9u OnUnload(

ctio dovidjejaN 8ido8.alert"vala to ste svratili."9P

#load

ada apstite ov straic dobiQV+:$9ete poDdrav por.

OnClick/aj7e-9e kori-9eni obradjiva7 dogaaja u6rokovan akcijom mi-a je OnClick( Objekti koji prihvatajuOnClick dogaaj su linkovi1 check bo3=ovi i dugmad #uklju7uju9i submit1 reset i radio buttons$(

U slede9em primeru da9emo jednostavnu %ormu koja odgovara na kliktaj komponenti %orme(

ctio litajeN 8ido8.alert"1tivira je olic do;adjaj!"9P

Stadardi li

KadioBtto
hecBox

On'ocusDogaaj Focus se pojavljuje kada objekat postane predmet u %okusu mi-em( 'o se dogaa kada korisnikklikne mi-em na odreeni objekat1 ili tamo doe pritiskaju9i taster tab( ,ko korisnik mo8e da unesepodatke u objekat #ili da promeni trenutni i6bor 6a slu7aj lista i6bora$1 tada objekat ima %okus(


38/155

Obraiva7 dogaaja OnFocus se koristi samo sa objektima te3t1 te3tarea1 pass0ord i select( U slede9emprimeru prika6ujemo upotrebu OnFocus sa jednostavnom %ormom koju 7ine ula6na polja +me i re6ime(OnFocus je pove6an sa poljem re6ime i prika6uje pro6or sa porukom kada korisnik ue u to polje(

ctio osN8ido8.alert"'"reDime'" je os."9P

ImeH
reDimeH

OnBlurDogaaj Blur se pojavljuje kada objekt nije vi-e u %okusu( 'o se mo8e desiti sa prebacivanjem u drugi

pro6or ili aplikaciju1 ili tako -to kliknemom mi-em na drugi objekt1 ili -to pomerimo %okus pritiskom nataster tab( Obraiva7 dogaaja OnBlur se koristi samo sa objektima te3t1 te3tarea1 pass0ord i select1ba- kao i OnFocus(

ctio dodajN a = docmet.orma.ime.vale b = docmet.orma.preDime.vale docmet.orma.po.vale = a , " " , bP

ImeH
reDimeH
o imeH

/akon unosa i imena i pre6imena kliknite gde god 8elite u prostoru brau6era da bi se kompletiraosadr8aj polja Runo imeR(

OnC)angeDogaaj change se aktivira uvek kada objekat i6gubi %okus i ako se njegova vrednost promenila(

Obraiva7 dogaaja OnChange se koristi samo sa objektima te3t1 te3tarea1 pass0ord i select(OnChange mo8e biti veoma koristan kada 8elite i6ra7unati sumu unetih vrednosti na primer(

ctio allacijaN a = docmet.imea.ime).vale b = docmet.imea.ime+.vale c = docmet.imea.ime$.vale docmet.imea.total.vale = a , " " , b , " " , c


39/155

P

ImeH
Sredje imeH
reDimeH
OotalH

/akon unosa svega kliknite gde god 8elite u prostoru brau6era da bi se kompletirao sadr8aj poljaR'otalR(

OnSelectObradjiva7 dogaaja OnSelect se odnosi samo na te3t1 te3tarea i pass0ord objekte i i6vr-ava se kadakorisnik o6na7i deo teksta u jednom od nabrojanih tipova objekata( "vo i kratkog prmera(

ctio dodajN 8ido8.alert"seletovao si test"P

aaaaaaaaaaaaaaa

Selektujte malo tekst i pojavi9e se reakcija(

OnSubmitObradjiva7 dogaaja OnSubmit je pove6an sa objektom %orme( /aj7e-9e je potrebno da se podaci unetiu polja %orme1 provere ili iskoriste pre prosleivanja sadr8aja %orme &'' serveru( /a taj na7in1mogu9e je smanjiti optere9enje samog &'' servera1 po-to se provera gre-aka vr-i na strani klijenta1te je redukovan broj i6ve-taja o gre-ci koje vra9a server( OnSubmit omogu9ava 6austavljanjeprosleivanja sadr8aja %orme serveru ako je to neophodno(

ctio proveriN i docmet.orma.m).vale.le;th < )) N 8ido8.alert"vala to ste eli samo )% aratera."9

retr tre9 P else N 8ido8.alert"#esite samo )% aratera2 molim Xas."9 retr alse9 PP

#esite do deset arateraH


40/155

siDe=")%2)">

U ovom primeru proveravamo samo osnovne vrednosti1 du8inu unetih podataka( Koriste9i string metodeu kombinaciji sa regularnim i6ra6ima mo8emo uraditi mnogo slo8enije provere sadr8aja polja %orme pre

njenog slanja( ,ko unete vrednosti u polje ne bi 6adovoljili proveru1 sadr8aj polja ne9e biti prosleen&'' serveru( rimetite da je u primeru kori-9ena naredba t)is( Ona se odnosi na teku9i objekat i bi9edetaljnije obja-njena u nekom od narednih poglavlja(

OnMouseOverKod OnMouseOver obradjiva7a dogaaja je dovoljno da pointer mi-a bude i6nad nekog objekta pa da sedogaaj aktivira( OnMouseOver se mo8e upotrebiti 6a obja-njenje linkova ili dugmadi( U primeruOnMouseOver menja tekst u pro6oru dobijenom primenom metoda alert#$(

ctio objasi)N8ido8.alert"resli ste preo dravo aote"9Pctio objasi+N8ido8.alert"resli ste preo dobrosmo"9P

dravo aote H

*obrosmo 9

avisno od toga preko kog linka preemo mi-em1 pro6or upo6orenja 9e prika6ati druga7iji podatak(

OnMouseOutU ovom slu7aju kada pointer mi-a i6ae i6 podru7ja nekog objekta1 dogaaj je okinut( OnMouseOut se7esto koristi u spre6i sa dogaajem OnMouseOver(

ctio objasiaN docmet.ormica.limit.vale = aP


41/155

On/e7pKeyUp je dogadjaj koji se aktivira kada se taster otpusti( 'ako mo8emo praviti limiter teksta u te3tbo3=uA

cot = ")%%"9ctio limiterN tex = docmet.myorm.commet.vale9 le = tex.le;th9 i le > cotN tex = tex.sbstri;%2cot9 docmet.myorm.commet.vale =tex9 retr alse9 P docmet.myorm.limit.vale = cot - le9P

i-ite ne-to u te3tbo3 =u i vide9ete kako se smanjuje broj preostalh karaktera 6a ispis( Kad dodje do; karaktera vi-e se ne mo8e pisati(

OnMouseMove

OnMouseMovi reaguje na svako pomeranje mi-a( "vo primer koji sve do7aravaA

ctio misomerajevetN x=evet.screeW9 y=evet.screeY9 docmet.;etUlemetById"txt)".vale=x9 docmet.;etUlemetById"txt+".vale=y9P

W oordiata rsoraH
Y oordiata rsoraH

Mislim da je sve jasno -to se ti7e onMouseMove( ,li u primeru %iguri-e i "."/'( 33"T je &'ML DOMobjekat i u tom delu je obja-njen(


42/155

Ostalih N obradjiva7a dogadjaja mo8ete i samo testirati na sli7ne na7ine1 u6 malo ma-te(

Bro,ser #unkcijeDocument Object Model # DOM $ je plan organi6acije objekata na 0eb stranicama( Svaki objekat jejedinstven( 'ri najva8nije odlike objekata suA metod #u &'ML je to ime taga$1 svojstva #u &'ML su toatributi$ i osobine #u &'ML su to vrednosti atributa$( 5avaScript DOM ima slede9u hijerarhijuA

;( :isto 5avaScript objekti

• /i6ovi• Date

• Math

• Broj7ani

• String

• 2egularni i6ra6i


43/155

• +mage

• +nput Button

• +nput Checkbo3

• +nput File

• +nput &idden

• +nput ass0ord

• +nput 2adio

• +nput

• 2eset

• +nput Submit

• +nput 'e3t

• Link

• Meta

• Object

• Option

• Select

• Style

• 'able

• 'ableCell• 'able2o0

• 'e3tarea

U delu Eugradjene JavaScript #unkcijeE prou7ili smo 7iste 5avaScript objekte( U ovom poglavlju unastavku prou7i9emo 0indo0 objekte( , ostale Bro0ser objekte1 kao i &'ML DOM objekteprou7ava9emo u posebnim glavama(

*lert2 con#irm i prompt ,indo, dijalo$ki

prozori5avaScript omogu9ava kreiranje tri Riskakaju9aR pro6ora tj( popup bo+KaA

;( alert bo3 #tako6vani Rupo6oravaju9iR iska9u9i pro6or$


44/155

CO"'I5M

,L"2' bo3 smo ve9 upo6nali1 pa da krenemo na con%irm bo3( CO"'I5M iska7u9i pro6or prika6uje dvadugmetaA Cancel i OK1 i vra9a vrednostA true ako korisnik pritisne OK ili %alse ako pritisne Cancel( Ovajokvir 6a dijalog mo8e se koristiti kao podsticaj korisniku da donese odluku o tome kako da se nastavi

skript( +6la6na vrednost mo8e se koristiti i kao uslov u nekoj i% konstrukciji( CO/F+2M %unkcijajecon#irm% &( "vo primeraA

ctio iDaberiNr = coirm"iDaberi ili 1CU?"9i r == tre Ndocmet.8rite"ritisli ste !"9P else Ndocmet.8rite"ritisli ste acel!"9PP

!5OM!T

2OM' iska7u9i pro6or prika6uje poruku #pitanje$ koju kreiramo1 i obe6beuje polje 6a unos teksta ukoje korisnik unosi odgovor( Dva dugmeta1 Cancel i OK1 omogu9avaju korisniku da ukloni okvir 6adijalog sa dva e%ektaA otka6ivanje cele operacije ili prihvatanje unetog( prompt% & ima dva parametra1prvi je poruka koja se prika6uje korisniku1 a drugi je podra6umevani odgovor ukoliko recimo korisnikklikne na OK( ,ko nije potreban podra6umevani odgovor navodi se pra6an ni6= RR( ritiskom na dugmeCancel1 metod vra9a null #u uslovu neke i% konstrukcije smatra se 6a %alse$[ pritiskom na OK vra9a sevrednost unetog 6nakovnog ni6a1 ili podra6umevana vrednost( "vo primera koji sve lepo obja-njavaA

ctio iso N ime = prompt"Molimo esite vae ime"2 "arry otter"9 i ime != ll QQ ime != ""N docmet.8rite"dravo " , ime , "! ao ste daas0"9 PelseN docmet.8rite"U ba ste povarei to ste lili acel!!"9 PP

Otvaranje stranice u iska0u6em prozoruMogu9e je otvoriti i 7itavu stranicu1 bilo da je ona &'ML1 ili & itd1 u iska7u9em #popup$ pro6oru(Funkcija 6a to je open% &( \ematski i6ra6 je slede9iA


45/155

8ido8.ope#K?2 ime2 parametri2 Damea

5L = parametar u kome se u 6nacima navoda upisuje link bilo koje 0eb stranice1 bilo da je sa na-egsajta ili nekog drugog( 'o je opcioni parametar1 i ako se ne navede mo8emo na primer mi samide%inisati sadr8ajm tog pro6ora1 -to 9e mo kasnije kro6 primer i videti( /e navodi se tako -to se samostave navodnici a ni-ta se ne pi-e i6medju njih

ime #neobave6an parametar$ = ako ga ne 8elimo samo stavimo 6nakove navoda a ni-ta ne pi-emo( 'ajparametar odreuje na6iv stranice ukoliko je prvi parametar samo navodnici( Medjutim tu mo8emode%inisati i na koji na7in 9e se otvoriti taj novi pro6or( .rednosti koje se mogu na9i u ovom parametrusu slede9iA

• blank = strana se otvara u novom pro6oru( 'o je po de%aultu• parent = strana se otvara u tako6vanom RroditeljskomR okviru1 to jest u pro6oru u kome smo i

inicirali pokretanje te strane

• sel# = sli7no kao prethodno

•

top = ve6ano 6a %rameset1 a 6a obi7ne strane sli7no kao prethodna dva• Ime = ime pro6ora

!arametri #takodje neobave6an parametar$ = tu se navode parametri koji opisuju kako 9e i6gledatinovootvorena stranica( /a primer da li 9e imati kli6a7e1 kolika 9e biti po dimen6ijama i sli7no( na7imogu se tu na9i i svi ti parametri 6ajedno samo se odvajaju 6are6om1 i svi se stavljaju unutar jednogpara navodnika( .ide9ete u ostalom u primeru( " sad tih parametara ima podosta pa da ih damotabelarno sa obja-njenjimaA

Parametar O!ja"njenje

9Fannelmode " es . no . 1 . 0 Voće li ili neće :rikazati :rozor u kom:letuD Co de8aultu je nula ili no

dire9tories " es . no . 1 . 0 Voće ili neće :rikazati menju za direktorijumeD Co de8oltu je 1 ili 6esD

8ulls9reen" es . no . 1 . 0Voće li ili neće :rikazati :rozor u 8ull-s9reen moduD Hadana je no ili nulaD

Crozor u 8ull-s9reen modu takoXe mora biti u kom:letu

FeiFt " :i!elsTisina :rozora u :ikselimaG ali se oznaka za :iksele ne :iOeD Winimalna

visina je 100D

JidtF " :i!els]irina :rozora u :ikselimaG ali se oznaka za :iksele ne :iOeD Winimalna

Oirina je 100D

le8t " :i!elsLmeOta :o:u: :rozor na odredjenom :oložaju u odnosu na levu ivi9u

brauzera

to: " :i!elsLmeOta :o:u: :rozor na odredjenom :oložaju u odnosu na ornju ivi9u

brauzera

lo9ation " es . no . 1 . 0 a li da :rikže adresno :olje u brauzeru za taj :o:u:D Co de8oltu je esmenubar " es . no . 1 . 0 a li da :rikazuje menubar u brauzeru za taj :o:u:D Co de8oltu je es

resizable " es . no . 1 . 0 a li da omoući :romenu veli,ine :o:u: :rozoraD Co de8oltu je es

s9rollbars " es . no . 1 . 0 a li da :rikazuje s9rollbar u brauzeru za taj :o:u:D Co de8oltu je es

status " es . no . 1 . 0 a li da :rikazuje status bar u brauzeru za taj :o:u:D Co de8oltu je es

titlebar " es . no . 1 . 0 a li da :rikazuje naslov bar u brauzeru za taj :o:u:D Co de8oltu je es

toolbar " es . no . 1 . 0 a li da :rikazuje toolbar u brauzeru za taj :o:u:D Co de8oltu je es


46/155

.amena = je takodje opcioni parametar koga ako 8elimo mo8emo potpuno i6ostaviti( Konkretanparametar mo8e mo8e imati jednu od dve vrednosti1 a one su true ili #alse( ,ko je true1 nova lokacija9e 6ameniti trenutnu stranicu u istoriji brau6era( /eki brau6eri 9e jednostavno ignorisati ovajparametar( "vo primera open% & %unkcijeA

ctio otvoriN 8ido8.ope"httpH//mmace%+.o.eobee.et"2 "Moja straa"2 "toolbar=o2locatio=o2 directories=o2 stats=o2 scrollbars=yes2 8idth=77%2hei;ht=:%%"9P

, evo primera kad otvaramo novu stranicu i u njoj pi-emo ne-toA

ctio otvoriNproDor = 8ido8.ope""2"Casa"2"8idth=3%%2 hei;ht=$%%"9proDor.docmet.8rite"vo je as proDor2 Dar ije lep0"9P

Close%&2 moveB7%&2 moveTo%&2 #ocus%& i

blur%&Close% &

Funkcija 6a 6atvaranje otvorenih pro6ora je close% &( "vo primera koji sve obja-njavaA

ctio otvoriN proDor=8ido8.ope""2 ""2 "8idth=+%%2hei;ht=)%%"9 proDor.docmet.8rite"vo je otvore proDor"9Pctio DatvoriN proDor.close9P


47/155

MoveB7% &

MoveB7% & %unkcija pomera otvoren pro6or na po6iciju koju de%ini-emo u toj %unkciji( Sve je prosto1 evoprimeraA

ctio otvoriN proDor = 8ido8.ope""2 ""2 "8idth=+%%2hei;ht=)%%"9 proDor.docmet.8rite"vo je a proDor"9P

MoveTo% &MoveTo% & je potpuno identi7na %unkcija %unkciji MoveBy# $(

'ocus% &

U primeru takodje %iguri-e kao -to vidimo i %unkcija #ocus% &( /a primer napi-ite i pokrenite gornjiprogram be6 %ocus# $1 i vide9ete da 9e se pro6or pomeriti ali bi9e i6a glavnog pro6ora( na7i da bi steponovo uo7ili pomereni pro6or morali bi ste da se spustite u kontrolnoj liniji operativnog sistema ikliknuli na pro6or da bi %okusirali pomereni pro6or( Sa ovom %unkcijom %ocus# $ pro6or je odma u %okusu(

Blur% &

ostoji i %unkcija blur% & koja je suprotnost od %ocus# $( na7i ukoliko postoji neki pro6or i6a togpro6ora on 9e i6a9i u %okus a ovaj na- 9e se ukloniti i6 %okusa(

!rintanje straneFunkcija 6a printanje veb stranice je print% &( Ovom %unkcijom 9e se isprintati sve ono -to se vidi udisplay brau6era preko -tampa7a na papir( "vo primeraA

ctio pritajeN 8ido8.prit9P


48/155

SetTimeOut%&2clearTimeOut%&2setInterval%&2 clearInterval%&

SetTimeOut% &Set'imeOut# $ i6vr-ava odredjene naredbe ili %unkcije nakon odredjenog broja milisekundi #; sekunda ]; milisekunda$( rototip te %unkcije jeA

SetOimet"eacija "2 )%%%

na7i %unkcija neka%unkcija# $ 9e se i6vr-avati svake sekunde(

ClearTimeOut% &

Clear'imeOut# $ = 6austavlja i6vr-enje %unkcije Set'imeOut# $( "vo konkretan primer koji obja-njavaobe %unkcijeA

c=%9t=%9ctio startjN docmet.;etUlemetById"txt".vale=c9 c=c,)9 t = setOimeot"startj"2)%%9P

SetInterval% & i ClearInterval% &

2a6lika i6medju setInterval% & i set'imeOut# $ je ta -to set'imeOut# $ na svakih @ milisekundi po6iva naprimer neku %unkciju na i6vr-enje1 a set+nterval i6vr-ava po6vanu %unkciju sve dok je ne opo6ove%unkcija ClearInterval% &( "vo primera 6a Set+nterval# $ i Clear+nterval# $A

it=sel.setIterval"cloc"27%9ctio cloc N t=e8 *ate9 docmet.;etUlemetById"cloc".vale=t9P


49/155

Stop iterval

5esizeB7%& i resizeTo%&

5esizeB7% &2esi6eBy# $ vr-i promenu veli7ine pro6ora ali u 6avisnosti od postoje9e veli7ine( na7i vrednosti upikselima koje se unose kao parametri se odu6imaju ili dodaju na postoje9u veli7inu pro6ora( Stim akose unesu negativne vrednosti onda se smanjuje a po6itivne pove9avaju pro6or( "vo primera koji svelepo demonstriraA

5esizeTo% &2esi6e'o# $ je sli7na kao 2esi6eBy# $ ali se ra6likuje po tome -to ne u6ima u ob6ir trenutna veli7inapro6ora1 ve9 se direktno de%ini-e nova veli7ina pro6ora( "vo primerA

ScrollB7%& i scrollTo%&

ScrollB7% &ScrollBy# $ 6a broj piksela #koji su kao parametri$ pomera #skroluje$ u odnosu na trenutnu po6iciju( "voprimeraA

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

ScrollTo% &

Scroll'o# $ skroluje ne6avisno od trenutne po6icije u pro6oru na ta7no de%inisan polo8aj( "vo primeraA


50/155

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

SK?? SK?? SK??

"avigatorske #unkcije/avigacijske %unkcije sadr8e in%ormacije o pregledniku( Da9u primer sa kompletno svim ovim%unkcijama1 a mislim da on sve obja-njavaA

x = avi;ator9docmet.8rite"Ime braDera=" , x.app*ame , "
"9docmet.8rite"XerDija braDera=" , x.app+ersion , "
"9docmet.8rite"odverDija braDera=" , x.app,inor+ersion , "
"9

// Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"* braDera=" , x.app-ode*ame , "
"9docmet.8rite"*a li s mo;ci olacici pre;ledi=" , x.cookienabled ,"
"9docmet.8rite"# lasa sistema=" , x.cpu-lass , "
"9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"*a li je posetilac olie=" , x.on/ine , "
"9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"latorma operativo; sistema=" , x. platorm , "
"9

docmet.8rite"#ser a;et=" , x.user0gent , "
"9docmet.8rite"JeDi braDera=" , x. bro1ser/anguage , "
"9 // Ce podr(ava Fireox verDija $.$docmet.8rite"JeDi sistema=" , x.s2stem/anguage , "
"9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"JeDi orisia=" , x.user/anguage , "
"9 // Ce podr(ava Fireox verDija $.$

Java3nabled% &

Java3nabled% & = ova %unkcija proverava da li brau6er podr8ava 5avaScript( ,ko podr8ava vra9a true a

ako ne podr8ava onda ne podr8ava1 ne mo8e ni-ta da vrati A$ "vo primeraA

alertavi;ator.javaUabled9

3kranske %screen& #unkcije


51/155

"kranske %unkcije daju in%ormacije o ekranskim podacima klijenta( Da9u primer sa kompletno svimovim %unkcijema a mislim da on sve obja-njavaA

docmet.8rite"KeDolcija eraaH " , scree. 1idt& , "R" , scree.hei;ht ,

"
"9docmet.8rite"KeDolcija beD tlbarovaH " , scree.avail3idt& , "R" ,scree.avail4eig&t , "
"9docmet.8rite"Broj bita boje eraaH " , scree.color5ept& , "
"9docmet.8rite"Broj bita boje baerH " , scree. buer5ept& , "
"9

// Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"oriDotali broj pisela po iLH " , scree.device6578,"
"9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"Xertiali broj pisela po iLH " , scree.device9578 ,"
"9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"oriDotali broj ormalih pisela po iLH " ,scree.logical6578 , "
"9

// Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"Xertiali broj ormalih pisela po iLH " ,scree.logical9578 , "
"9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"mo;&eo redjivaje otovaH " ,scree.ontSmoot&ingnabled , "
"9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:docmet.8rite"Broj bita boje po pixel H " , scree. pi!el5ept& , "
"9 // Ce podr(ava Iteret Uxplorer Zdocmet.8rite"Iterval osve(avaja eraa H " , scree.update8nterval9 // Ce podr(avaj Fireox verDija $.$ i pera verDija 4.:

Histor7 #unkcije&istory %unkcije 7uvaju U2L=ove koje je korisnik posetio(

Histor78lengt)

)istor78lengt) = vra9a broj stranica na sajtu koje je posetio posetilac( /a primer akonapi-emodocument(0rite#histori(lenght$ ispisa9e se broj pose9enih strana posetioca( Ovaj podatakmo8e se korisno upotrebiti u nekim statistikama posete sajta(

Histor78back% & i )istor78#or,ard% &

)istor78back% & i )istor78#or,ard% & = pomo9u ovih %unkcija mo8emo kreirati dugme kojim 9e moomogu9avati posetiocima sajta da se vra9aju #back$ na prethodnu pose9enu stranicu1 ili da idu naslede9u stranicu u odnosu na tu #%or0ard$( "vo primeraA


52/155

oclic="8ido8.history.bac">

9o%argument&

go%argument& = Funkcija koja u7itava ta7no odredjenu stranicu i6 istorije poseta stranica( ,rgumentmo8e biti broj stranice1 6na7i ;1


53/155

&'ML DOM je mapa &'ML i CSS objekata( 5avaScript ima 6a svaki &'ML i CSS objekat odgovaraju9u%unkciju pomo9u koje pristupamo1 dodajemo1 menjamo ili bri-emo taj &'ML ili CSS objekat( &'MLobjekti su u glavnom svi &'ML tagovi1 a CSS objekti su u glavnom svi CSS atributi( Da bi smo ovim &'MLi CSS objektima pristupili moramo uvek ispred odgovaraju9ih %unkcija1 odvojeno ta7kom1 koristitire6ervisanu re7 document( Document objekat je takoe deo 0indo0 objekta1 te se mo8e pisatii,indo,8document ali mo8e i be6 tog 0indo01 pa se 6ato skoro i nikad ne pi-e 0indo0(

1ocument8anc)ors:;document(anchors) * je ni6 koji 7uva &'ML elemente svih linkova na stranici1 kao -to su tekstovi linkova#inner&'ML$1 adrese na koje -alju linkovi #hre%$1 imena linkova ukoliko ih ima #name$1 mo8e da i6bacikoliko ima linkova na strnici #length$( "vo primeraA

rva straasajta
*r;a straa

sajta
Oreca straasajta

a = document.anc&ors.lengt&9or i = %9 i < a9 i,,Ndocmet.8rite"
"9docmet.8rite"Oest lia" , i , " jeH " ,document.anc&orsi;.inner4


54/155

document8#orms:; i document8images:;document8#orms: ; = otuno ist kao i anc)ors: ; samo -to se odnosi na %orme(

docmet.8rite"Broj ormi a straici jeH " , document.orms.lengt& ,"
"

docmet.8rite"Ime prve orme a straici jeH " , document.orms;.name,"
"docmet.8rite"Metoda preosa podataa dr;e orme jeH "

,document.orms$;.met&od , "
"docmet.8rite"odaci prve orme se salj aH " ,document.orms;.action ,"
"

document8images: ; = otpuno isto kao i prethodne dve %unkcije samo -to se u ovom slu7aju odnosi naslike(

1ocument8links:;document8links: ; = otpuno isto kao prethodne %unkcije samo -to se odnosi na links( \ta je links "voprimera koji sve otkrivaA

ctio liaNproDor = 8ido8.ope""2""2"8idth=):A2 hei;ht=++3"9

proDor.docmet.8rite"


55/155

Broj area/liova a straici jeH

docmet.8ritedocmet.lis.le;th9

2e6ultat

Broj areaVlinkova na stranici jeA J;

Klik9ite na planete da bi ste videli &'ML e%ekat M, taga

1ocument8cookie i jo$ neke #unkcijedocument8cookie = :uva in%ormacije o kola7i9ima koji su pove6ani sa internet stranicom( \ta su5avaScript kola7i9i #cookie$ 5avaScript Cookie su tekstualni %ajlovi koje brau6er posetioca memori-e usebe 6a svaku internet stranicu koju je otvorio( 'aj tekstualni %ajl se ra6likuje od stranice do stranice1-to 6na7i da je to u stvari identi%ikacioni broj stranice #+D$( 5avaSrcipt #to jest mi kao programeri A$ $


56/155

pomo9u ove COOK+" %unkcije de%ini-e cookie %ajl( Format koji cookie %ajl mora 6adovoljiti je #sve ono-to je u srednjim 6agradama je opciono1 to jest nije obave6no$A

ime = vredost59expires=datm659domai=ime*omea659path=ptaja6 59secre659httply6

• ime = ime koje de%ini-e upisani cookie• vrednost = je upravo in%ormacija koja se 8eli 6apamtiti kako bi se identi%ikovao posetilac #to je

glavna stvari i obave6an je parametar$

• datum = je datum koji de%ini-e do kada cookie ostaje memorisan u brau6eru(

• imeDomena = de%ini-e jedini domen sa kog cookie mo8e da se 7ita i da mu se menja vrednost

• putanja = de%ini-e jedinu putanju sa koje cookie mo8e da se 7ita i da mu se menja vrednost(

• secure = upis i 7itanje cookie se i6vr-ava preko posebnih1 be6bednijih kanala

,tributi kola7i9a e3pires1 domain1 path1 secure1 httpOnly su opcioni i nije bitan redosled u kom sepojavljuju(

"vo primeraA

ctio postavljajeooieN docmet.cooie="cooie je=" , docmet.orma).imeooie.vale9Pctio priaDooieN alertdocmet.cooieP

ostavljaje i pre;led IU

#pii imeH

, re6ultat #naravno svaki put je druga7iji$ u alert pro6oru je na primerA

'


57/155

document8close% & = Sa %unkcijom close# $ smo se ve9 susreli kada smo prou7avali 4+/DO4 objekte( 'a%unkcija 6atvara dokument(

document8open% & = + sa %unkcijom open#$ smo se isto susreli ve9 kad smo prou7avali 4+/DO4 objekte1i ona otvara novi pro6or na primer1 to jest novi dokument(

document8,rite% & = Sa %unkcijom 0rite#$ smo se ve9 susreli be6broj puta i ona omogu9ava 5avaScriptispisivanje na internet stranici(

1ocument8get3lementB7Id%id&+ sa ovom %unkcijom smo se susretali ali sad da je malo bolje objasnimo( Funkcija get"lementBy jepoka6iva7 elemenata1 na primer &'ML tagova( " sad u 6avisnosti -ta poka6uje imamoget"lementBy+d#Ra;R$ = poka6uje neki element koji ima identi%ikator Ra;R( +liget"lementsBy'ag/ame#ime'aga$ = poka6uje na sve tagove sa odredjenim imenom(Iet"lementsBy/ame#ime$ = poka6uje neki elemenat sa speci%i7nim imenom1 na primer na neki element%orme1 ili sama %orma( " sad u nastavku mo8e stajati na primer innerHTML = -to 6na7i da menjavrednost &'ML teksta tog elementa( +li samo value = -to 6na7i da menja neku vrednost u nekom %ormelementu kao -to je vrednost nekog te3t elementa %orme( , mo8e da stoji i leng)t = -to 6na7i da 9epoka6ati broj nekih elemenata( "vo primeraA

ctio brojaaN docmet.;etUlemetById"b".vale =docmet.;etUlemetById"a".ierOM?.le;thPctio sveN docmet.;etUlemetById"a".ierOM?="111111"9

brojaaP

aaaaaaaaaaaaaaaaa

*nc)or #unkcije/e moramo samo mi-em birati linkove( Biranje linka mo8emo omogu9iti i na primer istovremenimkliktanjem ,lt neka dirka( /akon takvog biranja linka potrebno je samo kliknuti na "nter kako bi iaktivirali taj link( Ovo nam omogu9ava access/e7 %unkcija( Opera > ne podr8ava ovu %unkciju( "voprimera koji sve obja-njavaA

ctio accesseyN docmet.;etUlemetById"8)".accessey="8"9 docmet.;etUlemetById"8+".accessey="d"9P


58/155

Cei sajt ) lii 1lt , 8da iDabere li )2 a Datim Uter
Cei sajt + lii 1lt , dda iDabere li +2 a Datim Uter

Kao -to 6namo nakon linkovanja1 stranica se mo8e otvoriti ili u samom je6i7ku u kome smo kliknuli1 ili uposebnom je6i7ku brau6era( , to se de%ini-e kao -to 6namo u anshor tagu atributom target koji mo8eimati vrednosti blank1 sel# 1 parent1 i top( " sad mi i preko target %unkcije u 5avaScript=umo8emo pode-avati anchor target tag po na-oj 8elji( +sto sve va8i i 6a )re# atribut( atim sam tekstlinka takodje mo8emo menjati po 8elji pomo9u innerHTML %unkcije( I1 6namo da je identi%ikacionibroj anchor elementa( Sve ovo mo8da i6gleda nejasno ali naravno sa jednim primerom je sve jasnoA

ctio promea?iaN docmet.;etUlemetById"lii".ierOM?="oseti Yahoo"9 docmet.;etUlemetById"lii".hre="httpH//888.yahoo.com"9 docmet.;etUlemetById"lii".tar;et="\bla"9P

oseti;oo;le

Tastatura i mi$ %33"T atributi&event8alt/e7 true #alse @ ? = altKey vra9a logi7ku vrednost true ili ; ako je ,L' dirka natastaturi pritisnuta1 ili %alse1 odnosno ako nije( "vo primeraA

ctio drDievetN i evet.altey == ) N alert"Xi dr(ite 1?O tip!"9 PelseN alert"1?O tip e dr(ite treto!"9 PP

1lert QV+:$9e vam reQV+:$9i da li dr(ite tip 1?O ili e. 1o (elite da vamjavi dadr(ite2 morate dr(ati 1?O i isto vreme miem liti bilo ;de a straici

event8ctrl/e7 true #alse @ ? = otpuno identi7no kao i altKey samo -to je u pitanju C'2L tipkaumesto ,L'


59/155

event8s)i#t/e7 true #alse @ ? = otpuno identi7no kao i altKey samo -to je u pitanju S&+F'tipka umesto ,L'

event8button ? @ A = Odredjuje koji ste klik mi-em i6vr-ili i to tako da 6na7i da ste i6vr-ili leviklik mi-em[ ; 6na7

javascript skripta

Documents