Základy programovania v JavaScripte

Milan Herda, 01/2020

Lekcia 2

CSS

Cascading Style Sheets

Kaskádové štýly

Jazyk, ktorým sa popisuje výzor HTML (alebo XML) dokumentu

CSS

CSS

Syntax

čo chcem upraviť {
    ako to chcem upraviť
}
vlastnosť: hodnota;
vlastnosť2: hodnota;
* {
    color: black;
    font-size: 14px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    color: blue;
}

p {
    font-style: italic;
}

Zoznam deklarácií, hovoriacich, "ako to chcem upraviť":

Pravidlá:

CSS

čo chcem upraviť {
    ako to chcem upraviť
}
zoznam selektorov {
    zoznam deklarácií
}

Pamätáte na document.querySelector?

CSS

Jednoduché selektory

univerzálny *
element (tag) div
triedny .active
id #main-title

Viete aj kombinovať:

li.active { /* ... */ }
div#menu { /*... */ }
div#menu.hidden { /* ... */ }

CSS

Atribútové selektory

[attribút] [data-cy]
[atribút="hodnota"] [data-cy="button"]
atribút~="hodnota" [data-cy~="button"] 
<input type="submit" data-cy="button" value="Odoslať">

<input type="submit" data-cy="cv-form button" value="Odoslať">

<input type="submit" data-cy="button cv-form" value="Odoslať">

CSS

Pseudo triedy

:focus element má fokus
:hover nad elementom je myš
:nth-child(N) N-tý prvok
a veľa ďalších

Pridávajú sa na koniec iného selectoru

input:focus { /* Input má fokus (píše sa doň) */ }

a:hover { /* nad linkou je myš */ }

tr:nth-child(2) { /* druhý riadok tabuľky */ }

tr:nth-child(2n) { /* každý druhý riadok tabuľky */}

CSS

Pseudo elementy

::before pred elementom
::after po elemente
:nth-child(N) N-tý prvok
a veľa ďalších

Pridávajú sa na koniec iného selectoru a každý má špecifické správanie

a::before { content: 'text pred'; }
a::after { content: 'text po'; }

CSS

Kombinácie selektorov

A, B A alebo B
A B Každé B, ktoré je potomkom A
A > B Každé B, ktoré je priamym potomkom A
A + B Každé B, ktoré má priamo pred sebou A (A aj B majú spoločného rodiča)
A ~ B Každé B, ktoré má pred sebou A (A aj B majú spoločného rodiča)

CSS

Viac info

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

http://jecas.cz/css-selektory

Úloha

https://bitbucket.org/perungrad/robot-karel-js/downloads/test-selektorov.html

Precvičte si selektory

Otázky?

Návrat k JavaScriptu

Ale najskôr

Nainštalujeme Prettier

Prettier

Pri programovaní je dôležité dodržiavať určité formátovacie pravidlá.

  • počítaču je síce jedno, ako je náš kód naformátovaný
  • ale iným programátorom peknou úpravou uľahčíme čítanie
  • a nám tiež

Prettier je nástroj, ktorý náš kód bude formátovať sám podľa nami daných pravidiel.

V editore VS Code otvoríme zoznam pluginov

Pohľadáme Prettier a klikneme na "Install"

Otvoríme si nastavenia

File > Preferences > Settings

Nastavenia si dáme otvoriť ako súbor

 

Pridáme nasledovné riadky

 

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

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

Ú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();
});

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

Funkcie

Pomáhajú nám rozdeliť si algoritmus (a kód) na menšie celky (Divide and Conquer)

Je dobré ich vhodne pomenovávať

Dobrý názov by mal jednoznačne hovoriť, čo funkcia robí

Úloha

Vytvorte funkciu, v ktorej Karel urobí krok dopredu a položí značku

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

Úloha

Vytvorte funkciu, v ktorej Karel:

  • nakreslí štvorec 2x2
  • a vráti sa do pôvodnej polohy
function stvorec2x2() {
    polozZnacku();
    krokDopredu();
    polozZnacku();
    otocDoprava();
  
    krokDopredu();
    polozZnacku();
    otocDoprava();
  
    krokDopredu();
    polozZnacku();
    otocDoprava();
  
    krokDopredu();
    otocDoprava();
}

Úloha

function stvorec2x2() {
    polozZnacku();
    krokDopredu();
    polozZnacku();
    otocDoprava();

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

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

    krokDopredu();
    otocDoprava();
}

Dá sa to zjednodušiť?

Úloha

function stvorec2x2() {

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

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

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

    krokDopredu();
    otocDoprava();
}

Dá sa to zjednodušiť?

Úloha

function stvorec2x2() {

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

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

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

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

Dá sa to zjednodušiť?

Úloha

function stvorec2x2() {
    krokDopredu();
    polozZnacku();
    otocDoprava();
  
    krokDopredu();
    polozZnacku();
    otocDoprava();
  
    krokDopredu();
    polozZnacku();
    otocDoprava();
  
    krokDopredu();
    otocDoprava();
    polozZnacku();
}

Úloha

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

function polozVpreduAOtoc() {
    polozVpredu();
    otocDoprava();
}

function stvorec2x2() {
    polozVpreduAOtoc();
    polozVpreduAOtoc();
    polozVpreduAOtoc();
    polozVpreduAOtoc();
}

Otázky?