JavaScript i jQuery. Nieoficjalny podręcznik. Wydanie I

Buduj zaawansowane i interaktywne strony WWW! JavaScript ma za sobą długą historię, w której bywały okresy lepsze i gorsze. Czasem język ten był wręcz masowo blokowany w przeglądarkach. Jednak te czasy minęły. W tej chwili nie obejdzie się bez niego żadna poważna aplikacja internetowa lub choć trochę bardziej zaawansowana strona WWW. Użytkownicy serwisów internetowych wymuszają na projektantach coraz nowsze i lepsze rozwiązania. Dlatego na rynku wciąż pojawiają się dodatkowe narzędzia dla języka JavaScript, które ułatwiają wykorzystanie jego potencjału. Najpopularniejszym dodatkiem tego typu jest biblioteka jQuery. Genialna w swojej prostocie, z ogromnymi możliwościami, zdobyła uznanie wszystkich programistów JavaScriptu. Nie potrafią sobie oni wyobrazić programowania bez jej wykorzystania. W tej książce znajdziesz najlepsze techniki, jakie oferuje JavaScript. Nauczysz się nawigować po drzewie DOM, modyfikować zachowanie elementów oraz obsługiwać zdarzenia. Poznasz również narzędzia, które ułatwią Ci pracę oraz debugowanie kodu. Jest to obowiązkowa pozycja dla każdego projektanta stron internetowych. Musisz ją mieć! Dzięki tej książce: poznasz podstawy języka JavaScript zobaczysz, jak jQuery potrafi ułatwić pracę z JavaScriptem opanujesz mechanizm zdarzeń w jQuery zbudujesz lepszą i ciekawszą witrynę! Twórz atrakcyjne strony WWW. Wzbogać kod HTML o animacje, interaktywność i dynamiczne efekty wizualne! Wybrane bestsellery Spis treści Nieoficjalna czołówka O autorze O zespole pracującym nad książką Podziękowania Seria Nieoficjalny podręcznik Wprowadzenie Czym jest JavaScript? Trochę historii JavaScript jest wszędzie Czym jest jQuery? HTML: podstawowa struktura Działanie znaczników HTML CSS: dodawanie stylu do stron Anatomia stylu Narzędzia do programowania w języku JavaScript Programy bezpłatne Oprogramowanie komercyjne O książce Podejście do języka JavaScript stosowane w tej książce Struktura książki Podstawy O/tych/ukośnikach Zasoby internetowe Przykłady do pobrania Opinie i uwagi Errata Część I. Wprowadzenie do języka JavaScript Rozdział 1. Pierwszy program w języku JavaScript Wprowadzenie do programowania Czym jest program komputerowy? Jak dodać kod JavaScript do strony? Zewnętrzne pliki JavaScript Pierwszy program w języku JavaScript Dodawanie tekstu do stron Dołączanie zewnętrznych plików JavaScript Wykrywanie błędów Konsola JavaScript w przeglądarce Firefox Wyświetlanie okna dialogowego błędów w Internet Explorerze 9 Konsola błędów w przeglądarce Chrome Konsola błędów w przeglądarce Safari Rozdział 2. Gramatyka języka JavaScript Instrukcje Wbudowane funkcje Typy danych Liczby Łańcuchy znaków Wartości logiczne Zmienne Tworzenie zmiennych Używanie zmiennych Używanie typów danych i zmiennych Podstawowe operacje matematyczne Kolejność wykonywania operacji Łączenie łańcuchów znaków Łączenie liczb i łańcuchów znaków Zmienianie wartości zmiennych Przykład — używanie zmiennych do tworzenia komunikatów Przykład — pobieranie informacji Tablice Tworzenie tablic Używanie elementów tablicy Dodawanie elementów do tablicy Usuwanie elementów z tablicy Przykład — zapisywanie danych na stronie za pomocą tablic Krótka lekcja o obiektach Komentarze Kiedy używać komentarzy? Komentarze w tej książce Rozdział 3. Dodawanie struktur logicznych i sterujących Programy reagujące inteligentnie Podstawy instrukcji warunkowych Uwzględnianie planu awaryjnego Sprawdzanie kilku warunków Bardziej skomplikowane warunki Zagnieżdżanie instrukcji warunkowych Wskazówki na temat pisania instrukcji warunkowych Przykład — używanie instrukcji warunkowych Obsługa powtarzających się zadań za pomocą pętli Pętle while Pętle i tablice Pętle for Pętle do-while Funkcje — wielokrotne korzystanie z przydatnego kodu Krótki przykład Przekazywanie danych do funkcji Pobieranie informacji z funkcji Unikanie konfliktów między nazwami zmiennych Przykład — prosty quiz Część II. Wprowadzenie do biblioteki jQuery Rozdział 4. Wprowadzenie do jQuery Kilka słów o bibliotekach JavaScript Jak zdobyć jQuery? Dodawanie jQuery do strony Podstawowe informacje o modyfikowaniu stron WWW Zrozumieć DOM Pobieranie elementów stron na sposób jQuery Proste selektory Selektory zaawansowane Filtry jQuery Zrozumienie kolekcji jQuery Dodawanie treści do stron Zastępowanie i usuwanie wybranych elementów Ustawianie i odczyt atrybutów znaczników Klasy Odczyt i modyfikacja właściwości CSS Jednoczesna zmiana wielu właściwości CSS Odczyt, ustawienia i usuwanie atrybutów HTML Wykonanie akcji na każdym elemencie kolekcji Funkcje anonimowe this oraz $(this) Automatycznie tworzone, wyróżniane cytaty Opis rozwiązania Kod rozwiązania Rozdział 5. Akcja i reakcja — ożywianie stron za pomocą zdarzeń Czym są zdarzenia? Zdarzenia związane z myszą Zdarzenia związane z dokumentem i oknem Zdarzenia związane z formularzami Zdarzenia związane z klawiaturą Obsługa zdarzeń przy użyciu jQuery Przykład — wyróżnianie wierszy tabeli Zdarzenia specyficzne dla biblioteki jQuery Oczekiwanie na wczytanie kodu HTML Zdarzenia biblioteki jQuery Obiekt reprezentujący zdarzenie Blokowanie standardowych reakcji na zdarzenia Usuwanie zdarzeń Zaawansowane zarządzanie zdarzeniami Inne sposoby stosowania funkcji bind() Przykład — jednostronicowa lista FAQ Omówienie zadania Tworzenie kodu Rozdział 6. Animacje i efekty Efekty biblioteki jQuery Podstawowe wyświetlanie i ukrywanie Wygaszanie oraz rozjaśnianie elementów Przesuwanie elementów Przykład: wysuwany formularz logowania Tworzenie kodu Animacje Tempo animacji Wykonywanie operacji po zakończeniu efektu Przykład: animowany pasek ze zdjęciami Tworzenie kodu Część III. Dodawanie mechanizmów do stron WWW Rozdział 7. Efekty związane z rysunkami Zamiana rysunków Zmienianie atrybutu src rysunków Wstępne wczytywanie rysunków Efekt rollover z użyciem rysunków Przykład — dodawanie efektu rollover z użyciem rysunków Omówienie zadania Tworzenie kodu Przykład — galeria fotografii z efektami wizualnymi Omówienie zadania Tworzenie kodu Wzbogacona galeria z wtyczką FancyBox biblioteki jQuery Podstawy Tworzenie galerii zdjęć Personalizacja efektu FancyBox Przykład — galeria fotografii oparta na wtyczce FancyBox Rozdział 8. Usprawnianie nawigacji Podstawowe informacje o odnośnikach Pobieranie odnośników w kodzie JavaScript Określanie lokalizacji docelowej Blokowanie domyślnego działania odnośników Otwieranie zewnętrznych odnośników w nowym oknie Tworzenie nowych okien Właściwości okien Otwieranie stron w okienku na pierwotnej stronie Przykład — otwieranie strony na stronie Animowane menu nawigacyjne Kod HTML Kod CSS Kod JavaScript Przykład Rozdział 9. Wzbogacanie formularzy Wprowadzenie do formularzy Pobieranie elementów formularzy Pobieranie i ustawianie wartości elementów formularzy Sprawdzanie stanu przycisków opcji i pól wyboru Zdarzenia związane z formularzami Inteligentne formularze Aktywowanie pierwszego pola formularza Wyłączanie i włączanie pól Ukrywanie i wyświetlanie opcji formularza Przykład — proste wzbogacanie formularza Aktywowanie pola Wyłączanie pól formularza Ukrywanie pól formularza Walidacja formularzy Wtyczka Validation Podstawowa walidacja Zaawansowana walidacja Określanie stylu komunikatów o błędach Przykład zastosowania walidacji Prosta walidacja Walidacja zaawansowana Walidacja pól wyboru i przycisków opcji Formatowanie komunikatów o błędach Rozdział 10. Rozbudowa interfejsu stron WWW Organizowanie informacji przy użyciu kart Kod HTML Kod CSS Kod JavaScript Przykład — panel kart Dodawanie sliderów Stosowanie slidera AnythingSlider Przykład — AnythingSlider Modyfikowanie wyglądu slidera Modyfikacja działania slidera Określanie wielkości i położenia elementów strony Określanie wysokości i szerokości elementów Określanie położenia elementu na stronie Uwzględnianie przewinięcia strony Dodawanie etykietek ekranowych Kod HTML Kod CSS Kod JavaScript Przykład — etykiety ekranowe Część IV. AJAX — komunikacja z serwerem sieciowym Rozdział 11. Wprowadzenie do AJAX-a Czym jest AJAX? AJAX — podstawy Elementy układanki Komunikacja z serwerem sieciowym AJAX w bibliotece jQuery Używanie funkcji load() Przykład — korzystanie z funkcji load() Funkcje get() i post() Formatowanie danych przesyłanych na serwer Przetwarzanie danych zwróconych z serwera Obsługa błędów Przykład — korzystanie z funkcji get() Format JSON Dostęp do danych z obiektów JSON Złożone obiekty JSON Rozdział 12. Flickr oraz Google Maps Prezentacja JSONP Dodawanie do witryny kanału Flickr Tworzenie adresu URL Stosowanie funkcji $.getJSON() Prezentacja danych kanału Flickr w formacie JSON Przykład — dodawanie zdjęć z Flickr na własnej stronie Wyświetlanie na własnej stronie map Google Maps Określanie lokalizacji na mapie Inne opcje wtyczki GoMap Dodawanie znaczników Dodawanie okienek informacyjnych do znaczników Przykład zastosowania wtyczki GoMap Część V. Rozwiązywanie problemów, wskazówki i sztuczki Rozdział 13. Wykorzystywanie wszystkich możliwości jQuery Przydatne informacje i sztuczki związane z jQuery $() to to samo, co jQuery() Zapisywanie pobranych elementów w zmiennych Jak najrzadsze dodawanie treści Optymalizacja selektorów Korzystanie z dokumentacji jQuery Czytanie dokumentacji na stronie jQuery Poruszanie się po DOM Inne funkcje do manipulacji kodem HTML Zaawansowana obsługa zdarzeń Rozdział 14. Zaawansowane techniki języka JavaScript Stosowanie łańcuchów znaków Określanie długości łańcucha Zmiana wielkości znaków w łańcuchu Przeszukiwanie łańcuchów znaków: zastosowanie indexOf() Pobieranie fragmentu łańcucha przy użyciu metody slice() Odnajdywanie wzorów w łańcuchach Tworzenie i stosowanie podstawowych wyrażeń regularnych Tworzenie wyrażeń regularnych Grupowanie fragmentów wzorców Przydatne wyrażenia regularne Dopasowywanie wzorców Zastępowanie tekstów Testowanie wyrażeń regularnych Stosowanie liczb Zamiana łańcucha znaków na liczbę Sprawdzanie występowania liczb Zaokrąglanie liczb Formatowanie wartości monetarnych Tworzenie liczb losowych Daty i godziny Pobieranie miesiąca Określanie dnia tygodnia Pobieranie czasu Tworzenie daty innej niż bieżąca Łączenie różnych elementów Używanie zewnętrznych plików JavaScript Tworzenie bardziej wydajnego kodu JavaScript Zapisywanie ustawień w zmiennych Operator trójargumentowy Instrukcja Switch Tworzenie kodu JavaScript o krótkim czasie wczytywania Rozdział 15. Diagnozowanie i rozwiązywanie problemów Najczęstsze błędy w kodzie JavaScript Brak symboli końcowych Cudzysłowy i apostrofy Używanie słów zarezerwowanych Pojedynczy znak równości w instrukcjach warunkowych Wielkość znaków Nieprawidłowe ścieżki do zewnętrznych plików JavaScript Nieprawidłowe ścieżki w zewnętrznych plikach JavaScript Znikające zmienne i funkcje Diagnozowanie przy użyciu dodatku Firebug Instalowanie i włączanie dodatku Firebug Przeglądanie błędów za pomocą dodatku Firebug Śledzenie działania skryptu za pomocą funkcji console.log() Przykład — korzystanie z konsoli dodatku Firebug Diagnozowanie zaawansowane Przykład diagnozowania Dodatek A. Materiały związane z językiem JavaScript Źródła informacji Witryny Książki Podstawy języka JavaScript Artykuły i prezentacje Witryny Książki jQuery Artykuły i prezentacje Witryny Książki AJAX Witryny Książki Zaawansowany język JavaScript Artykuły i prezentacje Witryny Książki CSS Witryny Książki Skorowidz Kolofon JavaScript lets you supercharge your web pages with animation, interactivity, and visual effects, but learning the language isn’t easy. This fully updated and expanded guide takes you step-by-step through JavaScript basics, then shows you how to save time and effort with jQuery—the library of prewritten JavaScript code—and the newest innovations from the jQuery UI plug-in.The important stuff you need to know:Make your pages come alive. Use jQuery to create interactive elements that respond to visitor input.Get acquainted with jQuery UI. Expand your interface with tabbed panels, dialog boxes, date pickers, and other widgets.Display good forms. Get information from visitors, help shoppers buy goods, and let members post their thoughts.Go beyond the browser with Ajax. Communicate with the web server to update your pages without reloading.Put your new skills right to work. Create a simple application step-by-step, using jQuery and jQuery UI widgets.Dive into advanced concepts. Use ThemeRoller to customize your widgets; avoid common errors that new programmers often make. JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects—but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code. You'll soon be building web pages that feel and act like desktop programs, without having to do much programming. The important stuff you need to know: Make your pages interactive. Create JavaScript events that react to visitor actions. Use animations and effects. Build drop-down navigation menus, pop-ups, automated slideshows, and more. Improve your user interface. Learn how the pros make websites fun and easy to use. Collect data with web forms. Create easy-to-use forms that ensure more accurate visitor responses. Add a dash of Ajax. Enable your web pages to communicate with a web server without a page reload. Practice with living examples. Get step-by-step tutorials for web projects you can build yourself. JavaScript lets you supercharge your web pages with animation, interactivity, and visual effects, but learning the language isnt easy. This fully updated and expanded guide takes you step-by-step through JavaScript basics, then shows you how to save time and effort with jQuerythe library of prewritten JavaScript codeand the newest innovations from the jQuery UI plug-in. The important stuff you need to know: JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects--but many web designers find the language hard to learn. THis jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code. You'll soon be building web pages that feel and act like desktop programs, without a lot of programming With lots of illustrations and code examples, this 'Missing Manual' teaches web designers with little programming experience how to use JavaScript to define a site's look and function, and offers experienced scripters advanced techniques for client-sided programming