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)

Úloha

Precvičte si selektory

CSS

Viac info

Otázky?

Návrat k JavaScriptu

Robot Karel

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:

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

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

Úloha

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

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

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

Otázky?

Školenie JS 2020 - lekcia 02

By Milan Herda

Školenie JS 2020 - lekcia 02

  • 101
Loading comments...

More from Milan Herda