Table of Contents

Javascript

Úvod

První JS kroky

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

Dotazování a manipulace DOM

  1. querySelector: změna zprávy v alert pomoci textového pole
  2. Vytvořte novou stránku s nadpisem h1 a textem p
  3. 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
  4. 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.
    1. 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
    2. Přidejte omezení na obsah textových polí pomoci JS
    3. Zkuste si tohle omezení udělat bez pomoci JS (HTML atributy pattern, minlength, atd.)
  5. 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

  1. 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ý !)
  2. Hra čtverec: Udělejte novou stránku, která na začátku zobrazí čtverec rozměrů 512×512 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.

Odkazy