Issuu on Google+


jQuery 1.3. Wprowadzenie Autorzy: Jonathan Chaffer, Karl Swedberg, John Resig T³umaczenie: Anna Trojan ISBN: 978-83-246-2641-0 Tytu³ orygina³u: Learning jQuery 1.3 Format: 170230, stron: 424

Jêzyk JavaScript po blisko piêtnastu latach na rynku dalej ma siê dobrze. Interaktywne strony, interesuj¹ce efekty oraz technologia AJAX sprawiaj¹, ¿e wci¹¿ jest bardzo atrakcyjnym narzêdziem, a aplikacje internetowe z ka¿dym rokiem coraz bardziej zaczynaj¹ przypominaæ te znane z codziennej pracy. Biblioteka jQuery pozwala na jeszcze wiêcej przy zdecydowanie mniejszym nak³adzie pracy! Niemo¿liwe? Przekonaj siê sam! W trakcie lektury tej ksi¹¿ki poznasz tajniki biblioteki jQuery oraz atuty, dziêki którym zyska³a ona tak¹ rzeszê fanów. Autorzy omawiaj¹ wszystkie zagadnienia zwi¹zane z t¹ bibliotek¹. Na samym pocz¹tku nauczysz siê korzystaæ z selektorów oraz zdarzeñ, aby nastêpnie przejœæ do zaawansowanych tematów zwi¹zanych z AJAX-em oraz edycj¹ drzewa DOM. Rozdzia³ poœwiêcony efektom specjalnym bêdzie jednym z tych, które pozwol¹ Ci wykrzesaæ jeszcze wiêcej porywaj¹cych efektów z Twojego kodu. Olœniewaj¹ce galerie, pokazy slajdów, interaktywne formularze s¹ w zasiêgu Twoich mo¿liwoœci! Pod koniec ksi¹¿ki dowiesz siê, jak wykorzystywaæ dodatki oraz tworzyæ w³asne. Trzymasz w rêkach d³ugo oczekiwan¹ na polskim rynku pozycjê, poœwiêcon¹ niezwyk³ej bibliotece! • Przeznaczenie biblioteki jQuery • Wykorzystanie selektorów • Wykorzystanie mechanizmu zdarzeñ • Zdarzenia z³o¿one • U¿ycie efektów specjalnych • Modyfikowanie arkuszy CSS „w locie” • Edycja drzewa DOM • Metody na ³atwiejsze wykorzystanie technologii AJAX • Operacje na tabelach • Praca z formularzami • Instalowanie oraz wykorzystanie dodatków • Tworzenie w³asnych dodatków dla jQuery Uzyskaj jeszcze wiêcej z jêzyka JavaScript!


Spis treci Przedmowa

11

O autorach

13

O korektorach

15

Wprowadzenie

17

Rozdzia 1. Pocztki

23

Co robi jQuery Dlaczego jQuery dziaa dobrze Historia projektu jQuery Nasza pierwsza strona z jQuery Pobranie jQuery Utworzenie dokumentu HTML Dodanie jQuery Gotowy produkt Podsumowanie

Rozdzia 2. Selektory DOM Funkcja fabryczna $() Selektory CSS Stylizacja poziom贸w zagniedenia listy Selektory atrybut贸w Stylizacja odnonik贸w Wasne selektory Stylizacja co drugiego wiersza Selektory formularzy

23 25 26 27 27 27 30 33 33

35 35 36 37 38 40 40 42 42 45


Spis treci

Metody przechodzenia drzewa DOM Stylizacja wybranych komórek czenie w acuch Dostp do elementów DOM Podsumowanie

Rozdzia 3. Zdarzenia Wykonywanie zada w momencie zaadowania strony Czas wykonania kodu Wiele skryptów na jednej stronie Skróty poprawiajce zwizo kodu Wspóistnienie z innymi bibliotekami Proste zdarzenia Prosty przecznik stylów Skrótowa obsuga zdarze Zdarzenia zoone Pokazywanie i ukrywanie zaawansowanych opcji Wyrónianie elementów, które mona klikn Podró zdarzenia Efekty uboczne propagacji zdarze Zmiana podróy — obiekt zdarzenia Element docelowy zdarzenia Zatrzymanie propagacji zdarze Dziaania domylne Delegacja zdarze Usuwanie programu obsugi zdarze Przestrzenie nazw zdarze Ponowne dowizanie zdarzenia Symulacja interakcji z uytkownikiem Zdarzenia klawiatury Podsumowanie

Rozdzia 4. Efekty Modyfikacja CSS w locie Proste ukrywanie i pokazywanie Efekty a szybko Przyspieszanie Pojawianie si i znikanie Efekty zoone Tworzenie wasnych animacji Przeczanie znikania Animacja z uyciem wielu waciwoci Efekty jednoczesne a kolejkowane Praca z jednym zbiorem elementów Praca z wieloma zbiorami elementów Funkcje zwrotne W skrócie Podsumowanie

4

45 46 48 48 49

51 51 51 52 53 54 55 55 63 64 64 66 67 69 70 71 71 72 72 75 75 76 78 79 81

83 83 87 90 90 91 91 93 94 94 97 97 100 102 104 104


Spis treci

Rozdzia 5. Edycja drzewa DOM Edycja atrybutów Atrybuty inne od klas Jeszcze raz funkcja fabryczna $() Wstawianie nowych elementów Przenoszenie elementów Oznaczenie, ponumerowanie i utworzenie odnonika do kontekstu Dodanie przypisów dolnych Opakowanie elementów Kopiowanie elementów Klonowanie ze zdarzeniami Klonowanie cytatów wyrzuconych Nieco o CSS Powrót do kodu Upikszenie cytatów wyrzuconych Metody edycji drzewa DOM w skrócie Podsumowanie

Rozdzia 6. Ajax adowanie danych na danie Dodawanie kodu HTML Praca z obiektami JavaScriptu adowanie dokumentu XML Wybór formatu danych Przekazywanie danych do serwera Wykonanie dania GET Wykonanie dania POST Serializacja formularza

ledzenie dania Ajax a zdarzenia Ograniczenia w zakresie bezpieczestwa Wykorzystanie JSONP dla danych zewntrznych Dodatkowe opcje Niskopoziomowa metoda Ajaksa Modyfikacja opcji domylnych adowanie czci strony HTML Podsumowanie

Rozdzia 7. Przetwarzanie tabel Sortowanie i podzia na strony Sortowanie po stronie serwera Sortowanie za pomoc JavaScriptu Paginacja po stronie serwera Paginacja w JavaScripcie Gotowy kod

105 105 106 108 110 111 115 117 119 120 121 121 122 122 125 126 128

129 130 131 134 141 144 145 146 149 150 152 155 156 157 158 159 159 160 162

165 166 166 167 183 185 190

5


Spis treci

Modyfikacja wygldu tabeli Wyrónianie wierszy Podpowiedzi Zwijanie i rozwijanie czci tabeli Filtrowanie Gotowy kod Podsumowanie

Rozdzia 8. Formularze i ich funkcje

192 192 199 205 207 212 215

217

Ulepszenie prostego formularza Progresywne ulepszanie stylu formularzy Pola wywietlane warunkowo Sprawdzanie poprawnoci formularza Edycja pól wyboru Gotowy kod Zwize formularze Tekst pojemnika na pola formularza Autouzupenianie oparte na Ajaksie Gotowy kod Praca z danymi liczbowymi formularza Struktura tabeli koszyka z zakupami Odrzucanie danych nieliczbowych Obliczenia arytmetyczne Usuwanie elementów Edycja informacji o wysyce Gotowy kod Podsumowanie

217 218 224 227 234 237 239 239 242 250 253 253 256 256 263 267 270 272

Rozdzia 9. Rotacja i przesuwanie elementów

273

Rotacja wiadomoci Konfiguracja strony Pobieranie wiadomoci z kanau RSS Konfiguracja rotacji elementów Funkcja rotacji wiadomoci Pauza po najechaniu mysz Pobieranie wiadomoci RSS z innej domeny Gradientowy efekt blaknicia Gotowy kod Karuzela obrazków Konfiguracja strony Przesuwanie obrazków po klikniciu Powikszanie obrazków Gotowy kod Podsumowanie

6

274 274 276 279 280 282 285 286 289 290 291 294 301 313 316


Spis treci

Rozdzia 10. Wykorzystywanie dodatków Znalezienie dodatku i uzyskanie pomocy Jak korzysta z dodatku Dodatek Form Wskazówki i sztuczki Biblioteka dodatków jQuery UI Efekty Komponenty interakcji Widety ThemeRoller w jQuery UI Inne polecane dodatki Formularze Tabele Obrazki Ramki z obrazkami i okna dialogowe Wykresy Zdarzenia Podsumowanie

Rozdzia 11. Tworzenie dodatków Dodawanie nowych funkcji globalnych Dodanie wikszej liczby funkcji Jaki to ma sens? Tworzenie nowej metody pomocniczej Dodawanie metod obiektu jQuery Kontekst metody obiektu czenie metod w acuchy Metody przechodzenia drzewa DOM Dodawanie nowych metod skrótów Parametry metod Proste parametry Tablice asocjacyjne parametrów Domylne wartoci parametrów Funkcje zwrotne Dostosowywanie wartoci domylnych Dodanie wyraenia selektora Podzielenie si dodatkiem ze wiatem Konwencje nazewnictwa Uycie aliasu $ Interfejsy metod Styl dokumentacji Podsumowanie

Dodatek A róda internetowe Dokumentacja jQuery Wiki jQuery jQuery API

317 317 318 319 320 321 322 324 326 329 330 330 332 334 335 338 339 340

341 341 342 343 344 345 346 348 349 353 356 358 359 360 361 362 364 367 367 367 368 368 368

369 369 369 369

7


Spis treci

Przegldarka jQuery API Visual jQuery Przegldarka jQuery API w formacie Adobe AIR Informacje o JavaScripcie Mozilla developer center Dev.opera MSDN JScript Reference Quirksmode JavaScript Toolbox Kompresory kodu w JavaScripcie YUI Compressor JSMin Pretty printer Informacje o (X)HTML Strona hipertekstowego jzyka znaczników W3C Informacje o CSS Strona kaskadowych arkuszy stylów W3C

cigawka CSS Mezzoblue Position is everything Przydatne blogi Blog jQuery Learning jQuery Ajaxian John Resig JavaScript Robert’s talk Web standards with imagination Snook Strona Matta Snidera o JavaScripcie I can’t DOM scripting As days pass by A List Apart Platformy do programowania internetowego korzystajce z jQuery

Dodatek B Narzdzia programistyczne Narzdzia dla przegldarki Firefox Firebug Pasek narzdzi Web Developer Venkman Regular Expressions Tester Narzdzia dla przegldarki Internet Explorer Microsoft Internet Explorer Developer Toolbar Microsoft Visual Web Developer DebugBar Drip

8

370 370 370 370 370 370 371 371 371 371 371 372 372 372 372 372 373 373 373 373 373 374 374 374 374 374 374 375 375 375 375 375 375 376

377 377 377 378 378 378 378 379 379 379 379


Spis treci

Narzdzia dla przegldarki Safari Programowanie Menu Inspektor www Narzdzia dla przegldarki Opera Dragonfly Inne narzdzia Firebug Lite NitobiBug Pakiet jQuery dla edytora TextMate Charles Fiddler Aptana

380 380 380 380 380 381 381 381 381 381 382 382

Dodatek C Domknicia w JavaScripcie

383

Funkcje wewntrzne Wielka ucieczka Zakresy zmiennych Interakcje midzy domkniciami Domknicia w jQuery Argumenty $(document).ready() Programy obsugi zdarze Zagroenia wynikajce z wycieku pamici Przypadkowe ptle odwoania Problem z wyciekiem pamici w przegldarce Internet Explorer Dobra wiadomo Podsumowanie

Dodatek D Podrczne informacje Wyraenia selektor贸w Metody przechodzenia drzewa DOM Metody zdarze Metody efekt贸w Metody edycji drzewa DOM Metody Ajaksa Pozostae metody

Skorowidz

384 385 386 388 389 389 390 392 393 394 395 395

397 397 399 400 403 404 406 407

409

9


1 Pocztki Dzisiejszy Internet to dynamiczne rodowisko, a jego uytkownicy wysoko stawiaj poprzeczk, zarówno jeli chodzi o styl, jak i o funkcje stron internetowych. By móc tworzy interesujce i interaktywne witryny, programici sigaj po biblioteki JavaScriptu, takie jak jQuery, które pomagaj im automatyzowa czsto wykonywane zadania i upraszcza te bardziej skomplikowane. Jednym z powodów, dla których biblioteka jQuery cieszy si takim powodzeniem, jest to, e jest w stanie wspomóc programist w wielu rónych zadaniach. Waciwie trudno jest zadecydowa , od czego zacz , poniewa jQuery ma tyle rónych funkcji. Mimo to struktura biblioteki jest bardzo spójna i symetryczna — wikszo jej koncepcji zapoyczono z projektów takich, jak HTML i kaskadowe arkusze stylów (CSS). Sama struktura biblioteki uatwia zaczcie pracy projektantom z niewielkim dowiadczeniem programistycznym, poniewa wielu twórców stron internetowych ma o wiele wiksze dowiadczenie z HTML i CSS ni z JavaScriptem. Ju w pierwszym rozdziale ksiki napiszemy zreszt w jQuery dziaajcy program skadajcy si z trzech wierszy kodu. Z drugiej strony równie dowiadczeni programici skorzystaj na tej konceptualnej spójnoci, o czym przekonamy si w dalszych, bardziej zaawansowanych rozdziaach. Przyjrzyjmy si zatem temu, co moe dla nas zrobi jQuery.

Co robi jQuery Biblioteka jQuery udostpnia ogólny poziom abstrakcji sucy do tworzenia skryptów na potrzeby czsto spotykanych zada, dziki czemu przydatna jest w niemal kadej sytuacji wymagajcej napisania skryptu. Rozszerzalna natura biblioteki oznacza, e nigdy nie udaoby nam si opisa wszystkich jej moliwych zastosowa i funkcji w jednej ksice, poniewa dodatki cigle s tworzone, dokadajc nowe moliwoci. Najwaniejsze funkcje jdra biblioteki s jednak nastpujce:


jQuery 1.3. Wprowadzenie

Q Uzyskanie dostpu do elementów dokumentu. Bez biblioteki JavaScriptu

przejcie drzewa DOM (ang. Document Object Model) i lokalizacja wybranych czci struktury dokumentu HTML wymaga napisania wielu wierszy kodu. jQuery oferuje rozbudowany i wydajny mechanizm selektorów sucy do pobierania fragmentu dokumentu, który ma by przejrzany lub zmodyfikowany. Q Modyfikowanie wygldu strony internetowej. CSS oferuje metod wpywania

na sposób wywietlania dokumentu, jednak na niewiele si przydaje, kiedy nie wszystkie przegldarki obsuguj te same standardy. Dziki jQuery programici s w stanie wypeni t luk, polegajc na obsudze tych samych standardów we wszystkich przegldarkach. Dodatkowo jQuery jest w stanie modyfikowa klasy lub pojedyncze waciwoci stylu zastosowane do czci dokumentu nawet po wygenerowaniu strony. Q Zmiana zawartoci dokumentu. jQuery nie ogranicza si jednak do zmian czysto

kosmetycznych — jest w stanie zmodyfikowa zawarto samego dokumentu za pomoc kilku nacini klawiatury. Mona zmienia tekst, wstawia lub podmienia obrazki, zmienia kolejno list lub przepisa bd rozszerzy ca struktur HTML — wszystko za pomoc jednego, atwego w uyciu API (ang. Application Programming Interface). Q Reagowanie na interakcj z uytkownikiem. Nawet najbardziej wyszukane dziaania

nie s szczególnie przydatne, jeli nie moemy kontrolowa tego, kiedy nastpuj. Biblioteka jQuery oferuje elegancki sposób przechwytywania rónego rodzaju zdarze — takich jak kliknicie odnonika przez uytkownika — bez koniecznoci zamiecania kodu HTML programami obsugi zdarze. Jednoczenie API suce do obsugi zdarze likwiduje niezgodnoci midzy przegldarkami, które s dla programistów internetowych prawdziw katorg. Q Animacja zmian wprowadzanych do dokumentu. By efektywnie implementowa

tego typu dziaania interaktywne, projektant musi da uytkownikowi jakie wizualne informacje zwrotne. Biblioteka jQuery umoliwia to, udostpniajc wiele efektów (takich jak blaknicie czy animowane przejcia), a take suc jako narzdzie do tworzenia nowych efektów. Q Pobieranie informacji z serwera bez odwieania strony. Ten wzorzec kodu

znany jest jako Ajax (od Asynchronous JavaScript and XML) i wspomaga programistów w tworzeniu bogatych w moliwoci oraz reagujcych na dziaanie uytkownika stron. Biblioteka jQuery likwiduje z tego procesu cz zwizan z rónicami midzy poszczególnymi przegldarkami, pozwalajc programistom na skupienie si na funkcjonalnoci po stronie serwera. Q Uproszczenie czsto spotykanych zada wykonywanych za pomoc JavaScriptu.

Oprócz wszystkich moliwoci jQuery zwizanych z obsug dokumentów biblioteka ta udostpnia take ulepszenia dla podstawowych konstrukcji jzyka JavaScript, takich jak iteracja i modyfikacja tablic.

24


Rozdzia 1. • Pocztki

Dlaczego jQuery dziaa dobrze Wraz ze wzrostem zainteresowania dynamicznym HTML pojawio si mnóstwo bibliotek i platform opartych na JavaScripcie. Niektóre z nich s wyspecjalizowane i skupiaj si tylko na jednym bd dwóch z wymienionych wyej zada. Inne staraj si skatalogowa wszystkie moliwe dziaania i animacje, udostpniajc je jako gotowy pakiet. By zachowa szerok gam moliwoci przedstawionych powyej, ale te niewielki rozmiar, jQuery przyjmuje kilka strategii: Q Wykorzystanie znajomoci CSS. Opierajc mechanizm lokalizacji elementów

strony na selektorach CSS, jQuery dziedziczy zwizy, a jednoczenie czytelny sposób wyraania struktury dokumentu. Biblioteka jQuery staje si punktem wyjcia dla projektantów, którzy chc dodawa do swych stron rónorodne dziaania, gdy znajomo skadni CSS jest podstaw zawodowego tworzenia witryn internetowych. Q Obsuga dodatków. W celu uniknicia przeadowania funkcjami jQuery przenosi

specjalne zastosowania do dodatków. Metoda tworzenia nowych dodatków jest prosta i dobrze udokumentowana, co pobudzio rozwój duej liczby pomysowych i przydatnych moduów. Nawet w podstawowym pliku jQuery wikszo opcji wewntrznie korzysta z architektury dodatków, dziki czemu mona je w miar potrzeby usun , uzyskujc jeszcze mniejsz bibliotek. Q Abstrakcja niezgodnoci midzy przegldarkami. Tragedi programistów stron

internetowych jest to, e kada przegldarka ma swój wasny zbiór odchyle od opublikowanych standardów. Znaczna cz procesu tworzenia kadej aplikacji internetowej przypada na obsug tych samych funkcji w inny sposób dla kadej z platform. Cho cigle ewoluujcy wiat przegldarek sprawia, e w przypadku bardziej zaawansowanych funkcji stworzenie podstaw kodu cakowicie neutralnych dla przegldarki jest niemoliwe, jQuery dodaje poziom abstrakcji normalizujcy czsto wykonywane zadania, zmniejszajcy wielko kodu i znacznie go upraszczajcy. Q Praca ze zbiorami. Kiedy nakazujemy jQuery odnalezienie wszystkich elementów klasy collapsible, a nastpnie ukrycie ich, nie ma potrzeby wykonywania ptli po kadym zwracanym elemencie. Zamiast tego metody takie jak .hide()

zaprojektowano w taki sposób, by automatycznie dziaay na zbiorze obiektów, a nie tylko na pojedynczych obiektach. Technika ta, zwana niejawn iteracj, oznacza, e wiele konstrukcji ptli staje si zbdnych, co znacznie skraca kod. Q Zezwolenie na wiele dziaa w jednym wierszu. By unikn nadmiernego korzystania

z tymczasowych zmiennych czy bezsensownego powtarzania, jQuery w wikszoci metod wykorzystuje wzorzec programowania zwany acuchem. Oznacza to, e wynikiem wikszoci dziaa na obiekcie jest sam obiekt, gotowy do zastosowania na nim kolejnych dziaa. Strategie te pozwalaj na utrzymanie niewielkiego rozmiaru pakietu jQuery — po skompresowaniu jest to poniej 20 KB — udostpniajc jednoczenie techniki umoliwiajce zachowanie zwizoci wasnego kodu korzystajcego z biblioteki.

25


jQuery 1.3. Wprowadzenie

Elegancja biblioteki po czci jest cech samego projektu jQuery, a po czci efektem procesu ewolucyjnego pobudzanego przez aktywn spoeczno , która wytworzya si wokó projektu. Uytkownicy jQuery aktywnie omawiaj nie tylko rozwój dodatków, ale take ulepszenia samego jdra biblioteki. W dodatku A przedstawimy wiele zasobów dostpnych dla programistów korzystajcych z jQuery. Pomimo skali wysików niezbdnych do stworzenia tak elastycznego i rozbudowanego systemu produkt kocowy jest darmowy i dostpny dla kadego. Projekt ten dostpny jest na podwójnej licencji: GNU Public License (dziki czemu mona go doczy do wielu innych projektów open source) oraz MIT License (by uatwi zastosowanie jQuery w oprogramowaniu wasnociowym).

Historia projektu jQuery Niniejsza ksika omawia funkcjonalno i skadni jQuery 1.3.x, najnowsz wersj dostpn w czasie jej pisania. Zaoenia lece u podstaw biblioteki — udostpnienie atwych sposobów odnajdywania elementów na stronie internetowej oraz modyfikowania ich — nie zmieniy si w trakcie jej rozwijania, cho zmienione zostay szczegóy skadni i dostpnych moliwoci. Poniszy krótki przegld historii projektu opisuje najwaniejsze zmiany pomidzy wersjami. Q Publiczne ogoszenie prac: John Resig po raz pierwszy wspomnia o poprawkach

do biblioteki Prototype (czci „Behaviour”) w sierpniu 2005 roku. Nowa biblioteka zostaa oficjalnie opublikowana pod nazw jQuery 14 stycznia 2006 roku. Q jQuery 1.0 (sierpie 2006): ju pierwsze wydanie biblioteki miao rozbudowan

obsug selektorów CSS, zdarze i interakcji opartych na Ajaksie. Q jQuery 1.1 (stycze 2007): to wydanie znacznie usprawnio API. Wiele rzadko

wykorzystywanych metod zostao poczonych, co zmniejszyo cakowit liczb metod, które trzeba opanowa i udokumentowa . Q jQuery 1.1.3 (lipiec 2007): to pomniejsze wydanie zawierao ogromn popraw

szybkoci dziaania silnika selektorów jQuery. Od tej wersji wydajno jQuery wypada bardzo korzystnie na tle podobnych bibliotek JavaScriptu, takich jak Prototype, Mootools oraz Dojo. Q jQuery 1.2 (wrzesie 2007): w wydaniu tym usunito skadni XPath suc

do wybierania elementów, gdy bya ona powtarzalna w stosunku do skadni CSS. Dostosowywanie efektów do wasnych potrzeb jest od tego wydania bardziej elastyczne; tworzenie dodatków stao si atwiejsze dziki wprowadzeniu zdarze z przestrzeni nazw. Q jQuery UI (wrzesie 2007): ogoszono powstanie nowego zbioru dodatków,

który mia zastpi popularny, jednak starzejcy si dodatek Interface. Obejmowa on bogat kolekcj gotowych widetów, a take zbiór narzdzi sucych do budowania bardziej zaawansowanych elementów, takich jak interfejsy oparte na zasadzie „przecignij i upu ”.

26


Rozdzia 1. • Pocztki

Q jQuery 1.2.6 (maj 2008): funkcjonalno popularnego dodatku Brandona Aarona

