Začlenění skriptu do stránky
Tři způsoby zápisu - Normálně do HTML kódu - Externím souborem - In-line zápis - Kombinace způsobů
Tři způsoby zápisu
- Pomocí tagu <script> normálně do proudu dokumentu.
- Tagem <script> s odkazem na externí soubor
- In-line (řádkový) zápis jako atribut tagu bez použití tagu <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. 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ň.
Jak kombinovat interní a externí zápis
Pozor, pokud zkusíte jedním tagem <script> spustit externí i interní skript, tak se to nepodaří. Tohle je špatně:
<script src="externi_skript.js">
alert("funguju")
</script>
V takovém případě se interní skript nespustí. Je třeba použít dva tagy <script>:
<script src="externi_skript.js"></script>
<script>
alert("funguju")
</script>
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:
- externím skriptem jsou definovány funkce
- normálním zápisem (pomocí <script> ) jsou inicializovány proměnné a startovní funkce
- in-line skripty volají funkce podle událostí v závislosti na reakcích uživatele
Reklama
