head first javascript. edycja polska ebook.pdf

Spis treści

Interaktywna WWW

W odpowiedzi na wirtualny świat

Czy męczy Cię już myślenie o WWW w kategoriach statycznych stron?

To już widziałem i przerobiłem. Takie rzeczy zazwyczaj nazywają książkami. Trzeba przyznać,

że doskonale się one nadają do czytania i nauki, i w ogóle są super. Ale… nie są interaktywne .

To samo dotyczy także stron WWW, jeśli nie uzyskają one nieznacznej pomocy ze strony języka

JavaScript. Pewnie, że można przesłać formularz i może nawet zastosować tu i tam kilka trików,

używając w tym celu umiejętnie napisanego kodu HTML i CSS, jednak takie rozwiązania nie są

w stanie „ożywić” martwych — statycznych stron WWW. Prawdziwa interaktywność wymaga

znacznie większego wkładu intelektualnego i nakładu pracy , jednak zapewnia efekty, które

zwrócą się z nawiązką .

Użytkownicy (WWW) mają swoje potrzeby

To jakby rozmowa ze ścianą — całkowity brak reakcji

A JavaScript odpowiada

Światła, kamera, interakcja!

Użyj znacznika <script>, by dać przeglądarce znać,

że piszesz kod JavaScript

Twoja przeglądarka WWW poradzi sobie z kodem HTML,

CSS i JavaScript

Najlepszy wirtualny przyjaciel mężczyzny… potrzebuje TWOJEJ pomocy

Zapewnianie interaktywności iGłazowi

Utworzenie strony WWW iGłazu

Test

Zdarzenia JavaScript: udzielamy głosu iGłazowi

Informowanie użytkownika przy wykorzystaniu funkcji

Dodanie powitania

A teraz zadbamy o to, by iGłaz stał się naprawdę interaktywny

Interakcja jest komunikacją DWUstronną

Dodajemy funkcję do pobrania imienia użytkownika

Błyskawiczna powtórka: Co się przed chwilą stało?

Testujemy iGłaz w wersji 1.0

Spis treści

Przechowywanie danych

Wszystko ma swoje miejsce

W praktyce często nie dostrzegamy znaczenia, jakie ma posiadanie miejsca

do przechowywania swoich rzeczy. Korzystając z języka JavaScript, na pewno zwrócimy

na to uwagę. W tym przypadku nie mamy bowiem luksusu posiadania osobnej garderoby

lub garażu na trzy samochody. W JavaScripcie wszystko musi mieć swoje miejsce , a Twoim

zadaniem jest zadbanie, by faktycznie tak się stało. W tym rozdziale będziemy się zajmować

danymi oraz zagadnieniami, które ich dotyczą — jak je reprezentować , przechowywać oraz jak

je odnaleźć , kiedy zostaną już gdzieś zapisane. Jako specjalista do spraw przechowywania danych

w JavaScripcie będziesz w stanie zająć się dowolnym kodem, zapanować nad chaosem obecnym

wśród używanych w nim danych, dzięki czemu będziesz mógł uporządkować go wedle swojej

woli, korzystając przy tym z zalet wirtualnych etykiet i pojemników.

Twoje skrypty mogą przechowywać dane

Skrypty myślą w oparciu o typy danych

Stałe zostają TAKIE SAME, wartości zmiennych mogą się ZMIENIAĆ

Zmienne początkowo nie mają wartości

Inicjalizacja zmiennej przy użyciu znaku =

Stałe są odporne na zmiany

A jak wyglądają nazwy?

Dozwolone i niedozwolone nazwy zmiennych oraz stałych

Nazwy zmiennych często są zapisywane według notacji CamelCase

Planujemy stronę zamówienia dla Donalda

Pierwsze podejście do obliczeń w formularzu zamówienia

Inicjuj swoje dane albo…

NaN NIE jest liczbą

Nie tylko liczby można dodawać

parseInt() oraz parseFloat() — konwersja łańcuchów znaków na liczby

Dlaczego w zamówieniu pojawiają się dodatkowe pączki?

Donald odkrywa „szpiegostwo ciastkarskie”

Użyj metody getElementById(), by pobrać dane z formularza

Weryfikacja danych w formularzu

100

Staraj się, by interfejs użytkownika był intuicyjny

105

Spis treści

Poznajemy klienta

W głąb przeglądarki

Czasami kod JavaScript musi „wiedzieć”, co się dzieje w świecie naokoło

niego. Twoje skrypty mogą początkowo być tworzone jako kod umieszczany bezpośrednio

w stronach WWW, jednak w ostateczności i tak będą istnieć i działać w świecie kreowanym przez

przeglądarkę WWW, nazywaną także klientem. „Sprytne” skrypty często będą potrzebowały

pewnych informacji o świecie, w którym „żyją”; w takich sytuacjach mogą zdobyć te dane,

komunikując się z przeglądarką . Niezależnie od tego, czy jest to określenie wymiarów ekranu,

czy też dostęp do jakiegoś przycisku przeglądarki, to utrzymując dobre stosunki z przeglądarką,

skrypty mogą bardzo wiele zyskać.

Klienty, serwery i JavaScript

112

Co przeglądarka może zrobić dla Ciebie?

114

iGłaz musi reagować bardziej wyraziście

116

Liczniki czasu kojarzą akcje z upływającym czasem

118

Przerywanie działania licznika

119

Tworzenie licznika czasu przy użyciu funkcji setTimeout()

120

Tu zaczynamy!

W zbliżeniu — funkcja setTimeout()

121

Wiele rozmiarów ekranu, wiele skarg

125

Użyj obiektu document, by określić szerokość okna przeglądarki

126

Skorzystaj z obiektu document, by odczytać szerokość okna klienta

127

Określanie wymiarów obrazka iGłazu

128

Wielkość iGłazu należy dostosować do strony

129

W momencie zmiany wielkości okna zgłaszane jest zdarzenie onresize

133

Zdarzenie onresize skaluje obrazek iGłazu

134

Czy myśmy się już spotkali? Rozpoznawanie użytkownika

136

Każdy skrypt ma swój cykl życiowy

137

Ciasteczka mogą istnieć dłużej niż cykl życia skryptu

138

Ciasteczka mają nazwę i przechowują wartość… poza tym mogą wygasnąć

143

Koniec!

Twój kod JavaScript może istnieć POZA Twoją stroną WWW

145

Przywitaj użytkownika ciasteczkiem

146

Teraz funkcja greetUser bazuje na ciasteczkach

147

Nie zapomnij o zapisaniu ciasteczka

148

Ciasteczka mają wpływ na bezpieczeństwo przeglądarek

150

Świat bez ciasteczek

152

Porozmawiaj z użytkownikiem, to lepsze niż nic…

155

Spis treści

Podejmowanie decyzji

Jeśli droga się rozwidla, nie wahaj się skręcić

Życie polega na podejmowaniu decyzji. Stanąć czy jechać, mieszać czy wstrząsać, iść

na ugodę czy do sądu… Tak naprawdę bez możliwości podejmowania decyzji nic nigdy nie udałoby

się zrobić. To samo dotyczy JavaScriptu — decyzje pozwalają skryptom dokonywać wyboru

pomiędzy różnymi możliwymi wynikami . To właśnie podejmowanie decyzji tworzy „historię”

naszego skryptu , a swoją historię mają wszystkie skrypty, nawet te najbardziej prozaiczne.

Czy więrzę w to, co wpisał użytkownik, i bez wahania zarezerwuję mu uczestnictwo w ekspedycji

badawczej Białowieży? A może bardzo dokładnie sprawdzę wpisane informacje, by nie okazało

się, że tak naprawdę użytkownik chciałby jedynie dojechać autobusem w okolice Białowieży?

Sam musisz podjąć decyzję i dokonać wyboru!

Szczęśliwy uczestniku, prosimy na scenę!

160

„Jeśli” to prawda, to coś zrób

162

Instrukcja if przetwarza warunek, a następnie wykonuje operację

163

Użyj instrukcji if, by wybrać jedną z dwóch opcji

165

Instrukcja if pozwala wybierać spośród wielu opcji

166

Dodawanie klauzuli else do instrukcji if

167

Przebiegiem zdarzeń sterują zmienne

170

Brakuje jednak części historii

171

Składanie operacji w JavaScripcie

172

Męczy Cię podejmowanie decyzji przy użyciu instrukcji if/else?

178

Instrukcję if można umieścić wewnątrz innej instrukcji if

179

Twoje funkcje kontrolują działanie stron

181

Pseudokod pozwala naszkicować ogólny obraz przygody

182

Nierówność kreskowego ludzika

186

!= Ech, Nie mam ci nic do powiedzenia…

187

Podejmowanie decyzji z wykorzystaniem operatorów porównania

188

Komentarze, puste miejsca i dokumentacja

190

Komentarze w JavaScripcie zaczynają się od znaków //

191

Zakres i kontekst — gdzie „żyją” dane

193

Sprawdź, gdzie są rozmieszczone zmienne w naszej przygodzie

194

Gdzie żyją moje dane?

195

Jedna z pięciu

198

Zagnieżdżanie instrukcji if/else może się stać skomplikowane

199

Instrukcje switch udostępniają wiele opcji

201

Poznajemy szczegóły instrukcji switch

202

Testowanie nowej wersji Przygody kreskowego ludzika

207

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: