====== Javascript ======

===== Úvod =====
  * Syntax JS
  * Způsoby umístnění JS
  * HTML a CSS v paměti = DOM. Manipulace pomoci JS.

===== První JS kroky =====
  - **hello world**: ''alert'' při otevření stránky
  - **if**: změna zprávy v ''alert'' pomoci ''confirm''
  - **definice funkce**, **HTML atribut onclick**: předchozí funkcionalita se spustí po stlačení tlačítka
  - **lokální vs globální proměnné**: inkrementování čísla zobrazovaného v ''alert''

===== Dotazování a manipulace DOM =====
  - **querySelector**: změna zprávy v ''alert'' pomoci textového pole
  - Vytvořte novou stránku s nadpisem ''h1'' a textem ''p''
  - **addEventListener**, **dynamické CSS**: kliknutím na nadpis (ne tlačítko) skryjte text. Připojte obslužní funkci bez pomoci HTML. Opakovaným klikáním střídejte zobrazování a skrývání textu
  - **form + JS**: na začátek stránky přidejte ''form'' se dvěma textovými poli (pro nadpis a text) a potvrzovacím tlačítkem.
    - Potvrzení formuláře neudělá redirect, ale přidá na konec stránky dva nové elementy ''h1'' a ''p'', kterých obsah odpovída textovým polím
    - Přidejte omezení na obsah textových polí pomoci JS
    - Zkuste si tohle omezení udělat bez pomoci JS (HTML atributy //pattern//, //minlength//, atd.)
  - **cyklus**, **pole**: Na začátek stránky přidejte tlačítko "Skrýt/zobrazit všechny texty", které bude střídavě skrývat a zobrazovat všechny elementy ''p''

===== Dobrovolný challenge =====
  - Hraní si s **id**, **events**, **query selectors**: Zachovejte formulář přidávání nových nadpisů a textů. Zařiďte, aby kliknutí na nadpis ''h1'' skrývalo/zobrazovalo jen ten jediný následující element ''p'' (žádný jiný !)
  - **Hra čtverec**: Udělejte novou stránku, která na začátku zobrazí čtverec rozměrů 512x512 náhodné barvy. Kliknutí na čtverec ho rozdělí na dvě poloviny: obdélníky náhodných barev. Kliknutí na jeden obdélník ho rozdělí na poloviny: dva čtverce náhodných barev. Atd atd, čtverec velikosti //8x8px// už click event ignoruje. Pozor, velikost základního čtverce se nemění a rozdělování na poloviny funguje okamžite a je pixel perfect. Tzn. žádné nesymetrické posouvání, překrývání, blikání, atd. Využijte **JS skills** s dnešního cvika, doporučuji také využít **flexbox**.
    * ukázka: https://gitlab.fel.cvut.cz/dzuremar/teaching-zwa/-/blob/main/cv6/square/zadani/README.md
    * řešení na webu (zveřejním na dalším cviku): https://wa.toad.cz/~dzuremar/cv6/square/reseni/
    * řešení gitlab (zveřejním na dalším cviku): https://gitlab.fel.cvut.cz/dzuremar/teaching-zwa/-/tree/main/cv6/square/reseni

===== Odkazy =====
  * [[https://www.w3schools.com/Jsref/met_document_queryselector.asp|querySelector]]
  * [[https://www.w3schools.com/jsref/met_element_addeventlistener.asp|addEventListener]]
  * [[https://www.w3schools.com/js/default.asp|Javascript tutorial]]