JavaScript – funkce, aneb vyrábíme vlastní příkazy

27. dubna 2000

Vážení čtenáři, vítám vás v osmém díle seriálu o JavaScriptu. Tento díl bude ukazovat, jak si vyrobíme funkce v JavaScriptu, neboli jak naprogramujeme svoje vlastní příkazy.

Představte si takovou jednoduchou věc. Řekněme, že budeme chtít na mnoha místech provádět pořád stejný příkaz. Je jedno, co to bude, může to být třeba zobrazení stejné zprávy. Protože by se nám při psaní pořád stejných kusů JavaScriptu mohly zauzlovat prsty, tvůrci nám nabídli možnost vyrábět si vlastní příkazy. K tomu slouží věc nazvaná funkce.

Pokud si vlastní příkaz, vlastně svojí funkci budete chtít vytvořit, musíte si nejdříve rozmyslet, jak se bude jmenovat. Funkce nemůže mít jen tak ledajaké jméno, na to je trochu náročná. Především jméno funkce musí používat jenom písmena anglické abecedy, a číslice. Takže zapomeňte na různé háčky a čárky. A také nesmí nově vymyšlené jméno už existovat. Pokud se rozhodnete v názvu funkce míchat písmena a číslice, potom jméno nesmí začínat číslicí. Tedy název f12 je správně, ale 1f je špatně.

Začnu tedy příkladem velice jednoduché funkce:

function upozorni()
{
    alert("Velký bratr Tě sleduje");
}

Takto napsaná funkce se jmenuje upozorni. Tím jsem vytvořil nový příkaz, který se jmenuje upozorni, a pod tímto jménem ho také můžeme kdekoli ve své stránce použít. Každá funkce začíná slovem function a za ní následuje název funkce. Za názvem funkce jsem napsal prázdnou dovjici závorek (). To je proto, že každá funkce může mít tzv. parametry, tedy dostávat nějaká vstupní data. Protože nic funkci nepředáváme, použiji právě tuto prázdnou dvojici závorek.

Dále můžeme psát jakékoli příkazy JavaScriptu mezi dvojici složených závorek { a }. V našem případě je použit příkaz alert s nějakým textem. Když zavoláme příkaz upozorni, provede se všechno, co je mezi složenými závorkami { a }. U nás je to tedy otevření okna s textem.

Abych ukázal, kam se píše funkce, i jak se používá, uvádím příklad HTML stránky:

<html>
<head>
<title>Příklad funkce</title>
<script type="text/javascript" language="JavaScript"><!–
fucntion upozorni()
{
    alert("Velký bratr Tě sleduje!");
}
// –>
</head>
<body>
<a href="javascript:upozorni();">Spustit funkci</a>
<form>
<input type="button" value="Spustit funkci" onClick="upozorni();">
</form>
</body>
</html>

A takto by příklad vypadal: Spustit funkci

Jak vidíte, v příkladu můžeme vyvolat funkci upozorni hned na dvou místech, a to pomocí kliknutí na odkaz, a kliknutí na tlačítko. Jak je také patrné, pokud voláte funkci upozorni, musíte jí volat i se závorkami, tedy jako upozorni().

Teď zkusíme něco o trochu lepšího. Funkce, které budu předávat nějaká vstupní data. Například vyrobím funkci, která zobrazí jakýkoli text:

function zobraz(textik)
{
    alert(textik);
}

Jak vidíte, funkci jsem nazval zobraz. Změnou je to, že za jménem zobraz už není jenom prázdná dvojice závorek, ale že uvnitř závorek je slovo textik. Co to znamená? To znamená, že dovnitř funkce půjde nějaká hodnota, a to text, který chci zobrazit. Můžu například funkci zavolat jako zobraz(„Ahoj!“). Potom všechna místa, kde uvnitř funkce použiji slovo textik, budou jakoby přepsána textem Ahoj!. U nás je to jenom v místě, kde je napsáno alert(textik), které se provede jako alert(„Ahoj!“). Pokud použijete jiný text, budou všechna místa jiným textem.

Tento princip je jednoduchý a velice univerzální. Například vám ukáži funkci, která vám sečte dvě čísla, a zobrazí je. Bude se jmenovat scitej:

function scitej(a,b)
{
    alert(a+b);
}

Jak vidíte, funkci budeme předávat dvě hodnoty, a to dvě čísla. První číslo jsem nazval a, druhé číslo dostalo název b. Uvnitř funkce jsem použil příkaz alert, který zobrazí součet prvního plus druhého čísla. To jsem zapsal jako a+b. Když třeba zavolám funkci jako scitej(2,3), budou všechna místa s a nahrazena dvojkou, a všechna místa s b nahrazena trojkou. Takže příkaz alert(a+b) se provede jako alert(2+3). JavaScript pochopí, že 2+3 je 5, a provede příkaz jako alert(5), tedy zobrazí pětku. Lepší ukázku funkce scitej můžete vidět na samostatné stránce.

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. Jan

    Čvn 29, 2010 v 1:48

    Odkaz ani tlačítko ti nefunguje, protože máš špatně napsaný kód.
    místo function máš fucntion a
    chybí uzavření skriptu

    Odpovědět

Napsat komentář

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