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 technologii, które można wykorzystywać do uzyskania efektów interaktywności. A zatem 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.

Nowy termin              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 zaimplementowali język HTML 4. Ten wątek bardzo często będzie się pojawiał w tym rozdziale.

Notatka

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.

Ostrzeżenie

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 zasadzie 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:

<img src="obrazek.gif" height="100" width="300" />

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.

Nowy termin              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.

Notatka

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

   Copyright HELION

   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;

Notatka

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ń