R-21-07, Programowanie, ! HTML, HTML 4

Rozdział 21.
Użycie
Dynamicznego HTML-a

W poprzednim rozdziale dowiedziałeś się, jak można tworzyć formularze służące do zbierania informacji od osób odwiedzających witrynę WWW. Pod różnymi postaciami formularze były dostępne od samego początku istnienia języka HTML, a ich działanie i wygląd jest niemal identyczne we wszystkich rodzajach przeglądarek. W rzeczywistości nie musisz się zbytnio przejmować tym, kto będzie, a kto nie będzie mógł poprawie wyświetlić witryny.

W tym rozdziale zostawimy za sobą stosunkowo spokojne wody formularzy i obierzemy kurs na burzliwe morza Dynamicznego HTML-a. A zatem, przygotuj się dobrze!

Dynamiczny HTML udostępnia całkowicie unikalną możliwość, pozwala bowiem na modyfikowanie stron WWW w czasie, gdy są one wyświetlane w przeglądarce. Przy użyciu standardowego języka HTML strony WWW są pobierane przez przeglądarkę, wyświetlane i pozostają w niezmienionej postaci, aż do momentu kliknięcia hiperpołączenia lub przesłania formularza. To bardzo prosty schemat działania, który jest jednak dosyć statyczny i nieco nużący.

Twórcy witryn starali się ulepszać statyczne strony WWW, używając wielu różnych technologii, wykraczających poza ramy języka HTML. Przez długie lata skrypty CGI stanowiły metodę zapewnienia interakcji z użytkownikami odwiedzającymi strony WWW. Można także umieszczać w stronach specjalne pliki obsługiwane przez aplikacje Shockwave oraz Flash zapewniające możliwość wyświetlania animacji i prowadzenia interakcji z użytkownikami. Możliwości funkcjonalne porównywalne z aplikacjami dają aplety pisane w języku Java oraz komponenty ActiveX. Jednak wszystkie te metody wymagają użycia specjalnych dodatków lub „wirtualnych maszyn” (co może być dosyć trudne) i zazwyczaj wydłużają czas ładowania strony.

Dynamiczny HTML to jednak coś zupełnie innego. Powszechnie wiadomo, że DHTML pozwala tworzyć strony WWW, które wyglądają i działają, podobnie jak zwyczajne programy używane na komputerze, przy czym interfejsem użytkownika jest przeglądarka WWW, a dodatkowo wykorzystywane są zewnętrzne rozwiązania programistyczne. Czy wyobrażasz sobie, jakie to daje możliwości?

Mam nadzieję, że tak, gdyż przyda Ci się ten entuzjazm, aby poradzić sobie z wadami DHTML-a. Szczerze mówiąc, wprowadzają one czasami wiele zamieszania. Aby dotrzeć do jak najszerszej publiczności (oczywiście w rozsądnych granicach), należy wziąć pod uwagę różnice pomiędzy poszczególnymi przeglądarkami oraz sposobem implementacji różnych technologii internetowych, takich jak HTML, kaskadowe arkusze stylów oraz skrypty.

W tym rozdziale znajdziesz bardzo wiele informacji, a zatem zabierzmy się do pracy. W tym rozdziale:

zdefiniuję Dynamiczny HTML oraz technologie, które pozwalają na korzystanie z niego,
omówię podstawy języka JavaScript,
wytłumaczę czym jest DOM — model obiektów dokumentu,
przedstawię zasady tworzenia procedur wykorzystujących możliwości DHTML i działających w różnych przeglądarkach, na przykład, określanie rodzaju przeglądarki oraz tworzenie odwołań DOM,
przedstawię sposób tworzenia rozwijalnych menu oraz DHTML-owe wersji gry w kółko i krzyżyk.

Czym w zasadzie jest DHTML?

Najprościej rzecz ujmując, Dynamiczny HTML używa elementów klasycznego języka HTML w celu tworzenia stron WWW, w których postać i położenie elementów określane są za pomocą kaskadowych arkuszy stylów i których zawartość oraz wygląd można zmieniać przy użyciu skryptów, bez konieczności ponownego pobierania strony z serwera. Dynamiczny HTML nie jest pojedynczym rozwiązaniem, to grupa techno-logii, które można wykorzystywać do uzyskania efektów interaktywności. Azatem co można zrobić, wykorzystując DHTML? Możliwości są wręcz nieskończone! Poniżej podam kilka z nich, aby dodatkowo wzbudzić Twoje zainteresowanie:

zmiana położenia obiektów wyświetlanych na stronie WWW,
wyświetlanie i ukrywanie elementów,
tworzenie list, które się rozwijają i chowają w momencie wyboru elementu,
dynamiczne modyfikowanie kolorów i wielkości elementów stron WWW,
zapewnienie możliwości funkcjonalnych typu „przeciągnij i upuść” udostępnianych przez nowoczesne systemy operacyjne o graficznym interfejsie użytkownika (takie jak Windows lub Macintosh).

Dynamiczny HTML pojawił się w momencie udostępnienia tak zwanych „czwórek”. World Wide Web Consortium (W3C) udostępniło HTML 4 oraz wydało jego oficjalną rekomendację mniej więcej w tym samym czasie, gdy na rynku pojawiły się czwarte wersje przeglądarek współzawodniczących ze sobą firm Netscape oraz Microsoft, czyli Netscape Navigator 4 oraz Internet Explorer 4. W tym czasie przypada okres największej aktywności związanej z rozwojem HTML. Czwarta wersja tego języka promowała kilka nowych możliwości, które miały zapewnić lepszą integrację z CSS —kaskadowymi arkuszami stylów oraz usprawnioną obsługę zdarzeń generowanych przez czynności wykonywane przez użytkownika. Firmy Microsoft i Netscape bardzo mocno współzawodniczyły ze sobą w „wojnie przeglądarek”, prowadzonej o zdobycie jak największego udziału na rynku. Jednak wynik tej batalii był zupełnie inny, w efekcie doprowadziła ona do powstania poziomu interaktywności stron WWW, który wcześniej mogło zapewnić wyłącznie użycie oprogramowania niezależnego od przeglądarek. Tak właśnie powstał DHTML.

0x01 graphic

Dynamiczny HTML (DHTML) to grupa technologii rozszerzających interaktywność oraz dynamizm stron WWW, bez konieczności wykorzystania zewnętrznych obiektów bądź programów.

Aby możliwe było wykorzystanie DHTML, przeglądarka WWW musi obsługiwać trzy kluczowe technologie internetowe:

język HTML,
arkusze stylów,
skrypty.

Konieczność użycia języka HTML jest zupełnie oczywista. Pamiętaj jednak, że HTML 4 wprowadzał nowe elementy, takie jak div i span oraz atrybuty, takie jak id oraz name. Te znaczniki i atrybuty pozwalają na lepszą strukturalizację i łatwiejsze formatowanie stron WWW, a jednocześnie zapewniają lepszą integrację z arkuszami stylów oraz ułatwiają możliwości manipulowania elementami stron przy użyciu skryptów. Niemniej jednak to poszerzenie możliwości języka miało swoje wady. Nawet jeszcze dzisiaj nie wszyscy twórcy najczęściej używanych przeglądarek w spójny sposób zaimplemen-towali język HTML 4. Ten wątek bardzo często będzie się pojawiał w tym rozdziale.

0x01 graphic

Największym wyzwaniem, wiążącym się z użyciem DHTML, jest ominięcie wszelkich różnic występujących nie tylko w języku HTML, lecz także we wszystkich innych technologiach związanych z DHTML. Tylko w ten sposób można bowiem tworzyć strony działające identycznie we wszystkich przeglądarkach. To zadanie, choć trudne, jest jednak wykonalne.

Arkusze stylów są wspaniałym narzędziem, zwłaszcza gdy nauczysz się z nich korzystać; stanowią także kluczowy element DHTML. Choć z technicznego punktu widzenia, DHTML nie jest zależny od żadnego konkretnego typu arkuszy stylów, to jednak standardem jest oficjalna technologia W3C, czyli kaskadowe arkusze stylów (CSS — Cascading Style Sheets). Arkusze stylów CSS poziomu 2 (CSS2) pozwalają na formatowanie elementów stron WWW przy użyciu właściwości określających takie parametry wyglądu, jak kolor, wielkość, czcionka, odstępy oraz położenie elementu na stronie. Dokładniejszy opis CSS znajdziesz w rozdziale 10. — „HTML i arkusze stylów”.

DHTML przenosi jednak arkusze stylów na nowy, wyższy poziom. Wcześniej tworzyłeś reguły stylów lub umieszczałeś element strony w konkretnym miejscu i zapominałeś o nim. Teraz, dzięki DHTML, możesz dynamicznie zmieniać styl elementu oraz jego położenie. Wciąż jednak istnieją różnice pomiędzy implementacjami CSS w Internet Explorerze oraz Netscepe Navigatorze. W obu przeglądarkach implementacja specyfikacji CSS nie tylko nie jest pełna, lecz co gorsza, jej zaimplementowane fragmenty różnią się od siebie. Okropność!

