DHTML = JavaScript + CSS

V úvode si uvedieme, čo to vlastne DHTML je. DHTML alebo dynamické HTML je spojením programovacieho jazyka JavaScript a kaskádových štýlov, čiže CSS. Dynamické HTML sa často využíva k rôznym efektom na webových stránkach pre spestrenie surfovania po webe alebo pre spríjemnenie práce. Skákajúce nadpisy, rotujúce hodiny, farebné prechody… toto všetko má na svedomí DHTML.

Avšak jednou veľkou nevýhodou je, že DHTML nie je na 100% funkčný vo všetkých webových prehliadačoch. Je teda na programátorovi, či urobí efekt pre jeden prehliadač alebo sa potrápi optimalizáciou pre všetky.

Dosť bolo teórie… poďme skúsiť praktickú časť.

.getElementById().style;

Prvú vec, ktorú si spomenieme je, že DHTML pracuje s ID parametrami rôznych tagov jazyka HTML. Teda ak chceme zmeniť farbu textu, tak text musí byť v HTML tagu s parametrom id=„nejake_id“. Uvedieme si príklad:

<html>
<head>
<script language="JavaScript" type="text/javascript">

function zamen()
{
        document.getElementById('text').style.color="#FF0000";
}

</script>
</head>
<body>
<p id="text" onClick="zamen();">Ahoj</p>
</body>
</html>

Po kliknutí na text by sa mala zmeniť farba písma na červenú.

this.style;

Ak však chceme použiť DHTML efekt iba raz, používa sa na to skrátený zápis, aby sme nemuseli vždy vytvárať nové funkcie v hlavičke dokumentu. Tento skrátený zápis má takúto syntax:

<html>
<body>
<p id="text" onClick="this.style.color='#FF0000';">Ahoj</p>
</body>
</html>

This.style znamená, že zmeny štýlov sa budú týkať toho HTML tagu, v ktorom je definovaný tento zápis. Logicky z anglického jazyka this = tento… Ukážky oboch príkladov nájdete TU.

Treba však spomenúť aj to, že keď chceme pomocou DHTML meniť štýl, ktorý je zložený z viacerých slov napr.: background-color, tak syntax kódu bude nasledovná: this.style.backgroundColor=‚#FF0000‘;. Znamienko mínus - tam nesmie byť!

Pretože DHTML pracuje s pomocou JavaScriptu a ID parametrami jednotlivých tagov HTML kódu, dokážeme zmeniť hodnoty štýlov prvého HTML tagu po kliknutí na druhý HTML tag. Uvediem krátky príklad:

<html>
<body>
<p id="text_1"
onClick="document.getElementById('text_2').style.color='#FF0000';">
1. tag HTML</p>
<p id="text_2">2. tag HTML</p>
</body>
</html>

Po kliknutí na prvý tag HTML sa zmení farba písma v druhom tagu HTML. Ukážku nájdete TU.

S DHTML sa dá urobiť veľa pekných vecí, napríklad zmenu pozadia stránky podľa času… Ale to bude možno až ďalší tutoriál Veľa šťastia s DHTML praje Atlox…

Hodnocení tutoriálu: 1.8 (hodnotilo 28 uživatelů)

DHTML = JavaScript + CSS

.getElementBy­Id().style;

this.style;

.getElementById().style;