Dane oryginału

JavaScript for Kids. A playful introduction to programming

Copyright © 2015 by Nick Morgan. Published by No Starch Press.

All rights reserved.

Przekład WITKOM Witold Sikorski: Maciej Baranowski i Witold Sikorski

Projekt okładki polskiego wydania Hubert Zacharski

Rysunki Miran Lipovača

Wydawca Łukasz Łopuszański

Redaktor prowadzący Jolanta Kowalczuk

Redaktor Magdalena Kruszyna

Koordynator produkcji Anna Bączkowska

Skład wersji elektronicznej na zlecenie Wydawnictwa Naukowego PWN Tomasz Szymański

Zastrzeżonych nazw firm i produktów użyto w książce wyłącznie w celu identyfikacji.

Copyright © for the Polish edition by Wydawnictwo Naukowe PWN SA

Warszawa 2015

eBook został przygotowany na podstawie wydania papierowego z 2015 r., (wyd. I)

Warszawa 2016

ISBN 978-83-01-18569-5

Wydawnictwo Naukowe PWN SA

02-460 Warszawa, ul. Gottlieba Daimlera 2

tel. 22 69 54 321, faks 22 69 54 288

infolinia 801 33 33 88

e-mail: pwn@pwn.com.pl, www.pwn.pl

SPIS TREŚCI

PODZIĘKOWANIA

WPROWADZENIE

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

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

Co znajdziesz w tej książce?

Baw się dobrze!

Wprowadzenie do wydania polskiego

CZĘŚĆ I: PODSTAWY

1
CO TO JEST JAVASCRIPT?

Poznaj JavaScript

Po co się uczyć języka JavaScript?

Pierwsze kroki w JavaScript

Struktura programu JavaScript

Składnia

Komentarze

Co już wiesz

2
TYPY DANYCH I ZMIENNE

Liczby i operatory

Zmienne

Nazwy zmiennych

Tworzenie nowych zmiennych za pomocą działań matematycznych

Inkrementacja i dekrementacja

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

Łańcuchy znaków

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

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

Pobieranie pojedynczego znaku z łańcucha

Przycinanie łańcucha znaków

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

Logiczny typ danych

Operatory logiczne

Porównywanie liczb na podstawie wartości logicznych

Wartości undefined i null

Co już wiesz

3
TABLICE

Po co zajmować się tablicami?

Tworzenie tablicy

Wybieranie elementów z tablicy

Ustawianie czyli zmienianie elementów tablicy

Mieszanie typów danych w tablicy

Praca z tablicami

Znajdowanie długości tablicy

Dodawanie elementów do tablicy

Usuwanie elementów z tablicy

Dodawanie tablic

Znajdowanie indeksu elementu w tablicy

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

Pożytek z tablic

Znajdowanie drogi do domu

Program do podejmowania decyzji

Tworzenie generatora losowych zniewag

Co już wiesz

Dla ambitnych

#1: Nowe zniewagi

#2: Bardziej wymyślne zniewagi

#3: Operator + czy metoda join

#4: Liczby i metoda join

4
OBIEKTY

Tworzenie obiektów

Klucze bez cudzysłowów

Wybieranie wartości w obiekcie

Dodawanie wartości do obiektów

Dodawanie kluczy za pomocą notacji kropkowej

Łączenie tablic z obiektami

Tablica pełna przyjaciół

Eksploracja obiektów w konsoli

Pożytek z obiektów

Śledzenie należnych pieniędzy

Zapisywanie informacji o filmach

Co już wiesz

Dla ambitnych

#1: Tablica wyników

#2: Eksplorowanie obiektów i tablic

5
PODSTAWY HTML

Edytory tekstu

Nasz pierwszy dokument HTML

Znaczniki i elementy

Nagłówki

Element p

Odstępy w HTML i elementy blokowe

Elementy wierszowe

Kompletny dokument HTML

Hierarchia HTML

Dodawanie odnośników do kodu HTML

Atrybuty odnośnika

Atrybut title

Co już wiesz

6
INSTRUKCJE WARUNKOWE I PĘTLE

Osadzanie JavaScript w HTML

Instrukcje warunkowe

Instrukcje if

Instrukcje if…else

Szeregowanie instrukcji if…else

Pętle

Pętle while

Pętle for

Co już wiesz

Dla ambitnych

#1: Niesamowite zwierzęta

#2: Generator losowych napisów

#3: H4ck3rsk4 m0w4

7
GRA SZUBIENICA

Komunikacja z graczem

Tworzenie okienka typu prompt

Funkcja confirm – zadawanie pytań rozstrzygających

Funkcja alert – wyświetlanie informacji

Kiedy używać funkcji alert zamiast metody console.log?

Projektujemy grę

Projektowanie gry z użyciem pseudokodu

Śledzenie stanu słowa

Projektowanie głównej pętli gry

Kod gry

Wybieranie losowego słowa

Tworzenie tablicy z odpowiedziami

Kod głównej pętli gry

Kończenie gry

Kod gry

Co już wiesz

Dla ambitnych

#1: Więcej słów

#2: Wielkie litery

#3: Ograniczanie liczby strzałów

#4: Usuwanie usterki

8
FUNKCJE

Podstawowa anatomia funkcji

Tworzenie prostej funkcji

Wywoływanie funkcji

Przesyłanie argumentów do funkcji

Wyświetlanie kocich pyszczków!

Przesyłanie do funkcji wielu argumentów

Zwracanie wartości z funkcji

Używanie wywołania funkcji jako wartości

Upraszczanie kodu za pomocą funkcji

Funkcja do wyboru losowego słowa

Generator losowych zniewag

Przekształcanie generatora losowych zniewag w funkcję

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

Wielokrotne używanie return zamiast instrukcji if…else

Co już wiesz

Dla ambitnych

#1: Wykonywanie obliczeń za pomocą funkcji

#2: Czy te tablice są takie same

#3: Szubienica z funkcjami

CZĘŚĆ II: JAVASCRIPT KROK DALEJ

9
DOM I JQUERY

Wybór elementów DOM

Identyfikowanie elementów za pomocą atrybutu id

Wybór elementu za pomocą metody getElementById

Zamiana tekstu w nagłówku za pomocą DOM

Praca z drzewem DOM za pomocą jQuery

Ładowanie jQuery na stronie HTML

Zamiana tekstu w nagłówku za pomocą jQuery

Tworzenie nowych elementów za pomocą jQuery

Animowanie elementów za pomocą jQuery

Szeregowanie animacji jQuery

Co już wiesz

Dla ambitnych

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

#2: Tworzenie migającego nagłówka

#3: Opóźnianie animacji

#4: Używanie metody fadeTo

10
PROGRAMOWANIE INTERAKTYWNE

Opóźnianie wykonania kodu za pomocą funkcji setTimeout

Anulowanie czasu zwłoki

Wielokrotne wywoływanie kodu za pomocą funkcji setInterval

Animowanie elementów za pomocą funkcji setInterval

Reagowanie na działania użytkownika

Reagowanie na kliknięcia

Zdarzenie mousemove

Co już wiesz

Dla ambitnych

#1: Idź za kliknięciami

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

#3: Anulowanie animacji kliknięciem

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

11
ZNAJDŹ UKRYTY SKARB!

Projektowanie gry

Tworzenie internetowej strony w HTML

Wybór losowego miejsca ukrycia skarbu

Wybieranie losowych liczb

Ustawianie współrzędnych skarbu

Funkcja obsługi kliknięcia

Licznik kliknięć

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

Zastosowanie twierdzenia Pitagorasa

Informowanie gracza o odległości od skarbu

Sprawdzanie, czy gracz wygrał

Kompletny kod gry

Co już wiesz

Dla ambitnych

#1: Zwiększanie obszaru gry

#2: Kolejne komunikaty

#3: Dodanie limitu kliknięć

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

12
PROGRAMOWANIE OBIEKTOWE

Prosty obiekt

Dodawanie metod do obiektów

Używanie słowa kluczowego this

Współdzielenie metody przez wiele obiektów

Tworzenie obiektów za pomocą konstruktorów

Anatomia konstruktora

Tworzenie konstruktora Auto

Rysowanie aut

Testowanie funkcji rysujAuto

Dostosowywanie obiektów za pomocą prototypów

Dodawanie metody rysuj do prototypu Auto

Dodawanie metody wPrawo

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

Co już wiesz

Dla ambitnych

#1: Rysowanie w konstruktorze Auto

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

#3: Wyścigówki

CZĘŚĆ III: PŁÓTNO

13
ELEMENT CANVAS

Tworzenie podstawowego płótna

Rysowanie na płótnie

Wybieranie i zapisywanie elementu canvas

Uzyskiwanie kontekstu rysowania

Rysowanie kwadratu

Rysowanie wielu kwadratów

Zmiana koloru rysowania

Rysowanie obrysów prostokątów

Rysowanie linii czyli ścieżek

Wypełnianie ścieżek

Rysowanie łuków i okręgów

Rysowanie ćwiartki okręgu czyli łuku

Rysowanie półokręgu

Rysowanie pełnego okręgu

Rysowanie wielu okręgów za pomocą funkcji

Co już wiesz

Dla ambitnych

#1: Funkcja do rysowania bałwana

#2: Rysowanie tablicy punktów

