Vlastnosti, jež nám kaskádové styly nabízejí, jsou mnohdy jistě velmi užitečné,
jindy ale zase ve své syrové podobě poněkud málo uplatnitelné (kupříkladu lze
skrýt určité elementy [např. tabulky], ovšem s tím, že budou skryty stále a
nikdy se tak nezobrazí, což je obvykle k ničemu...). Tvůrce HTML stránky tak má
možnost nastavit vlastnosti, které určí výslednou podobu stránky, ale tímto
nadesignováním práce tvůrce končí pak tedy říkáme, že je taková stránka
statická. Samotné kaskádové styly jsou tedy koncipovány jako nástroj pro
statickou, tj. jednorázovou úpravu stránek avšak v této souvislosti můžeme
mluvit o širokých možnostech navrhování, resp. designování stránky pomocí CSS.
Leckdo už se jistě dovtípil, že na druhé straně existují i prostředky pro
dynamickou, tedy průběžně reagující podobu stránek, a to na základě různých
okolností, obvykle podnětů návštěvníka stránky. Jistě jste už slyšeli o
JavaScriptu, kterým tvůrce stránky zajišťuje variabilnost, neboli proměnnost
podoby stránky během jejího prohlížení (mluvíme o tzv. "client-side"
JavaScriptu, neboli na straně klienta existuje totiž ještě na straně serveru,
to je ale o něčem jiném, čímž se vůbec nemusíme zabývat). Znamená to, že
finální vzhled stránky nemusí být pokaždé stejný je daný momentální situací,
již zmíněnými podněty návštěvníka stránky (když kupříkladu někde klikne myší,
poté dojde k nějaké události) apod. Činnosti vytváření takových stránek pak
zaslouženě říkáme programování, jehož výsledkem je aplikace (program,
skript...).
Uvažujme v příkladech pomocí CSS si kupříkladu navrhnete příjemné grafické
prostředí se sympatickými barvami, fonty, texturami apod., prostě místo, kde se
návštěvník cítí dobře a kam se vždy rád bude vracet. Díky JavaScriptu zase
můžete vytvořit třebas oblíbenou hru Pexeso s obrázky domácích zvířátek. Jedním
nástrojem CSS jsme stránku nadesignovali, druhým JavaScriptem pak
naprogramovali. Spojením obou prostředků jsme získali kvalitní stránku jak
vzhledově, tak i funkčně, na kterou můžeme být opravdu hrdí!
Navzdory všemu, co bylo řečeno, lze zhruba říci, že se dnes pojmem Dynamické
HTML (DHTML) rozumí HTML s JavaScriptem ve spojení s kaskádovými styly. Proč se
ale všechny tyto rozličné nástroje zastřešují pod jedno společné označení?
Důvodem je to, že DHTML definovalo za standard nám známé konsorcium W3C (World
Wide Web Consorcium) jako spojení výše uvedených prostředků na základě
speciálního, tzv. objektového modelu dokumentu (o kterém si něco povíme
později), čímž bylo dosaženo vzájemného provázání existuje tak vazba mezi
JavaScriptem (skripty) a CSS (styly), takže lze těmito skripty pohodlně
ovlivňovat styly, což je nesmírně výhodné, neboť tak máme vlastně možnost
dynamicky ovládat i styly dokumentu. Rozšíření DHTML bylo zakomponováno do HTML
od verze 4, a dá se říci, že v novějších verzích webových browserů (IE v5.5,
Netscape v6, Opera v6) je již podpora DHTML velmi solidní.
Podívejme se ale na DHTML zblízka. V předchozím textu bylo zmíněno, že základ
tvoří jakýsi objektový model dokumentu. Ten uvažuje a reprezentuje webový
browser a jím právě zobrazované stránky (všechny jejich elementy) jako
seskupení objektů, každý s určitými vlastnostmi, které konkretizují jeho stav,
či tzv. metodami, které slouží k vyvolání určité služby objektu. Seskupení je
pak uspořádáno do určité hierarchie např. hlavním objektem je "window" tedy
celé okno prohlížeče, jeho potomky (tj. ty na nižší úrovni v hierarchii) jsou
pak např. objekty "screen" stínítko, neboli obrazovka, "dokument" aktuálně
prohlížený dokument, resp. stránka, "history" historie prohlédnutých dokumentů
apod. Tito potomci samozřejmě opět mohou mít další a další potomky. Objekt
"window" tedy může obsahovat nejenom zmiňované objekty, ale i vlastnosti např.
vlastnost "status", která obsahuje text ve stavovém řádku okna webového
browseru, či metody např. "close", která slouží k uzavření okna webového
browseru. Vlastnosti a metody mohou být součástí každého dalšího objektu. Pro
názornost si objekt můžeme představit jako automobil, vlastnost např. jeho
barvu (šířku, délku...) a metodu jako motor, hnací jednotku, která s objektem
provede, co jí zadáme nedej bože že jej vybourá. Díky tomuto seskupení v
hierarchii je pak zajištěna zmiňovaná provázanost mezi prostředky HTML. Celý
tento objektový model dokumentu nese označení DOM (Document Object Model) a
výše popsané výhody (dynamicky nastavitelné vlastnosti CSS prostřednictvím
JavaScriptu) nabízí od verze 2 (druhá generace). K jednotlivým objektům a
jejich vlastnostem či metodám je tedy možné přistupovat přes jiné směrem od
nejvyššího po nejnižší (jakoby od kořene stromu po jeho nejmenší větvičky však
DOM právě také využívá tzv. stromovou hierarchii). Například z objektu "window"
přistoupíme k objektu "screen" a odtud k jeho vlastnostem "width" a "height",
které obsahují údaje o šířce a výšce stínítka (obrazovky) lze se na ně tedy
odvolat pomocí "window.screen.width" či "window.screen.height", kdy se v zápisu
každý objekt odděluje znakem tečka. Nejvyšší objekt ale z důvodu jeho
jedinečnosti není nutno uvádět, lze se tak tedy zkráceně odvolávat pomocí
"screen.height". Jak již bylo řečeno, na nižších a nižších úrovních objektové
hierarchie tedy mohou být další objekty, vlastnosti objektů (případ stínítka)
či metody objektů.
Diagram dole znázorňuje ukázku hierarchie objektů v závorce pod popisem objektu
(tmavě zelený), vlastnosti (světle zelená) či metody (oranžová) je vždy uveden
odpovídající skutečný název:
Jak začít?
Jak již jsme si řekli, dynamické HTML budeme pohodlně realizovat pomocí
JavaScriptu. Následující tabulka proto uvádí způsob zápisu skriptu do HTML:
Jak je patrno, lze skript zapisovat kdekoliv do HTML mezi tagy \\ přímo, jiná možnost pak je, že pouze uvedeme, aby se načetl skript,
který je uložen kdesi v nějakém externím (vedlejším) souboru (obvykle s
příponou ".js"). V praxi je v zápisu možné setkat se s atributem
\language="javascript"\, v HTML od verze 4 jej však nahrazuje výše uvedený
atribut \type="text/javascript"\.
Přístup k objektům
Existuje několik možností, kterak k objektům přistupovat, nicméně jsou leckteré
použitelné jen v určitých webových browserech jeden způsob funguje jen v
Internet Exploreru, jiný zase v Netscape Navigatoru apod. Jediným řešením je
pak ošetřit přístup různými podmínkami, na základě kterých se určí, jaký způsob
přístupu se použije. Jak vidno, chce-li mít tvůrce stránky zaručenu její
funkčnost v co největším množství webových browserů, je celá věc značně
komplikovaná. Nebudeme se proto zabývat různými individuálními způsoby
přístupů, ale využijeme metody, která by měla být k dispozici, tedy fungovat
vždy, respektuje-li webový browser alespoň částečně DOM dle specifikace W3C
(zaručeno v Internet Exploreru v5, Opeře v5 a Netscapu v6). Mimochodem, kdesi
jsem četl, že by tvůrci stránek měli tvořit pro web a ne pro webové prohlížeče,
a s tím souhlasím. Uveďme si nyní primitivní příklad:
Barevny napis
Ukázka způsobila vypsání červeného textu, vepsaný skript však okamžitě změnil
barvu textu na modrou (nepodporuje-li váš webový browser W3C DOM, text zůstává
červený, nepodporuje-li pak ani CSS, zůstává dokonce černý a měli byste
nejspíše zauvažovat o jeho změně...). Uvedený příklad je samozřejmě prakticky k
ničemu, ukazuje však, jakým způsobem můžeme přistupovat k objektům. Bystřejší
jistě pochopili, že getElementById je metoda objektu document. Jejím vstupním
parametrem je hodnota atributu ID (ten slouží k identifikaci elementu v našem
případě je to "napis") našeho HTML elementu SPAN. Metoda pak vrací odkaz na
objekt tohoto elementu v DOM, jeho potomkem je zase objekt style, který
obsahuje použitý styl elementu, a color je pak specifická vlastnost stylu
(určuje barvu).
Skutečná dynamika!
Z předchozího textu bychom již měli mít určitý základ znalostí, vrhněme se do
věci tedy po hlavě a začněme proto rovnou malým příkladem:
Otazka: Jaka byva maximalni delka zivota kocicky? ( href="javascript:ukaz()">Ukaz spravnou odpoved/ href="javascript:skryj()">Skryj spravnou odpoved)
Spravna odpoved zni: az 20
let.
Ve skriptu příkladu se nově objevil nám doposud neznámý pojem "function". Snad
si ještě vzpomenete na to, co bylo uvedeno v textu o něco výše byla tam
zmiňována tzv. metoda. Bylo řečeno, že jejím vyvoláním se poskytuje určitá
služba. Stejně tak je tomu u funkce (angl. function) je to tedy v podstatě blok
(množina) příkazů, které se jejím vyvoláním (uvedením jejího jména v těle
skriptu) provedou. Rozdíl mezi metodou a funkcí je víceméně v tom, že funkce je
samostatná, kdežto metoda náleží do určitého objektu. Jak je patrno, funkce se
definuje rezervovaným slovem "function", za kterým je uvedeno její jméno
následované kulatými závorkami (jež mohou obsahovat různé parametry funkce, ale
o tom až někdy později), a poté příkazy, uzavřenými do složených závorek "{" a
"}".
Jak vidno, v příkladu jsme si vytvořili dvě funkce z nichž jedna plní úlohu pro
skrytí odpovědi a druhá pro zobrazení. Jinak je snad příklad jasný zobrazí se
otázka a odpověď, která se ale hned skryje její styl má na počátku vlastnost
hidden (skryto). Znovu se pak objeví či skryje kliknutím na text s odkazem,
jenž ale vede nikoliv na HTML dokument či obrázek apod., nýbrž na příkazy
JavaScriptu, které následují za rezervovaným slovem "javascript:". V tomto
případě se provede akce jediná: zavolá se funkce ukaz či skryj, která změní
vlastnost viditelnosti textu (visibility) s odpovědí buďto na skrytou (hidden),
nebo zobrazenou (visible).
Toť tedy vše pro dnešek avšak teprve příště nabere seriál plně dynamického
tempa! Prozatím na shledanou!
PŘEDPLATNÉ
ČLÁNKY DO MAILU