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.
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.
