"JavaScript dla dzieci"

Spis treści

PODZIĘKOWANIA 22

WPROWADZENIE 24

Jak należy czytać tę książkę? 25

Kto powinien przeczytać tę książkę? 25

Co znajdziesz w tej książce? 26

Baw się dobrze! 27

Wprowadzenie do wydania polskiego 28

CZĘŚĆ I: PODSTAWY 30

1 CO TO JEST JAVASCRIPT? 32

Poznaj JavaScript 33

Po co się uczyć języka JavaScript? 35

Pierwsze kroki w JavaScript 36

Struktura programu JavaScript 37

Komentarze 39

Składnia 39

Co już wiesz 40

2 TYPY DANYCH I ZMIENNE 42

Liczby i operatory 44

Zmienne 46

Nazwy zmiennych 48

Tworzenie nowych zmiennych za pomocą działań matematycznych 48

Inkrementacja i dekrementacja 50

+= (plus-równa się) i – = (minus-równa się) 51

Łańcuchy znaków 52

Łączenie łańcuchów znaków 54

Ustalanie długości łańcucha znaków 54

Pobieranie pojedynczego znaku z łańcucha 55

Przycinanie łańcucha znaków 56

Zmiana wszystkich znaków w łańcuchu na wielkie albo małe litery 57

Logiczny typ danych 59

Operatory logiczne 59

Porównywanie liczb na podstawie wartości logicznych 62

Wartości undefined i null 66

Co już wiesz 67

3 TABLICE 68

Po co zajmować się tablicami? 69

Tworzenie tablicy 70

Wybieranie elementów z tablicy 71

Ustawianie czyli zmienianie elementów tablicy 72

Mieszanie typów danych w tablicy 74

Praca z tablicami 75

Znajdowanie długości tablicy 75

Dodawanie elementów do tablicy 76

Usuwanie elementów z tablicy 77

Dodawanie tablic 79

Znajdowanie indeksu elementu w tablicy 81

Przekształcanie tablicy w łańcuch znaków 82

Pożytek z tablic 83

Znajdowanie drogi do domu 83

Program do podejmowania decyzji 85

Tworzenie generatora losowych zniewag 88

Co już wiesz 89

#1: Nowe zniewagi 90

#2: Bardziej wymyślne zniewagi 90

#3: Operator + czy metoda join? 90

#4: Liczby i metoda join 90

Dla ambitnych 90

4 OBIEKTY 92

Tworzenie obiektów 93

Klucze bez cudzysłowów 94

Wybieranie wartości w obiekcie 95

Dodawanie wartości do obiektów 96

Dodawanie kluczy za pomocą notacji kropkowej 97

Łączenie tablic z obiektami 98

Tablica pełna przyjaciół 98

Eksploracja obiektów w konsoli 100

Pożytek z obiektów 101

Śledzenie należnych pieniędzy 101

Zapisywanie informacji o filmach 103

Co już wiesz 104

#1: Tablica wyników 105

#2: Eksplorowanie obiektów i tablic 105

Dla ambitnych 105

5 PODSTAWY HTML 106

Edytory tekstu 107

Nasz pierwszy dokument HTML 108

Znaczniki i elementy 109

Nagłówki 109

Element p 110

Odstępy w HTML i elementy blokowe 111

Elementy wierszowe 112

Kompletny dokument HTML 113

Hierarchia HTML 114

Dodawanie odnośników do kodu HTML 115

Atrybuty odnośnika 116

Atrybut title 117

Co już wiesz 118

6 INSTRUKCJE WARUNKOWE I PĘTLE 120

Osadzanie JavaScript w HTML 121

Instrukcje warunkowe 122

Instrukcje if 122

Instrukcje if…else 124

Szeregowanie instrukcji if…else 125

Pętle 127

Pętle while 128

Pętle for 130

Co już wiesz 134

#1: Niesamowite zwierzęta 135

#2: Generator losowych napisów 135

Dla ambitnych 135

#3: h4ck3rsk4 m0w4 136

7 GRA SZUBIENICA 138

Komunikacja z graczem 139

Tworzenie okienka typu prompt 139

Funkcja confirm – zadawanie pytań rozstrzygających 141

Funkcja alert – wyświetlanie informacji 142

Projektujemy grę 143

Kiedy używać funkcji alert zamiast metody consolelog? 143

Śledzenie stanu słowa 144

Projektowanie gry z użyciem pseudokodu 144

Projektowanie głównej pętli gry 145

Kod gry 146

Wybieranie losowego słowa 146

Kod głównej pętli gry 147

Tworzenie tablicy z odpowiedziami 147

Kod gry 151

Kończenie gry 151

Co już wiesz 153

#1: Więcej słów 154

#2: Wielkie litery 154

#3: Ograniczanie liczby strzałów 154

#4: Usuwanie usterki 154

Dla ambitnych 154

8 FUNKCJE 156

Podstawowa anatomia funkcji 157

Tworzenie prostej funkcji 157

Wywoływanie funkcji 158

Przesyłanie argumentów do funkcji 159

Wyświetlanie kocich pyszczków! 160

Przesyłanie do funkcji wielu argumentów 161

Zwracanie wartości z funkcji 162

Używanie wywołania funkcji jako wartości 164

Upraszczanie kodu za pomocą funkcji 165

Funkcja do wyboru losowego słowa 165

Generator losowych zniewag 165

Przekształcanie generatora losowych zniewag w funkcję 167

Wcześniejsze opuszczanie funkcji za pomocą słowa kluczowego return 168

Wielokrotne używanie return zamiast instrukcji if…else 169

#1: Wykonywanie obliczeń za pomocą funkcji 171

#2: Czy te tablice są takie same? 171

Co już wiesz 171

Dla ambitnych 171

#3: Szubienica z funkcjami 172

CZĘŚĆ II: JAVASCRIPT KROK DALEJ 174

9 DOM I JQUERY 176

Wybór elementów DOM 177

Identyfikowanie elementów za pomocą atrybutu id 178

Wybór elementu za pomocą metody getElementById 178

Zamiana tekstu w nagłówku za pomocą DOM 179

Praca z drzewem DOM za pomocą jQuery 181

Ładowanie jQuery na stronie HTML 181

Zamiana tekstu w nagłówku za pomocą jQuery 181

Tworzenie nowych elementów za pomocą jQuery 183

Animowanie elementów za pomocą jQuery 184

Szeregowanie animacji jQuery 185

#1: Wyświetlanie imion znajomych za pomocą jQuery (w taki sposób, żeby ich do siebie zrazić!) 187

#2: Tworzenie migającego nagłówka 187

Co już wiesz 187

Dla ambitnych 187

#3: Opóźnianie animacji 188

#4: Używanie metody fadeTo 188

10 PROGRAMOWANIE INTERAKTYWNE 190

Opóźnianie wykonania kodu za pomocą funkcji setTimeout 191

Anulowanie czasu zwłoki 192

Wielokrotne wywoływanie kodu za pomocą funkcji setInterval 193

Animowanie elementów za pomocą funkcji setInterval 194

Reagowanie na działania użytkownika 197

Reagowanie na kliknięcia 197

Zdarzenie mousemove 199

Co już wiesz 200

#1: Idź za kliknięciami 201

#2: Wymyśl swoją własną animację 201

#3: Anulowanie animacji kliknięciem 201

#4: Napisz grę „Kliknij nagłówek”! 201

Dla ambitnych 201

11 ZNAJDŹ UKRYTY SKARB! 202

Projektowanie gry 203

Tworzenie internetowej strony w HTML 204

Wybór losowego miejsca ukrycia skarbu 205

Wybieranie losowych liczb 205

Funkcja obsługi kliknięcia 206

Ustawianie współrzędnych skarbu 206

Licznik kliknięć 207

Obliczanie odległości pomiędzy kliknięciem a skarbem 207

Zastosowanie twierdzenia Pitagorasa 208

Informowanie gracza o odległości od skarbu 210

Kompletny kod gry 211

Sprawdzanie, czy gracz wygrał 211

Co już wiesz 213

#1: Zwiększanie obszaru gry 214

#2: Kolejne komunikaty 214

#3: Dodanie limitu kliknięć 214

#4: Wyświetlanie liczby kliknięć do wykorzystania 214

Dla ambitnych 214

12 PROGRAMOWANIE OBIEKTOWE 216

Dodawanie metod do obiektów 217

Prosty obiekt 217

Używanie słowa kluczowego this 218

Współdzielenie metody przez wiele obiektów 218

Tworzenie obiektów za pomocą konstruktorów 220

Anatomia konstruktora 220

Tworzenie konstruktora Auto 221

Rysowanie aut 223

Testowanie funkcji rysujAuto 224

Dostosowywanie obiektów za pomocą prototypów 225

Dodawanie metody rysuj do prototypu Auto 226

Dodawanie metody wPrawo 227

Dodawanie metod do jazdy w lewo, w górę i w dół 228

Co już wiesz 230

#1: Rysowanie w konstruktorze Auto 231

#2: Dodawanie właściwości szybkość 231

#3: Wyścigówki 231

Dla ambitnych 231

CZĘŚĆ III: PŁÓTNO 232

13 ELEMENT CANVAS 234

Rysowanie na płótnie 235

Tworzenie podstawowego płótna 235

Rysowanie kwadratu 236

Uzyskiwanie kontekstu rysowania 236

Wybieranie i zapisywanie elementu canvas 236

Rysowanie wielu kwadratów 237

Zmiana koloru rysowania 238

Rysowanie obrysów prostokątów 240

Rysowanie linii czyli ścieżek 241

Wypełnianie ścieżek 242

Rysowanie łuków i okręgów 244

Rysowanie ćwiartki okręgu czyli łuku 245

