Head First JavaScript

Description

Dziś statyczne witryny WWW giną w ogromnej masie podobnych sobie stron, przy braku zainteresowania współczesnych użytkowników sieci. Aby się wyróżnić, trzeba zaproponować oglądającym coś innego niż tylko ładnie sformatowany tekst i schludną grafikę. Jednym z pomysłów na zwiększenie atrakcyjności witryny WWW jest wprowadzenie na nią elementów interaktywnych. Istnieje wiele rozwiązań służących do tworzenia takich elementów. Jednym z najczęściej wykorzystywanych jest JavaScript. Ten interpretowany po stronie przeglądarki język pozwala między innymi na kontrolowanie niemal wszystkich elementów HTML w oparciu o obiektowy model dokumentu (DOM), obsługę zdarzeń generowanych przez użytkownika i weryfikację poprawności danych wprowadzanych do formularza. Spis treści Wprowadzenie Dla kogo jest ta książka? Wiemy, co sobie myślisz Metapoznanie — myślenie o myśleniu Oto, co możesz zrobić, aby zmusić swój mózg do posłuszeństwa Przeczytaj to Zespół recenzentów Podziękowania Rozdział 1. W odpowiedzi na wirtualny świat Użytkownicy (WWW) mają swoje potrzeby To jakby rozmowa ze ścianą — całkowity brak reakcji A JavaScript odpowiada Światła, kamera, akcja! Użyj znacznika , 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 Rozdział 2. Wszystko ma swoje miejsce 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 Staraj się, by interfejs użytkownika był intuicyjny Rozdział 3. W głąb przeglądarki 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 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 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… Rozdział 4. Jeśli droga się rozwidla, nie wahaj się skręcić Szczęśliwy uczestniku, prosimy na scenę! „Jeśli” to prawda, to coś zrób Instrukcja if przetwarza warunek, a następnie wykonuje operację Użyj instrukcji if, by wybrać jedną z dwóch opcji Instrukcja if pozwala wybierać spośród wielu opcji Dodawanie klauzuli else do instrukcji if Przebiegiem zdarzeń sterują zmienne Brakuje jednak części historii Składanie operacji w JavaScripcie Męczy Cię podejmowanie decyzji przy użyciu instrukcji if/else? Instrukcję if można umieścić wewnątrz innej instrukcji if Twoje funkcje kontrolują działanie stron Pseudokod pozwala naszkicować ogólny obraz przygody Nierówność kreskowego ludzika != Ech, nie mam ci nic do powiedzenia… Podejmowanie decyzji z wykorzystaniem operatorów porównania Komentarze, puste miejsca i dokumentacja Komentarze w JavaScripcie zaczynają się od znaków // Zakres i kontekst — gdzie „żyją” dane Sprawdź, gdzie są rozmieszczone zmienne w naszej przygodzie Gdzie żyją moje dane? Jedna z pięciu Zagnieżdżanie instrukcji if/else może się stać skomplikowane Instrukcje switch udostępniają wiele opcji Poznajemy szczegóły instrukcji switch Testowanie nowej wersji Przygody kreskowego ludzika Rozdział 5. Ryzykując powtórzeniem „X” wskazuje miejsce Cały czas déja vu — pętle for Poszukiwanie skarbów z pętlą for Anatomia pętli for Mandango — wyszukiwarka miejsc dla prawdziwych macho Najpierw sprawdzamy dostępność miejsc Pętle, HTML i dostępność miejsc Fotele są zmiennymi Tablice gromadzą wiele danych Wartości tablicy są zapisywane wraz z kluczami Od JavaScriptu do HTML-a Wizualizacja miejsc na stronie Mandango Niezupełnie trywialne wyszukiwanie miejsc Test: odnajdywanie pojedynczych wolnych miejsc Co za dużo, to niezdrowo — pętle nieskończone Pętle zawsze muszą mieć warunek zakończenia (albo nawet dwa!) Przerwa w działaniu Odkrywamy operatory logiczne Powtórzenia do skutku… dopóki warunek jest spełniony Analiza pętli while Zastosowanie odpowiedniej pętli do konkretnego zadania Modelowanie danych reprezentujących miejsca w kinie Tablica tablic — tablice dwuwymiarowe Dwa klucze zapewniają dostęp do tablicy dwuwymiarowej Dwuwymiarowe Mandango Cała sala miejsc dla prawdziwych macho Rozdział 6. Redukuj i używaj wielokrotnie Matka wszystkich problemów Funkcje jako narzędzia do rozwiązywania problemów Tworzenie funkcji w praktyce Funkcje, które już poznałeś Lepsza klimatyzacja dzięki większej ilości danych Przekazywanie informacji do funkcji Argumenty funkcji jako dane Funkcje eliminują powtarzający się kod Tworzenie funkcji określającej status miejsc Funkcja setSeat() jeszcze bardziej poprawia kod aplikacji Mandango Znaczenie informacji zwrotnych Zwracanie danych z funkcji Wiele szczęśliwych wartości wynikowych Odczyt statusu miejsca Prezentacja statusu miejsca Możemy połączyć funkcję z obrazkiem Powielanie kodu nigdy nie jest dobre Separacja funkcjonalności od zawartości Funkcje są zwykłymi danymi Wywołania i odwołania do funkcji Zdarzenia, funkcje zwrotne i atrybuty HTML Określanie procedur obsługi zdarzeń przy użyciu odwołań do funkcji Literały funkcyjne spieszą z odsieczą Czym jest kojarzenie? Struktura strony HTML Rozdział 7. Aby użytkownik powiedział nam wszystko Formularz rejestracyjny Banerolotu Kiedy HTML nie wystarcza Dostęp do danych formularzy Weryfikacja danych podąża za ciągiem zdarzeń Zdarzenia onblur — tracimy ostrość Możesz używać okienka informacyjnego do wyświetlania komunikatów o błędach Weryfikacja pól w celu sprawdzenia, czy mamy coś więcej niż „nic” Weryfikacja bez wkurzających okienek dialogowych Subtelniejsze metody weryfikacji danych Wielkość ma znaczenie… Weryfikacja długości danych Weryfikacja kodu pocztowego Weryfikacja daty Niezwykłe wyrażenia regularne Wyrażenia regularne definiują poszukiwane wzorce Metaznaki reprezentują więcej niż jeden znak Tajniki wyrażeń regularnych — kwantyfikatory Weryfikacja danych przy użyciu wyrażeń regularnych Dopasowywanie określonej liczby powtórzeń Eliminacja trzycyfrowego roku przy użyciu tego… lub tamtego… Niczego nie zostawiajmy przypadkowi Czy teraz mnie słyszysz? Weryfikacja numeru telefonu Masz wiadomość — weryfikacja adresów e-mail Wyjątek jest regułą Dopasowywanie opcjonalnych znaków ze zbioru Tworzenie funkcji weryfikującej adres e-mail Rozdział 8. Krojenie i przyprawianie HTML-a przy użyciu DOM Funkcjonalny, lecz niezgrabny — interfejs użytkownika ma znaczenie Opisy scen bez okienek dialogowych Dostęp do elementów HTML Bliższe spotkanie z wewnętrznym HTML-em Aby zobaczyć lasy i drzewa — obiektowy model dokumentu (DOM) Twoja strona jest kolekcją węzłów DOM Poruszanie się po drzewie DOM przy użyciu właściwości Modyfikowanie węzła tekstowego przy wykorzystaniu DOM Przygoda standaryzowana Projektujemy większe i lepsze opcje Rozważania nad zastępowaniem węzłów tekstowych Funkcja zastępująca tekst w węźle Dynamiczne opcje nawigacyjne to świetna rzecz Interaktywne opcje decyzyjne są jeszcze lepsze Kwestia stylu: CSS i DOM Podmienianie stylów Klasowe opcje Test stylizowanych opcji decyzyjnych Problemy z opcjami — pusty przycisk Modyfikacja stylów wedle zamówienia Żadnych niepotrzebnych opcji Więcej opcji, większa złożoność Śledzenie drzewa decyzyjnego Przekształć historię swoich decyzji na kod HTML Produkcja kodu HTML Śledzenie przebiegu przygody Rozdział 9. Obiekty jako Frankendane JavaScriptowa impreza Dane + akcje = obiekt Obiekt jest właścicielem danych W odwołaniach do składowych obiektów używamy kropki Niestandardowe obiekty rozszerzają język JavaScript Tworzenie własnego niestandardowego obiektu Co jest w konstruktorze? Powołujemy do życia obiekty blogu Potrzeba sortowania Obiekt daty w JavaScripcie Wyliczanie czasu Ponowna analiza zagadnienia dat w blogu Obiekt w obiekcie Konwersja obiektów na łańcuchy znaków Pobieranie konkretnych informacji o dacie Tablice jak obiekty Sortowanie tablic wedle własnych potrzeb Łatwiejsze sortowanie dzięki literałom funkcyjnym Przeszukiwanie wpisów w blogu Przeszukiwanie zawartości łańcucha znaków indexOf() Przeszukiwanie tablicy blogu Teraz działa także wyszukiwanie! Obiekt Math jest obiektem organizacyjnym Generowanie liczb losowych przy użyciu metody Math.random() Zamiana funkcji na metodę Przedstawiamy piękny nowy obiekt Blog Jakie są korzyści użycia obiektów na stronie MagicznaKostka? Rozdział 10. Zrób to po swojemu, używając własnych obiektów Ponowna analiza metod obiektu Blog Przeciążanie metod Klasy i instancje Instancje są tworzone na podstawie klasy Słowo kluczowe this zapewnia dostęp do właściwości obiektów Należą do jednej, działają we wszystkich — metody należące do klasy Korzystaj z prototypu, by operować na poziomie klasy Klasy, prototypy i MagicznaKostka Także właściwości klasowe są współdzielone Tworzenie właściwości klasowych przy użyciu prototypu Podpisane i dostarczone Metoda formatująca daty Rozszerzanie standardowych obiektów Zmodyfikowany obiekt daty = lepsza strona Reni Klasa może mieć swoją własną metodę Analiza funkcji porównującej wpisy Wywoływanie metody klasowej Jeden obraz jest wart tysiąca słów w blogu Dodawanie obrazków do blogu Dodawanie obrazków do strony MagicznaKostka Obiektowa strona blogu Rozdział 11. Dobre skrypty na złej drodze Debugowanie w praktyce Przypadek wadliwego kalkulatora IQ Wypróbuj kod w różnych przeglądarkach Proste sposoby usuwania błędów Dzikie niezdefiniowane zmienne Przetwarzając wartości IQ Przypadek błędów w połączeniach z radiem Otwieranie dochodzenia Problem weryfikacji błędów składniowych (pluskwa nr 1) Uwaga na te łańcuchy znaków Cudzysłowy, apostrofy i konsekwencja Kiedy apostrof nie jest apostrofem, użyj odwrotnego ukośnika Nie tylko zmienne mogą być niezdefiniowane (pluskwa nr 2) Każdy jest zwycięzcą (pluskwa nr 3) Testowanie przy użyciu okienka dialogowego Obserwowanie zmiennych przy użyciu okienek dialogowych Zła logika może być przyczyną błędów Nikt nie wygrywa! (pluskwa nr 4) Przytłoczony ilością denerwujących okienek dialogowych Tworzymy własną konsolę do testowania skryptów Błędy najgorsze ze wszystkich: błędy czasu wykonywania programu Bestiariusz JavaScriptu Komentarze jako chwilowe wyłączniki kodu Niebezpieczeństwa związane ze zmiennymi-cieniami Rozdział 12. Szybkie i wrażliwe aplikacje internetowe Pożądając dynamicznych danych MagicznaKostka sterowana danymi Ajax oznacza komunikację XML — HTML na każdą okazję XML + HTML = XHTML XML i dane blogu Reni Ajax wzmacnia stronę MagicznaKostka XMLHttpRequest — JavaScript spieszy z pomocą GET czy POST? Użycie obiektu XMLHttpRequest Aby zrozumieć ajaksowe żądania Interaktywne strony zaczynają się od obiektu żądania Zawołaj mnie, kiedy skończysz Obsługa żądania… bezproblemowa DOM spieszy z pomocą Teraz strona MagicznaKostka jest w pełni zależna od swoich danych Niedziałające przyciski Przyciski potrzebują danych Usprawnienia oszczędzające czas blogera Zapisywanie danych blogu Także PHP ma swoje potrzeby Przekazywanie danych do skryptu PHP Do rzeczy — przesyłanie danych wpisu na serwer Ułatwienie korzystania ze strony blogu W ramach ułatwienia automatycznie wypełniaj pola formularzy Wielokrotnie wykonywane zadanie? Może by tak jakaś funkcja pomogła? Skorowidz