Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00267 004876 20501559 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
JavaScript. Nieoficjalny podręcznik - książka
JavaScript. Nieoficjalny podręcznik - książka
Autor: Liczba stron: 520
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2166-8 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).
Czytaj online.
Komentuj

Wykorzystaj możliwości JavaScript!

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!

Twórz atrakcyjne witryny WWW, korzystając z JavaScript!

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

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: 168237, 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)

Gdzie kupić całą publikację:

JavaScript. Nieoficjalny podręcznik
Autor:
Sklep
Format
Cena
Helion.pl Helion.pl
książka
77,00 zł
Idź do sklepu »

Opinie na temat publikacji:

Inne popularne pozycje z tej kategorii:

Czytaj również:

Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: