Gratulujeme!

Gratulujeme, váš nákupní seznam funguje a jste na konci kurzu JavaScriptu! Aplikace přidává položky, kontroluje, co zadáte, sčítá ceny a nechá vás odškrtat, co už máte koupené. A celé jste to napsali sami.

Poslední vylepšení. Odškrtněte mléko a částka k zaplacení zůstane stejná. V obchodě je užitečnější vidět, kolik budou stát položky, které ještě koupené nemáte. Ve funkci spocitejCelkem() proto sčítejte jen ceny položek, které mají koupeno rovno false. Hodí se k tomu podmínka !polozka.koupeno (není koupeno). A protože se zobrazPolozky() spustí po každém kliknutí, částka se změní sama.

Co jste se naučili. Podívejte se, jak si v aplikaci našla místo každá část kurzu:

• Proměnné a konstanty uchovávají prvky stránky, název i cenu.
• Podmínky kontrolují zadání a rozhodují, jestli se položka přeškrtne.
• Pole obsahuje nákupní seznam a push() do něj přidává.
• Cykly procházejí položky, aby je zobrazily a sečetly jejich ceny.
• Funkce rozdělují aplikaci na části s jasným úkolem: zobrazPolozky() zobrazuje, spocitejCelkem() počítá.
• Objekty drží pohromadě, co patří k jedné položce: název, cenu a to, jestli je koupená.
• Stránka: hledáte prvky, měníte jejich text a třídy, vytváříte nové a reagujete na kliknutí.

Uložte si aplikaci. Aplikace se skládá ze dvou souborů a ty musí být ve stejné složce:

1. Vytvořte v počítači novou složku, třeba nakupni-seznam.
2. Otevřete obyčejný textový editor, třeba Poznámkový blok ve Windows nebo TextEdit na Macu (v nabídce Formát přepnutý na prostý text), případně editor kódu, jako je Visual Studio Code. Vložte kód z index.html a uložte ho do složky jako index.html.
3. Stejným způsobem uložte kód ze script.js do téže složky jako script.js.
4. Na index.html dvakrát klikněte a aplikace se otevře v prohlížeči.

Konzole v prohlížeči na první pohled vidět není: otevřete nástroje pro vývojáře klávesou F12 (na Macu Cmd+Option+I) a přepněte na kartu Console (Konzole). Najdete v ní, co váš skript vypisuje, i jeho chyby. Všimněte si také, že po obnovení stránky začne seznam znovu se třemi položkami. Data žijí v proměnné jen po dobu, kdy je stránka otevřená.

Co dál. Teď znáte základy, ze kterých se skládá každý program v JavaScriptu. Pár nápadů, co se naučit dál:

• Vylepšujte svůj seznam. Tlačítko pro odebrání položky (metoda pole splice()), počet kusů u každé položky, přidání položky klávesou Enter (událost keydown), řazení podle ceny. Nejvíc se naučíte, když řešíte vlastní problémy.
• Víc o stránce. Prvkům stránky, jak je vidí JavaScript, se říká DOM a dá se s nimi dělat mnohem víc: reagovat na další události, třeba na psaní nebo stisk klávesy, měnit libovolné atributy nebo vytvářet celé části stránky.
• Ukládání dat v prohlížeči pomocí localStorage, aby seznam přežil obnovení stránky.
• Další metody polí, třeba filter(), map() a sort(), které jedním řádkem udělají to, co teď píšete jako cyklus.
• Načítání dat z internetu pomocí fetch(), třeba předpovědi počasí nebo kurzů měn.
• Framework, jako je React nebo Vue, později pro větší aplikace. Stojí přesně na tom, co jste se tu naučili: na datech a na stránce, která je zobrazuje.

A pokud jste je ještě neprošli, kurz HTML a kurz CSS vás naučí postavit celou stránku i její vzhled, nejen skript.