Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00281 005347 12767781 na godz. na dobę w sumie
JavaScript i jQuery. Nieoficjalny podręcznik. Wydanie III - ebook/pdf
JavaScript i jQuery. Nieoficjalny podręcznik. Wydanie III - ebook/pdf
Autor: Liczba stron: 664
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-0550-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Duet nie do pokonania!

JavaScript to język, którego początki sięgają lat dziewięćdziesiątych XX wieku. Po początkowych problemach, gdy był masowo blokowany przez użytkowników, obecnie przeżywa swój najlepszy okres. Trudno wyobrazić sobie bez niego nowoczesną aplikację internetową. Niewątpliwie duży wpływ na wzrost popularności JavaScriptu miała biblioteka jQuery, która usprawniła korzystanie z tego języka.

Ta książka to wyjątkowy podręcznik prezentujący możliwości niesamowitego duetu JavaScript – jQuery. Sięgnij po nią, a zagwarantujesz sobie godziny pasjonującej lektury i odkrywania składni języka, typowych konstrukcji oraz najlepszych technik tworzenia programów. Ponadto dowiesz się, jak sprawnie manipulować obiektami w drzewie DOM, reagować na zdarzenia oraz wymieniać informacje z serwerem za pomocą żądań AJAX. Na sam koniec zdobędziesz bezcenną wiedzę na temat diagnozowania problemów ze skryptami, korzystania z dokumentacji jQuery oraz przechowywania danych w magazynie lokalnym użytkownika. Książka ta jest obowiązkową lekturą dla każdego webdevelopera!Spraw, by Twoje strony żyły. Korzystaj z jQuery, żeby tworzyć interaktywne elementy reagujące na poczynania użytkowników.
  • Poznaj jQuery UI. Rozbuduj tworzone interfejsy użytkownika stosując grupy kart, okna dialogowe, widżety do wyboru daty i tak dalej.
  • Wyświetlaj ładne i użyteczne formularze. Pobieraj informacje od użytkowników, pomagaj klientom w zakupach i zapewniaj członkom społeczności możliwość dzielenia się przemyśleniami.
  • Wyjdź poza ramy przeglądarki korzystając z technologii Ajax. Komunikuj się z serwerem WWW, by aktualizować strony bez ich odświeżania.
  • Zastosuj swoje nowe umiejętności w praktyce. Krok po kroku twórz nowe aplikacje, korzystając przy tym z jQuery i widżetów jQuery UI.
  • Poznawaj zaawansowane zagadnienia. Korzystaj z narzędzia ThemeRoller by dostosowywać wygląd widżetów; unikaj popularnych błędów, które programiści często popełniają.

Wykorzystaj w pełni możliwości współczesnych przeglądarek internetowych!



David Sawyer McFarland – od ponad 20 lat zajmuje się tworzeniem stron WWW i zarządzaniem tymi stronami. Jest prezesem firmy Sawyer McFarland Media. Wcześniej pracował jako webmaster na Uniwersytecie Stanu Kalifornia oraz w Berkeley Multimedia Research Center. Jest autorem książek poświęconych Adobe Dreamweaverowi oraz CSS.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: JavaScript jQuery: The Missing Manual, Third Edition Tłumaczenie: Piotr Rajca ISBN: 978-83-283-0547-2 © 2015 Helion S.A. Authorized Polish translation of the English edition of JavaScript jQuery: The Missing Manual, 3rd Edition ISBN 9781491947074 © 2014 Sawyer McFarland Media, Inc. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. Polish edition copyright © 2015 by Helion S.A. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. 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. 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/jsjqn3.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jsjqn3 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:321)ci Nieoficjalna czo(cid:281)ówka ...................................................................................... 13 Wprowadzenie .................................................................................................. 17 Cz(cid:253)(cid:316)(cid:235) I. Wprowadzenie do j(cid:253)zyka JavaScript ..............................35 Rozdzia(cid:281) 1. Pierwszy program w j(cid:241)zyku JavaScript .........................................37 Wprowadzenie do programowania ............................................................. 38 Czym jest program komputerowy? ......................................................... 40 Jak doda(cid:240) kod JavaScript do strony? ........................................................... 40 Zewn(cid:258)trzne pliki JavaScript .................................................................... 42 Pierwszy program w j(cid:258)zyku JavaScript ....................................................... 46 Dodawanie tekstu do stron ........................................................................ 48 Do(cid:298)(cid:238)czanie zewn(cid:258)trznych plików JavaScript .............................................. 49 Wykrywanie b(cid:298)(cid:258)dów .................................................................................. 51 Konsola JavaScript w przegl(cid:238)darce Chrome ............................................. 52 Konsola przegl(cid:238)darki Internet Explorer ................................................... 55 Konsola JavaScript w przegl(cid:238)darce Firefox ............................................... 56 Konsola b(cid:298)(cid:258)dów w przegl(cid:238)darce Safari ..................................................... 57 Rozdzia(cid:281) 2. Gramatyka j(cid:241)zyka JavaScript ........................................................59 Instrukcje ................................................................................................. 59 Wbudowane funkcje .................................................................................. 60 Typy danych ............................................................................................. 60 Liczby .................................................................................................... 61 (cid:297)a(cid:300)cuchy znaków .................................................................................. 61 Warto(cid:321)ci logiczne ................................................................................... 62 Zmienne ................................................................................................... 63 Tworzenie zmiennych ............................................................................ 63 U(cid:353)ywanie zmiennych ............................................................................. 66 Kup książkęPoleć książkę U(cid:353)ywanie typów danych i zmiennych ........................................................67 Podstawowe operacje matematyczne ......................................................68 Kolejno(cid:321)(cid:240) wykonywania operacji .............................................................69 (cid:297)(cid:238)czenie (cid:298)a(cid:300)cuchów znaków ...................................................................69 (cid:297)(cid:238)czenie liczb i (cid:298)a(cid:300)cuchów znaków .........................................................70 Zmienianie warto(cid:321)ci zmiennych .............................................................71 Przyk(cid:298)ad — u(cid:353)ywanie zmiennych do tworzenia komunikatów ....................72 Przyk(cid:298)ad — pobieranie informacji ...............................................................74 Tablice ......................................................................................................77 Tworzenie tablic .....................................................................................78 U(cid:353)ywanie elementów tablicy ..................................................................79 Dodawanie elementów do tablicy ............................................................80 Usuwanie elementów z tablicy ................................................................82 Przyk(cid:298)ad — zapisywanie danych na stronie za pomoc(cid:238) tablic ......................83 Krótka lekcja o obiektach ...........................................................................86 Komentarze ...............................................................................................88 Kiedy u(cid:353)ywa(cid:240) komentarzy? .....................................................................89 Komentarze w tej ksi(cid:238)(cid:353)ce ........................................................................90 Rozdzia(cid:281) 3. Dodawanie struktur logicznych i steruj(cid:221)cych ...............................93 Programy reaguj(cid:238)ce inteligentnie ...............................................................93 Podstawy instrukcji warunkowych ..........................................................94 Uwzgl(cid:258)dnianie planu awaryjnego ............................................................98 Sprawdzanie kilku warunków .................................................................98 Bardziej skomplikowane warunki .........................................................102 Zagnie(cid:353)d(cid:353)anie instrukcji warunkowych ................................................104 Wskazówki na temat pisania instrukcji warunkowych ..........................104 Przyk(cid:298)ad — u(cid:353)ywanie instrukcji warunkowych .........................................105 Obs(cid:298)uga powtarzaj(cid:238)cych si(cid:258) zada(cid:300) za pomoc(cid:238) p(cid:258)tli ...................................109 P(cid:258)tle while ............................................................................................109 P(cid:258)tle i tablice ........................................................................................111 P(cid:258)tle for ................................................................................................112 P(cid:258)tle do-while .......................................................................................114 Funkcje — wielokrotne korzystanie z przydatnego kodu ...........................115 Krótki przyk(cid:298)ad .....................................................................................117 Przekazywanie danych do funkcji .........................................................118 Pobieranie informacji z funkcji .............................................................120 Unikanie konfliktów mi(cid:258)dzy nazwami zmiennych ...............................121 Przyk(cid:298)ad — prosty quiz .............................................................................124 Cz(cid:253)(cid:316)(cid:235) II. Wprowadzenie do biblioteki jQuery ............................ 131 Rozdzia(cid:281) 4. Wprowadzenie do jQuery ...........................................................133 Kilka s(cid:298)ów o bibliotekach JavaScript .........................................................133 Jak zdoby(cid:240) jQuery? ..................................................................................135 Do(cid:298)(cid:238)czanie pliku jQuery z serwera CDN ...............................................137 Pobieranie pliku jQuery ........................................................................138 4 S P I S T R E (cid:285) C I Kup książkęPoleć książkę Dodawanie jQuery do strony ................................................................... 139 Podstawowe informacje o modyfikowaniu stron WWW ........................... 142 Zrozumie(cid:240) DOM .................................................................................... 145 Pobieranie elementów stron na sposób jQuery ......................................... 147 Proste selektory .................................................................................... 148 Selektory zaawansowane ...................................................................... 151 Filtry jQuery ........................................................................................ 153 Zrozumienie kolekcji jQuery ................................................................ 155 Dodawanie tre(cid:321)ci do stron ....................................................................... 157 Zast(cid:258)powanie i usuwanie wybranych elementów .................................. 160 Ustawianie i odczyt atrybutów znaczników .............................................. 160 Klasy .................................................................................................... 161 Odczyt i modyfikacja w(cid:298)a(cid:321)ciwo(cid:321)ci CSS ................................................. 163 Jednoczesna zmiana wielu w(cid:298)a(cid:321)ciwo(cid:321)ci CSS .......................................... 164 Odczyt, ustawienia i usuwanie atrybutów HTML .................................... 166 Wykonanie akcji na ka(cid:353)dym elemencie kolekcji ....................................... 167 Funkcje anonimowe ............................................................................. 168 this oraz $(this) .................................................................................... 169 Automatycznie tworzone, wyró(cid:353)niane cytaty ........................................... 171 Opis rozwi(cid:238)zania ................................................................................. 172 Kod rozwi(cid:238)zania ................................................................................... 172 Rozdzia(cid:281) 5. Akcja i reakcja — o(cid:339)ywianie stron za pomoc(cid:221) zdarze(cid:283) ..............177 Czym s(cid:238) zdarzenia? ................................................................................. 177 Zdarzenia zwi(cid:238)zane z mysz(cid:238) ................................................................. 179 Zdarzenia zwi(cid:238)zane z dokumentem i oknem ........................................ 180 Zdarzenia zwi(cid:238)zane z formularzami ..................................................... 181 Zdarzenia zwi(cid:238)zane z klawiatur(cid:238) .......................................................... 182 Obs(cid:298)uga zdarze(cid:300) przy u(cid:353)yciu jQuery ........................................................ 182 Przyk(cid:298)ad — prezentacja obs(cid:298)ugi zdarze(cid:300) ................................................... 185 Zdarzenia specyficzne dla biblioteki jQuery ............................................. 190 Oczekiwanie na wczytanie kodu HTML ............................................... 190 Umieszczanie i usuwanie wska(cid:351)nika myszy z elementu ........................ 192 Obiekt reprezentuj(cid:238)cy zdarzenie ........................................................... 194 Blokowanie standardowych reakcji na zdarzenia ................................... 195 Usuwanie zdarze(cid:300) ................................................................................ 196 Zaawansowane zarz(cid:238)dzanie zdarzeniami ................................................. 197 Inne sposoby stosowania funkcji on() ................................................... 199 Delegowanie zdarze(cid:300) przy u(cid:353)yciu funkcji on() ....................................... 200 Przyk(cid:298)ad — jednostronicowa lista FAQ .................................................... 204 Omówienie zadania ............................................................................. 204 Tworzenie kodu ................................................................................... 205 Rozdzia(cid:281) 6. Animacje i efekty ..........................................................................211 Efekty biblioteki jQuery ........................................................................... 211 Podstawowe wy(cid:321)wietlanie i ukrywanie ................................................. 212 Wygaszanie oraz rozja(cid:321)nianie elementów ............................................. 213 Przesuwanie elementów ....................................................................... 216 S P I S T R E (cid:285) C I 5 Kup książkęPoleć książkę Przyk(cid:298)ad — wysuwany formularz logowania ............................................216 Tworzenie kodu ...................................................................................217 Animacje ................................................................................................220 Tempo animacji ...................................................................................221 Wykonywanie operacji po zako(cid:300)czeniu efektu ..........................................223 Przyk(cid:298)ad — animowany pasek ze zdj(cid:258)ciami ..............................................225 Tworzenie kodu ...................................................................................227 jQuery i przej(cid:321)cia oraz animacje CSS3 ......................................................231 jQuery i przej(cid:321)cia CSS ...........................................................................232 jQuery i animacje CSS ..........................................................................234 Rozdzia(cid:281) 7. Popularne zastosowania jQuery .................................................239 Zamiana rysunków ..................................................................................239 Zmienianie atrybutu src rysunków .......................................................240 Podmiana obrazków przy u(cid:353)yciu jQuery ................................................241 Wst(cid:258)pne wczytywanie rysunków ..........................................................242 Efekt rollover z u(cid:353)yciem obrazków ........................................................243 Przyk(cid:298)ad — dodawanie efektu rollover z u(cid:353)yciem rysunków ......................245 Omówienie zadania ..............................................................................245 Tworzenie kodu ...................................................................................246 Przyk(cid:298)ad — galeria fotografii z efektami wizualnymi .................................249 Omówienie zadania ..............................................................................249 Tworzenie kodu ...................................................................................251 Kontrola dzia(cid:298)ania odno(cid:321)ników ................................................................255 Pobieranie odno(cid:321)ników w kodzie JavaScript ..........................................255 Okre(cid:321)lanie lokalizacji docelowej ...........................................................255 Blokowanie domy(cid:321)lnego dzia(cid:298)ania odno(cid:321)ników .....................................256 Otwieranie zewn(cid:258)trznych odno(cid:321)ników w nowym oknie ...........................258 Tworzenie nowych okien .........................................................................260 W(cid:298)a(cid:321)ciwo(cid:321)ci okien ................................................................................261 Przedstawienie wtyczek jQuery ................................................................265 Czego szuka(cid:240) we wtyczce jQuery? .........................................................266 Podstawy stosowania wtyczek jQuery ...................................................268 Responsywne menu nawigacyjne .............................................................270 Kod HTML ...........................................................................................270 Kod CSS ...............................................................................................273 Kod JavaScript ......................................................................................273 Przyk(cid:298)ad ...............................................................................................273 Dostosowywanie wygl(cid:238)du wtyczki SmartMenus ...................................277 Rozdzia(cid:281) 8. Wzbogacanie formularzy ............................................................279 Wprowadzenie do formularzy ..................................................................279 Pobieranie elementów formularzy .........................................................281 Pobieranie i ustawianie warto(cid:321)ci elementów formularzy ........................283 Sprawdzanie stanu przycisków opcji i pól wyboru ..................................284 Zdarzenia zwi(cid:238)zane z formularzami .....................................................285 6 S P I S T R E (cid:285) C I Kup książkęPoleć książkę Inteligentne formularze ........................................................................... 290 Aktywowanie pierwszego pola formularza ............................................ 290 Wy(cid:298)(cid:238)czanie i w(cid:298)(cid:238)czanie pól ................................................................... 291 Ukrywanie i wy(cid:321)wietlanie opcji formularza ........................................... 293 Przyk(cid:298)ad — proste wzbogacanie formularza .............................................. 294 Aktywowanie pola ................................................................................ 295 Wy(cid:298)(cid:238)czanie pól formularza ................................................................... 295 Ukrywanie pól formularza .................................................................... 298 Walidacja formularzy .............................................................................. 299 Wtyczka Validation .............................................................................. 301 Podstawowa walidacja .......................................................................... 302 Zaawansowana walidacja ..................................................................... 305 Okre(cid:321)lanie stylu komunikatów o b(cid:298)(cid:258)dach ............................................. 310 Przyk(cid:298)ad zastosowania walidacji .............................................................. 311 Prosta walidacja ................................................................................... 312 Walidacja zaawansowana ..................................................................... 313 Walidacja pól wyboru i przycisków opcji ............................................... 316 Formatowanie komunikatów o b(cid:298)(cid:258)dach ................................................ 319 Cz(cid:253)(cid:316)(cid:235) III. Wprowadzenie do biblioteki jQuery UI....................... 321 Rozdzia(cid:281) 9. Rozbudowa interfejsu u(cid:339)ytkownika ..........................................323 Czym jest jQuery UI? .............................................................................. 323 Dlaczego warto u(cid:353)ywa(cid:240) jQuery UI? .......................................................... 325 Stosowanie jQuery UI ............................................................................. 327 Dodawanie jQuery UI do strony ........................................................... 329 Wy(cid:321)wietlanie komunikatów przy u(cid:353)yciu okien dialogowych .................... 330 Miniprzyk(cid:298)ad — tworzenie okna dialogowego ....................................... 332 Okre(cid:321)lanie w(cid:298)a(cid:321)ciwo(cid:321)ci okna dialogowego ............................................ 333 Miniprzyk(cid:298)ad — przekazywanie opcji do okna dialogowego ................... 336 Otwieranie okna dialogowego w odpowiedzi na zdarzenia ..................... 338 Dodawanie przycisków do okien dialogowych ....................................... 339 Miniprzyk(cid:298)ad — dodawanie przycisków do okien dialogowych .............. 341 Prezentowanie informacji w etykietkach ekranowych .............................. 345 Miniprzyk(cid:298)ad — szybkie dodawanie etykietek ekranowych .................... 347 Opcje etykietek ekranowych ................................................................. 348 Umieszczanie w etykietkach tre(cid:321)ci HTML ........................................... 349 Miniprzyk(cid:298)ad — umieszczanie kodu HTML w etykietkach ekranowych .. 350 Dodawanie zestawów kart ....................................................................... 351 Opcje zestawów kart ............................................................................ 354 Miniprzyk(cid:298)ad — dodawanie zestawu kart .............................................. 356 Karty prezentuj(cid:238)ce zawarto(cid:321)(cid:240) ............................................................... 360 Oszcz(cid:258)dzanie miejsca z wykorzystaniem akordeonów .............................. 363 Miniprzyk(cid:298)ad — tworzenie akordeonu jQuery UI .................................. 366 Dodawanie menu .................................................................................... 368 Tworzenie poziomego paska nawigacyjnego ......................................... 371 S P I S T R E (cid:285) C I 7 Kup książkęPoleć książkę Rozdzia(cid:281) 10. Formularze raz jeszcze ...............................................................375 Wybieranie dat ze stylem .........................................................................375 Okre(cid:321)lanie w(cid:298)a(cid:321)ciwo(cid:321)ci kalendarzy .......................................................377 Przyk(cid:298)ad — pole do wyboru daty urodzenia ............................................381 Stylowe rozwijane listy ............................................................................383 Okre(cid:321)lanie w(cid:298)a(cid:321)ciwo(cid:321)ci list rozwijanych ...............................................385 Wykonywanie operacji po wybraniu opcji z listy ....................................386 Stylowe przyciski .....................................................................................389 Dostosowywanie przycisków ................................................................390 Poprawianie wygl(cid:238)du przycisków opcji i pól wyboru .................................391 Dostarczanie podpowiedzi przy u(cid:353)yciu automatycznego uzupe(cid:298)niania ......393 Generowanie podpowiedzi przy u(cid:353)yciu tablicy danych ...........................395 Stosowanie osobnych etykiet i warto(cid:321)ci .................................................397 Pobieranie danych automatycznego uzupe(cid:298)niania z serwera ..................398 Opcje wid(cid:353)etu Autocomplete ................................................................400 Przyk(cid:298)ad — wid(cid:353)ety UI usprawniaj(cid:238)ce formularze ....................................401 Rozdzia(cid:281) 11. Dostosowywanie wygl(cid:221)du jQuery UI ........................................407 Prezentacja narz(cid:258)dzia ThemeRoller .........................................................407 Pobieranie i stosowanie nowego tematu ...................................................413 Dodawanie w(cid:298)asnego tematu do istniej(cid:238)cych stron WWW ....................414 Wi(cid:258)cej informacji o arkuszach stylów jQuery UI ...................................415 Przes(cid:298)anianie stylów jQuery UI ................................................................415 Zasada szczegó(cid:298)owo(cid:321)ci ..........................................................................416 Jak s(cid:238) okre(cid:321)lane style wid(cid:353)etów jQuery UI? ...........................................418 Rozdzia(cid:281) 12. Interakcje i efekty jQuery UI ......................................................421 Wid(cid:353)et Draggable ....................................................................................421 Dodawanie wid(cid:353)etu Draggable do strony ...............................................422 Miniprzyk(cid:298)ad — zastosowanie wid(cid:353)etu Draggable .................................423 Opcje wid(cid:353)etu Draggable ......................................................................424 Zdarzenia wid(cid:353)etu Draggable ................................................................430 Wid(cid:353)et Droppable ....................................................................................434 Stosowanie wid(cid:353)etu Droppable .............................................................435 Opcje wid(cid:353)etu Droppable ......................................................................436 Zdarzenia wid(cid:353)etu Droppable ...............................................................438 Przyk(cid:298)ad — technika „przeci(cid:238)gnij i upu(cid:321)(cid:240)” ................................................443 Sortowanie elementów strony ..................................................................449 Stosowanie wid(cid:353)etu Sortable .................................................................449 Opcje wid(cid:353)etu Sortable .........................................................................451 Zdarzenia wid(cid:353)etu Sortable ...................................................................455 Metody wid(cid:353)etów Sortable ....................................................................458 Efekty jQuery UI .....................................................................................461 Efekty ...................................................................................................462 Tempo animacji ...................................................................................465 Animowanie zmiany klas .....................................................................466 8 S P I S T R E (cid:285) C I Kup książkęPoleć książkę Cz(cid:253)(cid:316)(cid:235) IV. Zaawansowane zastosowania jQuery i j(cid:253)zyka JavaScript .......................................................................469 Rozdzia(cid:281) 13. Wprowadzenie do technologii AJAX ........................................ 471 Czym jest AJAX? .................................................................................... 471 AJAX — podstawy ................................................................................... 473 Elementy uk(cid:298)adanki ............................................................................. 474 Komunikacja z serwerem WWW .......................................................... 476 AJAX w bibliotece jQuery ........................................................................ 479 U(cid:353)ywanie metody load() ....................................................................... 480 Przyk(cid:298)ad — korzystanie z metody load() ................................................ 482 Metody get() i post() ............................................................................. 486 Formatowanie danych przesy(cid:298)anych na serwer ...................................... 487 Przetwarzanie danych zwróconych z serwera ........................................ 490 Obs(cid:298)uga b(cid:298)(cid:258)dów .................................................................................... 494 Przyk(cid:298)ad — korzystanie z metody $.get() ............................................... 495 Format JSON .......................................................................................... 500 Dost(cid:258)p do danych z obiektów JSON ...................................................... 502 Z(cid:298)o(cid:353)one dane JSON .............................................................................. 503 Prezentacja JSONP .................................................................................. 506 Dodawanie do witryny kana(cid:298)u Flickr ....................................................... 506 Tworzenie adresu URL ......................................................................... 508 (cid:297)(cid:238)czenie opcji ...................................................................................... 510 Stosowanie metody $.getJSON() ........................................................... 510 Prezentacja danych kana(cid:298)u Flickr w formacie JSON .............................. 511 Przyk(cid:298)ad — dodawanie zdj(cid:258)(cid:240) z Flickr na w(cid:298)asnej stronie ........................... 512 Rozdzia(cid:281) 14. Tworzenie aplikacji do obs(cid:281)ugi listy zada(cid:283) ............................... 519 Przegl(cid:238)d aplikacji .................................................................................... 519 Dodanie przycisku .................................................................................. 520 Dodanie okna dialogowego ...................................................................... 522 Dodawanie zada(cid:300) .................................................................................... 525 Oznaczanie zadania jako wykonanego ..................................................... 531 Delegowanie zdarze(cid:300) ........................................................................... 531 Usuwanie zada(cid:300) ...................................................................................... 536 Dalsze kroki ............................................................................................ 538 Edycja zada(cid:300) ........................................................................................ 538 Potwierdzanie usuni(cid:258)cia ....................................................................... 539 Zapisywanie listy ................................................................................. 539 Inne pomys(cid:298)y ....................................................................................... 540 S P I S T R E (cid:285) C I 9 Kup książkęPoleć książkę Cz(cid:253)(cid:316)(cid:235) V. Wskazówki, sztuczki i rozwi(cid:233)zywanie problemów ....541 Rozdzia(cid:281) 15. Wykorzystywanie wszystkich mo(cid:339)liwo(cid:306)ci jQuery ................... 543 Przydatne informacje i sztuczki zwi(cid:238)zane z jQuery ...................................543 $() to to samo, co jQuery() .....................................................................543 Zapisywanie pobranych elementów w zmiennych .................................544 Jak najrzadsze dodawanie tre(cid:321)ci ............................................................546 Optymalizacja selektorów ....................................................................547 Korzystanie z dokumentacji jQuery .........................................................548 Czytanie dokumentacji na stronie jQuery .............................................552 Poruszanie si(cid:258) po DOM ...........................................................................554 Inne funkcje do manipulacji kodem HTML .............................................560 Rozdzia(cid:281) 16. Zaawansowane techniki j(cid:241)zyka JavaScript ..............................565 Stosowanie (cid:298)a(cid:300)cuchów znaków ................................................................565 Okre(cid:321)lanie d(cid:298)ugo(cid:321)ci (cid:298)a(cid:300)cucha ...............................................................566 Zmiana wielko(cid:321)ci znaków w (cid:298)a(cid:300)cuchu ..................................................566 Przeszukiwanie (cid:298)a(cid:300)cuchów znaków: zastosowanie indexOf() .................567 Pobieranie fragmentu (cid:298)a(cid:300)cucha przy u(cid:353)yciu metody slice() ....................569 Odnajdywanie wzorów w (cid:298)a(cid:300)cuchach .......................................................570 Tworzenie i stosowanie podstawowych wyra(cid:353)e(cid:300) regularnych ................571 Tworzenie wyra(cid:353)e(cid:300) regularnych ...........................................................572 Grupowanie fragmentów wzorców ........................................................576 Przydatne wyra(cid:353)enia regularne .............................................................577 Dopasowywanie wzorców .....................................................................582 Zast(cid:258)powanie tekstów ..........................................................................585 Testowanie wyra(cid:353)e(cid:300) regularnych ..........................................................585 Stosowanie liczb ......................................................................................587 Zamiana (cid:298)a(cid:300)cucha znaków na liczb(cid:258) .....................................................587 Sprawdzanie wyst(cid:258)powania liczb ..........................................................589 Zaokr(cid:238)glanie liczb ................................................................................589 Formatowanie warto(cid:321)ci monetarnych ...................................................590 Tworzenie liczb losowych .....................................................................591 Daty i godziny .........................................................................................592 Pobieranie miesi(cid:238)ca ..............................................................................593 Okre(cid:321)lanie dnia tygodnia ......................................................................594 Pobieranie czasu ...................................................................................594 Tworzenie daty innej ni(cid:353) bie(cid:353)(cid:238)ca ..........................................................597 Tworzenie bardziej wydajnego kodu JavaScript ........................................599 Zapisywanie ustawie(cid:300) w zmiennych .....................................................600 Zapisywanie ustawie(cid:300) w obiektach .......................................................601 Operator trójargumentowy ...................................................................602 Instrukcja Switch .................................................................................603 (cid:297)(cid:238)czenie tablic i dzielenie (cid:298)a(cid:300)cuchów znaków .......................................605 (cid:297)(cid:238)czenie ró(cid:353)nych elementów ...................................................................606 U(cid:353)ywanie zewn(cid:258)trznych plików JavaScript ...........................................606 Tworzenie kodu JavaScript o krótkim czasie wczytywania ........................609 10 S P I S T R E (cid:285) C I Kup książkęPoleć książkę Rozdzia(cid:281) 17. Diagnozowanie i rozwi(cid:221)zywanie problemów ...........................611 Najcz(cid:258)stsze b(cid:298)(cid:258)dy w kodzie JavaScript ...................................................... 611 Brak symboli ko(cid:300)cowych ...................................................................... 612 Cudzys(cid:298)owy i apostrofy ........................................................................ 616 U(cid:353)ywanie s(cid:298)ów zarezerwowanych ......................................................... 617 Pojedynczy znak równo(cid:321)ci w instrukcjach warunkowych ...................... 617 Wielko(cid:321)(cid:240) znaków ................................................................................. 618 Nieprawid(cid:298)owe (cid:321)cie(cid:353)ki do zewn(cid:258)trznych plików JavaScript ................... 618 Nieprawid(cid:298)owe (cid:321)cie(cid:353)ki w zewn(cid:258)trznych plikach JavaScript .................... 619 Znikaj(cid:238)ce zmienne i funkcje ................................................................. 620 Testowanie aplikacji przy u(cid:353)yciu konsoli ................................................. 621 Otwieranie konsoli ............................................................................... 621 Przegl(cid:238)danie b(cid:298)(cid:258)dów przy u(cid:353)yciu konsoli ............................................... 623 (cid:320)ledzenie dzia(cid:298)ania skryptu za pomoc(cid:238) funkcji console.log() .................. 623 Przyk(cid:298)ad — korzystanie z konsoli .......................................................... 624 Diagnozowanie zaawansowane ............................................................ 628 Przyk(cid:298)ad diagnozowania .......................................................................... 633 Cz(cid:253)(cid:316)(cid:235) VI. Dodatki ......................................................................... 641 Dodatek A. Materia(cid:281)y zwi(cid:221)zane z j(cid:241)zykiem JavaScript ............................... 643 (cid:350)ród(cid:298)a informacji .................................................................................... 643 Witryny ............................................................................................... 643 Ksi(cid:238)(cid:353)ki ................................................................................................. 644 Podstawy j(cid:258)zyka JavaScript ...................................................................... 644 Witryny ............................................................................................... 644 Ksi(cid:238)(cid:353)ki ................................................................................................. 644 jQuery ..................................................................................................... 645 Witryny ............................................................................................... 645 Ksi(cid:238)(cid:353)ki ................................................................................................. 645 Zaawansowany j(cid:258)zyk JavaScript .............................................................. 645 Artyku(cid:298)y i prezentacje .......................................................................... 646 Witryny ............................................................................................... 646 Ksi(cid:238)(cid:353)ki ................................................................................................. 646 CSS ......................................................................................................... 647 Witryny ............................................................................................... 647 Ksi(cid:238)(cid:353)ki ................................................................................................. 647 Skorowidz ....................................................................................................... 649 S P I S T R E (cid:285) C I 11 Kup książkęPoleć książkę 12 S P I S T R E (cid:285) C I Kup książkęPoleć książkę 14 ROZDZIA(cid:224) Tworzenie aplikacji do obs(cid:298)ugi listy zada(cid:300) Biblioteki jQuery i jQuery UI udost(cid:258)pniaj(cid:238) narz(cid:258)dzia do tworzenia zaledwie w kilku prostych krokach profesjonalnie wygl(cid:238)daj(cid:238)cych aplikacji internetowych. Pierwsza z nich mo(cid:353)e zadba(cid:240) o wybieranie elementów strony, dodawanie do niej nowych elementów oraz aktualizowanie DOM. Z kolei biblioteka jQuery UI udost(cid:258)pnia wspaniale wygl(cid:238)daj(cid:238)ce wid(cid:353)ety, sposoby interakcji z u(cid:353)ytkownikiem oraz efekty animacji, rozwi(cid:238)zuj(cid:238)c tym samym wiele najcz(cid:258)(cid:321)ciej wyst(cid:258)puj(cid:238)cych problemów zwi(cid:238)zanych z opracowaniem interfejsu u(cid:353)ytkownika. Korzystaj(cid:238)c z obu tych bi- bliotek, mo(cid:353)na unikn(cid:238)(cid:240) (cid:353)mudnych oraz czasoch(cid:298)onnych zada(cid:300) i skoncentrowa(cid:240) si(cid:258) wy(cid:298)(cid:238)cznie na tworzeniu dynamicznej, interaktywnej aplikacji. W tym rozdziale przedstawiony zosta(cid:298) proces pisania prostej aplikacji do zarz(cid:238)dzania list(cid:238) zada(cid:300). Przegl(cid:238)d aplikacji Lista zada(cid:300), któr(cid:238) napiszemy w tym rozdziale, b(cid:258)dzie pozwala(cid:298)a u(cid:353)ytkownikom na wykonywanie nast(cid:258)puj(cid:238)cych operacji. (cid:120) Dodawanie nowych zada(cid:300) do listy. W tym celu dodamy do niej wid(cid:353)et przyci- sku jQuery UI (nr 1 na rysunku 14.1), a nast(cid:258)pnie po klikni(cid:258)ciu wy(cid:321)wietlimy okno dialogowe jQuery UI. (cid:120) Oznaczanie zadania jako wykonanego. Ka(cid:353)de zadanie na li(cid:321)cie b(cid:258)dzie mie(cid:240) pole wyboru z lewej strony (numer 2 na rysunku 14.1). Klikni(cid:258)cie tego pola b(cid:258)dzie automatycznie usuwa(cid:240) zadanie z listy Zadania do wykonania i prze- nosi(cid:240) na list(cid:258) Zadania wykonane. (cid:120) Przeci(cid:238)ganie zada(cid:300) z listy Zadania do wykonania na list(cid:258) Zadania wy- konane i na odwrót (numer 3 na rysunku 14.1). Cho(cid:240) klikanie pola wyboru niew(cid:238)tpliwie spe(cid:298)ni swoj(cid:238) rol(cid:258), to niby czemu mamy si(cid:258) ogranicza(cid:240) do tylko jednego sposobu oznaczania zada(cid:300) jako wykonanych? Korzystaj(cid:238)c z wid(cid:353)etu Kup książkęPoleć książkę Dodanie przycisku Rysunek 14.1. Biblioteki jQuery oraz jQuery UI sprawiaj(cid:233), (cid:348)e napisanie prostej listy zada(cid:295) do zrobienia jest relatywnie (cid:293)atwe. Pozwalaj(cid:233) one na rozwi(cid:233)zywanie z(cid:293)o(cid:348)onych problemów zwi(cid:233)zanych z tworzeniem inter- fejsów u(cid:348)ytkownika, takich jak opracowanie okien dialogowych, list z mo(cid:348)liwo(cid:316)ci(cid:233) sortowania oraz animo- wanie wybranych elementów stron. Dzi(cid:253)ki nim b(cid:253)dziemy mogli skoncentrowa(cid:235) si(cid:253) wy(cid:293)(cid:233)cznie na zaimple- mentowaniu mo(cid:348)liwo(cid:316)ci funkcjonalnych aplikacji Sortable jQuery UI, mo(cid:353)emy tak(cid:353)e pozwoli(cid:240) u(cid:353)ytkownikom na oznaczanie zda(cid:300) jako wykonanych poprzez przeci(cid:238)ganie ich na list(cid:258) Zadania wykonane. Co wi(cid:258)cej, mo(cid:353)emy tak(cid:353)e pozwoli(cid:240) na przeci(cid:238)ganie zada(cid:300) z powrotem na list(cid:258) Zadania do wykonania. (cid:120) Usuwanie zada(cid:300) z listy po klikni(cid:258)ciu przycisku Usu(cid:300) (numer 4 na rysun- ku 14.1). Aby zapewni(cid:240) u(cid:353)ytkownikom mo(cid:353)liwo(cid:321)(cid:240) ca(cid:298)kowitego usuni(cid:258)cia zadania, dodamy przycisk Usu(cid:300), którego klikni(cid:258)cie ca(cid:298)kowicie usunie zada- nie ze strony. Zastosujemy przy tym jeden z efektów jQuery UI, by ca(cid:298)a operacja wygl(cid:238)da(cid:298)a interesuj(cid:238)co. Poniewa(cid:353) biblioteka jQuery UI udost(cid:258)pnia wi(cid:258)kszo(cid:321)(cid:240) wid(cid:353)etów i mechanizmów interakcji, pozostaje jedynie zaimplementowanie podstawowej logiki dzia(cid:298)ania aplikacji. Zadanie to wykonamy krok po kroku, zgodnie z przedstawionym po- wy(cid:353)ej planem. Zaczniemy od dodania przycisku, a nast(cid:258)pnie doko(cid:300)czymy pozo- sta(cid:298)(cid:238) cz(cid:258)(cid:321)(cid:240) aplikacji. Zadanie programistyczne podczas rozwi(cid:238)zywania warto po- dzieli(cid:240) na mniejsze elementy, które mo(cid:353)na (cid:298)atwo przetestowa(cid:240). Podobnie b(cid:258)dzie w tym przyk(cid:298)adzie — najpierw zrobimy jedn(cid:238) rzecz, upewnimy si(cid:258), (cid:353)e dzia(cid:298)a prawi- d(cid:298)owo, i dopiero potem przejdziemy do kolejnej. Dodanie przycisku Najpierw dodamy do strony przycisk i sformatujemy go przy u(cid:353)yciu jQuery UI. W tym przyk(cid:298)adzie b(cid:258)dziemy pracowa(cid:240) nad dwoma plikami dost(cid:258)pnymi w kata- logu R14; s(cid:238) to index.html oraz todo.js. Ca(cid:298)y kod JavaScript b(cid:258)dzie umieszczany w pliku todo.js, natomiast kod HTML niezb(cid:258)dny do utworzenia przycisku oraz okna dialogowego trafi do pliku index.html. Uwaga: Informacje na temat pobierania przyk(cid:293)adów do ksi(cid:233)(cid:348)ki mo(cid:348)na znale(cid:346)(cid:235) na stronie 46. 520 C Z (cid:265) (cid:285) (cid:251) I V (cid:105) Z A A W A N S O W A N E Z A S T O S O W A N I A J Q U E R Y I J(cid:265) Z Y K A J A V A S C R I P T Kup książkęPoleć książkę Dodanie przycisku 1. Otwórz w edytorze tekstu plik index.html dost(cid:258)pny w katalogu R14. Plik zawiera ju(cid:353) odwo(cid:298)ania do potrzebnych plików CSS, jQuery oraz jQuery UI. Jednak nie ma w nim jeszcze odwo(cid:298)ania do skryptu todo.js — czyli pliku, w któ- rym zapiszesz kod JavaScript tworzonej aplikacji. 2. W wierszu bezpo(cid:321)rednio poni(cid:353)ej script src= js/jqeury-ui.min.js (cid:180) /script dodaj nast(cid:258)puj(cid:238)cy wiersz kodu : script src= todo.js /script Bardzo wa(cid:353)ne jest to, by plik todo.js zosta(cid:298) do(cid:298)(cid:238)czony do strony jako ostatni, gdy(cid:353) wymaga on zarówno biblioteki jQuery, jak i jQuery UI. Je(cid:321)li wczytasz go przed któr(cid:238)kolwiek z tych bibliotek, podczas wy(cid:321)wietlania strony przegl(cid:238)- darka zg(cid:298)osi b(cid:298)(cid:238)d syntaktyczny. Teraz zajmiesz si(cid:258) dodaniem przycisku. U(cid:353)ytkownik b(cid:258)dzie móg(cid:298) go klikn(cid:238)(cid:240) w celu dodania do listy nowego zadania. 3. W tre(cid:321)ci pliku odszukaj komentarz !-- Tu dodaj przycisk. -- i zast(cid:238)p go poni(cid:353)szym wierszem kodu HTML: button id= add-todo Dodaj nowe zadanie /button W tym kodzie nie ma nic szczególnego — dodajesz do strony zwyczajny ele- ment button . Gdyby(cid:321) teraz wy(cid:321)wietli(cid:298) stron(cid:258) w przegl(cid:238)darce, przekona(cid:298)by(cid:321) si(cid:258), (cid:353)e wygl(cid:238)da on jak zwyczajny przycisk do wysy(cid:298)ania formularza — bez- barwny i nieinteresuj(cid:238)cy. Ju(cid:353) zaraz przekszta(cid:298)cisz go w przycisk jQuery UI. 4. W edytorze tekstów otwórz plik todo.js, a nast(cid:258)pnie wewn(cid:238)trz funkcji $(document).ready(function(e) { wpisz nast(cid:258)puj(cid:238)cy wiersz kodu: $( #add-todo ).button(); Powy(cid:353)szy kod spowoduje zastosowanie w przycisku formatowania okre(cid:321)lonego przez aktualnie u(cid:353)ywamy temat graficzny jQuery UI (patrz strona 407). Mo- (cid:353)esz go dodatkowo uatrakcyjni(cid:240), dodaj(cid:238)c do niego ikon(cid:258) jQuery UI. 5. Wewn(cid:238)trz funkcji button() dodaj litera(cid:298) obiektowy definiuj(cid:238)cy ikon(cid:258), która b(cid:258)dzie wy(cid:321)wietlona na przycisku (kod litera(cid:298)u zosta(cid:298) wyró(cid:353)niony pogrubion(cid:238) czcionk(cid:238)): $( #add-todo ).button({ icons: { primary: ui-icon-circle-plus } }); Powy(cid:353)szy kod umie(cid:321)ci z lewej strony napisu widocznego na przycisku niewiel- k(cid:238) ikon(cid:258) ze znakiem „+”. Zgodnie z informacjami podanymi na stronie 390, jQuery UI pozwala na wy(cid:321)wietlanie na przyciskach dwóch ikon: jednej po lewej stronie (ikona g(cid:298)ówna — primary), a drugiej po prawej (ikona pomocnicza — secondary). W przypadku tego przycisku jedna ikona w zupe(cid:298)no(cid:321)ci wystarczy. 6. Zapisz oba pliki, todo.js oraz index.html, a nast(cid:258)pnie wy(cid:321)wietl stron(cid:258) index.html w przegl(cid:238)darce. Teraz przycisk powinien ju(cid:353) wygl(cid:238)da(cid:240) tak samo jak wid(cid:353)et przycisku jQuery UI widoczny na rysunku 14.1. Je(cid:321)li tak nie wygl(cid:238)da, oznacza to, (cid:353)e przygotowany kod JavaScript nie dzia(cid:298)a. Dok(cid:298)adnie go sprawd(cid:351), u(cid:353)ywaj(cid:238)c konsoli JavaScript, by upewni(cid:240) si(cid:258), czy nie ma komunikatów o b(cid:298)(cid:258)dach. R O Z D Z I A (cid:224) 1 4 . T W O R Z E N I E A P L I K A C J I D O O B S (cid:224) U G I L I S T Y Z A D A (cid:275) 521 Kup książkęPoleć książkę Dodanie okna dialogowego Dodanie okna dialogowego A zatem mamy ju(cid:353) przycisk, który jednak nic nie robi. Docelowo klikni(cid:258)cie tego przycisku powinno powodowa(cid:240) wy(cid:321)wietlenie okna dialogowego — jego zaim- plementowanie b(cid:258)dzie Twoim kolejnym zadaniem. Najpierw dodasz kod HTML okna dialogowego. 1. W pliku index.html odszukaj komentarz !-- Tutaj dodaj okienko dialogowe. -- i zast(cid:238)p go poni(cid:353)szym kodem HTML: div id= new-todo title= Dodaj zadanie form p label for= task Nazwa zadania: /label input type= text name= task id= task /p /form /div Zgodnie z tym, czego dowiedzia(cid:298)e(cid:321) si(cid:258) na stronie 331, w okno dialogowe mo(cid:353)esz zamieni(cid:240) dowolny fragment kodu HTML. Tu u(cid:353)yjemy elementu div , we- wn(cid:238)trz którego znajduje si(cid:258) formularz z jednym polem tekstowym. Podczas do- dawania zadania u(cid:353)ytkownicy b(cid:258)d(cid:238) wpisywali w tym polu nazw(cid:258) zadania. Aby przekszta(cid:298)ci(cid:240) ten kod HTML w okno dialogowe, b(cid:258)dziesz musia(cid:298) u(cid:353)y(cid:240) kodu JavaScript. 2. Wró(cid:240) do pliku todo.js. Poni(cid:353)ej kodu, który doda(cid:298)e(cid:321) w kroku 5. na stronie 521, wpisz: $( #new-todo ).dialog(); Zapisz plik index.html i od(cid:321)wie(cid:353) stron(cid:258) w przegl(cid:238)darce. Powinno si(cid:258) na niej pojawi(cid:240) okno dialogowe (patrz górny zrzut na rysunku 14.2). Jednak jest ono wy(cid:321)wietlane od razu, a nie po klikni(cid:258)ciu przycisku. To standardowe zacho- wanie okien dialogowych tworzonych przy u(cid:353)yciu biblioteki jQuery UI. Aby ukry(cid:240) to okno, b(cid:258)dziesz musia(cid:298) przekaza(cid:240) w wywo(cid:298)aniu funkcji dialog() odpowiednie opcje. 3. W wywo(cid:298)aniu funkcji dialog() umie(cid:321)(cid:240) obiekt zawieraj(cid:238)cy dwie w(cid:298)a(cid:321)ciwo(cid:321)ci: $( #new-todo ).dialog({ modal : true, autoOpen : false }); Zgodnie z tym, czego si(cid:258) dowiedzia(cid:298)e(cid:321) na stronie 335, opcja modal zmusza u(cid:353)ytkownika do zamkni(cid:258)cia okna dialogowego, zanim b(cid:258)dzie móg(cid:298) wykona(cid:240) na stronie jak(cid:238)kolwiek inn(cid:238) operacj(cid:258). I w(cid:298)a(cid:321)nie o to chodzi — kiedy u(cid:353)ytkownik kliknie przycisk Dodaj nowe zadanie, wype(cid:298)nienie okna dialogowego powinno by(cid:240) jedyn(cid:238) rzecz(cid:238), na której u(cid:353)ytkownik ma si(cid:258) skoncentrowa(cid:240). Z kolei przypisanie w(cid:298)a(cid:321)ciwo(cid:321)ci autoOpen warto(cid:321)ci false sprawi, (cid:353)e okno dialogowe nie b(cid:258)dzie ju(cid:353) wy(cid:321)wietlane natychmiast po wczytaniu strony. Teraz b(cid:258)dzie pocz(cid:238)tkowo ukryte i trzeba wy(cid:321)wietli(cid:240) je programowo, w odpowiedzi na klikni(cid:258)cie przycisku! 522 C Z (cid:265) (cid:285) (cid:251) I V (cid:105) Z A A W A N S O W A N E Z A S T O S O W A N I A J Q U E R Y I J(cid:265) Z Y K A J A V A S C R I P T Kup książkęPoleć książkę Dodanie okna dialogowego Rysunek 14.2. Okna dialogowe jQuery UI s(cid:233) automatycznie wy- (cid:316)wietlane zaraz po wczytaniu strony. To doskona(cid:293)e rozwi(cid:233)zanie w przypadku prezentowania wa(cid:348)nych informacji, które u(cid:348)yt- kownicy musz(cid:233) zobaczy(cid:235) bezpo- (cid:316)rednio po wej(cid:316)ciu na stron(cid:253). Jednak w wi(cid:253)kszo(cid:316)ci innych sy- tuacji, takich jak dodawanie ele- mentów do listy zada(cid:295), nie jest ju(cid:348) takie dobre. Zwykle b(cid:253)dziesz chcia(cid:293), by okno dialogowe by(cid:293)o ukryte, a(cid:348) do momentu wykona- nia jakiej(cid:316) akcji przez u(cid:348)ytkowni- ka — na przyk(cid:293)ad takiej jak klik- ni(cid:253)cie przycisku „Dodaj nowe zadanie” 4. Dodaj funkcj(cid:258) obs(cid:298)uguj(cid:238)c(cid:238) zdarzenia click, dopisuj(cid:238)c do wywo(cid:298)ania funkcji .button() wywo(cid:298)anie .click(): $( #add-todo ).button({ icons: { primary: ui-icon-circle-plus } }).click(function() { $( #new-todo ).dialog( open ); }); Wywo(cid:298)ania funkcji jQuery mo(cid:353)na (cid:298)(cid:238)czy(cid:240) w sekwencje — w tym celu na ko(cid:300)- cu jednej z nich wystarczy dopisa(cid:240) kropk(cid:258), a za ni(cid:238) umie(cid:321)ci(cid:240) wywo(cid:298)anie ko- lejnej funkcji. W tym przypadku kod najpierw wybiera element o identyfikatorze add-todo (czyli przycisk), potem wywo(cid:298)uje funkcj(cid:258) jQuery UI button() i w ko(cid:300)- cu dodaje do przycisku funkcj(cid:258), która b(cid:258)dzie obs(cid:298)ugiwa(cid:240) zdarzenia click. Dodana funkcja obs(cid:298)uguj(cid:238)ca zdarzenia wywo(cid:298)uje z kolei funkcj(cid:258) open() okna dialogowego (patrz strona 338). Innymi s(cid:298)owy, klikni(cid:258)cie przycisku powinno teraz powodowa(cid:240) wy(cid:321)wietlenie okna dialogowego. Nadszed(cid:298) czas, (cid:353)eby przetestowa(cid:240) dzia(cid:298)anie kodu. R O Z D Z I A (cid:224) 1 4 . T W O R Z E N I E A P L I K A C J I D O O B S (cid:224) U G I L I S T Y Z A D A (cid:275) 523 Kup książkęPoleć książkę Dodanie okna dialogowego 5. Zapisz plik todo.js, po czym wy(cid:321)wietl w przegl(cid:238)darce stron(cid:258) index.html. Kliknij przycisk Dodaj nowe zadanie. Teraz okno dialogowe powinno by(cid:240) wy(cid:321)wietlane wy(cid:298)(cid:238)cznie po klikni(cid:258)ciu przycisku (u do(cid:298)u rysunku 14.2). Co wi(cid:258)cej, ca(cid:298)y obszar poni(cid:353)ej okna dialo- gowego powinien zosta(cid:240) nieco zaciemniony — przykryty przez pr(cid:238)(cid:353)kowan(cid:238), pó(cid:298)przezroczyst(cid:238) warstw(cid:258). To wizualne oznaczenie informuje u(cid:353)ytkownika, (cid:353)e zosta(cid:298)o wy(cid:321)wietlone modalne okno dialogowe, co z kolei znaczy, (cid:353)e dopó- ki go nie zamknie, nie b(cid:258)dzie móg(cid:298) zrobi(cid:240) nic innego. Jednak aktualnie nie ma jak zamkn(cid:238)(cid:240) tego okna dialogowego! Na szcz(cid:258)(cid:321)cie za pomoc(cid:238) jQuery UI dodawanie przycisków do okien dialogo- wych jest bardzo proste. 6. Wró(cid:240) do pliku todo.js. Do listy opcji okna dialogowego dodaj kolejn(cid:238) — buttons, jej warto(cid:321)ci(cid:238) ma by(cid:240) pusty litera(cid:298) obiektowy: $( #new-todo ).dialog({ modal : true, autoOpen : false, buttons : { } }); Opcja buttons pozwala okre(cid:321)la(cid:240) przyciski, które jQuery UI dynamicznie do- da do okna dialogowego. Oprócz tego, do ka(cid:353)dego z nich mo(cid:353)na doda(cid:240) funk- cj(cid:258), dzi(cid:258)ki czemu co(cid:321) si(cid:258) stanie, kiedy u(cid:353)ytkownik kliknie dany przycisk. Tworzymy kod aplikacji wolno, krok po kroku, poniewa(cid:353) dzieje si(cid:258) w nim ca(cid:298)kiem du(cid:353)o. Teraz na przyk(cid:298)ad dysponujesz nowym obiektem (w(cid:298)a(cid:321)ciwo- (cid:321)ci(cid:238) buttons) umieszczonym wewn(cid:238)trz innego obiektu (litera(cid:298)u obiektowego z opcjami, przekazywanego w wywo(cid:298)aniu funkcji dialog()). Najpierw dodaj przycisk z pust(cid:238) funkcj(cid:238). 7. Do litera(cid:298)u obiektowego wpisanego w poprzednim kroku dodaj now(cid:238) w(cid:298)a- (cid:321)ciwo(cid:321)(cid:240) (wyró(cid:353)nion(cid:238) pogrubion(cid:238) czcionk(cid:238)): $( #new-todo ).dialog({ modal : true, autoOpen : false, buttons : { Dodaj zadanie : function () { } } }); Ten kod powoduje dodanie do okna dialogowego przycisku z napisem Dodaj zadanie. Kiedy u(cid:353)ytkownik kliknie ten przycisk, zostanie wykonana funkcja. Obecnie funkcja jest pusta, wi(cid:258)c nic si(cid:258) nie stanie. Funkcj(cid:258) t(cid:258) zaimplemen- tujesz do ko(cid:300)ca w nast(cid:258)pnej cz(cid:258)(cid:321)ci przyk(cid:298)adu. A teraz dodasz do okna dialo- gowego drugi przycisk. 8. Za zamykaj(cid:238)cym nawiasem klamrowym funkcji umieszczonej we w(cid:298)a- (cid:321)ciwo(cid:321)ci Dodaj zadanie wpisz przecinek i dodaj kolejn(cid:238) w(cid:298)a(cid:321)ciwo(cid:321)(cid:240) z funkcj(cid:238) anonimow(cid:238): $( #new-todo ).dialog({ modal : true, autoOpen : false, 524 C Z (cid:265) (cid:285) (cid:251) I V (cid:105) Z A A W A N S O W A N E Z A S T O S O W A N I A J Q U E R Y I J(cid:265) Z Y K A J A V A S C R I P T Kup książkęPoleć książkę Dodawanie zada(cid:300) buttons : { Dodaj zadanie : function () { }, Anuluj : function () { $(this).dialog( close ); } } }); Ten nowy fragment kodu dodaje do okna dialogowego przycisk Anuluj. Co wi(cid:258)cej, przycisk ju(cid:353) co(cid:321) robi. Wyra(cid:353)enie $(this) odwo(cid:298)uje si(cid:258) do elementu, który wywo(cid:298)a(cid:298) funkcj(cid:258), czyli do samego okna dialogowego. Kiedy u(cid:353)ytkownik kliknie przycisk Anuluj, zostaje wywo(cid:298)ana funkcja close() wid(cid:353)etu okna dialogowego (patrz strona 340). Powoduje ona natychmiastowe zamkni(cid:258)cie tego okna. Nadszed(cid:298) czas, by zobaczy(cid:240) efekt wykonanej pracy. 9. Zapisz plik todo.js i od(cid:321)wie(cid:353) stron(cid:258) index.html w przegl(cid:238)darce. Kliknij przycisk Dodaj nowe zadanie. Okno dialogowe powinno teraz zawiera(cid:240) dwa przyciski (patrz rysunek 14.3). Kliknij przycisk Dodaj zadanie — oczywi(cid:321)cie nic si(cid:258) nie powinno sta(cid:240), gdy(cid:353) ob- s(cid:298)uga przycisku nie zosta(cid:298)a jeszcze zaimplementowana. Kiedy jednak klikniesz drugi przycisk, czyli Anuluj, okno powinno zosta(cid:240) zamkni(cid:258)te. W nast(cid:258)pnej cz(cid:258)(cid:321)ci przyk(cid:298)adu zajmiesz si(cid:258) pisaniem kodu, który pozwoli na dodawanie zada(cid:300) do listy. Rysunek 14.3. Wystarczy(cid:293)o kilka wierszy kodu, aby przygotowa(cid:235) wszystkie komponenty prostego interfejsu u(cid:348)ytkownika aplikacji do zarz(cid:233)dzania list(cid:233) zada(cid:295) Dodawanie zada(cid:300) Nasza aplikacja do zarz(cid:238)dzania list(cid:238) zada(cid:300) wygl(cid:238)da ju(cid:353) ca(cid:298)kiem dobrze, jednak nie dzieje si(cid:258) w niej zbyt du(cid:353)o. Nadszed(cid:298) zatem czas, by(cid:321) zaj(cid:238)(cid:298) si(cid:258) kodem umo(cid:353)liwiaj(cid:238)- cym dodawanie zada(cid:300). Zostanie on umieszczony w funkcji skojarzonej z przyci- skiem Dodaj zadanie, czyli w pustej funkcji anonimowej, któr(cid:238) dopisa(cid:298)e(cid:321) w kro- ku 5. na stronie 524. Implementacj(cid:258) tego kodu wykonasz w opisanych poni(cid:353)ej czterech krokach. R O Z D Z I A (cid:224) 1 4 . T W O R Z E N I E A P L I K A C J I D O O B S (cid:224) U G I L I S T Y Z A D A (cid:275) 525 Kup książkęPoleć książkę Dodawanie zada(cid:300) 1. Pobierz nazw(cid:258) zadania, któr(cid:238) u(cid:353)ytkownik wpisa(cid:298) w polu tekstowym w oknie dialogowym. Warto(cid:321)(cid:240) ta jest przechowywana w polu tekstowym, a to oznacza, (cid:353)e mo(cid:353)esz j(cid:238) (cid:298)atwo pobra(cid:240), u(cid:353)ywaj(cid:238)c funkcji val() jQuery (patrz strona 283). 2. Utwórz element li , który nast(cid:258)pnie dodasz do tre(cid:321)ci strony. Ka(cid:353)de zadanie b(cid:258)dzie reprezentowane przez jeden element listy wypunktowanej. Poni(cid:353)ej przedstawiona zosta(cid:298)a struktura kodu HTML takiego elementu: li span class= done /span span class= delete x /span span class= task Upiec ciasteczka /span /li Pierwszy element span reprezentuje obszar, który u(cid:353)ytkownik mo(cid:353)e klikn(cid:238)(cid:240), by oznaczy(cid:240) zadanie jako wykonane. Drugi element span reprezentuje przy- cisk do usuni(cid:258)cie zadania. I w ko(cid:300)cu ostatni element span zawiera nazw(cid:258) zadania podan(cid:238) przez u(cid:353)ytkownika w oknie dialogowym. Taki kod HTML mo- (cid:353)esz skonstruowa(cid:240), (cid:298)(cid:238)cz(cid:238)c ze sob(cid:238) litera(cid:298)y (cid:298)a(cid:300)cuchowe zawieraj(cid:238)ce odpowiednie znaczniki i dodaj(cid:238)c do nich wpisan(cid:238) przez u(cid:353)ytkownika nazw(cid:258) zadania. Uwaga: Posta(cid:235) obu przycisków okre(cid:316)lisz, stosuj(cid:233)c odpowiednie style CSS. Dzi(cid:253)ki temu znak procenta ( ) oraz x umieszczone w kodzie po wy(cid:316)wietleniu strony zostan(cid:233) zamienione odpowiednio na znacznik charakterystyczny dla pól wyboru oraz przycisk z ikon(cid:233) krzy(cid:348)yka. Tajemnica tych przycisków tkwi w za- stosowaniu specjalnej czcionki, w której zamiast liter s(cid:233) ikony. 3. Dodaj do listy zada(cid:300) do wykonania nowy element listy, znacznik li . Biblioteka jQuery sprawia, (cid:353)e bardzo (cid:298)atwo mo(cid:353)na zamieni(cid:240) (cid:298)a(cid:300)cuch znaków na element DOM, a nast(cid:258)pnie doda(cid:240) go do strony (szczegó(cid:298)owe informacje na ten temat mo(cid:353)na znale(cid:351)(cid:240) w rozdziale 4.). Poniewa(cid:353) dysponujemy pot(cid:258)(cid:353)nym ze- stawem efektów jQuery UI, mo(cid:353)esz skorzysta(cid:240) z nich, by dodawa(cid:240) nowe zada- nia w sposób atrakcyjny wizualnie. 4. Zamknij okno dialogowe. Ta operacja jest bardzo prosta. Wykona(cid:298)e(cid:321) j(cid:238) ju(cid:353) wcze(cid:321)niej, przy okazji imple- mentowania przycisku do zamykania okna dialogowego, w kroku 8. opisanym na stronie 524. Skoro ju(cid:353) znasz podstawowe kroki, jakie nale(cid:353)y zaimplementowa(cid:240), czas zabra(cid:240) si(cid:258) za pisanie kodu. Najpierw pobierzesz dane wpisane przez u(cid:353)ytkownika, czyli nazw(cid:258) zadania wpisan(cid:238) w oknie dialogowym. 1. Odszukaj funkcj(cid:258) skojarzon(cid:238) z przyciskiem Dodaj zadanie okna dialo- gowego (zosta(cid:298)a ona podana we w(cid:298)a(cid:321)ciwo(cid:321)ci buttons litera(cid:298)u obiektowego przekazywanego w wywo(cid:298)aniu funkcji dialog()), a nast(cid:258)pnie wpisz w niej poni(cid:353)szy kod: Dodaj zadanie : function () { var taskName = $( #task ).val(); }, Powy(cid:353)sza instrukcja tworzy now(cid:238) zmienn(cid:238), taksName, i zapisuje w niej warto(cid:321)(cid:240) pola tekstowego umieszczonego w oknie dialogowym. Pami(cid:258)tasz zapewne struk- tur(cid:258) kodu tworz(cid:238)cego okno dialogowe, zosta(cid:298)a ona przedstawiona w kroku 1. 526 C Z (cid:265) (cid:285) (cid:251) I V (cid:105) Z A A W A N S O W A N E Z A S T O S O W A N I A J Q U E R Y I J(cid:265) Z Y K A J A V A S C R I P T Kup książkęPoleć książkę Dodawanie zada(cid:300) na stronie 522. Kod ten zawiera mi(cid:258)dzy innymi pole tekstowe o okre(cid:321)lonym identyfikatorze. A zatem wywo(cid:298)anie $( #task ).val() pobiera warto(cid:321)(cid:240) tego pola — czyli to, co u(cid:353)ytkownik wpisa(cid:298) jako nazw(cid:258) zadania. Istnieje tak(cid:
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

JavaScript i jQuery. Nieoficjalny podręcznik. Wydanie III
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ą: