Slabikář JavaScriptu – funkce a události

Funkce jsou základním stavebním kamenem snad každého programovacího jazyka. Programové kódy JavaScriptu se z větší části skládají ze samostatných funkcí, jejichž spouštění je často vázáno na výskyt událostí v HTML dokumentu. Tímto způsobem lze ošetřit, co se má stát, když uživatel přejede myší nad obrázkem, stiskne klávesu, zavře okno prohlížeče a mnoho dalších.

Funkcí rozumíme uzavřený blok programového kódu, který je spuštěn ve chvíli, kdy je zavoláno jméno funkce. Obecná syntaxe deklarující funkci je následující:

Za názvem funkce následuje nepovinný seznam argumentů (nebo též parametrů) předávaných do funkce. Argumenty musejí být uzavřeny do kulatých závorek a tyto závorky musejí být uvedeny i v případě, že seznam argumentů je prázdný. Tělo funkce (blok příkazů) musí být uzavřeno do složených závorek.

Zastavme se na chvíli ještě u argumentů a nad tím, jakým způsobem jsou do funkce předávány. Pouze čísla, řetězce a hodnoty typu Boolean jsou do funkcí předávány hodnotou. Objekty a pole se v JavaScriptu předávají odkazem. Co to znamená?

Vezměme, že číselná hodnota uložená v proměnné alfa je předána do funkce. Pro předávanou hodnotu se vytvoří nové místo v paměti počítače a manipulace s touto hodnotou v těle funkce nijak neovlivní hodnotu proměnné alfa.

Naopak při předávání odkazem se v paměti vytvoří pouze odkaz na předávaný objekt, ale skutečné úložiště dat zůstává stejné. Při manipulaci s objektem nebo polem v těle funkce se veškeré úpravy projeví i v hodnotách původních objektů. Nejlépe to ukážeme na příkladu:

Jednoduchým příkladem funkce připojené k události může být tzv. maskování kláves. Mějme textové pole, které je určeno pouze pro vkládání čísel a žádných jiných znaků. K události onKeyPress (při stisknutí klávesy) tohoto pole přiřadíme funkci, která kontroluje kódy vkládaných znaků. Pokud tento kód neodpovídá číslici 0 až 9, bude událost stisknutí klávesy zrušena a znak tudíž nebude možné vložit. Jedná se o krátký, avšak velmi užitečný příklad:

Funkce Maska je zavolána pouze v případě, že kurzor je umístěn v textovém poli a uživatel stisknul klávesu. Je to dáno tím, že událost onKeyPress je uvedena přímo v tagu INPUT.

Následující příklad ukáže, jak je možné zachytit pokus o vyvolání kontextového menu, které se zobrazí po klepnutí pravým tlačítkem myši na plochu dokumentu. Namísto menu se zobrazí pouze hlášení, že je zakázáno – událost vyvolání kontextového menu je opět zrušena ve funkci Maska.

Vzhledem k tomu, že ošetření události onContextMenu je definováno v tagu BODY, vztahuje se na všechny pokusy vyvolat kontextové menu kdekoli na dokumentu – to znamená i nad ovládacími prvky, které mohou být v dokumentu umístěny. Pokud byste chtěli zakázat kontextové menu jen nad některým objektem (tlačítkem, obrázkem apod.), museli byste ošetřovat událost onContextMenu přímo v příslušném tagu.

Dalším příkladem častého využití událostí může být manipulace s objektem ve chvíli, kdy na něj uživatel ukáže myší. Jedním z nejčastějších efektů je zvýraznění hypertextového odkazu ať již změnou barvy, velikosti, podtržení apod. V našem ilustračním příkladu se hypertextový odkaz „bolduje“, tj. zobrazí se tučným písmem po dobu, kdy je nad ním umístěn kurzor:

V příkladu jsou použity události onMouseOver (při najetí kurzoru nad objekt) a onMouseOut (když kurzor objekt opustí). V obou případech se vždy zavolá funkce Maska, pokaždé však s jinými parametry. Jako první parametr je použito klíčové slovo this. Toto klíčové slovo vždy identifikuje objekt, v rámci kterého je použito. Jako první parametr je do funkce Maska tedy vždy předán objekt, nad kterým jedna z obou událostí vznikla. Druhým argumentem je řetězcová hodnota, která formátuje tloušťku písma textového objektu.

Všimněte si, že hypertextový odkaz (tj. objekt) je do funkce předáván odkazem – manipulace s jeho stylovými vlastnostmi se projeví na jeho vzhledu přesto, že je definován vně funkce Maska. Naopak druhý argument – řetězec – je do funkce předáván hodnotou.

Pozn. aut.: V článku jsou použity některé příklady z knihy JavaScript – praktické příklady, která vyšla v nakladatelství Grada. Příklady jsou převzaty a pozměněny se souhlasem nakladatele.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.