Darmowy fragment publikacji:
Tytuł oryginału: jQuery in Action, Third Edition
Tłumaczenie: Piotr Pilch
Projekt okładki: Studio Gravite / Olsztyn
Obarek, Pokoński, Pazdrijowski, Zaprucki
ISBN: 978-83-283-2275-2
Original edition copyright © 2015 by Manning Publications Co.
All rights reserved.
Polish edition copyright © 2016 by HELION SA.
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.
Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock Images LLC.
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/jquer3.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/jquer3
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:258)ci
S(cid:239)owo wst(cid:218)pne do wydania trzeciego 15
S(cid:239)owo wst(cid:218)pne do wydania pierwszego 17
Przedmowa 19
Podzi(cid:218)kowania 21
O ksi(cid:200)(cid:285)ce 23
O autorach 27
CZ(cid:125)(cid:165)(cid:109) I BIBLIOTEKA JQUERY — PIERWSZE KROKI 29
Rozdzia(cid:239) 1. Wprowadzenie do biblioteki jQuery 31
1.1.
1.2.
1.3.
1.4.
Pisz mniej, a rób wi(cid:218)cej 32
Przejrzysty kod JavaScript 34
Oddzielanie zachowania od struktury 35
1.2.1.
1.2.2.
Oddzielanie skryptu 36
Instalowanie biblioteki jQuery 37
1.3.1. Wybieranie w(cid:239)a(cid:258)ciwej wersji 37
1.3.2.
Struktura biblioteki jQuery 42
1.4.1.
Zwi(cid:218)kszanie wydajno(cid:258)ci przy u(cid:285)yciu sieci CDN 40
Tworzenie w(cid:239)asnej wersji niestandardowej zmniejszaj(cid:200)cej wielko(cid:258)(cid:202) pliku 43
1.5. Fundamenty biblioteki jQuery 44
1.5.1. W(cid:239)a(cid:258)ciwo(cid:258)ci, narz(cid:218)dzia i metody 44
1.5.2.
1.5.3.
Podsumowanie 49
Obiekt biblioteki jQuery 45
Procedura obs(cid:239)ugi zdarzenia gotowo(cid:258)ci dokumentu 47
1.6.
CZ(cid:125)(cid:165)(cid:109) II PODSTAWOWE SK(cid:146)ADNIKI BIBLIOTEKI JQUERY 51
Rozdzia(cid:239) 2. Wybieranie elementów 53
2.1. Wybieranie elementów do modyfikacji 54
2.2.
Podstawowe selektory 56
2.2.1.
2.2.2.
2.2.3.
2.2.4.
Pobieranie elementów na podstawie ich hierarchii 62
Selektor „wszystko” (lub uniwersalny) 57
Selektor identyfikatora 60
Selektor klasy 61
Selektor elementu 61
2.3.
2.4. Wybieranie elementów za pomoc(cid:200) atrybutów 64
Poleć książkęKup książkę 8
Spis tre(cid:258)ci
2.5. Wprowadzenie do filtrów 68
Filtry po(cid:239)o(cid:285)enia 68
2.5.1.
Filtry elementów podrz(cid:218)dnych 69
2.5.2.
Filtry formularza 73
2.5.3.
Filtry tre(cid:258)ci 74
2.5.4.
Inne filtry 75
2.5.5.
2.5.6.
Tworzenie filtrów niestandardowych 77
Zwi(cid:218)kszanie wydajno(cid:258)ci za pomoc(cid:200) kontekstu 80
Sprawdzanie umiej(cid:218)tno(cid:258)ci przy u(cid:285)yciu (cid:202)wicze(cid:241) 81
2.7.1.
2.7.2.
Podsumowanie 83
(cid:109)wiczenia 82
Rozwi(cid:200)zania 82
2.6.
2.7.
2.8.
Rozdzia(cid:239) 3. Przetwarzanie kolekcji biblioteki jQuery 85
3.1. Generowanie nowych elementów HTML 86
3.2.
Zarz(cid:200)dzanie kolekcj(cid:200) biblioteki jQuery 89
Okre(cid:258)lanie wielko(cid:258)ci zestawu 91
3.2.1.
Uzyskiwanie elementów zestawu 91
3.2.2.
Uzyskiwanie zestawów za pomoc(cid:200) relacji 96
3.2.3.
3.2.4.
Dopasowywanie zestawu 101
3.2.5.
Jeszcze wi(cid:218)cej sposobów u(cid:285)ycia zestawu 110
Podsumowanie 113
3.3.
Rozdzia(cid:239) 4. U(cid:285)ycie w(cid:239)a(cid:258)ciwo(cid:258)ci, atrybutów i danych 115
4.1. Definiowanie w(cid:239)a(cid:258)ciwo(cid:258)ci i atrybutów elementów 116
4.2. U(cid:285)ycie atrybutów 119
4.2.1.
4.2.2.
4.2.3.
4.2.4.
Pobieranie warto(cid:258)ci atrybutów 119
Ustawianie warto(cid:258)ci atrybutów 120
Usuwanie atrybutów 122
Zabawa z atrybutami 123
4.3. Modyfikowanie w(cid:239)a(cid:258)ciwo(cid:258)ci elementu 125
4.4.
4.5.
Przechowywanie danych niestandardowych w elementach 128
Podsumowanie 135
Rozdzia(cid:239) 5. O(cid:285)ywianie stron za pomoc(cid:200) biblioteki jQuery 137
5.1.
Zmienianie stylów elementów 138
5.1.1.
5.1.2.
Dodawanie i usuwanie nazw klas 138
Uzyskiwanie i ustawianie stylów 143
5.2. Okre(cid:258)lanie zawarto(cid:258)ci elementu 153
5.2.1.
5.2.2.
5.2.3.
5.2.4.
Zast(cid:218)powanie kodu HTML lub tre(cid:258)ci tekstowej 153
Przenoszenie elementów 155
Opakowywanie elementów i usuwanie ich opakowania 161
Usuwanie elementów 165
Poleć książkęKup książkę Spis tre(cid:258)ci
9
5.2.5.
5.2.6.
Powielanie elementów 167
Zast(cid:218)powanie elementów 168
5.3. Obs(cid:239)uga warto(cid:258)ci elementów formularza 170
5.4.
Podsumowanie 172
Rozdzia(cid:239) 6. Zdarzenia s(cid:200) tam, gdzie co(cid:258) si(cid:218) dzieje 173
6.1. Modele zdarze(cid:241) przegl(cid:200)darek 174
6.1.1. Model zdarze(cid:241) poziomu DOM Level 0 175
6.1.2. Model zdarze(cid:241) poziomu DOM Level 2 183
6.1.3. Model przegl(cid:200)darki Internet Explorer 189
6.2. Model zdarze(cid:241) biblioteki jQuery 189
Do(cid:239)(cid:200)czanie procedur obs(cid:239)ugi zdarze(cid:241) w bibliotece jQuery 190
Usuwanie procedur obs(cid:239)ugi zdarze(cid:241) 198
Inspekcja instancji obiektu Event 200
6.2.1.
6.2.2.
6.2.3.
6.2.4. Wyzwalanie procedur obs(cid:239)ugi zdarze(cid:241) 201
6.2.5. Metody skrócone 206
6.2.6.
6.2.7.
Podsumowanie 212
Sposób tworzenia zdarze(cid:241) niestandardowych 210
Okre(cid:258)lanie przestrzeni nazw dla zdarze(cid:241) 211
6.3.
Rozdzia(cid:239) 7. Demonstracja lokalizatora dysków DVD 215
7.1.
7.2.
Praktyczne zastosowanie zdarze(cid:241) (i nie tylko) 216
Filtrowanie du(cid:285)ych zestawów danych 217
7.1.1.
7.1.2.
Tworzenie elementów za pomoc(cid:200) replikacji szablonu 219
Tworzenie podstawowego kodu znaczników 221
7.1.3.
Dodawanie nowych filtrów 222
7.1.4.
Dodawanie szablonów kontrolek 225
7.1.5.
7.1.6.
Usuwanie niepo(cid:285)(cid:200)danych filtrów oraz inne zadania 227
7.1.7. Wy(cid:258)wietlanie wyników 227
7.1.8.
Podsumowanie 231
Zawsze mo(cid:285)na jeszcze co(cid:258) ulepszy(cid:202) 229
Rozdzia(cid:239) 8. Wzbogacanie stron przy u(cid:285)yciu animacji i efektów 233
8.1. Wy(cid:258)wietlanie i ukrywanie elementów 234
8.1.1.
8.1.2.
Implementowanie „modu(cid:239)u” umo(cid:285)liwiaj(cid:200)cego zwijanie 235
Prze(cid:239)(cid:200)czanie stanu wy(cid:258)wietlania elementów 238
8.2. Animowanie stanu wy(cid:258)wietlania elementów 238
Stopniowe wy(cid:258)wietlanie i ukrywanie elementów 239
8.2.1.
8.2.2. Wprowadzenie do strony laboratorium efektów biblioteki jQuery 243
8.2.3.
8.2.4.
8.2.5.
Stopniowe rozja(cid:258)nianie i (cid:258)ciemnianie elementów 245
Przesuwanie elementów w gór(cid:218) i w dó(cid:239) 248
Zatrzymywanie animacji 249
8.3. Dodawanie kolejnych funkcji sposobu animacji do biblioteki jQuery 251
Poleć książkęKup książkę 10
Spis tre(cid:258)ci
8.4.
Tworzenie animacji niestandardowych 253
8.4.1.
8.4.2.
8.4.3.
Niestandardowa animacja skalowania 256
Niestandardowa animacja efektu opadania 257
Niestandardowa animacja efektu rozpraszania 258
8.5. Animacje i kolejkowanie 260
Jednocze(cid:258)nie wykonywane animacje 260
Kolejkowanie funkcji do wykonania 262
8.5.1.
8.5.2.
8.5.3. Wstawianie funkcji do kolejek efektów 268
Podsumowanie 269
8.6.
Rozdzia(cid:239) 9. Poza modelem DOM — funkcje narz(cid:218)dziowe biblioteki jQuery 271
9.1. U(cid:285)ycie w(cid:239)a(cid:258)ciwo(cid:258)ci biblioteki jQuery 272
9.1.1. Wy(cid:239)(cid:200)czanie animacji 273
9.1.2.
9.1.3. W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) $.support 274
Zmiana szybko(cid:258)ci animacji 273
9.2. U(cid:285)ycie innych bibliotek z bibliotek(cid:200) jQuery 275
9.3. Modyfikowanie obiektów i kolekcji j(cid:218)zyka JavaScript 279
Obcinanie (cid:239)a(cid:241)cuchów 280
Iteracja w(cid:239)a(cid:258)ciwo(cid:258)ci i kolekcji 281
Filtrowanie tablic 283
Translacja tablic 285
9.3.1.
9.3.2.
9.3.3.
9.3.4.
9.3.5. Wi(cid:218)cej zabawy z tablicami j(cid:218)zyka JavaScript 286
9.3.6.
9.3.7.
9.3.8.
9.3.9.
Rozszerzanie obiektów 290
Serializacja warto(cid:258)ci parametrów 292
Testowanie obiektów 296
Analizowanie funkcji 299
9.4. Ró(cid:285)ne funkcje narz(cid:218)dziowe 302
Nie wykonuj(cid:200)c (cid:285)adnego dzia(cid:239)ania 302
Sprawdzanie przynale(cid:285)no(cid:258)ci 303
9.4.1.
9.4.2.
9.4.3. Wst(cid:218)pne wi(cid:200)zanie kontekstów funkcji 304
9.4.4.
9.4.5.
Podsumowanie 308
Okre(cid:258)lanie warto(cid:258)ci wyra(cid:285)e(cid:241) 306
Zg(cid:239)aszanie wyj(cid:200)tków 307
9.5.
Rozdzia(cid:239) 10. Komunikacja z serwerem z wykorzystaniem technologii Ajax 309
10.1. Od(cid:258)wie(cid:285)enie informacji o technologii Ajax 310
10.1.1. Tworzenie instancji obiektu XHR 310
Inicjowanie (cid:285)(cid:200)dania 313
10.1.2.
10.1.3.
(cid:165)ledzenie post(cid:218)pu dzia(cid:239)a(cid:241) 314
10.1.4. Uzyskiwanie odpowiedzi 314
10.2. (cid:146)adowanie zawarto(cid:258)ci do elementów 315
10.2.1. (cid:146)adowanie zawarto(cid:258)ci za pomoc(cid:200) kodu jQuery 317
10.2.2. (cid:146)adowanie fragmentów dynamicznego kodu HTML 321
Poleć książkęKup książkę Spis tre(cid:258)ci
11
10.3. Tworzenie (cid:285)(cid:200)da(cid:241) GET i POST 325
10.3.1. Uzyskiwanie danych za pomoc(cid:200) metody GET 327
10.3.2. Uzyskiwanie danych formatu JSON 329
10.3.3. Dynamiczne (cid:239)adowanie skryptu 330
10.3.4. Tworzenie (cid:285)(cid:200)da(cid:241) metody POST 332
10.3.5.
Implementowanie kaskadowych elementów rozwijanych 333
10.4. Przejmowanie pe(cid:239)nej kontroli nad (cid:285)(cid:200)daniem Ajax 338
10.4.1. Tworzenie (cid:285)(cid:200)da(cid:241) Ajax z wszystkimi dodatkami 338
10.4.2. Ustawianie warto(cid:258)ci domy(cid:258)lnych (cid:285)(cid:200)dania 342
10.4.3. Obs(cid:239)uga zdarze(cid:241) Ajax 344
10.4.4.
Zaawansowane funkcje narz(cid:218)dziowe Ajax 348
10.5. Podsumowanie 350
Rozdzia(cid:239) 11. Demonstracja formularza kontaktowego wykorzystuj(cid:200)cego
technologi(cid:218) Ajax 351
11.1. Funkcje projektu 352
11.2. Tworzenie kodu znaczników 354
11.3. Implementowanie kodu serwerowego PHP 355
11.4. Sprawdzanie poprawno(cid:258)ci pól z wykorzystaniem technologii Ajax 357
11.5. Jeszcze wi(cid:218)cej zabawy z technologi(cid:200) Ajax 359
11.5.1. Ukrywanie okna dialogowego 361
11.6. Poprawianie komfortu pracy u(cid:285)ytkownika za pomoc(cid:200) efektów 362
11.6.1.
Prze(cid:239)(cid:200)czanie efektów 362
11.7. Uwaga dotycz(cid:200)ca dost(cid:218)pno(cid:258)ci 363
11.8. Podsumowanie 365
CZ(cid:125)(cid:165)(cid:109) III ZAAWANSOWANE ZAGADNIENIA 367
Rozdzia(cid:239) 12. Gdy biblioteka jQuery nie wystarcza, na ratunek przychodz(cid:200)
dodatki 369
12.1. Dlaczego warto rozszerza(cid:202) bibliotek(cid:218) jQuery? 370
12.2. Znajdowanie dodatków 371
12.2.1. Metoda u(cid:285)ycia (dobrze zaprojektowanego) dodatku 371
12.2.2.
Znakomite dodatki do zastosowania w projektach 375
12.3. Wytyczne dotycz(cid:200)ce tworzenia dodatku biblioteki jQuery 375
12.3.1. Konwencje nazewnicze dotycz(cid:200)ce plików i funkcji 376
12.3.2. Uwa(cid:285)aj na skrót $ 378
12.3.3. Ujarzmianie z(cid:239)o(cid:285)onych list parametrów 378
12.3.4.
Pozosta(cid:241) przy jednej przestrzeni nazw 381
12.3.5. Okre(cid:258)lanie przestrzeni nazw dla zdarze(cid:241) i danych 384
12.3.6. Utrzymywanie mo(cid:285)liwo(cid:258)ci tworzenia (cid:239)a(cid:241)cucha metod 389
12.3.7.
Zapewnienie dost(cid:218)pu publicznego do ustawie(cid:241) domy(cid:258)lnych 389
Poleć książkęKup książkę 12
Spis tre(cid:258)ci
12.4. Demonstracja tworzenia pokazu slajdów w postaci dodatku biblioteki jQuery 392
12.4.1. Definiowanie kodu znaczników 394
12.4.2. Tworzenie dodatku Jqia Photomatic 396
12.5. Tworzenie niestandardowych funkcji narz(cid:218)dziowych 403
12.5.1. Tworzenie funkcji formatuj(cid:200)cej dat(cid:218) 404
12.6. Podsumowanie 408
Rozdzia(cid:239) 13. Unikni(cid:218)cie „piek(cid:239)a wywo(cid:239)a(cid:241) zwrotnych” za pomoc(cid:200)
obiektu Deferred 409
13.1. Wprowadzenie do obietnic 410
13.2. Obiekty Deferred i Promise 414
13.3. Metody obiektu Deferred 415
Powiadamianie o post(cid:218)pie procesu zwi(cid:200)zanego z obiektem Deferred 423
(cid:165)ledzenie post(cid:218)pu 424
13.3.1. Rozstrzyganie lub odrzucanie obiektu Deferred 415
13.3.2. Wykonywanie funkcji podczas rozstrzygania lub odrzucania 417
13.3.3. Metoda when() 420
13.3.4.
13.3.5.
13.3.6. U(cid:285)ycie obiektu Promise 426
13.3.7. Krótkie omówienie metody then() 429
13.3.8.
13.3.9. Okre(cid:258)lanie stanu obiektu Deferred 433
Zawsze wykonuj procedur(cid:218) obs(cid:239)ugi zdarze(cid:241) 433
13.4. Stosowanie obietnic dla wszystkiego 434
13.5. Podsumowanie 436
Rozdzia(cid:239) 14. Wykonywanie testów jednostkowych za pomoc(cid:200)
biblioteki QUnit 437
14.1. Dlaczego testowanie odgrywa wa(cid:285)n(cid:200) rol(cid:218)? 438
14.1.1. Dlaczego testowanie jednostkowe? 439
14.1.2.
(cid:165)rodowiska testowania jednostkowego kodu JavaScript 441
14.2. Pierwsze kroki ze (cid:258)rodowiskiem QUnit 442
14.3. Tworzenie testów na potrzeby kodu synchronicznego 445
14.4. Testowanie kodu za pomoc(cid:200) asercji 446
14.4.1. Metody equal(), strictEqual(), notEqual() i notStrictEqual() 447
14.4.2.
14.4.3. Metoda asercji throws() 451
Inne metody asercji 450
14.5. Testowanie zada(cid:241) asynchronicznych 453
14.6. Opcje noglobals i notrycatch 455
14.7. Grupowanie testów w modu(cid:239)ach 456
14.8. Konfigurowanie (cid:258)rodowiska QUnit 458
14.9. Przyk(cid:239)adowy pakiet testów 459
14.10. Podsumowanie 463
Poleć książkęKup książkę Spis tre(cid:258)ci
13
Rozdzia(cid:239) 15. Wykorzystanie biblioteki jQuery w du(cid:285)ych projektach 465
15.1. Zwi(cid:218)kszanie wydajno(cid:258)ci selektorów 467
15.1.1. Unikanie selektora uniwersalnego 467
15.1.2. Ulepszanie selektora klasy 468
15.1.3. Nie nadu(cid:285)ywaj parametru context 468
15.1.4. Optymalizowanie filtrów 469
15.1.5. Nie okre(cid:258)laj przesadnie selektorów 471
15.2. Organizowanie kodu w modu(cid:239)ach 471
15.2.1. Wzorzec oparty na litera(cid:239)ach obiektowych 472
15.2.2. Wzorzec oparty na modu(cid:239)ach 473
15.3. (cid:146)adowanie modu(cid:239)ów za pomoc(cid:200) biblioteki RequireJS 475
15.3.1. Rozpocz(cid:218)cie pracy z bibliotek(cid:200) RequireJS 475
15.3.2. U(cid:285)ycie biblioteki RequireJS z bibliotek(cid:200) jQuery 477
15.4. Zarz(cid:200)dzanie zale(cid:285)no(cid:258)ciami za pomoc(cid:200) narz(cid:218)dzia Bower 479
15.4.1. Rozpocz(cid:218)cie pracy z narz(cid:218)dziem Bower 479
15.4.2. Wyszukiwanie pakietu 481
15.4.3.
Instalowanie, aktualizowanie i usuwanie pakietów 481
15.5. Tworzenie aplikacji z jedn(cid:200) stron(cid:200) za pomoc(cid:200) (cid:258)rodowiska Backbone.js 483
15.5.1. Dlaczego nale(cid:285)y u(cid:285)ywa(cid:202) (cid:258)rodowiska MV*? 485
15.5.2. Rozpocz(cid:218)cie pracy ze (cid:258)rodowiskiem Backbone.js 485
15.5.3. Tworzenie aplikacji mened(cid:285)era zada(cid:241) do wykonania za pomoc(cid:200)
(cid:258)rodowiska Backbone.js 490
15.6. Podsumowanie 500
15.7. Zako(cid:241)czenie 502
DODATKI 503
Dodatek A J(cid:218)zyk JavaScript, jaki musisz zna(cid:202), cho(cid:202) by(cid:202) mo(cid:285)e tak nie jest 505
A.1. Podstawowe informacje o typie danych Object j(cid:218)zyka JavaScript 506
A.1.1. W jaki sposób powstaj(cid:200) obiekty? 506
A.1.2. W(cid:239)a(cid:258)ciwo(cid:258)ci obiektów 507
A.1.3.
A.1.4.
Litera(cid:239)y obiektowe 509
Obiekty jako w(cid:239)a(cid:258)ciwo(cid:258)ci obiektu window 510
A.2. Funkcje jako „obywatele pierwszej klasy” 511
A.2.1. Wyra(cid:285)enia funkcji i ich deklaracje 511
A.2.2.
Funkcje jako wywo(cid:239)ania zwrotne 513
A.2.3.
Jakie jest przeznaczenie s(cid:239)owa kluczowego this? 514
A.2.4. Domkni(cid:218)cia 518
A.2.5. Wzorzec IIFE 520
A.3. Podsumowanie 522
Skorowidz 523
Poleć książkęKup książkę 14
Spis tre(cid:258)ci
Poleć książkęKup książkę Wprowadzenie
do biblioteki jQuery
W rozdziale omówiono nast(cid:266)puj(cid:261)ce zagadnienia:
(cid:81) Dok(cid:225)adne przeznaczenie biblioteki jQuery i powody,
dla których nale(cid:298)y z niej korzysta(cid:252).
(cid:81) Strategia przejrzysto(cid:286)ci kodu JavaScript.
(cid:81) Wybór w(cid:225)a(cid:286)ciwej wersji biblioteki jQuery.
(cid:81) Podstawowe elementy biblioteki jQuery i zwi(cid:261)zane
z ni(cid:261) poj(cid:266)cia.
„Istniej(cid:200) tylko dwa rodzaje j(cid:218)zyków: takie, na które ludzie narzekaj(cid:200), oraz takie, z któ-
rych nikt nie korzysta”. Zdanie to, wypowiedziane przez Bjarne’a Stroustrupa, który
zaprojektowa(cid:239) i zaimplementowa(cid:239) j(cid:218)zyk C++, bardzo dobrze podsumowuje odczucia
zwi(cid:200)zane z j(cid:218)zykiem JavaScript. Nad tym, a tak(cid:285)e nad kilkoma innymi j(cid:218)zykami (a szcze-
gólnie j(cid:218)zykiem PHP) „lamentowano” przez kilka lat, uwa(cid:285)aj(cid:200)c je za „z(cid:239)e” j(cid:218)zyki. Pó(cid:283)niej
sta(cid:239)o si(cid:218) co(cid:258) magicznego. Dzi(cid:218)ki pojawieniu si(cid:218) technologii Ajax, udost(cid:218)pnieniu kilku
bibliotek, takich jak Prototype, Moo Tools i jQuery, a tak(cid:285)e nowych aplikacji interneto-
wych o du(cid:285)ym poziomie interaktywno(cid:258)ci (by(cid:202) mo(cid:285)e spotka(cid:239)e(cid:258) si(cid:218) równie(cid:285) z okre(cid:258)la-
niem ich mianem aplikacji z pojedyncz(cid:200) stron(cid:200)) projektanci zacz(cid:218)li uzmys(cid:239)awia(cid:202) sobie
potencja(cid:239) j(cid:218)zyka JavaScript. Obecnie j(cid:218)zyk ten jest równie(cid:285) jednym z najbardziej
wszechobecnych dzi(cid:218)ki (cid:258)rodowisku Node.js, czyli platformie, która umo(cid:285)liwia u(cid:285)ycie
j(cid:218)zyka JavaScript jako j(cid:218)zyka serwerowego, a tak(cid:285)e dzi(cid:218)ki (cid:258)rodowisku PhoneGap s(cid:239)u(cid:285)(cid:200)-
cemu do tworzenia hybrydowych aplikacji dla urz(cid:200)dze(cid:241) przeno(cid:258)nych.
Poleć książkęKup książkę 32
ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery
Biblioteka jQuery to darmowa (obj(cid:218)ta licencj(cid:200) MIT License) i popularna biblio-
teka j(cid:218)zyka JavaScript stworzona przez Johna Resiga w 2006 r. Zosta(cid:239)a zapro-
jektowana w celu uproszczenia tworzenia skryptów HTML po stronie klienta.
Jak stwierdzono w witrynie internetowej biblioteki jQuery, jest to szybka, nie-
wielka i bogata w mo(cid:285)liwo(cid:258)ci biblioteka j(cid:218)zyka JavaScript. Dzi(cid:218)ki (cid:239)atwemu
w u(cid:285)yciu interfejsowi API, który wspó(cid:239)pracuje z wieloma przegl(cid:200)darkami, biblio-
teka znacznie upraszcza wykonywanie takich operacji jak przechodzenie w obr(cid:218)bie
dokumentów HTML i modyfikowanie ich, tworzenie animacji oraz obs(cid:239)ugiwa-
nie zdarze(cid:241) i technologii Ajax. W po(cid:239)(cid:200)czeniu z wszechstronno(cid:258)ci(cid:200) i rozszerzal-
no(cid:258)ci(cid:200) biblioteka jQuery zmieni(cid:239)a sposób, w jaki miliony osób tworz(cid:200) kod
JavaScript.
Cho(cid:202) tre(cid:258)(cid:202) powy(cid:285)szego stwierdzenia mo(cid:285)esz uzna(cid:202) za maj(cid:200)c(cid:200) charakter troch(cid:218) auto-
promocyjny lub „arogancki”, zawiera ona sam(cid:200) prawd(cid:218). Biblioteka jQuery naprawd(cid:218)
zmieni(cid:239)a to, jak miliony projektantów pisze swój kod. Zastosowanie tej biblioteki jest
tak powszechne, (cid:285)e zgodnie z danymi statystycznymi serwisu BuiltWith (z kwietnia
2015 r.) biblioteka jQuery u(cid:285)ywana jest w przypadku 63 miliona czo(cid:239)owych witryn
internetowych (http://trends.builtwith.com/javascript/jQuery). Wspomniana wcze(cid:258)niej
biblioteka Moo Tools, która jest g(cid:239)ównym konkurentem biblioteki jQuery, wykorzysty-
wana jest jedynie w wypadku 3 witryn (http://trends.builtwith.com/javascript/MooTools),
natomiast biblioteka Prototype mo(cid:285)e si(cid:218) „pochwali(cid:202)” wynikiem wynosz(cid:200)cym zaledwie
2,5 (http://trends.builtwith.com/javascript/Prototype).
Biblioteka jQuery u(cid:285)ywana jest przez cz(cid:218)(cid:258)(cid:202) spo(cid:258)ród najwa(cid:285)niejszych na (cid:258)wiecie
firm i witryn internetowych, takich jak Microsoft, Amazon, Dell, Etsy, Netflix, Best Buy,
Instagram, Fox News, GoDaddy oraz wiele innych. Je(cid:258)li mia(cid:239)e(cid:258) jakiekolwiek w(cid:200)tpli-
wo(cid:258)ci zwi(cid:200)zane z t(cid:200) bibliotek(cid:200), te dane powinny przekona(cid:202) Ci(cid:218), (cid:285)e jest to stabilna
i niezawodna biblioteka, której mo(cid:285)esz u(cid:285)y(cid:202) w swoich projektach.
W ksi(cid:200)(cid:285)ce omówiono wiele aspektów biblioteki, pocz(cid:200)wszy od podstawowych poj(cid:218)(cid:202),
takich jak selektory i metody umo(cid:285)liwiaj(cid:200)ce przechodzenie w obr(cid:218)bie modelu DOM
(Document Object Model), a sko(cid:241)czywszy na bardziej zaawansowanych zagadnieniach,
takich jak rozszerzanie funkcjonalno(cid:258)ci (tworzenie dodatków), zwi(cid:218)kszanie wydajno(cid:258)ci
kodu i testowanie. Przyj(cid:218)to, (cid:285)e dysponujesz znajomo(cid:258)ci(cid:200) j(cid:218)zyka JavaScript w mini-
malnym stopniu. Je(cid:258)li musisz sobie od(cid:258)wie(cid:285)y(cid:202) posiadan(cid:200) wiedz(cid:218), zajrzyj do dodatku.
Je(cid:285)eli nie jeste(cid:258) zaznajomiony z j(cid:218)zykiem, mo(cid:285)esz uzna(cid:202) tre(cid:258)(cid:202) ksi(cid:200)(cid:285)ki za trudn(cid:200), dlatego
zach(cid:218)camy do poznania j(cid:218)zyka, a nast(cid:218)pnie powrócenia do tej ksi(cid:200)(cid:285)ki. Poczekamy.
Czy wróci(cid:239)e(cid:258)? Mi(cid:239)o Ci(cid:218) widzie(cid:202) ponownie! Zacznijmy od pocz(cid:200)tku, czyli od omó-
wienia tego, co biblioteka jQuery ma do zaoferowania, a tak(cid:285)e tego, jak mo(cid:285)e pomóc
w procesie projektowania aplikacji internetowych.
1.1. Pisz mniej, a rób wi(cid:266)cej
Motto biblioteki jQuery brzmi nast(cid:218)puj(cid:200)co: „Pisz mniej, a rób wi(cid:218)cej”. Je(cid:258)li kiedy-
kolwiek po(cid:258)wi(cid:218)ci(cid:239)e(cid:258) czas na podejmowanie prób dodania do utworzonych stron ele-
mentów dynamicznych, to prawdopodobnie stwierdzi(cid:239)e(cid:258), (cid:285)e wykonywanie prostych
Poleć książkęKup książkę 1.1. Pisz mniej, a rób wi(cid:218)cej
33
zada(cid:241) za pomoc(cid:200) czystego kodu JavaScript mo(cid:285)e wygenerowa(cid:202) dziesi(cid:200)tki wierszy kodu.
Twórca biblioteki jQuery napisa(cid:239) j(cid:200) specjalnie z my(cid:258)l(cid:200) o sprawieniu, (cid:285)e typowe zadania
stan(cid:200) si(cid:218) trywialne i (cid:239)atwe do opanowania, a ponadto umo(cid:285)liwi(cid:200) rozwi(cid:200)zanie proble-
mów spowodowanych przez niezgodno(cid:258)(cid:202) przegl(cid:200)darek.
Ka(cid:285)dy, kto na przyk(cid:239)ad mia(cid:239) do czynienia z przyciskami opcji w kodzie JavaScript,
wie, (cid:285)e ma(cid:239)o ciekawym do(cid:258)wiadczeniem jest stwierdzanie, jaki element przycisku opcji
grupy takich przycisków jest w danym momencie zaznaczony, a tak(cid:285)e uzyskiwanie war-
to(cid:258)ci atrybutu value takiego elementu. Grupa przycisków opcji wymaga zlokalizowania,
a ka(cid:285)dy element przycisku opcji wynikowego zestawu musi kolejno zosta(cid:202) poddany
inspekcji w celu okre(cid:258)lenia, dla którego elementu ustawiono atrybut checked. Atrybut
value takiego elementu mo(cid:285)e nast(cid:218)pnie zosta(cid:202) uzyskany.
Aby zapewni(cid:202) zgodno(cid:258)(cid:202) z przegl(cid:200)dark(cid:200) Internet Explorer 6 i jej nowszymi wersjami
(je(cid:258)li zignorujesz niektóre starsze przegl(cid:200)darki, istnieje lepsze rozwi(cid:200)zanie), odpowiedni
kod mo(cid:285)na zaimplementowa(cid:202) w nast(cid:218)puj(cid:200)cy sposób:
var checkedValue;
var elements = document.getElementsByTagName( input );
for (var i = 0; i elements.length; i++) {
if (elements[i].type === radio
elements[i].name === some-radio-group
elements[i].checked) {
checkedValue = elements[i].value;
break;
}
}
Powy(cid:285)szy kod porównaj ze sposobem osi(cid:200)gni(cid:218)cia tego samego za pomoc(cid:200) biblioteki
jQuery:
var checkedValue =
jQuery( input:radio[name= some-radio-group ]:checked ).val();
Nie martw si(cid:218), je(cid:258)li kod wygl(cid:200)da teraz troch(cid:218) tajemniczo. Wkrótce zrozumiesz, jakie jest
jego dzia(cid:239)anie, a ponadto b(cid:218)dziesz tworzy(cid:202) w(cid:239)asne krótkie, ale bogate w mo(cid:285)liwo(cid:258)ci
instrukcje biblioteki jQuery, aby zapewni(cid:202) dynamik(cid:218) swoim stronom. W tym miejscu
zmierzamy do pokazania, jak biblioteka umo(cid:285)liwia zamian(cid:218) mnóstwa wierszy kodu na
tylko jeden wiersz.
To, co sprawia, (cid:285)e powy(cid:285)sza instrukcja biblioteki jQuery jest taka krótka, to du(cid:285)e
mo(cid:285)liwo(cid:258)ci selektora, czyli wyra(cid:285)enia u(cid:285)ywanego do identyfikowania elementów doce-
lowych na stronie. Selektor daje mo(cid:285)liwo(cid:258)(cid:202) (cid:239)atwego lokalizowania i pobierania wymaga-
nych elementów. W tym przypadku jest to wybrany element w grupie przycisków
opcji. Je(cid:258)li nie pobra(cid:239)e(cid:258) jeszcze przyk(cid:239)adowego kodu, b(cid:218)dzie teraz znakomity moment,
aby tak post(cid:200)pi(cid:202). Kod mo(cid:285)esz pobra(cid:202) pod adresem: . Po rozpakowaniu archiwum
z kodem w przegl(cid:200)darce za(cid:239)aduj stron(cid:218) HTML znajduj(cid:200)c(cid:200) si(cid:218) w pliku rozdzial_1/
radio.group.html. W przypadku tej strony (rysunek 1.1) do okre(cid:258)lenia, jaki zosta(cid:239) wybrany
przycisk opcji, u(cid:285)ywana jest wcze(cid:258)niej zaprezentowana instrukcja biblioteki jQuery.
W omawianym przyk(cid:239)adzie pokazano, jak prosty i zwi(cid:218)z(cid:239)y mo(cid:285)e by(cid:202) kod utworzony
za pomoc(cid:200) biblioteki jQuery. Nie jest to jedyny atut tej biblioteki. Je(cid:258)li by(cid:239)oby inaczej,
dawno temu by si(cid:218) jej pozbyto. Niemniej jednak jedn(cid:200) z najwi(cid:218)kszych zalet biblioteki
Poleć książkęKup książkę 34
ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery
Rysunek 1.1. Okre(cid:286)lanie,
jaki przycisk opcji zosta(cid:225) wybrany,
jest proste do zrealizowania
za pomoc(cid:261) jednej instrukcji
z kodem biblioteki jQuery!
jQuery jest zapewnianie przez ni(cid:200) mo(cid:285)liwo(cid:258)ci uzyskiwania elementów za pomoc(cid:200)
z(cid:239)o(cid:285)onych selektorów bez przejmowania si(cid:218) kwesti(cid:200) zgodno(cid:258)ci z ró(cid:285)nymi przegl(cid:200)dar-
kami, a zw(cid:239)aszcza ze starszymi.
Przy wykonywaniu operacji wybierania bazujesz na dwóch elementach, a miano-
wicie na metodzie i selektorze. Obecnie najnowsze wersje wszystkich podstawowych
przegl(cid:200)darek obs(cid:239)uguj(cid:200) metody macierzyste s(cid:239)u(cid:285)(cid:200)ce do wybierania elementów, takie
jak document.querySelector() i document.querySelectorAll(). Umo(cid:285)liwiaj(cid:200) one zastoso-
wanie bardziej z(cid:239)o(cid:285)onych selektorów zamiast zwyk(cid:239)ej operacji wybierania w oparciu
o identyfikator lub klas(cid:218).
Ponadto nowe selektory arkuszy stylów CSS3 s(cid:200) powszechnie obs(cid:239)ugiwane przez
nowoczesne przegl(cid:200)darki. Je(cid:258)li zdecydowa(cid:239)by(cid:258) si(cid:218) obs(cid:239)ugiwa(cid:202) tylko takie przegl(cid:200)darki,
a mo(cid:285)liwo(cid:258)ci biblioteki jQuery zwi(cid:200)zane by(cid:239)yby wy(cid:239)(cid:200)cznie z wybieraniem elementów,
dost(cid:218)pna by(cid:239)aby moc obliczeniowa wystarczaj(cid:200)ca do tego, aby pomin(cid:200)(cid:202) obci(cid:200)(cid:285)enie
wynikaj(cid:200)ce z zastosowania biblioteki w witrynie internetowej. To, (cid:285)e wiele osób nadal
bazuje na starszych przegl(cid:200)darkach, do których obs(cid:239)ugi mo(cid:285)esz by(cid:202) zmuszony, mo(cid:285)e
by(cid:202) rzeczywistym utrudnieniem, gdy(cid:285) konieczne jest zajmowanie si(cid:218) wszystkimi nie-
spójno(cid:258)ciami. Jest to jeden z g(cid:239)ównych powodów wykorzystania biblioteki jQuery.
Umo(cid:285)liwia ona u(cid:285)ycie jej selektorów w niezawodny sposób bez obaw, (cid:285)e kod nie zadzia(cid:239)a
w przegl(cid:200)darkach, które nie obs(cid:239)uguj(cid:200) ich we w(cid:239)asnym zakresie.
UWAGA Je(cid:258)li zastanawiasz si(cid:218), jakie przegl(cid:200)darki s(cid:200) obecnie uwa(cid:285)ane za nowo-
czesne, to s(cid:200) nimi: Internet Explorer w wersji 10 i nowszych, a tak(cid:285)e najnowsze
wersje przegl(cid:200)darek Chrome, Opera, Firefox i Safari.
Czy nadal nie jeste(cid:258) przekonany? Pod adresem http://goo.gl/eULyPT dost(cid:218)pna jest
lista problemów, którymi musisz si(cid:218) zaj(cid:200)(cid:202) we w(cid:239)asnym zakresie, gdy nie u(cid:285)ywasz biblio-
teki jQuery. Jak ju(cid:285) wspomniano, biblioteka zapewnia znacznie wi(cid:218)cej mo(cid:285)liwo(cid:258)ci,
o których dowiesz si(cid:218) w pozosta(cid:239)ej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki.
Dowiedzmy si(cid:218) teraz, jak kod JavaScript powinien by(cid:202) u(cid:285)ywany na tworzonych
stronach.
1.2. Przejrzysty kod JavaScript
By(cid:202) mo(cid:285)e pami(cid:218)tasz nie najlepsze czasy przed pojawieniem si(cid:218) arkuszy stylów CSS,
gdy w obr(cid:218)bie stron HTML konieczne by(cid:239)o (cid:239)(cid:200)czenie znaczników okre(cid:258)laj(cid:200)cych styl
ze znacznikami struktury dokumentu. Ka(cid:285)dy, kto tworzy(cid:239) strony przez dowolny czas,
z pewno(cid:258)ci(cid:200) musia(cid:239) tak post(cid:218)powa(cid:202) (czemu najprawdopodobniej nie towarzyszy(cid:239)o
uczucie sympatii).
Poleć książkęKup książkę 1.2. Przejrzysty kod JavaScript
35
Dodanie arkuszy stylów CSS do zestawów narz(cid:218)dziowych u(cid:285)ywanych do projek-
towania aplikacji internetowych pozwala na oddzielenie informacji o stylach od struktury
dokumentu, a farsom w rodzaju znacznika font zapewnia „naprawd(cid:218) zas(cid:239)u(cid:285)onego
kopniaka”. Separacja stylu od struktury nie tylko u(cid:239)atwia zarz(cid:200)dzanie dokumentami, ale
te(cid:285) oferuje wszechstronno(cid:258)(cid:202) pozwalaj(cid:200)c(cid:200) na ca(cid:239)kowit(cid:200) zmian(cid:218) renderowania strony pod
wzgl(cid:218)dem stylistycznym, polegaj(cid:200)c(cid:200) na wymianie ró(cid:285)nych arkuszy stylów.
Niewielu z czytelników dobrowolnie cofn(cid:218)(cid:239)oby si(cid:218) do czasów, gdy style stosowano
przy u(cid:285)yciu elementów HTML. Okazuje si(cid:218), (cid:285)e ponadto w dalszym ci(cid:200)gu zbyt
powszechne s(cid:200) znaczniki podobne do nast(cid:218)puj(cid:200)cych:
button onclick= document.getElementById( xyz ).style.color= red ;
Kliknij mnie
/button
Z (cid:239)atwo(cid:258)ci(cid:200) mo(cid:285)esz zauwa(cid:285)y(cid:202), (cid:285)e styl tego elementu button nie jest stosowany przy
u(cid:285)yciu znacznika font oraz innych przestarza(cid:239)ych znaczników powi(cid:200)zanych ze stylem.
Styl elementu jest okre(cid:258)lany przez dowolne (cid:127) je(cid:258)li zosta(cid:239)y zdefiniowane (cid:127) regu(cid:239)y
arkuszy stylów CSS (ich kodu tutaj nie pokazano), które obowi(cid:200)zuj(cid:200) na stronie. Cho(cid:202)
taka deklaracja nie (cid:239)(cid:200)czy znaczników stylu ze struktur(cid:200), wi(cid:200)(cid:285)e z ni(cid:200) zachowanie. Deklara-
cja uwzgl(cid:218)dnia kod JavaScript wykonywany w momencie klikni(cid:218)cia przycisku jako
cz(cid:218)(cid:258)(cid:202) znacznika elementu button za po(cid:258)rednictwem atrybutu onclick (w tym przy-
padku atrybut zmienia na czerwony kolor elementu modelu DOM z identyfikatorem
o warto(cid:258)ci xyz). Sprawd(cid:283)my, jak w tej sytuacji mo(cid:285)na wprowadzi(cid:202) ulepszenia.
1.2.1. Oddzielanie zachowania od struktury
Z wszystkich tych samych powodów, dla których
po(cid:285)(cid:200)dane jest rozdzielenie stylu i struktury w obr(cid:218)-
bie dokumentu HTML, tak samo korzystne (je(cid:258)li
nawet nie bardziej) jest odseparowanie zachowania
od struktury. W idealnej sytuacji struktura strony
HTML powinna by(cid:202) podobna do pokazanej na rysun-
ku 1.2. W jej wypadku struktura, styl i zachowanie s(cid:200)
(cid:239)adnie wydzielone w obr(cid:218)bie w(cid:239)asnego obszaru.
Strategia ta, okre(cid:258)lana mianem przejrzystego kodu
JavaScript, jest obecnie uwzgl(cid:218)dniana przez ka(cid:285)d(cid:200)
bardziej znan(cid:200) bibliotek(cid:218) j(cid:218)zyka JavaScript. U(cid:239)atwia
to twórcom stron uzyskiwanie takiej przydatnej sepa-
racji w obr(cid:218)bie swoich stron. Rdze(cid:241) biblioteki jQuery,
która spopularyzowa(cid:239)a t(cid:218) strategi(cid:218), jest odpowiednio
zoptymalizowany pod k(cid:200)tem (cid:239)atwego generowania
przejrzystego kodu JavaScript. W przypadku takiego
kodu za niepoprawne uznane zostan(cid:200) dowolne wyra-
(cid:285)enia lub instrukcje j(cid:218)zyka JavaScript umieszczone
w obr(cid:218)bie znaczników HTML w sekcji body stron
Rysunek 1.2. Dzi(cid:266)ki przejrzystemu
rozmieszczeniu w obr(cid:266)bie strony
struktury, stylu i zachowania
w osobnych obszarach maksymalnie
zwi(cid:266)kszana jest czytelno(cid:286)(cid:252)
i mo(cid:298)liwo(cid:286)(cid:252) utrzymania kodu
Poleć książkęKup książkę 36
ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery
HTML, które to wyra(cid:285)enia lub instrukcje s(cid:200) atrybutami elementów HTML (np. onclick)
albo zawarte s(cid:200) w blokach skryptu zlokalizowanych w dowolnym miejscu innym ni(cid:285)
sam koniec sekcji body strony.
Mo(cid:285)esz zada(cid:202) nast(cid:218)puj(cid:200)ce pytanie: „Jak jednak mog(cid:218) skonfigurowa(cid:202) przycisk bez
atrybutu onlick?”. Przyjrzyj si(cid:218) nast(cid:218)puj(cid:200)cej modyfikacji elementu przycisku:
button id= test-button Kliknij mnie /button
Du(cid:285)o pro(cid:258)ciej! Teraz jednak zauwa(cid:285)ysz, (cid:285)e przycisk nie wykonuje (cid:285)adnego dzia(cid:239)ania.
Mo(cid:285)esz klika(cid:202) przycisk przez ca(cid:239)y dzie(cid:241), a nie spowoduje to (cid:285)adnego dzia(cid:239)ania.
Poprawmy to.
1.2.2. Oddzielanie skryptu
Zamiast osadza(cid:202) w znacznikach przycisku informacje o jego zachowaniu, dokonasz
oddzielenia skryptu przez przeniesienie go do bloku script. Post(cid:218)puj(cid:200)c zgodnie z obo-
wi(cid:200)zuj(cid:200)cymi obecnie najlepszymi praktykami, skrypt nale(cid:285)y umie(cid:258)ci(cid:202) na dole strony
przed zamykaj(cid:200)cym znacznikiem /body :
script
document.getElementById( test-button ).addEventListener(
click ,
function() {
document.getElementById( xyz ).style.color = red ;
},
false
);
/script
Poniewa(cid:285) skrypt umieszczasz u do(cid:239)u strony, nie musisz u(cid:285)ywa(cid:202) procedury obs(cid:239)ugi
powi(cid:200)zanej ze zdarzeniem onload obiektu window, po jak(cid:200) (nies(cid:239)usznie) w przesz(cid:239)o(cid:258)ci
si(cid:218)gali projektanci, albo czeka(cid:202) na zdarzenie DOMContentLoaded, które dost(cid:218)pne jest
tylko w nowoczesnych przegl(cid:200)darkach. Zdarzenie to jest aktywowane w momencie
ca(cid:239)kowitego za(cid:239)adowania i przeanalizowania dokumentu HTML bez oczekiwania na
zako(cid:241)czenie (cid:239)adowania arkuszy stylów, obrazów itp. Zdarzenie load wyzwalane jest
w chwili uko(cid:241)czenia (cid:239)adowania strony HTML oraz jej zasobów zale(cid:285)nych (do tego
tematu powrócimy w punkcie 1.5.3). Dzi(cid:218)ki umieszczeniu skryptu na dole strony, gdy
przegl(cid:200)darka analizuje instrukcj(cid:218), element button istnieje, poniewa(cid:285) jego znaczniki
zosta(cid:239)y poddane analizie. Oznacza to, (cid:285)e mo(cid:285)esz bezpiecznie element rozszerzy(cid:202).
UWAGA Ze wzgl(cid:218)dów wydajno(cid:258)ciowych elementy script zawsze powinny by(cid:202)
umiejscawiane na dole tre(cid:258)ci dokumentu. Pierwszym powodem jest umo(cid:285)li-
wienie renderowania progresywnego, a drugim zapewnienie zwi(cid:218)kszenia rów-
noleg(cid:239)o(cid:258)ci operacji pobierania. Uzasadnieniem pierwszego powodu jest to, (cid:285)e
renderowanie jest blokowane dla ca(cid:239)ej tre(cid:258)ci znajduj(cid:200)cej si(cid:218) poni(cid:285)ej elementu
script. Drugi powód wynika z tego, (cid:285)e przegl(cid:200)darka nie rozpocznie (cid:285)adnych
innych operacji pobierania (nawet w wypadku innej nazwy hosta), je(cid:258)li pobie-
rane s(cid:200) dane elementu script.
Poleć książkęKup książkę 1.3. Instalowanie biblioteki jQuery
37
Zamieszczony na poprzedniej stroniej fragment kodu jest kolejnym przyk(cid:239)adem, który
nie jest ca(cid:239)kowicie zgodny z przegl(cid:200)darkami, pod k(cid:200)tem jakich mo(cid:285)e by(cid:202) realizowany
projekt. W kodzie tym u(cid:285)yto metody addEventListener() j(cid:218)zyka JavaScript, która nie jest
obs(cid:239)ugiwana przez przegl(cid:200)dark(cid:218) Internet Explorer w wersjach od 6 do 8. Jak si(cid:218) oka(cid:285)e
w dalszej cz(cid:218)(cid:258)ci ksi(cid:200)(cid:285)ki, biblioteka jQuery okazuje si(cid:218) pomocna przy rozwi(cid:200)zywaniu
równie(cid:285) tego problemu.
Cho(cid:202) strategia przejrzystego kodu JavaScript to bogata w mo(cid:285)liwo(cid:258)ci technika
pozwalaj(cid:200)ca na wyra(cid:283)ne oddzielenie zakresów odpowiedzialno(cid:258)ci w obr(cid:218)bie aplikacji
internetowej, nie jest pozbawiona niedogodno(cid:258)ci. By(cid:202) mo(cid:285)e zauwa(cid:285)y(cid:239)e(cid:258) ju(cid:285), (cid:285)e osi(cid:200)-
gni(cid:218)cie celu wymaga(cid:239)o kilku wierszy skryptu wi(cid:218)cej ni(cid:285) w sytuacji, gdy kod umiesz-
czono w znacznikach przycisku. Przejrzysty kod JavaScript mo(cid:285)e spowodowa(cid:202) zwi(cid:218)k-
szenie liczby wierszy kodu skryptu niezb(cid:218)dnego do utworzenia, a ponadto wymaga
pewnej dyscypliny oraz stosowania w(cid:239)a(cid:258)ciwych wzorców tworzenia kodu dla skryptu
po stronie klienta.
Nie ma w tym jednak niczego z(cid:239)ego. Wskazane jest wszystko, co przekonuje do
pisania kodu po stronie klienta na takim samym poziomie dba(cid:239)o(cid:258)ci, jaki zwykle towarzy-
szy tworzeniu kodu po stronie serwera! Oznacza to jednak dodatkowy nak(cid:239)ad pracy (cid:127)
oczywi(cid:258)cie gdy nie skorzysta si(cid:218) z biblioteki jQuery.
W wypadku biblioteki jQuery szczególnie skupiono si(cid:218) na sprawieniu, (cid:285)e tworze-
nie kodu stron przy u(cid:285)yciu technik przejrzystego kodu JavaScript b(cid:218)dzie (cid:239)atwym i przy-
jemnym zadaniem, które nie wymaga ponoszenia sporej ceny w postaci nak(cid:239)adu pracy
lub ilo(cid:258)ci kodu. Stwierdzisz, (cid:285)e efektywne korzystanie z tej biblioteki umo(cid:285)liwi osi(cid:200)-
gni(cid:218)cie znacznie wi(cid:218)cej na stronach, gdy tworzona jest mniejsza ilo(cid:258)(cid:202) kodu. Czy(cid:285) nie
obowi(cid:200)zuje nadal motto „Pisz mniej, a rób wi(cid:218)cej”? Bez zb(cid:218)dnego dalszego rozpisy-
wania si(cid:218) zacznijmy wyja(cid:258)nianie, w jaki sposób biblioteka jQuery tak bardzo u(cid:239)atwia
dodawanie zaawansowanych funkcji do stron bez oczekiwanych utrudnie(cid:241).
1.3. Instalowanie biblioteki jQuery
Gdy ju(cid:285) wiesz, czym jest biblioteka jQuery i jakie s(cid:200) jej mo(cid:285)liwo(cid:258)ci, to aby rozpocz(cid:200)(cid:202)
korzystanie z niej, musisz j(cid:200) pobra(cid:202). W tym celu odwied(cid:283) stron(cid:218) o adresie http://
jquery.com/download/. Po wy(cid:258)wietleniu jej prawdopodobnie zostaniesz przyt(cid:239)oczony
mnóstwem dost(cid:218)pnych opcji. Ga(cid:239)(cid:200)(cid:283) wersji 1.x, 2.x lub 3.x? Skompresowane czy bez
kompresji? Czy pobiera(cid:202) bibliotek(cid:218), czy skorzysta(cid:202) z sieci CDN (Content Delivery
Network)? Wybór zale(cid:285)y od kilku czynników. Aby(cid:258) móg(cid:239) dokona(cid:202) (cid:258)wiadomego wyboru,
zaprezentujmy ró(cid:285)nice.
1.3.1. Wybieranie w(cid:225)a(cid:286)ciwej wersji
W kwietniu 2013 r. zespó(cid:239) tworz(cid:200)cy bibliotek(cid:218) jQuery zaprezentowa(cid:239) jej wersj(cid:218) 2.0
z zamiarem wzi(cid:218)cia pod uwag(cid:218) przysz(cid:239)o(cid:258)ci technologii internetowych zamiast ich prze-
sz(cid:239)o(cid:258)ci, zw(cid:239)aszcza z punktu widzenia przegl(cid:200)darek. Do tego momentu biblioteka jQuery
obs(cid:239)ugiwa(cid:239)a wszystkie najnowsze wersje przegl(cid:200)darek Chrome, Firefox, Safari, Opera
oraz Internet Explorer (pocz(cid:200)wszy od wersji 6). Wraz z pojawieniem si(cid:218) wersji 2.0
zespó(cid:239) zdecydowa(cid:239) si(cid:218) na zrezygnowanie z obs(cid:239)ugi starszych wersji 6, 7 i 8 przegl(cid:200)darki
Poleć książkęKup książkę 38
ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery
Internet Explorer, aby skoncentrowa(cid:202) si(cid:218) na przysz(cid:239)o(cid:258)ci technologii internetowych,
a nie na ich przesz(cid:239)o(cid:258)ci.
Decyzja ta spowodowa(cid:239)a usuni(cid:218)cie porcji kodu utworzonego w celu eliminowania
niezgodno(cid:258)ci przegl(cid:200)darek oraz radzenia sobie z funkcjami nieobecnymi w tych „prehi-
storycznych” przegl(cid:200)darkach. Zrealizowanie tego zadania przyczyni(cid:239)o si(cid:218) do uzyskania
mniejszej (o 12 ) i szybszej bazy kodu. Cho(cid:202) wersje 1.x i 2.x to dwie ró(cid:285)ne ga(cid:239)(cid:218)zie,
s(cid:200) ze sob(cid:200) (cid:258)ci(cid:258)le powi(cid:200)zane. Wyst(cid:218)puje równo(cid:258)(cid:202) funkcji w wypadku wersji biblioteki
jQuery 1.10 i 2.0, wersji 1.11 i 2.1 itd.
W pa(cid:283)dzierniku 2014 r. Dave Methvin, przewodnicz(cid:200)cy fundacji jQuery Foundation
(zajmuje si(cid:218) bibliotek(cid:200) jQuery oraz innymi projektami; https://jquery.org/) opublikowa(cid:239)
post na blogu (http://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/),
w którym publicznie og(cid:239)osi(cid:239) plan udost(cid:218)pnienia nowej g(cid:239)ównej wersji biblioteki jQuery,
czyli jQuery 3. Tak samo jak wersja 1.x obs(cid:239)uguje stare przegl(cid:200)darki, a wersja 2.x
dotyczy nowoczesnych przegl(cid:200)darek, tak biblioteka jQuery 3 zapewnia dwa warianty.
Warianty jQuery Compat 3 i jQuery 3 to odpowiednio nast(cid:218)pcy wersji 1.x i 2.x. Oto
dodatkowe wyja(cid:258)nienia przewodnicz(cid:200)cego:
Pocz(cid:200)wszy od tych wersji, b(cid:218)dziemy te(cid:285) zmienia(cid:202) nasz(cid:200) strategi(cid:218) pod k(cid:200)tem
obs(cid:239)ugi przegl(cid:200)darek. G(cid:239)ówny pakiet biblioteki jQuery pozostaje niewielki
i zwarty dzi(cid:218)ki obs(cid:239)ugiwaniu sprawdzonych przegl(cid:200)darek (bie(cid:285)(cid:200)ce i poprzednie
wersje konkretnej przegl(cid:200)darki), które s(cid:200) powszechnie u(cid:285)ywane w momencie
udost(cid:218)pnienia pakietu. Mo(cid:285)liwa jest obs(cid:239)uga dodatkowych przegl(cid:200)darek w tym
pakiecie na podstawie ich udzia(cid:239)u w rynku. Pakiet wariantu jQuery Compat
oferuje znacznie wi(cid:218)ksze wsparcie przegl(cid:200)darek, co jednak powoduje wi(cid:218)kszy
rozmiar pliku i potencjalnie ni(cid:285)sz(cid:200) wydajno(cid:258)(cid:202).
Wraz z udost(cid:218)pnieniem nowej wersji zespó(cid:239) skorzysta(cid:239) z mo(cid:285)liwo(cid:258)ci zrezygnowania
z obs(cid:239)ugi niektórych przegl(cid:200)darek, usuni(cid:218)cia wielu b(cid:239)(cid:218)dów i ulepszenia kilku funkcji.
Pierwsza kwestia do rozwa(cid:285)enia przy podejmowaniu decyzji, jaka wersja ma zosta(cid:202)
u(cid:285)yta, dotyczy tego, jakie przegl(cid:200)darki musz(cid:200) by(cid:202) obs(cid:239)ugiwane w ramach projektu.
W tabeli 1.1 opisano przegl(cid:200)darki obs(cid:239)ugiwane przez ka(cid:285)d(cid:200) g(cid:239)ówn(cid:200) wersj(cid:218) biblioteki
jQuery.
Jak wida(cid:202) w tabeli, wyst(cid:218)puje pewien stopie(cid:241) pokrywania si(cid:218) pod wzgl(cid:218)dem obs(cid:239)ugi-
wanych wersji przegl(cid:200)darek. Miej jednak na uwadze, (cid:285)e to, co reprezentowane jest
przez okre(cid:258)lenie „bie(cid:285)(cid:200)ce i poprzednie wersje” (wskazuje na bie(cid:285)(cid:200)ce i poprzednie wersje
przegl(cid:200)darki stosowane w momencie opublikowania nowej wersji biblioteki jQuery),
zmienia si(cid:218) zale(cid:285)nie od daty udost(cid:218)pnienia nowej wersji biblioteki jQuery.
Inn(cid:200) istotn(cid:200) kwesti(cid:200), jak(cid:200) trzeba uwzgl(cid:218)dni(cid:202) przy podejmowaniu decyzji, jest to,
gdzie skorzystasz z biblioteki jQuery. Oto niektóre przypadki u(cid:285)ycia, które mog(cid:200) u(cid:239)atwi(cid:202)
dokonanie wyboru:
(cid:81) Witryny internetowe, które nie wymagaj(cid:200) obs(cid:239)ugi starszych wersji przegl(cid:200)darek
Internet Explorer i Opera, a tak(cid:285)e innych przegl(cid:200)darek korzystaj(cid:200)cych z ga(cid:239)(cid:218)zi
3.x. Dotyczy to witryn internetowych uruchomionych w (cid:258)rodowisku kontrolowa-
nym, takim jak firmowa sie(cid:202) lokalna.
Poleć książkęKup książkę 1.3. Instalowanie biblioteki jQuery
39
Tabela 1.1. Zestawienie przegl(cid:261)darek obs(cid:225)ugiwanych przez g(cid:225)ówne wersje biblioteki jQuery
Przegl(cid:261)darki
jQuery 1
jQuery 2
jQuery Compat 3
jQuery 3
Internet
Explorer
Chrome
Firefox
Safari
Opera
iOS
Android
6+
9+
8+
9+
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
5.1+
12.1x
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
6.1+
2.3
4.0+
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
5.1+
12.1x
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
6.1+
2.3
4.0+
Bie(cid:298)(cid:261)ce i poprzednie
wersje
Bie(cid:298)(cid:261)ce i poprzednie
wersje
7.0+
Bie(cid:298)(cid:261)ce i poprzednie
wersje
7.0+
2.3
4.0+
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
7.0+
Bie(cid:298)(cid:261)ce
i poprzednie
wersje
7.0+
2.3
4.0+
(cid:81) Witryny internetowe, których tre(cid:258)(cid:202) musi by(cid:202) kierowana do jak najwi(cid:218)kszej grupy
odbiorców (np. witryna rz(cid:200)dowa), powinny korzysta(cid:202) z ga(cid:239)(cid:218)zi 1.x.
(cid:81) Je(cid:258)li projektujesz witryn(cid:218) internetow(cid:200), która musi by(cid:202) dostosowana do wymaga(cid:241)
szerszej grupy odbiorców, lecz bez konieczno(cid:258)ci obs(cid:239)ugi wersji 6 i 7 przegl(cid:200)-
darki Internet Explorer oraz starszych wersji przegl(cid:200)darek Opera i Safari, nale(cid:285)y
zastosowa(cid:202) bibliotek(cid:218) jQuery Compat 3.x.
(cid:81) Je(cid:258)li nie wymagasz obs(cid:239)ugi przegl(cid:200)darki Internet Explorer w wersji 8 lub starszej,
ale konieczne jest wsparcie starych przegl(cid:200)darek Opera i Safari, nale(cid:285)y u(cid:285)y(cid:202)
biblioteki jQuery 2.x.
(cid:81) Aplikacje dla urz(cid:200)dze(cid:241) przeno(cid:258)nych zaprojektowane za pomoc(cid:200) (cid:258)rodowiska
PhoneGap lub podobnych (cid:258)rodowisk mog(cid:200) korzysta(cid:202) z biblioteki jQuery 3.x.
(cid:81) Aplikacje dla systemu Firefox OS lub Chrome OS mog(cid:200) u(cid:285)ywa(cid:202) biblioteki jQu-
ery 3.x.
(cid:81) W wypadku witryn internetowych, które oparte s(cid:200) na bardzo starych dodatkach,
mo(cid:285)e by(cid:202) wymagane zastosowanie biblioteki jQuery 1.x (zale(cid:285)nie od faktycz-
nego kodu dodatków).
Podsumowuj(cid:200)c, dwie kwestie do rozwa(cid:285)enia to miejsce zastosowania biblioteki oraz to,
jakie przegl(cid:200)darki maj(cid:200) by(cid:202) obs(cid:239)ugiwane.
Innym powodem nieporozumie(cid:241) mo(cid:285)e by(cid:202) wybór mi(cid:218)dzy wersj(cid:200) skompresowan(cid:200)
(okre(cid:258)lan(cid:200) te(cid:285) mianem zminimalizowanej) przewidzian(cid:200) do u(cid:285)ycia w fazie produkcyjnej
a wersj(cid:200) bez kompresji przeznaczon(cid:200) do zastosowania w fazie projektowania (na ry-
sunku 1.3 zaprezentowano porównanie obu wersji). Zalet(cid:200) biblioteki w wersji zmini-
malizowanej jest zmniejszenie wielko(cid:258)ci pliku, dzi(cid:218)ki czemu u(cid:285)ytkownikom zapew-
niane jest mniejsze wykorzystanie dost(cid:218)pnej przepustowo(cid:258)ci po(cid:239)(cid:200)czenia sieciowego.
Redukcja wielko(cid:258)ci pliku jest osi(cid:200)gana przez usuwanie zb(cid:218)dnych obszarów (wci(cid:218)cia
w kodzie) i komentarzy do kodu, które s(cid:200) przydatne dla projektantów, ale ignorowane
Poleć książkęKup książkę 40
ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery
przez silniki j(cid:218)zyka JavaScript, a tak(cid:285)e przez skracanie nazw zmiennych (zaciemnianie
kodu). Zmiany te powoduj(cid:200) uzyskanie kodu, który jest mniej czytelny i trudniejszy do
poddania debugowaniu (z tego w(cid:239)a(cid:258)nie powodu nie nale(cid:285)y u(cid:285)ywa(cid:202) tej wersji kodu
w fazie projektowania), ale o mniejszej wielko(cid:258)ci.
Rysunek 1.3. U góry pokazano fragment kodu pochodz(cid:261)cy z kodu (cid:296)ród(cid:225)owego biblioteki jQuery
prezentuj(cid:261)cy wersj(cid:266) bez kompresji. Na dole widoczny jest ten sam fragment kodu w wersji
zminimalizowanej na potrzeby u(cid:298)ycia do celów produkcyjnych
W ksi(cid:200)(cid:285)ce b(cid:218)dziemy bazowa(cid:202) na bibliotece jQuery 1.x, aby umo(cid:285)liwi(cid:202) testowanie two-
rzonego kodu w najwi(cid:218)kszej mo(cid:285)liwej grupie przegl(cid:200)darek. Zwrócimy jednak uwag(cid:218) na
wszystkie ró(cid:285)nice, jakie pojawi(cid:239)y si(cid:218) w bibliotece jQuery 3, dzi(cid:218)ki czemu Twoja wie-
dza b(cid:218)dzie aktualna w maksymalnym mo(cid:285)liwym stopniu.
Wybór w(cid:239)a(cid:258)ciwej wersji biblioteki jQuery jest istotny, ale wspomniano te(cid:285) o ró(cid:285)nicy
mi(cid:218)dzy lokalnym udost(cid:218)pnianiem tej biblioteki a wykorzystaniem do tego sieci CDN.
1.3.2. Zwi(cid:266)kszanie wydajno(cid:286)ci przy u(cid:298)yciu sieci CDN
Obecnie powszechn(cid:200) praktyk(cid:200) jest udost(cid:218)pnianie plików takich jak obrazy i biblioteki
za po(cid:258)rednictwem sieci dostarczania tre(cid:258)ci (CDN — Content Delivery Network), co ma
na celu zwi(cid:218)kszenie wydajno(cid:258)ci witryny internetowej. Sie(cid:202) CDN to system rozpro-
szony serwerów utworzony do oferowania tre(cid:258)ci przy zapewnieniu wysokiej dost(cid:218)p-
no(cid:258)ci i wydajno(cid:258)ci. Mo(cid:285)esz by(cid:202) (cid:258)wiadomy tego, (cid:285)e przegl(cid:200)darki maj(cid:200) mo(cid:285)liwo(cid:258)(cid:202) jed-
Poleć książkęKup książkę 1.3. Instalowanie biblioteki jQuery
41
noczesnego pobierania z hosta ustalonego zestawu tre(cid:258)ci pochodz(cid:200)cej zwykle z liczby
plików wynosz(cid:200)cej od czterech do o(cid:258)miu. Poniewa(cid:285) pliki udost(cid:218)pniane za pomoc(cid:200)
sieci CDN s(cid:200) zapewniane z innego hosta, mo(cid:285)esz przyspieszy(cid:202) ca(cid:239)y proces (cid:239)adowania
przez zwi(cid:218)kszenie liczby jednocze(cid:258)nie pobieranych plików. Poza tym wiele witryn
internetowych korzysta obecnie z sieci CDN, dlatego jest du(cid:285)e prawdopodobie(cid:241)stwo,
(cid:285)e wymagana biblioteka b(cid:218)dzie si(cid:218) ju(cid:285) znajdowa(cid:202) w pami(cid:218)ci podr(cid:218)cznej przegl(cid:200)darki
u(cid:285)ytkownika. Zastosowanie sieci CDN do za(cid:239)adowania biblioteki jQuery nie gwaran-
tuje lepszej wydajno(cid:258)ci w ka(cid:285)dej sytuacji, gdy(cid:285) wp(cid:239)yw ma na to wiele czynników. Radzimy
sprawdzi(cid:202), jaka konfiguracja b(cid:218)dzie najlepiej si(cid:218) sprawdza(cid:202) w konkretnej sytuacji.
Cho(cid:202) dost(cid:218)pnych jest obecnie kilka sieci CDN, które mog(cid:200) zosta(cid:202) u(cid:285)yte do do(cid:239)(cid:200)cza-
nia biblioteki jQuery, do najbardziej niezawodnych zaliczaj(cid:200) si(cid:218) nast(cid:218)puj(cid:200)ce: jQuery
CDN (http://code.jquery.com/), Google CDN (https://developers.google.com/speed/
libraries/devguide) oraz Microsoft CDN (http://www.asp.net/ajaxlibrary/cdn.ashx).
Za(cid:239)ó(cid:285)my, (cid:285)e chcesz do(cid:239)(cid:200)czy(cid:202) skompresowan(cid:200) wersj(cid:218) biblioteki jQuery 1.11.3 za
pomoc(cid:200) sieci jQuery CDN. W tym celu mo(cid:285)esz utworzy(cid:202) nast(cid:218)puj(cid:200)cy wiersz kodu:
script src= //code.jquery.com/jquery-1.11.3.min.js /script
Jak by(cid:202) mo(cid:285)e ju(cid:285) zauwa(cid:285)y(cid:239)e(cid:258), kod ten nie okre(cid:258)la protoko(cid:239)u, jaki ma zosta(cid:202) u(cid:285)yty (HTTP
lub HTTPS). Zamiast tego stosowany jest ten sam protokó(cid:239), którego u(cid:285)yto w witrynie
internetowej. Miej jednak (cid:258)wiadomo(cid:258)(cid:202), (cid:285)e wykorzystanie tej techniki w wypadku
strony, która nie jest uruchomiona na serwerze WWW, spowoduje b(cid:239)(cid:200)d.
Zastosowanie sieci CDN nie jest pozbawione mankamentów. (cid:191)aden serwer ani
sie(cid:202) nie zapewni nieustannej dost(cid:218)pno(cid:258)ci w internecie. Sieci CDN nie s(cid:200) tutaj wyj(cid:200)t-
kiem. Je(cid:258)li przy (cid:239)adowaniu biblioteki jQuery bazujesz na sieci CDN, to w rzadkich
sytuacjach, gdy jest ona niedost(cid:218)pna lub uleg(cid:239)a awarii, a ponadto przegl(cid:200)darka osoby
odwiedzaj(cid:200)cej witryn(cid:218) nie zawiera buforowanej kopii, kod witryny przestanie popraw-
nie dzia(cid:239)a(cid:202). Mo(cid:285)e to by(cid:202) problemem w przypadku kluczowych aplikacji. Aby tego
unikn(cid:200)(cid:202), mo(cid:285)na zastosowa(cid:202) dost(cid:218)pne proste i sprytne rozwi(cid:200)zanie, z którego korzysta
wielu projektantów. I tym razem chcesz do(cid:239)(cid:200)czy(cid:202) zminimalizowan(cid:200) wersj(cid:218) biblioteki
jQuery 1.11.3, lecz teraz u(cid:285)yjesz nast(cid:218)puj(cid:200)cego sprytnego rozwi(cid:200)zania:
script src= //code.jquery.com/jquery-1.11.3.min.js /script
script window.jQuery || document.write( script src= javascript/jquery-1.11.3.min.js
(cid:180) \/script ); /script
Ide(cid:200) dzia(cid:239)ania tego kodu jest za(cid:285)(cid:200)danie kopii biblioteki z sieci CDN i okre(cid:258)lenie, czy
biblioteka zosta(cid:239)a za(cid:239)adowana przez sprawdzenie, czy zdefiniowano w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) jQuery
obiektu window. Je(cid:258)li test zako(cid:241)czy si(cid:218) niepowodzeniem, zostanie „wstrzykni(cid:218)ty” kod,
który za(cid:239)aduje lokalnie dost(cid:218)pn(cid:200) kopi(cid:218) biblioteki. W tym konkretnym przypadku kopia
ta jest przechowywana w folderze o nazwie javascript. Je(cid:258)li istnieje w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) jQuery,
spokojnie mo(cid:285)esz skorzysta(cid:202) z metod biblioteki jQuery bez potrzeby (cid:239)adowania lokalnie
dost(cid:218)pnej kopii.
Test obecno(cid:258)ci w(cid:239)a(cid:258)ciwo(cid:258)ci jQuery wynika z tego, (cid:285)e jest ona dodawana po za(cid:239)adowa-
niu biblioteki. W tej w(cid:239)a(cid:258)ciwo(cid:258)ci mo(cid:285)esz znale(cid:283)(cid:202) wszystkie metody i inne w(cid:239)a(cid:258)ciwo(cid:258)ci
biblioteki. Sugerujemy, aby w czasie projektowania korzysta(cid:202) z lokalnej kopii biblio-
teki jQuery, co pozwoli zapobiec wszelkim problemom z po(cid:239)(cid:200)czeniem.
Poleć książkęKup książkę 42
ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery
Oprócz w(cid:239)a(cid:258)ciwo(cid:258)ci jQuery znajdziesz równie(cid:285) skrót o nazwie $, z którym bardzo
cz(cid:218)sto spotkasz si(cid:218) w tej ksi(cid:200)(cid:285)ce i nie tylko w niej. Cho(cid:202) mo(cid:285)e si(cid:218) to wyda(cid:202) dziwne,
w j(cid:218)zyku JavaScript dozwolona jest zmienna lub w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie $. Znak $ nazwano
skrótem, poniewa(cid:285) w(cid:239)a(cid:258)ciwie jest to ten sam obiekt w(cid:239)a(cid:258)ciwo(cid:258)ci jQuery, co potwier-
dza nast(cid:218)puj(cid:200)ca instrukcja pochodz(cid:200)ca z kodu (cid:283)ród(cid:239)owego:
window.jQuery = window.$ = jQuery;
Do tej pory dowiedzia(cid:239)e(cid:258) si(cid:218), jak do(cid:239)(cid:200)czy(cid:202) bibliotek(cid:218) jQuery do stron internetowych. Nie
wiesz jednak nic na temat jej struktury. Zajmiemy si(cid:218) tym w nast(cid:218)pnym podrozdziale.
1.4. Struktura biblioteki jQuery
Repozytorium biblioteki jQuery (https://github.com/jquery/jquery) dost(cid:218)pne w witry-
nie GitHub to znakomity przyk(cid:239)ad tego, jak przez ostatnie lata zmienia(cid:239)o si(cid:218) projek-
towanie interfejsu. Cho(cid:202) nie jest to (cid:258)ci(cid:258)le powi(cid:200)zane z u(cid:285)yciem samej biblioteki, zawsze
istotna jest (cid:258)wiadomo(cid:258)(cid:202) tego, jak do(cid:258)wiadczeni projektanci organizuj(cid:200) sobie przep(cid:239)yw
pracy oraz wykorzystywane przez siebie narz(cid:218)dzia.
Je(cid:258)li jeste(cid:258) do(cid:258)wiadczonym projektantem interfejsów, mo(cid:285)e si(cid:218) okaza(cid:202), (cid:285)e znasz
ju(cid:285) cz(cid:218)(cid:258)(cid:202) tych narz(cid:218)dzi (je(cid:258)li nie wszystkie). Niemniej jednak zawsze warto od(cid:258)wie(cid:285)y(cid:202)
sobie informacje na ten temat. Zespó(cid:239) projektantów wykorzysta(cid:239) na potrzeby prac zwi(cid:200)-
zanych z rozwojem biblioteki jQuery najnowsze i najciekawsze technologie, jakie tworz(cid:200)
obecnie panoram(cid:218) interfejsów u(cid:285)ytkownika. Dok(cid:239)adniej rzecz bior(cid:200)c, s(cid:200) to nast(cid:218)pu-
j(cid:200)ce technologie:
(cid:81) Node.js (http://nodejs.org/) — platforma oparta na (cid:258)rodowisku wykonawczym
JavaScript przegl(cid:200)darki Chrome, która umo(cid:285)liwia uruchamianie kodu JavaScript
po stronie serwera.
(cid:81) npm (https://npmjs.org/) — oficjalny mened(cid:285)er pakietów platformy Node.js u(cid:285)y-
wany do instalowania pakietów, takich jak Grunt wraz z jego zadaniami.
(cid:81) Grunt (http://gruntjs.com/) — narz(cid:218)dzie do wykonywania zada(cid:241), które automaty-
zuje typowe i powtarzaj(cid:200)ce si(cid:218) zadania, takie jak budowanie, testowanie i mini-
malizowanie.
(cid:81) Git (http://git-scm.com/) — darmowy, rozproszony system kontroli wersji, który
(cid:258)ledzi zmiany wprowadzane w kodzie. U(cid:239)atwia on wspó(cid:239)prac(cid:218) projektantów.
Kod (cid:283)ród(cid:239)owy biblioteki jQuery jest te(cid:285) zgodny z formatem definicji modu(cid:239)u asynchro-
nicznego (AMD — Asynchronous Module Definition). Format ten to propozycja doty-
cz(cid:200)ca definiowania modu(cid:239)ów, w przypadku których asynchronicznie mo(cid:285)e by(cid:202) (cid:239)ado-
wany zarówno modu(cid:239), jak i jego zale(cid:285)no(cid:258)ci. W praktyce oznacza to, (cid:285)e cho(cid:202) biblioteka
jest u(cid:285)ywana jako unikatowy, pojedynczy blok, jej kod (cid:283)ród(cid:239)owy dzielony jest na kilka
plików (modu(cid:239)ów), co pokazano na rysunku 1.4. Zale(cid:285)no(cid:258)ciami powi(cid:200)zanymi z tymi
plikami zarz(cid:200)dza si(cid:218) z wykorzystaniem mened(cid:285)era zale(cid:285)no(cid:258)ci (w tym wypadku jest to
narz(cid:218)dzie RequireJS).
Poleć książkęKup książkę 1.4. Struktura biblioteki jQuery
43
Rysunek 1.4. Schemat reprezentuj(cid:261)cy modu(cid:225)y biblioteki jQuery: ajax, ajax/xhr,
ajax/script, ajax/jsonp, css, deprecated, dimensions, effects, event, event/alias,
offset, wrap, core/ready, deferred, exports/global, exports/amd i Sizzle
Aby(cid:258) móg(cid:239) zorientowa(cid:202) si(cid:218), co jest wewn(cid:200)trz modu(cid:239)ów, prezentujemy kilka nast(cid:218)pu-
j(cid:200)cych przyk(cid:239)adów:
(cid:81) ajax — zawiera wszystkie funkcje technologii Ajax, takie jak ajax(), get() i post().
(cid:81) deprecated — zawiera wszystkie obecnie przestarza(cid:239)e metody, które nie zosta(cid:239)y
usuni(cid:218)te. To, co znajduje si(cid:218) w tym module, zale(cid:285)y od wersji biblioteki jQuery.
(cid:81) effects — zawiera metody, takie jak animate() i slideUp(), które umo(cid:285)liwiaj(cid:200) two-
rzenie animacji.
(cid:81) event — zawiera metody, takie jak on() i off(), które s(cid:239)u(cid:285)(cid:200) do do(cid:239)(cid:200)czania do zda-
rze(cid:241) przegl(cid:200)darki procedur obs(cid:239)ugi zdarze(cid:241).
Organizacja kodu (cid:283)ród(cid:239)owego oparta na modu(cid:239)ach zapewnia kolejn(cid:200) korzy(cid:258)(cid:202), czyli
mo(cid:285)liwo(cid:258)(cid:202) zbudowania wersji niestandardowej biblioteki jQuery, która zawiera wy(cid:239)(cid:200)cz-
nie wymagane modu(cid:239)y.
1.4.1. Tworzenie w(cid:225)asnej wersji niestandardowej
zmniejszaj(cid:261)cej wielko(cid:286)(cid:252) pliku
Biblioteka jQuery oferuje mo(cid:285)liwo(cid:258)(cid:202) budowania jej wersji niestandardowej, która
zawiera tylko niezb(cid:218)dne funkcjonalno(cid:258)ci. Pozwala to zredukowa(cid:202) wielko(cid:258)(cid:202) pliku biblio-
teki. To z kolei prowadzi do zwi(cid:218)kszenia wydajno(cid:258)ci, gdy(cid:285) u(cid:285)ytkownik musi pobra(cid:202)
mniej kilobajtów danych.
Istotna jest mo(cid:285)liwo(cid:258)(cid:202) wyeliminowania zb(cid:218)dnych modu(cid:239)ów. Cho(cid:202) mo(cid:285)esz pomy-
(cid:258)le(cid:202), (cid:285)e b(cid:218)dziesz wymaga(cid:202) wszystkich mo(cid:285)liwo(cid:258)ci oferowanych przez bibliotek(cid:218) jQuery,
w(cid:200)tpliwe jest, (cid:285)e w ramach tej samej witryny internetowej skorzystasz z wszystkich
jej funkcji. Dlaczego wi(cid:218)c nie usun(cid:200)(cid:202) tych zb(cid:218)dnych wierszy kodu, aby poprawi(cid:202)
wydajno(cid:258)(cid:202) witryny internetowej?
Narz(cid:218)dzie Grunt umo(cid:285)liwia utworzenie wersji niestandardowej. Wyobra(cid:283) sobie,
(cid:285)e wymagasz zminimalizowanej wersji biblioteki jQuery 1.11.3 z wszystkimi funkcjo-
nalno(cid:258)ciami (z wyj(cid:200)tkiem przestarza(cid:239)ych metod i w(cid:239)a(cid:258)ciwo(cid:258)ci) i efektami. Aby zreali-
zowa(cid:202) to zadanie, na komputerze musisz zainstalowa(cid:202) narz(cid:218)dzia Node.js, Git i Grunt.
Poleć książkęKup książkę 44
ROZDZIA(cid:224) 1. Wprowadzenie do biblioteki jQuery
Po ich zainstalowaniu musisz powieli(cid:202) repozytorium biblioteki jQuery, uruchamiaj(cid:200)c
nast(cid:218)puj(cid:200)ce polecenie przy u(cid:285)yciu interfejsu wiersza polece(cid:241) CLI (Command Line
Interface):
git clone git://github.com/jquery/jquery.git
Po uko(cid:241)czeniu procesu powielania wprowad(cid:283) jeszcze nast(cid:218)puj(cid:200)ce dwa polecenia:
npm install
grunt custom:-deprecated,-effects
I to tyle! W folderze o nazwie dist znajdziesz wersj(cid:218) niestandardow(cid:200) biblioteki jQuery
zarówno w wariancie zminimalizowanym, jak i w wariancie bez minimalizacji.
Takie rozwi(cid:200)zanie nie jest jednak pozbawione mankamentów. Pierwszy problem
pojawia si(cid:218) w momencie opublikowania nowej wersji biblioteki jQuery. Drugi pro-
blem wyst(cid:218)puje, gdy nowa funkcjonalno(cid:258)(cid:202) witryny internetowej wymaga uwzgl(cid:218)dnie-
nia w module sk(cid:239)adnika, który wcze(cid:258)niej nie zosta(cid:239) do(cid:239)(cid:200)czony. W tych sytuacjach
konieczne jest ponowne wykonanie wy(cid:285)ej podanych kroków (zwykle tylko polece(cid:241))
w celu utworzenia nowej wersji niestandardowej zawieraj(cid:200)cej nowe metody, poprawki
b(ci
Pobierz darmowy fragment (pdf)
