Začlenění skriptu do stránky

Tři způsoby

  1. Pomocí tagu <script> normálně do proudu dokumentu. 

  2. Tagem <script> s odkazem na externí soubor

  3. In-line (řádkový) zápis jako atribut tagu bez použití <script>  

Pro začátek nemusíte umět všechny způsoby, stačí ten první. Chcete-li se naučit skriptovat rychle, tuto stránku přeskočte a později se k ní vraťte. 

Normálně do HTML kódu

Skript se vloží mezi značky <script> a </script>. Tento způsob je asi nejčastější a byl použit i na stránce prvních příkladů tohoto kurzu. Pro úplnost vypisuji příklad normálního začlenění skriptu, který zobrazí povzbuzující okénko:

<script>
alert('Hlavu vzhůru, bude hůř!');
</script>

Skript se může objevit kdekoliv v HTML kódu -- jak v hlavičce, tak v těle dokumentu. Prohlížeč pak skript zpracovává okamžitě, jakmile na něj narazí.

Externím souborem

Program v JavaScriptu se dá uložit i do jiného souboru a potom ho do stránky načítat. Příklad: Do souboru externi_skript.js uložím toto:

document.write("Toto napsal externí Java Script");

Do stránky, do které pak chci skript vložit, vložím tento kus HTML kódu:

<script src="externi_skript.js"></script>

Stane se to samé, jako bych ten skript vypsal mezi tagy <script>. Zobrazte si příklad použití externího skriptu. 

Obliba skriptů v externích souborech je velmi široká. Nejčastěji se to používá k načítání stejného skriptu do různých stránek, což je netušená zbraň. 

In-line zápis

In-line znamená "v řádku" a je to třetí způsob začlenění JavaScriptu do HTML stránek. Nevyužívá tag <script>, ale zapisuje se jako atribut jiného tagu. Většinou reaguje na nějakou uživatelovu událost. Raději ukážu příklad:

<a href="http://www.meuslany.cz" onmouseover="alert('Na úřadě je myš!!!')">Městský úřad Slaný</a>

Příklad ukazuje normální odkaz (tag <a>) s textem Městský úřad Slaný. Důležitý je tam ten atribut onmouseover, což znamená "při přejetí myší". No a při přejetí myší se spouští ten skript, co je zapsán jako hodnota atributu.

Všimněte si, že v in-line zápisu je nutno používat apostrofy místo uvozovek (protože uvozovky by zakončily zápis skriptu).

A takhle to vypadá, zkuste si přejet myší: Městský úřad Slaný

Onmouseover je jednou z událostí, kterých existuje asi tucet. Bez existence událostí by in-line zápis skriptu nedával smysl.

href="javascript:..."

Jiný in-line způsob nepoužívá události, ale odkazů. Místo adresy cíle (URL) ale začíná textem "javascript: a následuje program". 

Např. 
<a href="javascript: alert('Toto není odkaz')">Skript</a>

Namísto přechodu na jinou adresu se prostě provede skript. Ukázka: Skript

Tento způsob začlenění scriptu se moc nedoporučuje.

Kombinace způsobů

Všechny způsoby začlenění skriptů do stránky jsou sice rovnocenné, ale v různých případech různě výhodné. V naprosté většině složitějších skriptů se tedy způsoby  kombinují, protože je to efektivní.

Sami jistě chápete, že například zapisovat příliš dlouhý in-line skript vede k chybám a zmatku, takže se in-line zapisuje většinou jenom volání funkcí, které jsou definované dříve.

Nejčastější způsob kombinace: