Dnes začíná seriál přiblížující možnosti dynamického HTML. Postupně si ukážeme, jak pracovat s objekty na stránce, měnit jejich vlastnosti a společně od základů vytvoříme DHTML knihovnu. Zahájíme popisem verzí JavaScriptu a vkládáním kódu do stránek.
Na rozdíl od podrobných specifikací (jako je např. HTML 4.01 či XHTML 1.0) není dynamické HTML (dále jen DHTML) žádným standardem či normativním předpisem; neexistuje nic jako DHTML 1.0. Termínem DHTML se pouze označuje souhrn nástrojů a postupů umožňujících dynamické změny HTML dokumentů. Tedy postupy, jak přímo v prohlížeči na jinak statické stránce zobrazit či skrýt část jejího obsahu, provést určitou akci podle činnosti uživatele (pohyb myši, kliknutí, stisk klávesy, načtení stránky atd.), animovat pohyb prvků na stránce či automatizovat funkce prohlížeče.
K těmto postupům se kromě nástrojů určených k tvorbě samotného obsahu stránky (HTML, XHTML) a jejího vzhledu (CSS) používají programovací skriptovací jazyky. Mezi nejpoužívanější patří JavaScript (později standardizován podle normy ECMA, takže se také můžeme setkat s pojme ECMAScript), resp. JScript (derivát JavaScriptu v prohlížečích MSIE), dále např. TCL či VBScript (odnož Visual Basicu pro skriptování HTML). V tomto seriálu budeme používat pouze rodinu jazyků JavaScript (dále jen JS), přičemž pod tento pojem sloučíme všechny příbuzné varianty tohoto jazyka (Netscape JavaScript, ECMA-Script či Microsoft JScript; viz níže) - z pohledu DHTML mezi nimi nebudeme dělat rozdíl. Pokud se nějaká funkce či postup bude lišit v různých verzích JS, upřesníme, které varianty JS, typy prohlížečů a jejich verzí danou funkci podporují. Jazyk VBScript je proprietárním řešením firmy Microsoft, který podporují pouze konkrétní prohlížeče na konkrétní platformě, proto se mu věnovat nebudeme.
Tento seriál sice předpokládá alespoň rámcové znalosti postupů programování, ale ani čtenář-neprogramátor se základní znalostí HTML by neměl mít problém pochopit základy práce s DHTML a nakonec jej i používat na svých WWW stránkách.
Skripty se do stránek mohou dostat několika cestami. Nejběžnější je použití HTML značky <script>. Pro
určení typu skriptu (JS, VBS, TCL či jiný) se používají MIME typy - typ tedy může být určen http hlavičkou externího
souboru se skriptem, běžnější je ale definovat jej atributem type tedy např. <script type="text/JavaScript">.
Pozn.: Dříve, ale stále i dnes často používaný atribut language je nevhodný a v HTML 4 je dokonce již
zavržený. Pokud pouze definujeme typ jako type="text/JavaScript", použije se příslušná verze jazyka
podle možností aktuálního prohlížeče (JavaScript, JScript, ECMAScript atd.).
Pomocí značky <script> můžeme umístit kód skriptu přímo dovnitř stránky nebo do ní načíst skript umístěný
v externím souboru. Tato značka je párová a kód skriptu se umisťuje mezi počáteční a koncovou značku </script>,
přičemž z důvodů kompatibility se starými prohlížeči je zvykem kód ještě "obalit" HTML komentářem - staré prohlížeče
budou text skriptu považovat za komentář a ignorovat jej, novější prohlížeče budou ignorovat komentářové značky a text
interpretují jako kód skriptu. Kód z externího souboru se načítá pomocí atributu src.
<script type="text/JavaScript">
<!--
/* tady je kód skriptu...*/
-->
</script>
<script type="text/JavaScript" src="mujskript.js"></script>
<script type="text/JavaScript" src="mujskript.js">
<!--
/* tento kód se provede jen tehdy, když nelze načíst
externí soubor "mujskript.js", jinak se ignoruje */
-->
</script>
Značku <script> lze umístit do sekcí <head> i <body> HTML dokumentu.
Způsob chování, spouštění a běh skriptů se liší podle typu prohlížeče i jednotlivých verzí.
Obsahem kódu mohou být přímo příkazy JS nebo definice funkcí. Příkazy uvedené mimo funkce se obvykle provádějí ihned, jak se načítá stránka - těla funkcí se provedou, jen pokud je daná funkce spuštěna (zavolána příkazem z kódu nebo událostí na stránce). Podle typu prohlížeče se příkazy mohou provádět ihned po svém načtení, může to však být i později - rozhodně nelze spoléhat na to, že JS kódy umístěné na několika místech stránky proběhnou chronologicky jeden po druhém tak, jako jsou na ní uvedeny. Mohou se spustit ihned po načtení kódu, mohou se také spustit až po načtení celé stránky; mohou se spustit současně, či postupně - v pořadí, jak se načítají, či v pořadí úplně jiném.
Je proto vhodné přímo do kódu psát pouze příkazy, jejichž provedení není na časové posloupnosti závislé - všechny ostatní je lépe umístit do funkcí, které se spustí až po načtení stránky (to si ale ukážeme až později).
Pokud pomocí skriptu zapisujeme něco do dokumentu (pomocí document.write), výsledek se obvykle tváří, jako
by byl vložen ihned za značku <script> - resp. jako by výstup skriptu nahradil skript samotný. Z tohoto
důvodu by se obecně neměl zápis do dokumentu používat ve skriptech v sekci <head> - ačkoli většina
prohlížečů umožňuje i toto, mělo by se document.write v <head> používat pouze pro zápis
prvků, které skutečně patří do sekce <head> (například vytvoření titulku, meta značky atd.)
Pozn.: Někdy nejsou ze skriptů v <head> dostupné funkce definované v <body>.
Pozn.: Z důvodu překladu JS kódu a HTML dokumentu nesmí být v JS uveden řetězec '</script>' (ukončovací
značka tagu <script>). Pokud je potřeba ve skriptu tento řetězec použít, je nutné toto pravidlo nějak
obejít - např.:
var text = '<' + '/script>'; // nebo var text = '<\/script>';
JavaScript původně vytvořila společnost Netscape Communications pod původním názvem LiveScript. Po nástupu jazyka Java a s růstem jeho popularity přejmenoval Netscape svůj skriptovací jazyk (patrně z marketingových důvodů) na JavaScript. Poprvé byl dostupný v prohlížeči Netscape 2.0.
| LiveScript 1.0 | --- | První předchůdce JavaScriptu |
| JavaScript 1.0 | --- | Implementováno v Netscape 2.0. Dnes již zastaralý a většinou neplatný |
| JavaScript 1.1 | ECMA 2 | Podporován v Netscape 3.0, Netscape Enterprise Server 2.0 a také v Opeře 3.0. Robustnější, obsahuje lepší práci s poli, nahrazování obrázků, přístup k vlastnostem pluginů, ovládání scrolování. |
| JavaScript 1.2 | --- | Netscape 4.0 až 4.05. Přidány regulární výrazy (RegExp), switch, delete, objekt Screen, časovač, změna pozice a rozměrů okna, literály Object a Array. |
| JavaScript 1.3 | ECMA 2 | Netscape 4.06 až 4.76, Netscape Enterprise Server 3. Lepší zpracování výjimek. |
| JavaScript 1.4 | ECMA 2 | Netscape 5.0 (není široce rozšířen) |
| JavaScript 1.5 | ECMA 3 | Netscape 6.0, první verze Mozzily |
JScript je implementací JavaScriptu od společnosti Microsoft. Odlišné jméno bylo zvoleno nejspíše pro to, aby byl Microsoft z obliga, že v JavaScriptu provádí vlastní změny. První verze JScriptu byla víceméně kompatibilní s JavaScriptem 1.0, i když se vždy detailech odlišoval. Podpora JScriptu je v MSIE výtečná, pokud se však omezíte jen na podmnožinu odpovídající JavaScriptu, narazíte na některá omezení.
| JScript 1.0 | --- | MSIE 3.0. Ekvivalent JavaScriptu 1.0 |
| JScript 1.1 | --- | nikdy nebyl publikován |
| JScript 1.2 | --- | dtto (stopy jeho existence, ale status není znám) |
| JScript 2.0 | --- | Publikován s IIS 1.0 |
| JScript 3.0 | ECMA 2 | Ekvivalent JavaScriptu 1.2; MSIE 4.0 (některé funkce už v MSIE 3.02), IIS 4.0 a WSH 1.0 |
| JScript 4.0 | ECMA 2 | Publikován s Visual Studiem 6.0 |
| JScript 5.0 | ECMA 2 | Ekvivalent JavaScriptu 1.5. Všechny 32bitové OS Windows s MSIE |
| JScript 5.1 | ECMA 2 | Publikován s IIS 5.0 na Windows 2000 |
| JScript 5.5 | ECMA 3 | Publikován s MSIE 5.5 |
ECMA (European Computer Manufacturers Association) je organizace vyvíjející již mnoho let mezinárodní standardy. ECMAScript je obecná norma objektově orientovaného programovacího jazyka popisující výpočty a manipulaci s objekty v hostitelské aplikaci. Snaží se také co nejlépe integrovat do skriptovacího jazyka další standardy (Unicode, DOM a další ISO/IEC normy).
| ECMA 1 | --- | nahražena verzí ECMA 2.0, již se nikde nepoužívá |
| ECMA 2 (ECMAScript - edition 2) |
Přibližně ekvivalent JavaScriptu 1.1, vyjma modelu HTML dokumentu | Aritmetické, textové a logické operátory, management globálních a lokálních proměnných, základní datové typy a objekty, základní matematické funkce (objekt Math), klíčová slova, instance objektů a konstruktory, dědičnost prostřednictvím prototypů atd. |
| ECMA 3 (ECMAScript - edition 3) |
Přibližně ekvivalent JavaScriptu 1.5 a JScriptu 5.5 | Regulární výrazy, bohatší ovládácí příkazy, lepší práce s řetězci a poli, vylepšení zpracování výjimek (try/catch), lokalizační možnosti, chybové objekty pro zpracování výjimek atd. |
Díky standardům ECMA, které sjednocují rozdíly mezi JavaScriptem a JScriptem, je tak již snazší psát skripty společně pro oba jazyky. Pokud použijete pouze ty části JavaScriptu a JScriptu, které vyhovují stejné normě ECMA, budete mít zajištěno, že skript poběží shodně na obou platformách. Funkce, které se této normě vymykají, je pak vhodné používat jen tam, kde předpokládáme použití konkrétního prohlížeče, pro nějž kód připravujeme (např. firemní intranet pro MSIE) - jinak je lépe držet se společných, krosplatformních standardů.
V příštím díle se budeme věnovat objektovému modelu HTML dokumentu a začneme vytvářet naši vlastní knihovnu DHTML
<script src="..."><script type="...">Petr Staníček, pixy.cz © 2002, 2015