Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
JavaScript týden

Lekce 7 - Funkce v JavaScriptu

V předešlém cvičení, Řešené úlohy k 6. lekci JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

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 bychom měli volat až poté, co ji deklarujeme:

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

pozdrav(); // zavolání funkce

Výsledek:

Funkce v JavaScriptu
localhost

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");
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Výsledek:

Funkce v JavaScriptu
localhost

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:

Funkce v JavaScriptu
localhost

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 následujícím cvičení, Řešené úlohy k 7. lekci JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

Stáhnout

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

 

Předchozí článek
Řešené úlohy k 6. lekci JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
39 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (13)

 

 

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

Avatar
Jan Tesař
Člen
Avatar
Jan Tesař:19.7.2019 13:08

no jasně, díky, :-)

 
Odpovědět
19.7.2019 13:08
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:5.3.2020 15:13

No nevím, možná se to za ta léta změnilo, ale JavaScript už objektově dovede volat funkci i před tím, než ji definuješ, takže dneska už neplatí

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

Je to takový malinkatý detail, ale proč nemít perfektní stránky, když můžeš:)
Samozřejmě tohle neberu jako fatální katastrofu, protože je jasné, že ve skutečném projektu se funkce píší úplně separátně. Ale nemusel bys tímhle mást nováčky:)

Odpovědět
5.3.2020 15:13
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Jindřich Máca
Redaktor
Avatar
Odpovídá na Lubor Pešek
Jindřich Máca:6.3.2020 22:36

Hele, celá ta formulace je nějaká divná... Nejdřív ji "musíme" zavolat, pak ji najednou "můžeme" zavolat atd. :-D Nicméně, jak píšeš, chtělo by to trochu uvést na pravou míru.

  • Pokud deklarujeme klasickou funkci, tak bude její definice automaticky hoistovaná na záčatek a tudíž je jedno, jestli její volání napíšeme před nebo po její definici:
example();

function example() {
    console.log('Hello World!');
}

example();
  • Ovšem toto neplatí u funkcí uložených do proměnných, arrow funkcí apod.

Doufám, že je to takhle jasnější. ;-)

 
Odpovědět
6.3.2020 22:36
Avatar
Lubor Pešek
Člen
Avatar
Odpovídá na Jindřich Máca
Lubor Pešek:6.3.2020 23:38

Snad chápeš, že nechci rýpat nebo tady dělat machra....
Jen mi jde o to, aby začátečníci nebyly z toho úplně zmatení. A jak jsem psal - proč se nezabývat i detaily? Tento portál je skvělý vzor fungující komunity, tak se můžeme zabývat i prkotinami:)

Odpovědět
6.3.2020 23:38
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Martin Bušek:17.4.2020 10:13

Tak zatím sem se držel. Ale Callback mi způsobil Brain Freeze :D Vůbec se nechytám.

 
Odpovědět
17.4.2020 10:13
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jiří Hruška:30.10.2020 17:13

Ahoj, dělá mi starost jedna velmi důležitá věc u funkcí a proto nemůžu napsat pořádný smysluplný kód.

Proč tohle funguje jak má

let ctvrty = document.getElementById("btn4");
ctvrty.onclick = () => klik4();

A tohle ne?

let ctvrty = document.getElementById("btn4");
ctvrty.onclick = () => klik4;

Pro lepší pochopení: Proč u zavolání běžné funkce to funguje opačně?

let prvni = document.getElementById("btn1");
prvni.onclick = klik1;

function klik1(){
 prvni.innerHTML = "Zakliknuto!";
}

Díky za odpovědi, teda jestli jste mě pochopili.
a navíc jaký je rozdíl mezi funkci např. myFunction; a myFunction() ?

 
Odpovědět
30.10.2020 17:13
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na Jiří Hruška
Milan Turyna:30.10.2020 19:09

Odpověď na druhý dotaz, pokud ho chápu správně: myFunction() funkci zavolá a myFunction vrátí samotný kód funkce, pro příklad:

const func = function() {
  return 1;
}

console.log(func); //function () { return 1; }
console.log(func()) //1

Odpověď na první dotaz: kód pravděpodobně nefunguje, kvůli tomu že vytváříš funkci která vrací kód funkce, místo toho aby vracela výsledek volání funkce.

Editováno 30.10.2020 19:10
 
Odpovědět
30.10.2020 19:09
Avatar
Odpovídá na Milan Turyna
Jiří Hruška:30.10.2020 21:06

děkuji, rada nad zlato. Taky me mohlo napadnout že si všechno najdu v konzoli.

 
Odpovědět
30.10.2020 21:06
Avatar
Yuriy Tretyachenko:6. února 14:51

v callbacku

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);

nepochopil jsem vyrazu funkce(jmeno);

Editováno 6. února 14:52
 
Odpovědět
6. února 14:51
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na Yuriy Tretyachenko
Samuel Hél:9. února 21:17

Ahoj, výraz funkce(jmeno) je funkce s názvem funkce(), které předáváme parametr jmeno.

 
Odpovědět
9. února 21:17
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 51. Zobrazit vše