JavaScript cwiczenia praktyczne Wydanie III 2

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

Printed in Poland.

Księgarnia internetowa

•

Lubię to! » Nasza społeczność

Spis treci

Wstp

Rozdzia 1. Podstawy

Skrypty w kodzie strony

Wywietlanie informacji

Uywanie znaczników formatujcych dane

Gdy przegldarka nie obsuguje skryptów

JavaScript to NIE skrypty Javy!

Rozdzia 2. Elementy jzyka

Komentarze

Typy danych

Zmienne

Operatory

Rozdzia 3. Instrukcje sterujce

Instrukcje warunkowe

Operator warunkowy

Instrukcja wyboru switch

Ptle

Przerywanie i kontynuowanie ptli

Rozdzia 4. Funkcje

Definiowanie funkcji

Argumenty

Zwracanie wartoci

Poleć książkę

Kup książkę

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

Funkcje zagniedone (wewntrzne)

Alternatywne definiowanie funkcji

Rozdzia 5. Tablice

Tworzenie tablic

Odczyt i zapis tablic

Konstruktor tablicy

Wykonywanie operacji na tablicach

Rozdzia 6. Programowanie obiektowe

Obiekty w JavaScripcie

Tworzenie obiektów za pomoc literaów

Konstruktor typu obiektowego

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

Poleć książkę

Kup książkę

S p i s t r e c i

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

Poleć książkę

Kup książkę

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

Poleć książkę

Kup książkę

Elementy jzyka

Komentarze

W treci skryptu mona umieszcza jedynie tak tre, która bdzie
interpretowana przez przegldark

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.

Przez zawarty w przegldarce interpreter JavaScriptu. Mówi si równie
o „silniku” JavaScriptu (ang. JavaScript engine).

Poleć książkę

Kup książkę

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>

Poleć książkę

Kup książkę

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:

typ liczbowy,

typ acuchowy,

typ logiczny,

typ obiektowy,

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.

(umieszczony w kodzie skryptu tekst

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:

Jeeli cig cyfr nie jest poprzedzony adnym znakiem lub jest
poprzedzony znakiem +, reprezentuje warto dodatni, jeeli
natomiast jest poprzedzony znakiem –, reprezentuje warto
ujemn.

Jeeli litera rozpoczyna si od cyfry 0, jest traktowany jako
warto ósemkowa.

Jeeli litera rozpoczyna si od cigu znaków

, 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.

Literay mog by zapisywane w notacji wykadniczej, w postaci

X.YeZ

, gdzie

to cz cakowita,

— cz dziesitna, natomiast

to wykadnik potgi liczby 10. Zapis taki oznacza to samo,

X.Y * 10

Poleć książkę

Kup książkę

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

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.

Poleć książkę

Kup książkę

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

backspace (ang. backspace)

nowa linia (ang. new line)

powrót karetki (ang. carriage return)

nowa strona (ang. form feed)

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>

Poleć książkę

Kup książkę

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

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

Poleć książkę

Kup książkę

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

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

. Wolno

stosowa zarówno wielkie, jak i mae litery, s te one rozróniane,
co oznacza, e przykadowo:

liczba

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.

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

zmienna2

. Pierwszej z nich przypi-

sano cig znaków

Mój komputer

, a drugiej — warto liczbow, dodatni

liczb cakowit

. 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

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.

Dopuszczalny jest równie znak $, jednak lepiej go unika przy nazywaniu
wasnych zmiennych.

Poleć książkę

Kup książkę

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.

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

Poleć książkę

Kup książkę

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:

arytmetyczne,

porównywania (relacyjne),

bitowe,

logiczne,

przypisania,

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

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

Poleć książkę

Kup książkę

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.

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

, a ostatniej warto wyni-

kajca z dziaania

pierwszaLiczba – drugaLiczba

, czyli

. 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.

Poleć książkę

Kup książkę

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.

, forma przedrostkowa bdzie wyglda tak:

++x

, natomiast przyrostkowa tak:

x++

. Oba te wyraenia zwiksz war-

to zmiennej

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.

Wynikiem dziaania skryptu (dla uatwienia opisu wiersze zostay
ponumerowane) bdzie cig znaków

13 13 14 14 16

, tak jak jest to

Poleć książkę

Kup książkę

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

o 1 (czyli

x = 13

), a nastpnie ten

wynik jest wywietlany. W linii 3. najpierw jest wywietlana aktualna
warto zmiennej

(czyli

), a nastpnie jest ona zwikszana o 1 (czyli

x = 14

). W wierszu 5. jest wywietlana aktualna warto zmiennej

czyli

. W wierszu 7. zmiennej

jest przypisywana warto zmien-

nej

, a nastpnie zmienna

jest zwikszana o 1 (czyli

y = 14

x = 15

W wierszu 10. najpierw jest zwikszana warto zmiennej

o 1 (czyli

x = 16

), a nastpnie warto ta jest przypisywana zmiennej

(czyli

y = 16

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.

Poleć książkę

Kup książkę

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

jest zmniejszana o 1 (czyli

x = 11

), a nastpnie

ten wynik jest wywietlany. W wierszu 3. najpierw jest wywietlana
aktualna warto

(czyli

), a nastpnie jest ona zmniejszana o 1 (czyli

x = 10

). W wierszu 5. jest wywietlana aktualna warto

, czyli

W wierszu 7. zmiennej

jest przypisywana warto

, a nastpnie

zmienna

jest zmniejszana o 1 (czyli

y = 10

x = 9

). W wierszu 10. naj-

pierw jest zmniejszana warto

o 1 (czyli

x = 8

), a nastpnie warto

ta jest przypisywana zmiennej

(czyli

y = 8

x = 8

). Na zakoczenie

w linii 11. warto

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

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.

Poleć książkę

Kup książkę

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.

Poleć książkę

Kup książkę

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)

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

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

na pojedynczych bitach mona zobaczy w tabeli 2.6. Jeli

zatem wykonamy operacj:

Poleć książkę

Kup książkę

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

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

, bdzie mia

, natomiast tam, gdzie mia war-

, bdzie mia

. Dziaanie operacji

NOT

na pojedynczych bitach

zobrazowano w tabeli 2.7.

Tabela 2.7. Wyniki operacji NOT dla pojedynczych bitów

Argument

Wynik

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.

Poleć książkę

Kup książkę

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

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.

Poleć książkę

Kup książkę

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

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)

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.

Poleć książkę

Kup książkę

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

false

true

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

false

true

false

true

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

true

Poleć książkę

Kup książkę

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

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";

Poleć książkę

Kup książkę

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 = 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

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.

Poleć książkę

Kup książkę

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

Tabela uwzgldnia równie operatory, które nie byy omawiane w ksice.

Poleć książkę

Kup książkę