Własna specyfikacja DHTML

Autor: Paweł Rajewski

Tytuł artykułu jest oczywiście przesadzony. Nie można „szybko, łatwo i przyjemnie” uzyskać specyfikacji DHTML ze szczegółowym opisem obiektów i ich właściwości. Można natomiast stosunkowo prostym skryptem odczytać nazwy wszystkich właściwości…

… obsługiwanych przez dowolny obiekt zawarty na stronie. Można też dowiedzieć się, jakie są aktualne wartości tych właściwości i jaki jest format zawartych w nich danych. To doskonała metoda diagnostyczna i edukacyjna. Znając nazwę właściwości, można już szukać w Sieci jej dokładniejszego opisu.

Skrypt testujący

Przedstawiony niżej skrypt powstał w celach diagnostycznych. Czasami trzeba odczytać konkretną właściwość wybranego obiektu. Przez pewien czas wykorzystywałem do tego metodę alert(), ale było to niewygodne, gdy interesowała mnie większa ilość danych. I z tej niewygody powstał „program” testujący obiekty – sprawdzający wszystkie dostępne właściwości, wypisujący ich wartości i formaty danych. Teraz po prostu klikam obiekt, aby poznać kilkaset (!) jego właściwości. Co ciekawe, zdarzają się tu również pozycje, których nie można znaleźć w oficjalnej dokumentacji Microsoftu – być może są to właściwości nieudokumentowane lub oczekujące na jakieś zastosowanie w przyszłości (bo w praktyce nie wszystkie z nich działają). A zatem do działa:

<SCRIPT FOR="document" EVENT="oncontextmenu()" 
TYPE="text/Jscript" LANGUAGE="JScript"> 
var oTest=window.event.srcElement; 
// oTest=window.document; 
var oObiekt=new Array(oTest,oTest.style,oTest.currentStyle,oTest.runtimeStyle); 
var oOpis=new Array(' ',' (style) ',' (currentStyle) ',' (runtimeStyle) '); 
var oKolor=new Array('green','blue','red','brown'); 
var oWynik=new Array(); 
var j=0; 
oInfo=window.open(); 
for(var k=0;k<4;k++){ 
var oTT=oObiekt[k]; 
for(var i in oTT){ 
  if(i=='filters'){continue;}; 
  var oTTzaw=oTT[i]; 
  var oTTtyp=typeof(oTTzaw); 
  oWynik[j]='<LI>'+i+oOpis[k]+'= <FONT COLOR="'+oKolor[k]+'"><B><X'+'MP STYLE="word-wrap:break-word; display:inline">'+oTTzaw+'</X'+'MP></B>&nbsp;('+oTTtyp+')</FONT></LI>'; 
j++; 
  }; 
}; 
(oWynik.sort()).toString; 
oInfo.document.open(); 
oInfo.document.write('<TT><B>Obiekt: '+oTest.tagName+' ID='+oTest.id+'<BR>Właściwości:<BR></B><OL>'+oWynik+'</OL></TT>'); 
oInfo.document.close(); 
window.event.returnValue=false; 
</SCRIPT> 

Skrypt jest może trochę zawiły – starałem się „skompresować” go, aby zajął mniej miejsca nie tracąc przy tym wiele z czytelności. Główną częścią skryptu jest pętla for(i in obiekt) testująca po kolei wszystkie właściwości obiektu i odczytująca ich wartości. Dodatkowo metoda typeof(zmienna) sprawdza rodzaj uzyskanych danych. Wyniki są następnie sortowane i wyświetlane w nowo otwartym oknie.

Domyślnie skrypt testuje obiekt, który zostanie kliknięty prawym klawiszem myszki. Ponieważ nie wszystkie obiekty są widoczne i dostępne do klikania, dodałem też linię nr 3, w której można wpisać wprost odnośnik do obiektu, który powinien zostać „prześwietlony” (w skrypcie jest to dla przykładu window.document). Jeśli ta linia zostanie odblokowana przez usunięcie znaków komentarza, to po wyświetleniu strony trzeba kliknąć prawym klawiszem myszki, aby wskazany w tej linii obiekt został przebadany. W linii nr 3 można podać ścieżkę do dowolnego obiektu np. z wykorzystaniem kolekcji all i identyfikatora.

Skrypt można umieścić w dowolnym miejscu badanej strony – w sekcji HEAD lub BODY. Powinien funkcjonować w Internet Explorerze od wersji 5 (używam go na IE5.5). Najprawdopodobniej można usunąć z niego linię nr 13. Wstawiłem ją, aby ominąć właściwość filters, której odczyt powoduje błąd w moim systemie Windows95.

Właściwości

Kilka słów wyjaśnienia wymaga sposób przechowywania właściwości obiektów-elementów strony. W przypadku większości obiektów, właściwości mogą być przechowywane w kilku miejscach:

A. Mogą to być właściwości samego obiektu np.:

<DIV ID="test">ala</DIV> 

W tym przypadku ID to właściwość obiektu, do której można odwołać się pisząc: obiekt.id (a wartością tej właściwości będzie łańcuch 'test’). Podobnie, właściwością obiektu będzie obiekt.innerText reprezentujący tekst zawarty pomiędzy otwierającym i zamykającym tagiem elementu (tutaj: łańcuch 'ala’). Ten rodzaj „bezpośrednich” właściwości wyświetlany jest przez skrypt na zielono. Właściwości te można zarówno odczytywać, jak i zapisywać.

B. Mogą to być właściwości obiektu style zawartego wewnątrz danego obiektu-elementu np.:

<DIV STYLE="width:100px; height:50px;">ala</DIV>

W tym przypadku w obiekcie-elemencie zawarty jest kolejny obiekt – style, który z kolei przechowuje właściwości width i height. Dostać się do nich można nieco dłuższą drogą: obiekt.style.width i obiekt.style.height. Obiekt style reprezentuje wszystkie właściwości ustawione w atrybucie STYLE wpisanym w ramach danego elementu strony. Warto zauważyć, że właściwości obiektu style to nie to samo co „bezpośrednie” właściwości obiektu-elementu strony, a zatem IMG WIDTH=”50″ to nie ta sama właściwość co IMG STYLE=”width:50px” (choć efekt na ekranie jest identyczny). Właściwości dostępne przez obiekt style wyświetlane są przez skrypt na niebiesko. Właściwości te można zarówno odczytywać, jak i zapisywać.

C. Mogą to być właściwości obiektu runtimeStyle zawartego wewnątrz danego obiektu-elementu.

Obiekt runtimeStyle tworzony jest automatycznie dla każdego elementu strony, ale dostęp do niego możliwy jest jedynie przy pomocy skryptów (nie ma żadnego odpowiednika w postaci atrybutu HTML). runtimeStyle jest „silniejszy” niż style i jest w stanie nadpisać wartości zdefiniowane w obiekcie style nie zmieniając ich przy tym. Jeśli nie jest to jasne, dwa przykłady:

obiekt.style.color='red'; 
obiekt.style.color='green'; 
c=obiekt.style.color; 
  --- przykład 2 --- 
obiekt.style.color='red'; 
obiekt.runtimeStyle.color='green'; 
c=obiekt.style.color; 

Po wykonaniu obydwu zestawów instrukcji obiekt będzie miał kolor zielony. Ale odczyt właściwości style.color w pierwszym przypadku da wynik 'green’, a w drugim 'red’. W drugim przypadku do zmiany koloru wykorzystany został obiekt runtimeStyle, który zmienił kolor obiektu, ale pozostawił bez zmian zawartość obiektu style. Właściwości dostępne poprzez runtimeStyle wyświetlane są przez skrypt na brązowo. Właściwości te można zarówno odczytywać, jak i zapisywać.

D. Mogą to być właściwości obiektu currentStyle zawartego wewnątrz danego obiektu.

Podobnie jak runtimeStyle, obiekt currentStyle tworzony jest automatycznie dla każdego elementu strony i nie ma żadnego odpowiednika w postaci atrybutu HTML. Ten obiekt zawiera zestaw aktualnych, bieżących właściwości elementu bez względu na to, jaką metodą zostały ustawione. Warto zauważyć, że wiele właściwości jest ustawianych automatycznie w trakcie generowania strony – mimo, że dana właściwość style czy runtimeStyle jest pusta, w currentStyle znajdziemy już jakąś wartość. Właściwości dostępne przez currentStyle wyświetlane są przez skrypt na czerwono. Właściwości te można tylko odczytywać.

Czytanie, zapisywanie

Najbardziej „aktualne” właściwości elementu strony dostępne są do odczytu przez jego obiekt currentStyle. Właściwości odczytywane przez style mogą być mocno „zdezaktualizowane” – w zasadzie dostępne są jedynie wtedy, gdy przez ten właśnie obiekt były ustawione. W szczególności należy o tym pamiętać w przypadku właściwości ustawionych w arkuszu stylów. Właściwości te NIE są ustawiane przez obiekt style, a zatem NIE są w nim zapisywane i NIE są przez niego dostępne. Jeśli tekst będzie czerwony, bo taką ma przypisaną klasę, to odczyt: obiekt.style.color da łańcuch pusty, ponieważ kolor ten nie został przypisany ani przez atrybut STYLE ani przez zapis obiekt.style.color=… W takiej sytuacji prawdziwy kolor elementu można odczytać jedynie poprzez jego obiekt currentStyle.

Zapisywać właściwości można zarówno poprzez obiekt style, jak i runtimeStyle. Ten pierwszy wydaje się przy tym logiczniejszy. Ten drugi warto stosować jedynie wówczas, gdy z jakiegoś powodu zależy nam, by oryginalne właściwości zapisane w style nie zostały naruszone. Może się to przydać gdy chcemy tymczasowo zmienić jakąś wartość – ustawiamy ją wówczas poprzez runtimeStyle, obiekt zmienia się, a następnie, gdy skasujemy wartość w runtimeStyle, powraca do ustawień zapisanych w obiekcie style.

A teraz uruchom skrypt i podziwiaj wyniki. Powiedziałbyś, że zwykły DIV może mieć kilkaset właściwości..?

Paweł Rajewski