Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu
niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą
kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym,
magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź
towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte
w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej
odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie
praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również
żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Redaktor prowadzący: Ewelina Burska
Projekt okładki: Maciej Pasek
Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie?cwjas3
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Przykłady omawiane w książce oraz kody źródłowe można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/cwjas3.zip
ISBN: 978-83-246-4796-5
Copyright © Helion 2013
Printed in Poland.
Spis treci
Wstp
7
Rozdzia 1. Podstawy
11
Skrypty w kodzie strony
11
Wywietlanie informacji
14
Uywanie znaczników formatujcych dane
17
Gdy przegldarka nie obsuguje skryptów
19
JavaScript to NIE skrypty Javy!
20
Rozdzia 2. Elementy jzyka
21
Komentarze
21
Typy danych
23
Zmienne
26
Operatory
29
Rozdzia 3. Instrukcje sterujce
45
Instrukcje warunkowe
45
Operator warunkowy
50
Instrukcja wyboru switch
51
Ptle
54
Przerywanie i kontynuowanie ptli
60
Rozdzia 4. Funkcje
65
Definiowanie funkcji
65
Argumenty
66
Zwracanie wartoci
69
4
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
Zasig zmiennych
70
Funkcje zagniedone (wewntrzne)
74
Alternatywne definiowanie funkcji
76
Rozdzia 5. Tablice
79
Tworzenie tablic
79
Odczyt i zapis tablic
81
Konstruktor tablicy
84
Wykonywanie operacji na tablicach
85
Rozdzia 6. Programowanie obiektowe
95
Obiekty w JavaScripcie
95
Tworzenie obiektów za pomoc literaów
96
Konstruktor typu obiektowego
99
Metody obiektów
101
Iteracja po waciwociach
102
Funkcje to te obiekty
105
Prototypy, czyli dziedziczenie w JavaScripcie
107
Rozdzia 7. Wyjtki
111
Zgaszanie wyjtków
111
Przechwytywanie wyjtków
114
Blok finally
118
Rozdzia 8. Obiekty i funkcje globalne
121
Funkcje globalne
121
Przetwarzanie wyrae
123
Przetwarzanie wartoci liczbowych
125
Matematyka
129
Data i czas
134
Cigi znaków
143
Rozdzia 9. Wspópraca z przegldark
147
Obiekty udostpniane przez przegldark
147
Obiekt window
148
Obiekt document
156
Obiekt history
158
Obiekt location
159
Obiekt navigator
163
S p i s t r e c i
5
Rozdzia 10. Elementy witryny (model DOM)
167
Jak przegldarka „widzi” dokument?
167
Dostp do elementów strony
170
Odczyt i zmiana atrybutów oraz stylów CSS
174
Odwoania do istniejcych wzów
177
Dynamiczne tworzenie fragmentów strony
180
Rozdzia 11. Zdarzenia
183
Zdarzenia na stronie WWW
183
Zdarzenia jako waciwoci elementów witryny
186
Rejestrowanie procedur obsugi
190
Usuwanie procedur obsugi
193
Obsuga klawiatury i myszy
195
Rozdzia 12. Obsuga interfejsu uytkownika
199
Elementy witryny
199
Pola wyboru typu checkbox
201
Pola wyboru typu radio
202
Pola tekstowe (text)
205
Rozszerzone pola tekstowe (textarea)
206
Listy
209
2
Elementy jzyka
Komentarze
W treci skryptu mona umieszcza jedynie tak tre, która bdzie
interpretowana przez przegldark
1
jako instrukcje JavaScriptu. W przy-
padku bardziej skomplikowanego kodu warto jednak doda komenta-
rze objaniajce dziaanie poszczególnych jego fragmentów. Do dyspo-
zycji s dwa rodzaje komentarzy: wierszowy i blokowy. Oba maj tak
sam posta jak w innych typowych jzykach programowania opartych
na skadni wywodzcej si z jzyków C i C++.
Komentarz wierszowy (liniowy) zaczyna si od znaków
//
i obowizuje
do koca danej linii skryptu. Wszystko, co wystpuje po tych dwóch
znakach, a do koca biecej linii, jest ignorowane przez przegldark
przetwarzajc skrypt.
W wiczeniach z tego oraz kolejnych rozdziaów bdzie prezentowany
tylko waciwy kod skryptów JavaScript; kod HTML bdzie pomijany,
o ile nie jest niezbdny do funkcjonowania przykadu (w szczególnoci
dotyczy to nagówków stron). Listingi dostpne na FTP uwzgldniaj
natomiast zawsze peny kod strony, czyli zarówno HTML, jak i JavaScript.
1
Przez zawarty w przegldarce interpreter JavaScriptu. Mówi si równie
o „silniku” JavaScriptu (ang. JavaScript engine).
2 2
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
W I C Z E N I E
2.1
Uycie komentarza wierszowego
Uyj w kodzie skryptu komentarza wierszowego.
<body>
<script type="text/javascript">
// Wywietlenie napisu powitalnego
document.write("Witam na mojej stronie!");
</script>
</body>
Komentarz blokowy rozpoczyna si od znaków
/*
i koczy znakami
*/
.
Wszystko, co znajduje si pomidzy, jest pomijane przy przetwarzaniu
kodu przez przegldark. Komentarz blokowy mona umieci prak-
tycznie w dowolnym miejscu skryptu, moe on si nawet znale
w rodku instrukcji (pod warunkiem e nie zostanie przedzielone adne
sowo). Komentarzy tego typu nie wolno natomiast zagnieda, mona
jednak stosowa wewntrz nich komentarze wierszowe.
W I C Z E N I E
2.2
Wykorzystanie komentarza blokowego
Uyj w kodzie skryptu komentarza blokowego.
<body>
<script type="text/javascript">
/*
Przykadowy skrypt wywietlajcy tre strony.
Powstanie warstwa wraz z akapitem tekstowym.
*/
document.write("<div>");
document.write("<p>To jest tre akapitu tekstowego.</p>");
document.write("</div>");
</script>
</body>
R o z d z i a 2 . • E l e m e n t y j z y k a
2 3
Typy danych
Typ danych to po prostu okrelenie rodzaju danych. Przykadowo, typ
cakowitoliczbowy okrela liczby cakowite. Wystpujce w JavaScripcie
typy danych mona podzieli nastpujco:
T
typ liczbowy,
T
typ acuchowy,
T
typ logiczny,
T
typ obiektowy,
T
typy specjalne.
Typ liczbowy
Typ liczbowy suy do reprezentacji liczb, przy czym nie ma wystpu-
jcego w klasycznych jzykach programowania rozrónienia na typy
cakowitoliczbowe i rzeczywiste (zmiennopozycyjne). Liczby zapisy-
wane s za pomoc literaów (staych napisowych, z ang. string con-
stant, literal constant) liczbowych, czyli cigów znaków skadajcych
si na liczb, np.
24
(umieszczony w kodzie skryptu tekst
24
to dwa
znaki, dwójka i czwórka, które razem stanowi litera — sta napi-
sow — interpretowany jako liczba 24). Obowizuj przy tym nast-
pujce zasady:
T
Jeeli cig cyfr nie jest poprzedzony adnym znakiem lub jest
poprzedzony znakiem +, reprezentuje warto dodatni, jeeli
natomiast jest poprzedzony znakiem –, reprezentuje warto
ujemn.
T
Jeeli litera rozpoczyna si od cyfry 0, jest traktowany jako
warto ósemkowa.
T
Jeeli litera rozpoczyna si od cigu znaków
0x
, jest traktowany
jako warto szesnastkowa (heksadecymalna). W zapisie wartoci
szesnastkowych mog by wykorzystywane zarówno mae,
jak i wielkie litery alfabetu, od A do F.
T
Literay mog by zapisywane w notacji wykadniczej, 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 * 10
Z
.
2 4
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
T
W liczbach rzeczywistych separatorem dziesitnym jest kropka
(zamiast wystpujcego w notacji polskiej przecinka, np. zapis
3.14
oznacza warto 3,14, czyli trzy i czternacie setnych).
Przykady literaów liczbowych:
123
— dodatnia cakowita warto dziesitna 123,
-123
— ujemna cakowita warto dziesitna –123,
012
— dodatnia cakowita warto ósemkowa równa 10
w systemie dziesitnym,
-024
— ujemna cakowita warto ósemkowa równa 20
w systemie dziesitnym,
0xFF
— dodatnia cakowita warto szesnastkowa równa 255
w systemie dziesitnym,
-0x0f
— ujemna cakowita warto szesnastkowa równa –15
w systemie dziesitnym,
1.1
— dodatnia warto rzeczywista 1,1,
-1.1
— ujemna warto rzeczywista –1,1,
0.1E2
— dodatnia warto rzeczywista równa 10,
1.0E-2
— dodatnia warto rzeczywista równa 0,01.
Typ acuchowy
Typ acuchowy (inaczej, typ string) suy do reprezentacji cigów
znaków (napisów). Cigi te (inaczej, stae napisowe) powinny by ujte
w znaki cudzysowu, aczkolwiek dopuszczalne jest równie wykorzy-
stanie znaków apostrofu. Przykadowy cig ma posta:
"abcdefg"
Napisy mog te zawiera sekwencje znaków specjalnych przedsta-
wione w tabeli 2.1.
Znaki cudzysowu (apostrofu) s tu wyrónikami cigu (napisu). Naley
na to zwróci uwag, gdy sam cig ma zawiera jeden z tych znaków.
Jeeli w cigu ma wystpi znak uyty jako wyrónik cigu, znak ten
musi by zastpiony przez sekwencj specjaln.
R o z d z i a 2 . • E l e m e n t y j z y k a
2 5
Tabela 2.1. Sekwencje znaków specjalnych
Sekwencja
Znaczenie
\b
backspace (ang. backspace)
\n
nowa linia (ang. new line)
\r
powrót karetki (ang. carriage return)
\f
nowa strona (ang. form feed)
\t
tabulacja (ang. horizontal tab)
\"
cudzysów (ang. double quote)
\'
apostrof (ang. single quote)
\\
lewy ukonik (ang. backslash)
W I C Z E N I E
2.3
Wyróniki cigów
Uyj instrukcji
document.write
do wywietlenia kilku napisów. Napisy
powinny zawiera znaki bdce wyrónikami cigów.
<body>
<script type="text/javascript">
// Wyrónikami cigu s znaki cudzysowu.
// Konieczne jest uycie sekwencji specjalnej \"
document.write("<p>To jest cytat: \"By albo nie by...\".</p>");
// Wyrónikami cigu s znaki apostrofu.
// Konieczne jest uycie sekwencji specjalnej \'
document.write(
'<p>Prawa Murphy\'ego to zbiór humorystycznych powiedze.</p>');
// Sekwencji specjalnych nie trzeba uywa po zamianie
// znaków wyróniajcych cig.
document.write('<p>To jest cytat: "By albo nie by...".<p>');
document.write(
"<p>Prawa Murphy'ego to zbiór humorystycznych powiedze.<p>");
</script>
</body>
2 6
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
Typ logiczny
Typ logiczny (boolean) pozwala na okrelenie dwóch wartoci logicz-
nych: prawda i fasz. Warto prawda jest w JavaScripcie reprezento-
wana przez sowo
true
, natomiast warto fasz przez
false
. Wartoci
tego typu s uywane przy konstruowaniu wyrae logicznych, porów-
nywaniu danych, wskazywaniu, czy dana operacja zakoczya si suk-
cesem itp.
Typ obiektowy
Typ obiektowy suy do reprezentacji obiektów. Nie ma specjalnego
sowa kluczowego oznaczajcego ten typ. Najczciej wykorzystuje si
obiekty wbudowane oraz udostpniane przez przegldark.
Typy specjalne
Mona wyróni dwa rodzaje typów specjalnych:
null
i
undefined
. Cho
podobne, nie s tosame. Otó,
null
okrela warto pust (czy te brak
wartoci) i najczciej uywany jest podczas korzystania z obiektów
i programowania obiektowego. W tym kontekcie, jeli jaki byt pro-
gramistyczny (zmienna, obiekt, waciwo itd.) ma warto
null
, ozna-
cza to, e jest pusty.
Z kolei typ
undefined
okrela warto niezdefiniowan. W tym kontek-
cie warto
undefined
ma niezainicjowana zmienna, zmienna, której
jawnie przypisano warto
undefined
, bd te nieistniejca waciwo
obiektu.
Zmienne
Zmienna to miejsce w skrypcie, w którym mona przechowywa dane,
czyli liczby, napisy itp. Miejsce to oznaczone jest nazw. A zatem
kada zmienna ma swoj nazw, która pozwala na jej jednoznaczn
identyfikacj w treci skryptu, inaczej mówic, „w kodzie”. Zmienna
charakteryzuje si równie typem, który okrela rodzaj danych, jakie
R o z d z i a 2 . • E l e m e n t y j z y k a
2 7
przechowuje. W celu utworzenia zmiennej naley j zadeklarowa, tzn.
poda nazw oraz pocztkow warto. Mona to zrobi nastpujco
2
:
var nazwa_zmiennej = warto;
W JavaScripcie, podobnie jak i w wielu innych skryptowych jzykach
programowania, nie okrela si jawnie typu zmiennej, a wic kada
z nich moe przyjmowa dane z dowolnego typu opisanego w poprzed-
nim podrozdziale. Ponadto typ danych nie jest przypisywany zmiennej
na stae i moe si zmienia w trakcie dziaania skryptu.
Nazwa zmiennej moe zawiera litery, cyfry i znak podkrelenia
3
. Wolno
stosowa zarówno wielkie, jak i mae litery, s te one rozróniane,
co oznacza, e przykadowo:
liczba
i
Liczba
to nazwy dwóch rónych
zmiennych. Dopuszczalne s równie znaki narodowe, np. polskie
litery — wielu programistów korzysta jednak wycznie z liter alfabetu
aciskiego, nawet gdy tworz nazwy pochodzce z jzyka narodowego.
Nazwa zmiennej nie moe te zaczyna si od cyfry.
W I C Z E N I E
2.4
Uycie zmiennych w skrypcie
Zadeklaruj dwie zmienne, przypisz im dowolne cigi znaków i wywietl
ich wartoci na ekranie.
<script type="text/javascript">
var zmienna1 = "Mój komputer";
var zmienna2 = 2;
document.write(zmienna1 + " ma dysk o pojemnoci " + zmienna2 + " TB.");
</script>
Po wczytaniu takiej strony na ekranie ukae si napis Mój komputer ma
dysk o pojemnoci 2 TB. Jak dziaa ten skrypt? Zadeklarowane zostay
dwie zmienne o nazwach
zmienna1
i
zmienna2
. Pierwszej z nich przypi-
sano cig znaków
Mój komputer
, a drugiej — warto liczbow, dodatni
liczb cakowit
2
. Obu zmiennych uyto nastpnie w instrukcji
docu
´
ment.write
, wywietlajcej dane na ekranie. Konieczne byo przy tym
poczenie napisów, tak aby otrzyma jeden cig, który ukaza si na
2
Mona te zastosowa konstrukcj bez sowa
var: nazwa_zmiennej = warto;
.
Nie s to jednak sposoby w peni równowane. Zostanie to bliej wyjanione
w jednym z kolejnych rozdziaów.
3
Dopuszczalny jest równie znak $, jednak lepiej go unika przy nazywaniu
wasnych zmiennych.
2 8
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
ekranie. Posuy do tego znak
+
(operator czenia acuchów; patrz
te podrozdzia „Operatory”). Zostao wic wykonane czenie, inaczej
konkatenacja, acuchów znakowych.
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.5
Zmiana typu zmiennej
Zadeklaruj jedn zmienn. Przypisz do niej dowolny acuch znaków
i wywietl jej warto na ekranie. Nastpnie przypisz tej samej zmiennej
warto liczbow i równie wyprowad j na ekran.
<script type="text/javascript">
var zmienna1 = "To jest przykadowy tekst.";
document.write("Pierwsza warto zmiennej zmienna1: " + zmienna1);
zmienna1 = 24.7;
document.write("<br />Druga warto zmiennej zmienna1: " + zmienna1);
</script>
Efekt dziaania skryptu jest widoczny na rysunku 2.1. Na pocztku
zostaa zadeklarowana zmienna
zmienna1
i przypisano jej cig znaków:
var zmienna1 = "To jest przykadowy tekst.";
który dziki instrukcji
document.write
pojawi si na ekranie. Nastpnie
zmiennej tej zostaa przypisana warto rzeczywista
24.7
:
zmienna1 = 24.7;
i tym samym zmienia ona swój typ. Po pierwszym przypisaniu by
to typ acuchowy, po drugim — liczbowy. Wida wic wyranie, e
zmiana typu danych moe nastpowa w trakcie dziaania skryptu.
Rysunek 2.1. Efekt dziaania kodu z wiczenia 2.5
R o z d z i a 2 . • E l e m e n t y j z y k a
2 9
Operatory
W JavaScripcie, podobnie jak i w innych jzykach programowania,
wystpuje wiele operatorów, które pozwalaj na wykonywanie rozma-
itych operacji. Operatory te mona podzieli na nastpujce grupy:
T
arytmetyczne,
T
porównywania (relacyjne),
T
bitowe,
T
logiczne,
T
przypisania,
T
pozostae.
Mona wic wykonywa operacje dodawania, odejmowania, porówny-
wania, przypisania i wiele innych.
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.2. W tej grupie wystpuj jednak rów-
nie operatory inkrementacji (zwikszania) i dekrementacji (zmniej-
szania). Operatory
*
,
/
,
+
,
-
,
%
s dwuargumentowe, natomiast
++
i
--
s jednoargumentowe.
Tabela 2.2. 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
3 0
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
W I C Z E N I E
2.6
Wykonywanie operacji arytmetycznych
Umie w skrypcie kilka zmiennych, uyj ich do wykonania standar-
dowych operacji arytmetycznych (jedn operacj arytmetyczn wyko-
naj bez uywania zmiennych). Wywietl wyniki na ekranie.
<script type="text/javascript">
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 * 8 jest ");
document.write(2 * 8);
</script>
Wynik dziaania przedstawionego skryptu z pewnoci nie jest ad-
nym zaskoczeniem (rysunek 2.2). Zostay w nim zadeklarowane trzy
zmienne:
pierwszaLiczba
,
drugaLiczba
,
trzeciaLiczba
. Pierwszym dwóm
zostay przypisane wartoci cakowite
12
i
5
, a ostatniej warto wyni-
kajca z dziaania
pierwszaLiczba – drugaLiczba
, czyli
7
. Na ekranie
zostay wywietlone wyniki dziaa:
T pierwszaLiczba + 5
(czyli 17),
T pierwszaLiczba – drugaLiczba
(czyli 7),
T 2 * 8
(czyli 16).
Rysunek 2.2. Wynik dziaania kilku operacji arytmetycznych
Wida wic wyranie, e operacje arytmetyczne mog by wykony-
wane zarówno na dwóch zmiennych, na zmiennej i liczbie, jak i dwóch
liczbach.
R o z d z i a 2 . • E l e m e n t y j z y k a
3 1
Do operatorów arytmetycznych naley równie
%
, przy czym, jak zostao
to zaznaczone w tabeli 2.1, nie oznacza on obliczania procentów, ale
dzielenie modulo, czyli reszt z dzielenia. Przykadowo, dziaanie
10 % 3
da w wyniku 1. Trójka 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 dwóch formach: przy-
rostkowej bd przedrostkowej. Oznacza to, e jeli mamy zmienn,
która nazywa si np.
x
, forma przedrostkowa bdzie wyglda tak:
++x
, natomiast przyrostkowa tak:
x++
. Oba te wyraenia zwiksz war-
to zmiennej
x
o jeden, jednak wcale nie s sobie równowane. Otó
operacja
x++
zwiksza warto zmiennej po jej wykorzystaniu, natomiast
++x
przed jej wykorzystaniem. Takie rozrónienie moe by bardzo
pomocne podczas pisania skryptów. Przyjrzyjmy si zatem bliej ope-
ratorowi inkrementacji.
W I C Z E N I E
2.7
Operator inkrementacji
Przeanalizuj poniszy kod. Nie wczytuj skryptu do przegldarki, ale
zastanów si, jaki bdzie wywietlony cig liczb. Nastpnie po urucho-
mieniu skryptu sprawd swoje przypuszczenia.
<script type="text/javascript">
var x = 12;
var y;
/*1*/ document.write(++x);
/*2*/ document.write(" ");
/*3*/ document.write(x++);
/*4*/ document.write(" ");
/*5*/ document.write(x);
/*6*/ document.write(" ");
/*7*/ y = x++;
/*8*/ document.write(y);
/*9*/ document.write(" ");
/*10*/ y = ++x;
/*11*/ document.write(y);
</script>
Wynikiem dziaania skryptu (dla uatwienia opisu wiersze zostay
ponumerowane) bdzie cig znaków
13 13 14 14 16
, tak jak jest to
3 2
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
widoczne na rysunku 2.3. Dlaczego? Otó w wierszu 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 zmien-
nej
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 skompliko-
wane, ale po dokadnym przeanalizowaniu i samodzielnym wykonaniu
kilku wasnych wicze operator ten nie powinien sprawia adnych
kopotów.
Rysunek 2.3.
Wynik wiczenia
dotyczcego
operatora
dekrementacji
Operator dekrementacji dziaa analogicznie, z tym e zamiast zwik-
sza wartoci zmiennych, zmniejsza je. Oczywicie zawsze o jeden.
W I C Z E N I E
2.8
Operator dekrementacji
Zmie kod z wiczenia 2.7 tak, aby operator
++
zosta zastpiony ope-
ratorem
--
. Nastpnie przeanalizuj dziaanie skryptu i sprawd, czy
otrzymany wynik jest taki sam jak na ekranie przegldarki.
<script type="text/javascript">
var x = 12;
var y;
/*1*/ document.write(--x);
/*2*/ document.write(" ");
/*3*/ document.write(x--);
/*4*/ document.write(" ");
/*5*/ document.write(x);
/*6*/ document.write(" ");
/*7*/ y = x--;
R o z d z i a 2 . • E l e m e n t y j z y k a
3 3
/*8*/ document.write(y);
/*9*/ document.write(" ");
/*10*/ y = --x;
/*11*/ document.write(y);
</script>
Wynikiem dziaania skryptu bdzie cig znaków
11 11 10 10 8
. W wier-
szu 1. najpierw warto
x
jest zmniejszana 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. naj-
pierw 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 porównywania (relacyjne)
Operatory porównania, czyli relacyjne, su oczywicie do porówny-
wania argumentów. Wynikiem takiego porównania jest warto logiczna
true
(jeli jest ono prawdziwe) lub
false
(jeli jest faszywe). Zatem
wynikiem operacji
argument1 == argument2
bdzie
true
, jeeli argumenty
s sobie równe, oraz
false
, jeeli argumenty s róne. Czyli
4 == 5
ma
warto
false
, a
2 == 2
ma warto
true
. Do dyspozycji mamy operatory
porównania zawarte w tabeli 2.3. Operatory relacyjne bd uywane
w rozdziale 3., w którym omówiono instrukcje warunkowe. Tam te
zostan przedstawione konkretne przykady ich wykorzystania.
Operatory bitowe
Operatory bitowe pozwalaj na wykonywanie operacji na poszczegól-
nych bitach liczb i zostay przedstawione w tabeli 2.4. S to: iloczyn
bitowy (koniunkcja bitowa, operacja AND), suma bitowa (alternatywa
bitowa, operacja OR), negacja bitowa (uzupenienie do jedynki, ope-
racja NOT), suma bitowa modulo 2 (alternatywa bitowa wykluczajca,
rónica symetryczna, operacja XOR) oraz operacje przesuni bitów.
Wszystkie operatory s dwuargumentowe, oprócz operatora bitowej
negacji, który jest jednoargumentowy.
3 4
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
Tabela 2.3. Operatory porównywania
Operator
Opis
Przykad
==
Wynikiem jest
true
, jeli argumenty s sobie równe.
W przeciwnym przypadku wynikiem jest
false
.
x == y
!=
Wynikiem jest
true
, jeli argumenty s róne.
W przeciwnym przypadku wynikiem jest
false
.
x != y
===
Wynikiem jest
true
, jeli oba argumenty s tego
samego typu i s sobie równe. W przeciwnym
przypadku wynikiem jest
false
.
x === y
!==
Wynikiem jest
true
, jeli argumenty s róne bd
s rónych typów. W przeciwnym przypadku
wynikiem jest
false
.
x !== y
>
Wynikiem jest
true
, jeli argument lewostronny
jest wikszy od prawostronnego. W przeciwnym
przypadku wynikiem jest
false
.
x > y
<
Wynikiem jest
true
, jeli argument lewostronny
jest mniejszy od prawostronnego. W przeciwnym
przypadku wynikiem jest
false
.
x < y
>=
Wynikiem jest
true
, jeli argument lewostronny
jest wikszy od prawostronnego lub mu równy.
W przeciwnym przypadku wynikiem jest
false
.
x >= y
<=
Wynikiem jest
true
, jeli argument lewostronny
jest mniejszy od prawostronnego lub mu równy.
W przeciwnym przypadku wynikiem jest
false
.
x <= y
Iloczyn bitowy
Iloczyn bitowy to operacja powodujca, e wczone pozostaj tylko
te bity, które byy wczone w obu argumentach. Wynik operacji
AND
na pojedynczych bitach zobrazowano w tabeli 2.5. Jeli zatem wyko-
namy operacj:
var liczba = 179 & 38;
to zmiennej
liczba
zostanie przypisana warto 34.
R o z d z i a 2 . • E l e m e n t y j z y k a
3 5
Tabela 2.4. Operatory bitowe
Operator
Wykonywane dziaanie
Przykad
&
iloczyn bitowy (AND)
a & b
|
suma bitowa (OR)
a | b
~
negacja bitowa (NOT)
~a
^
bitowa rónica 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
Tabela 2.5. Wyniki operacji AND dla pojedynczych bitów
Argument 1
Argument 2
Wynik
1
1
1
1
0
0
0
1
0
0
0
0
Dlaczego 34? Najatwiej pokaza to, jeli obie wartoci (czyli 179 i 38)
przedstawi si w postaci dwójkowej. 179 w postaci dwójkowej to
10110011
, natomiast 38 to
00100110
. Operacja
AND
bdzie zatem miaa
posta:
10110011
(179)
00100110
(38)
--------
00100010
(34)
Wynikiem jest wic 34.
Suma bitowa
Suma bitowa to operacja powodujca, e pozostaj wczone te bity,
które byy wczone przynajmniej w jednym z argumentów. Wynik
operacji
OR
na pojedynczych bitach mona zobaczy w tabeli 2.6. Jeli
zatem wykonamy operacj:
3 6
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
Tabela 2.6. Wyniki operacji OR dla pojedynczych bitów
Argument 1
Argument 2
Wynik
1
1
1
1
0
1
0
1
1
0
0
0
var liczba = 34 | 65;
to zmiennej
liczba
zostanie przypisana warto 99.
Jeli obie liczby rozpiszemy w postaci dwójkowej, otrzymamy
00100010
(34) i
01000001
(65). Zatem cae dziaanie bdzie miao posta:
00100010
(34)
01000001
(65)
--------
01100011
(99)
Negacja bitowa
Negacja bitowa powoduje zmian stanu bitów. A zatem tam, gdzie
dany bit mia warto
0
, bdzie mia
1
, natomiast tam, gdzie mia war-
to
1
, bdzie mia
0
. Dziaanie operacji
NOT
na pojedynczych bitach
zobrazowano w tabeli 2.7.
Tabela 2.7. Wyniki operacji NOT dla pojedynczych bitów
Argument
Wynik
1
0
0
1
Bitowa rónica symetryczna
Bitowa rónica symetryczna, czyli operacja
XOR
, powoduje, e wczone
zostaj te bity, które miay róne stany w obu argumentach, a pozostae
zostaj wyczone. Wynik operacji
XOR
na pojedynczych bitach mona
zobaczy w tabeli 2.8.
R o z d z i a 2 . • E l e m e n t y j z y k a
3 7
Tabela 2.8. Wyniki operacji XOR dla pojedynczych bitów
Argument 1
Argument 2
Wynik
1
1
0
1
0
1
0
1
1
0
0
0
Wykonanie przykadowej operacji:
var liczba = 34 ^ 118;
spowoduje przypisanie zmiennej
liczba
wartoci 84. Jeli bowiem
zapiszemy obie wartoci w postaci dwójkowej, to 34 przyjmie posta
00100010
, natomiast 118 —
01110110
. Operacja
XOR
bdzie zatem wygl-
daa nastpujco:
00100010
(34)
01110110
(118)
--------
01010100
(84)
Przesunicie bitowe w lewo
Przesunicie bitowe w lewo to operacja polegajca na przesuniciu
wszystkich bitów argumentu znajdujcego si z lewej strony operatora
w lewo o liczb miejsc wskazan przez argument znajdujcy si z jego
prawej strony. Wykonanie przykadowej operacji:
var liczba = 84 << 1;
spowoduje przypisanie zmiennej
liczba
wartoci 168. Dziaanie
84 << 1
oznacza bowiem: „Przesu wszystkie bity wartoci 84 o jedno miejsce
w lewo”. Skoro 84 w postaci dwójkowej ma posta
01010100
, to po prze-
suniciu powstanie
10101000
, czyli 168.
Warto zauway, e przesunicie bitowe w lewo odpowiada mnoe-
niu wartoci przez wielokrotno liczby 2. I tak przesunicie w lewo
o jedno miejsce to pomnoenie przez 2, o dwa miejsca — przez 4, o trzy
miejsca — przez 8 itd.
3 8
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
Przesunicie bitowe w prawo
Analogicznie do powyszego, przesunicie bitowe w prawo polega
na przesuniciu wszystkich bitów argumentu znajdujcego si z lewej
strony operatora w prawo o liczb miejsc wskazan przez argument,
który znajduje si z prawej strony operatora. A zatem wykonanie
operacji:
var liczba = 84 >> 1;
spowoduje przypisanie zmiennej
liczba
wartoci 42. Oznacza to
bowiem przesunicie wszystkich bitów wartoci
01010100
(84 dzie-
sitnie) o jedno miejsce w prawo, czyli powstanie wartoci
00101010
(42 dziesitnie).
Tu równie naley zwróci uwag, e przesunicie bitowe w prawo
odpowiada podzieleniu wartoci przez wielokrotno liczby 2, czyli
przesunicie w prawo o jedno miejsce to podzielenie przez 2, o dwa
miejsca — przez 4, o trzy miejsca — przez 8 itd. (naley jednak pami-
ta, e jeeli dzielona liczba bdzie nieparzysta, w wyniku takiego dzie-
lenia zostanie utracona cz uamkowa).
Operatory logiczne
Operacje logiczne mog by wykonywane na argumentach, które posia-
daj warto logiczn: prawda (
true
) lub fasz (
false
). Operatory logiczne
zostay przedstawione w tabeli 2.9. Operatory
&&
i
||
s dwuargumen-
towe, natomiast operator
!
jest jednoargumentowy.
Tabela 2.9. 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
. Zobrazowano to w tabeli 2.10.
R o z d z i a 2 . • E l e m e n t y j z y k a
3 9
Tabela 2.10. Dziaanie iloczynu logicznego
Argument 1
Argument 2
Wynik
true
true
true
true
false
false
false
true
false
false
false
false
Suma logiczna
Wynikiem sumy logicznej jest warto
false
wtedy i tylko wtedy, kiedy
oba argumenty maj warto
false
. W kadym innym przypadku wyni-
kiem jest
true
. Zobrazowano to w tabeli 2.11.
Tabela 2.11. 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
. Zobra-
zowano to w tabeli 2.12.
Tabela 2.12. Dziaanie negacji logicznej
Argument
Wynik
true
false
false
true
4 0
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
Operatory przypisania
Operatory przypisania s dwuargumentowe i powoduj przypisanie
wartoci argumentu znajdujcego si z prawej strony operatora argu-
mentowi znajdujcemu si z lewej strony. Taka najprostsza operacja
bya ju wykonywana w wiczeniach, odbywa si ona przy wykorzy-
staniu operatora
=
(równa si). Napisanie
liczba = 10
oznacza po pro-
stu, e zmiennej
liczba
chcemy przypisa warto
10
.
W JavaScripcie istnieje jednak równie cay zestaw operatorów cz-
cych operacj przypisania z inn operacj. Przykadowo, istnieje ope-
rator
+=
, który oznacza: przypisz argumentowi umieszczonemu z lewej
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 niektóre konstrukcje programistyczne.
Po prostu przykadowy zapis:
liczba += 5
tumaczy si jako:
liczba = liczba + 5
co oznacza: przypisz zmiennej
liczba
warto wynikajc z dodawa-
nia
liczba + 5
lub — jeszcze prociej — zwiksz warto zmiennej
liczba
o 5.
W JavaScripcie wystpuje caa grupa tego typu operatorów, zostay one
zebrane w tabeli 2.13.
Operator czenia acuchów znakowych
Jak zostao to wspomniane wyej (wiczenie 2.4), do czenia acu-
chów znakowych (napisów) suy operator zapisywany jako
+
(mówimy
o konkatenacji acuchów znakowych). atwo jednak zauway, e ten
sam znak jest jednoczenie symbolem operacji arytmetycznego doda-
wania (tabela 2.2). Sytuacja jest jasna, gdy dodajemy dwa cigi lub
dwie liczby. W pierwszym przypadku wykonana bdzie konkatenacja
(czenie), np.:
var str = "abc" + "def";
R o z d z i a 2 . • E l e m e n t y j z y k a
4 1
Tabela 2.13. Operatory przypisania i ich znaczenie
Argument 1
Operator
Argument 2
Znaczenie
x
=
y
x = y
x
+=
y
x = x + y
x
-=
y
x = x – y
x
*=
y
x = x * y
x
/=
y
x = x / y
x
%=
y
x = x % y
x
<<=
y
x = x << y
x
>>=
y
x = x >> y
x
>>>=
y
x = x >>> y
x
&=
y
x = x & y
x
|=
y
x = x | y
x
^=
y
x = x ^ y
a w drugim — dodawanie arytmetyczne:
var liczba = 123 + 456;
Co si jednak stanie, gdy spróbujemy doda liczb do cigu znaków lub
cig znaków do liczby? Mona to sprawdzi, wykonujc wiczenie 2.9.
W I C Z E N I E
2.9
Dodawanie i konkatenacja
Napisz skrypt, w którym zostan wykonane róne wersje dodawania
liczb i cigów znakowych. Sprawd otrzymane wyniki.
<script type="text/javascript">
var str = "abc" + "def";
var liczba = 123 + 456;
var zmienna1 = "abc" + 123;
var zmienna2 = 123 + "def";
var zmienna3 = "123" + "456";
document.write('Wynik dodawania "abc" + "def": ' + str + "<br />");
document.write('Wynik dodawania 123 + 456: ' + liczba + "<br />");
document.write('Wynik dodawania "abc" + 123: ' + zmienna1 + "<br />");
document.write('Wynik dodawania 123 + "def": ' + zmienna2 + "<br />");
document.write('Wynik dodawania "123" + "456": ' + zmienna3 + "<br />");
</script>
4 2
J a v a S c r i p t • w i c z e n i a p r a k t y c z n e
Po uruchomieniu powyszego skryptu okae si, e dodawanie arytme-
tyczne dotyczyo tylko drugiego przypadku (
var liczba = 123 + 456;
).
We wszystkich pozostaych wykonane zostao czenie acuchów zna-
kowych. Oznacza to, e po wykryciu, i jednym z argumentów opera-
tora
+
jest cig znaków, drugi argument zawsze konwertuje si równie
na cig znaków i wykonywana jest operacja czenia tych cigów.
Pozostae operatory
W JavaScripcie wystpuje jeszcze kilka innych operatorów, które jed-
nak nie bd osobno omawiane. S to m.in. operator indeksowania
tablic, wywoania funkcji, rozdzielania wyrae, tworzenia obiektów itp.
Pojawi si one w dalszej czci ksiki w trakcie omawiania kolejnych
tematów, zostay te uwzgldnione w tabeli prezentujcej priorytety
operatorów (np. w rozdziale 3., w czci dotyczcej instrukcji warun-
kowych, zostanie przedstawiony operator warunkowy).
Priorytety operatorów
Sama znajomo operatorów 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 kolej-
no mona zmieni, stosujc nawiasy okrge, dokadnie w taki sam
sposób, w jaki zmienia si kolejno dziaa w matematyce). W Java-
Scripcie jest podobnie — sia kadego operatora jest cile okrelona.
Przedstawiono to w tabeli 2.14. Im wysza pozycja w tabeli, tym wy-
szy priorytet operatora. Operatory znajdujce si na jednym poziomie
(w jednym wierszu) maj ten sam priorytet
4
.
4
Tabela uwzgldnia równie operatory, które nie byy omawiane w ksice.
R o z d z i a 2 . • E l e m e n t y j z y k a
4 3
Tabela 2.14. Priorytety operatorów
L.p.
Operatory
Symbole
1
indeks tablicy, wywoanie funkcji
[]
,
()
2
inkrementacja i dekrementacja, ustalenie
znaku, negacja bitowa i logiczna, utworzenie
obiektu, ustalenie typu zmiennej, usunicie
skadowej
++
,
--
,
+
,
-
,
~
,
!
,
new
,
typeof
,
delete
3
mnoenie, dzielenie, reszta z dzielenia
*
,
/
,
%
4
dodawanie, odejmowanie
+
,
-
5
przesunicie bitowe w lewo, w prawo,
w prawo z wypenieniem zerami
<<
,
>>
,
>>>
6
mniejsze, wiksze, mniejsze lub równe,
wiksze lub równe, porównanie typów
<
,
>
,
<=
,
>=
,
instanceof
7
równe, róne
==
,
!=
8
iloczyn bitowy
&
9
bitowa rónica symetryczna
^
10
suma bitowa
|
11
iloczyn logiczny
&&
12
suma logiczna
||
13
warunkowy
? :
14
operatory przypisania
=
,
+=
,
-=
,
*=
,
/=
,
%=
,
&=
,
^=
,
|=
,
<<=
,
>>=
,
>>>=
15
rozdzielanie wyrae
,
Wyszukiwarka
Podobne podstrony:
więcej podobnych podstron