You are on page 1of 32

IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

JavaScript dla webmasterw.


Zaawansowane programowanie
Autor: Nicholas C. Zakas
Tumaczenie: Jarosaw Dobrzaski (wstp, rozdz. 1 8),
Krzysztof Czupryski (rozdz. 9), Daniel Kaczmarek
(rozdz. 10 20)
ISBN: 83-246-0280-1
Tytu oryginau: Professional JavaScript for Web Developers
Format: B5, stron: 660

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Kompendium wiedzy na temat jzyka JavaScript


Model DOM i programowanie obiektowe
Tworzenie dynamicznych interfejsw uytkownika
Mechanizmy komunikacji klient-serwer
JavaScript to jzyk programowania interpretowany po stronie przegldarki
i wykorzystywany do tworzenia elementw stron WWW. Opracowany w firmie
Netscape, pocztkowo suy wycznie do weryfikowania poprawnoci danych
wprowadzanych w formularzach. Dzi ma znacznie szersze zastosowania. Przede
wszystkim pozwala wzbogaci stron WWW o elementy niedostpne w czystym
HTML, a jego najnowsze wersje umoliwiaj korzystanie z dokumentw XML oraz
komunikacj z usugami sieciowymi. Z tego wzgldu JavaScript jest niemal
nieodcznym elementem nowoczesnej witryny internetowej.
Ksika JavaScript dla webmasterw. Zaawansowane programowanie to podrcznik
opisujcy wszystkie moliwoci jzyka JavaScript. Przedstawia jego histori i pokazuje,
jak rozwizywa problemy, przed ktrymi czsto staj twrcy witryn i aplikacji WWW.
W ksice opisano kluczowe elementy jzyka, takie jak zdarzenia, wyraenia regularne
oraz metody identyfikacji przegldarki WWW i interakcji z ni, umoliwiajce tworzenie
dynamicznych interfejsw uytkownika. Scharakteryzowano sposoby rozszerzania
jzyka JavaScript oraz techniki budowania mechanizmw komunikacji midzy klientem
i serwerem bez uywania elementw poredniczcych.
Podstawowe elementy ECMAScript
Zasady programowania obiektowego
Osadzanie elementw JavaScript w kodzie strony WWW
Hierarchia modelu DOM
Korzystanie z wyrae regularnych
Detekcja typu przegldarki i systemu operacyjnego
Obsuga zdarze
Kontrola poprawnoci danych z formularzy
Wykorzystywanie elementw jzyka XML
Komunikacja midzy przegldark i serwerem oraz usugi sieciowe
Bezpieczestwo aplikacji JavaScript
Jeli chcesz, aby Twoje aplikacje WWW dziaay szybciej,
skorzystaj z moliwoci JavaScript

Spis treci
2 O autorze ............................................................................................................................................... 15
2 Wstp .................................................................................................................................................... 17
Rozdzia 1. Czym jest JavaScript? ..........................................................................................................23
Krtka historia ............................................................................................................. 24
Implementacje JavaScriptu ........................................................................................... 25
ECMAScript ............................................................................................................ 25
Model DOM ............................................................................................................ 28
Model BOM ............................................................................................................ 31
Podsumowanie ............................................................................................................ 32

Rozdzia 2. Podstawy ECMAScriptu ........................................................................................................33


Skadnia ...................................................................................................................... 33
Zmienne ...................................................................................................................... 34
Sowa kluczowe ........................................................................................................... 37
Sowa zarezerwowane .................................................................................................. 37
Wartoci proste i referencje .......................................................................................... 37
Typy proste .................................................................................................................. 38
Operator typeof ...................................................................................................... 39
Typ Undefined ........................................................................................................ 39
Typ Null ................................................................................................................. 40
Typ Boolean ........................................................................................................... 40
Typ Number ............................................................................................................ 41
Typ String ............................................................................................................... 43
Konwersje ................................................................................................................... 44
Konwersja na cig znakowy ..................................................................................... 44
Konwersja na liczb ................................................................................................ 45
Rzutowanie typw ................................................................................................... 46
Typy referencyjne ......................................................................................................... 48
Klasa Object .......................................................................................................... 48
Klasa Boolean ........................................................................................................ 49
Klasa Number ........................................................................................................ 50
Klasa String ........................................................................................................... 51
Operator instanceof ................................................................................................ 55
Operatory .................................................................................................................... 55
Operatory jednoargumentowe .................................................................................. 55
Operatory bitowe .................................................................................................... 59
Operatory logiczne .................................................................................................. 65
Operatory multiplikatywne ........................................................................................ 69
Operatory addytywne ............................................................................................... 70

JavaScript. Zaawansowane programowanie


Operatory porwnujce ............................................................................................ 72
Operatory rwnoci ................................................................................................. 73
Operator warunkowy ................................................................................................ 75
Operatory przypisania .............................................................................................. 75
Przecinek ............................................................................................................... 76
Instrukcje .................................................................................................................... 76
Instrukcja if ............................................................................................................ 76
Instrukcje iteracyjne ................................................................................................ 77
Etykietowanie instrukcji ........................................................................................... 79
Instrukcje break i continue ...................................................................................... 79
Instrukcja with ........................................................................................................ 80
Instrukcja switch ..................................................................................................... 81
Funkcje ....................................................................................................................... 82
Nie przeadowywa! ................................................................................................. 84
Obiekt arguments ................................................................................................... 84
Klasa Function ....................................................................................................... 85
Zamknicia ............................................................................................................ 87
Podsumowanie ............................................................................................................ 88

Rozdzia 3. Podstawy programowania obiektowego ............................................................................ 91


Terminologia obiektowa ................................................................................................ 91
Wymogi jzykw obiektowych ................................................................................... 92
Skadniki obiektu .................................................................................................... 92
Posugiwanie si obiektami ........................................................................................... 92
Deklaracja i tworzenie egzemplarzy .......................................................................... 93
Referencje do obiektu ............................................................................................. 93
Usuwanie referencji do obiektu ................................................................................ 93
Wizanie wczesne a wizanie pne ......................................................................... 94
Typy obiektw .............................................................................................................. 94
Obiekty wasne ....................................................................................................... 94
Obiekty wewntrzne .............................................................................................. 105
Obiekty hosta ....................................................................................................... 111
Zakres ...................................................................................................................... 112
Publiczny, prywatny i chroniony .............................................................................. 112
Statyczny nie jest statyczny ................................................................................... 112
Sowo kluczowe this .............................................................................................. 113
Definiowanie klas i obiektw ....................................................................................... 114
Wzorzec fabryki ..................................................................................................... 114
Wzorzec konstruktora ............................................................................................ 116
Wzorzec prototypu ................................................................................................ 117
Hybrydowy wzorzec konstruktor-prototyp ................................................................. 118
Metoda dynamicznego prototypu ............................................................................ 119
Hybrydowy wzorzec fabryki ..................................................................................... 120
Ktrego wzorca uywa? ........................................................................................ 121
Praktyczny przykad ............................................................................................... 121
Modyfikowanie obiektw ............................................................................................. 123
Tworzenie nowej metody ........................................................................................ 124
Redefiniowanie istniejcych metod ......................................................................... 125
Bardzo pne wizanie .......................................................................................... 126
Podsumowanie .......................................................................................................... 126

Spis treci

Rozdzia 4. Dziedziczenie ....................................................................................................................... 129


Dziedziczenie w praktyce ............................................................................................ 129
Implementacja dziedziczenia ....................................................................................... 130
Sposoby dziedziczenia .......................................................................................... 131
Bardziej praktyczny przykad ................................................................................... 137
Alternatywne wzorce dziedziczenia ............................................................................... 142
zInherit ................................................................................................................ 142
xbObject .............................................................................................................. 146
Podsumowanie .......................................................................................................... 150

Rozdzia 5. JavaScript w przegldarce ................................................................................................ 151


JavaScript w kodzie HTML ........................................................................................... 151
Znacznik <script/> ............................................................................................... 151
Format plikw zewntrznych ................................................................................... 152
Kod osadzony a pliki zewntrzne ............................................................................ 153
Umiejscowienie znacznikw ................................................................................... 154
Ukrywa albo nie ukrywa ...................................................................................... 155
Znacznik <noscript/> ............................................................................................ 156
Zmiany w XHTML .................................................................................................. 157
JavaScript w SVG ....................................................................................................... 159
Podstawy SVG ...................................................................................................... 159
Znacznik <script/> w SVG ..................................................................................... 161
Umiejscowienie znacznikw <script/> w SVG .......................................................... 161
Obiektowy model przegldarki ..................................................................................... 162
Obiekt window ...................................................................................................... 162
Obiekt document .................................................................................................. 174
Obiekt location ..................................................................................................... 178
Obiekt navigator ................................................................................................... 180
Obiekt screen ....................................................................................................... 182
Podsumowanie .......................................................................................................... 182

Rozdzia 6. Podstawy modelu DOM ....................................................................................................... 183


Co to jest DOM? ........................................................................................................ 183
Wprowadzenie do XML .......................................................................................... 183
Interfejs API dla XML ............................................................................................. 187
Hierarchia wzw ................................................................................................. 187
Modele DOM w konkretnych jzykach ..................................................................... 190
Obsuga modelu DOM ................................................................................................ 191
Korzystanie z modelu DOM ......................................................................................... 191
Dostp do wzw dokumentu ............................................................................... 191
Sprawdzanie typu wza ........................................................................................ 193
Postpowanie z atrybutami .................................................................................... 193
Dostp do konkretnych wzw .............................................................................. 195
Tworzenie wzw i manipulowanie nimi .................................................................. 197
Elementy funkcjonalne HTML w modelu DOM ............................................................... 202
Atrybuty jako waciwoci ...................................................................................... 203
Metody do pracy z tabelami ................................................................................... 203
Przemierzanie w modelu DOM ..................................................................................... 206
Obiekt NodeIterator .............................................................................................. 206
TreeWalker ........................................................................................................... 211

JavaScript. Zaawansowane programowanie


Wykrywanie zgodnoci z modelem DOM ....................................................................... 213
Poziom 3 modelu DOM ............................................................................................... 215
Podsumowanie .......................................................................................................... 215

Rozdzia 7. Wyraenia regularne ......................................................................................................... 217


Obsuga wyrae regularnych ...................................................................................... 217
Korzystanie z obiektu RegExp ................................................................................ 218
Wyraenia regularne w standardowych metodach typu String .................................... 219
Proste wzorce ............................................................................................................ 221
Metaznaki ............................................................................................................ 221
Uywanie znakw specjalnych ................................................................................ 221
Klasy znakw ....................................................................................................... 222
Kwantyfikatory ...................................................................................................... 225
Zoone wzorce .......................................................................................................... 229
Grupowanie .......................................................................................................... 229
Referencje wsteczne ............................................................................................. 230
Przemienno ....................................................................................................... 231
Grupy nieprzechwytujce ....................................................................................... 233
Wyprzedzenia ....................................................................................................... 234
Granice ................................................................................................................ 235
Tryb wielowierszowy .............................................................................................. 236
Istota obiektu RegExp ................................................................................................ 237
Waciwoci egzemplarzy ....................................................................................... 237
Waciwoci statyczne ........................................................................................... 238
Typowe wzorce ........................................................................................................... 240
Kontrola poprawnoci dat ...................................................................................... 240
Kontrola poprawnoci danych karty kredytowej ........................................................ 242
Kontrola poprawnoci adresu e-mail ....................................................................... 246
Podsumowanie .......................................................................................................... 247

Rozdzia 8. Wykrywanie przegldarki i systemu operacyjnego ...................................................... 249


Obiekt navigator ........................................................................................................ 249
Metody wykrywania przegldarki .................................................................................. 250
Wykrywanie obiektw/moliwoci ........................................................................... 250
Wykrywanie na podstawie cigu User-Agent ............................................................ 251
(Niezbyt) krtka historia cigu User-Agent .................................................................... 251
Netscape Navigator 3.0 i Internet Explorer 3.0 ........................................................ 252
Netscape Communicator 4.0 i Internet Explorer 4.0 ................................................ 253
Internet Explorer 5.0 i nowsze wersje ..................................................................... 254
Mozilla ................................................................................................................. 254
Opera .................................................................................................................. 256
Safari .................................................................................................................. 257
Epilog .................................................................................................................. 258
Skrypt wykrywajcy przegldark ................................................................................. 258
Metodyka ............................................................................................................. 258
Pierwsze kroki ...................................................................................................... 259
Wykrywanie przegldarki Opera .............................................................................. 261
Wykrywanie przegldarek Konqueror i Safari ........................................................... 263
Wykrywanie przegldarki Internet Explorer ............................................................... 266
Wykrywanie przegldarki Mozilla ............................................................................. 267
Wykrywanie przegldarki Netscape Communicator 4.x ............................................. 268

Spis treci

Skrypt wykrywajcy platform i system operacyjny ........................................................ 269


Metodyka ............................................................................................................. 269
Pierwsze kroki ...................................................................................................... 269
Wykrywanie systemw operacyjnych Windows ......................................................... 270
Wykrywanie systemw operacyjnych dla platformy Macintosh ................................... 272
Wykrywanie uniksowych systemw operacyjnych ...................................................... 273
Peny skrypt ............................................................................................................... 274
Przykad strona logowania ...................................................................................... 277
Podsumowanie .......................................................................................................... 282

Rozdzia 9. Wszystko o zdarzeniach ................................................................................................... 285


Zdarzenia dzisiaj ........................................................................................................ 285
Przepyw zdarzenia ..................................................................................................... 286
Rozprzestrzenianie si zdarze .............................................................................. 286
Przechwytywanie zdarze ....................................................................................... 288
Przepyw zdarzenia w modelu DOM ......................................................................... 289
Procedury obsugi zdarze i suchacze zdarze ............................................................. 290
Internet Explorer ................................................................................................... 291
DOM .................................................................................................................... 292
Obiekt Event .............................................................................................................. 294
Lokalizacja ........................................................................................................... 294
Waciwoci i metody ............................................................................................ 295
Podobiestwa ....................................................................................................... 298
Rnice ................................................................................................................ 301
Typy zdarze .............................................................................................................. 304
Zdarzenia myszki .................................................................................................. 304
Zdarzenia klawiatury ............................................................................................. 309
Zdarzenia HTML .................................................................................................... 311
Zdarzenia mutacji ................................................................................................. 317
Zdarzenia wsplne dla wielu przegldarek .................................................................... 317
Obiekt EventUtil .................................................................................................... 317
Dodawanie/usuwanie procedur obsugi bdw ....................................................... 318
Formatowanie obiektu event .................................................................................. 320
Pobieranie obiektu zdarzenia ................................................................................. 324
Przykad ............................................................................................................... 325
Podsumowanie .......................................................................................................... 326

Rozdzia 10. Zaawansowane techniki DOM .......................................................................................... 329


Skrypty definiujce style ............................................................................................. 329
Metody modelu DOM przetwarzajce style .............................................................. 331
Wasne podpowiedzi ............................................................................................. 333
Sekcje rozwijalne .................................................................................................. 334
Dostp do arkuszy stylw ...................................................................................... 335
Style obliczane ..................................................................................................... 339
innerText i innerHTML ................................................................................................ 341
outerText i outerHTML ................................................................................................ 342
Zakresy ..................................................................................................................... 344
Zakresy w modelu DOM ......................................................................................... 344
Zakresy w Internet Explorerze ................................................................................ 355
Czy zakresy s praktyczne? ................................................................................... 359
Podsumowanie .......................................................................................................... 360

JavaScript. Zaawansowane programowanie


Rozdzia 11. Formularze i integralno danych .................................................................................... 361
Podstawowe informacje na temat formularzy ................................................................ 361
Oprogramowywanie elementu <form/> ........................................................................ 363
Odczytywanie odwoa do formularza ...................................................................... 363
Dostp do pl formularza ...................................................................................... 364
Wsplne cechy pl formularzy ................................................................................ 364
Ustawienie aktywnoci na pierwszym polu .............................................................. 365
Zatwierdzanie formularzy ....................................................................................... 366
Jednokrotne zatwierdzanie formularza .................................................................... 368
Resetowanie formularzy ........................................................................................ 368
Pola tekstowe ............................................................................................................ 369
Odczytywanie i zmiana wartoci pola tekstowego ..................................................... 369
Zaznaczanie tekstu ............................................................................................... 371
Zdarzenia pl tekstowych ...................................................................................... 372
Automatyczne zaznaczanie tekstu .......................................................................... 372
Automatyczne przechodzenie do nastpnego pola ................................................... 373
Ograniczanie liczby znakw w polu wielowierszowym ................................................ 374
Umoliwianie i blokowanie wpisywania znakw w polach tekstowych ......................... 376
Liczbowe pola tekstowe reagujce na klawisze strzaek w gr i w d ...................... 382
Pola list i listy rozwijane ............................................................................................. 384
Uzyskiwanie dostpu do opcji ................................................................................ 385
Odczytywanie i zmiana wybranych opcji ................................................................... 385
Dodawanie opcji ................................................................................................... 386
Usuwanie opcji ..................................................................................................... 388
Przenoszenie opcji ................................................................................................ 388
Zmiana kolejnoci opcji ......................................................................................... 389
Tworzenie pola tekstowego z automatyczn podpowiedzi ............................................. 390
Dopasowywanie .................................................................................................... 390
Gwny mechanizm ............................................................................................... 391
Podsumowanie .......................................................................................................... 393

Rozdzia 12. Sortowanie tabel .............................................................................................................. 395


Punkt wyjcia: tablice ................................................................................................. 395
Metoda reverse() .................................................................................................. 397
Sortowanie tabeli zawierajcej jedn kolumn .............................................................. 397
Funkcja porwnania .............................................................................................. 399
Funkcja sortTable() ............................................................................................... 399
Sortowanie tabel zawierajcych wicej ni jedn kolumn .............................................. 401
Generator funkcji porwnania ................................................................................ 402
Zmodyfikowana funkcja sortTable() ......................................................................... 403
Sortowanie w porzdku malejcym ......................................................................... 404
Sortowanie danych innych typw ............................................................................ 406
Sortowanie zaawansowane .................................................................................... 410
Podsumowanie .......................................................................................................... 414

Rozdzia 13. Technika przecignij i upu ........................................................................................ 415


Systemowa technika przecignij i upu ................................................................... 415
Zdarzenia techniki przecignij i upu .................................................................. 416
Obiekt dataTransfer .............................................................................................. 422
Metoda dragDrop() ................................................................................................ 426
Zalety i wady ........................................................................................................ 428

Spis treci

Symulacja techniki przecignij i upu ...................................................................... 429


Kod ..................................................................................................................... 430
Tworzenie docelowych obiektw przecigania .......................................................... 432
Zalety i wady ........................................................................................................ 434
zDragDrop ................................................................................................................. 435
Tworzenie elementu, ktry mona przeciga .......................................................... 435
Tworzenie docelowego obiektu przecigania ............................................................ 436
Zdarzenia ............................................................................................................. 436
Przykad ............................................................................................................... 437
Podsumowanie .......................................................................................................... 439

Rozdzia 14. Obsuga bdw ................................................................................................................. 441


Znaczenie obsugi bdw ........................................................................................... 441
Bdy i wyjtki ............................................................................................................ 442
Raportowanie bdw ................................................................................................. 443
Internet Explorer (Windows) ................................................................................... 443
Internet Explorer (Mac OS) ..................................................................................... 445
Mozilla (wszystkie platformy) ................................................................................. 446
Safari (Mac OS X) ................................................................................................. 446
Opera 7 (wszystkie platformy) ................................................................................ 448
Obsuga bdw ......................................................................................................... 449
Procedura obsugi zdarzenia onerror ....................................................................... 449
Instrukcja trycatch ............................................................................................. 452
Techniki debugowania ................................................................................................ 458
Uywanie komunikatw ......................................................................................... 458
Uywanie konsoli Javy ........................................................................................... 459
Wysyanie komunikatw do konsoli JavaScriptu (tylko Opera 7+) .............................. 460
Rzucanie wasnych wyjtkw .................................................................................. 460
Narzdzie The JavaScript Verifier ............................................................................ 462
Debugery ................................................................................................................... 462
Microsoft Script Debugger ..................................................................................... 462
Venkman debuger dla Mozilli ............................................................................. 465
Podsumowanie .......................................................................................................... 474

Rozdzia 15. JavaScript i XML .............................................................................................................. 475


Obsuga XML DOM w przegldarkach ........................................................................... 475
Obsuga XML DOM w Internet Explorerze ................................................................ 475
Obsuga XML DOM w Mozilli .................................................................................. 480
Ujednolicenie implementacji .................................................................................. 485
Obsuga XPath w przegldarkach ................................................................................. 496
Wprowadzenie do XPath ........................................................................................ 496
Obsuga XPath w Internet Explorerze ...................................................................... 497
Obsuga XPath w Mozilli ........................................................................................ 498
Obsuga XSLT w przegldarkach .................................................................................. 503
Obsuga XSLT w Internet Explorerze ....................................................................... 505
Obsuga XSLT w Mozilli ......................................................................................... 509
Podsumowanie .......................................................................................................... 511

Rozdzia 16. Komunikacja midzy klientem a serwerem .................................................................... 513


Pliki cookies .............................................................................................................. 513
Skadniki plikw cookies ....................................................................................... 514
Inne ograniczenia bezpieczestwa .......................................................................... 515

10

JavaScript. Zaawansowane programowanie


Cookies w jzyku JavaScript .................................................................................. 515
Cookies na serwerze ............................................................................................. 517
Przekazywanie cookies midzy klientem a serwerem ............................................... 521
Ukryte ramki .............................................................................................................. 523
Uywanie ramek iframe ......................................................................................... 524
dania HTTP ............................................................................................................ 526
Uywanie nagwkw ............................................................................................. 528
Bliniacze implementacje obiektu XML HTTP ........................................................... 529
Wykonywanie dania GET ..................................................................................... 530
Wykonywanie dania POST ................................................................................... 531
dania LiveConnect .................................................................................................. 532
Wykonywanie dania GET ..................................................................................... 532
Wykonywanie dania POST ................................................................................... 534
Inteligentne dania HTTP .......................................................................................... 536
Metoda get() ........................................................................................................ 536
Metoda post() ...................................................................................................... 539
Zastosowania praktyczne ............................................................................................ 540
Podsumowanie .......................................................................................................... 540

Rozdzia 17. Usugi sieciowe ................................................................................................................. 543


Podstawowe informacje na temat usug sieciowych ...................................................... 543
Czym jest usuga sieciowa? ................................................................................... 543
WSDL .................................................................................................................. 544
Usugi sieciowe w Internet Explorerze .......................................................................... 547
Uywanie komponentu WebService ......................................................................... 547
Przykad uycia komponentu WebService ................................................................ 549
Usugi sieciowe w Mozilli ............................................................................................ 551
Rozszerzone uprawnienia ...................................................................................... 551
Uywanie metod SOAP .......................................................................................... 552
Uywanie obiektw proxy WSDL ............................................................................. 556
Rozwizanie dla rnych przegldarek .......................................................................... 560
Obiekt WebService ................................................................................................ 560
Usuga Temperature Service .................................................................................. 562
Uywanie obiektu TemperatureService .................................................................... 564
Podsumowanie .......................................................................................................... 565

Rozdzia 18. Praca z moduami rozszerzajcymi ............................................................................... 567


Do czego su moduy rozszerzajce? ......................................................................... 567
Popularne moduy rozszerzajce .................................................................................. 568
Typy MIME ................................................................................................................. 569
Osadzanie moduw rozszerzajcych ............................................................................ 570
Doczanie parametrw ......................................................................................... 571
Netscape 4.x ........................................................................................................ 571
Wykrywanie moduw rozszerzajcych .......................................................................... 572
Wykrywanie moduw rozszerzajcych w stylu Netscape ........................................... 572
Wykrywanie moduw rozszerzajcych ActiveX ......................................................... 577
Wykrywanie moduw rozszerzajcych w rnych przegldarkach ............................... 579
Aplety Java ................................................................................................................ 580
Osadzanie apletw ............................................................................................... 580
Odwoania do apletw w kodzie JavaScript .............................................................. 581
Tworzenie apletw ................................................................................................ 582

Spis treci

11

Komunikacja skryptu JavaScript z jzykiem Java ...................................................... 583


Komunikacja jzyka Java ze skryptem JavaScript ..................................................... 586
Filmy Flash ................................................................................................................ 589
Osadzanie filmw Flash ......................................................................................... 590
Odwoania do filmw Flash .................................................................................... 590
Komunikacja jzyka JavaScript z filmami Flash ........................................................ 591
Komunikacja Flasha z jzykiem JavaScript .............................................................. 594
Kontrolki ActiveX ........................................................................................................ 596
Podsumowanie .......................................................................................................... 599

Rozdzia 19. Zagadnienia zwizane z wdraaniem aplikacji JavaScriptu ......................................... 601


Bezpieczestwo ......................................................................................................... 601
Polityka jednakowego pochodzenia ......................................................................... 602
Zagadnienia zwizane z obiektem okna .................................................................. 603
Zagadnienia dotyczce przegldarki Mozilla ............................................................ 604
Ograniczenia zasobw ........................................................................................... 607
Zagadnienia dotyczce lokalizacji ................................................................................ 608
Sprawdzanie jzyka w kodzie JavaScript ................................................................. 608
Strategie umidzynaradawiania .............................................................................. 609
Zagadnienia dotyczce cigw znakw ................................................................... 610
Optymalizacja kodu JavaScript .................................................................................... 613
Czas pobierania .................................................................................................... 613
Czas wykonania .................................................................................................... 619
Zagadnienia dotyczce wasnoci intelektualnej ........................................................... 635
Obfuskacja ........................................................................................................... 635
Microsoft Script Encoder (wycznie Internet Explorer) .............................................. 636
Podsumowanie .......................................................................................................... 637

Rozdzia 20. Rozwj jzyka JavaScript .............................................................................................. 639


ECMAScript 4 ............................................................................................................ 639
Propozycja firmy Netscape ..................................................................................... 640
Implementacje ...................................................................................................... 646
ECMAScript dla jzyka XML ......................................................................................... 648
Podejcie ............................................................................................................. 648
Ptla for eachin ................................................................................................. 650
Nowe klasy .......................................................................................................... 650
Implementacje ...................................................................................................... 660
Podsumowanie .......................................................................................................... 660

Skorowidz .............................................................................................................................................. 661

Dziedziczenie
Prawdziwie obiektowy jzyk programowania musi obsugiwa dziedziczenie, czyli moliwo
korzystania (dziedziczenia) z metod i waciwoci jednej klasy przez inn klas. W poprzednim
rozdziale nauczye si definiowa waciwoci i metody klasy. Czasem chcemy, by dwie
rne klasy mogy korzysta z tych samych metod. Wtedy wanie przydaje si dziedziczenie.

Dziedziczenie w praktyce
Najprostszym sposobem na opisanie dziedziczenia jest posuenie si klasycznym przykadem figurami geometrycznymi. Tak naprawd istniej dwa typy figur paskich: elipsy
(ktre s okrge) i wielokty (ktre maj pewn ilo bokw). Koo to rodzaj elipsy z jednym ogniskiem; trjkty, czworokty i piciokty to rodzaje wieloktw z rn iloci
bokw. Kwadrat to rodzaj czworokta z wszystkimi bokami rwnymi. Jest to idealny przykad powizania dziedzicznego.
W przykadzie tym figura (Shape) jest klas bazow (wszystkie klasy s jej potomkami) dla klas elipsa (Ellipse) i wielokt (Polygon). Elipsa ma jedn waciwo zwan
ogniska (foci) wskazujc ilo ognisk elipsy. Koo (Circle) jest potomkiem elipsy, wic
nazywamy je podklas elipsy, a sama elipsa jest nadklas dla koa. Podobnie trjkt
(Triangle), czworokt (Rectangle) i piciokt (Pentagon) s podklasami wielokta,
a wielokt jest nadklas dla kadej z tych klas. Wreszcie kwadrat (Square) jest potomkiem czworokta.
Powizania dziedziczne najlepiej opisa przy uyciu diagramu w tym momencie pomocny okazuje si uniwersalny jzyk modelowania, czyli UML. Jednym z wielu przeznacze UML jest wizualna reprezentacja zoonych powiza midzy obiektami, takich
jak dziedziczenie. Na rysunku 4.1 wida diagram UML opisujcy zwizek klasy Shape z jej
podklasami.

130

JavaScript. Zaawansowane programowanie

Rysunek 4.1.

W UML kady prostokt reprezentuje klas opisan nazw. Linie biegnce od wierzchu trjkta, czworokta i piciokta zbiegaj si i wskazuj na figur, pokazujc, e kada z tych
klas jest potomkiem figury. Podobnie strzaka biegnca od kwadratu do czworokta symbolizuje powizanie dziedziczne pomidzy tymi klasami.
Wicej na temat UML mona przeczyta w ksice Instant UML (Wrox Press,
ISBN 1861000871).

Implementacja dziedziczenia
Aby zaimplementowa dziedziczenie w jzyku ECMAScript, zaczynamy od klasy bazowej
dla wszystkich potomkw. Kandydatami na klasy bazowe s klasy stworzone przez programist. Ze wzgldw bezpieczestwa obiekty wasne i obiekty hosta nie mog by klasami
bazowymi. Zapobiega to publicznemu udostpnieniu skompilowanego kodu poziomu przegldarki, ktry mgby potencjalnie zosta uyty w zych zamiarach.
Po wybraniu klasy bazowej mona przej do tworzenia podklas. To, czy klasa bazowa bdzie w ogle uywana, zaley wycznie od nas. Czasami pojawia si potrzeba stworzenia
klasy bazowej, ktra nie ma by wykorzystywana bezporednio. Zamiast tego udostpnia
ona jedynie wsplne podklasom cechy funkcjonalne. W takich okolicznociach klas bazow
uwaa si za abstrakcyjn.

Rozdzia 4.

Dziedziczenie

131

ECMAScript nie pozwala na dosowne definiowanie klas abstrakcyjnych, tak jak


niektre inne jzyki, ale czasami tworzone s klasy bazowe, ktre nie s przeznaczone
do uytku. Zwykle jedynie w dokumentacji opisane s jako abstrakcyjne.
Stworzone podklasy dziedzicz wszystkie waciwoci i metody nadklasy, w tym implementacje konstruktora i metod. Pamitaj, e wszystkie waciwoci i metody s publiczne, a zatem
podklasy mog si do nich odwoywa bezporednio. Podklasy mog dodawa nowe waciwoci i metody niewystpujce w nadklasach lub zastpowa waciwoci i metody nadklasy wasnymi implementacjami.

Sposoby dziedziczenia
Jak zwykle w jzyku ECMAScript mona implementowa dziedziczenie na kilka sposobw. Wynika to z faktu, e dziedziczenie w JavaScripcie nie jest jawne, tylko emulowane.
Oznacza to, e interpreter nie obsuguje wszystkich szczegw zwizanych z dziedziczeniem. Zadaniem dla programisty jest obsuga dziedziczenia w sposb najbardziej adekwatny do okolicznoci.

Maskowanie obiektw
O maskowaniu obiektw nie mylano jeszcze, kiedy opracowywano pierwsz wersj ECMAScriptu. Koncepcja ta ewoluowaa, w miar jak programici coraz lepiej rozumieli, jak
tak naprawd dziaaj funkcje i, w szczeglnoci, jak posugiwa si sowem this w kontekcie funkcji.
Rozumowanie jest nastpujce: konstruktor przypisuje wszystkie waciwoci i metody (przy
deklarowaniu klas wzorcem konstruktora) sowem this. Poniewa konstruktor to po prostu
funkcja, mona uczyni konstruktor klasy ClassA metod klasy ClassB i j wywoa. ClassB
zostanie wwczas wyposaona we wszystkie waciwoci i metody zdefiniowane w konstruktorze klasy ClassA. Na przykad, klasy ClassA i ClassB mona zdefiniowa nastpujco:
function ClassA(sColor) {
this.sColor = sColor;
this.sayColor = function () {
alert(this.sColor);
};
}
function ClassB(sColor) {
}

Jak zapewne pamitasz, sowo kluczowe this wskazuje na bieco tworzony w konstruktorze obiekt. Jednak w metodzie this wskazuje obiekt, do ktrego metoda naley. Zgodnie z
omawian teori stworzenie klasy ClassA jako normalnej funkcji, a nie jako konstruktora,
tworzy pewien rodzaj dziedziczenia. Mona to zrobi w konstruktorze klasy ClassB tak:
function ClassB(sColor) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
}

132

JavaScript. Zaawansowane programowanie


W kodzie tym metoda newMethod jest przypisywana do ClassA (pamitaj, e nazwa funkcji
jest tylko wskanikiem na ni). Nastpnie metoda ta jest wywoywana poprzez przekazanie
argumentu sColor z konstruktora klasy ClassB. Ostatni wiersz kodu usuwa referencj do klasy
ClassA, aby nie mona jej byo pniej wywoa.
Wszystkie nowe waciwoci i metody musz by dodane po wierszu, ktry usuwa now metod. W innym przypadku naraamy si na ryzyko nadpisania nowych waciwoci i metod
tymi pochodzcymi z nadklasy:
function ClassB(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.sName = sName;
this.sayName = function () {
alert(this.sName);
};
}

Aby dowie, e to dziaa, moemy uruchomi nastpujcy przykad:


var oObjA = new ClassA("czerwony");
var oObjB = new ClassB("niebieski", "Mikoaj");
oObjA.sayColor();
oObjB.sayColor();
oObjB.sayName();

Co ciekawe, maskowanie obiektw pozwala na stosowanie dziedziczenia wielokrotnego,


co oznacza, e klasa moe by potomkiem kilku nadklas. Dziedziczenie wielokrotne jest
reprezentowane w UML tak, jak wida na rysunku 4.2.
Rysunek 4.2.

Jeeli na przykad istniej dwie klasy ClassX i ClassY, a chcemy, by klasa ClassZ bya potomkiem obu tych klas, to moemy napisa:
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;

Rozdzia 4.

Dziedziczenie

133

this.newMethod();
delete this.newMethod;

Minusem jest to, e jeli klasy ClassX i ClassY maj waciwoci lub metody o tej samej nazwie, to ClassY ma pierwszestwo, poniewa dziedziczenie cech po niej nastpuje pniej.
Poza tym drobnym problemem dziedziczenie wielokrotne poprzez maskowanie obiektw
jest proste.
Poniewa te metoda dziedziczenia zrodzia si w praniu, trzecia edycja ECMAScriptu
wprowadza dwie nowe metody obiektu Function: call() i apply().

Metoda call()
Metoda call() jest najbardziej podobna do klasycznej metody maskowania obiektw. Jej
pierwszy argument to obiekt, ktry ma wskazywa this. Wszystkie pozostae argumenty s
przekazywane bezporednio do samej funkcji. Na przykad:
function sayColor(sPrefix, sSuffix) {
alert(sPrefix + this.sColor + sSuffix);
};
var oObj = new Object();
oObj.sColor = "czerwony";
// wywietla "Kolorem jest czerwony. Naprawd adny kolor. "
sayColor.call(oObj, "Kolorem jest ", ". Naprawd adny kolor. ");

W tym przykadzie funkcja sayColor() zostaa zdefiniowana poza obiektem i wskazuje na sowo this, mimo e nie zostaa zwizana z adnym obiektem. Obiektowi oObj nadano waciwo
sColor o wartoci "czerwony". W wywoaniu call() pierwszym argumentem jest oObj, co
wskazuje, e sowo this w obrbie sayColor() powinno wskazywa warto oObj. Drugi
i trzeci argument to cigi znakowe. Odpowiadaj one argumentom sPrefix i sSuffix funkcji
sayColor(), w efekcie wywietlony zostaje tekst "Kolorem jest czerwony. Naprawd adny
kolor. ".
Aby wykorzysta to w schemacie dziedziczenia poprzez maskowanie obiektw, wystarczy
zastpi trzy wiersze, ktre przypisuj, wywouj i usuwaj now metod:
function ClassB(sColor, sName) {
// this.newMethod = ClassA;
// this.newMethod(sColor);
// delete this.newMethod;
ClassA.call(this, sColor);
this.sName = sName;
this.sayName = function () {
alert(this.sName);
};
}

W tym przypadku chcemy, by sowo kluczowe this w ClassA odpowiadao nowo utworzonemu obiektowi ClassB, przesyamy je wic jako pierwszy argument. Drugi argument to
sColor, tylko jeden dla kadej z klas.

134

JavaScript. Zaawansowane programowanie

Metoda apply()
Metoda apply() pobiera dwa argumenty: obiekt, ktry ma wskazywa this i tablic argumentw do przesania do funkcji. Na przykad:
function sayColor(sPrefix, sSuffix) {
alert(sPrefix + this.sColor + sSuffix);
};
var oObj = new Object();
oObj.sColor = "czerwony";
// wywietla "Kolorem jest czerwony. Naprawd adny kolor. "
sayColor.apply(oObj, new Array("Kolorem jest ",". Naprawd adny kolor. "));

Przykad jest taki sam jak poprzednio, ale tym razem wywoywana jest metoda apply(). W wywoaniu pierwszym argumentem pozostaje oObj, ktry dalej wskazuje, e sowo this w funkcji
sayColor() ma mie przypisan warto oObj. Drugi argument to tablica skadajca si z dwch
cigw, ktre odpowiadaj argumentom sPrefix i sSuffix funkcji sayColor(). Efektem jest
ponownie wywietlenie tekstu "Kolorem jest czerwony. Naprawd adny kolor. ".
T metod rwnie mona uy w miejsce trzech wierszy przypisujcych, wywoujcych
i usuwajcych now metod:
function ClassB(sColor, sName) {
// this.newMethod = ClassA;
// this.newMethod(sColor);
// delete this.newMethod;
ClassA.apply(this, new Array(sColor));

this.sName = sName;
this.sayName = function () {
alert(this.sName);
};

Ponownie przesyamy this jako pierwszy argument. Drugi argument to tablica z tylko jedn
wartoci sColor. Zamiast tego, moemy jako drugi argument metody apply() przesa
cay obiekt arguments klasy ClassB:
function ClassB(sColor, sName) {
// this.newMethod = ClassA;
// this.newMethod(sColor);
// delete this.newMethod;
ClassA.apply(this, arguments);

this.sName = sName;
this.sayName = function () {
alert(this.sName);
};

Oczywicie, przesyanie obiektu reprezentujcego argumenty dziaa tylko wwczas, kiedy


kolejno argumentw w konstruktorze nadklasy jest dokadnie taka sama jak kolejno argumentw w podklasie. Jeeli tak nie jest, trzeba stworzy odrbn tablic, aby umieci
w niej argumenty w dobrej kolejnoci. Mona te posuy si wwczas metod call().

Rozdzia 4.

Dziedziczenie

135

Wizanie acuchowe prototypw


Form dziedziczenia, jaka w zamyle miaa by uywana w jzyku ECMAScript, byo wizanie acuchowe prototypw. W poprzednim rozdziale przedstawiem wzorzec prototypu
sucy do definiowania klas. Wizanie acuchowe prototypw jest rozszerzeniem tego
wzorca o ciekawy przepis na realizacj dziedziczenia.
W poprzednim rozdziale dowiedziae si, e obiekt prototype jest szablonem, na ktrym
opiera si obiekt w chwili tworzenia egzemplarza. Przypomnijmy w skrcie: wszelkie waciwoci i metody obiektu prototype bd przesyane do wszystkich egzemplarzy tej klasy.
Wizanie acuchowe prototypw wykorzystuje t moliwo, by urzeczywistni dziedziczenie.
Gdyby klasy z poprzedniego przykadu zdefiniowa na nowo, posugujc si wzorcem
prototypu, wygldayby nastpujco:
function ClassA() {
}
ClassA.prototype.sColor = "czerwony";
ClassA.prototype.sayColor = function () {
alert(this.sColor);
};
function ClassB() {
}
ClassB.prototype = new ClassA();

Caa magia wizania acuchowego prototypw ujawnia si w wyrnionym, powyszym


wierszu. Sprawiamy tu, e waciwo prototype klasy ClassB staje si egzemplarzem klasy
ClassA. Ma to sens, poniewa zaley nam na wszystkich waciwociach i metodach ClassB,
ale nie chcemy przypisywa kadej z osobna do waciwoci prototype klasy ClassB. Czy
istnieje lepszy sposb ni przeksztacenie prototype w egzemplarz klasy ClassA?
Jak wida, w wywoaniu konstruktora ClassA nie przesano adnego parametru. Jest to
norma w przypadku wizania acuchowego prototypw. Musimy wic zadba o to, by
konstruktor dziaa poprawnie bez adnych argumentw.

Podobnie jak przy maskowaniu, wszelkie nowe waciwoci i metody podklasy musz by
definiowane po przypisaniu waciwoci property, poniewa wszystkie metody przypisane
wczeniej zostan usunite. Dlaczego? Jako e waciwo property jest w caoci zastpowana nowym obiektem, pierwotny obiekt, do ktrego dodawalimy metody, jest niszczony. Tak wic kod dodajcy waciwo sName i metod sayName() do klasy ClassB powinien wyglda tak:
function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.sName = "";
ClassB.prototype.sayName = function () {
alert(this.sName);
};

136

JavaScript. Zaawansowane programowanie


Kod ten mona przetestowa, uruchamiajc nastpujcy przykad:
var oObjA = new ClassA();
var oObjB = new ClassB();
oObjA.sColor = "czerwony";
oObjB.sColor = "niebieski";
oObjB.sName = "Mikoaj";
oObjA.sayColor();
oObjB.sayColor();
oObjB.sayName();

Dodatkowo przy wizaniu acuchowym prototypw operator instanceof dziaa w do unikalny sposb. Dla wszystkich egzemplarzy ClassB operator instanceof zwraca true zarwno
dla ClassA, jak i dla ClassB. Na przykad:
var oObjB = new ClassB();
alert(oObjB instanceof ClassA);
alert(oObjB instanceof ClassB);

// wywietla "true"
// wywietla "true"

W wiecie lunej kontroli typw, jaka obowizuje w jzyku ECMAScript, jest to niezwykle
przydatne narzdzie, ktre nie jest dostpne, gdy posugujemy si maskowaniem obiektw.
Minusem wizania acuchowego prototypw jest brak obsugi dziedziczenia wielokrotnego. Jak zapewne pamitasz, wizanie acuchowe polega na nadpisaniu waciwoci prototype klasy innym typem obiektu.

Metoda hybrydowa
Dziedziczenie poprzez maskowanie obiektw posuguje si przy definiowaniu klas wzorcem
konstruktora, nie korzystajc w ogle z prototypw. Gwny problem polega tu na tym, e
musimy uy wzorca konstruktora, ktry (o czym przekonae si w poprzednim rozdziale)
nie jest optymalny. Jeeli z kolei zastosujemy wizanie acuchowe prototypw, tracimy
moliwo posugiwania si konstruktorami z argumentami. Jak radz sobie z tym programici? Odpowied jest prosta: stosuj obydwie metody.
W poprzednim rozdziale dowiedziae si, e najlepszy sposb na tworzenie klas polega na
stosowaniu wzorca konstruktora do definiowania waciwoci i wzorca prototypu do definiowania metod. To samo dotyczy dziedziczenia uywamy maskowania do dziedziczenia
waciwoci od konstruktora i wizania acuchowego prototypw, by dziedziczy metody
po obiekcie prototype. Spjrzmy na poprzedni przykad napisany od nowa przy uyciu obydwu metod dziedziczenia:
function ClassA(sColor) {
this.sColor = sColor;
}
ClassA.prototype.sayColor = function() {
alert(this.sColor);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.sName = sName;

Rozdzia 4.

Dziedziczenie

137

}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
alert(this.sName);
};

W przykadzie tym dziedziczenie nastpuje w dwch wyrnionych wierszach. Najpierw


w konstruktorze klasy ClassB uywane jest maskowanie obiektw, aby odziedziczy waciwo sColor po klasie ClassA. W drugim wyrnionym wierszu zastosowane zostao wizanie
acuchowe prototypw, by odziedziczy metody klasy ClassA. Poniewa metoda hybrydowa korzysta z wizania acuchowego prototypw, operator instanceof wci bdzie
dziaa poprawnie.
Kod ten testuje nastpujcy przykad:
var oObjA = new ClassA("czerwony");
var oObjB = new ClassB("niebieski", "Mikoaj");
oObjA.sayColor();
// wywietla "czerwony"
oObjB.sayColor();
// wywietla "niebieski"
oObjB.sayName();
// wywietla "Mikoaj"

Bardziej praktyczny przykad


Tworzc prawdziwe aplikacje lub witryny internetowe, raczej nie bdziemy tworzy klas
o nazwach w rodzaju ClassA i ClassB. Bardziej prawdopodobne, e bdziemy tworzy klasy
reprezentujce konkretne rzeczy, np. figury geometryczne. Jeeli przypomnisz sobie przykad
z figurami z pocztku tego rozdziau, uwiadomisz sobie, e klasy reprezentujce wielokt
(Polygon), trjkt (Triangle) i czworokt (Rectangle) tworz ciekawy zbir danych do analizy.

Tworzenie klasy bazowej


Zastanwmy si najpierw nad klas Polygon reprezentujc wielokt. Jakie waciwoci i metody bd w niej konieczne? Po pierwsze, wana jest informacja o liczbie bokw, z jakich
skada si wielokt, naleaoby wic wprowadzi waciwo iSides, ktra bdzie liczb
cakowit. Co jeszcze moe by potrzebne wieloktowi? Moemy chcie wyliczy pole wielokta, dodajmy wic metod getArea(), ktra bdzie je oblicza. Na rysunku 4.3 wida reprezentacj UML tej klasy:
Rysunek 4.3.

W UML waciwoci reprezentowane s nazw waciwoci i typem, ktre pojawiaj si


w polu tu pod nazw klasy. Metody znajduj si pod waciwociami w tym przypadku
widoczna jest nazwa waciwoci i typ wartoci, jak zwraca.

138

JavaScript. Zaawansowane programowanie


W jzyku ECMAScript klas t mona zapisa nastpujco:
function Polygon(iSides) {
this.iSides = iSides;
}
Polygon.prototype.getArea = function () {
return 0;
};

Zauwa, e klasa Polygon sama w sobie nie jest na tyle konkretna, by mona jej byo uywa. Metoda getArea() zwraca 0, poniewa peni jedynie rol miejsca na metody podklas,
ktre j zastpi.

Tworzenie podklas
Zastanwmy si teraz nad klas Triangle reprezentujc trjkt. Trjkt ma trzy boki, wic
klasa ta musi zastpi waciwo iSides klasy Polygon i ustali jej warto na 3. Metoda
getArea() rwnie musi by zastpiona, by skorzysta ze wzoru na pole trjkta, ktrym
jest 1/2podstawawysoko. Skd jednak metoda wemie wartoci podstawy i wysokoci?
Poniewa musz zosta wprowadzone konkretne ich wartoci, konieczne jest stworzenie
waciwoci iBase (podstawa) i iHeight (wysoko). Reprezentacja UML-u trjkta widoczna
jest na rysunku 4.4.
Rysunek 4.4.

Diagram ten ukazuje jedynie nowe waciwoci i zastpowane przez klas Triangle metody.
Gdyby klasa Triangle nie definiowaa wasnej wersji getArea(), metoda ta nie zostaaby
wymieniona na diagramie. Byaby traktowana jako odziedziczona po klasie Polygon. Nieco
lepiej wyjania to kompletny diagram UML reprezentujcy powizania midzy klasami
Polygon i Triangle (rysunek 4.5).
Rysunek 4.5.

Rozdzia 4.

Dziedziczenie

139

W diagramach UML nigdy nie powtarza si metod odziedziczonych, chyba e zostay zastpione (lub przeadowane, co akurat w jzyku ECMAScript nie jest moliwe).
Kod klasy Triangle wyglda nastpujco:
function Triangle(iBase, iHeight) {
Polygon.call(this, 3);
this.iBase = iBase;
this.iHeight = iHeight;
}
Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function () {
return 0.5 * this.iBase * this.iHeight;
};

Zwrmy uwag, e konstruktor klasy Triangle przyjmuje dwa argumenty, iBase i iHeight,
mimo e konstruktor klasy Polygon przyjmuje tylko jeden argument iSides. Wynika to z faktu,
e z gry wiadomo ile bokw ma trjkt i nie chcemy, aby programista mg to zmienia.
Wic kiedy uywamy maskowania obiektw liczba 3 jest przesyana do konstruktora Polygon
jako liczba bokw dla tego obiektu. Nastpnie wartoci iBase i iHeight s przypisywane do
odpowiednich waciwoci.
Po zastosowaniu wizania acuchowego prototypw do dziedziczenia metod klasa Triangle
zastpuje metod getArea() wasn, by udostpni wzr na pole trjkta.
Ostatnia klasa to Rectangle, reprezentujca czworokt, ktra rwnie jest potomkiem klasy
Polygon. Czworokty maj cztery boki, a ich pole oblicza si, mnoc dugo przez szeroko, ktre s dwoma waciwociami, jakie musi wprowadzi klasa Rectangle. Na diagramie
UML klasa ta pojawia si obok klasy Triangle, poniewa dla obu tych klas nadklas jest
Polygon (patrz: rysunek 4.6).
Rysunek 4.6.

Kod ECMAScript klasy Rectangle wyglda nastpujco:


function Rectangle(iLength, iWidth) {
Polygon.call(this, 4);
this.iLength = iLength;

140

JavaScript. Zaawansowane programowanie


this.iWidth = iWidth;
}
Rectangle.prototype = new Polygon();
Rectangle.prototype.getArea = function () {
return this.iLength * this.iWidth;
};

Zwr uwag, e konstruktor klasy Rectangle rwnie nie przyjmuje iSides jako argumentu i ponownie warto staa (4) zostaje przesana wprost do konstruktora klasy Polygon.
Rwnie na podobiestwo Triangle, klasa Rectangle wprowadza dwie nowe waciwoci
jako argumenty dla konstruktora i zastpuje metod getArea() wasn wersj.

Testowanie kodu
Stworzony dla tego przykadu kod klas mona przetestowa, uruchamiajc nastpujcy
przykad:
var oTriangle = new Triangle(12, 4);
var oRectangle = new Rectangle(22, 10);
alert(oTriangle.iSides);
alert(oTriangle.getArea());

// wywietla "3"
// wywietla "24"

alert(oRectangle.iSides);
alert(oRectangle.getArea());

// wywietla "4"
// wywietla "220"

Kod ten tworzy trjkt o podstawie 12 i wysokoci 4 oraz prostokt o dugoci 22 i szerokoci 10. Nastpnie wywietlane s liczby bokw i pola dla kadej figury, aby dowie, e
waciwo iSides zostaa poprawnie ustawiona i e metoda getArea() zwraca stosowne
wartoci. Pole trjkta powinno wynosi 24, a pole prostokta 220.

Co z dynamicznymi prototypami?
W poprzednim przykadzie zastosowano wzorzec hybrydowy konstruktor-prototyp do definiowania obiektw, aby ukaza dziedziczenie, ale czy bdzie to dziaa rwnie z dynamicznymi prototypami? Ot nie.
Dziedziczenie nie dziaa z dynamicznymi prototypami z uwagi na unikatow natur obiektu
prototype. Spjrzmy na nastpujcy kod (ktry jest nieprawidowy, ale mimo to warto go prze-

studiowa):
function Polygon(iSides) {
this.iSides = iSides;
if (typeof Polygon._initialized == "undefined") {
Polygon.prototype.getArea = function() {
return 0;
};

Rozdzia 4.

Dziedziczenie

141

Polygon._initialized = true;
}
}
function Triangle(iBase, iHeight) {
Polygon.call(this, 3);
this.iBase = iBase;
this.iHeight = iHeight;
if (typeof Triangle._initialized == "undefined") {
Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function() {
return 0.5 * this.iBase * this.iHeight;
};
Triangle._initialized = true;
}
}

W powyszym kodzie widzimy klasy Polygon i Triangle zdefiniowane przy uyciu dynamicznych prototypw. Bd tkwi w wyrnionym wierszu, w ktrym tworzony jest Triangle.
prototype. Z logicznego punktu widzenia miejsce tworzenia prototypu jest dobre, ale funkcjonalnie kod nie bdzie dziaa. Dokadnie chodzi o to, e w chwili wykonywania tego
kodu, obiekt ten bdzie ju stworzony i zwizany z oryginalnym obiektem prototype. Mimo e zmiany w obiekcie prototypu zostan uwzgldnione prawidowo dziki mechanizmowi bardzo pnego wizania, zastpienie obiektu prototype nie bdzie miao wpywu
na ten obiekt. Zmiany zostan uwzgldnione tylko w tworzonych pniej egzemplarzach
obiektu, a pierwszy egzemplarz pozostanie niepoprawny.
Aby prawidowo korzysta z dynamicznych prototypw i dziedziczenia, konieczne jest
przypisanie nowego obiektu prototype poza obszarem konstruktora:
function Triangle(iBase, iHeight) {
Polygon.call(this, 3);
this.iBase = iBase;
this.iHeight = iHeight;
if (typeof Triangle._initialized == "undefined") {
Triangle.prototype.getArea = function () {
return 0.5 * this.iBase * this.iHeight;
};
Triangle._initialized = true;
}
}
Triangle.prototype = new Polygon();

Kod ten dziaa, poniewa obiekt prototype zostaje przypisany, zanim powstan jakiekolwiek egzemplarze obiektw. Niestety oznacza to, e kod nie bdzie w peni zhermetyzowany w konstruktorze, a w kocu wanie to jest gwnym celem metody dynamicznych prototypw.

142

JavaScript. Zaawansowane programowanie

Alternatywne wzorce dziedziczenia


Z uwagi na ograniczenia moliwoci realizacji dziedziczenia w jzyku ECMAScript (chociaby wynikajce z braku zakresu prywatnego i braku atwego dostpu do metod nadklasy),
programici z caego wiata stale prbuj eksperymentowa z kodem, szukajc wasnych
sposobw na implementacj dziedziczenia. W tym punkcie przyjrzymy si kilku alternatywom dla standardowych wzorcw dziedziczenia w jzyku ECMAScript.

zInherit
Wizanie acuchowe prototypw w istocie kopiuje wszystkie metody z obiektu do obiektu
reprezentujcego prototyp klasy (prototype). A moe istnieje inny sposb osignicia tego
efektu? Ot istnieje. Za pomoc biblioteki zInherit (dostpnej pod adresem http://www.
nczonline.net/downloads) moliwa jest realizacja dziedziczenia metod bez korzystania z wizania acuchowego prototypw. Ta niewielka biblioteka obsuguje wszystkie wspczesne
przegldarki (Mozilla, IE, Opera, Safari) oraz niektre starsze (Netscape 4.x, IE/Mac).
Aby mc korzysta z biblioteki zInherit, trzeba doczy plik zinherit.js
znacznikiem <script/>. Doczanie zewntrznych plikw JavaScriptu zostao
omwione szczegowo w rozdziale 5., JavaScript w przegldarce.
Biblioteka zInherit dodaje do klasy Object dwie metody: inheritFrom() i instanceOf().
Metoda inheritFrom() zajmuje si prac fizyczn, kopiujc metody z danej klasy. Oto wiersz
kodu, ktry realizuje dziedziczenie metod klasy ClassA przez klas ClassB, uywajc wizania acuchowego prototypw:
ClassB.prototype = new ClassA();

Wiersz ten mona zastpi teraz nastpujcym:


ClassB.prototype.inheritFrom(ClassA);

Metoda inheritFrom() przyjmuje jeden argument, bdcy nazw klasy, z ktrej maj by
skopiowane metody. Zauwamy, e w odrnieniu od wizania acuchowego prototypw
ten wzorzec nie tworzy nawet nowego egzemplarza klasy, z ktrej dziedziczy, sprawiajc
e proces jest bezpieczniejszy, a programista nie musi przejmowa si argumentami dla konstruktora.
Wywoanie metody inheritFrom() musi nastpowa dokadnie tam, gdzie normalnie
nastpuje przypisanie prototypu, aby dziedziczenie mogo dziaa poprawnie.

Metoda instanceOf() zastpuje operator instanceof. Poniewa wzorzec ten nie korzysta w ogle
z wizania acuchowego prototypw, poniszy wiersz kodu nie bdzie dziaa:
ClassB instanceof ClassA

Rekompensuje to metoda instanceOf(), wsppracujc z inheritFrom() i ledzc wszystkie


nadklasy:
ClassB.instanceOf(ClassA);

Rozdzia 4.

Dziedziczenie

143

Wielokty kontratakuj
Cay przykad z wieloktami mona przepisa, korzystajc z biblioteki zInherit, zastpujc
w nim tylko dwa wiersze (wyrnione):
function Polygon(iSides) {
this.iSides = iSides;
}
Polygon.prototype.getArea = function () {
return 0;
};
function Triangle(iBase, iHeight) {
Polygon.call(this, 3);
this.iBase = iBase;
this.iHeight = iHeight;
}
Triangle.prototype.inheritFrom(Polygon);
Triangle.prototype.getArea = function () {
return 0.5 * this.iBase * this.iHeight;
};
function Rectangle(iLength, iWidth) {
Polygon.call(this, 4);
this.iLength = iLength;
this.iWidth = iWidth;
}
Rectangle.prototype.inheritFrom(Polygon);
Rectangle.prototype.getArea = function () {
return this.iLength * this.iWidth;
};

Aby przetestowa ten kod, moemy posuy si tym samym przykadem co wczeniej, dodajc kilka dodatkowych wierszy testujcych metod instanceOf():
var oTriangle = new Triangle(12, 4);
var oRectangle = new Rectangle(22, 10);
alert(oTriangle.iSides);
alert(oTriangle.getArea());
alert(oRectangle.iSides);
alert(oRectangle.getArea());
alert(oTriangle.instanceOf(Triangle));
alert(oTriangle.instanceOf(Polygon));
alert(oRectangle.instanceOf(Rectangle));
alert(oRectangle.instanceOf(Polygon));

// wywietla "true"
// wywietla "true"
// wywietla "true"
// wywietla "true"

Ostatnie cztery wiersze testuj metod instanceOf() i w kadym przypadku powinny


zwrci true.

144

JavaScript. Zaawansowane programowanie

Obsuga metody prototypw dynamicznych


Jak ju wspomniano, wizania acuchowego prototypw nie da si zastosowa z zachowaniem ducha metody prototypw dynamicznych, ktry sprowadza si do utrzymaniu caego
kodu klasy w obrbie konstruktora. Biblioteka zInherit poprawia ten problem, umoliwiajc
wywoywanie metody inheritFrom() z wntrza konstruktora.
Spjrzmy na uyty wczeniej przykad klas wieloktw zapisanych metod prototypw dynamicznych, tym razem uzupeniony o moliwoci biblioteki zInherit:
function Polygon(iSides) {
this.iSides = iSides;
if (typeof Polygon._initialized == "undefined") {
Polygon.prototype.getArea = function() {
return 0;
};
Polygon._initialized = true;
}
}
function Triangle(iBase, iHeight) {
Polygon.call(this, 3);
this.iBase = iBase;
this.iHeight = iHeight;
if (typeof Triangle._initialized == "undefined") {
Triangle.prototype.inheritFrom(Polygon);
Triangle.prototype.getArea = function() {
return 0.5 * this.iBase * this.iHeight;
};
Triangle._initialized = true;
}
}
function Rectangle(iLength, iWidth) {
Polygon.call(this, 4);
this.iLength = iLength;
this.iWidth = iWidth;
if (typeof Rectangle._initialized == "undefined") {
Rectangle.prototype.inheritFrom(Polygon);
Rectangle.prototype.getArea = function () {
return this.iLength * this.iWidth;
};
Rectangle._initialized = true;
}
}

Rozdzia 4.

Dziedziczenie

145

Dwa wyrnione wiersze w powyszym kodzie implementuj dziedziczenie klasy Polygon


dla dwch potomkw klas Triangle i Rectangle. Kod dziaa, poniewa tym razem
obiekt prototype nie zosta nadpisany, co wynika z zastosowania metody inheritFrom().
Dodano do niego tylko metody. Tym sposobem moliwe jest ominicie ogranicze wizania acuchowego prototypw i zaimplementowanie prototypw dynamiczne zgodnie z duchem tego wzorca.

Obsuga wielokrotnego dziedziczenia


Jedn z najbardziej przydatnych moliwoci biblioteki zInherit jest obsuga dziedziczenia
wielokrotnego, ktre nie jest dostpne przy stosowaniu wizania acuchowego prototypw.
Ponownie kluczowym czynnikiem, ktry to umoliwia, jest to, e inheritFrom() nie zastpuje obiektu prototype.
Aby dziedziczy metody i waciwoci, metoda inheritFrom() musi zosta uyta w powizaniu z maskowaniem obiektw. Wemy nastpujcy przykad:
function ClassX() {
this.sMessageX = "To jest komunikat X.";
if (typeof ClassX._initialized == "undefined") {
ClassX.prototype.sayMessageX = function() {
alert(this.sMessageX);
};

ClassX._initialized = true;

function ClassY() {
this.sMessageY = "To jest komunikat Y.";
if (typeof ClassY._initialized == "undefined") {
ClassY.prototype.sayMessageY = function () {
alert(this.sMessageY);
};

ClassY._initialized = true;

ClassX i ClassY to mae klasy z jedn waciwoci i jedn metod. Powiedzmy, e stworzylimy klas ClassZ, ktra ma by potomkiem obu tych klas. Klas t mona zdefiniowa
nastpujco:
function ClassZ() {
ClassX.apply(this);
ClassY.apply(this);
this.sMessageZ = "To jest komunikat Z.";
if (typeof ClassZ._initialized == "undefined") {

146

JavaScript. Zaawansowane programowanie


ClassZ.prototype.inheritFrom(ClassX);
ClassZ.prototype.inheritFrom(ClassY);
ClassZ.prototype.sayMessageZ = function () {
alert(this.sMessageZ);
};
ClassZ._initialized = true;
}
}

Zwrmy uwag, e pierwsze dwa wyrnione wiersze dziedzicz waciwoci (metod


apply()), a dwa kolejne wyrnione wiersze dziedzicz metody (metod inheritFrom()).
Jak ju wspomniano, wana jest kolejno, w jakiej nastpuje dziedziczenie i generalnie lepiej
dziedziczy metody w tej samej kolejnoci co waciwoci (co oznacza, e jeeli waciwoci
s dziedziczone przez klas ClassX, a potem przez ClassY, to metody powinny by dziedziczone przez klasy w tej samej kolejnoci).
Nastpujcy kod testuje dziaanie przykadu z dziedziczeniem wielokrotnym:
var oObjZ = new ClassZ();
oObjZ.sayMessageX();
// wywietla "To jest komunikat X."
oObjZ.sayMessageY();
// wywietla "To jest komunikat Y."
oObjZ.sayMessageZ();
// wywietla "To jest komunikat Z."

Powyszy kod wywouje trzy metody:


1. Metoda sayMessageX(), odziedziczona po klasie ClassX, odwouje si
do waciwoci sMessageX, take odziedziczonej po klasie ClassX.
2. Metoda sayMessageY(), odziedziczona po klasie ClassY, odwouje si
do waciwoci sMessageY, take odziedziczonej po klasie ClassY.
3. Metoda sayMessageZ(), zdefiniowana w klasie ClassX, odwouje si do waciwoci
sMessageZ, take zdefiniowanej w klasie ClassZ.

Te trzy metody powinny wywietli odpowiednie komunikaty pobrane z odpowiednich


waciwoci, dowodzc, e dziedziczenie wielokrotne dziaa.

xbObject
Strona DevEdge naleca do Netscapea (http://devedge.netscape.com) zawiera wiele przydatnych informacji i narzdzi wspomagajcych pisanie skryptw dla programistw sieci
WWW. Jedno z takich narzdzi to xbObject (mona je pobra pod adresem http://archive.
bclary.com/xbProjects-docs/xbObject/), napisane przez Boba Claryego z firmy Netscape
Communications w 2001 roku, kiedy pojawia si przegldarka Netscape 6 (Mozilla 0.6).
Narzdzie wsppracuje ze wszystkimi wersjami Mozilli, ktre pojawiy si od tamtego
czasu oraz z innymi wspczenie uywanymi przegldarkami (IE, Opera, Safari).

Rozdzia 4.

Dziedziczenie

147

Przeznaczenie
Narzdzie xbObject ma z zaoenia udostpnia lepszy model obiektowy w jzyku JavaScript, umoliwiajcy nie tylko dziedziczenie, ale rwnie przeadowywanie metod oraz
moliwo wywoywanie metod nadklasy. W tym celu xbObject wymaga przejcia przez
kilka krokw.
Na pocztek musimy zarejestrowa klas i przy okazji zdefiniowa, ktrej klasy ma by
potomkiem. Wymaga to nastpujcego wywoania:
_classes.registerClass("Nazwa_Podklasy", "Nazwa_Nadklasy");

Nazwy podklasy i nadklasy s tu przesyane jako cigi znakowe, a nie jako wskaniki do swoich
konstruktorw. Wywoanie to musi nastpowa przed konstruktorem danej podklasy.
Mona te wywoa registerClass() z jednym tylko argumentem, jeeli nowa
klasa nie jest potomkiem adnej innej klasy.
Drugi krok to wywoanie w obrbie konstruktora metody defineClass(), z przesaniem nazwy klasy oraz wskanika na co, co Clary nazywa funkcj prototypow, suc do inicjalizacji wszystkich waciwoci i metod obiektu (o tym pniej). Na przykad:
_classes.registerClass("ClassA");
function ClassA(sColor) {
_classes.defineClass("ClassA", prototypeFunction);
function prototypeFunction() {
// ...
}
}

Jak wida, funkcja prototypowa (nazwana tu prototypeFunction()) pojawia si w treci


konstruktora. Jej gwnym celem jest przypisanie wszystkich metod do klasy w stosownym
czasie (w tym sensie dziaa jak dynamiczne prototypy).
Kolejny krok (jak dotd trzeci) to wywoanie metody init() dla klasy. Metoda ta jest odpowiedzialna za ustawienie wszystkich waciwoci dla klasy i musi przyjmowa takie same argumenty jak sam konstruktor. Zgodnie z konwencj metoda init() jest wywoywana
zawsze po wywoaniu metody defineClass(). Na przykad:
_classes.registerClass("ClassA");
function ClassA(sColor) {
_classes.defineClass("ClassA", prototypeFunction);
this.init(sColor);
function prototypeFunction() {
ClassA.prototype.init = function (sColor) {
this.parentMethod("init");
this.sColor = sColor;

148

JavaScript. Zaawansowane programowanie

};

Widzimy tu metod parentMethod() wywoywan w metodzie init(). W ten wanie sposb xbObject umoliwia klasom wywoywanie metod nadklasy. Metoda parentMethod()
przyjmuje dowoln ilo argumentw, ale pierwszy argument jest zawsze nazw metody
klasy nadrzdnej, ktra ma by wywoana (argument ten musi by cigiem, a nie wskanikiem funkcji). Wszystkie nastpne argumenty zostan przesane do metody nadklasy.
W tym przypadku najpierw wywoywana jest metoda init() nadklasy, co jest wymagane dla
dziaania xbObject. Mimo e klasa ClassA nie rejestrowaa adnej nadklasy, xbObject tworzy
domyln nadklas dla wszystkich klas i stamtd wanie pochodzi metoda init() z nadklasy.
Czwarty i ostatni krok polega na dodaniu metod innej klasy w obrbie funkcji prototypowej:
classes.registerClass("ClassA");
function ClassA(sColor) {
_classes.defineClass("ClassA", prototypeFunction);
this.init(sColor);
function prototypeFunction() {
ClassA.prototype.init = function (sColor) {
this.parentMethod("init");
this.sColor = sColor;
};
ClassA.prototype.sayColor = function () {
alert(this.sColor);
};
}

Teraz moemy w normalny sposb stworzy egzemplarz klasy ClassA:


var oObjA = new ClassA("czerwony");
oObjA.sayColor();
// wywietla "czerwony"

Wielokty ostateczna rozgrywka


W tym momencie pewnie zastanawiasz si, czy bdziesz mia okazj ujrze przykad z
wieloktami przerobiony za pomoc xbObject. Jak najbardziej!
Na pocztku poprawiamy klas Polygon, co jest bardzo proste:
_classes.registerClass("Polygon");
function Polygon(iSides) {
_classes.defineClass("Polygon", prototypeFunction);

Rozdzia 4.

Dziedziczenie

149

this.init(iSides);
function prototypeFunction() {
Polygon.prototype.init = function(iSides) {
this.parentMethod("init");
this.iSides = iSides;
};
Polygon.prototype.getArea = function () {
return 0;
};
}

Teraz przepisujemy klas Triangle i czujemy w tym przykadzie pierwszy smak prawdziwego dziedziczenia:
_classes.registerClass("Triangle", "Polygon");
function Triangle(iBase, iHeight) {
_classes.defineClass("Triangle", prototypeFunction);
this.init(iBase,iHeight);
function prototypeFunction() {
Triangle.prototype.init = function(iBase, iHeight) {
this.parentMethod("init", 3);
this.iBase = iBase;
this.iHeight = iHeight;
};

Triangle.prototype.getArea = function () {
return 0.5 * this.iBase * this.iHeight;
};

Zwrmy uwag na wywoanie registerClass() tu przed konstruktorem, gdzie tworzone


jest powizanie dziedziczne. Dodatkowo w pierwszym wierszu metody init() wywoywana
jest metoda init() nadklasy (Polygon) z argumentem 3, ktry ustawia waciwo iSides
na 3. Poza tym metoda init() jest bardzo podobna: prosty konstruktor przypisujcy iBase
i iHeight.
Klasa Rectangle wyglda ostatecznie bardzo podobnie do klasy Triangle:
_classes.registerClass("Rectangle", "Polygon");
function Rectangle(iLength, iWidth) {
_classes.defineClass("Rectangle", prototypeFunction);
this.init(iLength, iWidth);

150

JavaScript. Zaawansowane programowanie


function prototypeFunction() {
Rectangle.prototype.init = function(iLength, iWidth) {
this.parentMethod("init", 4);
this.iLength = iLength;
this.iWidth = iWidth;
}
Rectangle.prototype.getArea = function () {
return this.iLength * this.iWidth;
};
}
}

Podstawowa rnica midzy t klas a klas Triangle (poza innymi wywoaniami registerClass() i defineClass()) to wywoanie metody init() z nadklasy z argumentem 4. Poza
tym dodane zostay waciwoci iLength i iWidth i zastpiona zostaa metoda getArea().

Podsumowanie
W rozdziale tym zapoznae si z koncepcj dziedziczenia w jzyku ECMAScript (a tym
samym w JavaScripcie) korzystajcego z maskowania obiektw i wizania acuchowego
prototypw. Dowiedziae si te, e czne stosowanie tych metod jest optymalnym sposobem
na stworzenie struktury dziedzicznej klas.
Przedstawiono tu te dwie alternatywne metody uzyskiwania dziedziczenia: zInherit i xbObject.
Te darmowe biblioteki JavaScriptu dostpne do pobrania w internecie wprowadzaj nowe i inne
moliwoci tworzenia struktur dziedzicznych.
W ten sposb kocz omawianie ECMAScriptu rdzenia jzyka JavaScript. W nastpnych
rozdziaach, opierajc si na tym fundamencie, bdziesz poznawa bardziej specyficzne dla
sieci WWW aspekty tego jzyka.

You might also like