Vývoj webových aplikací - JavaScript

Postřehy z opravy domácího úkolu (JavaScript Caesarova šifra)

element.innerHTML += '<li>item</li>';
element.innerHTML = '<li>item</li>';
nepoužívat innerHTML pokud do něho přidáváte obsah z externích zdrojů, nad kterými nemáte kontrolu - hacker Vám tam může hodit cokoliv
bezpečnější bude document.createElement a innerText

Formuláře
Debugging v prohlížeči
Projekt Pokedex
- https://github.com/nvbach91/4IZ268-2019-2020-ZS/tree/master/www/nguv03/cv10x/pokedex
- Procvičujeme DOM metody, funkce, cykly, event handling, zpracování uživatelských vstupů, atd.
Domácí úkol

otevřete si Developer tools (konzoli) a přejděte na zdrojový kód (soubor main.js)
Chrome: View/Developer/JavaScript Console
zvolte si breakpoint např. ve funkci, která ne nabindovaná k nějaké události a v aplikaci tuto událost spusťte
sledujte celkový stav aplikace a postupně vykrokujte v místě breakpointu
také si ověřte uložené hodnoty v proměnných v rámci scope vybrané funkce

Kde vzít data:
- https://pokemondb.net/pokedex/all
- https://pokemondb.net/pokedex/bulbasaur
Funkční požadavky:
- uživatel napíše jméno Pokemona do inputu, potvrdí a přidá se karta s fotkou Pokemona a jeho název do kolekce
- uživatel napíše více jmen do inputu a potvrdí a objeví se karty s odpovídajícími fotkami
- u každého Pokemona bude tlačítko Odebrat
- ošetření uživatelského vstupu: prázdné stringy, čísla, atp. před přidáváním
- v kolekci nesmí být dva stejní Pokemoni, čili nemůžeme přidat Pokemona, když už ho máme v kolekci
- když uživatel klikne na nějakého Pokemona tak se vhodným způsobem zvýrazní, např. ukáže se na zvětšeném plátně
- filtr pro vyhledávání Pokemona v kolekci (po každém klávesovém zadání do inputu se seznam zaktualizuje podle zadané hodnoty a ukáže pouze Pokemony, jejichž názvy obsahují zadanou hodnotu)
- při generování Pokémona se načítají jeho informace z externího serveru (a potom se zobrazí) - AJAX
- DEMO: https://fcp.vse.cz/4IZ268/2018-2019-ZS/www/nguv03/pokemons/

Vím že prožíváte těžkou dobou s mraky povinností jako prokrastinace a spaní. Jenže prokrastinovat se dá i v JavaScriptu a snít o HTML+CSS je běžná záležitost v rámci intustry standardu. Takže zde je další domácí úkol, tentokrát můžete získat až 2 body.
Znalosti a dovednosti z předchozích domácích úkolů a z účasti na cvičeních jsou nezbytné ke zvládnutí tohoto úkolu (leda že jste Jedi master). Takže doporučuji, pokud jste neudělali ty staré úkoly, abyste se na ně podívali a vyřešili ještě předtím, než se vrhnete do tohoto úkolu. Na druhou stranu si ale myslím, že tento úkol není až tak časově náročné, jednalo by se o 40-60 řádků kódu. Pokud jste dávali pozor na cvičení, neměli byste mít příliš velký problém.
Zadání: https://github.com/nvbach91/4IZ268-2019-2020-ZS/tree/master/www/nguv03/cv10x/homework
Úkol vypracujte a odevzdejte zazipovaný přes e-mail a také nahrajte na server eso, aby byl dostupný přes odkaz: https://eso.vse.cz/~xname/cv10/homework (doplňte svůj xname) + zazipovat a poslat na e-mail včetně tohoto odkazu.
Termín odevzdání: Neděle 01.12.2019 23:59:59