#3: Rysowanie za pomocą myszy

#4: Rysowanie wisielca w grze Szubienica

14
PRZESUWANIE ELEMENTÓW NA PŁÓTNIE

Poruszanie wzdłuż strony

Czyszczenie płótna

Rysowanie prostokąta

Zmiana pozycji

Oglądanie animacji w przeglądarce

Animowanie rozmiaru kwadratu

Nieprzewidywalna pszczoła

Nowa funkcja okrąg

Rysowanie pszczoły

Aktualizacja pozycji pszczoły

Animowanie naszej nieprzewidywalnej pszczoły

Odbijanie piłki!

Konstruktor Piłka

Rysowanie piłki

Przesuwanie piłki

Odbijanie się piłki

Animowanie piłki

Co już wiesz

Dla ambitnych

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

#2: Losowe wartości this.xszybkość i this.yszybkość

#3: Animowanie większej liczby piłek

#4: Tworzenie kolorowych piłek

15
STEROWANIE ANIMACJAMI ZA POMOCĄ KLAWISZY

Zdarzenia klawiatury

Przygotowanie pliku HTML

Dodawanie obsługi zdarzenia keydown

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

Przesuwanie piłki za pomocą klawiatury

Konfigurowanie płótna

Definiowanie funkcji okrąg

Tworzenie konstruktora Piłka

Definiowanie metody przesuwaj

Definiowanie metody rysuj

Tworzenie metody ustawKierunek

Reagowanie na zdarzenia klawiatury

Animowanie piłki

Pełny kod

Wykonywanie kodu

Co już wiesz

Dla ambitnych

#1: Odbijanie się od ścian

#2: Sterowanie szybkością

#3: Elastyczne kontrolki

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

Założenia ogólne

Struktura gry

Używanie funkcji setInterval do animowania gry

Tworzenie obiektów gry

Konfiguracja sterowania z poziomu klawiatury

Konfiguracja gry

Tworzenie pliku HTML

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

Dzielenie płótna na bloki

Definiowanie zmiennej wynik

Rysowanie obramowania

Wyświetlanie wyniku

Ustawianie linii bazowej tekstu

Ustawienie rozmiaru i czcionki

Funkcja rysujWynik

Kończenie gry

Co już wiesz

Dla ambitnych

#1: Składanie wszystkiego razem

#2: Animacja wyniku

#3: Dodawanie tekstu do Szubienicy

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

Tworzenie konstruktora Blok

Dodawanie metody rysujKwadrat

Dodawanie metody rysujOkrąg

Dodawanie metody porównaj

Tworzenie węża

Pisanie konstruktora Wąż

Rysowanie węża

Ruchy węża

Dodawanie metody przesuń

Dodawanie metody wykryjKolizje

Ustawianie kierunku węża z klawiatury

Dodawanie obsługi zdarzenia keydown

Dodawanie metody ustawKierunek

Tworzenie jabłka

Pisanie konstruktora Jabłko

Rysowanie jabłka

Ruch jabłka

Pełny kod

Co już wiesz

Dla ambitnych

#1: Powiększanie planszy

#2: Kolorowanie węża

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

#4: Poprawianie metody jabłko.przenieś

POSŁOWIE. CO DALEJ?

Więcej JavaScript

Tworzenie stron internetowych

HTML

CSS

Kod po stronie serwera i Node.js

Programowanie grafiki

Element canvas

SVG z biblioteką Raphaël

Programowanie 3D

Programowanie robotów

Programowanie audio

Programowanie gier

Udostępnianie kodu za pomocą JSFiddle

SŁOWNICZEK

Wszystkie rozdziały dostępne w pełnej wersji książki.

Dla Philly
(i Pancake’a)

O AUTORZE

Nick Morgan programuje interfejsy w firmie Twitter. Kocha wszystkie języki programowania, ale szczególną słabość ma do JavaScript. Mieszka w San Francisco (w zamglonej zachodniej części miasta) ze swą narzeczoną i włochatym psem o imieniu Pancake. Prowadzi bloga pod adresem skilldrick.co.uk.

O ILUSTRATORZE

Miran Lipovača jest autorem książki Learn You a Haskell for Great Good! Lubi boks, grę na gitarze i, rzecz jasna, programowanie. Fascynują go tańczące kościotrupy i liczba 71. Przechodząc przez automatyczne drzwi, wyobraża sobie, że tak naprawdę sam otwiera je siłą woli.

O REDAKTORZE TECHNICZNYM

Angus Croll to ogarnięty obsesją na temat JavaScript i literatury autor książki If Hemingway Wrote JavaScript. Pracuje w zespole zajmującym się interfejsem użytkownika w portalu Twitter i jest współtwórcą schematu Flight. Prowadzi cenionego bloga JavaScript, JavaScript i jest zapraszany na ogólnoświatowe konferencje. Jego konto na Twitterze to @angustweets.

