Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00527 010289 11040495 na godz. na dobę w sumie
JavaScript. Podręcznik tworzenia interaktywnych stron internetowych. Wydanie II - książka
JavaScript. Podręcznik tworzenia interaktywnych stron internetowych. Wydanie II - książka
Autor: Liczba stron: 592
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1079-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).

Zaprojektuj tętniące życiem strony internetowe


JavaScript to język programowania należący do grupy najpopularniejszych narzędzi wykorzystywanych przy tworzeniu witryn internetowych. Ten łatwy w opanowaniu język interpretowany po stronie klienta jest stosowany do wielu zadań; weryfikowanie poprawności danych w formularzach, generowanie efektów graficznych, sprawdzanie modelu przeglądarki użytkownika i tworzenie dynamicznych menu to jego najczęstsze zastosowania. JavaScript jest również bazą dla zyskującej ogromną popularność technologii AJAX, która sprawia, że aplikacje sieciowe coraz bardziej upodobniają się do programów 'biurkowych'.

'JavaScript. Podręcznik tworzenia interaktywnych stron internetowych. Wydanie II' to kompleksowy przegląd możliwości języka JavaScript. Czytając tę książkę, poznasz podstawy języka JavaScript, metody wykrywania typu przeglądarki, sterowania ramkami i oknami przeglądarki, sprawdzania danych z formularzy oraz tworzenia map obrazkowych. Dowiesz się, jak korzystać z plików cookie i dynamicznego HTML. W dalszej części książki znajdziesz szczegółowy opis technologii AJAX. Nauczysz się projektować nowe strony w tej technologii i konwertować do niej istniejące dokumenty. Przeczytasz o implementacji mechanizmów AJAX po stronie serwera i przeglądarki, o korzystaniu ze skryptów PHP i usuwaniu błędów ze skryptów.

Przekonaj się, jak JavaScript zmienia oblicze witryn WWW
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

JavaScript. PodrŒcznik tworzenia interaktywnych stron internetowych. Wydanie II Autor: Dave Thau T‡umaczenie: Marcin Karbowski, Tomasz Walczak ISBN: 978-83-246-1079-2 Tytu‡ orygina‡u: The Book of JavaScript, 2nd Edition: A Practical Guide to Interactive Web Pages Format: B5, stron: oko‡o 500 Zaprojektuj tŒtni„ce ¿yciem strony internetowe (cid:149) Jak umieszcza(cid:230) na stronach WWW elementy interaktywne? (cid:149) W jaki spos(cid:243)b weryfikowa(cid:230) poprawno(cid:156)(cid:230) danych w formularzach? (cid:149) Jak najlepiej wykorzysta(cid:230) technologiŒ AJAX? JavaScript to jŒzyk programowania nale¿„cy do grupy najpopularniejszych narzŒdzi wykorzystywanych przy tworzeniu witryn internetowych. Ten ‡atwy w opanowaniu jŒzyk interpretowany po stronie klienta jest stosowany do wielu zadaæ; weryfikowanie poprawno(cid:156)ci danych w formularzach, generowanie efekt(cid:243)w graficznych, sprawdzanie modelu przegl„darki u¿ytkownika i tworzenie dynamicznych menu to jego najczŒstsze zastosowania. JavaScript jest r(cid:243)wnie¿ baz„ dla zyskuj„cej ogromn„ popularno(cid:156)(cid:230) technologii AJAX, kt(cid:243)ra sprawia, ¿e aplikacje sieciowe coraz bardziej upodobniaj„ siŒ do program(cid:243)w (cid:132)biurkowych(cid:148) (cid:132)JavaScript. PodrŒcznik tworzenia interaktywnych stron internetowych. Wydanie II(cid:148) to kompleksowy przegl„d mo¿liwo(cid:156)ci jŒzyka JavaScript. Czytaj„c tŒ ksi„¿kŒ, poznasz podstawy jŒzyka JavaScript, metody wykrywania typu przegl„darki, sterowania ramkami i oknami przegl„darki, sprawdzania danych z formularzy oraz tworzenia map obrazkowych. Dowiesz siŒ, jak korzysta(cid:230) z plik(cid:243)w cookie i dynamicznego HTML. W dalszej czŒ(cid:156)ci ksi„¿ki znajdziesz szczeg(cid:243)‡owy opis technologii AJAX. Nauczysz siŒ projektowa(cid:230) nowe strony w tej technologii i konwertowa(cid:230) do niej istniej„ce dokumenty. Przeczytasz o implementacji mechanizm(cid:243)w AJAX po stronie serwera i przegl„darki, o korzystaniu ze skrypt(cid:243)w PHP i usuwaniu b‡Œd(cid:243)w ze skrypt(cid:243)w. (cid:149) Osadzanie kodu JavaScript w dokumencie HTML (cid:149) Korzystanie ze zmiennych (cid:149) Tworzenie efekt(cid:243)w rollover (cid:149) Sterowanie oknami przegl„darki (cid:149) Obs‡uga formularzy HTML (cid:149) Zapisywanie danych u¿ytkownik(cid:243)w w plikach cookie (cid:149) Dynamiczny HTML (cid:149) Podstawy modelu AJAX (cid:149) AJAX po stronie przegl„darki i serwera (cid:149) Korzystanie z plik(cid:243)w XML (cid:149) Debugowanie skrypt(cid:243)w JavaScript i Ajax Przekonaj siŒ, jak JavaScript zmienia oblicze witryn WWW Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści PODZIĘKOWANIA .................................................................................... 17 WSTĘP ....................................................................................................... 19 PRZEDMOWA DO WYDANIA PIERWSZEGO ............................................. 21 WPROWADZENIE ...................................................................................... 23 1 WITAJCIE W JAVASCRIPT! ........................................................................ 29 Czy JavaScript to język dla mnie? ...........................................................................................30 Czy ta książka jest dla mnie? ..................................................................................................30 Cele książki ............................................................................................................................30 Jakie są możliwości języka JavaScript? ....................................................................................31 Jakie są alternatywy dla języka JavaScript? ..............................................................................32 Skrypty CGI ........................................................................................................................32 VBScript .............................................................................................................................34 Java .....................................................................................................................................35 Flash ...................................................................................................................................35 Ograniczenia języka JavaScript ...............................................................................................35 Brak możliwości nawiązania połączenia z serwerem .........................................................35 Brak możliwości tworzenia grafiki .....................................................................................36 Efekty zależne od przeglądarki ...........................................................................................36 Na początek ...........................................................................................................................36 Umieszczanie skryptu w kodzie strony ..................................................................................37 Obsługa starszych przeglądarek .............................................................................................39 Pierwszy skrypt w języku JavaScript ......................................................................................40 Podsumowanie .......................................................................................................................41 Zadanie ...................................................................................................................................41 2 WYKORZYSTYWANIE ZMIENNYCH I WBUDOWANYCH FUNKCJI W CELU AUTOMATYCZNEGO AKTUALIZOWANIA STRON INTERNETOWYCH .....43 Zmienne ................................................................................................................................ 45 Składnia zmiennych ............................................................................................................ 45 Nazywanie zmiennych ....................................................................................................... 46 Obliczenia z użyciem zmiennych ....................................................................................... 47 Wyświetlanie rezultatów ....................................................................................................... 47 Analiza listingu 2.2 ............................................................................................................. 49 Ciągi tekstowe ....................................................................................................................... 49 Analiza listingu 2.3 ............................................................................................................. 50 Więcej informacji na temat funkcji ......................................................................................... 51 alert() ................................................................................................................................. 51 Analiza listingu 2.5 ............................................................................................................. 53 prompt() ............................................................................................................................ 54 Parametry .............................................................................................................................. 55 Wyświetlanie daty na stronie internetowej ........................................................................... 56 Wbudowane funkcje dat .................................................................................................... 56 Wyznaczanie daty i godziny ............................................................................................... 57 Skrypt wyświetlający datę i godzinę .................................................................................. 59 Analiza listingu 2.7 ............................................................................................................. 59 W jaki sposób Europejska Agencja Kosmiczna wyświetla datę na swojej stronie? ................ 62 Podsumowanie ...................................................................................................................... 62 Zadanie .................................................................................................................................. 63 3 UWZGLĘDNIANIE TYPU PRZEGLĄDARKI ................................................65 Praktyczny przykład wykrycia typu przeglądarki ................................................................... 66 Metody wykrywania typu przeglądarki .................................................................................. 67 Metoda szybka i mało precyzyjna ...................................................................................... 67 Precyzyjne określanie typu przeglądarki ........................................................................... 68 Przekierowanie użytkowników do innych stron ................................................................... 70 Wyrażenia if ........................................................................................................................... 70 Wyrażenia logiczne ............................................................................................................ 71 Zagnieżdżanie .................................................................................................................... 73 Wyrażenia if-else ............................................................................................................... 74 Wyrażenia if-else-if ............................................................................................................ 74 Kiedy i gdzie należy umieszczać nawiasy klamrowe .......................................................... 75 OR i AND .............................................................................................................................. 76 OR ..................................................................................................................................... 76 AND .................................................................................................................................. 78 Wszystkie techniki razem ...................................................................................................... 79 Dodatkowe informacje na temat wyrażeń logicznych ........................................................... 81 Sposób, w jaki Netscape wyświetla zależną od przeglądarki zawartość swojej strony ......... 82 Podsumowanie ...................................................................................................................... 85 Zadanie .................................................................................................................................. 85 6 S p i s t r e ś c i 4 EFEKTY ROLLOVER ................................................................................... 87 Przykład efektu rollover .........................................................................................................88 Aktywowanie zdarzeń ............................................................................................................89 Rodzaje zdarzeń .................................................................................................................90 Cudzysłowy w języku JavaScript ........................................................................................92 Klikanie łącza donikąd ........................................................................................................93 Inne ciekawe akcje .............................................................................................................94 Zamienianie obrazów .............................................................................................................95 Praca z wieloma obrazami .....................................................................................................96 O co chodzi z tymi kropkami? ................................................................................................97 Obiekt document ...............................................................................................................98 Właściwości obiektów .......................................................................................................99 Wreszcie — efekty rollover! ..............................................................................................99 Wstępne wczytywanie obrazów ......................................................................................100 Efekty rollover na stronie „Tin House” ................................................................................101 Podsumowanie .....................................................................................................................102 Zadanie .................................................................................................................................103 5 WYKORZYSTYWANIE OKIEN ................................................................. 105 Przykład wykorzystania nowego okna w celu przekazania dodatkowych informacji ..........105 Okna jako obiekty ................................................................................................................106 Otwieranie okien .................................................................................................................107 Zmienianie wyglądu nowych okien ..................................................................................108 Niektóre przeglądarki i komputery otwierają okna w inny sposób .....................................111 Zamykanie okien ..................................................................................................................111 Właściwe nazewnictwo ........................................................................................................112 Przemieszczanie okien nad i pod innymi oknami ....................................................................113 Właściwości okien ................................................................................................................113 Status ................................................................................................................................113 Właściwość opener ..........................................................................................................114 Inne metody związane z oknami ..........................................................................................117 Zmienianie rozmiarów okien ...........................................................................................117 Przemieszczanie okien .....................................................................................................117 Podsumowanie .....................................................................................................................120 Zadanie .................................................................................................................................121 6 FUNKCJE JAVASCRIPT ........................................................................... 123 Funkcje jako skróty ..............................................................................................................124 Podstawowa struktura funkcji JavaScript .........................................................................125 Nazywanie funkcji ............................................................................................................125 Nawiasy okrągłe i klamrowe ............................................................................................125 Przykład prostej funkcji ....................................................................................................126 S p i s t r e ś c i 7 Elastyczne funkcje ................................................................................................................ 127 Parametry ........................................................................................................................ 127 Analiza listingu 6.4 ........................................................................................................... 128 Korzystanie z kilku parametrów ...................................................................................... 130 Pobieranie informacji z funkcji ............................................................................................. 131 Analiza listingu 6.6 ........................................................................................................... 133 Problem roku 2000 ............................................................................................................. 133 Analiza listingu 6.8 ........................................................................................................... 135 Poprawne definiowanie zmiennych ..................................................................................... 135 Podsumowanie .................................................................................................................... 138 Zadanie ................................................................................................................................ 138 7 PRZESYŁANIE I ODBIERANIE INFORMACJI ZA POMOCĄ FORMULARZY ...................................................................141 Przykład zastosowania formularzy ...................................................................................... 142 Tworzenie formularzy ......................................................................................................... 144 Pola tekstowe .................................................................................................................. 144 Przyciski, pola wyboru oraz przełączniki ......................................................................... 145 Listy i rozwijane menu ..................................................................................................... 147 Obszar tekstowy ............................................................................................................. 149 Podsumowanie ................................................................................................................ 150 Formularze i JavaScript ........................................................................................................ 150 Nazywanie elementów formularza ................................................................................. 150 Nazywanie przełączników ............................................................................................... 151 Nazywanie opcji .............................................................................................................. 152 Odczytywanie i definiowanie wartości w formularzach ...................................................... 153 Odczytywanie informacji z pól tekstowych ..................................................................... 153 Automatyczne wypełnianie pól formularza ..................................................................... 154 Obszary tekstowe ........................................................................................................... 156 Pola wyboru .................................................................................................................... 156 Przełączniki ...................................................................................................................... 159 Rozwijane menu i listy ..................................................................................................... 160 Obsługa zdarzeń z użyciem formularzy ............................................................................... 161 Skrócona postać skryptu ..................................................................................................... 163 Rozwijane menu jako narzędzia do nawigacji ...................................................................... 163 Ostatnie udoskonalenia ....................................................................................................... 165 Sposób, w jaki działają narzędzia nawigacyjne na stronie organizacji Lekarze bez Granic .. 166 Podsumowanie .................................................................................................................... 167 Zadanie ................................................................................................................................ 167 8 PRZETWARZANIE INFORMACJI ZA POMOCĄ TABLIC I PĘTLI ..............169 Praktyczny przykład zastosowania tablic ............................................................................. 170 Wbudowane tablice JavaScript ............................................................................................ 170 Określanie liczby elementów w tablicy ............................................................................... 172 8 S p i s t r e ś c i Analizowanie elementów tablicy ..........................................................................................172 Pętle while ............................................................................................................................174 Pętle while i tablice ..........................................................................................................175 Poza granicami tablicy ......................................................................................................177 Wykorzystywanie wyrażenia array.length w pętlach .......................................................177 Skrót zwiększający zmienną .............................................................................................178 Strzeżcie się nieskończonych pętli ...................................................................................178 Pętle for ................................................................................................................................179 Zaznaczanie wszystkich pól na stronie .................................................................................180 Analiza listingu 8.7 ............................................................................................................180 Tworzenie własnych tablic ...................................................................................................182 Analiza listingu 8.8 ............................................................................................................183 Porady wyświetlane na stronie internetowej tej książki ......................................................183 Wyszukiwanie pustych wyrażeń .......................................................................................184 Sprawdzanie ostatniego elementu w tablicy ....................................................................185 Testowanie rozmiarów tablicy .........................................................................................185 Funkcja startScroll() ..........................................................................................................185 Uproszczona wersja skryptu ............................................................................................187 Zagnieżdżanie pętli ...............................................................................................................188 Tworzenie tablic w trakcie wykonywania skryptów ............................................................189 Tablice asocjacyjne ...............................................................................................................190 Analiza listingu 8.13 ..........................................................................................................192 Podsumowanie .....................................................................................................................193 Zadanie .................................................................................................................................194 9 ZDARZENIA ZALEŻNE OD CZASU ........................................................ 195 Praktyczne przykłady zdarzeń zależnych od czasu ..............................................................196 Programowanie alarmu z użyciem funkcji setTimeout() ......................................................196 Odwoływanie alarmu z użyciem funkcji clearTimeout() ......................................................197 Analiza listingu 9.2 ............................................................................................................198 Powtarzające się zdarzenia zależne od czasu .......................................................................199 Analiza listingu 9.3 ............................................................................................................201 Funkcja parseInt() i formularze ........................................................................................202 Przerywanie odliczania przed rozpoczęciem nowego .....................................................202 Deklarowanie zmiennych przechowujących dane dotyczące limitu czasu poza funkcjami .........................................................................203 Opracowywanie zegara z użyciem pętli czasowych ............................................................203 Analiza listingu 9.4 ............................................................................................................204 Jak działa licznik na oficjalnej stronie tej książki ...................................................................205 Zasada działania skryptu na stronie Space.com ...................................................................208 Wyznaczanie czasu ...........................................................................................................210 Globalne zmienne i stałe ..................................................................................................211 Pokaz slajdów .......................................................................................................................212 Analiza listingu 9.7 ............................................................................................................213 S p i s t r e ś c i 9 Bezpieczniejsza wersja funkcji rotateImage() ...................................................................... 214 Powody, dla których deklarowanie zmiennej poza funkcją jest niebezpieczne ............... 214 Powody, dla których nie można umieszczać słowa var wewnątrz pętli czasowej .......... 215 Rozwiązanie ..................................................................................................................... 215 Dodatkowy problem ....................................................................................................... 216 Rozwiązanie problemu .................................................................................................... 217 Dlaczego zmienna the_images zadeklarowana jest poza funkcją rotateImage() ............. 218 Podsumowanie .................................................................................................................... 218 Zadanie ................................................................................................................................ 218 10 RAMKI I MAPY OBRAZKOWE .................................................................219 Praktyczny przykład wykorzystania ramek i map obrazkowych ......................................... 220 Ramki ................................................................................................................................... 221 Podstawowe informacje o ramkach ................................................................................ 221 Ramki i JavaScript ............................................................................................................. 222 Zamienianie obrazów w ramkach ................................................................................... 224 Zmienianie zawartości dwóch ramek równocześnie ...................................................... 227 Ramki wewnątrz ramek ................................................................................................... 229 JavaScript i zagnieżdżanie ramek ..................................................................................... 230 Wyłączanie ramek ........................................................................................................... 231 Przechowywanie informacji w ramkach .......................................................................... 232 Analiza listingu 10.8 ......................................................................................................... 236 Mapy obrazkowe ................................................................................................................. 237 Podstawowe informacje o mapach obrazkowych ........................................................... 237 Mapy obrazkowe i JavaScript ........................................................................................... 239 Sposób, w jaki działa skrypt na stronie serwisu Salon ......................................................... 240 Zagnieżdżone ramki na stronie serwisu Salon ................................................................. 241 Mapa obrazkowa na stronie serwisu Salon ...................................................................... 241 Funkcja changeMe() ......................................................................................................... 242 Podsumowanie .................................................................................................................... 243 Zadanie ................................................................................................................................ 243 11 SPRAWDZANIE POPRAWNOŚCI DANYCH W FORMULARZACH, PRZESYŁANIE KOMUNIKATÓW I WSPÓŁPRACA Z PROGRAMAMI PO STRONIE SERWERA ...............................................245 Praktyczny przykład sprawdzania poprawności danych wpisanych w formularzu .............. 246 Sprawdzanie, czy wymagane pola zostały wypełnione ........................................................ 246 Analiza listingu 11.1 ......................................................................................................... 249 Obsługa ciągów tekstowych ................................................................................................ 251 Dzielenie ciągów tekstowych .......................................................................................... 252 Porównywanie ciągów tekstowych z wyrażeniami regularnymi ..................................... 260 Skrypt weryfikujący dane w formularzu na stronie Dictionary.com .................................... 264 Analiza listingu 11.9 ......................................................................................................... 268 Podsumowanie .................................................................................................................... 272 Zadanie ................................................................................................................................ 273 10 S p i s t r e ś c i 12 ZAPISYWANIE DANYCH UŻYTKOWNIKÓW W PLIKACH COOKIE ........ 275 Praktyczny przykład zastosowania plików cookie ...................................................................276 Czym są pliki cookie? ...........................................................................................................277 Co można, a czego nie można zrobić za pomocą plików cookie? .......................................278 Praca z plikami cookie ..........................................................................................................278 Tworzenie plików cookie ................................................................................................279 Odczytywanie zawartości plików cookie .........................................................................279 Zmienianie wartości cookie .............................................................................................280 Zapisywanie więcej niż jednej informacji .........................................................................281 Ustalanie daty ważności pliku cookie ...............................................................................283 Kto może odczytać zawartość plików cookie? ................................................................285 Cały plik cookie ................................................................................................................286 Tworzenie wielu plików cookie .......................................................................................286 Biblioteki do obsługi plików cookie ......................................................................................287 Koszyk z zakupami wykorzystujący pliki cookie ..................................................................288 Dodawanie towaru do koszyka ........................................................................................289 Sprawdzanie wysokości rachunku ....................................................................................292 Funkcja readTheCookie() ................................................................................................293 Funkcja checkOut() ..........................................................................................................294 Podsumowanie .....................................................................................................................295 Zadanie .................................................................................................................................296 13 DYNAMICZNY HTML ............................................................................. 297 Praktyczne przykłady zastosowania języka DHTML ............................................................298 Podstawowe informacje na temat CSS ................................................................................299 Znacznik div ...............................................................................................................299 Pozycjonowanie znaczników div za pomocą CSS ............................................................299 Ukrywanie znacznika div ..................................................................................................301 Dzielenie elementów div na warstwy ..............................................................................302 JavaScript i DHTML ..............................................................................................................304 Przemieszczanie elementów div ..........................................................................................304 Animowanie elementów strony za pomocą funkcji setTimeout() oraz clearTimeout() ......305 Analiza listingu 13.4 ..........................................................................................................306 Zmienianie zawartości elementu div ....................................................................................307 Znacznik span i metoda getElementsByTagName() ............................................................308 Zaawansowane techniki DOM .............................................................................................311 Standard W3C DOM .......................................................................................................312 Tworzenie i dodawanie elementów z użyciem standardu W3C DOM ...........................312 Dodawanie tekstu do elementu .......................................................................................313 Dodawanie elementów w środku strony oraz ich usuwanie ...........................................314 Dodatkowe informacje na temat standardu DOM ..........................................................316 Manipulowanie zawartością strony z użyciem standardu DOM ......................................318 S p i s t r e ś c i 11 Zaawansowana obsługa zdarzeń ......................................................................................... 318 Obiekt event .................................................................................................................... 318 Dodawanie uchwytów zdarzeń z użyciem skryptu ......................................................... 323 Rozwijane menu .................................................................................................................. 326 Analiza listingu 13.12 ....................................................................................................... 328 Obszar menu ................................................................................................................... 329 Podsumowanie .................................................................................................................... 329 Zadanie ................................................................................................................................ 329 14 PODSTAWY MODELU AJAX ....................................................................331 Praktyczny przykład zastosowania modelu Ajax ................................................................. 332 Wprowadzenie do modelu Ajax .......................................................................................... 333 A jak „asynchroniczność” ................................................................................................ 335 X jak XML ....................................................................................................................... 335 J jak JavaScript .................................................................................................................. 336 Tworzenie i przesyłanie zapytań ......................................................................................... 336 Tworzenie obiektu request ............................................................................................. 336 Definiowanie źródła ........................................................................................................ 337 Obsługa otrzymywanych odpowiedzi ............................................................................. 337 Skrypt wykonywany po uzyskaniu odpowiedzi na zapytanie .......................................... 339 Przesyłanie zapytania ....................................................................................................... 340 Pełny skrypt Ajax ............................................................................................................. 340 Pobieranie rezultatów ..................................................................................................... 342 Demonstracja asynchroniczności ........................................................................................ 342 Analiza listingu 14.2 ......................................................................................................... 344 Użyteczność modelu Ajax ................................................................................................... 346 Przycisk Powrót .............................................................................................................. 346 Adres URL i zakładki ....................................................................................................... 346 Projektowanie stron ........................................................................................................ 346 Kiedy korzystać, a kiedy nie korzystać z modelu Ajax ........................................................ 347 Źle: „Bo można” .............................................................................................................. 347 Źle: „Bo to nowa technologia” ........................................................................................ 348 Źle: „Zastępowanie sprawdzonych rozwiązań czymś nowym i skomplikowanym” ....... 348 Dobrze: „Kontekstowa prezentacja danych” .................................................................. 348 Dobrze: „Interaktywne formanty” .................................................................................. 348 Dobrze: „Oszczędność czasu” ........................................................................................ 349 Podsumowanie .................................................................................................................... 349 Zadanie ................................................................................................................................ 349 15 XML W JĘZYKU JAVASCRIPT I MODELU AJAX ......................................351 Praktyczny przykład aplikacji Ajax wykorzystującej język XML .......................................... 352 Google Suggest .................................................................................................................... 354 XML ..................................................................................................................................... 355 12 S p i s t r e ś c i Zasady rządzące dokumentami XML ...................................................................................356 Nagłówek XML ................................................................................................................356 Elementy XML .................................................................................................................357 Atrybuty XML ..................................................................................................................357 Nieprawidłowe znaki XML ..............................................................................................358 Dokumenty XML z jednym elementem głównym ...........................................................358 Ostatnie uwagi dotyczące formatu XML .........................................................................358 Przetwarzanie kodu XML ....................................................................................................359 Analiza listingu 15.3 ..........................................................................................................361 Internet Explorer, responseXML oraz Ajax po stronie klienta ........................................365 Białe znaki w XML ...........................................................................................................365 Aplikacja wyświetlająca potencjalne tłumaczenia .................................................................366 Wyszukiwanie potencjalnych tłumaczeń ..........................................................................368 Wyświetlanie wyników ....................................................................................................370 Podsumowanie .....................................................................................................................371 Zadanie .................................................................................................................................372 16 AJAX PO STRONIE SERWERA ................................................................. 373 Praktyczne przykłady zastosowania modelu Ajax po stronie serwera .................................374 Możliwości serwerów sieciowych ........................................................................................376 Języki programowania używane po stronie serwera ............................................................377 Podstawy języka PHP ...........................................................................................................379 Przesyłanie prostych danych wejściowych do kodu PHP za pomocą zapytań GET ............380 Przekazywanie danych wejściowych w adresie URL .......................................................381 Używanie PHP do odczytu danych wejściowych z zapytań GET ....................................382 Tworzenie aplikacji Google Suggest przy użyciu zapytań GET modelu Ajax .......................383 Komunikacja z niezależnymi serwerami za pomocą modelu Ajax i języka PHP ..............384 Kod JavaScript dla samodzielnie przygotowanej aplikacji Google Suggest .......................385 Używanie PHP do komunikacji z innymi serwerami ........................................................389 Ajax i metoda POST .............................................................................................................391 Formularz zgodny z modelem Ajax .................................................................................392 Używanie modelu Ajax do przesyłania zapytań POST .....................................................393 Przesyłanie danych XML z przeglądarki na serwer sieciowy ...........................................395 Żądania HEAD — pobieranie informacji o plikach znajdujących się na serwerze ...............396 Dodawanie nagłówków do odpowiedzi ...........................................................................397 Nagłówki i XML ...............................................................................................................397 Problemy z pamięcią podręczną ..........................................................................................398 Obsługa plików w PHP ........................................................................................................398 Używanie PHP do tworzenia plików tekstowych i dodawania do nich zawartości .........399 Odczyt plików w PHP ......................................................................................................400 Kiedy komunikacja zawiedzie ...............................................................................................401 Automatyczne aktualizowanie stron internetowych w wyniku modyfikacji pliku znajdującego się na serwerze .................................................403 readFileDoFunction() .......................................................................................................405 callReadFile() ....................................................................................................................406 S p i s t r e ś c i 13 callUpdateIfChanged() ..................................................................................................... 407 stopTimer() ..................................................................................................................... 407 Powtórka i chwila oddechu ............................................................................................. 407 Kod PHP używany po stronie serwera ............................................................................ 407 Podsumowanie .................................................................................................................... 408 Zadanie ................................................................................................................................ 409 17 LISTA ZADAŃ DO WYKONANIA ............................................................411 Funkcje współdzielonej listy zadań ...................................................................................... 412 Pliki z danymi listy zadań ..................................................................................................... 416 userInfo.xml ..................................................................................................................... 416 Lista zadań ....................................................................................................................... 417 Lista zadań po stronie serwera ............................................................................................ 418 Lista zadań po stronie klienta. Część 1. — kod HTML ....................................................... 420 Lista zadań po stronie klienta. Część 2. — kod JavaScript .................................................. 421 Mapa funkcji ..................................................................................................................... 421 Logowanie i wylogowywanie się ..................................................................................... 422 Funkcje związane z logowaniem ..................................................................................... 424 Funkcje pomocnicze ........................................................................................................ 426 Wyświetlanie dostępnych list ........................................................................................... 430 Wyświetlanie określonej listy ........................................................................................... 433 Przetwarzanie zmian wprowadzonych na liście .............................................................. 437 Ograniczenia w zakresie manipulowania dokumentami XML ......................................... 441 Dodawanie nowego elementu ........................................................................................ 443 Uwagi podsumowujące ....................................................................................................... 445 Po stronie klienta czy po stronie serwera? ...................................................................... 445 Zagadnienia związane z bezpieczeństwem ..................................................................... 445 Podsumowanie .................................................................................................................... 447 Zadanie ................................................................................................................................ 447 18 DEBUGOWANIE SKRYPTÓW JAVASCRIPT I AJAX ..................................449 Dobre praktyki pisania kodu ............................................................................................... 450 Rozpoczynanie od komentarzy ....................................................................................... 450 Dodawanie kodu ............................................................................................................. 451 Unikanie standardowych błędów ........................................................................................ 451 Stosowanie spójnych konwencji nazewniczych ............................................................... 452 Unikanie słów zarezerwowanych .................................................................................... 452 Używanie dwóch znaków równości w testach logicznych .............................................. 452 Poprawne stosowanie cudzysłowów .............................................................................. 453 Wykrywanie błędów ............................................................................................................ 454 Wyświetlanie zmiennych za pomocą instrukcji alert() ..................................................... 454 Wyjście poza ramki ostrzegawcze ................................................................................... 455 Używanie wykrywacza błędów dostępnego w przeglądarce .......................................... 457 14 S p i s t r e ś c i Używanie debugerów języka JavaScript ...........................................................................457 Debugowanie aplikacji Ajax w przeglądarkach Firefox 1.5 i 2.0 ......................................461 Inne narzędzia do debugowania .......................................................................................464 Naprawianie błędów ............................................................................................................464 Archiwizuj programy ........................................................................................................464 Rozwiązywanie błędów po jednym ..................................................................................464 Unikanie „magicznego” kodu ...........................................................................................464 Szukanie podobnych błędów ...........................................................................................465 Oczyszczanie umysłu .......................................................................................................465 Prośba o pomoc ...............................................................................................................465 Podsumowanie .....................................................................................................................466 A ROZWIĄZANIA ZADAŃ ......................................................................... 467 B ZASOBY .................................................................................................. 497 C OPISY OBIEKTÓW I FUNKCJI JAVASCRIPT ............................................ 503 D ELEKTRONICZNY TŁUMACZ Z ROZDZIAŁU 15. ORAZ APLIKACJA OBSŁUGUJĄCA LISTĘ ZAPLANOWANYCH CZYNNOŚCI Z ROZDZIAŁU 17. ............................ 557 SKOROWIDZ .......................................................................................... 573 S p i s t r e ś c i 15 Przesyłanie i odbieranie informacji za pomocą formularzy POZNALIŚCIE JUŻ KILKA SPOSOBÓW NA POBIERANIE INFORMACJI OD OSÓB ODWIEDZAJĄCYCH STRONĘ. UMIECIE ZADAWAĆ PYTANIA ZA POMOCĄ FUNKCJI prompt() I POTRAFICIE AKTYWOWAĆ ZDARZENIA ZA pomocą uchwytów onClick czy onMouseOver. W tym rozdziale opanuje- cie wiele nowych technik umożliwiających pobieranie i wyświetlanie danych z użyciem formularzy HTML i języka JavaScript. Formularze i skrypty pozwalają tworzyć bardzo interaktywne strony, zawierające ankiety i quizy, kalkulatory, gry oraz nowatorskie narzędzia nawigacyjne. Podczas lektury tego rozdziału dowiecie się, jak: ■ ■ ■ ■ tworzyć formularze HTML; odczytywać zawartość wypełnionego przez użytkownika formularza za pomocą skryptu; pisać skrypty automatycznie wypełniające formularze; używać formularzy w charakterze narzędzi nawigacyjnych. Przykład zastosowania formularzy Formularze pozwalają na gromadzenie wszelkiego rodzaju informacji — danych demograficznych, takich jak wiek i płeć, odpowiedzi na pytania w quizach i sonda- żach, a także liczb wykorzystywanych w skomplikowanych obliczeniach. Przy- kładem ostatniego z wymienionych zastosowań jest przedstawiony na rysunku 7.1 kalkulator, obliczający wysokość miesięcznych rat hipotecznych. Użytkownik wpisuje sumę zaciągniętego kredytu, stopę procentową oraz okres spłaty. Po poda- niu wszystkich wymienionych informacji i kliknięciu przycisku Oblicz wysokość miesięcznej raty skrypt pobiera dane z formularza, przeprowadza odpowiednie obliczenia i wyświetla rezultat w widocznym poniżej polu tekstowym. Rysunek 7.1. Formularz obliczający wysokość rat hipotecznych Formularze można również wykorzystać w charakterze narzędzi nawigacyjnych. Na międzynarodowej stronie organizacji Lekarze bez granic (http://www.doctors- -withoutborders.org) wykorzystano do tego celu rozwijane menu (patrz rysunek 7.2). Po wybraniu z niego nazwy kraju, o którym chcemy uzyskać więcej infor- macji, skrypt skieruje nas do odpowiedniej strony. Trzeci przykład znajduje się na stronie oryginalnego wydania tej książki. Umieściłem tam rozwijane menu, które można wykorzystać do nawigacji (patrz rysunek 7.3). Po kliknięciu menu i wybraniu z niego nazwy rozdziału wyświetlona zostanie podstrona zawierająca informacje na temat danej części książki. Całość przedstawiona została na rysunku 7.3. 142 R o z d z i a ł 7 Rysunek 7.2. Strona domowa organizacji Lekarze bez granic, wykorzystująca rozwijane menu w charakterze narzędzia nawigacyjnego Rysunek 7.3. Element nawigacyjny na oficjalnej stronie tej książki P r z e s y ł a n i e i o d b i e r a n i e i n f o r m a c j i z a p o m o c ą f o r m u l a r z y 143 Wszystkie zaprezentowane elementy działają na takiej samej zasadzie: for- mularze opracowywane są z użyciem języka HTML, a wprowadzone do nich dane przetwarzane są przez JavaScript. Większość formularzy wykorzystujących skrypty działa na podobnej zasadzie. Naukę zaczniemy od procedury tworzenia formularzy. Tworzenie formularzy Na rysunku 7.4 widoczny jest prosty formularz wyświetlony w oknie przeglą- darki. Poniżej (listing 7.1) przedstawiony został odpowiadający mu kod HTML. Rysunek 7.4. Prosty formularz HTML Listing 7.1. Kod HTML formularza widocznego na rysunku 7.4 html head title Prosty formularz HTML /title /head body – form — Imię: input type = text br ˜ Wiek: input type = text br ™ /form /body /html Pola tekstowe Jak widzicie na rysunku 7.4, przedstawiony kod (listing 7.1) tworzy w oknie przeglądarki dwa pola tekstowe. Osoba odwiedzająca stronę może kliknąć po kolei każde z nich i wprowadzić swoje imię oraz wiek. Formularz tworzony jest wyłącznie za pomocą zwykłych znaczników HTML. Jak większość tego typu elementów, muszą one zostać umieszczone między znacznikami body oraz /body . Początek formularza zaznaczony jest znacznikiem form , a jego koniec — znacznikiem /form (wiersze – i ™). Po- między tymi znacznikami znajdują się elementy formularza (wiersze — i ˜) 144 R o z d z i a ł 7 przechowujące informacje. Podczas lektury tego rozdziału poznacie wiele róż- nych elementów formularzy, z których każdy posiada inne właściwości. Ele- menty zdefiniowane w wierszach — i ˜ to pola tekstowe. Pozwalają one użyt- kownikowi wpisać ciąg znaków. W dalszej części rozdziału dowiecie się, w jaki sposób można pobrać i przetworzyć taki ciąg za pomocą skryptu JavaScript. Przeglądarka rysuje pole tekstowe po napotkaniu w kodzie HTML znacznika input (wiersze — i ˜): input type = text Znacznik ten odpowiada polu pozwalającemu na wprowadzenie danych wej- ściowych. W tym przypadku są to dane typu tekstowego. Pole tekstowe można nieco zmodyfikować — na przykład zwiększyć jego wymiary: input type = text size = 40 Parametr size jest mniej więcej równy liczbie znaków, które mogą zmieścić się w polu tekstowym. Możliwe jest również umieszczenie w polu tekstowym wybranego ciągu znaków. Na przykład aby umieścić w pierwszym polu napis: „Tu wpisz swoje imię”, należy posłużyć się następującym zapisem: input type = text value = Tu wpisz swoje imię Parametr value pozwala zatem określić wstępną zawartość pola tekstowego. Zapamiętajcie jego nazwę — będziemy ją wykorzystywać w dalszej części roz- działu. Przyciski, pola wyboru oraz przełączniki Oprócz pól tekstowych w formularzach umieszczać można przyciski, pola wy- boru oraz przełączniki. Wszystkie wymienione elementy zaprezentowane zo- stały na rysunku 7.5. Przypisany im kod znajduje się w listingu 7.2. Listing 7.2. Pole wyboru, przełączniki i przycisk html head title Przyciski, pola wyboru oraz przełączniki /title /head body h1 Opowiedz mi o swoim psie /h1 form p Imię: input type = text / /p p Czy chciałbyś, aby Twój pies otrzymywał nasz codzienny biuletyn informacyjny? br/ P r z e s y ł a n i e i o d b i e r a n i e i n f o r m a c j i z a p o m o c ą f o r m u l a r z y 145 Rysunek 7.5. Przyciski, pola wyboru oraz przełączniki – p input type = checkbox / tak /p p Ile lat ma Twój pies? br/ — input type = radio name = age / do 1 roku br/ ˜ input type = radio name = age / od 1 do 3 lat br/ ™ input type = radio name = age / od 3 do 7 lat br/ š input type = radio name = age / powyżej 7 lat br/ p › input type = button value = Prześlij / /form /body /html Pola wyboru W wierszu – zaprezentowanego powyżej kodu (listing 7.2) zdefiniowano poje- dyncze pole wyboru. Jeśli chcecie, by po wyświetleniu strony było ono domyśl- nie zaznaczone, musicie wpisać słowo checked wewnątrz znacznika omawianego elementu w następujący sposób: input type = checkbox checked Termin checked także będzie często wykorzystywany, w związku z czym warto go zapamiętać. 146 R o z d z i a ł 7 Przełączniki Kolejnym elementem formularza jest przełącznik. Przełączniki różnią się od pól wyboru tym, że stosowane są wobec grup wzajemnie wykluczających się opcji. Pies nie może jednocześnie mieć „mniej niż 1 rok” i „od 1 do 3 lat” — w związ- ku z tym do zaznaczenia odpowiedzi na to pytanie przełączniki nadają się ideal- nie. Aby przypisać wybrane przełączniki do jednej grupy, należy nadać im taki sam atrybut name. W przedstawionym przykładzie (listing 7.2, wiersze od — do š) wszystkie przełączniki mają atrybut name o wartości age. W rezultacie osoba odwiedzająca stronę będzie mogła zaznaczyć tylko jeden z nich. Na przykład je- śli użytkownik zaznaczy pierwszy przełącznik, a następnie trzeci, zaznaczenie pierwszego z nich zostanie usunięte. Podobnie jak w przypadku pola wyboru, jeden z przełączników również może zostać domyślnie zaznaczony podczas otwierania strony. Efekt ten uzyskać można, wpisując słowo checked w jego znaczniku: input type = radio name = age checked Przycisk Ostatni z elementów przedstawionych w listingu 7.2 to przycisk: input type = button Powyższa instrukcja tworzy prostokątny przycisk. W jego wnętrzu umieścić można wybrany ciąg znaków, wpisując go jako wartość atrybutu value (wiersz ›). Obecnie umieszczony na stronie przycisk nie spełnia żadnej funkcji, ale wkrót- ce dowiecie się, w jaki sposób da się przypisywać mu określone operacje. Listy i rozwijane menu Wszystkie omówione do tej pory elementy pozwalały na wprowadzanie danych wybranych przez użytkownika. Kolejne dwa elementy — lista i rozwijane menu — umożliwiają opracowanie gotowej listy wartości, spośród których osoba od- wiedzająca stronę może wybrać te, które jej najbardziej odpowiadają. Oba wspo- mniane elementy widoczne są na rysunku 7.6. Ich kod zaprezentowany został w li- stingu 7.3. Listing 7.3. Rozwijane menu i lista html head title Rozwijane menu i lista /title /head body form Płeć Twojego psa: br/ P r z e s y ł a n i e i o d b i e r a n i e i n f o r m a c j i z a p o m o c ą f o r m u l a r z y 147 Rysunek 7.6. Rozwijane menu i lista select option Pies /option option Suczka /option /select p Ulubiona potrawa Twojego psa: br/ – select size = 3 — option wołowina /option option kurczak /option option ryba /option option wieprzowina /option option kot /option option sałata /option option kaktus /option ˜ /select /form /body /html Rozwijane menu definiujemy między znacznikami select (wiersz –) i /select (wiersz ˜). Każdy element takiego menu musi zostać poprzedzony znacznikiem option (wiersz —). Nie musicie umieszczać każdej opcji w osob- nym wierszu, ale zwiększa to przejrzystość kodu. Czasami jedna z opcji ma zostać zaznaczona jako domyślna podczas wczy- tywania strony. Efekt ten można osiągnąć, wpisując słowo selected wewnątrz znacznika option . Aby zdefiniować słowo Suczka jako wartość domyślną roz- wijanego menu, możecie posłużyć się następującym zapisem: option selected Suczka /option 148 R o z d z i a ł 7 Podstawową różnicę między listą i rozwijanym menu tworzy parametr size, który można umieścić wewnątrz znacznika select pierwszego z wymienionych elementów (wiersz –). Określa on, ile opcji może pojawić się na liście. W przed- stawionym przykładzie przypisałem mu wartość 3, w związku z czym po wy- świetleniu strony widoczne są trzy pierwsze opcje. Aby zobaczyć kolejne, użyt- kownik musi posłużyć si
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

JavaScript. Podręcznik tworzenia interaktywnych stron internetowych. Wydanie II
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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