Rysowanie półokręgu 246

Rysowanie pełnego okręgu 246

Rysowanie wielu okręgów za pomocą funkcji 247

#1: Funkcja do rysowania bałwana 249

Co już wiesz 249

Dla ambitnych 249

#2: Rysowanie tablicy punktów 250

#3: Rysowanie za pomocą myszy 250

#4: Rysowanie wisielca w grze Szubienica 250

14 PRZESUWANIE ELEMENTÓW NA PŁÓTNIE 252

Poruszanie wzdłuż strony 253

Czyszczenie płótna 254

Oglądanie animacji w przeglądarce 254

Rysowanie prostokąta 254

Zmiana pozycji 254

Animowanie rozmiaru kwadratu 255

Nieprzewidywalna pszczoła 256

Nowa funkcja okrąg 257

Rysowanie pszczoły 257

Aktualizacja pozycji pszczoły 259

Animowanie naszej nieprzewidywalnej pszczoły 260

Odbijanie piłki! 262

Konstruktor Piłka 262

Rysowanie piłki 263

Odbijanie się piłki 264

Przesuwanie piłki 264

Animowanie piłki 266

Co już wiesz 267

#1: Piłka odbijająca się na większym płótnie 268

Dla ambitnych 268

#2: Losowe wartości thisxSzybkość i thisySzybkość 269

#3: Animowanie większej liczby piłek 269

#4: Tworzenie kolorowych piłek 269

15 STEROWANIE ANIMACJAMI ZA POMOCĄ KLAWISZY 270

Zdarzenia klawiatury 271

Przygotowanie pliku HTML 271

Dodawanie obsługi zdarzenia keydown 272

Używanie obiektu do przekształcania kodów klawiszy na nazwy 273

Przesuwanie piłki za pomocą klawiatury 274

Definiowanie funkcji okrąg 275

Konfigurowanie płótna 275

Tworzenie konstruktora Piłka 275

Definiowanie metody przesuwaj 276

Definiowanie metody rysuj 277

Tworzenie metody ustawKierunek 278

Reagowanie na zdarzenia klawiatury 279

Animowanie piłki 280

Pełny kod 281

Wykonywanie kodu 283

#1: Odbijanie się od ścian 284

#2: Sterowanie szybkością 284

Co już wiesz 284

Dla ambitnych 284

#3: Elastyczne kontrolki 285

16 ZRĘCZNOŚCIOWA GRA WĄŻ: CZĘŚĆ 1 286

Założenia ogólne 287

Struktura gry 288

Tworzenie obiektów gry 289

Używanie funkcji setInterval do animowania gry 289

Konfiguracja gry 290

Konfiguracja sterowania z poziomu klawiatury 290

Tworzenie pliku HTML 290

Definiowanie zmiennych płótno, kontekst, szerokość i wysokość 291

Dzielenie płótna na bloki 291

Rysowanie obramowania 293

Definiowanie zmiennej wynik 293

Wyświetlanie wyniku 295

Ustawianie linii bazowej tekstu 296

Ustawianie rozmiaru i czcionki 297

Funkcja rysujWynik 298

Kończenie gry 299

Co już wiesz 300

#1: Składanie wszystkiego razem 301

#2: Animacja wyniku 301

#3: Dodawanie tekstu do Szubienicy 301

Dla ambitnych 301

17 ZRĘCZNOŚCIOWA GRA WĄŻ: CZĘŚĆ 2 302

Tworzenie konstruktora Blok 303

Dodawanie metody rysujKwadrat 304

Dodawanie metody rysujOkrąg 305

Dodawanie metody porównaj 307

Tworzenie węża 308

Pisanie konstruktora Wąż 308

Rysowanie węża 309

Ruchy węża 310

Dodawanie metody przesuń 310

Dodawanie metody wykryjKolizje 314

Ustawianie kierunku węża z klawiatury 316

Dodawanie obsługi zdarzenia keydown 316

Dodawanie metody ustawKierunek 317

Tworzenie jabłka 318

Pisanie konstruktora Jabłko 318

Rysowanie jabłka 318

Ruch jabłka 319

Pełny kod 320

Co już wiesz 326

#1: Powiększanie planszy 327

#2: Kolorowanie węża 327

#3: Zwiększanie szybkości gry w jej trakcie 327

Dla ambitnych 327

#4: Poprawianie metody jabłkoprzenieś 328

POSŁOWIE CO DALEJ? 330

Tworzenie stron internetowych 331

Więcej JavaScript 331

CSS 331

HTML 331

Programowanie grafi ki 332

Element canvas 332

Kod po stronie serwera i Nodejs 332

Programowanie 3D 333

Programowanie robotów 333

SVG z biblioteką Raphaël 333

Programowanie audio 334

Programowanie gier 334

Udostępnianie kodu za pomocą JSFiddle 335

SŁOWNICZEK 336

SKOROWIDZ 342