Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00213 007795 10476797 na godz. na dobę w sumie
JavaScript i jQuery. Kompletny przewodnik dla programistów interaktywnych aplikacji internetowych w Visual Studio - książka
JavaScript i jQuery. Kompletny przewodnik dla programistów interaktywnych aplikacji internetowych w Visual Studio - książka
Autor: , Liczba stron: 280
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-8283-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

JavaScript i jQuery - fantastyczny duet w każdej aplikacji!

Technologia JavaScript nie od dziś jest uważana za potężne narzędzie, doskonale wpasowujące się w sposób działania aplikacji internetowych po stronie serwera. To zaś jest zaleta nie do przecenienia w czasach, gdy przez globalną sieć przesyłane są niewiarygodnie wielkie ilości danych, a internet w zasadzie służy do załatwiania wszelkich codziennych spraw. Każda współczesna aplikacja internetowa musi zapewniać szybki transfer i bezpieczeństwo danych, a także oferować użytkownikom końcowym wygodny interaktywny widok, wraz z możliwością otwierania i wprowadzania danych na różnych urządzeniach. Połączenie JavaScriptu i jQuery pozwala osiągnąć taki stan rzeczy bez nadmiernego obciążania sieci i serwerów.

W tej książce znajdziesz informacje o technologii JavaScript oraz bibliotekach jQuery oraz jQuery UI, które umożliwiają tworzenie interaktywnych widoków aplikacji internetowych. Dowiesz się więcej o składni języka JavaScript i zapewnianiu interakcji z różnymi elementami strony oraz o tworzeniu i wykorzystywaniu bibliotek skryptów. Nauczysz się zmieniać właściwości różnych elementów witryny, odkryjesz, do czego służą formularze i obiekty wbudowane, a ponadto zrozumiesz, jak ważną rolę w procesie projektowania i implementowania aplikacji internetowych odgrywają biblioteki jQuery i jQuery UI. Warto, przekonaj się sam!

Interaktywna strona WWW? Tylko z JavaScriptem i jQuery!

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

