osnove javascript-a - racunarstvo550.xyz. semestar/programiranje za internet... · funkcije su...

15
PROGRAMIRANJE ZA INTERNET Upute za laboratorijske vježbe (izradio: Marin Bugarić) OsnoveJavaScript-a Lab. vježba 7

Upload: others

Post on 03-Sep-2019

18 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

PROGRAMIRANJE ZA INTERNET

Upute za laboratorijske vježbe (izradio: Marin Bugarić)

Osnove JavaScript-a

Lab. vježba

7

Page 2: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

P R O G R A M I R A N J E Z A I N T E R N E T

1

Općenito

avaScript je kompaktni, objektno-orijentirani skriptni jezik za razvoj Internet aplikacija. JavaScript je u posljednjih nekoliko godina postao jedan od najraširenijih programskih jezika općenito.

JavaScript se izvodi na lokalnom računalu, a ne na serveru. Iz tog razloga, moguće je vidjeti Javascript kod stranice koju smo otvorili. Za razliku od JavaScripta, jezici poput PHP-a ili ASP.NET-a se izvode na serveru.

JavaScript i Java iako imaju sličnu sintaksu, dva su različita programska jezika i potrebno ih je razlikovati.

JavaScript program može upravljati appletima uključenim u HTML dokument i razmjenjivati s njima podatke.

JavaScript i Web stranice

JavaScript možemo učitati u HTML kod na više načina:

Unutar HTML dokumenta unutar <script> taga:

<script> naredbu možete smjestiti u <head> ili u <body> HTML dokumenta.

Jedan HTML dokument može sadržavati više nepreklapajućih parova <script >i</script > oznaka. Ove se skripte izvršavaju redom kako su navedene u dokumentu, ali ipak sve čine dio jednog JavaScript programa, što znači da su sve funkcije i varijable navedene u jednoj skripti dostupne svi ostalim skriptama koje slijede u dokumentu.

Pozivom iz vanjske datoteke navedene sa src svojstvom <script> naredbe

Od JavaScript 1.1 inačice <script> oznaka podržava src atribut. Vrijednost ovog atributa određuje URL JavaScript datoteke, na primjer:

<script src="../../javascript/util.js"></script>

JavaScript datoteka je čisti JavaScript program bez <script> oznaka.

J L O K A L N O

I Z V O Đ E N J E

J A V A S C R I P T

V S . J A V A

U Č I T A V A N J E

J A V A S C R I P T A

V A N J S K A

D A T O T E K A

Page 3: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

2

Ovaj način uključivanja JavaScript programa u HTML kod pojednostavljuje HTML dokument.

Od Navigatora 4 i Internet Explorera 4, src atribut <script> naredbe se nadopunjuje ARCHIVE atributom. ARCHIVE definira JAR (Java archive) datoteku koja sadrži više sažetih JavaScript datoteka koje vaš program koristi. Na primjer:

<script archive="utils.jar" src="animation.js"></script>

u upravljaču događaja (event handler), definiranom kao vrijednost atributa HTML objekta

JavaScript kod unutar <script> naredbe izvršava se samo jednom, prilikom učitavanja HTML dokumenta u pretraživač. Program koji koristi samo ovu vrstu statičkih skripti ne može dinamički odgovarati korisniku. Događaji (events) su pojave koje se javljaju kao odraz pojedinih korisnikovih radnji. Na primjer, pritisak na dugme odabira u formi je jedan događaj:

<input type="button" value="izracun" onclick="zbroji(this.form)">

Kao vrijednost onClick atributa možete navesti bilo koju JavaScript naredbu ili više njih odvojenih

JavaScript se izvodi liniju po liniju, i ukoliko dođe do pogreške, zaustavlja se izvođenje koda.

