Ako si vytvoriť jednoduchú kalkulačku v JavaScripte s využitím DOM a s potrebnými ošetreniami na vstupe

Od Peter Tokoš

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.