PODZIĘKOWANIA

Ogromne podziękowania dla mojej wspaniałej narzeczonej Philly za zachęcanie mnie i wspieranie przez ostatnie 18 miesięcy. Naprawdę bez niej bym tego nie zrobił. Dziękuję też Pancake’owi, naszemu psu, za inspirację przy wymyślaniu nazw zmiennych.

Dziękuję Angusowi – gdyby nie on, nie mieszkałbym tu, w San Francisco, i nie pisałbym tej książki. To właśnie Angus polecił mnie Twitterowi w 2011, a następnie w 2013 zasugerował Billowi Pollockowi, że byłbym zainteresowany napisaniem książki, którą właśnie masz przed sobą. A przede wszystkim zgodził się zostać redaktorem technicznym i wyłapał bardzo wiele niedociągnięć w kodzie JavaScript.

Dziękuję Billowi Pollockowi, Sephowi Kramerowi, Rileyowi Hoffmanowi, Tylerowi Ortmanowi i wszystkim pozostałym pracownikom No Starch Press, którzy cierpliwie asystowali mi podczas pisania tej książki. Szczególnie dziękuję Billowi i Sephowi za nadanie mojej twórczości obecnego kształtu.

Dziękuję młodym recenzentom: Riverowi Bradleyowi, Damienowi Champowi i Aleksowi Chu, których komentarze na temat pierwszych wersji PDF były bardzo pomocne.

Chcę również podziękować Miranowi Lipovačy. Od lat jestem jego fanem, a jego książka Learn You a Haskell for Great Good należy do moich ulubionych na temat programowania, także dzięki jego niesamowitym ilustracjom. Informacja o tym, że to on będzie ilustrował moją książkę, była spełnieniem marzeń. Jego obrazki są lepsze, niż oczekiwałem, i czuję się zaszczycony tym, że miałem szansę z nim pracować.

Witaj na stronach książki JavaScript dla dzieci! Nauczysz się tutaj programować w JavaScript, języku sieci www. Najważniejsze, że staniesz się programistą – kimś, kto nie tylko używa komputerów, lecz także im rozkazuje. Gdy już nauczysz się programować, możesz zmusić komputery do posłuszeństwa i spełniania Twoich zachcianek!

JavaScript to język programowania świetnie nadający się do nauki, ponieważ jest używany praktycznie wszędzie. Przeglądarki internetowe takie jak Chrome, Firefox i Internet Explorer używają JavaScript. Język ten pozwala programistom przekształcać internetowe strony z prostych dokumentów w interaktywne aplikacje i gry w pełnym tego słowa znaczeniu.

Nie musisz ograniczać się do pisania stron internetowych. W JavaScript można tworzyć całe serwisy internetowe działające na serwerach www, a nawet sterować robotami i innymi urządzeniami!

KTO POWINIEN PRZECZYTAĆ TĘ KSIĄŻKĘ?

Ta książka jest dla każdego, kto chce nauczyć się JavaScript albo zaczyna się uczyć programowania w ogóle. Książka ma być przyjazna dzieciom, ale może służyć za pierwszy podręcznik do programowania dla początkujących w każdym wieku.

Czytając tę książkę, wiedzę na temat JavaScript będziesz zdobywać stopniowo: najpierw poznasz proste typy danych, a potem typy bardziej złożone, jak również struktury sterujące i funkcje. Następnie nauczysz się pisać kod, który reaguje na ruchy wskaźnika myszy i naciśnięcia klawiszy przez użytkownika. Na końcu poznasz element canvas, który pozwala używać JavaScript do rysowania i animowania wszystkiego, czego sobie tylko zażyczysz!

Napiszesz też kilka gier, aby rozszerzyć swoje umiejętności programistyczne i z pożytkiem wykorzystać to, czego udało Ci się nauczyć.

JAK NALEŻY CZYTAĆ TĘ KSIĄŻKĘ

Przede wszystkim czytaj po kolei! Być może brzmi to niepoważnie, bo wiele osób woli od razu skoczyć na głęboką wodę i próbuje pisać gry. Z tym, że każdy rozdział jest rozwinięciem zagadnień z poprzednich rozdziałów, więc jeśli zaczniesz od początku, pisanie gier będzie dużo łatwiejsze.

Języki programowania są podobne do naturalnych: trzeba się nauczyć gramatyki i słownictwa, a na to potrzeba czasu. Jedynym sposobem na osiągniecie postępów jest pisanie (i czytanie) jak największych ilości kodu. Pisząc coraz więcej kodu samodzielnie, zauważysz, że niektóre elementy tego języka wchodzą Ci w krew, aż w końcu staniesz się biegłym programistą.

