jQuery. Rusz głową! 9788324663255, 9781449393212 [PDF]

Zitiervorschau

---

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::>

P.S. Dołączam autoportret ze sprzętem foto Nagród za odgadnięcie, ę... stron nową moją m czyła zrobiłam, jak zoba co robię, nie będzie!

jesteś tutaj  109

twój niezbędnik jquery

Rozdział 2.

Twój niezbędnik jQuery Masz już za sobą rozdział 2., a do swojego niezbędnika dodałeś podstawy selektorów oraz metody jQuery.

Selektory

$(this)

y element. Wybiera bieżąc dzie is) w kodzie bę go, Znaczenie $(th te od zależności ego. się zmieniać w ni do e ni ła odwo skąd następuje

$(this) — wybiera bieżący element. $("div") — wybiera wszystkie elementy div na stronie. $("div p") — wybiera wszystkie elementy p znajdujące się bezpośrednio w elementach div. $(".moja_klasa") — wybiera wszystkie elementy znajdujące się w klasie moja_klasa. $("div.moja_klasa") — wybiera tylko te elementy div, które należą do klasy moja_klasa (różne rodzaje elementów mogą należeć do jednej klasy).

Metody jQuery

o Metoda jQuery to kod wielokrotneg e otec bibli w y wan inio użycia zdef ry jQuery. Metod używa się w jQue enia robi do pcie Scri i w Java e różnych rzeczy. Pomyśl o metodzi cież prze zi chod — iku own jak o czas i o wykonywanie różnych czynnośc ch. owy rnet inte na stronach .append — dołącza określoną zawartość do drzewa DOM. Zawartość zostanie dodana na końcu elementu, który ją wywoła. wa .remove — usuwa element z drze . DOM

110

Rozdział 2.

$("#moje_id") — wybiera elementy z identyfikatorem moje_id.

3.=GDU]HQLDLbIXQNFMHM4XHU\

Niech się coś dzieje na Twojej stronie Ile jeszcze razy mam to wykopać?

jQuery 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.

to jest nowy rozdział 

111

drobiazgowy księgowy

Twoja znajomość jQuery znowu jest potrzebna Emilia jest zadowolona z pracy, jaką dla niej wykonałeś w związku z promocją „Skacz z radości”, ale spotkała się ze swoim księgowym i teraz chciałaby, żebyś dokonał na jej stronie kilku zmian.

Od:     Temat:       *+:

  ':      9    '&  '   '      '     '&   

' 3  +    "3      

      +    ;'    + ' '         "3     ? 7            '

  ' 3 8'    +            A 

    +     

    +       '  7  '   3   '  9 '      +         B *    + '   3 -D

 ' '

Emilia zrobiła swojemu księgow emu kilka zdjęć do jego profilu, ale nie potrafiła nakłonić go do skakania z radości. Czy Twoje zmiany w witrynie jej w tym pomogą?

112

Rozdział 3.

zdarzenia i funkcje jquery

Facet od pieniędzy ma rację... Ograniczenie promocji tylko do jednego prostokąta uchroni Emilię przed rozdaniem zbyt wielu rabatów i skłoni ludzi do klikania po stronie. Wygląda na to, że nowe funkcje sprowadzają się wyłącznie do klikania...

Klik!

Klik!

Klik!

Klik! Klik!

Zaostrz ołówek Przyszła pora na kolejną listę wymagań. Wiesz, co robić: spójrz jeszcze raz na e-mail od Emilii i odszukaj wszystkie nowe funkcje, o które prosi. Napisz, jakie są to według Ciebie funkcje. Wymagania:

jesteś tutaj 

113

zaostrz rozwiązanie

Zaostrz ołówek Rozwiązanie

Przyszła pora na kolejną listę wymagań. Wiesz, co robić: spójrz jeszcze raz na e-mail od Emilii i odszukaj wszystkie nowe funkcje, o które prosi. Napisz, jakie są to według Ciebie funkcje. Oto nasze rozwiązanie:

Wymagania:

• Rabat powinien znajdować się tylko w jednym z czterech pól ze zdjęciami, a same zdjęcia powinny być umieszczane w różnych (wybranych losowo) polach przy każdym pobraniu strony.

• Użytkownicy powinni mieć tylko jedną szansę na znalezienie rabatu po załadowaniu strony. Musimy ich więc powstrzymać przed kliknięciem więcej niż raz, żeby nie otrzymali większej bonifikaty.

• Kiedy użytkownik zdecyduje się już kliknąć jakieś pole, powinien pokazać się komunikat z informacją, czy trafił w rabat. Jeśli tak, należy pokazać mu kod, aby mógł skorzystać z niego w swoim zamówieniu.

• Zamiast zmiennej wysokości rabatu będzie to standardowe 20%, więc zamiast wartości procentowej należy pokazać użytkownikowi kod rabatowy.

Jak nasze rozwiązanie działa teraz O rany! Ten facet to dopiero klika!

Jak nasze rozwiązanie powinno działać Dam ci tylko jedną szansę!

WYSIL

SZARE KOMÓRKI Wiesz już, jak dodać do strony kliknięcie. Jak jednak zagwarantować, że użytkownik będzie mógł kliknąć tylko raz? W poprzednich rozdziałach nauczyłeś się też, jak za pomocą kliknięcia uruchomić kod. Czy potrafisz znaleźć sposób, który pomoże nam ukończyć nasze zadanie?

114

Rozdział 3.

zdarzenia i funkcje jquery

Dodawanie zdarzeń na stronę Aplikacja Skacz z radości sprowadza się przede wszystkim do klikania. W jQuery oraz w JavaScripcie kliknięcie jest określane mianem zdarzenia (istnieje mnóstwo innych zdarzeń, ale dla naszych obecnych celów wystarczy, że skupimy się na kliknięciach). Zdarzenie to mechanizm, który pozwala wykonać fragment kodu, kiedy coś wydarzy się na stronie (na przykład gdy użytkownik kliknie przycisk). Kod, który zostaje wtedy uruchomiony, jest nazywany funkcją, a funkcje pozwalają sprawić, że Twój jQuery będzie wydajniejszy i będzie nadawał się do wielokrotnego użycia. Za chwilę przyjrzymy się im bliżej, na razie jednak rzućmy okiem na to, jak naprawdę działa kliknięcie. Zauważ dodatkowy krok, którego nie pokazaliśmy w rozdziale 1. Zdarzenie kl przypadło naiknięcia przycisk HTML.

Słuchacz zdarzeń słyszy zdarzenie i przekazuje je...

Klik!

...do interpretera JavaScriptu, który sprawdza, co trzeba zrobić po każdym zdarzeniu...

Przycisk HTML

$("#btnSubmit").click( function(){ KK9SS3RXR?S9 €

...i uruchamia kod zmieniający stronę.

$("div").toggle(); });

O co chodzi z tym słuchaczem zdarzeń? Nigdy go wcześniej nie widziałam. Co takiego on właściwie robi? Dobre pytanie. Słuchacze zdarzeń są częścią Obiektowego Modelu Dokumentu (DOM). Możesz dodawać ich do każdego elementu strony, dzięki czemu nie będziesz musiał oczekiwać od użytkowników, że w celu uruchamiania zdarzeń będą klikać łącza i przyciski. Przyjrzyjmy się słuchaczom zdarzeń bliżej.

jesteś tutaj 

115

światła, kamera, zdarzenia

Za kulisami słuchacza zdarzeń Słuchacze zdarzeń stanowią sposób, w jaki przeglądarka zwraca uwagę na to, co użytkownik robi na stronie, by następnie przekazać interpreterowi JavaScriptu, czy ten powinien coś zrobić, czy też nie. jQuery udostępnia bardzo łatwe sposoby na dodawanie słuchaczy zdarzeń do dowolnego elementu strony, dzięki czemu użytkownicy nie będą ograniczeni wyłącznie do klikania przycisków i łączy! Dodaj zdarzenie kliknięcia Element z identyfikatorem showMessage.

$("#showMessage").click(function() { 3& –3JR&R€^–

Uruchom ten kod.

}); 1

Kliknięto element.

Klik!

4

Użytkownik widzi, że coś wydarzyło się na stronie.

To, co widzisz w przeglądarce

Za kulisami 3 2

Słuchacz zdarzeń dołączony do elementu „słyszy” kliknięcie i mówi interpreterowi JavaScriptu, jaki kod jest z nim powiązany.

Interpreter JavaScriptu uruchamia funkcję wskazaną przez słuchacza zdarzeń. Muszę wyświetlić okno alarmowe!

Usłyszałem kliknięcie.

  

116

Rozdział 3.

Interpreter JavaScriptu

zdarzenia i funkcje jquery

Wiązanie zdarzenia Dodawanie zdarzenia do jakiegoś elementu nazywamy wiązaniem zdarzenia z tym elementem. Gdy to zrobimy, słuchacz zdarzeń będzie wiedział, jaką funkcję powinien kazać wywołać interpreterowi JavaScriptu. Istnieją dwa sposoby wiązania zdarzeń z elementami.

Metoda 1. Korzystamy z tej metody, aby dodawać zdarzenia do elementów, kiedy strona jest pobierana. Sposób ten jest często nazywany metodą złożoną.

$("#myElement").click( function() { alert($(this).text()); });

Metoda 2. Metody tej używamy podobnie jak metody 1., ale można z niej też korzystać, aby wiązać zdarzenia z elementami, które zostały dodane do strony już po jej załadowaniu, na przykład przy tworzeniu nowych elementów drzewa DOM.

Obie metody dodają słuchacza zdarzenia click do elementu o identyfikatorze myElement.

$("#myElement").bind('click', function() { alert($(this).text()); });

2EHMU]\MWR

Metoda 1. (złożona) jest po prostu skróconą wersją metody 2. stosowaną tylko wtedy, gdy elementy drzewa DOM już istnieją.