Ostatnim elementem, stanowiącym rodzaj spoiwa łączącego wszystkie części składające się na DHTML, są technologie skryptowe. Dzięki możliwości uruchamiania skryptów w momencie załadowania strony, w odpowiedzi na poczynania użytkownika a nawet po opuszczeniu witryny, technologie te zapewniają dynamiczny charakter DHTML.

0x01 graphic

Jeśli nie w pełni zrozumiałeś, co miałam na myśli, mówiąc o „niespójnych implementacjach standardów w poszczególnych przeglądarkach”, to spieszę wyjaśnić, iż właśnie ze względu na te różnice poleganie na „oficjalnych” specyfikacjach standardów DHMTL jest bardzo niebezpieczne. Oznacza to, że zawsze należy przeczytać dokumentacją przeglądarki, na której mają być wyświetlane strony WWW i sprawdzić, czy dana przeglądarka obsługuje rozwiązania, których chcesz użyć.

Najczęściej stosowanym językiem skryptowym jest JavaScript. Był to pierwszy język skryptowy używany do obsługi stron WWW i aktualnie jest obsługiwany przez największą ilość różnych przeglądarek. Choć można tworzyć rozwiązania DHTML, wykorzystując inne języki skryptowe, takie jak VBScript, to polecałabym raczej użycie języka JavaScript, chyba że tworzony produkt przeznaczony jest do środowiska, w którym wykorzystywana jest wyłącznie przeglądarka firmy Microsoft (z czym się w praktyce jeszcze nigdy nie spotkałam).

Gdy przedstawię przykłady wykorzystania DHTML, przekonasz się, że w większości przypadków polega ono na tworzeniu skryptów modyfikujących styl elementów stron WWW, ich położenie oraz wykonujących różnego typu obliczenia gwarantujące „dynamizm” stron. Z tego względu, w dalszej części rozdziału umieściłam krótkie omówienie języka JavaScript. Choć bez wątpienia nie jest to wyczerpujące omówienie języka JavaScript, to jednak powinno Ci pozwolić przeanalizować i zrozumieć podane przykłady.

I jeszcze dwie, ostatnie informacje dotyczące tego, czym jest DHTML. DHTML (a w za-sadzie jego skryptowa część) bazuje na wykorzystaniu modelu obiektów dokumentu (DOM — Document Object Model). Służy on do identyfikacji, tworzenia i manipulowania obiektami umieszczonymi na stronie WWW. Na przykład, aby móc manipulować jakimkolwiek elementem strony WWW, dajmy na to obrazkiem, musisz go najpierw zidentyfikować. Podobnie, konieczne jest określenie stylu elementu strony, aby można go było zmienić. Do tego właśnie służy DOM. Stanowi on swoisty pomost łączący skrypt oraz elementy strony WWW. Choć W3C aktualnie pracuje nad oficjalną specyfikacją DOM, to jednak każda z przeglądarek opracowała swój własny, unikalny DOM. W dalszej części rozdziału omówiłam różne wersje DOM.

Do śledzenia czynności wykonywanych przez przeglądarkę oraz poczynań użytkownika, DHTML wykorzystuje obsługę zdarzeń. Po załadowaniu strony generowane jest zdarzenie onLoad. Podobnie, gdy użytkownik kliknie przycisk umieszczony na formularzu, generowanych jest kilka zdarzeń, które Ty, jako autor stron DHTML, możesz wykorzystać do uruchomienia odpowiednich skryptów. Jak niemal wszystkie aspekty DHTML, także i obsługa zdarzeń w przeglądarkach Microsoft Internet Explorer oraz Netscape Navigator została zaimplementowana w całkowicie odmienny sposób. Zagadnienia związane z obsługą zdarzeń omówię szczegółowo w dalszej części rozdziału.

Prezentacja języka JavaScript

JavaScript jest językiem skryptowym opracowanym przez firmy Netscape oraz Sun Microsystems (w której powstał język Java). Jego przeznaczeniem jest udostępnienie możliwości funkcjonalnych, których nie daje sam język HTML. HTML jest bowiem językiem formatowania dokumentu i sam w sobie nie dysponuje żadnymi mechanizmami umożliwiającymi wykonywanie zadań „programistycznych”. Weźmy, na przykład, poniższy fragment kodu HTML:

Powyższy kod HTML informuje przeglądarkę, iż ma wyświetlić obrazek zapisany w pliku obrazek.gif, w obszarze o szerokości 300 i wysokości 100 pikseli. Jeśli się nad tym głębiej zastanowisz, to dojdziesz to wniosku, iż jest to dosyć poważne ograniczenie. Oprócz hiperpołączeń oraz elementów formularzy, nie można bowiem manipulować żadnymi informacjami oraz obiektami wyświetlonymi na stronie WWW, ani odpowiadać na poczynania użytkowników.

0x01 graphic

JavaScript to język pozwalający na pisanie skryptów, niewielkich programów, których nie trzeba kompilować, umieszczanych w stronach WWW i wykonywanych przez przeglądarkę.

Języki skryptowe, a w szczególności JavaScript, mają całkowicie odmienne zadanie niż język HTML. Z założenia są to bowiem języki programowania. Oznacza to, że skrypty mogą przeprowadzać obliczenia, manipulować obiektami oraz odpowiadać na przeróżne czynności wykonywane przez użytkownika. Na przykład, skrypty mogą sprawdzać poprawność danych wpisanych w formularzach HTML, odpowiadać na czynności wykonywane przy użyciu myszy i klawiatury oraz dynamicznie zmieniać położenie i styl elementów wyświetlanych na stronach WWW.

W odróżnieniu od formalnych języków programowania, takich jak C, C++ oraz Java, języki skryptowe nie wymagają kompilacji programów do postaci kodu maszynowego przed ich wykonaniem. Skrypty są pisane w formie zwyczajnego tekstu, za ich interpretację i wykonanie odpowiada program, a nie procesor komputera. W przypadku stron WWW programem odpowiedzialnym za interpretację i wykonanie skryptów umieszczonych lub dołączonych do strony WWW jest przeglądarka. Skrypty są interpretowane i wykonywane podczas ładowania strony.

0x01 graphic

To bardzo ważna informacja, którą warto powtórzyć i zapamiętać. Niektóre starsze modele przeglądarek nie są w stanie wyświetlać wielu nowych elementów dostępnych w języku HTML 4. Podobnie nie wszystkie przeglądarki są w stanie interpretować najnowsze wersje języka JavaScript. Pamiętaj, że za wykonanie skryptu odpowiada przeglądarka. Nie będziesz w stanie zmusić przeglądarki do wykonania skryptu, którego nie rozumie.

Podstawy języka JavaScript

Niestety, w tak krótkim rozdziale nie jestem w stanie przekazać wszystkich informacji dotyczących języka JavaScript. Będę się jednak starała, aby przekazane informacje pozwoliły Ci zrozumieć zasady działania języka, abyś mógł przeanalizować podane przykłady i zrozumieć sposób ich działania.

W zasadzie skrypty są sekwencją instrukcji, które informują program wykonujący skrypt (w naszym przypadku jest to przeglądarka), jakie czynności należy wykonać. Instrukcjami tymi mogą być proste polecenia określające wartość zmiennej, na przykład:

var x = 14;

lub bardziej złożone konstrukcje, takie jak definicje funkcji:

function init() {

if (x == 14) {

alert(x);

}

else {

alert("X jest różne od 14!");

}

Zwróć uwagę, iż każda instrukcja jest zakończona znakiem średnika (;). Dodatkowo instrukcje można grupować, zapisując je wewnątrz nawiasów klamrowych ({}). W przedstawionym powyżej fragmencie kodu nawiasy klamrowe zostały użyte do zgrupowania instrukcji w funkcji o nazwie init(). Nawiasy klamrowe zostały także wykorzystane w instrukcjach if oraz else, gdzie służą do określenia kodu przynależnego do każdej z tych instrukcji.

W kodzie skryptów pisanych w języku JavaScript można także umieszczać informacje, które nie będą interpretowane. Są to tak zwane komentarze. Służą do wyjaśniania przeznaczenia i sposobu działania fragmentów skryptu. Komentarze obejmujące jedną linię tekstu rozpoczynają się od dwóch znaków ukośnika (//). Można je umieszczać na samym początku linii, na przykład:

// Ta zmienna służy do przechowywania informacji tymczasowych

var x;

lub po zakończeniu instrukcji, jak pokazałam na poniższym przykładzie:

var x; // Zmienna pomocnicza

Interpreter skryptu pomija wszystkie znaki umieszczone po dwóch znakach ukośnika, należy zatem być ostrożnym i nie poprzedzać komentarzem żadnego istotnego kodu.

Przy użyciu jednoliniowych komentarzy można także tworzyć długie bloki komentarzy, takie jak ten przedstawiony poniżej:

// Skrypt stworzony 9 października 1999 roku

// Copyright HELION

// Wszystkie prawa zastrzeżone

Innym rozwiązaniem jest użycie specjalnych komentarzy wieloliniowych. Tworzy się je, umieszczając w pierwszej linii komentarza kombinację znaków składającą się ze znaku ukośnika i gwiazdki (/*) oraz kończąc komentarz kombinacją znaków: gwiazdka, ukośnik (*/). Taki wieloliniowy komentarz przedstawiłam na poniższym przykładzie:

/* Skrypt stworzony 9 października 1999 roku

Wszystkie prawa zastrzeżone */

Jednym z najwygodniejszych narzędzi programistycznych są zmienne. Pozwalają one na zapisanie wartości w umownym „pojemniku” i operowanie na danych poprzez odwoływanie się do tych „pojemników”. Aby zadeklarować zmienną, wystarczy podać słowo kluczowe var a po nim nazwę zmiennej, na przykład:

var mojaZmienna;

0x01 graphic

W języku JavaScript uwzględniana jest wielkość znaków, oznacza to, że zmienna mojaZmienna to nie to samo co mojazmienna ani Mojazmienna.

Równie łatwo można zadeklarować zmienną i jednocześnie zapisać w niej wartość. W tym przypadku należy posłużyć się kodem o następującej postaci:

var mojaZmienna = 1999;

JavaScript udostępnia także operatory pozwalające na przeprowadzanie obliczeń matematycznych oraz porównań. Najczęściej stosowane operatory oraz ich działanie opisałam w tabeli 20.1.

Tabela 21.1.

Najczęściej używane operatory matematyczne oraz operatory porównań

Operatory matematyczne		Operatory porównania oraz logiczne
Symbol	Opis	Symbol	Opis
+	Dodawanie	=	Przypisanie
-	Odejmowanie	==	Równy
*	Mnożenie	<	Mniejszy niż
/	Dzielenie	>	Większy niż
++	Inkrementacja (+1)	<=	Mniejszy lub równy
--	Dekrementacja (-1)	>=	Większy lub równy
		!=	Różny
		&&	Logiczna koniunkcja (AND)
		\|\|	Logiczna alternatywa (OR)

Przedstawiony poniżej fragment kodu deklaruje trzy zmienne, określa wartości dwóch spośród nich, a następnie przypisuje trzeciej zmiennej sumę wartości dwóch pozostałych zmiennych:

var xPos = 142;

var yPos = 15;

var Pos;

Pos = xPos + yPos;

Aby powiększyć (inkrementować) lub pomniejszyć (dekrementować) o jeden wartość zmiennej, należy użyć odpowiedniego operatora wraz z nazwą zmiennej, jak pokazałam w poniższym przykładzie:

Pos++;

Poniższa instrukcja powiększa o jeden wartość zmiennej Pos.

Do porównywania wartości służą operatory logiczne.

if (Pos == 150) {

wywołajInnąFunckję();

}

I tak dotarliśmy do kolejnego, niesłychanie ważnego punktu: rozgałęzień warunkowych. Najpopularniejszą instrukcją tego typu dostępną w języku JavaScript jest instrukcja if. Można jej użyć do porównania dwóch wartości (lub przeprowadzenia kilku porównań) i wykonania odpowiednich czynności w zależności od wyniku porównania. Przedstawiony powyżej fragment kodu porównuje wartość zmiennej Pos z liczbą 150. Jeśli wartość zmiennej jest równa 150, to wykonywany jest kod umieszczony w nawiasach klamrowych. Jeśli jednak wartość zmiennej nie będzie równa 150, to skrypt będzie wykonywany dalej, jakby się nic nie stało. Gdy chcesz obsłużyć wszystkie możliwe sytuacje, to możesz wykorzystać kilka instrukcji if lub posłużyć się instrukcją else, przedstawioną w poniższym przykładzie:

if ((Pos >= 150) && (Pos <= 200)) {

funkcja1();

}

else {

funkcja2();

}

W instrukcji if wartość zmiennej Pos jest porównywana z dwiema wartościami: 150 oraz 200. Jeśli wartość zmiennej jest większa lub równa 150 i jednocześnie mniejsza lub równa 200 (innymi słowy, jeśli wartość zmiennej Pos należy do przedziału od 150 do 200), to zostanie wykonana funkcja1. Jeśli warunek logiczny umieszczony w instrukcji if nie zostanie spełniony, to zostanie wykonana funkcja2.

0x01 graphic

Rozgałęzienia warunkowe dają możliwość utworzenia kilku alternatywnych ścieżek wykonania skryptu. Ścieżka, według której zostanie wykonany skrypt, będzie wybrana na podstawie wartości zwróconej przez wyrażenie logiczne, jak, na przykład, (X > Y).

Podczas wykonywania obliczeń i porównań można używać nawiasów; służą one do grupowania wartości i zmiennych oraz umożliwiają określenie kolejności, w jakiej należy wykonać obliczenia lub porównania. W poniższym przykładzie wyrażenia Pos >= 150 oraz Pos <= 200 są interpretowane w pierwszej kolejności, a następnie ich wyniki są ze sobą porównywane przy użyciu logicznego operatora AND:

((Pos >= 150) && (Pos <= 200))

Podobnie przy obliczaniu wartości wyrażenia:

(((156 * 4 / 24) + 99) * 24)

są uwzględniane nawiasy. W tym przypadku liczba 156 jest mnożona razy 4, następnie iloczyn obu liczb jest dzielony przez 24. Do otrzymanej wartości jest następnie dodawana liczba 99, a otrzymany wynik jest mnożony przez 24. W wyniku otrzymujemy liczbę 3000 (która przez całkowicie nieprawdopodobny, choć szczęśliwy przypadek, jest całkiem „okrągłą” liczbą).

0x01 graphic

Jeśli spotkasz się z wyrażeniami zawierającymi wiele poziomów zagnieżdżonych nawiasów, powinieneś je analizować od wewnątrz. Tworząc takie skomplikowane wyrażenia, pamiętaj także, iż liczba nawiasów zamykających musi odpowiadać liczbie nawiasów otwierających.

Prócz skomplikowanych wyrażeń nawiasy są także używane przy tworzeniu oraz wywoływaniu funkcji. W tym przypadku, w nawiasach podaje się parametry, tak zwane argumenty, konieczne do wykonania funkcji. W poniższym przykładzie przedstawiona została prosta funkcja, wyświetlająca okienko dialogowe prezentujące wartość zmiennej uzytkownik, która w tym przypadku zawiera łańcuch znaków Laura:

var uzytkownik = "Laura";

function wyswietlUzytkownika(uzytkownik) {

alert(uzytkownik);

}

Aby wywołać tę funkcję, wystarczy podać w skrypcie jej nazwę oraz umieszczoną w nawiasach nazwę zmiennej uzytkownik:

wyswietlUzytkownika(uzytkownik);

Wiele funkcje nie ma żadnych argumentów, jednak przy ich tworzeniu i tak trzeba wpisać nawiasy. Na przykład, podana poniżej funkcja init() nie wymaga podania żadnych argumentów, lecz w jej wywołaniu i tak trzeba będzie umieścić parę nawiasów.

function init() {

tworzTablice();

animujTytul();

}

I tak oto dotarliśmy do kolejnego zagadnienia, którym są funkcje. Zazwyczaj skrypty są wykonywane od góry do dołu, w kolejności, w jakiej zostały podane poszczególne instrukcje. Funkcje pozwalają jednak na złamanie tego naturalnego toku wykonywania skryptu i stworzenie bloków kodu wywoływanych wyłącznie w momencie jawnego odwołania się do nich z innej części skryptu. Przyjrzyj się ostatniemu podanemu przykładowi. Funkcja init() jest oddzielona od pozostałej części skryptu i jest wykonywana wyłącznie w momencie, gdy zostanie wywołana. Właśnie dlatego przy pisaniu skryptów funkcje są używane do kontroli przebiegu wykonywania skryptu oraz odpowiadania na unikalne zdarzenia.

0x01 graphic

Funkcja to blok kodu oddzielony od normalnego toku wykonywania skryptu. Funkcje są wykonywane wyłącznie w przypadku ich jawnego wywołania z innej części skryptu lub z kodu strony HTML.

Jeśli jeszcze nie zauważyłeś, to chciałam Ci zwrócić uwagę, iż funkcje tworzy się, podając słowo kluczowe function oraz nazwę funkcji. Pamiętaj także o podaniu pary nawiasów, otwierającego i zamykającego, w których zapisywana jest lista argumentów. Nawiasy te należy podać nawet, jeśli konkretna funkcja nie pobiera żadnych argumentów. Za listą argumentów należy zapisać otwierający nawias klamrowy. Po nim podawane są wszelkie instrukcje, które funkcja ma wykonać. Później należy zakończyć ją zamykającym nawiasem klamrowym.

Wewnątrz funkcji można umieszczać dowolne instrukcje, na przykład, instrukcję warunkową if lub pętle:

function okreslPolozenie() {

if ((Pos >= 150) && (Pos <= 200)) {

funkcja1();

}

else {

funkcja2();

}

Upewnij się, że ilość otwierających i zamykających nawiasów klamrowych użytych wewnątrz funkcji jest identyczna. W powyższym przykładzie jedna para nawiasów klamrowych rozpoczyna i kończy funkcję okreslPolozenie. Wewnątrz niej instrukcje if oraz else także mają po jednej parze odpowiadających sobie nawiasów klamrowych. A zatem wszystko się zgadza. Są trzy otwierające nawiasy klamrowe oraz trzy nawiasy zamykające. W przeciwnym przypadku, gdyby ilość nawiasów zamykających nie odpowiadała ilości nawiasów otwierających, podczas wykonywania skryptu zostałby zgłoszony błąd.

Jak na razie poznałeś podstawy składni języka JavaScript oraz kilka bardziej szczegółowych informacji na jego temat. Umiesz dodawać wartości i zapisywać je w zmiennych, musisz nauczyć się, jak napisać jakikolwiek przydatny skrypt. Brakującym ogniwem jest obiekt. Obiekty to proste kolekcje właściwości i metod. Należy je sobie wyobrazić jako „pojemniki” przechowujące informacje i jednocześnie wyposażone w sposoby manipulowania nimi.

0x01 graphic

Obiekty to kolekcje właściwości i metod, które przechowują informacje oraz dysponują możliwością manipulowania nimi.

Właściwości opisują obiekt, natomiast metody udostępniają możliwości manipulowania właściwościami z poziomu skryptu. Załóżmy, że dysponujemy obiektem o nazwie Samochod. Obiekt ten może posiadać takie właściwości, jak kolor, rok oraz wartosc. Obiekt może także posiadać metodę obliczającą jego wartość na podstawie roku produkcji. Aby odwołać się do obiektu należy podać jego nazwę, kropkę, a następnie nazwę właściwości. I tak, aby przypisać wartość niebieski właściwości kolor obiektu Samochod, należy posłużyć się następującym fragmentem kodu:

Samochod.kolor = "niebieski";

Aby wywołać metodę, należy podać jej nazwę po nazwie obiektu, jak pokazałam na poniższym przykładzie:

Samochod.obliczWartosc();

Omawiamy technologię skryptową przeznaczoną do obsługi WWW, a zatem większość obiektów zawiera właściwości i metody związane z przeglądarką oraz dokumentami HTML. Jednym z najważniejszych obiektów jest document. Zawiera on informacje dotyczące dokumentu HTML wyświetlonego w przeglądarce, posiada metody umożliwiające odpowiadanie na poczynania użytkownika oraz jest w stanie wykonywać inne czynności.

Niestety, w tym miejscu sprawy się komplikują. Każda przeglądarka definiuje bowiem grupę odmiennych obiektów, które posiadają różne właściwości i metody. Co więcej, każda przeglądarka dysponuje zbiorem procedur obsługi zdarzeń, służącym do obsługi czynności wykonywanych przez użytkownika, na przykład, kliknięcia myszą lub naciśnięcia klawisza.

0x01 graphic

W przeglądarce Netscape Navigator nie wszystkie obiekty dysponują wszystkimi procedurami obsługi zdarzeń. A zatem, aby określić, jakie procedury obsługi zdarzeń są dostępne w konkretnych obiektach, powinieneś przejrzeć dokumentację języka JavaScript zaimplementowanego w przeglądarce Netscape Navigator.

Dostępne obiekty oraz zdarzenia różnią się od siebie w poszczególnych typach przeglądarek, dlatego też omówię te zagadnienia bardziej szczegółowo w dalszej części rozdziału. Najpierw jednak przedstawię sposób umieszczania skryptów w dokumentach HTML.

Umieszczanie skryptów w dokumentach HTML

Oczywiście JavaScript to nie to samo co HTML. Są to dwa całkowicie odmienne języki, przeznaczone do zupełnie innych celów. Nie można umieszczać skryptów w dokumentach HTML, ot tak sobie i oczekiwać, że przeglądarka sama domyśli się, co należy z nimi zrobić. Pierwszą rzeczą, jaką należy wykonać, jest określenie domyślnego języka skryptowego. Służy do tego znacznik meta umieszczany w nagłówku dokumentu:

Choć użycie znacznika meta jest opcjonalne, to jednak, stosując go, można zapewnić, że przeglądarka będzie wiedziała, iż wszystkie skrypty są napisane w języku JavaScript i będą odpowiednio interpretowane. To domyślne założenie, co do użytego języka skry-ptowego można zmienić, określając język w konkretnym skrypcie.

To rozróżnienie jest niesłychanie istotne, gdyż nie należy dopuścić do sytuacji, w której przeglądarka będzie miała jakiekolwiek wątpliwości, jakiego języka skryptowego użyto. Teraz możemy się już zająć umieszczaniem skryptów w dokumentach HTML.

Skrypty napisane w języku JavaScript można umieszczać w dokumentach HTML na trzy różne sposoby:

tworząc skrypty „wpisane” wykonywane w odpowiedzi na wewnętrzne zdarzenia,
umieszczając skrypty wewnątrz znacznika head lub body,
dołączając do dokumentu zewnętrzny plik zawierający skrypt.

Zdarzenia wewnętrzne są generowane, gdy na stronie WWW coś się stanie. Na przykład, znacznik body dysponuje wewnętrznym zdarzeniem o nazwie onload, które jest generowane, gdy dokument zostanie pobrany przez przeglądarkę. Te zdarzenia są podawane jako atrybuty znaczników HTML. Wartością takiego atrybutu może być pojedyncza instrukcja skryptu lub cała seria instrukcji. Na przykład, przedstawiony poniżej fragment kodu HTML definiuje zdarzenie onload znacznika body i określa, że w momencie zgłoszenia tego zdarzenia należy wykonać pojedynczą instrukcję powodującą wyświetlenie okienka informacyjnego:

Zauważ, że cała instrukcja wpisanego skryptu jest zapisywana pomiędzy dwoma znakami cudzysłowu, z tego względu wszystkie łańcuchy znaków, umieszczone wewnątrz niej, muszą być oznaczane przy użyciu znaków apostrofu. Pierwszy znak cudzysłowu rozpoczyna wartość atrybutu; kolejny odnaleziony cudzysłów zostanie potraktowany przez przeglądarkę jako zakończenie tej wartości. Jeśli przez pomyłkę wpisałbyś podany poniżej fragment kodu, to cały skrypt miałby postać alert(, a z pewnością nie o to Ci chodziło.

0x01 graphic

Rozpatrując wewnętrzne zdarzenia, nie należy sugerować się oficjalną specyfikacją W3C. Choć wymienia ona wiele zdarzeń, które można stosować z konkretnymi elementami, to trzeba pamiętać, iż implementacja tych możliwości funkcjonalnych w całości zależy od przeglądarki. W szczególności dotyczy to przeglądarki Netscape Navigator, która nie obsługuje bardzo wielu zdarzeń wewnętrznych dostępnych w Internet Explorerze. Niestety, w znacznym stopniu utrudnia to tworzenie dokumentów DHTML przeznaczonych dla przeglądarki Netscape Navigator.

Obsługując zdarzenia wewnętrzne, można także użyć sekwencji kilku instrukcji. Spójrz na poniższy przykład:

W tym niewielkim skrypcie obsługującym zdarzenie onload umieszczone zostały dwie instrukcje. Pierwsza z nich deklaruje zmienną i przypisuje jej podany łańcuch znaków, natomiast druga wyświetla okienko dialogowe zawierające podany komunikat.

Drugą metodą umieszczania skryptów w dokumentach HTML jest zapisanie ich wewnątrz znacznika head lub body. W tym przypadku kod skryptu umieszczany jest wewnątrz specjalnego znacznika script; typ skryptu określany jest przy użyciu atrybutu type lub language tego znacznika. Oba te atrybuty spełniają tę samą funkcję, czyli informują przeglądarkę, jaki język skryptowy został użyty. Choć oficjalny standard zaleca użycie atrybutu type, to atrybut language jest częściej stosowany. Ja jednak zachęcam do używania obu tych atrybutów jednocześnie, gdyż w niczym to nie przeszkadza:

Kod skryptu podawany jest po otwierającym znaczniku script, na zakończenie skryptu wpisujemy zamykający znacznik script.

<head>

<title>Przykładowy skrypt</title>

var komunikat = "Strona została załadowana.";

alert(komunikat);

</script>

</head>

Choć powyższy skrypt będzie poprawnie działał w przeglądarkach dysponujących możliwością wykonywania skryptów, to jednak powszechnie stosowaną praktyką jest umieszczenie kodu skryptu wewnątrz komentarzy języka HTML, jak pokazałam w poniższym przykładzie:

<!-- Ukrywa skrypt w starszych przeglądarkach

var komunikat = "Strona została załadowana.";

alert(komunikat);

// zakończ ukrywanie skryptu -->

</script>

Zwróć szczególną uwagę na ostatnią linię skryptu. Rozpoczyna się od komentarza języka JavaScript, umieściłam go tam, aby zapewnić, że interpreter JavaScriptu nie potraktuje tej linii jako kodu skryptu. Gdybym nie użyła komentarza, to interpreter potraktowałby zawartość linii jako kod skryptu i spróbował go wykonać:

zakończ ukrywanie skryptu -->

Inną metodą zapewnienia zgodności ze starszymi wersjami przeglądarek jest użycie znacznika noscript. Znacznik ten umożliwia stworzenie alternatywnej wersji dokumentu, przeznaczonej dla przeglądarek, które nie są w stanie wykonywać skryptów. Alternatywną wersję strony należy rozpocząć od otwierającego znacznika noscript, po którym można podać kod HTML. Alternatywny blok kodu, kończy się zamykającym znacznikiem noscript, jak pokazałam w poniższym przykładzie:

<!-- Ukrywa skrypt w starszych przeglądarkach

var komunikat = "Strona została załadowana.";

alert(komunikat);

// zakończ ukrywanie skryptu -->

</script>

<p>Używasz przeglądarki, która nie obsługuje skryptów.</p>

</noscript>

Zgodnie z informacjami podanymi wcześniej, skrypty można umieszczać wewnątrz znaczników head oraz body. Należy zauważyć, iż kolejność wykonywania skryptów odpowiada kolejności, w jakiej są one umieszczone w dokumencie HTML. Z tego względu, skrypty umieszczone wewnątrz znacznika head zostaną wykonane przed skryptami zapisanymi wewnątrz znacznika body. Jeśli kontrolujesz przebieg wykonywania skryptu, używając w tym celu funkcji, to w bardzo łatwy sposób możesz ominąć tę regułę i zagwarantować, że skrypt zostanie wykonany dokładnie, tak jak sobie tego życzysz.

Ostatnią metodą umieszczania skryptów w dokumentach HTML jest dołączenie zewnętrznego pliku (zapisanego z rozszerzeniem .js). Służy do tego atrybut src znacznika script. Na poniższym przykładzie przedstawiłam sposób dołączenia do dokumentu skryptów zapisanych w dwóch plikach:

Dołączanie zewnętrznych plików zawierających skrypty do dokumentów HTML umożliwia łatwiejsze zarządzanie skryptami wykorzystywanymi przez wiele różnych stron wchodzących w skład witryny.

Teraz już wiesz, jak można umieszczać skrypty w stronach WWW. Aby zakończyć tę część rozdziału chciałabym jeszcze zaznaczyć, iż aktualnie dostępna jest wersja 1.3 języka JavaScript, jednak już wkrótce pojawi się wersja 1.4. W tabeli 21.2 zestawiłam informacje dotyczące wersji języka JavaScript dostępnych w różnych wersjach przeglądarek Netscape Navigator i Microsoft Internet Explorer.

Tabela 21.2.

Wersje języka JavaScript dostępne w przeglądarkach Netscape Navigator oraz Internet Explorer

JavaScript		Navigator	Internet Explorer
1.0		2.0x	3.0x
1.1		3.0x	4.0x
1.2		4.0-4.05	4.0x
1.3		4.06-4.61	5.0x
1.4		niedostępna	niedostępna
	Z technicznego punktu widzenia przeglądarka Microsoft Internet Explorer nie interpretuje języka JavaScript, lecz język skryptowy JScript, bazujący na języku JavaScript i stworzony przez firmę Microsoft. Powinieneś o tym pamiętać i nie dać się zaskoczyć. Niemniej jednak wciąż powinieneś pisać skrypty bazujące na dokumentacji języka JavaScript.

Wykorzystanie modelu obiektów dokumentu

Jak już wspominałam wcześniej, obie przeglądarki, Microsoft Internet Explorer oraz Netscape Navigator, dysponują odmiennymi implementacjami modelu obiektów dokumentu. Każdy obiekt umieszczony na stronie WWW (a dodatkowo także wiele obiektów przeglądarki) posiada wiele właściwości (opisujących te obiekty), metod (pozwalających nimi manipulować) oraz procedur obsługi zdarzeń (służących do reakcji na czynności wykonywane przez użytkownika). W dalszej części rozdziału omówię modele obiektów dokumentu dostępne w każdej z przeglądarek i postaram się wskazać ich podobieństwa.

0x01 graphic

Zrozumienie pełnych możliwości, jakie daje DOM, wymaga głębokiej wiedzy, której, niestety, nie jestem w stanie przekazać w niniejszej książce. Niemniej jednak bardzo wiele możesz się nauczyć, kopiując skrypty umieszczone na innych stronach WWW i analizując ich kod, jest to zresztą doskonała metoda nauki wszelkich technologii związanych z WWW.

DOM Netscape Navigatora

DOM Netscape Navigatora w pełni odpowiada modelowi obiektów dokumentu przedstawionemu w oficjalnej specyfikacji JavaScript. To może być niezwykle mylące, zwłaszcza przy tworzeniu dokumentów DHTML, które mają działać w wielu przeglądarkach. Problem wynika z faktu, iż Internet Explorer, interpretując skrypty pisane w języku JavaScript, robi to w kontekście innego, własnego, DOM-u. Innymi słowy, czytając oficjalną dokumentację języka JavaScript, powinieneś zachować dużą ostrożność, gdyż zawarte w niej informacje będą dotyczyły wyłącznie przeglądarki Netscape Navigator.

Oprócz kilku obiektów najwyższego poziomu, takich jak, na przykład, screen, DOM Netscape Navigatora ma postać drzewiastą, w której obiektem najwyższego poziomu jest obiekt window. Reprezentuje on okno przeglądarki lub ramkę wyświetloną w tym oknie. Z tego względu właściwości i metody tego obiektu dotyczą właśnie okna przeglądarki.

Obiekt window posiada kilka obiektów niższego poziomu, a niektóre z nich posiadają własną strukturę obiektów kolejnych, jeszcze niższych poziomów. Jednym z obiektów leżących w hierarchii „poniżej” obiektu window jest obiekt document. Jest to obiekt, który będzie nas najbardziej interesował. Obiekt ten jest tworzony w Netscape Navigatorze przez znacznik body dokumentu HTML, oznacza to, że nie będziesz musiał się niczym przejmować, gdyż zostanie on utworzony automatycznie przez przeglądarkę.

W hierarchii obiektów dokumentu, poniżej obiektu document może się znaleźć bardzo wiele różnego typu innych obiektów, z których każdy będzie posiadał charakterystyczne właściwości i metody. Znaczna większość obiektów, których będziesz używał, odpowiada elementom HTML, takim jak obrazki, obiekty arkuszy stylów czy też elementy formularzy.

Tworząc dokumenty DHTML, wciąż będziesz się odwoływał do obiektu document, z tego względu koniecznie musisz wiedzieć, jak należy to robić. Odwołując się do obiektów w języku JavaScript, należy posługiwać się notacją kropkową i odwoływać się po kolei do każdego obiektu w hierarchii DOM, aż do momentu dotarcia do obiektu docelowego. W poniższym przykładzie przedstawiłam odwołanie do obrazka o nazwie mojobraz:

document.mojobraz

Aby odwołać się do którejkolwiek z właściwości tego obiektu, wystarczy dopisać ją na końcu wyrażenia:

document.mojobraz.src

A teraz spróbuj wykonać bardzo prosty eksperyment. Stwórz stronę WWW zawierającą jeden obrazek. (Możesz mu nadać nazwę użytą przeze mnie w powyższym przykładzie lub jakąkolwiek inną. Pamiętaj tylko, aby podać odpowiednią nazwę w atrybucie src znacznika obrazka.) Obrazek jest umieszczony wewnątrz znacznika body dokumentu HTML. Poniżej obrazka umieścimy skrypt, który wyświetli okienko informacyjne prezentujące szerokość obrazka, określoną atrybutem width znacznika img. W tym przykładzie ważne jest, aby umieścić skrypt po obrazku, gdyż, aby został utworzony odpowiedni obiekt, przeglądarka musi wcześniej załadować obrazek.

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Test DOM w Navigatorze</title>

</head>

<body>

<!-- Ukryj kod skryptu

alert(document.mojobraz.width);

// koniec ukrywania -->

</script>

</body>

</html>

Wynikowe okienko dialogowe, wyświetlone przez przeglądarkę Netscape Navigator, zostało przedstawione na rysunku 21.1. Zauważ, że sam obrazek nie został wyświetlony przed pojawieniem się okienka dialogowego.

0x01 graphic

Rysunek 21.1.

Dostęp do właściwości obrazka przy wykorzystaniu języka JavaScript oraz DOM programu Netscape Navigator

0x01 graphic

Dostęp do wszelkich innych właściwości obrazka jest równie prosty, wystarczy zamienić właściwość width na jakąkolwiek inną, na przykład, src.

Aby wywołać którąś z metod obiektu, wystarczy zastąpić nazwę właściwości nazwą metody i dopisać do takiego wyrażenia wszelkie argumenty, których wymaga metoda. Przedstawiony poniżej przykład demonstruje sposób dopisania kodu HTML do wyświetlanej strony, możliwy dzięki wykorzystaniu metody write obiektu document:

document.write("Witaj Świecie!");

Niektóre właściwości, takie jak wysokość obrazka, są przeznaczone wyłącznie do odczytu. Oznacza to, że można pobrać wartość, lecz nie można jej zmienić. Wartości innych właściwości, a w szczególności właściwości CSS (dostępnych w hierarchii DOM bezpośrednio „poniżej” konkretnego obiektu), można modyfikować. Aby zmienić wartość właściwości obiektu, należy podać nazwę tego obiektu oraz właściwości (w taki sam sposób, jak przy odwoływaniu się do właściwości), a następnie zapisać znak równości i wartość przypisywaną właściwości. Instrukcja podana w poniższym przykładzie modyfikuje położenie obiektu obrazka mojobraz, umieszczając go 150 pikseli poniżej górnej krawędzi okna lub poprzedniego elementu, w zależności od tego czy obraz został umiejscowiony względnie, czy bezwzględnie:

document.mojobraz.top = "150";

I jeszcze ostatnia informacja dotycząca modelu obiektów dokumentu Netscape Navigatora. Otóż wszystkie obiekty znajdujące się w hierarchii DOM „poniżej” jakiegoś obiektu, są przechowywane w tablicy. Na przykład, wszystkie obrazki umieszczone na stronie WWW są zapisane we właściwości document.images, która jest tablicą. Pierwszy obrazek umieszczony na stronie jest zapisywany w elemencie tablicy o indeksie 0, a kolejne obrazki — w następnych elementach tablicy. Poniższe wyrażenie pozwala odwołać się do pierwszego obrazka zapisanego w tablicy:

document.images[0].width

Użycie tego wyrażenia w poprzednim przykładzie (wyświetlającym szerokość obrazka w okienku dialogowym), dałoby te same wyniki, czyli spowodowało wyświetlenie wartości 150.

DOM Internet Explorera

Model obiektów dokumentu tworzony w przeglądarkach Internet Explorer 4 oraz 5 także składa się z obiektów posiadających właściwości, metody i zdarzenia. Pod tym względem przypomina on DOM stosowany w Netscape Navigatorze. Różnice pomiędzy modelami obiektów dokumentu obu przeglądarek wynikają jednak z odmiennego sposobu organizacji obiektów oraz sposobu odwoływania się do nich w skryptach.

Podobnie jak Netscape Navigator, także i Internet Explorer posiada obiekt document. Niemniej jednak wszystkie obiekty znajdujące się w hierarchii „poniżej” obiektu document, są umieszczone w kolekcji all; zawiera ona obiekty odpowiadające wszystkich elementom strony WWW. A zatem, aby odwołać się do obrazka w Internet Explorerze, należy użyć wyrażenia o postaci:

document.all.mojobraz

Aby odwołać się do właściwości lub metody, należy dodać ją do nazwy obiektu, zupełnie tak samo, jak w Netscape Navigatorze:

document.all.mojobraz.src

Internet Explorer zupełnie inaczej obsługuje obiekty stylu. Wszystkie odwołania do nich należy poprzedzić właściwością style, zapisaną po nazwie obiektu; dopiero po niej można podać nazwę właściwości stylu:

document.all.mojobraz.style.top

Prezentacje modelu obiektów dokumentu stosowanego w Internet Explorerze chciałabym zakończyć przykładem wyświetlającym szerokość obrazka, w wersji przeznaczonej dla Internet Explorera:

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Test DOM w Internet Explorerze</title>

</head>

<body>

<!-- Ukryj kod skryptu

alert(document.all.mojobraz.width);

// koniec ukrywania -->

</script>

</body>

</html>

Wynikowe okienko dialogowe przedstawiłem na rysunku 21.2. Zauważ, iż w Internet Explorerze obrazek jest wyświetlany na stronie przed pojawieniem się okienka dialogowego.

0x01 graphic

Rysunek 21.2.

Dostęp do właściwości obrazka przy wykorzystaniu języka JavaScript oraz DOM programu Internet Explorer

0x01 graphic

Obsługa zdarzeń

Zdarzenia zachodzą w momencie, gdy przeglądarka lub użytkownik wykona jakąś czynność. Znaczenie zdarzeń polega na tym, iż pozwalają na tworzenie skryptów, które reagują na te wykonywane czynności. Niestety, istnieją bardzo poważne różnice pomiędzy sposobami śledzenia i wykrywania zdarzeń w Internet Explorerze oraz Netscape Navigatorze. Ogólnie rzecz biorąc, Netscape Navigator znacznie ogranicza ilość elementów HTML, które mogą wyzwalać zdarzenia. W odróżnieniu od Navigatora, w Internet Explorerze niemal wszystkie elementy HTML mogą generować zdarzenia.

0x01 graphic

Ze względu na ilość zdarzeń oraz różnice ich implementacji w poszczególnych przeglądarkach, nie jestem w stanie podać w niniejszej książce szczegółowych informacji na ich temat. Informacji tych powinieneś szukać w dokumentacjach przeglądarek Netscape Navigator oraz Internet Explorer.

Kolejna różnica pomiędzy obsługą zdarzeń w obu przeglądarkach jest związana z miejscem, w którym zdarzenie jest wykrywane oraz kierunkiem przekazywania zdarzenia w hierarchii obiektów dokumentu (zdarzenie może być przekazywane w górę lub ku dołowi tej hierarchii). W przeglądarce Netscape Navigatorze zdarzenia są wykrywane na samej górze hierarchii obiektów dokumentu, w obiekcie window, po czym są przekazywane ku dołowi hierarchii aż do momentu, gdy zostanie odnaleziona procedura, która je obsłuży. Internet Explorer obsługuje zdarzenia dokładnie w przeciwny sposób, co zresztą chyba już nikogo nie dziwi. W Internet Explorerze zdarzenia wędrują ku górze hierarchii obiektów, jak „bąbelki powietrza”. W tej przeglądarce zdarzenia są wykrywane przez obiekt, który wygenerował zdarzenie (na przykład, obrazek lub element div), po czym są przekazywane ku górze hierarchii obiektów aż do momentu, gdy zostaną obsłużone lub usunięte.

W praktyce oznacza to, że obsługa zdarzeń w przeglądarce Internet Explorer jest stosunkowo prosta i znacznie bardziej skomplikowana w przeglądarce Netscape Navigator.

Walka z rzeczywistością:
techniki DHTML działające w wielu przeglądarkach

Jak do tej pory, znaczna część tego rozdziału zawierała informacje o technologiach wykorzystywanych przez DHTML oraz sposobach ich wykorzystania (niezależnie od pozostałych technologii DHTML). Nadszedł czas, aby rozpocząć tworzenie prawdziwych dokumentów DHTML. Jak już wspominałam, największym wyzwaniem jest tworzenie stron DHTML, które będą mogły być oglądane przez jak największą liczbę użytkowników, przy uwzględnieniu pewnych praktycznych ograniczeń. Użyłam tu słowa „praktycznych”, gdyż stworzenie prawdziwych dokumentów DHTML nie jest możliwe w przeglądarkach, które nie implementują technologii skryptowych lub arkuszy stylów; natomiast w przeglądarkach, w których implementacje tych technologii są jedynie częściowe lub nienajlepsze, tworzenie dokumentów DHTML jest niepraktyczne. Innymi słowy, tworząc dokumenty DHTML, nigdy nie będziesz w stanie dotrzeć do wszystkich użytkowników World Wide Web.

Jest także dobra wiadomość, dzięki doskonałemu zrozumieniu różnic pomiędzy najpopularniejszymi przeglądarkami oraz pomysłowemu pisaniu skryptów, istnieje możliwość stworzenia stron DHTML działających częściowo lub niemal całkowicie, tak jak sobie tego życzysz, we wszystkich przeglądarkach.

Alternatywnym podejściem jest tworzenie różnych wersji strony WWW, przeznaczonych dla różnych przeglądarek. Uważam jednak, że rozwiązanie to nie jest ani praktyczne, ani eleganckie, gdyż prowadzi ono do kilkukrotnego pomnożenia pracy, jaką należy wykonać. Z tego względu w następnych podrozdziałach skoncentruję się na tworzeniu kodu, który będzie działał w wielu różnych przeglądarkach.

Określanie przeglądarki

Przy pisaniu kodu DHTML, który ma poprawnie działać w różnych przeglądarkach, najważniejszym zadaniem jest określenie typu przeglądarki, która wyświetla stronę. Po określeniu typu przeglądarki można wykonać funkcje lub instrukcje zapewniające poprawne działanie skryptu.

Na szczęście nie będziesz musiał sam tworzyć kodu odpowiedzialnego za określanie przeglądarki. Firma Netscape podjęła to trudne zadanie, stworzyła odpowiedni kod i opublikowała go na witrynie DevEdge, pod adresem http://devedge.netscape.com/tech/ dynhtml/index.html . Cały kod listingu można skopiować i bezpłatnie używać we własnych stronach WWW.

W tym rozdziale wykorzystam skróconą wersję skryptu, wykrywającą wyłącznie przeglądarki Netscape Navigator oraz Internet Explorer w wersjach 4 lub wyższych. Fragment skryptu przedstawiony w poniższym przykładzie analizuje odpowiednie obiekty i tworzy zmienne określające typ oraz wersję przeglądarki. W szczególności będą nas interesowały dwie zmienne — is_nav4up oraz is_ie4up — zawierające wartości logiczne true oraz false.

// Uproszczona wersja wykrywania przeglądarki

// wykrywająca Navigatora 4+ oraz IE 4+.

// Użyj zmiennych is_nav4up oraz is_ie4up

// w innych częściach skryptu

var agt = navigator.userAgent.toLowerCase();

var is_major = parseInt(navigator.appVersion);

var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf('mozilla')!=-1) &&

(agt.indexOf('spoofera')==-1) &&

(agt.indexOf('compatible')==-1) &&

(agt.indexOf('opera')==-1) &&

(agt.indexOf('webtv')==-1))

var is_nav4up = (is_nav && (is_major >= 4));

var is_ie = (agt.indexOf("msie") != -1);

var is_ie4up = (is_ie && (is_major >= 4));

Aby sprawdzić, czy przeglądarką, w której strona została wyświetlona jest Netscape Navigator lub Internet Explorer w wersji 4 lub wyższej, należy użyć poniższego fragmentu kodu:

if (is_nav4up) { zrób coś ... }

if (is_ie4up) { zrób coś ... }

Jeszcze nie raz zobaczysz te zmienne przy tworzeniu skryptów. Jedynym zadaniem funkcji określającej typ i wersję przeglądarki jest określenie wartości odpowiednich zmiennych, które będziesz mógł wykorzystać w innych fragmentach skryptu. Funkcja ta nie wykonuje żadnych innych czynności.

Przedstawiony poniżej przykład prezentuje praktyczne wykorzystanie kodu określającego typ i wersję przeglądarki. Wewnątrz znacznika body strony WWW wywoływana jest funkcja doSniff. Funkcja ta tworzy zmienną sniff i zapisuje w niej łańcuch znaków, którego postać zależy od typu przeglądarki, następnie wartość tej zmiennej jest wyświetlana w okienku dialogowym.

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Browser Sniffing</title>

<!—Hide JavaScript

// Uproszczona wersja wykrywania przeglądarki

// wykrywająca Navigatora 4+ oraz IE 4+.

// Użyj zmiennych is_nav4up oraz is_ie4up

// w innych częściach skryptu

var agt = navigator.userAgent.toLowerCase();

var is_major = parseInt(navigator.appVersion);

var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf('mozilla')!=-1) &&

(agt.indexOf('spoofer')==-1) &&

(agt.indexOf('compatible') == -1) &&

(agt.indexOf('opera')==-1) &&

tt (agt.indexOf('webtv')==-1));

var is_nav4up = (is_nav && (is_major >= 4));

var is_ie = (agt.indexOf("msie") != -1);

var is_ie4up = (is_ie && (is_major >= 4));

// Funkcja wyświetlająca wersję przeglądarki

function doSniff() {

var sniff

if (is_nav4up == true) {

sniff = "Netscape Navigator 4+" }

if (is_ie4up == true) {

sniff = "Microsoft Internet Explorer 4+" }

alert(sniff);

}

</script>

</head>

</body>

</html>

Na rysunku 21.3 przedstawiłam powyższą stronę wyświetloną w przeglądarce Internet Explorer 5.5.

0x01 graphic

Rysunek 21.3.

Określanie typu
i wersji przeglądarki

0x01 graphic

Tworzenie odwołań DOM działających w wielu przeglądarkach

Kolejnym narzędziem, które warto mieć, jest sposób odwoływania się do odpowiedniego modelu obiektów dokumentu, w zależności od przeglądarki, w której strona została wyświetlona. Zamiast stosowania niezależnych odwołań do każdego z istniejących modeli obiektów dokumentu, można stworzyć procedurę kreującą poprawne odwołanie w zależności od wykorzystywanej przeglądarki. Właśnie to zadanie realizuje przedstawiony poniżej fragment kodu. Są w nim wykorzystywane dwie zmienne — objRef oraz styleRef — które w przypadku Netscape Navigatora zawierają wartości puste a w przy-padku Internet Explorera wartości .all oraz .style. Po określeniu typu przeglądarki, skrypt określa poprawne wartości obu tych zmiennych:

