7. diel - Funkcie v JavaScriptu

V predchádzajúcom cvičení, Riešené úlohy k 6. lekcii JavaScriptu, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 6. lekcii JavaScriptu , sme sa naučili používať pole. Dnešné JavaScript tutoriál je venovaný veľmi dôležitej téme, ktorým je využívanie funkcií. Vďaka funkciám budeme nabudúce schopní reagovať na rôzne udalosti ako je napr. Kliknutie na tlačidlo a naprogramujeme tak prvou ozajstnou webovú aplikáciu.

Tvorba funkcií

Najprv si nejako jednoducho vysvetlíme, čo je to funkcia. Jedná sa o blok kódu, ktorý raz napíšeme a potom ho môžeme ľubovoľne volať bez toho, aby sme ho písali znovu a opakovali sa. Funkciu deklarujeme pomocou kľúčového slova function a obsahuje blok kódu v zložených zátvorkách. Funkcia, ktorá vypíše do dokumentu "Ahoj, vrelo ťa tu vítam!", By vyzerala nasledovne:

function pozdrav() {
    document.write("Ahoj, vrelo ťa tu vítam!");
}

Funkciu teraz musíme zavolať. Môžeme to samozrejme urobiť až potom, čo ju deklarujeme, inak by ju prehliadač nepoznal:

function pozdrav() {
    document.write("Ahoj, vrelo ťa tu vítam!");
}

pozdrav(); // zavolanie funkcie

výsledok:

Funkcie s parametrami

Funkcia môže mať tiež ľubovoľný počet vstupných parametrov, ktoré píšeme do zátvorky v jej definícii a podľa nich ovplyvňujeme jej správanie. Majte situácii, keď chceme pozdraviť nášho návštevníka podľa mena. Rozšírime teda existujúce funkciu o parameter jmeno a ten potom pridáme s konkrétnou hodnotou do volanie funkcie:

function pozdrav(jmeno) {
    document.write("Ahoj, vrelo ťa tu vítam " + jmeno + "!<br />");
}

pozdrav("Karle"); // zavolanie funkcie

Keby sme teraz chceli pozdraviť niekoľko ľudí, nemusíme otrocky písať znova a znova document.write("Ahoj, vřele...");, Stačí nám len viackrát zavolať našej funkcii:

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

výsledok:

Návratová hodnota funkcie

Funkcia môže ďalej vracať nejakú hodnotu. V našom prípade by sme nemuseli do dokumentu rovno zapisovať (napríklad preto, že budeme chcieť s textom ešte ďalej pracovať a nie ho rovno vypísať). Slúži na to príkaz return:

function pozdrav(jmeno) {
    return "Ahoj, vrelo ťa tu vítam " + jmeno + "!";
}

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

Spomeňme si na minulé príklady, ktoré vypisovali deň v týždni a kto má sviatok. Môžete si ich skúsiť prepísať tak, aby ste volali funkciu. V rámci návrhu by všetok kód mal byť rozdelený do funkcií (alebo do objektov, pozri ďalší nadväzujúci kurz) a to najmä kvôli prehľadnosti. My sme to zo začiatku vďaka jednoduchosť zanedbali, teraz to prosím berte na vedomie

Výhoda funkciou je teda v prehľadnosti a úspornosti (môžeme napísať nejakú vec raz a volať ju treba stokrát na rôznych miestach skriptu). Keď sa rozhodneme funkciu zmeniť, vykonáme zmenu len na jednom mieste a táto zmena sa prejaví všade, čo značne znižuje riziko chýb. V príklade, kde zdravíme Karla, Davida a Marienku, nám stačí zmeniť text pozdravu vo funkcii a zmení sa vo všetkých troch volaniach. Nemať kód vo funkcii, museli by sme prepisovať 3 vety a v nejakej by sme mohli urobiť chybu.

Uloženie funkcie do premennej

Posuňme sa ďalej. JavaScript sa líši od iných jazykov tým, ako pracuje s funkciami. Funkcia tu vie ešte viac, než sme si ukázali. Ak si spomíname, v úvodnej lekcii do JavaScriptu sme hovorili o tzv. Funkcionálnym paradigmy. Jedná sa o špecifický štýl programovania a myslenia pomocou funkcií. Funkciu môžeme totiž uložiť do bežnej premennej az tejto premennej ju neskôr volať.

function pozdrav(jmeno) {
    return "Ahoj, vrelo ťa tu vítam " + jmeno + "!";
}

let promenna_s_funkci = pozdrav; // teraz máme v premennej uloženú funkcii pozdrav
let text = promenna_s_funkci("Karle"); // zavoláme funkciu z premennej
document.write(text);

V skutočnosti sú všetky funkcie v JavaScriptu vnútorne premennej.

Anonymný funkcie

Funkciu môžeme definovať priamo v priradenie do premennej, hovoríme potom o tzv. Anonymné funkciu:

let promenna_s_funkci = function(jmeno) {
    return "Ahoj, vrelo ťa tu vítam " + jmeno + "!";
}

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

Možno vás napadlo, či ide odovzdať funkciu, uloženú v premennej, ako parameter inej funkcii. Áno, ide! A to je presne to, kam sme smerovali. Takéto odovzdané funkcii sa hovorí callback a stojí na ňom v podstate celý model udalostí JavaScriptu. Vyskúšame si to na jednoduchom príklade:

let promenna_s_funkci = function(jmeno) {
    document.write("Ahoj, vrelo ťa tu vítam " + jmeno + "!");
}

function zavolej_funkci(funkce, jmeno) {
    document.write("Som funkcie a volám funkciu, ktorá mi prišla do parametra v premennej.<br />");
    document.write("Ako parameter jej dám meno, ktoré mi prišlo ako 2. parameter.<br />");
    funkce(jmeno);
}

zavolej_funkci(promenna_s_funkci, "Karle");

výsledok:

Urobili sme si funkciu k volanie inej funkcie. Tá ako parametre berie funkciu, ktorú budeme volať a ďalej parameter jmeno, ktorý volané funkciu odovzdáme. Keby sme teraz chceli zdraviť inak, mohli by sme si urobiť ďalšiu premennú s inou funkciou, napr. promenna_s_funkci2 a tu dať volací funkciu do parametra miesto tej predchádzajúcej. Najmä v knižnici jQuery (pozri ďalšie kurzy) budeme udalostiam takto odovzdávať funkcie, ktoré sa majú vykonať, keď udalosť nastane.

K funkciám by som ešte dodal, že ak chceme viac vstupných parametrov, oddelíme je čiarkami. Pri volaní funkcie dokonca môžeme niektoré parametre vynechať a prekladač nám nevynadá, len vnútri funkcie budú mať potom hodnotu undefined.

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

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

Ak by sme chceli dosadiť nejakú predvolenú hodnotu parametra v prípade, že nie je zadaný, stačí si opodmínkovat jeho hodnotu pre undefined a dosadiť hodnotu predvolené. Ako vidíte, používanie funkcií má v JavaScripte obrovské možnosti. V budúcej lekcii, Riešené úlohy k 7. lekcii JavaScriptu , si ukážeme ako pomocou nich riešiť udalosti a konečne vytvoríme nejakú interaktívnejšie aplikáciu

V nasledujúcom cvičení, Riešené úlohy k 7. lekcii JavaScriptu, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.