Darmowy fragment publikacji:
JavaScript.
Nieoficjalny podrêcznik
Autor: David Sawyer McFarland
T³umaczenie: Tomasz Walczak
ISBN: 978-83-246-2166-8
Tytu³ orygina³u: JavaScript: The Missing Manual
Format: 168237, stron: 520
Wykorzystaj mo¿liwoœci JavaScript!
• Jak rozpocz¹æ przygodê z JavaScript?
• Jak dynamicznie modyfikowaæ strony WWW?
• Jak wykorzystaæ mo¿liwoœci technologii AJAX?
JavaScript to obiektowy jêzyk programowania, który tchn¹³ ¿ycie w œwiat statycznych
stron WWW. Sprawdzanie poprawnoœci formularzy, animacje, interaktywnoœæ to tylko
niektóre z mo¿liwoœci tego jêzyka. Jednak to, co ostatecznie ugruntowa³o jego pozycjê,
to technologia AJAX. Dziêki niej strony internetowe mog¹ zachowywaæ siê tak, jak
standardowe aplikacje, znane z codziennej pracy. Warto zastanowiæ siê, czy wszystkie
mo¿liwoœci JavaScript zosta³y ju¿ odkryte? Mo¿e to w³aœnie Ty zastosujesz go
w nowatorski sposób? Pewne jest, ¿e ta ksi¹¿ka Ci w tym pomo¿e!
Ksi¹¿ka „JavaScript. Nieoficjalny podrêcznik” stanowi idealne Ÿród³o informacji na
temat programowania w jêzyku JavaScript. Na samym pocz¹tku poznasz jego sk³adniê,
typy danych oraz wszelkie elementy, które pozwol¹ Ci na swobodn¹ pracê. Po zaznajomieniu
siê z podstawami przejdziesz do bardziej zaawansowanych tematów. Nauczysz siê
dynamicznie modyfikowaæ strony WWW, obs³ugiwaæ zdarzenia, wykorzystywaæ
bibliotekê jQuery czy te¿ w efektowny sposób prezentowaæ zdjêcia. Ponadto zdobêdziesz
wiedzê na temat budowania przejrzystych formularzy, tworzenia ³atwego w obs³udze
interfejsu oraz sposobów wykorzystywania mo¿liwoœci technologii AJAX. Nie da siê
ukryæ, ¿e dziêki tej ksi¹¿ce Twoje strony WWW zyskaj¹ na atrakcyjnoœci!
• Narzêdzie do programowania w JavaScript
• Podstawy HTML oraz CSS
• Typowe konstrukcje jêzyka JavaScript
• Typy danych
• Wykorzystanie zmiennych
• Logika i struktury steruj¹ce
• Wykorzystanie modelu DOM
• Podstawy pracy z bibliotek¹ jQuery
• Obs³uga zdarzeñ
• Efekty zwi¹zane z rysunkami
• Wykorzystanie wtyczki lightBox
• Tworzenie przejrzystych i inteligentnych formularzy
• Kontrola poprawnoœci wprowadzanych danych
• Wykorzystanie technologii AJAX
• Zaawansowane zagadnienia, zwi¹zane z programowaniem w JavaScript
• Diagnoza i rozwi¹zywanie typowych problemów
Twórz atrakcyjne witryny WWW, korzystaj¹c z JavaScript!
Spis treŁci
Nieoficjalne podziñkowania ..............................................................................11
Wprowadzenie .................................................................................................. 15
Czýļë I Wprowadzenie do jýzyka JavaScript ...............................29
Rozdziaę 1. Pierwszy program w jñzyku JavaScript ......................................... 31
Wprowadzenie do programowania ............................................................. 31
Czym jest program komputerowy? ......................................................... 33
Jak dodað kod JavaScript do strony? ........................................................... 34
ZewnĂtrzne pliki JavaScript .................................................................... 35
Pierwszy program w jĂzyku JavaScript ....................................................... 38
Dodawanie tekstu do stron ........................................................................ 40
DoĪîczanie zewnĂtrznych plików JavaScript .............................................. 41
Wykrywanie bĪĂdów .................................................................................. 44
Konsola JavaScript w przeglîdarce Firefox ............................................... 45
WyŁwietlanie okna dialogowego bĪĂdów w Internet Explorerze ................ 47
Konsola bĪĂdów w przeglîdarce Safari ..................................................... 48
Rozdziaę 2. Gramatyka jñzyka JavaScript ........................................................ 51
Instrukcje ................................................................................................. 51
Polecenia .................................................................................................. 52
Typy danych ............................................................................................. 52
Liczby .................................................................................................... 53
ĩaĬcuchy znaków .................................................................................. 53
WartoŁci logiczne ................................................................................... 54
Zmienne ................................................................................................... 55
Tworzenie zmiennych ............................................................................ 55
Ušywanie zmiennych ............................................................................. 58
Ušywanie typów danych i zmiennych ........................................................59
Podstawowe operacje matematyczne ......................................................59
KolejnoŁð wykonywania operacji .............................................................60
ĩîczenie ĪaĬcuchów znaków ...................................................................61
ĩîczenie liczb i ĪaĬcuchów znaków .........................................................62
Zmienianie wartoŁci zmiennych .............................................................63
PrzykĪad — ušywanie zmiennych do tworzenia komunikatów ....................64
PrzykĪad — pobieranie informacji ...............................................................66
Tablice ......................................................................................................68
Tworzenie tablic .....................................................................................69
Ušywanie elementów tablicy ..................................................................70
Dodawanie elementów do tablicy ............................................................72
Usuwanie elementów z tablicy ................................................................74
Dodawanie i usuwanie elementów za pomocî metody splice() .................75
PrzykĪad — zapisywanie danych na stronie za pomocî tablic ......................78
Komentarze ...............................................................................................80
Kiedy ušywað komentarzy? .....................................................................82
Komentarze w tej ksiîšce ........................................................................82
Rozdziaę 3. Dodawanie logiki i struktur sterujÝcych ...................................... 85
Programy reagujîce inteligentnie ...............................................................85
Podstawy instrukcji warunkowych ..........................................................87
UwzglĂdnianie planu awaryjnego ............................................................89
Sprawdzanie kilku warunków .................................................................90
Bardziej skomplikowane warunki ...........................................................91
Zagniešdšanie instrukcji warunkowych ..................................................94
Wskazówki na temat pisania instrukcji warunkowych ............................94
PrzykĪad — ušywanie instrukcji warunkowych ...........................................95
ObsĪuga powtarzajîcych siĂ zadaĬ za pomocî pĂtli .....................................98
PĂtle while ..............................................................................................98
PĂtle i tablice ........................................................................................100
PĂtle for ................................................................................................102
PĂtle do-while .......................................................................................104
Funkcje — wielokrotne korzystanie z przydatnego kodu ...........................105
Krótki przykĪad .....................................................................................107
Przekazywanie danych do funkcji .........................................................108
Pobieranie informacji z funkcji .............................................................110
Unikanie konfliktów miĂdzy nazwami zmiennych ...............................111
PrzykĪad — prosty quiz .............................................................................113
Rozdziaę 4. Uœywanie sęów, liczb i dat ............................................................119
Krótka lekcja na temat obiektów ..............................................................119
ĩaĬcuchy znaków ....................................................................................121
OkreŁlanie dĪugoŁci ĪaĬcuchów znaków ................................................121
Zmiana wielkoŁci liter w ĪaĬcuchach ....................................................122
Przeszukiwanie ĪaĬcuchów za pomocî metody indexOf() ......................123
Pobieranie fragmentów ĪaĬcuchów za pomocî metody slice() ................124
4
S P I S T R E ĝ C I
Wyszukiwanie wzorców w ĪaĬcuchach znaków ........................................ 125
Budowanie prostych wyrašeĬ regularnych i korzystanie z nich .............. 126
Tworzenie wyrašeĬ regularnych ........................................................... 127
Grupowanie czĂŁci wzorca .................................................................... 130
Przydatne wyrašenia regularne ............................................................. 131
Dopasowywanie wzorców ..................................................................... 135
ZastĂpowanie fragmentów tekstu ......................................................... 137
Testowanie wyrašeĬ regularnych .......................................................... 138
Liczby ..................................................................................................... 138
PrzeksztaĪcanie ĪaĬcucha znaków na liczbĂ ........................................... 139
Sprawdzanie, czy zmienna zawiera liczbĂ ............................................. 141
Zaokrîglanie liczb ................................................................................ 142
Formatowanie walut ............................................................................ 142
Tworzenie liczb losowych ..................................................................... 143
Data i czas .............................................................................................. 144
Pobieranie miesiĂcy .............................................................................. 145
Pobieranie dni tygodnia ........................................................................ 146
Pobieranie czasu .................................................................................. 146
Tworzenie daty róšnej od biešîcej ........................................................ 149
PrzykĪad .................................................................................................. 150
Wprowadzenie ..................................................................................... 150
Tworzenie funkcji ................................................................................ 151
Rozdziaę 5. Dynamiczne modyfikowanie stron WWW ................................. 157
Modyfikowanie stron WWW — wstĂp ...................................................... 157
Wprowadzenie do modelu DOM ............................................................. 159
Pobieranie elementów strony ............................................................... 160
Dodawanie zawartoŁci do strony .......................................................... 164
KsiĂšycowy quiz — wersja druga ........................................................... 165
Wady modelu DOM ............................................................................. 169
Biblioteki jĂzyka JavaScript ...................................................................... 170
Wprowadzenie do biblioteki jQuery ...................................................... 171
Pobieranie elementów strony — podejŁcie drugie ..................................... 173
Podstawowe selektory .......................................................................... 174
Selektory zaawansowane ...................................................................... 176
Filtry biblioteki jQuery ......................................................................... 179
Kolekcje elementów pobranych za pomocî jQuery ................................ 180
Dodawanie treŁci do stron ....................................................................... 182
ZastĂpowanie i usuwanie pobranych elementów .................................. 184
Ustawianie i wczytywanie atrybutów ....................................................... 185
Klasy .................................................................................................... 185
Wczytywanie i modyfikowanie wĪaŁciwoŁci CSS ................................... 187
Jednoczesna zmiana wielu wĪaŁciwoŁci CSS .......................................... 188
Wczytywanie, ustawianie i usuwanie atrybutów HTML ........................... 189
Ciekawe nagĪówki ................................................................................... 190
ObsĪuga wszystkich pobranych elementów .............................................. 192
Funkcje anonimowe ............................................................................. 193
S P I S T R E ĝ C I
5
Automatyczne ramki z cytatami ..............................................................195
Omówienie przykĪadu ..........................................................................195
Tworzenie kodu ...................................................................................197
Rozdziaę 6. Akcja i reakcja — oœywianie stron za pomocÝ zdarzeě .............201
Czym sî zdarzenia? .................................................................................201
Zdarzenia zwiîzane z myszî .................................................................203
Zdarzenia zwiîzane z dokumentem i oknem ........................................204
Zdarzenia zwiîzane z formularzami .....................................................205
Zdarzenia zwiîzane z klawiaturî ..........................................................206
ĩîczenie zdarzeĬ z funkcjami ..................................................................207
Zdarzenia wewnîtrzwierszowe .............................................................207
Model tradycyjny ..................................................................................208
WspóĪczesna technika ..........................................................................209
Sposób specyficzny dla jQuery ..............................................................210
PrzykĪad — wyróšnianie wierszy tabeli .....................................................212
Zdarzenia specyficzne dla biblioteki jQuery .............................................216
Oczekiwanie na wczytanie kodu HTML ...............................................217
Zdarzenia biblioteki jQuery ..................................................................219
Obiekt reprezentujîcy zdarzenie ...........................................................221
Blokowanie standardowych reakcji na zdarzenia ...................................221
Usuwanie zdarzeĬ ................................................................................222
Zaawansowane zarzîdzanie zdarzeniami ..............................................224
PrzykĪad — jednostronicowa lista FAQ .....................................................225
Omówienie zadania ..............................................................................226
Tworzenie kodu ...................................................................................227
Rozdziaę 7. Efekty zwiÝzane z rysunkami ......................................................231
Zamiana rysunków ..................................................................................231
Zmienianie atrybutu src rysunków .......................................................232
WstĂpne wczytywanie rysunków ..........................................................233
Efekt rollover z ušyciem rysunków ........................................................234
PrzykĪad — dodawanie efektu rollover z ušyciem rysunków ......................235
Omówienie zadania ..............................................................................236
Tworzenie kodu ...................................................................................237
Efekty biblioteki jQuery ...........................................................................240
Podstawowe funkcje do wyŁwietlania i ukrywania elementów ...............241
Stopniowe wyŁwietlanie i zanikanie elementów ....................................242
Wysuwanie elementów .........................................................................243
Animacje .............................................................................................244
PrzykĪad — galeria fotografii z efektami wizualnymi .................................245
Omówienie zadania ..............................................................................245
Tworzenie kodu ...................................................................................246
Wzbogacona galeria z wtyczkî lightBox biblioteki jQuery .........................251
Podstawy ..............................................................................................252
Personalizacja efektu lightBox ..............................................................254
PrzykĪad — galeria fotografii oparta na wtyczce lightBox ...........................257
6
S P I S T R E ĝ C I
Animowane pokazy slajdów oparte na wtyczce Cycle ............................... 259
Podstawowe informacje ........................................................................ 259
Dostosowywanie wtyczki Cycle ............................................................ 261
PrzykĪad — automatyczny pokaz slajdów ................................................. 264
Czýļë II Dodawanie mechanizmów do stron .............................269
Rozdziaę 8. Usprawnianie nawigacji .............................................................. 271
Podstawowe informacje o odnoŁnikach .................................................... 271
Pobieranie odnoŁników w kodzie JavaScript .......................................... 271
OkreŁlanie lokalizacji docelowej ........................................................... 272
Blokowanie domyŁlnego dziaĪania odnoŁników .................................... 273
Otwieranie zewnĂtrznych odnoŁników w nowym oknie ........................... 274
Tworzenie nowych okien ......................................................................... 277
WĪaŁciwoŁci okien ................................................................................ 278
Otwieranie stron w okienku na pierwotnej stronie ................................... 281
Zmienianie wyglîdu okien na stronie ................................................... 285
PrzykĪad — otwieranie strony na stronie ............................................... 286
PrzykĪad — powiĂkszanie odnoŁników ..................................................... 289
Omówienie przykĪadu .......................................................................... 289
Tworzenie kodu ................................................................................... 291
Animowane menu nawigacyjne ............................................................... 295
Kod HTML .......................................................................................... 296
Kod CSS ............................................................................................... 298
Kod JavaScript ...................................................................................... 299
PrzykĪad ............................................................................................... 299
Rozdziaę 9. Wzbogacanie formularzy ............................................................303
Wprowadzenie do formularzy .................................................................. 303
Pobieranie elementów formularzy ........................................................ 305
Pobieranie i ustawianie wartoŁci elementów formularzy ....................... 307
Sprawdzanie stanu przycisków opcji i pól wyboru ................................. 308
Zdarzenia zwiîzane z formularzami ..................................................... 309
Inteligentne formularze ........................................................................... 313
Aktywowanie pierwszego pola formularza ............................................ 314
WyĪîczanie i wĪîczanie pól ................................................................... 315
Ukrywanie i wyŁwietlanie opcji formularza ........................................... 316
PrzykĪad — proste wzbogacanie formularza .............................................. 317
Aktywowanie pola ................................................................................ 318
WyĪîczanie pól formularza ................................................................... 318
Ukrywanie pól formularza .................................................................... 321
Walidacja formularzy .............................................................................. 323
Wtyczka Validation .............................................................................. 324
Podstawowa walidacja .......................................................................... 326
Zaawansowana walidacja ..................................................................... 328
OkreŁlanie stylu komunikatów o bĪĂdach ............................................. 333
S P I S T R E ĝ C I
7
PrzykĪad zastosowania walidacji ..............................................................334
Prosta walidacja ....................................................................................334
Walidacja zaawansowana .....................................................................337
Walidacja pól wyboru i przycisków opcji ...............................................339
Formatowanie komunikatów o bĪĂdach ................................................342
Rozdziaę 10. Rozwijanie interfejsu ................................................................ 345
Ukrywanie informacji w kontrolkach accordion .......................................345
Personalizowanie panelu accordion ......................................................348
PrzykĪad zastosowania kontrolki accordion ...........................................350
Porzîdkowanie informacji za pomocî paneli z zakĪadkami .......................354
Formatowanie zakĪadek i paneli ............................................................356
Personalizowanie wtyczki Tabs ............................................................358
PrzykĪad zastosowania paneli z zakĪadkami ..........................................360
Podpowiedzi ............................................................................................364
Podpowiedzi oparte na atrybucie title ....................................................364
Podpowiedzi z wykorzystaniem innych stron WWW .............................367
Podpowiedzi oparte na ukrytej treŁci .....................................................368
Kontrolowanie wyglîdu podpowiedzi ....................................................370
Formatowanie podpowiedzi ..................................................................373
PrzykĪad ušycia wtyczki Cluetip ...........................................................375
Tworzenie tabel z obsĪugî sortowania ......................................................380
OkreŁlanie stylu tabeli ..........................................................................383
PrzykĪad zastosowania wtyczki Tablesorter ...........................................384
Czýļë III Ajax — komunikacja z serwerem sieciowym ..............387
Rozdziaę 11. Wprowadzenie do Ajaksa ......................................................... 389
Czym jest Ajax? .......................................................................................389
Ajax — podstawy .....................................................................................391
Elementy ukĪadanki .............................................................................392
Komunikacja z serwerem sieciowym .....................................................394
Ajax w bibliotece jQuery ..........................................................................397
Ušywanie funkcji load() ........................................................................397
PrzykĪad — korzystanie z funkcji load() .................................................400
Funkcje get() i post() .............................................................................404
Formatowanie danych przesyĪanych na serwer ......................................405
Przetwarzanie danych zwróconych z serwera .........................................408
PrzykĪad — korzystanie z funkcji get() ...................................................411
Format JSON ..........................................................................................417
DostĂp do danych z obiektów JSON ......................................................418
ZĪošone obiekty JSON ..........................................................................420
Rozdziaę 12. Podstawowe techniki oparte na Ajaksie .................................. 423
Wtyczka Tabs ..........................................................................................423
Modyfikowanie tekstu i ikony wczytywania ..........................................425
PrzykĪad zastosowania zakĪadek ajaksowych .........................................427
8
S P I S T R E ĝ C I
Dodawanie map Google do wĪasnej witryny ............................................. 429
OkreŁlanie lokalizacji na mapie ............................................................ 432
Inne opcje wtyczki jMap ....................................................................... 433
Dodawanie oznaczeĬ i „dymków” z kodem HTML ............................... 435
OkreŁlanie trasy przejazdu ................................................................... 436
PrzykĪad zastosowania wtyczki jMaps .................................................. 437
Czýļë IV Rozwiézywanie problemów, wskazówki i sztuczki ...443
Rozdziaę 13. Diagnozowanie i rozwiÝzywanie problemów ........................ 445
NajczĂstsze bĪĂdy w kodzie JavaScript ...................................................... 445
Brak symboli koĬcowych ...................................................................... 446
CudzysĪowy i apostrofy ........................................................................ 449
Ušywanie sĪów zarezerwowanych ......................................................... 450
Pojedynczy znak równoŁci w instrukcjach warunkowych ...................... 450
WielkoŁð znaków ................................................................................. 452
NieprawidĪowe Łcieški do zewnĂtrznych plików JavaScript ................... 452
NieprawidĪowe Łcieški w zewnĂtrznych plikach JavaScript .................... 453
Znikajîce zmienne i funkcje ................................................................. 454
Diagnozowanie przy ušyciu dodatku Firebug ........................................... 455
Instalowanie i wĪîczanie dodatku Firebug ............................................. 455
Przeglîdanie bĪĂdów za pomocî dodatku Firebug .................................. 457
ŀledzenie dziaĪania skryptu za pomocî funkcji console.log() .................. 458
PrzykĪad — korzystanie z konsoli dodatku Firebug ................................ 459
Diagnozowanie zaawansowane ............................................................ 463
PrzykĪad diagnozowania .......................................................................... 468
Rozdziaę 14. Zaawansowane techniki jñzyka JavaScript ..............................473
ĩîczenie róšnych elementów ................................................................... 473
Ušywanie zewnĂtrznych plików JavaScript ........................................... 473
Tworzenie bardziej wydajnego kodu JavaScript ........................................ 475
Zapisywanie ustawieĬ w zmiennych .................................................... 476
Operator trójargumentowy ................................................................... 477
Instrukcja Switch ................................................................................. 478
Wydajne ušywanie obiektu jQuery ....................................................... 481
Tworzenie kodu JavaScript o krótkim czasie wczytywania ....................... 482
Ušywanie programu YUI Compressor w systemie Windows ................. 484
Ušywanie programu YUI Compressor na komputerach Mac ................. 484
Dodatki ........................................................................................487
Dodatek A Materiaęy zwiÝzane z jñzykiem JavaScript ................................ 489
ŞródĪa informacji .................................................................................... 489
Witryny ............................................................................................... 489
Ksiîški ................................................................................................. 490
S P I S T R E ĝ C I
9
Podstawy jĂzyka JavaScript ......................................................................490
ArtykuĪy i prezentacje ...........................................................................490
Witryny ................................................................................................490
Ksiîški .................................................................................................491
jQuery .....................................................................................................491
ArtykuĪy ...............................................................................................491
Witryny ................................................................................................491
Ksiîški .................................................................................................492
Model DOM ............................................................................................492
ArtykuĪy i prezentacje ...........................................................................492
Witryny ................................................................................................493
Ksiîški .................................................................................................493
Ajax ........................................................................................................493
Witryny ................................................................................................493
Ksiîški .................................................................................................493
Zaawansowany jĂzyk JavaScript ...............................................................494
ArtykuĪy i prezentacje ...........................................................................494
Witryny ................................................................................................494
Ksiîški .................................................................................................495
CSS .........................................................................................................495
Witryny ................................................................................................496
Ksiîški .................................................................................................496
Oprogramowanie do tworzenia kodu JavaScript .......................................496
Skorowidz ....................................................................................................... 499
10
S P I S T R E ĝ C I
5
ROZDZIAà
Dynamiczne
modyfikowanie
stron WWW
JavaScript umošliwia modyfikowanie stron WWW na oczach ušytkownika. Za
pomocî kodu w tym jĂzyku mošna bĪyskawicznie dodawað rysunki i tekst, usuwað
fragmenty stron oraz zmieniað wyglîd poszczególnych elementów. Dynamiczne
modyfikowanie stron to podstawowa cecha najnowszej odmiany stron WWW
opartych na jĂzyku JavaScript. Jedna z takich witryn, Google Maps (http://maps.
google.com/), udostĂpnia mapy caĪego Łwiata. Kiedy ušytkownik zblišy obraz
lub go przesunie, witryna zaktualizuje stronĂ bez koniecznoŁci pobierania jej z ser-
wera. Z kolei w serwisie Netflix (www.netflix.com) na stronie pojawia siĂ „dymek”
ze szczegóĪowymi informacjami na temat filmu (rysunek 5.1). W obu tych witry-
nach JavaScript modyfikuje kod HTML pobrany przez przeglîdarkĂ.
W czterech pierwszych rozdziaĪach ksiîški poznaĪeŁ podstawy jĂzyka JavaScript —
sĪowa kluczowe, róšne mechanizmy i skĪadniĂ. Teraz, kiedy umiesz juš napisað
prosty program w jĂzyku JavaScript i dodað go do strony, dowiesz siĂ, dlaczego
jĂzyk ten jest tak popularny. W rozdziale tym i nastĂpnym (poŁwiĂconym zdarze-
niom jĂzyka JavaScript) zobaczysz, jak tworzyð fantastyczne interaktywne efekty
znane z nowoczesnych stron WWW.
Modyfikowanie
stron WWW — wstĂp
Modyfikowanie stron WWW — wstĂp
W tym rozdziale dowiesz siĂ, jak zmodyfikowað stronĂ za pomocî kodu JavaScript.
Zobaczysz, jak dodað do dokumentu nowî treŁð, znaczniki i atrybuty HTML, a takše
jak zmienið tekst i tagi zapisane juš w dokumencie. Nauczysz siĂ generowað nowy
kod HTML i modyfikowað fragmenty obecne na stronie.
Modyfikowanie
stron WWW — wstĂp
Rysunek 5.1. Za pomocé jýzyka JavaScript moŜna wyļwietlaë informacje, kiedy sé potrzebne, co upraszcza
przeglédanie i czytanie stron. W witrynie Netflix.com opisy pojawiajé siý dopiero po najechaniu kursorem myszy
na miniaturý plakatu do filmu pod jego tytuĥem
Dodawanie paska narzĂdzi z dynamicznym menu, wyŁwietlanie pokazów slajdów
opartych na jĂzyku JavaScript lub zmiana koloru co drugiego wiersza tabeli (co zro-
biĪeŁ w przykĪadzie z rozdziaĪu 1.) — wszystkie te operacje wymagajî zmodyfiko-
wania treŁci albo kodu HTML strony. Proces wprowadzania zmian skĪada siĂ
z dwóch etapów. Sî to:
1. Identyfikacja elementu na stronie.
Element to dowolny znacznik na stronie. Zanim go zmodyfikujesz, musisz go
zidentyfikowað za pomocî kodu JavaScript (w tym rozdziale nauczysz siĂ to
robið). Na przykĪad aby dodað kolor do wiersza tabeli, trzeba najpierw zidenty-
fikowað ten wiersz. Aby wyŁwietlið menu po umieszczeniu kursora nad przyci-
skiem, trzeba znaleşð ten przycisk. Nawet jeŁli chcesz ušyð kodu JavaScript do
dodania tekstu w dolnej czĂŁci strony, musisz zidentyfikowað odpowiedni
znacznik, aby umieŁcið tekst przed, w lub za nim.
2. Zrobienie czegoŁ ze znalezionym elementem.
To prawda, „zrobienie czegoŁ” to bardzo ogólne stwierdzenie. Wynika to z tego,
še z elementem mošna zrobið niezwykle wiele rzeczy, aby zmodyfikowað wyglîd
lub dziaĪanie strony. WiĂkszoŁð tej ksiîški opisuje przeprowadzanie róšnych
operacji na róšnych czĂŁciach stron WWW. Oto kilka mošliwoŁci:
158
C Z ĉ ĝ û I i W P R O W A D Z E N I E D O J ĉ Z Y K A J A V A S C R I P T
x Dodawanie i usuwanie atrybutu class. W przykĪadzie ze strony 42 ušy-
ĪeŁ kodu JavaScript do przypisania klasy do co drugiego wiersza tabeli. Kod
JavaScript nie „koloruje” komórek, a jedynie okreŁla ich klasĂ. NastĂpnie prze-
glîdarka ušywa informacji z arkusza CSS do zmiany wyglîdu wierszy.
x Zmienianie wĪaŁciwoŁci elementów. Na przykĪad aby za pomocî animacji
przenieŁð element div wzdĪuš strony, nalešy wielokrotnie zmienið jego
pozycjĂ.
x Dodawanie nowej treŁci. JeŁli ušytkownik nieprawidĪowo wypeĪni pole for-
mularza, mošna wyŁwietlið komunikat o bĪĂdzie, na przykĪad „Podaj adres
e-mail”. Wymaga to dodania odpowiedniego tekstu w poblišu pola formularza.
x Usuwanie elementów. W witrynie Netflix (rysunek 5.1) „dymek” znika po
przeniesieniu kursora myszy poza plakat do filmu. Technika ta polega na
usuniĂciu elementu ze strony za pomocî kodu JavaScript.
x Pobieranie informacji z elementu. Czasem potrzebne sî informacje na temat
zidentyfikowanego znacznika. Na przykĪad aby przeprowadzið walidacjĂ pola
tekstowego, trzeba je znaleşð, a nastĂpnie sprawdzið, jaki tekst wpisaĪ ušyt-
kownik, czyli ustalið wartoŁð odpowiedniego pola.
Ten rozdziaĪ dotyczy gĪównie pierwszego etapu — identyfikacji elementu na stronie.
Aby zrozumieð, jak wyszukiwað i modyfikowað fragmenty stron za pomocî kodu
JavaScript, trzeba najpierw poznað obiektowy model dokumentu (ang. Document
Object Model — DOM).
Wprowadzenie
do modelu DOM
Wprowadzenie do modelu DOM
Kiedy przeglîdarka wczyta plik HTML, wyŁwietla jego zawartoŁð na ekranie (oczy-
wiŁcie po zastosowaniu stylów CSS). Jednak oprócz tego przeglîdarki ušywajî
znaczników, atrybutów i treŁci pliku do tworzenia oraz zapisywania „modelu” kodu
HTML. Oznacza to, še przeglîdarka zapamiĂtuje znaczniki HTML, ich atrybuty
i kolejnoŁð pojawiania siĂ w pliku. Taka reprezentacja strony to obiektowy model
dokumentu, w skrócie DOM.
Model DOM udostĂpnia informacje potrzebne w kodzie JavaScript do uzyskania
dostĂpu do elementów strony. DOM zapewnia teš narzĂdzia potrzebne do nawi-
gowania po kodzie HTML dokumentu, modyfikowania go i dodawania do niego
nowych elementów. Sam model DOM nie jest czĂŁciî jĂzyka JavaScript. Jest to
standard opracowany przez organizacjĂ W3C (ang. World Wide Web Consor-
tium) i przyjĂty przez wiĂkszoŁð producentów przeglîdarek. Model DOM umoš-
liwia komunikacjĂ z kodem HTML strony i modyfikowanie go z poziomu kodu
JavaScript.
Aby zobaczyð, jak dziaĪa model DOM, przyjrzyj siĂ bardzo prostej stronie WWW:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/
html4/strict.dtd
html
head
title Strona WWW /title
/head
body class= home
R O Z D Z I A à 5 . i D Y N A M I C Z N E M O D Y F I K O W A N I E S T R O N W W W
Wprowadzenie
do modelu DOM
159
Wprowadzenie
do modelu DOM
h1 id= header NagĪówek /h1
p To strong wašny /strong tekst /p
/body
/html
Na tej stronie (podobnie jak na wszystkich innych) niektóre znaczniki obejmujî
inne tagi. Na przykĪad znacznik html zawiera wszystkie pozostaĪe tagi, a w znacz-
niku body znajdujî siĂ tagi i tekst widoczne w oknie przeglîdarki. Relacje miĂdzy
znacznikami mošna przedstawið w formie podobnej do drzewa genealogicznego
(rysunek 5.2). Tag html to „korzeĬ” tego drzewa. Mošna powiedzieð, še jest
praprapradziadem wszystkich pozostaĪych znaczników strony. Inne tagi to róšne
„gaĪĂzie” drzewa. Sî to na przykĪad znaczniki head i body , które obejmujî
nastĂpne tagi.
Rysunek 5.2. Podstawowa hierarchiczna
struktura strony HTML, w której znaczniki
obejmujé inne tagi, jest czýsto przedsta-
wiana w formie drzewa genealogicznego.
Znaczniki, które zawierajé inne tagi,
sé nazywane „przodkami”, a znaczniki
wewnýtrzne to „potomkowie”
Obok samych znaczników HTML przeglîdarka Łledzi zapisany w nich tekst (na
przykĪad „NagĪówek” w znaczniku h1 na rysunku 5.2) i atrybuty przypisane do
kašdego tagu (takie jak atrybut class tagów body i h1 na tymše rysunku).
W modelu DOM wszystkie te jednostki — znaczniki (elementy), atrybuty i tekst —
tworzî odrĂbne wĂzĪy.
Pobieranie elementów strony
Dla przeglîdarki strona to po prostu uporzîdkowany zbiór znaczników, ich atrybu-
tów i tekstu, czyli — w jĂzyku specyficznym dla modelu DOM — zbiór wĂzĪów.
Dlatego aby móc manipulowað elementami strony w kodzie JavaScript, niezbĂdny
jest dostĂp do wĂzĪów strony. Do ich pobierania sĪušî dwie podstawowe metody:
getElementById() i getElementsByTagName().
Metoda getElementById()
Przy ušyciu tej metody mošna zlokalizowað konkretny wĂzeĪ o okreŁlonym identy-
fikatorze. Znacznik h1 na rysunku 5.2 ma atrybut ID o wartoŁci header. Ponišszy
kod JavaScript pobiera ten wĂzeĪ:
document.getElementById( header )
W tĪumaczeniu na polski wiersz ten oznacza: „Znajdş na stronie znacznik o atrybucie
ID o wartoŁci header ”. SĪowo document w instrukcji document.getElementById
160
C Z ĉ ĝ û I i W P R O W A D Z E N I E D O J ĉ Z Y K A J A V A S C R I P T
Wprowadzenie
do modelu DOM
´( header ) to sĪowo kluczowe, które okreŁla caĪy dokument. Jest ono niezbĂdne —
nie wystarczy ušyð czĪonu getElementById(). Polecenie getElementById() to nazwa
metody dokumentu, a header to ĪaĬcuch znaków (nazwa szukanego identyfika-
tora) przesyĪany do tej metody jako argument. WiĂcej informacji o argumentach
znajdziesz na stronie 108.
Uwaga: Metoda getElementById() wymaga podania jednego ĥaħcucha znaków — wartoļci atrybutu
ID znacznika, na przykĥad:
document.getElementById( header )
Jednak nie oznacza to, Ŝe do metody trzeba przekazaë literaĥ znakowy. MoŜna takŜe uŜyë zmiennej
zawierajécej szukany identyfikator:
var lookFor = header ;
var foundNode = document.getElementById(lookFor);
CzĂsto wynik dziaĪania tej metody jest przypisywany do zmiennej, która umošliwia
manipulowanie danym znacznikiem w dalszej czĂŁci programu. ZaĪóšmy, še chcesz
ušyð kodu JavaScript do zmiany tekstu nagĪówka w dokumencie HTML przedsta-
wionym na stronie 159. Mošna to zrobið w nastĂpujîcy sposób:
var headLine = document.getElementById( header );
headLine.innerHTML = JavaScript byĪ tutaj! ;
Polecenie getElementById() zwraca referencjĂ do pojedynczego wĂzĪa, którî pro-
gram zapisuje w zmiennej headLine. Zapisanie wyniku dziaĪania tej metody
w zmiennej to bardzo wygodne rozwiîzanie. DziĂki niemu przy manipulowaniu
znacznikiem mošna ušywað nazwy zmiennej, a nie dušo dĪušszego zapisu document.
´getElementById( idName ). Drugi wiersz kodu ušywa tej zmiennej do uzyskania
dostĂpu do wĪaŁciwoŁci innerHTML znacznika: headLine.innerHTML (omówienie tej
wĪaŁciwoŁci znajdziesz na stronie 165).
Metoda getElementsByTagName()
Czasem pobieranie jednego elementu za pomocî metody getElementById() nie
jest najwygodniejszym podejŁciem. Mošliwe, še chcesz pobrað wszystkie odnoŁniki
ze strony i wykonað na nich okreŁlonî operacjĂ, na przykĪad sprawið, aby otwieraĪy
strony spoza witryny w nowym oknie. Potrzebna jest do tego lista elementów, a nie
tylko jeden znacznik o okreŁlonym identyfikatorze. Polecenie getElementsByTag
´Name() umošliwia pobranie takiej listy.
Ta metoda dziaĪa podobnie jak polecenie getElementById(), jednak nie przyjmuje
identyfikatora, a nazwĂ szukanych znaczników. Na przykĪad aby znaleşð wszystkie
odnoŁniki zapisane na stronie, mošna ušyð ponišszego kodu:
var pageLinks = document.getElementsByTagName( a );
Ten wiersz oznacza: „Znajdş w dokumencie kašdy znacznik a i zapisz wyniki
w zmiennej pageLinks”. Metoda getElementsByTagName() zwraca listĂ wĂzĪów,
a nie pojedynczy element. Dlatego wynikowa zmienna przypomina tablicĂ. Mošna
pobrað z niej pojedynczy wĂzeĪ za pomocî indeksu, sprawdzið Īîcznî liczbĂ
wartoŁci przy ušyciu wĪaŁciwoŁci length i przejŁð w pĂtli for po elementach (zobacz
stronĂ 102).
R O Z D Z I A à 5 . i D Y N A M I C Z N E M O D Y F I K O W A N I E S T R O N W W W
161
Wprowadzenie
do modelu DOM
Na przykĪad pierwszym elementem zapisanym w zmiennej pageLinks (page
´Links[0]) bĂdzie pierwszy znacznik a na stronie, a wĪaŁciwoŁð pageLinks.
´length zwróci liczbĂ wszystkich takich tagów.
Wskazówka: Ĥatwo popeĥnië literówký przy korzystaniu z tych metod. Najczýstszym bĥýdem poczét-
kujécych (a takŜe doļwiadczonych) programistów jest zapisanie czĥonu Id za pomocé dwóch duŜych
liter. Ponadto trzeba pamiýtaë o literze s w sĥowie Elements (to liczba mnoga) w nazwie metody
getElementsByTagName():
document.getElementById( banner );
document.getElementsByTagName( a );
Metod getElementById() i getElementsByTagName() mošna teš ušywað wspól-
nie. ZaĪóšmy, še na stronie znajduje siĂ znacznik div o identyfikatorze banner .
Aby sprawdzið, ile odnoŁników zawiera ten znacznik, nalešy ušyð metody get
´ElementById() w celu pobrania tego elementu, a nastĂpnie sprawdzið jego zawar-
toŁð za pomocî metody getElementsByTagName():
var banner = document.getElementById( banner );
var bannerLinks = banner.getElementsByTagName( a );
var totalBannerLinks = bannerLinks.length;
Choð wyszukiwanie elementów za pomocî identyfikatora sĪušy do przeszukiwania
dokumentu (document.getElementById()), znaczników okreŁlonego typu mošna
szukað zarówno w caĪym dokumencie (document.getElementsByTagName()), jak
i w poszczególnych wĂzĪach. W przedstawionym wczeŁniej kodzie zmienna banner
zawiera referencjĂ do znacznika div , dlatego instrukcja banner.getElements
´ByTagName( a ) wyszukuje tagi a tylko wewnîtrz danego elementu div .
Pobieranie pobliskich wĂzĪów
Takše tekst jest uznawany za wĂzeĪ, dlatego napisowi „NagĪówek” w znaczniku
h1 i samemu znacznikowi odpowiadajî odrĂbne wĂzĪy (zobacz stronĂ 159).
Oznacza to, še jeŁli pobierzesz tag h1 za pomocî opisanych wczeŁniej technik,
uzyskasz dostĂp tylko do znacznika, a nie do zapisanego w nim tekstu. Jak wiĂc
mošna pobrað zawartoŁð tagu? Niestety, jedyne rozwiîzanie udostĂpniane przez
model DOM wymaga ušycia pewnej sztuczki. Trzeba zaczîð od wĂzĪa h1 , przejŁð
do wĂzĪa tekstowego, a nastĂpnie pobrað jego wartoŁð.
Aby zrozumieð ten proces, trzeba zapoznað siĂ z relacjami miĂdzy znacznikami.
JeŁli ušywaĪeŁ juš stylów CSS, prawdopodobnie znasz selektory potomków. Sî one
jednym z najwartoŁciowszych narzĂdzi arkuszy CSS, poniewaš umošliwiajî for-
matowanie znaczników na podstawie ich powiîzaĬ z innymi tagami. DziĂki temu
mošna sprawið, še akapity (znaczniki p ) w ramce bocznej strony bĂdî wyglîdaĪy
inaczej niš akapity umieszczone w stopce.
W selektorach podrzĂdnych uwzglĂdniane sî relacje opisane na rysunku 5.2. JeŁli
znacznik znajduje siĂ wewnîtrz innego tagu, jest jego potomkiem. Znacznik h1
w przykĪadowym kodzie HTML (zobacz stronĂ 159) jest potomkiem tagu body ,
a takše — poŁrednio — tagu html . Znaczniki zawierajîce inne tagi sî nazywane
przodkami. Na rysunku 5.2 znacznik p to przodek tagu strong .
162
C Z ĉ ĝ û I i W P R O W A D Z E N I E D O J ĉ Z Y K A J A V A S C R I P T
Wprowadzenie
do modelu DOM
W modelu DOM relacje wystĂpujî takše miĂdzy innymi znacznikami, jednak dostĂp
jest ograniczony do „najblišszej rodziny”. Oznacza to, še mošna dotrzeð do wĂzĪa
„rodzica”, „dziecka” i „brata”. Rysunek 5.3 ilustruje te relacje. JeŁli wĂzeĪ znajduje
siĂ bezpoŁrednio w innym wĂşle, tak jak tekst „To” w znaczniku p , jest dziec-
kiem. WĂzeĪ bezpoŁrednio zawierajîcy inny wĂzeĪ, tak jak znacznik strong , któ-
ry zawiera tekst „wašny”, jest rodzicem. WĂzĪy majîce tego samego rodzica, na
przykĪad dwa wĂzĪy tekstowe, „To” i „tekst”, oraz znacznik strong , to bracia.
Rysunek 5.3. W obecnym standardzie modelu DOM nie ma
kuzynów pierwszego stopnia, babci ciotecznych ani nawet
dziadków. Uwzglýdniane relacje to: rodzic, dziecko i brat
Model DOM udostĂpnia kilka metod dostĂpu do pobliskich wĂzĪów. Sî to:
x WĪaŁciwoŁð .childNodes wĂzĪa. Zawiera ona tablicĂ wszystkich dzieci danego
wĂzĪa. Ta lista dziaĪa podobnie jak tablica zwracana przez metodĂ getElements
´ByTagName() (zobacz stronĂ 161). ZaĪóšmy, še programista dodaĪ do pliku
HTML ze strony 159 nastĂpujîcy kod JavaScript:
var headline = document.getElementById( header );
var headlineKids = headline.childNodes;
Zmienna headlineKids bĂdzie zawierað listĂ wszystkich dzieci znacznika
o identyfikatorze headline (czyli tagu h1 ). Tu istnieje tylko jeden taki
element — wĂzeĪ tekstowy o wartoŁci „NagĪówek”. Dlatego jeŁli chcesz spraw-
dzið, jaki tekst zawiera ten wĂzeĪ, mošesz ušyð nastĂpujîcego wiersza kodu:
var headlineText = headlineKids[0].nodeValue;
Instrukcja headlineKids[0] zapewnia dostĂp do pierwszego dziecka w tablicy.
Poniewaš jest to jedyne dziecko elementu h1 (rysunek 5.2), jest teš jedynym
wĂzĪem na liŁcie. Aby pobrað tekst tego wĂzĪa, nalešy ušyð wĪaŁciwoŁci node
´Value. Podobny efekt mošna uzyskað takše w Īatwiejszy sposób, który poznasz
na stronie 164.
x WĪaŁciwoŁð .parentNode reprezentuje rodzica danego wĂzĪa. JeŁli chcesz spraw-
dzið, w jakim wĂşle znajduje siĂ znacznik h1 z rysunku 5.2, mošesz ušyð
ponišszego kodu:
var headline = document.getElementById( header );
var headlineParent = headline.parentNode;
Zmienna headlineParent bĂdzie zawierað referencjĂ do znacznika body .
R O Z D Z I A à 5 . i D Y N A M I C Z N E M O D Y F I K O W A N I E S T R O N W W W
163
Wprowadzenie
do modelu DOM
x WĪaŁciwoŁci .nextSibling i .previousSibling wskazujî na wĂzeĪ znajdujîcy
siĂ bezpoŁrednio przed biešîcym elementem lub po nim. Na rysunku 5.2 znacz-
niki h1 i p sî braðmi (znacznik p pojawia siĂ bezpoŁrednio po zamyka-
jîcym znaczniku /h1 ).
var headline = document.getElementById( header );
var headlineSibling = headline.nextSibling;
Zmienna headlineSibling to referencja do znacznika p , który znajduje siĂ
po tagu h1 . JeŁli spróbujesz uzyskað dostĂp do nieistniejîcego brata, JavaScript
zwróci wartoŁð null (zobacz wskazówkĂ na stronie 135). Do sprawdzenia, czy
wĂzeĪ ma wczeŁniejszego brata (wĪaŁciwoŁð .previousSibling), mošna ušyð
nastĂpujîcego kodu:
var headline = document.getElementById( header );
var headlineSibling = headline.previousSibling;
if (! headlineSibling) {
alert( Ten wĂzeĪ nie ma mĪodszego brata );
} else {
// Przeprowadzanie operacji na wĊĨle-bracie.
}
Poruszanie siĂ po strukturze DOM strony wymaga sporo zachodu. Na przykĪad aby
pobrað caĪy tekst znacznika p widocznego na rysunku 5.2, trzeba uzyskað dostĂp
do listy jego dzieci i zapisað tekst kašdego z nich. Po napotkaniu znacznika strong
(rysunek 5.2) trzeba ponownie pobrað dziecko! Na szczĂŁcie na stronie 170 poznasz
dušo Īatwiejszy sposób korzystania z modelu DOM.
Dodawanie zawartoŁci do strony
Programy JavaScript czĂsto muszî dodawað, usuwað i zmieniað zawartoŁð strony.
W quizie napisanym w rozdziale 3. (strona 113) ušyĪeŁ metody document.write(),
aby dodað do strony ostateczny wynik gracza. W witrynie Netflix (rysunek 5.1)
umieszczenie kursora nad plakatem do filmu powoduje wyŁwietlenie na stro-
nie jego opisu.
Uwaga: W poprzednich rozdziaĥach do wyļwietlania na stronie tekstu wygenerowanego w kodzie
JavaScript uŜywaĥeļ polecenia document.write() (zobacz na przykĥad stroný 40). Ta instrukcja
jest ĥatwa do zrozumienia i w uŜytkowaniu, jednak ma bardzo ograniczone moŜliwoļci. UmoŜliwia
dodawanie nowej treļci, jednak nie pozwala miýdzy innymi na modyfikowanie istniejécego kodu.
Ponadto polecenie to jest uruchamiane w czasie wczytywania strony, dlatego nie moŜna dodaë
tekstu póŚniej, na przykĥad po klikniýciu przycisku albo wpisaniu danych w polu formularza.
Dodawanie treŁci za pomocî modelu DOM to duše wyzwanie. Proces ten wymaga
utworzenia potrzebnych wĂzĪów, a nastĂpnie doĪîczenia ich do strony. JeŁli chcesz
wstawið znacznik div , zawierajîcy kilka innych tagów i tekst, musisz utworzyð
zbiór wĂzĪów i umieŁcið je na stronie z uwzglĂdnieniem powiîzaĬ miĂdzy nimi.
Na szczĂŁcie producenci przeglîdarek udostĂpniajî dušo prostsze rozwiîzanie —
wĪaŁciwoŁð innerHTML.
Ta wĪaŁciwoŁð nie jest standardowî czĂŁciî modelu DOM. Po raz pierwszy wpro-
wadzono jî w Internet Explorerze, jednak obecnie udostĂpniajî jî wszystkie wspóĪ-
czesne przeglîdarki z obsĪugî jĂzyka JavaScript. WĪaŁciwoŁð innerHTML reprezentuje
164
C Z ĉ ĝ û I i W P R O W A D Z E N I E D O J ĉ Z Y K A J A V A S C R I P T
Wprowadzenie
do modelu DOM
caĪy kod HTML wĂzĪa. Spójrz na kod HTML przedstawiony na stronie 159. Znacz-
nik p obejmuje fragment kodu HTML, a jego wĪaŁciwoŁð innerHTML ma wartoŁð
To strong wašny /strong tekst. DostĂp do tego fragmentu w kodzie JavaScript
mošna uzyskað w nastĂpujîcy sposób:
// Pobieranie listy wszystkich znaczników p na stronie.
var pTags = document.getElementsByTagName( p );
// Pobieranie pierwszego znacznika p na stronie.
var theP = pTags[0];
alert(theP.innerHTML);
Zmienna theP reprezentuje wĂzeĪ pierwszego akapitu strony. Ostatni wiersz wyŁwie-
tla okno dialogowe z kodem tego akapitu. Po uruchomieniu powyšszego fragmentu
kodu JavaScript w dokumencie HTML przedstawionym na stronie 159 pojawi siĂ
okienko z napisem „To strong wašny /strong tekst”.
Uwaga: Wĥaļciwoļë innerHTML moŜe zostaë wĥéczona do specyfikacji jýzyka HTML 5, rozwijanego
przez organizacjý W3C (zobacz stroný www.w3.org/TR/html5).
Za pomocî wĪaŁciwoŁci innerHMTL mošna nie tylko sprawdzið zawartoŁð wĂzĪa, ale
takše jî zmodyfikowað:
var headLine = document.getElementById( header );
headLine.innerHTML = JavaScript byĪ tutaj! ;
Ten kod zmienia zawartoŁð znacznika o identyfikatorze header na JavaScript
byĪ tutaj! . Oprócz tekstu mošna dodawað takše inne elementy, na przykĪad caĪe
fragmenty kodu HTML, w tym znaczniki i ich atrybuty. PrzykĪad zastosowania tego
podejŁcia znajdziesz w nastĂpnym punkcie.
KsiĂšycowy quiz — wersja druga
W rozdziale 3. utworzyĪeŁ program JavaScript, który zadawaĪ pytania za pomocî
polecenia prompt() i wyŁwietlaĪ wyniki przy ušyciu polecenia document.write().
W tym krótkim przykĪadzie zmodyfikujesz tamten skrypt, wykorzystujîc poznane
w tym rozdziale techniki oparte na modelu DOM.
Uwaga: Informacje o pobieraniu przykĥadowych plików znajdziesz na stronie 38.
1. Otwórz w edytorze tekstu plik 5.1.html z rozdziaĪu R05.
Ten plik zawiera kompletnî wersjĂ przykĪadu 3.3 ze strony 118.
2. Znajdş ponišszy kod HTML i usuĬ kod JavaScript wyróšniony pogru-
bieniem:
p
script type= text/javascript
var message = Liczba punktów: + score;
message += z + questions.length;
message += . ;
document.write(message);
/script
/p
R O Z D Z I A à 5 . i D Y N A M I C Z N E M O D Y F I K O W A N I E S T R O N W W W
165
Wprowadzenie
do modelu DOM
Na stronie powinien pozostað pusty akapit. PosĪušy on do wyŁwietlania wyników
quizu. Aby uĪatwið dostĂp do tego akapitu, warto dodað do niego identyfikator.
3. Dodaj atrybut id= quizResults do znacznika p . Kod HTML powinien
wyglîdað teraz nastĂpujîco:
h1 Prosty quiz – wersja druga /h1
p id= quizResults /p
/div
NastĂpnie trzeba utworzyð funkcjĂ, która przechodzi przez listĂ pytaĬ, a potem
wyŁwietla wyniki na stronie.
4. Znajdş pĂtlĂ for w bloku kodu JavaScript w górnej czĂŁci strony. UmieŁð
wokóĪ pĂtli kod wyróšniony pogrubieniem:
function doQuiz() {
// Przechodzi przez listĊ pytaĔ i zadaje je.
for (var i=0; i questions.length; i++) {
askQuestion(questions[i]);
}
}
Nie zapomnij zamknîð nawiasu klamrowego w ostatnim wierszu. Znak ten
koĬczy nowî funkcjĂ, zawierajîca pĂtlĂ for, która przechodzi po wszystkich
elementach tablicy questions. Zadania wykonywane przez tĂ funkcjĂ poznasz
juš za chwilĂ.
NastĂpnie nalešy dodað informacjĂ o wyniku gracza. Do jej wyŁwietlenia posĪušy
ten sam kod, którego ušyĪeŁ w pliku 3.3.html.
5. MiĂdzy zamykajîcym nawiasem klamrowym pĂtli a koĬcowym nawiasem
klamrowym funkcji dodaj trzy wiersze kodu JavaScript:
var message = Liczba punktów: + score;
message += z + questions.length;
message += . ;
Ten kod pochodzi z przykĪadu 3.3, dlatego jeŁli nie chcesz go przepisywað,
mošesz go skopiowað i wkleið. Na tym etapie skrypt nie róšni siĂ zbytnio od
przykĪadu 3.3. Program wyŁwietla pytania, a nastĂpnie wynik. Teraz nalešy
wykorzystað model DOM. Najpierw dodaj referencjĂ do pustego znacznika p .
6. WciŁnij klawisz Enter, aby dodað nowy, pusty wiersz pod trzema dodanymi
wczeŁniej instrukcjami. NastĂpnie wpisz nastĂpujîcy kod:
var resultArea = document.getElementById( quizResults );
Ten wiersz wyszukuje w dokumencie znacznik o dodanym w kroku 3. identy-
fikatorze quizResults , a nastĂpnie zapisuje referencjĂ do tego tagu w zmien-
nej resultArea. Do tej referencji mošna przypisað informacjĂ o wyniku.
7. Ponownie wciŁnij klawisz Enter i wpisz fragment resultArea.innerHTML
= message;. Kompletny kod funkcji powinien wyglîdað nastĂpujîco:
function doQuiz() {
// Przechodzi przez listĊ pytaĔ i zadaje je.
for (var i=0; i questions.length; i++) {
askQuestion(questions[i]);
}
var message = Liczba punktów: + score;
message += z + questions.length;
message += . ;
166
C Z ĉ ĝ û I i W P R O W A D Z E N I E D O J ĉ Z Y K A J A V A S C R I P T
Wprowadzenie
do modelu DOM
var resultArea = document.getElementById( quizResults );
resultArea.innerHTML = message;
}
Ostatni wiersz funkcji przypisuje wartoŁð zmiennej message do wĪaŁciwoŁci
innerHTML znacznika p , czyli zapisuje informacjĂ o wyniku w akapicie (podob-
nie jak wczeŁniej polecenie document.write()). PodejŁcie oparte na wĪaŁciwoŁci
innerHTML jest prostsze, poniewaš nie wymaga dodawania drugiego bloku kodu
JavaScript w ciele strony, co jest konieczne przy ušywaniu polecenia document.
´write().
PamiĂtaj, še funkcje sî uruchamiane dopiero po ich wywoĪaniu (zobacz
stronĂ 107). Dlatego utworzenie funkcji, która zadaje pytania i wyŁwietla wy-
nik, to nie wszystko. Program przeprowadzi quiz dopiero po wywoĪaniu
funkcji doQuiz(). Dlatego trzeba dodað kod, który to zrobi.
8. Znajdş koĬcowy znacznik /script (pod caĪym kodem JavaScript w sekcji
head ) i dodaj przed nim wyróšnione pogrubieniem wywoĪanie:
window.onload=doQuiz;
/script
Witaj we wspaniaĪym Łwiecie zdarzeĬ jĂzyka JavaScript. Dodany wiersz kodu
nakazuje interpreterowi uruchomienie funkcji doQuiz() po wczytaniu strony.
Fragment onload to tak zwany uchwyt zdarzenia. Zdarzenie to moment wystî-
pienia okreŁlonego zjawiska w przeglîdarce lub na stronie. Kiedy przeglîdarka
wczyta stronĂ, zachodzi zdarzenie load. Kiedy ušytkownik umieŁci kursor nad
odnoŁnikiem, ma miejsce zdarzenie mouseover. Uchwyty zdarzeĬ umošliwiajî
przypisanie funkcji do zdarzenia, czyli okreŁlenie, co przeglîdarka powinna
zrobið, kiedy zajdzie dane zdarzenie. WiĂcej o zdarzeniach dowiesz siĂ w nastĂp-
nym rozdziale.
Dlaczego nie mošna uruchomið quizu przed wczytaniem strony? W koĬcu tak
wĪaŁnie dziaĪaĪ przykĪad 3.3 ze strony 113. JeŁli otworzysz w przeglîdarce gotowy
plik 3.3.html (lub udostĂpniony dokument kompletny_3.3.html z katalogu R03),
zauwašysz, še strona jest zupeĪnie pusta w czasie zadawania pytaĬ (górna czĂŁð
rysunku 5.4). Dzieje siĂ tak, poniewaš kod JavaScript quizu jest uruchamiany bez-
poŁrednio po napotkaniu pĂtli for przez interpreter. Nie czeka on na wczytanie
i wyŁwietlenie kodu HTML, dlatego przeglîdarka moše wygenerowað stronĂ dopiero
po zadaniu wszystkich pytaĬ.
Zapisz ukoĬczony wczeŁniej plik 5.1.html i wyŁwietl go w przeglîdarce. Tym razem
przeglîdarka wyŁwietli stronĂ przed zadaniem pytaĬ (dolna czĂŁð rysunku 5.4). Jest
to efekt ušycia instrukcji window.onload=doQuiz, która stanowi dla interpretera
informacjĂ nakazujîcî uruchomienie quizu dopiero po wczytaniu i wyŁwietleniu
strony. To rozwiîzanie nie tylko wyglîda dušo lepiej (pusta strona moše rozpraszað
uwagĂ), ale jest niezbĂdne, jeŁli chcesz ušywað modelu DOM do manipulowania
zawartoŁciî strony.
Kod JavaScript na omawianej stronie znajduje siĂ przed kodem HTML. W czasie
wczytywania strony przeglîdarka nie ma informacji o fragmentach HTML z koĬ-
cowej czĂŁci strony. Dlatego akapit, w którym skrypt ma wyŁwietlað wynik („Liczba
punktów: 3 z 3.”), dla przeglîdarki jeszcze nie istnieje. JeŁli spróbujesz uruchomið
R O Z D Z I A à 5 . i D Y N A M I C Z N E M O D Y F I K O W A N I E S T R O N W W W
167
Wprowadzenie
do modelu DOM
Rysunek 5.4. Kiedy uruchomisz program JavaScript przed wczytaniem strony, nie býdzie ona widoczna do
momentu zakoħczenia dziaĥania skryptu. Na stronie widocznej w górnej czýļci rysunku kod JavaScript musi zakoħczyë
zadawanie pytaħ, zanim przeglédarka býdzie mogĥa wyļwietlië stroný. Jeļli jednak uŜyjesz zdarzenia onload,
przeglédarka wczyta i wyļwietli stroný, a dopiero wtedy uruchomi skrypt (dolna czýļë rysunku)
nowy kod JavaScript natychmiast (przed wczytaniem kodu HTML), przeglîdarka
poinformuje o bĪĂdzie w momencie, kiedy skrypt bĂdzie chciaĪ pobrað znacznik p
i zapisað w nim komunikat. Problem wynika z tego, še interpreter nie ma informacji
o tym znaczniku.
168
C Z ĉ ĝ û I i W P R O W A D Z E N I E D O J ĉ Z Y K A J A V A S C R I P T
Wprowadzenie
do modelu DOM
Dlatego w kroku 4. umieŁciĪeŁ w funkcji pĂtlĂ, kod generujîcy komunikat, a takše
kod, który pobiera znacznik p i zapisuje w nim informacje. DziĂki tej funkcji prze-
glîdarka moše wczytað stronĂ i umieŁcið jî w pamiĂci, a dopiero potem wykonað
wszystkie operacji zwiîzane z quizem.
Mošesz siĂ zastanawiað, dlaczego po funkcji w wierszu window.onload=doQuiz nie
ma nawiasów. Na stronie 107 dowiedziaĪeŁ siĂ, še w wywoĪaniach funkcji zaw-
sze nalešy ich ušywað (na przykĪad doQuiz()). Nawiasy powodujî, še funkcja jest
uruchamiana natychmiast. Dlatego wiersz window.onload=doQuiz() spowo-
duje natychmiastowe przeprowadzenie quizu, jeszcze przed wczytaniem strony.
Jednak instrukcja window.onload=doQuiz tylko okreŁla funkcjĂ, bez jej wywoĪy-
wania. Skrypt uruchomi tĂ funkcjĂ dopiero po wczytaniu strony. Skomplikowa-
ne? To prawda, jednak wĪaŁnie tak dziaĪa jĂzyk JavaScript. WiĂcej informacji o tej
technice znajdziesz na stronie 217.
Wady modelu DOM
Model DOM to wartoŁciowe narzĂdzie dla programistów ušywajîcych jĂzyka
JavaScript, jednak ma teš kilka wad. Na stronie 162 zobaczyĪeŁ, še poruszanie siĂ
miĂdzy wĂzĪami modelu DOM jest czasochĪonne. Ponadto model DOM udostĂp-
nia tylko kilka sposobów uzyskania dostĂpu do znaczników — za pomocî iden-
tyfikatorów i nazw tagów. Nie mošna w wygodny sposób znaleşð na przykĪad wszyst-
kich znaczników okreŁlonej klasy, co jest przydatne przy manipulowaniu zbiorem
powiîzanych elementów, takich jak rysunki o klasie slideshow ušywane w pokazie
slajdów opartym na jĂzyku JavaScript.
NastĂpnym utrudnieniem sî róšnice w obsĪudze modelu DOM przez poszczególne
przeglîdarki. Techniki opisane na poprzednich stronach dziaĪajî we wszystkich
przeglîdarkach, jednak niektóre elementy standardu DOM sprawiajî problemy.
Przeglîdarka Internet Explorer obsĪuguje zdarzenia inaczej niš pozostaĪe przeglî-
darki, ten sam kod HTML moše dað innî liczbĂ wĂzĪów w przeglîdarkach Firefox
i Safari niš w Internet Explorerze, a ponadto Internet Explorer nie zawsze pobiera
atrybuty znaczników HTML w taki sam sposób, jak robiî to Firefox, Safari i Ope-
ra. Ponadto poszczególne przeglîdarki w odmienny sposób traktujî odstĂpy (na
przykĪad tabulacje i spacje) w kodzie HTML — niektóre przy ich napotkaniu tworzî
nowe wĂzĪy (Firefox i Safari), a Internet Explorer ignoruje takie znaki. A to tylko
kilka róšnic w obsĪudze modelu DOM przez najpopularniejsze przeglîdarki!
PrzezwyciĂšenie takich problemów w kodzie JavaScript jest tak powašnym zagad-
nieniem, še mošna poŁwiĂcið mu caĪî (bardzo nudnî) ksiîškĂ. W wielu pozycjach
dotyczîcych tego jĂzyka znajdujî siĂ dĪugie opisy kodu potrzebnego do zapewnienia
prawidĪowego dziaĪania stron w róšnych przeglîdarkach. Jednak šycie jest zbyt
krótkie,
Pobierz darmowy fragment (pdf)