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

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;

A

B

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
}
  1. Najskôr sa urobí inicializácia
  2. Potom sa vykoná telo cyklu
  3. Vykonajú sa operácie pre krok
  4. Vyhodnotí sa podmienka
  5. 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,
};

Programovanie v Javascripte, časť 3

By Milan Herda

Programovanie v Javascripte, časť 3

  • 611

More from Milan Herda