co nejjednodušeji
Lze říci, že DHTML je spojení JavaScriptu (JScriptu) a CSS v prohlížečích
JavaScript + CSS + moderní prohlížeč = DHTML
DHTML jako pojem zavedl Microsoft kdysi dávno pro Internet Explorer 4. Jiné prohlížeče DHTML nezaváděly jako pojem, níže uvedené příklady v nich ale fungují (jde v zásadě o aplikace javascriptu).
Dynamické HTML je protiklad ke statickému HTML, které se jednou načetlo do stránky a pak už se s ním nedalo nic dělat. A právě dynamické HTML umožňuje obsah stránky měnit i po načtení. Klasicky jsou to různé animace, změny barev, automatické psaní textu, změny textu, problikávání, vyskakování oken a podobné vylomeniny. Pokud si říkáte, že to je to samé, co JavaScripty, tak máte pravdu.
Pryč s teorií. Skočme do vody a učme se plavat:
Chci, aby se po kliknutí na tento text změnila barva textu na červenou.
<p onclick="this.style.color = 'red'">text přebarvený kliknutím</p>
Po dvojkliku na tento odstavec se změní barva pozadí odstavce.
<p ondblclick="this.style.backgroundColor = 'yellow'">změna pozadí dvojklikem</p>
Po přejetí tohoto slova se to slovo ztuční.
<span onmouseover="this.style.fontWeight= 'bold'">slovo</span> ztučnělé přejetím
Pokud zde tyto efekty nefungují, nemáte prohlížeč podporující DHTML.
Do tagu se dá napsat atribut události. Zde to byly atributy onclick, ondblclick, onmouseover, je jich víc. Jejich hodnotou je program napsaný v JavaScriptu. Obecně popsáno:
<tag událost="program v JavaScriptu">
Zajímá mě ten program. JavaScript je objektově orientovaný. Když to velmi zjednoduším, tak se objektově orientované programy skládají z instrukcí typu
objekt.jeho_vlastnost = hodnota;
V příkladu jsem používal velmi jednoduchý objekt this (angl. "tento"). Objekt this je objekt, který vyvolal událost.
this má podobjekt (vlastnost) this.style, to je jeho CSS styl (this.style je také objekt). Objekt this.style má spoustu vlastností, které odpovídají jednotlivým CSS vlastnostem.
Např. this.style.color je barva písma objektu this, this.style.fontWeight je tučnost písma. Potom instrukce
this.style.backgroundColor = 'red';
je změna barvy pozadí na červenou.
Jazyk JavaScript má spoustu podivných vlastností. Například v programu záleží na velikosti písmen. Nebo jiná zajímavost: v názvu objektu a vlastnosti se nesmí objevit pomlčka.
Jak ale zapisovat CSS vlasnosti, které v sobě mají pomlčku? Pravidlo říká, že pomlčka se vypouští a následující písmeno se zvětšuje. Např CSS vlasntost list-style-image se do Javascriptu přepíše jako listStyleImage. Stejně tak background-color => backgroungColor. Příklady si najděte v přehledu CSS vlastností.
Zatím jsem pracoval pouze s objektem this. Co když ale chci libovolnou událostí ovlivňovat libovolný prvek? Dejme tomu, že chci kliknutím na první odstavec změnit barvu pozadí druhého odstavce na žlutou:
První odstavec
Druhý odstavec
<p onclick="document.getElementById('druhy').style.backgroundColor= 'yellow'">První odstavec </p>
<p id="druhy">Druhý odstavec</p>
Objekt document.getElementById (angl. dostaň element podle ídéčka) umožňuje referovat na všechny elementy, které mají nastaveny ID. Tak tedy document.getElementById("druhy") je objekt toho druhého odstavce, protože má nastaveno ID="druhy". Metoda getElementById funguje ve všech prohlížečích od páté verze (teď si nejsem jistý, jestli i v IE 5.0, ale myslím, že jo).
Místo staršího
document.getElementById('druhy')
se dá psát
document.querySelectorAll('#druhy')
Vtip je v tom, že tím parametrem může být místo #druhy libovolný CSS selektor, takže se tak dá cílit na mnohem složitější části dokumenty než jen na ty, které jsou předem označené nějakým ídéčkem.
Předchozí příklady měly sloužit jenom jako namlsání, přesto byste podle nich už mohli psát dosti složité skripty. Pokud vás problematika zajímá, napište mi, připíšu další díly. Zatím nemám motivaci, protože mám spoustu jiné práce.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.