DHTML z anglického Dynamic Hyper Text Markup Language neboli česky Dynamický Hypertextový značkovací jazyk je protikladem klasických statických HTML stránek. Umožňuje obsah webové stránky měnit i po načtení (aniž by se načítala znovu). Využívá se JavaScript a trocha CSS, takže je to de facto hlavně JavaScript 🙂
Pár ukázek použití DHTML:
Jednoduchý příklad změny barvy textu po kliknutí na text pomocí DHTML.
<p onclick="this.style.color = 'red'">Klikni na tento text a změníš barvu tohoto elementu na červenou.
</p>V případě, že u jednoho elementu je potřeba měnit / nastavit více CSS vlastností lze postupovat takto:
<h2 onclick="this.style.color = 'white'
this.style.padding = '1em'
this.style.background = 'black';">
Klikni na tento text a zbarví se jeho pozadí a písmo.
</h2>Nebo takto, kdy zápis je možné trochu zjednodušit pomocí cssText:
<h2 id="id1" onclick="this.style.cssText ='color: white; padding: 1em; background-color: black;'">Klikni na tento text a zbarví se jeho pozadí a písmo.
</h2>Jak to funguje:
Do tagu se napíše atribut události. Zde to je atribut onclick, ale je jich víc, jak je vidět v seznamu atributů událostí níže.
<p onclick="this.style.color = 'red'">Klikni na tento text a změníš barvu tohoto elementu na červenou.</p>Hodnotou je program napsaný v JavaScriptu. Obecně popsáno:
<tag událost="program v JavaScriptu">„program v JavaScriptu“
objekt.jeho_vlastnost = hodnota;Typy objektů:
Objektem může být tag např. <p><form> nebo .this, a další:
- this – z anglického tento nejjednodušší objekt odkazuje na objekt, který vyvolal událost
- document.getElementById() – vyber element dle ID
- getElementsByTagName() – vyber dle názvu tagu
- getElementsByClassName – vyber dle názvu třídy
- querySelector
- querySelectorAll – vybere všechny selektory např. s nějakou třídou
<h2 class="example">Nadpis se třídou class="example"</h2>
<p class="example">Text se třídou class="example".</p>
<p>Kliknutím na tlačítko níže změníš barvu pozadí a písma e prvního elementu se třídou class="example" (index 0).</p>
<button onclick="myFunction()">Klikni!</button>
<script>
function myFunction() {
var x = document.querySelectorAll('.example');
x[0].style.cssText ='color: white; padding: 1em; background-color: black;';
}
</script>Různé atributy událostí:
Do tagů se dají napsat atributy událostí:
onclick – událost vznikne po jednom kliku myši
ondoubleclick – událost vznikne při dvojitém kliku myši
onabort – nastává při přerušení akce např. nahrávání obrázku při stisku tlačítka stop
onblur – opak události onfocus
onchange – událost vznikne při změně textu/volby formulářového prvku
onfocus – událost nastává tehdy, když se stane okno nebo formulářový prvek aktivním – např. najetím kurzoru myši
onkeydown / onkeypress – událost nastává, když uživatel stiskne jakoukoliv klávesu
onkeyup – nastává, po puštění klávesy
onload – událost nastává, když po úplném nahrání stránky
onmousedown – událost nastává po stisknutí libovolného tlačítka myši
onmousemove – událost nastává, když pohybujete myší, po skončení pohybu událost skončí
onmouseout – opak onmouseover
onmouseup – událost nastává až tehdy, když uživatel stisknuté tlačítko myši pustí
onmouseover – událost nastane po najetí myši nad určitým objektem tvořícím stránku HTML.
onreset – událost nastane po klepnutí na tlačítko reset, jeho úkolem je např. ve formuláři vše vrátit do původního stavu
onresize – nastane změnou velikosti okna
onselect – událost nastává při označení textu (myší nebo šipkami se shiftem) na aktuální stránce nebo formuláři
onsubmit – událost nastává po stisknutí formulářového tlačítka typu submit ve formuláři
onunload – událost nastává, když uživatel ukončí prohlížení aktuální stránky, resp, uživatel zavře okno prohlížeče stránek
