13. března 2004
.:Přidat k oblíbeným
.:Napsat e-mail





Lekce
Příklady

Můžeme začít?

Podle mě je právě čas přejít k první opravdové lekci, která se vás pokusí uvrhnout do tajů DHTML. Řekneme si něco o events, nebo pokud chcete, o událostech. Teď zrovna nemyslím večerní zprávy, ale události vašeho prohlížeče. I když o tom možná ani nevíte, při prohlížení internetových stránek jste pořád sledováni. Kamkoli pohnete myší, na cokoli kliknete, vše pečlivě monitoruje váš němý průvodce internetem, váš prohlížeč, a ochotně předává tyto informace zdrojovému kódu, který případně reaguje podle svých instrukcí. Proto tedy, Víme o vás!

Tak co to teda ty události jsou?

Zatím jste se možná nedozvěděli nic moc nového, proto se pokusím už bez zbytečné omáčky o seriózní výklad. Každý prohlížeč má předdefinovány určité události, které umí rozpoznat. Na tomto místě bych rád zdůraznil, že ne všechny příklady zde uvedené musí bezpodmínečně fungovat ve všech prohlížečích. Některé browsery, zejména ty starší, nepodporují všechny události u všech objektů, některé mají skriptování zakázané úplně. Nikdy se prostě nezavděčíte každému. Po malé odbočce se vraťme k událostem. Nejlépe asi pochopíte co to je z příkladů z praxe: pokud najedete na obrázek, je to událost - tomu věřte; pokud kliknete, stala se událost; pokud se načte stránka - co byste řekli... ano, další událost atd. atd. Seznam těch základních událostí najdete o kousek níže.

Malá vsuvka aneb objekt

A chybička se vloudila, já se tu směle oháním objekty na stránce a zatím jsem vůbec neřekl, co to vlastně objekt je. Už mi z těch definic jde hlava kolem, ale budiž. Dokument HTML se skládá z různých prvků = elementů (např. tabulka <table>, odkaz <a>, obrázek <img>,...).Tyhle elementy jsou pro nás od teď objekty. Přítomnost některých objektů si na stránce možná ani neuvědomujete (např. tělo celého dokumentu - objekt body). Existuje cosi, jako objektový model, najdete ho třeba na stránkách hlavní standardizační organizace. Je to prostě určitá normovaná hierarchie všech objektů. K většině objektů totiž existuje i objekt jim nadřazený a jim podřazený. Jen pro ilustraci: objekt tabulka - <table> má několik synů (podřazených objektů), třeba <tr> - řádek tabulky nebo <td> - buňka tabulky. Rodičovským objektem všech objektů, které na stránce vidíte (formulářů, obrázků, odkazů atd.), je objekt body - <body>. Tato hierarchie je pevně daná a sepsaná právě v objektovém modelu. Určitě se na něj aspoň zběžně mrkněte, protože celé DHTML je na objektech postaveno.

A co praxe?

Nevím, jak dalece se mi podařilo vyložit vám problematiku objektů a událostí, ale určitě všechno lépe pochopíte z konkrétních příkladů. Dovolím si teď uvést zde malou tabulku alespoň základních událostí s jejich popisem:

onClick Vyvolává se kliknutím na element (reaguje pouze na levé tlačítko myši).
onDblClick Vyvolává se dvojitým kliknutím na element (reaguje pouze na levé tlačítko myši).
onMouseOver Vyvolává se přemístěním ukazatele myši nad element.
onMouseDown Vyvolává se stisknutím tlačítka myši (reaguje na levé i pravé tlačítko myši).
onMouseUp Vyvolává se uvolněním tlačítka myši (reaguje na levé i pravé tlačítko myši).
onMouseMove Vyvolává se pohybem ukazatele myši nad elementem.
onMouseOut Vyvolává se po odsunutí ukazatele myši z elementu.
onKeyPress Vyvolává se stiskem a následným uvolněním klávesy (reaguje na většinu kláves až na jisté výjimky, Shift, Ctrl, Alt, funkční klávesy atd.).
onKeyDown Vyvolává se pouze stiskem klávesy (tentokrát už reaguje na všechny klávesy, i na ty funkční).
onKeyUp Vyvolává se pouze uvolněním klávesy (a opět reaguje na všechny klávesy).
onLoad Vyvolává se po dokončení nahrávání objektu.
onHelp Vyvolává se po stisknutí kouzelné klávesy F1. Kdo si však myslí, že dokáže zastavit neoblomnou nápovědu, toho musím vyvést z omylu. Nápověda vyskočí hned po provedení vašeho scriptu.

Konečně použití…

Jak se vkládá událost se skriptem do dokumentu HTML je už trochu zřejmé z první lekce. Rozebereme si tuto problematiku podrobněji na konkrétním příkladu (bože, už sem jak učebnice). Je to celkem jedno, ale já jsem zvolil tag vkládající obrázek s názvem silly.gif, po přejetí myší nad obrázkem se vás pokusí vyděsit:

silly.gif

<img src="obrazky/silly.gif" onMouseOver="alert('Bafffff!!!!')" alt="silly.gif" width=36>

Čili bez okolků mezi jednotlivé atributy objektu (src, width, href, bgcolor atd.), vepíšete formuli:
název_události="skript"

skript - to znamená buď název funkce, kterou jste si předem někde deklarovali, nebo rovnou vypíšete příkaz (když je krátký). V našem případě jsme rovnou vložili příkaz (použili jsme tzv. vložený obslužný skript). Ať použijete název funkce, nebo obslužný skript, musíte je vždy napsat do uvozovek ("").

Pokud jste pozorní, jistě jste si všimli, že náš příkaz alert obsahuje v závorkách ještě apostrofy (''). Dávejte si pozor, abyste v příkazech použili vždy jiné uvozovky/apostrofy než ty, jimiž ohraničujete příkaz. Jinak se z toho váš prohlížeč pravděpodobně psychicky zhroutí a možná začne pokřikovat něco o chybných syntaxích. Vysvětlení je jednoduché. Mohli byste to totiž napsat třeba takhle:

<img src="obrazky/silly.gif" onMouseOver="alert("Bafffff!!!!")" alt="silly.gif" width=36>

Obrázek by se možná zobrazil v pořádku, ale při jeho přejetí myší byste pravděpodobně obdrželi onu sprostou hlášku o syntaxích. Prohlížeč si totiž myslí, že příkaz, který má provést a který je ohraničen uvozovkami ("") je pouze - alert( - a ten on přece vůbec nezná. Krom toho mu zbývá ještě jakési Bafffff!!!!")". No uznejte, to už je opravdu nad jeho síly. U mě je problém s uvozovkami jeden z nejčastějších, proto se tady o něm tolik rozepisuji.

Závěr

Tak zase, pokud máte nějaký dotaz nebo jakoukoli připomínku, napište nám! O událostech se toho dá říci mnohem víc, ale to si nechám až na později. Základ jste se snad trochu naučili a v další lekci se už můžeme společně vrhnout na nějaké to skriptování. Do té doby vám přeji hodně zábavy a štěstí při vašich pokusech s DHTML.

Mort




<< Předchozí lekce


Další lekce >>
_
^
Back to top

Valid XHTML 1.0!   Valid CSS!
TOPlist