XHTML – klientské skripty

Klientské skripty zajišťují určité chování stránky na základě vnějších podnětů, například akcí uživatele (po přejetí myší nad obrázkem se tento obrázek změní), typu počítače, prohlížeče, rozlišení obrazovky a podobně. Martin Snížek vás s jejich zajímavými možnostmi seznámí opět velmi podrobně.

Klientské skripty jsou buď součástí XHTML stránky, nebo se nacházejí ve zvláštním souboru a ve stránce je na ně odkázáno (tato alternativa je hned z několika důvodů vhodnější, viz dále). Při požadavku prohlížeče na stránku jsou skripty přenášeny spolu s ní a prováděny v prohlížeči.

Skripty ale zdaleka nemusí být prováděny ve všech interpretech XHTML – ať už kvůli omezeným výpočetním možnostem daného zařízení (např. mobilní telefon) nebo prostě proto, že to není třeba (např. u vyhledávacích robotů). Zkrátka, měli byste je chápat jako něco, co zpříjemní uživateli práci se stránkou, poskytne mu větší komfort než statická stránka, ale rozhodně ne něco, na čem by stránka měla být závislá. Stránka by i bez skriptů měla být plně použitelná, tzn. měl by být přístupný veškerý obsah, mělo by se dát po webu normálně pohybovat atd. Tohoto stavu můžete dosáhnout, pokud si při testování stránky vypnete v prohlížeči skriptování.

Skripty se mohou provádět buď automaticky při nahrávání stránky nebo až v závislosti na akcích uživatele – pomocí tzv. událostí (např. řekneme, že při kliknutí na nějaký nadpis v dokumentu se má změnit jeho barva). Navíc můžeme pomocí elementu noscript nadefinovat i alternativní obsah pro interprety XHTML, které skriptování nepodporují. To se hodí především tehdy, pokud naše stránka nejde udělat dost dobře tak, aby její plná použitelnost nebyla závislá na skriptech. V takovém případě můžeme v tomto elementu poskytnout obsah přístupný i bez skriptů nebo odkaz na alternativní verzi stránky, která skripty nevyužívá.

Nyní k tomu, co to vlastně skripty jsou. Jedná se o instrukce určitého programovacího jazyka, které se nacházejí ve tvaru běžného textu (nejsou tedy překládány do binární podoby jako u klasických programovacích jazyků). Tento text je následně interpretován jednou ze součástí interpreta XHTML, které se říká scriptengine (nenapadá mě žádný vhodný překlad do češtiny, jedná se doslova o „skriptovací motor“). V XHTML můžete použít libovolný skriptovací jazyk, jedinými dvěma omezujícími faktory jsou vlastní registrovaný MIME-typ a (samozřejmě) jeho podpora v interpretech XHTML.

Element script – vkládání skriptů do XHTML

