7. díl - Funkce v JavaScriptu

JavaScript Základní konstrukce Funkce v JavaScriptu

V minulém dílu jsme se naučili používat pole v JavaScriptu. Dnešní díl je věnován velmi důležitému tématu, kterým je využívání funkcí. Díky funkcím budeme příště schopni reagovat na různé události jako je např. kliknutí na tlačítko a naprogramujeme tak první opravdovou webovou aplikaci.

Tvorba funkcí

Nejprve si nějak jednoduše vysvětleme, co je to funkce. Jedná se o blok kódu, který jednou napíšeme a potom ho můžeme libovolně volat bez toho, abychom ho psali znovu a opakovali se. Funkci deklarujeme pomocí klíčového slova function a obsahuje blok kódu ve složených závorkách. Funkce, která vypíše do dokumentu "Ahoj, vřele tě tu vítám!", by vypadala následovně:

function pozdrav()
{
        document.write("Ahoj, vřele tě tu vítám!");
}

Funkci nyní musíme zavolat. Můžeme to samozřejmě udělat až potom, co ji deklarujeme, jinak by ji prohlížeč neznal:

function pozdrav()
{
        document.write("Ahoj, vřele tě tu vítám!");
}

pozdrav(); // zavolání funkce

Výsledek:

Funkce v JavaScriptu

Funkce s parametry

Funkce může mít také libovolný počet vstupních parametrů, které píšeme do závorky v její definici a podle nich ovlivňujeme její chování. Mějte situaci, kdy chceme pozdravit našeho návštěvníka podle jména. Rozšíříme tedy stávající funkci o parametr jmeno a ten potom přidáme s konkrétní hodnotou do volání funkce:

function pozdrav(jmeno)
{
        document.write("Ahoj, vřele tě tu vítám " + jmeno + "!<br />");
}

pozdrav("Karle"); // zavolání funkce

Kdybychom nyní chtěli pozdravit několik lidí, nemusíme otrocky psát znovu a znovu document.write("A­hoj, vřele...., stačí nám pouze vícekrát zavolat naší funkci:

pozdrav("Karle");
pozdrav("Davide");
pozdrav("Mařenko");

Výsledek:

Parametry funkce v JavaScriptu

Návratová hodnota funkce

Funkce může dále vracet nějakou hodnotu. V našem případě bychom nemuseli do dokumentu rovnou zapisovat (například proto, že budeme chtít s textem ještě dále pracovat a ne ho rovnou vypsat). Slouží k tomu příkaz return:

function pozdrav(jmeno)
{
        return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

var text = pozdrav("Karle");
document.write(text);

Vzpomeňme si na minulé příklady, které vypisovaly den v týdnu a kdo má svátek. Můžete si je zkusit přepsat tak, abyste volali funkci. V rámci návrhu by všechen kód měl být rozdělen do funkcí (nebo do objektů, viz další sekce seriálu) a to zejména kvůli přehlednosti. My jsme to ze začátku díky jednoduchost zanedbali, nyní to prosím berte na vědomí :)

Výhoda funkcí je tedy v přehlednosti a úspornosti (můžeme napsat nějakou věc jednou a volat ji třeba stokrát na různých místech skriptu). Když se rozhodneme funkci změnit, provedeme změnu jen na jednom místě a tato změna se projeví všude, což značně snižuje riziko chyb. V příkladě, kde zdravíme Karla, Davida a Mařenku nám stačí změnit text pozdravu ve funkci a změní se ve všech třech voláních. Nemít kód ve funkci, museli bychom přepisovat 3 věty a v nějaké bychom mohli udělat chybu.

Uložení funkce do proměnné

Posuňme se dále. JavaScript se liší od jiných jazyků tím, jak pracuje s funkcemi. Funkce zde umí ještě více, než jsme si ukázali. Pokud si vzpomínáme, v úvodním tutoriálu jsem mluvil o tzv. funkcionálním paradigmatu. Jedná se o specifický styl programování a myšlení pomocí funkcí. Funkci můžeme totiž uložit do běžné proměnné a z této proměnné ji později volat.

function pozdrav(jmeno)
{
        return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

var promenna_s_funkci = pozdrav; // nyní máme v proměnné uloženou funkci pozdrav
var text = promenna_s_funkci("Karle"); // zavoláme funkci z proměnné
document.write(text);

Ve skutečnosti jsou všechny funkce v JavaScriptu vnitřně proměnné.

Anonymní funkce

Funkci můžeme definovat přímo v přiřazení do proměnné, hovoříme potom o tzv. anonymní funkci:

var promenna_s_funkci = function(jmeno)
{
        return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

var text = promenna_s_funkci("Karle");
document.write(text);

Možná vás napadlo, zda jde předat funkci, uloženou v proměnné, jako parametr jiné funkci. Ano, jde! A to je přesně to, kam jsme směřovali. Takovéto předané funkci se říká callback a stojí na něm v podstatě celý model událostí JavaScriptu. Vyzkoušíme si to na jednoduchém příkladu:

var promenna_s_funkci = function(jmeno)
{
        document.write("Ahoj, vřele tě tu vítám " + jmeno + "!");
}

function zavolej_funkci(funkce, jmeno)
{
        document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné.");
        document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr.");
        funkce(jmeno);
}

zavolej_funkci(promenna_s_funkci, "Karle");

Výsledek:

Callback v JavaScriptu

Udělali jsme si funkci k volání jiné funkce. Ta jako parametry bere funkci, kterou budeme volat a dále parametr jméno, který volané funkci předáme. Kdybychom nyní chtěli zdravit jinak, mohli bychom si udělat další proměnnou s jinou funkcí, např. promenna_s_funkci2 a tu dát volací funkci do parametru místo té předchozí. Zejména v jQuery (viz další sekce) budeme událostem takto předávat funkce, které se mají vykonat, když událost nastane.

K funkcím bych ještě dodal, že pokud chceme více vstupních parametrů, oddělíme je čárkami. Při volání funkce dokonce můžeme některé parametry vynechat a překladač nám nevynadá, jen uvnitř funkce budou mít potom hodnotu undefined.

function f(a, b)
{
        document.write("a=" + a);
        document.write("b=" + b);
}

f(5);
f(1, 2);

Pokud bychom chtěli dosadit nějakou výchozí hodnotu parametru v případě, že není zadán, stačí si opodmínkovat jeho hodnotu pro undefined a dosadit hodnotu výchozí. Jak vidíte, používání funkcí má v JavaScriptu obrovské možnosti. Příště si ukážeme jak pomocí nich řešit události a konečně vytvoříme nějakou interaktivnější aplikaci :)


 

Stáhnout

Staženo 129x (2.29 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (9 hlasů) :
4.888894.888894.888894.888894.88889


 


Miniatura
Předchozí článek
Cvičení k 6. lekci JavaScriptu
Miniatura
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Cvičení k 7. lekci JavaScriptu

 

 

Komentáře
Zobrazit starší komentáře (16)

Avatar
Pluhtík
Člen
Avatar
Pluhtík:

Chápu všechno, co jsi napsal. Přesto pořád nevím, k čemu slouží ten řádek v mém kódu.

funkce(dername);

Jediné, co mě napadá je, že nějakým způsobem v podstatě přemisťuje parametr dername, který je obsažen v obou mých funkcích, do té druhé, aby se jméno nemuselo psát ještě do dalších kulatých závorek.
Druhý tip je, že funkce vypíšu funkci (tím myslím parametr nazvaný "funkce"), ke kterému přiřadíme jen jméno.

 
Odpovědět 15. července 11:59
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Pluhtík
Taskkill:

Víš o tom, že v JS je možný vzít funkci a poslat jí do jiné funkce jako parametr?

Považ něco jako:

function pozdrav(jmenoCloveka) {
        alert("nazdar " + jmenoCloveka);
}

function sezerFunkciAZavolejJi(funkceNaZavolani, dataNaPoslani) {
        funkceNaZavolani(dataNaPoslani);
}

// a ted se to cele spusti
sezerFunkciAZavolejJi(pozdrav, "Karle!");

O co jde? Pošleš funkci pozdrav nějaké jiné funkci, ta jí obdrží a obdrží také data, no a pak už jen připojením kulatých závorek onu funkci zavoláš. Tohle je velká síla JS, stojí to za to pořádně probádat a porozumět tomu.

Kdyžtak se ptej.

 
Odpovědět  +1 15. července 13:14
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Taskkill
Pluhtík:

Děkuji :) nevěděl jsem to, ale je to logické, takže nemůžu říct, že by mě to překvapilo. Ze všech odpovědí mi ta tvá zatím pomohla nejvíce.
Takže

funkceNaZavolani(dataNaPoslani);

znamená, že funkceNaZavolani, tedy funkce, kterou si "zavoláš", obsahuje parametr dataNaPoslani. V tomto případě funkce pozdrav obsahuje parametr jmenoCloveka, které, abys nemusel vypisovat v následném spuštění (viz níže) dvakrát, v podstatě přeměníš na dataNaPoslani. Kdyby tam ten řádek (viz výše nebyl), tak poslední řádek by musel být takto:

sezerFunkciAZavolejJi(pozdrav("Karle!"), "Karle!");

Mám pravdu?

Odpověď na mou otázku, proč je nezbytné mít napsané v kódu také

funkce(dername);

je ta, že kdybych to neměl, tak by celá má funkce musela vypadat takto?

var promena_s_funkci = function gutentag(dername)
{
  document.write("Vítám Tě na svém JavaScript webu, " + dername +"! <br />");
}

function zavolej_funkci(funkce, dername)
{
document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné. <br />");
document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr. <br />");
}
zavolej_funkci(promena_s_funkci("Pluhtíku!"), "Pluhtíku");

edit. vyzkošoušeno, funkce, kterou jsem napsal úplně dole tady funguje, ovšem s tím rozdílem, že výsledek je tento:
Vítám Tě na svém JavaScript webu, Pluhtíku!!
Jsem funkce a volám funkci, která mi přišla do parametru v proměnné.
Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr.
Tzn., že to, co měl být poslední řádek je první.

Editováno 15. července 13:41
 
Odpovědět 15. července 13:39
Avatar
Odpovídá na Pluhtík
Libor Šimo (libcosenior):

S tym rozdielom, ze druhy vstupny parameter je zbytocny ako vo funkcii zavolej_funkci(), tak aj pri volani tej funkcie. Ziadna cast kodu ho nepouziva.

Odpovědět  +1 16. července 8:20
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Jirka
Člen
Avatar
Jirka:

Jak udělám podmínku, když není zadána "undefined"?

if (b == undefined)
       {
               document.write("1");
       }

toto mi bohužel nefunguje.

Díky

J

 
Odpovědět 10. listopadu 15:30
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jirka
Jurajs:

takhle? Nevim jak to myslíš

var b;
if (b == undefined)
       {
               document.write(b);
       }
Editováno 12. listopadu 18:36
 
Odpovědět  +1 12. listopadu 18:34
Avatar
Jirka
Člen
Avatar
Odpovídá na Jurajs
Jirka:

spíš se mi jednalo o ten případ ve cvičení:

function f(a, b)
{
        document.write("a=" + a);
        document.write("b=" + b);
}

f(5);
f(1, 2);

a jak udělat podmínku, když b není definováno, aby byl defaultně nastaveno např číslo "1"?

Děkuji

J

 
Odpovědět 14. listopadu 9:59
Avatar
Odpovídá na Jirka
Libor Šimo (libcosenior):

Presne ako písal Jurajs

function f(a, b) {
    if (b == undefined)
       b = 1;
    document.write("a=" + a + "<br>");
    document.write("b=" + b + "<br>");
}
Odpovědět  +1 14. listopadu 13:20
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Matej
Člen
Avatar
Odpovídá na Jirka
Matej:

Od ES6 js podporuje defaultne argumenty e.g

function f(a, b = 1 ) {
    document.write("a=" + a + "<br>");
    document.write("b=" + b + "<br>");
}
f(5)
 
Odpovědět  +1 14. listopadu 14:44
Avatar
Jirka
Člen
Avatar
Jirka:

Děkuji za vyčerpávající odpovědi :) Jako rád bych někdo js ovládal, avšak čím dále se dostávám (momentálně lekce 10), tím více mne to utvrzuje v tom, že na to nemám :) Každopádně ještě jednou díky :)

 
Odpovědět 15. listopadu 9:51
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 26. Zobrazit vše