ebook JavaScript dla dzieci Nick Morgan

Wydawca: Wydawnictwo Naukowe PWN

Rok wydania: 2016

JavaScript dla dzieci to napisane lekkim piórem wprowadzenie do podstaw programowania, oparte na cierpliwym objaśnianiu zabawnie zilustrowanych przykładów. Zaczniesz od podstaw, takich jak łańcuchy znaków, tablice i pętle, a następnie przejdziesz do tematów zaawansowanych, takich jak obsługa interaktywnych zdarzeń za pomocą jQuery i rysowanie obrazków na płótnach. Dzięki bogato zilustrowanym przykładom, takim jak odbijające się piłki, animowane pszczoły i samochody wyścigowe, na własne oczy zobaczysz to, co zaprogramujesz. Każdy kolejny rozdział wzbogaca wcześniej zdobytą wiedzę, a zadania dla ambitnych to świetny trening dla mózgu i inspiracja do pisania własnych niesamowitych programów. Napisz dzisiaj coś fajnego w JavaScript!

Spis treści ebooka JavaScript dla dzieci

PODZIĘKOWANIA XXI

WPROWADZENIE XXIII
Kto powinien przeczytać tę książkę? xxiv
Jak należy czytać tę książkę? xxiv
Co znajdziesz 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 DANYCH I ZMIENNE 13
Liczby i operatory 15
Zmienne 17
Nazwy zmiennych 19
Tworzenie nowych zmiennych za pomocą 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 wielkie albo małe litery 28
Logiczny typ danych 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 elementów z tablicy 42
Ustawianie czyli zmienianie elementów tablicy 43
Mieszanie typów danych w tablicy 45
Praca z tablicami 46
Znajdowanie długości tablicy 46
Dodawanie elementów do tablicy 47
Usuwanie elementó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 wymyślne 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
Znaczniki i elementy 80
Nagłówki 80
Element p 81
Odstępy w HTML i elementy 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 użyciem 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: Wielkie litery 125
#3: Ograniczanie liczby strzałów 125
#4: Usuwanie 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
Upraszczanie 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 za pomocą słowa kluczowego return 139
Wielokrotne używanie return zamiast instrukcji if…else 140
Co już wiesz 142
Dla ambitnych 142
#1: Wykonywanie obliczeń za pomocą 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 elementów DOM 148
Identyfikowanie elementów za pomocą atrybutu id 149
Wybór elementu za pomocą metody getElementById 149
Zamiana tekstu w nagłówku za pomocą DOM 150
Praca z drzewem DOM za pomocą jQuery 152
Ładowanie jQuery na stronie HTML 152
Zamiana tekstu w nagłówku za pomocą jQuery 152
Tworzenie nowych elementów za pomocą jQuery 154
Animowanie elementów za pomocą 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, żeby 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 za pomocą funkcji setTimeout 162
Anulowanie czasu zwłoki 163
Wielokrotne wywoływanie kodu za pomocą 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
Zastosowanie 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: Zwiększanie 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
Używanie słowa kluczowego this 189
Współdzielenie metody przez wiele obiektów 189
Tworzenie obiektów za pomocą konstruktorów 191
Anatomia konstruktora 191
Tworzenie konstruktora Auto 192
Rysowanie aut 194
Testowanie funkcji rysujAuto 195
Dostosowywanie 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 właściwości szybkość 202
#3: Wyścigówki 202

CZĘŚĆ III: PŁÓTNO 203

13 ELEMENT 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 ELEMENTÓ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 przeglądarce 225
Animowanie rozmiaru 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 większej liczby piłek 240
#4: Tworzenie kolorowych piłek 240

15 STEROWANIE ANIMACJAMI ZA POMOCĄ KLAWISZY 241
Zdarzenia klawiatury 242
Przygotowanie pliku HTML 242
Dodawanie obsługi zdarzenia keydown 243
Używanie 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: Elastyczne kontrolki 256

16 ZRĘCZNOŚCIOWA GRA WĄŻ: CZĘŚĆ 1 257
Założenia ogólne 258
Struktura gry 259
Używanie 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 rozmiaru 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
Element canvas 303
SVG z biblioteką Raphaël 304
Programowanie 3D 304
Programowanie robotów 304
Programowanie audio 305
Programowanie gier 305
Udostępnianie kodu za pomocą JSFiddle 306

SŁOWNICZEK 307

SKOROWIDZ 313