wp predavanje js
DESCRIPTION
World Wide Web (Web) je svjetska mreža računala s izvorima (engl. resources) digitalne informacije. S obzirom na raznolikost digitalne informacije: tekst, slika, zvuk, video, program i dr. govorimo općenito o izvoru informacije ili WEB dokumentu. WEB programiranje se oslanja na tri mehanizma koja čine ove izvore dostupnima najširoj svjetskoj javnosti: 1. Jedinstvena shema imena za traženje (lociranje) izvora na mreži. 2. Protokoli za pristup informaciji preko WEB-a, kao što je npr. HTTP protokol. Protokoli su skup standardizirane informacije za prijenos digitalnog sadržaja preko mreže. 3. Hipertekst (engl. Hypertext) za jednostavnu navigaciju između informacijskih izvora, kao što je na primjer HTML (hypertext markup language). Svaki izvor informacije na WEB-u (HTML ili XML dokument, slika, video, program i sl.) ima jednoznačnu adresu koja se dekodira preko URI-a (Universal Resource Identifier). URI se sastoji od tri dijela: 1. Protokola pristupa izvoru (npr. http, ftp, mailto i sl.) 2. Imena stroja na kojem se izvor informacije nalazi (npr. www.fsb.hr). 3. Punog imena izvora zadanog stazom (engl. path). URI ima različite uloge: povezivanje mjesta unutar istog dokumenta, povezivanje različitih dokumenata, dohvaćenje slika, objekatTRANSCRIPT
Web programiranje i primjene
JavaScript
Šesto i sedmo predavanje13. i 20. travnja 2010.
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 ECMA Organization
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đivanja 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 preglednig krajnjeg korisnika – tako
omogućuje da taj krajnji korisnik vidi dokument kreiran upravo za web preglednik 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 skriptni
jezik• </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 u HTML dokument
– 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"> <!-- document.write("Hello World!"); //--> </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
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 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>
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: 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 naredba ispisuje zaglavlje tipa <h1> */ document.write("< Ovo je zaglavlje </h1>");
• primjer: http://www.w3schools.com/js/js_comments.asp
JavaScript - varijable
• varijabla – opisno rečeno, “spremnik” za određenu informaciju/podatak ili vrijednost
• 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 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
• primjeri: 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
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
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 u vrijednosti varijable txt: 12
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!
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
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
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
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: http://www.w3schools.com/js/js_functions.asp
Java Script – funkcije
• return – ako funkcija vraća neku izlaznu vrijednost, tu vrijednost specificiramo pomoću ključne riječi return– primjer: http://www.w3schools.com/js/js_functions.asp
• 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
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
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: 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
JavaScript – kreiranje novog 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
• 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
JavaScript – kreiranje novog objekta
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}
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}
• primjeri: http://www.w3schools.com/js/js_if_else.asp
Java Script – uvjetna grananja
• switch – koristi se za specificiranje jednog od nekoliko blokova JavaScript koda koji se izvršava kad je ispunjen zadani uvjetswitch(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
Java Script – petlje• for petlja – izvršava određeni dio JavaScript koda onoliko puta koliko je
određeno/zadano uvjetomfor (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 uvjet toč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
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: http://www.w3schools.com/js/tryit.asp?filename=tryjs_dowhile
Java Script – petlje
• 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 svaki element niza
– primjer: 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 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: 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
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
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:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_function1
• onFocus, onBlur, onChange, onSubmit – događaji koji se najčešće koriste pri validaciji formi
• primjer: 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 JavaScript
koda 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ćuje definiranje i prijavljivanje preciznog opisa greške– primjer:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_throw
JavaScript - literatura
1. http://www.w3schools.com/js
2. JavaScript – materijali prof. Esserta