Programovanie v JavaScripte,

časť 2

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

História

  • Netscape
  • Prvá vojna browserov
  • 5/1995 - prototyp jazyka Mocha/LiveScript hotový za 10 dní
  • 9/1995 - premenovaný na JavaScript a vložený do Netscape Navigator 2
  • 1996 - JScript v Internet Explorer 3
  • 6/1997 - ECMAScript

Autor: Brendan Eich

JavaScript vyzerá podobne ako iné jazyky

Ale len vyzerá

Je ľahké v ňom začať

Ale je ťažšie ho pochopiť a ovládnuť

Úvod do programovania

Počítač neurobí to, čo chceš.

Urobí to, čo mu povieš.

Presnosť

Programovací jazyk nie je ako prirodzený jazyk.

Vyjadrovať sa treba presne.

Syntax treba dodržiavať na 100%

99.9% nie je good enough.

Hello World

<!doctype html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Môj prvý JS program</h1>

    <div id="content"></div>

    <script>
        console.log('Hello World');

        var element = document.querySelector('#content');

        element.innerHTML = 'Hello World!';
    </script>
</body>
</html>

Algoritmus

Predpísané poradie krokov, ktoré sú potrebné na splnenie úlohy.

Recept

Ale v prípade programovania super presný.

Algoritmizácia

Rozloženie problému na menšie časti (a ich popísanie algoritmom)

  • Z vajec, múky a cukru upečieme piškótové cesto
  • Uvaríme plnku zo zlatého klasu, mlieka, cukru a múky
  • Cesto prekrojíme, stred naplníme plnkou s jahodami
  • Okraje potrieme plnkou
  • Na vrch torty natrieme lekvár, oukladáme jahody a zalejeme želé

Upečieme jahodovú tortu

Robot Karel

https://bitbucket.org/perungrad/robot-karel-js/downloads/robot-karel.zip

Robot Karel

Karel je jednoduchý robot, ktorý sa vie pohybovať a ukladať na zem značky.

Pozná tieto príkazy:

  • krokDopredu()
  • otocDoprava()
  • polozZnacku()
  • zdvihniZnacku()

Príkazy mu viete zapísať do súboru sandbox.js

Karel ich bude vykonávať v tom poradí, ako sú zapísané.

Robot Karel

Príkaz musí mať na svojom konci bodkočiarku

Je vhodné, aby bol na každom riadku iba jeden príkaz (ale nemusí byť)

krokDopredu();
polozZnacku();

Úloha:

Prikážte Karlovi, aby sa pohol o 2 políčka dopredu.

krokDopredu();
krokDopredu();

A otočí sa doprava

otocDoprava();

Nech položí značku

polozZnacku();

Pokračovanie úlohy:

Prikážte Karlovi, aby sa pohol o ďalšie 2 políčka dopredu.

krokDopredu();
krokDopredu();

otocDoprava();
krokDopredu();
krokDopredu();
polozZnacku();

Pohne o ďalšie 2 políčka a položí značku

Otočí sa doprava

Výsledok:

Krajší Karel:

https://codecombat.com/play

Pokračovanie

Otočíme Karla doľava

Karel nepozná príkaz pre otočenie doľava

otocDoprava();
otocDoprava();
otocDoprava();

Pokračovanie

Ďalšie dva kroky, ešte raz doľava, dva kroky a položíme značku

Otáčanie doľava vyzerá byť užitočná vec.

Nevieme to pridať k príkazom, ktoré Karel pozná?

function otocDolava() {
    otocDoprava();
    otocDoprava();
    otocDoprava();
}

Funkcia

Zoskupenie viacerých príkazov pod jeden názov

Zapísaním funkcie vykonávame jej deklaráciu

Ide iba o predpis

K vykonaniu príkazov zapísaných vo vnútri funkcie dôjde v okamihu jej volania


otocDolava()

Funkcia

Názov funkcie môže obsahovať iba alfanumerické znaky, podtržítka a znak $

Prvý znak názvu nesmie byť číslo

Veľké a malé písmená sú považované za rozdielne

*Môže obsahovať diakritiku a dokonca emoji, ale zostaňte radšej pri anglickej abecede

Úloha

Vytvorte novú funkciu nazvanú dvojKrok, v ktorej bude Karel robiť dva kroky dopredu.

Použite novú funkciu v už hotovom kóde.

Riešenie

function otocDolava() {
    otocDoprava();
    otocDoprava();
    otocDoprava();
}

function dvojKrok() {
    krokDopredu();
    krokDopredu();
}
dvojKrok();

polozZnacku();

otocDoprava();
dvojKrok();

otocDoprava();
dvojKrok();

polozZnacku();

otocDolava();
dvojKrok();

otocDolava();
dvojKrok();

polozZnacku();

Zabaľte doterajší výkonný kód do novej funkcie nazvanej prikladUvod

Funkciu dajte vykonať vo vnútri EventListeneru

function prikladUvod() {
    dvojKrok();

    /* zvyšok kódu */

    polozZnacku();
}

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

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() {
    while (!jePredTebouStena()) {
        polozZnacku();
        krokDopredu();
    }

    polozZnacku();
}

Premenné

Premenná

Krabička, ktorá má svoj názov

a do ktorej si viete uložiť nejakú hodnotu

var nazov = 'hodnota';
boolean var nazov = true;
var nazov = false;
celé číslo var nazov = 42;
desatinné číslo var nazov = 4.2;
reťazec (text) var nazov = 'Lorem Ipsum';
var nazov = "Lorem Ipsum";
 

Premenná

Názov premenná znamená, že hodnota sa môže meniť

nazov = 'nová hodnota';

Pri zmene už nepotrebujeme použiť var

Do premennej nemusíme vkladať iba presnú hodnotu, ale dá sa aj výsledok výrazu

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

Operátory

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

Operátory

Aritmetické 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
unárne + x = +5; 5
unárne - x = -5; -5

Operátory

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

z = x + ' ' + y;

Úloha

Urobte novú funkciu prikladPremenne,

v ktorej Karel zráta počet políčok v stĺpci

Nakoniec tento počet  pomocou console.log vypíše

V konzole očakávam text:

Počet políčok v stĺpci je N

Riešenie

var pocetPolicok = 1;

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

    pocetPolicok++;

    /* 
    pocetPolicok = pocetPolicok + 1;
    */
}

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

Ú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 
function ciaraDlzky5() {
    var dlzka = 5;
    var prejdene = 0;

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

        prejdene = prejdene + 1;
    }
}

Porovnávacie operátory

  • ===
  • !==
  • <
  • >
  • <=
  • >=
  • ==
  • !=

* lepšie nepoužívať

Pomôcky

  • Vo while podmienke vieme tiež používať výrazy
  • 0 je v boolovských výrazoch to isté ako false 
function ciaraDlzky5() {
    var trebaPrejst = 5;

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

        trebaPrejst--;
    }
}
function ciaraDlzky5() {
    var trebaPrejst = 5;

    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?

Argumenty

Argument je premenná, ktorá je deklarovaná priamo v hlavičke funkcie.

Hodnota argumentu sa definuje až v čase zavolania

function priklad(foo, bar) {
    console.log(foo);
    console.log(bar);
}
priklad('ahoj', 7);

priklad(3, 4);

Napíšte funkciu pre nakreslenie čiary ľubovoľnej dĺžky.

Úloha

function nakresliCiaru(dlzka) {
    var nakreslenych = 0;

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

        nakreslenych = nakreslenych + 1;
    }
}

Čo ak narazíme do steny?

Podmienky

if (podmienka) {
    /* kód pri splnení podmienky */
}
if (podmienka) {
    /* kód pri splnení podmienky */
} else {
    /* kód pri nesplnení podmienky */
}
if (podmienka) {
    /* kód pri splnení podmienky */
} else if (iná podmienka) {
    /* kód pri splnení inej podmienky */
} else {
    /* kód pri nesplnení podmienky */
}

Operátory && a ||

A B A && B
true true true
true false false
false true false
false false false
A B A || B
true true true
true false true
false true true
false false false 
while (
    (!jePredTebouStena())
    && (nakreslenych < dlzka)
) {
    /* ... */
}
while (podmienka && podmienka2) {
    // ...
}

Predčasné prerušenie tela cyklu

Príkaz break

Príkaz continue

Ukončí vykonávanie cyklu a preskočí hneď za uzatváraciu zátvorku tela cyklu.

Ukončí vykonávanie cyklu a skočí opäť na vstupnú podmienku.

while (podmienka) {
    // ...
    break;
    // ...
}

// ... tu sa pokračuje
while (podmienka) { // návrat sem
    // ...
    continue;
    // ...
}

Napíšte funkciu pre nakreslenie čiary ľubovoľnej dĺžky, ale pri hroziacom náraze do steny ďalšie kresleni prerušíme

Úloha

function nakresliCiaru(dlzka) {
    var nakreslenych = 0;

    while (nakreslenych < dlzka) {
        polozZnacku();
        nakreslenych = nakreslenych + 1;

        if (jePredTebouStena()) {
            break;
        }

        krokDopredu();
    }
}

Napíšte funkciu pre nakreslenie obrysu štvorca so stranou ľubovoľnej dĺžky

Úloha

function nakresliStvorec(dlzka) {
    var ostavaStran = 4;

    while (ostavaStran--) {
        nakresliCiaru(dlzka - 1);
        otocDoprava();
    }
}

Callback

Napíšeme funkciu opakuj, ktorá daný početkrát zopakuje danú operáciu

function opakuj(kolkokrat, operacia) {
    while (kolkokrat--) {
        operacia();
    }
}

opakuj(5, krokDopredu);

Ako callback vieme použiť aj anonymnú funkciu

opakuj(5, function () {
    polozZnacku();
    krokDopredu();
});

Nakreslíme okno

opakuj(5, krokDopredu);
otocDoprava();
opakuj(6, krokDopredu);

opakuj(4, function () {
    nakresliStvorec(5);
    otocDolava();
    krokDopredu();
});

Základy programovania

DONE!