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.
• nedokß╛e uklßdat data (z bezpeΦnostnφch d∙vod∙)

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.getElementById()

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

 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
Odkazy mimo: DHTML serißl od Pixiho, star╣φ DHTML nßvod od Jirky Koska, v²born² ·vod do zm∞n formßtovßnφ dokumentu od Martina Snφ╛ka