Dnešní poslední výuková lekce bude věnována lehkému úvodu do DHTML. Řekneme si co zkratka DHTML znamená a z čeho se takové DHTML skládá.
Minule jsme si ukázali něco z regulárních výrazů. Doufám, že nastínění toho co to jsou regulární výrazy s ukázkou použití vám jasně ukázalo jejich možnosti. Musím podotknout, že tyto možnosti jsou daleko větší než se do článku vešlo. Dnes výuku završím stručným úvodem do DHTML. Úplně poslední díl akorát přinese utříděný seznam různých zdrojů na internetu týkající se problematiky, o které jsme tu dva měsíce hovořili.
Je dobré si uvědomit, že DHTML je pouze zkratka pro výraz "Dynamic HTML". Tato zkratka se tak ustálila, že se nyní pro dynamické stránky běžně používá, ale DHTML jinak neexistuje. Není to žádná "věc" ani standard definovaný konsorciem World Wide Web Consortium (W3C). DHTML není definováno nikde.
Dynamické HTML je ve skutečnosti kombinace CSS (cascading style sheets), DOM (document object model), skriptovacích jazyků (Javascript nebo VBscript) a HTML. DHTML tedy není žádný nový jazyk, je to směsice všech výše jmenovaných technologií. Čím více budete umět tyto technologie, tím budete lepší v DHTML.
Tak, co to tedy je? Dynamické HTML je jednoduše standardní HTML, které se může měnit poté co je již stránka načtena v prohlížeči. Jednoduché dynamické prvky na stránce jsem si v průběhu seriálu už vytvořili, například změna obrázku nebo textu po najetí kurzorem myši. Mezi jiné efekty, které jste již jistě taky viděli například patří pohyb nějakého prvku za kurzorem myši nebo posun obrázku po obrazovce a mnoho dalších. Vše co v HTML na stránce vytvoříme můžeme následně pomocí DHTML měnit.
Jednotlivé části DHTML
Jak už jsme si několikrát řekli zkratka DHTML není žádná "věc" ani standard a jde pouze o kombinaci několika technologií.
CSS
Možná jste se s touto zkratkou již setkali. Pokud, ale nevíte co znamená, pokusím se ve stručnosti vysvětlit.
Nezkráceně to je Cascading Style Sheets. CSS bylo uvedeno na konci roku 1996 a dalo by se říci, že jeho uvedení znamenalo průlom v dosavadním pojetí HTML. V původní verzi HTML se totiž veškerý text formátoval na stránce pomocí HTML tagů jako H1, FONT, B, I a ostatních bez možnosti předdefinování. S uvedením stylů se tato situace změnila. Za pomoci CSS si definujeme několik stylů s jejich parametry v úvodu webové stránky nebo v externím souboru a pak se na ně pouze odkazujeme. Výhod z toho plynoucích je mnoho. Příkladně, potřebujeme změnit veškeré nadpisy článků, které máme definovány například takto:
<font face="Verdana,Geneva,Arial,Helvetica,sans-serif" size="5" color="#0000FF"><B>NADPIS</B></font>
Procházet všechny soubory, které tvoří naše stránky a hledat tyto tagy by zabralo hodně času. U CSS změníme pouze jeden externí soubor a je vystaráno. V souboru s definicí CSS se změní hodnoty stylu definující nadpis článku:
.nadpis { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight : bold; color : Blue; font-size : 16pt; }
Tato změna se projeví okamžitě na všech stránkách. Z toho důvodu je daleko lepší využívat pro definici CSS externí soubor, definování v úvodu každé stránky ztrácí na efektivnosti.
CSS tedy slouží k modifikaci stylů, které v HTML již existují (např. H1, P, CODE, atd.) a k vytváření zcela nových stylů s novými parametry. Formátovací možnosti CSS jsou velice bohaté, což usnadňuje návrh stránek přesně podle našich představ.
Styly jako první uvedla firma Microsoft a implementovala do Internet Exploreru 3.0. Prohlížeče uvedené na trh od roku 1997 styly ve verzi Level 1 v naprosté většině podporují. Současné moderní prohlížeče zahrnují i podporu CSS2.
Teď si jistě říkáte, co znamená ono Level 1. V současnosti existují dvě specifikace stylů, starší CSS1 (level 1) z 16.prosince 1996 a novější CSS2 (level 2) z 12.května 1998. Různé verze prohlížečů tyto specifikace ještě doplňují o své vlastní definice. Trošku zmatek, bohužel ucelený seriál, který by vše objasnil na Živě doposud nevyšel. Třeba to někdy napravím :)
DOM
V současné době vychází o DOM na Živě seriál, takže pouze ve stručnosti. Document Object Model je v podstatě vazba mezi použitým skriptovacím jazykem a prvky na stránce. DOM je vlastně hierarchie elementů na stránce, které jsou reprezentovány prohlížečem. S pomocí DOM můžeme snadno přistupovat k jednotlivým elementům na stránce, měnit je nebo přidávat nové. Pro práci s DOM bylo přidáno určité rozšíření i do JavaScriptu. Bohužel, jak už jsem psal o kompatibilitě mezi jednotlivými prohlížeči a skripty, zde se s tímto problémem opět určitě setkáte.
Například pokud vytvoříme na stránce element s přesným určením pozice:
<div id="divID" style="position:absolute; left:50; top:100; background-color: ThreedLightShadow;">Text uzavřený v tagu DIV.</div>
V různých verzích prohlížečů se k němu přistupujeme různými způsoby:
V Netscapu (NN4+):
mujDIV = document.layers["divID"];
V IE (IE4):
mujDIV = document.all["divID"];
Pokud prohlížeč podporuje standard W3C, nejlepší způsob je (IE 5+, NN6+):
mujDIV = document.getElementById("divID");
Pokud chceme tento element ovlivňovat, také záleží na verzi prohlížeče. Chceme-li například nějaký element skrýt:
V Netscapu (NN4+):
document.layers["divID"].visibility = "hide";
// mujDIV.visibility = "hide";
Další rozdíl nastane při použití NN6, kde se již "hide" a "show" nepoužívá a namísto toho musíte použít "hidden" a "visible".
V IE (IE4):
document.all["divID"].style.visibility = "hidden";
// mujDIV.visibility = " hidden ";
A nakonec opět podle doporučeného standardu W3C (IE 5+, NN6+):
document.getElementById("divID").style.visibility = "hidden";
// mujDIV.visibility = " hidden ";
Vidíte, že nastává pěkný zmatek a to ještě zdaleka nejsou všechny odlišnosti.
Skriptovací jazyk
O tom snad nemusím nic psát, o jeho vysvětlení se snažím již osmnáct dílů. Snad jen to, že v DHTML nemusíte používat pouze JavaScript, ale můžete použít i VBScript. Zde ovšem budete omezeni pouze na IE, jelikož ostatní prohlížeče VBScript nepodporují.
HTML
Pokud jste dočetli až sem asi vám HyperText Markup Language (HTML) jehož prostřednictvím můžete vytvářet webové stránky nemusím představovat. Znovu si jen dovolím připomenout, že na Živě již vyšel pětadvacetidílný seriál o tomto jazyku.
Krátký příklad na rozloučenou, který mění pozici elementu DIV na stránce ve čtyřech směrech (testováno na prohlížečích IE 5.5 a 6.0, NN 4.51 a 6.1, Mozilla 0.9.4 a Opera 5.12):
<html>
<head>
<title>Změna pozice elementu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<div id="blok1" style="position:absolute; left:10; top:300; background-color: Silver;">Text uzavřený v tagu DIV.</div>
<script type="text/javascript">
<!--
// Funkce pro pohyb elementu DIV po stránce.
function posunBlok(x, y) {
var block = ziskejEL("blok1");
// IE 5 a vyšší, Mozilla, NN6+, Opera 5 a vyšší
if (document.getElementById){
block.style.left = parseInt(block.style.left) + x;
block.style.top = parseInt(block.style.top) + y;
}
// NN4+
else if (document.layers) {
block.left += x;
block.top += y;
}
// IE4
else if (document.all) {
block.pixelLeft += x;
block.pixelTop += y;
}
}
// Funkce pro získání elementu podle verze prohlížeče.
function ziskejEL(jmeno) {
// IE 5 a vyšší, Mozilla, NN6+, Opera 5 a vyšší
if (document.getElementById)
return(document.getElementById(jmeno));
// NN4+
else if (document.layers)
return(document.layers[jmeno]);
// IE4
else if (document.all)
return(document.all[jmeno].style);
else
return(null);
}
//-->
</script>
<form>
<table cellspacing="0" cellpadding="0">
<tr align=center>
<td> </td>
<td><input type="button" value="nahoru" onClick="posunBlok(0, -10);"></td>
<td> </td>
</tr>
<tr align=center>
<td><input type="button" value="vlevo" onClick="posunBlok(-10, 0);"></td>
<td> </td>
<td><input type="button" value="vpravo" onClick="posunBlok(10, 0);"></td>
</tr>
<tr align=center>
<td> </td>
<td><input type="button" value="dolů" onClick="posunBlok(0, 10);"></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Tím je výuka JavaScriptu skončena. Snad jste si něco odnesli a budete se k tomuto seriálu rádi vracet. Pokud najdete nějaké nesrovnalosti nebo vám nebude něco jasné napište. Některý díl můžu přepracovat (internet není kniha) nebo vydat rozšířenou část. Poslední díl již nebude věnován výuce, ale zajímavým zdrojům na internetu, kde si můžete své obzory nadále rozšiřovat.