• https://4iz268.github.io/cviceni/

• element.innerHTML += '<li>item</li>';
• element.innerHTML = '<li>item</li>';
• element.appendChild(newElement);
• 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
• elementy vybírejte a ukládejte do proměnných pomocí querySelectoru pouze jednou při inicializaci skriptu
• nezapomínejte na základní věci jako const, let, závorky, středníky
• funkce alert() funguje tak, že zastaví kód v místě jeho volání, takže spíše nepoužívat
• formátování kódu, indentace, názvy proměnných
• nepoužívat HTML onclick, onsubmit atributy
• používat form submit namisto button click

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

• https://github.com/4iz268/cviceni/tree/master/10-formulare/
• Vytváření formulářů
• Zpracování formulářů
• Validace formulářů pomocí HTML5 a pomocí JavaScriptu

• 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
  • https://pokeapi.co/docs/v2#pokemon
• 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/

• komunikace mezi klientem (prohlížeč) a serverem probíhá přes HTTP protokol (většinou RESP API)
• prohlížeč JavaScriptem zakládá a posílá požadavky na server a server vrací odpověď zpátky do prohlížeče
• v rámci serverové odpovědi najdeme potřebná data pro další zpracování

fetch('https://pokeapi.co/api/v2/pokemon/pikachu').then((resp) => {
    return resp.json();
}).then((data) => {
    console.log(data); // tady jsou data
});

nebo pomocí async/await syntax

(async () => {
  const resp = await fetch('https://pokeapi.co/api/v2/pokemon/pikachu');
  const data = await resp.json();
  console.log(data); // tady jsou data
});

• 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. Takže doporučuji, pokud jste neudělali ty staré úkoly, abyste je 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-2024-2025-ZS/tree/master/www/nguv03/cv07x/homework
• Úkol vypracujte a odevzdejte přes Pull Request (viz návod) a také nahrajte na server eso, aby byl dostupný přes odkaz: https://eso.vse.cz/~xname/cv07/homework (doplňte svůj xname), odkaz napište do Pull Requestu
• Své řešení pošlete jednomu spolužákovi ať to otestuje, můžete ho pak tagnout ve svém Pull Requestu a přidat ho jako Reviewer, aby udělal kontrolu.
• Termín odevzdání: 23:59:59 před dalším cvičením

• přepis aplikace Pokedex do jQuery - porovnání

• jQuery
• JSON, AJAX
• API služby
• HTML5 API (localStorage, IndexedDB, sound, video, ...)