predavanje broj 6 ad352-p06 java scriptad420.metropolitan.ac.rs/.../ad352-p06-javascript.pdf ·...

AD352 VEB DIZAJN 2

Predavanje broj 6

AD352-P06

Java Script

Nedelja Čas Tematska jedinica

Predavanja Lekcija ili aktivnost

Rezultat – znanja ili veštine koje student treba da

dobije

6 1

Java Script

Java Script Uvod Šta je Java Script Kako se koristi Naredbe Komentari Variable (promenljive) Znakovi računskih operacija If / If...else/ If...else if...else Switch Kutije Funkcije Trajanje promenljive Naredbe za prekid i nastavljanje Događaji

Osnovno poznavanje najpopularnijeg scripta na internetu, koji nam je potreban kao predznanje da bismo savladali buduće gradivo.

2

Copyright © 2010 – UNIVERZITET METROPOLITAN, Beograd. Sva prava zadržana. Bez prethodne pismene dozvole od strane Univerziteta METROPOLITAN zabranjena je reprodukcija, transfer, distribucija ili memorisanje nekog dela ili čitavih sadržaja ovog dokumenta., kopiranjem, snimanjem, elektronskim putem, skeniranjem ili na bilo koji drugi način.

Copyright © 2010 BELGRADE METROPOLITAN UNIVERSITY. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, without the prior written permission of Belgrade Metropolitan University.

Oktobar, 2010.

AD352 Veb dizajn 2 Predavanje br. 6

Naziv predavanja: Java Script 2/30

SADRŽAJ

JAVA SCRIPT ___________________________________________________________________

Java Script Uvod 2

Šta je Java Script 2

Kako se koristi 2

Naredbe 6

Komentari 7

Variable (promenljive) 9

Znakovi računskih operacija 11

If / If...else/ If...else if...else 15

Switch 19

Kutije 18

Funkcije 20

Trajanje promenljive 22

Naredbe za prekid i nastavljanje 25

Događaji 26



JavaScript uvod

JavaScript je najpopularniji scripting jezik na internetu, i funkcioniše u svim većim pretraživačima, kao što su Internet Explorer, Firefox, Chrome, Opera i Safari.

Šta je JavaScript?

• JavaScript je dizajniran da doprinese interaktivnosti HTML stranica • JavaScript je “scripting” (šifrovani) jezik • “Scripting” jezik je lagani programski jezik • JavaScript je obično utisnut direktno u HTML strane • JavaScript je interpretirani jezik (to znači da se šifre izvršavaju bez prethodne dorađivanja) • Svako može da koristi JavaScript bez kupovanja licence

Da li su Java i JavaScript ista stvar?

NE!

Java i JavaScript su dva potpuno različita jezika i u konceptu i u dizajnu!

Java (koji je razvio Sun Microsystems) je moćan i mnogo složeniji programski jezik – u istoj kategoriji sa C i C++.

Šta JavaScript može?

• JavaScript daje HTML dizajnerima alatku (sredstvo) za programiranje – Tvorci HTML-a obično nisu programeri, ali JavaScript je šifrovani jezik sa veoma prostom sintaksom! Gotovo svako može da stavi male “isečke” koda u svoje HTML strane

• JavaScript može da stavi dinamičan tekst u HTML stranu – Ovakva JavaScript izjava: document.write("<h1>" + name + "</h1>") može da napiše promenljiv tekst na HTML strain

• JavaScript može da reaguje na događaje – JavaScript se može podesiti da se pokrene kad se nešto desi, na primer kad strana završi sa učitavanjem ili kad korisnik klikne na neki HTML element

• JavaScript može da čita i piše HTML elemente – JavaScript može da čita i promeni sadržaj nekog HTML elementa

• JaavScript se može koristiti da potvrdi podatke – JavaScript se može koristiti za potvrdu forme podataka pre nego što se pošalju na server. Ovim se server oslobađa dodatne obrade podataka.

• JavaScript se može koristiti da uoči pretraživač posetioca - JavaScript se može koristiti da uoči pretraživač posetioca, i da - u zavisnosti od pretraživača –učita neku drugu stranu posebno određenu za taj pretraživač.

• JavaScript se može koristiti za stvaranje (pravljenje) “cookies” – JavaScrip može da se koristi da se skladište i preuzimaju podaci sa računara posetioca

Kako se koristi JavaScript

HTML <script> tag se koristi da se umetne JavaScript u HTML stranu.



Stavite JavaScript u HTML stranu

Dolenavedeni primer pokazuje kako se JavaScript koristi za pisanje teksta na web stranici:

<html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>

Primer ispod pokazuje kako se JavaScript-u dodaju HTML tagovi:

<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>"); </script> </body> </html>

Objašnjenje primera

Da bismo JavaScript umetnuli u HTML stranu, koristimo <script> tag. Unutar <script> taga koristimo tipni atribut da bi definisali šifrovani jezik.

Tako, <script type="text/javascript"> and </script> nam govore gde JavaScript počinje i gde se završava:

<html> <body> <script type="text/javascript"> ... </script> </body> </html>

Komanda document.write je standardna JavaScript komanda da bi se ispisao neki rezultat na stranici.

Kad unesemo document.write komandu između <script> i </script> tagova, pretraživač će je prepoznati kao JavaScript komandu i izvršiti liniju koda. U ovom slučaju pretraživač će ispisati Hello World! na stranici:

<html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>

Napomena: Kad ne bismo uneli <script> tag, pretraživač bi komandu document.write tretirao kao čist tekst, i samo bi ispisao ceo red na stranici.

Kako rukovati prostim pretraživačima

Pretraživači koji ne podržavaju JavaScript prikazivaće JavaScript kao sadržaj stranice.

Da bismo sprečili ovu pojavu, a i kao deo JavaScript standard, HTML comment tag bi trebalo da se koriste da “sakriju” JavaScript.

Samo dodajte HTML comment tag  (kraj komentara) nakon poslednje JavaScript izjave, na primer:

<html> <body> <script type="text/javascript">  </script> </body> </html>

Dve kose crte na kraju linije komentara je simbol JavaScript komentara. Ovo sprečava da JavaScript izvrši --> tag.

Gde staviti JavaScript JavaScript-ovi se mogu staviti u body i head delove HTML stranice.

Gde staviti JavaScript

JavaScript će es u jednoj stranici izvršiti odmah, prilikom učitavanja stranice u pretraživač. To nije uvek ono što mi želimo. Ponekad želimo da se script izvrši kad se strana učita, ili čak u neko kasnije vreme, na primer kad korisnik klikne na tipku na tastaturi. Kad je ovo slučaj, script stavljamo unutar funkcije, a o funkcijama ćete saznati više u narednom poglavlju.

Script-ovi u <head-u>

Script-ovi koji treba da se izvrše onda kad su aktivirani, ili kad je događaj aktiviran, smešteni su funkcijama.

Postavite svoje funkcije u head deo, ovako su sve na jednom mestu, i ne mešaju se sa sadržajem strane.

<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>



Script-ovi u <body>

Ukoliko ne želite da vaš script bude smešten unutar funkcije, ili ako vaš script treba da ispiše sadržaj strane, trebalo bi da bude postavljen u body deo.

<html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>

Script-ovi u <head> i <body> delu

U svoj document možete staviti neograničen broj script-ova, tako da možete imati script-ove i u body i u head delu.

<html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>

Korišćenje Eksternog JavaScript-a

Ukoliko želite da izvršite isti JavaScript na nekoliko strana, a da pritom ne morate da pišete isti script na svakoj strain, možete da ispišete JavaScript u eksternom fajlu.

Eksterni JavaScript fajl sačuvajte sa .js fajl ekstenzijom.

Napomena: Eksterni script ne može da sadrži <script> i </script> tagove!

Da biste koristili eksterni script, usmerite kursor ka .js fajlu u “src” atributu <script> taga:



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

Napomena: Imajte na umu da treba da postavite script tačno tamo gde biste ga inače napisali!

JavaScript naredbe

JavaScript je niz naredbi koje pretraživač treba da izvrši.

JavaScript je Case Sensitive

Za razliku od HTML-a, JavaScript razlikuje velika i mala slova - stoga obratite pažnju na to kako ih koristite pri pisanju JavaScript naredbi, kad stvarate ili dajete nalog promenjivim, objektima i funkcijama.

JavaScript naredbe

JavaScript naredba je komanda pretraživaču. Svrha ove komande je da kaže pretraživaču šta da uradi.

JavaScript naredba nalaže pretraživaču da napiše “Hello Dolly” na web stranici:

document.write("Hello Dolly");

Normalno je da se na kraju svake izvršne naredbe doda tačka-zarez. Većina misli da je ovo dobra programerska praksa, i najčešće ćete ovo videti u JavaScript primerima na web-u.

Tačka-zarez nije obavezan znak, proizvoljan je (u skladu sa JavaScript standardom), i pretraživač bi trebalo kraj reda da interpretira kao kraj naredbe. Zahvaljujući ovoj pojavi, često ćete biti u prilici da primere bez tačke-zareza na kraju.

Napomena: Upotreba tačke-zareza omogućuje pisanje višestrukih naredbi u jednom redu.

JavaScript kod

JavaScript kod (ili samo JavaScript) je niz JavaScript naredbi.

Pretraživač izvršava svaku naredbu redosledom kojim je napisana.

Ovaj primer će napisati heading i dva paragraga web strane:



JavaScript komentari u više redova

Komentari koji se prostiru na više redova počinju sa /* a završavaju se sa */.

Sledeći primer koristi komentar u više redova da objasni kod:

<script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>

Upotreba komentara za sprečavanje izvršenja

