Lekce 7 - Funkce v JavaScriptu

Vydávání, hosting a aktualizace umožňují jeho sponzoři.
V minulé lekci, Pole v JavaScriptu, jsme se naučili používat pole. Dnešní JavaScript tutoriá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 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("Ahoj, vřele...");
, stačí nám
pouze vícekrát zavolat naší funkci:
pozdrav("Karle"); pozdrav("Davide"); pozdrav("Mařenko");
Výsledek:
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 + "!"; } let 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ší navazující kurz) 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í lekci do JavaScriptu jsme mluvili 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 + "!"; } let promenna_s_funkci = pozdrav; // nyní máme v proměnné uloženou funkci pozdrav let 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:
let promenna_s_funkci = function(jmeno) { return "Ahoj, vřele tě tu vítám " + jmeno + "!"; } let 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:
let 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é.<br />"); document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr.<br />"); funkce(jmeno); } zavolej_funkci(promenna_s_funkci, "Karle");
Výsledek:
Udělali jsme si funkci k volání jiné funkce. Ta jako parametry bere
funkci, kterou budeme volat a dále parametr jmeno
, 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 knihovně jQuery (viz další kurzy) 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. V příští lekci, Základy práce s DOM a události v JavaScriptu, si ukážeme jak
pomocí nich řešit události a konečně vytvoříme nějakou
interaktivnější aplikaci
Stáhnout
Staženo 275x (2.58 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript
Komentáře


Zobrazeno 42 zpráv z 42.