// Konwencje odwołań do obiektów i stylów s

// w Navigatorze and IE. Użyj zmiennej objRef

// przy odwoływaniu się do obiektów oraz obu zmiennych

// przy odwoływaniu się do stylów.

var objRef, styleRef;

if (is_nav4up == true) {

objRef = ""

styleRef = ""

}

if (is_ie4up == true) {

objRef = ".all"

styleRef = ".style"

}

Ten sposób działania został wykorzystany na stronie WWW, przedstawionej w następnym przykładzie. Po określeniu typu przeglądarki, umieściłam w niej kod tworzący odwołanie do odpowiedniego modelu obiektów. Następnie zdefiniowane zostały dwie funkcje, tworzące okienka informacyjne wyświetlające poprawne odwołania DOM dla Netscape Navigator i Internet Explorera. Wewnątrz znacznika body przedstawionej strony WWW umieszczone zostały dwa znaczniki div, określające położenie dwóch hiperpołączeń tekstowych. Hiperpołączenia te przechwytują zdarzenia onmouseover i wywołują funkcję alert. Zauważ, iż wartością atrybutu href obu tych hiperpołączeń jest javascript:void(0). To najprostsza metoda zmuszenia hiperpołączenia do wykonania funkcji bez podawania jakiejkolwiek strony docelowej.

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Document Object Model References</title>

