Podręcznik jQuery. Interaktywne interfejsy internetowe. Smashing Magazine 978-83-246-3838-3 [PDF]

Zitiervorschau

---

PODZIĘKOWANIA WYDAWCY ORYGINAŁU Oto wybrane osoby, które przyczyniły się do powstania tej książki: Editorial and Production VP Consumer and Technology Publishing Director: Michelle Leete Associate Director— Book Content Management: Martin Tribe Associate Publisher: Chris Webb Publishing Assistant: Ellie Scott Development Editor: Linda Morris Technical Editors: Andrew Croxall, Dennis Cohen Copy Editor: Linda Morris Marketing Senior Marketing Manager: Louise Breinholt Marketing Executive: Kate Parrett Composition Services Compositor: Wiley Indianapolis Composition Services Proof Reader: Susan Hobbs Indexer: Potomac Indexing, LLC

Tytuł oryginału: Smashing jQuery Tłumaczenie: Piotr Pilch ISBN: 978-83-246-3838-3 Numer katalogowy: 7345 © 2011 Jake Rutter. All Rights Reserved. Authorised translation from the English language edition published by John Wiley & Sons Limited. Responsibility for the accuracy of the translation rests solely with Helion S.A. and is not the responsibility of John Wiley & Sons Limited. No part of this book may be reproduced in any form without the written permission of the original copyright holder, John Wiley & Sons Limited. Wiley and the Wiley Publishing logo are trademarks or registered trademarks of John Wiley and Sons, Inc. and/or its affiliates in the United States and/or other countries, and may not be used without written permission. iPhone, iPad, and iPod are trademarks of Apple Computer, Inc. All other trademarks are the property of their respective owners. Wiley Publishing, Inc. is not associated with any product or vendor mentioned in the book. This book is not endorsed by Apple Computer, Inc. Polish edition copyright © 2011 by Helion S.A. All rights reserved. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie?pjqiii_p Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland. • • •

Poleć książkę na Facebook.com Kup w wersji papierowej Oceń książkę

• •

Księgarnia internetowa Lubię to! » Nasza społeczność

O autorze

Jake Rutter to projektant interfejsów użytkownika i programista interfejsowy bardzo zainteresowany pisaniem kodu jQuery dla aplikacji witryn internetowych. Obecnie Jake jest starszym projektantem witryn internetowych i programistą w firmie Direct Wines, która prowadzi sprzedaż wina w sposób tradycyjny i za pośrednictwem internetu. W firmie tej Jake zarządza częścią interfejsową czterech witryn sklepów elektronicznych. Wyraża duży entuzjazm dla pracy z technologią internetową. Zawsze stara się nauczyć czegoś nowego z branży, która nieustannie się zmienia. W wolnym czasie Jake prowadzi blog (http://onerutter.com), na którym publikuje kursy dotyczące technologii jQuery, PHP, Magento, WordPress, CSS i HTML. Jake mieszka w stanie Connecticut ze swoją żoną i dwoma psami.

Podziękowania autora

Składam wiele wyrazów wdzięczności członkom mojego zespołu: Chrisowi Webbowi za umożliwienie mi napisania tej fantastycznej książki, Lindzie Morris, mojemu redaktorowi projektu, za poprawienie moich szkolnych błędów, a także Andrew Croxallowi i Dennisowi Cohenowi, moim redaktorom technicznym, za zapewnienie poprawności mojego kodu i objaśnień. Poza tym nie mogę zapomnieć podziękować mojej żonie za wsparcie i pomoc w czasie pisania książki. Bez niej nie byłbym w stanie poradzić sobie z tym wyzwaniem. Dziękuję moim rodzicom za to, że nauczyli mnie ciężkiej pracy, która naprawdę jest nagradzana, a także przygotowuje do podjęcia próby osiągnięcia czegoś, co uważało się za niemożliwe. Podziękowania dla moich obecnych i poprzednich pracodawców za umożliwienie mi pracy z projektami open source, takimi jak w przypadku biblioteki jQuery, które pozwalają przesunąć granice technologii internetowych. I, co najważniejsze, ogromne wyrazy wdzięczności dla Johna Resiga, zespołu odpowiedzialnego za bibliotekę jQuery i społeczności z nią związanej za stworzenie niezwykłej biblioteki, która dała mi znakomite możliwości rozwoju zawodowego i pozwoliła pisać wyjątkowe aplikacje internetowe przy użyciu mniejszej ilości kodu.

Spis treści

CZĘŚĆ I Rozdział 1

BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

15

Biblioteka jQuery — wprowadzenie Poznawanie bibliotek języka JavaScript

17 18

Korzyści wynikające z użycia biblioteki języka JavaScript w porównaniu z podejściem tradycyjnym Główni gracze w branży bibliotek Korzyści oferowane przez bibliotekę jQuery

Rozdział 2

Biblioteka jQuery — pierwsze kroki Konfigurowanie środowiska programistycznego Zastosowanie rozszerzenia Firebug w przeglądarce Firefox

Pobieranie biblioteki jQuery Dołączanie biblioteki jQuery do strony internetowej Opakowanie biblioteki jQuery Uruchamianie kodu poza programem obsługi zdarzenia document.ready() Zapobieganie konfliktom z innymi bibliotekami Użycie kodu JavaScript razem z biblioteką jQuery

CZĘŚĆ II BIBLIOTEKA JQUERY — PODSTAWY Rozdział 3

18 19 22

31 32 33

39 42 44 46 47 47

49

Używanie selektorów, filtrów i stylów CSS: fundamenty biblioteki jQuery 51 Praca z elementami modelu DOM przy użyciu selektorów jQuery 52 Wybieranie elementów strony przy użyciu selektorów CSS

Filtrowanie elementów modelu DOM przy użyciu filtrów selektorów jQuery Zastosowanie definicji filtrów podstawowych Tworzenie tabel z naprzemiennie rozjaśnianymi wierszami przy użyciu filtrów even i odd Użycie stylu dla pierwszej i ostatniej pozycji listy lub kolekcji elementów Filtrowanie elementów zawierających konkretny element Filtrowanie elementów, które nie zawierają żadnego elementu ani tekstu Filtrowanie elementów zawierających tekst

Wybieranie elementów w modelu DOM według ich atrybutów Wybieranie odnośników zawierających adres konkretnej witryny internetowej Wybieranie wszystkich elementów zakończonych konkretnym słowem Modyfikowanie kodu HTML i CSS przy użyciu biblioteki jQuery Dodawanie, usuwanie, klonowanie i zastępowanie elementów i treści modelu DOM Praca ze stylami CSS i biblioteką jQuery

53

65 66 67 68 70 71 72

74 74 76 77 77 82

SPIS TREŚCI Rozdział 4

Praca ze zdarzeniami Zdarzenia biblioteki jQuery Praca ze zdarzeniami dokumentów i okien Wykrywanie całkowitego załadowania modelu DOM przy użyciu zdarzenia ready() Wstępne ładowanie obrazów przy użyciu zdarzenia load() Wyświetlanie alertu w momencie opuszczania strony przez użytkownika Wyświetlanie pomocniczego obrazu przy użyciu zdarzenia błędu

Delegowanie zdarzeń — wprowadzenie Użycie metody bind do dowiązania programu obsługi zdarzenia do elementu Użycie metody live do dowiązania programu obsługi zdarzenia do elementu Użycie metody delegate do dowiązania programu obsługi zdarzenia do elementu

Przechwytywanie zdarzeń myszy Dodawanie treści do strony i usuwanie jej przez kliknięcie przycisku myszy Działanie zdarzenia double-click Tworzenie podpowiedzi wyświetlającej treść po wystąpieniu zdarzenia hover Tworzenie podstawowej funkcji dodawania do koszyka przy użyciu zdarzeń mousedown i mouseup Tworzenie efektu podmieniania dla przycisku z obrazami

Przechwytywanie zdarzeń formularza Dodawanie ramki do pola formularza w momencie aktywowania tego pola przez użytkownika Wyświetlanie komunikatu po opuszczeniu przez użytkownika pola danych wejściowych

8 Rozdział 5

85 86 87 87 88 90 92

92 93 95 96

97 97 100 101 106 109

111 112 112

Przechwytywanie zdarzeń klawiatury

113

Ożywianie witryny internetowej przy użyciu efektów Poznawanie możliwości efektów jQuery Użycie efektów pokazywania i ukrywania

117 118 119

Konfigurowanie komunikatu wyświetlanego jednokrotnie w witrynie przy użyciu metody show i informacji cookie Przełączanie się między efektami show i hide

121 124

Przesuwanie elementów w górę i w dół Wyświetlanie alternatywnych opcji wyszukiwania przy użyciu metody slideToggle Znikanie elementów Tworzenie prostej galerii obrazów przy użyciu przejścia z efektem znikania Zastosowanie opóźnienia w celu utworzenia zsynchronizowanej animacji Łańcuchowe łączenie wielu efektów Tworzenie paska kanału informacyjnego przy użyciu wielu efektów Tworzenie zaawansowanych animacji

125 126 128 129 133 135 136 140

Tworzenie galerii obrazów z nagłówkami tekstowymi przy użyciu zaawansowanych animacji Dodatkowe efekty przenikania oferowane przez dodatek Easing biblioteki jQuery

140 149

SPIS TREŚCI CZĘŚĆ III ZASTOSOWANIE BIBLIOTEKI JQUERY W WITRYNIE INTERNETOWEJ Rozdział 6

Usprawnianie nawigacji: menu, karty i harmonijki Ustawianie wszystkich odnośników na stronie w celu otwierania nowego okna Ustawianie aktywnej pozycji w menu nawigacyjnym Tworzenie prostego menu rozwijanego Dodawanie zaawansowanych efektów do podstawowego menu rozwijanego za pomocą metody animate

Rozdział 7

153 154 155 157 163

Tworzenie menu harmonijkowego Tworzenie treści z kartami

165 172

Tworzenie interaktywnych i ekscytujących tabel Określanie stylów dla danych w tabelach przy użyciu kodu CSS

181 182

Dodawanie naprzemiennego kolorowania wierszy przy użyciu filtrów Użycie dla wierszy prostego efektu hover Użycie dla wierszy zaawansowanego efektu hover

Przetwarzanie danych w tabelach Dodawanie komunikatu po pierwszym/ostatnim wierszu tabeli Usuwanie wiersza przy użyciu selektora filtru Dodawanie wiersza po wierszu na podstawie jego wartości indeksu Usuwanie wiersza na podstawie jego wartości indeksu Dodawanie komunikatu po wierszach z określoną treścią Usuwanie wiersza na podstawie jego treści

Konfigurowanie paginacji tabeli przy użyciu biblioteki jQuery Tworzenie zaawansowanych tabel przy użyciu dodatków biblioteki jQuery Sortowanie wierszy przy użyciu dodatku tablesorter Zmiana domyślnej kolejności sortowania Tworzenie atrakcyjnych wykresów z danymi tabelarycznymi przy użyciu dodatku Visualize Tworzenie wykresu słupkowego

Rozdział 8

151

Tworzenie zaawansowanych formularzy przy użyciu biblioteki jQuery Aktywowanie pola danych wejściowych po załadowaniu strony Wyłączanie i włączanie elementów formularza Wyróżnianie bieżących pól formularza Określanie tekstu domyślnego pól danych wejściowych Ograniczanie liczby znaków w polach danych wejściowych Tworzenie odnośnika pola wyboru Zaznacz wszystkie Uzyskiwanie wartości pola danych wejściowych Pobieranie wartości opcji wyboru Dodawanie do formularza prostego mechanizmu sprawdzania poprawności adresu e-mail Kopiowanie zawartości jednego pola do drugiego

183 185 186

187 189 191 192 192 192 193

194 200 200 203 204 205

209 210 211 212 214 217 219 221 223 224 229

9

SPIS TREŚCI Rozszerzanie formularzy przy użyciu dodatków Zastosowanie dodatku qTip w witrynie internetowej Tworzenie prostego pola formularza dodatku qTip przy użyciu atrybutu title Użycie dodatku Validate biblioteki jQuery do sprawdzania poprawności formularzy Użycie prostego sprawdzania poprawności dla formularza kontaktowego Dodawanie zaawansowanych reguł sprawdzania poprawności i komunikatów do formularza kontaktowego

232 233 234 235 236 240

CZĘŚĆ IV POZNAWANIE ZAAWANSOWANYCH MOŻLIWOŚCI BIBLIOTEKI JQUERY 245 Rozdział 9

Praca z danymi dynamicznymi i technologią Ajax Poznawanie technologii Ajax Ładowanie treści dynamicznej strony internetowej

247 248 250

Ładowanie całej treści Obsługa błędów w przypadku braku ładowanej treści Ładowanie sekcji treści

250 252 254

Wysyłanie formularzy przy użyciu żądań GET i POST

256

Użycie żądania POST do wysyłania formularzy kontaktowych bez ponownego ładowania strony

10

Praca z danymi XML Analiza składniowa wewnętrznych danych XML i tworzenie kodu HTML Praca z danymi JSON Pobieranie wewnętrznych danych JSON i tworzenie kodu HTML Tworzenie widżetu użytkownika w witrynie Delicious z zastosowaniem odbierania danych JSONP z żądań API Tworzenie widżetu najważniejszych przeglądów witryny Yelp przy użyciu kodu JSONP za pośrednictwem interfejsu API witryny Yelp Proces uzyskiwania klucza interfejsu API witryny Yelp Użycie interfejsu API witryny Yelp do wyświetlania przeglądów na podstawie numerów telefonów

258

262 264 267 269 271 278 279 282

Rozdział 10 Tworzenie i używanie dodatków biblioteki jQuery Czym są dodatki? Zastosowanie dodatku biblioteki jQuery we własnej witrynie internetowej Zastosowanie biblioteki jQuery UI we własnej witrynie internetowej

289 290 291 292

Pobieranie biblioteki jQuery UI Dodawanie biblioteki jQuery UI do własnej witryny Zasady działania widżetów biblioteki jQuery UI Dostosowywanie projektu biblioteki jQuery UI Tworzenie kompozycji interfejsu użytkownika za pomocą aplikacji ThemeRoller Korzystanie z kompozycji biblioteki jQuery UI Uwzględnienie funkcji biblioteki jQuery UI we własnej witrynie internetowej

293 293 294 295 297 299 300

SPIS TREŚCI Wykorzystanie popularnych dodatków biblioteki jQuery we własnej witrynie internetowej Używanie biblioteki jQuery Tools Fancybox

Tworzenie pierwszego własnego dodatku biblioteki jQuery Przygotowywanie planu dodatku Struktura dodatku Ustawianie opcji dodatku Tworzenie dodatku

Dystrybuowanie dodatku biblioteki jQuery Przygotowanie pakietu dodatku biblioteki jQuery do dystrybucji Zamieszczanie dodatku w witrynach internetowych

308 309 313

315 316 316 317 318

324 325 325

Rozdział 11 Programowanie przy użyciu biblioteki jQuery dla mobilnych aplikacji internetowych Tworzenie mobilnej aplikacji internetowej przy użyciu biblioteki jQuery Przeglądarki mobilne

327 328 329

CSS3 HTML5 Przygotowanie się do rozpoczęcia projektowania mobilnej aplikacji internetowej Korzystanie z mobilnej przeglądarki Apple iPhone Safari Korzystanie z przeglądarki Google Android Wyświetlanie treści na podstawie tego, z jakiego smartfonu korzysta użytkownik Tworzenie mobilnych witryn i aplikacji internetowych za pomocą biblioteki jQuery

330 331 332 333 334 336 337

Ogólny przegląd dodatku jQuery Mobile Mobilne struktury programistyczne Korzystanie ze struktury Appcelerator Titanium Mobile Korzystanie z dodatku jQTouch

Rozdział 12 Wyszukiwanie zasobów dotyczących biblioteki jQuery Obserwowany wzrost popularności biblioteki jQuery Korzystanie z witryny internetowej biblioteki jQuery Praca z dokumentacją interfejsu API Znajdowanie kursów dotyczących biblioteki jQuery Udział w spotkaniu lub konferencji dotyczącej biblioteki jQuery Umieszczanie błędów w sekcji Bug Tracker Uczestniczenie w forum poświęconym bibliotece jQuery

Inne zasoby dotyczące projektowania i programowania witryn internetowych Skorowidz

337 337 338 339

341 342 343 344 345 345 348 348

349 351

11

SPIS TREŚCI

12

Wprowadzenie

Ponieważ biblioteka jQuery stała się częścią mojej pracy związanej z projektowaniem i programowaniem witryn internetowych, gdy wydawnictwo Wiley zaproponowało mi napisanie o niej książki, byłem zachwycony. Biblioteka jQuery otwarła świat możliwości w projektowaniu witryn. Mam nadzieję, że w książce uda mi się zaprezentować innym, jak korzystanie z tej biblioteki może naprawdę skrócić czas programowania i umożliwić tworzenie komponentów interaktywnych, które można by uznać za niemożliwe do uzyskania bez poważnej wiedzy z zakresu programowania. Potraktuj tę książkę jako wprowadzenie i zestaw procedur z przykładami zastosowania biblioteki jQuery w rzeczywistych rozwiązaniach, które możesz wykorzystać w środowisku roboczym używanym na co dzień. Książkę podzielono na cztery części wyszczególnione poniżej.

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE Pierwsza część książki wprowadza w świat biblioteki jQuery z perspektywy początkującego użytkownika. W części tej omówiono biblioteki języka JavaScript i wyjaśniono, jak biblioteka jQuery stała się ważnym elementem standardowego zestawu narzędzi każdego projektanta i programisty witryn internetowych. Szczegółowo przedstawiono korzyści wynikające z jej użycia. Pozwala to w pełni zrozumieć, dlaczego biblioteka ta stała się tak popularna. Zwracam również uwagę na istotną rolę strategii progresywnego rozszerzania. Po przedstawieniu powodów, dla których biblioteka jQuery powinna być stosowana, od razu omówię dokładnie sposób jej instalowania i przygotowywania do użycia we własnej witrynie internetowej.

CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY W drugiej części książki krok po kroku omawiam wszystkie podstawy biblioteki jQuery takie jak korzystanie z selektorów oraz praca ze zdarzeniami i efektami. W przypadku tej biblioteki selektory oferują wyjątkowo duże możliwości. Z tego powodu poświęciłem im cały rozdział, dokonując przeglądu wszystkich typów selektorów wraz z przykładami ich użycia. W tej części ująłem też zdarzenia i efekty, aby zapewnić solidne podwaliny pod tworzenie własnej witryny internetowej i komponentów interfejsu użytkownika.

WPROWADZENIE

CZĘŚĆ III: ZASTOSOWANIE BIBLIOTEKI JQUERY W WITRYNIE INTERNETOWEJ Trzecia część książki koncentruje się na sposobie wykorzystania wcześniej omówionych zagadnień związanych z biblioteką jQuery we własnej witrynie lub aplikacji internetowej (w części drugiej zamieszczono przykłady, lecz bez pełnych procedur wyjaśniających na przykład, jak utworzyć własne menu harmonijkowe lub nawigację opartą na kartach). W tej części omówiono również użycie biblioteki jQuery do usprawnienia sprawdzania poprawności formularzy witryny internetowej.

CZĘŚĆ IV: POZNAWANIE ZAAWANSOWANYCH MOŻLIWOŚCI BIBLIOTEKI JQUERY

14

W karierze każdego programisty używającego biblioteki jQuery nadchodzi taki moment, gdy postanawia zająć się bardziej zaawansowanymi zagadnieniami takimi jak tworzenie dodatków i praca z nimi, pisanie kodu jQuery do obsługi żądań Ajax lub praca z aplikacjami mobilnymi jQuery. W tej części obszernie omówiono te zagadnienia. Dodatkowo znajduje się w niej rozdział, w którym opisano wszystkie zasoby informacji o bibliotece jQuery dostępne w internecie.

DLA KOGO JEST TA KSIĄŻKA Książka została napisana dla projektantów witryn internetowych i programistów interfejsów, którzy rozpoczynają dopiero przygodę z biblioteką jQuery. Być może, choć zainstalowali i skonfigurowali już dodatek, to tak naprawdę nie wiedzą, jak napisać własny kod jQuery. Może spotkałeś się z dyskusjami o bibliotece jQuery w internecie i szukasz kogoś, kto wyjaśni, jak za jej pomocą ulepszyć witrynę internetową. Czytelnicy powinni mieć solidne podstawy języka HMTL i stylów CSS, a także w podstawowym zakresie znać język JavaScript.

O KSIĄŻCE Kod zawarty w książce wyróżniono specjalną czcionką kod. W przypadku adresów URL użyto czcionki adres URL. W listingach wiersze komentarzy wyróżniono czcionką komentarz. Nowe terminy oznaczono pogrubieniem. W przypadku tekstu, który należy wprowadzić, użyto czcionki tekst do wprowadzenia. Choć wszystkie przykłady w książce zaprezentowano przy użyciu przeglądarki internetowej Firefox, są one zgodne z przeglądarkami Microsoft Internet Explorer 6+, Mozilla Firefox 2.0+, Apple Safari 3.0+, Opera 9.0+ i Google Chrome. Przykładowy kod zamieszczony w książce jest dostępny do pobrania pod adresem ftp://ftp.helion.pl/przyklady/pjqiii.zip.

I CZĘŚĆ

BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

Rozdział 1. Biblioteka jQuery — wprowadzenie Rozdział 2. Biblioteka jQuery — pierwsze kroki

1 ROZDZIAŁ

PODRĘCZNIK JQUERY

BIBLIOTEKA JQUERY — WPROWADZENIE

JQUERY TO BIBLIOTEKA JĘZYKA JAVASCRIPT utworzona, aby projektantom i programistom stron internetowych ułatwić szybkie i zwięzłe tworzenie i rozszerzanie interakcji JavaScript, a także korzystanie ze zdefiniowanego zestawu metod opakowanych własnymi funkcjami języka JavaScript. Choć jQuery nie oferuje żadnej nowej funkcjonalności, powoduje, że istniejące trudne do zrozumienia i utworzenia interfejsy API (Application Programming Interface) języka JavaScript

stają się dostępne dla większej liczby osób. Jest to możliwe dzięki zrozumiałej i łatwej w użyciu składni tej biblioteki. W tym rozdziale zaprezentuję korzyści wynikające z użycia jQuery oraz różne biblioteki, które często są grupowane w ramach tej samej kategorii co ona. Ponadto przedstawię solidne podstawy dotyczące funkcji biblioteki jQuery i wyjaśnię, dlaczego jest to wspaniała biblioteka.

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

POZNAWANIE BIBLIOTEK JĘZYKA JAVASCRIPT Biblioteki języka JavaScript umożliwiają projektantom i programistom stron internetowych rozszerzanie interaktywności i przydatności strony przez zastosowanie struktury powszechnie używanych funkcji języka JavaScript utworzonych za pomocą własnych typów prostych tego języka. Biblioteki można porównać do struktur lub projektów z zestawami reguł i wytycznymi ułatwiającymi tworzenie witryny internetowej. Biblioteki języka JavaScript znacznie przyspieszają pisanie kodu JavaScript przez projektantów i programistów stron, stanowiąc punkt wyjścia. Wiele popularnych bibliotek — takich jak Prototype, MooTools, Dojo, YUI, a także biblioteka jQuery, której poświęcono tę książkę — jest obecnie w szerokim zakresie wykorzystywanych w przypadku witryn internetowych. Każda zawiera specyficzny zestaw funkcji. Biblioteka jQuery oferuje obszar modyfikowania modelu DOM (Document Object Model).

18

Model DOM to w rzeczywistości kod HTML, który reprezentuje stronę internetową o strukturze przypominającej drzewo. Gałęzie tego drzewa są hierarchicznie powiązanymi ze sobą węzłami. Najczęściej dostęp do każdego węzła można uzyskać za pośrednictwem stylów CSS, a także kodu JavaScript używającego selektorów. Model DOM to interfejs API określający, w jaki sposób projektanci i programiści stron internetowych mogą modyfikować stronę przy użyciu metod utworzonych przez komitet odpowiedzialny za standardy HTML. HTML 5 oferuje nowy zestaw interfejsów API na potrzeby interakcji z modelem DOM i zapewnienia użytkownikom większych możliwości korzystania z internetu. Po całkowitym załadowaniu strony internetowej model DOM jest gotowy do prowadzenia z nim interakcji. Struktura języka JavaScript pozwala projektantowi lub programiście stron internetowych rozszerzyć model DOM przez dodanie do strony pliku dołączanego JavaScript (library.js), a następnie użycie specjalnych funkcji skonfigurowanych wewnątrz biblioteki.

KORZYŚCI WYNIKAJĄCE Z UŻYCIA BIBLIOTEKI JĘZYKA JAVASCRIPT W PORÓWNANIU Z PODEJŚCIEM TRADYCYJNYM Największą korzyścią wynikającą z użycia biblioteki języka JavaScript jest możliwość skorzystania z ogromnej różnorodności funkcji, które pozwalają sprawić, że strony internetowe będą oferować znacznie więcej niż tylko nieciekawą treść pozbawioną możliwości interakcji. Biblioteki języka JavaScript mogą oferować projektantom i programistom stron internetowych metody pracy z efektami, animacjami, zdarzeniami, technologią Ajax oraz interaktywnymi widżetami interfejsu użytkownika. Dzięki temu możliwe jest programowanie stron w krótkim czasie. Projektanci i programiści nie są ograniczeni do funkcji zapewnianych przez bibliotekę. Mogą również pisać własne.

ROZDZIAŁ 1: BIBLIOTEKA JQUERY — WPROWADZENIE W przypadku projektantów stron internetowych, dla których jest zrozumiały model DOM, piękno bibliotek języka JavaScript polega na tym, że możliwość modyfikowania tego modelu przy użyciu biblioteki staje się z natury przystępniejsza niż modyfikowanie go za pomocą ograniczonego interfejsu API języka JavaScript. Aby uzyskać te same funkcje, pisząc własny kod JavaScript, konieczne by było spędzenie nad tym niezliczonej ilości godzin i poświęcenie wielu nocy na programowanie, testowanie i usuwanie błędów. Prawdopodobnie spowodowałoby to wygenerowanie ogromnych ilości kodu. Biblioteki języka JavaScript znacznie pomagają w tym zakresie, zmniejszając ilość kodu wymaganego do zrealizowania jakiegoś zadania — normalnie w przypadku użycia własnej biblioteki języka JavaScript mogłoby go być czterokrotnie więcej. Unikanie powtórzeń to kolejna korzyść wynikająca z korzystania z bibliotek języka JavaScript. Jeśli rozpoczęto pisanie funkcji tego języka w celu wykonania zbliżonych zadań, ostatecznie powstanie mnóstwo bardzo podobnego kodu. Używając biblioteki, można wyeliminować takie powtórzenia.

GŁÓWNI GRACZE W BRANŻY BIBLIOTEK Po określeniu struktury do wyboru jest około 20 bibliotek języka JavaScript, spośród których pięć to główni gracze. Są to następujące biblioteki: YUI, Prototype, MooTools, Dojo, a także biblioteka jQuery będąca tematem tej książki. Wybiły się one ponad resztę z powodu łatwości ich użycia i ogromnej rzeszy zwolenników. Podstawowe elementy wyróżniające większość tych bibliotek to ich wielkość i obsługa przeglądarek. Pięć omawianych przeze mnie bibliotek to biblioteki open source. Oznacza to, że każdy może uczestniczyć w tworzeniu kodu źródłowego, z którego się one składają. Na przykład oprogramowanie Microsoftu nie jest oprogramowaniem open source. Jest to oprogramowanie, którego właścicielem jest Microsoft. Do jego tworzenia angażuje on własnych programistów. Microsoft sprzedaje następnie swoje oprogramowanie, żądając opłaty licencyjnej. Pozwala ona na korzystanie z niego (zwykle przez ustalony okres), a w przypadku wystąpienia problemów zapewnia dostęp do usługi wsparcia oferowanej przez Microsoft. Oprogramowanie open source to coś odmiennego. Każdy może pobrać kod źródłowy i wprowadzać w nim zmiany. Dzięki temu kod staje się lepszy, gdyż w całości jest tworzony przez wolontariuszy, których celem jest uzyskanie lepszego oprogramowania, a nie zarabianie pieniędzy. Ponieważ nie jest wnoszona opłata licencyjna, można bez żadnych ograniczeń pracować z biblioteką. Internetowa społeczność open source jest ogromna. Miliony użytkowników wnoszą swój wkład za pośrednictwem blogów i forów. Gdy projektanci i programiści potrzebują wsparcia, nie mają obecnie większych problemów z uzyskaniem go. Istotną rzeczą, o której należy pamiętać, jest to, że nauka korzystania z biblioteki języka JavaScript polega na opanowaniu umiejętności czytania i pisania przy użyciu czegoś, co przypomina inny język. Mowa o kolejnej interpretacji języka JavaScript.

19

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

YUI YUI (Yahoo! User Interface), biblioteka języka JavaScript, została utworzona w 2005 r. przez firmę Yahoo! Developer Network. Biblioteka ta podlega licencji BSD (Berkeley Software Distribution). Licencja ta dopuszcza dystrybucję oprogramowania jako niewymagającego zgody — w porównaniu z innymi podobnymi opcjami licencjonowania, takimi jak Powszechna Licencja Publiczna GNU, cechuje się najmniejszą liczbą ograniczeń w dystrybucji. Biblioteka YUI jest w pełni obsługiwana przez przeglądarki Internet Explorer 6 i nowsze, Firefox 3 i nowsze, Safari 3 i nowsze oraz Opera 10 i nowsze. Całkowita wielkość pliku biblioteki YUI wynosi 31 kB. Aby ułatwić wyobrażenie sobie postaci kodu biblioteki YUI, poniżej zaprezentowano przykładowy kod JavaScript, w którym pokazano, jak przy użyciu YUI zaimplementować zdarzenie kliknięcia. W tym przypadku można wyróżnić dwie części zdarzenia click: funkcję wywoływaną w momencie wystąpienia kliknięcia i samo zdarzenie click. Kod nie jest taki zgrabny, a ponadto zawiera wiele składni specyficznej dla biblioteki YUI.

20

function handleClick(e) { Y.log(e); } YUI().use('node-base', function(Y) { Y.on("click", handleClick, "#foo"); });

Prototype Prototype, czyli biblioteka języka JavaScript napisana przez Sama Stevensona, stała się popularna, ponieważ była pierwszą strukturą języka JavaScript wchodzącą w skład równie popularnego środowiska szybkiego programowania o nazwie Ruby on Rails. Z tego powodu zawsze miałem wrażenie, że biblioteka Prototype nie została stworzona z myślą o projektantach stron internetowych, lecz bardziej dla zagorzałych programistów stron, którzy używają jej w połączeniu ze środowiskiem Ruby on Rails. Biblioteka Prototype to podstawowa biblioteka oferująca funkcjonalność technologii Ajax. Zapewnia jeszcze więcej możliwości w przypadku zastosowania biblioteki Scriptaculous, która udostępnia efekty i elementy interfejsu użytkownika, a ponadto działa tylko w połączeniu z biblioteką Prototype. Podstawowym mankamentem tej biblioteki jest jej wielkość. Pliki .js obu bibliotek zajmują w sumie 278 kB. Dokumentacja bibliotek Prototype i Scriptaculous może być trudna do zrozumienia dla niedoświadczonych programistów interfejsów. Podobnie jak w przypadku innych bibliotek, choć społeczność wspierających ją osób istnieje, biblioteka Prototype w dalszym ciągu może być trudna do opanowania z powodu części jej bardziej skomplikowanej składni. Aby ułatwić wyobrażenie sobie postaci kodu tej biblioteki, poniżej zaprezentowano przykładowy kod JavaScript, w którym pokazano, jak Prototype obsługuje zdarzenie click. Definiowanie tego zdarzenia bardzo przypomina definiowanie go w przypadku biblioteki jQuery. Nie oddaje to

ROZDZIAŁ 1: BIBLIOTEKA JQUERY — WPROWADZENIE jednak faktycznego stanu rzeczy — wiele innych metod biblioteki Prototype w rzeczywistości jest bardziej skomplikowanych i w mniejszym stopniu podobnych do metod jQuery. $("foo").observe("click", function() { alert('Kliknito!'); });

MooTools Biblioteka MooTools języka JavaScript pojawiła się w 2006 r. Przypomina ona bibliotekę Prototype. Jej składnia jest przeznaczona dla średnio zaawansowanych i zaawansowanych projektantów i programistów stron internetowych. Biblioteka MooTools języka JavaScript umożliwia projektantom i programistom pracę ze strukturą obiektową w celu rozszerzenia interfejsu API tego języka i zapewnienia interaktywności na stronach internetowych. Biblioteka ta jest przeznaczona dla osób, które szukają biblioteki podobnej do czystego kodu JavaScript. Oto przykładowy kod prezentujący sposób obsługi zdarzeń click przez MooTools: $('foo').addEvent('click', function() {}));

Dojo Biblioteka Dojo pojawiła się w 2004 r. jako struktura języka JavaScript służąca do tworzenia aplikacji internetowych zgodnych z różnymi przeglądarkami, a także do dodawania do witryn internetowych płynnej interaktywności. Składnia biblioteki Dojo może być dość zagmatwana. Pisanie kodu przy jej użyciu w dużym stopniu wygląda jak w przypadku macierzystego kodu JavaScript. Biblioteka ta jest przeznaczona dla doświadczonych programistów interfejsów. Początkujący będą mieć większy problem z opanowaniem i korzystaniem z biblioteki Dojo. Oto przykładowy kod prezentujący sposób obsługi zdarzeń click przez bibliotekę Dojo: fooNode = dojo.byId("foo"); fooConnections = []; fooConnections.push(dojo.connect(fooNode, 'onclick', foo));

Jak można wywnioskować na podstawie wszystkich dotychczasowych przykładów, biblioteki języka JavaScript mają naprawdę zagmatwaną składnię. Pora przyjrzeć się przykładowi obsługi zdarzeń click przez bibliotekę jQuery: $('#foo').click(function() { // zdarzenie kliknicia });

21

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

KORZYŚCI OFEROWANE PRZEZ BIBLIOTEKĘ JQUERY Biblioteka jQuery zapewnia mnóstwo korzyści. Po porównaniu jej z poprzednimi przykładami składni okaże się, że jest ona najbardziej zwarta i łatwa do zrozumienia. Zaletą tej biblioteki jest to, że po prostu pozwala zrealizować cel — bez popełniania dużej liczby błędów, używania niezrozumiałego kodu i konieczności bycia programistą oprogramowania zaplecza. Nie oznacza to jednak, że jQuery nie oferuje zaawansowanych możliwości. Na rysunku 1.1 przedstawiono stronę główną witryny poświęconej bibliotece jQuery (http://jquery.com).

22

Rysunek 1.1. Witryna internetowa biblioteki jQuery

Historia biblioteki jQuery w skrócie Biblioteka jQuery została stworzona w 2006 r. przez Johna Resiga jako alternatywa dla bardziej skomplikowanych bibliotek języka JavaScript. Umożliwia ona projektantom i programistom stron internetowych pisanie prostszego kodu JavaScript, który w dalszym ciągu pozwala im wykonywać zaawansowane funkcje tego języka w obrębie witryn internetowych. Biblioteka jQuery jest fantastyczna, gdyż do modyfikowania modelu DOM nie wymaga żadnej wiedzy, jaką mogą się pochwalić zagorzali programiści. Z biblioteką tą jest związanych kilka zaawansowanych zagadnień, które wymagają wcześniejszego zdobycia wiedzy na temat takich obszarów powiązanych z językiem JavaScript jak praca z metodami technologii Ajax

ROZDZIAŁ 1: BIBLIOTEKA JQUERY — WPROWADZENIE w formularzach w celu pobierania i wysyłania treści (więcej o tym w rozdziale 9.), tworzenie niestandardowych dodatków biblioteki jQuery (więcej o tym w rozdziale 11.) i praca z mobilnymi witrynami internetowymi (poświęcono temu rozdział 10.). Większość znanych mi projektantów i programistów korzysta lub korzystała z biblioteki jQuery w pewnym momencie w ciągu ostatnich czterech lat. Po zapytaniu o powód tego stanu rzeczy zwykle słyszałem: „Czy istnieje coś prostszego?”. Właśnie łatwość użycia biblioteki jQuery zachęca tak wiele osób do sięgnięcia po nią. Nie potrzeba tytułu magistra informatyki, aby wysłać formularz za pośrednictwem technologii Ajax. Być może czytelnik zastanawia się, na co pozwala biblioteka jQuery. Okazuje się, że na wszystko, co jest możliwe w przypadku własnego interfejsu API języka JavaScript. Choć w kolejnych rozdziałach książki obszerniej zaprezentuję możliwości jQuery, w tym miejscu dokonam krótkiego przeglądu podstawowych cech tej biblioteki. 

Zdarzenia, które uwzględniają zdarzenia powiązane z myszą, klawiaturą i formularzem, a także interakcje użytkownika.



Efekty obejmujące wyświetlanie/ukrywanie, przesuwanie, znikanie i animacje niestandardowe.



Animacja umożliwiająca przemieszczanie elementów z wykorzystaniem stylów CSS i efektów wbudowanych.



Metody technologii Ajax pełniące rolę interfejsu w przypadku przetwarzania formularzy po stronie serwera przy użyciu języka XML i formatu JSON.



Rozszerzalność pozwalająca na tworzenie własnych dodatków, które rozbudowują podstawowy interfejs API biblioteki jQuery.



Modyfikowanie modelu DOM.



Modyfikowanie stylów CSS (Cascading Style Sheet).



Programy narzędziowe zapewniające wykrywanie przeglądarek i prostsze interfejsy dla typowych funkcji języka JavaScript.

Kto korzysta z biblioteki jQuery Projektanci i programiści stron internetowych to podstawowi użytkownicy biblioteki jQuery. Z jej użyciem spotkałem się w przypadku wielu różnych witryn, począwszy od stron internetowych prowadzonych przez rodzinne firmy z niewielkich miejscowości, a skończywszy na rozbudowanych witrynach przedsiębiorstw. Ponieważ biblioteka jQuery jest darmowa, mogą z niej korzystać przeróżni projektanci i programiści. Oferuje ona zalety języka JavaScript projektantom stron, którzy mogą nie znać się na programowaniu, ale zamierzają dodać do swojej witryny internetowej ciekawe efekty. Biblioteka jQuery zyskała na popularności, gdy firmy Google i Microsoft zaczęły oferować rozwiązania hostingu. W rozwiązaniach tych plik jest udostępniany na serwerze WWW (w tym przypadku za pośrednictwem sieci dostarczania treści) w celu zaoferowania większej wydajności na poziomie witryn internetowych, które korzystają z pliku. Takie działanie

23

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE podjęte przez Google i Microsoft pokazało, że jQuery może być preferowaną biblioteką oraz głównym graczem w grupie bibliotek open source języka JavaScript. Google), BBC, Dell, Bank of America, Major League Baseball, NBC i Netflix zaliczają się do coraz większej grupy firm, które w swoich witrynach internetowych zastosowały bibliotekę jQuery. W witrynie firmy Netflix, która oferuje klientom wypożyczanie filmów za pośrednictwem reklamy bezpośredniej i kanałów elektronicznych, przez kilka lat stosowano do obsługi interfejsu użytkownika zaawansowany kod JavaScript. Na rysunku 1.2 przedstawiono tworzenie za pomocą biblioteki jQuery menu, które jest wyświetlane w momencie umieszczenia kursora na tytule filmu. Dzięki temu użytkownik może uzyskać więcej informacji bez opuszczania strony.

24

Rysunek 1.2. Witryna internetowa firmy Netflix

Prezentacja działania biblioteki jQuery w przypadku stron internetowych Biblioteka jQuery jest łatwa do skonfigurowania. Podobnie jak w przypadku innych bibliotek języka JavaScript jest ona dołączana na początku stronymiędzy znacznikami . Bibliotekę jQuery języka JavaScript możesz dołączyć do własnej witryny w następujący sposób:





ROZDZIAŁ 1: BIBLIOTEKA JQUERY — WPROWADZENIE

jQuery

Po dodaniu jQuery do własnej strony, korzystając z interfejsu API biblioteki, napisz kod JavaScript w celu uzyskania dostępu do różnych obszarów strony za pośrednictwem modelu DOM (Document Object Model). Z modelem tym powinna być zaznajomiona większość projektantów i programistów stron internetowych. Jeśli jesteś projektantem stron, możesz mieć z nim do czynienia codziennie, nie wiedząc nawet o jego istnieniu. Możliwe jest użycie biblioteki jQuery w celu dodawania i usuwania ze strony kodu HTML, a także reagowania na działania wykonywane na stronie przez użytkowników takie jak kliknięcie odnośnika lub wypełnienie formularza. Istnieje też możliwość tworzenia animacji i użycia technologii Ajax do wysyłania i ładowania treści za pośrednictwem usług WWW bez konieczności odświeżania strony.

Analiza zalet biblioteki jQuery Witryny internetowe stają się czymś znacznie więcej niż tylko tekstem, obrazami i odnośnikami do innych stron. Internauci oczekują od witryny czegoś wielkiego. Poprzeczka jest nieustannie podnoszona przez witryny internetowe i firmy, wśród których należy wymienić Facebook, Google, Microsoft, Twitter i Foursquare. Technologia ciągle się zmienia. Korzystanie z biblioteki jQuery ułatwia nadążenie za tak szybkim rozwojem. jQuery to biblioteka, która promuje szybkie programowanie witryn internetowych lub aplikacji. Ponadto pozwala skoncentrować się na interakcji z użytkownikiem i projektowaniu interfejsu bez potrzeby pisania zbyt rozbudowanego kodu. Tworzenie kodu przy użyciu biblioteki jQuery jest prostsze niż pisanie kodu JavaScript, ponieważ postępuje się zgodnie z wytycznymi interfejsu API. Będąc ekspertem w tworzeniu kodu HTML i CSS, możesz opanować bibliotekę jQuery i pisać kod przy jej użyciu, gdyż większość funkcji biblioteki bazuje na interaktywności wewnątrz kodu HTML i CSS.

Open source Biblioteki języka JavaScript są wspierane przez społeczność oprogramowania open source, a także odpowiednio testowane i aktualizowane. Społeczność oprogramowania Open Source to ogromna grupa oferująca wsparcie. Projektanci i programiści stron internetowych nieustannie tworzą kursy, książki i dodatki, aby pomóc korzystać z biblioteki jQuery i rozszerzać ją.

Znakomita dokumentacja Jak dotąd jedną z największych zalet biblioteki jQuery jest jej dokumentacja, która decyduje o jej wspaniałości. Rozwijający ją zespół poświęcił sporą ilość własnego czasu na udokumentowanie zasad działania biblioteki i metod poruszania się w obrębie jej interfejsu API. Witryna z dokumentacją biblioteki jQuery oferuje kursy uzupełnione o przykłady kodów, a także dostęp do ogromnej rzeszy osób, które udzielają wsparcia. Na rysunku 1.3 przedstawiono sekcję dokumentacji witryny jQuery.

25

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

26

Rysunek 1.3. Sekcja dokumentacji witryny biblioteki jQuery Społeczność projektantów i programistów, która stworzyła bibliotekę jQuery, cały czas ulepsza ją i udostępnia nowe wersje. Biblioteka ta pojawiła się pierwotnie w 2006 r. w wersji 1.0. Od tamtego czasu jej kod zaktualizowano ponad 20 razy. Aktualna wersja ma numer 1.5. Biblioteka jQuery nieustannie jest ulepszana. Jest to jeden z powodów, dla których stała się tak bardzo popularna. Biblioteki, które nie są tak często aktualizowane, nie cieszą się taką popularnością. W momencie pojawienia się aktualizacji w dokumentacji są wprowadzane zmiany dotyczące metod, które stały się nieaktualne (przeznaczonych do usunięcia w następnej wersji). Zmiany mają również na celu zapewnienie zgodności biblioteki wstecz, aby współpracowała ze starszymi wersjami. Gdy biblioteka jest aktualizowana do nowej wersji, proces ten przebiega bezproblemowo. Wystarczy umieścić nową bibliotekę JavaScript na serwerze. Ponadto należy zwykle przejrzeć sekcję dziennika zmian, w której jest wyszczególniana każda wersja oraz zmiany wprowadzone w bibliotece. Ma to na celu stwierdzenie, czy jakiekolwiek używane metody stały się nieaktualne. Biblioteka jQuery jest udostępniana w ramach licencji MIT License lub licencji GNU General Public License (GPL) w wersji 2. Oznacza to zwykle, że jest ona darmowa. Jeśli tylko w dodatku biblioteki jQuery zostaną podane informacje o autorze, możesz bez ograniczeń korzystać z kodu.

Ten sam kod JavaScript, lecz krótszy Kod biblioteki jQuery to kod JavaScript. Wszystko, na co pozwala język JavaScript, możesz również osiągnąć przy użyciu jQuery. Istnieje nieskończona ilość możliwości. W bibliotece jQuery podoba mi się to, że zapewnia ona bazę do tworzenia kodu, a jednocześnie nie ogranicza do tego, co sama oferuje. Pisząc kod przy jej użyciu, do dyspozycji ma się następujące trzy opcje:

ROZDZIAŁ 1: BIBLIOTEKA JQUERY — WPROWADZENIE 

użycie rozbudowanego interfejsu API biblioteki jQuery,



użycie lub utworzenie dodatku biblioteki jQuery,



napisanie zwykłego kodu JavaScript.

Kolejna interesująca zaleta biblioteki jQuery to zwięzłość kodu. Jeśli zamierzam zmienić kolor tła w zwykłym kodzie JavaScript, użyję następującego kodu: document.getElementById('mydiv').style.backgroundColor = 'red';

Korzystając z bogatego w możliwości mechanizmu selektorów, do osiągnięcia tego samego rezultatu biblioteka jQuery potrzebuje tylko jednego krótszego wiersza o następującej postaci: $('#mydiv').css('background-color','red');

Składnia, która jest łatwiejsza do zrozumienia niż w przypadku kodu JavaScript, została stworzona z myślą o projektantach stron internetowych. Po porównaniu jej ze składnią innych bibliotek takich jak Prototype lub YUI oczywiste stanie się, dlaczego jQuery została wybrana przez tak wielu profesjonalistów tworzących strony. Mechanizm selektorów jest najbardziej znaczącą i lubianą funkcją biblioteki jQuery. Umożliwia on użycie selektorów CSS2, dzięki czemu projektanci stron internetowych ze znajomością stylów CSS bardzo chętnie decydują się na tę bibliotekę.

Łączenie w łańcuch Jedną z najwspanialszych funkcji biblioteki jQuery jest łączenie w łańcuch, który pozwala łączyć kolejno wiele metod. Ułatwia to zmniejszenie ilości kodu, a tym samym zwiększenie szybkości, z jaką kod jQuery jest pobierany z serwera WWW i wykonywany. Oto przykład kodu jQuery korzystającego z funkcji łączenia w łańcuch: $('#foo').addClass('active').prev().removeClass('active');

A oto przykład, w którym nie zastosowano funkcji łączenia w łańcuch: $('#foo').addClass('active'); $('#foo').next().removeClass('.active');

Przykład, w którym wykorzystano łączenie w łańcuch, to bardziej przejrzysty i zwięzły sposób pisania kodu jQuery. W książce używam tej funkcji w przykładach kodów.

Zgodność z różnymi przeglądarkami Biorąc pod uwagę ostatnie aktualizacje przeglądarek Safari, Firefox, Internet Explorer, Google Chrome i Opera, najwyższy priorytet ma tworzenie stron, które działają we wszystkich najważniejszych przeglądarkach. Ich rywalizacja stała się częścią codziennych zmagań każdego projektanta stron internetowych. Gdy korzystasz z biblioteki jQuery, możesz być pewien tego, że jest ona zgodna ze wszystkimi popularnymi przeglądarkami takimi jak Internet Explorer 6.0+, Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ i Google Chrome.

27

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE Często poważnym problemem dotyczącym języka JavaScript jest to, że do obsługi wielu przeglądarek musisz utworzyć różny kod. Niektórzy projektanci i programiści stron internetowych decydują się na tworzenie alternatywnych arkuszy stylów specyficznych dla przeglądarki, aby obsługiwać style CSS w różnych przeglądarkach. Mowa przede wszystkim o przeglądarce Internet Explorer skonfrontowanej z pozostałymi. Ten sam problem często występuje w przypadku kodu JavaScript. Poniższy kod prezentuje, w jaki sposób skonfigurować żądanie Ajax działające w wielu przeglądarkach. If(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); // kod dla przegldarki Firefox/Safari } else if(window.ActiveXObject) // wersja ActiveX { xhr = new ActiveXObject("Microsoft.XMLHTTP"); // kod dla przegldarki IE }

28

Używając zwykłego kodu JavaScript, musisz napisać dwie różne funkcje, przetestować je i usunąć wszelkie błędy. To dość sporo pracy, nie wspominając o powtarzalności mającej miejsce w przypadku konieczności napisania kilku funkcji, które realizują to samo w celu obsługi wielu przeglądarek (zamiast jednego skryptu obsługującego je wszystkie takiego jak skrypt z kodem jQuery). Dla porównania następujący fragment kodu zwyczajnie pokazuje, jak proste jest żądanie Ajax w przypadku biblioteki jQuery: $.ajax();

Zgodność z CSS3 Wszystkie nowoczesne przeglądarki obsługują style CSS1 i CSS2 (pierwsze dwie wersje kaskadowych arkuszy stylów CSS). Większość projektantów i programistów stron internetowych korzysta dziś ze stylów CSS2. Style CSS3, będące w fazie prac rozwojowych, oferują rozszerzone funkcje takie jak czcionki osadzone), zaokrąglone narożniki, zaawansowane obrazy tła, kolory, efekty tekstowe i przejścia. Obecnie jedynie garstka przeglądarek w pełni obsługuje specyfikację CSS3 (stan z lipca 2010 r.). Są to przeglądarki Firefox 4, Internet Explorer 9, Opera 9 i Safari 4. Ich niektóre starsze wersje obsługują określone funkcje CSS3. Obsługa stylów CSS3 przez bibliotekę jQuery ogranicza się jedynie do nowych selektorów. Co to oznacza? Jedną z nowych funkcji CSS3 są dodatkowe selektory atrybutów, które stanowią ulepszenie w porównaniu z selektorami atrybutów dołączonymi do stylów CSS2, a ponadto przypominają selektory atrybutów obecne w bibliotece jQuery. Selektory te umożliwiają stosowanie stylów dla treści w oparciu o jej atrybuty. Dzięki temu możliwe jest filtrowanie na podstawie konkretnych wartości znalezionych w atrybutach. Sprawdź następujący przykładowy kod: p[title=*foo] {background:black;color:white}

To jest mój przykadowy tekst

ROZDZIAŁ 1: BIBLIOTEKA JQUERY — WPROWADZENIE

Praktyka stosowania niekłopotliwego kodu JavaScript Wiele osób prawdopodobnie tworzyło okna wyskakujące przez osadzenie kodu JavaScript bezpośrednio w znacznikach HREF (pokazano to w poniższym przykładzie). W przypadku takiego kodu największym problemem jest to, że osadzono go w odnośniku HREF. Jeśli okaże się, że użytkownik wyłączył obsługę kodu JavaScript (jest to rzadka sytuacja), odnośnik ten nie zadziała i nie będzie żadnej metody awaryjnej, która umożliwi wyświetlenie pomocy. Pomoc

Ten kod strony HTML jest przykładem kłopotliwego kodu JavaScript. W przypadku projektowania stron internetowych można to porównać do tworzenia stylów wstawianych zamiast oddzielenia warstwy prezentacji od treści. Poniżej zaprezentowano przykład użycia biblioteki jQuery do zapewnienia niekłopotliwego rozwiązania, aby zestawić je z przykładem kłopotliwego kodu JavaScript. Zastosowano tu podobny kod. Gdy zostaje wyłączona obsługa kodu JavaScript, ta wersja, zamiast opakowywać kod wewnątrz funkcji click, oferuje użytkownikom rozwiązanie awaryjne w postaci kliknięcia odnośnika i skierowania na stronę pomocy.

Niekopotliwy kod jQuery

Pomoc

Degradacja „z wdziękiem” i progresywne rozszerzanie to strategie postępowania w przypadku obsługi nowszych funkcji przeglądarek i starszych nieobsługiwanych przeglądarek z jednoczesnym zapewnianiem użytkownikowi jak największego komfortu. Choć progresywne rozszerzanie to nowsza strategia z dwóch powyższych, podstawowa różnica między nimi polega na zastosowanym w nich podejściu. Zajmę się tym w kilku następnych podpunktach.

Degradacja „z wdziękiem” W przypadku podejścia typowego dla degradacji „z wdziękiem” najpierw zapewniasz obsługę witryny internetowej przez wszystkie nowoczesne przeglądarki, a następnie, używając starszych przeglądarek, upewniasz się, że obsługują funkcje witryny. Większość projektantów

29

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE i programistów stron internetowych korzysta ze strategii degradacji „z wdziękiem”, konfigurując określone arkusze stylów lub stosując modyfikacje kodu dla różnych wersji przeglądarki Internet Explorer (wcale nie mam na myśli jej wersji 6.) z powodu problemów z układem w przypadku modelu pudełkowego. Pomoc

Prosz zaktualizowa przegldark lub wczy obsug kodu JavaScript, poniewa przegldarka nie wspópracuje z nasz witryn internetow.

Progresywne rozszerzanie

30

Progresywne rozszerzanie odnosi się do strategii polegającej na rozpoczęciu od bazowych funkcji obsługiwanych przez wszystkie przeglądarki, a następnie dodawaniu większej liczby funkcji dla obsługujących je nowoczesnych przeglądarek. Progresywne rozszerzanie to znakomita strategia, z której możesz skorzystać, ponieważ powoduje, że witryny są bardziej dostępne. Z punktu widzenia użytkowników lepszym rozwiązaniem jest dostarczenie każdemu z nich jednego zestawu funkcji i dodanie specjalnych aktualizacji dla tych, którzy korzystają z bardziej zgodnych przeglądarek (mowa o przeglądarkach zgodnych z takimi funkcjami jak CSS3 i HTML 5). Obecnie HTML 5 i CSS3 są obsługiwane tylko przez przeglądarki Safari 4 i Opera 10.6. W przypadku podejścia typowego dla progresywnego rozszerzania nie zakłada się, że każdy ma włączoną obsługę kodu JavaScript. Ponadto zawsze oferowana jest użytkownikowi alternatywna metoda uzyskania dostępu do treści. Rozważmy okno wyskakujące, o którym wspomniałem, omawiając praktykę stosowania niekłopotliwego kodu JavaScript. Możesz użyć atrybutu target w znaczniku odnośnika, aby przeglądarka, zamiast tworzyć okno wyskakujące, otwarła stronę docelową odnośnika w nowym oknie. Jest to obsługiwane przez wszystkie przeglądarki. Pomoc

W książce skoncentruję się na korzystaniu z biblioteki jQuery w przypadku strategii progresywnego rozszerzania. Ma to na celu zapewnienie dla większej liczby nowoczesnych przeglądarek trochę lepszych możliwości obsługiwania ich przez użytkowników, a jednocześnie umożliwienie dalszej obsługi starszych przeglądarek w podstawowym zakresie.

Niekłopotliwy kod JavaScript i jQuery Biblioteka jQuery sprawia, że korzystanie z obu strategii (degradacji „z wdziękiem” i progresywnego rozszerzania) jest łatwiejsze, ponieważ cały kod jQuery (JavaScript) znajduje się poza kodem HTML w zewnętrznym pliku JavaScript lub w nagłówku przetwarzanego pliku HTML (chyba że korzystasz z hostingu oferowanego w ramach sieci dostarczania treści). Ze względu na to, że elementy HTML nie zawierają żadnego osadzonego kodu JavaScript, działanie awaryjne zawsze jest możliwe, pod warunkiem że programista pamięta o tych praktykach podczas tworzenia witryn internetowych.

2 ROZDZIAŁ

PODRĘCZNIK JQUERY

BIBLIOTEKA JQUERY — PIERWSZE KROKI

BIBLIOTEKA JQUERY CIESZY SIĘ POWODZENIEM wśród projektantów i programistów stron internetowych z powodu minimalnej liczby kroków wymaganych do rozpoczęcia programowania. Musisz jedynie pobrać kopię pliku podstawowej biblioteki języka JavaScript i dołączyć na początku strony witryny internetowej znacznik script odwołujący się do tego pliku. Jak w przypadku wszystkich bibliotek języka JavaScript, przed rozpoczęciem używania funkcji biblioteki jQuery

w witrynie lub aplikacji internetowej konieczne jest dodanie do strony instrukcji include biblioteki języka JavaScript. W niniejszym rozdziale omówiono konfigurowanie opcjonalnego lokalnego środowiska programistycznego, wybór właściwego pliku biblioteki jQuery do pobrania i przygotowanie jej do dołączenia do witryny internetowej. Wyjaśnię również, do czego służy opakowanie biblioteki jQuery.

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

KONFIGUROWANIE ŚRODOWISKA PROGRAMISTYCZNEGO Aby rozpocząć konfigurowanie środowiska programistycznego, określ najpierw, jaki ma być używany edytor kodu. Dostępnych jest wiele popularnych edytorów, wśród których należy wymienić takie jak Dreamweaver, Coda, TextMate i EditPlus. Korzystam głównie z edytora Coda, czyli aplikacji systemu Mac OS X stworzonej dla projektantów i programistów stron do pisania kodu witryn i aplikacji internetowych. Oprogramowanie to zintegrowano z zestawem narzędzi oferującym takie funkcje jak protokół FTP, terminal (wiersz poleceń), zarządzanie plikami, edytory stylów CSS i kodu, wyróżnianie elementów składni, automatyczne uzupełnianie, rozszerzone wyszukiwanie i zastępowanie, podgląd oraz obsługa wielu języków. Jeśli nie zamierzasz używać edytora kodu, nic nie stoi na przeszkodzie, abyś poprzestał na zwykłym poczciwym edytorze Notatnik (system Windows) lub TextEdit (system Macintosh), jednakże nie będzie wtedy dostępna żadna zaawansowana funkcja, którą może zapewnić edytor kodu.

32

Przed rozpoczęciem pisania kodu jQuery musisz mieć dostęp do miejsca przeznaczonego do testowania wyników pracy. Mowa o środowisku programistycznym, które może mieć postać lokalnej konfiguracji złożonej z lokalnego serwera WWW i przeglądarki internetowej lub bazować na zewnętrznym hoście WWW. Środowisko takie w zasadzie umożliwia testowanie dowolnych wyników pracy w symulowanym środowisku rzeczywistym. Wspaniałość korzystania z aplikacji takiej jak Coda lub Dreamweaver polega na tym, że możesz skonfigurować w niej zewnętrzny host WWW. Dzięki temu możesz pracować bezpośrednio poza serwerem i bezproblemowo przeprowadzać testy. Niektórzy mogą twierdzić, że wystarczy jedynie pracować na poziomie lokalnego folderu i otwierać każdy plik w przeglądarce internetowej. Nie oddaje to jednak faktycznego zachowania środowiska rzeczywistego. Możesz w ten sposób utworzyć kilka funkcji jQuery, jednak gdy zostaną one użyte w środowisku rzeczywistym, uzyskasz inne dane wyjściowe. Jestem przekonany, że lepiej od początku pracować w środowisku, które w jak największym stopniu przypomina rzeczywiste. Lokalne środowiska programistyczne są proste do skonfigurowania i korzystne w sytuacji, gdy nie ma dostępu do internetu. W przypadku użytkowników systemu Macintosh największym powodzeniem cieszy się środowisko MAMP (skrót od Mac/Apache/MySQL/PHP; http://www.mamp.info/). Jest to aplikacja programistyczna typu „wszystko w jednym”, którą możesz uruchomić lokalnie, by przeprowadzać testy tak jak w przypadku rzeczywistego serwera WWW. Użytkownicy Windowsa mogą skorzystać z wersji środowiska MAMP dla tego systemu o nazwie WampServer (skrót od Windows/Apache/mySQL/PHP Server; http://www.wampserver.com/en/). Gdy tylko to możliwe, sugerowałbym użycie jako serwera WWW serwera Apache. Jest to bardzo stabilny serwer WWW open source, który działa przede wszystkim w systemie Linux.

ROZDZIAŁ 2: BIBLIOTEKA JQUERY — PIERWSZE KROKI

ZASTOSOWANIE ROZSZERZENIA FIREBUG W PRZEGLĄDARCE FIREFOX Jeśli obecnie nie używasz przeglądarki Firefox jako jednej z podstawowych przeglądarek programistycznych, szczególnie zalecam pobranie jej przed dalszą lekturą. Na potrzeby przykładów zawartych w książce używam wersji 3.6.8 przeglądarki Firefox oraz wersji 1.5.4 rozszerzenia Firebug, które pierwotnie zostało stworzone przez Joego Hewitta w grudniu 2006 r. Obecnie jest to projekt programistyczny open source. Od tego czasu dokonano kilku aktualizacji rozszerzenia Firebug, z którego korzysta aktualnie ponad milion programistów. Firebug to rozszerzenie zapewniające zestaw narzędzi przeznaczony dla projektantów i programistów stron internetowych, którzy pracują z kodem HTML, CSS i JavaScript. Firebug jest darmowym narzędziem open source dostępnym dla każdego za pośrednictwem witryny internetowej rozszerzeń przeglądarki Firefox (http://addons.mozilla.org). Firebug umożliwia dynamiczne wyświetlanie i edytowanie kodu HTML i CSS (rysunek 2.1). Ponadto oferuje bogaty w możliwości debugger języka JavaScript, który ułatwia znajdowanie błędów. Konsola okaże się bardzo przydatna w przypadku wykonywania z jej poziomu kodu JavaScript bezpośrednio na stronie!

33

Rysunek 2.1. Strona główna rozszerzenia Firebug

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

Instalowanie i włączanie rozszerzenia Firebug Aby zainstalować i włączyć rozszerzenie Firebug, wykonaj następujące kroki: 1. Otwórz przeglądarkę Firefox i przejdź do witryny o adresie http://www.getFirebug.com. 2. Kliknij przycisk Install Firebug. 3. Zostanie wyświetlone okno (rysunek 2.2) z komunikatem Należy instalować dodatki pochodzące wyłącznie ze źródeł godnych zaufania. Na przycisku Zainstaluj rozpocznie się odliczanie w dół. Gdy pojawi się wartość 0, przycisk Zainstaluj zostanie włączony. Kliknij go.

34

Rysunek 2.2. Okno instalacji rozszerzenia Firebug 4. Następnie zostanie wyświetlony pasek postępu, który wskazuje, że w przeglądarce jest instalowany dodatek. Po zainstalowaniu dodatku zostanie wyświetlony komunikat potwierdzenia i przycisk Uruchom ponownie program Firefox (rysunek 2.3).

Rysunek 2.3. Okno zakończenia instalacji rozszerzenia Firebug

ROZDZIAŁ 2: BIBLIOTEKA JQUERY — PIERWSZE KROKI 5. Gratulacje! Możesz teraz rozpocząć korzystanie z rozszerzenia Firebug. Na rysunku 2.4 pokazano ostatni krok procesu instalacji.

Rysunek 2.4. Okno potwierdzenia instalacji rozszerzenia Firebug po zrestartowaniu przeglądarki

Włączanie rozszerzenia Firebug Aby włączyć rozszerzenie Firebug, wykonaj następujące kroki: 1. Otwórz stronę internetową w przeglądarce Firefox. Dla celów demonstracyjnych użyję strony o adresie http://www.mozilla.com. 2. Po załadowaniu strony rozszerzenie Firebug możesz otworzyć na kilka sposobów. Najprostszym z nich jest kliknięcie jego ikony w prawym dolnym rogu przeglądarki. Na rysunku 2.5 przedstawiono przykład zainstalowanego rozszerzenia Firebug oraz jego ikonę w prawym dolnym rogu. Rozszerzenie Firebug możesz również uruchomić, klikając prawym przyciskiem myszy w oknie przeglądarki i wybierając z menu rozwijanego pozycję Zbadaj element. Na rysunku 2.6 zaprezentowano przykład menu rozwijanego w oknie przeglądarki. 3. Po otwarciu rozszerzenia Firebug zostanie wyświetlona seria kart, a wśród nich: Konsola, HTML, CSS, Skrypt i DOM.

35

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

36

Rysunek 2.5. Strona internetowa zainstalowanego rozszerzenia Firebug

Rysunek 2.6. Sposób uzyskania dostępu do pozycji Zbadaj element w celu otwarcia rozszerzenia Firebug

ROZDZIAŁ 2: BIBLIOTEKA JQUERY — PIERWSZE KROKI

Inspekcja i edycja kodu HTML Funkcje inspekcji i edycji oferowane przez rozszerzenie Firebug mają bardzo duże możliwości. W znacznym stopniu ułatwiają debugowanie kodu HTML i JavaScript, zwłaszcza w przypadku dynamicznego modyfikowania modelu DOM. Mając skrypt, który dodaje/zmienia kod HTML, możesz otworzyć okno inspekcji i obserwować zmiany w czasie rzeczywistym. Jest to zawsze pierwszy krok, który podejmuję podczas debugowania kodu JavaScript. Zanim przejdę dalej, każdorazowo wolę upewnić się, że kod HTML jest poprawnie tworzony. Na rysunku 2.7 pokazano, jak po włączeniu rozszerzenia Firebug powinien wyglądać przykładowy ekran z aktywną sekcją edycji kodu HTML.

37

Rysunek 2.7. Sekcja edycji kodu HTML rozszerzenia Firebug

Korzystanie z konsoli Użycie konsoli rozszerzenia Firebug to drugi krok, jaki wykonuję podczas debugowania mojego kodu JavaScript. Po usunięciu wszelkich problemów z modelem DOM za pomocą konsoli próbuję uruchomić skrypt na stronie w warunkach rzeczywistych. W obrębie konsoli są widoczne dwa panele. Lewy służy do wyświetlania błędów, a prawy jest też znany jako wiersz poleceń. 1. Otwórz rozszerzenie Firebug i kliknij kartę Konsola. 2. Jeśli wystąpią jakiekolwiek błędy w kodzie JavaScript, zostaną wyświetlone w lewym panelu. Na rysunku 2.8 przedstawiono przykład otwartej konsoli rozszerzenia Firebug z wyświetlonymi błędami.

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

38

Rysunek 2.8. Konsola rozszerzenia Firebug z wyświetlonymi błędami

Ostateczne uruchamianie kodu JavaScript w przeglądarce Firefox za pośrednictwem konsoli rozszerzenia Firebug Konsola rozszerzenia Firebug to znakomite narzędzie do testowania kodu jQuery lub JavaScript na stronie bez konieczności dodawania go do strony HTML, uruchamiania na serwerze WWW itp. Konsola ta zapewnia również informacje zwrotne w postaci komunikatów o błędzie, jeśli wystąpi problem z kodem JavaScript. Jest to wspaniała metoda testowania kodu przed podjęciem decyzji o umieszczeniu wszystkiego na stronie HTML.

Zaawansowane debugowanie kodu JavaScript za pomocą rozszerzenia Firebug W przypadku bardziej zaawansowanych aplikacji JavaScript możesz skorzystać z debuggera kodu JavaScript wchodzącego w skład rozszerzenia Firebug. Debugger kodu JavaScript to narzędzie o bardzo dużych możliwościach, które pozwala dodać punkty wstrzymania w różnych miejscach skryptu. Dzięki temu możesz zatrzymywać, uruchamiać i wstrzymywać skrypt, a także dokładniej przyjrzeć się zmiennym i obiektom. W książce tej nie będę zbyt dokładnie zajmował się tym debuggerem, ponieważ jest on przeznaczony dla bardziej zaawansowanych programistów używających języka JavaScript.

ROZDZIAŁ 2: BIBLIOTEKA JQUERY — PIERWSZE KROKI

Debugowanie kodu JavaScript w innych przeglądarkach internetowych Firefox nie jest jedyną przeglądarką z internetowymi narzędziami programistycznymi. Przeglądarki Apple Safari, Google Chrome i Internet Explorer mają podobne zestawy narzędzi, jednak nie oferują one takich możliwości jak rozszerzenie Firebug przeglądarki Firefox. Debuggery przeglądarek Safari i Chrome zawierają kilka funkcji obecnych w rozszerzeniu Firebug, w tym kartę inspekcji elementów i zarządzania zasobami, jednakże przeglądarki te są pozbawione bogatego w możliwości debuggera takiego jak dołączony do rozszerzenia Firebug. W przypadku innych narzędzi dysponuję ograniczonym doświadczeniem. Wprawdzie korzystałem z przeglądarek Internet Explorer oraz Safari na potrzeby wybiórczego sprawdzania, ale w czasie programowania rozszerzenie Firebug zawsze stanowi dla mnie podstawową opcję. Podstawy JavaScriptu to wszystkie zagadnienia, z którymi powinni być zaznajomieni projektanci i programiści stron internetowych przed wkroczeniem w świat biblioteki jQuery i innych bibliotek tego języka. Możesz wprawdzie tworzyć podstawowe skrypty i używać ich bez posiadania solidnych podstaw języka JavaScript, jednakże znajomość sposobu jego działania spowoduje zwiększenie tempa programowania i przyswajania wiedzy, a tym samym dużą wydajność.

POBIERANIE BIBLIOTEKI JQUERY Przed rozpoczęciem programowania przy użyciu biblioteki jQuery musisz najpierw pobrać ją z jej witryny internetowej. Biblioteka jQuery jest plikiem JavaScript, do którego możesz uzyskać dostęp na jeden z dwóch następujących sposobów: 1. Pobierz plik jQuery.js i udostępnij go lokalnie w witrynie internetowej. 2. Użyj wersji biblioteki dostępnej za pośrednictwem sieci dostarczania treści. Zalecam pobranie kopii biblioteki jQuery na komputer lokalny na potrzeby programowania i testowania, szczególnie w sytuacji, gdy połączenie internetowe jest niedostępne. Aby pobrać bibliotekę jQuery, wykonaj następujące kroki: 3. W oknie przeglądarki internetowej przejdź do witryny biblioteki jQuery o adresie http://www.jquery.com. 4. Kliknij odnośnik Download znajdujący się na głównym pasku nawigacji u samej góry strony. Spowoduje to wyświetlenie strony, która oferuje wiele różnych metod uzyskania dostępu do biblioteki jQuery. Na rysunku 2.9 pokazano stronę pobierania. W przypadku wielu witryn internetowych są wybierane darmowe rozwiązania oparte na udostępnianiu za pośrednictwem sieci dostarczania treści, ponieważ okazały się niezawodne i cechują się krótkim czasem ładowania. Rozwiązania te powodują zwiększenie przepustowości dla danych wysyłanych z Twojej witryny. Sieć dostarczania treści jest rozwiązaniem hostingowym zapewnianym przez firmy o dużych sieciach takie jak Google, Microsoft, Akamai itp.

39

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

40

Rysunek 2.9. Strona pobierania biblioteki jQuery Sieci dostarczania treści oferują korzyść w postaci większej sieci o dużej szybkości, która udostępnia bibliotekę jQuery w wielu miejscach. Gdy użytkownik wyświetli Twoją witrynę w swojej przeglądarce, biblioteka jQuery zostanie dostarczona przez serwer mający najbliższe mu położenie geograficzne. Dzięki temu skróci się czas ładowania. Strona z bibliotekami Ajax udostępniana przez firmę Google (rysunek 2.10) oferuje różne opcje dołączenia biblioteki jQuery oraz wielu innych bibliotek do Twojej witryny lub aplikacji internetowej. Korzystając z rozwiązania hostingu, możesz określić w adresie URL, jaka ma zostać użyta wersja biblioteki jQuery. Prezentuje to następujący przykładowy kod, w którym zastosowana została biblioteka jQuery udostępniana przez firmę Google:





Alternatywnie możesz też dołączyć bibliotekę jQuery u dołu strony. Może to czasami zwiększyć szybkość ładowania strony, gdyż ładowanie kodu JavaScript na jej początku nie jest wstrzymywane przez kontynuowanie wczytywania jej pozostałej części. Ponadto w ten sposób gwarantuje się załadowanie całego modelu DOM przed zastosowaniem kodu JavaScript.

Mój przykad uycia biblioteki jQuery

Witaj, jQuery!

Bibliotek jQuery moesz te umieci na kocu strony!

Jeśli używasz instrukcji include wersji biblioteki jQuery udostępnianej w ramach hostingu przez firmę Google, zamiast dołączać ścieżkę względną, wstaw ścieżkę bezpośrednią do biblioteki zapewnianej przez serwis Google.

Mój przykad uycia biblioteki jQuery





43

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE

OPAKOWANIE BIBLIOTEKI JQUERY Przed rozpoczęciem programowania przy użyciu biblioteki jQuery musisz dowiedzieć się, czym jest jej opakowanie, a także w jaki sposób jest ono stosowane w przypadku modelu DOM. W większości języków programowania opakowanie jest czymś, co opakowuje coś innego (najczęściej obiekt) w celu rozszerzenia funkcjonalności. Aby sprowadzić to do odpowiedniej perspektywy, opakowanie biblioteki jQuery podłącza się samo do modelu DOM przy użyciu selektorów, umożliwiając jego rozszerzenie. Właściwie biblioteka jQuery nie oferuje żadnej nowej metody. Po prostu wykorzystuje metody już istniejące w macierzystym języku JavaScript i sprawia, że interakcja z nimi staje się znacznie łatwiejsza. Siła opakowania polega na zdolności rozszerzania modelu DOM przy użyciu znacznie mniejszej ilości kodu niż w przypadku macierzystego języka JavaScript. Następujący kod jest przykładem instrukcji selektora biblioteki jQuery: $.(selector)

44

Choć biblioteka jQuery oferuje do wyboru wiele metod zdarzeń, jedna z nich jest bardzo ważna. Ta metoda programu obsługi zdarzeń nosi nazwę document.ready() i jest wykonywana tylko po całkowitym załadowaniu modelu DOM. W swojej najprostszej formie metoda jest jedynie kolejnym sposobem opisu funkcji, jednak w językach programowania zorientowanych obiektowo metody mają zwiększone możliwości w porównaniu z funkcjami. Siła tkwiąca w bibliotece jQuery polega na modyfikowaniu modelu DOM, a zatem przed zmodyfikowaniem go w jakikolwiek sposób należy zapewnić, by był on gotowy do użycia. Metoda programu obsługi zdarzeń document.ready() umożliwia umieszczenie całego kodu jQuery języka JavaScript wewnątrz zdarzenia w celu zapewnienia wykonania kodu w momencie nastąpienia gotowości modelu DOM. Zdarzenie to przypomina zdarzenie onLoad języka JavaScript z tą różnicą, że metoda programu obsługi zdarzeń document.ready() jest wywoływana tylko po załadowaniu modelu DOM. Następujący kod jest przykładem ustawiania metody programu obsługi zdarzeń document.ready():

Mój przykad uycia biblioteki jQuery





ROZDZIAŁ 2: BIBLIOTEKA JQUERY — PIERWSZE KROKI Powinno się wyrobić w sobie nawyk ustawiania programu obsługi zdarzeń document.ready() i dowolnego innego niestandardowego kodu jQuery w pliku zewnętrznym. Jest to preferowana przeze mnie metoda, gdyż pozwala ona utrzymać cały kod w jego własnym niezależnym pliku dołączanym JavaScript. Zwykle wywołuję plik zewnętrzny jquery.function.js z całym kodem jQuery, a ponadto zawsze upewniam się, że został on dołączony jako ostatni po wszystkich podstawowych plikach biblioteki jQuery. Możesz też skorzystać ze skróconej wersji metody programu obsługi zdarzeń document.ready(), gdy próbujesz zoptymalizować wielkość pliku funkcji biblioteki jQuery w celu zwiększenia wydajności (np. w przypadku aplikacji mobilnej). Skrócona wersja jest ustawiana w następujący sposób:

Mój przykad uycia biblioteki jQuery





Aby objaśnić działanie opakowania biblioteki jQuery, muszę omówić proces ustawiania instrukcji document.ready(). Pierwszy krok obejmuje ustawienie selektora poprzedzonego znakiem dolara ($), który stanowi alias na potrzeby uzyskania dostępu do samej biblioteki jQuery. Selektor jest przekazywany w nawiasach okrągłych. W tym przypadku przekazuję selektor dokumentu dla modelu DOM. Alias i selektor tworzą opakowanie biblioteki jQuery. $(document)

Zdarzenie gotowości jest przyłączane po instrukcji selektora i wymienne z innymi zdarzeniami. .ready()

Funkcja, która nie zawiera elementów graficznych, przechowuje kod stosowany po załadowaniu i przygotowaniu modelu DOM. Funkcja jest umieszczana w nawiasach okrągłych zdarzenia gotowości, ponieważ jest przekazywana w celu uruchomienia w przypadku tego zdarzenia. .ready(function() { // W tym miejscu znajduje si kod DOM jQuery alert("Model DOM jest w peni zaadowany i gotowy."); });

45

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE Funkcja window.load w dużym stopniu przypomina funkcję document.ready() z tą różnicą, że przed wykonaniem jakiegokolwiek kodu jQuery oczekuje również na załadowanie na stronie wszystkich elementów graficznych. $(window).load { // W tym miejscu znajduje si kod jQuery alert("Okno zostao zaadowane."); });

URUCHAMIANIE KODU POZA PROGRAMEM OBSŁUGI ZDARZENIA DOCUMENT.READY() Większość kodu specyficznego dla biblioteki jQuery musi zostać wstawiona wewnątrz metody programu obsługi zdarzenia document.ready(), jednakże macierzyste elementy języka JavaScript, takie jak zmienne, tablice itp., możesz wstawić poza tą metodą. Wynika to stąd, że elementy te nie muszą czekać na przygotowanie modelu DOM, a ponadto są przed nim ukryte jako szczegóły zawarte w skrypcie.

46

W poniższym przykładowym kodzie przedstawiono skrypt, który nową treść może dodać dopiero po załadowaniu modelu DOM. W skrypcie tym są ustawiane trzy zmienne. Dwie z nich znajdują się poza zdarzeniem document.ready(), a trzecia zmienna jest ustawiana wewnątrz tego zdarzenia, ponieważ wymaga dostępu do pętli for utworzonej w jego obrębie.







ROZDZIAŁ 2: BIBLIOTEKA JQUERY — PIERWSZE KROKI

ZAPOBIEGANIE KONFLIKTOM Z INNYMI BIBLIOTEKAMI Jeśli podczas pisania kodu jQuery nie podejmiesz odpowiednich środków zaradczych, mogą wystąpić konflikty z innymi bibliotekami języka JavaScript. Większość konfliktów ma miejsce w przypadku korzystania z aliasu $. Znak ten jest też używany jako alias przez bibliotekę Prototype. W celu wyeliminowania konfliktów z innymi bibliotekami musisz wykonać dwa następujące kroki: Na końcu biblioteki jQuery dodaj funkcję noConflict. Zwalnia ona wszystkie zależności biblioteki jQuery od aliasu $ na rzecz dowolnej innej biblioteki, która też z niego korzysta. $.noConflict();

Zmień wszystkie odwołania aliasu $ na alias jQuery zademonstrowany w poniższym przykładzie. Zmodyfikuj kod: $(document).ready() { // W tym miejscu znajduje si kod });

do postaci: jQuery(document).ready() { // W tym miejscu znajduje si kod });

Możesz również zdefiniować swój alias, jeśli nie zamierzasz używać aliasu biblioteki jQuery. W tym celu dodaj wiersz kodu JavaScript definiujący Twój własny alias. W poniższym przykładzie ustawiam nowy alias $alien zamiast aliasu $. To bardzo proste! var $alien = jQuery; $alien(document).ready() { // W tym miejscu znajduje si kod });

UŻYCIE KODU JAVASCRIPT RAZEM Z BIBLIOTEKĄ JQUERY Zmienne to znakomity sposób przechowywania typów informacji, zwłaszcza podczas pisania kodu JavaScript. Często używam zmiennych w przypadku biblioteki jQuery i tak samo postąpiłem w przykładach zamieszczonych w dalszej części książki. Zastosowanie zmiennych podczas pisania kodu jQuery jest niczym innym niż użyciem ich z językiem JavaScript. Możesz ustawić zmienne i wywoływać je w obrębie opakowania biblioteki jQuery, ponieważ w gruncie rzeczy wszystko to jest po prostu kodem JavaScript.

47

CZĘŚĆ I: BIBLIOTEKA JQUERY I JĘZYK JAVASCRIPT — WPROWADZENIE Urok biblioteki jQuery polega na tym, że jest to JavaScript. A zatem jeśli masz już jakąkolwiek wiedzę na temat tego języka, możesz ją zastosować bezpośrednio w przypadku jQuery. Nie musisz martwić się o poznawanie nowej składni, konwencji ani metod, gdyż większość kodu jQuery bazuje na funkcjonalności języka JavaScript. Składnia biblioteki jQuery jest jednak znacznie łatwiejsza do zrozumienia. Być może zastanawiasz się, dlaczego nie można po prostu nauczyć się języka JavaScript, jeśli biblioteka jQuery stanowi jego część. W odpowiedzi usłyszysz, że jQuery pozwala na wszystko, co umożliwia język JavaScript, a ponadto znacznie ułatwia implementowanie. Hasło widniejące w witrynie biblioteki jQuery, Write less, do more (Pisz mniej, osiągnij więcej), z pewnością głosi prawdę. 20 wybranych wierszy kodu JavaScript możesz zamienić na pięć wierszy kodu jQuery bez konieczności znajomości języka JavaScript. Osoby zainteresowane tym językiem powinny wiedzieć, że opanowanie obsługi biblioteki jQuery może być pomocne w zrozumieniu jego interfejsu API.

48

Opanowanie JavaScriptu może być trudnym zadaniem. Biblioteka jQuery znacznie ułatwia projektantom stron internetowych implementowanie funkcji interfejsu API tego języka bez konieczności wgłębiania się w całą jego złożoność. jQuery naprawdę otwarła drzwi bardzo wielu projektantom stron, którzy dotychczas niewiele programowali, umożliwiając im dodanie do witryn internetowych elementów interaktywnych. Praca z biblioteką jQuery to znakomicie spędzony czas. Związane z nią wsparcie i społeczność zwiększają się w zdumiewającym tempie.

CZĘŚĆ II

BIBLIOTEKA JQUERY — PODSTAWY

Rozdział 3. Używanie selektorów, filtrów i stylów CSS: fundamenty biblioteki jQuery Rozdział 4. Praca ze zdarzeniami Rozdział 5. Ożywianie witryny internetowej przy użyciu efektów

3 ROZDZIAŁ

PODRĘCZNIK JQUERY

UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS: FUNDAMENTY BIBLIOTEKI JQUERY SELEKTORY STANOWIĄ PODSTAWOWE elementy konstrukcyjne biblioteki jQuery. Wszystkie operacje dotyczące modelu DOM (Document Object Model) w bibliotece jQuery uwzględniają użycie selektorów. Wynika to z konieczności określenia elementów modelu DOM, które są wybierane i przetwarzane. Biblioteka jQuery korzysta z typowych selektorów CSS i XPATH, z którymi zaznajomiona jest większość projektantów i programistów stron internetowych, a także z kilku niestandardowych selektorów jQuery. Dzięki temu biblioteka ta jest elastyczna i łatwa do opanowania. Zrozumienie zasad działania selektorów ma kluczowe znaczenie na drodze do pełnego wykorzystania jej możliwości. Filtry zapewniają większą elastyczność w zakresie wybierania w modelu DOM elementów opartych na cechach,

w przypadku których selektory CSS nie będą pomocne. Filtry są często używane w połączeniu z selektorami, aby zapewnić bardzo duże możliwości kontroli podczas wybierania konkretnych elementów na podstawie na przykład ich położenia w grupie elementów, widoczności bądź cechy pola danych wejściowych formularza takiej jak zaznaczone lub wyłączone. Biblioteka jQuery oferuje również ładny zbiór metod służących do dodawania i usuwania klas CSS, a także do stosowania stylu bezpośrednio dla elementu modelu DOM. W tym rozdziale dokonam przeglądu sposobów korzystania z selektorów, filtrów i stylów CSS w przypadku biblioteki jQuery. Zaprezentuję różne kursy z rzeczywistymi sytuacjami, które pozwolą bardzo dobrze zrozumieć te fundamentalne metody tej biblioteki.

CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY

PRACA Z ELEMENTAMI MODELU DOM PRZY UŻYCIU SELEKTORÓW JQUERY Selektory, czyli zasadnicza cecha biblioteki jQuery, są obsługiwane przez mechanizm selektorów Sizzle. Choć mechanizm ten może być używany z innymi językami, jego prawdziwe możliwości najpełniej ujawniają się w przypadku wszystkich metod biblioteki jQuery. Składnia jest łatwa do opanowania dla projektantów stron internetowych, którzy mają gruntowną wiedzę z zakresu stylów CSS i języka HTML. Mechanizm selektorów Sizzle biblioteki jQuery to kod JavaScript napisany w celu obsługi selektorów w tej bibliotece. Selektory te są typowymi selektorami CSS i XPATH uzupełnionymi o kilka selektorów niestandardowych.

52

Selektor biblioteki jQuery jest wyrażeniem łańcuchowym klasyfikującym pojedynczy element modelu DOM lub grupę elementów, które są zbiorem dopasowanym. Ponadto wyrażenie to jest gotowe do zastosowania w bibliotece jQuery. Selektor zawsze jest deklarowany bezpośrednio po jej aliasie $. Po wybraniu elementów modelu DOM i zastosowaniu metod zbiór dopasowany staje się obiektem biblioteki jQuery. Obiekty tej biblioteki umożliwiają dodawanie wielu różnych typów metod obejmujących zdarzenia, efekty, przechodzenie, modyfikowanie itp. Choć obiekt jQuery jest czymś, na co niekoniecznie możesz natrafić podczas tworzenia kodu biblioteki jQuery, jest on zawsze obecny. A zatem ważne jest, aby mieć tego świadomość. Następujący przykładowy kod prezentuje sposób użycia selektora w bibliotece jQuery: $(selektor).metoda().

Trochę praktyki wystarczy do tego, aby praca z selektorami biblioteki jQuery stała się naprawdę naturalna, gdyż wiele spośród nich było stosowanych przed pojawieniem się technologii CSS. Selektor umożliwia nawigowanie w obrębie modelu DOM. W swojej najbardziej podstawowej formie pozwala wybrać element. W tym przypadku składnia jest taka sama jak składnia selektora CSS niezależnie od tego, czy dotyczy to identyfikatora, klasy, znacznika, czy atrybutu. Selektory stanowią zasadniczy komponent każdej tworzonej instrukcji jQuery. Gdy używasz selektora, tworzona instrukcja automatycznie wykonuje pętlę dla wszystkich węzłów modelu DOM w celu znalezienia elementów określonych w selektorze. Wynik wykonania takiej pętli jest też określany mianem zbioru dopasowanego. Projektanci stron internetowych biegli w zakresie arkuszy stylów CSS i mający gruntowną wiedzę na temat modelu DOM mogą szybko zacząć korzystać z selektorów. Oto części języka JavaScript, które tworzą selektor: 

alias biblioteki jQuery (jQuery lub $);



wybierane elementy modelu DOM ujęte w cudzysłów wewnątrz dwóch nawiasów okrągłych;

ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS 

wszystko, co występuje po selektorze i co stanowi stosowaną metodę biblioteki jQuery. Metodą biblioteki jQuery może być cokolwiek, począwszy od dodania stylów CSS, a skończywszy na animowaniu elementów na stronie. Funkcje, które także są nazywane metodami, wykonują konkretne działanie i akceptują argumenty zawarte w nawiasach okrągłych.

W tabeli 3.1 przedstawiono anatomię instrukcji selektora biblioteki jQuery.

Tabela 3.1. Anatomia instrukcji selektora biblioteki jQuery Alias biblioteki jQuery

Selektor

Metoda lub działanie biblioteki jQuery

$ lub jQuery

('div')

.css('border','1px solid #333');

WYBIERANIE ELEMENTÓW STRONY PRZY UŻYCIU SELEKTORÓW CSS Język JavaScript ma własne funkcje, które umożliwiają wybór elementów według identyfikatora i znacznika. Wadą tych funkcji jest to, że dla każdego z trzech typów elementów konieczne jest zastosowanie innej z nich. Ponadto powoduje to powtórzenia i zwiększanie ilości kodu, którym zarządzanie może okazać się koszmarem. W przypadku korzystania z selektorów w bibliotece jQuery jeden z nich może obsługiwać wiele typów elementów. Dzięki temu znacznie łatwiej jest tworzyć przejrzysty i możliwy do zarządzania kod. Wszystkie przykłady zawarte w tej książce prezentują dane wyjściowe przeglądarki, a także rozszerzenia Firebug. Umożliwia to stwierdzenie, co jest dodawane lub modyfikowane w modelu DOM (w rozdziale 2. zamieszczono więcej informacji o instalowaniu rozszerzenia Firebug i korzystaniu z niego). Po wyświetleniu źródła strony nie zobaczysz renderowanego kodu źródłowego. Jest to rzeczywisty kod tworzony po załadowaniu przeglądarki i uruchomieniu obsługi kodu JavaScript. W przypadku modyfikowania modelu DOM może się on zmieniać dość znacznie. Rozszerzenie Firebug pokazuje renderowany kod źródłowy, a nawet kod źródłowy podlegający modyfikacji, więc korzystanie z niego stanowi znakomitą metodę testowania kodu JavaScript i jQuery. Na poniższej liście zaprezentowano najczęściej używane selektory CSS jQuery, które bardziej szczegółowo objaśnię (korzystając z kodu i przeglądarki) w dalszej części rozdziału.     

$('*') $('p') $('.class') $('#id') $('.parent ul li')

W niniejszym rozdziale stosuję dla elementów style CSS, korzystając z metody .css() biblioteki jQuery. Działanie tej metody polega na umożliwieniu przekazania dowolnych właściwości CSS metodzie CSS, która następnie stosuje te właściwości dla elementu dopasowanego przez selektor. Styl CSS jest dodawany do elementu jako styl wstawiany po załadowaniu i przygotowaniu modelu DOM.

53

CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY W każdym przykładzie możesz użyć znacznie więcej kodu CSS niż tylko tego zastosowanego przeze mnie. Prezentuję jedynie konkretne przykłady problemów, które możesz napotkać, a także wyjaśniam, jak szybko możesz rozwiązać je za pomocą selektorów.

Wybieranie elementów przy użyciu selektora znaku wieloznacznego (*) Jeśli chcesz wybrać wszystkie elementy w modelu DOM lub wewnątrz innych elementów, zastosuj selektor znaku wieloznacznego (*). Znak ten jest ujęty w cudzysłów wewnątrz nawiasów okrągłych bezpośrednio po aliasie. W poniższym przykładzie kodu HTML wybieram przy użyciu selektora znaku wieloznacznego wszystkie elementy na stronie i dodaję ramkę CSS do każdego z nich. Aby dodać taką ramkę, korzystam z metody .css('border','1px solid #333');. Na rysunku 3.1 w obrębie otwartej karty rozszerzenia Firebug wyświetlono dane wyjściowe poniższego przykładowego skryptu. Karta ta umożliwia obserwowanie, jak biblioteka jQuery dodaje ramki do każdego elementu na stronie.

54

Rysunek 3.1. Dane wyjściowe w przeglądarce dla operacji dodania ramki do każdego elementu na stronie przy użyciu selektora znaku wieloznacznego

ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS



Witaj, jQuery.



Wybieranie elementów przy użyciu znacznika HTML Po zrozumieniu sposobu działania selektora znaku wieloznacznego możesz stwierdzić, że inne selektory CSS funkcjonują w ten sam sposób. Za pomocą selektora elementu możesz wybrać dowolny element modelu DOM. Konieczne jest przekazanie selektorowi nazwy znacznika, który znajduje się na stronie. Selektor korzysta z macierzystej metody języka JavaScript o nazwie getElementsByTagName(). Macierzysta funkcja języka JavaScript getElementsByTagName() pobiera wszystkie elementy według nazwy ich znacznika. Odpowiedni kod ma następującą postać: document.getElementsByTagName('h1');

W poniższym przykładzie kodu HTML muszę ustawić właściwość font-family znaczników h1. Choć w tym celu modyfikuję kod CSS, nie chcę, aby zostały tym objęte znaczniki h1 na innych stronach. W związku z tym używam selektora znacznika razem z metodą css() w celu zmiany właściwości font-family znaczników h1 wyłącznie na wybranej stronie. Metoda css() umożliwia zastosowanie właściwości font-family tylko dla wybranego przeze mnie znacznika h1. Na rysunku 3.2 przedstawiono dane wyjściowe poniższego kodu w oknie przeglądarki z uruchomionym rozszerzeniem Firebug. W tym przykładzie zademonstrowano sposób modyfikowania modelu DOM przez właściwość font-family dodawaną do znacznika h1 po załadowaniu tego modelu.

55

CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY

56

Rysunek 3.2. Selektor elementu w akcji



Witaj, jQuery.



ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS

Wybieranie elementów przy użyciu selektora identyfikatora Selektor identyfikatora ('#') umożliwia wybranie dowolnego identyfikatora w obrębie strony. Selektor ten używa macierzystej metody języka JavaScript getElementById(). Aby wybrać klasę za jej pomocą, niezbędny jest kod o następującej postaci: document.getElementById('sidebar');

Odwołując się do identyfikatora, selektor identyfikatora zawsze uwzględnia symbol krzyżyka (#) — bez niego nie zadziała. Selektor ten zwraca tylko jeden dopasowany identyfikator. Pamiętaj o tym, że w przypadku stylów CSS żadne dwa elementy na stronie nie powinny współużytkować tego samego identyfikatora. W poniższym przykładzie kodu HTML zamierzam ukryć element div identyfikatora #sidebar, używając kodu CSS. Do wybrania identyfikatora #sidebar z dokumentu używam selektora jQuery. Identyfikator jest ujęty w cudzysłów wewnątrz nawiasów okrągłych bezpośrednio za aliasem. Aby ukryć element div, stosuję metodę CSS oraz następujący kod: 'display','none'. Na rysunku 3.3 przedstawiono dane wyjściowe przeglądarki w przypadku użycia selektora identyfikatora do ukrycia elementu div z identyfikatorem #sidebar.

57

Rysunek 3.3. Dane wyjściowe przeglądarki po wybraniu identyfikatora #sidebar

CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY



Mój pasek boczny

• Nawigacja

Wybieranie elementów według klasy 58

Podobnie do wyboru na podstawie identyfikatora, możesz też wybierać elementy na stronie według klasy. Selektor .class używa macierzystej metody języka JavaScript getElementsByClassName(). Selektor klasy wybiera wszystkie elementy danej klasy w modelu DOM. Aby wybrać klasę za pomocą macierzystej metody języka JavaScript getElementsByClassName(), zastosuj kod o następującej postaci: document.getElementsByClassName('product-image');

Korzystając z biblioteki jQuery, mogę osiągnąć ten sam rezultat co w przypadku metody getElementsByClassName(), lecz napiszę wtedy o wiele mniej kodu. W poniższym przykładzie kodu HTML zamierzam dodać 1-pikselową szarą ramkę, dołączyć 5 pikseli wypełnienia i ustawić szerokość wynoszącą 150 pikseli. Metoda .css() umożliwia przekazanie wielu właściwości CSS przy użyciu literału obiektowego (rozdzielona przecinkami lista par złożonych z nazwy i wartości ułatwiająca uporządkowanie kodu), który pomaga zachować przejrzystość i prostotę tej instrukcji. Selektora klasy używam do wybrania wszystkich instancji klasy (.telephone) na stronie. Ponieważ metodzie .css() przekazuję trzy zbiory właściwości CSS, muszę również umieścić je w nawiasach {}. Na rysunku 3.4 pokazano dane wyjściowe przeglądarki po wywołaniu selektora klasy.

ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS

Rysunek 3.4. Dane wyjściowe przeglądarki po wybraniu ośmiu elementów klasy o nazwie telephone



Mnóstwo budek telefonicznych!







59

CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY

Wybieranie jednego lub wielu elementów z wieloma klasami W niektórych przypadkach może się zdarzyć, że zastosowano wiele klas dla tego samego elementu, i może być pożądane wybranie elementów tylko z tymi klasami. Selektor klasy akceptuje wiele klas. W poniższym przykładzie występuje sześć elementów o wielu klasach. Za pomocą selektora klasy i metody .css() biblioteki jQuery ukrywam dwa elementy z kodem CSS, w których zastosowano klasy book i inactive. Na rysunku 3.5 przedstawiono dane wyjściowe przeglądarki po wywołaniu wielu elementów w selektorze.

60

Rysunek 3.5. Dane wyjściowe przeglądarki po wybraniu dwóch elementów z klasami o nazwach book i inactive

Przewodnik po Krakowie

ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS

Przewodnik po Warszawie

Przewodnik po Gdasku

Przewodnik po Wrocawiu

Przewodnik po Sopocie

Wybieranie elementów strony przy użyciu selektorów nadrzędno-podrzędnych Selektory nadrzędno-podrzędne zapewniają wygodną metodę wybierania elementów strony w sytuacji, gdy nie mogą być używane elementy tag, CSS i ID. Właściwość CSS parent-child jest dostępna w przypadku wszystkich popularnych przeglądarek z wyjątkiem programu Internet Explorer 6. Czy to Cię zaskoczyło? Mnie nie. Niemniej jednak w przypadku użycia tego selektora CSS razem z biblioteką jQuery wspaniałe jest to, że przeglądarka Internet Explorer 6 jest obsługiwana. Selektor nadrzędno-podrzędny może okazać się bardzo przydatny podczas pracy z elementami zagnieżdżonymi takimi jak menu nawigacyjne. Selektor ten umożliwia wybranie przy użyciu operatora > bezpośrednich elementów potomnych danego elementu nadrzędnego. Rozważmy przykład kodu jQuery. Następująca instrukcja wybiera wszystkie elementy akapitu (p) znalezione w treści, jeśli są one elementami podrzędnymi (czyli zagnieżdżonymi w znaczniku body): $('body > p')

Jednak w sytuacji, w której podjęto by próbę wybrania konkretnego elementu akapitu wewnątrz określonego elementu div, konieczna byłaby większa precyzja (z wykorzystaniem nazw klas lub identyfikatorów elementów) w celu wybrania poprawnego elementu potomnego. W poniższym przykładzie kodu HTML muszę wybrać znaczniki p wewnątrz elementów, które mają klasę .inactive, a następnie na końcu znaczników p dodać łańcuch w kolorze czerwonym: Przepraszamy, ale ta ksika nie jest ju dostpna w sprzeday. W celu dodania wielu metod do jednej instrukcji korzystam z łączenia w łańcuch. Na rysunku 3.6 zaprezentowano dane wyjściowe przeglądarki po zastosowaniu instrukcji selektora.

61

CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY

Rysunek 3.6. Dane wyjściowe przeglądarki po zastosowaniu instrukcji selektora

62

Przewodnik po Krakowie

Przewodnik po Warszawie

Przewodnik po Gdasku

Przewodnik po Wrocawiu

Przewodnik po Sopocie

ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS

Wybieranie elementów strony przy użyciu selektorów potomnych Selektory nadrzędno-podrzędne działają tylko wtedy, gdy element podrzędny jest bezpośrednio powiązany z elementem nadrzędnym (np. znaczniki

umieszczone między dwoma znacznikami

). Jeśli wystąpi sytuacja, w której będziesz próbował wybrać element znajdujący się dwa lub trzy poziomy niżej niż element nadrzędny, będziesz musiał skorzystać z selektorów potomnych. Różnica między nimi a selektorami nadrzędno-podrzędnymi polega na użyciu operatora >. Jeśli nie uwzględniono tego operatora, selektor dopasowuje nie tylko element podrzędny, ale też elementy potomne. W poniższym przykładzie kodu HTML wybieram znacznik
• zagnieżdżony w znacznikach
  . Po dopasowaniu zbioru stosuję dla niego ramkę CSS. Na rysunku 3.7 przedstawiono dane wyjściowe przeglądarki po wywołaniu selektora klasy.
  
  63
  
  Rysunek 3.7. Dane wyjściowe przeglądarki po wybraniu elementów potomnych
  
  
  
  CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
  
  
  • Odnonik 1
  • Odnonik 2
  • • Odnonik podrzdny 1
    • Odnonik podrzdny 2
    
    
    Wybieranie wielu elementów Może wystąpić sytuacja, w której będziesz musiał wybrać wiele typów elementów. Może to być kombinacja klas, identyfikatorów, znaczników HTML, a także relacji nadrzędno-podrzędnych. Przy użyciu selektora jQuery możesz dodać wiele elementów, tworząc po prostu listę, na której są one rozdzielone przecinkami.
    
    64
    
    W poniższym przykładzie kodu HTML muszę wybrać pięć określonych klas i dwa konkretne identyfikatory, używając listy, gdzie separatorem jest przecinek. Dla tych wszystkich elementów muszę następnie zastosować szare tło, posługując się metodą CSS, a w przypadku ostatniego identyfikatora użyć koloru tła dla znacznika akapitu znajdującego się wewnątrz elementu #footer. Na rysunku 3.8 przedstawiono dane wyjściowe przeglądarki po wywołaniu selektora klasy.
    
    Rysunek 3.8. Dane wyjściowe przeglądarki po wybraniu wielu elementów
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS
    
    
    
    Klub ksiki
    
    

    Przewodnik po Krakowie

    
    
    

    Przewodnik po Warszawie

    
    
    

    Przewodnik po Gdasku

    
    
    

    Przewodnik po Wrocawiu

    
    
    

    Przewodnik po Sopocie

    
    
    

    Prawa autorskie 2010

    
    
    FILTROWANIE ELEMENTÓW MODELU DOM PRZY UŻYCIU FILTRÓW SELEKTORÓW JQUERY Filtrowanie umożliwia precyzowanie wybieranych elementów. Filtry są bardzo przydatne, gdy próbujesz zlokalizować tylko jeden lub kilka elementów w modelu DOM. Jeśli używasz statycznego dokumentu HTML, możesz łatwo dostosować kod HTML, jednak w przypadku gdy model DOM zmienia się po każdym żądaniu lub załadowaniu strony, konieczne jest użycie dynamicznego języka interfejsowego takiego jak JavaScript, który pozwala na dynamiczne dodawanie formatowania. Filtr jest definiowany za pomocą dwukropka, po którym następuje faktyczny filtr: :filtr.
    
    65
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    ZASTOSOWANIE DEFINICJI FILTRÓW PODSTAWOWYCH Wersja 1.4.2 biblioteki jQuery zawiera 20 różnych filtrów. Choć zaprezentuję rzeczywiste przykłady tych najczęściej używanych, w celu przejrzenia pełnej listy filtrów dostępnych w bibliotece jQuery możesz skorzystać z poniższej tabeli. Filtry wyszczególnione w tabeli 3.2, przy których w kolumnie Selektor CSS3 widnieje słowo Tak, są pseudoklasami i stanowią część specyfikacji CSS3. Na chwilę obecną te właściwości CSS są w pełni obsługiwane tylko w nowszych przeglądarkach internetowych takich jak Firefox 3+, Opera 10 i Safari 3+. Pełną listę przeglądarek obsługujących nowe właściwości CSS3 zamieszczono w witrynie o adresie http://www.css3.info. Biblioteka jQuery w pełni obsługuje te właściwości CSS3, gdy są one używane jako filtry w połączeniu z selektorami.
    
    Tabela 3.2. Nazwy i funkcje wszystkich dostępnych filtrów
    
    66
    
    Nazwa filtru
    
    Funkcja filtru
    
    :even i :odd
    
    Na podstawie indeksu filtry te znajdują pozycje parzyste i nieparzyste.
    
    :header
    
    Znajduje element lub elementy, które są znacznikami H1, H2, H3, H4...
    
    :not
    
    Znajduje element lub elementy, które nie są danym selektorem.
    
    :eq(index))
    
    Znajduje element lub elementy, które są zgodne z danym indeksem.
    
    :gt(index)
    
    Znajduje element lub elementy, które są większe od danego indeksu.
    
    :lt(index)
    
    Znajduje element lub elementy, które są mniejsze od danego indeksu.
    
    : rst-child, :last-child, :only-child i :nth-child()
    
    Filtry : rst-child, :last-child i :only-child znajdują element, który jest odpowiednio pierwszym, ostatnim lub jedynym elementem. Filtr :nth-child(1) umożliwia określenie, jaki element podrzędny ma zostać znaleziony.
    
    :has(p)
    
    Znajduje element lub elementy, które zawierają inny element.
    
    :contains ('to jest mój tekst')
    
    Znajduje element lub elementy, które zawierają tekst.
    
    :empty
    
    Znajduje element lub elementy, które są puste.
    
    :parent
    
    Znajduje element lub elementy nadrzędne.
    
    :hidden
    
    Znajduje element lub elementy, które są ukryte.
    
    :visible
    
    Znajduje element lub elementy, które są widoczne.
    
    :animated
    
    Znajduje element lub elementy, które są animowane.
    
    Selektor CSS3
    
    Tak
    
    Tak
    
    Tak
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS
    
    TWORZENIE TABEL Z NAPRZEMIENNIE ROZJAŚNIANYMI WIERSZAMI PRZY UŻYCIU FILTRÓW EVEN I ODD Naprzemienne rozjaśnianie wierszy to często stosowana metoda ułatwiająca odczyt wierszy tabeli. Polega ona na użyciu jasnoszarego koloru tła dla każdego wiersza parzystego lub nieparzystego. Filtry :even i :odd biblioteki jQuery sprawiają, że dodanie do dowolnej tabeli tego typu stylu jest zadziwiająco łatwe. Służą one nie tylko do naprzemiennego rozjaśniania wierszy. Choć możliwości zastosowania tych filtrów są prawie nieskończone, to jednak naprzemienne rozjaśnianie wierszy stanowi znakomity przykład jednej z nich. Na rysunku 3.9 przedstawiono dane wyjściowe przeglądarki po załadowaniu strony, w przypadku której dla wszystkich wierszy parzystych zastosowano kolor tła.
    
    67
    
    Rysunek 3.9. Dane wyjściowe przeglądarki po załadowaniu strony z kolorem tła zastosowanym dla wszystkich wierszy parzystych
    
    
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    68
    
    

    Produkt	Opis	Cena
    Rczniki papierowe	Najlepiej wchaniajce rczniki papierowe.	18,99 z
    Serwetki papierowe	Doskonae na spotkaniach rodzinnych w plenerze.	16,99 z
    Tacki papierowe	Znakomita cena.	5,99 z
    Plastikowe widelce	Niezbdne akcesorium na piknik.	2,99 z

    
    
    UŻYCIE STYLU DLA PIERWSZEJ I OSTATNIEJ POZYCJI LISTY LUB KOLEKCJI ELEMENTÓW Jeśli zamierzasz odfiltrować z zestawu elementów modelu DOM tylko pierwszą lub ostatnią pozycję, należy użyć filtrów :first i :last stosowanych dla wybranego selektora. Filtry te zwracają tylko jedną pozycję i bazują na indeksie znajdującym się wewnątrz wybranego zestawu selektora. W poniższym przykładzie kodu HTML chcę dodać dolną ramkę do wszystkich pozycji listy z wyjątkiem pierwszej i ostatniej. Mogę to osiągnąć na dwa sposoby. Pierwszy z nich polega na dodaniu klasy .last do kodu HTML tylko w przypadku ostatniego elementu. Drugi sposób sprowadza się do filtrowania selektora ul li za pomocą filtrów :first i :last. Na rysunku 3.10 przedstawiono dane wyjściowe przeglądarki po zastosowaniu dla listy tych filtrów.
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS
    
    Rysunek 3.10. Dane wyjściowe przeglądarki po zastosowaniu dla listy filtrów :first i :last
    
    
    
    
    
    Mój pasek boczny
    • Strona gówna
    • O nas
    • Usugi klienta
    • Kontakt
    • Kupony
    
    
    69
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    
    
    
    FILTROWANIE ELEMENTÓW ZAWIERAJĄCYCH KONKRETNY ELEMENT Być może postanowisz dodać filtr znajdujący tylko te elementy, które zawierają konkretny element. W tych przypadkach możesz użyć filtru has(). Element podrzędny zawarty wewnątrz innego nie musi być bezpośrednim elementem podrzędnym nadrzędnego kontenera. Element ten może być potomkiem. W poniższym przykładzie kodu HTML dodam filtr, który zwiększa rozmiar czcionki wyłącznie dla znaczników p znalezionych wewnątrz elementów div z nazwą klasy .content. Na rysunku 3.11 zaprezentowano dane wyjściowe przeglądarki w przypadku znacznika p zawartego w konkretnym elemencie.
    
    70
    
    Rysunek 3.11. Dane wyjściowe przeglądarki w przypadku znacznika p zawartego w konkretnym elemencie
    
    
    
    
    
    

    To jest moja tre.

    
    
    

    To jest inna tre.

    
    
    
    
    FILTROWANIE ELEMENTÓW, KTÓRE NIE ZAWIERAJĄ ŻADNEGO ELEMENTU ANI TEKSTU Możliwość znalezienia pustych elementów w modelu DOM może być przydatna. Jeśli na stronie istnieje pusty element, do znalezienia go możesz użyć filtru :empty. W poniższym przykładzie kodu HTML zamierzam ukryć element div błędu występującego w przypadku pustego elementu. Muszę jedynie wybrać klasę .error i dodać filtr :empty. Jeśli komunikat o błędzie zawiera treść, zostanie wyświetlony. W przeciwnym razie dla komunikatu zostanie zastosowany kod CSS display:none. Na rysunku 3.12 przedstawiono dane wyjściowe przeglądarki w przypadku napotkania przez selektor pustego elementu.
    
    Rysunek 3.12. Dane wyjściowe przeglądarki w przypadku napotkania przez selektor pustego elementu
    
    71
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    
    
    
    
    To jest mój komunikat o bdzie.
    
    

    To jest moja tre.

    
    
    

    To jest inna tre.

    
    
    
    
    72
    
    FILTROWANIE ELEMENTÓW ZAWIERAJĄCYCH TEKST W niektórych przypadkach może być wymagane filtrowanie selektorów na podstawie tekstu zawartego w elemencie. Umożliwia to filtr :contains. Tekst przekazywany do tego filtra można ująć w cudzysłów lub po prostu pozostawić w postaci zwykłego tekstu. W poniższym przykładzie kodu HTML zamierzam ukryć element div błędu występującego w przypadku pustego elementu. Muszę jedynie wybrać klasę .error i dodać filtr :empty. Jeśli komunikat o błędzie zawiera treść, zostanie wyświetlony. W przeciwnym razie dla komunikatu zostanie zastosowany kod CSS display:none. Na rysunku 3.13 przedstawiono dane wyjściowe przeglądarki po znalezieniu przez filtr komórki td, która zawiera określony łańcuch Rczniki papierowe.
    
    
    
    
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS
    
    Rysunek 3.13. Dane wyjściowe przeglądarki po znalezieniu przez filtr komórki td, która zawiera określony łańcuch Ręczniki papierowe

    Produkt	Opis	Cena
    Rczniki papierowe	Najlepiej wchaniajce rczniki papierowe.	18,99 z
    Serwetki papierowe	Doskonae na spotkaniach rodzinnych w plenerze.	16,99 z
    Tacki papierowe	Znakomita cena.	5,99 z
    Plastikowe widelce	Niezbdne akcesorium na piknik.	2,99 z

    
    
    73
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    WYBIERANIE ELEMENTÓW W MODELU DOM WEDŁUG ICH ATRYBUTÓW Atrybuty znacznika przydają się w przypadku przekazywania dodatkowych informacji o znaczniku lub interakcji z kodem JavaScript. Typowym znacznikiem HTML jest znacznik kotwicy , który może mieć następujące atrybuty: href, rel, id, class, title i hreflang. Wybieranie według atrybutu sprawdza się dobrze w przypadku pól formularza, gdyż możesz wyszukiwać wprowadzone dane na podstawie nazwy, typu, atrybutu, klasy, identyfikatora itp. Wybierając elementy z modelu DOM, możesz skorzystać z dowolnego atrybutu wymienionego w tabeli 3.3. Na atrybutach skoncentruję się w obszerniejszych kursach zamieszczonych w dalszej części książki. Na tym etapie zaprezentuję dwa typowe przykłady demonstrujące sposób pracy z nimi.
    
    Tabela 3.3. Składnie atrybutów i ich funkcje
    
    74
    
    Składnia atrybutu
    
    Funkcja atrybutu
    
    $('[atrybut*=warto]')
    
    Identyfikuje atrybuty, które zawierają podaną wartość w dowolnej części łańcucha (znak wieloznaczny).
    
    $('[atrybut|=warto]'
    
    Identyfikuje atrybuty o wartości rozpoczynającej się od łańcucha, po którym następuje łącznik (-), lub wartości równej temu łańcuchowi.
    
    $('[atrybut~=warto]')
    
    Identyfikuje atrybuty, które zawierają podaną wartość w dowolnej części łańcucha (z uwzględnieniem spacji).
    
    $('[atrybut$=warto]')
    
    Identyfikuje atrybuty zakończone podaną wartością.
    
    $('[atrybut=warto]')
    
    Identyfikuje atrybuty, które zawierają podaną wartość.
    
    $('[atrybut^=warto]')
    
    Identyfikuje atrybuty, które rozpoczynają się podaną wartością.
    
    $('[atrybut!=warto]')
    
    Identyfikuje atrybuty pozbawione podanej wartości.
    
    $('[atrybut=warto][atrybut= warto][atrybut=warto]')
    
    Identyfikuje wiele atrybutów.
    
    WYBIERANIE ODNOŚNIKÓW ZAWIERAJĄCYCH ADRES KONKRETNEJ WITRYNY INTERNETOWEJ Znak wieloznaczny użyty wraz z atrybutem to elastyczny i powszechnie stosowany filtr. Znak wieloznaczny (*) może posłużyć do szukania w modelu DOM dowolnych elementów, które zawierają konkretną wartość. Selektor taki jest bardzo szybki. Ręczne znajdowanie wszystkich takich elementów zajęłoby godziny. Dzięki użyciu selektora atrybutu ze znakiem wieloznacznym uzyskanie tego samego rezultatu to kwestia sekund. W poniższym przykładzie kodu HTML muszę znaleźć wszystkie odnośniki, których atrybuty HREF zawierają nazwę domeny google.com, a następnie dodać klasę CSS z niewielką ikoną witryny Google. Filtruję wszystkie atrybuty HREF, by znaleźć te, w których znajduje się domena google.com. Za pomocą metody addClass() dodaję następnie klasę .google-icon. Na rysunku 3.14 przedstawiono dane wyjściowe przeglądarki po znalezieniu przez filtr atrybutu domeny google.com.
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS
    
    Rysunek 3.14. Dane wyjściowe przeglądarki po znalezieniu przez filtr atrybutu domeny google.com
    
    
    
    
    • Google Analytics
    • Yahoo Sports
    
    
    75
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    WYBIERANIE WSZYSTKICH ELEMENTÓW ZAKOŃCZONYCH KONKRETNYM SŁOWEM Podobnie jak w przypadku użycia symbolu wieloznacznego dla atrybutów, za pomocą symbolu dolara ($) możesz wybierać wszystkie elementy zakończone konkretnym łańcuchem tekstowym. W poniższym przykładzie występują cztery elementy div z unikalnymi identyfikatorami, w których zamierzam umieścić typową klasę. Ponieważ identyfikatory wszystkich czterech elementów div są zakończone słowem bird, mogę skorzystać z selektora atrybutu i przeprowadzić operację wybierania przy użyciu ostatniego słowa (pod warunkiem, że jest to słowo bird). Na rysunku 3.15 pokazano dane wyjściowe przeglądarki po znalezieniu przez selektor atrybutu słowa bird.
    
    76
    
    Rysunek 3.15. Dane wyjściowe przeglądarki po znalezieniu przez selektor atrybutu słowa bird
    
    
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS
    
    
    
    
    
    MODYFIKOWANIE KODU HTML I CSS PRZY UŻYCIU BIBLIOTEKI JQUERY Poznanie sposobów użycia selektorów do nawigowania w obrębie modelu DOM to pierwszy krok do udanego opanowania biblioteki jQuery. Po wybraniu elementu konieczne jest jednak wykonanie dla niego jakiejś operacji, którą w tym przypadku jest dodawanie, usuwanie, klonowanie, zastępowanie lub dodawanie stylu. W dalszej części książki w przypadku wybranego elementu posługuję się terminem zbioru dopasowanego, gdyż mogę przyjąć, że selektor zwrócił element. Prawdziwa zabawa z biblioteką jQuery zaczyna się wraz z modyfikowaniem modelu DOM. Choć dotychczas wspomniałem o kilku sposobach dodawania do modelu DOM właściwości CSS, teraz zajmę się dokładniej tym zagadnieniem, pokazując, jak naprawdę możesz dostosować swoją stronę. Być może znane są Ci macierzyste funkcje języka JavaScript, które potrafią obsługiwać część z tych operacji edycji, jednak biblioteka jQuery pozwala na lepsze ich wykonanie przy użyciu składni łatwiejszej do opanowania i zapewniającej mniejszą ilość kodu. Podobnie do modyfikowania elementów HTML na stronie internetowej, możesz też zmieniać jej treść.
    
    DODAWANIE, USUWANIE, KLONOWANIE I ZASTĘPOWANIE ELEMENTÓW I TREŚCI MODELU DOM Biblioteka jQuery oferuje wyjątkowo duże możliwości dodawania, usuwania, zastępowania i klonowania elementów oraz treści modelu DOM. Załóżmy, że pracuję w firmie, w której w razie konieczności zmodyfikowania kodu HTML strony muszę skontaktować się z programistą odpowiedzialnym za oprogramowanie zaplecza. Osoba ta musi następnie skompilować kod HTML, zanim zostaną wyświetlone wprowadzone przeze mnie zmiany. Jest to czasochłonny proces, zwłaszcza w przypadku drobnych modyfikacji. W tej sytuacji naprawdę przydatny okazuje się język JavaScript. Dokonywanie aktualizacji plików JavaScript na serwerze produkcyjnym stanowi mniej angażujący proces wdrożeniowy niż wysyłanie szablonów stron, plików konfiguracyjnych itp. Do modyfikowania modelu DOM używam biblioteki jQuery i stylów CSS. Jest to znacznie szybsze rozwiązanie niż kontaktowanie się z programistą odpowiedzialnym za oprogramowanie zaplecza.
    
    77
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    Dodawanie kodu HTML do modelu DOM Metoda .html() używa macierzystej właściwości innerHTML. Działanie tej metody polega na pobieraniu kodu html() lub przekazywaniu metodzie argumentu (kodu HTML) umieszczonego w nawiasach okrągłych. Konieczne jest zrozumienie, że metoda .html() pobiera elementy modelu DOM zawarte wewnątrz określonego selektora. Na rysunku 3.16 przedstawiono dane wyjściowe przeglądarki po załadowaniu modelu DOM i zastosowaniu metody .html().
    
    78
    
    Rysunek 3.16. Dane wyjściowe przeglądarki po załadowaniu modelu DOM i zastosowaniu metody .html()
    
    
    
    

    Biegam 4 razy w tygodniu.

    
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS

    Podnosz ciary 3 razy w tygodniu.

    
    
    
    
    Dodawanie tekstu do elementu modelu DOM Metoda text() działa dokładnie tak jak metoda .html() z tą różnicą, że z dopasowanego elementu pobiera jedynie tekst w postaci łańcucha. Te dwie metody działają na dwa sposoby: uzyskują wartości i ustawiają je, przekazując argumenty. Nie możesz przekazać do elementu tekstowego kodu HTML, a jedynie łańcuchy. $('.content').text('Testowanie. 1, 2, 3.');
    
    Dołączanie kodu HTML na końcu i na początku elementu Jeśli zamierzasz umieścić kod HTML wewnątrz elementu, możesz w tym celu użyć metody append() lub metody prepend(). Pierwsza z nich dodaje kod na końcu, a druga na początku wybranego elementu. Kod HTML wprowadzony w nawiasach okrągłych zawsze jest wstawiany przed lub po ostatnim elemencie podrzędnym wewnątrz wybranego elementu. Na rysunku 3.17 zaprezentowano dane wyjściowe przeglądarki po dołączeniu łańcucha do klasy content.
    
    79
    
    Rysunek 3.17. Dane wyjściowe przeglądarki po dołączeniu łańcucha do klasy content
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    
    
    
    
    

    Biegam 4 razy w tygodniu.

    Podnosz ciary 3 razy w tygodniu.

    
    
    
    
    Dodawanie kodu HTML przed elementami modelu DOM i po nich 80
    
    Metody before() i after() bardzo przypominają metody append() i prepend(). Podstawowa różnica między nimi polega na miejscu, w którym jest wstawiany kod HTML. Zamiast wewnątrz wybranego elementu kod jest umieszczany przed nim i po nim. Na rysunku 3.18 przedstawiono dane wyjściowe przeglądarki po wstawieniu łańcucha za klasą content.
    
    Rysunek 3.18. Dane wyjściowe przeglądarki po wstawieniu łańcucha za klasą content
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS
    
    
    
    
    
    

    Biegam 4 razy w tygodniu.

    Podnosz ciary 3 razy w tygodniu.

    
    
    
    
    Usuwanie elementów HTML z modelu DOM Metoda remove() przydaje się w przypadku usuwania elementów z modelu DOM. Jako projektant stron internetowych mam w zwyczaju ukrywać element przy użyciu kodu CSS, niemniej jednak możesz alternatywnie użyć metody remove() do całkowitego usunięcia elementu ze strony. Metoda .remove() jest bardzo prosta w użyciu — wystarczy dodać ją do selektora. Po przygotowaniu modelu DOM element zostanie usunięty. Możesz też usunąć określone elementy podrzędne lub potomne, wybierając element nadrzędny i przekazując metodzie remove() element podrzędny względem niego. W poniższym przykładzie kodu HTML zaprezentowano metodę remove() w akcji. Na rysunku 3.19 pokazano dane wyjściowe przeglądarki po usunięciu z modelu DOM klasy content.
    
    
    
    81
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    82
    
    Rysunek 3.19. Dane wyjściowe przeglądarki po usunięciu klasy content z modelu DOM
    
    

    Biegam 4 razy w tygodniu.

    Podnosz ciary 3 razy w tygodniu.

    
    
    
    
    Klonowanie elementów HTML Może wystąpić sytuacja, w której konieczne będzie skopiowanie elementu z modelu DOM i umieszczenie go w innym miejscu. Biblioteka jQuery oferuje metodę o nazwie clone(), która klonuje dowolny wybrany element. Po sklonowaniu go możesz wstawić go w dowolnym żądanym miejscu, korzystając z innych metod modyfikujących takich jak metoda append(). Oto przykładowy kod: $('.product').clone().append('.product');
    
    PRACA ZE STYLAMI CSS I BIBLIOTEKĄ JQUERY Można odnieść wrażenie, że style CSS i bibliotekę jQuery stworzono z myślą o ich łącznym wykorzystaniu. Często zastanawiam się, jak mogłem przez tak długi czas radzić sobie bez biblioteki jQuery, zwłaszcza wtedy, gdy wyjątkowo intensywnie korzystałem ze stylów CSS. Dotychczas w większości moich przykładów w celu dodania właściwości CSS do elementów
    
    ROZDZIAŁ 3: UŻYWANIE SELEKTORÓW, FILTRÓW I STYLÓW CSS HTML na stronie używałem metody .css(). Jej wadą jest to, że dodaje ona do kodu HTML style wstawiane. Jeśli wolisz zachować większą przejrzystość kodu, sugerowałbym dodawanie i usuwanie klas. W tabeli 3.4 wyszczególniono wszystkie metody dostępne do użycia podczas pracy z biblioteką jQuery.
    
    Tabela 3.4. Używane metody CSS i ich możliwości Nazwa metody
    
    Przeznaczenie
    
    .css()
    
    Umożliwia pobranie lub dodanie właściwości CSS do dowolnego elementu.
    
    .addClass()
    
    Umożliwia dodanie klasy CSS do dowolnego elementu.
    
    .hasClass()
    
    Umożliwia testowanie, jeśli element ma klasę.
    
    .removeClass()
    
    Umożliwia usunięcie klasy CSS z dowolnego elementu.
    
    .toggleClass()
    
    Umożliwia dodanie i usunięcie klas CSS z dowolnego elementu.
    
    Dodawanie stylów CSS do elementu modelu DOM Jeśli w całości przeczytano niniejszy rozdział, na tym etapie nie powinno stanowić problemu dodanie stylu CSS do dowolnego elementu w modelu DOM, ponieważ z metody css() korzystałem we wszystkich przykładach kodów. Jest to przydatna metoda, zwłaszcza w przypadku testowania układu i dodawania ramek do wszystkich elementów. $('.container').css('border','1px solid #333');
    
    Dodawanie klasy do elementu modelu DOM Aby dodać klasę do istniejącego elementu modelu DOM, możesz użyć metody addClass(). Jej działanie polega na przekazaniu nazwy dodawanej klasy w nawiasach okrągłych znajdujących się za nazwą metody addClass. Dodając nazwę klasy, nie musisz uwzględniać znaku kropki. $('.container').addClass('active');
    
    Jeśli element modelu DOM, do którego jest dodawana klasa, zawiera już klasę, dodatkowa klasa zostanie dodana za nią. Jeśli zamierzasz przekazać wiele klas do zbioru dopasowanego, wystarczy pamiętać o oddzieleniu na liście każdej klasy spacją. $('.container').addClass('active book');
    
    Klasy możesz dodawać nie tylko przez ich wybranie. Istnieje również możliwość dodawania klas do identyfikatora oraz innych znaczników HTML. $('#page-wrap').addClass('alternate');
    
    83
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    Usuwanie klasy z elementu modelu DOM Konieczna jest też umiejętność usuwania klasy z elementu. Przebiega to w ten sam sposób co w przypadku dodawania klasy, lecz zamiast metody o nazwie addClass() stosujesz metodę removeClass(). $('#page-wrap').removeClass('alternate');
    
    Jeśli metodzie nie przekazano żadnej nazwy klasy, zostanie usunięta dowolna klasa w określonym zbiorze dopasowanym. $('#page-wrap').removeClass();
    
    Możesz też usunąć wiele klas, umieszczając je kolejno w metodzie i oddzielając spacjami. $('#page-wrap').removeClass('alternate main product');
    
    Przełączanie klasy w elemencie modelu DOM Przełączanie polega na wyłączeniu lub włączeniu czegoś. Metoda toggleClass() przydaje się podczas pracy z dynamicznymi aplikacjami internetowymi, w przypadku których nie zawsze wiadomo, czy element znajduje się w stanie włączonym, czy wyłączonym.
    
    84
    
    W poniższym przykładzie przełączam klasę .alternate w elemencie div #page-wrap. Jeśli klasa nie istnieje, zostanie dodana i odwrotnie. $('#page-wrap').toggleClass('alternate');
    
    4 ROZDZIAŁ
    
    PODRĘCZNIK JQUERY
    
    PRACA ZE ZDARZENIAMI
    
    PRACA ZE ZDARZENIAMI w przypadku biblioteki jQuery w dużym stopniu przypomina pracę ze stylami CSS w kodzie HTML. Zdarzenia są oddzielone od elementów, do których są dowiązywane. W macierzystym języku JavaScript wszystkie zdarzenia są osadzane bezpośrednio w kodzie HTML, co znacznie utrudnia zarządzanie zdarzeniami niestandardowymi i zwiększa ryzyko popsucia czegoś. Choć wszystkie te funkcje znajdują się w pliku zewnętrznym, są dodawane do elementów jako kod wstawiany JavaScript. Oznacza to, że jeśli coś zostanie zmodyfikowane w jednym elemencie, konieczne będzie zaktualizowanie
    
    ich wszystkich. W bibliotece jQuery cała obsługa wybierania elementów i zdarzeń jest realizowana poza modelem DOM w pliku JavaScript. Biblioteka jQuery obsługuje wszystkie własne zdarzenia języka JavaScript, a ponadto znacznie ułatwia integrowanie ich z witrynami i aplikacjami internetowymi. W tym rozdziale dokonam przeglądu zdarzeń dostępnych za pośrednictwem interfejsu API biblioteki jQuery, zaprezentuję każde zdarzenie oraz sposób jego działania, a następnie omówię kilka rzeczywistych sytuacji.
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    ZDARZENIA BIBLIOTEKI JQUERY Zdarzenia biblioteki jQuery stanowią zasadniczą część każdej aplikacji witryny lub strony internetowej. W początkach swojego istnienia internet oferował jedynie statyczny tekst, obrazy i hiperłącza. Wraz z postępem technologicznym zaczęto tworzyć bardziej dynamiczne strony internetowe wchodzące w interakcję z bazą danych. Równolegle z coraz większym zaawansowaniem technologii zaplecza rozwijały się technologie interfejsowe takie jak Adobe Flash i JavaScript, które zapewniły kolejny wymiar interaktywności. Hiperłącza przyjęły postać podmienianych obrazów i menu rozwijanych, obrazy zamieniły się w interaktywne galerie z możliwościami edycji, a statyczny tekst zastąpiono bogatymi w możliwości i dynamicznymi wyszukiwarkami takimi jak wyszukiwarka ofert turystycznych Kayak zapewniająca widok oparty na mapie (rysunek 4.1). Biblioteka jQuery umożliwia użycie wszystkich własnych zdarzeń JavaScript do gromadzenia interakcji użytkowników posługujących się klawiaturą i myszą, pozwala to jednak osiągnąć przy użyciu mniejszej ilości kodu i łatwiejszej do zrozumienia składni. Tak właśnie działa jQuery!
    
    86
    
    Rysunek 4.1. Wiele różnego typu zdarzeń umożliwia wizualne dokonywanie rezerwacji hotelowych przy użyciu mapy dostępnej w witrynie internetowej Kayak
    
    ROZDZIAŁ 4: PRACA ZE ZDARZENIAMI
    
    PRACA ZE ZDARZENIAMI DOKUMENTÓW I OKIEN W tabeli 4.1 zaprezentowano typowe zdarzenia dokumentów i okien biblioteki jQuery. Są to istotne zdarzenia, o których zawsze należy pamiętać podczas pisania kodu jQuery. W tabeli opisano każde z nich wraz z jego przeznaczeniem. Dzięki temu możesz szybko je porównać, aby mieć pewność, że w przypadku własnego skryptu zastosujesz najodpowiedniejsze z nich.
    
    Tabela 4.1. Zdarzenia dokumentów i okien biblioteki jQuery Nazwa zdarzenia
    
    Funkcja zdarzenia
    
    ready()
    
    Aktywowane po załadowaniu dokumentu HTML.
    
    load()
    
    Aktywowane po załadowaniu wszystkich zasobów.
    
    unload()
    
    Aktywowane po zamknięciu okna przeglądarki lub po przejściu użytkownika do nowej strony za pośrednictwem paska adresu lub odnośnika.
    
    resize()
    
    Aktywowane po zmianie przez użytkownika rozmiaru okna przeglądarki.
    
    scroll()
    
    Aktywowane po zainicjowaniu przez użytkownika przewijania.
    
    error()
    
    Aktywowane po odebraniu błędu z żądania HTTP.
    
    WYKRYWANIE CAŁKOWITEGO ZAŁADOWANIA MODELU DOM PRZY UŻYCIU ZDARZENIA READY() Zdarzenie ready() jest jednym z często używanych zdarzeń, które służy do sprawdzenia, czy poprawnie załadowano model DOM (Document Object Model). Po przygotowaniu modelu DOM zdarzenie to powoduje wykonanie dowolnego kodu JavaScript lub jQuery zadeklarowanego w nawiasach za nazwą zdarzenia. Program obsługi zdarzenia ready dokumentu umożliwia umieszczenie całego kodu jQuery JavaScript wewnątrz tego zdarzenia jako kodu wstawianego lub kodu znajdującego się w pliku zewnętrznym. Dzięki temu zapewnia się wykonanie kodu po przygotowaniu modelu DOM. Program obsługi zdarzeń jest funkcją, która realizuje zdarzenie po jego wystąpieniu. Przed dokonaniem jakiejkolwiek modyfikacji modelu DOM bardzo ważne jest użycie programu obsługi zdarzenia ready dokumentu w celu upewnienia się, że dokument został poprawnie załadowany. Jeśli nie zastosujesz tego zdarzenia, prawdopodobnie kod nie zadziała w zamierzony sposób. $(document).ready() { alert("Model DOM jest gotowy."); });
    
    Zdarzenie ready idealnie nadaje się do upewniania się, czy dokument jest gotowy. Zdarzenie to nie uwzględnia jednak zasobów strony takich jak obrazy lub plik wideo. Aby sprawdzenie dotyczyło załadowanych zasobów, możesz użyć zdarzenia load() biblioteki jQuery, które przedstawiono w poniższym kursie.
    
    87
    
    CZĘŚĆ II: BIBLIOTEKA JQUERY — PODSTAWY
    
    WSTĘPNE ŁADOWANIE OBRAZÓW PRZY UŻYCIU ZDARZENIA LOAD() Wstępne ładowanie obrazów sprawdza się w przypadku korzystania z wielu obrazów, które mają zostać udostępnione od razu w momencie rozpoczęcia wykonywania przez użytkownika określonej operacji na stronie. W związku z tym zaprezentuję przykład metody wstępnego załadowania pięciu obrazów, a następnie dodania ich do modelu DOM. Dla użytkownika konieczność długiego czekania na załadowanie się obrazów na stronie jest jednym z najgorszych doświadczeń. W przykładzie wyeliminowano tę sytuację. Używane przeze mnie obrazy są duże, a ponadto nie zoptymalizowano ich pod kątem zastosowań internetowych. Oznacza to, że ich wielkość zawiera się w przedziale od 100 do 200 kB. 1. Używając własnej tablicy języka JavaScript, utwórz tablicę o nazwie imgArray. Tablica powinna przechowywać wszystkie nazwy plików obrazów dodawanych do strony. Dzięki zastosowaniu jej nie trzeba tworzyć pięciu oddzielnych instrukcji dodających obrazy.
    
    88
    
    var imgArray = ["loc_portrait1.jpg", "loc_portrait2.jpg", "loc_portrait3.jpg", "loc_portrait4.jpg", "loc_portrait5.jpg"];
    
    2. Dodaj dwie kolejne zmienne, które zostaną użyte w pętli for definiowanej w następnym kroku. Zmienna imgArrLength przechowuje wartość zwracaną dla długości tablicy. Z kolei zmienna i pełni rolę indeksu pętli for. Indeks w tablicy zawsze rozpoczyna się od wartości 0, chyba że jest to tablica asocjacyjna. var imgArrLength = imageArray.length; var i = 0;
    
    3. Utwórz pętlę for. Ustaw wartość zmiennej i, tak by była mniejsza lub równa wartości zmiennej imgArrLength. Pętla for jest wykonywana do momentu osiągnięcia długości tablicy wynoszącej 5. for (i=0;i< imgArrLength ;i++) { }
    
    Ponieważ indeks zawsze rozpoczyna się od wartości 0, nawet pomimo tego, że w tablicy występuje pięć elementów, maksymalną wartością indeksu jest 4. W następującym kodzie zademonstrowano tworzenie indeksu za pomocą wartości od 0 do 4: imgArray[0] imgArray[1] imgArray[2] imgArray[3] imgArray[4]
    
    = = = = =
    
    "loc_portrait1.jpg"; "loc_portrait2.jpg"; "loc_portrait3.jpg"; "loc_portrait4.jpg"; "loc_portrait5.jpg";
    
    ROZDZIAŁ 4: PRACA ZE ZDARZENIAMI 4. Po jej uruchomieniu pętla dodaje element obrazu każdorazowo aż do zakończenia jej wykonywania. Używając metody .attr, jako źródło obrazu ustaw nazwę pliku, a jako identyfikator id obrazu łańcuch img i wartość indeksu (na przykład id=img1). for (i=0;i