Výuka JavaScriptu – 18.

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.

  Část 9     DHTML  

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.

Diskuze (13) Další článek: Celerony levnější

Témata článku: Software, Prohlížeče, Internet, Programování, Opera, Javascript, Java, Výuka, Elsa, Nn, IE 10, Nový parametr, Hidden, Doma, Button, Element, HTML, Geneva, Code, IE 11


Určitě si přečtěte

Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

Japonská MANA může být 80× výkonnější než sebelepší tranzistorový procesor

** Tranzistory současných počítačů vyzařují při přepínání teplo ** Na Tokijské univerzitě proto vyvíjejí adiabatické procesory ** Využívají supravodivost a jsou 80× úspornější

Jakub Čížek | 48

Jakub Čížek
TranzistoryProcesoryTechnologie
Chytré hodinky Honor a Huawei se zbavily největší brzdy. Naučily se instalovat aplikace
Filip Kůžel
HonorHodinkyMobilní aplikace
Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

Apple Macbook Air M1: testujeme výkon, výdrž, a hlavně kompatibilitu aplikací [průběžně aktualizováno]

** Testujeme Apple Macbook Air s procesorem M1 ** Zajímá nás nejen výkon, ale zejména kompatibilita aplikací ** Článek je průběžně doplňován na základě vašich dotazů

Jiří Kuruc | 209

Jiří Kuruc
Apple
Nejlepší notebooky do 10 000 korun: Co má ještě smysl kupovat. A co ne?

Nejlepší notebooky do 10 000 korun: Co má ještě smysl kupovat. A co ne?

** Notebooky s cenou do deseti tisíc korun jsou plné kompromisů ** Existuje několik modelů dobře použitelných pro nenáročné použití ** Vhodnou alternativou jsou tablety nebo repasované počítače

David Polesný | 94

David Polesný
Jak vybrat notebookNotebooky
Technici nestíhají. Cetin dočasně přerušil zavádění VDSL bondingu
Lukáš Václavík
CETINPřipojení k internetu
Archivovat data do cloudu, na HDD, SSD, DVD, nebo Blu-ray? Co je nejvýhodnější?

Archivovat data do cloudu, na HDD, SSD, DVD, nebo Blu-ray? Co je nejvýhodnější?

** Kam doma natrvalo uložit data? Vyplatí se ještě optická média? ** Jaké kapacity disků a médií má smysl koupit? ** Cenovou výhodnost si ukážeme na příkladech s 2TB úložištěm

Lukáš Václavík | 122

Lukáš Václavík
ZálohováníÚložištěPevné disky
Lidl buduje chytrou domácnost, propojí všechno se vším
Lukáš Václavík
LidlChytrá domácnostIoT
Vybíráme nejlepší monitory: Od úplně levných až po displeje na rozmazlování očí

Vybíráme nejlepší monitory: Od úplně levných až po displeje na rozmazlování očí

** Vybrali jsme nejlepší monitory na práci i pořádné hraní ** Nejlevnější monitor s kvalitním panelem nestojí ani tři tisíce ** Rozlišení 4K a větší obrazovka už není nedostupný luxus

David Polesný | 31

David Polesný
Monitory
Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

** Tipy na užitečné příslušenství k počítačům ** Poradíme, s jakými produkty neuděláte chybu ** Od drobností do USB až po routery a tiskárny

David Polesný, Stanislav Janů | 20

David PolesnýStanislav Janů
Příslušenství

Aktuální číslo časopisu Computer

Megatest herních monitorů

Jak zabezpečit mobil v rukou dítěte

Radíme s nákupem grafické karty