Základy programovania v JavaScripte

Milan Herda, 02/2020

Lekcia 3

O čom budeme hovoriť

Opakovanie
Opakovanie
Premenné
Operátory

Opakovanie

web != internet
HTTP
HTML, CSS, Javascript
algoritmus
funkcie a dáta

Opakované vykonávanie

Vytvorte novú funkciu prikladOpakovanie

Funkciu dajte vykonať vo vnútri EventListeneru

a zakomentujte alebo zmažte vykonávanie prikladUvod

function prikladUvod() {
    /* kód úvodného príkladu */
}

function prikladOpakovanie() {
}

document.addEventListener("DOMContentLoaded", function (event) {
    prikladOpakovanie();
});

Prikážte Karlovi, aby poukladal značky v celom prvom stĺpci

function prikladOpakovanie() {
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
    polozZnacku();
    krokDopredu();
}

Ako to zjednodušiť?

Cyklus

while
do...while
for
for...in
for...of

Cyklus while

while (vstupnáPodmienka) {
    /*
    telo cyklu
    */
}

Keď sa vstupná podmienka vyhodnotí ako pravdivá (true), tak sa vstúpi do tela cyklu.

Inak sa celé telo preskočí.

Ak sa vstúpilo do tela cyklu, tak po jeho vykonaní sa opäť testuje vstupná podmienka.

Jednému prechodu telom sa hovorí iterácia

Cyklus while

while (nie je pred Karlom stena) {
    polozZnacku();
    krokDopredu();
}

Ale ako zistíme, či je pred Karlom stena?

Spýtame sa ho :)

Dva "tajné" príkazy, ktoré Karel pozná:

jePredTebouStena()

Vráti true, ak je pred Karlom stena.

Inak vráti false

stojisNaZnacke()

Vráti true, ak Karel stojí na značke.

Inak vráti false

jePredTebouStena()

Ale my potrebujeme vykonať telo vtedy, keď

NIE JE pred Karlom stena

!

Operátor !

Operátor ! neguje výsledok výrazu, ktorý nasleduje po ňom.

true mení na false

false mení na true


!výraz

! výraz

Zadanie

Upravte funkciu prikladOpakovanie tak, aby využíval cyklus.

function prikladOpakovanie() {
    polozZnacku();

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

Premenné

Úloha

Zoberte si papier a pero
Zapíšte si, aký druh a koľko tvarov uvidíte na obrázku

Štvorec	3
Kruh	4
Trojuholník	2

Štvorec	?
Kruh	?
Trojuholník	?

Koľko ich je teraz?

Prepisujte čísla vo svojej tabuľke

Štvorec	3
Kruh	5
Trojuholník	4

Všimnite si:

číslo sa menilo
názov ostával

Urobte si druhú tabuľku
Tvary na bielom pozadí rátajte do novej tabuľky
Tvary na sivom pozadí zapíšte do pôvodnej

Urobte si druhú tabuľku
Tvary na bielom pozadí rátajte do novej tabuľky
Tvary na sivom pozadí zapíšte do pôvodnej

Štvorec	3
Kruh	3
Trojuholník	2

Štvorec	4
Kruh	2
Trojuholník	5

Všimnite si:

počty sú iné v závislosti od pozadia (kontextu)
názov je stále rovnaký (bez ohľadu na kontext)

Štvorec	3
Kruh	3
Trojuholník	2

Premenná

Názov "krabičky", v ktorej máme uloženú hodnotu

Každý program sa skladá z dvoch zložiek:

Dáta

Funkcie

to sú príkazy, ktoré sa vykonávajú
pracujú s dátami

údaje, s ktorými sa pracuje

Dáta máme uložené v premenných

Aby sme s premennou mohli pracovať, musíme ju najskôr "predstaviť"

var stvorec;
var kruh;
var trojuholnik;

Predstavenie = deklarácia

Neskôr môžeme do premennej vložiť ("zapísať") hodnotu.

stvorec = 4;
kruh = 5;
trojuholnik = 3;

// ...

stvorec = 7;
kruh = 2;

Ak poznáme hodnotu už v čase predstavovania, tak ju vieme zapísať hneď

var stvorec = 4;
var kruh = 5;
var trojuholnik = 3;

Deklarácii spojenou s priradením hodnoty sa hovorí definícia

Premennú vieme "predstaviť" (deklarovať)

troma spôsobmi:

var stvorec = 4;

let stvorec = 4;

const stvorec = 4;

var

Premennú predstavuje iba funkcii, vo vnútri ktorej sa predstavenie udialo

*Ak sú vo vnútri funkcie deklarované aj iné funkcie, tieto novú premennú poznajú tiež.

function foo() {
    var stvorec = 3;
  
    console.log('vo vnutri funkcie:', stvorec);
}

console.log('mimo funkcie:', stvorec);

let

Premennú predstavuje iba bloku, vo vnútri ktorého sa predstavenie udialo

*Ak sú vo vnútri bloku deklarované aj iné bloky a funkcie, tieto novú premennú poznajú tiež.

let stvorec = 3;
console.log('mimo bloku:', stvorec);

{
    let stvorec = 8;
    console.log('vnutri bloku:', stvorec);
}

console.log('mimo bloku:', stvorec);

const

Rovnako ako let

Ale už nie je možné hodnotu neskôr meniť

const deklaruje premennú, ktorá nie je úplne premenlivá

const stvorec = 7;

stvorec = 4; // chyba

Čo môžeme do premennej uložiť?

Celé čísla

stvorec = 5;

Desatinné čísla

priemernaTeplota = 23.5;

Čo môžeme do premennej uložiť?

Pravdivostné hodnoty (true/false)

jeTuStena = true;
jeZima = false;

Čo môžeme do premennej uložiť?

Reťazce ("texty")

nadpis    = 'Lorem Ipsum';
podnadpis = "Dolor sit amet";
odstavec  = `Consectetur elit`;

Čo môžeme do premennej uložiť?

Funkcie

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

Čo môžeme do premennej uložiť?

A veľa iných vecí, o ktorých si povieme neskôr

Čo môžeme do premennej uložiť?

Do premennej nemusíme ukladať iba presnú hodnotu, môžeme tam dať aj výsledok výrazu

var x = 4 + 3;
var y = x + 6 - 2;
var z = x - y;

Úloha

Vytvorte novú funkiu policokVStlpci(), v ktorej Karel prejde celým stĺpcom
Bude si rátať, koľkými políčkami prešiel
Na konci do konzoly vypíše, koľko je políčok

Na výpis použite funkciu console.log()

Riešenie

function policokVStlpci() {}
    let pocetPolicok = 1;

    while (!jePredTebouStena()) {
        krokDopredu();

        pocetPolicok = pocetPolicok + 1;
    }

    console.log(pocetPolicok);
}

pocetPolicok = pocetPolicok + 1;

Priradenie do premennej je vždy úplne posledná operácia z príkazu.

Preto vieme vo výraze na pravej strane použiť pôvodnú hodnotu premennej

nová hodnota = stará hodnota + 1;

Aké iné operátory viem použiť?

Aritmetické operátory

Operátor	príklad	výsledok
+	x = 1 + 2;	3
-	x = 5 - 3;	2
*	x = 5 * 4;	20
/	x = 20 / 5;	4
%	x = 22 % 5;	2

Aritmetické operátory

Operátor	príklad	výsledok
postfixové ++	x = 5; x++;	x === 6
prefixové ++	x = 5; ++x;	x === 6
postfixové --	x = 5; x--;	x === 4
prefixové --	x = 5; --x;	x === 4
unárne +	x = +5;	5
unárne -	x = -5;	-5

Aritmetické operátory

Operátor	príklad	výsledok
postfixové ++	x = 5; y = x++;	x === 6 y === 5
prefixové ++	x = 5; y = ++x;	x === 6 y === 6
postfixové --	x = 5; y = x--;	x === 4 y === 5
prefixové --	x = 5; y = --x;	x === 4 y === 4

Reťazcové operátory

Spájanie reťazcov	príklad
+	x = 'hello'; y = 'world'; z = x + ' ' + y;

Porovnávacie operátory

Operátor	Význam	Príklad
===	je zhodné	a === b
!==	nie je zhodné	a !== b
<	je menšie	a < b
>	je väčšie	a > b
<=	je menšie alebo rovné	a <= b
>=	je väčšie alebo rovné	a >= b

Výsledkom je hodnota true alebo false

Posledné dva je lepšie nepoužívať

==	je rovné	a == b
!=	nie je rovné	a != b

Úloha

Upravte funkiu policokVStlpci()

použijeme ++ operátor
Na konci sa nevypíše iba číslo, ale text "Počet políčok v stĺpci je N"

function policokVStlpci() {}
    let pocetPolicok = 1;

    while (!jePredTebouStena()) {
        krokDopredu();

        pocetPolicok++;
    }

    console.log('Počet políčok v stĺpci je ' + pocetPolicok);
}

Riešenie

Úloha

Pomocou cyklu while a premennej urobte funkciu, kde Karel vykreslí "čiaru" dlhú 5 políčok.

Pomôcky

Vo while podmienke vieme tiež používať výrazy
porovnanie je výraz, ktorého výsledok je true alebo false
takže vieme použiť porovnávacie operátory

function ciaraDlzky5() {
    const dlzka = 5;
    let uzPrejdene = 1;
  
    polozZnacku();

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

        uzPrejdene = uzPrejdene + 1;
    }
}

Pomôcky

Vo while podmienke vieme tiež používať výrazy
0 je v boolovských výrazoch to isté ako false

function ciaraDlzky5() {
    let trebaPrejst = 4;
  
    polozZnacku();

    while (trebaPrejst) {
        krokDopredu();
        polozZnacku();

        trebaPrejst--;
    }
}

function ciaraDlzky5() {
    let trebaPrejst = 4;
  
    polozZnacku();

    while (trebaPrejst--) {
        krokDopredu();
        polozZnacku();
    }
}

function ciaraDlzky5() {
    let trebaPrejst = 5;
    
    polozZnacku();

    while (--trebaPrejst) {
        krokDopredu();
        polozZnacku();
    }
}

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?

Základy programovania v JavaScripte

O čom budeme hovoriť

Opakovanie

Opakované vykonávanie

Cyklus

while

do...while

for

for...in

for...of

Cyklus while

Cyklus while

Dva "tajné" príkazy, ktoré Karel pozná:

jePredTebouStena()

stojisNaZnacke()

jePredTebouStena()

NIE JE pred Karlom stena

!

Operátor !

Operátor !

Zadanie

Premenné

Úloha

Koľko ich je teraz?

Premenná

Dáta

Funkcie

Dáta máme uložené v premenných

var

let

const

Čo môžeme do premennej uložiť?

Čo môžeme do premennej uložiť?

Čo môžeme do premennej uložiť?

Čo môžeme do premennej uložiť?

Čo môžeme do premennej uložiť?

Čo môžeme do premennej uložiť?

Úloha

Riešenie

Aké iné operátory viem použiť?

Aritmetické operátory

Aritmetické operátory

Aritmetické operátory

Reťazcové operátory

Porovnávacie operátory

Úloha

Riešenie

Úloha

Pomôcky

Pomôcky

Dalo

Povieme si nabudúce