Tytuł oryginału: Head First jQuery Tłumaczenie: Ireneusz Jakóbik 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 O’Reilly 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 zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail:
[email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jquerg_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland.
• Poleć książkę na Facebook.com • Kup w wersji papierowej • Oceń książkę
• Księgarnia internetowa • Lubię to! » Nasza społeczność
Zachwyty pierwszych recenzentów nad jQuery. Rusz głową! jQuery pozwala na robienie zdumiewających rzeczy za pomocą JavaScriptu w tak prosty sposób, że wygląda to wręcz na oszustwo. W książce tej pokazano, jak szybko rozwiązywać problemy zaczerpnięte z rzeczywistego świata. W ramach bonusu poznasz kluczowe aspekty JavaScriptu, konfigurację środowiska programistycznego i nieco PHP/MySQL. To solidna książka.
Jim Doran, inżynier oprogramowania na Uniwersytecie Johna Hopkinsa W przeciwieństwie do wypełnionych technicznym żargonem i nieprzystępnych książek o programowaniu jQuery. Rusz głową prowadzi początkujących czytelników krok po kroku w kierunku utworzenia pierwszej strony w jQuery w sposób zabawny i zrozumiały. Lindsey Skouras, adwokat i programista samouk Ryan Benedetti i Ronan Cranley zabrali się za potencjalnie budzący obawy konglomerat technologii (jQuery, DOM, Ajax, HTML5, CSS) i rozbili go na lepiej przyswajalne koncepcje, które sprawiają, że poznawanie materiału staje się zabawą. Bill Mietelski, inżynier oprogramowania JavaScript ponownie wyłonił się jako język programowania odgrywający znaczącą rolę w sporej mierze dzięki zbiorowi najwyższej jakości dodatkowych bibliotek, wśród których kluczowym graczem jest jQuery. jQuery. Rusz głową udostępnia nowoczesnemu programiście pożyteczne wskazówki oraz praktyczne rady dotyczące tej kluczowej technologii języka JavaScript. Paul Barry, autor i wykładowca informatyki na politechnice w Carlow
Pochwały innych książek z serii Rusz głową! Analiza i Projektowanie Obiektowe. Rusz głową! to świeże spojrzenie na zagadnienia związane z AiPO. To, co wyróżnia tę książkę, to nacisk na naukę. Autorzy sprawili, że zawartość AiPO jest dostępna i przydatna dla praktyków. Ivar Jacobson, Ivar Jacobson Consulting Właśnie skończyłem lekturę AiPO i uwielbiam tę książkę! To, co najbardziej mi się w niej podoba, to skupienie się na tym, dlaczego wykonujemy AiPO - po to, żeby pisać wspaniałe oprogramowanie! Kyle Brown, Distinguished Engineer, IBM Ukryta za śmiesznymi rysunkami i zwariowaną czcionką czai się poważna, inteligentna i świetnie opracowana prezentacja zorientowanej obiektowo analizy i projektowania. Kiedy czytałem tę książkę, czułem się, jakbym zaglądał przez ramię profesjonalnemu ekspertowi wyjaśniającemu mi, które zagadnienia są ważne na każdym z etapów i dlaczego. Edward Sciore, profesor nadzwyczajny, Katedra Informatyki, Boston College Podsumowując, Head First Software Development jest znakomitym źródłem wiedzy dla każdego, kto chciałby sformalizować swoje umiejętności programistyczne w sposób nieprzerwanie angażujący czytelnika na wielu różnych poziomach. Andy Hudson, Linux Format Jeśli jesteś początkującym twórcą oprogramowania, Head First Software Development skieruje cię na właściwe tory. A jeżeli jesteś doświadczonym (czytaj: o długim stażu) programistą, nie odkładaj tej książki pochopnie na bok... Thomas Duff, Duffbert's Random Musings W Java. Rusz głową! każdy znajdzie coś dla siebie. Ten, kto przyswaja informacje przez kanał wzrokowy, i ten, kto przyswaja przez kanał kinestetyczny - każdy może uczyć się z tej książki. Pomoce wizualne ułatwiają zapamiętywanie, a sama książka jest napisana bardzo przystępnym stylem — całkowicie innym, niż w większości podręczników na temat Javy... Java. Rusz głową! to cenna książka. Mogę wyobrazić sobie, że seria Rusz głową! jest używana w salach lekcyjnych w szkołach średnich albo na kursach dla dorosłych. A ja z całą pewnością będę powracał do tej książki, jak i polecał ją innym. Warren Kelly, Blogcritics.org, marzec 2006 W miejsce nauczania w stylu podręcznikowym Head First iPhone and iPad Development oferuje dowcipne, angażujące, a nawet przyjemne podejście do nauki programowania w środowisku iOS. Dzięki omówieniu kluczowych technologii, łącznie z core data, a nawet istotnych aspektów, takich jak projektowanie interfejsów, zawartość książki jest starannie dobrana i znakomita. W którym innym miejscu można by być świadkiem pogadanki przy kominku między UIWebView a UITextField! Sean Murphy, projektant i programista iOS
Pochwały innych książek z serii Rusz głową! Kolejną miłą cechą Java. Rusz głową! Wydanie II jest pobudzanie apetytu czytelnika na więcej. Dzięki późniejszemu omówieniu bardziej zaawansowanych zagadnień, takich jak Swing i RML, wprost nie można się doczekać, aby zagłębić się w te interfejsy API oraz kod, które wykorzystane w bezbłędnych, liczących 100 000 wierszy programach przyniosą Ci sławę i bogactwo. Znalazło się tam też sporo materiału, a nawet niektóre z dobrych praktyk na temat sieci i wątków, które są moim słabym punktem. W tym konkretnym przypadku nie mogłem się powstrzymać od śmiechu, gdy autorzy skorzystali z operatorki centrali telefonicznej z lat pięćdziesiątych — tak, właśnie tej pani z ogromnym kokiem, która ręcznie przełącza wtyczki — jako analogii dla portów TCP/IP... naprawdę powinieneś udać się do księgarni i przewertować Java. Rusz głową! Wydanie II. Nawet jeśli znasz już Javę, być może poznasz jakąś nową rzecz lub dwie. A jeżeli nie, zwykłe przejrzenie stron będzie stanowić niezłą zabawę. Robert Eckstein, Java.sun.com Oczywiście to nie zakres materiału sprawia, że Java. Rusz głową! tak się wyróżnia — to styl i podejście. Książka ta jest tak bardzo oddalona od podręczników informatycznych albo instrukcji obsługi, jak to jest tylko możliwe w przypadku korzystania z rysunków, łamigłówek albo magnesików na lodówkę (tak, magnesików...). Zamiast zwykłych ćwiczeń dla czytelnika jesteś proszony o udawanie kompilatora i skompilowanie kodu albo o uzyskanie programu przez wypełnienie pustych miejsc albo... chyba chwytasz, o co chodzi... Pierwsze wydanie tej książki zyskało jedną z naszych rekomendacji jako pozycja dla początkujących w Javie i z obiektami. Nowe wydanie nie rozczarowuje i zasłużenie kroczy w ślady swojej poprzedniczki. Jeśli należysz do osób, które zasypiają przy tradycyjnych książkach informatycznych, przy tej najprawdopodobniej zachowasz przytomność i będziesz 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... Jeśli nie przeszedłeś chrztu ognia, używając czegoś tak skomplikowanego jak Dreamweaver, książka ta będzie świetnym sposobem na nauczenie się dobrego projektowania stron WWW. Robert Pritchett, MacCompanion Czy można się nauczyć prawdziwego projektowania stron internetowych z książki? Head First Web Design jest kluczem do projektowania przyjaznych dla użytkownika witryn, począwszy od wymagań klienta, przez ręcznie rysowane scenorysy, aż do poprawnie działających stron online. To, co odróżnia tę książkę od innych pozycji typu 'jak zbudować stronę internetową', to wykorzystanie w niej najnowszych zdobyczy z zakresu nauk kognitywnych i wiedzy o nauczaniu w celu udostępnienia wizualnego doświadczenia poznawczego, obfitującego w obrazy i zaprojektowanego zgodnie z tym, w jaki sposób najlepiej pracuje i uczy się mózg. W rezultacie powstała książka będąca ogromnym wkładem w podstawy projektowania stron internetowych, która będzie ważnym kluczem do sukcesu każdej biblioteki ogólnoinformatycznej. Diane C. Donovan, California Bookwatch: The Computer Shelf Zdecydowanie polecam Head First Web Design wszystkim kolegom programistom, którzy chcą poznać bardziej artystyczną stronę swojej profesji. Claron Twitchell, Utah Java User Group
Pochwały dla innych książek z tej serii Inne książki na ten sam temat: jQuery. Leksykon kieszonkowy JavaScript i jQuery. Nieoficjalny podręcznik jQuery. Od nowicjusza do wojownika ninja JQuery. Poradnik programisty
Inne książki z serii Rusz głową! C#. Rusz głową! Excel. Rusz głową! Java. Rusz głową! Wydanie II Wzorce projektowe. Rusz głową! SQL. Rusz głową! Analiza i projektowanie obiektowe. Rusz głową! Head First Ruby on Rails. Edycja polska (Rusz głową!) Head First. Statystyka. Edycja polska (Rusz głową!) Head First Algebra. Edycja polska (Rusz głową!) Head First. Fizyka. Edycja polska (Rusz głową!) Head First. Sieci komputerowe. Edycja polska (Rusz głową!) Head First Web Design. Edycja polska (Rusz głową!) Head First PHP & MySQL. Edycja polska (Rusz głową!) Head First Ajax. Edycja polska (Rusz głową!) Head First JavaScript. Edycja polska (Rusz głową!) Head First Software Development. Edycja polska (Rusz głową!) Head First HTML with CSS & XHTML. Edycja polska (Rusz głową!) Head First Servlets & JSP. Edycja polska (Rusz głową!)
Dedykujemy tę książkę Mistrzom Jedi JavaScriptu: Johnowi Resigowi (twórcy i wiodącemu programiście biblioteki jQuery), Douglasowi Crockfordowi, Davidowi Flanaganowi i Brandonowi Eichowi. Moim trzem cudom: Josie, Vinowi i Shonnie. Ryan Caitlin i Bono, dziękuję za wszystko! Ronan
autorzy
Ryan
Ronan
Ryan Benedetti posiada tytuł magistra sztuk pięknych w dziedzinie twórczego pisania zdobyty na Uniwersytecie Montany i pracuje na Uniwersytecie Portlandzkim jako projektant stron internetowych i specjalista od multimediów. W pracy wykorzystuje jQuery, Flash, ActionScript, Adobe’s Creative Suite, Liferay Portal, język szablonów Apache’s Jakarta Velocity i Drupal. Przez siedem lat Ryan pracował jako szef Katedry Technologii Informacyjnej i Inżynierii Komputerowej w Salish Kooteni College. Przedtem był redaktorem i specjalistą od systemów informacyjnych w programie badawczym dotyczącym rzek, potoków i mokradeł prowadzonym przez Katedrę Leśnictwa Uniwersytetu Montany. Wiersze Ryana były publikowane w Cut Bank i Exquisite Corpse Andreia Codrescu. Swój wolny czas spędza, malując, rysując, grając bluesa na harmonijce i praktykując zazen. Najlepsze chwile spędza w Portland w stanie Oregon z córką, synem i swoją ukochaną Shonną. Uwielbia też powłóczyć się ze swoimi zwierzęcymi kumplami: Rockym, Munchem, Festerem i Tazem.
8
Ronan Cranley od chwili przyjazdu w 2006 roku z Dublina w Irlandii do Portland w stanie Oregon pracował na Uniwersytecie Portlandzkim, przechodząc ścieżkę od programisty aplikacji WWW, przez starszego programistę/menedżera systemów, do zastępcy dyrektora do spraw WWW i administrowania systemami. Tytuł licencjata informatyki otrzymał z honorami w 2003 roku na Politechnice Dublińskiej. Podczas pracy w koledżu, a także na wcześniejszym stanowisku w ESB International w Dublinie oraz na obecnym na Uniwersytecie Portlandzkim, Ronan pracował nad szeregiem różnych projektów w PHP, VB.NET, C# oraz Javie, w tym — chociaż nie tylko — nad systemami GIS po stronie klienta, amatorskim systemem zarządzania treścią, 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 spędza wiele godzin na boisku piłkarskim, polu golfowym i spacerując ze swoją żoną Caitlin i angielskim buldogiem Bono oraz poznając, na ile tylko może, północno-zachodnie wybrzeże Pacyfiku.
spis treści
Spis treści (skrócony) Wstęp
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 wdzięku na Twojej stronie
211
6.
jQuery i JavaScript: Luke jQuery, jestem twoim ojcem!
251
7.
Niestandardowe funkcje dla niestandardowych efektów: Co ostatnio dla mnie zrobiłeś?
289
8.
jQuery i Ajax: Proszę podać dane
327
9.
Obsługa danych JSON: Kliencie, oto serwer
361
10.
Interfejs użytkownika w jQuery: Diametralna zmiana wyglądu
407
71
11.
jQuery i API: Obiekty, wszędzie obiekty
447
A
Ostatki: Dziesięć najważniejszych rzeczy (o których nie napisaliśmy)
483
B
Konfiguracja środowiska programistycznego: Przygotuj się do przyszłych sukcesów
497
Skorowidz
518
Spis treści (z prawdziwego zdarzenia) Wstęp Twój mózg i jQuery. Właśnie próbujesz się czegoś nauczyć, tymczasem Twój mózg wyświadcza Ci przysługę, starając się, abyś niczego nie zapamiętał. Twój mózg myśli: „Lepiej pozostawić miejsce na ważne rzeczy takie jak to, których dzikich zwierząt unikać i czy to zły pomysł jeździć nago na snowboardzie”. Jak więc oszukasz swój mózg, aby myślał, że Twoje życie zależy od jQuery?
Dla kogo jest ta książka?
24
Metapoznanie: myślenie o myśleniu
27
Oto co zrobiliśmy
28
Oto co możesz zrobić, aby zmusić swój mózg do posłuszeństwa
29
Przeczytaj mnie
30
Pobierz jQuery
32
Konfiguracja folderów
33
Zespół recenzentów technicznych
34
Podziękowania
35
9
spis treści
1
Zaczynamy z jQuery
Akcja na stronach internetowych Chcesz więcej dla swoich stron. Masz w zanadrzu HTML oraz CSS i chciałbyś wzbogacić swoje umiejętności o pisanie skryptów, ale nie masz zamiaru spędzić całego życia, pisząc je wiersz po wierszu. Potrzebujesz biblioteki skryptów, która pozwoli Ci zmieniać strony internetowe w locie. A skoro wyrażamy już nasze życzenia, to może dodać jeszcze współpracę z Ajaksem i PHP? Czy da się zrobić w trzech wierszach to, do czego większość języków po stronie klienta potrzebuje piętnastu? Pobożne życzenia? W żadnym wypadku! Musisz zapoznać się z jQuery.
jQuery( ) $( )
$( )
Słyszałem kliknięcie przycisku.
10
Chcesz władać stronami
38
HTML i CSS są w porządku, ale...
39
…potrzebujesz mocy skryptu
40
Nadchodzi jQuery (i JavaScript)!
41
Spojrzenie do wnętrza przeglądarki
43
Ukryta struktura strony
44
Dzięki jQuery drzewo DOM nie jest takie straszne
45
Jak to działa?
47
jQuery wybiera elementy tak samo jak CSS
49
Stylu, przedstawiam ci skrypt
50
Selektory jQuery do usług
51
jQuery przetłumaczony
52
Twoja pierwsza fucha w jQuery
56
Skonfiguruj swoje pliki HTML i CSS
60
Wysuń się...
62
Niechaj bladość będzie z Tobą
63
Uratowałeś kampanię Kudłaci Przyjaciele
66
Twój niezbędnik jQuery
69
Przesuń element do góry.
Interpreter JavaScriptu
spis treści
2
Selektory i metody
Chwytaj i w drogę jQuery pomaga chwytać elementy strony internetowej i robić z nimi różne rzeczy. W tym rozdziale zagłębimy się w selektory i metody jQuery. Dzięki selektorom możemy chwytać elementy na stronie, a metody pozwalają na robienie z nimi rozmaitych sztuczek. Podobnie jak wielka księga zaklęć magicznych, biblioteka jQuery pozwala nam zmieniać masę rzeczy w locie. Możemy sprawiać, że obrazy rozpływają się w powietrzu i pojawiają znikąd. Możemy wybrać określony fragment tekstu i w animowany sposób zmienić rozmiar jego czcionki. Rozpocznijmy więc pokaz — złapmy kilka elementów strony i do roboty!
„Skacz z radości” potrzebuje Twojej pomocy Jakie są wymogi projektu?
72 73
Zagłębiamy się w sekcje
75
Zdarzenie click w zbliżeniu
78
Dodaj do strony metodę click
81
Bądź bardziej konkretny
83
Przydzielanie elementów do klas
84
ID-entyfikowanie elementów
85
Pospinaj swoją stronę
88
Tymczasem na naszej liście
91
Tworzenie miejsca w pamięci
92
Łącz za pomocą konkatenacji
93
Tymczasem w naszym kodzie...
94
Wstaw komunikat za pomocą metody append
95
Wszystko działa świetnie, ale...
97
Daj mi $(this)
99
Zaprzęgnij $(this) do pracy
100
Pozbywaj się na dobre za pomocą remove
102
Schodzimy w dół z selektorem potomka
103
Twoja kolej na skakanie z radości
109
Twój niezbędnik jQuery
110
11
spis treści
3 Słuchacz zdarzeń słyszy zdarzenie i przekazuje je do...
12
Zdarzenia i funkcje jQuery
Niech się coś dzieje na Twojej stronie jQuery ułatwia dodawanie akcji oraz interaktywności do każdej strony internetowej. W tym rozdziale przyjrzymy się temu, jak sprawić, żeby strona reagowała, kiedy użytkownicy wchodzą z nią w interakcję. Sprawienie, że kod będzie reagował na działania użytkownika, wyniesie Twoją witrynę na zupełnie nowy poziom. Zajmiemy się też tworzeniem funkcji wielokrotnego użycia, dzięki czemu kod napiszesz raz, ale już korzystać z niego będziesz wielokrotnie.
...interpretera JavaScriptu, który sprawdza, co trzeba zrobić po każdym zdarzeniu...
Twoja znajomość jQuery znowu jest potrzebna
112
Facet od pieniędzy ma rację...
113
Dodawanie zdarzeń na stronę
115
Za kulisami słuchacza zdarzeń
116
Wiązanie zdarzenia
117
Wyzwalanie zdarzenia
118
Usuwanie zdarzenia
122
Weźmy się za bary elementy
126
Struktura Twojego projektu
132
Dodajemy funkcje
136
Śrubki i trybiki funkcji
137
Funkcja anonimowa
138
Funkcje nazwane jako funkcje obsługi zdarzeń
139
Przekazywanie zmiennej do funkcji
142
Funkcja może też zwracać wartość
143
Korzystaj z logiki warunkowej w celu podejmowania decyzji
145
„Skacz z radości” potrzebuje jeszcze większej pomocy
149
Metody mogą zmieniać CSS
151
Dodaj zdarzenie hover
153
To już prawie wszystko...
155
Twój niezbędnik jQuery
158
spis treści
4
Manipulowanie stroną internetową za pomocą jQuery
Zmodyfikuj drzewo DOM To, że strona skończyła się pobierać, nie znaczy od razu, że musi ona zachowywać tę samą strukturę. W rozdziale 1. zobaczyliśmy, jak podczas wczytywania strony, w celu ustalenia jej struktury, jest konstruowane drzewo DOM. W bieżącym rozdziale dowiemy się, jak poruszać się w górę i w dół struktury drzewa DOM i jak pracować z hierarchią elementów oraz relacjami rodzic – dziecko, aby za pomocą jQuery zmieniać w locie strukturę strony.
Restauracja w Webowicach chce interaktywnego menu
Twój element
160
Dla wegetarian
161
Poklasyfikuj swoje elementy
166
Pora na przyciski
169
Co teraz?
171
Biegamy po gałęziach drzewa DOM
176
Wspinaczkowe metody przechodzenia drzewa
177
Metody łańcuchowe — aby sięgać jeszcze dalej
178
Zmienne mogą przechowywać też elementy
185
I znowu ten dolar...
186
Poszerz swoje możliwości przechowywania o tablice
187
Przechowuj elementy w tablicy
188
Wymieniaj elementy za pomocą replaceWith
190
Jak może nam pomóc replaceWith?
191
Zastanów się, zanim użyjesz replaceWith
193
replaceWith nie sprawdza się w każdej sytuacji
194
Wstawienie zawartości HTML do drzewa DOM
195
Użyj metod filtrujących w celu zawężenia wyboru (część 1.)
197
Użyj metod filtrujących w celu zawężenia wyboru (część 2.)
198
Przywróć hamburgera
201
A co z mięsem?
202
Treściwa tablica
203
Metoda each przegląda tablice
204
To już wszystko... prawda?
207
Twój niezbędnik jQuery
210
13
spis treści
5
14
Efekty i animacja w jQuery
Nieco wdzięku na Twojej stronie Sprawianie, że na Twojej stronie będą się dziać różne rzeczy, to niezły pomysł, ale tylko do czasu. Jeśli nie będzie ona wyglądać atrakcyjnie, ludzie nie zechcą z niej korzystać. Dlatego właśnie przydadzą Ci się efekty i animacja w jQuery. W bieżącym rozdziale nauczysz się, co zrobić, aby wraz z upływem czasu elementy zmieniały swoje miejsce na stronie, jak pokazać lub ukryć określony element albo jak go powiększyć lub zmniejszyć, a wszystko to na oczach użytkownika. Dowiesz się też, jak zakładać harmonogramy animacji, aby uruchamiały się one w różnych odstępach czasu, co nada Twojej stronie bardzo dynamiczny wygląd.
Gryzmołki potrzebują aplikacji sieciowej
212
Zrób sobie potwora
213
Zrób sobie potwora — potrzebujemy układu i położenia na stronie
214
Trochę więcej struktury i stylu
217
Uaktywniamy interfejs
218
Robimy efekt błyskawicy
223
W jaki sposób jQuery animuje elementy?
224
Efekty wygaszania zmieniają właściwość CSS opacity
225
Wysuwanie sprowadza się do zmiany wysokości
226
Zatrudnij efekty wygaszania
228
Łącz efekty za pomocą łańcuchów metod
229
Kontratakujemy za pomocą funkcji czasowych
230
Dodaj do swojego skryptu funkcje błyskawic
233
Efekty własnej roboty wykorzystujące metodę animate
235
Co można, a czego nie można animować?
236
Metoda animate zmienia w czasie styl
238
Dokładnie skąd dokąd?
241
Ruch bezwzględny obiektów a ich ruch względny
242
Przesuwaj elementy względnie dzięki łączeniu operatorów
243
Dodaj funkcje animujące do swojego skryptu
245
Patrz, mamo! Bez Flasha!
248
Twój niezbędnik jQuery
250
spis treści
6
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 język ojczysty. W tym rozdziale przyjrzymy się niektórym aspektom JavaScriptu, których będziesz potrzebował do tworzenia naprawdę atrakcyjnych stron, oraz temu, jak można z nich korzystać w jQuery w celu tworzenia niestandardowych list i obiektów, a także jak przechodzić przez nie w pętlach, aby ułatwić sobie życie.
Atrakcyjniejszy barek Rusz Głową
252
Obiekty oferują inteligentne przechowywanie
254
Buduj własne obiekty
255
Twórz obiekty wielokrotnego użycia za pomocą konstruktorów
256
Interakcja z obiektami
257
Konfiguracja strony
258
Powrót tablic
261
Dostęp do tablic
262
Dodawaj i aktualizuj elementy tablicy
263
Zrób to jeszcze raz (i jeszcze raz, i jeszcze raz, i...)
265
Szukanie igły w stogu siana
268
Czas na podjęcie decyzji... znowu!
275
Operatory porównania i operatory logiczne
276
Czyszczenie w jQuery...
282
Dodajemy więcej emocji
286
Twój niezbędnik jQuery i JavaScriptu
288
1 ... 2 ... 3 ... 4 ... 2 ... 3 ... 4 ...
15
spis treści
7
Niestandardowe funkcje dla niestandardowych efektów
Co ostatnio dla mnie zrobiłeś? Kiedy połączysz niestandardowe efekty jQuery z funkcjami JavaScriptu, możesz sprawić, że Twój kod — a tym samym Twoja aplikacja internetowa — będzie wydajniejszy, skuteczniejszy i lepszy. W tym rozdziale zagłębisz się jeszcze bardziej w ulepszanie efektów jQuery poprzez obsługę zdarzeń przeglądarki, pracę z funkcjami czasu oraz poprawę organizacji i możliwości wielokrotnego użycia Twoich niestandardowych funkcji w JavaScripcie.
Nadciąga burza
290
Utworzyliśmy funkcję potwora
291
Sprawuj kontrolę nad efektami czasowymi za pomocą obiektu window
292
Odpowiadaj na zdarzenia przeglądarki za pomocą metod onblur i onfocus 295 Metody czasowe mówią funkcjom, kiedy działać
299
Napisz funkcje stopLightning i goLightning
302
Prośba o nową funkcjonalność w Zrób sobie potwora
310
Zacznijmy losować
311
Znasz już bieżącą pozycję...
312
...oraz funkcję getRandom
312
Przesuwaj względnie do bieżącej pozycji
316
Zrób sobie potwora v2 to prawdziwy przebój!
325
Twój niezbędnik jQuery
326
W rzeczy samej, zęby to najlepsze, co mam, ale na miłość boską — mógłbym chcieć skorzystać też z reszty mojej twarzy!
16
spis treści
8
jQuery i Ajax
Proszę podać dane Używanie jQuery w celu robienia sprytnych sztuczek z CSS i drzewem DOM to fajna sprawa, ale już wkrótce będziesz musiał odczytywać informacje (albo dane) z serwera i je wyświetlać. Może nawet przyjdzie Ci zaktualizować fragmenty strony informacjami z serwera bez potrzeby jej odświeżania. Poznaj Ajax. W połączeniu z jQuery i JavaScriptem może on właśnie coś takiego robić. W tym rozdziale dowiemy się, jak jQuery radzi sobie z namawianiem Ajaksa do wysyłania zapytań do serwera i co potem robi z otrzymanymi informacjami.
Coroczny bieg Od bitu do bajtu na 10 kilometrów
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 zeszłego roku
329
Dynamizujemy
332
Stary Webie, poznaj nowego Weba
333
Zrozumieć Ajax
334
Czym jest Ajax?
334
X
335
Pobieranie danych przy użyciu metody ajax
340
Przetwarzanie danych XML
342
Harmonogramy zdarzeń na stronie
346
Funkcje samowywołujące się
347
Dostać więcej od swojego serwera
350
Która godzina?
351
Wyłączanie zaplanowanych zdarzeń na stronie
356
Twój niezbędnik jQuery i Ajaksa
360
$(“li”).find(“ul”)
li
17
spis treści
9
18
Obsługa 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) ułatwia pobieranie danych z serwera. JSON jest też łatwiejszy do wygenerowania i czytania niż format XML. Używając jQuery, PHP oraz SQL-a, nauczysz się, jak utworzyć bazę danych przechowującą informacje, które będziesz mógł później odczytać za pomocą formatu JSON i wyświetlić na ekranie przy użyciu jQuery. Tak objawia się prawdziwa moc aplikacji internetowych!
Dział Marketingu webowickiej Megakorporacji nie zna XML-a
362
Błędy w XML-u psują stronę
363
Pobierz dane ze strony
364
Co zrobić z danymi
367
Sformatuj dane, zanim je wyślesz
368
Prześlij dane do serwera
369
Przechowuj dane w bazie MySQL
371
Utwórz bazę danych w celu przechowywania informacji o biegaczach
372
Anatomia instrukcji insert
374
Używaj PHP w celu odczytywania danych
377
Przetwórz dane POST na serwerze
378
Połącz się z bazą danych za pomocą PHP
379
Użyj 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 wyjściowych w PHP
390
Dostęp do danych w obiekcie JSON
397
Sanityzacja i walidacja danych w PHP
400
Twój niezbędnik jQuery, Ajaksa, PHP i MySQL
405
spis treści
10
Interfejs użytkownika w jQuery
Diametralna zmiana wyglądu Sieć WWW żyje i umiera dzięki swoim użytkownikom i ich danym. Zbieranie danych od użytkowników to poważne zajęcie, które może być czasochłonnym wyzwaniem dla programisty. Widziałeś już, jak Ajax, PHP i MySQL mogą pomóc w czynieniu efektywniejszym działania aplikacji internetowych. Teraz przyjrzymy się, jak jQuery może nam pomóc w utworzeniu interfejsów użytkownika dla formularzy zbierających dane. Po drodze otrzymasz sporą dawkę jQuery UI — oficjalnej biblioteki interfejsu użytkownika języka jQuery.
Kryptozoolodzy.org potrzebują zmiany wyglądu
408
Odpicuj swój formularz HTML
409
Oszczędź sobie bólu głowy (i zyskaj trochę czasu) za pomocą jQuery UI
412
Co znajduje się w środku pakietu jQuery UI
416
Utwórz kalendarz dla formularza z obserwacjami
417
jQuery za kulisami
418
Opcje widgetów są konfigurowalne
419
Nadaj styl przyciskom
422
Kontroluj pola liczbowe za pomocą suwaków
426
Komputery mieszają kolory, używając barwy czerwonej, zielonej i niebieskiej
435
Napisz funkcję refreshSwatch
438
I jeszcze pewien drobiazg...
442
Twój niezbędnik jQuery
446
Kiedy wreszcie dadzą mi spokój ci paparazzi?
? 19
spis treści
11
jQuery i API
Obiekty, wszędzie obiekty Niezależnie od tego, jak bardzo utalentowanym programistą jesteś, sam nie dasz sobie rady ze wszystkim... Zobaczyliśmy, jak można dołączać wtyczki jQuery, takie jak jQuery UI, albo nawigację z wykorzystaniem kart, aby bez większego wysiłku wzbogacać programy pisane w jQuery. W celu wyniesienia naszych aplikacji na jeszcze wyższy poziom, dodania do nich paru z naprawdę niezłych narzędzi dostępnych w Internecie oraz skorzystania z informacji udostępnionych przez prawdziwych potentatów — takich jak Google, Twitter albo Yahoo! — będziemy jednak potrzebować czegoś... więcej. Firmy te, i wiele innych, dostarczają API (application programming interfaces, czyli interfejsy programowania aplikacji) dedykowane dla swoich usług, z których możesz korzystać w swojej witrynie. W tym rozdziale przyjrzymy się podstawom API i zastosujemy niezwykle popularny interfejs, jakim jest Google Maps API.
Cześć! Jestem markerem. Chętnie zamarkuję... to jest zawrę z Tobą znajomość. Na pewno już gdzieś mnie widziałeś!
20
Gdzie jest generał paskuda?
448
API Google Maps
450
API używają obiektów
451
Dołącz 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 wyświetlającej wiele obserwacji
464
Nasłuchiwanie zdarzeń na mapie
474
Udało się!
478
Twój niezbędnik jQuery API
481
spis treści
A
Ostatki
Dziesięć najważniejszych rzeczy (o których nie napisaliśmy) Nawet po tym wszystkim ciągle jest jeszcze wiele rzeczy, do których nie dotarliśmy. Istnieje mnóstwo dobrodziejstw jQuery i JavaScriptu, których nie udało nam się wcisnąć do tej książki. Byłoby nieuczciwością nie wspomnieć o nich, a tak będziesz lepiej przygotowany na każdy inny aspekt jQuery, który możesz napotkać podczas swoich podróży.
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 własnych wtyczek do jQuery
493
9. JavaScript dla zaawansowanych: domknięcia
494
10. Szablony
495
21
spis treści
B
Konfiguracja środowiska programistycznego
Przygotuj się do przyszłych sukcesów Potrzebujesz miejsca na ćwiczenie nowo nabytych umiejętności PHP bez narażania swoich danych na niebezpieczeństwa czyhające w sieci. Posiadanie bezpiecznego miejsca na opracowywanie aplikacji PHP przed wypuszczeniem jej w szeroki świat sieci internetowej zawsze jest dobrym pomysłem. Dodatek ten zawiera instrukcje dotyczące instalacji serwera WWW, MySQL i PHP, dzięki czemu będziesz mieć do dyspozycji bezpieczne miejsce do pracy i ćwiczeń.
S 22
Utwórz środowisko programistyczne PHP
498
Dowiedz się, co już masz
498
Czy masz serwer WWW?
499
Czy masz PHP? Którą wersję?
499
Czy masz MySQL? Którą wersję?
500
Zacznij od serwera WWW
501
Zakończenie instalacji serwera Apache
502
Instalacja PHP
502
Etapy instalacji PHP
503
Etapy instalacji PHP: zakończenie
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Ê]bWHMNVLÈĝNL
Wstęp
Nie mogę uwierzyć, że zamieścili to w książce o jQuery!
„Dlaczego palące pytanie: odpowiemy na ?”. le zia zd ro m ty ry W książce o jQue zamieścili to w
jak korzystać z tej książki
Dla kogo jest ta książka? Jeżeli odpowiesz „tak” na każde z tych pytań: 1
Czy masz już doświadczenie w projektowaniu albo tworzeniu stron internetowych?
2
Czy chcesz opanować, zrozumieć, zapamiętać oraz stosować ważne koncepcje języków jQuery i JavaScript, dzięki czemu Twoje strony będą bardziej interaktywne i ekscytujące?
3
Czy wolisz stymulujące rozmowy przy posiłkach od drętwych i nudnych wykładów akademickich?
Z pewnością będzie prz ydatne, jeśli masz też pewne doświa dcz w pisaniu skryptów. Zna enie JavaScriptu będzie pom jomość ocna, ale w żadnym wypadku nie jest wymagana.
to książka ta jest dla Ciebie.
Kto prawdopodobnie powinien zrezygnować z tej książki? Jeżeli odpowiesz „tak” na dowolne z tych pytań: 1
Czy jesteś zupełnym nowicjuszem w projektowaniu stron internetowych?
2
Czy programujesz już aplikacje WWW i szukasz leksykonu na temat jQuery?
3
Czy boisz się spróbować czegoś nowego? Czy wolałbyś leczenie kanałowe od ubrania się jednocześnie w kratkę i prążki? Czy sądzisz, że książka techniczna, w której występuje Wielka Stopa, nie może być poważna?
to książka ta nie jest dla Ciebie.
[Uwaga od działu marke tingu: Książka ta jest dla każdeg ma kartę kredytową. Alb o, kto Gotówka też jest OK. — o gotówkę. Ed]
24
wstęp
Zajrzyj najpierw do Hea d First HTML with CSS & XHTML. Edycja polska (Ru głową!), gdzie znajdzies sz z doskonałe wprowadzenie projektowania stron WW do W, czym wróć i przyłącz się po nas w miasteczku jQuery do .
wstęp
Wiemy, co myślisz „Jak coś takiego może być poważną książką o programowaniu w jQuery?” „O co chodzi z tymi obrazkami?”
Twój m że TO ózg myśli, jest wa żne.
„Czy w ogóle mogę się w taki sposób uczyć?”
I wiemy, co myśli Twój mózg Twój mózg pragnie nowości. Przez cały czas szuka, obserwuje i oczekuje czegoś niezwykłego. W taki sposób jest zbudowany, co pomaga Ci utrzymać się przy życiu. Co wobec tego robi Twój mózg z tymi wszystkimi schematycznymi, zwykłymi i normalnymi zjawiskami, które spotyka? Wszystko, co tylko może, żeby przestały przeszkadzać mu w prawdziwej pracy — rejestrowaniu zdarzeń, które mają znaczenie. Nie trudzi się zapamiętywaniem nudnych rzeczy; nigdy nie uda im się przecisnąć przez filtr „to z pewnością nie jest ważne”. Skąd Twój mózg wie, co jest ważne? Przypuśćmy, że wyszedłeś na spacer i wyskoczył na Ciebie tygrys. Co się dzieje w Twojej głowie i Twoim ciele? Odpalają neurony. Rozkręcają się emocje. Buzuje chemia. To właśnie stąd Twój mózg wie...
To musi być ważne! Nie zapominaj o tym!
ózg Twój m że TEGO myśli, rto nie waiętywać. zapam
Świetnie, jeszcze tylko 500 nijakich, drętwych i nudnych stron.
Wyobraź sobie jednak, że znajdujesz się w domu albo bibliotece. Jest to miejsce bezpieczne, ciepłe i wolne od tygrysów. Uczysz się, przygotowujesz do egzaminu albo próbujesz poznać pewne trudne zagadnienie techniczne, co według Twojego szefa powinno Ci zabrać tydzień, góra 10 dni. Jest tylko jeden problem. Twój mózg stara się wyświadczyć Ci wielką przysługę. Próbuje zagwarantować Ci, że ten oczywiście nieważny materiał nie obciąży Twoich ograniczonych zasobów. Zasobów, które lepiej przeznaczyć na przechowywanie naprawdę ważnych rzeczy. Takich jak tygrysy. Takich jak zagrożenie ogniem. Takich jak to, żebyś już nigdy więcej nie jeździł na snowboardzie w samych tylko spodenkach. I nie ma prostego sposobu na powiedzenie swojemu mózgowi: „Hej, mózgu, wielkie dzięki, ale bez względu na to, jak nudna jest ta książka i jak słabo reaguję teraz w emocjonalnej skali Richtera, naprawdę chcę zapamiętać ten materiał”.
jesteś tutaj
25
jak korzystać z tej książki
ia.
usz głową!” za uczn
a „R Uważamy czytelnik
zagwarantować, eba to zrozumieć, a potem trz rw jpie Na ć? czy nau dnie z najnowszymi żeby się czegoś tów do Twojej głowy. 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 Twój mózg. stronie. Wiemy, co pobudza na stu tek o tylk niż cej wię
głową!: ł uczenia się z Rusz Oto niektóre z regu
wa iętania niż same tylko sło 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 zrozumiały. dzięki nim materiał staje Zdjęcie kudłatego grafiki, st w obrębie lub blisko tek ć ieś Um yjaciela po prostu prz $( ) u dołu lub t ias zam si, no sz zrobić od się rej do któ wyskakuje. Czy może z dwukrotnie woli się po cz dła ku by że na innej stronie, a uczeń , tak wiąże roz em stw pniowo ień sto ob od tak op oś większym prawd wysuwał i jak . my ble ? pro sób nabierał barw przedstawione w ten spo go ne wa lizo na i sperso $( ) Użyj konwersacyjnego h badań studenci osiągali nyc daw nie s cza stylu. Pod awiał tach, jeśli materiał przem o 40% lepsze wyniki w tes o stylu neg cyj rsa we kon ika z użyciem bezpośrednio do czyteln historie zamiast malnego stylu. Opowiadaj for ł era ybi prz nie i bie j siebie zbyt poważnie. w pierwszej oso tocznego języka. Nie traktu po aj yw Uż w. dó kła wy wygłaszania ystwu przy obiadku czy też agi: stymulującemu towarz uw cej wię isz ięc św po Czemu wykładowi? neurony Innymi słowy, jeśli Twoje ego zastanowienia się. bsz Twojej w głę się do rzy nia zda ucz nie uś Zm u, nic specjalnego siłk wy do e on usz zm nie ić i zainspirować do nie zostaną aktyw ć, zaangażować, zaciekaw wa wo oty tego zm eba trz ika wania nowej wiedzy. Do głowie. Czyteln gania wniosków i genero cią wy ności w, yw mó akt z ble ora pro a a ani ani pyt rozwiązyw ające do myślenia usz zm a, eni icz ćw a, ani celu potrzebne są wyzw mózgowe i różne zmysły. angażujące obie półkule z nas tego uwagę czytelnika. Każdy Przyciągnij i zatrzymaj czyć, ale nie mogę aprawdę chcę się tego nau bitu „N ł: d czy O iad ój mózg 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ąć jące wzrok i niespodziew a 10 kil sujące, dziwne, przyciąga ere do bajtu n int mózg 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, jeśli taka nie będzie. opanuje je o wiele szybci czegoś w dużej zdolności do zapamiętania oje Tw że y, em Wi . ach czym Ci zależy. Zagraj na emocj iązanych. Pamiętasz to, na zw tym z i ocj em od eżą mierze zal ciskających łzy historiach . Nie, nie mówimy tu o wy jesz czu ie, coś li jeś sz, ięta Pam ach takich jak zaskoczen o psie. Mówimy o emocj re któ !”, em trz mis m takich jak o chłopcu i jeg ste że o uczuciu „je tak a !”, bła dia u „co , cy ość zys czym ws ciekawość, rad ę, nauczysz się czegoś, o zi, kiedy rozwiążesz 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 inżynierii nie ma pojęcia. 3 dni do s technicznie niż ty” z działu
26
wstęp
wstęp
Metapoznanie: myślenie o myśleniu Jeśli naprawdę chcesz się uczyć — i chcesz się uczyć szybciej i lepiej — zwracaj uwagę na to, jak zwracasz uwagę. Myśl o tym, jak myślisz. Naucz się, jak się uczysz. Większość z nas, kiedy dorastała, nie uczestniczyła w kursach metapoznania ani w kursach z teorii nauczania. Oczekiwano, że będziemy się uczyć, ale rzadko uczono nas, jak się uczyć.
Ciekawe, jak mógłbym skłonić mój mózg do zapamiętania tego materiału...
Zakładamy jednak, że jeśli już trzymasz w rękach tę książkę, to naprawdę chcesz się czegoś nauczyć o jQuery i prawdopodobnie nie chcesz stracić zbyt dużo czasu. A ponieważ w przyszłości będziesz więcej pracować z jQuery, powinieneś zapamiętać to, co czytasz. Z tego też powodu musisz to zrozumieć. Aby wynieść jak najwięcej z tej książki — albo z jakiejkolwiek innej książki lub procesu uczenia — weź odpowiedzialność za swój mózg. Swój mózg w odniesieniu do tej treści. Sztuczka polega na tym, aby Twój mózg potraktował materiał, którego się uczysz, jak Coś Naprawdę Ważnego. Istotnego dla Twojego samopoczucia. Ważnego jak tygrys. W przeciwnym razie będziesz skazany na nieustającą bitwę, w której Twój mózg będzie robić, co tylko będzie mógł, aby nie dopuścić do przyjęcia się nowego materiału.
Jak więc skłonisz swój mózg, żeby myślał, iż programowanie w jQuery to głodny tygrys? Istnieje sposób wolny i żmudny, ale jest też metoda skuteczniejsza. Sposób wolny sprowadza się do zwykłych powtórek. Z pewnością wiesz, że potrafisz się nauczyć nawet najnudniejszych zagadnień i je zapamiętać, jeśli będziesz wtłaczać w mózg ciągle to samo. Po wystarczającej liczbie powtórek Twój mózg stwierdzi: „To nie wydaje się dla niego ważne, ale on wciąż i wciąż, i wciąż spogląda na to samo, więc przypuszczam, że takie jest”. Szybszy sposób polega na zrobieniu wszystkiego, co zwiększa aktywność mózgu, a zwłaszcza różne rodzaje aktywności. Rzeczy wymienione na poprzedniej stronie stanowią ogromną część rozwiązania i udowodniono, że każda z nich wspomaga pracę mózgu z korzyścią dla Ciebie. Badania wykazały na przykład, że umieszczanie wyrazów opisujących rysunki wewnątrz tych rysunków (w przeciwieństwie do innych miejsc na stronie takich jak podpisy albo tekst główny) zmusza Twój mózg do prób odnalezienia związków między słowami i obrazami, co wyzwala aktywność większej liczby neuronów. Więcej aktywnych neuronów = większe szanse na to, że Twój mózg uzna, iż jest to coś, na co warto zwrócić uwagę i być może zapamiętać. Styl konwersacyjny pomaga, ponieważ ludzie są skłonni poświęcać więcej uwagi, kiedy sądzą, że uczestniczą w rozmowie, gdyż spodziewają się kontynuacji tematu i podjęcia dialogu ze swojej strony. Zdumiewające jest, iż Twój mózg niezupełnie dba o to, że ta „rozmowa” jest prowadzona z książką! Jeśli natomiast styl książki jest formalny i drętwy, Twój mózg odbiera ją tak samo jak uczestnictwo w wykładzie prowadzonym w sali wypełnionej pasywnymi słuchaczami. Nie ma potrzeby, aby zachowywać czujność. Ale rysunki i styl konwersacyjny to zaledwie początek.
jesteś tutaj
27
jak korzystać z tej książki
Oto co zrobiliśmy Użyliśmy rysunków, ponieważ Twój mózg jest zorientowany na obrazy, a nie na tekst. Jeśli chodzi o Twój mózg, to obraz rzeczywiście wart jest tysiąca słów. Tam gdzie tekst i obrazy mają współistnieć, osadziliśmy napisy wewnątrz rysunków, ponieważ Twój mózg pracuje efektywniej, kiedy tekst znajduje się w środku rzeczy, do których się odnosi, niż gdy jest on umieszczony w podpisach albo zagrzebany gdzieś w treści. Użyliśmy powtórek, podając tę samą informację na różne sposoby, za pomocą innych mediów i poprzez odwołanie się do wielu zmysłów, aby zwiększyć szanse, że treść zostanie zakodowana nie tylko w jednym rejonie Twojego mózgu. Użyliśmy koncepcji i rysunków w niespodziewany sposób, ponieważ Twój mózg jest nastawiony na nowości. Skorzystaliśmy z obrazów i pomysłów zawierających jakiś emocjonalny przekaz, ponieważ Twój mózg jest nastawiony na zwracanie uwagi na biochemię emocji. Coś, co skłania Cię do odczucia czegoś, zapamiętasz z większym prawdopodobieństwem, nawet jeśli uczucie to będzie niczym więcej jak tylko przejawem humoru, zaskoczeniem albo zaciekawieniem. Użyliśmy spersonalizowanego, konwersacyjnego stylu, gdyż Twój mózg jest nastawiony na zwracanie na coś większej uwagi, kiedy sądzi, że uczestniczysz w rozmowie, niż gdy myśli, że pasywnie słuchasz wykładu. Twój mózg działa tak nawet wtedy, kiedy czytasz.
Jazda próbna
Zmienna
Tablica
Zamieściliśmy wiele aktywności, ponieważ Twój mózg jest nastawiony na lepszą naukę i zapamiętywanie, kiedy coś robisz, niż kiedy o tym czytasz. Wybraliśmy ćwiczenia stawiające wyzwania, ale wykonalne, ponieważ większość osób woli właśnie takie. Użyliśmy wielu stylów nauczania, ponieważ Ty możesz woleć procedury opisane krok po kroku, podczas gdy ktoś inny woli obraz całości, a ktoś jeszcze inny chce po prostu zobaczyć przykład. Niezależnie jednak od indywidualnych preferencji każdy może odnieść korzyści, widząc ten sam materiał przedstawiony na wiele różnych sposobów. Zamieściliśmy materiały dla obu półkul Twojego mózgu, gdyż im bardziej Twój mózg się zaangażuje, z tym większym prawdopodobieństwem nauczysz się i zapamiętasz i tym dłużej będziesz pozostawał skupiony. Jako że praca jedną półkulą często daje drugiej półkuli szansę na odpoczynek, możesz być bardziej produktywny, kiedy musisz uczyć się przez dłuższe okresy czasu. Zamieściliśmy historie oraz ćwiczenia, które przedstawiają więcej niż tylko jeden punkt widzenia, ponieważ Twój mózg jest nastawiony na głębszą naukę, kiedy jest zmuszony do wydawania ocen i osądów. Zamieściliśmy wyzwania z ćwiczeniami oraz zadaliśmy pytania, na które nie zawsze istnieją proste odpowiedzi, ponieważ Twój mózg jest nastawiony na naukę i pamiętanie, kiedy musi nad czym pracować. Pomyśl o tym — od samego oglądania ludzi na siłowni Twoje ciało nie nabierze kształtu. Zrobiliśmy wszystko, co w naszej mocy, abyś — kiedy już zabierzesz się do ciężkiej pracy — pracował nad właściwymi problemami. Upewniliśmy się, że nie poświęcisz nawet jednego dodatkowego dendrytu na analizę trudnego do zrozumienia przykładu lub przetwarzanie ciężkiego, wypełnionego żargonem albo suchego tekstu. Skorzystaliśmy z ludzi — w historiach, przykładach, na rysunkach itd. — ponieważ Ty jesteś człowiekiem i Twój mózg zwraca większą uwagę na ludzi niż na inne rzeczy.
28
wstęp
Pogawędki przy kominku
wstęp
Oto co możesz zrobić, aby zmusić swój mózg do posłuszeństwa My już zrobiliśmy, co do nas należało. Reszta zależy od Ciebie. Poniższe wskazówki to punkt wyjścia — słuchaj swojego mózgu i dowiedz się, co w jego przypadku działa, a co nie. Wypróbuj nowe rzeczy.
Wytnij poniżs i naklej je na ze porady lodówkę.
1
Nie ograniczaj się wyłącznie do czytania. Zatrzymaj się i pomyśl. Kiedy książka zada Ci pytanie, nie przeskakuj od razu do odpowiedzi. Wyobraź sobie, że ktoś naprawdę Cię pyta. Im bardziej zmusisz swój mózg do myślenia, tym większe będziesz mieć szanse na nauczenie się i zapamiętanie. 2
jeszcze poczujesz pragnienie) pogarsza funkcje poznawcze.
Zwolnij. Im więcej zrozumiesz, tym mniej będziesz musiał pamiętać. 6
Mowa angażuje różne części mózgu. Jeśli próbujesz coś zrozumieć albo zwiększyć szanse na późniejsze tego zapamiętanie, mów na głos. Albo, jeszcze lepiej, spróbuj wyjaśnić to komuś innemu. Nauczysz się tego szybciej i przy okazji być może odkryjesz idee, o których byś nie wiedział, gdybyś tylko o tym czytał.
Rób ćwiczenia. Zapisuj swoje uwagi. Umieściliśmy ćwiczenia w książce, ale gdybyśmy je rozwiązali, to byłoby tak, jakby ktoś inny poszedł za Ciebie na trening. Nie ograniczaj się tylko do patrzenia na ćwiczenie. Użyj ołówka. Istnieje mnóstwo dowodów na to, że aktywność fizyczna podczas nauki może poprawić zapamiętywanie.
7 Słuchaj swojego mózgu.
Zwracaj uwagę na to, czy Twój mózg nie zaczyna być przeciążony. Jeśli spostrzeżesz, że tylko prześlizgujesz się po tekście wzrokiem albo zapominasz, co przed chwilą przeczytałeś, pora zrobić sobie przerwę. Kiedy już przekroczysz pewien punkt, nie nauczysz się szybciej, próbując wchłonąć więcej, a nawet możesz zaszkodzić całemu procesowi nauki.
3 Czytaj „Nie istnieją głupie pytania”.
Każde z nich. To nie są fragmenty opcjonalne — stanowią one część głównej treści tej książki. Nie pomijaj ich.
8
jaką czytasz przed snem, albo przynajmniej ostatnią ambitną rzeczą.
5
Pij wodę. Dużo wody. Twój mózg pracuje najlepiej zanurzony w przyjemnej kąpieli. Odwodnienie (które może nastąpić, zanim
Poczuj coś! Twój mózg chce wiedzieć, że to ma znaczenie. Angażuj się w historie. Wymyślaj własne podpisy do zdjęć. Zżymanie się na zły dowcip i tak jest lepsze niż brak jakiejkolwiek reakcji.
4 Niech ta książka będzie ostatnią rzeczą,
Część procesu uczenia się (a zwłaszcza przenoszenie wiedzy do pamięci długoterminowej) zachodzi już po tym, jak odłożysz książkę. Twój mózg potrzebuje czasu dla siebie, aby zająć się przetwarzaniem. Jeśli w tym czasie dorzucisz coś nowego, część z tego, czego się właśnie nauczyłeś, przepadnie.
Mów o tym. Na głos.
9
Stwórz coś! Stosuj nabytą wiedzę w codziennej pracy. Korzystaj z tego, czego się nauczyłeś, przy podejmowaniu decyzji w swoich projektach. Po prostu zrób coś, żeby zdobyć trochę doświadczenia wykraczającego poza ćwiczenia i aktywności zawarte w tej książce. Wszystko, czego potrzebujesz, to ołówek i problem do rozwiązania… Problem, przy którym mógłbyś odnieść korzyści, stosując narzędzia i techniki, które poznajesz na potrzeby egzaminu.
jesteś tutaj
29
jak korzystać z tej książki
Przeczytaj mnie Książka ta ma stanowić doświadczenie związane z nauką i nie jest leksykonem. Celowo pozbyliśmy się wszystkiego, co tylko mogłoby przeszkodzić w procesie poznawania tego, czym zajmujemy się w danym miejscu książki. Pierwsze jej czytanie będziesz jednak musiał zacząć od początku, ponieważ przyjęliśmy w tej książce pewne założenia co do tego, co już widziałeś i co wiesz.
Oczekujemy, że znasz HTML i CSS Jeśli nie znasz HTML-a ani CSS, sięgnij po Head First HTML with CSS & XHTML Edycja polska, zanim zaczniesz lekturę. Odświeżymy 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 sądzimy, że możesz nauczyć się jQuery bez wcześniejszej znajomości JavaScriptu. Aby pisać w jQuery, musisz go trochę znać i nauczymy Cię tych wszystkich ważnych koncepcji JavaScriptu równolegle z kodem jQuery. Szczerze i głęboko wierzymy w motto jQuery: „Pisz mniej. Rób więcej”.
Namawiamy Cię do używania więcej niż tylko jednej przeglądarki Zachęcamy Cię, abyś testował swoje strony przynajmniej w trzech aktualnych przeglądarkach. Uzyskasz dzięki temu doświadczenie w dostrzeganiu różnic między przeglądarkami oraz w tworzeniu stron, które będą poprawnie działać w wielu z nich.
To nie jest książka Rusz głową! Narzędzia dla programistów w przeglądarkach… …ale oczekujemy, że wiesz, jak z tych narzędzi korzystać. Gorąco polecamy przeglądarkę Google Chrome, którą możesz pobrać stąd: http://www.google.com/chrome. Możesz też odwiedzić poniższe strony w celu uzyskania informacji o następujących przeglądarkach oraz ich narzędziach dla programistów: 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ę książkę Najlepsze, co możesz zrobić podczas uczenia się czegoś nowego, to dołączenie do uczącej się społeczności. Jesteśmy przekonani, że społeczność jQuery jest jedną z najlepszych i najaktywniejszych w świecie technologii. Możesz dowiedzieć się więcej tutaj: http://www.jquery.com.
30
wstęp
wstęp
Te aktywności NIE są opcjonalne Ćwiczenia i aktywności nie są jedynie dodatkami; są one nieodłączną częścią tej książki. Niektóre z nich pomogą Twojej pamięci, inne w zrozumieniu, a jeszcze inne w zastosowaniu tego, czego się nauczyłeś. Nie pomijaj ćwiczeń. Nawet krzyżówki są ważne — pomagają one przedostać się różnym koncepcjom do Twojego mózgu. Co jednak ważniejsze, dają one Twojemu mózgowi doskonałą okazję, abyś pomyślał w innym kontekście o słowach i terminach, których się uczyłeś.
Powtórzenia są celowe i ważne Jedną z wyróżniających cech książek Rusz głową! jest to, że chcemy, abyś naprawdę zrozumiał. Chcemy też, żebyś kończąc książkę, pamiętał, czego się nauczyłeś. Celem, jaki stawia przed sobą większość czytelników leksykonów, nie jest zapamiętywanie i przypominanie sobie, ale ta książka stanowi o uczeniu się, tak więc niektóre z koncepcji pojawią się tu więcej niż tylko raz.
Ćwiczenia Wysil szare komórki nie mają odpowiedzi Niektóre z nich nie posiadają odpowiedzi, a w przypadku innych częścią procesu wysilania szarych komórek będzie zadecydowanie, czy Twoje odpowiedzi są dobre. W niektórych ćwiczeniach z cyklu Wysil szare komórki znajdziesz podpowiedzi kierujące Cię we właściwą stronę.
Wymagania software’owe Aby pisać kod w jQuery, potrzebujesz edytora tekstów, przeglądarki, serwera WWW (może działać lokalnie na Twoim komputerze) oraz biblioteki jQuery. Edytory tekstów, jakie polecamy dla Windows, to PSPad, TextPad, EditPlus (ale jeśli musisz, możesz korzystać też z Notatnika). Edytorem, który polecamy dla Maca, jest TextWrangler. Jeśli pracujesz w systemie Linux, masz do dyspozycji mnóstwo wbudowanych edytorów i wierzymy, że nie ma konieczności opowiadania Ci o nich. Jeśli zamierzasz programować aplikacje WWW, będzie Ci potrzebny serwer. Aby przerobić późniejsze rozdziały (9., 10. i 11.), będziesz musiał zapoznać się z dodatkiem opisującym instalację PHP, MySQL oraz serwera WWW (Apache albo IIS) i wykonać opisane tam czynności. Zalecamy, abyś zrobił to teraz. Naprawdę! Przejdź do dodatku, zastosuj się do instrukcji i wróć tu, kiedy skończysz. Będzie Ci też potrzebna przeglądarka oraz narzędzia dla programistów przeglądarki (zapoznaj się z tekstem na poprzedniej stronie). Warto też poświęcić czas na naukę korzystania z konsoli JavaScript w narzędziach Google Chrome. Tę pracę domową będziesz musiał odrobić sam. I wreszcie będzie Ci potrzebna biblioteka jQuery. Odwróć stronę, a pokażemy Ci, skąd ją wziąć.
jesteś tutaj
31
jak korzystać z tej książki
Pobierz jQuery No to zaczynamy. Przejdź na stronę jQuery i pobierz kopię biblioteki, z której będziesz korzystał podczas lektury tej książki.
Krok pierwszy: Uruchom swoją ulubioną przeglądarkę i wskaż jej następujący adres: http://jquery.com/.
Krok drugi: Odszukaj sekcję zatytułowaną Grab the Latest Version! (czyli Pobierz najnowszą wersję!), a następnie zaznacz pole wyboru obok opcji Production (wersja produkcyjna).
Krok trzeci: Kliknij przycisk Download jQuery (czyli Pobierz jQuery).
Krok czwarty: Na następnej stronie zobaczysz mniej więcej coś takiego: Stronę zapisz na swoim dysku w folderze scripts.
jquery-1.7.min.js scripts
Jaka jest różnica między 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 programistów zainteresowanych poznawaniem i poszerzaniem wewnętrznych mechanizmów biblioteki jQuery. Pobierz kopie obu tych wersji, jeśli należysz do tych, którzy lubią zaglądać do środka silnika.
32
wstęp
wstęp
Konfiguracja folderów Po pobraniu i rozpakowaniu kodów z książki ze strony wydawnictwa Helion (ftp://ftp.helion.pl/przyklady/jquerg.zip) stwierdzisz, że są one poumieszczane w folderach zorganizowanych według poszczególnych rozdziałów. Spójrzmy na przykład na r03:
Dla każdego rozdziału istnieje folder begin zawierający kod początkowy.
Folder scripts zawiera rą bibliotekę jQuery, któ właśnie pobrałeś.
W folderze styles znajduje się plik my_style za wszystkie style po wierający trzebne do rozpoczęcia pracy w danym rozdziale.
Plik index.htm zawiera kod l dl aplikacji WW a W.
Folder end zawiera końcowy kod dla rozdziału. Namawiamy Cię, żebyś korzystał z tego folderu tylko dla sprawdzenia wyników swojej pracy.
iera kod, Plik my_scripts.js zaw . Spróbuj sam ał pis sz który będzie nie zaglądaj wysilić swój umysł i ziesz już tutaj, chyba że nie będ miał innego wyjścia.
Możesz korzystać z biblioteki jQuery w dowolnym ze swoich projektów. Dla Twojej wygody umieściliśmy ją w folderze z kodami udostępnionymi dla tej książki, niemniej jednak powinieneś wiedzieć, skąd ją wziąć, na potrzeby swoich przyszłych projektów i ze względu na jej aktualizacje. Ludzie od jQuery aktualizują tę bibliotekę regularnie.
jesteś tutaj
33
zespół recenzentów
Zespół recenzentów technicznych Lindsey Skouras
Bill Mietelski
Paul Barry
ran Jim Do
Jim Doran pracuje jako inżynier oprogramowania na Uniwersytecie Johna Hopkinsa w Baltimore w stanie Maryland. Naucza JavaScriptu w Community College of Baltimore County i opowiada o tym języku podczas konferencji poświęconych sieci WWW. Kiedy nie zajmuje się tym wszystkim, prowadzi pod adresem http://jimdoran.net blog poświęcony sztuce, a także bierze udział w studenckich rozgrywkach roller derby league. Bill Mietelski był recenzentem technicznym kilkunastu książek z serii Head First. Obecnie, jako inżynier oprogramowania w czołowym krajowym centrum medycznym w metropolii chicagowskiej, prowadzi badania biostatystyczne. Kiedy nie zbiera ani nie analizuje danych, można go spotkać na lokalnym polu golfowym uganiającego się za małą białą piłeczką. Lindsey Skouras jest prawnikiem w Waszyngtonie DC. W wolnym czasie nauczyła się programować dzięki książkom z serii Head First. Do jej pozostałych zainteresowań należą czytanie, robótki ręczne, zwiedzanie muzeów oraz spędzanie czasu z mężem oraz psami. Paul Barry wykłada informatykę na politechnice w Carlow w Irlandii. Paul jest redaktorem czasopisma „Linux Journal” oraz autorem książek technicznych. Napisał także Head First Python i jest współautorem Head First Programming. Kiedy ma czas, zajmuje się konsultacjami w sektorze małych i średnich przedsiębiorstw oraz w zakresie uruchamiania projektów programistycznych.
34
wstęp
wstęp
Podziękowania Nasza redaktor: Dziękujemy (i gratulujemy!) Courtney Nash, która nakłoniła nas do stworzenia najlepszej chyba książki, jaką byliśmy w stanie napisać. Sprostała wielkiej liczbie naszych e-maili, pytań, gderań i okazyjnych dziwactw. Wytrzymała z nami przez cały czas powstawania tej książki i ufała nam, kiedy ufaliśmy naszej intuicji. Courtney Nash
Ludzie w O’Reilly: Dziękujemy Lou Barr za błyskawiczną, wspaniałą i magiczną pracę, jaką wykonała, aby ukształtować tę książkę i sprawić, że jest piękna. Dziękujemy Laurie Petryckiej za danie nam zielonego światła. Ryan bardzo miło wspomina szkolenie w siedzibie HF w Bostonie i nigdy nie zapomni ciepłej rodzinnej atmosfery, o którą zadbała Laurie. Dziękujemy Karen Shaner. Dziękujemy wszystkim z ekipy recenzentów technicznych. Ryan nigdy nie zapomni dnia, w którym odkrył w księgarni serię Head First. Podziękowania dla Kathy Sierry i Berta Batesa za wzbudzanie neuronów u maniaków komputerowych, gdziekolwiek się ci maniacy znajdują. Dziękujemy Bertowi za słuchanie naszego zrzędzenia i wyciągnięcie nas z problemów związanych z ukończeniem książki oraz za wskazywanie nam jasnych celów ;). Dziękujemy Timowi O’Reilly za jego wizję stworzenia najlepszej literatury dla komputerowców! Przyjaciele i rodzina Ronana:
Lou Barr
Szczególne podziękowania dla mojej żony Caitlin, która pomogła w urzeczywistnieniu tej książki, służąc swoją fantastyczną znajomością wszystkich funkcji w Adobe. Dziękuję też za jej cierpliwość — bez Ciebie nie mógłbym tego wszystkiego zrobić! Wielkie dzięki wszystkim, którzy wspierali nas w tym wysiłku — moim wspaniałym sąsiadom, naszym kumplom z piwnicznego mieszkania na Uniwersytecie Portlandzkim, moim wyrozumiałym drużynom piłki nożnej i kolegom od golfa. Dziękuję mojej rodzinie w Irlandii za jej wsparcie i słowa zachęty. Przede wszystkim dziękuję Ryanowi Benedettiemu, mojemu wspaniałemu współautorowi, koledze i przyjacielowi. Dzięki za zabranie mnie w tę podróż i danie mi szansy. To było wspaniałe doświadczenie! Przyjaciele i rodzina Ryana: Dziękuję mojej córce Josie, mojemu synowi Vinniemu i mojej narzeczonej Shonnie, która wierzyła we mnie i codziennie wspierała mnie na wiele różnych sposobów, kiedy pisałem tę książkę. Ti amo, i miei tre miracoli. Tak bardzo Was kocham, moje trzy cuda! Dziękuję mojej mamie i mojemu tacie, mojemu bratu Jeffowi i moim siostrzenicom Claire i Quinn. Dziękuję moim piwnicznym współlokatorom oraz załodze WAS na Uniwersytecie Portlandzkim, a mianowicie Jenny Walsh, Jacobowi Caniparolemu oraz wtorkowej ekipie technicznej (wiecie, kogo mam na myśli). Dzięki dla Caitlin PierceCranley za jej niesamowitą wiedzę o projektowaniu. Dziękuję mojemu kumplowi, irlandzkiemu ninja (znanemu też jako Ronan Cranley) za jego doskonałe umiejętności programowania w jQuery, JavaScripcie i PHP, za jego poczucie humoru oraz za niewiarygodną etykę pracy nad tą książką.
jesteś tutaj
35
36
wstęp
1.=DF]\QDP\]bM4XHU\
Akcja na stronach internetowych Może jest tu coś, dzięki czemu moje strony będą bardziej interaktywne.
Chcesz więcej dla swoich stron. Masz w zanadrzu HTML oraz CSS i chciałbyś wzbogacić swoje umiejętności o pisanie skryptów, ale nie masz zamiaru spędzić całego życia, pisząc je wiersz po wierszu. Potrzebujesz biblioteki skryptów, która pozwoli Ci zmieniać strony internetowe w locie. A skoro wyrażamy już nasze życzenia, to może dodać jeszcze współpracę z Ajaksem i PHP? Czy da się zrobić w trzech wierszach to, do czego większość języków po stronie klienta potrzebuje piętnastu? Pobożne życzenia? W żadnym wypadku! Musisz zapoznać się z jQuery.
to jest nowy rozdział
37
ruszaj rzeczami
Chcagz władać gftonami Wiesz już, jak budować wspaniale wyglądające strony, wykorzystując czysty i zgodny ze standardami HTML i CSS. Statyczne strony internetowe to już jednak nie jest to -ludzie chcą strony reagującej. Chcą akcji, animacji, interakcji i mnóstwa fajnych efektów.
�
Chcesz p ntrolę nad swoimi stronami i uczynić je przydatniejszymi dla swoich gości? Na poniższej liście zaznacz wszystkie opcje, które mogą zostać do tego zastosowane.
D D D D D 38
Rozdział 1.
Dynamiczne dodawanie elementów do strony bez odświeżania jej za każdym razem. Zmiana pozycji menu, kiedy użytkownik przesuwa po nich myszą. Ostrzeganie użytkownika, kiedy w formularzu pozostanie niewypełnione pole. Dodanie do tekstu i obrazów ruchu oraz przejść. Pobieranie danych z serwera dokładnie wtedy, kiedy potrzebuje ich użytkownik.
zaczynamy z jquery
HTML i CSS gą w potządku, ala... Stare dobre HTML i CSS dobrze się sprawdzają przy nadawaniu stronom struktury i stylu. Kiedy już wyrendemjesz stronę HTML, ona tam będzie, ale będzie statyczna. A jeśli zechcesz zmienić wygląd strony albo coś do niej dodać lub usunąć? Będziesz musiał nieźle się nagimnastykować w CSS albo po prostu załadować nową stronę, co niekoniecznie odbędzie się szybko. Dlaczego? Ponieważ wszystko, co tak naprawdę robisz za pomocą HTML-a i CSS, to kontrolowanie tego, jak wygląda strona.
O
Przeglądarka prosi serwer o stronę, kiedy ktoś wpisze adres w jej pasku adresowym.
..----o
Serwer odszukuje żądany plik lub pliki i wysyła je do przeglądarki.
a
/1--1
�Fflllltt\
o
�---� � index.html
O
Serwer WWW
Przeglądarka wyświetla wyrenderowaną stronę HTML na podstawie pliku przesłanego przez serwer.
index.html
Przeglądarka pobiera s�rom� i wyświetla ją uzytkownikowi.
jesteś tutaj
�
39
trzymaj się skryptu
... połtzabujagz mocy gJerypfu Aby zmieniać strony internetowe w locie bez ich odświeżania, musisz porozmawiać z przeglądarką. Jak to zrobić? Za pomocą znacznika HTML znanego jako .
�
pt::>
. znaczniki hamburger &GL83&3LZ K&G cebula marchew &G#LZFF&Z3 K&G ser kozi
168
Rozdział 4.
Frittata kurczak &G89&F3 ZF K&G &G9#3?9S9 class=“meat" &GW &&F3R K&G &GW Z8 K&G &GF3 ZF3ZF K&G &G89&F3 ZF K&G &G9#3 ¢RF3X3 ");
manipulowanie stroną internetową za pomocą jquery
Jazda próbna Minęło już trochę czasu, od kiedy aktualizowałeś swoje pliki. Dodaj kod dla przycisku „Przywróć menu” oraz kod dodający i usuwający klasę veg_leaf w miejscu, w którym podstawiane są odpowiedniki wegetariańskie. Zawsze możesz pobrać pliki z tego rozdziału z ftp://ftp.helion.pl/przyklady/jquerg.zip i porównać je ze swoim kodem.
A oto liść, który dodaliśmy za pomocą klasy veg_leaf.
Wspaniale! Nasi klienci uwielbiają nowe menu, a najlepsze jest to, że nie musimy przechowywać jego dwóch różnych wersji. Wszystko znajduje się na jednej stronie! się Teraz Aleksandra może 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
twój niezbędnik jquery
Rozdział 4.
Twój niezbędnik jQuery Masz już za sobą rozdział 4., a do swojego niezbędnika dodałeś manipulowanie drzewem DOM, poruszanie się po nim, a także tablice i filtry.
ie n a w o l Manipum DOM drzewe
ć, dodawa możesz menty , z s e c le ch różne e ylko ze Kiedy t ać i usuwać w zastępo 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 ięk dz ie, w jego obręb wać. ulo możesz 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. łańcuchy 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 możesz m z dzięki c , dostęp. iennych adku zm licy znak p y z r p w b Tak jak rzed nazwą ta ajdują się p n z ć ś e ż ie , m u yć zaznacz dane jQuery. $, aby lne ja c e p s w niej
Filtry
Metody fi lt zbiór wyb rujące pomagają ranych e lementów zawęzić : first equal last slice filter not
210
Rozdział 4.
5.(IHNW\LbDQLPDFMDZbM4XHU\
Nieco wdzięku na Twojej stronie Zobaczcie, jak pięknie się poruszam. Mam w sobie tyle gracji. Założę się, że tak nie potraficie!
Sprawianie, że na Twojej stronie będą się dziać różne rzeczy, to niezły pomysł, ale tylko do czasu. Jeśli nie będzie ona wyglądać atrakcyjnie, ludzie nie zechcą z niej korzystać. Dlatego właśnie przydadzą Ci się efekty i animacja w jQuery. W bieżącym rozdziale nauczysz się, co zrobić, aby wraz z upływem czasu elementy zmieniały swoje miejsce na stronie, jak pokazać lub ukryć określony element albo jak go powiększyć lub zmniejszyć, a wszystko to na oczach użytkownika. Dowiesz się też, jak zakładać harmonogramy animacji, aby uruchamiały się one w różnych odstępach czasu, co nada Twojej stronie bardzo dynamiczny wygląd.
to jest nowy rozdział
211
rezygnacja z flasha
Gryzmołki potrzebują aplikacji sieciowej Gryzmołki zaopatrują webowickie dzieci w atrakcyjne materiały artystyczne do zabawy. Kilka lat temu firma uruchomiła popularną witrynę internetową, w której udostępniła interaktywne aplikacje dla dzieci. Społeczność jej fanów rośnie w takim tempie, że Gryzmołki zaczęły mieć problemy z radzeniem sobie na bieżąco z napływającymi prośbami. Aby zaspokoić potrzeby nowej, większej klienteli Gryzmołków, dyrektor ds. projektów internetowych chciałaby utworzyć aplikację, która nie korzystałaby z Flasha ani z żadnych innych wtyczek przeglądarkowych.
Nasze projekty dla dzieciaków to przede wszystkim dobra zabawa i zaangażowanie. Czy możesz wykonać dla nas aplikację dla grupy wiekowej od 6 do 10 lat? Potrzebujemy mnóstwa efektów wizualnych i trochę interaktywności. Tylko bez Flasha proszę!
212
Rozdział 5.
efekty i animacja w jquery
Zrób sobie potwora Oto plan aplikacji przekazany przez dyrektor ds. projektów internetowych wraz z plikami graficznymi od projektanta przeznaczonymi do użycia w programie:
% & & Zadaniem aplikacji Zrób sobie potwora jest zabawianie dzieci w docelowej grupie wiekowej przez umożliwienie im zrobienia sobie potwora dzięki mieszaniu 10 różnych głów, oczu, nosów i ust. Przejścia między poszczególnymi częściami twarzy potwora powinny być animowane. ' ( Animacja Symulacja obrazująca, jak powinna się zmieniać część twarzy potwora.
Pojemnik Ramka )& % "&' ( )& % "&'
* * " * #
)& % "&'
Symulacja obrazująca, jak powinna wyglądać animacja błyskawicy.
)& % "&'
Obrazy błyskawicy powinny pojawiać się i znikać szybko, tak jakby rzeczywiście się błyskało.
%
! "
frame.png
# "
$ "
Masz mnóstwo szczegółów dotyczących wymagań projektu oraz potrzebne pliki graficzne, ale grafik nie napisał żadnego HTML-a ani CSS, a od tego właśnie musisz zacząć. Co powinieneś zrobić, aby utworzyć i skonfigurować te pliki?
jesteś tutaj 213
budowanie solidnych fundamentów
Zrób sobie potwora — potrzebujemy układu i położenia na stronie Bez wątpienia sporo mówiliśmy do tej pory na temat konieczności zdefiniowania już na samym początku struktury i stylu — jeszcze zanim napiszesz cokolwiek w jQuery. Teraz jest to jeszcze ważniejsze: jeżeli z góry nie określisz układu i położenia elementów na stronie, Twoje efekty oraz animacje mogą okazać się nieudane, i to szybko. Nie ma nic gorszego, niż gapić się w swój kod jQuery i zastanawiać się, dlaczego nie robi on w przeglądarce tego, co chciałeś. Dobrym rozwiązaniem jest naszkicowanie swoich pomysłów i przemyślenie tego, co się będzie dziać na ekranie.
Każdy pasek z rysunkiem potwora ma 3670 pikseli szerokości, ale jednorazowo możemy pokazać tylko 367 pikseli. Jaki atrybut CSS pozwoli nam to zrobić?
Ta sekcja powinna mieć 545 pikseli szerokości, ...a ta sekcja 367 pikseli, aby pomieścić ramkę... żeby zmieścić twarz potwora.
367 pikseli szerokości
Twarz potwora będzie się składać z kolejnych czterech sekcji przechowujących poszczególne paski z rysunkami.
div#pic_box div#frame
214
Rozdział 5.
div#head
172 piksele szerokości
div#eyes
79 pikseli szerokości
div#nose
86 pikseli szerokości
div#mouth
117 pikseli szerokości
Paski z rysunkami nal elementów img zagnie eży rozmieścić, używając żdżonych w sekcjach odpowiednich dla dan ej Na przykład znacznik części twarzy potwora. img dla rysunku headss znajdzie się wewnątr trip.jpg z sekcji div#head.
efekty i animacja w jquery
Ćwiczenie
W każde z pustych miejsc w plikach HTML i CSS wpisz identyfikator CSS, właściwość albo ustawienie, które pomogą Ci skonfigurować układ i położenie elementów aplikacji Zrób sobie potwora. W przypadku wątpliwości poszukaj wskazówek na dwóch poprzednich stronach. Kilka z pustych miejsc wypełniliśmy za Ciebie.
#G I88F3 Z#F 3R&R3S\L8 3ZR K#G K%3? G
index.html Kiedy animujemy .face{ #frame { pozycję elementów, position: relative; position: absolute; powinniśmy używać left:0px; left:100px; położenia absolutnego top:0px; top:100px; albo względnego. z-index: 0; F?%+ #, } height:629px; background-image:url(images/frame.png); #head{ z-index: 2; height:172px; overflow: hidden; overflow } } e właściwości
#pic_box{ position: relative; left:91px; #+¥ #,
Nadani n” umożliwi wartości „hiddeęści 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 można skorzystać też z właściwości CSS „clip”.
height:86px;
} #mouth{ height:117px;
}
my_style.css
216
Rozdział 5.
efekty i animacja w jquery
Trochę więcej struktury i stylu W następnej kolejności czekają nas zmiany strukturalne w plikach HTML i CSS. Do plików index.html oraz my_style.css dodaj poniższy kod. Pliki graficzne możesz pobrać z ftp://ftp.helion.pl/przyklady/jquerg.zip.
Zrób to!
Dodaj kontener i zagnie w nim rysunki z błyska źdź wicą.
!! ? ? '! ! ? &:'# !! ? ? 9! ! ? &:9# !! ? ? 6! ! ? &:6#
index.html
- ,
1,
! 21! 0
1 & 2-::::::0
2:;0
} Chcemy, żeby rysunki z błyskawicą były początkowo 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, powinniśmy nadać ich właściwości 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 opracowaliśmy już wizualnie układ strony Zrób sobie potwora, skonfigurujmy resztę sekcji interfejsu użytkownika zgodnie z otrzymanym planem. Część ta sprowadza się do klikania w celu wywoływania zdarzeń. Zajmujesz się tym już od czterech rozdziałów, więc konfiguracja powinna Ci pójść jak z płatka.
' ( Pojemnik Ramka )& % "&' (
Trzeba klik z obszaró nąć każdy przewinąćw, aby rysunek.
)& % "&'
* * " * #
)& % "&' )& % "&'
żde Należy zliczać ka sek kliknięcie, aby pa a z rysunkiem możn było przewinąć na początek.
Nie istnieją
głupie pytania
P: Nie za bardzo już pamiętam, o co
http://developer.mozilla.org/en/CSS/ position#Relative_positioning
O: position to właściwość CSS, która
position nadawać wartość absolute, fixed albo relative, kiedy chcemy animować elementy?
chodzi z tym pozycjonowaniem w CSS. Dlaczego jest nam to potrzebne do efektów i animacji w jQuery?
kontroluje, jak i gdzie umieści elementy silnik przeglądarki odpowiedzialny za układ strony. jQuery realizuje wiele ze swoich efektów, korzystając z właściwości position. Jeśli już trochę pozapominałeś i potrzebujesz odświeżenia wiadomości, zajrzyj do znakomitych wyjaśnień znajdujących się w centrum deweloperskim Mozilli:
218
Rozdział 5.
P: Dlaczego musimy właściwości CSS O:
Jeśli pozostawimy właściwości CSS position jej domyślną wartość (czyli static), nie będziemy mogli zastosować położenia górnego, prawego, lewego ani dolnego. Kiedy zaczniemy pracować z funkcją animate, będziemy potrzebowali ustawiać takie położenia, a wartość static po prostu na to nie
pozwala. Pozostałe ustawienia właściwości position — absolute, fixed oraz relative — to umożliwiają.
P: Wspomniałeś o silniku
przeglądarki odpowiedzialnym za układ strony. Co to takiego?
O:
Silnik przeglądarki to jej centralna część, która interpretuje kod HTML i CSS i wyświetla go w oknie roboczym przeglądarki (czyli oknie, które pokazuje użytkownikowi zawartość strony). Google Chrome i Safari korzystają z silnika Webkit, Firefox używa silnika Gecko, a Microsoft Internet Explorer silnika o nazwie Trident.
efekty i animacja w jquery
Magnesiki z kodem jQuery Ułóż magnesiki z kodem w odpowiednim porządku, aby otrzymać aktywny element div#head. Upewnij się, że zmienne oraz instrukcje warunkowe zachowują właściwą kolejność, dzięki czemu będziesz mógł wykryć osiągnięcie przez zmienną headclix wartości 9, która oznacza dziesiąte kliknięcie.
headclix
}); if (headclix
}
else {
= 0; headclix
}
= 0;
}); $(document).ready(function(){
var headclix
< 9){
$("#head").click(function(){
jesteś tutaj 219
magnesiki z kodem — rozwiązanie
Magnesiki z kodem jQuery — rozwiązanie Ułóż magnesiki z kodem w odpowiednim porządku, aby otrzymać aktywny element div#head. Upewnij się, że zmienne oraz instrukcje warunkowe zachowują właściwą kolejność, dzięki czemu będziesz mógł wykryć osiągnięcie przez zmienną headclix wartości 9, która oznacza dziesiąte kliknięcie. $(document).ready(function(){ var headclix
= 0;
Zaczynasz od 0, ponieważ jeszcze nic nie zostało kliknięte.
$("#head").click(function(){
if (headclix
Jeżeli zmienna headclix jest większa lub równa 9, zrób to.
headclix
< 9){
headclix
W to miejsce trafi kod animujący. Nadaj zmiennej headclix wartość, n. jaką miała wcześniej, plus jede
}
else {
Ten warunek ogra użytkownika do nicza dziesięciu kliknięć .
W tym miejscu umieścisz kod przewijający pasek z rysunkiem.
= 0;
Po dziesiątym kliknięciu zresetuj zmienną headclix.
} }); });
Czy moglibyśmy w jakiś sposób powtórnie wykorzystać ten kod, żeby pozostałe elementy też były aktywne? Oczywiście! Każdy z tych elementów zachowuje się podobnie do elementu div#head (należy uwzględnić tylko kilka różnic takich jak nazwy zmiennych).
220
Rozdział 5.
efekty i animacja w jquery
Zaostrz ołówek Uzupełnij poniższy skrypt jQuery, aby elementy oczu, nosa i ust były aktywne. Za chwilę do każdego kliknięcia dodamy odpowiednią funkcjonalność. Upewnij się, że zmienne oraz instrukcje warunkowe zachowują właściwą kolejność, dzięki czemu będziesz mógł wykryć dziesiąte kliknięcie. $(document).ready(function(){ $("#head").click(function(){ if (headclix < 9){ %3?L&, } else{ headclix = 0; } });
});
my_scripts.js
jesteś tutaj 221
zaostrz rozwiązanie
Zaostrz ołówek Rozwiązanie
Tak więc uaktywniłeś elementy oczu, nosa i ust, ustawiając w odpowiedniej kolejności zmienne oraz instrukcje warunkowe, dzięki czemu będziesz mógł wykryć dziesiąte kliknięcie.
$(document).ready(function(){ var headclix = 0, eyeclix=0, noseclix= 0, mouthclix = 0;
$("#head").click(function(){ if (headclix < 9){ %3?L&, }
deklarować Możemy za ych i nadać im nn ie zm le wie zdzielając te wartości, 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; } });
Każda część twarzy potwora jest teraz aktywna i skonfigurowana w taki sposób, aby przed przewinięciem paska z rysunkie m pozwolić tylko na dziewięć kliknięć. Czy zwróciłeś uwagę, że — pomimo drobnych różnic — każda funkcja wewnątrz metody click ma podobną strukturę? To mógłby być dobry przypadek do wielokrotnego wykorzystania kodu.
Cierpliwości, mój pasikoniku, dojdziemy do tego w rozdziale 7.
});
my_scripts.js
222
Rozdział 5.
efekty i animacja w jquery
Robimy efekt błyskawicy Następny w kolejności jest efekt błyskawicy. Zanim spróbujemy zrealizować jego działanie, sprawdźmy, co na ten temat jest w planie. Rysunki z błyskaw icą są zagnieżdżone w se kcji pojemnika…
' ( Pojemnik Ramka )& % "&' ( )& % "&' )& % "&'
…i muszą się szybko pojawiać i znikać.
* * " * #
Symulacja obrazująca, jak powinna wyglądać animacja błyskawicy.
)& % "&'
Obrazy błyskawicy powinny pojawiać się i znikać szybko, tak jakby rzeczywiście się błyskało.
Zrobiliśmy już coś podobnego w rozdziale 1. z wysuwaniem się rysunku i nabieraniem przez niego barw. Czy nie moglibyśmy skorzystać z tego samego, żeby Zrób sobie potwora zadziałało?
Potencjalnie tak, ale być może istnieje lepszy sposób. Przyjrzeliśmy się gotowym efektom jQuery w rozdziale 1., ale teraz zagłębimy się w nie trochę bardziej.
jesteś tutaj 223
sztuczki z właściwościami
W jaki sposób jQuery animuje elementy? Kiedy przeglądarka pobiera plik CSS, ustawia wizualne właściwości elementów na stronie. Korzystając z wbudowanych efektów jQuery, interpreter JS zmienia te właściwości i animuje elementy na Twoich oczach. Nie jest to jednak magia... wszystko sprowadza się do właściwości CSS. Spójrzmy jeszcze raz na kilka efektów, które już widziałeś.
hide, show i toggle zmieniają właściwość CSS display hide
show
Interpreter JS zmienia właściwość CSS display wybranego elementu na none i usuwa go z układu strony.
Interpreter JS tak zmienia właściwość CSS display wybranego elementu, aby stał się on widoczny.
Jeśli element jest ukryty, interpreter JS go pokazuje, i odwrotnie.
Efekty jQuery zmieniają właściwości CSS w locie, wprowadzając zmiany na stronie na oczach użytkownika.
WYSIL
SZARE KOMÓRKI hide, show i toggle zmieniają właściwość display. Potrzebujemy jednak przewijać części twarzy oraz w tym samym czasie włączać i wyłączać błyskawice. Którą właściwość CSS zmienia Twoim zdaniem jQuery w celu uzyskania tych efektów?
224
Rozdział 5.
efekty i animacja w jquery
Efekty wygaszania zmieniają właściwość CSS opacity A
Za pomocą fadeIn interpreter JavaScriptu zmienia właściwość CSS opacity wybranego elementu od 0 do 100.
B
fadeTo umożliwia animowaną zmianę właściwości opacity wybranego elementu do określonej wartości procentowej.
X
Za pomocą fadeOut interpreter JavaScriptu zmienia właściwość CSS opacity wybranego elementu od 100 do 0 i pozostawia na stronie miejsce dla tego elementu.
Porady maniaka
Właściwość CSS opacity nie działa tak samo na różnych przeglądarkach. Na szczęście jQuery zadba o to w naszym imieniu i tak naprawdę to wszystko, co musimy o tym wiedzieć!
jesteś tutaj 225
dodaj nieco wdzięku do swoich wysunięć
Wysuwanie sprowadza się do zmiany wysokości Hej, DOM-ie, zmniejsz wysokość wybranego elementu do 0, a następnie zmień właściwość display.
Czy jesteś kimś w rodzaju magika?
Wersja DOM strony
slideUp Interpreter JavaScriptu
Interpreter JavaScriptu nakazuje drzewu DOM zmienić właściwość CSS height wybranego elementu (lub elementów) na 0, a następnie nadać właściwości display wartość none. W zasadzie jest to ukrycie za pomocą wsunięcia.
! 3=
Interpreter JavaScriptu pokazuje wybrany element (lub elementy), animując ich wysokość od 0 do wartości ustawionej w stylu CSS.
! B
Interpreter JavaScriptu sprawdza, czy obraz ma pełną wysokość, czy zerową, i przełącza efekt wysunięcia w zależności od wyniku. Jeżeli element ma wysokość 0, interpreter wysuwa go w dół, a jeśli ma pełną wysokość, wsuwa go w górę.
226
Rozdział 5.
efekty i animacja w jquery
Mogę więc wysuwać elementy wyłącznie w górę i w dół? A co, jeśli bym chciała przesunąć coś w lewo albo w prawo?
jQuery udostępnia gotowe efekty tylko do wysuwania elementów w górę albo w dół. W bibliotece tej nie znajdziesz metody slideRight ani slideLeft (a przynajmniej nie było ich w chwili pisania tej książki). Nie przejmuj się jednak — zajmiemy się tym nieco później...
W jQuery nie znajdziesz metody slideRight ani slideLeft.
Zaostrz ołówek Które z gotowych efektów jQuery przydadzą się w aplikacji Zrób sobie potwora? Dla każdej grupy efektów napisz, czy będą one pomocne, i wyjaśnij, dlaczego tę grupę wybrałeś lub nie. Efekt
Czy możemy go użyć?
Dlaczego?
Pokazywanie/ ukrywanie Wysunięcia Wygaszenia
jesteś tutaj 227
zaostrz rozwiązanie
Zaostrz ołówek Rozwiązanie
Które z gotowych efektów jQuery przydadzą się w aplikacji Zrób sobie potwora?
Efekt
Czy możemy go użyć?
Dlaczego?
Pokazywanie/ ukrywanie
Nie
Efekty pokazywania i ukrywania (show i hide) nie pomogą nam przy tworzeniu aplikacji Zrób sobie potwora, ponieważ nie musimy animować właściwości display żadnego elementu.
Wysunięcia
Nie
O mały włos! Pasek z rysunkiem musimy przesunąć w lewo, a slideUp, slideDown i efekty wysunięć pozwalają na zmienianie tylko właściwości height. Potrzebujemy czegoś, co zmieniałoby właściwość left.
Wygaszenia
Tak
Możemy skorzystać z efektów wygaszania, aby sprostać wymogom planu, które stwierdzają, że rysunki błyskawic powinny pojawiać się i wygaszać szybko, jakby naprawdę się błyskało.
Zatrudnij efekty wygaszania W założeniach jest mowa o tym, że rysunki błyskawic powinny pojawiać się i wygaszać, ale ma się to dziać szybko, aby wyglądało tak, jakby naprawdę się błyskało. Zagłębmy się trochę w efekty wygaszania i zobaczmy, jak możemy sprawić, że błyskanie będzie działać. Tutaj jest identyfikator pierwszego elementu graficznego.
tion decydujący Tutaj wstawiamy parametr dura roluje on to, Kont acji. anim nia trwa ie czas o jak długo będzie trwał efekt.
$("#lightning1").fadeIn("fast"); ów Możesz użyć jednego z parametr ... tekstowych: slow, normal lub fast
...albo możesz podać wartość w milisekundach. Mógłbyś na przykład wstawić 1000 i animacja efektu trwałaby jedną sekundę.
$("#lightning1").fadeIn(':::);
228
Rozdział 5.
efekty i animacja w jquery
Łącz efekty za pomocą łańcuchów metod Błyskawice muszą pojawiać się i wygaszać wciąż na nowo. Zamiast rozpisywać te efekty oddzielnie, możemy skorzystać z łańcucha metod, z którego korzystaliśmy przez chwilę w rozdziale 4., kiedy musieliśmy wspinać się po drzewie DOM. Łańcuchy metod to cecha jQuery pozwalająca na łączenie ze sobą metod, które będą działać na zwróconym zbiorze elementów. Dzięki nim efekty błyskawic będą łatwiejsze do napisania, a zatem przyjrzyjmy się im bliżej. Właściwość display elementu ...a następnie element znowu zostanie zmieni się od ukrycia zmieniony w całkowicie do pełnej widoczności przezroczysty. i nieprzejrzystości...
$("#lightning1").fadeIn().fadeOut();
Jeśli między nawiasami nie określisz czasu trwania, efekt otrzyma domyślną wartość normal, która wynosi 400 milisekund, czyli 0,4 sekundy.
Każda metoda, którą dodajesz, jest jak ogniwo w łańcuchu.
Napisz wiersze kodu, które zrealizują każdy z etapów przedstawionych poniżej. Ćwiczenie 1
Pokaż stopniowo element #lightning1 w czasie jednej czwartej sekundy.
2
Dodaj kolejny efekt, który wygasi element #lightning1 w czasie jednej czwartej sekundy.
jesteś tutaj 229
piorun uderza
Napisz wiersze kodu, które zrealizują każdy z etapów przedstawionych poniżej.
Rozwiązanie ćwiczenia
1
Pokaż stopniowo element #lightning1 w czasie jednej czwartej sekundy. $("#lightning1").fadeIn("250");
2
Dodaj kolejny efekt, który wygasi element #lightning1 w czasie jednej czwartej sekundy. $("#lightning1").fadeIn("250").fadeOut("250");
Kontratakujemy za pomocą funkcji czasowych Masz już więc błyskawicę, która pojawia się i znika, ale wymogi projektu mówią, że błyskawice powinny uderzać przez cały czas. Prawdziwa błyskawica strzela przez niebo, po czym zwykle następuje przerwa, po której na niebie pojawia się kolejna. Potrzebujemy zatem powtarzać nasz efekt. Powróć myślami do poprzednich rozdziałów, gdzie musiałeś wykonywać powtarzalne zadania. Z czego korzystałeś? Zgadza się: z funkcji! Po raz pierwszy pojawiły się one w rozdziale 3., gdy tworzyliśmy funkcję wielokrotnego użytku obsługującą kliknięcia oraz generator liczb losowych. Teraz możemy użyć funkcji do wywoływania wygaszeń, poczekać chwilę, a następnie znowu je wywoływać w różnych odstępach czasu. Dzięki temu uzyskamy dla Zrób sobie potwora udany efekt wielu błyskawic. Spójrzmy na funkcję realizującą taki efekt. Hej, JavaScripcie, utwórz dla mnie nową funkcję.
To jest nazwa, której będziemy używać do wywołania funkcji.
Oto nasz parametr określający odstęp czasu (zmienna o nazwie Wstaw go tutaj i użyj ponownie t). w tym wierszu.
function lightning_one(t){ $("#lightning1").fadeIn(250).fadeOut(250); ! B * ? " *+Q+0 };
Ten wiersz zawiera kod Metoda setTimeout efektów jQuery. nakazuje interpreterowi JS wywołanie funkcji, a następnie odczekanie chwilę przed ponownym jej wywołaniem.
A tutaj widzimy bardzo fajną cechę JavaScriptu. Mówisz interpreterowi JS, że chcesz, aby funkcja wywoływała samą siebie wciąż na nowo.
Oto odstęp czasu. Jest on wyrażony w milisekundach tak jak czasy trwania efektów, którym przyglądaliśmy się kilka stron wcześniej.
W zaledwie trzech wierszach kodu uzyskałeś zsynchronizowaną w czasie funkcję błyskającą pierwszym rysunkiem pioruna. Spróbuj teraz napisać funkcje dla pozostałych dwóch rysunków z piorunami.
230
Rozdział 5.
efekty i animacja w jquery
Magnesiki jQuery Poukładaj magnesiki z kodem we właściwej kolejności, aby uzyskać funkcje animujące błyskawice dla pozostałych dwóch elementów 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 z kodem — rozwiązanie
Magnesiki jQuery — rozwiązanie Poukładaj magnesiki z kodem we właściwej kolejności, aby uzyskać funkcje animujące błyskawice dla pozostałych dwóch elementów 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ą
głupie 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ą, która po prostu przełącza wybrany element ze stanu ukrytego na widoczny i na odwrót w zależności od bieżącego stanu tego elementu. Połączenie fadeIn i fadeOut w łańcuch utworzy sekwencyjny efekt, który najpierw stopniowo pokaże wybrany element lub elementy, po czym — gdy to zostanie już osiągnięte — ponownie je wygasi.
232
Rozdział 5.
nowa. Czy pochodzi ona z jQuery, czy z JavaScriptu?
O:
Metoda setTimeout pochodzi tak naprawdę z JavaScriptu i możesz z niej korzystać w celu kontrolowania pewnych aspektów animacji w jQuery. Funkcją setTimeout zajmiemy się dokładniej w dalszych rozdziałach, a zwłaszcza w rozdziale 7. Jeśli chciałbyś poczytać o niej już teraz, odwiedź Mozilla Developer’s Center pod adresem https://developer.mozilla. org/en/window.setTimeout, a jeżeli
naprawdę chcesz pogłębić swoją wiedzę, sięgnij po znakomitą książką Davida Flanagana JavaScript: The Definitive Guide (O’Reilly; http://oreilly.com/ catalog/9780596805531).
P: Kiedy używam efektu hide,
element po prostu znika. Jak mogę to spowolnić?
O:
Aby spowolnić efekt hide, show albo toggle, dodaj między nawiasami parametr duration określający czas trwania animacji. Oto, jak moglibyśmy zrealizować efekt ukrywania w rozdziale 1.: $("#picframe").hide(500);
efekty i animacja w jquery
Dodaj do swojego skryptu funkcje błyskawic Zrób to!
Korzystając z kodu, który utworzyłeś w ćwiczeniu na poprzedniej stronie, zaktualizuj plik ze skryptem dla aplikacji Zrób sobie potwora.
W tych wierszach są wywoływane funkcje zdefiniowane na samym dole pogrubioną czcionką.
$(document).ready(function(){ var headclix = 0, eyeclix
? " *U:::+0
? "=*@:::+0
? "?
*(:::+0
= 0, noseclix = 0, mouthclix = 0; Liczby między nawiasami to parametry w milisekundach, które zostaną przekazane do metody setTimeout. Za ich pomocą możesz zmieniać czasy błyskania piorunów.
$("#head").click(function(){ %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 oszczędności miejsca usunęliśmy niektóre podziały wierszy. Nie przejmuj się, jeśli w Twoim skrypcie wyglądają one inaczej.
$("#mouth").click(function(){ 9%L&, § ¨9%L&, 4 else{mouthclix = 0;} }); });//koniec funkcji end doc.onready
To są definicje funkcji błyskawic.
? " *+, )*- - ? '+# 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 próbna
Jazda próbna Otwórz stronę w swojej ulubionej przeglądarce, aby sprawdzić, czy Twój efekt błyskawicy działa. Udało Ci się osiągnąć efekt wygaszania błyskawic, łącząc go z metodą JavaScriptu setTimeout.
Pioruny pojawiają się i znikają szybko w różnych odstępach czasu, symulując prawdziwe błyskawice.
Jak dotąd udało Ci się opracować funkcje obsługujące kliknięcia, a trzy rysunki błyskawic pojawiają się i wygaszają w różnych odstępach czasu. Spójrzmy na plan, aby sprawdzić, co pozostało jeszcze do zrobienia.
% & & Zadaniem aplikacji Zrób sobie potwora jest zabawianie dzieci w docelowej grupie wiekowej przez umożliwienie im zrobienia sobie potwora dzięki mieszaniu 10 różnych głów, oczu, nosów i ust. Przejścia między poszczególnymi częściami twarzy potwora powinny być animowane. Animacja
ca, Symulacja obrazują . potwora
Symulacja
jak powinna się
y zmieniać część twarz
nna wyglądać obrazująca, jak powi
animacja błyskawicy.
Ta część planu stanowi nasze ostatnie wyzwanie w projekcie.
234
Rozdział 5.
Dotarliśmy więc do miejsca, w którym potrzebujemy przesunąć rysunek w lewo, a żaden z gotowych efektów przesuwania tego nie robi. Czy istnieje jakaś inna metoda, której moglibyśmy użyć? Gotowe efekty są wspaniałe, ale nie pozwalają Ci robić wszystkiego, na co tylko masz ochotę. Nadeszła pora na opracowanie niestandardowego efektu, który będzie przesuwać części twarzy potwora w lewo.
efekty i animacja w jquery
Efekty własnej roboty wykorzystujące metodę animate Tak więc w jQuery nie ma efektu slideRight ani slideLeft, a dokładnie tego potrzebujesz na tym etapie realizacji projektu. Czy to oznacza, że nasza strona Zrób sobie potwora poległa? Bez obaw. jQuery oferuje metodę animate służącą do tworzenia własnych efektów. Za pomocą animate możesz tworzyć niestandardowe animacje, które będą potrafiły robić o wiele więcej niż gotowe efekty. Metoda ta umożliwia animowanie właściwości CSS wybranego elementu lub elementów, a także animowanie wielu właściwości w tym samym czasie. Rzućmy okiem na niektóre z efektów, jakie możesz osiągnąć za pomocą metody animate.
Efekty ruchu
Możesz animować właściwości CSS związane z położeniem, żeby tworzyć iluzję przesuwania się elementów po ekranie (tak jak w przypadku pokazanej tu mumii).
Efekty skali
WYSIL
SZARE KOMÓRKI Możesz animować właściwości CSS height i width, aby tworzyć iluzję rośnięcia albo kurczenia się elementu.
Którą właściwość CSS będziesz musiał animować, aby przy każdym kliknięciu części twarzy potwora przesuwały się w lewo?
jesteś tutaj 235
to kwestia matematyki
Co można, a czego nie można animować? Za pomocą metody animate możesz dynamicznie zmieniać właściwości czcionek, aby tworzyć efekty tekstowe. W jednym wywołaniu animacji możesz także animować wiele właściwości CSS jednocześnie, co poszerza paletę ciekawych rzeczy, które potrafi robić Twoja aplikacja sieciowa. Chociaż metoda animate jest naprawdę niezła, ma ona swoje ograniczenia. Gdzieś tam w głębi animacja wykorzystuje mnóstwo matematyki (czym na szczęście nie musisz się przejmować), a zatem jesteś ograniczony do pracy tylko z tymi właściwościami CSS, których ustawienia są numeryczne. Znaj swoje ograniczenia, ale popuść wodze wyobraźni — metoda animate oferuje pełne spektrum elastyczności i rozrywki.
Efekty tekstowe .XUF]čVLčNXUF]č 2FKFR]DĤZLDWFR]DĤZLDW .XUF]čVLčNXUF]č 2FKFR]DĤZLDWFR]DĤZLDW .XUF]čVLčNXUF]č 2FKFR]DĤZLDWFR]DĤZLDW
.XUF]čVLčNXUF]č 2FKFR]DĤZLDWFR]DĤZLDW
Możesz animować właściwości CSS czcionek, aby tworzyć iluzję lecącego, rosnącego albo malejącego tekstu. To zaledwie kilka przykładów. Potrzebowalibyśmy o wiele, wiele, wiele więcej stron w książce, żeby zaprezentować wszystkie możliwości.
.XUF]čVLčNXUF]č 2FKFR]DĤZLDWFR]DĤZLDW
2EHMU]\MWR
Metoda będzie działać wyłącznie z właściwościami CSS, które 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&
efekty i animacja w jquery
Metoda animate z bliska Z zewnątrz metoda animate działa tak jak inne metody, z którymi już pracowałeś.
Pierwszy parametr pozwala Ci wybrać właściwość CSS, którą chcesz animować.
Wybierz element lub elementy, z którymi chcesz pracować.
Drugi parametr to czas trwania w milisekundach. Pozwala Ci on określić, jak długo będzie trwać animacja.
Wywołaj metodę animate.
$("#my_div").animate({left:"100px"},500); W tym przykładzie animujemy właściwość CSS left...
...i ustawiamy ją na 100 pikseli.
Pierwszy parametr jes wymagany — musisz t go tu umieścić, aby anima zadziałała. Drugi paramcja etr jest opcjonalny.
Jedną z największych zalet metody animate jest jednak możliwość zmieniania wielu właściwości wybranego elementu w tym samym czasie.
$("#my_div").animate({ opacity: 0, width: "200", height: "800" }, 5000);
2EHMU]\MWR
W tym przykładzie animujemy jednocześnie przezroczystość i wielkość elementu.
Parametry właściwości CSS należy ustawiać zgodnie ze standardem DOM, a nie ze standardem CSS.
WYTĘŻ UMYSŁ
Jak myślisz — co takiego dzieje się za kulisami w przeglądarce, co pozwala metodzie animate zmieniać elementy na oczach użytkownika?
jesteś tutaj 237
wprawianie rzeczy w ruch
Metoda animate zmienia w czasie styl Efekty wizualne oraz animacja, które oglądasz na ekranie w kinie albo w telewizji, korzystają ze złudzenia ruchu. Specjaliści od efektów i animatorzy biorą sekwencję obrazów i odtwarzają je w określonym tempie po jednym obrazie, aby to złudzenie osiągnąć. Spotkałeś się zapewne z opracowanymi tym prostym sposobem książkami, w których ten sam efekt jest osiągany podczas ich wertowania. To samo dzieje się w oknie przeglądarki, z tym że nie mamy sekwencji obrazów do pokazania. Zamiast tego interpreter JavaScriptu wielokrotnie wywołuje funkcję, która zmienia styl animowanego obiektu. Przeglądarka przenosi te zmiany na ekran. Użytkownik widzi iluzję ruchu albo zmianę elementu, kiedy modyfikowany jest jego styl. 1
A animate 5 6 ' ' ' ' Zmień właściwość CSS left na 500px w czasie 400 milisekund. Interpreter JavaScriptu 2
ate nie odzie anim Jeśli w metartości dla parametru określisz w ia, zostanie przyjęta . czasu trwan yślna 400 milisekund m wartość do
4 5 6 ' 3 '+ * animate '+ Chciałbym ustalić harmonogram odświeżania ekranu.
Wygląda na to, że uda mi się uwinąć w czasie trochę dłuższym niż kilka milisekund.
internetowej
JavaScript interpreter 3
4 5 6 ' 7 ' ' '+ * '& 3 ' ' F 7 ' 4
8 '& %
238
Rozdział 5.
efekty i animacja w jquery
Połącz fragmenty kodu zawierające metodę animate z opisem tego, co robi on na ekranie.
$("#my_div").animate({top: "150px"}, "slow")
Jednocześnie animuje zmiany lewego i prawego marginesu wszystkich paragrafów.
$("p").animate({
Animuje zmianę prawej pozycji #my_div do zera w ciągu pół sekundy.
marginLeft:"150px", marginRight:"150px" }); $("#my_div").animate({width: "30%"}, 250)
Animuje zmianę odstępu między literami we wszystkich sekcjach w domyślnym czasie 400 milisekund.
$("#my_div").animate({right: "0"}, 500)
Jednocześnie animuje zmianę dopełnienia i szerokości #my_div.
$("p").animate({letterSpacing:"15px"});
Powoli animuje zmianę górnej pozycji #my_div.
$("#my_div").animate({ padding: "200px", width: "30%"
Szybko animuje zmianę wysokości wszystkich obrazów.
}, "slow")
$("img").animate({height: "20px"}, "fast")
Animuje zmianę szerokości #my_div w czasie jednej czwartej sekundy.
jesteś tutaj 239
kto co robi — rozwiązanie
Rozwiązanie Połącz fragmenty kodu zawierające metodę animate z opisem tego, co robi on na ekranie. $("#my_div").animate({top: "150px"}, "slow")
Jednocześnie animuje zmiany lewego i prawego marginesu wszystkich paragrafów.
$("p").animate({
Animuje zmianę prawej pozycji #my_div do zera w ciągu pół sekundy.
marginLeft:"150px", marginRight:"150px" }); $("#my_div").animate({width: "30%"}, 250)
Animuje zmianę odstępu między literami we wszystkich sekcjach w domyślnym czasie 400 milisekund.
$("#my_div").animate({right: "0"}, 500)
Jednocześnie animuje zmianę dopełnienia i szerokości #my_div.
$("p").animate({letterSpacing:"15px"});
Powoli animuje zmianę górnej pozycji #my_div.
$("#my_div").animate({ padding: "200px", width: "30%"
Szybko animuje zmianę wysokości wszystkich obrazów.
}, "slow")
$("img").animate({height: "20px"}, "fast")
240
Rozdział 5.
Animuje zmianę szerokości #my_div w czasie jednej czwartej sekundy.
efekty i animacja w jquery
Dokładnie skąd dokąd? Ważną rzeczą do zapamiętania na temat metody animate jest fakt, że zmienia ona aktualną właściwość CSS na właściwość, którą ustawisz w pierwszym parametrze. Aby Twoje niestandardowe animacje były skuteczne, musisz się mocno zastanowić, jakie wartości są aktualnie ustawione w CSS. W poprzednim przykładzie zmieniliśmy lewe położenie #my_div na 100 pikseli. To, co wydarzy się na ekranie, w całości zależy od bieżącej wartości właściwości CSS left elementu #my_div.
Bieżąca wartość właściwości CSS
Wartość właściwości CSS w animate #my_div przesunie się o 80 pikseli w prawo.
#my_div
#my_div{
Element jest animowany do położenia bezwzględnego.
$("#my_div").animate({left:"100px"});
left: 20px; }
Jeśli właściwość ma aktualnie inną wartość, otrzymamy inny wynik.
Bieżąca wartość właściwości CSS
Wartość właściwości 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{
$("#my_div").animate({left:"100px"});
left: 200px; }
Fascynujące! Tylko jak możemy z tego skorzystać, żeby zadziałało nasze Zrób sobie potwora?
Wszystko jest względne. Aby części twarzy potwora w Zrób sobie potwora przesuwały się w stronę, w którą chcemy, musimy zastanowić się, jakie są ich bieżące pozycje i jak chcemy je zmienić względem pozycji, które zajęły po tym, kiedy ostatnio zmieniła je metoda animate.
jesteś tutaj 241
to jest względnie łatwe
Ruch bezwzględny obiektów a ich ruch względny Zapewne pamiętasz, że paski z rysunkami, które chcemy pokazać, zagnieździliśmy wewnątrz sekcji o identyfikatorze #pic_box. Obecnie w CSS właściwość left elementu #pic_box ma wartość 91px. Zastanówmy się nad tym, jak chcielibyśmy przesuwać paski z rysunkami, aby uzyskać efekt przesunięcia w lewo, na którym nam zależy. szerokość 367 pikseli
szerokość 367 pikseli
szerokość 367 pikseli
Zaczynamy od pokazania pierwszej części głowy. Jej względne położenie to 0 pikseli.
Za każdym razem, kiedy użytkownik kliknie, chcemy przewinąć pasek z rysunkiem o 367 pikseli w lewo. Potrzebujemy więc przekazać meto animate, żeby przesunęła rysunek dzie o –367 pikseli za każdym razem, kiedy zostanie wywołana funkcja.
Zastanów się nad przykładem animacji bezwzględnej z poprzedniej strony. żeby Tutaj mówimy metodzie animate, _div nadała lewej pozycji sekcji #my eli. wartość równą dokładnie 100 piks
$("#my_div").animate({left:"100px"});
sunęła Ale jak powiedzieć jej, żeby prze element o –367 pikseli za każdym anie razem, kiedy metoda animate zost wywołana?
$("#head").animate({left:"???"});
Animacja względna = przesuń to za każdym razem właśnie o tyle Za pomocą animacji bezwzględnej przesuwasz element na bezwzględną pozycję siatki ekranu. Za pomocą animacji względnej przesuwasz element względem pozycji, którą zajmował ostatnio po zakończeniu animacji, która go tam umieściła.
Ale jak przesuwamy element względnie za pomocą metody ?
242
Rozdział 5.
efekty i animacja w jquery
Przesuwaj elementy względnie dzięki łączeniu operatorów Istnieją specjalne operatory JavaScriptu, które przesuwają element lub elementy o tę samą wartość przy każdym wywołaniu metody animate. Są one znane jako operatory przypisania, ponieważ są zwykle używane do przypisywania wartości zmiennej w taki sposób, że do jej bieżącej wartości jest dodawana nowa wartość. Brzmi to o wiele bardziej skomplikowanie, niż w istocie jest. Znak równości jest operatorem przypisania.
a = 20 Operator = przypisuje zmiennej a wartość 20.
Kiedy łączysz operatory arytmetyczne ze znakiem równości, otrzymujesz przydatne skróty.
a 30
a -= 10
Tutaj znak minusa w połączeniu z operatorem przypisania tworzy skrót dla „a = a – 10”.
atorem Znak plusa w połączeniu z oper „a = a + 30”. przypisania jest tu skrótem dla
Takie połączenia operatorów pomagają w tworzeniu animacji względnej, umożliwiając ustawianie nowej wartości na wartość bieżącą plus albo minus pewna liczba pikseli. identyfikatorze Ten zapis przesunie element o m, kiedy raze ym każd za eli piks 20 box o ate. anim da meto a ołan wyw zostanie
) +
$("#box").animate({left:I9:}); Oto, co się stanie z elementem #box przy każdym wywołaniu powyższej animate zostaje metody animate. animate zostaje wywołana i ustawia left na +=20.
Załóżmy, że left startuje z wartością 0.
left = 0
left = 20
CELNE SPOSTRZEŻENIA
3 jest skrótem dla przemnożenia bieżącej wartości a przez 5 i przypisania uzyskanego wyniku do a.
3K- jest skrótem dla podzielenia bieżącej wartości a przez 2 i przypisania uzyskanego wyniku do a.
wywołana i ustawia left na +=20.
left = 40
Zwiększając za każdym razem wartość lewej pozycji elementu, w rzeczywistości przesuwamy go w prawą stronę okna przeglądarki.
Napisz wiersz kodu w jQuery, który zrealizuje następujące czynności: Ćwiczenie
1
Przesunięcie elementu #head o 367 pikseli w lewo przy każdym wywołaniu metody animate. Czas trwania ustaw na pół sekundy.
2
Przesunięcie elementu #head na pozycję wyjściową (left:0px). Czas trwania ustaw na pół sekundy.
jesteś tutaj 243
rozwiązanie ćwiczenia
Napisz wiersz kodu w jQuery, który zrealizuje następujące czynności:
Rozwiązanie ćwiczenia
1
Przesunięcie elementu #head o 367 pikseli w lewo przy każdym wywołaniu metody animate. Czas trwania ustaw na pół sekundy. $("#head").animate({left:"-=367px"},500);
2
Przesunięcie elementu #head na pozycję wyjściową (left:0px). Czas trwania ustaw na pół sekundy. Ta bezwzględna animacja $("#head").animate({left:"0px"},500);
resetuje głowę potwora w sposób przypominający przewinięcie taśmy.
Nie istnieją
głupie pytania
P: Niektóre osoby nie chcą,
żeby animacje przeszkadzały im w oglądaniu strony. Co powinienem zrobić, żeby pozwolić użytkownikowi na wyłączenie animacji?
O: To doskonałe spostrzeżenie.
Animacje mogą irytować i powodować problemy z dostępnością. Jeśli chcesz, żeby użytkownicy mogli je wyłączać, możesz utworzyć przycisk powiązany z następującym kodem (wiesz już, jak to zrobić): $.fx.off = true; Innym przydatnym sposobem na wyłączenie animacji jest użycie metody jQuery o nazwie stop. Możesz się dowiedzieć więcej na temat obu tych sposobów w witrynie jQuery: http://api.jquery.com/jQuery.fx.off/ http://api.jquery.com/stop/
P: Powiedziałeś: „Parametry
Zauważ, że w notacji CSS dla właściwości szerokości piszesz border-width, natomiast w notacji DOM dla tej samej właściwości używasz zapisu borderWidth.
O: Świetne pytanie! Metoda
Jeśli chcesz poczytać więcej o różnicach między tymi dwoma notacjami, zapoznaj się z poniższym artykułem:
właściwości CSS należy 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 przykład ilustrujący tę różnicę. Aby ustawić szerokość obramowania sekcji w notacji CSS, napisałbyś coś takiego: div { border-style:solid; border-width:5px; } Załóżmy teraz, że chciałbyś animować tę szerokość obramowania. W jQuery właściwość szerokości krawędzi 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ć, jeśli
chciałbym animować zmianę koloru?
O: Aby animować przejścia między
kolorami, musisz skorzystać z jQuery UI, które zawiera więcej efektów, niż zostało dołączonych do jQuery. jQuery UI opiszemy w rozdziale 10., ale z pominięciem efektów. Kiedy już dowiesz się, jak pobierać i ustawiać motywy oraz dołączać jQuery UI do swoich aplikacji internetowych, animowanie zmian koloru stanie się bardzo proste.
efekty i animacja w jquery
Dodaj funkcje animujące do swojego skryptu Korzystając z kodu, który ułożyłeś w ćwiczeniu na poprzedniej stronie, zaktualizuj swój plik ze skryptem dla aplikacji Zrób sobie potwora.
$("#head").click(function(){ if (headclix < 9){ )*?!+# *,
2&67(;.Q@::+0 %3?L&, } else{ )*?!+# *,
2:;.Q@::+0 headclix = 0; } Możemy tu skorzystać ze słowa });
Zrób to!
kluczowego „this”, ponieważ znajdujemy się wewnątrz funkcji obsługującej element, który kliknęliśmy.
$("#eyes").click(function(){ if (eyeclix < 9){ )*?!+# *,
2&67(;.Q@::+0 L&, } else{ )*?!+# *,
2:;.Q@::+0 eyeclix = 0; } }); $("#nose").click(function(){ if (noseclix < 9){ )*?!+# *,
2&67(;.Q@::+0 L&, } else{ )*?!+# *,
2:;.Q@::+0 noseclix = 0; } }); $("#mouth").click(function(){ if (mouthclix < 9){ )*?!+# *,
2&67(;.Q@::+0 9%L&, } else{ )*?!+# *,
2:;.Q@::+0 mouthclix = 0; }
my_scripts.js
jesteś tutaj 245
jazda próbna
Jazda próbna Otwórz stronę w swojej ulubionej przeglądarce, aby upewnić się, że wszystko działa.
Udało Ci się napisać działający niestandardowy efekt przesuwania w lewo.
Za pomocą kilku kliknięć użytkownik może zrobić sobie własną twarz potwora.
246
Rozdział 5.
efekty i animacja w jquery
Krzyżówka jQuery Nadszedł czas, aby wygodnie usiąść i dać swojej lewej półkuli jakieś zajęcie. Będzie to zwykła krzyżówka. Wszystkie wyrazy i wyrażenia stanowiące hasła pochodzą z bieżącego rozdziału.
Poziomo
Pionowo
1. Metoda powodująca następujące działanie: jeżeli wskazany element ma wysokość 0, interpreter JS wysuwa go w dół, jeśli natomiast wskazany element ma pełną wysokość, interpreter JS wsuwa go do góry.
1. 1000 milisekund.
4. Tworzą iluzję elementu przesuwającego się po ekranie. 6. hide, show i toggle animują tę właściwość CSS. 9. Funkcjonalność jQuery umożliwiająca łączenie ze sobą metod, które chcesz wywołać dla danego zbioru elementów. 10. Efekty jQuery polegają na manipulowaniu nim w locie. 11. Tę właściwość CSS oraz właściwość width możesz animować w celu stworzenia iluzji rosnącego albo malejącego elementu. 12. Parametr kontrolujący czas trwania efektu. 13. Kiedy wywołasz ten efekt jQuery, interpreter JS zmieni przezroczystość wskazanego elementu od 0 do 100.
2. Metoda animate będzie działać tylko dla właściwości CSS, które mają takie wartości. 3. Biblioteka jQuery oferuje tę metodę, jeśli zechcesz tworzyć efekty niestandardowe. 5. Efekt uzyskany za pomocą animowania właściwości height elementu. 7. Jedna z wartości, obok fixed i relative, jaką można nadać właściwości określającej położenie elementu w celu jego animowania. 8. Metoda nadająca danemu elementowi w animowany sposób określony stopień przezroczystości.
jesteś tutaj 247
potworny sukces
Patrz, mamo! Bez Flasha! Dyrektor ds. projektów internetowych jest zadowolona z wyników Twojej pracy nad aplikacją Zrób sobie potwora. Skorzystałeś z gotowych efektów jQuery w połączeniu z własnymi niestandardowymi efektami skrojonymi na miarę potrzeb klienta.
Nasza docelowa grupa w wieku od 6 do 10 lat uwielbia stronę Zrób sobie potwora. I nie potrzebujemy używać Flasha ani wtyczek do przeglądarek. No proszę, jQuery idealnie wpasował się w nasze potrzeby.
Fajowo! Zrobiłem tyle potworów, że aż się w tym pogubiłem!
248
Rozdział 5.
Niesamowite! Wystraszę moją młodszą siostrę potworem, którego zrobiłam!
efekty i animacja w jquery
Rozwiązanie krzyżówki jQuery
jesteś tutaj 249
twój niezbędnik jquery
Rozdział 5.
Twój niezbędnik jQuery Masz już za sobą rozdział 5., a do swojego niezbędnika dodałeś efekty wygaszania kolorów oraz wysuwania, a także niestandardowe animacje.
Efekty ania wygasz S ość CS właściw tu: ją ia n men Zmie nego ele wskaza
opacity
Efekty wysuwan
ia
Zmieniają wskazane właściwość 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 wości CSS. Animuje właści i CSS, które właściwościam i m ki ta z o lk Działa ty ości liczbowe. . przyjmują wart bo bezwzględnie ć względnie al wa su ze pr na Elementy moż ym stopniu +, –) w znaczn , (= ów or at er Połączenia op ację względną. ułatwiają anim
250
Rozdział 5.
6.M4XHU\Lb-DYD6FULSW
Luke jQuery, jestem twoim ojcem! Istnieją, synu, pewne rzeczy, z którymi 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 język ojczysty. W tym rozdziale przyjrzymy się niektórym aspektom JavaScriptu, których będziesz potrzebował do tworzenia naprawdę atrakcyjnych stron, oraz temu, jak można z nich korzystać w jQuery w celu tworzenia niestandardowych list i obiektów, a także jak przechodzić przez nie w pętlach, aby ułatwić sobie życie.
to jest nowy rozdział 251
jquery albo porażka
Atrakcyjniejszy barek Rusz Głową Masz szczęście! Wieść o Twojej biegłości w jQuery zatacza coraz szersze kręgi. Spójrz na poniższy e-mail z barku Rusz Głową z prośbą o pomoc w zwiększeniu poziomu atrakcyjności tego miejsca dla odwiedzających. Od: Temat: !"# $ % &# *+:
3' ! ! G ; " '
' 3 '&' +
' ' ' HEG0
