Základy programovania v JavaScripte

Príklady na precvičovanie

  • anonymné funkcie

Milan Herda, 05/2020

Príklady rob v úplne novom súbore a spúšťaj si ich pomocou terminálu

Týmto príkazom v termináli spustíš JS súbor:

node názov-suboru.js

Nezabudni, že v termináli musíš byť v správnom priečinku alebo uviesť celú cestu k súboru a nielen názov

Najjednoduchšie bude, keď si terminál otvoríš vo vnútri VS Code cez menu "Terminal > New Terminal"

  • vytvor anonymnú funkciu
  • do konzoly vypíše text "foo"
  • funkciu ulož do premennej foo
  • daj funkciu vykonať

Zadanie 1

  • vytvor anonymnú funkciu
  • do konzoly vypíše text "foo"
  • funkciu ulož do premennej foo
  • daj funkciu vykonať

Riešenie 1

// vytvor anonymnú funkciu
function () {
}
// vytvor anonymnú funkciu
// do konzoly vypíše text "foo"
function () {
    console.log('foo');
}
// vytvor anonymnú funkciu
// do konzoly vypíše text "foo"
// funkciu ulož do premennej foo
const foo = function () {
    console.log('foo');
}; // všimni si pribudnutú bodkočiarku
// vytvor anonymnú funkciu
// do konzoly vypíše text "foo"
// funkciu ulož do premennej foo
// daj funkciu vykonať
const foo = function () {
    console.log('foo');
};

foo();
  • vytvor anonymnú funkciu
  • do konzoly vypíše text "bar"
  • funkciu neukladaj do žiadnej premennej
  • daj funkciu vykonať

Zadanie 2

  • vytvor anonymnú funkciu
  • do konzoly vypíše text "bar"
  • funkciu neukladaj do žiadnej premennej
  • daj funkciu vykonať

Riešenie 2

// vytvor anonymnú funkciu
function () {
}
// vytvor anonymnú funkciu
// do konzoly vypíše text "bar"
function () {
    console.log('bar');
}
// vytvor anonymnú funkciu
// do konzoly vypíše text "foo"
// funkciu neukladaj do žiadnej premennej
function () {
    console.log('bar');
}
// vytvor anonymnú funkciu
// do konzoly vypíše text "foo"
// funkciu neukladaj do žiadnej premennej
// daj funkciu vykonať
(function () {
    console.log('foo');
})();

/*
 * Toto je pokročilejšia vec a hovorí sa jej
 * IIFE:
 * Immediately Invoked Function Expression
 * Použitie: vykonanie kódu bez toho, aby
 * do aktuálneho rozsahu platnosti pribudli nové premenné
 * z vnútra funkcie.
 */

Zadanie 3

  • Vytvor anonymnú funkciu a ulož ju do premennej blabla
  • Funkcia dostane jeden argument, ktorým bude číslo
  • ak bude číslo párne, vráti jeho tretiu mocninu
  • ak nebude párne, vráti číslo samotné

Riešenie 3

  • Vytvor anonymnú funkciu a ulož ju do premennej blabla
  • Funkcia dostane jeden argument, ktorým bude číslo
  • ak bude číslo párne, vráti jeho tretiu mocninu
  • ak nebude párne, vráti číslo samotné
const jeParne = function (cislo) {
    return ((cislo % 2) === 0);  
};

const blabla = function (cislo) {
    if (jeParne(cislo)) {
        return cislo * cislo * cislo;
    }
  
    return cislo;
};

Zadanie 4

  • Vytvor funkciu "generujCisla"
  • Funkcia má dva argumenty "min" a "max"
  • Funkcia bude generovať čísla v zadanom rozsahu (podľa argumentov)
  • Pre každé číslo sa do konzoly vypíše: "vygenerovane cislo: X", kde X bude nahradené vygenerovaným číslom
  • Vyskúšajte si funkciu spustiť s rôznymi argumentami
  • Zabezpečte, aby sa čísla negenerovali, ak argument "max" je menší ako "min"

Riešenie 4

  • Vytvor funkciu "generujCisla"
  • Funkcia má dva argumenty "min" a "max"
  • Funkcia bude generovať čísla v zadanom rozsahu (podľa argumentov)
  • Pre každé číslo sa do konzoly vypíše: "vygenerovane cislo: X", kde X bude nahradené vygenerovaným číslom
  • Vyskúšajte si funkciu spustiť s rôznymi argumentami
  • Zabezpečte, aby sa čísla negenerovali, ak argument "max" je menší ako "min"
const generujCisla = function(min, max) {
    let vygenerovane = min;
  
    while (vygenerovane <= max) {
        console.log('Vygenerované číslo: ' + vygenerovane);
        vygenerovane = vygenerovane + 1;
    }
};

generujCisla(1, 10);
generujCisla(123, 132);
generujCisla(-40, -35);
generujCisla(50, 40);

Riešenie 4, pomocou cyklu for

  • Vytvor funkciu "generujCisla"
  • Funkcia má dva argumenty "min" a "max"
  • Funkcia bude generovať čísla v zadanom rozsahu (podľa argumentov)
  • Pre každé číslo sa do konzoly vypíše: "vygenerovane cislo: X", kde X bude nahradené vygenerovaným číslom
  • Vyskúšajte si funkciu spustiť s rôznymi argumentami
  • Zabezpečte, aby sa čísla negenerovali, ak argument "max" je menší ako "min"