<!—ukrywamy skrypt

// Uproszczona wersja wykrywania przeglądarki

// wykrywająca Navigatora 4+ oraz IE 4+.

// Użyj zmiennych is_nav4up oraz is_ie4up

// w innych częściach skryptu

var agt = navigator.userAgent.toLowerCase();

var is_major = parseInt(navigator.appVersion);

var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf('mozilla')!=-1) &&

(agt.indexOf('spoofer')==-1) &&

(agt.indexOf('compatible') == -1) &&

(agt.indexOf('opera')==-1) &&

(agt.indexOf('webtv')==-1));

var is_nav4up = (is_nav && (is_major >= 4));

var is_ie = (agt.indexOf("msie") != -1);

var is_ie4up = (is_ie && (is_major >= 4));

// Konwencje odwołań do obiektów i stylów

// w Navigatorze and IE. Użyj zmiennej objRef

// przy odwoływaniu się do obiektów oraz obu zmiennych

// przy odwoływaniu się do stylów.

var objRef, styleRef;

if (is_nav4up == true) {

objRef = ""

styleRef = ""

}

if (is_ie4up == true) {

objRef = ".all"

styleRef = ".style"

}

function alertstyle() {

alert(eval("document" + objRef + ".div01" + styleRef + ".top"));

}

function alertobject() {

alert(eval("document" + objRef + ".div02.id"));

}

// koniec ukrywania skryptu -->

</script>

#div01 { position: absolute; }

#div02 { position: absolute; }

</style>

</head>

<body>

<a href="javascript:void(0)" onmouseover="alertstyle()">Odwołanie do sytlów</a>

</div>

<a href="javascript:void(0)" onmouseover="alertobject()">Odwołanie do obiektów</a>

</div>

</body>

</html>

Wyniki wykonania tej strony zostały przedstawione na rysunku 21.4. Zwróć uwagę, iż wskaźnik myszy został umieszczony na łączu wyświetlającym styl.

0x01 graphic

Rysunek 21.4.

Użycie funkcji tworzącej odwołania do obiektów działające w różnych przeglądarkach

0x01 graphic

Nie chcę wprowadzać niepotrzebnego zamieszania, więc przejdę już do dwóch ćwiczeń. Zaprezentują one sposób wykrywania rodzaju przeglądarki, podmieniania obrazków, ukrywania i wyświetlania elementów stron WWW, tworzenie rozwijalnych menu oraz inne techniki tworzenia kodu DHTML działającego w różnych przeglądarkach.

Ogólnie rzecz biorąc, ćwiczenia te mają na celu zaprezentowanie sposobów wykonywania poniższych zadań:

połączenia HTML-a, kaskadowych arkuszy stylów oraz skryptów JavaScript w celu uzyskania przydatnych efektów DHTML,
zapewnienia, że tworzone strony DHTML będą mogły poprawnie działać na różnych przeglądarkach, co można osiągnąć poprzez sprawdzenie wersji przeglądarki oraz wykorzystaniu tych informacji w innych częściach skryptu,
pokazanie jednej metody użycia DHTML,
przedstawienia praktycznych przykładów wykorzystania możliwości DHTML. Dzięki temu będziesz mógł zobaczyć sposób praktycznego wykorzystania podanych pojęć i wykorzystać je jako podstawę do dalszej nauki.

