Rozdział 36.
Dynamie HTML


W tym rozdziale:

Podstawy HTML
Podstawy DHTML
Arkusze CSS
Budowanie prostej przeglądarki plików DHTML
Model obiektów DHTML
Elementy skryptów
Zmiana elementów innych niż tekstowe
Uruchamianie skryptu
Dialogi w skryptach


Używając nowych klas i kontrolek dla technologii WWW w Visual C++ 6.0 oraz nowych możliwości związanych z Dynamie HTML i Java Scriptem, masz obecnie ogromne możliwości interaktywnego przedstawiania informacji użytkownikom swoich programów C++. Masz także duże możliwości modyfikowania na bieżąco zarówno samej prezentacji, jak i jej interfejsu.
Dzięki klasie CHtmlView i kontrolce Web Browser możesz ładować i wyświetlać dokumenty HTML, co już samo w sobie jest bardzo przydatne, lecz dzięki potędze kryjącej się w DHTML masz oprócz tego dużo większe możliwości. Dokumenty HTML nie muszą znajdować się na innych komputerach; równie dobrze mogą być przechowywane na lokalnym dysku twardym. W związku z tym do przeprowadzania prób programowania w DHTML nie jest konieczne posiadanie połączenia z Internetem.
Swojego czasu HTML był po prostu językiem opisu strony, określającym sposób tworzenia i wyświetlania stron WWW, lecz obecnie w postaci plików HTML przekazywane są dokumenty wszelkiego rodzaju. Prawdziwa potęga kryje się jednak w nowych modelach obiektów i zdarzeń, stanowiących część DHTML. Te nowe obiekty i skrypty, zarówno JavaScript jak i VBScript, umożliwiają osadzanie aktywnego kodu bezpośrednio w dokumentach.
HTML, DHTML i JavaScript zasługują na osobne, obszerne książki. Celem tego rozdziału jest zapewnienie solidnych podstaw dotyczących modelu programowania i na tyle obszerne wprowadzenie w przykłady, aby możliwe było potraktowanie ich jako punkty wyjścia do dalszych programów.
Mimo plotki, że obecnie każdy mieszkaniec naszej planety zna już HTML, nie jest to prawdą. Tak więc jeśli nie bardzo wiesz, o co w nim chodzi, przejdź do następnej sekcji.
Podstawy HTML
Można uważać, że każdy dokument składa się z trzech części. Najbardziej oczywista jest zawartość, do której należą tytuł, główny tekst, obrazki, numery stron, listy itd. To co nie jest już tak oczywiste to fakt, że dokument posiada również strukturę. Na przykład, jeśli jako dokument potraktujemy książkę, może zawierać sam tekst, jednak tekst spisu treści ma inne przeznaczenie i organizację niż tekst indeksu czy zawartości rozdziałów. Oprócz posiadania struktury dokumenty zwykle są formatowane. To formatowanie, jeśli jest poprawne, pomaga czytelnikowi w ogarnięciu struktury dokumentu. Na przykład wyśrodkowane, pogrubione tytuły rozdziałów są oddzielone od treści rozdziałów, dzięki czemu czytelnik wie, że tytuł nie jest pierwszym zdaniem pierwszego akapitu rozdziału.
Formatowanie pomaga w uwypukleniu struktury, jednak nie jest ani strukturą, ani jej zawartością, przynajmniej w zakresie definicji struktur używanych w tym rozdziale. Język HTML (HyperText Markup Language) jest zdefiniowany zgodnie z językiem SGML (Standard Generalized Markup Language). SGML jest formalną strukturą do tworzenia języków, takich jak HTML, korzystających ze znaczników. Tak więc każdy element dokumentu jest w jakiś sposób związany ze znacznikiem określającym typ lub atrybuty tego elementu. HTML jest po prostu jednym z wielu języków, jakie można wygenerować na podstawie bardziej ogólnej struktury języka SGML.
SGML definiuje dokument jako hierarchię zagnieżdżonych elementów. W praktyce widać to jako formalną definicję zawartą w definicji DTD (Document Type Definition). HTML jest definiowany przez DTD i nie jest po prostu garścią zebranych razem przypadkowych znaczników. HTML jest formalną definicją o zdefiniowanym zestawie elementów i atrybutów. HTML DTD określa także, które elementy języka zawierają inne elementy. Idealnie, język HTML powinien definiować wyłącznie strukturę dokumentu, w żaden sposób nie określając sposobu jego formatowania ani wyświetlania. Tym zagadnieniem zajmiemy się za chwilę.
Kilka lat temu, dokumenty HTML były tworzone ręcznie, za pomocą edytora tekstu. Oczywiście od tamtych czasów powstało wiele bardzo wymyślnych narzędzi generujących dokumenty HTML. Wiele osób korzystających z dokumentów HTML często nawet nie zdaje sobie sprawy z kryjącej się pod nimi formalnej struktury, dzięki której jest możliwe wyświetlanie ciekawych stron. Poniżej pokazujemy więc tekst HTML prostego dokumentu, który będziemy stopniowo rozbudowywać o nowe elementy.
Ten kod jest zawarty na dołączonej do książki płytce CD-ROM, w kartotece Rozdz36, jako plikhtmll.htm.