U narednom primeru komentar se koristi da se spreči izvršenje samo jednog reda u kodu (ovo može biti pogodno za otklanjanje bagova:

<script type="text/javascript"> //document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>

U narednom primeru komentar se koristi da bi se sprečilo izvršenje block koda (može biti pogodno za otklanjanje bagova):

<script type="text/javascript"> /* document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); */ </script>

Upotreba komentara na kraju reda U sledećem primeru komentar je smešten na kraj reda koda:

<script type="text/javascript"> document.write("Hello"); // Write "Hello" document.write(" Dolly!"); // Write " Dolly!" </script>



JavaScript promenljive

Varijable su “kontejneri” za skladištenje informacija.

Da li se sećate algebre iz škole?

Da li se sećate algebra iz škole? x=5, y=6, z=x+y

Da li se sećate da neko slovo (na primer x) može da se upotrebi kao nosilac neke vrednosti (na primer 5), i da se ova informacija može upotrebiti da se izračuna da je vrednost z 11?

Ova slova se nazivaju promenljive, a promenljive se mogu koristiti kao nosioci vrednosti (x=5) ili izraza (z=x+y).

JavaScript promenjive

Kao što je slučaj sa algebrom, JavaScript promenjive sadrže vrednosti ili izraze.

Varijabla može imati kraće ime, kao na primer x, ili deskriptivnije ime, na primer ime automobila.

Pravila za imena JaavScript varijabli:

• Imena promenljivih su case-sensitive (razlikuju velika i mala slova) (y i Y su dve različite varijable) • Imena promenljivih moraju počinjati nekim slovom ili karakterom za podvlačenje teksta

Primer

Vrednost promenjive može da se menja tokom izvršenja script-a. Da biste prikazali ili promenili vrednost promenjive, možete joj pristupiti putem njenog imena.

Deklarisanje (Kreiranje) JavaScript promenjivih

Kreiranje varijabli u JavaScript-u se najčešće naziva deklarisanje promenjivih.

JavaScript promenjive možete deklarisati pomoću var naredbe:

var x; var carname;

Posle deklarisanja prikazanog iznad, promenjive su prazne (još uvek nemaju nikakvu vrednost). Međutim, promenjivama se vrednosti mogu dodati i kad ih deklarišete:



var x=5; var carname="Volvo";

Nakon izvršenja gorenevedenih naredbi, promenjiva x će imati vrednost 5, a ime automobila će imati vrednost Volvo.

Napomena: Kada promenjivoj dodeljujete tekstualnu vrednost, koristite znakove navoda oko te vrednosti.

Dodeljivanje vrednosti nedeklarisanim JavaScript varijablama

Ako promenjivim dodelite vrednosti koje još nisu deklarisane, promenjive će automatski biti deklarisane.

Sledeće naredbe:

x=5; carname="Volvo";

imaju isti efekat kao:

var x=5; var carname="Volvo";

Ponovno deklarisanje JavaScript varijabli

Ako ponovo deklarišete JavaScript promenjivu, ona neće izgubiti svoju prvobitnu vrednost.

var x=5; var x;

Nakon izvršenja gorenavedene naredbe, promenjiva x će i dalje imati vrednost 5. Vrednost x se ne resetuje (ili poništava) kad je ponovo deklarišete.

JavaScript aritmetika

Kao i kod algebre, sa JavaScript promenjivim možete vršiti računske operacije:

y=x-5; z=y+5;

O znakovima koji se mogu koristiti za računske operacije ćete saznati više u sledećem poglavlju ovog uputstva.



JavaScript znakovi računskih operacija

= se koristi da dodeli vrednosti.

+ se koristi za dodavanje vrednosti.

Oznaka računske operacije = se koristi da dodeli vrednosti JavaScript promenjivim.

Aritmetička računska operacija + se koristi za sabiranje vrednosti.

y=5; z=2; x=y+z;

Vrednost x, nakon izvršenja naredbe navedene iznad je 7.

JavaScript aritmetički znakovi računskih operacija Znakovi računskih operacija se koriste za računanje između promenjivih i/ ili vrednosti.

Ako uzmemo da je y=5, donja tabela objašnjava znakove računskih operacija:

Oznaka Opis Primer Rezultat

+ Sabiranje x=y+2 x=7

- Oduzimanje x=y-2 x=3

* Množenje x=y*2 x=10

/ Deljenje x=y/2 x=2.5

% Apsolutna vrednost/ modul (ostatak deljenja) x=y%2 x=1

++ Uvećanje x=++y x=6

-- Umanjenje x=--y x=4



JavaScript oznake računskih operacija za dodeljivanje vrednosti Oznake dodeljivanja računskih operacija se koriste da dodele vrednosti JavaScript promenjivim.

Ako uzmemo da je x=10 i y=5, donja tabela objašnjava oznake računskih operacija za dodeljivanje:

Oznaka Primer Isto kao Rezultat

= x=y x=5

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

%= x%=y x=x%y x=0

Znak + upotrebljen u nizu znakova

Znak + se takođe može koristiti da se niz promenjivih ili tekstualnih vrednosti sabere.

Da biste sabrali dva ili više nizova promenjivih, koristite znak +.

txt1="What a very"; txt2="nice day"; txt3=txt1+txt2;

Nakon izvršenja gornje naredbe, promenjiva txt3 sadrži “What a very nice day”.

Da biste dodali razmak između dva niza, umetnite razmak u jedan od nizova:

txt1="What a very "; txt2="nice day"; txt3=txt1+txt2;

ili umetnite razmak unutar izraza:

txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2;

Nakon izvršenja gornjih naredbi, promenjiv txt3 sadrži:

“What a very nice day”.



Sabiranje nizova i brojeva

Pravilo glasi: Ako saberete broj i niz, rezultat će biti niz!

x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x);

JavaScript komparativni i logički znakovi računskih operacija

Komparativni i logički znakovi se koriste za testiranje tačnih ili netačnih tvrdnji.

Komparativni znakovi

Komparativni znakovi se koriste u logičkim naredbama da odrede jednakost ili razliku između promenjivih ili vrednosti.

Ako uzmemo da je x=5, tabela ispod objašnjava komparativne znake računskih operacija:

Znak Opis Primer

== je jednako x==8 je netačno

=== je tačno jednako (vrednost i tip) x===5 je tačno x==="5" je netačno

!= nije jednako x!=8 je tačno

> je veće od x>8 je netačno

< je manje od x<8 je tačno

>= je veće ili jednako x>=8 je netačno

<= je manje ili jednako x<=8 je tačno



Kako se mogu koristiti

Komparativni znakovi računskih operacija se mogu koristiti u uslovnim naredbama da se uporede vrednosti i preduzme radnja u zavisnosti od rezultata:

if (age<18) document.write("Too young");

Logički znakovi računskih operacija

Logički znakovi računskih operacija se koriste da odrede logiku između verijabli ili vrednosti.

Ako uzmemo da je x=6 i y=3, donja tabela objašnjava logičke znakove računskih operacija:

Znak Opis Primer

&& i (x < 10 && y > 1) je tačno

|| ili (x==5 || y==5) je netačno

! nije !(x==y) je tačno

Uslovni znak računske operacije

JavaScript takođe sadrži uslovni znak računske operacije koji dodeljuje vrednost promenjivoj na osnovu nekog uslova.

Sintaksa

variablename=(condition)?value1:value2

Primer

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

Ako promenjiva visitor ima vrednost “PRES”, onda će promenjiva greeting biti dodeljena vrednost “Dear President”, ili ćeojj biti dodeljeno “Dear”.



JavaScript Ako... Onda Naredbe

Uslovne naredbe se koriste za vršenje različitih radnji u skladu sa različitim uslovima.

Uslovne naredbe

Veoma često, kad pišete kod, želite da se u skladu sa različitim odlukama vrše i različite radnje. Da biste ovo postigli, u svom kodu možete koristi uslovne naredbe.

U JavaScript-u postoje sledeće uslovne naredbe:

• if naredba (“ako”)- koristite ovu naredbu da bi se izvršio neki kod samo ako je navedeni uslov ispunjen • if...else naredba (“ako... onda”) - koristite ovu naredbu da se izvrši neki kod samo ako je uslov ispunjen, a drugi

kod ako uslov nije ispunjen • If...else if...else - koristite ovu naredbu da izaberete jedan od mnogih kod blokova koji treba da se izvrše • switch naredba - koristite ovu naredbu da izaberete jedan od mnogih kod blokova koji treba da se izvrše

If naredba

Koristite if naredbu da se izvrši neki kod samo ako je određeni uslov ispunjen.

Sintaksa

if (condition) { code to be executed if condition is true }

Vodite računa da je if napisano malim slovima. Upotreba velikih slova (IF) će prouzrokovati JavaScript grešku!

<script type="text/javascript"> //Write a "Good morning" greeting if //the time is less than 10 var d=new Date(); var time=d.getHours(); if (time<10) { document.write("<b>Good morning</b>"); } </script>

Treba primetiti da u ovoj sintaksi postoji ... else (drugo)... Vi nalažete pretraživaču da izvrši neki kod samo ukoliko je određeni uslov ispunjen.



If... else naredba

Koristite if... else naredbu da se izvrši neki kod ako je uslov ispunjen a drugi kod ako uslov nije ispunjen.

Sintaksa

if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }

Primer:

<script type="text/javascript"> //If the time is less than 10, you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script>

If...else if...else naredba

Koristite if...else if...else naredbu da izaberete jedan od nekoliko kod block-ova koji treba da se izvrše.

Sintaksa

if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if condition1 and condition2 are not true }



Primer:

<script type="text/javascript"> var d = new Date() var time = d.getHours() if (time<10) { document.write("<b>Good morning</b>"); } else if (time>10 && time<16) { document.write("<b>Good day</b>"); } else { document.write("<b>Hello World!</b>"); } </script>

JavaScript switch naredba

Uslovne naredbe se koriste da bi se izvršile različite radnje u skladu sa različitim uslovima.

JavaScript switch naredba

Koristite switch naredbu da biste izabrali jedan od mnogih kod block-ova koji treba da se izvrše.

Sintaksa

switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

To ovako funkcioniše: Najpre imamo jedan izraz n (najčešće varijabla), koji je jednom ocenjen. Vrednost izraza se onda poredi sa vrednostima svakog slučaja u strukturi. Ako postoji podudarnost, kod block koji je u vezi sa tim slučajem se izvršava. Koristite break da sprečite automatsko izvršenje koda u sledeći ‘case’.



Primer:

<script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!"); } </script>

JavaScript Iskačuće kutije

JavaScript ima tri vrste iskačućih kutija: kutije upozorenja, kutije potvrđivanja, i pokretačkih kutija.

Kutija upozorenja Kutija upozorenja se najčešće koristi ako želite da se osigurate da informacija stigne do korisnika.

Kada kutija upozorenja iskoči, korisnik će morati da klikne “ok” da bi se process nastavio.

Sintaksa

alert("sometext");

Primer:

