ikonka šipky nahoru

DHTML (kombinace technologií HTML + JavaScript + CSS)

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

Líbí? Pošlete to do světa. Díky

Komentáře k článku:

DHTML (kombinace technologií HTML + JavaScript + CSS)

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*