. Znaczniki, które są globalne w zakresie, występują zwykle pomiędzy początkowym i końcowym znacznikiem nagłówka, i . Większość innych znaczników i zawartość dokumentu występuje pomiędzy znacznikami ciała dokumentu, i . Do tych znaczników należą znaczniki tekstu, formatowania, obrazków, łączy, apletów lub skryptów.
Tabela 36.1 zawiera krótką listę podstawowych znaczników HTML. Większość z tych znaczników posiada odpowiedni znacznik kończący, zaczynający się znakiem ukośnika. Znacznika kończącego nie posiadają znaczniki

---

, oraz . Ta lista nie jest oczywiście pełna, zaś wiele z podanych znaczników posiada dodatkowe parametry modyfikujące ich działanie. Istnieje wiele dobrych źródeł do nauki HTML, dostępnych zarówno w Internecie, jak i w najbliższej księgarni. Innym skutecznym sposobem zaznajomienia się z HTML jest przejrzenie stron pobranych przez przeglądarkę i sprawdzenie, jak radzą sobie inni twórcy stron WWW.
Arkusze stylów
Przy opracowywaniu języka HTML nie miano zamiaru umieszczać w nim informacji określających wygląd dokumentu. Jednak dla wygody zastosowano w nim znaczniki, pozwalające na pogrubienie tekstu czy zmianę jego czcionki. Ta praktyka ignorowała zasadę rozdzielenia struktury od formy. To oznaczało, że interpreter dokumentu nie był w stanie jednoznacznie określić jego wyglądu, gdyż instrukcje wyświetlania były osadzone w dokumencie. W celu całkowitego odseparowania stylu zarówno od zawartości jak i struktury, opracowano koncepcję arkuszy CSS (Cascading Style Sheet).
Jeśli kiedykolwiek pracowałeś w dziale korporacji zajmującym się publikacjami, z pewnością masz doświadczenie z globalnymi wytycznymi co do wyglądu publikacji. Istnieją ogólne zalecenia co do rodzaju czcionek, kolorów, papieru oraz ogólnego wyglądu dokumentów wydawanych przez firmę. Te zalecenia nie mówią nic o tym, co ma się znaleźć w publikacji, lecz dość precyzyjnie określają, jak ma ona wyglądać. Arkusze stylów są podobne, gdyż zarządzają wyglądem dokumentów, bez wpływania na ich zawartość.
CSS pozwala na zdefiniowanie właściwości wyglądu i powiązanie ich z elementami dokumentu. Oznacza to, że w dokumencie HTML możesz określić styl i wygląd konkretnego znacznika, dzięki czemu masz możliwość dołączyć do dokumentu informacje o formatowaniu. Kaskada w nazwie odnosi się do faktu, że można stosować uporządkowaną sekwencję stylów, w której style zdefiniowane wcześniej mogą być zastąpione przez style zdefiniowane później. Oprócz precyzyjniejszej kontroli pozwala to także na ograniczenie ilości informacji osadzonych w dokumencie. Jeśli wszystkie informacje o stylach byłyby przechowywane w oddzielnym pliku, a w przypadku CSS istnieje taka możliwość, ten plik musi być przesłany tylko raz, zamiast na przykład przesyłania informacji o czcionkach w każdym z dokumentów. Dzięki skryptom, stanowiącym kolejny element dokumentów, którym zajmiemy się później, istnieje możliwość dynamicznej zmiany wyglądu, gdyż możesz modyfikować właściwości na bieżąco.

