Základy programovania

v JavaScripte

Milan Herda, 03/2020

Lekcia 6

Cvičenie

Naprogramujte funkciu, ktorá zistí, či je naľavo od Karla stena.

  • Ak tam je stena, tak vráti true
  • Ak tam nie je stena, tak vráti false

Pred a po spustení bude Karel otočený rovnako a jeho pozícia bude nezmenená.

function jeStenaVlavo() {
    otocDolava();
    
    const jeStena = jePredTebouStena();
    
    otocDoprava();
    
    return jeStena;
}

Cvičenie

Upravte funkciu tak, aby išlo o deklaráciu anonymnej funkcie uloženej do premennej.

const jeStenaVlavo = function () {
    otocDolava();
    
    const jeStena = jePredTebouStena();
    
    otocDoprava();
    
    return jeStena;
};

Cvičenie

Urobte funkciu akyJeDalsiSmerVlavo:

  • ako argument dostane smer, kam sa pozeráme
  • vráti smer, na ktorý budeme smerovať, ak sa z daného smeru otočíme doľava

Riešenie: Algoritmizácia

  • vymyslíme, ako budeme reprezentovať smer
  • vytvoríme funkciu s argumentom "terajsiSmer"
  • funkcia podľa terajšej hodnoty smeru vráti nový smer

Príklad:

Keď pozerám na sever, tak po otočení by som smeroval na západ. Vrátime západ

Riešenie: Reprezentácia smeru

Obyčajný string

'sever'
'juh'
'východ'
'západ'

Riešenie: Funkcia s jedným argumentom

const akyJeDalsiSmerVlavo = function (terajsiSmer) {
  
};

Riešenie: Ak sever, tak západ

const akyJeDalsiSmerVlavo = function (terajsiSmer) {
    if (terajsiSmer === 'sever') {
        return 'západ';
    }
};

Riešenie: Doplňte zvyšné vetvy

const akyJeDalsiSmerVlavo = function (terajsiSmer) {
    if (terajsiSmer === 'sever') {
        return 'západ';
    } else if (terajsiSmer === 'západ') {
        return 'juh';
    } else if (terajsiSmer === 'juh') {
        return 'východ';
    } else {
        return 'sever';
    }
};

Riešenie: Doplňte zvyšné vetvy

const akyJeDalsiSmerVlavo = function (terajsiSmer) {
    if (terajsiSmer === 'sever') {
        return 'západ';
    }
  
    if (terajsiSmer === 'západ') {
        return 'juh';
    }
  
    if (terajsiSmer === 'juh') {
        return 'východ';
    }

    return 'sever';
};

Riešenie: Vyskúšajte si

console.log(
  akyJeDalsiSmerVlavo('sever')
);

const dalsiSmer = akyJeDalsiSmerVlavo('juh');

console.log(dalsiSmer);

Koľkí ste sa urobili preklep v názve smeru?

"Programátori si zaslúžia istoty"

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

Zvolíme zodpovednejší spôsob reprezentácie smeru:

Riešenie:

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

    return SEVER;
};

Riešenie: Vyskúšajte si

console.log(
  akyJeDalsiSmerVlavo(SEVER)
);

const dalsiSmer = akyJeDalsiSmerVlavo(JUH);

console.log(dalsiSmer);
    
const akyJeDalsiSmerVpravo = function (terajsiSmer) {
    if (terajsiSmer === SEVER) {
        return VYCHOD;
    }
  
    if (terajsiSmer === VYCHOD) {
        return JUH;
    }
  
    if (terajsiSmer === JUH) {
        return ZAPAD;
    }

    return SEVER;
};

Úloha:

Naprogramujte funkciu akyJeDalsiSmerVpravo

Typy premenných

Primitívne typy

  • undefined (hodnota, ktorá nie je definovaná)
  • null (prázdna hodnota)
  • boolean (true alebo false)
  • číslo (celé číslo alebo desatinné)
  • reťazec

Zložené typy

  • objekt
  • pole
  • funkcia

Objekt

Typ premennej, v ktorá v sebe obsahuje skupinu primitívnych a/alebo zložených hodnôt.

Každej jednotlivej časti hovoríme "vlastnosť" alebo "property"

Každá vlastnosť má svoje meno a hodnotu.

const prazdnyObjekt = {};

const fero = {
    vek: 45,
    vyska: 183,
    adresa: {
        ulica: 'Farská 42',
        obec: 'Nitra',
    },
};

K vlastnostiam sa zvonka objektu pristupuje pomocou tzv. bodkovej notácie

const fero = {
    vek: 45,
    vyska: 183,
    adresa: {
        ulica: 'Farská 42',
        obec: 'Nitra'
    }
};

console.log(fero.vek);

