AD352 VEB DIZAJN 2
Predavanje broj 6
AD352-P06
Java Script
Nedelja
Čas
6
1
2
Tematska
jedinica
Java Script
Predavanja
Lekcija ili aktivnost
Rezultat – znanja ili veštine
koje student treba da
dobije
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.
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
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
2/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
3/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
4/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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 <!-- pre prve JavaScript izjave, i --> (kraj komentara) nakon poslednje JavaScript
izjave, na primer:
<html>
<body>
<script type="text/javascript">
<!-document.write("Hello World!");
//-->
</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>
5/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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:
6/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
<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:
7/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
<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>
JavaScript block-ovi
JavaScript naredbe mogu da budu grupisane u block-ove.
Block-ovi počinju levom vitičastom zagradom {, a završava se desnom vitičastom zagradom }.
Svrha block-a je da učini da se niz naredbi izvrši zajedno.
Ovaj primer će ispisati heading i dva paragrafa web strane:
<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>
Primer naveden iznad i nije tako koristan. On samo pokazuje upotrebu block-a. Obično se block koristi da grupiše
naredbe zajedno u funkciji ili u uslovu (kad grupa naredbi treba da se izvrši ukoliko se stekne uslov).
O funkcijama i uslovima ćete saznati više u narednim poglavljima.
JavaScript komentari
JavaScript komentari mogu da se koriste da bi kod učinili čitljivijim.
JavaScript komentari
Komentari mogu da se dodaju da bi pojasnili JavaScript, ili da bi kod učinili čitljivijim.
Komentari u samo jednom redu počinju sa //.
Primer koji sledi koristi komentare u samo jednom redu da objasni kod:
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
8/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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>
9/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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:
10/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
11/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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
12/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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+=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
x=5
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”.
13/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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
14/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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”.
15/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
16/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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
}
17/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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’.
18/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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>
19/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
20/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
21/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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).
22/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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
23/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
24/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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:
25/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
<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)
{
26/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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.
27/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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()">
28/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
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()
29/30
Naziv predavanja: Java Script
AD352 Veb dizajn 2
Predavanje br. 6
{
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>
30/30
Naziv predavanja: Java Script
Download

Java Script - Univerzitet Metropolitan