Funkce v Javascriptu

pro začátečníky

Kdo zná funkce z jiných programovacích jazyků, ten nebude příliš zaskočen jejich zápisem v JavaScriptu. Pokusím se to tedy vysvětlit zejména těm, kteří funkce nikdy nepoužívali. 

Proč vznikly funkce: v praxi se velmi často opakují stejné sekvence příkazů. Funkce umožňují zabalit takovou sekvenci a pojmenovat ji. Potom se ta dlouhá sekvence nemusí vypisovat, ale stačí použít jméno té funkce. 

Šílený příklad

Představte si, že píšete nějaké moderní licenční ujednání. Tam se každou chvíli malým písmem opakuje ujištění jako že výrobce za nic neručí:

<p><small><small>Výrobce neručí za škody, vzniklé použitím výrobku. Výrobek smí instalovat pouze osoba pověřená ve smyslu zákona 2/1895 sb. Při neodborné instalaci výrobku nepřebírá výrobce odpovědnost vůbec za nic.</small></small>

Tento odstavec by se dal vkládat Javascriptem. (V praxi by se to asi JavaScriptem nedělalo, ale dejme tomu.) Skript pro vložení kódu do textu by vypadal nějak takto:

<script>
document.write("<p><small><small>Výrobce neručí ... atd.");
</script>

Protože se to v textu často opakuje, takže aby se to ve skriptu nemuselo vypisovat pokaždé, je dobré vkládat to funkcí. Nejprve se nadeklaruje funkce:

<script>
function nerucime() {
document.write("<p><small><small>Výrobce neručí ... atd.");
} 
</script>

Potom stačí kdekoliv v textu napsat:

<script>
nerucime();
</script>

a text poznámky o neručení se na to místo vloží sám.

Syntaxe deklarace

Deklarace funkce začíná v JavaScriptu vyhrazeným slovem function, za nímž následuje jméno funkce (v tomto příkladu nerucime). Jméno funkce je následováno dvojicí závorek, v nichž mohou být parametry. V prvním příkladu jsem žádné parametry nepoužil, přesto závorky nesmím vynechat. Dále následuje tělo funkce, vlastní sekvence příkazů, která je uzavřena do složených závorek. (Složené závorky se v JavaScriptu používají k vymezování podprogramů a logických celků programu.) Symbolická rekapitulace: 

function jméno(parametr, parametr2) { příkaz; příkaz };

Parametry

Hlavní význam funkcí je v tom, že dokáží zpracovávat parametry a reagovat na jejich hodnoty. 

Dejme tomu, že se v upozornění vždy musí napsat jméno výrobku, přičemž jména výrobků se mění. Do funkce přidám parametr vyrobek:

function nerucime(vyrobek) { 
document.write("<p><small><small>Výrobce neručí za škody, vzniklé použitím výrobku ");
document.write(vyrobek);
document.write(". Výrobek ");
document.write(vyrobek);
document.write(" smí instalovat pouze osoba pověřená ve smyslu zákona 2/1895 sb. Při neodborné instalaci výrobku ");
document.write(vyrobek);
document.write(" nepřebírá výrobce odpovědnost vůbec za nic.</small></small>");
};

Do textu se na místo upozornění umístí:

 <script>
nerucime("Parní sekačka ABX");
</script>

Funguje to tak, že jakmile prohlížeč narazí na funkci "nerucime", tak se podívá na její deklaraci. Zjistí, že funkce má parametr, a tak si do proměnné vyrobek načte hodnotu "parní sekačka trávy ABX" (hodnota je v uvozovkách, protože je textová). Výhoda funkce je ta, že se dá volat mnohokrát s různými výrobky.

 <script>
nerucime("Automatické kleště typu B s vysílačkou");
</script>

Výsledná hodnota

Některé funkce vracejí hodnotu. Vysvětlím na příkladu osmé mocniny. Dejme tomu, že potřebuji často počítat osmou mocninu nějakého čísla, takže si na to udělám funkci.

function osmaMocnina(zaklad) {
var x = zaklad * zaklad * zaklad * zaklad * zaklad * zaklad * zaklad * zaklad;
return x;
}

Funkce by šla zapsat úspornějším kódem, ale to teď nevadí. Důležité je tam to return x. Funkce vrátí hodnotu, která je uvedená za tím return. Použití pak vypadá třeba nějak takhle:

var cislo = 12;
document.write("Osmá mocnina čísla " + cislo + " je rovna ");
document.write( osmaMocnina(cislo) );

Funkčnost funkcí si můžete ověřit na příkladu.