JavaScript - Které prohlížeèe podporují JavaScript?

Co je JavaScript?

JavaScript je skriptovací jazyk založený na programovacím jazyku JAVA. JavaScript mùže být spuštìn na stranì klienta (client-side) nebo serveru (server-side). V èláncích naleznete informace pouze o tvorbì JavaScriptu na stranì klienta (client-side), kdy se kód nachází v HTML dokumentu a je realizován v internetovém prohlížeèi, tj. kód se pøenese spolu s HTML dokumentem z webové stránky a váš prohlížeè ho spustí a vykoná.

Poznámka: JavaScript NENÍ to stejné co JAVA!

Skriptovací jazyk umožòuje pøistupovat k rùzným prvkùm webových stránek jako jsou obrázky, formuláøe, odkazy a jiné. Tyto prvky mùžeme s pomocí JavaScriptu rùznì mìnit a ovlivòovat. JavaScript také dovoluje reagovat na rùzné události, napøíklad kliknutí myši, stisk klávesy a další, což dovoluje spouštìt rùzné akce podle chování uživatele.

V JavaScriptu se dá napsat napøíklad skript reagující na události vyvolané myší (pohyb myši, stisk tlaèítka, …), kontrolu formuláøe i animace. Jak to ho dosáhnout se dozvíte v sérii èlánkù.

JavaScript má i nìkolik omezení, ovšem logických. Napøíklad se nedají èíst ani zapisovat soubory na uživatelský poèítaè (ten, kdo si prohlíží vaše stránky). Toto omezení je jasné, pokud si nìkdo spustí program na svém poèítaèi (client-side skripty jsou vykonávány na stranì klienta) musí si být jist, že program (skript) neohrozí bezpeènost poèítaèe.

Které prohlížeèe podporují JavaScript?

Netscape jako první zavedl podporu JavaScriptu ve svém prohlížeèi Netscape Navigator 2. Microsoft ho následoval a implementoval podporu JavaScriptu do Internet Exploreru 3. Další prohlížeèe reagovaly podobnì a podporu pro JavaScript implementovaly také. V souèasnosti znamená pøíchod každé nové verze prohlížeèe aktualizaci a doplnìní stávající verze JavaScriptu.

Kompatibilita mezi rùznými druhy prohlížeèù a jejich verzí mùže zpùsobovat pøi návrhu skriptu problémy, proto se zezaèátku zamìøíme na všeobecné vlastnosti. Pozdìji si ukážeme tyto rozdíly a jak si s nimi poradit.

Poznámka: JavaScript není doménou pouze prohlížeèù Netscape Navigator a Internet Explorer. Velmi kvalitní podpora JavaScriptu je i v prohlížeèích Mozilla a Opera.

Verze JavaScriptu

JavaScript prošel urèitým vývojem a to nám pøineslo nìkolik verzí:

JavaScript 1.0 - Netscape Navigator 2.0

JavaScript 1.1 - Netscape Navigator 3.0; Internet Explorer 3.0 (ovšem podpora JavaScriptu V IE nestála za nic)

JavaScript 1.2 - Netscape Navigator 4.0-4.05; první verze Internet Exploreru 4.0

JavaScript 1.3 - Netscape Navigator 4.06-4.5; pozdìjší verze Internet Exploreru 4.0 plus Internet Explorer 5.0

JavaScript 1.5 - Netscape Navigator 6.0 a vyšší; Internet Explorer 5.5 a vyšší

Microsoft souèasnì s podporou JavaScriptu pøedstavil i vlastní implementaci jazyka JavaScript (od IE 3). Tato implementace je známá pod jménem JScript. Aby bylo možné dosáhnout urèité kompatibility, Evropská asociace výrobcù poèítaèù ECMA stanovila normu. Této normì by mìli jednotlivé specifikace JavaScriptu odpovídat. Více na stránkách ECMA - Standardizing Information and Communication Systems.

Poznámka: Všechny skripty uvedené v sérii èlánkù pracují s Netscape Navigatorem nebo Microsoft Internet Explorerem verze 3 a vyšší. Pokud není uvedeno jinak!

Zápis skriptu

<script language='JavaScript' type='text/javascript'>
<!--
vlastní kód
//––>
</script>

Tímto tagem prohlížeèi sdìlíme, že skript, který bude následovat, je napsán v JavaScriptu, a že MIME-type je 'text/javascript'. Pokud vynecháte definici TYPE nic se nestane, kód se provede stejnì, ale není to podle standardu W3C.

<SCRIPT LANGUAGE='JavaScript' TYPE='text/javascript'>

Nyní skryjeme obsah skriptu pøed staršími prohlížeèi pomocí triku s komentáøi.

<!--
//––>

Pøed ukonèení HTML komentáøe pøidáme dvì lomítka. Prohlížeèe, které znají JavaScript, se nìkdy pokoušely interpretovat konec HTML komentáøe za èást skriptu. Konec skriptu nás vrátí do normálního HTML.

</SCRIPT>

Vložení skriptu do stránky

Abyste mohli používat skripty na svých stránkách, musíte vìdìt jak je do stránky vložit. Skript se vkládá mezi tagy <SCRIPT> a </SCRIPT>. V HTML stránce to potom mùže vypadat tøeba takto:

<script language='JavaScript' type='text/javascript'>
<!--
alert('Ahoj svìte!');
//––>
</script>

Skripty mùžete ke stránce pøipojit i pomocí externího souboru. V tomto pøípadì použijete parametr SRC s definicí URL skriptu. Takto pøipojené skripty mají obvykle koncovku .js:

<script language='JavaScript' src='mujsckript.js' type='text/javascript'></script>

Párový tag <SCRIPT> mùžete na stránce použít kolikrát chcete. Nejlepší a nejsnadnìjší je však umístit celý skript na jedno místo a v jednotlivých èástech stránky volat pouze funkce ve skriptu definované. (V nìkterých vyjímeèných pøípadech budete muset skript rozdìlit, abyste zajistili správné provedení skriptu.)

Pøi vkládání skriptu preferujte vložení pomocí externího souboru, což pøináší znaèné výhody. Všeobecnì se skript vkládá mezi tagy <HEAD> a </HEAD>. To zajišuje, že skript bude pøipraven k použití ihned po naètení stránky. Sem je dobré vložit všechny funkce nebo skripty, které mají být funkèní ještì pøed vlastním zobrazením stránky.

Jindy je tøeba vložit skript mezi tagy <BODY> a </BODY>. Tento zpùsob vložení se používá, když skript generuje vlastní HTML obsah stránky.

Tag Script

V tagu <SCRIPT> mùže specifikovat, která verze JavaScriptu je použita. A to pomocí parametru LANGUAGE = hodnota. Mùže zde být 'JavaScript', 'JavaScript1.1', 'JavaScript1.2', 'JavaScript1.3' nebo 'JavaScript1.5' a speciálnì pro IE 'JScript'. Vìtšina prohlížeèù si zjistí verzi z parametru LANGUAGE a pokud tuto verzi nepodporuje, skript se ignoruje.

Poznámka: O tom, že Microsoft od IE 3 pøedstavil i vlastní implementaci JavaScriptu jsem se zmínil již v prvním dílu. Pro zopakování, Microsoftí implementace je pojmenována právì JScript.

Zpátky k parametru LANGUAGE. Pomocí tohoto parametru mùžeme definovat odlišné skripty pro rùzné verze prohlížeèù. Jednoduchý seznam rùzných verzí prohlížeèù a podporované verze JavaScriptu byl taky v prvním dílu.

Napøíklad prohlížeè Netscape 2.0 ignoruje skript definovaný tagem <SCRIPT LANGUAGE='JavaScript1.2'>, ale Netscape 4.0 tento kód vykoná. Tak mùžeme odlišit rùzné verze skriptù na jedné stránce. Každá verze skriptu musí být uzavøena v samostatném tagu SCRIPT.

Pøíklad, jak si zjistit podporovanou verzi JavaScriptu:

<html>
<head>
<title>Verze JavaScriptu</title>
</head>
<body>
<script language='JavaScript1.1'>
// JavaScript pro staré prohlížeèe
document.write('JavaScript 1.1<br> <br>');
</script>
<script language='JavaScript1.2'>
// JavaScript pro novejší prohlížeèe
document.write('JavaScript 1.2<br> <br>');
</script>
<script language='JavaScript1.3'>
// JavaScript pro nejnovìjší prohlížeèe
document.write('JavaScript 1.3<br> <br>');
</script>
<script language='JavaScript1.5'>
// JavaScript pro nejnovìjší prohlížeèe
document.write('JavaScript 1.5<br> <br>');
</script>
<script language='JScript'>
// Speciální verze JavaScriptu pro IE - JScript
document.write('Jcript - pro IE<br> <br>');
</script>
</body>
</html>

Doufám, že není co vysvìtlovat.

Poznámka: Pokud se v pøíkladu výše uvede definice TYPE (viz první díl) nemusí skript vždy fungovat správnì. To jsou paradoxy.

<script language='JavaScript' type='text/javascript'>
function f1()
</script>
<script language='JavaScript1.2' type='text/javascript'>
function f1()
</script>

Tady si už skript vysvìtlíme. Prohlížeè Netscape 2.0 použije definici funkce f1 uzavøenou v prvním párovém tagu <SCRIPT>, ale definici uzavøenou v druhém tagu <SCRIPT> ignoruje. Prohlížeè Netscape 4.0 použije také první definici, avšak pokud má druhá funkce (f1=f1) stejné jméno pøepíše první definici.

Základy syntaxe

Ještì než zaèneme psát vlastní skripty, musíme znát minimálnì základy syntaxe a struktury JavaScriptu. Co mùžem používat, kam co a jak umístit, atd.

Syntaxe JavaScriptu je podobná C/C++ a JAVÌ. Kompletní popis hledejte na Netscape`s JavaScript Reference nebo Microsoft`s JScript Reference. Zde najdete seznam podporovaných pøíkazù, operátorù a standardních funkcí JavaScriptu. Teï si vysvìtlíme základy pro zaèátek.

Promìnné

Promìnnou deklarujeme pomocí slova var. Identifikátor promìnné mùže mít libovolnou délku a sestávat z jakéhokoliv písmene, èísla a znaku podtržítka (_), pokud není první znak èíslo. Jako identifikátor nemùžeme použít klíèová slova - slova mající v JavaScriptu speciální význam. JavaScript je case-sensitive (rozlišuje malá a velká písmena), identifikátory count a Count odkazují na dvì odlišné promìnné!

Promìnné deklarované mimo funkci jsou globální, tzn. jsou být dostupné odkudkoli ve skriptu a z funkcí ve skriptu. Nejèastìji definujeme promìnou mimo funkci, tedy jako globální. Globální promìnou mùžeme pøepsat lokální promìnou (definovanou uvnitø funkce), pokud bude mít identifikátor promìnné stejné jméno. Tomu øíkáme pøekrývání promìnných.

Pár pøíkladù:

var text;
var max_score;
var cislo3 = 1;
var ErrorMessage = 'Spojení selhalo.'
var dnyPryc = 5.7;
var 82sester = true; // chyba promìnná zaèíná èíslem!

Textové øetìzce