Tabela 36.1. Standardowe znaczniki HTML
Znacznik
Opis

Powoduje wcięcie tekstu względem lewego marginesu.


Wymusza przejście do nowej linii.

Wymusza wyświetlenie pochyłego tekstu, tak jak w cytatach.

Określa listę definicji. Każda definicja będzie
wcięta względem elementu, do którego się odwołuje.

Powoduje wyróżnienie tekstu, zwykle przy użyciu pochyłej czcionki.

---

Tworzy poziomą linię rozdzielającą.

Wyznacza poziom nagłówka, gdzie n to l, 2, 3, 4, 5 lub 6.

Powoduje wyświetlenie w dokumencie obrazka.

Oznacza element listy.

Oznacza hiperłącze do innego URL-a.

Wyświetla numerowaną listę. Każdy element listy
zaczyna się numerem. Poszczególne elementy wyznaczają znaczniki

.

HTML ignoruje znaki powrotu karetki ASCII w tekście dokumentów. Ten znacznik oznacza przejście do nowego akapitu.

Powoduje wyróżnienie tekstu, zwykle poprzez użycie wytłuszczonej czcionki.

<sub>Wyświetla indeksy dolne.

<sup>Wyświetla indeksy górne.

Powoduje podkreślenie tekstu.</sup></sub>

Wyświetla listę nie numerowaną. Każdy element listy zaczyna się wskazanym znakiem elementu listy.

Jeśli chcesz, by nagłówek pierwszego poziomu, oznaczony znacznikiem , został wyświetlony z użyciem 18-punktowej czcionki Courier, możesz to osiągnąć za pomocą linii:
Hl {font-size: 18pt; font-family : "Courier" }
Style mogą być umieszczane w trzech miejscach. Można je osadzać w dokumencie jako instrukcje inline zmieniające styl pojedynczego, konkretnego znacznika. Można je umieszczać w nagłówku dokumentu, co powoduje, że odnoszą się do wszystkich znaczników w dokumencie. Style mogą być także zdefiniowane i zapisane w osobnym pliku (zwykle z rozszerzeniem .CSS); do dołączania pliku stylów do dokumentu służy znacznik . W każdym z tych trzech przypadków do określenia atrybutu stylu używa się znacznika
.
Napis text/css wskazuje, że językiem arkusza stylu jest CSS. Nie każda przeglądarka wymaga języka CSS, lecz właśnie ten język (kod) jest używany w przeglądarkach Microsoftu i Netscape.
Pomiędzy początkowym i końcowym znacznikiem stylu znajduje się seria selektorów określających styl. Na przykład, w poprzednim pliku, jeśli zechcielibyśmy wyrównać wszystkie elementy listy do prawego marginesu, w nagłówku pliku HTML umieścilibyśmy poniższe linie:

Zanim opiszemy format tych deklaracji selektorów i stylów, zajmijmy się ostatnim i najbardziej wydajnym ze sposobów definiowania arkuszy stylów. Służy do tego mechanizm zwany połączonym arkuszem stylu. Połączony arkusz stylu jest tym, w którym informacje o stylu są przechowywane w osobnym pliku.
Aby połączyć arkusz stylu z dokumentem HTML, w nagłówku dokumentu umieszcza się znacznik łącza, określający adres URL pliku arkusza stylu. URL wskazuje na zewnętrzny plik. Jeśli dokument HTML jest ładowany poprzez sieć, jest lokalnie buforowany. Plik wskazywany przez URL musi zawierać jedynie informacje odnoszące się do definicji stylów. Nie może zawierać innych znaczników HTML. Linia dołączająca arkusz stylu ma postać:

gdzie plik. css jest zastąpione przez odpowiedni URL. Atrybut REL służy do wskazania, że plik dla tego łącza jest arkuszem stylu. Atrybut TYPE jest taki sam jak w poprzednim przykładzie. Atrybut HREF określa, że adresem URL pliku jest plik. css.
Składnia arkusza stylu
Arkusz stylu przechowywany w osobnym pliku ma taką samą formę jak arkusz tylu osadzony w nagłówku dokumentu HTML. W tej sekcji omówimy podstawy formularza arkusza stylu. Każda reguła w stylu składa się z dwóch części. Pierwszą częścią jest selektor, który może być selektorem prostym lub kontekstowym. Selektor prosty określa styl znacznika bez względu na jego kontekst i jest oczywiście prostszy w użyciu. Selektor kontekstowy określa wygląd elementu HTML w zależności od jego kontekstu.
Selektor prosty składa się ze znacznika HTML, po którym następuje reguła prezentacji. Selektor kontekstowy zawiera rozdzielony spacjami ciąg znaków, na przykład H2 LI, który w tym przypadku oznacza, że ten selektor odnosi się do wszystkich elementów listy zawartej w nagłówku drugiego poziomu. Oczywiście, ta definicja jest znacznie uproszczona; pełniejszy opis składni deklaracji arkusza stylu zawiera ramka "Właściwości arkusza stylu".
Po selektorze następuje druga część reguły, jego deklaracja. Deklaracja także składa się z dwóch części: właściwości i wartości. Reguła ma formę {font-famiiy:courier} lub { margin: 6em }. Reguła zaczyna się i kończy nawiasem klamrowym. Wewnątrz nawiasów znajduje się właściwość oraz jej wartość, rozdzielone dwukropkiem. Konieczne jest podawanie pełnej składni CSS, gdyż musi ona definiować wygląd mnóstwa możliwych elementów składających się na stronę. W ramce podajemy listę niektórych z właściwości. Wartości dla elementów tej listy są jeszcze bardziej zróżnicowane. Jeśli masz zamiar projektować kompletne arkusze stylów CSS, powinieneś zajrzeć na stronę WWW organizacji W3C (World Wide Web Consortium) pod adresem www.w3.org. Na tej stronie WWW znajdziesz dokumenty dokładnie definiujące wszystkie właściwości i wartości.
Prosta przeglądarka plików
W celu stworzenia prostej aplikacji, w której możesz sprawdzić to, czego się dotąd nauczyłeś na temat HTML i CSS, możesz zbudować małą przeglądarkę plików opartą na klasie CHtmiYiew. Ta aplikacja będzie podobna do aplikacji z rozdziału 35., lecz tym razem, zamiast wykorzystywać ją do poruszania się po sieci WWW, uzupełnimy ją o możliwość otwierania plików HTML wybieranych w standardowym oknie dialogowym Otwórz plik. To oznacza, że komputer, w którym korzystasz z aplikacji, nie musi być podłączony do Internetu ani do żadnej innej sieci. Plik, jeśli tylko jest poprawnym plikiem HTML, zostanie otwarty i wyświetlony w głównym oknie aplikacji. Tworząc program, zacznij tak jak w rozdziale 35., tworząc domyślny projekt korzystający z klasy CHtmiview. Główną różnicą będzie to, że zamiast nazwać projekt FirstCHTML nazwij go HTMYiewer co przedstawiono poniżej:

Właściwości arkusza stylu
Oto lista niektórych z bardziej przydatnych właściwości obiektu, definiowanych w arkuszu stylu:
Właściwości czcionki
font
font-style

font-family font-variant

font-size
font-weight

Właściwości tła
backgroundbackground-position

background-attachment
background-repeat
background-color
color
background-image

Właściwości tekstu
letter-spacing
text-indent
line-height
text-transform
text-align
vertical-align
text-decoration
word-spacing