Ćwiczenie 21.1: Tworzenie rozwijalnych menu

W pierwszym ćwiczeniu będziesz miał za zadanie stworzyć stronę zawierającą rozwijalne menu, wykorzystując do tego możliwości, jakie daje DHTML. Gdy użytkownik kliknie obrazek umieszczony obok opcji, menu się rozwinie, prezentując kolejne opcje. Gdy użytkownik kliknie opcję menu, odpowiadająca jej zawartość umieszczona w znaczniku div zostanie wyświetlona w głównym obszarze okna przeglądarki. Zauważ, iż tworząc strukturę tej strony, nie użyjesz ani tabel (znaczników table), ani ramek (znaczników frame). Zamiast nich wykorzystasz bezwzględnie umiejscowione znaczniki div i będziesz określał, czy są one widzialne czy nie. W tym ćwiczeniu posłużysz się także stylami zdefiniowanymi w nagłówku dokumentu przy użyciu znacznika style.

W pierwszej kolejności stwórz szablon strony WWW, zawierający wszystkie podstawowe elementy jej struktury oraz komponenty, w których następnie umieścisz skrypty.

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Stary ceglany dom</title>

</head>

<body>

</body>

</html>

Kolejnym etapem będzie dodanie kodu HTML odpowiedzialnego za określenie formatowania strony. W celu zachowania odpowiedniej struktury, elementom najwyższego poziomu menu nadałam nazwy toc100 oraz toc200. Nazwy wszystkich elementów podmenu zostały określone na podstawie głównego elementu menu, do którego należą. Dzięki temu, zorientowanie się w organizacji strony będzie znacznie prostsze. W tworzonej stronie posłużę się także skryptami wpisanymi, wykorzystam je do sprawdzenia, czy element menu jest aktualnie widoczny oraz do zmienienia obrazka strzałki po rozwinięciu menu.

Dodałam także zawartość strony, która będzie wyświetlana po kliknięciu odpowiedniej opcji menu. Na razie nie musisz się przejmować, że wszystkie te elementy zostaną wyświetlone. W dalszej części ćwiczenia, poświęconej stylom, przypiszesz właściwości visibility tych elementów wartość hidden.

0x01 graphic

</div>

<a href="javascript:void(0)" onclick="menuaction();

if (show == 1) { document.menuimg.src = ea.src; return true }

if (show == 0) { document.menuimg.src = ca.src; return true }">

Historia

</div>

<a href="javascript:void(0)" onclick="contentID='0101'; showcontent(0101)">Wczesne lata</a>

</div>

<a href="javascript:void(0)" onclick="contentID='0102'; showcontent(0101)">Stan teraźniejszy</a>

</div>

<a href="javascript:void(0)" onclick="contentID='0200'; showcontent(0101)">Zdjęcia</a>

</div>

</div>

<p>Ten dom został zbudowany na początku XIX wieku. Początkowo stanowił on część farmy o powierzchni kilkuset akrów, składającej się z kilku domów oraz stodoły. Aktualnie dom oraz stodoła usytuowane są na działce o powierzchni 4 akrów.</p>

</div>

<p>Wnętrze domu zostało nieco zmodyfikowane, na przykład, przebudowano kuchnię. Nie mniej jednak z zewnątrz dom się niemal nie zmienił. Stodoła nie została natomiast w żaden sposób zmodyfikowana.</p>

</div>

</div>

Kolejnym krokiem będzie dodanie do nagłówka dokumentu arkuszy stylów. Każdy element strony, poszczególne opcje menu, graficzny tytuł strony oraz wyświetlane na niej informacje, powinny zostać umiejscowione bezwzględnie. Położenie poszczególnych elementów strony będziesz musiał określić metodą prób i błędów, na szczęście nie powinno to zająć wiele czasu. Zwróć uwagę, iż zarówno wszystkie elementy podmenu, jak i treść strony są początkowo ukryte (atrybutowi visibility przypisana jest wartość hidden). Później przy użyciu skryptu menu zostanie rozwinięte, a jego elementy odpowiednio rozmieszczone, aby wzajemnie siebie nie przesłaniały (patrz rysunek 21.5).

0x01 graphic

<!--

#title { position: absolute; top: 20; left: 50; }

#splash { position: absolute; top: 150; left: 200; visibility: visible; }

#toc0100 { position: absolute; top: 130; left: 20; visibility: visible; }

#toc0101 { position: absolute; top: 150; left: 50; visibility: hidden; }

#toc0102 { position: absolute; top: 170; left: 50; visibility: hidden; }

#toc0200 { position: absolute; top: 150; left: 20; visibility: visible; }

#content0101 { position: absolute; top: 150; left: 200; visibility: hidden; }

#content0102 { position: absolute; top: 150; left: 200; visibility: hidden; }

#content0200 { position: absolute; top: 150; left: 200; visibility: hidden; }

-->

</style>

Teraz można już zacząć pisać skrypt. W pierwszej kolejności powinieneś stworzyć zmienne globalne, które będą wykorzystywane w skrypcie.

0x01 graphic

Rysunek 21.5.

Rozwijalne menu przed dodaniem głównego skryptu

0x01 graphic

// Deklaracje zmiennych globalnych

// i stworzenie obiektów obrazków.

var ea = new Image(10,10); //ea = strzałka rozwiń

var ca = new Image(10,10); //ca for strzałka zwiń

ea.src = "expand.gif";

ca.src = "contract.gif";

var show = 1;

var contentID;

Kolejnym krokiem będzie dodanie kodu służącego do wykrywania typu i wersji przeglądarki.

0x01 graphic

// Uproszczona wersja wykrywania przeglądarki

// wykrywająca Navigatora 4+ oraz IE 4+.

// Użyj zmiennych is_nav4up oraz is_ie4up

// w innych częściach skryptu

var agt = navigator.userAgent.toLowerCase();

var is_major = parseInt(navigator.appVersion);

var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf('mozilla')!=-1) &&

(agt.indexOf('spoofer')==-1) &&

(agt.indexOf('compatible') == -1) &&

(agt.indexOf('opera')==-1) &&

(agt.indexOf('webtv')==-1));

var is_nav4up = (is_nav && (is_major >= 4));

var is_ie = (agt.indexOf("msie") != -1);

var is_ie4up = (is_ie && (is_major >= 4));

Teraz dodaj kod służący do tworzenia poprawnych odwołań do obiektów.

0x01 graphic

// Konwencje odwołań do obiektów i stylów

// w Navigatorze and IE. Użyj zmiennej objRef

// przy odwoływaniu się do obiektów oraz obu zmiennych

// przy odwoływaniu się do stylów.

var objRef, styleRef;

if (is_nav4up == true) { //W przypadku Navigatora są puste

objRef = ""

styleRef = ""

}

if (is_ie4up == true) { //W przypadku IE - określamy wartości

objRef = ".all"

styleRef = ".style"

}

Teraz przejdziemy do funkcji zapewniających możliwości funkcjonalne strony. Pierwsza z nich będzie wyświetlać, ukrywać oraz zmieniać położenie elementów menu. Zauważ, iż tworząc tę funkcję, wykorzystałam metodę odwoływania się do elementów DOM bez rozróżniania typu przeglądarki.

0x01 graphic

// Funkcja do wyświetlania i ukrywania

// podmenu.

function menuaction() {

if (show == 1) {

eval("document" + objRef + ".toc0101" + styleRef + ".visibility = 'visible'");

eval("document" + objRef + ".toc0102" + styleRef + ".visibility = 'visible'");

eval("document" + objRef + ".toc0200" + styleRef + ".top = '190'");

show = 0;

return true;

}

if (show == 0) {

eval("document" + objRef + ".toc0101" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".toc0102" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".toc0200" + styleRef + ".top = '150'");

show = 1;

return true;

}

Kolejna funkcja służy do wyświetlania zawartości strony. Także w tym przypadku będziesz musiał określić, które elementy początkowo powinny zostać ukryte, aby zrobić miejsce konieczne do wyświetlenia wybranych informacji.

0x01 graphic

// Funkcja do ukrywania warstw z zawartością

// oraz wyświetlania wybranej warstwy.

function showcontent() {

if (contentID == "0101") {

eval("document" + objRef + ".splash" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0102" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0200" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0101" + styleRef + ".visibility = 'visible'");

}

if (contentID == "0102") {

eval("document" + objRef + ".splash" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0101" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0200" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0102" + styleRef + ".visibility = 'visible'");

}

if (contentID == "0200") {

eval("document" + objRef + ".splash" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0101" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0102" + styleRef + ".visibility = 'hidden'");

eval("document" + objRef + ".content0200" + styleRef + ".visibility = 'visible'");

}

// zakończ ukrywanie skryptu -->

</script>

A oto pełny kod strony:

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Stary ceglany dom</title>

<!—Ukrywamy JavaScript

// Deklaracje zmiennych globalnych

// i stworzenie obiektów obrazków.

var ea = new Image(10,10); //ea = strzałak rozwiń