const generujCisla = function(min, max) {
    for (let i = min; i <= max; i = i + 1) {
        console.log('Vygenerované číslo: ' + i);
    }
};

generujCisla(1, 10);
generujCisla(123, 132);
generujCisla(-40, -35);
generujCisla(50, 40);

Zadanie 5

  • pridajte funkcii "generujCisla" tretí argument nazvaný "modifikator"
  • očakávame, že "modifikator" bude funkcia s jedným argumentom
  • pre každé vygenerované číslo zavoláme modifikátor
  • výpis do konzoly sa upraví na: "Vygenerované číslo: X, modifikované: Y"
  • do volaní funkcie ako tretí argument pridaj funkciu "blabla" z tretej úlohy

Riešenie 5

  • pridajte funkcii "generujCisla" tretí argument nazvaný "modifikator"
  • očakávame, že "modifikator" bude funkcia s jedným argumentov
  • pre každé vygenerované číslo zavoláme modifikátor
  • výpis do konzoly sa upraví na: "Vygenerované číslo: X, modifikované: Y"
  • do volaní funkcie ako tretí argument pridaj funkciu "blabla" z tretej úlohy
const generujCisla = function(min, max, modifikator) {
    for (let i = min; i <= max; i = i + 1) {
        let text = 'Vygenerované číslo: ' + i;
        text = text + ', modifikované: ' + modifikator(i);
      
        console.log(text);
    }
};

generujCisla(1, 10, blabla);
generujCisla(123, 132, blabla);
generujCisla(-40, -35, blabla);
generujCisla(50, 40, blabla);

Zadanie 6

  • vytvor funkciu dajModifikátor
  • táto funkcia vráti funkciu, ktorá očakáva jeden argument a vráti jeho druhú mocninu
  • zavolajte dajModifikator a výsledok použite ako modifikátor pre "generujCisla"

Riešenie 6

  • vytvor funkciu dajModifikátor
  • táto funkcia vráti funkciu, ktorá očakáva jeden argument a vráti jeho druhú mocninu
  • zavolajte dajModifikator a výsledok použite ako modifikátor pre "generujCisla"
const druhaMocnina = function (cislo) {
    return cislo * cislo;
};

const dajModifikator = function () {
    return druhaMocnina;
};

const modifikator = dajModifikator();
generujeCisla(10, 20, modifikator);
const dajModifikator = function () {
    const druhaMocnina = function (cislo) {
        return cislo * cislo;
    };

    return druhaMocnina;
};

const modifikator = dajModifikator();
generujeCisla(10, 20, modifikator);
const dajModifikator = function () {
    return function (cislo) {
        return cislo * cislo;
    };
};

const modifikator = dajModifikator();
generujeCisla(10, 20, modifikator);

Zadanie 7

  • vytvor funkciu vytvorPripocitavadlo
  • táto funkcia vráti funkciu, ktorá očakáva jeden argument, pripočíta k nemu číslo 2
  • zavolajte vytvorPripocitavadlo a výsledok použite ako modifikátor pre "generujCisla"

Riešenie 7

  • vytvor funkciu vytvorPripocitavadlo
  • táto funkcia vráti funkciu, ktorá očakáva jeden argument, pripočíta k nemu číslo 2
  • zavolajte vytvorPripocitavadlo a výsledok použite ako modifikátor pre "generujCisla"
const vytvorPripocitavadlo = function () {
    return function (cislo) {
        return cislo + 2;
    };
};

const pripocitavadlo = vytvorPripocitavadlo();

console.log(pripocitavadlo(1)); // vypíše 3

generujCisla(10, 20, pripocitavadlo);

Zadanie 8

  • uprav funkciu vytvorPripocitavadlo
  • pridaj argument nazvaný napr. x
  • následne uprav funkciu, ktorá sa z vytvorPripocitavadlo vracia a to tak, aby namiesto pripočítavania 2, pripočítavala x
  • zavolaj vytvorPripocitavadlo a následne zavolaj vrátenú funkciu
  • použi vrátenú funkciu ako modifikátor pre "generujCisla"

Riešenie 8

  • uprav funkciu vytvorPripocitavadlo
  • pridaj argument nazvaný napr. x
  • následne uprav funkciu, ktorá sa z vytvorPripocitavadlo vracia a to tak, aby namiesto pripočítavania 2, pripočítavala x
  • zavolaj vytvorPripocitavadlo a následne zavolaj vrátenú funkciu
  • použi vrátenú funkciu ako modifikátor pre "generujCisla"
const vytvorPripocitavadlo = function (x) {
    return function (cislo) {
        return cislo + x;
    };
};

const pripocitavadlo = vytvorPripocitavadlo(5);

console.log(
    pripocitavadlo(1)
); // vypíše 6

generujCisla(10, 20, pripocitavadlo);

Školenie JS 2020 - príklady 02

By Milan Herda

Školenie JS 2020 - príklady 02

  • 560

More from Milan Herda