Head First JavaScript.pdf

(34162 KB) Pobierz
Spis
treści
Spis treści (skrócony)
Wprowadzenie
1
2
3
4
5
6
7
8
9
10
11
12
Interaktywna WWW.
W odpowiedzi na wirtualny świat
Przechowywanie danych.
Wszystko ma swoje miejsce
Poznajemy klienta.
W głąb przeglądarki
Podejmowanie decyzji.
Jeśli droga się rozwidla, nie wahaj się skręcić
Pętle.
Ryzykując powtórzeniem
Funkcje.
Redukuj i używaj wielokrotnie
Formularze i sprawdzanie poprawności danych.
Aby użytkownik
powiedział nam wszystko
Modyfikacje stron WWW.
Krojenie i przyprawianie HTML-a
przy użyciu DOM
Ożywianie danych.
Obiekty jako Frankendane
Tworzenie własnych obiektów.
Zrób to po swojemu, używając
własnych obiektów
Zabijaj pluskwy — na śmierć!
Dobre skrypty na złej drodze
Dynamiczne dane.
Szybkie i wrażliwe aplikacje internetowe
Skorowidz
19
31
61
111
159
211
263
307
359
407
461
495
545
605
W
Spis treści (z prawdziwego zdarzenia)
Wprowadzenie
Twój mózg koncentruje się na JavaScripcie.
Siedzisz, próbując się czegoś
nauczyć,
ale Twój
mózg
twierdzi, że cała ta nauka
nie jest ważna.
Twój mózg twierdzi: „Lepiej zostawić
miejsce na jakieś ważne rzeczy, takie jak to, których dzikich zwierząt należy unikać albo czy
jeżdżenie nago na snowboardzie jest dobrym pomysłem, czy nie”. W jaki zatem sposób
możesz
przekonać swój mózg, by uznał, że poznanie JavaScriptu to dla Ciebie kwestia życia lub śmierci?
Dla kogo jest ta książka?
Wiemy, co sobie myślisz
Metapoznanie
Oto, co możesz zrobić, aby zmusić swój mózg do posłuszeństwa
Przeczytaj to
Zespół recenzentów
Podziękowania
20
21
23
25
26
28
29
5
Spis
treści
1
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
32
33
34
36
41
42
45
46
47
47
48
49
50
52
53
54
57
58
6
Spis
treści
2
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?
6 z nadzieniem
3 z lukrem
Odbierze Grzesiek za
20 minut
62
63
68
72
73
74
78
79
80
84
86
89
90
92
93
94
98
99
100
105
Donald odkrywa „szpiegostwo ciastkarskie”
Użyj metody getElementById(), by pobrać dane z formularza
Weryfikacja danych w formularzu
Staraj się, by interfejs użytkownika był intuicyjny
7
Spis
treści
3
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
Co przeglądarka może zrobić dla Ciebie?
iGłaz musi reagować bardziej wyraziście
Liczniki czasu kojarzą akcje z upływającym czasem
Przerywanie działania licznika
112
114
116
118
119
120
121
125
126
127
128
129
133
134
136
137
138
143
145
146
147
148
150
152
155
Tu zaczynamy!
Tworzenie licznika czasu przy użyciu funkcji setTimeout()
W zbliżeniu — funkcja setTimeout()
Wiele rozmiarów ekranu, wiele skarg
Użyj obiektu document, by określić szerokość okna przeglądarki
Skorzystaj z obiektu document, by odczytać szerokość okna klienta
Określanie wymiarów obrazka iGłazu
Wielkość iGłazu należy dostosować do strony
W momencie zmiany wielkości okna zgłaszane jest zdarzenie onresize
Zdarzenie onresize skaluje obrazek iGłazu
Czy myśmy się już spotkali? Rozpoznawanie użytkownika
Każdy skrypt ma swój cykl życiowy
Ciasteczka mogą istnieć dłużej niż cykl życia skryptu
Koniec!
Ciasteczka mają nazwę i przechowują wartość… poza tym mogą wygasnąć
Twój kod JavaScript może istnieć POZA Twoją stroną WWW
Przywitaj użytkownika ciasteczkiem
Teraz funkcja greetUser bazuje na ciasteczkach
Nie zapomnij o zapisaniu ciasteczka
Ciasteczka mają wpływ na bezpieczeństwo przeglądarek
Świat bez ciasteczek
Porozmawiaj z użytkownikiem, to lepsze niż nic…
8
Zgłoś jeśli naruszono regulamin