Úloha 2 – Interaktivní sčítání s kontrolou vstupů

Úvod do úlohy

Po zvládnutí základních vestavěných funkcí pro práci s daty se nyní zaměříme na funkce pro komunikaci s uživatelem. JavaScript nabízí tři jednoduché, ale velmi užitečné nástroje: prompt(), alert() a confirm(). Tyto funkce umožňují zobrazit uživateli zprávu, získat od něj vstup nebo si vyžádat potvrzení nějaké volby.

Jejich výhodou je jednoduchost – nevyžadují žádné HTML formuláře ani složité skripty. Stačí je zavolat a okamžitě se objeví vyskakovací okno v prohlížeči. Právě proto se často používají při výuce, testování kódu nebo v situacích, kdy potřebujeme rychle ověřit chování programu.
V moderních webových aplikacích se však jejich použití omezuje spíše na jednoduché prototypy nebo interní nástroje, protože narušují plynulý běh stránky a nejsou vizuálně přizpůsobitelné.

---

Teorie a principy

1. Funkce alert()

Zobrazí informační okno s textem a tlačítkem OK. Je vhodná pro upozornění nebo zobrazení výsledků výpočtu.

Funkce nic nevrací – pouze pozastaví běh skriptu, dokud uživatel nepotvrdí zprávu.

---

2. Funkce prompt()

Zobrazí dialogové okno s textem, vstupním polem a tlačítkem OK a Zrušit.
Vrací řetězec s hodnotou, kterou uživatel zadal, nebo null, pokud klikl na Zrušit.

Základní tvar:

Vždy je vhodné ověřit, že uživatel skutečně něco zadal:

---

3. Funkce confirm()

Zobrazí dialogové okno s textem a tlačítky OK a Zrušit.
Vrací true, pokud uživatel klikl na OK, a false, pokud zvolil Zrušit.

Příklad:

---

Praktické příklady kódu

Příklad 1: Jednoduchá interakce

Tento kód demonstruje kombinaci funkcí prompt(), Number() a alert(). Uživatel zadá dvě čísla a skript vypočítá jejich součet.

---

Příklad 2: Potvrzení volby

Funkce confirm() vrací logickou hodnotu podle uživatelovy volby. Lze ji tedy snadno použít v podmínkách.

---

Příklad 3: Reakce na vstup uživatele

Tento příklad propojuje všechny tři funkce do jednoho jednoduchého rozhovoru s uživatelem.

---

Typické chyby a záludnosti

1. Zapomenutý převod typu po prompt()
   Vše, co vrátí prompt(), je text. Pokud s hodnotou chceme počítat, musíme použít Number() nebo parseInt().

2. Neošetřený prázdný vstup nebo zrušení dialogu
   Funkce prompt() může vrátit prázdný řetězec ("") nebo null, pokud uživatel klikne na Zrušit. Obě situace je nutné ošetřit.

3. Narušení uživatelského rozhraní
   Tyto dialogy pozastavují vykonávání skriptu a zablokují zbytek stránky, dokud nejsou potvrzeny. Proto nejsou vhodné pro komplexní aplikace.

4. Chybějící kontext v textu dialogu
   Upozornění by měla být stručná, ale srozumitelná. Vyvarujte se obecných zpráv typu „Chyba!“ bez vysvětlení.

---

Shrnutí

• alert() – zobrazuje krátké informační zprávy.

• prompt() – umožňuje získat textový vstup od uživatele.

• confirm() – zjišťuje, zda uživatel souhlasí s akcí (OK / Zrušit).

• Funkce jsou vhodné pro výuku, testování a jednoduché prototypy.

• V reálných aplikacích je vhodnější používat formuláře, vlastní dialogová okna nebo manipulaci s DOM.

• Při práci s těmito funkcemi je důležité ošetřit všechny možné vstupy a správně převádět datové typy.

Úloha

Zadání (kontext úlohy):

Vytvoř jednoduchou kalkulačku, která od uživatele získá dvě čísla pomocí prompt(), zeptá se, zda chce opravdu provést sčítání, a nakonec výsledek zobrazí v alert(). Pokud uživatel zadá neplatné číslo nebo zvolí Zrušit, program ho na to upozorní.

---

Cíl úlohy:

Procvičit práci s funkcemi prompt(), alert() a confirm(), převod textového vstupu na číslo pomocí Number() a kontrolu hodnot pomocí isNaN().

---

Vstupní podmínky:

Student pracuje pouze s jedním souborem script.js.
Komunikace s uživatelem probíhá výhradně pomocí vestavěných dialogových oken (žádné HTML).

---

Požadovaný výstup:

• Program zobrazí úvodní hlášení: „Vítej v mini kalkulačce!“

• Uživatel zadá dvě čísla pomocí prompt().

• Pokud některý vstup není číslo nebo uživatel klikne na Zrušit, zobrazí se upozornění: „Zadání je neplatné!“.

• Pokud jsou vstupy platné, program se zeptá pomocí confirm(): „Chceš sečíst tato čísla?“

• Pokud uživatel potvrdí, zobrazí se alert() s výsledkem sčítání.

• Pokud zvolí Zrušit, zobrazí se zpráva: „Výpočet byl zrušen.“

---

Doplňující pokyny:

• Použij převod na číslo přes Number().

• Ověř platnost pomocí isNaN().

• Ošetři i možnost, že uživatel klikne na Zrušit (null).

• Nepoužívej zkrácené zápisy typu if (!isNaN()), ale explicitní if (isNaN(...) == true).

Řešení úlohy

Co je zde splněno

• alert() pro úvodní i výstupní zprávy.

• prompt() pro získání dvou čísel.

• Number() pro převod textu na číslo.

• Kontrola platnosti vstupů přes isNaN().

• Ošetření zrušení dialogu (== null).

• confirm() pro potvrzení akce uživatelem.

• Výsledek zobrazen pouze při potvrzení sčítání.

Vylepšení oproti začátečnické verzi

• Kompaktnější a přehlednější logika.

• Použití řetězcové interpolace (template literals).

• Sjednocená kontrola platnosti do jediné proměnné platne.

• Zachována explicitní kontrola isNaN(...) == false kvůli čitelnosti.

• Modernější styl, ale logicky totožný výsledek.

Poznámky

• Pokud uživatel stiskne Zrušit v kterémkoli promptu, proměnná bude mít hodnotu null, což je potřeba otestovat dříve než převádíme na číslo.

• Hodí se ošetřit i prázdný řetězec – Number("") se převede na 0, což může být zavádějící (v základní úloze to ale nevadí).