KURS

DHTML

Wstęp

Ten wstęp będzie krótką informacją na temat możliwości Dynamicznego HTML-a. Daje on dużo więcej możliwości niż sam język JavaScript. Jednocześnie ma z nim bardzo dużo wspólnego.

Termin Dynamiczny HTML (DHTML) jest stosunkowo nowy. Możliwości, które są zwane DHTML-em powstawały wraz z nowymi wersjami przeglądarek. Jest on rozbudowaniem JavaScriptu o nowe możliwości i techniki połączonym z arkuszami stylów i nowymi możliwościami przeglądarek.

Nowa wersja języka skryptowego pozwala dynamicznie zmieniać zawartości części strony WWW, daje dostęp do nowych możliwości, niedostępnych w starych wersjach tego języka. Strona nie musi być już statyczna. Ruch na stronach WWW to przede wszystkim animowane banery oraz jeszcze rzadki Flash. JavaScript daje bardzo szerokie możliwości dodawania do niej ruchomych elementów, zmieniania ich pozycji, ukrywania, i pokazywania ich. Nowe możliwości to np. kontrolowanie rozdzielczości ekranu. Mając tak cenną informację, można dostosować szerokość tabelki, rozmiar czcionki, odstępy itd.

Bardzo często stosowanym wykorzystaniem nowych możliwości są warstwy, zwane także blokami. Mają bardzo szerokie zastosowanie, chociaż nie są jeszcze tak często wykorzystywane. Pozwalają nanieść na stronę normalne elementy stron WWW, z dokładnym określeniem ich położenia. Elementy warstwy mogą znaleźć się nad innym tekstem lub grafiką. Wygląda to, jakby jedna strona była naniesiona na już istniejącą. Warstwa może być w każdej chwili ukryta lub zamieniona na inną, zawierającą inne elementy strony WWW. Sposób jej pokazywania, poruszania się, ukrywania, miejsce położenia można także zmieniać.

Warstwa może być również ruchoma - w postaci rozwijanego menu. Takie rozwiązanie daje możliwość nawigacji całego serwisu w bardzo wygodny sposób, niczym normalny program exe. Jeżeli menu przeszkadza, to można je myszką przesunąć w inne miejsce - metodą przenieś i upuść. Można go rozwinąć, by dostać się głębiej w serwis. Zaletą jest jego bardzo mała powierzchnia, nie większa niż standartowego menu programowego. Wprawdzie stworzenie profesjonalnego menu zajmie wiele pamięci, ale umieszczając go w dowolnym zewnętrznym pliku, jak style, pozwala udostępnić menu z każdej strony, bez ponownego ładowania. A strona zyskuje dodatkowe miejsce, na inne ważniejsze rzeczy.

Przy pomocy JavaScript powstają (jeszcze nieliczne), ale bardzo ciekawe banery. Po najechaniu myszką jego elementy podążają za kursorem, mimo, że przycisk myszki jest cały czas zwolniony. To przykład kolejnej możliwości DHTML-u - kontrolowanie pozycji kursora. Alternatywnym rozwiązaniem jest możliwość przesuwania pewnych elementów banera metodą przenieś i upuść. Jeżeli wszystko jest zrobione estetycznie z elementami grafiki, to daje dobre wrażenie tradycyjnego baneru z wyjątkowymi właściwościami, a tym samym atrakcyjność reklamy wzrasta.

Rozwiązania DHTML-a mogą być imponujące, w zależności od inicjatywy i pomysłu. Trzeba jednak założyć, że niektóre z nich będą dostępne tylko w najnowszych wersjach przeglądarek. Spora część internautów używa mimo wszystko nowych przeglądarek, czyli tych, które radzą sobie z większością skryptów. Dobrze przygotowany serwis wykorzystujący możliwości JavaScriptu może mieć więcej wspólnego z prezentacją multimedialną, niż ze stroną WWW. A możliwości języka wzrastają z każdą nową wersją przeglądarki.

Definiowanie warstw

Każdej warstwie, podobnie jak wielu elementom stron WWW, można przypisać pewne własności, które potem można modyfikować, w zależności od potrzeb. Właściwości te definiuje się w bloku stylów:

