Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00505 007753 11237433 na godz. na dobę w sumie
JavaScript i DHTML. Receptury - książka
JavaScript i DHTML. Receptury - książka
Autor: Liczba stron: 608
Wydawca: Helion Język publikacji: polski
ISBN: 83-7361-225-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).

DHTML i JavaScript już od kilku lat stanowią ważne narzędzia każdego projektanta stron internetowych. Jednak właściwe ich zastosowanie w dalszym ciągu sprawia wiele problemów. Danny Goodman, jeden z najbardziej doświadczonych autorów książek na temat tworzenia stron internetowych, postanowił zebrać rozwiązania tych problemów i przedstawić je projektantom pragnącym ożywić swoje strony. Wszystkie prezentowane przykłady wykorzystują najnowsze standardy stworzone przez ECMA i W3C, co daje gwarancję, że będą działały w różnych przeglądarkach przez wiele następnych lat.

Książka 'JavaScript i DHTML. Receptury' skupia się na praktycznych, użytecznych zastosowaniach skryptów na stronach internetowych. Autor nie marnuje miejsca na opisy fajerwerków, fruwających obrazków i zmian kolorów tła. Każde omówione rozwiązanie składa się nie tylko z gotowego do użycia kodu, ale także z gruntownego wyjaśnienia jego działania tak, byś mógł przystosować kod do swojej strony. Opisano zarówno proste skrypty (np. służące do obróbki tekstów, czy sprawdzania poprawności wprowadzonych dat), jak i złożone biblioteki służące do pozycjonowania elementów na stronie czy sortowania tabel.

Ponad 150 receptur obejmuje m.in.:
Tak jak żaden większy serwis internetowy nie może obyć się bez JavaScriptu i DHTML, tak też żaden profesjonalny twórca takich serwisów nie może obyć się bez tej książki.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl JavaScript i DHTML. Receptury Autor: Danny Goodman T³umaczenie: Piotr Rajca (rozdz. 1 – 10), Marek Pa³czyñski (rozdz. 11 – 15, dod. A – C) ISBN: 83-7361-225-4 Tytu³ orygina³u: JavaScript DHTML Cookbook Format: B5, stron: 604 DHTML i JavaScript ju¿ od kilku lat stanowi¹ wa¿ne narzêdzia ka¿dego projektanta stron internetowych. Jednak w³aġciwe ich zastosowanie w dalszym ci¹gu sprawia wiele problemów. Danny Goodman, jeden z najbardziej doġwiadczonych autorów ksi¹¿ek na temat tworzenia stron internetowych, postanowi³ zebraæ rozwi¹zania tych problemów i przedstawiæ je projektantom pragn¹cym o¿ywiæ swoje strony. Wszystkie prezentowane przyk³ady wykorzystuj¹ najnowsze standardy stworzone przez ECMA i W3C, co daje gwarancjê, ¿e bêd¹ dzia³a³y w ró¿nych przegl¹darkach przez wiele nastêpnych lat. Ksi¹¿ka „JavaScript i DHTML. Receptury” skupia siê na praktycznych, u¿ytecznych zastosowaniach skryptów na stronach internetowych. Autor nie marnuje miejsca na opisy fajerwerków, fruwaj¹cych obrazków i zmian kolorów t³a. Ka¿de omówione rozwi¹zanie sk³ada siê nie tylko z gotowego do u¿ycia kodu, ale tak¿e z gruntownego wyjaġnienia jego dzia³ania tak, byġ móg³ przystosowaæ kod do swojej strony. Opisano zarówno proste skrypty (np. s³u¿¹ce do obróbki tekstów, czy sprawdzania poprawnoġci wprowadzonych dat), jak i z³o¿one biblioteki s³u¿¹ce do pozycjonowania elementów na stronie czy sortowania tabel. Ponad 150 receptur obejmuje m.in.: • Pracê z interaktywnymi formularzami i stylami • Tworzenie przyjaznej dla u¿ytkownika nawigacji po serwisie • Efekty wizualne • Tworzenie dynamicznej treġci • Pozycjonowanie elementów HTML • Zarz¹dzanie okienkami przegl¹darki i ramkami Tak jak ¿aden wiêkszy serwis internetowy nie mo¿e obyæ siê bez JavaScriptu i DHTML, tak te¿ ¿aden profesjonalny twórca takich serwisów nie mo¿e obyæ siê bez tej ksi¹¿ki. Spis treści Wstęp...................................................a...................................................a.................... ......11 Rozdział 1. Łańcuchy znaków...................................................a..................................19 1.0. Wprowadzenie ...................................................a...................................................a........ ..................19 1.1. Konkatenacja (łączenie) łańcuchów znaków...................................................a...........................23 1.2. Dostęp do fragmentów łańcuchów...................................................a...........................................24 1.3. Zmiana wielkości liter...................................................a.................................................................26 1.4. Sprawdzanie równości dwóch łańcuchów ...................................................a..............................27 1.5. Sprawdzenie występowania łańcucha znaków bez użycia wyrażeń regularnych..............29 1.6. Sprawdzenie występowania łańcucha znaków z użyciem wyrażeń regularnych...............30 1.7. Wyszukiwanie i zastępowanie łańcuchów znaków...................................................a...............32 1.8. Używanie znaków specjalnych i znaków poprzedzanych odwrotnym ukośnikiem ..........33 1.9. Odczyt i zapis łańcuchów znaków w cookies ...................................................a........................36 1.10. Konwersja pomiędzy wartościami Unicode oraz znakami ...................................................a39 1.11. Kodowanie i dekodowanie łańcuchów używanych w adresach URL ................................40 1.12. Kodowanie i dekodowanie łańcuchów zapisanych w formacie Base64..............................42 Rozdział 2. Liczby i daty ...................................................a..........................................47 2.0. Wprowadzenie ...................................................a...................................................a........ ..................47 2.1. Konwersja liczb na łańcuch znaków i na odwrót...................................................a...................51 2.2. Sprawdzanie poprawności liczb ...................................................a...............................................54 2.3. Sprawdzanie równości liczb ...................................................a......................................................55 2.4. Zaokrąglanie liczb zmiennoprzecinkowych...................................................a............................57 4 Spis treści 2.5. Formatowanie liczb w celu ich prezentacji ...................................................a.............................58 2.6. Konwersje liczb dziesiętnych i szesnastkowych...................................................a.....................61 2.7. Generacja liczb pseudolosowych ...................................................a..............................................63 2.8. Obliczanie funkcji trygonometrycznych ...................................................a..................................64 2.9. Tworzenie obiektu Date ...................................................a.............................................................65 2.10. Wyznaczanie dat w przeszłości i przyszłości ...................................................a.......................66 2.11. Obliczanie ilości dni pomiędzy dwiema datami ...................................................a..................68 2.12. Weryfikacja dat ...................................................a...................................................a.... ...................70 Rozdział 3. Tablice i obiekty ...................................................a....................................75 3.0. Wprowadzenie ...................................................a...................................................a........ ..................75 3.1. Tworzenie prostej tablicy ...................................................a...........................................................79 3.2. Tworzenie tablic wielowymiarowych ...................................................a......................................80 3.3. Konwersje tablic na łańcuchy znaków i na odwrót ...................................................a...............82 3.4. Wykonywanie operacji na elementach tablicy...................................................a........................84 3.5. Sortowanie prostych tablic...................................................a.........................................................86 3.6. Łączenie tablic ...................................................a...................................................a..... ......................88 3.7. Dzielenie tablic...................................................a...................................................a.... ......................89 3.8. Tworzenie obiektów niestandardowych...................................................a..................................91 3.9. Symulowanie tablic mieszających w celu szybkiego odnajdywania elementów tablic ......95 3.10. Wykonywanie operacji na właściwości obiektu...................................................a...................97 3.11. Sortowanie tablicy obiektów...................................................a....................................................98 3.12. Modyfikacja prototypu obiektu...................a...................................................a..........................100 3.13. Konwersja tablic i obiektów niestandardowych na łańcuchy znaków..............................105 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów .............109 4.0. Wprowadzenie ...................................................a...................................................a........ ................109 4.1. Tworzenie zmiennych w JavaScripcie...................................................a....................................110 4.2. Tworzenie funkcji o konkretnej nazwie...................................................a.................................114 4.3. Zagnieżdżanie funkcji...................................................a...............................................................117 4.4. Tworzenie funkcji anonimowych...................................................a............................................119 4.5. Opóźnianie wywołania funkcji ...................................................a...............................................120 4.6. Wykonywanie różnych kodów w zależności od warunku ...................................................a123 4.7. Elegancka obsługa błędów w skryptach...................................................a................................127 4.8. Poprawianie efektywności działania skryptów...................................................a....................130 Spis treści 5 Rozdział 5. Wykrywanie możliwości przeglądarek ..............................................135 5.0. Wprowadzenie ...................................................a...................................................a........ ................135 5.1. Określanie rodzaju przeglądarki...................................................a.............................................142 5.2. Wykrywanie wczesnych wersji przeglądarek ...................................................a......................143 5.3. Określanie wersji Internet Explorera...................................................a......................................144 5.4. Określanie wersji Netscape Navigatora...................................................a.................................146 5.5. Określanie systemu operacyjnego, w jakim działa przeglądarka ........................................147 5.6. Wykrywanie obsługi obiektów ...................................................a...............................................150 5.7. Wykrywanie obsługi właściwości i metod obiektów ...................................................a..........153 5.8. Określanie języka wybranego w przeglądarce ...................................................a.....................155 5.9. Wykrywanie możliwości obsługi cookies...................................................a..............................156 5.10. Tworzenie połączeń zależnych od przeglądarki lub możliwości.......................................157 5.11. Testowanie strony w wielu wersjach przeglądarek...................................................a...........160 Rozdział 6. Zarządzanie oknami przeglądarki ...................................................a...163 6.0. Wprowadzenie ...................................................a...................................................a........ ................163 6.1. Określanie wielkości głównego okna przeglądarki ...................................................a.............166 6.2. Określanie położenie głównego okna przeglądarki ...................................................a............168 6.3. Maksymalizacja głównego okna przeglądarki ...................................................a.....................169 6.4. Tworzenie nowych okien ...................................................a.........................................................171 6.5. Wyświetlanie okna ponad innymi...................................................a..........................................175 6.6. Wymiana informacji z nowym oknem...................................................a...................................177 6.7. Komunikacja z głównym oknem przeglądarki ...................................................a....................180 6.8. Stosowanie okien modalnych i niemodalnych w Internet Explorerze ................................181 6.9. Symulowanie modalnych okien dialogowych działających w różnych przeglądarkach.....185 6.10. Symulowanie okien przy użyciu warstw ...................................................a............................193 Rozdział 7. Zarządzanie wieloma ramkami...................................................a........209 7.0. Wprowadzenie ...................................................a...................................................a........ ................209 7.1. Tworzenie pustej ramki w nowym układzie ramek ...................................................a............215 7.2. Zmiana zawartości jednej ramki z poziomu innej ...................................................a...............217 7.3. Jednoczesna zmiana zawartości kilku ramek ...................................................a.......................218 7.4. Zastępowanie układu ramek pojedynczą stroną...................................................a..................220 7.5. Unikanie wyświetlania witryny w układzie ramek innej witryny.......................................221 7.6. Wymuszenie wyświetlenia strony w odpowiednim układzie ramek..................................222 7.7. Odczytywanie wymiarów ramki ...................................................a............................................226 7.8. Zmiana wielkości ramek ...................................................a..........................................................227 7.9. Dynamiczne określanie specyfikacji układu ramek...................................................a.............231 6 Spis treści Rozdział 8. Dynamiczne formularze ...................................................a.....................235 8.0. Wprowadzenie ...................................................a...................................................a........ ................235 8.1. Automatyczne przekazywanie fokusu do pierwszego pola tekstowego ............................239 8.2. Najczęściej spotykane sposoby weryfikacji poprawności danych........................................240 8.3. Zapobieganie wysłaniu formularza w wypadku wykrycia błędnych danych...................245 8.4. Automatyczne przenoszenie fokusu do pola z błędnymi danymi.......................................249 8.5. Zmiana akcji formularza ...................................................a..........................................................250 8.6. Blokowanie wysyłania formularza na skutek naciśnięcia klawisza Enter ..........................252 8.7. Przenoszenie fokusu do następnego pola tekstowego po naciśnięciu klawisza Enter.........253 8.8. Wysyłanie formularza po naciśnięciu klawisza Enter w polu tekstowym .........................255 8.9. Wyłączanie elementów sterujących formularzy...................................................a...................256 8.10. Ukrywanie i wyświetlanie zawartości formularzy ...................................................a............258 8.11. Zezwalanie na wpisywanie w polu tekstowym wyłącznie cyfr (lub liter) .......................261 8.12. Automatyczne przechodzenie pomiędzy polami o określonej pojemności.........................263 8.13. Zmiana zawartości elementu select ...................................................a......................................265 8.14. Kopiowanie ze strony na stronę informacji podanych w formularzu ...............................268 Rozdział 9. Zarządzanie zdarzeniami...................................................a...................273 9.0. Wprowadzenie ...................................................a...................................................a........ ................273 9.1. Uwzględnianie różnic pomiędzy modelami obsługi zdarzeń IE oraz W3C ..........................280 9.2. Wykonywanie operacji po załadowaniu strony ...................................................a...................283 9.3. Określanie współrzędnych punktu kliknięcia ...................................................a......................285 9.4. Zapobieganie wykonywaniu domyślnego sposobu obsługi zdarzenia...............................289 9.5. Blokowanie dwukrotnego kliknięcia...................................................a......................................293 9.6. Określanie elementu, do którego zostało skierowane zdarzenie .........................................294 9.7. Określanie, który przycisk myszy został naciśnięty ...................................................a............296 9.8. Określanie, jaki klawisz znakowy został naciśnięty ...................................................a............299 9.9. Określanie, który z klawiszy innych niż znakowe został naciśnięty ...................................301 9.10. Określanie, które klawisze modyfikatorów zostały nacaiśnięte... ........................................304 9.11. Określanie elementu, w obszarze którego znalazł się waskaźnik myszy... ........................306 9.12. Synchronizacja dźwięków ze zdarzeniami...................................................a..........................310 Rozdział 10. Techniki nawigacji ...................................................a............................313 10.0. Wprowadzenie ...................................................a...................................................a....... ...............313 10.1. Ładowanie nowej strony lub przechodzenie do odnośnika................................................317 10.2. Usuwanie strony z historii przeglądarki ...................................................a.............................319 10.3. Wykorzystywanie elementu select w celach nawigacyjnych ..............................................320 10.4. Przekazywanie danych pomiędzy stronami przy użyciu cookies .....................................323 Spis treści 7 10.5. Przekazywanie danych pomiędzy stronami przy wykorzystaniu ramek.........................325 10.6. Przekazywanie danych pomiędzy stronami przy wykorzystaniu adresów URL ...........328 10.7. Tworzenie menu kontekstowego (wyświetlanego po kliknięciu prawym przyciskiem myszy)...................................................a.331 10.8. Tworzenie rozwijanego menu nawigacyjnego ...................................................a...................339 10.9. Tworzenie menu określającego ścieżkę nawigacji ...................................................a.............354 10.10. Tworzenie rozwijanych menu ...................................................a.............................................358 10.11. Tworzenie rozwijanego menu na bazie informacji zapisanych w języku XML.............370 Rozdział 11. Zarządzanie arkuszami stylu...................................................a..........383 11.0. Wprowadzenie ...................................................a...................................................a....... ...............383 11.1. Globalne reguły stylu...................................................a..............................................................386 11.2. Reguły stylu przypisywane zbiorom elementów...................................................a...............387 11.3. Reguły stylów przypisywane pojedynczym elementom ...................................................a..389 11.4. Importowanie arkuszy stylu...................................................a..................................................390 11.5. Importowanie arkuszy stylu zależnie od przeglądarki lub systemu operacyjnego ...........391 11.6. Zmiana importowanych arkuszy stylu po ich załadowaniu...............................................392 11.7. Włączanie i wyłączanie arkuszy stylu ...................................................a.................................394 11.8. Zmiana arkusza stylu wybranego elementu...................................................a.......................395 11.9. Przesłanianie reguł arkusza stylu ...................................................a.........................................397 11.10. Przekształcanie fragmentu tekstu w element o określonym stylu prezentacji..................398 11.11. Tworzenie wyśrodkowanych elementów strony ...................................................a.............399 11.12. Odczytywanie rzeczywistych wartości własności stylu ...................................................a.400 11.13. Wymuszanie zgodności ze standardem w przeglądarkach wersji 6. ..............................402 Rozdział 12. Efekty wizualne elementów statycznych .........................................405 12.0. Wprowadzenie ...................................................a...................................................a....... ...............405 12.1. Buforowanie rysunków ...................................................a..........................................................409 12.2. Zamiana rysunków ...................................................a...................................................a... ...........411 12.3. Zmiana własności stylu elementów tekstowych ...................................................a................414 12.4. Dynamiczna zmiana rozmiaru czcionki ...................................................a..............................417 12.5. Tworzenie własnych stylów odsyłaczy...................................................a................................421 12.6. Zmiana koloru i rysunku tła...................................................a..................................................423 12.7. Ukrywanie i uwidacznianie elementów ...................................................a..............................426 12.8. Przezroczystość elementów ...................................................a...................................................427 12.9. Efekty przejścia ...................................................a...................................................a... ..................429 8 Spis treści Rozdział 13. Pozycjonowanie elementów HTML ..................................................435 13.0. Wprowadzenie ...................................................a...................................................a....... ...............435 13.1. Przystosowanie elementu do pozycjonowania w przestrzeni dokumentu ......................440 13.2. Powiązanie elementu pozycjonowanego z elementem Body..............................................442 13.3. Pozycjonowanie z wykorzystaniem biblioteki języka JavaScript i DHTML.....................444 13.4. Wybór kontenera div lub span...................................................a..............................................450 13.5. Ustalanie pozycji elementu w stosie...................................................a.....................................453 13.6. Wyśrodkowanie elementu umieszczonego nad innym elementem...................................454 13.7. Wyśrodkowanie elementu w oknie lub w ramce...................................................a...............457 13.8. Ustalanie położenia elementu nieobjętego pozycjonowaniem ...........................................460 13.9. Animacja wzdłuż linii prostej...................................................a................................................461 13.10. Animacja po okręgu ...................................................a...................................................a...........465 13.11. Przeciąganie elementów ...................................................a.......................................................467 13.12. Przewijanie zawartości elementu div...................................................a.................................473 13.13. Tworzenie własnego paska przewijania ...................................................a............................479 Rozdział 14. Dynamiczna zawartość strony ...................................................a.......491 14.0. Wprowadzenie ...................................................a...................................................a....... ...............491 14.1. Generowanie kodu podczas pobierania strony ...................................................a..................492 14.2. Dynamiczne generowanie nowych stron ...................................................a............................494 14.3. Włączanie zewnętrznych dokumentów HTML...................................................a..................496 14.4. Osadzanie danych XML ...................................................a.........................................................498 14.5. Osadzanie danych w postaci obiektów JavaScript...................................................a.............502 14.6. Przekształcanie danych XML do postaci tabel HTML ...................................................a......504 14.7. Przekształcanie obiektów JavaScript w tabele HTML ...................................................a.......508 14.8. Przekształcanie drzewa XML w obiekty JavaScript...................................................a...........510 14.9. Tworzenie nowych elementów ...................................................a.............................................512 14.10. Tworzenie tekstowej zawartości nowo wprowadzanych elementów .............................514 14.11. Łączenie elementów i węzłów tekstowych ...................................................a.......................516 14.12. Wstawianie i wypełnianie elementów iframe...................................................a...................518 14.13. Pozyskiwanie referencji obiektu elementu HTML...................................................a...........520 14.14. Zamiana fragmentów sekcji body...................................................a.......................................523 14.15. Usuwanie zawartości sekcji body ...................................................a.......................................524 14.16. Sortowanie zawartości tabel ...................................................a................................................526 14.17. Analiza węzłów drzewa dokumentu ...................................................a.................................529 14.18. Pobieranie treści dokumentu ...................................................a...............................................534 Spis treści 9 Rozdział 15. Aplikacje o dynamicznie generowanej zawartości ........................537 15.0. Wprowadzenie ...................................................a...................................................a....... ...............537 15.1. Losowo wyświetlane komunikaty ...................................................a........................................538 15.2. Przekształcanie zaznaczonego przez użytkownika tekstu w element HTML .................541 15.3. Automatyczne wyszukiwanie i zastępowanie fragmentów treści elementu body .........543 15.4. Pokaz slajdów...................................................a...................................................a........................546 15.5. Automatyczne przewijanie strony...................................................a........................................553 15.6. Powitanie zależne od pory dnia...................................................a............................................555 15.7. Odliczanie dni do Bożego Narodzenia ...................................................a................................556 15.8. Zegar odliczający czas do wyznaczonego terminu...................................................a............558 15.9. Kalendarz ...................................................a...................................................a.......... .....................565 15.10. Animowany pasek postępu ...................................................a.................................................572 Dodatek A Kody znaków w zdarzeniach generowanych przy naciśnięciu klawiszy klawiatury ...................................................a...............579 Dodatek B Kody klawiszy ...................................................a......................................583 Dodatek C Słowa kluczowe ECMAScript ...................................................a............585 Skorowidz...................................................a...................................................a................587 Zmienne, funkcje i sterowanie wykonywaniem skryptów 4.0. Wprowadzenie W tym rozdziale przedstawionych zostało wiele podstawowych zagadnień związanych z językiem JavaScript. Kilka z zamieszczonych tu receptur (ewentualnie ich zmodyfikowa- nych wersji) może się stać narzędziami wykorzystywanymi w codziennej pracy. Jeśli roz- wiązania te nie są często stosowane, to mogą posłużyć do odświeżenia pamięci i stanowić wzorzec, z którego będzie można skorzystać w razie potirzeby. Nawet proste zagadnienia, takie jak zmienne i funkcje w JavaScripcie, mają swoje niuanse, o których z czasem łatwo zapomnieć. Kilka rozwiązań, takich jak obsługa wyjątków oraz instrukcje try oraz catch są stosunkowo nowe i wprowadzono je w nowszych wersjach przeglądarek. Twórcy skryptów, którzy nie dysponują formalnym doświadczeniem pro- gramistycznym, zazwyczaj mają tendencje do ignorowania błędów, a niestety, postępo- wanie takie może się w przyszłości na nich zemścić. Z drugiej strony, implementacje niektórych aspektów obsługi wyjątków w poszczególnych przeglądarkach nie są ze sobą zgodne. Jeśli mechanizmy obsługi wyjątków nie są jeszcze wykorzystywane w skryptach (być może ze względu na konieczność zachowania zgodności z wcześniejszymi wersjami przeglądarek), to i tak należy je poznać. Wraz z upływem czasu, kiedy w przeglądarkach zostanie zaimplementowany cały model obiektów dokumentu (DOM) W3C, zasady two- rzenia „bezpiecznych skryptów” będą bazować na wykorzystaniu mechanizmów obsługi wyjątków. 110 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów Na końcu niniejszego rozdziału zostały zamieszczone pewne sugestie dotyczące popra- wiania efektywności działania skryptów. W większości skryptów efektywność działania nie ma kluczowego znaczenia, niemniej jednak w dużych projektach, operujących na dokumen- tach o złożonej strukturze i znacznych ilościach ukrytych informacji dostarczanych do prze- glądarki, na kwestie związane z efektywnością należy zwracać baczną uwagę. W tym roz- dziale zostaną przedstawione rozwiązania, które powinny być stosowane nawet w prostych skryptach. 4.1. Tworzenie zmiennych w JavaScripcie NN 2 IE 3 Problem Należy utworzyć zmienną bądź to w globalnej przestrzeni skryptu, bądź lokalnie we- wnątrz funkcji. Rozwiązanie Aby utworzyć pierwszą kopię zmiennej, należy wykorzystać słowo kluczowe var, nie- zależnie od tego, czy zmiennej od razu zostanie przypisana jakaś wartość, czy też przy- pisanie nastąpi dopiero później. Wszelkie zmienne definiowane poza funkcjami należą do globalnej przestrzeni zmiennych: var mojaZmienna = jakasWartosc; Wszystkie instrukcje umieszczone na stronie, nawet te znajdujące się w funkcjach, mają pełne prawa do odczytu i zapisu zmiennych globalnych.i Gdy zmienna jest definiowana przy użyciu słowa kluczowego var wewnątrz funkcji, dostęp do niej będą mieć wyłącznie instrukcje umieszczione w tej samej funkcji: function mojaFunkcja() { var mojaZmiennaLokalna = jakasWartosc; ... } Instrukcje umieszczone poza funkcją nie mają dostępu do zmiennych, których zakres ogra- nicza się do funkcji. Analiza W JavaScripcie nie istnieje żaden limit ilości danych, jakie można zapisywać w poszczegól- nych zmiennych. Maksymalna pojemność zmiennych jest ograniczana wyłącznie przez wielkość pamięci dostępnej dla przeglądarki, przy czym informacje o tej pamięci nie są dostępne z poziomu skryptu. 4.1. Tworzenie zmiennych w JavaScripcie 111 Ważnym zagadnieniem, które należy zrozumieć, jest zakres zmiennych. Zmienne globalne są dostępne nie tylko dla wszystkich instrukcji skryptu umieszczonych w bieżącym oknie przeglądarki lub ramce, lecz co więcej, dzięki odpowiednim odwołaniom, instrukcje wyko- nywane w innych ramkach lub oknach (prezentujących strony z tej samej domeny i ser- wera) także mają do nich dostęp. Na przykład instrukcja umieszczona w ramce zawie- rającej menu może się odwołać do zmiennej mojaZmienna przechowywanej w ramce zawartosc, wykorzystując następujące odwołanie: parent.zawartosc.mojaZmienna Jeśli zmienne globalne zostały zdefiniowane w innych ramkach lub oknach przeglądarki, nie trzeba się przejmować możliwością wystąpienia pomiędzy nimi kolizji nazw, gdyż odwo- łania do nich zawsze będą inne. Ostrożność należy natomiast zachowywać w wypadkach definiowania, z wykorzystaniem słowa kluczowego var, zmiennych wewnątrz funkcji. W razie pominięcia słowa kluczo- wego var zmienna zostanie uznana za globalną. Jeśli w skrypcie została zdefiniowana zmienna globalna o tej samej nazwie, to instrukcje przypisania modyfikujące zmienną wewnątrz funkcji spowodują zmianę wartości zmiennej globalnej. Najbezpieczniejszym rozwiązaniem problemów tego typu jest konsekwentne stosowanie słowa kluczowego var przy tworzeniu każdej nowej zmiennej, i to niezależnie od miejsca, w którym jest definiowana. Pomimo tego, że w wypadku definiowania zmiennych globalnych słowo kluczowe var jest opcjonalne, to jednak jego stosowanie należy do dobrego stylu progra- mowania. Dzięki temu bardzo łatwo można się zorientować, w którym miejscu skryptu zmienna jest używana po raz pierwszy. Choć w niektórych językach programowania operacje deklarowania zmiennej (sprowadza- jące się do zarezerwowania pamięci na jej wartość) oraz jej inicjalizacji (zapisania jej wartości w pamięci) są traktowane niezależnie, to jednak dynamiczne przydzielanie pamięci na wartości zmiennych wykorzystywane w JavaScripcie zwalnia programistów z konieczności zaprzątania sobie głowy zagadnieniami zarządzania pamięcią. W JavaScripcie zmienne są naprawdę „zmienne”, gdyż kolejne przypisania mogą zmieniać nie tylko ich wartości, lecz także typ tych wartości (nie oznacza to wcale, że jest to przykład dobrego stylu pro- gramowania — jest to jedynie efekt uboczny luźnego typowania danych stosowanego w JavaScripcie). Mówiąc o dobrym stylu programowania, warto zaznaczyć, że zazwyczaj zalecane jest definiowanie zmiennych globalnych na samym początku skryptu, podobnie jak zaleca się, by zmienne lokalne często wykorzystywane w funkcjach były definiowane na po- czątku tych funkcji. Nawet jeśli w danej chwili wartość przypisywana zmiennej nie jest dostępna, można po prostu zadeklarować zmienną bez jeji definiowania: var mojaZmienna; Jeśli należy zadeklarować więcej niż jedną zmienną, można to zrobić jednocześnie, od- dzielając nazwy poszczególnych zmiennych przecinkamii: var mojaZmienna, licznik, franek, i, j; 112 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów W powyższej instrukcji można nawet zainicjalizować wartość zmiennej: var mojaZmienna, licznik = 0, franek, i, j; W przykładach przedstawionych w niniejszej książce zmienne są przeważnie (choć nie zawsze) definiowane i inicjalizowane na początku zakresu, w którym są dostępne. Nie jest niczym niezwykłym, że zmienne, które mają być wykorzystywane wewnątrz pętli for, są definiowane (przy wykorzystaniu słowa kluczowego var) bezpośrednio przed instrukcją pętli. Na przykład jeśli w pewnym fragmencie skryptu mają być wykorzystanie dwie zagnieżdżone pętle for, to bezpośrednio przed nimi można zdefiniować używane w nich liczniki: var i, j; for (i = 0; i tablica1.length; i++) { for (j = 0; j tablica2.length; j++) { .... } } Jest to oczywiście mój styl pisania skryptów. W przedstawionej sytuacji istnieje jeszcze inny powód, dla którego deklaracje zmiennych powinny znaleźć się poza pętlami. Otóż jeśli słowo kluczowe var zostałoby użyte w instrukcji inicjalizującej licznik pętli (np.: var j = 0), to pętla wewnętrzna cyklicznie wykonywałaby to słowo kluczowe podczas każdego wykonania pętli zewnętrznej. Interpreter JavaScriptu tworzy bowiem przestrzeń dla zmiennej za każdym razem, gdy odnajdzie słowo kluczowe var. Na szczęście interpreter określa także, która z wielokrotnie deklarowanych zmiennych jest tworzona w danej chwili, nie- mniej jednak operacje te niepotrzebnie wykorzystują zasoby. Zmienne należy deklaro- wać jeden raz, a następnie, już bez żadnych ograniczeń, można inicjalizować je oraz zmieniać ich wartości. Dlatego w złożonych funkcjach, w których występują dwie lub więcej zewnętrznych pętli for, należy deklarować licznik pętli na samym początku funkcji, a na samym początku pętli jedynie inicjalizować jegoi wartość. Jeśli zaś chodzi o wybieranie nazw dla zmiennych, to istnieją pewne jawne reguły oraz niejawne zwyczaje, którymi należy się kierować. Większe znaczenie mają oczywiście jawne reguły. Nazwy zmiennych nie mogą: • zaczynać się od liczby; • zawierać spacji oraz innych znaków odstępu; • zawierać znaków przestankowych oraz innych symboli zai wyjątkiem znaku podkreślenia; • być zapisywane w cudzysłowach; • odpowiadać zastrzeżonym słowom kluczowym języka ECMAScriipt (patrz dodatek C). Stosowane przez programistów konwencje dotyczące nazw nadawanych zmiennym nie są obowiązujące, jak również nie mają żadnego wpływu na działanie skryptów. Niemniej jednak pomagają one w zachowaniu czytelności skryptu i ułatwiają jego utrzymanie, gdy po kilku miesiącach trzeba będzie sobie przypomnieć, coi skrypt robi. 4.1. Tworzenie zmiennych w JavaScripcie 113 Nazwy zmiennych są podawane przede wszystkim po to, aby ułatwić określanie, jakiego rodzaju wartość jest przechowywana w danej zmiennej (w rzeczywistości zmienne są bardzo często nazywane identyfikatorami). Umieszczenie w skrypcie kilkunastu zmiennych o nazwach jedno- lub dwuliterowych nie ułatwi śledzenia poszczególnych wartości podczas analizy skryptu. Z drugiej strony istnieją czynniki związane z efektywnością działania (patrz receptura 4.8) przemawiające za unikaniem przesadnie długich nazw zmiennych. Im krótsza nazwa, tym lepsza, oczywiście o ile nie jest to skrót niemożliwy do odszy- frowania. Jeśli warto, musi być opisana za pomocą dwóch lub kilku słów, można je po- łączyć znakiem podkreślenia lub zaczynać poszczególne słowa (zaczynając od drugiego) od wielkiej litery (ta konwencja jest wykorzystywana w niniejszej książce). A zatem, obie nazwy zmiennych przedstawione w poniższym przykładziie, są dobre: var czlonekZespolu = Janek ; var czlonek_zespolu = Janek ; Te reguły i pojęcia warto także stosować podczas określania nazw przypisywanych atrybu- tom name oraz id elementów HTML. Dzięki temu nie będzie żadnych problemów z używa- niem tych nazw w odwołaniach. W nazwach zmiennych uwzględniana jest wielkość liter. Z tego względu można (choć nie jest to zalecane) wykorzystać ten sam identyfikator zapisany literami o innej wielkości do przechowywania zupełnie nowej wartości. Jedna z konwiencji, którą można wykorzystać, zaleca, by określić wszystkie zmienne, których wartości nie będą się zmieniać w całym skrypcie (czyli będą one traktowane jako stałe) i zapisać ich nazwy wielkimi literami. Przeglądarka Netscape 6 oraz jej nowsze wersje implementują przyszłe słowo kluczowe języka ECMAScript — const — którego można używać zamiast słowa var w celu defi- niowania stałych. Jak na razie, to słowo kluczowe nie jest obsługiwane w żadnych innych przeglądarkach, a zatem wciąż można używać zmiennych jaiko stałych i nie wprowadzać żadnych modyfikacji w ich wartościach. JavaScript zapisuje wartości w zmiennych zarówno „przez odwołanie”, jak i „przez war- tość”, przy czym użyty sposób zależy od typu danych. Jeśli zapisywana wartość jest praw- dziwym obiektem (dowolnego typu — na przykład obiektem DOM, tablicą lub obiektem niestandardowym), to zmienna będzie zawierać odwołanie do danego obiektu. W takim wypadku zmiennej można używać jako zastępczego odwołaniia do obiektu: var element = document.getElementById( mojaTablica ); var szerWyp = element.cellPadding; Jeśli jednak dana jest wartością prostą (łańcuchem znaków, liczbą, wartością logiczną), to w zmiennej przechowywana jest sama wartość, bez jakiegokolwiek połączenia z orygi- nalnym obiektem, z którego została odczytana. Dlatego też zmienna szerWyp przedsta- wiona w powyższym przykładzie będzie zawierać wartość łańcuchową. Gdyby tej zmiennej przypisano nową wartość, to nie miałoby to żadnego wpływu na element table. Aby określić wartość właściwości obiektu, należy to zrobić za piośrednictwem odwołania: element.cellPadding = 10 ; 114 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów Jeśli wartość właściwości obiektu sama jest obiektem, to w zmiennej zostanie zapisane odwołanie do tego obiektu bezpośrednio z nim powiązanei: var element = document.getElementById( mojaTablica ); var elementStyle = element.style; elementStyle.fontSize = 18px ; Należy zachować dużą ostrożność, zapisując w zmiennych obiekty DOM. Może się wyda- wać, że zmienna jest jedynie kopią odwołania do obiektu, jednak wszelkie wprowadzane w niej modyfikacje mają wpływ na drzewo węzłów dokumeintu. Patrz także Rozdziały 1., 2. oraz 3. omawiają zagadnienia związane z zapisywaniem w zmiennych wartości różnych typów — łańcuchów znaków, liczb, tablic oraz obiektów; receptura 4.8 przedstawia wpływ długości nazwy zmiennej na efektywniość działania skryptów. 4.2. Tworzenie funkcji o konkretnej nazwie NN 2 IE 3 Problem Chcemy zdefiniować funkcję, którą będzie można wywoływać w dowolnych instrukcjach umieszczonych na stronie. Rozwiązanie Aby stworzyć funkcję, która nie wymaga podawania żadnych argumentów, należy wyko- rzystać podstawowy format deklaracji funkcji: function nazwaFunkcji() { // instrukcje } Jeśli funkcja ma odczytywać argumenty podawane w instrukcji wywołującej funkcję, na- zwy zmiennych parametrycznych należy podać wewnątrz nawiasów umieszczonych za nazwą funkcji: function nazwaFunkcji(zmParam1, zmParam2[, ..., zmParamN]) { // instrukcje } W definicji funkcji można umieścić dowolnie dużo unikalnych identyfikatorów zmiennych parametrycznych. Wewnątrz funkcji zmienne te staną się zmiennymi lokalnymi (przy ich tworzeniu domyślnie jest stosowane słowo kluczowe var). Zgodnie z konwencją luźnego typowania danych stosowaną w JavaScripcie, zmienne parametryczne mogą zawierać war- tości dowolnych typów, określone w instrukcji wywołującej funkcję. 4.2. Tworzenie funkcji o konkretnej nazwie 115 Nawiasy klamrowe otaczające instrukcje tworzące funkcję są wymagane wyłącznie wtedy, gdy w funkcji znajdują się dwie lub więcej instrukcji. Niemniej jednak stosowanie nawia- sów klamrowych we wszystkich funkcjach, nawet tych, które składają się z jednej instrukcji, jest godne polecenia, gdyż poprawia czytelność kodu (konwencja ta jest wykorzystywana w niniejszej książce). W przeważającej większości prezentowanych tu długich skryptów wykorzystywane są funkcje. Niektóre z nich mają argumenty, a inne nie. Wiele funkcji można także znaleźć w przykładach zaczerpniętych z Internetu, a w szczególności w recepturach zawierających biblioteki JavaScriptu, takie jak biblioteka DHTML API przedstawiona w recepturze 13.3. Analiza W JavaScripcie funkcja jest typem obiektu, a nazwa przypisywana funkcji staje się iden- tyfikatorem danego obiektu (przy czym wielkość liter, jakimi nazwa jest zapisana, ma znaczenie). W efekcie słowa kluczowe JavaScriptu nie mogą być używane jako nazwy funkcji; podobnie nie należy nadawać tych samych nazw funkcjom oraz elementom glo- balnym, takim jak zmienne lub (w wypadku przeglądarki Internet Explorer) identyfika- tory elementów HTML. Jeśli na jednej stronie pojawią się dwie funkcje o identycznych nazwach, to dostępna będzie jedynie ta z nich, która w kodzie źródłowym została umiesz- czona jako druga. JavaScript nie udostępnia możliwości przeciążania funkcji i metod, do- stępnych w innych językach programowania, takich jak Java (gdzie metody o identycznych nazwach, różniące się ilością zmiennych parametrycznych, są traktowane jako niezależne metody). W wywołaniu funkcji należy używać nawiasów: mojaFunkcja(); mojaFunkcja2( witam , 42); Czasami trzeba będzie zapisać odwołanie do funkcji we właściwości. Na przykład w wy- padku zapisywania procedury obsługi zdarzeń we właściwości obiektu elementu (patrz rozdział 9.) instrukcja przypisania zawiera właśnie odwołanie do funkcji. Odwołanie takie składa się z samej nazwy funkcji, bez żadnych nawiasów,i argumentów ani cudzysłowów: document.onclick = mojaFunkcja; Takie przypisanie jedynie umożliwia wywoływanie podaniej funkcji w przyszłości. W niektórych językach programowania rozróżniane są fragmenty kodu, które mogą być wykonywane samodzielnie, oraz fragmenty zwracające jakieś wartości. W JavaScripcie istnieje tylko jeden rodzaj funkcji. Jeśli funkcja zawiera instrukcję return, to funkcja ta będzie zwracać wartość, w przeciwnym wypadku wykonanie funkcji nie powoduje zwró- cenia jakiejkolwiek wartości. Funkcje wykorzystywane w sposób, który sprawiłby, że w innych środowiskach byłyby one określane jako podprogramy, zazwyczaj zwracają wartości wyłącznie dlatego, że zostały stworzone w celu pobierania danych lub wyko- nywania jakichś obliczeń, a następnie zwracają uzyskany wynik do instrukcji, w której zostały wywołane. Gdy funkcja zwraca wartość, jej wywołanie jest przekształcane na 116 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów wartość, którą można bezpośrednio zapisać w zmiennej lub użyć jako argumentu wywo- łania innej funkcji lub metody. Możliwość tę przedstawiłem w recepturze 15.6. Jej zada- niem jest wyświetlanie informacji o porze dnia (rano, popołudnie, wieczór) w powitaniu generowanym podczas pobierania strony. Funkcja o nazwie okreslPoreDnia() (zdefi- niowana w nagłówku strony) określa bieżący czas i na jego podstawie zwraca łańcuch zna- ków zawierający określenie pory dnia: function okreslPoreDnia() { var data = new Date(); var godzina = data.getHours(); if (godzina 18) { return Dzień dobry ; } else { return Dobry wieczór ; } } Powyższa funkcja jest wywoływana jako argument wywołania metody document.write(), umieszczającej tekst na wyświetlanej stronie WWW: script language= JavaScript type= text/javascript !-- document.write(okreslPoreDnia() + i witaj ) //-- /script noscript Witamy /noscript w GiantCo. Nie jest ważne, czy ilość argumentów przekazanych w wywiołaniu funkcji będzie taka sama jak liczba zdefiniowanych w niej zmiennych parametrycznych. Na przykład jeśli funkcja jest wywoływana w dwóch różnych miejscach skryptu, a w każdym z nich w jej wywołaniu jest podawana inna ilość argumentów, to wewnątrz niej można się odwoływać do argu- mentów za pośrednictwem właściwości arguments, a nie zmiennych parametrycznych: function mojaFunkcja() { for (var i = 0; i mojaFunkcja.arguments.length; ei++) { // każdy element tablicy arguments jest wartością ejednego // z argumentów, a ich kolejność odpowiada kolejnoeści użytej // w wywołaniu } } Typowe funkcje (za wyjątkiem funkcji zagnieżdżonych, opisanych w recepturze 4.3) umiesz- czane są w globalnym kontekście okna, w którym wyświetlona jest strona zawierająca definicję funkcji. Do takich funkcji globalnych, podobnie jak do zmiennych globalnych, można się odwoływać w skryptach umieszczonych w innych oknach i ramkach. Przykłady odwołań do zawartości innych ramek można znaleźć w rozdziale 7., w części „Ramki jako obiekty okien”. Wielkość funkcji zależy wyłącznie od stylu programowania. Ze względu na łatwość testo- wania i pielęgnacji celowe może być podzielenie długiej funkcji na fragmenty, które same są implementowane jako podprogramy zwracające wartość lub działają jako sekwencja funkcji. Jeśli zauważymy, że w dużej funkcji pewien fragment kodu jest używany kilka razy, to będzie się on doskonale nadawać do usunięcia i zaimplementowania w formie nowej funkcji, która w większej funkcji będzie kilkakroitnie wywoływana. 4.3. Zagnieżdżanie funkcji 117 Kolejną decyzją związaną ze stylem programowania, którą może podejmować autor skryp- tów, jest miejsce zapisu nawiasów klamrowych. W tej książce zastosowano zasadę, że otwierający nawias klamrowy zaczyna się w tym samym wierszu, w którym została podana nazwa funkcji; a nawias zamykający jest tak samo wcięty jak deklaracja funkcji. Niemniej jednak otwierający nawias klamrowy można także zapisywać w wierszu poniżej nazwy funkcji i ewentualnie wyrównać do początku wierszia: function mojaFunkcja() { // instrukcje } Niektórzy programiści uważają, że ten sposób zapisu ułatwia synchronizację par nawiasów klamrowych. W wypadku funkcji zawierających jedną instrukcję można ją zapisywać w tym samym wierszu, w którym została umieszczona nazwa funkcji: function mojaFunkcja() { // instrukcja } Tworząc skrypty, można wykorzystać styl kodowania, który wydaje się nam najbardziej sensowny. Patrz także Receptura 4.1 zawiera informacje o zmiennych przekazywanych „przez odwołanie” oraz „przez wartość” — informacje te dotyczą także argumentów funkcji; receptura 4.3 zawiera informacje na temat zagnieżdżania funkcji. 4.3. Zagnieżdżanie funkcji NN 4 IE 4 Problem Chcemy stworzyć funkcję należącą wyłącznie do jednej, iinnej funkcji. Rozwiązanie Poczynając od przeglądarek IE 4 oraz NN4, istnieje możliwość zagnieżdżania jednej funk- cji wewnątrz drugiej, wykorzystując przy tym składnię przedstawioną na poniższym przykładzie: function mojaFunkcjaA() { // instrukcje function mojaFunkcjaB() { // kolejne instrukcje } } 118 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów W tym wypadku funkcja zagnieżdżona może być używana wyłącznie w instrukcjach umieszczonych wewnątrz funkcji zewnętrznej (należy jednak przeczytać informacje do- tyczące przeglądarki Netscape 6 oraz jej nowszych wersji podane w części „Analiza”). Instrukcje umieszczone w funkcji zagnieżdżonej mają dostęp zarówno do zmiennych deklarowanych w funkcji zewnętrznej, jak i do zmiennych globalnych. Z kolei instrukcje umieszczone w funkcji zewnętrznej nie mają dostępu do zmiennych utworzonych w funk- cji zagnieżdżonej. Analiza Podstawowym celem tworzenia funkcji zagnieżdżonych jest możliwość hermetyzacji czyn- ności związanych z funkcją zewnętrzną poprzez tworzenie podprogramów prywatnych dla tej funkcji zewnętrznej. Ponieważ funkcja zagnieżdżona nie jest bezpośrednio dostępna w przestrzeni globalnej, jej nazwę można wykorzystać zarówno w tej przestrzeni glo- balnej, jak i wewnątrz dowolnej innej funkcji. Netscape 6 (oraz nowsze wersje tej przeglądarki) w logiczny i wygodny sposób rozsze- rzają środowisko funkcji zagnieżdżonych — otóż funkcja zagnieżdżona staje się metodą obiektu funkcji, wewnątrz której została zdefiniowana. Istnieją pewne interesujące efekty uboczne związane ze sposobem implementacji tej możliwości. Przeanalizujmy przykład poniższych funkcji testowych: function mojaFunkcjaA() { var wartoscA = A ; mojaFunkcjaB(); function mojaFunkcjaB() { var wartoscB = B ; alert(wartoscB); alert(wartoscA); } } Wywołanie funkcji mojaFunkcjaA() z głównego poziomu skryptu spowoduje, że zosta- nie wywołana funkcja zagnieżdżona, która posłusznie wyświetli wartości dwóch zmiennych, z których jedna została zdefiniowana w funkcji zewnętrznej, a druga — w wewnętrznej. Przeglądarka Internet Explorer działa tak samo i zgodnie z naszymi oczekiwaniami. Jednak w Netscape 6 istnieje możliwość wywołania funkcji zagnieżdżonej z głównego poziomu skryptu, wykorzystując przy tym funkcję zewnętrzną: mojaFunkcjaA.mojaFunkcjaB(); Ponieważ w tym wypadku funkcja zewnętrzna nie jest wykonywana, zmienna wartoscA nie zostaje zainicjalizowana. W momencie wykonania funkcji mojaFunkcjaB() wartość zmiennej wartoscB jest wyświetlana poprawnie, lecz jest niezdefiniowana (undefined). Oznacza to, że dostęp do zmiennych zdefiniowanych w funkcji zewnętrznej jest możliwy wyłącznie w tym wypadkach, gdy funkcja zagnieżdżona jest wywoływana przez tę funk- cję zewnętrzną. 4.4. Tworzenie funkcji anonimowych 119 Patrz także Receptura 4.1 zawiera informacje o zakresie zmiennych.i 4.4. Tworzenie funkcji anonimowych NN 4 IE 4 Problem Chcemy zdefiniować funkcję w formie wyrażenia, które można by na przykład przekazać jako argument wywołania konstruktora obiektu lub przypiisać wybranej metodzie. Rozwiązanie W takich wypadkach można skorzystać z alternatywnego sposobu definiowania funkcji, który nie wiąże się z koniecznością tworzenia funkcji o konkretnych nazwach (przedsta- wionych w recepturze 4.2). Rozwiązanie to tworzy tak zwane funkcje anonimowe, które od zwyczajnych funkcji różnią się jedynie brakiem identyfikatora. Oto składnia służąca do tworzenia funkcji anonimowych: var jakiesOdwolanie = function() { instrukcje }; Instrukcje umieszczone wewnątrz nawiasów klamrowych to zwyczajna sekwencja instrukcji JavaScriptu oddzielonych od siebie średnikami. W razie potrzeby można także zdefinio- wać zmienne parametryczne: var jakiesOdwolanie = function(zmParam1[, ... zmParamN]) { instrukcje } Funkcje anonimowe należy wywoływać za pomocą odwołaniai: jakiesOdwolanie(); Dyskusja W wyniku utworzenia funkcji anonimowej zwracany jest obiekt typu function. Z tego względu prawą stronę instrukcji można przypisać do dowolnej instrukcji przypisania, w której oczekiwane jest odwołanie do funkcji (nazwa funkcji bez pary nawiasów). Aby zademonstrować te zagadnienia, stworzymy nową wersję uproszczonego konstruktora obiektów z receptury 3.8. Przykład zaczyna się od definicji zwyczajnej funkcji wywoły- wanej jako metoda czterech obiektów tworzonych w skriócony sposób: function pokazDane() { alert( Pracownik + this.imie + ma + this.wiek + e lat. ); } var pracownicyBD = [{imie: Alicja , wiek:23, pokaz:pokazDane}e, {imie: Franek , wiek:32, pokaz:pokazDanee}, {imie: Janka , wiek:28, pokaz:pokazDane}e, {imie: Stefan , wiek:24, pokaz:pokazDanee}]; 120 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów Warto zwrócić uwagę na to, w jaki sposób w konstruktorze obiektów odwołanie do metody pokazDane() jest przypisywane do metody o nazwie pokaz. Wywołanie tej metody dla dowolnego z obiektów jest realizowane w następujący siposób: pracownicyBD[2].pokaz(); Na potrzeby naszego przykładu do pierwszego z obiektów przypiszemy funkcję anoni- mową. Funkcja anonimowa jest dostosowana do potrzeb pierwszego obiektu i zastępuje odwołanie do funkcji pokazDane(): var pracownicyBD = [{imie: Alicja , wiek:23, pokaz:function() {alert( Dane o Aleicji nie są dostępne dla ogółu. )}}, {imie: Franek , wiek:32, pokaz:pokazDanee}, {imie: Janka , wiek:28, pokaz:pokazDane}e, {imie: Stefan , wiek:24, pokaz:pokazDanee}]; Teraz wywołanie metody pracownicyBD[0].pokaz() spowoduje wyświetlenie spe- cjalnego okienka dialogowego. Wynika to z faktu, iż funkcja pokazDane() została za- stąpiona przez funkcję anonimową. W ten sposób uniknęliśmy konieczności tworzenia zewnętrznej funkcji mającej własny identyfikator, który działałby wyłącznie jako pośred- nik pomiędzy nazwą metody pokaz oraz instrukcjami wykonywanymi w momencie wywołania tej metody. Patrz także Receptura 4.2 pokazuje sposób tworzenia tradycyjnych funkicji o określonej nazwie. 4.5. Opóźnianie wywołania funkcji NN 2 IE 3 Problem Chcemy wykonać funkcję w niedługiej przyszłości, po upłyinięciu zadanego czasu. Rozwiązanie Aby jednokrotnie wywołać funkcję po upłynięciu zadanej ilości milisekund, należy użyć metody window.setTimeout(). Metoda ta ustawia licznik czasu, który uruchomi wska- zaną funkcję. Funkcja, którą należy wykonać jest określana za pomocą łańcucha znaków zawierającego jej nazwę oraz parę nawiasów, jak pokaizano na poniższym przykładzie: var idOdliczania = setTimeout( mojaFunkcja() , 5000); Metoda setTimeout() zwraca identyfikator „operacji odliczania”, który należy zapisać w zmiennej globalnej. Jeśli w dowolnej chwili przed uruchomieniem funkcji konieczne będzie przerwanie operacji, będzie to można zrobić, wywołując metodę clearTimeout() i przekazując do niej zapamiętany wcześniej identyfikiator: 4.5. Opóźnianie wywołania funkcji 121 clearTimeout(idOdliczania); Po uruchomieniu odliczania dalsze operacje związane z realizacją skryptu mogą być nor- malnie wykonywane, dlatego też dobrym rozwiązaniem jest umieszczanie wywołania me- tody setTimeout() jako ostatniej instrukcji w funkcji. Analiza Jest bardzo ważne, aby zrozumieć, czego metoda setTimeout() nie robi — otóż nie wstrzymuje ona realizacji całego skryptu na podany cizas. Zamiast tego metoda ta ustawia wewnętrzny licznik czasu, który powoduje wykonanie funkcji o podanej nazwie po upłynięciu zadanej ilości milisekund. Na przykład jeśli two- rzymy pokaz slajdów, w którym należy przejść na inną stronę, jeśli w ciągu 15 sekund użytkownik nie wykona żadnej operacji, to początkowo odliczanie można rozpoczynać w procedurze obsługi zdarzeń onload oraz w funkcji rozpocznijOdliczanie(): var idOdliczania; function przejdzNaStrone() { location.href = slajd3.html ; } function rozpocznijOdliczanie() { clearTimeout(idOdliczania); idOdliczania = setTimeout( przejdzNaStrone() , 15000); } W takim wypadku zapewne chcielibyśmy także określić, na przykład procedurę obsługi zdarzeń onmousemove, aby każda operacja wykonana przez użytkownika za pomocą my- szy powodowała rozpoczęcie odliczania od początku: window.onmousemove = rozpocznijOdliczanie; Funkcja rozpocznijOdliczanie() automatycznie usuwa wcześniejszą operację zanim funkcja przejdzNaStrone() zostanie wywołana, a następnie rozpoczyna nową operację odliczania. Jeśli funkcja wywoływana z opóźnieniem wymaga podania argumentów, to można wyge- nerować łańcuch znaków zawierający niezbędne wartości, i to nawet w wypadku, gdy wewnątrz funkcji wartości te są przechowywane w zmiennych. Jednak wartości te nie mogą być odwołaniami do obiektów — to bardzo ważne. Argumenty funkcji muszą mieć postać, która pozwoli na zapisanie ich w formie łańcucha znaków, gdyż pierwszym argumentem wywołania metody setTimeout() musi być właśnie łańcuch. Receptura 8.4 przedstawia sposób przekazywania nazw obiektów DOM związanych z formularzami, stanowiący rozwiązanie umożliwiające przekazywanie odwołań do obiektów. Najtrud- niejszym zadaniem jest odpowiednie zapisanie cudzysiłowów: function czyToAdresEmail(element) { var str = element.value; var wr = /^[w-]+(.[w-]+)*@([w-]+.)+[a-zA-Z]{2,7}$/; if (!str.match(wr)) { alert( Sprawdź format zapisu adresu poczty eleketronicznej. ); setTimeout( fokusDoElementu( + element.form.neame + , + element.name + ) , 0); 122 Rozdział 4. Zmienne, funkcje i sterowanie wykonywaniem skryptów return false; } else { return true; } } W powyższym przykładzie funkcja fokusDoElementu() wymaga przekazania dwóch argumentów koniecznych do określenia poprawnego odwołania zarówno do obiektu form, jak i input. Ponieważ pierwszym argumentem metody setTimeout() musi być łańcuch znaków, konieczne jest wymuszenie, by argumenty wywołania metody fokusDoEle- mentu() również były traktowane jako łańcuchy znaków. Do tego celu służą apostrofy umieszczane w rozbudowanej instrukcji konkatenacji. (Zerowa wartość czasu podana w wywołaniu metody setTimeout() jest poprawnym rozwiązaniem dla danej aplikacji. Więcej informacji na ten temat można znaleźć w receptuirze 8.4.) Przy próbie znalezienia możliwości stworzenia prawdziwego opóźnienia pomiędzy instruk- cjami wykonywanymi wewnątrz funkcji lub pomiędzy fragmentami funkcji okazuje się, że JavaScript nie udostępnia żadnych takich rozwiązań porównywalnych z poleceniami stosowanymi w innych językach programowania. Ten sam efekt można jednak uzyskać, dzieląc oryginalną funkcję na kilka mniejszych, przy czym każda z nich będzie odpowia- dać fragmentowi funkcji, który należy wykonać z opóźnieniem. Funkcje należy następnie połączyć ze sobą, umieszczając na końcu pierwszej metodę setTimeout() wywołującą kolejną z funkcji po upłynięciu zadanego czasu: function funkcjaGlowna() { // instrukcje poczatkowe setTimeout( funkcjaCzesc2() , 10000); } function funkcjaCzesc2() { // instrukcje początkowe setTimeout( funkcjaKoniec() , 5000); } function funkcjaKoniec() { // instrukcje kończące przetwarzanie } W kodzie skryptu powiązane ze sobą funkcje nie muszą być umieszczone bezpośrednio jedna za drugą. Jeśli wszystkie te funkcje muszą operować na tym samym zbiorze wartości, to wartości te można przekazywać z jednej funkcji do drugiej jako argumenty (zakładając, że nie będą one obiektami) bądź zapisać w zmiennych globailnych. Jeśli wartości są ze sobą powiązane, może to przemawiać za zdefiniowaniem niestandardowego obiektu i zapi- saniem tych wartości w jego właściwościach opatrzonych odpowiednimi nazwami. Dzięki temu łatwiej będzie już na pierwszy rzut oka zorientować się, w jaki sposób poszczególne segmenty funkcji wykorzystują wartości lub jak je modyfiikują. Kolejna metoda JavaScriptu — setInterval() — działa podobnie do metody setTi- meout(), lecz cyklicznie wywołuje wskazaną funkcję, aż jawnie każemy jej przestać (przy użyciu metody clearInterval()). Drugi argument wywołania tej metody (liczba całko- wita określająca ilość milisekund) określa, co jaki czasi będzie wywoływana wskazana funkcja. 4.6. Wykonywanie różnych kodów w zależności od warunku 123 Patrz także Receptura 8.4 przedstawia sposób wykorzystania metody setTimeout() w celu syn- chronizacji wykonywania skryptu; receptura 10.11 przedstawia sekwencję trzech funkcji inicjalizacyjnych połączonych ze sobą za pomocą wywołań metody setTimeout(), zapew- niającej odpowiednią synchronizację ich wywołań; receptura 12.3 przedstawia przykład wykorzystania niezależnej zmiennej licznikowej, zapewniającej, że funkcja zostanie wywo- łana ściśle określoną ilość razy; receptury 13.9 oraz 13.10 pokazują sposoby wykorzystania metody setInterval() do tworzenia animacji. 4.6. Wykonywanie różnych kodów w zależności od warunku NN 4 I
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

JavaScript i DHTML. Receptury
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ą: