Základy programovania
v JavaScripte

Milan Herda, 04/2020

Lekcia 8

Video k slajdom:

https://www.youtube.com/watch?v=-JwfD20s3UM

Čo nás dnes čaká

  • cyklus do...while
  • cyklus for
  • cyklus for...in
  • príkaz switch

Cyklus

Jazyková konštrukcia, pomocou ktorej vieme zapísať kód, ktorý sa má opakovať.

Každý cyklus má aspoň dve časti:

Telo

Kód, ktorý sa má opakovane vykonávať

Kontrolná podmienka

Podmienka, ktorá určuje,

či má opakovanie pokračovať

Pozor na kontrolné podmienky,

aby nevznikol nekonečný cyklus

Iterácia

Názov, ktorý používame na označenie jedného prechodu telom cyklu.

Iterovanie

Opakovanie tela cyklu

Cyklus while

while (podmienka) {
    telo();
}

Pokiaľ platí podmienka, opakuj telo.

Podmienka je na začiatku a riadi vstup do cyklu

=

vstupná podmienka

  1. Ak je podmienka pravdivá, tak sa vstúpi do tela cyklu.
  2. Po dokončení iterácie sa opäť vyhodnocuje podmienka (návrat na bod 1).
while (!jePredTebouStena()) {
    krokDopredu();
    polozZnacku();
}

Cyklus do...while

do {
    telo();
} while (podmienka);

Opakuj telo, pokiaľ platí podmienka.

Podmienka je na konci a riadi výstup z cyklu

=

výstupná (koncová) podmienka

  1. Vykoná sa jedna iterácia
  2. Vyhodnotí sa podmienka a pokiaľ je pravdivá, urobí sa ďalšia iterácia (návrat na bod 1)

Telo sa vykoná minimálne raz!

do {
    krokDopredu();
    polozZnacku();
} while (!jePredTebouStena());

Cyklus for

for (inicializacia; vstupnaPodmienka; krok) {
    telo();
}
  1. Najskôr sa urobí inicializácia
  2. Vyhodnotí sa podmienka a pokiaľ je pravdivá, urobí sa jedna iterácia
  3. Po dokončení iterácie sa vykoná "krok"
  4. Opäť sa vyhodnocuje vstupná podmienka (návrat na bod 2)

Cyklus for

for (inicializacia; vstupnaPodmienka; krok) {
    telo();
}
inicializacia;

while (vstupnaPodmienka) {
    telo();
  
    krok;
}

Cyklus for

for (let i = 0; i < 20; i = i + 1) {
    krokDopredu();
    polozZnacku();
}
let i = 0;

while (i < 20) {
    krokDopredu();
    polozZnacku();
  
    i = i + 1;
}

Úloha:

Pomocou cyklu for prepíšte funkciu na kreslenie čiary dĺžky N

const ciaraDlzkyN = function (dlzka) {
    polozZnacku();
    let nakreslenych = 1;

    while (!jePredTebouStena() && nakreslenych < dlzka) {
        krokDopredu();
        polozZnacku();
        nakreslenych = nakreslenych + 1;
    }
};

Riešenie:

Pomocou cyklu for prepíšte funkciu na kreslenie čiary dĺžky N

const ciaraDlzkyN = function (dlzka) {
    for (let i = 0; i < dlzka; i = i + 1) {
    	polozZnacku();
        krokDopredu();
    }
};
const ciaraDlzkyN = function (dlzka) {
    polozZnacku();
  
    for (let i = 1; !jePredTebouStena() && i < dlzka; i = i + 1) {
    	krokDopredu();
        polozZnacku();
    }
};

Cyklus for..in

for (let vlastnost in objekt) {
    telo();
}

Toto je špeciálny typ cyklu, ktorý:

  • iteruje cez všetky vlastnosti daného objektu
  • názov vlastnosti uloží do premennej
  • a pre každú vlastnosť vykoná telo

Cyklus for..in

const osoba = {
    meno:       'fero',
    priezvisko: 'mrkvička',
    vyska:      183,
    vek:        25,
};

for (let vlastnost in osoba) {
    const hodnota = osoba[vlastnost];
    // porozmyslajte, preco nemozeme pouzit osoba.vlastnost?
  
    console.log(
        'Hodnota vlastnosti ' + vlastnost + ' je ' + hodnota
    );
}

Predčasné ukončenie cyklu

Vykonávanie tela každého zo spomenutých cyklov viete ukončiť predčasne pomocou dvoch príkazov:

break

continue

Ukončí všetky iterácie aktuálneho cyklu a pokračuje ďalším kódom.

Ukončí aktuálnu iteráciu a pokračuje ďalšou.

 

