Jak správně vložit JavaScript do webových stránek

Pavel Salvet  /  28. 02. 2008, 00:00

I když to nebude znít zprvu moc přesvědčivě, vkládání klientských skriptů do webové stránky není záležitost, která by se dala odbýt několika málo větami. Zvláštní pozornost si zasluhuje nejen lehce komplikovaná synataxe, ale také změny, které s sebou přinese připravovaná norma HTML 5.

Skript se do (X)HTML kódu vkládá párovým tagem <script> s povinným atributem type, který udává MIME typ. V případě JavaScriptu tímto typem bude text/javascript, v případě Visual Basic Scriptu text/vbscript.

Protože skripty a HTML (potažmo XHTML) jsou svou podstatou velmi odlišné jazyky, je z hlediska koncepce nejlepší kód skriptu zcela oddělit a nechat jej v externím souboru. Takovýto soubor má pak, jedná-li se o JavaScript, příponu .js. K (X)HTML dokumentu se připojuje pomocí atribut src, což je další z atributů tagu <script>. Toto řešení je i nejefektivnější v případě, že se stejný skript bude vkládat do vícero stránek.

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

Skript může být umístěn v hlavičce <head> i v těle <body> dokumentu.

V případě, že by šlo o krátký javascriptový kód a nebylo by účelné zatěžovat server zbytečnými http požadavky, bylo by možná vhodnější vložit jej do (X)HTML přímo. Ale pozor! Zde se přístup XHTML a HTML drobně liší.
Nejprve HTML:

<script type="text/javascript">
<!--
var retezec="řádek JavaScriptového kódu";
//-->
</script>

Jak vidno, javascriptový kód je do HTML vložen jako komentář. Proč? Jednak je to pojistka proti archaickým prohlížečům, které JavaScript neznají a daný kód by zobrazily jako běžný text, a jednak takto nedojde ke konfliktu syntaxí obou jazyků (za předpokladu, že by skript byl doplňen znaky < > &). Mimochodem - před značku konce HTML komentáře se ještě píšou dvě lomítka (viz předchozí ukázka), což má zabránit nechtěné interpretaci této značky javascriptem.

<script type="text/javascript">
/* <![CDATA[ */
var retezec="řádek javascriptového kódu";
/* ]]> */
</script>

V XHTML je nezbytné javascriptový kód deklarovat jako CDATA, aby se zabránilo interpretaci výše zmíněných problematických znaků ze strany XHTML (komentáře kvůli povaze XHTML, resp. XML použít nelze). Zároveň by bylo prozíravé počáteční a koncovou značku sekce CDATA uzavřít mezi /* a  */, aby nezpůsobily chybu ve skriptu.

Skript lze do stránky vložit i prostřednictvím atributů. Jména těchto atributů jsou zároveň názvem události, která skript spustí. Jsou to: onload, onunload, onerror, ondblclick, onmouseover, onmouseout, onmousemove, onkeypress, onkeydown, onkeyup, onsubmit, onfocuc, onblur, onchange. Hodnotou těchto atributů je daný skript. Který daný skript? Typ takto vloženého skriptu by měl explicitně určovat meta tag z následující ukázky.

<meta http-equiv="content-script-type" content="text/javascript">
...
<body onunload="alert('Ale vrátíte se, že?')">

V některých případech je účelné oba způsoby, totiž volání externího skriptu a užití skriptu integrovaného do (X)HTML kódu, zkombinovat. Většina webdesignérů určitě lehce pozná následující část kódu:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-355337-3";
urchinTracker();
</script>

V připravovaném HTML 5 již nebude povinné uvádět atribut type. Pokud nebude definován, bude platit jeho implicitní hodnota, kterou bude text/javascript. Poněvadž norma HTML 5 bude upravovat i XHTML 1.0 (není to až tak velké překvapení, vezme-li se v úvahu, že XHTML 1.0 je suma sumarum reformulované HTML), tak tato nutnost odpadne i u XHTML 1.0.

Dnes si jen stěží lze vybavit prohlížeč, který by nedisponoval podporou JavaScriptu (snad jedině Links), nicméně rozmáhá se počet uživatelů, kteří si JavaScript schválně vypínají (NoScript je poměrně oblíbené rozšíření Firefoxu), a proto se vyplatí mít v záloze alternativu, která by se zobrazila v případě vypnutého JavaScriptu.

<body>
<script type="text/javascript">
<!--
document.write("Používáte "+navigator.appName);
//-->
</script>
<noscript>Používáte výborný prohlížeč</noscript>
</body>

Pozor, noscript je blokový element. Často je ovšem mylně pokládán za řádkový.

Závěrem zbývá se omluvit za tak rozsáhlé povídání o pouhopouhých dvou tazích, ale stručněji to opravdu nešlo.

Zdroje

 

Neprehliadnite: