Jednoduché dynamické efekty pomocou Javascriptu

10. září 2001

•

Všimol som si, že vás v poslednej dobe zaujímajú články, ktoré sa zaoberajú dynamickou zmenou vzhľadu stránky. Tiež som si všimol, že vo väčšine prípadov sú články zaoberajúce sa touto témou napísané tak, že iba popisujú nejaký príklad, a tiež že často krát nevyužívajú dnešné moderné možnosti písania skriptov. Myslím si však, že by nebolo zlé ak by som vám ukázal, s troškou teórie, hlavný princíp ako takéto stránky vytvárať, resp. ukázať cestu, po ktorej treba ísť.

Pri dynamických stránkach ide zväčša o zmenu, ktorá nastane po nejakej udalosti. Ja sa v článku zameriam na vizuálne zmeny stránky. Napr. po kliknuí myši na odkaz sa zmení farba písma, alebo obrázok a podobne. Musím podotknúť, že pri tomto je nutná aspoň základná znalosť JavaScriptu, dobrá znalosť HTML a kaskádových štýlov CSS.

To čo vám chcem ukázať, resp. „letmo vás zoznámiť“, je tzv. Document Object Model, skrátene DOM. Pomocou DOM-u a JavaScriptu je možné vytvárať tieto dynamické efekty.

Čo je to DOM?

DOM je vlastne API (Aplication Programming Interface) a je daný normou, na ktorej pracuje konzorcium W3C. Je vytvorená pre všetky XML dokumenty, teda aj pre HTML, lebo HTML je podmnožina XML. DOM je, dá sa povedať, nepriamo závislé od HTML a CSS, lebo umožňuje pristupovať a meniť atribúty a vlastnosti HTML tágov a CSS štýlov. Je to možné pomocou nejakého skriptovacieho jazyka (najlepšie JavaScript), lebo ako som už spomenul, DOM je iba rozhranie (API) pre vytváranie skriptov na strane klienta (prehliadač).

DOM funguje tak, že ak prehliadač natiahne stránku, vytvorí si hierarchickú reprezentáciu obsahu tejto stránky. Tá sa skladá z uzlov, ktoré sú usporiadané do stromovej štruktúry a každý z uzlov reprezentuje nejaký element(tág), atribút elementu, samotný obsah, alebo iný objekt. Každý z týchto rozdielnych objektov(uzlov) má svoje unikátne vlastnosti a metódy. Ale každý z nich ma implementovaný tzv. Node interface – Uzlové rozhranie. Je to vlastne spoločná sada metód a vlastností, ktoré sa vzťahujú k stromovej štruktúre dokumentu. Tieto metódy (alebo funkcie, ak chcete) umožňujú prechádzanie stromovej štruktúry, alebo na prístup k jednotlivým uzlom stromovej štruktúry. Uzly majú potomkov, predkov (rodičov), alebo súrodencov, podľa toho na akej úrovni sa nachádzajú. Samotný uzol môže teda byť nejaký tág, atribút tagu, alebo samotný text.

Pre lepšie pochopenie uvediem príklad:

<BODY&gt <p&gttoto je <b&gthruby</b&gt text</p&gt </BODY&gt

Tág BODY je rodičom tagu P, alebo P je potomkom BODY. Tág P má troch potomkov (text „toto je“ tág B a text „text“). Tág B a oba texty sú súrodenci, pričom B má jedného potomka, a to je text „hruby“.

V tomto článku sa zameriam iba na objekt DOCUMENT DOM-u, teda de facto iba na priamy prístup k daným uzlom, vynechám teda prechádzanie sa po jednotlivých uzloch, nepriamy prístup a ešte veľa iných vecí. Pomocou objektu DOCUMENT je teda možné meniť určité vlastnosti uzlov. Treba si uvedomiť, že DOCUMENT je iba „root“ celej tejto stromovej štruktúry, teda má iba potomkov a nemá žiadnych predkov, ani súrodencov. Ako viete tak pomocou CSS je možné priradiť tágom (elementom) rôzne vlastnosti – rez písma, jeho veľkosť, farbu, obrázky, okraje a podobne, všetko nájdete pri popise CSS, aj priamo tu na Intervale. Tak isto viete, že kaskádové štýly je možné definovať viacerými spôsobmi:

pomocou parametru style v samotnom tagu
pomocou tágov STYLE
alebo v externom textovom súbore (tam je definícia totožná ako pomocou tágov STYLE) a potom pomocou atribútu class je možné priradiť tieto vlastnosti danému tagu

Je úplne jedno akým spôsobom sú priradené jednotlivé CSS vlastnosti jednotlivým tágom. Objekt DOCUMENT poskytuje dve metódy na prístup k elementom:

getElementById(ID_tagu)
getElementsByTagName(meno_tagu)

Pri prvej metóde je nutné použiť na označenie tagu, ku ktorému sa má pristúpiť, atribút ID v samotnom tagu.

<p id=“p1″ style=“background-color: black;“&gttext</p&gt

Potom je možné pristupovať k tomuto tagu takto:

document.getElementById(„p1“)

Samozrejme, že na prístup je nutné použiť JavaScript. Namiesto priameho napísania ID tagu, je možné použiť meno premennej, ktorý bude obsahovať meno premenenej. Na zmenu CSS vlastností daného tagu je nutné požiť túto syntax:

document.getElementById(ID_tagu).style.meno_vlastnosti = hodnota

Dôležitá poznámka: meno CSS vlastnosti sa nepíše tak ako sa definuje v CSS, ale vynecháva sa pomlčka a nasledujúce písmeno za pomlčkou je veľké. Uvediem zopár príkladov:

background-color -> backgroundColor
border-style -> borderStyle
text-align -> textAlign

Napríklad zmením v tomto príklade farbu podkladu textu z čiernej na zelenú:

document.getElementById(„p1“).style.backgroundColor = „green“

Druhá metóda, getElementsByTagName() slúži na prístup k všetkým elementom rovnakého druhu, t.j. rovnakého tagu. Funguje to tak, že metóda vracia pole uzlov(tágov), ktoré reprezentujú všetky špecifikované tágy existujúce na web-stránke. Napríklad chcem zmeniť farbu všetkých odkazov na oranžovú:

var pole = document.getElementsByTagName(„A“); for (var i = 0; i < pole.length; i++) pole[i].style.color = „orange“;

pole.length vracia počet položiek poľa. Jednotlivé položky nasledujú za sebou v takom poradí, v akom sú na web stránke, čiže pole[0] bude odkazovať na prvý tág A, pole[1] na ďalší, až pole[pole.length-1] bude odkazovať na posledný tág A na stránke. Tu musím pripomenúť, že normu DOM poriadne podporujú iba 5-kové (a novšie) verzie prehliadačov. Konkrétne: IE4.0 – 6.0, NN6 (NN4 nie!) Opera 5.

Ďalšia vec je tá, že existuje niekoľko verzií DOM-u – 0, 1, 2 a pripravuje sa 3. Verzia 0 bola implementovaná v starších prehliadačoch (NN 3+ a IE 3+). Verzia 1 sa postupne implementuje(-ovala) v NN4 až 6, IE4-6(MS tvrdí, že IE6 podporuje úplne DOM1) – Opera 5. Verzia 2 – je implementovaná postupne a čiastočne v posledných verziách prehliadačov (iba NN6+, Opera 5 /dosť slabo/ a IE5+. Verzia 3 je zatiaľ v štádiu návrhu.

Dôležité na pochopenie ďalších informácií je to, že v každom prehliadači sa určitým spôsobom líšila implementácia DOM-u. Najmarkantnejší rozdiel bol v IE3 a 4+ a NN 3 a 4. V tomto období boli jednak zavedené rôzne neštandardné(propietárne) spôsoby implementácie DOM-u. Zároveň prišlo k nasledujúcej situácii:

existovali propietárne riešenia, ktoré boli rovnaké v IE aj NN, len sa líšili od štandardu DOM-u (napr. oba prehliadače poznali objekt Image. Bolo to vlastne pole objektov všetkých obrázkov na stránke. A dalo sa s nimi pracovať takto: document.image. Podobne to je aj s atribútom bgColor.
existovali propietárne riešenia, ktoré sa jednak líšili od štandardu DOM, ale zároveň aj každý prehliadač, NN a IE, ich mal iné. Najmarkantnejšie to bolo pri NN a ich layer-och a zase pri IE s ich document.all.

Dnes je situácia trošku iná. NN6 nepodporuje žiadne z propietárnych riešení verzií NN4.x a nižších. IEv5.0 – 6.0 naopak podporuje aj staré propietárne riešenia, ale samozrejme aj nové. Teda príklady, ktoré som uviedol, resp. použitie oboch metód, getElementById a getElementsByTagName, je možné použiť vo všetkých nových verziách prehliadačov: Internet Explorer 4.0 až 6.0, Netscape 6, Opera 5 (avšak Opera obsahuje mnohé chyby) a Mozilla 0.9.x. Teda už nie je nutné, vo väčšine prípadov vytvárať viacej verzií daného kódu, ale postačí jedna.

Tak to je na dnes všetko a dúfam, že to nebolo veľmi zložité, v skutočnosti to ani tak nie je, ako to vyzerá. Rád by som pripomenul, že všetky informácie ohľadne DOM-u nájdete na stránkach W3C.