Pre while vyhodnotí podmienku.

Pre for urobí krok a potom vyhodnocuje podmienku.

for (let i = 0; i < 20; i = i + 1) {
    polozZnacku();
    
    if (jePredTebouStena()) {
        break;
    }
  
    krokDopredu();
}

Príkaz switch

Podmienené vykonávanie kódu.

 

Používa sa ako náhrada pre sekvencie

 

if - else if - else if - ... -  else

switch (vyraz) {
    case 1:
         urobNieco();
         break;
    
    case 'hodnota2':
         urobNiecoIne();
         break;
    
    case 'hodnota3':
         urobNiecoUplneIne();
         break;
    
    default:
         urobNiecoBezne();
         break;
}

Príkaz switch

switch (vyraz) {
    case 1:
         urobNieco();
         break;
    
    case 'hodnota2':
         urobNiecoIne();
         break;
    
    case 'hodnota3':
         urobNiecoUplneIne();
         break;
    
    default:
         urobNiecoBezne();
         break;
}

Najskôr sa vyhodnotí

výraz.

Následne sa hodnota výrazu porovnáva (pomocou ===)

s hodnotami uvedenými v návestiach (case).

Príkaz switch

switch (vyraz) {
    case 1:
         urobNieco();
         break;
    
    case 'hodnota2':
         urobNiecoIne();
         break;
    
    case 'hodnota3':
         urobNiecoUplneIne();
         break;
    
    default:
         urobNiecoBezne();
         break;
}

Pri nájdení prvej zhody sa začne vykonávať kód, ktorý nasleduje za týmto návestím.

Vykonáva sa až do konca príkazu switch alebo do prvého prerušenia behu (typicky break)

Môže byť aj return (ale ukončuje funkciu) alebo continue (ukončuje aj cyklus)

Príkaz switch

switch (vyraz) {
    case 1:
         urobNieco();
         break;
    
    case 'hodnota2':
         urobNiecoIne();
         break;
    
    case 'hodnota3':
         urobNiecoUplneIne();
         break;
    
    default:
         urobNiecoBezne();
         break;
}
if (vyraz === 1) {
    urobNieco();
} else if (vyraz === 'hodnota2') {
    urobNiecoIne();
} else if (vyraz === 'hodnota3') {
    urobNiecoUplneIne();
} else {
    urobNiecoBezne();
}

Príkaz switch

switch (vyraz) {
    case 1:
         urobNieco();
         break;
    
    case 'hodnota2':
         urobNiecoIne();
    
    case 'hodnota3':
         urobNiecoUplneIne();
         break;
    
    default:
         urobNiecoBezne();
         break;
}

Keď sa neuvedie príkaz break, tak vykonávanie kódu "prepadáva" do ďalšieho návestia.

if (vyraz === 1) {
    urobNieco();
} else if (vyraz === 'hodnota2') {
    urobNiecoIne();
    urobNiecoUplneIne();
} else if (vyraz === 'hodnota3') {
    urobNiecoUplneIne();
} else {
    urobNiecoBezne();
}

Cvičenie

Prepíšte funkciu akyJeDalsiSmerVlavo pomocou príkazu switch

const SEVER  = 'sever';
const JUH    = 'juh';
const ZAPAD  = 'západ';
const VYCHOD = 'východ';

const akyJeDalsiSmerVlavo = function (terajsiSmer) {
    if (terajsiSmer === SEVER) {
        return ZAPAD;
    }

    if (terajsiSmer === ZAPAD) {
        return JUH;
    }

    if (terajsiSmer === JUH) {
        return VYCHOD;
    }

    return SEVER;
};

Riešenie

const SEVER  = 'sever';
const JUH    = 'juh';
const ZAPAD  = 'západ';
const VYCHOD = 'východ';

const akyJeDalsiSmerVlavo = function (terajsiSmer) {
    switch (terajsiSmer) {
        case SEVER:
            return ZAPAD;

      	case ZAPAD:
            return JUH;
        
        case JUH:
            return VYCHOD;
        
        default:
            return SEVER;
    }
};

Príkaz switch: kontroverzný

Treba ho poznať, ale neodporúčam ho používať.

Problémom je potreba ukončovať návestia.

Chýbajúci break môže byť úmyselný, ale väčšinou nie je :)

Vznikajú kvôli tomu veľmi ťažko odhaliteľné chyby.

Príkaz switch: kontroverzný

Riešenie:

Nepoužívať switch a vetviť iba pomocou if

Ďakujem za pozornosť!

Školenie JS 2020 - lekcia 08

By Milan Herda

Školenie JS 2020 - lekcia 08

  • 558

More from Milan Herda