Co vlastně obnáší dynamické HTML?

Úvod Dynamické HTML. Tak tu máme zase jeden pojem, který se celý minulý rok skloňoval ve všech pádech. Zní to celke...


Úvod
Dynamické HTML. Tak tu máme zase jeden pojem, který se celý minulý rok
skloňoval ve všech pádech. Zní to celkem pěkně skoro bych řekl až dynamicky.
Většina lidí si také pod pojmem dynamické HTML vybaví nějakou webovou stránku,
která se hýbe o něco více, než je v této společnosti obvyklé.
Doba však již pokročila a v roce 1998 se neznalost dynamického HTML může stát
společensky nepřijatelnou. (Pokud ovšem společnost definujeme jako skupinu
webových vývojařů, kteří mají blízko k firmě Microsoft.) Proto jsme pro vás
připravili Téma týdne věnované právě dynamickému HTML. Klademe si poměrně
ambiciózní cíle. Jednak se pokusíme vymezit samotný pojem dynamické HTML tedy
pojem sice často používaný, ale pro mnohé možná mlhavý. Co je však důležitější,
po přečtení Tématu týdne budete schopni vytvářet vlastní stránky v dynamickém
HTML. A aby toho nebylo málo, nastíníme směry, kterými se dynamické HTML bude
ubírat v budoucnu. Nevynecháme ani porovnání možností dynamického HTML s Javou.
Od té doby, co má Microsoft kvůli implementaci Javy problémy se Sunem,
prosakují totiž ne tak zcela zasvěcené zprávy o tom, že Microsoft se na Javu
může "vykašlat", protože dynamické HTML nabízí stejnou funkčnost.
Podívejme se tedy dynamickému HTML na zoubek. Především musíme hned na počátku
říci, že dynamické HTML nepřidává do samotného jazyka HTML žádné nové elementy
nebo atributy. Dynamické HTML pouze definuje způsob, jakým mohou skripty
zařazené do stránky měnit její obsah přidávat a ubírat elementy, měnit jejich
obsah a pohrávat si s hodnotami atributů. Veškeré změny jsou prohlížečem
okamžitě zjištěny a zobrazení stránky se přizpůsobí aktuálnímu stavu.
Touto technikou lze dosáhnout právě oněch na první pohled dynamicky
vypadajících změn stránky. Ještě výraznější dopad na vzhled má měnění stylů.
Víme, že pomocí kaskádových stylů (CSS) můžeme velice efektivně ovládat
atributy zobrazení jednotlivých elementů. V dynamickém HTML můžeme samozřejmě
pomocí skriptů měnit i styly a tím dosáhnout mnoha zajímavých efektů.
Pokud tedy chceme vytvářet stránky v dynamickém HTML, stačí, když umíme
používat jazyk HTML společně se styly a ovládáme některý ze skriptovacích
jazyků. Znalost jazyka HTML je dnes již víceméně běžná, takže se v našem článku
zaměříme hlavně na skripty a styly. Seznámíme se především s používaním
skriptovéha jazyka JavaScript, který je dnes nejrozšířenější. Navíc již dnes
existuje i jeho verze evropsky přijatá jako standard tzv. ECMAScript. Samotnými
styly se nebudeme zabývat až tak podrobně nedávno jsme je probrali v seriálu
věnujícím se tvorbě stránek. Zopakujeme pouze nejdůležitější fakta a seznámíme
se s rozšířeními, která byla do stylů přidána právě kvůli dynamickému HTML.
Doufáme, že jako užitečný shledáte přehled všech vlastností, které lze pomocí
stylů řídit. Na závěr si pak necháme několik praktických ukázek dynamické HTML,
kterými se můžete nechat inspirovat.
Než se pustíme do samotného výkladu, musíme se seznámit s jedním zajímavým
faktem. Dynamické HTML zatím není nijak standardizováno např. jako jazyk HTML
nebo protokol HTTP. Konsorcium W3C již vytvořilo pracovní návrh tzv. DOM
(Document Object Model) objektového modelu dokumentu. Tento dokument popisuje
způsob, jakým jsou přístupné jednotlivé elementy a atributy HTML dokumentu.
Implementace DOM v skriptovacím jazyku je tedy nutnou podmínkou pro používání
dynamického HTML.
Společnost Microsoft však nečekala, až bude DOM schválen, a implementoval
dynamické HTML již asi před rokem. Naštěstí Microsoft spolupracoval i při
vytváření DOM, a tak dynamické HTML v podání Microsoftu z velké části požadavky
definované v DOM splňuje. Z toho také vyplývá, že dynamické HTML zatím
podporuje pouze prohlížeč Internet Explorer 4.0. Netscape měl vlastní představu
dynamického HTML, ta však nebyla tak technologicky vyspělá jako varianta od
Microsoftu. Netscapu proto asi nezbude nic jiného, než v budoucnu podporovat
dynamické HTML v té podobě, jak je prosazuje Microsoft.
Microsoft pod pojem dynamické HTML nezařazuje jen koktejl šikovně namíchaný z
HTML, skriptů a stylů. V jeho pojetí se pod dynamickým HTML skrývají i různé
technologie založené na ActiveX. Těmi se však nebudeme příliš zabývat, protože
ActiveX je technologie závislá na platformě Wintel a je tedy v rozporu se
základní myšlenkou Webu nezávislostí na platformě.
Zaměříme se proto pouze na perspektivní části dynamického HTML, které nejsou
platformově závislé.
Kaskádové styly
HTML je značkovací jazyk, ve kterém by se měl pomocí značek tagů vyznačovat
význam jednotlivých částí textu. Víme však, že dnes v HTML existuje několik
atributů a elementů, které ovlivňují pouze grafický vzhled. Použitím těchto
atributů a elementů sice můžeme získat graficky atraktivní stránku, tato
varianta má však i řadu nevýhod.
Text stránky je mnohdy špatně strukturován, protože jednotlivé elementy jsou
využívány účelově k dosažení určitých grafických efektů. Druhou velkou
nevýhodou je velká pracnost většina z vizuálních atributů musí být nastavována
opakovaně u všech elementů.
Obě tyto nevýhody odstraňují kaskádové styly Cascading Style Sheets (CSS).
Styly umožňují definovat způsob zobrazení (druh a velikost písma, barvu,
zarovnání apod.) každého elementu na stránce. Styl však není přímo součástí
textu stránky a tak může být zápis stránky přehlednější a dobře strukturovaný.
Navíc styly umožňují definovat jednotný vzhled určitého elementu v celém
dokumentu jedním zápisem nemusíme jej opakovat u každého elementu.
Práce se styly byla poměrně podrobně rozebrána v seriálu Vytváříme si domovskou
stránku, takže si zde jen zopakujeme nejdůležitější poznatky. Podrobněji se
budeme zabývat pouze vlastnostmi umožňujícími řízení pozice elementů na stránce
tyto vlastnosti byly totiž do HTML přidány právě kvůli dynamickému HTML. Kromě
toho se podíváme na používání filtrů v Internet Exploreru 4.0, protože s filtry
se pracuje podobně jako s ostatními vlastnostmi stylů.
Doufám, že cennou pomůckou pro vás bude přehled všech vlastností stylů, který
je součástí dnešního Tématu týdne.
Malá rekapitulace základů práce se styly
Práce se styly je velmi snadná. Ukážeme si ji na jednoduchém stylu, který
zajistí, aby všechny nadpisy první až třetí úrovně byly zobrazeny bezpatkovým
písmem a modře. Nadpisy první úrovně budou navíc ještě vycentrovány:
H1, H2, H3 { font-family: Arial, sans-serif; color: blue }
H1 { text-align: center }
Tento jednoduchý styl se skládá ze 2 pravidel. Každé pravidlo má 2 části
selektor (např. H1) a deklaraci (text-align: center). Všechny deklarace se
skládají ze 2 částí z vlastnosti (např. text-align) a z její hodnoty (center).
Pravidla i deklarace lze navzájem různě sdružovat.
Selektor nám zajišťuje vazbu na odpovídající HTML element. Jako selektor mohou
být samozřejmě použity všechny elementy HTML. Selektory lze vytvářet i
kontextové. Např. pravidlo se selektorem H1 EM se použije pouze na text
elementu EM, který je uvnitř nadpisu 1. úrovně.
Vlastností, které je u každého elementu možno použít, je několik desítek.
Všechny jsou uvedeny v připojených tabulkách.
Aby mohl při zobrazování stránky použít prohlížeč styl, musí o něm mít
informaci. Nejčastěji se používají následující 3 způsoby připojení stylu ke
stránce.
<HTML> <HEAD> <TITLE>Titulek stránky</TITLE> <LINK REL=StyleSheet
TYPE="text/css" HREF="http://style.com/super" TITLE="Super styl"> <STYLE
TYPE="text/css"> <!-H1, H2, H3 { font-family: Arial, sans-serif; color: blue }
H1 { text-align: center } --> </STYLE> </HEAD> <BODY> <H1>Nadpis je krásně
modrý a vycentrovaný</H1> <P STYLE="color: green">Ekologický paragraf je
zelený. </BODY>
</HTML>
První způsob využívající element LINK připojí k dokumentu styl uložený v
separátním souboru.
Styl může být definován i přímo v dokumentu mezi tagy <STYLE> a </STYLE>.
Pomocí komentáře jsme definici stylu skryli před staršími prohlížeči, které CSS
nepodporují. Poslední možností je definice stylu pouze pro 1 konkrétní element.
Toho lze dosáhnout použitím atributu STYLE, který můžeme použít u všech
elementů. Tento způsob však poněkud odporuje samotné filozofii stylů míchá
totiž obsah dokumentu s jeho grafickou prezentací. V dynamickém HTML nám však
mnohdy prokáže neocenitelné služby.
Rozšíření stylů o řízení pozice elementů
Nyní se podrobněji podíváme na vlastnosti, které umožňují řídit umístění
jednotlivých elementů na stránce. Toto rozšíření je dnes pracovním návrhem
konsorcia W3C a zřejmě se brzy stane doporučením W3C (a pro nás tedy i
standardem). Toto rozšíření je dnes i integrální součástí návrhu nové verze
kaskádových stylů CSS2.
Rozšíření přináší nové vlastnosti, které umožňují přesně řídit vzájemné
umístění jednotlivých elementů na stránce. Mezi nejdůležitější nové vlastnosti
patří left a top, které určují posunutí elementu. Jejich konkrétní interpretace
však závisí na hodnotě vlastnosti position. Ta může nabývat dvou hodnot
absolute a relative, které rozlišují mezi absolutním a relativním určením
pozice.
Absolutní určení pozice
Pokud použijeme absolutní určení pozice elementu, je tento element zobrazen
zcela nezávisle na svém původním umístění. Jeho levý horní roh se posune do
místa zadaného pomocí left a top. Souřadnice se vztahují k souřadnému systému
nadřazeného elementu a tím je nejčastěji celý dokument. Jeho levý horní roh má
souřadnice (0,0).
Jako hodnotu vlastností left a top můžeme použít buď pixely (px), nebo
procento, které se vztahuje k šířce, resp. výšce rodičovského elementu:
<BODY>
<H1>Zkouška absolutního umístění</H1>
<SPAN STYLE="position: absolute; left: 50%; top: 50%">
<B>Computerworld</B> začíná přesně uprostřed obrazovky</SPAN>
</BODY>
Výsledek našeho prvního pokusu o změnu umístění elementu na stránce si můžeme
prohlédnout na obrázku 1.
Šířku, do které se bude formátovat obsah elementu, můžeme určit pomocí
vlastnosti width. Výška se pak upraví podle potřeby. I tu však můžeme nastavit
pomocí vlastnosti height.
Absolutně umístěné elementy se mohou překrývat. O tom, který element bude
vidět, rozhoduje vlastnost z-index. Element, který ji má nastavenu na větší
hodnotu, překryje ty ostatní. Využití popsané vlastnosti demonstrujeme na
následující malé ukázce (viz obr. 2):
<HTML>
<HEAD>
<TITLE>Absolutní umístění a z-index</TITLE>
<STYLE TYPE="text/css">
<!-.nadpis { font-size: 80px; font-style: bold }
-->
</STYLE>
</HEAD>
<BODY>
<DIV CLASS=nadpis>
<SPAN STYLE="position: absolute; left: 1; top: 1; color: #001; z-index:
1">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 2; top: 2; color: #003; z-index:
2">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 3; top: 3; color: #005; z-index:
3">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 4; top: 4; color: #007; z-index:
4">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 5; top: 5; color: #009; z-index:
5">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 6; top: 6; color: #00b; z-index:
6">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 7; top: 7; color: #00d; z-index:
7">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 8; top: 8; color: #00f; z-index:
8">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 9; top: 9; color: #22f; z-index:
9">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 10; top: 10; color: #44f; z-index:
10">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 11; top: 11; color: #66f; z-index:
11">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 12; top: 12; color: #88f; z-index:
12">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 13; top: 13; color: #aaf; z-index:
13">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 14; top: 14; color: #ccf; z-index:
14">Computerworld</SPAN>
<SPAN STYLE="position: absolute; left: 15; top: 15; color: #eef; z-index:
15">Computerworld</SPAN>
</DIV>
</BODY>
</HTML>
Relativní určení pozice
Pokud použijeme relativní určení pozice, element se pouze posune ze své
přirozené pozice o délku určenou pomocí left a top. Jeho formátování přitom
zůstane zachováno. Text v nadřazeném elementu zůstane zformátován tak, jako by
posunutý element nebyl vůbec posunut. Malá ukázka:
Nějaký text
<SPAN STYLE="position: relative; left: 10px; top: 10px">
Relativní text</SPAN>
a zase původní text.
Element se stylem position: relative opět definuje nový souřadný systém s
počátkem ve svém levém horním rohu. To lze využít např. pro vytvoření stínu:
<DIV STYLE="font: bold 30px Arial">Ukázka
<SPAN STYLE="position: relative">stínovaného textu
<SPAN STYLE="position: absolute; left: 2px; top: 2px;color: green">stínovaného
textu
</SPAN></SPAN>uvnitř jiného textu.</DIV>
Pro vytváření různých efektů je důležitou vlastností visibility. Může nabývat
dvou hodnot visible a hidden. První z nich říká, že element bude vidět. Druhá,
že vidět nebude.
Vlastnost visibility musíme odlišit od vlastnosti display. Deklarace display:
none způsobí, že se element bude zcela ignorovat, jakoby na stránce vůbec
nebyl. Oproti tomu visibility: hidden vynechá pro element místo, element pouze
není viditelně zobrazen. To lze využít pro různé efekty, pokud máme několik
elementů překrytých přes sebe a podle potřeby je zviditelňujeme a
zneviditelňujeme.
Filtry v IE 4.0
Filtry jsou novinkou v Internet Exploreru 4.0. Filtry umožňují modifikovat
vzhled elementu lze např. přidat stín, nastavit element průhlednost apod. Kromě
těchto filtrů jsou podporovány i přechodové filtry, které umožňují pomocí
různých grafických efektů přejít od jednoho zobrazeného elementu k jinému. S
filtry se do jisté míry pracuje stejně jako se styly a proto jsme je zařadili
na toto místo.
Samotná deklarace filtru ve stylu je jednoduchá. Obecně ji můžeme zapsat jako
filter: jméno_filtru(parametry)
Jedna deklarace přitom může obsahovat několik filtrů najednou jednotlivé filtry
se oddělí mezerou. Následující HTML kód vloží do stránky obrázek a pomocí
filtrů u něj vytvoří stín a vertikálně ho otočí:
<IMG SRC="fotka.jpg" TYLE="filter:DropShadow(Color=#808080,OffX=4,OffY=4)
FlipV()">
Filtry nelze používat u všech elementů, ale jen u některých. Obecně se dá říci,
že jde o elementy, které po zobrazení vždy zaujímají obdélníkovou plochu
konstantní velikosti. Jedná se o elementy BODY, BUTTON, IMG, INPUT, TABLE, TD,
TEXTAREA, TFOOT, TH, THEAD, TR. Filtry lze aplikovat i na elementy DIV a SPAN,
pokud mají definovánu výšku a šířku anebo jsou na stránce umístěny absolutně.
Podrobný přehled filtrů a všech jejich parametrů je uveden v tabulce.
Praktickou práci s filtry, a to včetně filtrů přechodových, si předvedeme v
části věnované ukázkám dynamického HTML.
JavaScript
JavaScript je jednoduchý programovací jazyk, který je možno zapisovat přímo do
kódu HTML stránky. Pochází z vývojářské dílny firmy Netscape, ale dnes ho
podporuje i Internet Explorer.
Příčinou vzniku JavaScriptu byl požadavek na zvýšení uživatelského komfortu pro
uživatele stránek. JavaScript můžeme použít např. při vstupní kontrole dat
vkládaných do formulářů ještě předtím, než jsou vyplněné údaje odeslány na
server. Kontrolu údajů nemusí provádět server a výsledkem je pro uživatele
rychlejší odezva. JavaScript ve svých prvních verzích navíc umožnil i vytváření
interaktivnějšího uživatelského rozhraní stránek. Stránka mohla reagovat na
různé události vyvolané uživatelem a např. doplňovat pole do formulářů nebo
vyvolat otevření nového okna prohlížeče. Tyto možnosti pak dále rozšířil nový
koncept dynamického HTML.
My se nyní stručně seznámíme se základy programování v JavaScriptu. Poté si
ukážeme, jak se skripty (tak se říká programům v JavaScriptu) zařazují do HTML
stránky. V poslední části se podíváme na to, jak jsou v JavaScriptu přístupné
jednotlivé komponenty prohlížeče a stránky pomocí objektového modelu dokumentu
(DOM).
JavaScript za devět a půl minuty
Ačkoliv je JavaScript velice jednoduchý jazyk, nemůžeme přesto na tomto
omezeném prostoru postihnout všechny jeho vlastnosti. Zmíníme se tedy proto jen
o těch nejpodstatnějších. Zájemce o podrobnější informace odkážeme na
specializované knihy, které se věnují problematice JavaScriptu na několika
stech stranách. V současné době je na trhu již několik takových knih i v českém
jazyce.
Každý program se skládá z příkazů, které se provádějí sekvenčně v pořadí, v
jakém jsou zapsány. Jednotlivé příkazy se od sebe oddělují středníkem a je
dobrým zvykem psát každý příkaz na samostatnou řádku program je pak mnohem
přehlednější.
V programech můžeme používat proměnné, které slouží k uložení různých hodnot
podle našich potřeb. Proměnné není potřeba předem deklarovat, ale je to tak
lepší. Deklarace proměnné se uvozuje klíčovým slovem var:
var Pocitadlo = 0;
var PocetMesicu = 12;
var i, j;
var Pozdrav = "Ahoj Karle!";
var Nalezeno = false;
V našem příkladě jsme deklarovali 6 proměnných. První 2 z nich jsme již přímo
inicializovali počáteční hodnotou. Názvy proměnných by se měly skládat z
písmen, číslic a podtržítek. První písmeno názvu přitom nesmí být číslice.
JavaScript rozlišuje velikost písmen v názvech. Proměnné Pocitadlo a POCITADLO
jsou tedy 2 různé.
Proměnné mohou obsahovat jeden ze 3 typů dat, kterými jsou číslo, textový
řetězec a logická hodnota. Logická hodnota odpovídající pravdě se jmenuje true.
Nepravdě odpovídá hodnota false.
Mezi nejjednodušší příkazy patří přiřazovací příkaz. Jeho tvar je
proměnná = výraz
Do proměnné se přiřadí hodnota výrazu uvedeného na pravé straně. Výraz může
obsahovat proměnné a konstanty různě pospojované pomocí operátorů.
K dispozici jsou samozřejmě běžné operátory jako "+" (sčítání), "-" (odčítání),
"*" (násobení) a "/" (dělení).
delta = y x;
obvod = 2 * 3.14 * polomer;
palce = centimetry / 2.54;
Pokud chceme obsah nějaké proměnné zvýšit nebo snížit o jedničku, můžeme použít
operátor "++" nebo "-". Následující 2 příkazy jsou ekvivalentní:
x = x + 1;
x++;
Zestručnění zápisu některých operací je možné i pomocí dalších "vychytávek".
JavaScript obsahuje i operátory "+=", "-=", "*=" a "/=". Jejich význam bude
zřejmý z ukázky, jež opět obsahuje 2 příkazy, které mají stejný efekt.
PoziceX = PoziceX + KrokX;
PoziceX += KrokX;
Pokud zapisujeme logické výrazy, můžeme použít několik relačních a logických
operátorů. Pro porovnání je v JavaScriptu operátor "==". Hodnota výrazu
(3+2)==5 je tedy true. Pokud chceme testovat nerovnost, použijeme operátor "!=".
Pro porovnávání hodnot máme k dispozici relační operátory "<", ">", "<=" a ">=".
Logické výrazy můžeme navzájem spojovat pomocí logických spojek "&&" (a
zároveň) a "||" (nebo). Negaci výrazu provedeme zapsáním vykřičníku "!" před
jeho začátek.
JeVIntervalu = (x >= DolniMez) && (x <= HorniMez);
Běh programu můžeme ovlivňovat pomocí podmíněných příkazů. Jejich tvar je
následující:
if (podmínka) { příkazy, které se provedou při splnění podmínky }
else { příkazy, které se provedou při nesplnění podmínky }
Část else je nepovinná a nemusí se tedy používat, podmínka je libovolný výraz,
jehož výsledek je true nebo false.
if (hodina > 12) { hlaseni = "Dobré odpoledne!"; }
else { hlaseni = "Dobré ráno!"; }
Pokud se má podmíněně provést pouze 1 příkaz, nemusíme jej uzavírat do
složených závorek:
if (hodina > 12) hlaseni = "Dobré odpoledne!"
else hlaseni = "Dobré ráno!";
Pokud potřebujeme několik příkazů provést opakovaně, můžeme s výhodou použít
cyklů. JavaScript nabízí několik typů cyklů, my se seznámíme s cyklem for a
while.
Cyklus for má tvar:
for (počáteční inicializace; podmínka; inkrementace) { příkazy }
Praktické použití si ukážeme na programu, který spočítá hodnotu faktoriálu z
čísla n:
var i, faktorial = 1;
for (i=1; i<=n; i++) { faktorial *= i; }
Cyklus while má syntaxi ještě jednodušší:
while (podmínka) { příkazy }
Příkazy uvedené v těle cyklu se provádějí, dokud je splněna podmínka. Musíme si
tedy dát pozor na to, aby podmínka závisela na nějaké proměnné, kterou měníme
uvnitř cyklu. Jinak se nám může stát, že získáme nekonečnou smyčku.
Velice užitečnou pomůcku nabízí JavaScript v možnosti definovat si vlastní
funkce. Funkce použijeme v případech, kdy potřebujeme v programu na různých
místech provádět stejné činnosti. Použitím funkcí kód programu zkrátíme,
zpřehledníme a půjde snadněji modifikovat. Definujme funkci pro výpočet
faktoriálu. Funkce bude navíc rekurzivní, protože bude volat sama sebe:
function Faktorial(n) { if ((n==1) || (n==0)) return 1 else return (n *
Faktorial(n-1)); }
Takto definovanou funkci můžeme použít pro vypsání tabulky faktoriálů od 1 do
10:
var i;
for (i=1; i<=10; i++) { document.writeln(i, "! = ", Faktorial(n)); }
Jako výsledek dostaneme tabulku:
1! = 1
2! = 2
3! = 6
4! = 24
5! = 120
6! = 720
7! = 5040
8! = 40320
9! = 362880
10! = 3628800
Funkce vrací hodnotu, která je uvedena za slovem return. Funkce nemusí vracet
žádnou hodnotu, pak ji používáme jako samostatný příkaz a ne jako část výrazu.
Funkce může mít i více parametrů, ty se pak oddělují čárkou.
V poslední ukázce se objevila konstrukce document. writeln. Tento zápis
specifikuje vyvolání metody writeln u objektu document. Popis objektů vážících
se k prohlížeči a stránce uvedeme na konci tohoto článku. JavaScript však
obsahuje i několik objektů, které s HTML vůbec nesouvisí. Jedná se o objekty
String, Date a Math. Ty umožňují práci s řetezci, s údaji o datu a čase a s
matematickými funkcemi.
ObvodKruhu = 2 * Math.PI * Polomer;
c = Math.sqrt(a*a+b*b);//důsledek Pythagorovy věty
Druhá řádka obsahuje ukázku komentáře. Vše za znaky "//" až do konce řádky se
ignoruje a považuje se pouze za komentář, který vysvětluje význam programu.
Zakomponování JavaScriptu do HTML
Podívejme se nyní na prostředky, které nám HTML nabízí pro vkládání skriptů do
stránek. Skripty můžeme v zásadě rozdělit na 2 skupiny:
lSkripty, které jsou vykonány při nahrání stránky do prohlížeče. Tyto skripty
se do stránky vkládají pomocí elementu SCRIPT.
lSkripty, které jsou vykonány vždy, když se vyskytne určitá událost. Událostí
existuje několik a vždy se musí připojit ke konkrétnímu elementu. Událostí může
být např. přejetí myší nad elementem.
Skript se do stránky vkládá pomocí párového elementu SCRIPT. Skript můžeme
vložit do stránky buď přímo, nebo uvést pouze odkaz na URL, které obsahuje
program v příslušném skriptovacím jazyce. Pro určení typu skriptovacího jazyka
bychom měli použít atribut LANGUAGE. Vložení jednoduchého skriptu do stránky
může tedy vypadat např. takto:
<SCRIPT LANGUAGE="JavaScript"> window.status = "Právě prohlížíte moji stránku."
</SCRIPT>
Výše uvedený skript zobrazí zadaný text ve stavové řádce. Určení druhu
skriptovacího jazyka pomocí atributu LANGUAGE je důležité, protože de HTML lze
vkládat i skripty zapsané v jiných jazycích, jako je VBScript nebo Tcl.
Druhou možností je vložit skript pouze pomocí odkazu. I v tomto případě však
musíme použít ukončovací tag </SCRIPT>:
<SCRIPT LANGUAGE="JavaScript" SRC="http://netscape.com/exmpl/demo.js">
</SCRIPT>
Skripty mohou být na stránce umístěny kdekoliv v záhlaví (HEAD) i v těle
dokumentu (BODY). Do záhlaví bychom měli umístit vše, co musí být vykonáno
ještě dříve, než začne uživatel pracovat s dokumentem např. definice funkcí,
které se vyvolávají různými událostmi.
Při vkládání skriptů je rovněž vhodné jejich obsah skrýt před staršími
prohlížeči pomocí triku s komentáři:
<HEAD>
<TITLE>Stránka, která vám popíše stavovou řádku</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-window.status = "Právě prohlížíte moji stránku."
// -->
</SCRIPT>
</HEAD>
Před ukončením HTML komentáře --> použijeme 2 lomítka, aby se interpreter
JavaScriptu nepokoušel konec HTML komentáře považovat za část skriptu. To má ve
zvyku zejména Netscape Navigator.
Pokud používáme skripty pro dynamické vygenerování části dokumentu, můžeme
použít element NOSCRIPT a umístit do něj alternativní text pro starší
prohlížeče, které nepodporují skripty:
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("Používáte prohlížeč " + navigator.appName + " " +
navigator.appVersion)
// -->
</SCRIPT>
<NOSCRIPT>
Používáte prohlížeč, který nepodporuje JavaScript.
</NOSCRIPT>
</BODY>
Z předchozí ukázky vidíme, že text vygenerovaný programem v JavaScriptu se
stává součástí stránky. Příkazy uvedené uvnitř elementu SCRIPT se provedou
pouze jednou při načítání stránky.
Aby byly naše dokumenty opravdu interaktivní, je potřeba, aby provedení určité
části skriptu bylo vyvoláno událostí, kterou způsobil uživatel. Událostí může
být přejetí myší přes určitý element, kliknutí myší apod.
U každého elementu můžeme použít několik nových atributů, které odpovídají
jednotlivým událostem. Jako jejich hodnota se uvádějí příkazy, které se po
vyvolání dané události mají provést tzv. obsluha události. Obecně můžeme
použití události u nějakého elementu zapsat jako:
<TAG událost=obsluha události>
Přehled událostí, které můžeme použít, uvádí tabulka. Ukážeme si část stránky,
kde se po najetí myší nad odkaz ve stavové řádce prohlížeče objeví vysvětlující
text:
O rozvoj Webu se stará konsorcium
<A HREF="http://www.w3.org" onMouseOver="window.status='Kliknutím na odkaz se
dostanete na domovskou stránku konsorcia W3C'">
W3C</A>
Jako obsluhu události bychom měli používat vyvolání dříve definované funkce,
která zajistí všechny potřebné akce. Toto řešení nám usnadní pozdější změny v
chování obsluhy události a zpřehlední zápis stránky v HTML.
Objektový model dokumentu
Objektový model dokumentu (DOM) uspořádává všechny objekty, které reprezentují
prohlížeč a právě zobrazené stránky, do hierarchie, odkud je možné k
jednotlivým objektům přistupovat a pracovat s nimi.
Základním objektem je window, přes který jsou dostupné všechny další objekty.
Nejdůležitějším objektem je document, který v sobě zahrnuje všechny objekty a
vlastnosti vztahující se k aktuálnímu dokumentu. Na jednotlivé objekty v
hierarchii (viz obrázek 3 na str. 18) se odvoláváme pomocí tečkové notace:
window.screen, window.document, window.document.body.
Protože jsou všechny objekty potomky objektu window, může tento vynechávat.
Zkráceně můžeme psát window. screen, document, document.body.
Na dalších nižších úrovních v objektové hierarchii mohou být buď další objekty,
nebo přímo vlastnosti a metody jednotlivých objektů. Vše si ukážeme na
následujícím příkladu. Objekt document.all obsahuje všechny elementy obsažené v
dokumentu. Přístupné jsou pomocí svého jména definovaného atributem ID:
<H1 ID=Nadpis>Pokusný nadpis</H1>
<P ID=Odstavec1>Text odstavce teď není důležitý
Nyní můžeme ve skriptech na stránce používat objekty document.all.Nadpis a
document.all.Odstavec1, které zastupují element pro nadpis a odstavec. U těchto
objektů máme k dispozici vlastnosti, které odpovídají atributům použitelným u
odpovídajících elementů. Pomocí vlastnosti document.all.Nadpis.align můžeme
měnit způsob zarovnání nadpisu. Následující ukázka obsahuje skript, který po
kliknutí myší na nadpis změní jeho zarovnání zleva doprostřed. Jde o první
ukázku skutečného dynamického HTML v dnešním Tématu týdne.
<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 1.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function ChangeAlign()
{ document.all.Nadpis.align = "center";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis ALIGN=LEFT onClick="ChangeAlign()">Pokusný nadpis</H1>
<P ID=Odstavec1>Text odstavce teď není důležitý
</BODY>
</HTML>
Z principu práce s dynamickým HTML vidíme, že stránka bez problémů bude
pracovat i s prohlížeči, které dynamické HTML nepodporují. Jen se po kliknutí
myší na nadpis nic nestane, protože tyto prohlížeče neumějí dynamicky měnit
obsah stránky po jejím zobrazení. To však nijak dramaticky nesníží informační
hodnotu stránky.
U objektů, které odpovídají elementům stránky, máme k dispozici vlastnost i
objekt style. Pomocí vlastnosti style můžeme přistupovat k definici stylu
elementu stejně jako pomocí atributu STYLE. Následující kód by změnil barvu a
velikost nadpisu:
document.all.Nadpis.style = "color: red; font-size: 30px";
Zajímavé je, že style je zároveň vlastnost i celý objekt. Vlastnosti objektu
style odpovídají jednotlivým vlastnostem stylů. Poslední efekt tedy můžeme
dosáhnout i následujícím kódem:
document.all.Nadpis.style.color = "red";
document.all.Nadpis.style.fontSize = "30px"
Zajímavá je vlastnost innerText. Ta obsahuje text uvnitř elementu. Zápisem do
této vlastnosti můžeme text změnit. Zkusme následující legrácku:
<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 2.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function ChangeText()
{ document.all.Nadpis.innerText = "Posloucháte mě pěkně!!!";
document.all.Nadpis.style.color = "blue"; document.all.Nadpis.style.fontSize =
"50px";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis onClick="ChangeText()">
Klikněte na tenhle nadpis a uvidíte, co se stane.</H1>
</BODY>
</HTML>
Dokonce lze měnit celý element, nejen jeho obsah. Použijeme vlastnost outerHTML
a předchozí ukázku upravíme tak, aby se po kliknutí místo nadpisu objevil
obrázek:
<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 3.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function ChangeText()
{ document.all.Nadpis.outerHTML =
"<IMG SRC=astro.gif>" + "<P>Kromě obrázku přidám i krátký odstavec textu.";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis onClick="ChangeText()">
Klikněte na tenhle nadpis a uvidíte, co se stane.</H1>
</BODY>
</HTML>
V objektovém modelu nalezneme pod objektem document i kolekci styleSheets,
která obsahuje jednotlivé styly připojené ke stránce. Pomocí její metody
addRule (selektor, deklarace, index) můžeme do stylu přidávat nová pravidla.
Následující dokument se po kliknutí myší celý vycentruje.
<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 4.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function ChangeDocumentAlign()
{ document.styleSheets[0].addRule("BODY",
"text-align: center", 0);
}
// -->
</SCRIPT>
<STYLE></STYLE>
</HEAD>
<BODY onClick="ChangeDocumentAlign()">
<H1>Nadpis</H1>
<P>A několik odstavců textu
</BODY>
</HTML>
Abychom mohli do kolekce stylů něco přidávat, musí kolekce existovat. Proto
stránka obsahuje prázdný element STYLE, který vytvoří kolekci styleSheets s 1
prvkem.
Bohužel zde nemůžeme rozebrat celou objektovou hierarchii. Zmíníme se však
ještě alespoň o několika zajímavostech. Adresa dokumentu, který je právě
zobrazován, je přístupná přes objekt location. Pokud tedy chceme přímo skriptem
změnit stránku, která se právě zobrazuje, můžeme použít příkaz
location="http://někde.jinde.cz".
Pokud máme stránku rozdělenou na rámy, můžeme z jakéhokoliv rámu měnit stránku
zobrazenou v ostatních rámech. Stačí novou adresu zapsat do
parent.jméno_rámu.location. Tímto způsobem můžeme dosáhnout speciálních efektů,
jako je změna obsahu více rámů najednou po zvolení jednoho odkazu. Vždy bychom
však měli zvážit, zda je chování stránky snadno pochopitelné pro její uživatele.
Praktické ukázky
Když jsme se seznámili se základy, na kterých dynamické HTML staví, je teď ta
pravá chvíle pro několik větších ukázek jeho možností.
Zobrazování částí dokumentu na požadavek uživatele
Tato ukázka je pro předvedení možností dynamického HTML přímo typická. Nahraje
se stránka, které obsahuje několik zpráv, ale zobrazí se pouze jejich nadpisy.
Samotný text zpráv bude skryt nastavením vlastnosti display na hodnotu none.
Celá zpráva se zobrazí až po najetí myší na jeho název. Navíc se nadpis
zobrazené zprávy barevně zvýrazní. Podobný mechanismus můžeme použít i pro
několikaúrovňové seznamy, které umožníme postupně rozbalovat do nižších úrovní.
Zobrazení stránky v prohlížeči s podporou dynamického HTML si můžeme
prohlédnout na obrázku 4.
<HTML>
<HEAD>
<TITLE>Aktuality z Computerworldu</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function Display(elementID)
{
var id; id = "Zprava" + elementID; document.all.item(id).style.display = ""; id
= "Nadpis" + elementID; document.all.item(id).style.color = "red";
}
function Undisplay(elementID)
{
var id;
id = "Zprava" + elementID; document.all.item(id).style.display = "none"; id =
"Nadpis" + elementID; document.all.item(id).style.color = "black";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<DIV ALIGN=CENTER>
<IMG SRC=cw.gif ALT="Computerworld"><BR>
Myší najeďte nad titulek zprávy, kterou si chcete přečíst.
</DIV>
<DIV onMouseOver="Display('1')"
onMouseOut="Undisplay('1')">
<H1 ID=Nadpis1>Network Publishing</H1>
<DIV ID=Zprava1 STYLE="display: none">
<P>Vedoucí představitelé společnosti Live Picture začali hovořit o "network
publishingu". John Sculley z Live Picture řekl, že revoluce bude srovnatelná s
tím, co se ve světě DTP dělo (zejména pod křídly MacOS) ve 2. polovině 80. let.
Velký význam by měl mít formát FlashPix a Internet Imaging Protocol, který
společně vyvinuly firmy Live Picture, Eastman Kodak, Hewlett-Packard a
Microsoft.
</DIV>
</DIV>
<DIV onMouseOver="Display('2')"
onMouseOut="Undisplay('2')">
<H1 ID=Nadpis2>Freedom Of Choice</H1>
<DIV ID=Zprava2 STYLE="display: none">
<P>Společnost Netscape oznámila záměr změnit stav, kdy podíl jejího browseru na
trhu klesá. Po rozhodnutí soudu o nepřípustnosti vázat instalaci Windows 95 na
Internet Explorer, zahajuje Netscape především na Internetu mohutnou reklamní
kampaň pojmenovanou "Freedom Of Choice". Představitelé společnosti údajně
zvažují i možnost, že např. separovaný Navigator by mohl být šířen zdarma.
</DIV>
</DIV>
<DIV onMouseOver="Display('3')"
onMouseOut="Undisplay('3')">
<H1 ID=Nadpis3>SQW 2.0</H1>
<DIV ID=Zprava3 STYLE="display: none">
<P>Společnost Corpus oznámila verzi 2.0 svého vývojového prostředí SQW.
Největší zlepšení oproti předešlé verzi by mělo spočívat ve zvýšení rychlosti
provozu dynamicky generovaných databázových aplikací.
</DIV>
</DIV>
</BODY>
</HTML>
Všimněme si, že jednotlivé zprávy jsou obsaženy v elementu DIV, aby pro ně šlo
nastavit společné reagování na události. Na ukázce je rovněž vidět, jaké úspory
přináší používání funkcí a jejich parametrizování.
Definovali jsme 2 funkce Display() a Undisplay(). Obě jako parametr očekávají
číslo zprávy. Display() zobrazí obsah zprávy a zvýrazní její nadpis. Nadpisy
musí mít rovněž přiřazeny správné ID. Undisplay() se volá po opuštění elementu
myší a text zprávy schová a barvu nadpisu nastaví zpět na černou.
Při vytváření dynamických stránek bychom měli mít na paměti, že ne všichni
používají k prohlížení naší stránky nejnovější výstřelky browserové
technologie. Stránku s dynamickým HTML navrhujeme tak, aby se korektně
zobrazila i v prohlížečích bez podpory dynamického HTML. Není to nic těžkého.
Naše ukázková stránka tyto vlastnosti splňuje (viz obr. 5).
Zobrazení stránky s dynamickým HTML v prohlížeči, který ho nepodporuje
Zvýraznění odkazů po přejetí myší
Pokud chceme upoutat pozornost uživatele na naše odkazy, můžeme použít malý
trik. Vytvoříme takovou stránku, kde se barva odkazu změní z modré na červenou
vždy, když bude myš nad odkazem.
Abychom nemuseli předělávat celý dokument a u každého odkazu psát obsluhu
události, využijeme další zajímavý objekt z objektové hierarchie. Objekt
window. event.srcElement odpovídá elementu, ke kterému se váže aktuálně
zpracovávaná událost.
Události vyvolávající zvýraznění odkazů nastavíme pro celý dokument u elementu
BODY. V obsluze události si pak zkontrolujeme, zda element, nad kterým je myš,
je odkaz(A). Pokud ano, odkaz zvýrazníme, případně mu vrátíme původní barvu. V
dokumentu pak můžeme mít odkazů kolik chceme, barevně zvýrazňovat se budou
všechny.
<HTML>
<HEAD>
<TITLE>Stránka s aktivními odkazy</TITLE>
<STYLE TYPE="text/css">
<!-:link { color: blue }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function HighlightAnchor()
{ if (window.event.srcElement.tagName == "A")
window.event.srcElement.style.color = "red";
}
function LowlightAnchor()
{ if (window.event.srcElement.tagName == "A")
window.event.srcElement.style.color = "blue";
}
// -->
</SCRIPT>
</HEAD>
<BODY onMouseOver="HighlightAnchor()" onMouseOut="LowlightAnchor()"> zde může
být zcela libovolný dokument
</BODY>
</HTML>
Animace na stránce
Abychom na stránku mohli umístit nějakou animaci tj. element, který se pohybuje
musíme v pravidelných intervalech měnit jeho pozici. V tom nám výborně pomůže
metoda window.setInterval("funkce", ms). Funkce zadaná prvním parametrem se
vyvolá každých ms milisekund.
My vytvoříme stránku, na které se bude od okrajů obrazovky odrážet obrázek
zeměkoule. O pohyb obrázku zeměkoule a jeho odrážení od okrajů se stará funkce
Move(), která je volaná v pravidelných intervalech. Funkce skriptu by měla být
zřejmá z komentářů:
<HTML>
<HEAD><TITLE>Dynamické HTML odrážející se logo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var id, // pomocná proměnná pro časovač stepX, stepY; // krok v X a Y-směru
function Start() // spuštění pohybu
{ // umístění obrázku doprostřed obrazovky document.all.Logo.style.pixelLeft =
document.body.offsetWidth / 2; document.all.Logo.style.pixelTop =
document.body.offsetHeight / 2;
// obrázek uděláme viditelný document.all.Logo.style.visibility = "visible";
// náhodná inicializace směru a rychlosti pohybu stepX = (Math.random()+5) * 2
5; stepY = (Math.random()+5) * 2 5;
// nastavení časovače id = window.setInterval("Move()",50);
}
function Stop() // ukončení pohybu
{ // vypnutí časovače window.clearInterval(id);
// "schování obrázku" document.all.Logo.style.visibility = "hidden";
}
function Move() // posun loga
{ // posunutí obrázku document.all.Logo.style.pixelLeft += stepX;
document.all.Logo.style.pixelTop += stepY;
// odražení od levého okraje if (document.all.Logo.style.pixelLeft <= 0) stepX
= -stepX;
// odražení od pravého okraje if ( document.all.Logo.style.pixelLeft >=
(document.body.offsetWidth document.all.Logo.width stepX 22) ) stepX = -stepX;
// 22 je magické číslo šířky scroll-baru
// odražení od horního okraje if (document.all.Logo.style.pixelTop <= 0) stepY
= -stepY;
// odražení od dolního okraje if ( document.all.Logo.style.pixelTop >=
(document.body.offsetHeight document.all.Logo.height stepY) ) stepY = -stepY;
}
// -->
</SCRIPT>
<BODY onload="Start()">
<IMG ID="Logo" STYLE="visibility: hidden; position: absolute; z-index:-1"
SRC="earth.gif" onClick="Stop()">
<H1>A přece se točí...</H1>
Animaci můžete zastavit kliknutím na naši milou planetu.
</BODY>
</HTML>
U obrázku jsme vlastnost z-index nastavili na -1, aby se obrázek pohyboval pod
textem stránky.
Pokud si důkladně prohlédnete výsledek (viz obrázek 6 na str. 19), zjistíte, že
se navíc Zeměkoule otáčí okolo své osy. Nepoužili jsme totiž obyčejný obrázek,
ale animovaný GIF, který se postará o rotaci naší milé planety.
Stránky, které jsou moc živé, mohou některým uživatelům vadit, protože je ruší
při čtení. Měli bychom proto používat krátké animace nebo nabízet viditelný
způsob, jak animace ukončit.
8 0086 / pahn
Události, které lze obsloužit skriptem
UdálostPopis
onLoadUdálost je vyvolána po natažení dokumentu do okna prohlížeče
nebo do všech rámů v rámci jednoho FRAMESET. Atribut může být použit u elementů
BODY a FRAMESET.
onUnLoadUdálost je vyvolána po odstranění dokumentu z okna nebo rámu. Atribut
může být použit s elementy BODY a FRAMESET.
onClickUdálost je vyvolána po kliknutí myší
na element. Atribut může být použit u většiny elementů.
onDblClickUdálost je vyvolána po dvojitém kliknutí myší na element. Atribut
může být použit u většiny elementů.
onMouseDowUdálost je vyvolána po stisknutí tlačítka myši nad elementem. Atribut
může být použit u většiny elementů.
onMouseUpUdálost je vyvolána po uvolnění tlačítka myši nad elementem. Atribut
může být použit u většiny elementů.
onMouseOverUdálost je vyvolána při přesunutí myši nad element. Atribut může být
použit u většiny elementů.
onMouseMoveUdálost je vyvolána při pohybu myši
nad elementem. Atribut může být použit u většiny elementů.
onMouseOutUdálost je vyvolána po odsunutí myši z elementu. Atribut může být
použit u většiny elementů.
onFocusUdálost je vyvolána v okamžiku, kdy je element aktivován myší nebo
pomocí tabulátoru. Atribut je možno použít u elementů LABEL, INPUT, SELECT,
TEXTAREA a BUTTON.
onBlurUdálost je vyvolána v okamžiku, kdy element přestává být aktivní. Atribut
je možno použít u elementů LABEL, INPUT, SELECT, TEXTAREA a BUTTON.
onKeyPressUdálost je vyvolána po stisku a následném uvolnění tlačítka na
klávesnici. Atribut může být použit u většiny elementů.
onKeyDowUdálost je vyvolána po stisku tlačítka na klávesnici. Atribut může být
použit u většiny elementů.
onKeyUpUdálost je vyvolána po uvolnění tlačítka na klávesnici. Atribut může být
použit u většiny elementů.
onSubmitUdálost je vyvolána při odesílání formuláře. Atribut může být použit
pouze u elementu FORM.
onResetUdálost je vyvolána po vynulování formuláře. Atribut může být použit
pouze u elementu FORM.
onSelectUdálost je vyvolána po označení textu
ve vstupním poli. Atribut může být použit u elementů INPUT a TEXTAREA.
onChangeUdálost je vyvolána, pokud se změnila hodnota vstupního pole formuláře.
Atribut může být použit u elementů INPUT, SELECT a TEXTAREA.

window |-location |-frames |-history |-navigator |-event |-screen +-document
|-links |-anchors |-images |-filters |-forms |-applets |-embeds |-plugins
|-frames |-scripts |-all |-selection |-styleSheets +-body

Dynamické HTML versus Java
Microsoft má nyní se Sunem spory ohledně licence Javy a může se stát, že by
Microsoft licenci ztratil. To by mělo poměrně velké následky jednak by se z
Internet Exploreru vytratila podpora Javy a jednak by musel Microsoft přestat s
prodejem vývojového prostředí Visual J++.
Jako reakce na vyhrocenou situaci kolem Javy se objevily názory, že Microsoft
dnes již Javu nepotřebuje její funkce může přece nahradit dynamické HTML. Proč
s tímto názorem nemohu souhlasit, se pokusím vysvětlit v následujících
odstavcích.
Dynamické HTML umožňuje vytvářet interaktivní stránky. To je možná důvod, proč
je porovnáváno s Javou pomocí javových appletů vložených stránky můžeme
dosáhnout podobných efektů. Nesmíme však zapomenout, že Java je mnohem více. V
Javě lze psát zcela samostatné plnohodnotné aplikace, které ke svému běhu
nepotřebují prohlížeč. S uživatelem komunikují pomocí dialogových oken, která
si aplikace otevírají přímo v grafickém rozhraní hostitelského systému.
Aplikace v Javě jsou samozřejmě zcela přenositelné mezi různými platformami.
Stejná aplikace může bez úprav běžet ve Windows, MacOS nebo v Unixu.
Porovnejme však nejdůležitější rysy Javy a dynamického HTML. Programy v Javě
musí být před svým používáním zkompilovány do binární podoby (tzv. byte-code),
který je přenositelný mezi platformami. Tento byte-code lze velice snadno
převést přímo do strojového kódu libovolného procesoru o tento proces se stará
virtuální stroj Javy (JVM). Oproti tomu se v dynamickém HTML používají skripty,
které jsou interpretované prohlížeč je načte spolu se stránkou, louská jeden
příkaz za druhým a provádí je. Interpretovaný kód je samozřejmě mnohem
pomalejší než kód předem zkompilovaný. Z tohoto důvodu nejsou skripty vhodné
pro použití při náročnějších výpočtech.
Fakt, že Java je kompilovaná, přináší vývojářům další výhodu. Na Internetu
stačí vystavit zkompilovanou verzi programu zdrojové texty programu zůstanou k
dispozici pouze autorovi, který se nemusí bát zcizení své práce. Skripty
používané v dynamickém HTML dorazí do prohlížeče vždy ve zdrojové podobě, takže
není technický problém stáhnout si je a libovolné jejich části používat na
svých stránkách.
V dalším porovnávání budeme předpokládat, že dynamické HTML používá jako
skriptovací jazyk JavaScript (při použití VBScriptu by to nedopadlo o mnoho
lépe).
JavaScript je objektově založený jazyk můžeme tedy používat předem vytvořené
objekty. Nemůžeme si však vytvářet vlastní třídy a používat přitom dědičnost.
Všechny tyto vlastnosti samozřejmě Java jako plnohodnotný OOL jazyk nabízí.
Cílem tvůrců JavaScriptu bylo vytvořit jednoduchý a snadno použitelný jazyk. Z
tohoto důvodu nemusíme u proměnných deklarovat jejich typ. To nám ušetří trochu
práce, ale ve větších programech je slabá typová kontrola zdrojem častých chyb.
Java oproti tomu při kompilaci kontroluje, zda jsou typy všech operandů
navzájem kompatibilní. Programy v Javě mají obecně mnohem větší možnosti
ošetření chyb. V Javě lze používat velice flexibilní model výjimek, který
umožňuje, aby aplikace sama napravila následky chyb vzniklých při jejím běhu.
Možnosti detekce chyb jsou v JavaScriptu velmi omezené.
Java umožňuje pracovat se soubory libovolného typu. Implementace JavaScriptu v
Internet Exploreru 4.0 (JScript) nabízí pouze poněkud nestandardní způsob pro
práci s textovými soubory. Mnohem větší nedostatek však je, že v běžných
skriptovacích jazycích nelze vytvářet komunikační spojení s ostatními počítači
a aplikacemi pomocí protokolu TCP/IP. V Javě lze přitom psát jak klienty, tak
servery, které používají libovolný aplikační protokol.
Možnosti síťové komunikace jsou v Javě využity i jinde. Standardní databázové
rozhraní JDBC umožňuje přístup k SQL-databázím právě přes Internet.
Jak vidíme, dynamické HTML nedopadlo zrovna růžově. To však neznamená, že se
jedná o špatnou technologii. Pouze jsme porovnávali neporovnatelné. Dynamické
HTML i Java mají své vlastní oblasti použití, které se překrývají jen nepatrně.
Budoucnost tedy nabízí dostatek prostoru pro obě dvě technologie.
Zajímavé je, že konsorcium W3C v definici objektového modelu dokumentu (DOM)
myslelo i na Javu, a tak brzy půjde k dynamické změně obsahu stránky používat
místo skriptovacích jazyků přímo javové applety.

OperátorVýznam
A | BPrávě jedna z entit A a B
A || BAlespoň jedna z entit A a B v libovolném pořadí
[ ... ]Skupiny
A ?Entita A je nepovinná
A {m, n}Entita A se opakuje nejméně m-krát a nejvíce n-krát

emVýška aktuálního písma. Odpovídá šířce písmene "M".
exVýška písmene "x".
pxPixely 1 pixel odpovídá jednomu bodu obrazovky.

iPalce. 1 in = 2,54 cm = 72 pt
cmCentimetry.
mmMilimetry. 10 mm = 1 cm
ptBody. 1 pt = 1/72 in = 1/12 pc
pcPica. 1 pc = 12 pt

#rgbpř. #f00 je červená
#rrggbbpř. #ffff00 je žlutá
rgb(r, g, b)r, g, b jsou od 0 do 255
rgb(r%,g%,b%)r, g, b jsou od 0 do 100

serifklasické patkové písmo (např. Times)
sans-serifbezpatkové písmo (např. Helvetica nebo Arial)
cursivekurzíva (např. Script)
fantasyozdobné písmo
monospaceneproporcionální písmo (např. Courier)

VlastnostMožné hodnotyImplicitníAplikujeDědíInterpretace pro-Popis
hodnotase nase?centních hodnot
font-familyseznam písemzáleží na prohlížečivšechny elementyano-rodina písma
font-stylenormal | italic | obliquenormalvšechny elementyano-styl písma: normal
= normální,
italic = kurzíva,
oblique = skloněné
font-variantnormal | small-capsnormalvšechny elementyano-varianta písma:
normální nebo kapitálky
font-weightnormal | bold | bolder | lighter |normal = 400všechny
elementyano-duktus písma
100 | 200 | 300 | 400(tj. "jak bude písmo silné") | 500 | 600 | 700 | 800 | 900
font-sizexx-small | x-small | small | mediummediumvšechny elementyanorelativně
k rodičovskévelikost písma
| large | x-large | xx-large |velikosti písma
larger | smaller | délka | procento
font[font-style || font-variant |implicitní hodnotyvšechny
elementyanopoužitelné prokomplexní nastavení
| font-weight]? font-sizejednotlivých vlastnostífont-size a
line-heightvlastností písma [/ line-height]? font-family

VlastnostMožné hodnotyImplicitníAplikujeDědíInterpretace pro-Popis
hodnotase nase?centních hodnot
word-spacingnormal | délkanormalvšechny elementyano-o kolik se má zvětšit
mezislovní mezera
letter-spacingnormal | délkanormalvšechny elementyano-o kolik se má zvětšit
mezera mezi jednotlivými písmeny
text-decorationone | [underline || overline nonevšechnyne-"ozdoba" textu:
underline =
|| line-through || blink]elementy= podtržení, overline = čára nad,
line-through = čára přes,
blink = blikání
vertical-aligbaseline | sub | super | top | text-top | baselineinline
elementynevztahují se k hodnotěvertikální zarovnání
middle | bottom | text-bottom | procentoline-height
text-transformcapitalize | uppercase | lowercase | nonenonevšechny
elementyano-převod textu na: capitalize =
kapitálky, uppercase = velká písmena, lowercase = malá písmena
text-aligleft | right | center | justifyzáleží na prohlížečiblokové
elementyano-zarovnání textu: left = na levý
praporek, right = na pravý
praporek, center = centrování,
justify = do bloku
text-indentdélka | procento0blokové elementyanovztahují se k šířce velikost
odstavcové odrážky
rodičovského elementu(odsazení první řádky odstavce)
line-heightnormal | číslo | délka | procentonormalvšechny elementyanorelativně
k velikostivýška řádky; číslo udává
písma elementunásobek velikosti písma (většinou
by měl být alespoň 1,2)

VlastnostMožné hodnotyImplicitníAplikujeDědíInterpretace pro-Popis
hodnotase nase?centních hodnot
colorbarvazáleží na prohlížečivšechny elementyano-barva
background-colorbarva | transparenttransparentvšechny elementyne-barva pozadí
background-imageURL | nonenonevšechny elementyne-obrázek na pozadí
background-repeatrepeat | repeat-x | repeat-y | no-repeatrepeatvšechny
elementyne-směry, ve kterých se bude
obrázek na pozadí opakovat
background-scroll | fixedscrollvšechny elementyne-pozadí se pohybuje se stránkou
-attachment(scroll) nebo je jako přibité
(fixed)
background-positio[procento | délka] {1,2} | [top | center |0% 0% (odpovídá top
left)blokové a nahrazovanénevztahují se k velikostipoloha obrázku
bottom] || [left | center | right]elementyvlastního elementuna pozadí (udává se
Xa Y-pozice)
backgroundbackground-color || background-image ||implicitní hodnotyvšechny
elementynepouzekomplexní nastavení
background-repeat || background-attachmentjednotlivých vlastnostíu
background-positiovlastností pozadí
|| background-position

VlastnostMožné hodnotyImplicitníAplikujeDědíInterpretace pro-Popis
hodnotase nase?centních hodnot
margin-topdélka | procento | auto0všechny elementynevztahují se k šířcevelikost
horního okraje
rodičovského elementu
margin-rightdélka | procento | auto0všechny elementynevztahují se k
šířcevelikost pravého okraje
rodičovského elementu
margin-bottomdélka | procento | auto0všechny elementynevztahují se k
šířcevelikost spodního okraje
rodičovského elementu
margin-leftdélka | procento | auto0všechny elementynevztahují se k
šířcevelikost levého okraje
rodičovského elementu
margi[délka | procento | auto] {1,4}implicitní hodnotyvšechny
elementynevztahují se k šířcekomplexní nastavení
jednotlivých vlastnostírodičovského elementuvelikosti okrajů
padding-topdélka | procento0všechny elementynevztahují se k šířcevelikost
vnitřního horního okraje
rodičovského elementu
padding-rightdélka | procento0všechny elementynevztahují se k šířcevelikost
vnitřního pravého okraje
rodičovského elementu
padding-bottomdélka | procento0všechny elementynevztahují se k šířcevelikost
vnitřního
rodičovského elementuspodního okraje
padding-leftdélka | procento0všechny elementynevztahují se k šířcevelikost
vnitřního levého okraje
rodičovského elementu
padding[délka | procento] {1,4}0všechny elementynevztahují se k šířcekomplexní
nastavení velikostí
rodičovského elementuvnitřního okraje
border-top-widththin | medium | thick | délkamediumvšechny elementyne-šířka
horní části rámečku
border-right-widththin | medium | thick | délkamediumvšechny elementyne-šířka
pravé části rámečku
border-bottom-widththin | medium | thick | délkamediumvšechny elementyne-šířka
spodní části rámečku
border-left-widththin | medium | thick | délkamediumvšechny elementyne-šířka
levé části rámečku
border-width[thin | medium | thick | délka] {1,4}implicitní hodnotyvšechny
elementyne-komplexní nastavení ší









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.