Właściwości ramki
border
height

border-bottom
margin

border-bottom-width
margin-bottom

border-color
margin-left

border-left
margin-right

border-left-width
margin-top

border-right
padding

border-right-width
padding-bottom

border-style
padding-left

border-top
padding-right

border-top-width
padding-top

border-width
width




1. Uruchom AppWizarda.
1. Jako rodzaj projektu zaznacz MFC AppWizard (exe), zaś jako nazwę projektu wpisz HTMViewer.
3. Jako rodzaj interfejsu wybierz SDI (Single Document Interface, interfejs jed-nodokumentowy).
4. Aż do czwartego okna dialogowego kreatora wybieraj domyślne opcje. W oknie czwartym wyłącz dokowalny pasek narzędzi, pasek stanu oraz opcje obsługi wydruku.
5. W piątym oknie dialogowym pozostaw domyślne ustawienia.
6. W szóstym oknie dialogowym zmień klasę bazową (CView) klasy widoku (CFirstCHTMLView) na klasę CHtmIYiew.
7. W metodzie OninitialUpdate () klasy CHTMViewerView usuń lub umieść w komentarzu linię:
Navigate2(_T("http://www.mierosoft.com/visualc/"), NULL, NULL) ;
8. Za pomocą ClassWizarda dodaj do klasy CHTMViewerView funkcję obsługi dla polecenia o identyfikatorze ID_FILE_OPEN.
9. W pliku HTMVie\verView.cpp, w funkcji OnFileOpen (), dopisz poniższe linie:
CFileDialog dlgFile(TRUE); dlgFile.m_ofn.IpstrFilter =
_T("PIiki HTM\0*.htm;*.html\0") ; dlgFile.m_ofn.nFilterIndex = 1; dlgFile.m_ofn.hwndOwner =
AfxGetMainWnd()->GetSafeHwnd(); if( dlgFile.DoModal() == IDOK )
Navigate2(dlgFile.GetPathName(), NULL, NULL);
10. Skompiluj i uruchom aplikację. W tym momencie możesz otwierać i przeglądać przykłady przedstawione w tym rozdziale.
Modele obiektów i zdarzeń
Aby umieścić skrypt w odpowiednim kontekście, musisz najpierw mieć przynajmniej ogólne pojęcie o architekturze modelu obiektu dokumentu i okna. Nie należy mylić tych okien z Windows, choć sama koncepcja jest podobna, zaś dobre opanowanie okien Windows pomoże w zrozumieniu nowego modelu.
W DHTML obiekt okna zajmuje najbardziej ogólny poziom. Stanowi kontener dla dokumentu, zdarzeń, okien ramek itd. Nie myl obiektu okna z samym oknem przeglądarki, mimo iż są one blisko powiązane. Obiekt okna w DHTML pozwala na dostęp do informacji o przeglądarce, jej ramkach oraz oknach dialogowych. Pozwala także na modyfikowanie wyglądu przeglądarki. Jednak kluczową rolą obiektu okna jest jego miejsce w architekturze.
Okno jest kontenerem dla kilku innych obiektów, z którymi współpracuje kod oraz użytkownik. Należą do nich:
Dokument
Zdarzenie
Ramki
Historia
Lokalizacja
Ekran
Szczegółami współpracy z oknem zajmiemy się nieco później, teraz zapoznajmy się z kilkoma innymi obiektami, które mogą być zawarte w oknie.
Najważniejszy jest obiekt dokumentu. Obiekt dokumentu jest właściwością okna, zresztą podobnie jak i inne wymienione elementy. Możesz potraktować właściwość podobnie do składowej klasy C++, funkcji lub zmiennej. Wszystkie elementy dokumentu HTML są dostępne właśnie poprzez dokument będący właściwością okna. Fragmenty tekstu, łącza oraz obrazki, wszystkie one są obiektami w dokumencie. Te elementy stają się dostępne jako kolekcje elementów zawartych w obiekcie dokumentu. Na przykład, globalny styl dokumentu może zostać zmodyfikowany przez dokonanie zmian w elemencie kolekcji arkuszy stylów. Obiekt dokumentu zawiera następujące kolekcje:
Kotwice
Applety
Elementy
Formularze
Ramki
Obrazki
Łącza
Skrypty
Arkusze stylów
Równie ważny co obiekt dokumentu jest obiekt zdarzenia, także zawarty w obiekcie okna. Obiekt zdarzenia powoduje, że coś się zaczyna dziać. Zdarzenia są sygnałami wysyłanymi w związku z aktywnością użytkownika lub z powodu nastąpienia zmiany w dokumencie lub oknie. Do zmian w dokumencie powodujących zgłoszenie zdarzeń należą:
Przeniesienie ogniska wprowadzania z jednego elementu na inny
Załadowanie dokumentu lub innego obiektu
Wystąpienie błędu
Dwie charakterystyki tego nowego modelu znacznie zwiększają jego możliwości. Pierwszą z nich jest tzw. bąbelkowanie zdarzeń, zaś drugą koncepcja domyślnych akcji. Każdy element w hierarchii zawierający element, w który oryginalnie zostało zgłoszone zdarzenie, ma szansę na nie odpowiedzieć. Możesz wyobrazić to sobie jako bąbelek zdarzenia przechodzący w górę hierarchii lub jako falę rozchodzącą się od najbardziej wewnętrznego elementu w stronę elementów otaczających. Postęp zdarzenia trwa aż do osiągnięcia najwyższego poziomu, chyba że zdarzenie zostanie anulowane przez któryś z wcześniejszych elementów. Domyślne akcje to po prostu działania wykonywane przez przeglądarkę, jednak można je przesłonić własnymi akcjami. Dzięki temu kodowanie dokumentów DHTML jest dużo łatwiejsze, gdyż musisz odpowiedzieć jedynie na zdarzenia, które chcesz obsłużyć w specjalny sposób.
Niektóre zdarzenia
Oto kilka zdarzeń, na które mogą reagować obiekty:
onabort onerror onmouseover
onafterupdate onerrorupdate onmouseup
onbeforeunload onf ilterchange onreadystatechange
onbeforeupdate onf inish onreset
onblur onforcus onresize
onbounce onhelp onrowenter
onchange onkeydown onrowexit
onclick onkeypress onscroll
ondataavailable onkeyup onselect
ondatasetchanged onload onselectstart
ondatasetcomplete onmousedown onstart
ondblclck onmousemove onsubmit
ondragstart onmouseout onunload
W przeszłości, gdy element HTML zasygnalizował zdarzenie, lecz nie istniała dla niego procedura obsługi, zdarzenie było po prostu ignorowane i gubione. Dzięki bąbelkowaniu zdarzeń takie nieobsłużone zdarzenia są kierowane do elementu nadrzędnego. Zdarzenie wędruje wzdłuż hierarchii elementów aż zostanie obsłużone i usunięte. Bąbelkowanie redukuje ilość kodu, jaki musisz tworzyć i konserwować, gdyż wiele wspólnych zdarzeń możesz obsłużyć na wyższym poziomie, w pojedynczej funkcji obsługi. Dzięki temu można także łatwiej wprowadzać zmiany, gdyż nie trzeba w tym celu modyfikować całego istniejącego kodu.
DHTML posiada niezależne od języka mechanizmy do korzystania ze zdarzeń. Oprócz tego pozwala na anulowanie zdarzenia, tak aby nie było ono kierowane dalej, w górę hierarchii. Ta możliwość jest częścią obiektu zdarzenia, będącego jedną z właściwości obiektu okna.
Skrypty
Ostatnim tematem, jaki musimy poruszyć omawiając DHTML, są skrypty. Korzystając z podstawowej wiedzy zebranej w poprzednich sekcjach i łącząc ją z tym czego dowiesz się teraz, możesz zacząć eksperymentowanie z różnorodnymi aktywnymi dokumentami DHTML.
Model obiektów DHTML jest używany przez skrypty powiązane z dokumentami HTML. Skrypty mogą być albo osadzone w dokumencie, albo zawarte w zewnętrznej bibliotece, dołączanej do dokumentu przy użyciu znacznika skryptu. Skrypty mogą być pisane w języku YBScript lub JavaScript. W tej sekcji będziemy eksperymentować z JavaScriptem. Ogólna składnia elementu skryptu jest następująca:

