JavaScript. Praktyczny kurs

372 Pages·2009·7.11 MB·Polish

by  Marcin Lis

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.
Redakcja: Krzysztof Zemanek
Projekt okładki: Maciej Pasek
Fotografia na okładce została wykorzystana za zgodą iStockPhoto Inc.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. [phone]
e-mail: [email protected]
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?jscpk_ebook
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/jscpk.zip.
ISBN: 978-83-246-5428-4
Copyright © Helion 2009
Printed in Poland.
• Poleć książkę na Facebook.com • Księgarnia internetowa
• Kup w wersji papierowej • Lubię to! » Nasza społeczność
• Oceń książkę
Spis treści
Wstęp ............................................................................................. 7
Rozdział 1. Pierwsze kroki ................................................................................ 9
Lekcja 1. Pierwszy skrypt .................................................................................................. 9
Pierwszy skrypt ........................................................................................................... 9
HTML czy XHTML? ................................................................................................ 11
Umieszczanie skryptów w kodzie HTML i XHTML ............................................... 11
Standardy JavaScript ................................................................................................. 17
JavaScript i Java ........................................................................................................ 17
Rozdział 2. Instrukcje języka ........................................................................... 19
Lekcja 2. Instrukcje, zmienne i typy danych .................................................................. 19
Struktura kodów HTML i XHTML w tym rozdziale ............................................... 19
Czym są instrukcje? .................................................................................................. 21
Co to jest zmienna? ................................................................................................... 22
Typy danych w JavaScripcie ..................................................................................... 23
Znaczniki HTML ....................................................................................................... 27
Komentarze ............................................................................................................... 28
Uwagi dotyczące struktury leksykalnej .................................................................... 30
Instrukcja document.write ......................................................................................... 32
Lekcja 3. Operacje i operatory ......................................................................................... 33
Wykonywanie operacji .............................................................................................. 33
O wyświetlaniu danych raz jeszcze .......................................................................... 35
Operatory arytmetyczne ............................................................................................ 36
Operatory inkrementacji i dekrementacji ................................................................. 38
Operatory porównywania (relacyjne) ....................................................................... 41
Operatory logiczne .................................................................................................... 41
Operatory bitowe ....................................................................................................... 43
Operatory przypisania ............................................................................................... 46
Operator warunkowy ................................................................................................. 48
Operator typeof ......................................................................................................... 48
Pozostałe operatory ................................................................................................... 49
Priorytety operatorów ................................................................................................ 49
Operacje na ciągach znaków ..................................................................................... 50
Ćwiczenia do samodzielnego wykonania ................................................................. 51
4 JavaScript. Praktyczny kurs
Lekcja 4. Instrukcje warunkowe ...................................................................................... 51
Instrukcja if ............................................................................................................... 51
Instrukcja if…else ..................................................................................................... 54
Instrukcja if…else if .................................................................................................. 55
Zagnieżdżanie instrukcji warunkowych ................................................................... 56
Złożone wyrażenia warunkowe ................................................................................ 58
Instrukcja wyboru switch .......................................................................................... 60
Operator warunkowy ................................................................................................. 62
Ćwiczenia do samodzielnego wykonania ................................................................. 63
Lekcja 5. Pętle ................................................................................................................. 64
Pętla for ..................................................................................................................... 64
Pętla while ................................................................................................................. 66
Pętla do…while ......................................................................................................... 67
Pętla for…in .............................................................................................................. 69
Jak nazywać zmienne iteracyjne? ............................................................................. 69
Zagnieżdżanie pętli ................................................................................................... 70
Przerywanie pętli ....................................................................................................... 72
Kontynuowanie pętli ................................................................................................. 74
Warianty pętli for ...................................................................................................... 75
Ćwiczenia do samodzielnego wykonania ................................................................. 77
Lekcja 6. Funkcje i zasięg zmiennych ............................................................................ 77
Jak tworzymy funkcje? .............................................................................................. 78
Argumenty funkcji .................................................................................................... 79
Zwracanie wartości przez funkcję ............................................................................ 81
Zasięg zmiennych ...................................................................................................... 82
Jak przekazywane są argumenty? ............................................................................. 85
Pomijanie argumentów .............................................................................................. 86
Funkcje wewnętrzne .................................................................................................. 89
Ćwiczenia do samodzielnego wykonania ................................................................. 90
Rozdział 3. Obiekty, tablice i wyjątki ............................................................... 91
Lekcja 7. Standardowe obiekty i funkcje ........................................................................ 91
Funkcje globalne ....................................................................................................... 91
Właściwości globalne .............................................................................................. 100
Nieco matematyki (obiekt Math) ............................................................................ 100
Ćwiczenia do samodzielnego wykonania ............................................................... 106
Lekcja 8. Tworzenie obiektów ...................................................................................... 106
Czym jest obiekt? .................................................................................................... 107
Tworzenie prostych obiektów (JSON) ................................................................... 107
Bezpośrednie przypisywanie właściwości .............................................................. 111
Odczyt i zapis danych za pomocą pętli ................................................................... 114
Funkcje jako właściwości obiektów ....................................................................... 116
Ćwiczenia do samodzielnego wykonania ............................................................... 120
Lekcja 9. Funkcje, konstruktory i prototypy ................................................................. 121
Czy funkcje to obiekty? ........................................................................................... 121
Właściwości funkcji ................................................................................................ 125
Obiekt globalny ....................................................................................................... 127
Konstruktory ........................................................................................................... 129
Prototypy ................................................................................................................. 132
Ćwiczenia do samodzielnego wykonania ............................................................... 138
Lekcja 10. Tablice ......................................................................................................... 138
Jak tworzymy tablice? ............................................................................................. 139
Jak zapisywać i odczytywać dane? ......................................................................... 141
Indeksy i właściwości tablic .................................................................................... 144
Spis treści 5
Użycie pętli ............................................................................................................. 145
Operacje na tablicach .............................................................................................. 149
Ćwiczenia do samodzielnego wykonania ............................................................... 156
Lekcja 11. Obsługa błędów i wyjątki ........................................................................... 157
Zgłaszanie wyjątków ............................................................................................... 157
Przechwytywanie wyjątków ................................................................................... 159
Obsługa błędów w praktyce .................................................................................... 161
Blok finally ............................................................................................................. 165
Zagnieżdżanie bloków try…catch .......................................................................... 169
Propagacja wyjątków .............................................................................................. 169
Predefiniowane obiekty wyjątków ......................................................................... 169
Ćwiczenia do samodzielnego wykonania ............................................................... 170
Rozdział 4. Współpraca z przeglądarką .......................................................... 171
Lekcja 12. DOM — współpraca z przeglądarką ........................................................... 171
Obiekty główne przeglądarki ................................................................................. 172
Obiekt window ........................................................................................................ 172
Obiekt document ..................................................................................................... 181
Obiekt history .......................................................................................................... 184
Obiekt location ........................................................................................................ 185
Obiekt navigator ...................................................................................................... 187
Lekcja 13. DOM — dostęp do elementów witryny ...................................................... 190
Struktura dokumentu ............................................................................................... 191
Dostęp do elementów strony WWW ...................................................................... 193
Bezpośrednia manipulacja węzłami dokumentu ..................................................... 196
Tworzenie elementów strony przez skrypt ............................................................. 198
Usuwanie elementów strony ................................................................................... 199
Ćwiczenia do samodzielnego wykonania ............................................................... 204
Lekcja 14. Zdarzenia ..................................................................................................... 204
Obsługa zdarzeń ...................................................................................................... 204
Ładowanie strony .................................................................................................... 207
Reagowanie na kliknięcia ........................................................................................ 211
Reagowanie na ruchy myszy .................................................................................. 213
Dynamiczne przypisywanie procedur obsługi ........................................................ 215
Zdarzenia i dynamiczne elementy dokumentu ....................................................... 218
Ćwiczenia do samodzielnego wykonania ............................................................... 219
Lekcja 15. Elementy witryny ......................................................................................... 220
Elementy typu <input> ............................................................................................ 220
Przyciski .................................................................................................................. 222
Pola wyboru typu checkbox .................................................................................... 224
Pola wyboru typu radio ........................................................................................... 227
Zwykłe pola tekstowe .............................................................................................. 229
Rozszerzone pola tekstowe ...................................................................................... 232
Pola tekstowe typu password ................................................................................... 233
Listy wyboru ........................................................................................................... 235
Ćwiczenia do samodzielnego wykonania ............................................................... 239
Lekcja 16. Style CSS ..................................................................................................... 240
Dostęp do atrybutów ............................................................................................... 240
Obiekt style ............................................................................................................. 244
Właściwość className ........................................................................................... 249
Ćwiczenia do samodzielnego wykonania ............................................................... 251
6 JavaScript. Praktyczny kurs
Rozdział 5. Przetwarzanie danych .................................................................. 253
Lekcja 17. Operacje na ciągach znaków ....................................................................... 253
Jak sprawdzić długość tekstu? ................................................................................ 253
Metody formatujące ciągi znaków ......................................................................... 256
Przetwarzanie ciągów .............................................................................................. 259
Użycie metod operujących na ciągach ................................................................... 265
Ćwiczenia do samodzielnego wykonania ............................................................... 268
Lekcja 18. Wprowadzanie danych przez użytkownika ................................................. 269
Formularze .............................................................................................................. 269
Sprawdzanie poprawności danych .......................................................................... 273
Wprowadzanie danych ............................................................................................ 278
Przetwarzanie stylów ............................................................................................... 281
Ćwiczenia do samodzielnego wykonania ............................................................... 285
Lekcja 19. Wyrażenia regularne ................................................................................... 286
Obiekt RegExp ........................................................................................................ 286
Jak korzystać z wyrażeń? ........................................................................................ 286
Budowanie wyrażeń ................................................................................................ 290
Metody używające wyrażeń regularnych ............................................................... 299
Wyrażenia regularne i typ łańcuchowy .................................................................. 305
Wrażenia regularne w praktyce .............................................................................. 307
Ćwiczenia do samodzielnego wykonania ............................................................... 310
Lekcja 20. Cookies ........................................................................................................ 311
Jak działają cookies? ............................................................................................... 312
Z czego składa się cookie? ...................................................................................... 312
Podglądanie cookies w przeglądarkach .................................................................. 315
Cookies i JavaScript ................................................................................................ 315
Zliczanie liczby odwiedzin ...................................................................................... 323
Ćwiczenia do samodzielnego wykonania ............................................................... 325
Rozdział 6. Data i czas ................................................................................. 327
Lekcja 21. Obsługa daty i czasu ................................................................................... 327
Obiekt Date ............................................................................................................. 327
Pobieranie daty i czasu ............................................................................................ 331
Korzystanie z informacji o dacie i czasie ............................................................... 334
Formatowanie daty (metoda parse) ........................................................................ 337
Data i czas w praktyce ............................................................................................. 338
Ćwiczenia do samodzielnego wykonania ............................................................... 341
Lekcja 22. Korzystanie z timerów ................................................................................ 342
Timery w JavaScripcie ............................................................................................ 342
Wywołania cykliczne (interwały) ........................................................................... 346
Symulacja działania metody setInterval ................................................................. 349
Zegary ..................................................................................................................... 350
Animacje ................................................................................................................. 352
Ćwiczenia do samodzielnego wykonania ............................................................... 357
Skorowidz ................................................................................... 359
Wstęp
Czym jest JavaScript?
JavaScript to skryptowy język programowania najczęściej używany do tworzenia in-
teraktywnych stron WWW. To dzięki niemu można wyposażyć witrynę w np. dyna-
micznie rozwijane menu czy animowane elementy, a strony zaczynają reagować na
działania użytkownika. JavaScript jest też podstawą tak popularnej ostatnimi czasy
techniki AJAX, przy której użyciu strona WWW zaczyna się zachowywać jak zwykła
aplikacja uruchamiana z poziomu systemu operacyjnego. Praktycznie żadna współcze-
sna strona WWW nie obejdzie się bez JavaScriptu. Jeśli więc chcesz tworzyć WWW,
musisz — oprócz HTML czy CSS — poznać też JavaScript. Dlatego właśnie powstała
ta książka.
Historia JavaScriptu sięga pierwszej połowy lat 90. ubiegłego wieku. Język ten po-
wstał jako projekt Mocha w firmie Netscape, a jego głównym projektantem był Brendan
Eich. Po ukończeniu prac pierwsza dostępna wersja otrzymała nazwę LiveScript, któ-
ra następnie w roku 1995 — głównie ze względów marketingowych, a za porozumie-
niem z firmą Sun Microsystems — została zmieniona na JavaScript. To do dnia dzisiej-
szego powoduje nieporozumienia i mylenie Javy z JavaScriptem. Kwestia ta zostanie
wyjaśniona w dalszej części książki.
Dla kogo jest ta książka?
Oczywiście, książka przeznaczona jest dla osób, które chcą poznać JavaScript oraz
nauczyć się tworzyć korzystające z tej technologii interaktywne i atrakcyjne strony
internetowe. Potrzebna jest znajomość co najmniej solidnych podstaw języków HTML
bądź XHTML. Przydatna będzie również wiedza na temat stosowania stylów CSS.
Czytelnik powinien umieć samodzielnie tworzyć przynajmniej proste strony WWW
8 JavaScript. Praktyczny kurs
z użyciem jednego z tych języków. Nie jest natomiast konieczna znajomość zasad
programowania (ani innych języków programowania) — zostaną one przedstawione
krok po kroku w trakcie nauki.
Co będzie potrzebne do nauki?
Do nauki nie są potrzebne żadne specjalne narzędzia. Należy, oczywiście, mieć zain-
stalowaną przeglądarkę WWW — dowolną, współczesną, obsługującą JavaScript, np.
Firefox, Internet Explorer, Konqueror, Netscape, Opera itp. Nie muszą to być najnow-
sze wersje, mogą być nawet produkty sprzed kilku lat, choć im nowsze, tym lepiej.
Do pisania samego kodu skryptów potrzebny też będzie dowolny, najprostszy edytor
tekstowy. Najlepiej, aby miał możliwość zapisywania tekstu w kodowaniu UTF-8,
a także podświetlania składni HTML i JavaScript. Można tu polecić takie produkty
jak Notepad++ czy Notepad2. Można też skorzystać z dowolnego oprogramowania do
tworzenia witryn, np. 1st page 2000, HotDog, kED, Pajączek itp. Będzie to nasz
warsztat pracy.
Pliki i kody źródłowe
Wszystkie listingi oraz kody źródłowe przykładów prezentowanych w książce, a tak-
że rozwiązania ćwiczeń można pobrać ze strony internetowej
http://helion.pl/ksiazki/jscpk.htm lub bezpośrednio z serwera FTP:
ftp://ftp.helion.pl/przyklady/jscpk.zip.
Pliki tekstowe z listingami zawierają fragmenty kodu w takiej postaci, w jakiej zostały
zaprezentowane na listingach w książce (czasem są to tylko fragmenty skryptów).
Oprócz tego, w osobnych katalogach znajdują się pełne wersje kodów (X)HTML
i JavaScript, składające się na gotowe do uruchomienia przykłady. Każdy przykład
jest więc prezentowany zarówno w postaci fragmentu omawianego w książce (o ile
omawiany jest tylko fragment, a nie pełny kod), jak i w pełnej wersji gotowej do wczyta-
nia do przeglądarki.
Rozdział 1.
Pierwsze kroki
Lekcja 1. Pierwszy skrypt
Pierwsza lekcja rozpoczyna kurs. Zawarty w niej materiał to wprowadzenie w świat
JavaScriptu; napiszemy pierwszy skrypt, pokazujący, jak zmusić przeglądarkę do wy-
konania pewnej czynności. Przyjrzymy się również różnicom między kodami HTML
i XHTML. Najwięcej miejsca poświęcimy jednak sposobom umieszczania skryptów
JavaScript w kodzie HTML i XHTML. Poznamy znaczniki <script> i <noscript> oraz
różnice między skryptami osadzonymi a zewnętrznymi. Nieco miejsca poświęcimy
również standardom JavaScriptu oraz wyjaśnimy różnice między JavaScriptem a Javą.
Pierwszy skrypt
Na początku nauki najlepiej zobaczyć prosty skrypt, którego efektem działania jest
wyświetlenie na ekranie pewnego napisu. Ponieważ nie chcemy komplikować tego
zagadnienia, a kod ma działać zarówno w HTML, jak i XHTML, nie będziemy wy-
świetlać danych bezpośrednio na witrynie, ale spowodujemy, że tekst pojawi się
w oknie dialogowym. A zatem musi powstać taki kod witryny, że po jej załadowaniu
do przeglądarki na ekranie pojawi się nowe okno dialogowe zawierające zdefiniowa-
ny w kodzie strony tekst. Tak działająca witryna zgodna z HTML 4.01 będzie miała
postać przedstawioną na listingu 1.1.
Listing 1.1. Skrypt wyświetlający okno dialogowe w HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Moja strona WWW</title>
<script type="text/javascript">
alert("Mój pierwszy skrypt!");
</script>
10 Rozdział 1. ♦ Pierwsze kroki
</head>
<body>
<p>Ta strona zawiera mój pierwszy skrypt.</p>
</body>
</html>
To typowa strona HTML. Zawiera deklarację typu dokumentu (DOCTYPE), sekcję head,
czyli nagłówek, oraz sekcję body, czyli właściwą treść dokumentu. W nagłówku znaj-
duje się znacznik <title> określający tytuł i znacznik <meta> definiujący sposób kodo-
wania znaków (UTF-8). W treści dokumentu widzimy natomiast znacznik <p> okre-
ślający akapit tekstowy, który sprawia, że strona nie jest pusta, ale pojawia się na niej
napis. To wszystkie elementy HTML. Jednak w sekcji head znajdujemy znacznik
<script>, który definiuje skrypt JavaScript. Skrypt wykonuje tylko jedno zadanie
— wyświetla na ekranie okno dialogowe zawierające tekst Mój pierwszy skrypt!.
Jeśli zatem wczytamy taką stronę do przeglądarki, zobaczymy widok przedstawiony
na rysunku 1.1.
Rysunek 1.1.
Na ekranie pojawiło
się okno dialogowe
zawierające
zdefiniowany
w skrypcie tekst
Zwróćmy uwagę, że najpierw pojawiło się okno dialogowe (przy pustej stronie),
a dopiero po kliknięciu znajdującego się w nim przycisku OK ukazał się akapit teksto-
wy zdefiniowany za pomocą znacznika <p>. Tą kwestią zajmiemy się jednak w dalszej
części lekcji, najpierw zobaczmy, jak wyglądałaby taka strona w XHTML. Widać to
na listingu 1.2.
Listing 1.2. Skrypt wyświetlający okno dialogowe w XHTML 1.0
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/tr/xhtml11/Dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">