Události prohlížeče
Čas, kdy se skript provede, nemusí být vázán pouze na umístění daného skriptu ve zdrojovém
kódu HTML. Vezměme třeba příklad ankety, kdy je skript spuštěn až ve chvíli, kdy uživatel
klepne na tlačítko odeslat. Nebo když ve stránce najedete kurzorem myši na obrázek, který
se rozsvítí nebo jinak reaguje a když myší uhnete stranou, opět zhasne (neboli provede se
výměna obrázků, z nichž jeden je normální a druhý jasnější). Jde tedy o provedení skriptu
v případě, že se splní daná podmínka, nastane určitá událost. A právě tyto události jsou tím,
co dělá web dynamickým.
Pro lepší pochopení rozvedu právě příklad rozsvícení a zhasnutí obrázku při přejetí myší:
Nejdříve vytvoříte dva obrázky, jeden bude tmavý a druhý jasný. Ten tmavý se bude jmeno−
vat obrazek.jpg, ten světlý obrazek_cool.jpg. Tmavý bude zobrazen v případě, že myš ne−bude
ukazovat na něj. Druhý, jasný, se zobrazí tehdy, přejede−li přes něj kurzor myši.
Následně vložte tento skript do sekce HEAD, nebude však vadit, umístíte−li jej kamkoliv
jinam (je napsán v JavaScriptu):
A pak už jen vložte místo klasického odkazu na obrázek
vložte řádek tento:
Programování WWW stránek pro úplné začátečníky
52
ONMOUSEOUT="MakeNormal(Obrazek)" SRC="obrazek.jpg" BORDER=0>
Kdykoliv nyní přejdete přes obrázek myší, jako by se rozsvítil. Tohle má význam např.
u odkazů, kdy je takto aktivní obrázek velice efektní. V příkladu jsou těmito událostmi
onmouseover a onmouseout, tedy událost, když myš je umístěna na objektu a když myš
je umístěna mimo. Tyto události pak předají řízení uvedeným skriptům, které jsou definovány
výše. Výhodou tohoto skriptu je navíc to, že obrázky mohou mít jakoukoliv příponu, tedy lze
použít jakéhokoliv obrázkového formátu. Ale to jen tak na okraj.
Pro úplnost uvedu ještě tentýž skript ve VBScriptu, abyste si udělali představu, že to jde i tak:
Myslím, že použití událostních skriptů je jasné. Spustí pouze v případě, že je splněna daná
podmínka. U této podmínky je pak také umístěno i jméno funkce, která převezme řízení její
platnosti. Těchto událostí je celá řada, proto uvedu stručný přehled těch základních
a nejčastěji používaných:
_ onmouseover – Událost nastane ve chvíli, kdy se kurzor myši objeví nad objektem,
není nutné stisknout tlačítko myši.
_ onmouseout – Nastane tehdy, když je kurzor myši mimo objekt; doplňková událost
k onmouseover.
_ onmouseover – Událost nastává, když se kurzor pohybuje. Pokud se zastaví, je
událost ukončena.
_ onclick – Nastává v okamžiku, když uživatel klepne tlačítkem myši nad objektem.
_ ondblclick – Totéž jako onclick, ovšem je nutné provést poklepání, neboli dvakrát
za sebou stisknout tlačítko myši.
_ onload – Událost nastane, když prohlížeč načte veškerá data stránky nebo rámu.
Podle toho, zda se má jít o jeden rám nebo všechny, umísťuje se událost do sekce
BODY nebo FRAMESET.
_ onunload – Událost nastane, když uživatel ukončí prohlížení aktuální stránky
a nechává si načíst stránku jinou. Používá se v sekcích BODY nebo FRAMESET.
_ onfocus – Událost nastává, když je vybrán objekt formuláře – políčko, checkbox,
Část druhá: První kroky do života stránky
53
tlačítko apod. To nastává v okamžiku, kdy je buďto do textového políčka přesunut
kurzor, kdy je klepnuto na tlačítko nebo zatržen checkbox nebo radiobutton.
_ onblur – Přesný opak události onfocus.
_ onkeypress – Událost nastává, když je nad objektem, tedy ve chvíli, když je nad
ním kurzor myši nebo je právě aktivní, stisknuta klávesa. Opět lze použít u for−
mulářových objektů.
_ onsubmit – Událost nastává, když je formulář odeslán ke zpracování na server; je
jasné, že může být proto použita pouze u značky FORM, která definuje formulář.
S touto událostí jste se mohli setkat již u příkladu odesílání ankety e−mailem.
_ onreset – Nastává ve chvíli, kdy je formulář „resetován“, tj. když je stisknuto tlačítko
typu reset (BUTTON TYPE="reset" nebo INPUT TYPE="reset"); opět samoz−
řejmě platí jen pro formulář.
_ onselect – Událost je aktuální, když uživatel vybere text v políčku formuláře
(INPUT, TEXTAREA), je jedno, jestli myší nebo klávesou SHIFT a kurzorovými
klávesami.
_ onchange – Podobně jako onselect, událost je však aktivní ve chvíli, kdy uživatel
ukončí editaci textu v políčku, např. stisknutím klávesy ENTER nebo přesunutím
tabelátorem na další objekt.
POZNÁMKA: Protože někteří uživatelé nemusí používat prohlížeč, který umí skripty, i když dnes
už o tom silně pochybuji, byla vytvořena značka NOSCRIPT, která uzavírá sekvenci značek
pro případ, že daný prohlížeč skriptování nepodporuje:
Čas, kdy se skript provede, nemusí být vázán pouze na umístění daného skriptu ve zdrojovém
kódu HTML. Vezměme třeba příklad ankety, kdy je skript spuštěn až ve chvíli, kdy uživatel
klepne na tlačítko odeslat. Nebo když ve stránce najedete kurzorem myši na obrázek, který
se rozsvítí nebo jinak reaguje a když myší uhnete stranou, opět zhasne (neboli provede se
výměna obrázků, z nichž jeden je normální a druhý jasnější). Jde tedy o provedení skriptu
v případě, že se splní daná podmínka, nastane určitá událost. A právě tyto události jsou tím,
co dělá web dynamickým.
Pro lepší pochopení rozvedu právě příklad rozsvícení a zhasnutí obrázku při přejetí myší:
Nejdříve vytvoříte dva obrázky, jeden bude tmavý a druhý jasný. Ten tmavý se bude jmeno−
vat obrazek.jpg, ten světlý obrazek_cool.jpg. Tmavý bude zobrazen v případě, že myš ne−bude
ukazovat na něj. Druhý, jasný, se zobrazí tehdy, přejede−li přes něj kurzor myši.
Následně vložte tento skript do sekce HEAD, nebude však vadit, umístíte−li jej kamkoliv
jinam (je napsán v JavaScriptu):
A pak už jen vložte místo klasického odkazu na obrázek
vložte řádek tento:
Programování WWW stránek pro úplné začátečníky
52
ONMOUSEOUT="MakeNormal(Obrazek)" SRC="obrazek.jpg" BORDER=0>
Kdykoliv nyní přejdete přes obrázek myší, jako by se rozsvítil. Tohle má význam např.
u odkazů, kdy je takto aktivní obrázek velice efektní. V příkladu jsou těmito událostmi
onmouseover a onmouseout, tedy událost, když myš je umístěna na objektu a když myš
je umístěna mimo. Tyto události pak předají řízení uvedeným skriptům, které jsou definovány
výše. Výhodou tohoto skriptu je navíc to, že obrázky mohou mít jakoukoliv příponu, tedy lze
použít jakéhokoliv obrázkového formátu. Ale to jen tak na okraj.
Pro úplnost uvedu ještě tentýž skript ve VBScriptu, abyste si udělali představu, že to jde i tak:
Myslím, že použití událostních skriptů je jasné. Spustí pouze v případě, že je splněna daná
podmínka. U této podmínky je pak také umístěno i jméno funkce, která převezme řízení její
platnosti. Těchto událostí je celá řada, proto uvedu stručný přehled těch základních
a nejčastěji používaných:
_ onmouseover – Událost nastane ve chvíli, kdy se kurzor myši objeví nad objektem,
není nutné stisknout tlačítko myši.
_ onmouseout – Nastane tehdy, když je kurzor myši mimo objekt; doplňková událost
k onmouseover.
_ onmouseover – Událost nastává, když se kurzor pohybuje. Pokud se zastaví, je
událost ukončena.
_ onclick – Nastává v okamžiku, když uživatel klepne tlačítkem myši nad objektem.
_ ondblclick – Totéž jako onclick, ovšem je nutné provést poklepání, neboli dvakrát
za sebou stisknout tlačítko myši.
_ onload – Událost nastane, když prohlížeč načte veškerá data stránky nebo rámu.
Podle toho, zda se má jít o jeden rám nebo všechny, umísťuje se událost do sekce
BODY nebo FRAMESET.
_ onunload – Událost nastane, když uživatel ukončí prohlížení aktuální stránky
a nechává si načíst stránku jinou. Používá se v sekcích BODY nebo FRAMESET.
_ onfocus – Událost nastává, když je vybrán objekt formuláře – políčko, checkbox,
Část druhá: První kroky do života stránky
53
tlačítko apod. To nastává v okamžiku, kdy je buďto do textového políčka přesunut
kurzor, kdy je klepnuto na tlačítko nebo zatržen checkbox nebo radiobutton.
_ onblur – Přesný opak události onfocus.
_ onkeypress – Událost nastává, když je nad objektem, tedy ve chvíli, když je nad
ním kurzor myši nebo je právě aktivní, stisknuta klávesa. Opět lze použít u for−
mulářových objektů.
_ onsubmit – Událost nastává, když je formulář odeslán ke zpracování na server; je
jasné, že může být proto použita pouze u značky FORM, která definuje formulář.
S touto událostí jste se mohli setkat již u příkladu odesílání ankety e−mailem.
_ onreset – Nastává ve chvíli, kdy je formulář „resetován“, tj. když je stisknuto tlačítko
typu reset (BUTTON TYPE="reset" nebo INPUT TYPE="reset"); opět samoz−
řejmě platí jen pro formulář.
_ onselect – Událost je aktuální, když uživatel vybere text v políčku formuláře
(INPUT, TEXTAREA), je jedno, jestli myší nebo klávesou SHIFT a kurzorovými
klávesami.
_ onchange – Podobně jako onselect, událost je však aktivní ve chvíli, kdy uživatel
ukončí editaci textu v políčku, např. stisknutím klávesy ENTER nebo přesunutím
tabelátorem na další objekt.
POZNÁMKA: Protože někteří uživatelé nemusí používat prohlížeč, který umí skripty, i když dnes
už o tom silně pochybuji, byla vytvořena značka NOSCRIPT, která uzavírá sekvenci značek
pro případ, že daný prohlížeč skriptování nepodporuje:
<< Home