Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Lekce 7 - Funkce v JavaScriptu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
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 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 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 271x (2.58 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
34 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Pole v JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Cvičení k 7. lekci JavaScriptu
Aktivity (7)

 

 

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

Avatar
Jurajs
Člen
Avatar
Jurajs:27. května 15:54

Cau, kde mas vytvořenou funkci - >zavolej_funkci() ??
Koukni na tu lekci pořádně ;) .....

Editováno 27. května 15:55
 
Odpovědět 27. května 15:54
Avatar
Odpovídá na Jurajs
Jan Jedlička:27. května 16:07

ahoj dikes, ted to vidim. ja si zkousel nekolik prikladu a moc jsem to asi prekombinoval.ted to vse funguje jak ma. hold blbe jsem koukal. diky

 
Odpovědět  +1 27. května 16:07
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jan Jedlička
Jurajs:27. května 19:44

Super, to jsem rád...to se stává, že to někdy člověk překombinuje ;)

 
Odpovědět 27. května 19:44
Avatar
Odpovídá na Jurajs
Jan Jedlička:27. května 19:46

Jsem tam mel jinou funkci a zapomnel to zmenit

 
Odpovědět 27. května 19:46
Avatar
Tadeáš Burda:28. května 23:12

Je možnosť u funkcie napevno určiť aký parameter požadujem? Sem zvyknutý na C# a dosť mi vadí, že bez dobrého popisu, alebo toho že sa podívam na kód funkcie neviem čo tam ma byt :/ VS mi ani nevyhadzuje menu z funkciami, lebo neviem čo tam ma byť...Toto dynamické typovanie sa mi moc nepáči :-`

Odpovědět 28. května 23:12
Myslieť, znamená hovno vedieť...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Tadeáš Burda
Jindřich Máca:29. května 11:39

Ahoj, v čistém JS ne. Tady se dají brát parametry funkcí dokonce jako čistě návodné, protože jak i ukazuje poslední příklad v článku, můžeš funkci deklarovanou se dvěma parametry volat jenom s jedním nebo klidně se třemi. Kromě toho, že to asi nebude dělat to co má, tak to není chyba. :D

Takže pokud chceš striktnější kontroly a nějaké ty typy, tak se musíš poohlédnout po nějaké "nadstavbě" JS jakou je např. TypeScript. ;)

 
Odpovědět 29. května 11:39
Avatar
Odpovídá na Jindřich Máca
Tadeáš Burda:29. května 17:23

Dik.. Až dokončím tutoriál, určite sa nato pozriem.

Odpovědět  +1 29. května 17:23
Myslieť, znamená hovno vedieť...
Avatar
Jan Tesař
Člen
Avatar
Jan Tesař:19. července 8:53

Ahoj, lze udělat callback funkce s dvěma parametry? Mě to nefunguje.:
let promenna_s_funkci = function(jmeno,prij­meni) {
document.write("A­hoj, vřele tě tu vítám " + jmeno + prijmení + "!");
}

let zavolej_funkci = function (funkce, jmeno, prijmeni) {

document.write("Ja­ko parametr jí dám jmeno, které mi přišlo jako 2. a 3 parametr.
");
funkce(jmeno,prij­meni);
}

zavolej_funkci(pro­menna_s_funkci, "Karle", "Nováku");
diky za odpověď

 
Odpovědět 19. července 8:53
Avatar
Odpovídá na Jan Tesař
Andy Scheuchzer:19. července 11:05

Řekl bych že problém bude v tom í na řádku

document.write("Ahoj, vřele tě tu vítám " + jmeno + prijmení + "!");
Odpovědět  +1 19. července 11:05
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Jan Tesař
Člen
Avatar
Odpovídá na Andy Scheuchzer
Jan Tesař:19. července 13:08

no jasně, díky, :-)

 
Odpovědět 19. července 13:08
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 42. Zobrazit vše