jQuery 1.3. Wprowadzenie Autorzy: Jonathan Chaffer, Karl Swedberg, John Resig T艂umaczenie: Anna Trojan ISBN: 978-83-246-2641-0 Tytu艂 orygina艂u: Learning jQuery 1.3 Format: 170答230, stron: 424 J臋zyk JavaScript po blisko pi臋tnastu latach na rynku dalej ma si臋 dobrze. Interaktywne strony, interesuj膮ce efekty oraz technologia AJAX sprawiaj膮, 偶e wci膮偶 jest bardzo atrakcyjnym narz臋dziem, a aplikacje internetowe z ka偶dym rokiem coraz bardziej zaczynaj膮 przypomina膰 te znane z codziennej pracy. Biblioteka jQuery pozwala na jeszcze wi臋cej przy zdecydowanie mniejszym nak艂adzie pracy! Niemo偶liwe? Przekonaj si臋 sam! W trakcie lektury tej ksi膮偶ki poznasz tajniki biblioteki jQuery oraz atuty, dzi臋ki kt贸rym zyska艂a ona tak膮 rzesz臋 fan贸w. Autorzy omawiaj膮 wszystkie zagadnienia zwi膮zane z t膮 bibliotek膮. Na samym pocz膮tku nauczysz si臋 korzysta膰 z selektor贸w oraz zdarze艅, aby nast臋pnie przejS膰 do zaawansowanych temat贸w zwi膮zanych z AJAX-em oraz edycj膮 drzewa DOM. Rozdzia艂 poSwi臋cony efektom specjalnym b臋dzie jednym z tych, kt贸re pozwol膮 Ci wykrzesa膰 jeszcze wi臋cej porywaj膮cych efekt贸w z Twojego kodu. OlSniewaj膮ce galerie, pokazy slajd贸w, interaktywne formularze s膮 w zasi臋gu Twoich mo偶liwoSci! Pod koniec ksi膮偶ki dowiesz si臋, jak wykorzystywa膰 dodatki oraz tworzy膰 w艂asne. Trzymasz w r臋kach d艂ugo oczekiwan膮 na polskim rynku pozycj臋, poSwi臋con膮 niezwyk艂ej bibliotece! " Przeznaczenie biblioteki jQuery " Wykorzystanie selektor贸w " Wykorzystanie mechanizmu zdarze艅 " Zdarzenia z艂o偶one " U偶ycie efekt贸w specjalnych " Modyfikowanie arkuszy CSS w locie " Edycja drzewa DOM " Metody na 艂atwiejsze wykorzystanie technologii AJAX " Operacje na tabelach " Praca z formularzami " Instalowanie oraz wykorzystanie dodatk贸w " Tworzenie w艂asnych dodatk贸w dla jQuery Uzyskaj jeszcze wi臋cej z j臋zyka JavaScript! Spis tre ci Przedmowa 11 O autorach 13 O korektorach 15 Wprowadzenie 17 Rozdzia 1. Pocz tki 23 Co robi jQuery 23 Dlaczego jQuery dzia a dobrze 25 Historia projektu jQuery 26 Nasza pierwsza strona z jQuery 27 Pobranie jQuery 27 Utworzenie dokumentu HTML 27 Dodanie jQuery 30 Gotowy produkt 33 Podsumowanie 33 Rozdzia 2. Selektory 35 DOM 35 Funkcja fabryczna $() 36 Selektory CSS 37 Stylizacja poziom贸w zagnie d enia listy 38 Selektory atrybut贸w 40 Stylizacja odno nik贸w 40 W asne selektory 42 Stylizacja co drugiego wiersza 42 Selektory formularzy 45 Spis tre ci Metody przechodzenia drzewa DOM 45 Stylizacja wybranych kom贸rek 46 czenie w a cuch 48 Dost p do element贸w DOM 48 Podsumowanie 49 Rozdzia 3. Zdarzenia 51 Wykonywanie zada w momencie za adowania strony 51 Czas wykonania kodu 51 Wiele skrypt贸w na jednej stronie 52 Skr贸ty poprawiaj ce zwi z o kodu 53 Wsp贸 istnienie z innymi bibliotekami 54 Proste zdarzenia 55 Prosty prze cznik styl贸w 55 Skr贸towa obs uga zdarze 63 Zdarzenia z o one 64 Pokazywanie i ukrywanie zaawansowanych opcji 64 Wyr贸 nianie element贸w, kt贸re mo na klikn 66 Podr贸 zdarzenia 67 Efekty uboczne propagacji zdarze 69 Zmiana podr贸 y obiekt zdarzenia 70 Element docelowy zdarzenia 71 Zatrzymanie propagacji zdarze 71 Dzia ania domy lne 72 Delegacja zdarze 72 Usuwanie programu obs ugi zdarze 75 Przestrzenie nazw zdarze 75 Ponowne dowi zanie zdarzenia 76 Symulacja interakcji z u ytkownikiem 78 Zdarzenia klawiatury 79 Podsumowanie 81 Rozdzia 4. Efekty 83 Modyfikacja CSS w locie 83 Proste ukrywanie i pokazywanie 87 Efekty a szybko 90 Przyspieszanie 90 Pojawianie si i znikanie 91 Efekty z o one 91 Tworzenie w asnych animacji 93 Prze czanie znikania 94 Animacja z u yciem wielu w a ciwo ci 94 Efekty jednoczesne a kolejkowane 97 Praca z jednym zbiorem element贸w 97 Praca z wieloma zbiorami element贸w 100 Funkcje zwrotne 102 W skr贸cie 104 Podsumowanie 104 4 Spis tre ci Rozdzia 5. Edycja drzewa DOM 105 Edycja atrybut贸w 105 Atrybuty inne od klas 106 Jeszcze raz funkcja fabryczna $() 108 Wstawianie nowych element贸w 110 Przenoszenie element贸w 111 Oznaczenie, ponumerowanie i utworzenie odno nika do kontekstu 115 Dodanie przypis贸w dolnych 117 Opakowanie element贸w 119 Kopiowanie element贸w 120 Klonowanie ze zdarzeniami 121 Klonowanie cytat贸w wyrzuconych 121 Nieco o CSS 122 Powr贸t do kodu 122 Upi kszenie cytat贸w wyrzuconych 125 Metody edycji drzewa DOM w skr贸cie 126 Podsumowanie 128 Rozdzia 6. Ajax 129 adowanie danych na danie 130 Dodawanie kodu HTML 131 Praca z obiektami JavaScriptu 134 adowanie dokumentu XML 141 Wyb贸r formatu danych 144 Przekazywanie danych do serwera 145 Wykonanie dania GET 146 Wykonanie dania POST 149 Serializacja formularza 150 ledzenie dania 152 Ajax a zdarzenia 155 Ograniczenia w zakresie bezpiecze stwa 156 Wykorzystanie JSONP dla danych zewn trznych 157 Dodatkowe opcje 158 Niskopoziomowa metoda Ajaksa 159 Modyfikacja opcji domy lnych 159 adowanie cz ci strony HTML 160 Podsumowanie 162 Rozdzia 7. Przetwarzanie tabel 165 Sortowanie i podzia na strony 166 Sortowanie po stronie serwera 166 Sortowanie za pomoc JavaScriptu 167 Paginacja po stronie serwera 183 Paginacja w JavaScripcie 185 Gotowy kod 190 5 Spis tre ci Modyfikacja wygl du tabeli 192 Wyr贸 nianie wierszy 192 Podpowiedzi 199 Zwijanie i rozwijanie cz ci tabeli 205 Filtrowanie 207 Gotowy kod 212 Podsumowanie 215 Rozdzia 8. Formularze i ich funkcje 217 Ulepszenie prostego formularza 217 Progresywne ulepszanie stylu formularzy 218 Pola wy wietlane warunkowo 224 Sprawdzanie poprawno ci formularza 227 Edycja p贸l wyboru 234 Gotowy kod 237 Zwi z e formularze 239 Tekst pojemnika na pola formularza 239 Autouzupe nianie oparte na Ajaksie 242 Gotowy kod 250 Praca z danymi liczbowymi formularza 253 Struktura tabeli koszyka z zakupami 253 Odrzucanie danych nieliczbowych 256 Obliczenia arytmetyczne 256 Usuwanie element贸w 263 Edycja informacji o wysy ce 267 Gotowy kod 270 Podsumowanie 272 Rozdzia 9. Rotacja i przesuwanie element贸w 273 Rotacja wiadomo ci 274 Konfiguracja strony 274 Pobieranie wiadomo ci z kana u RSS 276 Konfiguracja rotacji element贸w 279 Funkcja rotacji wiadomo ci 280 Pauza po najechaniu mysz 282 Pobieranie wiadomo ci RSS z innej domeny 285 Gradientowy efekt blakni cia 286 Gotowy kod 289 Karuzela obrazk贸w 290 Konfiguracja strony 291 Przesuwanie obrazk贸w po klikni ciu 294 Powi kszanie obrazk贸w 301 Gotowy kod 313 Podsumowanie 316 6 Spis tre ci Rozdzia 10. Wykorzystywanie dodatk贸w 317 Znalezienie dodatku i uzyskanie pomocy 317 Jak korzysta z dodatku 318 Dodatek Form 319 Wskaz贸wki i sztuczki 320 Biblioteka dodatk贸w jQuery UI 321 Efekty 322 Komponenty interakcji 324 Wid ety 326 ThemeRoller w jQuery UI 329 Inne polecane dodatki 330 Formularze 330 Tabele 332 Obrazki 334 Ramki z obrazkami i okna dialogowe 335 Wykresy 338 Zdarzenia 339 Podsumowanie 340 Rozdzia 11. Tworzenie dodatk贸w 341 Dodawanie nowych funkcji globalnych 341 Dodanie wi kszej liczby funkcji 342 Jaki to ma sens? 343 Tworzenie nowej metody pomocniczej 344 Dodawanie metod obiektu jQuery 345 Kontekst metody obiektu 346 czenie metod w a cuchy 348 Metody przechodzenia drzewa DOM 349 Dodawanie nowych metod skr贸t贸w 353 Parametry metod 356 Proste parametry 358 Tablice asocjacyjne parametr贸w 359 Domy lne warto ci parametr贸w 360 Funkcje zwrotne 361 Dostosowywanie warto ci domy lnych 362 Dodanie wyra enia selektora 364 Podzielenie si dodatkiem ze wiatem 367 Konwencje nazewnictwa 367 U ycie aliasu $ 367 Interfejsy metod 368 Styl dokumentacji 368 Podsumowanie 368 Dodatek A r贸d a internetowe 369 Dokumentacja jQuery 369 Wiki jQuery 369 jQuery API 369 7 Spis tre ci Przegl darka jQuery API 370 Visual jQuery 370 Przegl darka jQuery API w formacie Adobe AIR 370 Informacje o JavaScripcie 370 Mozilla developer center 370 Dev.opera 370 MSDN JScript Reference 371 Quirksmode 371 JavaScript Toolbox 371 Kompresory kodu w JavaScripcie 371 YUI Compressor 371 JSMin 372 Pretty printer 372 Informacje o (X)HTML 372 Strona hipertekstowego j zyka znacznik贸w W3C 372 Informacje o CSS 372 Strona kaskadowych arkuszy styl贸w W3C 373 ci gawka CSS Mezzoblue 373 Position is everything 373 Przydatne blogi 373 Blog jQuery 373 Learning jQuery 374 Ajaxian 374 John Resig 374 JavaScript 374 Robert s talk 374 Web standards with imagination 374 Snook 375 Strona Matta Snidera o JavaScripcie 375 I can t 375 DOM scripting 375 As days pass by 375 A List Apart 375 Platformy do programowania internetowego korzystaj ce z jQuery 376 Dodatek B Narz dzia programistyczne 377 Narz dzia dla przegl darki Firefox 377 Firebug 377 Pasek narz dzi Web Developer 378 Venkman 378 Regular Expressions Tester 378 Narz dzia dla przegl darki Internet Explorer 378 Microsoft Internet Explorer Developer Toolbar 379 Microsoft Visual Web Developer 379 DebugBar 379 Drip 379 8 Spis tre ci Narz dzia dla przegl darki Safari 380 Programowanie Menu 380 Inspektor www 380 Narz dzia dla przegl darki Opera 380 Dragonfly 380 Inne narz dzia 381 Firebug Lite 381 NitobiBug 381 Pakiet jQuery dla edytora TextMate 381 Charles 381 Fiddler 382 Aptana 382 Dodatek C Domkni cia w JavaScripcie 383 Funkcje wewn trzne 384 Wielka ucieczka 385 Zakresy zmiennych 386 Interakcje mi dzy domkni ciami 388 Domkni cia w jQuery 389 Argumenty $(document).ready() 389 Programy obs ugi zdarze 390 Zagro enia wynikaj ce z wycieku pami ci 392 Przypadkowe p tle odwo ania 393 Problem z wyciekiem pami ci w przegl darce Internet Explorer 394 Dobra wiadomo 395 Podsumowanie 395 Dodatek D Podr czne informacje 397 Wyra enia selektor贸w 397 Metody przechodzenia drzewa DOM 399 Metody zdarze 400 Metody efekt贸w 403 Metody edycji drzewa DOM 404 Metody Ajaksa 406 Pozosta e metody 407 Skorowidz 409 9 1 Pocz tki Dzisiejszy Internet to dynamiczne rodowisko, a jego u ytkownicy wysoko stawiaj poprzeczk , zar贸wno je li chodzi o styl, jak i o funkcje stron internetowych. By m贸c tworzy interesuj ce i interaktywne witryny, programi ci si gaj po biblioteki JavaScriptu, takie jak jQuery, kt贸re pomagaj im automatyzowa cz sto wykonywane zadania i upraszcza te bardziej skompliko- wane. Jednym z powod贸w, dla kt贸rych biblioteka jQuery cieszy si takim powodzeniem, jest to, e jest w stanie wspom贸c programist w wielu r贸 nych zadaniach. W a ciwie trudno jest zadecydowa , od czego zacz , poniewa jQuery ma tyle r贸 nych funkcji. Mimo to struktura biblioteki jest bardzo sp贸jna i symetryczna wi kszo jej koncepcji za- po yczono z projekt贸w takich, jak HTML i kaskadowe arkusze styl贸w (CSS). Sama struktura biblioteki u atwia zacz cie pracy projektantom z niewielkim do wiadczeniem programistycznym, poniewa wielu tw贸rc贸w stron internetowych ma o wiele wi ksze do wiadczenie z HTML i CSS ni z JavaScriptem. Ju w pierwszym rozdziale ksi ki napiszemy zreszt w jQuery dzia aj cy program sk adaj cy si z trzech wierszy kodu. Z drugiej strony r贸wnie do wiad- czeni programi ci skorzystaj na tej konceptualnej sp贸jno ci, o czym przekonamy si w dal- szych, bardziej zaawansowanych rozdzia ach. Przyjrzyjmy si zatem temu, co mo e dla nas zrobi jQuery. Co robi jQuery Biblioteka jQuery udost pnia og贸lny poziom abstrakcji s u cy do tworzenia skrypt贸w na potrze- by cz sto spotykanych zada , dzi ki czemu przydatna jest w niemal ka dej sytuacji wymaga- j cej napisania skryptu. Rozszerzalna natura biblioteki oznacza, e nigdy nie uda oby nam si opisa wszystkich jej mo liwych zastosowa i funkcji w jednej ksi ce, poniewa dodatki ci - gle s tworzone, dok adaj c nowe mo liwo ci. Najwa niejsze funkcje j dra biblioteki s jed- nak nast puj ce: jQuery 1.3. Wprowadzenie Uzyskanie dost pu do element贸w dokumentu. Bez biblioteki JavaScriptu przej cie drzewa DOM (ang. Document Object Model) i lokalizacja wybranych cz ci struktury dokumentu HTML wymaga napisania wielu wierszy kodu. jQuery oferuje rozbudowany i wydajny mechanizm selektor贸w s u cy do pobierania fragmentu dokumentu, kt贸ry ma by przejrzany lub zmodyfikowany. Modyfikowanie wygl du strony internetowej. CSS oferuje metod wp ywania na spos贸b wy wietlania dokumentu, jednak na niewiele si przydaje, kiedy nie wszystkie przegl darki obs uguj te same standardy. Dzi ki jQuery programi ci s w stanie wype ni t luk , polegaj c na obs udze tych samych standard贸w we wszystkich przegl darkach. Dodatkowo jQuery jest w stanie modyfikowa klasy lub pojedyncze w a ciwo ci stylu zastosowane do cz ci dokumentu nawet po wygenerowaniu strony. Zmiana zawarto ci dokumentu. jQuery nie ogranicza si jednak do zmian czysto kosmetycznych jest w stanie zmodyfikowa zawarto samego dokumentu za pomoc kilku naci ni klawiatury. Mo na zmienia tekst, wstawia lub podmienia obrazki, zmienia kolejno list lub przepisa b d rozszerzy ca struktur HTML wszystko za pomoc jednego, atwego w u yciu API (ang. Application Programming Interface). Reagowanie na interakcj z u ytkownikiem. Nawet najbardziej wyszukane dzia ania nie s szczeg贸lnie przydatne, je li nie mo emy kontrolowa tego, kiedy nast puj . Biblioteka jQuery oferuje elegancki spos贸b przechwytywania r贸 nego rodzaju zdarze takich jak klikni cie odno nika przez u ytkownika bez konieczno ci za miecania kodu HTML programami obs ugi zdarze . Jednocze nie API s u ce do obs ugi zdarze likwiduje niezgodno ci mi dzy przegl darkami, kt贸re s dla programist贸w internetowych prawdziw katorg . Animacja zmian wprowadzanych do dokumentu. By efektywnie implementowa tego typu dzia ania interaktywne, projektant musi da u ytkownikowi jakie wizualne informacje zwrotne. Biblioteka jQuery umo liwia to, udost pniaj c wiele efekt贸w (takich jak blakni cie czy animowane przej cia), a tak e s u c jako narz dzie do tworzenia nowych efekt贸w. Pobieranie informacji z serwera bez od wie ania strony. Ten wzorzec kodu znany jest jako Ajax (od Asynchronous JavaScript and XML) i wspomaga programist贸w w tworzeniu bogatych w mo liwo ci oraz reaguj cych na dzia anie u ytkownika stron. Biblioteka jQuery likwiduje z tego procesu cz zwi zan z r贸 nicami mi dzy poszczeg贸lnymi przegl darkami, pozwalaj c programistom na skupienie si na funkcjonalno ci po stronie serwera. Uproszczenie cz sto spotykanych zada wykonywanych za pomoc JavaScriptu. Opr贸cz wszystkich mo liwo ci jQuery zwi zanych z obs ug dokument贸w biblioteka ta udost pnia tak e ulepszenia dla podstawowych konstrukcji j zyka JavaScript, takich jak iteracja i modyfikacja tablic. 24 Rozdzia 1. " Pocz tki Dlaczego jQuery dzia a dobrze Wraz ze wzrostem zainteresowania dynamicznym HTML pojawi o si mn贸stwo bibliotek i plat- form opartych na JavaScripcie. Niekt贸re z nich s wyspecjalizowane i skupiaj si tylko na jednym b d dw贸ch z wymienionych wy ej zada . Inne staraj si skatalogowa wszystkie mo liwe dzia ania i animacje, udost pniaj c je jako gotowy pakiet. By zachowa szerok gam mo li- wo ci przedstawionych powy ej, ale te niewielki rozmiar, jQuery przyjmuje kilka strategii: Wykorzystanie znajomo ci CSS. Opieraj c mechanizm lokalizacji element贸w strony na selektorach CSS, jQuery dziedziczy zwi z y, a jednocze nie czytelny spos贸b wyra ania struktury dokumentu. Biblioteka jQuery staje si punktem wyj cia dla projektant贸w, kt贸rzy chc dodawa do swych stron r贸 norodne dzia ania, gdy znajomo sk adni CSS jest podstaw zawodowego tworzenia witryn internetowych. Obs uga dodatk贸w. W celu unikni cia prze adowania funkcjami jQuery przenosi specjalne zastosowania do dodatk贸w. Metoda tworzenia nowych dodatk贸w jest prosta i dobrze udokumentowana, co pobudzi o rozw贸j du ej liczby pomys owych i przydatnych modu 贸w. Nawet w podstawowym pliku jQuery wi kszo opcji wewn trznie korzysta z architektury dodatk贸w, dzi ki czemu mo na je w miar potrzeby usun , uzyskuj c jeszcze mniejsz bibliotek . Abstrakcja niezgodno ci mi dzy przegl darkami. Tragedi programist贸w stron internetowych jest to, e ka da przegl darka ma sw贸j w asny zbi贸r odchyle od opublikowanych standard贸w. Znaczna cz procesu tworzenia ka dej aplikacji internetowej przypada na obs ug tych samych funkcji w inny spos贸b dla ka dej z platform. Cho ci gle ewoluuj cy wiat przegl darek sprawia, e w przypadku bardziej zaawansowanych funkcji stworzenie podstaw kodu ca kowicie neutralnych dla przegl darki jest niemo liwe, jQuery dodaje poziom abstrakcji normalizuj cy cz sto wykonywane zadania, zmniejszaj cy wielko kodu i znacznie go upraszczaj cy. Praca ze zbiorami. Kiedy nakazujemy jQuery odnalezienie wszystkich element贸w klasy collapsible, a nast pnie ukrycie ich, nie ma potrzeby wykonywania p tli po ka dym zwracanym elemencie. Zamiast tego metody takie jak .hide() zaprojektowano w taki spos贸b, by automatycznie dzia a y na zbiorze obiekt贸w, a nie tylko na pojedynczych obiektach. Technika ta, zwana niejawn iteracj , oznacza, e wiele konstrukcji p tli staje si zb dnych, co znacznie skraca kod. Zezwolenie na wiele dzia a w jednym wierszu. By unikn nadmiernego korzystania z tymczasowych zmiennych czy bezsensownego powtarzania, jQuery w wi kszo ci metod wykorzystuje wzorzec programowania zwany a cuchem. Oznacza to, e wynikiem wi kszo ci dzia a na obiekcie jest sam obiekt, gotowy do zastosowania na nim kolejnych dzia a . Strategie te pozwalaj na utrzymanie niewielkiego rozmiaru pakietu jQuery po skompre- sowaniu jest to poni ej 20 KB udost pniaj c jednocze nie techniki umo liwiaj ce zacho- wanie zwi z o ci w asnego kodu korzystaj cego z biblioteki. 25 jQuery 1.3. Wprowadzenie Elegancja biblioteki po cz ci jest cech samego projektu jQuery, a po cz ci efektem proce- su ewolucyjnego pobudzanego przez aktywn spo eczno , kt贸ra wytworzy a si wok贸 pro- jektu. U ytkownicy jQuery aktywnie omawiaj nie tylko rozw贸j dodatk贸w, ale tak e ulepszenia samego j dra biblioteki. W dodatku A przedstawimy wiele zasob贸w dost pnych dla programi- st贸w korzystaj cych z jQuery. Pomimo skali wysi k贸w niezb dnych do stworzenia tak elastycznego i rozbudowanego syste- mu produkt ko cowy jest darmowy i dost pny dla ka dego. Projekt ten dost pny jest na po- dw贸jnej licencji: GNU Public License (dzi ki czemu mo na go do czy do wielu innych projekt贸w open source) oraz MIT License (by u atwi zastosowanie jQuery w oprogramowaniu w asno ciowym). Historia projektu jQuery Niniejsza ksi ka omawia funkcjonalno i sk adni jQuery 1.3.x, najnowsz wersj dost pn w czasie jej pisania. Za o enia le ce u podstaw biblioteki udost pnienie atwych sposob贸w odnajdywania element贸w na stronie internetowej oraz modyfikowania ich nie zmieni y si w trakcie jej rozwijania, cho zmienione zosta y szczeg贸 y sk adni i dost pnych mo liwo ci. Poni szy kr贸tki przegl d historii projektu opisuje najwa niejsze zmiany pomi dzy wersjami. Publiczne og oszenie prac: John Resig po raz pierwszy wspomnia o poprawkach do biblioteki Prototype (cz ci Behaviour ) w sierpniu 2005 roku. Nowa biblioteka zosta a oficjalnie opublikowana pod nazw jQuery 14 stycznia 2006 roku. jQuery 1.0 (sierpie 2006): ju pierwsze wydanie biblioteki mia o rozbudowan obs ug selektor贸w CSS, zdarze i interakcji opartych na Ajaksie. jQuery 1.1 (stycze 2007): to wydanie znacznie usprawni o API. Wiele rzadko wykorzystywanych metod zosta o po czonych, co zmniejszy o ca kowit liczb metod, kt贸re trzeba opanowa i udokumentowa . jQuery 1.1.3 (lipiec 2007): to pomniejsze wydanie zawiera o ogromn popraw szybko ci dzia ania silnika selektor贸w jQuery. Od tej wersji wydajno jQuery wypada bardzo korzystnie na tle podobnych bibliotek JavaScriptu, takich jak Prototype, Mootools oraz Dojo. jQuery 1.2 (wrzesie 2007): w wydaniu tym usuni to sk adni XPath s u c do wybierania element贸w, gdy by a ona powtarzalna w stosunku do sk adni CSS. Dostosowywanie efekt贸w do w asnych potrzeb jest od tego wydania bardziej elastyczne; tworzenie dodatk贸w sta o si atwiejsze dzi ki wprowadzeniu zdarze z przestrzeni nazw. jQuery UI (wrzesie 2007): og oszono powstanie nowego zbioru dodatk贸w, kt贸ry mia zast pi popularny, jednak starzej cy si dodatek Interface. Obejmowa on bogat kolekcj gotowych wid et贸w, a tak e zbi贸r narz dzi s u cych do budowania bardziej zaawansowanych element贸w, takich jak interfejsy oparte na zasadzie przeci gnij i upu . 26 Rozdzia 1. " Pocz tki jQuery 1.2.6 (maj 2008): funkcjonalno popularnego dodatku Brandona Aarona o nazwie Dimensions zosta a do czona do j dra biblioteki. jQuery 1.3 (stycze 2009): powa na przebudowa silnika selektor贸w (Sizzle) ogromnie poprawi a wydajno biblioteki. Oficjalnie obs ugiwana jest r贸wnie delegacja zdarze . Informacje o starszych wersjach jQuery mo na znale na stronie internetowej projektu pod adresem: http://docs.jquery.com/History_of_jQuery. Nasza pierwsza strona z jQuery Skoro om贸wili my ju mo liwo ci udost pniane przez jQuery, mo emy teraz sprawdzi , jak mo na wykorzysta t bibliotek w praktyce. Pobranie jQuery Oficjalna strona internetowa jQuery (http://jquery.com/) jest zawsze najlepszym adresem, pod kt贸rym mo na znale aktualny kod i informacje dotycz ce biblioteki. Na pocz tek po- trzebna jest nam kopia jQuery, kt贸r mo na pobra bezpo rednio na stronie g 贸wnej tej witryny. W ka dym momencie dost pnych mo e by kilka wersji jQuery dla nas jako programist贸w stron internetowych najbardziej odpowiednia b dzie najnowsza nieskompresowana wersja biblioteki. W rodowisku produkcyjnym mo na j zast pi wersj skompresowan . Nie jest wymagana adna instalacja. By u y jQuery, wystarczy umie ci plik na naszej stronie internetowej, w publicznie dost pnym miejscu. Poniewa JavaScript jest j zykiem interpretowa- nym, nie musimy martwi si o faz kompilacji. Zawsze gdy b dziemy potrzebowa jQuery na stronie internetowej, b dziemy si po prostu odnosili do lokalizacji pliku z dokumentu HTML. Utworzenie dokumentu HTML Wi kszo przyk ad贸w wykorzystuj cych jQuery sk ada si z trzech element贸w: samego do- kumentu HTML, plik贸w CSS nadaj cych mu styl i plik贸w JavaScriptu pozwalaj cych wyko- nywa dzia ania. W naszym pierwszym przyk adzie wykorzystamy stron z fragmentem ksi ki1; do cz ci kodu przypisano kilka klas. 1 W przyk adzie wykorzystano fragment ksi ki Po drugiej stronie lustra Lewisa Carrolla w t umaczeniu Roberta Stillera przyp. t um. 27 jQuery 1.3. Wprowadzenie "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Po drugiej stronie lustra
Po drugiej stronie lustra
autor: Lewis Carroll
1. Dom odbity w lustrze
Na stole ko o Alicji le a a ksi ka, wi c kiedy tak siedzia a, obserwuj c Bia ego Kr贸la (bo wci troch si o niego l ka a i trzyma a w pogotowiu atrament, eby go obla , gdyby jeszcze raz zemdla ), przewraca a sobie kartki w poszukiwaniu czego , co by mog a przeczyta : "bo wszystko to w jakim nieznanym j zyku!" powiedzia a do siebie.
Brzmia o to tak.
IKA ORBA
ywt rks eikbil ,ywa tzsurm sazc yB
,y pyriw c zcreiw hcaz aw aN
ywt lgorob anc od e gzim A
.y pyzrgz yruzczsiw enmodz I
Zastanawia a si nad tym przez jaki czas, a b ysn a jej genialna my l. "Przecie to jest, oczywi cie, Lustrzana Ksi ka! i jak na ni popatrz w Lustrze, to s owa zn贸w b d takie, jak trzeba."
I odczyta a nast puj cy wiersz:
ABRO AKI
By czas mruszt awy, libkie skr twy
Na wa zach wiercz c wiryp y,
A mizg e do cna borogl twy
I zdomne wiszczury zgrzyp y.
28 Rozdzia 1. " Pocz tki Uk ad plik贸w na serwerze nie ma znaczenia. Odwo ania z jednego pliku do drugiego nale y jedynie do- stosowa tak, by pasowa y do wybranego przez nas sposobu organizacji. W wi kszo ci przyk ad贸w w ksi ce w odwo aniach do plik贸w wykorzystamy cie ki wzgl dne (../images/foo.png), a nie bezwzgl dne (/images/foo.png). Pozwala to na lokalne uruchamianie kodu bez konieczno ci posiadania serwera WWW. Natychmiast po zwyk ym nag 贸wku HTML adowany jest arkusz styl贸w. W tym przyk adzie jest on wyj tkowo sparta ski. body { font: 62.5% Arial, Verdana, sans-serif; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; } .poem { margin: 0 2em; } .highlight { font-style: italic; border: 1px solid #888; padding: 0.5em; margin: 0.5em 0; background-color: #ffc; } Po odwo aniu do arkusza styl贸w do czone zostaj pliki JavaScriptu. Istotne jest, by element script z bibliotek jQuery znajdowa si przed elementem script dla naszych w asnych skrypt贸w. W przeciwnym razie biblioteka jQuery nie b dzie dost pna, kiedy nasz kod b dzie si pr贸bowa do niej odwo a . W pozosta ej cz ci ksi ki drukowane b d jedynie istotne cz ci plik贸w HTML i CSS. Pe ne pliki do- st pne s na stronie internetowej ksi ki pod adresem: http://helion.pl/ksiazki/jquer1.htm. Teraz nasza strona wygl da tak: 29 jQuery 1.3. Wprowadzenie Rysunek 1.1. Wykorzystamy teraz jQuery do nadania nowego stylu tekstowi wiersza. Przyk ad ten ma na celu zademonstrowanie prostego zastosowania jQuery. W rzeczywisto ci ten typ stylizacji tekstu mo na wykona za pomoc samego CSS. Dodanie jQuery Nasz kod umie cimy w drugim obecnie pustym pliku JavaScriptu, do czonym do doku- mentu HTML za pomoc kodu . W tym przyk adzie wystarcz nam trzy wiersze kodu: $(document).ready(function() { $('.poem-stanza').addClass('highlight'); }); Odnalezienie tekstu wiersza Podstawowym dzia aniem jQuery jest wybranie cz ci dokumentu. Wykonywane jest to za pomoc konstrukcji $(). Zazwyczaj przyjmuje ona jako parametr a cuch znak贸w, kt贸ry mo e zawiera dowolne wyra enie selektora CSS. W tym przypadku chcemy odnale wszystkie cz ci dokumentu, do kt贸rych przypisano klas poem-stanza, dlatego selektor jest bardzo prosty. W ksi ce opiszemy jednak r贸wnie o wiele bardziej wyszukane mo liwo ci. R贸 ne sposoby odnajdywania cz ci dokumentu om贸wimy w rozdziale 2. 30 Rozdzia 1. " Pocz tki Funkcja $() jest tak naprawd fabryk dla obiektu jQuery b d cego podstawowym budulcem, z jakim b dziemy od teraz pracowa . Obiekt jQuery zawiera zero lub wi ksz liczb ele- ment贸w drzewa DOM i pozwala nam wchodzi z nimi w r贸 nego rodzaju interakcje. W tym przypadku chcemy zmodyfikowa wygl d cz ci strony, co osi gniemy, zmieniaj c klasy przy- pisane do tekstu wiersza. Wstawienie nowej klasy Metoda .addClass(), tak jak wi kszo metod jQuery, ma opisow nazw (ang. add class dodaj klas ). Dodaje ona klas CSS do wybranej cz ci strony. Jej jedynym parametrem jest nazwa klasy, jak nale y doda . Metoda ta oraz jej odpowiednik .removeClass() pozwalaj nam atwo zaobserwowa dzia anie jQuery, kiedy b dziemy bada r贸 ne dost pne wyra enia selektor贸w. Na razie nasz przyk ad po prostu dodaje klas highlight, kt贸r nasz arkusz styl贸w definiuje jako tekst z obramowaniem napisany kursyw . Warto zauwa y , e w celu dodania klasy do wszystkich zwrotek wiersza (element贸w poem-stanza) nie jest konieczne wykonywanie jakiejkolwiek iteracji. Tak jak wspominali my, jQuery wyko- rzystuje w metodach takich jak .addClass() iteracj niejawn , dzi ki czemu jedno wywo a- nie funkcji wystarczy do zmodyfikowania wszystkich wybranych cz ci dokumentu. Wykonanie kodu Po czenie $() i .addClass() wystarczy nam do osi gni cia celu, jakim jest zmiana wygl du tekstu wiersza. Je li jednak ten wiersz kodu wstawimy po prostu w nag 贸wku dokumentu, nie przyniesie to adnego efektu. Kod w JavaScripcie wykonywany jest w momencie napotkania go przez przegl dark , a w czasie gdy przetwarzany jest nag 贸wek, nie ma jeszcze adnego kodu HTML, kt贸remu mo na by nada styl. Musimy zatem op贸 ni wykonanie kodu do czasu, gdy b dzie dla nas dost pne drzewo DOM. Tradycyjnym mechanizmem op贸 niania wykonywania kodu w JavaScripcie jest wywo anie kodu wewn trz programu obs ugi zdarze (ang. event handler). Wi kszo program贸w obs ugi zdarze dost pna jest dla zdarze inicjowanych przez u ytkownika, takich jak klikni cia mysz i naci ni cia klawiszy. Gdyby my nie mieli dost pu do jQuery, musieliby my polega na pro- gramie obs ugi zdarze onload, kt贸ry wywo ywany jest po wygenerowaniu strony (ze wszyst- kimi obrazkami). By wywo a kod ze zdarzenia onload, umie ciliby my go wewn trz funkcji: function highlightPoemStanzas() { $('.poem-stanza').addClass('highlight'); } Nast pnie do czyliby my t funkcj do zdarzenia, modyfikuj c element dokumentu HTML, tak by si do niej odwo ywa :
31 jQuery 1.3. Wprowadzenie W ten spos贸b nasz kod zosta by wykonany po ca kowitym za adowaniu strony. To rozwi zanie ma jednak swoje wady. Zmodyfikowali my sam kod HTML, by wywo a zmian zachowania. Tak cis e powi zanie struktury i funkcji za mieca kod, wymagaj c nieraz powtarza- nia wywo a tej samej funkcji na wielu r贸 nych stronach lub w przypadku zdarze takich jak klikni cie mysz przy ka dym pojawieniu si elementu na stronie. Dodanie nowych dzia a wymaga wtedy wprowadzania zmian w wielu miejscach, co zwi ksza szans na pope nienie b du i komplikuje r贸wnoleg prac nad wieloma dokumentami projektantom i programistom. By unikn tych problem贸w, jQuery pozwala zaplanowa wywo anie funkcji na czas po za a- dowaniu DOM bez czekania na obrazki dzi ki konstrukcji $(document).ready(). Z funkcj zdefiniowan jak powy ej mo emy zapisa : $(document).ready(highlightPoemStanzas); Technika ta nie wymaga wprowadzania jakichkolwiek modyfikacji do kodu HTML. Zamiast tego dzia anie jest do czane w ca o ci za pomoc pliku JavaScriptu. W rozdziale 3. dowiemy si , jak mo na odpowiada na inne typy zdarze , rozdzielaj c ich efekty od struktury doku- mentu HTML. To wcielenie kodu jest jeszcze troch nieoptymalne, poniewa funkcja highlightPoemStanzas() definiowana jest tylko po to, by skorzysta z niej natychmiast i to tylko raz. Oznacza to, e wykorzystali my identyfikator w globalnej przestrzeni nazw funkcji, zyskuj c niewiele, a teraz musimy pami ta , by z niego ju wi cej nie korzysta . JavaScript, podobnie jak inne j zyki programowania, zawiera spos贸b obej cia tego braku optymalno ci zwany funkcjami anoni- mowymi (czasami nazywany r贸wnie funkcjami lambda). Za pomoc funkcji anonimowych mo emy pisa kod w spos贸b, kt贸ry zosta zaprezentowany na pocz tku: $(document).ready(function() { $('.poem-stanza').addClass('highlight'); }); Wykorzystuj c s owo kluczowe function bez nazwy funkcji, definiujemy funkcj dok adnie tam, gdzie jest potrzebna, a nie wcze niej. Usuwa to niepotrzebne rozbudowanie kodu i pozwala zredukowa go do trzech wierszy JavaScriptu. Skr贸t ten jest szczeg贸lnie wygodny w przy- padku kodu jQuery, gdy wiele metod przyjmuje jako argument funkcj , a funkcje takie rzad- ko mo na wykorzysta ponownie. Kiedy sk adni t wykorzystujemy do zdefiniowania funkcji anonimowej wewn trz cia a innej funkcji, mo na utworzy domkni cie (ang. closure). Jest to bardziej zaawansowana koncepcja o szerokich mo liwo ciach, jednak powinno si j dobrze zrozumie , gdy intensywnie wykorzy- stuje si definicje zagnie d onych funkcji, gdy mo e ona mie niezamierzone konsekwencje i implikacje w zakresie wykorzystania pami ci. Kwesti t omawiamy w ca o ci w dodatku C. 32 Rozdzia 1. " Pocz tki Gotowy produkt Kiedy nasz kod w JavaScripcie jest gotowy, strona wygl da tak: Rysunek 1.2. Zwrotki wierszy napisane s teraz kursyw i umieszczone s w ramce, zgodnie z arkuszem styl贸w alice.css, z powodu wstawienia klasy highlight za pomoc kodu w JavaScripcie. Podsumowanie Wiemy ju , dlaczego programista m贸g by wybra korzystanie z biblioteki JavaScriptu, zamiast pisa ca y kod od podstaw nawet w przypadku najprostszych zada . Widzieli my tak e, co sprawia, e jQuery sprawdza si jako doskona a biblioteka, kt贸rej zastosowanie mo e by lepszym rozwi - zaniem od innych opcji. Wiemy tak e mniej wi cej, jakiego typu zadania jQuery mo e upro ci . W niniejszym rozdziale nauczyli my si , jak udost pni jQuery kodowi w JavaScripcie na na- szej stronie internetowej, jak wykorzysta funkcj fabryczn $() do zlokalizowania cz ci strony z przypisan okre lon klas , jak wywo ywa metod .addClass() w celu nadania tej cz ci strony dodatkowego stylu, a tak e jak wywo a $(document).ready(), co spowoduje, e kod ten zostanie wywo any po za adowaniu strony. Prosty przyk ad, kt贸rym si pos u yli my, demonstruje spos贸b dzia ania jQuery, jednak nie jest szczeg贸lnie przydatny w praktyce. W kolejnym rozdziale rozbudujemy ten kod, zapoznaj c si z wyszukanym j zykiem selektor贸w jQuery i znajduj c praktyczne zastosowania dla tej techniki. 33