JavaScript

Příčinou vzniku JavaScriptu byl požadavek na zvýšení uživatelského komfortu pro uživatele stránek. JavaScript můžeme použít například při vstupní kontrole dat vkládaných do formulářů ještě předtím, než jsou vyplněné údaje odeslány na server. Kontrolu údajů nemusí provádět server a výsledkem je rychlejší odezva pro uživatele. JavaScript ve svých prvních verzích navíc umožnil i vytváření interaktivnějšího uživatelského rozhraní stránek. Stránka mohla reagovat na různé události vyvolané uživatelem a například doplňovat pole do formulářů nebo vyvolat otevření nového okna prohlížeče. Tyto možnosti pak dále rozšířil nový koncept dynamického HTML.

My se nyní stručně seznámíme se základy programování v JavaScriptu. Poté si ukážeme, jak se skripty (tak se říká programům v JavaScriptu) zařazují do HTML stránky. V poslední části se podíváme na to, jak jsou v JavaScriptu přístupné jednotlivé komponenty prohlížeče a stránky pomocí objektového modelu dokumentu (DOM).

JavaScript za devět a půl minuty

Každý program se skládá z příkazů, které se provádí sekvenčně v pořadí, v jakém jsou zapsány. jednotlivé příkazy se od sebe oddělují středníkem a je dobrým zvykem psát každý příkaz na samostatnou řádku -- program je pak mnohem přehlednější.

V programech můžeme používat proměnné, které slouží k uložení různých hodnot podle našich potřeb. Proměnné není potřeba předem deklarovat, ale je to lepší. Deklarace proměnné se uvozuje klíčovým slovem var:

var Pocitadlo = 0;
var PocetMesicu = 12;
var i, j;
var Pozdrav = "Ahoj Karle!";
var Nalezeno = false;

Proměnné mohou obsahovat jeden ze tří typů dat -- číslo, textový řetězec a logická hodnota. Logická hodnota odpovídající pravdě se jmenuje true. Nepravdě odpovídá hodnota false.

Mezi nejjednodušší příkazy patří přiřazovací příkaz. Jeho tvar

proměnná = výraz

K dispozic jsou samozřejmě běžné operátory jako '+' (sčítání), '-' (odčítání), '*' (násobení) a '/' (dělení).

delta = y - x;
obvod = 2 * 3.14 * polomer;
palce = centimetry / 2.54;

x = x + 1;
x++;

PoziceX = PoziceX + KrokX;
PoziceX += KrokX;

Pro porovnávání hodnot máme k dispozici relační operátory '<', '>', '<=' a '>='.

Logické výrazy můžeme navzájem spojovat pomocí logických spojek '&&' (a zároveň) a '||' (nebo). Negaci výrazu provedeme zapsáním vykřičníku '!' před jeho začátek.

JeVIntervalu = (x >= DolniMez) && (x <= HorniMez);

if (podmínka) {
    příkazy, které se provedou při splnění podmínky
    }
else {
    příkazy, které se provedou při nesplnění podmínky
    }

if (hodina > 12) {
    hlaseni = "Dobré odpoledne!";
    }
else {
    hlaseni = "Dobré ráno!";    
    }

if (hodina > 12) 
    hlaseni = "Dobré odpoledne!"
else 
    hlaseni = "Dobré ráno!";

Cyklus for má tvar:

for (počáteční inicializace; podmínka; inkrementace) {
    příkazy
    }

var i,
    faktorial = 1;

for (i=1; i<=n; i++) {
    faktorial *= i;
    }

while (podmínka) {
    příkazy
    }

Velice užitečnou pomůcku nabízí JavaScript v možnosti definovat si vlastní funkce. Funkce použijeme v případech, kdy potřebujeme v programu na různých místech provádět stejné činnosti. Použitím funkcí kód programu zkrátíme, zpřehledníme a půjde snadněji modifikovat. Definujme funkci pro výpočet faktoriálu. Funkce bude navíc rekurzivní, protože bude volat sama sebe:

function Faktorial(n) {
    if ((n==1) || (n==0)) 
        return 1 
    else 
        return (n * Faktorial(n-1));
    }

var i;
for (i=1; i<=10; i++) {
    document.writeln(i, "! = ", Faktorial(n));
    }

1! = 1
2! = 2
3! = 6
4! = 24
5! = 120
6! = 720
7! = 5040
8! = 40320
9! = 362880
10! = 3628800

Funkce může mít i více parametrů, oddělují se pak čárkou.

V poslední ukázce se objevila konstrukce document.writeln. Tento zápis specifikuje vyvolání metody writeln u objektu document. Popis objektů vážících se k prohlížeči a stránce uvedeme na konci tohoto článku. JavaScript však obsahuje i několik objektů, které s HTML vůbec nesouvisí. Jedná se objekty String, Date a Math. Ty umožňují práci s řetezci, s údaji o datu a čase a s matematickými funkcemi.

ObvodKruhu = 2 * Math.PI * Polomer;
c = Math.sqrt(a*a+b*b);   // důsledek Pythagorovy věty

Zakomponování JavaScriptu do HTML

• Skripty, které jsou vykonány při nahrání stránky do prohlížeče. Tyto skripty se do stránky vkládají pomocí elementu SCRIPT.
• Skripty, které jsou vykonány vždy, když se vyskytne určitá událost. Událostí existuje několik a vždy se musí připojit ke konkrétnímu elementu. Událostí může být například přejetí myší nad elementem.

<SCRIPT LANGUAGE="JavaScript">
  window.status = "Právě si prohlížíte moji stránku."
</SCRIPT>

Druhou možností je vložit skript pouze pomocí odkazu. I v tomto případě však musíme použít ukončovací tag </SCRIPT>:

<SCRIPT LANGUAGE="JavaScript"
        SRC="http://netscape.com/exmpl/demo.js">
</SCRIPT>

Při vkládání skriptů je rovněž vhodné jejich obsah skrýt před staršími prohlížeči pomocí triku s komentáři:

<HEAD>
<TITLE>Stránka, která vám popíše stavovou řádku</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
  window.status = "Právě si prohlížíte moji stránku."
// -->
</SCRIPT>
</HEAD>

Pokud používáme skripty pro dynamické vygenerování části dokumentu, můžeme použít element NOSCRIPT a umístit do něj alternativní text pro starší prohlížeče, které nepodporují skripty:

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
  document.write("Používáte prohlížeč " + navigator.appName
                                  + " " + navigator.appVersion)
// -->
</SCRIPT>
<NOSCRIPT>
Používáte prohlížeč, který nepodporuje JavaScript.
</NOSCRIPT>
</BODY>

Aby byly naše dokumenty opravdu interaktivní, je potřeba, aby provedení určité části skriptu bylo vyvoláno událostí, kterou způsobil uživatel. Událostí může být přejetí myší přes určitý element, kliknutí myší apod.

U každého elementu můžeme použít několik nových atributů, které odpovídají jednotlivým událostem. Jako jejich hodnota se uvádí příkazy, které se po vyvolání dané události mají provést -- tzv. obsluha události.

Obecně můžeme použití události u nějakého elementu zapsat jako:

<TAG událost=obsluha události>

Přehled událostí, které můžeme použít, uvádí tabulka. Ukážeme si část stránky, kde se po najetí myší nad odkaz ve stavové řádce prohlížeče objeví vysvětlující text:

O rozvoj Webu se stará konsorcium
<A HREF="http://www.w3.org"
   onMouseOver="window.status='Kliknutím na odkaz se dostanete'
   + ' na domovskou stránku konsorcia W3C'">
W3C</A>

Objektový model dokumentu

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

Základním objektem je window, přes který jsou dostupné všechny další objekty. Nejdůležitějším objektem je document, který v sobě zahrnuje všechny objekty a vlastnosti vztahující se k aktuálnímu dokumentu. Na jednotlivé objekty v hierarchii (viz obrázek 5) se odvoláváme pomocí tečkové notace: window.screen, window.document, window.document.body.

Protože jsou všechny objekty potomky objektu window, může tento vynechávat. Zkráceně můžeme psát window.screen, document, document.body.

Na dalších nižších úrovních v objektové hierarchii mohou být buď další objekty anebo přímo vlastnosti a metody jednotlivých objektů. Vše si ukážeme na příkladě. Objekt document.all obsahuje všechny elementy obsažené v dokumentu. Přístupné jsou pomocí svého jména definovaného atributem ID:

<H1 ID=Nadpis>Pokusný nadpis</H1>
<P ID=Odstavec1>Text odstavce teď není důležitý

<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 1.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeAlign()
{
  document.all.Nadpis.align = "center";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis ALIGN=LEFT
    onClick="ChangeAlign()">Pokusný nadpis</H1>
<P ID=Odstavec1>Text odstavce teď není důležitý
</BODY>
</HTML>

U objektů, které odpovídají elementům stránky, máme k dispozici vlastnost i objekt style. Pomocí vlastnosti style můžeme přistupovat k definici stylu elementu stejně jako pomocí atributu STYLE. Následující kód by změnil barvu a velikost nadpisu:

document.all.Nadpis.style = "color: red; font-size: 30px";

document.all.Nadpis.style.color = "red";
document.all.Nadpis.style.fontSize = "30px"

<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 2.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeText()
{
  document.all.Nadpis.innerText = "Posloucháte mě pěkně!!!";
  document.all.Nadpis.style.color = "blue";
  document.all.Nadpis.style.fontSize = "50px";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis onClick="ChangeText()">
Klikněte na tenhle nadpis a uvidíte, co se stane.</H1>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 3.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeText()
{
  document.all.Nadpis.outerHTML = "<IMG SRC=astro.gif>"
        + "<P>Kromě obrázku přidám i krátký odstavec textu.";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<H1 ID=Nadpis onClick="ChangeText()">
Klikněte na tenhle nadpis a uvidíte, co se stane.</H1>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Ukázka dynamického HTML 4.</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ChangeDocumentAlign()
{
    document.styleSheets[0].addRule("BODY", "text-align: center", 0);
}
// -->
</SCRIPT>
<STYLE></STYLE>
</HEAD>
<BODY onClick="ChangeDocumentAlign()">
<H1>Nadpis</H1>
<P>A několik odstavců textu
</BODY>
</HTML>

Bohužel zde nemůžeme rozebrat celou objektovou hierarchii. Zmíníme se však ještě alespoň o několika zajímavostech. Adresa dokumentu, který je právě zobrazován, je přístupná přes objekt location. Pokud tedy chceme přímo skriptem změnit stránku, která se právě zobrazuje, můžeme použít příkaz location="http://někde.jinde.cz".

Pokud máme stránku rozdělenou na rámy, můžeme z jakéhokoliv rámu měnit stránku zobrazenou v ostatních rámech. Stačí novou adresu zapsat do parent.jméno_rámu.location. Tímto způsobem můžeme dosáhnout speciálních efektů, jako je změna obsahu více rámů najednou po zvolení jednoho odkazu. Vždy bychom však měli zvážit, zda je chováni stránky snadno pochopitelné pro její uživatele.

Úvod | Kaskádové styly | Ukázky | Přehled vlastností stylů | DHTML vs. Java