o nazwie Dimensions zostaa doczona do jdra biblioteki. Q jQuery 1.3 (stycze 2009): powana przebudowa silnika selektorów (Sizzle)

ogromnie poprawia wydajno biblioteki. Oficjalnie obsugiwana jest równie delegacja zdarze. Informacje o starszych wersjach jQuery mona znale na stronie internetowej projektu pod adresem: http://docs.jquery.com/History_of_jQuery.

Nasza pierwsza strona z jQuery Skoro omówilimy ju moliwoci udostpniane przez jQuery, moemy teraz sprawdzi , jak mona wykorzysta t bibliotek w praktyce.

Pobranie jQuery Oficjalna strona internetowa jQuery (http://jquery.com/) jest zawsze najlepszym adresem, pod którym mona znale aktualny kod i informacje dotyczce biblioteki. Na pocztek potrzebna jest nam kopia jQuery, któr mona pobra bezporednio na stronie gównej tej witryny. W kadym momencie dostpnych moe by kilka wersji jQuery — dla nas jako programistów stron internetowych najbardziej odpowiednia bdzie najnowsza nieskompresowana wersja biblioteki. W rodowisku produkcyjnym mona j zastpi wersj skompresowan. Nie jest wymagana adna instalacja. By uy jQuery, wystarczy umieci plik na naszej stronie internetowej, w publicznie dostpnym miejscu. Poniewa JavaScript jest jzykiem interpretowanym, nie musimy martwi si o faz kompilacji. Zawsze gdy bdziemy potrzebowa jQuery na stronie internetowej, bdziemy si po prostu odnosili do lokalizacji pliku z dokumentu HTML.

Utworzenie dokumentu HTML Wikszo przykadów wykorzystujcych jQuery skada si z trzech elementów: samego dokumentu HTML, plików CSS nadajcych mu styl i plików JavaScriptu pozwalajcych wykonywa dziaania. W naszym pierwszym przykadzie wykorzystamy stron z fragmentem ksiki1; do czci kodu przypisano kilka klas.

1

W przykadzie wykorzystano fragment ksiki Po drugiej stronie lustra Lewisa Carrolla w tumaczeniu Roberta Stillera — przyp. tum.

27


jQuery 1.3. Wprowadzenie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Po drugiej stronie lustra</title> <link rel="stylesheet" href="alice.css" type="text/css" media="screen" /> <script src="jquery.js" type="text/javascript"></script> <script src="alice.js" type="text/javascript"></script> </head> <body> <h1>Po drugiej stronie lustra</h1> <div class="author">autor: Lewis Carroll</div> <div class="chapter" id="chapter-1"> <h2 class="chapter-title">1. Dom odbity w lustrze</h2> <p>Na stole koo Alicji leaa ksika, wic kiedy tak siedziaa, obserwujc Biaego Kr贸la (bo wci troch si o niego lkaa i trzymaa w pogotowiu atrament, eby go obla, gdyby jeszcze raz zemdla), przewracaa sobie kartki w poszukiwaniu czego, co by moga przeczyta: <span class="spoken">"bo wszystko to w jakim nieznanym jzyku!"</span> powiedziaa do siebie.</p> <p>Brzmiao to tak.</p> <div class="poem"> <h3 class="poem-title">IKAORBA </h3> <div class="poem-stanza"> <div>ywtrks eikbil ,ywatzsurm sazc yB</div> <div>,ypyriw czcreiw hcazaw aN</div> <div>ywtlgorob anc od egzim A</div> <div>.ypyzrgz yruzczsiw enmodz I</div> </div> </div> <p>Zastanawiaa si nad tym przez jaki czas, a bysna jej genialna myl. <span class="spoken">"Przecie to jest, oczywicie, Lustrzana Ksika! i jak na ni popatrz w Lustrze, to sowa zn贸w bd takie, jak trzeba."</span></p> <p>I odczytaa nastpujcy wiersz:</p> <div class="poem"> <h3 class="poem-title"> ABROAKI</h3> <div class="poem-stanza"> <div>By czas mrusztawy, libkie skrtwy</div> <div>Na wazach wierczc wirypy,</div> <div>A mizge do cna borogltwy</div> <div>I zdomne wiszczury zgrzypy.</div> </div> </div> </div> </body> </html>

28


Rozdzia 1. • Pocztki

Ukad plików na serwerze nie ma znaczenia. Odwoania z jednego pliku do drugiego naley jedynie dostosowa tak, by pasoway do wybranego przez nas sposobu organizacji. W wikszoci przykadów w ksice w odwoaniach do plików wykorzystamy cieki wzgldne (../images/foo.png), a nie bezwzgldne (/images/foo.png). Pozwala to na lokalne uruchamianie kodu bez koniecznoci posiadania serwera WWW.

Natychmiast po zwykym nagówku HTML adowany jest arkusz stylów. W tym przykadzie jest on wyjtkowo spartaski. body { font: 62.5% Arial, Verdana, sans-serif; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; } .poem { margin: 0 2em; } .highlight { font-style: italic; border: 1px solid #888; padding: 0.5em; margin: 0.5em 0; background-color: #ffc; }

Po odwoaniu do arkusza stylów doczone zostaj pliki JavaScriptu. Istotne jest, by element script z bibliotek jQuery znajdowa si przed elementem script dla naszych wasnych skryptów. W przeciwnym razie biblioteka jQuery nie bdzie dostpna, kiedy nasz kod bdzie si próbowa do niej odwoa . W pozostaej czci ksiki drukowane bd jedynie istotne czci plików HTML i CSS. Pene pliki dostpne s na stronie internetowej ksiki pod adresem: http://helion.pl/ksiazki/jquer1.htm.

Teraz nasza strona wyglda tak:

29


jQuery 1.3. Wprowadzenie

Rysunek 1.1.

Wykorzystamy teraz jQuery do nadania nowego stylu tekstowi wiersza. Przykad ten ma na celu zademonstrowanie prostego zastosowania jQuery. W rzeczywistoci ten typ stylizacji tekstu mona wykona za pomoc samego CSS.

Dodanie jQuery Nasz kod umiecimy w drugim — obecnie pustym — pliku JavaScriptu, doczonym do dokumentu HTML za pomoc kodu <script src="alice.js" type="text/javascript"></script>. W tym przykadzie wystarcz nam trzy wiersze kodu: $(document).ready(function() { $('.poem-stanza').addClass('highlight'); });

Odnalezienie tekstu wiersza Podstawowym dziaaniem jQuery jest wybranie czci dokumentu. Wykonywane jest to za pomoc konstrukcji $(). Zazwyczaj przyjmuje ona jako parametr acuch znaków, który moe zawiera dowolne wyraenie selektora CSS. W tym przypadku chcemy odnale wszystkie czci dokumentu, do których przypisano klas poem-stanza, dlatego selektor jest bardzo prosty. W ksice opiszemy jednak równie o wiele bardziej wyszukane moliwoci. Róne sposoby odnajdywania czci dokumentu omówimy w rozdziale 2.

30


Rozdzia 1. • Pocztki

Funkcja $() jest tak naprawd fabryk dla obiektu jQuery bdcego podstawowym budulcem, z jakim bdziemy od teraz pracowa . Obiekt jQuery zawiera zero lub wiksz liczb elementów drzewa DOM i pozwala nam wchodzi z nimi w rónego rodzaju interakcje. W tym przypadku chcemy zmodyfikowa wygld czci strony, co osigniemy, zmieniajc klasy przypisane do tekstu wiersza.

Wstawienie nowej klasy Metoda .addClass(), tak jak wikszo metod jQuery, ma opisow nazw (ang. add class — „dodaj klas”). Dodaje ona klas CSS do wybranej czci strony. Jej jedynym parametrem jest nazwa klasy, jak naley doda . Metoda ta oraz jej odpowiednik .removeClass() pozwalaj nam atwo zaobserwowa dziaanie jQuery, kiedy bdziemy bada róne dostpne wyraenia selektorów. Na razie nasz przykad po prostu dodaje klas highlight, któr nasz arkusz stylów definiuje jako tekst z obramowaniem napisany kursyw. Warto zauway , e w celu dodania klasy do wszystkich zwrotek wiersza (elementów poem-stanza) nie jest konieczne wykonywanie jakiejkolwiek iteracji. Tak jak wspominalimy, jQuery wykorzystuje w metodach takich jak .addClass() iteracj niejawn, dziki czemu jedno wywoanie funkcji wystarczy do zmodyfikowania wszystkich wybranych czci dokumentu.

Wykonanie kodu Poczenie $() i .addClass() wystarczy nam do osignicia celu, jakim jest zmiana wygldu tekstu wiersza. Jeli jednak ten wiersz kodu wstawimy po prostu w nagówku dokumentu, nie przyniesie to adnego efektu. Kod w JavaScripcie wykonywany jest w momencie napotkania go przez przegldark, a w czasie gdy przetwarzany jest nagówek, nie ma jeszcze adnego kodu HTML, któremu mona by nada styl. Musimy zatem opóni wykonanie kodu do czasu, gdy bdzie dla nas dostpne drzewo DOM. Tradycyjnym mechanizmem opóniania wykonywania kodu w JavaScripcie jest wywoanie kodu wewntrz programu obsugi zdarze (ang. event handler). Wikszo programów obsugi zdarze dostpna jest dla zdarze inicjowanych przez uytkownika, takich jak kliknicia mysz i nacinicia klawiszy. Gdybymy nie mieli dostpu do jQuery, musielibymy polega na programie obsugi zdarze onload, który wywoywany jest po wygenerowaniu strony (ze wszystkimi obrazkami). By wywoa kod ze zdarzenia onload, umiecilibymy go wewntrz funkcji: function highlightPoemStanzas() { $('.poem-stanza').addClass('highlight'); }

Nastpnie doczylibymy t funkcj do zdarzenia, modyfikujc element <body> dokumentu HTML, tak by si do niej odwoywa: <body onload="highlightPoemStanzas();">

31


jQuery 1.3. Wprowadzenie

W ten sposób nasz kod zostaby wykonany po cakowitym zaadowaniu strony. To rozwizanie ma jednak swoje wady. Zmodyfikowalimy sam kod HTML, by wywoa zmian zachowania. Tak cise powizanie struktury i funkcji zamieca kod, wymagajc nieraz powtarzania wywoa tej samej funkcji na wielu rónych stronach lub — w przypadku zdarze takich jak kliknicie mysz — przy kadym pojawieniu si elementu na stronie. Dodanie nowych dziaa wymaga wtedy wprowadzania zmian w wielu miejscach, co zwiksza szans na popenienie bdu i komplikuje równoleg prac nad wieloma dokumentami projektantom i programistom. By unikn tych problemów, jQuery pozwala zaplanowa wywoanie funkcji na czas po zaadowaniu DOM — bez czekania na obrazki — dziki konstrukcji $(document).ready(). Z funkcj zdefiniowan jak powyej moemy zapisa : $(document).ready(highlightPoemStanzas);

Technika ta nie wymaga wprowadzania jakichkolwiek modyfikacji do kodu HTML. Zamiast tego dziaanie jest doczane w caoci za pomoc pliku JavaScriptu. W rozdziale 3. dowiemy si, jak mona odpowiada na inne typy zdarze, rozdzielajc ich efekty od struktury dokumentu HTML. To wcielenie kodu jest jeszcze troch nieoptymalne, poniewa funkcja highlightPoemStanzas() definiowana jest tylko po to, by skorzysta z niej natychmiast — i to tylko raz. Oznacza to, e wykorzystalimy identyfikator w globalnej przestrzeni nazw funkcji, zyskujc niewiele, a teraz musimy pamita , by z niego ju wicej nie korzysta . JavaScript, podobnie jak inne jzyki programowania, zawiera sposób obejcia tego braku optymalnoci zwany funkcjami anonimowymi (czasami nazywany równie funkcjami lambda). Za pomoc funkcji anonimowych moemy pisa kod w sposób, który zosta zaprezentowany na pocztku: $(document).ready(function() { $('.poem-stanza').addClass('highlight'); });

Wykorzystujc sowo kluczowe function bez nazwy funkcji, definiujemy funkcj dokadnie tam, gdzie jest potrzebna, a nie wczeniej. Usuwa to niepotrzebne rozbudowanie kodu i pozwala zredukowa go do trzech wierszy JavaScriptu. Skrót ten jest szczególnie wygodny w przypadku kodu jQuery, gdy wiele metod przyjmuje jako argument funkcj, a funkcje takie rzadko mona wykorzysta ponownie. Kiedy skadni t wykorzystujemy do zdefiniowania funkcji anonimowej wewntrz ciaa innej funkcji, mona utworzy domknicie (ang. closure). Jest to bardziej zaawansowana koncepcja o szerokich moliwociach, jednak powinno si j dobrze zrozumie , gdy intensywnie wykorzystuje si definicje zagniedonych funkcji, gdy moe ona mie niezamierzone konsekwencje i implikacje w zakresie wykorzystania pamici. Kwesti t omawiamy w caoci w dodatku C.

32


Rozdzia 1. • Pocztki

Gotowy produkt Kiedy nasz kod w JavaScripcie jest gotowy, strona wyglda tak:

Rysunek 1.2.

Zwrotki wierszy napisane s teraz kursyw i umieszczone s w ramce, zgodnie z arkuszem stylów alice.css, z powodu wstawienia klasy highlight za pomoc kodu w JavaScripcie.

Podsumowanie Wiemy ju, dlaczego programista mógby wybra korzystanie z biblioteki JavaScriptu, zamiast pisa cay kod od podstaw — nawet w przypadku najprostszych zada. Widzielimy take, co sprawia, e jQuery sprawdza si jako doskonaa biblioteka, której zastosowanie moe by lepszym rozwizaniem od innych opcji. Wiemy take mniej wicej, jakiego typu zadania jQuery moe uproci . W niniejszym rozdziale nauczylimy si, jak udostpni jQuery kodowi w JavaScripcie na naszej stronie internetowej, jak wykorzysta funkcj fabryczn $() do zlokalizowania czci strony z przypisan okrelon klas, jak wywoywa metod .addClass() w celu nadania tej czci strony dodatkowego stylu, a take jak wywoa $(document).ready(), co spowoduje, e kod ten zostanie wywoany po zaadowaniu strony. Prosty przykad, którym si posuylimy, demonstruje sposób dziaania jQuery, jednak nie jest szczególnie przydatny w praktyce. W kolejnym rozdziale rozbudujemy ten kod, zapoznajc si z wyszukanym jzykiem selektorów jQuery i znajdujc praktyczne zastosowania dla tej techniki.

33


jQuery 1.3. Wprowadzenie