Web programiranje i primjene JavaScript - · PDF fileprototipno programiranje –varijanta objektno orjentiranog programiranja koja ... Java Script –funkcije

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


J.J


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


J.J


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


J.J



•

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


J.J


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


•

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


J.J


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


•

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>


J.J


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

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


J.J


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


J.J


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

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


J.J


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

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

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


J.J


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


J.J


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

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


J.J


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


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


J.J


http://www.w3schools.com/jsref/dom_obj_document.asp

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


J.J


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

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


J.J


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


J.J



•

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


J.J


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


•

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


J.J


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


J.J


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


J.J


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


J.J


JavaScript –


•

izravno kreiranje instance objekta i dodavanje svojstava:

osobaObj=new Object(); osobaObj.ime=“Iva";

osobaObj.prezime=“Ivić"; osobaObj.dob=30;

osobaObj.bojaociju=“plava";

•

primjer


J.J


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

JavaScript –



J.J


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

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


J.J


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

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


J.J


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

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}


J.J



•

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


J.J


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

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


J.J


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


•

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


J.J


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


J.J


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


J.J


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


J.J


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


J.J


http://www.w3schools.com/js

Documents

Web programiranje i primjene JavaScript - · PDF fileprototipno programiranje –varijanta objektno orjentiranog programiranja koja ... Java Script –funkcije