Dynamické HTML

co nejjednodušeji

Co je DHTML

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.

K čemu je DHTML?

Je vcelku k ničemu, protože:

Co je z DHTML použitelné:

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

Objekt querySelectorAll

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.

 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.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.