fero.vek = 50;

console.log(fero.vek);

console.log(
    fero.adresa.obec
);

fero.vaha = 75;

Ako to, že je to const a môžeme meniť hodnoty?

Samotné const zakazuje iba urobiť nové priradenie do premennej.

const fero = {vek: 12};
fero = {vek: 45};

Nezakazuje meniť hodnotu vnútorných vlastností.

Okrem bodkovej notácie viete k prvkom pristúpiť aj pomocou hranatých zátvoriek [ a ]

console.log(fero['vek']);

fero['vek'] = 50;

console.log(fero['vek']);

console.log(
    fero['adresa']['obec']
);

fero['vaha'] = 75;
console.log(fero.vek);

fero.vek = 50;

console.log(fero.vek);

console.log(
    fero.adresa.obec
);

fero.vaha = 75;

Úloha

Vytvorte objekt, ktorý predstavuje mapu, kde Karel kreslí. Objekt bude mať dve vlastnosti reprezentujúce šírku a výšku

const mapa = {
    sirka: 20,
    vyska: 20,
};

Úloha

Vytvorte objekt, ktorý predstavuje Karla. Aké vlastnosti mu môžeme dať?

const karel = {
    riadok: 19,
    stlpec: 0,
    smer: 'sever',
};

const SEVER  = 'sever';
const JUH    = 'juh';
const VYCHOD = 'vychod';
const ZAPAD  = 'zapad';

const karel = {
    riadok: 19,
    stlpec: 0,
    smer: SEVER,
};

K čomu sú objekty dobré?

  • zoskupenie vlastností, ktoré k sebe patria
  • poriadok v premenných
    • čo predstavuje premenná vyska?
    • mapa.vyska?
    • obrazok.vyska?

Metódy

Do property objektu môže byť uložená rovnaká hodnota, ako aj do premennej.

Kedže do premennej vieme uložiť aj funkciu, ...

... tak aj do property vieme uložiť funkciu.

Funkcii, ktorá je vlastnosťou objektu, hovoríme metóda

Metódy

const obj = {
    nazovMetody: function () {
        // kod metody
    },
};

Cvičenie

Pridáme Karlovi metódu vpravoVbok, ktorá zmení hodnotu vlastnosti smer.

const karel = {
    riadok: 19,
    stlpec: 0,
    smer: SEVER,
     
    vpravoVbok: function () {

    },
};

Riešenie

const karel = {
    riadok: 19,
    stlpec: 0,
    smer: SEVER,
  
    vpravoVbok: function () {
        const dalsiSmer = akyJeDalsiSmerVpravo(karel.smer);
      
        karel.smer = dalsiSmer;
    },
};

Cvičenie: skráťte metódu

const karel = {
    riadok: 19,
    stlpec: 0,
    smer: SEVER,
  
    vpravoVbok: function () {
        karel.smer = akyJeDalsiSmerVpravo(karel.smer);
    },
};

Čo ak premenujem premennú karel?

Musím premenovať všetky jej výskyty vo všetkých metódach?

Fungovanie objektu by nemalo byť závislé na tom, ako sa volá premenná, v ktorej je objekt uložený.

Kľúčové slovo this

Vo vnútri každej funkcie je dostupná špeciálna premenná z názvom this

Ak je funkcia metódou, tak this obsahuje objekt, nad ktorým bola metóda zavolaná.

Použitie this:

const karel = {
    riadok: 19,
    stlpec: 0,
    smer: SEVER,
  
    vpravoVbok: function () {
        this.smer = akyJeDalsiSmerVpravo(this.smer);
    },
};

Cvičenie:

Urobte metódu vlavoVbok

const karel = {
    // doterajší kód

    vlavoVbok: function () {
        this.smer = akyJeDalsiSmerVlavo(this.smer);
    },
};

Rozširovanie objektov

Do objektu viete pridať property (a to aj metódu)

aj po jeho vytvorení.

const karel = {
    // všetok doterajší kód
};

karel.dostalFrancouzak = true;
karel.uzZnaLasku = true;

karel.celomVzad = function () {
    // tu môžete používať this
};

Cvičenie: doplňte telo metódy celomVzad

const karel = {
    // všetok doreajší kód
};

karel.celomVzad = function () {
    if (this.smer === SEVER) {
        this.smer = JUH;
      	return;
    }
  
    if (this.smer === VYCHOD) {
        this.smer = ZAPAD;
      	return;
    }
  
    if (this.smer === JUH) {
        this.smer = SEVER;
      	return;
    }
  
    this.smer = VYCHOD;
};

Ďakujem za pozornosť

Školenie JS 2020 - lekcia 06

By Milan Herda

Školenie JS 2020 - lekcia 06

  • 592

More from Milan Herda