Dynamické HTML

co nejjednodušeji

Co je DHTML

Lze říci, že DHTML je spojení JavaScriptu (JScriptu) a CSS v prohlížečích Internet Explorer verze 4, 5 a 6:

JavaScript + CSS + MS IE 4|5|6 = DHTML

Jiné prohlížeče  DHTML nepodporují (březen 2001), což ale nevadí, protože skoro nikdo jiné prohlížeče nepoužívá. (Pozn. duben 2002: prohlížeče Mozilla a Opera se snaží dělat DHTML trochu jinak, leč jsou používány tak málo, že to skoro nestojí za pozornost).

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. Microsoft k JavaScriptu dopsal pár věcí a nazval to JScript.

JScript = JavaScript pro Internet Explorer 4, 5 a 6.

K čemu je DHTML?

Je vcelku k ničemu, protože:

• Nevím, jaký má čtenář prohlížeč, proto se na skript nemůžu spolehnout.
• DHTML zřídka poskytují nějakou informaci, většinou jde jen o efekt.
• Programovací úsilí je zpravidla silně neadekvátní  výsledku, protože je třeba skript odladit na mnoha různých platformách.

Co je z DHTML použitelné:

• Reklamy
• Vyskakující menu
• Veselé matení čtenáře
• Částečná kontrola ovládání formulářů
• Vpisování společných hlaviček do mnoha souborů
• Přizpůsobení vzhledu dokumentu podle volby čtenáře

Co musíte umět

1. Předpokládám, že umíte základy JavaScriptu. Na internetu najdete stovky učebnic JavaScriptu, ve kterých jsou základy popsané. Skoro nikde ale nejsou popsané pokročilé techniky JavaScriptu. Takže o tom budu zčásti psát.
2. Předpokládám, že umíte používat kaskádové styly -- CSS. Bez toho skoro nemá smysl, abyste četli dál.

Pryč s teorií. Skočme do vody a učme se plavat:

Příklady objektu "this"

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.

Komentář k příkladům

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.

Přepis CSS vlastností

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í. 

Objekt document.all

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.all.druhy.style.backgroundColor= 'yellow'">První odstavec </p>

<p id="druhy">Druhý odstavec</p>

Objekt document.all (angl. všechno) umožňuje referovat na všechny elementy, které mají nastaveny ID. Tak tedy document.all.druhy je objekt toho druhého odstavce, protože má nastaveno ID="druhy".

 Zatím konec

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.

Vizte též: CSS, JavaScript (pracovní verze)

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript