Základy programovania v JavaScripte

Milan Herda, 02/2020

Lekcia 4

O čom budeme hovoriť

 

  • Opakovanie
  • Argumenty
  • Anonymné funkcie
  • Callback
  • Kreslenie s Karlom

Opakovanie

Algoritmus

Postup riešenia problému

Tvorba algoritmu (algoritmizácia) pozostáva z rozkladu problému na menšie časti.

Funkcie

Nástroj na rozdeľovanie kódu na časti

Každá funkcia rieši nejakú úlohu

  • niečo vykonávajú
  • niečo počítajú a vracajú nám výsledok
  • oboje

Funkcie

function krokAPoloz() {
    krokDopredu();
    polozZnacku();
}
const krokAPoloz = function () {
    krokDopredu();
    polozZnacku();
};

Premenné

Slúžia na uchovávanie hodnôt, s ktorými sa pracuje

const trebaPrejst = 5;

let prejdene = 1;

var pocetStvorcov = 10;

Urobte funkcie na vykreslenie čiary dĺžky 3, 7 a 10

Nedalo by sa urobiť iba jedna funkcia a jej povedať, ako dlhá má byť čiara?

Argumenty

Argument je premenná, ktorá je deklarovaná priamo v hlavičke funkcie.

Hodnota argumentu sa definuje až v čase zavolania

function priklad(foo, bar) {
    console.log(foo);
    console.log(bar);
}
priklad('ahoj', 7);

priklad(3, 4);

Napíšte funkciu pre nakreslenie čiary ľubovoľnej dĺžky.

Úloha

function nakresliCiaru(dlzka) {
    var nakreslenych = 0;

    while (nakreslenych < dlzka) {
        polozZnacku();
        krokDopredu();

        nakreslenych = nakreslenych + 1;
    }
}

Čo ak narazíme do steny?

Podmienky

if (podmienka) {
    /* kód pri splnení podmienky */
}
if (podmienka) {
    /* kód pri splnení podmienky */
} else {
    /* kód pri nesplnení podmienky */
}
if (podmienka) {
    /* kód pri splnení podmienky */
} else if (iná podmienka) {
    /* kód pri splnení inej podmienky */
} else {
    /* kód pri nesplnení podmienky */
}

Operátory && a ||

A B A && B
true true true
true false false
false true false
false false false
A B A || B
true true true
true false true
false true true
false false false
while (
    (!jePredTebouStena())
    && (nakreslenych < dlzka)
) {
    /* ... */
}
while (podmienka && podmienka2) {
    // ...
}

Predčasné prerušenie tela cyklu

Príkaz break

Príkaz continue

Ukončí vykonávanie cyklu a preskočí hneď za uzatváraciu zátvorku tela cyklu.

Ukončí vykonávanie cyklu a skočí opäť na vstupnú podmienku.

while (podmienka) {
    // ...
    break;
    // ...
}

// ... tu sa pokračuje
while (podmienka) { // návrat sem
    // ...
    continue;
    // ...
}

Napíšte funkciu pre nakreslenie čiary ľubovoľnej dĺžky, ale pri hroziacom náraze do steny ďalšie kresleni prerušíme

Úloha

function nakresliCiaru(dlzka) {
    var nakreslenych = 0;

    while (nakreslenych < dlzka) {
        polozZnacku();
        nakreslenych = nakreslenych + 1;

        if (jePredTebouStena()) {
            break;
        }

        krokDopredu();
    }
}

Napíšte funkciu pre nakreslenie obrysu štvorca so stranou ľubovoľnej dĺžky

Úloha

function nakresliStvorec(dlzka) {
    var ostavaStran = 4;

    while (ostavaStran--) {
        nakresliCiaru(dlzka - 1);
        otocDoprava();
    }
}

Anonymné funkcie

Anonymná funkcia

Je funkcia, ktorá nemá svoje meno

Má zmysel ju vytvoriť iba vtedy, keď ju

  • ju okamžite dáme vykonať
  • použijeme ju ako hodnotu premennej
  • použijeme ju ako hodnotu argumentu
function () {
    // telo funkcie
}

Anonymná funkcia

Má zmysel ju vytvoriť iba vtedy, keď ju

  • ju okamžite dáme vykonať
(function () {
    const zmyselZivota = 42;
  
    krokDopredu();
    poloZnacku();
})();

Anonymná funkcia

Má zmysel ju vytvoriť iba vtedy, keď ju

  • ju použijeme ako hodnotu premennej
const dvojkrok = function () {
    krokDopredu();
    krokDopredu();
};

// a niekedy neskôr
dvojkrok();

Anonymná funkcia

Má zmysel ju vytvoriť iba vtedy, keď ju

  • ju použijeme ako hodnotu argumentu
document.addEventListener(
    'DOMContentLoaded',
     function () {
        // telo funkcie
    }
);

Callback

Napíšeme funkciu opakuj, ktorá daný početkrát zopakuje danú operáciu

function opakuj(kolkokrat, operacia) {
    while (kolkokrat--) {
        operacia();
    }
}

opakuj(5, krokDopredu);

Ako callback vieme použiť aj anonymnú funkciu

opakuj(5, function () {
    polozZnacku();
    krokDopredu();
});

Kreslenie

s Karlom

Prosím, vyplňte mi spätnú väzbu

Otázky?

Školenie JS 2020 - lekcia 04

By Milan Herda

Školenie JS 2020 - lekcia 04

  • 121
Loading comments...

More from Milan Herda