Øetìzce jsou uzavøené mezi uvozovky jednoduché (`) nebo dvojité ('). Jeden typ uvozovek mùžete kombinovat s druhým bez omezení. Používáte-li poøád stejný typ uvozovek a nechcete jej mìnit, vložte pøed uvozovací uvozovky zpìtné lomítko.

Pøíklad bude asi nejlepší:

var text1 = 'Ahoj svìte.';
var text2 = `Zdravím opìt.`;
var text3 = 'Neklikej na mì.';
var text4 = 'Øekl jsem 'NE''; // chyba, jeden typ uvozovek bez zpìtného lomítka
var text5 = `Øekl jsem 'NE'`; // výsledek: Øekl jsem 'NE'
var text6 = 'Øekl jsem 'NE''; // výsledek: Øekl jsem 'NE'

Operátory a výrazy

Vìtšina operátorù (+; -; *; /; ++; --; atd.) a výrazù používaných v C/C++ a JAVÌ je podporována i v JavaScriptu.

Opìt pøíklad:

promìnná = výraz

soucet += 4;
i++;
vzkaz = 'Chyba ' + kodchyby;

Pøíkazy

A znovu, vìtšina pøíkazù používaných v C/C++ a JAVÌ je podporována i v JavaScriptu. Klíèová slova jsou:

komentáøe - // pro jeden øádek, /* a */ pro více øádkù

cykly - for, do, while a další

podmínìné pøíkazy - if, then, else; switch, case

objekty - new, this, with a další

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.

Funkce se definuje následujícím zpùsobem:

function jmeno_fce(arg1, arg2, )

Jméno funkce musí dodržovat sejná pravidla, jako jméno promìnné. K volání funkce (spuštìní), použijeme její jméno a pøidáme argumenty, pokud je funkce požaduje.

var vyska = 5;
var sirka = 3;
spocti_obsah(vyska, sirka);

Poznámka: Samozøejmì, že funkce mùže být i bez argumentù.

Jak už jsem zmínil, funkce se nejèastìji vkládají do hlavièky dokumentu, mezi tagy <HEAD> a </HEAD>. Což nám zajistí, že funkce bude naètena a k dispozici ještì než bude volána.

Funkce mùže vracet i hodnoty. Tìmto funkcím se øíká funkce s návratovou hodnotou a docílíme toho tak, že na konec funkce pøidáme pøíkaz return.

Pøíklad funkce s návratovou hodnotou:

function secti(x, y)

var soucet = secti(7, 10);

Dnes se blížeji podíváme na operátory a pøíkazy if, switch, for a while. Slíbený bonus v podobì seznamu klíèových slov JavaScriptu se do dnešního dílu bohužel již nevešel.

Pøedchozí díly seriálu:

èást první: úvod do Javascriptu

èást druhá: nìco více o tagu script a syntaxi JavaScriptu

Aritmetické

Možný je i zkrácený zápis, pokud ho nìkde uvidíte, nelekejte se.

Relaèní

Slouží k porovnávání hodnot uložených v jednotlivých promìnných. Nic složitého.

Logické

Opìt zde dochází k porovnávání hodnot jako u relaèních operátorù. Zde se ovšem porovnávají jejich logické hodnoty.

Poznámka: Logické promìnné mùžou nabývat pouze dvou hodnot a to true nebo false. True mùžeme nahradit èíslem 1 a false èíslem 0. Krátký pøíklad:

<script type='text/javascript'>
<!--
var x;
x=true;

if (x==1)document.write('true');
else document.write('false');
//-->
</script>

Vím, že pro zaèáteèníka bývá pochopení logických operátorù složitìjší a proto je zde malý pøíklad, kde mùžete trénovat.

Poznámka: JavaScript obsahuje i další speciální operátory. Pøi psaní skriptù se s nimi s nejvìtší pravdìpodobností vùbec nesetkáte a proto je neuvádím.

Priorita operátorù

Pøi psaní komplikovanìjších výrazù se mùže v jedné rovnici vyskytnout více operátorù. Každému je asi jasné, že 3+5*2 je nìco jiného než (3+5)*2. Každý operátor má jinou prioritu. Na zaèátek nám budou pro aritmetické operátory staèit pravidla matematiky (pøednost násobení pøed sèítáním atd.).

Cykly

Používají se tehdy pokud chceme provést nìjaký blok kódu opakovanì. V JavaScriptu k tomuto úèelu mùžeme použít následující pøíkazy:

while - Cyklus s podmínkou na zaèátku. Cyklus se bude provádìt tak dlouho, dokud bude platit podmínka.

dowhile - Cyklus podmínkou na konci. Stejné jako v pøedcházejícím pøípadì, ale podmínka se testuje až na konci.

for - Cyklus se zadaným poètem opakování.

While

while (podmínka)

Pøíklad na vysvìtlení snad bude staèit:

<script type='text/javascript'>
<!--
var i=0;

while (i<5)
//-->
</script>

Dowhile

do while (podmínka)

Opìt snad bude staèit pouze pøíklad:

<script type='text/javascript'>
<!--
var i=0;

do while (i<5)
//-->
</script>

Poznámka: Na rozdíl od pøedcházejícího pøíkladu probìhne cyklus minimálnì jednou bez ohledu na poèáteèní stav ukonèovací podmínky. Zkuste zmìnit poèáteèní hodnotu i napøíklad na 10 a uvidíte.

For

for (poèáteèní inicializace; podmínka; úprava øídící promìnné)

Pøíklad:

<script type='text/javascript'>
<!--
for (var i=0; i<5; i++)
alert('Konec!');
//-->
</script>

Podmínky

Použijeme je tehdy, pokud chceme, aby se program podle nìjaké podmínky sám rozhodl, jak bude dál pokraèovat.

Podmínkové operátory

Jde o zvláštní druh operátorù, které umožòují vyhodnotit nìjakou jednoduchou podmínku a v závislosti na výsledku provést danou operaci. V JavaScriptu nám k tomuto úèelu slouží dva operátory, které se vždy používají spoleènì. Jsou to znaky ? a :. Jejich použití vypadá takto:

(podmínka) ? výsledek pøi splnìné podmínce : výsledek pøi nesplnìné podmínce;

Krátký pøíklad se vždy hodí:

<script language='JavaScript' type='text/javascript'>
<!--
var i, hlaska;
i=5;
hlaska = (i==0) ? 'Hodnota i je opravdu nula.' : 'Hodnota i není rovna nule.';
alert(hlaska);
//-->
</script>

Poznámka: Podmínkové operátory jsem mohl zaøadit už do sekce 'Operátory', ale zde mnì to pøijde vhodnìjší.

Podmínìný pøíkaz If

Používá se tehdy pokud chceme, aby se urèité pøíkazy v JavaScriptu provedly pouze za urèitých okolností a další pøíkazy zase za jiných okolností. Obecný zápis vypadá takto:

if (podmínka)
else

Pøi vícenásobném vìtvení programu by obecný zápis vypadal takto:

if (podmínka1)
else if (podmínka2)
else

Poznámka: Pokud by vyhovovala podmínka1 i podmínka2, provede se kód pouze v bloku podmínka1. Podmínka1 vyhovuje, je tedy proveden její kód a skript skonèí v hledání dalších vyhovujících podmínek!

V následujícím pøíkladì se pokusíme vytvoøit kód, který vyhodnotí a ocení obchodníky. Obchodník, který prodá více než 10 kusù výrobku obdrží bonus a jako další základ platu se mu poèítají prodané kusy nad 10. Naopak obchodník, který prodá ménì než 10 kusù výrobku, bude krácen na platì. Jestliže obchodník prodá právì 10 kusù výrobku, nestane se nic.

<script type='text/javascript'>
<!--
var prodkus = 11;
if (prodkus > 10)
else if (prodkus == 10)
else
//-->
</script>

Hodnì autorù dìlá na zaèátku chybu uvedenou níže. Popøemýšlejte, proè skript zde uvedený nemùže správnì fungovat.

<script type='text/javascript'>
<!--
var prodkus = 11;
if (prodkus > 10)
if (prodkus == 10)
if (prodkus < 10)
//-->
</script>

Øešení: Obchodník prodá napøíklad 11 kusù výrobku a je mu pøiznán bonus. Následnì je mu poèet prodaných kusù snížen o deset, nyní tedy má pouze 1 prodaný kus. Další podmínka nevyhoví, ale poslední ano. Tím je dobrému obchodníku strženo z platu 5000 Kè a s prodanými kusy se dostane do mínusu. To by se asi divil! Správný zápis (nad tímto) skonèí po splnìní první podmínky a další vyhovující podmínky nehledá.

Switch (pøepínaè)

Pokud je zápis pomocí if, else if a else dlouhý a nepøehledný napøíklad, když máme vybrat mezi více hodnotami (tøeba 10 podmínek). V tomto pøípadì pužijeme pøíkaz switch (pøepínaè), který umožòuje rozdìlit program jednoduše a pøehlednì na nìkolik vìtví.

Struktura zápisu pøíkazu switch vypadá takto:

switch (promìnná)

Pøíklad s hlášekami na rùzné dny pomocí pøíkazu switch:

<script type='text/javascript'>
//Rùzné hlášky podle dne v týdnu. Pamatujte,
//že Nedìle=0, Pondìlí=1, Úterý=2, atd..
var d=new Date()
den=d.getDay() //nabývá hodnot 0 až 6

switch (den)
</script>

Vnoøené podmínky a cykly

Nìkdy je vhodné pro zjednodušení skriptu vložit více podmínek nebo cyklù do sebe. V tomto pøípadì je nutné peèlivì sledovat syntaxi, správný poèet závorek, bloky se nesmí pøekrývat atd.

Vnoøené cykly

Uvnitø jednoho cyklu probíhá další cyklus.

Pøíklad na malou násobilku:

<script type='text/javascript'>
<!--
var i,j;
for (i=1; i<=10; i++)
document.write('<br>'); //pøechod na nový øádek

//-->
</script>

Vnoøené podmínky

Stejnì jako u cyklù musíme dát zvýšenou pozornost na syntaxi, jinak se snadno dopustíme chyby. Na následujícím pøíkladu si pøedvedeme jak se dá kód pomocí vnoøených podmínek zjednodušit.

Pøíklad na vyhledání maxima ze tøí èísel:

<script type='text/javascript'>
<!--
var x, y, z;
x=8;y=-5;z=6;
var max=x;

if (y>max)
else

alert('Nejvìtší èíslo je: '+ max);
//-->
</script>

Poznámka: Zatím jsme nemluvili o možnosti zadávání hodnot uživatelem, proto do skriptu vstupují rovnou hodnoty. Pozdìji si povíme i o vstupu hodnot od uživatele z formuláøe nebo pomocí dialogového okna.

Provedení našeho kódu

Internetový prohlížeè postupnì naèítá stránku a každý skript je vykonán tak brzo, jak je naèten. Vhodným umístìním na stránce mùže být skript proveden, ještì než jsou naèteny obrázky, zvuky nebo než je zobrazen celý obsah stránky.

Oèividnì nám tato vlastnost mùže zpùsobit i problémy. V následujícím pøíkladu se pokusíme najít nastavenou barvu hypertextového odkazu stránky, která se nachází v objektu document.linkColor. První pokus je uèinìn v párovém tagu HEAD, druhý až v sekci BODY.

Zdrojový kód pøíkladu:

<html>
<head>
<title>Barva odkazu</title>
<script type='text/javascript'>
// Vrátí barvu odkazu na stránce.
var bo1 = document.linkColor; //bo=barva odkazu, zkratky usnadòují život
</script>
</head>
<body bgcolor='#ffffff' text='#000000' link='#ff0000'>
<font face='Arial,Helvetica' size=3>
<script type='text/javascript'>
// Znovu vrátí barvu odkazu na stránce.
var bo2 = document.linkColor;
// Vypíšeme si obì barvy.
document.writeln(`Barva odkazu poprvé: ` + bo1 + `<br>`);
document.writeln(`Barva odkazu podruhé: ` + bo2);
</script>
</font>
</body>
</html>

Jako výsledek našeho snažení se na stránce objeví:

Barva odkazu poprvé: #0000ff
Barva odkazu podruhé: #ff0000

Pøi prvním pokusu ještì není naèten tag <BODY>, kde je definována barva odkazu a proto je vrácena standardní barva odkazu (modrá). Jak se stránka postupnì naèítá je následnì naèten tag <BODY> ve kterém dojde ke zmìnì barvy odkazu ze standardní modré barvy na èervenou. Ve druhém pokusu o zjištìní barvy odkazu je sekce <BODY> již naètena, a proto získáme novì definovanou hodnotu barvy odkazu (èervená).

Skript definovaný uvnitø funkce, není vykonán dokud není funkce volána. Ale, jak a kdy umíme volat funkci? Dozvíte se v následující kapitole: Události.

Události

Každý internetový prohlížeè rozpozná urèité množství událostí, napøíklad když stránka dokonèí své naèítání nebo když uživatel pøesune ukazatel myši nad odkaz èi klikne na tlaèítko a mnohé další. Tyto události mùžeme rozpoznat a provést kód JavaScriptu pøi jejich výskytu.

Jedna cesta, jak tyto události rozpoznat je pomocí správce událostí (event handler). Ten umí událost zachytit, rozpoznat a vykonat pøi jejím výskytu potøebné pøíkazy JavaScriptu. O správce událostí definované JavaScriptem je možné doplnit vìtšinu HTML tagù (tabulka níže). Pøíklady zde uvedené fungují jak v IE, tak Netscapu.

Definujeme správce události

Pokud chceme definovat správce události, pøidáme jméno této události do HTML tagu s pøíkazem JavaScriptu, který se má vykonat.

Pøíklad:

<html>
<head>
<title>Navyš</title>
<script type='text/javascript'>
var navys;
navys = 0;
</script>
</head>
<body>
<a href='#' onClick='navys++;alert(navys);'>navyš</a>
</body>
</html>

Promìnná navys bude zvýšena o jednièku pokaždé, když uživatel klikne na odkaz. Do správce události mùžete napsat jakýkoliv kód JavaScriptu, který je správný. Mùže to být jeden pøíkaz nebo nìkolik pøíkazù oddìlených pomocí støedníku (;). Nejèastìjší a i nejobvyklejší je volat skrze událost nìjakou funkci. Nezapomeòte, že tyto pøíkazy se uzavírají do uvozovek a je nutné zde dodržovat stejné podmínky jako u textových øetìzcù.

Zmìna obrázku

Další pøíklad ukazuje dobøe známý efekt se zmìnou obrázku po najetí kurzoru myši.

Poznámka: tento pøíklad nebude chodit s Internet Explorer verze 3 nebo nižším.

Tag <IMG> nemá sám o sobì správce události pro pohyb myši, ale má ho hypertextový odkaz. Toho tedy využijeme a obrázek uzavøeme do tagu pro hypertextový odkaz <A HREF=></A>.

Podíváme se na vlastní kód. Prvnì si vytvoøíme funkci zmenObr() pro manipulaci s obrázky. Funkce je volána s argumenty jmeno a zdroj se kterými se ve funkci dále pracuje.

function zmenObr(jmeno, zdroj)

Nyní definujeme pro každý odkaz tøi správce události, jeden když je kurzor myši nad odkazem, druhý když je kurzor myši odsunut z odkazu a poslední, když je myší kliknuto na tento odkaz. Pøíklad je uveden níž:

<a href='https://www.seznam.cz'
onMouseOver='zmenObr (`obr1`, `tlacitko_on.gif`)'
onMouseOut=' zmenObr (`obr1`, `tlacitko_off.gif`)'
onClick='return false;'>
<img name='obr1' border=0 src='tlacitko_off.gif'>
</a>

Obì události onMouseOver i onMouseOut volají funkci zmenObr(), s argumenty pro jméno obrázku, které se má zmìnit (v tagu IMG specifikováno pomocí NAME= hodnota) `obr1` a URL obrázku ve který se má zmìnit `tlacitko_on.gif` (objekty, jejich vlastnosti a metody použité ve funkci zmenObr si podrobnì vysvìtlíme v dalších èástech kurzu).

Popis k události onClick. Pøíkaz vrací hodnotu false pomocí pøíkazu return false èímž prohlížeèi sdìluje, aby potlaèil svoje normální chování pro tuto událost. Normálnì by prohlížeè po kliknutí na odkaz sledoval a naèetl novou stránku. Vrácením hodnoty false sdìlíme prohlížeèi, že nemá pøejít na novou stránku. Pokud ovšem chcete, aby prohlížeè pøešel na novou stránku zmìníte vrácenou hodnotu na return true nebo správce události onClick vynecháte úplnì.

Jiný pøíklad

Dalším èasto používaný správce události je onLoad, napøíklad použitý v tagu <BODY>. V jednom z pøedcházejících pøíkladù jsme si ukázali, co se mùže stát pokud vykonáme pøíkaz JavaScriptu ještì pøed kompletním naètením stránky. Událost onLoad je spuštìna, až po kompletním naètení stránky prohlížeèem.

Takže pøedchozí pøíklad pøepíšeme tøeba takto:

<html>
<head>
<title>Opìt barva odkazu</title>
</head>
<body bgcolor='#ffffff' link='#ff0000' onLoad='alert(`Barva odkazu je: `
+ document.linkColor);'>
<font face='Arial,Helvetica' size='3'>
</font>
</body>
</html>

Poznámka: Funkce alert() je standartní funkce JavaScriptu, která zobrazí dialogové okno se zadaným obsahem. V tomto pøíkladu to bude hodnota document.linkColor, což je barva odkazu definovaná pro tuto stránku v tagu <BODY>.

Seznam správcù událostí

Toto je pouze èásteèný seznam HTML a tagù a jim pøíslušných správcù událostí. Kompletní popis hledejte na Netscape HTML Reference a Microsoft IE DHTML Events.

Klíèová slova

JavaScript si pro svoji potøebu vyhradil nìkolik slov, která mají speciální význam a nesmí být použita k jinému úèelu (Identifikátor - název promìnné nebo funkce, atd.). S nìkterými zde uvedenými slovy jste se v kurzu již setkali a s dalšími se ještì seznámíte.

V minulých dílech jsme si probrali základy práce s JavaScriptem a dnes se pustíme do nové èásti objekty.

Co je to objekt?

Jak se dá z jména pøedpokládat, a jak jsem se již zmínil JavaScript je postaven na programovacím jazyku JAVA. Oba jsou to objektovì orientované jazyky. Nepùjdu do detailù objektovì orientovaného programovaní, ale vysvìtlíme si základní termíny, pro lepší pochopení jazyka JavaScipt.

JavaScript pracuje s objekty. Každý objekt je v podstatì blok dat a abychom s tímto blokem mohli pracovat existují vlastnosti a metody asociované s objektem. Vlastnosti mohou být promìnné nebo jiné objekty a sadì funkcí spojených s objektem øíkáme metody.

jmeno_objektu.jmeno_vlastnosti
dokument.bgcolor = 'red';
jmeno_objektu.jmeno_metody
document.write('Pøikaz write je metodou objektu dokument.');

Všechny objekty JavaScriptu jsou uspoøádány do struktury, kterou znázoròuje následující obrázek:

Tato struktura má svoje jméno, øíká se jí objektový model dokumentu, zkrácenì DOM (Document Object Model).

Na objekt mùžete myslet jako na typ dat, tøeba celé èíslo nebo øetìzec. Pøi definici promìnné vytváøíte instanci objektu. Pokud byste tak chtìli èinit všeobecnì slouží k tomuto úèelu operátor new:

var text = new String('Toto je mùj text.'); // String = konstruktor
var cislo = new Number(4.02); // Number = konstruktor
var dnes = new Date();// Date = konstruktor

Operátor new se používá k vytvoøení nových objektù. Za klíèovým slovem new následuje konstruktor. Operátorem new se nejdøíve vytvoøí nový objekt, který však nemá definovány žádné vlastnosti. Pak se vyvolá specifikovaná funkce konstruktoru, které se mùžou pøedat parametry.

Nìkteré objekty, jako napøíklad Date, mají více funkcí konstruktoru než jednu.

var rok = new Date().getYear();
novy_objekt = new konstruktor.konstruktor

Poznámka: Pokud konstruktor neobsahuje žádné parametry, je možno vynechat závorky.

Konstruktor je závislý na parametrech, které jsou mu pøedány pøi volání. Objekt Date bude bez parametrù nastaven na aktuální datum a èas. Pøíklad vytvoøení nového objektu voláním funkce (konstruktoru) s parametry:

<script type='text/javascript'>
<!--
var Xmas = new Date('December 24, 2001');
document.write('Den: ' + Xmas.getDate() + '<br>' + 'Mìsíc: ' +(Xmas.getMonth()+1) + '<br>' + 'Rok: ' + Xmas.getYear());
//-->
</script>

Dnes jsme si øekli nìco krátce o objektech. Víte co je to objektový model dokumentu, že objekty mùžou obsahovat další objekty a promìnné, kterým øíkáme vlastnosti a že objekt v sobì má zabudovanou sadu funkcí, kterým øíkáme metody. Nakonec jsme si v rychlosti ukázali jak vytvoøit nový objekt.

Vlastnosti objektù

Jak jsme si minule vysvìtlili vlastnosti jsou objekty a promìnné, nadøazených objektù. K vlastnostem urèitého objektu se pøistupuje pomocí 'teèkové' notace:

var text = new String('Kdysi dávno, žila, byla ');
var dlk = text.length;

Nastaví promìnnou dlk na 27, což je poèet všech znakù v tomto øetìzci text.

Èasto potøebujeme mìnit vlastnosti objektu pøímo. Napøíklad pro zmìnu barvy pozadí stránky mùžeme vlastnost bgColor objektu document mìnit dynamicky. Jak je pøipraveno v ukázce:

<html>
<head>
<title>Zmìna barvy stránky</title>
<script type='text/javascript'>
<!--
// Funkce, která mìní barvu pozadí stránky.
function zvolBarvu(barva)
//-->
</script>
</head>
<body alink='#808080' vlink='#666666'>
<font face='Arial,Helvetica,sans-serif' size='2'>
<b>Pøíklad zmìny hodnoty u vlastnosti objektu.</b>
<p>
<!-- Následující øádky používají správce událostí pro volání funkce zvolBarvu() -->
Pro zmìnu barvy pozadí najeï kurzorem myši nad odkaz:
<p>
<a href='#' onMouseOver='zvolBarvu(`#ff6666`)' onMouseOut='zvolBarvu(`#ffffff`)'>
Èervená</a><br>
<a href='#' onMouseOver='zvolBarvu(`#66ff66`)' onMouseOut='zvolBarvu(`#ffffff`)'>
Zelená</a><br>
<a href='#' onMouseOver='zvolBarvu(`#6666ff`)' onMouseOut='zvolBarvu(`#ffffff`)'>
Modrá</a>
</font>
</body>
</html>

Nìkteré vlastnosti objektù nemohou být zmìnìny pøímo (barvu pozadí stránky jsme mìnili pøímo pomocí vlastnosti bgColor), napøíklad vlastnost length u øetìzcù. Nicménì, na co potøebujeme mìnit délku øetìzce? Použijeme-li metodu concat(), která spojuje dva øetìzce dohromady, hodnota vlastnosti length urèující délku øetìzce se po spojení øetìzcù zmìní automaticky. Pøi jejím dalším volání obdržíme již novou hodnotu délky øetìzce.

Metody objektù

Metody jsou sady funkcí zabudovaných v objektu a pøistupujeme k nim pomocí stejné teèkové notace jako u vlastností. Za jménem metody následují závorky obsahující požadované argumenty:

var errorMsg = new String('');
var msgHeader = new String('Chyba: ');
var errorCode = new String('X001');
errorMsg = msgHeader.concat(errorCode); //concat je metoda
document.write(errorMsg); //write je metoda

Výsledná hodnota objektu errorMsg je 'Chyba: X001'.

Objekty JavaScriptu

Tato kapitola vám umožní se seznámit s nìkterými objekty JavaScriptu. Cílem není zahrnout vás veškerým výètem vlastností a metod všech objektù, ale udìlat si o nich ucelenou pøedstavu a pochopit základní pravidla používání. Opìt dám pøednost snaze vám nìco vysvìtlit a ukázat na pøíkladech, pøed suchou teorií. Podle mì se na pøíkladech uèí lépe a rychleji.

JavaScript obsahuje mnoho pøeddefinovaných objektù, které jsou uvedeny pøímo v jeho definici. Nìkteré reprezentují rozdílné typy dat, jako øetìzce, èísla, zatímco jiné se týkají objektù na stránce, napøíklad odkazù, obrázkù a dalších. Pøi používání objektù, jejich vlastností a metod musíme brát v úvahu umístìní v hierarchii objektù. Proto je nutné pøed názvem každé vlastnosti nebo metody napsat i jméno nadøazeného objektu.

Vestavìné objekty

Vestavìné objekty nemají nic spoleèného s web stránkami èi HTML jazykem. Pøedstavují rozšíøení JavaScriptu o pole, základní matematické funkce a konstanty, dále umožòují práci s datumem èi øetìzci. A jsou to:

Array - pole promìnných.

Boolean - logická promìnná, mùže nabývat pouze dvou hodnot true nebo false.

Date - objekt reprezentující datum.

Number - numerická hodnota, buï celé èíslo nebo desetinné èíslo.

String - øetìzec znakù uzavøený v jednoduchých nebo dvojitých uvozovkách.

Math - obsahuje metody pro matematické konstanty a funkce.

Jak jsme si již ukázali tyto objekty se vytváøejí za pomoci operátoru new. Ovšem je dobré vìdìt, že objekty typu Boolean, Number a String jsou vytváøeny implicitnì. Tzn. nemusíme je vytváøet pomocí operátoru new, staèí:

var nalezeno = false;
var max = 47.9;
var jméno = 'Pepa';

Objektový model dokumentu (DOM)

Po naètení stránky, prohlížeè vytvoøí nìkolik objektù reprezentujících informace stránce a jejím obsahu. Tyto objekty jsou seøazeny podle hierarchie od nejvyšších až k nejnižším. Nejvýše postavený je objekt window a má následující vlastnosti:

history - obsahuje seznam všech již døíve navštívených URL.

location - informace o aktuálním URL.

frames - pokud stránka používá rámy, jsou zde uloženy informace o pozici rámu a také obsahuje objekt window pro každý rám.

document - informace o obsahu stránky.

screen - informace o velikosti okna a barvách (pouze Netscape 4).

Jiným typem vysoce postaveného objektu, který se vytvoøí po naètení stránky je navigator. Ten ale není souèástí objektu window. Tento objekt v sobì obsahuje informace o typu prohlížeèe, verzi, dostupných pluginech a jiné.

Na tyto objekty a jejich vlastnosti se odkazujeme opìt pomocí teèek. Napøíklad pokud chceme zjistit URL stránky, použijeme:

var url = window.location.href;

Protože všechny zde uvedené objekty vycházejí z objektu window, JavaScript netrvá na tom, aby se tento objekt musel neustále uvádìt. Zápis tedy mùžeme zkrátit:

var url = location.href;

Dále si popíšeme také pár základních metod objektu window.

Metody objektu window

Objekt window poskytuje taktéž pár užiteèných metod, mezi tyto metody patøí i zobrazování dialogových oken:

alert() zobrazí dialogové okno s vámi zadaným obsahem.
alert(promenna + 'textový øetìzec'); alert(promenna); nebo další kombinace.

confirm() zobrazí dialogové okno s tlaèítky 'OK' a 'Storno'. Po kliknutí na 'OK' vrací true po kliknutí na 'Storno' false.

if(confirm('Máte mì rádi?')==true)
alert('To je dobøe :)');
else
alert('To se mnì nelíbí :(');

prompt() zobrazí dialogové okno se vstupem pro uživatele.

var jmeno;
jmeno = prompt('Vaše jméno?', 'vepište vaše jméno');
//zkuste i jmeno = prompt('Vaše jméno?');
alert('Zdravím ' + jmeno + '.');

Následující pøíklad ukazuje práci se všemi výše uvedenými druhy dialogových oken.

<html>
<head>
<title>Dialogová okna</title>
<script type='text/javascript'>
<!--
function alertTest()
function confirmTest()
function promptTest()
//-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica,sans-serif' size='2'>
<b>Pøíklady dialogových oken.</b>
<p>
<!-- Odkazy níže používají událost onClick k volání jednotlivých
funkcí pro dialogová okna -->
Vyberte druh dialogového okna:
<p>
<ul>
<li><a href='#' onClick='return alertTest()'>Alert okno</a>
<li><a href='#' onClick='return confirmTest()'>Confirm okno</a>
<li><a href='#' onClick='return promptTest()'>Prompt okno</a>
</ul>
<p>
<form name='zprava'>
<b>Výsledek vašeho poèínání:</b> <input name='text' type='input' value=''>
</form>
</font>
</body>
</html>

Jak už jsme si øekli u textových øetìzcù, musí se dodržovat urèitá pravidla syntaxe. Vedle zápisu dalších uvozovek uvnitø uvozovek pomocí zpìtného lomítka tu máme i další formátovací znaky, které využijeme zejména u dialogových oken:

b - smazání znaku pøed kurzorem
f - posun papíru
n - nová øádka
r - návrat na zaèátek øádky
t - tabulátor
` - apostrof (neukonèuje øetìzec)
' - uvozovka (neukonèuje øetìzec)
- zpìtné lomítko

Poznámka: Metoda alert() je velmi užiteèná pøi odlaïování kódu. Mùžete ho umístit do skriptu a zobrazovat v dialogovém oknì hodnoty promìnných a objektù. To mùže být neocenitelné pøi snaze vystopovat chybu! (Stejnì dobøe se dá použít i objekt document.write.)

Další metody otevírající, zavírající nebo mìnící vzhled okna prohlížeèe si ukážeme v èásti 3. V této èásti bude øeè o práci s okny a rámy.

Jiná užiteèná metoda objektu window je setTimeout(). Metoda umožòuje provádìt èásti kódu JavaScriptu po urèitém èasovém intervalu. Syntaxe kódu, který má být vykonán se øídí stejnými pravidly jako události. Tedy pøíkazy nebo funkce JavaScriptu uzavøené v uvozovkách:

setTimeout('navys++; alert(`Ahoj svìte!`);', 500);

Kód nahoøe vyèká pùl vteøiny (èasový údaj se udává v milisekundách, 1/1000 sekundy), poté navýší promìnnou navys a otevøe dialogové okno alert s textem 'Ahoj svìte!'.

Metoda setTimeout() vrací unikátní èíslo. Toto èíslo mùžeme použít u metody clearTimeout() pro zrušení pøíkazù, které se mají vykonat po uplynutí èasového intervalu.

var id = setTimeout('nejakaFce(arg1, arg2);', 3000);
další pøíkazy JavaScriptu
if (chyba)
clearTimeout(id);

Konkrétní pøíklad bude asi nejlepší (clearTimeout):

<html>
<head>
<title>Pøesmìrování stránky</title>
<script type='text/javascript'>
<!--
var cekej = setTimeout('location.href=`nekam_jinam.html`;', 5000);
//-->
</script>
</head>
<body>
<font face='Arial,Helvetica,sans-serif' size='2'>
<h2>Pøesmìrování stránky</h2>
Pokud neprojevíte alespoò trochu zájmu, budete za 5 vteøin pøesmìrování pryè.
</font>
<form>
<input type='button' value='ZRUŠ' onClick='clearTimeout(cekej);'>
</form>
</body>
</html>

Upozoròuji, že setTimeout() metoda nezastavuje prohlížeè, žádná pauza! Následující kód je vykonán okamžitì. Pøíkazy nebo funkce uvedené v metodì setTimeout() se vykonají pouze jednou. V Netscapu 4.0 je metoda setInterval(), která vykonává pøíkazy opakovanì po zadaném èasovém intervalu. Metoda, která naopak ruší vykonávání tìchto pøíkazù je clearInterval().

Ukázka demonstruje užití metody setTimeout() pro opakované volání funkce zobrazující èas na stránce.

<html>
<head>
<title>Èas na stránce</title>
<script type='text/javascript'>
<!--
function obnovCas()
//-->
</script>
</head>
<body onLoad='obnovCas();'>
<font face='Arial,Helvetica,sans-serif' size='2'>
<b>Pøíklad použití metody setTimeout().</b>
<form name='hodiny'>ÈAS: <input type='text' name='cas' size='7'>
</form>
</font>
</body>
</html>

Objekt frame

Objekt frames náleží do nejvyššího objektu window. Pokud stránka obsahuje rámy pak hlavní objekt window obsahuje pole nazvané frames s vlastním objektem window pro každý objekt tohoto pole.

Tyto rámy mùžou obsahovat další rámy. Z rámu se mùžeme odkázat na vytváøecí (rodièovské - frameset) okno pomocí zápisu window.parent nebo pouze parent. U více zanoøených rámù se dá použít zápis window.parent.parent. Zápisem window.top se odkážeme na nejvyšší okno z kteréhokoliv rámu.

Tyto vlastnosti umožòují pracovat s daty nebo spouštìt funkce v rámu z jiného rámu.

Èást ohlednì rámù je o nìco složitìjší na pochopení a proto jí bude vìnována pozornost v samostatná èást 3 - Práce s okny a rámy.

Objekt document (objekty HTML)

Objekt document je jeden z nejpoužívanìjších. Obsahuje nìkolik vlastností, pomocí kterých mùžeme zjistit rùzné informace o stránce. Zde jsou:

bgColor - barva pozadí stránky.

fgColor - barva písma.

linkColor - barva odkazu.

vlinkColor - barva navštíveného odkazu.

location - vrací URL aktivní stránky.

reffer - vrací stránku, ze které uživatel pøišel.

Title - obsahuje titulek stránky, který je mezi HTML tagy <TITLE> a </TITLE>

anchors - vrací poèet ukotvení na stránce.

lastModified - vrací datum a èas poslední úpravy HTML souboru.

images - vrací seznam obrázkù na stránce.

forms - vrací seznam formuláøù na stránce.

links - vrací seznam odkazù na stránce.

Cookie - vrací textový soubor s uživatelskými cookies.

Vlastnosti nejèastìji odpovídají hodnotám atributù v HTML tagu. Napøíkad bgColor odpovídá hodnotì BGCOLOR= uvedené v tagu <BODY>. Na dalších objekektech jako obrázky a odkazy je to taky názornì vidìt.

Nezapomeòte, že vlastnosti images, forms a links jsou vráceny jako seznam. Tento seznam je vlastnì pole, vždy jedno pole pro každý element na stránce (obrázek, formuláø a odkaz)!!! Pokud tedy chceme pracovat napøíklad s obrázkem:

var abc = document.images[3];

Tento zápis nám zpøístupní obrázek v ètvrtém <IMG> tagu na stránce (èísluje se od nuly). Pracovat s èíselnými indexi je nevýhodné. JavaScript naštìstí umožòuje použít jméno obrázku jako index pole, namísto èísla.

var abc = document.images['jmeno_obr'];

Tento zápis vrátí obrázek jehož atribut NAME v tagu <IMG> obsahuje 'jmeno_obr'.

Poznámka: Netscape ve verzi 3 obsahuje chybu. Pokud je obrázek umístìn uvnitø tabulky vrátí se stejný obrázek nìkolikrát, tím pádem nemùžeme pøesnì identifikovat hodnoty obrázku.

Nìkdy se dá použít ještì zkrácenìjší zápis než jsme si zatím uvedli. Pokud je prvek na stránce unikátní tzn., dané jméno prvku se smí na stránce vyskytnout pouze jednou. Mùžeme použít zápis:

var abc = document.jmeno_obr;

Objekt Image

Informace o obrázcích jsou uloženy v objektu Image, tyto informace obsahují URL obrázku, jeho stav naètení a informace o výšce èi šíøce. Pomocí pole images mùžeme pøistupovat ke všem vlastnostem objektu Image. Ve vìtšinì pøípadù pracujeme s obrázky, které jsou v images poli, ale nìkdy potøebujeme pracovat i s obrázky, které ještì na stránce nejsou.

Napøíklad chceme-li vytvoøit efekt pro zmìnu obrázku po najetí kurzorem myši, je dobré naèíst si pøedem obrázek pro zmìnu. Aby se nemohlo stát, že budeme s myší nad obrázkem èekat a èekat, než se zmìní. Proto vytvoøíme nový objekt Image a do vlastnosti .src tohoto nového objektu zadáme cestu k obrázku:

var mujObr = new Image();
mujObr.src = 'obr/obrazek2.gif';

S naètením stránky je i náš dosud neviditelný obrázek uložen ve vyrovnávací pamìti prohlížeèe (pokud ji nemáme vypnutou). Pokud teï kurzor myši najede nad obrázek, naète se nový obrázek okamžitì.

Poznámka: Pøíklad se zmìnou obrázku jsme si uvedli už v tøetím dílu, ovšem bez pøednaètení obrázku pro zmìnu.

V následujícím pøíkladu jsou uvedeny oba dva zmiòované pøípady. V prvním se obrázek nezaène naèítat dokud se nad nìj nepøesune kurzor myši a ve druhém je obrázek pøednaèten.

Poznámka, pøíklad nechodí s Internet Explorer 3.0 nebo nižším.

<html>
<head>
<title>Zmìna obrázku</title>
<script type='text/javascript'>
<!--
// Pøednaèteme si obrázek `bigred.gif`.
var mujObr = new Image();
mujObr.src = 'graphics/bigred.gif';
// Funkce na zmìnu obrázku.
function zmenObr(jmeno, URL)
-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica' size=2>
<b>Ukázka vysvìtluje, jak pøednaèíst obrázek pro odstranìní pauzy u efektu
se zmìnou obrázku:</b>
<p>
<!-- Zde zaèíná efekt zmìny obrázkù. -->
<a href='#'
onMouseOver='zmenObr(`obrazek1`, `graphics/biggreen.gif`)'
onMouseOut='zmenObr(`obrazek1`, `graphics/bigblue.gif`)'
onClick='return false;'>
<img name='obrazek1' align='right' border='0' src='graphics/bigblue.gif' id='20'>
</a>
<em>Bez pøednaètení.</em>
<p>
Pøi pøesunu kurzoru myši nad obrázek se zaène naèítat obrázek pro zmìnu.
<p>
<a href='#'
onMouseOver='zmenObr(`obrazek2`, `graphics/bigred.gif`)'
onMouseOut='zmenObr(`obrazek2`, `graphics/bigblue.gif`)'
onClick='return false;'>
<img name='obrazek2' align='right' border='0' src='graphics/bigblue.gif' id='20'>
</a>
<em>S pøednaètením.</em>
<p>
V tomto pøípadì pokud nastavíte kurzor myši nad obrázek, bude zmìnìò velmi rychle.
<em>(Pokud byl již naèten.)</em>
<p>
</font>
</body>
</html>

Objekt Link

Objekt Link nebude s nejvìtší pravdìpodobností používat moc èasto. Nejzajímavìjší budou asi vlastnosti href, která vrací URL stránky.

document.links[0].href

Poznámka: Jestliže stránka obsahuje obrázkové mapy (imagemap), objekt Link je vytvoøen pro každý tag.

Objekt Form

Form objekt není až tak zajímavý sám o sobì, ale obsahuje další objekty, které zpøístupòují ostatní prvky formuláøe. Jsou zde objekty pro vstupní pole text, password, textarea, skrytá pole (hidden fields), zatržítka radiobutton a checkbox, roletky a tlaèítka reset a submit.

Každý prvek formuláøe má svùj vlastní objekt se svými vlastnosmi. Všechny podporují vlastnost value. Vlastnost vrací jakékoliv údaje zadané uživatelem, napøíklad textový vstup nebo hodnotu pøidìlenou pomocí atributu VALUE v ktomu opovídajícímu HTML tagu (napø.: <input type='hidden' value='www.moje.cz'>

Pro pøístup k jednotlivým elementùm formuláøe, musíme napøed zpøístupnit objekt form. Podle pøíkladù uvedených již døíve, mùžeme tak uèinit z objektu document jedním z tìchto zpùsobù:

document.forms[0] // první formuláø na stránce.
document.forms['email'] // formuláø s NAME='email' v tagu <FORM>.
document.email // formuláø s NAME='email' v tagu <FORM>.

Podobnì mùžeme pøistupovat i k vstupním objektùm použitím pole elements nebo pøímo pomocí hodnoty atributu NAME='' v <INPUT> tagu:

document.forms[0].elements[3]
// Tøetí vstupní prvek v prvním formuláøi na stránce.
document.forms['objednavka'].elements['adresa']
// prvek pojmenovaný 'adresa' ve formuláøi 'objednavka'.
document.objednavka.adresa
// prvek pojmenovaný 'adresa' ve formuláøi 'objednavka'.

Nejèastìjší použití je pro kontrolu údajù ve formuláøi, pøed odesláním dat na server. Jednoduchý pøíklad demonstruje pøístup k hodnotám ve formuláøi a vygenerování chybového hlášení, pokud je nìjaké pole formuláøe nevyplnìno.

<html>
<head>
<title>Kontrola formuláøe</title>
<script type='text/javascript'>
<!--
// Funkce pro kontrolu polí formuláøe. Vrátí false pokud je pole prázdné.
function kontrFormular()
if (document.mujFormular.email.value == '')
if (document.mujFormular.tel.value == '')
return true;
}
//-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica,sans-serif' size='2'>
<b>Pøíklad demonstruje pøístup k hodnotám ve formuláøi, pokud
je nìjaké pole formuláøe nevyplnìno, zobrazí se chybové hlášení.<br> <br>
Formuláø nelze odeslat pokud nejsou všechna pole vyplnìna.</b>
<p>
Prosím, vyplòte všechna pole:
<p>
<form name='mujFormular' onSubmit='return kontrFormular()'
action='dekuji.html' method='get'>
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<td><font face='Arial,Helvetica' size=3>Uživatelské èíslo:</font></td>
<td><input name='uzivCislo' type='input' value='' size=30></td>
</tr>
<tr>
<td><font face='Arial,Helvetica' size=3>Emailová adresa:</font></td>
<td><input name='email' type='input' value='' size=30></td>
</tr>
<tr>
<td><font face='Arial,Helvetica' size=3>Telefon:</font></td>
<td><input name='tel' type='input' value='' size=10></td>
</tr>
</tr>
<tr>
<td align=center colspan=2><input type='submit' value='Odeslat'>
<input type='reset' value='Vynulovat'></td>
</tr>
</table>
</form>
</font>
</body>
</html>

Pár poznámek k kódu:

Tag FORM používá událost onSubmit k volání funkce kontrFormular() pøi stisku tlaèítka Odeslat.

Kdykoli funkce kontrFormular() najde prázdné vstupní pole, zobrazí se chybové hlášení a metoda focus() nastaví kurzor na toto prázné pole.

Rovnìž, když je vstupní pole prázdné, funkce vrátí false. To zamezí vykonání akce a odeslání dat formuláøe.

Objekt Date

S objektem Date jste se mohli v prùbìhu seriálu setkat již nìkolikrát, napøíklad v šestém dílu. Nìkdy jsou s tímto objektem v zaèátcích spojeny urèité problémy a tak si ho vysvìtlíme o nìco podrobnìj než ostatní.

Hodnota èasu je v objektu Date uložena jako poèet milisekund od poèátku. Tento poèátek je stanoven na 1.1.1970 greenwichského èasu. Je zde použit standard z UNIXu, kde se toto datum èasto oznaèuje jako epocha, protože krátce pøedtím byl systém UNIX poprvé pøedstaven poèítaèovému svìtu.

Jistì jste již všichni urèitì pochopili, že objekt Date slouží ke zjišování informací o datu a èase. Úplnì nejjednodušší použití vypadá takto:

<script type='text/javascript'>
<!--
document.write(Date());
//-->
</script>

Jako informace se vám v prohlížeèi zobrazí:

Mon Jan 28 18:16:12 2002

Další možný zápis, kdy objektu pøedáváme urèité datum:

var datum=new Date('October 12, 1988 13:14:00') //Vynecháte-li hodiny, minuty
nebo sekundy hodnota bude nastavena na nulu.
var datum=new Date('October 12, 1988')
var datum=new Date(88,09,12,13,14,00)
var datum=new Date(88,09,12)
var datum=new Date(500) //Èas od poèátku v milisekundách.

Informace o èase sice máme, ale pro bìžnou praxi nejsou moc využitelné. Jsou anglicky a ani výstup nepatøí mezi nejpøehlednìjší. Naštìstí existuje celá øada metod (vlastnosti nejsou), které nám práci s datem a èasem usnadní. Ovšem pøedtím, než tyto metody mùžeme použít je nutné objekt Date vytvoøit pomocí zápisu, který již dobøe známe:

var datum = new Date();

Metody, které nyní již na objekt mùžeme použít jsou:

getNìco() - zobrazí napøíklad den v mìsíci, minuty, rok.

setNìco() - nastavíme napøíklad den v mìsíci, minuty, rok.

UTC() - metoda vrací poèet milisekund uplynulých od poèátku, který se vždy chápe jako greenwichský èas.

Date.UTC(rok,mìsíc,datum,hodiny,minuty,vteøiny);

parse() - metoda vrací poèet milisekund uplynulých od poèátku do místního èasu.

Date.parse('mìsíc_ENG, den_v_mìsíci, Rok Hod:Min:Sec');
<script type='text/javascript'>
<!--
document.write(Date.UTC(2002, 11, 24, 12, 0, 0) +'<br>'); //Všimnìte si èasù!
document.write(Date.parse('December, 24, 2002 13:00:00'));
//-->
</script>

toGMTString() a toLocaleString() - Konvertuje datum na øetìzec zachovávající Internet GMT konvence nebo lokální konvence pro zobrazení datumu a èasu.

<script type='text/javascript'>
<!--
var datum = new Date(); // vytvoøí objekt datum obsahující aktuální datum a èas
var GMT = datum.toGMTString();
var mistni_cas = datum.toLocaleString();
document.write('Date():' + datum +'<BR>GMT: ' + GMT +
'<BR>Místní èas: ' + mistni_cas);
//-->
</script>

getTimetzoneOffset() - vrací èasový posun lokálního (místního) èasového pásma v minutách.

<script type='text/javascript'>
<!--
var datum = new Date();
document.write(datum.getTimezoneOffset());
//-->
</script>

Jednotlivé metody get a set se v syntaxi moc neliší a proto si probereme pouze get metody:

Poznámka: Všechny metody vracejí èíslo, ne textový øetìzec! Pøi používáni tìchto metod je nutné názvy metod zapsat správnì vèetnì velkých a malých písmen.

Protože s pøechodem na rok 2000 se vyskytly problémy a každý výrobce prohlížeèe je øeší trochu odlišnì máte zde tabulku, kde najdete návratové hodnoty pro metody getYear() a getFullYear().

Objekt Math

Tento objekt obsahuje øadu matematických funkcí (metod a vlastností), které se dají pøi nìkterých výpoètech využít. Následující tabulka ukazuje ty nejdùležitìjší:

Pøíklady:

document.write(Math.round(8.6));
document.write(Math.random());
document.write(Math.PI);

Hody kostkou:

<script type='text/javascript'>
<!--
var kostka;
kostka = Math.random();
kostka = Math.round(kostka*5)+1;
document.write(kostka);
//-->
</script>

Po ètyøech lekcích vìnovaných objektùm si snad pamatujete výraz objektový model dokumentu. Dále, že objekty mùžou obsahovat další objekty a promìnné, kterým øíkáme vlastnosti a že objekt v sobì má zabudovanou sadu funkcí, kterým øíkáme metody. Umíte vytvoøit nový objekt a pokud nìkde uvidíte teèku, øeknete si 'teèková' notace tu znám a umím s ní pracovat.

Nevím co více øíci k této nové kapitole. Doufám, že název vše vystihuje. A proto zaènìme!

Vytvoøení nového okna

V nìkterých pøípadech je vhodné otevøít nové okno prohlížeèe, napøíklad pro zobrazení krátké textové zprávy, banneru nebo pøi tvorbì plovoucího menu. Ne všichni uživatelé jsou nadšeni vyskakujícími okny, ale s rozvahou a ohleduplností mùžete zatraktivnit vzhled svých stránek.

Krátký kviz s pop-up okny

Jako pøíklad je uveden krátký kviz se tøemi otázkami o sluneèní soustavì. Odpovìdi jsou zobrazeny po kliknutí na odkaz v malém novém oknì.

<html>
<head>
<title>Kviz na sluneèní soustavu</title>
<script type='text/javascript'>
<!--
// Funkce otevírající nové okno s zadaným URL.
function zobrOdp(url)
//-->
</script>
</head>
<body leftmargin=20 topmargin=20>
<font face='Arial,Helvetica,sans-serif' size='2'>
<!-- Každý odkaz volá fci zobrOdp() pro zobrazení stránky s odpovìdí
v novém oknì. -->
<b>Pøíklad s otevøením nového okna.</b>
<p>
KVÍZ:
<ol>
<li>Nejvìtší planeta solárního systému.<br>
<a href='#' onClick='return zobrOdp(`Jupiter.html`);'>Odpovìï</a>
<p>
<li>Nejmenší planeta?<br>
<a href='#' onClick='return zobrOdp(`Mercur.html`);'>Odpovìï</a>
<p>
<li>Nejvzdálenìjší planeta od slunce?<br>
<a href='#' onClick='return zobrOdp(`Pluto.html`);'>Odpovìï</a>
</ol>
</font>
</font>
</body>
</html>

Stránka s odpovìdí mùže vypadat napøíklad takto:

<html>
<head>
<title>Správná odpoveï</title>
</head>
<body bgcolor='#000000' text='#ffffff'>
<center>
<font face='Arial,Helvetica' size=4><b>Jupiter</b></font>
<p>
<form>
<input type=submit value='Close' onClick='window.close(); return false;'>
</form>
</center>
</body>
</html>

Pokud náš sluneèní systém neznáte tak dobøe jako já :)), zde jsou odpovìdi: 1. Jupiter, 2. Merkur, 3. Pluto.

Každý odkaz na ovìøení správnosti zodpovìzení volá funkci zobrOdp() a pøedá ji URL stránky se správnou odpovìdí. Ve volané funkci zobrOdp() je použita metoda open() pro vytvoøení nového okna.

function zobrOdp(url)

Poznámka: V pøíkladu s kvizem je øetìzec obsahující seznam parametrù definující vzhled nového okna moc dlouhý. Proto je rozdìlen na dva øádky a spojen pomocí operátoru `+`. Výsledkem je jeden nerozdìlený øetìzec.

Metoda open() má tøi argumenty: URL stránky, jméno nové stránky a øetìzec obsahující seznam parametrù definujících vzhled nového okna.

window.open('URL','jméno_okna','parametry_okna');

URL udává umístìní zdrojového souboru, který se má zobrazit v novém oknì. Jméno_okna udává název okna do kterého se má stránka nahrát, pokud okno s takovým názvem neexistuje, otevøe se nové okno se zadaným jménem. Parametry_okna vzhled nového okna definují (napø. toolbar=no, directories=no, menubar=no), zadávají se vedle sebe a oddìlují se èárkou.

Poznámka: místo yes/no mùžete psát 1/0.

Odkazy na okna

Vytvoøíme-li nové okno a budeme chtít pozdìji zmìnit jeho obsah (okno musí být otevøené), uložíme výslednou hodnotu pøíkazu open() do promìnné. Tøeba vytvoøíme nové okno a pozdìji na nìjaký podnìt od uživatele mùžeme pomocí vlastnosti location zmìnit obsah tohoto okna:

mojeOkno = window.open('nejaka_stranka.html', '', 'height=100,width=');

mojeOkno.location = 'nova_stranka.html';

Kód nahoøe není nijak složitý a jistì se dá snadno pochopit, proto nebudu uvádìt pøíklad.

Z novì vytvoøeného okna se mùžeme odkazovat na okno (pùvodní), to z kterého bylo toto nové okno vytvoøeno pomocí vlastnosti opener, což je také objekt.

Napøíklad:

window.opener.location = 'nova_stranka.html';

Zmìní obsah starého (pùvodního) okna (okna, z kterého vzniklo nové okno) na nova_stranka.html.

Nejlépe asi bude uvést pøíklad. Tento krátký skript vytvoøí nové plovoucí okno s odkazy. Po kliknutí na odkaz se plovoucí okno zavøe a pùvodní okno je pøesmìrováno na stránku z odkazu.

<html>
<head>
<title>Plovoucí menu</title>
<script type='text/javascript'>
<!--
var plovMenu;

function zobrMenu()

//-->
</script>
</head>
<body>
<font face='Arial,Helvetica,sans-serif' size='2'>
<b>Pøíklad s plovoucím menu. Po kliknutí na odkaz v menu se toto okno zavøe a pùvodní
stránka je pøesmìrována na stránku vybranou.</b><br> <br>
<a href='javascript:zobrMenu();'>Otevøi menu</a><br>
<a href='javascript:plovMenu.close();'>Zavøi menu</a>
</font>
</body>
</html>

Poznámka: Øetìzec obsahující menu je opìt dlouhý a pro lepší pøehlednost je rozdìlen na více øádkù. V tomto pøípadì je vždy na konec øádku pøidáno zpìtné lomítko, které skriptu sdìluje, že øetìzec pokraèuje na dalším øádku. Zde jsme nepoužili operátor `+`.

Zavírání oken

Znovu se podívejte na plovoucí menu z pøedchozího pøíkladu èi z pøíkladu se sluneèni soustavou. Okno mùžete zavøít tradièním zpùsobem nebo pomocí metody close().

<form>
<input type=submit value='Zavøít' onClick='window.close(); return false;'>
</form>

Po stisku tlaèítka je volána metoda window close(), která zavøe okno, stejnì jako Soubor -> Zavøít, køížek v nástrojové lištì nebo Alt+F4.

Poznámka: bez potvrzení mùžeme zavøít pouze okno, které bylo vytvoøeno pomocí skriptu. Zkuste si naèíst odpovìï v kvizu na planety a zavøít pomocí tlaèítka Close.

Práce s rámy

Jak už jsem zmínil v èásti o objektech JavaScriptu, rámy representují samostatná okna. Každé takové okno má svoje URL, historii a vlastnosti. Zaèneme tedy hned pøíkladem, protože jak doufám ty rychlému uèení napomáhají nejvíce.

V pøíkladu vytvoøíme soubor oken, pomocí následujícího HTML kódu:

<html>
<head>
<title>Kurz JavaScriptu - frameset</title>
</head>
<frameset rows='310,*'>
  <frame src='ram1.html' name='ram1' scrolling='No'>
  <frameset cols='33%,33%,33%'>
    <frame src='ram2.html' name='ram2' scrolling='No'>
    <frame src='ram3.html' name='ram3' scrolling='No'>
    <frame src='ram4.html' name='ram4' scrolling='No'>
  </frameset>
</frameset>
</html>

Poèítám, že stránky ram1.html až ram4.html si dokážete vytvoøit sami.
Pro jistotu:

<html>
<head>
  <title>Rám 1</title>
</head>
<body bgcolor='#ffffff'>
<center>
<font face='Arial,Helvetica,sans-serif' size='4'><b>Rám 1</b></font>
</center>
</body>
</html>

Tímto HTML kódem vytvoøíme ètyøi rámy, jeden nahoøe a tøi stejné velikosti pod ním. Jak jsme si již ukázali v minulých dílech barva pozadí stránky se mìní pomocí vlastnosti bgColor. Ovšem v tomto pøípadì nechceme mìnit barvu stávající stránky (rámu), ale mìníme barvu stránky v jiném rámu.

Této zmìny docílíme tak, že ze stávajícího rámu (okna) hledáme rodièe tohoto rámu èili vlastnì stránku, ve které jsou rámy definované (frameset). Rodièovské okno (stránku) nalezneme pomocí vlastnosti window.parent (mùžeme použít i už zmínìnou vlastnost top, která nás odkáže na nejvyšší okno z kteréhokoliv rámu). Nalezením rodièe máme k dispozici objekt s definicí všech rámù a použitím vlastnosti frames následnì obdržíme pole všech rámù. K jednotlivým polím mùžeme pøistupovat, jak už jsme si døíve ukázali napøíklad pomocí zápisu frames[jmeno_ramu . Po inicializaci pole máme k dispozici objekt window vybraného rámu a mùžeme s ním pracovat, tøeba zmìnit barvu pozadí pomocí vlastnosti bgColor.

Schéma znázoròuje jak mùžeme pomocí vložení krátkého kódu do stránky ram1.html zmìnit barvu v rámu 4:

<form>
<input type='submit' value='Zmìna rámu 4 na žluto' onClick='parent.frames[`ram4`].document.bgColor=`#FFFF00`'>
<!-- stejné: window.parent.window.frames[`ram4`].window.document.bgColor=`#FFFF00` -->
</form>

Poznámka: Kód mùžeme beze zmìny vložit do jakéhokoliv rámu (nejenom rámu 1) a bude fungovat.

Jak vidíte z obrázku z jednotlivých rámù mohu pøistupovat k ostatním rámùm pouze pøes rodièovský objekt (frameset). Naopak z rodièovského objektu s definicí rámù (frameset) mohu pøistupovat k jednotlivým rámùm pøímo.

Snad jste to alespoò trochu pochopili. Nyní vytvoøíme funkci zmBrvOkna(), která po kliknutím na tlaèítko v horním oknì budeme mìnit barvu jednotlivých oken pod ním. Funkce bude uložena v horním rámu (ram1.html) a jako parametry budeme pøedávat jméno okna a barvu:

function zmBrvOkna(jmeno_ramu, barva)

Pro úplnost, zde je upravený kód stránky rám 1 (ram1.html):

<html>
<head>
<title>Rám 1</title>
<script type='text/javascript'>
<!--
// Funkce mìnící barvu pozadí v jiném rámu.

function zmBrvOkna(jmeno_ramu, barva)
//-->
</script>
</head>
<body>
<font face='Arial,Helvetica' size=2>

<!-- Tlaèítka pro zmìnu barvy pozadí u jiného rámu z tohoto okna. -->

<font size=4><b>Rám 1</b></font>
<p>
<b>Odkaz na ostatní rámy:</b>
<p>
Použij tlaèítko pro zmìnu barvy pozadí rámu:
<p>
<form>
<table width='100%' border='0' cellspacing='1' cellpadding='4' bgcolor='#C0C0C0'>
<tr bgcolor='#000000'>
  <th><font color='#ffffff' face='Arial,Helvetica' size=3>Rám 2</font></th>
  <th><font color='#ffffff' face='Arial,Helvetica' size=3>Rám 3</font></th>
  <th><font color='#ffffff' face='Arial,Helvetica' size=3>Rám 4</font></th>
</tr>
<tr>
  <td><input type='submit' value='Èervená' onClick='return zmBrvOkna(`ram2`,`#ff0000`);'></td>
  <td><input type='submit' value='Èervená' onClick='return zmBrvOkna(`ram3`,`#ff0000`);'></td>
  <td><input type='submit' value='Èervená' onClick='return zmBrvOkna(`ram4`,`#ff0000`);'></td>
</tr>
<tr>
  <td><input type='submit' value='Zelená' onClick='return zmBrvOkna(`ram2`,`#00ff00`);'></td>
  <td><input type='submit' value='Zelená' onClick='return zmBrvOkna(`ram3`,`#00ff00`);'></td>
  <td><input type='submit' value='Zelená' onClick='return zmBrvOkna(`ram4`,`#00ff00`);'></td>
</tr>
<tr>
  <td><input type='submit' value='Modrá' onClick='return zmBrvOkna(`ram2`,`#0000ff`);'></td>
  <td><input type='submit' value='Modrá' onClick='return zmBrvOkna(`ram3`,`#0000ff`);'></td>
  <td><input type='submit' value='Modrá' onClick='return zmBrvOkna(`ram4`,`#0000ff`);'></td>
</tr>
</table>
</form>
</font>
</body>
</html>

Odkazy na promìnné a funkce

Nemusíme se odkazovat pouze na document a ostatní window objekty dalších rámù, ale mùžeme používat jakékoliv globální promìnné nebo funkce definované v ostatních rámech.

Pøíklad, jak si nechat vypsat promìnnou definovanou v jiném rámu:

document.write(window.parent.frames[`ram1`].mojeProm + '<BR>');

Nyní si ukážeme, jak volat funkci zmBrvOkna() z jiného rámu. Do tøí spodních stránek ve kterých mìníme barvu pøidáme kód pro zmìnu na pùvodní bílou barvu.

<html>
<head>
  <title>Rám 2</title>
</head>
<body bgcolor='#ffffff'>
<center>
<font face='Arial,Helvetica' size='4'><b>Rám 2</b></font>
  <form>
    <input type='submit' value='Default' onClick='return window.parent.frames[`ram1`].zmBrvOkna(window.name, `#ffffff`);'>
  </form>
</center>
</body>
</html>

window.parent.frames[`hlavni_ram`].zmBrvOkna(window.name, `#ffffff`);

Jak vidíte používá se stejný postup jako pøedtím. Opìt se pomocí window.parent odkazujeme na stránku s definicemi rámù a pomocí frames['ram1' se odkazujeme na vrchní rám (Rám 1). Pøipojením funkce zmBrvOkna() na konec voláme tuto funkci i s parametry (jméno_rámu, barva).

Vlastnost name pøedáváme jako parametr ve volání funkce zmBrvOkna(). Vlastnost name objektu window vrací jméno aktuálního rámu z pole frames[] (jméno rámu je definováno v tagu <FRAME>, NAME=hodnota). Tím pøedáme 'automaticky' funkci zmBrvOkna() jako parametr jméno rámu z kterého je tato funkce volána.

Opìt schéma pro snadnìjší pochopení:

Jak už jsme si øekli, stejným zpùsobem mùžeme pøistupovat i ke globálním promìnným z jiných rámù. Stejnì jako u funkce pouze pøipojíme jméno promìnné na konec odkazu a ovšem závorky vynecháme. Zde je ukázka rùzných možností pro nastudování.

Objekty window: Location a History

Objekt location

Objekt location obsahuje informace o URL aktuálnì naètené stránky. URL stránky tak mùžeme zmìnit pøímo na novou adresu:

window.location = 'https://www.google.com';

Úplnì postaèuje:

location = 'https://www.google.com'; //jak jsme si již uvedli, objekt window nemusíme uvádìt

Jako pøíklad mùže posloužit tento krátký kód, který zmìní aktuální stránku po 5 vteøinách a zobrazí stránku www.google.com:

setTimeout('window.location = `https://www.google.com`;', 5000);

Okno mùžeme také zmìnit nebo naèíst pomocí jedné ze dvou metod objektu location:

reload() - zpùsobí znovunaètení stránky. Používá se pokud potøebujeme obnovit obsah stránky.

replace(URL - naète stránku danou URL v oknì nebo rámu prohlížeèe. Staré umístìní stránky je v historii stránek pøepsáno souèasnou stránkou. (Pokud napøíklad navštívíme stránku www.neco.cz/prvni.html, poté www.neco.cz/replace.html, která nás pomocí metody replace pøesmìruje na stránku www.neco.cz/druha.html. I když jsme navštívili celkovì tøi stránky v historii prohlížeèe jsou pouze dvì, www.neco.cz/prvni.html a www.neco.cz/druha.html.)

Použití metody replace() zapøíèiní, že uživatel není schopen vrátit se na pøedchozí stránku pomocí tlaèítka prohlížeèe Zpìt. Neznamená to, že uživatel nemùže použít tlaèítko Zpìt vùbec, ale pokud ho použije bude vrácen pøed nahrazovací stránku (stránku, na které jsme použili metodu replace).

Tato metoda mùže pøi špatném použití hodnì ztížit život uživatelùm, jindy zase naopak mùže být její použití v nìkterých situacích pøímo vhodné. V následujícím pøíkladu použijeme opìt metodu setTimeout() pro opakované naèítání stránek s reklamou do rámu každé tøi vteøiny. Nechte ukázku bìžet nìkolik vteøin a poté zkuste vrátit na úvodní stránku pomocí tlaèítka Zpìt na prohlížeèi.

<html>
<head>
<title>Reklama pomocí - location</title>
<script type='text/javascript'>
<!--
// Seznam reklamních stránek.
var stranky = new Array('rkl1.html', 'rkl2.html', 'rkl3.html');
var n = 0;

// Funkce mìnící stránky s reklamou ve spodním rámu.
function obnReklamu()
//-->
</script>
</head>
<body onLoad='obnReklamu()'>
<font face='Arial,Helvetica,sans-serif' size='2'>
<b>Pøíklad se zmìnou reklamního banneru.</b>
<p>
Pokaždé, když se banner zmìní, je pøidána nová URL do historie stránek v prohlížeèi.
Pokud by jste se chtìli vrátit na pøedchozí stránku pomocí tlaèítka zpìt na prohlížeèi,
asi by jste se uklikali.
</font>
<p>
</body>
</html>

Museli jste nìkolikrát klinout, že ano? A èím déle by stránka bìžela, tím obtížnìjší by bylo vrátit se na pùvodní stránku. Nyní si pøedvedeme, jak tento problém vyøešit pomocí metody replace(). V pùvodním skriptu s reklamou vymìòte funkci obnReklamu() za tuto:

function obnReklamu()

Objekt history

Další z užiteèných objektù je objekt history, který uchovává informace o URL všech navštívených stránek. Objekt history podporuje tøi metody:

forward() - naète URL stránky, která následuje v historii za souèasnou stránkou.

back() - naète URL pøedcházející stránky z historie.

go() také naèítá URL stránek z historie prohlížeèe. U této metody mùžete definovat o kolik pozic v historii se má prohlížeè pøesunout ze souèasné pozice. Mùžeme napøíklad zapsat, že se prohlížeè má vrátit o dvì pozice nebo na stránku obsahující v URL urèitý textový øetìzec. Pokud metodì go zadáme jako argument textový øetìzec, najde první stránku v historii, jejíž URL obsahuje zadaný textový øetìzec.

Tyto dvì metody jsou si ekvivalentní:

history.go(-1);  //pøi 0 se nahraje aktuální stránka
history.back();

Tento pøíkaz naète první stránku jejíž URL v historii obsahuje slovo 'netscape' (je brán zøetel na velikost písmen):

history.go('netscape');  // nepodporuje IE

Poznámka: Pokud pøíkaz nemùže vyhovìt, neprojeví se žádná zmìna a to u všech tøí metod. Obsah okna se nezmìní a není vygenerováno chybové hlášení.

Pøedpokládejme, že máte stránku, na kterou vedou odkazy z ostatních vašich stránek. Chcete-li na tuto stránku vložit odkaz pro návrat na pøedcházející stránku, nastává problém. Nevíte, z které stránky byla souèasná stránka naètena. Proto nemùžeme specifikovat atribut HREF=, ale využijeme objekt history:

<a href='#' onClick='history.back(); return false;'>Zpìt</a>

Zmìna obsahu stránky

Metoda scroll() umožòuje posouvat (rolovat) obsah webové stánky nebo rámu. Stránka mùže být posouvána jak horizontálnì, tak vertikálnì.

window.scroll(x,y); // Posune obsah okna nebo rámu na pozici udanou parametry x a y, což jsou souøadnice. Levý horní roh HTML dokumentu odpovídá souøadnicím [0,0].

V uvedeném pøíkladu je spodní rám s pøedpovìdí poèasí pro rùzná svìtová mìsta posouván pomalu nahoru.

<html>
<head>
<title>Rolující pøedpovìï poèasí</title>
<script type='text/javascript'>
<!--
// Promìnná y pro poèáteèní vertikální pozici rámu.
var y = 0;

function rolujRam()
//-->
</script>
</head>
<body bgcolor='#ffffff' text='#000000' onLoad='rolujRam();'>
<font face='Arial,Helvetica,sans-serif' size='2'>
<b>Pøíklad rolující stránky.</b>
</font>
</body>
</html>

V pøíkladu je stránka posouvána až do 870 pixelù a poté se zaène posouvat opìt od zaèátku.

Dalším zpùsobem jak pøepsat obsah okna je použít metody write() a writeln() objektu dokument. Tyto funkce umožòují vypsání textového øetìzce, ve kterém mohou být i HTML tagy pomocí prohlížeèe na obrazovku monitoru. Následující pøíklad vypíše text zadaný do formuláøe v horním rámu do spodního rámu.

<html>
<head>
<title>Vypsání textu</title>
<script type='text/javascript'>
<!--
function prepisRam()
//-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica' size=2>
<b>Pøíklad s pøepsáním obsahu jiné stránky.</b>
<p>
Napište nìjaký text a stisknìte 'Odeslat', text bude zobrazen ve spodním rámu.<br>
Mùžete používat i HTML tagy, jako napøíkad <B></B>,<BR>:
<form onSubmit='return prepisRam();'>
<textarea name='text' rows=5 cols=80></textarea><br>
<input type='submit' value='Odeslat'>
<input type='reset' value='Vymazat'>
</form>
</font>
<p>
</body>
</html>

Mùžete si vyzkoušet rùzné experimenty s vkládáním rùzných HTML tagù. Napøíklad mùžete použít tag <BODY> s rùznou barvou pozadí stránky. Další experimenty se dají provádìt i se skripty, napište si nìjaký skript a vyzkoušejte si co se stane. Pøíklad pro ty s menší fantazií :-)

<script>
  alert('Ahoj lidi!');
</script>

Prohlédnìte si zdrojový kód spodního rámu (pravé tlaèítko myši a následnì 'Zobrazit zdrojový kód') a uvidíte, jak se projevil váš vstup ve spodním rámu.

Ve funkci prepRam() jsou nejdùležitìjší tyto dva øádky:

window.parent.frames['text'].document.writeln(document.forms[0].text.value);
window.parent.frames['text'].document.close();

První øádek vypíše text zapsaný do formuláøe v horním rámu do stránky v rámu spodním. Následnì je volána metoda close(), která prohlížeèi sdìlí, že vstup je u konce a mùže dojít k vyrendrování (vygenerování) stránky. Metoda close() by mìla být volána vždy, když dojde k pøepsání obsahu stránky.

Malé vylepšení

Možná jste si všimli, že poslední pøíklad pøidává každou novì vygenerovanou stránku do historie prohlížeèe. S podobným problémem jsme se už setkali na stránce s reklamou. Problém vyøešíme podobnì jako u reklamy, pøidáme jeden øádek s metodou open() do funkce prepRam().

Poznámka: Metoda open() je v tomto pøípadì metodou objektu document, ne window!

window.parent.frames['text'].document.open('text/html', 'replace');
window.parent.frames['text'].document.writeln(document.forms[0].text.value);
window.parent.frames['text'].document.close();

Øetìzec 'text/html' v metodì open() sdìluje prohlížeèi, že má oèekávat HTML data. Další øetìzec 'replace' prohlížeèi sdìlí, že nemá pøidávat položky do historie prohlížeèe. Je to stejné jako, když použijeme location.replace(URL) pøi zmìnì obsahu okna nebo rámu.

Ostatní možné MIME-typy pro metodu open jsou:

'text/html' - implicitní HTML formát
'text/plain' - prostý text, znaèky HTML se neinterpretují
'image/gif' - obrázek ve formátu GIF
'image/jpeg' - obrázek ve formátu JPEG
'image/x-bitmap' - obrázek ve formátu x-bitmap

Dalšími MIME-typy jsou identifikace formátù pro instalovaná rozšíøení plug-in, která se pak starají o jejich interpretaci sama.

Jednoduchá zmìna pøedcházejícího pøíkladu snad vše objasní. Zmìnìná funkce prepRam() po pøidání jednoho øádku nyní vypadá takto:

function prepisRam()

Poznámka: V IE 6 nefunguje správnì (proè, to nevim).

Použití formuláøù

V doposud uvedených pøíkladech jste si možná už všimli, že jsme v pøedstihu používali vìtšinou elementy formuláøe ve spojení s kódem JavaScriptu (napøíklad díl sedm a jedenáct), jako funkce rùzných tlaèítek a textové vstupy. Elementy formuláøe dovolují uživateli interakci se stránkou èímž jsou ideální pro použití se skriptem. Dovolují data shromáždit a následnì provést akci podle vstupu uživatele. V této ètvrté èásti se tedy podíváme na rùzné elementy formuláøe a ukážeme si jak mohou být použity spolu se skriptem.

Objekt form

Pøedtím, než se pustíme do jednotlivých elementù formuláøe, tak se podíváme na samotný objekt form. Jak už jsme uvedli v Èásti 2 'Objekty JavaScriptu' je objekt form vytvoøen pro každý párový tag <FORM></FORM> na stránce. Podobnì je také vytvoøen vlastní objekt pro každý element (checkbox, radio a text) v objektu form (ve formuláøi). Tyto jednotlivé objekty elementù formuláøe jsou uloženy v poli a dostaneme se k nim za použití vlastnosti elements objektu form.

K elementùm formuláøe budeme pøistupovat stejnì jako v minulých pøíkladech. První pøíklad obsahuje dva formuláøe na stránce:

<html>
<head>
<title>Ukázkový formuláø</title>
</head>
<body>

<form action='/cgi-bin/customer.cgi' method='post' name='infozakaznik'>
Jméno: <input type='text' name='jmeno'><br>
Adresa: <input type='text' name='adresa'><br>
<input type='submit' value='Odeslat'><input type='reset' value='Vymazat'>
</form>

<form action='/cgi-bin/order.cgi' method='post' name='dataobjednavky'>
ID zboží: <input type='text' name='idzbozi'><br>
Množství: <input type='text' name='mnozstvi'><br>
<input type='submit' value='Odeslat'><input type='reset' value='Vymazat'>
</form>

</body>
</html>

Pro pøístup k elementu formuláøe 'mnozstvi' mùžeme použít jeden z následujících zápisù (ale i další):

var mn = document.forms[1].elements[1];
var mn = document.forms['dataobjednavky'].elements[1];
var mn = document.forms.dataobjednavky.elements['mnozstvi'];
var mn = document.dataobjednavky.mnozstvi;

Pro každý typ elementu formuláøe (checkbox, radio a text) je k dispozici jiný typ objektu. Vìtšina z tìchto objektù nabízí k použití vlastnost value a napøíklad metodu focus(). Ovšem nìkteré vlastnosti a metody jsou pøíslušné pouze urèitému typu elementu formuláøe a jeho objektu.

Poznámky: Seznam veškerých objektù formuláøe a jejich vlastností a metod bude uveden v posledním dílu této èásti jako pøíloha.

Pokud chcete zjistit typ objektu pro urèitý element formuláøe, použijte vlastnost type. V uvedeném pøíkladu je pomocí

document.dataobjednavky.mnozstvi.type

jako výsledek vrácen øetìzec 'text'.

Zpracování formuláøù (Form)

Normálnì obsahuje tag <FORM> atribut ACTION, který specifikuje URL programu nebo skriptu pro zpracování na serveru. Jak už jsme uvedli v seznamu správcù událostí událost onSubmit mùžeme použít ke kontrole vstupu nebo jiné manipulaci s daty pomocí JavaScriptu ještì pøedtím, než jsou data odeslána na server ke zpracování. Pomocí návratových hodnot true nebo false tak mùžeme ovlivnit odeslání dat. (Pokud bude napøíklad nìkteré pole formuláøe vyplnìno chybnì èi vùbec je vygenerována chybová hláška a vrácena hodnota false èímž nedojde k odeslání formuláøe. Odeslat pùjde až budou všechny údaje korektnì vyplnìny.)

Pokud chceme používat elementy formuláøe pouze pro ovlivnìní nìjakého kódu JavaScriptu a nepožadujeme zpracování na serveru, mùžeme vynechat atributy ACTION= a METHOD= (pøípadnì ENCTYPE=) v tagu <FORM>.

Typy elementù formuláøe

Objekt Button

K dispozici máme tøi typy tlaèítek. Tlaèítka Submit a Reset, která jste již urèitì vidìli u mnoha formuláøù mají svùj specifický typ objektu (submit a reset). Každé z tìchto dvou tlaèítek obsahuje svojí vestavìnou funkci. Ukázka HTML kódu se všemi tøemi tlaèítky:

<input type='submit' value='Submit'>
<input type='reset' value='Reset'>
<input type='button' value='Button'>

Právì rozdíl mezi již uvedenými tlaèítky Submit a Reset a obecnì použitelným Button je ten, že Submit a Reset mají nastavenou implicitní akci, která se provede po stisku tlaèítka. Submit odesílá data na server a Reset maže jednotlivá pole formuláøe. Pro button musí být požadovaná akce definována za pomoci uálosti onClick.

Vykonání definované implicitní akce elementù Submit a Reset mùžete pøepsat pomocí návratové hodnoty false události onClick. Následující ukázka jednoduché kalkulaèky ukazuje jak pomocí všech tøí typù tlaèítek vykonat stejnou akci.

<html>
<head>
<title>Jednoduchá kalkulaèka</title>
<script>
// Funkce je volána pøi stisku jakéhokoliv ze tøí tlaèítek.
function secti()
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica,sans-serif' size='2'>

<!-- Jednoduchá kalkulaèka -->

<b>Pøíklad použití rozdílných typù tlaèítek:</b>
<p>
Vložte dvì èísla a stisknìte jakékoliv ze tøí tlaèítek pro souèet:
<p>
<form>
<input name='prvni' type='text' value='' size=4> + <input name='druhy' type='text' value='' size=4> =
<input name='soucet' type='text' value='' size=4>
<p>
<input type='submit' value='Seèti - Submit' onClick='secti(); return false;'>
<input type='reset'  value='Seèti - Reset'  onClick='secti(); return false;'>
<input type='button' value='Seèti - Button' onClick='secti();'>
</form>

</font>
</body>
</html>

Asi jste zaregistrovali, že jsme v pøíkladu použili novou metodu (funkci) parseInt(). Funkce pøevádí textový øetìzec na èíslo v zadané soustavì. Funkce parseInt() je vestavìná funkce JavaScriptu. Tato metoda proto není asociovaná s žádným objektem, ale je souèástí jazyka samotného.

parseInt(øetìzec ,[soustava])

Pokud neuvedete žádnou soustavu, JavaScript ji pøiøadí automaticky:

Zaèíná-li øetìzec '0x', je zvolena soustava hexadecimální (16).

Zaèíná-li øetìzec '0', je zvolena soustava oktalová (8).

Je-li øetìzec zapoèat jinou hodnotou, je zvolena soustava decimální (10).

Pokud bysme tuto funkci nepoužili a vstupní øetìzec nepøevedli na èíslo obdržíme jako výsledek pøi pokusu seèíst '2' a '2' opìt øetìzec '22' a ne èíslo 4.

Tlaèítko Reset po stisku vymaže (nastaví) veškerá pole formuláøe na jejich implicitní hodnoty, specifikované pomocí atributu VALUE=. Toto se nám nìkdy nehodí, a to tehdy pokud potøebujeme vymazat pole formuláøe úplnì a ne vrátit na hodnotu v atributu VALUE. Jak docílit toho, aby se elementy formuláøe vymazaly úplnì si ukážeme v následujícím pøíkladu, kdy pøepíšeme implicitní hodnoty VALUE na null.

<html>
<head>
<title>Mazání</title>
<script type='text/javascript'>
<!--
//  Funkce pro vymazaání implicitních hodnot (value) formuláøe ještì pøed vykonáním zabudované funkce tlaèítka Reset.
function clearFields(f)
//-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica,sans-serif' size='2'>

<b>Nadefinování vlastní akce tlaèítku <i>Reset</i>:</b>
<p>
Prosím vyplòte následující informace:
<p>
<form onReset='return clearFields(this);'>
<table border='0' cellspacing='0' cellpadding='4'>
<tr>
  <td><font face='Arial,Helvatica' size=3>Výrobce poèítaèe:</font></td>
  <td><input type='text' name='vyrobce' value='Compaq' size='30'></td>
  <td><font face='Arial,Helvatica' size=3>Model:</font></td>
  <td><input type='text' name='model' size='30'></td>
</tr>
<tr>
  <td><font face='Arial,Helvatica' size=3>Operaèní systém:</font></td>
  <td><input type='text' name='os' value='Windows 95' size='30'></td>
  <td><font face='Arial,Helvatica' size=3>Verze:</font></td>
  <td><input type='text' name='version' size='30'></td>
</tr>
<tr>
  <td colspan='4'><input type='reset' value='Reset'></td>
</tr>
</table>
</form>
</font>

</body>
</html>

Objekty Text, Password, Hidden a Textarea

Tyto objekty jsou si navzájem velmi podobné, u všech je vstupem textový øetìzec. Rozdíl je zejména v zobrazení na obrazovce:

Text - jedna øádka s textem, mùže být jakékoliv délky.

Password - stejnì jako v pøedtím jedna øádka s textem. Ovšem veškeré napsané znaky v tomto poli jsou nahrazeny za '*', aby se pøedešlo možnému spatøení citlivých dat na obrazovce.

Hidden - také jedna øádka s textem, ale text zde uvedený se nezobrazuje na stránce a nemùže být mìnìn uživatelem pøímo. Hodnotu VALUE elementu mùžete mìnit v kódu.

Textarea - víceøádkový text. Zadaný text je reprezentován jako jeden textový øetìzec. V místech, kde jsme zadali Enter je vložen znak pro zaèátek nového øádku.

Poznámka: Skrytá pole se používají pro pøenos informací na a ze serveru. Pøestože nejsou na stránce zobrazena lze se k nim dostat pøes zdrojový kód stránky. Proto pokud tímto zpùsobem chcete pøedávat citlivé informace je dobré tyto data nìjak zašifrovat, aby je mohl zpìtnì dešifrovat pouze k tomu urèený server.

Elementy text a textarea poskytují událost onChange, která umožòuje provést akci pøi zmìnì pole formuláøe. Využití této události demonstruje další pøíklad. Všimnìte si, že událost OnChange je volána pouze pokud uživatel vstupní pole zmìní a poté opustí (pomocí klávesy TAB, myši nebo stiskem klávesy ENTER).

<html>
<head>
<title>onChange</title>
<script type='text/javascript'>
<!--
// Poèítadlo pro poèet volání funkce aktualInfo().
var pocet = 0;

// Funkce pro sumarizaci vstupních údajù.
function aktualInfo()
//-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica,sans-serif' size='2'>

<!-- Jednoduchý informaèní formuláø -->
<b>Pøíklad se zachytáváním zmìny vstupního textu:</b>
<p>
Prosím vyplòte následující informace:
<p>
<form>
<table border=0 cellpadding=4 cellspacing=0>
<tr>
  <td><font face='Arial,Helvatica' size=2>Jméno:</font></td>
  <td><input name='jmeno' type='text' value='' size=20 onChange='aktualInfo()';></td>
</tr>
<tr>
  <td><font face='Arial,Helvatica' size=2>Pøíjmení:</font></td>
  <td><input name='prijmeni' type='text' value='' size=20 onChange='aktualInfo()';></td>
</tr>
<tr>
  <td><font face='Arial,Helvatica' size=2>Adresa:</font></td>
  <td><input name='adresa' type='text' value='' size=40 onChange='aktualInfo()';></td>
</tr>
<tr>
  <td colspan=2>
  <font face='Arial,Helvatica' size=2>Mìsto:</font> <input name='mesto' type='text' value='' size=20 onChange='aktualInfo()';>
  <font face='Arial,Helvatica' size=2>PSÈ:</font> <input name='psc' type='text' value='' size=5 onChange='aktualInfo()';>
</td>
</tr>
<tr><td> </td></tr>

<!-- Toto pole formuláøe je aktualizováno v pøípadì, že dojde ke zmìnì jiného pole. -->
<tr><td colspan=2><textarea name='all' rows=4 cols=60></textarea></td></tr>
</table>
<p>
</form>
</font>

</body>
</html>

Poznámka: Stisk klávesy ENTER v nìkterých prohlížeèích nevyvolá událost onChange (IE 5.5 a vyšší Opera 5.0 a vyšší).

Možná jste si zjistili, že hodnota ve vstupním poli musí být skuteènì zmìnìna, aby došlo k volání události. Pokud uživatel vstup smaže nevystoupí z pole a následnì znovu vepíše stejný text událost onChange volána nebude. Ovìøit si to mùžete pozorováním hodnoty 'Poèet volání' v textové oblasti uvedeného pøíkladu.

Objekt Checkbox

Elementy formuláøe checkbox a radio se používají k výbìru z více možností. Element checkbox je vhodné použít v pøípadì, že vám staèí pouze jednoduchá odpovìï typu 'ano' nebo 'ne'. Element radio je vhodný použít tam, kde chceme vybrat pouze jednu z nabízených možností.

Objekt checkbox je nastaven s hodnotou atributu VALUE v HTML tagu. Tato hodnota je na server odeslána pouze v pøípadì, že políèko formuláøe je zaškrtnuto. Vlastnost checked urèuje stav elementu, true pokud je políèko zaškrtnuto a false pokud ne.

Stav elementu (zaškrtnut/nezaškrtnut) mùžete zjišovat a ovlivòovat pomocí JavaScriptu. V pøíkladu si uživatel mùže vybrat se seznamu jednotlivý typ zboží nebo zaškrtnout èi odškrtnout všechna pole najednou pomocí jednoho stisku tlaèítka.

<html>
<head>
<title>Zaškrtnout/odškrtnout všechny checkboxy</title>
<script type='text/javascript'>
<!--
// Funkce pro zaškrtbutí/odškrtnutí všech políèek najednou.
function nastavZatr(zatr)
//-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica,sans-serif' size='2'>

<!-- Seznam voleb. -->
<b>Pøíklad s použítím checkboxù:</b>
<p>
Prosím zaškrtnìte typ zboží k dodání:
<p>
<form>
<input type='checkbox' name='option1' value='X-plod WWW server'>X-plod WWW server<br>
<input type='checkbox' name='option2' value='90d podpora'>90 denní podpora<br>
<input type='checkbox' name='option3' value='Extended pack'>Extended pack<br>
<input type='checkbox' name='option4' value='Tištìná pøíruèka'>Tištìná pøíruèka<br>
<p>
<!-- Zaškrtnout èi odškrtnout všechna políèeka najednou. -->
<input type='button' value='Select All'  onClick=' nastavZatr(true);'>
<input type='button' value='UnSelect All' onClick=' nastavZatr(false);'>
</form>

</font>
</body>
</html>

Objekt Radio

Element 'radiobutton' se odlišuje od checkboxu tím, že umožòuje volit z více alternativ než dvì. Napøíklad chceme na stránce zjistit vìkové rozložení návštìvníkù. Prùzkum si na stránku mùžeme pøidat následovnì:

<input name='vek' type='radio' value='pod 18'>pod 18<br>
<input name='vek' type='radio' value='18 - 25'>18 - 25<br>
<input name='vek' type='radio' value='25 - 35'>25 - 35<br>
<input name='vek' type='radio' value='35 - 45'>35 - 45<br>
<input name='vek' type='radio' value='45 - 55'>45 - 55<br>
<input name='vek' type='radio' value='nad 55'>nad 55

Všimnìte si, že všechna tlaèítka (radiobutton) mají stejné jméno, vek. Radio tlaèítka se shlukují do skupin, kde jednu skupinu vždy tvoøí stejnì pojmenovaná tlaèítka. K tomu, aby prohlížeè poznal, které tlaèítko patøí k jedné skupinì je nutné, aby všechny tlaèítka v této skupinì mìla stejnou hodnotu atributu NAME. Máme-li takovou skupinu tlaèítek, pùjde ve skupinì stisknou pouze jedno. Pokud stisknete jiné tlaèítko, je pùvodní zatržení automaticky smazáno. Pøi odeslání formuláøe na server je hodnota zatrženého tlaèítka odeslána jako výsledek celé skupiny.

Každé tlaèítko ve skupinì je reprezentováno svým objektem radio. Stejnì jako checkbox má každý takovýto objekt vlastnost value, která odpovídá hodnotì atributu VALUE= pøíslušného tlaèítka v HTML a stejnì tak i vlastnost checked. Rozdíl je právì v tom, že jak oznaèíme jedno tlaèítko na stránce nebo pomocí kódu, je oznaèení pøedešlého automaticky zrušeno.

Nyní již slyším otázku: Jak mùžu pøistoupit k jednotlivým tlaèítkùm, když mají všechny stejné jméno? Odpovìï je jednoduchá, objekt radio je vlastnì pole, kde jsou zvl᚝ uloženy jednotlivé parametry pro každé tlaèítko ve skupinì. Použitím následujícího krátkého kódu mùžeme pøistoupit postupnì ke každému tlaèítku ve skupinì.

var rbutt;

for (i = 0; i < document.forms['mujformular'].vek.length; i++)

Opìt pøipomínám, že z celé skupiny mùže být zatrhnuto pouze jedno tlaèítko. To znamená, že pouze jedno tlaèítko mùže vrátit true pøi použití vlastnosti checked. Následující pøíklad demonstruje jak najít zvolené hodnoty tlaèítek ve vícero skupinách.

<html>
<head>
<title>Zobrazení stisknutých tlaèítek.</title>
<script type='text/javascript'>
<!--
// Funkce pro zobrazí vybrané hodnoty pro každé stisknuté tlaèítko.

function zobrVyber ()
//-->
</script>
</head>
<body>
<font face='Arial,Helvetica,sans-serif' size='2'>

<!- Seznam jednotlivých možností. -->

<b>Pøíklad použití radio tlaèítek:</b>
<p>
Prosím vyplòte požadující údaje:
<p>
<form>
<table border='0' cellspacing='0' cellpadding='8'>
<tr valign=top>
<td><font size='-1'>
<strong>Vaše vìková skupina:</strong>
<p>
<input name='vek' type='radio' value='pod 18'>pod 18<br>
<input name='vek' type='radio' value='18 - 25'>18 - 25<br>
<input name='vek' type='radio' value='25 - 35'>25 - 35<br>
<input name='vek' type='radio' value='35 - 45'>35 - 45<br>
<input name='vek' type='radio' value='45 - 55'>45 - 55<br>
<input name='vek' type='radio' value='nad 55'>nad 55</font>
</td>
<td><font size='-1'>
<strong>Rozmezí vašeho èistého výdìlku:</strong>
<p>
<input name='vydelek' type='radio' value='pod  5 000 Kè'>pod 5 000 Kè<br>
<input name='vydelek' type='radio' value='5 000 - 10 000 Kè'>5 000 - 10 000 Kè<br>
<input name='vydelek' type='radio' value='10 000 - 15 000 Kè'>10 000 - 15 000 Kè<br>
<input name='vydelek' type='radio' value='15 000 - 20 000 Kè'>15 000 - 20 000 Kè<br>
<input name='vydelek' type='radio' value='nad 20 000 Kè'>nad 20 000 Kè</font>
</td>
<td><font size='-1'>
<strong>Status:</strong>
<p>
<input name='stav' type='radio' value='Ženatý/á'>Ženatý/á<br>
<input name='stav' type='radio' value='Rozvedený/á'>Rozvedený/á<br>
<input name='stav' type='radio' value='Svodný/á'>Svodný/á<br></font>
</td>
</tr>
</table>
<p>

<!- Zobrazí vybrané hodnoty pro každé stisknuté tlaèítko. -->

<input type='button' value='Zobraz vybrané' onClick='zobrVyber();'>
</form>
</font>
</body>
</html>

Možná jste si vzpomnìli na minulý díl, kdy jsme pomocí skriptu oznaèovali èi odznaèovali všechna zatržítka. Jak to vyøešit v pøípadì, že zatržítek je moc a kód by se tím znaènì protáhnul? Stejnì jako v pøedcházejícím pøípadì. Všem zatržítkùm déme stejné jméno a oznaèujeme nebo odznaèujeme je pomocí skriptu:

function nastavZatr(zatr)

Poznámka: Vždy je dùležité zvážit, který zpùsob je vhodnìjší, kratší a efektivnìjší. Zjednodušenì se dá øíct, že èím kratší kód, tím lepší.

Objekt Select a Option

Roletka s výbìrem ze seznamu je další cestou jak nabídnout uživateli volbu z více možností. Základní formát pro pøidání roletky se seznam vypadá následovnì:

<form name='mujF'>
<select name='kraje' size='1'>
  <option value='Jihoèeský'>Jihoèeský</option>
  <option value='Jihomoravský'>Jihomoravský </option>
  <option value='Karlovarský'>Karlovarský</option>
  <option value='Královehradecký'>Královehradecký</option>
  <option value='Liberecký'>Liberecký</option>
  <option value='Moravskoslezský'>Moravskoslezský</option>

  <option value='Zlínský'>Zlínský</option>
</select>
</form>

Objekt select je vytvoøen pro každý párový tag <SELECT></SELECT> nacházející se na stránce. A již tradiènì takto vzniklý objekt Option obsahuje pole se seznamem všech vlastností, jedna položka pole vždy pøedstavuje jeden <OPTION></OPTION> tag z HTML stránky. K jednotlivým položkám pole pøistupuje pomocí vlastnosti options.

Poznámka: IE 3.0 nepodporuje objekty Select a Option.

Další dvì vlastnosti objektu Select, které byste mìli znát, protože je budete èasto používat jsou length, která vrátí poèet položek option v poli options. Druhou užiteènou vlastností je selectedIndex, která vrací èíslo vybraného prvku z roletky uživatelem. Mìjte prosím na pamìti, že toto èíslo patøí poli a proto první položka pole je oznaèena èíslem 0 (Jihoèeský).

Nejlépe bude si tyto nové vlastnosti vyzkoušet na pøíkladu a vše bude hned jasné. Do tagu <SELECT> se seznamem krajù pøidejte správce události onChange='zobrVyb();' a na stránku vložte následující skipt:

<script type='text/javascript'>
<!--
function zobrVyb()
//-->
</script>

Uvedený pøíklad funguje dobøe pouze pokud je vybrána jedna položka ze seznamu. Použijeme-li v tagu <SELECT> atribut MULTIPLE mùže uživatel vybrat více položek ze seznamu souèasnì (pøidržením klávesy Ctrl nebo Shift, podle standardu Windows). V tomto pøípadì by nám vlastnost selectedIndex vrátila pouze první oznaèenou položku!

Pro práci s vícero oznaèenými položkami nám JavaScript nabízí vlastnost selected. Pomocí této vlastnosti mùžeme otestovat všechny v objektu option. Následující pøíklad ukazuje jak opakovat dotaz pro zjištìní všech oznaèených položek uživatelem a jejich následný výpis.

<html>
<head>
<title>Vícenásobný výbìr</title>
<script type='text/javascript'>
<!--
// Funkce pro zobrazení všech vybraných položek seznamu.
function zobrVyber()
//-->
</script>
</head>
<body>
<font face='Arial,Helvetica,sans-serif' size='2'>

<!-- Vícenásobný výbìr ze seznamu. -->

<b>Pøíklad s vícenásobným výbìrem ze seznamu:</b>
<p>Prosím vyberte jednu nebo více kategorií:
<form>
<select name='seznam' size='9' multiple>
  <option value='Novinky'>Novinky</option>
  <option value='Sport'>Sport</option>
  <option value='Poèasí'>Poèasí</option>
  <option value='Zábava'>Zábava</option>
  <option value='Spoleènost'>Spoleènost</option>
  <option value='Události'>Události</option>
  <option value='Ekonomie'>Ekonomie</option>
  <option value='Zahrada'>Zahrada</option>
  <option value='Nemovitosti'>Nemovitosti</option>
</select>
<p>
<input type='button' value='Ukaž oznaèené' onClick='zobrVyber();'>
<input type='reset'  value='Odznaè'>
</form>

</font>
</body>
</html>

Nakonec je zde slíbený seznam všech objektù formuláøe a jejich možných vlastností a metod. Snad vám bude užiteèný.

Dnes jsme pravdìpodobnì zakonèili èást týkající se formuláøù.

V Javascriptu máme již standardnì zabudovanou sadu nìkolika objektù týkajících se jak obsahu vlastní stránky, tak napøíklad datových typù a další. Ovšem nejste omezeni pouze na používání tìchto zabudovaných objektù, mùžete si vytvoøit objekty vlastní i s jejich vlastnostmi a metodami! Urèitì se vám to bude hodit napøíklad pøi práci s obsáhlými datovými strukturami nebo pro zjednodušení kódu.

Pro vytvoøení nového objektu musíte nejdøíve vytvoøit konstruktor. To je funkce, která definuje vlastnosti vašeho objektu a v nìkterých pøípadech nastaví i jejich poèáteèní hodnoty. Následnì, poté co máme definovány vlastnosti nového objektu mùžeme vytvoøit metody, které mohou s objektem pracovat.

Funkce konstruktoru

Každý objekt potøebuje funkci konstruktoru. Tato funkce je volána pokaždé, když vytvoøíme novou instanci objektu za použití operátoru new. Pomocí konstruktoru jsou definovány vlastnosti objektu s jejich poèáteèními hodnotami. Ve funkci konstruktoru mùžeme také deklarovat metody našeho nového objektu.

Pøíklad ukazuje konstruktor pro nový objekt nazvaný Produkt, ve kterém jsou uloženy údaje - vlastnosti o rùzných katalogových výrobcích.

function Produkt(jmeno, idcislo, cena, doprava, mnozstvi)

Jména parametrù ve funkci Produkt a jména vlastností našeho nového objektu se pro snazší orientaci ve vìtšinì pøípadù shodují, ale není to povinnost. U nového objektu mohou být poèáteèní hodnoty jednotlivých vlastností nastaveny pøi jeho vzniku nebo až pozdìji. Pokud bychom potøebovali mít hodnotu urèité vlastnosti nastavenu konstantnì, definujeme ji ve funkci Produkt. Napøíklad do funkce Produkt pøidáme øádek:

this.prodejna = 'Praha 6';

Ale ani hodnota vlastnosti prodejna není nastavena 'napevno' a dá se mìnit.

Novì jsme použili klíèové slovo this, které odkazuje na objekt, ke kterému se konkrétní vlastnost èi metoda vztahuje. V tomto pøíkladì tedy odkazuje na objekt Produkt. Pokud chceme vytvoøit instanci objektu Produkt, mùžeme toho docílit takto:

var polozka1 = new Produkt('mixer', '9003-2', 2523, 150, 2);
var polozka2 = new Produkt('mycka', '9117-1', 7688, 300, 1);

Nový objekt mùžeme vytvoøit i bez poèáteèních hodnot a ty zadat až pozdìji. Hodnoty stávajících objektù jde také mìnit:

var polozka3 = new Produkt();
polozka3.jmeno = 'robot';
polozka1.cena = 2223;

Asi už jste zaregistrovali, že k tìmto novým vlastnostem se dostáváme stejnì jako k jakýmkoliv jiným vlastnostem. Pomocí teèkové notace:

var celkem = (polozka1.cena + polozka1.doprava) * polozka1.mnozstvi;

Definice nových metod

Øádek kódu nahoøe nám ukazuje jednu cestu jak spoèítat celkovou sumu za výrobek, která je složena z ceny výrobku, dopravy a balného a vynásobena poètem kusù. Pokud budeme tento výpoèet potøebovat èastìji, možná by se nám na to mohla hodit nìjaká metoda. Abychom tak mohli uèinit musíme pøepsat funkci konstruktoru, kde definujeme metodu nazvanou celkem. Pro tuto novou metodu také zhotovíme funkci.

function Produkt(jmeno, idcislo, cena, doprava, mnozstvi)
function celkem()

Formát v konstruktoru pro definování nové metody je this.jmenoMetody = jmenoFunkce. Není nutné, aby se jméno metody a funkce shodovalo, ovšem pro jasnost a srozumitelnost zápisu jsem použil stejné jméno. Nyní již mùžeme použít:

var prodCelkem= polozka1.celkem ();  //metoda celkem nám spoète celkovou sumu za jeden prodaný výrobek

Hned na úvod si dovolím poznamenat, že pøehnaný strach z cookies nemá opodstatnìní. Cookies se sice na disk ukládají bez vašeho vìdomí (mùžete si zapnout potvrzování), ale ukládají se do urèeného adresáøe a obsah takto uložené cookie si mùže zpìt vytáhnout jenom stránka, která ji stvoøila. O tom, že by cookies vykonaly nìjaký kód èi odesílaly informace z vašeho poèítaèe nemùže být ani øeè.

Teï, když jsem zahnal chmury mùžeme pokraèovat. Cookies jsou tedy cesta jak uložit urèité informace na uživatelovì poèítaèi, které mohou být získány zpìt nìkdy pozdìji. Toho mùžeme využít pro uložení vyplnìného formuláøe (jméno, pøíjmení nebo adresa), aby uživatel nemusel tyto informace vyplòovat nanovo, pøihlašovacích údajù (jméno, ID) nebo pøi individuálním nastavení stránky (napøíklad na Mobilmanii je pomocí cookies uložen váš kabátek).

Cookies se vytváøejí s použitím následujících informací:

jmeno=hodnota - Tento øetìzec reprezentuje jméno cookie a veškerá data pod tímto jménem uložená.

Expires - Datum, po kterém je informace v cookie stará a již nepotøebná. Pokud souèasné datum pøekroèí toto datum, cookie se automaticky smaže. Nezadá-li se žádná datum vypršení platnosti, je cookie smazána okamžitì po zavøení stránky.

Path - Parametry Path a Domain jsou použity z bezpeènostních dùvodù. Normálnì je cookie pøístupná pouze stránkám, které jsou ve stejném adresáøi jako stránka, která cookie vytvoøila. Pokud chceme cookie zpøístupnit i pro ostatní stránky, musíme to uvést v tomto parametru.

Domain - Obdoba parametru Path. Parametr zpøístupní cookies i stránkám z jiných domén.

Secure - Pokud je tento parametr nastaven na true, mohou být cookie zaslány pouze pomocí zabezpeèeného kanálu, SSL.

V nejvìtší vìtšinì pøípadù vystaèíme s parametry name a expires. Pro vytvoøení správného data vypršení platnosti cookie mùžeme využít objektu Date, èímž máme zaruèen i správný formát. Následující kód ukazuje, jak jednoduše nastavit datum pro vypršení cookie na urèitý poèet dní od souèasného data. Pouhou zmìnou hodnoty promìnné dny si mùžeme libovolnì zvolit poèet dní od souèasného data, kdy platnost cookie vyprší:

var dny = 7;
var denExp = new Date();
denExp.setTime (denExp.getTime() + (86400 * 1000 * dny));

Data cookie mùžeme ukládat a zpìtnì èíst pomocí vlastnosti document.cookie. Všechny cookie se shodnými hodnotami domain a path jsou na uživatelském disku ukládány do jednoho souboru a jsou uloženy v øetìzci vždy jako dvojice jméno=hodnota. Jednotlivé cookies jsou v tomto øetìzci oddìlena støedníkem a mezerou: jméno1=hodnota1; jméno2=hodnota2. Vyzkoušejte si ke kódu výše pøidat:

document.cookie = 'jmeno1 = hodnota1; expires=' + denExp.toGMTString() + '; path=/';
document.cookie = 'jmeno2 = hodnota2; expires=' + denExp.toGMTString() + '; path=/aaaa';

Na disku budou vytvoøeny dva soubory s cookies. Pokud napøíklad promìnná jmeno1 existuje je v souboru nahrazena stávající a pokud ne, pøidá se nové jméno promìnné a její hodnota na konec souboru.

Asi jste si všimli metody toGMTString, tato metoda nám zajišuje pøevod datumu na formát, kterému cookie bude rozumìt. Doba platnosti musí být totiž zadána v tomto formátu: Wdy, DD-Mon-YY HH:MM:SS GMT, kde mají jednotlivé znaky tento význam:

Wdy: jméno dne v týdnu anglicky (3 znaky),
DD: den v mìsíci (2 znaky),
Mon: mìsíc anglicky (3 znaky),
YY: rok (2 znaky),
HH: hodina,
MM: minuta,
SS: sekundy,
GMT: udává, že se jedná o èas na hvìzdárnì Greenwitch.

Obecnì použitelné funkce na cookies

Pøedvedeme si funkce, které nám usnadní práci s cookies. Tyto tøi funkce umí uložit, naèíst a smazat jakoukoliv cookie podle jména:

function ulozCookie (jmeno, hodnota, vyprsi)

function nactiCookie(jmeno)
  else
    return '';


function smazCookie(jmeno)

escape() a unescape() jsou vestavìné funkce JavaScriptu, které konvertují speciální znaky do šestnáctkového systému. To proto, že pár jméno=hodnota nesmí obsahovat mezery, èárky, støedníky, dvojteèky nebo další znaky. Použitím funkce escape() mùžeme v hodnotì cookie používat jakékoliv znaky. Pokud chceme tuto hodnotu zpìtnì naèíst, pøevedem ji do èitelného tvaru pomocí funkce unescape().

K dobrým zpùsobùm patøí vymazat cookie, o které víme, že ji nebudeme potøebovat. Pøestože jsou cookie uloženy v malých souborech existují urèitá omezení. Maximální poèet cookie na jeden prohlížeè (Netscape) je 300 a na disk lze umístit maximálnì 20 cookies z jedné domény. Funkce smazCookie(jmeno) posune den platnosti cookie o jeden den pøed aktuální den. Tím se prohlížeèi sdìlí, že mùže tuto cookie vymazat. Vzpomeòte si na metody pro práci s datem z osmého dílu. Datum vypršení platnosti nastavíme pomocí metody setTime jejíž hodnota musí být zadána v milisekundách.

Hned na úvod si dovolím poznamenat, že tato kapitola spadá pod JavaScript verze 1.2. Pokud tedy chcete, aby vám skripty korektnì pracovaly musíte mít nainstalován Netscape Navigator nebo Internet Explorer verze 4.0 a vyšší èi jiný podobný prohlížeè.

Po celou dobu výuky jsme pracovali s rùznými událostmi a na jejich ošetøení jsme používali správce události (pro jistotu pøipomenu, mouseover je událost, zatímco onmouseover je správce události). Internet Explorer nabízí možnost použít správce události skoro v každém HTML tagu. Netscape používá lehce odlišný pøístup. Pøestože podporuje také správce událostí pro mnoho HTML tagù nìkteré události musí být zachyceny odlišným zpùsobem než jsme zatím zvyklí. Napøíklad objekt window implicitnì mezachytává událost pro pohyb myši mousemove, a proto si ukážeme jak ho to naèit.

Zachytávání událostí v Netscapu

V prohlížeèi Netscape 4+ mùžeme zachytávat události objektù window, layer (NN6 nepodporuje) nebo document. Abychom toho docílili musíme použít metodu captureEvent() s definováním události kterou chceme zachytávat a následnì specifikovat funkci, která bude na událost reagovat. Zde je ukázka pro zachycení stisku tlaèítka myši u objektu window:

window.captureEvents(Event.CLICK);
window.document.onClick = klikMysi;

function klikMysi(udalost)

Nezapomeòte metodì captureEvents() pøedat definici události pro zachytávání, v našem pøípadì Event.CLICK. Objekt Event obsahuje informace o události a Event.CLICK je konstanta, která odkazuje na konkrétní typ události. Nìkteré tyto typy událostí jsou:

CLICK - když je kliknuto tlaèítko myši.

MOUSEDOWN - když je tlaèítko myši stisknuto.

MOUSEUP - pøi uvolnìní tlaèítka myši.

MOUSEMOVE - pokud se kurzor myši pohne.

KEYPRESS - když je stisknuta nìjaká klávesa.

KEYDOWN - pokud je klávesa stlaèena.

KEYUP - když je klávesa uvolnìna.

Pro Mozillu se jednotlivé konstanty lehce liší a mùžete je najít na Gecko DOM Reference. Pokud chceme zachytávat více událostí u jednoho objektu je nutné jednotlivé události oddìlit logickým operátorem OR (samozøejmì, že se dají požít i jiné logické operátory, ale jejich využití nevidím reálnì). V pøíkladu zachytáváme všechny stisky tlaèítka myši a klávesy:

window.captureEvents(Event.MOUSEDOWN | Event.KEYDOWN);
window.document.onMouseDown = mysDole;
window.document.onKeyDown = klavesaDole;

Události v Internet Exploreru

V Internet Exploreru není události zachytávat. Obsahuje jeden spoleèný objekt pro události event jako vlastnost objektu window. Bohužel jsou vlastnosti tohoto objektu odlišné od Netscapu. Tímto velmi jednoduchým kódem si mùžeme nechat vypsat aktuální pozici kurzoru myši ve stavové lištì prohlížeèe:

<BODY onmousemove='window.status = `X=` + window.event.x + ` Y=` + window.event.y'>

Psaní skriptù pro více prohlížeèù

Jak už jsem naznaèil, narážíme na problém s nekompatibilitou skriptù pro rùzné prohlížeèe. Abychom docílill stejného efektu v rùzných prohlížeèích je nutné je nìjak o sebe odlišit (pro jednoduchost budu zatím uvažovat pouze IE a NN). Pokud tedy chceme odlišit od sebe IE a NN mùžeme použít test na objekt document.layers, který podporuje pouze Netscape a objekt document.all, který zase podporuje pouze Internet Explorer:

if (document.layers)

else if (document.all)

else

Pokud objekt neexistuje, je jeho hodnota null a na podmínku if je vrácena logická hodnota false. Pomocí nìjakého složitìjšího kódu tak mùžeme odlišit všechny typy prohlížeèù. Pøíklad ukazuje, jak zobrazovat aktuální souøadnice kurzoru myši pro v Intenet Exploreru, Netscapu a Mozille:

<html>
<head>
<title>Pohyb myši</title>
<script type='text/javascript'>
<!--
// Funkce konstruktoru pro zjištìní prohlížeèe.
function zj_prohlizec()
prohlizec =new zj_prohlizec() //Nový objekt pro zjištìní prohlížeèe

var mouseX = 0;
var mouseY = 0;

// Nastavení zachytávání pro Netscape a Mozillu.

if (prohlizec.ns4 | prohlizec.ns6)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = souradniceKurzoru; // inicializace události jak pro NN, tak pro IE

function souradniceKurzoru(e)
  if (prohlizec.minIE4)
  window.status = mouseX + ',' + mouseY; // Zobrazení souøadnic.
  return true;

//-->
</script>
</head>
<body>
<font face='Arial,Helvetica,sans-serif'>Pokud budete pohybovat myší, budou se souøadnice kurzoru zobrazovat dole ve stavové lištì prohlížeèe.<p>Funguje v IE, NN a Mozille.</font>
</body>
</html

Dnes bude øeè o základech regulárních výrazù a jejich možném využití v JavaScriptu.

Regulární výrazy obsahuje snad každý programovací jazyk a ani u JavaScriptu tomu není jinak. Tyto regulární výrazy pro JavaScript jsou odvozeny z Unixu, takže nìkteøí z vás je vlastnì možná už znají. V dnešním dílu si nastíníme co takové regulární výrazy jsou a jak nám mùžou usnadnit práci. Nebudu se rozepisovat o všech detailech, k tomu jsou referenèní pøíruèky a ani by se to jednoho dílu nevešlo.

Regulární výrazy mùžeme použít v JavaScriptu od verze 1.2 a slouží ke zpracování textových øetìzcù. Za pomoci regulárních výrazù si nastavíme masku a poté zjišujeme, zda daný textový øetìzec námi definované masce vyhovuje. Pokud má øetìzec vyhovìt musí obsahovat stejné znaky jako maska definovaná v regulárním výrazu. Napøíklad regulárnímu výrazu 'ahoj' vyhoví øetìzec 'ahoj' nebo 'zdar a ahoj' a spousta dalších.

Maska regulárního výrazu se v JavaScriptu uzavírá mezi zpìtná lomítka /maska/. Napøíklad: /abc/

Takto definovaný regulární výraz splòují napøíklad následující øetìzce:

'abcdef'

'defabc'

'_-_-abc-_-_'

Tyto øetìzce danou podmínku ovšem nesplòují:

'fedcabvc'

'ab c'

'JavaScript'

Za /masku/ použitou v regulárním výrazu mùžeme pøidat rùzné modifikátory, které nám porovnávání mùžou ovlivnit.

i - pøi porovnávání není brán zøetel na velikost písmen,

g - komplexní vyhledávání masky,

m - vyhledává na více øádcích.

Pøi definici masky regulárních výrazù se používají speciální znaky tzv. metaznaky, které nevyhledávají sami sebe, ale mají speciální význam. Napøíklad metaznak '^' oznaèuje zaèátek øetìzce a '$' naopak konec øetìzce. V tomto pøípadì regulárnímu výrazu '^abc' vyhoví pouze øetìzce zaèínající daným textem, napø. 'abc' nebo 'abcdef'. Narozdíl regulárnímu výrazu 'abc$' (metaznak '$' se zapisuje na konec výrazu) vyhoví pouze øetìzce konèící na zadaný text, napø. 'abc' nebo 'xxxabc'. Mezi další metaznaky patøí:

Netscape a IE mají trošku odlišnou implementaci regulárních výrazù, ale následující zápis funguje v obou:

var mujRV = /maska/modifikátor;

Metoda test() porovnává vložený textový øetìzec s maskou regulárního výrazu a vrací true pokud podmínce vyhovuje. Následující pøíklad testuje e-mailovou adresu zadanou uživatelem:

<html>
<head>
<title>Zkontroluj e-mail</title>
<script type='text/javascript'>
<!--
// Funkce pro kontrolu e-mailové adresy.

function zkontrEmail(email) $/
  if (re.test(email))
    alert('Vyhovuje.');
  else
    alert('Nevyhovuje.');

//-->
</script>
</head>
<body bgcolor='#ffffff'>
<font face='Arial,Helvetica' size=2>

<!-- Formuláø pro e-mailovou adresu. -->

<b>Pøíklad použití regulárních výrazù:</b>
<p>
Vložte e-mailovou edresu a stisknìte tlèítko 'Zkontroluj' pro test e-mailové adresy.
<p>
<form>
E-mail:
<font size=3><input name='email' type='text' size=10></font>

<!-- zkontroluj vstup po kliknutí na tlaèítko. -->

<input type='button' value='Zkontroluj' onClick='zkontrEmail(this.form.email.value);'>
</form>

</font>
</body>
</html>

Toto je pouze základ regulárních výrazù, a pokud se chcete dozvìdìt více navštivte stránky Microsoftu nebo Netscapu.

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

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=' 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=' 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)
  // NN4+
  else if (document.layers)
  // IE4
  else if (document.all)


// Funkce pro získání elementu podle verze prohlížeèe.
function ziskejEL(jmeno)
//-->
</script>
<form>
<table border='0' 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.