R_21_07.PDF

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 s

ię

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 form

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ó

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 wykorzyst

ularza. To bardzo prosty schemat działania, który

jest jednak dosyć statyczny i nieco nużący.

w lub „wirtualnych maszyn”

(co może być dosyć trudne) i zazwyczaj wydłużają czas ładowania strony.

ywane są zewnętrzne rozwiązania

programistyczne. Czy wyobrażasz sobie, jakie to daje możliwości?

590

Część 7. JavaScript i Dynamiczny HTML

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ęk-

Rozdział 21. Użycie Dynamicznego HTML–a

591

szej 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 naj-

większego udziału na rynku. Jednak wynik tej batalii był zupełnie inny, w efekcie do-

prowadził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.

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ła-

twiają 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.

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 korzy-

stać; 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 stan-

dardem jest oficjalna technologia W3C, czyli kaskadowe arkusze stylów ( CSS — Cas-

cading Style Sheets ). Arkusze stylów CSS poziomu 2 (CSS2) pozwalają na formatowa-

nie 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 specyfi-

592

Część 7. JavaScript i Dynamiczny HTML

kacji 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.

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 naj-

większą ilość różnych przeglądarek. Choć można tworzyć rozwiązania DHTML, wyko-

rzystując inne języki skryptowe, takie jak VBScript, to polecałabym raczej użycie języ-

ka 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 „dy-

namizm” stron. Z tego względu, w dalszej części rozdziału umieściłam krótkie omówie-

nie 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 manipulo-

wania obiektami umieszczonymi na stronie WWW. Na przykład, aby móc manipulować

jakimkolwiek elementem strony WWW, dajmy na to obrazkiem, musisz go najpierw zi-

dentyfikować. 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 dal-

szej części rozdziału omówiłam różne wersje DOM.

Do śledzenia czynności wykonywanych przez przeglądarkę oraz poczynań użytkowni-

ka, DHTML wykorzystuje obsługę zdarzeń . Po załadowaniu strony generowane jest

zdarzenie onLoad . Podobnie, gdy użytkownik kliknie przycisk umieszczony na formu-

larzu, 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. Zagad-

nienia związane z obsługą zdarzeń omówię szczegółowo w dalszej części rozdziału.

Rozdział 21. Użycie Dynamicznego HTML–a

593

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, po-

niż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 ogranicze-

nie. Oprócz hiperpołączeń oraz elementów formularzy, nie można bowiem manipulo-

wać żadnymi informacjami oraz obiektami wyświetlonymi na stronie WWW, ani od-

powiadać na poczynania użytkowników.

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 wy-

konywane 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 interpre-

tację i wykonanie odpowiada program, a nie procesor komputera. W przypadku stron

WWW programem odpowiedzialnym za interpretację i wykonanie skryptów umiesz-

czonych lub dołączonych do strony WWW jest przeglądarka. Skrypty są interpretowane

i wykonywane podczas ładowania strony.

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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: