Benedetti R. - JQuery. Rusz Głową

Tytu oryginau: Head First jQuery
Tumaczenie: Ireneusz Jakbik

ISBN: 978-83-246-6325-5
2012 Helion S.A.
Authorized Polish translation of the English edition of Head First jQuery 9781449393212
2011 Ryan Benedetti and Ronan Cranley.
This translation is published and sold by permission of OReilly Media, Inc.,
which owns or controls all rights to publish and sell the same.
All rights reserved. No part of this book may be reproduced or transmitted in any form
or by any means, electronic or mechanical, including photocopying, recording or by
any information storage retrieval system, without permission from the Publisher.
Wszelkie prawa zastrzeone. Nieautoryzowane rozpowszechnianie caoci
lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione.
Wykonywanie kopii metod kserograficzn, fotograficzn, a take kopiowanie
ksiki na noniku filmowym, magnetycznym lub innym powoduje naruszenie
praw autorskich niniejszej publikacji.
Wszystkie znaki wystpujce w tekcie s zastrzeonymi znakami firmowymi
bd towarowymi ich wacicieli.
Wydawnictwo HELION dooyo wszelkich stara, by zawarte w tej ksice
informacje byy kompletne i rzetelne. Nie bierze jednak adnej odpowiedzialnoci
ani za ich wykorzystanie, ani za zwizane z tym ewentualne naruszenie praw patentowych
lub autorskich. Wydawnictwo HELION nie ponosi rwnie adnej odpowiedzialnoci
za ewentualne szkody wynike z wykorzystania informacji zawartych w ksice.
Wydawnictwo HELION
ul. Kociuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (ksigarnia internetowa, katalog ksiek)
Drogi Czytelniku!
Jeeli chcesz oceni t ksik, zajrzyj pod adres
http://helion.pl/user/opinie/jquerg_ebook
Moesz tam wpisa swoje uwagi, spostrzeenia, recenzj.
Printed in Poland.
Pole ksik na Facebook.com

Kup w wersji papierowej
Oce ksik
Ksigarnia internetowa
Lubi to! Nasza spoeczno
Zachwyty pierwszych recenzentw nad jQuery. Rusz gow!

jQuery pozwala na robienie zdumiewajcych rzeczy za pomoc JavaScriptu w tak prosty sposb, e wyglda to wrcz
na oszustwo. W ksice tej pokazano, jak szybko rozwizywa problemy zaczerpnite z rzeczywistego wiata. W ramach
bonusu poznasz kluczowe aspekty JavaScriptu, konfiguracj rodowiska programistycznego i nieco PHP/MySQL. To
solidna ksika.
Jim Doran, inynier oprogramowania na Uniwersytecie Johna Hopkinsa

W przeciwiestwie do wypenionych technicznym argonem i nieprzystpnych ksiek o programowaniu jQuery. Rusz gow
prowadzi pocztkujcych czytelnikw krok po kroku w kierunku utworzenia pierwszej strony w jQuery w sposb zabawny
i zrozumiay.
Lindsey Skouras, adwokat i programista samouk
Ryan Benedetti i Ronan Cranley zabrali si za potencjalnie budzcy obawy konglomerat technologii (jQuery, DOM, Ajax,
HTML5, CSS) i rozbili go na lepiej przyswajalne koncepcje, ktre sprawiaj, e poznawanie materiau staje si zabaw.
Bill Mietelski, inynier oprogramowania
JavaScript ponownie wyoni si jako jzyk programowania odgrywajcy znaczc rol w sporej mierze dziki zbiorowi
najwyszej jakoci dodatkowych bibliotek, wrd ktrych kluczowym graczem jest jQuery. jQuery. Rusz gow udostpnia
nowoczesnemu programicie poyteczne wskazwki oraz praktyczne rady dotyczce tej kluczowej technologii jzyka
JavaScript.
Paul Barry, autor i wykadowca informatyki na politechnice w Carlow
Pochway innych ksiek z serii Rusz gow!

Analiza i Projektowanie Obiektowe. Rusz gow! to wiee spojrzenie na zagadnienia zwizane z AiPO. To, co wyrnia t
ksik, to nacisk na nauk. Autorzy sprawili, e zawarto AiPO jest dostpna i przydatna dla praktykw.
Ivar Jacobson, Ivar Jacobson Consulting
Wanie skoczyem lektur AiPO i uwielbiam t ksik! To, co najbardziej mi si w niej podoba, to skupienie si na tym,
dlaczego wykonujemy AiPO - po to, eby pisa wspaniae oprogramowanie!
Kyle Brown, Distinguished Engineer, IBM
Ukryta za miesznymi rysunkami i zwariowan czcionk czai si powana, inteligentna i wietnie opracowana prezentacja
zorientowanej obiektowo analizy i projektowania. Kiedy czytaem t ksik, czuem si, jakbym zaglda przez rami
profesjonalnemu ekspertowi wyjaniajcemu mi, ktre zagadnienia s wane na kadym z etapw i dlaczego.
Edward Sciore, profesor nadzwyczajny, Katedra Informatyki, Boston College
Podsumowujc, Head First Software Development jest znakomitym rdem wiedzy dla kadego, kto chciaby sformalizowa
swoje umiejtnoci programistyczne w sposb nieprzerwanie angaujcy czytelnika na wielu rnych poziomach.
Andy Hudson, Linux Format
Jeli jeste pocztkujcym twrc oprogramowania, Head First Software Development skieruje ci na waciwe tory. A jeeli
jeste dowiadczonym (czytaj: o dugim stau) programist, nie odkadaj tej ksiki pochopnie na bok...
Thomas Duff, Duffbert's Random Musings
W Java. Rusz gow! kady znajdzie co dla siebie. Ten, kto przyswaja informacje przez kana wzrokowy, i ten, kto
przyswaja przez kana kinestetyczny - kady moe uczy si z tej ksiki. Pomoce wizualne uatwiaj zapamitywanie,
a sama ksika jest napisana bardzo przystpnym stylem cakowicie innym, ni w wikszoci podrcznikw na temat
Javy... Java. Rusz gow! to cenna ksika. Mog wyobrazi sobie, e seria Rusz gow! jest uywana w salach lekcyjnych
w szkoach rednich albo na kursach dla dorosych. A ja z ca pewnoci bd powraca do tej ksiki, jak i poleca j
innym.
Warren Kelly, Blogcritics.org, marzec 2006
W miejsce nauczania w stylu podrcznikowym Head First iPhone and iPad Development oferuje dowcipne, angaujce,
a nawet przyjemne podejcie do nauki programowania w rodowisku iOS. Dziki omwieniu kluczowych technologii,
cznie z core data, a nawet istotnych aspektw, takich jak projektowanie interfejsw, zawarto ksiki jest starannie
dobrana i znakomita. W ktrym innym miejscu mona by by wiadkiem pogadanki przy kominku midzy UIWebView
a UITextField!
Sean Murphy, projektant i programista iOS
Pochway innych ksiek z serii Rusz gow!

Kolejn mi cech Java. Rusz gow! Wydanie II jest pobudzanie apetytu czytelnika na wicej. Dziki pniejszemu
omwieniu bardziej zaawansowanych zagadnie, takich jak Swing i RML, wprost nie mona si doczeka, aby zagbi
si w te interfejsy API oraz kod, ktre wykorzystane w bezbdnych, liczcych 100 000 wierszy programach przynios
Ci saw i bogactwo. Znalazo si tam te sporo materiau, a nawet niektre z dobrych praktyk na temat sieci i wtkw,
ktre s moim sabym punktem. W tym konkretnym przypadku nie mogem si powstrzyma od miechu, gdy autorzy
skorzystali z operatorki centrali telefonicznej z lat pidziesitych tak, wanie tej pani z ogromnym kokiem, ktra
rcznie przecza wtyczki jako analogii dla portw TCP/IP... naprawd powiniene uda si do ksigarni i przewertowa
Java. Rusz gow! Wydanie II. Nawet jeli znasz ju Jav, by moe poznasz jak now rzecz lub dwie. A jeeli nie, zwyke
przejrzenie stron bdzie stanowi niez zabaw.
Robert Eckstein, Java.sun.com
Oczywicie to nie zakres materiau sprawia, e Java. Rusz gow! tak si wyrnia to styl i podejcie. Ksika ta jest
tak bardzo oddalona od podrcznikw informatycznych albo instrukcji obsugi, jak to jest tylko moliwe w przypadku
korzystania z rysunkw, amigwek albo magnesikw na lodwk (tak, magnesikw...). Zamiast zwykych wicze dla
czytelnika jeste proszony o udawanie kompilatora i skompilowanie kodu albo o uzyskanie programu przez wypenienie
pustych miejsc albo... chyba chwytasz, o co chodzi... Pierwsze wydanie tej ksiki zyskao jedn z naszych rekomendacji
jako pozycja dla pocztkujcych w Javie i z obiektami. Nowe wydanie nie rozczarowuje i zasuenie kroczy w lady
swojej poprzedniczki. Jeli naleysz do osb, ktre zasypiaj przy tradycyjnych ksikach informatycznych, przy tej
najprawdopodobniej zachowasz przytomno i bdziesz si uczy.
TechBookReport.com
Head First Web Design to Twoja przepustka do poznania wszystkich tych skomplikowanych zagadnie i zrozumienia, co tak
naprawd dzieje si w wiecie projektowania witryn internetowych... Jeli nie przeszede chrztu ognia, uywajc czego tak
skomplikowanego jak Dreamweaver, ksika ta bdzie wietnym sposobem na nauczenie si dobrego projektowania stron
WWW.
Robert Pritchett, MacCompanion
Czy mona si nauczy prawdziwego projektowania stron internetowych z ksiki? Head First Web Design jest kluczem
do projektowania przyjaznych dla uytkownika witryn, poczwszy od wymaga klienta, przez rcznie rysowane scenorysy,
a do poprawnie dziaajcych stron online. To, co odrnia t ksik od innych pozycji typu 'jak zbudowa stron
internetow', to wykorzystanie w niej najnowszych zdobyczy z zakresu nauk kognitywnych i wiedzy o nauczaniu w celu
udostpnienia wizualnego dowiadczenia poznawczego, obfitujcego w obrazy i zaprojektowanego zgodnie z tym,
w jaki sposb najlepiej pracuje i uczy si mzg. W rezultacie powstaa ksika bdca ogromnym wkadem w podstawy
projektowania stron internetowych, ktra bdzie wanym kluczem do sukcesu kadej biblioteki oglnoinformatycznej.
Diane C. Donovan, California Bookwatch: The Computer Shelf
Zdecydowanie polecam Head First Web Design wszystkim kolegom programistom, ktrzy chc pozna bardziej artystyczn
stron swojej profesji.
Claron Twitchell, Utah Java User Group
Pochway dla innych ksiek z tej serii

Inne ksiki na ten sam temat:
jQuery. Leksykon kieszonkowy
JavaScript i jQuery. Nieoficjalny podrcznik
jQuery. Od nowicjusza do wojownika ninja
JQuery. Poradnik programisty
Inne ksiki z serii Rusz gow!

C#. Rusz gow!
Excel. Rusz gow!
Java. Rusz gow! Wydanie II
Wzorce projektowe. Rusz gow!
SQL. Rusz gow!
Analiza i projektowanie obiektowe. Rusz gow!
Head First Ruby on Rails. Edycja polska (Rusz gow!)
Head First. Statystyka. Edycja polska (Rusz gow!)
Head First Algebra. Edycja polska (Rusz gow!)
Head First. Fizyka. Edycja polska (Rusz gow!)
Head First. Sieci komputerowe. Edycja polska (Rusz gow!)
Head First Web Design. Edycja polska (Rusz gow!)
Head First PHP & MySQL. Edycja polska (Rusz gow!)
Head First Ajax. Edycja polska (Rusz gow!)
Head First JavaScript. Edycja polska (Rusz gow!)
Head First Software Development. Edycja polska (Rusz gow!)
Head First HTML with CSS & XHTML. Edycja polska (Rusz gow!)
Head First Servlets & JSP. Edycja polska (Rusz gow!)
Dedykujemy t ksik Mistrzom Jedi JavaScriptu: Johnowi Resigowi

(twrcy i wiodcemu programicie biblioteki jQuery), Douglasowi
Crockfordowi, Davidowi Flanaganowi i Brandonowi Eichowi.
Moim trzem cudom: Josie, Vinowi i Shonnie.
Ryan
Caitlin i Bono, dzikuj za wszystko!
Ronan
autorzy
Ryan
Ronan
Ryan Benedetti posiada tytu magistra sztuk

piknych w dziedzinie twrczego pisania zdobyty na
Uniwersytecie Montany i pracuje na Uniwersytecie
Portlandzkim jako projektant stron internetowych
i specjalista od multimediw. W pracy wykorzystuje
jQuery, Flash, ActionScript, Adobes Creative Suite,
Liferay Portal, jzyk szablonw Apaches Jakarta
Velocity i Drupal.
Przez siedem lat Ryan pracowa jako szef Katedry
Technologii Informacyjnej i Inynierii Komputerowej
w Salish Kooteni College. Przedtem by redaktorem
i specjalist od systemw informacyjnych
w programie badawczym dotyczcym rzek, potokw
i mokrade prowadzonym przez Katedr Lenictwa
Uniwersytetu Montany.
Wiersze Ryana byy publikowane w Cut Bank
i Exquisite Corpse Andreia Codrescu. Swj wolny
czas spdza, malujc, rysujc, grajc bluesa na
harmonijce i praktykujc zazen. Najlepsze chwile
spdza w Portland w stanie Oregon z crk, synem
i swoj ukochan Shonn. Uwielbia te powczy
si ze swoimi zwierzcymi kumplami: Rockym,
Munchem, Festerem i Tazem.
Ronan Cranley od chwili przyjazdu w 2006 roku

z Dublina w Irlandii do Portland w stanie
Oregon pracowa na Uniwersytecie Portlandzkim,
przechodzc ciek od programisty aplikacji
WWW, przez starszego programist/menedera
systemw, do zastpcy dyrektora do spraw WWW
i administrowania systemami.
Tytu licencjata informatyki otrzyma z honorami
w 2003 roku na Politechnice Dubliskiej. Podczas
pracy w koledu, a take na wczeniejszym
stanowisku w ESB International w Dublinie oraz
na obecnym na Uniwersytecie Portlandzkim,
Ronan pracowa nad szeregiem rnych projektw
w PHP, VB.NET, C# oraz Javie, w tym chocia
nie tylko nad systemami GIS po stronie klienta,
amatorskim systemem zarzdzania treci, systemem
kalendarzowo-terminarzowym oraz czeniem jQuery
z Google Maps.
Kiedy nie projektuje ani nie tworzy klienckich
aplikacji WWW, pracuje na uniwersytecie jako
administrator baz danych serwera SQL. W swoim
wolnym czasie Ronan spdza wiele godzin na boisku
pikarskim, polu golfowym i spacerujc ze swoj on
Caitlin i angielskim buldogiem Bono oraz poznajc,
na ile tylko moe, pnocno-zachodnie wybrzee
Pacyfiku.
spis treci
Spis treci (skrcony)

Wstp
23
1.
Zaczynamy z jQuery: Akcja na stronach internetowych
37
2.
Selektory i metody: Chwytaj i w drog
3.
Zdarzenia i funkcje jQuery: Niech si co dzieje na Twojej stronie
111
4.
Manipulowanie stron internetow za pomoc jQuery:

Zmodyfikuj drzewo DOM
159
5.
Efekty i animacja w jQuery: Nieco wdziku na Twojej stronie
211
6.
jQuery i JavaScript: Luke jQuery, jestem twoim ojcem!
251
7.
Niestandardowe funkcje dla niestandardowych efektw:

Co ostatnio dla mnie zrobie?
289
8.
jQuery i Ajax: Prosz poda dane
327
9.
Obsuga danych JSON: Kliencie, oto serwer
361
10.
Interfejs uytkownika w jQuery: Diametralna zmiana wygldu
407
71
11.
jQuery i API: Obiekty, wszdzie obiekty
447
Ostatki: Dziesi najwaniejszych rzeczy (o ktrych nie napisalimy)
483
Konfiguracja rodowiska programistycznego:

Przygotuj si do przyszych sukcesw
497
Skorowidz
518
Spis treci (z prawdziwego zdarzenia)

Wstp
Twj mzg i jQuery. Wanie prbujesz si czego nauczy, tymczasem Twj mzg
wywiadcza Ci przysug, starajc si, aby niczego nie zapamita. Twj mzg myli:
Lepiej pozostawi miejsce na wane rzeczy takie jak to, ktrych dzikich zwierzt unika
i czy to zy pomys jedzi nago na snowboardzie. Jak wic oszukasz swj mzg, aby
myla, e Twoje ycie zaley od jQuery?
Dla kogo jest ta ksika?
24
Metapoznanie: mylenie o myleniu
27
Oto co zrobilimy
28
Oto co moesz zrobi, aby zmusi swj mzg do posuszestwa
29
Przeczytaj mnie
30
Pobierz jQuery
32
Konfiguracja folderw
33
Zesp recenzentw technicznych
34
Podzikowania
35
spis treci
Zaczynamy z jQuery
Akcja na stronach internetowych

Chcesz wicej dla swoich stron. Masz w zanadrzu HTML oraz CSS i chciaby
wzbogaci swoje umiejtnoci o pisanie skryptw, ale nie masz zamiaru spdzi caego
ycia, piszc je wiersz po wierszu. Potrzebujesz biblioteki skryptw, ktra pozwoli Ci
zmienia strony internetowe w locie. A skoro wyraamy ju nasze yczenia, to moe
doda jeszcze wspprac z Ajaksem i PHP? Czy da si zrobi w trzech wierszach to,
do czego wikszo jzykw po stronie klienta potrzebuje pitnastu? Pobone yczenia?
W adnym wypadku! Musisz zapozna si z jQuery.
jQuery( )
$( )
$( )
Syszaem kliknicie
przycisku.
10
Chcesz wada stronami
38
HTML i CSS s w porzdku, ale...
39
potrzebujesz mocy skryptu
40
Nadchodzi jQuery (i JavaScript)!
41
Spojrzenie do wntrza przegldarki
43
Ukryta struktura strony
44
Dziki jQuery drzewo DOM nie jest takie straszne
45
Jak to dziaa?
47
jQuery wybiera elementy tak samo jak CSS
49
Stylu, przedstawiam ci skrypt
50
Selektory jQuery do usug
51
jQuery przetumaczony
52
Twoja pierwsza fucha w jQuery
56
Skonfiguruj swoje pliki HTML i CSS
60
Wysu si...
62
Niechaj blado bdzie z Tob
63
Uratowae kampani Kudaci Przyjaciele
66
Twj niezbdnik jQuery
69
Przesu element
do gry.
Interpreter
JavaScriptu
spis treci
Selektory i metody
Chwytaj i w drog
jQuery pomaga chwyta elementy strony internetowej i robi z nimi rne
rzeczy. W tym rozdziale zagbimy si w selektory i metody jQuery. Dziki selektorom moemy
chwyta elementy na stronie, a metody pozwalaj na robienie z nimi rozmaitych sztuczek.
Podobnie jak wielka ksiga zakl magicznych, biblioteka jQuery pozwala nam zmienia mas
rzeczy w locie. Moemy sprawia, e obrazy rozpywaj si w powietrzu i pojawiaj znikd.
Moemy wybra okrelony fragment tekstu i w animowany sposb zmieni rozmiar jego czcionki.
Rozpocznijmy wic pokaz zapmy kilka elementw strony i do roboty!
Skacz z radoci potrzebuje Twojej pomocy

Jakie s wymogi projektu?
72
73
Zagbiamy si w sekcje
75
Zdarzenie click w zblieniu
78
Dodaj do strony metod click
81
Bd bardziej konkretny
83
Przydzielanie elementw do klas
84
ID-entyfikowanie elementw
85
Pospinaj swoj stron
88
Tymczasem na naszej licie
91
Tworzenie miejsca w pamici
92
cz za pomoc konkatenacji
93
Tymczasem w naszym kodzie...
94
Wstaw komunikat za pomoc metody append
95
Wszystko dziaa wietnie, ale...
97
Daj mi $(this)
99
Zaprzgnij $(this) do pracy
100
Pozbywaj si na dobre za pomoc remove
102
Schodzimy w d z selektorem potomka
103
Twoja kolej na skakanie z radoci
109
110
11
spis treci
3
Suchacz zdarze
syszy zdarzenie
i przekazuje je do...
12
Zdarzenia i funkcje jQuery
Niech si co dzieje na Twojej stronie

jQuery uatwia dodawanie akcji oraz interaktywnoci do
kadej strony internetowej. W tym rozdziale przyjrzymy si temu,
jak sprawi, eby strona reagowaa, kiedy uytkownicy wchodz z ni
w interakcj. Sprawienie, e kod bdzie reagowa na dziaania uytkownika,
wyniesie Twoj witryn na zupenie nowy poziom. Zajmiemy si te
tworzeniem funkcji wielokrotnego uycia, dziki czemu kod napiszesz raz,
ale ju korzysta z niego bdziesz wielokrotnie.
...interpretera
JavaScriptu, ktry
sprawdza, co trzeba
zrobi po kadym
zdarzeniu...
Twoja znajomo jQuery znowu jest potrzebna
112
Facet od pienidzy ma racj...
113
Dodawanie zdarze na stron
115
Za kulisami suchacza zdarze
116
Wizanie zdarzenia
117
Wyzwalanie zdarzenia
118
Usuwanie zdarzenia
122
Wemy si za bary elementy
126
Struktura Twojego projektu
132
Dodajemy funkcje
136
rubki i trybiki funkcji
137
Funkcja anonimowa
138
Funkcje nazwane jako funkcje obsugi zdarze
139
Przekazywanie zmiennej do funkcji
142
Funkcja moe te zwraca warto
143
Korzystaj z logiki warunkowej w celu podejmowania decyzji
145
Skacz z radoci potrzebuje jeszcze wikszej pomocy
149
Metody mog zmienia CSS
151
Dodaj zdarzenie hover
153
To ju prawie wszystko...
155
158
spis treci
Manipulowanie stron internetow za pomoc jQuery

To, e strona skoczya si pobiera, nie znaczy od razu, e musi
ona zachowywa t sam struktur. W rozdziale 1. zobaczylimy, jak
podczas wczytywania strony, w celu ustalenia jej struktury, jest konstruowane
drzewo DOM. W biecym rozdziale dowiemy si, jak porusza si w gr i w d
struktury drzewa DOM i jak pracowa z hierarchi elementw oraz relacjami
rodzic dziecko, aby za pomoc jQuery zmienia w locie struktur strony.
Restauracja w Webowicach chce interaktywnego menu
Twj
element
160
Dla wegetarian
161
Poklasyfikuj swoje elementy
166
Pora na przyciski
169
Co teraz?
171
Biegamy po gaziach drzewa DOM
176
Wspinaczkowe metody przechodzenia drzewa
177
Metody acuchowe aby siga jeszcze dalej
178
Zmienne mog przechowywa te elementy
185
I znowu ten dolar...
186
Poszerz swoje moliwoci przechowywania o tablice
187
Przechowuj elementy w tablicy
188
Wymieniaj elementy za pomoc replaceWith
190
Jak moe nam pomc replaceWith?
191
Zastanw si, zanim uyjesz replaceWith
193
replaceWith nie sprawdza si w kadej sytuacji
194
Wstawienie zawartoci HTML do drzewa DOM
195
Uyj metod filtrujcych w celu zawenia wyboru (cz 1.)
197
198
Przywr hamburgera
201
A co z misem?
202
Treciwa tablica
203
Metoda each przeglda tablice
204
To ju wszystko... prawda?
207
210
13
spis treci
14
Efekty i animacja w jQuery
Nieco wdziku na Twojej stronie

Sprawianie, e na Twojej stronie bd si dzia rne rzeczy, to niezy
pomys, ale tylko do czasu. Jeli nie bdzie ona wyglda atrakcyjnie, ludzie nie
zechc z niej korzysta. Dlatego wanie przydadz Ci si efekty i animacja w jQuery.
W biecym rozdziale nauczysz si, co zrobi, aby wraz z upywem czasu elementy
zmieniay swoje miejsce na stronie, jak pokaza lub ukry okrelony element albo jak go
powikszy lub zmniejszy, a wszystko to na oczach uytkownika. Dowiesz si te, jak
zakada harmonogramy animacji, aby uruchamiay si one w rnych odstpach czasu,
co nada Twojej stronie bardzo dynamiczny wygld.
Gryzmoki potrzebuj aplikacji sieciowej
212
Zrb sobie potwora
213
Zrb sobie potwora potrzebujemy ukadu i pooenia na stronie
214
Troch wicej struktury i stylu
217
Uaktywniamy interfejs
218
Robimy efekt byskawicy
223
W jaki sposb jQuery animuje elementy?
224
Efekty wygaszania zmieniaj waciwo CSS opacity
225
Wysuwanie sprowadza si do zmiany wysokoci
226
Zatrudnij efekty wygaszania
228
cz efekty za pomoc acuchw metod
229
Kontratakujemy za pomoc funkcji czasowych
230
Dodaj do swojego skryptu funkcje byskawic
233
Efekty wasnej roboty wykorzystujce metod animate
235
Co mona, a czego nie mona animowa?
236
Metoda animate zmienia w czasie styl
238
Dokadnie skd dokd?
241
Ruch bezwzgldny obiektw a ich ruch wzgldny
242
Przesuwaj elementy wzgldnie dziki czeniu operatorw
243
Dodaj funkcje animujce do swojego skryptu
245
Patrz, mamo! Bez Flasha!
248
250
spis treci
jQuery i JavaScript
Luke jQuery, jestem twoim ojcem!

Sama biblioteka jQuery nie da sobie ze wszystkim
rady. Chocia jest ona bibliotek JavaScriptu, nie potrafi niestety
robi wszystkiego, co jej jzyk ojczysty. W tym rozdziale przyjrzymy si
niektrym aspektom JavaScriptu, ktrych bdziesz potrzebowa do
tworzenia naprawd atrakcyjnych stron, oraz temu, jak mona z nich
korzysta w jQuery w celu tworzenia niestandardowych list i obiektw,
a take jak przechodzi przez nie w ptlach, aby uatwi sobie ycie.
Atrakcyjniejszy barek Rusz Gow
252
Obiekty oferuj inteligentne przechowywanie
254
Buduj wasne obiekty
255
Twrz obiekty wielokrotnego uycia za pomoc konstruktorw
256
Interakcja z obiektami
257
Konfiguracja strony
258
Powrt tablic
261
Dostp do tablic
262
Dodawaj i aktualizuj elementy tablicy
263
Zrb to jeszcze raz (i jeszcze raz, i jeszcze raz, i...)
265
Szukanie igy w stogu siana
268
Czas na podjcie decyzji... znowu!
275
Operatory porwnania i operatory logiczne
276
Czyszczenie w jQuery...
282
Dodajemy wicej emocji
286
Twj niezbdnik jQuery i JavaScriptu
288
1 ... 2 ... 3 ... 4 ... 2 ... 3 ... 4 ...
15
spis treci
Niestandardowe funkcje dla niestandardowych efektw
Co ostatnio dla mnie zrobie?

Kiedy poczysz niestandardowe efekty jQuery z funkcjami
JavaScriptu, moesz sprawi, e Twj kod a tym samym Twoja aplikacja
internetowa bdzie wydajniejszy, skuteczniejszy i lepszy. W tym rozdziale
zagbisz si jeszcze bardziej w ulepszanie efektw jQuery poprzez obsug
zdarze przegldarki, prac z funkcjami czasu oraz popraw organizacji
i moliwoci wielokrotnego uycia Twoich niestandardowych funkcji
w JavaScripcie.
Nadciga burza
290
Utworzylimy funkcj potwora
291
Sprawuj kontrol nad efektami czasowymi za pomoc obiektu window
292
Odpowiadaj na zdarzenia przegldarki za pomoc metod onblur i onfocus 295

Metody czasowe mwi funkcjom, kiedy dziaa
299
Napisz funkcje stopLightning i goLightning
302
Proba o now funkcjonalno w Zrb sobie potwora
310
Zacznijmy losowa
311
Znasz ju biec pozycj...
312
...oraz funkcj getRandom
312
Przesuwaj wzgldnie do biecej pozycji
316
Zrb sobie potwora v2 to prawdziwy przebj!
325
326
W rzeczy samej, zby to

najlepsze, co mam, ale na
mio bosk mgbym
chcie skorzysta te
z reszty mojej twarzy!
16
spis treci
jQuery i Ajax
Prosz poda dane

Uywanie jQuery w celu robienia sprytnych sztuczek z CSS i drzewem DOM
to fajna sprawa, ale ju wkrtce bdziesz musia odczytywa informacje (albo dane) z serwera
i je wywietla. Moe nawet przyjdzie Ci zaktualizowa fragmenty strony informacjami z serwera
bez potrzeby jej odwieania. Poznaj Ajax. W poczeniu z jQuery i JavaScriptem moe on wanie
co takiego robi. W tym rozdziale dowiemy si, jak jQuery radzi sobie z namawianiem Ajaksa do
wysyania zapyta do serwera i co potem robi z otrzymanymi informacjami.
Coroczny bieg Od bitu

do bajtu na 10 kilometrw
W tym roku bieg odbywa si

na wyspie Maui zarezerwuj
sobie miejsce z wyprzedzeniem!
Wprowad bieg Od bitu do bajtu w XXI wiek
328
Spojrzenie na stron z zeszego roku
329
Dynamizujemy
332
Stary Webie, poznaj nowego Weba
333
Zrozumie Ajax
334
Czym jest Ajax?
334
335
Pobieranie danych przy uyciu metody ajax
340
Przetwarzanie danych XML
342
Harmonogramy zdarze na stronie
346
Funkcje samowywoujce si
347
Dosta wicej od swojego serwera
350
Ktra godzina?
351
Wyczanie zaplanowanych zdarze na stronie
356
Twj niezbdnik jQuery i Ajaksa
360
$(li).find(ul)
li
17
spis treci
18
Obsuga danych JSON
Kliencie, oto serwer

Chocia czytanie danych z pliku XML jest bardzo przydatne, to jednak
nie zawsze wystarcza. Bardziej interaktywny format wymiany danych (JavaScript
Object Notation, znany te jako JSON) uatwia pobieranie danych z serwera. JSON jest
te atwiejszy do wygenerowania i czytania ni format XML. Uywajc jQuery, PHP oraz
SQL-a, nauczysz si, jak utworzy baz danych przechowujc informacje, ktre bdziesz
mg pniej odczyta za pomoc formatu JSON i wywietli na ekranie przy uyciu jQuery.
Tak objawia si prawdziwa moc aplikacji internetowych!
Dzia Marketingu webowickiej Megakorporacji nie zna XML-a
362
Bdy w XML-u psuj stron
363
Pobierz dane ze strony
364
Co zrobi z danymi
367
Sformatuj dane, zanim je wylesz
368
Przelij dane do serwera
369
Przechowuj dane w bazie MySQL
371
Utwrz baz danych w celu przechowywania informacji o biegaczach
372
Anatomia instrukcji insert
374
Uywaj PHP w celu odczytywania danych
377
Przetwrz dane POST na serwerze
378
Pocz si z baz danych za pomoc PHP
379
Uyj polecenia select, aby pobra dane z bazy
381
Pobierz dane za pomoc PHP
383
Z pomoc nadchodzi JSON!
386
jQuery + JSON = co niesamowitego
387
Kilka regu PHP...
388
Kilka (kolejnych) regu PHP...
389
Formatowanie informacji wyjciowych w PHP
390
Dostp do danych w obiekcie JSON
397
Sanityzacja i walidacja danych w PHP
400
Twj niezbdnik jQuery, Ajaksa, PHP i MySQL
405
spis treci
10
Interfejs uytkownika w jQuery
Diametralna zmiana wygldu

Sie WWW yje i umiera dziki swoim uytkownikom i ich
danym. Zbieranie danych od uytkownikw to powane zajcie, ktre moe by
czasochonnym wyzwaniem dla programisty. Widziae ju, jak Ajax, PHP i MySQL
mog pomc w czynieniu efektywniejszym dziaania aplikacji internetowych.
Teraz przyjrzymy si, jak jQuery moe nam pomc w utworzeniu interfejsw
uytkownika dla formularzy zbierajcych dane. Po drodze otrzymasz spor dawk
jQuery UI oficjalnej biblioteki interfejsu uytkownika jzyka jQuery.
Kryptozoolodzy.org potrzebuj zmiany wygldu
408
Odpicuj swj formularz HTML
409
Oszczd sobie blu gowy (i zyskaj troch czasu) za pomoc jQuery UI
412
Co znajduje si w rodku pakietu jQuery UI
416
Utwrz kalendarz dla formularza z obserwacjami
417
jQuery za kulisami
418
Opcje widgetw s konfigurowalne
419
Nadaj styl przyciskom
422
Kontroluj pola liczbowe za pomoc suwakw
426
Komputery mieszaj kolory, uywajc barwy czerwonej, zielonej

i niebieskiej
435
Napisz funkcj refreshSwatch
438
I jeszcze pewien drobiazg...
442
446
Kiedy wreszcie
dadz mi spokj
ci paparazzi?
?
19
spis treci
11
jQuery i API
Obiekty, wszdzie obiekty

Niezalenie od tego, jak bardzo utalentowanym programist jeste,
sam nie dasz sobie rady ze wszystkim... Zobaczylimy, jak mona docza
wtyczki jQuery, takie jak jQuery UI, albo nawigacj z wykorzystaniem kart, aby bez
wikszego wysiku wzbogaca programy pisane w jQuery. W celu wyniesienia naszych
aplikacji na jeszcze wyszy poziom, dodania do nich paru z naprawd niezych
narzdzi dostpnych w Internecie oraz skorzystania z informacji udostpnionych przez
prawdziwych potentatw takich jak Google, Twitter albo Yahoo! bdziemy jednak
potrzebowa czego... wicej. Firmy te, i wiele innych, dostarczaj API (application
programming interfaces, czyli interfejsy programowania aplikacji) dedykowane
dla swoich usug, z ktrych moesz korzysta w swojej witrynie. W tym rozdziale
przyjrzymy si podstawom API i zastosujemy niezwykle popularny interfejs, jakim jest
Google Maps API.
Cze! Jestem markerem. Chtnie

zamarkuj... to jest zawr
z Tob znajomo. Na pewno ju
gdzie mnie widziae!
20
Gdzie jest genera paskuda?
448
API Google Maps
450
API uywaj obiektw
451
Docz mapy Google do swojej strony
453
Odczytywanie danych w formacie JSON za pomoc SQL-a i PHP
456
Punkty na mapie to markery
460
Lista kontrolna funkcji wywietlajcej wiele obserwacji
464
Nasuchiwanie zdarze na mapie
474
Udao si!
478
Twj niezbdnik jQuery API
481
spis treci
Ostatki
Dziesi najwaniejszych rzeczy

(o ktrych nie napisalimy)
Nawet po tym wszystkim cigle jest jeszcze wiele rzeczy, do ktrych
nie dotarlimy. Istnieje mnstwo dobrodziejstw jQuery i JavaScriptu, ktrych nie
udao nam si wcisn do tej ksiki. Byoby nieuczciwoci nie wspomnie o nich,
a tak bdziesz lepiej przygotowany na kady inny aspekt jQuery, ktry moesz
napotka podczas swoich podry.
1. Wszystkie drobiazgi z biblioteki jQuery
484
2. jQuery w sieciach CDN
487
3. Przestrze nazw jQuery: metoda noConflict
488
4. Debugowanie kodu jQuery
489
5. Zaawansowane techniki animacji: kolejki
490
6. Walidacja formularzy
491
7. Biblioteka jQuery UI Effects
492
8. Tworzenie wasnych wtyczek do jQuery
493
9. JavaScript dla zaawansowanych: domknicia
494
10. Szablony
495
21
spis treci
Konfiguracja rodowiska programistycznego
Przygotuj si do przyszych sukcesw

Potrzebujesz miejsca na wiczenie nowo nabytych umiejtnoci
PHP bez naraania swoich danych na niebezpieczestwa czyhajce
w sieci. Posiadanie bezpiecznego miejsca na opracowywanie aplikacji PHP przed
wypuszczeniem jej w szeroki wiat sieci internetowej zawsze jest dobrym pomysem.
Dodatek ten zawiera instrukcje dotyczce instalacji serwera WWW, MySQL i PHP, dziki
czemu bdziesz mie do dyspozycji bezpieczne miejsce do pracy i wicze.
S
22
Utwrz rodowisko programistyczne PHP
498
Dowiedz si, co ju masz
498
Czy masz serwer WWW?
499
Czy masz PHP? Ktr wersj?
499
Czy masz MySQL? Ktr wersj?
500
Zacznij od serwera WWW
501
Zakoczenie instalacji serwera Apache
502
Instalacja PHP
502
Etapy instalacji PHP
503
Etapy instalacji PHP: zakoczenie
504
Instalacja MySQL
504
Etapy instalacji MySQL w systemie Windows
505
Uaktywnienie PHP w systemie Mac OS X
510
Etapy instalacji MySQL w systemie Mac OS X
510
Skorowidz
518
-DNNRU]\VWD]bWHMNVLNL
Wstp
Nie mog uwierzy,

e zamiecili to
w ksice o jQuery!
Dlaczego
palce pytanie:
odpowiemy na ?.
le
zia
zd
ro
m
ty
ry
W
ksice o jQue
zamiecili to w
jak korzysta z tej ksiki
Dla kogo jest ta ksika?

Jeeli odpowiesz tak na kade z tych pyta:
1
Czy masz ju dowiadczenie w projektowaniu albo tworzeniu

stron internetowych?
Czy chcesz opanowa, zrozumie, zapamita oraz

stosowa wane koncepcje jzykw jQuery i JavaScript,
dziki czemu Twoje strony bd bardziej interaktywne
i ekscytujce?
Czy wolisz stymulujce rozmowy przy posikach od

drtwych i nudnych wykadw akademickich?
Z pewnoci bdzie prz

ydatne, jeli
masz te pewne dowia
dcz
w pisaniu skryptw. Zna enie
JavaScriptu bdzie pom jomo
ocna, ale
w adnym wypadku nie
jest
wymagana.
to ksika ta jest dla Ciebie.
Kto prawdopodobnie powinien zrezygnowa z tej ksiki?

Jeeli odpowiesz tak na dowolne z tych pyta:
1
Czy jeste zupenym nowicjuszem w projektowaniu stron

internetowych?
Czy programujesz ju aplikacje WWW i szukasz leksykonu

na temat jQuery?
Czy boisz si sprbowa czego nowego? Czy wolaby

leczenie kanaowe od ubrania si jednoczenie w kratk
i prki? Czy sdzisz, e ksika techniczna, w ktrej
wystpuje Wielka Stopa, nie moe by powana?
to ksika ta nie jest dla Ciebie.
[Uwaga od dziau marke

tingu:
Ksika ta jest dla kadeg
ma kart kredytow. Alb o, kto
Gotwka te jest OK. o gotwk.
Ed]
24
wstp
Zajrzyj najpierw do Hea

d
First HTML with CSS &
XHTML. Edycja polska
(Ru
gow!), gdzie znajdzies sz
z
doskonae wprowadzenie
projektowania stron WW do
W,
czym wr i przycz si po
nas w miasteczku jQuery do
.
wstp
Wiemy, co mylisz
Jak co takiego moe by powan ksik o programowaniu w jQuery?
O co chodzi z tymi obrazkami?
Twj m
e TO zg myli,
jest wa
ne.
Czy w ogle mog si w taki sposb uczy?
I wiemy, co myli Twj mzg

Twj mzg pragnie nowoci. Przez cay czas szuka, obserwuje i oczekuje
czego niezwykego. W taki sposb jest zbudowany, co pomaga Ci
utrzyma si przy yciu.
Co wobec tego robi Twj mzg z tymi wszystkimi schematycznymi,
zwykymi i normalnymi zjawiskami, ktre spotyka? Wszystko, co
tylko moe, eby przestay przeszkadza mu w prawdziwej pracy
rejestrowaniu zdarze, ktre maj znaczenie. Nie trudzi si
zapamitywaniem nudnych rzeczy; nigdy nie uda im si przecisn
przez filtr to z pewnoci nie jest wane.
Skd Twj mzg wie, co jest wane? Przypumy, e wyszede na spacer
i wyskoczy na Ciebie tygrys. Co si dzieje w Twojej gowie i Twoim ciele?
Odpalaj neurony. Rozkrcaj si emocje. Buzuje chemia.
To wanie std Twj mzg wie...
To musi by wane! Nie zapominaj o tym!
zg
Twj m e TEGO
myli, rto
nie waitywa.
zapam
wietnie,
jeszcze tylko
500 nijakich,
drtwych
i nudnych stron.
Wyobra sobie jednak, e znajdujesz si w domu albo bibliotece. Jest to miejsce

bezpieczne, ciepe i wolne od tygrysw. Uczysz si, przygotowujesz do egzaminu
albo prbujesz pozna pewne trudne zagadnienie techniczne, co wedug Twojego
szefa powinno Ci zabra tydzie, gra 10 dni.
Jest tylko jeden problem. Twj mzg stara si wywiadczy Ci wielk
przysug. Prbuje zagwarantowa Ci, e ten oczywicie niewany
materia nie obciy Twoich ograniczonych zasobw. Zasobw, ktre
lepiej przeznaczy na przechowywanie naprawd wanych rzeczy.
Takich jak tygrysy. Takich jak zagroenie ogniem. Takich jak to, eby
ju nigdy wicej nie jedzi na snowboardzie w samych tylko spodenkach.
I nie ma prostego sposobu na powiedzenie swojemu mzgowi: Hej,
mzgu, wielkie dziki, ale bez wzgldu na to, jak nudna jest ta ksika
i jak sabo reaguj teraz w emocjonalnej skali Richtera, naprawd
chc zapamita ten materia.
jeste tutaj
25
ia.
usz gow! za uczn
a R
Uwaamy czytelnik
zagwarantowa,
eba to zrozumie, a potem
trz
rw
jpie
Na
?
czy
nau
dnie z najnowszymi
eby si czego
tw do Twojej gowy. Zgo
Co zatem trzeba zrobi,
fak
e
ani
le
ych
wp
o
sam
o
chodzi
uczenie si wymaga o wie
e si tego nie zapomni. Nie
gii i fizjologii nauczania
iolo
rob
neu
niu
wa
zna
po
odkryciami w naukach o
Twj mzg.
stronie. Wiemy, co pobudza
na
stu
tek
o
tylk
ni
cej
wi
gow!:
uczenia si z Rusz
Oto niektre z regu
wa
itania ni same tylko so
wiele atwiejsze do zapam
o
s
%
ki
89
un
Rys
(do
j.
y
zu
wn
ali
kty
zu
efe
Wi
dziej
czania i uczenia si jest bar
i sprawiaj, e proces nau
aniem wiedzy). Poza tym
zyw
eka
prz
i
m
nie
aja
ysw
prz
nad
ach
ani
bad
poprawy w
jQuery( )
si bardziej zrozumiay.
dziki nim materia staje
Zdjcie kudatego
grafiki,
st w obrbie lub blisko
tek
ie
Um
yjaciela po prostu
prz
$( )
u dou lub
t
ias
zam
si,
no
sz zrobi
od
si
rej
do kt
wyskakuje. Czy moe
z dwukrotnie
woli si
po
cz
da
ku
by
e
na innej stronie, a ucze
,
tak
wie
roz
em
stw
pniowo
ie
sto
ob
od
tak
op
o
wikszym prawd
wysuwa i jak
.
my
ble
?
pro
sb
nabiera barw
przedstawione w ten spo
go
ne
wa
lizo
na
i sperso
$( )
Uyj konwersacyjnego
h bada studenci osigali
nyc
daw
nie
s
cza
stylu. Pod
awia
tach, jeli materia przem
o 40% lepsze wyniki w tes
o stylu
neg
cyj
rsa
we
kon
ika z uyciem
bezporednio do czyteln
historie zamiast
malnego stylu. Opowiadaj
for
era
ybi
prz
nie
i
bie
j siebie zbyt powanie.
w pierwszej oso
tocznego jzyka. Nie traktu
po
aj
yw
U
w.
d
ka
wy
wygaszania
ystwu przy obiadku czy te
agi: stymulujcemu towarz
uw
cej
wi
isz
ic
w
po
Czemu
wykadowi?
neurony
Innymi sowy, jeli Twoje
ego zastanowienia si.
bsz
Twojej
w
g
si
do
rzy
nia
zda
ucz
nie
u
Zm
u, nic specjalnego
sik
wy
do
e
on
usz
zm
nie
i i zainspirowa do
nie zostan aktyw
, zaangaowa, zaciekaw
wa
wo
oty
tego
zm
eba
trz
ika
wania nowej wiedzy. Do
gowie. Czyteln
gania wnioskw i genero
ci
wy
noci
w,
yw
m
akt
z
ble
ora
pro
a
a
ani
ani
pyt
rozwizyw
ajce do mylenia
usz
zm
a,
eni
icz
w
a,
ani
celu potrzebne s wyzw
mzgowe i rne zmysy.
angaujce obie pkule
z nas tego
uwag czytelnika. Kady
Przycignij i zatrzymaj
czy, ale nie mog
aprawd chc si tego nau
bitu
N
:
d
czy
O
iad
j mzg zwraca uwag
w
g
do
ie
b
przez pierwsz stron. Tw
et
naw
w
Coroczny
a
ani
ane.
tr
ypi
e
zas
m
bez
o
przebrn
jce wzrok i niespodziew
a 10 kil
sujce, dziwne, przyciga
ere
do bajtu n
int
mzg
e,
j
yk
Tw
zw
na.
nie
nud
czy
by
rze
na
adnie nie musi
zag
h
nyc
icz
hn
tec
,
ych
dn
Nauka nowych, tru
ej, jeli taka nie bdzie.
opanuje je o wiele szybci
czego w duej
zdolnoci do zapamitania
oje
Tw
e
y,
em
Wi
.
ach
czym Ci zaley.
Zagraj na emocj
izanych. Pamitasz to, na
zw
tym
z
i
ocj
em
od
e
mierze zal
ciskajcych zy historiach
. Nie, nie mwimy tu o wy
jesz
czu
ie,
co
li
je
sz,
ita
Pam
ach takich jak zaskoczen
o psie. Mwimy o emocj
re
kt
!,
em
trz
mis
m
takich jak o chopcu i jeg
ste
e o uczuciu je
tak
a
!,
ba
dia
u
co
,
cy
o
zys
czym ws
ciekawo, rad
, nauczysz si czego, o
zi, kiedy rozwiesz zagadk
stem zdolniejszy
od
je
t
ych
ber
prz
:
Ro
te
m
czy
z
o
,
c
rozpo
albo gdy wiesz co
e,
dn
tru
t
jes
e
,
l
my
i
Odliczanie tartu!
inn
inynierii nie ma pojcia.
3 dni do s
technicznie ni ty z dziau
26
wstp
wstp
Metapoznanie: mylenie o myleniu

Jeli naprawd chcesz si uczy i chcesz si uczy szybciej i lepiej zwracaj uwag na
to, jak zwracasz uwag. Myl o tym, jak mylisz. Naucz si, jak si uczysz.
Wikszo z nas, kiedy dorastaa, nie uczestniczya w kursach metapoznania ani w kursach
z teorii nauczania. Oczekiwano, e bdziemy si uczy, ale rzadko uczono nas, jak si uczy.
Ciekawe, jak mgbym

skoni mj mzg do
zapamitania tego
materiau...
Zakadamy jednak, e jeli ju trzymasz w rkach t ksik, to naprawd chcesz si

czego nauczy o jQuery i prawdopodobnie nie chcesz straci zbyt duo czasu. A poniewa
w przyszoci bdziesz wicej pracowa z jQuery, powiniene zapamita to, co czytasz.
Z tego te powodu musisz to zrozumie. Aby wynie jak najwicej z tej ksiki albo
z jakiejkolwiek innej ksiki lub procesu uczenia we odpowiedzialno za swj mzg.
Swj mzg w odniesieniu do tej treci.
Sztuczka polega na tym, aby Twj mzg potraktowa materia, ktrego si
uczysz, jak Co Naprawd Wanego. Istotnego dla Twojego samopoczucia.
Wanego jak tygrys. W przeciwnym razie bdziesz skazany na nieustajc
bitw, w ktrej Twj mzg bdzie robi, co tylko bdzie mg, aby nie
dopuci do przyjcia si nowego materiau.
Jak wic skonisz swj mzg, eby myla, i programowanie

w jQuery to godny tygrys?
Istnieje sposb wolny i mudny, ale jest te metoda skuteczniejsza. Sposb wolny
sprowadza si do zwykych powtrek. Z pewnoci wiesz, e potrafisz si nauczy nawet
najnudniejszych zagadnie i je zapamita, jeli bdziesz wtacza w mzg cigle to samo.
Po wystarczajcej liczbie powtrek Twj mzg stwierdzi: To nie wydaje si dla niego
wane, ale on wci i wci, i wci spoglda na to samo, wic przypuszczam, e takie jest.
Szybszy sposb polega na zrobieniu wszystkiego, co zwiksza aktywno mzgu, a zwaszcza
rne rodzaje aktywnoci. Rzeczy wymienione na poprzedniej stronie stanowi ogromn
cz rozwizania i udowodniono, e kada z nich wspomaga prac mzgu z korzyci
dla Ciebie. Badania wykazay na przykad, e umieszczanie wyrazw opisujcych rysunki
wewntrz tych rysunkw (w przeciwiestwie do innych miejsc na stronie takich jak podpisy
albo tekst gwny) zmusza Twj mzg do prb odnalezienia zwizkw midzy sowami
i obrazami, co wyzwala aktywno wikszej liczby neuronw. Wicej aktywnych neuronw
= wiksze szanse na to, e Twj mzg uzna, i jest to co, na co warto zwrci uwag i by
moe zapamita.
Styl konwersacyjny pomaga, poniewa ludzie s skonni powica wicej uwagi, kiedy
sdz, e uczestnicz w rozmowie, gdy spodziewaj si kontynuacji tematu i podjcia
dialogu ze swojej strony. Zdumiewajce jest, i Twj mzg niezupenie dba o to, e ta
rozmowa jest prowadzona z ksik! Jeli natomiast styl ksiki jest formalny i drtwy,
Twj mzg odbiera j tak samo jak uczestnictwo w wykadzie prowadzonym w sali
wypenionej pasywnymi suchaczami. Nie ma potrzeby, aby zachowywa czujno.
Ale rysunki i styl konwersacyjny to zaledwie pocztek.
jeste tutaj
27
Oto co zrobilimy
Uylimy rysunkw, poniewa Twj mzg jest zorientowany na obrazy, a nie na tekst. Jeli
chodzi o Twj mzg, to obraz rzeczywicie wart jest tysica sw. Tam gdzie tekst i obrazy
maj wspistnie, osadzilimy napisy wewntrz rysunkw, poniewa Twj mzg pracuje
efektywniej, kiedy tekst znajduje si w rodku rzeczy, do ktrych si odnosi, ni gdy jest on
umieszczony w podpisach albo zagrzebany gdzie w treci.
Uylimy powtrek, podajc t sam informacj na rne sposoby, za pomoc innych mediw
i poprzez odwoanie si do wielu zmysw, aby zwikszy szanse, e tre zostanie zakodowana
nie tylko w jednym rejonie Twojego mzgu.
Uylimy koncepcji i rysunkw w niespodziewany sposb, poniewa Twj mzg jest nastawiony
na nowoci. Skorzystalimy z obrazw i pomysw zawierajcych jaki emocjonalny przekaz,
poniewa Twj mzg jest nastawiony na zwracanie uwagi na biochemi emocji. Co, co
skania Ci do odczucia czego, zapamitasz z wikszym prawdopodobiestwem, nawet
jeli uczucie to bdzie niczym wicej jak tylko przejawem humoru, zaskoczeniem albo
zaciekawieniem.
Uylimy spersonalizowanego, konwersacyjnego stylu, gdy Twj mzg jest nastawiony na
zwracanie na co wikszej uwagi, kiedy sdzi, e uczestniczysz w rozmowie, ni gdy myli,
e pasywnie suchasz wykadu. Twj mzg dziaa tak nawet wtedy, kiedy czytasz.
Jazda prbna
Zmienna
Tablica
Zamiecilimy wiele aktywnoci, poniewa Twj mzg jest nastawiony na lepsz nauk
i zapamitywanie, kiedy co robisz, ni kiedy o tym czytasz. Wybralimy wiczenia stawiajce
wyzwania, ale wykonalne, poniewa wikszo osb woli wanie takie.
Uylimy wielu stylw nauczania, poniewa Ty moesz wole procedury opisane krok po
kroku, podczas gdy kto inny woli obraz caoci, a kto jeszcze inny chce po prostu zobaczy
przykad. Niezalenie jednak od indywidualnych preferencji kady moe odnie korzyci,
widzc ten sam materia przedstawiony na wiele rnych sposobw.
Zamiecilimy materiay dla obu pkul Twojego mzgu, gdy im bardziej Twj mzg si
zaangauje, z tym wikszym prawdopodobiestwem nauczysz si i zapamitasz i tym duej
bdziesz pozostawa skupiony. Jako e praca jedn pkul czsto daje drugiej pkuli szans
na odpoczynek, moesz by bardziej produktywny, kiedy musisz uczy si przez dusze okresy
czasu.
Zamiecilimy historie oraz wiczenia, ktre przedstawiaj wicej ni tylko jeden punkt
widzenia, poniewa Twj mzg jest nastawiony na gbsz nauk, kiedy jest zmuszony do
wydawania ocen i osdw.
Zamiecilimy wyzwania z wiczeniami oraz zadalimy pytania, na ktre nie zawsze istniej
proste odpowiedzi, poniewa Twj mzg jest nastawiony na nauk i pamitanie, kiedy musi
nad czym pracowa. Pomyl o tym od samego ogldania ludzi na siowni Twoje ciao nie
nabierze ksztatu. Zrobilimy wszystko, co w naszej mocy, aby kiedy ju zabierzesz si do
cikiej pracy pracowa nad waciwymi problemami. Upewnilimy si, e nie powicisz
nawet jednego dodatkowego dendrytu na analiz trudnego do zrozumienia przykadu lub
przetwarzanie cikiego, wypenionego argonem albo suchego tekstu.
Skorzystalimy z ludzi w historiach, przykadach, na rysunkach itd. poniewa Ty jeste
czowiekiem i Twj mzg zwraca wiksz uwag na ludzi ni na inne rzeczy.
28
wstp
Pogawdki przy kominku
wstp
Oto co moesz zrobi, aby zmusi swj

mzg do posuszestwa
My ju zrobilimy, co do nas naleao. Reszta zaley od Ciebie. Ponisze
wskazwki to punkt wyjcia suchaj swojego mzgu i dowiedz si, co
w jego przypadku dziaa, a co nie. Wyprbuj nowe rzeczy.
Wytnij ponis
i naklej je na ze porady
lodwk.
Nie ograniczaj si wycznie do czytania. Zatrzymaj

si i pomyl. Kiedy ksika zada Ci pytanie, nie
przeskakuj od razu do odpowiedzi. Wyobra sobie,
e kto naprawd Ci pyta. Im bardziej zmusisz swj
mzg do mylenia, tym wiksze bdziesz mie szanse
na nauczenie si i zapamitanie.
2
jeszcze poczujesz pragnienie) pogarsza funkcje

poznawcze.
Zwolnij. Im wicej zrozumiesz, tym mniej

bdziesz musia pamita.
6
Mowa angauje rne czci mzgu. Jeli prbujesz

co zrozumie albo zwikszy szanse na pniejsze
tego zapamitanie, mw na gos. Albo, jeszcze lepiej,
sprbuj wyjani to komu innemu. Nauczysz si
tego szybciej i przy okazji by moe odkryjesz idee,
o ktrych by nie wiedzia, gdyby tylko o tym czyta.
Rb wiczenia. Zapisuj swoje uwagi.

Umiecilimy wiczenia w ksice, ale gdybymy je
rozwizali, to byoby tak, jakby kto inny poszed
za Ciebie na trening. Nie ograniczaj si tylko do
patrzenia na wiczenie. Uyj owka. Istnieje mnstwo
dowodw na to, e aktywno fizyczna podczas nauki
moe poprawi zapamitywanie.
7 Suchaj swojego mzgu.
Zwracaj uwag na to, czy Twj mzg nie zaczyna by

przeciony. Jeli spostrzeesz, e tylko przelizgujesz
si po tekcie wzrokiem albo zapominasz, co przed
chwil przeczytae, pora zrobi sobie przerw. Kiedy
ju przekroczysz pewien punkt, nie nauczysz si
szybciej, prbujc wchon wicej, a nawet moesz
zaszkodzi caemu procesowi nauki.
3 Czytaj Nie istniej gupie pytania.
Kade z nich. To nie s fragmenty opcjonalne

stanowi one cz gwnej treci tej ksiki. Nie
pomijaj ich.
jak czytasz przed snem, albo przynajmniej

ostatni ambitn rzecz.
Pij wod. Duo wody.

Twj mzg pracuje najlepiej zanurzony w przyjemnej
kpieli. Odwodnienie (ktre moe nastpi, zanim
Poczuj co!
Twj mzg chce wiedzie, e to ma znaczenie. Angauj
si w historie. Wymylaj wasne podpisy do zdj.
Zymanie si na zy dowcip i tak jest lepsze ni brak
jakiejkolwiek reakcji.
4 Niech ta ksika bdzie ostatni rzecz,
Cz procesu uczenia si (a zwaszcza przenoszenie

wiedzy do pamici dugoterminowej) zachodzi ju po
tym, jak odoysz ksik. Twj mzg potrzebuje czasu
dla siebie, aby zaj si przetwarzaniem. Jeli w tym
czasie dorzucisz co nowego, cz z tego, czego si
wanie nauczye, przepadnie.
Mw o tym. Na gos.
Stwrz co!
Stosuj nabyt wiedz w codziennej pracy. Korzystaj
z tego, czego si nauczye, przy podejmowaniu decyzji
w swoich projektach. Po prostu zrb co, eby zdoby
troch dowiadczenia wykraczajcego poza wiczenia
i aktywnoci zawarte w tej ksice. Wszystko, czego
potrzebujesz, to owek i problem do rozwizania
Problem, przy ktrym mgby odnie korzyci,
stosujc narzdzia i techniki, ktre poznajesz na
potrzeby egzaminu.
jeste tutaj
29
Przeczytaj mnie
Ksika ta ma stanowi dowiadczenie zwizane z nauk i nie jest leksykonem. Celowo pozbylimy si
wszystkiego, co tylko mogoby przeszkodzi w procesie poznawania tego, czym zajmujemy si w danym
miejscu ksiki. Pierwsze jej czytanie bdziesz jednak musia zacz od pocztku, poniewa przyjlimy
w tej ksice pewne zaoenia co do tego, co ju widziae i co wiesz.
Oczekujemy, e znasz HTML i CSS

Jeli nie znasz HTML-a ani CSS, signij po Head First HTML with CSS & XHTML Edycja polska, zanim
zaczniesz lektur. Odwieymy nieco wiedz o selektorach CSS, ale nie spodziewaj si, e nauczysz si tu
wszystkiego, co potrzebujesz na temat CSS wiedzie.
Nie oczekujemy, e znasz JavaScript

Wiemy, wiemy To kontrowersyjna opinia, ale sdzimy, e moesz nauczy si jQuery bez wczeniejszej
znajomoci JavaScriptu. Aby pisa w jQuery, musisz go troch zna i nauczymy Ci tych wszystkich
wanych koncepcji JavaScriptu rwnolegle z kodem jQuery. Szczerze i gboko wierzymy w motto
jQuery: Pisz mniej. Rb wicej.
Namawiamy Ci do uywania wicej ni tylko jednej przegldarki

Zachcamy Ci, aby testowa swoje strony przynajmniej w trzech aktualnych przegldarkach. Uzyskasz
dziki temu dowiadczenie w dostrzeganiu rnic midzy przegldarkami oraz w tworzeniu stron, ktre
bd poprawnie dziaa w wielu z nich.
To nie jest ksika Rusz gow! Narzdzia dla programistw w przegldarkach

ale oczekujemy, e wiesz, jak z tych narzdzi korzysta. Gorco polecamy przegldark Google
Chrome, ktr moesz pobra std: http://www.google.com/chrome. Moesz te odwiedzi ponisze strony
w celu uzyskania informacji o nastpujcych przegldarkach oraz ich narzdziach dla programistw:
Google Chrome
http://code.google.com/chrome/devtools/docs/overview.html
Firebug dla Firefox
http://getfirebug.com/wiki/index.php/FAQ
Safari
http://www.apple.com/safari/features.html#developer
Internet Explorer 8
http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx
Internet Explorer 9
http://msdn.microsoft.com/en-us/ie/aa740478
Dragonfly dla Opery
http://www.opera.com/dragonfly/
Spodziewamy si, e wyjdziesz poza t ksik

Najlepsze, co moesz zrobi podczas uczenia si czego nowego, to doczenie do uczcej si
spoecznoci. Jestemy przekonani, e spoeczno jQuery jest jedn z najlepszych i najaktywniejszych
w wiecie technologii. Moesz dowiedzie si wicej tutaj: http://www.jquery.com.
30
wstp
wstp
Te aktywnoci NIE s opcjonalne

wiczenia i aktywnoci nie s jedynie dodatkami; s one nieodczn czci tej ksiki. Niektre z nich
pomog Twojej pamici, inne w zrozumieniu, a jeszcze inne w zastosowaniu tego, czego si nauczye.
Nie pomijaj wicze. Nawet krzywki s wane pomagaj one przedosta si rnym koncepcjom
do Twojego mzgu. Co jednak waniejsze, daj one Twojemu mzgowi doskona okazj, aby pomyla
w innym kontekcie o sowach i terminach, ktrych si uczye.
Powtrzenia s celowe i wane

Jedn z wyrniajcych cech ksiek Rusz gow! jest to, e chcemy, aby naprawd zrozumia. Chcemy
te, eby koczc ksik, pamita, czego si nauczye. Celem, jaki stawia przed sob wikszo
czytelnikw leksykonw, nie jest zapamitywanie i przypominanie sobie, ale ta ksika stanowi o uczeniu
si, tak wic niektre z koncepcji pojawi si tu wicej ni tylko raz.
wiczenia Wysil szare komrki nie maj odpowiedzi

Niektre z nich nie posiadaj odpowiedzi, a w przypadku innych czci procesu wysilania szarych
komrek bdzie zadecydowanie, czy Twoje odpowiedzi s dobre. W niektrych wiczeniach z cyklu
Wysil szare komrki znajdziesz podpowiedzi kierujce Ci we waciw stron.
Wymagania softwareowe
Aby pisa kod w jQuery, potrzebujesz edytora tekstw, przegldarki, serwera WWW (moe dziaa
lokalnie na Twoim komputerze) oraz biblioteki jQuery.
Edytory tekstw, jakie polecamy dla Windows, to PSPad, TextPad, EditPlus (ale jeli musisz, moesz
korzysta te z Notatnika). Edytorem, ktry polecamy dla Maca, jest TextWrangler. Jeli pracujesz
w systemie Linux, masz do dyspozycji mnstwo wbudowanych edytorw i wierzymy, e nie ma
koniecznoci opowiadania Ci o nich.
Jeli zamierzasz programowa aplikacje WWW, bdzie Ci potrzebny serwer. Aby przerobi pniejsze
rozdziay (9., 10. i 11.), bdziesz musia zapozna si z dodatkiem opisujcym instalacj PHP, MySQL
oraz serwera WWW (Apache albo IIS) i wykona opisane tam czynnoci. Zalecamy, aby zrobi to teraz.
Naprawd! Przejd do dodatku, zastosuj si do instrukcji i wr tu, kiedy skoczysz.
Bdzie Ci te potrzebna przegldarka oraz narzdzia dla programistw przegldarki (zapoznaj si
z tekstem na poprzedniej stronie). Warto te powici czas na nauk korzystania z konsoli JavaScript
w narzdziach Google Chrome. T prac domow bdziesz musia odrobi sam.
I wreszcie bdzie Ci potrzebna biblioteka jQuery. Odwr stron, a pokaemy Ci, skd j wzi.
jeste tutaj
31
Pobierz jQuery
No to zaczynamy. Przejd na stron jQuery i pobierz kopi
biblioteki, z ktrej bdziesz korzysta podczas lektury tej ksiki.
Krok pierwszy:
Uruchom swoj ulubion przegldark i wska
jej nastpujcy adres: http://jquery.com/.
Krok drugi:
Odszukaj sekcj zatytuowan Grab the Latest Version!
(czyli Pobierz najnowsz wersj!), a nastpnie zaznacz
pole wyboru obok opcji Production (wersja produkcyjna).
Krok trzeci:
Kliknij przycisk Download jQuery (czyli Pobierz jQuery).
Krok czwarty:
Na nastpnej stronie zobaczysz mniej wicej co
takiego:
Stron zapisz na swoim dysku w folderze scripts.
jquery-1.7.min.js
scripts
Jaka jest rnica midzy wersj produkcyjn a dewelopersk?

Wersja produkcyjna (production) jQuery jest wersj zminiaturyzowan
przeznaczon do szybkiego wykonywania si na serwerze WWW. Wersja
deweloperska (development) jest przeznaczona dla programistw
zainteresowanych poznawaniem i poszerzaniem wewntrznych mechanizmw
biblioteki jQuery. Pobierz kopie obu tych wersji, jeli naleysz do tych, ktrzy
lubi zaglda do rodka silnika.
32
wstp
wstp
Konfiguracja folderw
Po pobraniu i rozpakowaniu kodw z ksiki ze strony wydawnictwa Helion
(ftp://ftp.helion.pl/przyklady/jquerg.zip) stwierdzisz, e s one poumieszczane
w folderach zorganizowanych wedug poszczeglnych rozdziaw. Spjrzmy
na przykad na r03:
Dla kadego rozdziau

istnieje folder begin
zawierajcy kod
pocztkowy.
Folder scripts zawiera

r
bibliotek jQuery, kt
wanie pobrae.
W folderze styles
znajduje
si plik my_style
za
wszystkie style po wierajcy
trzebne do
rozpoczcia pracy
w danym
rozdziale.
Plik index.htm
zawiera kod l
dl
aplikacji WW a
W.
Folder end zawiera kocowy kod dla rozdziau. Namawiamy Ci, eby korzysta
z tego folderu tylko dla sprawdzenia wynikw swojej pracy.
iera kod,
Plik my_scripts.js zaw . Sprbuj
sam
a
pis
sz
ktry bdzie
nie zagldaj
wysili swj umys i ziesz ju
tutaj, chyba e nie bd
mia innego wyjcia.
Moesz korzysta z biblioteki jQuery w dowolnym ze swoich projektw. Dla Twojej wygody
umiecilimy j w folderze z kodami udostpnionymi dla tej ksiki, niemniej jednak
powiniene wiedzie, skd j wzi, na potrzeby swoich przyszych projektw i ze wzgldu
na jej aktualizacje. Ludzie od jQuery aktualizuj t bibliotek regularnie.
jeste tutaj
33
zesp recenzentw
Zesp recenzentw technicznych

Lindsey Skouras
Bill Mietelski
Paul Barry
ran
Jim Do
Jim Doran pracuje jako inynier oprogramowania na Uniwersytecie Johna Hopkinsa w Baltimore w stanie Maryland.
Naucza JavaScriptu w Community College of Baltimore County i opowiada o tym jzyku podczas konferencji
powiconych sieci WWW. Kiedy nie zajmuje si tym wszystkim, prowadzi pod adresem http://jimdoran.net blog
powicony sztuce, a take bierze udzia w studenckich rozgrywkach roller derby league.
Bill Mietelski by recenzentem technicznym kilkunastu ksiek z serii Head First. Obecnie, jako inynier oprogramowania
w czoowym krajowym centrum medycznym w metropolii chicagowskiej, prowadzi badania biostatystyczne. Kiedy nie
zbiera ani nie analizuje danych, mona go spotka na lokalnym polu golfowym uganiajcego si za ma bia pieczk.
Lindsey Skouras jest prawnikiem w Waszyngtonie DC. W wolnym czasie nauczya si programowa dziki ksikom
z serii Head First. Do jej pozostaych zainteresowa nale czytanie, robtki rczne, zwiedzanie muzew oraz spdzanie
czasu z mem oraz psami.
Paul Barry wykada informatyk na politechnice w Carlow w Irlandii. Paul jest redaktorem czasopisma Linux Journal
oraz autorem ksiek technicznych. Napisa take Head First Python i jest wspautorem Head First Programming. Kiedy
ma czas, zajmuje si konsultacjami w sektorze maych i rednich przedsibiorstw oraz w zakresie uruchamiania projektw
programistycznych.
34
wstp
wstp
Podzikowania
Nasza redaktor:
Dzikujemy (i gratulujemy!) Courtney Nash, ktra nakonia nas do
stworzenia najlepszej chyba ksiki, jak bylimy w stanie napisa. Sprostaa
wielkiej liczbie naszych e-maili, pyta, gdera i okazyjnych dziwactw.
Wytrzymaa z nami przez cay czas powstawania tej ksiki i ufaa nam,
kiedy ufalimy naszej intuicji.
Courtney Nash
Ludzie w OReilly:
Dzikujemy Lou Barr za byskawiczn, wspania i magiczn prac, jak wykonaa, aby uksztatowa t ksik
i sprawi, e jest pikna.
Dzikujemy Laurie Petryckiej za danie nam zielonego wiata. Ryan bardzo mio wspomina
szkolenie w siedzibie HF w Bostonie i nigdy nie zapomni ciepej rodzinnej atmosfery, o ktr
zadbaa Laurie.
Dzikujemy Karen Shaner. Dzikujemy wszystkim z ekipy recenzentw technicznych.
Ryan nigdy nie zapomni dnia, w ktrym odkry w ksigarni seri Head First. Podzikowania dla
Kathy Sierry i Berta Batesa za wzbudzanie neuronw u maniakw komputerowych, gdziekolwiek
si ci maniacy znajduj. Dzikujemy Bertowi za suchanie naszego zrzdzenia i wycignicie nas
z problemw zwizanych z ukoczeniem ksiki oraz za wskazywanie nam jasnych celw ;).
Dzikujemy Timowi OReilly za jego wizj stworzenia najlepszej literatury dla komputerowcw!
Przyjaciele i rodzina Ronana:
Lou Barr
Szczeglne podzikowania dla mojej ony Caitlin, ktra pomoga w urzeczywistnieniu tej ksiki, suc swoj
fantastyczn znajomoci wszystkich funkcji w Adobe. Dzikuj te za jej cierpliwo bez Ciebie nie mgbym
tego wszystkiego zrobi! Wielkie dziki wszystkim, ktrzy wspierali nas w tym wysiku moim wspaniaym
ssiadom, naszym kumplom z piwnicznego mieszkania na Uniwersytecie Portlandzkim, moim wyrozumiaym
druynom piki nonej i kolegom od golfa. Dzikuj mojej rodzinie w Irlandii za jej wsparcie i sowa zachty.
Przede wszystkim dzikuj Ryanowi Benedettiemu, mojemu wspaniaemu wspautorowi, koledze i przyjacielowi.
Dziki za zabranie mnie w t podr i danie mi szansy. To byo wspaniae dowiadczenie!
Przyjaciele i rodzina Ryana:
Dzikuj mojej crce Josie, mojemu synowi Vinniemu i mojej narzeczonej Shonnie, ktra wierzya we mnie
i codziennie wspieraa mnie na wiele rnych sposobw, kiedy pisaem t ksik. Ti amo, i miei tre miracoli.
Tak bardzo Was kocham, moje trzy cuda!
Dzikuj mojej mamie i mojemu tacie, mojemu bratu Jeffowi i moim siostrzenicom Claire i Quinn. Dzikuj
moim piwnicznym wsplokatorom oraz zaodze WAS na Uniwersytecie Portlandzkim, a mianowicie Jenny Walsh,
Jacobowi Caniparolemu oraz wtorkowej ekipie technicznej (wiecie, kogo mam na myli). Dziki dla Caitlin PierceCranley za jej niesamowit wiedz o projektowaniu. Dzikuj mojemu kumplowi, irlandzkiemu ninja (znanemu
te jako Ronan Cranley) za jego doskonae umiejtnoci programowania w jQuery, JavaScripcie i PHP, za jego
poczucie humoru oraz za niewiarygodn etyk pracy nad t ksik.
jeste tutaj
35
36
wstp
1.=DF]\QDP\]bM4XHU\
Akcja na stronach internetowych

Moe jest tu co, dziki
czemu moje strony bd
bardziej interaktywne.
Chcesz wicej dla swoich stron. Masz w zanadrzu HTML oraz CSS i chciaby wzbogaci
swoje umiejtnoci o pisanie skryptw, ale nie masz zamiaru spdzi caego ycia, piszc je wiersz
po wierszu. Potrzebujesz biblioteki skryptw, ktra pozwoli Ci zmienia strony internetowe w locie.
A skoro wyraamy ju nasze yczenia, to moe doda jeszcze wspprac z Ajaksem i PHP? Czy da
si zrobi w trzech wierszach to, do czego wikszo jzykw po stronie klienta potrzebuje pitnastu?
Pobone yczenia? W adnym wypadku! Musisz zapozna si z jQuery.
to jest nowy rozdzia
37
ruszaj rzeczami
Chcagz wada gftonami

Wiesz ju, jak budowa wspaniale wygldajce strony, wykorzystujc czysty
i zgodny ze standardami HTML i CSS. Statyczne strony internetowe to ju
jednak nie jest to -ludzie chc strony reagujcej. Chc akcji, animacji,
interakcji i mnstwa fajnych efektw.
Chcesz p
ntrol nad swoimi stronami i uczyni je przydatniejszymi dla swoich goci?
Na poniszej licie zaznacz wszystkie opcje, ktre mog zosta do tego zastosowane.
D
D
D
D
D
38
Rozdzia 1.
Dynamiczne dodawanie elementw do strony bez odwieania jej za kadym razem.

Zmiana pozycji menu, kiedy uytkownik przesuwa po nich mysz.
Ostrzeganie uytkownika, kiedy w formularzu pozostanie niewypenione pole.
Dodanie do tekstu i obrazw ruchu oraz przej.
Pobieranie danych z serwera dokadnie wtedy, kiedy potrzebuje ich uytkownik.
zaczynamy z jquery
HTML i CSS g w potzdku, ala...

Stare dobre HTML i CSS dobrze si sprawdzaj przy nadawaniu stronom struktury
i stylu. Kiedy ju wyrendemjesz stron HTML, ona tam bdzie, ale bdzie statyczna.
A jeli zechcesz zmieni wygld strony albo co do niej doda lub usun? Bdziesz
musia niele si nagimnastykowa w CSS albo po prostu zaadowa now stron, co
niekoniecznie odbdzie si szybko. Dlaczego? Poniewa wszystko, co tak naprawd
robisz za pomoc HTML-a i CSS, to kontrolowanie tego, jak wyglda strona.
Przegldarka prosi serwer o stron,

kiedy kto wpisze adres w jej pasku
adresowym.
..----o
Serwer odszukuje dany

plik lub pliki i wysya je do
przegldarki.
/1--1
Fflllltt\
---
index.html
Serwer WWW
Przegldarka wywietla wyrenderowan stron HTML

na podstawie pliku przesanego przez serwer.
index.html
Przegldarka pobiera
srom i wywietla j
uzytkownikowi.
jeste tutaj
39
trzymaj si skryptu
... potzabujagz mocy gJerypfu

Aby zmienia strony internetowe w locie bez ich odwieania, musisz
porozmawia z przegldark. Jak to zrobi? Za pomoc znacznika
HTML znanego jako <scri pt>.
<seript>
pt::>
<scri
Znacznik
mieszczony
zostaje u
T ML
</scrip
index.html
Znacznik <script> mwi

przegldarce, e dasz jej
ki/k wskawek, do ktrych
powmna s1 zastosowa
e?
()
f!:i l
Dobre pytanie. Pamitaj, e HTML to jzyk

znacznikw, ktry obsuguje struktur
dokumentu.
Z kolei kaskadowe arkusze stylw (CSS) kontroluj

wygld i dziaanie oraz pozycj elementw. HTML
i CSS kontroluj to, jak strona jest tworzona

i wywietlana, ale aden z nich nie jest w stanie doda
do strony zachowania. Do tego potrzebujemy jzyka
skryptowego. To, czego potrzebujemy, to jQuery.
40
Rozdzia 1.
zaczynamy z jquery
Nadchodzi jQuaty (i JavaSctipt)!

Jzyk, z ktrego korzystamy, aby wydawa polecenia przegldarce, to
JavaScript. Kada przegldarka ma wbudowany interpreter JavaScriptu
wykonujcy polecenia, ktre s umieszczone midzy znacznikami
<scri pt>, i tumaczcy je na rne akcje podejmowane na stronie.
iptu
Interpreter JavaSc
.ch
uchuje" zdarzen tak
"nast
" ktore
jak kliknicie mys
zachodz. na stron1e.
Aby wydawa polecenia interpreterowi, musisz

jednak mwi w JavaScripcie. Ale bez obaw! Wanie
w tym miejscu wkracza jQuery. jQuery to biblioteka
jzyka JavaScript wyspecjalizowana w zmienianiu w locie
dokumentw strony WWW Wyprbujmy j troch.
'.
Intrpre
moze tez
riptu
a
lqdanoe
'Ojauery to biblioteka
o
o
e?
jzyka JavaScript
wyspecjalizowana
w zmienianiu w locie
dokumentw strony
WWW.
<script>
A...\..
y skrypt dynamicznie zmienia stron internetow. Przeczytaj kady wiersz

i
ujc na tym, co ju wiesz o HTML-u i CSS, zastanw si, co moe on robi.
Nastpnie napisz, co wedug Ciebie robi kod. Jeli nie masz pewnoci, za co
odpowiada dany wiersz, moesz zgadywa. Jeden wiersz opisalimy za Ciebie.
$(document).ready(function(){
Kiedy dokument strony jest gotw, zrb to co poniej.
$("button").click(function(){
$("hl").hide("slow");
$("h2").show("fast");
$("img").slide Up();
});
} );
<jscript>
jeste tutaj
41
zaostrz rozwizanie
Rozwizanie
Poniszy skrypt dynamicznie zmienia stron internetow. Przeczytaj kady wiersz

i bazujc na tym, co ju wiesz o HTML i CSS, zastanw si, co moe on robi.
Nastpnie napisz, co wedug Ciebie robi kod. Jeli nie masz pewnoci, co robi dany
wiersz, moesz zgadywa. Oto nasze rozwizanie.
<script>
$("button").click(function(){
Kiedy dokument strony jest gotw, zrb to co poniej.

Kiedy zostanie kliknity dowolny przycisk, zrb to:
$("hl").hide("slow");
Niech wszystkie elementy h1 powo/i znikn ze strony.
$("h2").show("fast");
Niech wszystkie elementy h2 szybko
$("img").slide Up();
});
} );
<jscript>
Dobre pytanie. To wszystko

przypomina troch czary, prawda1
Spjrzmy na stron WWW z perspektywy

przegldarki. Skupmy si zwaszcza na tym,
jak jQuery moe z wntrza przegldarki
zmienia stron.
42
Rozdzia 1.
zaczynamy z jquery
Spojrzenie do wntrza przegldarki

Nadszed czas, aby odcign zason i zobaczy, co naprawd dzieje si w tle strony,
kiedy wywietla j przegldarka. Twoja przegldarka korzysta z Obiektowego Modelu
Dokumentu HTML (Document Object Model, czyli DOM), aby z prostych znacznikw
HTML i kodu CSS zbudowa stron wypenion tekstem, obrazami, filmami i ca t
wspania zawartoci, ktr tak uwielbiamy oglda.

!"#
3

To wszystko dzieje
si w przegldarce.
index.html
2

'

!"#*

+, -
'
/" 0 !"#10/"2
index.html
Wersja DOM
strony

oknie roboczym.
Okno robocze
to gwne okno
przegldarki.
4 5 0/"

+

''

Interpreter
JavaScriptu
Wersja DOM
strony
jeste tutaj
43
koci drzewa DOM
Ukryta struktura strony

Od lat DOM pomaga jzykom HTML, CSS i JavaScript w skuteczniejszej
wsppracy. Udostpnia on ustandaryzowany szkielet, ktrego uywaj nowoczesne
przegldarki w celu efektywniejszego przegldania stron. Wiele osb uwaa, e
DOM jest zbudowany jak drzewo: ma korze oraz gazie z wzami na kocach.
Alternatywnie moesz myle o nim jak o zdjciu rentgenowskim pokazujcym
wewntrzn budow strony.
Znacznik <html> jest
u.
korzeniem dokument
html
head
Kada cz drzewa
DOM nazywana jest
wzem.
body
title
Wszystko, co odnosi si
do znacznika <html>, jest
wzem elementu.
div
Koci DOM
Twoje koci
nie
o
o DOM
Drzew dza si tylk
a
o
w
T
o
r
.
w
sp
e.
ment
do ele zy tekstow
w
s
img
Ko
palucha
czy si
z koci
stopy
ul
li
li
Ko stopy
czy si
z koci
kostki
Zdjcie rentgenowskie mwi lekarzowi, co si dzieje w ukrytej

strukturze ciaa. Podobnie jak rentgen, drzewo DOM pokazuje
struktur kryjc si za stron internetow, jednak w przeciwiestwie
do przewietlenia drzewo DOM jest wykorzystywane przez JavaScript
i jQuery do zmieniania struktury strony.
44
Rozdzia 1.
li
Ko kostki
czy si
z koci
nogi
zaczynamy z jquery
Dziki jQuery drzewo DOM nie jest takie straszne

Drzewo DOM moe si wydawa skomplikowane i straszne, ale szczliwie dla nas
jQuery sprawia, e jest ono proste. Nie zapominaj, e jQuery to JavaScript, ale w wydaniu
o wiele bardziej przyjaznym. Jeli chcesz sprawowa kontrol nad drzewem DOM, jQuery
w znacznym stopniu Ci to uatwi. Zamy na przykad, e chcemy zmieni HTML
wewntrz jednego tylko elementu akapitu na naszej stronie.
Sposb z surowym kodem JavaScript

em
Rozmawiam z dokument M).
DO
(czyli z wielkim D w
Podaj mi wszystkie
elementy z nazw
znacznika p.
Sposb z jQuery
Zap element
akapitu.
Zamie HTML tego

elementu na to, co
znajduje si midzy
nawiasami.
!#%&
document.getElementsByTagName("p")

Podaj mi elem
ent
zerowy.
Skonfiguruj HTML
wewntrz tego
elementu...
...eby zrobi
co takiego.
lnika
jQuery korzysta z si czy, e
zna
co
,
go
we
oro
selekt
elementy za
moesz okrela rne jak w CSS.
tak
w,
or
ekt
pomoc sel
Albo zamy, e chcemy zmieni HTML wewntrz

piciu elementw akapitu na naszej stronie.
Wykonaj ptl dla tylu ieni.
elementw, ile chc zm
Poniewa jQuery korzysta

z selektorw CSS, moemy
to wyrazi tak samo jak
powyej.

{
}
document.getElementsByTagName("p")[i].

!#%&
Podaj mi element,
ktry wanie mamy
w ptli.
Jedn z mocnych stron jQuery jest moliwo pracy z drzewem DOM bez potrzeby
zagbiania si w szczegy na jego temat. Gdzie tam w gbi ca cik prac
wykonuje JavaScript. W ksice tej nauczysz si, jak korzysta z JavaScriptu i jQuery
razem. W rozdziale 6. dowiemy si czego wicej na temat ich zwizku, a po drodze
udoskonalimy nasze umiejtnoci posugiwania si jzykiem JavaScript. Na razie jednak,
kiedy zdarzy si potrzeba pracy z drzewem DOM, bdziemy korzysta z jQuery.
Wemy jQuery na jazd prbn po DOMowicach, dobrze?
jeste tutaj
45
kod gotowy do wysmaenia
Kod
gotowy do
wysmaenia
Wprowad w edytorze tekstowym nastpujcy kod. Zapisz go, otwrz w swojej

przegldarce i wyprbuj kady z przyciskw (skoro ju tu jeste, nie zaszkodzi
rzuci okiem na kod i sprbowa zgadn, co si w nim dzieje...).
<!DOCTYPE html>
<html><head> <title>jQuery przybywa do DOMowic</title>
<style>
#change_me {
position: absolute;
top: 100px;
&+#,
+-#,3 3&4
#move_up #move_down #color #disappear {
padding: 5px;}
</style>
<script src="scripts/jquery-1.7.min.js"></script>
</head>
<body>
<button id="move_up">Do gry</button>
89?@A?FGH?IJK89G
89?L& GR& K89G
89??3##3 GRSKVS3FK89G
?@?L%3WAG I8LXZ\^K?@G
<script>
$(document).ready(function() {
$("#move_up").click( function() {
$("#change_me").animate({top:30},200);
});//koniec move_up
$("#move_down").click( function() {
$("#change_me").animate({top:500},2000);
});//koniec move_down
$("#color").click( function() {
$("#change_me").css("color", "purple");
});//koniec color
$("#disappear").click( function() {
$("#change_me").toggle("slow");
});//koniec disappear
});//koniec doc ready
</script>
</body>
</html>
%&
46
Rozdzia 1.
zaczynamy z jquery
Jak to dziaa?
To bardzo sprytne, jak jQuery moe manipulowa stron, prawda? Najwaniejsze do zapamitania
jest to, e kiedy klikae dowolny z przyciskw, aden z fragmentw oryginalnego kodu HTML
ani CSS nie ulega zmianie. Jak wic jQuery to zrobio? Sprawd sam.
1
/
'
'
To, co widzisz w przegldarce
Za kulisami
2
4 5
6
' ,-
''&

7'

Syszaem
kliknicie przycisku.
8

3
4 5
6
'

'
0/"
Dobra, dobra.
Po prostu mi powiedz,
co mam zrobi.
Przesu
element do gry.
Wersja DOM
strony
Interpreter
JavaScriptu
Interpreter JavaScriptu nie zmienia

oryginalnych plikw HTML ani
CSS. Wprowadza natomiast zmiany
w reprezentacji DOM strony znajdujcej
si w pamici przegldarki.
jeste tutaj
47
funkcje jquery
O co chodzi z tymi
znakami dolara w kodzie?
Znak dolara symbolizuje fors, ktr zgarniesz dziki znajomoci

jQuery. arty artami, ale w wiecie jQuery znak ten odnosi ogromne
sukcesy.
Przedstawiamy funkcj jQuery (oraz skrt)

Znak dolara z nawiasami to skrcony zapis funkcji jQuery. Skrt ten
oszczdza nam pisania jQuery() za kadym razem, kiedy chcemy
wywoa tak funkcj. Funkcja jQuery jest te czsto nazywana
wrapperem jQuery.
jQuery( )
To jest skrt jQuery. Zamiast
wpisywa sze liter tworzcych
wyraz jQuery, wprowadzasz tylko
jeden znak.
, ktrej
To jest funkcja jQuery si
caa praca sprowadza w
do chwytania element bie
Cie
umieszczanych przez
midzy nawiasami.
$( )
Skrt i pena nazwa wskazuj na to samo: duy blok kodu znany jako
jQuery. W ksice tej bdziemy uywa skrtu. Oto trzy rne rzeczy,
ktre moesz wstawi do funkcji jQuery:
Jeli wstawisz tu cig

HTML, bdziesz mg
dodawa w locie elementy
drzewa DOM do strony
w przegldarce.
$( )
Jeli wstawisz tu sel
ekt
jQuery zwrci zbir ele or CSS,
pasuj do selektora. mentw, ktre
Wanie z tej
opcji bdziesz korzys
ta najczciej.
48
Rozdzia 1.
Tym na razie si nie

martw. Zajmiemy
si tym w dalszych
rozdziaach.
zaczynamy z jquery
jQuery wybiera elementy tak samo jak CSS

Wiesz ju o jQuery wicej, ni zdajesz sobie z tego spraw. Gwnym sposobem
na robienie rnych rzeczy w jQuery jest korzystanie z selektorw tych samych
selektorw, ktrych uywasz w CSS. Nie przejmuj si, jeli selektory CSS sprawiaj
Ci troch problemw. Oto szybkie przypomnienie:
To jest selektor elementu (zwany take
selektorem znacznika). Wybiera on
wszystkie elementy h1 w dokumencie HTML.
h1 {
text-align: left;
}
To jest wac
iwo CSS...
To wszystko
s reguy CSS.
S
Klasa CS aczyna
z
zawsze pki.
ro
si od k
...oraz warto tej waciwoci.
Selektor klasy pozwala

na wybr grupy
elementw.
.my_class {
position: absolute;
}
Identyfikator
zawsze zaczynCSS
znakiem hash a si
.
Tutaj mamy selektor identyfikatora.

Identyfikatora CSS naley uywa
wtedy, gdy chce si wybra jeden
i tylko jeden element.
#my_id {
color: #3300FF;
}
jeste tutaj
49
miej swj styl
Stylu, przedstawiam ci skrypt

Wspaniaa cecha jQuery polega na tym, e uywa on tych samych selektorw, z ktrych
korzystamy, aby nadawa stronie styl albo manipulowa elementami strony.
Selektor CSS
Selektor jQuery
Selektor elementu jQu
ery
Selektor elementu
h1 {
Metoda
$("h1").hide();
text-align: left;
Ukrywa wszystkie
elementy h1 na stroni
e.
Selektor klasy
.my_class {
position: absolute;
}
Selektor identyfikatora
#my_id {
color: #3300FF;
};
Selektor klasy jQuery
$(".my_class").slideUp();
gry
Przesuwa doementy,
el
ie
tk
ys
wsz
do klasy
ktre nale s.
as
cl
y_
m
CSS
Selektor identyfikatora
jQuery
Rozdzia 1.
Metoda
$("#my_id").fadeOut();
Selektory CSS wybieraj elementy, aby

mona byo nada im styl. Selektory jQuery
wybieraj elementy, aby mona byo nada im
zachowanie.
50
Metoda
A ta instrukcja jQuery
stopniowo wygasza
wszystkie elementy
o identyfikatorze CSS
my_id, a stan si
niewidoczne.
Osigniesz wicej, czc selektory

i metody w sposb opisany
w rozdziale 2. i w dalszych
czciach tej ksiki.
zaczynamy z jquery
Selektory jQuery do usug

Jak to sugeruje sama nazwa, sedno jQuery to kwerendy. Prosisz o co za pomoc
selektora, a interpreter JavaScriptu prosi drzewo DOM, eby to dla Ciebie zrobio. Jeli
poprosisz o element z zagniedonymi elementami, jQuery poda Ci take zagniedone
elementy. Rozmy selektor jQuery na czci, aby upewni si, e wiesz, jak dziaa.
ry
To jest selektor. Biblioteka jQue
aby
tak,
na
towa
ojek
zapr
zostaa
o
elementy byy wybierane tak sam
jak w CSS.
W tym przykadzie
mamy element img,
ale rwnie dobrze
moglibymy umieci
tutaj inny element.
Aby obj nasze

selektory, uywamy
skrtu jQuery.
img{
float:left;
height:350px;
text-align:center;
border: solid #000 5px;
}
img
"
Selektory maj posta

acuchw tekstowych,
a zatem musimy uy
cudzysoww.
$ (
"
)
Hej, jQuery, moesz mi

da (czyli zwrci)
wszystkie elementy img
na stronie?
$ ("img")
Kwerendowa cz jQuery
sprowadza si do poproszenia
o elementy za porednictwem
JavaScriptu...
Selektor CSS
Hej, DOM, zwr mi

wszystkie elementy
img na stronie.
Prosz bardzo.
9
0/"

4
5
6
'
...i zwrcenia ich
(cz oddajca).
Ze zwracaniem
elementw bdziesz
mie wicej do czynienia
w rozdziale 4. Na razie
zajmijmy si tylko ich
wybieraniem.
jeste tutaj
51
parlez-vous jquery?
jQuery przetumaczony
Aby pokaza Ci, jak atwo mona si nauczy jQuery, rozbilimy na czci
skadowe kilka zda w tym jzyku, z ktrych moesz korzysta podczas swoich
podry po DOMowicach.
$("button").click(function(){}
...kiedy
Hej,
elemencie uytkownik
ci kliknie...
button...
...chciabym, eby
co dla mnie zrobi.
ej instrukcji
Na kocu kadje si rednik.
jQuery znajdu
$("p").hide;
Hej, elementy p
(czyli akapitu)...
Kiedy uytkownik
mnie kliknie, uruchomi
instrukcje jQuery
w nawiasach
klamrowych.
Tekst znajdujcy si
midzy dowolnymi
elementami akapitu
zniknie.
niewidzialne.
...stacie si
<p> Puf! </p>
$("#myTop").css({"background-color":"blue"});
Hej, elemencie
z identyfikatorem
myTop...
52
Rozdzia 1.
...ustaw swoj
regu CSS...
ta...
...dla koloru
i.
...na niebiesk
Stan si
niebieski.
<div id="myTop>
</div>
zaczynamy z jquery
Bd przegldark
Twoje zadanie polega na wcieleniu si w przegldark
i zakreleniu elementw HTML (z prawej), na ktre
wpynie polecenie jQuery (z lewej).
Polecenie jQuery
Elementy HTML
#G? W 3389?ZJ#FW 33
Z#RSL%IFK#G
$("p").hide();
#GF ?ZJZJFJIR9F#F W

robaka.</p>
#G 3J3W Z8LF3 ?S3R#3L Z3R?9IJ
LWJFK#G
<span class="Italian">Nel mezzo del cammin di nostra

vita</span>
$("span.Italian").toggle();
<span class="English">In the middle of this road called

"our life"</span>
<span class="Italian">mi ritrovai per una selva oscura</
span>
#?,G? W 3389?ZJ#FW 33

Z#RSL%IFK#G
$("p#mytext").show();
#?,GF ?ZJZJFJIR9
F#F W 83R3K#G
LWJFK#G
* Fragmenty Przemiany Franza Kafki w przekadzie Juliusza Kydryskiego przyp. tum.
jeste tutaj
53
bd przegldark rozwizanie
Bd przegldark rozwizanie
Twoje zadanie polega na wcieleniu si w przegldark i zakreleniu
elementw HTML (z prawej), na ktre wpynie instrukcja jQuery
(z lewej). Oto nasze rozwizanie:
Polecenie jQuery
Elementy HTML
#G? W 3389?ZJ#FW 33
Z#RSL%IFK#G
$("p").hide();
#GF ?ZJZJFJIR9F#F W

robaka.</p>
LWJFK#G
<span class="Italian">Nel mezzo del cammin di

nostra vita</span>
$("span.Italian").toggle();
<span class="English">In the middle of this road called

"our life"</span>
<span class="Italian">mi ritrovai per una selva oscura
</span>
#?,G? W 3389?ZJ#FW 33

Z#RSL%IFK#G
$("p#mytext").show();
#?,GF ?ZJZJFJIR9
F#F W 83R3K#G
LWJFK#G
54
Rozdzia 1.
zaczynamy z jquery
Nie istniej
gupie pytania
P: Po co wic pisa w jQuery, P: Wczeniej te ju
skoro wszystko sprowadza si

do korzystania z JavaScriptu?
Czy JavaScript sam w sobie nie
wystarcza?
wspomniae o pisaniu
skryptw po stronie klienta.
Dokadnie co to takiego?
O: JavaScript znakomicie nadaje
Programici czsto nazywaj

przegldark klientem, poniewa
pobiera ona dane od serwera
WWW. Jzyk skryptowy po stronie
klienta to jzyk, ktry potrafi
dawa przegldarce zakulisowe
wskazwki, podczas gdy jzyk
po stronie serwera wydaje
polecenia serwerowi. Dokadniej
zajmiemy si tym zagadnieniem
w rozdziaach 8. i 9.
si do wielu rzeczy zwaszcza

do manipulowania drzewem DOM
ale jest do skomplikowany.
Manipulacje drzewem DOM na
podstawowym poziomie z ca
pewnoci nie s atwe i to
wanie dlatego przydaje si jQuery.
Pozwala on odsun na bok spor
cz zoonoci zwizanej z prac
z drzewem DOM i sprawia, e
tworzenie efektw jest superatwe.
(Biblioteka jQuery zostaa napisana
przez Johna Resiga; moesz si
o nim dowiedzie wicej tutaj:
http://ejohn.org/about/).
P: O co chodzi z tymi
znakami dolara?
O:
To tylko skrt, eby co chwil

nie musia pisa jQuery. Kiedy
jednak pracujesz z innymi jzykami
po stronie klienta, uywanie
jQuery() pozwoli Ci unika
konfliktw nazw.
O:
P: Skd si wzi ten cay

DOM?
O: Dobre pytanie. Programici
P: Kiedy chc pobra jQuery,

jest tam wersja produkcyjna
i deweloperska. Jaka jest
midzy nimi rnica?
O:
Wersja produkcyjna jest

zminimalizowana, co znaczy,
e usunito z niej ca mas
niepotrzebnych (biaych) znakw.
Zostaa ona zoptymalizowana do
szybkiego dziaania w rodowisku
produkcyjnym, ale troch trudniej
zobaczy, co si w niej dzieje.
Wersja deweloperska jest adnie
sformatowana i o wiele bardziej
czytelna. Jest ona przeznaczona
dla kadego, kto chciaby sobie
pogrzeba w kodzie jQuery, aby
go zmieni albo nawet poszerzy
(w kocu jest to open source!).
i projektanci stron internetowych

byli znueni brakiem zgodnoci
midzy przegldarkami
i zdecydowali, e potrzebuj
standardu, ktry umoliwiby
dodawanie zachowa oraz
interakcj ze stronami w dowolnej
przegldarce. World Wide Web
Consortium (znane te jako W3C)
podjo si opracowania standardu
we wsppracy z tymi rozmaitymi
grupami. Wicej o tym moesz
dowiedzie si tutaj:
http://www.w3.org/DOM/.
jeste tutaj
55
jquery przychodzi z pomoc
Twoja pierwsza fucha w jQuery

Wanie dostae prac jako nowy programista aplikacji internetowych w Fundacji
Ratowania Zwierzt w Webowicach. Zesp marketingowy chce rozpocz coroczn
kampani zbierania funduszy z now wersj strony Pom naszym kudatym
przyjacioom. Dostae od niego screen z minionego roku razem ze szczegowymi
informacjami, co powinna robi strona.
Potrzebujemy ulepszy stron z poprzedniego

roku. Teraz uytkownik klika przycisk i wyskakuje
rysunek, ale pozostaje on ju na stronie. Chcemy, eby
obrazek pojawi si, kiedy uytkownik kliknie, i eby
znikn, kiedy kliknie jeszcze raz.
Jzek z marketingu chciaby
wicej interaktywnoci.
A jego szefowa chce
lepszych efektw
graficznych.

'

Zdjcie kudatego
przyjaciela po prostu wyskakuje.
Czy moesz zrobi tak, eby
kudacz powoli si wysuwa i jako
tak stopniowo nabiera barw?
Kiedy uytkownik
kliknie tutaj...
...poka t sekcj
i wysu j, aby
zaprezentowa
kudatego przyjaciela
na dzi.
Uwaga: Wszystko powinno

odbywa si na tej stronie (nie
chcemy linkw do innej strony
HTML).
No c, nikt nie chciaby sprawi zawodu marketingowcom ju pierwszego

dnia lepiej z nimi nie zadziera! Zobaczmy wic, co my tu mamy...
56
Rozdzia 1.
zaczynamy z jquery
Zaostrz owek
Zanim wymylisz, jak doda funkcjonalno jQuery do strony, spjrzmy,
jak zostay skonfigurowane HTML i CSS. Poniej masz pliki z zeszorocznej
kampanii. Obok elementw, ktre wedug Ciebie bd Ci potrzebne, napisz,
co trzeba zrobi, aby otrzyma funkcje, jakie chcieliby mie marketingowcy.
Pierwszy element uzupenilimy za Ciebie.
<!DOCTYPE html><html> <head>
&G3#339?J3LV ZS3L&+
weryfikacja koncepcji jQuery </title>
<link rel="stylesheet" type="text/
Ten znacznik odnonika ma ustawione w CSS stany
css" href="styles/my_style.css">
hover i active. Uytkownik przesuwa mysz nad
</head>
cze i pojawia si rysunek.
<body>
<div id="showfriend">
3% G3R9?J3L# ZS3L&
# Z89S\FSS#L
<img src="images/furry_friend.jpg">
</a>
</div>
index.html
a:link img, a:visited img {
display:none;
}
a:hover img, a:active img {

display:block;
}
a{
text-decoration:none;
color: #000;
}
my_style.css
jeste tutaj
57
zaostrz rozwizanie
Zaostrz owek
Zanim wymylisz, jak doda funkcjonalno jQuery do strony, spjrzmy, jak
zostay skonfigurowane HTML i CSS. Poniej masz pliki z zeszorocznej kampanii.
Obok elementw, ktre wedug Ciebie bd Ci potrzebne, napisz, co trzeba
zrobi, aby otrzyma funkcje, jakie chcieliby mie marketingowcy. Oto nasze
odpowiedzi nie przejmuj si, jeli Twoje nie s dokadnie takie same:
Rozwizanie
<!DOCTYPE html><html> <head>

&G3#339?J3LV ZS3L&+
weryfikacja koncepcji jQuery </title>
<link rel="stylesheet" type="text/
Ten znacznik odnonika ma ustawione w CSS stany
css" href="styles/my_style.css">
hover i active. Uytkownik przesuwa mysz nad
</head>
cze i pojawia si rysunek.
<body>
<div id="showfriend">
3% G3R9?J3L# ZS3L&
# Z89S\FSS#L
Zdjcie psa kudatego przyjaciela jest

zagniedone wewntrz znacznika odnonika.
Rysunek powinien pokaza si dopiero wtedy,
</a>
gdy uytkownik kliknie cze w znaczniku.
</div>
index.html
a:link img, a:visited img {
Ten selektor CSS zmienia waciwo display
display:none;
zagniedonego obrazu na none, dziki czemu nie
bdzie on widoczny po pierwszym zaadowaniu

strony.
a:hover img, a:active img {

display:block;
Kiedy uytkownik przesunie mysz nad znacznik
odnonika albo go kliknie, waciwo display
a{
elementu img zmieni si na block. Rysunek nagle
text-decoration:none;
si pojawi.
color: #000;
}
my_style.css
58
Rozdzia 1.
zaczynamy z jquery
OK, teraz moemy zabra
si za pisanie kodu w jQuery
dla wszystkich funkcjonalnoci,
ktre s nam potrzebne,
prawda?
Moemy, ale sprawy mogyby wymkn si nam

spod kontroli.
Zanim bdziemy mogli uy jQuery w celu uzyskania
niezwykych efektw, jakich chce dzia marketingu, musimy
upewni si, e jQuery ma na miejscu wszystko, czego trzeba,
aby zadziaaa caa jego magia. Jak ju wiesz, jednym z gwnych
zada jQuery jest manipulowanie elementami HTML, a zatem
potrzebujemy dobrej struktury. Aby dosta si do elementu,
jQuery uywa tych samych selektorw co CSS, tak wic
potrzebujemy te dobrze zdefiniowanych stylw.
Zweryfikuj wymagania
Kiedy mylisz o strukturze, zawsze dobrze jest wrci do
tego, co prbujesz stworzy. Dzia marketingu chce, eby
rysunek wysuwa si i nabiera kolorw, kiedy ludzie klikn
sekcj Poka mi kudatego przyjaciela na dzi. Jakie zmiany
w HTML-u i CSS mog by konieczne?
Niech ta sekcja bdzie aktywna.
A ta sekcja niech zaczyna si

jako niewidoczna. Nadajmy jej
identyfikator picframe.
jeste tutaj
59
posprztaj w domu
Skonfiguruj swoje pliki HTML i CSS

Zastanwmy si, co bdziemy musieli skonfigurowa w naszych plikach HTML i CSS, zanim
napiszemy jakkolwiek instrukcj w jQuery. Otwrz pliki jQuery z rozdziau 1. (jeli jeszcze
tego nie zrobie, powr do kocowej czci podrozdziau Jak korzysta z tej ksiki
i zapoznaj si ze szczegowymi informacjami). Odszukaj podkatalog Begin w folderze R01.
Nastpnie dodaj do plikw wyrniony pogrubion czcionk kod, co wida poniej.
<!DOCTYPE html>
<html><head>
&G3#339?J3LV ZS3L&K&G
<link rel="stylesheet" type="text/css" href="styles/my_style.css">
</head>
<body>

! ! " #
</div>
! ! ! !% &'#(##!!
Zdjcie furry_friend.jpg
<script>
jest zagniedone
)* +# * *+,
wewntrz sekcji
picframe.
)*-
+#
* *+,
.+0
.+0
</script>
</body>
</html>
index.html
-
,
1 2-3456780
29:;0
;&
2 0
=?29:@;0
!
21
0
1 29;!
-:::0
}
- ,
1 2-3456780
29:;0
=?29:@;0
!
2 0
1 29;!
-:::0
}
60
Rozdzia 1.
Tutaj sekcji clickMe nadajemy

taki styl, aby jej wygld
i dziaanie byy takie same
jak sekcji picframe.
Nadaj selektorowi picframe

warto display: none, aby
po zaadowaniu strony nie by
on wywietlany.
my_style.css
Zrb to!
Tutaj zrobimy
aktywn sekcj,
a styl nadamy jej
w pliku CSS poniej,
dziki czemu bdzie
ona mie taki sam
wygld i dziaanie
jak sekcja picframe.
Tutaj jest sekcja

picframe, ktra
bdzie si wysuwa,
aby pokaza zdjcie
kudatego przyjaciela.
zaczynamy z jquery
jQuery w zblieniu
Teraz, kiedy skonfigurowae ju pliki HTML i CSS, przejdmy do
kodu, ktry siedzi sobie midzy znacznikami <script>.
Jak tylko bd mg,

zaczn wykonywa kod
znajdujcy si midzy
nawiasami klamrowymi!
Hej, DOM... ...jak ju bdziesz
gotw i zaadowany...
co
...chc, eby i.
dla mnie zrob
DOM
Oto nasz identyfikator
selektora dla sekcji clickMe.
$("#clickMe").click(function() {
{
Kropka oddziela cz
z selektorem od czci
z metod.
Przypisanie zdarzenia kliknicia do przycisku

z identyfikatorem clickMe. Ten kod powoduje,
e przycisk bdzie aktywny.
Kod, ktry opisuje, co ma si wydarzy,

kiedy zostanie kliknity przycisk, trafi
midzy te nawiasy klamrowe (jest on
nazywany take blokiem kodu).
});
});
Ten rednik
koczy funkcj
jQuery ready.
rednik to znak koca. Tutaj koczy

on nasz instrukcj jQuery click.
ie
Sp
ojn
ok
Znajduje si tu mnstwo potencjalnie nowych

terminw.
Wkrtce bardziej szczegowo poznamy zdarzenia, metody
i funkcje.
jeste tutaj
61
dodaj nieco wdziku do swoich wysuni
Ale nasza strona

nadal nie robi nic
nowego!
Masz racj. Nasz HTML i CSS s gotowe;

teraz potrzebujemy troch jQuery.
Chcemy, eby sekcja picframe wysuna si i nabraa
barw. Na szczcie ludzie od jQuery utworzyli efekty,
ktre pozwalaj nam kontrolowa obie te wizualne
akcje: przesunicia oraz wygaszenia. Efektom w jQuery
powicilimy cay rozdzia w dalszej czci tej
ksiki (rozdzia 5.), tak wic nie przejmuj si teraz
wszystkimi szczegami. Zacznijmy po prostu od
przesuwania i nadawania kolorw.
Wysu si...
Pierwsz rzecz, jak zaimplementujemy, bdzie
wysunicie si i ukazanie rysunku, co jest jednym
z efektw, ktre chciaby zobaczy szef marketingowcw.
Z wysuwaniem mona sobie poradzi na trzy sposoby:
$("div").slideUp();
Metoda slideUp zmienia

waciwo height elementu,
a osignie ona warto
0, po czym go ukrywa.
62
Rozdzia 1.
$("div").slideDown();
Metoda slideDown zmienia

waciwo height elementu
od 0 a do wartoci
ustawionej w stylu CSS.
$("div").slideToggle();
Metoda slideToggle mwi: Jeli

jest na grze, wysu w d,
a jeli na dole, wysu do gry.
zaczynamy z jquery
Niechaj blado bdzie z Tob

Chcielibymy te, eby rysunek wyoni si stopniowo, zmieniajc si od
zupenie niewidzialnego a do w peni widocznego. Tu te istnieje metoda,
ktra to realizuje nosi ona nazw fade. Metody fade s podobne do metod
uywanych przy wysuwaniu; masz do dyspozycji fadeIn, fadeOut, fadeTo
i fadeToggle. Na razie uyjemy metody fadeIn, ktra daje kontrol nad
waciwociami nieprzejrzystoci i przezroczystoci elementw HTML.
Chcemy, eby wanie to stao

si nieprzezroczyste; w tym
przypadku jest to rysunek.
Moesz okreli, jak szybko nabierane

s kolory, umieszczajc midzy
nawiasami warto, zwykle wyraan
w milisekundach (ms).
$("img").fadeIn();
Kiedy element nabiera barw,

przechodzi od niewidocznego
(przezroczystego) do widzialnego
(nieprzejrzystego).
WYSIL
SZARE KOMRKI
Jak mylisz, ile instrukcji w jQuery bdzie potrzebnych, aby zrealizowa efekt, o ktry nam chodzi?
Sprbuj zapisa te instrukcje na kawaku papieru. Jeli nie masz co do nich pewnoci, najpierw
napisz je po polsku, a potem sprbuj przestawi swj mzg na mylenie w jQuery.
jeste tutaj
63
hej, to byo atwe
To wszystko?
To zdumiewajce, ale potrzebujesz napisa tylko dwa wiersze kodu
w jQuery, aby nasze efekty zadziaay. Chyba zaczynasz rozumie,
dlaczego tyle osb lubi jQuery. Do pliku index.html dodaj
wyrnione pogrubion czcionk wiersze i gotowe.
Zrb to!
<!DOCTYPE html>
<html>
<head>
&G3#339?J3LV ZS3L&K&G
<link rel="stylesheet" type="text/css" href="styles/my_style.css">
</head>
<body>
?@?L&LRGVR3R9?J3W# ZS3L&33?ZXK?@G
<div id="picframe">
</div>
<script>
$("#clickMe").click(function() {
W jQuery wane jest takie

ustalenie kolejnoci efektw,
eby nawzajem sobie nie
przeszkadzay. Bdziemy si
tym zajmowa w naszej ksice
przy rnych okazjach.
)*+# A*':::+0
)*- +#!
B
*!
=+0
});
});
</script>
</body>
y
Najpierw wywoam
barw.
nia
ra
bie
na
kt
efe
Midzy nawia
ekstra, aby efsami dodalimy co
Przyjrzymy si ekt by jeszcze lepszy.
w rozdziale 5. tym sposobom bliej
</html>
%&
64
Rozdzia 1.
zaczynamy z jquery
Jazda prbna
Otwrz stron w swojej ulubionej przegldarce i sprawd, czy wszystko dziaa.
Kliknij tutaj.
Twj rysunek
powinien nabra
barw i wysun
si w d.
Sprawdzaj w wielu przegldarkach.
2EHMU]\MWR
To, e jQuery bdzie dziaa w kadej przegldarce tak samo,

nie znaczy jeszcze, e style, ktre zdefiniowae w pliku CSS,
albo dowolne style dynamiczne zastosowane do elementw
strony zadziaaj w taki sam sposb we wszystkich
przegldarkach!
jeste tutaj
65
psi krzyowiec
Uratowae kampani Kudaci Przyjaciele

Wykonae prac za pomoc precyzyjnego dostrajania HTML-a i CSS
oraz zaledwie dwch wierszy w jQuery. Pomyl tylko o tych wszystkich
szczeniakach, ktre uratowae...
No, no... To wyglda

cudownie i zrobie to
tak szybko!
A nasza nowa kampania

spotyka si ze wspaniaym
odzewem. To oznacza wicej
pienidzy na ratowanie wikszej
liczby zwierzakw. Dziki!
66
Rozdzia 1.
zaczynamy z jquery
Krzywka jQuery
Nadszed czas, aby wygodnie usi i da swojej lewej pkuli
jakie zajcie. Bdzie to zwyka krzywka. Wszystkie wyrazy
stanowice hasa pochodz z biecego rozdziau.
Poziomo
Pionowo
2. Dodaje styl do strony WWW.
1. Symbol waluty uywany jako skrt jQuery.
4. Ustawienie CSS gwarantujce, e element nie

bdzie widoczny, kiedy zaaduje si strona, to
display:_____ .
3. Jest uywany w jQuery w celu zlokalizowania

i zwrcenia elementu na stronie WWW.
9. Jzyk, w ktrym jest napisana biblioteka jQuery.

11. Tumaczy wskazwki, ktre dajesz w JavaScripcie,
na dziaania wykonywane na stronie WWW.
12. John, twrca jQuery.
13. Uywana w celu sprawdzenia, czy Twoje skrypty
w jQuery dziaaj.
5. Znak koczcy instrukcj w jQuery.

6. Ten rodzaj pliku tworzy struktur strony WWW.
7. Twoja przegldarka aduje tam stron, kiedy dostaje
j z serwera WWW.
8. Znak uywany w jQuery w celu oddzielenia selektora
od metody.
9. Biblioteka JavaScriptu wyspecjalizowana w zoonej
interaktywnoci oraz bogatych efektach wizualnych.
10. Wiesz, e masz z ni do czynienia, kiedy widzisz
par nawiasw po sowie kluczowym.
jeste tutaj
67
rozwizanie krzywki
Rozwizanie krzywki jQuery
68
Rozdzia 1.
zaczynamy z jquery

Rozdzia 1.
Masz ju za sob rozdzia 1., a do swojego

niezbdnika dodae podstawow funkcj
jQuery, selektory, zdarzenie kliknicia oraz
efekty wygaszania i nabierania barw.
Funkcja
jQuery
iera na
aby wyb rymi
j,
ie
n
, kt
asz z
Korzyst TML elementy
H
.
ie
a
n
o
w
str
ulo
ia
z manip
nie mus
bdzies
o, aby uery.
t
o
p
t
jQ
jes
Skrt $ m razem pisa
y
d
a
a
k
za
obsugiw
ry moe a nawet
e
u
jQ
Funkcja , kod HTML,
y
selektor avaScript.
J
obiekty
Selektory
jQuery wybiera ele
menty tak
samo jak CSS: za
pomoc
selektorw.
Praktycznie kady
rodzaj
elementu HTML b
dzie dobry
dla selektora jQue
ry.
Efekt
wygaszania
moesz
erzesz element, e rnych
Kiedy ju wybi
el
pokaza na wi
go wygasi lub tajc z metod fadeIn,
ys
rz
sposobw, ko
i fadeToggle.
fadeOut, fadeTo
stkich
osowa do wszy
Efekt moesz st w, poczwszy od tekstu,
t
rodzajw elemen obrazach i nie tylko.
na
y
sz
yw
cz
o
a sk
wa,
moesz kontrolo
Prdko efektu o czasu
rt
umieszczajc wa wewntrz nawiasw
h)
ac
nd
ku
se
ili
m
(w
kcji.
na kocu instru
jeste tutaj
69
70
Rozdzia 1.
2.6HOHNWRU\LbPHWRG\
Chwytaj i w drog
Hej, kotku, czy moje
selektory i metody
mogyby troch
poczarowa z elementami
twojej strony...
jQuery pomaga chwyta elementy strony internetowej i robi z nimi rne

rzeczy. W tym rozdziale zagbimy si w selektory i metody jQuery. Dziki selektorom moemy
chwyta elementy na stronie, a metody pozwalaj na robienie z nimi rozmaitych sztuczek.
Podobnie jak wielka ksiga zakl magicznych, biblioteka jQuery pozwala nam zmienia mas
rzeczy w locie. Moemy sprawia, e obrazy rozpywaj si w powietrzu i pojawiaj znikd.
Moemy wybra okrelony fragment tekstu i w animowany sposb zmieni rozmiar jego czcionki.
Rozpocznijmy wic pokaz zapmy kilka elementw strony i do roboty!
71
szerz si wieci
Skacz z radoci potrzebuje Twojej pomocy

Dostae e-mail od swojej znajomej, ktra jest profesjonaln fotografk
portretow. Chce ona rozpocz promocj Skacz z radoci, ktra pozwoli
klientom sporo wygra przy okazji zamawiania zestaww odbitek. Potrzebuje
Twojej pomocy, aby pomys na promocj zosta zrealizowany.
Od: Emilia

Cze!
teraz bardziej interaktywne
Zobaczyam na Twoim Twitterze, e robisz
zrobi par interaktywnych
c
strony, i pomylaam, e mgby mi pom
radoci. Chciaabym da
z
cz
Ska
rzeczy w mojej witrynie z promocj
d udaniem si do kasy, eby
prze
u
rabat
kanie
uzys
moim gociom szans na
(i w rezultacie by moe
zachci ich do poklikania po mojej stronie
zrobienia wikszych zakupw!).
z nich bdzie jeden z czterech
Strona powinna mie cztery sekcje; w kadej
j rabat to, ktry bdzie
Tw
i
obrazkw. Potrzebuj komunikatu o trec
do 10 procent). Kiedy
5
(od
u
rabat
wywietla losowo wybran wielko
nien si pokaza pod
powi
nikat
komu
i,
sekcj
tych
z
uytkownik kliknie jedn
, eby poprzedni
abym
chcia
obrazem w tej sekcji. Jeli kliknie jeszcze raz,
komunikat znik i eby pojawi si nowy.
powinno to wyglda.
Doczam schemat pokazujcy, jak wedug mnie
Mylisz, e moesz mi pomc?
-Emilia
72
Rozdzia 2.
selektory i metody
Jakie s wymogi projektu?

Emilia jest wspania fotografk, ale jej yczenia zostay porozrzucane po caej
treci e-maila. Przyjrzyjmy si wiadomoci od niej, eby stwierdzi, o co tak
naprawd prosi. Zanim w ogle zaczniesz pisa w jQuery, musisz mie cakowit
jasno co do tego, jakie s wymogi projektu (albo uytkownika).
Zaostrz owek
Wyszukaj w e-mailu wymagania i rozpisz je w formie listy rzeczy, ktre
nasza aplikacja internetowa powinna robi. Lista ta bdzie naszym
przewodnikiem gwarantujcym, e aplikacja speni wymagania klienta.
Lista rzeczy do zrobienia:
1.
2.
3.
4.
5.
Przeoenie potrzeb klienta na rzeczywiste

wymogi projektu to wana umiejtno, ktra
rozwija si wraz z praktyk i czasem.
jeste tutaj
73
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Wyszukaj w e-mailu wymagania i rozpisz je w formie listy rzeczy, ktre

nasza aplikacja internetowa powinna robi. Lista ta bdzie naszym
przewodnikiem gwarantujcym, e aplikacja speni wymagania klienta.
Oto nasze rozwizanie.
Lista rzeczy do zrobienia:

1.
Strona powinna mie cztery sekcje. W kadej sekcji powinno znajdowa si jedno ze zdj
Skacz z radoci.
2. Sekcje powinny by aktywne.

3.
Potrzebujemy komunikatu o treci Twj rabat to z losowo wybran wielkoci rabatu

(od 5 do 10 procent).
4.
Kiedy uytkownik kliknie jedn z sekcji, komunikat powinien pojawi si pod obrazem
w tej sekcji.
5.
Kiedy uytkownik kliknie ponownie, naley pozby si ostatniego komunikatu

i wywietli nowy.
Wspaniale! Teraz, kiedy opracowalimy ju

wymagania projektu, wemy si do roboty
i ruszmy z miejsca z jQuery!
Prrrrr! Zatrzyma konie!

Opracowywanie wymaga projektu w pierwszej kolejnoci to
bardzo dobry nawyk, ktry warto sobie przyswoi na potrzeby
kadego projektu w jQuery, nad ktrym bdziesz pracowa.
Zanim jednak przejdziemy do pisania kodu w jQuery, musimy
wykona nieco pracy zwizanej z konfiguracj struktury
i stylw. Pracowalimy nad tym troch w rozdziale 1., a teraz
nim bdziemy mogli skorzysta z dobrodziejstw jQuery
mamy do skonfigurowania jeszcze wicej.
74
Rozdzia 2.
selektory i metody
Zagbiamy si w sekcje
Potrzebujemy na stronie czterech aktywnych obszarw, a zatem utwrzmy je w pierwszej
kolejnoci. Najbardziej uytecznym i wszechstronnym elementem HTML, ktry spenia
nasze wymogi, jest znacznik sekcji <div>. Bardzo dobrze nadaje si on do ustalania
struktury, poniewa jest elementem na poziomie bloku. Moemy take w prosty sposb
nadawa elementom div styl, dziki czemu bd one robi dokadnie to, czego oczekujemy.
wiczenie
Otwrz swj ulubiony edytor tekstu, aby utworzy potrzebne pliki HTML i CSS. Poniej znajduje
si kod na dobry pocztek z brakujcymi niektrymi kluczowymi elementami. Dodaj do strony
nastpujce elementy i odhacz je na licie, kiedy bd ju gotowe:
znacznik doczajcy bibliotek jQuery w wersji 1.7;
znacznik <div> z identyfikatorem header;
znacznik <div> z identyfikatorem main;
inne zdjcie w obrbie kadego z czterech elementw div, wewntrz main div
(zdjcia moesz pobra std: ftp://ftp.helion.pl/przyklady/jquerg.zip).
<html>
div{
<head>
float:left;
&GR3LZZ 3?XLK&G
%W%+-#,
<link href="style/my_style.css" rel="stylesheet">
text-align:left;
</head>
<body>
}
#header{
%-GV LS3R3LZZ 3?XLK%-G
width:100%;
</div>
border: 0px;
height:50px;
<div><img src="images/jump1.jpg"/></div>
<div>
</div>
#main{
<div>
</div>
<div>
</div>
background-color: grey;
height: 500px;
</div>
<script > </script> </body>

</html>
my_style.css
index.html
jeste tutaj
75
rozwizanie wiczenia
Rozwizanie
wiczenia
Otwrz swj ulubiony edytor tekstu, aby utworzy potrzebne pliki HTML i CSS. Poniej znajduje
si kod na dobry pocztek z brakujcymi niektrymi kluczowymi elementami. Dodaj do strony
nastpujce elementy, tak aby Twoja strona wygldaa jak w naszym rozwizaniu:
znacznik doczajcy bibliotek jQuery w wersji 1.7;
znacznik <div> z identyfikatorem header;
znacznik <div> z identyfikatorem main;
inny obraz w obrbie kadego z czterech elementw div, wewntrz main div.
S
Twoje pliki HTML i CS
da
gl
wy
y
powinn
nastpujco:
div{
float:left;
%W%+-#,
text-align:left;
<html>
<head>
#header{
&GR3LZZ 3?XLK&G
width:100%;

</head>
Element div
der
z identyfikatorem hea
<body>
<div id="header">
<div id="main">
<div>
<div>
<img src="images/jump2.jpg"> </div>

<script > </script> </body>

</html>
76
Rozdzia 2.
height: 500px;
}
Elementy div
dla obrazw
</div>
Docz bibliotek
jQuery.
}
Element div
z identyfikatorem main
<div>
height:50px;
#main{

</div>
border: 0px;
index.html
my_style.css
selektory i metody
Jazda prbna
Otwrz stron w swojej ulubionej przegldarce i upewnij si, e wszystko dziaa. Da
nam to okazj, aby zwrci uwag na nasze zaoenia co do funkcjonowania strony.
Element div
z identyfikatorem
header
Element div
z identyfikatorem
main zawierajcy...
...cztery elementy
div dla obrazw
WYSIL
SZARE KOMRKI
Teraz mamy na naszej stronie cztery obszary z obrazami.
Co zrobi, eby byy aktywne?
jeste tutaj
77
niech klika
Zdarzenie click w zblieniu

Jak ju widzielimy, tworzenie aktywnych elementw w jQuery jest
proste.
Kliknicie elementu strony wyzwala zdarzenie, a take moe
wywoywa funkcje. Zdarzenia i funkcje poznamy szczegowo pniej.
Teraz rzumy okiem na to, jak zdarzenie click dziaa w znaczniku
paragrafu (<div>).
emy
Do tego elementu chc k.
doczy zdarzenie clic
Tutaj mwimy interpreterowi

JS, aby elementy akapitu
co zrobiy, kiedy je
klikniemy.
Funkcja to sposb na
zgromadzenie razem
wielu rzeczy, ktre
chcemy zrobi.
$("p").click( function() {
Poniewa funkcja jest

zamknita midzy
nawiasami, ktre nale
do akcji click, zostan
ie
ona wywoana, kiedy
uytkownik wyzwoli
j klikniciem.
3& V3?ZFJ
Polecenia alert uywamy,
kiedy chcemy sprawdzi,
czy nasza funkcja zostaa
wywoana poprawnie.
});
Zamykajcego nawiasu
klamrowego uywamy,
aby zakoczy blok kodu.
78
Rozdzia 2.
Otwierajcych nawiasw
klamrowych uywamy, aby
rozpocz blok kodu. Blok
bardzo przypomina akapit
zawiera powizane ze sob
instrukcje.
Wszystko, co ws
midzy znaki cu tawimy
dz
pokae si w no ysowu,
wym
oknie.
selektory i metody
Magnesiki z kodem
Poukadaj magnesiki, aby utworzyy kod, dziki ktremu wszystkie elementy
div bd aktywne. Kiedy div zostanie kliknity, uyj funkcji alert jzyka
JavaScript, by wywietli tekst Zostaem kliknity. Kilka z magnesikw
umiecilimy ju na waciwych miejscach.
alert
div
<script>
*+
,
$("
)* +
+0
*+
F!
G#
</script>
+#
.+0
.+0
("
click(
,
# *
jeste tutaj
79
magnesiki z kodem rozwizanie
Magnesiki z kodem rozwizanie

Poukadaj magnesiki, aby utworzyy kod, dziki ktremu wszystkie elementy
div bd aktywne. Kiedy div zostanie kliknity, uyj funkcji alert jzyka
JavaScript, by wywietli tekst Zostaem kliknity.
ik <script>.
Otwrz znaczn
Upewnij si, e strona jest

gotowa na interakcj.
<script>
)* +
$("
# *
div
+#
*+
click(
*+
Uaktywnij
>.
znaczniki <div
alert
.+0
("
F!
G#
ki
armowe, dzi
Poka okno al y si, e funkcja
m
ie
w
do
czemu
a.
click zadziaa
Zamknij znacznik div.
.+0
Zamknij document ready.
</script>
znik <script>
Zamknij znac
80
Rozdzia 2.
+0
selektory i metody
Dodaj do strony metod click

Korzystajc z kodu uoonego za pomoc magnesikw na
poprzedniej stronie, uzupenij swj plik HTML, aby zawiera ten
skrypt. Nie zapomnij umieci go w znaczniku <script>!
Zrb to!
<html>
<head>
&GR3LZZ 3?XLK&G
</head>
<body>
<div id="header">
</div>
<div id="main">
?@GW L3WKS9#S#WKGK?@G
</div>
<script >
)* +# * *+,
Funkcja alarmowa wywouje
w przegldarce okno
z komunikatem. Bdziemy
z niej korzysta za kadym
razem, kiedy bdziemy
chcieli sprawdzi wyniki
dziaania elementw, ktre
dodalimy do kodu, takich
jak zmienne i funkcje.
)*+#
* *+,

*F!
G#+0
.+0

Wstaw te wiersze
midzy znaczniki
<script>, aby elementy
div stay si aktywne.
.+0

</script>
</body>
</html>
Niektrzy programici
komentarze pomagajc dodaj
e
zidentyfikowa nawias
y
zwyke i klamrowe. Jes
kwesti stylu programot to
i zaley wycznie od wania
Ciebie.
index.html
jeste tutaj
81
jazda prbna
Jazda prbna
Otwrz stron w swojej ulubionej przegldarce, aby upewni si, e wszystko dziaa.
Teraz kiedy klikniesz obrazy na stronie powiniene zobaczy komunikat alarmowy.
re dodae.
Oto okno alarmowe, ktk dziaa.
clic
a
kcj
fun
a,
wid
Jak
No dobrze, ale bez wzgldu na

to, gdzie klikn, dostaj komunikat
alarmowy. Dlaczego tak si dzieje?
Hm, to jest pewien problem.

Wyglda na to, e jestemy zbyt gorliwi w klikaniu.
Spjrzmy na to zdarzenie click jeszcze raz.
Interpreter JS zrobi dokadnie
to, o co prosilimy. Wybra
wszystkie elementy div...
...i doda metod click
do kadego z nich.
$("div").click( );
W rzeczywistoci nawet nie musimy klika obrazw, aby otrzyma komunikat.
Struktura strony zawiera elementy div zagniedone w kolejnych elementach
div, tak wic kiedy klikniesz jeden z nich, interpreter pomyli, e klikne
oba, i w rezultacie moesz uzyska dwa komunikaty. Najwyraniej musimy
doprecyzowa, czego chcemy od jQuery...
82
Rozdzia 2.
selektory i metody
Bd bardziej konkretny
Problem polega na tym, e nie okrelilimy precyzyjnie naszego wyboru. Jak wic
mona si dosta do czterech podsekcji i jednoczenie pomin wiksz sekcj
div? Przypomnijmy z rozdziau 1., e selektory jQuery korzystaj z klas oraz
identyfikatorw CSS. Bdziemy mogli dokadniej okreli, ktrymi elementami
jQuery powinien si zaj, kiedy dodamy do nich klasy oraz identyfikatory.
Nie chcemy, eby ta sekcja

bya aktywna. Suy ona
tylko do wywietlania.
Chcemy, eby kada z tych

sekcji bya aktywna. Uyjemy
ich do zaimplementowania
interaktywnoci.
div
div
div
div
div
WYSIL
SZARE KOMRKI
Czy w celu okrelenia powyszych elementw div uyjesz klas oraz
identyfikatorw CSS oddzielnie, czy te cznie? Ktry sposb bdzie
najlepszy i dlaczego?
jeste tutaj
83
oznaczenie klasy
Przydzielanie elementw do klas

W CSS klasy s uywane w celu grupowania elementw i nadawania
im wsplnego stylu i atrybutw. Na stronie internetowej moesz mie
jeden lub wicej elementw nalecych do tej samej klasy. W jQuery
moemy uy tego samego selektora klasy i wpywa za pomoc
metod jQuery na dan grup elementw. Zarwno CSS, jak i jQuery
korzystaj w celu oznaczenia klasy ze znaku ., co znakomicie
upraszcza klasyfikowanie w kodzie.
Struktura drzewa
DOM strony
?
Drzewo DOM
1
div

!!

!!
"1
1
Selektory klas odpowiadaj

wszystkim elementom, ktre
nale do danej klasy.
.nav {
display: block;
border: solid #00f 1px;
width: 100%;
}
Kod CSS
84
Rozdzia 2.
$(".nav").click( function(){
3& 3JR&R
});
Kod jQuery
selektory i metody
ID-entyfikowanie elementw
Selektor identyfikujcy jest uywany w celu zidentyfikowania pojedynczego i niepowtarzalnego
elementu na stronie. W jQuery, tak samo jak i w CSS, do oznaczania selektora identyfikujcego
uywa si znaku #. Identyfikatory sprawdzaj si idealnie, jeli chcesz okreli konkretny
element albo na stronie istnieje jeden rodzaj elementw taki jak nagwek albo stopka strony.
Selektory identyfikujce
wskazuj jeden niepowtarzalny
element.
#my_blurb {
display: block;
border: 0px;
height: 50%;
}
$("#my_blurb").slideToggle("slow");
Kod CSS
Kod jQuery
Zaznacz kwadraty w odpowiednich kolumnach, aby okreli, do czego mona

uywa klas, a do czego identyfikatorw. Pamitaj, e czasami klasy oraz
identyfikatory mog suy do tych samych celw!
Klasa
Identyfikator
Jednoznacznie identyfikuje pojedynczy element na stronie

Moe identyfikowa jeden lub wicej elementw na stronie
Moe tego uywa jedna metoda JavaScriptu w wielu
przegldarkach w celu identyfikowania elementw
Moe to by uywane przez CSS w celu nadawania stylu
elementom
Danemu elementowi mona jednoczenie nada wiele...
jeste tutaj
85
kto co robi rozwizanie
Rozwizanie
Zaznacz kwadraty w odpowiednich kolumnach, aby okreli, do czego mona
uywa klas, a do czego identyfikatorw. Pamitaj, e czasami klasy oraz
identyfikatory mog suy do tych samych celw
Klasa
Identyfikator
Jednoznacznie identyfikuje pojedynczy element na stronie

Moe identyfikowa jeden lub wicej elementw na stronie
Moe tego uywa jedna metoda JavaScriptu w wielu
przegldarkach w celu identyfikowania elementw
Moe to by uywane przez CSS w celu nadawania stylu
elementom
Danemu elementowi mona jednoczenie nada wiele...
Nie istniej
gupie pytania
P: Co to jest element na poziomie

bloku?
O:
Elementy na poziomie bloku

wystpuj w obrbie swoich elementw
nadrzdnych (rodzicw) jako prostoktne
obiekty. Wystpuj te z waciwociami
marginesu, szerokoci i wysokoci bloku,
ktre mona ustawia niezalenie od
elementw otaczajcych.
P:
Dlaczego znacznik <script>

znajduje si u dou strony przed
znacznikiem </body>? Mylaem,
e powinien on by wewntrz
znacznikw <head></head>.
O: Tak, kiedy byo to (a dla niektrych
osb jest nadal) zalecan praktyk. Pojawi

si jednak spowodowany przez skrypty
problem polegajcy na blokowaniu
w przegldarce rwnolegych pobra.
W danym czasie mona pobiera wicej
ni dwa obrazy pochodzce z rnych
serwerw, kiedy jednak przegldarka
napotka znacznik <script>, nie moe
ju rwnolegle pobiera wielu elementw.
Umieszczenie znacznikw na dole oznacza
skrcenie czasu adowania si strony.
P: O co chodzi z tymi wszystkimi

alarmami w JavaScripcie?
O:
Te, z ktrych korzystalimy, nie

wygldaj szczeglnie piknie, ale alarmy
s przydatne z rnych powodw.
86
Rozdzia 2.
W rzeczywistoci alarm w JavaScripcie

jest prostym oknem zawierajcym
wiadomo. Zawarto umieszczona
midzy nawiasami zostanie pokazana
w komunikacie alarmowym. Jeli chcesz
wywietli acuch tekstowy, umie go
w cudzysowach. Aby wywietli wartoci
zmienne, naley wprowadzi nazwy
zmiennych bez cudzysoww. Mona te
czy wartoci zmiennych z acuchami
tekstowymi za pomoc znaku +.
Z pewnoci cay czas masz do czynienia
z alarmami, ale nawet o nich nie mylisz,
na przykad wtedy, gdy nie wypenisz
wymaganego pola w formularzu. Pki co
uywamy alarmw w celach testowych
i podczas debugowania. Istniej oczywicie
lepsze metody, ale zajmiemy si nimi
w dalszych rozdziaach tej ksiki.
selektory i metody
Pogawdki przy kominku
Selektor CSS:
Dzisiejsza pogadanka: Selektory CSS i jQuery omawiaj wystpujce

midzy nimi rnice.
Selektor jQuery:
Siema, selektorze jQuery. Ciesz si, e tu

jeste, aby wszystkim powiedzie, i cae swoje
istnienie zawdziczasz wanie mnie.
No... dziki... chyba. Z pewnoci wiele moich umiejtnoci
wywodzi si z twojego podejcia do wybierania elementw. Ja
jednak zajmuj si bardziej dziaaniem ni stylem. Ty sobie po
prostu siedzisz i sprawiasz, e rzeczy wygldaj adnie, podczas
gdy ja zajmuj si powanymi dziaaniami.
C, zdecydowanie mam styl, ale dysponuj te
cakiem spor wadz. W mgnieniu oka mog
zmienia wygld i dziaanie rnych elementw.
Nie bd spiera si o twoj przydatno na stronie. Masz
swoj robot, ktr jest zmienianie wygldu elementw, a ja
mam swoj, ktra jest zupenie inna.
A niby co takiego potrafisz zrobi, czego ja nie
mog?
Moja praca polega na szukaniu elementw i zwracaniu ich,
dziki czemu metoda moe co zrobi ze zwrconym zbiorem.
No, no... Co za wyszukany jzyk! Co masz na
myli, mwic, e zwracasz elementy?
Zamy, e kto uy mnie do wybrania wszystkich elementw
akapitu na stronie. Chwytam wszystkie akapity i trzymam je,
przez co metoda jQuery moe z nimi zrobi, co tylko chce.
Ale ja te potrafi wpywa na elementy, ktre
wybior. Mog zmieni wszystkie ich kolory ta
na fuksj, jeli tylko zechc. I nie zapominaj, e
to mj silnik daje ci moc, ktr posiadasz.
Twj silnik selektorowy daje mi niezy kawaek mocy, ale
drugi kawaek mojej wadzy pochodzi od JavaScriptu. Nie
zapominaj, e Query to cz mojego imienia. Mog
poprosi przegldark o pewien element, wzi go i przekaza
metodzie jQuery, ktra sprawi, e przeleci on w poprzek
strony, a nawet zniknie.
Musz przyzna, e brzmi to niele.
No pewnie! Ale masz racj, e nie mgbym tego zrobi bez
ciebie.
jeste tutaj
87
zaczynamy spina
Pospinaj swoj stron

Klasy oraz identyfikatory stanowi wspln baz dla trzech warstw strony WWW, na ktre
spojrzelimy w rozdziale 1.: struktury, stylu i skryptu. Selektory znajduj si tam, gdzie
te trzy warstwy s pospinane ze sob, dziki czemu mog one wsplnie dziaa. HTML
zapewnia klocki (czyli elementy oraz ich atrybuty) czy te struktur strony internetowej.
CSS zapewnia styl, czyli wygld i pozycj tych elementw. Z kolei JavaScript i jQuery
zapewniaj skrypty kontrolujce ich zachowanie lub funkcjonowanie.
Wyobra sobie, e mamy klas o nazwie slideshow dla obrazu, ktry chcemy wywietli
za pomoc metody slideUp:
Klasa slideshow jest podpita
do elementu img tutaj.
<img class="slideshow" />

Struktura = HTML
Arkusz stylw
przedstawia
i umiejscawia klas
slideshow za pomoc
selektora.
Styl = CSS
Skrypt = jQuery
(i JavaScript)
$(".slideshow").slideUp()
.slideshow{
float: left;
height: 100;
}
88
Rozdzia 2.
Biblioteka skryptw, czyli

jQuery, wybiera elementy
i nadaje im zachowanie.
selektory i metody
Zaostrz owek
div{
float:left;
Zaktualizuj struktur, styl i skrypt swojej strony, tak aby tylko cztery
sekcje div byy aktywne. W pliku CSS utwrz klas CSS (o nazwie
guess_box) i zastosuj j w blokach html i script. Wyglda na
to, e jeden z naszych elementw div straci swj atrybut ID. Czy
domylasz si, ktry to z nich, i czy moesz go przywrci?
%W%+-#,
text-align:left;
}
#header{
width:100%;
border: 0px;
height:50px;
<html>
}
#main{
<head>
&GR3LZZ 3?XLK&G
height: 500px;

}
</head>
<body>
<div id="header">
height 245px;

</div>
<div
>
<div
><img src="images/jump1.jpg"/></div>
<div
<div
my_style.css
</div>
<script>
$("
").click(function() {
3& 3JR&R
});
});
</script>
</body>
</html>
index.html
jeste tutaj
89
zaostrz rozwizanie
Zaostrz owek
div{
Rozwizanie
float:left;
Dodaj klas guess_box do wszystkich elementw div, ktre

bd uywane przy ukrywaniu rabatu. Zaktualizuj te selektor, tak
aby korzysta z tej klasy, i dodaj j do pliku CSS. Elementem, ktry
potrzebowa odzyska swj atrybut ID, by element main div.
%W%+-#,
text-align:left;
}
#header{
width:100%;
border: 0px;
height:50px;
<html>
}
#main{
<head>
&GR3LZZ 3?XLK&G
height: 500px;

}
</head>
guess_box{
<body>
<div id="header">
height 245px;
</div>
id="main"
<div
<div
<div
>
class="guess_box"
class="guess_box"
<div
class="guess_box"
class=
"gues
s_box
"
</div>
<script>
$("
guess_box
").click(function() {
3& 3JR&R
});
Dodaj metod click wycznie

do klasy guess_box, a nie do
wszystkich elementw div.
});
</script>
</body>
</html>
index.html
90
Rozdzia 2.
my_style.css
Oto miejsce, y
w ktrym nale a pl
doda klas dl tem.
ba
z ukrytym ra jest
Ich wysoko k
taka sama ja zw
wysoko obrasi
znajdujcych , dziki
w tych polach o jest
tk
czemu wszys ne.
na
w
yr
w
ie
dn
a
selektory i metody
Tymczasem na naszej licie

Spjrzmy na nasz list wymogw do realizacji, aby sprawdzi, na jakim
etapie tworzenia projektu dla Emilii jestemy.
Strona powinna mie cztery sekcje. W kadej sekcji powinien
znajdowa si jeden z obrazw Skacz z radoci.
Sekcje powinny by aktywne.
Potrzebujemy komunikatu o treci Twj rabat to z losowo wybran
wielkoci rabatu (od 5 do 10 procent).
Kiedy uytkownik kliknie jedn z sekcji, komunikat powinien pojawi
si pod obrazem w tej sekcji.
Kiedy uytkownik kliknie ponownie, naley pozby si ostatniego
komunikatu i wywietli nowy.
Hej, to byo proste. Jestemy ju prawie

w poowie naszej listy. Kilka nastpnych rzeczy
te wyglda nie najgorzej. Musimy utworzy
napis i liczb. Czy to moe by trudne?
Waciwie nie powinno.

Z wywietleniem komunikatu dla uytkownika wie
si kilka kwestii. Nie zapominaj, e dla kadego
uytkownika odwiedzajcego witryn moe pojawi si
inna wiadomo.
WYSIL
SZARE KOMRKI
Bdziesz musia utworzy i przechowa gdzie
wiadomo, ktra bdzie wywietlana Twoim gociom.
W jaki sposb mgby to zrobi?
jeste tutaj
91
pilnujemy swoich rzeczy
Tworzenie miejsca w pamici

Nastpny wymg na naszej licie to wywietlenie napisu, ktry podczas dziaania skryptu
bdzie pozostawa niezmienny: Twj rabat to. Oprcz tego musimy przechowa liczb,
ktra bdzie si zmienia w zalenoci od wylosowanej wartoci. Potrzebujemy sposobu, aby
przekaza ten komunikat za porednictwem skryptu nasza strona musi jako t informacj
zapamita. Przechowywanie informacji (albo danych) to idealne zadanie dla zmiennych.
Kiedy w jQuery potrzebne s zmienne, posugujemy si zmiennymi jzyka JavaScript.
Sowo kluczowe var nie

umoliwia zadeklarowa
zmiennej.
Po sowie kluczowym
var naley poda
nazw zmiennej.
W taki sposb w kodzie
nadajemy zmiennej warto.
var pts = 250;
Kiedy deklarujemy zmienn,

interpreter JavaScriptu oddaje
nam troch pamici przegldarki,
gdzie moemy przechowywa
dane.
Zmiennej nadajemy
nazw, dziki czemu
pniej bdziemy
si mogli do niej
odwoywa w skrypcie.
W zmiennej
umieszczamy warto,
uywajc znaku
rwnoci.
=250
pts
Od tej chwili, kiedy tylko bdziemy chcieli dosta si

do zapamitanych danych, po prostu poprosimy o nie,
posugujc si nazwami ich zmiennych.
92
Rozdzia 2.
pts
Jeeli chcesz
dowiedzie si wicej
o zmiennych i funkcjach
matematycznych
w JavaScripcie, signij
po Rusz gow! JavaScript.
selektory i metody
cz za pomoc konkatenacji
W naszych skryptach jQuery bdziemy przechowywa rne rodzaje danych: liczby,
napisy, wartoci prawda albo fasz. W wielu przypadkach, zwaszcza gdy zajdzie
potrzeba wywietlania gociom rnych komunikatw, bdziemy czy HTML
z innymi rodzajami danych, co da naszym stronom internetowym jeszcze wiksze
moliwoci. Jak wic moemy zabra si za czenie zmiennych z innymi wartociami?
Uyjemy konkatenacji. Wyobra sobie, e mamy gr komputerow ze zmienn pts,
ktra przechowuje najlepszy wynik, i e musimy wywietli go zwycizcy.
Musimy zestawi ze sob (uy konkatenacji)
trzy informacje.
"Najlepszy wynik: <strong>"
"</strong>"
pts
W rezultacie otrzymamy:
Kiedy nadajemy warto
tekstow albo HTML,
uywamy cudzysoww.
Kiedy odwoujemy
si do zmiennej,
uywamy jej nazwy
bez cudzysowu.
@3 W3S&#ZFR+ WG#K WG

W zmiennych moemy
umieszcza te znaczniki
HTML!
wiczenie
Znak + umoliwia
konkatenacj (czyli
poczenie) tekstw, liczb,
zmiennych i wielu innych
elementw.
Przedstawimy Ci kod JavaScript, ktry tworzy zmienn o nazwie discount przechowujc liczb losow
z zakresu od 5 do 10. Napisz kod dla zmiennej discount_msg, ktra wywietli komunikat oraz zmienn
losow. Upewnij si, e wiadomo o rabacie pojawi si wewntrz elementu akapitu.
@3 ?L93%& 3% 3?
jeste tutaj
93
rozwizanie wiczenia
Przedstawimy Ci kod JavaScript, ktry tworzy zmienn o nazwie discount przechowujc liczb losow
z zakresu od 5 do 10. Napisz kod dla zmiennej discount_msg, ktra wywietli komunikat oraz zmienn
Rozwizanie losow. Upewnij si, e wiadomo o rabacie pojawi si wewntrz elementu akapitu.
wiczenia
Nie przejmuj si. Funkcj matematyczn

i losow wyjanimy w rozdziale 3.
@3 ?L93%& 3% 3?

var discount_msg = "<p>Twj rabat to " + discount + "%</p>";
Tymczasem w naszym kodzie...

Teraz, kiedy masz ju przygotowan zmienn przechowujc poczony
komunikat o rabacie, trzeba jeszcze zaktualizowa to, co znajduje si
midzy znacznikami <script>. Skupmy si wanie na tym.
Zrb to!
<script>
Utwrz nowe
zmienne
JavaScript.
$(".guess_box").click( function() {
! ?#
**?#*+H@+I@+0
! "!B=J1I! IK0

*! +0
});
});
Zmienn z rabatem wstawilimy

do alarmu, aby mie pewno,
e bdzie dziaa tak, jak
chcemy.
</script>
index.html
94
Rozdzia 2.
selektory i metody
Wstaw komunikat za pomoc metody append

Komunikat jest ju gotowy, ale jak wywietli go na stronie pod zdjciem, ktre
zostao kliknite? Jeli pomylisz o dodaniu nowego komunikatu jako o wstawieniu
go na stron, okae si, e jQuery udostpnia kilka sposobw na wstawienie nowej
zawartoci do istniejcego elementu. Niektre z najbardziej przydatnych omwimy
szczegowo w rozdziale 4., a teraz tylko szybko rzucimy okiem na metod append.
#GS9 #ZF3&33??3F3? IL%&IF

8Z# Z8#FWSS?XF33#G
To polecenie jQuery mwi interpreterowi JS, eby doczy zawarto

akapitu.
w
element
ich
wszystk
do
wie
cudzyso
w
si
znajdujc
!#3##? WG3R3# ZRJ3?K WG
Kiedy uruchomisz ten skrypt, na

stronie pojawi si pogrubiony teks
t.
Wynikowy kod
HTML widziany
w drzewie
DOM.
#GS9 #ZF3&33??3F3 IL%&IF?

8Z# Z8#FWSS?XF33K#G WG
3R3# ZRJ3?K WG
wiczenie
Wiedzc ju co nieco o selektorach i majc now wiedz na temat metody append, napisz kod,
ktry doczy zmienn discount_msg do elementu guess_box.
jeste tutaj
95
rozwizanie wiczenia
Dodanie nowego komunikatu do strony WWW jest naprawd atwe!
Rozwizanie
wiczenia
$(".guess_box").append(discount_msg);
.
metod jQuery
append jest
ne
r
ry
ue
jQ
w
.
Aby robi
tasz z metod
rzeczy, korzys
Nie istniej
gupie pytania
P: Czy istniej ograniczenia co do nazw

klas?
O:
Nazwa klasy musi zaczyna si znakiem

podkrelenia (_), cznikiem (-) albo liter (a z),
po ktrych nastpuje dowolna liczba cznikw,
podkrele, liter albo cyfr. Jest jednak pewien
kruczek: jeli pierwszym znakiem jest cznik, to
drugim musi by litera albo podkrelenie, a nazwa
musi skada si przynajmniej z dwch znakw.
P:
Czy istniej ograniczenia co do nazw

zmiennych?
O:
Tak! Zmienne nie mog zaczyna si od cyfr.

Nie mog te zawiera adnych operatorw
matematycznych (+ * - ^ / ! \), odstpw ani
znakw przestankowych. Mog jednak zawiera
podkrelenia. Nie mona im nadawa nazw
bdcych sowami kluczowymi JavaScriptu
(takich jak window, open, array, string,
location), a poza tym rozrniane s w nich
wielkie i mae litery.
96
Rozdzia 2.
P: Ile klas mog nada elementom?

O: Zgodnie ze standardami nie ma
zdefiniowanego maksimum, ale w rzeczywistym

wiecie przypada okoo 2000 klas na element.
P: Czy istnieje sposb na wybranie

wszystkich elementw na stronie?
O:
Tak! Aby uzyska wszystkie elementy, po

prostu przeka * do wrappera jQuery.
P: Jeli nadam moim elementom klas
albo identyfikator bez adnego stylu

czy bdzie to mie wpyw na ich wygld
w przegldarce?
O:
Nie, w przegldarkach nie ma ustawie

domylnych dla klas ani dla identyfikatorw.
Niektre przegldarki w istocie rnie traktuj
elementy, ale klasa albo identyfikator bez
zastosowanego CSS nie bd wywiera na te
elementy adnego wpywu.
selektory i metody
Jazda prbna
Otwrz stron w swojej ulubionej przegldarce, aby upewni si, e wszystko dziaa. Zwr
szczegln uwag na wywietlany alarm, co pozwoli Ci oceni, czy zmienna discount_msg
przyjmuje prawidowe wartoci.
Kiedy kto kliknie, komunikat o rabacie jest

dodawany do kadej sekcji w klasie guess_box.
Wszystko dziaa wietnie, ale...

Zmienna discount generuje liczb losow i docza komunikat do naszej strony, tak jak tego
oczekiwalimy, ale wystpi pewien nieoczekiwany efekt uboczny: rabat pokazuje si w kadej sekcji.
Nie tego chcielimy. Co wic poszo le?
Tutaj doczana jest metoda

click, dziki czemu kada sekcja
klasy guess_box jest aktywna.
<script>
@3 ?L93%& 3% 3?
@3 ?L9AW#GFIS 383?L9K#G
alert(discount_msg);
To suy tylko do
sprawdzenia zmiennej.
$(".guess_box").append(discount_msg);
});
Nasz selektor jest wystarczajco
ale
});
precyzyjny, aby uchwyci klas, c
e koczymy, zmieniaj
ltaci
rezu
w
</script>
sekcje w klasie.
wszystkie
Musimy doczy zmienn discount_msg tylko do tej sekcji, ktra zostaa kliknita. Jak wic
moemy wybra tylko kliknit sekcj i doczy do niej zmienn discount_msg?
jeste tutaj
97
w idealnym wiecie
Czy nie byoby cudownie,

gdyby istnia prosty sposb na wybranie
sekcji, ktr kliknlimy? Ale to chyba
tylko marzenia...
98
Rozdzia 2.
selektory i metody
Daj mi $(this)
W rozdziale tym przygldamy si selektorom jQuery i temu, jak zwracaj one
elementy, z ktrych korzystaj metody jQuery. Bardzo czsto chcemy naprawd
dokadnie wskaza, ktry element wybieramy. Kiedy potrzebna jest precyzja,
najprostszy do napisania jest selektor $(this) (w kocu wszystko, co trzeba
zapamita, to tylko angielski zaimek this). Selektor $(this) stanowi atwy
sposb na wskazanie biecego elementu.
this
Zaimek this odnosi si do

dowolnego elementu, nad
ktrym wanie pracujemy.
Tak jak wczeniej

uywamy wrappera
jQuery...
$(
$(this)
...co pozwala nam korzysta

z metod jQuery w celu
wywarcia wpywu na biecy
element.
Wane jest, by pamita, e $(this) zaley od kontekstu. Innymi sowy,

selektor $(this) moe znaczy co innego w zalenoci od tego, gdzie
i kiedy zostanie uyty. Jednym z najlepszych miejsc, w ktrych mona go
uy, jest wntrze funkcji uruchamianej po wywoaniu metody jQuery:
Oto selektor wybierajcy
nasz element.
Wywoaj metod jQuery.
Uruchom t funkcj,
kiedy zostanie
wywoana metoda.
$("#myImg").click( function(){
$(this).slideUp();
padku
We biecy element (w tym przy
});
z
#myImg) znajdujcy si wewntr
naszej funkcji.
k, jak
Zarwno clic metodami
i slideUp s , e masz
jQuery. Wieszz metod
do czynienia kiedy
albo funkcj, sy okrge.
widzisz nawia
Porady maniaka
this kontra $(this)

W JavaScripcie this odnosi si do elementu drzewa DOM, z ktrym chcemy
pracowa w naszym kodzie. Dodanie do this symboli $( ) daje nam $(this),
co umoliwia nam prac z elementami drzewa DOM za pomoc metod jQuery.
jeste tutaj
99
$(this) jest niesamowity
Zaprzgnij $(this) do pracy
Zrb to!
Zobaczmy, czy $(this) moe nam pomc w rozwizaniu naszego

problemu. Zaktualizuj swj kod, tak aby wykorzystywa on selektor
$(this), jak to pokazano poniej.
<script type="text/javascript">
@3 ?L93%& 3% 3?
)*?!+# *! "!+0
});
</script>
Tutaj mwimy naszym

elementom guess box, aby
doczyy kod promocyjny
tylko do tego elementu, ktry
zosta kliknity.
Jazda prbna
index.html
Otwrz stron w swojej ulubionej przegldarce, aby upewni si, e wszystko dziaa. Zwr szczegln uwag
na wywietlany alarm, co pozwoli Ci oceni, czy zmienna discount_msg przyjmuje prawidowe wartoci. Nie
zapomnij klikn kilka razy, aby sprawdzi, czy dopisywanie liczby losowej do tej zmiennej te dziaa poprawnie.
100
Rozdzia 2.
selektory i metody
$(this) dziaa znakomicie! Jednak

teraz za kadym razem, kiedy klikam,
poprzedni komunikat nie znika. Co mam
zrobi, eby to zatrzyma?
Dobre pytanie!
Prowadzi nas ono do ostatniej pozycji na naszej licie rzeczy do zrobienia:

WYSIL
SZARE KOMRKI
Jak mylisz, w jaki sposb mona usun ostatni komunikat?
jeste tutaj
101
presto, zmianna
Pozbywaj si na dobre za pomoc remove

Jak wic moemy pozby si starego komunikatu i zastpi go nowym? Naley skorzysta
z metody remove. Metoda ta pozwala na usunicie ze strony elementu albo grupy elementw.
Rzumy okiem na bardzo prost stron z list i przyciskiem.
1
Oto, jak wyglda strona w przegldarce oraz kod, przy uyciu ktrego zostaa ona utworzona:
Kod HTML
Widok w przegldarce
<div>Lista rzeczy do zrobienia</div>

<ol>
&G39LZS9 K&G
&GV# Z3#?FRK&G
&GZWJ#?FR3F ZK&G
</ol>
<button id="btnRemove">
A oto kod do przycisku, ktry usunie wszystkie pozycje z listy:
$("#btnRemove").click(function(){
$("li").remove();
});
3
remove to jeszcze jedna z metod

jQuery. O metodach mona
myle jak o czasownikach
chodzi przecie o zrobienie
czego na stronie internetowej.
Patrzc powtrnie na stron w przegldarce i na kod rdowy w HTML-u kiedy jQuery

si ju wykona zobaczymy, e elementy naszej listy znikny (nawet w HTML-u!).
Widok w przegldarce
Kod HTML
<div>Lista rzeczy do zrobienia</div>
<ol>
</ol>
<button id="btnRemove">
WYSIL
SZARE KOMRKI
Ktrego selektora powiniene uy, aby usun ze strony
wycznie komunikaty o rabatach?
102
Rozdzia 2.
selektory i metody
Schodzimy w d z selektorem potomka

Selektor potomka to jeszcze jeden selektor, z ktrego moemy korzysta w jQuery
i ktry doskonale pasuje do naszej sytuacji. Za jego pomoc moemy okrela
zalenoci midzy elementami i wybiera dzieci, rodzicw oraz rodzestwo.
Selektor po lewej
to rodzic.
$("div p")
Selektor po prawej
to dziecko.
Oto, jak wybra

dziecko dziecka.
$("div div p")
Pozostaw odstp
midzy nazw
elementu rodzica
a nazw elementu
dziecka.
?
Ten zapis zwrci wszystkie

elementy div, ktre s dziemi
elementu div.
Kiedy czysz selektory klas oraz

identyfikatorw z selektorami potomka,
moesz by rzeczywicie konkretny, co
doskonale si sprawdza na zoonych
stronach HTML.
1
$("div div")
div
$("div p#my_blurb")
div
div

"1
1
apie wszystkie elementy

img, ktre s dziemi dzieci
elementu div
$("div div img")
$("div p")
(czy w zwizku
z tym s to
pradivy?).
apie wszystkie
elementy p, ktre s
dziemi elementu div.
Zaostrz owek
Napisz instrukcj, ktra usunie ostatni akapit w drzewie DOM strony z promocj
Skacz z radoci, korzystajc z selektora potomka.
jeste tutaj 103
zaostrz rozwizanie
Zaostrz owek
Aby wybra akapit, ktry dodae, rozpocznij od selektora klasy
.guess_box, po ktrym znajdzie si selektor potomka p. Nastpnie uyj
metody remove w celu usunicia ze strony wszystkich elementw p
znajdujcych si w dowolnym elemencie klasy guess_box.
Rozwizanie
$(".guess_box p").remove();
?
1

div id="header"
?9
div class=
!!"1;

Jeli uytkownik
kliknie tutaj,
doczysz akapit
tutaj.

Jeeli uytkownik kliknie po raz

drug
usuniesz ostatni akapit, jaki doda i,
e,
po czym doczysz nowy.
Tak, kolejno, w jakiej dodajesz

i usuwasz elementy, jest wana.
Nie moesz usun elementu, zanim go dodasz,
i nie ma sensu usuwanie elementu zaraz po tym,
jak go dodae, prawda?
Rozdzia 2.

p
Tak wic teraz mog docza

i usuwa elementy, jak tylko mi
si podoba. Czy ma znaczenie,
kiedy i gdzie to robi?
104
div class=
!!"1;
div class=
!!"1;
div class=
!!"1;
selektory i metody
Zaostrz owek
Twoje zadanie polega na zadecydowaniu, gdzie powinna si znale metoda
remove. Wstaw odpowiedni instrukcj w wierszu 1., 2. albo 3. Nastpnie
wyjanij, dlaczego j tam umiecie. Zastanw si, kiedy trzeba usun akapit,
po czym w drodze eliminacji wybierz waciwe miejsce, w ktrym to nastpi.
<script>
1.
2.
@3 ?L93%& 3% 3?
$(this).append(discount_msg);
3.
});
});
</script>
index.html
Myl, e instrukcja powinna by wanie tam, poniewa...
jeste tutaj 105
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Twoje zadanie polega na zadecydowaniu, gdzie powinna si znale metoda

remove. Wstaw odpowiedni instrukcj w wierszu 1., 2. albo 3. Nastpnie wyjanij,
dlaczego j tam umiecie. Zastanw si, kiedy trzeba usun akapit, po czym
w drodze eliminacji wybierz waciwe miejsce, w ktrym to nastpi.
<script>
1.
2.
@3 ?L93%& 3% 3?

$(this).append(discount_msg);
3.
});
});
</script>
Myl, e instrukcja powinna by wanie tam, poniewa...
index.html
Instrukcja remove nie moe by w wierszu 1., poniewa znalazaby si poza funkcj
click elementu guess_box. Instrukcja nie moe si te znale w wierszu 3., gdy
usunaby to, co przed chwil dodaem. Chc usun ostatni komunikat o rabacie przed
wywietleniem nastpnego, tak wic umieszcz remove w pierwszym wierszu bloku
z kodem metody click elementu guess_box (czyli midzy nawiasami klamrowymi).
Kolejno i czas wywoywania w jQuery s wane.
2EHMU]\MWR
106
Jest to szczeglnie istotne podczas przekazywania uytkownikom strony wanych

informacji oraz ich usuwania. W rozdziale 5. przyjrzymy si bliej kolejnoci oraz
momentom wywoywania efektw wizualnych na ekranie.
Rozdzia 2.
selektory i metody
Nie istniej
gupie pytania
P: Czasami po wywoaniu metody remove nadal
widz elementy, ktre usunem z kodu rdowego

strony. Dlaczego tak si dzieje?
O:
Zdarza si, e kiedy korzystasz z funkcji wywietlania

rda strony, przegldarki wysyaj do serwera nowe
danie, aby otrzyma kod rdowy. Korzystajc
z inspektorw drzewa DOM, takich jak narzdzia
deweloperskie w Chrome albo Firebug w przegldarce
Firefox, powiniene zobaczy DOM w takiej postaci,
w jakiej jest on wywietlany na stronie.
P: Co robi metody Math.floor i Math.random?

O: Metoda floor zaokrgla liczb w d do najbliszej
wartoci cakowitej i zwraca wynik. Metoda random zwraca

liczb losow z zakresu od 0 do 1. Kiedy pomnoymy ten
wynik przez jak liczb, uzyskamy warto z zakresu od
0 do liczby, przez ktr mnoylimy.
P: Skd wzio si this?

O: W wielu zorientowanych obiektowo jzykach
programowania this (albo self) jest sowem kluczowym,

ktrego mona uywa w metodach instancji w celu
odniesienia si do obiektu, dla ktrego wykonywana
wanie metoda zostaa wywoana.
P: Tak wic mog wywietla losowy rabat tylko
wtedy, kiedy kto kliknie jedno ze zdj, i usuwa go,

kiedy kliknity zostanie inny obrazek. Tak naprawd
jest to jednak za mao, eby nasza strona rzeczywicie
dziaaa, zgadza si?
O:
Racja! Udao Ci si nas przyapa. Tak naprawd to

tylko pierwszy element ukadanki. Klienci bd musieli
pokaza rabat, kiedy udadz si do kasy w celu zapacenia
za zdjcia. Aby umoliwi skorzystanie z rabatu przy kasie,
bdziesz go musia przesa serwerowi do przetworzenia.
Popracujemy nad tak funkcjonalnoci w rozdziaach
od 8. do 10.
jeste tutaj 107
jazda prbna
Jazda prbna
Dodaj wiersz kodu, ktry wanie napisae, do pliku index.html. Nastpnie otwrz
stron w swojej ulubionej przegldarce, aby upewni si, czy wszystko dziaa.
Kliknij klika razy w celu sprawdzenia, czy dopisywanie liczby losowej do zmiennej
discount_msg rwnie odbywa si poprawnie i czy poprzednie wartoci rabatw
s skutecznie usuwane przed doczeniem nowego rabatu.
108
Rozdzia 2.
selektory i metody
Twoja kolej na skakanie z radoci

Gratulacje! Spenie wszystkie wymogi i przyczynie si do rozpoczcia kampanii
promocyjnej.
Od: Emilia
Temat:

Moja witryna jest o wiele
Bardzo Ci dzikuj, e to dla mnie zrobie.
moich zdj tak samo,
z
lepsza. Mam nadziej, e ludzie ciesz si
jak ja ciesz si z nowej strony!
-Emilia
graficznym, ktry
>P.S. Doczam autoportret ze sprztem foto
Nagrd za odgadnicie,
...
stron
now
moj
m
czya
zrobiam, jak zoba
co robi, nie bdzie!
jeste tutaj 109
twj niezbdnik jquery
Rozdzia 2.

niezbdnika dodae podstawy selektorw
oraz metody jQuery.
Selektory
$(this)
y element.
Wybiera biec
dzie
is) w kodzie b go,
Znaczenie $(th
te
od
zalenoci
ego.
si zmienia w
ni
do
e
ni
a
odwo
skd nastpuje
$(this) wybiera biecy element.

$("div") wybiera wszystkie elementy
div na stronie.
$("div p") wybiera wszystkie
elementy p znajdujce si bezporednio
w elementach div.
$(".moja_klasa") wybiera wszystkie
elementy znajdujce si w klasie
moja_klasa.
$("div.moja_klasa") wybiera tylko
te elementy div, ktre nale do klasy
moja_klasa (rne rodzaje elementw
mog nalee do jednej klasy).
Metody
jQuery
o
Metoda jQuery to kod wielokrotneg
e
otec
bibli
w
y
wan
inio
uycia zdef
ry
jQuery. Metod uywa si w jQue
enia
robi
do
pcie
Scri
i w Java
e
rnych rzeczy. Pomyl o metodzi
cie
prze
zi
chod
iku
own
jak o czas
i
o wykonywanie rnych czynnoc
ch.
owy
rnet
inte
na stronach
.append docza okrelon
zawarto do drzewa DOM.
Zawarto zostanie dodana na
kocu elementu, ktry j wywoa.
wa
.remove usuwa element z drze
.
DOM
110
Rozdzia 2.
$("#moje_id") wybiera elementy

z identyfikatorem moje_id.
3.=GDU]HQLDLbIXQNFMHM4XHU\
Niech si co dzieje
na Twojej stronie
Ile jeszcze razy
mam to wykopa?
jQuery uatwia dodawanie akcji oraz interaktywnoci

do kadej strony internetowej. W tym rozdziale przyjrzymy si
temu, jak sprawi, eby strona reagowaa, kiedy uytkownicy wchodz
z ni w interakcj. Sprawienie, e kod bdzie reagowa na dziaania
uytkownika, wyniesie Twoj witryn na zupenie nowy poziom.
Zajmiemy si te tworzeniem funkcji wielokrotnego uycia, dziki czemu
kod napiszesz raz, ale ju korzysta z niego bdziesz wielokrotnie.
111
drobiazgowy ksigowy
Twoja znajomo jQuery znowu jest potrzebna

Emilia jest zadowolona z pracy, jak dla niej wykonae w zwizku
z promocj Skacz z radoci, ale spotkaa si ze swoim ksigowym
i teraz chciaaby, eby dokona na jej stronie kilku zmian.
Od:

Temat:

*+:
':

9
'&

'

'

'
'&

'3 +

"3

+

;'

+''

"3

<3

@ +
=>?7

'

'3

8'

+

A

+

+

'
7 '
3

'

9 '

+

B
*+'
3
-D

'
'
Emilia zrobia swojemu ksigow

emu
kilka zdj do jego profilu, ale nie
potrafia nakoni go do skakania
z radoci. Czy Twoje zmiany
w witrynie jej w tym pomog?
112
Rozdzia 3.
zdarzenia i funkcje jquery
Facet od pienidzy ma racj...

Ograniczenie promocji tylko do jednego prostokta uchroni Emili przed
rozdaniem zbyt wielu rabatw i skoni ludzi do klikania po stronie. Wyglda
na to, e nowe funkcje sprowadzaj si wycznie do klikania...
Klik!
Klik!
Klik!
Klik!
Klik!
Zaostrz owek
Przysza pora na kolejn list wymaga. Wiesz, co robi: spjrz jeszcze raz na
e-mail od Emilii i odszukaj wszystkie nowe funkcje, o ktre prosi. Napisz, jakie
s to wedug Ciebie funkcje.
Wymagania:
jeste tutaj
113
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Przysza pora na kolejn list wymaga. Wiesz, co robi: spjrz jeszcze raz na e-mail
od Emilii i odszukaj wszystkie nowe funkcje, o ktre prosi. Napisz, jakie s to wedug
Ciebie funkcje. Oto nasze rozwizanie:
Wymagania:
Rabat powinien znajdowa si tylko w jednym z czterech pl ze zdjciami, a same

zdjcia powinny by umieszczane w rnych (wybranych losowo) polach przy
kadym pobraniu strony.
Uytkownicy powinni mie tylko jedn szans na znalezienie rabatu po zaadowaniu strony. Musimy
ich wic powstrzyma przed klikniciem wicej ni raz, eby nie otrzymali wikszej bonifikaty.
Kiedy uytkownik zdecyduje si ju klikn jakie pole, powinien pokaza si komunikat z informacj,
czy trafi w rabat. Jeli tak, naley pokaza mu kod, aby mg skorzysta z niego w swoim
zamwieniu.
Zamiast zmiennej wysokoci rabatu bdzie to standardowe 20%, wic zamiast wartoci
procentowej naley pokaza uytkownikowi kod rabatowy.
Jak nasze rozwizanie dziaa teraz

O rany! Ten facet
to dopiero klika!
Jak nasze rozwizanie powinno dziaa

Dam ci tylko
jedn szans!
WYSIL
SZARE KOMRKI
Wiesz ju, jak doda do strony kliknicie. Jak jednak zagwarantowa, e uytkownik bdzie mg
klikn tylko raz?
W poprzednich rozdziaach nauczye si te, jak za pomoc kliknicia uruchomi kod. Czy potrafisz
znale sposb, ktry pomoe nam ukoczy nasze zadanie?
114
Rozdzia 3.
Dodawanie zdarze na stron

Aplikacja Skacz z radoci sprowadza si przede wszystkim do klikania. W jQuery oraz
w JavaScripcie kliknicie jest okrelane mianem zdarzenia (istnieje mnstwo innych
zdarze, ale dla naszych obecnych celw wystarczy, e skupimy si na klikniciach).
Zdarzenie to mechanizm, ktry pozwala wykona fragment kodu, kiedy co wydarzy
si na stronie (na przykad gdy uytkownik kliknie przycisk). Kod, ktry zostaje wtedy
uruchomiony, jest nazywany funkcj, a funkcje pozwalaj sprawi, e Twj jQuery bdzie
wydajniejszy i bdzie nadawa si do wielokrotnego uycia. Za chwil przyjrzymy si im
bliej, na razie jednak rzumy okiem na to, jak naprawd dziaa kliknicie.
Zauwa dodatkowy krok, ktrego
nie pokazalimy w rozdziale 1.
Zdarzenie
kl
przypado naiknicia
przycisk
HTML.
Suchacz zdarze syszy

zdarzenie i przekazuje je...
Klik!
...do interpretera JavaScriptu,

ktry sprawdza, co trzeba zrobi
po kadym zdarzeniu...
Przycisk HTML
$("#btnSubmit").click( function(){
KK9SS3RXR?S9
...i uruchamia kod

zmieniajcy stron.
$("div").toggle();
});
O co chodzi z tym suchaczem

zdarze? Nigdy go wczeniej
nie widziaam. Co takiego on
waciwie robi?
Dobre pytanie.
Suchacze zdarze s czci
Obiektowego Modelu Dokumentu
(DOM). Moesz dodawa ich
do kadego elementu strony,
dziki czemu nie bdziesz musia
oczekiwa od uytkownikw, e
w celu uruchamiania zdarze bd
klika cza i przyciski. Przyjrzyjmy
si suchaczom zdarze bliej.
jeste tutaj
115
wiata, kamera, zdarzenia
Za kulisami suchacza zdarze

Suchacze zdarze stanowi sposb, w jaki przegldarka zwraca uwag na to, co uytkownik robi na
stronie, by nastpnie przekaza interpreterowi JavaScriptu, czy ten powinien co zrobi, czy te nie.
jQuery udostpnia bardzo atwe sposoby na dodawanie suchaczy zdarze do dowolnego elementu
strony, dziki czemu uytkownicy nie bd ograniczeni wycznie do klikania przyciskw i czy!
Dodaj zdarzenie kliknicia
Element z identyfikatorem
showMessage.
$("#showMessage").click(function() {
3& 3JR&R^
Uruchom ten kod.
});
1
Kliknito element.
Klik!
Uytkownik widzi, e co
wydarzyo si na stronie.
To, co widzisz w przegldarce
Za kulisami
3
2
Suchacz zdarze doczony do

elementu syszy kliknicie i mwi
interpreterowi JavaScriptu, jaki
kod jest z nim powizany.
Interpreter JavaScriptu
uruchamia funkcj wskazan
przez suchacza zdarze.
Musz
wywietli okno
alarmowe!
Usyszaem
kliknicie.

116
Rozdzia 3.
Interpreter
JavaScriptu
Wizanie zdarzenia
Dodawanie zdarzenia do jakiego elementu nazywamy wizaniem zdarzenia
z tym elementem. Gdy to zrobimy, suchacz zdarze bdzie wiedzia, jak
funkcj powinien kaza wywoa interpreterowi JavaScriptu.
Istniej dwa sposoby wizania zdarze z elementami.
Metoda 1.
Korzystamy z tej metody, aby dodawa zdarzenia do
elementw, kiedy strona jest pobierana.
Sposb ten jest czsto nazywany metod zoon.
$("#myElement").click( function() {
alert($(this).text());
});
Metoda 2.
Metody tej uywamy podobnie jak metody 1., ale mona
z niej te korzysta, aby wiza zdarzenia z elementami,
ktre zostay dodane do strony ju po jej zaadowaniu, na
przykad przy tworzeniu nowych elementw drzewa DOM.
Obie metody dodaj suchacza

zdarzenia click do elementu
o identyfikatorze myElement.
$("#myElement").bind('click', function() {
});
2EHMU]\MWR
Metoda 1. (zoona) jest po prostu skrcon wersj metody 2.

stosowan tylko wtedy, gdy elementy drzewa DOM ju istniej.
jQuery oferuje wiele podobnych skrtw, ktre pomagaj zachowa czysty kod. Zostay one dodane
wycznie dla wygody uytkownikw i maj swoje ograniczenia. Metod 2. naley stosowa w celu
dodawania zdarze do nowych elementw drzewa DOM, ktre zostay utworzone za pomoc kodu, takich jak
aktywne rysunki albo nowe interaktywne pozycje na listach.
jeste tutaj
117
gotowy na zdarzenia
Wyzwalanie zdarzenia
Zdarzenia na dowolnej stronie mona wyzwala na wiele
rnych sposobw. W rzeczywistoci caa Twoja przegldarka
obfituje w zdarzenia i niemal kade z nich moe wywoywa
nastpne!
''

''

6
7'

6

7'
6

&6

klawiatury

'&

7'
'

Pobieranie
dokumentu

'

118
Rozdzia 3.
Zdarzenie zostao wyzwolone

Wywoaj funkcj
function () {
Interpreter
JavaScriptu
[To jest blok kodu.

I8LX93S
}

Selektor + Zdarzenie + Funkcja = Zoona interakcja
Nie istniej
gupie pytania
P: A co z funkcjami
wewntrz zdarze?
O:
S one nazywane funkcjami

obsugi zdarze. Taka funkcja to
blok kodu, ktry jest uruchamiany
po wyzwoleniu zdarzenia. Funkcje
obsugi poznamy bliej w dalszej
czci biecego rozdziau.
P: Ile jest rnych zdarze?

O: We wszystkich kategoriach
istnieje cznie prawie 30 rnych

zdarze.
P:
Co moe wyzwoli
zdarzenie (tj. sprawi, e
zdarzenie zajdzie) na stronie?
O: Rne rodzaje zdarze s

P: Gdzie mog znale rne wyzwalane
przede wszystkim
rodzaje zdarze?
O: W witrynie jquery.com
w dziale Documentation/Events.
P:
Ile jest rnych kategorii

zdarze?
O:
przez urzdzenia wejcia

(klawiatura i mysz). Zdarzenie
moe wywoa te Twoja
przegldarka, dokument strony,
kod jQuery, a nawet formularz
HTML.
W jQuery zdarzenia
pogrupowano w pi rnych
kategorii: zdarzenia przegldarki,
pobierania dokumentu,
formularzy, klawiatury i myszy.
jeste tutaj
119
zdarzenie w zblieniu
Zdarzenie w zblieniu
W tym tygodniu wywiad na temat:
Co jest tak wyjtkowego w zdarzeniach?
Rusz gow!: Witaj, Zdarzenie. Mio mi, e mog

z tob porozmawia.
Zdarzenie: To wspaniale by z Wami.
Rusz gow!: Zatem kim jeste? Kim jest prawdziwe
Zdarzenie?
Zdarzenie: Obecnie udao mi si ju odnale
siebie, ale zanim nasta jQuery, byom troch
rozproszone. Jestem obiektem, ktry pomaga
uytkownikom wchodzi w interakcje ze stron
WWW.
Rusz gow!: Brzmi niele. Jeszcze do tego wrcimy,
ale powiedz, dlaczego byo rozproszone. Skd
pochodzisz?
Zdarzenie: To duga historia. Jeszcze w poowie
lat 90. Netscape wypuci Navigatora 2.0. Byo
cudownie. Byom jeszcze naprawd prostym
modelem. DOM, JavaScript i ja dopiero
zaczynalimy. Istnia standard W3C okrelajcy, jak
powinnimy by implementowani w przegldarkach
i w ogle!
Rusz gow!: To byo dawno temu. Od tego czasu
przebyo dug drog.
Zdarzenie: Tak, wszyscy przebylimy. W tym
czasie zostalimy wpltani w wojn midzy Internet
Explorerem Microsoftu i Netscapeem. W kocu
wygra Explorer, ale kada strona prbowaa
pokona drug sprytnymi sztuczkami, ktrych nie
byo w standardzie i ktre byy czytelne tylko dla jej
wasnych przegldarek.
Rusz gow!: To chyba byy cikie czasy.
Zdarzenie: Byy, ale wyoniy si z tego dobre
rzeczy. W 1997 roku zarwno Netscape,
120
Rozdzia 3.
jak i Microsoft wypuciy wersje 4.0 swoich

przegldarek. Pojawio si wiele nowych zdarze,
a my moglimy zrobi ze stron o wiele wicej.
Wspaniale wtedy byo by zdarzeniem.
Rusz gow!: Co si w takim razie stao?
Zdarzenie: Rzeczy wymkny si spod kontroli.
Netscape sta si opensourceowy, a potem pojawia
si Mozilla Firefox, cho Netscape cigle jeszcze
istnia. Zarwno on, jak i Explorer mieli rne
modele zdarze. Wiele rzeczy dziaao tylko w jednej
przegldarce, denerwujc ludzi, ktrzy weszli
na stron poprzez niewaciw z nich. Netscape
ostatecznie odszed, ale na scenie pojawio si kilka
nowych przegldarek.
Rusz gow!: To dlaczego znowu jest wspaniale?
Zdarzenie: Gdy patrzy si na poszczeglne
przegldarki, rzeczy nie wygldaj jeszcze idealnie.
Internet Explorer wspiera inne zdarzenia ni
Firefox, Google Chrome, appleowskie Safari albo
Opera, chocia to si zmienia wraz z kad now
wersj. Przegldarki zaczynaj by coraz bardziej
zgodne ze standardem. Najlepsza wiadomo
jest jednak taka, e jQuery radzi sobie z tymi
problemami w imieniu programisty.
Rusz gow!: Naprawd? To wietnie! Ale jak?
Co to jest ten obiekt, o ktrym wspomniao,
e nim jeste?
Zdarzenie: jQuery wie, ktra przegldarka jest
w uyciu, i decyduje, jak radzi sobie ze zdarzeniami,
w zalenoci od przegldarki, z ktrej korzysta
uytkownik. A co do obiektu, to nie ma tu nic
specjalnego. Praktycznie rzecz biorc, obiekt to tak
naprawd tylko zmienne i funkcje zestawione razem
w jednej strukturze.
Rusz gow!: Gdzie moemy sobie poczyta wicej

o tych zmiennych i funkcjach?
Zdarzenie: Wicej na mj temat moesz znale
w oficjalnej dokumentacji jQuery, o tutaj:
http://api.jquery.com/category/events/event-object/.
Rusz gow!: Dziki. Z pewnoci tam zajrz.
W jaki sposb moemy z ciebie korzysta na naszych
stronach?
Zdarzenie: Najpierw trzeba mnie gdzie podpi,
eby suchacz zdarze wiedzia, e ma mnie
nasuchiwa. Potem co musi mnie wyzwoli, dziki
czemu bd mogo uruchomi kod, ktry powinien
zosta wykonany w przypadku zajcia zdarzenia.
Rusz gow!: OK, ale skd wiesz, jaki kod
uruchomi?
Zdarzenie: To si okazuje, kiedy zostaj powizane
z elementem. W zasadzie gdy jestem z nim
ie
Sp
ojn
ok
powizane, mog wykona kady kod. To dlatego

jestem tak bardzo przydatne. Mona mnie te
odczy od elementu. Kiedy tak si stanie, suchacz
zdarze nie bdzie ju nasuchiwa zdarze w tym
elemencie, tak wic nie zadziaa ju kod, jaki mia
si uruchomi, gdy zostan wywoane.
Rusz gow!: To brzmi bardzo sprytnie, ale ju
nam si koczy czas. Gdzie mog dowiedzie si
wicej na twj temat oraz o rodzajach zdarze, ktre
zachodz na stronie?
Zdarzenie: cze, ktre ju ci daom, wyjani,
jak staj si obiektem. Wicej informacji o mnie
i o wszystkich rodzajach zdarze znajduje si
w witrynie jQuery w dziale z dokumentacj.
Dziki za zaproszenie.
Rusz gow!: Dzikuj za przybycie. Nie moemy
si doczeka, by ci uy w naszym kodzie.
W dalszej czci tego rozdziau

zagbimy si w funkcje i zmienne.
Poza tym w kolejnych rozdziaach
przyjrzymy si bliej JavaScriptowi.
jeste tutaj
121
to ju nie obfituje w zdarzenia
Usuwanie zdarzenia
Rwnie czsto, jak bdziesz potrzebowa powiza zdarzenia z elementami, bdziesz te
potrzebowa usun zdarzenie z elementu, na przykad aby uytkownicy nie klikali dwa razy
przycisku wysyania formularza albo eby pozwoli im na zrobienie czego na stronie tylko
raz. Wanie czego takiego potrzebujemy do spenienia nowych wymaga Skacz z radoci.
Po powizaniu zdarzenia z elementem bdziemy mogli je od tego elementu odpi, eby
ju nie byo wywoywane.
Aby usun jedno zdarzenie

Polecenie unbind mwi przegldarce, aby ju wicej nie nasuchiwaa
tego konkretnego zdarzenia w danym elemencie.
Uruchom ten kod,

kiedy myElement
zostanie kliknity.
Dodaj suchacza zdarzenia click

do elementu o identyfikatorze
myElement.
$("#myElement").bind('click', function() {
Usu zdarzenie
z myElement.
});
click
$("#myElement").unbind('click');
Aby usun wszystkie zdarzenia
Dodaj suchacza zdarzenia

focus do elementu
o identyfikatorze
myElement.
$("#myElement").bind('focus', function() {
alert("Mam fokus!");
Dodaj suchacza zdarzenia
});
click do elementu
$("#myElement").click(function(){
3& 3JR&R
});
$("#myElement").unbind();
122
Rozdzia 3.
o identyfikatorze
myElement.
Powiedz przegldarce,
eby nie nasuchiwaa ju
zdarze dla myElement.
Tak wic suchacz zdarze siedzi

w przegldarce doczony do elementw
czeka na zdarzenia i mwi interpreterowi
JavaScriptu, eby co zrobi, kiedy one
zajd, zgadza si?
Tak! Wanie tak si dzieje.

Zobaczmy, jak zdarzenia mog nam pomc w spenieniu drugiego wymogu.
owaniu
szans na znalezienie rabatu po zaad nie
eby
Uytkownicy powinni mie tylko jedn
raz,
ni
ej
wic
m
icie
klikn
przed
strony. Musimy ich wic powstrzyma
otrzymali wikszej bonifikaty.
Nie pozwl uytkownikom, aby

t.
ponownie prbowali znale raba
Zaostrz owek
Korzystajc ze swojej wiedzy o $(this) oraz tego, czego nauczye si na
temat zdarze, zaktualizuj kod z poprzedniego rozdziau i dodaj instrukcj,
ktra usunie zdarzenie kliknicia z sekcji div.
@3 A93%& 3% 3?
@3 ?L9#GFIS 383A9K#G
$(this).append(discount);
});
index.html
jeste tutaj 123
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Korzystajc ze swojej wiedzy o $(this) oraz tego, czego nauczye si na

temat zdarze, zaktualizuj kod z poprzedniego rozdziau i dodaj instrukcj,
ktra usunie zdarzenie kliknicia z sekcji div.
@3 A93%& 3% 3?
$(this).unbind("click");
Powiedz przegldarce, eby

ju nie nasuchiwaa zdarze
w biecym elemencie.
});
index.html
Jazda prbna
Zaktualizuj swj plik index.html nowym kodem, zapisz go, a nastpnie poklikaj
rne miejsca strony, aby upewni si, e wszystko dziaa, jak naley.
124
Rozdzia 3.
Czy prbowaa klika rne

miejsca strony, kiedy j
testowaa? Co si dziao?
Twoja strona dziaa chyba tak

samo jak moja. I wcale nie
robi tego, co powiedziae,
e bdzie robi...
Masz racj. Kliknicie nie jest jeszcze usuwane
ze wszystkich elementw.
Kliknicie jest usuwane tylko z pola, ktre klikniesz. W dalszym
cigu moesz klika pozostae pola. Gdyby tylko moga
zatrzyma kliknicia take dla pozostaych elementw...
WYSIL
SZARE KOMRKI
Jak mona usun zdarzenie kliknicia
z kadego pola po tym, jak uytkownik kliknie
jedno z nich? Czy trzeba po kolei zaj si
kadym elementem?
jeste tutaj 125
hej, zrb to jeszcze raz!
Wemy si za bary elementy

Czsto zdarza si, e musimy si zaj kadym elementem w grupie po kolei.
Na szczcie jQuery daje nam moliwo przechodzenia w ptli przez grup
elementw w oparciu o wybrany selektor. Taka ptla, zwana te iteracj, to
po prostu przejcie jeden po drugim przez wszystkie elementy i zrobienie po
drodze czego z kadym z nich.
Przejd przez kady z elementw,a.

ktre pasuj do naszego selektor
Selektor jQuery
Uruchom t funkcj
obsugi.
$(".nav_item").each(function(){
$(this).hide();
Uruchom ten kod dla
kadego elementu, ktry
pasuje do naszego
selektora.
});
Poczwszy od tego momentu,

bdziesz mnie widywa czciej,
zwaszcza w nastpnym rozdziale...
Iterator .each bierze grup

elementw i po kolei robi
co z kadym z nich.
Jeszcze dokadniej przyjrzymy si

iteracji w dalszej czci tej ksi
ki.
126
Rozdzia 3.

Nie istniej
gupie pytania
P: Czy sam mog wywoywa zdarzenia w kodzie?

P: Jak dziaa # ??
O: Tak! Co takiego robi si stosunkowo czsto. Dobry przykad O: Metoda # ? korzysta z selektora, ktry j wywouje,
moe stanowi przekazywanie formularzy do weryfikacji albo

chowanie wyskakujcych okien modalnych.
P: To jak w takim razie wywouj zdarzenie?

O: Tak jak w wikszoci przypadkw twrcy jQuery postarali
si, aby to byo atwe do zapamitania. Moesz skorzysta

z metody .trigger w poczeniu z selektorem, na przykad
$("button:first").trigger('click'); albo $("form").
trigger('submit');.
P: Czy mog uywa zdarze na stronie internetowej bez

jQuery?
O:
Tak, moesz. Dziki jQuery wizanie zdarze z dowolnymi

elementami jest jednak atwiejsze, poniewa jQuery jest
kompatybilny z wieloma przegldarkami i korzysta z prostych
w uyciu funkcji, co pomaga podczas podpinania zdarze do
elementw.
i tworzy tablic elementw identyfikowanych przez ten wanie

selektor. Nastpnie przechodzi ona sekwencyjnie w ptli przez
kady element tablicy. Na razie si tym jeszcze nie przejmuj
tablice i ptle wyjanimy pniej!
P: Wiem ju, e mog tworzy elementy za pomoc
jQuery po zaadowaniu strony. Czy te elementy te mog

odbiera zdarzenia?
O:
Tak, mog. Po utworzeniu elementu mona skorzysta

z metody .bind, aby podpi do niego suchacza zdarze. Poza
tym jeli z gry wiesz, e Twj element bdzie si zachowywa
tak jak inne, ju utworzone elementy, moesz uy metody
#
. Metoda ta doczy funkcj obsugi zdarzenia do
wszystkich elementw pasujcych do biecego selektora teraz
i w przyszoci. Sposb ten zadziaa nawet dla tych elementw,
ktre nie zostay jeszcze dodane do drzewa DOM.
Zaostrz owek
Napisz korzystajcy z iteracji kod, ktry usunie zdarzenie kliknicia z kadego
aktywnego pola na stronie Skacz z radoci. Przeczytaj te starannie swj kod,
aby sprawdzi, czy nie istniej w nim fragmenty, ktre s ju niepotrzebne.
@3 A93%& 3% 3?
$(this).unbind('click');
});
index.html
jeste tutaj 127
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
alasz
Poniewa pozwtylko na
m
ko
ni
w
ko
yt
u
ie, nie trzeba
jedno kliknic kodu .remove!
a
ow
os
ju st
Wywoanie metody .each dla klasy .guess_box spowoduje pobranie

w ptli wszystkich elementw tej klasy. Wtedy bdziesz mg odczy
metod click kolejno od kadego z nich. Nie potrzebujesz ju kodu
.remove jako e uytkownik moe klikn tylko jeden raz, nie bdzie
niczego do usunicia.
$(".guess_box").click( function(){
@3 A93%& 3% 3?
)*# !!"1;+# ?* *+,
ent
tli kady elem
Pobierz w p usu z niego
.guess_box i k.
zdarzenie clic
)*?!+#1*M
M+0
});
});
index.html
Zaczekaj!
Czy Twj plik HTML nie za
bardzo obrasta w skrypty?
Zanim przejdziesz dalej,
naprawd powinnimy sprbowa
znale jaki sposb na jego
odchudzenie...
128
Rozdzia 3.
Czy nie moglibymy po prostu

wyodrbni z naszego pliku
HTML oddzielnego pliku ze
skryptami? Zrobilimy ju tak
z naszym CSS...
Dobry pomys. W istocie istnieje kilka powodw do

utworzenia odrbnego pliku z kodem jQuery:
wiczenie
Bdzie mona doczy go do wicej ni tylko jednej

strony (wielokrotne uycie kodu).
Twoja strona bdzie adowa si szybciej.
Kod HTML, ktry piszesz, bdzie czysty i atwiejszy do czytania.
Wiesz ju, jak docza pliki CSS. Widziae te, jak doczy bibliotek jQuery. Doczanie wasnego pliku
z JavaScriptem (jQuery) w niczym si od tego nie rni!
W gwnym katalogu ze swoim projektem powiniene mie ju folder o nazwie scripts (ten, w ktrym
umiecie bibliotek jQuery).
1
Utwrz plik o nazwie my_scripts.js w swoim ulubionym edytorze tekstowym

i zapisz go w folderze scripts.
Cay kod w JavaScripcie i jQuery z pliku index.html przenie do tego nowego pliku.
Nie ma potrzeby umieszcza w nim znacznikw <script> i </script>.
W pliku HTML dodaj cze do nowego pliku, dopisujc tu przed zamykajcym

znacznikiem </body> nastpujcy kod:
<script src="scripts/my_scripts.js"></script>
jeste tutaj 129
rozwizanie wiczenia
Wiesz ju, jak docza pliki CSS. Widziae te, jak doczy bibliotek jQuery. Doczanie
wasnego pliku z JavaScriptem (jQuery) w niczym si od tego nie rni!
Rozwizanie
wiczenia
1
Utwrz plik o nazwie my_scripts.js w swoim ulubionym edytorze tekstowym

i zapisz go w folderze scripts.
Cay kod w JavaScripcie i jQuery z pliku index.html przenie do tego nowego pliku.
Nie ma potrzeby umieszcza w nim znacznikw <script> i </script>.
@3 A93%& 3% 3?
$(".guess_box").each( function(){
});
});
});
my_scripts.js
tego
woanie do
miecisz odch plikw HTML
u
z
ra
te
i
Jel
ym ze swoi sz mie w nich
pliku w kad
cie, bdzie kodu jQuery. Nie
ek
oj
pr
w tym
u.
samego
go
te
kadym plik
do
dostp
pisywa w
ze
pr
ju
musisz go
130
Rozdzia 3.
W pliku HTML dodaj cze do nowego pliku, dopisujc tu przed zamykajcym

znacznikiem </body> nastpujcy kod:
<!DOCTYPE html>
<html>
<head>
&GR3LZZ 3?XLK&G
<link href="styles/styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
</div>
<div id="main ">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
?@L&3W9A8,GW L3WKS9#S#WKGK?@G
</div>
! ! ! !"! !#!!
</body>
<html>
index.html
Teraz lepiej. Twj

kod jest adny
i uporzdkowany.
Moesz i dalej.
jeste tutaj
131
ooo, teraz jest o wiele lepiej
Struktura Twojego projektu

Wanie wprowadzie wane zmiany
w strukturze swoich plikw. Spjrzmy, jak pliki
te s teraz zorganizowane. Od czasu, kiedy
widzielimy je ostatni raz, dodalimy do ich
struktury kilka elementw.
Nie istniej
gupie pytania
!
P: Dlaczego ten plik ma

rozszerzenie .js?
"!

#!
O:
Jako e jQuery jest bibliotek

JavaScriptu, kady kod, jaki
tworzymy, musi by doczany
w taki sposb, jakby zosta
napisany w JavaScripcie.
P: W jaki sposb przyspiesza

to dziaanie naszej strony?
O:
$!
index.html

scripts
jquery-1.7.min.js
P:
my_scripts.js
my_style.css
Rozdzia 3.
Dlaczego w naszym pliku

my_scripts.js nie potrzebujemy
znacznikw <script>
i </script>?
O:
S to znaczniki HTML,
a poniewa plik ten zosta
doczony do naszej strony jako
plik JavaScript, przegldarka
wie ju, czego ma si w nim
spodziewa.
styles
132
Poniewa Twj plik .js jest

doczony do wielu plikw HTML,
przegldarka prosi o niego tylko
raz. Przechowuje go ona w swojej
pamici podrcznej, w zwizku
z czym nie musi da go od
serwera za kadym razem, gdy
przechodzimy na inn stron HTML
odwoujc si do Twojego pliku ze
skryptami.
Magnesiki z kodem
Uyj poniszych magnesikw w celu oddzielenia od siebie kodw
HTML, CSS i jQuery. Sprawd, czy dla kadego z plikw zrobie to
poprawnie.
<!DOCTYPE html>
<html>
my_num
&GR3LZZ 3?XLK&G
this
</head>
<div id="header">
});
<div id="main">
<div
<head>

".guess_box"
</div>
<script src="scripts/
<
"></script>
src="scripts/my_scripts.js"></script>
</body>
<html>
</div>
index.html
$(
).click( function() {
jquery-1.7.min.js
@3 3%& 3% 3?

$(
).append(discount);
<body>
class="guess_box"
});
script
});
class="guess_box"
my_scripts.js
jeste tutaj 133

Uyj poniszych magnesikw w celu oddzielenia od siebie kodw HTML,
CSS i jQuery. Sprawd, czy dla kadego z plikw zrobie to poprawnie.
<!DOCTYPE html>
<html>
<head>
&GR3LZZ 3?XLK&G
</head>
<body>
<div id="header">
</div>
<div id="main">
<div class="guess_box" ><img src="images/jump1.jpg"/></div>
class="guess_box"
</div>
<script src="scripts/ jquery-1.7.min.js "></script>
< script src="scripts/my_scripts.js"></script>
</body>
<html>
index.html
$( ".guess_box" ).click( function() {
my_num
@3 3%& 3% 3?
$( this ).append(discount);
});
});
});
my_scripts.js
134
Rozdzia 3.
Czy nie byoby cudownie, gdybymy

mogli napisa nasz kod w jQuery tylko
raz i uywa go wielokrotnie, gdy tylko
zajdzie taka potrzeba? Ale wiem, e
to tylko marzenia...
jeste tutaj 135
redukuj, realizuj, odzyskuj
Dodajemy funkcje
Teraz, kiedy ju wiemy, jak dodawa do strony zdarzenia i je usuwa,
spjrzmy na inny wany skadnik, ktry pozwoli nam udoskonali
nasz stron: funkcje.
Funkcja to blok kodu oddzielony od jego pozostaej czci
ktry w kadej chwili mona uruchomi w skrypcie.
Moesz wierzy lub nie, ale w ksice tej korzystalimy z funkcji
niemal od samego pocztku. Pamitasz co takiego?
Wszystko to
wywoywalimy
ju
w naszym kodzie
samego pocztku od
ksiki.
$("#clickMe").click(function(){
KK93SLXZ I8^
});
Tylko spjrz
na te funkcje!
$(".guess_box").click(function(){
KK93SLXZ I8^
});
});
jQuery udostpnia wiele funkcji, ale moesz pisa te swoje

wasne niestandardowe funkcje, aby realizowa zadania,
ktrych w jQuery nie znajdziesz. Tworzc je, moesz
wielokrotnie uywa swojego kodu bez potrzeby powielania
go w skrypcie. Zamiast tego kiedy chcesz uruchomi kod,
po prostu wywoujesz go poprzez nazw funkcji.
136
Rozdzia 3.
Funkcje niestandardowe
umoliwiaj zorganizowanie
fragmentu kodu w jQuery
pod okrelon nazw,
dziki czemu w atwy
sposb mona go uywa
wielokrotnie.
rubki i trybiki funkcji

Aby utworzy funkcj, potrzebujesz spjnej skadni, ktra powie
nazw funkcji z kodem, jaki zostanie w niej uruchomiony. Skadnia
najbardziej podstawowej funkcji w JavaScripcie wyglda nastpujco:
Rozpocznij od
o
sowa kluczoweg
function.
Nadaj nazw
funkcji.

=
Otwrz funkcj
nawiasem
klamrowym.
*+
?
}
Funkcj zamkn
nawiasem klamij prawym
rowym.
Ciao funkcji to miejsce,

w ktrym umieszczasz
swj kod.
,
to
Nawiasy okrge dzenie,
sposb na stwier ienia
e mamy do czyn
z funkcj.
Nadawanie nazw funkcjom

Istniej dwa sposoby nadawania funkcjom nazw.
Deklaracja funkcji
Pierwsza metoda to deklaracja funkcji, ktra definiuje funkcj
bez potrzeby przypisania jej do zmiennej. Zaczyna si ona
sowem kluczowym function, jak to pokazano poniej.
function myFunc1(){
$("div").hide();
}
Nazwa funkcji
Wyraenie funkcyjne
Nazwane wyraenie funkcyjne definiuje funkcj
jako cz skadni wikszego wyraenia (zwykle
przypisania wartoci funkcji do zmiennej):
var myFunc2 = function() {

$("div").show();
}
Tuta
j funkcja przypisuje
zmiennej warto.
Nazwy funkcji? Przecie

wszystkie funkcje,
z ktrych korzystaam do
tej pory, nie miay nazw.
Po co miaabym nadawa
je im teraz?
Dobre spostrzeenia.
Nazywanie funkcji umoliwia
wywoywanie ich z wicej ni
tylko jednego miejsca w kodzie.
Nienazwane funkcje, zwane te
funkcjami anonimowymi, maj
raczej ograniczone zastosowanie.
Spjrzmy nieco dokadniej na
funkcje anonimowe, ebymy mogli
stwierdzi, jak brak nazwy wpywa
na te ograniczenia.
jeste tutaj 137
co si kryje w nazwie?
Funkcja anonimowa
Funkcje anonimowe albo samowywoujce si nie maj nazw
i s od razu wywoywane w chwili, w ktrej zostan napotkane
w kodzie. Poza tym zmienne zadeklarowane wewntrz tych funkcji
s dostpne tylko wtedy, gdy dana funkcja dziaa.
Tej funkcji nie moemy wywoa

z innego miejsca w naszym kodzie.
@3 A93%& 3% 3?
Jeli zechcemy uy
tego kodu gdzie
indziej, bdziemy
musieli go powieli.
Zmienne
});
});
});
my_scripts.js
2EHMU]\MWR
Poniewa nie nadalimy tej funkcji nazwy, nie moemy jej

wywoa z innego miejsca w naszym kodzie.
Nie istniej
gupie pytania
P: Jaka jest rnica midzy deklaracj funkcji

a nazwanym wyraeniem funkcyjnym?
O:
Gwn rnic stanowi moment wywoania. Chocia

obie mog robi to samo, funkcja zadeklarowana jako
nazwane wyraenie funkcyjne nie moe zosta uyta,
dopki nie zostanie zdefiniowana i napotkana w kodzie.
Z drugiej strony funkcja zdefiniowana za pomoc
deklaracji moe by wywoywana na stronie, gdy tylko
zechcesz, nawet jako funkcja obsugi zdarzenia onload.
138
Rozdzia 3.
P: Czy istniej jakie ograniczenia co do nazw, jakie

moemy nadawa naszym funkcjom?
O:
Tak. Nazwy funkcji nigdy nie powinny zaczyna

si od cyfry i nie mog zawiera adnych operatorw
matematycznych ani znakw przestankowych
z wyjtkiem podkrelenia (_). Ponadto adnej czci
nazwy nie moe stanowi spacja. W nazwach funkcji
i zmiennych rozrniana jest te wielko liter.
Funkcje nazwane jako funkcje obsugi zdarze

We wczeniejszej czci tej ksiki widzielimy, jak funkcje anonimowe mog by uywane
w roli funkcji obsugujcych zdarzenia. Nasze wasne, niestandardowe funkcje take
moemy wykorzysta do obsugi zdarze i moemy wywoywa je bezporednio z kodu.
Przyjrzyjmy si bliej dwm funkcjom, ktrym nadalimy nazwy dwie strony wczeniej.
Deklaracja funkcji
Tutaj potrzebne s
nawiasy okrge.
Wywoaj funkcj
z kodu.
function myFunc1(){
myFunc1();
$("div").hide();
Zgodnie z pozosta czci

deklaracji funkcji sekcje
zostan ukryte.
}
funkcji
Nazwy naszych
Wyraenie funkcyjne
var myFunc2 = function() {
$("#myElement").click(myFunc2);
Kiedy nasza funkcja

jest wywoywana
jako funkcja obsugi
zdarzenia, nawiasy
nie s potrzebne.
$("div").show();
nkcj
Wywoaj fu obsugi
cj
nk
fu
jako
zdarzenia.
Ten zapis oznacza,

e sekcje zostan
wywietlone po klikniciu
elementu myElement.
Magnesy z kodem
Sprawd, czy potrafisz poukada magnesiki w taki sposb, aby zamieni
fragment programu sprawdzajcy rabat w funkcj nazwan checkForCode,
po czym uy jej jako funkcji obsugi zdarzenia kliknicia w aktywnych polach.
I"I
}

$(".guess_box").click( checkForCode );
@3 A93%& 3% 3?
*+
!
?L9#GFIS 383A9K#G

$(this).append(
);
click
$(this).unbind('
checkForCode
');
});

var
});
my_scripts.js
jeste tutaj 139

Sprawd, czy potrafisz poukada magnesiki w taki sposb, aby zamieni
fragment programu sprawdzajcy rabat w funkcj nazwan checkForCode,
po czym uy jej jako funkcji obsugi zdarzenia kliknicia w aktywnych polach.
Nasza nazwana cja
funkcja jako funk
obsugi zdarzenia
Instrukcj zakocz
rednikiem.
Deklaracja
naszej funkcji

checkForCode *+
Generator
liczb losowych,
ktrego uylimy
w rozdziale 2.
@3 A93%& 3% 3?
var
?L9#GFIS 383A9K#G
$(this).append( ! );
Poka rabat
na ekranie.
$(this).unbind(' click ');
});
}
});
Usu zdarzenie click z kadego

pola, tak jak si tego
nauczylimy w tym rozdziale.
I"I
Zrb to!

my_scripts.js
Tych magnesikw
nie potrzebujesz.
Dobra robota! Kiedy ju zaktualizujesz plik powyszym kodem,

bdziesz mie utworzon swoj pierwsz funkcj i uyjesz jej
w roli funkcji obsugi zdarzenia kliknicia.
WYSIL
SZARE KOMRKI
140
Rozdzia 3.
dy generator liczb
Podpowied: Teraz, kiedeklaracji funkcji,
losowych jest czci no w istniejcej
moesz go uy zarwjak i w funkcji,
funkcji checkForCode,
i ktra bdzie
ktr wkrtce napiszesz
cyjny w losowo
umieszcza kod promo
wybranym polu.
Jak napisaby funkcj chowajc rabat w losowo wybranym polu

oraz drug, ktra generowaaby liczb losow dla rabatu?

Tak wic potrzebujemy funkcji, ktra
bdzie robi rne rzeczy w zalenoci
od tego, ktre pole zostanie kliknite...
Jak j utworzy?
Czasami chcielibymy, eby funkcja moga wykonywa swoje

zadanie wielokrotnie, ale eby wynik jej dziaania rni si
w zalenoci od informacji, jakie jej przekaemy.
Nasze funkcje mog przyjmowa przekazywane do nich zmienne. Jak
pamitasz z rozdziau 2., zmienna jest uywana do przechowywania
informacji, ktre mog ulega zmianom. Przygldalimy si ju zmiennym.
Przypomnijmy sobie teraz, jak dziaaj.
Po sowie kluczowym
var naley poda
nazw zmiennej.
Sowo kluczowe var

pozwala zadeklarowa
zmienn.
W taki sposb nadaje si

w kodzie warto zmiennej.
var pts = 250;

Kiedy deklarujemy zmienn,
interpreter JavaScriptu
przydziela nam w przegldarce
troch pamici, w ktrej
bdziemy mogli przechowywa
jej warto.
Zmiennej nadajemy
nazw, ebymy mogli
pniej odwoywa si
do niej w skrypcie.
pts
W naszym kodzie korzystamy ju z kilku

zmiennych. Pamitasz je?
Warto umieszczamy
w zmiennej za pomoc
znaku rwnoci.
0
5
2
=
pts
@3 A93%& 3% 3?

@3 ?L9FIS 383A9
jeste tutaj
141
prosz poda zmienne
Przekazywanie zmiennej do funkcji

Kiedy zmienne s wstawiane (albo przekazywane) do funkcji, nazywamy je argumentami
(czasami mwi si te o nich jako o parametrach). Przyjrzyjmy si bliej temu, jak mona
przekaza argument do funkcji.

=
?

Argumenty przeka
w nawiasach.
}
Nazwa funkcji
Nazwa argum
entu
function welcome (name) {

3& ZX3
}
Zrb co z argumentem.
KKFFJ3S3Z\9RLS
welcome("Janek");
Funkcja nie musi wiedzie, co zawiera zmienna. Wywietli ona wszystko, co tylko bdzie
si w zmiennej znajdowa. Dziki temu moesz zmienia tre, jak wywietla funkcja,
modyfikujc po prostu zmienn, zamiast wprowadza zmiany w samej funkcji (co wcale
nie przyczynioby si do moliwoci jej wielokrotnego uycia).
ie
ojn
ok
Sp
czenie zmiennych i funkcji moe

wydawa si troch skomplikowane.
Pomyl o swojej funkcji jak o przepisie;

powiedzmy, e w tym przypadku bdzie
to przepis na drinka. Masz do wykonania podstawowe,
powtarzajce si czynnoci konieczne do jego sporzdzenia
wlej troch tego, dodaj kropl tamtego, zamieszaj itd.
ktre tworz Twoj funkcj. Skadniki drinka to natomiast
zmienne, ktre do niej przekazujesz.
Dla kogo gin z tonikiem?
142
Rozdzia 3.
Funkcja moe te zwraca warto

Zwracanie przez funkcj informacji wie si z uyciem sowa
kluczowego return, po ktrym nastpuje warto, jaka powinna
zosta zwrcona. Wynik jest przekazywany do kodu, ktry wywoa
funkcj, co pozwala na uycie go w dalszej czci programu.
Nazwy argum
entw
Nazwa funkcji
function multiply (num1, num2) {
Zwracanym typem moe

by liczba, acuch
tekstowy, a nawet element
drzewa DOM (obiekt).
@3 9&99-
Zrb co z tymi
argumentami.
return result;
}
Zwr warto.
KKHFJ3S3Z\9RLS
var total = multiply (6, 7);
alert (total);
Zaostrz owek
Teraz, kiedy potrafisz ju pisa funkcje, dodaj do pliku my_scripts.js now
funkcj przyjmujc pojedynczy argument (o nazwie num) i zwracajc
w oparciu o ten argument liczb losow. Funkcja ta bdzie si nazywa
getRandom.
my_scripts.js
jeste tutaj 143
Podpowied: Czy pamitasz kod,

z
ktre
go
skorz
ysta
e,
aby
wyge
nerowa
liczb losow? Pomyl, gdzie mona
go umieci w celu wywoania funkc
ji.
zaostrz rozwizanie
Zaostrz owek
Teraz, kiedy potrafisz ju pisa funkcje, dodaj do pliku my_scripts.js now
funkcj przyjmujc pojedynczy argument (o nazwie num) i zwracajc
w oparciu o ten argument liczb losow. Funkcja ta bdzie si nazywa
getRandom.
Rozwizanie
Nazwa argum
entu
Nazwa funkcji
function getRandom(num){
var my_num = Math.floor(Math.random()*num);

return my_num;
}
Zwr liczb losow.
my_scripts.js
OK, wszystko to zwizane z funkcjami

i argumentami jest cakiem fajne, ale
jak bardzo zbliylimy si do ukoczenia
kodu dla strony Skacz z radoci?
jeszcze
jednak y, co
t
s
e
J
!
m
Zobacz
a niele
na
Wygld o zrobienia. powiedzenia
d
o
o
go
d
r
e
a
iw
spo
m
c
a
wa
ekip
Twoja sprawdzania
temat
pola...
Kuba: No tak, ale oprcz naszej funkcji getRandom

potrzebujemy jeszcze jednej...
Franek: Susznie! Takiej, ktra umieci rabat w losowo
wybranym polu, w ktrym mona bdzie uy funkcji
getRandom.
Jzek: To ma sens. Nastpnie, po klikniciu, bdziemy mogli
sprawdzi, czy uytkownik klikn waciwe pole.
Kuba: Chwila, moment czy co? Skd bdziemy wiedzie,
czy kto klikn waciwe pole.
Franek: Logika warunkowa!
Kuba: Co?
Franek: Warunki pozwalaj nam sprawdza wystpowanie
okrelonych sytuacji i uruchamia odpowiedni kod.
Jzek: Moglibymy wic na przykad zobaczy, czy zmienna
ma pewn warto albo czy dwie wartoci s sobie rwne?
Franek
Kuba
Jzek
Franek: Wanie! Moemy nawet sprawdzi, czy w danym

elemencie znajduje si inny element, co wedug mnie moe
nam tu pomc.
Kuba: Niele. Ju nie mog si doczeka, eby to zobaczy!
144
Rozdzia 3.
Korzystaj z logiki warunkowej w celu podejmowania decyzji

jQuery uywa logiki warunkowej jzyka JavaScript. Dziki logice warunkowej mona uruchamia
rny kod w zalenoci od decyzji, jak podejmie Twj program na podstawie posiadanych
informacji. Poniszy kod jest tylko jednym z przykadw logiki warunkowej w JavaScripcie;
kolejnym przyjrzymy si w rozdziale 6.
Warunek, ktry
chcemy sprawdzi
Pocztek instrukcji if
if( myBool == true ){

Zmienna
JavaScript
KK I8LX^
}else{
Mona
Operator porwnania. ne.
go czyta jako jest rw
Kod, jaki chcemy
uruchomi, kiedy
sprawdzany warunek
bdzie prawdziwy.
KKH# ZLF# Z#3?R9Z I8LXW^

}
Kod, jaki chcemy

uruchomi, kiedy
ek
sprawdzany warun
bdzie faszywy.
Uwaga. Polecenie else nie jest

potrzebne do zamknicia instrukcji if,
ale doczenie go to dobry pomys.
Magnesiki z kodem
Sprawd, czy moesz uoy magnesiki w taki sposb, aby utworzy now funkcj o nazwie
hideCode, ktra korzysta z logiki warunkowej w celu ukrycia losowo wybranego nowego
elementu span o identyfikatorze has_discount w jednym z istniejcych aktywnych
elementw .guess_box div.
var
# !!"1;
!
*+
hideCode
= function (){
@3 93?
$(
.+0
).each(function(index, value) {
if(numRand == index){
$(this).append("<span id='
'></
>");
P
return false;
}
?!"!
}
(
my_scripts.js
jeste tutaj 145

Sprawd, czy moesz uoy magnesiki w taki sposb, aby utworzy now funkcj o nazwie
hideCode, ktra korzysta z logiki warunkowej w celu ukrycia losowo wybranego nowego
elementu span o identyfikatorze has_discount w jednym z istniejcych aktywnych
elementw .guess_box div. Oto nasze rozwizanie:
Nasza funkcja nazwana
var hideCode
= function (){
P
@3 93?
$( # !!"1;
Wywoaj nasz funkcj .

ow
generujc liczb los
).each(function(index, value) {
if(numRand == index){
Logika warun
porwnujca kowa
miejsce, w kt
znajdujemy sirym
na naszej li
ci
z wylosowan e,
liczb.
}
$(this).append("<span id=' ?!"! '></ !
>");
return false;
Wyjd z ptli .each().
wy do
Dodaj element rabato _box.
ess
.gu
sy
kla
w
element
.+0
my_scripts.js
2EHMU]\MWR
Indeks elementu listy wskazuje miejsce, na

ktrym ten element znajduje si na licie.
Indeksy zawsze rozpoczynaj si od 0.
Pierwszy element listy ma wic indeks rwny 0, drugi indeks rwny 1 itd.
Dowiemy si wicej na temat uywania indeksw, kiedy przyjrzymy si
tablicom i ptlom w rozdziale 6.
146
Rozdzia 3.

Niesamowite! Za kadym razem rabat
sam si chowa w innym polu. Te funkcje
rzeczywicie staj si przydatne.
Franek: Tak, to prawda, ale czy teraz, kiedy kod rabatowy zosta
ukryty, mona go bdzie znowu znale?
Kuba: O... no tak, to dobre pytanie. Nie wiem.
Jzek: Wydaje mi si, e znowu bdziemy potrzebowa troch tych
warunkowych czarw.
Franek: Zgadza si. Teraz zamiast wybiera z naszej listy elementw
.guess_box losowy indeks, bdziemy j musieli znowu przeszuka
w ptli, eby sprawdzi, czy zawiera element has_discount.
Jzek: Zawiera? Hej, Franek, to moe by niezy pomys.
Franek: Tak. Zobaczmy, jak moglibymy to zrobi w jQuery.
Zrb to!
m.
ienn z rabate
Zadeklaruj zm
Logika warunkowa
sprawdzajca, czy
uytkownik znalaz
rabat
Zaktualizuj swoj funkcj checkForCode, tak

aby zawieraa nowy kod bazujcy na pomyle
Kuby, Franka i Jzka.
function checkForCode(){ Element biecy, czyli ten,

ktry wywoa funkcj
! 0
Znajd elemen
drzewa DOM t
z identyfikator
has_discount em
.
*)# !*?!Q # 8

5A*?!"! +++
,
Metoda jQuery
sprawdzajca, czy
to, co znajduje
si w pierwszym
parametrze,
zawiera to, co
znajduje si
w parametrze
drugim
" P*@+0
! B=J1I"IK0
.
! ,
! R ! Q1 S0
}
Zdefiniuj kom
aby by inny unikat w taki sposb,
w
czy uytkowni zalenoci od tego,
k znajdzie ra
te nie.
bat, czy
});
}
my_scripts.js
jeste tutaj 147
niestandardowa funkcja wywoujca Twoj funkcj
Zrb te i to!
Czas na dodanie kilku niestandardowych funkcji: generujcej
liczb losow, ukrywajcej rabat oraz sprawdzajcej rabat.
Wywoaj t funkcj, kie

dy element klasy
.guess_box zostanie
kliknity.
P*+,

"?#
*?#*+H+0
"0
}
Funkcja nazwana, ktra

ukrywa zmienn z rabatem
Nasza funkcja
generujca liczb
losow
? T *+,

P P*U+0
)*# !!"1;+# ?* * ;Q
+,
*P ;+,
)*?!+# *!M?!"! M!+0

! 0
}
.+0
}
Wywoaj funkcj nazwa

n...
hideCode();
...ktra podaje rabat.
? VT *+,

! 0
*)# !*?!Q # 8
5A*?!"! +++
,
" P*@+0
! B=J1I"IK0
.
! ,
! R ! Q1 S0
}
)*?!+# *! +0
)*# !!"1;+# ?* *+,
)*?!+#1*M
M+0
.+0
}
}); //Koniec document.ready()
my_scripts.js
148
Rozdzia 3.
Skacz z radoci potrzebuje jeszcze wikszej pomocy

Kiedy mylae ju, e Twoja praca przy promocji Skacz z radoci
dobiega koca, Emilia zgosia kilka nowych pomysw...
Od:

Temat:

*+:
9
'
3

<

' 3

3

9 3 '

3

+

'

++

'
'

+

'
+B*7
'

@''

+
'B

E&
F>>B

F F>B

+

0

+!
3
-D

'
'
Zaostrz owek
Wiesz, co robi. Odszukaj w e-mailu od Emilii wszystkie nowe wymagania.
Wymagania:
jeste tutaj 149
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Wymagania:
Wiesz, co robi. Odszukaj w e-mailu od Emilii wszystkie nowe wymagania.
Wyrnij pole, na ktrym znajduje si uytkownik, eby z ca
pewnoci wiedzia, ktr opcj wybierze, zanim jeszcze kliknie

okrelone zdjcie.
Zamiast wielkoci rabatu podaj w oddzielnym miejscu na ekranie kod

promocyjny. Informacja o rabacie powinna skada si z tekstu oraz
liczby z zakresu od 1 do 100.
Nie istniej
gupie pytania
P: Czy dla kadej naszej funkcji
musimy okrela zwracan warto?
O:
Technicznie rzecz biorc nie. Kada

funkcja zwraca warto bez wzgldu na
to, czy j okrelisz, czy te nie. Jeli nie
podasz, jak warto ma zwraca funkcja,
zwrci ona warto undefined. Jeeli
Twj kod nie potrafi obsuy wartoci
undefined, zostanie zgoszony bd.
Okrelanie zwracanej wartoci jest wic
dobrym pomysem, nawet jeli bdzie to
co w rodzaju return false;.
P: Czy istniej jakie ograniczenia
co do argumentw albo parametrw,

ktre mog przekazywa funkcji?
O: Nie, do funkcji moesz przekaza
dowolny obiekt, element, zmienn

albo warto. Moesz przekaza te
wicej parametrw, ni oczekuje tego
funkcja. Parametry te zostan pominite.
Jeli przelesz zbyt mao parametrw,
brakujcym parametrom zostan nadane
wartoci undefined.
P: Co robi metoda $.contains?

O: Jest to statyczna metoda biblioteki
jQuery, ktra pobiera dwa parametry.

Sprawdza ona wszystkie potomne
elementy pierwszego parametru, badajc,
czy ktry z nich stanowi element
bdcy jej drugim parametrem, i zwraca
warto true albo false. W naszym
przypadku $.contains(document.
body,document.
getElementById("header"))
zwrci true; z drugiej strony
$.contains(document.getElemen
tById("header"),document.body)
zwrci false.
P: O co chodzio z tymi index i value
w naszej funkcji obsugi zdarzenia

.each?
O:
index odnosi si do miejsca w ptli,

w ktrym jestemy, poczwszy od 0 dla
pierwszego elementu tablicy zwrconego
przez selektor. value natomiast odnosi
si do biecego obiektu. Jest to ten
sam element co w przypadku $(this)
wewntrz ptli .each.
P: Dlaczego nasza ptla .each
w funkcji hideCode zwraca warto

false?
O:
Zwrcenie wartoci false w ptli

.each nakazuje przerwanie ptli i przejcie
Co to znaczy w jQuery, e metoda
dalej. Jeli zostanie zwrcona warto inna
jest statyczna?
ni false, nastpi przejcie do kolejnego
To znaczy, e funkcja ta jest
elementu na licie. W naszym przypadku
skojarzona z bibliotek jQuery zamiast
wiemy, e kod rabatowy zosta ju
z jakim konkretnym obiektem. Do
ukryty, tak wic moemy nie sprawdza
wywoania takiej metody nie potrzebujemy pozostaych elementw.
selektora; wystarczy nazwa jQuery albo jej
skrt ($).
P:
O:
WYSIL
SZARE KOMRKI
Czy potrafisz poda sposb na stwierdzenie, ktre pole chce
wybra uytkownik, zanim jeszcze w nie kliknie?
150
Rozdzia 3.
Metody mog zmienia CSS

Aby dokoczy nasze zadanie, musimy wyrni pole, nad ktrym znajduje si
uytkownik, zanim ten je kliknie. Najprociej moemy zmieni wygld elementu
w pliku CSS i za pomoc klas CSS.
Na szczcie jQuery udostpnia atwy sposb nadawania klas elementom CSS
i usuwania ich za pomoc prostych w uyciu metod. Spjrzmy, jak moemy je
wykorzysta w naszym projekcie.
Kod
gotowy do
wysmaenia
Utwrz te trzy nowe pliki niezalenie od

istniejcych ju plikw Skacz z radoci aby
mg zaobserwowa dziaanie nowych metod.
Powinno Ci to pomc w zrozumieniu, jak mona
wyrni pole, zanim kliknie je uytkownik.
Pamitasz je
z rozdziaw 1. i 2.?
.hover{
border: solid #f00 3px;
}
.no_hover{
<html>
<head>
<link href="styles/test_style.css" rel="stylesheet">
</head>
test_style.css
<body>
?@?%3? L&3A%@ G%G3WJIFRK%GK?@G
89#89?8G&RS38??3K89G
89#89?8-G&RS3899\K89G
<script src="scripts/my_test_scripts.js"></script>
</body>
</html>
$("#btn1").click( function(){
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
class_test.html
});
$("#header").removeClass("hover");
$("#header").addClass("no_hover");
});
});
my_test_scripts.js
jeste tutaj
151
jazda prbna
Jazda prbna
Otwrz nowy plik class_test.html w swojej przegldarce. Po klikniciu przycisku
dodawania Twoja klasa zostanie przypisana do sekcji o identyfikatorze header.
Kliknicie przycisku usuwania spowoduje odczenie klasy!
Na pocztku
Po klikniciu
wietnie! Gdyby tylko wszystko byo
tak atwe. Czy CSS moe zmieni swoje
dziaanie take na skutek czego
innego ni kliknicie?
Tak, moe. I jest to rwnie atwe...

CSS mona zmienia przy uyciu dowolnego rodzaju zdarzenia.
W naszym rozwizaniu potrzebne bdzie jeszcze jedno
zdarzenie. Spjrz na list ze strony 118 i sprbuj wskaza
zdarzenie, z ktrego bdziesz musia skorzysta.
152
Rozdzia 3.
Dodaj zdarzenie hover

Zdarzenie hover moe jako parametry pobiera dwie funkcje obsugi:
jedn dla zdarzenia mouseenter i drug dla zdarzenia mouseleave.
Funkcje obsugi mog by nazwane albo anonimowe. Przyjrzyj si
prbnym skryptom, ktre przed chwil uruchomie, aby zobaczy, jak
mona skorzysta ze zdarzenia hover w celu zmiany dziaania elementu
w chwili, kiedy wskanik myszy znajduje si nad tym elementem.
my_test_scripts.js
Metoda jQuery rem

umoliwia usunic oveClass
ie klasy CSS
z elementu.
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("#header").removeClass("hover");
$("#header").addClass("no_hover");
});
ss pozwala na
Metoda jQuery addCla elementu. Nie
dodanie klasy CSS do ostae klasy CSS
ma ona wpywu na poz ntem.
powizane z tym eleme
});
wiczenie
Zaktualizuj swoje pliki my_style.css i my_scripts.js w taki sposb, eby sekcje ze

zdjciami byy wyrniane, kiedy uytkownik przemieci nad nie wskanik myszy. Do
utworzenia odpowiadajcej za to funkcji bdziesz potrzebowa nowej klasy CSS oraz
dwch funkcji obsugi w pliku ze skryptem (umieszczonych po funkcji checkForCode)
korzystajcych z metod addClass i removeClass w celu modyfikowania klas CSS.
Pocztek ju zrobilimy za Ciebie. Poniej trzeba ju tylko uzupeni funkcje.
my_style.css
$(".guess_box").hover(
function () {
KKS9RLS38J9WZ?3 Z39
.
},
function () {
KKS9RLS38J9WZ?3 Z39&3@
});
my_scripts.js
jeste tutaj 153
rozwizanie wiczenia
Rozwizanie
wiczenia
Teraz, kiedy masz ju klas CSS, moesz

pracowa ze zdarzeniem hover.
#"? ,
Oto nowa klasa.
Za pomoc tej
anonimowej funkcji
obsugi zdarzenia
mouseenter ustaw
klas CSS pola,
kiedy uytkownik
przesunie nad nie
wskanik myszy.
$(".guess_box").hover(
1 2!
-:: 6;0
}
my_style.css
Metoda jQuery addClass umoliwia dodanie

u
klasy CSS do elementu. Nie ma ona wpyw
ntem.
na inne klasy CSS powizane z tym eleme
function () {
KKS9RLS38J9WZ?3 Z39
)*?!+#T
!!*"? +0
},
function () {
Metoda jQuery
removeClass
umoliwia
usunicie klasy
CSS z elementu.
nimowa funkcja
Tutaj znajduje si ano leave.
use
mo
nia
rze
zda
i
ug
obs
KKS9RLS38J9WZ?3 Z39&3@
)*?!+# T
!!*"? +0
});
my_scripts.js
Jazda prbna
Otwrz w swojej przegldarce plik index.html, ktry powinien zawiera odwoanie do nowego
pliku my_scripts.js. Przesu wskanik myszy nad rysunki i zobacz, czy zmienia si ramka.
Hm. Kolor ramki

zdjcia ju si
zmienia, ale
w dalszym cigu
pozostao co do
zrobienia...
154
Rozdzia 3.
To ju prawie wszystko...
Zdecydowanie posunlimy si do przodu, ale komunikat nadal pojawia si w zym miejscu
i nie wyglda tak, jak nas o to proszono. Poza tym jest jeszcze jeden wymg z pierwszego
e-maila, ktrego nie zrealizowalimy. Oto lista wymaga w obecnej postaci:
Wyrnij pole, na ktrym znajduje si uytkownik, eby z ca
pewnoci wiedzia, ktr opcj wybierze, zanim jeszcze kliknie

okrelone zdjcie.
Zamiast wielkoci rabatu podaj w oddzielnym miejscu na ekranie kod

promocyjny. Informacja o rabacie powinna skada si z tekstu oraz
liczby z zakresu od 1 do 100.
Kiedy uytkownik zdecyduje si ju klikn jakie pole, powinien pokaza si
komunikat z informacj, czy trafi w rabat. Jeli tak, naley pokaza mu kod,
aby mg skorzysta z niego w swoim zamwieniu.
Ten wymg
pochodzi
z pierwszego
e-maila!
Zaktualizuj swoj funkcj checkForCode, aby zrealizowa ostatnie trzy wymogi:

wiczenie
1. Umie kod rabatowy w oddzielnym obszarze na ekranie.

2. Spraw, by kod by poczeniem liter oraz liczby od 1 do 100.
3. Poka uytkownikowi, gdzie by kod, jeli nie udao mu si tego odgadn.
Aby pomc Ci w stwierdzeniu, czy kod

zosta odnaleziony, utworzylimy klasy
CSS, ktre moesz doda do swojego
pliku my_style.css.
A skoro ju przy tym jestemy, to
poniej czterech aktywnych pl dodaj
element span o identyfikatorze result
wywietlajcy kod rabatowy.
#! ,
1 2!
-: :6;0
}
#"! ,
1 2!
- ::6;0
}
my_style.css
jeste tutaj 155
rozwizanie wiczenia
Zaktualizowae swoj funkcj checkForCode, dodajc do niej wszystkie funkcjonalnoci, o ktre

zostae poproszony: odrbne miejsce na ekranie dla kodu rabatowego, informacj o rabacie skadajc
si z tekstu i liczby od 1 do 100 oraz wskazanie po klikniciu uytkownika, gdzie znajdowa si rabat.
Rozwizanie
wiczenia
function checkForCode(){
var discount;
if($.contains(this, document.getElementById("has_discount") ) )
Skorzystaj z funkcji getRandom, aby
zwikszy do 100 moliwe wartoci kodu
rabatowego.
{
Za pomoc
funkcji jQuery
contains
sprawd, czy
w tym polu
znajduje si
kod rabatowy.
var my_num = P*'::+0

discount = B=J2WX3I"I ;
Skonfiguruj
posta
komunikatu
}else{
w zalenoci
od
discount = "<p>Niestety, tutaj rabatu nie ma!</p>" ; kodtego, czy
zosta
odnaleziony,
}
czy te nie.
$(".guess_box").each(function() {
Jeli tak,
zmie wygld
pola, aby
poinformowa
uytkownika,
e znalaz kod...
*)# !*?!Q # 8

5A*?!"! +++
,
)*?!+#T
!!*! +0
.
! ,
)*?!+#T
!!*"! +0
...a jeli
nie, poka
uytkownikowi
pole, w ktrym
ukryty by kod.
}
$(this).unbind();
});
rmacyjny
Wywietl komunikat infoonym dla
na stronie w przeznacz
niego miejscu.
)*- !
+# *! +0
} // Koniec funkcji checkForCode
my_scripts.js
156
Rozdzia 3.
Jazda prbna
Teraz, kiedy zaktualizowae ju swoj funkcj checkForCode, zobacz jej nowe dziaanie
na stronie Skacz z radoci (dla porwnania moesz sprawdzi, jak powinien wyglda
Twj kod, w pliku: my_scripts.js).
Zaadowana strona
Dobra robota! Teraz

jest o wiele lepiej. To
naprawd powinno pomc
naszej stronie i pozwoli
Emilii zaoszczdzi
troch forsy!
Bez kodu rabatowego
Z kodem rabatowym
jeste tutaj 157
Rozdzia 3.

niezbdnika dodae zdarzenia, funkcje
wielokrotnego uycia oraz logik warunkow.
Logika
warunk
o
wa
Funkcje
,
o uycia
krotneg innych
lo
ie
w
ty kodu
sta w
Fragmen moesz korzy amu...
r
h
g
c
o
y
r
z ktr h swojego p
.
c
a
c
azwane
js
mie
dy s n
ie
k
,
y
d
lko wte
tylko
...ale ty
dziaaj o zostay
e
n
a
w
z
g
niena
ktre
Funkcje u w kodzie, z uywane
y
c
b
js
ie
g
mo
w m
ne, i nie
wywoa ziej.
d
gdzie in
kazywa
na prze ty albo
o
m
ji
c
Do funk (czyli argumen cja moe
nk
zmienne y), a sama fu
r
t
e
m
a
i.
r
pa
nik
aca wy
te zwr
158
Rozdzia 3.
Sprawd
z
(czy X a ona warun
Y
e
czego Z = true) prz k logiczny
.
ed zrob
ieniem
Skadn
ia czs
to zaw
instruk
ie
c
sprawd j else, na w ra
zany w
y
arunek padek gdyby
faszyw
y
koniecz , chocia nie okaza si
ne.
jest to
Zdarzenia
S to obiekty pomagajce
uytkownikowi w interakcji
ze stron WWW.
wie
Istnieje ich okoo 30 i pra
jsce
mie
mie
e
mo
wszystko, co
oa
wyw
e
mo
,
rce
da
egl
prz
w
zdarzenie.
4.0DQLSXORZDQLHVWURQLQWHUQHWRZ]DSRPRFM4XHU\

To, e mamy tych
samych rodzicw, nie
znaczy od razu, e
jestemy tymi samymi
elementami!
To, e strona skoczya si pobiera, nie znaczy od razu, e musi

ona zachowywa t sam struktur. W rozdziale 1. zobaczylimy, jak
podczas wczytywania strony w celu ustalenia jej struktury jest konstruowane
drzewo DOM. W biecym rozdziale dowiemy si, jak porusza si w gr i w d
struktury drzewa DOM i jak pracowa z hierarchi elementw oraz relacjami
rodzic dziecko, aby za pomoc jQuery zmienia w locie struktur strony.
to jest nowy rozdzia 159
jedna strona, by wszystkimi rzdzi
Restauracja w Webowicach chce interaktywnego menu

Aleksandra, szefowa restauracji w Webowicach, ma dla Ciebie zadanie. Prowadzi ona
dwie odrbne strony WWW z rnymi wersjami menu: ze zwykymi posikami oraz
z ich wegetariaskimi odpowiednikami. Chciaaby, eby przygotowa dla niej jedn
stron, ktra bdzie dostosowywa menu dla wegetariaskich klientw restauracji.
Kilka lat temu umiecilimy

nasze menu w Internecie i nasi
klienci je uwielbiaj! Chcielibymy,
eby doda do niego kilka
przyciskw, ktre pozwol im
w locie zmienia i wyrnia
pozycje menu.
160
Rozdzia 4.
manipulowanie stron internetow za pomoc jquery
Dla wegetarian
Oto, co Aleksandra chciaaby, eby zrobi.
ktry
wegetarian, enu
la
D
k
is
c
y
m
rz
ym
p
Chcemy mie ie zaproponuje w nasz ch posikw.
n
y
z
k
c
y
w
ty
dniki z
automa
kie odpowie
wegetarias
to dziaa:
Oto, jak ma
naszych
iednikw dlausun.
w
o
p
d
o
y
m
eba je
- Nie oferuje
tak wic trz
,
h
c
y
n
b
ry
da
erw
nik hamburg
d
ie
w
o
p
d
o
i
tariask
- Jako wege gigantyczne pieczarki.
oferujemy
iednikiem
skim odpow hamburgerw
a
ri
ta
e
g
e
w
- Tofu jest h da misnych oprcz
wszystkic
oraz jaj.
i menu
ry przywrc
t
k
,
u
k
is
c
y
my prz
- Potrzebujewyjciowego.
do stanu
ikonk
my te mie
y
b
li
ie
c
h
c
obok da
i da, to
P.S. Jeli stra by si wywietlaaniki.
z liciem, kegetariaskie odpowied
majcych w
wysa
strony, aby
ta
n
ta
k
je
ro
ia
p
Poprosiam cym menu, eby m
ie
b
z
i
k
Ci pli
cz.
od czego za
Zanim zaczniemy pisa w jQuery, spjrzmy na pliki HTML i CSS,

jakie przysa nam projektant, i sprawdmy, czy ich styl i struktura
bd dla nas przydatne.
Tym razem nie bdzie wiczenia

(chocia ju pewnie nad nim
mylisz), niemniej jednak zapisz
wasnymi sowami, jakie s
wymagania projektu, dziki czemu
bdziesz wiedzie, nad czym
zaczynamy pracowa.
jeste tutaj
161
zbuduj swoje drzewo DOM
Magnesiki z drzewem DOM

Zapoznaj si z aktualn struktur internetowego menu, tworzc jego
diagram w taki sposb, w jaki widzi go drzewo DOM. Poniej znajdziesz
wszystkie magnesiki potrzebne do skompletowania drzewa. Korzystajc
z fragmentu menu w HTML-u widocznego po prawej stronie, ukocz
drzewo. Miejsce dla kadego z magnesikw zostao oznaczone kkiem.
Kilka z nich rozmiecilimy za Ciebie.
1
div class=
"=
div class=

"

li
li
li
?U
li

!!
"
!
li
162
li
li
Rozdzia 4.
li
li
li

!!
"
!
li
li

!!
"
!
li

!!
" !
li
li
To jest tylko fragment

rzeczywistej strony
w HTML-u.
<body>
<div id="menu_wrapper">
<div class="left_col">
%G3383?FK%G
<ul class="menu_entrees">
<li>Halibut po tajsku
<ul class="menu_list">
<li>mleczko kokosowe</li>
&G3%3&89K&G
<li>wczesnojesienne warzywa</li>
<li>przyprawy tajskie</li>
</ul>
</li>
<li>Domowe grillowane panini
<li>prosciutto</li>
<li>provolone</li>
<li>avocado</li>
<li>pieczywo na zakwasie</li>
</ul>
</li>
&G 389JR3
<li>papryczki chili</li>
<li>hamburger</li>
&G#R3IJ K&G
<li>pieczywo wieloziarniste</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
index.html
jeste tutaj 163
magnesiki z drzewem dom rozwizanie
Magnesiki z drzewem DOM rozwizanie

Wyglda na to, e wszystkie skadniki potraw zostay skonfigurowane
jako potomne elementy nadrzdnej listy z daniami gwnymi. Nie s one
oznaczone zbyt czytelnie ani jednoznacznie, prawda?
Na szczcie dla nas

menu internetowe ma
spjn struktur.
1
div class=
"=
nia
echowywa
W celu prz menu uyto
elementwumerowanej.
listy nien
div class=

"

listy...
t pozycj
menu jes
w
e
n
w
ie g
Kade dan
li
li
li
li

!!
"
!
li
skadnikw
wiera list
...ktra za list) w postaci wanych
(ul.menu_ nych i nienumero
zagniedo.
elementw

!!
" !
?U

!!
"
!

!!
"
!
li
li
li
li
li
li
li
li
li
Kady skadnik wszystkich da

gwnych jest elementem listy.
Potrzebujemy napisa selektory szukajce

skad
ktre musimy zmieni. Na tym poziomie kady nikw,
z nich
jest elementem listy...
...jak wic moemy odrni

skadniki, ktre chcemy
zmieni, od pozostaych?
164
Rozdzia 4.
li
<body>
<div id="menu_wrapper">
<div class="left_col">
%G3383?FK%G
<ul class="menu_entrees">
<li>mleczko kokosowe</li>
&G3%3&89K&G
<li>wczesnojesienne warzywa</li>
<li>przyprawy tajskie</li>
</ul>
</li>
<li>prosciutto</li>
<li>provolone</li>
<li>avocado</li>
<li>pieczywo na zakwasie</li>
</ul>
</li>
&G 389JR3
<li>papryczki chili</li>
<li>hamburger</li>
&G#R3IJ K&G
<li>pieczywo wieloziarniste</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
To jest tylko
fragment
rzeczywistej
strony
w HTML-u.
index.html
WYSIL
SZARE KOMRKI
Regularna struktura strony (kodu HTML) znacznie uatwia pisanie kodu w jQuery, ale skadniki
potraw, ktre chcemy odszuka, nie s oznakowane w sposb mogcy uproci opracowanie
kodu. Co moemy zrobi, eby nasze elementy byy atwiejsze do wybierania?
jeste tutaj 165
wspominae, e masz klas...
Poklasyfikuj swoje elementy

Jak ju widzielimy w kadym z dotychczasowych rozdziaw, moemy pomc jQuery w szukaniu elementw
na stronach internetowych z wiksz skutecznoci, prawidowo konfigurujc pliki HTML i CSS. Aby nasza
struktura dziaaa naprawd piewajco, powinnimy doda do naszego arkusza stylw klasy oraz identyfikatory,
natomiast atrybuty elementw HTML skonfigurowa wanie za pomoc tych klas i identyfikatorw. Uproci to
wybieranie elementw, a na pniejszym etapie pozwoli zaoszczdzi czas przeznaczony na kodowanie.
W jQuery rola selektorw nie sprowadza si wycznie do kontrolowania wygldu i dziaania strony. Selektory
pozwalaj take na zestawianie elementw na stronie.
Moesz napisa selektor dla kadego ze
skadnikw, ktre trzeba zestawi razem...
<li>kurczak</li>
<li>jajka</li>
&GJ#3R3L&L3K&G
<li>indyk</li>
...albo pogrupowa elementy

w klasy i napisa jeden
selektor, ktry je zestawi.
<li
!! >kurczak</li>
Kiedy kademu elementowi

listy nadasz atrybut klasy,
umiecisz go w grupie
zawierajcej miso.
<li
!! >indyk</li>
<li
!! GJ#3R3L&L3K&G
#
Jakim cudem
trafilimy do
tej samej grupy
co miso?
Zgoda, meat nie jest

waciw klasyfikacj dla
wszystkich tych skadnikw,
ale stanowi mi i krtk
nazw dla naszej klasy.
<li
!! >jajka</li>
166
Rozdzia 4.
wiczenie
Odszukaj w menu pozycje, ktre bd mie wegetariaskie odpowiedniki, i oznacz je odpowiedni klas
(fish dla ryby, meat dla misa albo hamburger dla hamburgera). Jeli skadnik nie wymaga klasy, pozostaw
puste pole. Kod HTML zosta rozmieszczony w taki sam sposb, w jaki pozycje menu pojawi si na stronie.
<li
>mleczko kokosowe</li>
&G3%3&89K&G
&G89&Z 3FL FSK&G
<li
>wczesnojesienne warzywa </li>
<li
>przyprawy tajskie</li>
</ul>
</li>
&GV Z3RZ 9Z9
&GJ#3R3L&L3K&G
<li
>cebulki cippolini</li>
<li
>marchew</li>
&GJ?3 Z#3K&G
<li
>sos pieczeniowy</li>
</ul>
</li>
<li
>szynka prosciutto</li>
<li
>ser provolone</li>
<li
>avocado</li>
<li
>pomidory koktailowe</li>
<li
>pieczywo na zakwasie</li>
<li
>frytki</li>
</ul>
</li>
&G9JR3?F3
&G3 F383RJ33K&G
<li
>cukinia</li>
<li
>hamburger</li>
<li
>ocet balsamiczny</li>
<li
>cebula</li>
<li
>marchew</li>
<li
>pieczywo wieloziarniste</li>
<li
>ser kozi</li>
</ul>
</li>
<li>Frittata
<li
>jajka</li>
<li
>ser asiago</li>
<li
>ziemniaki</li>
</ul>
</li>
<li>Zupa kokosowa
<li
<li
>kurczak</li>
<li
>bulion warzywny</li>
</ul>
</li>
<li>Zupa du jour
<li
>grillowany stek</li>
<li
>grzyby</li>
<li
>warzywa sezonowe</li>
<li
</ul>
</li>
&G9#3 RF3X3
<li class="meat" >pieczona wieprzowina</li>
<li
>marchew</li>
&GW Z8L%RK&G
<li
>chili</li>
<li
</ul>
</li>
&G9JLZRZ3@L3?
<li
>avocado</li>
<li
>papryczki chili</li>
&GJ?R3LZ F3#3# R3K&G
<li
>sos imbirowy</li>
</ul>
</li>
jeste tutaj 167
rozwizanie wiczenia
Odszukaj w menu pozycje, ktre bd mie wegetariaskie odpowiedniki, i oznacz je odpowiedni

klas (fish dla ryby, meat dla misa albo hamburger dla hamburgera). Jeli skadnik nie wymaga
Rozwizanie
klasy, pozostaw puste pole.
wiczenia
<li
class=fish"
&G3%3&89K&G
&G89&Z 3FL FSK&G
&GFLZSF3 ZF3K&G
&G# Z# 3F3SRK&G
</ul>
</li>
&GV Z3RZ 9Z9
class=meat"
&GJ#3R3L&L3K&G
<li
>cebulki cippolini</li>
<li
>marchew</li>
&GJ?3 Z#3K&G
&G#LZFK&G
</ul>
</li>
class=meat"
&GZR3# L9K&G
<li
>ser provolone</li>
&G3@L3?K&G
&G#? RR3&FK&G
&G#LZF3Z3RF3K&G
&G RK&G
</ul>
</li>
&G9JR3?F3
&G3 F383RJ33K&G
<li
>cukinia</li>
<liclass=hamburger">hamburger</li>
&GL83&3LZK&G
<li
>cebula</li>
<li
>marchew</li>
&G#LZFF&Z3 K&G
<li
>ser kozi</li>
</ul>
</li>
168
Rozdzia 4.
<li>Frittata
<li class=meat"
>jajka</li>
<li
>ser asiago</li>
<li
>ziemniaki</li>
</ul>
</li>
<li>Zupa kokosowa
<li
<li class=meat"
>kurczak</li>
&G89&F3 ZFK&G
</ul>
</li>
&G9#3?9S9
class=meat"
&GW &&F3RK&G
&GW Z8K&G
&GF3 ZF3ZFK&G
&G89&F3 ZFK&G
</ul>
</li>
&G9#3 RF3X3
<li class=meat" >pieczona wieprzowina</li>
<li
>marchew</li>
&GW Z8L%RK&G
<li
>chili</li>
&G89&F3 ZFK&G
</ul>
</li>
&G9JLZRZ3@L3?
&G3@L3?K&G
&G#3# LZRL%&K&G
&GJ?R3LZ F3#3# R3K&G
&G8 FK&G
</ul>
</li>
Pora na przyciski
Teraz, kiedy wikszo rzeczy jest ju skonfigurowana, powrmy do serwetki, na ktrej szef
kuchni zapisa swoje wymogi. Nastpne, co musimy zrobi, to utworzenie dwch przyciskw.
n, ktry automatycznie zaproponuje
- Chcemy mie przycisk Dla wegetaria
w naszym internetowym menu.
waciwy odpowiednik wegetariaski
- Potrzebujemy drugiego przycisku, ktry przywrci
menu do stanu
wyjciowego.
Zaostrz owek
Zaktualizuj struktur oraz skrypt, aby uzyska dwa przyciski opisane na serwetce. Nadaj przyciskowi
Dla wegetarian identyfikator vegOn, a przyciskowi Przywr menu identyfikator restoreMe.
<div class="topper">
<h2>Nasze menu</h2>
<ul>
<li class="nav">
</li>
<li class="nav">
</li>
</ul>
</div>
index.html
var v = false;
if (v == false){
v = true;}
});// koniec button
if (v == true){
v = false;}
});// koniec button
});// koniec document ready
my_scripts.js
jeste tutaj 169
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Zaktualizuj struktur oraz skrypt, aby uzyska dwa przyciski opisane na serwetce.
Nadaj przyciskowi Dla wegetarian identyfikator vegOn, a przyciskowi Przywr menu
identyfikator restoreMe.
<div class="topper">
<h2>Nasze menu</h2>
<ul>
<li class="nav"> <button id="vegOn">Dla wegetarian</button>
</li>
<li class="nav"> <button id="restoreMe">Przywr menu</button>
</li>
</ul>
</div>
Elementy tworzce przyciski

o identyfikatorach vegOn
i restoreMe
index.html
var v = false;
$("button#vegOn").click(function(){
Dokadniejszy
selektor korzystajcy
z typu elementu oraz
identyfikatora
if (v == false){
v = true;}
Przypisz metod click

do przyciskw.
});// koniec button

$("button#restoreMe").click(function(){
if (v == true){
v = false;}
});// koniec button
});// koniec document ready
my_scripts.js
170
Rozdzia 4.
Co teraz?
Szybko nam poszo! Mamy ju skonfigurowane dwa przyciski. Wykrelmy je z serwetki
i przejdmy do tego, co powinien robi przycisk Dla wegetarian.
n, ktry automatycznie zaproponuje

- Chcemy mie przycisk Dla wegetaria
w naszym internetowym menu.
waciwy odpowiednik wegetariaski
- Potrzebujemy drugiego przycisku, ktry przywrci
menu do stanu
wyjciowego.
riaskich:
nie odpowiednikw wegeta
Oto, jak dziaa proponowa
h, tak wic
ikw dla naszych da rybnyc
- Nie oferujemy odpowiedn
trzeba je usun.
rujemy gigantyczne
owiednik hamburgerw ofe
- Jako wegetariaski odp
pieczarki.
kich da misnych
m odpowiednikiem wszyst
- Tofu jest wegetariaski
jaj.
oprcz hamburgerw oraz
Opisz wasnymi sowami trzy rzeczy, ktre powinien robi przycisk Dla wegetarian.
wiczenie
1.
2.
3.
jeste tutaj
171
rozwizanie wiczenia
Opisz wasnymi sowami trzy rzeczy, ktre powinien robi przycisk Dla wegetarian.
Rozwizanie 1.
wiczenia
2.
3.
Odszukaj elementy li klasy fish i usu te posiki z menu.

Odszukaj elementy li klasy hamburger i zastp je pieczarkami.
Odszukaj elementy li klasy meat i zastp je tofu.
Nie przejmuj si, jeli Twoje odpo

byy troch inne. Tumaczenie wymwiedzi
na zadania, ktre maj by wyko aga
nywane
przez aplikacj internetow, wym
aga
praktyki.
Nasze nastpne zadanie polega na uporaniu si z pozycj nr 1 powyej: odszukaniu

elementw li o klasie fish i usuniciu ich z menu. W rozdziale 2. szukalimy
ju elementw za pomoc selektorw klas i korzystalimy z metody remove, aby
zdejmowa elementy z drzewa DOM.
jQuery udostpnia te metod detach. Obie te metody zdejmuj elementy z drzewa
DOM, jaka jest wic midzy nimi rnica i ktrej z nich powinnimy uy?
remove
Potrzebujesz pozby
si czego z drzewa
DOM na dobre?
div id="top"
div class=
"1;
div class=
"1;
Metoda remove usuwa element

z drzewa DOM.
$("img#thumbnail").remove();
Rozdzia 4.
Zabieram rzeczy
z drzewa DOM i przechowuj
je dla Ciebie.
div id="top"
?1

172
detach
Twj
element
?1

Metoda detach zdejmuje wybrane

ale je zachowuje, dziki czemu elementy z drzewa DOM,
mona je pniej przywrci.
$("img#thumbnail").detach();
Zaostrz owek
W udostpnione miejsca wpisz selektor oraz kod dla metody remove
albo detach, ktry utworzy wynik pokazany z lewej strony.
Wynik w drzewie DOM
Instrukcja w jQuery
div id="top"
div class=
"1;
=!"!

!!
" !
li

!!
"
!
li class=
"fish"
li
li
li
jeste tutaj 173
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Kiedy dla danego
elementu wywoasz
metod remove
albo detach,
zostan usunite
take wszystkie
jego elementy
potomne.
W udostpnione miejsca wpisz selektor oraz kod dla metody remove albo
detach, ktry utworzy wynik pokazany z lewej strony.
Wynik w drzewie DOM
Instrukcja w jQuery
div id="top"
$("div#top").remove()
div class=
"1;
p, p
=!"!
Pamitaj,
e wszystkie
elementy
wskazane
selektorem
zostan
odczone.

$("div p").detach()

!!
" !
li
li
Moesz precyzyjniej
powybiera elementy,
grupujc je wedug klas
albo identyfikatorw.
li class=
"fish"
174
Rozdzia 4.

!!
"
!
li
$("li.fish").detach()
li
li
Jazda prbna
W pliku my_scripts.js dodaj do funkcji obsugujcej kliknicie przycisku vegOn wiersz
kodu z trzeciego rozwizania zadania Zaostrz owek. Nastpnie otwrz stron
w swojej ulubionej przegldarce, aby upewni si, e wszystko dziaa.
Usunlimy to...
...a powinnimy
usun cay
posiek.
Przed wywoaniem
metody $("li.fish").
detach().
Po wywoaniu metody
$("li.fish").detach()
wszystkie elementy
klasy fish znikny.
Metoda detach z ca pewnoci usuwa elementy, ale nie znikno wszystko, co chcielimy.
Usunlimy z listy posikw tylko gwne pozycje, chocia powinnimy si pozby caego
dania, wewntrz ktrego zagniedona jest lista zawierajca elementy klasy .fish.
Jak rozkaza drzewu DOM, aby odczyo cay posiek?
jeste tutaj 175
wygupy wcale nie s takie ze
Biegamy po gaziach drzewa DOM

W rozdziale 1. nauczylimy si, e DOM jest zbudowany jak drzewo. Ma korze, gazie oraz wzy.
Interpreter JavaScriptu w przegldarce moe przemierza drzewo DOM (oraz nim manipulowa),
a szczeglnie dobry jest w tym jQuery. Przemierzanie drzewa DOM oznacza po prostu przemieszczanie
si po nim w gr i w d oraz w poprzek.
Drzewem DOM manipulujemy ju od rozdziau 1. Metoda detach, ktrej si przed chwil przyjrzelimy,
jest przykadem takiej manipulacji (dynamicznie usunlimy elementy z drzewa DOM).
Ale na czym tak naprawd polega to przechodzenie? Wemy jedn z sekcji menu i przedstawmy j jako
drzewo DOM, aby zobaczy, jak odbywa si jego przemierzanie.
Za sprzt wspinaczkowy! Przemierzanie
drzewa DOM polega na wspinaniu
si w gr, schodzeniu w d oraz
przechodzeniu go w poprzek.
Aby wspi si
w gr drzewa
DOM, moemy
uy metody
jQuery parent.
li
li
li
li

!!
"
!
li class=
"fish"
Aby zej w d drzew

DOM, moemy uy a
metody jQuery childre
n.

!!
" !

!!
"
!

!!
"
!
li
li
li
li
li
li
li
Aby przej w poprze

k
moemy uy metod jQudrzewa DOM,
ery prev i next.
Wspinaczka po drzewie
DOM. No dobra, ale dokadnie
to jak takie przechodzenie
drzewa pomoe mi
w odczaniu posikw.
Metody zwizane z przechodzeniem
pozwalaj na wybranie elementu, a nastpnie
uchwycenie elementu znajdujcego si
powyej, poniej albo obok niego.
Przyjrzyjmy si bliej temu, jak mona apa elementy.
176
Rozdzia 4.
li
li
li
Wspinaczkowe metody przechodzenia drzewa

Aby powiedzie drzewu DOM, e chcemy odczy wszystkie posiki, ktrych skadnikiem jest ryba, musimy odnie
si do elementw zgodnie z czcymi je relacjami. Wspinaczkowe metody jQuery pozwalaj nam na wykonywanie
pewnych dziaa w zalenoci od tych relacji.
Wybierz wszystkie
elementy w klasie fis
h.
Nastpnie we element
znajdujcy si powyej
tych elementw.
Nastpnie we elementy
znajdujce si poniej
tych elementw.
Wybierz wszystkie ele

w klasie menu_list. menty
$(".menu_list")# ?
*+
$(".fish")# *+

!!
"
!

!!
"
!
To jest rodzic
elementu li.fish.
li class=
"fish"
li
li
li class=
"fish"
li
To s elementy potomne
elementu klasy ul.menu_list
Wybierz wszystkie
h.
Nastpnie we element
ssiedni znajdujcy si
bezporednio z lewej strony.

!!
"
!
li class=
"fish"
Nastpnie we element ssiedni

znajdujcy si bezporednio
z prawej strony.
$(".fish")# ;*+
$(".fish")# *+
li
Wybierz wszystkie
h.

!!
"
!
To jest rodzic
elementu
li.fish.
li
li
li
li class=
"fish"
li
li
WYSIL
SZARE KOMRKI
Ktre z tych metod mog nam pomc w usuniciu z menu
posikw zawierajcych elementy klasy fish?
jeste tutaj 177
tutaj nie ma sabych ogniw!
Metody acuchowe aby siga jeszcze dalej

Ale co powinnimy zrobi, gdybymy chcieli uda si jeszcze wyej, niej
albo gbiej? Pospina acuchy! jQuery umoliwia spinanie metod. Ich
acuchy pozwalaj nam efektywniej manipulowa stronami i skuteczniej
Aby przej o jednego
si po nich porusza. Oto, jak co takiego dziaa:
$(".fish").parent()# *+

nas tutaj.
rodzica wyej, dodaj po

prostu kolejn metod
do acucha metod.
To jest rodzic rodzica

elementu li.fish.
li

!!
"
!
Pierwsza metoda

doprowadzi nas tutaj.
To jest rodzic
elementu li.fish.
li class=
"fish"
wia.
Metody moesz take miesza i zesta
$(".menu_list")# *+# ;*+# *+

2
178
Metoda parent
doprowadzi nas do
elementu, ktry
obejmuje wybrany
element lub
elementy.
Rozdzia 4.
Metoda next
przeniesie nas do

z prawej strony.

!!
" !
li
li

!!
"
!
Metoda remove
usunie z drzewa DOM

wiczenie
Przejd na stron http://online.helion.pl/jquerg/r04/traversal/ i otwrz konsol JavaScriptu

w narzdziach deweloperskich swojej ulubionej przegldarki narzdzia deweloperskie
przegldarek omwiono w kolumnie Przeczytaj mnie znajdujcej si na pocztku ksiki.
Wyprbuj nastpujce sposoby przechodzenia przez drzewo z doczonymi do nich metodami
detach, tak jak to pokazano poniej. Nastpnie napisz, dlaczego sposb ten moe albo
i nie pomc nam w rozwizaniu problemu, ktrym si zajmujemy.
Wane: Nie zapomnij po wywoaniu kadej instrukcji odwiey przegldark.
$(".menu_entrees").children().detach()
$(".menu_list").children().detach()
$(".fish").parent().detach()
$(".fish").parent().parent().detach()
jeste tutaj 179
rozwizanie wiczenia
Przejd na stron http://online.helion.pl/jquerg/r04/traversal/ i otwrz konsol JavaScriptu w narzdziach
Rozwizanie deweloperskich swojej ulubionej przegldarki. Nie pamitasz, jak z nich korzysta? Wr do kolumny
Przeczytaj mnie znajdujcej si na pocztku ksiki. Wyprbuj nastpujce sposoby przechodzenia przez
wiczenia
drzewo z doczonymi do nich metodami detach, tak jak to pokazano poniej. Nastpnie napisz, dlaczego
sposb ten moe albo i nie pomc nam w rozwizaniu problemu, ktrym si zajmujemy.
Wane: Nie zapomnij po wywoaniu kadej instrukcji odwiey przegldark.
$(".menu_entrees").children().detach()
Ta metoda przechodzenia przez drzewo odcza element potomny klasy menu_entrees. Nie nadaje
si ona do usunicia potraw zawierajcych ryb, poniewa usuwa WSZYSTKIE posiki z listy.
A niech to! Nie o to nam chodzio.
Do diaska!
Odczylimy
wszystkie posiki.
$(".menu_list").children().detach()
Ta metoda przechodzenia przez drzewo odcza elementy potomne klasy menu_list. Nie nadaje
si ona do usunicia potraw zawierajcych ryb, poniewa usuwa list skadnikw z kadego
elementu ul.menu_list. Ups! Z ca pewnoci nie tego chcielimy.
Usunlimy listy
skadnikw z kadego
posiku.
180
Rozdzia 4.
$(".fish").parent().detach()
Ta metoda przechodzenia przez drzewo odcza element nadrzdny klasy .fish. Nie nadaje si ona
do usunicia potraw zawierajcych ryb, poniewa nie siga wystarczajco wysoko w drzewie
DOM. Zamiast tego usuwa ona element ul.menu_list (i wszystko, co jest poniej).
Usunlimy listy skadn

potraw, ale ju nie samikw
e
potrawy.
$(".fish").parent().parent().detach()
Ta metoda przechodzenia przez drzewo odcza rodzica elementu nadrzdnego
klasy .fish. Robi wanie to, czego potrzebujemy.
o trzeba.
Wanie tego nam by .
ky
zni
i
am
ryb
z
Posiki
jeste tutaj
181
gdzie si podziay tamte elementy?

Momencik. A czy nie powinnimy
przywrci posikw rybnych, kiedy
bdziemy programowa przycisk
Przywr menu?
Zgadza si. Nie moemy po prostu odczy da

rybnych i o nich zapomnie.
Bdziemy musieli troch przemyle nasz kod, aby dziaa tak,
jak tego chcemy.
$(".fish").parent().par
ent
usuwa z drzewa eleme ().detach()
nty listy
zawierajce ryb.

!!
" !
li

!!
"
!
li class=
"fish"
li
li
li
li
SZARE KOMRKI
li class=
"fish"
Bdziemy musieli przywrci dania rybne. Co powinnimy

zawczasu z nimi zrobi?
Rozdzia 4.

!!
"
!

!!
"
!
WYSIL
182
li
li
li
li
li
li class=
"fish"
Moemy wyciga nas

elementy z drzewa DOze
korzystajc z metody M,
ale co z odzyskiwanie detach,
m
kiedy bd nam potrze ich,
bne?
li
li
Zaostrz owek
Poznalimy ju do tej pory troch konstrukcji w jQuery i JavaScripcie. Ktrych z nich bdziemy
potrzebowa, aby nie zapomnie o elementach klasy .fish? Napisz Tak albo Nie
w kolumnie Czy skorzystamy? i wyjanij, dlaczego wybrae to rozwizanie albo dlaczego
go nie wybrae. Jeden z elementw ju opisalimy za Ciebie, pozostay wic tylko trzy.
Terminator
Czy skorzystamy?
Dlaczego?
Nie
Terminator po prostu koczy polecenie. Nie rozwie on problemu zapamitania

odczonych elementw.
Zmienna
Funkcja
Selektor
jeste tutaj 183
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Poznalimy ju do tej pory troch konstrukcji w jQuery i JavaScripcie. Ktrych z nich
bdziemy potrzebowa, aby nie zapomnie o elementach klasy .fish? Napisz Tak albo
Nie w kolumnie Czy skorzystamy? i wyjanij, dlaczego wybrae to rozwizanie albo
dlaczego go nie wybrae. Oto nasze odpowiedzi:
Czy skorzystamy?
Dlaczego?
Terminator
Nie
Terminator po prostu koczy polecenie. Nie rozwie on problemu zapamitania

odczonych elementw.
Zmienna
Tak
Zmienna przechowuje dla nas rne rzeczy. Jeli zachowamy w niej odczony
element, bdziemy mogli go pniej odzyska, odwoujc si po prostu do tej
zmiennej.
Funkcja
Nie
Funkcja umoliwia manipulowanie danymi. Problem odczonych elementw

polega na pamitaniu danych, a nie na manipulowaniu nimi.
Selektor
Nie
Selektor wybiera elementy, bazujc na tym, co znajduje si w drzewie DOM.

Nasze elementy ju wybralimy. Potrzebujemy za to sposobu, aby je
przechowa.
Nie istniej
gupie pytania
P: Rozumiem metody remove
P: A co, jeli zechc dosta element
O: Aby pozby si zawartoci elementu,
Moesz skorzysta z metody

closest. Podobnie jak metoda parents,
closest przejdzie przez elementy
nadrzdne wybranego elementu, ale
zatrzyma si po znalezieniu dopasowania.
Jeli na przykad chcesz znale najbliszy
element ul powyej pewnego elementu
listy, uyj nastpujcego polecenia:
$("li").closest("ul")
i detach, ale co mam zrobi, jeli chc

pozby si tylko czego ze rodka
elementu, a nie samego elementu?
moesz uy metody empty. Powiedzmy,

e chcesz skasowa ca zawarto
akapitw na stronie. Zrb po prostu co
takiego: $("p").empty();
P: Czy istnieje sposb na przejcie
przez wszystkie elementy nadrzdne

wybranego elementu?
O: Tak. Oprcz metody parent jQuery
oferuje te metod parents, ktra

umoliwia przejcie przez wszystkie
elementy nadrzdne wybranego elementu.
Zobaczysz t metod w dziaaniu
w dalszej czci biecego rozdziau.
184
Rozdzia 4.
nadrzdny znajdujcy si najbliej

wybranego elementu?
O:
P: Znam ju metody next i prev, ale

co zrobi, jeeli bd chcia przej
przez wszystkie elementy na tym
samym poziomie drzewa DOM?
O:
Na szczcie ludzie od jQuery

pomyleli take i o tym. Metoda
siblings przejdzie przez wszystkie
elementy znajdujce si na tym samym
poziomie co wybrany element.
P: Czy Google Chrome ma
wbudowan bibliotek jQuery?
O:
Nie. Kod korzystajcy z biblioteki

jQuery moemy uruchamia
w narzdziach deweloperskich tej
przegldarki, poniewa doczylimy j
do strony HTML. Jeli odwiedzisz stron
WWW, ktra nie korzysta z jQuery, nie
oczekuj, e bdziesz mg uruchomi
instrukcje pochodzce z tej biblioteki
w konsoli JavaScriptu przegldarki
Google Chrome.
Zmienne mog przechowywa te elementy

Zmienne s chyba bardzo przydatne, poniewa okazuje si, e znowu ich potrzebujemy.
Mielimy z nimi do czynienia w pierwszych trzech rozdziaach, ale korzystalimy z nich
tylko w celu przechowywania liczb i acuchw tekstowych. Czy nie byoby wygodnie, gdyby
zmienne JavaScriptu mogy przechowywa te nasze elementy? Ot okazuje si, e mog.
1

$(".fish").parent().parent().detach();
Kod jQuery
Za kulisami
!

""
!#
interpreter JavaScriptu prosi

drzewo DOM o wybrane elementy.
Hej, DOM-ie, zwr mi

wszystkich rodzicw
elementw na stronie, ktrych
atrybut klasy to fish.
Wersja DOM
strony
Prosz bardzo.
li
Interpreter
JavaScript
li class=
"fish"
li
li
li

!!
"
!

!!
"
!
li
Drzewo DOM bierze wybrane

elementy i przekazuje je
interpreterowi.
li
li
li class=
"fish"
li

!!
"
!
li
li
li class=
"fish"
li
li
Przegldarka bdzie tymczasowo przechowywa te elementy

w pamici. Jeli zechcemy je zachowa w naszym programie do
pniejszego uycia, dobrym pomysem bdzie umieszczenie ich
w zmiennych. Jak to jednak zrobi?
jeste tutaj 185
specjalni $przyjaciele
I znowu ten dolar...

Przechowywanie elementw jest atwe. Tworzymy zmienn, tak jak to ju robilimy dla
liczb i acuchw tekstowych, po czym wstawiamy j (za pomoc znaku rwnoci) do
zwracajcej elementy instrukcji. Czy nie byoby jednak dobrze wiedzie, e zmienna
przechowuje co specjalnego takiego jak elementy (w odrnieniu od liczb i tekstw)?
Powszechnie przyjt wrd programistw jQuery praktyk jest umieszczanie przed nazw
zmiennej, ktra bdzie uywana do przechowywania elementw zwracanych przez jQuery,
znaku dolara. Dziki temu kady, kto zajrzy do naszego kodu, bdzie wiedzie, e zmiennej
uywamy do pamitania rzeczy uzyskanych od jQuery.
$f = $(".fish").parent().parent().detach();
Umieszczenie znaku dolara przed zmienn
wskazuje, e przechowuje ona elementy
zwrcone przez jQuery.
li

!!
"
!
$f
li class=
"fish"
li
li
li
Zmienne, z ktrych
korzystalimy do tej pory,
przechowyway po jednej
wartoci. Wpychanie tych
wszystkich elementw do
jednego pojemnika wyglda
mi na baaganiarstwo.

!!
"
!
li
li
Bo przechowywanie
rnych elementw
w jednej zmiennej jest
baaganiarstwem.
I to wanie dlatego w jQuery
elementy przechowuje si
w tablicach. Zobaczmy wic,
o co chodzi z tymi tablicami.
186
Rozdzia 4.
li
li class=
"fish"

!!
"
!
li
li class=
"fish"
li
li
li
li
Poszerz swoje moliwoci przechowywania o tablice

Za kadym razem, kiedy wybieramy elementy z drzewa DOM i umieszczamy
je w zmiennej, jQuery zwraca dane pod postaci tablicy. Tablica to po prostu
zmienna o wikszych moliwociach przechowywania.
Zwyka zmienna przechowuje

jedn warto.
Tablica przechowuje wiele wartoci.

Tablica
Zmienna
42
Przechowywana warto
Nazwa
zmiennej
tablica
Jeli caa i $a, kada
s
a
w
zy
na
dka nosi
jej przegr[n], gdzie n
a
$
m,
nazw
ym numere
jest kolejn0.
liczc od
4 8
$a[0]
$a[1]
15 16 23 42
$a[2]
$a[3]
$a[4]
$a[5]
Sama tablica jest po

prostu struktur danych,
ktra moe przechowywa
wiele zmiennych (tak jak
ta podstawka na probwki
trzyma wiele probwek).
v
Do kadej przegrdki moemy wkada rne rzeczy i je z niej
wyjmowa. Aby w trzeciej przegrdce umieci warto 15,
napiszemy co takiego:
$a
Porady maniaka
$a[2] = 15;
Trzecia przegrdka ma numer
2, poniewa numeracj
zaczynamy od 0.
Tablice nie musz zaczyna si od znaku dolara

($). Praktyka oznaczania tablic w jQuery tym
znakiem jest konwencj kodowania przyjt
przez programistw.
jeste tutaj 187
jak schludnie!
Przechowuj elementy w tablicy

Kiedy wybieramy i odczamy elementy li oraz przypisujemy je do zmiennej ($f),
jQuery bierze elementy, ktre zwrcio drzewo DOM, i starannie umieszcza je dla
nas w tablicy jzyka JavaScript. Gdy zechcemy przywrci te elementy za pomoc
przycisku na stronie, nasze zadanie bdzie o wiele mniej skomplikowane.
$f = $(".fish").parent().parent().detach();
li class=
"fish"
li
li
li

!!
"
!

!!
"
!

!!
"
!
li
li
li
Kady z odczonych
elementw elegancko
wpada do swojej
przegrdki w tablicy $f.
li class=
"fish"
li
$f[0]
$f[1]
li class=
"fish"
li
li
li
$f[2]
jnie
o
ok
Sp
$f
Rozdzia 4.
li
Pamitaj: w kadym
elemencie nadal znajduje
si jego zawarto.
W atwy sposb moemy
wszystko przywrci na
stron.
jQuery bierze elementy

przekazywane przez
drzewo DOM i elegancko
umieszcza je w tablicy.
188
li
Z tablicami
mona robi
o wiele wicej.
Teraz jednak
nie musisz
si tym specjalnie przejmowa.
Tablice poznamy o wiele bardziej
szczegowo w rozdziale 6.
Jazda prbna
W pliku my_scripts.js dodaj do funkcji obsugujcej kliknicie przycisku vegOn wiersz kodu
z poprzedniej strony, ktry odczy rodzicw rodzicw elementw #fish. Nastpnie otwrz
stron w swojej ulubionej przegldarce, aby upewni si, e wszystko dziaa.
Wanie o to nam
chodzio. Dania rybne
zostay odczone.
Udao si! Zaktualizujmy nasz list.

1.
2.
3.
Teraz powiniene odszuka wszystkie potrawy z hamburgerami i zastpi

hamburgery pieczarkami.
WYSIL
SZARE KOMRKI
Wiemy ju, jak wyjmowa elementy z drzewa DOM, ale jak dynamicznie
zastpowa zawarto DOM inn zawartoci?
jeste tutaj 189
to zamiast tamtego
Wymieniaj elementy za pomoc replaceWith

Metoda replaceWith umoliwia zastpowanie wybranych elementw nowymi elementami.
Jeli kiedykolwiek bdziesz chcia zmodyfikowa drzewo DOM, podstawiajc jeden element
w miejsce innego, moesz uy tej wanie wygodnej metody jQuery. Powiedzmy, e chciaby
dynamicznie zamieni element nagwka poziomu 2. o treci Nasze menu w nagwek
poziomu 1. o treci Moje menu. Oto, jak moesz to zrobi, korzystajc z replaceWith:
Wybierz wszystkie
elementy h2.
Zastp wybrane elementy...
...tym, co znajduje si
midzy nawiasami.
$("h2")#
Y?("<h1>Moje menu</h1>");
...a w jego
miejsce wo
co innego.
Wyjm
wybrany element
z drzewa DOM...
Interpreter JS znajduje

$

%!

!!
%
%

!

&'

!

1
1
<h1>Moje menu</h1>
?9
190
Rozdzia 4.
?'
Jak moe nam pomc replaceWith?

Potrzebujesz odszuka elementy li klasy hamburger i zastpi je
pieczarkami, czyli elementami klasy portobello. Zastanwmy si
nad tym problemem, zanim zaczniemy pisa kod.

!!
"
!
Po uruchomieniu
kodu ma to
wyglda tak.
To chcemy
zastpi.
li class=
?1
Tak powinna
wyglda strona po
uruchomieniu kodu.

!!
"
!
li class=
"portobello"
Napisz kod, ktry odszuka elementy li klasy hamburger i zastpi je elementami li klasy
portobello. Poniszy diagram powinien Ci w tym pomc. Cz odpowiedzi ju napisalimy;
pozostae nale do Ciebie.
wiczenie

!!
"
!
Kod, ktry
napiszesz tutaj...
...powinien
zrobi to.
$(
).replaceWith(
li class=
?1
<em>pieczarka gigant</em>
);
jeste tutaj
191
rozwizanie wiczenia
Rozwizanie
wiczenia
Napisz kod, ktry odszuka elementy li klasy hamburger i zastpi je elementami li klasy
portobello. Oto nasze rozwizanie:

!!
"
!
li class=
?1
Wybierz wszystkie
elementy klasy
hamburger.
zawarto
Metoda replaceWith dynamicznie zastpuje wybran niejsze,
Najwa
ami.
nawias
midzy
si
jcym
znajdu
tem
elemen
o czym naley pamita, to e midzy nawiasami mona
umieszcza HTML.
$("hamburger").replaceWith( "<li class='portobello'> <em>pieczarka gigant</em> </li>);
Jazda prbna
W pliku my_scripts.js dodaj kod metody replaceWith do funkcji obsugujcej
kliknicie przycisku vegOn. Nastpnie otwrz stron w swojej ulubionej przegldarce
i kliknij przycisk Dla wegetarian, aby sprawdzi, czy wszystko dziaa.
Pieczarka gigant
zastpia hamburgera.
192
Rozdzia 4.
Zastanw si, zanim uyjesz replaceWith

Co pozostao jeszcze na naszej licie?
1.
2.
3.
Musisz odszuka posiki w klasie meat i zastpi je tofu.
To proste! Znowu
uyjemy metody
replaceWith, prawda?
Waciwie to tym razem nie moemy

skorzysta z
Y?.

!!
"
!
li class=

li class=

WYSIL
SZARE KOMRKI
Metoda replaceWith jzyka jQuery jest prosta w uyciu
i uniwersalna, ale niestety nie pomoe nam w rozwizaniu
tego problemu. Dlaczego?
jeste tutaj 193
niezupenie jeden za wszystkich
replaceWith nie sprawdza si w kadej sytuacji

Metoda replaceWith dziaa dobrze, kiedy masz do
czynienia z podstawianiem jeden do jednego, tak
jak podczas zastpowania klasy hamburger klas
portobello.
Zastpowanie jeden do wielu
Podstawianie jeden do jednego
Podstawianie jeden do wielu

Bierzemy elementy
klasy meat i wszystki
je zastpujemy tofu. e
Schemat podmieniania elementw opisany

na naszej licie nie jest jednak zgodny
z zasad jeden do jednego. Musimy zastpi
rne rodzaje skadnikw (na przykad
indyka, jajka, stek, kotlety cielce) jednym
skadnikiem (tofu).
Zastpowanie wiele do wielu

Kiedy z kolei zechcemy pniej zastpi tofu,
pojawi si problem. Gdy bdziemy musieli
przywrci rne rodzaje misa, okae si,
e drzewo DOM o nich zapomniao.
Moglibymy zastpi tofu tylko jednym typem
misa, ale przecie wcale tego nie chcemy.
Musimy wic zrealizowa zastpowanie
pozycji w menu w dwch etapach:
( )

&'
elementy li klasy tofu po

&)

)
!
w zmiennej.
194
Rozdzia 4.
Podstawianie wiele do wielu
Na pniejszym
etapie drzewo
DOM nie pamita
ju o rnych
rodzajach misa.
?
? ?
Wstawienie zawartoci HTML do drzewa DOM

Do tej pory tylko usuwalimy elementy z drzewa DOM albo je zastpowalimy. Na szczcie
dla nas twrcy biblioteki jQuery udostpnili nam te wiele sposobw na wstawianie do
drzewa DOM nowej zawartoci. Przyjrzyjmy si metodom before i after.
before wstawia zawarto przed wybranym elementem.
$(".meat")#1 ("<li>tofu</li>");

!!
"
!
li
li class=

li
li
li
after wstawia zawarto po wybranym elemencie.
$(".meat")# ("<li>tofu</li>");

!!
"
!
li class=

li
Zaostrz owek
Napisz kod jQuery, ktry zrealizuje kady z etapw naszego rozwizania.
Wstaw do drzewa DOM


&

!
!
w zmiennej.
jeste tutaj 195
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
1
Napisz kod jQuery, ktry zrealizuje kady z etapw naszego rozwizania.
Wstaw do drzewa DOM


&

!
!
w zmiennej.
$(".meat").after("<li class=tofu><em>tofu</em></li>");
$m = $(".meat").detach();
Zrealizowae kady z etapw dziaania przycisku Dla wegetarian:

1.
2.
3.
Teraz musimy utworzy przycisk Przywr menu. Oto zadania, ktre bdzie on realizowa:
Przywr w menu potrawy rybne w miejscu, z ktrego zostay usunite
(czyli przed pierwsz pozycj menu w lewej kolumnie).
Odszukaj potrawy zawierajce pieczarki i zastp je hamburgerami.
Odszukaj potrawy zawierajce tofu i zastp je poszczeglnymi
rodzajami mis (we waciwej kolejnoci).
Wemy si od razu do pracy i spjrzmy, co trzeba zrobi w pierwszym punkcie.
Musimy przywrci potrawy
rybne w tym elemencie...
...przed pierwszym
elementem potomnym
(dzieckiem).

!!
"

!! " !

X
G

!!
"
!

Z
=

!!
"
!
Wiemy, jak korzysta z metody before, ale jak dotrze do pierwszego dziecka?
196
Rozdzia 4.

Na szczcie jQuery udostpnia metody filtrujce, ktre pozwalaj nam na zawanie
wyboru w przypadku takich problemw jak znalezienie pierwszego dziecka. Spjrzmy
na sze z nich (trzy na tej stronie i trzy na nastpnej).
first
Metoda first odfiltrowuje

w wybranym zbiorze elementw
wszystko z wyjtkiem pierwszego
elementu.
last
Metoda eq odfiltrowuje
wszystko z wyjtkiem elementw,
ktrych indeks jest rwny wartoci
umieszczonej midzy nawiasami.
Rzumy okiem na jedn pozycj w naszym

menu, aby zobaczy, jak metody te dziaaj.
Metoda last odfiltrowuje

wszystko z wyjtkiem ostatniego
elementu.
li

!!
"
!
Metoda first ogranicza

zbir wybranych
elementw tylko do
pierwszego z nich.
li
li class=

zbir
Metoda last ogranicza tylko
w
nt
me
ele
h
nyc
wybra
do ostatniego z nich.
li
$(".menu_list").children()# !*+;
li
li
$(".menu_list").children()#
!*+;
li

!!
"
!
zbir
Metoda eq ogranicza tylko
w
nt
me
ele
h
nyc
bra
wy
indeks
do elementu, ktrego
iasami.
znajduje si midzy naw
li class=

li
li
li
li
0 1 2 3 4
$(".menu_list").children()# %*:+;
$(".menu_list").children()# %*'+;
$(".menu_list").children()# %*9+;
$(".menu_list").children()# %*6+;
raca
Pamitaj, e jQuery zw licy.
tab
wybrane elementy w amy
Indeks, ktry umieszczsi do
w metodzie eq odnosi .
przegrdki w tej tablicy
$(".menu_list").children()# %*U+;
jeste tutaj 197
zawanie wyboru

Przyjrzyjmy si teraz metodom slice, filter i not oraz ich dziaaniu.
slice
Metoda slice odfiltrowuje wszystko
oprcz elementw o indeksach
zawartych midzy wartociami
umieszczonymi w nawiasach.
filter

Metoda filter odfiltrowuje

wszystko oprcz elementw,
ktre pasuj do selektora
umieszczonego midzy nawiasami.
Metoda not odfiltrowuje wszystko, co

nie pasuje do selektora umieszczonego
midzy nawiasami.

!!
"
!
Metoda slice ogranicza
wybranych elementw zbir
ktre znajduj si mido tych,
indeksami podanymi w dzy
nawiasach.
li class=

li
li
li
li
4
zwrcony
dku zostanie
W tym przypaement drugi element li.
tylko jeden el
$(".menu_list").children()#!
*'Q6+;
Metody filter i not umoliwiaj tworzenie podzbioru wybranego

zbioru na podstawie selektorw bdcych ich argumentami.

!!

zbir
Metoda filter ograniczado
w
nt
me
ele
h
wybranyc
selektor
wskazywanych przez nawiasami.
znajdujcy si midzy
li
$(".menu_list").parents()#
*# +;
komicie sprawdzaj si
Metody filter i not zna i parents i children.
am
w poczeniu z metod
Metoda parents umoliwia nam
uchwycenie wszystkich element
w,
ktre s rodzicami, dziadkami,
pradziadkami itd. wybranego elem
entu.

!!
"
!
li class=
"local"
Rozdzia 4.
li
li
$("ul.menu_list.organic").children()#*#

+;
Metoda not ogranicza zbir wybranych elementw
do takich, ktre nie pasuj do selektora
znajdujcego si midzy nawiasami.
Ktra z tych metod pomoe Ci wskaza pierwsze dziecko w menu?
198
li class=
"local"
Bd drzewem DOM
Twoje zadanie polega na wcieleniu si w drzewo DOM. Narysuj lini
czc instrukcj w jQuery z elementem (lub elementami) w drzewie
DOM, ktre zwrci selektor. Przyjmij, e widoczne elementy
s jedynymi elementami na stronie. Pierwszy element
poczylimy za Ciebie.
1
div class=
"=
!&AL&L%&? %
div class=

"

!9A&#3 &L
?U

!!
" !
$(".menu_list").parents().filter("div");
li
li
li

!!
"
!

!!
"
!

!!
"
!
$("li").first();
li
li
li
li
$(".menu_list li").eq(3);
li
li
li
li
li
li
li
li
$(".menu_list").children().last();
Zaostrz owek
Napisz w jQuery wiersz kodu przywracajcy dania rybne na pozycje menu, z ktrych
zostay one usunite (czyli przed pierwsz pozycj menu poniej menu_entrees).
.before($f);
jeste tutaj 199
bd drzewem DOM rozwizanie
Bd drzewem DOM rozwizanie

Twoje zadanie polega na wcieleniu si w drzewo DOM. Narysuj lini
czc instrukcj w jQuery z elementem (lub elementami) w drzewie
DOM, ktre zwrci selektor. Przyjmij, e widoczne elementy
s jedynymi elementami na stronie. Pierwszy element
poczylimy za Ciebie.
1
div class=
"=
!&AL&L%&? %
div class=

"

!9A&#3 &L
?U

!!
" !
$(".menu_list").parents().filter("div");
li
li
li

!!
"
!

!!
"
!

!!
"
!
$("li").first();
li
li
li
li
li
$(".menu_list li").eq(3);
li
li
li
li
li
li
li
$(".menu_list").children().last();
Zaostrz owek
Rozwizanie
Napisz w jQuery wiersz kodu przywracajcy dania rybne na pozycje menu, z ktrych
zostay one usunite (czyli przed pierwsz pozycj menu poniej menu_entrees).
$(".menu_entrees li").first().before($f);
200
Rozdzia 4.
Przywr hamburgera
Do tej pory zrealizowalimy pierwszy wymg z listy przycisku
Przywr menu. Pozostay jeszcze dwa:
Przywr w menu potrawy rybne w miejscu, z ktrego zostay
usunite (czyli przed pierwsz pozycj menu w lewej kolumnie).
Nasza kolejna pozycja na licie wywouje wraenie dj vu, prawda? Wszystko,
co tak naprawd musimy zrobi, to odwrci nasz pierwsz operacj podmiany.
Dlaczego? Poniewa mamy do czynienia z podstawieniem jeden do jednego,
a my wprost kochamy takie podstawienia, gdy s logicznie proste.
Podstawienie jeden do jednego
Wrcieeeeeeeeeem!
wiczenie
Pamitasz jeszcze to wiczenie? Odwrcimy je. Napisz kod, ktry odszuka elementy li klasy portobello
i zastpi je elementami li klasy hamburger. Poniszy schemat powinien pomc Ci w jego opracowaniu.
Cz zadania rozwizalimy za Ciebie, a Ty zajmij si reszt.

!!
"
!
Kod, ktry
napiszesz tutaj...
...powinien zrobi to.
$(
).replaceWith(
li class=
"portobello"
hamburger
);
jeste tutaj 201
rozwizanie wiczenia
replaceWith przywraca wszystko do dawnej postaci w jednym szybkim ruchu. Dobra robota!
Rozwizanie
wiczenia

!!
"
!
li class=
"portobello"
Wybierz wszystkie
elementy klasy
portobello.
Nastpnie metoda replaceWith dynamicznie podmieni wybran

zawarto elementem znajdujcym si midzy nawiasami.
$(.portobello).replaceWith(<li class=hamburger>hamburger </li>);
A co z misem?
Dotarlimy do ostatniej pozycji na licie przycisku Przywr menu:
Przywr w menu potrawy rybne w miejscu, z ktrego zostay usunite
(czyli przed pierwsz pozycj menu w lewej kolumnie).
Przypomnijmy, co zrobilimy z elementami li.meat.
Umiecilimy elementy li.tofu w drzewie DOM po elementach meat.
$(".meat").after("<li class='tofu'><em>tofu</em></li>");
Nastpnie odczylimy elementy li.meat, ale nie pozbylimy si ich, tylko zachowalimy w zmiennej $m.
$m = $(".meat").detach();
Gdzie wobec tego s te elementy i jak je przywrci?
202
Rozdzia 4.
Treciwa tablica

!!

!!

!!

!!

!!
!

!!

G

Pamitasz zapewne, e kiedy przechowujemy elementy jQuery, stawiamy

przed zmienn, z ktrej korzystamy, znak dolara, aby wskaza, e bdzie ona
specjalnego rodzaju. W tym przypadku bdzie to tablica jQuery, a elementy $m
bd przechowywane nastpujco:
Kady element
li.meat...
...jest przechowywany
w przegrdce...
$m[0]
$m[1]
$m[2]
$m[3]
$m[4]
$m[5]
tablicy $m.
$m
WYSIL
SZARE KOMRKI
Dla wszystkich elementw li.tofu potrzebujesz przywrci element li.meat.
Poznae ju wiele metod umieszczania elementw w drzewie DOM. Z ktrej
z nich skorzystaby w tym przypadku?
jeste tutaj 203
each powraca
Metoda each przeglda tablice

W rozdziale 3. zobaczye, jak naley uywa metody each w celu uzyskania dostpu kolejno
do kadego elementu. Moemy jej uy ponownie take i teraz, aby dosta si po kolei
do wszystkich elementw klasy meat w tablicy $m i umieci je z powrotem tam, gdzie si
znajdoway. Aby to jednak zrobi, musimy troch lepiej pozna dziaanie metody each.
Dla Twoich
elementw metoda
each jest niczym
maszyna na tamie
montaowej.
mita
Indeks (iterator) pa ktrym
numer elementu, z
pracuje funkcja.
Uzyskamy prawdziw moc, kiedy

w kadej przegrdce umiecimy
funkcj. Funkcja, kiedy zostanie
wywoana, pozwala na zrobienie
czego z kadym elementem.
moc
Metoda each daje Ci iwia
ol
Um
.
ery
jQu
skryptw
mentem
ona prac z jednym ele
tablicy naraz.
i = 0
Sowo kluczowe this odnosi

si do elementu, z ktrym
pracuje funkcja.
$m
Metoda each przetwarza
elementy tablicy jeden po drugim
i z kadym z nich co robi.
Kiedy wybierzemy
element akapitu, jQuery
zapisze go w tablicy.
Zmienna i zaczyna si
0 i zlicza kady przetw od
arzany
element.
$(".tofu").each(function(i){
$(this).after( );
$(this) to sposb
poinformowania funkcj
i
o elemencie, ktry jes
t
przetwarzany.
204
Rozdzia 4.
});
Tutaj uylimy metody after, ale cy,
aby pracowa na elementach tabli dy
moesz skorzysta z dowolnej meto
jQuery.
Dla kadego elementu

#
chcemy przywrci element
klasy . Co wic powinnimy
tu napisa?
Magnesiki z kodem
U magnesiki z kodem we waciwej kolejnoci, aby otrzyma ukoczony
i dziaajcy przycisk restoreMe. Kilka magnesikw uoylimy za Ciebie.
if (v == true){
v = false;
});
my_scripts.js
"<li class='hamburger'>hamburger</li>");
$m[i]);
.before($f);
$(".portobello").replaceWith(
});
$(".menu_entrees li").first()
$(this).after(
$(".tofu").remove();
$(".tofu").each( function(i){
jeste tutaj 205

U magnesiki z kodem we waciwej kolejnoci, aby otrzyma ukoczony i dziaajcy
przycisk restoreMe. Kilka magnesikw uoylimy za Ciebie.
if (v == true){
"<li class='hamburger'>hamburger</li>");
$(".portobello").replaceWith(
$(".menu_entrees li").first()
.before($f);
$(".tofu").each( function(i){
$(this).after(
$m[i]);
});
$(".tofu").remove();
v = false;
t,
Przywracamy elementy klasy mea
odwoujc si do tablicy $m oraz wi
indeksu odpowiadajcego elemento
klasy tofu, na ktrym aktualnie
pracuje funkcja.
});
my_scripts.js
206
Rozdzia 4.
To ju wszystko... prawda?
Zrobie wszystko, co byo wymagane dla przycisku Przywr menu.
Zaktualizujmy nasze pliki i uznajmy nasze zadanie za ukoczone.
Przywr w menu potrawy rybne w miejscu, z ktrego zostay
usunite (czyli przed pierwsz pozycj menu w lewej kolumnie).
Odszukaj potrawy zawierajce pieczarki i zastp je
hamburgerami.
Chwileczk, zapomnielimy
o P.S. na serwetce.
, ktra by
ymy te mie ikonk z liciem
P.S. Jeli si da, to chcielib
iki.
edn
owi
odp
cych wegetariaskie
si wywietlaa obok da maj
Ups! Masz racj.

Na szczcie projektant umieci ju klas veg_leaf w pliku my_style.css.
Spjrzmy na ni.
.veg_leaf{
list-style-image:url('../images/leaf.png');
}
my_style.css
Wskazwka: Twoim przyjacielem bdzie metoda addClass.
wiczenie
Napisz instrukcj, ktra doda klas veg_leaf do rodzicw rodzicw elementw

klasy tofu.
jeste tutaj 207
rozwizanie wiczenia
Napisz instrukcj, ktra doda klas veg_leaf do rodzicw rodzicw elementw

klasy tofu.
Rozwizanie
wiczenia
$(".tofu").parent().parent().addClass("veg_leaf");
Nie istniej
gupie pytania
P: Rozumiem rne metody filtrujce, P: Wyglda na to, e metoda each
P: Jak mog szuka elementw
O: Metoda slice moe wyglda
Element w tablicy jQuery moesz

znale za pomoc metody find. Zamy,
e masz tablic elementw li:
var $my_elements = $("li");
ale slice cigle miesza mi w gowie.

Czy moecie mi j lepiej objani?
ma cakiem spore moliwoci. Skd

each wie, nad ktrym elementem
pracuje?
na pogmatwan. Najtrudniejsze
do zrozumienia s jej parametry:
slice(start, end).
Prawdziwe moliwoci metody

each bior si z poczenia jej ze
sowem kluczowym this. Metoda each
automatycznie pamita swj indeks
i wie, nad ktrym elementem pracuje.
Powiniene z niej korzysta tylko wtedy,
gdy wybrae wiele elementw. Aby
odnie si do biecego elementu, uyj
sowa kluczowego this, ale w powizaniu
ze skrtem jQuery: $(this).
Pierwszym parametrem jest start; musisz

go poda, aby metoda slice zadziaaa.
Okrela on, gdzie w tablicy elementw
rozpocznie si selekcja. Jak pamitasz,
pierwszy element tablicy ma indeks
zerowy, a zatem liczenie musisz zacz od
0. Parametr start moe te przyjmowa
warto ujemn. Jeli nadasz mu tak
warto, slice zacznie odlicza od koca
tablicy zamiast od jej pocztku.
P:
OK, co w takim razie robi parametr

end metody slice?
O:
Drugi parametr metody slice

end nie jest wymagany. Jeli go nie
okrelisz, slice wybierze wszystkie
elementy, poczwszy od miejsca
okrelonego za pomoc parametru start
(te, ktrych indeksy s wiksze od tego
parametru). Parametr end moe wydawa
si sprzeczny z intuicj, jeli nie bdziesz
pamita, e indeksy tablic zaczynaj si
od 0.
208
Rozdzia 4.
O:
P: Dlaczego wewntrz funkcji each
musz umieszcza zmienn i albo

index?
O: Zmienna index, czsto okrelana
liter i, jest uywana przez metod each

w celu liczenia elementw, nad ktrymi
pracuje. Dziki temu bdzie ona wiedzie,
kiedy skoczy przetwarzanie wszystkich
elementw. Gdyby metoda each nie
miaa do dyspozycji zmiennej index, nie
mogaby okreli, ktry element obecnie
przetwarza, i nie mogaby zakoczy
swojego dziaania.
w tablicy jQuery?
O:
Chciaby odszuka w tej tablicy wszystkie

elementy kotwic. Oto, co powiniene
zrobi:
$my_elements.find("a");
P: Czy jQuery udostpnia nam
sposb na umieszczenie jednego

elementu wewntrz innego?
O:
Tak, udostpnia. Powiedzmy, e

chcesz umieci obraz o identyfikatorze
helion wewntrz elementu kotwicy. Oto,
jak mona to zrobi:
$("img#helion").
F 3#3% %#+KKFFF
helion.pl'></a>");
Jazda prbna
Mino ju troch czasu, od kiedy aktualizowae swoje pliki. Dodaj kod dla przycisku
Przywr menu oraz kod dodajcy i usuwajcy klas veg_leaf w miejscu, w ktrym
podstawiane s odpowiedniki wegetariaskie. Zawsze moesz pobra pliki z tego
rozdziau z ftp://ftp.helion.pl/przyklady/jquerg.zip i porwna je ze swoim kodem.
A oto li, ktry

dodalimy za
pomoc klasy
veg_leaf.
Wspaniale! Nasi klienci uwielbiaj

nowe menu, a najlepsze jest to, e
nie musimy przechowywa jego dwch
rnych wersji. Wszystko znajduje si
na jednej stronie!
si
Teraz Aleksandra moe ych
now
u
ani
ow
got
na
pi
sku
swojego
smacznych potraw do owa si
ejm
prz
t
ias
menu, zam
witryn internetow.
jeste tutaj 209
Rozdzia 4.

niezbdnika dodae manipulowanie
drzewem DOM, poruszanie si po nim,
a take tablice i filtry.
ie
n
a
w
o
l
Manipum DOM
drzewe
,
dodawa
moesz menty
,
z
s
e
c
le
ch
rne e
ylko ze
Kiedy t a i usuwa
w
zastpo OM:
D
drzewa
detach
remove
With
replace
before
after
Poruszanie
si po
drzewie DOM
drzewie DOM
Poruszanie si po
zczaniu si
polega na przemies
i czemu
ik
dz
ie,
w jego obrb
wa.
ulo
moesz nim manip
, gdzie chcesz,
Aby dosta si tam dzy
mi
korzystasz z relacji ojarzonych
sk
ze
z
ora
mi
nta
me
ele
jak parent
z nimi metod takich
i child.
acuchy jest
czenie metod w
na szybkie
wydajnym sposobem DOM.
a
ew
drz
przechodzenie
Tablice
ne
wuj r
przecho strony,
y
r
e
u
jQ
y
Tablice
element ie do nich
w tym
rzeczy, emu moesz m
z
dziki c
,
dostp.
iennych
adku zm licy znak
p
y
z
r
p
w
b
Tak jak rzed nazw ta ajduj si
p
n
z
ie
,
m
u
y
zaznacz dane jQuery.
$, aby
lne
ja
c
e
p
s
w niej
Filtry
Metody fi
lt
zbir wyb rujce pomagaj
ranych e
lementw zawzi
:
first
equal
last
slice
filter
not
210
Rozdzia 4.
5.(IHNW\LbDQLPDFMDZbM4XHU\
Nieco wdziku
na Twojej stronie
Zobaczcie, jak piknie si
poruszam. Mam w sobie
tyle gracji. Zao si,
e tak nie potraficie!
Sprawianie, e na Twojej stronie bd si dzia rne rzeczy, to niezy

pomys, ale tylko do czasu. Jeli nie bdzie ona wyglda atrakcyjnie, ludzie nie
zechc z niej korzysta. Dlatego wanie przydadz Ci si efekty i animacja w jQuery.
W biecym rozdziale nauczysz si, co zrobi, aby wraz z upywem czasu elementy
zmieniay swoje miejsce na stronie, jak pokaza lub ukry okrelony element albo jak
go powikszy lub zmniejszy, a wszystko to na oczach uytkownika. Dowiesz si te, jak
zakada harmonogramy animacji, aby uruchamiay si one w rnych odstpach czasu,
co nada Twojej stronie bardzo dynamiczny wygld.
211
rezygnacja z flasha
Gryzmoki potrzebuj aplikacji sieciowej

Gryzmoki zaopatruj webowickie dzieci w atrakcyjne materiay artystyczne do zabawy. Kilka
lat temu firma uruchomia popularn witryn internetow, w ktrej udostpnia interaktywne
aplikacje dla dzieci. Spoeczno jej fanw ronie w takim tempie, e Gryzmoki zaczy mie
problemy z radzeniem sobie na bieco z napywajcymi probami.
Aby zaspokoi potrzeby nowej, wikszej klienteli Gryzmokw, dyrektor ds. projektw
internetowych chciaaby utworzy aplikacj, ktra nie korzystaaby z Flasha ani z adnych
innych wtyczek przegldarkowych.
Nasze projekty dla dzieciakw to

przede wszystkim dobra zabawa
i zaangaowanie. Czy moesz
wykona dla nas aplikacj dla
grupy wiekowej od 6 do 10 lat?
Potrzebujemy mnstwa efektw
wizualnych i troch interaktywnoci.
Tylko bez Flasha prosz!
212
Rozdzia 5.
efekty i animacja w jquery
Zrb sobie potwora

Oto plan aplikacji przekazany przez dyrektor ds. projektw internetowych wraz
z plikami graficznymi od projektanta przeznaczonymi do uycia w programie:
% & &

Zadaniem aplikacji Zrb sobie potwora jest zabawianie dzieci w docelowej grupie wiekowej przez umoliwienie im zrobienia
sobie potwora dziki mieszaniu 10 rnych gw, oczu, nosw i ust. Przejcia midzy poszczeglnymi czciami twarzy
potwora powinny by animowane.
' (
Animacja
Symulacja obrazujca, jak powinna si zmienia cz twarzy
potwora.
Pojemnik
Ramka
)&
% "&' (

)&
% "&'
*

*
"
*
#
)&
% "&'
Symulacja obrazujca, jak powinna wyglda animacja byskawicy.
)&
% "&'

Obrazy byskawicy powinny pojawia si i znika szybko, tak

jakby rzeczywicie si byskao.
%
!"
frame.png

#"

$"
Masz mnstwo szczegw dotyczcych wymaga projektu oraz potrzebne pliki

graficzne, ale grafik nie napisa adnego HTML-a ani CSS, a od tego wanie musisz
zacz. Co powiniene zrobi, aby utworzy i skonfigurowa te pliki?
jeste tutaj 213
budowanie solidnych fundamentw
Zrb sobie potwora potrzebujemy ukadu i pooenia na stronie

Bez wtpienia sporo mwilimy do tej pory na temat koniecznoci zdefiniowania ju na samym pocztku
struktury i stylu jeszcze zanim napiszesz cokolwiek w jQuery. Teraz jest to jeszcze waniejsze: jeeli
z gry nie okrelisz ukadu i pooenia elementw na stronie, Twoje efekty oraz animacje mog okaza
si nieudane, i to szybko. Nie ma nic gorszego, ni gapi si w swj kod jQuery i zastanawia si, dlaczego
nie robi on w przegldarce tego, co chciae. Dobrym rozwizaniem jest naszkicowanie swoich pomysw
i przemylenie tego, co si bdzie dzia na ekranie.
Kady pasek z rysunkiem potwora

ma 3670 pikseli szerokoci, ale
jednorazowo moemy pokaza tylko
367 pikseli.
Jaki atrybut CSS pozwoli nam
to zrobi?
Ta sekcja powinna mie

545 pikseli szerokoci, ...a ta sekcja 367 pikseli,
aby pomieci ramk... eby zmieci twarz
potwora.
367 pikseli szerokoci
Twarz potwora
bdzie si skada
z kolejnych
czterech sekcji
przechowujcych
poszczeglne paski
z rysunkami.
div#pic_box
div#frame
214
Rozdzia 5.
div#head
172 piksele szerokoci
div#eyes
div#nose
div#mouth
Paski z rysunkami nal

elementw img zagnie ey rozmieci, uywajc
donych w sekcjach
odpowiednich dla dan
ej
Na przykad znacznik czci twarzy potwora.
img dla rysunku headss
znajdzie si wewntr
trip.jpg
z sekcji div#head.
wiczenie
W kade z pustych miejsc w plikach HTML i CSS wpisz identyfikator CSS, waciwo albo ustawienie,
ktre pomog Ci skonfigurowa ukad i pooenie elementw aplikacji Zrb sobie potwora.
W przypadku wtpliwoci poszukaj wskazwek na dwch poprzednich stronach. Kilka z pustych
miejsc wypenilimy za Ciebie.
<body>
<header id="top"><img src="images/Monster_Mashup.png" />
#G I88F3 Z#F 3R&R3S\L8 3ZRK#GK%3? G
<div id="frame">
<div id= pic_box" >
<div id=
class="face"><img src="images/headsstrip.jpg"></div>
<div id=
class="face"><img src="images/eyesstrip.jpg"></div>
<div id=
class="face"><img src="images/nosesstrip.jpg"></div>
<div id=
class="face"><img src="images/mouthsstrip.jpg"></div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="scripts/my_scripts.js"></script>
</body>
index.html
#frame {
position:
left:100px;
top:100px;
F?%+#,
height:629px;
background-image:url(images/frame.png);
z-index: 2;
overflow:
}
#pic_box{
position: relative;
left:91px;
#+#,
.face{
position:
left:0px;
top:0px;
z-index: 0;
}
#head{
height:172px;
}
#eyes{
}
#nose{
%W%+#,
z-index: 1;
overflow:
}
}
#mouth{
}
my_style.css
jeste tutaj 215
rozwizanie wiczenia
W kade z pustych miejsc w plikach HTML i CSS wpisz identyfikator CSS, waciwo albo ustawienie,
ktre pomog Ci skonfigurowa ukad i pooenie elementw aplikacji Zrb sobie potwora.
W przypadku wtpliwoci poszukaj wskazwek na dwch poprzednich stronach. Kilka z pustych
Rozwizanie miejsc wypenilimy za Ciebie.
wiczenia
<body>
<header id="top"><img src="images/Monster_Mashup.png" />
#G I88F3 Z#F 3R&R3S\L8 3ZRK#GK%3? G
<div id="frame">
pic-box"
<div id=
>
<div id= head" class="face"><img src="images/headsstrip.jpg"></div>
<div id= eyes" class="face"><img src="images/eyesstrip.jpg"></div>
<div id= nose" class="face"><img src="images/nosesstrip.jpg"></div>
<div id= mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="scripts/my_scripts.js"></script>
</body>
index.html
Kiedy animujemy
.face{
#frame {
pozycj elementw,
position: relative;
position: absolute;
powinnimy uywa
left:0px;
left:100px;
pooenia absolutnego
top:0px;
top:100px;
albo wzgldnego.
z-index: 0;
F?%+#,
}
height:629px;
background-image:url(images/frame.png);
#head{
z-index: 2;
height:172px;
overflow: hidden;
overflow }
}
e waciwoci
#pic_box{
position: relative;
left:91px;
#+#,
Nadani
n umoliwi
wartoci hiddeci paska
cz
e
#eyes{
nam ukryci
ra wykracza
z rysunkiem, ktkcji pic_box.
height:79px;
poza obszar se
#nose{
width:367px;
%W%+#,
z-index: 1;
overflow:hidden;
}
W tym celu
mona skorzysta
te z waciwoci
CSS clip.
height:86px;
}
#mouth{
height:117px;
my_style.css
216
Rozdzia 5.
Troch wicej struktury i stylu

W nastpnej kolejnoci czekaj nas zmiany strukturalne w plikach HTML i CSS.
Do plikw index.html oraz my_style.css dodaj poniszy kod. Pliki graficzne
moesz pobra z ftp://ftp.helion.pl/przyklady/jquerg.zip.
Zrb to!
Dodaj kontener i zagnie

w nim rysunki z byska d
wic.

!!
?
?'! !
?&:'#

!!
?
?9! !
?&:9#

!!
?
?6! !
?&:6#
<div id="frame">
<div id="pic_box">
<div id="head" class="face"><img src="images/headsstrip.jpg"></div>
<div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>
<div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>
<div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
</div>
</div>
</div>
index.html
- ,
1,
!21!
0
1 &
2-::::::0

2:;0
}
Chcemy, eby
rysunki z byskawic
byy pocztkowo
niewidoczne.
2:;0
& ;2:0
}
#
?,
,

2-66VV770
&
2B?Q[ Q\
Q
]
Q!!&! 0
!
2 0
&! 2'9;0
!21!
0

2:;0
2:;0
& ;2:0
}
Kiedy chcemy animowa

elementy, powinnimy
nada ich waciwoci
position warto absolute,
fixed albo relative.
- ;",
!2
0
& ;2U0
}
my_style.css
jeste tutaj 217
teraz jeste ju ekspertem od klikania
Uaktywniamy interfejs
Teraz, kiedy opracowalimy ju wizualnie ukad strony Zrb sobie potwora, skonfigurujmy
reszt sekcji interfejsu uytkownika zgodnie z otrzymanym planem. Cz ta sprowadza
si do klikania w celu wywoywania zdarze. Zajmujesz si tym ju od czterech rozdziaw,
wic konfiguracja powinna Ci pj jak z patka.
' (
Pojemnik
Ramka
)&
% "&' (

Trzeba klik
z obszar n kady
przewinw, aby
rysunek.
)&
% "&'
*

*
"
*
#
)&
% "&'
)&
% "&'

de
Naley zlicza ka sek
kliknicie, aby pa a
z rysunkiem mon
byo przewin na
pocztek.
Nie istniej
gupie pytania
P: Nie za bardzo ju pamitam, o co
http://developer.mozilla.org/en/CSS/
position#Relative_positioning
O: position to waciwo CSS, ktra
position nadawa warto absolute,

fixed albo relative, kiedy chcemy
animowa elementy?
chodzi z tym pozycjonowaniem w CSS.

Dlaczego jest nam to potrzebne do
efektw i animacji w jQuery?
kontroluje, jak i gdzie umieci elementy

silnik przegldarki odpowiedzialny
za ukad strony. jQuery realizuje
wiele ze swoich efektw, korzystajc
z waciwoci position. Jeli ju troch
pozapominae i potrzebujesz odwieenia
wiadomoci, zajrzyj do znakomitych
wyjanie znajdujcych si w centrum
deweloperskim Mozilli:
218
Rozdzia 5.
P: Dlaczego musimy waciwoci CSS

O:
Jeli pozostawimy waciwoci

CSS position jej domyln warto
(czyli static), nie bdziemy mogli
zastosowa pooenia grnego, prawego,
lewego ani dolnego. Kiedy zaczniemy
pracowa z funkcj animate, bdziemy
potrzebowali ustawia takie pooenia,
a warto static po prostu na to nie
pozwala. Pozostae ustawienia waciwoci

position absolute, fixed oraz
relative to umoliwiaj.
P: Wspomniae o silniku
przegldarki odpowiedzialnym za
ukad strony. Co to takiego?
O:
Silnik przegldarki to jej centralna

cz, ktra interpretuje kod HTML
i CSS i wywietla go w oknie roboczym
przegldarki (czyli oknie, ktre pokazuje
uytkownikowi zawarto strony). Google
Chrome i Safari korzystaj z silnika Webkit,
Firefox uywa silnika Gecko, a Microsoft
Internet Explorer silnika o nazwie Trident.
Magnesiki z kodem jQuery

U magnesiki z kodem w odpowiednim porzdku, aby otrzyma aktywny element div#head. Upewnij si,
e zmienne oraz instrukcje warunkowe zachowuj waciw kolejno, dziki czemu bdziesz mg wykry
osignicie przez zmienn headclix wartoci 9, ktra oznacza dziesite kliknicie.
headclix
});
if (headclix
else {
= 0;
headclix
}

= 0;
});
var headclix
< 9){
$("#head").click(function(){
jeste tutaj 219
Magnesiki z kodem jQuery rozwizanie

U magnesiki z kodem w odpowiednim porzdku, aby otrzyma aktywny element
div#head. Upewnij si, e zmienne oraz instrukcje warunkowe zachowuj waciw
kolejno, dziki czemu bdziesz mg wykry osignicie przez zmienn headclix
wartoci 9, ktra oznacza dziesite kliknicie.
var headclix
= 0;
Zaczynasz od 0, poniewa jeszcze

nic nie zostao kliknite.
if (headclix
Jeeli zmienna
headclix jest
wiksza lub
rwna 9, zrb to.
headclix
< 9){

headclix
W to miejsce trafi kod

animujcy.
Nadaj zmiennej headclix warto,
n.
jak miaa wczeniej, plus jede
else {
Ten warunek ogra

uytkownika do nicza
dziesiciu klikni
.
W tym miejscu umiecisz kod

przewijajcy pasek z rysunkiem.
= 0;
Po dziesitym klikniciu
zresetuj zmienn headclix.
}
});
});
Czy moglibymy w jaki sposb

powtrnie wykorzysta ten kod,
eby pozostae elementy te
byy aktywne?
Oczywicie!
Kady z tych elementw zachowuje
si podobnie do elementu div#head
(naley uwzgldni tylko kilka rnic
takich jak nazwy zmiennych).
220
Rozdzia 5.
Zaostrz owek
Uzupenij poniszy skrypt jQuery, aby elementy oczu, nosa i ust byy aktywne. Za chwil do kadego
kliknicia dodamy odpowiedni funkcjonalno. Upewnij si, e zmienne oraz instrukcje warunkowe
zachowuj waciw kolejno, dziki czemu bdziesz mg wykry dziesite kliknicie.
if (headclix < 9){
%3?L&,
}
else{
headclix = 0;
}
});
});
my_scripts.js
jeste tutaj 221
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Tak wic uaktywnie elementy oczu, nosa i ust, ustawiajc w odpowiedniej

kolejnoci zmienne oraz instrukcje warunkowe, dziki czemu bdziesz mg
wykry dziesite kliknicie.
var headclix = 0, eyeclix=0, noseclix= 0, mouthclix = 0;
if (headclix < 9){
%3?L&,
}
deklarowa
Moemy za ych i nada im
nn
ie
zm
le
wie
zdzielajc te
wartoci, ro cinkami.
ze
pr
e
zmienn
else{
headclix = 0;
}
});
$("#eyes").click(function() {
if (eyeclix < 9){
eyeclix += 1;
}
else{
eyeclix = 0;
}
});
$("#nose").click(function() {
if (noseclix < 9){
noseclix += 1;
}
else{
noseclix = 0;
}
});
$("#mouth").click(function() {
if (mouthclix < 9){
mouthclix += 1;
}
else{
mouthclix = 0;
}
});
Kada cz twarzy potwora jest

teraz aktywna i skonfigurowana
w taki sposb, aby przed
przewiniciem paska z rysunkie
m
pozwoli tylko na dziewi
klikni.
Czy zwrcie uwag, e
pomimo drobnych rnic
kada funkcja wewntrz
metody click ma podobn
struktur? To mgby
by dobry przypadek do
wielokrotnego wykorzystania
kodu.
Cierpliwoci, mj
pasikoniku, dojdziemy
do tego w rozdziale 7.
});
my_scripts.js
222
Rozdzia 5.
Robimy efekt byskawicy

Nastpny w kolejnoci jest efekt byskawicy. Zanim sprbujemy zrealizowa jego
dziaanie, sprawdmy, co na ten temat jest w planie.
Rysunki z byskaw
ic s
zagniedone w se
kcji
pojemnika
' (
Pojemnik
Ramka
)&
% "&' (

)&
% "&'
)&
% "&'
i musz si szybko
pojawia i znika.
*

*
"
*
#
Symulacja obrazujca, jak powinna wyglda animacja byskawicy.
)&
% "&'
Obrazy byskawicy powinny pojawia si i znika

szybko, tak jakby rzeczywicie si byskao.
Zrobilimy ju co podobnego
w rozdziale 1. z wysuwaniem
si rysunku i nabieraniem przez
niego barw. Czy nie moglibymy
skorzysta z tego samego, eby
Zrb sobie potwora zadziaao?
Potencjalnie tak, ale by moe

istnieje lepszy sposb.
Przyjrzelimy si gotowym efektom
jQuery w rozdziale 1., ale teraz
zagbimy si w nie troch bardziej.
jeste tutaj 223
sztuczki z waciwociami
W jaki sposb jQuery animuje elementy?

Kiedy przegldarka pobiera plik CSS, ustawia wizualne waciwoci elementw
na stronie. Korzystajc z wbudowanych efektw jQuery, interpreter JS zmienia
te waciwoci i animuje elementy na Twoich oczach. Nie jest to jednak magia...
wszystko sprowadza si do waciwoci CSS. Spjrzmy jeszcze raz na kilka
efektw, ktre ju widziae.
hide, show i toggle zmieniaj waciwo CSS display

hide
show
Interpreter JS zmienia waciwo

CSS display wybranego
elementu na none i usuwa go
z ukadu strony.
Interpreter JS tak zmienia

waciwo CSS display
wybranego elementu, aby sta
si on widoczny.

Jeli element jest ukryty,

interpreter JS go pokazuje,
i odwrotnie.
Efekty jQuery zmieniaj waciwoci CSS w locie,

wprowadzajc zmiany na stronie na oczach uytkownika.
WYSIL
SZARE KOMRKI
hide, show i toggle zmieniaj waciwo display. Potrzebujemy jednak
przewija czci twarzy oraz w tym samym czasie wcza i wycza
byskawice. Ktr waciwo CSS zmienia Twoim zdaniem jQuery w celu
uzyskania tych efektw?
224
Rozdzia 5.
Efekty wygaszania zmieniaj waciwo CSS opacity

A
Za pomoc fadeIn interpreter JavaScriptu zmienia

waciwo CSS opacity wybranego elementu od 0 do 100.
B
fadeTo umoliwia animowan

zmian waciwoci opacity
wybranego elementu
do okrelonej wartoci
procentowej.
X
Za pomoc fadeOut interpreter JavaScriptu zmienia

waciwo CSS opacity wybranego elementu od 100
do 0 i pozostawia na stronie miejsce dla tego elementu.
Porady maniaka
Waciwo CSS opacity nie dziaa tak samo na rnych przegldarkach.

Na szczcie jQuery zadba o to w naszym imieniu i tak naprawd to
wszystko, co musimy o tym wiedzie!
jeste tutaj 225
dodaj nieco wdziku do swoich wysuni
Wysuwanie sprowadza si do zmiany wysokoci

Hej, DOM-ie, zmniejsz
wysoko wybranego
elementu do 0, a nastpnie
zmie waciwo display.
Czy jeste
kim w rodzaju
magika?
Wersja DOM
strony
slideUp
Interpreter
JavaScriptu
Interpreter JavaScriptu nakazuje drzewu DOM zmieni waciwo CSS height

wybranego elementu (lub elementw) na 0, a nastpnie nada waciwoci
display warto none. W zasadzie jest to ukrycie za pomoc wsunicia.
!
3=
Interpreter JavaScriptu pokazuje wybrany element (lub

elementy), animujc ich wysoko od 0 do wartoci
ustawionej w stylu CSS.
!
B

Interpreter JavaScriptu sprawdza, czy obraz ma pen

wysoko, czy zerow, i przecza efekt wysunicia
w zalenoci od wyniku. Jeeli element ma wysoko 0,
interpreter wysuwa go w d, a jeli ma pen wysoko,
wsuwa go w gr.
226
Rozdzia 5.
Mog wic wysuwa elementy

wycznie w gr i w d? A co,
jeli bym chciaa przesun co
w lewo albo w prawo?
jQuery udostpnia gotowe efekty tylko do

wysuwania elementw w gr albo w d.
W bibliotece tej nie znajdziesz metody slideRight
ani slideLeft (a przynajmniej nie byo ich w chwili
pisania tej ksiki). Nie przejmuj si jednak
zajmiemy si tym nieco pniej...
W jQuery nie znajdziesz

metody slideRight ani
slideLeft.
Zaostrz owek
Ktre z gotowych efektw jQuery przydadz si w aplikacji Zrb sobie potwora?
Dla kadej grupy efektw napisz, czy bd one pomocne, i wyjanij, dlaczego
t grup wybrae lub nie.
Efekt
Czy moemy
go uy?
Dlaczego?
Pokazywanie/
ukrywanie
Wysunicia
Wygaszenia
jeste tutaj 227
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Ktre z gotowych efektw jQuery przydadz si w aplikacji Zrb sobie potwora?
Efekt
Czy moemy
go uy?
Dlaczego?
Pokazywanie/
ukrywanie
Nie
Efekty pokazywania i ukrywania (show i hide) nie pomog nam przy tworzeniu
aplikacji Zrb sobie potwora, poniewa nie musimy animowa waciwoci
display adnego elementu.
Wysunicia
Nie
O may wos! Pasek z rysunkiem musimy przesun w lewo, a slideUp,

slideDown i efekty wysuni pozwalaj na zmienianie tylko waciwoci height.
Potrzebujemy czego, co zmieniaoby waciwo left.
Wygaszenia
Tak
Moemy skorzysta z efektw wygaszania, aby sprosta wymogom planu, ktre

stwierdzaj, e rysunki byskawic powinny pojawia si i wygasza szybko,
jakby naprawd si byskao.
Zatrudnij efekty wygaszania

W zaoeniach jest mowa o tym, e rysunki byskawic powinny pojawia
si i wygasza, ale ma si to dzia szybko, aby wygldao tak, jakby
naprawd si byskao. Zagbmy si troch w efekty wygaszania
i zobaczmy, jak moemy sprawi, e byskanie bdzie dziaa.
Tutaj jest identyfikator
pierwszego elementu
graficznego.
tion decydujcy
Tutaj wstawiamy parametr dura
roluje on to,
Kont
acji.
anim
nia
trwa
ie
czas
o
jak dugo bdzie trwa efekt.
$("#lightning1").fadeIn("fast");
w
Moesz uy jednego z parametr ...
tekstowych: slow, normal lub fast
...albo moesz poda warto w milisekundach.

Mgby na przykad wstawi 1000 i animacja
efektu trwaaby jedn sekund.
$("#lightning1").fadeIn(':::);
228
Rozdzia 5.
cz efekty za pomoc acuchw metod

Byskawice musz pojawia si i wygasza wci na nowo. Zamiast rozpisywa te
efekty oddzielnie, moemy skorzysta z acucha metod, z ktrego korzystalimy
przez chwil w rozdziale 4., kiedy musielimy wspina si po drzewie DOM.
acuchy metod to cecha jQuery pozwalajca na czenie ze sob metod, ktre
bd dziaa na zwrconym zbiorze elementw. Dziki nim efekty byskawic bd
atwiejsze do napisania, a zatem przyjrzyjmy si im bliej.
Waciwo display elementu ...a nastpnie element
znowu zostanie
zmieni si od ukrycia
zmieniony w cakowicie
do penej widocznoci
przezroczysty.
i nieprzejrzystoci...
$("#lightning1").fadeIn().fadeOut();
Jeli midzy nawiasami nie

okrelisz czasu trwania, efekt
otrzyma domyln warto
normal, ktra wynosi 400
milisekund, czyli 0,4 sekundy.
Kada metoda,
ktr dodajesz,
jest jak ogniwo
w acuchu.
Napisz wiersze kodu, ktre zrealizuj kady z etapw przedstawionych poniej.

wiczenie
1
Poka stopniowo element #lightning1 w czasie jednej czwartej sekundy.
Dodaj kolejny efekt, ktry wygasi element #lightning1 w czasie jednej czwartej
sekundy.
jeste tutaj 229
piorun uderza
Napisz wiersze kodu, ktre zrealizuj kady z etapw przedstawionych poniej.
Rozwizanie
wiczenia
Poka stopniowo element #lightning1 w czasie jednej czwartej sekundy.

$("#lightning1").fadeIn("250");
Dodaj kolejny efekt, ktry wygasi element #lightning1 w czasie jednej czwartej
sekundy.
$("#lightning1").fadeIn("250").fadeOut("250");
Kontratakujemy za pomoc funkcji czasowych

Masz ju wic byskawic, ktra pojawia si i znika, ale wymogi projektu mwi, e byskawice powinny uderza
przez cay czas. Prawdziwa byskawica strzela przez niebo, po czym zwykle nastpuje przerwa, po ktrej na niebie
pojawia si kolejna. Potrzebujemy zatem powtarza nasz efekt.
Powr mylami do poprzednich rozdziaw, gdzie musiae wykonywa powtarzalne zadania. Z czego korzystae?
Zgadza si: z funkcji! Po raz pierwszy pojawiy si one w rozdziale 3., gdy tworzylimy funkcj wielokrotnego
uytku obsugujc kliknicia oraz generator liczb losowych. Teraz moemy uy funkcji do wywoywania wygasze,
poczeka chwil, a nastpnie znowu je wywoywa w rnych odstpach czasu. Dziki temu uzyskamy dla Zrb
sobie potwora udany efekt wielu byskawic. Spjrzmy na funkcj realizujc taki efekt.
Hej, JavaScripcie,
utwrz dla mnie now
funkcj.
To jest nazwa, ktrej

bdziemy uywa do
wywoania funkcji.
Oto nasz parametr okrelajcy

odstp czasu (zmienna o nazwie
Wstaw go tutaj i uyj ponownie t).
w tym wierszu.
function lightning_one(t){
$("#lightning1").fadeIn(250).fadeOut(250);
! B *
?" *+Q+0
};
Ten wiersz
zawiera kod
Metoda setTimeout
efektw jQuery. nakazuje interpreterowi
JS wywoanie funkcji,
a nastpnie odczekanie
chwil przed ponownym
jej wywoaniem.
A tutaj widzimy bardzo fajn

cech JavaScriptu. Mwisz
interpreterowi JS, e chcesz,
aby funkcja wywoywaa sam
siebie wci na nowo.
Oto odstp czasu. Jest on

wyraony w milisekundach
tak jak czasy trwania efektw,
ktrym przygldalimy si
kilka stron wczeniej.
W zaledwie trzech wierszach kodu uzyskae zsynchronizowan

w czasie funkcj byskajc pierwszym rysunkiem pioruna. Sprbuj
teraz napisa funkcje dla pozostaych dwch rysunkw z piorunami.
230
Rozdzia 5.
Magnesiki jQuery
Poukadaj magnesiki z kodem we waciwej kolejnoci, aby uzyska funkcje animujce
byskawice dla pozostaych dwch elementw z piorunami.
function
lightning_two
(t){
};
function
lightning_three
(t){
};
.fadeIn(250)
t);
"lightning_two()",
.fadeOut(250);
setTimeout(
$("#lightning2")
"lightning_three()",
.fadeIn(250)
setTimeout(
.fadeOut(250);
t);
$("#lightning3")
jeste tutaj 231
Magnesiki jQuery rozwizanie

Poukadaj magnesiki z kodem we waciwej kolejnoci, aby uzyska funkcje animujce
byskawice dla pozostaych dwch elementw z piorunami.
lightning_two
function
$("#lightning2")
setTimeout(
(t){
.fadeIn(250)
.fadeOut(250);
"lightning_two()",
t);
};
lightning_three
function
$("#lightning3")
setTimeout(
(t){
.fadeIn(250)
.fadeOut(250);
"lightning_three()",
t);
};
Nie istniej
gupie pytania
P: Czy fadeIn().fadeOut() nie jest P: Metoda setTimeout jest dla mnie

tym samym co toggle?
O:
Dobre pytanie! To nie jest to

samo. Metoda toggle jest pojedyncz
metod, ktra po prostu przecza
wybrany element ze stanu ukrytego na
widoczny i na odwrt w zalenoci od
biecego stanu tego elementu. Poczenie
fadeIn i fadeOut w acuch utworzy
sekwencyjny efekt, ktry najpierw
stopniowo pokae wybrany element lub
elementy, po czym gdy to zostanie ju
osignite ponownie je wygasi.
232
Rozdzia 5.
nowa. Czy pochodzi ona z jQuery, czy

z JavaScriptu?
O:
Metoda setTimeout pochodzi tak

naprawd z JavaScriptu i moesz z niej
korzysta w celu kontrolowania pewnych
aspektw animacji w jQuery. Funkcj
setTimeout zajmiemy si dokadniej
w dalszych rozdziaach, a zwaszcza
w rozdziale 7.
Jeli chciaby poczyta o niej ju teraz,
odwied Mozilla Developers Center
pod adresem https://developer.mozilla.
org/en/window.setTimeout, a jeeli
naprawd chcesz pogbi swoj wiedz,

signij po znakomit ksik Davida
Flanagana JavaScript: The Definitive
Guide (OReilly; http://oreilly.com/
catalog/9780596805531).
P: Kiedy uywam efektu hide,
element po prostu znika. Jak mog to

spowolni?
O:
Aby spowolni efekt hide, show

albo toggle, dodaj midzy nawiasami
parametr duration okrelajcy czas
trwania animacji. Oto, jak moglibymy
zrealizowa efekt ukrywania w rozdziale 1.:
$("#picframe").hide(500);
Dodaj do swojego skryptu funkcje byskawic

Zrb to!
Korzystajc z kodu, ktry utworzye w wiczeniu na poprzedniej stronie,

zaktualizuj plik ze skryptem dla aplikacji Zrb sobie potwora.
W tych
wierszach s
wywoywane
funkcje
zdefiniowane
na samym dole
pogrubion
czcionk.
var headclix = 0, eyeclix
?" *U:::+0
?"=*@:::+0
?"? *(:::+0
= 0, noseclix = 0, mouthclix = 0;
Liczby midzy nawiasami to parametry w milisekundach,
ktre zostan przekazane do metody setTimeout. Za ich
pomoc moesz zmienia czasy byskania piorunw.
%3?L&,%3?L&,4
else{headclix = 0;}
});
$("#eyes").click(function(){
L&,L&,4
else{eyeclix = 0;}
});
$("#nose").click(function(){
L&,L&,4
else{noseclix = 0;}
});
Dla oszczdnoci miejsca

usunlimy niektre
podziay wierszy.
Nie przejmuj si, jeli
w Twoim skrypcie
wygldaj one inaczej.
$("#mouth").click(function(){
9%L&,9%L&,4
else{mouthclix = 0;}
});
});//koniec funkcji end doc.onready
To s definicje
funkcji
byskawic.

?" *+,
)*- -
?'+# A*9@:+# X*9@:+0
! B *
?" *+Q+0
.0

?"=*+,
)*- -
?9+# A* !+# X* !+0
! B *
?"=*+Q+0
.0

?"? *+,
)*- -
?6+# A* !+# X* !+0
! B *
?"? *+Q+0
.0
my_scripts.js
jeste tutaj 233
jazda prbna
Jazda prbna
Otwrz stron w swojej ulubionej przegldarce, aby sprawdzi, czy Twj efekt byskawicy dziaa.
Udao Ci si osign
efekt wygaszania
byskawic, czc go
z metod JavaScriptu
setTimeout.
Pioruny pojawiaj
si i znikaj szybko
w rnych odstpach
czasu, symulujc
prawdziwe byskawice.
Jak dotd udao Ci si opracowa funkcje obsugujce kliknicia, a trzy

rysunki byskawic pojawiaj si i wygaszaj w rnych odstpach czasu.
Spjrzmy na plan, aby sprawdzi, co pozostao jeszcze do zrobienia.
% & &

Zadaniem aplikacji Zrb sobie potwora jest zabawianie dzieci w docelowej grupie wiekowej przez umoliwienie im zrobienia
sobie potwora dziki mieszaniu 10 rnych gw, oczu, nosw i ust. Przejcia midzy poszczeglnymi czciami twarzy
potwora powinny by animowane.
Animacja
ca,
Symulacja obrazuj
.
potwora
Symulacja
jak powinna si
y
zmienia cz twarz
nna wyglda
obrazujca, jak powi
animacja byskawicy.
Ta cz planu stanowi nasze

ostatnie wyzwanie w projekcie.
234
Rozdzia 5.
Dotarlimy wic do
miejsca, w ktrym potrzebujemy
przesun rysunek w lewo,
a aden z gotowych efektw
przesuwania tego nie robi. Czy
istnieje jaka inna metoda,
ktrej moglibymy uy?
Gotowe efekty s wspaniae,
ale nie pozwalaj Ci robi
wszystkiego, na co tylko
masz ochot.
Nadesza pora na opracowanie
niestandardowego efektu, ktry
bdzie przesuwa czci twarzy
potwora w lewo.
Efekty wasnej roboty wykorzystujce metod animate

Tak wic w jQuery nie ma efektu slideRight ani slideLeft, a dokadnie tego potrzebujesz na
tym etapie realizacji projektu. Czy to oznacza, e nasza strona Zrb sobie potwora polega?
Bez obaw. jQuery oferuje metod animate suc do tworzenia wasnych efektw. Za pomoc
animate moesz tworzy niestandardowe animacje, ktre bd potrafiy robi o wiele wicej
ni gotowe efekty. Metoda ta umoliwia animowanie waciwoci CSS wybranego elementu lub
elementw, a take animowanie wielu waciwoci w tym samym czasie.
Rzumy okiem na niektre z efektw, jakie moesz osign za pomoc metody animate.
Efekty ruchu
Moesz animowa waciwoci

CSS zwizane z pooeniem, eby
tworzy iluzj przesuwania si
elementw po ekranie (tak jak
w przypadku pokazanej tu mumii).
Efekty skali
WYSIL
SZARE KOMRKI
CSS height i width, aby
tworzy iluzj ronicia albo
kurczenia si elementu.
Ktr waciwo CSS bdziesz

musia animowa, aby przy kadym
klikniciu czci twarzy potwora
przesuway si w lewo?
jeste tutaj 235
to kwestia matematyki
Co mona, a czego nie mona animowa?

Za pomoc metody animate moesz dynamicznie zmienia waciwoci czcionek, aby tworzy
efekty tekstowe. W jednym wywoaniu animacji moesz take animowa wiele waciwoci CSS
jednoczenie, co poszerza palet ciekawych rzeczy, ktre potrafi robi Twoja aplikacja sieciowa.
Chocia metoda animate jest naprawd nieza, ma ona swoje ograniczenia. Gdzie tam w gbi
animacja wykorzystuje mnstwo matematyki (czym na szczcie nie musisz si przejmowa),
a zatem jeste ograniczony do pracy tylko z tymi waciwociami CSS, ktrych ustawienia s
numeryczne. Znaj swoje ograniczenia, ale popu wodze wyobrani metoda animate oferuje
pene spektrum elastycznoci i rozrywki.
Efekty tekstowe
.XUF]VLNXUF]
2FKFR]DZLDWFR]DZLDW
.XUF]VLNXUF]
2FKFR]DZLDWFR]DZLDW
.XUF]VLNXUF]
2FKFR]DZLDWFR]DZLDW
.XUF]VLNXUF]
2FKFR]DZLDWFR]DZLDW

CSS czcionek, aby tworzy
iluzj leccego, rosncego albo
malejcego tekstu.
To zaledwie kilka przykadw.
Potrzebowalibymy o wiele,
wiele, wiele wicej
stron w ksice, eby
zaprezentowa wszystkie
moliwoci.
.XUF]VLNXUF]
2FKFR]DZLDWFR]DZLDW
2EHMU]\MWR
Metoda bdzie dziaa wycznie z waciwociami

CSS, ktre w swoich ustawieniach korzystaj z liczb:
obramowanie, margines,
?#J
pozycja dolna, lewa, prawa

WI 3
FRX&9FRX
3&33R3&3
#ZLS3J3
Z RX&9
Z RX3&3
3R3&3
rozmiar czcionki;
236
Rozdzia 5.
?#?Z& 3
F 3Z3
FLLR9
FRX&
Metoda animate z bliska

Z zewntrz metoda animate dziaa tak jak inne
metody, z ktrymi ju pracowae.
Pierwszy parametr
pozwala Ci wybra
waciwo CSS, ktr
chcesz animowa.
Wybierz element lub

elementy, z ktrymi
chcesz pracowa.
Drugi parametr to czas trwania

w milisekundach. Pozwala Ci on
okreli, jak dugo bdzie trwa
animacja.
Wywoaj metod animate.
$("#my_div").animate({left:"100px"},500);
W tym przykadzie animujemy
waciwo CSS left...
...i ustawiamy j
na 100 pikseli.
Pierwszy parametr jes

wymagany musisz t
go
tu umieci, aby anima
zadziaaa. Drugi paramcja
etr
jest opcjonalny.
Jedn z najwikszych zalet metody animate jest

jednak moliwo zmieniania wielu waciwoci
wybranego elementu w tym samym czasie.
$("#my_div").animate({
opacity: 0,
width: "200",
height: "800"
}, 5000);
2EHMU]\MWR
W tym przykadzie animujemy

jednoczenie przezroczysto
i wielko elementu.
Parametry waciwoci CSS naley ustawia

zgodnie ze standardem DOM, a nie ze
standardem CSS.
WYT
UMYS
Jak mylisz co takiego dzieje si za kulisami w przegldarce,

co pozwala metodzie animate zmienia elementy na oczach
uytkownika?
jeste tutaj 237
wprawianie rzeczy w ruch
Metoda animate zmienia w czasie styl

Efekty wizualne oraz animacja, ktre ogldasz na ekranie w kinie albo w telewizji, korzystaj
ze zudzenia ruchu. Specjalici od efektw i animatorzy bior sekwencj obrazw i odtwarzaj
je w okrelonym tempie po jednym obrazie, aby to zudzenie osign. Spotkae si
zapewne z opracowanymi tym prostym sposobem ksikami, w ktrych ten sam efekt jest
osigany podczas ich wertowania.
To samo dzieje si w oknie przegldarki, z tym e nie mamy sekwencji obrazw do pokazania.
Zamiast tego interpreter JavaScriptu wielokrotnie wywouje funkcj, ktra zmienia styl
animowanego obiektu. Przegldarka przenosi te zmiany na ekran. Uytkownik widzi iluzj
ruchu albo zmian elementu, kiedy modyfikowany jest jego styl.
1
A

animate 5
6
'

'
'

'
Zmie waciwo CSS
left na 500px w czasie
400 milisekund.
Interpreter
JavaScriptu
2
ate nie
odzie anim
Jeli w metartoci dla parametru
okrelisz w ia, zostanie przyjta .
czasu trwan ylna 400 milisekund
m
warto do
4 5
6
' 3

'+
*

animate

'+

Chciabym ustali
harmonogram
odwieania ekranu.
Wyglda na to, e uda

mi si uwin w czasie
troch duszym ni
kilka milisekund.

internetowej
JavaScript
interpreter
3
4 5
6
' 7'
'
'+
* '&3'
'F

7'

4
8 '&

%

238
Rozdzia 5.
Pocz fragmenty kodu zawierajce metod animate z opisem tego, co robi

on na ekranie.
$("#my_div").animate({top: "150px"}, "slow")
Jednoczenie animuje zmiany lewego

i prawego marginesu wszystkich
paragrafw.
$("p").animate({
Animuje zmian prawej pozycji #my_div

do zera w cigu p sekundy.
marginLeft:"150px",
marginRight:"150px"
});
$("#my_div").animate({width: "30%"}, 250)
Animuje zmian odstpu midzy

literami we wszystkich sekcjach
w domylnym czasie 400 milisekund.
$("#my_div").animate({right: "0"}, 500)
Jednoczenie animuje zmian

dopenienia i szerokoci #my_div.
$("p").animate({letterSpacing:"15px"});
Powoli animuje zmian grnej pozycji

#my_div.
padding: "200px",
width: "30%"
Szybko animuje zmian wysokoci

wszystkich obrazw.
}, "slow")
$("img").animate({height: "20px"}, "fast")
Animuje zmian szerokoci #my_div

w czasie jednej czwartej sekundy.
jeste tutaj 239
Rozwizanie
Pocz fragmenty kodu zawierajce metod animate z opisem tego, co robi
on na ekranie.
$("#my_div").animate({top: "150px"}, "slow")
Jednoczenie animuje zmiany lewego

i prawego marginesu wszystkich
paragrafw.
$("p").animate({
Animuje zmian prawej pozycji #my_div

do zera w cigu p sekundy.
marginLeft:"150px",
marginRight:"150px"
});
$("#my_div").animate({width: "30%"}, 250)
Animuje zmian odstpu midzy

literami we wszystkich sekcjach
w domylnym czasie 400 milisekund.
$("#my_div").animate({right: "0"}, 500)
Jednoczenie animuje zmian

dopenienia i szerokoci #my_div.
$("p").animate({letterSpacing:"15px"});
Powoli animuje zmian grnej pozycji

#my_div.
padding: "200px",
width: "30%"
Szybko animuje zmian wysokoci

wszystkich obrazw.
}, "slow")
$("img").animate({height: "20px"}, "fast")
240
Rozdzia 5.
Animuje zmian szerokoci #my_div

w czasie jednej czwartej sekundy.
Dokadnie skd dokd?

Wan rzecz do zapamitania na temat metody animate jest fakt, e zmienia ona
aktualn waciwo CSS na waciwo, ktr ustawisz w pierwszym parametrze. Aby
Twoje niestandardowe animacje byy skuteczne, musisz si mocno zastanowi, jakie
wartoci s aktualnie ustawione w CSS. W poprzednim przykadzie zmienilimy lewe
pooenie #my_div na 100 pikseli. To, co wydarzy si na ekranie, w caoci zaley od
biecej wartoci waciwoci CSS left elementu #my_div.
Bieca warto waciwoci CSS
Warto waciwoci CSS w animate

#my_div przesunie
si o 80 pikseli
w prawo.
#my_div
#my_div{
Element jest
animowany
do pooenia
bezwzgldnego.
$("#my_div").animate({left:"100px"});
left: 20px;
}
Jeli waciwo ma aktualnie inn warto, otrzymamy inny wynik.
Bieca warto waciwoci CSS
Warto waciwoci CSS w animate

#my_div przesunie
si o 100 pikseli
w lewo, poniewa
po lewej stronie
znajduje si mniej
pikseli.
#my_div
zaczyna si od
dwusetnego
piksela
#my_div{
left: 200px;
}
Fascynujce! Tylko jak moemy

z tego skorzysta, eby zadziaao
nasze Zrb sobie potwora?
Wszystko jest wzgldne.

Aby czci twarzy potwora w Zrb sobie potwora
przesuway si w stron, w ktr chcemy, musimy
zastanowi si, jakie s ich biece pozycje i jak chcemy
je zmieni wzgldem pozycji, ktre zajy po tym, kiedy
ostatnio zmienia je metoda animate.
jeste tutaj 241
to jest wzgldnie atwe
Ruch bezwzgldny obiektw a ich ruch wzgldny

Zapewne pamitasz, e paski z rysunkami, ktre chcemy pokaza,
zagniedzilimy wewntrz sekcji o identyfikatorze #pic_box. Obecnie w CSS
waciwo left elementu #pic_box ma warto 91px. Zastanwmy si nad tym,
jak chcielibymy przesuwa paski z rysunkami, aby uzyska efekt przesunicia
w lewo, na ktrym nam zaley.
szeroko 367
pikseli
szeroko 367
pikseli
szeroko 367
pikseli
Zaczynamy od
pokazania pierwszej
czci gowy. Jej
wzgldne pooenie to
0 pikseli.
Za kadym razem, kiedy

uytkownik kliknie,
chcemy przewin pasek
z rysunkiem o 367
pikseli w lewo.
Potrzebujemy wic przekaza meto
animate, eby przesuna rysunek dzie
o 367
pikseli za kadym razem, kiedy
zostanie
wywoana funkcja.
Zastanw si nad przykadem animacji bezwzgldnej z poprzedniej strony.

eby
Tutaj mwimy metodzie animate,
_div
nadaa lewej pozycji sekcji #my eli.
warto rwn dokadnie 100 piks
suna
Ale jak powiedzie jej, eby prze
element o 367 pikseli za kadym anie
razem, kiedy metoda animate zost
wywoana?
$("#head").animate({left:"???"});
Animacja wzgldna = przesu to za kadym razem wanie o tyle

Za pomoc animacji bezwzgldnej przesuwasz element na bezwzgldn pozycj
siatki ekranu. Za pomoc animacji wzgldnej przesuwasz element wzgldem
pozycji, ktr zajmowa ostatnio po zakoczeniu animacji, ktra go tam umiecia.
Ale jak przesuwamy element wzgldnie

za pomoc metody ?
242
Rozdzia 5.
Przesuwaj elementy wzgldnie dziki czeniu operatorw

Istniej specjalne operatory JavaScriptu, ktre przesuwaj element lub elementy o t sam warto
przy kadym wywoaniu metody animate. S one znane jako operatory przypisania, poniewa s
zwykle uywane do przypisywania wartoci zmiennej w taki sposb, e do jej biecej wartoci jest
dodawana nowa warto. Brzmi to o wiele bardziej skomplikowanie, ni w istocie jest.
Znak rwnoci jest
operatorem przypisania.
a = 20
Operator = przypisuje
zmiennej a warto 20.
Kiedy czysz operatory arytmetyczne ze znakiem

rwnoci, otrzymujesz przydatne skrty.
a 30
a -= 10
Tutaj znak minusa

w poczeniu z operatorem
przypisania tworzy skrt dla
a = a 10.
atorem
Znak plusa w poczeniu z oper
a = a + 30.
przypisania jest tu skrtem dla
Takie poczenia operatorw pomagaj w tworzeniu animacji wzgldnej, umoliwiajc

ustawianie nowej wartoci na warto biec plus albo minus pewna liczba pikseli.
identyfikatorze
Ten zapis przesunie element o
m, kiedy
raze
ym
kad
za
eli
piks
20
box o
ate.
anim
da
meto
a
oan
wyw
zostanie
)

+
$("#box").animate({left:I9:});
Oto, co si stanie z elementem #box przy kadym wywoaniu powyszej
animate zostaje
metody animate.
animate zostaje
wywoana i ustawia
left na +=20.
Zamy, e
left startuje
z wartoci 0.
left = 0
left = 20
CELNE SPOSTRZEENIA
3 jest skrtem dla

przemnoenia biecej
wartoci a przez 5
i przypisania uzyskanego
wyniku do a.
3K- jest skrtem

dla podzielenia biecej
wartoci a przez 2
i przypisania uzyskanego
wyniku do a.
wywoana i ustawia
left na +=20.
left = 40
Zwikszajc za kadym razem warto lewej pozycji elementu,

w rzeczywistoci przesuwamy go w praw stron okna
przegldarki.
Napisz wiersz kodu w jQuery, ktry zrealizuje nastpujce czynnoci:

wiczenie
Przesunicie elementu #head o 367 pikseli w lewo przy kadym wywoaniu metody
animate. Czas trwania ustaw na p sekundy.
Przesunicie elementu #head na pozycj wyjciow (left:0px).

Czas trwania ustaw na p sekundy.
jeste tutaj 243
rozwizanie wiczenia
Napisz wiersz kodu w jQuery, ktry zrealizuje nastpujce czynnoci:
Rozwizanie
wiczenia
Przesunicie elementu #head o 367 pikseli w lewo przy kadym wywoaniu metody
animate. Czas trwania ustaw na p sekundy.
$("#head").animate({left:"-=367px"},500);
Przesunicie elementu #head na pozycj wyjciow (left:0px).

Czas trwania ustaw na p sekundy.
Ta bezwzgldna animacja
$("#head").animate({left:"0px"},500);
resetuje gow potwora

w sposb przypominajcy
przewinicie tamy.
Nie istniej
gupie pytania
P: Niektre osoby nie chc,
eby animacje przeszkadzay im

w ogldaniu strony. Co powinienem
zrobi, eby pozwoli uytkownikowi
na wyczenie animacji?
O: To doskonae spostrzeenie.
Animacje mog irytowa i powodowa

problemy z dostpnoci. Jeli chcesz,
eby uytkownicy mogli je wycza,
moesz utworzy przycisk powizany
z nastpujcym kodem (wiesz ju,
jak to zrobi):
$.fx.off = true;
Innym przydatnym sposobem na
wyczenie animacji jest uycie metody
jQuery o nazwie stop. Moesz si
dowiedzie wicej na temat obu tych
sposobw w witrynie jQuery:
http://api.jquery.com/jQuery.fx.off/
http://api.jquery.com/stop/
P: Powiedziae: Parametry
Zauwa, e w notacji CSS dla waciwoci

szerokoci piszesz border-width,
natomiast w notacji DOM dla tej
samej waciwoci uywasz zapisu
borderWidth.
O: wietne pytanie! Metoda
Jeli chcesz poczyta wicej o rnicach

midzy tymi dwoma notacjami, zapoznaj
si z poniszym artykuem:
waciwoci CSS naley ustawia

zgodnie ze standardem DOM, a nie
ze standardem CSS. Co to do diaska
znaczy?
animate pobiera parametry napisane
w standardzie DOM (zwanym te notacj
DOM) zamiast w notacji CSS.
Oto konkretny przykad ilustrujcy
t rnic. Aby ustawi szeroko
obramowania sekcji w notacji CSS,
napisaby co takiego:
div {
border-style:solid;
border-width:5px;
}
Zamy teraz, e chciaby animowa
t szeroko obramowania. W jQuery
waciwo szerokoci krawdzi ustawia
si za pomoc notacji DOM, tak jak tutaj:
$("div").animate({borderWidth:30
},"slow");
244
Rozdzia 5.
http://www.oxfordu.net/webdesign/dom/
straight_text.html
P: A co powinienem zrobi, jeli
chciabym animowa zmian koloru?
O: Aby animowa przejcia midzy
kolorami, musisz skorzysta z jQuery

UI, ktre zawiera wicej efektw, ni
zostao doczonych do jQuery. jQuery
UI opiszemy w rozdziale 10., ale
z pominiciem efektw. Kiedy ju dowiesz
si, jak pobiera i ustawia motywy oraz
docza jQuery UI do swoich aplikacji
internetowych, animowanie zmian koloru
stanie si bardzo proste.
Dodaj funkcje animujce do swojego skryptu

Korzystajc z kodu, ktry uoye w wiczeniu na poprzedniej stronie,
zaktualizuj swj plik ze skryptem dla aplikacji Zrb sobie potwora.
if (headclix < 9){
)*?!+# *,
2&67(;.Q@::+0

%3?L&,
}
else{
)*?!+# *,
2:;.Q@::+0
headclix = 0;
} Moemy tu skorzysta ze sowa
});
Zrb to!
kluczowego this, poniewa znajdujemy

si wewntrz funkcji obsugujcej
element, ktry kliknlimy.
if (eyeclix < 9){
)*?!+# *,
2&67(;.Q@::+0

L&,
}
else{
)*?!+# *,
2:;.Q@::+0
eyeclix = 0;
}
});
if (noseclix < 9){
)*?!+# *,
2&67(;.Q@::+0

L&,
}
else{
)*?!+# *,
2:;.Q@::+0
noseclix = 0;
}
});
if (mouthclix < 9){
)*?!+# *,
2&67(;.Q@::+0

9%L&,
}
else{
)*?!+# *,
2:;.Q@::+0
mouthclix = 0;
}
my_scripts.js
jeste tutaj 245
jazda prbna
Jazda prbna
Otwrz stron w swojej ulubionej przegldarce, aby upewni si, e wszystko dziaa.
Udao Ci si
napisa dziaajcy
niestandardowy
efekt przesuwania
w lewo.
Za pomoc kilku klikni

uytkownik moe zrobi sobie
wasn twarz potwora.
246
Rozdzia 5.
Krzywka jQuery
i wyraenia stanowice hasa pochodz z biecego rozdziau.
Poziomo
Pionowo
1. Metoda powodujca nastpujce dziaanie: jeeli wskazany

element ma wysoko 0, interpreter JS wysuwa go w d, jeli
natomiast wskazany element ma pen wysoko, interpreter JS
wsuwa go do gry.
1. 1000 milisekund.
4. Tworz iluzj elementu przesuwajcego si po ekranie.

6. hide, show i toggle animuj t waciwo CSS.
9. Funkcjonalno jQuery umoliwiajca czenie ze sob metod,
ktre chcesz wywoa dla danego zbioru elementw.
10. Efekty jQuery polegaj na manipulowaniu nim w locie.
11. T waciwo CSS oraz waciwo width moesz animowa
w celu stworzenia iluzji rosncego albo malejcego elementu.
12. Parametr kontrolujcy czas trwania efektu.
13. Kiedy wywoasz ten efekt jQuery, interpreter JS zmieni
przezroczysto wskazanego elementu od 0 do 100.
2. Metoda animate bdzie dziaa tylko dla waciwoci CSS,

ktre maj takie wartoci.
3. Biblioteka jQuery oferuje t metod, jeli zechcesz tworzy
efekty niestandardowe.
5. Efekt uzyskany za pomoc animowania waciwoci height
elementu.
7. Jedna z wartoci, obok fixed i relative, jak mona
nada waciwoci okrelajcej pooenie elementu w celu jego
animowania.
8. Metoda nadajca danemu elementowi w animowany sposb
okrelony stopie przezroczystoci.
jeste tutaj 247
potworny sukces
Patrz, mamo! Bez Flasha!

Dyrektor ds. projektw internetowych jest zadowolona z wynikw Twojej pracy
nad aplikacj Zrb sobie potwora. Skorzystae z gotowych efektw jQuery
w poczeniu z wasnymi niestandardowymi efektami skrojonymi na miar
potrzeb klienta.
Nasza docelowa grupa

w wieku od 6 do 10 lat uwielbia
stron Zrb sobie potwora. I nie
potrzebujemy uywa Flasha ani
wtyczek do przegldarek. No
prosz, jQuery idealnie wpasowa
si w nasze potrzeby.
Fajowo! Zrobiem
tyle potworw,
e a si w tym
pogubiem!
248
Rozdzia 5.
Niesamowite!
Wystrasz moj
modsz siostr
potworem, ktrego
zrobiam!
jeste tutaj 249
Rozdzia 5.

Masz ju za sob rozdzia 5., a do
swojego niezbdnika dodae efekty
wygaszania kolorw oraz wysuwania,
a take niestandardowe animacje.
Efekty ania
wygasz
S
o CS
waciw tu:
j
ia
n
men
Zmie
nego ele
wskaza
opacity
Efekty
wysuwan
ia
Zmieniaj
wskazane waciwo CSS
go eleme
height
ntu:
slideUp
slideDow
n
slideTogg
le
fadeIn
fadeOut
fadeTo
animate
ji, kiedy
dowych animac
nie niestandar arczaj.
ze
or
tw
ia
liw
Umo
wyst
jQuery ju nie
gotowe efekty
woci CSS.
Animuje waci
i CSS, ktre
waciwociam
i
m
ki
ta
z
o
lk
Dziaa ty
oci liczbowe.
.
przyjmuj wart
bo bezwzgldnie
wzgldnie al
wa
su
ze
pr
na
Elementy mo
ym stopniu
+, ) w znaczn
,
(=
w
or
at
er
Poczenia op
acj wzgldn.
uatwiaj anim
250
Rozdzia 5.
6.M4XHU\Lb-DYD6FULSW
Luke jQuery, jestem

twoim ojcem!
Istniej, synu,
pewne rzeczy,
z ktrymi sam sobie
nie poradzisz...
Sama biblioteka jQuery nie da sobie ze wszystkim

rady. Chocia jest ona bibliotek JavaScriptu, nie potrafi niestety
robi wszystkiego, co jej jzyk ojczysty. W tym rozdziale przyjrzymy si
niektrym aspektom JavaScriptu, ktrych bdziesz potrzebowa do
tworzenia naprawd atrakcyjnych stron, oraz temu, jak mona z nich
korzysta w jQuery w celu tworzenia niestandardowych list i obiektw,
a take jak przechodzi przez nie w ptlach, aby uatwi sobie ycie.
jquery albo poraka
Atrakcyjniejszy barek Rusz Gow

Masz szczcie! Wie o Twojej biegoci w jQuery zatacza coraz szersze krgi. Spjrz na
poniszy e-mail z barku Rusz Gow z prob o pomoc w zwikszeniu poziomu atrakcyjnoci
tego miejsca dla odwiedzajcych.
Od:

Temat: !"# $
%&#
*+:

3'
!!
G;"

'

'3'&' +

'
'
'

HEG0</'&'+

*
7

+B

'

H

' '
'&

I
/3'&'
FFF2
FE<E9<D

+13
F
'

'+
=5

'

=

A'
F
'

'
'

J5

'

=
'

'
+

K5

'
=F

L'

'

' +
5
'&
3

L'
5
3

''

;
' ++

G
+

M'&'

+

':
*

+BH
--
252
Rozdzia 6.
jquery i javascript
Franek
Jzek
Kuba: Cze, czytalicie ju e-mail od chopakw z barku Rusz Gow?

Franek: Tak, wyglda na to, e chc mie na swojej stronie atwego do
rozegrania blackjacka. Wydaje mi si, e to bdzie do proste.
Kuba: Proste? Ale to blackjack! Potrzebujemy talii kart, rozdajcego,
licznika kart w rku i jeszcze wicej. Czy mylicie, e damy sobie z tym
wszystkim rad?
Jzek: Nie bdzie atwo, ale uwaam, e moemy to zrobi. Jak zauwaye,
potrzebujemy czego do rozdawania kart. Moemy napisa funkcj, ktra
bdzie to robi. Pisalimy ju wczeniej funkcj losow, tak wic by moe
bdziemy mogli jej uy jeszcze raz.
Kuba: No tak... Ale co z kartami talia ma ich 52?
Franek: Moglibymy po prostu mie du list kart i za kadym razem
wybiera losowo jedn z nich.
Kuba: Ale jak unikniemy wybrania dwa razy tej samej karty?
Kuba
Franek: Chyba wiem, jak to zrobi...

Kuba: Jestem pod wraeniem! A co z pamitaniem, ktre karty ju mamy?
A z liczeniem kart w trakcie gry?
Franek: I tu mnie masz! Nie jestem do koca pewien, jak sobie z tym
poradzi.
Jzek: Bez obaw. Istnieje cakiem sporo funkcji JavaScriptu i jQuery, ktre
pomog nam w tym zadaniu.
Kuba: Chwileczk! JavaScript? Czy nie moemy skorzysta ze zmiennych
albo tablic jQuery, eby zapamita nasze karty? Mylaem, e jak ju
uywamy jQuery, to nie bdziemy musieli zagbia si w JavaScript...
Franek: Same zmienne pewnie nam nie wystarcz. Tak naprawd
mog one przechowywa tylko po jednej wartoci takiej jak liczba,
acuch tekstowy albo okrelony element strony. Z kolei tablica moe
przechowywa wiele wartoci, ale tylko takich, ktre s elementami drzewa
DOM zwrconymi przez selektor...
Jzek: Zgadza si. Potrzebujemy czego bardziej elastycznego.
Franek: Jak naszej wasnej struktury albo typw zmiennych.
Kuba: Znowu masz racj! A do utworzenia naszych wasnych struktur
bdziemy potrzebowa JavaScriptu...
jeste tutaj 253
bez obiekcji
Obiekty oferuj inteligentne przechowywanie

Struktury danych, ktrych uywalimy do tej pory, ograniczay si do zmiennych i tablic. Zmienne
oferuj prost metod przechowywania danych: przypisuj nazw jednej wartoci. Tablice umoliwiaj
wydajniejsze zapisywanie informacji, pozwalajc na przechowywanie wielu wartoci pod jedn nazw.
Tablica
Zmienna
Kiedy nadasz
nazw wielu
wartociom,
zostan one
zapamitane
w tablicy.
Kiedy nadasz nazw jed

wartoci, zostanie ona nej
zapamitana w zmien
nej.
@3 3-
@3 @-
Obiekty oferuj jeszcze inteligentniejsze metody przechowywania danych. S one uywane wtedy, gdy
trzeba zapamita wiele zmiennych dotyczcych okrelonej rzeczy. Zmienna znajdujca si wewntrz
obiektu nosi nazw waciwoci. Obiekt moe te zawiera funkcje, ktre pozwalaj pracowa na jego
waciwociach. Taka funkcja utworzona wewntrz obiektu nazywana jest metod.
Obiekt
obiektSamolot={
&R+
#+#33 R
XWJ+4
Teraz dane s zgromadzone
w jednym zbiorze opisujcym
samolot.
Korzystaj
z obiektw,
kiedy musisz
przechowywa
wiele informacji
dotyczcych
okrelonej rzeczy.
254
Rozdzia 6.
Obiekt pamita swoje

dane w postaci
waciwoci.
Moesz dosta si do dowolnej

waciwoci obiektu, korzystajc
ze skadni z kropk.
obiektLeopard={
&LZ83ALR+-
R& +8 \ZF4
Nazw waciwoci
czysz...
...z jej wartoci.
obiektSamolot.silniki;
obiektLeopard.kolor;
Obiekt
Jego waciwo
WYSIL
SZARE KOMRKI
Jakie waciwoci moe mie
obiekt opisujcy kart?
jquery i javascript
Buduj wasne obiekty

Obiekty s zasadniczo sposobem tworzenia wasnych niestandardowych zmiennych, ktre bd dokadnie takie,
jak tego chcesz. Moesz tworzy obiekty jednorazowe albo schematy obiektw, z ktrych bdziesz korzysta
wielokrotnie. Niedugo przyjrzymy si obiektom wielokrotnego uycia, ale teraz opiszemy, jak tworzy obiekty
jednorazowe, a take poznamy niektre z terminw i schematw zwizanych z obiektami.
Obiekty mona standardowo opisa, korzystajc z diagramu UML (Unified Modeling Language, czyli
Zunifikowany Jzyk Modelowania). UML jest powszechnie uywanym standardem oglnego przeznaczenia,
ktry pomaga w opisywaniu obiektw w zorientowanych obiektowo jzykach programowania.
Kiedy z obiektem powizana jest zmienna, nazywamy j waciwoci obiektu. Kiedy powizana jest z nim
funkcja, wwczas nazywamy j metod obiektu. Obiekty jednokrotnego uycia moesz tworzy za pomoc sowa
kluczowego var tak samo jak w przypadku wszystkich innych zmiennych, z ktrymi spotkae si do tej pory.
Diagram UML obiektu

Struktura ta pomoe Ci zobaczy, jak
jest skonstruowany Twj obiekt, zanim
napiszesz pierwszy wiersz jego kodu.
mojKraj
Nazwa obiektu
mojaNazwa
mojaStolica
Metoda obiektu
Waciwoci
obiektu
pobierzStolice()
A oto, jak mona napisa kod dla tego

obiektu:
Za pomoc sowa
kluczowego var utwrz
obiekt o nazwie mojKraj.
var mojKraj = {
pobierzStolice: function() {
alert(this.mojaStolica);
Utwrz metod obiekt

u
o nazwie pobierzStoli
ce.
Uruchom t funkcj,
kiedy zostanie
wywoana metoda.
},
mojaNazwa : 'Polska',
Utwrz waciwoci
obiektu o nazwach
mojaNazwa i mojaStolica.
Nadaj wartoci
waciwociom.
Zawsze umieszczaj
obiekt midzy nawiasami
klamrowymi.
mojaStolica : 'Warszawa'
},
ie
Sp
ojn
ok
Jak si okazuje, prawie wszystko w jQuery i JavaScripcie jest obiektem.

Dotyczy to elementw, tablic, funkcji, liczb, a nawet acuchw tekstowych
wszystkie te obiekty maj waciwoci i metody.
jeste tutaj 255
obiekty wasnej roboty
Twrz obiekty wielokrotnego uycia

za pomoc konstruktorw
Naprawd poytecznym aspektem obiektw jest to, e mog one mie tak
sam struktur, ale przechowywa w swoich waciwociach (czyli zmiennych)
odmienne dane. Tak jak w przypadku tworzenia funkcji wielokrotnego
uycia co robilimy w rozdziale 3. moemy utworzy plan obiektu,
czyli konstruktor, dziki czemu bdziemy mogli korzysta z niego wiele razy.
Konstruktora obiektu mona uywa take w celu tworzenia instancji obiektu.
Konstruktor obiektu jest po prostu funkcj, zatem w celu jego utworzenia
korzystamy ze sowa kluczowego function zamiast z var. Nastpnie
uywamy sowa kluczowego new, aby utworzy now instancj obiektu.
Nazwa obiektu
Parametry (argumenty) funkcji
function mojaOsoba(a,b){
this.imie = a;
Waciwoci obiektu
mojaOsoba
imie
wiek
Nadaj wartoci
waciwociom
obiektu.
this.wiek = b;
Obiekt jako
diagram UML
}
Hm, zupenie jak plan domu.
Jeli zaprojektuj go raz,
bd mg korzysta z niego
wci na nowo. Dziki temu
zaoszczdz czas!
WYSIL
SZARE KOMRKI
Zastanw si nad miejscem, w ktrym
moesz uy tych obiektw.
256
Rozdzia 6.
jquery i javascript
Interakcja z obiektami
Obiekty mog przyjmowa rne ksztaty i rozmiary. Kiedy utworzysz instancj obiektu
na podstawie wzoru utworzonego przez Ciebie albo przez kogo innego bdziesz
mg z ni pracowa, uywajc operatora kropki (.). Aby zyska pojcie na temat tego,
jak dziaaj obiekty, przyjrzyjmy si obiektom mojKraj i mojaOsoba, ktre przed chwil
zdefiniowalimy.
Konwencja stosowania
operatora kropki wyglda
nastpujco: nazwa_obiektu.
nazwa_metody() albo nazwa_
obiektu.nazwa_waciwoci()
Wywoaj metod pobierzStolice.

W wyniku na stronie zostanie
wywietlona nazwa Warszawa.
mojKraj.pobierzStolice();
alert(mojKraj.mojaNazwa);
Uyj polecenia new, aby utworzy
now instancj obiektu.
Uzyskiwanie dost
pu do
waciwoci mojaN
azwa.
W wyniku na stronie
zostanie wywietlona
nazwa Polska.
@3 3R FS3833LR-
Utwrz nowe instancje
obiektu mojaOsoba
o nazwach aktor1
i aktor2.
Przeka nowej funkcji te

wartoci w parametrach,
aby przypisa je do
waciwoci obiektw.
var aktor2 = new mojaOsoba('Maria', '33');

alert(aktor1.imie);
alert(aktor2.wiek);
Uzyskiwanie dostpu do
waciwoci wiek instancji
obiektu mojaOsoba o nazwie
aktor2 (w tym przypadku 33).
Uzyskiwanie dostpu do waciwoci

imie instancji obiektu mojaOsoba
o nazwie aktor1.
W wyniku na stronie
zostanie wywietlone
imi Jacek.
Chyba zaczynam rozumie, jak to

dziaa... Czy mgbym utworzy obiekt,
ktry reprezentowaby karty w talii
uywanej w barku Rusz Gow?
Tak! To niezy pomys!

Skonfigurujmy stron HTML, a nastpnie spjrzmy, jak
moemy zabra si za tworzenie obiektu karty do gry.
jeste tutaj 257
zacznijmy ju t gr
Konfiguracja strony
#controls{
clear:both;
Korzystajc z poniszych informacji, utwrz pliki HTML i CSS. Nie

zapomnij te o pliku my_scripts.js w folderze scripts. Na kolejnych
stronach tej ksiki bdziemy dodawa do niego ca mas kodu.
Wszystkie rdowe obrazy potrzebne w tym rozdziale moesz
pobra z ftp://ftp.helion.pl/przyklady/jquerg.zip.
}
#my_hand{
clear:both;
border: 1px solid gray;
height: 250px;
width: 835px;
Zrb to!
}
h3 {
display: inline;
#3??W W%+#,
}
<!DOCTYPE html>
.current_hand{
<html>
float:left;
<head>
}
&G&3LRS3LR9ZJF\K&G
<link href="styles/my_style.css" rel="stylesheet">
</head>
my_style.css
<body>
<div id="main">
%G&RS38?R R3 K%G
<h3 id="hdrTotal"></h3><h3 id="hdrResult"></h3>
<div id="my_hand">
</div>
Czy ju niedugo
bd moga zabra
si za rozdawanie
kart?
<div id="controls">
<div id="btnDeal">
<img src="images/deck_small.jpg">
</div>
</div>
</div>
</body>
</html>
index.html
258
Rozdzia 6.
jquery i javascript
Jazda prbna
Otwrz w swojej ulubionej
przegldarce stron index.html,
ktr wanie utworzye, aby
zobaczy jej podstawow struktur.
wiczenie
Posugujc si diagramem UML obiektu reprezentujcego kart pokazanym poniej, utwrz obiekt
wielokrotnego uycia o nazwie card, ktry przyjmuje trzy parametry o nazwach name, suit i value.
Parametry te powinny by wartociami waciwoci obiektu. Nasz obiekt nie bdzie mie adnych metod.
Fragment kodu napisalimy za Ciebie.
card
function card(
) {
name
suit
value
jeste tutaj 259
rozwizanie wiczenia
Rozwizanie
wiczenia
Oto Twj obiekt card. Umie go w pliku my_scripts.js wewntrz sekcji $(document).
ready(function(){ });. Na razie powinien to by jedyny kod w tym pliku.
uywana
moga by
Aby funkcja skorzystaj ze sowa
e,
wielokrotni function.
kluczowego
card
name
suit
value
e ) {
function card( name, suit, valu
this.name = name;
this.suit = suit;
this.value = value;
Przypisz argume
waciwoci obieknty do
tu.
my_scripts.js
Nie istniej
gupie pytania
P: Jaka jest rnica midzy

obiektami jednokrotnego
i wielokrotnego uycia?
O: Obiekty jednokrotnego uycia
to po prostu zmienne zdefiniowane

w celu przechowywania wielu informacji.
Z kolei obiekty wielokrotnego uycia
su wanie temu, na co wskazuje ich
nazwa wielokrotnemu uyciu. Po
zdefiniowaniu szablonu takiego obiektu
z jego waciwociami i metodami moesz
utworzy tyle jego kopii, ile tylko chcesz
kad z innymi informacjami opisujcymi
ten obiekt.
P: Zdaje si, e korzystasz z rnych

sposobw nadawania wartoci
waciwociom. Czy tak mona?
O: Tak, korzystam z rnych sposobw

i jest to dopuszczalne. Wartoci moesz
260
Rozdzia 6.
przypisywa waciwociom, uywajc

operatora przypisania (=) albo symbolu
dwukropka (:), tak jak to robilimy
w przypadku naszych obiektw. Obie
metody s poprawne i mona je stosowa
zamiennie.
P: Czy jest jeszcze co na temat
obiektw, czego mi nie powiedziae?
O: To trudne pytanie. Obiekty
w JavaScripcie to do zoony temat.

W dalszej czci tej ksiki bdziemy
korzysta z Obiektowej Notacji
JavaScriptu znanej te jako JSON. Za
pomoc JSON uzyskujemy dostp do
waciwoci w nieco inny sposb, ktry
mona stosowa rwnie do naszych
obiektw JavaScript. Oto podstawowa
notacja. Zamiast pisa:
obiekt.moja_wlasciwosc
moesz napisa:
obiekt['moja_wlasciwosc']
i uzyska ten sam wynik dostp do
wartoci waciwoci moja_wlasciwosc.
P: Skd si wzi UML?

O: UML narodzi si w poowie
lat 90., kiedy rne firmy staray si

stworzy prost metod opisywania
obiektw. W tym czasie pojawio si kilka
wersji, gdy prywatne przedsibiorstwa
rywalizoway ze sob o to, aby ich
rozwizanie zostao przyjte jako standard.
Na szczcie taki standard istnieje i kady,
kto uywa UML, bdzie w stanie czyta
i rozumie diagramy oraz informacje UML
pochodzce z rnych rde.
jquery i javascript
Tak wic nasz obiekt reprezentujcy
kart bdzie superuyteczny, ale
cigle potrzebujemy jakiego sposobu
na zapamitanie poszczeglnych kart
w trakcie gry, zgadza si?
Masz racj.
Potrzebujemy sposobu na przechowywanie
i odczytywanie kart, kiedy zostan one ju
rozdane. Szczliwie widzielimy ju, jak
mona to zrobi...
To znowu ja.
Pracowae ju
troch ze mn
w rozdziale 4.
Powrt tablic
Jak ju widzielimy, moemy zgrupowa wiele elementw w pojedynczej strukturze
zwanej tablic. Elementy tablicy niekoniecznie musz by ze sob powizane,
ale odczytywanie ich wartoci jest wwczas o wiele atwiejsze. Ju w rozdziale 4.
zobaczylimy, jak selektor jQuery zwraca elementy i zapisuje je w tablicy.
Teraz skorzystamy z JavaScriptu, aby mie z tablic jeszcze wicej poytku.
Zmienne w tablicy mog by dowolnego typu mog by acuchami tekstowymi,
liczbami, obiektami, a nawet elementami HTML. Istnieje kilka sposobw na tworzenie
wasnych tablic:
Utwrz pust
tablic za pomoc
sowa kluczowego
new.
var my_arr1 = = Array();
Utwrz tablic za
kluczowego new pomoc sowa
powinny by jej oraz poka, jakie
wartoci.
var my_arr2 = = Array*M`g\MQMT?MQMjMQMA

M+;
var my_arr3 = mM`g\MQMT?MQMjMQMA
Mn;
Utwrz tablic bez sowa kluczowego
new, ale nadaj wartoci, umieszczajc
je midzy nawiasami kwadratowymi [ ].
Jak ju wspomnielimy wczeniej, tablice te

s obiektami, co znaczy, e maj swoje metody
i waciwoci. Popularn metod tablicow jest
length, ktra zwraca liczb elementw tablicy.
Dostp do waciwoci length mona uzyska
za pomoc skadni nazwa_tablicy.length.
2EHMU]\MWR
Nie ma rnicy midzy

poszczeglnymi sposobami
tworzenia tablic.
Powszechnie miesza si i dopasowuje rne sposoby

w zalenoci od przeznaczenia tablicy. Sprawd haso metody
tablicowe JavaScriptu w swojej ulubionej wyszukiwarce, aby
pozna wszystkie metody, ktre ma obiekt tablicowy.
jeste tutaj 261
dostp sprowadza si do indeksu
Dostp do tablic
W przeciwiestwie do tworzenia tablic istnieje tylko jeden sposb na odczytywanie
informacji zapisanych w tablicy. Tablice s indeksowane od zera, co znaczy, e ich
pozycje (indeksy) rozpoczynaj si od 0. Korzystalimy z indeksw w rozdziale 3.,
tak wic zawsze moesz tam powrci, jeli czego nie kojarzysz.
Pierwszy element listy ma

indeks 0, drugi indeks 1 itd.
Aby dosta si do elementu

tablicy, zawsze uywaj nawiasw
prostoktnych [ ] .
alert( "9m0n ) ;
KKHR3&3 9#S3F
Oto nazwy tablic,
ktre utworzylimy
na stronie 261.
alert( my_arr3[9] );
Podczas odczytywania tablicy

z uyciem indeksu nie trzeba
stosowa cudzysoww.
KKHR3&3 9#S3F3#3
Prba odczytania nieistniejcego

indeksu zakoczy si bdem
Undefined index.
KKHR8?Z8J\?#F3&S
Indeks elementu listy

odnosi si do miejsca,
w ktrym element
ten wystpuje na
licie.
Dobra, mamy tablic z jak

zawartoci, ale czy ju
zostaniemy z tym, co tam
woylimy na samym pocztku?
Oczywicie, e nie!
Dodawanie, zmienianie i usuwanie
elementw z tablicy jest bardzo proste.
Zerknijmy, jak to robi.
262
Rozdzia 6.
jquery i javascript
Dodawaj i aktualizuj elementy tablicy

Do tablicy moemy doda tyle elementw, ile tylko chcemy. W przykadzie na
poprzedniej stronie wstpnie nadalimy wartoci niektrym elementom tablic
my_arr2 i my_arr3, ale tablic my_arr1 pozostawilimy pust. Moemy jednak
dodawa elementy do tablic oraz je aktualizowa i znowu rzecz sprowadza si do
indeksw. Oto kilka rnych sposobw na zaktualizowanie tablicy:
Nadaj warto pierwszemu
elementowi tablicy my_arr1.
my_arr1m:n = V ;

KKHXF&33R 33# 3LS3
Dodaj do tablicy my_arr1
drug warto.
my_arr1[1] = "Hiszpania" ;
Zaktualizuj warto pierwszego
elementu w tablicy my_arr1.
A3 HJL%
KKHXF&33R 33#HJL%
my_arr3[2] = "Kanada";
Zaktualizuj warto trzeciego

elementu w tablicy my_arr3.
KKHXF&33R 33#33?3
wiczenie
W swoim pliku my_scripts.js po kodzie obiektu card utwrz tablic o nazwie deck
z 52 kartami, jakie zawiera standardowa talia kart.
Moesz skorzysta z obiektu, ktry wanie utworzye, i wywoa za kadym razem
konstruktor z waciwymi parametrami w celu utworzenia wszystkich kart (od asa do
krla) dla kadego z kolorw (trefl, kier, karo i pik), nadajc im wszystkim wartoci,
tak e as bdzie wart 11, dwjka 2, trjka 3 itd.
jeste tutaj 263
rozwizanie wiczenia
Rozwizanie
wiczenia
Okrel nazw tablicy.
Twj plik my_scripts.js powinien teraz zawiera tablic o nazwie deck z 52 kartami, tak jak
w standardowej talii do gry, a take obiekt card. Powiniene uy tego obiektu i kadorazowo
wywoa konstruktor z waciwymi parametrami, aby utworzy kad z kart.
Przeka trzy parametry dla
kadego obiektu klasy card.
var deck = [
new card('As', 'Kier',11),
new card('Dwjka', 'Kier', 2),
new card('Trjka', 'Kier', 3),
FL3 ?ZFI R3
new card('Krl', 'Kier', 10),

new card('As', 'Karo', 11),
Ale teraz mamy w tablicy

mnstwo kart. Wyglda na to,
e bdziemy musieli napisa
ogromn ilo kodu, by si do
nich dosta. Co za bl!
new card('Dwjka', 'Karo', 2),

new card('Trjka',
'Karo', 3),
new card('Krlowa', 'Karo', 10),

new card('Krl', 'Karo', 10),
new card('As', 'Trefl', 11),
Niekoniecznie.
new card('Dwjka', 'Trefl', 2),
Kady element nadal

bdziemy odczytywa na
podstawie jego indeksu,
ale moemy skorzysta
z techniki podobnej do
each, ktr widzielimy
w rozdziale 3. Umoliwi
nam to signicie kolejno
po kady element bez
koniecznoci tworzenia
ton kodu dla kadej z kart.
new card('Krl', 'Trefl', 10),

new card('As', 'Pik', 11),
new card('Dwjka', 'Pik', 2),
new card('Trjka', 'Pik', 3),
new card('Walet', 'Pik', 10),

new card('Krlowa', 'Pik', 10),
Nadesza pora, aby uda

si na wycieczk po
Ptlowicach...
new card('Krl', 'Pik', 10)

];
Pamitaj, eby wartoci tablicy
zamkn
midzy nawiasami kwadratowym
i.
264
Rozdzia 6.
my_scripts.js
jquery i javascript
Zrb to jeszcze raz (i jeszcze raz, i jeszcze raz, i...)

W grze w blackjacka bdziesz umieszcza karty w naszych tablicach i odczytywa informacje
o nich do czsto. Na szczcie JavaScript jest przygotowany na taki scenariusz dziki
ptlom. Jeszcze lepsza wiadomo jest taka, e ju wczeniej to robie. W rozdziale 3.
korzystae z metody jQuery each, aby pobiera elementy na podstawie selektora jQuery.
W tym przypadku mamy jednak wicej opcji, gdy JavaScript udostpnia kilka rnych
typw ptli, kady o nieco innej skadni i innym przeznaczeniu.
Ptla for doskonale si nadaje do powtarzania kodu
okrelon liczb razy. Liczba ta powinna by znana przed
rozpoczciem ptli w przeciwnym razie ptla mogaby
wykonywa si w nieskoczono. W zalenoci od wartoci
zmiennej ptla for moe si nie wykona wcale albo moe
przebiega wiele razy.
Ptla do...while wykona kod raz, a nastpnie bdzie

wykonywa ten sam kod a do spenienia okrelonego
warunku takiego jak zmiana wartoci z prawdy na fasz (lub
odwrotnie) albo osignicie w kodzie okrelonej wartoci
przez licznik. Ptla do...while moe wykona si raz albo
wiele razy.
Cykl powtrze ptli for:
Cykl powtrze ptli do...while:
1 ... 2 ... 3 ... 4 ... 2 ... 3 ... 4 ...
1 ... 3 ... 4 ... 2 ... 3 ... 4 ... 2 ...
Jeden cykl ptli
Kolejny cykl ptli
Ptle for pozwalaj Ci powtarza

kod okrelon liczb razy.
Jeden cykl ptli
Kolejny cykl ptli
Ptle do...while pozwalaj Ci

wykona kod raz, a nastpnie
powtarza go a do spenienia
okrelonego warunku.
Kada ptla, niezalenie od rodzaju, skada si z czterech rnych czci:

1
Inicjalizacja
Odbywa si raz przed uruchomieniem ptli.
Sprawdzenie warunku
Sprawdzenie, czy ptla powinna si zatrzyma, czy te kontynuowa
kolejny przebieg kodu. Sprawdzenie warunku polega zwykle na
sprawdzeniu wartoci zmiennej.
Na szczcie lubi
robi rne rzeczy
wiele razy!
Akcja
Jest to kod powtarzany podczas kadego przebiegu ptli.
Aktualizacja
Ta cz aktualizuje zmienne uywane do sprawdzania warunku, aby
umoliwi stwierdzenie, czy ptla powinna zosta powtrzona, czy te nie.
jeste tutaj 265
zapany w ptl
Ptle w zblieniu
Przygldajc si bliej rnym rodzajom ptli, o ktrych wspomnielimy, moemy stwierdzi, e
kada z nich zawiera cztery gwne elementy, ale rozmieszczone w innej kolejnoci. Kolejno ta
odzwierciedla niektre z zasadniczych rnic wystpujcych midzy poszczeglnymi typami ptli.
Ptle for
Sekcja midzy nawiasami okrela,
jak dugo bdzie trwa ptla.
Zaczyna
si sowem
kluczowym for.
1
Zadeklaruj w ptli
zmienn, ktra
bdzie uywana do
ustawiania indeksu
tablicy. Zmienna
ta bdzie uywana
wycznie wewntrz
ptli.
Zawarto ptli
zawsze umieszczaj
midzy nawiasami
klamrowymi.
@3 A3 -&W%

3
alert( my_arr2[i] ); .length

Dostp do tablicy
jest uzyskiwany za
pomoc zmiennej
zdefiniowanej w ptli.
Zwikszaj warto
indeksu w miar
wykonywania si ptli.
jest metod
czsto uywan we
wszystkich tablicach.
Podaje ona, ile
elementw ma tablica
.
Zamknij ptl nawiasem

klamrowym.
Cykl powtrze ptli for:

1 ... 2 ... 3 ... 4 ... 2 ... 3 ... 4 ...
Pierwszy cykl ptli
Kolejny cykl ptli
Ptle do...while
Zadeklaruj zmienn, ktra
bdzie uywana do ustawiania
indeksu tablicy.
var i=0;
Pamitaj, e ta zmienna
bdzie uywana wycznie
wewntrz ptli.
Zacznij od sowa kluczowego do.
Pamitaj, eby
umieszcza
ptle midzy
nawiasami
klamrowymi.
do{
3
alert(my_arr2[i]);
4
W miar wykonywania si
ptli zwikszaj zmienn
warunkow.
}while (i<=5);
Rozdzia 6.
1 ... 3 ... 4 ... 2 ... 3 ... 4 ... 2 ...
Ptl zakocz sowem

kluczowym while.
266
Cykl powtrze ptli do...while:
Pierwszy cykl ptli
Kolejny cykl ptli
jquery i javascript
Niele! Te ptle powinny nam pomc
w szybkim przechodzeniu przez
wszystkie karty. Zrobimy t aplikacj
w okamgnieniu. Co dalej?
Franek: No dobrze. Mamy ju nasz tablic obiektw typu card, ale

musimy mie moliwo losowego wycignicia karty, kiedy je rozdajemy,
prawda?
Jzek: Tak i na szczcie napisalimy funkcj getRandom w rozdziale 3.
Poda nam ona liczb losow za kadym razem, kiedy bdziemy wyciga
kart z tablicy.
Kuba: I co zrobimy z t liczb?
Franek: Bdziemy musieli j zapamita. Dziki temu bdziemy mie
moliwo dodania do siebie wartoci kart, eby sprawdzi, czy gracz
przekroczy 21, czy nie.
Jzek: Jest jeszcze jeden powd. Nie moemy rozda tej samej karty dwa
razy, wic musimy te sprawdzi, czy nie zostaa ona ju wczeniej rozdana.
Kuba: Czy do pamitania kart moemy uy zmiennej?
Franek: Moemy uy zmiennej tablicowej...
Franek
Kuba
Jzek
Jzek: Dobrze mylisz! Nie musimy nawet zapamitywa kart wystarczy,

e bdziemy przechowywa wartoci ich indeksw. W ten sposb bdziemy
mogli sprawdza, czy karta znajduje si w naszej tablicy used_cards.
Kuba: Jestem pod wraeniem! Skd bdziemy wiedzie, czy dana warto
jest w tablicy?
Franek: Skorzystamy z metody jQuery o nazwie inArray.
Jzek: Brzmi cakiem wygodnie, ale myl, e bdziemy potrzebowa kilku
funkcji, eby to zrobi. Musimy dosta liczb losow od 0 do 51 i sprawdzi,
czy nie zostaa ona ju wczeniej uyta. Jeli tak, musimy sprbowa jeszcze
raz. Jeli nie, musimy wycign z talii waciw kart i zapamita jej
indeks. Potem musimy jeszcze pokaza t kart graczowi.
Kuba: Zapowiada si sporo roboty! Jak bdziemy pokazywa karty
graczowi?
Franek: Mamy ju rysunki kart, ktre s uoone wedug koloru i nazwy,
tak wic moemy skorzysta z tych atrybutw obiektu card, eby wywietli
obrazek na ekranie.
Jzek: Wanie! Moemy utworzy element drzewa DOM i doczy go do
elementu sekcji my_hand, ktry znajduje si ju na naszej stronie.
Franek: Ten obiekt klasy card ju teraz zaczyna nam procentowa...
Bierzmy si do roboty!
jeste tutaj 267
zabawa w chowanego ze zmienn
Szukanie igy w stogu siana

Czsto bdziesz musia sprawdzi, czy zmienna znajduje si ju w tablicy, czy nie,
eby unikn powielania danych albo eby kod nie dodawa wielokrotnie tych samych
elementw do tablicy. Moe to by szczeglnie przydatne, jeli korzystasz z tablic do
realizowania takich funkcjonalnoci jak koszyk z zakupami albo lista ycze.
, gdzie
dowiedzie si
kiedy chcemy szym stogu?
,
i
ob
zr
co
na
Ale
ajduje si w
ta warto zn
Utwrz tablic dla

znajdujcych si rzeczy
w stogu siana.
var stogSiana = new Array('siano', 'mysz', MMF?J

jQuery udostpnia ca mas metod uytkowych pozwalajcych na wydajniejsze
wykonywanie okrelonych zada, w tym sprawdzajcych, jakim typem przegldarki
posuguje si uytkownik, zwracajcych biecy czas, scalajcych tablice albo
usuwajcych z tablic powielone wartoci.
Metod uytkow przydatn w tej szczeglnej sytuacji jest metoda inArray. Zwraca
ona miejsce w tablicy, w ktrym znajduje si szukany element (jego indeks), jeeli taki
element istnieje. Jeli w tablicy nie ma szukanej wartoci, zostanie zwrcona liczba
1. Tak jak inne metody uytkowe inArray nie wymaga selektora jest wywoywana
bezporednio przez funkcj jQuery albo skrt.
Utwrz zmienn do
przechowywania wartoci
zwracanej przez funkcj.
Warto, ktrej
szukasz
Tablica, w ktrej
chcesz szuka
var index = $.inArray( value, array );

Skrt jQuery
Wywoanie metody uytkowej inArray
Oto warto,
ktrej szukasz.
Oto tablica, ktr

chcesz przeszuka.
@3 ?RAW&! 3WJ3W33
WYSIL
SZARE KOMRKI
Co musi sprawdzi aplikacja w blackjacku, eby stwierdzi,
czy okrelona warto zostaa ju uyta?
268
Rozdzia 6.
jquery i javascript
Magnesiki jQuery
Poukadaj magnesiki, aby uzyska kod realizujcy kilka funkcji, ktre pomog Ci ukoczy gr w backjacka.
Kod powinien zawiera dwie funkcje deal i hit oraz suchacza zdarzenia kliknicia dla elementu
o identyfikatorze btnDeal, a take now zmienn tablicow o nazwie used_cards, w ktrej bd
pamitane rozdane ju karty.
var used_cards = new ___________();
function ___________{
getRandom
@3 -
hit();
}
deal()
}
used_cards
@3 A93%& AAAAAAAAAAAAAAAAAAA9
return my_num;
}
'src'
hit()
function __________{
var good_card = false;
do{
var index = ________________(52);
while
if( !$.inArray(index, ______________ ) > -1 ){
good_card = true;
Array
var c = deck[ index ];
_____________[used_cards.length] = index;
hand.cards[hand.cards.length] = c;
"#my_hand"
var $d = $("<div>");
$d.addClass("current_hand")
.appendTo(_____________);
$("<img>").appendTo($d)
3 AAAAAAA3WKL3 ?KL9KL3S#W
.fadeOut('slow')
.fadeIn('slow');
}
function
}__________(!good_card);
used_cards
good_card = false;
}
$("#btnDeal").click( _____________(){
Math.random()
deal();
$(this).toggle();
});
my_scripts.js
jeste tutaj 269

Oto ukoczone funkcje deal i hit, suchacz zdarzenia kliknicia dla elementu o identyfikatorze btnDeal,
a take nowa zmienna tablicowa used_cards pamitajca, ktre karty zostay ju rozdane.
Utwrz tablic przechowujc
Array
var used_cards = new ___________();
rozdane karty.
deal(
)
function ___________{
@3 -
Tutaj uyj ptli w celu dwukrotnego wywoania
hit();
funkcji hit.
Jeszcze raz
}
funkcja getRandom!
}
@3 A93%& AAAAAAAAAAAAAAAAAAA9
Math.random()
return my_num;
}
hit()
function __________{
Za pomoc funkcji inArray
var good_card = false;
sprawd, czy nie masz ju karty,
do{
ktr wybrae.
getRandom
var index = ________________(52);
Zmienna
if( !$.inArray(index, ______________
used_cards ) > -1 ){
warunkowa
kontrolujca
good_card = true;
We kart z talii.
ptl do...while
var c = deck[ index ];
used_cards
_____________[used_cards.length]
= index;
hand.cards[hand.cards.length] = c;
Wstaw indeks
do tablicy usedkarty
var $d = $("<div>");
_cards.
$d.addClass("current_hand")
.appendTo(______________);
"#my_hand"
$("<img>").appendTo($d)
3 AAAAAAA3WKL3 ?KL9KL3S#W
'src'
Karta rozbynie
.fadeOut('slow')
na ekranie.
W celu utworzenia cieki
.fadeIn('slow');
do rysunku z kart
}
skorzystaj z waciwoci
obiektu card.
}__________(!good_card);
while
Jeli karta zostaa
j
bu
spr
ju uyta,
good_card = false;
ponownie.
}
function
$("#btnDeal").click( _____________(){
deal();
$(this).toggle();
Po klikniciu wywoaj funkcj deal.
});
270
Rozdzia 6.
my_scripts.js
jquery i javascript
Jazda prbna
W pliku my_scripts.js po tablicy deck dodaj cay kod z ostatniego wiczenia
z magnesikami i wyprbuj go w przegldarce. Kliknij tali kart, aby przeprowadzi
kolejne rozdanie w blackjacku.
Hej! Mog rozdawa tylko

po dwie karty. Jako rozdajca wygrywam
prawie zawsze! Moe powinnimy zrobi
uczciw gr? Czy potrafisz znale
sposb na rozdawanie wikszej
liczby kart?
Oczywicie. Korzystajc z funkcji hit, ktr utworzylimy,
moemy doda opcj wydawania wikszej liczby kart z talii.
Potrzebujemy tylko czego, co t funkcj wywoa, na przykad przycisku lub
czego podobnego. Przy okazji pojawi si nowy problem: bdziemy musieli
zapamita, ktre karty zostay rozdane, i policzy punkty, eby stwierdzi,
czy gracz ju przegra, czy jeszcze nie.
WYSIL
SZARE KOMRKI
Czy potrafisz wskaza, z czego moglibymy skorzysta,
aby zapamita wszystkie te informacje?
jeste tutaj 271
Kod
gotowy do
wysmaenia
Poniewa jeste ju profesjonalist w zakresie stylu i struktury, pokaemy Ci

zaktualizowany kod w plikach index.html i my_style.css, eby mg porwna go
ze swoim. Powiniene zauway kilka zmian na swojej stronie, kiedy dodasz do
niej nowe kody HTML i CSS. Ju niedugo pospinamy je ze sob.
#controls{
<!DOCTYPE html>
clear:both;
<html>
<head>
.current_hand{
&G&3LRS3LR9ZJF\K&G
float:left;
<link href="styles/my_style.css" rel="stylesheet">

}
</head>
<body>
#my_hand{
<div id="main">
clear:both;
%G&RS38?R R3 K%G
border: 1px solid
<h3 id="hdrTotal"></h3>
gray;
<h3 id="hdrResult"></h3>
<div id="my_hand">
height: 250px;
</div>
width: 835px;
<div id="controls">
<div id="btnDeal">
}
w
Dla nowych przycisk
dodaj kod CSS.
-1]Q-1g Q
<img src="images/deck_small.jpg">
-1P !,
</div>
!
2 0
1]
owe
Dodaj n i do
k
is
c
y
rz
p
nia
sterowa
.
gr
2
0
! ! "!
#
}
</div>
1g
h3 {
! !! "!
#
display: inline;
</div>
#3??W W%+#,
</div>
</div>
</body>
my_style.css
</html>
index.html
272
Rozdzia 6.
jquery i javascript
Nie istniej
gupie pytania
P: Czy s jeszcze jakie inne typy
ptli, o ktrych powinienem wiedzie?
O:
Tak. Istnieje ptla while, ktra

jest bardzo podobna do ptli do...
while z tym wyjtkiem, e warunek jest
sprawdzany na pocztku. Istnieje te ptla
for...in, ktra odczytuje waciwoci
obiektu i podaje warto kadej z nich.
P: No wic uruchomiem ptl. Czy
mog j zatrzyma w trakcie dziaania?
O:
Tak, moesz za pomoc bardzo

prostego polecenia break. Wywoanie
go w dowolnym miejscu ptli spowoduje
jej zatrzymanie i przejcie do nastpnego
fragmentu kodu tu za ni.
P: Co to jest appendTo? Do tej pory

widziaem tylko append. Czy jest
midzy nimi jaka rnica?
O:
Przy append selektor wywoujcy

metod stanowi pojemnik, do ktrego
wstawiana jest zawarto. Z kolei przy
appendTo zawarto wystpuje przed
metod jako wyraenie selektora albo jako
znacznik HTML utworzony w locie i jest
wstawiana do docelowego pojemnika.
Posugujc si widocznym poniej diagramem UML, utwrz jednorazowy obiekt o nazwie

hand. Waciwo cards powinna by now pust tablic. Waciwo current_total
powinna mie warto 0 (zero). Metoda sumCardTotal ma pobiera w ptli wszystkie karty
z waciwoci cards, sumowa ich wartoci, po czym wpisywa otrzymany wynik do waciwoci
current_total. Nastpnie uyj waciwoci current_total do nadania wartoci elementowi
o identyfikatorze hdrTotal. Pocztek obiektu utworzylimy za Ciebie.
wiczenie
var hand = {
cards : new Array(),
current_total : 0,
hand
sumCardTotal : function(){
cards
current_total
sumCardTotal()
}
};
jeste tutaj 273
rozwizanie wiczenia
Masz ju wic obiekt hand z waciwoci cards (bdc tablic) oraz z funkcj, ktra przebiega
w ptli przez tablic cards, znajduje biec kart i aktualizuje czn warto kart.
Rozwizanie
wiczenia
var hand = {
current_total : 0,
Waciwo cards bdzie

now tablic.
hand
cards
current_total
ci
0.
aciwo
Nadaj w total warto
current_
this.current_total = 0;
for(var i=0;i<this.cards.length;i++){
var c = this.cards[i];
this.current_total += c.value;
sumCardTotal()
Przechod w ptli
przez tablic cards.
Pobierz z tablicy
biec kart.
Dodaj warto do
zmiennej current_tota
l.
this.current_total );
$("#hdrTotal").html("Razem: " +
Wypisz na ekranie, w elemencie
hdrTotal, biec warto sumy
narastajcej.
};
Ale nie widz tu niczego,

co powiedziaoby mi, e
wygraam. Czy nie zbior
po prostu wszystkich kart?
Z ca pewnoci tego nie chcemy.

W takim przypadku nie byoby sposobu
na stwierdzenie, kto wygra. W oparciu
o reguy opisane w e-mailu z barku
Rusz Gow musimy okreli, czy
wygraa, biorc pod uwag kilka rnych
kryteriw. Przyjrzyjmy si im jeszcze raz.
274
Rozdzia 6.
Jeli suma wartoci kart grajcego jest

wiksza ni 21, grajcy przegrywa i musi
zacz od pocztku. Koniec gry.
Jeli suma wartoci kart wynosi dokadnie

21, grajcy ma blackjacka i nastpuje
koniec gry.
Jeli suma wartoci kart wynosi 21 albo

mniej, a grajcy dosta ju pi kart, to
gra si koczy, a grajcy wygrywa.
W przeciwnym razie grajcy ma do

wyboru otrzymanie kolejnej karty albo
zakoczenie gry.
jquery i javascript
Czas na podjcie decyzji... znowu!

Ju w rozdziale 3. przygldalimy si uyciu logiki warunkowej w celu
uruchamiania rnych fragmentw kodu w zalenoci od decyzji, jakie
podejmowa Twj program na podstawie posiadanych informacji.
To, co chcemy sprawdzi
Pocztek
instrukcji if
if( mojeBool == true ) {

Zmienna JavaScriptu
Mona
Operator porwnania.
e.
wn
r
o
jak
ta
go czy
KK I8LX^
Kod, jaki chcemy uruchomi, jeli
to, co sprawdzimy, okae si by
prawd.
}else{
KKH# ZLF 3ZZ I8LXW^

}
Jak si okazuje, istnieje dodatkowa moliwo podejmowania wicej ni
tylko jednej decyzji w danym czasie. czc instrukcje if i else w zoone
polecenie else if, moesz sprawdza wiele warunkw w jednym bloku
warunkowym. Przyjrzyjmy si temu bliej.
To, co chcemy
sprawdzi
if( mojaLiczba < 10 ){

KK I8LX^
}else if ( mojaLiczba
Kolejny warunek,
jaki chcemy
sprawdzi
> 20 ) {
KK I8LXW^
}else{
KK3RLZ I8LXSZLZW^
}
WYSIL
SZARE KOMRKI
Czy wiesz, w ktrym miejscu swojego kodu mgby uy instrukcji if / else if / else?
jeste tutaj 275
jeeli to lub tamto albo siamto!
Operatory porwnania i operatory logiczne

Aby instrukcje warunkowe (takie jak if / else albo do...while) dziaay prawidowo,
musz mie moliwo podejmowania waciwych decyzji w oparciu o sprawdzane
informacje. W tym celu korzystaj one z operatorw logicznych i operatorw porwnania,
ktre pomagaj im w podejmowaniu decyzji. W jzyku JavaScript istnieje kilka rnych
operatorw porwnania oraz trzy operatory logiczne, a take operator skrtu dla
instrukcji if / else nazywany operatorem trjargumentowym. Z niektrymi z nich
ju si spotkalimy, a oto pena ich lista:
Prawda, jeli a jest

rwne b

a != b
Rwno
a == b
Dokadna rwno
a === b
Prawda, jeli a jest rwne
b pod wzgldem wartoci
i typu
ne
Prawda, jeli a jest r
od b

a<b
Operatory porwnania

a >= b
Prawda, jeli a ma
warto mniejsz
ni b
Mniejsze lub rwne

a <= b

a>b
Prawda, jeli a ma warto

wiksz lub rwn b
Prawda, jeli a ma
b
warto wiksz ni
Prawda, jeli a ma wa
mniejsz lub rwn b rto
Operatory logiczne
Negacja
!a
Prawda, jeli a jest
faszywe lub nie
istnieje (w przypadku
elementw drzewa
DOM)
276
Rozdzia 6.
Lub
a || b
I
a && b
Prawda, jeli a jest

prawdziwe albo b jest
prawdziwe, albo zarwno a,
jak i b s prawdziwe, ale nie
wtedy, gdy oba s faszywe
Prawda, jeli a jest

prawdziwe i b jest prawdziwe,
ale nie wtedy, gdy jedno
z nich jest faszywe
jquery i javascript
Zaostrz owek
Zaktualizuj swj obiekt hand, aby sprawdza, czy warto waciwoci current_total
spenia kryteria gry (cofnij si do wiadomoci e-mail, jeli nie pamitasz ju tych regu).
Oto istniejcy obiekt cznie z fragmentami nowego kodu, ktre powiniene uzupeni.
var hand = {
current_total : 0,
@3 %L3 ?&W%
%L9 A3&L@3&9
}
!%? 3&%&3Z+%L9 A3&
*?!#9'+,
)*-1g +# *
+0
)*-?P !
+#?
*PF8ZP\q8uS+0
.*?!# "
+,
)*-1g +# *
+0
)*-?P !
+#?
*5
S+0
.
! *# "
9'?!# !#
?@+,
)*-1g +# *
+0
)*-?P !
+#?
*!@S+0
}
Z
S2+
}
}
};
my_scripts.js
jeste tutaj 277
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Zaktualizowae metod sumCardTotal, tak aby uwzgldniaa logik

sprawdzajc warto rozdanych kart. Jak na tak prosty program
aplikacja ta zawiera mnstwo operacji warunkowych oraz logicznych.
var hand = {
current_total : 0,
@3 %L3 ?&W%
%L9 A3&L@3&9
}
!%? 3&%&3Z+%L9 A3&
*?!#current_total9'+,
)*-1g +# *
+0
)*-?P !
+#?
*PF8ZP\q8uS+0
} else if*?!# "
== 21+,
otal
Sprawd, czy current_t
21.
od
e
ksz
wi
t
jes
Sprawd, czy curre
nt_total
jest rwne 21.
)*-1g +# *

+0
)*-?P !
+#?
*5
S+0
}else if(this.# "
<=9' &&?!# !#
?@+,
)*-1g +# *
+0
)*-?P !
+#?
*!@S+0
} else{
l
Sprawd, czy current_tota
jest mniejsze lub rwne 21
i czy rozdano ju 5 kart.
Z
S2+
}
}
};
W przeciwnym raz
ie nic
nie rb!
my_scripts.js
278
Rozdzia 6.
jquery i javascript
W dalszym cigu nie moemy
jednak dosta si do tych funkcji,
bo nie mamy nic, co by je
wywoywao, prawda?
No tak, jeszcze nie uporalimy si ze wszystkim.
Masz ju wszystkie fragmenty kodu HTML potrzebne do
wstpnego rozdania kart, poproszenia o kolejn kart oraz
do nowego rozdania. Nie pospinae ich jeszcze tylko ze sob.
Nie zapominaj te, e musisz wywoywa metod sumujc
wartoci kart za kadym razem, kiedy rozdajesz now kart.
Magnesiki jQuery
Poukadaj magnesiki w taki sposb, aby powsta kod funkcji, ktra doda do naszej aplikacji kilku
suchaczy zdarze. Suchacze powinni znale si w elementach o identyfikatorach btnHit
i btnStick. Zdarzenie btnHit powinno rozda kolejn kart, a btnStick pozwoli na rozpoczcie
nowej gry. Poza tym wywoaj metod sumCardTotal po rozdaniu kadej karty. Poniej zamiecilimy
fragment kodu z kocwki funkcji hit, eby go uaktualni.
}while(!_______________);
function
good_card = false;
hand.___________________();
toggle
good_card
)*-13
+#
*"""""""""""""*+,
'Od nowa!'

*+0
)*?!+#
*+0
)*-1]+#"""""""""""""*+0
#btnHit
)*-1g +#
*+0
.+0
)*""""""""""""""+#
* *+,
sumCardTotal
?*+0
.+0
)*-1g +#
* *+,
)*-?P !
+#?
*""""""""""""""+0
.+0
my_scripts.js
jeste tutaj 279

Kod ten tworzy funkcj, ktra dodaje kilku suchaczy zdarze do przyciskw dobierania karty
i wznawiania gry, a take wywouje metod sumCardTotal po rozdaniu kadej karty.
Powtarzaj ptl, a
znajdziemy dobr kart.
good_card
}while(!_______________);
good_card = false;
hand.___________________();
sumCardTotal
Rozdaj dwie rty.
pocztkowe ka
}
function
)*-13
+#
*"""""""""""""*+,

*+0
)*?!+#
*+0
)*-1]+#"""""""""""""*+0
toggle
)*-1g +#
*+0
Rozdaj jedn
kart.
Na koniec dobierania
karty pobierz sum
wartoci rozdanych
kart.
Ukryj przycisk
rozdawania, ale
poka przyciski
dobierania kart
i czekania.
.+0
#btnHit
)*""""""""""""""+#
*
*+,
Wywietl komunikat
Od nowa!.
?*+0
.+0
)*-1g +#
* *+,
'Od nowa!'
)*-?P !
+#?
*""""""""""""""+0
.+0
my_scripts.js
Nie istniej
gupie pytania
P: Czy w JavaScripcie istniej inne sposoby na

porwnywanie wartoci?
P:
Powiedziae, e istnieje skrt dla instrukcji if / else.

Co to za skrt?
O: W cisym tego sowa znaczeniu nie, ale istnieje inna metoda, O: Jest on nazywany operatorem trjargumentowym i korzysta
ktra jest uywana przy podejmowaniu decyzji. Nosi ona

nazw switch i moe dziaa z wieloma rnymi warunkami.
W sytuacjach, w ktrych musiaby pisa obszerne instrukcje
if / else if / else, czsto uycie switch moe okaza
si prostsze.
280
Rozdzia 6.
si w nim ze znaku zapytania do oddzielenia operacji logicznej od

podejmowanego dziaania, na przykad tak:
3G8A 9AL?A3&AL?
jquery i javascript
Jazda prbna
Kod, ktry wanie utworzye, dodaj do pliku my_scripts.js tu po funkcji hit.
Docz take aktualizacj kocwki samej funkcji hit i dokadnie przetestuj
program w swojej ulubionej przegldarce.
A wic to wszystko?
Czy ju skoczylimy?
Franek: Nie tak prdko. Cigle musimy jeszcze doda funkcj resetowania,
o ktr nas prosili. Dziki temu gracze bd mogli zacz jeszcze raz bez
potrzeby odwieania strony.
Jzek: Musimy take zagwarantowa, e gracze nie bd dostawali kart
z poprzedniej rozgrywki. Powinnimy si upewni, e wszystko czycimy.
Kuba: Ale jak to zrobi? Mamy elementy HTML, ktre dodalimy
dynamicznie, oraz nowe elementy w tablicy. Musimy je wszystkie wyczyci?
Franek: Tak. W obu tych przypadkach bdziemy musieli skorzysta z nieco
odmiennych technik, ale owszem, musimy si tego wszystkiego pozby.
Jzek: Znam potrzebne sztuczki! W jQuery mamy metod empty, natomiast
co do tablic, to jest kilka sposobw, ale nie wszystkie z nich dziaaj w kadej
przegldarce. Sprawdmy, jakie opcje bd najlepsze.
Kuba
Franek
Jzek
jeste tutaj 281
w czystym stanie
Czyszczenie w jQuery...
Czy pamitasz, jak w rozdziale 2. uywalimy metody jQuery
remove do usuwania na zawsze okrelonego elementu oraz
jego elementw potomnych z drzewa DOM? Takie podejcie
sprawdza si, jeeli chcesz usun element nadrzdny. Jeli
jednak chcesz zachowa gwny element, a zaley Ci tylko na
usuniciu jego zawartoci, moesz skorzysta z metody jQuery
empty, ktra podobnie jak remove wymaga selektora, ale
pozostawia dany element na swoim miejscu.
$("#my_hand").empty();
1
Obecna struktura
strony

"?
...jest jeszcze atwiejsze w JavaScripcie

Czsto okazuje si, e piszemy w jQuery, eby unikn
koniecznoci tworzenia wielu wierszy w JavaScripcie. Na szczcie
istnieje kilka sytuacji, w ktrych zrobienie czego w JavaScripcie
jest rwnie atwe jak w jQuery, i to jest wanie jedna z nich.
Chocia skadnia jest rna, to efekt kocowy bdzie taki sam
i nie musisz przy tym pamita, gdzie si znajdujesz w drzewie
DOM. Aby wyczyci tablic w JavaScripcie, nadajesz jej
waciwoci length warto 0 (zero):
div class=

"?
div class=
"?
Elementy, ktre
chcemy usun
used_cards.length = 0;
Prociej ju si chyba nie da, prawda?
A wic wszystko, co musimy

teraz zrobi, to sprawdzi,
co wymaga czyszczenia,
i bdziemy mieli problem
z gowy, zgadza si?
Tak, ale kolejno wykonywania czynnoci

jest wana.
Jako e bdziemy musieli rozda nowe karty po
restarcie, najpierw powinnimy wszystko wyczyci,
a dopiero potem przeprowadzi nowe rozdanie.
Musimy te uaktywni w naszym kodzie kolejny
element.
282
Rozdzia 6.
jquery i javascript
Zaostrz owek
Zaktualizuj swj plik index.html elementem podobnym do wszystkich pozostaych elementw
w sekcji przyciskw. Nadaj aktywnemu elementowi div identyfikator btnRestart. W jego
wntrzu umie rysunek restart_small.jpg z folderu images.
Zaktualizuj te plik my_scripts.js suchaczem zdarzenia kliknicia dla elementu btnRestart.
Powinien on oprni element my_hand, tablic used_cards oraz tablic cards w obiekcie
hand. Poza tym powinien przeczy nowe elementy div o identyfikatorach result oraz
itself, a take wyczyci html elementw hdrResult. Na koniec powinien on przeczy
i wywoa zdarzenie kliknicia dla elementu btnDeal.
<div id="btnStick">
<img src="images/stick_small.jpg">
</div>
______________________________
______________________________
index.html
__________________
<div id="_______"><img src="" id="imgResult">_________
</div>
</div>
<script src="scripts/jquery-1.7.js"></script>
$("#hdrResult").html('Od nowa!');
});
$("#btnRestart").click( function(){
_________.toggle();
$(this). _________
my_scripts.js
$("#my_hand")._________
$("#hdrResult").html('');
used_cards. _________= 0;
_________.length = 0;
hand. _________= 0;
$("#btnDeal").toggle()
. _________('click');
});
jeste tutaj 283
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Teraz masz ju przycisk resetowania przywracajcy wszystkim elementom takie wartoci, jakie
miay przed pocztkiem rozgrywki. Pozwala on na rozpoczcie gry od nowa. Dodaj jeszcze do
waciwoci length troch czarw w JavaScripcie i gotowe!
<div id="btnStick">
<img src="images/stick_small.jpg">
</div>
<div id="btnRestart">
Przycisk reset do
rozpoczynania gry
od nowa.
<img src="images/restart_small.jpg">
index.html
</div>
<div id="result"><img src="" id="imgResult"></div>

</div>
Niech wynik bdzie

bardziej oczywisty.
</div>
<script src="scripts/jquery-1.7.js"></script>
$("#hdrResult").html('Od nowa!');
$("result").toggle();
});
$("#btnRestart").click( function(){
my_scripts.js
$(#result").toggle();
$(this).toggle();
szystkim
Przywr w takie
m
to
elemen
kie
wartoci, ja cztku.
miay na po
$("#my_hand").empty();
$("#hdrResult").html('');
used_cards.length = 0;
hand.cards.length = 0;
hand.current_total= 0;
$("#btnDeal").toggle()
.trigger('click');
});
284
Rozdzia 6.
Symulacja kliknicia
elementu btnDeal
jquery i javascript
Jazda prbna
Do pliku my_scripts.js dodaj zdarzenie kliknicia dla elementu btnRestart.
Nie zapomnij te o dodaniu dodatkowego kodu HTML w swoim pliku index.html.
O rany! To ju jest prawie to,

czego chciaam. Zostaa jeszcze tylko
jedna rzecz. Czy moglibymy sprawi, eby
wygrywanie i przegrywanie byo bardziej
widoczne i emocjonujce? Przepraszam,
e zawracam Ci gow.
jeste tutaj 285
kady lubi zwycizc
Dodajemy wicej emocji

Zaktualizuj swj plik my_scripts.js now funkcj, ktr na koniec wywouje
przycisk btnStick, i wprowad zmiany w logice obliczania zmiennej
sumCardTotal. Najnowsz wersj pliku my_style.css moesz pobra std:
ftp://ftp.helion.pl/przyklady/jquerg.zip.
Zrb to!
if(this.current_total> 21){
$("#btnStick").trigger("click");
)*-P !
+#*M! MQM !;9#M+0
!%? 9&%&V^#*M
!!MQM
! M+0
u
ci od wynik
W zaleno waciwoci
przypisz doult inny
src imgRes
rysunek.
}else if(this.current_total == 21){

)*-P !
+#*M! MQM ! ? #M+0
$("#hdrResult").html("Blackjack!")#*M
!!MQM=M+0
W zalenoci od wyniku
przypisz nagwek do
innej klasy.
}else if(this.current_total <= 21 && this.cards.length == 5){

)*-P !
+#*M! MQM ! ? #M+0
$("#hdrResult").html("Masz 5 kart!")#*M
!!MQM=M+0
}else{}
!%? 3&%&3Z+%L9 A3&
}
};
*+,
)*-1]+#
*+0
)*-1g +#
*+0
szystkie
Przecz w y
ab
i,
przycisk
gr.
zakoczy
)*-1P !+#
*+0
}
$("#btnStick").click( function(){
$("#hdrResult").html('Od nowa!')#*M
!!MQM=M+0
$("#result").toggle();
*+0
};
Po wygranej wywoaj funkcj

end, aby zakoczy gr.
my_scripts.js
286
Rozdzia 6.
jquery i javascript
Jazda prbna
Zaktualizuj metod sumCardTotal funkcji hand w swoim pliku my_scripts.js.
Nie zapomnij te o pobraniu nowej wersji pliku my_styles.css i zastpieniu nim
swojego obecnego pliku.
Wspaniale! Doskonaa
strona! Teraz gocie naszego
barku Rusz Gow mog zabawi
si wietn gr w blackjacka,
kiedy u nas przebywaj.
jeste tutaj 287
twj niezbdnik jquery i javascriptu
Rozdzia 6.
Twj niezbdnik jQuery i JavaScriptu

niezbdnika dodae obiekty JavaScriptu,
tablice oraz ptle.
Obiekt iptu
JavaScr
tu
o obiek
dzielneg
o
m
a
s
a
ie
Tworzen ie konstruktor
n
anie
i tworze
ywoyw
tw i w
k
ie
b
o
ie
Uywan ora
kt
u
r
t
s
n
o
k
Tablice
Tworzenie tablic
Przypisywanie wartoci w tablicy
Dodawanie kolejnych elementw do
tablicy
Aktualizacja istniejcych elementw
tablicy
Ptle
Ptla for
hile
Ptla do...w
giczne
Operatory lo
rwnania
Operatory po
288
Rozdzia 6.
jQuery
.empty
$.inArray
.attr
.trigger
metoda
uytkowa
7.1LHVWDQGDUGRZHIXQNFMHGODQLHVWDQGDUGRZ\FKHIHNWZ
Co ostatnio dla
mnie zrobie?
Z chci skorzystabym z funkcji
posprztajMieszkanie.
Kiedy poczysz niestandardowe efekty jQuery z funkcjami

JavaScriptu, moesz sprawi, e Twj kod a tym samym Twoja aplikacja
internetowa bdzie wydajniejszy, skuteczniejszy i lepszy. W tym rozdziale
zagbisz si jeszcze bardziej w ulepszanie efektw jQuery poprzez obsug
zdarze przegldarki, prac z funkcjami czasu oraz popraw organizacji
i moliwoci wielokrotnego uycia Twoich niestandardowych funkcji
w JavaScripcie.
och. ach
Nadciga burza
Aplikacja Zrb sobie potwora, ktr napisae w rozdziale 5., okazaa si by wielkim
przebojem wrd dzieci i ich rodzicw. Wyglda jednak na to, e wkrad si w ni bd, ktry
psuje efekt byskawic. Kierownik ds. jakoci Gryzmokw skontaktowaa si z Tob w sprawie
tych problemw z prob o ulepszenie programu Zrb sobie potwora.
Kiedy uytkownik
uruchomi Zrb
sobie potwora...
Odkrylimy, e kiedy uytkownik otwiera

w przegldarce now kart i pozostawia uruchomiony
program Zrb sobie potwora na pierwszej karcie, to
po powrocie do potwora byskawice zaczynaj uderza
jedna po drugiej bez chwili przerwy. Wyglda to tak,
jakby aplikacja zwariowaa!
...po czym otworzy w przegldarce now kart

i pozostanie na niej przez kilka minut...
...a nastpnie powrci na

kart, na ktrej dziaa Zrb
sobie potwora, okae si,
e byskawice rozbyskuj
raz za razem, tak jakby
efekty spitrzyy si jeden
na drugim.
WYSIL
SZARE KOMRKI
Postaraj si odtworzy zgoszony problem i pomyl, co si stao z funkcj od
byskawic. Dlaczego wszystkie byskawice zaczynaj si wywietla jedna po
drugiej, kiedy kto przejdzie z jednej karty na inn?
290
Rozdzia 7.
ch
yzmoka
Asia, ktra w Gr oci
prowadzi dzia jak
funkcje niestandardowe
Utworzylimy funkcj potwora

Funkcja rysujca byskawice, ktr utworzylimy w rozdziale 5., okazaa si by funkcj
potworem. Dziaa bez przerwy, nawet gdy uytkownik przejdzie na inn stron. Kiedy
powraca on na kart, licznik musi nadrobi stracony czas i prbuje w szybkim tempie
rysowa byskawice na ekranie. Wyglda na to, e licznik nie dziaa w sposb, jakiego
chcielimy. Co takiego si stao?
Przedzia czasowy jes
podany w milisekundact
h.
function lightning_one(t){
$("#lightning1").fadeIn(250).fadeOut(250);
setTimeout("lightning_one()",t);
};
Tutaj m
JS, e fuwimy interprete
sam sie nkcja powinna rowi
w
na nowo bie, i tak te s ywoa
i wci
dzieje.
W JavaScripcie zwykle
definiujemy funkcj
i wywoujemy j w jakim
miejscu w kodzie. W tym
przypadku wywoalimy
funkcj z wntrza jej samej.
rpreterowi
Metoda setTimeout nakazuje intee
JS wywoanie funkcji, a nastpni jej
m
odczekanie chwili przed ponowny
uruchomieniem.
W rozdziale 5. potrzebowalimy sposobu na cige wywoywanie funkcji w pewnych

odstpach czasu. Rozwizujc ten problem, niewiadomie stworzylimy nowy:
funkcja dziaa nadal wtedy, kiedy okno traci fokus uytkownika (czyli gdy
uytkownik otwiera now kart i odchodzi od aktywnego okna).
Funkcja, ktra dziaa

w nieskoczono i wyrwaa si
spod kontroli? To skomplikowane
i przeraajce! Jak moemy
odzyska nad ni kontrol?
Musisz by bardzo ostrony, pracujc

z funkcjami, ktre wywouj same siebie.
2EHMU]\MWR
Tworzenie nieskoczonych ptli moe powodowa

zuycie zasobw procesora i zawieszenie przegldarki
uytkownika.
jeste tutaj 291
jeden obiekt, by wszystkimi rzdzi
Sprawuj kontrol nad efektami czasowymi za pomoc obiektu window

Na szczcie istnieje sposb na odzyskanie kontroli nad animacjami byskawic za
pomoc obiektu JavaScriptu o nazwie window. Obiekt window jest tworzony za
kadym razem, gdy uytkownik otwiera w przegldarce nowe okno, i udostpnia on
cakiem sporo mocy drzemicych w jQuery i JavaScripcie. W wiecie JavaScriptu
obiekt window jest obiektem globalnym. Innymi sowy, window jest obiektem
najwyszego poziomu wiata JavaScriptu.
%

Obiekt window
Interpreter JavaScriptu uywa obiektu

window w celu reprezentowania
otwartego okna w przegldarce.
Zamy, e otworzye w swojej przegldarce trzy karty. Dla kadej z tych kart
przegldarka tworzy jeden obiekt window. Obiekt ten jest takim samym obiektem
jak te, z jakimi pracowae ju w rozdziale 6., a wic ma waciwoci, funkcje obsugi
zdarze oraz metody, ktre s superprzydatne. Moemy korzysta z funkcji obsugi
zdarze onblur i onfocus obiektu window, aby dowiedzie si, co robi uytkownik na
poziomie przegldarki.
Za kadym razem, kiedy

zostaje otwarta nowa
karta, strona albo
ramka, tworzony jest
obiekt window.
%

obiekt window
Jeli klikniesz to
okno, przegldarka
da mu fokus.
obiekt window
Teraz to okno ma fokus.

Kiedy klikniesz jedno
z pozostaych okien,
pierwsze okno utraci foku
s.
Obiekt window oferuje take metody

czasowe, z ktrych mona korzysta
w niestandardowych funkcjach z licznikiem.
Klasa window ma o wiele wicej metod, ale to
wanie tych bdziemy potrzebowa do naszej
funkcji wywietlajcej byskawice.
292
Rozdzia 7.
obiekt window
2EHMU]\MWR
Nie pomyl funkcji obsugi zdarze

1
i ! obiektu ==
w JavaScripcie z metodami 1

i ! biblioteki jQuery.
Metody jQuery blur i focus s przeznaczone do doczania

ich do pl formularzy HTML oraz innych elementw, ale nie
do obiektu window.
Pocz kad waciwo, funkcj obsugi zdarzenia albo metod

obiektu window z opisem tego, co robi.
window.name
Sprawdza, czy okno dostao kliknicie

lub dane z klawiatury albo z innego
urzdzenia wejcia.
window.history
Waciwo obiektu window, ktra odnosi

si do gwnej zawartoci pobranego
dokumentu.
window.document
Wykrywa, czy okno stracio fokus.
window.onfocus
window.setTimeout()
window.clearTimeout()
window.setInterval()
Metoda obiektu window uywana w celu

ustalenia okresu czasu, przez ktry naley
czeka, zanim zostanie wykonana funkcja
albo inna instrukcja.
anulowania okresu czasu, przez ktry
naley czeka midzy powtrzeniami.
czeka midzy powtrnymi wywoaniami
funkcji lub innymi instrukcjami.
Waciwo obiektu window pozwalajca
na uzyskanie dostpu do rnych
adresw URL, ktre zostay pobrane
przez okno.
window.clearInterval()

naley czeka.
window.onblur
Waciwo obiektu window, ktra

umoliwia uzyskanie nazwy okna lub jej
nadanie.
jeste tutaj 293
Rozwizanie
window.name
Sprawdza, czy okno dostao kliknicie

lub dane z klawiatury albo z innego
urzdzenia wejcia.
window.history
Waciwo obiektu window, ktra odnosi

si do gwnej zawartoci pobranego
dokumentu.
window.document
Wykrywa, czy okno stracio fokus.

czeka, zanim zostanie wykonana funkcja
albo inna instrukcja.
window.onfocus
window.setTimeout()
window.clearTimeout()
window.setInterval()

naley czeka midzy powtrzeniami.
czeka midzy powtrnymi wywoaniami
funkcji lub innymi instrukcjami.
Waciwo obiektu window pozwalajca
na uzyskanie dostpu do rnych
adresw URL, ktre zostay pobrane
przez okno.
window.clearInterval()

naley czeka.
window.onblur
Waciwo obiektu window, ktra

umoliwia uzyskanie nazwy okna lub
jej nadanie.
WYSIL
SZARE KOMRKI
Funkcje obsugi zdarze onfocus i onblur obiektu window potrafi wykry zmian fokusu okna,
ale co mona zrobi w odpowiedzi na te zdarzenia?
294
Rozdzia 7.
Odpowiadaj na zdarzenia przegldarki za pomoc metod onblur i onfocus

Wiemy wic, e za pomoc metody window.onfocus moesz stwierdzi, kiedy
okno dostaje fokus (czyli kiedy uytkownik aktywuje stron albo przekazuje oknu
dane wejciowe z myszy albo klawiatury), a za pomoc metody window.onblur
mona wykry, kiedy okno traci fokus. Co jednak mona zrobi w odpowiedzi
na te zdarzenia? Moesz przypisa do nich odwoanie do funkcji.
Odwoanie
do funkcji
Operator
przypisania
Definicja
funkcji
Odwoanie
do funkcji
Operator
przypisania
window.onblur = blurResponse;
window.onfocus = focusResponse;
function blurResponse(){
function focusResponse(){
Rzeczy, ktre chcesz

zrobi w odpowiedzi na
zdarzenie przegldarki,
znajd si tutaj.
Definicja
funkcji
To wanie w tym miejscu zaczyna mie znaczenie moliwo pisania wasnych funkcji niestandardowych.
Masz teraz do dyspozycji obiekt window, ktry przekazuje Ci mas informacji o tym, co uytkownik robi
w przegldarce, dziki czemu moesz uruchamia swoje funkcje w zalenoci od tego, co ten obiekt Ci
powie. Tak naprawd moesz wic zrobi prawie wszystko, co zechcesz, jeli tylko napiszesz w tym celu
wasn niestandardow funkcj...
Jazda prbna
Sprawdmy funkcje obsugi zdarze onfocus i onblur obiektu window. W plikach
z kodem, ktre pobrae do rozdziau 7., znajdziesz folder o nazwie window_tester. Otwrz
w swojej ulubionej przegldarce plik window_tester.html znajdujcy si w tym folderze.
Otwrz drug kart i pobaw si, przeczajc si midzy dwoma oknami przegldarki.
jeste tutaj 295
jazda prbna
Jazda prbna
Oto, co powiniene zobaczy, kiedy uruchomisz plik window_tester.html,
otworzysz drug kart i zaczniesz przecza si midzy kartami.
Otwrz plik
window_tester.html.
Otwrz drug kart.
oc klikni
Gdy za pom si midzy
przeczasz rypt informuje
kartami, skopucie
Ci, kiedy y do niej
kart i kied
powrcie.
Korzystajc z informacji uzyskanych od obiektu ==, moesz

zatrzyma byskawice, kiedy uytkownik wyjdzie z okna aplikacji
Zrb sobie potwora, i ponownie je uruchomi, kiedy powrci.
296
Rozdzia 7.

U magnesiki z kodem we waciwej kolejnoci, aby do funkcji obsugi zdarze onblur i onfocus
przypisa ich definicje. Jedna z funkcji zatrzyma byskawice, kiedy przegldarka utraci fokus (nazwij j
stopLightning), a druga je przywrci, gdy przegldarka odzyska fokus (nazwij j goLightning).
Na razie nie bdziesz pisa kodu tych funkcji, tak wic wstaw tylko magnesiki z komentarzami
(rozpoczynajce si od //) do wntrza kadej z nich.
KKR? FZ3F3S\L8JR3FL
};
goLightning;
window.onblur
(){
stopLightning;
(){
function
goLightning
window.onfocus
};
stopLightning
function
KKR? Z3 Z9S\L8JR3FL
jeste tutaj 297

Teraz jeste ju gotowy do napisania deklaracji dla obu funkcji obsugi zdarze obiektu window.
window.onblur
window.onfocus
function
stopLightning;
nkcje
Przypisz nowe fu .onblur
ow
do zdarze wind .
i window.onfocus
goLightning;
stopLightning
(){
KKR? Z3 Z9S\L8JR3FL
Nowa funkcja
zatrzymujca
byskawice
};
function
goLightning
(){
Nowa funkcja
wznawiajca
byskawice
KKR? FZ3F3S\L8JR3FL
};
Ale wewntrz tych funkcji s tylko

komentarze. Funkcje powinny co robi!
Czy mamy po prostu skopiowa i wklei
tu funkcje czasowe?
To prawda. Funkcje nic nie robi... na razie.

Zamiast kopiowa i wkleja nasz stary kod, spjrzmy na
metody czasowe. Mog nam one pozwoli w lepszy sposb
obsugiwa zdarzenia czasowe zwizane z byskawicami.
298
Rozdzia 7.
Metody czasowe mwi funkcjom, kiedy dziaa

Zarwno JavaScript, jak i jQuery udostpniaj metody czasowe, ktre wywouj funkcje w zalenoci od
upywu czasu. Obiekt JavaScriptu window ma cztery metody czasowe umoliwiajce sprawowanie kontroli
w zalenoci od czasu: setTimeout, clearTimeout, setInterval oraz clearInterval. jQuery oferuje
z kolei metod delay. Przyjrzyjmy si bliej tym metodom i zobaczmy, co maj nam do zaoferowania.
metody czasowe JavaScriptu

setTimeout
setInterval
Uyj mnie,
kiedy chcesz
okreli, ile czasu
trzeba odczeka,
zanim zostanie
uruchomiona
funkcja.
99L
Funkcja, ktr
naley wywoa,
kiedy minie
okrelony czas
metoda jQuery delay
Mwi
funkcji, e ma
si cyklicznie
uruchamia
w okrelonych
odstpach czasu.
setInterval(repeatMe, 1000)
Opnienie
(w milisekund
ach)
delay
Funkcja,
ktr naley
powtarza,
kiedy mija
okrelony
odstp czasu
Odstp czasu
midzy kolejnymi
wywoaniami
funkcji
)
(w milisekundach
Dodaj przerw
midzy efektami,
ktre tworz
acuch.
slideDown().
*@:::+.slideUp();
t
Taki acuch jes
znany w jQuery
ki
pod nazw kolej
w.
kt
efe
W tym przykadzie
metoda delay
umieszcza
piciosekundow
przerw midzy
efektami slideDown
i SlideUp.
Zaostrz owek
Ktra z tych metod najlepiej si nada do naprawienia funkcji goLightning? Dla kadej
metody czasowej odpowiedz, czy bdzie ona pomocna, i wyjanij, dlaczego j wybrae
lub dlaczego nie.
Metoda
Czy powinnimy
zniej skorzysta?
Dlaczego?
setTimeout
setInterval
delay
jeste tutaj 299
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Ktra z tych metod najlepiej si nada do naprawienia funkcji goLightning? Dla kadej
metody czasowej odpowiedz, czy bdzie ona pomocna, i wyjanij, dlaczego j wybrae
lub dlaczego nie.
Metoda
Czy powinnimy
zniej skorzysta?
Dlaczego?
setTimeout
Nie
Metoda setTimeout jest przeznaczona do stosowania w sytuacjach,

w ktrych chcesz poczeka przez okrelony czas, zanim wywoasz
funkcj.
setInterval
Tak
Metoda setInterval jest przeznaczona do stosowania w sytuacjach,

w ktrych chcesz wywoywa funkcj zgodnie z powtarzajcym si
harmonogramem. Wanie czego takiego potrzebujemy do naszych
byskawic.
delay
Nie
Metoda delay sprawdzi si w sekwencjach efektw, ale nie ma

mechanizmu sucego do wywoywania powtarzajcego si schematu.
Tak wic metoda setInterval bdzie

najlepszym rozwizaniem dla funkcji
goLightning, ale funkcja stopLightning musi
zatrzyma licznik. Czy metoda clearInterval
zrobi to dla nas?
Dobre pytanie!
Moesz uy metody clearInterval do zatrzymania powtarzajcego
si harmonogramu wywoa funkcji utworzonego za pomoc
metody setInterval. W tym celu powiniene przekaza metodzie
clearInterval parametr pod postaci zmiennej. Przyjrzyjmy si
bliej temu, jak to dziaa.
, ktra
Przypisz zmienn d setInterval.
identyfikuje meto
myInterval = setInterval(repeatMe, 1000);
clearInterval(myInterval);
Metoda clearInterval
kae setInterval
wymaza licznik i zat
rzyma czynno
powtarzania.
300
Rozdzia 7.
Przeka do metody cle

zmienn jako parametrarInterval
.
Nie istniej
gupie pytania
P:
Czy wszystkie przegldarki przetwarzaj metod

setTimeout tak samo?
O: Nie. Mozilla Firefox i Google Chrome zachowuj
si w sposb, ktry widzielimy wczeniej (kumuluj

wywoania funkcji). Internet Explorer 9 wywouje funkcje,
tak jak tego chcielimy w rozdziale 5. Pokazuje to, e
nie tylko programici maj kopoty z kompatybilnoci
w rnych przegldarkach.
P: Czy funkcje czasowe, takie jak setInterval
i setTimeout, mog by uywane z innymi rzeczami

ni tylko obiekt window?
O:
Dobre pytanie. Niestety nie mog. S to specyficzne

metody obiektu window i mog by wywoywane tylko
w odniesieniu do niego. Mona je natomiast wywoywa
bez prefiksu window i przegldarka bdzie wiedzie,
e Twoim zamiarem jest przydzielenie ich do biecego
obiektu window. Niemniej jednak dobr praktyk jest
doczanie prefiksu.
Pocz kad z metod z tym, co robi, kiedy zostanie wywoana.

window.clearInterval(int1);
window.onfocus = goLightning;
Wykrywa, kiedy biece okno odzyskuje

fokus, i wywouje metod goLightning.
Ustawia funkcj lightning_one, aby
wywoywaa si co cztery sekundy,
i przypisuje j do zmiennej intl.
9F3R#
$("#container #lightning1").
fadeIn(250).delay(5000).fadeOut(250);
int1 = setInterval( function() {

lightning_one();
},

);
window.onblur = stopLightning;
Wykrywa, kiedy biece okno

traci fokus, i wywouje metod
stopLightning.
Wymazuje licznik i zatrzymuje
powtrzenia setInterval dla
zmiennej intl.
Czeka cztery sekundy przed
wywoaniem funkcji o nazwie wakeUp.
Tworzy piciosekundow przerw
midzy efektami fadeIn i fadeOut.
jeste tutaj 301
Rozwizanie
Pocz kad z metod z tym, co robi, kiedy zostanie wywoana.
Wykrywa, kiedy biece okno odzyskuje
fokus, i wywouje metod goLightning.
window.clearInterval(int1);
9F3R#
Ustawia funkcj lightning_one, aby

wywoywaa si co cztery sekundy,
i przypisuje j do zmiennej intl.
$("#container #lightning1").
fadeIn(250).delay(5000).fadeOut(250);
Wykrywa, kiedy biece okno

traci fokus, i wywouje metod
stopLightning.
Wymazuje licznik i zatrzymuje

powtrzenia setInterval dla
zmiennej intl.
int1 = setInterval( function() {

lightning_one();
},

);
Czeka cztery sekundy przed

wywoaniem funkcji o nazwie wakeUp.
Tworzy piciosekundow przerw

midzy efektami fadeIn i fadeOut.
Napisz funkcje stopLightning i goLightning

Teraz, kiedy wiesz ju wicej o funkcjach czasowych, spjrzmy, gdzie bdziemy ich potrzebowa.
goLightning();
function stopLightning (){
KKR?Z3 Z9S\L8JR3FL
Uruchamia byskawice po
zaadowaniu strony.
stopLightning,
Wywouje funkcj traci fokus.
rka
kiedy przeglda
Wywouje funkcj goLightning, kiedy

przegldarka odzyskuje fokus.
Wymazuje liczniki dla trzech odstpw
czasowych byskawic. Potrzebujemy trzech
metod clearInterval. Czy wiesz dlaczego?
};
function goLightning (){
KKR?9 9L%33S\L8JR3FL
};
302
Rozdzia 7.
Ustawia trzy liczniki dla trzech

odstpw czasowych byskawic.
Zga
si, potrzebujemy tutaj trzech meto dza
d
setInterval.
wiczenie
W kadym z pustych wierszy pliku wpisz zmienn, funkcj albo metod, ktra pomoe naprawi
aplikacj Zrb sobie potwora. W przypadku wtpliwoci poszukaj wskazwek na dwch
poprzednich stronach. Kilka miejsc uzupenilimy za Ciebie.
goLightning();
var int1, int2, int3 ; function goLightning(){
int1
....=.
..............( function() {
. ..............
},

);
................=................( function() {
................
},
5000
);
................=................( function() {
lightning_three();
................
},
7000
);
}
function stopLightning()
{
int1
window. ................(....);
window. ................(....);
window. . ...(....);
}
lightning_one() {
function .............
$("#container #lightning1").fadeIn(250).fadeOut(250);
};
function . .............. {
};
function . .............. {
};
my_scripts.js
jeste tutaj 303
rozwizanie wiczenia
Masz ju zatem dwie niestandardowe funkcje obie z odwoaniami do funkcji byskawic, ktre
napisae w rozdziale 5. reagujce na zdarzenia onfocus i onblur obiektu window.
Rozwizanie
wiczenia
goLightning();
Zadeklaruj trzy zmienne do
pamitania naszych licznikw,
eby przegldarka moga je
var int1, int2, int3 ; funcznowu wyzerowa.
tion goLightning(){
int1 setInterval
....=.
..............( function() {
.lightning_one();
..............
},
Tutaj wywoujesz funkcj
Ustaw trzy rne liczniki dla trze
lightning_one

odstpw czasowych byskawic. ch
);
int2
setInterval
................=................(
function() {
lightning_two();
................
ujesz
},
po czym wywo two.
g_
nin
ht
lig
5000
funkcj
);
int3
setInterval
................=................(
function() {
lightning_three();
................
},
nkcj
7000
Teraz wywoaj fu
e.
re
th
g_
nin
);
ht
lig
}
function stopLightning()
Wyzeruj liczniki dla
{
clearInterval
trzech odstpw
int1
window. ................(....);
czasowych byskawic.
clearInterval
int2
window. ................(....);
int3
window. . clearInterval
...(....);
}
lightning_one() {
function .............
};
function .lightning_two()
.............. {
};
Definicje naszych
trzech funkcji
byskawic.
function .lightning_three()
.............. {
};
my_scripts.js
304
Rozdzia 7.
Zrb to!
Aby naprawi i ulepszy to, co utworzye w rozdziale 5., bdziesz musia zaktualizowa mas kodu,
zacznijmy wic od pustego pliku ze skryptem. Pliki z kodem, ktre pobrae do tej ksiki, zawieraj
folder dla rozdziau 7. W folderze tym znajdziesz podkatalog begin o nastpujcej strukturze:
&

index.html
scripts
styles
zedniej
Dodaj kod z popr
strony...
my_scripts.js
...do bloku kodu
$(document).ready w Twoim
pliku ze skryptem.
jquery-1.7.min.js
});//koniec funkcji doc.onready
Jazda prbna
Po dodaniu do pliku ze skryptem kodu z poprzedniej strony otwrz stron w swojej
ulubionej przegldarce, aby sprawdzi, czy naprawa efektu byskawic powioda si.
Otwrz aplikacj Zrb

sobie potwora w oknie
przegldarki.
Nastpnie otwrz now kart

przegldarki i pozosta na niej
przez kilka minut.
Wr do pierwszej karty,
w ktrej dziaa aplikacja
Zrb sobie potwora. Kiedy
powrcisz, pierwszy z efektw
nie powinien dziaa.
Byskawice powinny rozpocz
si po kilku sekundach.
jeste tutaj 305
doprowadzamy do adu nasze funkcje

Skoro ju naprawiamy to i owo, czy nie powinnimy
si cofn i naprawi te powtarzajce si funkcje,
ktre napisalimy w rozdziale 5.?
Lepiej sprawdzi
struktura danychaby si tu inna
obsuguje wiele taka, ktra
zmiennych.
Dobry pomys. Mamy kilka funkcji zwizanych z klikaniem twarzy,

ktre z pewnoci moglibymy poczy w jedn wielozadaniow funkcj.
var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0;
if (headclix < 9){
$("#head").animate({left:"-=367px"},500);
%3?L&,
}
else{
$("#head").animate({left:"0px'},500);
headclix = 0;
}
});
Czy moesz napisa

jedn funkcj, ktra
dziaaaby w kadym
z tych przypadkw?
if (eyeclix < 9){
$("#eyes").animate({left:"-=367px"},500);
L&,
}
else{
$("#eyes").animate({left:"0px"},500);
eyeclix = 0;
}
});
if (noseclix < 9){
$("#nose").animate({left:"-=367px"},500);
L&,
}
else{
$("#nose").animate({left:"0px"},500);
noseclix = 0;
}
});// koniec zdarzenia click
if (mouthclix < 9){
$("#mouth").animate({left:"-=367px"},500);
9%L&,
}
else{
$("#mouth").animate({left:"0px"},500);
mouthclix = 0;
}
});//koniec zdarzenia click
306
Rozdzia 7.
my_scripts.js

Na poprzedniej stronie zidentyfikuj fragmenty kodu, ktre s wsplne dla kadego z rnych aspektw aplikacji.
Uyj poniszych magnesikw, aby utworzy ogln funkcj o nazwie moveMe, ktra bdzie wywoywana za
kadym razem, kiedy uytkownik kliknie dowolny z przewijalnych rysunkw. W funkcji tej pierwszy parametr bdzie
odpowiada indeksowi w tablicy clix, a drugi bdzie odwoaniem do tego, co zostao kliknite.
@3 L&,AAAAAAAAAAKKWJF3LZ93
$("#head").click( function(){
moveMe(2, this);
_______________
});//koniec funkcji click
obj
$("#eyes").click( function(){
_______________
moveMe(0, this);
} );// koniec funkcji click

$("#nose").click( function(){
_______________
i, obj
});// koniec funkcji click
moveMe(3, this);
$("#mouth").click( function(){
_______________
function moveMe(________){
clix[i]
[0,0,0,0]
if (__________ < 9){

$(obj).animate({left:"-=367px"},500);
moveMe(1, this);
L&,L&,
}else{
clix[i] = 0;
$(______).animate({left:"0px"},500);
}
}
my_scripts.js
jeste tutaj 307

Teraz, gdy masz jedn funkcj wielokrotnego zastosowania, ktra dziaa z tablic, bdziesz mie mniej kodu
do konserwacji, a odszukanie i debugowanie problemw, ktre moesz napotka, bdzie atwiejsze.
[0,0,0,0]
@3 L&,AAAAAAAAAAKKWJF3LZ93
$("#head").click( function(){
moveMe(0, this);
_______________
});//koniec funkcji click
$("#eyes").click( function(){
mov
eMe(1, this);
_______________
} );// koniec funkcji click
Umieszczenie cli
w tablicy pomagax
zoptymalizowa
kod.
Funkcji moveMe przekazujesz

odwoanie do przegrdki w tablicy
clix. Dziki temu moesz
skorzysta z tej przegrdki w celu
zapamitania, ile razy kady
z elementw zosta kliknity.
Funkcji moveMe przekazujesz take

biecy element, dziki czemu
mona go animowa.
$("#nose").click( function(){
mov
eMe(2, this);
_______________
$("#mouth").click( function(){
(3, this);
moveMe
_______________
function moveMe(________){
i, obj
Tworzc wszechst
funkcj moveMe ronniejsz
,
prawdopodobies zmniejszye
w kodzie oraz lictwo wystpienia bdu
musisz si zajm zb funkcji, ktrymi
owa.
if (__________
clix[i] < 9){
$(obj).animate({left:"-=367px"},500);
L&,L&,
}else{
Powtarzajca si logika,
ktra istniaa wczeniej,
obecnie znajduje si
w jednym miejscu,
dziki czemu atwiej
bdzie j naprawi,
jeli co si popsuje.
clix[i] = 0;
obj
$(______).animate({left:"0px"},500);
}
}
308
Rozdzia 7.
my_scripts.js
Jazda prbna
Dodaj kod z wiczenia z magnesikami z poprzedniej strony do swojego pliku
my_scripts.js i zapisz go na dysku. Nastpnie otwrz plik index.html w swojej
ulubionej przegldarce i upewnij si, e po przepisaniu funkcji nie pojawiy si
adne nowe problemy, a wszystkie czci twarzy s aktywne.
Strona z potworem nie powinna

wyglda inaczej ni poprzednio,
ale za to wiesz, e Twj kod
jest wydajniejszy, zawiera mniej
powtrze i jest atwiejszy
w konserwacji.
jeste tutaj 309
piorun moe uderzy dwa razy
Proba o now funkcjonalno w Zrb sobie potwora

Asia i ludzie z dziau jakoci s naprawd zadowoleni z Twoich
poprawek, a poniewa spodobao im si Twoje dzieo, chcieliby Ci
przekaza od zespou produkcyjnego propozycj utworzenia nowej
funkcjonalnoci w Zrb sobie potwora.
Mielimy kilkanacie prb

od dzieci chccych przycisku,
ktry losowo tworzyby twarz potwora.
Czy moesz wbudowa co takiego
w aplikacj razem z opcj pozwalajc
zacz wszystko od pocztku?
Podobaj mi si buzie
potworw, ktre robi,
ale fajnie byoby
zobaczy, jak miesza je
dla mnie komputer.
310
Rozdzia 7.
Zacznijmy losowa
Podczas lektury tej ksiki tworzye ju funkcje losowe, tak wic w chwili obecnej zapewne
jeste ju pod tym wzgldem profesjonalist. W tym przypadku potrzebujesz zbudowa funkcj,
ktra bdzie losowo animowa twarz potwora. Zmierzmy si z problemem, dzielc go na
mniejsze fragmenty. Zacznijmy od okrelenia biecej pozycji kadego paska z rysunkiem.
Musisz ledzi biec
kadego paska z rys pozycj
potworw. Powiedzmunkami
uytkownik znajduje y, e
si tutaj.
oona
Bieca pozycja to liczba klikni pomn
zy
przez odlego dzielc czci twar
bieca
(367 pikseli). W naszym przykadzie
pozycja wynosi 2367, co daje 734.
Wychodzc od pozycji biecej, musimy obliczy pozycj docelow, ktra tak naprawd jest
losow pozycj na ekranie. Pomocne bdzie podzielenie take tego problemu na dwie czci:
1
Uzyskanie liczby losowej.

Oto, co robilimy w rozdziaach
2. i 3., aby otrzyma liczb losow.
*%
+!
%

!%

"%
Kad cz twarzy potwora musimy przesun
na losow pozycj pomnoon przez szeroko
twarzy na kadym pasku. Dla liczby losowej 7
pozycja docelowa wyniesie 7367, czyli 2569.
@3 A93%& 3% 3?
Ale teraz potrzebujemy liczby od 1

do 10 (bo kady pasek z rysunkami
zawiera 10 wersji twarzy potwora).
Hm, w twoich ustach wszystko

brzmi prosto, ale czy uzyskanie
biecej pozycji nie bdzie troch
skomplikowane? Skd bdziemy
wiedzie, jaka jest pozycja twarzy
na pasku, zwaszcza jeli kto ju
ten pasek przesuwa?
To nie jest takie trudne, jak Ci si wydaje.

Po prostu odwr stron, a dowiesz si, jak to zrobi.
jeste tutaj
311
im wicej wiesz...
Znasz ju biec pozycj...

Na szczcie nie musisz tu tworzy adnych nowych zmiennych ani funkcji. Warto indeksu tablicy
clix udostpnia biec pozycj, poniewa mwi nam, ile razy uytkownik klikn kad z czci
twarzy potwora. W zwizku z tym wszystko, czego potrzebujesz, to jeden wiersz kodu:
Ustaw biec pozycj zgodnie
z wartoci clix[index]
var current_position = clix[index] ;
...oraz funkcj getRandom

Pisalimy funkcj dajc liczby losowe w rozdziaach 2., 3. i 6.
Moemy jej tu uy z niewielkimi zmianami.
function getRandom(){
@3 A 3?A93%& 3% 3?);
return my_random_num;
}
Moesz przekaza jako argument
funkcji getRandom liczb...
-
)
!

+
!

/!
Przekazywanie
wartoci do funkcji
...aby wygenerowa
i zwrci liczb
cakowit. Tutaj
uzyskamy liczb
od 0 do 10.
Mnoc Math.random i liczb

przekazan na wejciu,
moesz otrzyma liczb
z zakresu od 0 do wartoci
rwnej zmiennej num.
num = 10;
getRandom(num);
&

/!0
ow. Robi ona

Niektrzy nazwaliby t funkcj uytk
e.
tylko jedn rzecz, ale za to bardzo dobrz
@3 A 3?A93%& 3% 3?9

3
&

12
!!
0
Niektrzy nazywaj funkcje

zwracajce warto getterami
(albo akcesorami), poniewa
udostpniaj one wartoci.
Ju wkrtce "!, czyli pozycja, na ktr

chcemy przesun losow cz twarzy.
312
Rozdzia 7.
Kod
gotowy do
wysmaenia
Dodaj wyrniony kod do plikw index.html i my_scripts.js. Konfiguruje on

funkcj losow oraz dodaje kilka alarmw, ktre poka Ci pozycj docelow
(wybieran przy uyciu liczby losowej) oraz pozycj biec (okrelan przez
liczb klikni uytkownika).
<header id="top">
Potrzebujemy w interfejsie przyciskw

do losowania i resetowania.
<img src="images/Monster_Mashup.png" />

11P{!1
11P ! P ! 1
#G I88#F 3R&R3S\L 9RK#G
</header>
index.html
=x67(0! y1x=z
':0 1x=z=QJ!G
)*-1P+#
* +0
)*-1P ! +#
*+0
P*+,
""?#
*?#*+H+0
""0
}
Wylosuj pozycj kadej

czci twarzy.
*+,
)*# +# ?* * ;+,
"! P*+0
"!
;m ;n0
Przypisz zmiennej target_position

wynik dziaania funkcji getRandom.
Zaktualizuj clix[index], eby
uytkownik nadal mg
przesuwa czci twarzy
potwora.

;m ;n "!0
" "!H=0
)*?!+# *,
2&I "I;.Q@::+0
.+0
.0
Przypisz zmiennej move_to

losow pozycj pomnoon
przez szeroko sekcji
z poszczeglnymi twarzami
potwora.
Wywoaj swj niestandardowy

kod animujcy, aby przesun
pasek w lewo.
my_scripts.js
jeste tutaj 313
jazda prbna
Jazda prbna
Po wprowadzeniu do swoich plikw kodu z poprzedniej strony otwrz stron index.html
w swojej ulubionej przegldarce. Kliknij przycisk Losuj 10 20 razy, aby przeprowadzi
peny test.
Funkcja losujca dziaa...
Przez klika pierwszych

klikni funkcja losujca
robi to, czego od niej
oczekujesz.
...przez kilka pierwszych klikni
Po kilku klikniciach
funkcja losujca nad
robi to, czego od nieal
j
chcesz.
314
Rozdzia 7.
W rzeczy samej,
zby to najlepsze,
co mam, ale na mio
bosk mgbym chcie
skorzysta te z reszty
mojej twarzy!
Nie napisalimy kodu chowajcego

fragmenty twarzy. Programowalimy
tak, eby fragmenty przesuway si na
pozycje losowe! Czybymy jakim cudem
zapdzili si za daleko?
Masz racj.
Te funkcje losowe wykazuj niezamierzone zachowania,
ale zrobiy dokadnie to, co napisalimy w kodzie.
Spjrzmy na co, o czym moglimy nie pomyle.
y czas przesuwa pasek
Instrukcja animate ca w kocu wysuwa go poza
a
o,
tkownik.
z rysunkami w lew
h moe go widzie uy
ramy obrazu, w ktryc pasek wypad poza siatk.
Mona powiedzie, e
)*?!+# *,
2&I "I;.Q@::+0
Ratunku!
Wypadlimy poza
ram obrazu!
Jeli uytkownik bdzie cay czas klika

przycisk Losuj, w kocu popchnie pasek
z rysunkiem za daleko w lewo i nie bdzie
go ju wida na ekranie.
WYT
UMYS
Co musisz zrobi, eby pasek z rysunkiem nie wypada poza

ram, a zamiast tego ustawia si na losowo wybranej czci
twarzy potwora?
jeste tutaj 315
skd dokd?
Przesuwaj wzgldnie do biecej pozycji

Aby pasek z rysunkami nie wypada poza siatk, ale prawidowo ustawia si na losowo wybranej czci
twarzy potwora, powiniene przesuwa go wzgldnie w stosunku do biecej pozycji, co oznacza branie pod
uwag biecego pooenia oraz wykorzystanie pewnej logiki warunkowej. Rozmy to na czynniki.
si tutaj. Bieca pozycja to 2,
Powiedzmy, e uytkownik znajduje
razy.
dwa
poniewa uytkownik klikn
Nastpnie uytkownik klika przycisk Losuj, ktry generuje liczb losow od 0 do 9.

Przyjrzyjmy si dwm rnym scenariuszom, ktre mog by wynikiem tego losowania.
Scenariusz nr 1: pozycja docelowa > pozycja bieca

Funkcja getRandom zwraca liczb 5, w zwizku z czym zmienna target_position
przyjmuje warto 5, co oznacza, e jest ona wiksza od zmiennej current_position.
Aby obsuy t sytuacj, musimy utworzy logik warunkow.
O ile pozycji musimy

przewin pasek?
current_position jest rwne 2.

target_position jest rwne 5.
Odejmij current_position od
target_position, a otrzymasz
3. Musimy przesun pasek
o trzy pozycje w lewo.
, musisz
Jeli zmienna target_position jest wiksza od current_position
rysunkami
z
pasek
przesun
i
osition
target_p
od
position
odj current_
".
({left:"-=
animate
funkcji
z
w lewo, korzystajc
Scenariusz nr 2: pozycja docelowa < pozycja bieca

Funkcja getRandom zwraca liczb 1, w zwizku z czym zmienna target_position przyjmuje
warto 1, co oznacza, e jest ona mniejsza od zmiennej current_position. Czy bazujc na
logice warunkowej ze scenariusza nr 1, moesz wskaza, jakiej logiki tutaj potrzebujemy?
target_position
jest rwne 1.
Odejmij target_position
od current_position,
a otrzymasz 1. Musisz
przesun pasek o jedn
pozycj w prawo.
current_position jest rwne 2.
jsza od current_position, musisz

Jeli zmienna target_position jest mnieon i przesun pasek z rysunkami
ositi
nt_p
curre
od
n
sitio
t_po
odj targe
ate({left:"+=".
w prawo, korzystajc z funkcji anim
316
Rozdzia 7.
Zagadkowy basen
Twoje zadanie polega na zebraniu fragmentw kodu z basenu i umieszczeniu ich
w pustych wierszach programu. Nie moesz uy tego samego fragmentu
wicej ni jeden raz i nie musisz wykorzysta wszystkich fragmentw. Twoim
celem jest uzyskanie funkcji losujcej, ktra bdzie dziaa w zamierzony
sposb, czyli nie bdzie powodowa znikania fragmentw twarzy.
@3 F
var m = 10;
function getRandom(num){ @3 A 3?A93
%& 3% 3?9
}
function randomize(){
$(".face"). ..........................{
var target_position = getRandom(m);
clix[index] = target_position;
if(..........................) {
@3 @AF
$(this).animate(..........................);
}else if(..........................){
@3 @AF
$(this).animate(..........................);
}else{ KK
3 3W# Z9F3S
}
});
};
Uwaga: dowolny fragment
z basenu moe zosta
uyty tylko raz!
&+@A#,4
&+@A#,4
target_position > current_position
3 WA#L9 A#
L9 A#3 WA#
target_position == current_position
&+@A#,4
3 WA#L9 A#
target_position < current_position
each(function(index)
jeste tutaj 317
zagadkowy basen rozwizanie
Zagadkowy basen rozwizanie

Twoje zadanie polega na zebraniu fragmentw kodu z basenu i umieszczeniu ich
w pustych wierszach programu. Nie moesz uy tego samego fragmentu
wicej ni jeden raz i nie musisz wykorzysta wszystkich fragmentw. Twoim
celem jest uzyskanie funkcji losujcej, ktra bdzie dziaa w zamierzony
sposb, czyli nie bdzie powodowa znikania fragmentw twarzy.
@3 F
var m = 10;
@3 A 3?A93%& 3% 3?9
Uruchom ten kod dla
kadego elementu
nalecego do klasy face.
}
$(".face"). .each(function(index)
........................{
var target_position = getRandom(m);
Jeli zmienna target_position jest

wiksza od current_position...
...odejmij current_position
clix[index] = target_position;
od target_position.
target_position > current_position {
if(..............................)
Przesu pasek z rysunkami
target_position - current_position
w lewo. @3 @AF
Znaczy to, e musisz
uy metody animate({left:"-=".
{left:-=+move_to+"px"},500
$(this).animate(..........................);
Jeli zmienna target_position jest
target_position
<
current_position
}else if(..............................){
mniejsza od current_position...
current_position - target_position
@3 @AF
...odejmij
target_position
{left:+=+move_to+"px"},500
od current_position...
$(this).animate(..........................);
}else{
KK3 3W# Z9F3S
...i przesu pase
k z rysunkami
w prawo. Znaczy to, e musisz
}
uy metody animate({left:"+="
});
};
&+@A#,4
3 WA#L9 A#
target_position == current_position
Tych fragmentw nie

potrzebowae.
318
Rozdzia 7.
Funkcja losujca dziaa teraz znakomicie.

Przypuszczam, e bdziemy potrzebowa
jeszcze jednej niestandardowej funkcji,
ktra wszystko zresetuje, prawda?
Zgadza si.
Pamitasz przycisk resetowania w pliku index.html
sprzed kilku stron? Musisz go tylko powiza
z niestandardow funkcj reset.
Magnesiki z kodem
Poukadaj magnesiki z kodem we waciwej kolejnoci, aby uzyska kod dla przycisku
resetowania i dla niestandardowej funkcji resetujcej. Kilka z magnesikw uoylimy za Ciebie.
$("#btnReset").click( reset );
function reset(){
$(this)
$(".face")
});
.each(function(index){
.animate({left:"0px"},500);
clix[index] = 0;
jeste tutaj 319

I voil! Zaledwie kilka krtkich wierszy, ktre ustawiaj wszystko z powrotem na pozycjach
wyjciowych.
Podepnij niestandardow
funkcj resetujc do
przycisku resetowania.
Zdefiniuj niestan
funkcj resetujcdardow
.
function reset(){
Wywoaj metod
each, eby funkcja
zresetowaa kad
sekcj twarzy do 0.
.each(function(index){
$(".face")
clix[index] = 0;
$(this)
Zresetuj tablic clix do 0.
.animate({left:"0px"},500);
});
Przewi kady pasek

z rysunkami do
bezwzgldnej pozycji
0 px dla waciwoci
CSS left.
Nie istniej
gupie pytania
P: Czy wszystkie przegldarki maj

obiekt window?
O:
Tak, wszystkie nowoczesne

przegldarki posiadaj obiekt window,
z ktrym mona pracowa. Obiekt
taki przypada na kad z kart Twojej
przegldarki. Posiada go take oddzielny
obiekt klasy document, do ktrego jest
wczytywana strona WWW.
320
Rozdzia 7.
P: Dlaczego musz si przesuwa
wzgldem biecej pozycji? Czy nie

mog po prostu przej tam, gdzie kae
mi liczba losowa?
O:
Co takiego mogoby zadziaa,

ale musiaby przewija swj rysunek
z powrotem na pozycj wyjciow,
a nastpnie przechodzi na miejsce
wskazane przez funkcj losujc.
Podwoioby to ilo kodu, ktr miaby
do napisania i ogarnicia, a poza tym
znaczco spowolnioby Twoj aplikacj.
P: Jak dziaa funkcja reset?

O: Funkcja reset po prostu przechodzi
w ptli przez kady element klasy face

i nadaje jego waciwoci CSS left
warto 0. Ustawia te wszystkie elementy
tablicy clix na 0, czyli na warto, jak
miay, kiedy wczytalimy stron.
Zrb to!
Poniej znajdziesz cay kod, ktry budowae przez kilka ostatnich

stron. Jeli jeszcze tego nie zrobie, dodaj wyrniony kod do swojego
pliku my_scripts.js i przygotuj si do przetestowania nowo utworzonych
funkcjonalnoci.
@3 FKKZ RX#3R3ZLZXL3F3 Z
@3 KK9 3W9F3 Z3RI SX
$("#btnRandom").click( randomize );
@3 A 3?A93%& 3% 3?9
}
)*# +# ?* * ;+,
"! P*+0
"!
;m ;n0

;m ;n "!0
* "! "!+,
"* "!| "!+H=0
)*?!+# *,
2&I "I;.Q@::+0
.
! * "! "!+,
"* "!| "!+H=0
)*?!+# *,
2II "I;.Q@::+0
.
! ,
B ! | !=
}
.+0
}
! *+,
)*# +# ?* * ;+,

;m ;n:0
)*?!+# *,
2:;.Q@::+0
.+0
}
my_scripts.js
jeste tutaj 321
dobra robota!
Jazda prbna
Po wpisaniu kodu z poprzedniej strony otwrz stron index.html w swojej ulubionej
przegldarce i przetestuj funkcje randomize i reset. Kliknij przycisk Losuj 10 20 razy,
aby upewni si, e przeprowadzie peny test. Kliknij te od czasu do czasu przycisk
Resetuj, eby sprawdzi, czy take on dziaa zgodnie z zaoeniami.
Wszystko dziaa!
Fragmenty twarzy potwora

powinny teraz lata zarwno
w prawo, jak i w lewo, co
wizualnie bdzie jeszcze
bardziej interesujce dla
Twoich goci.
322
Rozdzia 7.
Z kolei przycisk
resetowania przywrac
wszystko do miejsca, a
w ktrym zaczynalim
y.
Krzywka jQuery
stanowice hasa pochodz z biecego rozdziau.
Poziomo
Pionowo
3. Klasa globalnego obiektu, ktry jest tworzony za kadym

razem, gdy uytkownik otwiera w przegldarce nowe okno.
1. Funkcja obsugi zdarze, ktra wykrywa to, e okno zostao

kliknite albo otrzymao dane z klawiatury lub z innego
urzdzenia wejcia.
4. Uywany do przekazywania zmiennych i obiektw do funkcji.

Podpowied: wystpuje w nawiasach.
7. Korzystasz z tej metody czasowej JavaScriptu, kiedy chcesz
ustawi czas, jaki ma upyn przed wywoaniem funkcji.
8. Funkcja obsugi zdarze JavaScriptu, ktra wykrywa, kiedy
okno traci fokus.
9. Instrukcja ta kae funkcji wykonywa si cyklicznie
z odstpem czasu midzy kolejnymi powtrzeniami.
2. Niektrzy programici nazywaj tak funkcj, ktra robi tylko

jedn rzecz, ale za to dobrze.
5. Funkcja zwracajca warto jest czasami tak nazywana.
6. Waciwo obiektu window umoliwiajca dostp do
adresw URL, ktre zostay wczeniej zaadowane do okna
przegldarki.
10. Metoda jQuery, ktra wstawia przerw midzy efektami

w acuchu metod.
11. Metoda JavaScriptu uywana w celu anulowania okresu czasu,
jaki naley odczeka midzy powtrzeniami.
jeste tutaj 323
rozwizanie krzywki
324
Rozdzia 7.
Zrb sobie potwora v2 to prawdziwy przebj!

Dziki Twojej cikiej pracy aplikacja
Zrb sobie potwora staa si prawdziwym
przebojem dla dzieciakw! W rekordowo krtkim
czasie rozwizae kilka problemw i dodae nowe
funkcje! Rozmawiaam z szefem o wyszej kwocie
na czeku za t wspania robot.
Wanie wykrciam
winionietoperzow
czarownic, ktra
bdzie bohaterk
opowiadania, jakie
pisz.
Patrz, zrobiem
zmumifikowanego
rekinowilka-kosmit!
jeste tutaj 325
Rozdzia 7.

swojego niezbdnika dodae obiekt
==, funkcje czasowe oraz funkcje
niestandardowe.
ow
d
n
i
w
t
Obiek
yej
si najw woje
y
c
j
u
najd
on s
obiekt z
tu. Ma
oraz
Jest to chii JavaScrip ugi zdarze
s
r
ia
b
a
n
o
r
e
z
ie
je
r
h
w
nkc
zda
oci, fu
krywa
waciw omagajce wy reagowa.
p
metody rki oraz na nie
a
okno
przegld
, kiedy
formuje tywne.
in
s
u
c
t ak
onFo
fokus.
arki jes
no traci
k
przegld
o
y
d
a, kie
wykryw
onBlur
Funkcje czasowe
Metody dostpne dla obiektu window:
setTimeout czeka przez okrelony czas,
zanim kae uruchomi funkcj.
setInterval wywouje cyklicznie funkcj
w okrelonych odstpach czasu.
clearInterval wymazuje schemat
cyklicznych wywoa funkcji.
Zoptymalizowane
Pisanie wasnych funkcji niestand
ardowych umoliwi Ci
rzeczywist prac nad interaktywn
ymi stronami, ktre bd
chtnie uywane przez Twoich goc
i.
Moesz jednak da si ponie

i dlatego wane jest
przemylenie, jak najlepiej czy
i optymalizowa swoje
funkcje, eby pisa mniej kodu
, ktry bdzie atwiejszy
w konserwacji i debugowaniu.
326
Rozdzia 7.
8.M4XHU\Lb$MD[
Prosz poda dane

Szczypta Ajaksa, kropla
jQuery i siedem filianek
mietanki kremwki. Czy na
pewno dobrze zapisae ten
przepis, kochanie?
Uywanie jQuery w celu robienia sprytnych sztuczek z CSS i drzewem DOM

to fajna sprawa, ale ju wkrtce bdziesz musia odczytywa informacje (albo dane) z serwera
i je wywietla. Moe nawet przyjdzie Ci zaktualizowa fragmenty strony informacjami z serwera
bez potrzeby jej odwieania. Poznaj Ajax. W poczeniu z jQuery i JavaScriptem moe on wanie
co takiego robi. W tym rozdziale dowiemy si, jak jQuery radzi sobie z namawianiem Ajaksa do
wysyania zapyta do serwera i co potem robi z otrzymanymi informacjami.
aloha, dane w czasie rzeczywistym!
Wprowad bieg Od bitu do bajtu w XXI wiek

+
Od:'
($)$
"
*&
/&&
&$
Temat:
(%(,-.
($
Czoem, zaogo projektantw internetowych!
WWW
Od bitu do bajtu na 10 kilometrw, udostpniajc stron
Jak wiecie, kadego roku sponsorujemy webowicki bieg
iciu
wpyn
po
o
dopier
j
y
izujem
aktual
w tyle, poniewa
z jego wynikami. Nasza strona pozostaje jednak mocno
oglda bieg,
Twitterem i Facebookiem widzowie, ktrzy przychodz
z
a
akcji,
satysf
ej
wiczn
byska
chc
Ludzie
w.
wynik
.
w czasie rzeczywistym
bij nas na gow, jeli chodzi o dostarczanie wynikw
lizowa nasz
d. Jeli do przyszego tygodnia uda si Wam zaktua
Tak wic mamy dla Was zadanie oraz wspania nagro
okazj do
mie
cie
bdzie
rzeczywistym, to pod koniec biegu
webowick stron, tak eby wywietlaa wyniki w czasie
).
Maui?
wyspie
na
si
a
odbyw
bieg
roku
ju, e w tym
pokrcenia si w sektorze dla VIP-w (czy wspomniaam
Oto, czego potrzebujemy:
nikw
samych biegaczy albo biegaczek lub wszystkich zawod
1) Na stronie powinna by moliwo wywietlenia
jednoczenie.
gdy zawodnicy przekraczaj lini mety.
2) Strona powinna automatycznie aktualizowa si,
by zmuszeni do odwieania strony.
3) Po aktualizacji wynikw uytkownicy nie powinni
aktualizacji
bya ona ostatnio aktualizowana, poda czstotliwo
4) I na koniec, chcielibymy pokaza na stronie, kiedy
.
chcieli
tego
bd
jeli
izacji,
aktual
ienie
wznow
oraz umoliwi uytkownikom zatrzymanie i
go roku,
si diametralnie od tego, co istnieje ju na stronie z zesze
To, co chcielibymy mie na nowej stronie, nie rni
ka,
docze
si
y
moem
nie
i
zenie
wydar
wielkie
to
a. Ten bieg
tak wic moe ona by dla Was dobrym punktem wyjci
eby zobaczy, co takiego wymylicie!
-Diana C. Domek
szef marketingu
Megakorporacja w Webowicach
Czowieku, Maui! Byoby

cudownie znale si na
przyjciu dla VIP-w!

do bajtu na 10 kilometrw
, e
a na to
Wygld programistwi
zesp towych ju s t
interne owa na wylo
t
przygo aje Chyba
na Hawzi si do
pora w
roboty!
W tym roku bieg odbywa si
na wyspie Maui zarezerwuj
sobie miejsce z wyprzedzeniem!
328
Rozdzia 8.
jquery & ajax
Spojrzenie na stron z zeszego roku

Spjrzmy na stron z zeszego roku, aby sprawdzi, jak zostaa
skonfigurowana i jak wyglda, co pozwoli nam lepiej zrozumie,
o co poprosi nas dzia marketingu.
Te karty zostay
utworzone przez
wtyczk (poczekaj
sekund, a dowiesz
si o tym wicej).
Wyniki biegu
zostay na stae
umieszczone na
stronie po jego
zakoczeniu.
To jest wynik
dziaania funkcji
getTime.
Konfigurowanie wtyczki
Wtyczki to rozszerzenia podstawowej biblioteki jQuery, ktre
poprawiaj funkcjonalno albo uatwiaj wykonywanie
okrelonych funkcji lub zada. W powyszym przykadzie
wtyczka idTabs, w poczeniu z naszym CSS, przeksztaca
element ul w aktywne karty i mwi czom a w elementach listy
li, ktre elementy div pokaza, kiedy zostan kliknite. Ta
wtyczka udostpnia na naszej stronie bardzo proste w uyciu
struktury nawigacyjne, dziki czemu rne rodzaje informacji
moemy prezentowa jako wizualnie rozdzielone, nadal
korzystajc z tego samego obszaru wywietlania.
Sp
jnie
o
ok
Nie przejmuj si
zbytnio t wtyczk.
Wtyczki uzupeniaj
standardow bibliotek
jQuery o dodatkow
funkcjonalno. Przyjrzymy si im dokadniej
w rozdziale 10., a tymczasem zobaczmy,
co moe zrobi dla nas wtyczka, eby
przyspieszy prace nad naszym projektem
jeste tutaj 329
Kod
gotowy do
wysmaenia
Zanim przejdziemy dalej, spjrzmy na zeszoroczne pliki, aby sprawdzi, jak

zostay skonfigurowane. Kod powinien znajdowa si w pliku last_year.zip
(razem z pozostaymi plikami z tego rozdziau, ktre moesz pobra
z ftp://ftp.helion.pl/przyklady/jquerg.zip). Oto fragmenty trzech gwnych plikw,
ktre bd nam potrzebne: my_style.css, index.html oraz my_scripts.js.
body{
background-color: #000;
color: white;
#main ul a:hover {
Komentarz w CSS
color:#FFF;
background:#111;
K&R3 K
#main {
color:#111;
width:500px;
}
Od tego miejs
ca
reszta kodu CS
powicona je S
tworzeniu ka st
rt
na stronie.
#main ul a.selected {
margin-bottom:0;
color:#000;
margin:8px auto;
background:snow;
border-bottom:1px solid snow;
#main > li, #main > ul > li
cursor:default;
{ list-style:none; float:left; }
39&3
#main div {
display:block;
padding:10px 10px 8px 10px;
padding:6px 10px;
#3??W#+#,
text-decoration:none!important;
3 W#+#,
margin:1px 1px 1px 0;
clear:left;
color:#FFF;
background:snow;
83LRW 9?+
height: 300px ;
}
3?@3
color:#000; font-weight:bold;
}
my_style.css
330
Rozdzia 8.
jquery & ajax

<div id="main">
Utwrz cza, ktre
wtyczka przeksztaci
w karty.
<ul class="idTabs">
&G3% 389G8W9K3GK&G
&G3% % GHZLZ3F?LK3GK&G
</ul>
<div id="about">
Element div,
ktry bdzie
przechowywa
zawarto
karty.
%G8W9K%GW?89?83S9^
</div>
Cz zeszorocznych zawodnikw
wpisanych na stae na stron.
Aktualizacja tego musiaa by
koszmarem
<div id="finishers">
%GHZLZ3F?LK%G
<ul id="finishers_all">
<li>Nazwisko: Robert Nadzieja. Czas: 25:30</li>

<li>Nazwisko: Jan Kowalski. Czas: 25:31</li>
&G3ZFR+33F3&R3Z3+-+K&G
...
Jak zwykle docz pliki

z JavaScriptem. W ten sam
sposb doczamy wtyczki.
</ul>
</div>
...
index.html
<script src="scripts/jquery.idTabs.min.js"></script>
getTime();
function getTime(){
e.
funkcj getTim
niestandardow
Wywoaj nasz
ptu Date
Nowa instancja obiektu JavaScri
var a_p = "";

var d = new Date();
var curr_hour = d.getHours();
Metody obiektu Date
Potrjny operator warunkowy JavaScriptu

(na jego temat powiemy co nieco pniej).
(curr_hour < 12) ?3A#3A#V

(curr_hour == 0) ? L9 A%9 -L9 A%9 L9 A%9
(curr_hour > 12) ? L9 A%9 L9 A%9 -L9 A%9 L9 A%9
var curr_min = d.getMinutes().toString();
var curr_sec = d.getSeconds().toString();
L9 A&W%L9 AL9 A4
my_scripts.js
L9 AL&W%L9 ALL9 AL4

!9#?3?%&L9 A%9 +L9 A+L9 AL3A#
}
});
jeste tutaj 331
egnajcie, wyniki zakodowane na stae
Dynamizujemy
Ludzie od marketingu chc, eby strona aktualizowaa si prawie w czasie
rzeczywistym, tak wic wyniki zakodowane na stae w HTML-u musz znikn.
Poza tym do aktualizowania czasu na stronie uyto samego JavaScriptu! To dla
nas doskonaa okazja, eby wynie nasz znajomo jQuery na kolejny poziom.
Witaj w wiecie aplikacji internetowych nastpnej generacji, gdzie jQuery,
JavaScript i troch Ajaksa oraz HTML-a mog sprawi, e Twoje programy
zaczn by dynamiczne (w odrnieniu od statycznych) i bd reagowa na
dziaania uytkownika.
Ajax, ktrego nazwa jest skrtem od Asynchroniczny JavaScript i XML, to
sposb przekazywania danych i ustrukturyzowanych informacji midzy serwerem
WWW a przegldark bez ingerencji ze strony uytkownika strony. Z Ajaksem
Twoje strony i aplikacje prosz serwer tylko o to, czego naprawd potrzebuj,
czyli o fragmenty, ktre powinny si zmieni, i o dane dla tych fragmentw,
ktre serwer musi przesa. Oznacza to mniejszy ruch w sieci, mniejsze
aktualizacje oraz krtszy czas siedzenia i czekania na odwieenie strony.
Najlepsze w tym wszystkim jest to, e strona ajaksowa jest budowana za pomoc
standardowych technologii internetowych, z ktrymi spotkae si ju w tej
ksice albo ktre ju znasz, takich jak:
HTML,
CSS,
JavaScript,
DO"
Aby skorzysta z Ajaksa, spjrzmy na format danych, ktry od pewnego czasu znajduje si
w uyciu (XML), oraz na metod obsugi da ajaksowych w jQuery ajax.
Gdy korzystasz z Ajaksa, Twoje

strony prosz serwer tylko o to,
czego naprawd potrzebuj, kiedy
(oraz gdzie) tego potrzebuj.
332
Rozdzia 8.
jquery & ajax
Stary Webie, poznaj nowego Weba

Chocia znamy ju troch jQuery, praca z danymi grozi nam powrotem do czasw starej
sieci, kiedy to musielimy odwiea cae strony albo tworzy cza do odrbnych stron
w celu pobierania i aktualizowania niektrych albo wszystkich danych. Znowu wic
powrcilibymy do stron internetowych, ktre zdaj si dziaa lamazarnie, poniewa
za kadym razem trzeba pobiera je w caoci z serwera. Po co w takim razie uczy si
sprytnego jQuery, skoro przetwarzanie danych najzwyczajniej znowu nas spowolni?
Na scen wkracza Ajax

Ajax umoliwia dynamiczn wymian danych z serwerem. Uywajc Ajaksa
w poczeniu z modyfikowaniem drzewa DOM, mona pobiera lub odwiea
za pomoc jQuery i JavaScriptu tylko cz strony.
Strona wczytana
do przegldarki
Kod JavaScript
danie w A j a k s i e
wysane do serwera
Serwer
jQuery albo JavaScript

przesyaj do serwera
danie w Ajaksie.
Strona wczytana
do przegldarki
Kod JavaScript
Serwer
jQuery albo JavaScript

otrzymuj odpowied,
przetwarzaj j i aktualizuj
tylko cz strony.
Odpowied otrzymana
z serwera
Zaktualizuj
fragment strony
jeste tutaj 333
wszystko sprowadza si do danych
Zrozumie Ajax
Jak ju wspomnielimy wczeniej, Ajax to sposb przekazywania danych
w ustrukturyzowanym formacie midzy serwerem a przegldark bez porednictwa
uytkownika przegldarki. W rzeczywistoci jednak Ajax nie sprowadza si tylko
do jednej rzeczy, lecz stanowi poczenie rnych technologii uywanych w celu
tworzenia ekscytujcych, interaktywnych aplikacji sieciowych. JavaScript umoliwia
interakcj ze struktur drzewa DOM strony. Asynchroniczno oznacza, e proces
ten odbywa si w tle bez ingerowania w Twoj stron i bez udziau uytkownika.
X natomiast odnosi si do danych.
Czym jest Ajax?

Asynchroniczno
XML
JavaScript przesya danie do serwera, ale Ty nadal

moesz dziaa na stronie, wypenia formularze,
a nawet klika przyciski wszystko to w czasie, kiedy
serwer pracuje w tle. Nastpnie, kiedy serwer ju
skoczy, Twj kod moe zaktualizowa tylko t cz,
ktra ulega zmianie. Ty jednak nigdy nie musisz czeka!
Na tym polega potga da asynchronicznych!
XML, czyli eXtensible Markup Language,

to specyfikacja dotyczca zapisu informacji,
a take opisujca ich struktur. Chocia XML
jest jzykiem znacznikw (tak jak HTML), nie
ma on swoich wasnych tagw. Umoliwia on
osobie piszcej w nim kod tworzenie takich
znacznikw, jakie tylko s jej potrzebne.
$ - $ ;
JavaScript
JavaScript, jak ju doskonale wiesz, jest jzykiem
skryptowym uywanym do programowania
zawartoci stron internetowych, a przede
wszystkim do tworzenia funkcji ktre mona
docza do dokumentw HTML lub osadza
w nich oraz do interakcji z drzewem DOM.
Czy nie moemy

jednak uywa samego
HTML-a? Do czego jest
nam potrzebny kolejny
jzyk znacznikw?
Tak, moesz uywa HTML-a. Niemniej
jednak w przypadku transferu informacji
XML ma kilka wyjtkowych zalet
w porwnaniu ze swoim siostrzanym
jzykiem, ktrym jest HTML.
Zobaczmy, co to za zalety.
334
Rozdzia 8.
jquery & ajax
X
XML to skrt od eXtensible Markup Language, co oznacza Rozszerzalny Jzyk Znacznikw. Jzyk ten
oferuje powszechnie przyjty, standardowy sposb prezentacji tekstu oraz innych informacji w formacie,
ktry moe by przetwarzany bez koniecznoci wikszego udziau czowieka. Informacja sformatowana
w XML-u moe by wymieniana midzy platformami, aplikacjami, a nawet midzy jzykami programowania
i jzykami pisanymi. Formatu tego mona te uywa z szerokim spektrum narzdzi programistycznych
oraz programw uytkowych. XML jest prosty do tworzenia, czytania i edytowania wszystko, czego
potrzebujesz, to prosty edytor tekstowy oraz deklaracja XML na pocztku pliku. Reszta zaley od Ciebie!
XML nic nie robi

Moe zabrzmi to dziwnie, ale XML sam z siebie tak naprawd niewiele robi. Strukturyzuje on i zapisuje
informacje w celu ich przenoszenia. W rzeczywistoci XML jest metajzykiem sucym do opisu jzykw
znacznikowych. Innymi sowy, uatwia on definiowanie znacznikw oraz strukturalnych zalenoci midzy
nimi. Wane jest zrozumienie, e XML nie zastpuje jzyka HTML on go uzupenia. W przypadku wielu
aplikacji sieciowych XML jest uywany w celu formatowania danych przed ich wysaniem, podczas gdy
HTML jest stosowany podczas ich formatowania i wywietlania. Przyjrzyjmy si bliej plikowi XML, ktry
zawiera dane na temat kilku ksiek.
Deklaracja XML, ktra zawsze

powinna by doczona.
Definiuje ona wersj XML
dokumentu.
Elementy potomne
gwnego wza
(znaczniki otwierajce
i zamykajce). W tym
przypadku opisujemy
ksiki.
XML jest uywany do

formatowania danych
przed ich wysaniem,
podczas gdy HTML
jest stosowany do
ich formatowania
i wywietlania.
,&@ L?W9G
<books>
Wze (znacznik) gwny
<book>
&G9## ZZW3&3RRK&G
<author>Douglas Adams</author>
<year>1980</year>
Pozostae
</book>
znaczniki
uywane do
<book>
przechowywania
<title>Kolor magii</title>
danych
<author>Terry Pratchett</author>
<year>1983</year>
</book>
<book>
<title>Mort</title>
<year>1987</year>
</book>
<book>
<title>Paradoks czasu</title>
<author>Eoin Colfer</author>
<year>2009</year>
</book>
Zamknij wze (znacznik)
</books>
gwny.
books.xml
jeste tutaj 335
nie istniej gupie pytania

Nie istniej
gupie pytania
P: Tak wic w tym caym zachwycie

nad XML-em chodzi o to, e mona
w nim tworzy wasne znaczniki?
O: Wanie! Definiowanie elementw
i struktur, ktre odpowiadaj Twoim

potrzebom, jest bardzo wygodne. Co
wicej, XML jest standardem, dziki
czemu mnstwo osb wie, jak z nim
pracowa. Oznacza to, e Twj sownik
bdzie mg by uywany przez wielu
programistw zarwno w programach
wykonywanych po stronie klienta, jak
i realizowanych po stronie serwera.
P: Czy nie byoby atwiej po prostu

opracowa swj wasny format
danych?
O:
Na pocztku moe tak si zdawa,

ale wasne formaty danych takie, ktre
tworzysz na wasny uytek mog
powodowa mas problemw. Jeli
ich nie udokumentujesz, ludzie mog
zapomnie, jak one dziaaj. Ponadto
jeeli co si zmieni, bdziesz musia
zagwarantowa, e wszystko zostanie
zaktualizowane: klient, serwer, baza
danych, dokumentacja... To moe
przyprawi o bl gowy.
P: Czy ludzie naprawd uywaj
XML-a w takim stopniu, jak to

przedstawiasz?
O:
Ze wzgldu na swoj elastyczno

w tworzeniu takich struktur danych, jakie
tylko s potrzebne, XML jest uywany
jako baza dla wielu rnych typw
jzykw znacznikowych w Internecie.
Istnieje ponad 150 rnych rodzajw
jzykw korzystajcych z XML-a takich
jak: RSS (RDF Site Summary, znany te
jako Real Simple Syndication) sucy
do przekazywania wiadomoci oraz
transmisji audio i wideo; KML (Keyhole
Markup Language) jzyk informacji
geograficznej uywany przez Google Earth;
OOXML (Open Office XML) standard
przetwarzania plikw tekstowych, arkuszy,
prezentacji itp. przedstawiony przez
Microsoft; SVG (Scalable Vector Graphics),
ktry opisuje dwuwymiarowe rysunki, czy
te SOAP (Simple Object Access Protocol),
ktry definiuje sposoby wymiany informacji
przez serwisy sieciowe. No prosz, to
naprawd wiele zastosowa dla XML-a!
P: No dobra, api ju, dlaczego
powinnimy uywa XML-a, ale czy

nie stanie si on wasnym formatem
danych, kiedy zaczniemy deklarowa
nazwy elementw?
O:
Wcale nie. W tym kryje si pikno

XML-a jest on elastyczny. Serwer
i klient musz szuka tych samych nazw
elementw, ale czsto mona te nazwy
pozna w czasie dziaania programu.
P: Ale czy wszystkie strony nie s
tak czy inaczej asynchroniczne, na

przykad wtedy, kiedy przegldarka
pobiera grafik, a ja ju ogldam dan
stron?
Jestem gotw zabra si za

Ajaksa, ale musimy w tym celu
najpierw skonfigurowa nasz
struktur, prawda? Do tej pory
zawsze tak robilimy...
336
Rozdzia 8.
O:
Przegldarki s asynchroniczne,
ale standardowa strona WWW ju nie.
Zwykle kiedy strona potrzebuje informacji
od programu po stronie serwera,
wszystko zupenie si zatrzymuje do czasu,
gdy serwer udzieli odpowiedzi, chyba e
strona przele danie asynchroniczne.
I tym wanie zajmuje si Ajax.
P:
Skd mam wiedzie, kiedy uywa

Ajaksa i da asynchronicznych,
a kiedy nie?
O: Pomyl o tym w ten sposb:
kiedy chcesz, eby co si dziao,

podczas gdy uytkownik nadal pracuje,
prawdopodobnie bdziesz potrzebowa
dania asynchronicznego. Kiedy jednak
uytkownikowi do kontynuacji dziaa
potrzebna jest informacja albo odpowied
Twojej aplikacji, wwczas bdzie on musia
czeka. To zazwyczaj wie si z daniem
synchronicznym.
P: Czy do korzystania z XML-a nie

bd potrzebowa XHTML-a?
O:
mieszna historia: XHTML to XML.

U swoich podstaw XHTML nie jest a
tak podobny do HTML-a, jak sdzi
wiele osb. Jest on jzykiem precyzyjniej
zdefiniowanym pod wzgldem skadni,
ale wywodzi si z tej samej rodziny co
XML. Nie znaczy to jednak, e XHTML
moe przetwarza XML albo z nim
wsppracowa lepiej, ni potrafi to
HTML. W ksice tej znaczniki s zgodne
z HTML5, ktry bdzie zawiera w sobie
XHTML5, kiedy tylko zostanie wydana
specyfikacja standardu.
Masz racj.
Miejmy to ju za sob, a bdziemy
mogli wzi si za dodawanie
Ajaksa do naszej strony...
jquery & ajax
Magnesiki z kodem
Poukadaj magnesiki, aby dokoczy kod tworzcy dwie nowe karty, ktre bd wywietla rne
rodzaje informacji: pierwsz dla zawodnikw (z identyfikatorem male) i drug dla zawodniczek
(z identyfikatorem female). Moesz usun kart O biegu, ale pozostaw kart Wszyscy
zawodnicy. W kadej sekcji wstaw pusty element ul, ktry bdzie zawiera dane biegaczy.
Oprcz tego usu ca obecn zawarto z elementu ul finishers_all.
<body>
"scripts/my_scripts.js"
<header>
<h2>________________________</h2>
</header>
<div id="main">
index.html
#male
<ul class="idTabs">
&G3% AAAAAAAAAAAAAG3F?LK3GK&G
"finishers_all"
&G3% 3&GAAAAAAAAAAAAAAAAAAAAK3GK&G
&G3% 3&&GHZLZ3F?LK3GK&G
</ul>
Rok 2012 - Uczestnicy biegu
<div id="male">
%G3F?LK%G
"updatedTime"
<ul id="______________________"></ul>
</div>
<div __________________________>
%G3F?LZRK%G
Zawodniczki
<ul id="finishers_f"></ul>
</div>
finishers_m
<div _________________________>
%GHZLZ3F?LK%G
<ul id=______________________></ul>
id="female"
</div>
</div>
<footer>
id="all"
%G 39&3LS?&3FZRL%3ZL%9LZRIF^K%G
<br>Ostatnia aktualizacja: <div
id=______________________></div>
</footer>
<script src=______________________________></script>
</body>
jeste tutaj 337

Powiniene teraz mie dwie nowe karty, po jednej dla zawodnikw i zawodniczek.
<body>
<header>
Rok 2012 - Uczestnicy biegu

<h2>______________________________</h2>
</header>
index.html
<div id="main">
<ul class="idTabs">
#male
&G3% AAAAAAAAAAAAAG3F?LK3GK&G
&G3% 3&GAAAAAAAAAAAAAAAAAAAAK3GK&G
Zawodniczki
</ul>
<div id="male">
%G3F?LK%G
<ul id="______________________"></ul>
finishers_m
</div>
<div __________________________>
id="female"
%G3F?LZRK%G
<ul id="finishers_f"></ul>
Nasza lista
zawodnikw
</div>
<div _________________________>
id="all"
%GHZLZ3F?LK%G
"finishers_all"
<ul id=______________________></ul>
</div>
</div>
<footer>
<br>Ostatnia aktualizacja: <div id=______________________></
"updatedTime"
div>
</footer>
<script src=______________________________></script>
"scripts/my_scripts.js"
</body>
338
Rozdzia 8.
W celu utworzenia
naszych kart docz
wtyczk jQuery.
jquery & ajax
Jazda prbna
Zaktualizuj swj plik index.html kodem, ktry ukoczye w wiczeniu
z magnesikami, i otwrz go w swojej ulubionej przegldarce.
Niesamowite. Dziki tej

wtyczce szybko ruszylimy
do przodu. Ju sysz
fale rozlewajce si po
play...
Dobra robota!
Nasza strona zaczyna nabiera ksztatw. Spjrzmy
teraz, jak moemy zabra si za pobieranie danych
z serwera, dziki czemu zapenimy te karty
rzeczywistymi informacjami z biegu.
jeste tutaj 339
czas na pobranie lekcji
Pobieranie danych przy uyciu metody ajax

Potrzebujesz danych? Priorytetem jQuery i Ajaksa jest ich dostarczanie. Metoda jQuery
ajax zwraca obiekt (pamitasz obiekty z rozdziau 6., prawda?) zawierajcy dane na
temat okrelonej czynnoci, ktr prbujesz wykona. Metoda ajax moe przyjmowa
rne parametry i potrafi PRZESYA dane do serwera albo je z niego POBIERA.
Skrt jQuery
Metoda jQuery aja

x
$.ajax({
Uruchom t funkcj, jeli
wykonanie metody ajax zakoczy
y
si sukcesem. Niedugo dooym
.
kodu
h
tu troc
url: "my_page.html"
Adres URL elementu,
ktry chcesz POBRA
za pomoc Ajaksa
success: function(data){
}
});
Dane zwrcone po
wywoaniu metody ajax
Aby uzyska pen list wszystkich parametrw dostpnych w tej metodzie,

odwied stron z dokumentacj jQuery http://api.jquery.com/jQuery.ajax/.
Istnieje te seria metod zoonych, ktre su do obsugi wywoa ajaksowych.
Obiecujemy, e zajmiemy si nimi nieco pniej.
Na razie po prostu zaktualizuj swj plik my_scripts.js, doczajc

do kodu wyrnione poniej wiersze.
)#;*,

2 !? !#;
Q
? 2
! Q
B 2;
Q
! !!2 *;
+,
}
.+0
Pobierz za pomoc Ajaksa

plik finishers.xml.
Ten parametr decyduje
o przechowywaniu wynikw
w lokalnej pamici podrcznej.
Moe to zmniejszy liczb
odwoa do serwera.
Typ danych
,
spodziewam ktry
dosta od sey si
rwera
getTime();
function getTime(){
var a_p = "";
var d = new Date();
my_scripts.js
340
Rozdzia 8.
jquery & ajax
Jazda prbna
Zaktualizuj swj plik my_scripts.js o kod z poprzedniej strony, po czym spod adresu
ftp://ftp.helion.pl/przyklady/jquerg.zip pobierz przykadowy plik XML z tego rozdziau i zapisz
go w tym samym katalogu, w ktrym znajduje si plik index.html. Nastpnie otwrz plik index.
html w swojej przegldarce i otwrz kart Network (w narzdziach dla programistw w Google
Chrome) albo Net (Firebug w przegldarce Firefox). Twj plik XML powinien by tam
wymieniony razem z pozostaymi plikami z Twojej strony.
Ale XML w narzdziach

dla programistw nic mi nie da.
Jak mog go zobaczy na ekranie,
kiedy bd tego potrzebowa?
I czy nie powinnam wstawi
do funkcji jakiego wywoania
w rodzaju $.ajax?
Suszna uwaga.
Wywoania ajaksowe podlegaj zasadzie tosamego pochodzenia!

Zasada tosamego pochodzenia to regua bezpieczestwa JavaScriptu oraz
2EHMU]\MWR innych jzykw skryptowych po stronie klienta. Umoliwia ona uruchamianym
na stronie skryptom uzyskanie dostpu do zasobw, takich jak metody

i waciwoci elementw, ktre pochodz z tego samego serwera. Nie pozwala
natomiast na dostp do elementw strony, ktre pochodz z innych serwerw. Ze
wzgldu na zgodno z wczeniejszymi wersjami zawarto JavaScript nie podlega
takiemu sprawdzaniu, ale plik XML z naszego przykadu ju tak. Oznacza to, e plik XML
musi znajdowa si na tym samym serwerze co strona, ktra ten plik pobiera1*.
1*
Google Chrome i tak moe zablokowa pobieranie przez nasz stron pliku XML z wynikami biegu. Aby
plik XML zosta wczytany, naley uruchomi Google Chrome z parametrem --allow-file-accessfrom-files. Po wczytaniu do Chrome strony index.html naley otworzy narzdzia dla programistw,
a nastpnie j odwiey przyp. tum.
Teraz, kiedy ju wiemy, e

moemy zaadowa do
przegldarki plik XML,
powinnimy wybra potrzebny
tekst i wywietli go na
ekranie. Musimy odszuka
kadego biegacza, aby
umieci go na odpowiedniej
licie na stronie. A co
do ostatniego pytania, to
tak dobr praktyk jest
wstawianie wywoa metody
ajax do funkcji, dziki czemu
mona je uruchamia, kiedy
tylko s potrzebne.
jeste tutaj 341
w ptli z metodami find oraz each
Przetwarzanie danych XML

Potrzebujemy sposobu na wydobycie kadego biegacza z naszego pliku XML i wywietlenie go
na ekranie. Na szczcie jQuery udostpnia metod find, ktrej zadaniem jest znajdowanie
elementw zgodnych z zadanymi kryteriami. Metoda find pozwala szuka wrd potomkw
elementw w ustrukturyzowanym, hierarchicznym zbiorze informacji, takim jak drzewo DOM
albo dokument XML, oraz tworzy nowe tablice, ktre zawieraj pasujce elementy. Metody find
oraz children s do siebie podobne (metodzie children przygldalimy si w rozdziale 4., kiedy
tworzylimy menu dla restauracji w Webowicach) z tym wyjtkiem, e ta druga przechodzi tylko
o jeden poziom drzewa DOM w d, a my moemy mie potrzeb zejcia jeszcze niej...

$("li").find("ul")
li
li
li

li
li
li
li
li
li
li
li
li

Tutaj moe by
dowolny selektor.
Tutaj moe znajdowa si dowolna

metoda jQuery taka jak zdarzenie
lub manipulator tekstu albo stylu.
li
li
$("li").find("ul").css('background-color', 'blue');
Tutaj moe znajdowa si
dowolny selektor albo grupa
lub zbir elementw jQuery.
czc metod
find z metod each,
moemy szuka grup
elementw i dziaa
z nimi indywidualnie
przy uyciu ptli.
342
Rozdzia 8.
To polecenie znajdzie wszystkie

elementy ul, ktre s zawarte
w dowolnych elementach li,
i.
i zmieni kolor ich ta na niebiesk
WYSIL
SZARE KOMRKI
Czy wiesz, z ktrymi fragmentami naszego dokumentu XML
bdziemy musieli pracowa, eby wywietli na ekranie dane
poszczeglnych biegaczy?
jquery & ajax
Magnesiki z kodem
Poukadaj magnesiki z kodem, aby utworzy funkcj o nazwie getXMLRacers, ktra wywoa metod
ajax oraz zaaduje plik finishers.xml. Kiedy plik XML zostanie zaadowany, oprnij list, ktra bdzie
przechowywa informacje, po czym odszukaj w nim kadego biegacza i okrel, czy zawodnik jest
mczyzn, czy kobiet. Docz zawodnikw do list odpowiednich dla ich pci oraz do listy finishers_all.
Nastpnie wywoaj funkcj getTime, aby zaktualizowa wywietlany na stronie czas.
function _____________
getXMLRacers(){
"finishers.xml"
$.ajax({
url: _________________,
getTime();
success:
cache: false,
dataType: "xml",
_________ function(xml){
$('#finishers_all')
(info)
$(_______________).empty();
$('#finishers_f')__________;
'#finishers_m'
$('#finishers_all').empty();
$(xml).find________________(function() {
@3 &G3ZFR+!%?AAAAAAAAAAAAAAAA!%
?&3,Z3+AAAAAAAAAAAAAAAAAAAA,K&G
if( $(this).find("gender").text() == "m" ){
$('#finishers_m').append_______
("runner").each
}else if ( $(this).find("gender").text() == "f" ){

__________________.append(info);
$('#finishers_f')
}else{ }
__________________.append(info);
.empty()
});
___________
}
("fname").text()
$(this).find("time")
});
}
my_scripts.js
jeste tutaj 343

Korzystajc z metod find oraz each, moesz przej w ptli przez plik finishers.xml, sprawdzi pe
zawodnikw i doda kadego z nich do odpowiedniej karty w swojej aplikacji.
getXMLRacers(){
function _____________
$.ajax({
"finishers.xml"
url: _________________,
cache: false,
dataType: "xml",
success: function(xml){
_________
'#finishers_m'
$(_______________).empty();
kie
Wyczy wszyst
elementy ul, eby
mogy otrzyma .
uaktualnione dane
.empty()
$('#finishers_f')__________;
Odszukaj w ptli kady element

.
runner znajdujcy si w pliku XML
("runner").each
$(xml).find________________(function()
{
("fname").text()
@3 &G3ZFR+!%?AAAAAAAAAAAAAAAA!%
$(this).find("time")
?&3,Z3+AAAAAAAAAAAAAAAAAAAA,K&G
if( $(this).find("gender").text() == "m" ){

(info)
$('#finishers_m').append_______
}else if ( $(this).find("gender").text() == "f" ){
Sprawd pe kadego
biegacza, aby mona
go byo umieci na
waciwej licie.
$('#finishers_f')
__________________.append(info);
}else{ }
_all')
$('#finishers
__________________.append(info);
});
___________
getTime();
}
});
czy
kich biega
Dodaj te wszyst all.
s_
er
ish
do listy fin
Wywoaj funkcj getTim

zaktualizowa stron e, eby
o
o ktrej funkcja getXM godzin,
zostaa wywoana po LRacers
raz ostatni.
W powyszym przykadzie wiersz

zaczynajcy si od var
info = ... by zbyt dugi, eby zmie
ci si na stronie,
wic musielimy jego fragment
przenie do nastpnej
linijki. W swoim kodzie nie mus
isz tego robi.
344
Rozdzia 8.
my_scripts.js
jquery & ajax
Jazda prbna
Zaktualizuj swj plik my_scripts.js o funkcj getXMLRacers. Ponadto zastp wywoanie funkcji
getTime (w sekcji document.ready) wywoaniem funkcji getXMLRacers; funkcja getTime jest
ju wywoywana wewntrz tej nowej funkcji. Upewnij si, e uruchamiasz swj kod na serwerze
WWW adres URL powinien wic rozpoczyna si od http://, a nie wskazywa ciek do
lokalnego pliku. Oprcz tego Twj plik XML powinien znajdowa si na tym samym serwerze co
plik HTML w przeciwnym razie czekaj Ci uciliwe problemy z tosamoci pochodzenia.
Wspaniale! Mam funkcj, ktr

mog wywoywa w celu odczytywania
danych XML. Ale czy nie powinna si
ona wykonywa wicej ni tylko raz,
jeli strona ma by aktualizowana
automatycznie?
Zgadza si, powinna.
Na szczcie w poprzednim rozdziale dowiedzielimy si ju,
jak planowa harmonogramy zdarze, aby zachodziy one
regularnie na stronie. Jeszcze raz rzumy szybko okiem, jak
to zrobi, i sprawdmy, jakie opcje mamy tym razem...
jeste tutaj 345
wszystko w swoim czasie
Harmonogramy zdarze na stronie

W poprzednim rozdziale zobaczylimy, e zarwno JavaScript, jak i jQuery udostpniaj metody czasowe,
ktre wywouj funkcje dziaajce w zalenoci od upywu czasu. Obiekt window jzyka JavaScript ma
cztery metody czasowe suce do kontrolowania zdarze zalenie od czasu: setTimeout, clearTimeout,
setInterval i clearInterval. jQuery udostpnia metod delay, ale jest ona dedykowana efektom i nie
oferuje opcji dla harmonogramw ani powtarzalnych dziaa. Ona nam tu nie pomoe...
Metody czasowe JavaScriptu

! B
! A
Uyj mnie,
kiedy chcesz
okreli przedzia
czasu, jaki naley
odczeka przed
wywoaniem
funkcji.
99L
Funkcja, ktr
naley wywoa,
kiedy minie
wskazany okres
czasu
Metoda jQuery delay
Ka funkcji
wywoywa si
wielokrotnie
z odstpami czasu
midzy kolejnymi
powtrzeniami.
setInterval(repeatMe, 1000);
Opnienie
(w milisekund
ach)

Funkcja, ktr
naley powtrzy za kadym
razem, kiedy
minie wskazany
interwa czasu
Przerwa midzy
kolejnymi wywoaniami funkcji
(w milisekundach)
Dodaj przerw
midzy efektami,
ktre znajduj
si w acuchu
efektw.
slideDown().
*@:::+.slideUp();
t
Taki acuch jes
znany w jQuery
jako kolejka
efektw.
W przykadzie
tym metoda
delay umieszcza
piciosekundow
przerw midzy
efektami slideUp
i slideDown.
Przecie to oczywiste! Uyjemy metody

setInterval tak jak ostatnio. Zgadza si?
Nie tak szybko!
Nie zawsze moemy by tego tacy pewni. Zwykle korzystamy z metody setInterval w celu
ustalania harmonogramw dla zdarze, ktre wystpuj na stronie regularnie, ale kiedy zale
one od zasobw zewntrznych (takich jak nasz plik z danymi), moe ona powodowa problemy.
2EHMU]\MWR
Metoda ! A

zadziaa nawet wtedy, kiedy funkcja, ktr
wywouje, nie jest jeszcze gotowa.
Kiedy oczekujesz informacji z innego serwera albo czekasz na dziaanie

uytkownika, setInterval moe ponownie wywoa funkcj, gdy Ty nie
bdziesz na to gotowy. Twoje funkcje nie zawsze mog zwraca wyniki w takiej kolejnoci,
w jakiej je wywoae.
346
Rozdzia 8.
jquery & ajax
Funkcje samowywoujce si
Funkcja samowywoujca si wywouje si sama podczas jej zwykego dziaania. Funkcje takie mog by szczeglnie
przydatne, kiedy musimy poczeka, a obecnie wykonywana funkcja zakoczy swoje dziaanie, zanim bdzie j mona
uruchomi ponownie. Pocz samowywoywanie si z metod setTimeout, a bdziesz mg utworzy harmonogram
dla funkcji, ktra uruchomi si wycznie wtedy, kiedy poprzednie jej wywoanie si powiedzie. W przeciwnym razie
nie dojdzie ona w kodzie do miejsca jej wasnego wywoania, w zwizku z czym nie zostanie powtrnie uruchomiona.
Zaostrz owek
Utwrz funkcj o nazwie startAJAXcalls, ktra bdzie wywoywana wtedy, gdy strona zostanie ju
zaadowana, i ktra bdzie wywoywa funkcj getXMLRacers co 10 sekund. Zdefiniuj zmienn o nazwie
FREQ na pocztku pliku ze skryptem wewntrz funkcji $(document).ready i ustaw j na liczb milisekund,
ktre bd nam potrzebne jako parametr okrelajcy czstotliwo wywoa funkcji getXMLRacers.
Skorzystaj z metody setTimeout w celu wywoania funkcji startAJAXcalls, co przeksztaci j w funkcj
samowywoujc si po zakoczeniu dziaania funkcji getXMLRacers. Poza tym bdziesz musia wywoa
funkcj startAJAXcalls bezporednio ze swojego kodu, aby uruchomi jej licznik.
function startAJAXcalls(){
}
getXMLRacers();
function getXMLRacers(){
$.ajax({
url: "finishers.xml",
cache: false,
my_scripts.js
jeste tutaj 347
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Nadaj zmiennej
FREQ warto 10000,
poniewa metoda
setTimeout wymaga
parametru podanego
w milisekundach.
W naszym rozwizaniu skorzystalimy z metody setTimeout wewntrz funkcji

startAJAXcalls w celu wywoywania funkcji getXMLRacers, ktra wczytuje
plik XML. Uylimy te samowywoania. To samowywoanie gwarantuje, e kolejne
wywoanie nastpi tylko wtedy, kiedy poprzednie zostanie zakoczone. Dziki temu
mamy pewno, e nie nastpi nagromadzenie da do serwera, kiedy sie bdzie
wolna albo gdy serwer nie odpowie przed wykonaniem kolejnego wywoania funkcji.
var FREQ = 10000;
Wywouj cyklicznie
funkcj getXMLRacers
wewntrz metody
setTimeout.
setTimeout( function() {
getXMLRacers();
Poniewa czekamy, a
zakoczy si ostatnie
wywoanie naszej fun
kcji,
korzystamy z metody
setTimeout.
startAJAXcalls();
Ponownie wywoaj nas

funkcj za 10 sekund. z
},
FREQ
Przeka nasz zmienn

jako parametr.
);
}
Wywoaj metod y
ab
getXMLRacers, e kiedy
,
wa
to
an
ar
zagw
pobrana,
strona zostanie j
nie
na
ju
bdzie
zawarto.
getXMLRacers();
startAJAXcalls();
function getXMLRacers(){
Wywoaj nasz
nowo utworzon
funkcj w celu
jej uruchomienia.
$.ajax({
url: "finishers.xml",
cache: false,
my_scripts.js
Nie istniej
gupie pytania
P: Wszystkie materiay, jakie czytaem o Ajaksie,
stwierdzaj, e musz uywa obiektu XMLHttpRequest.

Czy to prawda?
O: Tak, ale nie w przypadku jQuery. Jako programista nie musisz
uywa tego obiektu. jQuery robi to za Ciebie, kiedy korzystasz

z metody ajax. Ponadto jako e wywoania Ajaksa mog
rni si w zalenoci od przegldarki jQuery ustala najlepszy
sposb realizacji da Ajaksa dla kadego z uytkownikw Twojej
witryny.
348
Rozdzia 8.
P: Co si stanie, jeli serwer zwrci bd albo w ogle nie
odpowie? Czy bdziemy siedzie i czeka w nieskoczono?
O: Nie, danie nie bdzie czeka wiecznie. Moesz zdefiniowa
limit czasu jako jeden z parametrw wywoania funkcji ajax.

Poza tym, podobnie jak w przypadku parametru zdarzenia
success, ktre moe wywoywa funkcje, istniej inne zdarzenia
takie jak error, complete itp. Zdarzenia te mog by ustawione
jako lokalne, gdy wywoywana jest metoda ajax, albo jako
globalne, ktre uruchamiaj dowolne funkcje obsugi mogce by
ich suchaczami.
jquery & ajax
Jazda prbna
Zaktualizuj swj plik my_scripts.js o nowy kod, ktry wanie utworzye. Nie zapomnij te o dodaniu
wywoania nowej funkcji pod koniec skryptu, tu po wywoaniu funkcji getXMLRacers. Nastpnie poogldaj
swoj stron w przegldarce i uyj funkcji Network w Google Chrome albo Net w narzdziu Firebug
Firefoksa, aby zobaczy, jak co 10 sekund pobierany jest plik. Kiedy ju stwierdzisz, e tak si dzieje,
zaktualizuj w swoim ulubionym edytorze tekstowym plik XML podanymi poniej informacjami i zobacz,
jak nowy biegacz pojawia si na stronie (tylko nie zapomnij o zapisaniu pliku XML po aktualizacji!).
Dodaj do swojego pliku XML

tego biegacza i zapisz zmiany.
Zobacz, jak automatycznie
zostaje on dodany na Twoj
stron.
Hej, to naprawd zaczyna

dobrze wyglda! Czy nie
moglibymy jednak skorzysta
z czego prostszego,
eby mie na stronie
zaktualizowany czas?
<runner>
<fname>Justyn</fname>
<lname>Joniec</lname>
<gender>m</gender>
G-+KG
</runner>
jeste tutaj 349
a kt nie chce wicej?
Dosta wicej od swojego serwera

Jak ju do tej pory widzielimy, HTML wietnie nadaje si do wywietlania informacji na stronie, a XML
dobrze si sprawdza przy formatowaniu i przesyaniu danych na stron. Co jednak, kiedy zechcemy,
eby nasza strona naprawd co zrobia, na przykad wywietlia czas albo pobraa dane z serwera?
Prawdopodobnie moglibymy robi wicej zabawnych rzeczy za pomoc jQuery i JavaScriptu, ale czemu
nie mielibymy skorzysta z czego specjalnie zaprojektowanego do takiej pracy?
Jzyki dziaajce po stronie serwera nadchodz z pomoc!

Istnieje wiele rnych jzykw dziaajcych po stronie serwera, takich jak JSP, ASP albo Cold Fusion,
ale my dla naszych potrzeb skupimy si na jednym: PHP.
PHP (ktrego nazwa jest skrtem od PHP: Hypertext Processor, czyli PHP: Procesor Hipertekstu tak,
tam jest akronim w akronimie!; nie pytaj nas dlaczego) jest bezpatnym jzykiem oglnego zastosowania
wykonywanym po stronie serwera w celu tworzenia dynamicznych stron internetowych. Pliki zawierajce
PHP s uruchamiane na serwerze i generuj HTML, ktry jest nastpnie przekazywany przegldarce do
przetworzenia. Dokadniej przyjrzymy si PHP w nastpnym rozdziale, ale teraz spjrzmy, jak moe on
nam pomc w realizacji naszej funkcji aktualizacji czasu.
Serwer
.php
PHP
.php
Przegldarka
PHP jest uywany

do dynamicznego
tworzenia kodu
HTML, ktry
jest nastpnie
wywietlany
w przegldarce.
.php
Zaczekaj! Jeli w dodatku B

nie przerobie instrukcji
dotyczcych instalacji PHP i MySQL,
nastpna strona nie bdzie u Ciebie
dziaa. W tym celu musisz mie
dziaajce PHP. Zajmij si tym,
zanim przejdziesz dalej.
350
Rozdzia 8.
jquery & ajax
Ktra godzina?
OK, przyznajemy, e istnieje funkcja JavaScriptu, ktrej moglibymy uy w celu
wywietlenia czasu. Jest to jednak zbyt dua i skomplikowana funkcja jak na zrobienie
czego tak prostego. Na szczcie PHP udostpnia nam bardzo atwe sposoby na uzyskanie
czasu za pomoc funkcji date. Tak jak funkcje, ktre tworzye do tej pory, pobiera ona
wiele parametrw i zwraca rne wersje daty w zalenoci od przekazanych argumentw.
Gwny parametr okrela sposb wywietlania daty. Przyjrzyjmy si tej funkcji bliej.
Wszystko, co znajduje si midzy
nawiasami kwadratowymi [ oraz ],
jest parametrem opcjonalnym.
PHP date.
Wywoaj funkcj
date (string $format [, int $timestamp = time() ]);

Przeka parametr dla daty,
ktra ma zosta zwrcona.
Jest to acuch tekstowy.
W PHP take uywany

jest znak dolara, ale tylko
przy zmiennych.
Zawsze kocz kady

wiersz
w PHP rednikiem.
W celu poznania penej listy parametrw funkcji date odwied stron

http://php.net/manual/pl/function.date.php.
Zrb to!
W tym samym folderze, w ktrym znajduje si plik index.html, utwrz nowy plik i nazwij
go time.php. Dodaj do niego nastpujcy kod:
Otwierajcy znacznik PHP.
Mwi on serwerowi, gdzie
jest kod PHP, ktry naley
przetworzy.
je
Instrukcja echo nakazu
PHP wywietlenie na re
ekranie informacji, kt
po niej nastpuj.
Ustaw czas domylny

date, aby uzyska pra dla funkcji
widow
godzin w swojej lokaliz
acji.
#%#
date_default_timezone_set('Europe/Warsaw');
echo date("F j, Y, g:i:s a");
Zamykajcy znacznik
PHP
Wywoaj fu
z podanymi nkcj date
aby uzyska parametrami,
daty jak w taki sam format
w JavaScripTwojej funkcji
cie.
Przykadowy acuch tworzcy

format daty:
F pena nazwa miesica (angielska)
j dzie miesica bez zer wiodcych
Y czterocyfrowy rok
g godzina w formacie 12-godzinnym
i minuty z zerami wiodcymi
s sekundy z zerami wiodcymi
a oznaczenie am lub pm pisane
maymi literami
time.php
jeste tutaj 351
jazda prbna
Jazda prbna
Po zapisaniu na dysku pliku time.php otwrz go w swojej przegldarce, aby upewni si, e
data ma waciwy format. Kod PHP musi wykonywa si na serwerze WWW, a zatem adres
URL powinien zaczyna si od http://, a nie wskazywa ciek do pliku. Upewnij si te, e
URL wskazuje na serwer, na ktrym znajduje si Twj kod.
Za pomoc naszego ma
w PHP wywietlilimy ego kodu
ekranie. O wiele atwieczas na
j ni
w JavaScripcie!
Jestem ju w peni gotw na pozbycie

si tej biaej jak ciana skry. Dziki PHP
aktualizacja czasu to atwizna, ale czy nie
ma jeszcze kilku wymogw, za ktre do tej
pory si nie wzilimy?
Wanie, jeszcze nie wsiadamy na ten samolot. Zobaczmy, co pozostao do zrobienia:

1
3
)

"

3
)
% )
!
3
)
+
+ )

!
!
"%
"

+)
Zabierzmy si za pierwszy i drugi punkt naszej listy. Zajmiemy si nimi cznie,

poniewa s ze sob powizane.
352
Rozdzia 8.
jquery & ajax
Zaostrz owek
W stopce swojego pliku index.html dodaj znacznik <span> o identyfikatorze freq. Bdzie
on uywany w celu wskazania wyniku dziaania nowej funkcji o nazwie showFrequency,
ktra powinna wywietla, jak czsto aktualizowana jest strona. Utwrz te kolejn
funkcj o nazwie getTimeAjax, ktra zaaduje plik time.php za pomoc metody load
bdcej metod zoon Ajaksa. Jako parametr pobiera ona adres URL i automatycznie
wpisuje wynik do sekcji o identyfikatorze updatedTime. Na koniec zastp wywoanie
funkcji getTime w getXMLRacers now funkcj getTimeAjax.
<footer>
<br><br>
Ostatnia aktualizacja: <div id="updatedTime"></div>
</footer>
index.html
function
3?XF3LKR9?
}
.
.
.
.
function
$(
).load(
);
my_scripts.js
jeste tutaj 353
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Dodae ju w stopce swojego pliku index.html znacznik <span> o identyfikatorze freq,

ktry wywietla informacj o tym, jak czsto aktualizowana jest strona. Utworzye te
now funkcj o nazwie getTimeAjax, ktra aduje plik time.php za pomoc metody
zoonej Ajaksa load i wpisuje wynik do sekcji updatedTime. Zaktualizowae te
funkcj getXMLRacers, tak aby korzystaa z nowej funkcji getTimeAjax zamiast
z funkcji JavaScriptu getTime.
<footer>
<span id="freq"></span>
<br><br>
Dodaj element span w

wywietlania czstotliwcelu
oci.
Ostatnia aktualizacja: <div id="updatedTime"></div>

</footer>
index.html
function showFrequency(){
$("#freq").html(
3?XF3LKR9?
}
Utwrz dwie nowe fun
pokazujc czstotliw kcje: jedn
o i drug
pobierajc za pored
nic
Ajaksa czas z serwera. twem
.
.
.
Podziel warto przez 1000,

aby zamieni milisekundy
na sekundy.
.
function getTimeAjax(){
$('#updatedTime' ).load(
"time.php"
}
Wypisz wynik na ekranie
w elemencie updatedTime.
);
e.php
Zaaduj plik timsa.
ak
Aj
za pomoc
my_scripts.js
354
Rozdzia 8.
jquery & ajax
Jazda prbna
Zaktualizuj swj plik my_scripts.js kodem, ktry wanie utworzye. Nie zapomnij te
o dodaniu do pliku index.html nowego elementu span i zastpieniu funkcji getTime
funkcj getTimeAjax.
3
)

"

3
)
% )
!
3
)
+
+ )

!
!
"%
"

+)
Ale jak powstrzymamy funkcj,
ktra wywouje sam siebie?
To bdzie trudne.
Musimy tak zmieni funkcj, eby
dziaaa tylko wtedy, gdy s spenione
okrelone warunki.
WYSIL
SZARE KOMRKI
Ktre z funkcjonalnoci poznanych przez nas
do tej pory sprawdzaj, czy zostay spenione
warunki?
jeste tutaj 355
i znowu sprawdzamy warunki
Wyczanie zaplanowanych zdarze na stronie

W rozdziaach 5. i 7. utworzylimy potworn funkcj, korzystajc z metody
setTimeout w celu cyklicznego wywoywania funkcji odpowiedzialnych za
efekty byskawic. Doprowadzio to do nieprzewidzianych konsekwencji
wystarczyo, e strona stracia fokus, a efekty wizualne nawarstwiay si jeden
na drugim, kiedy kto powraca do aplikacji.
Czy kto bdzie

jeszcze potrzebowa
potwora?
Poniewa wiemy ju, e musimy poczeka, a poprzednie wywoanie funkcji

zostanie zakoczone, nie moemy skorzysta w tych wywoaniach z metody
setInterval.
Musimy wymyle lepsze rozwizanie, a jakie rozwizanie moe by lepsze
od tego, z ktrym ju si spotkalimy? Nie moemy skorzysta ze zdarze
przegldarki window.onblur i window.onfocus, poniewa nie chcemy,
aby uytkownicy byli zmuszeni do opuszczania strony w celu zatrzymania
aktualizacji. Widzielimy ju jednak w kilku rozdziaach, jak uruchamia kod
w oparciu o logik warunkow, skorzystajmy zatem z niej take i tutaj.
WYSIL
SZARE KOMRKI
Czy wiesz, z ktrej struktury logiki warunkowej moemy skorzysta
w tym przypadku? Wskazwka: uywalimy jej w celu sprawdzania
pci biegaczy w pliku XML.
Nie istniej
gupie pytania
P:
P:
Jakie inne dane oprcz

XML-a moe adowa na stron Ajax?
Jakie inne metody zoone dla

Ajaksa istniej w jQuery?
Za pomoc jQuery moesz adowa

na stron rne rodzaje informacji. Tak
jak ju widziae, korzystajc z metody
load, moesz pobiera wyniki z pliku PHP
bezporednio do elementu HTML. Poza
tym moesz adowa inne pliki HTML,
JavaScript, zwyky tekst oraz obiekty JSON
(JavaScript Object Notation). Obiektom
JSON przyjrzymy si w nastpnym
rozdziale.
jQuery ma pi metod zoonych

(skrtowych) dla Ajaksa: get, getJSON,
getScript, post i load. Pierwsze cztery
s wywoywane za pomoc obiektu
jQuery. Metoda load moe by natomiast
wywoywana z dowolnego elementu,
ktry bdzie miejscem przeznaczenia dla
zwrconych danych.
O:
356
Rozdzia 8.
O:
P: Kiedy powinienem uywa

metody load, a kiedy ajax?
O:
Metoda load jest przeznaczona

do wczytywania okrelonych danych
w okrelone miejsce, tak jak to robimy
w naszej funkcji getTimeAjax. Metoda
ajax jest o wiele bardziej zoona i ma
wicej zastosowa oraz parametrw.
Moe by uywana do wczytywania
innych informacji albo przesyania danych
do serwera w celu ich przetworzenia.
Przyjrzymy si jej bliej w nastpnym
rozdziale.
jquery & ajax
Zaostrz owek
Utwrz zmienn globaln o nazwie repeat o domylnej wartoci true. Napisz funkcj, ktra bdzie
zmienia jej warto po klikniciu nowego przycisku o identyfikatorze btnStop. Skonfiguruj kod HTML
elementu span o identyfikatorze freq, tak aby wywietla on komunikat Aktualizacje zatrzymane. Utwrz
te przycisk o nazwie btnStart, ktry nada globalnej zmiennej repeat warto true oraz wywoa funkcje
startAJAXcalls oraz setTimeout, jeli zmienna repeat bdzie miaa warto true. Nowe przyciski
dodaj do stopki strony.
var FREQ = 10000;
getXMLRacers();
startAJAXcalls();
},
FREQ
);
.
.
$("#btnStop").click(function(){
$("#freq").html(
);
});
function(){
startAJAXcalls();
});
my_scripts.js
<footer>
<br>
<span id="freq"></span> <br><br>
index.html
jeste tutaj 357
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Utwrz zmienn globaln o nazwie repeat o domylnej wartoci true. Napisz funkcj, ktra bdzie zmienia
jej warto po klikniciu nowego przycisku o identyfikatorze btnStop. Skonfiguruj kod HTML elementu
span o identyfikatorze freq, tak aby wywietla on komunikat Aktualizacje zatrzymane. Utwrz te
przycisk o nazwie btnStart, ktry nada globalnej zmiennej repeat warto true oraz wywoa funkcje
startAJAXcalls oraz setTimeout, jeli zmienna repeat bdzie miaa warto true. Nowe przyciski dodaj
do stopki strony.
warto
miennej
Nadaj z true, dziki i
domyln trona bdzie s waniu.
czemu sowa po zaado
aktualiz
var repeat = true;
var FREQ = 10000;

Sprawd, czy zmienna

repeat ma warto true.
if(repeat) {
getXMLRacers();
startAJAXcalls();
},
FREQ
)
);
.
Nadaj zmiennej warto
false, kiedy zostanie
kliknity przycisk
btnStop.
.
$("#btnStop").click(function(){
repeat = false;
$("#freq").html( "Aktualizacje zatrzymane" );

ej
nadaj zmienn
Z powrotem , kiedy zostanie
ue
tr
.
warto
cisk btnStart
kliknity przyfunkcj
Wywoaj te lls, aby ponownie
startAJAXca bieranie pliku.
rozpocz po
Dodaj nowe przyciski

do stopki strony.
});
$(#btnStart).click( function(){
repeat = true;
startAJAXcalls();
showFrequency();
});
my_scripts.js
<footer>
<button id="btnStart">Wznw aktualizacje strony</button>
<button id="btnStop">Zatrzymaj aktualizacje strony</button>
<br>
<span id="freq"></span> <br><br>
358
Rozdzia 8.
index.html
jquery & ajax
Jazda prbna
Zaktualizuj swj plik my_scripts.js oraz index.html nowym kodem, ktry wanie utworzye. Nastpnie
wczytaj stron do swojej ulubionej przegldarki, aby upewni si, e wszystko dziaa. Wyprbuj nowe
przyciski, eby si przekona, czy zatrzymuj dania Ajaksa. Bdziesz mg to sprawdzi na karcie
Network w Google Chrome albo Net w narzdziu Firebug Firefoksa.
To bdzie nasz
najlepszy firmowy
wyjazd WSZECH CZASW!
To dziaa!
Masz teraz stron, ktr
mona aktualizowa w czasie
rzeczywistym (uzupeniajc
plik XML), i umoliwie
uytkownikom wczanie
i wyczanie aktualizacji.
jeste tutaj 359
twj niezbdnik jquery i ajaksa
Rozdzia 8.
Twj niezbdnik jQuery i Ajaksa

swojego niezbdnika dodae troch
PHP, troch XML-a i ca mas Ajaksa.
Ajax
ia
umoliw
, ktre
ii
g
lo
o
n
strony
nie tech
ania
Pocze cj fragmentw noci odwie
z
a
c
z
li
ie
aktua
z kon
owej be
internet
y
j.
ra, ktr
jej cae
o serwe h
d
ia
n
a
d
przed ic
sya
Ajax wy etwarza dane
z
r
moe p m.
ie
sowe s
odesan
ci ajak tody ajax.
o
ln
a
n
jo
e
ry funkc
moc m
W jQue towane za po
n
e
implem
Skrty ajax()
skrtw ajaksowych.
W jQuery istnieje pi
ale
parametry domylne,
Kady z nich ma inne
ajax:
tod
me
uj
wo
wy
e
ostatecznie wszystki
$.get
$.getJSON
$.getScript
$.post
$.load
360
Rozdzia 8.
XML
cile zdefiniowa
ny
jzyk znacznikw , chocia elastyczny
uywany do opis
ywania
danych oraz ich
struktur.
Moe by wykorz
ystywany do
przechowywania
informacji albo ich
formatowania pr
zed wysaniem.
Jest uywany w
wielu popularnych
technologiach si
eciowych takich
jak RSS,
usugi SOAP/W
eb albo SVG.
PHP
Jzyk skryptowy uruchamiany po

stronie serwera, ktry umoliwia
ny
manipulowanie zawartoci stro
iem
san
prze
jej
d
prze
cze
jesz
W
WW
.
nika
kow
uyt
do przegldarki
9.2EVXJDGDQ\FK-621
Kliencie, oto serwer

Kwiaty? Mam nadziej, e
po nich pojawi si jakie
dane. Niemniej jednak mgby
to by pocztek piknej
przyjani.
Chocia czytanie danych z pliku XML jest bardzo przydatne, to jednak nie
zawsze wystarcza. Bardziej interaktywny format wymiany danych (JavaScript Object
Notation, znany te jako JSON) uatwia pobieranie danych z serwera. JSON jest te atwiejszy
do wygenerowania i czytania ni format XML. Uywajc jQuery, PHP oraz SQL-a, nauczysz
si, jak utworzy baz danych przechowujc informacje, ktre bdziesz mg pniej
odczyta za pomoc formatu JSON i wywietli na ekranie przy uyciu jQuery. Tak objawia si
prawdziwa moc aplikacji internetowych!
chyba powinnimy byli uzgodni to z marketingowcami...
Dzia marketingu webowickiej Megakorporacji

nie zna XML-a

Od: '
($& )$
"
$/&&
$&
(
Temat:
(%(,-.

Czoem, zaogo projektantw internetowych!

cie w naszej witrynie.
Naprawd podobaj nam si zmiany, ktre wprowadzili
XML-a! Nie wiemy wic, jak dodawa nowych
Mamy jednak problem: nikt w naszym biurze nie zna
zawodnikw do strony WWW biegu.
co strona wyprawia jakie dziwne rzeczy...
Prbowalimy, ale za kadym razem robimy to le, przez
ze strony, chocia s umieszczone w pliku XML.
Zawodnicy w ogle si nie pokazuj albo pola znikaj
To bardzo dziwne.
wpisanie informacji do kilku pl i kliknicie przycisku
To, czego naprawd chcemy, to jaki sposb na proste
tak si dziao?
w celu dodania biegacza. Czy moecie sprawi, eby
nie rujnowao to caej strony?
A jak si pomylimy, to czy moglibycie zrobi tak, eby
trzy dni, ale naprawd chcielibymy, eby to tak
Wiem, e do naszego wylotu na Hawaje pozostay tylko
si zdy na czas?
dziaao, zanim wyjedziemy. Czy mylicie, e uda Wam
-Diana C. Domnej
szef marketingu
webowickiej Megakorporacji

do bajtu na 10 km
Odliczanie rozpoczte:
3 dni do startu!
362
Rozdzia 9.
obsuga danych json
Bdy w XML-u psuj stron

Kiedy w pliku XML znajduj si bdy, logika, ktr napisalimy w celu odczytywania i przetwarzania kodu
XML, zawodzi. Bdy pojawiaj si przewanie wtedy, kiedy wystpuj problemy ze znacznikami takie jak
pominicie taga zamykajcego albo niewaciwa wielko liter w nazwie znacznika. Dane w znacznikach te
mog powodowa kopoty z XML-em, jeeli nie zostay poprawnie zakodowane do uycia w tym formacie.
Za wielko
liter w znaczniku
<runner>
Gdzie si podziali
wszyscy biegacze?
Nieprawidowy
znacznik
otwierajcy
Po otwarciu pliku XML

w przegldarce wida,
gdzie znajduj si bdy.
WYSIL
SZARE KOMRKI
Kolejny prob
le
z wielkoci m
w znaczniku liter
<runner>
Wyglda na to, e XML nie bdzie odpowiedni do osignicia tego,

co jest nam potrzebne. Jakie znasz inne sposoby, z ktrych mogliby
korzysta marketingowcy podczas dodawania nowych biegaczy?
jeste tutaj 363
formularze przybywaj na ratunek
Pobierz dane ze strony

Prawdopodobnie brae pod uwag skorzystanie z formularza HTML. Za pomoc formularza mona zbiera
rne rodzaje danych i przesya je serwerowi do przetworzenia. W formularzach mamy do dyspozycji kilka
rnych typw elementw uywanych do pobierania rozmaitych typw danych. Przyjrzymy si formularzom
bliej w rozdziale 10., a teraz skorzystajmy z dwch spord ich najbardziej podstawowych elementw: pola
tekstowego i listy rozwijanej. By moe w dziedzinie formularzy jeste ju profesjonalist, niemniej jednak
rzumy na nie szybko okiem, eby wiedzie, z czym mamy do czynienia.
t> mwi
Znacznik <inpu ma od
e
,
wi
zo
ar
ul
rm
fo
oczekiwa
tego elementu
ji.
ac
inform
Sowo kluczowe type informuje

przegldark, jak ma dziaa podczas
przetwarzania tych informacji.
Znacznik
dla tego zamykajcy
elementu
<input type="text" name="txtEmail" />

Nazwa elementu jes
przesyana serwero t
do przetwarzania. wi
t> kae
Znacznik <selec worzy
przegldarce ut.
list rozwijan
<select name="truthiness">
<option value="1">True</option>
<option value="0">False</option>
</select>
Warto wybranej opc
ji zostanie
wysana do serwera.
wywietla
Element option cie
li
na
list opcji
rozwijanej.
Teraz najatwiej chyba

bdzie utworzy now kart
z formularzem, prawda?
Co takiego powinno zadziaa i bdzie atwe do

zrealizowania, poniewa wiemy ju, jak dodawa karty.
Potem bdziemy mogli popracowa nad tym, jak zapisywa
i odczytywa te dane, eby mona byo je wywietla na listach
z zawodnikami.
364
Rozdzia 9.
obsuga danych json
Kod
gotowy do
wysmaenia
Zaktualizuj swj plik index.html o dodatkow kart, na ktrej za

pomoc formularza bd dodawani nowi zawodnicy. Wprowad
te zmiany w pliku my_style.css, ktre spowoduj
poszerzenie elementu o identyfikatorze main.
my_style.css
#main {
background:#181818;
<ul class="idTabs">
color:#111;
&G3% 3&G3F?LK3GK&G
padding:15px 20px;
&G3% 3&G3F?LZRK3GK&G
width:600px;
border:1px solid #222;

x? - =3= =

margin:8px auto;
</ul>
<div id="male">
%G3F?LK%G9&?% AGK9&G
</div>
Dodaj now kart o nazwie
Dodaj nowego zawodnika.
<div id="female">
%G3F?LZRK%G9&?% AGK9&G
</div>
Dodaj nowy formularz

do wprowadzania i przHTML
esyania
danych do serwera.
<div id="all">
%GHZLZ3F?LK%G9&?% A3&&GK9&G
</div>
action mwi formularzowi, gdzie

ma wysa dane do przetworzenia.
=
?U3= =?U
P P ! #? ?XgB

AG2 ; ;V!R ;V!R 1
R=!2 ; ;{!R ;{!R 1
method
okrela, jak
dane zostan
przesane do
serwera.
y2!

Z
Z

&&!G=1y&&

W1

G
</select><br>
`! !2
; ; !; !! ':;
?9*+
; ;g !;g !! ':;
?9*g +
<br><br>
1 !1 1g 1g 3=1
?
P

</div>
Ukryte pole HTML. Niedugo bdziemy

z niego czciej korzysta.
index.html
jeste tutaj 365
jazda prbna
Jazda prbna
Otwrz plik index.html w swojej przegldarce i przejd na kart
Dodaj nowego zawodnika, aby zobaczy nowy formularz i pola
dodane do Twojej strony.
Tak wyglda
w przegldarce nowy
formularz HTML.
WYSIL
SZARE KOMRKI
Teraz, gdy masz ju na waciwym miejscu formularz do wprowadzania
danych, jak Twoim zdaniem moglibymy je zapisywa i odczytywa?
366
Rozdzia 9.
obsuga danych json
Co zrobi z danymi
Teraz musimy w jaki sposb przesa zebrane na formularzu dane do serwera i jako je zapisa. W tym celu
skorzystamy z jeszcze jednego jzyka, jakim jest PHP, aby wstawi dane do bazy danych. Bez obaw! Niedugo
wprowadzimy Ci w PHP i bazy danych, ale najpierw skupmy si na tym, jak przekaza do serwera dane z naszego
formularza.
Istniej dwie metody do przesyania danych do serwera za pomoc HTTP: GET i POST. Gwna rnica midzy nimi
polega na sposobie przekazywania danych. GET docza nazwy pl formularza oraz ich wartoci na kocu adresu
URL w postaci par klucz/warto. PHP moe odczyta tak informacj z tablicy asocjacyjnej o nazwie $_GET[],
ktra jest wysyana do serwera w momencie przekazywania formularza. Dane te s widoczne po znaku zapytania
w adresie URL.
POST wysya dane take w tablicy asocjacyjnej, ale zakodowane inaczej ktrych kocowy uytkownik nie widzi
w adresie URL. Tablica asocjacyjna $_POST[] zawiera wszystkie informacje pochodzce z elementw formularza.
S one, podobnie jak w przypadku tablicy $_GET[], seri par klucz/warto nazw elementw oraz ich wartoci.
Metoda HTTP GET
Metoda HTTP POST
<form id="my_form" method= action="x.php">
<form id="my_form" method="post" action="x.php">
<input type="text" name="a" value="1" />
<input type="text" name="b" value="2" />
<input type="hidden" name="c" value="3" />
</form>
</form>
%,

%,

,#%#38-
x.php
#%#
#%#
L%!A3KKH#9S
L%!AV3KKH#9S
L%!A8KKH#9S-
L%!AVLKKH#9S
Ale skoro formularz samodzielnie

wysya informacje, to po co nam
jQuery czy jeszcze co innego?
W tym rozdziale bdziemy

korzysta z metody POST.
Tak, formularz mgby wysya informacje...

Ale, jak ju wspomnielimy w poprzednim rozdziale, zalet jQuery
i Ajaksa jest to, e nie musisz odwiea caej strony, aby pobra lub
wysa dane, tak wic uytkownik nie bdzie za kadym razem czeka,
a strona si odwiey. Zanim jednak przelesz dane do serwera za
pomoc jQuery i Ajaksa, musisz przygotowa je do wysyki.
jeste tutaj 367
troch powanej serializacji
Sformatuj dane, zanim je wylesz

Zanim bdziemy mogli wysa informacje do serwera (korzystajc z Ajaksa), musimy nad
nimi troch popracowa, aby nada im format, ktry bdzie mg zosta wysany za pomoc
ajaksowego dania i ktry zostanie zrozumiany przez serwer. W tym celu trzeba zserializowa
nasze dane do pojedynczego obiektu, dziki czemu Ajax wyle je w postaci jednego pakietu.
jQuery udostpnia dwie metody pomocnicze suce do serializacji danych: serialize
i serializeArray. Pierwsza z nich czy wszystkie dane wprowadzone do formularza
w pojedynczy acuch tekstowy zawierajcy pary klucz/warto rozdzielone znakami &. Druga
tworzy tablic asocjacyjn par klucz/warto, ktra nadal jest pojedynczym obiektem, ale
jest bardziej ustrukturalizowana ni wynik dziaania metody serialize. Przyjrzymy si obu
z nich, chocia do naszych danych z biegu wykorzystamy metod serializeArray.
!

<form id="my_form">
<input type="text" name="b" value="2" />
!
\
<form id="my_form">
</form>
</form>
$("#my_form").serialize();
lektora
Identyfikator se
Metoda serialize
formularza
$("#my_form:input").serializeArray();
Identyfikator selektora formularza
z filtrem elementu wejciowego
HTML. Taki zapis kae selektorowi
uwzgldnia tylko elementy HTML
typu input.
/
/
[
{
a=1&b=2&c=3
name: "a",
value: "1"
},
{
name: "c",
value: "3"
}
]
368
Rozdzia 9.
Wywoanie
metody
serializeArray
obsuga danych json
Przelij dane do serwera

jQuery udostpnia skrtow metod post przeznaczon do przesyania danych
do serwera. Metoda post przyjmuje kilka parametrw, w tym adres URL, pod
ktry chcesz wysa informacje, tre tych informacji oraz funkcj obsugi, ktra
zostanie wywoana, kiedy POST zakoczy swoje dziaanie.
!#9 &A?AFJ33?39RLS3S
Skrt
jQuery
});
Adres URL, pod ktry

chcesz przesa dane
Dane, ktre chcesz

przesa i ktre zos
ju zserializowane tay
Magnesiki z kodem
Wywoaj
t funkcj
wywoania
zwrotnego.
Zwrcone dane w obiekcie

o nazwie json. Na razie si
nim nie przejmuj; powrcimy
do niego troch pniej w tym
rozdziale.
Utwrz suchacza zdarzenia kliknicia dla przycisku #btnSave, ktry pobiera z formularza wszystkie dane i je
serializuje, po czym wysya te informacje do serwera za pomoc metody jQuery post. Adres URL do wysyki pobierz
z atrybutu action formularza. Poza tym utwrz funkcj clearInputs, ktra wykasuje wartoci wszystkich pl
formularza, jeli wysyka zakoczy si powodzeniem. Bdziesz take potrzebowa anulowa domylne dziaanie
zatwierdzania formularza (zwracanie wartoci false), korzystajc ze suchacza .submit o identyfikatorze
addRunner na formularzu.
$('_______________').click(function() {
var data = $("#addRunner :input").___________________();
$.post($("#addRunner").attr('action'), __________ , _______________(json){
if (json.status == "fail") {
alert(json._____________);
serializeArray
}
if (json.status == ______________) {
"success"
alert(json.message);
clearInputs();
message
data
}, "json");
});
function ___________________{
#btnSave
function
$("#addRunner :input").each(function(){
$(this).val('');
});
submit
}
$("#addRunner").______________(function(){
return false;
});
clearInputs()
my_scripts.js
jeste tutaj 369

Utwrz suchacza zdarzenia kliknicia dla przycisku #btnSave, ktry pobiera z formularza wszystkie dane i je
serializuje, po czym wysya te informacje do serwera za pomoc metody jQuery post. Adres URL do wysyki pobierz
z atrybutu action formularza. Poza tym utwrz funkcj clearInputs, ktra wykasuje wartoci wszystkich pl
formularza, jeli wysyka zakoczy si powodzeniem. Bdziesz take potrzebowa anulowa domylne dziaanie
zatwierdzania formularza (zwracanie wartoci false), korzystajc ze suchacza .submit o identyfikatorze
addRunner na formularzu.
#btnSave
$('_______________').click(function()
{
serializeArray
var data = $("#addRunner :input").___________________();
Przygotuj wszy
formularza do stkie pola
wysania
do serwera.
$.post($("#addRunner").attr('action'), __________
, _______________(json){
data
function
if (json.status == "fail") {
alert(json._____________);
message
Pobierz atrybut action formularza,

ktry chcesz przesa.
}
"success"
if (json.status == ______________)
{
alert(json.message);
clearInputs();
}
Sprawd warto zwrcon przez

serwer i umie j w kodzie PHP,
aby przekona si, czy wykonanie
metody POST zostao zakoczone
sukcesem, czy te nie.
}, "json");
});
clearInputs()
function ___________________{
$("#addRunner :input").each(function(){
$(this).val('');
});
Uyj filtra elementw HTML, aby dosta

si do wszystkich pl formularza i ustawi
w nich pust zawarto.
}
submit
$("#addRunner").______________(function(){
return false;
});
Anuluj domyln akcj wysania formularza,

aby to kod jQuery zaj si przesaniem
danych po klikniciu przycisku.
my_scripts.js
Jazda prbna
Po ostatnich poprawkach Twoja strona nie bdzie wyglda inaczej. Powiniene jednak zaktualizowa
swj plik my_scripts.js kodem, ktry przed chwil utworzye. Nastpnie otwrz plik index.html
w przegldarce i przejd na kart Network (Chrome) albo Net (Firebug). Powiniene zobaczy
zdarzenie POST w pliku service.php za kadym razem, kiedy klikniesz przycisk btnSubmit. Zdarzenie
POST bdzie wymienione w sekcji Request Method karty Headers. Dane z formularza (Form Data)
take bd tam obecne. Teraz potrzebujemy ju tylko miejsca, w ktrym moglibymy je umieci...
370
Rozdzia 9.
obsuga danych json
Przechowuj dane w bazie MySQL

Systemy Zarzdzania Relacyjnymi Bazami Danych (Relational Database Management
Systems; RDBMS) s wysoce zorganizowanymi aplikacjami przeznaczonymi do
przechowywania i organizowania rnych danych oraz pamitania zalenoci midzy nimi.
Czsto s one nazywane serwerami baz danych i wystpuj w rnych ksztatach
i wielkociach (oraz cenach). Dla naszych celw skorzystamy z darmowego serwera baz
danych o nazwie MySQL. Z serwerem takim bdziesz si komunikowa w jzyku, ktry
jest on w stanie zrozumie w naszym przypadku bdzie to SQL. Serwer baz danych
dziaa zwykle rwnolegle z serwerem WWW, czasami na tym samym fizycznym serwerze,
wsppracujc z nim przy odczytywaniu i zapisywaniu danych oraz udostpnianiu stron
internetowych.
Serwer WWW przetwarza dania
stron, uruchamia skrypty PHP
i zwraca zawarto HTML.
6HUZHU
SQL w MySQL
oznacza Structured
Query Language, czyli
Strukturalny Jzyk
Zapyta.
MySQL
przechowuje
dane w tabelach
baz danych.
%D]DGDQ\FK0\64/
Dane
3U]HJOGDUND
<? php
>?
6HUZHU:::
6HUZHUED]\GDQ\FK
Serwer bazy danych

odczytuje informacje
z bazy danych i zapisuje
je w niej.
jest
Baza danych czsto staci
po
przechowywana w ardym,
plikw na dysku tw nie
by
chocia wcale tak
musi.
Bazy danych MySQL s zorganizowane w tabele, w ktrych informacje s

przechowywane w formie wierszy i kolumn powizanych ze sob danych.
Wikszo aplikacji internetowych korzysta z jednej lub kilku tabel w jednej bazie
danych, tak jak korzysta si z rnych teczek w szafie z aktami.
Serwer bazy danych MySQL
moe zawiera wiele baz
danych.
6HUZHU:::
6HUZHUED]\GDQ\FK
Baza danych
moe zawiera
wiele tabel.
SQL to jzyk zapyta

uywany w celu
komunikowania si
z baz danych MySQL.
jeste tutaj 371
odpal swoj baz
Utwrz baz danych w celu przechowywania informacji o biegaczach

Hej! Czy skonfigurowae ju
MySQL i PHP? Zanim ruszysz dalej,
zapoznaj si z dodatkiem B w celu ich
zainstalowania i skonfigurowania.
W porzdku. Ruszaj
dalej. Teraz bdziesz
mg dokoczy ten
rozdzia.
SQL gotowy
do wysmaenia
Aby mg skonfigurowa baz danych, tabel oraz uytkownikw, napisalimy dla Ciebie SQL.
Uruchom MySQL Workbench, otwrz nowe poczenie i uruchom nastpujcy kod SQL.
create database hfjq_race_info;
race_info.
Utwrz baz danych o nazwie hfjq_
CREATE USER 'runner_db_user'@'localhost' IDENTIFIED BY 'runner_db_password';

V %SA 3LA 9 A?8A9 &L3&%
use hfjq_race_info;
Przeka skryptowi, e
nastpny fragment
odnosi si do Twojej
nowej bazy.
CREATE TABLE runners(

runner_id INT not null AUTO_INCREMENT,
Utwrz uytkownika o nazwie

runner_db_user, przydziel mu
haso do logowania i pozwl mu
na odczytywanie, wstawianie
i aktualizowanie danych oraz
usuwanie ich z bazy.
first_name VARCHAR(100) not null,

last_name VARCHAR(100) not null,
gender VARCHAR(1) not null,
finish_time VARCHAR(10),
PRIMARY KEY (runner_id)
);
372
Rozdzia 9.
Utwrz tabel o nazwie runners przechowujc

wszystkie informacje potrzebne do zapamitania
zawodnikw, ktrzy ukoczyli bieg.
obsuga danych json
Jazda prbna
Uruchom MySQL Workbench i otwrz nowe poczenie z serwerem. Wklej kod SQL
z poprzedniej strony w oknie Query i kliknij ikon z byskawic, aby go uruchomi.
W oknie Output u dou ekranu powiniene zobaczy komunikat o powodzeniu operacji.
No a gdzie po tym
wszystkim znajduj si
dane?
Zaraz si za to wemiemy.
Kod, ktry przed chwil uruchomie, tworzy baz danych
i uytkownika, przydziela uytkownikowi dostp do bazy i tworzy
tabel do przechowywania danych o biegaczach. Zobaczmy, jak
moesz umieszcza w niej dane.
jeste tutaj 373
przegrdka a bdzie w zakadce b...
Anatomia instrukcji insert

Istnieje jeden podstawowy sposb wstawiania danych do bazy, inny sposb na ich
zmienianie i aktualizacj oraz trzeci sposb na ich odczytywanie. Ju niedugo
zobaczymy, jak odczytywa informacje z bazy danych, ale na razie skupimy si
na ich wstawianiu do tabel bazy.
Aby wstawia dane do bazy, uywamy instrukcji insert.
Rozdzielona przecink
lista kolumn, do kt ami
chcemy wstawi da rych
ne
Przeka instrukcji,
do ktrej tabeli ma
wstawi dane.
insert into [nazwa_tabeli] ( nazwa_kolumy1, nazwa_kolumy2, nazwa_kolumy3)

@3&9F3 XF3 X-F3 X
Uyj sw kluczowych
insert into.
ch,
Rozdzielona przecinkami lista dany
ktre chcesz umieci w tabeli,
odpowiadajca licie kolumn
Sowo kluczowe va
lue
okrela, kiedy koczy s
si
lista kolumn, a za
czy
si faktyczne warto naj
ci.
Tabela bazy
danych
Wstaw wartoci
do tabeli
Wartoci danych
Instrukcje insert umoliwiaj wstawianie informacji

do okrelonej tabeli. S one najczciej uywane do
jednorazowego wstawiania pojedynczych rekordw,
chocia niektrzy zaawansowani uytkownicy SQL-a mog
tworzy polecenia insert wstawiajce do tabeli wiele
wierszy. My jednak bdziemy si trzyma skadni jednego
rekordu naraz.
Zaleca si okrelanie kolumn w kolejnoci,
w jakiej bd wstawiane dane, chocia
nie jest to konieczne. Brak okrelenia
kolumn moe prowadzi do problemw
z danymi, poniewa pierwsza warto
zostanie automatycznie umieszczona
w pierwszej kolumnie, druga w drugiej itd.
Aby korzysta z tej metody, bdziesz musia
dysponowa gbok znajomoci swoich
tabel z danymi.
374
Rozdzia 9.
Relacyjna
baza
danych
Dodaj nowy
li
wiersz do tabe
Kolejno nazw kolumn oraz ich wartoci jest wana!
2EHMU]\MWR
Wartoci musz by wymienione dokadnie w takim samym

porzdku jak kolumny. To wanie std baza danych wie,
gdzie naley wstawi dane.
obsuga danych json
wiczenie
Napisz polecenia SQL-a insert wstawiajce do bazy danych informacje, ktre masz ju w swoim pliku
XML. Powiniene umieszcza jednorazowo po jednym rekordzie w tabeli runners, ktr wczeniej
utworzye. Pierwsze polecenie napisalimy za Ciebie.
insert into runners (first_name, last_name, gender, finish_time)

values ('Jan','Kowalski','m','25:31') ;
jeste tutaj 375
rozwizanie wiczenia
Rozwizanie
wiczenia
Teraz, kiedy masz ju cay SQL wstawiajcy zawodnikw do tabel bazy danych,
otwrz MySQL Workbench i uruchom swj kod.

values ('Jan','Kowalski','m','25:31') ;

values ('Mariola','Nowak','f','26:01') ;

values ('Franciszek','Jonasz','m','26:08') ;

values ('Robert','Nadzieja','m','26:38') ;

values ('Janina','Kowalska','f','28:04') ;

values ('Tomasz','Holender','m','28:24') ;

values ('Jakub','Zimny','m','29:24') ;

values ('Justyn','Janowski','m','29:44') ;
Ale teraz kiedy ju mamy biegaczy

w bazie danych jak wydobdziemy
ich z powrotem dla naszej aplikacji
internetowej?
Czas na nowy jzyk: PHP.
Bez obaw! Podamy Ci akurat tyle kawakw
PHP, ile potrzebujesz do zapewniania
komunikacji po stronie serwera cznie
z porozumiewaniem si z serwerem bazy
danych. To Ci wystarczy.
376
Rozdzia 9.
obsuga danych json
Uywaj PHP w celu odczytywania danych

PHP jest jzykiem programowania, w zwizku z czym potrzebuje rodowiska,
w ktrym mgby dziaa serwera WWW wspierajcego PHP. Skrypty
PHP i strony internetowe, ktre bazuj na tych skryptach, musz znajdowa
si na rzeczywistym serwerze WWW w odrnieniu od skryptw
uruchamianych bezporednio z lokalnego systemu plikw.
Przegldarki
internetowe nic nie
wiedz o PHP, tak
wic nie potrafi one
uruchamia skryptw
w tym jzyku.
n internetowych
W przeciwiestwie do stro iera lokalnie
otw
na
mo
e
w HTML-u, ktr
zawsze
w przegldarce, skrypty PHP rednictwem
po
musz by otwierane za
W.
adresu URL na serwerze WW
<? php
>?
Dla przegldarki taki

skrypt PHP zawsze bdzie
pozbawionym sensu kodem.
Serwer WWW potrafi zrozumie

kod PHP i uruchamia skrypt!
<? php
Szybki sposb na przekonan

dostarcza serwer, polega ie si, czy stron
na sprawdzeniu, czy
adres URL rozpoczyna si
od http:. Adresy
stron otwieranych z lokalnyc
h plikw zwykle
zaczynaj si od file:.
Skrypty zawsze musz

by uruchamiane na
serwerze WWW;
w przeciwnym razie
nie bd dziaa.
Jeli zainstalowae lokalnie

serwer WWW i wspiera on
PHP, moesz testowa skrypty
PHP bezporednio na swoim
lokalnym komputerze.
>?
Serwery WWW wspierajce

PHP s przystosowane do
uruchamiania skryptw
w tym jzyku i zmieniaj
je w strony HTML, ktre
potrafi by interpretowane
przez przegldarki.
PHP i MySQL?
Mylaam, e uczymy si
tu jQuery! O co chodzi?
Zaraz pojawi si jQuery, obiecujemy.

Najpierw jednak spjrzmy, jak skoni nasz plik
PHP do obsuenia danych POST, eby take i on
mg zapisywa je w bazie danych. Przyjrzymy
si rwnie pewnym wanym zagadnieniom,
o ktrych naley pamita podczas przetwarzania
informacji i wysyania ich do serwera.
jeste tutaj 377
wielki post
Przetwrz dane POST na serwerze

Przygldalimy si ju specjalnemu obiektowi utworzonemu w celu obsugi
przekazywania informacji z formularza w przegldarce do serwera: obiektowi
$_POST. Jest on tablic asocjacyjn wszystkich przesyanych przez Ciebie
informacji, w ktrej nazwy (a nie identyfikatory) elementw HTML peni rol
kluczy, natomiast informacje znajdujce si w tych elementach stanowi jej
wartoci. Kod PHP dziaajcy na serwerze odczytuje zawarto obiektu $_POST
i okrela, jakie informacje zostay przesane do serwera.
Informacje z tablicy asocjacyjnej moesz odczyta, korzystajc z kluczy (czyli nazw
elementw HTML), ktre razem z ni wysae. W rezultacie otrzymasz w swoim
skrypcie PHP wartoci tych elementw.
ekranie.
Wypisz warto na
Nazwa elemen
tu
zbiera dane na HTML, ktry
formularzu
echo $_POST["txtFirstName"];
Nazwa tablicy, ktra zostaa utworzona
automatycznie w celu obsuenia
danych przesanych do pliku PHP
za pomoc metody POST
Hej, co jeszcze
trzeba zrobi? Chc
ju i na pla!
Doszlimy ju niemal do miejsca, w ktrym bdziemy

mogli wydosta dane z naszej bazy i zastanowi si, jak
wywietli je na naszej licie zawodnikw. Najpierw
jednak bdziemy potrzebowa troch wicej PHP,
eby poczy si z baz danych...
378
Rozdzia 9.
obsuga danych json
Pocz si z baz danych za pomoc PHP

Czy pamitasz, jak pod koniec procesu instalacji PHP wybrae okrelon
bibliotek?
Biblioteka ta pozwala PHP na komunikowanie si z baz danych

MySQL. Skorzystamy z niej w celu poczenia si z baz danych, ktr
wanie utworzylimy, dziki czemu bdziemy mogli zabra si za
odczytywanie danych o biegaczach.
Otwrz
znaczniki
PHP.
mysql_connect jest
funkcj z biblioteki PHP,
ktr doczylimy
podczas instalacji PHP.
Adres serwera,
na ktrym znajduje
si baza danych
MySQL
Nazwa
uytkownika
MySQL, przy
uyciu ktrej
chcesz si
poczy
Haso MySQL tego

uytkownika
#%#
mysql_connect('127.0.0.1', 'runner_db_user', 'runner_db_password')
Instrukcja
die wywietla
komunikat
i koczy skrypt
PHP.
? 3R#J\LZ3Z83Z\?3L%
mysql_select_db('hfjq_race_info');
L%VJ\LZ^
mysql_select_db mwi PHP,

ktrej bazy danych naley uy.
Zamknij
znaczniki
PHP.
Wywietl na ekranie informacj, jeli

udao si nawiza poczenie. Jeli
poczenia nie ma, skrypt nie dojdzie
do tego miejsca.
service.php
jeste tutaj 379
jazda prbna
Jazda prbna
Otwrz swj ulubiony edytor tekstw i przepisz kod z poprzedniej strony. Zapisz plik pod nazw service.php
w tym samym folderze, w ktrym znajduje si Twj plik index.html z tego rozdziau. Otwrz service.php
w swojej przegldarce, aby sprawdzi wynik zwrcony przez zapytanie do bazy danych.
Nie zapominaj, e kod PHP musi wykonywa si na serwerze WWW, a zatem adres URL powinien
zaczyna si od http://, a nie od file://.
No c, nie wyglda to zbyt

ekscytujco. Oczywicie, e
moemy si poczy... ale nadal
nie widz adnych danych!
Masz racj.
Tak jak w przypadku specjalnego polecenia insert sucego
do wstawiania danych, istnieje specjalna skadnia suca do ich
odczytywania. Zobaczmy, jak to dziaa.
Nie istniej
gupie pytania
P: Czy MySQL Workbench to jedyny
sposb na interakcj albo zarzdzanie

baz danych MySQL?
O: Nie! Istnieje wiele innych sposobw
i narzdzi. Popularnym, opartym na

technologii internetowej narzdziem
uywanym do zarzdzania bazami danych
MySQL jest na przykad PHPMyAdmin.
Moesz take korzysta z okna terminalu,
eby zarzdza baz danych i danymi
z poziomu wiersza polece.
380
Rozdzia 9.
P: Jakie inne rodzaje bibliotek PHP

jeszcze istniej?
O: Istnieje wiele rnych bibliotek PHP,
ktre maj rne zastosowania. Obejmuj

one SSL, wiadomoci e-mail (SMTP albo
IMAP), kompresj, uwierzytelnianie,
poczenia z innymi bazami danych i wiele
innych. Aby zobaczy list dostpnych
bibliotek, wpisz w swojej ulubionej
wyszukiwarce haso biblioteki PHP.
obsuga danych json
Uyj polecenia select, aby pobra dane z bazy

W celu odczytywania danych z bazy korzystamy z polecenia select, a same
dane s zwracane jako resultset (czyli zbir wynikowy). Obiekt ten jest
zbiorem wszystkich danych, o ktre prosie w instrukcji select. Za pomoc
tej instrukcji moesz czy kilka tabel, dziki czemu w jednym zbiorze
wynikowym moesz uzyska jednoczenie dane z wielu z nich.
Rozdzielona przecinkami
lista kolumn, z ktrych
chcemy pobra dane
Tablica, z ktrej
chcemy pobra dane
O wiele wicej
informacji na temat
PHP, SQL-a, baz
danych i tabel
znajdziesz w ksice
Rusz gow! PHP &
MySQL.
Sowo kluczowe asc

informuje order by,
w jakiej kolejnoci
uoy wyniki (asc dla
rosncej i desc dla
malejcej).
select nazwa_kolumny1, nazwa_kolumny2 from nazwa_tablicy order by nazwa_kolumny1 asc

Instrukcj rozpoczyna
sowo kluczowe select.
Instrukcja SQL-a select

pobiera kolumny danych
z jednej lub wielu tabel
i zwraca obiekt klasy
ResultSet.
Sowo kluczowe from

informuje, e lista kolumn
jest ju zamknita, oraz
okrela, skd naley pobra
dane.
Sowa kluczowe order by,

po ktrych nastpuje nazwa
lub nazwy kolumn, powoduj
sortowanie danych w zadanej
kolejnoci.
Zaostrz owek
Utwrz instrukcj select dla danych, ktre s nam potrzebne do wywietlenia zawodnikw na
naszej stronie. Bdziesz musia odczyta pola first_name, last_name, gender oraz finish_time
z tabeli runners. Posortuj dane w kolejnoci rosncej wedug finish_time od wartoci najniszej
do najwyszej. W razie potrzeby zajrzyj na stron 372, gdzie utworzye tabel, dziki czemu bdziesz
mg uy prawidowych nazw kolumn.
jeste tutaj 381
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Wanie utworzye swoj wasn instrukcj w jzyku SQL pobierajc

z bazy dane biegaczy.
ra
Lista kolumn, ktre musisz wyb
Kolejno, w jakiej maj

by posortowane dane.
SELECT first_name, last_name, gender, finish_time FROM runners order by finish_time ASC
Tabela, z ktrej chcesz
odczyta dane
Jazda prbna
Korzystajc z narzdzia MySQL Workbench, uruchom swoj instrukcj select,
aby zobaczy dane w postaci, w jakiej zostan zwrcone w obiekcie ResultSet.
To wietnie, e mog
zobaczy dane w Workbenchu,
ale czy nie potrzebujemy ich
na naszej stronie WWW?
Fakt, potrzebujemy.
Sprawdmy, jak moemy pobra
informacje z bazy danych
i wywietli je na ekranie.
382
Rozdzia 9.
obsuga danych json
Pobierz dane za pomoc PHP

Do tej pory przygldalimy si niektrym bardzo podstawowym oraz nie tak bardzo podstawowym funkcjom
PHP. Dowiedzielimy si, jak wypisywa pewne proste informacje na ekranie, jak poczy si z baz danych
i jak pisa instrukcje select suce do pobierania danych z bazy. Teraz zobaczymy, jak moemy pobiera
informacje z bazy danych i wywietla je na ekranie.
Magnesiki z kodem
Poukadaj pokazane poniej magnesiki, aby dokoczy kod PHP tworzcy funkcj o nazwie
db_connection zarzdzajc poczeniami z baz. Ponadto utwrz zmienn $query i przypisz do
niej polecenie select, ktre napisae wczeniej i ktre wybiera wszystkich biegaczy z bazy danych.
Nastpnie dodaj zmienn $result wywoujc funkcj db_connection, ktra przekazuje jako
parametr zmienn $query. Na koniec, za pomoc ptli while, pobierz wszystkie wiersze ze zbioru
wynikowego bdcego tablic asocjacyjn i wydrukuj je na ekranie.
#%#
$query = "SELECT first_name, last_name, gender, finish_time _____ runners
order by ______________ASC ";
$result = ___________________($query);
while ($row = mysql_fetch_array(____________, MYSQL_ASSOC)) {

print_r(_______);
}
_______________db_connection(__________) {
AAAAA 3R#J\LZ3Z83Z\?3L%
$row
_____________________('hfjq_race_info');
die
return mysql_query($query);
mysql_select_db
FROM
G
$result
db_connection
function
$query
finish_time
service.php
jeste tutaj 383

Za pomoc maego kawaka PHP wycigasz teraz dane z bazy i zwracasz je w postaci tablicy,
ktr mona wywietli na Twojej stronie.
#%#
$query = "SELECT first_name, last_name, gender, finish_time _____
FROM runners
finish_time
order by ______________ASC
";
$result = ___________________($query);
db_connection
while ($row = mysql_fetch_array(____________,
MYSQL_ASSOC)) {
$result
print_r(_______);
$row
}
function
$query
_______________db_connection(__________)
{
die
AAAAA 3R#J\LZ3Z83Z\?3L%
_____________________('hfjq_race_info');
mysql_select_db
}
service.php
Nie istniej
gupie pytania
P:
Czy select moe wyciga

z tabeli tylko wszystkie informacje?
Wiem, e mog limitowa kolumny,
ktre dostan, ale co z wierszami?
O: Moesz ogranicza wiersze, ktre
otrzymasz, za pomoc instrukcji

warunkowej where, ktrej przyjrzymy
si w rozdziale 11. Dziki tej instrukcji
moesz przekazywa warunki filtrujce
i w poleceniu select dostawa tylko te
wiersze, ktre speniaj podany warunek.
384
Rozdzia 9.
P: Czy jednorazowo mog pobiera

dane tylko z jednej tabeli?
O: Nie, w swoim zapytaniu moesz
czy tyle tabel, ile tylko chcesz, czsto

za pomoc wsplnego identyfikatora oraz
w instrukcji warunkowej where. czenie
wielu tabel moe znacznie spowolni
przetwarzanie Twoich zapyta, tak wic
musisz by z tym bardzo ostrony. Wicej
informacji uzyskasz w rozdziale 8. Head
First PHP & MySQL. Edycja polska oraz
w rozdziale 2. SQL. Rusz gow.
P: Jaka baza danych znajduje si pod
adresem 127.0.0.1? Moj witryn WWW

widz na localhost. Jaka jest midzy
nimi rnica?
O:
Dobre pytanie, a odpowied brzmi:

adna. 127.0.0.1 i localhost odnosz si do
tego samego komputera (serwera), na
ktrym w danej chwili pracujesz.
obsuga danych json
Jazda prbna
Zaktualizuj swj plik service.php kodem, ktry wanie utworzye, po czym otwrz go w swojej
przegldarce, aby zobaczy wyniki zapytania przesanego do bazy danych. Nie zapominaj, e kod PHP
musi by uruchomiony na serwerze WWW, tak wic w pasku adresu powiniene zobaczy http://.
Wynik kocowy
wywietlenia
wszystkich
danych na
ekranie.
No dobra, zgadza si to rzeczywicie

s dane. Wydaj si one jednak
skomplikowane i nie s zbyt czytelne.
Czy moemy co zrobi, eby je
troszeczk wyprostowa?
Zdecydowanie tak.
To, co widzimy, to seria wywietlonych na ekranie tablic.
Zawieraj one potrzebne dane, ale nie w takim formacie,
jakiego potrzebujemy. Na szczcie istnieje skuteczna
metoda organizowania informacji w formacie, ktry
doskonale nadaje si do definiowania struktur danych.
jeste tutaj 385
atwiejszy sposb
Z pomoc nadchodzi JSON!

JSON (skrt od JavaScript Object Notation, czyli Notacja Obiektowa JavaScriptu) to lekki format wymiany danych.
W atwy sposb mog go czyta i pisa ludzie, a komputery mog go prosto przetwarza i generowa. Dziki temu idealnie
nadaje si on do strukturyzowania i przesyania danych. Zosta oparty na podzbiorze standardu uytego do zdefiniowania
JavaScriptu i jest niezaleny od jzyka, co oznacza, e mona go uywa praktycznie w dowolnym jzyku programowania.
Pod wzgldem przekazywania danych jest on wydajniejszy od XML-a i bazuje na parach nazwa/warto tak jak tablice
asocjacyjne. Wartociami w JSON mog by acuchy znakowe, liczby, tablice, obiekty, wartoci logiczne (prawda lub
fasz) oraz null.
Poza elementem gwnym nie
ma logicznego zwizku midzy
poszczeglnymi elementami. To
dlatego musimy szuka kadego
).
elementu za pomoc funkcji find(
XML
,&@ L?W9G
kontra
To powinno by
dla nas przydatne,
prawda?
JSON
Element gwny
Tablica przechowujca dane
<books>
books:{
<book>
book:[
<title>Kolor magii</title>
Para nazwa/warto
rozdzielona dwukropkiem
title:'Kolor magii',
<year>1983</year>
author:'Terry Pratchett',
</book>
year:1983
<book>
},
<title>Mort</title>
<year>1987</year>
</book>
{
Wszystkie
obiekty s
rozdzielone
przecinkami.
<book>
<year>2009</year>
</book>
</books>
year:1987
{
Kady obiekt
jest zamknity
midzy
nawiasami
klamrowymi.
]
Wiele kopii znacznikw
zwiksza ilo danych do
przekazania.
author:'Terry Pratchett',
},
<title>Paradoks czasu</title>
<author>Eoin Colfer</author>
title:'Mort',
Kada waciwo
jest oddzielona
od innych
przecinkiem.
acuchy tekstowe
znajduj si midzy
apostrofami.
title:'Paradoks czasu',
author:'Eoin Colfer',
year:2009
Liczby nie potrzebuj
apostrofw.
}
}
Aby odczyta informacje zawarte w obiekcie JSON, moesz uy tej samej notacji, z ktrej korzystasz w przypadku innych
obiektw notacji z kropk (.). Tablice wewntrz obiektw JSON zachowuj si tak samo jak tablice JavaScriptu i maj
takie same waciwoci, na przykad length. W przypadku naszego przykadowego obiektu JSON pokazanego powyej
mgby dowiedzie si, ile ksiek zostao zwrconych, za pomoc instrukcji books.book.length. Rne obiekty JSON
bd mie rne struktury, tak wic niekoniecznie bdziesz potrzebowa tylu kropek, aby dotrze do obiektu tablicy.
386
Rozdzia 9.
obsuga danych json
jQuery + JSON = co niesamowitego

Poniewa JSON jest tak popularny i prosty w uyciu, poczciwe chopaki
od jQuery utworzyy specjalny skrt sucy wycznie do czytania
danych w formacie JSON metod getJSON.
Wywoanie metody getJSON
Skrt
jQuery
Wywoaj zwrotnie t
funkcj.
$.getJSON(url_to_load, function(json) {
Adres URL, spod ktrego
chcesz pobra dane
});
Zwrcone dane w obi

ekc
o nazwie json (wicej ie
o nim ju za chwil)
Jeli powyszy zapis wydaje Ci si znajomy, to dlatego, e jest on

prawie identyczny z metod post, ktrej uywalimy wczeniej,
aby pobiera dane z formularza. Ta prosta metoda jest skrtem
metody ajax z wieloma parametrami skonfigurowanymi dla Ciebie.
Wywoanie bez zastosowania skrtu wygldaoby nastpujco:
$.ajax({
url: url_to_load,
dataType: 'json',
data: json,
success: function(json){
};
});
Ale dane, ktre mamy, nie

s w formacie JSON to tylko
seria tablic. Czy moemy je
zamieni w JSON?
Tak, moemy.
Szczliwie ludzie od PHP pomyleli
take i o tym. Spjrzmy jeszcze na kilka
podstawowych elementw PHP, po czym
sprawdmy, jak poczy je z innymi
funkcjami PHP, aby otrzyma nasze dane
w formacie JSON.
jeste tutaj 387
am na wasn odpowiedzialno
Kilka regu PHP...

Spjrzmy prawdzie w oczy: w rzeczywistoci nikt nie lubi zasad programowania. Jest
jednak kilka rzeczy dotyczcych PHP w wikszoci majcych zwizek ze skadni
ktrymi powinnimy si zaj, gdy pomog nam one w dawaniu sobie rady z danymi
w PHP. Na szczcie spotkalimy si ju z tymi pojciami w odniesieniu do jQuery, tak
wic tym razem zrobimy to tak szybko i bezbolenie, jak to tylko moliwe...
Podstawy PHP
1. Cay kod PHP musi znajdowa si midzy znacznikami #%# i G.
?@G#3GZX
#%#
2. Kod PHP mona miesza z HTML-em, uywajc w kodzie PHP

znacznikw #%# i G.
echo "Robert";
G
3. Kady wiersz kodu PHP musi koczy si rednikiem (;).
</span></div>
Reguy dla zmiennych

1. Kada zmienna musi zaczyna si znakiem dolara ($).
2. Po tym znaku musi znajdowa si przynajmniej jedna
litera albo znak podkrelenia, a nastpnie dowolna
kombinacja liter, cyfr albo podkrele.
#%#
!9KK
$home_country = "Polska"; // OK
!3% @3 33?3KK#F?9S8J\?
3. Stosowanie mylnikw (-), spacji ( ) i znakw

specjalnych (z wyjtkiem $ i _) w nazwach zmiennych
nie jest dozwolone.
Reguy dla ptli

1. PHP udostpnia te ptle for, while oraz do...
while wszystkie z tak sam skadni jak
w JavaScripcie.
#%#
2. PHP zawiera rwnie dodatkowy rodzaj ptli o nazwie

foreach. Ptla ta, korzystajc ze sowa kluczowego as,
pobiera po kolei kady element tablicy, a osignie jej
koniec, po czym zatrzymuje swoje dziaanie.
!!!
echo $i;
while ($j <= 10) {
L%!S
}
!33 3-
3L%!33!@
L%\L3F3 X+!@
}
G
388
Rozdzia 9.
obsuga danych json
Kilka (kolejnych) regu PHP...

Istnieje jeszcze kilka dodatkowych regu, ktre pomog nam w otrzymaniu potrzebnych
danych, poprawnym ich sformatowaniu oraz wywietleniu ich na stronie.
Reguy dla tablic

1. Nowe tablice mona tworzy za pomoc sowa kluczowego
array podobnie jak w JavaScripcie.
2. Uzyskiwanie dostpu do wartoci tablic odbywa si przy uyciu
nawiasw kwadratowych [] tak jak w JavaScripcie. Tablice s
indeksowane od zera, take analogicznie do JavaScriptu.
#%#
$my_arr2 = array('USA', 'Polska',
'Irlandia');
L%!A3 --KKHXF&3 &3?3
3. Tablice mog rwnie by asocjacyjne, co oznacza, e dostp

do ich elementw moe odbywa si przy uyciu klucza zamiast
indeksu. Tablice takie nazywane s parami klucz/warto.
$arr = array("foo" => "bar", 12 => true);
4. Aby przypisa warto do klucza w tablicy asocjacyjnej, uyj

operatora =>.
L%!3 KKHXF&383
L%!3 -KKHXF&3 9
Reguy dla instrukcji warunkowych

1. Instrukcja if ma tak sam skadni jak w JavaScripcie;
podobnie instrukcje else i else if.
#%#
2. Wszystkie operatory porwnania s takie same jak

w JavaScripcie.
L%,SFRZ?
3. Operatory logiczne rwnie odpowiadaj tym

z JavaScriptu, z tym e dostpne s te sowa opisowe and,
or i not, z ktrych mona korzysta zamiast z operatorw
symbolicznych.
if ($x > $y){

}
elseif ($x == $y) {
echo "x jest rwne y";
}
else {
echo "x jest mniejsze od y";
}
G
Reguy wywietlania na ekranie

1. Sowa kluczowe echo i print wywietlaj tre na ekranie.
2. Zawarto tablicy mona wywietli za pomoc
instrukcji print_r.
#%#
echo "Robert";
print_r($my_arr2);
G
jeste tutaj 389
tylko jedna tablica
Formatowanie informacji wyjciowych w PHP

No dobrze. Skoro mamy to ju za sob, zobaczmy, co moe dla nas zrobi PHP!
Funkcja PHP json_encode suy do konwertowania tablicy asocjacyjnej na
zakodowany w JSON acuch wartoci.
Wywoaj t funkcj PHP, aby

zakodowa tablic w formacie JSON.
Przeka wartoci tam,

skd poproszono o plik,
czyli do przegldarki,
ajaksowego dania itd.
Tablica, ktra zostanie

zakodowana
echo json_encode(array_name);
Zanim jednak bdziemy mogli zakodowa dane, musz si one znale w jednej
tablicy asocjacyjnej. Spotkalimy si ju z metod, ktra przechodzi w ptli przez
zbir wynikowy i odnajduje wszystkie znajdujce si tam tablice asocjacyjne. To,
czego teraz potrzebujemy, to sposb na poczenie wszystkich tych tablic w jedn.
Za pomoc funkcji PHP array_push moemy dopisywa nowe elementy na
kocu tablicy.
Utwrz now pust tablic.
$my_array = array();
Podaj dowolny rodzaj

informacji, ktry chcesz doda
do tablicy. W tym przypadku
do tablicy $my_array
zostanie dodana inna tablica
asocjacyjna.
array_push($my_array, array('my_key' => 'my_val'));

Wywoaj funkcj array_push
z okrelonymi parametrami.
W pierwszym parametrze przeka

nazw tablicy docelowej.
Dodawana do tablicy
para nazwa/warto.
Porady maniaka
Funkcja json_encode pojawia si w wersji 5.2 PHP. Jeli korzystasz z wersji
wczeniejszej, uaktualnij j albo wpisz w swojej ulubionej wyszukiwarce haso json
alternatywne kodowanie php, aby zobaczy, jak inni programici PHP poradzili sobie
z brakiem takiej funkcji. Bdziesz mg wtedy napisa wasn funkcj i skorzysta
z przewagi, jak moe Ci ona da dziki swoim wyjtkowym cechom.
390
Rozdzia 9.
obsuga danych json

Nie istniej
gupie pytania
P: Czy JSON wymylili ludzie od jQuery?

O: Nie, Douglas Crockford, architekt JavaScripu, wynalaz
P: No dobra. Jeszcze raz czym jest PHP?

O: PHP (rekursywny skrt od PHP: Hypertext Preprocessor)
P: Czy JSON nie jest po prostu JavaScriptem?

O: Tak i nie. JSON bazuje na podzbiorach JavaScriptu, ECMA
P: Skd si w takim razie wzi PHP?

O: Dobre pytanie. PHP po raz pierwszy pojawi si w 1994
JSON jako jak sam to okrela odchudzon alternatyw dla

XML-a. Powody, ktre kieroway nim podczas tworzenia projektu,
przedstawia tutaj: http://www.json.org/fatfree.htm.
262 Third Edition, ale mona go uywa do przesyania danych

w wielu jzykach. Aby zapozna si z list jzykw, ktre
korzystaj z formatu JSON, odwied stron http://www.json.org/.
P: Jeli wic JavaScript i PHP maj tak bardzo podobn
skadni, to dlaczego nie mog po prostu uy JavaScriptu

do zrobienia tego, czego potrzebuj?
to powszechnie uywany opensourceowy jzyk skryptowy,

ktry jest szczeglnie przydatny w programowaniu aplikacji
internetowych i ktry mona osadza w HTML-u.
roku. Utworzy go Rasmus Lerdorf jako sposb na wywietlanie

swojego CV on-line. W czerwcu 1995 roku opublikowa on wersj
rdow, co umoliwio innym programistom aktualizowanie
kodu i poprawianie bdw. Od tego czasu PHP przyj si i jest
uywany w ponad 20 milionach stron na caym wiecie.
O:
Jak ju wspomnielimy, PHP jest jzykiem skryptowym

wykonywanym po stronie serwera, ktry moe w Twoim imieniu
wsppracowa z serwerem WWW i bazami danych. Na serwerze
wykonywany jest kod generujcy HTML, ktry nastpnie zostaje
przesany do klienta. JavaScript, z drugiej strony, yje wycznie
w Twojej przegldarce i dziaa po stronie klienta.
ie
Sp
ojn
k
o
Wanie nakadlimy Ci do gowy mas nowych wiadomoci o PHP, MySQL i JSON.

Za chwil rzucimy si na due wiczenie, w ktrym wszystko zostanie zebrane
razem, tak wic zrb sobie krtk przerw i wypij filiank kawy, pjd na spacer
albo zrb co innego, co pozwoli Twojemu mzgowi odpocz i przygotowa si
na to, co nadejdzie. Kiedy to zrobisz, odwr kartk i do dziea!
jeste tutaj 391
dugie wiczenie
Dugie wiczenie
Zaktualizuj swj plik my_scripts.js now funkcj o nazwie getDBRacers, ktra wywouje plik service.php.
To wywoanie powinno zwraca obiekt JSON, a nastpnie informowa w oknie alarmowym o liczbie
zwrconych biegaczy. Zaktualizuj te funkcj czasow startAJAXCalls, aby zamiast funkcji
getXMLRacers wywoywaa t now funkcj. Nastpnie dokonaj aktualizacji pliku service.php,
tak aby uzyskane z bazy dane o biegaczach odsya on zakodowane w formacie JSON.
if(repeat){
..................
startAJAXcalls();
},
FREQ
);
}
}
function getDBRacers(){
$.getJSON(. ........ function(.....) {
.....(json.runners........);
});
getTimeAjax();
}
my_scripts.js
392
Rozdzia 9.
obsuga danych json
#%#
$query = "SELECT first_name, last_name, gender, finish_time FROM runners
order by finish_time ASC ";
$result = ..................($query);
$runners = array();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
............($runners, array('fname' => $row['first_name'], 'lname' =>
$row['last_name'], 'gender' => $row['gender'], 'time' => $row['finish_time']));
}
echo ............(array("runners" => ............));
exit;
function db_connection($query) {
?3& 3R#J\LZ3Z83Z\?3L%
mysql_select_db..................
}
function fail($message) {
die(json_encode(array('status' => 'fail', 'message' => $message)));
}
function success($message) {
die(json_encode(array('status' => 'success', 'message' => $message)));
}
G
service.php
jeste tutaj 393
rozwizanie dugiego wiczenia

Dugie wiczenie
rozwizanie
Twj plik my_scripts.js ma teraz now funkcj o nazwie getDBRacers, ktra wywouje plik
service.php. Stara funkcja getXMLRunners nie jest ju potrzebna, tak wic moesz si jej pozby.
Nowa funkcja przyjmuje obiekt JSON zwrcony przez plik service.php oraz podaje w oknie
alarmowym liczb pobranych biegaczy. Funkcja czasowa startAJAXCalls take zostaa
zaktualizowana o t now funkcj. Dokonae te aktualizacji pliku service.php, a otrzymane
z bazy dane o biegaczach s odsyane w formacie JSON i porzdkowane wedug pola
finish_time, poczwszy od najniszej wartoci.
if(repeat){
Wywoaj now
funkcj zgodnie
startAJAXcalls(); z harmonogramem.
getDBRacers();
},
FREQ
);
}
}
Uyj metody jQuery

getJSON, aby wywoa
plik service.php.
Dane zwrcone przez

metod getJSON call
$.getJSON("service.php", function(json) {
alert(json.runners.length);
});
getTimeAjax();
Tak jak i inne

tablice, rwnie
ta ma waciwo
length.
}
Ten obiekt json zawiera
tablic o nazwie runners.
Nazw t uzyska od
metody PHP json_encode.
394
Rozdzia 9.
my_scripts.js
obsuga danych json
#%#
Zapytanie do bazy danych

pobierajce biegaczy
$query = "SELECT first_name, last_name, gender, finish_time FROM runners

order by finish_time ASC ";
$result = db_connection($query);
$runners = array();
Utwrz now tablic

do przechowywania
zwrconych biegaczy.
Przejd przez zbir

wynikowy, odzyskujc
tablice asocjacyjne.

array_push($runners, array('fname' => $row['first_name'], 'lname' =>
$row['last_name'], 'gender' => $row['gender'], 'time' => $row['finish_time']));

}
ne
Umie zwrco
dane w swojej
wasnej tablicy
asocjacyjnej.
echo json_encode(array("runners" => $runners));

exit;
function db_connection($query) {
Zakoduj nasz tablic

asocjacyjn w formacie
JSON i odelij j tam,
gdzie jest potrzebna.

?3& 3R#J\LZ3Z83Z\?3L%
mysql_select_db('hfjq_race_info');
}
Funkcje odpowiedzialne za obsug

bdw lub sukcesw w naszych
skryptach
Funkcja obsugujca
poczenie z baz danych
,
Zwr zbir wynikowy tam
skd zostaa wywoana ta
funkcja.
function fail($message) {
die(json_encode(array('status' => 'fail', 'message' => $message)));
}
function success($message) {
die(json_encode(array('status' => 'success', 'message' => $message)));
}
G
service.php
jeste tutaj 395
jazda prbna
Jazda prbna
Zaktualizuj swoje pliki service.php oraz my_scripts.js kodem, ktry utworzye, a nastpnie
otwrz plik index.html w swojej przegldarce. W Narzdziach dla programistw otwrz kart
Network, gdzie powiniene zobaczy pobierane informacje JSON.
Funkcja wywietla
okno alarmowe
z liczb rekordw
zwrconych przez
obiekt JSON.
Informacja dotyczca obiektu

JSON bdzie widoczna na
karcie JSON w sekcji Network
w narzdziach przegldarki.
Niele. Czy do wywietlania

tego uyjemy metod find
i each, tak jak to robilimy
z plikiem XML?
Niezupenie.
Wiemy, e dane mamy w formacie JSON, poniewa
utworzy je nasz wasny kod PHP. Teraz (wreszcie)
spojrzymy bliej na ten obiekt JSON, o ktrym tyle
mwilimy, dziki czemu bdziemy mogli z niego
odzyska dane.
396
Rozdzia 9.
obsuga danych json
Dostp do danych w obiekcie JSON

Funkcja json_encode w PHP pozwala na konwersj tablicy asocjacyjnej na acuch wartoci
zakodowany w formacie JSON. W JavaScripcie wartoci te mona odczytywa rwnie jako tablice
asocjacyjne, a co za tym idzie, mona przechodzi przez nie w ptlach i dziaa na nich tak samo
jak na innych tablicach.
Kiedy uywalimy XML-a, musielimy przeszukiwa wszystkie dane za pomoc metody find,
eby znale nastpnego biegacza. Gdy go znalelimy, znowu musielimy uy metody find,
aby okreli jego pe. Czy pamitasz jeszcze obiekt JSON, ktry zosta zwrcony przez funkcj
json_encode? Moemy dociera bezporednio do waciwoci tego obiektu za pomoc notacji
z kropk (.). Obiekt JSON zawiera jedn tablic o nazwie runners, ktra jest jego waciwoci.
Kiedy ju j mamy, moemy uy klucza tablicy asocjacyjnej, eby sprawdzi, czy zawodnik jest
kobiet, czy mczyzn, co jest o wiele efektywniejsze ni kadorazowe szukanie tej informacji.
Zaostrz owek
Zaktualizuj funkcj getDBRunners, tak aby wczytywaa obiekt JSON z aplikacji service.php. Nastpnie
uyj logiki warunkowej w celu okrelenia, na ktr list trafi biegacz. Uwaaj! Naley tak postpi tylko
wtedy, gdy biegacze istotnie zostan zwrceni w obiekcie JSON.
$.getJSON(
, function(json) {
if (json.runners.
> 0) {
$('#finishers_m').empty();
$('#finishers_f').empty();
$.
json.runners,function() {
@3 &G3ZFR+%3%&3Z3+
%K&G
if(this['gender'] == 'm'){
$('
').append( info );
}else if(this['gender'] == 'f'){

$('#finishers_f').append(
);
}else{}
$('
').append( info );
});
}
});
getTimeAjax();
}
my_scripts.js
jeste tutaj 397
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Za pomoc logiki warunkowej oraz informacji zwrconych w obiekcie JSON moesz

okreli, na ktr list powinien trafi biegacz. Tak jak poprzednio, biegacze za
kadym razem powinni by dodawani take na list finishers_all.
Pobierz informacje
z pliku service.php.
$.getJSON("service.php", function(json) {
if (json.runners.length > 0) {
Sprawd, czy w tablicy

runners znajduj si dane.
$('#finishers_f').empty();
Ponownie wyczy
wszystkie listy.
$. each(json.runners,function() {
@3 &G3ZFR+%3%&3Z3+
this['time'K&G
if(this['gender'] == 'm'){
$('#finishers_m').append( info );
y bieca
Sprawd, cz ciwoci
a
w
warto
, czy f.
gender to m
}else if(this['gender'] == 'f'){

$('#finishers_f').append(info);
}else{}
$('finishers_all').append( info );
});
Dodaj biegacza do listy

finishers_all.
}
});
getTimeAjax();
}
my_scripts.js
Porady maniaka
Aby przej przez wszystkie elementy tablicy zwrconej w obiekcie JSON, moemy uy
metody each. Rni si ona od metody (selektor).each, poniewa moe iterowa
przez tablice spoza jQuery takie jak nasza tablica runners.
398
Rozdzia 9.
obsuga danych json
Jazda prbna
W swoim pliku my_scripts.js zaktualizuj funkcj getDBRacers. Nastpnie otwrz plik index.html
i zobacz, jak za pomoc Ajaksa, formatu JSON i PHP pobierani s biegacze z bazy danych MySQL.
Informacje
o biegaczach
pobrane z bazy
danych
Posuchaj. To wspaniale, e moemy

w ten sposb odczytywa dane,
ale potrzebujemy, eby nasza
aplikacja dziaaa z formularzem, jaki
utworzylimy dla dziau marketingu, nie?
Suszna uwaga.
Kiedy ju zakoczymy ten etap, to aloha, Waikiki! Najpierw
zagwarantujmy, e dane, jakie wprowadzi dzia marketingu,
nie wpdz nas w adne problemy.
jeste tutaj 399
nikt nie lubi brudnych danych
Sanityzacja i walidacja danych w PHP

W zwizku ze wzrostem liczby spamerskich botw oraz hakerw prbujcych przechwytywa Twoje dane dla swych
niecnych celw nigdy nie powiniene ufa danym, ktre s wprowadzane do formularza. Zawsze dobrym pomysem
jest walidacja i sanityzacja danych przesanych do serwera, zanim wstawi si je do swojej bazy. Zapewni to, e
w okrelonym polu znajdzie si typ danych, jakiego oczekujesz (walidacja), i e dane te nie bd zawieray niczego,
co mogoby by niebezpieczne dla Twojego serwera albo bazy (sanityzacja). Procesy te mog pomc w zabezpieczeniu
si przed takimi zagroeniami jak wstrzyknicie kodu SQL, skrypty przekierowujce (drive-by scripting) czy skrypty
midzy witrynami (cross-site scripting) i przed wieloma innymi nieprzyjemnociami, o ktrych moesz dowiedzie
si wicej w sieci. W naszej aplikacji skorzystamy z kilku sprytnych metod PHP w celu oczyszczenia uytych danych
i zagwarantowania, e bd one waciwe.
entw specjalnych
Konwertuje niektre z elem
bezpieczny dla
jest
y
ktr
at,
form
na
HTML-a
#%#
.
ych
dan
y
naszej baz
%&#L3&L%3 !AV3KKV ZR?9SJ3L9L%RF3F3 XL8Z#LZSZ?&3 HHH83Z?3L%
#!AV8KK?3## 3F?Z3LZF3 XS#93
# WA3L%!@3 KKSF 3 W9&3 # 3F?Z3LZZ3!@3 SZW?3ZFZ L
G
Sprawdza, czy
acuch tekstowy
jest pusty.
Funkcja dopasowujca wyraenie regularne.

e
Dopasowywanie wzorcw za pomoc wyra
zyjnie,
regularnych mona definiowa bardzo precy
cis
owa
spraw
z
moes
czym
z
ku
w zwiz
kontrol nad typem wprowadzanych danych.
Istnieje wiele rnych funkcji, ktrych uycie mona rozwaa przy okazji sanityzacji danych, w tym
htmlentities, trim, stripslashes, mysql_real_escape_string i inne. Znacznie wiksz ich liczb
znajdziesz w rozdziale 6. ksiki Head First PHP & MySQL. Edycja polska.
Uyj jednego pliku PHP do wielu zastosowa

Przyjrzelimy si dwm sposobom przesyania danych do serwera w celu ich przetworzenia
przez PHP: POST i GET. Korzystajc z logiki warunkowej, moemy wykry, czy do naszego
pliku PHP wpyno danie POST, czy GET, i postpi w odpowiedni sposb. Czy pamitasz
to ukryte pole, ktre dodalimy do naszego formularza kilka stron wczeniej?
<input type="hidden" name="action" value="addRunner" id="action">
Moemy sprawdzi, czy warto tego pola wystpuje w daniu POST, dziki czemu bdziemy wiedzie, e
przesalimy formularz. Nastpnie moemy wywoa funkcje walidacji i sanityzacji danych, aby upewni si,
czy dostalimy wszystkie potrzebne informacje. Podobnie, jeli zaktualizujemy metod getJSON pobierajc
biegaczy z bazy danych przy uyciu parametru URL (dla obiektu PHP $_GET), bdziemy mogli wskaza do
uruchomienia w pliku PHP ten wanie kod. Dziki temu do konserwacji bdziemy mie tylko jeden plik PHP.
$.getJSON("service.php~ P !, function(json) {
Skorzystaj z takiego zapisu, aby
nakaza funkcji PHP uruchomienie
kodu zwizanego z pobieraniem
biegaczy z bazy danych.
400
Rozdzia 9.
Ach! Wszyscy sprztaj ju swoje biurka

i wychodz na lotnisko! To ju wiemy, jak
dokoczy formularz, prawda?
obsuga danych json
Kod
gotowy do
wysmaenia
Zaktualizuj swj plik service.php poniszym kodem. Obsuguje on oba

sposoby przesyania informacji: GET i POST. Bdziesz musia doczy
te wczeniejsze funkcje db_connection, success i fail.
Runner zostaa
#%#
Sprawd, czy warto add t to nasze
Jes
a.
wer
ser
przekazana do
if ($_POST['action'] == 'addRunner') {
o kodu.
ukryte pole z wczeniejszeg
$fname = htmlspecialchars($_POST['txtFirstName']);
$lname = htmlspecialchars($_POST['txtLastName']);
Sanityzacja danych dla info
rmacji
$gender = htmlspecialchars($_POST['ddlGender']);
zawartych w tablicy $_POST
.
$minutes = htmlspecialchars($_POST['txtMinutes']);
$seconds = htmlspecialchars($_POST['txtSeconds']);
# WA3L%KFK!3# WA3L%KFK!&3
3&V?3## 3F&983ZFR
,
}
Walidacja danych gwarantuje
jakie
no
dzo
owa
wpr
e
#!3#!&3
informacje.
3&V Z#?33ZFR
}
if( empty($gender) ) {
3&V ZF8 3#J
Jeli walidacja nie
}
powiedzie si, wywoaj
funkcj fail.
$time = $minutes.":".$seconds;
$query = "INSERT INTO runners SET first_name='$fname', last_name='$lname', gender='$gender',
finish_time='$time'";
do bazy danych...
Ka wstawi nowy rekord
...i sprawd, czy wstawianie zakoczyo si sukcesem.
if ($result) {
$msg = "Biegacz: ".$fname." ".$lname." dodany poprawnie." ;
success($msg);
Sprawd, czy warto get
Runners
4&3&H3F3#F?J4, zostaa
przesana w acuchu URL
.
}elseif($_GET['action'] == 'getRunners'){
$query = "SELECT first_name, last_name, gender, finish_time FROM runners order by finish_time
ASC ';
$runners = array();
array_push($runners, array('fname' => $row['first_name'], 'lname' => $row['last_name'],
'gender' => $row['gender'], 'time' => $row['finish_time']));
}
Pobierz i zwr
echo json_encode(array("runners" => $runners));
biegaczy.
exit;
}
service.php
jeste tutaj 401
hawaje, jestecie coraz bliej...
Zrb to!
$.getJSON("service.php~ P !, function(json) {

if (json.runners.length > 0) {
.
Zaktualizuj wywoanie
funkcji getJSON parametrem
URL o nazwie action
z wartoci getRunners, aby
kazao plikowi service.php
zwrci biegaczy.
.
}
});
getTimeAjax();
}
my_scripts.js
Jazda prbna
Po zaktualizowaniu swoich plikw service.php oraz my_scripts.js otwrz w przegldarce plik index.html.
Powiniene zobaczy, jak pobierani s biegacze. Powiniene mie take moliwo dodawania do listy
nowych biegaczy za pomoc formularza na nowej karcie, ktr utworzye.
Wspaniale! Wsiadajmy
ju do samolotu,
a kolejne drinki
wypijemy sobie
na play...
402
Rozdzia 9.
obsuga danych json
Krzywka jQuery
jakie zajcie. Bdzie to zwyka krzywka. Wszystkie
wyrazy stanowice hasa pochodz z biecego rozdziau.
Poziomo
Pionowo
2. Instrukcja SQL suca do odczytywania danych z tabeli bazy danych.
1. Specjalny rodzaj tablicy sucy do przechowywania informacji

w postaci par nazwa/warto.
5. Systemy zarzdzania nimi s doskonale zorganizowanymi aplikacjami

zaprojektowanymi do przechowywania i organizowania rnych
informacji oraz pamitania relacji zachodzcych midzy nimi.
6. SQ w skrcie SQL.
3. Jedna z dwch metod uywanych do przesyania do serwera danych

zawartych w formularzu HTML. Powoduje ona doczenie nazw pl oraz
ich wartoci na kocu adresu URL.
10. Proces przekazywania informacji midzy jQuery a PHP moliwy dziki

formatom JSON oraz XML.
4. Popularny opensourceowy serwer baz danych, ktry mona pobra

bezpatnie.
11. Skrtowa metoda jQuery przeznaczona do wysyania danych do

serwera. Pobiera ona kilka parametrw: adres URL, informacje, ktre
chcesz przesa, oraz funkcj obsugi, ktra zostanie wywoana po
wysaniu danych.
7. Metoda pomocnicza formularzy jQuery, ktra powoduje poczenie

wszystkich danych z formularza w jeden acuch par klucz/warto
rozdzielonych znakami &.
8. Jzyk skryptowy wykonywany po stronie serwera, czsto uywany do
przesyania danych z formularza do serwera.
13. Metoda pomocnicza formularzy jQuery tworzca tablic asocjacyjn

par klucz/warto (ktra z kolei stanowi znakomity sposb na
ustrukturyzowane przechowywanie danych).
9. Element HTML, ktrego powiniene uy, kiedy chcesz zebra dane ze

strony WWW i przesa je serwerowi do przetworzenia.
15. JSON = Java Script ... ...
12. Skrt jQuery umoliwiajcy pobieranie z serwera informacji JSON.
16. Instrukcja SQL suca do wstawiania danych do tabeli.
14. Jedna z dwch metod uywanych do przesyania do serwera danych

zawartych w formularzu HTML. Ona take przesya dane, ale nie s one
widoczne w acuchu URL.
jeste tutaj 403
rozwizanie krzywki
404
Rozdzia 9.
obsuga danych json
Twj niezbdnik jQuery, Ajaksa, PHP i MySQL
PHP
MySQL
nych
anie da
chowyw z wstawianie
e
z
r
p
ia
a
Umoliw i tabelach or
omoc
h
cji za p
c
a
a
z
m
r
a
b
fo
in
w
ywanie
i odczyt QL.
S
jzyka
SQL yta sucy doyminitetraakkimcjii jak

w
ap
Jzyk z jami bazodano
c
a
k
z apli
.
MySQL
JSON
ra
aby pob
ie
tJSON, ane w formac
e
g
ji
c
k
w
n
o
fu
d
o
j
k
y
za
.
U
ra dane
kt JSON
z serwe wrci ona obie
larza
Z
z formu
e
n
JSON.
a
y
s
ich
prze
og by
t. Przed atowa
Dane m metody pos
m
r
fo
s
je
oc
y.
za pom m powiniene
lizeArra
ie
ia
r
n
e
a
s
s
y
ji
c
w
k
n
fu
oc
za pom
Jzyk s
kr
stronie yptowy wykony
w
se
manipulo rwera, ktry p any po
ozwala
wanie z
na
na serw
awarto
ci stro
e
ny
przekaza rze, zanim stro
na ta zo WWW
na do p
rzeglda
s
rki klien tanie
ta.
Skrypt
PHP
Plik tek
st
ktry wy owy zawierajc
y
konuje d
WWW.
ziaania kod PHP,
na serw
erze
<?php ?
>
Te znac
zn
PHP w iki musz otac
skryptac
z
h PHP. a cay kod
echo
Ta instr
uk
okna prz cja PHP wysy
a
e
nastpu gldarki. Jej s tekst do
kadnia
jco:
wyglda
echo 'W
itaj, w
iecie';
$_POST
Specjaln
a zmien
n
dane z
formular a, ktra przech
za.
owuje
json_en
code
Ta instr
uk
i konwe cja pobiera ta
rt
b
JSON, k uje j na dane lic
trych d
w forma
omaga s
c
i jQuer ie
y.
jeste tutaj 405
Rozdzia 9.
Masz ju za sob rozdzia 9.,

a do swojego niezbdnika dodae
podstawy PHP, MySQL, formatu
JSON i Ajaksa.
406
Rozdzia 9.
10.,QWHUIHMVX\WNRZQLNDZbM4XHU\
Diametralna zmiana wygldu

Podoba mi si twj
formularz. Moe bymy
poszli do mnie troch
pointerfejsowa?
Och Mam nadziej,

e mj formularz
przejdzie proces
walidacji.
Sie WWW yje i umiera dziki swoim uytkownikom i ich

danym. Zbieranie danych od uytkownikw to powane zajcie, ktre moe by
czasochonnym wyzwaniem dla programisty. Widziae ju, jak Ajax, PHP i MySQL
mog pomc w czynieniu efektywniejszym dziaania aplikacji internetowych.
Teraz przyjrzymy si, jak jQuery moe nam pomc w utworzeniu interfejsw
uytkownika dla formularzy zbierajcych dane. Po drodze otrzymasz spor dawk
jQuery UI oficjalnej biblioteki interfejsu uytkownika jzyka jQuery.
wielka stopa moe potrzebowa czego wicej ni tylko nowej fryzury
Kryptozoolodzy.org potrzebuj zmiany wygldu

Zajciem dr Paterskiej i dr. Glinki jest zbieranie moliwie najwikszej iloci danych na temat obserwacji
kryptyd od uytkownikw z caego wiata. Ich witryna, kryptozoolodzy.org, jest bardzo ceniona zarwno przez
profesjonalnych kryptozoologw, jak i przez amatorw na caym wiecie. Nasi dobrzy doktorzy maj dla Ciebie
kolejne zadanie: aktualizacj ich mocno ju przestarzaego formularza dotyczcego obserwacji kryptyd.
Kryptydy to zwierzta nieznane

naukowcom albo przez nich
nieuznawane. Gromadzenie
wartociowych danych od naszych
uytkownikw jest bardzo wane
w badaniach, ktre prowadzimy.
Niektre ze znanych kryptyd

to na przykad Wielka Stopa,
chupacabra i potwr z Loch
Ness. Potrzebujemy lepszego
formularza do rejestrowania,
gdzie i kiedy widzieli je ludzie.
Kiedy wreszcie
dadz mi spokj
ci paparazzi?
Dr Paters
ka
Kryptozoolodzy chc si na dobre

pozby swojego starego i niezgrabnego
formularza w HTML-u.
?
Dr Glinka
za
anie formular
Wygld i dzia do jego
aj
c
nie zach
wyglda on,
wypeniania z pnych lat
zi
od
jakby poch
wieku.
90. ubiegego
Nie ma adnych wizual

elementw, ktre pom nych
agayby
uytkownikom podcza
s
wprowadzania danych
jakociowych, a HTML
oferuje w tym wzgldzi nie
wielu moliwoci. W e zbyt
efe
badacze otrzymuj mn kcie
bezwartociowych info stwo
rmacji.
408
Rozdzia 10.
jquery UI
Odpicuj swj formularz HTML

Poniej znajduje si wzr nowego formularza, jaki chcieliby mie nasi kryptozoolodzy,
cznie z paroma dodatkowymi uwagami.
Przelij swoj obserwacj kryptydy

INFORMACJE O ZAOBSERWOWANIU KRYPTYDY
to pole
rmularzu jest
W obecnym fo rym dostajemy peno
kt
y, eby
tekstowe, w
rmacji. Chcem
bdnych info g wybiera dat
m
iki czemu
uytkownik
kalendarza, dz yzyjna.
go
ne
ija
zw
ro
ec
z
aksymalnie pr
bdzie ona m
Data obserwacji:
Miesic
W obecnym formularzu uywamy

przyciskw radiowych. Czy mogyby
one wyglda bardziej zachcajco?
ssak
Rodzaj zwierzcia:
Przybliona odlego od zwierzcia (w metrach):
Masa zwierzcia:
Wysoko zwierzcia:
Kolor skry, sierci albo okrycia:
R
G
B
Co powiecie na
mikser kolorw?
DANE MIEJSCA OBSERWACJI

Szeroko geograficzna:
Dugo geograficzna:
Przeka informacje na temat obserwacji: Przeka
eby
Chcielibymy, cy
ni
nasi uytkow gali
klikali i przeci
suwak w celu l
wypeniania p nam
liczbowych. Da e
to dokadniejsz
dane i bdzie
atwiejsze dla.
uytkownikw
Czy moecie sprawi, eby

przycisk wyglda adnie?
Przycisk w ksztacie
tabletki w naszym obecnym
formularzu wyglda tak,
jakbymy cigle byli
w minionej epoce.
WYSIL
SZARE KOMRKI
Kryptozoolodzy postawili przed Tob trudne zadanie. Chc, eby utworzy interfejs
uytkownika, jaki mona spotka w zwykych aplikacjach. Jakie wedug Ciebie
funkcje moe zaoferowa jQuery, ktre pomogyby osign ten cel?
jeste tutaj 409
rozmowa w boksie
Chopaki, widzielicie ju projekt
formularza do przesyania
obserwacji kryptyd?
Franek: Widziaem. Obecny formularz jest napisany w HTML-u, ale

HTML i CSS nie wystarcz do zrobienia nowego formularza, ktry chc
mie kryptozoolodzy.
Kuba: Nie musisz mi o tym mwi. Prbowae kiedy nadawa styl
elementom formularza za pomoc CSS? Ju wolabym mie kanaowe
leczenie zbw.
Franek: No tak, a jQuery c... nie widziaem w jQuery niczego, co
pomogoby nam utworzy takie skadniki interfejsu uytkownika.
Jzek: Chopaki, musimy to jako zrobi. Ludzie bardzo lubi tego typu
elementy, musimy wic znale sposb na ich skonstruowanie.
Franek: eby nam si udao, bdziemy chyba potrzebowa poczenia
JavaScriptu, jQuery i CSS.
Franek
Jzek
Kuba
Kuba: Mamy do napisania mnstwo logiki. Ju sam rozwijany kalendarz

to mnstwo wierszy kodu i od groma skomplikowanego CSS.
Jzek: Hm. A moe istnieje na co takiego wtyczka jQuery?
Kuba: Susznie, wtyczka! Kilka rozdziaw wczeniej uylimy ju wtyczki
do utworzenia kart na stronie wynikw biegu Od bitu do bajtu. Istnieje
chyba wicej wtyczek, co?
Jzek: Tak, jeli jQuery nie udostpnia czego, czego programista
potrzebuje, moe on opracowa wtyczk i przekaza j spoecznoci
jQuery do uytku. Oszczdza to innym programistom wielu godzin pracy.
Kuba: Tak wic jaki programista albo grupa deweloperska moga ju
mie do czynienia z takim zagadnieniem?
Franek: To by nam zaoszczdzio kilku problemw.
Jzek: Pokrmy si troch po jQuery.com i zobaczmy, co uda nam si
znale.
410
Rozdzia 10.
jquery UI
Czy nie byoby cudownie,

gdyby istniaa jaka biblioteka
jQuery z wtyczkami dla interfejsu
uytkownika? Ale to chyba
tylko marzenia...
jeste tutaj
411
przedstawiamy jquery UI
Oszczd sobie blu gowy (i zyskaj troch czasu) za pomoc jQuery UI

Na szczcie dla wszystkich programistw jQuery ma oficjaln bibliotek wtyczek
interfejsu uytkownika, ktra idealnie pasuje do tego typu projektw. Biblioteka ta nosi
nazw jQuery UI i oferuje trzy gwne rodzaje wtyczek: efekty, interakcje oraz widgety.
Wtyczki z efektami
jQuery UI poszerza moliwoci
jQuery o dodatkowe efekty.
Twoje elementy bd mogy
si odbija, eksplodowa,
pulsowa albo dre. jQuery
UI zawiera te funkcje easingu
skomplikowane operacje
matematyczne, dziki ktrym
animacje wygldaj bardziej
realistycznie.
Wtyczki z interakcjami

!

"
#
Wtyczki w widgetami
Widget to samodzielny element,
ktry dodaje do Twoich
aplikacji internetowych nowe
funkcjonalnoci. Widgety pozwalaj
Ci zaoszczdzi mnstwo czasu
i zapobiegaj zoonoci kodu,
tworzc jednoczenie przydatne
i aktywne elementy interfejsu
uytkownika.
W naszej pracy
z
w tym rozdziale UI
si przede wszy skupimy
stkim na
widgetach.
jQuery oferuje wtyczkow architektur,

ktra umoliwia programistom rozszerzanie
gwnej biblioteki jQuery.
Jazda prbna
Wyprbuj niektre z efektw jQuery UI, interakcji oraz widgetw, odwiedzajc

strony o nastpujcych adresach i postpujc zgodnie ze wskazwkami:
URL
412
Instrukcja postpowania
http://jqueryui.com/demos/animate/#default
Kliknij przycisk Toggle Effect.
http://jqueryui.com/demos/effect/default.html
Wybierz efekt zlisty rozwijanej, po czym kliknij przycisk

Run Effect.
http://jqueryui.com/demos/draggable/#default
Kliknij iprzytrzymaj prostokt znapisem Drag me around.

Nastpnie zacznij przesuwa prostokt wobrbie
udostpnionego na ekranie obszaru.
http://jqueryui.com/demos/accordion/#default
Klikaj poszczeglne sekcje, eby zobaczy, jak rozciga

si ikurczy akordeon.
http://jqueryui.com/demos/dialog/#animated
Kliknij przycisk Open Dialog, aby zobaczy

niestandardowe okno dialogowe jQuery UI. Owiele
lepsze ni stare inudne okno alarmowe wJavaScripcie,
no nie?
Rozdzia 10.
jquery UI
Dopasuj kad z wtyczek jQuery UI do opisu jej typu i tego, co robi.

Wskazwka: jeli nie masz pewnoci, powi troch czasu na pokrcenie
si po witrynie demo opisanej w Jedzie prbnej na poprzedniej stronie.
Puff
Interakcja: Element drzewa DOM bdzie

celem dla przecigalnych elementw.
Autocomplete
Widget: Wywietla biecy procent

ukoczenia jakiego procesu.
Droppable
Efekt: Element zdaje si rozpywa

w powietrzu i zanika tak jak dym.
Explode
Widget: Pokazuje list dostpnych wartoci,

kiedy uytkownik wpisuje tre w polu.
Sortable
Efekt: Element zdaje si przesuwa

w gr i w d, tak jakby by oknem.
Progressbar
Resizable
Widget: Tworzy umieszczone jeden nad

drugim skadane obszary, ktre pozwalaj
na organizowanie zawartoci strony.
Efekt: Element wyglda, jakby rozpad
si na wiele kawakw, ktre rozlatuj
si na rne strony.
Blind
Interakcja: Umoliwia sortowanie

elementw za pomoc przecigania.
Accordion
Interakcja: Nadaje elementowi

uchwyty przecigania, ktre pozwalaj
uytkownikowi na jego skalowanie.
jeste tutaj 413
Rozwizanie
Dopasuj kad z wtyczek jQuery UI do opisu jej typu i tego, co robi.
Puff
Interakcja: Element drzewa DOM bdzie

celem dla przecigalnych elementw.
Autocomplete
Widget: Wywietla biecy procent

ukoczenia jakiego procesu.
Droppable
Efekt: Element zdaje si rozpywa

w powietrzu i zanika tak jak dym.
Explode
Widget: Pokazuje list dostpnych wartoci,

kiedy uytkownik wpisuje tre w polu.
Sortable
Efekt: Element zdaje si przesuwa

w gr i w d, tak jakby by oknem.
Progressbar
Resizable
414
Widget: Tworzy umieszczone jeden nad

drugim skadane obszary, ktre pozwalaj
na organizowanie zawartoci strony.
Efekt: Element wyglda, jakby rozpad
si na wiele kawakw, ktre rozlatuj
si na rne strony.
Blind
Interakcja: Umoliwia sortowanie

elementw za pomoc przecigania.
Accordion
Interakcja: Nadaje elementowi

uchwyty przecigania, ktre pozwalaj
uytkownikowi na jego skalowanie.
Rozdzia 10.
jquery UI
Zrb to!
Zanim zrobimy cokolwiek w jQuery UI, musimy skonfigurowa potrzebne komponenty,

wybra motyw i pobra jego kopi. Wykonaj nastpujce czynnoci:
1
(+
!!

%
"
!#
-40
& INNO'N

("

")
W naszym projekcie bdziemy

potrzebowa jedynie UI Core
i widgetw, tak wic zaznacz tylko
skadniki pokazane na rysunkach.
("

"

Dla naszej aplik

acji wybierz
motyw Sunny.
5
'&''&P84< 3
3

'''&
P84 ' '
*'

''&73"

+

'

3
!&GE

+

'&3P84 Q
'
8G#I
& INNO'N&NR&;

4
Kliknij przycisk Download.
No to zaadowaem
sobie jQuery UI! Jak mam
z niego korzysta?
Musisz po prostu rozpakowa folder i doczy
bibliotek do katalogu z Twoim projektem.
Przewr stron, a zajrzymy do rodka jQuery UI.
jeste tutaj 415
struktura jquery UI
Co znajduje si w rodku pakietu jQuery UI

Po pobraniu i rozpakowaniu jQuery UI zobaczysz, e jego struktura wyglda nastpujco:
jquery-ui-1.8.16.custom
W chwili pisania tej
aktualna wersja jQ ksiki
miaa numer 1.8.16 uery UI
.
css
development-bundle
js
index.html
Wybrany przez Ciebie

motyw znajduje si
w folderze css.
sunny
jquery-1.6.2.min.js
jquery-ui-1.8.16.custom.min.js
Ludzie od UI chc miei

pewno, e masz kop
biblioteki jQuery.

jquery-ui-1.8.16.custom.css
W naszym formular
sightings.html bdzizu
potrzebowa sekcj emy
i
ze skryptem, ktry
zawiera cze do teg
o
pliku.
W sekcji nagwka pliku sightings

.html bdzie
potrzebne cze do tego pliku, eby
widgety
jQuery UI wyglday prawidowo.
Folder z jQuery UI doczylimy do pliku z kodami, ktry pobrae na pocztku tej ksiki.
Znajdziesz go w podkatalogu end w folderze r10.
Lista kontrolna naszego projektu

jQuery UI zrobi za nas mnstwo rzeczy, ale i tak sami bdziemy musieli si zaj kilkoma sprawami,
eby utworzy nowy formularz. Oto lista kontrolna zada, ktre przyjdzie nam wykona:
416
1.
Utworzenie kalendarza do wprowadzania daty obserwacji.
2.
Utworzenie ciekawszych przyciskw radiowych sucych do wybierania rodzaju zwierzcia.
3.
Utworzenie suwakw liczbowych sucych do wprowadzania odlegoci od zwierzcia,

jego masy i wzrostu oraz szerokoci i dugoci geograficznej.
4.
Utworzenie miksera kolorw do okrelania koloru zwierzcia.
5.
Utworzenie adnego przycisku do przesyania formularza.
Rozdzia 10.
jquery UI
Utwrz kalendarz dla formularza z obserwacjami

To zdumiewajce, jak atwo jest wstawi widget jQuery UI do formularza HTML.
Zacznijmy od kalendarza pozwalajcego na wybr daty.
1
-

3;;
!#
-4
<link type="text/css" href="jquery-ui-1.8.16.custom/css/sunny/
jquery-ui-1.8.16.custom.css" rel="stylesheet" />
Utwrz znacznik <script>

!
"" %
!#
-4
<script src="jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js">
</script>
(5

67'8
.
<input type="text" name="sighting_date">
Do znacznika dodaj identyfikator datepicker.

<input type="text" name="sighting_date" id="datepicker">
-

9:;

%

/!
)* +# * *+,.

)
%!
0
$('#datepicker').datepicker();
&

!!
" !

!

.
ie
To tyle! Wanrmularza
dodae do fo widget.
interaktywny
jeste tutaj 417
pracuj mdrzej, a nie ciej
jQuery za kulisami
Chocia moe to wyglda na czary, to jQuery UI jest tak naprawd tylko du
iloci dobrze zaprojektowanego i wietnie napisanego kodu w jQuery kodu,
ktrego Ty nie musisz ju pisa. Przyjrzyjmy si bliej temu, jak to dziaa.
1
7

!

!#

korzysta z selektora i metody.
$("#datepicker").datepicker();
Prawdziwa moc kry
tutaj, w metodzie je si
datepicker.
Kod jQuery
Za kulisami
2
<

!#

""
!#
-4

9:;
prosi drzewo DOM o element

z identyfikatorem datepicker.
Hej, DOM-ie, podaj
mi element strony
z identyfikatorem
datepicker.
Interpreter
JavaScriptu
Rozdzia 10.
Drzewo DOM bierze wybrany

!

%

Wersja DOM
strony
Prosz bardzo.
Metoda datepicker instruuje interpreter JS, aby

+
"

67'8=
3;;

" !

To wietnie, e wszystko dziaa, chocia

napisaam tylko troch HTML-a i jQuery.
Czy to jednak znaczy, e musz pozosta
z takim wygldem i funkcjami kalendarza?
A co, jeli zechc zrobi co innego?
418
Widget z kalendarze
ktry w magiczny m,
sposb pojawia si
na stronie, jest
tabel zagniedon
w wielu sekcjach.
Bez obaw, masz

jeszcze inne opcje.
Sprawdmy je.
jquery UI
Opcje widgetw s konfigurowalne

Jeli zagbisz si w moliwoci widgetu datepicker, okae si, e ma on
wiele funkcji oraz opcji, ktre moesz konfigurowa.
Przycisk nastpny
pokae Ci kolejny
mi
Przy kadym klikni esic.
c
generowana jest w iu
nowa tabela dla da locie
nego
miesica.
rzedni
Przycisk pop eniejszy
cz
w
Ci
pokae
miesic.
Bieca data zostan

wyrniona innym ie
kolorem.
Skonfiguruj kalendarz za pomoc opcji

Jako e jQuery UI zosta utworzony na bazie jQuery, nie musisz pisa duych
iloci kodu, aby dostosowa widget datepicker do swoich potrzeb. W chwili
pisania tej ksiki mona byo konfigurowa 46 rnych jego opcji.
Widget datepicker ma
mnstwo konfigurowalnych
opcji. stepMonths umoliwia
okrelenie, ile miesicy
zostanie przewinitych.
$("#datepicker").datepicker({
stepMonths: 3
Jeli rozpoczniesz w danym mies
icu
i klikniesz przycisk poprzedni
});
albo
nas
tpny, przeskoczysz o trzy
miesice do tyu albo do przodu.
$("#datepicker").datepicker({
changeMonth: true
});
wiczenie
ji
Jeli zmienisz warto opc
tkownik
changeMonth na true, uy
sic z listy
bdzie mg wybiera mie
ej.
rozwijan
Napisz kod, ktry pozwoli uytkownikowi zmienia za pomoc list rozwijanych zarwno
miesic, jak i rok w widgecie datepicker. Podpowied: kiedy zmieniasz wicej opcji,
rozdziel je przecinkami.
jeste tutaj 419
rozwizanie wiczenia
Napisz kod, ktry pozwoli uytkownikowi zmienia za pomoc list rozwijanych zarwno
miesic, jak i rok w widgecie datepicker. Podpowied: kiedy zmieniasz wicej opcji,
Rozwizanie rozdziel je przecinkami.
wiczenia
$('#datepicker').datepicker({
changeMonth: true, changeYear: true
});
Kod
gotowy do
wysmaenia
Znajd plik o nazwie sightings_begin.html w podfolderze begin w katalogu r10. Zapisz

go jako sightings_end.html w folderze end dla rozdziau 10. Dodaj wyrniony poniej
pogrubion czcionk kod do swoich plikw sightings_end.html i my_scripts.js.
pliku sightings_end.html
Na pocztku
<head>
&GV?Z&FS\8 F3LS\R #?K&G
<link rel="stylesheet" type="text/css" href="style/form.css" />

; !!? % &&'#4#'7# ! !!!% &&'#4#'7# !# !!

!
!?
li cze do pliku CSS jQuery
Musimy okre
o.
UI, eby widgety wyglday prawidow
</head>
<h3>Data obserwacji:</h3>
; !?"
:
!
! ! % &&'#4#'7# !!% &&'#4#'7# !##!!
</body>
</html>
eby
Musimy doczy bibliotek jQuery UI,pne.
wszystkie fajne funkcje UI byy dost
Przy kocu pliku

sightings_end.html
)*M- M+# *, ? ?2 Q ? 2 .+0
Kod widgetu datepicker
my_scripts.js
420
Rozdzia 10.
jquery UI
Jazda prbna
Po wprowadzeniu kodu z poprzedniej strony otwrz w swojej ulubionej przegldarce plik
sightings_end.html, aby przetestowa widget datepicker. Kliknij przyciski nastpny i poprzedni
oraz listy rozwijane z miesicem oraz rokiem, eby upewni si, e wszystko dziaa.
Datepicker dziaa!
Widget datepicker dziaa

tak, jak tego oczekujemy.
Opcje changeMonth
i changeYear take
dziaaj.
Moesz go ju odhaczy
Numer 1 z naszej listy kontrolnej zosta zrobiony. Przejdmy do pozycji nr 2.
1.
2.
3.

4.
5.
jeste tutaj 421
przyciski warte klikania
Nadaj styl przyciskom

Co waciwie kryje si pod pojciem ciekawsze przyciski? To przede wszystkim kwestia stylu: zrb lepiej
wygldajcy przycisk, a ludzie bd chcieli go klika. Jednym z superprzydatnych widgetw z biblioteki jQuery
jest wanie widget przycisku. Udostpnia on metod button, ktra pomaga w tworzeniu atrakcyjniejszych
elementw formularzy takich jak przyciski przesyania, przyciski radiowe albo pola wyboru.
Te dane wejciowe
zostan zaktualizowane,
kiedy uytkownik kliknie.
Oto HTML dla pojedynczego

przycisku.
<input type="radio" id="radio1" name="radio" />

<label for="radio1">Wybr 1</label>
A tak wyglda odpowiadajca
mu instrukcja jQuery.
Widget button nadaje styl

przycisku elementowi label.
Metoda button zamien

przycisk radiowy w ia zwyky stary
HT
lepiej wygldajcy i ML-u w przycisk
bardziej
interaktywny.
$( "#radio1" ).button();
Grupowanie widgetw przyciskw

Do tworzenia pogrupowanych zestaww przyciskw jQuery UI
udostpnia metod buttonset, ktra przeksztaca poszczeglne
przyciski w grup, odwoujc si do kontenera z t grup.
Nie zapominaj, e kod ze

znacznikami przyciskw
musi znajdowa si
wewntrz znacznikw
HTML formularza.
<div id="radio">
Umie grup
przyciskw radiowych
wewntrz kontenera.

</div>
W kodzie jQuery
wska kontener.
$( "#radio" ).buttonset();
422
Rozdzia 10.
Metoda buttonset grupuje przyciski

i dla kadego elementu wywouje
metod button.
jquery UI
Magnesiki z kodem
Poukadaj magnesiki z kodem we waciwej kolejnoci, aby utworzy zestaw przyciskw,
z ktrego bd korzysta uytkownicy, wybierajc rodzaj zwierzcia, jakie widzieli. Kilka
magnesikw umiecilimy we waciwych miejscach.
<div id="type_select">
<input type="radio" id="radio1" name="creature_type" />

:
!
<label for="radio1">Chupacabras</label>

&38& 3?GVFI Z L%K&38&G
&38& 3?GV3R9?3K&38&G
</div>
my_scripts.js
$( "#type_select" ).buttonset();
&38& 3?-G38JZ K&38&G
#9# 3?? 3?3L 39 A#KG
jeste tutaj 423

Masz ju teraz adny zestaw przyciskw w stylu pasujcym do Twojego formularza.
<div id="type_select">

<label for="radio1">Chupacabra</label>
:
!

&38& 3?-G38JZ K&38&G
&38& 3?GVFI Z L%K&38&G
#9# 3?? 3?3L 39 A#KG
&38& 3?GV3R9?3K&38&G
</div>
W folderze z kodem
moesz zobaczy,
e dodalimy
te przyciski dla
yeti oraz innych
zwierzt. W tym
wiczeniu po
prostu zabrako
na nie miejsca.
$( "#type_select" ).buttonset();
my_scripts.js
424
Rozdzia 10.
jquery UI
Jazda prbna
Do plikw sightings.html oraz my_scripts.js dodaj kod z poprzedniej strony. Nastpnie
otwrz stron w swojej ulubionej przegldarce i sprawd, czy wszystko dziaa.
Zwyke stare przyciski

radiowe w HTML-u...
...zamienie na
zestaw adnie
wygldajcych
przecznikw.
Hej, to byo cakiem proste. Co nastpnego mamy na naszej licie?
1.
2.
3.

4.
5.
jeste tutaj 425
ograniczone dane s czytelniejsze
Kontroluj pola liczbowe za pomoc suwakw

Wtyczka jQuery UI z suwakiem umoliwia tworzenie interfejsw z suwakami, ktre
uytkownicy mog kontrolowa za pomoc myszy albo klawiatury komputera. Suwaki
s pomocne take podczas sprawdzania wartoci wprowadzanych przez uytkownika.
Jak ju widziae, tworzenie widgetw to buka z masem, kiedy ma si bibliotek
jQuery UI. Zaprogramowanie widgetu z suwakiem jest rwnie atwe.
Tutaj tworzymy suwak
w pliku HTML.
A tutaj mamy powizany

z nim kod w jQuery.
<div id="slide_me"></div>
$("#slide_me"). slider();
Uytkownik moe przesuwa uchwyt

suwaka za pomoc kursora myszy albo
klawiszy ze strzakami na klawiaturze
komputera.
suwaka wzdu
Kiedy uytkownik przesuwa uchwyt
j zmianie.
jego cieki, wartoci suwaka ulega
Suwaki rwnie oddaj do dyspozycji mnstwo opcji konfiguracyjnych.

Zamy, e chcemy, aby uytkownik mg wprowadza zestawy liczb.
Najnisz wartoci, jak moe wprowadzi, powinno by 0, a najwysz 100.
Chcemy te, eby wprowadzane wartoci zmieniay si w odstpach co 5.
Oto, jak moemy to osign za pomoc opcji widgetu z suwakiem:
$( "#slide_me" ).slider({
Opcja value decyduje,
od ktrej wartoci
naley zacz.
value:0,
min: 0,
max: 100,
Opcja step decy

o przyrostach duje
wartoci, jakie
bdziemy mie
w suwaku.
step: 5,
Opcja min decyduje o tym, jak

najnisz warto bdzie mg
wprowadzi uytkownik.
Opcja max decyduje o tym,

jak najwysz warto
bdzie mg wprowadzi
uytkownik.
orientation: 'vertical'
});
Opcja orientation
moe przyj warto
horizontal (uoenie
poziome) albo vertical
(uoenie pionowe).
426
Rozdzia 10.
jquery UI
Widget z suwakiem
oferuje wietne opcje,
ale jak przenosimy wartoci
z suwaka do formularza?
Musimy poczy suwak z jedn z funkcji obsugi zdarze tego wigdetu.
Zobaczylimy ju niektre z opcji widgetu, ale nie poznalimy jeszcze kolejnej wspaniaej
cechy jQuery UI. Wiele skadnikw jQuery udostpnia funkcje obsugi zdarze, a suwak
jest jednym z nich. W chwili pisania tej ksiki widget suwaka jQuery UI oferowa pi
funkcji obsugi: create, start, slide, change i stop. Aby poczy suwak z polem
formularza, wyprbujmy funkcj obsugi zdarze o nazwie slide.
Jeli nie chcesz,
eby uytkownik
mg wpisywa liczby
z klawiatury, ustaw
opcj readonly.
Kod HTML widgetu z suwakiem
<input type="text" id="my_value" readonly="readonly"/>

<div id="slide_me"></div>
Pole my_value
Suwak slide_me
Skrypt jQuery widgetu z suwakiem

$( "#slide_me" ).slider({
To jest funkcja obsugi
zdarzenia przesunicia.
Uytkownik j
wywouje, kiedy
przeciga uchwyt
suwaka.
slide: function( event, ui ) {

$( "#my_value" ).val( ui.value);
}
});
Zdarzenie przesunicia
jest powizane
z wywoaniem zwrotnym
funkcji. Kiedy funkcja
ta dziaa, warto
rubryki jest okrelana
za pomoc metody
jQuery val.
$( "#my_value" ).val( $( "#slide_me" ).slider( "value" ));
Kiedy uytkownik przesuwa uchwyt

suwaka, nastpuje wywoanie funkcji,
a warto pola jest aktualizowana
na podstawie wartoci suwaka.
jeste tutaj 427
dugie wiczenie
Dugie wiczenie
Uzupenij puste miejsca w kodzie kadej z rubryk, ktre chc mie kryptozoolodzy. Zostawili
oni dla Ciebie kilka notatek dotyczcych opcji suwakw, jakie powiniene ustawi.
):
Odlego od zwierzcia (w metrach
osi 0.
Warto pocztkowa powinna wyn
wynosi 0.
Najmniejsza odlego powinna
osi 150.
Najwiksza odlego powinna wyn
i
Naley uy przyrostw wartoc
wynoszcych 3 metry.
%G?&WJX?ZF ZL3F 3L%+K%G

<input type="text" id="
readonly="readonly"/>
<div id="
" class="just_display" name="creature_distance"

"></div>
</div>
</div>
:
!
$( "#slide_dist" ).slider({

$( "#distance"
}
});
my_scripts.js
428
Rozdzia 10.
jquery UI
):
Masa zwierzcia (w kilogramach
osi 0.
osi 0.
Najmniejsza masa powinna wyn
2000.
Najwiksza masa powinna wynosi
i
wynoszcych 2 kilogramy.
Wysoko zwierzcia (w metrach):

Warto pocztkowa powinna wynosi 0.
Najmniejsza wysoko powinna wynosi 0.
Najwiksza wysoko powinna wynosi 6.
Naley uy przyrostw wartoci rwnych
0,25 metra.
%G33ZF ZL3FR&W 33L%+K%G

<input type="text" id="weight" class="just_display" name="creature_weight"
<div id="
"></div>
%GHRXZF ZL3F 3L%+K%G

<input type="text" id="height" class="just_display" name="creature_height"
<div id="slide_height"></div>
:
!
$( "
$( "#slide_weight" ).slider({
" ).slider({

$( "
$( "#weight" ).val( ui.value);
" ).val( ui.value);

}
}
});
});
my_scripts.js
my_scripts.js
jeste tutaj 429

Dugie wiczenie
rozwizanie
Uzupenij puste miejsca w kodzie kadej z rubryk, ktre chc mie kryptozoolodzy. Zostawili
oni dla Ciebie kilka notatek dotyczcych opcji suwakw, jakie powiniene ustawi.
):
Odlego od zwierzcia (w metrach
osi 0.
wynosi 0.
Najmniejsza odlego powinna
osi 150.
Najwiksza odlego powinna wyn
i
wynoszcych 3 metry.
%G?&WJX?ZF ZL3F 3L%+K%G

<input type="text" id=" distance
" class="just_display" name="creature_distance"
<div id=" slide_dist "></div>

</div>
</div>
:
!
$( "#slide_dist" ).slider({
value:0,
min:0,
max:150,
step: 3,

$( "#distance".val( ui.value);)
}
});
my_scripts.js
430
Rozdzia 10.
jquery UI
):
Masa zwierzcia (w kilogramach
osi 0.
osi 0.
Najmniejsza masa powinna wyn
2000.
Najwiksza masa powinna wynosi
i
wynoszcych 2 kilogramy.
Wysoko zwierzcia (w metrach):

Warto pocztkowa powinna wynosi 0.
Najmniejsza wysoko powinna wynosi 0.
Najwiksza wysoko powinna wynosi 6.
Naley uy przyrostw wartoci
wynoszcych 0,25 metra.
%G33ZF ZL3FR&W 33L%+K%G

<input type="text" id="weight" class="just_display" name="creature_weight"
<div id=" slide_weight "></div>
%GHRXZF ZL3F 3L%+K%G

<input type="text" id="height" class="just_display" name="creature_height"
<div id="slide_height"></div>
:
!
$( " #slide_height
$( "#slide_weight" ).slider({
" ).slider({
value:0,
value:0,
min:0,
min:0,
max:6,
max:2000,
step: 0.25,
step: 2,

$( "
#height
$( "#weight" ).val( ui.value);
" ).val( ui.value);

}
}
});
});
my_scripts.js
my_scripts.js
jeste tutaj 431
jazda prbna
Jazda prbna
Dodaj kod z dugiego wiczenia z poprzednich stron do swoich plikw. Nastpnie otwrz
plik sightings_end.html w swojej ulubionej przegldarce. Nie zapomnij przetestowa suwakw
za pomoc myszy i klawiatury (klawisze ze strzakami w lewo i w prawo powinny przesuwa
suwak o warto zdefiniowanego przyrostu).
Uytkownicy mog
teraz wprowadza
dane, przecigajc
uchwyty suwakw,
a kryptozoolodzy
uzyskali o wiele
wiksz kontrol
nad jakoci danych.
Pozostay Ci do zaprogramowania jeszcze dwa suwaki: z szerokoci i dugoci

geograficzn. Gdy si z nimi uporasz, bdziesz mg odhaczy kolejn pozycj
na licie kontrolnej projektu!
432
Rozdzia 10.
jquery UI
Ale szeroko i dugo geograficzna
mog mie wartoci ujemne oraz interway
dziesitne takie jak 0,00001. Czy widget
z suwakiem obsuguje takie rodzaje liczb?
jQuery UI zaspokoi Twoje potrzeby take i w tym wzgldzie.

Widget z suwakiem radzi sobie z liczbami ujemnymi i uamkami dziesitnymi.
Wartoci ujemne moesz wprowadza dla wartoci pocztkowych, minimalnych
i maksymalnych. Wyprbuj poniszy kod, aby zobaczy je w akcji.
Zaostrz owek
Uzupenij kod w jQuery, tak aby pojawiy si suwaki dla szerokoci i dugoci geograficznej.
Suwak dla szerokoci geograficznej powinien mie zakres od 90 do 90 z przyrostami
wynoszcymi 0,00001. Suwak dla dugoci geograficznej powinien mie zakres od 180
do 180 z przyrostami rwnymi 0,00001.
value:0,

$( "
" ).val( ui.value);
}
});
value:0,

$( "
" ).val( ui.value);
}
});
my_scripts.js
jeste tutaj 433
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Uzupenij kod w jQuery, tak aby pojawiy si suwaki dla szerokoci i dugoci geograficznej. Suwak dla
szerokoci geograficznej powinien mie zakres od 90 do 90 z przyrostami wynoszcymi 0,00001.
Suwak dla dugoci geograficznej powinien mie zakres od 180 do 180 z przyrostami rwnymi 0,00001.
$( #slide_lat ).slider({
value:0,
min: -90,
max: 90,
step: 0.00001,

$( " latitude
" ).val( ui.value);
}
});
$( #slide_long ).slider({
value:0,
min: -180,
max: 180,
my_scripts.js
step: 0.00001,

$( " longitude
" ).val( ui.value);
}
});
Do tej pory udao Ci si ju odhaczy cakiem sporo pozycji na licie:

1.
2.
3.
Utworzenie suwakw liczbowych sucych do wprowadzania odlegoci od zwierzcia, jego

masy i wzrostu oraz szerokoci i dugoci geograficznej.
Co dalej? Teraz powiniene utworzy dla kryptozoologw interfejs pozwalajcy

uytkownikom wprowadza kolor zaobserwowanego zwierzcia za pomoc suwakw
reprezentujcych barw czerwon, zielon i niebiesk.
4.
434
Rozdzia 10.
jquery UI
Komputery mieszaj kolory, uywajc barwy czerwonej, zielonej i niebieskiej

Kada z wartoci koloru czerwonego, zielonego i niebieskiego moe przyj minimum
wynoszce 0 i maksimum rwne 255. Kiedy wszystkie barwy przyjm wartoci minimalne
innymi sowy, gdy warto czerwona wynosi 0, warto zielona 0 i warto niebieska
0 wwczas mamy czer. Kiedy kady kolor ma warto maksymaln czerwony 255,
zielony 255 i niebieski 255 to mamy biel.
Kiedy kada z wartoci dla
czerwieni, zieleni i bkitu
wynosi 0, wtedy mamy czer.
R
G
B
Kiedy warto dla czerwieni wynosi

255 (a bkit i ziele s rwne 0),
wtedy mamy czerwie.
R
G
B
R
G
B
Kiedy warto dla zieleni wynosi

(a czerwie i bkit s rwne 0), 255
wtedy
mamy ziele.
R
G
B
Kiedy warto dla bkitu wynosi

255 (a czerwie i ziele s rwne 0),
wtedy mamy bkit.
Kiedy kada z wartoci dla
czerwieni, zieleni i bkitu
wynosi 255, wtedy mamy biel.
R
G
B
Twoje suwaki powinny robi to samo

Musisz wic utworzy trzy rne suwaki, po jednym dla barwy czerwonej, zielonej
i niebieskiej. Nastpnie poczysz wartoci pobrane z kadego suwaka w jeden kolor.
Spjrzmy, jakie wasnoci powinien mie widget kadego z suwakw.
Musimy poczy wartoci
wszystkich suwakw, aby
uzyska kolor sekcji #swatch.
Identyfikatory CSS dla wprowad

zanych
wartoci to red_val, green_val
i blue_val.
Kolor
R
G
B
Zakres kadego
z
bdzie wynosi od suwakw
0 do 255.
#red
#swatch
#green
#blue
Ponadto sekcja swatch musi
by aktualizowana kadorazowo,
kiedy uytkownik przecignie
uchwyt jednego z suwakw.
jeste tutaj 435
Kod
gotowy do
wysmaenia
Dodaj wyrniony kod do swoich plikw sightings_end.html i form.css.

Dziki temu zostan one przygotowane do utworzenia miksera kolorw.
!
!=J=!
-!
"!Q-!
"= ?Q-!
"? ?,
&12'U;0
}
-!= ?,
=?2(@;0
? ?2(@;0
1 & 2 0
form.css
Ten identyfikator
definiuje prbk stylu CSS
,
bdzie pokazywa ktra
gdy uytkownik kolor,
zm
pooenie ktrego ieni
suwaka.
}
- #&!
& ,1 2- 990.
- #&!
&?
,1 &
2- 990.
Kady z tych wierszy
dodaje do cieki
suwaka jego kolor.
- #&!
& ,1 2-4 96U0.
- #&!
&?
,1 &
2-4 96U0.
-1
#&!
& ,1 2-(9 0.
-1
#&!
&?
,1 &
2-(9 0.
%G& ZF ZL3FL&9R X&3R& 99S9F3RIF+K%G
Pole, w ktrym bdzie

przechowywana warto
szesnastkowa koloru
W
*! !!=+2 ;
!!!"!

"

"

11
!= ?
!!&= & & &

Sekcja z prbk
koloru
T =2 ;

!!!"!
"
"

<div id="red"></div>
Sekcja dla suwaka czerwonego
F
2 ;
!!!"!
"
"

Sekcja dla suwaka zielonego
R 1 !2 ;

!!!"!
"
1
"

1

Sekcja dla suwaka niebieskiego
:
!
436
Rozdzia 10.
jquery UI
Zaostrz owek
Poniszy skrypt konfiguruje suwaki dla barwy czerwonej, zielonej i niebieskiej. Spjrz
na kady wiersz i zastanw si, co moe on robi, bazujc na tym, co ju wiesz
o jQuery i jQuery UI. Nastpnie napisz, co wedug Ciebie robi kod. Jeli nie masz
pewnoci, moesz zgadywa. Jeden z wierszy opisalimy za Ciebie.
$( "#red, #green, #blue" ).slider({

orientation: "horizontal",
Tak ustawia zakres suwaka, e uytkownik moe wybiera tylko maksimum
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
})
Nie istniej
gupie pytania
P: Co to za CSS, ktry jest razem
z jQuery UI?
O:
Wspaniaa cecha jQuery UI polega

na tym, e jego programici obmylili
mnstwo zoonego kodu CSS, eby Ty
nie musia si tym zajmowa. Moesz si
z nim zapozna, przegldajc plik jqueryui-1.8.16.custom/css/sunny/jquery-ui-1.8.16.
custom.css doczony do pakietu jQuery UI.
Aby dowiedzie si wicej o tych klasach
CSS, odwied stron z dokumentacj do
jQuery UI pod adresem http://jqueryui.
com/docs/Theming/API.
P: Powiedziae, e w jQuery UI
mog tworzy wasne motywy. Jak to

si robi?
O: Moesz atwo tworzy wasne
motywy, korzystajc z waka malarskiego

motyww jQuery UI. Najpierw otwrz
w swojej przegldarce aplikacj waka:
http://jqueryui.com/themeroller/
Nastpnie kliknij kart Roll your own.

Zobaczysz ustawienia dla takich
elementw jak czcionki, stany klikni,
cienie i nakadki. Wprowad wasne
niestandardowe modyfikacje, a elementy
interfejsu uytkownika zmieni si,
odzwierciedlajc ustawienia, ktre
zmienie.
Kiedy skonfigurujesz swj motyw tak,
jak bdziesz tego chcia, po prostu kliknij
przycisk Download Theme, a zostaniesz
przeniesiony na stron Build Your
Download, gdzie bdziesz mg utworzy
wasny pakiet jQuery UI. Jeeli bdziesz
chcia zapisa swj motyw na pniej,
dodaj t stron do zakadek.
P:
Nie rozumiem, o co chodzi

z widgetami interaktywnymi. Do czego
mog ich uywa?
O:
Interakcje umoliwiaj tworzenie

takich funkcjonalnoci, jakie mona
spotka w zwykych aplikacjach.
Za pomoc widgetw przecigalnych

(draggable) moesz zamienia elementy
strony w komponenty przecigalne.
Widget upuszczalny (droppable) moe by
celem dla widgetu przecigalnego.
Widget o zmiennych rozmiarach (resizable)
zmienia element strony w skalowalny
obiekt, ktrego wielko moesz zmienia,
przecigajc jego rg albo praw lub doln
krawd.
Widgety wybieralne (selectable) zamieniaj
elementy w takie, ktre mona zaznacza.
Uytkownik Twojej strony moe wtedy
przecign mysz po tych elementach,
zaznaczajc je tak samo jak pliki na
pulpicie swojego komputera.
Kolejno widgetw sortowalnych
(sortable) moe by interaktywnie
zmieniana przez uytkownika.
jeste tutaj 437
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Poniszy skrypt konfiguruje suwaki dla barwy czerwonej, zielonej i niebieskiej. Spjrz
na kady wiersz i zastanw si, co moe on robi, bazujc na tym, co ju wiesz
o jQuery i jQuery UI. Nastpnie napisz, co wedug Ciebie robi kod. Jeli nie masz
pewnoci, moesz zgadywa. Oto nasze odpowiedzi.
$( "#red, #green, #blue" ).slider({
Zamienia kad sekcj R, G oraz B na widget suwaka.
orientation: "horizontal",
Nadaje suwakom orientacj poziom zamiast pionowej.
range: "min",
Tak ustawia zakres suwaka, e uytkownik moe wybiera tylko maksimum.
max: 255,
Ustawia maksimum na 255, aby zmieci si w limicie koloru.
value: 127,
Tak ustawia warto pocztkow, aby suwak znalaz si mniej wicej w rodku.
slide: refreshSwatch,
Kiedy uytkownik przecignie suwak, zostanie wywoana funkcja refreshSwatch.
change: refreshSwatch
Kiedy zmieni si ktra z wartoci, zostanie wywoana ta sama funkcja.
});
Napisz funkcj refreshSwatch

Do dokoczenia naszego miksera kolorw bdzie nam potrzebna funkcja konfigurujca i odwieajca
prbk. Oto szkieletowa wersja takiej funkcji razem z kilkoma kluczowymi zagadnieniami, ktre naley
rozway przed urzeczywistnieniem funkcjonalnoci, jak chcesz uzyska.
function refreshSwatch() {
???
var green = ???
var blue = ???
var my_rgb = ???
$( "#swatch" ).???;
var red =
W jaki sposb przeniesiesz

wartoci poszczeglnych
suwakw do kadej z tych
zmiennych?
W tej zmiennej musimy poczy
wartoci RGB, aby ustawi
warto prbki koloru.
$( "#red_val" ).val(red );
$( "#blue_val" ).val( blue);
$( "#green_val" ).val( green);
$( "#color_val" ).val(my_rgb);
}
438
Rozdzia 10.
Ktra z metod jQuery pozwoli

nam ustawi kolor prbki?
Z tym nie bdzie wielkiego
problemu. Moemy po prostu
uy metody jQuery val, aby
pola liczbowe pokazyway zmiany
wartoci suwakw. Dziki temu
uytkownik bdzie zna te wartoci
.
jquery UI
Wiemy ju, jak pobiera wartoci

z suwakw, ale jak utworzymy prbk
barwy? Czy nie bdziemy potrzebowa
mnstwa kodu, eby przekonwertowa
kolory na zapis szesnastkowy?
Suszna uwaga! Moglibymy napisa funkcj konwertujc

liczby dziesitne na szesnastkowe, ale moemy te uy
liczb dziesitnych pobranych bezporednio z suwakw.
Pamitaj, e waciwo CSS background-color pozwala na okrelanie
kolorw w nastpujcy sposb:
R G B
background-color:rgb(255,0,255)
Jest to jednak zaledwie podpowied do
jednego z pyta. Aby napisa ca funkcj,
bdziesz musia si troch wysili.
Uzupenij puste wiersze kodu, aby dokoczy funkcj refreshSwatch.

wiczenie
var red =
var green =
var blue =
var my_rgb =
$( "#swatch" ).
}
jeste tutaj 439
rozwizanie wiczenia
Rozwizanie
wiczenia
Uzupenij puste wiersze kodu, aby dokoczy funkcj refreshSwatch.

var red = $( #red ).slider( value );
var green = $( #green ).slider( value );
Zestawiajc wartoci RGB

w tej zmiennej...
var blue = $( #blue ).slider( value );

var my_rgb = rgb( + red + , + green + , + blue + );
$( "#swatch" ). $( #swatch ).css( background-color, my_rgb );
...moemy ustawi CSS prbki

na poczone wartoci trzech
barw.
}
Kod
gotowy do
wysmaenia
Zaktualizuj swj plik my_scripts.js, doczajc do niego

kod kolorowych suwakw oraz funkcj refreshSwatch
z poprzednich stron. Dodaj take ponisze wiersze. Po
zaadowaniu strony zainicjalizuj one funkcj refreshSwatch
wartociami suwakw, dziki czemu prbka koloru nie bdzie
pusta, tylko uzyska barw.
$( "#red" ).slider( "value", 127 );

$( "#green" ).slider( "value", 127 );
$( "#blue" ).slider( "value", 127 );
440
Rozdzia 10.
jquery UI
Jazda prbna
Otwrz plik sightings_end.html w swojej ulubionej przegldarce. Nie zapomnij o przetestowaniu
suwakw za pomoc myszy i klawiatury (klawisze ze strzakami w lewo i w prawo powinny
powodowa przesuwanie si suwakw o wartoci ich przyrostw).
Kolorowe suwaki rzdz!

Nasze badania bd teraz
o wiele atwiejsze.
Uytkownicy mog teraz wprowadza

za pomoc suwakw, a kryptozoolodzydane
uzyskali o wiele lepsz kontrol nad
jakoci danych.
jeste tutaj 441
ostatni przycisk
I jeszcze pewien drobiazg...

Na naszej licie kontrolnej pozostaa jeszcze tylko jedna pozycja:
1.
2.
3.
Utworzenie suwakw liczbowych sucych do wprowadzania odlegoci od zwierzcia, jego

masy i wzrostu oraz szerokoci i dugoci geograficznej.
4.
5.
W rozdziale tym korzystae ju z przyciskw i robisz to,

poczwszy od rozdziau 1., tak wic zadanie to powinno
by dla Ciebie cakiem atwe!
Nie istniej
gupie pytania
P: W kolorowych suwakach,
ktre tworzylimy, korzystalimy

z ustawie rgb dla waciwoci
background_color. A gdybym tak
chcia zrobi suwak z wykorzystaniem
standardowej notacji szesnastkowej?
O:
Dla naszych suwakw staralimy

si utworzy tak elegancki i prosty
kod, jak to tylko byo moliwe. Jeli
potrzebujesz suwaka przyjmujcego dane
w szesnastkowym formacie koloru, masz
szczcie.
Zaznacz i skopiuj kod HTML, CSS i jQuery

z treci pliku i zapisz go jako nowy
dokument. Nie zapomnij powiza tego
dokumentu z waciwymi plikami CSS
i jQuery w swojej kopii pakietu jQuery.
Voil oto wybieraczka kolorw
korzystajca podczas wyboru barw
z liczb szesnastkowych.
P: Potrzebuj pola formularza
podpowiadajcego szukane sowa

podczas wpisywania ich przez
uytkownika. Czy w jQuery UI istnieje
na to jaki sposb?
O:
Moesz skorzysta z przykadowego

kodu prostej wybieraczki kolorw
zamieszczonego na stronie jQuery
UI. Otwrz w swojej przegldarce
nastpujc stron:
http://jqueryui.com/demos/
slider/#colorpicker
Tak! Jedn z najnowszych

funkcjonalnoci jQuery w chwili pisania
tej ksiki (sierpie 2011 roku) jest
widget autouzupeniania (autocomplete),
ktry wywietla podpowiedzi dla sw
wpisywanych przez uytkownika w polu
formularza.
Teraz odszukaj cze View Source

pod przykadem wybieraczki kolorw.
Skd bior si wyszukiwane wyrazy?

Udostpniasz je w tablicy JavaScriptu,
442
Rozdzia 10.
pod adresem URL albo za pomoc funkcji

wywoania zwrotnego mogcej pobiera
dane z serwera przy uyciu metod Ajaksa,
ktrych nauczye si w rozdziaach
8. i 9. Aby uzyska wicej informacji
na temat tego widgetu, odwied
stron demonstracyjn jQuery UI
pod nastpujcym adresem:
http://jqueryui.com/demos/autocomplete/
P: Czy jQuery UI udostpnia jaki

rodzaj walidacji formularzy?
O:
Nie. Niestety, jQuery UI nie

udostpnia walidacji formularzy, ale
istnieje wtyczka jQuery, ktra znakomicie
nadaje si do tego celu. Wtyczk t
moesz znale tutaj:
http://bassistance.de/jquery-plugins/
jquery-plugin-validation/
Wicej na jej temat opowiemy
w dodatku A. Zajrzyj tam, aby uzyska
wicej informacji.
jquery UI
Momencik. Oczywicie, e
poczwszy od rozdziau 1.,
korzystamy z przyciskw, ale
to jest przycisk jQuery UI oraz
element formularza HTML.
Suszna uwaga.
Uywalimy metody jQuery click oraz metody jQuery UI button, ale nie zrobilimy
wiele, jeli chodzi o wybieranie elementw formularza takich jak przycisk przesyania
danych. Oto krtki przewodnik dotyczcy wybierania takich elementw.
CELNE SPOSTRZEENIA
wiczenie
$(":input") wybiera wszystkie

pola formularza.
$(":text") wybiera wszystkie

elementy typu text.
$(":radio") wybiera wszystkie

pola formularza typu radio.
$(":checkbox") wybiera wszystkie

elementy typu checkbox.
$(":submit") wybiera wszystkie

pola formularza typu submit.
$(":reset") wybiera wszystkie

pola formularza typu reset.
$(":checked") wybiera wszystkie

pola formularza, ktre zostay
zaznaczone.
$(":selected") wybiera wszystkie

wybrane.
$(":enabled") wybiera wszystkie

udostpnione.
$(":disabled") wybiera wszystkie

pola formularza, ktre nie zostay
udostpnione.
$(":password") wybiera
wszystkie pola formularza, ktre s
przeznaczone na hasa.
Napisz pojedynczy wiersz kodu, ktry po dodaniu go do pliku my_scripts.js przeksztaci obecny
przycisk w przycisk zgodny z wybranym motywem jQuery UI.
jeste tutaj 443
rozwizanie wiczenia
Rozwizanie Nie zapomnij o dodaniu tego wiersza do pliku my_scripts.js i przetestowaniu go po otwarciu pliku
sightings_end.html w swojej ulubionej przegldarce.
wiczenia
$( "button:submit" ).button();
Jestemy do tego
stopnia zadowoleni z Twojej
pracy, e w nastpnym
rozdziale znowu wezwiemy
Ci do pomocy.
Wielkie dziki! Teraz

na pewno nie zaznamy
ani chwili spokoju!
444
Rozdzia 10.
jquery UI
wiczenie
Twj formularz wyglda wspaniale, ale na razie nie przesya adnych danych. Nauczye si jednak
dodatkowe
wszystkiego, co jest do tego potrzebne, w rozdziale 9., zastanw si wic przez chwil, jak mgby
doprowadzi ten stylowy formularz do stanu rzeczywistej funkcjonalnoci.
Folder end w kodzie, ktry pobrae do tego rozdziau, zawiera wszystko, czego potrzebujesz do
skonfigurowania i uruchomienia swojej aplikacji: pliki sightings.html, service.php oraz sightings.sql. Bdziesz
musia popracowa nad nimi troch samodzielnie, ale wanie na tym polega bycie programist WWW,
prawda? Doczylimy metody Ajaksa i formatu JSON, o ktrych uczye si w rozdziale 9., dziki czemu
formularz, ktry utworzye, bdzie mg przesya dane.
Ca konfiguracj musisz wykona we wasnym zakresie (czyli uruchomi skrypt sightings.sql albo
samodzielnie utworzy baz danych z polami z tego skryptu oraz doda metody Ajaksa i formatu JSON
do pliku my_scripts.js). Przed przejciem do rozdziau 11. bdziesz musia te doda kilka rekordw do
bazy danych. Jeli potrzebujesz odwieenia wiadomoci o MySQL, PHP i Ajaksie, nie krpuj si zajrze do
rozdziaw 8. i 9.
Do tego wiczenia nie ma rozwizania, ale jeli bdziesz mia jakiekolwiek problemy, zawsze
moesz wpa na forum tej ksiki pod adresem www.headfirstlabs.com i pogada z autorami
albo innymi czytelnikami.
jeste tutaj 445
Rozdzia 10.

swojego niezbdnika dodae jQuery UI.
I
U
y
r
e
u
jQ
Widget
alno do
dodaje funkcjon
y
r
kt
,
ik
dn
a
Samodzielny sk
etowej.
roci
aplikacji intern
wo czasu i up
zczdzi mnst i aktywne elementy
os
za
on
Ci
a
Pozwal
datne
dnoczenie przy
kod, tworzc je
a.
ik
kown
interfejsu uyt
tra
uery, k
teka jQ rodzaje
o
li
ib
b
a
Oficjaln ia trzy gwne go jQuery:
n
e
udostp dla podstawow ety.
g
k
id
e
z
w
c
i
y
t
w
rakcje
e
t
in
,
y
efekt
Widget button
button, ktra
Udostpnia metod
orzeniu
tw
zy
pr
a
jest pomocn
ntw takich
me
atrakcyjniejszych ele ia, przyciski
an
sy
ze
pr
ki
jak przycis
wyboru.
radiowe albo pola
Widget ker
datepic
je
nakazu
locie
epicker tworzenie w daty
t
a
d
a
d
u
u
r
S
o
J
Meto
b
i
y
terow
ci w
raz
interpre za z moliwo TML i CSS o
r
H
a
d
u
n
kod
kale
noci.
z mas
cznie n interaktyw
alnych
a
figurow
n
o
k
wbudow
o
nstw
e ma m
On tak
opcji.
446
Rozdzia 10.
Suwaki
Elementy
in
ktrymi m terfejsu uytkow
nika,
ona man
pomoc m
ip
yszy lub ulowa za
kontroluj
k
c tym sa lawiatury,
mym wpro
dane.
wadzane
Zawieraj
zdarze, one pi funkcji
ob
z
w celu p ktrych korzysta sugi
owizania
si
formularz
suwaka z
a
change o : create, start, s polem
raz stop.
lide,
11.M4XHU\Lb$3,
Obiekty, wszdzie obiekty

Ciekawe, co dostan
w tym roku? Mam
nadziej, e to
bdzie kolejny API...
Niezalenie od tego, jak bardzo utalentowanym programist jeste, sam nie

dasz sobie rady ze wszystkim... Zobaczylimy, jak mona docza wtyczki jQuery, takie
jak jQuery UI, albo nawigacj z wykorzystaniem kart, aby bez wikszego wysiku wzbogaca
programy pisane w jQuery. W celu wyniesienia naszych aplikacji na jeszcze wyszy poziom, dodania
do nich paru z naprawd niezych narzdzi dostpnych w Internecie oraz skorzystania z informacji
udostpnionych przez prawdziwych potentatw takich jak Google, Twitter albo Yahoo!
bdziemy jednak potrzebowa czego... wicej. Firmy te, i wiele innych, dostarczaj API (application
programming interfaces, czyli interfejsy programowania aplikacji) dedykowane dla swoich usug,
z ktrych moesz korzysta w swojej witrynie. W tym rozdziale przyjrzymy si podstawom API
i zastosujemy niezwykle popularny interfejs, jakim jest Google Maps API.
spotkanie kryptyd
Gdzie jest genera paskuda?

Dr Paterska i dr Glinka chcieliby doda do swojej strony
kilka atrakcyjnych funkcjonalnoci. Czy mylisz, e moesz
podoa temu zadaniu?
$2
Od:
#(0$#(1
%"#%.

(

(
4(
(
"
Temat: 3##%+
Cze!
przyjaniejsza dla uytkownikw, oraz za

Wielkie dziki za sprawienie, e nasza strona staa si
Odnotowalimy znaczcy wzrost liczby
uproszczenie zbierania danych dotyczcych obserwacji.
acje, ktre gromadzimy.
inform
za
odwiedzin i z ekscytacj czekamy, eby si zabra
w szerokiemu gronu uytkownikw. Wiele
Mielimy wiele prb o udostpnienie naszych archiw
ku z czym chcielibymy udostpni im
zwiz
w
osb interesuje si danymi na temat obserwacji,
.
sposb na przegldanie tego, co udao nam si zebra
Oto, czego potrzebujemy:
obserwacji i sprawdzenia informacji z ni

1) Chcielibymy mie moliwo wybrania dowolnej
ibymy zobaczy na mapie Google dane
chciel
dy
krypty
zwizanych. Obok informacji na temat
o szerokoci i dugoci geograficznej.
e, chcielibymy mie moliwo kliknicia
2) Kiedy na mapie Google zostanie wywietlone miejsc
wacji.
i przeczytania dokadniejszych informacji na temat obser
zwierzcia z listy i wywietlania wszystkich
3) Chcielibymy mie moliwo wybierania rodzaju
Chcielibymy te zobaczy obserwacje
zwierzt okrelonego rodzaju z naszej bazy danych.
e punkty i dokadniej je zbada. Czy
na mapie Google, co pozwolioby nam odszuka gorc
uytkownicy mogli zobaczy wicej
eby
ne,
aktyw
te punkty oraz lista zwierzt mogyby by
informacji na ich temat?
tkie potrzebne dane.
Nie prosimy o duo, prawda? Przecie mamy ju wszys
Czekamy na wiadomo od Was.
-Dr Glinka i dr Paterska
kryptozoolodzy.org
448
Rozdzia 11.
jquery i API
Powinno nam pj jak po male. Wyglda

na to, e kryptodoktorzy prosz zaledwie
o kilka usprawnie.
Jzek: Mwisz o mapie Google, ktr mamy zaprogramowa?

Franek: Tak, to cakiem atwe
Kuba: atwe? Przecie oni chc caej mapy Google!
Franek: No.
Kuba: Wiele punktw na mapie po jednym dla kadej
z kryptyd a wszystkie aktywne i pokazujce wicej informacji
Franek: No tak. Chyba wiem, jak to zrobi.
Kuba: Do tego lista i niestandardowe kliknicie, ktre
bdzie wspdziaa z punktami i pokazywa na mapie dymki
z dokadniejszymi informacjami.
Kuba
Jzek
Franek: Taaa Ech, chyba nie jestem pewien, jak to zrobi.
Franek
Jzek: O to si nie martw. Ludzie od Google Maps udostpnili

API, z ktrego moemy skorzysta, eby ukoczy nasze zadanie.
Kuba: AP co?
Franek: API. To skrt od application programming interface, co
oznacza interfejs programowania aplikacji. To wanie dziki
niemu firmy takie jak Google, Netflix albo Yahoo! pozwalaj
nam korzysta na naszych stronach z ich atrakcyjnych narzdzi.
Kuba: Brzmi niele, ale czy to nam da te wszystkie dymki i co
tam jeszcze mamy do pokazania na mapie?
Jzek: Powinno. Moe dobrze by byo spojrze na API Google
Maps, eby dowiedzie si, jak dziaa.
jeste tutaj 449
wewntrz API
API Google Maps

W przypadku kadego API, z ktrego chcesz skorzysta, moesz zapozna si z dokumentacj oraz otrzyma
on-line przykadowy kod. My pobralimy nasz przykad spod adresu http://code.google.com/apis/maps.
var map;
function initialize() {
@3 3&WFWW&3# 3 W--
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToNewYork, 3000);
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
}
function moveToNewYork() {
@3 F RFWW&3# 3 W-----
map.setCenter(NewYork);
}
OK. Rozpoznaj tu kilka

zmiennych i funkcji, ale co to
takiego ta caa reszta?
To kod Google.
Nie jest tak le, jak na to wyglda. Przyjrzyjmy si
troch dokadniej temu, co si dzieje w kodzie.
450
Rozdzia 11.
jquery i API
API uywaj obiektw

W rozdziale 6. tworzylimy w JavaScripcie wasne obiekty z waciwociami oraz metodami,
w ktrych przechowywalimy informacje i z ktrych korzystalimy wedle wasnego uznania.
Wiele firm, takich jak Google, Netflix, Microsoft i Yahoo!, take tworzy obiekty API, ktre
pozwalaj nam dziaa na ich danych. Jeeli musisz sobie odwiey wiadomoci, nie wahaj si
zajrze do rozdziau 6., aby ponownie pozna obiekty oraz ich dziaanie.
Zadeklaruj zmienne.
Przypisz t zmienn
do
obiektu Google LatLng nowego
.
var map;
@3 3&WFWW&3# 3 W--
var myOptions = {
zoom: 13,
W parametrach naszego
obiektu przeka wartoci
szerokoci i dugoci
geograficznej.
Utwrz tablic przechowujc

niektre z opcji mapy.
center: myLatlng,
Zmiennej
map nadaj
warto
nowego
obiektu
Google Maps.
Mapa bdzie znajdowa si

w elemencie map_canvas.
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToNewYork, 3000);
});
Zadeklaruj zmienn,
ktra bdzie obiektem
klasy Marker.
Dodaj do naszej mapy

Google suchacza zdarze.
var marker = new google.maps.Marker({

position: myLatlng,
W parametrach
przeka wartoc
map: map,
i.
title:"Hello World!"
});
Obiekt LatLng, ktry

zadeklarowalimy powyej
Obiekt Map, ktry zadeklarowalimy

powyej
Zadeklaruj funkcj wywoujc

kolejny kod Google.
function moveToNewYork() {
Utwrz jeszcze jeden

obiekt LatLng.
@3 F RFWW&3# 3 W-----

map.setCenter(NewYork);
}
Przeka mapie, gdzie

ma si wycentrowa.
jeste tutaj 451
dlaczego korzysta z obiektw?

Tak wic API robi wszystko za pomoc
obiektw? Dlaczego mielibymy korzysta
z obiektw utworzonych przez kogo innego?
Poniewa dziki temu wszystko dziaa szybciej.
Jak ju widzielimy w rozdziale 6., obiekty oferuj inteligentniejsze sposoby przechowywania
danych. Z obiektw korzystasz, gdy musisz zapisa wiele zmiennych dotyczcych okrelonej
rzeczy. API to po prostu seria konstruktorw, ktre pozwalaj Ci tworzy wasne instancje
cudzych obiektw. A kiedy masz ju instancje, moesz w swoim kodzie uywa wszystkich
waciwoci i metod zwizanych z tymi obiektami!
Zoono zwizana z tworzeniem aplikacji z mapami, ktre mog by uywane przez
kadego, jest powodem, dla ktrego Google korzysta z obiektw w swoim API. W ten sposb
interfejs moe generowa obiekty z rnymi metodami i waciwociami dla wszystkich
elementw, jakie bd Ci potrzebne do utworzenia mapy.
W kodzie na poprzedniej stronie moesz zobaczy, e obiekt map ma waciwoci zoom,
center i mapTypeId oraz o wiele wicej takich, ktrych nie pokazano. Ma on take wiele
metod, na przykad setCenter.
Zrb to!
Utwrz now stron o nazwie display_one.html i zapisz

j w folderze z projektami do tego rozdziau.
<!DOCTYPE html>
<html>
<head>
&GV ZW&\?38 F3LSR #?K&G
display_one.html
<link type="text/css" href="style/form.css" rel="stylesheet"/>
<link type="text/css" href="jquery-ui-1.8.16.custom/css/sunny/jquery-ui-1.8.16.custom.css" />

</head>
<body>
<div class="ui-widget-header ui-corner-top form_pad">
%-GVR38 F3LSR #?K%-G
</div>
<div class="ui-widget-content form_pad">
<div id="map_canvas"></div>
Utwrz miejsce
dla naszej mapy.
Docz API Google Maps.
</div>
L # L%#+KK3#WW&LK3#K3#KS 3&GKL #G
<script src="scripts/maps.js"></script>
</body>
</html>
452
Rozdzia 11.
Docz nowy plik maps.js.
Docz bibliotek
jQuery.
jquery i API
Docz mapy Google do swojej strony

Najpierw zrb kopie wszystkich plikw z koca poprzedniego rozdziau. W nowym projekcie bdziemy korzysta z tych
samych plikw, tak wic rwnie dobrze moemy rozpocz od miejsca, do ktrego ostatnio dotarlimy. Cay ten kod, razem
z plikiem display_one.html, da nam dwie nowe i wane rzeczy:
sekcj z identyfikatorem map_canvas,
kod API Google Maps dziki dodaniu wiersza <script type="text/javascript" src="http://maps.google.
LK3#K3#KS 3&GKL #G.
Aby doczy map Google do strony, bdziesz musia utworzy plik maps.js i doda do niego funkcj
wywoujc kod API rysujcy na stronie map.
Magnesiki z kodem
Poukadaj magnesiki, aby dokoczy kod funkcji o nazwie initialize. Funkcja ta utworzy
now instancj obiektu map Google Maps z uyciem parametrw zdefiniowanych w kodzie. Ten
nowy obiekt map zostanie nastpnie zastosowany w elemencie strony map_canvas. Ponadto
zaktualizuj istniejcy plik form.css z uwzgldnieniem definicji stylu dla pojemnika mapy.
#map_canvas {
map;
float
_____________ :left;
HYBRID
zoom
%W%+#,
width: ____________
$(document).ready. ____________{
var _____________
function ______________{
var latlng = new google.maps.LatLng. ____________________;
var mapOpts = {
form.css
_____________: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId._____________
};
map = ___________google.maps.Map(document.getElementById(_____________), mapOpts);

}
initialize();
});
-----
initialize()
maps.js
"map_canvas"
new
#,
(function()
jeste tutaj 453

Poukadaj magnesiki, aby dokoczy kod funkcji o nazwie initialize. Funkcja ta utworzy
now instancj obiektu map Google Maps z uyciem parametrw zdefiniowanych w kodzie. Ten
nowy obiekt map zostanie nastpnie zastosowany w elemencie strony map_canvas. Ponadto
zaktualizuj istniejcy plik form.css z uwzgldnieniem definicji stylu dla pojemnika mapy.
#map_canvas {
_____________
:left;
float
%W%+#,
width: ____________
#,
(function()
$(document).ready. ____________{
var _____________
map;
initialize()
function ______________{
var latlng = new google.maps.LatLng. ____________________;
-----
var mapOpts = {
form.css
_____________:
13,
zoom
center: latlng,
HYBRID
mapTypeId: google.maps.MapTypeId._____________
};
"map_canvas"
new
map = ___________google.maps.Map(document.getElementById(_____________),
mapOpts);
}
initialize();
});
maps.js
Nie istniej
gupie pytania
P: A co z obiektem LatLng i waciwoci

mapOpts?
O:
Wicej informacji na temat obiektw

oraz metod API i nie tylko znajdziesz na
stronie http://code.google.com/apis/maps/
documentation/javascript/reference.html. Znajduj
si tam przykadowe kody i dodatkowe szczegy
dotyczce rnych obiektw i metod, z ktrymi
przyjdzie Ci mie do czynienia.
454
Rozdzia 11.
P: Czy Google Maps to moja jedyna opcja

przy tworzeniu mapy?
O:
Zdecydowanie nie, chocia jest ona

chyba najpopularniejsza i wanie dlatego
z niej korzystamy. Inne firmy, takie jak Yahoo!,
Microsoft, MapQuest albo OpenLayers, rwnie
oferuj API do prezentacji map.
jquery i API
Jazda prbna
Zaktualizuj swj plik maps.js funkcj initialize, ktr uoye z magnesikw. Pamitaj te
o uwzgldnieniu pliku maps.js w kodzie strony display_one.html. Nastpnie otwrz j w swojej
przegldarce. Cay kod powinien by uruchomiony na Twoim serwerze, w zwizku z czym w pasku adresu
powinien by widoczny URL rozpoczynajcy si od http://, a nie lokalna cieka dostpu do pliku.
To wietnie, e wstawienie mapy

na stron byo tak atwe, ale
nie widz tu adnych informacji
o kryptydach. Musimy je pobra
z bazy danych, zgadza si?
Wanie.
W rozdziale 9. nauczye si, jak za pomoc technologii jQuery, Ajax,
JSON, PHP i MySQL pobiera dane z bazy MySQL. Chocia lista
uytych skadowych jest do duga, to jednak otrzymalimy dokadnie
to, czego chcielimy. Zobaczmy, jak moemy ponownie zastosowa te
rozwizania tutaj.
jeste tutaj 455
niektrzy z naszych znajomych
Odczytywanie danych w formacie JSON za pomoc SQL-a i PHP

W rozdziale 9. pokazano, jak instrukcja SQL select moe odczytywa informacje
z bazy danych, dziki czemu aplikacja PHP moe przeksztaci je na format JSON
i za pomoc Ajaksa przesa je na nasz stron.
Nauczye si te, jak uywa Ajaksa w celu pobierania z pliku PHP informacji
zakodowanych w formacie JSON. W przypadku PHP zwrcenie danych JSON
byo atwe funkcja json_encode, ktra przyjmowaa tablic, zwracaa dane
w formacie JSON, dziki czemu kod jQuery mg na nich dziaa.
$my_array = array();
array_push($my_array, array('my_key' => 'my_val'));
echo json_encode($my_array);
Serwer WWW przetwarza dania
strony, uruchamia skrypty PHP
i zwraca zawarto HTML.
6HUZHU
Dane
%D]DGDQ\FK0\64/
3U]HJOGDUND
<? php
>?
6HUZHU:::
6HUZHUED]\
GDQ\FK
JSON
jest
Baza danych czsto staci
po
przechowywana w ardym,
plikw na dysku tw e musi
chocia niekonieczni
tak by.
SELECT NAZWA_KOLUMNY1, NAZWA_KOLUMNY2 FROM NAZWA_TABELI order by NAZWA_KOLUMNY1 ASC
W tym rozdziale cay kod PHP i SQL napisalimy za Ciebie. Jeli tylko masz baz
danych MySQL z rozdziau 10., moesz przej dalej! Pozostay kod SQL i PHP
znajduje si w pliku do pobrania dla biecego rozdziau; moesz go spokojnie
uruchomi na swoim serwerze. Cao kodu PHP oraz SQL mona pobra pod
adresem ftp://ftp.helion.pl/przyklady/jquerg.zip.
456
Rozdzia 11.
jquery i API
Magnesiki z kodem
Poukadaj magnesiki w taki sposb, aby zaktualizowane pliki display_one.html, forms.css oraz
maps.js pobieray dane w formacie JSON i wywietlay je na ekranie. Dodaj elementy div i ul
do przechowywania danych, CSS do nadania stylu listom oraz funkcj pobierajc dane za
porednictwem formatu JSON, ktra wstawi na list kad z kryptyd.
function getAllSightings(){
!W @L#%#3LW&&W%WAAAAAAAAAAAAAA
if (_________________length > 0) {
$("#sight_list")_________;
maps.js
________(json.sightings,function() {
@3 33+%?3?Z3S+%#
var $li = $("<li />");
______________
"sightings"
"map_canvas"
$li.addClass(_____________);
json.sightings.
$li.attr('id', this['id']) ;
$li.appendTo(______________);
});
}
#sight_nav{
li.sightings:hover {
float:left;
});
$li.html(info);
}
ul#sight_list{
width:150px;
form.css
padding:0px;
margin:0px;
.empty()
<div id= ______________></div>
<div id="sight_nav">
li.sightings {
<ul id= ______________>
$.each
#3??W+#,
background:#7B7382;
</ul>
border:1px #000 solid;
</div>
color:#fff;
</div>
________________
}
list-style:none;
________________
display_one.html
background:#eee;
"sight_list"
"#sight_list"
color:#000;
function(json)
jeste tutaj 457

Poukadaj magnesiki w taki sposb, aby zaktualizowane pliki display_one.html, forms.css oraz
maps.js pobieray dane w formacie JSON i wywietlay je na ekranie. Dodaj elementy div i ul
do przechowywania danych, CSS do nadania stylu listom oraz funkcj pobierajc dane za
porednictwem formatu JSON, ktra wstawi na list kad z kryptyd.
!W @L#%#3LW&&W%WAAAAAAAAAAAAAA
function(json)
if (_________________length
> 0) {
json.sightings.
$("#sight_list")_________;
.empty()
maps.js
________(json.sightings,function()
{
$.each
@3 33+%?3?Z3S+%#
var $li = $("<li />");
$li.html(info);
______________
"sightings"
$li.addClass(_____________);
#sight_nav{
$li.appendTo(______________);
"#sight_list"
});
float:left;
}
ul#sight_list{
width:150px;
});
padding:0px;
margin:0px;
}
li.sightings {
#3??W+#,
background:#7B7382;
"map_canvas"
<div id= ______________></div>
border:1px #000 solid;
color:#fff;
"sight_list"
<ul id= ______________>
list-style:none;
________________
</ul>
}
</div>
________________
li.sighting
s:hover {
</div>
background:#eee;
color:#000;
display_one.html
form.css
458
Rozdzia 11.
jquery i API
Jazda prbna
Zaktualizuj swj plik maps.js funkcj getAllSightings, ktr wanie ukoczye.
Ponadto dodaj jej wywoanie przy kocu funkcji initialize. Nastpnie otwrz
w przegldarce plik display_one.html. Zakadamy przy tym, e w rozdziale 10. dodae
do swojej bazy kilka zwierzt. Jeli nie, zrb to teraz. Pamitaj, e cay kod powiniene
uruchamia na serwerze WWW, tak wic adres URL powinien zawiera http://, a nie
ciek dostpu do lokalnego pliku.
adnie to wyglda i w ogle,

ale ten kod w dalszym cigu nic
nie wywietla na naszej mapie.
Susznie. Musimy mie
moliwo wstawiania informacji
o kryptydach na map.
Google Maps udostpnia bardzo prost
metod, ktra to robi. Spjrzmy, jak
ona dziaa.
jeste tutaj 459
zrb sobie marker
Punkty na mapie to markery

Kiedy zajdzie potrzeba umieszczenia punktw na mapie, Google
take moe to zrobi, z tym e nie nazywa on ich punktami, lecz
markerami. Markery s obiektami tak jak pozostae elementy API
Google Maps i maj swoje wasne metody i waciwoci, na ktre
mona oddziaywa i ktrymi mona manipulowa.
Zdefiniuj nowy obiekt LatLng

z API Google Maps.
Jako parametry przeka waciw

szeroko i dugo geograficzn.
@3 3 WFWW&3# 3 W---
wie my_marker
Zdefiniuj obiekt o naz u Google Marker.
ekt
obi
cj
tan
bdcy ins
Wywoaj konstruktor obiektu

Google Marker.
var my_marker = new google.maps.Marker({

position: myLatlng,
y
Zdefiniowany wczeniej obiekt klas
LatLng jako parametr
Wstpnie
map: map,
zdefiniowany obiek
t
map. Widziae &+ZX^3 R ZS9R?XF?Z3JX
go ju wczeniej
w akcji.
ujce kolejne
});
menty konfigur
Przeka argu iektu my_marker.
ob
waciwoci
markera,
Ustalamy tu pooenie go doda,
ey
nal
iej
jak
do
map,
oraz tytu punktu.
Cze! Jestem markerem. Chtnie

zamarkuj... to jest zawr z Tob
znajomo. Na pewno ju gdzie
mnie widziae!
460
Rozdzia 11.
jquery i API
Zaostrz owek
Zaktualizuj swoj funkcj getAllSightings, dodajc do pozycji listy suchacza zdarzenia kliknicia, zanim
jeszcze ta pozycja znajdzie si na licie. Zdarzenie to powinno wywoywa funkcj o nazwie getSingleSighting
pobierajc jeden parametr identyfikator wskazanej klikniciem obserwacji. Ta nowa funkcja powinna pobra
informacj o kliknitej pozycji i wstawi j na map w postaci markera, korzystajc z jej waciwoci z szerokoci
i dugoci geograficzn.
!W @L#%#3LW&&W%W9LS
if (json.sightings.length > 0) {
$("#sight_list").empty();
$.each(json.sightings,function() {
@3 33+%?3?Z3S+%#
var $li = $("<li />");
$li.html(info);
$li.addClass("sightings");
$li.click(function(){
______________________ this['id'] );
});
$li.appendTo("#sight_list");
});
}
});
}
function getSingleSighting(______________________){
!W @L#%#3LWW&W%W??9LS
__________________________________
var loc = new google.maps.LatLng(this['lat'], this['long']);
var my_marker = new google.maps______________________({
______________________loc,
map: map,
title:this['type']
});
_________________setCenter(loc, 20);
});
}
});
}
maps.js
jeste tutaj 461
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Po dokoczeniu kodu elementy Twojej listy bd aktywne dane dotyczce

kliknitej kryptydy bd pobierane i umieszczane na mapie.
!W @L#%#3LW&&W%W9LS
$("#sight_list").empty();
@3 33+%?3?Z3S+%#
var $li = $("<li />");
$li.html(info);
$li.click(function(){
getSingleSighting( this['id'] );
});
});
}
});
}
function getSingleSighting( id ){
!W @L#%#3LWW&W%W??9LS
var loc = new google.maps.LatLng(this['lat'], this['long']);

var my_marker = new google.maps .Marker({
position: loc,
map: map,
title:this['type']
});
map. setCenter(loc, 20);
});
}
});
}
462
Rozdzia 11.
maps.js
jquery i API
Jazda prbna
Zaktualizuj swj plik maps.js funkcjami getAllSightings oraz getSingleSighting,
ktre wanie ukoczye. Nastpnie otwrz plik display_one.html w przegldarce
tak jak poprzednio w pasku adresu powinno by http://.
No, no! Robi wraenie. A co z nastpn

funkcj, o ktr prosilimy? Wiecie... eby
wiele obserwacji byo wywietlanych
w tym samym czasie.
Zrealizowalimy ju dwa pierwsze wymagania, rzumy wic
okiem na ostatni rzecz, o ktr prosili doktorzy.
zwierzcia z listy i wywietlania

3) Chcielibymy mie moliwo wybierania rodzaju
danych. Chcielibymy te zobaczy
j
wszystkich zwierzt okrelonego rodzaju z nasze bazy
ka gorce punkty i dokadniej je
odszu
nam
olioby
obserwacje na mapie Google, co pozw
aktywne, eby uytkownicy mogli
zbada. Czy te punkty oraz lista zwierzt mogyby by
zobaczy wicej informacji na ich temat?
jeste tutaj 463
gotowa do wysmaenia lista zwierzt
Lista kontrolna funkcji wywietlajcej wiele obserwacji

Oto, co naley zrobi, eby zrealizowa ostatnie zadanie:
1. Naley utworzy list rozwijan z rodzajami zwierzt (pobranymi z bazy danych).
2. Kiedy lista rozwijana zmieni si, naley pobra z bazy danych list obserwacji, ktra odpowiada wybranemu
rodzajowi zwierzcia.
3. Naley wywietli wszystkie zwrcone z bazy obserwacje na licie i mapie.
4. Zarwno lista, jak i wskaniki na mapie powinny by aktywne, dziki czemu uytkownicy bd mogli uzyska wicej
informacji w postaci widocznych na mapie dymkw.
Kod
gotowy do
wysmaenia
Utwrz now stron o nazwie display_type.html i zapisz j w tym samym folderze,

w ktrym znajduje si Twj projekt. Plik ten bdzie wywietla list dostpnych rodzajw
zwierzt. Po dokonaniu wyboru wszystkie obserwacje zwierzcia danego typu zostan
wywietlone na mapie. Struktura i styl tej nowej strony s bardzo podobne do strony
wczeniejszej z wyjtkiem dodanego tu elementu select z identyfikatorem ddlTypes.
<!DOCTYPE html>
<html>
<head>
&GV ZW&\?38 F3LSR #?K&G
<link type="text/css" href="style/form.css" rel="stylesheet" />
<link type="text/css" href="jquery-ui-1.8.16.custom/css/sunny/
jquery-ui-1.8.16.custom.css"/>
</head>
<body>
<div class="ui-widget-header ui-corner-top form_pad">
%-GVR38 F3LSR #?K%-G
</div>
<div id="map_canvas"></div>
anie
Dodaj list rozwijan, ktra zost
.
rzt
zwie
i
ajam
rodz
na
enio
wyp
<select id="ddlTypes">
#@3&9GV ZF8 3K#G
</select>
<ul id="sight_list"></ul>
</div>
Docz API Google Maps.
</div>
L # L%#+KK3#WW&LK3#K3#KS 3&GKL #G
<script src="scripts/maps.js"></script>
Docz bibliotek jQuery.
</body>
cz plik maps.js.
Do
</html>
464
Rozdzia 11.
display_type.html
jquery i API
Magnesiki z kodem
Poukadaj magnesiki z kodem, aby dokoczy funkcj getAllTypes. Funkcja ta bdzie odwoywa si do
pliku service.php (ktry jest doczony do plikw, jakie pobrae do biecego rozdziau) w celu uzyskania
z bazy danych listy rnych rodzajw zwierzt. Nastpnie rodzaje te powinny zosta dodane do listy rozwijanej
o identyfikatorze ddlTypes. Napisz take suchacza zdarze dla tej listy, ktry bdzie czeka na zdarzenie
change i wywietli alarm z wybran przez uytkownika wartoci. Na koniec poniewa w naszych dwch
plikach HTML korzystamy z tego samego pliku maps.js dodaj do funkcji initialize logik sprawdzajc,
czy lista rozwijana istnieje. Jeli tak, wywoaj funkcj getAllTypes; jeli nie, funkcj getAllSightings.
function initialize(){
.
.
map = new google.maps.Map(document.getElementById(________________), mapOpts);
if ( $('#ddlTypes').length ) {
___________________
}else{
___________________
}
}
function getAllTypes(){
!W @L#%#3LWW%W#9LSA#
if (___________________creature_types.length > 0) {
$.each(json_types.creature_types,___________________
var info = this['type'];
var $li = ___________________
$("<option />");
$li.html(info);
$li___________________("#ddlTypes");
getAllSightings();
});
}
});
"map_canvas"
getAllTypes();
.appendTo
json_types.
__________________change(function() {
function() {
if($(this).val() != ""){
alert( $(this).val() );
}
$('#ddlTypes').
});
maps.js
jeste tutaj 465

Teraz masz ju list rozwijan skojarzon z map Google, funkcj pobierajc z bazy dane
o wybranych rodzajach zwierzt (w formacie JSON) oraz komunikat alarmowy pokazujcy,
jaki rodzaj zwierzcia zosta wybrany.
function initialize(){
.
.
map = new google.maps.Map(document.getElementById(______________),
mapOpts);
"map_canvas"
if ( $('#ddlTypes').length ) {
Aby sprawdzi, czy dany
element istnieje, uyj
waciwoci .length.
getAllTypes();
}else{
getAllSightings();
Za pomoc formatu JS
pobierz z bazy danych ON i PHP
rodzaje
zwierzt.
}
function getAllTypes(){
!W @L#%#3LWW%W#9LSA#

json_types.
if (______________creature_types.length
> 0) {
$.each(json_types.creature_types,_____________
function() {
var info = this['type'];
Ustaw tekst dla var $li = _________________
$("<option />");
elementu listy
$li.html(info);
rozwijanej.
.appendTo
$li___________("#ddlTypes");
});
}
});
}
Docz wybrany element

do listy rozwijanej.
Do listy rozwijanej
dodaj suchacza
zdarzenia change.
$('#ddlTypes').
_________________change(function()
{
if($(this).val() != ""){
alert( $(this).val() );
}
});
Warto wybranego
elementu listy.
maps.js
466
Rozdzia 11.
jquery i API
Jazda prbna
Zaktualizuj swj plik maps.js, dodajc do niego funkcj getAllTypes i suchacza zdarzenia change
dla listy rozwijanej. Uzupenij te funkcj initialize, korzystajc z tej nowej logiki. Nastpnie
otwrz plik display_one.html w swojej przegldarce, tak jak poprzednio za pomoc http://.
I o to chodzi! Twoja mapa bdzie gotowa w mgnieniu oka! Pora wykreli

z naszej listy dwa zadania.
jeste tutaj 467
nie tak szybko
Hola! Nie tak szybko! Kiedy

wybieram pozycj z listy rozwijanej,
nie widz zwierzt, tylko okno
alarmowe. Chyba nie uporalimy si
jeszcze z drugim zadaniem!
No i przyapaa nas.
Musimy tak zaktualizowa nasz kod, ebymy mogli
pobiera informacje z bazy danych, kiedy zmieni si
lista rozwijana, zamiast po prostu pokazywa w oknie
alarmowym rodzaj zwierzcia.
Dopiero wtedy bdziemy mogli zaznaczy je na licie.
Kiedy ju to zrobimy, powinnimy da rad take
trzeciemu zadaniu. Przygotuj si za chwil rzucimy si
na gbok wod i poskadamy wszystko razem.
Dugie wiczenie
Uzupenij puste wiersze kodu, aby utworzy funkcj getSightingsByType. Funkcja ta powinna przyjmowa
jeden parametr: rodzaj zwierzcia, ktre ogldasz. Powinna ona te pobiera dane w formacie JSON, przechodzi
w ptli przez wszystkie zwrcone zwierzta (jeli jakie s) i dla kadego z nich umieszcza punkt na mapie.
Oprcz tego utwrz dwie zmienne globalne tablic o nazwie markerArray oraz nowy obiekt Google Maps
klasy LatLngBounds o nazwie bounds. Napisz te funkcj, ktra przed dodaniem nowych punktw wyczyci
stare, jeli ulega zmianie lista rozwijana.
var markersArray = [];
var bounds = new google.maps________________;
function getSightingsByType(type){
!W @L#%#3LWW%W###9LS
{
if (_________sightings.length > 0) {
$('#sight_list').empty();
var loc = new google.maps______________(this['lat'], this['long']);
var opts = {
map: map,
position:________________
};
468
Rozdzia 11.
jquery i API
var marker = new google.maps________________(opts);

markersArray.push(________________);
var $li = $("<li />");
!&%&33+%?3?Z3S+%#
$li________________("sightings");
bounds.extend(loc);
});
map.fitBounds(bounds);
}
});
}
$('#ddlTypes').change(function() {
if($(this).val() != ""){
clearOverlays();
________________( $(this).val() );
}
});
function ________________ {
if (markersArray) {
3 R 3
markersArray[i].setMap(null);
}
markersArray.length = 0;
bounds = null;
bounds = new________________LatLngBounds();
}
}
maps.js
jeste tutaj 469

Dugie wiczenie
rozwizanie
Po dodaniu dwch nowych zmiennych globalnych i kilku funkcji Google Maps moesz ju wstawia na
map i usuwa z niej markery, kiedy zmieni si lista rozwijana. Kiedy do mapy dodawane s markery, s
one umieszczane te w tablicy markerArray i uywane do poszerzenia granic mapy. W ten sposb za
pomoc funkcji fitBounds mapa automatycznie zmienia swoje rozmiary, aby obj wszystkie punkty.
Z kolei funkcja getSightingsByType wywoywana obecnie przy kadej zmianie listy rozwijanej
dodaje markery do mapy, a zaobserwowane zwierzta do listy widocznej na stronie.
var markersArray = [];

var bounds = new google.maps .LatLngBounds() ;
Nowy obiekt klasy

LatLngBounds
function getSightingsByType(type){
!W @L#%#3LWW%W###9LS
{
Pobierz dane za pomoc
formatu JSON.
if ( json.sightings.length > 0) {
var loc = new google.maps .LatLng (this['lat'], this['long']);

var opts = {
map: map,
position: loc
};
Dla kadego punktu
na mapie utwrz nowy
obiekt klasy Marker.
var marker = new google.maps .Marker(opts);

markersArray.push(marker);
var $li = $("<li />");
!&%&33+%?3?Z3S+%#
$li.addClass ("sightings");
bounds.extend(loc);
});
Do naszego obiektu
bounds dodaj biece
wartoci szerokoci
i dugoci geograficznej.
map.fitBounds(bounds);
}
});
}
470
Rozdzia 11.
Mapa uyje zmiennej bounds

w celu takiego ustalenia
granic, eby pokazane zostay
wszystkie markery.
jquery i API
$('#ddlTypes').change(function() {
if($(this).val() != ""){
clearOverlays();
Zanim pobierzemy dane

potrzebne do umieszczenia
markerw na mapie, usuniemy
wszystkie stare markery.
getSightingsByType ( $(this).val() );
Przeka naszej
w parametrze funkcji
wa
listy rozwijane rto
j.
});
function clearOverlays() {
if (markersArray) {
3 R 3
markersArray[i].setMap(null);
}
Usu obiekt Marker

z mapy.
markersArray.length = 0;
bounds = null;
bounds = new .google.maps. LatLngBounds();
}
Zresetuj take
zmienn bounds.
maps.js
Porady maniaka
Wanie doczylimy do kodu funkcj o nazwie clearOverlays,

ktra usuwa wszystkie dodane wczeniej markery przed dodaniem
nowych. Google nazywa powok (ang. overlay) wszystko, co jest
dodawane do mapy; moe to by marker, linia, amana, wielokt
albo jeden z wielu innych typw obiektw.
jeste tutaj 471
jazda prbna
Jazda prbna
Zaktualizuj swj plik maps.js nowym kodem, ktry wanie utworzye. Nastpnie otwrz
w przegldarce stron display_type.html i wybierz z listy kilka rnych zwierzt.

4. Zarwno lista, jak i wskaniki na mapie powinny by aktywne, dziki czemu uytkownicy bd mogli uzyska
wicej informacji w postaci widocznych na mapie dymkw.
To ju blisko... jeszcze tylko jedno zadanie!
472
Rozdzia 11.
jquery i API
WYSIL
SZARE KOMRKI
Wiesz ju, jak programowa w jQuery aktywne elementy. Jak ta wiedza moe Ci pomc
w zrealizowaniu ostatniego zadania z listy?
Nie istniej
gupie pytania
P:
Czy mog bezpatnie korzysta

z API Google Maps na swojej stronie?
O:
Tak! Google za darmo udostpnia

swj API kademu, kto chciaby go
uy prywatnie lub komercyjnie jeli
tylko zaakceptuje on warunki korzystania
z serwisu.
P: Nie wiem, czy akceptuj te
warunki. Gdzie mog je znale?
O:
eby przeczyta pen wersj

warunkw korzystania z serwisu, po
prostu przejd na stron http://www.
google.com/apis/maps/terms.html.
P: Wanie tak aplikacj chciabym

napisa. Czy API Google Maps bdzie
dla mnie odpowiedni?
O: Jeli piszesz aplikacj na platform
z Androidem albo na iOS, to tak. Google

udostpnia dedykowane frameworki dla
obu tych platform, ktre moesz doczy
do swoich aplikacji. Jeli programujesz dla
innej platformy mobilnej, to jeszcze nie
ma dla niej dedykowanego frameworka
i bdziesz musia korzysta z takiej samej
wersji jak w swojej witrynie.
P: Pena wersja Google Maps potrafi
P: Czy API Google Maps obejmuje
pokazywa trasy dojazdw. Czy ten

API te potrafi to robi?
O: Niezupenie, ale prawie cay. Jest
Nie, w tym API nie mona

tego zrealizowa. Istnieje inny API
wyprodukowany przez Google o nazwie
Google Directions API, za pomoc ktrego
mona wyznacza trasy dojazdw.
cay wiat?
tylko kilka krajw, ktre nie zostay

uwzgldnione. Na stronie API Google
Maps znajdziesz ich list.
P: Czy za pomoc API Google
Maps mog pokazywa mapy na

urzdzeniach mobilnych?
O:
Tak, moesz. Podczas wydawania

tej ksiki opublikowano wersj 3. API
Google Maps. Zostaa ona opracowana
ze wsparciem dla urzdze mobilnych,
na ktrych mona uruchamia JavaScript.
O:
P: Co jeszcze wchodzi w skad

rodziny API Google Maps?
O: Zarwno API Directions, jak
i Geocoding nale do podgrupy o nazwie

Maps API Web Service. Ponadto w tej
podsekcji s jeszcze Distance API, Elevation
API oraz Places API.
P: To tych podsekcji jest wicej?

O: Tak. Jest take Static Maps API dla
przegldarek, ktre nie obsuguj w peni

jzyka JavaScript, Maps API dla Flasha,
a nawet Earth API, ktry umoliwia
pobranie na stron przegldarki Google
Earth, dziki czemu mona oglda
trjwymiarowe obrazy Ziemi oraz
odbywa wirtualne podre i rysowa
ksztaty na pokazywanym terenie. Earth
API wymaga jednak zainstalowania
wtyczki Google Earth.
P:
P: A co ze znajdowaniem miejsca
Czy poza JavaScriptem dostan

API te dla innych jzykw?
O: Co takiego nazywa si
Tak! Istnieje ogromna liczba

dostpnych API niektre bezpatne,
inne wymagajce licencji. Jeli potrzebujesz
okrelonej funkcjonalnoci, a nie chcesz
jej pisa, jest cakiem moliwe, e gdzie
istnieje API, ktre j realizuje.
na mapie na podstawie adresu?
geokodowaniem. Google ma inny API, ktry

potrafi to robi: Geocoding API. Wszystkie
te API stanowi cz rodziny API Google
Maps. Na szczcie dla Ciebie, kiedy tylko
zadasz danych od Google, zwrci je on
w formacie JSON, ktry przecie potrafisz
ju obsugiwa!
O:
jeste tutaj 473
i znowu wracamy do klikania
Nasuchiwanie zdarze na mapie

Dotarlimy ju prawie do koca. Poznae wiele rnych zdarze udostpnionych w jQuery i JavaScripcie
w celu tworzenia atrakcyjnych, interaktywnych aplikacji internetowych. Poniewa Google Maps API to tak
naprawd JavaScript (chocia bardzo dobrze i wydajnie napisany), take on moe korzysta z umiejtnoci
przegldarki w zakresie nasuchiwania zdarze i odpowiedniego na nie reagowania.
Z tego samego powodu, dla ktrego jQuery dodaje swoje wasne funkcje tworzenia suchaczy zdarze,
ludzie od Google Maps udostpnili moliwo dodawania suchaczy zdarze za pomoc API. Przyjto takie
rozwizanie, poniewa nie wszystkie przegldarki obsuguj suchaczy zdarze tak samo, a dziki niemu
mamy pewno, e API bdzie mg kontrolowa dodawanie ich na stron. Spjrzmy na sposb dodawania
suchacza zdarzenia click tworzcego okno wyskakujce Google Maps (zwane te InfoWindow).
Zdefiniuj zmienn
z zawartoci, ktr
chcemy pokaza.
var contentString = "To jest InfoWindow";

var my_infowindow = new google.maps.InfoWindow({
Utwrz now
instancj
obiektu
InfoWindow
Google Maps.
content: contentString
});
Nadaj warto waciwoc

i
content obiektu InfoWindow
.
a
Mapa bdzie nasuchiwa zdarzenier.
mark
my_
kcie
obie
ym
nasz
click w
google.maps.event.addListener(my_marker, 'click', function() {

my_infowindow.open(map,my_marker);
kiedy
Uruchom ten kod,kliknity
marker zostanie mapie
(otwrz wtedy na ).
wyskakujce okno
});
Porady maniaka
W API Google Maps prawie wszystkie rodzaje obiektw (Map,

Marker, Line, InfoWindow, TrafficOverlay, Polygon i inne)
maj powizane z nimi zdarzenia. Chocia zdarzenia dla rnych
obiektw mog mie takie same nazwy, to jednak ich parametry
mog by inne! Nie zapomnij sprawdzi dokumentacji obiektu,
ktrego chcesz uy.
474
Rozdzia 11.
jquery i API
Zaostrz owek
Uzupenij brakujce fragmenty kodu w celu dokoczenia funkcji getSightingsByType, ktra
doda funkcjonalno kliknicia zarwno do markerw na mapie, jak i do pozycji na licie. Utwrz
take zmienn globaln o nazwie info_window, ktra bdzie now instancj obiektu Google Maps
InfoWindow z domyln zawartoci bdc pustym acuchem tekstowym.
var info_window = new google.maps________________({content: ''});
function________________(type){
!WAAAAAAAAAAAAAAAA3LWW%W###9LS
@3 ?&WJX+%AAAAAAAAA8 GHRX+%%W%
33+%FW%& +%L& 8 G
Z RXWW +%&3J9WXWW +%AAAAAAAAA
var loc = new _____________________(this['lat'], this['long']);
var opts = {
map: map,
position:_____________
};
var marker = new google.maps _____________(opts);
google.maps.event_____________(marker, 'click', function() {
info_window.content = info;
info_window.open(map, marker);
});
var $li = $("<li />");
!&%&33+%?3?Z3S+%#
$li_________(function(){
info_window.open(map, _________);
});
_________ extend(loc);
});
map _____________ (bounds);
}
});
}
maps.js
jeste tutaj 475
zaostrz rozwizanie
Zaostrz owek
Rozwizanie
Zaktualizowae funkcj getSightingsByType, tak aby wywietlaa

obserwacje na licie oraz na mapie, a take uaktywnie markery oraz
pozycje listy.
var info_window = new google.maps .InfoWindow ({content: ''});

function getSightingsByType (type){
service.php?
!W3LWW%W###9LS
distance'
@3 ?&WJX+%8 GHRX+%%W%
33+%FW%& +%L& 8 G

long''
Z RXWW +%&3J9WXWW +%
var loc = new google.maps.LatLng (this['lat'], this['long']);

var opts = {
map: map,
position: loc
Dodaj suchacza
zdarzenia click do
markera na mapie.
};
var marker = new google.maps .Marker(opts);
google.maps.event .addListener (marker, 'click', function() {
info_window.open(map, marker);
});
var $li = $("<li />");
!&%&33+%?3?Z3S+%#
$li.click (function(){
info_window.open(map, marker );
Dodaj do listy su
zdarze otwieraj chacza
mapie okno InfoWcego na
indow.
});
bounds.extend(loc);
});
map .fitBounds .(bounds);
}
});
maps.js
476
Rozdzia 11.
jquery i API
Jazda prbna
Zaktualizuj swj plik maps.js nowym kodem, ktry napisae na poprzedniej stronie.
Nastpnie otwrz w przegldarce stron display_type.html i wybierz kryptyd z listy.
Kliknij marker albo pozycj listy, aby uzyska wicej wiadomoci na temat obserwacji.

jeste tutaj 477
jeste gwiazd jquery
Udao si!
Na zaledwie kilku krtkich stronach udao Ci si utworzy w peni funkcjonaln
witryn zaprogramowan w kilku jzykach PHP, SQL-u, JavaScripcie i jQuery
a take poczy Google Maps API z Ajaksem i formatem JSON w celu wywietlania
do zoonych danych. Z pewnoci wyzwanie to nie byo bahe!
Nasza strona wyglda

wspaniale. Wanie czego
takiego chcielimy! Wielkie
dziki!
Czy taki facet jak ja

nie moe ju mie ani
chwili spokoju?
478
Rozdzia 11.
jquery i API
Krzywka API
Poziomo
Pionowo
2. API Google Maps, ktrego uywalimy w rozdziale 11., zosta

napisany w tym jzyku.
1. Aby doczy API Google Maps do swojej strony, naley

uy nastpujcego znacznika ze skryptem: <script
src="http://____.______.___/maps/api/
S 3&GKL #G.
4. Korzystalimy z tej metody, aby pobiera dane z bazy

z obserwacjami za pomoc JSON i PHP.
7. Umoliwia Ci tworzenie wasnych instancji obiektw klasy
udostpnionej przez twrcw API.
10. API = Application Programming
11. Obok waciwoci wchodz w skad instancji obiektu API
i moesz z nich korzysta w swoim kodzie.
3. Metoda API Google Maps, ktra nasuchuje zdarzenia click dla

markera: google.maps.event.___.
5. Kod konstruktora API Google Maps pozwalajcy na
umieszczanie punktw na mapie Google: google.maps:new
google.maps.____( ).
6. Konstruktor obiektw API Google Maps, ktry pozwala na
przekazywanie w parametrze wartoci szerokoci i dugoci
geograficznej.
8. Suchacz zdarze jQuery, z ktrego korzystae w tym rozdziale.
Kiedy zmieni si warto danych w polu, suchacz ten zostaje
aktywowany.
9. Obiekt API Google Maps, ktry ma nastpujce waciwoci:
zoom, center i mapTypeId.
jeste tutaj 479
rozwizanie krzywki
Rozwizanie krzywki API
480
Rozdzia 11.
jquery i API
Twj niezbdnik jQuery API

Rozdzia 11.
Masz ju za sob rozdzia 11.,

w ktrym dowiedziae si, jak
poczy jQuery z interfejsami API
(a take z JavaScriptem, PHP, MySQL,
Ajaksem, formatem JSON i nie tylko!).
aprawd
o tak n (albo
t
ji
c
a
k
apli
tw
u,
owania
ogramis
program rzez innych pr wojego program
y
js
fe
r
h
p
s
c
y
y
o
Inte
n
n
d
io
stpn
klepa
oraz r
kod udo try moesz w ch, obiektw
y
k
n
a
),
d
y
firm
z ich
zysta
tw
aby kor
y obiek
struktor ch obiektw.
n
o
usug.
k
j
ji ty
wiera
instanc
y te za
z uywa
Interfejs jce tworzenie tancj, moes i oraz metod
ia
s
c
umoliw sz ju tak in ich waciwo
k
a
t
m
s
y
y
z
d
s
w
.
Kie
kodzie
biektem
w swoim ych z danym o
n
skojarzo
API
jeste tutaj 481
mamy nadziej, e wkrtce znowu si spotkamy
Czas opuci miasto...
Cudownie byo goci Was w Webowicach!

Przykro nam, e wyjedacie, ale teraz kiedy macie ju wszystkie umiejtnoci niezbdne
do tworzenia wasnych atrakcyjnych stron w jQuery jestemy pewni, e wanie za to si zabierzecie,
zamiast nadal si tu krci. Wspaniale byo pokazywa Wam wiat jQuery. Nie krpujcie si skrobn do
nas albo powiedzie nam o Waszej fajnej stronie za porednictwem Head First Labs:
http://headfirstlabs.com
482
Rozdzia 11.
'RGDWHN$2VWDWNL
Dziesi najwaniejszych rzeczy

(o ktrych nie napisalimy)
Czy masz dla mnie jeszcze

wicej smakowitoci?
Nawet po tym wszystkim cigle jest jeszcze wiele rzeczy, do ktrych

nie dotarlimy. Istnieje mnstwo dobrodziejstw jQuery i JavaScriptu, ktrych nie
udao nam si wcisn do tej ksiki. Byoby nieuczciwoci nie wspomnie o nich,
a tak bdziesz lepiej przygotowany na kady inny aspekt jQuery, ktry moesz
napotka podczas swoich podry.
to jest nowy dodatek 483
wszystkie drobiazgi
1. Wszystkie drobiazgi z biblioteki jQuery

Teraz ju pewnie zdajesz sobie spraw, e jQuery jest potn bibliotek. Staralimy si
opisa najwaniejsze zagadnienia potrzebne osobie stawiajcej w jQuery pierwsze kroki.
Uzbrojony w t wiedz moesz pj dalej i sprawdzi reszt biblioteki.
Metody jQuery
.add()
.addClass()
.after()
jQuery.ajax()
.ajaxComplete()
.ajaxError()
jQuery.ajaxPrefilter()
.ajaxSend()
jQuery.ajaxSetup()
.ajaxStart()
.ajaxStop()
.ajaxSuccess()
.andSelf()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind()
.blur()
jQuery.browser
.change()
.children()
.clearQueue()
.click()
.clone()
.closest()
jQuery.contains()
.contents()
.context
.css()
jQuery.cssHooks
.data()
jQuery.data()
.dblclick()
deferred.always()
deferred.done()
deferred.fail()
484
Dodatek A
deferred.isRejected()
deferred.isResolved()
deferred.pipe()
deferred.promise()
deferred.reject()
deferred.rejectWith()
deferred.resolve()
deferred.resolveWith()
deferred.then()
.delay()
.delegate()
.dequeue()
jQuery.dequeue()
.detach()
.die()
jQuery.each()
.each()
.empty()
.end()
.eq()
.error()
jQuery.error
event.currentTarget
event.data
event.isDefaultPrevented()
event.
isImmediatePropagationStopped()
event.isPropagationStopped()
event.namespace
event.pageX
event.pageY
event.preventDefault()
event.relatedTarget
event.result
event.
stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery.extend()
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.filter()
.find()
.first()
.focus()
.focusin()
.focusout()
jQuery.fx.interval
jQuery.fx.off
jQuery.get()
.get()
jQuery.getJSON()
jQuery.getScript()
jQuery.globalEval()
jQuery.grep()
.has()
.hasClass()
jQuery.hasData()
.height()
.hide()
jQuery.holdReady()
.hover()
.html()
jQuery.inArray()
.index()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
ostatki
1. Wszystkie drobiazgi z biblioteki jQuery (cig dalszy)

Metody jQuery (cig dalszy)
.is()
jQuery.isArray()
jQuery.isEmptyObject()
jQuery.isFunction()
jQuery.isPlainObject()
jQuery.isWindow()
jQuery.isXMLDoc()
jQuery()
.jquery
.keydown()
.keypress()
.keyup()
.last()
.length
.live()
.load()
.load()
jQuery.makeArray()
.map()
jQuery.map()
jQuery.merge()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.next()
.nextAll()
.nextUntil()
jQuery.noConflict()
jQuery.noop()
.not()
jQuery.now()
.offset()
.offsetParent()
.one()
.outerHeight()
.outerWidth()
jQuery.param()
.parent()
.parents()
.parentsUntil()
jQuery.parseJSON
jQuery.parseXML()
.position()
jQuery.post()
.prepend()
.prependTo()
.prev()
.prevAll()
.prevUntil()
.promise()
.prop()
jQuery.proxy()
.pushStack()
.queue()
jQuery.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeData()
jQuery.removeData()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.select()
.serialize()
.serializeArray()
.show()
.siblings()
.size()
.slice()
.slideDown()
slideToggle()
.slideUp()
.stop()
jQuery.sub()
.submit()
jQuery.support
.text()
.toArray()
.toggle()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
jQuery.trim()
jQuery.type()
.unbind()
.undelegate()
jQuery.unique()
.unload()
.unwrap()
.val()
jQuery.when()
.width()
.wrap()
.wrapAll()
.wrapInner()
jeste tutaj 485
wszystkie drobiazgi (cig dalszy)
1. Wszystkie drobiazgi z biblioteki jQuery (cig dalszy)

Selektory jQuery
&R FZRW
&R 3 89Z3F 3# R3ZF3F3 X
&R 3 89Z3F 33ZF3F3 X
&R 3 89Z3F 3JF3ZF3F3 X
&R 3 89RLZF3 XL\3ZF3!F3 X
&R 3 89S IF3ZF3F3 X
&R 3 89S I?3ZF3^F3 X
&R 3 89Z3LZ3?3ZF3F3 X
Selektor :animated
Selektor :button
Selektor :checkbox
Selektor :checked
Selektor dziecka ("rodzic > dziecko")
Selektor klasy (".class")
Selektor :contains
Selektor potomka ("przodek potomek")
Selektor :disabled
Selektor elementu ("element")
Selektor :empty
Selektor :enabled
Selektor :eq()
Selektor :even
Selektor :file
Selektor :first-child
Selektor :first
Selektor :focus
Selektor :gt()
486
Dodatek A
Selektor atrybut ma [nazwa]

Selektor :has()
Selektor :header
Selektor :hidden
Selektor identyfikatora ("#id")
Selektor :image
Selektor :input
Selektor :last-child
Selektor :last
Selektor :lt()
&R F&93 893L%3ZF3F3 X
3ZF3-F3 X-
Selektor wielokrotny ("selektor1,selektor2,selektorN")
&R 3#W# Z&W3S\LW## Z?
3#
&R 3#W ?ZF3## Z? ?ZF
Selektor :not()
Selektor :nth-child()
Selektor :odd
Selektor :only-child
Selektor :parent
Selektor :password
Selektor :radio
Selektor :reset
Selektor :selected
Selektor :submit
Selektor :text
Selektor :visible
ostatki
2. jQuery w sieciach CDN

CDN-y (content delivery networks albo content distribution networks) to wielkie sieci serwerw
przeznaczone do przechowywania i przekazywania informacji danych, oprogramowania, kodu API,
plikw multimedialnych, filmw itd. Dziki nim zasoby te s atwiej dostpne w sieci Web. Kady
serwer w wle sieci zawiera kopi dystrybuowanych danych. Jeli wzy te zostan rozmieszczone
w strategicznych miejscach sieci (takiej jak Internet), mog przyczyni si do wzrostu prdkoci
dostarczania informacji osobom, ktre z nich korzystaj. Przykadami tradycyjnych CDN-w mog by
Windows Azure albo Amazon CloudFront.
Wiele duych firm posiada w swoich sieciach CDN kopie jQuery, ktre s powszechnie dostpne.
Poniej podano adresy kopii jQuery przechowywanych w CDN-ach, z ktrych by moe bdziesz chcia
skorzysta.
>
?!@
?*4
3B
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
' /
3B
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js
!#
3B
1
'
72
http://code.jquery.com/jquery-1.7.min.js
http://code.jquery.com/jquery-1.7.js (wersja rdowa)
Adresy te moesz docza do swoich aplikacji, zamiast kadorazowo pobiera kopi biblioteki jQuery.
jeste tutaj 487
metoda noConflict
3. Przestrze nazw jQuery: metoda noConflict

Wiele bibliotek JavaScriptu uywa znaku $ dla oznaczenia nazw funkcji lub zmiennych tak samo jak jQuery.
W przypadku jQuery znak dolara jest po prostu aliasem dla sowa kluczowego jQuery, tak wic wszystkie
funkcjonalnoci s dostpne take bez zastosowania $. Jeli bdziemy musieli skorzysta z innej biblioteki
JavaScriptu cznie z jQuery, moemy z powrotem przekaza tej bibliotece kontrol nad znakiem dolara,
wywoujc metod $.noConflict:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
$.noConflict();
KKVS39XLR?#Z3JL%88&R9F3S\LL%Z3R9!
</script>
Technika ta jest szczeglnie przydatna w poczeniu z metod .ready, ktra potrafi nadawa aliasy
obiektom jQuery, poniewa w wywoaniu zwrotnym przekazywanym do tej metody moemy korzysta
ze znaku $ bez obaw o pniejsze wystpienie konfliktw:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
$.noConflict();
jQuery(document).ready(function($) {
KKVS39XLR?S9 RI 9F3Z3R9!
});
KKVS39XLR?#Z3JL%88&R9F3S\LL%Z3R9!
</script>
Ze sposobu tego bdziesz musia korzysta, jeli masz zamiar uywa innych bibliotek JavaScriptu,
w ktrych znak dolara zastosowano w roli odwoania. Jeeli na swoich stronach korzystasz wycznie
z jQuery, nie bdziesz musia stosowa tej metody, nawet gdy do kodu doczysz wiele rnych wtyczek.
488
Dodatek A
ostatki
4. Debugowanie kodu jQuery

Zawsze warto debugowa swj kod, zwaszcza kiedy pracuje si nad projektem o duej skali z wieloma
obiektami rnego typu, bibliotekami albo API. Czsto bdziesz musia pozna zawarto zwrconego
obiektu albo zmiennej, ale bez wywietlania ich w oknie alarmowym i bez dociekania, jak dotrze do
wszystkich waciwoci obiektu.
W tym celu pobierz wtyczki debugujce. Pomog Ci one zajrze do rodka obiektw eby mg
sprawdza, jak ich waciwoci zmieniaj swoje wartoci albo ledzi zmiany wartoci zmiennych
wraz z przebiegiem programu. Moesz take bada, jak zmienne ewoluuj w Twojej aplikacji albo czy
przypadkiem nie przyjmuj one pustych wartoci.
Dwie wtyczki debugujce, ktre byy dla nas bardzo przydatne podczas programowania w JavaScripcie
i jQuery, to Dump oraz Variable-Debugger:
http://plugins.jquery.com/project/Dump (do podgldania, co zawieraj Twoje obiekty);
http://plugins.jquery.com/project/VariableDebugger (podobnie, ale informacje s wywietlane w oknach
wyskakujcych).
Istniej te inne wtyczki, a wraz z upywem czasu pojawi si wiele nowych, a take ulepszenia do nich.
Dla nas uyteczne byy wtyczki wymienione powyej, ale w celu zapoznania si z innymi ktre by
moe bd Ci bardziej odpowiada przejd na stron wtyczek do jQuery (http://plugins.jquery.com/)
i poszukaj hasa debug.
Rzecz jasna, dla wszystkich pozostaych zastosowa masz do dyspozycji narzdzia przegldarek,
z ktrych korzystae ju podczas lektury tej ksiki.
jeste tutaj 489
kolejki
5. Zaawansowane techniki animacji: kolejki

Kolejki najczciej s w jQuery wykorzystywane do animacji, chocia moesz ich uywa w dowolnym celu. S one
tablicami, w ktrych funkcje zostay umieszczone pojedynczo za pomoc metody jQuery.data. Kolejkowanie
odbywa si zgodnie z zasad FIFO (pierwszy na wejciu, pierwszy na wyjciu). Funkcj moesz doda do kolejki,
wywoujc metod .queue, natomiast usun mona j za pomoc metody .dequeue.
Kady element moe mie jedn lub wiele kolejek funkcji doczonych do niego przez jQuery. W wikszoci
aplikacji uywana jest tylko jedna kolejka (o nazwie fx). Kolejki umoliwiaj asynchroniczne sekwencjonowanie
akcji wywoywanych dla danego elementu bez wstrzymywania dziaania programu. Typowym przykadem
kolejkowania moe by wywoanie wielu metod animujcych wybrany element:
$('#my_element').slideUp().fadeIn();
Kiedy powysza instrukcja zostanie wywoana, element od razu zacznie si wsuwa do gry, ale pojawienie si
kolorw zostanie odoone w kolejce fx i zostanie wywoane dopiero wtedy, gdy zakoczy si wsuwanie.
Metoda .queue pozwala na bezporednie manipulowanie kolejk funkcji. Szczeglnie przydatne jest
uruchamianie tej metody wraz z wywoaniem zwrotnym, co umoliwia dodawanie nowych funkcji na kocu kolejki.
Dziaanie takie przypomina wywoywanie funkcji zwrotnej z metod animujc, jednak nie wymaga, aby wywoanie
miao miejsce w czasie wykonywania si animacji.
$('#my_element').slideUp();
$('#my_element').queue(function() {
3& 3LS3Z3RLZ3
$(this).dequeue();
});
Powyszy zapis jest rwnowany takiemu:

$('#my_element').slideUp(function() {
3& 3LS3Z3RLZ3
});
Zwr uwag na fakt, e kiedy dodajemy funkcj za pomoc metody .queue, powinnimy pamita o wywoaniu
w pewnym momencie metody .dequeue, eby wykonaa si funkcja z kolejnego wiersza.
W jQuery 1.4 wywoywana funkcja bya przekazywana jako pierwszy argument nastpnej funkcji, ktra po
automatycznym wywoaniu usuwaa z kolejki nastpny element, dziki czemu kolejka przesuwaa si dalej.
Sposb uycia takiego kolejkowania przedstawia si nastpujco:
$("#test").queue(function(next) {
KK93SLXZ I8
next();
});
Domyln kolejk w jQuery jest fx. Jest ona standardowo uywana przez metod .animate i wszystkie inne funkcje,
ktre j wywouj.
Uwaga: Jeli uywasz kolejki niestandardowej, musisz rcznie zdejmowa z niej funkcje za pomoc metody
.dequeue nie uruchamiaj si one automatycznie, tak jak to ma miejsce w przypadku domylnej kolejki fx!
490
Dodatek A
ostatki
6. Walidacja formularzy
Jedn z bardzo wanych funkcji, na ktrych opisanie nie mielimy ju miejsca, jest walidacja formularzy
za pomoc jQuery po stronie klienta, czyli w przegldarce. W rozdziaach 9., 10. i 11. mielimy do
czynienia z niewielkim fragmentem procesu walidacji za pomoc PHP po stronie serwera, zanim nasze
dane zostay wstawione do bazy. Walidacja po stronie serwera rwnie jest bardzo wana i zdecydowanie
zalecana. le napisana instrukcja insert albo select wykonana na Twojej bazie mogaby ujawni o wiele
wicej danych, ni by sobie tego yczy.
Powrmy jednak do walidacji po stronie klienta
Istnieje wiele wtyczek jQuery dedykowanych walidacji formularzy. Jedn z naszych ulubionych jest
stosownie nazwana wtyczka Validation, ktr mona pobra std: http://docs.jquery.com/Plugins/validation.
Wtyczka ta pozwala na utworzenie dla kadego elementu formularza serii regu, dziki czemu proces
walidacji mona dostosowa do wasnych potrzeb, a take mona ograniczy rodzaj danych, ktre mog
by przyjmowane przez formularz. Reguy te mog dotyczy ustalenia minimalnych i maksymalnych
dugoci pl formularza lub te sprawdzenia, czy wypeniono pola wymagane, czy wprowadzony adres
e-mail jest poprawny itd. Oto dwa przykady z witryny jQuery:
Okrela elementy name i email jako wymagane (z uyciem skrtu dla pierwszej reguy), a take sprawdza
poprawno adresu e-mail (za pomoc literau obiektu).
$(".selector").validate({
rules: {
KK W9J3# 3Z333 9 ?+ 94
name: "required",
KK W9J3ZJ3
email: {
required: true,
email: true
}
}
});
Dodaje dla pola regu wymagalnoci (required) oraz minimaln dugo (minlength) rwn 2, a take dla
obu regu definiuje niestandardowe komunikaty.
$("#myinput").rules("add", {
required: true,
minlength: 2,
messages: {
required: "Pole wymagane",
&W%+S9 3V ZF# F3?Z# Z3SS4F3W3L%Z3RIF
}
});
jeste tutaj 491
UI effects
7. Biblioteka jQuery UI Effects

Biblioteka jQuery UI Effects zawiera dodatkowe animacje, ktrych nie ma w standardowej bibliotece jQuery.
Mona w niej wyrni trzy odrbne rodzaje funkcjonalnoci:
1
Animacje kolorw
Animacje kolorw rozszerzaj funkcj animate o moliwo animowania barw. S one szeroko
uywane w funkcjonalnoci przejcia klas i potrafi animowa kolory w nastpujcych waciwociach:
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor
*!

Przejcia klas rozszerzaj podstawowe API klas o moliwo animowania przej midzy dwoma
rnymi klasami. Wymienione poniej metody jQuery zostay zmienione przez jQuery UI, aby mogy
przyjmowa trzy dodatkowe parametry: speed, easing (opcjonalnie) oraz callback.
addClass (klasa)
Dodaje okrelon klas lub klasy do kadego zbioru pasujcych elementw.

removeClass (klasa)
Usuwa okrelon klas lub klasy ze zbioru pasujcych elementw.

toggleClass (klasa)
Dodaje okrelon klas, jeli jej nie ma; usuwa okrelon klas, jeli ta istnieje.
FL%&38\L3&33F3&33
Umoliwia wykonanie wizualnego przejcia z jednej klasy do innej.

3
<
/!

Zaawansowane funkcje easingu s doczone do gwnej biblioteki efektw i stanowi cz funkcji easingu
napisanych pocztkowo przez Roberta Pennersa na potrzeby jzyka ActionScript dla Flasha. Kade z nich
jest seri rwna matematycznych zaprojektowanych w celu zapewnienia wikszej pynnoci i dokadnoci
animowania obiektw. Oto lista wszystkich funkcji easingu:
492
linear
easeInQuart
easeInExpo
easeInBack
swing
easeOutQuart
easeOutExpo
easeOutBack
jswing
easeInOutQuart
easeInOutExpo
easeInOutBack
easeInQuad
easeInQuint
easeInCirc
easeInBounce
easeOutQuad
easeOutQuint
easeOutCirc
easeOutBounce
easeInOutQuad
easeInOutQuint
easeInOutCirc
easeInOutBounce
easeInCubic
easeInSine
easeInElastic
easeOutCubic
easeOutSine
easeOutElastic
easeInOutCubic
easeInOutSine
easeInOutElastic
Dodatek A
ostatki
8. Tworzenie wasnych wtyczek do jQuery

Rozszerzanie jQuery za pomoc wtyczek oraz metod daje ogromne moliwoci i pozwoli Ci (a take Twoim
kolegom programistom) zaoszczdzi mnstwo czasu powiconego na programowanie dziki przeniesieniu do
wtyczek najbardziej przydatnych funkcji.
Pomylelimy, e zamiast przeznacza ca mas miejsca na opis tworzenia wtyczek, najlepiej pozostawi to
ekspertom od jQuery. Bardzo rzeczowy i zawierajcy mnstwo informacji przewodnik znajduje si tutaj:
http://docs.jquery.com/Plugins/Authoring.
Oto krtkie zestawienie zasad, o ktrych naley pamita podczas pisania swojej kolejnej wtyczki do jQuery:
Zawsze zamykaj swoj wtyczk w bloku 9L!KK93S9XFS\FLZR4
( jQuery );.
Nie umieszczaj niepotrzebnie sowa kluczowego this w bezporednim zakresie funkcji swojej
wtyczki.
Jeli tylko Twoja wtyczka nie zwraca zoonej wartoci, zawsze powinna ona zwraca sowo kluczowe
this, aby zachowana zostaa moliwo czenia funkcji w acuchy.
Zamiast wymaga dugiej listy argumentw, przekazuj konfiguracj swojej wtyczki jako obiekt
dosowny, ktry moe nadpisa ustawienia domylne wtyczki.
Nie zamiecaj obiektu jQuery.fn wicej ni jedn przestrzeni nazw na wtyczk.
Zawsze umieszczaj swoje metody, zdarzenia i dane w przestrzeni nazw.
fn w jQuery.fn wymawia si effin.
jeste tutaj 493
domknicia
9. JavaScript dla zaawansowanych: domknicia

Domknicia s na tyle zoonym zagadnieniem dotyczcym jzyka JavaScript, e mao brakowao,
a znalazyby si w odrbnej ksice. Chocia tak si nie stao, jestemy mocno przekonani, e
powiniene o nich wiedzie, w zwizku z czym chcielibymy tutaj o nich wspomnie.
Domknicia nie bd trudne do zrozumienia, jeli tylko uchwycisz ich gwn ide. Gdyby jednak
przeczyta niektre z ich bardziej szczegowych, technicznych opisw, mgby poczu si niele
zdezorientowany.
Na pocztek definicja (a raczej dwie):
%

/!

!

+
po zwrceniu tej funkcji.

!!
%

!
/!

/!
%

%

/!
% !
Zakrcone, nie?
Domknicia w duej mierze bazuj na zakresach wanoci zmiennych i obiektw. Zakres
wanoci odnosi si do tego, w ktrych miejscach obiekty, zmienne i funkcje s tworzone oraz
dostpne i w jakim kontekcie s wywoywane. Zasadniczo obiekty, zmienne oraz funkcje mog by
definiowane w zakresie wanoci lokalnym albo globalnym.
Zakres lokalny: Mamy z nim do czynienia wtedy, kiedy co zostaje zdefiniowane i jest dostpne
tylko w okrelonej czci kodu, na przykad wewntrz funkcji.
Zakres globalny: W przeciwiestwie do zakresu lokalnego, kiedy co jest globalne, bdzie
dostpne z dowolnego miejsca w kodzie.
Wemy pod rozwag nastpujcy kod:
function func1(x) {
var tmp = 3;
function func2(y) {
3& ,#
}
func2(10);
}
func1(2);
494
Dodatek A
ostatki
9. JavaScript dla zaawansowanych: domknicia (cig dalszy)

Zmienna tmp zostaa zadeklarowana w lokalnym zakresie wanoci, wewntrz funkcji func1. Zawsze
bdzie ona wywoywa okno alarmowe z wartoci 16, poniewa func2 ma dostp do zmiennej x
(ktra zostaa zdefiniowana jako argument func1), a take do zmiennej tmp wewntrz funkcji func1.
Co takiego nie jest domkniciem. Domknicie ma miejsce wtedy, gdy zwracasz funkcj wewntrzn.
Funkcja wewntrzna domknie zmienne funkcji func1 przed jej opuszczeniem.
Rozwamy teraz nastpujcy kod:
function func1(x) {
var tmp = 3;
return function (y) {
3& ,#
}
}
@3 9L-9L-KK9L-S 3Z?RL
func2(10);
Tak samo i tutaj zmienna tmp znajduje si w lokalnym zakresie wanoci, ale ju funkcja func2
znajduje si w zakresie globalnym. Powysza funkcja take wywoa okno alarmowe z wartoci 16,
poniewa func2 cigle moe odwoywa si do zmiennych x oraz tmp, chocia nie znajduje si ju
bezporednio w tym samym zakresie wanoci.
Jako e zmienna tmp nadal przebywa wewntrz domknicia funkcji func2, to przy kadym wywoaniu
tej funkcji take ta zmienna bdzie inkrementowana.
Istnieje moliwo utworzenia wikszej liczby funkcji domknitych dziki zwrceniu ich listy albo
przypisaniu ich do zmiennych globalnych. Zarwno jedno, jak i drugie rozwizanie bdzie si odnosi
do tego samego x oraz tego samego tmp; nie utworz one swoich kopii.
10. Szablony
Szablony jQuery nadal s dostpne w wersji beta, ale stanowi one atrakcyjn przysz
funkcjonalno, ktra umoliwi tworzenie elastycznych witryn bez duych iloci kodu HTML albo
jQuery. S one zaprojektowane do pobierania danych i wizania ich z pewnym znacznikiem
szablonu, dziki czemu mona konsekwentnie uywa tego samego znacznika do wywietlania
danych o znacznym pokrewiestwie.
Moesz si z nimi zapozna tutaj: http://api.jquery.com/category/plugins/templates/.
jeste tutaj 495
496
Dodatek A
'RGDWHN%.RQILJXUDFMDURGRZLVNDSURJUDPLVW\F]QHJR
Przygotuj si do
przyszych sukcesw
Jeli si tego naucz
odpowiednio wczenie,
to wyprzedz wszystkich
innych...
Potrzebujesz miejsca na wiczenie nowo nabytych umiejtnoci PHP

bez naraania swoich danych na niebezpieczestwa czyhajce w sieci.
Posiadanie bezpiecznego miejsca na opracowywanie aplikacji PHP przed wypuszczeniem
jej w szeroki wiat sieci internetowej zawsze jest dobrym pomysem. Dodatek ten
zawiera instrukcje dotyczce instalacji serwera WWW, MySQL i PHP, dziki czemu
bdziesz mie do dyspozycji bezpieczne miejsce do pracy i wicze.
to jest nowy dodatek 497
lokalna instalacja php i mysql
Utwrz rodowisko programistyczne PHP

Zanim umiecisz w sieci gotow aplikacj ukoczon dziki nowo nabytym umiejtnociom
programowania w jQuery i Ajaksie, musisz j opracowa. Nigdy nie jest dobrym pomysem pracowanie
nad ni w sieci WWW, gdzie kady moe j zobaczy. Moesz lokalnie zainstalowa oprogramowanie,
ktre pozwoli Ci tworzy i testowa swoj aplikacj, zanim udostpnisz j on-line.
Istniej trzy systemy, ktre potrzebujesz zainstalowa na swoim lokalnym komputerze, aby tworzy
i testowa aplikacje PHP i MySQL:
1. Serwer WWW.
2. PHP.
3. Serwer bazy danych MySQL.
PHP nie jest serwerem; to zbir regu, ktre potrafi zrozumie Twj serwer WWW i ktre pozwalaj
mu interpretowa kod PHP. Zarwno serwer WWW, jak i serwer MySQL s natomiast wykonywalnymi
programami, ktre dziaaj w komputerze.
Pamitaj, e mwimy o skonfigurowaniu Twojego lokalnego komputera do penienia roli serwera
WWW na potrzeby programowania w PHP. Ostatecznie i tak bdziesz potrzebowa serwera WWW
dziaajcego on-line, aby umieci na nim ukoczon aplikacj, dziki czemu inne osoby uzyskaj
do niej dostp i bd mogy z niej korzysta.
Oprogramowanie serwera
WWW takie jak Apache albo
IIS jest niezbdne, aby
mona byo skrypty PHP
dostarcza jako strony
internetowe.
Serwer bazy danych
MySQL jest czsto
instalowany na tym
samym komputerze co
oprogramowanie serwera
WWW w naszym
przypadku bdzie to
Twj lokalny komputer!
6HUZHU
6HUZHU:::
6HUZHUED]\
GDQ\FK
W rodowisku
programistycznym PHP
Twj lokalny komputer
dziaa jako serwer na
potrzeby uruchamiania
skryptw PHP.
PHP jest instalowany

jako cz serwera
WWW i umoliwia
serwerowi uruchamianie
skryptw PHP.
Dowiedz si, co ju masz

Zanim sprbujesz zainstalowa ktry z fragmentw ukadanki, jak jest
rodowisko programistyczne PHP, najlepiej zrobisz, sprawdzajc, co masz ju
zainstalowane. Rzumy okiem na kady z trzech komponentw i dowiedzmy
si, jak stwierdzi, co znajduje si ju w Twoim systemie.
Platforma, ktr jest Twj lokalny komputer, stanowi o zasadniczej rnicy,
kiedy przychodzi do sprawdzenia, co jest ju zainstalowane. Na przykad
w systemie Mac OS X serwer WWW jest instalowany domylnie, podczas
gdy w wikszoci komputerw dziaajcych pod Windows tak nie jest.
498
Dodatek B
UWAGA: Dodatek ten

ma zastosowanie do
systemw Windows XP,
Vista, Windows 7 oraz
Windows Server 2003/2008.
W przypadku Macw
uwzgldniono Mac OS X
10.3.x i nowsze systemy.
konfiguracja rodowiska programistycznego
Czy masz serwer WWW?

Prawdopodobnie masz ju serwer WWW, jeli korzystasz z nowszego peceta albo z Maca. Aby
to szybko stwierdzi dla dowolnego systemu, otwrz okno przegldarki i w pasku adresu wpisz
http://localhost. Jeeli zostanie wywietlona strona powitalna, to znaczy, e serwer WWW yje
na Twoim lokalnym komputerze i ma si cakiem dobrze.
Jeli masz Maca albo komputer

z Windows i zainstalowanym
serwerem WWW Apache,
moesz ujrze co takiego.
Jeli masz komputer

z Windows i zainstalowanym
IIS, moesz zobaczy co
takiego.
Czy masz PHP? Ktr wersj?

Jeli masz zainstalowany serwer WWW, bardzo atwo moesz sprawdzi, czy posiadasz PHP, a jeli tak, to ktr jego
wersj. Utwrz nowy skrypt o nazwie info.php i wpisz w nim, co nastpuje:
#%##%#G
Zapisz ten plik w katalogu, z ktrego korzysta Twj serwer WWW. W systemie Windows jest to zazwyczaj
C:\inetpub\wwwroot\ (dla IIS)
albo
C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs (dla Apache).
W Macu bdzie to zwykle co podobnego do
/Users/twojanazwa/sites/.
Jeli sprbujesz otworzy ten plik w przegldarce, wpisujc http://localhost/info.php, to jeeli masz zainstalowane PHP,
powiniene zobaczy co takiego:
To jest numer wersji
PHP, ktr masz
zainstalowan.
jeste tutaj 499
sprawdzenie wersji mysql
Czy masz MySQL? Ktr wersj?

W systemie Windows moesz to stwierdzi, klikajc prawym przyciskiem myszy windowsowy pasek zada,
a nastpnie wybierajc polecenie Meneder zada i przechodzc na kart Usugi. W systemie Windows 7
moesz uzyska wicej informacji po klikniciu przycisku Usugi.
To wanie tu
zobaczysz MySQL.
Aby stwierdzi, czy masz MySQL na Macu, otwrz terminal i wpisz:

cd /user/local/mysql
Jeeli polecenie zadziaa, znaczy to, e MySQL jest zainstalowany. Aby okreli wersj, wpisz:
mysql
5#*(6#"76
6
Jeli to
polecenie
zadziaa,
to znaczy,
e masz
zainstalowany
MySQL.
Tutaj jest numer

wersji MySQL,
ktr posiadasz.
500
Dodatek B
$ cd /usr/local/mysql
$ mysql
H&L% 3??F% W
Your MySQL connection id is 3
Server version: 5.0.51b MySQL Community Server (GPL)
#%&# % %&##LL&3 %89
mysql>
Terminal MySQL jest

te znany pod nazw
monitora MySQL.
Zacznij od serwera WWW

W zalenoci od wersji Windows, ktr posiadasz, moesz pobra Internetowe Usugi
Informacyjne (IIS) Microsoftu albo opensourceowy serwer WWW Apache. Jeli potrzebujesz
serwera dla swojego Maca, prawdopodobnie powiniene pozosta przy serwerze Apache,
poniewa jest on ju zainstalowany.
Oto krtki opis instalacji Apache pod Windows:
Przejd na stron http://httpd.apache.org/download.cgi.
Sugerujemy pobranie pliku httpd-2.2.21-win32-x86-no_ssl.msi.
Po jego zapisaniu i dwukrotnym klikniciu Apache zostanie
zainstalowany automatycznie.
Wybierz t wersj
i uruchom j po
pobraniu.
W nastpnej kolejnoci zobaczysz okno kreatora instalacji.

Wikszo instrukcji nie wymaga objanie i moesz
zaakceptowa ustawienia domylne.
Wybierz domen, w ktrej

znajduje si Twj komputer.
Jeeli nie masz domeny,
moesz wpisa localhost.
Najlepszym wyborem bdzie

pozostawienie zaznaczonej
opcji z instalacj typow.
Zwykle podczas instalacji

oprogramowania moesz
wybra domylny folder.
jeste tutaj 501
instalacja php
Zakoczenie instalacji serwera Apache

To ju prawie koniec. Kliknij przycisk Install i poczekaj jak minut na zakoczenie instalacji. To tyle!1*
1* Aby uzyska efekt widoczny w podrozdziale Czy masz serwer WWW? czyli w przypadku Apache napis It works! po wpisaniu w przegldarce adresu http://localhost
moe by konieczne dodanie w pliku hosts, znajdujcym si w katalogu C:\Windows\System32\drivers\etc, wiersza o treci 127.0.0.1 localhost przyp. tum.
Twj serwer WWW zosta skonfigurowany w taki sposb, aby uruchamia si automatycznie po wczeniu
komputera. Moesz to jednak zmieni, zatrzymujc go i ponownie uruchamiajc w oknie dialogowym Panel
sterowania/Narzdzia administracyjne/Usugi, gdzie bdzie widoczny jako Apache2.2.
Jeli powysze instrukcje nie zadziaay w Twoim przypadku, sprbuj ponownie albo wpisz w swojej ulubionej
wyszukiwarce haso Instalacja Apache pod Windows, aby uzyska wicej pomocy.
Instalacja PHP
Przejd na stron http://www.php.net/downloads.php albo http://windows.php.net/download/, jeli
korzystasz z Windows.
Podobnie jak w przypadku Apache, jeli uywasz Windows, zalecamy, aby pobra wersj instalatora
dla tego wanie systemu. Jeli masz Apache, pobierz plik php-5.2.17-Win32-VC6-x86.msi. Jeeli
uywasz IIS, wybierz plik php-5.3.6-Win32-VC9-x86.msi. Pliki te automatycznie zainstaluj PHP
po tym, jak je zapiszesz i uruchomisz.
Tutaj znajduje si sekcja

pobierania wersji .msi
dla Windows.
Przeczytaj opisy wersji,
ktre powiniene pobra.
502
Dodatek B
Po pobraniu kliknij dwukrotnie

plik. Aby rozpocz instalacj,
kliknij przycisk Run.
Etapy instalacji PHP

Instalacja zaczyna si od
konfiguracji podstawowej.
Aby kontynuowa, zaakceptuj

umow licencyjn.
Wybranie do instalacji domylnego

folderu jest zazwyczaj dobrym
pomysem, ale to ju zaley od
preferencji. My wybralimy C:\PHP.
W tym oknie zachowaj ostrono. Jeli uywasz Apache, wybierz odpowiedni

wersj. Jeeli korzystasz z IIS, wybierzesz raczej modu IIS ISAPI. Aby dokadnie
okreli, co jest Ci potrzebne, sprawd swoje oprogramowanie. Tutaj wskazalimy
akurat Apache 2.2, a w nastpnym oknie musimy poda ciek do plikw
konfiguracyjnych naszej instalacji Apache.
W tym oknie take naley uwaa. Na drzewku rozwi ga
Extensions i przewi zawarto a do MySQL, co pozwoli
Ci uywa wbudowanych funkcji PHP MySQL, z ktrych
korzystamy w tej ksice!
Przewi list elementw w grupie Extensions

i kliknij MySQL. Wybierz opcj Entire feature.
jeste tutaj 503
instalacja mysql w rodowisku windows
Etapy instalacji PHP: zakoczenie

To wszystko. Kliknij Install, a nastpnie Finish, aby zamkn instalator.
Jeli jeszcze tego nie zrobie, utwrz nowy skrypt o nazwie info.php i wpisz w nim nastpujc instrukcj:
#%##%#G
Zapisz plik w katalogu, z ktrego korzysta Twj serwer WWW. W systemie Windows jest to zwykle C:\inetpub\wwwroot\
(dla IIS) albo C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs (dla Apache).
W Macu zazwyczaj jest to /Users/twojanazwa/sites/.
Jeli sprbujesz teraz otworzy ten plik w przegldarce, wpisujc: http://localhost/info.php,
Jeeli sposb ten nie
to jeeli PHP zosta zainstalowany, powiniene zobaczy co takiego1.
1 Instalator PHP dopisuje w pliku konfiguracyjnym serwera Apache httpd.conf cieki
dostpu do katalogu PHP oraz do biblioteki php5apache2_2.dll. Jeli po wpisaniu adresu
http://localhost/info.php informacje o PHP nie wywietlaj si, naley sprawdzi, czy
cieki w tym pliku zostay prawidowo okrelone. Ostatnie wiersze w pliku httpd.conf
powinny wyglda na przykad tak:
#BEGIN PHP INSTALLER EDITS REMOVE ONLY ON UNINSTALL
PHPIniDir "C:\PHP\"
LoadModule php5_module "C:\Program Files (x86)\Apache Software Foundation\
Apache2.2\bin\php5apache2_2.dll"
#END PHP INSTALLER EDITS REMOVE ONLY ON UNINSTALL
Zaoono przy tym, e biblioteka php5apache2_2.dll zostaa skopiowana z katalogu PHP
do katalogu z binariami Apache przyp. tum.
zadziaa, sprbuj
jeszcze raz albo wpisz
w swojej ulubionej
wyszukiwarce
Instalacja PHP
Apache [IIS] pod
Windows.
Instalacja MySQL
Instrukcja i rozwizywanie problemw
Potrzebny jest jeszcze MySQL, zatem zabierzmy si za jego pobieranie oraz instalowanie. Oficjaln nazw darmowej wersji
serwera MySQL RDBMS jest obecnie MySQL Community Server.
Poniej zamieszczono list czynnoci koniecznych do zainstalowania MySQL w systemie Windows albo Mac OS X. Celem
tego opisu nie jest zastpienie znakomitej instrukcji znajdujcej si w witrynie MySQL i szczerze zachcamy, aby si
tam uda i j przeczyta! O wiele bardziej szczegowe instrukcje oraz poradnik dotyczcy rozwizywania problemw
znajduj si tutaj:
Pobierz wersj
5.5 lub nowsz
.
http://dev.mysql.com/doc/refman/5.5/en/windows-installation.html.
Spodoba Ci si te przegldarka zapyta MySQL, dziki ktrej moesz wpisywa swoje zapytania i przeglda uzyskane
wyniki w interfejsie programu zamiast w oknie konsoli.
504
Dodatek B
Etapy instalacji MySQL w systemie Windows

1
Przejd na stron
http://dev.mysql.com/downloads/
i kliknij przycisk pobierania MySQL Installer for Windows. All MySQL Products. For All
Windows Platforms. In One Package. Download.
Z listy wybierz Microsoft Windows.
By moe bdziesz
musia przewin okno
troch w d.
jeste tutaj 505
instalacja mysql w rodowisku windows (cig dalszy)
Pobierz instalator
3
Z listy wybierz Windows (x86, 32-bit), MSI1.

1 W chwili tumaczenia ksiki na licie znajdowaa si tylko jedna pozycja. Jeli wersji bdzie wicej,
prosz wybra najnowsz przyp. tum.
Pobierz wersj
5.5.16 albo
nowsz.
Kliknij cze No thanks, just take me to the downloads!, chyba e chcesz si

zarejestrowa i zaoy konto w witrynie MySQL albo takie konto ju masz.
Kontynuuj bez
rejestracji.
Zobaczysz list miejsc, z ktrych moesz pobra swoj kopi. Wybierz miejsce,
ktre znajduje si najbliej Ciebie.
Kiedy plik skoczy si pobiera, kliknij na nim prawym przyciskiem myszy i wybierz
polecenie Uruchom jako administrator, jeli masz w Windows aktywn funkcj
Kontrola konta uytkownika. Od tego momentu instalacja bdzie przebiega
w kreatorze instalacji. Kliknij Dalej.
Kiedy pojawi si okno

dialogowe kreatora
instalacji, kliknij przycisk
Install MySQL Products.
506
Dodatek B
Wybierz folder docelowy

6
Przeczytaj warunki licencyjne i wyra na nie zgod, po czym kliknij Next.
W nastpnym kroku zostanie uruchomiona automatyczna aktualizacja, ktra

sprawdzi, czy istniej nowsze wersje. Moesz j pomin, zaznaczajc pole
wyboru Skip the check for updates, ale dobr praktyk jest upewnianie si,
e aplikacje s aktualne. Po zakoczeniu aktualizacji kliknij Next.
jeste tutaj 507
instalacja mysql w rodowisku windows (cig dalszy)
508
Zostaniesz poproszony o wybranie typu swojej instalacji. Dla naszych celw

idealnie nadaje si Developer Default. Pozostaw take domylne cieki
instalacyjne, ktre zostay ju wywietlone, i kliknij Next.
Teraz instalator sprawdzi zgodno Twojego systemu z profilem klienta platformy Microsoft .NET
Framework 4, co jest potrzebne do uruchamiania aplikacji MySQL Workbench. Jeli nie masz tego
komponentu, zaktualizuj swj system Windows na stronie http://update.microsoft.com/. Instalator
sprawdzi take obecno w Twoim systemie Visual C++ 2010.
10
Nastpne okno zawiera list komponentw do zainstalowania lub aktualizacji.

Kliknij Execute, aby rozpocz instalacj.
Dodatek B

11
Po udanej instalacji wszystkich komponentw kliknij Next, aby przej do opcji

konfiguracyjnych usugi MySQL. Wybierz Developer Machine i kliknij Next.
12
Upewnij si, e opcje Enable TCP/IP Networking oraz Create Windows Service s
zaznaczone, i pozostaw bez zmian ich domylne wartoci. W polach u dou okna wprowad
haso dla uytkownika root MySQL i kliknij Next.
13
Teraz proces instalacji powinien by ju zakoczony. Jeeli okno MySQL nie otworzy si
automatycznie, uruchom MySQL Workbench z poziomu menu, wybierajc Start/Wszystkie
programy/MySQL.
jeste tutaj 509
instalacja mysql na mac os x
Uaktywnienie PHP w systemie Mac OS X

PHP jest dostarczane wraz z systemem OS X w wersji 10.5 + (Leopard), ale
domylnie nie jest aktywne. Aby uruchomi PHP, naley dokona edycji gwnego
pliku konfiguracyjnego Apache i usun znak komentarza z jednego z wierszy. Plik
nazywa si httpd.conf i jest ukryty w folderze instalacyjnym Apache.
W celu usunicia komentarza musisz poszuka nastpujcego wiersza, ktry jest
poprzedzony znakiem hash (#):
#LoadModule php5_module libexec/apache2/libphp5.so
Aby uaktywni PHP, musisz usun znak hash i zrestartowa serwer. Wacicielem
dokumentu httpd.conf jest root, co znaczy, e aby wprowadzi w nim zmiany, musisz
poda haso. Prawdopodobnie bdziesz te musia dokona edycji pliku php.ini, eby
mg z niego korzysta Apache. Bardziej szczegowe informacje na temat tych
czynnoci oraz uruchomienia PHP znajduj si na stronie http://foundationphp.com/
tutorials/php_leopard.php (strona w jzyku angielskim).
Etapy instalacji MySQL w systemie Mac OS X

1
Przejd na stron:
i kliknij cze MySQL Community Server.
Na potrzeby tego opisu pobieramy wersj 32-bitow. Upewnij si, e pobierzesz wersj
odpowiedni dla swojego systemu operacyjnego.
By moe bdziesz
musia przewin
troch w d.
510
Dodatek B
Kliknij przycisk Download obok nazwy archiwum Mac OS X ver. 10.6 (x86, 32-bit),
DMG Archive.
eby dosta si do
tego miejsca, bdziesz
musia przewin w d
.
Kliknij cze No thanks, just take me to the downloads!, chyba e chcesz si zarejestrowa
i zaoy konto na witrynie MySQL albo ju masz takie konto.
Kontynuuj bez
rejestracji.
jeste tutaj
511
instalacja mysql na mac os x (cig dalszy)
Pobierz instalator
4
Powr na stron:
i kliknij cze MySQL Workbench (GUI Tool).
Kliknij Download, a nastpnie No thanks, just take me to the downloads! (chyba e chcesz si
zarejestrowa i zaoy konto na witrynie MySQL albo ju masz takie konto).
Kontynuuj bez
rejestracji.
Kiedy zakoczy si pobieranie obu plikw, kliknij dwukrotnie plik

mysql-5.5.24- osx10.6-x86.dmg, aby zamontowa instalator, a nastpnie kliknij
dwukrotnie plik mysql-5.5.24- osx10.6-x86.pkg, aby uruchomi instalator pakietu.
Instalator pakietu
512
Dodatek B
Uruchom instalator pakietu

6
Powinien uruchomi si instalator pakietu. Kliknij Dalej, aby przej

do strony Przeczytaj mnie, oraz Dalej, aby przej na stron z licencj.
W nastpnym etapie zostan wywietlone informacje licencyjne na temat MySQL.

Jeli zgodzisz si z podanymi warunkami, kliknij Dalej, a nastpnie Akceptuj.
Ponownie wybierz Dalej, aby zainstalowa MySQL w lokalizacji domylnej.
jeste tutaj 513
Kliknij Instaluj, wprowad nazw uytkownika i haso dla administratora,

po czym kliknij OK, aby rozpocz instalacj.
Instalacja powinna si zacz, a po zakoczeniu zostanie wywietlony komunikat o sukcesie.
Powtrz te same czynnoci dla pliku MySQLStartupItem.pkg.
Instalator pakietu
514
Dodatek B
10
Kliknij dwukrotnie MySQL.prefPane, ktry take znajduje si w mysql-5.5.24- osx10.6-x86.dmg, aby

zainstalowa panel preferencji MySQL, a nastpnie kliknij Start MySQL Server.
Instalator pakietu
jeste tutaj 515
11
516
Kliknij dwukrotnie plik mysql-workbench-gpl-5.2.40.osx-i686.dmg, ktry take pobrae, aby uruchomi

instalator narzdzia MySQL Workbench. Przecignij MySQLWorkbench.app do swojego folderu
Programy i otwrz narzdzie Workbench.
Dodatek B
12
Korzystajc z panelu Server Administration, sprawd, czy Twj serwer dziaa. Jeli panel
jest pusty, kliknij opcj New Server Instance i wybierz serwer do uruchomienia.
13
Utwrz nowe poczenie w sekcji SQL Development, klikajc New Connection, i wypenij pola w oknie,
ktre si otworzy. Nastpnie kliknij dwukrotnie swoje nowe poczenie, aby je otworzy.
W celu uzyskania dalszych informacji na temat MySQL albo o narzdziu MySQL Workbench,
odwied stron http://dev.mysql.com/doc/ (strona w jzyku angielskim).
jeste tutaj 517
Skorowidz
A
addclass, Patrz: metoda addclass

after, Patrz: metoda after
Ajax, 332, 334, 348, 356, 360, 368, 456
ajax, Patrz: metoda ajax
akcesor, 312
alarm, 78, 86, 94
alert, Patrz: alarm
animacja, 211, 214, 218, 223, 228, 232, 235,
236, 238, 242, 244, 250, 292, 490, 492
bezwzgldna, 242
kolejki, 490
wzgldna, 242
animate, Patrz: metoda animate
API, 449, 450, 451, 454, 460, 473, 481
append, Patrz: metoda append
appendTo, Patrz: metoda appendTo
ASP, 347
asynchroniczno, 334
B
baza danych, 367
MySQL, 371, 456
serwer, 371
before, Patrz: metoda before
biblioteka jQuery, Patrz: jQuery biblioteka
JavaScript, 41
UI Effects, 492
button, Patrz: metoda button
C
CDN, 487
children, Patrz: metoda children
Chrome, Patrz: przegldarka Google Chrome
clearInterval, Patrz: metoda clearInterval
click, Patrz: metoda click
Cold Fusion, 347
contains, Patrz: metoda contains
content delivery networks, Patrz: CDN
content distribution networks, Patrz: CDN
Crockford Douglas, 391
cross-site scripting, Patrz:skrypt midzy
witrynami
CSS, 30, 39, 40, 84, 88, 410
display, 224
identyfikator, 49, 50, 52, 59, 61, 77, 83,
86, 103
klasa, 49, 50, 83, 84, 85, 86, 88, 89, 96, 97,
103, 151, 154, 166, 286, 292, 492
opacity, 224, 225
pozycjonowanie, 218
D
dane
baza, Patrz: baza danych
sanityzacja, 368
518
Skorowidz
serializacja, 368
walidacja, 368, 442, 491
data, Patrz: metoda data
datepicker, Patrz: metoda datepicker
delay, Patrz: metoda delay
dequeue, Patrz: metoda dequeue
detach, Patrz: metoda detach
DOM, Patrz: HTML Obiektowy Model
Dokumentu
domknicie, Patrz: JavaScript domknicie
Dragonfly, Patrz: przegldarka Opera
drive-by scripting, Patrz:skrypt
przekierowujcy
Dump, 489
each, Patrz: metoda each

easing, 492
EditPlus, 31
efekty, Patrz: jQuery efekty
element, 40, 42, 44, 45, 47, 49, 50, 51, 53, 59,
69, 71, 75, 78, 84, 85, 86, 87, 96, 102, 110,
115, 117, 121, 126, 127, 143, 164, 166, 185,
188, 204, 342, 460
empty, Patrz: metoda empty
eq, Patrz: metoda eq
equal, Patrz: metoda equal
eXtensible Markup Language, Patrz: XML
fadeIn, Patrz: metoda fadeIn

fadeOut, Patrz: metoda fadeOut
fadeTo, Patrz: metoda fadeTo
filter, Patrz: metoda filter
find, Patrz: metoda find
first, Patrz: metoda first
formularz, 364, 409, 443
pole tekstowe, 364
lista rozwijana, 364
walidacja, Patrz: dane walidacja
funkcja, 48, 52, 69, 78, 115, 119, 136, 137, 148,
184, 254, 255, 256, 341, 494
anonimowa, 137, 138
array_push, 390
change, 427
create, 427
czasowa, 230
date, 351
deklaracja, 138
easingu, 412, 492
getJSON, 405
getRandom, 312, 315, Patrz te: warto
losowa
json_encode, 390, 405
losowa, 312, 315, Patrz te: warto
losowa
nazwa, 138
obsugi zdarze, 119, 292, 427

reset, 319, 320
samowywoujca si, 347, 355, Patrz te:
funkcja anonimowa
slide, 427
start, 427
stop, 427
warto, 143, 150, 158
zmienne, 141, 142, 150, 158
G
generator liczb losowych, 230
get, Patrz: metoda get
getJSON, Patrz: metoda getJSON
getScript, Patrz: metoda getScript
getter, 312
Google
powoka, Patrz: powoka
przegldarka, Patrz: przegldarka Google
Chrome
Google Maps, 449, 450, 451, 453, 473
geokodowanie, 473
trasy dojazdw, 473
hide, Patrz: metoda hide

HTML, 30, 39, 40, 88, 334, 335, 350
formularz, Patrz: formularz
Obiektowy Model Dokumentu, 43, 44, 47,
115, 159, 176, 177, 185, 195, 210, 226,
333, 336
sekcja, Patrz: sekcja
Hypertext Processor, Patrz: PHP
inArray, Patrz: metoda inArray

indeks, 146, 262
instrukcja
else, 145, 158, 275, 389
else if, 275, 280, 389
if, 145, 275, 276
insert, 374
select, 381, 384
warunkowa, 389
interakcja, 412, 437
Internet Explorer, Patrz: przegldarka Internet
Explorer
J
JavaScript, 30, 41, 45, 47, 55, 88, 132, 333, 334
domknicie, 494, 495
interpreter, 47, 115, 185, 224, 238
logika warunkowa, Patrz: logika
warunkowa
operator, 243
zmienna, 92
Skorowidz
JavaScript Object Notation, 356
jzyk
ASP, Patrz: ASP
Cold Fusion, Patrz: Cold Fusion
JSP, Patrz: JSP
PHP, Patrz: PHP
skryptowy, 40
jQuery
animacja, 211, 224
biblioteka, 32, 71, 132, 251, 329, 412,
446, 492
debugowanie kodu, 489
efekty, 62, 211, 224, 234, 235
funkcja, Patrz: funkcja
szablon, 495
tablica, Patrz: tablica
UI, 244, 407, 412, 437, 446, 492
wersja deweloperska, 32
wersja produkcyjna, 32
wtyczki, 489, 493
zdarzenie, 78, 115, 118, 120, 127, 158,
348, 356
JSON, 260, 256, 361, 386, 387, 391, 397,
405, 456
JSP, 347
K
kaskadowe arkusze stylw,
Patrz: CSS
Keyhole Markup Language,
Patrz: KML
KML, 336
kolejka, 490
komunikat alarmowy, 82
konkatenacja, 93
konstruktor, 256, 288, 452, 481
krzywka, 67, 247, 323, 403, 479
kwerenda, 51
last, Patrz: metoda last

length, Patrz: metoda length
Lerdorf Rasmus, 391
licznik, 238, 265, 291, 292
lista
nienumerowana, 164
rozwijana, 364, 419, 464
load, Patrz: metoda load
logika warunkowa, 144, 145, 158, 316,
356, 400
acuch
metod, Patrz: metoda spinanie
tekstowy, 86, 143, 185, 186, 253, 351, 368,
255, 386
M
marker, 460
Math.floor, Patrz: metoda Math.floor
Math.random, Patrz: metoda Math.random
metoda, 71,110, 254, 484, 485
addclass, 154
after, 195, 210
ajax, 340, 356, 360, 387
animate, 235, 236, 242, 250
append, 95
appendTo, 273
before, 195, 210
button, 422, 443, 446
children, 176, 177, 197, 198, 210, 342
clearInterval, 300, 326
click, 78, 81, 82
contains, 150
data, 490
datepicker, 417, 418, 446
delay, 299, 346
dequeue, 490
detach, 172, 184, 210
each, 204, 208, 342
empty, 184, 281, 282, 288
eq, 197, 210
equal, Patrz: metoda eq
fadeIn, 60, 63, 225, 232, 250
fadeOut, 225, 232, 250
fadeTo, 225, 250
filter, 198, 210
filtrujca, 197, 210
find, 208, 342
first, 197, 210
get, 356, 360
get, 367, 400
getJSON, 356, 360, 405
getScript, 356, 360
hide, 224, 232
inArray, 267, 268
last, 197, 210
length, 261
load, 356, 360
acuchowa, Patrz: metoda spinanie
Math.floor, 94, 107
Math.random, 94, 107
next, 176
noConflict, 488
not, 198, 210
onBlur, 292, 295, 326
onFocus, 292, 295, 326
parent, 176, 177, 178, 184, 210
parents, 184, 198
post, 356, 360, 367, 378, 387, 400
prev, 176
queue, 490
remove, 102, 107, 172, 184, 210
replaceWith, 190, 191, 193, 194, 210
serialize, 368
serializeArray, 368, 405

setInterval, 299, 301, 346, 356
setTimeout, 230, 232, 291, 299, 301,
326, 346,
show, 224
siblings, 184
slice, 198, 208, 210
slideDown, 62, 69, 226, 250
slideLeft, 227, 235
slideRight, 227, 235
slideToggle, 62, 69, 226, 250
slideUp, , 62, 69, 226, 250
spinanie, 178, 229
statyczna, 150
stop, 244
switch, 280
toggle, 224, 232
trigger, 127, 288
MySQL, 371, 380, 405
next, Patrz: metoda next

noConflict, Patrz: metoda noConflict
not, Patrz: metoda not
O
obiekt, 254, 257, 260, 261, 288, 386, 447, 451
API, 460
instancja, 256
jednokrotnego uycia, 260
JSON, Patrz: JSON
wielokrotnego uycia, 260
window, 292, 320, 326
waciwo, 255
XMLHttpRequest, 347
zakres wanoci, 494
Obiektowa Notacja JavaScriptu,
Patrz: JSON
Obiektowy Model Dokumentu,
Patrz: HTML Obiektowy Model
Dokumentu
onBlur, Patrz: metoda onBlur
onFocus, Patrz: metoda onFocus
OOXML, 336
Open Office XML, Patrz: OOXML
Opera, Patrz: przegldarka Opera
operator, Patrz: JavaScript operator
kropka, 257, 386
logiczny, 276, 288, 389
porwnania, 276, 288, 389
trjargumentowy, 276, 280
overlay, Patrz: powoka
P
para klucz/warto, 389
parent, Patrz: metoda parent
jeste tutaj 519
Skorowidz
parents, Patrz: metoda parents
ptla
do...while, 265, 266, 288, 388
for, 265, 266, 288, 388
for...in, 273
foreach, 388
nieskoczona, 265, 291
while, 273, 276, 388
PHP, 347, 356, 360, 367, 376, 383, 388, 389,
391, 400, 405, 498, 502
zagroenia, 400
PHPMyAdmin, 380
post, Patrz: metoda post
powoka, 471
prev, Patrz: metoda prev
przegldarka
Dragonfly dla Opery, 30
Firebug dla Firefox, 30
Google Chrome, 30, 184, 301, 341
Internet Explorer, 30, 301
Mozilla Firefox, 301
odwieanie, 42
Safari, 30
silnik, 218, 238
przycisk, 61, 102, 169, Patrz te: metoda
button, widget przycisku
PSPad, 31
queue, Patrz: metoda queue
R
RDBMS, 371
RDF Site Summary, Patrz: RSS
Real Simple Syndication, Patrz: RSS
Relational Database Management Systems,
Patrz: RDBMS
remove, Patrz: metoda remove
replaceWith, Patrz: metoda
replaceWith
RSS, 336, 360
Safari, Patrz: przegldarka Safari

Scalable Vector Graphics, Patrz: SVG
sekcja, 75
sekwencjonowanie akcji, 490
selektor, 45, 48, 49, 69, 71, 83, 87, 99, 110, 119,
166, 184, 342, 486
CSS, 50, 59, 87
identyfikujcy, Patrz: CSS
identyfikator
potomka, 99, 110
this, 99, 107, 110, 204, 208
znacznika, Patrz: selektor
520
Skorowidz
serializacja danych, Patrz: dane

serializacja
serialize, Patrz: metoda serialize
serializeArray, Patrz: metoda serializeArray
serwer
Apache, 31, 499, 502
MySQL, 31, 350, 498, 500, 504
PHP, 31, 350, 498, 499, 502
WWW, 31, 498, 499, 501
setInterval, Patrz: metoda setInterval
setTimeout, Patrz: metoda setTimeout
show, Patrz: metoda show
siblings, Patrz: metoda siblings
silnik selektorowy, 45
Simple Object Access Protocol, Patrz: SOAP
skrypt, 40, 61, 88, 128
midzy witrynami, 400
PHP, 405
przekierowujcy, 400
slice, Patrz: metoda slice
slideDown, Patrz: metoda slideDown
slideLeft, Patrz: metoda slideLeft
slideRight, Patrz: metoda slideRight
slideToggle, Patrz: metoda slideToggle
slideUp, Patrz: metoda slideUp
sowo kluczowe
as, 388
echo, 389
function, 494
print, 389
suchacz zdarze, 115, 116, 121, 123, 474
SOAP, 336, 360
spinanie, Patrz: metoda spinanie
SQL, 405
stop, Patrz: metoda stop
strona, 88
interaktywna, 38, 57
statyczna, 38
struktura, 44, 88
suwak, 426, 442, 446
SVG, 336, 360
switch, Patrz: metoda switch
Systemy Zarzdzania Relacyjnymi Bazami
Danych, Patrz: RDBMS
szablon, Patrz: jQuery szablon
T
tablica, 186, 187, 203, 204, 208, 210, 253, 255,
261, 263, 288, 385, 386, 388, 490
asocjacyjna, 367, 389, 390, 397
terminator, 184
TextPad, 31
TextWrangler, 31
this, 99, 110, 204, 208, 493
toggle, Patrz: metoda toggle
trigger, Patrz: metoda trigger
U
UML, 255, 260
Unified Modeling Language, Patrz: UML
V
Variable-Debugger, 489
W
walidacja
danych, Patrz: dane walidacja
formularzy, Patrz: dane walidacja
waek malarski, 437
warto losowa, 92, 147, 311, Patrz te:
funkcja losowa
wersja
deweloperska, 32
produkcyjna, 32
widget, 412, 419, 446
autouzupeniania, 442
button, 446
datepicker, 446
o zmiennych rozmiarach, 437
przecigalny, 437
przycisku, 422
sortowalny, 437
upuszczalny, 437
wybieralne, 437
wstrzyknicie kodu SQL,
wtyczka, 329, 410
idTabs, 329
w widgetami, 412
z efektami, 412
z interakcjami, 412
X
XHTML, 336
XML, 334, 335, 336, 350, 356, 360, 361, 363,
391
Z
zagroenia, 400
zasada tosamego pochodzenia, 341
zdarzenie, Patrz: jQuery zdarzenie
hover, 153
nasuchiwanie, 474
suchacz, Patrz: suchacz zdarze
usuwanie, 122
wizanie, 117
zmienna, 92, 93, 96, 184, 185, 253, 388
lokalna, 494
zakres wanoci, 494
Zunifikowany Jzyk Modelowania, Patrz:
UML
zwracanie, 51, 87

Benedetti R. - JQuery. Rusz Głową

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Benedetti R. - JQuery. Rusz Głową

Uploaded by

Copyright:

Available Formats

Tytu oryginau: Head First jQuery

Tumaczenie: Ireneusz Jakbik

Pole ksik na Facebook.com

Zachwyty pierwszych recenzentw nad jQuery. Rusz gow!

Jim Doran, inynier oprogramowania na Uniwersytecie Johna Hopkinsa

Pochway innych ksiek z serii Rusz gow!

Pochway innych ksiek z serii Rusz gow!

Pochway dla innych ksiek z tej serii

Inne ksiki z serii Rusz gow!

Dedykujemy t ksik Mistrzom Jedi JavaScriptu: Johnowi Resigowi

Ryan Benedetti posiada tytu magistra sztuk

Ronan Cranley od chwili przyjazdu w 2006 roku

Spis treci (skrcony)

Zaczynamy z jQuery: Akcja na stronach internetowych

Selektory i metody: Chwytaj i w drog

Zdarzenia i funkcje jQuery: Niech si co dzieje na Twojej stronie

Manipulowanie stron internetow za pomoc jQuery:

Efekty i animacja w jQuery: Nieco wdziku na Twojej stronie

jQuery i JavaScript: Luke jQuery, jestem twoim ojcem!

Niestandardowe funkcje dla niestandardowych efektw:

jQuery i Ajax: Prosz poda dane

Obsuga danych JSON: Kliencie, oto serwer

Interfejs uytkownika w jQuery: Diametralna zmiana wygldu

jQuery i API: Obiekty, wszdzie obiekty

Ostatki: Dziesi najwaniejszych rzeczy (o ktrych nie napisalimy)

Konfiguracja rodowiska programistycznego:

Spis treci (z prawdziwego zdarzenia)

Dla kogo jest ta ksika?

Metapoznanie: mylenie o myleniu

Oto co moesz zrobi, aby zmusi swj mzg do posuszestwa

Zesp recenzentw technicznych

Akcja na stronach internetowych

Chcesz wada stronami

HTML i CSS s w porzdku, ale...

potrzebujesz mocy skryptu

Nadchodzi jQuery (i JavaScript)!

Spojrzenie do wntrza przegldarki

Ukryta struktura strony

Dziki jQuery drzewo DOM nie jest takie straszne

jQuery wybiera elementy tak samo jak CSS

Stylu, przedstawiam ci skrypt

Selektory jQuery do usug

Twoja pierwsza fucha w jQuery

Skonfiguruj swoje pliki HTML i CSS

Niechaj blado bdzie z Tob

Uratowae kampani Kudaci Przyjaciele

Twj niezbdnik jQuery

Skacz z radoci potrzebuje Twojej pomocy

Zdarzenie click w zblieniu

Dodaj do strony metod click

Przydzielanie elementw do klas

Pospinaj swoj stron

Tymczasem na naszej licie

Tworzenie miejsca w pamici

Tymczasem w naszym kodzie...

Wstaw komunikat za pomoc metody append

Wszystko dziaa wietnie, ale...

Zaprzgnij $(this) do pracy

Pozbywaj si na dobre za pomoc remove

Schodzimy w d z selektorem potomka

Twoja kolej na skakanie z radoci

Twj niezbdnik jQuery

Zdarzenia i funkcje jQuery

Niech si co dzieje na Twojej stronie