Issuu on Google+


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.

• Kup książkę • Poleć książkę • Oceń książkę

• 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

Kup książkę

7 11 11 14 17 19 20

21 21 23 26 29

45 45 50 51 54 60

65 65 66 69

Poleć książkę


4

JavaScript • wiczenia praktyczne 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 Iteracja po waciwociach Funkcje to te obiekty Prototypy, czyli dziedziczenie w JavaScripcie

Rozdzia 7. Wyjtki Zgaszanie wyjtków Przechwytywanie wyjtków Blok finally

Rozdzia 8. Obiekty i funkcje globalne Funkcje globalne Przetwarzanie wyrae Przetwarzanie wartoci liczbowych Matematyka Data i czas Cigi znaków

Rozdzia 9. Wspópraca z przegldark Obiekty udostpniane przez przegldark Obiekt window Obiekt document Obiekt history Obiekt location Obiekt navigator

Kup książkę

70 74 76

79 79 81 84 85

95 95 96 99 101 102 105 107

111 111 114 118

121 121 123 125 129 134 143

147 147 148 156 158 159 163

Poleć książkę


5

Spis treci

Rozdzia 10. Elementy witryny (model DOM) Jak przegldarka „widzi” dokument? Dostp do elementów strony Odczyt i zmiana atrybutów oraz stylów CSS Odwoania do istniejcych wzów Dynamiczne tworzenie fragmentów strony

Rozdzia 11. Zdarzenia Zdarzenia na stronie WWW Zdarzenia jako waciwoci elementów witryny Rejestrowanie procedur obsugi Usuwanie procedur obsugi Obsuga klawiatury i myszy

Rozdzia 12. Obsuga interfejsu uytkownika Elementy witryny Pola wyboru typu checkbox Pola wyboru typu radio Pola tekstowe (text) Rozszerzone pola tekstowe (textarea) Listy

Kup książkę

167 167 170 174 177 180

183 183 186 190 193 195

199 199 201 202 205 206 209

Poleć książkę


6

JavaScript • wiczenia praktyczne

Kup książkę

Poleć książkę


2 Elementy jzyka Komentarze W treci skryptu mona umieszcza jedynie tak tre, która bdzie interpretowana przez przegldark1 jako instrukcje JavaScriptu. W przypadku bardziej skomplikowanego kodu warto jednak doda komentarze objaniajce dziaanie poszczególnych jego fragmentów. Do dyspozycji 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).

Kup książkę

Poleć książkę


22

JavaScript • wiczenia praktyczne

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

Kup książkę

Poleć książkę


R o z d z i a  2 . • E l e m e n t y j z y k a

23

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 wystpujcego w klasycznych jzykach programowania rozrónienia na typy cakowitoliczbowe i rzeczywiste (zmiennopozycyjne). Liczby zapisywane s za pomoc literaów (staych napisowych, z ang. string constant, 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 napisow — interpretowany jako liczba 24). Obowizuj przy tym nastpujce 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 * 10Z.

Kup książkę

Poleć książkę


24

JavaScript • wiczenia praktyczne

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 a cuchowy 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 wykorzystanie znaków apostrofu. Przykadowy cig ma posta: "abcdefg"

Napisy mog te zawiera sekwencje znaków specjalnych przedstawione 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.

Kup książkę

Poleć książkę


25

R o z d z i a  2 . • E l e m e n t y j z y k a 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>

Kup książkę

Poleć książkę


26

JavaScript • wiczenia praktyczne

Typ logiczny Typ logiczny (boolean) pozwala na okrelenie dwóch wartoci logicznych: prawda i fasz. Warto prawda jest w JavaScripcie reprezentowana przez sowo true, natomiast warto fasz przez false. Wartoci tego typu s uywane przy konstruowaniu wyrae logicznych, porównywaniu danych, wskazywaniu, czy dana operacja zakoczya si sukcesem 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 programistyczny (zmienna, obiekt, waciwo itd.) ma warto null, oznacza to, e jest pusty. Z kolei typ undefined okrela warto niezdefiniowan. W tym kontekcie 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

Kup książkę

Poleć książkę


R o z d z i a  2 . • E l e m e n t y j z y k a

27

przechowuje. W celu utworzenia zmiennej naley j zadeklarowa, tzn. poda nazw oraz pocztkow warto. Mona to zrobi nastpujco2: 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 poprzednim 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 podkrelenia3. 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 przypisano 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.

Kup książkę

Poleć książkę


28

JavaScript • wiczenia praktyczne

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 wyra nie, e zmiana typu danych moe nastpowa w trakcie dziaania skryptu.

Rysunek 2.1. Efekt dziaania kodu z wiczenia 2.5

Kup książkę

Poleć książkę


29

R o z d z i a  2 . • E l e m e n t y j z y k a

Operatory W JavaScripcie, podobnie jak i w innych jzykach programowania, wystpuje wiele operatorów, które pozwalaj na wykonywanie rozmaitych 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ównywania, 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ównie operatory inkrementacji (zwikszania) i dekrementacji (zmniejszania). 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

Kup książkę

Poleć książkę


30

JavaScript • wiczenia praktyczne

 W I C Z E N I E

2.6

Wykonywanie operacji arytmetycznych

Umie w skrypcie kilka zmiennych, uyj ich do wykonania standardowych operacji arytmetycznych (jedn operacj arytmetyczn wykonaj 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 adnym 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 wynikajca 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 wyra nie, e operacje arytmetyczne mog by wykonywane zarówno na dwóch zmiennych, na zmiennej i liczbie, jak i dwóch liczbach.

Kup książkę

Poleć książkę


R o z d z i a  2 . • E l e m e n t y j z y k a

31

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: przyrostkowej 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 warto 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 operatorowi 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 uruchomieniu 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

Kup książkę

Poleć książkę


32

JavaScript • wiczenia praktyczne

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 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 kopotów. Rysunek 2.3. Wynik wiczenia dotyczcego operatora dekrementacji

Operator dekrementacji dziaa analogicznie, z tym e zamiast zwiksza 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 operatorem --. 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--;

Kup książkę

Poleć książkę


R o z d z i a  2 . • E l e m e n t y j z y k a

33

/*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 wierszu 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. 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 porównywania (relacyjne) Operatory porównania, czyli relacyjne, su oczywicie do porównywania 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ólnych 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, operacja 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.

Kup książkę

Poleć książkę


34

JavaScript • wiczenia praktyczne

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 wykonamy operacj: var liczba = 179 & 38;

to zmiennej liczba zostanie przypisana warto 34.

Kup książkę

Poleć książkę


35

R o z d z i a  2 . • E l e m e n t y j z y k a 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:

Kup książkę

Poleć książkę


36

JavaScript • wiczenia praktyczne

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

Kup książkę

Poleć książkę


R o z d z i a  2 . • E l e m e n t y j z y k a

37

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 wygldaa 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 przesuniciu powstanie 10101000, czyli 168. Warto zauway, e przesunicie bitowe w lewo odpowiada mnoeniu 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.

Kup książkę

Poleć książkę


38

JavaScript • wiczenia praktyczne

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 dziesitnie) 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 pamita, e jeeli dzielona liczba bdzie nieparzysta, w wyniku takiego dzielenia zostanie utracona cz uamkowa).

Operatory logiczne Operacje logiczne mog by wykonywane na argumentach, które posiadaj warto logiczn: prawda (true) lub fasz (false). Operatory logiczne zostay przedstawione w tabeli 2.9. Operatory && i || s dwuargumentowe, 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.

Kup książkę

Poleć książkę


R o z d z i a  2 . • E l e m e n t y j z y k a

39

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 wynikiem 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. Zobrazowano to w tabeli 2.12. Tabela 2.12. Dziaanie negacji logicznej Argument

Wynik

true

false

false

true

Kup książkę

Poleć książkę


40

JavaScript • wiczenia praktyczne

Operatory przypisania Operatory przypisania s dwuargumentowe i powoduj przypisanie wartoci argumentu znajdujcego si z prawej strony operatora argumentowi znajdujcemu si z lewej strony. Taka najprostsza operacja bya ju wykonywana w wiczeniach, odbywa si ona przy wykorzystaniu operatora = (równa si). Napisanie liczba = 10 oznacza po prostu, e zmiennej liczba chcemy przypisa warto 10. W JavaScripcie istnieje jednak równie cay zestaw operatorów czcych operacj przypisania z inn operacj. Przykadowo, istnieje operator +=, 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 dodawania 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 a cuchów znakowych Jak zostao to wspomniane wyej (wiczenie 2.4), do czenia acuchó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 dodawania (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";

Kup książkę

Poleć książkę


R o z d z i a  2 . • E l e m e n t y j z y k a

41

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 document.write('Wynik dodawania document.write('Wynik dodawania document.write('Wynik dodawania document.write('Wynik dodawania </script>

Kup książkę

"abc" 123 + "abc" 123 + "123"

+ "def": 456: ' + + 123: ' "def": ' + "456":

' + str + "<br />"); liczba + "<br />"); + zmienna1 + "<br />"); + zmienna2 + "<br />"); ' + zmienna3 + "<br />");

Poleć książkę


42

JavaScript • wiczenia praktyczne

Po uruchomieniu powyszego skryptu okae si, e dodawanie arytmetyczne dotyczyo tylko drugiego przypadku (var liczba = 123 + 456;). We wszystkich pozostaych wykonane zostao czenie acuchów znakowych. Oznacza to, e po wykryciu, i jednym z argumentów operatora + 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 jednak 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 warunkowych, 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 kolejno mona zmieni, stosujc nawiasy okrge, dokadnie w taki sam sposób, w jaki zmienia si kolejno dziaa w matematyce). W JavaScripcie jest podobnie — sia kadego operatora jest cile okrelona. Przedstawiono to w tabeli 2.14. Im wysza pozycja w tabeli, tym wyszy priorytet operatora. Operatory znajdujce si na jednym poziomie (w jednym wierszu) maj ten sam priorytet4.

4

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

Kup książkę

Poleć książkę


43

R o z d z i a  2 . • E l e m e n t y j z y k a 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

,

Kup książkę

Poleć książkę


44

Kup książkę

JavaScript • wiczenia praktyczne

Poleć książkę



JavaScript. wiczenia praktyczne. Wydanie III