Slabikář JavaScriptu – funkce a události

10. dubna 2002

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í:

function název([argument1 [, argument2 [, …argumentn]]])
{
    blok příkazů
}

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:

<script language=“JavaScript“>
function Pokusna (pole,cislo)
{
  cislo = cislo + 5;
  for (i = 0; i < 10; i++)
  {
    pole[i] = pole[i]+5;
  }
}
  var my_array = new Array();
  for (i = 0; i < 10; i++)
  {
    my_array[i] = i;
  }
  var cis=10;
  Pokusna (my_array,cis);
  alert(my_array[0]); // zobrazí se hodnota 5
  alert(cis); // zobrazí se hodnota 10
</script>

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:

<html>
<head>
<script language=“JavaScript“>
function Maska(a)
{
  if ((a < 48) || (a > 57)) event.returnValue = false;
}
</script>
</head>
<body>
<input type=“text“ onKeyPress=“Maska(event.keyCode)“>
</body>
</html>

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.

<html>
<head>
<script language=“JavaScript“>
function Maska()
{
  alert(„Kontextové menu není povoleno“);
  event.returnValue = false;
}
</script>
</head>
<body onContextMenu=“Maska()“>
</body>
</html>

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:

<html>
<head>
<script language=“JavaScript“>
function Maska(a,b){
  a.style.fontWeight=b;
}
</script>
</head>
<a href=“http://interval.cz“ onMouseOver=Maska(this,“bold“)
onMouseOut=Maska(this,“normal“)>Interval.cz</a>
<br>
<a href=“http://grada.cz“ onMouseOver=Maska(this,“bold“)
onMouseOut=Maska(this,“normal“)>Grada.cz</a>
</html>

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.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. Tomas Bilek

    Úno 19, 2015 v 11:17

    Tvrzení, že objekty a pole se předávají odkazem asi nebude úplně pravdivé.

    function test(o) {
    o = { name: „new“ };
    }
    var obj = { name: „old“ };
    test(obj);
    console.log(obj.name); // writes old

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *