R 21 07, HTML
[ Pobierz całość w formacie 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:
<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 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
[ Pobierz całość w formacie PDF ]