Etykieta language może być zastąpiona przez nazwę języka, JScript, JavaScript lub VBScript, w zależności od języka, w którym skrypt został stworzony. Jeśli jest obecny, to typ TYPE przesłania atrybut LANGUAGE. W przypadku JavaScriptu użyj typu "text/ JavaScript". Dla VBScriptu użyj typu "text/VBScript". Atrybut SRC jest używany do wskazania że instrukcje skryptu są zawarte w zewnętrznym pliku o nazwie optional-f ilename. Użycie atrybutu DEFER informuje przeglądarkę, że skrypt nie zawiera niczego poza deklaracjami funkcji. W ten sposób przeglądarka może dalej ładować i wyświetlać stronę, zamiast w pełni przetwarzać i interpretować skrypt. Atrybut DEFER służy poprawieniu wydajności wyświetlania dokumentu.
Dokument może zawierać wiele różnych skryptów, które mogą być ulokowane w nagłówku lub w ciele dokumentu. W ten sposób działanie skryptu przypomina działanie języka interpretowanego, czyli że skrypt jest wykonywany podczas przetwarzania dokumentu. Ważne jest więc, aby przy tworzeniu skryptów brać pod uwagę istnienie właściwości i obiektów, do których skrypt się odwołuje. Mamy tu z sytuacją inną niż w języku C++, gdzie wszystko musi być z góry zdefiniowane, zaś plik wykonywalny jest budowany w dwóch lub więcej przebiegach kompilatora. W skrypcie można w dowolnym miejscu korzystać nie tylko ze zmiennych, ale także ze składowych tych zmiennych.
Oprócz skryptów zawartych w osobnych funkcjach możesz przypisywać skrypty konkretnym elementom jako ich atrybuty. Mają one postać:

Element może być dowolnym identyfikatorem HTML, takim jak czy . Nazwą zdarzenia może być na przykład onselect lub onmouseover. Skrypt składa się z instrukcji języka YBScript lub JavaScript. Przykłady podamy za chwilę.
JavaScript i model obiektów DHTML zasługują na osobne książki. Jednak zamiast wyczerpująco drążyć temat, naszym celem było zapewnienie wiedzy wystarczającej do spróbowania kilku rzeczy. W pozostałej części rozdziału zaprezentujemy kilka skryptów, dzięki którym będziesz mógł ogólnie zrozumieć, jak posługiwać się językiem DHTML.
Skrypty dla elementów
Najpierw wróćmy do naszego prostego dokumentu HTML i uzupełnijmy go o zmianę czcionki w momencie, gdy wskaźnik myszy znajdzie się nad elementem listy. Niech w takiej sytuacji tekst zostanie rozciągnięty na całą szerokość strony. Możesz to osiągnąć, dopisując do obiektu

skrypt reagujący na zdarzenie. W przedstawionym przykładzie w odpowiedzi na umieszczenie myszy nad pozycją listy rozciągniemy linię tekstu na całą szerokość strony. Oto odpowiedni kod HTML:








Uruchamianie skryptu podczas ładowania dokumentu
Przyjrzyjmy się bardziej zaawansowanej demonstracji JavaScriptu, zdarzeń oraz elementów HTML. W tym skrypcie zobaczysz, jak można definiować i wywoływać funkcje, które niekoniecznie muszą być powiązane z określonymi elementami. Nauczysz się wywoływać funkcje w momencie ładowania dokumentu HTML oraz pobierać informacje o elementach na stronie w celu późniejszego modyfikowania pozycji elementu. Aby osadzić opis w jakimś kontekście, spójrz na rysunek 36.6, aby zobaczyć wygląd tego dokumentu HTML w naszej przeglądarce.
Dokument HTML, na podstawie którego powstał ten rysunek, zawiera kod JavaScript reagujący na dwa zdarzenia. Jednym z nich jest kliknięcie myszką tekstu w górnej części dokumentu, zaś drugim jest kliknięcie tekstu w dolnej części dokumentu. Skrypt zawiera także kod inicjalizujący niektóre zmienne w momencie ładowania dokumentu. Kod tego dokumentu HTML został przedstawiony na listingu 36.2. Plik został sformatowany w celu lepszego przedstawienia struktury.
Listing 36.2. HTML wyświetlający ruchomy obrazek




ONCLICK="anAlertDialog() ; ">

ONCLICK="aModalDialog() ; ">


Także tym razem, zanim przystąpisz do analizowania skryptu JavaScript, spójrz na zawartość ciała kodu HTML. Skład się on z trzech podobnych elementów. Każdy z nich zaczyna się od znacznika . Atrybut TYPE kontrolki wejściowej jest ustawiony na BUTTON, co powoduje, że w dokumencie zostają wyświetlone przyciski. Dostępnych jest jeszcze kilka innych typów kontrolek, na przykład przyciski opcji czy przyciski radiowe. W przypadku przycisku wartość atrybutu VALUE jest tekstem wypisanym na przycisku. Przycisk może reagować na kilka różnych zdarzeń spomiędzy zdarzeń zebranych w tabeli 36.3.
Tabela 36.3. Zdarzenia przycisków
onblur
onkeydownonm
ouseout
onclick
onkeypressonm
ouseover
ondblclick
onkeyup
onmouseup
onfocus
onmousedow
nonresize
onhelp
onmousem
oveonselect


Zwróć uwagę, że przycisk nie odpowiada na każde ze zdarzeń z tabeli 36.3. Także inne elementy nie reagują na wszystkie zdarzenia, więc musisz to brać pod uwagę.
W tym przykładzie przycisk reaguje na zdarzenie onclick wywołaniem funkcji Java-Scriptu przypisanej temu zdarzeniu. Każdy przycisk w tym przykładzie ma w przypadku kliknięcia odmienne zadanie do wykonania. Zwróć uwagę, że drugi przycisk w dialogu potwierdzenia zmiany korzysta z dodatkowej właściwości. Zastosowany identyfikator powinien kojarzyć Ci się z identyfikatorem z poprzedniego przykładu. Jednak w tym przypadku zamiast zmieniać pozycję elementu zmieniamy kolor napisu na przycisku.
Jako dokument dla trzeciego okna dialogowego został użyty jeden z poprzednich skryptów. Zwróć uwagę, że okno dialogowe reaguje na ruchy wskaźnika myszy tak jak reagowało okno przeglądarki w tamtym przykładzie.
Teraz przyjrzyj się samemu skryptowi. Każda z funkcji odnosi się do obiektu okna. Pamiętajmy, że obiekt okna jest w hierarchii DHTML obiektem najwyższego poziomu. W związku z tym dokument HTML ma do niego dostęp, gdyż dokument istnieje jako obiekt wewnątrz obiektu okna.
Poza opisanymi tu składowymi obiekt okna udostępnia także wiele innych metod i właściwości. Możesz wypisywać komunikaty na pasku stanu. Możesz modyfikować położenie samego okna przeglądarki. Możesz nawet zbierać informacje o ekranie, na którym jest wyświetlany dokument.
Podsumowanie
DHTML i JavaScript są ważnymi technologiami, które cały czas się rozwijają. Analizując przedstawione przykłady, zdobyłeś doświadczenie, dzięki któremu możesz się zorientować w ich możliwościach, nauczyłeś się modyfikować formatowanie dokumentu, przesuwać obrazki, reagować na zdarzenia oraz wyświetlać dialogi w dokumentach DHTML. Dzięki klasie CHtmiview i kontrolce Web Browser możesz szybko przetestować działanie każdego z zaprezentowanych dokumentów.
Skrypty w Visual Studio Tworzenie własnego AppWizarda

Wyszukiwarka