Hlavní postupy skriptů
Z praktického hlediska se JavaSkripty používají dvěma zásadně odlišnými způsoby. Je to dáno chvílí, kdy se vykonávají:
- Skript se spouští při zavádění stránky. Jde zejména o zápis do dokumentu metodou document.write(), ale mohou se dít i jiné věci.
- Skript se vykoná jako reakce na uživatelskou událost, např. přejetí určitého elementu myší. Tehdy už nelze zapisovat do dokumentu, dělají se jiné věci.
Pro efektivní práci v JavaScriptu je dobré osvojit si oba způsoby.
Příklad obou způsobů
<body>
<script>
document.write("ahoj");
// tento skript se spouští při zavádění stránky
</script>
<img src="obrázek.gif" onmouseover="this.src='obrazek2.gif'">
<!-- obrázek je nahrazen při přejetí myší -->
</body>
Skripty při zavádění stránky
Střídmost použití
Obecné pravidlo říká, že co není nezbytně nutné zapisovat skriptem, by se skriptem zapisovat nemělo. Je to totiž jistější: někteří klienti (zejména roboti) JavaScript nepoužívají; další chyby mohou vzniknout po případných nesoustředěných úpravách stránky. Jednoznačnou chybou jsou v tomto ohledu celé stránky zapisované skriptem.
K čemu je tedy zapisování do dokumentu dobré?
Odlišení prohlížečů
Protože se dnešní prohlížeče liší v tom, jak některé věci zobrazují, je potřeba způsob, jak do jednoho prohlížeče zapsat nebe a do druhého dudy. Dělá se to takto:
<script>
if(navigator.appName == "Netscape")
document.write("nebe");
else document.write("dudy");
</script>
Pokud se někomu zdá tento příklad neužitečný, tak to může být tím, že nikdy neoptimalizoval pro Netscape.
Vkládání menu ze souboru
Výjimkou z pravidla střídmosti je generování patiček nebo odkazových menu pomocí externího *.js souboru. Tak lze totiž vložit stejný text do mnoha stránek. V externím souboru menu.js může být tento text:
document.write("<a href='index.html'>Hlavní stránka</a>")
document.write("<a href='druha.html'>Druhá stránka</a>")
atd.
Do každé ze stránek se potom menu vloží na potřebné místo pomocí zápisu
<script src="menu.js"></script>
(Ještě musím zmínit, že takováto tvorba menu dělá problémy, pokud máte stránky ve více než jedné složce (adresáři). Potom totiž nemusejí fungovat relativní odkazy. Někteří kvůli tomu dokonce dělají speciální souborové systémy, aby mu to fungovalo.)
Deklarace funkcí
Další věc, která se vykonává při zavádění stránky je deklarace funkcí. Je to výhodné dělat napřed, protože pak budou připravené na případnou uživatelskou událost. To už je druhý způsob použití skriptů.
Skripty reagující na událost
Událostí existuje hodně, nejčastěji to jsou různá klikání a přejíždění myší. Např. zápis:
<a href="kamkoliv" onmouseover="alert('Ahoj')">odkaz</a>
způsobí vyskočení hlášky (to je ten alert) s textem Ahoj pokaždé, když se ten odkaz přejede myší (to je to onMouseOver). Jiný příklad:
<input type="text" value="Sem zadejte text" onfocus="this.value=''">
Formulářové pole (input) si při aktivaci (onfocus), nastaví prázdný obsah (this.value=''; znamená, že hodnota (value) bude prázdný řetězec vymezený dvěma apostrofy). Když se políčko aktivuje (třeba tak, že se do něj klikne), tak se vymaže a čeká na vstup uživatele.
V praxi je ještě potřeba napřed vyzkoušet, zda už náhodou někdo nezkoušel ten text měnit, takže správnější zápis skriptu je
<input type="text" value="Sem zadejte text" onfocus="if(this.value=='Sem zadejte text') this.value=''">
Něco tam napište, pak klikněte mimo a pak znovu dovnitř:
Přehled událostí
Provázanost s funkcemi
Jestliže byla někde v dokumentu deklarována funkce, dá se zavolat při určité události. Deklarace funkce s parametrem vypadá třeba takto (parametr je proměnná soubor):
<script>
function noveOkno(soubor)
{window.open(soubor, "novyRam","width=500,height=400")}
</script>
a volání funkce navážu na událost kliknutí (onclick) třeba na obrázku (img):
<img value="Klikni" src="zmensenina1.jpg" onclick="noveOkno('obrazek1.jpg')">
V novém okně jménem novyRam se otevře stránka obrazek1.jpg. Zrovna touto funkcí by se dala udělat obrázková galerie (muselo by se to trochu doladit).
Nelze zapisovat do dokumentu
Při reakci na uživatelskou událost se nedá použít document.write, Prostě nelze zapisovat do ukončeného dokumentu. Document.write se dá použít jedině při zavádění dokumentu (popsáno v první části této stránky). Kdyby se přece jen na nějakou událost vázalo document.write, tak se obsah stránky v prohlížeči smaže a nahradí tím zapisovaným řetězcem. Příklad nevhodného použití document.write.
To je právě zásadní rozdíl mezi oběma přístupy. Zatímco skriptům při načítání (aneb zavádění) stránky kraluje právě document.write, který do dokumentu vpisuje, po načtení stránky je document.write nepoužitelný.
Jakým způsobem zle tedy později nahradit nějaký text podle události? Jsou na to vlastnosti InnerHTML, OuterHTML a další. Fungují ale jenom v Mozille, Internet Exploreru 4 a vyšším.
Reklama