Povolený obsah: (#PCDATA)

Atributy:

id       ID       #IMPLIED

Obsahem tohoto atributu je jméno elementu.

charset       %Charset;       #IMPLIED

Hodnotou tohoto atributu je kódování souboru se skripty v případě, že se na nějaký takový odkazujeme pomocí atributu src. Podle mých zkušeností je ale nejlepším řešením kódovat tento soubor v ASCII (pokud se obejdeme bez českých a pokročilejších typografických znaků) nebo stejném kódování jako je dokument – tento postup nedělá současným prohlížečům žádné problémy.

type       %ContentType;       #REQUIRED

Tento atribut musí být uveden, přičemž jeho obsahem je MIME-typ skriptovacího jazyka pro daný element. Příkladem může být text/javascript pro dnes nejrozšířenější skriptovací jazyk JavaScript nebo text/vbscript pro Visual Basic Script.

src       %URI;       #IMPLIED

Tento atribut specifikuje URI externího souboru, ve kterém je uložen skript. Pokud je tento atribut přítomen, interpret XHTML ignoruje obsah celého elementu, proto je zbytečné ho uvádět. V takovém případě by podle pravidel XML měl stačit zkrácený zápis <script ... />. Z důvodů kompatibility s prohlížeči neznalými HTML a XML byste ho neměli používat a uvést místo něj raději <script ...></script>.

defer       (defer)       #IMPLIED

Pokud tento boolean-atribut použijete, říkáte tím, že skript v daném elementu negeneruje žádný obsah (např. pokud se jedná o JavaScript, neobsahuje žádné document.write). To může opticky zrychlit načítání stránky, protože prohlížeč nemusí čekat na výsledek provedení skriptu a může pokračovat ve vykreslování stránky. Hodnota tohoto atributu musí být uvedena v malých písmenech, stejně jako všechny hodnoty atributů v XHTML, jejichž povolený obsah je tvořen výčtem možných hodnot (v tomto případě se výčet skládá pouze z jedné hodnoty).

xml:space       (preserve)       #FIXED 'preserve'

Tento atribut nepoužívejte, protože nemůže nabývat jiné hodnoty než jakou už má – uvádím ho pouze pro úplnost. Říká, že uvnitř elementu script nesmí být interpretem XHTML odstraňovány žádná bílá místa – obsah tohoto elementu musí být v nezměněné podobě předán nějakému skriptovacímu jádru interpreta. Se stejným atributem se setkáme ještě u elementů style a pre.

Element script v XHTML 1.0 Strict DTD

Element script, jak už název napovídá, slouží k definici skriptů v XHTML. Může se vyskytovat v libovolném počtu v sekci head a na určitých místech v sekci body, ale tím se ještě budeme zabývat.

V případě, že skript generuje nějaký obsah (např. pomocí zmíněného document.write v JavaScriptu), je tento obsah vložen na místo, kde se nachází příslušný element script, a považován za normální obsah stránky. Z těchto důvodů není např. možné generovat text ve skriptu, který se nachází v hlavičce dokumentu. Navíc, dokument musí vyhovovat DTD i bez obsahu generovaného skriptem (nemůžeme proto např. generovat element title, který je povinný pro každý dokument).

Obsah elementu script obnáší několik zvláštností – jednak v něm nejsou rozeznávány znakové entity a také v něm nemůžete použít žádné elementy, protože obsah je deklarován jako #PCDATA (tedy pouze text). Některé znaky jdou ale v XHTML zapsat pouze entitou – jedná se o < (<), > (>) a & (&), které mají při přímém zápisu v XHTML speciální význam. Proto je za normálních okolností nemožné použít tyto znaky uvnitř skriptu – bohužel se bez nich často neobejdeme. Zde nám ale přichází na pomoc další prvek XML, a sice sekce CDATA – celý obsah skriptu uzavřeme mezi <![CDATA[ a ]]>. Tím máme zaručeno, že se v tomto textu nebudou rozeznávat znaky < a > jako začátek/konec elementu a & jako začátek znakové entity. Sekce CDATA ale může způsobit problémy při interpretaci skriptu, protože se nejedná o prvky skriptu. Proto je lepší uzavřít její otevírací a uzavírací část do komentářů daného skriptovacího jazyka – podívejte se, jak by se to udělalo v případě JavaScriptu:

<script type=“text/javascript“>
/* <![CDATA[ */
… kód skriptu …
/* ]]> */
</script>

Uvnitř skriptu není potom logicky možné použít posloupnost znaků ]]>. Pokud byste tyto znaky potřebovali použít, pak asi pouze jako výstup skriptu – zde již ale můžete použít znakové entity, a proto zapíšete celý řetězec jako ]]>.

Uvnitř skriptu byste také neměli používat řetězec </ následovaný písmenem z anglické abecedy, protože je HTML prohlížeči považován za konec skriptové sekce. Je třeba tyto znaky zapsat pomocí escape sekvence (<\/) nebo je rozdělit (v JavaScriptu '<' + '/').

V HTML bylo častou praxí uzavírat obsah elementu script do HTML komentářů – staré prohlížeče neznalé skriptů je díky tomu ignorovali a nové, které si této praktiky byly vědomy, je i přesto interpretovaly. Tato praktika je ale chybná v XHTML, protože interpret XML je oprávněn všechny komentáře z dokumentu před interpretací odstranit (a na XML budou již brzy založeny všechny prohlížeče). Proto byste se měli této praktiky vyvarovat (beztak již dnes téměř nejsou používány prohlížeče, které by toto schovávání potřebovaly – a pokud ano, tak interpretace skriptového kódu jako textu bude u nich pravděpodobně ten nejmenší problém, co se týče XHTML 1.0).

Jak vidíte, psaní skriptů přímo do dokumentu je spojeno s celou řadou problémů. Proto je lepším řešením použít externí soubor se skripty a na ten se potom odkazovat. Přináší to s sebou celou řadu výhod:

• Nemáte žádná omezení, co se týče zápisu různých znaků do skriptu (<, >, &, </, ]]>). Nemusíte nic uzavírat do sekce CDATA ani do HTML komentářů.
• Oddělení skriptů od XHTML je správnější z hlediska logické struktury dokumentu – skripty nahrají pouze prohlížeče, které je znají, ostatní je bez problémů ignorují. Pokud jsou skripty přímo součástí dokumentu, musí je přenášet i prohlížeče, které je neznají – to může být problém u zařízení s nižší rychlostí připojení k internetu (např. mobilní telefony) a u rozsáhlejších skriptů.
• Na skripty uvedené v externím souboru se můžete odkazovat ve všech dokumentech vašeho webu – prohlížeče si je uloží do cache při prvním použití a potom už je nemusí znovu nahrávat. Až budete chtít ve skriptech udělat změnu, stačí upravit pouze jeden soubor a změna se hned promítne do celého webu.

Soubor se skripty připojíte tímto jednoduchým zápisem, přičemž je nejlepší učinit tak již v hlavičce, aby se soubor mohl ihned začít nahrávat:

<script type=“text/javascript“ src=“skript.js“></script>

