Tytuł JavaScript dla dzieci Podtytuł Programowanie na wesoło Autor Nick Morgan Język polski Wydawnictwo Wydawnictwo Naukowe PWN ISBN 978-83-01-18569-5 Rok wydania 2016 Warszawa Wydanie 1 ilość stron 320 Format epub, mobi Spis treści PODZIĘKOWANIA XXI WPROWADZENIE XXIII Kto powinien przeczytać tę książkę? xxiv Jak należy czytać tę książkę? xxiv Co odszukasz w tej książce? xxv Baw się dobrze! xxvi Wprowadzenie do wydania polskiego xxvii CZĘŚĆ I: PODSTAWY 1 1 CO TO JEST JAVASCRIPT? 3 Poznaj JavaScript 4 Po co się uczyć języka JavaScript? 6 Pierwsze kroki w JavaScript 7 Struktura programu JavaScript 8 Składnia 10 Komentarze 10 Co już wiesz 11 2 TYPY informacji I ZMIENNE 13 Liczby i operatory 15 Zmienne 17 Nazwy zmiennych 19 Tworzenie nowych zmiennych przy pomocy działań matematycznych 19 Inkrementacja i dekrementacja 21 += (plus-równa się) i – = (minus-równa się) 22 Łańcuchy znaków 23 Łączenie łańcuchów znaków 25 Ustalanie długości łańcucha znaków 25 Pobieranie pojedynczego znaku z łańcucha 26 Przycinanie łańcucha znaków 27 Zmiana wszystkich znaków w łańcuchu na obszerne albo niepokaźne litery 28 Logiczny typ informacji 30 Operatory logiczne 30 Porównywanie liczb na podstawie wartości logicznych 33 Wartości undefined i null 37 Co już wiesz 38 3 TABLICE 39 Po co zajmować się tablicami? 40 Tworzenie tablicy 41 Wybieranie składników z tablicy 42 Ustawianie czyli zmienianie komponentów tablicy 43 miksowanie typów informacji w tablicy 45 Praca z tablicami 46 Znajdowanie długości tablicy 46 Dodawanie składników do tablicy 47 eliminowanie składników z tablicy 48 Dodawanie tablic 50 Znajdowanie indeksu elementu w tablicy 52 Przekształcanie tablicy w łańcuch znaków 53 Pożytek z tablic 54 Znajdowanie drogi do domu 54 Program do podejmowania decyzji 56 Tworzenie generatora losowych zniewag 59 Co już wiesz 60 Dla ambitnych 61 #1: nowe zniewagi 61 #2: Bardziej wyszukane zniewagi 61 #3: Operator + czy metoda join? 61 #4: Liczby i metoda join 61 4 OBIEKTY 63 Tworzenie obiektów 64 Klucze bez cudzysłowów 65 Wybieranie wartości w obiekcie 66 Dodawanie wartości do obiektów 67 Dodawanie kluczy za pomocą notacji kropkowej 68 Łączenie tablic z obiektami 69 Tablica pełna przyjaciół 69 Eksploracja obiektów w konsoli 71 Pożytek z obiektów 72 Śledzenie należnych pieniędzy 72 Zapisywanie informacji o filmach 74 Co już wiesz 75 Dla ambitnych 76 #1: Tablica wyników 76 #2: Eksplorowanie obiektów i tablic 76 5 PODSTAWY HTML 77 Edytory tekstu 78 Nasz pierwszy dokument HTML 79 widoczniki i komponenty 80 Nagłówki 80 składnik p 81 Odstępy w HTML i komponenty blokowe 82 elementy wierszowe 83 Kompletny dokument HTML 84 Hierarchia HTML 85 Dodawanie odnośników do kodu HTML 86 atrybuty odnośnika 87 Atrybut title 88 Co już wiesz 89 6 INSTRUKCJE WARUNKOWE I PĘTLE 91 Osadzanie JavaScript w HTML 92 Instrukcje warunkowe 93 Instrukcje if 93 Instrukcje if…else 95 Szeregowanie instrukcji if…else 96 Pętle 98 Pętle while 99 Pętle for 101 Co już wiesz 105 Dla ambitnych 106 #1: Niesamowite zwierzęta 106 #2: Generator losowych napisów 106 #3: h4ck3rsk4 m0w4 107 7 GRA SZUBIENICA 109 Komunikacja z graczem 110 Tworzenie okienka typu prompt 110 Funkcja confirm – zadawanie pytań rozstrzygających 112 Funkcja alert – wyświetlanie informacji 113 Kiedy używać funkcji alert zamiast metody consolelog? 114 Projektujemy grę 114 Projektowanie gry z wykorzystaniem pseudokodu 115 Śledzenie stanu słowa 115 Projektowanie głównej pętli gry 116 Kod gry 117 Wybieranie losowego słowa 117 Tworzenie tablicy z odpowiedziami 118 Kod głównej pętli gry 118 Kończenie gry 122 Kod gry 122 Co już wiesz 124 Dla ambitnych 125 #1: Więcej słów 125 #2: duże litery 125 #3: Ograniczanie liczby strzałów 125 #4: eliminowanie usterki 125 8 FUNKCJE 127 Podstawowa anatomia funkcji 128 Tworzenie prostej funkcji 128 wywoływanie funkcji 129 Przesyłanie argumentów do funkcji 130 Wyświetlanie kocich pyszczków! 131 Przesyłanie do funkcji wielu argumentów 132 Zwracanie wartości z funkcji 133 używanie wywołania funkcji jako wartości 135 ułatwianie kodu za pomocą funkcji 136 Funkcja do wyboru losowego słowa 136 Generator losowych zniewag 136 Przekształcanie generatora losowych zniewag w funkcję 138 Wcześniejsze opuszczanie funkcji przy pomocy słowa kluczowego return 139 Wielokrotne użytkowanie return zamiast instrukcji if…else 140 Co już wiesz 142 Dla ambitnych 142 #1: wykonywanie obliczeń przy pomocy funkcji 142 #2: Czy te tablice są takie same? 142 #3: Szubienica z funkcjami 143 CZĘŚĆ II: JAVASCRIPT KROK DALEJ 145 9 DOM I JQUERY 147 wybór części DOM 148 Identyfikowanie składników przy pomocy atrybutu id 149 dobór elementu przy pomocy metody getElementById 149 Zamiana tekstu w nagłówku za pomocą DOM 150 Praca z drzewem DOM przy pomocy jQuery 152 Ładowanie jQuery na stronie HTML 152 Zamiana tekstu w nagłówku za pomocą jQuery 152 Tworzenie nowych komponentów przy pomocy jQuery 154 Animowanie komponentów przy pomocy jQuery 155 Szeregowanie animacji jQuery 156 Co już wiesz 158 Dla ambitnych 158 #1: Wyświetlanie imion znajomych za pomocą jQuery (w taki sposób, by ich do siebie zrazić!) 158 #2: Tworzenie migającego nagłówka 158 #3: Opóźnianie animacji 159 #4: używanie metody fadeTo 159 10 PROGRAMOWANIE INTERAKTYWNE 161 Opóźnianie wykonania kodu przy pomocy funkcji setTimeout 162 Anulowanie czasu zwłoki 163 Wielokrotne wywoływanie kodu przy pomocy funkcji setInterval 164 Animowanie elementów za pomocą funkcji setInterval 165 Reagowanie na działania użytkownika 168 Reagowanie na kliknięcia 168 Zdarzenie mousemove 170 Co już wiesz 171 Dla ambitnych 172 #1: Idź za kliknięciami 172 #2: Wymyśl swoją własną animację 172 #3: Anulowanie animacji kliknięciem 172 #4: Napisz grę „Kliknij nagłówek"! 172 11 ZNAJDŹ UKRYTY SKARB! 173 Projektowanie gry 174 Tworzenie internetowej strony w HTML 175 wybór losowego miejsca ukrycia skarbu 176 Wybieranie losowych liczb 176 Ustawianie współrzędnych skarbu 177 Funkcja obsługi kliknięcia 177 Licznik kliknięć 178 Obliczanie odległości pomiędzy kliknięciem a skarbem 178 użycie twierdzenia Pitagorasa 179 Informowanie gracza o odległości od skarbu 181 Sprawdzanie, czy gracz wygrał 182 Kompletny kod gry 182 Co już wiesz 184 Dla ambitnych 185 #1: rozszerzanie obszaru gry 185 #2: Kolejne komunikaty 185 #3: Dodanie limitu kliknięć 185 #4: Wyświetlanie liczby kliknięć do wykorzystania 185 12 PROGRAMOWANIE OBIEKTOWE 187 Prosty obiekt 188 Dodawanie metod do obiektów 188 stosowanie słowa kluczowego this 189 Współdzielenie metody poprzez mnóstwo obiektów 189 Tworzenie obiektów przy pomocy konstruktorów 191 Anatomia konstruktora 191 Tworzenie konstruktora Auto 192 Rysowanie aut 194 Testowanie funkcji rysujAuto 195 regulowanie obiektów za pomocą prototypów 196 Dodawanie metody rysuj do prototypu Auto 197 Dodawanie metody wPrawo 198 Dodawanie metod do jazdy w lewo, w górę i w dół 199 Co już wiesz 201 Dla ambitnych 202 #1: Rysowanie w konstruktorze Auto 202 #2: Dodawanie atrybuty prędkość 202 #3: Wyścigówki 202 CZĘŚĆ III: PŁÓTNO 203 13 składnik CANVAS 205 Tworzenie podstawowego płótna 206 Rysowanie na płótnie 206 Wybieranie i zapisywanie elementu canvas 207 Uzyskiwanie kontekstu rysowania 207 Rysowanie kwadratu 207 Rysowanie wielu kwadratów 208 Zmiana koloru rysowania 209 Rysowanie obrysów prostokątów 211 Rysowanie linii czyli ścieżek 212 Wypełnianie ścieżek 213 Rysowanie łuków i okręgów 215 Rysowanie ćwiartki okręgu czyli łuku 216 Rysowanie półokręgu 217 Rysowanie pełnego okręgu 217 Rysowanie wielu okręgów za pomocą funkcji 218 Co już wiesz 220 Dla ambitnych 220 #1: Funkcja do rysowania bałwana 220 #2: Rysowanie tablicy punktów 221 #3: Rysowanie za pomocą myszy 221 #4: Rysowanie wisielca w grze Szubienica 221 14 PRZESUWANIE składników NA PŁÓTNIE 223 Poruszanie wzdłuż strony 224 Czyszczenie płótna 225 Rysowanie prostokąta 225 Zmiana pozycji 225 Oglądanie animacji w oglądarce 225 Animowanie wymiaru kwadratu 226 Nieprzewidywalna pszczoła 227 Nowa funkcja okrąg 228 Rysowanie pszczoły 228 Aktualizacja pozycji pszczoły 230 Animowanie naszej nieprzewidywalnej pszczoły 231 Odbijanie piłki! 233 Konstruktor Piłka 233 Rysowanie piłki 234 Przesuwanie piłki 235 Odbijanie się piłki 235 Animowanie piłki 237 Co już wiesz 238 Dla ambitnych 239 #1: Piłka odbijająca się na większym płótnie 239 #2: Losowe wartości thisxSzybkość i thisySzybkość 240 #3: Animowanie obszerniejszej liczby piłek 240 #4: Tworzenie barwnych piłek 240 15 STEROWANIE ANIMACJAMI za pomocą KLAWISZY 241 Zdarzenia klawiatury 242 Przygotowanie pliku HTML 242 Dodawanie obsługi zdarzenia keydown 243 wykorzystywanie obiektu do przekształcania kodów klawiszy na nazwy 244 Przesuwanie piłki za pomocą klawiatury 245 Konfigurowanie płótna 246 Definiowanie funkcji okrąg 246 Tworzenie konstruktora Piłka 246 Definiowanie metody przesuwaj 247 Definiowanie metody rysuj 248 Tworzenie metody ustawKierunek 249 Reagowanie na zdarzenia klawiatury 250 Animowanie piłki 251 Pełny kod 252 wykonywanie kodu 254 Co już wiesz 255 Dla ambitnych 255 #1: Odbijanie się od ścian 255 #2: Sterowanie szybkością 255 #3: rozciągliwe kontrolki 256 16 ZRĘCZNOŚCIOWA GRA WĄŻ: CZĘŚĆ 1 257 Założenia ogólne 258 Struktura gry 259 wykorzystywanie funkcji setInterval do animowania gry 260 Tworzenie obiektów gry 260 Konfiguracja sterowania z poziomu klawiatury 261 Konfiguracja gry 261 Tworzenie pliku HTML 261 Definiowanie zmiennych płótno, kontekst, szerokość i wysokość 262 Dzielenie płótna na bloki 262 Definiowanie zmiennej wynik 264 Rysowanie obramowania 264 Wyświetlanie wyniku 266 Ustawianie linii bazowej tekstu 267 Ustawianie wymiaru i czcionki 268 Funkcja rysujWynik 269 Kończenie gry 270 Co już wiesz 271 Dla ambitnych 272 #1: Składanie wszystkiego razem 272 #2: Animacja wyniku 272 #3: Dodawanie tekstu do Szubienicy 272 17 ZRĘCZNOŚCIOWA GRA WĄŻ: CZĘŚĆ 2 273 Tworzenie konstruktora Blok 274 Dodawanie metody rysujKwadrat 275 Dodawanie metody rysujOkrąg 276 Dodawanie metody porównaj 278 Tworzenie węża 279 Pisanie konstruktora Wąż 279 Rysowanie węża 280 Ruchy węża 281 Dodawanie metody przesuń 281 Dodawanie metody wykryjKolizje 285 Ustawianie kierunku węża z klawiatury 287 Dodawanie obsługi zdarzenia keydown 287 Dodawanie metody ustawKierunek 288 Tworzenie jabłka 289 Pisanie konstruktora Jabłko 289 Rysowanie jabłka 289 Ruch jabłka 290 Pełny kod 291 Co już wiesz 297 Dla ambitnych 298 #1: powiększanie planszy 298 #2: Kolorowanie węża 298 #3: zwiększanie szybkości gry w jej trakcie 298 #4: poprawianie metody jabłkoprzenieś 299 POSŁOWIE CO DALEJ? 301 Więcej JavaScript 302 Tworzenie stron internetowych 302 HTML 302 CSS 302 Kod po stronie serwera i Nodejs 303 Programowanie grafi ki 303 składnik canvas 303 SVG z biblioteką Raphaël 304 Programowanie 3D 304 Programowanie robotów 304 Programowanie audio 305 Programowanie gier 305 Udostępnianie kodu przy pomocy JSFiddle 306 SŁOWNICZEK 307 SKOROWIDZ 313