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"></article></body></html>

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. 032 231 22 19, 032 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?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 ............................................................................................ 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 wykonania 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 10 Rozdział 1. ♦ Pierwsze kroki

Ta strona zawiera mój pierwszy skrypt.

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 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 tekstowy 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"></article></body></html>

JavaScript. Praktyczny kurs

Similar JavaScript. Praktyczny kurs