Element noscript – alternativní obsah skriptu

Povolený obsah: %Block;

Atributy:

%attrs;

Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
O této parametrické entitě ještě budeme mluvit.

Element noscript v XHTML 1.0 Strict DTD

Element noscript dovoluje specifikovat alternativní obsah pro případ, že prohlížeč neovládá skripty nebo je má vypnuté. Pokud prohlížeč ovládá skripty a je nakonfigurován k jejich interpretaci, potom obsah elementu noscript ignoruje. Pokud se ale v dokumentu objeví skripty v jazyce, který neumí, měl by interpretovat všechny elementy noscript následující v kódu stránky po daných skriptech.

Element noscript se může vyskytovat pouze v těle (body) stránky, ne v hlavičce. Jako povolený obsah má definovanou parametrickou entitu %Block;, což znamená, že nemůže přímo obsahovat text – ten musí být vnořen v nějakém blokovém prvku, např. odstavci. K těmto věcem se ale ještě dostaneme.

Události

Událost je další část skriptování v XHTML – dovoluje definovat, že při určité akci (většinou vyvolané uživatelem) se provede nějaký skript. Události se přiřazují k elementům, přičemž různé elementy podporují různé události. Jednou z možností přiřazování událostí jsou atributy XHTML elementů – jednoduše v otevírací části elementu vepíšeme atribut se jménem události, který má jako hodnotu kód skriptu, který se má provést. Tento kód musí být v implicitním skriptovacím jazyce dokumentu (ten se definuje pomocí elementu meta, viz díl o meta-datech) a jsou v něm rozeznávány znakové entity (narozdíl od obsahu elementu script), takže veškeré výskyty znaků <, > a & musíme psát jako entity (a samozřejmě můžeme využívat i všechny ostatní entity definované v XHTML).

Událostí je v XHTML poměrně dost, přičemž ty, které podporuje většina elementů, jsou sdruženy do parametrické entity %events;. Tato entita je potom připojena do definice atributů u většiny elementů. My si nyní entitu %events; představíme.

Parametrická entita %events; – základní události

Všechny atributové definice v této entitě mají následujcí tvar:

jméno-události       %Script;       #IMPLIED

Parametrická enita %events; v XHTML 1.0 Strict DTD

Liší se tedy jen jmény událostí a samozřejmě jejich významem. Nyní již tedy k samotným událostem:

onclick

Tato událost je vyvolána, když uživatel klikne svým ukazovacím zařízením (typicky myší) na element.

ondblclick

Tato událost je vyvolána, když uživatel poklepe svým ukazovacím zařízením na element.

onmousedown

Tato událost nastane, když uživatel stiskne tlačítko svého ukazovacího zařízení nad elementem (již ho ale nemusí pustit – tím se tato událost odlišuje od kliknutí).

onmouseup

Tato událost nastane, když uživatel uvolní tlačítko svého ukazovacího zařízení nad elementem.

onmouseover

Tato událost nastane, když uživatel nastaví své ukazovací zařízení nad element.

onmousemove

Tato událost nastane, když uživatel hýbe svým ukazovacím zařízení nad elementem.

onmouseout

Tato událost nastane, když uživatel nastaví své ukazovací zařízení mimo element („odjede“ z něj).

onkeypress

Tato událost nastane, když je klávesa stisknuta a uvolněna nad elementem.

onkeydown

Tato událost nastane, když uživatel stiskne klávesu nad elementem (již ji ale nemusí uvolnit).

onkeyup

Tato událost nastane, když uživatel uvolní klávesu nad elementem.

U těchto událostí byste se měli snažit používat vždy dvě, které jsou závislé na jiném vstupním zařízení. Vysvětlím to na příkladě: Pokud elementu přiřadíte událost onclick, potom musí uživatel používat ukazovací zařízení, aby se mu skript provedl. Mnoho lidí ale používá pouze klávesnici, a proto je vhodné, aby i ti z toho něco měli. Proto byste měli přiřadit i událost, která má obdobný účinek, ale je závislá na jiném vstupním zařízení – v tomto případě je to onkeypress (která je naopak závislá na klávesnici). Díky tomu bude schopno vyvolat váš skript mnoho dalších uživatelů, kteří používají k ovládání klávesnici. Kromě dvojice onclick–onkeypress ještě existují další dvě dvojice s obdobným významem, ale jiným vstupním zařízením, a sice onmousedown–onkeydown a onmouseup–onkeyup.

Nyní jeden příklad na použití událostí:

<p onclick=“alert(‚Ahoj‘);“ onkeypress=“alert(‚Ahoj‘);“>Text odstavce</p>

Element p slouží k vytvoření odstavce, ještě se jím budeme zabývat. Kód událostí je v jazyce JavaScript, proto by se v hlavičce dokumentu měla nacházet tato informace:

<meta http-equiv=“content-script-type“ content=“text/javascript“ />

Další události jsou již spojeny se specifickými elementy, proto se jimi budeme zabývat až u těchto elementů.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.