You are on page 1of 41

IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

JavaScript. wiczenia
praktyczne. Wydanie II
Autor: Marcin Lis
ISBN: 83-246-0795-1
Format: A5, stron: 160
Przykady na ftp: 52 kB

Oyw swoje witryny WWW


Poznaj elementy jzyka JavaScript
Napisz procedury obsugi zdarze
Stwrz mechanizmy obsugi formularzy HTML
HTML, mimo cigego rozwoju, pozostaje wycznie jzykiem sucym do formatowania
dokumentw. Przetwarzanie danych wprowadzanych przez uytkownikw witryny
WWW realizuje si za pomoc innych mechanizmw. Jedn z technologii sucych
do wykonywania takich operacji jest JavaScript jzyk skryptowy interpretowany
po stronie przegldarki, opracowany przez firm Netscape. JavaScript umoliwia
tworzenie i umieszczanie bezporednio w kodzie HTML krtkich programw, za pomoc
ktrych mona wykonywa rne zadania, takie jak rozpoznawanie i obsugiwanie
klikni mysz, weryfikacja danych wprowadzanych do formularzy czy te nawigowanie
pomidzy stronami. Ma prost skadni i jest stosunkowo atwy do opanowania.
Czytajc ksik JavaScript. wiczenia praktyczne. Wydanie II i wykonujc zawarte
w niej przykady, poznasz podstawy tego jzyka. Dowiesz si, z jakich elementw
skada si JavaScript i w jaki sposb umieszcza jego kod w dokumentach HTML.
Nauczysz si tworzy funkcje i korzysta z obiektw. Przeczytasz o tym, w jaki sposb
JavaScript moe wsppracowa z przegldark internetow, przetwarza zdarzenia
generowane przez uytkownika i interpretowa dane pochodzce z formularzy
umieszczonych na stronie WWW.
Umieszczanie skryptw w dokumencie
Wywietlanie okien dialogowych
Typy danych, zmienne i operatory
Ptle i konstrukcje warunkowe
Wsppraca z przegldark
Obsuga zdarze
Weryfikacja danych z formularzy
Naucz si korzysta z jzyka JavaScript,
ktry jest podstaw wielu nowoczesnych technologii sieciowych

Wstp
Rozdzia 1. Podstawy
Umieszczanie skryptw w dokumencie
Instrukcja document.write
Formatowanie tekstu
Wywietlenie okna dialogowego
Jeli przegldarka nie obsuguje skryptw
Komentarze

Rozdzia 2. Elementy jzyka


Typy danych
Zmienne
Operatory
Instrukcje warunkowe
Ptle
Funkcje
Zasig zmiennych

Rozdzia 3. Obiekty i funkcje globalne


Funkcje globalne
Obiekty dostpne standardowo

Rozdzia 4. Wsppraca z przegldark


Obiekty
Obiekt window
Obiekt document
Obiekt history

5
9
9
11
13
16
17
18

21
21
23
26
36
43
50
55

59
59
65

87
87
88
105
112

JavaScript wiczenia praktyczne


Obiekt location
Obiekt navigator

Rozdzia 5. Zdarzenia
Zdarzenia
Zdarzenia onload i onunload
Zdarzenia zwizane z mysz

Rozdzia 6. Obsuga formularzy


Obiekty formularza
Element button (przycisk)
Element checkbox (pole wyboru)
Element radio (pole wyboru)
Element text (pole tekstowe)
Element textarea (rozszerzone pole tekstowe)
Element list (lista wyboru)
Walidacja formularzy

113
117

123
123
126
129

139
139
142
144
146
148
150
153
155

q
q
q
q

Wystpujce w JavaScript typy danych mona podzieli nastpujco:


q typ liczbowy,
typ acuchowy,
typ logiczny,
typ null,
typ obiektowy.

Typ liczbowy
Typ liczbowy suy do reprezentacji liczb, przy czym nie ma wystpujcego w klasycznych jzykach programowania rozrnienia na typy
cakowitoliczbowe i rzeczywiste (zmiennopozycyjne). Liczby zapisywane s za pomoc literaw (inaczej staych napisowych, z ang. string
constant, literal constant) liczbowych. Obowizuj przy tym nastpujce zasady:
q Jeeli cig cyfr nie jest poprzedzony adnym znakiem lub jest
poprzedzony znakiem +, reprezentuje on warto dodatni,
jeeli natomiast jest poprzedzony znakiem , reprezentuje
warto ujemn.

22

JavaScript wiczenia praktyczne

q Jeeli litera rozpoczyna si od cyfry zero, jest traktowany

jako warto semkowa.


q Jeeli litera rozpoczyna si od cigu znakw 0x, jest traktowany
jako warto szesnastkowa (heksadecymalna). W zapisie wartoci
szesnastkowych mog by wykorzystywane zarwno mae, jak
i wielkie litery alfabetu od A do F.
q Literay mog by zapisywane w notacji naukowej, w postaci
X.YeZ, gdzie X to cz cakowita, Y cz dziesitna, natomiast
Z to wykadnik potgi liczby 10. Zapis taki oznacza to samo co
X.Y * 10Z.
Przykady literaw:
123 dodatnia cakowita warto dziesitna 123
-123 ujemna cakowita warto dziesitna 123
012 dodatnia cakowita warto semkowa rwna 10
dziesitnie
-024 ujemna cakowita warto semkowa rwna 20
dziesitnie
0xFF dodatnia cakowita warto szesnastkowa rwna 255
dziesitnie
-0x0f ujemna cakowita warto szesnastkowa rwna 15
dziesitnie
1.1 dodatnia warto rzeczywista 1.1
-1.1 ujemna warto rzeczywista 1.1
0.1E2 dodatnia warto rzeczywista rwna 10
1.0E-2 dodatnia warto rzeczywista rwna 0.01

Typ acuchowy
Typ acuchowy suy do reprezentacji cigw znakw (napisw).
Cigi te (inaczej stae napisowe) powinny by ujte w znaki cudzysowu, aczkolwiek dopuszczalne jest rwnie wykorzystanie znakw
apostrofu. Przykadowy cig ma posta:
"abcdefg"

Mog one te zawiera sekwencje znakw specjalnych przedstawione


w tabeli 1.1 w rozdziale 1.

Rozdzia 2. Elementy jzyka

23

Typ logiczny
Typ logiczny (boolean) pozwala na okrelenie dwch wartoci logicznych: prawda i fasz. Warto prawda jest w JavaScript reprezentowana przez sowo true, natomiast warto fasz przez sowo false. Wartoci tego typu s uywane przy konstruowaniu wyrae logicznych,
porwnywaniu danych, wskazywaniu czy dana operacja zakoczya
si sukcesem itp.

Typ null
Typ null jest typem specjalnym, reprezentujcym warto pust. Warto ta jest okrelona sowem null.

Typ obiektowy
Typ obiektowy suy do reprezentacji obiektw. Nie ma specjalnego
sowa kluczowego oznaczajcego ten typ. Najczciej wykorzystuje si
obiekty wbudowane oraz udostpniane przez przegldark.

Poznalimy ju typy danych, czas zapozna si ze sposobami deklarowania i wykorzystania zmiennych. S to konstrukcje programistyczne,
ktre pozwalaj nam przechowywa dane. Kada zmienna ma swoj
nazw, ktra j jednoznacznie identyfikuje, oraz charakteryzuje si
typem, ktry okrela, jakie wartoci moe ona przyjmowa. Nazwa
moe zawiera litery, cyfry i znak podkrelenia, nie moe jednak zawiera znakw narodowych (czyli dopuszczalne s jedynie znaki alfabetu aciskiego). Wolno stosowa zarwno wielkie, jak i mae litery,
s te one rozrniane, co oznacza, e przykadowo: liczba i Liczba to
nazwy dwch rnych zmiennych. Nazwa zmiennej nie moe te
zaczyna si od cyfry.
W JavaScript, podobnie jak i w wielu innych skryptowych jzykach programowania, zmiennych nie trzeba jawnie deklarowa przed uyciem,
a kada z nich moe przyjmowa dane z dowolnego typu opisanego

24

JavaScript wiczenia praktyczne

w poprzednim podrozdziale. Ponadto typ danych nie jest przypisywany zmiennej na stae i moe si zmienia w trakcie dziaania skryptu.
Utworzenie zmiennej polega na umieszczeniu w kodzie skryptu jej
nazwy (mona j poprzedzi sowem var) i przypisaniu wartoci, schematycznie:
var nazwa_zmiennej = warto;

lub:
nazwa_zmiennej = warto;

Wszystko stanie si janiejsze po wykonaniu kolejnych wicze.


W wiczeniach tego oraz kolejnych rozdziaw bdzie prezentowany
tylko waciwy kod skryptw JavaScript, kod HTML bdzie natomiast
pomijany, o ile nie bdzie niezbdny do funkcjonowania przykadu.
Listingi dostpne na ftp uwzgldniaj natomiast zawsze peny kod
strony, czyli zarwno HTML, jak i JavaScript.
W I C Z E N I E

2.1

Uycie zmiennych w skrypcie

Zadeklaruj dwie zmienne, przypisz im dowolne cigi znakw i wyprowad je na ekran za pomoc funkcji write.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var zmienna1 = "Mj komputer";
var zmienna2 = 350;
document.write(zmienna1 + " ma dysk o pojemnoci " + zmienna2 + " GB.");
// Koniec kodu JavaScript -->
</script>

Po wczytaniu takiej strony na ekranie ukae si napis Mj komMuter ma


dysk o Mojemnoci 350 GB (rysunek 2.1). Przeanalizujmy wic jak dziaa ten
skrypt. Zadeklarowalimy dwie zmienne o nazwach zmienna1 i zmienna2.
Zmiennej zmienna1 przypisalimy cig znakw Mj komMuter, zmiennej
zmienna2 natomiast warto liczbow, dodatni liczb cakowit 350.
Zmiennych tych uylimy jako argumentw funkcji write. Musielimy
rwnie tak poczy poszczeglne acuchy tekstowe, aby otrzyma
jeden, ktry ukaza si na ekranie. Do tego celu uylimy operatora +
(plus). Jest to czenie, inaczej konkatenacja, acuchw znakowych.

Rozdzia 2. Elementy jzyka

25

Rysunek 2.1.
Wywietlenie na
ekranie wartoci
dwch zmiennych

Przekonajmy si teraz, e w JavaScripcie naprawd w trakcie dziaania


skryptu moe si zmienia typ zmiennej i rodzaj przechowywanych
w niej danych.
W I C Z E N I E

2.2

Zmiana typu zmiennej

Zadeklaruj jedn zmienn. Przypisz do niej dowolny acuch znakw


i wyprowadzi na ekran. Nastpnie przypisz tej samej zmiennej warto
liczbow i rwnie wyprowad na ekran.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
zmienna1 = "To jest przykadowy tekst.";
document.write("Pierwsza warto zmiennej zmienna1: " + zmienna1);
zmienna1 = 2z.i;
document.write("<br />Druga warto zmiennej zmienna1: " + zmienna1);
// Koniec kodu JavaScript -->
</script>

Efekt dziaania skryptu zosta przedstawiony na rysunku 2.2. Na


pocztku zmiennej zmienna1 zosta przypisany cig znakw:
zmienna1 = "To jest przykadowy tekst.";

ktry zosta wywietlony na ekranie. Nastpnie zmiennej tej zostaa


przypisana warto rzeczywista 24.7:
zmienna1 = 2z.i;

i tym samym zmienia ona swj typ. Po pierwszym przypisaniu by


to typ acuchowy, po drugim liczbowy. Wida wic wyranie, e
zmiana typu danych moe nastpowa w trakcie dziaania skryptu.

26

JavaScript wiczenia praktyczne

Rysunek 2.2.
Efekt
dziaania kodu
z wiczenia 2.2

W JavaScripcie, podobnie jak i w innych jzykach programowania,


wystpuje wiele operatorw, ktre pozwalaj na wykonywanie rozmaitych operacji. Operatory moemy podzieli na nastpujce grupy:
q arytmetyczne,
q porwnywania (relacyjne),
q bitowe,
q logiczne,
q przypisania,
q pozostae.

Operatory arytmetyczne
Nietrudno si domyli, e operatory z tej grupy su do wykonywania operacji arytmetycznych, czyli dodawania, odejmowania, mnoenia itp. Zostay one zebrane w tabeli 2.1. W tej grupie wystpuj
jednak rwnie operatory inkrementacji (zwikszania) i dekrementacji
(zmniejszania). Operatory *, /, +, -, % s dwuargumentowe, natomiast
++ i -- s jednoargumentowe.
W I C Z E N I E

2.3

Wykonywanie operacji arytmetycznych

Zadeklaruj kilka zmiennych, wykonaj na nich standardowe operacje


arytmetyczne i wywietl wyniki na ekranie.

27

Rozdzia 2. Elementy jzyka


Tabela 2.1. Operatory arytmetyczne
Operator Wykonywane dziaanie

Przykad

mnoenie

x * y

dzielenie

x / y

dodawanie

x + y

odejmowanie

x - y

dzielenie modulo (reszta z dzielenia)

x % y

++

inkrementacja (zwikszanie)

x++, ++x

--

dekrementacja (zmniejszanie)

x--, --x

<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var pierwszaLiczba = 12;
var drugaLiczba = 5;
var trzeciaLiczba = pierwszaLiczba - drugaLiczba;
document.write("Wynikiem operacji pierwszaLiczba + 5 jest ");
document.write(pierwszaLiczba + 5);
document.write("<br />Wynikiem operacji pierwszaLiczba - drugaLiczba
jest ");
document.write(trzeciaLiczba);
document.write("<br />Wynikiem operacji 2 * d jest ");
document.write(2 * d);
// Koniec kodu JavaScript -->
</script>

Wynik dziaania przedstawionego skryptu z pewnoci nie jest adnym


zaskoczeniem (rysunek 2.3). Zostay w nim zadeklarowane trzy
zmienne: MierwszaLiczba, drugaLiczba, trzeciaLiczba. Pierwszym dwm
zostay przypisane wartoci cakowite 12 i 5, a ostatniej warto wynikajca z dziaania MierwszaLiczba drugaLiczba, czyli 7. Na ekranie
zostay wywietlone wyniki dziaa:
q MierwszaLiczba + 5 (czyli 17),
q MierwszaLiczba drugaLiczba (czyli 7),
q 2 * 8 (czyli 16).

28

JavaScript wiczenia praktyczne

Rysunek 2.3.
Wynik dziaania
kilku operacji
arytmetycznych

Wida wic wyranie, e operacje arytmetyczne mog by wykonywane


zarwno na dwch zmiennych, na zmiennej i liczbie, jak i dwch
liczbach.

Do operatorw arytmetycznych naley rwnie %, przy czym, jak zostao to zaznaczone w tabeli 2.1, nie oznacza on obliczania procentw,
ale dzielenie modulo, czyli reszt z dzielenia. Przykadowo, dziaanie
10 % 3 da w wyniku 1. Trjka zmieci si bowiem w dziesiciu 3 razy,
pozostawiajc reszt 1 (3 * 3 = 9, 9 + 1 = 10). Podobnie 21 % 8 = 5,
poniewa 2 * 8 = 16, 16 + 5 = 21.
Ciekawym operatorem jest operator inkrementacji, czyli zwikszenia
wartoci. Powoduje on przyrost wartoci zmiennej o jeden. Operator
ten, zapisywany jako ++, moe wystpowa w dwch formach: przyrostkowej bd przedrostkowej. Oznacza to, e jeli mamy zmienn, ktra
nazywa si np. x, forma przedrostkowa bdzie wyglda: ++x, natomiast przyrostkowa: x++. Oba te wyraenia zwiksz warto zmiennej x o jeden, jednak wcale nie s sobie rwnowane. Ot operacja
x++ zwiksza warto zmiennej po jej wykorzystaniu, natomiast ++x
przed jej wykorzystaniem. Takie rozrnienie moe by bardzo pomocne podczas pisania skryptw. Przyjrzyjmy si zatem bliej operatorowi inkrementacji.
W I C Z E N I E

2.4

Operator inkrementacji

Przeanalizuj poniszy kod. Nie wczytuj skryptu do przegldarki, ale


zastanw si, jaki bdzie wywietlony cig liczb. Nastpnie po uruchomieniu skryptu sprawd swoje przypuszczenia.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var x = 12;

Rozdzia 2. Elementy jzyka

29

var y;
/*1*/ document.write(++x);
/*2*/ document.write(" ");
/*3*/ document.write(x++);
/*z*/ document.write(" ");
/*5*/ document.write(x);
/*6*/ document.write(" ");
/*i*/ y = x++;
/*d*/ document.write(y);
/*9*/ document.write(" ");
/*10*/ y = ++x;
/*11*/ document.write(y);
// Koniec kodu JavaScript -->
</script>

Wynikiem dziaania skryptu (dla uatwienia opisu wiersze zostay


ponumerowane) bdzie cig znakw 13 13 14 14 16, tak jak jest to widoczne na rysunku 2.4. Dlaczego? Ot w wierszu oznaczonym numerem 1. najpierw jest zwikszana warto zmiennej x o 1 (czyli x = 13),
a nastpnie ten wynik jest wywietlany. W linii 3. najpierw jest wywietlana aktualna warto zmiennej x (czyli 13), a nastpnie jest ona
zwikszana o 1 (czyli x = 14). W wierszu 5. jest wywietlana aktualna
warto zmiennej x, czyli 14. W wierszu 7. zmiennej y jest przypisywana warto zmiennej x, a nastpnie zmienna x jest zwikszana o 1
(czyli y = 14, x = 15). W wierszu 10. najpierw jest zwikszana warto
zmiennej x o 1 (czyli x = 16), a nastpnie warto ta jest przypisywana
zmiennej y (czyli y = 16 i x = 16). Na pocztku moe wydawa si to
nieco skomplikowane, ale po dokadnym przeanalizowaniu i samodzielnym wykonaniu kilku wasnych wicze operator ten nie
powinien sprawia adnych kopotw.
Rysunek 2.4.
Wynik wiczenia
dotyczcego
operatora
dekrementacji

Operator dekrementacji dziaa analogicznie, z tym e zamiast zwiksza


wartoci zmiennych, zmniejsza je. Oczywicie zawsze o jeden.

30

JavaScript wiczenia praktyczne

W I C Z E N I E

2.5

Operator dekrementacji

Zmie kod z wiczenia 2.4 tak, aby operator ++ zosta zastpiony


operatorem --. Nastpnie przeanalizuj jego dziaanie i sprawd, czy
otrzymany wynik jest taki sam jak na ekranie przegldarki.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var x = 12;
var y;
/*1*/ document.write(--x);
/*2*/ document.write(" ");
/*3*/ document.write(x--);
/*z*/ document.write(" ");
/*5*/ document.write(x);
/*6*/ document.write(" ");
/*i*/ y = x--;
/*d*/ document.write(y);
/*9*/ document.write(" ");
/*10*/ y = --x;
/*11*/ document.write(y);
// Koniec kodu JavaScript -->
</script>

Wynikiem dziaania skryptu bdzie cig znakw 11 11 10 10 8. W wierszu 1. najpierw jest zmniejszana warto x o 1 (czyli x = 11), a nastpnie ten wynik jest wywietlany. W wierszu 3. najpierw jest wywietlana
aktualna warto x (czyli 11), a nastpnie jest ona zmniejszana o 1 (czyli
x = 10). W wierszu 5. jest wywietlana aktualna warto x, czyli 10.
W wierszu 7. zmiennej y jest przypisywana warto x, a nastpnie
zmienna x jest zmniejszana o 1 (czyli y = 10, x = 9). W wierszu 10.
najpierw jest zmniejszana warto x o 1 (czyli x = 8), a nastpnie warto ta jest przypisywana zmiennej y (czyli y = 8 i x = 8). Na zakoczenie w linii 11. warto y jest wywietlana na ekranie.

Operatory porwnywania (relacyjne)


Operatory porwnania, czyli relacyjne, su oczywicie do porwnywania argumentw. Wynikiem takiego porwnania jest warto
logiczna true (jeli jest ono prawdziwe) lub false (jeli jest faszywe).
Zatem wynikiem operacji argument1 == argument2 bdzie true, jeeli

31

Rozdzia 2. Elementy jzyka

argumenty s sobie rwne, oraz false, jeeli argumenty s rne.


Czyli 4 == 5 ma warto false, a 2 == 2 ma warto true. Do dyspozycji mamy operatory porwnania zawarte w tabeli 2.2. Przykady ich
wykorzystania znajduj si w podrozdziale dotyczcym instrukcji
warunkowych. Operatory === i !== zostay wprowadzone w JavaScript 1.3 i JScript 3.0.
Tabela 2.2. Operatory porwnywania
Operator

Opis

Przykad

==

Wynikiem jest true, jeli argumenty s sobie rwne. a == b

!=

Wynikiem jest true, jeli argumenty s rne.

a != b

===

Wynikiem jest true, jeli oba argumenty s tego


samego typu i s sobie rwne.

a === b

!==

Wynikiem jest true, jeli argumenty s rne,


bd s rnych typw.

a !== b

>

Wynikiem jest true, jeli argument lewostronny


jest wikszy od prawostronnego.

a > b

<

Wynikiem jest true, jeli argument lewostronny


jest mniejszy od prawostronnego.

a < b

>=

Wynikiem jest true, jeli argument lewostronny


jest wikszy od prawostronnego lub rwny mu.

a >= b

<=

Wynikiem jest true, jeli argument lewostronny


jest mniejszy od prawostronnego lub rwny mu.

a <= b

Operatory bitowe
Operatory bitowe pozwalaj na wykonywanie operacji na poszczeglnych bitach liczb i zostay przedstawione w tabeli 2.3. S to: iloczyn
bitowy (koniunkcja bitowa, operacja AND), suma bitowa (alternatywa
bitowa, operacja OR), negacja bitowa (uzupenienie do jedynki, operacja NOT), suma bitowa modulo 2 (alternatywa bitowa wykluczajca,
rnica symetryczna, operacja XOR) oraz operacje przesuni bitw.
Wszystkie operatory s dwuargumentowe, oprcz operatora bitowej
negacji, ktry jest jednoargumentowy.

32

JavaScript wiczenia praktyczne

Tabela 2.3. Operatory bitowe


Operator

Wykonywane dziaanie

Przykad

&

iloczyn bitowy AND

a & b

suma bitowa OR

a | b

negacja bitowa NOT

~a

bitowa rnica symetryczna XOR

a ^ b

>>

przesunicie bitowe w prawo

a >> n

<<

przesunicie bitowe w lewo

a << n

>>>

przesunicie bitowe w prawo z wypenieniem zerami

a >>> n

Operatory logiczne
Operacje logiczne mog by wykonywane na argumentach, ktre posiadaj warto logiczn: prawda (true) lub fasz (false). Operatory
logiczne zostay przedstawione w tabeli 2.4. Operatory && i || s
dwuargumentowe, natomiast operator ! jest jednoargumentowy.
Tabela 2.4. Operatory logiczne
Operator

Wykonywane dziaanie

Przykad

&&

iloczyn logiczny (AND)

a && b

||

suma logiczna (OR)

a || b

negacja logiczna (NOT)

!a

Iloczyn logiczny
Wynikiem iloczynu logicznego jest warto true wtedy i tylko wtedy,
kiedy oba argumenty maj warto true. W kadym innym przypadku wynikiem jest false. Obrazuje to tabela 2.5.
Tabela 2.5. Dziaanie iloczynu logicznego
Argument 1

Argument 2

Wynik

true

true

true

true

false

false

false

true

false

false

false

false

Rozdzia 2. Elementy jzyka

33

Suma logiczna
Wynikiem sumy logicznej jest warto false wtedy i tylko wtedy,
kiedy oba argumenty maj warto false. W kadym innym przypadku
wynikiem jest true. Obrazuje to tabela 2.6.
Tabela 2.6. Dziaanie sumy logicznej
Argument 1

Argument 2

Wynik

true

true

true

true

false

true

false

true

true

false

false

false

Negacja logiczna
Operacja logicznej negacji zamienia warto argumentu na przeciwn. Czyli jeli argument mia warto true, bdzie mia warto false,
i odwrotnie, jeli mia warto false, bdzie mia warto true. Obrazuje to tabela 2.7.
Tabela 2.7. Dziaanie negacji logicznej
Argument

Wynik

true

false

false

true

Operatory przypisania
Operatory przypisania s dwuargumentowe i powoduj przypisanie
wartoci argumentu znajdujcego si z prawej strony operatora argumentowi znajdujcemu si z lewej strony. Tak najprostsz operacj
ju poznalimy, odbywa si ona przy wykorzystaniu operatora = (rwna si). Jeli napiszemy liczba = 10, oznacza to, e zmiennej liczba
chcemy przypisa warto 10.
W JavaScripcie istnieje jednak rwnie cay zestaw operatorw czcych operacj przypisania z inn operacj. Przykadowo istnieje operator +=, ktry oznacza: przypisz argumentowi umieszczonemu z lewej

34

JavaScript wiczenia praktyczne

strony warto wynikajc z dodawania argumentu znajdujcego si


z lewej strony i argumentu znajdujcego si z prawej strony operatora.
Cho brzmi to z pocztku nieco zawile, w rzeczywistoci jest bardzo
proste i znacznie upraszcza niektre konstrukcje programistyczne.
Po prostu przykadowy zapis:
liczba += 5

tumaczymy jako:
liczba = liczba + 5

i oznacza: przypisz zmiennej liczba warto wynikajc z dodawania


liczba + 5.
W JavaScripcie wystpuje caa grupa tego typu operatorw, zostay
one zebrane w tabeli 2.8.
Tabela 2.8. Operatory przypisania i ich znaczenie
Argument 1

Operator

Argument 2

Znaczenie

x = y

+=

x = x + y

-=

x = x y

*=

x = x * y

/=

x = x / y

%=

x = x % y

<<=

x = x << y

>>=

x = x >> y

>>>=

x = x >>> y

&=

x = x & y

|=

x = x | y

^=

x = x ^ y

Pozostae operatory
W JavaScripcie wystpuje jeszcze kilka innych operatorw, ktrych
jednak nie bdziemy omawia. S to m.in. operator indeksowania
tablic, wywoania funkcji, rozdzielania wyrae, tworzenia obiektw
itp. W podrozdziale dotyczcym instrukcji warunkowych zostanie
natomiast omwiony operator warunkowy.

35

Rozdzia 2. Elementy jzyka

Priorytety operatorw
Sama znajomo operatorw to jednak nie wszystko. Niezbdna jest
jeszcze wiedza na temat tego, jaki maj one priorytet, czyli jaka jest
kolejno ich wykonywania. Wiadomo np., e mnoenie jest silniejsze
od dodawania, zatem najpierw mnoymy, potem dodajemy (t kolejno mona zmieni, stosujc nawiasy okrge, dokadnie w taki sam
sposb, w jaki zmienia si kolejno dziaa w matematyce). W JavaScripcie jest podobnie sia kadego operatora jest cile okrelona.
Przedstawia to tabela 2.9. Im wysza pozycja w tabeli, tym wyszy priorytet operatora. Operatory znajdujce si na jednym poziomie (w jednym
wierszu) maj ten sam priorytet1.
Tabela 2.9. Priorytety operatorw

Lp.

Nazwy

Symbole

indeks tablicy, wywoanie funkcji

[], ()

inkrementacja i dekrementacja, ustalenie znaku, ++, --, +, -, ~, !,


new, typeof, delete
negacja bitowa i logiczna, utworzenie obiektu,
ustalenie typu zmiennej, usunicie skadowej

mnoenie, dzielenie, reszta z dzielenia

*, /, %

dodawanie, odejmowanie

+, -

przesunicie bitowe w lewo, w prawo, w prawo


z wypenieniem zerami

<<, >>, >>>

mniejsze, wiksze, mniejsze lub rwne, wiksze


lub rwne, porwnanie typw

<, >, <=, >=

rwne, rne

==, !=

iloczyn bitowy

&

bitowa rnica symetryczna

10

suma bitowa

11

iloczyn logiczny

&&

12

suma logiczna

||

13

warunkowy

? :

14

operatory przypisania

= += -= *= /= %= &=
^= |= <<= >>= >>>=

15

rozdzielanie wyrae

Tabela uwzgldnia rwnie operatory, ktre nie byy omawiane w ksice.

36

JavaScript wiczenia praktyczne

Instrukcja ifelse
Bardzo czsto w programie zachodzi potrzeba sprawdzenia jakiego
warunku i w zalenoci od tego, czy jest on prawdziwy, czy faszywy,
dalszego wykonywania rnych instrukcji. Do takiego sprawdzania
suy wanie instrukcja warunkowa ifelse. Ma ona ogln posta:
if (wyraenie warunkowe){
//instrukcje do wykonania, jeeli warunek jest prawdziwy
}
else{
//instrukcje do wykonania, jeeli warunek jest faszywy
}
W I C Z E N I E

2.6

Uycie instrukcji warunkowej

Wykorzystaj instrukcj warunkow ifelse do stwierdzenia, czy warto zmiennej typu cakowitego jest mniejsza od zera.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var liczba = -12;
if(liczba > 0){
document.write("Zmienna liczba jest wiksza od 0.");
}
else{
document.write("Zmienna liczba nie jest wiksza od 0.");
}
// Koniec kodu JavaScript -->
</script>

W skrypcie zostaa zadeklarowana zmienna liczba o wartoci 12. Do


stwierdzenia, czy warto tej zmiennej jest wiksza od zera, czy te
nie, zostaa uyta instrukcja warunkowa if zawierajca wyraenie
warunkowe w postaci:
liczba > 0

wykorzystujce operator warunkowy >. Takie wyraenie przyjmuje


warto true, jeli zmienna jest wiksza od 0, oraz warto false
w przeciwnym przypadku. Ca instrukcj if naley wic rozumie

Rozdzia 2. Elementy jzyka

37

nastpujco: jeli warto zmiennej liczba jest wiksza od 0, wykonaj


instrukcj:
document.write("Zmienna liczba jest wiksza od 0.");,

a w przeciwnym przypadku instrukcj:


document.write("Zmienna liczba nie jest wiksza od 0.");.

Instrukcja ifelse if
Instrukcja ifelse if pozwala na zbadanie wielu warunkw. Ma ona
schematyczn posta:
if (warunek1){
instrukcje1;
}
else if (warunek2){
instrukcje2;
}
else if (warunek3){
..instrukcje3;
}
...
else if (warunekn){
..instrukcjen;
}
else{
..instrukcjem;
}

Co oznacza: jeeli warunek1 jest prawdziwy, to zostan wykonane instrukcje1, w przeciwnym przypadku, jeeli jest prawdziwy warunek2,
to zostan wykonane instrukcje2, w przeciwnym przypadku, jeli
jest prawdziwy warunek3, to zostan wykonane instrukcje3 itd. Jeeli
aden z warunkw nie bdzie prawdziwy, to zostan wykonane instrukcjem. Ostatni blok else jest jednak opcjonalny i nie musi by stosowany.
Taka konstrukcja moe by wykorzystana np. w sytuacji, kiedy chcemy wykona wiele rnych instrukcji w zalenoci od stanu zmiennej.

38

JavaScript wiczenia praktyczne

W I C Z E N I E

2.7

Zoona instrukcja warunkowa

Uyj zoonej instrukcji warunkowej do okrelenia wartoci wybranej


zmiennej.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var liczba = 20;
if(liczba == 10){
document.write("Zmienna liczba jest rwna 10.");
}
else if(liczba == 20){
document.write("Zmienna liczba jest rwna 20.");
}
else if(liczba == 30){
document.write("Zmienna liczba jest rwna 30.");
}
else{
document.write("Zmienna liczba nie jest rwna ani 10, ani 20, ani
30.");
}
// Koniec kodu JavaScript -->
</script>

Przedstawiona w skrypcie zoona instrukcja warunkowa bada po


kolei warunki: liczba == 10, liczba == 20, liczba == 30, czyli sprawdza, czy zmienna liczba ma warto 10, 20 lub 30. Jeli ktrykolwiek
z tych warunkw jest prawdziwy, za pomoc instrukcji document.write
jest wywietlany odpowiedni komunikat. W przypadku, kiedy wszystkie warunki s faszywe, jest wykonywany blok else, czyli instrukcja:
document.write ("Zmienna liczba nie jest rwna ani 10, ani 20, ani
30.");

Operator warunkowy
Operator warunkowy pozwala w niektrych przypadkach na wygodne zastpienie bloku ifelse. Konstrukcja taka wyglda nastpujco:
(wyraenie warunkowe) ? warto1 : warto2

Naley rozumie to w sposb nastpujcy: jeeli wyraenie warunkowe


jest prawdziwe, czyli ma warto true cao przyjmuje warto

Rozdzia 2. Elementy jzyka

39

warto1, w przeciwnym przypadku warto2. Najatwiej zrozumie


ten zapis, wykonujc kolejne wiczenie.
W I C Z E N I E

2.8

Jak dziaa operator warunkowy

Wykorzystaj operator warunkowy do zmodyfikowania wartoci dowolnej zmiennej.


<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var x = 1, y;
y = (x < 0) ? 10 : 20;
document.write("Warto y to " + y + ".");
// Koniec kodu JavaScript -->
</script>

Najwaniejsza jest tu oczywicie linia y = (x < 0) ? 10 : 20;. Po lewej


stronie operatora przypisania = znajduje si zmienna (y), natomiast
po stronie prawej wyraenie warunkowe, czyli linia ta oznacza:
przypisz zmiennej y warto wyraenia warunkowego. Jaka jest ta
warto? Trzeba przeanalizowa samo wyraenie: (x < 0) ? 10 : 20.
Oznacza ono, zgodnie z tym, co zostao napisane wczeniej: jeeli
warto zmiennej x jest mniejsza od zera, przypisz wyraeniu warto 10, w przeciwnym przypadku (zmienna x wiksza lub rwna zero) przypisz wyraeniu warto 20. Poniewa zmiennej x na pocztku
skryptu zostaa przypisana warto 1, wartoci caego wyraenia
bdzie 20 i ta wanie warto zostanie przypisana zmiennej y.
W tym miejscu ponownie zajrzyjmy do tabeli 2.9. Z podanych w niej
informacji wynika, e operator warunkowy ma mniejszy priorytet ni
operatory relacyjne. W zwizku z tym nawiasy okrge wprowadzone
do wyraenia w celu zwikszenia czytelnoci zapisu mog zosta
pominite i moe mie ono rwnie posta:
x < 0 ? 10 : 20;

Instrukcja switch
Instrukcja wyboru switch (nazywana rwnie instrukcj switchcase)
pozwala w wygodny sposb sprawdzi cig warunkw i wykona rne

40

JavaScript wiczenia praktyczne

instrukcje w zalenoci od wynikw porwnywania. Ma ona ogln


posta:
switcs(wyraenie){
case warto1 :
instrukcje1;
break;
case warto2 :
instrukcje2;
break;
case warto3 :
instrukcje3;
break;
default :
instrukcje4;
}

ktr naley rozumie nastpujco: sprawd warto wyraenia wyraenie, jeli wynikiem jest warto1, to wykonaj intrukcje1 i przerwij
wykonywanie bloku switch (instrukcja break). Jeli wynikiem jest warto2, to wykonaj intrukcje2 i przerwij wykonywanie bloku switch,
jeli jest warto3, to wykonaj intrukcje3 i przerwij wykonywanie
bloku switch. Jeli nie zachodzi aden z wymienionych przypadkw,
wykonaj instrukcje4 i zakocz blok switch. Blok default jest jednak
opcjonalny i moe zosta pominity.
atwo zauway, e jest to odpowiednik zoonej instrukcji ifelse
if w postaci:
if(wyraenie == warto1){
instrukcje1;
}
else if(wyraenie == warto2){
instrukcje2;
}
else if(wyraenie == warto3){
instrukcje3;
}
else{
instrukcje4;
}

Potwierdmy to, wykonujc kolejne wiczenie.

Rozdzia 2. Elementy jzyka

41

W I C Z E N I E

2.9

Instrukcja wyboru switch

Zmodyfikuj kod wiczenia 2.7 w taki sposb, aby dziaanie skryptu


byo identyczne, ale zostaa uyta instrukcja switch.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var liczba = 20;
switcs(liczba){
case 10 :
document.write("Zmienna liczba jest rwna 10.");
break;
case 20:
document.write("Zmienna liczba jest rwna 20.");
break;
case 30:
document.write("Zmienna liczba jest rwna 30.");
break;
default:
document.write("Zmienna liczba nie jest rwna ani 10, ani 20, ani 30.");
}
// Koniec kodu JavaScript -->
</script>

Na pocztku zostaa utworzona zmienna liczba o wartoci 20. Dalej


znajduje si instrukcja switch, ktra najpierw oblicza warto wyraania wystpujcego w nawiasie okrgym. Poniewa w tym przypadku
jako wyraenie wystpuje nazwa zmiennej, wartoci wyraenia staje
si warto tej zmiennej (czyli 20). Warto ta jest porwnywana do
wartoci wystpujcych po sowach case, czyli 10, 20 i 30. Jeli zgodno zostanie stwierdzona, zostan wykonane instrukcje wystpujce
w danym bloku case. Jeli nie uda si dopasowa wartoci wyraenia
do adnej z wartoci wystpujcych po sowach case, jest wykonywany
blok default. Poniewa wartoci wyraenia jest 20, zgodno jest
stwierdzana w drugim bloku case i s wykonywane instrukcje znajdujce si w tym bloku, czyli:
document.write ("Zmienna liczba jest rwna 10.");
break;

Wystpujca po document.write instrukcja break przerywa wykonywanie


bloku case.

42

JavaScript wiczenia praktyczne

Na instrukcj break naley zwrci szczegln uwag. Jej przypadkowe pominicie moe doprowadzi do nieoczekiwanych wynikw
i bdw w skrypcie. Aby przekona si, w jaki sposb dziaa instrukcja switch bez instrukcji break, zmodyfikujmy skrypt z wiczenia 2.9.
W I C Z E N I E

2.10

Switch bez break

Zmodyfikuj kod z wiczenia 2.9, usuwajc z niego wszystkie instrukcje


break. Zaobserwuj dziaanie skryptu.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var liczba = 20;
switcs(liczba){
case 10 :
document.write("Zmienna liczba jest rwna 10.");
case 20:
document.write("Zmienna liczba jest rwna 20.");
case 30:
document.write("Zmienna liczba jest rwna 30.");
default:
document.write("Zmienna liczba nie jest rwna ani 10, ani 20, ani 30.");
}
// Koniec kodu JavaScript -->
</script>

Po uruchomieniu skryptu w przegldarce pojawi si obraz widoczny na


rysunku 2.5. Wyranie nie spenia on swojego zadania. Zmienna nie
moe przecie jednoczenie spenia kilku przeciwstawnych warunkw.
Jak wic dziaa przedstawiony kod? Ot jeli w ktrym z blokw
(przypadkw) case zostanie wykryta zgodno z wyraeniem wystpujcym za switch, zostan wykonane wszystkie dalsze instrukcje, a
do napotkania instrukcji break lub dotarcia do koca instrukcji switch.
W kodzie wiczenia zgodno jest stwierdzana ju w drugim bloku
case, jest wic wykonywana znajdujca si w nim instrukcja document.
write. Poniewa jednak w bloku tym nie ma instrukcji break, s wykonywane instrukcje znajdujce si w kolejnym bloku case (case 30).
W tym bloku rwnie brakuje break, a zatem s wykonywane instrukcje znajdujce si po sowie default. Tym samym wykonane zostan
prawie wszystkie znajdujce si w kodzie instrukcje document.write.

Rozdzia 2. Elementy jzyka

43

Rysunek 2.5.
Wynik pominicia
niezbdnych
instrukcji break

Ptle to wyraenia suce do wykonywania powtarzajcych si czynnoci. Przykadowo gdybymy chcieli 100 razy wypisa na stronie
pewien tekst, to mona by w tym celu uy 100 instrukcji document.write,
ale byoby to niewtpliwie niewygodne rozwizanie. Ptle pozwalaj
na automatyzacj takich czynnoci. W JavaScript mamy do dyspozycji
nastpujce rodzaje ptli:
q for,
q for..in,
q while,
q dowhile.

Ptla for
Ptla typu for ma skadni nastpujc:
for (wyraenie pocztkowe; wyraenie warunkowe; wyraenie modyfikujce){
blok instrukcji
}

wyraenie pocztkowe jest stosowane do zainicjalizowania zmiennej


uywanej jako licznik liczby wykona ptli; wyraenie warunkowe okrela

warunek, jaki musi by speniony, aby dokona kolejnego przejcia


w ptli; wyraenie modyfikujce uywane jest zwykle do modyfikacji
zmiennej bdcej licznikiem. Najlepiej pokaza to na konkretnym
przykadzie.

44

JavaScript wiczenia praktyczne

W I C Z E N I E

2.11

Prosta ptla typu for

Uyj ptli typu for, aby 10 razy wywietli na ekranie dowolny napis.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
for (var i = 0; i < 10; i++){
document.write("Ptla typu for <br />");
}
// Koniec kodu JavaScript -->
</script>

Tak konstrukcj naley rozumie nastpujco: utwrz zmienn i


i przypisz jej warto zero (i = 0), nastpnie tak dugo jak warto i
jest mniejsza od 10 (i < 10) wykonuj instrukcje znajdujce si wewntrz ptli (instrukcja document.write) oraz zwikszaj i o jeden (i++).
Tym samym na ekranie pojawi si 10 razy napis Ptla tyMu for, tak
jak jest to widoczne na rysunku 2.6. Zmienna i jest nazywana zmienn
iteracyjn, czyli kontrolujc kolejne przebiegi (iteracje) ptli.
Rysunek 2.6.
Efekt
wykorzystania
ptli for
do wielokrotnego
wywietlenia
napisu

Ptle tego typu mona zmodyfikowa, tak aby pozby si wyraenia


modyfikujcego. Dokadniej przenie je do wntrza ptli w nastpujcy sposb:
for (wyraenie pocztkowe; wyraenie warunkowe;){
instrukcje do wykonania
wyraenie modyfikujce
}

Rozdzia 2. Elementy jzyka

45

W I C Z E N I E

2.12

Wyraenie modyfikujce wewntrz ptli

Zmodyfikuj ptl typu for tak, aby wyraenie modyfikujce znalazo si


w bloku instrukcji.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
for (var i = 0; i < 10;){
document.write ("Ptla typu for <br />");
i++;
}
// Koniec kodu JavaScript -->
</script>

Wane jest, aby pamita o redniku wystpujcym po wyraeniu i < 10


jest on bowiem niezbdny dla prawidowego funkcjonowania skryptu.

W podobny sposb mona te pozby si wyraenia pocztkowego,


przenoszc je jednak nie do wntrza ptli, a przed ni.
W I C Z E N I E

2.13

Wyraenie pocztkowe przed ptl

Przenie wyraenie pocztkowe przed ptl for.


<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var i = 0;
for (; i < 10;){
document.write ("Ptla typu for <br />");
i++;
}
// Koniec kodu JavaScript -->
</script>

Skoro zaszlimy ju tak daleko w pozbywaniu si wyrae sterujcych, usumy rwnie wyraenie warunkowe. Jest to jak najbardziej
moliwe!

46

JavaScript wiczenia praktyczne

W I C Z E N I E

2.14

Ptla bez wyrae

Umie wyraenie warunkowe i modyfikujce we wntrzu ptli, natomiast wyraenie pocztkowe przenie poza ni.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var i = 0;
for (; ;){
document.write ("Ptla typu for <br />");
if (i++ >= 9) break;
}
// Koniec kodu JavaScript -->
</script>

Przy stosowaniu tego typu konstrukcji pamitajmy, e oba redniki


w nawiasach okrgych wystpujcych po for s niezbdne do prawidowego funkcjonowania kodu. Warto te zwrci uwag na zmian
kierunku nierwnoci. We wczeniejszych przykadach sprawdzalimy
bowiem, czy i jest mniejsze bd rwne 10, a teraz, czy jest wiksze
bd rwne 9. Dzieje si tak, poniewa poprzednio sprawdzalimy,
czy ptla ma si dalej wykonywa, natomiast obecnie, czy ma si zakoczy. Przy okazji wykorzystalimy te kolejn instrukcj, mianowicie break. Suy ona do natychmiastowego przerwania wykonywania
ptli.

Drug instrukcj pozwalajc na modyfikacj zachowania ptli jest


continue. Po jej napotkaniu nastpuje przerwanie biecej iteracji
i rozpoczcie kolejnej. Mwic prociej, nastpuje przeskok na pocztek ptli.
W I C Z E N I E

2.15

Uycie instrukcji continue

Wywietl na ekranie liczby pomidzy 1 a 20 podzielne przez 2. Skorzystaj z ptli for i instrukcji continue.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
for (var i = 1; i <= 20; i++){
if ((i % 2) != 0)
continue;

Rozdzia 2. Elementy jzyka

47

document.write (i + " ");


}
// Koniec kodu JavaScript -->
</script>

Efekt dziaania kodu zosta przedstawiony na rysunku 2.7. Wewntrz


ptli znajduje si instrukcja if sprawdzajca warunek (i % 2) != 0.
Wykorzystuje on operator dzielenia modulo (%) do stwierdzenia, czy
dana liczba jest podzielna przez 2. Jeli bowiem reszta z dzielenia
przez 2 jest rwna 0 (i % 2 rwne 0), to dana warto jest podzielna
przez 2, jeli natomiast reszta z dzielenia przez 2 jest rna od 0 (i % 2
rne od 0), to dana warto jest niepodzielna przez dwa. Std dla kadej wartoci zmiennej i niepodzielnej przez dwa zostanie wykonana
instrukcja continue rozpoczynajca kolejn iteracj ptli, a dziki temu
liczby nieparzyste nie pojawi si na ekranie.
Rysunek 2.7.
Liczby podzielne
przez dwa

Oczywicie do realizacji zadania przedstawionego w wiczeniu 2.15


nie jest niezbdne wykorzystanie instrukcji continue. Mona je rwnie
wykona, uywajc samej instrukcji if.
W I C Z E N I E

2.16

Liczby podzielne przez dwa

Wykonaj zadanie z wiczenia 2.15 bez uycia instrukcji continue.


<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
for (var i = 1; i <= 20; i++){
if ((i % 2) == 0)
document.write (i + " ");
}
// Koniec kodu JavaScript -->
</script>

48

JavaScript wiczenia praktyczne

Ptla forin
Ptla typu forin pozwala na odczytanie wartoci oraz nazw waciwoci obiektw (w tym rwnie tablic). Ma ona schematyczn posta:
for (var nazwa in obiekt){
//instrukcje
}

W takim przypadku we wntrzu ptli pod identyfikator nazwa podstawiane s kolejne waciwoci obiektu obiekt. Przykad jej uycia
zostanie podany w dalszej czci ksiki.

Ptla while
O ile ptla typu for suy zwykle do wykonywania znanej z gry liczby
operacji, to w przypadku ptli while liczba ta z reguy nie jest znana.
Nie jest to jednak obligatoryjny podzia, poniewa obie ptle mona
napisa w taki sposb, aby byy swoimi funkcjonalnymi odpowiednikami. Oglna konstrukcja ptli typu while jest nastpujca:
wsile (wyraenie warunkowe)
{
instrukcje
}

Instrukcje s wykonywane dopty, dopki wyraenie warunkowe jest


prawdziwe.
W I C Z E N I E

2.17

Konstrukcja ptli while

Uyj ptli while, aby 10 razy wywietli na ekranie dowolny napis.


<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
i = 0;
wsile(i++ < 10){
document.write ("Ptla typu wsile<br />");
}
// Koniec kodu JavaScript -->
</script>

Rozdzia 2. Elementy jzyka

49

W I C Z E N I E

2.18

Liczby nieparzyste i ptla while

Korzystajc z ptli while, napisz skrypt wywietlajcy na ekranie liczby od 1 do 20 niepodzielne przez 2.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
i = 1;
wsile (i <= 20){
if (i % 2 == 0)
document.write (i + " ");
i++;
}
// Koniec kodu JavaScript -->
</script>

W ptli while mona oczywicie rwnie stosowa instrukcje break


i continue.

Ptla dowhile
Ptla dowhile jest odmian ptli while. Ma ona nastpujc posta:
do{
instrukcje;
}
wsile(warunek);

Konstrukcj t naley rozumie: wykonuj instrukcje, dopki warunek


jest prawdziwy.
W I C Z E N I E

2.19

Uycie ptli dowhile

Korzystajc z ptli dowhile, napisz program wywietlajcy na ekranie


10 razy dowolny napis.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var i = 0;
do{
document.write ("Ptla dowsile <br />");
}

50

JavaScript wiczenia praktyczne


wsile (i++ < 9);
// Koniec kodu JavaScript -->
</script>

Wydawa by si mogo, e to przecie to samo, co zwyka ptla while.


Jest jednak pewna rnica. Ot w przypadku ptli dowhile instrukcje
wykonane s co najmniej jeden raz, nawet jeli warunek jest na pewno
faszywy.
W I C Z E N I E

2.20

Ptla dowhile z faszywym warunkiem

Napisz ptl dowhile zawierajc faszywy warunek. We wntrzu ptli


umie instrukcj wywietlajc dowolny napis na ekranie. Zaobserwuj dziaanie skryptu.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
do{
document.write ("Ptla dowsile <br />");
}
wsile (false);
// Koniec kodu JavaScript -->
</script>

W przedstawionej ptli warunek jej kontynuacji jest na pewno faszywy (false), a mimo to na ekranie pojawi si napis. Dzieje si tak dlatego,
e w przypadku tej ptli najpierw s wykonywane instrukcje umieszczone w jej wntrzu, a dopiero potem jest sprawdzany warunek.

Definiowanie funkcji
Funkcje s to wydzielone bloki kodu przeznaczone do wykonywania
okrelonych zada. Schematyczna definicja funkcji ma posta:
function nazwa_funkcji(argumenty_funkcji)
{

Rozdzia 2. Elementy jzyka


}

51

//kod funkcji

Nazwa funkcji, podobnie jak inne identyfikatory, moe skada si


z liter (alfabetu aciskiego), cyfr oraz znakw podkrelenia, nie moe natomiast zawiera znakw narodowych. Wolno stosowa zarwno
wielkie, jak i mae litery, ktre s rozrniane, co oznacza, e przykadowe nazwy: funkcja i Funkcja s traktowane jako rne. Nazwa funkcji
nie moe zaczyna si od cyfry.
Aby wykona instrukcje znajdujce si wewntrz funkcji (pomidzy
znakami nawiasu klamrowego), naley j wywoa. Wywoanie polega
na umieszczeniu w kodzie skryptu nazwy funkcji wraz z wystpujcymi po niej znakami nawiasu okrgego. Zobaczmy, jak tego typu konstrukcja bdzie dziaaa w praktyce.
W I C Z E N I E

2.21

Utworzenie i wywoanie funkcji

Utwrz funkcj, ktrej zadaniem bdzie wywietlenie napisu, a nastpnie wywoaj j w kodzie skryptu.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
function wyswietl_napis()
{
document.write("Instrukcja document.write z wntrza funkcji.");
}
wyswietl_napis();
// Koniec kodu JavaScript -->
</script>

W skrypcie najpierw zostaa zdefiniowana funkcja o nazwie wyswietl_


naMis, a nastpnie zostaa ona wywoana przez podanie jej nazwy zakoczonej znakami nawiasu okrgego. Wewntrz funkcji (stosuje si
te termin: w ciele funkcji) umieszczona jest instrukcja document.write.
Poniewa wywoanie funkcji jest rwnoznaczne z wykonaniem
znajdujcych si w niej instrukcji, w przegldarce zobaczymy zdefiniowany napis.

52

JavaScript wiczenia praktyczne

Argumenty funkcji
Funkcjom mona przekazywa argumenty, czyli wartoci (dane), ktre
mog wpywa na ich zachowanie lub te by przez nie przetwarzane. List argumentw naley umieci w nawiasie okrgym za
nazw funkcji, oddzielajc je od siebie znakami przecinka. A zatem
taka konstrukcja ma schematyczn posta:
funtion nazwa_funkcji(argument1, argument2, ... , argumentN)
{
//instrukcje wntrza funkcji
}

Napiszmy wic funkcj, ktrej zadaniem bdzie wywietlenie wartoci


przekazanego jej argumentu i wywoajmy j w kodzie skryptu.
W I C Z E N I E

2.22

Funkcja przyjmujca argument

Napisz funkcj przyjmujc jeden argument i wywietlajc jego warto na ekranie. Wywoaj j z rnymi argumentami.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
function wyswietl_wartosc(wartosc)
{
document.write(wartosc);
}
wyswietl_wartosc("przykadowy napis");
document.write("<br />");
wyswietl_wartosc(10);
document.write("<br />");
wyswietl_wartosc(2z.i);
// Koniec kodu JavaScript -->
</script>

Powstaa tu funkcja wyswietl_wartosc, ktra przyjmuje jeden argument


o nazwie wartosc. Wewntrz funkcji mona odczyta warto tego argumentu, odwoujc si do jego nazwy. W ten sposb mona przekaza
argument dowolnego typu, typ nie jest bowiem z gry okrelony. Tym
samym instrukcja document.write(wartosc); powoduje wywietlenie tej
wartoci na ekranie. W dalszym kodzie skryptu funkcja wyswietl_wartosc
zostaa wywoana trzykrotnie, za kadym razem z innym argumentem. W pierwszym przypadku by to cig znakw, w drugim liczba

Rozdzia 2. Elementy jzyka

53

cakowita, a w trzecim liczba rzeczywista. Po uruchomieniu kodu


w przegldarce zobaczymy zatem widok jak na rysunku 2.8.
Rysunek 2.8.
Wynik wywoa
funkcji
wyswietl_wartosc
z rnymi
argumentami

Funkcja moe rwnie przyjmowa wicej ni jeden argument i wykonywa na nich operacje.
W I C Z E N I E

2.23

Operacje na argumentach

Napisz funkcj przyjmujc dwa argumenty i wywietlajc wynik ich


dodawania.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
function dodaj(wart1, wart2)
{
document.write("Wynikiem dodawania " + wart1 + " + " + wart2 + " jest ");
document.write(wart1 + wart2);
document.write(".");
}
dodaj (11, 21);
// Koniec kodu JavaScript -->
</script>

Skrypt zawiera funkcj o nazwie dodaj, ktra przyjmuje dwa argumenty: wart1 i wart2. W jej wntrzu wykonywana jest operacja dodawania, a jej wynik jest wywietlany na ekranie (wraz z wartociami
obu argumentw). W dalszej czci skryptu funkcja zostaa wywoana
z argumentami 11 i 21, a zatem wynik dziaania skryptu bdzie taki,
jak zaprezentowany na rysunku 2.9.

54

JavaScript wiczenia praktyczne

Rysunek 2.9.
Wynik dziaania
funkcji
wykonujcej
dodawanie
argumentw

Zwracanie wartoci przez funkcje


Przyjmowanie argumentw to nie jedyna cecha funkcji mog one
rwnie zwraca rne wartoci. Czynno ta jest wykonywana za
pomoc instrukcji return. Jeli wystpi ona wewntrz funkcji, ta jest
przerywana i zwraca warto wystpujc po return. Schematycznie
tego typu konstrukcja wyglda nastpujco:
funtion nazwa_funkcji(argumenty)
{
//instrukcje wntrza funkcji
return warto;
}

Jeli wywoamy tego typu funkcj, to w miejscu jej wywoania zostanie wstawiona zwrcona przez ni warto, ktra bdzie moga by
wykorzystana w dalszej czci skryptu. Warto te wiedzie, e uycie samej instrukcji return bez adnych argumentw rwnie powoduje przerwanie dziaania funkcji (nie zwraca ona jednak wtedy adnej
wartoci).
W I C Z E N I E

2.24

Zwracanie wyniku dziaania funkcji

Napisz funkcj przyjmujc dwa argumenty i zwracajc wynik ich


dodawania. Wywoaj j w skrypcie.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
function dodaj(wart1, wart2)
{
var wynik = wart1 + wart2;
return wynik;
}

Rozdzia 2. Elementy jzyka

55

var wartosc = dodaj(11, 21);


document.write ("Wynikiem dodawania 11 + 21 jest " + wartosc + ".");
// Koniec kodu JavaScript -->
</script>

Funkcja dodaj przyjmuje argumenty wart1 i wart2. W jej wntrzu s


one dodawane za pomoc arytmetycznego operatora +, a wynik tego
dziaania jest przypisywany zmiennej wynik. Warto tej zmiennej
jest z kolei zwracana za pomoc instrukcji return. Zmienna wynik peni
tu jedynie funkcj pomocnicz zwikszajc czytelno prezentowanej techniki. Rwnie dobrze ca treci funkcji dodaj mogaby by
jedna tylko instrukcja:
return wart1 + wart2;

W dalszej czci kodu funkcja dodaj jest wywoywana z argumentami


11 i 21, a wynik jej dziaania (czyli zwrcona przez ni warto) jest
przypisywana zmiennej wartosc, ktra jest nastpnie uywana w instrukcji document.write do wywietlania rezultatu na ekranie.
Instrukcja
wartosc = dodaj (11, 21);

dziaa nastpujco:
q Najpierw jest wywoywana funkcja dodaj, a zatem
s wykonywane jej instrukcje;
q Nastpnie wynik dziaania funkcji dodaj jest podstawiany
w miejscu jej wywoania. Poniewa w tym przypadku
jest to 32, instrukcja jest traktowana jako wartosc = 32;
q Zmiennej wartosc jest przypisywana warto zwrcona
przez funkcj.
Wynik dziaania skryptu bdzie wic taki sam, jak zostao to przedstawione na rysunku 2.9.

Na zakoczenie rozdziau omwimy jeszcze temat zasigu zmiennych


(uywa si rwnie terminu widoczno zmiennych). Zasig moemy
okreli jako miejsca, w ktrych zmienna jest wana i mona si do
niej bezporednio odwoywa. Zmienna moe by:

56

JavaScript wiczenia praktyczne

q globalna,
q lokalna.

Zasig globalny
Zmienne globalne (o zasigu globalnym) to takie, ktre s widoczne
w kadym miejscu skryptu. Zmienna staje si globaln, jeli jest zdefiniowana poza wntrzami funkcji. Mona si do niej odwoywa
w dowolnym miejscu kodu, rwnie we wntrzach funkcji.
W I C Z E N I E

2.25

Odwoanie do zmiennej globalnej

Umie w skrypcie zmienn globaln oraz dowoln funkcj. Sprbuj


odczyta warto zmiennej zarwno w funkcji, jak i poza ni.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
var liczba = 12z;
function func()
{
document.write("Warto zmiennej w funkcji: " + liczba);
}
func();
document.write("<br />");
document.write("Warto zmiennej poza funkcj: " + liczba);
// Koniec kodu JavaScript -->
</script>

W skrypcie zostaa zadeklarowana globalna zmienna liczba o wartoci 124 oraz funkcja func, ktrej zadaniem jest wywietlenie wartoci
wymienionej zmiennej. Poniewa zmienna ma zasig globalny, jest
to dziaanie prawidowe, co pokazuje dalszy kod skryptu, w ktrym
funkcja zostaa wywoana i zostaa rwnie wywietlona warto
zmiennej.

Rozdzia 2. Elementy jzyka

57

Zasig lokalny
Zmienne o zasigu lokalnym s definiowane wewntrz funkcji, a ich
zasig jest ograniczony tylko do wntrza funkcji, w ktrej zostay
zdefiniowane. Prba odwoania w innym miejscu skryptu spowoduje
powstanie bdu.
W I C Z E N I E

2.26

Zasig zmiennej lokalnej

Umie w skrypcie dowoln funkcj i zadeklaruj w niej zmienn. Sprbuj odczyta warto zmiennej zarwno w funkcji, jak i poza ni.
<script type="text/javascript">
<!-- Ukrycie przed przegldarkami nie obsugujcymi JavaScriptu
function func()
{
var liczba = 12z;
document.write("Warto zmiennej w funkcji: " + liczba);
}
func();
document.write("<br />");
document.write("Warto zmiennej poza funkcj: " + liczba);
// Koniec kodu JavaScript -->
</script>

Powyszy skrypt, w przeciwiestwie do przedstawionego w wiczeniu


2.25, nie bdzie dziaa prawidowo. Skoro bowiem zmienna liczba
zostaa zadeklarowana we wntrzu funkcji func, to jest zmienn lokaln i nie mona si do niej odwoywa poza t funkcj. Std instrukcja:
document.write("Warto zmiennej poza funkcj: " + liczba);

nie bdzie moga by poprawnie wykonana, a na ekranie pojawi si


tylko napis:
Warto zmiennej w funkcji: 12z

Jeli uywamy przegldarki dysponujcej konsol JavaScript (jak np.


FireFox, Opera), po wywoaniu konsoli (menu Narzdzia\Konsola
JavaScript) zobaczymy, e faktycznie skrypt spowodowa wystpienie
bdu (rysunek 2.10).

58
Rysunek 2.10.
Odwoanie do
zmiennej lokalnej
spowodowao
wystpienie bdu

JavaScript wiczenia praktyczne

You might also like