Podczas lektury zachęcam do przepisywania i testowania przykładowego kodu z całej książki. Jeśli nie do końca rozumiesz, o co chodzi, to próbuj wprowadzać niewielkie modyfikacje i sprawdzać, jaki jest ich skutek. Jeśli zmiany nie dają oczekiwanych rezultatów, to postaraj się ustalić, dlaczego tak się dzieje.

Przede wszystkim przeanalizuj punkty „Sprawdź się” i „Dla ambitnych”. Przepisywanie kodu z książki jest dobre na początek, ale lepiej zrozumiesz programowanie, jeżeli zaczniesz pisać własny kod. Jeśli uznasz, że jakieś zadanie jest interesujące, to nie poprzestawaj na jego rozwiązaniu – wymyślaj sam warianty zadań, aby pisać jak najwięcej własnych programów.

Przykładowe rozwiązania zadań dla ambitnych (jak również pliki z kodem gier i inne przykłady) znajdziesz na stronie http://nostarch.com/javascriptforkids/. Po rozwiązaniu zadania porównaj swój pomysł z moim albo – jeśli utknąłeś – poszukaj w nim podpowiedzi. Pamiętaj, że są to tylko przykładowe rozwiązania. Ten sam cel w języku JavaScript można osiągnąć na wiele sposobów, więc jeśli wpadniesz na coś zupełnie innego niż ja, to absolutnie nie jest to żaden powód do zmartwień!

Jeśli natkniesz się na słowo, którego znaczenia nie rozumiesz, to zajrzyj do słowniczka na końcu książki. Znajdziesz tam definicje wielu określeń programistycznych, które spotkasz w tej książce.

CO ZNAJDZIESZ W TEJ KSIĄŻCE?

Rozdział 1 to błyskawiczne wprowadzenie do JavaScript oraz początek pisania kodu JavaScript w Google Chrome.

W rozdziale 2 pojawiają się zmienne, a także podstawowe typy danych używane w JavaScript: liczby, łańcuchy znaków i wartości logiczne.

Treścią rozdziału 3 są tablice, które służą do składowania list innych danych.

Rozdział 4 poświęcony jest obiektom, które zawierają pary kluczy i wartości.

Rozdział 5 to wprowadzenie do HTML, czyli języka używanego do tworzenia stron internetowych.

W rozdziale 6 dowiesz się, jak zwiększyć kontrolę nad kodem za pomocą instrukcji if, pętli for i innych struktur sterujących.

W rozdziale 7 wszystko, czego udało Ci się nauczyć wcześniej, wykorzystasz do napisania prostej gry słownej, znanej pod nazwą Szubienica lub Wisielec.

W rozdziale 8 nauczysz się pisać swoje własne funkcje, dzięki czemu będziesz mógł łączyć i wielokrotnie używać bloków kodu.

Rozdział 9 wprowadza jQuery – narzędzie, które ułatwia sterowanie stronami internetowymi za pomocą JavaScript.

W rozdziale 10 dowiesz się, jak używać funkcji czasowych oraz obsługi zdarzeń, aby tworzyć bardziej interaktywny kod.

W rozdziale 11 za pomocą funkcji, jQuery i obsługi zdarzeń napiszesz grę zatytułowaną Znajdź ukryty skarb!

Rozdział 12 to nauka stylu programowania nazywanego programowaniem obiektowym.

W rozdziale 13 poznasz element canvas, który pozwala rysować na stronie internetowej za pomocą JavaScript.

Rozdział 14, na podstawie technik animacyjnych wprowadzonych w rozdziale 10, wyjaśnia, jak tworzyć animacje na płótnie, a w rozdziale 15 dowiesz się, jak sterować tymi animacjami z poziomu klawiatury.

W rozdziałach 16 i 17 wykorzystasz wiedzę z piętnastu poprzednich rozdziałów i napiszesz pełną wersję gry Wąż!

Posłowie zawiera kilka pomysłów na dalszą naukę programowania.

Słowniczek składa się z definicji wielu nowych słów, które występują w książce.

BAW SIĘ DOBRZE!

Ostatnia rzecz: baw się dobrze! Programowanie może być działalnością radosną i kreatywną, tak samo jak rysowanie i granie (prawdę mówiąc, w tej książce będziesz bardzo często rysować i grać w gry za pomocą JavaScript). Gdy już załapiesz, jak pisać kod, jedynym ograniczeniem będzie Twoja wyobraźnia. Witaj w niesamowitym świecie programowania komputerów – mam nadzieję, że będziesz mieć z tego frajdę!

WPROWADZENIE DO WYDANIA POLSKIEGO

W polskim wydaniu książki tłumacz starał się spolszczyć programy i zmienne, uruchamiając wszystkie skrypty w przeglądarce. Trzeba jednak pamiętać, że są pewne różnice między amerykańskimi a polskimi wersjami narzędzi, a polskie znaki diakrytyczne (ą, ć, ę itd.) nie zawsze są poprawnie interpretowane, o czym niżej.

Wszystkie przykłady w tej książce autor prezentuje w dwóch polecanych przez siebie programach: przeglądarce internetowej Google Chrome i edytorze tekstowym Sublime Text. W polskim wydaniu, dla uatrakcyjnienia przykładów i zwiększenia przejrzystości kodu, zdecydowano się na używanie polskich znaków w nazwach zmiennych i łańcuchach tekstów. Dlatego też, jeśli zdecydujesz się pójść w ślady autora i używać programu Sublime Text, zapisując i otwierając pliki HTML w tym programie, aby zapewnić właściwe wyświetlanie polskich znaków, musisz wykonać dodatkowe kroki:

• pliki zapisuj, wydając kolejno polecenia File, Save with Encoding i Central European (ISO-8859-2),

• otwieraj pliki do edycji za pomocą polecenia File, Reopen with Encoding i Central European (ISO-8859-2).

Jako edytora tekstowego możesz też używać wspomnianego przez autora programu Notepad++. Wówczas w plikach HTML w sekcji head umieszczaj dodatkowy znacznik meta o treści: <meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-2” />

Do testowania przykładów z tej książki nie radzimy używać przeglądarek innych niż Chrome. Trzeba też pamiętać, że w JavaScript, podobnie jak w innych językach programowania, separatorem dziesiętnym jest nie przecinek, ale kropka.

Mamy nadzieję, że wprowadzone zmiany ułatwią naukę osobom, które nie znają języka angielskiego.

UWAGA

Autorzy książki odsyłają Czytelnika do angielskiej strony z przykładami. Polskie przykłady znajdują się pod adresem http://www.smartkids.pwn.pl/Kody_JavaScript. Literatura pomocnicza przywoływana w pracy jest również anglojęzyczna. Książki i internetowe samouczki po polsku można znaleźć w Internecie po wpisaniu odpowiedniego hasła w Google.

CZĘŚĆ I

PODSTAWY

Komputery to maszyny niewiarygodnie potężne i zdolne do niesamowitych wyczynów, takich jak gra na najwyższym poziomie w szachy, udostępnianie tysięcy internetowych stron czy wykonywanie milionów skomplikowanych obliczeń w czasie krótszym niż kilka sekund. Tak naprawdę, komputery same z siebie są mało rozgarnięte. Potrafią zrobić tylko i wyłącznie to, co my, ludzie, każemy im zrobić. Mówimy im, jak się mają zachowywać za pomocą programów komputerowych, czyli po prostu zbiorów instrukcji do wykonania. Bez nich komputery nie potrafią zupełnie nic!

POZNAJ JAVASCRIPT

Co gorsza, komputery nie potrafią się porozumiewać ani polsku, ani w żadnym innym języku naturalnym. Programy komputerowe są pisane w językach programowania takich jak JavaScript. Jeżeli nawet ta nazwa nigdy nie obiła Ci się o uszy, pierwsze spotkanie z JavaScript z pewnością masz już za sobą: jest to język używany do pisania programów wykonywanych na stronach internetowych. To właśnie dzięki niemu strona taka może w określony sposób wyglądać albo reagować na kliknięcia i poruszanie wskaźnikiem myszy.

JavaScript na witrynach takich jak Gmail, Facebook i Twitter ułatwia wysyłanie wiadomości pocztowych, umieszczanie komentarzy czy też przeglądanie stron. Jeśli podczas czytania tweetów z @nostarch, w miarę przewijania strony, zauważamy pojawiające się na dole kolejne wiadomości, to właśnie obserwujemy JavaScript w akcji.

Wystarczy odwiedzić kilka internetowych witryn, aby przekonać się, dlaczego JavaScript jest taki ekscytujący.

• JavaScript pozwala odtwarzać muzykę i tworzyć niezwykłe efekty wizualne. Na przykład na stronie http://lights.helloenjoy.com/ możemy odbyć podróż w bajecznie kolorowym interaktywnym klipie dźwiękowym, utworzonym przez HelloEnjoya do piosenki „Lights” Ellie Goulding (patrz rys. 1.1).

• Dzięki JavaScript mogą powstawać narzędzia ułatwiające twórczą działalność innym osobom. Patatap (http://www.patatap.com/) to pewnego rodzaju wirtualny „automat perkusyjny”, wytwarzający różnego rodzaju efektowne dźwięki, którym towarzyszą równie wyraziste animacje (patrz rys. 1.2).

Rysunek 1.1. Sterujemy roziskrzonym kursorem w klipie dźwiękowym autorstwa HelloEnjoya do utworu „Lights” z repertuaru Ellie Goulding

Rysunek 1.2. Na stronie Patatap, biegając palcami po klawiaturze, uzyskujemy rozmaite dźwięki!

• W JavaScript można pisać fajne gry. CubeSlam (https://www.cubeslam.com/) to trójwymiarowa wersja klasycznej gry Pong, przypominająca trochę air hockey. Można zagrać z koleżanką albo przeciwko wygenerowanemu przez komputer niedźwiedziowi (patrz rys. 1.3).

Rysunek 1.3. Gra CubeSlam została napisana w całości w JavaScript!

PO CO SIĘ UCZYĆ JĘZYKA JAVASCRIPT?

Mimo że istnieją setki języków programowania, jest kilka ważnych powodów, aby nauczyć się właśnie JavaScript. Przede wszystkim, język ten jest znacznie łatwiejszy od pozostałych, a jego poznawanie sprawia wiele radości. Istotniejsze być może jest to, że do pisania i wykonywania programów JavaScript wystarczy przeglądarka internetowa, taka jak Google Chrome, Mozilla Firefox lub Internet Explorer. Każda z nich zawiera interpretator JavaScript, który potrafi odczytać programy napisane w tym języku.

Po napisaniu programu JavaScript można rozesłać swoim znajomym odnośnik, aby jak najwięcej osób mogło uruchomić ten program na swoich komputerach! (Patrz punkt „Udostępnianie kodu za pomocą JSFiddle” na stronie 306.)

PIERWSZE KROKI W JAVASCRIPT

Napiszemy teraz trochę przykładowego kodu JavaScript w przeglądarce Google Chrome (http://www.google.com/chrome/). Jeśli jeszcze nie masz tej przeglądarki, to ją zainstaluj, otwórz, a następnie w pasku adresu wpisz about:blank. Gdy naciśniesz ENTER, zobaczysz pustą stronę, taką jak na rysunku 1.4.

Zaczniemy od pisania kodu w konsoli JavaScript w przeglądarce Chrome. To tajny sposób programistów na testowanie krótkich programów JavaScript. Aby otworzyć konsolę w systemie Microsoft Windows albo Linux, przytrzymujemy wciśnięte klawisze CTRL i SHIFT i naciskamy J, a w systemie Mac OS przytrzymujemy COMMAND i OPTION i naciskamy J.

Jeśli wszystko wykonamy prawidłowo, zobaczymy pustą stronę internetową, a pod nią konsolę z migającym kursorem (|) zaraz obok znaku gotowości (>) (patrz rys. 1.4). Tutaj właśnie będziemy wpisywać kod JavaScript!

UWAGA

Na listingach w tej książce kod, który należy wpisać w konsoli, ma kolor niebieski, kolor danych wyjściowych zaś zależy od ich typu. Także w konsolach przeglądarek, takich jak Chrome, stosowane są schematy kolorów ułatwiające rozróżnianie typów danych.

Rysunek 1.4. Konsola JavaScript w przeglądarce Google Chrome

Po wpisaniu kodu w miejscu kursora i naciśnięciu ENTER JavaScript powinien uruchomić, czyli wykonać, ten kod i w następnym wierszu wyświetlić wynik (jeśli jakiś jest). Na przykład wpisujemy w konsoli:

3 + 4;

Naciskamy ENTER. JavaScript w kolejnym wierszu powinien wyświetlić wynik (7) tego prostego dodawania:

3 + 4;

7

Cóż, to dość proste. Ale JavaScript jest czymś więcej niż światowej sławy liczydłem! Spróbujmy czegoś innego.

STRUKTURA PROGRAMU JAVASCRIPT

Napiszemy teraz coś trochę mniej poważnego: program JavaScript wyświetlający serię kocich pyszczków, które wyglądają tak:

=^.^=

W przeciwieństwie do programu z dodawaniem, ten program będzie miał kilka wierszy. Wpisując kod w konsoli, nowe wiersze będziemy dodawali, naciskając SHIFT+ENTER na końcu każdego wiersza. (Jeśli naciśniemy tylko ENTER, to Chrome będzie próbował wykonać to, co właśnie zostało napisane, i program nie będzie działać poprawnie. Ostrzegałem, że komputery są nierozgarnięte!)

W konsoli w przeglądarce wpisujemy:

// Narysuj tyle kotów, ile zechcesz!

var rysujKoty = function (ileRazy) {

for (var i = 0; i < ileRazy; i++) {

console.log(i + " =^.^=");

}

};

rysujKoty(10); // Zamiast 10 można wstawić dowolną liczbę.

Na zakończenie, zamiast SHIFT+ENTER naciskamy ENTER. Gdy to zrobimy, powinniśmy otrzymać taki rezultat:

0 =^.^=

1 =^.^=

2 =^.^=

3 =^.^=

4 =^.^=

5 =^.^=

6 =^.^=

7 =^.^=

8 =^.^=

9 =^.^=

Jeśli przy wpisywaniu kodu popełnimy jakiś błąd, to możemy zobaczyć coś innego, a nawet informację o błędzie. To właśnie mam na myśli, powtarzając, że komputery są nierozgarnięte – nawet najprostszy fragment kodu musi być napisany perfekcyjnie, bo inaczej komputer nie zrozumie, co ma robić!

W tej chwili nie będę dokładnie wyjaśniał, jak działa ten kod (wrócimy do tego programu w rozdziale 8); przyjrzyjmy się natomiast kilku jego cechom, które są typowe dla wszystkich programów JavaScript.

SKŁADNIA

W naszym programie pojawia się wiele symboli, takich jak nawiasy ( ), średniki ;, klamry {}, znaki dodawania + oraz kilka słów, które na początku każdemu wydają się tajemnicze (na przykład var i console.log). Wszystkie te rzeczy są elementami składni JavaScript, czyli reguł prawidłowego łączenia symboli i słów w celu tworzenia działających programów.

Gdy uczymy się nowego języka programowania, jedną z największych trudności sprawia przywyknięcie do zasad pisania różnego rodzaju instrukcji dla komputera. Początkujący programiści bardzo często zapominają o nawiasach albo o kolejności podawania pewnych wartości. Z czasem można to wszystko opanować.

W tej książce nowe elementy składni będziemy wprowadzali powoli, stopniowo ucząc się pisać programy, które potrafią coraz więcej.

KOMENTARZE

Pierwszy wiersz w naszym programie z kotami wygląda tak:

// Narysuj tyle kotów, ile zechcesz!

Taki wiersz nazywamy komentarzem. Programiści używają komentarzy po to, aby ułatwić innym programistom czytanie i rozumienie kodu, natomiast komputery kompletnie je ignorują. Komentarze w JavaScript zaczynają się od dwóch prawych ukośników (//). Wszystko, co znajdzie się za tymi ukośnikami (w tym samym wierszu), jest ignorowane przez interpretator JavaScript, więc komentarze nie mają żadnego wpływu na wykonywanie programu – ich jedynym zadaniem jest umożliwienie programiście pozostawienia opisu.

W tej książce w komentarzach znajdziemy opis tego, co się dzieje w kodzie. Warto wyrobić sobie zwyczaj dodawania własnych komentarzy; dzięki temu, zaglądając do kodu w przyszłości, szybciej przypomnimy sobie jego działanie krok po kroku.

W ostatnim wierszu naszego programu znajduje się jeszcze jeden komentarz. Przypominam, że wszystko, co znajduje się za znakami //, jest przez komputer ignorowane!

rysujKoty(10); // Zamiast 10 można wstawić dowolną liczbę.

Komentarz do kodu może znajdować się w osobnym wierszu albo w tym samym, w którym jest kod. Jeśli wstawimy // na początku wiersza, tak jak poniżej:

// rysujKoty(10);

…nic się nie stanie! Chrome uznaje cały wiersz za komentarz, mimo że jest w nim kod JavaScript!

Czytając w przyszłości programy JavaScript z całego świata, spotkamy również komentarze wyglądające tak:

/*

Narysuj tyle kotów,

ile zechcesz!

*/

Ten styl jest typowy dla komentarzy dłuższych niż jednowierszowe. Ale działa identycznie: wszystko, co znajduje się pomiędzy znakami , to komentarz, którego komputer nie będzie wykonywać.

CO JUŻ WIESZ

Po przeczytaniu tego rozdziału wiesz już, czym jest język JavaScript i w jakich okolicznościach się go używa. Potrafisz też wykonywać kod JavaScript w przeglądarce Google Chrome i masz za sobą testowanie pierwszego programu. Wszystkie przykładowe kody z tej książki, o ile nie napiszę inaczej, mogą (i powinny!) być wykonywane w konsoli JavaScript w przeglądarce Chrome. Samo czytanie kodu to za mało – zawsze przepisz go i przetestuj! Tylko w ten sposób możesz nauczyć się programowania.

W kolejnym rozdziale zaczniemy właściwą naukę języka, omawiając trzy podstawowe typy informacji w JavaScript: liczby, łańcuchy znaków i wartości logiczne.