jQuery oferuje wiele podobnych skrótów, które pomagają zachować czysty kod. Zostały one dodane wyłącznie dla wygody użytkowników i mają swoje ograniczenia. Metodę 2. należy stosować w celu dodawania zdarzeń do nowych elementów drzewa DOM, które zostały utworzone za pomocą kodu, takich jak aktywne rysunki albo nowe interaktywne pozycje na listach.

jesteś tutaj 

117

gotowy na zdarzenia

Wyzwalanie zdarzenia Zdarzenia na dowolnej stronie można wyzwalać na wiele różnych sposobów. W rzeczywistości cała Twoja przeglądarka obfituje w zdarzenia i niemal każde z nich może wywoływać następne! ''

 



''



6

7'

 6



7'

6



&6

   

   klawiatury

   





'&  7' '





 

   

 



Pobieranie dokumentu

     

'



 

 



118

Rozdział 3.

zdarzenia i funkcje jquery

Zdarzenie zostało wyzwolone Wywołaj funkcję function () { Interpreter JavaScriptu

[To jest blok kodu.  I8LX93S }

  

Selektor + Zdarzenie + Funkcja = Złożona interakcja

Nie istnieją

głupie pytania

P: A co z funkcjami wewnątrz zdarzeń?

O:

Są one nazywane funkcjami obsługi zdarzeń. Taka funkcja to blok kodu, który jest uruchamiany po wyzwoleniu zdarzenia. Funkcje obsługi poznamy bliżej w dalszej części bieżącego rozdziału.

P: Ile jest różnych zdarzeń? O: We wszystkich kategoriach

istnieje łącznie prawie 30 różnych zdarzeń.

P:

Co może wyzwolić zdarzenie (tj. sprawić, że zdarzenie zajdzie) na stronie?

O: Różne rodzaje zdarzeń są P: Gdzie mogę znaleźć różne wyzwalane przede wszystkim rodzaje zdarzeń?

O: W witrynie jquery.com

w dziale Documentation/Events.

P:

Ile jest różnych kategorii zdarzeń?

O:

przez urządzenia wejścia (klawiatura i mysz). Zdarzenie może wywołać też Twoja przeglądarka, dokument strony, kod jQuery, a nawet formularz HTML.

W jQuery zdarzenia pogrupowano w pięć różnych kategorii: zdarzenia przeglądarki, pobierania dokumentu, formularzy, klawiatury i myszy.

jesteś tutaj 

119

zdarzenie w zbliżeniu

Zdarzenie w zbliżeniu W tym tygodniu wywiad na temat: Co jest tak wyjątkowego w zdarzeniach?

Rusz głową!: Witaj, Zdarzenie. Miło mi, że mogę z tobą porozmawiać. Zdarzenie: To wspaniale być z Wami. Rusz głową!: Zatem kim jesteś? Kim jest prawdziwe Zdarzenie? Zdarzenie: Obecnie udało mi się już odnaleźć siebie, ale zanim nastał jQuery, byłom trochę rozproszone. Jestem obiektem, który pomaga użytkownikom wchodzić w interakcje ze stroną WWW. Rusz głową!: Brzmi nieźle. Jeszcze do tego wrócimy, ale powiedz, dlaczego byłoś rozproszone. Skąd pochodzisz? Zdarzenie: To długa historia. Jeszcze w połowie lat 90. Netscape wypuścił Navigatora 2.0. Było cudownie. Byłom jeszcze naprawdę prostym modelem. DOM, JavaScript i ja dopiero zaczynaliśmy. Istniał standard W3C określający, jak powinniśmy być implementowani w przeglądarkach i w ogóle! Rusz głową!: To było dawno temu. Od tego czasu przebyłoś długą drogę. Zdarzenie: Tak, wszyscy przebyliśmy. W tym czasie zostaliśmy wplątani w wojnę między Internet Explorerem Microsoftu i Netscape’em. W końcu wygrał Explorer, ale każda strona próbowała pokonać drugą sprytnymi sztuczkami, których nie było w standardzie i które były czytelne tylko dla jej własnych przeglądarek. Rusz głową!: To chyba były ciężkie czasy. Zdarzenie: Były, ale wyłoniły się z tego dobre rzeczy. W 1997 roku zarówno Netscape,

120

Rozdział 3.

jak i Microsoft wypuściły wersje 4.0 swoich przeglądarek. Pojawiło się wiele nowych zdarzeń, a my mogliśmy zrobić ze stroną o wiele więcej. Wspaniale wtedy było być zdarzeniem. Rusz głową!: Co się w takim razie stało? Zdarzenie: Rzeczy wymknęły się spod kontroli. Netscape stał się opensource’owy, a potem pojawiła się Mozilla Firefox, choć Netscape ciągle jeszcze istniał. Zarówno on, jak i Explorer mieli różne modele zdarzeń. Wiele rzeczy działało tylko w jednej przeglądarce, denerwując ludzi, którzy weszli na stronę poprzez niewłaściwą z nich. Netscape ostatecznie odszedł, ale na scenie pojawiło się kilka nowych przeglądarek. Rusz głową!: To dlaczego znowu jest wspaniale? Zdarzenie: Gdy patrzy się na poszczególne przeglądarki, rzeczy nie wyglądają jeszcze idealnie. Internet Explorer wspiera inne zdarzenia niż Firefox, Google Chrome, apple’owskie Safari albo Opera, chociaż to się zmienia wraz z każdą nową wersją. Przeglądarki zaczynają być coraz bardziej zgodne ze standardem. Najlepsza wiadomość jest jednak taka, że jQuery radzi sobie z tymi problemami w imieniu programisty. Rusz głową!: Naprawdę? To świetnie! Ale jak? Co to jest ten obiekt, o którym wspomniałoś, że nim jesteś? Zdarzenie: jQuery wie, która przeglądarka jest w użyciu, i decyduje, jak radzić sobie ze zdarzeniami, w zależności od przeglądarki, z której korzysta użytkownik. A co do obiektu, to nie ma tu nic specjalnego. Praktycznie rzecz biorąc, obiekt to tak naprawdę tylko zmienne i funkcje zestawione razem w jednej strukturze.

zdarzenia i funkcje jquery

Rusz głową!: Gdzie możemy sobie poczytać więcej o tych zmiennych i funkcjach? Zdarzenie: Więcej na mój temat możesz znaleźć w oficjalnej dokumentacji jQuery, o tutaj: http://api.jquery.com/category/events/event-object/. Rusz głową!: Dzięki. Z pewnością tam zajrzę. W jaki sposób możemy z ciebie korzystać na naszych stronach? Zdarzenie: Najpierw trzeba mnie gdzieś podpiąć, żeby słuchacz zdarzeń wiedział, że ma mnie nasłuchiwać. Potem coś musi mnie wyzwolić, dzięki czemu będę mogło uruchomić kod, który powinien zostać wykonany w przypadku zajścia zdarzenia. Rusz głową!: OK, ale skąd wiesz, jaki kod uruchomić? Zdarzenie: To się okazuje, kiedy zostaję powiązane z elementem. W zasadzie gdy jestem z nim

ie

Sp

ojn ok

powiązane, mogę wykonać każdy kod. To dlatego jestem tak bardzo przydatne. Można mnie też odłączyć od elementu. Kiedy tak się stanie, słuchacz zdarzeń nie będzie już nasłuchiwał zdarzeń w tym elemencie, tak więc nie zadziała już kod, jaki miał się uruchomić, gdy zostanę wywołane. Rusz głową!: To brzmi bardzo sprytnie, ale już nam się kończy czas. Gdzie mogę dowiedzieć się więcej na twój temat oraz o rodzajach zdarzeń, które zachodzą na stronie? Zdarzenie: Łącze, które już ci dałom, wyjaśni, jak staję się obiektem. Więcej informacji o mnie i o wszystkich rodzajach zdarzeń znajduje się w witrynie jQuery w dziale z dokumentacją. Dzięki za zaproszenie. Rusz głową!: Dziękuję za przybycie. Nie możemy się doczekać, by cię użyć w naszym kodzie.

W dalszej części tego rozdziału zagłębimy się w funkcje i zmienne. Poza tym w kolejnych rozdziałach przyjrzymy się bliżej JavaScriptowi.

jesteś tutaj 

121

to już nie obfituje w zdarzenia

Usuwanie zdarzenia Równie często, jak będziesz potrzebował powiązać zdarzenia z elementami, będziesz też potrzebował usunąć zdarzenie z elementu, na przykład aby użytkownicy nie klikali dwa razy przycisku wysyłania formularza albo żeby pozwolić im na zrobienie czegoś na stronie tylko raz. Właśnie czegoś takiego potrzebujemy do spełnienia nowych wymagań Skacz z radości. Po powiązaniu zdarzenia z elementem będziemy mogli je od tego elementu odpiąć, żeby już nie było wywoływane.

Aby usunąć jedno zdarzenie Polecenie unbind mówi przeglądarce, aby już więcej nie nasłuchiwała tego konkretnego zdarzenia w danym elemencie.

Uruchom ten kod, kiedy myElement zostanie kliknięty.

Dodaj słuchacza zdarzenia click do elementu o identyfikatorze myElement.

$("#myElement").bind('click', function() { alert($(this).text()); Usuń zdarzenie z myElement. });

click

$("#myElement").unbind('click');

Aby usunąć wszystkie zdarzenia

Dodaj słuchacza zdarzenia focus do elementu o identyfikatorze myElement.

$("#myElement").bind('focus', function() { alert("Mam fokus!"); Dodaj słuchacza zdarzenia }); click do elementu $("#myElement").click(function(){ 3& –3JR&R€– }); $("#myElement").unbind();

122

Rozdział 3.

o identyfikatorze myElement.

Powiedz przeglądarce, żeby nie nasłuchiwała już zdarzeń dla myElement.

zdarzenia i funkcje jquery

Tak więc słuchacz zdarzeń siedzi w przeglądarce — dołączony do elementów czeka na zdarzenia i mówi interpreterowi JavaScriptu, żeby coś zrobił, kiedy one zajdą, zgadza się?

Tak! Właśnie tak się dzieje. Zobaczmy, jak zdarzenia mogą nam pomóc w spełnieniu drugiego wymogu.

owaniu szansę na znalezienie rabatu po załad nie żeby • Użytkownicy powinni mieć tylko jedną raz, niż ej więc m ięcie klikn przed strony. Musimy ich więc powstrzymać otrzymali większej bonifikaty.

Nie pozwól użytkownikom, aby t. ponownie próbowali znaleźć raba

Zaostrz ołówek Korzystając ze swojej wiedzy o $(this) oraz tego, czego nauczyłeś się na temat zdarzeń, zaktualizuj kod z poprzedniego rozdziału i dodaj instrukcję, która usunie zdarzenie kliknięcia z sekcji div.

$(".guess_box").click( function() { $(".guess_box p").remove(); @3 €A9 3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $(this).append(discount);

});

index.html

jesteś tutaj  123

zaostrz rozwiązanie

Zaostrz ołówek Rozwiązanie

Korzystając ze swojej wiedzy o $(this) oraz tego, czego nauczyłeś się na temat zdarzeń, zaktualizuj kod z poprzedniego rozdziału i dodaj instrukcję, która usunie zdarzenie kliknięcia z sekcji div.

$(".guess_box").click( function() { $(".guess_box p").remove(); @3 €A9 3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $(this).append(discount);

$(this).unbind("click");

Powiedz przeglądarce, żeby już nie nasłuchiwała zdarzeń w bieżącym elemencie.

});

index.html

Jazda próbna Zaktualizuj swój plik index.html nowym kodem, zapisz go, a następnie poklikaj różne miejsca strony, aby upewnić się, że wszystko działa, jak należy.

124

Rozdział 3.

zdarzenia i funkcje jquery

Czy próbowałaś klikać różne miejsca strony, kiedy ją testowałaś? Co się działo?

Twoja strona działa chyba tak samo jak moja. I wcale nie robi tego, co powiedziałeś, że będzie robić... Masz rację. Kliknięcie nie jest jeszcze usuwane ze wszystkich elementów. Kliknięcie jest usuwane tylko z pola, które klikniesz. W dalszym ciągu możesz klikać pozostałe pola. Gdybyś tylko mogła zatrzymać kliknięcia także dla pozostałych elementów...

WYSIL

SZARE KOMÓRKI Jak można usunąć zdarzenie kliknięcia z każdego pola po tym, jak użytkownik kliknie jedno z nich? Czy trzeba po kolei zająć się każdym elementem?

jesteś tutaj  125

hej, zrób to jeszcze raz!

Weźmy się za bary elementy Często zdarza się, że musimy się zająć każdym elementem w grupie po kolei. Na szczęście jQuery daje nam możliwość przechodzenia w pętli przez grupę elementów w oparciu o wybrany selektor. Taka pętla, zwana też iteracją, to po prostu przejście jeden po drugim przez wszystkie elementy i zrobienie po drodze czegoś z każdym z nich.

Przejdź przez każdy z elementów,a. które pasują do naszego selektor

Selektor jQuery

Uruchom tę funkcję obsługi.

$(".nav_item").each(function(){ $(this).hide(); Uruchom ten kod dla każdego elementu, który pasuje do naszego selektora.

});

Począwszy od tego momentu, będziesz mnie widywał częściej, zwłaszcza w następnym rozdziale...

Iterator .each bierze grupę elementów i po kolei robi coś z każdym z nich.

Jeszcze dokładniej przyjrzymy się iteracji w dalszej części tej ksią żki.

126

Rozdział 3.

zdarzenia i funkcje jquery Nie istnieją

głupie pytania

P: Czy sam mogę wywoływać zdarzenia w kodzie? P: Jak działa #  ?? O: Tak! Coś takiego robi się stosunkowo często. Dobry przykład O: Metoda #  ? korzysta z selektora, który ją wywołuje,

może stanowić przekazywanie formularzy do weryfikacji albo chowanie wyskakujących okien modalnych.

P: To jak w takim razie wywołuję zdarzenie? O: Tak jak w większości przypadków twórcy jQuery postarali

się, aby to było łatwe do zapamiętania. Możesz skorzystać z metody .trigger w połączeniu z selektorem, na przykład $("button:first").trigger('click'); albo $("form"). trigger('submit');.

P: Czy mogę używać zdarzeń na stronie internetowej bez jQuery?

O:

Tak, możesz. Dzięki jQuery wiązanie zdarzeń z dowolnymi elementami jest jednak łatwiejsze, ponieważ jQuery jest kompatybilny z wieloma przeglądarkami i korzysta z prostych w użyciu funkcji, co pomaga podczas podpinania zdarzeń do elementów.

i tworzy tablicę elementów identyfikowanych przez ten właśnie selektor. Następnie przechodzi ona sekwencyjnie w pętli przez każdy element tablicy. Na razie się tym jeszcze nie przejmuj — tablice i pętle wyjaśnimy później!

P: Wiem już, że mogę tworzyć elementy za pomocą

jQuery po załadowaniu strony. Czy te elementy też mogą odbierać zdarzenia?

O:

Tak, mogą. Po utworzeniu elementu można skorzystać z metody .bind, aby podpiąć do niego słuchacza zdarzeń. Poza tym jeśli z góry wiesz, że Twój element będzie się zachowywać tak jak inne, już utworzone elementy, możesz użyć metody #  . Metoda ta dołączy funkcję obsługi zdarzenia do wszystkich elementów pasujących do bieżącego selektora teraz i w przyszłości. Sposób ten zadziała nawet dla tych elementów, które nie zostały jeszcze dodane do drzewa DOM.

Zaostrz ołówek Napisz korzystający z iteracji kod, który usunie zdarzenie kliknięcia z każdego aktywnego pola na stronie Skacz z radości. Przeczytaj też starannie swój kod, aby sprawdzić, czy nie istnieją w nim fragmenty, które są już niepotrzebne.

$(".guess_box").click( function() { $(".guess_box p").remove(); @3 €A9 3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $(this).append(discount);

$(this).unbind('click');

});

index.html

jesteś tutaj  127

zaostrz rozwiązanie

Zaostrz ołówek Rozwiązanie

alasz Ponieważ pozwtylko na m ko ni w ko yt uż ie, nie trzeba jedno kliknięc kodu .remove! ać ow os już st

Wywołanie metody .each dla klasy .guess_box spowoduje pobranie w pętli wszystkich elementów tej klasy. Wtedy będziesz mógł odłączyć metodę click kolejno od każdego z nich. Nie potrzebujesz już kodu .remove — jako że użytkownik może kliknąć tylko jeden raz, nie będzie niczego do usunięcia.

$(".guess_box").click( function(){ $(".guess_box p").remove(); @3 €A9 3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $(this).append(discount); )*# !!"1;+#  ?*  *+,

ent tli każdy elem Pobierz w pę usuń z niego .guess_box i k. zdarzenie clic

)*?!+#1*M  M+0 }); });

index.html

Zaczekaj! Czy Twój plik HTML nie za bardzo obrasta w skrypty? Zanim przejdziesz dalej, naprawdę powinniśmy spróbować znaleźć jakiś sposób na jego odchudzenie...

128

Rozdział 3.

zdarzenia i funkcje jquery

Czy nie moglibyśmy po prostu wyodrębnić z naszego pliku HTML oddzielnego pliku ze skryptami? Zrobiliśmy już tak z naszym CSS...

Dobry pomysł. W istocie istnieje kilka powodów do utworzenia odrębnego pliku z kodem jQuery:

Ćwiczenie

1

Będzie można dołączyć go do więcej niż tylko jednej strony (wielokrotne użycie kodu).

2

Twoja strona będzie ładować się szybciej.

3

Kod HTML, który piszesz, będzie czysty i łatwiejszy do czytania.

Wiesz już, jak dołączać pliki CSS. Widziałeś też, jak dołączyć bibliotekę jQuery. Dołączanie własnego pliku z JavaScriptem (jQuery) w niczym się od tego nie różni! W głównym katalogu ze swoim projektem powinieneś mieć już folder o nazwie scripts (ten, w którym umieściłeś bibliotekę jQuery). 1

Utwórz plik o nazwie my_scripts.js w swoim ulubionym edytorze tekstowym i zapisz go w folderze scripts.

2

Cały kod w JavaScripcie i jQuery z pliku index.html przenieś do tego nowego pliku. Nie ma potrzeby umieszczać w nim znaczników .

3

W pliku HTML dodaj łącze do nowego pliku, dopisując tuż przed zamykającym znacznikiem następujący kod:

jesteś tutaj  129

rozwiązanie ćwiczenia

Wiesz już, jak dołączać pliki CSS. Widziałeś też, jak dołączyć bibliotekę jQuery. Dołączanie własnego pliku z JavaScriptem (jQuery) w niczym się od tego nie różni!

Rozwiązanie ćwiczenia 1

Utwórz plik o nazwie my_scripts.js w swoim ulubionym edytorze tekstowym i zapisz go w folderze scripts.

2

Cały kod w JavaScripcie i jQuery z pliku index.html przenieś do tego nowego pliku. Nie ma potrzeby umieszczać w nim znaczników .

$(document).ready(function() { $(".guess_box").click( function() { @3 €A9 3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $(this).append(discount); $(".guess_box").each( function(){ $(this).unbind('click'); }); }); });

my_scripts.js tego wołanie do mieścisz odch plików HTML u z ra te i Jeśl ym ze swoi sz mieć w nich pliku w każd cie, będzie kodu jQuery. Nie ek oj pr w tym u. samego go te każdym plik do dostęp pisywać w ze pr ż ju musisz go

130

Rozdział 3.

zdarzenia i funkcje jquery

3

W pliku HTML dodaj łącze do nowego pliku, dopisując tuż przed zamykającym znacznikiem następujący kod:



&GR3LZZ 3?XLK&G



%-GV LS3‰R3LZZ 3?XLŠK%-G



?@L&3W9A8,GW L3WKS9#S#WKGK?@G

! ! ! !"! !#!! 

index.html

Teraz lepiej. Twój kod jest ładny i uporządkowany. Możesz iść dalej.

jesteś tutaj 

131

ooo, teraz jest o wiele lepiej

Struktura Twojego projektu Właśnie wprowadziłeś ważne zmiany w strukturze swoich plików. Spójrzmy, jak pliki te są teraz zorganizowane. Od czasu, kiedy widzieliśmy je ostatni raz, dodaliśmy do ich struktury kilka elementów. Nie istnieją

głupie pytania

!

P: Dlaczego ten plik ma rozszerzenie .js?

"!  

#!

O:

Jako że jQuery jest biblioteką JavaScriptu, każdy kod, jaki tworzymy, musi być dołączany w taki sposób, jakby został napisany w JavaScripcie.

P: W jaki sposób przyspiesza to działanie naszej strony?

O:

$! index.html  

scripts

jquery-1.7.min.js

P:

my_scripts.js

my_style.css

Rozdział 3.

Dlaczego w naszym pliku my_scripts.js nie potrzebujemy znaczników ?

O:

Są to znaczniki HTML, a ponieważ plik ten został dołączony do naszej strony jako plik JavaScript, przeglądarka wie już, czego ma się w nim spodziewać.

styles

132

Ponieważ Twój plik .js jest dołączony do wielu plików HTML, przeglądarka prosi o niego tylko raz. Przechowuje go ona w swojej pamięci podręcznej, w związku z czym nie musi żądać go od serwera za każdym razem, gdy przechodzimy na inną stronę HTML odwołującą się do Twojego pliku ze skryptami.

zdarzenia i funkcje jquery

Magnesiki z kodem Użyj poniższych magnesików w celu oddzielenia od siebie kodów HTML, CSS i jQuery. Sprawdź, czy dla każdego z plików zrobiłeś to poprawnie.

my_num

&GR3LZZ 3?XLK&G

this

%-GV LS3‰R3LZZ 3?XLŠK%-G

});



?@GW L3WKS9#S#WKGK?@G ".guess_box"



src="scripts/my_scripts.js">



index.html

$(document).ready(function() { $(

).click( function() {

jquery-1.7.min.js

@3  3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $(

).append(discount);

$(".guess_box").each( function(){

class="guess_box"

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

script

});

class="guess_box"

my_scripts.js

jesteś tutaj  133

magnesiki z kodem — rozwiązanie

Magnesiki z kodem — rozwiązanie Użyj poniższych magnesików w celu oddzielenia od siebie kodów HTML, CSS i jQuery. Sprawdź, czy dla każdego z plików zrobiłeś to poprawnie.



&GR3LZZ 3?XLK&G



%-GV LS3‰R3LZZ 3?XLŠK%-G



?@GW L3WKS9#S#WKGK?@G class="guess_box"

< script src="scripts/my_scripts.js">

index.html

$(document).ready(function() { $( ".guess_box" ).click( function() { my_num @3  3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $( this ).append(discount); $(".guess_box").each( function(){ $(this).unbind('click'); }); });

}); my_scripts.js

134

Rozdział 3.

zdarzenia i funkcje jquery

Czyż nie byłoby cudownie, gdybyśmy mogli napisać nasz kod w jQuery tylko raz i używać go wielokrotnie, gdy tylko zajdzie taka potrzeba? Ale wiem, że to tylko marzenia...

jesteś tutaj  135

redukuj, realizuj, odzyskuj

Dodajemy funkcje Teraz, kiedy już wiemy, jak dodawać do strony zdarzenia i je usuwać, spójrzmy na inny ważny składnik, który pozwoli nam udoskonalić naszą stronę: funkcje. Funkcja to blok kodu — oddzielony od jego pozostałej części — który w każdej chwili można uruchomić w skrypcie. Możesz wierzyć lub nie, ale w książce tej korzystaliśmy z funkcji niemal od samego początku. Pamiętasz coś takiego?

$(document).ready(function(){ Wszystko to wywoływaliśmy ju w naszym kodzie ż samego początku od książki.

$("#clickMe").click(function(){ KK93SLXZ I8^ });

Tylko spójrz na te funkcje!

$(".guess_box").click(function(){ KK93SLXZ I8^ }); });

jQuery udostępnia wiele funkcji, ale możesz pisać też swoje własne niestandardowe funkcje, aby realizować zadania, których w jQuery nie znajdziesz. Tworząc je, możesz wielokrotnie używać swojego kodu bez potrzeby powielania go w skrypcie. Zamiast tego kiedy chcesz uruchomić kod, po prostu wywołujesz go poprzez nazwę funkcji.

136

Rozdział 3.

Funkcje niestandardowe umożliwiają zorganizowanie fragmentu kodu w jQuery pod określoną nazwą, dzięki czemu w łatwy sposób można go używać wielokrotnie.

zdarzenia i funkcje jquery

Śrubki i trybiki funkcji Aby utworzyć funkcję, potrzebujesz spójnej składni, która powiąże nazwę funkcji z kodem, jaki zostanie w niej uruchomiony. Składnia najbardziej podstawowej funkcji w JavaScripcie wygląda następująco: Rozpocznij od o słowa kluczoweg function.

Nadaj nazwę funkcji.

 

=

Otwórz funkcję nawiasem klamrowym.

*+

 ?  } Funkcję zamkn nawiasem klamij prawym rowym.

Ciało funkcji to miejsce, w którym umieszczasz swój kod.

, to Nawiasy okrągłe dzenie, sposób na stwier ienia że mamy do czyn z funkcją.

Nadawanie nazw funkcjom Istnieją dwa sposoby nadawania funkcjom nazw.

Deklaracja funkcji Pierwsza metoda to deklaracja funkcji, która definiuje funkcję bez potrzeby przypisania jej do zmiennej. Zaczyna się ona słowem kluczowym function, jak to pokazano poniżej.

function myFunc1(){ $("div").hide(); }

Nazwa funkcji

Wyrażenie funkcyjne Nazwane wyrażenie funkcyjne definiuje funkcję jako część składni większego wyrażenia (zwykle przypisania wartości funkcji do zmiennej):

var myFunc2 = function() { $("div").show(); } Tuta

j funkcja przypisuje zmiennej wartość.

Nazwy funkcji? Przecież wszystkie funkcje, z których korzystałam do tej pory, nie miały nazw. Po co miałabym nadawać je im teraz?

Dobre spostrzeżenia. Nazywanie funkcji umożliwia wywoływanie ich z więcej niż tylko jednego miejsca w kodzie. Nienazwane funkcje, zwane też funkcjami anonimowymi, mają raczej ograniczone zastosowanie. Spójrzmy nieco dokładniej na funkcje anonimowe, żebyśmy mogli stwierdzić, jak brak nazwy wpływa na te ograniczenia.

jesteś tutaj  137

co się kryje w nazwie?

Funkcja anonimowa Funkcje anonimowe — albo samowywołujące się — nie mają nazw i są od razu wywoływane w chwili, w której zostaną napotkane w kodzie. Poza tym zmienne zadeklarowane wewnątrz tych funkcji są dostępne tylko wtedy, gdy dana funkcja działa.

Tej funkcji nie możemy wywołać z innego miejsca w naszym kodzie.

$(document).ready(function() { $(".guess_box").click( function() { @3 €A9 3%&  3% 3?‚‹‹ @3 ?L9#GFIS 383€A9K#G $(this).append(discount);

Jeśli zechcemy użyć tego kodu gdzie indziej, będziemy musieli go powielić.

Zmienne

$(".guess_box").each( function(){ $(this).unbind('click'); }); }); });

my_scripts.js

2EHMU]\MWR

Ponieważ nie nadaliśmy tej funkcji nazwy, nie możemy jej wywołać z innego miejsca w naszym kodzie.

Nie istnieją

głupie pytania

P: Jaka jest różnica między deklaracją funkcji a nazwanym wyrażeniem funkcyjnym?

O:

Główną różnicę stanowi moment wywołania. Chociaż obie mogą robić to samo, funkcja zadeklarowana jako nazwane wyrażenie funkcyjne nie może zostać użyta, dopóki nie zostanie zdefiniowana i napotkana w kodzie. Z drugiej strony funkcja zdefiniowana za pomocą deklaracji może być wywoływana na stronie, gdy tylko zechcesz, nawet jako funkcja obsługi zdarzenia onload.

138

Rozdział 3.

P: Czy istnieją jakieś ograniczenia co do nazw, jakie możemy nadawać naszym funkcjom?

O:

Tak. Nazwy funkcji nigdy nie powinny zaczynać się od cyfry i nie mogą zawierać żadnych operatorów matematycznych ani znaków przestankowych z wyjątkiem podkreślenia (_). Ponadto żadnej części nazwy nie może stanowić spacja. W nazwach funkcji i zmiennych rozróżniana jest też wielkość liter.

zdarzenia i funkcje jquery

Funkcje nazwane jako funkcje obsługi zdarzeń We wcześniejszej części tej książki widzieliśmy, jak funkcje anonimowe mogą być używane w roli funkcji obsługujących zdarzenia. Nasze własne, niestandardowe funkcje także możemy wykorzystać do obsługi zdarzeń i możemy wywoływać je bezpośrednio z kodu. Przyjrzyjmy się bliżej dwóm funkcjom, którym nadaliśmy nazwy dwie strony wcześniej.

Deklaracja funkcji

Tutaj potrzebne są nawiasy okrągłe.

Wywołaj funkcję z kodu.

function myFunc1(){

myFunc1();

$("div").hide();

Zgodnie z pozostałą częścią deklaracji funkcji sekcje zostaną ukryte.

} funkcji Nazwy naszych

Wyrażenie funkcyjne var myFunc2 = function() {

$("#myElement").click(myFunc2);

Kiedy nasza funkcja jest wywoływana jako funkcja obsługi zdarzenia, nawiasy nie są potrzebne.

$("div").show(); nkcję Wywołaj fuę obsługi cj nk fu jako zdarzenia.

}

Ten zapis oznacza, że sekcje zostaną wyświetlone po kliknięciu elementu myElement.

Magnesy z kodem Sprawdź, czy potrafisz poukładać magnesiki w taki sposób, aby zamienić fragment programu sprawdzający rabat w funkcję nazwaną checkForCode, po czym użyć jej jako funkcji obsługi zdarzenia kliknięcia w aktywnych polach. $(document).ready(function() {

I"I }

 

$(".guess_box").click( checkForCode );

@3 €A9 3%&  3% 3?‚‹‹

*+

! 

?L9#GFIS 383€A9K#G $(this).append(

);

(

click

,

$(".guess_box").each( function(){ $(this).unbind('

checkForCode

');

});  

+

var

});

my_scripts.js

jesteś tutaj  139

magnesiki z kodem — rozwiązanie

Magnesiki z kodem — rozwiązanie Sprawdź, czy potrafisz poukładać magnesiki w taki sposób, aby zamienić fragment programu sprawdzający rabat w funkcję nazwaną checkForCode, po czym użyć jej jako funkcji obsługi zdarzenia kliknięcia w aktywnych polach. Nasza nazwana cja funkcja jako funk obsługi zdarzenia Instrukcję zakończ średnikiem.

$(document).ready(function() { $(".guess_box").click( checkForCode );

Deklaracja naszej funkcji

 

checkForCode *+

Generator liczb losowych, którego użyliśmy w rozdziale 2.

,

@3 €A9 3%&  3% 3?‚‹‹

var ?L9#GFIS 383€A9K#G

$(this).append( !  );

Pokaż rabat na ekranie.

$(".guess_box").each( function(){ $(this).unbind(' click '); }); }

});

Usuń zdarzenie click z każdego pola, tak jak się tego nauczyliśmy w tym rozdziale.

+

I"I

Zrób to!

(

 

my_scripts.js

Tych magnesików nie potrzebujesz.

Dobra robota! Kiedy już zaktualizujesz plik powyższym kodem, będziesz mieć utworzoną swoją pierwszą funkcję i użyjesz jej w roli funkcji obsługi zdarzenia kliknięcia.

WYSIL

SZARE KOMÓRKI

140

Rozdział 3.

dy generator liczb Podpowiedź: Teraz, kiedeklaracji funkcji, losowych jest częścią no w istniejącej możesz go użyć zarówjak i w funkcji, funkcji checkForCode, i która będzie którą wkrótce napiszesz cyjny w losowo umieszczać kod promo wybranym polu.

Jak napisałbyś funkcję chowającą rabat w losowo wybranym polu oraz drugą, która generowałaby liczbę losową dla rabatu?

zdarzenia i funkcje jquery Tak więc potrzebujemy funkcji, która będzie robić różne rzeczy w zależności od tego, które pole zostanie kliknięte... Jak ją utworzyć?

Czasami chcielibyśmy, żeby funkcja mogła wykonywać swoje zadanie wielokrotnie, ale żeby wynik jej działania różnił się w zależności od informacji, jakie jej przekażemy. Nasze funkcje mogą przyjmować przekazywane do nich zmienne. Jak pamiętasz z rozdziału 2., zmienna jest używana do przechowywania informacji, które mogą ulegać zmianom. Przyglądaliśmy się już zmiennym. Przypomnijmy sobie teraz, jak działają. Po słowie kluczowym var należy podać nazwę zmiennej.

Słowo kluczowe var pozwala zadeklarować zmienną.

W taki sposób nadaje się w kodzie wartość zmiennej.

var pts = 250; Kiedy deklarujemy zmienną, interpreter JavaScriptu przydziela nam w przeglądarce trochę pamięci, w której będziemy mogli przechowywać jej wartość.

Zmiennej nadajemy nazwę, żebyśmy mogli później odwoływać się do niej w skrypcie.

pts

W naszym kodzie korzystamy już z kilku zmiennych. Pamiętasz je?

Wartość umieszczamy w zmiennej za pomocą znaku równości.

0 5 2 =

pts

@3 €A9 3%&  3% 3?‚‹‹ @3 ?L9FIS 383€A9

jesteś tutaj 

141

proszę podać zmienne

Przekazywanie zmiennej do funkcji Kiedy zmienne są wstawiane (albo przekazywane) do funkcji, nazywamy je argumentami (czasami mówi się też o nich jako o parametrach). Przyjrzyjmy się bliżej temu, jak można przekazać argument do funkcji.

 

=

(

 ?  

 

+

,

ż Argumenty przeka w nawiasach.

} Nazwa funkcji

Nazwa argum entu

function welcome (name) { 3& ˜ZX“ƒ3 }

Zrób coś z argumentem.

KKF€FJ3S3Z\9RLS welcome("Janek");

Funkcja nie musi wiedzieć, co zawiera zmienna. Wyświetli ona wszystko, co tylko będzie się w zmiennej znajdować. Dzięki temu możesz zmieniać treść, jaką wyświetla funkcja, modyfikując po prostu zmienną, zamiast wprowadzać zmiany w samej funkcji (co wcale nie przyczyniłoby się do możliwości jej wielokrotnego użycia).

ie

ojn ok

Sp

Łączenie zmiennych i funkcji może wydawać się trochę skomplikowane.

Pomyśl o swojej funkcji jak o przepisie; powiedzmy, że w tym przypadku będzie to przepis na drinka. Masz do wykonania podstawowe, powtarzające się czynności konieczne do jego sporządzenia — wlej trochę tego, dodaj kroplę tamtego, zamieszaj itd. — które tworzą Twoją funkcję. Składniki drinka to natomiast zmienne, które do niej przekazujesz. Dla kogo gin z tonikiem?

142

Rozdział 3.

zdarzenia i funkcje jquery

Funkcja może też zwracać wartość Zwracanie przez funkcję informacji wiąże się z użyciem słowa kluczowego return, po którym następuje wartość, jaka powinna zostać zwrócona. Wynik jest przekazywany do kodu, który wywołał funkcję, co pozwala na użycie go w dalszej części programu. Nazwy argum entów

Nazwa funkcji

function multiply (num1, num2) {

Zwracanym typem może być liczba, łańcuch tekstowy, a nawet element drzewa DOM (obiekt).

@3  9&9š‚9- Zrób coś z tymi argumentami.

return result; } Zwróć wartość.

KKH€FJ3S3Z\9RLS var total = multiply (6, 7); alert (total);

Zaostrz ołówek Teraz, kiedy potrafisz już pisać funkcje, dodaj do pliku my_scripts.js nową funkcję przyjmującą pojedynczy argument (o nazwie num) i zwracającą w oparciu o ten argument liczbę losową. Funkcja ta będzie się nazywać getRandom.

my_scripts.js

jesteś tutaj  143

Podpowiedź: Czy pamiętasz kod, z które go skorz ystał eś, aby wyge nerować liczbę losową? Pomyśl, gdzie można go umieścić w celu wywołania funkc ji.

zaostrz rozwiązanie

Zaostrz ołówek Teraz, kiedy potrafisz już pisać funkcje, dodaj do pliku my_scripts.js nową funkcję przyjmującą pojedynczy argument (o nazwie num) i zwracającą w oparciu o ten argument liczbę losową. Funkcja ta będzie się nazywać getRandom.

Rozwiązanie

Nazwa argum entu

Nazwa funkcji function getRandom(num){

var my_num = Math.floor(Math.random()*num); return my_num; }

Zwróć liczbę losową.

my_scripts.js

OK, wszystko to związane z funkcjami i argumentami jest całkiem fajne, ale jak bardzo zbliżyliśmy się do ukończenia kodu dla strony Skacz z radości?

jeszcze jednak y, co t s e J ! m Zobacz a nieźle na Wygląd o zrobienia. powiedzenia d o o go” d r e a iw spo m c ś a „wła ekip Twoja sprawdzania temat pola...

Kuba: No tak, ale oprócz naszej funkcji getRandom potrzebujemy jeszcze jednej... Franek: Słusznie! Takiej, która umieści rabat w losowo wybranym polu, w którym można będzie użyć funkcji getRandom. Józek: To ma sens. Następnie, po kliknięciu, będziemy mogli sprawdzić, czy użytkownik kliknął właściwe pole. Kuba: Chwila, moment… czy co? Skąd będziemy wiedzieć, czy ktoś kliknął właściwe pole. Franek: Logika warunkowa! Kuba: Co? Franek: Warunki pozwalają nam sprawdzać występowanie określonych sytuacji i uruchamiać odpowiedni kod. Józek: Moglibyśmy więc na przykład zobaczyć, czy zmienna ma pewną wartość albo czy dwie wartości są sobie równe? Franek Kuba

Józek

Franek: Właśnie! Możemy nawet sprawdzić, czy w danym elemencie znajduje się inny element, co według mnie może nam tu pomóc. Kuba: Nieźle. Już nie mogę się doczekać, żeby to zobaczyć!

144

Rozdział 3.

zdarzenia i funkcje jquery

Korzystaj z logiki warunkowej w celu podejmowania decyzji jQuery używa logiki warunkowej języka JavaScript. Dzięki logice warunkowej można uruchamiać różny kod w zależności od decyzji, jaką podejmie Twój program na podstawie posiadanych informacji. Poniższy kod jest tylko jednym z przykładów logiki warunkowej w JavaScripcie; kolejnym przyjrzymy się w rozdziale 6.

Warunek, który chcemy sprawdzić Początek instrukcji if

if( myBool == true ){ Zmienna JavaScript

KK I8LX^ }else{

Można Operator porównania. ne”. go czytać jako „jest rów Kod, jaki chcemy uruchomić, kiedy sprawdzany warunek będzie prawdziwy.

KKH# ZLF€# Z€#3?R9Z I8LXW^ }

Kod, jaki chcemy uruchomić, kiedy ek sprawdzany warun będzie fałszywy.

Uwaga. Polecenie else nie jest potrzebne do zamknięcia instrukcji if, ale dołączenie go to dobry pomysł.

Magnesiki z kodem Sprawdź, czy możesz ułożyć magnesiki w taki sposób, aby utworzyć nową funkcję o nazwie hideCode, która korzysta z logiki warunkowej w celu ukrycia losowo wybranego nowego elementu span o identyfikatorze has_discount w jednym z istniejących aktywnych elementów .guess_box div. var

# !!"1; !

*+

hideCode

= function (){

@3 9”3? $(

.+0

,

).each(function(index, value) { if(numRand == index){ $(this).append("");  P

return false; }

?!"! 

} (

}

my_scripts.js

jesteś tutaj  145

magnesiki z kodem — rozwiązanie

Magnesiki z kodem — rozwiązanie Sprawdź, czy możesz ułożyć magnesiki w taki sposób, aby utworzyć nową funkcję o nazwie hideCode, która korzysta z logiki warunkowej w celu ukrycia losowo wybranego nowego elementu span o identyfikatorze has_discount w jednym z istniejących aktywnych elementów .guess_box div. Oto nasze rozwiązanie:

Nasza funkcja nazwana

var hideCode

= function (){

 P @3 9”3?

$( # !!"1;

ę Wywołaj naszą funkcj ą. ow generującą liczbę los

).each(function(index, value) {

if(numRand == index){ Logika warun porównująca kowa miejsce, w kt znajdujemy siórym na naszej liś ę ci z wylosowaną e, liczbą. }

$(this).append("");

return false; Wyjdź z pętli .each().

wy do Dodaj element rabato _box. ess .gu sy kla w elementó

.+0

}

my_scripts.js

2EHMU]\MWR

Indeks elementu listy wskazuje miejsce, na którym ten element znajduje się na liście. Indeksy zawsze rozpoczynają się od 0.

Pierwszy element listy ma więc indeks równy 0, drugi indeks równy 1 itd. Dowiemy się więcej na temat używania indeksów, kiedy przyjrzymy się tablicom i pętlom w rozdziale 6.

146

Rozdział 3.

zdarzenia i funkcje jquery Niesamowite! Za każdym razem rabat sam się chowa w innym polu. Te funkcje rzeczywiście stają się przydatne. Franek: Tak, to prawda, ale czy teraz, kiedy kod rabatowy został ukryty, można go będzie znowu znaleźć? Kuba: O... no tak, to dobre pytanie. Nie wiem. Józek: Wydaje mi się, że znowu będziemy potrzebować trochę tych warunkowych czarów. Franek: Zgadza się. Teraz zamiast wybierać z naszej listy elementów .guess_box losowy indeks, będziemy ją musieli znowu przeszukać w pętli, żeby sprawdzić, czy zawiera element has_discount. Józek: „Zawiera”? Hej, Franek, to może być niezły pomysł. Franek: Tak. Zobaczmy, jak moglibyśmy to zrobić w jQuery.

Zrób to! m. ienną z rabate Zadeklaruj zm

Logika warunkowa sprawdzająca, czy użytkownik znalazł rabat

Zaktualizuj swoją funkcję checkForCode, tak aby zawierała nowy kod bazujący na pomyśle Kuby, Franka i Józka.

function checkForCode(){ Element bieżący, czyli ten, który wywołał funkcję ! 0

Znajdź elemen drzewa DOM t z identyfikator has_discount em .

 *)# !*?!Q  # 8

 5A*?!"! +++ , Metoda jQuery sprawdzająca, czy to, co znajduje się w pierwszym parametrze, zawiera to, co znajduje się w parametrze drugim

" P*@+0 ! B=J1I"IK0 . ! , ! R ! Q1 S0 } $(this).append(discount);

Zdefiniuj kom aby był inny unikat w taki sposób, w czy użytkowni zależności od tego, k znajdzie ra też nie. bat, czy

$(".guess_box").each( function(){ $(this).unbind('click'); }); }

my_scripts.js

jesteś tutaj  147

niestandardowa funkcja wywołująca Twoją funkcję

Zrób też i to! Czas na dodanie kilku niestandardowych funkcji: generującej liczbę losową, ukrywającej rabat oraz sprawdzającej rabat.

$(document).ready(function() { $(".guess_box").click( checkForCode );

Wywołaj tę funkcję, kie dy element klasy .guess_box zostanie kliknięty.

   P*+, " ?# * ?#*+H+0  "0 }

Funkcja nazwana, która ukrywa zmienną z rabatem

Nasza funkcja ę generująca liczb losową

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

Wywołaj funkcję nazwa ną...

hideCode();

...która podaje rabat.

   ? VT *+, ! 0  *)# !*?!Q  # 8

 5A*?!"! +++ , " P*@+0 ! B=J1I"IK0 . ! , ! R ! Q1 S0 } )*?!+# *! +0 )*# !!"1;+#  ?*  *+, )*?!+#1*M  M+0 .+0 } }); //Koniec document.ready()

my_scripts.js

148

Rozdział 3.

zdarzenia i funkcje jquery

„Skacz z radości” potrzebuje jeszcze większej pomocy Kiedy myślałeś już, że Twoja praca przy promocji „Skacz z radości” dobiegła końca, Emilia zgłosiła kilka nowych pomysłów...

Od:     Temat:      *+: 9     ' 

3        <       '   3     3      9   3  '             3   +    '     + +         

'    '       +         ' +B * 7 '      

@  ' '   +  'B          E&    F>>B        F  F>B 

 +     0    +  !   3  -D

 ' '

Zaostrz ołówek Wiesz, co robić. Odszukaj w e-mailu od Emilii wszystkie nowe wymagania. Wymagania:

jesteś tutaj  149

zaostrz rozwiązanie

Zaostrz ołówek Rozwiązanie Wymagania:

Wiesz, co robić. Odszukaj w e-mailu od Emilii wszystkie nowe wymagania.

• Wyróżnij pole, na którym znajduje się użytkownik, żeby z całą

pewnością wiedział, którą opcję wybierze, zanim jeszcze kliknie określone zdjęcie.

• Zamiast wielkości rabatu podaj w oddzielnym miejscu na ekranie kod promocyjny. Informacja o rabacie powinna składać się z tekstu oraz liczby z zakresu od 1 do 100.

Nie istnieją

głupie pytania

P: Czy dla każdej naszej funkcji

musimy określać zwracaną wartość?

O:

Technicznie rzecz biorąc — nie. Każda funkcja zwraca wartość bez względu na to, czy ją określisz, czy też nie. Jeśli nie podasz, jaką wartość ma zwracać funkcja, zwróci ona wartość undefined. Jeżeli Twój kod nie potrafi obsłużyć wartości undefined, zostanie zgłoszony błąd. Określanie zwracanej wartości jest więc dobrym pomysłem, nawet jeśli będzie to coś w rodzaju return false;.

P: Czy istnieją jakieś ograniczenia

co do argumentów albo parametrów, które mogę przekazywać funkcji?

O: Nie, do funkcji możesz przekazać

dowolny obiekt, element, zmienną albo wartość. Możesz przekazać też więcej parametrów, niż oczekuje tego funkcja. Parametry te zostaną pominięte. Jeśli prześlesz zbyt mało parametrów, brakującym parametrom zostaną nadane wartości undefined.

P: Co robi metoda $.contains? O: Jest to statyczna metoda biblioteki

jQuery, która pobiera dwa parametry. Sprawdza ona wszystkie potomne elementy pierwszego parametru, badając, czy któryś z nich stanowi element będący jej drugim parametrem, i zwraca wartość true albo false. W naszym przypadku $.contains(document. body,document. getElementById("header")) zwróci true; z drugiej strony $.contains(document.getElemen tById("header"),document.body) zwróci false.

P: O co chodziło z tymi index i value

w naszej funkcji obsługi zdarzenia .each?

O:

index odnosi się do miejsca w pętli, w którym jesteśmy, począwszy od 0 dla pierwszego elementu tablicy zwróconego przez selektor. value natomiast odnosi się do bieżącego obiektu. Jest to ten sam element co w przypadku $(this) wewnątrz pętli .each.

P: Dlaczego nasza pętla .each

w funkcji hideCode zwraca wartość false?

O:

Zwrócenie wartości false w pętli .each nakazuje przerwanie pętli i przejście Co to znaczy w jQuery, że metoda dalej. Jeśli zostanie zwrócona wartość inna jest statyczna? niż false, nastąpi przejście do kolejnego To znaczy, że funkcja ta jest elementu na liście. W naszym przypadku skojarzona z biblioteką jQuery zamiast wiemy, że kod rabatowy został już z jakimś konkretnym obiektem. Do ukryty, tak więc możemy nie sprawdzać wywołania takiej metody nie potrzebujemy pozostałych elementów. selektora; wystarczy nazwa jQuery albo jej skrót ($).

P: O:

WYSIL

SZARE KOMÓRKI Czy potrafisz podać sposób na stwierdzenie, które pole chce wybrać użytkownik, zanim jeszcze w nie kliknie?

150

Rozdział 3.

zdarzenia i funkcje jquery

Metody mogą zmieniać CSS Aby dokończyć nasze zadanie, musimy wyróżnić pole, nad którym znajduje się użytkownik, zanim ten je kliknie. Najprościej możemy zmienić wygląd elementu w pliku CSS i za pomocą klas CSS. Na szczęście jQuery udostępnia łatwy sposób nadawania klas elementom CSS i usuwania ich za pomocą prostych w użyciu metod. Spójrzmy, jak możemy je wykorzystać w naszym projekcie.

Kod gotowy do wysmażenia

Utwórz te trzy nowe pliki — niezależnie od istniejących już plików Skacz z radości — abyś mógł zaobserwować działanie nowych metod. Powinno Ci to pomóc w zrozumieniu, jak można wyróżnić pole, zanim kliknie je użytkownik.

Pamiętasz je z rozdziałów 1. i 2.?

.hover{ border: solid #f00 3px; } .no_hover{ border: solid #000 3px;

}



test_style.css

?@?%3? L&3A%@ G%šGˆ3WJIFRK%šGK?@G 89€#89?8šG†&RSƒ38€??3“K89G 89€#89?8-G†&RSƒ38€99\“K89G



$(document).ready(function() { $("#btn1").click( function(){ $("#header").addClass("hover"); $("#header").removeClass("no_hover"); class_test.html

}); $("#btn2").click( function(){ $("#header").removeClass("hover"); $("#header").addClass("no_hover"); }); });

my_test_scripts.js

jesteś tutaj 

151

jazda próbna

Jazda próbna Otwórz nowy plik class_test.html w swojej przeglądarce. Po kliknięciu przycisku dodawania Twoja klasa zostanie przypisana do sekcji o identyfikatorze header. Kliknięcie przycisku usuwania spowoduje odłączenie klasy!

Na początku

Po kliknięciu Świetnie! Gdyby tylko wszystko było tak łatwe. Czy CSS może zmienić swoje działanie także na skutek czegoś innego niż kliknięcie?

Tak, może. I jest to równie łatwe... CSS można zmieniać przy użyciu dowolnego rodzaju zdarzenia. W naszym rozwiązaniu potrzebne będzie jeszcze jedno zdarzenie. Spójrz na listę ze strony 118 i spróbuj wskazać zdarzenie, z którego będziesz musiał skorzystać.

152

Rozdział 3.

zdarzenia i funkcje jquery

Dodaj zdarzenie hover Zdarzenie hover może jako parametry pobierać dwie funkcje obsługi: jedną dla zdarzenia mouseenter i drugą dla zdarzenia mouseleave. Funkcje obsługi mogą być nazwane albo anonimowe. Przyjrzyj się próbnym skryptom, które przed chwilą uruchomiłeś, aby zobaczyć, jak można skorzystać ze zdarzenia hover w celu zmiany działania elementu w chwili, kiedy wskaźnik myszy znajduje się nad tym elementem.

my_test_scripts.js

$(document).ready(function() { $("#btn1").click( function(){

Metoda jQuery rem umożliwia usunięc oveClass ie klasy CSS z elementu.

$("#header").addClass("hover"); $("#header").removeClass("no_hover"); }); $("#btn2").click( function(){ $("#header").removeClass("hover"); $("#header").addClass("no_hover"); });

ss pozwala na Metoda jQuery addCla elementu. Nie dodanie klasy CSS do ostałe klasy CSS ma ona wpływu na poz ntem. powiązane z tym eleme

});

Ćwiczenie

Zaktualizuj swoje pliki my_style.css i my_scripts.js w taki sposób, żeby sekcje ze zdjęciami były wyróżniane, kiedy użytkownik przemieści nad nie wskaźnik myszy. Do utworzenia odpowiadającej za to funkcji będziesz potrzebował nowej klasy CSS oraz dwóch funkcji obsługi w pliku ze skryptem (umieszczonych po funkcji checkForCode) korzystających z metod addClass i removeClass w celu modyfikowania klas CSS. Początek już zrobiliśmy za Ciebie. Poniżej trzeba już tylko uzupełnić funkcje. my_style.css

$(".guess_box").hover( function () { KKS9RLS38J9WZ?3 Z39 . }, function () { KKS9RLS38J9WZ?3 Z39&3@

}); my_scripts.js

jesteś tutaj  153

rozwiązanie ćwiczenia

Rozwiązanie ćwiczenia

Teraz, kiedy masz już klasę CSS, możesz pracować ze zdarzeniem hover.

#"? ,

Oto nowa klasa.

Za pomocą tej anonimowej funkcji obsługi zdarzenia mouseenter ustaw klasę CSS pola, kiedy użytkownik przesunie nad nie wskaźnik myszy.

$(".guess_box").hover(

1 2! -:: 6;0 }

my_style.css

Metoda jQuery addClass umożliwia dodanie u klasy CSS do elementu. Nie ma ona wpływ ntem. na inne klasy CSS powiązane z tym eleme

function () { KKS9RLS38J9WZ?3 Z39 )*?!+#T !!*"? +0 }, function () {

Metoda jQuery removeClass umożliwia usunięcie klasy CSS z elementu.

nimowa funkcja Tutaj znajduje się ano leave. use mo nia rze zda i ług obs

KKS9RLS38J9WZ?3 Z39&3@ )*?!+#  T !!*"? +0 }); my_scripts.js

Jazda próbna Otwórz w swojej przeglądarce plik index.html, który powinien zawierać odwołanie do nowego pliku my_scripts.js. Przesuń wskaźnik myszy nad rysunki i zobacz, czy zmienia się ramka.

Hm. Kolor ramki zdjęcia już się zmienia, ale w dalszym ciągu pozostało coś do zrobienia...

154

Rozdział 3.

zdarzenia i funkcje jquery

To już prawie wszystko... Zdecydowanie posunęliśmy się do przodu, ale komunikat nadal pojawia się w złym miejscu i nie wygląda tak, jak nas o to proszono. Poza tym jest jeszcze jeden wymóg z pierwszego e-maila, którego nie zrealizowaliśmy. Oto lista wymagań w obecnej postaci:

• Wyróżnij pole, na którym znajduje się użytkownik, żeby z całą

pewnością wiedział, którą opcję wybierze, zanim jeszcze kliknie określone zdjęcie.

• Zamiast wielkości rabatu podaj w oddzielnym miejscu na ekranie kod promocyjny. Informacja o rabacie powinna składać się z tekstu oraz liczby z zakresu od 1 do 100.

• Kiedy użytkownik zdecyduje się już kliknąć jakieś pole, powinien pokazać się

komunikat z informacją, czy trafił w rabat. Jeśli tak, należy pokazać mu kod, aby mógł skorzystać z niego w swoim zamówieniu.

Ten wymóg pochodzi z pierwszego e-maila!

Zaktualizuj swoją funkcję checkForCode, aby zrealizować ostatnie trzy wymogi: Ćwiczenie

1. Umieść kod rabatowy w oddzielnym obszarze na ekranie. 2. Spraw, by kod był połączeniem liter oraz liczby od 1 do 100. 3. Pokaż użytkownikowi, gdzie był kod, jeśli nie udało mu się tego odgadnąć.

Aby pomóc Ci w stwierdzeniu, czy kod został odnaleziony, utworzyliśmy klasy CSS, które możesz dodać do swojego pliku my_style.css. A skoro już przy tym jesteśmy, to poniżej czterech aktywnych pól dodaj element span o identyfikatorze result wyświetlający kod rabatowy.

#! , 1 2! -: :6;0 } #"! , 1 2! - ::6;0 }

my_style.css

jesteś tutaj  155

rozwiązanie ćwiczenia

Zaktualizowałeś swoją funkcję checkForCode, dodając do niej wszystkie funkcjonalności, o które zostałeś poproszony: odrębne miejsce na ekranie dla kodu rabatowego, informację o rabacie składającą się z tekstu i liczby od 1 do 100 oraz wskazanie po kliknięciu użytkownika, gdzie znajdował się rabat.

Rozwiązanie ćwiczenia

function checkForCode(){ var discount; if($.contains(this, document.getElementById("has_discount") ) ) Skorzystaj z funkcji getRandom, aby zwiększyć do 100 możliwe wartości kodu rabatowego.

{ Za pomocą funkcji jQuery contains sprawdź, czy w tym polu znajduje się kod rabatowy.

var my_num =  P*'::+0 discount = B=J2WX3I"I ;

Skonfiguruj postać komunikatu }else{ w zależności od discount = "

Niestety, tutaj rabatu nie ma!

" ; kodtego, czy został odnaleziony, } czy też nie.

$(".guess_box").each(function() {

Jeśli tak, zmień wygląd pola, aby poinformować użytkownika, że znalazł kod...

 *)# !*?!Q  # 8

 5A*?!"! +++ , )*?!+#T !!*! +0 . ! , )*?!+#T !!*"! +0

...a jeśli nie, pokaż użytkownikowi pole, w którym ukryty był kod.

} $(this).unbind(); });

rmacyjny Wyświetl komunikat infoonym dla na stronie w przeznacz niego miejscu.

)*- ! +# *! +0 } // Koniec funkcji checkForCode

my_scripts.js

156

Rozdział 3.

zdarzenia i funkcje jquery

Jazda próbna Teraz, kiedy zaktualizowałeś już swoją funkcję checkForCode, zobacz jej nowe działanie na stronie Skacz z radości (dla porównania możesz sprawdzić, jak powinien wyglądać Twój kod, w pliku: my_scripts.js).

Załadowana strona

Dobra robota! Teraz jest o wiele lepiej. To naprawdę powinno pomóc naszej stronie i pozwolić Emilii zaoszczędzić trochę forsy!

Bez kodu rabatowego

Z kodem rabatowym jesteś tutaj  157

twój niezbędnik jquery

Rozdział 3.

Twój niezbędnik jQuery Masz już za sobą rozdział 3., a do swojego niezbędnika dodałeś zdarzenia, funkcje wielokrotnego użycia oraz logikę warunkową.

Logika warunk o

wa

Funkcje

, o użycia krotneg innych lo ie w ty kodu stać w Fragmen możesz korzy amu... r h g c o y r z któr h swojego p . c a c azwane js mie dy są n ie k , y d lko wte tylko ...ale ty działają o zostały e n a w z g niena które Funkcje u w kodzie, z ć używane y c b js ą ie g mo w m ne, i nie wywoła ziej. d ć gdzie in kazywa na prze ty albo ż o m ji c Do funk (czyli argumen cja może nk zmienne y), a sama fu r t e m a i. r pa nik acać wy też zwr

158

Rozdział 3.

Sprawd z (czy X a ona warun Y e czegoś Z = true) prz k logiczny . ed zrob ieniem Składn ia częs to zaw instruk ie c sprawd ję else, na w ra zany w y arunek padek gdyby fałszyw y koniecz , chociaż nie okazał się ne. jest to

Zdarzenia

Są to obiekty pomagające użytkownikowi w interakcji ze stroną WWW. wie Istnieje ich około 30 i pra jsce mie ć mie e moż wszystko, co ołać wyw e moż , rce ąda egl prz w zdarzenie.

4.0DQLSXORZDQLHVWURQÈLQWHUQHWRZÈ]DSRPRFÈM4XHU\

Zmodyfikuj drzewo DOM To, że mamy tych samych rodziców, nie znaczy od razu, że jesteśmy tymi samymi elementami!

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.

to jest nowy rozdział  159

jedna strona, by wszystkimi rządzić

Restauracja w Webowicach chce interaktywnego menu Aleksandra, szefowa restauracji w Webowicach, ma dla Ciebie zadanie. Prowadzi ona dwie odrębne strony WWW z różnymi wersjami menu: ze zwykłymi posiłkami oraz z ich wegetariańskimi odpowiednikami. Chciałaby, żebyś przygotował dla niej jedną stronę, która będzie dostosowywać menu dla wegetariańskich klientów restauracji.

Kilka lat temu umieściliśmy nasze menu w Internecie i nasi klienci je uwielbiają! Chcielibyśmy, żebyś dodał do niego kilka przycisków, które pozwolą im w locie zmieniać i wyróżniać pozycje menu.

160

Rozdział 4.

manipulowanie stroną internetową za pomocą jquery

Dla wegetarian Oto, co Aleksandra chciałaby, żebyś zrobił.

który wegetarian”, enu la „D k is c y m rz ym ć p Chcemy mie ie zaproponuje w nasz ch posiłków. n ły z k c y w ty dniki z automa kie odpowie wegetariańs to działać: Oto, jak ma naszych iedników dlausunąć. w o p d o y m eba je - Nie oferuje tak więc trz , h c y n b ry ń da erów nik hamburg d ie w o p d o i tariańsk - Jako wege gigantyczne pieczarki. oferujemy iednikiem skim odpow hamburgerów ń a ri ta e g e w - Tofu jest h dań mięsnych oprócz wszystkic oraz jaj. i menu ry przywróc tó k , u k is c y my prz - Potrzebujewyjściowego. do stanu ikonkę my też mieć ń ś y b li ie c h c obok da ię da, to P.S. Jeśli stóra by się wyświetlałaniki. z liściem, kegetariańskie odpowied mających w wysłał strony, aby ł ta n ta k je ro ia p Poprosiłam żącym menu, żebyś m ie b z i k Ci pli cząć. od czego za

Zanim zaczniemy pisać w jQuery, spójrzmy na pliki HTML i CSS, jakie przysłał nam projektant, i sprawdźmy, czy ich styl i struktura będą dla nas przydatne.

Tym razem nie będzie ćwiczenia (chociaż już pewnie nad nim myślisz), niemniej jednak zapisz własnymi słowami, jakie są wymagania projektu, dzięki czemu będziesz wiedzieć, nad czym zaczynamy pracować.

jesteś tutaj 

161

zbuduj swoje drzewo DOM

Magnesiki z drzewem DOM Zapoznaj się z aktualną strukturą internetowego menu, tworząc jego diagram w taki sposób, w jaki widzi go drzewo DOM. Poniżej znajdziesz wszystkie magnesiki potrzebne do skompletowania drzewa. Korzystając z fragmentu menu w HTML-u widocznego po prawej stronie, ukończ drzewo. Miejsce dla każdego z magnesików zostało oznaczone kółkiem. Kilka z nich rozmieściliśmy za Ciebie. 1 div class=  "= 

div class= 

"  

li li

li

?U

li

  !!  " !

li

162

li

li

Rozdział 4.

li

li

li

  !!  " !

li

li

  !!  " !

li

  !!  " 

!

li

li

manipulowanie stroną internetową za pomocą jquery

To jest tylko fragment rzeczywistej strony w HTML-u.



%G3383?FK%G

• Halibut po tajsku
  • mleczko kokosowe
  &G3„€%3&89K&G
  • wczesnojesienne warzywa
  • przyprawy tajskie
• Domowe grillowane panini
  • prosciutto
  • provolone
  • avocado
  • pieczywo na zakwasie
&GŸ 389JR3
• papryczki chili
• hamburger
&G#R3€„IJ€ K&G
• pieczywo wieloziarniste

index.html

jesteś tutaj  163

magnesiki z drzewem dom — rozwiązanie

Magnesiki z drzewem DOM — rozwiązanie Wygląda na to, że wszystkie składniki potraw zostały skonfigurowane jako potomne elementy nadrzędnej listy z daniami głównymi. Nie są one oznaczone zbyt czytelnie ani jednoznacznie, prawda?

Na szczęście dla nas menu internetowe ma spójną strukturę.

1 div class=  "= 

nia echowywa W celu prz menu użyto elementówumerowanej. listy nien

div class= 

"  

listy... t pozycją menu jes w e n w łó ie g Każde dan

li

li

li

li

  !!  " !

li

składników wiera listę ...która za list) w postaci wanych (ul.menu_ nych i nienumero zagnieżdżo. elementów

  !!  " 

!

?U

  !!  " !

  !!  " !

li

li

li

li

li

li

li

li

li

Każdy składnik wszystkich dań głównych jest elementem listy.

Potrzebujemy napisać selektory szukające skład które musimy zmienić. Na tym poziomie każdy ników, z nich jest elementem listy...

...jak więc możemy odróżnić składniki, które chcemy zmienić, od pozostałych?

164

Rozdział 4.

li

manipulowanie stroną internetową za pomocą jquery



%G3383?FK%G

• Halibut po tajsku
  • mleczko kokosowe
  &G3„€%3&89K&G
  • wczesnojesienne warzywa
  • przyprawy tajskie
• Domowe grillowane panini
  • prosciutto
  • provolone
  • avocado
  • pieczywo na zakwasie
&GŸ 389JR3
• papryczki chili
• hamburger
&G#R3€„IJ€ K&G
• pieczywo wieloziarniste

To jest tylko fragment rzeczywistej strony w HTML-u.

index.html

WYSIL

SZARE KOMÓRKI Regularna struktura strony (kodu HTML) znacznie ułatwia pisanie kodu w jQuery, ale składniki potraw, które chcemy odszukać, nie są oznakowane w sposób mogący uprościć opracowanie kodu. Co możemy zrobić, żeby nasze elementy były łatwiejsze do wybierania?

jesteś tutaj  165

wspominałeś, że masz klasę...

Poklasyfikuj swoje elementy Jak już widzieliśmy w każdym z dotychczasowych rozdziałów, możemy pomóc jQuery w szukaniu elementów na stronach internetowych z większą skutecznością, prawidłowo konfigurując pliki HTML i CSS. Aby nasza struktura działała naprawdę śpiewająco, powinniśmy dodać do naszego arkusza stylów klasy oraz identyfikatory, natomiast atrybuty elementów HTML skonfigurować właśnie za pomocą tych klas i identyfikatorów. Uprości to wybieranie elementów, a na późniejszym etapie pozwoli zaoszczędzić czas przeznaczony na kodowanie. W jQuery rola selektorów nie sprowadza się wyłącznie do kontrolowania wyglądu i działania strony. Selektory pozwalają także na zestawianie elementów na stronie. Możesz napisać selektor dla każdego ze składników, które trzeba zestawić razem...

kurczak

jajka

&GJ#3R3L&L3K&G

indyk

...albo pogrupować elementy w klasy i napisać jeden selektor, który je zestawi.

kurczak

Kiedy każdemu elementowi listy nadasz atrybut klasy, umieścisz go w grupie zawierającej mięso.

indyk

hamburger

&GL83&3LZ€K&G

cebula

marchew

&G#LZ€FF&Z3 K&G

ser kozi

168

Rozdział 4.

Frittata

• kurczak
&G89&F3 Z€F€K&G

&G9#3?9S9

class=“meat" &GW &&F3€RK&G &GW Z€8€K&G &GF3 Z€F3ZFK&G &G89&F3 Z€F€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 3ƒR&R3S\L8 3ZRK#GK%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
  
  ƒ F€RX“&9ƒF€RX“ 3&33R€3&3
  
  ƒ #Z€LS3J3
  
  ƒ Z RX“&9ƒ Z RX“3&3 3R€3&3 ƒ rozmiar czcionki;
  
  236
  
  Rozdział 5.
  
  ƒ ?#€?Z€& 3 F€ 3Z3 ƒ FLLR9 ƒ F€RX“&
  
  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