Java Script

1
Java Script

• Vežba VIII

2
JavaScript

• JavaScript je skript jezik kojim Web dizajneri
  mogu da automatizuju postupke unutar Web stranice
• Skript jezik - jer omogucava pisanje skripta
  (niza naredbi) koje ce Web citac izvršiti
• Ne koristi se za pravljenje spoljnog programa
  koji se izvršava nezavisno od citaca

3
JavaScript

• JavaScript se ugraduje u HTML Web stranice nije
  potreban poseban alat može se koristiti isti
  program za uredenje teksta koji se koristi za
  izradu Web stranice
• Najpopularniji citaci Weba imaju ugradenu podršku
  za JavaScript posetioci lokacije ne moraju
  instalirati dodatne programe na svoje racunare
• JavaScript iskazi postavljaju se izmedu oznaka
  ltscriptgt i lt/scriptgt, koje ce ukazati citacu Weba
  da izvrši JavaScript iskaze umesto da prikaže
  tekst na ekranu

4
Pozicije oznaka
Skriptovi u zaglavlju dokumenta
Skriptovi u telu dokumenta
lthtmlgt ltheadgt lttitlegt Dokumentlt/titlegt ltscript type"text/javascript"gt //naredbe lt/scriptgt lt/headgt ltbodygt lt/bodygt lt/htmlgt
lthtmlgt ltheadgt lttitlegt Dokumentlt/titlegt lt/headgt ltbodygt ltscript type"text/javascript"gt //naredbe lt/scriptgt lt/bodygt lt/htmlgt
5
Pozicije oznaka
Skriptovi u zaglavlju i telu dokumenta
Dva skripta u telu dokumenta
lthtmlgt ltheadgtlttitlegt Dokumentlt/titlegt ltscript type"text/javascript"gt //naredbe lt/scriptgt lt/headgt ltbodygt ltscript type"text/javascript"gt //naredbe lt/scriptgt lt/bodygt lt/htmlgt
lthtmlgt ltheadgtlttitlegt Dokumentlt/titlegt lt/headgt ltbodygt ltscript type"text/javascript"gt //naredbe lt/scriptgt ltmore htmlgt ltscript type"text/javascript"gt //naredbe lt/scriptgt lt/bodygt lt/htmlgt
6
JavaScript

• Iskazi skripta mogu se uokviriti HTML oznakama za
  komentar (lt!--komentar--gt) kako bi se sprecilo
  da citaci koji ne podržavaju JavaScript na ekranu
  prikažu iskaze skripta
• Citaci koji ne podržavaju JavaScript ignorisace
  oznake skripta i sve što se nalazi izmedu pocetne
  i završne oznake komentara
• Obrnuto, citaci koji podržavaju JavaScript
  ignorisace oznake komentara i izvršiti funkciju
  skripta

7
Postupanje sa starijim citacima koji ne
podržavaju skriptove

• Kada se u HTML dokument uvrsti skript nije
  osigurano da citac Weba posetioca podržava
  izvršenje skripta
• Da bi se posetilac upozorio o tome da HTML
  dokument sadrži skript koji njegov citac ne može
  da izvrši, mogu se koristiti oznake ltnoscriptgt
  lt/noscriptgt
• Najbolje mesto za postavljanje oznake ltnoscriptgt
  je odmah iza oznake lt/scriptgt
• Izmedu oznaka ltnoscriptgt lt/noscriptgt treba uneti
  tekst koji ce citac Weba prikazivati ako ne
  podržava skriptove

8
Primer 1.

• lthtmlgt
• ltheadgt lttitlegt Primer izvršavanja JavaScripta
  lt/titlegt lt/headgt
• ltbodygt
• ltpgt Tekst koji se ispisuje pre izvršavanja
  iskaza.lt/pgt
• ltscript type"text/javascript"gt
• lt!--
• alert('Ovo je dijalog ALERT!')
• //--gt
• lt/scriptgt
• ltnoscriptgt No JavaScript support, ... SORRY!
  lt/noscriptgt
• ltpgt Tekst koji se ispisuje nakon izvršavanja
  iskaza.lt/pgt
• lt/bodygt
• lt/htmlgt
• Snimite dokument pod nazivom Primer1.html na D
  disk (D\Grupa I\JavaScript\Primer1.html)

Naredba (iskaz)
9
Korišcenje objektnog modela

• JavaScript vidi Web stranicu kao skup svojstava
  i objekata smeštenih u objekat pod nazivom
  document
• Svojstva koja citac Weba smešta u objekat
  document ukljucuju prednji plan (tekst),
  pozadinu, boje hiperteksta Web stranice, elemente
  obrasca, slike, itd.
• Menjajuci vrednosti svojstava tog objekta može se
  promeniti i izgled Web stranice i objekti na
  stranici
• Na primer, mogu se postaviti svojstva
• document.bgColor promena boje pozadine
• document.fgColor promena boje slova
• document.linkColor promena boje hiperveze
  neposecenih stranica
• document.vlinkColor - promena boje hiperveze
  posecenih stranica, itd

Svojstvo
Objekat
10
Primer 2.

• lthtmlgt
• ltheadgt lttitlegt Primer izvršavanja JavaScripta
  lt/titlegt lt/headgt
• ltbodygt
• ltpgt Tekst koji se ispisuje pre izvršavanja
  iskaza.lt/pgt
• ltscript type"text/javascript"gt
• lt!-
• alert('Ovo je dijalog ALERT!')
• document.bgColor"lightyellow"
• document.fgColor"magenta"
• //--gt
• lt/scriptgt
• ltpgt Tekst koji se ispisuje nakon izvršavanja
  iskaza.lt/pgt
• lt/bodygt
• lt/htmlgt
• Snimite dokument pod nazivom Primer2.html na D
  disk (D\Grupa I\JavaScript\Primer2.html)

11
Primer 2a.

• Modifikujte prethodno realizovan Primer 2.,
  premeštanjem iskaza
• alert('Ovo je dijalog ALERT!')
• iza iskaza
• document.fgColor"magenta"

12
Primer 2a.

• lthtmlgt
• ltheadgt lttitlegt Primer izvršavanja JavaScripta
  lt/titlegt lt/headgt
• ltbodygt
• ltpgt Tekst koji se ispisuje pre izvršavanja iskaza
  JavaScript-a.lt/pgt
• ltscript type"text/javascript"gt
• lt!--
• document.bgColor"lightyellow"
• document.fgColor"magenta"
• alert('Ovo je dijalog ALERT!')
• //--gt
• lt/scriptgt
• ltpgt Tekst koji se ispisuje nakon izvršavanja
  iskaza JavaScript-a.lt/pgt
• lt/bodygt
• lt/htmlgt
• Snimite dokument pod nazivom Primer2a.html na D
  disk (D\Grupa I\JavaScript\Primer2a.html)

13
Rezervisane reci JavaScripta

• Prilikom imenovanja funkcija ili definicija
  promenljive za smeštanje informacija dok citac
  izvršava iskaze u funkciji ili skriptu moraju
  se izabrati imena funkcija i promenljivih koje
  nisu u sukobu sa rezervisanim recima JavaScripta

abstract continue finally instanceof protected throws
boolean default float int public transient
break delete for interface return true
byte do function long short try
case double goto native static typeof
catch else if new super switch var
char extends implements null synchronized void
class false import package this while
const final in private throw with
14
Korišcenje komentara

• Komentar se u Java iskaze postavlja umetanjem dve
  kose crte (//) za jednoredne komentare
• // Ovo je komentar
• JavaScript podržava i blok komentare koji pocinju
  kosom crtom i zvezdicom (/) a završavaju se sa
  zvezdicom i kosom crtom (/)
• /
• Citac ce ignorisati kompletan tekst na koji
  naide nakon kose crte i zvezdice kojima pocinje
  blok komentar dok ne ucita zvezdicu i kosu crtu
  kojima se završava višeredni blok komentar.
• /

15
Deklarisanje promenljivih u JavaScriptu

• U JavaScript iskazima informacije se cuvaju u
  promenljivama
• Za razliku od vecine prgramskih jezika nije
  potrebno zadati tip informacije koji se smešta u
  promenljivu kada se ona deklariše
• JavaScript odreduje tip promenljive na osnovu
  podatka koji se smešta u promenljivu
• Tip podatka promenljive može se promeniti zavisno
  od operacije u kojoj se koristi promenljiva

16
Deklarisanje promenljivih u JavaScriptu

• Sama deklaracija promenljive u skriptu zadaje se
  imenom nakon kljucne reci var
• var BookTitle, ChapterNumber
• var Publisher
• Ako se promenljivoj daje pocetna vrednost iza
  njenog imena postavlja se operator dodele () i
  pocetna vrednost
• var StringValue 10
• var IntValue 20

17
Ogranicenja pri deklaraciji promenljivih

• Ime promenljive ne sme se sukobiti sa
  rezervisanom reci JavaScripta
• Imena promenljivih moraju pocinjati slovom ili
  donjom crtom (_) i mogu sadržati brojeve ili
  slova nakon prvog znaka
• Imena promenljivih ne mogu sadržati znakove za
  razmak ili interpunkciju
• U nazivima i rezervisanim recima JavaScripta (kao
  var) treba voditi racuna o velicini slova (eng.
  Case-sensitive)
• var je rezervisana rec, a Var nije
• Promenljiva stringvalue je razlicita od
  StringValue

18
JavaScript operatori

• Operatori dozvoljavaju kombinovanje promenljivih
  i/ili slovnih vrednosti u izraze koji daju
  vrednosti
• Ti izrazi se mogu prikazivati, smeštati u
  promenljive ili koristiti kao delovi drugih
  izraza
• JavaScript operatori mogu se grupisati u nekoliko
  klasa na osnovu njihove namene
• aritmeticki operatori zahtevaju dve
  promenljive, dve vrednosti ili dva izraza ( po
  jedan na svakoj strani operatora)
• unarni JavaScript operatori odnose se na jedan
  operand
• operatori poredenja omogucavaju poredenje
  jednog izraza, promenljive ili slovne vrednosti s
  nekom drugom
• logicki operatori omogucavaju poredenje dve
  logicke vrednosti

19
Aritmeticki operatori
Operator Namena Primer
Sabiranje Izrazizraz
- Oduzimanje Izraz-izraz
Množenje Izrazizraz
/ Deljenje Izraz/izraz
Deljenje po modulu (vraca ostatak pri deljenju) Izraz izraz
20
Unarni JavaScript operatori
Operator Namena Primer
Povecanje za 1 promenljiva ili promenljiva
-- Smanjenje za 1 Promenljiva-- ili --promenljiva
- Promena znaka -izraz
! Komplement (operator negacije) !izraz

• Kada se dvostruki plus () ili dvostruki minus
  (--) stavi ispred promenljive, kao prefiks,
  operacija se obavlja pre dodele vrednosti
• Ako se operator postavi kao sufiks, nakon
  promenljive, operacija se obavlja nakon dodele
  vrednosti.
• Na primer
• i 10
• j --i //i9,. j9
• j i //j10, i11

21
Operatori poredenja
Operator Namena Primer
lt Manje od izrazltizraz
gt Vece od izrazgtizraz
lt Manje ili jednako izrazltizraz
gt Vece ili jednako izrazgtizraz
Jednako izrazizraz
! Razlicito od izraz!izraz
22
Logicki operatori
Operator Namena Primer
Logicko I Izrazizraz
Logicko ILI Izrazizraz

• Logicki operatori obicno se koriste za poredenje
  rezultata dva izraza u uslovnom iskazu ili u
  upravljackoj petlji

23
JavaScript funkcije

• Srodne naredbe (iskazi) grupišu se u funkciju
• U okviru Web stranice svaka JavaScript funkcija
  mora imati jedinstveno ime
• Definicija pocinje kljucnom recju function, zatim
  sledi ime funkcije i neobavezni niz parametara
  (obuhvacenih zagradama)
• Nakon imena funkcije i neobaveznog niza
  parametara, izmedu viticastih zagrada navode
  se JavaScript iskazi koji izvode zadatak funkcije

24
JavaScript funkcije

• function greetVisitor()
• alert(Welcome to My Site)
• return
• Iskazi JavaScripta završavaju se tackom i zarezom
  ()
• Na kraju funkcije (pre zatvaranja desne viticaste
  zagrade) umece se kljucna rec return - vraca
  upravljanje citaca Weba iskazu koji je pozvao
  funkciju
• Funkcije je najbolje ugraditi na kraj zaglavlja
  (neposredno ispred oznake lt/headgt) - osigurava da
  ce citac Weba ucitati telo funkcije pre nego što
  posetilac izazove dogadaj s kojim je funkcija
  povezana

25
Primer 3.

• lthtmlgt
• ltheadgt lttitlegt Funkcije JavaScripta lt/titlegt
• ltscript type"text/javascript"gt
• lt!--
• function greetVisitor()
• alert("Welcome to My Site")
• return
• // --gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltpgt Tekst koji se ispisuje pre izvršavanja
  iskaza JavaScript-a.lt/pgt
• ltscript type"text/javascript"gt
• lt!--
• greetVisitor()
• // --gt
• lt/scriptgt

26
Prosledivanje vrednosti u JavaScript funkciju i
iz nje

• Kada se pozove JavaScript funkcija moguce je
  proslediti vrednosti u funkciju preko
  promenljivih koje se zovu parametri
• Niz parametara funkcije nalazi se u zagradama,
  posle imena u deklaraciji funkcije
• Sledeci kod deklariše funkciju sa tri parametra
  first, next i last
• function FindTotal(first,next,last)
• var total first next last
• document.write (Rezultat je total .
  )
• return
• Tekst i naredbe HTML-a se stavljaju unutar
  navodnika.
• Naredbom document.write(...) unutar Java Scripta
  se u dokument ispisuje HTML kod ili korisnicki
  tekst.
• Java Script i HTML iskazi medusobno se povezuju
  znakom plus ().

27
Primer 4a.

• lthtmlgt
• ltheadgt
• lttitlegt Funkcija zbira lt/titlegt
• ltscript type"text/javascript"gt
• lt!--
• function FindTotal(first,next,last)
• var total first next last
• document.write (Rezultat je total .
  )
• return
• // --gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltscript type"text/javascript"gt
• lt!--
• FindTotal(2,3,4)
• // --gt
• lt/scriptgt

28
Primer 4b.

• lthtmlgt
• ltheadgt
• lttitlegt Funkcija zbira lt/titlegt
• ltscript type"text/javascript"gt
• lt!--
• function FindTotal(first,next,last)
• var total first next last
• document.write ("Unete vrednosti su ltbrgt"
  first "ltbrgt" next "ltbrgt" last "ltbrgt
  ltbgtNjihov zbir jelt/bgt" total " . )
• return
• // --gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltscript type"text/javascript"gt
• lt!--
• FindTotal(2,3,4)
• // --gt
• lt/scriptgt

29
Uslovni iskazi i petlje

• Skriptovi koji donose odluke obavljaju uslovnu
  obradu
• Zavisno od rezultata jednog ili više uslova,
  citac ce izvršiti odredene iskaze
• Da bi doneli odluku skriptovi moraju izvršiti
  neku vrstu provere koriste operatore poredenja
• Rezultat poredenja dve vrednosti relacionim
  operatorima je logickog tipa ili true (tacno)
  ili false (netacno)

30
Uslovno izvršavanje

• Iskaz if omogucava skriptovima da izvrše provere,
  a potom izvrše iskaze zavisno od rezultata
  provere
• Ako je rezultat poredenja tacan, skript izvršava
  iskaz koji sledi iza iskaza if
• S druge strane, ako je rezultat provere
  pogrešan, skript preskace iskaz koji sledi
• Format iskaza if je sledeci
• if (uslov je ispunjen)
• iskaz

31
Uslovno izvršavanje

• Uslov if može da se koristi za izvršavanje jednog
  ili više iskaza
• Kada skript izvršava samo jedan iskaz koji dolazi
  iza if, to je prost iskaz
• if (Age gt 18)
• alert(Register to vote at www.VoterRegistration.c
  om)
• Za skriptove koji treba da izvrše nekoliko iskaza
  kada uslov bude ispunjen, iskazi se moraju
  grupisati izmedu leve i desne viticaste zagrade
  (). Iskazi koji se nalaze u zagradama
  sacinjavaju složen iskaz
• if (time gt 10)
• document.write("ltbgtGood daylt/bgt")
• document.bgColor"lightyellow"

32
Predefinisani objekti

• JavaScript poseduje izvestan skup predefinisanih
  objekata Date, Array, Math.
• Razmotricemo ih na primeru objekta Date.
• Novi objekat se kreira upotrebom operatora new
• var danas new Date()
• Date poseduje metode koji se mogu koristiti pri
  manipulaciji objektom
• getHours() -  za dobijanje casova
• getMinutes()-  za dobijanje minuta
• getMonth() -  za dobijanje meseca
•   var sada new Date()document.write("Vreme
  je" sada.getHours() "" sada.getMinutes()
  "ltbrgt) 

33
Primer 5.

• lthtmlgt
• ltheadgt
• lttitlegt Primer uslovnog izvršavanja lt/titlegt
• lt/headgt
• ltbodygt
• ltscript type"text/javascript"gt
• lt!--
• var d new Date()
• var time d.getHours()
• var sada new Date()
• document.write("Vreme je" sada.getHours()
  ""  sada.getMinutes() "ltbrgt)
• if (time gt 10)
• document.write("ltbgtGood daylt/bgt")
• // --gt
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

34
Uslovno izvršavanje

• Vecinom skriptovi zadaju jedan skup iskaza koji
  se izvršava kada je uslov ispunjen i drugi skup
  ako uslov nije ispunjen
• Definisanje iskaza koji se izvršavaju kada uslov
  nije ispunjen realizuje se iskazom else
• Format iskaza else je sledeci
• if (uslov je ispunjen)
• iskaz
• else
• iskaz

35
Primer 6.

• lthtmlgtltheadgt
• lttitlegt Primer uslovnog izvršavanja lt/titlegt
• lt/headgt
• ltbodygt
• ltscript type"text/javascript"gt
• var d new Date()
• var time d.getHours()
• var sada new Date()
• document.write("Vreme je" sada.getHours()
  ""  sada.getMinutes() "ltbrgt)
• if (time lt 10)
• document.write("ltbgtGood morninglt/bgt")
• else
• document.write("ltbgtGood daylt/bgt")
• lt/scriptgt
• lt/bodygt

36
Petlje ponavljanja

• Petlje ponavljanje oznacavaju ponavljanje niza
  koraka dok se ne postigne uslov koji ce dozvoliti
  da se iz petlje izade
• Najcešca konstrukcija povratne petlje koja se
  koristi u JavaSriptu
• for (pocetni izraz uslov obnavljajuci izraz)
• naredbe unutar petlje

37
Petlje ponavljanja

• Na primer
• for (Count 1 Count lt5 Count)
• Iskaz
• Iskaz Count1 dodeljuje kontrolnoj promenljivoj
  pocetnu vrednost
• Petlja for izvodi ovu inicijalizaciju samo
  jednom, kada se pokrene
• Zatim proverava uslov Countlt5
• Ako je uslov ispunjen petlja for ce izvršiti
  iskaz koji sledi
• Ako uslov nije ispunjen, petlja ce se završititi
  i skript ce nastaviti sa izvršavanjem od prvog
  iskaza koji sledi nakon petlje
• Ako je uslov ispunjen i petlja for izvršava iskaz
  povecace promenljivu Count korišcenjem iskaza
  Count

38
Primer 7.

• lthtmlgt
• ltheadgt
• lttitlegt For petlja lt/titlegt
• lt/headgt
• ltbodygt
• ltscript type"text/javascript"gt
• lt!--
• for (i 0 i lt 5 i)
• document.write("The number is " i)
• document.write("ltbrgt")
• // --gt
• lt/scriptgt
• lt/bodygt
• lt/htmlgt
• Snimite dokument pod nazivom Primer7.html na D
  disk (D\Grupa I\JavaScript\Primer7.html)

39
Ponavljanje iskaza dok je uslov ispunjen

• Kad skriptovi moraju da prolaze kroz petlju dok
  god je odredeni uslov ispunjen, ali ne obavezno
  odreden broj puta, mogu da koriste while petlju
• Opšti oblik while petlje
• while (Uslov je ispunjen)
• iskaz

40
Ponavljanje iskaza dok je uslov ispunjen

• Na primer
• while (i lt 10)
• Iskaz
• Kada skript naide na petlju while, prvo proverava
  zadati uslov
• Ako je ispunjen skript izvršava iskaze petlje
  while
• Nakon što se izvrši poslednji iskaz u petlji,
  petlja while ponovo proverava uslov
• Ako je uslov i dalje ispunjen, iskazi ce se
  ponoviti i proces ce se nastaviti
• Kada uslov ne bude ispunjen, petlja ce se
  završiti i skript ce nastaviti izvršenje od
  prvog iskaza koji sledi petlju

41
Java Script

• Vežba VIII