- Funkce pokročileji
- Přehled událostí
Funkce
V předchozí lekci jsem vám lehce nastínil jak se dá použít v JavaScriptu funkce. V tomto pokračování zabrousíme hlouběji do problematiky funkcí. Funkce je zpravidla sada několika po sobě jdoucích příkazů (pokud by byl jeden, nemá téměř smysl v praxi takovou funkci vytvářet), které se postupně vykonají při volání funkce. Funkce může dostal, ale také nemusí nějaké vstupní hodnoty. Tyto hodnoty označujeme jako parametry funkce a jedná se o hodnoty z "vnějšího prostředí", se kterými se potom pracuje uvnitř funkce. Naše příkladová funkce z minulé lekce obsahovala právě jeden parametr. V dalším příkladu je ukázka funkce o dvou parametrech. Fungovat by to mělo následovně - po stisku tlačítka se do divu s identifikátorem, který předáme jako první parametr, zobrazí obrázek, jehož pozici předáme jako druhý parametr.
<head>
<script language="JavaScript" type="text/javascript">
function zobrazObrazek(divid,obr) {
var div = document.getElementById(divid);
div.innerHTML = "<img src=\"" + obr + "\" alt=\"\" />";
}
</script>
</head>
<body>
<input type="button" onClick="zobrazObrazek('div1','obr/obrazek.png');" value="zobrazit" />
<div id="div1"></div>
</body>
Popíšem si tedy průběh funkce. Po její inicializaci se do proměnné div uloží "cesta" k obsahu divu s identifkátorem, který byl zadán jako parametr při volání funkce. Klíčové slovo document značí objekt celého dokumentu, ve kterém skript pracuje, ale o objektech si řekneme více až v pozdějších lekcích. Dále následuje úsek getElementById() a pokud máte alespon základní znalost angličtiny, zajisté víte co tato funkce (metoda objektu document) bude dělat - najde si v dokumentu element s identifikátorem, který byl předán jako parametr při volání funkce (v našem případě "div1"). Tímto elemntem nemusí být pouze div, ale jakýkoliv tag s přiřazeným identifikátorem. Na druhém řádku přidáváme vlastnost innerHTML, která říká, že se bude pracovat s obsahem (doslovný překlad - vnitřní HTML). V druhém řádku funkce dále už jen určujeme, jakou hodnotu element dostane (v tomto příkladu obrázek, přičemž jeho cestu vkládáme jako druhý parametr funkce).
Druhý příklad
Do hlavičky zapisujeme:
<script language="JavaScript" type="text/javascript">
function zmena() {
document.all.text.style.color="red";
}
</script>
A do těla dokumentu:
<span id="text">Text, který se po stisku tlačítka změní.</span>
<input type="button" onclick="zmena();" value="Změň barvu">
Račte si sami zkusit i druhý příklad:
Text, kterému se změní barva.Vysvětlení nejasností:
- input - tagem input zahajujeme zápis každého tlačítka, kolonky atd. Značí, že daný objekt vkládáme do stránky.
- button - říká, že chceme zobrazit tlačítko
- value - zbrazuje na tlačítku text, v našem případě "Stiskni" a "Změň barvu"
Přehled událostí
| Událost | Stane se při: |
| onmouseover | najetí kurzorem na objekt |
| onmouseout | odjetí kurzoru z objektu |
| onclick | kliknutí na tlačítko myši |
| ondblclick | dvojitém kliknutí na tlačítko myši |
| onmousedown | stisku tlačítka myši |
| onmouseup | uvolnění tlačítka myši |
| onmousedrag | pohybu myší se stisknutým tlačítkem |
| onmousewheel | rolování kolečkem |
| onmousemove | pohybu myší |
| onkeydown | stisku libovolné klávesy |
| onkeyup | uvlonění libovolné klávesy |
| onback | stisknutí tlačítka zpět v prohlížeči |
| onfoward | stisnutí tlačítka vpřed v prohlížeči |
| onload | nahrávání dokumentu |
| onunload | zavření dokumentu |
| onmove | pohybu s oknem prohlížeče |
Úkol
Vytvořte stránku, kde bude nějaký text a vedle něj tlačítko. Když na tlačítko zmáčknete jednou, musí se barva textu změnit na zelenou, když zmáčknete na tlačítko dvakrát, musí se barva textu změnit na žlutou.