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 !

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?

Dalo

Povieme si nabudúce

Školenie JS 2020 - lekcia 03

By Milan Herda

Školenie JS 2020 - lekcia 03

  • 584

More from Milan Herda