Stariji pretraživači koji ne podržavaju JavaScript, ignorirati će početnu i krajnju oznaku <script>. Da se na vašoj stranici ne prikaže JavaScript kod, umetnite čitav JavaScript program između oznaka komentara, i pred krajnju oznaku komentara umetnite dvostruku kosu crtu (//) čime ćete označiti liniju komentara:

<script>

<!-- Pocetaak skrivanja JavaScript naredbi za stare pretraivac

// Kraj skrivanja. -->

</script>

G R E Š K E U

K O D U

S K R I V A N J E

S K R I P T I

U N U T A R

O Z N A K A

K O M E N T A R A

Page 4: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

3

Sintaksa Javascript-a

JavaScript prepoznaje sljedeće vrste varijabli:

brojeve, kao što su 42 ili 3.14159

logičke (Boolean) vrijednosti: true ili false

stringove, "Ivica !!"

null, posebna riječ, koja se odnosi na null vrijednost

Kod JavaScript jezika vrsta varijabli nije strogo određena. Kod deklariranja varijabli nije potrebno strogo odrediti vrstu podataka, a ona se može promjeniti u toku rada s tom varijablom.

Primjer: Definiramo varijablu

var podatak=42;

a kasnije joj možemo pridružiti neku drugu vrijednost izrazom:

podatak="Alo ekipa !";

JavaScript nam neće javiti poruku greške.

Varijable su spremnici za neke vrijednosti. Varijablama dodjeljujemo određeno ime. Mogu biti lokalne i globalne.

1. Lokalne su one koje možemo koristiti samo u tekućoj funkciji, a deklariramo ih na sljedeći način:

var total=0

2. Globalne su one koje možemo koristiti bilo gdje u cijelom programu, a deklariramo ih na sljedeći način:

total=0

Izraz je ispravan niz konstanti, varijabli, operatora i izraza koji daje jednu vrijednost, koja može biti broj, niz slova ili logička varijabla. JavaScript ima sljedeće vrste izraza:

aritmetičke - koji daju za rezultat broj (212, 3.14,10e2) slovne nizove - koji daju za rezultat niz slova ("Ivica", "232") logičke - koji daju za rezultat true ili false

V A R I J A B L E

J A V A S C R I P T

I Z R A Z I I

O P E R A T O R I

Page 5: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

4

Pogledajmo što znače skraćeni operatori pridruživanja: x += y znači x = x + y x -= y znači x = x - y x *= y znači x = x * y x /= y znači x = x / y x %= y znači x = x % y

Aritmetički operatori uzimaju brojčane vrijednosti i vraćaju jedinstvenu brojčanu vrijednost. Standardni aritmetički operatori su:

zbrajanje (+)

oduzimanje (-)

množenje (*)

dijeljenje (/)

Modulus nam daje ostatak cjelobrojnog dijeljenja. Koristi na sljedeći način:

var1 % var2

pa je tako:

12%5=2

Inkrement (++) se koristi na sljedeći način:

var++ ili ++var

Npr. ukoliko je x=3, tada naredba:

y=x++

povećava x na 4, te postavlja y na 3. Ako je x=3, tada naredba:

y=++x

povećava x na 4, te postavlja y na 4..

Dekrement (--) se koristi na sljedeći način:

var -- ili –var

Za njega vrijedi isto što i za inkrement.

Negacija (-) se koristi na sljedeći način:

x=-x

A R I T M E T I Č K I

O P E R A T O R I

M O D U L U S

I N K R E M E N T

D E K R E M E N T

N E G A C I J A

Page 6: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

5

Taj izraz negira vrijednost varijable x.

Postoji cijeli niz operatora sa binarnim brojevima, koje nećemo posebno promatrati.

Logički operatori uzimaju logičke vrijednosti (true ili false) i vraćaju logičku vrijednost. Koriste se na sljedeći način:

i (&&) izraz1 && izraz2

ili (II) izraz1 II izraz2

ne (!) !izraz

Koristimo klasične operatore usporedbe:

== jednako

> veće od

< manje od

>= veće ili jednako

<= manje ili jednako

!= nije jednako

Sa nizovima slova koristimo operatore uspoređivanja, te operator + koji spaja dvije varijable niza slova.

Primjer:

"Iv"+"ica"

vraća "Ivica"

Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript procedura, tj. skup naredbi koje izvršavaju određenu radnju.

Definicija funkcije se sastoji od ključne riječi function, koju slijede:

ime funkcije

lista argumenata funkcije, u zagradama rastavljenih zarezom

JavaScript naredbe koje definiraju funkciju, između {} zagrada

L O G I Č K I

O P E R A T O R I

O P E R A T O R I

U S P O R E D B E

O P E R A T O R I

S A

S T R I N G O V I M A

F U N K C I J E I

M E T O D E

Page 7: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

6

Najčešće se funkcije definiraju u <head> naredbi HTML dokumenta tako da se učitaju prve.

Primjer funkcije koja dodaje teskt upisan kao paragraf na kraj HTML dokumenta: function finIspis(string) {

document.write("<p>" + string + "</p> ");

}

Funkcija se izvršava tako da je pozovemo s njezinim imenom i argumentima (ukoliko ih prima)

<script>

finIspis("Ispii fino ovaj tekst.")

</script>

Funkcija može biti i bez argumenata, tada u zagradama ne pišemo ništa.

JavaScript jezik ima sljedeće ugrađene objekte:

1. String objekt

2. Math objekt

3. Date objekt

4. Array objekt

Kod pridodavanja niza znakova varijabli ili svojstvu stvara se string objekt.

mojtekst = "Alo, ekipa!";

Gornji izraz stvara string objekt imena mojtekst.

Ugrađeni Math objekt ima svojstva za rad sa matematičkim funkcijama i konstantama. Npr. izraz Math.Pi definira objekt Math sa svojstvom PI daje vrijednost konstante PI. Slično imamo i za: Math.sin(1.56)što nam daje vrijednost sin od 1.56 radijana.

JavaScript nema vrstu varijable datum, pa za rad sa vremenskim varijablama koristimo date objekt. Za stvaranje date objekta imamo:

imeVarijable = new Date(parametri)

Npr.

Bozic15 = new Date("December 25, 2015");

K O R I Š T E N J E

U G R A Đ E N I H

O B J E K A T A

Page 8: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

7

Uvjetne naredbe

Izgled if naredbe kod JavaScripta:

if (uvjet)

{

naredbe1

}

[else

{

naredbe2

}]

Naredbe između [ ] zagrada (else) nisu obvezne. Ako želimo izvršiti više naredbi ukoliko je zadovoljen if uvjet pišemo ih između { } zagrada.

Naredbe petlje

For petlja

for ([pocetni izraz;][uvjet;] [izraz povecavanja])

{

naredbe

}

While naredba

while (uvjet)

{

naredbe

}

Kad uvjet postane false tada prestaje izvođenje naredbi unutar petlje i prelazi se na izvođenje naredbi nakon petlje.

Primjer beskonačne petlje:

while (true)

{

alert("Alo, ekipa !");

}

Naredba break prekida tekuću while ili for petlju i nastavlja izvođenje programa na naredbe nakon petlje.

Naredba continue prekida izvršenje bloka naredbi u while ili for petlji i nastavlja izvođenje petlje sa novom iteracijom.

U V J E T N E

N A R E D B E

N A R E D B E

P E T L J E

B R E A K

N A R E D B A

C O N T I N U E

N A R E D B A

Page 9: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

8

Kad učitamo stranicu u pretraživač, on stvori određen broj objekata s obzirom na sadržaj stranice. Objekti koje svaka stranica ima su:

window objekt naviše razine, sadrži svojstva koja se odnose na čitav prozor

location sadrži svosjtva tekuće URL adrese

history sadrži svojstva URL-ova koje je korisnik prije posjetio

document sadrži svojstva sadržaja tekućeg dokumenta, kao što su naziv, pozadinska

boja, i formular

Document je koristan objekt zbog toga što s write i writeln metodama može generirati HTML kod, pa tako imamo:

document.write("Moje ime je Ivica.")

što daje izlaz:

Moje ime je Ivica.

Ukoliko definiramo nekoliko tekstualnih elemenata unutar forme:

<form name="iskaznica">

<input type="text " name="ime" size=20>

<input type="text" name="dob" size=3>

<form>

ovi elementi se zrcale u JavaScript objekte: document.iskaznica.ime i document.iskaznica.dob koje možemo koristiti bilo gdje, nakon što je formular definiran. Možemo ih ispisati u skripti, koju pišemo nakon što je formular definiran:

<script>

document.write(document.iskaznica.ime);

document.write(document.iskaznica.dob);

</script>

pretraživač čita HTML kod u smjeru od vrha dokumenta prema dnu, pa kod pisanja skripti moramo o tome voditi računa.

O B J E K T I U

P R E T R A Ž I V A Č U

D O H V A T H T M L

E L E M E N A T A

Page 10: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

9

Pretraživač stvara form objekt za svaki formular na stranici.

Primjer:

<form name="mojformular">

<input type = "text" name="iznos" size=20 onchange="...">

...

</form>

Sad imamo JavaScript objekt pod imenom mojFormular koji se bazira na ovom formularu. Formular ima svojstvo bazirano na tekst objektu kojem pristupamo sa

document.mojFormular.iznos

a vrijednost tog polja možemo dobiti sa:

document.mojFormular.iznos.value

Isto tako možemo pristupati i ostalim elementima formulara: poljima sa tekstom, radio dugmadi ...

Document objekt također ima i upravljače događaja onLoad i onUnload za izvršavanje funkcija kad korisnik učitava ili kad izlazi sa stranice. Window objekt je "roditelj objekt" za sve ostale objekte u pretraživaču. Metode koje koristimo sa window objektom:

open i close otvaraju i zatvaraju prozore pretraživača alert pokazuje nam prozor sa upozorenjem confirm pokazuje nam prozor sa tekstom i traži potvrdu

JavaScript jezik ima u sebi ugrađene funkcije za komunikaciju s korisnikom:

alert - obavještava korisnika o nečemu. npr.

alert("U詴ali ste stranicu");

u trenutku učitavanja će otvoriti informacijski prozor s upisanim tekstom. Da bi zatvorio prozor korisnik mora pritisnuti dugme "OK". Koristi se kada želimo korisnika obavijestiti o nečemu.

prompt - traži od korisnika da ukuca nekakav tekst. npr.

var ime = prompt("Molimo upisite svoje ime","")

otvara prozor sa danim tekstom i praznim tekst poljem za upis podataka. Prvi argument ove funkcije je tekst koji će se ispisati u prozoru, a drugu tekst koji će biti upisan u tekst polju ka predefinirani tekst. Kada korisnik pritisne dugme

K O M U N I K A C I J A

S A

K O R I S N I K O M

Page 11: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

10

"ok" varijabla ime postavlja se na vrijednost upisanu u tekst polje. Koristi se kada nam je potrebna neka informacija od korisnika.

Prozor otvaramo open metodom. Sljedeća naredba otvara prozor imena msgWindow koji prikazuje HTML datoteku graf1.html:

mojProzor=window.open("DatumSat.html")

Kod otvaranja prozora moguće je postaviti atribute kao što su širina i dužina prozora, da li prozor sadrži traku s alatima (toolbar), polje sa lokacijom (addressbar) ili traku za pomicanje (scrollbar).

Svaka od sljedećih naredbi zatvara naš prozor:

window.close()

self.close()

close()

Sljedeća naredba zatvara prozor nazvan mojProzor:

mojProzor.close()

Okvir je posebna vrsta prozora koji može prikazati više nezavisnih okvira na jednom ekranu, svaki sa svojom URL adresom. Kao što smo prije spomenuli, ime koje koristimo kod pristupa prozoru ovisi o tome na koji način pristupamo prozoru. Svojstvima prozora, metodama i upravljačima događaja pristupamo na jedan o sljedećih načina:

-self ili window - odnose se na naš prozor (radni)

window.close() ili self.close()

-top ili parent - koriste se umjesto imena prozora. Top se odnosi na glavni pretraživač prozor, a parent se odnosi na prozor koji sadrži naš okvir. Npr. izraz parent.okvir2.document.bgColor="white" mijenja pozadinsku boju okvira koji se zove okvir2.

ime prozora - dodjeljuje se prozoru kod otvaranja. npr. mojProzor.close() zatvara prozor koji se zove mojProzor.

O T V A R A N J E I

Z A T V A R A N J E

P R O Z O R A

P R I S T U P A N J E

P R O Z O R I M A I

O K V I R I M A

Page 12: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

11

Naredbe za otvaranje prozora ima oblik:

window.open(url, name,features, replace)

i vraća referencu na window objekt, koji može biti novo kreirani ili već postojeći, ovisno o argumentu name.

Primjer pristupanja prozoru preko hipertekstualne veze:

<input type="button" value="otvori prozor2"

onclick="mojprozor=window.open('','prozor2','resizable=no,

width=200,height=200')">

<a href="datoteka2.html" target="prozor2"> ucititaj datoteku u

prozor2..</a>

<input type="button" value="zatvori prozor2"

onclick="mojprozor.close()">

Kod ovog primjera učitavamo datoteku datoteka2.html u prozor prozor2 koji smo otvorili, nakon što je korisnik pritisnuo na hipertekstualnu vezu.

Page 13: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

12

Primjer 1 <script type="text/javascript">

function time(){

var d = new Date();

var time = d.getHours();

var weekday = new Array("nedjelja", "ponedjeljak",

"utorak", "srijeda", "cetvrtak", "petak", "subota");

if (time < 10)

{

document.write("<b>Dobro jutro <\/b>");

}

if ((time>=10)&amp;&amp;(time < 20))

{

document.write("<b>Dobar dan <\/b>");

}

if (time >=20)

{

document.write("<b>Dobro vecer <\/b>");

}

document.write("danas je ");

document.write(weekday[d.getDay()]);

document.write(" , ");

document.write(d.getDate());

document.write(".");

document.write(d.getMonth() + 1);

document.write(".");

document.write(d.getFullYear());

document.write(" sada je ");

document.write(d.getHours());

document.write(":");

document.write(d.getMinutes());

document.write(":");

document.write(d.getSeconds());

}

</script>

<input type="button" onclick="time()" value="tocno vrijeme" />

P R I M J E R I

Page 14: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

13

Primjer 2

<input type="button" onclick="window.open('primjer.html')"

value="Otvori novi prozor">

Primjer 3

<html>

<head>

<script language="JavaScript">

function promjeni()

{

document.bgColor=document.promjena_boje.boja.value;

}

</script>

<title></title>

</head>

<body>

<form name="promjena_boje">

<select name="boja">

<option value="red">crvena</option>

<option value="green">zelena</option>

<option value="gray">siva</option>

<option value="#000000">crna</option>

</select>

<input type="button" value="promjeni" onclick="promjeni()"

/></form>

</body>

</html>

Page 15: Osnove JavaScript-a - racunarstvo550.xyz. semestar/Programiranje za Internet... · Funkcije su temeljni blokovi u izradi JavaScript programa. Funkcija je JavaScript Funkcija je JavaScript

14

Zadaci

Unutar indeks.html datoteke koju možete pronaći u resursima za ovu vježbu, potrebno je riješiti nekoliko jednostavnih zadataka korištenjem JavaScript-a.

Kod JavaScript-a za svaki zadatak potrebno je pisati unutar <script> elementa

<script id="zadatakX">

</script>

umjesto X zapisan je redni broj zadatka.

Zadatak 1: Kreirati dvije varijable (a,b). Pridijeliti prvoj varijabli vrijednost 5, a drugoj varijabli vrijednost 3. Uz pomoć naredbe alert ispisati vrijednosti obe varijable istovremeno.

Zadatak 2:

Kreirati dvije varijable (a,b). Pridijeliti prvoj varijabli vrijednost 6, a drugoj varijabli vrijednost 2. Zbrojiti te dvije varijable te uz pomoć naredbe alert ispisati rezultat.

Zadatak 3:

Zakomentirati prva dva alert-a (iz zadatka 1 i 2). Kreirati funkciju zbroj koja prima dva argumenta te vraća zbroj kao rezultat. Ponovo kreirajte dvije varijable a=6 i b=5 te ih zbrojite uz pomoć kreirane funkcije. Rezultat ispišite korištenjem naredbe alert.

Zadatak 4:

Zakomentirati alert iz predhodnog zadatka. Ponovite zadatak 3 uz iznimku da sada želite oduzeti dva broja. To možete učiniti uz pomoć naredbe document.getElementById, gdje je ID ovog elementa zad3rezultat. Dakle, naredba koju trebate koristiti je: document.getElementById("zad4rezultat").value=novavrijednost;

Zadatak 5:

Uz pomoć for petlje, u sljedećem retku ispišite prvih 100 prirodnih brojeva odvojeni zarezom.

Zadatak 6:

Napišite program koji u nizu brojeva pronalazi najveći broj.

Zadatak 7:

Ispiši trenutno vrijeme:

Zadatak 8:

Zatražiti unos godine rođenja za Ivana, Marka i Peru koji su rođeni različitih godina. Ispisati ime najmlađeg.