• Poučení o bezpečnosti a pravidlech
• Plán kroužku
• Javascript v kontextu jiných programovacích jazyků
• Seznámení s účastníky
• První seznámení s Javascriptem - v konzoli prohlížeče
• Další zdroje: W3Schools

• HTML: lekce
• html šablona
• https://validator.w3.org/

• Koronavirové opatření, nekonáme se (zatím ani online)
• Zkuste si doma vytvořit html stránku, třeba s tématikou vašeho koníčku.
• Použijte zápis z minula, W3Schools/html a výslednou stránku si zkontrolujte validátorem
• S výsledkem se mi můžete pochlubit skrz email adam@adasek.cz

• výuka proběhla na dálku
• CSS - kaskádové styly
• testovací html soubor
• CSS referenční seznam
• Zápis CSS, základní selektory - tag, .trida, #identifikator
• CSS na textu: vlastnosti:
  • font-size (hodnoty např. 45px nebo 2em)
  • font-family (např. "Times New Roman", Sans-Serif
  • font-weight (např. bold nebo 500 nebo 900)
  • font-style (např. italic)
  • color (např #ff3300 nebo red nebo rgb(255, 0 , 120))
  • text-align (např. left nebo center)
  • text-decoration (např. underline)
  • text-shadow (např #FC0 1px 0 10px;

• výuka proběhla na dálku na Skypu
• opakování z minula - napodobte vzhled textu
• blokové versus řádkové prvky (vlastnost display:block nebo inline)
• obtékání vlastností float:left nebo right)
• CSS pozicování: vlastnostposition, hodnoty normal, relative, absolute, fixed
• Vlastnosti width (šířka), max-width (obdobně height a max-height), délkové jednotky (px, em, cm, %)
• Jednoduchý klasický css layout se sloupečkem
• Moderní webdesign: Flexbox, přizpůsobování různým displejům (testujte na mobilech!)

28. října - státní svátek a podzimní prázdniny, nekonáme se

• výuka proběhla na dálku na Skypu
• Práce s html šablonou
• CSS: opakování
• Javascript ve stránce - první krůčky (funkce alert, confirm)

• na Skype
• Začneme se Šablona s formulářem
• Přístup k html prvkům pomocí var prvek = document.getElementById("identifikator_prvku")
• Ovlivňování jejich stavu: prvek.value="abc" pro formulářové prvky, prvek.innerHTML="Hodnota <br>s html kódem"
• Cíl práce: na šabloně vytvořit jednoduchou kalkulačku

• na Skype
• podmíněný kód - if else else if
• úloha: zvířátka

• na Skype
• podmínky, logika
• úvod do soustavy souřadné
• úloha: obrazovka

• na Skype
• HTML element select
• opakování: podmínky (if)
• úloha: vánoční dárky

• na Skype
• Představení programovacích her:
  • https://www.codingame.com/
  • https://js.checkio.org/
  • https://alexnisnevich.github.io/untrusted/

• Cykly for a while
  • úloha: řada násobků 3
  • úloha: rozbijte prohlížeč (nekonečný cyklus)
  • úloha: vygenerovat řadu: mám 1 husu, 2 husy, 3 husy, 4 husy, 5 hus … (podmínky uvnitř cyklu)
  • úloha*: tabulka malé násobilky (vnořený for cyklus)

🎄👪🎄 vánoční prázdniny ❄️☃️🎁

• for cyklus
  • zjištění prvočíselnosti

• pole (datová struktura), for cyklus
• Hledání maxima v poli

• pole
• Tajní agenti (pole hesel)

• Řetězce (strings)

• Úloha: karty (pole)

• Od pole k objektům: úloha tramvaje

• Úloha tramvaje: Počítání pomocným polem (čárky)

• Objekty

• Objekty: pejsci

• úloha autíčko

• úloha autíčko - odvození vzorečku pro otáčení autíčka

• úloha autíčko - vstup z klávesnice

🎀🥚🐣 Velikonoční víkend 🍫🐇🎀

• úloha autíčko - akcelerace

• úloha autíčko - další objekty

Suplování Martin

• úloha autíčko - kolize

• JSON

• JSON: pokračujte se seznamem zastávek z minula, nebo si zkuste úlohu s Lexikonem zvířat

Úloha: hra tahání zápalek

Již ve stanici

• JS DOM, Elementy, removeChid

• JS DOM: průchod stromem (HTML stránky) - rekurzivní

• Použití knihoven: Co je v programování knihovna?
• Použití knihovny Matter.js k simulování fyziky: příklad.

• Knihovna Matter.js: arcade volleyball

• Knihovny: dokončení
• Rekapitulace kroužku, rozloučení