Download pdf - DocumentJs

Web programiranje i primjene

JavaScript

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

– najpoznatiji 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, Safari)• povijest

– prvu verziju JavaScripta izumio je Brendan Eich (Netscape);– od 1996. svi Microsoftovi i Netscapeovi web preglednici podržavaju

JavaScript• ECMAScript

– službeno ime JavaScripta; za razvoj i upravljanje zadužena je ECMAOrganization



JavaScriptŠto sve možemo s JavaScriptom?

• JavaScript je skriptni jezik koji HTML dizajnerima (koji nisu programeri)daje mogućnost pisanja jednostavnih programa i njihovog ugrađivanjaizravno u HTML dokument

• JavaScript omogućuje dodavanje dinamičkog teksta HTML dokumentu(npr. "<h1>" + name + "</h1>" – u HTML dokumentu ispisuje vrijednostvarijable name kao zaglavlje tipa <h1>)

• JavaScript mođe reagirati na događaje – može se podesiti tako da jeizvršavanje skripte povezano s nekim događajem (npr. učitavanjemstranice – onLoad, klikom miša – onClick)

• JavaScript može čitati i mijenjati sadržaj HTML elementa• JavaScript može prepoznavati web preglednig krajnjeg korisnika – tako

omogućuje da taj krajnji korisnik vidi dokument kreiran upravo za webpreglednik koji on koristi



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 skriptnijezik

• </script> - označava kraj JavaScript-a



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 uHTML dokument

– http://www.w3schools.com/js/js_howto.asp



http://www.w3schools.com/js/js_howto.asp�

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

</script></body>

</html>• kose crte “//” su simbol za JavaScript komentar – one ovdje sprečavaju

izvršavanje tag-a “-->”• primjer: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text



http://www.w3schools.com/js/tryit.asp?filename=tryjs_text�

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 ili da je izvršavanje JavaScripta povezanos nekim događajem (npr. klikom miša, klikom na gumb i sl.) koristimofunkcije – JavaScript s definicijom funkcije na standardan načinsmještamo u zaglavlje HTML dokumenta, a funkcije pozivamo u tijeludokumenta; na taj način razdvajamo definicije JavaScript funkcija odsadržaja HTML dokumenta

– vanjski JavaScript – omogućuje korištenje/pozivanje iste skripte u višeHTML dokumenata

<script type="text/javascript" src="xxx.js"></script>



http://www.w3schools.com/js/js_whereto.asp�

JavaScript - naredbe i kod

• JavaScript naredba (eng. JavaScript statement)

– naredba upućena izravno web pregledniku koja mu kaže što trebaraditi

– npr. document.write("Hello World");

– “;” – oznaka za kraj JavaScript naredbe; prema propisanom JavaScriptstandardu nije obavezna jer web preglednik kraj reda interpretira kaokraj naredbe, međutim korištenje oznake “;” omogućuje upisivanjeviš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 sunapisane

– primjer: http://www.w3schools.com/js/js_statements.asp



http://www.w3schools.com/js/js_statements.asp�

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 naredbaispisuje zaglavlje tipa <h1>

*/document.write("< Ovo je zaglavlje </h1>");

• primjer: http://www.w3schools.com/js/js_comments.asp



http://www.w3schools.com/js/js_comments.asp�

JavaScript - varijable

• varijabla – opisno rečeno, “spremnik” za određenu informaciju/podatak ilivrijednost

• primjer:– http://www.w3schools.com/js/tryit.asp?filename=tryjs_variable– http://www.w3schools.com/js/tryit.asp?filename=tryjs_variables

• deklaracija varijabli u JavaScriptu– var x;

var ime;- na ovaj su način deklarirane varijable nazvane x i ime, no nije impridružena nikakva vrijednost

– var x=5;var ime=“Iva”;- na ovaj su način deklarirane varijable nazvane x i ime; varijabli xpridružena je numerička vrijednost 5, a varijabli ime vrijednost “Iva”koja je tipa string

• primjeri: http://www.w3schools.com/js/js_variables.asp



http://www.w3schools.com/js/tryit.asp?filename=tryjs_variable�

http://www.w3schools.com/js/tryit.asp?filename=tryjs_variables�

http://www.w3schools.com/js/js_variables.asp�

JavaScript - operatori• aritmetički operatori

– + (zbrajanje), - (oduzimanje), * (množenje), / (dijeljenje), % (cjelobrojno dijeljenje), ++ (inkrement), -- (dekrement)

