JavaScript je jedním z nejoblíbenějších programovacích jazyků používaných k vývoji interaktivních webových aplikací. Jedním z nejzákladnějších příkladů takových aplikací je kalkulačka, která provádí jednoduché matematické operace, jako je sčítání, odčítání, násobení a dělení. V tomto podrobném tutoriálu se podíváme na to, jak vytvořit jednoduchou kalkulačku v JavaScriptu.
K vytvoření kalkulačky v JavaScriptu budeme potřebovat HTML kód pro vytvoření uživatelského rozhraní a JavaScript kód pro zpracování uživatelsky zadaných dat a provádění matematických operací. HTML kód bude obsahovat položky pro zadávání čísel a tlačítka pro výběr operací a JavaScript kód bude tyto hodnoty zpracovávat a vypočítávat výsledek.
Začneme vytvořením hlavního HTML kódu, který bude obsahovat prvky pro zadávání čísel a tlačítka pro operace. Poté napíšeme JavaScript kód, který tyto hodnoty zpracuje a vypočítá součet.
Příklad kalkulačky v JavaScriptu, který vytvoříme, bude mít jednoduché uživatelské rozhraní složené z polí pro zadávání čísel a tlačítek pro základní matematické operace. Každý krok podrobně prozkoumáme, abyste si plně uvědomili, jak si vytvořit vlastní kalkulačku v JavaScriptu.
Krok 1: Konfigurace značení HTML pro kalkulačku
Na začátku značkování HTML, uvnitř značky body, vytvoříme tabulku s třídou "calculator". Tato tabulka bude obsahovat dva řádky a tři sloupce.
V prvním řádku tabulky umístíme pole pro zobrazení uživatelem zadaných hodnot a výsledků výpočtů. K tomu používáme prvek input s typem " text "a identifikátorem"display".
Do druhého řádku umístíme tlačítka s čísly 1, 2 a 3. Každé tlačítko bude umístěno v samostatné buňce tabulky označené prvkem td .
V tomto kroku jsme tedy nakonfigurovali základní strukturu značení HTML pro kalkulačku. V dalším kroku přidáme funkčnost k tlačítkům pomocí JavaScriptu.
Krok 2: vytváření funkcí JavaScriptu pro základní operace
Po vytvoření hlavního rozvržení kalkulačky přejdeme k vytvoření funkcí JavaScriptu pro provádění operací sčítání, odčítání, násobení a dělení.
Pro začátek vytvoříme funkci add (), která provede operaci sčítání dvou čísel. V rámci funkce získáme hodnoty uživatelem zadaných čísel a pomocí příkazu + sečteme tato čísla. Výsledek sčítání pak zapíšeme do výstupního pole výsledků.
Stejně tak vytvoříme funkci subtract() pro operaci odčítání, multiply() pro operaci násobení a divide () pro operaci dělení. Tyto funkce získávají hodnoty dvou čísel, provádějí příslušnou matematickou operaci a zapisují výsledek do výstupního pole výsledků.
function subtract() function multiply() function divide()
Nyní máme funkce, které provádějí základní matematické operace. V dalším kroku přidáme obslužné rutiny událostí pro tlačítka kalkulačky, které tyto funkce vyvolají stisknutím tlačítek.