<html> <head> <script type="text/javascript"> function show_alert() { alert("I am an alert box!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box" /> </body> </html>



Kutija za potvrđivanje

Kutija potvrđivanja se često koristi ako želite da korisnik nešto potvrdi ili prihvati.

Kada kutija potvrđivanja iskoči, korisnik će morati da klikne ili “OK” ili “Cancel” da bi nastavio.

Ako korisnik klikne na “OK”, kutija vraća tačno. Ako korisnik klikne na “Cancel”, kutija vraća netačno.

Sintaksa

confirm("sometext");

Primer:

<html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html>

Pokretačka kutija

Pokretačka kutija se često koristi ukoliko želite da korisnik unese neku vrednost pre nego što uđe na neku stranicu.

Kada pokretačka kutija iskoči, korisnik će morati da klikne ili na “OK” ili “Cancel” da bi nastavio nakon unošenja ulazne vrednosti.

Ako korisnik klikne na “OK” kutija vraća ulaznu vrednost. Ako korisnik klikne na “Cancel” kutija se poništava.



Sintaksa

prompt("sometext","defaultvalue");

Primer:

<html> <head> <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html>

JavaScript funkcije

Funkciju će izvršiti događaj (radnja) ili poziv na funkciju.

JavaScript funkcije

Da biste svoj pretraživač sprečili da izvrši neki script kad se strana učita, možete svoj script staviti u funkciju.

Funkcija sadrži kod koji će se izvršiti pomoću događaja ili poziva na funkciju.

Fumkciju možete pozvati sa bilo kog mesta na strain (ili čak sa drugih strana ako je ta funkcija uklopljena u eksterni .js fajl).

Funkcije mogu biti određene i u <head> i u <body> delu dokumenta. Međutim, da bi se osiguralo to da pretraživač pročita/ učita funkciju pre nego što bude pozvana, možda je pametno staviti funkcije u <head> deo.



Kako se definiše funkcija

Sintaksa

function functionname(var1,var2,...,varX) { some code }

Parametri var1, var2, itd. su varijable ili vrednosti koje su prešle u funkciju. { i } definišu početak i kraj funkcije.

Napomena: Funkcija bez paramatara mora imati zagrade () posle imena funkcije.

Napomena: Ne zaboravite važnost velikih slova u JavaScript-u! Funkcija reči mora biti napisana malim slovima, u suprotnom će doći do JavaScript greške! Takođe treba uočiti da morate pozvati funkciju koristeći ista velika slova kao u imenu te funkcije.

Primer JavaScript funkcije

If the line: alert("Hello world!!") in the example above had not been put within a function, it would have been executed as soon as the line was loaded. Now, the script is not executed before a user hits the input button. The function displaymessage() will be executed if the input button is clicked.

You will learn more about JavaScript events in the JS Events chapter. Primer:

<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> </body> </html>

Da red: alert(“Hello World!!”) u primeru iznad nije bio stavljen unutar funkcije, bio bi izvršen čim bi se strana učitala. Ovako, script se ne izvršava pre nego što korisnik pritisne ulaznu (input) tipku Funkcija displaymessage () će biti izvršena ako se klikne na ulazno dugme.

O JavaScript događajima ćete saznati više u poglavlju JS Događaji (Events).



Naredba za vraćanje

Naredba za vraćanje (return) se koristi da odredi vrednost koja je vraćena od funkcije.

Tako, funkcije koje će vratiti vrednost moraju koristiti naredbu za vraćanje.

Primer naveden ispod vraća proizvod dva broja (a i b):

Primer:

<html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> </body> </html>

Trajanje JavaScrip promenjive

Ako deklarišete promenjivu unutar funkcije, njoj se može pristupiti jedino u okviru te funkcije. Kada izađete iz funkcije, promenjiva se uništava. Ove promenjive se nazivaju lokalnim promenjivim. Možete imati istoimene lokalne promenjive u različitim funkcijama, zbog toga što svaku prepoznaje ona funkcija u kojoj je ona deklarisana.

Ako deklarišete promenjive izvan funkcije, sve funkcije na vašoj strani joj mogu pristupiti. Trajanje ovih promenjivih počinje trenutkom deklarisanja, a završava se kad se stranica zatvori.

JavaScript Loop-ovi (petlje) Loop-ovi (Programske petlje) izvršavaju block kodove određeni broj puta, ili dok je određeni uslov ispunjen.

JavaScript Loop-ovi

Kad pišete kod, često želite da se isti block kodova izvodi više puta uzastopno. Umesto dodavanja nekoliko gotovo jednakih redova u script, za izvršavanje ovakvog zadatka možemo koristiti petlje (loop-ove).

U JavaScript-u postoje dve različite vrste petlji:

• for - petlje kroz block koda određen broj puta • while - petlja kroz block koda sve dok je određeni uslov ispunjen



For Loop (petlja)

For loop se koristi kad unapred znate koliko puta script treba da se izvrši.

Sintaksa

for (var=startvalue;var<=endvalue;var=var+increment) { code to be executed }

Primer

Primer ispod definiše loop (petlju) koja počinje sa i=0. Petlja će se izvršavati sve dok je i manje od, ili jednako 5. i će se povećati za 1 svaki put kad se petlja izvrši.

Napomena: Parametar uvećanja može da bude i negativan, i <= može biti bilo koja komparativna naredba.

<html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>

While loop (petlja)

While petlja će biti objašnjena u sledećem poglavlju.

JavaScript while loop (petlja) Petlje izvršavaju block koda određeni broj puta, ili sve dok je određeni uslov ispunjen.

While loop (petlja)

While petlja prolazi kroz block koda dok je određeni uslov ispunjen.



Sintaksa

while (var<=endvalue) { code to be executed }

Napomena: <= može biti bilo koja komparativna naredba.

Primer

Primer ispod definiše petlju koja počinje sa i=0. Petlja će se izvršavati sve dok je i manje od, ili jednako 5. i će se povećati za 1 svaki put kad se petlja izvrši:

<html> <body> <script type="text/javascript"> var i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html>

Do...while loop (petlja)

Do...while petlja je varijanta while petlje. Ova petlja će izvršiti block koda JEDNOM, a onda će ponavljati petlju sve dok je određeni uslov ispunjen.

Sintaksa

do { code to be executed } while (var<=endvalue);

Primer Primer ispod koristi do...while petlju. Do...while petlja će uvek biti izvršena barem jedanput, čak i ako uslov nije ispunjen, zato što se naredbe izvršavaju pre nego što je uslov testiran:

Primer:



<html> <body> <script type="text/javascript"> var i=0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i<=5); </script> </body> </html>

JavaScript naredbe za prekid i nastavljanje

Naredba za prekid

Naredba za prekid će prekinuti petlju i nastaviti izvršenje koda koji sledi nakon petlje (ako postoji).

<html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>

Naredba za nastavljanje

Naredba za nastavljanje će prekinuti trenutnu petlju i nastaviti sa sledećom vrednošću.

<html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3) {



continue; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>

JavaScript For...In naredba

For...in naredba prolazi kroz elemente neke grupe ili kroz svojstva nekog objekta.

Sintaksa

for (variable in object) { code to be executed }

Napomena: Kod u body-ju for...in petlje se izvršava jednom za svaki element/ svojstvo.

Napomena: Argument varijable može biti neka imenovana varijabla, ili neki grupni element , ili svojstvo nekog objekta.

Primer

Naredbu for...in koristimo da prođemo kroz grupu elemenata:

<html> <body> <script type="text/javascript"> var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + "<br />"); } </script> </body> </html>

JavaScript događaji Događaji su radnje koje JavaScript može da detektuje.



Događaji

Koristeći JavaScript imamo mogućnost da stvorimo dinamične web stranice. Events su radnje koje JavaScript može da detektuje.

Svaki element na web stranici ima određene radnje koje mogu pokrenuti JavaScript. Na primer, možemo koristiti onClick događaj elementa tipke da označimo da će se funkcija izvršiti kad korisnik klikne na tipku. Radnje definišemo u HTML tagovima.

Primer događaja:

• klik mišem • učitavanje web stranice ili slike • prelazak mišem preko hot spot-a na web stranici • izbor ulaznog polja u HTML formi • predavanje HTML forme • pritisak na tipku

Napomena: Događaji se obično koriste u kombinaciji sa funkcijama, a funkcija neće biti izvršena pre nego što se desi radnja!

onLoad i onUnload

Do operacija onLoad i onUnload dolazi kad korisnik ulazi ili napušta stranicu.

OnLoad radnja se često koristi za proveru pretraživača posetioca i njegovu verziju, a za učitavanje prave verzije web stranice u skladu sa dobijenom informacijom.

I onLoad i onUnload događaji se često takođe koriste za bavljenje cookies-ima koji treba da se podese kad korisnik ulazi ili napušta stranicu. Na primer, može se pojaviti iskačući prozor koji traži korisničko ime prilikom prve posete vašoj stranici. To ime će onda biti smešteno u cookie. Sledećeg puta kad korisnik dođe na vašu stranicu, može se pojaviti drugi iskačući prozor koji će poručiti nešto poput “Dobrodošao N. N.!”

onFocus, onBlur and onChange

OnFocus, onBlur i onChange radnje se često koriste u kombinaciji sa ocenom polja formi.

Ispod je primer kako treba da se koristi onChange događaj. CheckEmail() funkcija će se koristiti kad god korisnik promeni sadržaj polja:

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit

OnSubmit događaj se koristi za procenu SVIH polja formi pre nego što ga preda. Ispod je primer kako se koristi onSubmit događaj. CheckForm() funkcija će biti upotrebljena kad korisnik klikne na submit u formularu. Ako vrednosti u poljima nisu prihvaćene, predavanje bi trebalo da se poništi. Funkcija checkForm() se vraća kao tačna ili netačna. Ako se vrati kao tačna, forma će biti prosleđena, u suprotnom će se predaja forme poništiti:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">



onMouseOver and onMouseOut

onMouseOver and onMouseOut se često koriste za stvaranje “animiranih” tipki.

Ispod je primer jedne onMouse događaja. Kutija za upozorenje se pojavljuje kad se operacija onMouse Over uoči:

<a href="http://www.fit.edu.rs" onmouseover="alert('An onMouseOver event');return false"><img src="xxx.gif" alt="FIT" /></a>

JavaScript Try...Catch naredba

Try...catch naredba vam omogućuje da proverite da li ima grešaka u block-u koda.

JavaScript - Hvatanje grešaka

Kad razgledamo web stranice na internetu, svi smo videli JavaScript upozoravajuću kutiju koja nam govori da postoji porocesna greška i pita nas “Do you wish to debug?” (da li želite da debagujete?). Ovakva poruka o grešci može biti korisna za dizajnere ali ne i za korisnike. Kad korisnici vide greške, često napuštaju tu web stranicu.

Ovo poglavlje će vas naučiti kako da uhvatite i rukujete JavaScript porukama o greškama, da ne izgubite svoju publiku.

Try...catch naredba

Try...catch naredba vam omogućuje da testirate da li ima grešaka u block kodu. Try block sadrži kod koji treba da se primeni, a catch kod sadrži kod koji treba se izvrši ukoliko se neka greška pojavi.

Sintaksa

try { //Run some code here } catch(err) { //Handle errors here }

Vodite računa da je try...catch napisano malim slovima. Upotreba velikih slova će prouzrokovati JavaScript grešku!

Primeri

Primer ispod bi trebalo da upozori “Welcome guest!” kad se klikne na dugme. Međutim, postoji greška u kucanju u funkciji poruke (u message() funkciji). alert() je pogrešno napisano kao adddlert(). Dolazi do JavaScript greške. Catch blok hvata grešku i izvršava prilagođen kod koji će tu grešku ispraviti. Kod prikazuje prilagođenu poruku o grešci koja obaveštaav korisnika o tome šta se desilo:

<html> <head> <script type="text/javascript"> var txt=""; function message()



{ try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>

Sledeći primer koristi kutiju za potvrđivanje za prikazivanje prilagođene poruke koja korisnike obaveštava da mogu da kliknu na OK da bi nastavili da pregledaju tu stranicu ili da kliknu na Cancel da bi otišli na početnu stranicu. Ako se metod za potvrđivanje vrati kao netačan, korisnik je kliknuo na Cancel, i kod preusmerava korisnika. Ako se metod za potvrđivanje vrati kao tačan, kod ne preduzima ništa:

<html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>

predavanje broj 6 ad352-p06 java scriptad420.metropolitan.ac.rs/.../ad352-p06-javascript.pdf ·...

Documents