LAB10 - nvbach91/4IZ268-2022-2023-ZS GitHub Wiki

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>';
  • 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

Obsah

Formuláře

Debugging v 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

Pokedex demo

  • Kde vzít data:
  • 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/

Domácí úkol

  • 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-2022-2023-ZS/tree/master/www/nguv03/cv10x/homework
  • Úkol vypracujte a odevzdejte přes Pull Request (návod) a také nahrajte na server eso, aby byl dostupný přes odkaz: https://eso.vse.cz/~xname/cv10/homework (doplňte svůj xname), odkaz mi napište také do Pull Requestu
  • Termín odevzdání: příští Čt 23:59:59

jQuery

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

Příště

  • jQuery
  • JSON, AJAX
  • API služby
  • HTML5 API (localStorage, IndexedDB, sound, video, ...)
⚠️ **GitHub.com Fallback** ⚠️