Ako si vytvoriť jednoduchú kalkulačku v JavaScripte s využitím DOM a s potrebnými ošetreniami na vstupe
Cieľom tohto príspevku je vytvorenie aplikácie jednoduchej kalkulačky s využitím DOM. Kalkulačka bude mať niekoľko ošetrení na vstupe pri zadávaní hodnôt, čím sa stane robustnejšou – ľudovo povedané „blbostivzdornou“.
Celý príklad je vysvetlený v nasledujúcom kóde:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>funkcie</title> </head> <body> <!-- DOM je skratka pre Document Object Model. Jedná se o strom elementov (objektov), z ktorých je HTML stránka zložená. Objekty v DOM môžeme pomocou JavaScriptu menit a tým meníme výslednú webovú stránku. --> <h1>Kalkulačka</h1> <input type="text" id="num1" placeholder="Prvé číslo"> <select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="num2" placeholder="Druhé číslo"> <button onclick="calculate()">Vypočítať</button> <p id="result"></p> <!--tu budeme tobrazovať výsledky--> <script> function calculate() { // získať hodnoty z textových polí s ochranou proti medzerám pred číslom, medzi číslami a za číslom, tiež s ochranou proti zadávaniu "," namiesto "." const num1 = parseFloat(document.getElementById("num1").value.replace(/,/g, '.').replace(/ /g, '').trim()); const num2 = parseFloat(document.getElementById("num2").value.replace(/,/g, '.').replace(/ /g, '').trim()); const operator = document.getElementById("operator").value; // Ošetrenie neplatných znakov vstupu (napr. kombinácia čísel a textu) if (!/^-?\d+(\.\d+)?$/.test(num1) || !/^-?\d+(\.\d+)?$/.test(num2)) { document.getElementById("result").innerHTML = "Neplatný vstup"; return; } // ošetriť proti zlým hodnotám vstupných polí (texty namiesto čísel alebo prázdne znaky) if (isNaN(num1) || isNaN(num2) || num1 === "" || num2 === "") { alert("Zadajte platné čísla!"); return; } // ošetriť delenie nulou if (operator === "/" && num2 === 0) { alert("Nemôžete deliť nulou!"); return; } let result; // vykonať matematickú operáciu podľa zvoleného operátora switch(operator) { case "+": result = num1 + num2; break; case "-": result = num1 - num2; break; case "*": result = num1 * num2; break; case "/": result = num1 / num2; break; default: alert("Zadajte platný operátor!"); return; } // zaokrúhliť výsledok na 2 desatinné miesta result = Math.round(result * 100) / 100; // zobraziť výsledok na stránke document.getElementById("result").innerHTML = "Výsledok: " + result; } </script> </body> </html>
Použili sme:
funkcia parseFloat(): slúži na prevod reťazca na desatinné číslo s pohyblivou desatinnou čiarkou (floating-point number). Ak je reťazec neplatný, funkcia vráti hodnotu NaN (Not a Number).Používa sa najmä pri spracovaní užívateľského vstupu, napríklad pri získavaní hodnôt z textového poľa v HTML formulári. Keďže hodnoty z textových polí sú vždy reťazce, musíme ich pre prevádzku na čísla najskôr previesť. Preto by sme mohli použiť funkciu parseFloat(), ak očakávame, že vstup bude desatinné číslo.
funkcia getElementById() – je vstavaná JavaScript funkcia, ktorá slúži na nájdenie prvku na webovej stránke pomocou jeho id atribútu. Funkcia vráti prvý nájdený element s daným id.
ošetrenia, ktoré sme vykonali na vstupoch:
– ochrana proti medzerám pred číslom, medzi číslami a za číslom
– ochrana proti deleniu nulou
– ochrana proti zadávaniu textov do polí, tiež prázdnych znakov
– možnosť používania desaninných čísel
– ochrana proti zadaniu „,“ v desatinnom čísle (bude sa to brať ako „.“)
– možnosť používania aj záporných čísel pri operáciách
– zaokrúhľovanie
– používame regulárny výraz !/^\d+(\.\d+)?$/ na overenie, či vstupné čísla obsahujú len platné znaky, t.j. číslice a desatinnú bodku. Ak vstupné číslo nevyhovuje tomuto regulárnemu výrazu, výpočet sa nevykoná a zobrazí sa správa „Neplatný vstup“.
ošetrenia, ktoré je ešte potrebné realizovať v prípade, ak by sme chceli kalkulačku rozšíriť:
Ošetrenie proti neplatným matematickým operáciám: Ak sa používateľ rozhodne pre zložitejšiu matematickú operáciu, ktorá nie je s dvoma číslami možná, mohli by sme vypísať chybové hlásenie. Napríklad, ak by používateľ zvolil druhú odmocninu záporného čísla, vypísali by sme chybové hlásenie.
Možnosť vynulovať kalkulačku: Pridať tlačidlo alebo link, ktoré by vynulovali všetky polia a vynulovali aj zobrazený výsledok.
Prispôsobenie zobrazenia výsledku: Umožnenie používateľovi zvoliť počet desatinných miest, na ktoré sa výsledok zaokrúhli.
Ošetrenie vstupu pomocou klávesnice: Umožniť používateľovi zadávať čísla pomocou klávesnice, napríklad pomocou numerických kláves.
Vytvoriť funkcionalitu pre zložitejšie matematické operácie: Pridať tlačidlá pre zložitejšie matematické operácie, ako napríklad sinus, kosinus, tangens a podobne.
Tieto možnosti by pomohli zlepšiť používateľské skúsenosti a zabezpečili by, že kalkulačka je robustná a vyhovuje potrebám používateľa.