Benedetti R. - JQuery. Rusz Głową

7/26/2019 Benedetti R. - JQuery. Rusz Gow

1/521


2/521

Tytu oryginau: Head First jQuery

Tumaczenie: Ireneusz Jakbik

ISBN: 978-83-246-6325-5

2012 Helion S.A.

Authorized Polish translation of the English edition of Head First jQuery 9781449393212 2011 Ryan Benedetti and Ronan Cranley.

This translation is published and sold by permission of OReilly Media, Inc.,which owns or controls all rights to publish and sell the same.

All rights reserved. No part of this book may be reproduced or transmitted in any formor by any means, electronic or mechanical, including photocopying, recording or byany information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeone. Nieautoryzowane rozpowszechnianie caocilub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione.Wykonywanie kopii metod kserograficzn, fotograficzn, a take kopiowanieksiki na noniku filmowym, magnetycznym lub innym powoduje naruszeniepraw autorskich niniejszej publikacji.

Wszystkie znaki wystpujce w tekcie s zastrzeonymi znakami firmowymibd towarowymi ich wacicieli.

Wydawnictwo HELION dooyo wszelkich stara, by zawarte w tej ksiceinformacje byy kompletne i rzetelne. Nie bierze jednak adnej odpowiedzialnociani za ich wykorzystanie, ani za zwizane z tym ewentualne naruszenie praw patentowychlub autorskich. Wydawnictwo HELION nie ponosi rwnie adnej odpowiedzialnociza ewentualne szkody wynike z wykorzystania informacji zawartych w ksice.

Wydawnictwo HELION

ul. Kociuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl(ksigarnia internetowa, katalog ksiek)

Drogi Czytelniku!Jeeli chcesz oceni t ksik, zajrzyj pod adreshttp://helion.pl/user/opinie/jquerg_ebookMoesz tam wpisa swoje uwagi, spostrzeenia, recenzj.

Printed in Poland.

Pole ksik na Facebook.com

Kup w wersji papierowej

Oce ksik

Ksigarnia internetowa

Lubi to! Nasza spoeczno
mailto:[email protected]://helion.pl/http://helion.pl/http://helion.pl/user/opinie/jquerg_ebookhttp://ebookpoint.pl/rf/jquerg_ebookhttp://ebookpoint.pl/rt/jquerghttp://ebookpoint.pl/ro/jquerg_ebookhttp://ebookpoint.pl/http://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/r/4CAKFhttp://ebookpoint.pl/http://ebookpoint.pl/ro/jquerg_ebookhttp://ebookpoint.pl/rt/jquerghttp://ebookpoint.pl/rf/jquerg_ebookhttp://helion.pl/user/opinie/jquerg_ebookhttp://helion.pl/mailto:[email protected]


3/521

jQuery pozwala na robienie zdumiewajcych rzeczy za pomoc JavaScriptu w tak prosty sposb, e wyglda to wrczna oszustwo. W ksice tej pokazano, jak szybko rozwizywa problemy zaczerpnite z rzeczywistego wiata. W ramachbonusu poznasz kluczowe aspekty JavaScriptu, konfiguracj rodowiska programistycznego i nieco PHP/MySQL. Tosolidna ksika.

Jim Doran, inynier oprogramowania na Uniwersytecie Johna Hopkinsa

W przeciwiestwie do wypenionych technicznym argonem i nieprzystpnych ksiek o programowaniujQuery. Rusz gowprowadzi pocztkujcych czytelnikw krok po kroku w kierunku utworzenia pierwszej strony w jQuery w sposb zabawnyi zrozumiay.

Lindsey Skouras, adwokat i programista samouk

Ryan Benedetti i Ronan Cranley zabrali si za potencjalnie budzcy obawy konglomerat technologii (jQuery, DOM, Ajax,HTML5, CSS) i rozbili go na lepiej przyswajalne koncepcje, ktre sprawiaj, e poznawanie materiau staje si zabaw.

Bill Mietelski, inynier oprogramowania

JavaScript ponownie wyoni si jako jzyk programowania odgrywajcy znaczc rol w sporej mierze dziki zbiorowinajwyszej jakoci dodatkowych bibliotek, wrd ktrych kluczowym graczem jest jQuery.jQuery. Rusz gowudostpnianowoczesnemu programicie poyteczne wskazwki oraz praktyczne rady dotyczce tej kluczowej technologii jzykaJavaScript.

Paul Barry, autor i wykadowca informatyki na politechnice w Carlow

Zachwyty pierwszych recenzentw nad jQuery. Rusz gow!


4/521

Pochway innych ksiek z serii Rusz gow!

Analiza i Projektowanie Obiektowe. Rusz gow! to wiee spojrzenie na zagadnienia zwizane zAiPO. To, co wyrnia tksik, to nacisk na nauk. Autorzy sprawili, e zawarto AiPOjest dostpna i przydatna dla praktykw.

Ivar Jacobson, Ivar Jacobson Consulting

Wanie skoczyem lekturAiPOi uwielbiam t ksik! To, co najbardziej mi si w niej podoba, to skupienie si na tym,dlaczego wykonujemy AiPO - po to, eby pisa wspaniae oprogramowanie!

Kyle Brown, Distinguished Engineer, IBM

Ukryta za miesznymi rysunkami i zwariowan czcionk czai si powana, inteligentna i wietnie opracowana prezentacjazorientowanej obiektowo analizy i projektowania. Kiedy czytaem t ksik, czuem si, jakbym zaglda przez ramiprofesjonalnemu ekspertowi wyjaniajcemu mi, ktre zagadnienia s wane na kadym z etapw i dlaczego.

Edward Sciore, profesor nadzwyczajny, Katedra Informatyki, Boston College

Podsumowujc,Head First Software Developmentjest znakomitym rdem wiedzy dla kadego, kto chciaby sformalizowaswoje umiejtnoci programistyczne w sposb nieprzerwanie angaujcy czytelnika na wielu rnych poziomach.

Andy Hudson, Linux Format

Jeli jeste pocztkujcym twrc oprogramowania,Head First Software Developmentskieruje ci na waciwe tory. A jeelijeste dowiadczonym (czytaj: o dugim stau) programist, nie odkadaj tej ksiki pochopnie na bok...

Thomas Duff, Duffbert's Random Musings

WJava. Rusz gow!kady znajdzie co dla siebie. Ten, kto przyswaja informacje przez kana wzrokowy, i ten, ktoprzyswaja przez kana kinestetyczny - kady moe uczy si z tej ksiki. Pomoce wizualne uatwiaj zapamitywanie,a sama ksika jest napisana bardzo przystpnym stylem cakowicie innym, ni w wikszoci podrcznikw na tematJavy...Java. Rusz gow!to cenna ksika. Mog wyobrazi sobie, e seriaRusz gow!jest uywana w salach lekcyjnychw szkoach rednich albo na kursach dla dorosych. A ja z ca pewnoci bd powraca do tej ksiki, jak i poleca jinnym.

Warren Kelly, Blogcritics.org, marzec 2006

W miejsce nauczania w stylu podrcznikowymHead First iPhone and iPad Developmentoferuje dowcipne, angaujce,a nawet przyjemne podejcie do nauki programowania w rodowisku iOS. Dziki omwieniu kluczowych technologii,cznie z core data, a nawet istotnych aspektw, takich jak projektowanie interfejsw, zawarto ksiki jest staranniedobrana i znakomita. W ktrym innym miejscu mona by by wiadkiem pogadanki przy kominku midzy UIWebViewa UITextField!

Sean Murphy, projektant i programista iOS


5/521

Pochway innych ksiek z serii Rusz gow!

Kolejn mi cechJava. Rusz gow! Wydanie IIjest pobudzanie apetytu czytelnika na wicej. Dziki pniejszemuomwieniu bardziej zaawansowanych zagadnie, takich jak Swing i RML, wprost nie mona si doczeka, aby zagbisi w te interfejsy API oraz kod, ktre wykorzystane w bezbdnych, liczcych 100 000 wierszy programach przyniosCi saw i bogactwo. Znalazo si tam te sporo materiau, a nawet niektre z dobrych praktyk na temat sieci i wtkw,

ktre s moim sabym punktem. W tym konkretnym przypadku nie mogem si powstrzyma od miechu, gdy autorzyskorzystali z operatorki centrali telefonicznej z lat pidziesitych tak, wanie tej pani z ogromnym kokiem, ktrarcznie przecza wtyczki jako analogii dla portw TCP/IP... naprawd powiniene uda si do ksigarni i przewertowa

Java. Rusz gow! Wydanie II. Nawet jeli znasz ju Jav, by moe poznasz jak now rzecz lub dwie. A jeeli nie, zwykeprzejrzenie stron bdzie stanowi niez zabaw.

Robert Eckstein, Java.sun.com

Oczywicie to nie zakres materiau sprawia, eJava. Rusz gow!tak si wyrnia to styl i podejcie. Ksika ta jesttak bardzo oddalona od podrcznikw informatycznych albo instrukcji obsugi, jak to jest tylko moliwe w przypadkukorzystania z rysunkw, amigwek albo magnesikw na lodwk (tak, magnesikw...). Zamiast zwykych wicze dlaczytelnika jeste proszony o udawanie kompilatora i skompilowanie kodu albo o uzyskanie programu przez wypenieniepustych miejsc albo... chyba chwytasz, o co chodzi... Pierwsze wydanie tej ksiki zyskao jedn z naszych rekomendacjijako pozycja dla pocztkujcych w Javie i z obiektami. Nowe wydanie nie rozczarowuje i zasuenie kroczy w ladyswojej poprzedniczki. Jeli naleysz do osb, ktre zasypiaj przy tradycyjnych ksikach informatycznych, przy tejnajprawdopodobniej zachowasz przytomno i bdziesz si uczy.

TechBookReport.com

Head First Web Designto Twoja przepustka do poznania wszystkich tych skomplikowanych zagadnie i zrozumienia, co taknaprawd dzieje si w wiecie projektowania witryn internetowych... Jeli nie przeszede chrztu ognia, uywajc czego takskomplikowanego jak Dreamweaver, ksika ta bdzie wietnym sposobem na nauczenie si dobrego projektowania stronWWW.

Robert Pritchett, MacCompanion

Czy mona si nauczy prawdziwego projektowania stron internetowych z ksiki?Head First Web Designjest kluczemdo projektowania przyjaznych dla uytkownika witryn, poczwszy od wymaga klienta, przez rcznie rysowane scenorysy,a do poprawnie dziaajcych stron online. To, co odrnia t ksik od innych pozycji typu 'jak zbudowa stroninternetow', to wykorzystanie w niej najnowszych zdobyczy z zakresu nauk kognitywnych i wiedzy o nauczaniu w celuudostpnienia wizualnego dowiadczenia poznawczego, obfitujcego w obrazy i zaprojektowanego zgodnie z tym,w jaki sposb najlepiej pracuje i uczy si mzg. W rezultacie powstaa ksika bdca ogromnym wkadem w podstawyprojektowania stron internetowych, ktra bdzie wanym kluczem do sukcesu kadej biblioteki oglnoinformatycznej.

Diane C. Donovan, California Bookwatch: The Computer Shelf

Zdecydowanie polecamHead First Web Designwszystkim kolegom programistom, ktrzy chc pozna bardziej artystycznstron swojej profesji.

Claron Twitchell, Utah Java User Group


6/521

Inne ksiki na ten sam temat:jQuery. Leksykon kieszonkowy

JavaScript i jQuery. Nieoficjalny podrcznik

jQuery. Od nowicjusza do wojownika ninja

JQuery. Poradnik programisty

Inne ksiki z serii Rusz gow!C#. Rusz gow!

Excel. Rusz gow!

Java. Rusz gow! Wydanie II

Wzorce projektowe. Rusz gow!

SQL. Rusz gow!

Analiza i projektowanie obiektowe. Rusz gow!

Head First Ruby on Rails. Edycja polska (Rusz gow!)Head First. Statystyka. Edycja polska (Rusz gow!)

Head First Algebra. Edycja polska (Rusz gow!)

Head First. Fizyka. Edycja polska (Rusz gow!)

Head First. Sieci komputerowe. Edycja polska (Rusz gow!)

Head First Web Design. Edycja polska (Rusz gow!)Head First PHP & MySQL. Edycja polska (Rusz gow!)

Head First Ajax. Edycja polska (Rusz gow!)

Head First JavaScript. Edycja polska (Rusz gow!)

Head First Software Development. Edycja polska (Rusz gow!)

Head First HTML with CSS & XHTML. Edycja polska (Rusz gow!)

Head First Servlets & JSP. Edycja polska (Rusz gow!)

Pochway dla innych ksiek z tej serii


7/521

Dedykujemy t ksik Mistrzom Jedi JavaScriptu: Johnowi Resigowi

(twrcy i wiodcemu programicie biblioteki jQuery), DouglasowiCrockfordowi, Davidowi Flanaganowi i Brandonowi Eichowi.

Moim trzem cudom: Josie, Vinowi i Shonnie.

Ryan

Caitlin i Bono, dzikuj za wszystko!

Ronan


8/521

8

autorzy

Ryan Benedettiposiada tytu magistra sztukpiknych w dziedzinie twrczego pisania zdobyty naUniwersytecie Montany i pracuje na UniwersyteciePortlandzkim jako projektant stron internetowychi specjalista od multimediw. W pracy wykorzystujejQuery, Flash, ActionScript, Adobes Creative Suite,Liferay Portal, jzyk szablonw Apaches JakartaVelocity i Drupal.

Przez siedem lat Ryan pracowa jako szef KatedryTechnologii Informacyjnej i Inynierii Komputerowejw Salish Kooteni College. Przedtem by redaktoremi specjalist od systemw informacyjnychw programie badawczym dotyczcym rzek, potokwi mokrade prowadzonym przez Katedr LenictwaUniwersytetu Montany.

Wiersze Ryana byy publikowane w Cut Bank

i Exquisite Corpse Andreia Codrescu. Swj wolnyczas spdza, malujc, rysujc, grajc bluesa naharmonijce i praktykujc zazen. Najlepsze chwilespdza w Portland w stanie Oregon z crk, synemi swoj ukochan Shonn. Uwielbia te powczysi ze swoimi zwierzcymi kumplami: Rockym,Munchem, Festerem i Tazem.

Ronan Cranleyod chwili przyjazdu w 2006 roku

z Dublina w Irlandii do Portland w stanieOregon pracowa na Uniwersytecie Portlandzkim,przechodzc ciek od programisty aplikacjiWWW, przez starszego programist/menederasystemw, do zastpcy dyrektora do spraw WWWi administrowania systemami.

Tytu licencjata informatyki otrzyma z honoramiw 2003 roku na Politechnice Dubliskiej. Podczaspracy w koledu, a take na wczeniejszymstanowisku w ESB International w Dublinie orazna obecnym na Uniwersytecie Portlandzkim,Ronan pracowa nad szeregiem rnych projektww PHP, VB.NET, C# oraz Javie, w tym chocianie tylko nad systemami GIS po stronie klienta,amatorskim systemem zarzdzania treci, systememkalendarzowo-terminarzowym oraz czeniem jQuery

z Google Maps.

Kiedy nie projektuje ani nie tworzy klienckichaplikacji WWW, pracuje na uniwersytecie jakoadministrator baz danych serwera SQL. W swoimwolnym czasie Ronan spdza wiele godzin na boiskupikarskim, polu golfowym i spacerujc ze swoj onCaitlin i angielskim buldogiem Bono oraz poznajc,

na ile tylko moe, pnocno-zachodnie wybrzeePacyfiku.

Ryan

Ronan


9/521

9

spistreci

Spis treci (skrcony)

Spis treci (z prawdziwego zdarzenia)

Twj mzg i jQuery.Wanie prbujesz si czego nauczy, tymczasem Twj mzgwywiadcza Ci przysug, starajc si, aby niczego nie zapamita. Twj mzg myli:

Lepiej pozostawi miejsce na wane rzeczy takie jak to, ktrych dzikich zwierzt unikai czy to zy pomys jedzi nago na snowboardzie. Jak wic oszukasz swj mzg, abymyla, e Twoje ycie zaley od jQuery?

Wstp

Dla kogo jest ta ksika? 24Metapoznanie: mylenie o myleniu 27

Oto co zrobilimy 28

Oto co moesz zrobi, aby zmusi swj mzg do posuszestwa 29

Przeczytaj mnie 30

Pobierz jQuery 32

Konfiguracja folderw 33

Zesp recenzentw technicznych 34

Podzikowania 35

Wstp 23

1. Zaczynamy z jQuery:Akcja na stronach internetowych 372. Selektory i metody: Chwytaj i w drog 71

3. Zdarzenia i funkcje jQuery:Niech si co dzieje na Twojej stronie 111

4. Manipulowanie stron internetow za pomoc jQuery:Zmodyfikuj drzewo DOM 159

5. Efekty i animacja w jQuery:Nieco wdziku na Twojej stronie 211

6. jQuery i JavaScript:Luke jQuery, jestem twoim ojcem! 251

7. Niestandardowe funkcje dla niestandardowych efektw:Co ostatnio dla mnie zrobie? 289

8. jQuery i Ajax:Prosz poda dane 327

9. Obsuga danych JSON:Kliencie, oto serwer 361

10. Interfejs uytkownika w jQuery:Diametralna zmiana wygldu 407

11. jQuery i API: Obiekty, wszdzie obiekty 447

A Ostatki:Dziesi najwaniejszych rzeczy (o ktrych nie napisalimy) 483

B Konfiguracja rodowiska programistycznego:Przygotuj si do przyszych sukcesw 497

Skorowidz 518


10/521

10

spistreci

1Akcja na stronach internetowych

Chcesz wicej dla swoich stron.Masz w zanadrzu HTML oraz CSS i chciabywzbogaci swoje umiejtnoci o pisanie skryptw, ale nie masz zamiaru spdzi caegoycia, piszc je wiersz po wierszu. Potrzebujesz biblioteki skryptw, ktra pozwoli Cizmienia strony internetowe w locie. A skoro wyraamy ju nasze yczenia, to moedoda jeszcze wspprac z Ajaksem i PHP? Czy da si zrobi w trzech wierszach to,do czego wikszo jzykw po stronie klienta potrzebuje pitnastu? Pobone yczenia?W adnym wypadku! Musisz zapozna si z jQuery.

Zaczynamy z jQuery

Chcesz wada stronami 38

HTML i CSS s w porzdku, ale... 39

potrzebujesz mocy skryptu 40

Nadchodzi jQuery (i JavaScript)! 41

Spojrzenie do wntrza przegldarki 43Ukryta struktura strony 44

Dziki jQuery drzewo DOM nie jest takie straszne 45

Jak todziaa? 47

jQuery wybiera elementy tak samo jak CSS 49

Stylu, przedstawiam ci skrypt 50

Selektory jQuery do usug 51

jQuery przetumaczony 52

Twoja pierwsza fucha w jQuery 56Skonfiguruj swoje pliki HTML i CSS 60

Wysu si... 62

Niechaj blado bdzie z Tob 63

Uratowae kampani Kudaci Przyjaciele 66

Twj niezbdnik jQuery 69

$( )

jQuery( )

$( )

Syszaem kliknicieprzycisku. Przesu element

do gry.

InterpreterJavaScriptu


11/521

11

spistreci

2Chwytaj i w drog

jQuery pomaga chwyta elementy strony internetowej i robi z nimi rnerzeczy.W tym rozdziale zagbimy si w selektory i metody jQuery. Dziki selektorom moemychwyta elementy na stronie, a metody pozwalaj na robienie z nimi rozmaitych sztuczek.Podobnie jak wielka ksiga zakl magicznych, biblioteka jQuery pozwala nam zmienia masrzeczy w locie. Moemy sprawia, e obrazy rozpywaj si w powietrzu i pojawiaj znikd.Moemy wybra okrelony fragment tekstu i w animowany sposb zmieni rozmiar jego czcionki.Rozpocznijmy wic pokaz zapmy kilka elementw strony i do roboty!

Selektory i metody

Skacz z radoci potrzebuje Twojej pomocy 72

Jakie s wymogi projektu? 73

Zagbiamy si w sekcje 75

Zdarzenie click w zblieniu 78

Dodaj do strony metod click 81Bd bardziej konkretny 83

Przydzielanie elementw do klas 84

ID-entyfikowanie elementw 85

Pospinaj swoj stron 88

Tymczasem na naszej licie 91

Tworzenie miejsca w pamici 92

cz za pomoc konkatenacji 93

Tymczasem w naszym kodzie... 94Wstaw komunikat za pomoc metody append 95

Wszystko dziaa wietnie, ale... 97

Daj mi $(this) 99

Zaprzgnij $(this) do pracy 100

Pozbywaj si na dobre za pomoc remove 102

Schodzimy w d z selektorem potomka 103

Twoja kolej na skakanie z radoci 109



12/521

12

spistreci

3Niech si co dzieje na Twojej stronie

jQuery uatwia dodawanie akcji oraz interaktywnoci dokadej strony internetowej.W tym rozdziale przyjrzymy si temu,

jak sprawi, eby strona reagowaa, kiedy uytkownicy wchodz z niw interakcj. Sprawienie, e kod bdzie reagowa na dziaania uytkownika,wyniesie Twoj witryn na zupenie nowy poziom. Zajmiemy si tetworzeniem funkcji wielokrotnego uycia, dziki czemu kod napiszesz raz,ale ju korzysta z niego bdziesz wielokrotnie.

Zdarzenia i funkcje jQuery

Twoja znajomo jQuery znowu jest potrzebna 112

Facet od pienidzy ma racj... 113

Dodawanie zdarze na stron 115

Za kulisami suchacza zdarze 116

Wizanie zdarzenia 117

Wyzwalanie zdarzenia 118

Usuwanie zdarzenia 122

Wemy si za bary elementy 126Struktura Twojego projektu 132

Dodajemy funkcje 136

rubki i trybiki funkcji 137

Funkcja anonimowa 138

Funkcje nazwane jako funkcje obsugi zdarze 139

Przekazywanie zmiennej do funkcji 142

Funkcja moe te zwraca warto 143

Korzystaj z logiki warunkowej w celu podejmowania decyzji 145Skacz z radoci potrzebuje jeszcze wikszej pomocy 149

Metody mog zmienia CSS 151

Dodaj zdarzenie hover 153

To ju prawie wszystko... 155


Suchaczzdarzesyszyzdarzeniei przekazujejedo... ...interpretera

JavaScriptu,ktrysprawdza,cotrzebazrobipo kadymzdarzeniu...


13/521

13

spistreci

Restauracja w Webowicach chce interaktywnego menu 160

Dla wegetarian 161

Poklasyfikuj swoje elementy 166

Pora na przyciski 169

Co teraz? 171

Biegamy po gaziach drzewa DOM 176

Wspinaczkowe metody przechodzenia drzewa 177

Metody acuchowe aby siga jeszcze dalej 178

Zmienne mog przechowywa te elementy 185

I znowu ten dolar... 186

Poszerz swoje moliwoci przechowywania o tablice 187

Przechowuj elementy w tablicy 188

Wymieniaj elementy za pomoc replaceWith 190

Jak moe nam pomc replaceWith? 191

Zastanw si, zanim uyjesz replaceWith 193replaceWith nie sprawdza si w kadej sytuacji 194

Wstawienie zawartoci HTML do drzewa DOM 195

Uyj metod filtrujcych w celu zawenia wyboru (cz 1.) 197

Uyj metod filtrujcych w celu zawenia wyboru (cz 2.) 198

Przywr hamburgera 201

A co z misem? 202

Treciwa tablica 203

Metoda each przeglda tablice 204To ju wszystko... prawda? 207


4Zmodyfikuj drzewo DOM

Manipulowanie stron internetow za pomoc jQuery

To, e strona skoczya si pobiera, nie znaczy od razu, e musiona zachowywa t sam struktur.W rozdziale 1. zobaczylimy, jakpodczas wczytywania strony, w celu ustalenia jej struktury, jest konstruowanedrzewo DOM. W biecym rozdziale dowiemy si, jak porusza si w gr i w dstruktury drzewa DOM i jak pracowa z hierarchi elementw oraz relacjamirodzic dziecko, aby za pomoc jQuery zmienia w locie struktur strony.

Twjelement


14/521

14

spistreci

5Nieco wdziku na Twojej stronie

Efekty i animacja w jQuery

Gryzmoki potrzebuj aplikacji sieciowej 212

Zrb sobie potwora 213

Zrb sobie potwora potrzebujemy ukadu i pooenia na stronie 214

Troch wicej struktury i stylu 217

Uaktywniamy interfejs 218

Robimy efekt byskawicy 223

W jaki sposb jQuery animuje elementy? 224

Efekty wygaszania zmieniaj waciwo CSS opacity 225

Wysuwanie sprowadza si do zmiany wysokoci 226

Zatrudnij efekty wygaszania 228

cz efekty za pomoc acuchw metod 229

Kontratakujemy za pomoc funkcji czasowych 230

Dodaj do swojego skryptu funkcje byskawic 233Efekty wasnej roboty wykorzystujce metod animate 235

Co mona, a czego nie mona animowa? 236

Metoda animate zmienia w czasie styl 238

Dokadnie skd dokd? 241

Ruch bezwzgldny obiektw a ich ruch wzgldny 242

Przesuwaj elementy wzgldnie dziki czeniu operatorw 243

Dodaj funkcje animujce do swojego skryptu 245

Patrz, mamo! Bez Flasha! 248Twj niezbdnik jQuery 250

Sprawianie, e na Twojej stronie bd si dzia rne rzeczy, to niezypomys, ale tylko do czasu.Jeli nie bdzie ona wyglda atrakcyjnie, ludzie niezechc z niej korzysta. Dlatego wanie przydadz Ci si efekty i animacja w jQuery.W biecym rozdziale nauczysz si, co zrobi, aby wraz z upywem czasu elementyzmieniay swoje miejsce na stronie, jak pokaza lub ukry okrelony element albo jak gopowikszy lub zmniejszy, a wszystko to na oczach uytkownika. Dowiesz si te, jakzakada harmonogramy animacji, aby uruchamiay si one w rnych odstpach czasu,co nada Twojej stronie bardzo dynamiczny wygld.


15/521

15

spistreci

6Luke jQuery, jestem twoim ojcem!

jQuery i JavaScript

Atrakcyjniejszy barek Rusz Gow 252

Obiekty oferuj inteligentne przechowywanie 254

Buduj wasne obiekty 255

Twrz obiekty wielokrotnego uycia za pomoc konstruktorw 256

Interakcja z obiektami 257

Konfiguracja strony 258

Powrt tablic 261

Dostp do tablic 262

Dodawaj i aktualizuj elementy tablicy 263

Zrb to jeszcze raz (i jeszcze raz, i jeszcze raz, i...) 265

Szukanie igy w stogu siana 268

Czas na podjcie decyzji... znowu! 275

Operatory porwnania i operatory logiczne 276Czyszczenie w jQuery... 282

Dodajemy wicej emocji 286

Twj niezbdnik jQuery i JavaScriptu 288

Sama biblioteka jQuery nie da sobie ze wszystkimrady.Chocia jest ona bibliotek JavaScriptu, nie potrafi niestetyrobi wszystkiego, co jej jzyk ojczysty. W tym rozdziale przyjrzymy siniektrym aspektom JavaScriptu, ktrych bdziesz potrzebowa dotworzenia naprawd atrakcyjnych stron, oraz temu, jak mona z nichkorzysta w jQuery w celu tworzenia niestandardowych list i obiektw,a take jak przechodzi przez nie w ptlach, aby uatwi sobie ycie.

1 2 3 4 2 3 4... ... ... ... ... ... ...

i t i


16/521

16

spistreci

Nadciga burza 290

Utworzylimy funkcj potwora 291

Sprawuj kontrol nad efektami czasowymi za pomoc obiektu window 292

Odpowiadaj na zdarzenia przegldarki za pomoc metod onblur i onfocus 295

Metody czasowe mwi funkcjom, kiedy dziaa 299

Napisz funkcje stopLightning i goLightning 302

Proba o now funkcjonalno w Zrb sobie potwora 310

Zacznijmy losowa 311

Znasz ju biec pozycj... 312

...oraz funkcj getRandom 312

Przesuwaj wzgldnie do biecej pozycji 316

Zrb sobie potwora v2 to prawdziwy przebj! 325


7Co ostatnio dla mnie zrobie?

Niestandardowe funkcje dla niestandardowych efektw

Kiedy poczysz niestandardowe efekty jQueryz funkcjamiJavaScriptu, moesz sprawi, e Twj kod a tym samym Twoja aplikacjainternetowa bdzie wydajniejszy, skuteczniejszy i lepszy. W tym rozdzialezagbisz si jeszcze bardziej w ulepszanie efektw jQuery poprzez obsugzdarze przegldarki, prac z funkcjami czasuoraz popraw organizacjii moliwoci wielokrotnego uyciaTwoich niestandardowych funkcjiw JavaScripcie.

W rzeczy samej, zby tonajlepsze, co mam, ale namio bosk mgbymchcie skorzysta tez reszty mojej twarzy!

spis treci


17/521

17

spistreci

Wprowad bieg Od bitu do bajtu w XXI wiek 328

Spojrzenie na stron z zeszego roku 329

Dynamizujemy 332

Stary Webie, poznaj nowego Weba 333

Zrozumie Ajax 334

Czym jest Ajax? 334

X 335Pobieranie danych przy uyciu metody ajax 340

Przetwarzanie danych XML 342

Harmonogramy zdarze na stronie 346

Funkcje samowywoujce si 347

Dosta wicej od swojego serwera 350

Ktra godzina? 351

Wyczanie zaplanowanych zdarze na stronie 356

Twj niezbdnik jQuery i Ajaksa 360

8Prosz poda dane

jQuery i Ajax

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

li

$(li).find(ul)

CorocznybiegOdbitudobajtuna10kilometrw

Wtymrokubieg odbywasinawyspie Maui zarezerwujsobiemiejscezwyprzedzeniem!

spis treci


18/521

18

spistreci

Dzia Marketingu webowickiej Megakorporacji nie zna XML-a 362

Bdy w XML-u psuj stron 363

Pobierz dane ze strony 364

Co zrobi z danymi 367

Sformatuj dane, zanim je wylesz 368

Przelij dane do serwera 369

Przechowuj dane w bazie MySQL 371

Utwrz baz danych w celu przechowywania informacji o biegaczach 372

Anatomia instrukcji insert 374

Uywaj PHP w celu odczytywania danych 377

Przetwrz dane POST na serwerze 378

Pocz si z baz danych za pomoc PHP 379

Uyj polecenia select, aby pobra dane z bazy 381Pobierz dane za pomoc PHP 383

Z pomoc nadchodzi JSON! 386

jQuery + JSON = co niesamowitego 387

Kilka regu PHP... 388

Kilka (kolejnych) regu PHP... 389

Formatowanie informacji wyjciowych w PHP 390

Dostp do danych w obiekcie JSON 397

Sanityzacja i walidacja danych w PHP 400Twj niezbdnik jQuery, Ajaksa, PHP i MySQL 405

9Kliencie, oto serwer

Obsuga danych JSON

Chocia czytanie danych z pliku XML jest bardzo przydatne, to jednaknie zawsze wystarcza.Bardziej interaktywny format wymiany danych (JavaScriptObject Notation, znany te jako JSON) uatwia pobieranie danych z serwera. JSON jestte atwiejszy do wygenerowania i czytania ni format XML. Uywajc jQuery, PHP orazSQL-a, nauczysz si, jak utworzy baz danych przechowujc informacje, ktre bdzieszmg pniej odczyta za pomoc formatu JSON i wywietli na ekranie przy uyciu jQuery.Tak objawia si prawdziwa moc aplikacji internetowych!

spis treci


19/521

19

spistreci

Kryptozoolodzy.org potrzebuj zmiany wygldu 408

Odpicuj swj formularz HTML 409

Oszczd sobie blu gowy (i zyskaj troch czasu) za pomoc jQuery UI 412

Co znajduje si w rodku pakietu jQuery UI 416

Utwrz kalendarz dla formularza z obserwacjami 417

jQuery za kulisami 418

Opcje widgetw s konfigurowalne 419

Nadaj styl przyciskom 422

Kontroluj pola liczbowe za pomoc suwakw 426

Komputery mieszaj kolory, uywajc barwy czerwonej, zieloneji niebieskiej 435

Napisz funkcj refreshSwatch 438

I jeszcze pewien drobiazg... 442


Diametralna zmiana wygldu

Interfejs uytkownika w jQuery

10Sie WWW yje i umiera dziki swoim uytkownikom i ichdanym.Zbieranie danych od uytkownikw to powane zajcie, ktre moe byczasochonnym wyzwaniem dla programisty. Widziae ju, jak Ajax, PHP i MySQLmog pomc w czynieniu efektywniejszym dziaania aplikacji internetowych.Teraz przyjrzymy si, jak jQuery moe nam pomc w utworzeniu interfejswuytkownika dla formularzy zbierajcych dane. Po drodze otrzymasz spor dawkjQuery UI oficjalnej biblioteki interfejsu uytkownika jzyka jQuery.

Kiedy wreszciedadz mi spokjci paparazzi?

?

spis treci


20/521

20

spistreci

Obiekty, wszdzie obiekty

jQuery i API

Gdzie jest genera paskuda? 448

API Google Maps 450

API uywaj obiektw 451Docz mapy Google do swojej strony 453

Odczytywanie danych w formacie JSON za pomoc SQL-a i PHP 456

Punkty na mapie to markery 460

Lista kontrolna funkcji wywietlajcej wiele obserwacji 464

Nasuchiwanie zdarze na mapie 474

Udao si! 478

Twj niezbdnik jQuery API 481

11Niezalenie od tego, jak bardzo utalentowanym programist jeste,sam nie dasz sobie rady ze wszystkim...Zobaczylimy, jak mona doczawtyczki jQuery, takie jak jQuery UI, albo nawigacj z wykorzystaniem kart, aby bezwikszego wysiku wzbogaca programy pisane w jQuery. W celu wyniesienia naszychaplikacji na jeszcze wyszy poziom, dodania do nich paru z naprawd niezychnarzdzi dostpnych w Internecie oraz skorzystania z informacji udostpnionych przezprawdziwych potentatw takich jak Google, Twitter albo Yahoo! bdziemy jednakpotrzebowa czego... wicej. Firmy te, i wiele innych, dostarczaj API (applicationprogramming interfaces, czyli interfejsy programowania aplikacji) dedykowane

dla swoich usug, z ktrych moesz korzysta w swojej witrynie. W tym rozdzialeprzyjrzymy si podstawom API i zastosujemy niezwykle popularny interfejs, jakim jestGoogle Maps API.

Cze! Jestem markerem. Chtniezamarkuj... to jest zawr

z Tob znajomo. Na pewno jugdzie mnie widziae!

spistreci


21/521

21

p

1. Wszystkie drobiazgi z biblioteki jQuery 484

2. jQuery w sieciach CDN 487

3. Przestrze nazw jQuery: metoda noConflict 488

4. Debugowanie kodu jQuery 489

5. Zaawansowane techniki animacji: kolejki 490

6. Walidacja formularzy 491

7. Biblioteka jQuery UI Effects 492

8. Tworzenie wasnych wtyczek do jQuery 4939. JavaScript dla zaawansowanych: domknicia 494

10. Szablony 495

ADziesi najwaniejszych rzeczy(o ktrych nie napisalimy)Nawet po tym wszystkim cigle jest jeszcze wiele rzeczy, do ktrychnie dotarlimy.Istnieje mnstwo dobrodziejstw jQuery i JavaScriptu, ktrych nieudao nam si wcisn do tej ksiki. Byoby nieuczciwoci nie wspomnie o nich,a tak bdziesz lepiej przygotowany na kady inny aspekt jQuery, ktry moesznapotka podczas swoich podry.

Ostatki

spistreci


22/521

22

p

Utwrz rodowisko programistyczne PHP 498

Dowiedz si, co ju masz 498

Czy masz serwer WWW? 499

Czy masz PHP? Ktr wersj? 499

Czy masz MySQL? Ktr wersj? 500

Zacznij od serwera WWW 501Zakoczenie instalacji serwera Apache 502

Instalacja PHP 502

Etapy instalacji PHP 503

Etapy instalacji PHP: zakoczenie 504

Instalacja MySQL 504

Etapy instalacji MySQL w systemie Windows 505

Uaktywnienie PHP w systemie Mac OS X 510

Etapy instalacji MySQL w systemie Mac OS X 510

BPrzygotuj si do przyszych sukcesw

Potrzebujesz miejsca na wiczenie nowo nabytych umiejtnociPHP bez naraania swoich danych na niebezpieczestwa czyhajce

w sieci.Posiadanie bezpiecznego miejsca na opracowywanie aplikacji PHP przedwypuszczeniem jej w szeroki wiat sieci internetowej zawsze jest dobrym pomysem.Dodatek ten zawiera instrukcje dotyczce instalacji serwera WWW, MySQL i PHP, dzikiczemu bdziesz mie do dyspozycji bezpieczne miejsce do pracy i wicze.

Konfiguracja rodowiska programistycznego

Skorowidz 518S


23/521

Nie mog uwierzy,e zamiecili to

w ksice o jQuery!

Wtymrozdzialeodpowiemynap

alcepytanie:Dlaczego

zamiecilitowksiceojQuery

?.

Wstp

jak korzysta z tej ksiki


24/521

24 wstp

Dla kogo jest ta ksika?

Kto prawdopodobnie powinien zrezygnowa z tej ksiki?

Jeeli odpowiesz tak na kade z tych pyta:

Jeeli odpowiesz tak na dowolne z tych pyta:

to ksika ta jest dla Ciebie.

to ksika ta nie jest dla Ciebie.

[Uwagaoddziaumarketingu:Ksikatajestdlakadego,ktomakartkredytow.Albogotwk.GotwkatejestOK.Ed]

Czy masz ju dowiadczenie w projektowaniu albo tworzeniustron internetowych?

1

Czy chcesz opanowa, zrozumie, zapamitaorazstosowawane koncepcje jzykw jQuery i JavaScript,dziki czemu Twoje strony bd bardziej interaktywnei ekscytujce?

2

Czy wolisz stymulujce rozmowy przy posikachoddrtwych i nudnych wykadw akademickich?

3

Czy jeste zupenym nowicjuszemw projektowaniu stroninternetowych?

1

Czy programujesz ju aplikacje WWW i szukasz leksykonuna temat jQuery?

2

Czy boisz si sprbowa czego nowego? Czy wolabyleczenie kanaowe od ubrania si jednoczenie w kratki prki? Czy sdzisz, e ksika techniczna, w ktrejwystpuje Wielka Stopa, nie moe by powana?

3

Zpewnocibdzieprzydatne,jelimasztepewnedowiadczeniewpisaniuskryptw.ZnajomoJavaScriptubdziepomocna,alewadnymwypadkuniejestwymagana.

ZajrzyjnajpierwdoHeadFirstHTMLwithCSS&XHTML.Edycjapolska(Ruszgow!),gdzieznajdzieszdoskonaewprowadzeniedoprojektowaniastronWWW,poczymwriprzyczsidonaswmiasteczkujQuery.

wstp


25/521

25jeste tutaj

wietnie,jeszcze tylko500 nijakich,

drtwychi nudnych stron.

Wiemy, co mylisz

I wiemy, co myli Twj mzg

Jakco takiegomoe by powan ksik o programowaniu w jQuery?

O co chodzi z tymi obrazkami?

Czy w ogle mog si w taki sposb uczy?

Twj mzg pragnie nowoci. Przez cay czas szuka, obserwuje ioczekujeczego niezwykego. W taki sposb jest zbudowany, co pomaga Ciutrzyma si przy yciu.

Co wobec tego robi Twj mzg z tymi wszystkimi schematycznymi,zwykymi i normalnymi zjawiskami, ktre spotyka? Wszystko, cotylkomoe, eby przestay przeszkadza mu w prawdziwej pracy

rejestrowaniu zdarze, ktremaj znaczenie. Nie trudzi sizapamitywaniem nudnych rzeczy; nigdy nie uda im si przecisnprzez filtr to z pewnoci nie jest wane.

Skd Twj mzgwie, co jest wane? Przypumy, e wyszede na spaceri wyskoczy na Ciebie tygrys. Co si dzieje w Twojej gowie i Twoim ciele?

Odpalaj neurony. Rozkrcaj si emocje.Buzuje chemia.

To wanie std Twj mzg wie...

To musi by wane! Nie zapominaj o tym!

Wyobra sobie jednak, e znajdujesz si w domu albo bibliotece. Jest to miejscebezpieczne, ciepe i wolne od tygrysw. Uczysz si, przygotowujesz do egzaminualbo prbujesz pozna pewne trudne zagadnienie techniczne, co wedug Twojegoszefa powinno Ci zabra tydzie, gra 10 dni.

Jest tylko jeden problem. Twj mzg stara si wywiadczy Ci wielkprzysug. Prbuje zagwarantowa Ci, e ten oczywicie niewanymateria nie obciy Twoich ograniczonych zasobw. Zasobw, ktrelepiej przeznaczy na przechowywanie naprawdwanychrzeczy.Takich jak tygrysy. Takich jak zagroenie ogniem. Takich jak to, ebyju nigdy wicej nie jedzi na snowboardzie w samych tylko spodenkach.

I nie ma prostego sposobu na powiedzenie swojemu mzgowi: Hej,mzgu, wielkie dziki, ale bez wzgldu na to, jak nudna jest ta ksikai jak sabo reaguj teraz w emocjonalnej skali Richtera,naprawdchc zapamita ten materia.

Twjmzgmyli,eTOjestwane.

Twjmzg

myli,eTEG

O

niewarto

zapamitywa

.


26/521

wstp


27/521

27jeste tutaj

Jeli naprawd chcesz si uczy i chcesz si uczy szybciej i lepiej zwracaj uwag nato, jak zwracasz uwag. Myl o tym, jak mylisz. Naucz si, jak si uczysz.

Wikszo z nas, kiedy dorastaa, nie uczestniczya w kursach metapoznania ani w kursachz teorii nauczania. Oczekiwano, e bdziemy si uczy, ale rzadko uczono nas, jak si uczy.

Zakadamy jednak, e jeli ju trzymasz w rkach t ksik, to naprawd chcesz siczego nauczy o jQuery i prawdopodobnie nie chcesz straci zbyt duo czasu. A poniewaw przyszoci bdziesz wicej pracowa z jQuery, powinienezapamitato, co czytasz.Z tego te powodu musisz to zrozumie. Aby wynie jak najwicej z tej ksiki albo

zjakiejkolwiekinnej ksiki lub procesu uczenia we odpowiedzialno za swj mzg.Swj mzg w odniesieniu do tejtreci.

Sztuczka polega na tym, aby Twj mzg potraktowa materia, ktrego siuczysz, jak Co Naprawd Wanego. Istotnego dla Twojego samopoczucia.Wanego jak tygrys. W przeciwnym razie bdziesz skazany na nieustajcbitw, w ktrej Twj mzg bdzie robi, co tylko bdzie mg, aby niedopuci do przyjcia si nowego materiau.

Jak wic skonisz swj mzg, eby myla, i programowaniew jQuery to godny tygrys?Istnieje sposb wolny i mudny, ale jest te metoda skuteczniejsza. Sposb wolnysprowadza si do zwykych powtrek. Z pewnoci wiesz, epotrafiszsi nauczy nawetnajnudniejszych zagadnie i je zapamita, jeli bdziesz wtacza w mzg cigle to samo.Po wystarczajcej liczbie powtrek Twj mzg stwierdzi: To niewydaje sidla niegowane, ale onwciiwci, iwcispoglda na to samo, wic przypuszczam, e takie jest.

Szybszy sposb polega na zrobieniuwszystkiego, co zwiksza aktywno mzgu, a zwaszczarne rodzaje aktywnoci. Rzeczy wymienione na poprzedniej stronie stanowi ogromncz rozwizania i udowodniono, e kada z nich wspomaga prac mzgu z korzycidla Ciebie. Badania wykazay na przykad, e umieszczanie wyrazw opisujcych rysunki

wewntrztych rysunkw (w przeciwiestwie do innych miejsc na stronie takich jak podpisyalbo tekst gwny) zmusza Twj mzg do prb odnalezienia zwizkw midzy sowamii obrazami, co wyzwala aktywno wikszej liczby neuronw. Wicej aktywnych neuronw= wiksze szanse na to, e Twj mzg uzna, i jest to co, na co warto zwrci uwag i by

moe zapamita.Styl konwersacyjny pomaga, poniewa ludzie s skonni powica wicej uwagi, kiedysdz, e uczestnicz w rozmowie, gdy spodziewaj si kontynuacji tematu i podjciadialogu ze swojej strony. Zdumiewajce jest, i Twj mzg niezupeniedbao to, e tarozmowa jest prowadzona z ksik! Jeli natomiast styl ksiki jest formalny i drtwy,Twj mzg odbiera j tak samo jak uczestnictwo w wykadzie prowadzonym w saliwypenionej pasywnymi suchaczami. Nie ma potrzeby, aby zachowywa czujno.

Ale rysunki i styl konwersacyjny to zaledwie pocztek.

Metapoznanie: mylenie o myleniu

Ciekawe, jak mgbymskoni mj mzg dozapamitania tego

materiau...



28/521

28 wstp

Oto co zrobilimy

Uylimyrysunkw, poniewa Twj mzg jest zorientowany na obrazy, a nie na tekst. Jelichodzi o Twj mzg, to obraz rzeczywicie wart jest tysica sw. Tam gdzie tekst i obrazymaj wspistnie, osadzilimy napisy wewntrz rysunkw, poniewa Twj mzg pracujeefektywniej, kiedy tekst znajduje si w rodku rzeczy, do ktrych si odnosi, ni gdy jest onumieszczony w podpisach albo zagrzebany gdzie w treci.

Uylimypowtrek, podajc t sam informacj narnesposoby, za pomoc innych mediwi poprzez odwoanie si dowielu zmysw, aby zwikszy szanse, e tre zostanie zakodowananie tylko w jednym rejonie Twojego mzgu.

Uylimy koncepcji i rysunkw wniespodziewanysposb, poniewa Twj mzg jest nastawiony

na nowoci. Skorzystalimy z obrazw i pomysw zawierajcychjakiemocjonalnyprzekaz,poniewa Twj mzg jest nastawiony na zwracanie uwagi na biochemi emocji. Co, coskania Ci doodczuciaczego, zapamitasz z wikszym prawdopodobiestwem, nawetjeli uczucie to bdzie niczym wicej jak tylko przejawemhumoru,zaskoczeniemalbozaciekawieniem.

Uylimy spersonalizowanego,konwersacyjnego stylu, gdy Twj mzg jest nastawiony nazwracanie na co wikszej uwagi, kiedy sdzi, e uczestniczysz w rozmowie, ni gdy myli,e pasywnie suchasz wykadu. Twj mzg dziaa tak nawet wtedy, kiedyczytasz.

Zamiecilimy wieleaktywnoci, poniewa Twj mzg jest nastawiony na lepsz nauki zapamitywanie, kiedy corobisz, ni kiedy o tymczytasz. Wybralimy wiczenia stawiajcewyzwania, ale wykonalne, poniewa wikszo osb woli wanie takie.

Uylimywielu stylw nauczania, poniewa Tymoesz wole procedury opisane krok pokroku, podczas gdy kto inny woli obraz caoci, a kto jeszcze inny chce po prostu zobaczyprzykad. Niezalenie jednak od indywidualnych preferencjikadymoe odnie korzyci,widzc ten sam materia przedstawiony na wiele rnych sposobw.

Zamiecilimy materiay dlaobu pkul Twojego mzgu, gdy im bardziej Twj mzg sizaangauje, z tym wikszym prawdopodobiestwem nauczysz si i zapamitasz i tym duejbdziesz pozostawa skupiony. Jako e praca jedn pkul czsto daje drugiej pkuli szansna odpoczynek, moesz by bardziej produktywny, kiedy musisz uczy si przez dusze okresyczasu.

Zamiecilimyhistorieoraz wiczenia, ktre przedstawiajwicej ni tylko jeden punktwidzenia, poniewa Twj mzg jest nastawiony na gbsz nauk, kiedy jest zmuszony dowydawania ocen i osdw.

Zamiecilimywyzwaniaz wiczeniami oraz zadalimypytania, na ktre nie zawsze istniejproste odpowiedzi, poniewa Twj mzg jest nastawiony na nauk i pamitanie, kiedy musinad czympracowa. Pomyl o tym od samegoogldanialudzi na siowni Twojeciaonienabierze ksztatu. Zrobilimy wszystko, co w naszej mocy, aby kiedy ju zabierzesz si docikiej pracy pracowa nadwaciwymiproblemami. Upewnilimy si, enie powicisz

nawet jednego dodatkowego dendrytuna analiz trudnego do zrozumienia przykadu lubprzetwarzanie cikiego, wypenionego argonem albo suchego tekstu.

Skorzystalimy zludzi w historiach, przykadach, na rysunkach itd. poniewa Tyjeste

czowiekiem i Twj mzg zwraca wiksz uwag naludzi

ni na innerzeczy

.

Jazda prbna

Zmienna Tablica

Pogawdki przy kominku

wstp

Oto co moesz zrobi, aby zmusi swj


29/521

29jeste tutaj

My ju zrobilimy, co do nas naleao. Reszta zaley od Ciebie. Poniszewskazwki to punkt wyjcia suchaj swojego mzgu i dowiedz si, cow jego przypadku dziaa, a co nie. Wyprbuj nowe rzeczy.

jeszcze poczujesz pragnienie) pogarsza funkcjepoznawcze.

Mw o tym. Na gos.Mowa angauje rne czci mzgu. Jeli prbujeszco zrozumie albo zwikszy szanse na pniejszetego zapamitanie, mw na gos. Albo, jeszcze lepiej,sprbuj wyjani to komu innemu. Nauczysz sitego szybciej i przy okazji by moe odkryjesz idee,o ktrych by nie wiedzia, gdyby tylko o tym czyta.

Suchaj swojego mzgu.Zwracaj uwag na to, czy Twj mzg nie zaczyna byprzeciony. Jeli spostrzeesz, e tylko przelizgujeszsi po tekcie wzrokiem albo zapominasz, co przedchwil przeczytae, pora zrobi sobie przerw. Kiedyju przekroczysz pewien punkt, nie nauczysz siszybciej, prbujc wchon wicej, a nawet moeszzaszkodzi caemu procesowi nauki.

Poczuj co!Twj mzg chce wiedzie, e to maznaczenie. Angaujsi w historie. Wymylaj wasne podpisy do zdj.Zymanie si na zy dowcipi takjest lepsze ni brakjakiejkolwiek reakcji.

Stwrz co!

Stosuj nabyt wiedz w codziennej pracy. Korzystajz tego, czego si nauczye, przy podejmowaniu decyzji

w swoich projektach. Po prostu zrb co, eby zdobytroch dowiadczenia wykraczajcego poza wiczeniai aktywnoci zawarte w tej ksice. Wszystko, czegopotrzebujesz, to owek i problem do rozwizaniaProblem, przy ktrym mgby odnie korzyci,stosujc narzdzia i techniki, ktre poznajesz na

potrzeby egzaminu.

6

7

8

9

Zwolnij. Im wicej zrozumiesz, tym mniejbdziesz musia pamita.Nie ograniczaj si wycznie doczytania. Zatrzymaj

si i pomyl. Kiedy ksika zada Ci pytanie, nieprzeskakuj od razu do odpowiedzi. Wyobra sobie,e kto naprawd Ci pyta. Im bardziej zmusisz swjmzg do mylenia, tym wiksze bdziesz mie szansena nauczenie si i zapamitanie.

Rb wiczenia. Zapisuj swoje uwagi.Umiecilimy wiczenia w ksice, ale gdybymy je

rozwizali, to byoby tak, jakby kto inny poszedza Ciebie na trening. Nie ograniczaj si tylko dopatrzeniana wiczenie. Uyj owka.Istnieje mnstwodowodw na to, e aktywno fizycznapodczasnaukimoe poprawi zapamitywanie.

Czytaj Nie istniej gupie pytania.Kade z nich. To nie s fragmenty opcjonalne

stanowi one cz gwnej treci tej ksiki. Niepomijaj ich.

Niech ta ksika bdzie ostatni rzecz,jak czytasz przed snem, albo przynajmniejostatni ambitn rzecz.Cz procesu uczenia si (a zwaszcza przenoszeniewiedzy do pamici dugoterminowej) zachodzi jupotym, jak odoysz ksik. Twj mzg potrzebuje czasudla siebie, aby zaj si przetwarzaniem. Jeli w tymczasie dorzucisz co nowego, cz z tego, czego siwanie nauczye, przepadnie.

Pij wod. Duo wody.Twj mzg pracuje najlepiej zanurzony w przyjemnejkpieli. Odwodnienie (ktre moe nastpi, zanim

1

2

3

4

5

Wytnijponiszeporadyinaklejjenalodwk.

Oto co moesz zrobi, aby zmusi swjmzg do posuszestwa



30/521

30 wstp

Przeczytaj mnie

Ksika ta ma stanowi dowiadczenie zwizane z nauk i nie jest leksykonem. Celowo pozbylimy siwszystkiego, co tylko mogoby przeszkodzi w procesie poznawania tego, czym zajmujemy si w danymmiejscu ksiki. Pierwsze jej czytanie bdziesz jednak musia zacz od pocztku, poniewa przyjlimyw tej ksice pewne zaoenia co do tego, co ju widziae i co wiesz.

Oczekujemy, e znasz HTML i CSSJeli nie znasz HTML-a ani CSS, signij poHead First HTML with CSS & XHTML Edycja polska, zanimzaczniesz lektur. Odwieymy nieco wiedz o selektorach CSS, ale nie spodziewaj si, e nauczysz si tuwszystkiego, co potrzebujesz na temat CSS wiedzie.

Nie oczekujemy, e znasz JavaScriptWiemy, wiemy To kontrowersyjna opinia, ale sdzimy, e moesz nauczy si jQuery bez wczeniejszejznajomoci JavaScriptu. Aby pisa w jQuery, musisz go troch zna i nauczymy Ci tych wszystkichwanych koncepcji JavaScriptu rwnolegle z kodem jQuery. Szczerze i gboko wierzymy w mottojQuery: Pisz mniej. Rb wicej.

Namawiamy Ci do uywania wicej ni tylko jednej przegldarki

Zachcamy Ci, aby testowa swoje strony przynajmniej w trzech aktualnych przegldarkach. Uzyskaszdziki temu dowiadczenie w dostrzeganiu rnic midzy przegldarkami oraz w tworzeniu stron, ktrebd poprawnie dziaa w wielu z nich.

To nie jest ksika Rusz gow! Narzdzia dla programistw w przegldarkachale oczekujemy, e wiesz, jak z tych narzdzi korzysta. Gorco polecamy przegldark GoogleChrome, ktr moesz pobra std:http://www.google.com/chrome.Moesz te odwiedzi ponisze stronyw celu uzyskania informacji o nastpujcych przegldarkach oraz ich narzdziach dla programistw:

Google Chrome http://code.google.com/chrome/devtools/docs/overview.html

Firebug dla Firefox http://getfirebug.com/wiki/index.php/FAQ

Safari http://www.apple.com/safari/features.html#developer

Internet Explorer 8 http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Internet Explorer 9 http://msdn.microsoft.com/en-us/ie/aa740478

Dragonfly dla Opery http://www.opera.com/dragonfly/

Spodziewamy si, e wyjdziesz poza t ksikNajlepsze, co moesz zrobi podczas uczenia si czego nowego, to doczenie do uczcej sispoecznoci. Jestemy przekonani, e spoeczno jQuery jest jedn z najlepszych i najaktywniejszychw wiecie technologii. Moesz dowiedzie si wicej tutaj:http://www.jquery.com.

wstp
http://www.google.com/chromehttp://www.google.com/chromehttp://code.google.com/chrome/devtools/docs/overview.htmlhttp://getfirebug.com/wiki/index.php/FAQhttp://www.apple.com/safari/features.html#developerhttp://msdn.microsoft.com/en-us/library/dd565628http://msdn.microsoft.com/en-us/ie/aa740478http://www.opera.com/dragonfly/http://www.jquery.com/http://www.jquery.com/http://www.jquery.com/http://www.opera.com/dragonfly/http://msdn.microsoft.com/en-us/ie/aa740478http://msdn.microsoft.com/en-us/library/dd565628http://www.apple.com/safari/features.html#developerhttp://getfirebug.com/wiki/index.php/FAQhttp://code.google.com/chrome/devtools/docs/overview.htmlhttp://www.google.com/chrome


31/521

31jeste tutaj

Te aktywnoci NIE s opcjonalne

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

Powtrzenia s celowe i waneJedn z wyrniajcych cech ksiek Rusz gow! jest to, e chcemy, abynaprawdzrozumia. Chcemy

te, eby koczc ksik, pamita, czego si nauczye. Celem, jaki stawia przed sob wikszoczytelnikw leksykonw, nie jest zapamitywanie i przypominanie sobie, ale ta ksika stanowi o uczeniusi, tak wic niektre z koncepcji pojawi si tu wicej ni tylko raz.

wiczenia Wysil szare komrki nie maj odpowiedziNiektre z nich nie posiadaj odpowiedzi, a w przypadku innych czci procesu wysilania szarychkomrek bdzie zadecydowanie, czy Twoje odpowiedzi s dobre. W niektrych wiczeniach z cykluWysil szare komrki znajdziesz podpowiedzi kierujce Ci we waciw stron.

Wymagania softwareoweAby pisa kod w jQuery, potrzebujesz edytora tekstw, przegldarki, serwera WWW (moe dziaalokalnie na Twoim komputerze) oraz biblioteki jQuery.

Edytory tekstw, jakie polecamy dla Windows, to PSPad, TextPad, EditPlus (ale jeli musisz, moeszkorzysta te z Notatnika). Edytorem, ktry polecamy dla Maca, jest TextWrangler. Jeli pracujeszw systemie Linux, masz do dyspozycji mnstwo wbudowanych edytorw i wierzymy, e nie makoniecznoci opowiadania Ci o nich.

Jeli zamierzasz programowa aplikacje WWW, bdzie Ci potrzebny serwer. Aby przerobi pniejszerozdziay (9., 10. i 11.), bdziesz musia zapozna si z dodatkiem opisujcym instalacj PHP, MySQLoraz serwera WWW (Apache albo IIS) i wykona opisane tam czynnoci. Zalecamy, aby zrobi to teraz.Naprawd! Przejd do dodatku, zastosuj si do instrukcji i wr tu, kiedy skoczysz.

Bdzie Ci te potrzebna przegldarka oraz narzdzia dla programistw przegldarki (zapoznaj siz tekstem na poprzedniej stronie). Warto te powici czas na nauk korzystania z konsoli JavaScriptw narzdziach Google Chrome. T prac domow bdziesz musia odrobi sam.

I wreszcie bdzie Ci potrzebna biblioteka jQuery. Odwr stron, a pokaemy Ci, skd j wzi.



32/521

32 wstp

Pobierz jQueryNo to zaczynamy. Przejd na stron jQuery i pobierz kopibiblioteki, z ktrej bdziesz korzysta podczas lektury tej ksiki.

Krok pierwszy:

Krok drugi:

Uruchom swoj ulubion przegldark i wskajej nastpujcy adres:http://jquery.com/.

Krok trzeci:

Odszukaj sekcj zatytuowan Grab the Latest Version!(czyliPobierz najnowsz wersj!), a nastpnie zaznaczpole wyboru obok opcjiProduction(wersja produkcyjna).

Krok czwarty:

Kliknij przyciskDownload jQuery(czyliPobierz jQuery).

Na nastpnej stronie zobaczysz mniej wicej cotakiego:

Stron zapisz na swoim dysku w folderzescripts.

scripts

jquery-1.7.min.js

Jaka jest rnica midzy wersj produkcyjn a dewelopersk?Wersja produkcyjna(production) jQuery jest wersj zminiaturyzowanprzeznaczon do szybkiego wykonywania si na serwerze WWW. Wersjadeweloperska(development) jest przeznaczona dla programistwzainteresowanych poznawaniem i poszerzaniem wewntrznych mechanizmwbiblioteki jQuery. Pobierz kopie obu tych wersji, jeli naleysz do tych, ktrzylubi zaglda do rodka silnika.

wstp
http://jquery.com/http://jquery.com/http://jquery.com/


33/521

33jeste tutaj

Konfiguracja folderw

Dlakadegorozdziau

istniejefolderbegin

zawierajcykodpocztkowy.

Po pobraniu i rozpakowaniu kodw z ksiki ze strony wydawnictwa Helion(ftp://ftp.helion.pl/przyklady/jquerg.zip)stwierdzisz, e s one poumieszczane

w folderach zorganizowanych wedug poszczeglnych rozdziaw. Spjrzmyna przykad nar03:

Folderendzawiera kocowy kod dla rozdziau. Namawiamy Ci, eby korzystaz tego folderu tylko dla sprawdzenia wynikw swojej pracy.

Wfolderzestylesznajdujesiplikmy_stylezawierajcywszystkiestylepotrzebnedorozpoczciapracywdanymrozdziale.

Folderscriptszawiera

bibliotekjQuery,ktr

waniepobrae.

Moesz korzysta z biblioteki jQuery w dowolnym ze swoich projektw. Dla Twojej wygodyumiecilimy j w folderze z kodami udostpnionymi dla tej ksiki, niemniej jednakpowiniene wiedzie, skd j wzi, na potrzeby swoich przyszych projektw i ze wzglduna jej aktualizacje. Ludzie od jQuery aktualizuj t bibliotek regularnie.

Plikmy_scripts.jszawierakod,

ktrybdzieszpisasam.Sprbuj

wysiliswjumysiniezagldajtutaj,chybaeniebd

zieszju

miainnegowyjcia.

Plikindex.htmlzawierakoddlaaplikacjiWWW.

zesp recenzentw

Z
ftp://ftp.helion.pl/przyklady/jquerg.zipftp://ftp.helion.pl/przyklady/jquerg.zipftp://ftp.helion.pl/przyklady/jquerg.zip


34/521

34 wstp

Zesp recenzentw technicznych

PaulBarryLindseySkouras

Jim Doranpracuje jako inynier oprogramowania na Uniwersytecie Johna Hopkinsa w Baltimore w stanie Maryland.Naucza JavaScriptu w Community College of Baltimore County i opowiada o tym jzyku podczas konferencjipowiconych sieci WWW. Kiedy nie zajmuje si tym wszystkim, prowadzi pod adresemhttp://jimdoran.netblogpowicony sztuce, a take bierze udzia w studenckich rozgrywkach roller derby league.

Bill Mietelskiby recenzentem technicznym kilkunastu ksiek z serii Head First. Obecnie, jako inynier oprogramowania

w czoowym krajowym centrum medycznym w metropolii chicagowskiej, prowadzi badania biostatystyczne. Kiedy niezbiera ani nie analizuje danych, mona go spotka na lokalnym polu golfowym uganiajcego si za ma bia pieczk.

Lindsey Skourasjest prawnikiem w Waszyngtonie DC. W wolnym czasie nauczya si programowa dziki ksikomz seriiHead First. Do jej pozostaych zainteresowa nale czytanie, robtki rczne, zwiedzanie muzew oraz spdzanieczasu z mem oraz psami.

Paul Barrywykada informatyk na politechnice w Carlow w Irlandii. Paul jest redaktorem czasopisma Linux Journaloraz autorem ksiek technicznych. Napisa takeHead First Pythoni jest wspautoremHead First Programming. Kiedyma czas, zajmuje si konsultacjami w sektorze maych i rednich przedsibiorstw oraz w zakresie uruchamiania projektw

programistycznych.

BillMietelski

JimDoran

wstp

P d i k i
http://jimdoran.net/http://jimdoran.net/http://jimdoran.net/


35/521

35jeste tutaj

Podzikowania

CourtneyNash

Lou Barr

Ludzie w OReilly:

Dzikujemy Lou Barrza byskawiczn, wspania i magiczn prac, jak wykonaa, aby uksztatowa t ksiki sprawi, e jest pikna.

Dzikujemy Laurie Petryckiejza danie nam zielonego wiata. Ryan bardzo mio wspominaszkolenie w siedzibie HF w Bostonie i nigdy nie zapomni ciepej rodzinnej atmosfery, o ktrzadbaa Laurie.

Dzikujemy Karen Shaner. Dzikujemy wszystkim z ekipy recenzentw technicznych.

Ryan nigdy nie zapomni dnia, w ktrym odkry w ksigarni seriHead First. Podzikowania dlaKathy Sierry i Berta Batesa za wzbudzanie neuronw u maniakw komputerowych, gdziekolwieksi ci maniacy znajduj. Dzikujemy Bertowi za suchanie naszego zrzdzenia i wycignicie nasz problemw zwizanych z ukoczeniem ksiki oraz za wskazywanie nam jasnych celw ;).

Dzikujemy Timowi OReilly za jego wizj stworzenia najlepszej literatury dla komputerowcw!

Przyjaciele i rodzina Ronana:

Szczeglne podzikowania dla mojej ony Caitlin, ktra pomoga w urzeczywistnieniu tej ksiki, suc swoj

fantastyczn znajomoci wszystkich funkcji w Adobe. Dzikuj te za jej cierpliwo bez Ciebie nie mgbymtego wszystkiego zrobi! Wielkie dziki wszystkim, ktrzy wspierali nas w tym wysiku moim wspaniaymssiadom, naszym kumplom z piwnicznego mieszkania na Uniwersytecie Portlandzkim, moim wyrozumiaymdruynom piki nonej i kolegom od golfa. Dzikuj mojej rodzinie w Irlandii za jej wsparcie i sowa zachty.Przede wszystkim dzikuj Ryanowi Benedettiemu, mojemu wspaniaemu wspautorowi, koledze i przyjacielowi.Dziki za zabranie mnie w t podr i danie mi szansy. To byo wspaniae dowiadczenie!

Przyjaciele i rodzina Ryana:

Dzikuj mojej crce Josie, mojemu synowi Vinniemu i mojej narzeczonej Shonnie, ktra wierzya we mnie

i codziennie wspieraa mnie na wiele rnych sposobw, kiedy pisaem t ksik. Ti amo, i miei tre miracoli.Tak bardzo Was kocham, moje trzy cuda!

Dzikuj mojej mamie i mojemu tacie, mojemu bratu Jeffowi i moim siostrzenicom Claire i Quinn. Dzikujmoim piwnicznym wsplokatorom oraz zaodze WAS na Uniwersytecie Portlandzkim, a mianowicie Jenny Walsh,Jacobowi Caniparolemu oraz wtorkowej ekipie technicznej (wiecie, kogo mam na myli). Dziki dla Caitlin Pierce-Cranley za jej niesamowit wiedz o projektowaniu. Dzikuj mojemu kumplowi, irlandzkiemu ninja (znanemute jako Ronan Cranley) za jego doskonae umiejtnoci programowania w jQuery, JavaScripcie i PHP, za jegopoczucie humoru oraz za niewiarygodn etyk pracy nad t ksik.

Nasza redaktor:

Dzikujemy (i gratulujemy!) Courtney Nash, ktra nakonia nas dostworzenia najlepszej chyba ksiki, jak bylimy w stanie napisa. Sprostaa

wielkiej liczbie naszych e-maili, pyta, gdera i okazyjnych dziwactw.Wytrzymaa z nami przez cay czas powstawania tej ksiki i ufaa nam,kiedy ufalimy naszej intuicji.


36/521

36 wstp

1


37/521

37to jest nowy rozdzia

Moe jest tu co, dzikiczemu moje strony bdbardziej interaktywne.

Akcja na stronach internetowych

Chcesz wicej dla swoich stron.Masz w zanadrzu HTML oraz CSS i chciaby wzbogaciswoje umiejtnoci o pisanie skryptw, ale nie masz zamiaru spdzi caego ycia, piszc je wierszpo wierszu. Potrzebujesz biblioteki skryptw, ktra pozwoli Ci zmienia strony internetowe w locie.A skoro wyraamy ju nasze yczenia, to moe doda jeszcze wspprac z Ajaksem i PHP? Czy dasi zrobi w trzech wierszach to, do czego wikszo jzykw po stronie klienta potrzebuje pitnastu?Pobone yczenia? W adnym wypadku! Musisz zapozna si z jQuery.

1.


38/521

rusj cm

Chcagz wd gftonmi

Wiesz ju jk budowa wspiae wgldajce sto wkozstuc czst

i zgod ze standardami TML i CSS. Statcze sto iternetowe to ju

jedak ie jest to udzie cc stro reagujcej Cc akcji imacji

terkcji i mstw fjc fektw.

Chcesz p

ntrol nad swoimi stronami uczyn e przydatnejszym da swoch goc?

Na ponse cie zanac wszystke opcje, ktre mog osta do ego astosowane.

D Dynamicne dodawane elementw do strony be odweaa je a kadym raem.D Zmana pozyci men, kedy uytkownik przesuwa po ch mysz.D Otrzegae uytkowka kiedy w formlarz pozotanie newypnone poe

D Dodane do tekstu obraw ruchu ora prej.D Poerae danyh erwera dokadne wtedy kedy potreje ih uytkownik


39/521

HTML i CSS g w potzdku, la...Sare dobre ML i CSS bze si srawdza z dawaiu stronom strktur

stlu Kied u wredejesz stron TML a tam bdie ale bdzie z

A jeli echcesz zmei wgl stro alo c do ej da lu usu? Bzesz

msia iele si agimastkow w CSS alo o prostu zadowa ow stro co

ekonieczie dbzie si szbko Dlazeg? Poiewa wszsko co tak apawd

obis a pomo TML- i CSS o kotroowie eg jak wgl stra.

P , um

cymy jqury

-o

/1

-

aS uu u

l

t

o

O P u

S WWW

Pegldarka pobieasom wywieta j

tk k i


40/521

tymj s skryp

pozabujagz ocy grypu

Aby zmiena strony itereowew lobez ich odwieaia, musiszpromawia z pregldark. Jak o zobi? Za pomc zaznka

HTML ane jak >.

Zc


41/521

Ndchodzi jQuay (i JvScip)!

Jzk z ktrego korzstm b wdw polecei pregldrce to

JvScrt Kd rzegldrk m wbdow iterpete JvScriptu

wkonujc polecei ktre s umieszczoe midz zcznkm

, i tumczc e re kcje dejmowe stoie.

cymy jqury

Iepee JavaScpu"asuchue

" zae ach

a ce s oe

zachoza so1e.

n

t

p

re

ptu oze tez a

' lqae

Ab wdw polecei iterpeteow, musisz

jedk mwi w Jvcripcie. Ale bez obw! Wie

w tm mieju wkrc Quer. jQuer to bblokaojk vScript wspecjlizow w meiniu w lceodkumetw sto WW Wprbm j rc.

uery to bibliotekajzyka JavaScriptwyspecalizowanaw zmienianiu w locie

dokumentw stronyWWW.

o y srypt dynmcznie zme stron ternetow. Przeczyt dy wersz uc n tym, co wesz o HTML-u i CSS zsnw si, co moe o robi.Nstpni pisz, co wdg ibi robi od. Jli n msz pwoci, z co

.\

odpowid dy wrs mos gdyw. Jd wirs opisy b.

$(doumen).eady(funon(){

$("buon").lk(funon(){

} );

});

$("h").hde("low");

$("h2").how("fa");

$(" mg"). l de U() ;

Key oue oy et ot, zb to co pe.


42/521

s

Rozwizanie

$(doumen).eady(funon(){

onisy skryp dynamcn minia sron inrno. rcyaj kady si bau na ym o ju i o HTML aan o mo on rob.Napn napz, o dug Cib rob kod. J ni maz pnoi, o robi danyirz moz zgadya. Oo naz rozzan.

Key ent strny es w rb t pne

$("buon").lk(funon(){

$("h").hde("low");

$("h2").how("fa");

Key stane n wny pys, rb t:

Ne wsyse eeen pw/ nn e strny.

Ne wsyse eeen 2 syb

} );

} );

$(" mg"). l de U() ;

Dobe pytae To wszystko

pzypomina troch czay, prawa1

Srzmy a stron WWW z persektywy

przegdarki. Skupmy si zwaszza na tym

ak Query moe z pzegldarkizmieia sr.

zaczynamyz jquery

Spojrzenie do wntrza przegldarki


43/521

43jeste tutaj

p p g

Nadszed czas, aby odcign zason i zobaczy, co naprawd dzieje si w tle strony,kiedy wywietla j przegldarka. Twoja przegldarka korzysta z Obiektowego Modelu

Dokumentu HTML (Document Object Model, czyli DOM), aby z prostych znacznikwHTML i kodu CSS zbudowa stron wypenion tekstem, obrazami, filmami i ca twspania zawartoci, ktr tak uwielbiamy oglda.

index.html

2

1

oknie roboczym.

3

4

index.html Wersja DOMstrony

Oknoroboczetogwneoknoprzegldarki.

Towszystkodziejesiwprzegldarce.


Wersja DOMstrony

koci drzewa DOM

Ukryta struktura strony


44/521

44 Rozdzia 1.

Od lat DOM pomaga jzykom HTML, CSS i JavaScript w skuteczniejszejwsppracy. Udostpnia on ustandaryzowany szkielet, ktrego uywaj nowoczesne

przegldarki w celu efektywniejszego przegldania stron. Wiele osb uwaa, eDOM jest zbudowany jak drzewo: makorzeorazgaziezwzamina kocach.Alternatywnie moesz myle o nim jak o zdjciu rentgenowskim pokazujcymwewntrzn budow strony.

Zdjcie rentgenowskie mwi lekarzowi, co si dzieje w ukrytejstrukturze ciaa. Podobnie jak rentgen, drzewo DOM pokazujestruktur kryjc si za stron internetow, jednak w przeciwiestwiedo przewietlenia drzewo DOM jest wykorzystywane przez JavaScripti jQuery dozmieniania strukturystrony.

html

head body

Znacznikjest

korzeniemdokumentu.

title div ul

Koci DOM

Twoje koci

li li lip img

DrzewoDOM

nie

sprowadzasi

tylko

doelementw.

To

swzytek

stowe.

KadaczdrzewaDOMnazywanajestwzem.

Wszystko,coodnosisidoznacznika,jestwzemelementu.

Kopaluchaczy siz kocistopy

Ko stopyczy siz kocikostki

Ko kostkiczy siz kocinogi

zaczynamyz jquery

Dziki jQuery drzewo DOM nie jest takie straszne


45/521

45jeste tutaj

Drzewo DOM moe si wydawa skomplikowane i straszne, ale szczliwie dla nasjQuery sprawia, e jest ono proste. Nie zapominaj, e jQuery to JavaScript, ale w wydaniu

o wiele bardziej przyjaznym. Jeli chcesz sprawowa kontrol nad drzewem DOM, jQueryw znacznym stopniu Ci to uatwi. Zamy na przykad, e chcemy zmieni HTMLwewntrzjednego tylkoelementu akapitu na naszej stronie.

Jedn z mocnych stron jQuery jest moliwo pracy z drzewem DOM bez potrzebyzagbiania si w szczegy na jego temat. Gdzie tam w gbi ca cik prac

wykonuje JavaScript. W ksice tej nauczysz si, jak korzysta z JavaScriptu i jQueryrazem. W rozdziale 6.dowiemy si czego wicej na temat ich zwizku, a po drodzeudoskonalimy nasze umiejtnoci posugiwania si jzykiem JavaScript. Na razie jednak,kiedy zdarzy si potrzeba pracy z drzewem DOM, bdziemy korzysta z jQuery.

document.getElementsByTagName("p")

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

}

Sposb z surowym kodem JavaScript Sposb z jQuery

jQuerykorzystazsilnika

selektorowego,coznaczy,e

moeszokrelarneelementyza

pomocselektorw,takjakwCSS.

Rozmawiamzdokumentem

(czylizwielkimDwDOM

).Zapelementakapitu.

ZamieHTMLtegoelementunato,coznajdujesimidz

ynawiasami.

Podaj miwszystkieelementyznazw

znacznikap.

Podajmielementzerowy. SkonfigurujHTML

wewntrztego

elementu......ebyzrobicotakiego.

Wemy jQuery na jazd prbn po DOMowicach, dobrze?

Albo zamy, e chcemy zmieni HTML wewntrzpiciuelementw akapitu na naszej stronie.

Wykonajptldlatylu

elementw,ilechczmieni.

PoniewajQuerykorzystazselektorwCSS,moemytowyrazitaksamojak

powyej.

Podajmielement,

ktrywaniemamy

wptli.

kod gotowy do wysmaenia

Wprowad w edytorze tekstowym nastpujcy kod. Zapisz go, otwrz w swojejKodgotowy do


46/521

46 Rozdzia 1.

jQuery przybywa do DOMowic #change_me { position: absolute; top: 100px;

#move_up #move_down #color #disappear { padding: 5px;} Do gry

$(document).ready(function() { $("#move_up").click( function() { $("#change_me").animate({top:30},200); });//koniec move_up

$("#move_down").click( function() { $("#change_me").animate({top:500},2000); });//koniec move_down $("#color").click( function() { $("#change_me").css("color", "purple"); });//koniec color $("#disappear").click( function() { $("#change_me").toggle("slow"); });//koniec disappear

});//koniec doc ready

p y y p j y p g , j jprzegldarce i wyprbuj kady z przyciskw (skoro ju tu jeste, nie zaszkodzirzuci okiem na kod i sprbowa zgadn, co si w nim dzieje...).

gotowy dowysmaenia

zaczynamyz jquery

Jak todziaa?


47/521

47jeste tutaj

To bardzo sprytne, jak jQuery moe manipulowa stron, prawda? Najwaniejsze do zapamitaniajest to, e kiedy klikae dowolny z przyciskw, aden z fragmentw oryginalnego kodu HTML

ani CSS nie ulega zmianie. Jak wic jQuery to zrobio? Sprawd sam.

Interpreter JavaScriptu nie zmieniaoryginalnych plikw HTML aniCSS. Wprowadza natomiast zmianyw reprezentacji DOM strony znajdujcejsi w pamici przegldarki.

Syszaemkliknicie przycisku.

1


2

3

4

Wersja DOMstrony

To, co widzisz w przegldarce

Dobra, dobra.Po prostu mi powiedz,

co mam zrobi.

Za kulisami

Przesuelement do gry.

funkcje jquery

O co chodzi z tymiznakami dolara w kodzie?


48/521

48 Rozdzia 1.

JeliwstawisztuselektorCSS,jQueryzwrcizbirelementw,ktrepasujdoselektora.Wanieztejopcjibdzieszkorzystanajczciej.

$( )

znakami dolara w kodzie?

jQuery( )

Przedstawiamy funkcj jQuery (oraz skrt)Znak dolara z nawiasami to skrcony zapis funkcjijQuery. Skrt tenoszczdza nam pisania jQuery()za kadym razem, kiedy chcemy

wywoa tak funkcj. Funkcja jQuery jest te czsto nazywanawrapperemjQuery.

Znak dolara symbolizuje fors, ktr zgarniesz dziki znajomocijQuery. arty artami, ale w wiecie jQuery znak ten odnosi ogromnesukcesy.

Skrt i pena nazwa wskazuj na to samo: duy blok kodu znany jakojQuery. W ksice tej bdziemy uywa skrtu. Oto trzy rne rzeczy,ktre moesz wstawi do funkcji jQuery:

$( )

TojestfunkcjajQuery,ktrej

caapracasprowadzasi

dochwytaniaelementw

umieszczanychprzezCiebie

midzynawiasami.

TojestskrtjQuery.ZamiastwpisywaszelitertworzcychwyrazjQuery, wprowadzasztylko

jedenznak.

Jeli wstawisz tucigHTML,bdzieszmg

dodawa wlocieelementydrzewaDOMdostronywprzegldarce.

Tymnaraziesinie

martw.Zajmiemy

sitymwdalszych

rozdziaach.

zaczynamyz jquery

jQuery wybiera elementy tak samo jak CSS


49/521

49jeste tutaj

Wiesz ju o jQuery wicej, ni zdajesz sobie z tego spraw. Gwnym sposobemna robienie rnych rzeczy w jQuery jest korzystanie z selektorw tych samych

selektorw, ktrych uywasz w CSS. Nie przejmuj si, jeli selektory CSS sprawiajCi troch problemw. Oto szybkie przypomnienie:

Tojestselektorelementu(zwanytakeselektoremznacznika).Wybieraonwszystkieelementyh1 wdokumencieHTML.

h1 {text-align: left;}

.my_class {position: absolute;

}

TowszystkosreguyCSS. Selektor klasy pozwala

nawybrgrupyelementw.

TojestwaciwoCSS... ...oraz wartotejwaciwoci.

KlasaCSS

zawszezaczyna

siodkropki.

#my_id {color: #3300FF;

}

Tutaj mamyselektor identyfikatora.IdentyfikatoraCSS naley uywawtedy,gdychcesi wybra jedeni tylkojedenelement.

IdentyfikatorCSSzawszezaczynasiznakiemhash.

miej swj styl

Stylu, przedstawiam ci skrypt


50/521

50 Rozdzia 1.

SelektorelementujQuery

Metoda

Metoda

$("h1").hide();

$(".my_class").slideUp();

$("#my_id").fadeOut();

Metoda

Wspaniaa cecha jQuery polega na tym, e uywa on tych samych selektorw, z ktrychkorzystamy, aby nadawa stronie styl albomanipulowa elementamistrony.

Selektorelementu

h1 {text-align: left;

}

.my_class {position: absolute;

}

#my_id {color: #3300FF;

};

SelektoridentyfikatorajQuery

Selektorklasy

Selektor identyfikatora

Selektor CSS Selektor jQuery

Ukrywawszystkieelementyh1nastronie.

Przesuwadogry

wszystkieelementy,

ktrenaledoklasy

CSSmy_class.

AtainstrukcjajQuery

stopniowowygaszawszystkieelementy

oidentyfikatorzeCSS

my_id,astansiniewidoczne.

Selektor klasyjQuery

Selektory CSS wybieraj elementy, abymona byo nada im styl. Selektory jQuerywybieraj elementy, aby mona byo nada imzachowanie.

Osignieszwicej, czcselektory

imetodywsposbopisany

wrozdziale2.i wdalszych

czciachtejksiki.

zaczynamyz jquery

Selektory jQuery do usug


51/521

51jeste tutaj

img{

float:left; height:350px; text-align:center; border: solid #000 5px;}

$ ("img")

img

" "

$ ( )

Wtymprzykadziemamyelementimg,

alerwniedobrze

moglibymyumiecitutajinnyelement.

Selektorymajpostaacuchwtekstowych,azatemmusimyuycudzysoww.

Abyobjnaszeselektory,uywamy

skrtujQuery.

KwerendowaczjQuerysprowadzasido poproszeniao elementyza porednictwem

JavaScriptu...

Hej, jQuery, moesz mida (czyli zwrci)

wszystkie elementy imgna stronie?

Jak to sugeruje sama nazwa, sedno jQuery tokwerendy. Prosisz o co za pomocselektora, a interpreter JavaScriptu prosi drzewo DOM, eby to dla Ciebie zrobio. Jeli

poprosisz o element z zagniedonymi elementami, jQuery poda Ci take zagniedoneelementy. Rozmy selektor jQuery na czci, aby upewni si, e wiesz, jak dziaa.

Tojestselektor.BibliotekajQuery

zostaazaprojektowanatak,aby

elementybyywybieranetaksamo

jakwCSS. SelektorCSS

Hej, DOM, zwr miwszystkie elementy

img na stronie.

...izwrceniaich(czoddajca).

Zezwracaniemelementwbdziesz

miewicejdoczynienia

wrozdziale4.Narazie

zajmijmysitylkoich

wybieraniem.

Prosz bardzo.

parlez-vous jquery?

jQuery przetumaczony


52/521

52 Rozdzia 1.

$("button").click(function(){}

...chciabym,ebycodlamniezrobi.

...kiedyuytkownikci kliknie...

Hej,elemencie

button...

Aby pokaza Ci, jak atwo mona si nauczy jQuery, rozbilimy na czciskadowe kilka zda w tym jzyku, z ktrych moesz korzysta podczas swoich

podry po DOMowicach.

$("p").hide;

...staciesiniewidzialne.

Nakocukadejinstrukcji

jQueryznajdujesirednik.

Hej,elementyp(czyliakapitu)...

$("#myTop").css({"background-color":"blue"});

...dlakoloruta...

...naniebieski.

...ustawswojreguCSS...

Hej,elemenciezidentyfikatoremmyTop...

Puf!


53/521

53jeste tutaj

Twoje zadanie polega na wcieleniu si w przegldarki zakreleniu elementw HTML (z prawej), na ktre

wpynie polecenie jQuery (z lewej).

robaka.

$("p").hide();

Polecenie jQuery Elementy HTML

* FragmentyPrzemianyFranza Kafki w przekadzie Juliusza Kydryskiego przyp. tum.

$("p#mytext").show();

Nel mezzo del cammin di nostravita

In the middle of this road called"our life"

mi ritrovai per una selva oscura

$("span.Italian").toggle();

bd przegldark rozwizanie

Bd przegldark rozwizanieTwoje zadanie polega na wcieleniu si w przegldark i zakreleniu


54/521

54 Rozdzia 1.

Twoje zadanie polega na wcieleniu si w przegldark i zakreleniuelementw HTML (z prawej), na ktre wpynie instrukcja jQuery

(z lewej). Oto nasze rozwizanie:

robaka.

$("p").hide();

Polecenie jQuery Elementy HTML

$("p#mytext").show();

Nel mezzo del cammin dinostra vita

In the middle of this road called"our life"

mi ritrovai per una selva oscura

$("span.Italian").toggle();

zaczynamyz jquery


55/521

55jeste tutaj

P:Po co wic pisa w jQuery,skoro wszystko sprowadza sido korzystania z JavaScriptu?Czy JavaScript sam w sobie niewystarcza?

O:JavaScript znakomicie nadajesi do wielu rzeczy zwaszczado manipulowania drzewem DOM

ale jest do skomplikowany.Manipulacje drzewem DOM napodstawowym poziomie z capewnoci nie s atwe i towanie dlatego przydaje si jQuery.Pozwala on odsun na bok spor

cz zoonoci zwizanej z pracz drzewem DOM i sprawia, etworzenie efektw jest superatwe.(Biblioteka jQuery zostaa napisanaprzez Johna Resiga; moesz sio nim dowiedzie wicej tutaj:http://ejohn.org/about/).

P:O co chodzi z tymiznakami dolara?

O:To tylko skrt, eby co chwilnie musia pisa jQuery. Kiedyjednak pracujesz z innymi jzykamipo stronie klienta, uywaniejQuery()pozwoli Ci unikakonfliktw nazw.

P:Wczeniej te juwspomniae o pisaniuskryptw po stronie klienta.Dokadnie co to takiego?

O:Programici czsto nazywajprzegldark klientem, poniewapobiera ona dane od serweraWWW. Jzyk skryptowy po stronieklienta to jzyk, ktry potrafidawa przegldarce zakulisowewskazwki, podczas gdy jzykpo stronie serwera wydajepolecenia serwerowi. Dokadniejzajmiemy si tym zagadnieniem

w rozdziaach 8. i 9.

P:Skd si wzi ten cayDOM?

O:Dobre pytanie. Programicii projektanci stron internetowychbyli znueni brakiem zgodnocimidzy przegldarkami

i zdecydowali, e potrzebujstandardu, ktry umoliwibydodawanie zachowa orazinterakcj ze stronami w dowolnejprzegldarce. World Wide WebConsortium (znane te jako W3C)podjo si opracowania standarduwe wsppracy z tymi rozmaitymigrupami. Wicej o tym moesz

dowiedzie si tutaj:http://www.w3.org/DOM/.

P:Kiedy chc pobra jQuery,jest tam wersja produkcyjnai deweloperska. Jaka jestmidzy nimi rnica?

O:Wersja produkcyjna jestzminimalizowana, co znaczy,e usunito z niej ca masniepotrzebnych (biaych) znakw.Zostaa ona zoptymalizowana doszybkiego dziaania w rodowiskuprodukcyjnym, ale troch trudniejzobaczy, co si w niej dzieje.Wersja deweloperska jest adniesformatowana i o wiele bardziej

czytelna. Jest ona przeznaczonadla kadego, kto chciaby sobiepogrzeba w kodzie jQuery, abygo zmieni albo nawet poszerzy(w kocu jest to open source!).

gupie pytaniaNie istniej

jquery przychodzi z pomoc

Twoja pierwsza fucha w jQuery

Wanie dostae prac jako nowy programista aplikacji internetowych w Fundacji
http://ejohn.org/about/http://ejohn.org/about/http://www.w3.org/DOM/http://www.w3.org/DOM/http://www.w3.org/DOM/http://ejohn.org/about/


56/521

56 Rozdzia 1.

Wanie dostae prac jako nowy programista aplikacji internetowych w FundacjiRatowania Zwierzt w Webowicach. Zesp marketingowy chce rozpocz coroczn

kampani zbierania funduszy z now wersj strony Pom naszym kudatymprzyjacioom. Dostae od niego screen z minionego roku razem ze szczegowymiinformacjami, co powinna robi strona.

Jzekzmarketinguchciabywicejinteraktywnoci.

No c, nikt nie chciaby sprawi zawodu marketingowcom ju pierwszegodnia lepiej z nimi nie zadziera! Zobaczmy wic, co my tu mamy...

Potrzebujemy ulepszy stron z poprzedniegoroku. Teraz uytkownik klika przycisk i wyskakuje

rysunek, ale pozostaje on ju na stronie. Chcemy, ebyobrazek pojawi si, kiedy uytkownik kliknie, i eby

znikn, kiedy kliknie jeszcze raz.

Kiedy uytkownikkliknietutaj...

...pokatsekcj

iwysuj,abyzaprezentowakudategoprzyjaciela

nadzi.

Uwaga:Wszystkopowinnoodbywasinatejstronie(niechcemylinkwdo innejstronyHTML).

Zdjcie kudategoprzyjaciela po prostu wyskakuje.Czy moesz zrobi tak, eby

kudacz powoli si wysuwa i jakotak stopniowo nabiera barw?

Ajegoszefowachce

lepszychefektwgraficznych.

zaczynamyz jquery

Zanim wymylisz, jak doda funkcjonalno jQuery do strony, spjrzmy,jak zostay skonfigurowane HTML i CSS. Poniej masz pliki z zeszorocznejkampanii Obok elementw ktre wedug Ciebie bd Ci potrzebne napisz

Zaostrz owek


57/521

57jeste tutaj

kampanii. Obok elementw, ktre wedug Ciebie bd Ci potrzebne, napisz,co trzeba zrobi, aby otrzyma funkcje, jakie chcieliby mie marketingowcy.

Pierwszy element uzupenilimy za Ciebie.

a:link img, a:visited img {

display:none;

}

a:hover img, a:active img {

display:block;

}

a{text-decoration:none;

color: #000;

}

weryfikacja koncepcji jQuery

Ten znacznik odnonika ma ustawione w CSS stany

hover i active. Uytkownik przesuwa mysz nad

cze i pojawia si rysunek.

index.html

my_style.css

zaostrz rozwizanie

Zanim wymylisz, jak doda funkcjonalno jQuery do strony, spjrzmy, jakzostay skonfigurowane HTML i CSS. Poniej masz pliki z zeszorocznej kampanii.Obok elementw, ktre wedug Ciebie bd Ci potrzebne, napisz, co trzeba

Zaostrz owek

Rozwizanie


58/521

58 Rozdzia 1.

zrobi, aby otrzyma funkcje, jakie chcieliby mie marketingowcy. Oto nasze

odpowiedzi nie przejmuj si, jeli Twoje nie s dokadnie takie same:

a:link img, a:visited img {

display:none;

}

a:hover img, a:active img {

display:block;

}

a{text-decoration:none;

color: #000;

}

weryfikacja koncepcji jQuery

Ten znacznik odnonika ma ustawione w CSS stany

hover i active. Uytkownik przesuwa mysz nad

cze i pojawia si rysunek.

index.html

my_style.css

Zdjcie psa kudatego przyjaciela jest

zagniedone wewntrz znacznika odnonika.

Rysunek powinien pokaza si dopiero wtedy,

gdy uytkownik kliknie cze w znaczniku.

Ten selektor CSS zmienia waciwo displayzagniedonego obrazu na none, dziki czemu nie

bdzie on widoczny po pierwszym zaadowaniu

strony.

Kiedy uytkownik przesunie mysz nad znacznik

odnonika albo go kliknie, waciwo display

elementu img zmieni si na block. Rysunek nagle

si pojawi.

zaczynamyz jquery

OK, teraz moemy zabrasi za pisanie kodu w jQuerydla wszystkich funkcjonalnoci,

ktre s nam potrzebne


59/521

59jeste tutaj

Niechtasekcjabdzieaktywna.

Atasekcjaniechzaczynasi

jakoniewidoczna.Nadajmyjej

identyfikatorpicframe.

Moemy, ale sprawy mogyby wymkn si namspod kontroli.Zanim bdziemy mogli uy jQuery w celu uzyskanianiezwykych efektw, jakich chce dzia marketingu, musimyupewni si, e jQuery ma na miejscu wszystko, czego trzeba,aby zadziaaa caa jego magia. Jak ju wiesz, jednym z gwnychzada jQuery jest manipulowanie elementami HTML, a zatempotrzebujemy dobrejstruktury. Aby dosta si do elementu,

jQuery uywa tych samych selektorw co CSS, tak wicpotrzebujemy te dobrze zdefiniowanychstylw.

Zweryfikuj wymagania

Kiedy mylisz o strukturze, zawsze dobrze jest wrci dotego, co prbujesz stworzy. Dzia marketingu chce, ebyrysunek wysuwa si i nabiera kolorw, kiedy ludzie kliknsekcj Poka mi kudatego przyjaciela na dzi. Jakie zmiany

w HTML-u i CSS mog by konieczne?

ktre s nam potrzebne,prawda?

posprztaj w domu

Skonfiguruj swoje pliki HTML i CSSZastanwmy si, co bdziemy musieli skonfigurowa w naszych plikach HTML i CSS, zanim

i j k k l i k i k j jQ O liki jQ d i 1 (j li j Zrb to!


60/521

60 Rozdzia 1.

}

}

napiszemy jakkolwiek instrukcj w jQuery. Otwrz pliki jQuery z rozdziau 1.(jeli jeszcze

tego nie zrobie, powr do kocowej czci podrozdziau Jak korzysta z tej ksikii zapoznaj si ze szczegowymi informacjami). Odszukaj podkatalogBeginw folderzeR01.Nastpnie dodaj do plikw wyrniony pogrubion czcionk kod, co wida poniej.

Zrb to!

Tutajzrobimyaktywnsekcj,astylnadamyjejwplikuCSSponiej,

dzikiczemubdzieonamietakisamwygldidziaaniejaksekcjapicframe.

Tutajjestsekcjapicframe,ktrabdziesiwysuwa,abypokazazdjciekudategoprzyjaciela.

Zdjciefurry_friend.jpg

jestzagniedonewewntrzsekcji

picframe.

Nadaj selektorowipicframewartodisplay:none,abypozaadowaniustronyniebyonwywietlany.

TutajsekcjiclickMenadajemy

takistyl,abyjejwygld

idziaaniebyytakiesame

jaksekcjipicframe.

index.html

my_style.css

zaczynamyz jquery

jQuery w zblieniu


61/521

61jeste tutaj

Teraz, kiedy skonfigurowae ju pliki HTML i CSS, przejdmy do

kodu, ktry siedzi sobie midzy znacznikami .

$(document).ready(function(){

$("#clickMe").click(function() {

{

});

});

Kropkaoddzielaczzselektoremodczcizmetod.

redniktoznakkoca.Tutaj koczyonnaszinstrukcjjQueryclick.

OtonaszidentyfikatorselektoradlasekcjiclickMe.

PrzypisaniezdarzeniaklikniciadoprzyciskuzidentyfikatoremclickMe.Tenkodpowoduje,eprzyciskbdzieaktywny.

Kod, ktryopisuje,comasiwydarzy,kiedyzostaniekliknityprzycisk,trafi

midzytenawiasyklamrowe(jestonnazywanytakeblokiemkodu).

DOM

...chc,ebycodlamniezrobi

.Hej,DOM... ...jakjubdziesz

gotwizaadowany...

Tenrednikkoczyfunkcj

jQueryready.

Jak tylko bd mg,zaczn wykonywa kodznajdujcy si midzynawiasami klamrowymi!

Znajduje si tu mnstwo potencjalnie nowychterminw.

Wkrtce bardziej szczegowo poznamy zdarzenia, metodyi funkcje.

Spokoj

nie

dodaj nieco wdziku do swoichwysuni

Ale nasza stronanadal nie robi nic

nowego!


62/521

62 Rozdzia 1.

Masz racj. Nasz HTML i CSS s gotowe;teraz potrzebujemy troch jQuery.Chcemy, eby sekcja picframewysuna si i nabraabarw. Na szczcie ludzie od jQuery utworzyliefekty,ktre pozwalaj nam kontrolowa obie te wizualne

akcje:przesuniciaorazwygaszenia. Efektom w jQuerypowicilimy cay rozdzia w dalszej czci tejksiki (rozdzia 5.), tak wic nie przejmuj si teraz

wszystkimi szczegami. Zacznijmy po prostu odprzesuwania i nadawania kolorw.

$("div").slideToggle();

MetodaslideUpzmieniawaciwoheightelementu,aosignieonawarto0,poczymgoukrywa.

MetodaslideTogglemwi:Jeli

jestnagrze,wysuwd,

ajelinadole,wysudogry.

Wysu si...Pierwsz rzecz, jak zaimplementujemy, bdziewysunicie si i ukazanie rysunku, co jest jednymz efektw, ktre chciaby zobaczy szef marketingowcw.Z wysuwaniem mona sobie poradzi na trzy sposoby:

$("div").slideUp(); $("div").slideDown();

MetodaslideDownzmienia

waciwoheightelementu

od0adowartoci

ustawionejwstyluCSS.

zaczynamyz jquery

Niechaj blado bdzie z Tob

Chcielibymy te, eby rysunek wyoni si stopniowo, zmieniajc si odzupenie niewidzialnego a do w peni widocznego Tu te istnieje metoda


63/521

63jeste tutaj

$("img").fadeIn();

Chcemy,ebywanie tostaosinieprzezroczyste; wtym

przypadkujest torysunek.

Kiedyelementnabierabarw,

przechodziodniewidocznego(przezroczystego)dowidzialnego

(nieprzejrzystego).

zupenie niewidzialnego a do w peni widocznego. Tu te istnieje metoda,

ktra to realizuje nosi ona nazw fade. Metody fades podobne do metoduywanych przy wysuwaniu; masz do dyspozycji fadeIn, fadeOut, fadeToi fadeToggle. Na razie uyjemy metody fadeIn, ktra daje kontrol nadwaciwociami nieprzejrzystoci i przezroczystoci elementw HTML.

Jak mylisz, ile instrukcji w jQuery bdzie potrzebnych, aby zrealizowa efekt, o ktry nam chodzi?

Sprbuj zapisa te instrukcje na kawaku papieru. Jeli nie masz co do nich pewnoci, najpierwnapisz je po polsku, a potem sprbuj przestawi swj mzg na mylenie w jQuery.

Moeszokreli,jakszybkonabierane

skolory,umieszczajcmidzy

nawiasami warto,zwyklewyraan

wmilisekundach(ms).

WYSILSZARE KOMRKI

hej, to byoatwe

To wszystko?To zdumiewajce, ale potrzebujesz napisa tylko dwa wierszekoduw jQuery, aby nasze efekty zadziaay. Chyba zaczynasz rozumie,


64/521

64 Rozdzia 1.

jQ y, y y y y y ,

dlaczego tyle osb lubi jQuery. Do pliku index.htmldodajwyrnione pogrubion czcionk wiersze i gotowe. Zrb to!

$(document).ready(function(){

$("#clickMe").click(function() {

});

});

WjQuerywanejesttakieustaleniekolejnoci efektw,ebynawzajemsobienieprzeszkadzay. Bdziemysitymzajmowawnaszejksiceprzyrnychokazjach.

Midzynawiasamidodalimycoekstra,abyefektbyjeszczelepszy.

Przyjrzymysitymsposobombliejwrozdziale5.

Najpierwwywoamy

efektnabieraniabarw.

Documents

Benedetti R. - JQuery. Rusz Głową