javascript

Osnove JavaScripta C500

prirunik za polaznike 2005 Srce

Ovu inaicu prirunika izradio je autorski tim Srca u sastavu:

Autor: Denis Staner

Recenzent: Mario Ljolje

Urednik: Vladimir Braus

Sveuilite u Zagrebu

Sveuilini raunski centar

Josipa Marohnia 5, 10000 Zagreb

[email protected]

ISBN:978-953-7138-40-0 (meki uvez)

ISBN: 978-953-7138-41-7 (PDF)

Verzija prirunika C500-20141203

Ovo djelo dano je na koritenje pod licencom Creative Commons

Imenovanje-Nekomercijalno-Dijeli pod istim uvjetima 4.0 meunarodna.

Licenca je dostupna na stranici:

http://creativecommons.org/licenses/by-nc-sa/4.0/.

Sadraj

1. TO JE JAVASCRIPT? .............................................................................................................................................. 7

1.1. IME JAVASCRIPT ...................................................................................................................................................... 7 1.2. DOCUMENT OBJECT MODEL U JAVASCRIPTU......................................................................................................... 7 1.3. KOMPATIBILNOST PREGLEDNIKA ............................................................................................................................. 9 1.4. POVIJEST JAVASCRIPTA ........................................................................................................................................ 11 1.5. SKRIPTNI JEZICI ..................................................................................................................................................... 11 1.6. SIGURNOST ............................................................................................................................................................ 13

2. UPOZNAVANJE S JEZIKOM .................................................................................................................................. 14

2.1. NAIN PISANJA ....................................................................................................................................................... 14 2.1.2 Velika i mala slova........................................................................................................................................ 14 2.1.3. Kraj naredbe ................................................................................................................................................. 14 2.1.4. Komentari ..................................................................................................................................................... 14 2.1.5. Varijable ........................................................................................................................................................ 15

2.2. UKLJUIVANJE JAVASCRIPTA U HTML DOKUMENT .............................................................................................. 16 2.2.1. U HTML dokumentu .................................................................................................................................... 16 2.2.2. JavaScript u zasebnoj datoteci ................................................................................................................. 17 2.2.3. Obrada dogaaja ......................................................................................................................................... 18 2.2.4. JavaScript u URLu ...................................................................................................................................... 18

2.3. POGREKE ............................................................................................................................................................. 19

3. VARIJABLE I OBJEKTI ............................................................................................................................................ 21

3.1. VRSTE PODATAKA .................................................................................................................................................. 21 3.1.1. Brojevi ........................................................................................................................................................... 21 3.1.2. Nizovi znakova ............................................................................................................................................. 22 3.1.3. Logike vrijednosti ....................................................................................................................................... 23 3.1.4. Nizovi ............................................................................................................................................................ 23 3.1.5. Nepostojea i nedefinirana vrijednost ...................................................................................................... 24

3.2. VARIJABLE.............................................................................................................................................................. 24 3.3. OBJEKTI ................................................................................................................................................................. 25

4. OPERATORI ................................................................................................................................................................ 27

4.1. ARITMETIKI OPERATORI ....................................................................................................................................... 27 4.2. OPERATOR PRIDRUIVANJA ................................................................................................................................... 27 4.3. OPERATORI USPOREIVANJA ................................................................................................................................ 28 4.4. LOGIKI OPERATORI .............................................................................................................................................. 29 4.5. OPERATOR SPAJANJA ............................................................................................................................................ 29

5. FUNKCIJE ................................................................................................................................................................... 33

5.1. DEFINIRANJE FUNKCIJE ......................................................................................................................................... 33 5.2. POZIV FUNKCIJE ..................................................................................................................................................... 34

6. NAREDBE ZA KONTROLU TIJEKA ...................................................................................................................... 35

6.1. UVJETNO IZVOENJE NAREDBI .............................................................................................................................. 35 6.2. VIESTRUKA USPOREDBA ...................................................................................................................................... 35 6.3. UVJETNI OPERATOR ............................................................................................................................................... 36 6.4. PETLJA S UVJETOM NA POETKU .......................................................................................................................... 37 6.5. PETLJA S UVJETOM NA KRAJU ............................................................................................................................... 37 6.6. KLASINA PETLJA .................................................................................................................................................. 37

7. OBRASCI .................................................................................................................................................................... 40

7.1. PRVI OBRAZAC ....................................................................................................................................................... 40 7.2. UNOS KRAIH NIZOVA ZNAKOVA ............................................................................................................................ 41 7.3. ODABIR JEDNE OD MOGUNOSTI ........................................................................................................................... 43 7.4. UKLJUIVANJE I ISKLJUIVANJE JEDNE MOGUNOSTI .......................................................................................... 45

Osnove JavaScripta

T E A J E V I s r c a 4

7.5. ODABIR JEDNE OD MOGUNOSTI NA DRUGI NAIN................................................................................................ 46

8. KORISNE SKRIPTE .................................................................................................................................................. 52

8.1. ROLLOVER ............................................................................................................................................................. 52 8.2. VRSTA PREGLEDNIKA ............................................................................................................................................. 53 8.3. PREUSMJERAVANJE ............................................................................................................................................... 55 8.4. PROVJERA POMOU REGULARNIH IZRAZA ............................................................................................................ 55 8.5. UPRAVLJANJE PREGLEDNIKOM .............................................................................................................................. 58 8.6. VJEBE ................................................................................................................................................................... 61

DODATAK ....................................................................................................................................................................... 63

OPERATORI ................................................................................................................................................................... 63 NIZOVI............................................................................................................................................................................ 64 DATUMI .......................................................................................................................................................................... 65 MATEMATIKE FUNKCIJE ............................................................................................................................................... 66 DOGAAJI ...................................................................................................................................................................... 67

Osnove JavaScripta


Uvod

U okviru ovog teaja upoznat ete se s osnovama programiranja u JavaScriptu. Teaj je namijenjen autorima HTML dokumenata koji ele uvesti interaktivne elemente u svoje dokumente.

Za uspjeno praenje teaja JavaScripta potrebno je predznanje u ureivanju HTML dokumenata te poeljna su osnovna znanja iz programiranja.

Ovaj se prirunik sastoji od jedanaest poglavlja koja e detaljno biti obraena tijekom dva dana, pet kolskih sati dnevno.

Savjeti i upozorenja istaknuti su u okvirima s desne strane stranice.

Osnove JavaScripta


Osnove JavaScripta


1. to je JavaScript?

JavaScript je lagan, interpretiran programski jezik namijenjen ponajprije razvoju interaktivnih HTML stranica. Jezgra JavaScripta ukljuena je u veinu dananjih preglednika (Netscape, Internet Explorer, Mozilla, Firefox, Opera).

1.1. Ime JavaScript

JavaScript omoguuje izvravanje odreenih radnji u inae statinim HTML dokumentima, npr. interakciju s korisnikom, promjenu svojstava preglednikova prozora i dinamiko stvaranje HTML sadraja.

JavaScript nije pojednostavljena inaica programskog jezika Java. Povezuje ih jedino slina sintaksa i to se koriste za izvravanje odreenih radnji unutar preglednika. Izvorno se JavaScript trebao zvati LiveScript, ali kako bi se potakla uporaba novog skriptnog jezika nazvan je slino jeziku koji je mnogo obeavao na internetu.

JavaScript i Java se nadopunjuju: JavaScript moe utjecati na preglednik i HTML sadraj (Java ne moe utjecati na preglednik), ali ne moe iscrtavati sloeni grafiki sadraj, izvravati mrene programe i vienitnost, to Java moe.

1.2. Document Object Model u JavaScriptu

Document Object Model (DOM) je suelje za programiranje aplikacija za opis dokumenata (npr. HTML) te pristup i rukovanje njegovim dijelovima (npr. elementi u HTML dokumentu).

JavaScript definira svoj DOM kao:

elements[ ]

button

checkbox

fileupload

hidden

password

radio

select

submit

text

textarea

document

anchors[

forms[ ]

links[ ]

images[ ]

applets[ ] options[ ] window

Osnove JavaScripta


Svakom objektu ili svojstvu pristupa se kroz ovaj model, tj. document je

osnovni objekt preko kojega se pristupa svima ostalim objektima dokumenta. Na primjer u dokumentu:

vrijednosti polja ime se pristupa kao:

Vidljivo je da je tekstualni objekt prvi u nizu elemenata koji se nalaze u prvom obrascu. Da bi se programiranje pojednostavilo, omogueno je imenovanje pojedinih objekata. Na primjer, sljedeim kodom moe se popraviti gornji dokument:

Vrijednosti polja, u tom sluaju, pristupamo na znatno jednostavniji nain:

Objekt window takoer je vaan objekt, pomou kojega se upravlja prozorom preglednika. U jednom od primjera detaljnije e se obraditi uporaba window objekta.

Unesite ime:

document.forms[0].elements[0].value

Unesite ime:

document.frm_a.ime.value

Osnove JavaScripta


1.3. Kompatibilnost preglednika

JavaScript se moe pisati u bilo kojem tekst (ASCII) editoru. Blok za pisanje (Notepad) prisutan je u svim inaicama Windowsa pa se namee kao pogodan i za programiranje u JavaScriptu. Kako bi se programiranje ubrzalo i uinilo uinkovitijim poeljno je rabiti editor koji razlikuje dijelove koda te ih prikazuje u razliitim bojama (bojanje sintakse), automatsko poravnavanje i otvaranje vie dokumenata unutar jednog prozora.

Na isti se nain Internet Explorer namee kao razvojna platforma za JavaScript. Meutim IE jo ne podrava DOM u dovoljnoj mjeri:

Preglednik JavaScript DOM mogunosti

Netscape 2 JavaScript 1.0 Obrasci

Netscape 3 JavaScript 1.1 Image rollover

Netscape 4 JavaScript 1.2 DHTML pomou slojeva (layers)

Netscape 4.5 JavaScript 1.3 DHTML pomou slojeva (layers)

Netscape 6 / Mozilla

JavaScript 1.5 Znatna podrka za W3C DOM standard; podrka za slojeve prekinuta

IE 3 JScript 1.0/2.0 Obrasci

IE 4 JScript 3.0 Rollover efekt; DHTML pomou document.all[]

IE 5 JScript 5.0 DHTML pomou document.all[]

IE 5.5 JScript 5.5 Djelomina podrka za W3C DOM standard

IE 6 JScript 5.5 Djelomina podrka za W3C DOM standard; nedostaje podrka za W3C DOM dogaaje

tovie u operacijskom sustavu Windows XP je od trenutka objave drugog paketa zakrpi (Service Pack 2) pootrena sigurnost pa se pri izvravanju JavaScripta pojavljuje poruka o blokiranom sadraju.

Osnove JavaScripta


Klikom na desni gumb mia te odabirom "Dopusti blokirani sadraj..." ("Allow Blocked Content") omogui se trenutano izvravanje JavaScripta bez upozorenja.

Meutim, to vrijedi dok se ne zatvori IE. Nakon toga potrebno je ponoviti gore navedene radnje. Za trajno iskljuenje upozorenja za lokalno pohranjene JavaScript programe, potrebno je u Alati Internet Opcije Dodatno Sigurnost (Tools Internet Options Advanced Security) omoguiti Dopusti da se aktivni sadraj izvodi iz datoteka u mapi Moje raunalo (Allow active content to run in files on My Computer).

Jedan je od alternativnih preglednika za razvoj JavaScript programa Mozilla Firefox, koji ima izvrstan JavaScript debuger, dobar DOM inspector te se pridrava DOM specifikacije.

Osnove JavaScripta


1.4. Povijest JavaScripta

JavaScript se razvijao godinama i Netscape je objavio nekoliko inaica jezika. Microsoft je objavio jezik slian JavaScriptu pod imenom "JScript". ECMA (http://www.ecma.ch/) je objavila tri inaice standarda ECMA-262, koji standardizira JavaScript jezik pod imenom ECMAScript.

U ovom priruniku pojam "JavaScript" oznaava bilo koju implementaciju jezika, ukljuujui i Microsoftov JScript.

Inaica Opis

JavaScript 1.0 Izvorna inaica jezika, bila je puna pogreaka. Implementiran u Netscape 2.

JavaScript 1.1 Novi Array objekt; popravljene ozbiljne pogreke. Implementiran u Netscape 3.

JavaScript 1.2 Nova switch naredba, regularni izrazi i drugo. Zamalo potuje ECMA v1 uz neke nekompatibilnosti. Implementiran u Netscape 4.

JavaScript 1.3 Ispravljene nekompatibilnosti JavaScripta 1.2. Potuje ECMA v1. Implementiran u Netscape 4.5.

JavaScript 1.4 Implementiran samo u Netscape posluiteljske proizvode.

JavaScript 1.5 Uvedeno upravljanje iznimkama (exception handling). Potuje ECMA v3. Implementiran u Mozillu i Netscape 6.

JScript 1.0 Okvirno ekvivalentan JavaScriptu 1.0. Implementiran u prve inaice IE 3.

JScript 2.0 Okvirno ekvivalentan JavaScriptu 1.1. Implementiran u kasnije inaice IE 3.

JScript 3.0 Okvirnoi ekvivalentan JavaScriptu 1.3. Potuje ECMA v1. Implementiran u IE 4.

JScript 4.0 Nije implementiran ni u jedan preglednik.

JScript 5.0 Podrano upravljanje iznimkama (exception handling). Djelomino potuje ECMA v3. Implementiran u IE 5.

JScript 5.5 Okvirno ekvivalentan JavaScriptu 1.5. Potpuno potuje ECMA v3. Implementiran u IE 5.5 i IE 6. (IE 6 zapravo ima JScript 5.6, ali 5.6 nije bitno razliit od 5.5 za JavaScript programere koji piu za preglednike.)

ECMA v1 Prva standardna inaica. Standardizirane su osnove JavaScripta 1.1 i dodano nekoliko novih mogunosti. Nije standardizirana switch naredba i regularni izrazi. Implementacije koje potuju ECMA v1 su JavaScript 1.3 i JScript 3.0.

ECMA v2 Razvojna inaica koja nije donijela nove mogunosti ve je razjasnila dvosmislenosti.

ECMA v3 Standardizirani switch naredba, regularni izrazi i upravljanje iznimkama.

Implementacije koje potuju ECMA v3 su JavaScript 1.5 i JScript 5.5.

1.5. Skriptni jezici

Program koji obrauje i izvrava skripte zove se interpreter. Interpreter ita kd i prevodi ga u strojni jezik svaki put kada se pokrene skripta. Svaki jezik koji se interpretira, tj. koji izvrava interpreter, naziva se skriptni jezik. Interpreter za JavaScript ugraen je u veinu dananjih preglednika.

Skriptni jezici se koriste jer je razvoj programa znatno jednostavniji. Za razliku od programa pisanih u "pravim" programskim jezicima nije potrebno prevoditi skripte u strojni jezik:

Koraci kod programskih jezika Koraci kod skriptnih jezika

1. Napisati ili popraviti program

2. Prevesti program u strojni jezik

3. Pokrenuti prevedeni program

4. Za popravke ponoviti od koraka 1

1. Napisati ili popraviti skriptu

2. Pokrenuti interpreter

3. Za popravke ponoviti od koraka 1

Osnove JavaScripta


HTML je jezik za opis dokumenata i nema dinaminih elemenata. Davno se ukazala potreba za uvoenjem dinaminog naina stvaranja HTML-a i stvaranja dinaminog (interaktivnog) sadraja u HTML-u.

Danas postoji nekoliko tehnologija za svaku od gore navedenih naina "pokretanja" HTML-a.

1. U prvoj skupini su jezici za dinamino stvaranje HTML-a, tj. same stranice zapisane su pomou nekog (obino skriptnog) jezika, koji interpretira posluitelj i alje korisniku "obian" HTML kd. Tipini su predstavnici ove skupine: ASP (Active Server Pages), PHP (PHP: Hypertext Preprocessor) i JSP (Java Server Pages).

2. U drugoj skupini su Java, Flash i Shockvawe za iji je prikaz potreban vanjski program (plug-in) koji zna interpretirati ili izvoditi navedene programe. Kada je sadraj prikazan u pregledniku, on je dinamian i neovisan o "okolnom" HTML-u.

3. U treoj skupini su tzv. klijentski, jer se njihov kd interpretira na klijentskoj strani, tj. u pregledniku (klijentu). Predstavnici su JavaScript te VBScript (prisutan samo u IE).

Na primjer za PHP bi to bilo:

PHP 39%, ASP 22%, JSP 11%, CGI 25%

SERVER INTERNET

HTML, JavaScript, VBScript

JVM

JAVA

PREGLEDNIK

HTML, JavaScript, Java, ...

Java Virtual Machine

PHP

SERVER INTERNET

HTML i JavaScript

PREGLEDNIK

HTML i JavaScript

Postoji jo i stariji nain koji je koristio Common Gateway Interface iji je predstavnik jo jedan skriptni jezik: Perl. Danas se CGI sve rjee koristi.

Osnove JavaScripta


1.6. Sigurnost

Kada god se programi (kao to su JavaScript skripte, Java programi ili Microsoft Word makroi) nalaze u odijeljenim dokumentima, osobito u dokumentima koji se alju putem Interneta, prisutna je opasnost od virusa ili nekih zloudnih programa. Tvorci JavaScripta su bili svjesni ovih sigurnosnih problema i onemoguili su JavaScript programima postupke koji bi za posljedicu imali brisanje ili izmjenu podataka na korisnikovom raunalu. Kao to je ve naglaeno, JavaScript programi ne mogu pristupati lokalnim datotekama, tj. ne mogu zaraziti neke druge datoteke ili brisati datoteke. Isto tako, JavaScript programi ne mogu obavljati mrene radnje, tj. JavaScript moe uitavati adrese web sadraja (URL) i slati podatke iz HTML obrazaca CGI skriptama i na e-mail adrese, ali ne moe ostvarivati neposredne veze s drugim raunalima i na taj nain pokuati pogoditi lozinku na nekom lokalnom posluitelju.

Meutim, kako su preglednici sloeni programi, u poetku implementacija JavaScripta nije uvijek potivala standarde. Na primjer, Netscape 2 je omoguavao pisanje JavaScript programa koji je automatski dohvatio adresu elektronike pote bilo kojega posjetitelja odreene stranice i u njegovo ime, bez njegove potvrde, poslati bilo kakav e-mail. Ovaj je propust, uz niz drugih manje opasnih, popravljen, meutim ne postoji jamstvo da se nee otkriti novi propusti u implementaciji JavaScripta i na taj nain omoguiti zlonamjernicima iskoritavanje tih propusta.

Saetak

Prvo poglavlje daje osnovne podatke o JavaScriptu:

to je JavaScript

kako se razvijao JavaScript

kako je JavaScript implemetiran u pojedine preglednike

openito o skriptnim jezicima

koliko je JavaScript siguran

Osnove JavaScripta


2. Upoznavanje s jezikom

2.1. Nain pisanja

JavaScript se moe pisati po Unicode standardu, no preporua se da se pie po ASCII standardu osim u komentarima i nizovima znakova.

2.1.2 Velika i mala slova

JavaScript je jezik osjetljiv na velika i mala slova!

To znai da se kljune rijei, varijable, funkcije i ostala imena moraju pisati dosljedno s obzirom na velika i mala slova. Tako se na primjer kljuna rije mora pisati while, a ne kao While ili WHILE. Takoer, varijable stranaa, stranaA, StranaA i STRANAA etiri su razliite varijable.

HTML, za razliku od JavaScripta, nije osjetljiv na velika i mala slova pa je potreban oprez. Naime, mnogi objekti i svojstva imaju jednaka imena kao HTML elementi i atributi. Dok se u HTML-u mogu biti pisati u bilo kojoj kombinaciji velikih i malih slova, u JavaScriptu svi takvi objekti i njihova svojstva moraju se pisati malim slovima, npr. dogaaj "onclick" se u HTML-u esto pie kao onClick, no u JavaScriptu on se mora pisati kao onclick.

2.1.3. Kraj naredbe

Toka-zarez rabi se u JavaScriptu za odvajanje naredbi. Toka-zarez nije obavezna, ali ju je preporuljivo uvijek pisati. Naime, JavaScript ubacuje toku-zarez na kraju retka ukoliko pojedini kd izgleda kao naredba, to u nekim situacijama nije ono to je programer htio. Na primjer kd

JavaScript e interpretirati kao

(dakle ubaena je toka-zarez na kraju retka), iako je programer htio

2.1.4. Komentari

JavaScript, podrava C++ i C komentare. Bilo koji tekst izmeu // i kraja retka smatra se komentarom. Bilo koji tekst izmeu znakova /* i */ je komentar i zanemaruje se. Druga vrsta komentara moe se protezati u vie redaka, ali se ne smiju ugnjeivati. Evo nekoliko ispravnih komentara:

return

true;

return;

true;

return true;

Osnove JavaScripta


2.1.5. Varijable

Nazivi varijabli i funkcija moraju zadovoljavati ovo pravilo: prvi znak imena mora biti slovo ili znak podcrta (_). Sljedei znakovi mogu biti slova, brojevi ili podcrta. Evo primjera ispravnih imena:

Imena ne smiju biti jednaka kljunim rijeima. Tablica sadri popis kljunih rijei u JavaScriptu:

break do if switch typeof

case else in this var

catch false instanceof throw void

continue finally new true while

default for null try with

delete function return

Ova se imena trenutano ne rabe u JavaScriptu, ali ECMAScript v3 standard navodi ih kao mogue kljune rijei u budunosti, pa bi njih trebalo izbjegavati:

abstract double goto native static

boolean enum implements package super

byte export import private synchronized

char extends int protected throws

class final interface public transient

const float long short volatile

// Obian jednoretani komentar.

/*

* I ovo je komentar.

* Koji se protee na vie redaka.

*/

i

moja_varijabla

v13

_privremena

Osnove JavaScripta


Takoer je potrebno izbjegavati imena globalnih varijabli i funkcija predefiniranih u JavaScriptu:

arguments encodeURI Infinity Object String

Array Error isFinite parseFloat SyntaxError

Boolean escape isNaN parseInt TypeError

Date eval Math RangeError undefined

DecodeURI EvalError NaN ReferenceError

unescape

decodeURIComponent Function Number RegExp URIError

2.2. Ukljuivanje JavaScripta u HTML dokument

JavaScript se moe ukljuiti u HTML dokument na ove naine:

pisanjem koda izmeu i tagova

iz vanjske datoteke uporabom src atributa u tagu

putem obrade dogaaja navedenog kao HTML atribut (npr. onclick ili onmouseover)

u URL-u koji koristi poseban javascript: protokol.

2.2.1. U HTML dokumentu

Unutar HTML dokumenta JavaScript skripte piu se izmeu i tagova. Proizvoljan broj JavaScript naredbi obrauje se redom kojim su napisane, prilikom uitavanja HTML dokumenta. element se moe pojaviti u elementu ili elementu. U elementu uobiajeno je pisati programe koji oekuju neku korisnikovu radnju, tj. uitaju se u preglednik i ekaju dogaaj koji bi ih pokrenuo. U elementu je uobiajeno pisati programe koji se izvravaju odmah pri uitavanju. Najee je to generiranje nekog dijela HTML dokumenta.

Jedan HTML dokument moe sadravati nekoliko elemenata. Ove odvojene skripte obrauju se redom kojim su napisane u dokumentu. Odvojene skripte ine jedan JavaScript program unutar jednog HTML dokumenta, tj. funkcije i varijable definirane u jednoj skripti dostupne su u svim sljedeim skriptama unutar istog HTML dokumenta.

Iako je JavaScript najee rabljen skriptni jezik u HTML dokumentima, nije jedini. Vrsta skriptnog jezika navodi se u language atributu taga.

Preglednici koji imaju interpreter za navedeni jezik skriptu obrade, ostali ju zanemare:

// JavaScript program

HTML 4 standard ne preporua uporabu language atributa, jer ne

postoji predefiniran popis skriptnih jezika. Umjesto toga preporua se uporaba type atributa:

Meutim, podrka za type atribut jo nije rairena u dananjim preglednicima. Kako je type obvezan uza

XHTML preporuka je pisati oba atributa.

HTML

JavaScript

Osnove JavaScripta


Prijanjih godina se mnogo koristilo tzv. "skrivanje koda", tj. trikom s komentarima se skrivao JavaScript od preglednika koji ga nisu znali interpretirati.

Danas je broj preglednika u uporabi koji ne znaju interpretirati JavaScript pao ispod 1%, stoga vie nema razlog za takvo skrivanje. tovie takav nain ukljuivanja JavaScripta u dokument nije dozvoljen po preporuci za XHTML.

2.2.2. JavaScript u zasebnoj datoteci

Od inaice 1.1, JavaScripta unutar elementa podrava src atribut. Vrijednost tog atributa je URL datoteke koja sadri JavaScript program.

JavaScript datoteka uobiajeno ima .js ekstenziju i sadri isti JavaScript,

bez elementa.

Bilo koji kd unutar tagova se zanemaruje. Nuno je primijetiti da je zavrni tag obavezan iako je src atribut naveden i iako nema

JavaScripta izmeu i tagova.

Nekoliko je razloga za uporabu src atributa:

Pojednostavljuje HTML datoteku, jer nema velikih blokova JavaScripta u dokumentu.

Ukoliko se neka JavaScript funkcija rabi u vie HTML dokumenata, poziva se jedna datoteka, to omoguuje jednostavnije odravanje, a smanjuje i potronju diska.

Kada vie HTML dokumenata rabi jednu JavaScript datoteku, ona se uitava u preglednik samo prilikom prve uporabe. Nakon toga se datoteka lokalno sprema na disk i svaki sljedei put interpretira se iz lokalne datoteke.

Kako src atribut sadrava URL, JavaScript program s jednog posluitelja se moe rabiti na nekoliko drugih posluitelja (npr. src="http://www.udaljeni-server.hr/js/obrasci.js").

XHTML preporuka navodi da je sljedei nain najpoeljniji za ukljuivanje JavaScripta u XHTML dokument:

HTML

JavaScript

src="..."

Osnove JavaScripta


2.2.3. Obrada dogaaja

JavaScript program izvrava se samo jednom i to kad se HTML dokument uita u preglednik. Ovakav nain uporabe JavaScripta ne omoguuje interakciju s korisnikom. Zbog toga je za pojedine HTML objekte (uglavnom dijelovi obrazaca) definirano nekoliko dogaaja. Dogaaj se navodi kao atribut dotinog objekta. Na primjer, kad korisnik pritisne gumb "Poruka", tj. aktivira se dogaaj onclick, izvrava se vrijednost navedenog dogaaja. U naem primjeru pojavi se obavijest korisniku.

Kao vrijednost dogaaja moe se navesti nekoliko JavaScript naredbi, no ako je naredbi previe, uobiajeno je da se napie funkcija (bilo unutar elementa ili u zasebnoj datoteci) te se poziva ta funkcija. Na taj

nain smanjuje se mijeanje JavaScripta i HTMLa.

2.2.4. JavaScript u URLu

Drugi nain na koji se JavaScript kd moe ukljuiti u URL je pomou javascript: pseudoprotokol oznake. Taj posebni protokol oznaava da je tijelo stranice iza navedenog URL-a proizvoljan JavaScript program kojei e obraditi interpreter. Ukoliko JavaScript program u javascript: URL-u ima

vie naredbi, one moraju biti odvojene toka-zarezom. Na primjer:

Kada preglednik uita ovakav JavaScript URL, izvede se JavaScript program, izrauna se vrijednost posljednje naredbe i ta vrijednost se pretvori u niz znakova. Konano, dobiveni niz znakova prikae se u pregledniku.

Kada JavaScript URL sadri program koji ne vraa nikakvu vrijednost, preglednik izvri program, ali ne mijenja sadraj dokumenta.

B340 - javascript: URL 1

JavaScript


JavaScript

Za naprednije korisnike! Rabi se najee kao obavijesti za neuspjelu akciju.

Osnove JavaScripta


Vrlo esto se javascript: URL koristi za izvravanje JavaScript programa bez promjene sadraja dokumenta. To se postie tako da se osigura da posljednja naredba u URL-u ne vraa nikakvu vrijednost. Jedan od naina je uporaba void operatora. Sljedei primjer pokazuje javascript: URL koji otvara novi prazan prozor, bez promjene sadraja trenutanog dokumenta:

Bez void operatora u dokument bi se ispisala vrijednost posljednje

naredbe pretvorena u niz znakova. U naem sluaju to je Window.open( ). Niz znakova bio bi: [object] (ili [object Window] u Netscape

preglednicima)

Ovakav javascript: URL moe se rabiti na svim mjestima gdje se koristi uobiajen URL. Na primjer za brzo testiranje mogue je upisati u polje Adresa (Location) u pregledniku bilo koji JavaScript program (naravno krai).

esta uporaba ovakvog oblika je kao vrijednost action atributa u elementu.

2.3. Pogreke

Ukoliko se pri izvoenju JavaScripta pojavi pogreka, u Internet Exploreru se u donjem lijevom kutu pojavi ikona s usklinikom:

Dvostrukim klikom na ikonu dobije se obavijest o pogreci (u saetom obliku). Pritiskom na "Prikai pojedinosti>>" ("Show Details>>") dobiju se podrobniji podaci o pogreki:


JavaScript

Osnove JavaScripta


U ovoj skripti je pogreka u 11. retku (Line 11) i 5. stupcu (Char 5).

Pogreka je opisana u Pogreka (Error) polju. Naime, opis pogreke navodi da objekt ne podrava metodu (tj. objekt document ne podrava metodu

writ). Drugim rijeima, metoda write pogreno je napisana.

1

2

3

4 Greka

5

6

7

8

9 var i = 1;

10

11 document.writ('i: ' + i + '');

12

13

14

15

16

Saetak

Ovo poglavlje obrauje osnove jezika:

nain pisanja JavaScript programa

nain pisanja komentara u JavaScript programima

kako se mogu nazivati varijable

kljune rijei JavaScripta

ukljuivanje JavaScripta u HTML

Osnove JavaScripta


3. Varijable i objekti

3.1. Vrste podataka

3.1.1. Brojevi

Svi brojevi u JavaScriptu predstavljaju se kao brojevi s pominim zarezom (floating-point) i to u 64-bitnom formatu, tj. mogu se prikazati brojevi koji nisu vei (po apsolutnoj vrijednosti) od 1.7976931348623157 x 10308 i nisu manji od 5 x 10 -324.

Cijeli brojevi mogu se prikazati od -9007199254740992 (-253) do 9007199254740992 (253).

Osim brojeva s bazom 10, JavaScript prepoznaje i brojeve s bazom 16 (heksadecimalne). Heksadecimalan broj mora zapoeti s "0x" ili "0X" te nastaviti s nizom heksadecimalnih znamenki (tj. 0-9 i A-F).

Brojevi s pominim zarezom prikazuju se na dva naina: klasini nain s tokom ili tzv. "inenjerski" nain sa slovom E.

Kad rezultat operacije na brojevima postane prevelik za prikaz u

JavaScriptu, broj se prikazuje kao posebna vrijednost Infinity. Slino tome, kad je negativan broj manji od najmanjeg broja koji se moe prikazati u JavaScriptu, prikazuje se kao posebna vrijednost -Infinity.

Ukoliko se prilikom neke matematike operacije dobije nedefinirani rezultat (npr. dijeljenje s nulom), broj se prikazuje pomou posebne vrijednosti NaN (Not-a-Number = nije broj). Ova vrijednost nije jednaka ni jednoj drugoj vrijednosti, pa ak ni samoj sebi. Zbog toga postoji posebna funkcija isNaN( ), koja provjerava je li neka vrijednost broj ili ne. Funkcija

isFinite( ) provjerava je li vrijednost broj i moe li se prikazati kao konaan broj u JavaScriptu. U tablici se navode jo neke posebne vrijednosti:

0xFF // 15*16 + 15 = 255 (u bazi 10)

0xCAFE911

3.14

2345.789

.333333333333333333

6.02e23 // 6.02 x 1023

1.4738223E-32 // 1.4738223 x 10-32

Oprez je potreban kod uporabe bit operacija, jer se one obavljaju na 32-bitnim cijelim brojevima, tj. od -2147483648 (-2

31)

do 2147483647 (231

-1).

Osnove JavaScripta


Konstanta Znaenje Infinity Posebna vrijednost koja predstavlja

beskonanost. NaN Posebna vrijednost nije-broj. Number.MAX_VALUE Najvei broj koji se moe prikazati. Number.MIN_VALUE Najmanji (najblii nuli) broj koji se moe

prikazati. Number.NaN Posebna vrijednost nije-broj. Number.POSITIVE_INFINITY Posebna vrijednost koja predstavlja

beskonanost. Number.NEGATIVE_INFINITY Posebna vrijednost koja predstavlja

negativnu beskonanost.

Vrijednosti Infinity i NaN definirane su u ECMAScript v1 standardu tako

da nisu implementirane prije JavaScripta 1.3.

3.1.2. Nizovi znakova

U JavaScriptu se nizom znakova smatra bilo koji niz Unicode znakova,

duljine 1 ili vie, omeen navodnicima ili apostrofom (' ili "). Niz znakova zapoet s navodnikom mora zavriti navodnikom. Takoer niz znakova zapoet apostrofom mora zavriti apostrofom. Niz znakova zapoet navodnikom moe sadravati proizvoljan broj apostrofa i obratno.

Niz znakova mora biti napisan u jednom retku. Ukoliko postoji potreba za

unosom novog retka, potrebno je koristiti znak \n.

JavaScript se esto kombinira s HTML-om, koji takoer rabi navodnike ili apostrof u vrijednostima argumenata. Stoga je poeljno imati stalan stil pisanja navodnika i apostrofa. Npr:

Novi redak nije jedini sluaj kad je potrebno napisati neki poseban znak pa u JavaScriptu postoji nekoliko posebnih nizova znakova s posebnog znaenja:

"" // Ovo je prazan niz znakova, duljine 0

'test' // Niz znakova omeen apostrofima

"3.14" // Ovo nije broj ve niz znakova

'Potrebno je upisati "user"' // Navodnici unutar niza znakova

"Obian niz znakova."

"Ovaj niz je\nu dva reda"

JavaScript

Osnove JavaScripta


Niz Znaenje \0 NUL znak (\u0000). \b Backspace (\u0008). \t Vodoravni tabulator (\u0009). \n Novi red (\u000A). \v Okomiti tabulator (\u000B). \f Form feed (\u000C). \r Carriage return (\u000D). \" Navodnici, ak i unutar niza znakova zapoetih navodnikom

(\u0022). \' Apostrof, ak i unutar niza znakova zapoetih apostrofom

(\u0027). \\ Obrnuta kosa crta (\u005C).

\xXX Latin-1 znak naveden s dvije heksadecimalne znamenke XX. \uXXXX Unicode znak naveden s etiri heksadecimalne znamenke

XXXX.

Nizovi znakova spajaju se operatorom +:

3.1.3. Logike vrijednosti

Logike vrijednosti (tzv. boolean vrijednosti) imaju samo dvije mogue vrijednosti koje se prikazuju pomou konstanti true i false. Logike vrijednosti obino su rezultat usporeivanja:

3.1.4. Nizovi

Niz je skup vrijednosti u kojemu svaki element ima jedinstveni redni broj koji se naziva indeks. Vrijednost odreenog elementa dobije se tako da se iza naziva niza vrijednost indeksa stavi unutar uglatih zagrada, tj. izraz

a[2] oznaava trei element u nizu a jer su u JavaScriptu elementi niza indeksirani od nule.

Nizovi mogu sadravati bilo koju vrstu JavaScript podataka, ukljuujui i reference na druge nizove, objekte ili funkcije. Kako se u JavaScriptu ne navodi vrsta pojedinih vrijednosti, nije nuno da su u jednom nizu sve vrijednosti iste vrste (kao to je to u veini drugih jezika).

Nizovi se stvaraju pomou Array( ) funkcije (konstruktora). Kada je niz stvoren, moe mu se dodavati proizvoljan broj elemenata:

Nizovi se mogu stvoriti i tako da im se odmah postave poetne vrijednosti. Npr. prethodni primjer mogao je izgledati ovako:

poruka = "Dobrodoli u " + "SRCE"; // Daje "Dobrodoli u SRCE"

log_var = a == 5;

var a = new Array( );

a[0] = 1.2;

a[1] = "JavaScript";

a[2] = true;

a[3] = { x:1, y:3 };

Osnove JavaScripta


Ako pak konstruktoru Array( ) proslijedite samo jedan parametar, on

oznaava duljinu niza. Sljedei primjer stvara novi niz od 10 elemenata:

3.1.5. Nepostojea i nedefinirana vrijednost

Kljuna rije null oznaava posebnu vrijednost koja nema nikakvu vrijednost. Kad varijabla ima vrijednost null, tada ne sadri ni jednu ispravnu vrstu podatka: objekt, niz, broj, niz znakova ili logiku vrijednost.

Druga je posebna vrijednost undefined, koja se dobije kad se uporabi

varijabla koja je bila deklarirana, ali nema poetnu vrijednost ili svojstvo objekta koje ne postoji.

Vrijednost undefined nije isto to i null, iako e test jednakosti vratiti istinu. Kao to e se pokazati u nastavku, za razlikovanje se koriste operatori === ili typeof.

3.2. Varijable

Varijabla je ime povezano s vrijednou, tj. varijabla sadrava odreenu vrijednost. Varijable omoguavaju pohranu i rukovanje podacima u programu.

Kao to je ranije reeno: prvi znak imena varijable mora biti slovo ili znak podcrta (_). Sljedei znakovi mogu biti slova, brojevi ili podcrta. Ostali znakovi nisu dozvoljeni u imenima varijabli (dakle, nisu dozvoljeni znakovi s dijakriticima: ).

JavaScript je jezik bez eksplicitnih vrsta podataka, to znai da varijable ne moraju imati navedeno koje su vrste. tovie jedna varijabla moe sadravati vrijednost bilo koje vrste, npr:

Varijabla dobije vrstu podatka na osnovi podatka koji sadri. tovie, JavaScript automatski mijenja vrstu varijable, ako je to potrebno. Prije nego

se rabi varijabla, poeljno ju je deklarirati pomou kljune rijei var. Npr:

Ako pri deklaraciji varijable nije navedena poetna vrijednost, ona se automatski postavlja na vrijednost undefined.

var a = new Array(1.2, "JavaScript", true, i_varijabla);

var a = new Array(10);

i = 10; // cijeli broj

i = "deset"; // niz znakova

i = false; // logika vrijednost

var i;

var sum;

var i, sum; // Ili obje odjednom

var niz = "Oprez!"; // Deklaracija s poetnom vrijednosti

Osnove JavaScripta


3.3. Objekti

Objekt je sloena vrsta podatka koji skuplja vie vrijednosti u jednu cjelinu. Takoer se moe rei da je objekt skup imenovanih vrijednosti. Te se vrijednosti nazivaju svojstva objekta. eli li se pristupiti odreenom svojstvu, navede se ime objekta, toka i na kraju ime svojstva. Ako objekt slika ima svojstva sirina i duljina, onda se tim svojstvima pristupa na

ovaj nain:

Objekti se stvaraju pozivom posebne funkcije (konstruktor). Npr. ovim se recima stvaraju objekti:

Kako bi se pristupilo svim svojstvima jednog objekta, rabi se poseban oblik

for petlje:

Postupak ili metoda je JavaScript funkcija koja se poziva kroz objekt:

slika.sirina

slika.duljina

var objekt = new Object( );

var sada = new Date( );

var uzorak = new RegExp("\\sjavascript\\s", "i");

for(var svojstvo in osoba) alert(svojstvo);

// Funkcija

function identitet(){

return "Ja sam " + this.ime + " po zanimanju " + this.zanimanje;

}

// Povezivanje s objektom

osoba.predstavi_se = identitet;

O b j e k t

Svojstva

Metode

A r r a

y

length

...

sort join

reverse ...

Osnove JavaScripta


Vjeba (3_varijable.html)

Deklarirajte varijablu i te joj dodijelite vrijednost 1.

Deklarirajte tri varijable niz, niz2, niz3 te im dodijelite vrijednosti Niz znakova, 3.14, U dvaretka redom.

Deklarirajte varijablu logicka i dodijelite joj vrijednost true.

Vrijednosti ispiite pomou document.write funkcije.

Promijenite vrijednost varijable logicka u false te ju ponovo ispiite.

Saetak

U ovom poglavlju ste se upoznali s varijablama i objektima:

vrstama varijabli

deklaracijama varijabli

stvaranjem objekata

pristupom svojstvima objekata

uporabom metoda objekata

var i_broj = 1;

var s_niz1 = 'Niz znakova';

var s_niz2 = '3.14';

var s_niz3 = 'U dvaretka!';

var b_logicka = true;

document.write('Broj: ' + i_broj + '');

document.write('Niz 1:' + s_niz1 + '');

document.write('Niz 2: ' + s_niz2 + '');

document.write('Niz 3: ' + s_niz3 + '');

document.write('Logika: ' + b_logicka + '');

b_logicka = false;

document.write('Logika: ' + b_logicka + '');

Broj: 1

Niz 1: Niz znakova

Niz 2: 3.14

Niz 3: U dva

retka!

Logika: true

Logika: false

Osnove JavaScripta


4. Operatori

Operatori se rabe pri obavljanju odreenih operacija na varijablama i konstantama. Pregled svih operatora i njihova svojstva nalaze se u dodatku.

4.1. Aritmetiki operatori

Aritmetiki operatori su operatori osnovnih raunskih matematikih operacija.

Operator Znaenje

zbrajanje (+) zbraja dva broja ili spaja dva niza znakova

oduzimanje (-) oduzima drugi broj od prvoga ili kao unaran operator vraa negativnu vrijednost broja

mnoenje (*) mnoi dva broja

dijeljenje (/) dijeli prvi broj drugim i rezultat je uvijek decimalan broj; dijeljenje s nulom daje pozitivnu ili negativnu beskonanost (ovisi o prvom broju) dok 0/0 daje NaN

modulo (%) vraa ostatak od dijeljenja prvog broja drugim

inkrement (++) poveava vrijednost operanda za jedan

dekrement (--) umanjuje vrijednost operanda za jedan

4.2. Operator pridruivanja

Operator pridruivanja rabi se za pridruivanje vrijednosti varijabli. Kako je operator pridruivanja asocijativan (i to s desna) mogue je napisati:

Sve tri varijable imat e vrijednost 0.

Operator pridruivanja ima i poseban oblik: pridruivanje s operacijom, tj. oblik:

i = j = k = 0;

a op= b;

// je isto kao

a = a op b;

// gdje je op jedan od aritmetikih ili bit operatora

Osnove JavaScripta


4.3. Operatori usporeivanja

Operatori usporeivanja se najee koriste pri grananju (if) i uvjetnim petljama (while i do..while).

Operator Znaenje

manji od () daje true ako je prvi operand vei od drugoga;

inae false

manji ili jednak (=) daje true ako je prvi operand vei ili jednak

drugom; inae false

jednak (==) daje true ako je prvi operand jednak drugom;

inae false

razliit (!=) daje true ako je prvi operand razliit drugoga;

inae false

Vrijednosti koje se usporeuju mogu biti bilo koje vrste. No kako se samo brojevi i nizovi znakova mogu usporediti, JavaScript obavlja odreena pretvaranja prije usporeivanja:

Ako su oba operanda brojevi ili se mogu pretvoriti u brojeve, usporeuju se kao brojevi.

Ako su oba operanda nizovi znakova ili se mogu pretvoriti u niz znakova, usporeuju se kao nizovi znakova.

Ako je jedan operand niz znakova ili se moe pretvoriti u niz znakova te ako je drugi operand broj ili se moe pretvoriti u broj, niz znakova se pokua pretvoriti u broj i usporeuju se kao brojevi. Ako niz znakova nije broj, pretvara se u NaN, tj. usporeivanje nije uspjelo.

Ako se objekt moe pretvoriti ili u broj ili u niz znakova, JavaScript pretvara objekt u broj. To znai da se Date objekti usporeuju kao brojevi.

Ako se jedan od operanda, koji se usporeuju, ne moe uspjeno pretvoriti ili u broj ili u niz znakova, usporeivanje je uvijek neuspjeno, tj. dobiva se false.

Ako je jedan od operanda NaN, usporeivanje je uvijek neuspjeno.

Vano je primijetiti da se nizovi znakova usporeuju znak po znak, rabei kd svakog znaka iz Unicode tablice. To znai da usporeivanje nizova znakova moe biti neobino. Naime "Zagreb" je manji od "auto".

Usporeivanje je takoer osjetljivo na velika i mala slova (jer su im kdovi razliiti).

Metoda String.localeCompare( ) bolja je za usporeivanje, jer potuje abecedni poredak jezika koji je trenutano odreen. Za usporeivanja

Osnove JavaScripta


neosjetljiva na velika i mala slova potrebno je pretvoriti operande u velika ili

mala slova rabei String.toUpperCase( ) ili String.toLowerCase( ).

4.4. Logiki operatori

Logiki operatori se najee koriste kod sloenih uvjeta za grananja i petlje.

Operator Znaenje

logiko i (&&): daje true ako i samo ako su oba operanda

true; inae daje false

logiko ili (||): daje true ako je jedan od operanada true;

inae daje false

logiko ne (!): unarni operator daje true samo ako je operand

false; inae daje false

Prilikom pisanja sloenih uvjeta, preporuljivo je svaki uvjet pisati unutar zagrada:

U primjeru je svaki osnovni uvjet ((a>100) i (b100) && (b 100) && (b < 32))){

// naredbe

}

a = "2"; b = "2";,

c = a + b; // c je 22, a ne 4!!!

1 + 2 // Oba operanda su brojevi, rezultat je 3.

"1" + "2" // Oba operanda su nizovi znakova, rezultat je "12".

"1" + 2 // Drugi operand se pretvara u niz znakova, rezultat je "12".

11 < 3 // Oba operanda su brojevi, rezultat je false.

"11" < "3" // Oba operanda su nizovi znakova, rezultat je true.

"11" < 3 // Prvi operand se pretvara u broj, rezultat je false.

"one" < 3 // Prvi operand se pretvara u broj (postaje Nan), rezultat je false.

Osnove JavaScripta


Saetak

U ovom poglavlju saznali smo poneto o najvanijim operatorima:

aritmetikim operatorima

operatorima pridruivanja

operatorima usporeivanja

logikim operatorima

operatorima spajanja

Osnove JavaScripta


Vjeba (4_operatori.html)

Deklarirajte dvije varijable i_a i i_b te im dodijelite proizvoljne vrijednosti.

Poetne vrijednosti prikaite pomou funkcije document.write.

Deklarirajte varijable i_suma, i_razlika, i i_mod koje e sadravati redom: sumu, razliku, modulo varijabli i_a i i_b.

Deklarirajte varijablu b_logicka.

Rezultate prikaite pomou funkcije document.write.

Izraunajte tri aritmetike operacije iz druge toke i dodijelite ih odgovarajuim varijablama.

Inkrementirajte varijablu i_a i dekrementirajte varijablu i_b te ispiite nove vrijednosti varijabli i_a i i_b.

Ve izraunatoj sumi dodajte novu vrijednost varijable i_a. Ispiite novu vrijednost varijable i_suma.

Varijabli b_logicka dodijelite rezultat usporedbe je li vrijednost varijable a vea od 5. Ispiite vrijednost varijable b_logicka.

Ispiite i_a + i_b i uoite da se ne dobije zbroj ve niz znakova.

Ispiite (i_a + i_b) i provjerite da je zbroj tono ispisan.

Poetna vrijednost i_a: 10 Poetna vrijednost i_b: 3 Suma: 13

Razlika: 7

Mod: 1

i_a nakon ++: 11

i_b nakon --: 2

Sumi dodamo i_a: 24

Je li i_a > 5: true

Paziti na konverzije i_a + i_b: 112

Paziti na konverzije (i_a + i_b): 13

Osnove JavaScripta


var i_a = 10, i_b = 3;

var i_suma, i_razlika, i_mod, b_logicka;

i_suma = i_razlika = i_mod = 0;

document.write('Poetna vrijednost i_a: ' + i_a + '');

document.write('Poetna vrijednost i_b: ' + i_b + '');

i_suma = i_a + i_b;

i_razlika = i_a - i_b;

i_mod = i_a % i_b;

document.write('Suma: ' + i_suma + '');

document.write('Razlika: ' + i_razlika + '');

document.write('Mod: ' + i_mod + '');

i_a++;

i_b--;

document.write('i_a nakon ++: ' + i_a + '');

document.write('i_b nakon --: ' + i_b + '');

i_suma += i_a;

document.write('Sumi dodamo i_a: ' + i_suma + '');

b_logicka = i_a > 5;

document.write('Je li i_a > 5: ' + b_logicka + '');

document.write('Paziti na konverzije i_a + i_b: ' + i_a + i_b + '');

document.write('Paziti na konverzije (i_a + i_b): ' + (i_a + i_b) +

'');

Osnove JavaScripta


5. Funkcije

5.1. Definiranje funkcije

Funkcija je konstrukcija u JavaScriptu pomou koje grupiramo vei broj naredbi i tu grupu izvravamo navodei ime funkcije. Na ovaj nain skraujemo pisanje programa (ako vie puta pozivamo istu funkciju) te pojednostavljujemo program (npr. cijeli program moe se sastojati od poziva funkcija proizvoljnog imena te na taj nain pokazuje logiku programa, to bi inae bilo skriveno u velikom broju naredbi). Najei nain definiranja funkcije je pomou naredbe function:

Popis argumenata nije obavezan, dok okrugle zagrade jesu. Tijelo funkcije pie se unutar vitiastih zagrada {...}, koje oznaavaju blok naredbi, tj. nain da se nekoliko naredbi vee u jednu cjelinu.

Funkcija moe vratiti vrijednost, naredbom return, ali i ne mora. Evo nekoliko primjera:

function (, , ...){

}

// Funkcija koja nita ne vraa

function print(s_msg){

document.write(s_msg, "");

}

// Funkcija koja vraa udaljenost dviju toaka

function udaljenost(x1, y1, x2, y2){

var dx = x2 - x1;

var dy = y2 - y1;

return Math.sqrt(dx*dx + dy*dy);

}

// Rekurzivna fukncija (poziva samu sebe) koja rauna faktorijel

// Podsjetnik: x! = x*(x-1)*(x-2)*...*3*2*1

function faktorijel(x){

if (x

Osnove JavaScripta


5.2. Poziv funkcije

Funkcija se poziva tako da se navede njezino ime, a argumenti funkcije u okruglim zagradama. Ukoliko funkcija nema argumenata, ne navodi se nita, ali zagrade su obavezne. Ukoliko se funkciji proslijedi manje argumenata nego ih sadri definicija funkcije, ostali argumenti dobiju vrijednost udefined. Npr. gore definirane funkcije pozivaju se:

Vjeba (5_funcije.html)

Iskoristite definicije funkcija print i udaljenost iz toke 5.1.

Deklarirajte varijable s_mjesto, i_mjerilo i f_ukupno. Varijabli s_mjesto dodijelite proizvoljno mjesto grada te varijabli i_mjerilo

dodijelite vrijednost 25.

Izraunajte udaljenost mjesta od mora, tj. duljinu puta od toke (0,0) do toke (3,5) kroz toku (2,1) na karti mjerila pohranjenog u varijabli i_mjerilo.

Ispiite dobrodolicu u grad.

Ispiite izraunatu udaljenost do mora.

print("Kako si, " + ime);

print("Pozdrav svima!");

ukupno = udaljenost(0,0,2,1) + udaljenost(2,1,3,5);

print("Vjerojatnost je: " + faktorijel(39)/faktorijel(52));



}

function udaljenost(x1, y1, x2, y2){

var dx = x2 - x1;

var dy = y2 - y1;

return Math.sqrt(dx*dx + dy*dy);

}

var mjesto = "Velegrad", mjerilo = 25, ukupno;

ukupno = Math.round(udaljenost(0,0,2,1) + udaljenost(2,1,3,5)) * mjerilo;

print("Dobrodoli u " + mjesto + "!");

print(mjesto + " je " + ukupno + " kilometara udaljen od mora.");

Dobrodoli u Velegrad! Velegrad je 150 kilometara udaljen od mora.

Osnove JavaScripta


6. Naredbe za kontrolu tijeka

6.1. Uvjetno izvoenje naredbi

Osnovna naredba za grananje je if naredba. Njezin prvi oblik je:

gdje je uvjet logiki izraz koji je ili true ili false. Kad operandi u izrazu nisu logiki prevode se u logike vrijednost i to tako da vrijednost null, undefined, 0, "", ili NaN postaje false. Sve ostale vrijednosti su true.

Blok naredbi izvrava se samo ako je uvjet zadovoljen, tj. ako je izraz u uvjetu jednak true. Vitiaste zagrade, koje oznaavaju blok naredbi, nisu potrebne ukoliko iza uvjeta slijedi samo jedna naredba, ali se preporua uvijek ih pisati radi jednoznanosti.

Drugi oblik je if..else oblik:

Ovaj oblik ima jo jedan blok, koji se izvodi ako uvjet nije zadovoljen.

6.2. Viestruka usporedba

Ukoliko je potrebno jednu vrijednost usporediti vie puta, rabi se nekoliko if..else naredbi:

Meutim, ovakav nain prilino je spor jer se, u najgorem sluaju, provjeravaju sve mogunosti pa program nije pregledan. U ovakvom sluaju rabi se naredba switch:

if(){

// naredbe

}

if(){

// naredbe

}

else {

// naredbe

}

if(n == 1){

// naredbe1

}

else if(n == 2){

// naredbe2

}

else if(n == 3){

// naredbe3

}

else {

// naredbe4

}

Osnove JavaScripta


Ova naredba provjerava je li izraz u okruglim zagradama (odmah iza

kljune rijei switch), istovjetan (koristi se operator ===), dakle, i po vrsti

jednak, jednoj od vrijednosti iza case kljune rijei. Ako takva vrijednost

postoji, izvrava se blok naredbi iza te vrijednosti do kraja cijele switch

naredbe ili do kljune rijei break, koja prekida blok koji se trenutano

izvrava, tj. zavrava switch naredbu. Dakle, mogue je napisati ovu naredbu tako da se jedan blok izvri za vie vrijednosti:

Ukoliko ne postoji vrijednost koja je istovjetna provjeravanom izrazu,

izvrava se blok iza kljune rijei default. Iako je uobiajeno da se

default blok pie posljednji (jer onda nije potrebno pisati break naredbu), to nije obavezno. Taj blok je ravnopravan ostalim blokovima.

6.3. Uvjetni operator

Uvjetni operator je jedini operator s tri operanda u JavaScriptu:

to je jednako sljedeem:

Ovaj operator najee se koristi pri inicijalizaciji varijabli:

switch(n){

case 1:

// naredbe1

break;

case 2:

// naredbe2

break;

case 3:

// naredbe3

break;

default:

// naredbe4

break;

}

switch(n){

case 1:

case 2:

case 3:

// naredbe1

break;

case 4:

// naredbe2

break;

default:

// naredbe3

break;

}

? naredba1 : naredba2;

if()

naredba1;

else

naredba2;

puno_ime = ime != null ? ime : 'Nepoznato';

Osnove JavaScripta


6.4. Petlja s uvjetom na poetku

Osnovna petlja u JavaScriptu je while petlja:

Tijelo petlje izvrava se sve dok je uvjet zadovoljen. Stoga

naredbom while(true){...} napravila bi se beskonana petlja. Ako uvjet nije zadovoljen prije poetka petlje, njezino tijelo se nee izvesti ni jednom.

6.5. Petlja s uvjetom na kraju

esto je potrebno izvriti neke postupke barem jednom i tek tada provjeriti odreeni uvjet. U takvom sluaju koristi se do..while konstrukcija:

Konstrukcija do..while se mora zavriti kao naredba toka-zarezom

(zato jer zavrava uvjetom, a ne blokom kao osnovna while petlja).

6.6. Klasina petlja

U sluaju kad je tono poznat broj ponavljanja nekog postupka ili su poznati poetni i krajnji uvjet, koristi se klasina for petlja:

To je pojednostavljena while petlja:

Primjer uporabe:

while(){

// naredbe

}

do {

// naredbe

} while();

for(; ; ) {

// naredbe

}

;

while(){

// naredbe

;

}

for(i = 0; i

Osnove JavaScripta


Vjeba (6_petlje.html)

Definirajte funkciju print kao u vjebama petog poglavlja.

Deklarirajte varijable i_a, i_b, s_operacija i i_raz.

Variajblama i_a i i_b dodijelite proizvoljne vrijednosti. Varijabli s_peracija dodijelite niz znakova +.

Provjerite je li varijabla i_a vea ili manja od i_b, rabei jednostavno grananje.

Ispiite koja je operacija zapisana u varijabli s_operacija, rabei viestruko grananje.

Izraunajte i ispiite "pravu razliku", tj. oduzmite vei broj od manjeg. Uporabite uvjetni operator.

Klasinom for petljom ispiite 10 redaka teksta: "For: redak x" gdje je x broj retka.

Napiite prethodnu for petlju pomou while petlje.

Saetak

U ovom poglavlju saznali smo kako se kontrolira tijek programa:

kontrola tijeka programa uvjetnim grananjem (if-else)

kontrola tijeka programa viestrukom usporedbom (switch)

kontrola tijeka programa uvjetnim operatorom

ponavljanje dijela programa petljom s uvjetom na poetku (while)

ponavljanje dijela programa petljom s uvjetom na kraju (do-while)

ponavljanje dijela programa klasinom petljom (for)

i_a je manji

Zbrajanje

Prava razlika: 3

For: redak 0

For: redak 1

For: redak 2

For: redak 3

For: redak 4

For: redak 5

For: redak 6

For: redak 7

For: redak 8

For: redak 9

For: redak 10

While: redak 0

While: redak 1

While: redak 2

While: redak 3

While: redak 4

While: redak 5

While: redak 6

While: redak 7

While: redak 8

While: redak 9

While: redak 10

Osnove JavaScripta




}

var i_a = 10, i_b = 13, s_operacija = '+', i_raz;

if(i_a > i_b){ print("i_a je veci"); }

else{ print("i_a je manji"); }

switch(s_operacija){

case '+' : print("Zbrajanje"); break;

case '-' : print("Oduzimanje"); break;

case '*' : print("Mnoenje"); break;

case '/' : print("Dijeljenje"); break;

default : print("Nepoznato");

}

i_raz = i_a > i_b ? i_a - i_b : i_b - i_a;

print("Prava razlika: " + i_raz);

for(i = 0; i

Osnove JavaScripta


7. Obrasci

7.1. Prvi obrazac

HTML obrazac je dio dokumenta koji sadri tekst i posebne elemente zvane kontrole (checkbox, radio gumb, izbornik, itd.) Korisnici obino "popune" obrazac mijenjajui kontrole (unose tekst, oznaavaju mogunosti, odabiru izbore, itd.). Na kraju "popunjavanja" korisnik alje podatke na obradu. Obrasci su najei nain prijave ili ispunjavanja podataka na HTML stranicama. Sastoje se od niza elemenata od kojih svaki ima svoje posebnosti. Ovo je najjednostavniji obrazac koja ima samo jedan gumb s tekstom "Poruka":

Kako je pisanje JavaScripta u odvojenoj datoteci praktinije, preporua se zasebno pisanje HTML-a i JavaScripta:

function prva(){

alert('Osnove JavaScripta');

}

Osnove JavaScripta


U sljedeim e primjerima uglavnom biti naveden dio samo unutar elementa. Ostatak HTML-a se ponavlja.

7.2. Unos kraih nizova znakova

Krai nizovi znakova (nizovi koji imaju samo jedan red) unose se u tzv. tekstualno polje. Primjer se nadogradi jednim poljem za unos imena:

Rabi se niz forms (indeks je 0 stoga to je ovaj obrazac prvi u nizu forms) to je prilino neitko, a moe biti i problematino. Da bi se izbjegao takav nain pisanja, svakom obrascu dodijeli se ime, a pristup svim vrijednostima e bit e preko naziva obrasca:

Odgovarajui program:

Dodaje se provjera je li ime prazno, te ukoliko je prazno, korisnik se upozori:

// obrazac2.js

function prva(){

alert('Osnove JavaScripta');

}

Unesite ime:

// obrazac3.js

function provjeri (){

var s_ime = '';

s_ime = document.forms[0].ime.value;

alert('Ime je: ' + s_ime);

}

Unesite ime:

// obrazac4.js

function provjeri(){

var s_ime = '';

s_ime = document.frm_a.ime.value;


}

obrazac2.htm

obrazac2.js

src="obrazac2.js"

Osnove JavaScripta


Proiri se obrazac poljem za prezime:

Dodaje se provjera je li prezime prazno:

Dakle, u sluaju da su i ime i prezime prazni, korisnik se upozori dva puta. Porastom broja polja, poveao bi se i broj poruka za korisnike to moe biti neugodno. Bolje je neovisno provjeriti polja i zapisati upozorenja u niz znakova koji se ispisuje na kraju:

// obrazac5.js


var s_ime = '';


if(s_ime == ''){

alert('Ime je prazno!');

}

else {


}

}

Unesite ime:

Unesite prezime:

// obrazac6.js


var s_ime = '';

var s_prezime = '';


s_prezime = document.frm_a.prezime.value;

if(s_ime == ''){

alert('Ime je prazno!');

}

else {


}

if(s_prezime == ''){

alert('Prezime je prazno!');

}

else {

alert('Prezime je: ' + s_prezime);

}

}

Osnove JavaScripta


Sada se poruka prikazuje samo jednom.

7.3. Odabir jedne od mogunosti

Dodaje se element radio za vrstu raunala:

// obrazac7.js


var s_ime = '';

var s_prezime = '';

var s_pogreska = '';

var s_poruka = '';



if(s_ime == ''){

s_pogreska += 'Ime je prazno!';

}

else {

s_poruka += 'Ime je: ' + s_ime;

}


s_pogreska += '\nPrezime je prazno!';

}

else {

s_poruka += '\nPrezime je: ' + s_prezime;

}

if(s_pogreska == ''){

alert(s_poruka);

}

else {

alert(s_greska);

}

}

Unesite ime:

Unesite prezime:

Raunalo:

Stolno

Prijenosno

Osnove JavaScripta


Program postaje sve sloeniji:

// obrazac8.js


var s_ime = '', s_prezime = '', s_pogreska = '';

var s_poruka = '', i_sel = -1, o_komp;



if(s_ime == ''){

s_pogreska += 'Ime je prazno!';

}

else {

s_poruka += 'Ime je: ' + s_ime;

}


s_pogreska += '\nPrezime je prazno!';

}

else {

s_poruka += '\nPrezime je: ' + s_prezime;

}

o_komp = document.frm_a.komp;

for(i = 0; i < o_komp.length; i++){

if(o_komp[i].checked){

i_sel = i;

}

}

if(i_sel == -1){

s_pogreska += '\nNiste izabrali vrstu raunala!';

}

else {

s_poruka += '\nRaunalo je: ' + o_komp[i_sel].value;

}


alert(s_poruka);

}

else {

alert(s_pogreska);

}

}

Osnove JavaScripta


7.4. Ukljuivanje i iskljuivanje jedne mogunosti

Ako je neka mogunost proizvoljna onda upotrebljava se tzv. checkbox element:

Obrada takvog elementa je jednostavna:

Unesite ime:

Unesite prezime:

Raunalo:

Stolno

Prijenosno

Modem je vanjski.

// obrazac9.js

...

if(i_sel == -1){

s_pogreska += '\nNiste izabrali vrstu raunala!';

}

else {

s_poruka += '\nRaunalo je: ' + o_komp[i_sel].value;

}

s_poruka += '\nModem je '

s_poruka += document.frm_a.modem.checked ? ' vanjski!' : 'unutranji!';


alert(s_poruka);

}

else {

alert(s_pogreska);

}

}

Osnove JavaScripta


7.5. Odabir jedne od mogunosti na drugi nain

Kad postoji veliki broj mogunosti, nepregledno je sve ih ispisati. Element select prikazuje samo izabranu mogunost dok korisnik ne klikne na njega.

Obrada select elementa malo je sloenija. Naime, svaki select objekt u

JavaScriptu ima podniz (options) u kojem su smjetene vrijednosti i tekstovi za svaku pojedinu mogunost izbora.

Unesite ime:

Unesite prezime:

Raunalo:

Stolno

Prijenosno

Modem je vanjski.

Operacijski sustav:

Windows NT 4

Windows 2000

Windows XP

Windows 2003

// obrazac10.js



var s_poruka = '', i_sel = -1, o_komp, i_indeks;

...

s_poruka += '\nModem: ' s_poruka += document.frm_a.modem.checked ? ' vanjski!' : ' unutranji!';

i_indeks = document.frm_a.os.selectedIndex;

s_poruka += '\nOS: ';

s_poruka += document.frm_a.os.options[i_indeks].text;


alert(s_poruka);

}

else {

alert(s_pogreska);

}

}

Osnove JavaScripta


Svaki element moe imati atribut value, to je korisno kada je korisniku potrebno prikazati odreeni tekst (tekst unutar elementa), a postaviti vrijednost elementa na drugu vrijednost (tekst u value

atributu). Vrijednosti teksta pristupamo text svojstvom, a vrijednosti

atributa value svojstvom. Prepravljeni obrazac izgleda ovako:

Prilagodi se i skripta:

Unesite ime:

Unesite prezime:

Raunalo:

Stolno

Prijenosno

Modem je vanjski.

Operacijski sustav:

Windows NT 4

Windows 2000

Windows XP

Windows 2003

// obrazac11.js



var s_poruka = '', i_sel = -1, o_komp, i_indeks;

...

s_poruka += '\nModem: ' s_poruka += document.frm_a.modem.checked ? ' vanjski!' : ' unutranji!';




s_poruka += ' (';

s_poruka += document.frm_a.os.options[i_indeks].value;

s_poruka += ')!';


alert(s_poruka);

}

else {

alert(s_pogreska);

}

}

Osnove JavaScripta


Meutim operacijski sustavi imaju i zakrpe o kojima ovisi kako se ponaa sam sustav, a i pojedine aplikacije. Stoga se dodaje jo i izbor "Service packa":

Unesite ime:

Unesite prezime:

Raunalo:

Stolno

Prijenosno

Modem je vanjski.

Operacijski sustav:

Windows NT 4

Windows 2000

Windows XP

Windows 2003

Service pack:

Service pack 1

Service pack 2

Service pack 3

Service pack 4

Service pack 5

Service pack 6

Osnove JavaScripta


I prilagodi se skripta:

U ovakvom obrascu korisnik moe izabrati dosta neobine kombinacije, kao to su: Windows XP SP 6 ili Windows 2003 SP3. Dakle, za svaki operacijski sustav treba definirati njegov skup zakrpa, koji se dinamiki mijenja ovisno o odabranom sustavu. Stoga se u obrascu isprazni popis zakrpa:

// obrazac12.js



var s_poruka = '', i_sel = -1, o_komp, i_indeks, i_indeks_sp;

...




s_poruka += ' (';

s_poruka += document.frm_a.os.options[i_indeks].value;

s_poruka += ')!';

i_indeks_sp = document.frm_a.srv_pack.selectedIndex;

s_poruka += '\nSP: ';

s_poruka += document.frm_a.srv_pack.options[i_indeks_sp].text;

s_poruka += ' (';

s_poruka += document.frm_a.srv_pack.options[i_indeks_sp].value;

s_poruka += ')!';


alert(s_poruka);

}

else {

alert(s_pogreska);

}

}

Unesite ime:

Unesite prezime:

Raunalo:

Stolno

Prijenosno

Modem je vanjski.

Operacijski sustav:

Windows NT 4

Windows 2000

Windows XP

Windows 2003

Service pack:

Osnove JavaScripta


Nedostaje funkcija koja e puniti popis zakrpa ovisno o odabranom operacijskom sustavu. Kako je popis na poetku prazan, postavit e se kao da je izabran prvi sustav na popisu, tj. onaj s indeksom 0. Pojavljuju se novi

atributi za obradu dogaaja onChange u elementu i onLoad u

elementu. Detaljan opis dogaaja nalazi se u dodatku Dogaaji.

Takoer se pojavljuje objekt this, koji oznaava trenutani objekt. U ovom primjeru bi bilo sukladno napisati

Definira se nova funkcija i nove varijable:

document.frm_a.os.selectedIndex

Unesite ime:

Unesite prezime:

Raunalo:

Stolno

Prijenosno

Modem je vanjski.

Operacijski sustav:

Windows NT 4

Windows 2000

Windows XP

Windows 2003

Service pack:

// obrazac13.js

var sp = new Array(1); // Definira se novi niz

// Napuni se niz nizova

sp = [

// NT 4

["(Nema);nema", "Service Pack 1;sp1", "Service Pack 2;sp2",

"Service Pack 3;sp3", "Service Pack 4;sp4",


"Service Pack 6a;sp6a"],

// 2000

["(Nema);nema", "Service Pack 1;sp1", "Service Pack 2;sp2",


"Service Pack 4 & Updates;sp4upd"],

// XP

["(Nema);nema", "Service Pack 1;sp1", "Service Pack 2;sp2"],

// 2003

["(Nema);nema", "Service Pack 1;sp1"]

];

Osnove JavaScripta


// Funkcija koja puni odereeni select element

// Argumenti:

// o_select: objekt kojega se puni

// a_array: niz iz kojega se puni

// i_index: iz kojeg podniza se puni

function puni_select(o_select, a_array, i_index){

var i_separator, i, s_opt_text, s_opt_value;

// Postavi se duljina niza na 0, tj. brie se

o_select.options.length = 0;

for(i=0; i < a_array[i_index].length; i++){

// Provjeri se gdje je separator

i_separator = a_array[i_index][i].indexOf(';');

// Nema ga

if(i_separator == -1){

// Tekst za prikaz odabira

s_opt_text = a_array[i_index][i];

// Vrijednost odabira

s_opt_value = s_opt_text;

}

// Separator postoji

else {

// Prvi dio je tekst za prikaz odabira

s_opt_text = a_array[i_index][i].substr(0, i_separator);

// Drugi dio je vrijednost odabira

s_opt_value = a_array[i_index][i].substr(i_separator + 1);

}

// Stvori se novi lan niza i postavi se vrijednosti

o_select.options[i] = new Option(s_opt_text, s_opt_value);

}

}

Saetak

Ovo poglavlje uvodi mogunost nadzora upisa podataka putem osnovnih elementa obrasca:

gumba

polja za unos teksta

odabira jedne od mogunosti

ukljuivanja jedne mogunosti

odabira jedne od mogunosti na drugi nain (kompaktniji)

pristupa pojedinom elementu i njegovim vrijednostima

izrade dinamikih popisa

Osnove JavaScripta


8. Korisne skripte

8.1. Rollover

Rollover (okretanje) je jedan od najee koritenih vizualnih efekata kod kojih se rabi JavaScript. To je efekt kad se slika (obino je to slika s tekstom koja stoji u izborniku) promijeni u trenutku kad korisnik postavi mi na tu sliku.

Primjer:

Napisana je jedna funkcija koja postavlja src argument za odreeni objekt (u naem sluaju je to this, tj. trenutani objekt).

Uporabom iste funkcije mogue je upravljati i drugim objektima. Npr. napravite mali album:

function roll(o_img, s_new_src){

o_img.src = s_new_src;

}

Slika A

Slika B

Slika C

Osnove JavaScripta


8.2. Vrsta preglednika

Kao to je ranije pokazano JavaScript nije jednak u svim preglednicima. Takoer niti HTML nije jednak u svim preglednicima. Stoga postoji potreba identificiranja preglednika da bi se elementi prikazali na najbolji mogui nain u odreenom pregledniku. Svi preglednici trebali bi se predstaviti odreenim postupkom. Veina ih to i ini no to treba pisati u toj "posjetnici" nije odreeno te nastaju problemi. Stoga je kd sloen. Dio koji ide u HTML dokument izgleda ovako:

A program koji puni odreene varijable ovako:

document.write('Browser name/version: ');

if(is_ie){

document.write("Internet Explorer");

}

else if(is_nav){

document.write("Netscape Navigator");

}

else if(is_moz){

document.write("Mozilla");

}

else if(is_fb){

document.write("Firebird");

}

else if(is_fx){

document.write("Firefox");

}

if(is_gecko){

document.write(" (Gecko)");

}

document.write(" " + i_major + " (" + i_minor + ")");

document.write('navigator.appCodeName: ' + navigator.appCodeName + '');

document.write('navigator.appName: ' + navigator.appName + '');

document.write('navigator.appVersion: ' + navigator.appVersion + '');

document.write('navigator.userAgent: ' + navigator.userAgent + '');

document.write('navigator.platform: ' + navigator.platform + '');

Osnove JavaScripta


var s_agent = navigator.userAgent.toLowerCase();

var s_app_ver = navigator.appVersion.toLowerCase();

var i_minor = parseFloat(s_app_ver);

var i_major = parseInt(i_minor);

var i_ie_pos = s_app_ver.indexOf('msie');

if (i_ie_pos != -1) {

i_minor = s_app_ver.substring(i_ie_pos + 5, s_app_ver.indexOf(';',

i_ie_pos));

i_major = parseInt(i_minor);

}

var is_ie = (i_ie_pos != -1);

var is_gecko = ((navigator.product) &&

(navigator.product.toLowerCase()=="gecko")) ? true : false;

var is_gver = navigator.productSub;

var is_moz = ((s_agent.indexOf('mozilla/5')!= -1) &&

(s_agent.indexOf('compatible') == -1) &&

(is_gecko) &&

((navigator.vendor == "") ||

(navigator.vendor == "Mozilla") ||

(navigator.vendor == "Debian")));

var is_fb = ((s_agent.indexOf('mozilla/5')!= -1) &&

(s_agent.indexOf('compatible')== -1) &&

(is_gecko) &&

(navigator.vendor == "Firebird"));

var is_fx = ((s_agent.indexOf('mozilla/5')!= -1) &&


(is_gecko) &&

(navigator.vendor == "Firefox"));

if ((is_moz)||(is_fb)||(is_fx)) {

var i_moz_ver = (navigator.vendorSub) ? navigator.vendorSub : 0;

if(!(i_moz_ver)) {

i_moz_ver = s_agent.indexOf('rv:');

i_moz_ver = s_agent.substring(i_moz_ver+3);

i_paren = i_moz_ver.indexOf(')');

i_moz_ver = i_moz_ver.substring(0, i_paren);

}

i_minor = i_moz_ver;

i_major = parseInt(i_moz_ver);

}

var is_fb_ver = i_moz_ver;

var is_fx_ver = i_moz_ver;

var is_nav = ((s_agent.indexOf('mozilla')!=-1) &&


(!is_moz) &&

(!is_fb) &&

(!is_fx));

Osnove JavaScripta


8.3. Preusmjeravanje

Ponekad postoji potreba da se na osnovu odreenih kriterija (recimo jezik u kojemu su stranice pisane ili vrsta preglednika koju ima korisnik) korisnici upute na druge stranice. U tu svrhu rabi se preusmjeravanje, pomou location objekta:

8.4. Provjera pomou regularnih izraza

Prilikom unosa podataka, korisnici sluajno unose nepravilne podatke. Bilo bi poeljno da se moe provjeriti to su korisnici unijeli te da ih se moe upozoriti ukoliko su podaci neispravni. JavaScript od inaice 1.2 ima u sebi podrku za regularne izraze (regular expressions), koji omoguuju pisanje odreenih pravila (izraza) i provjeru pridrava li se odreeni niz znakova tih pravila. Sr je regularnih izraza suradnja dvaju dijelova: to elimo i koliko toga elimo. Prvi se naziva kvalifikator, a drugi kvantifikator.

Kvalifikator Znaenje

Tono taj znak

[...] Skup znakova unutar uglatih zagrada

[^...] Komplement skupa znakova, tj. ne znakove unutar uglatih zagrada

. Bilo koji znak, osim kraja reda

\w Bilo koje ASCII podcrta, slovo ili broj, isto kao [a-zA-Z0-9_]

\W Bilo koji znak koji nije ASCII podcrta, slovo ili broj, isto kao [^a-zA-Z0-9_]

\s Razmak

\S Bilo koji znak koji nije razmak

\d Broj, isto kao [0-9]

\D Bilo koji znak koji nije broj, isto kao [^0-9]

Kvantifikator Znaenje

{n,m} Prethodni kvalifikator se mora pojaviti najmanje n puta, a najvie m puta

{n,} Prethodni kvalifikator se mora pojaviti najmanje n puta (ili vie)

{n} Prethodni kvalifikator se mora pojaviti tono n puta

? Prethodni kvalifikator se moe pojaviti jednom, a i ne mora; isto kao {0,1}.

+ Prethodni kvalifikator se mora pojaviti barem jednom; isto kao {1,}

* Prethodni kvalifikator se moe pojaviti bilo koliko puta, a i ne mora; isto kao {0,}.

Osnove JavaScripta


Ako je u proizvoljan izraz potrebno staviti nekoliko mogunosti, onda se one grupiraju u okrugle zagrade i odvoje okomitom crtom. Npr. sljedei izraz odgovara brojevima 099, 098, 091 i 092:

Sljedei izraz odgovara bilo kojem nainu pisanja rijei JavaScript:

Analiza izraza:

^ znak za poetak (retka ili niza znakova)

[Jj] na poetku se moe pojaviti bilo koji znak (samo jedan) iz skupa (ovdje J i j)

(ava)? niz znakova "ava" (grupirani okruglim zagradama) moe se, ali i ne mora pojaviti

\s? jedan razmak moe se pojaviti, ali i ne mora

[Ss] moe se pojaviti bilo koji znak (samo jedan) iz skupa (ovdje S i s)

$ znak za kraj (retka ili niza znakova)

Dakle, bilo koji od sljedeih nizova odgovara izrazu: "JavaScript", "javascript", "JScript", "Java Script", pa ak i "javaScript".

Nedostaje funkcija koja e uneseni niz znakova usporediti s navedenim izrazom te vratiti informaciju odgovara li niz znakova izrazu. Najprije obrazac:

U ovom obrascu dozvoljeno je da se za ime i prezime upiu samo slova (ASCII i slova s dijakritikim znakovima), razmak i crtica barem jednom (uoite znak + pred kraj izraza). Za telefonski broj mogue je unijeti

predbroj i znak za razdvajanje (uoite ? iza grupirajuih zagrada). Predbroj

poinje znakom 0, nakon kojega slijedi ili 1 ili dvije znamenke. Znak za razdvajanje moe biti ili razmak ili kosa crta (ovdje osigurana s obrnutom kosom crtom, jer kosa crta oznaava poetak i kraj regularnog izraza). Nakon toga slijedi jedan broj od 1 do 9 (prva nula nema smisla) te nakon njega dva ili tri broja koje moe, ali ne mora, slijediti crtica za razdvajanje. Na kraju slijede tono tri broja. Ovdje se nalazi program koji provjerava izraze (program uz provjeru izraza i vraa fokus na polje koje nije ispravno, jer se hvata dogaaj onBlur koji se okida u trenutku naputanja polja):

09(9|8|2|1)

^[Jj](ava)?\s?[Ss]cript$

Ime i prezime

Telefonski broj

Osnove JavaScripta


Program se doradi tako da se doda argument koji predstavlja poruku koja e se prikazati prilikom pogreke te se korisniku pomogne tako da se iz njegovog neispravnog niza znakova uklone znakovi koji tu ne smiju biti (no, to jo uvijek ne znai da je niz pravilnog oblika):

Odgovarajui obrazac:

function test(s_in, o_focus, s_regex){

var re = new RegExp(s_regex); // regularni izraz

if((s_in != '') && (re.test(s_in) == false)){

alert('Uneena vrijednost nije pravilnog oblika!');

// Ovo je hack jer focus ne radi po standardu u Mozilli/Firefoxu

setTimeout(function(){o_focus.focus();},10);

}

}

function test(s_in, o_focus, s_regex, s_keep, s_msg){

var re = new RegExp(s_regex); // glavni regularni izraz

var re2 = new RegExp(s_keep); // regularni izraz dozvoljenih znakova

var s_znak, i, s_out = s_in;

if((s_in != '') && (re.test(s_in) == false)){

alert(s_msg);

s_out = '';

for (i = 0; i < s_in.length; i++){

s_znak = s_in.charAt(i)

if (re2.test(s_znak) != false){

s_out += s_znak;

}

}

// Ovo je hack jer focus ne radi po standardu u Mozilli/Firefoxu

setTimeout(function(){o_focus.focus();},10);

}

return(s_out);

}

Ime i prezime

Telefonski broj

Osnove JavaScripta


8.5. Upravljanje preglednikom

Window objekt omoguuje rukovanje prozorom preglednika. Ovaj primjer pokazuje rukovanje trenutanim prozorom:

Ovim se programom upravlja stanjem preglednika:

Rukovanje trenutanim prozorom preglednika esto su zlorabili oglaivai, pa je u dananjim preglednicima mogue iskljuiti odziv na mijenjanje izgleda prozora preglednika.

esto je potrebno kakav sadraj (najee hijerarhijski organiziran sadraj) prikazati u novom prozoru. To se postie uporabom window.open funkcije, koja ima openiti oblik:

Od parametara su najzanimljiviji ovi:

top, left, height, width: y koordinata gornjeg ruba, x koordinata lijevog ruba, visina, irina

menubar, toolbar, location, scrollbars, status, resizable: izbornik, alatna traka, adresno polje, trake za pomak, statusno podruje, prozoru se moe mijenjati veliina

Trenutni prozor:

function resize(){

window.resizeTo(document.frm_win.wd.value, document.frm_win.ht.value);

}

function resize_by(){

window.resizeBy(document.frm_win.wd_by.value, document.frm_win.ht_by.value);

}

function move(){

javascript

Documents