Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00066 003917 12916560 na godz. na dobę w sumie
jQuery 1.3. Wprowadzenie - książka
jQuery 1.3. Wprowadzenie - książka
Autor: , , Liczba stron: 424
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2641-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

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 przejść do zaawansowanych tematów związanych z AJAX-em oraz edycją drzewa DOM. Rozdział poświęcony efektom specjalnym będzie jednym z tych, które pozwolą Ci wykrzesać jeszcze więcej porywających efektów z Twojego kodu. Olśniewające galerie, pokazy slajdów, interaktywne formularze są w zasięgu Twoich możliwości! Pod koniec książki dowiesz się, jak wykorzystywać dodatki oraz tworzyć własne. Trzymasz w rękach długo oczekiwaną na polskim rynku pozycję, poświęconą niezwykłej bibliotece!

Uzyskaj jeszcze więcej z języka JavaScript!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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 przejœæ do zaawansowanych tematów zwi¹zanych z AJAX-em oraz edycj¹ drzewa DOM. Rozdzia³ poœwiêcony efektom specjalnym bêdzie jednym z tych, które pozwol¹ Ci wykrzesaæ jeszcze wiêcej porywaj¹cych efektów z Twojego kodu. Olœniewaj¹ce galerie, pokazy slajdów, interaktywne formularze s¹ w zasiêgu Twoich mo¿liwoœci! Pod koniec ksi¹¿ki dowiesz siê, jak wykorzystywaæ dodatki oraz tworzyæ w³asne. Trzymasz w rêkach d³ugo oczekiwan¹ na polskim rynku pozycjê, poœwiê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 11 13 15 17 23 23 25 26 27 27 27 30 33 33 35 35 36 37 38 40 40 42 42 45 Przedmowa O autorach O korektorach Wprowadzenie Rozdziaï 1. PoczÈtki Co robi jQuery Dlaczego jQuery dziaïa dobrze Historia projektu jQuery Nasza pierwsza strona z jQuery Pobranie jQuery Utworzenie dokumentu HTML Dodanie jQuery Gotowy produkt Podsumowanie Rozdziaï 2. Selektory DOM Funkcja fabryczna $() Selektory CSS Stylizacja poziomów zagnieĝdĝenia listy Selektory atrybutów Stylizacja odnoĂników Wïasne selektory Stylizacja co drugiego wiersza Selektory formularzy Spis treĞci Metody przechodzenia drzewa DOM Stylizacja wybranych komórek ’Èczenie w ïañcuch DostÚp do elementów DOM Podsumowanie Rozdziaï 3. Zdarzenia Wykonywanie zadañ w momencie zaïadowania strony Czas wykonania kodu Wiele skryptów na jednej stronie Skróty poprawiajÈce zwiÚzïoĂÊ kodu Wspóïistnienie z innymi bibliotekami Proste zdarzenia Prosty przeïÈcznik stylów Skrótowa obsïuga zdarzeñ Zdarzenia zïoĝone Pokazywanie i ukrywanie zaawansowanych opcji Wyróĝnianie elementów, które moĝna kliknÈÊ Podróĝ zdarzenia Efekty uboczne propagacji zdarzeñ Zmiana podróĝy — obiekt zdarzenia Element docelowy zdarzenia Zatrzymanie propagacji zdarzeñ Dziaïania domyĂlne Delegacja zdarzeñ Usuwanie programu obsïugi zdarzeñ Przestrzenie nazw zdarzeñ Ponowne dowiÈzanie zdarzenia Symulacja interakcji z uĝytkownikiem Zdarzenia klawiatury Podsumowanie Rozdziaï 4. Efekty Modyfikacja CSS w locie Proste ukrywanie i pokazywanie Efekty a szybkoĂÊ Przyspieszanie Pojawianie siÚ i znikanie Efekty zïoĝone Tworzenie wïasnych animacji PrzeïÈczanie znikania Animacja z uĝyciem wielu wïaĂciwoĂci Efekty jednoczesne a kolejkowane Praca z jednym zbiorem elementów Praca z wieloma zbiorami elementów Funkcje zwrotne W skrócie Podsumowanie 4 45 46 48 48 49 51 51 51 52 53 54 55 55 63 64 64 66 67 69 70 71 71 72 72 75 75 76 78 79 81 83 83 87 90 90 91 91 93 94 94 97 97 100 102 104 104 Spis treĞci Rozdziaï 5. Edycja drzewa DOM Edycja atrybutów Atrybuty inne od klas Jeszcze raz funkcja fabryczna $() Wstawianie nowych elementów Przenoszenie elementów Oznaczenie, ponumerowanie i utworzenie odnoĂnika do kontekstu Dodanie przypisów dolnych Opakowanie elementów Kopiowanie elementów Klonowanie ze zdarzeniami Klonowanie cytatów wyrzuconych Nieco o CSS Powrót do kodu UpiÚkszenie cytatów wyrzuconych Metody edycji drzewa DOM w skrócie Podsumowanie Rozdziaï 6. Ajax ’adowanie danych na ĝÈdanie Dodawanie kodu HTML Praca z obiektami JavaScriptu ’adowanie dokumentu XML Wybór formatu danych Przekazywanie danych do serwera Wykonanie ĝÈdania GET Wykonanie ĝÈdania POST Serializacja formularza ¥ledzenie ĝÈdania Ajax a zdarzenia Ograniczenia w zakresie bezpieczeñstwa Wykorzystanie JSONP dla danych zewnÚtrznych Dodatkowe opcje Niskopoziomowa metoda Ajaksa Modyfikacja opcji domyĂlnych ’adowanie czÚĂci strony HTML Podsumowanie Rozdziaï 7. Przetwarzanie tabel Sortowanie i podziaï na strony Sortowanie po stronie serwera Sortowanie za pomocÈ JavaScriptu Paginacja po stronie serwera Paginacja w JavaScripcie Gotowy kod 105 105 106 108 110 111 115 117 119 120 121 121 122 122 125 126 128 129 130 131 134 141 144 145 146 149 150 152 155 156 157 158 159 159 160 162 165 166 166 167 183 185 190 5 Spis treĞci Modyfikacja wyglÈdu tabeli Wyróĝnianie wierszy Podpowiedzi Zwijanie i rozwijanie czÚĂci tabeli Filtrowanie Gotowy kod Podsumowanie Rozdziaï 8. Formularze i ich funkcje Ulepszenie prostego formularza Progresywne ulepszanie stylu formularzy Pola wyĂwietlane warunkowo Sprawdzanie poprawnoĂci formularza Edycja pól wyboru Gotowy kod ZwiÚzïe formularze Tekst pojemnika na pola formularza Autouzupeïnianie oparte na Ajaksie Gotowy kod Praca z danymi liczbowymi formularza Struktura tabeli koszyka z zakupami Odrzucanie danych nieliczbowych Obliczenia arytmetyczne Usuwanie elementów Edycja informacji o wysyïce Gotowy kod Podsumowanie Rozdziaï 9. Rotacja i przesuwanie elementów Rotacja wiadomoĂci Konfiguracja strony Pobieranie wiadomoĂci z kanaïu RSS Konfiguracja rotacji elementów Funkcja rotacji wiadomoĂci Pauza po najechaniu myszÈ Pobieranie wiadomoĂci RSS z innej domeny Gradientowy efekt blakniÚcia Gotowy kod Karuzela obrazków Konfiguracja strony Przesuwanie obrazków po klikniÚciu PowiÚkszanie obrazków Gotowy kod Podsumowanie 6 192 192 199 205 207 212 215 217 217 218 224 227 234 237 239 239 242 250 253 253 256 256 263 267 270 272 273 274 274 276 279 280 282 285 286 289 290 291 294 301 313 316 Spis treĞci Rozdziaï 10. Wykorzystywanie dodatków Znalezienie dodatku i uzyskanie pomocy Jak korzystaÊ z dodatku Dodatek Form Wskazówki i sztuczki Biblioteka dodatków jQuery UI Efekty Komponenty interakcji Widĝety ThemeRoller w jQuery UI Inne polecane dodatki Formularze Tabele Obrazki Ramki z obrazkami i okna dialogowe Wykresy Zdarzenia Podsumowanie Rozdziaï 11. Tworzenie dodatków Dodawanie nowych funkcji globalnych Dodanie wiÚkszej liczby funkcji Jaki to ma sens? Tworzenie nowej metody pomocniczej Dodawanie metod obiektu jQuery Kontekst metody obiektu ’Èczenie metod w ïañcuchy Metody przechodzenia drzewa DOM Dodawanie nowych metod skrótów Parametry metod Proste parametry Tablice asocjacyjne parametrów DomyĂlne wartoĂci parametrów Funkcje zwrotne Dostosowywanie wartoĂci domyĂlnych Dodanie wyraĝenia selektora Podzielenie siÚ dodatkiem ze Ăwiatem Konwencje nazewnictwa Uĝycie aliasu $ Interfejsy metod Styl dokumentacji Podsumowanie Dodatek A ½ródïa internetowe Dokumentacja jQuery Wiki jQuery jQuery API 317 317 318 319 320 321 322 324 326 329 330 330 332 334 335 338 339 340 341 341 342 343 344 345 346 348 349 353 356 358 359 360 361 362 364 367 367 367 368 368 368 369 369 369 369 7 Spis treĞci PrzeglÈdarka jQuery API Visual jQuery PrzeglÈdarka jQuery API w formacie Adobe AIR Informacje o JavaScripcie Mozilla developer center Dev.opera MSDN JScript Reference Quirksmode JavaScript Toolbox Kompresory kodu w JavaScripcie YUI Compressor JSMin Pretty printer Informacje o (X)HTML Strona hipertekstowego jÚzyka znaczników W3C Informacje o CSS Strona kaskadowych arkuszy stylów W3C ¥ciÈgawka CSS Mezzoblue Position is everything Przydatne blogi Blog jQuery Learning jQuery Ajaxian John Resig JavaScript Robert’s talk Web standards with imagination Snook Strona Matta Snidera o JavaScripcie I can’t DOM scripting As days pass by A List Apart Platformy do programowania internetowego korzystajÈce z jQuery Dodatek B NarzÚdzia programistyczne NarzÚdzia dla przeglÈdarki Firefox Firebug Pasek narzÚdzi Web Developer Venkman Regular Expressions Tester NarzÚdzia dla przeglÈdarki Internet Explorer Microsoft Internet Explorer Developer Toolbar Microsoft Visual Web Developer DebugBar Drip 8 370 370 370 370 370 370 371 371 371 371 371 372 372 372 372 372 373 373 373 373 373 374 374 374 374 374 374 375 375 375 375 375 375 376 377 377 377 378 378 378 378 379 379 379 379 Spis treĞci NarzÚdzia dla przeglÈdarki Safari Programowanie Menu Inspektor www NarzÚdzia dla przeglÈdarki Opera Dragonfly Inne narzÚdzia Firebug Lite NitobiBug Pakiet jQuery dla edytora TextMate Charles Fiddler Aptana Dodatek C DomkniÚcia w JavaScripcie Funkcje wewnÚtrzne Wielka ucieczka Zakresy zmiennych Interakcje miÚdzy domkniÚciami DomkniÚcia w jQuery Argumenty $(document).ready() Programy obsïugi zdarzeñ Zagroĝenia wynikajÈce z wycieku pamiÚci Przypadkowe pÚtle odwoïania Problem z wyciekiem pamiÚci w przeglÈdarce Internet Explorer Dobra wiadomoĂÊ Podsumowanie Dodatek D PodrÚczne informacje Wyraĝenia selektorów Metody przechodzenia drzewa DOM Metody zdarzeñ Metody efektów Metody edycji drzewa DOM Metody Ajaksa Pozostaïe metody Skorowidz 380 380 380 380 380 381 381 381 381 381 382 382 383 384 385 386 388 389 389 390 392 393 394 395 395 397 397 399 400 403 404 406 407 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 Q 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. Q 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. Q 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). Q 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È. Q 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. Q 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. Q 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: Q 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. Q 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Ú. Q 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. Q 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. Q 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. Q 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. Q jQuery 1.0 (sierpieñ 2006): juĝ pierwsze wydanie biblioteki miaïo rozbudowanÈ obsïugÚ selektorów CSS, zdarzeñ i interakcji opartych na Ajaksie. Q 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Ê. Q 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. Q 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. Q 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 Q jQuery 1.2.6 (maj 2008): funkcjonalnoĂÊ popularnego dodatku Brandona Aarona o nazwie Dimensions zostaïa doïÈczona do jÈdra biblioteki. Q 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 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml xml:lang= pl lang= pl head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title Po drugiej stronie lustra /title link rel= stylesheet href= alice.css type= text/css media= screen / script src= jquery.js type= text/javascript /script script src= alice.js type= text/javascript /script /head body h1 Po drugiej stronie lustra /h1 div class= author autor: Lewis Carroll /div div class= chapter id= chapter-1 h2 class= chapter-title 1. Dom odbity w lustrze /h2 p 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Ê: span class= spoken bo wszystko to w jakimĂ nieznanym jÚzyku! /span powiedziaïa do siebie. /p p Brzmiaïo to tak. /p div class= poem h3 class= poem-title IKA’ORBA¿ /h3 div class= poem-stanza div ywtÈrks eikbilĂ ,ywaïtzsurm sazc ïyB /div div ,yïpyriwĂ cÈzcreiw hcazïaw aN /div div ywtÈlgorob anc od eïgzim A /div div .yïpyzrgz yruzczsiwĂ enmodz I /div /div /div p Zastanawiaïa siÚ nad tym przez jakiĂ czas, aĝ bïysnÚïa jej genialna myĂl. span class= spoken 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. /span /p p I odczytaïa nastÚpujÈcy wiersz: /p div class= poem h3 class= poem-title ¿ABRO’AKI /h3 div class= poem-stanza div Byï czas mrusztïawy, Ălibkie skrÈtwy /div div Na waïzach wierczÈc Ăwirypïy, /div div A mizgïe do cna boroglÈtwy /div div I zdomne Ăwiszczury zgrzypïy. /div /div /div /div /body /html 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 script src= alice.js type= text/javascript /script . 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 body dokumentu HTML, tak by siÚ do niej odwoïywaï: body onload= highlightPoemStanzas(); 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
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

jQuery 1.3. Wprowadzenie
Autor:
, ,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: