Web programiranje i primjene JavaScript - · PDF fileprototipno programiranje...
-
Upload
phungthien -
Category
Documents
-
view
253 -
download
5
Transcript of Web programiranje i primjene JavaScript - · PDF fileprototipno programiranje...
Web programiranje i primjene
JavaScript
22.3.2012. 1Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript•
skripta –
lista naredbi koja se može izvršiti bez intervencije korisnika
(izvor: Informatički enciklopedijski riječnik, 2. dio, Zagreb, 2005.) •
JavaScript –
programski jezik za pisanje skripti (skriptni jezik)
–
skripte
se
najčešće
ugrađuju
izravno
u
HTML
dokument ‐
JavaScript uvodi interaktivnost u HTML dokumente
–
besplatan
je
i
podržan
u
najčešće
korištenim
Internet
preglednicima (Internet Explorer, Firefox, Chrome, Opera)
•
povijest–
prvu verziju JavaScripta izumio je Brendan Eich (Netscape);
–
od
1996.
svi
Microsoftovi
i
Netscapeovi
web
preglednici
podržavaju JavaScript
22.3.2012. 2Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScriptŠto sve možemo s JavaScriptom?
•
JavaScript
je
skriptni
jezik
koji
omogućava
pisanje
jednostavnih
programa i njihovo ugrađivanje izravno u HTML dokument
•
JavaScript
omogućuje
dodavanje
dinamičkog
teksta
HTML
dokumentu (npr.
"<h1>"
+
name
+
"</h1>"
– u
HTML
dokumentu
ispisuje
vrijednost
varijable name
kao zaglavlje tipa <h1>)•
JavaScript
može
reagirati
na
događaje
– može
se
podesiti
tako
da
je
izvršavanje
skripte
povezano
s
nekim
događajem
(npr.
učitavanjem stranice –
onLoad, klikom miša – onClick)
•
JavaScript može čitati i mijenjati sadržaj HTML elementa•
JavaScript
može
prepoznavati
web
preglednik
krajnjeg
korisnika
– tako
omogućava
da
taj
krajnji
korisnik
vidi
dokument
kreiran
upravo
za
web preglednik koji on koristi
22.3.2012. 3Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript uključivanje u HTML dokument
•
skripta pisana JavaScript‐om se u HTML dokument upisuje između tag‐ova <script> i </script>
<html> <body>
<script type="text/javascript"> ...
</script> </body>
</html>
•
<script type="text/javascript">
–
označava početak JavaScript‐a
–
atribut
type
s
vrijednošću
“text/javascript”
definira
korišteni
skriptni jezik
•
</script>
‐
označava kraj JavaScript‐a
22.3.2012. 4Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript uključivanje u HTML dokument
•
primjer:<html>
<body> <script type="text/javascript">
document.write("Hello
World!"); </script>
</body> </html>
•
document.write() –
JavaScript naredba za ispisivanje definiranog sadržaja
–
skripta iz ovog primjera u pripadnom HTML dokumentu ispisuje string “Hello World!”, i to točno na mjestu na
kojemu
je
skripta
uključena
u
HTML dokument–
primjer
22.3.2012. 5Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript uključivanje u HTML dokument
•
preglednici koji ne podržavaju JavaScript tretiraju ga kao obični tekst – kod JavaScript‐a prikazuju kao običan tekstualni sadržaj HTML dokumenta
•
da bismo to izbjegli dovoljno je JavaScript napisati kao HTML komentar<html>
<body> <script type="text/javascript">
<!‐‐document.write("Hello
World!"); //‐‐>
</script> </body>
</html>•
kose crte “//”
su simbol za JavaScript komentar – one ovdje sprečavaju
izvršavanje tag‐a “‐‐>”•
primjer
22.3.2012. 6Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript uključivanje u HTML dokument
•
gdje uključiti JavaScript u HTML dokumentu?–
http://www.w3schools.com/js/js_whereto.asp
–
JavaScript
uključen
u
tijelo
HTML
dokumenta
izvršava
se
automatski prilikom učitavanja tog HTML dokumenta u web preglednik
–
ako
želimo
da
se
JavaScript
izvršava
nakon
učitavanja
HTML dokumenta
u
web
preglednik
i
da
je
njegovo
izvršavanje
povezano
s
nekim
događajem
(npr.
klikom
miša,
klikom
na
gumb
i
sl.)
koristimo funkcije
–
JavaScript
s
definicijom
funkcije
na
standardan
način
smještamo
u
zaglavlje
HTML
dokumenta,
a
funkcije
pozivamo
u
tijelu dokumenta;
na
taj
način
razdvajamo
definicije
JavaScript
funkcija
od
sadržaja HTML dokumenta–
vanjski JavaScript
– omogućuje korištenje/pozivanje iste skripte u više
HTML dokumenata<script type="text/javascript" src="xxx.js"></script>
22.3.2012. 7Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
naredbe i kod
•
JavaScript naredba (eng. JavaScript statement)
–
naredba
upućena
izravno
web
pregledniku
koja
mu
kaže
što
treba raditi
–
npr. document.write("Hello
World");
–
“;”
– oznaka za kraj JavaScript naredbe; prema propisanom JavaScript standardu nije obavezna jer web preglednik kraj reda interpretira kao kraj
naredbe,
međutim
korištenje
oznake
“;”
omogućuje
upisivanje
više JavaScript naredbi u istom redu
–
JavaScript je osjetljiv na velika i mala slova
•
JavaScript kod (kraće samo JavaScript)
–
niz
JavaScript
naredbi
koje
web
preglednik
izvršava
redom
kako
su napisane
–
primjer
22.3.2012. 8Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
komentari
•
osnovna svrha komentara u JavaScript‐u
–
objašnjavanje JavaScript koda
–
spriječavanje izvršenja neke JavaScript naredbe ili bloka naredbi
•
jednolinijski JavaScript komentari
–
sintaksa: // ispis zaglavlja tipa <h1> document.write("<h1>Ovo je zaglavlje</h1>");
•
višelinijski JavaScript komentari
–
sintaksa: /* Sljedeća JavaScript naredba
ispisuje zaglavlje tipa <h1> */
document.write("<
Ovo je zaglavlje </h1>");
•
primjer
22.3.2012. 9Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
varijable
•
varijabla – opisno rečeno, “spremnik” za određenu informaciju/podatak ili vrijednost
•
primjer 1primjer 2
•
deklaracija varijabli u JavaScriptu–
var x;var ime;na
ovaj
su
način
deklarirane
varijable
nazvane
x
i
ime,
no
nije
im
pridružena nikakva vrijednost–
var x=5;var ime=“Iva”;na
ovaj
su
način
deklarirane
varijable
nazvane
x
i
ime;
varijabli
x
pridružena
je
numerička
vrijednost
5,
a
varijabli
ime
vrijednost
“Iva” koja je tipa string
22.3.2012. 10Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
operatori•
aritmetički operatori
–
+ (zbrajanje), ‐
(oduzimanje), * (množenje), / (dijeljenje), % (cjelobrojno dijeljenje), ++ (inkrement), ‐‐
(dekrement)
–
primjer
•
operatori pridruživanja
–
= (pridruživanje vrijednosti), +=, ‐=, *=, /=, %=
–
primjer
•
konkatenacija
–
operacija koja nastaje primjenom operatora zbrajanja (+) na varijable čije su vrijednosti tipa string
–
primjer
22.3.2012. 11Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
operatori
•
operatori uspoređivanja
–
== (jednako po vrijednosti), === (jednako po vrijednosti i tipu), != (različito), > (veće), < (manje), >= (veće ili jednako), <= (manje ili
jednako)
•
logički operatori
–
&& (logičko i; konjunkcija), || (logičko ili; disjunkcija) , ! (negacija)
•
primjer
22.3.2012. 12Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
objekti
•
JavaScript –
prototipno baziran skriptni jezik
•
prototipno programiranje – varijanta objektno orjentiranog programiranja koja
ne
podržava
koncept
klase,
a
nasljeđivanje
se
realizira
kloniranjem
postojećih objekata, tj. stvaranjem prototipova
•
JavaScript
funkcije
su
funkcije
prvog
reda
(first‐class
functions) ‐
funkcije mogu
biti
argumenti
drugih
funkcija,
mogu
se
pojavljivati
kao
vrijednosti
drugih funkcija, mogu se pridruživati varijablama...
22.3.2012. 13Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐ objekti•
objekt –
posebni tip podataka
–
JavaScript built‐in objekti: String, Date, Array,
Boolean, Math, RegExp
–
JavaScript omogućuje definiranje novih objekata
–
karakteriziran svojstvima i metodama
•
svojstva (eng. properties) – vrijednosti pridružene objektu
–
primjena na objekt: objekt.svojstvo
ispis:
document.write(objekt.svojstvo)
–
primjer: <script type="text/javascript"> var
txt="Hello World!";
document.write(txt.length); </script>
–
svojstvo
length
String
objekta
vraća
broj
znakova
koji
se
pojavljuju
u vrijednosti varijable txt: 12
22.3.2012.Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
14
JavaScript ‐
objekti
•
metode
(eng.
methods)
– aktivnosti
koje
se
mogu
primjenjivati
nad objektima
–
primjena na objekt: objekt.metoda()
ispis:
document.write(objekt.metoda())
–
primjer: <script type="text/javascript"> var
str="Hello world!";
document.write(str.toUpperCase()); </script>
–
metoda
toUpperCase()
primjenjena
na
String
objekt
vraća
vrijednost varijable str
napisanu velikim slovima: HELLO WORLD!
primjer
22.3.2012. 15Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript –
built‐in objekti
•
String
objekt
–
koristi se za manipuliranje tekstom–
svojstva
i
metode:
http://www.w3schools.com/jsref/jsref_obj_string.asp–
primjeri: http://www.w3schools.com/js/js_obj_string.asp
•
Date
objekt
–
koristi se za rad s datumima i vremenom–
svojstva i metode: http://www.w3schools.com/jsref/jsref_obj_date.asp
–
primjeri: http://www.w3schools.com/js/js_obj_date.asp•
Array
objekt
–
koristi se za rad s nizovima–
svojstva
i
metode:
http://www.w3schools.com/jsref/jsref_obj_array.asp–
primjeri: http://www.w3schools.com/js/js_obj_array.asp
22.3.2012. 16Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript –
built‐in objekti
•
Boolean objekt–
koristi se za pretvaranje nelogičke vrijednosti u logičku vrijednost (0 ili 1)
–
sv. i metode: http://www.w3schools.com/jsref/jsref_obj_boolean.asp–
primjeri: http://www.w3schools.com/js/js_obj_boolean.asp
•
Math objekt–
sv. i metode: http://www.w3schools.com/jsref/jsref_obj_math.asp
–
primjeri: http://www.w3schools.com/js/js_obj_math.asp
•
RegExp objekt–
koristi se za rad s regularnim izrazima
–
regularan izraz – objekt koji opisuje “uzorak znakova”–
sv. i metode: http://www.w3schools.com/jsref/jsref_obj_regexp.asp
–
primjeri: http://www.w3schools.com/js/js_obj_regexp.asp
22.3.2012. 17Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – funkcije
•
sintaksa: function ImeFunkcije(var1,var2,...,varN)
{
JavaScript kod
}
•
var1,var2,...,varN
– varijable
korištene
u
definiranju
pravila
koje
određuje djelovanje
funkcije,
tj.
u
JavaScript
kodu
zatvorenom
u
vitičastim
zagradama
•
{
‐
označava početak definicije pravila koje određuje djelovanje funkcije
•
}
‐
označava kraj definicije pravila koje određuje djelovanje funkcije
•
ključna riječ
function
mora biti napisana malim slovima
•
ime
funkcije
smije
sadržavati
i
velika
i
mala
slova
– oprez,
JavaScript
je osjetljiv na velika i mala slova
22.3.2012. 18Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – funkcije
•
dio
JavaScript
koda
zatvoren
u
vitičaste
zagrade
je
zapravo
definicija funkcije
koja
se
izvršava
pozivom
funkcije
ili
pomoću
događaja
(npr.
funkcija
se
izvršava
na
klik
miša);
na
ovaj
način
osiguravamo
da
se određeni
dio
JavaScript
koda
ne
izvršava
direktno
učitavanjem
html
dokumenta u web preglednik
•
funkcije možemo definirati ili u zaglavlju ili u tijelu stranice – definiranje u zaglavlju
stranice
se
preporučuje
jer
time
osiguravamo
da će
funkcija
zaista
biti
definirana
(tj.
da će
definicija
funkcije
biti
učitana)
prije
samog poziva funkcije
•
primjer
22.3.2012. 19Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – funkcije
•
return
– ako
funkcija
vraća
neku
izlaznu
vrijednost,
tu
vrijednost specificiramo pomoću ključne riječi return
–
primjer
•
lokalne
varijable
‐
varijablu
deklariranau
unutar
funkcije
možemo pozivati/koristiti
samo
unutar
te
funkcije,
tj.
van
te
funkcije
spomenuta
varijabla nije deklarirana
•
globalne
varijable
–
varijable
deklarirane
deklarirane
van
funkcije; možemo ih koristiti/pozivati u cijelom dokumentu
22.3.2012. 20Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
objekt window
•
objekt window – predstavlja otvoreni prozor web preglednika
http://www.w3schools.com/jsref/obj_window.asp
•
najvažnije metode:
–
window.open() i window.close() – otvaranje i zatvaranje novog prozora
–
focus() i blur() – “stavlja fokus”
na aktivni prozor
–
blur() – “skida fokus”
s aktivnog prozora
–
print() – ispisuje sadržaj aktivnog prozora
–
moveBy() – pomiče prozor u odnosu na njegovu trenutačnu poziciju
–
moveTo() ‐
pomiče prozor na određenu poziciju
22.3.2012. 21Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – dijalozi•
JavaScript koristi tri vrste dijaloga (eng. pop‐up box) :
–
alert
– koristimo
ga
ispis
informacije
koju
je
korisnik
zatražio;
nakon što
korisnik
primi/pročita
traženu
informaciju,
mora
pritisnuti
gumb
OK da bi zatvorio alert dijalog
alert(“tražena informacija.”)
–
confirm
‐
koristimo
ga
kad
želimo
da
korisnik
potvrdi
ili
prihvati ispisanu
informaciju,
tj.
kad
se
pojavi
dijalog
confirm
korisnik
mora
pritisnuti gumb OK ili Cancel da bi ga zatvorio
confirm(“informacija koja traži prihvaćanje/potvrdu.”)
–
prompt
‐
koristimo
ga
kad
želimo
da
korisnik
unese
neki
sadržaj
u
za to
predviđeno
polje
prije
nego
pristupi
web
stranici;
kad
se
pojavi
dijalog
prompt
korisnik
mora
pritisnuti
gumb
OK
ili
Cancel
da
bi pristupio zatraženoj web stranici
prompt(“neki tekst”, “podrazumijevana vrijednost”)
–
primjeri
22.3.2012. 22Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript –
kreiranje novog objekta
•
objekt – posebna vrsta podataka s određenim svojstvima (eng. properties) i metodama (eng. methods)
•
primjer:
–
objekt – osoba
–
svojstva –
vrijednosti pridružene objektu; za objekt osoba svojstva su npr. spol, boja očiju, boja kose, visina...
–
metode – aktivnosti koje se mogu provoditi nad objektom; za objekt osoba metode su npr. work(), sleep(), eat()...
•
novi objekt možemo kreirati na dva načina:
–
možemo izravno kreirati instancu objekta
–
možemo definirati uzorak (eng. template) za objekt te iz njega kreirati instance objekta
22.3.2012. 23Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript –
kreiranje novog objekta
•
izravno kreiranje instance objekta i dodavanje svojstava:
osobaObj=new Object(); osobaObj.ime=“Iva";
osobaObj.prezime=“Ivić"; osobaObj.dob=30;
osobaObj.bojaociju=“plava";
•
primjer
22.3.2012. 24Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
•
kreiranje uzorka za objekt osoba:
function osoba(ime,
prezime,
dob,
bojaociju) {this.ime=ime;
this.prezime=prezime; this.dob=dob;
this.bojaociju=bojaociju;}
•
kreiranje instance objekta osoba pomoću definiranog uzorka:
mojOtac=new osoba(“Ivo",
“Ivić",
50,
“smeđa");
mojaMajka=new osoba(“Iva",
“Ivić",
48,
“zelena");
•
primjer
JavaScript –
kreiranje novog objekta
22.3.2012. 25Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script –
petlje
•
for
petlja
– izvršava
određeni
dio
JavaScript
koda
onoliko
puta
koliko
je određeno/zadano uvjetom
for (var=pocetna_vrij;var<=zavrsna_vrij;var=var+inkrement)
{JavaScript kod koji se izvršava uvjetom zadani broj puta}
–
primjer
•
while petlja ‐
izvršava određeni dio JavaScript koda sve dok je zadani uvjet točan/istinit
while (var<=zavrsna_vrijednost)
{JavaScript kod koji se izvršava sve dok je var<=zavrsna_vrijednost}
–
primjer
22.3.2012. 26Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script –
petlje
•
do...while petlja
‐
varijanta while petlje
do{dio JavaScript koda}
while (var<=zavrsna_vrijednost);
–
specificirani
dio
koda
(tj.
dio
koda
u
vitičastim
zagradama)
izvrši
se jednom,
a
tada
se
njegovo
izvršavanje
ponavlja
sve
dok
je
zadani
uvjet
točan/istinit
–
primjer
22.3.2012. 27Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – uvjetna grananja
•
u JavaScript‐u koristimo sljedeća uvjetna granjanja:
–
If
‐
koristi
se
za
specifikaciju
dijela
JavaScript
koda
se
izvršava
samo ako je zadani uvjet ispunjen
if (uvjet)
{dio koda koji se izvršava ako je uvjet ispunjen}
–
If...else
‐
koristi
se
za
specifikaciju
dijela
koda
koji
se
izvršava
ako
je zadani
uvjet
ispunjen,
te
specifikaciju
dijela
koda
koji
se
izvršava
kad
zadani uvjet nije ispunjen
if (condition)
{dio koda koji se izvršava ako je uvjet ispunjen}
else
{dio koda koji se izvršava ako uvjet nije ispunjen}
22.3.2012. 28Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – uvjetna grananja
•
If...else if...else ‐
koristi se za specifikaciju dijela koda koji se izvršava kad niti jedan od zadanih uvjeta nije ispunjen
if (uvjet1)
{dio koda koji se izvršava ako je uvjet1 ispunjen}
else if (uvjet2)
{dio koda koji se izvršava ako je uvjet2 ispunjen}
else
{dio koda koji se izvršava ako niti
uvjet1 niti uvjet2 nisu ispunjeni}
•
primjer
22.3.2012. 29Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – “break” i “continue”
•
break
–
djeluje
tako
da
za
zadanu
vrijednost
prekida
petlju
te
nastavlja
s izvršavanjem JavaScript koda koji slijedi nakon petlje
•
continue ‐
djeluje tako da za zadanu vrijednost prekida petlju te nastavlja s izvršavanjem petlje za veće vrijednosti
•
primjer
22.3.2012. 30Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – uvjetna grananja
•
switch
– koristi
se
za
specificiranje
jednog
od
nekoliko
blokova
JavaScript koda koji se izvršava kad je ispunjen zadani uvjet
switch(n)
{case1:
blok koda koji se izvršava kad je case1=n
break;
case
2:
blok koda koji se izvršava kad je case2=n
break;
default:
blok koda koji se izvršava ako je n različito od case1 i case 2}
•
primjer
22.3.2012. 31Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – događaji
JavaScript događaj (eng. event)
•
aktivnost
korisnika
koju
JavaScript
može
prepoznati;
na
taj
način JavaScript omogućuje izradu dinamičkih web stranica
•
primjeri JavaScript događaja:
–
klik mišem: onClick
–
učitavanje web stranice: onLoad
–
prelazak
pokazivačem
miša
preko
dijela
web
stranice
(npr.
linka)
– onMouseOver
•
JavaScript
događaji često
se
koriste
u
kombinaciji
s
funkcijama
i osiguravaju
da
se
funkcija
neće
izvršiti
sve
dok
se
ne
realizira
JavaScript
događaj
–
npr.
pomoću
onClick()
događaja
postižemo
da
se
određena funkcija izvrši svaki puta kad koristik izvrši klik mišem
22.3.2012. 32Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
Java Script – događaji
•
onLoad
‐
realizira se kad korisnik pristupa web stranici
•
onUnLoad
– realizira se kad korisnik napušta web stranicu
•
onClick – realizira se kad korisnik izvrši klik mišem
•
onMouseOver
–
realizira
se
dok
korisnik
pokazivačem
miša
prelazi
preko elementa web stranice
•
onMouseOut – realizira se kad je korisnik pokazivačem miša prešao preko elementa web stranice
•
primjer
•
onFocus, onBlur, onChange, onSubmit
– događaji koji se najčešće koriste pri validaciji formi
•
primjer
22.3.2012. 33Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript –
try...catch•
try...catch
– koristi
se
za
testiranje
bloka
JavaScript
koda
na
postojanje
grešaka
try
{JavaScript kod koji želimo testirati na postojanje grešaka}
catch(err)
{JavaScript kod koji se izvršava u slučaju postojanja greške}
–
try{...} – sadrži dio JavaScript koda kojeg želimo testirati na greške
–
catch{...}
– sadrži JavaScript kod koji se izvršava ukoliko blok JavaScript koda u try{...} sadrži grešku
–
primjer
•
throw
– koristi
se
u
kombinaciji
s
try...catch
naredbama
i
omogućuje definiranje i prijavljivanje preciznog opisa greške
–
primjer
22.3.2012. 34Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek
JavaScript ‐
literatura
1.
http://www.w3schools.com/js
2.
JavaScript – materijali prof. Esserta
22.3.2012. 35Odjel za matematiku, Sveučilište
J.J
Strossmayera, Osijek