Spis tre ci

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