– primjer: http://www.w3schools.com/js/js_operators.asp

• operatori pridruživanja– = (pridruživanje vrijednosti), +=, -=, *=, /=, %=– primjer: http://www.w3schools.com/js/js_operators.asp

• konkatenacija– operacija koja nastaje primjenom operatora zbrajanja (+) na varijable

čije su vrijednosti tipa string– primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_variables



http://www.w3schools.com/js/js_operators.asp�

http://www.w3schools.com/js/js_operators.asp�

http://www.w3schools.com/js/tryit.asp?filename=tryjs_variables�

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: http://www.w3schools.com/js/js_comparisons.asp



http://www.w3schools.com/js/js_comparisons.asp�

JavaScript - objekti• JavaScript – objektno orjentiran programski jezik koji omogućuje

definiranje vlastitih objekata

• objekt – posebna vrsta 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 uvrijednosti varijable txt: 12



JavaScript - objekti

• metode (eng. methods) – aktivnosti koje se mogu primjenjivati nadobjektima

– 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 vrijednostvarijable str napisanu velikim slovima: HELLO WORLD!



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



http://www.w3schools.com/jsref/jsref_obj_string.asp�

http://www.w3schools.com/js/js_obj_string.asp�

http://www.w3schools.com/js/js_obj_date.asp�

http://www.w3schools.com/jsref/jsref_obj_date.asp�

http://www.w3schools.com/js/js_obj_date.asp�

http://www.w3schools.com/jsref/jsref_obj_array.asp�

http://www.w3schools.com/js/js_obj_array.asp�

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



http://www.w3schools.com/jsref/jsref_obj_boolean.asp�

http://www.w3schools.com/js/js_obj_boolean.asp�

http://www.w3schools.com/jsref/jsref_obj_math.asp�

http://www.w3schools.com/js/js_obj_math.asp�

http://www.w3schools.com/jsref/jsref_obj_regexp.asp�

http://www.w3schools.com/js/js_obj_regexp.asp�

Java Script – funkcije

• sintaksa: function ImeFunkcije(var1,var2,...,varN)

{

JavaScript kod

}

• var1,var2,...,varN – varijable korištene u definiranju pravila koje određujedjelovanje funkcije, tj. u JavaScript kodu zatvorenom u vitičastimzagradama

• { - 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 jeosjetljiv na velika i mala slova




• dio JavaScript koda zatvoren u vitičaste zagrade je zapravo definicijafunkcije 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 seodređeni dio JavaScript koda ne izvršava direktno učitavanjem htmldokumenta u web preglednik

• funkcije možemo definirati ili u zaglavlju ili u tijelu stranice – definiranje uzaglavlju stranice se preporučuje jer time osiguravamo da će funkcija zaistabiti definirana (tj. da će definicija funkcije biti učitana) prije samog pozivafunkcije

• primjer: http://www.w3schools.com/js/js_functions.asp



http://www.w3schools.com/js/js_functions.asp�


• return – ako funkcija vraća neku izlaznu vrijednost, tu vrijednostspecificiramo pomoću ključne riječi return

– primjer: http://www.w3schools.com/js/js_functions.asp

• lokalne varijable - varijablu deklariranau unutar funkcije možemopozivati/koristiti samo unutar te funkcije, tj. van te funkcije spomenutavarijabla nije deklarirana

• globalne varijable – varijable deklarirane deklarirane van funkcije;možemo ih koristiti/pozivati u cijelom dokumentu



http://www.w3schools.com/js/js_functions.asp�

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



http://www.w3schools.com/jsref/obj_window.asp�

Java Script – dijalozi• JavaScript koristi tri vrste dijaloga (eng. pop-up box) :

– alert – koristimo ga ispis informacije koju je korisnik zatražio; nakon štokorisnik primi/pročita traženu informaciju, mora pritisnuti gumb OK dabi zatvorio alert dijalog

alert(“tražena informacija.”)

– confirm - koristimo ga kad želimo da korisnik potvrdi ili prihvatiispisanu informaciju, tj. kad se pojavi dijalog confirm korisnik morapritisnuti 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 topredviđeno polje prije nego pristupi web stranici; kad se pojavi dijalogprompt korisnik mora pritisnuti gumb OK ili Cancel da bi pristupiozatraženoj web stranici

prompt(“neki tekst”, “podrazumijevana vrijednost”)

– primjeri: http://www.w3schools.com/js/js_popup.asp



http://www.w3schools.com/js/js_popup.asp�

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




• izravno kreiranje instance objekta i dodavanje svojstava:

osobaObj=new Object();osobaObj.ime=“Iva";osobaObj.prezime=“Ivić";objektObj.dob=30;objektObj.bojaociju=“plava";

• primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object1



http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object1�

• 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:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object2




http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object2�

Java Script – uvjetna grananja

• u JavaScript-u koristimo sljedeća uvjetna granjanja:

– If - koristi se za specifikaciju dijela JavaScript koda se izvršava samoako 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 jezadani uvjet ispunjen, te specifikaciju dijela koda koji se izvršava kadzadani 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}




• If...else if...else - koristi se za specifikaciju dijela koda koji se izvršava kadniti 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}

• primjeri: http://www.w3schools.com/js/js_if_else.asp



http://www.w3schools.com/js/js_if_else.asp�


• switch – koristi se za specificiranje jednog od nekoliko blokova JavaScriptkoda 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: http://www.w3schools.com/js/js_switch.asp



http://www.w3schools.com/js/js_switch.asp�

Java Script – petlje

• for petlja – izvršava određeni dio JavaScript koda onoliko puta koliko jeodređeno/zadano uvjetom

for (var=pocetna_vrij;var<=zavrsna_vrij;var=var+inkrement)

{JavaScript kod koji se izvršava uvjetom zadani broj puta}

– primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_fornext

• while petlja - izvršava određeni dio JavaScript koda sve dok je zadani uvjettočan/istinit

while (var<=zavrsna_vrijednost)

{JavaScript kod koji se izvršava sve dok je var<=zavrsna_vrijednost}

– primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_while



http://www.w3schools.com/js/tryit.asp?filename=tryjs_fornext�

http://www.w3schools.com/js/tryit.asp?filename=tryjs_fornext�

http://www.w3schools.com/js/tryit.asp?filename=tryjs_while�


• 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 sejednom, a tada se njegovo izvršavanje ponavlja sve dok je zadani uvjettočan/istinit

– primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_dowhile



http://www.w3schools.com/js/tryit.asp?filename=tryjs_dowhile�


• for...in petlja

– koristi se za rad s elementima niza

for(ime_varijable in ime_objekta)

{JavaScript kod koji se izvršava};

– kod u vitičastim zagradama izvršava se točno jedanput za svakielement niza

– primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_array_for_in



http://www.w3schools.com/js/tryit.asp?filename=tryjs_array_for_in�

Java Script – “break” i “continue”

• break – djeluje tako da za zadanu vrijednost prekida petlju te nastavlja sizvršavanjem JavaScript koda koji slijedi nakon petlje

• continue - djeluje tako da za zadanu vrijednost prekida petlju te nastavlja sizvršavanjem petlje za veće vrijednosti

• primjer: http://www.w3schools.com/js/js_break.asp



http://www.w3schools.com/js/js_break.asp�

Java Script – događaji

JavaScript događaj (eng. event)

• aktivnost korisnika koju JavaScript može prepoznati; na taj način JavaScriptomoguć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 iosiguravaju da se funkcija neće izvršiti sve dok se ne realizira JavaScriptdogađaj – npr. pomoću onClick() događaja postižemo da se određenafunkcija izvrši svaki puta kad koristik izvrši klik mišem



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 prekoelementa web stranice

• onMouseOut – realizira se kad je korisnik pokazivačem miša prešao prekoelementa web stranice

• primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_function1

• onFocus, onBlur, onChange, onSubmit – događaji koji se najčešće koristepri validaciji formi

• primjer: http://www.w3schools.com/jsref/dom_obj_event.asp



http://www.w3schools.com/js/tryit.asp?filename=tryjs_function1�

http://www.w3schools.com/jsref/dom_obj_event.asp�

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 JavaScriptkoda u try{...} sadrži grešku

– primjer: http://www.w3schools.com/js/js_try_catch.asp

• throw – koristi se u kombinaciji s try...catch naredbama i omogućujedefiniranje i prijavljivanje preciznog opisa greške

– primjer:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_throw



http://www.w3schools.com/js/js_try_catch.asp�

http://www.w3schools.com/js/tryit.asp?filename=tryjs_throw�

JavaScript - literatura

1. http://www.w3schools.com/js

2. JavaScript – materijali prof. Esserta



http://www.w3schools.com/js