Darmowy fragment publikacji:

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Redaktor prowadzący: Ewelina Burska Projekt okładki: Studio Gravite/Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jsiqkp Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. ISBN: 978-83-246-8283-6 Copyright © Helion 2014 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:264)ci Przedmowa ......................................................................................................... 7 Wst(cid:246)p ................................................................................................................. 9 Technologia JavaScript ................................................. 11 Cz(cid:246)(cid:264)(cid:232) I Rozdzia(cid:228) 1. Wprowadzenie do JavaScript ........................................................... 13 Osadzenie skryptu .......................................................................................................... 15 Zmienne .......................................................................................................................... 16 Funkcje ........................................................................................................................... 18 Funkcje a zasi(cid:266)g zmiennych ..................................................................................... 21 Instrukcje steruj(cid:261)ce i operatory logiczne ........................................................................ 24 Warunki a sta(cid:225)e ......................................................................................................... 25 Warunki a zmienne ................................................................................................... 26 Zdania logiczne zawieraj(cid:261)ce zmienne i sta(cid:225)e ............................................................ 28 Koniunkcja i alternatywa kryteriów ......................................................................... 28 Instrukcja switch ...................................................................................................... 32 Operatory inkrementacji, dekrementacji oraz przypisania .............................................. 34 P(cid:266)tle ................................................................................................................................ 35 Polecenie while ........................................................................................................ 35 Konstrukcja do while ............................................................................................... 37 P(cid:266)tla for .................................................................................................................... 38 Instrukcje break i continue ....................................................................................... 41 Podsumowanie ................................................................................................................ 43 Rozdzia(cid:228) 2. Konfiguracja obs(cid:228)ugi JavaScript i biblioteki skryptów ....................... 45 Problem braku obs(cid:225)ugi JavaScript .................................................................................. 45 Konfiguracja obs(cid:225)ugi JavaScript w przegl(cid:261)darce Internet Explorer ................................ 46 Wy(cid:225)(cid:261)czenie obs(cid:225)ugi JavaScript w przegl(cid:261)darce Mozilla Firefox .................................... 47 Konfiguracja przegl(cid:261)darki Google Chrome do obs(cid:225)ugi JavaScript ................................. 48 Biblioteki skryptów ........................................................................................................ 49 Podsumowanie ................................................................................................................ 52 Rozdzia(cid:228) 3. Debugowanie kodu JavaScript ........................................................ 53 Wprowadzenie ................................................................................................................ 53 Narz(cid:266)dzia deweloperskie w Internet Explorer 9 ............................................................. 53 Konsola .................................................................................................................... 55 Czujka ...................................................................................................................... 57 Kup książkęPoleć książkę 4 JavaScript i jQuery Rozpocz(cid:266)cie debugowania i punkty przerwania ....................................................... 58 Zmienne lokalne ....................................................................................................... 60 Stos wywo(cid:225)a(cid:276) ........................................................................................................... 61 Inspekcja kodu JavaScript w przegl(cid:261)darce Mozilla Firefox ........................................... 61 Konsola WWW ........................................................................................................ 61 Brudnopis ................................................................................................................. 63 Podsumowanie ................................................................................................................ 64 Rozdzia(cid:228) 4. Dost(cid:246)p do wybranych elementów stron internetowych ..................... 65 Wprowadzenie ................................................................................................................ 65 Pole tekstowe .................................................................................................................. 66 Modyfikacja zawarto(cid:286)ci wybranego elementu strony ..................................................... 67 W(cid:225)a(cid:286)ciwo(cid:286)ci obiektów HTML ........................................................................................ 69 Modyfikacja w(cid:225)a(cid:286)ciwo(cid:286)ci wybranego obiektu HTML .............................................. 69 Modyfikacja stylu elementu strony .......................................................................... 73 Podsumowanie ................................................................................................................ 78 Rozdzia(cid:228) 5. W(cid:228)a(cid:264)ciwo(cid:264)ci okna przegl(cid:241)darki ....................................................... 79 Wprowadzenie ................................................................................................................ 79 Dynamiczna kontrola nowego okna przegl(cid:261)darki internetowej ...................................... 79 Przenoszenie i dynamiczna zmiana rozmiarów okna przegl(cid:261)darki ................................. 84 Podsumowanie ................................................................................................................ 88 Rozdzia(cid:228) 6. Obs(cid:228)uga zdarze(cid:254) i drzewo DOM ....................................................... 89 Wprowadzenie ................................................................................................................ 89 Obs(cid:225)uga myszy ............................................................................................................... 89 Obs(cid:225)uga klawiatury oraz metody zdarzeniowe towarzysz(cid:261)ce (cid:225)adowaniu elementów HTML ........................................................................................................ 94 Podsumowanie .............................................................................................................. 103 Rozdzia(cid:228) 7. Tabele danych, (cid:274)ród(cid:228)a XML oraz p(cid:246)tla for in ................................... 105 Wprowadzenie .............................................................................................................. 105 Odczytanie zawarto(cid:286)ci pliku XML ............................................................................... 106 Pobieranie wybranych informacji z pliku XML ........................................................... 108 Tworzenie tabeli danych ............................................................................................... 110 P(cid:266)tla for in .................................................................................................................... 113 Podsumowanie .............................................................................................................. 114 Rozdzia(cid:228) 8. Formularze ................................................................................... 115 Wprowadzenie .............................................................................................................. 115 Walidacja danych formularza ....................................................................................... 116 Formularze a wyra(cid:298)enia regularne ................................................................................ 120 Zdarzenie onchange ...................................................................................................... 122 Formatowanie b(cid:225)(cid:266)dnie wype(cid:225)nionych pól ..................................................................... 123 Potwierdzenie wys(cid:225)ania i wyczyszczenia zawarto(cid:286)ci pól formularza ........................... 125 Podsumowanie .............................................................................................................. 126 Rozdzia(cid:228) 9. Obiekty wbudowane ..................................................................... 127 Wprowadzenie .............................................................................................................. 127 Math ............................................................................................................................. 127 Date .............................................................................................................................. 129 String ............................................................................................................................ 131 JSON ............................................................................................................................ 133 Konstruowanie i obs(cid:225)uga w(cid:225)asnych obiektów ............................................................... 135 Kup książkęPoleć książkę Spis tre(cid:264)ci 5 W(cid:225)a(cid:286)ciwo(cid:286)ci przegl(cid:261)darki ............................................................................................. 138 Navigator ................................................................................................................ 138 History .................................................................................................................... 139 Location ................................................................................................................. 140 Podsumowanie .............................................................................................................. 141 Rozdzia(cid:228) 10. Animacje ..................................................................................... 143 Wprowadzenie .............................................................................................................. 143 (cid:285)ciemnianie i rozja(cid:286)nianie ............................................................................................ 143 Zmiana rozmiaru .......................................................................................................... 147 Ruch ............................................................................................................................. 151 Podsumowanie .............................................................................................................. 155 Cz(cid:246)(cid:264)(cid:232) II Biblioteka jQuery ........................................................ 157 Rozdzia(cid:228) 11. Podstawy jQuery .......................................................................... 159 Wprowadzenie i dyskretny JavaScript .......................................................................... 159 Importowanie biblioteki jQuery i zdarzenie $(document).ready .................................. 160 Selektory, czyli dost(cid:266)p do elementów drzewa DOM .................................................... 162 Konstruowanie i wykorzystanie selektorów ........................................................... 164 Filtrowanie atrybutów i dodatkowe selektory ........................................................ 171 Uzupe(cid:225)nienia .......................................................................................................... 175 Manipulacja drzewem DOM ........................................................................................ 176 Zdarzenia ...................................................................................................................... 178 Rejestracja zdarzenia .............................................................................................. 179 Wy(cid:225)(cid:261)czenie obs(cid:225)ugi zdarzenia ................................................................................ 180 R(cid:266)czne wyzwolenie zdarzenia ................................................................................ 181 Zablokowanie domy(cid:286)lnej obs(cid:225)ugi zdarzenia ........................................................... 183 Argumenty zdarzenia ............................................................................................. 184 Funkcje zwrotne, czyli przetwarzanie asynchroniczne ................................................. 185 Podsumowanie .............................................................................................................. 188 Rozdzia(cid:228) 12. Zaawansowane aspekty biblioteki jQuery ...................................... 189 Animacje ...................................................................................................................... 189 Formularze .................................................................................................................... 195 AJAX ............................................................................................................................ 198 Wtyczki i rozszerzenia .................................................................................................. 204 Podsumowanie .............................................................................................................. 208 Rozdzia(cid:228) 13. jQuery UI ...................................................................................... 209 Wprowadzenie i przygotowanie (cid:286)rodowiska pracy ....................................................... 209 Wtyczki ........................................................................................................................ 210 ProgressBar ............................................................................................................ 210 Slider ...................................................................................................................... 212 Datepicker .............................................................................................................. 214 Dialog ..................................................................................................................... 219 Button ..................................................................................................................... 226 Tabs ........................................................................................................................ 232 Accordion ............................................................................................................... 238 Interakcja z komponentami ........................................................................................... 241 Przenoszenie ........................................................................................................... 241 Upuszczanie ........................................................................................................... 246 Zaznaczanie ............................................................................................................ 250 Kup książkęPoleć książkę 6 JavaScript i jQuery Sortowanie ............................................................................................................. 252 Zmiana rozmiaru .................................................................................................... 256 Efekty animacji ............................................................................................................. 258 Prze(cid:225)(cid:261)czanie klas CSS ............................................................................................ 258 Dodawanie, usuwanie i zmiana klasy CSS ............................................................. 260 Animowanie kolorów ............................................................................................. 261 Wbudowane efekty animacji .................................................................................. 263 Easing ..................................................................................................................... 266 Tworzenie w(cid:225)asnych motywów .............................................................................. 269 Podsumowanie .............................................................................................................. 270 Skorowidz ....................................................................................................... 271 Kup książkęPoleć książkę Rozdzia(cid:228) 10. Animacje Wprowadzenie JavaScript w po(cid:225)(cid:261)czeniu z kaskadowymi arkuszami stylów pozwala uatrakcyjni(cid:252) pro- jektowan(cid:261) witryn(cid:266) efektami animacji. Dzi(cid:266)ki temu poprawi si(cid:266) interaktywno(cid:286)(cid:252) ca(cid:225)ej aplikacji internetowej, która u(cid:225)atwi u(cid:298)ytkownikowi jej obs(cid:225)ug(cid:266). W praktyce implementowanie animacji elementów drzewa DOM sprowadza si(cid:266) do umiej(cid:266)tnego modyfikowania w(cid:225)a(cid:286)ciwo(cid:286)ci style wybranego obiektu HTML. Poniewa(cid:298) preferencje estetyczne s(cid:261) kwesti(cid:261) indywidualnego wyboru, wi(cid:266)c w tym podrozdziale poka(cid:298)(cid:266), w jaki sposób wykona(cid:252) proste efekty animacji, takie jak: animacje wej(cid:286)cia i wyj(cid:286)cia (rozja(cid:286)nianie i (cid:286)ciemnanie) obiektów, zmiana ich rozmiarów i po(cid:225)o(cid:298)enia. Moim celem nie b(cid:266)dzie utworzenie pi(cid:266)knych animacji, a jedynie przedstawienie podstaw nie- zb(cid:266)dnych do samodzielnego implementowania w(cid:225)asnych animacji. (cid:263)ciemnianie i rozja(cid:264)nianie Dynamiczna kontrola poziomu jasno(cid:286)ci wybranego elementu HTML sprowadza si(cid:266) do modyfikacji w(cid:225)a(cid:286)ciwo(cid:286)ci opacity, któr(cid:261) w zale(cid:298)no(cid:286)ci od przegl(cid:261)darki internetowej mo(cid:298)na zmodyfikowa(cid:252) za pomoc(cid:261) w(cid:225)a(cid:286)ciwo(cid:286)ci style.filter w przypadku Internet Explo- rera lub w(cid:225)a(cid:286)ciwo(cid:286)ci style.opacity w przypadku pozosta(cid:225)ych przegl(cid:261)darek. Zanim przejd(cid:266) do zaimplementowania funkcji, której celem b(cid:266)dzie animacja wybra- nego elementu HTML poprzez ci(cid:261)g(cid:225)(cid:261) zmian(cid:266) poziomu jego jasno(cid:286)ci, poka(cid:298)(cid:266), w jaki sposób zmieni(cid:252) jego w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) opacity. W tym celu: 1. Utwórz now(cid:261) witryn(cid:266) HTML o nazwie Animacje.htm. 2. W sekcji title witryny wpisz jej nazw(cid:266), czyli Animacje. Kup książkęPoleć książkę 144 Cz(cid:246)(cid:264)(cid:232) I (cid:105) Technologia JavaScript 3. Korzystaj(cid:261)c z listingu 10.1, uzupe(cid:225)nij nag(cid:225)ówek strony Animacje o definicj(cid:266) klas kaskadowych arkuszy stylów dla bloku div. Listing 10.1. Definicja formatowania bloku div style type= text/css div.zolty { color: #996600; font-weight: bold; background-color: #FFFFCC; border-color: #996600; border-style: solid; border-width: 2px; width: 100px; text-align: center; } div.brazowy { color: #FFFFCC; font-weight: bold; background-color: #996600; border-color: #FFFFCC; border-style: solid; border-width: 1px; width: 100px; text-align: center; } /style 4. W nag(cid:225)ówku witryny Animacje umie(cid:286)(cid:252) polecenia z listingu 10.2. Listing 10.2. Kontrola poziomu jasno(cid:286)ci wybranego elementu HTML za pomoc(cid:261) JavaScript function ustawJasnosc(idElementu, poziomJasnosci) { var element = document.getElementById(idElementu); if(!element) return; element.style.opacity = poziomJasnosci / 10; element.style.filter = alpha(opacity= + poziomJasnosci * 10 + ) ; } function odczytajJasnosc(idElementu) { var element = document.getElementById(idElementu); if(!element) return; var jasnosc; if (element.style.filter) { var indeksP = element.style.filter.indexOf( = ); var indeksK = element.style.filter.indexOf( ) ); jasnosc = parseFloat(element.style.filter.substring(indeksP + 1, (cid:180)indeksK)) / 10; } Kup książkęPoleć książkę Rozdzia(cid:228) 10. (cid:105) Animacje 145 else jasnosc = element.style.opacity * 10; return jasnosc; } 5. Sekcj(cid:266) body witryny Animacje zdefiniuj wed(cid:225)ug wzoru z listingu 10.3. Listing 10.3. Zdarzenia onmouseover oraz onmouseout a poziom jasno(cid:286)ci bloku div body onload= ustawJasnosc( blok1 , 10); div id= blok1 class= zolty onmouseover= ustawJasnosc( blok1 , 5); (cid:180)onmouseout= ustawJasnosc( blok1 , 10) Wydawnictwo Helion /div /body Dwa aspekty powy(cid:298)szego rozwi(cid:261)zania zas(cid:225)uguj(cid:261) na szczególn(cid:261) uwag(cid:266). S(cid:261) nimi funkcje ustawJasnosc oraz odczytajJasnosc. Pierwsza z nich pozwala zmodyfikowa(cid:252) poziom ja- sno(cid:286)ci wybranego fragmentu witryny internetowej poprzez kontrol(cid:266) w(cid:225)a(cid:286)ciwo(cid:286)ci opacity. Funkcja ta jest kompatybilna z ró(cid:298)nymi przegl(cid:261)darkami i pozwala ustawi(cid:252) jasno(cid:286)(cid:252) obiek- tów HTML na warto(cid:286)(cid:252) z zakresu od 0, dla której dany obiekt b(cid:266)dzie ca(cid:225)kowicie przezro- czysty (niewidoczny), do 10, dla której dany obiekt nie b(cid:266)dzie przezroczysty. W zale(cid:298)no(cid:286)ci od rodzaju przegl(cid:261)darki internetowej w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) opacity mo(cid:298)na zmo- dyfikowa(cid:252) za pomoc(cid:261) pola style.opacity, do którego nale(cid:298)y po prostu przypisa(cid:252) od- powiedni(cid:261) warto(cid:286)(cid:252), reprezentuj(cid:261)c(cid:261) poziom przezroczysto(cid:286)ci obiektu HTML. W(cid:225)a(cid:286)ci- wo(cid:286)(cid:252) style.opacity mo(cid:298)e przyjmowa(cid:252) warto(cid:286)ci z zakresu od 0 do 1. Z tego powodu warto(cid:286)(cid:252) parametru przekazanego do funkcji ustawJasnosc jest dzielona przez wspó(cid:225)- czynnik równy 10. W przypadku przegl(cid:261)darki Internet Explorer przezroczysto(cid:286)(cid:252) obiektu HTML mo(cid:298)na zmodyfikowa(cid:252) za pomoc(cid:261) w(cid:225)a(cid:286)ciwo(cid:286)ci style.filter, do której nale(cid:298)y przypisa(cid:252) (cid:225)a(cid:276)cuch tekstowy w postaci alpha(opacity=jasno(cid:258)(cid:202)) , gdzie parametr jasno(cid:258)(cid:202) jest wyra(cid:298)ony w procentach i odpowiada procentowemu poziomowi przezroczysto(cid:286)ci danego elementu HTML. Ze wzgl(cid:266)du na fakt, (cid:298)e sposób kontroli jasno(cid:286)ci (przezroczysto(cid:286)ci) obiektów HTML zale(cid:298)y od wykorzystywanej przegl(cid:261)darki internetowej, równie(cid:298) i odczytanie poziomu przezroczysto(cid:286)ci danego obiektu jest uzale(cid:298)nione od rodzaju przegl(cid:261)darki. Wobec te- go funkcja odczytajJasnosc z listingu 10.2 najpierw weryfikuje, czy w(cid:225)asno(cid:286)(cid:252) filter obiektu style zosta(cid:225)a wcze(cid:286)niej zdefiniowana. Je(cid:286)li tak, to pobieram warto(cid:286)(cid:252) jasno(cid:286)ci znajduj(cid:261)c(cid:261) si(cid:266) pomi(cid:266)dzy znakami = oraz ). W przeciwnym wypadku odczytuj(cid:266) w(cid:225)asno(cid:286)(cid:252) style.opacity. Po otwarciu witryny Animacje.htm w domy(cid:286)lnej przegl(cid:261)darce internetowej i przesu- ni(cid:266)ciu kursora myszy w obr(cid:266)bie napisu Wydawnictwo Helion nast(cid:261)pi jego (cid:286)ciemnienie. Po usuni(cid:266)ciu kursora myszy z regionu wyznaczonego przez ten napis poziom jego prze- zroczysto(cid:286)ci zostanie przywrócony do 100 . W kolejnym przyk(cid:225)adzie zmodyfikuj(cid:266) kod witryny Animacje.htm w taki sposób, aby zmiana jasno(cid:286)ci napisu Wydawnictwo Helion realizowana by(cid:225)a w sposób ci(cid:261)g(cid:225)y. Wymaga to dokonania nast(cid:266)puj(cid:261)cych czynno(cid:286)ci: Kup książkęPoleć książkę 146 Cz(cid:246)(cid:264)(cid:232) I (cid:105) Technologia JavaScript 1. Skrypt witryny Animacje.htm uzupe(cid:225)nij o polecenia z listingu 10.4. Listing 10.4. Animowanie zmian jasno(cid:286)ci obiektu HTML var animacjaZmianyJasnosci; function animujJasnosc(idElementu, sciemnianie, jasnoscDocelowa, (cid:180)krokZmianyJasnosci) { var element = document.getElementById(idElementu); if (!element) return; var aktualnaJasnoscElementu = odczytajJasnosc(idElementu); var nowaJasnosc; if (sciemnianie) { nowaJasnosc = aktualnaJasnoscElementu - krokZmianyJasnosci; if (nowaJasnosc jasnoscDocelowa) nowaJasnosc = jasnoscDocelowa; } else { nowaJasnosc = aktualnaJasnoscElementu + krokZmianyJasnosci; if (nowaJasnosc jasnoscDocelowa) nowaJasnosc = jasnoscDocelowa; } ustawJasnosc(idElementu, nowaJasnosc); // Czy docelowy poziom jasno(cid:286)ci zosta(cid:225) ju(cid:298) osi(cid:261)gni(cid:266)ty? if (nowaJasnosc != jasnoscDocelowa) { // Je(cid:286)li nie, to animuj dalej... animacjaZmianyJasnosci = setTimeout( animujJasnosc( + idElementu + , + sciemnianie + , + jasnoscDocelowa + , + krokZmianyJasnosci + ); , 50); } else { // W przeciwnym wypadku przerwij animacj(cid:266) zatrzymajAnimacje(animacjaZmianyJasnosci); } } function zatrzymajAnimacje(animacja) { clearTimeout(animacja); } 2. Definicj(cid:266) sekcji body witryny zmodyfikuj wed(cid:225)ug nast(cid:266)puj(cid:261)cego wzoru: body onload= ustawJasnosc( blok1 , 10); div id= blok1 class= zolty onmouseover= ustawJasnosc( blok1 , 5); (cid:180)onmouseout= ustawJasnosc( blok1 , 10) Wydawnictwo Helion /div div id= blok1 class= zolty onmouseover= zatrzymajAnimacje( (cid:180)animacjaZmianyJasnosci);animujJasnosc( blok1 , true, 2, 1); (cid:180)onmouseout= zatrzymajAnimacje(animacjaZmianyJasnosci);animujJasnosc( (cid:180) blok1 , false, 10, 1); Wydawnictwo Helion /div /body Kup książkęPoleć książkę Rozdzia(cid:228) 10. (cid:105) Animacje 147 Po zaimplementowaniu powy(cid:298)szych zmian w witrynie Animacje.htm nale(cid:298)y j(cid:261) otwo- rzy(cid:252) w domy(cid:286)lnej przegl(cid:261)darce internetowej. Umieszczenie kursora myszy ponad na- pisem Wydawnictwo Helion spowoduje wyzwolenie animacji zmieniaj(cid:261)cej jego jasno(cid:286)(cid:252). Efekt ko(cid:276)cowy powinien by(cid:252) analogiczny do przedstawionego na rysunku 10.1. Prze- suni(cid:266)cie kursora myszy w obszarze zajmowanym przez napis Wydawnictwo Helion powoduje wyzwolenie kodu JavaScript zwi(cid:261)zanego ze zdarzeniem mouseover, czyli wywo(cid:225)anie metod zatrzymajAnimacje oraz animujJasnosc. Pierwsza z nich powoduje zatrzymanie wcze(cid:286)niej wykonywanej animacji i rozpocz(cid:266)cie nowej. Ci(cid:261)g(cid:225)a zmiana poziomu jasno(cid:286)ci wybranego elementu HTML zosta(cid:225)a zaimplementowana w funkcji animujJasnosc, której dzia(cid:225)anie sprowadza si(cid:266) do odczytania bie(cid:298)(cid:261)cego poziomu ja- sno(cid:286)ci danego obiektu HTML. W nast(cid:266)pnym kroku, w zale(cid:298)no(cid:286)ci od warto(cid:286)ci para- metru sciemnianie, zmniejszam lub odpowiednio zwi(cid:266)kszam nowy poziom jasno(cid:286)ci. Je(cid:286)li ten nowy poziom odpowiada warto(cid:286)ci docelowej, to animacja zostaje zako(cid:276)czona. W przeciwnym wypadku nast(cid:266)puje ponowne wywo(cid:225)anie funkcji animujJasnosc przy u(cid:298)yciu znanego ju(cid:298) mechanizmu, wykorzystuj(cid:261)cego funkcj(cid:266) setTimeout. Rysunek 10.1. Efekt ko(cid:276)cowy animacji typu (cid:286)ciemnianie Dzi(cid:266)ki temu, (cid:298)e funkcja animujJasnosc jest napisana stosunkowo ogólnie, mo(cid:298)na j(cid:261) równie(cid:298) wykorzysta(cid:252) zarówno do (cid:286)ciemniania, jak i rozja(cid:286)niania wybranego obiektu HTML. Z tego powodu funkcj(cid:266) animujJasnosc skojarzy(cid:225)em ze zdarzeniem mouseout, z t(cid:261) tylko ró(cid:298)nic(cid:261), (cid:298)e w przypadku rozja(cid:286)niania obiektu poziomem docelowym jasno- (cid:286)ci jest jasno(cid:286)(cid:252) maksymalna, czyli 10. Wobec tego usuni(cid:266)cie kursora myszy z obszaru wyznaczonego przez napis Wydawnictwo Helion spowoduje jego rozja(cid:286)nienie. Zmiana rozmiaru W tym podrozdziale zaimplementuj(cid:266) animacj(cid:266) zmiany rozmiaru wybranego elementu HTML. Realizacj(cid:266) tego zadania mo(cid:298)na wykona(cid:252) poprzez analogi(cid:266) do przyk(cid:225)adu przed- stawionego w poprzednim podrozdziale. Wobec tego wykonaj nast(cid:266)puj(cid:261)ce kroki: 1. Sekcj(cid:266) body witryny Animacje.htm uzupe(cid:225)nij o nast(cid:266)puj(cid:261)ce polecenia: Kup książkęPoleć książkę 148 Cz(cid:246)(cid:264)(cid:232) I (cid:105) Technologia JavaScript div id= blok2 class= brazowy onmouseover= animujSzerokosc( blok2 , true, (cid:180)100, 125, 1); onmouseout= animujSzerokosc( blok2 , false, (cid:180)parseInt(this.style.width), 100, 1); Wydawnictwo Helion /div 2. W nag(cid:225)ówku witryny przejd(cid:296) do sekcji script i umie(cid:286)(cid:252) w niej definicj(cid:266) funkcji z listingu 10.5. Listing 10.5. Animacja zmiany szeroko(cid:286)ci wybranego elementu HTML function animujSzerokosc(idElementu, rozszerzanie, szerokoscPoczatkowa, (cid:180)szerokoscDocelowa, krokZmianySzerokosci) { var element = document.getElementById(idElementu); if (!element) return; var aktualnaSzerokoscElementu = element.style.width ? parseInt(element.style.width) : szerokoscPoczatkowa; var nowaSzerokosc; if (rozszerzanie) { nowaSzerokosc = aktualnaSzerokoscElementu + krokZmianySzerokosci; if (nowaSzerokosc szerokoscDocelowa) nowaSzerokosc = szerokoscDocelowa; } else { nowaSzerokosc = aktualnaSzerokoscElementu - krokZmianySzerokosci; if (nowaSzerokosc szerokoscDocelowa) nowaSzerokosc = szerokoscDocelowa; } element.style.width = nowaSzerokosc + px ; // Czy docelowa szeroko(cid:286)(cid:252) zosta(cid:225)a ju(cid:298) osi(cid:261)gni(cid:266)ta? if (nowaSzerokosc != szerokoscDocelowa) { // Je(cid:286)li nie, to animuj dalej... element.animacjaZmianySzerokosci = setTimeout( animujSzerokosc( + (cid:180)idElementu + , + rozszerzanie + , + szerokoscPoczatkowa + , + szerokoscDocelowa + , + krokZmianySzerokosci + ); , 10); } else { // W przeciwnym wypadku przerwij animacj(cid:266) zatrzymajAnimacje(element.animacjaZmianySzerokosci); } } Konstrukcja powy(cid:298)szego przyk(cid:225)adu jest bardzo podobna do animacji przezroczysto(cid:286)ci obiektów HTML. Jednak(cid:298)e zamiast w(cid:225)a(cid:286)ciwo(cid:286)ci style.opacity modyfikuj(cid:266) warto(cid:286)(cid:252) zapisan(cid:261) w polu style.width. Dzi(cid:266)ki temu po umieszczeniu kursora myszy w obr(cid:266)bie wyznaczonym przez napis Wydawnictwo Helion uzyskuje si(cid:266) efekt analogiczny do przedstawionego na rysunku 10.2. Kup książkęPoleć książkę Rozdzia(cid:228) 10. (cid:105) Animacje 149 Rysunek 10.2. Efekt ko(cid:276)cowy animacji zmiany szeroko(cid:286)ci elementu HTML Animacja zmiany rozmiarów elementów HTML znajduje zastosowanie w wyró(cid:298)nianiu aktywnych (aktualnie zaznaczonych) elementów menu aplikacji internetowej. W celu zasymulowania takiego menu trzykrotnie powiel(cid:266) br(cid:261)zowy blok div zawieraj(cid:261)cy na- pis Wydawnictwo Helion. Po tej operacji sekcja body witryny Animacje.htm powin- na mie(cid:252) nast(cid:266)puj(cid:261)c(cid:261) posta(cid:252): body onload= ustawJasnosc( blok1 , 10); !-- div id= blok1 class= zolty onmouseover= ustawJasnosc( blok1 , 5); (cid:180)onmouseout= ustawJasnosc( blok1 , 10) Wydawnictwo Helion /div -- div id= blok1 class= zolty onmouseover= zatrzymajAnimacje( (cid:180)animacjaZmianyJasnosci);animujJasnosc( blok1 , true, 2, 1); (cid:180)onmouseout= zatrzymajAnimacje(animacjaZmianyJasnosci);animujJasnosc( blok1 , (cid:180)false, 10, 1); Wydawnictwo Helion /div div id= blok2 class= brazowy onmouseover= zatrzymajAnimacje( (cid:180)animacjaZmianySzerokosci);animujSzerokosc( blok2 , true, 100, 125, 1); (cid:180)onmouseout= zatrzymajAnimacje(animacjaZmianySzerokosci);animujSzerokosc( (cid:180) blok2 , false, parseInt(this.style.width), 100, 1); Wydawnictwo (cid:180)Helion /div div id= blok3 class= brazowy onmouseover= zatrzymajAnimacje( (cid:180)animacjaZmianySzerokosci);animujSzerokosc( blok3 , true, 100, 125, 1); (cid:180)onmouseout= zatrzymajAnimacje(animacjaZmianySzerokosci);animujSzerokosc( (cid:180) blok3 , false, parseInt(this.style.width), 100, 1); Wydawnictwo (cid:180)Helion /div div id= blok4 class= brazowy onmouseover= zatrzymajAnimacje( (cid:180)animacjaZmianySzerokosci);animujSzerokosc( blok4 , true, 100, 125, 1); (cid:180)onmouseout= zatrzymajAnimacje(animacjaZmianySzerokosci);animujSzerokosc( (cid:180) blok4 , false, parseInt(this.style.width), 100, 1); Wydawnictwo (cid:180)Helion /div div id= blok5 class= brazowy onmouseover= zatrzymajAnimacje( (cid:180)animacjaZmianySzerokosci);animujSzerokosc( blok5 , true, 100, 125, 1); (cid:180)onmouseout= zatrzymajAnimacje(animacjaZmianySzerokosci);animujSzerokosc( (cid:180) blok5 , false, parseInt(this.style.width), 100, 1); Wydawnictwo (cid:180)Helion /div /body Po otwarciu tak zmodyfikowanej witryny w domy(cid:286)lnej przegl(cid:261)darce internetowej i prze- suwaniu kursora myszy po br(cid:261)zowych elementach HTML (rysunek 10.2) nietrudno stwierdzi(cid:252), (cid:298)e efekt dzia(cid:225)ania aplikacji jest daleki od zamierzonego. Poszczególne efekty Kup książkęPoleć książkę 150 Cz(cid:246)(cid:264)(cid:232) I (cid:105) Technologia JavaScript animacji s(cid:261) zatrzymywane i uruchamiane w sposób chaotyczny. Dzieje si(cid:266) tak dlate- go, (cid:298)e ka(cid:298)dorazowe przesuni(cid:266)cie kursora myszy z jednego obiektu HTML na inny za- trzymuje animacj(cid:266) danego elementu i uruchamia animacj(cid:266) kolejnego obiektu HTML. Powinni(cid:286)my zapewni(cid:252), aby efekt animacji wszystkich elementów wykonywany by(cid:225) niezale(cid:298)nie. Wobec tego funkcj(cid:266) animujSzerokosc nale(cid:298)y zmodyfikowa(cid:252) wed(cid:225)ug wzo- ru z listingu 10.6. Natomiast w sekcji body witryny Animacje.htm nale(cid:298)y usun(cid:261)(cid:252) wy- wo(cid:225)ania funkcji zatrzymajAnimacje: body onload= ustawJasnosc( blok1 , 10); !-- div id= blok1 class= zolty onmouseover= ustawJasnosc( blok1 , 5); (cid:180)onmouseout= ustawJasnosc( blok1 , 10) Wydawnictwo Helion /div -- div id= blok1 class= zolty onmouseover= zatrzymajAnimacje( (cid:180)animacjaZmianyJasnosci);animujJasnosc( blok1 , true, 2, 1); (cid:180)onmouseout= zatrzymajAnimacje(animacjaZmianyJasnosci);animujJasnosc( blok1 , (cid:180)false, 10, 1); Wydawnictwo Helion /div div id= blok2 class= brazowy onmouseover= animujSzerokosc( blok2 , true, (cid:180)100, 125, 1); onmouseout= animujSzerokosc( blok2 , false, (cid:180)parseInt(this.style.width), 100, 1); Wydawnictwo Helion /div div id= blok3 class= brazowy onmouseover= animujSzerokosc( blok3 , true, (cid:180)100, 125, 1); onmouseout= animujSzerokosc( blok3 , false, (cid:180)parseInt(this.style.width), 100, 1); Wydawnictwo Helion /div div id= blok4 class= brazowy onmouseover= animujSzerokosc( blok4 , true, (cid:180)100, 125, 1); onmouseout= animujSzerokosc( blok4 , false, (cid:180)parseInt(this.style.width), 100, 1); Wydawnictwo Helion /div div id= blok5 class= brazowy onmouseover= animujSzerokosc( blok5 , true, (cid:180)100, 125, 1); onmouseout= animujSzerokosc( blok5 , false, (cid:180)parseInt(this.style.width), 100, 1); Wydawnictwo Helion /div /body Listing 10.6. Dynamiczna modyfikacja definicji obiektu var animacjaZmianySzerokosci; function animujSzerokosc(idElementu, rozszerzanie, szerokoscPoczatkowa, (cid:180)szerokoscDocelowa, krokZmianySzerokosci) { var element = document.getElementById(idElementu); if (!element) return; if (element.animacjaZmianySzerokosci) zatrzymajAnimacje(element.animacjaZmianySzerokosci); var aktualnaSzerokoscElementu = element.style.width ? parseInt(element.style.width) : szerokoscPoczatkowa; var nowaSzerokosc; if (rozszerzanie) { nowaSzerokosc = aktualnaSzerokoscElementu + krokZmianySzerokosci; if (nowaSzerokosc szerokoscDocelowa) nowaSzerokosc = szerokoscDocelowa; } else { nowaSzerokosc = aktualnaSzerokoscElementu - krokZmianySzerokosci; if (nowaSzerokosc szerokoscDocelowa) nowaSzerokosc = szerokoscDocelowa; } element.style.width = nowaSzerokosc + px ; Kup książkęPoleć książkę Rozdzia(cid:228) 10. (cid:105) Animacje 151 // Czy docelowa szeroko(cid:286)(cid:252) zosta(cid:225)a ju(cid:298) osi(cid:261)gni(cid:266)ta? if (nowaSzerokosc != szerokoscDocelowa) { // Je(cid:286)li nie, to animuj dalej... element.animacjaZmianySzerokosci = setTimeout( animujSzerokosc( + idElementu + , + rozszerzanie + , + szerokoscPoczatkowa + , + szerokoscDocelowa + , + krokZmianySzerokosci + ); , 10); } else { // W przeciwnym wypadku przerwij animacj(cid:266) zatrzymajAnimacje(element.animacjaZmianySzerokosci); } } JavaScript jest j(cid:266)zykiem dynamicznym, co umo(cid:298)liwia dynamiczn(cid:261) zmian(cid:266) definicji obiektów w trakcie interpretacji polece(cid:276). Wykorzysta(cid:225)em t(cid:266) w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) do uzupe(cid:225)nie- nia definicji animowanych obiektów o pole animacjaZmianySzerokosci, które s(cid:225)u(cid:298)y do przechowania informacji o tym, czy dany element jest aktualnie animowany. Dzi(cid:266)ki temu witryna dzia(cid:225)a poprawnie (rysunek 10.3). Rysunek 10.3. Animacja zmiany rozmiaru dzia(cid:225)a teraz niezale(cid:298)nie dla ka(cid:298)dego elementu HTML. Dzi(cid:266)ki dynamicznemu charakterowi j(cid:266)zyka JavaScript informacja o aktualnym stanie animacji zosta(cid:225)a zapisana w definicji odpowiedniego obiektu HTML Ruch Projekt animacji elementów HTML rozpoczn(cid:266) od zaimplementowania funkcji, która „przesuwa” wybrane obiekty drzewa DOM. Innymi s(cid:225)owy, projektowana procedura b(cid:266)dzie modyfikowa(cid:225)a wspó(cid:225)rz(cid:266)dne okre(cid:286)laj(cid:261)ce po(cid:225)o(cid:298)enie tych elementów. Do tego celu wykorzystam w(cid:225)a(cid:286)ciwo(cid:286)ci style.position, style.left oraz style.top. Pierwsza z nich pos(cid:225)u(cid:298)y mi do skonfigurowania sposobu pozycjonowania wybranego obiektu HTML na wzgl(cid:266)dny (ang. relative). Dzi(cid:266)ki temu dany element drzewa DOM b(cid:266)dzie móg(cid:225) zo- sta(cid:252) przesuni(cid:266)ty w dowolne miejsce witryny wzgl(cid:266)dem swojej pozycji pocz(cid:261)tkowej. Kup książkęPoleć książkę 152 Cz(cid:246)(cid:264)(cid:232) I (cid:105) Technologia JavaScript W(cid:225)a(cid:286)ciwo(cid:286)ci style.left oraz style.top pozwalaj(cid:261) zdefiniowa(cid:252) wspó(cid:225)rz(cid:266)dne (w pik- selach) okre(cid:286)laj(cid:261)ce odleg(cid:225)o(cid:286)(cid:252) od lewego górnego naro(cid:298)nika witryny do lewego górnego naro(cid:298)nika wybranego obiektu HTML. Nale(cid:298)y pami(cid:266)ta(cid:252), (cid:298)e warto(cid:286)ci style.left oraz style.top i wszystkie pozosta(cid:225)e s(cid:225)u(cid:298)(cid:261)ce do konfiguracji wspó(cid:225)rz(cid:266)dnych wykorzystuj(cid:261) komputerowy uk(cid:225)ad wspó(cid:225)rz(cid:266)dnych, którego pocz(cid:261)tek znajduje si(cid:266) w lewym górnym rogu ekranu. Kierunek wzrostu odci(cid:266)tych pozostaje niezmieniony, natomiast warto(cid:286)ci rz(cid:266)dnych rosn(cid:261) wraz z rosn(cid:261)c(cid:261) odleg(cid:225)o(cid:286)ci(cid:261) od górnej kraw(cid:266)dzi ekranu. Bior(cid:261)c pod uwag(cid:266) te ogólne zasady, definicja funkcji, której zadaniem jest zmiana po- (cid:225)o(cid:298)enia wybranego elementu drzewa DOM, mo(cid:298)e mie(cid:252) posta(cid:252) przedstawion(cid:261) na listin- gu 10.7. W celu zaprezentowania dzia(cid:225)ania tej procedury powi(cid:261)(cid:298)(cid:266) j(cid:261) ze zdarzeniem onmouseover bloku o identyfikatorze blok6 (listing 10.8). Po umieszczeniu kursora my- szy w obr(cid:266)bie tego bloku zostanie on przesuni(cid:266)ty o wektor [200 px, 200 px], czyli do punktu o wspó(cid:225)rz(cid:266)dnych: gdzie punkt o wspó(cid:225)rz(cid:266)dnych (x, y) jest pozycj(cid:261) pocz(cid:261)tkow(cid:261) bloku o identyfikatorze blok6, któr(cid:261) w JavaScript mo(cid:298)na odczyta(cid:252) za pomoc(cid:261) w(cid:225)asno(cid:286)ci clientWidth oraz clientHeight. Listing 10.7. Zmiana po(cid:225)o(cid:298)enia wybranego elementu drzewa DOM function przesunElement(idElementu, x, y) { var element = document.getElementById(idElementu); if (!element) return; var szerokosc = parseInt(element.clientWidth); var wysokosc = parseInt(element.clientHeight); // Czy nowe wspó(cid:225)rz(cid:266)dne nie spowoduj(cid:261) wysuni(cid:266)cia obiektu poza dost(cid:266)pny obszar? // Je(cid:286)li tak, to skoryguj nowe wspó(cid:225)rz(cid:266)dne if (x + szerokosc window.innerWidth) x = window.innerWidth - szerokosc; if (y + wysokosc window.innerHeight) y = window.innerHeight - wysokosc; element.style.position = absolute ; element.style.left = x + px ; element.style.top = y + px ; } Listing 10.8. Umieszczenie kursora myszy w obr(cid:266)bie obszaru zajmowanego przez obiekt blok6 spowoduje jego przesuni(cid:266)cie o wektor [200 px, 200 px] div id= blok6 class= zolty onmouseover= przesunElement( blok6 , 200, (cid:180)200) Wydawnictwo Helion /div Kup książkęPoleć książkę Rozdzia(cid:228) 10. (cid:105) Animacje 153 Na podstawie przedstawionej powy(cid:298)ej metody przemieszczania obiektów drzewa DOM mo(cid:298)na implementowa(cid:252) procedury, których celem jest animacja ruchu obiektów HTML. W moim przyk(cid:225)adzie wybrany element drzewa DOM b(cid:266)dzie porusza(cid:225) si(cid:266) rów- nolegle do osi odci(cid:266)tych. Ruch b(cid:266)dzie wykonywany cyklicznie do momentu jego za- trzymania. Do tego celu wykorzystam metod(cid:266) przesunElement oraz zestaw funkcji setTimeout i clearTimeout: 1. Uzupe(cid:225)nij skrypt witryny Animacje.htm o definicj(cid:266) funkcji ruchPoziomy z listingu 10.9. Listing 10.9. Implementacja animacji ruchu wybranego elementu drzewa DOM wzd(cid:225)u(cid:298) osi odci(cid:266)tych function ruchPoziomy(idElementu, poczatek, koniec, krok) { var element = document.getElementById(idElementu); if (!element) return; // Korekcja parametrów pocz(cid:261)tkowych var szerokoscElementu = element.clientWidth; if (poczatek 0) poczatek = 0; if (poczatek koniec) poczatek = koniec; if (koniec + szerokoscElementu window.innerWidth) koniec = window.innerWidth - szerokoscElementu; if (koniec poczatek) koniec = poczatek; if (!element.aktualnaPozycja) element.aktualnaPozycja = element.clientLeft; // Warto(cid:286)(cid:252) zmiennej nowaPozycja zale(cid:298)y od tego, // czy element powraca do pozycji pocz(cid:261)tkowej, // czy porusza si(cid:266) w kierunku pozycji ko(cid:276)cowej var nowaPozycja = element.powrot ? element.aktualnaPozycja - krok : element.aktualnaPozycja + krok; element.aktualnaPozycja = nowaPozycja; // Przesuni(cid:266)cie odbywa si(cid:266) równolegle do osi odci(cid:266)tych. // Z tego powodu wspó(cid:225)rz(cid:266)dna y punktu docelowego nie ulega zmianie przesunElement(idElementu, nowaPozycja, element.style.top); element.animacja = setTimeout( ruchPoziomy( + idElementu + , + poczatek + , + koniec + , + krok + ); , 10); if (nowaPozycja = koniec) element.powrot = true; else if(nowaPozycja = poczatek) element.powrot = false; } function zatrzymajRuchPoziomy(idElementu) { var element = document.getElementById(idElementu); if (!element) return; zatrzymajAnimacje(element.animacja) } Kup książkęPoleć książkę 154 Cz(cid:246)(cid:264)(cid:232) I (cid:105) Technologia JavaScript 2. W sekcji body witryny Animacje.htm umie(cid:286)(cid:252) definicje dwóch przycisków oraz bloku o identyfikatorze blok7 (listing 10.10). Listing 10.10. Definicja animowanego bloku oraz przycisków, których domy(cid:286)lne metody zdarzeniowe uruchamiaj(cid:261) i zatrzymuj(cid:261) animacj(cid:266) ruchu wzd(cid:225)u(cid:298) osi OX div id= blok7 class= brazowy Poruszaj(cid:200)cy si(cid:218) element /div p input id= button1 type= button value= Rozpocznij ruch poziomy (cid:180)onclick= ruchPoziomy( blok7 , 0, window.innerWidth, 5) / input id= button2 type= button value= Zatrzymaj ruch poziomy (cid:180)onclick= zatrzymajRuchPoziomy( blok7 ) / /p 3. Otwórz witryn(cid:266) Animacje.htm w domy(cid:286)lnej przegl(cid:261)darce internetowej. 4. Kliknij przycisk z etykiet(cid:261) Rozpocznij ruch poziomy. Wynik dzia(cid:225)ania aplikacji powinien by(cid:252) analogiczny do tego z rysunku 10.4. Rysunek 10.4. Animacja ruchu wzd(cid:225)u(cid:298) osi OX Naturalnym rozszerzeniem funkcjonalno(cid:286)ci zaimplementowanej w tym podrozdziale b(cid:266)dzie zaprojektowanie funkcji, której zadaniem b(cid:266)dzie animacja ruchu wzd(cid:225)u(cid:298) osi rz(cid:266)dnych oraz w dwóch kierunkach jednocze(cid:286)nie. Pozostawiam to jednak jako zadanie dla czytelnika. Kup książkęPoleć książkę Rozdzia(cid:228) 10. (cid:105) Animacje 155 Podsumowanie Animacje s(cid:261) cz(cid:266)sto spotykanym elementem interaktywnych aplikacji internetowych. W tym rozdziale pokaza(cid:225)em, w jaki sposób mo(cid:298)na je zaimplementowa(cid:252) za pomoc(cid:261) technologii JavaScript. Nie ulega w(cid:261)tpliwo(cid:286)ci fakt, (cid:298)e dzi(cid:266)ki popularnym bibliotekom JavaScript, jak chocia(cid:298)by jQuery, która jest zintegrowana z domy(cid:286)lnym szablonem aplikacji ASP.NET MVC, tworzenie i aplikowanie animacji jest znacznie prostsze ni(cid:298) samodzielne ich implementowanie. Jednak(cid:298)e w sytuacji, gdy dost(cid:266)pne sposoby anima- cji s(cid:261) niewystarczaj(cid:261)ce na potrzeby konkretnego projektu, samodzielna umiej(cid:266)tno(cid:286)(cid:252) ich implementacji mo(cid:298)e okaza(cid:252) si(cid:266) nieoceniona. Kup książkęPoleć książkę 156 Cz(cid:246)(cid:264)(cid:232) I (cid:105) Technologia JavaScript Kup książkęPoleć książkę Cz(cid:246)(cid:264)(cid:232) II Biblioteka jQuery Kup książkęPoleć książkę 158 Cz(cid:246)(cid:264)(cid:232) II (cid:105) Biblioteka jQuery Kup książkęPoleć książkę Skorowidz A D adres URL, 107, 140 AJAX, 14, 107, 198 animacja, 143, 147, 159, 170 efekty wbudowane, 263 jQuery, 189 kalendarza, 219 kolorów, 258, 261 przezroczysto(cid:286)ci, 143 rozmiar, 147 ruch, 151, 266 ASP.NET, 14 Web Forms, 14 atrybut href, 79 id, 65, 66 onload, 75 src, 49 tag, 66 B biblioteka, 49 jQuery, Patrz: jQuery jQuery UI, Patrz: jQuery UI tworzenie, 49 b(cid:225)(cid:261)d, 27 kompilacji, 16 breakpoints, Patrz: punkt przerwania brudnopis, 61, 63 C ciasteczko, cookie, 138 CSS, 54, 61, 73, 123, 124, 143, 171, 258, 269 selektor, Patrz: selektor w(cid:225)a(cid:286)ciwo(cid:286)(cid:252), 189 czujka, 57, 61 dane tabela, Patrz: tabela danych walidacja, 14, 115, 183 data, 214, 217, 225 debugowanie, 58 dokument, 90 DOM, 100, 105, 143 Document Object Model, 100 operacje na elementach, 176 przeszukiwanie, 159 drag drop, 241, 246 drzewo, Patrz: DOM E easing, 266 ECMA, 13 ECMAScript, 13 element potomny, 175 escape character, Patrz: znak modyfikacji F Firebug, 61 focus, 90 formularz, 90, 91, 117, 159, 195 walidacja, 115, 116, 123, 183 wysy(cid:225)anie, 116, 125 wyszukiwanie elementów, 198 funkcja, 18, Patrz te(cid:298): metoda boolowska, 162 definicja, 16, 18 implementowane inline, 185 parseFloat, 111 parseInt, 111 trygonometryczna, 127 zwrotna, 185 Kup książkęPoleć książkę 272 JavaScript i jQuery G Google Chrome, 48, 186, 187 grafika, 161 H hiper(cid:225)(cid:261)cze, 73, 79, 90, 226 HTML, 13, 159 kod, 54 I instrukcja break, 34, 41, 113 continue, 41, 42 if, 25, 26, 27 if else, 76 p(cid:266)tli, Patrz: p(cid:266)tla prompt, 27 steruj(cid:261)ca if, 24 switch, 25, 32, 41 IntelliSense, 75 interfejs Metro, 15 u(cid:298)ytkownika, 159, 170, 241 przenoszenie elementu, 241 upuszczanie elementu, 246 Internet Explorer, 46, 107, 108, 143 Internet Explorer 9, 53 tabblesorter, 204, 206 Tabs, 210, 232, 233, 238 jQuery UI JScript, 13 system zarz(cid:261)dzania wersjami, 216 K kalendarz, 215, 217 animacja, 219 karta, 232 kaskadowe arkusze stylów, Patrz: CSS klasa dodawanie, 260 prze(cid:225)(cid:261)czanie, 258 usuwanie, 260 zamiana, 260 klawiatura, 94 klawisz, 96 wci(cid:286)ni(cid:266)ty, 90 kod maszynowy, 16 po(cid:286)redni, 16 (cid:296)ród(cid:225)owy, 16 kolor, 261 komentarz, 17 kompilacja warunkowa, 13 komponent wyboru Checkbox, 90 konkatenacja, 17 konsola, 55, 61 kontrolka FileUpload, 90 J L JavaScript, 13 dyskretny, 159 kod (cid:296)ród(cid:225)owy, Patrz: kod (cid:296)ród(cid:225)owy kompilacja, 16 jQuery, 14, 159, 171 animacja, Patrz: animacja jQuery historia, 160 importowanie, 160 mobile, 160 wtyczka, 204, 209, 210 Accordion, 210, 238 Autocomplete, 210 Button, 210, 226 Datepicker, 210, 214, 215, 217, 218, 219, 225 Dialog, 210, 219 pager, 204 ProgressBar, 210 slider, 212 Slider, 210 kontekstów wykonania procedur JavaScript, liczba lista pseudolosowa, 127 sta(cid:225)oprzecinkowa, 17 zmiennoprzecinkowa, 17 61 sortowanie, 252 litera(cid:225), 21 logowanie, 14 (cid:227) (cid:225)a(cid:276)cuch tekstowy, 16, 17, 131 d(cid:225)ugo(cid:286)(cid:252), 118 znakowy porównywanie, 122 Kup książkęPoleć książkę Skorowidz 273 M Matulewski Jacek, 212 mechanizm drag drop, 241 easingu, 266 menu kontekstowe, 93 metoda $.ajax, 186, 187 $.get, 187 .accordion, 240 .ajax, 198 .ajaxStart, 198, 199, 201 .ajaxStop, 198, 199 .animate, 189, 190, 192, 194, 258, 261 .append, 176 .appendTo, 176 .bind, 180 .button, 226, 229 .buttonset, 226, 229 .dialog, 221, 222, 226 .draggable, 241, 242, 243, 245, 250 .droppable, 246 .effect, 266 .html, 178 .insert, 177 .isDefaultPrevented, 183 .off, 180 .on, 180 .prepend, 176 .prependTo, 176 .preventDefault, 183 .remove, 177 .resizable, 256, 257 .selectable, 250 .sortable, 253, 256 .switchClass, 260, 261 .tabs, 233, 236 .text, 178 .toggleClass, 258, 259 .trigger, 181, 182 .triggerHandler, 181, 182 .unbind, 180 .wrap, 178 addClass, 163, 260 addEventListener, 96, 99, 178 alert, 67, 136 attachEvent, 96, 99 back, 139 clearTimeout, 130 concat, 131 createElement, 100, 103 createTHead, 111 detachEvent, 99 each, 168 filter, 175 find, 169 firstChild, 100 forward, 139 GET, 107 getAttribute, 102 getDate, 130 getElementById, 66, 100 getElementByName, 66 getElementByTagName, 66 getElementsByTagName, 109 getMonth, 130 go, 139 hide, 168, 169 hover, 180, 181 HTTP, 107 insertBefore, 100 insertCell, 111 insertRow, 111 JSON.parse, 134 JSON.stringify, 137 match, 122, 131 mousedown, 184 mousemove, 184 parent, 168 parse, 134 pop, 75 POST, 107 push, 75 removeAttribute, 102, 103 removeClass, 164, 260 removeEventListener, 99 resizeTo, 87 reverse, 75 setAttribute, 102, 103 setTimeout, 130, 147 show, 169 slice, 75 sort, 75 split, 131, 132 stringify, 134 substring, 131 toggle, 169, 170 toLocaleDateString, 129 toLocaleTimeString, 129 toLowerCase, 131 toString, 136 toUpperCase, 131 window.focus, 81 window.open, 84 window.open, 81 zdarzeniowa, 172 formularza, 115 Kup książkęPoleć książkę 274 JavaScript i jQuery motyw, 269 domy(cid:286)lny, 269 Mozilla Firefox, 47, 53, 61, 63 MSDN, 127 MVC, 14 mysz przycisk, 90, 91 prawy blokowanie, 14 wska(cid:296)nik, 90 N NaN, 17, 111 narz(cid:266)dze deweloperskie, 53 node, Patrz: w(cid:266)ze(cid:225) Not a Number, Patrz: NaN O obiekt Array, 110, 127 Date, 127, 129 definicja, 16 document, 66, 100, 161 document.forms, 117 event, 184 filtrowanie, 171 history, 100, 138, 139 HTML, 69, 90 JSON, 127, 134 konstruktor, 135 location, 100, 138, 140 Math, 127 navigator, 138 potomny, 100 String, 127, 131 table, 73 tworzenie, 135 wbudowany, 127 window, 87, 100 XMLHttpRequest, 107, 108 obrazu (cid:225)adowanie, 90 okno dialogowe, 219, 221 modalne, 125, 219 operacja matematyczna, 127 operator , 32 ?:, 76 ^, 32 |, 32 ++, 34 alternatywy, Patrz: operator | arytmetyczny, 16 bitowy, 32 dekrementacji, Patrz: operator -- dodawania, 17 inkrementacji, Patrz: operator ++ koniunkcji, Patrz: operator logiczny, 24 !, 24 !=, 24 , 25, 30, 31 ||, 25, 29 =, 24 ==, 24 , 24 =, 24, 31 alternatywy, Patrz: operator logiczny || koniunkcji, Patrz: operator logiczny priorytet, 31 odejmowania, 17 przedrostkowy, 34 przyrostkowy, 34 ró(cid:298)nicy symetrycznej, Patrz: operator ^ P pami(cid:266)(cid:252), 16 pasek post(cid:266)pu, 210 p(cid:266)tla, 35 do while, 37, 41, 42 for, 38, 41 for in, 105, 113 while, 35, 41, 42 PHP, 14 plik .js, 49 multimedialny, 161 XML, 106, 108 plug-in, Patrz: jQuery wtyczka pole tekstowe, 66, 90, 91 maskowane, 90 wyboru, 226 polecenie, Patrz: instrukcja pozycjonowanie wzgl(cid:266)dne, 151 procedura, 18 protokó(cid:225) file, 108 HTTP, 107 transmisji, 134 przegl(cid:261)darka Google Chrome, Patrz: Google Chrome Internet Explorer, Patrz: Internet Explorer Kup książkęPoleć książkę Skorowidz 275 internetowa okno, 79, 83, 84, Patrz: okno w(cid:225)a(cid:286)ciwo(cid:286)ci, 138 konfiguracja, 45 Mozilla Firefox, Patrz: Mozilla Firefox przes(cid:225)anianie lokalne, 23 przezroczysto(cid:286)(cid:252), 145 przycisk, 36, 37, 38, 41, 42, 75, 87, 168, 173, 226 radio, 90, 226, 229 punkt kontrolny, Patrz: punkt przerwania przerwania, 58, 59 ramka, 90 Resig John, 160 R S selektor, 160, 162, 165, 173, 198 serializacja SOAP, 134 Single Object Access Protocol, Patrz: SOAP skrypt, 15 czas realizacji, 54 debugowanie, Patrz: debugowanie implementowanie, 53 j(cid:266)zyk, 15 kliencki, 13, 14, 15, 45 miejsce wykonania, 15 serwerowy, 14, 15 (cid:286)ledzenie, 58 typ, 15 uruchamiany po stronie klienta, Patrz: skrypt:kliencki po stronie serwera, Patrz: skrypt:serwerowy w konsoli, 56 s(cid:225)ownik, 137 s(cid:225)owo kluczowe case, 33 function, 18 new, 110 return, 18 switch, 24, 25, Patrz te(cid:298): instrukcja switch this, 72 var, 16, 17, 21, 135 SOAP, 134 sta(cid:225)a matematyczna, 127 stos wywo(cid:225)a(cid:276), 61 strona internetowa, 49 suwak, 212 T tabela danych, 110 nag(cid:225)ówek, 111 sortowanie, 204 tablica asocjacyjna, 137 tekstu wyrównywanie, 75 ThemeRoller, 269 U unobtrusive JavaScript, Patrz: JavaScript dyskretny W warstwa funkcjonalna, 159 prezentacji, 159 w(cid:266)ze(cid:225), 100 atrybuty, 102 tworzenie, 102 witryny modyfikacja dynamiczna, 13 w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) activeClass, 248 backgroundColor, 261 borderBottomColor, 261 borderLeftColor, 261 borderRightColor, 261 borderTopColor, 261 button, 184 checked, 83 childNodes, 109 className, 124 clientHeight, 152 clientWidth, 152 color, 261 disabled, 84 firstChild, 109 hash, 140 height, 191 host, 140 hostname, 140 hoverClass, 248 href, 140 innerHeight, 87 innerWidth, 87 lastChild, 109 left, 191 length, 139 name, 119 Kup książkęPoleć książkę 276 JavaScript i jQuery w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) nodeValue, 109 opacity, 143, 145 outlineColor, 261 pathname, 140 port, 140 protocol, 140 responseText, 107 responseXML, 107, 108 revert, 250 screen.availHeight, 87 screen.availWidth, 87 search, 140 selectedIndex, 119 style, 143 style.display, 77 style.filter, 143 style.left, 151 style.opacity, 143 style.position, 151 style.top, 151 top, 191 value, 119 width, 191 wyra(cid:298)enie regularne, 120, 162 Z zak(cid:225)adka, Patrz: karta zdarzenie, 178, 213 $(document).ready, 186 argumenty, 184 change, 198, 214 click, 168 dotycz(cid:261)ce klawiatury, 89 myszy, 89 witryny, 89 drag, 243 hover, 259 mouseout, 147 obs(cid:225)uga aktywacja, 180 deaktywacja, 180 domy(cid:286)lna, 183 onabort, 90 onblur, 90 onchange, 90, 122 onclick, 90 oncontextmenu, 93 ondblclick, 90 ondragdrop, 90 onerror, 90 onfocus, 90 onkeydown, 89, 90, 94 onkeypress, 90 onkeyup, 89, 90 onload, 89, 91, 97 onmousedown, 89, 90, 93 onmouseout, 89, 90 onmouseover, 89, 90, 152 onmouseup, 90 onmove, 90 onreset, 90, 125 onresize, 90 onselect, 91 onSelect, 219, 225 onsubmit, 91, 116, 125 onunload, 89, 91 ready, 161 rejestracja, 179 slide, 214 start, 243 stop, 243 window.onload, 161 wyzwolenie, 181 zmienna, 16 deklaracja, 17 globalna, 17, 21 lokalna, 17, 61, 135 deklaracja, 16 (cid:286)ledzenie, 57, 60 tablicowa, 75 deklaracja, 75 typ deklaracja, 16 liczbowy, 16 tekstowy, 16 znakowy, 16 znacznik a , 79 br / , 21 script , 15, 16, 45, 49 table , 100 td , 100 tr , 100 u , 21 HTML, 100, 210 przej(cid:286)cia do nowej linii, Patrz: znacznik(cid:3) br / XML, 108 znak przykrywanie, Patrz: przes(cid:225)anianie lokalne [ ], 75 {}, 18 backslash, Patrz: znak uko(cid:286)nik wsteczny cudzys(cid:225)ów, 21 modyfikacji, 20 Kup książkęPoleć książkę Skorowidz 277 \n, 20 nawias kwadratowy, Patrz: znak [ ] podwójny uko(cid:286)nik, 17 slash, Patrz: znak uko(cid:286)nik specjalny, 21 \t, 20 uko(cid:286)nik wsteczny, 21 (cid:275) (cid:298)(cid:261)danie asynchroniczne, 159 GET, 187 HTTP, 107, 187 Kup książkęPoleć książkę 278 JavaScript i jQuery Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

JavaScript i jQuery. Kompletny przewodnik dla programistów interaktywnych aplikacji internetowych w Visual Studio
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ą: