Programovanie v JavaScripte,

časť 3

Pre úplných začiatočníkov

Opakovanie

Základné stavebné prvky:

Funkcie
Premenné a argumenty
Cykly
Podmienky

Funkcie

Rozdeľujú program na menšie časti

Divide and Conquer

Premenné a argumenty

Uchovávajú hodnoty

Cykly

Umožňujú opakované vykonávanie

Podmienky

Umožňujú podmienené vykonávanie

Funkcie

Deklarácia (vytvorenie)

Pomenované

Anonymné

function dvojkrok() {
    // ...
}

var dvojkrok = function () {
    // ...
};

function () {
    // ...
}

Funkcia sa len vytvorí, zatiaľ sa jej kód vôbec nevykonáva!

Anonymná uložená do premennej

Funkcie

Volanie (použitie)

Pomenované

Anonymné

dvojkrok()

dvojkrok()

(function () {
    // ...
})()

V tejto chvíli sa začne vykonávať kód funkcie

Anonymná uložená do premennej alebo argumentu

Funkcie

Cvičenie: čo nakreslí tento kód?

function dvojkrok() {
    krokDopredu();
    krokDopredu();
}

var pocetKrokov = 0;

polozZnacku;
krokDopredu;
polozZnacku;
dvojKrok
otocDoprava;
dvojKrok
krokDopredu;
polozZnacku;

Funkcie

Funkcie vedia vracať hodnotu

function spocitaj(x, y) {
    return x + y;
}

var vysledok = spocitaj(5, 6);

console.log(vysledok);

Príkaz return okamžite ukončuje vykonávanie tela funkcie

Ak sa za ním nachádza nejaká hodnota, tak táto sa vracia z funkcie von na miesto volania

Funkcie

Cvičenie: vytvorte funkciu pow, ktorá vráti druhú mocninu svojho argumentu

Tip: druhá mocnina znamená, že číslo vynásobite sebou samým

function pow(arg) {
    // ...
}

var x = pow(4);

console.log(x); // 16

function pow(arg) {
    return arg * arg;
}

var x = pow(4);

console.log(x); // 16

Funkcie

Cvičenie: vytvorte funkciu max, ktorá vráti ten väčší zo svojich dvoch argumentov

function max(x, y) {
    // ...
}

var greatest = max(4, 8);

console.log(greatest); // 8

function max(x, y) {
    if (x > y) {
        return x;
    }

    return y;
}

var greatest = max(4, 8);

console.log(greatest); // 8

Cykly

Druhy cyklov

while

while (podmienka) {
    // zoznamPríkazov
}

Najskôr sa vyhodnotí podmienka

a keď je platná, tak sa vykoná telo.

do ... while

do {
    // zoznamPríkazov
} while (podmienka);

Podmienka sa vyhodnocuje po vykonaní príkazov. Pokiaľ je pravdivá, tak sa vykonanie opakuje.

for

for (inicializácia; podmienka; krok) {
    // zoznamPríkazov
}

Najskôr sa urobí inicializácia
Potom sa vykoná telo cyklu
Vykonajú sa operácie pre krok
Vyhodnotí sa podmienka
Ak bola podmienka pravdivá, tak sa pokračuje od bodu 2 (vykonanie tela)

for

for (var i = 0; i < 10; i++) {
    //zoznamPríkazov
}

Zadanie:

Napíšte funkciu pre kreslenie čiary ľubovoľnej dĺžky pomocou cyklu for

Riešenie

function nakresliCiaru(dlzka) {
    for (var i = 0; i < dlzka; i++) {
        polozZnacku();

        if (jePredTebouStena()) {
            break;
        }

        krokDopredu();
    }
}

Pozor na podmienky

var mozemKracat = true;

while (mozemKracat) {
    krokDopredu();
}

Tomuto sa vraví nekonečný cyklus

Typy premenných

Primitívne typy

undefined (vlastnosť, 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

Krabička, v ktorá v sebe obsahuje skupinu primitívnych hodnôt alebo ďalších objektov.

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

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

var prazdnyObjekt = {};

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

Objekt

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

var 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;

Objekt

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

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

Úloha

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

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

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

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