Kapka CSS - CSS 2 - tipy a triky (II)

CSS a dynamické HTML


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:





náš skript





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



document.getElementById(„na­pis“).style.color=„blue“;









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:









function ukaz(){

document.getElementById(„od­poved“).style.visibility=„vi­sible“;

}

function skryj(){

document.getElementById(„od­poved“).style.visibility=„hid­den“;

}







Otazka: Jaka byva maximalni delka zivota kocicky? (<a>
href=„javascript:ukaz()“>Ukaz spravnou odpoved/<a>
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!