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.