<STYLE TYPE="text/css">
#nawza_warstwy {właściwość1; właściwość2}
</STYLE>

Nazwa bloku poprzedzona jest zawsze znakiem #. Dostępnych jest kilka właściwości dla każdej warstwy:

·         POSITION: określa pozycje warstwy. Może przyjąć dwie wartości: Absolute - określana jest względem górnego lewego rogu okna (jak ta na tej stronie); Relative - określana względem poprzedniego elementu strony WWW.

·         VISIBILITY: określa, czy warstwa ma być widoczna. Visible - warstwa będzie widoczna, Hidden - będzie całkowicie ukryta.

·         BACKGROUND-COLOR oraz LAYER-BACKGROUND-COLOR: definiuje kolor warstwy, jest takim samym odpowiednikiem jak BGCOLOR określanym w <BODY> dla strony. Pierwsza cecha jest tylko dla IE, druga tylko dla NN, dlatego by osiągnąć zamierzony efekt, należy używać obu równocześnie.

·         WIDTH: określa długość.

·         HEIGHT: określa wysokość.

·         LEFT: określa odległość warstwy od lewego marginesu okna.

·         TOP: określa odległość warstwy od górnego marginesu okna.

·         CLIP: pozwala określić, jaka część warstwy ma być widoczna (dostępne tylko przy absolutnej pozycji). Używa się do tego celu prostokąta Rect(0,200,100,0). Wartości określają kolejne wielkości względem wszystkich marginesów (rozmiarów) warstwy: górny, prawy, dolny, lewy.

·         Z-INDEX: określa, która warstwa znajduję się najwyżej. Ta z największym indeksem jest na górze. Jest pomocne, gdy wszystkie warstwy są widoczne i zachodzą na siebie.

Wszystkie odległości są wielkościami w pikselach. Kolejne wartości w stylach należy rozdzielać średnikiem, a wartość właściwości jest poprzedzona dwukropkiem. Wielkości warstw określane przez WIDTH oraz HEIGHT mogą być źle odczytywane przez NN, jeżeli element bloku będzie większy, niż rozmiar warstwy. Ale także odwrotnie, jeżeli element nie będzie duży (mały gif), a rozmiar warstwy wielki, to wielkość bloku także się zmieni. Mówiąc ściślej w NN wielkości dostosowują się do rozmiarów umieszczonych w niej elementów. W takim przypadku warto umieścić wszystkie elementy w tabeli. Ponadto każda warstwa może zawierać formatowania wielkości czcionek i kolorów itd. Przykładowa definicja może wyglądać tak:

<STYLE TYPE="text/css">
#Show {POSITION:Absolute; VISIBILITY: Visible; WIDTH:200; HEIGHT:100; LEFT:100; TOP:5}
</STYLE>

Po określeniu właściwości warstwy należy jeszcze sporządzić jej zawartość i wkleić ją do dokumentu.:

<DIV ID="Show">
 element strony WWW
 element strony WWW
 element strony WWW
</DIV>

Blokiem jest tag <DIV>, zawsze z parametrem ID, który przyporządkowuje tej warstwie właściwości. Elementy strony WWW, to po prostu dowolne elementy strony: rysunki, tekst, formularze itd. Koniec elementów warstwy kończy się z zamknięciem bloku DIV

Stosowanie stylów pozwala na wielokrotne wykorzystanie jednej właściwości do kilku warstw. Jest to dobre, kiedy kilka warstw musi być umieszczonych jedna nad drugą. Wadą jest jednak niemożliwość odwołania się do konkretnej warstwy. Jeżeli bloki zostaną zadeklarowane przez jedną nazwę, to modyfikacja nie będzie działała prawidłowo, bo nazwy będą się dublowały. Dlatego takie wykorzystanie nie ma właściwie sensu, chyba, że bloki będą przezroczyste. W przypadku, gdy istnieje tylko jedna warstwa, zamiast ID można umieścić style już w bloku (ale modyfikacja właściwości takiej warstwy jest niemożliwa, bo nie posiada ona parametru ID):

<DIV STYLE="POSITION:Absolute; VISIBILITY: Visible; LEFT:100; TOP:5">
 elementy strony WWW
</DIV>

Nie tracąc możliwości zmieniania parametrów wartst można wprowadzić klasy i całe formatowanie uprościć. Jest to użyteczne, gdy kilka warstw posiada te same właściwości: kolor, czcionkę, położenie itd. Wprowadzamy w stylach klasę:

.klasa1 {POSITION:Absolute; VISIBILITY:Visible; WIDTH:200; HEIGHT:100; FONT-SIZE:Blue}

Jeżeli wszystkie elementy są identyczne, to warto je wsprowadizć do klasy. Jeżeli nie są, to trzeba zbudować normalną warstwę typu #Blok {...} w stylach. Obejmi ona pozostałe parametry, którymi róznią się bloki. Deklaracja bloku wygląda wtedy inaczej:

<DIV CLASS="klasa1" ID="Show">

Jeżeli warstwa nie będzie miała przypisanego koloru (będzie przezroczysta), to nie oznacza to, że inne elementy umieszczone pod nią będą mogły być aktywne. Linka umieszczona pod blokiem nie może być kliknięta, mimo, że jest widoczna. Podobnie rzecz ma się z przyciskami. Spróbuj przesunąć warstwę nad menu i kliknąć jedną z pozycji, która znajduje się pod blokiem. Jednak, jeżeli wielkość warstwy będzie ograniczona przez CLIP, wtedy warstwa będzie tak wielka, jak określa ta właściwość, nie zaś jak WIDTH, czy HEIGHT

Przesuwanie warstw

Podstawowym narzędziem do obsługiwania warstw jest nadawanie im ruchu. Jednak dany blok musi mieć absolutną wartość położenia. Odbywa się to w różny sposób, w zależności od tego, czy strona jest otwarta przez Navigatora, czy Explorera. W związku z tym należy określić typ przeglądarki. Służy do tego prosta instrukcja :

nn4= (document.layers) ? true : false;
ie4= (document.all) ? true : false;

Uwaga: powyższa deklaracja jest przykładem, ale będzie wykorzystywana domyślnie także w dalszych tematach, gdzie będzie konieczna do sprawdzenia przeglądarki. Zmienne ie4 oraz nn4 będą także pojawiały się dalej.

W Navigatorze obiektem, który daje możliwość modyfikowania zmian w bloku jest document.layers. W Exploratorze jest to document.all.style. Odwołanie się do przykładowego położenia top warstwy o nazwie Blok wygląda następująco:

if(nn4) document.layers["Blok"].top=120;
if(ie4) document.all["Blok"].style.top=120;

W obydwu przypadkach odwołanie następuje przez obiekt document. Następnie, w zależności od przeglądarki jest obiekt layers lub all i nazwa warstwy. Ponadto w Exploratorze jest jeszcze konieczne dodanie style. W końcu konkretna właściwość, którą trzeba zmienić. Po takim zabiegu warstwa zostanie przesunięta na odległość 120 pikseli od początku strony. Modyfikując ostatni moduł można zmieniać różne właściwości bloku (o czym także dalej).

Przykładowa funkcja (pobiera dwa argumenty - współrzędne warstwy), która będzie obsługiwała położenie bloku Blok, wygląda następująco.

function Pozycja(T,L) {
if (nn4) {
 document.layers["Blok"].left=L;
 document.layers["Blok"].top=T;
 }
else if (ie4) {
 document.all["Blok"].style.left=L;
 document.all["Blok"].style.top=T;
 }

Do odczytywania bloku służą te same instrukcje w Navigatorze i podobne w Exlporatorze. Wygląda to następująco:

if(nn4) {
 Left = document.layers["Blok"].left; - lewa krawędź
Top = document.layers["Blok"].top}; - górna krawędź

if(ie4) {
 Left = document.all["Blok"].offsetLeft;
 Top = document.all["Blok"].offsetTop};

Powyższa możliwość danje najlepsze efekty przy odczytywaniu pozycji bloku w Exploratorze, ale nie jest jedyną możliwością. Jej zaletą jest bezproblemowa możliwość odczytania pozycji. Dwie poniższe funkcja także działają, ale dopiero wtedy, gdy pozycja danej warstwy zostanie zmodyfikowana przez skrypt. Gdy pozycja zostanie sprawdzona jeszcze przed jakąkolwiek modyfikacją, to pierwsza para pokaże wartości puste, druga 0

document.all["Blok"].style.top - podawane w px
document.all["Blok"].style.left

document.all["Blok"].style.pixelTop
document.all["Blok"].style.pixelLeft

Istnieje także możliwość sprawdzenia aktualnych wymiarów warstwy:

if (nn4) {
 Wys=document.layers["Blok"].document.height;
 Szer=document.layers["Blok"].document.width;
}
if (ie4) {
 Wys=document.all["Blok"].scrollHeight;
 Szer=document.all["Blok"].scrollWidth;
} 

Aby uprościć wprowadzanie zmian, można zbudować nowy obiekt, który będzie zależny od przeglądarki. Po jego stworzeniu można będzie niezależnie od przeglądarki i założeń wprowadzać zmiany. Instrukcja uniwersalna:

if (nn4) {
 Przed="document.layers";
 Za="";
}
else if (ie4){
 Przed="document.all";
 Za=".style";
 }

Taka deklaracja pozwoli używać zmiennych Przed oraz Za niezależnie od przeglądarki. Bezpośrednie użycie musi się odbyć z użyciem funkcji eval:

eval(Przed + "['Blok']" + Za + ".top=120");

Ukrywanie warstw

Drugim, bardzo ważnym narzędziem jest możliwość pokazywania i ukrywania warstw. Dobrym tego wykorzystaniem jest stworzenie galerii grafiki. Wszystkie obrazki znajdują się w tym samym miejscu i są kolejno odsłaniane.

Na początek trzeba zdefiniować tyle warstw ile będzie obrazków w galerii. W przypadku, gdy takich obrazków będzie bardzo dużo, warto zadeklarować warstwy przy pomocy pętli for. Za jej pomocą można w kilku linijkach stworzyć kilkaset warstw, a plik nie będzie dużo więcej cięższy, niż gdyby było tam tylko kilka warstw.

Pierwsza warstwa winna być widoczna. Pozostałe muszą być ukryte, by nie było problemów z tym, który obrazek jest aktualnie widoczny. Deklaracja czterech warstw przy pomocy pętli w JavaScript może wyglądać tak:

document.write('<STYLE TYPE="text/css">')
document.write("#img1 {POSITION:Absolute; VISIBILITY:Visible; LEFT:50; TOP:500; WIDTH:50; HEIGHT:50}")
for (i=2; i<=4; i++)
document.write("#img"+i+" {POSITION:Absolute; VISIBILITY:Hidden; LEFT:50; TOP:500; WIDTH:50; HEIGHT:50}")
document.write("</STYLE>");

Takie rozwiązanie daje się łatwo modyfikować. Nie ma żadnego problemu ze zwiększaniem rozmiaru 200 warstw. Wymiary wszystkich warstw muszą być takie same, by wyglądało, jakby jeden obrazek pojawiał się zamiast drugiego. Konieczna jest pozycja Absolute, z tego samego powodu, dla jakiego wymiary muszą być identyczne.

Stworzenie zawartości warstw w <BODY> także jest bardzo krótkie, bo należy stworzyć tylko jeden obrazek w każdym z bloków:

<DIV ID="img1"><IMG SRC="graph/obrazek1.gif" WIDTH=40 HEIGHT=40></DIV>

Tutaj podobnie, jak ma to miejsce w stylach, w przypadku wielu bloków, można zastosować pętlę for. Jest to już mniej wygodne, jeżeli nazwy plików są różne. Można wprowadzić tablicę z nazwami plików lub nazwać pliki kolejnymi liczbami.

Funkcje pokazujące i ukrywające mogą być zbudowane w bardzo różny sposób. W moim przypadku na początku następuje ukrycie widocznej warstwy, w skutek czego żaden blok nie jest widoczny. Następnie nowa warstwa zostaje odsłonięta. Przy modyfikacji Navigator i Explorer formalnie używają innych wartości. Jednak można używać wartości Explorera (czyli hidden i visible), bo Navigator je akceptuje.

Nr=1;
function View(Dir) {
if (nn4) document.layers["img"+Nr].visibility="hide";
if (ie4) document.all["img"+Nr].style.visibility="hidden";

if (Dir)
 if (Nr<4) Nr++; else Nr=1;
else
 if (Nr>1) Nr--; else Nr=4;

if (nn4) document.layers["img"+Nr].visibility="show";
if (ie4) document.all["img"+Nr].style.visibility="visible";
}

Funkcja pobiera argument logiczny. Jest potrzebny, by określić, czy ma być odsłonięta warstwa poprzednia, czy następna. Pierwszym blokiem, który jest widoczny jest pierwszy (zgodnie ze stylami).

Pozostaje jeszcze zbudować krótką nawigację dla galerii. Do tego celu można użyć nowej warstwy. Blok taki powinien różnić się przede wszystkim położeniem, by linki do nawigacji były zawsze widoczne. Linka Następny wywoła funkcję w argumentem true, co spowoduj odsłonięcie kolejnego obrazka:

<DIV STYLE="POSITION:Absolute; VISIBILITY: Visible; LEFT:15; TOP:550; WIDTH:150; HEIGHT:20">
<A HREF="javascript:View(false)">Poprzedni</A> || <A HREF="javascript:View(true)">Następny</A>
</DIV>

Sterowanie widocznością warstw może się także pośrednio odbywać poprzez modyfikowanie właściwości Z-INDEX. Służy do tego zIndex:

if(nn4) document.layers[ident].zIndex=2;
if(ie4) document.all[ident].style.zIndex=5;

Odsłanianie części warstw

Warstwy można ukrywać i pokazywać, można też wskazać część bloku, który ma być widoczny. Służy do tego instrukcja clip . Funkcję clip można modyfikować dynamicznie, co pozwala uzyskać ciekawe efekty np. przewijanego tekstu. Można go też uzyskać przesuwając warstwę i zasłaniając pozostałą część innym blokiem. Jest to często niewygodne, bo warstwa ukrywająca nie może być przezroczysta, ponadto swą powierzchnią zajmuje wiele miejsca.

W Navigatorze każdą krawędź, poza która dany rysunek będzie zasłonięty, ustawia się osobno:

document.layers["Blok"].clip.top - górna
document.layers["Blok"].clip.right - prawa
document.layers["Blok"].clip.bottom - dolna
document.layers["Blok"].clip.left - lewa

W Exploratorze wszystkie wartości są zawarte w jednej instrukcji. Jest to wygodne, jeżeli blok należy przesunąć w pewnie miejsce. Gorsze, jeżeli chcemy przesunąć o wektor, bo ze stringu trzeba wyciągnąć obecne wartości dotyczące położenia bloku. Modyfikacja odbywa się następująco:

document.all["Blok"].style.clip="rect(10px 100px 50px 20px)"

Wartość px można pominąć, można ją także zastąpić przecinkiem bądź średnikiem. Explorer jest tolerancyjny na różne znaki rozdzielające. Kolejne wartości clip są takie, jak definiowane w stylach.

Przykładowa funkcji, która pobiera cztery zmienne potrzebne do określenia położenia krawędzi, może wyglądać tak:

function Widok(t,r,b,l) {
if (nn4) {
 document.layers["Blok"].clip.top=t;
 document.layers["Blok"].clip.right=r;
 document.layers["Blok"].clip.bottom=b;
 document.layers["Blok"].clip.left=l;
 }
 if (ie4) document.all["Blok"].style.clip="rect("+t+" "+r+" "+b+" "+l+")"
}

Obsługa wspomnianego przesuwania bloku o zadaną wartość wymaga uwzględnienia poprzedniego położenia warstwy. W Navigatorze nie ma tego problemu, bo każda wartość jest określona poprzez osobny parametr. W Exploratorze wartości te są w postaci stringu i wyglądają przykład...