TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Události a funkce.
Události
Události reagují na akce konané uživatelem anebo internetovým prohlížečem. Uživatel například vykoná akci tím, že klikne kurzorem myši na určitou část na stránce, což můžeme zaznamenat událostí onClick, a reagovat na tuto akci skriptem. K internetovému prohlížeči se vztahují události jako je například onLoad (vykoná skript po načtení stránky). Podrobnější přehled událostí naleznete v příští lekci. Událost používáme jako atribut elementu, ke kterému se bude vztahovat. Srozumitelnější to bude z příkladu.
Do tagu <a> (odkaz) přidáme atribut onMouseOver, který obsahuje skript pro zavolání okna alert, což zaručí, že po přejetí odkazu kurzorem myši vyskočí právě okno alert s definovaným upozorněním.
<a href="stranka.htm" onMouseOver="alert('Test onMouseOver')">Odkaz</a>Můžete si to sami vyzkoušet → Odkaz.
Cílem druhého příkladu je vytvořit tabulku, ve které se bude měnit pozadí jednotlivých řádků po najetí na ně myší a po opuštění se vrátí do původního stavu. Změnu můžeme definovat přímo v události pomocí objektu style, ale já jsem zvolil příjemnější metodu, kdy si vytvoříte 2 CSS třídy, které se ve vztahu s událostí budou pouze u daného elementu měnit.
<html>
<head>
<title>Titul</title>
<style>
.bila {background-color:"white"}
.zluta {background-color:"yellow"}
</style>
</head>
<body>
<table border="2px">
<tr class="bila" onMouseOver="this.className='zluta'" onMouseOut="this.className='bila'">
<td>buňka</td>
<td>buňka</td>
</tr>
<tr class="bila" onMouseOver="this.className='zluta'" onMouseOut="this.className='bila'">
<td>buňka</td>
<td>buňka</td>
</tr>
</table>
</body>
</html>Poznatky
- V mnoha případech je potřeba používat styly, buď předem definované do tříd, nebo měněné pomocí objektu
style - onmouseover – událost po nejetí kurzoru myši na objekt
- onmouseout – událost po odjetí kurzoru myši z objektu
- this – tento příkaz říká skriptu, že se bude manipulovat právě s elementem, ve kterém je obsažen
- className – definuje změnu použité třídy na element
Funkce
Funkce jsou pro JavaScript velmi důležité a budete se s nimi setkávat pořád. Použít funkci je výhodné v případě, že potřebujete aplikovat určité příkazy na více místech. Například potřebujete zjistit u několika inputů (textová pole), zdali obsahuje každý nějaké určité slovo. Proto si definujete jednu funkci, která se skládá z klíčového slova function, dále názvu funkce, vstupních hodnot a těla funkce, kde je definováno, co bude dělat. V této lekci vám ukážu základní podobu funkce na příkladu, kdy funkce vypíše pokaždé po zavolání stejný text, ve kterém se bude měnit akorát vstupní hodnota.
Do hlavičky stránky zapíšeme:
<script language="JavaScript" type="text/javascript">
function text(jmeno){
document.write("Rád tě tu zase vidím, ");
document.write(jmeno);
}
</script>A do těla stránky následující:
<script language="JavaScript" type="text/javascript">
text("Pepo.");
text("Mařenko.");
text("Frantíku.")
</script>Výsledkem je:
Rád tě tu zase vidím, Pepo. Rád tě tu zase vidím, Mařenko. Rád tě tu zase vidím, Frantíku.
Poznatky
- function – klíčové slovo, říká, že se jedná o funkci
- text – název funkce
- (jmeno) – v závorce za názvem funkce jsou ony vstupní údaje (nemusí tam být, pokud funkce nepracuje s nějakými externími daty)
- text("Pepo."); – vlastní volání funkce, prvně se píše název funkce, kterou voláme, a do závorky vstupní údaje pro tuto volanou funkci
Úkol
Napište mi kód, kde bude výsledkem: "Sekačka značky Mountfield má vysoký počet otáček. Sekačka značky neznámé má vysoký počet otáček." Slova 'Mountfield' a 'neznámé' budou hodnotami funkce (proměnnými), ostatní text bude funkcí. Pod to udělejte odkaz, který bude házet alert po odjetí kurzoru myši.
