Полное руководство по калькуляторам JavaScript: изучение различных методов - Fcodenotes

JavaScript — универсальный язык программирования, широко используемый для веб-разработки. Одним из распространенных вариантов использования является создание калькуляторов, которые позволяют пользователям выполнять математические вычисления. В этой статье мы рассмотрим различные методы создания калькуляторов JavaScript и приведем примеры кода для каждого подхода.

Метод 1: базовый HTML и JavaScript
Этот метод включает в себя создание простого калькулятора с использованием HTML для пользовательского интерфейса и JavaScript для логики. Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Basic Calculator</title>
    <script>
      function calculate() {
        var num1 = parseFloat(document.getElementById("num1").value);
        var num2 = parseFloat(document.getElementById("num2").value);
        var operator = document.getElementById("operator").value;
        var result;
        switch (operator) {
          case "+":
            result = num1 + num2;
            break;
          case "-":
            result = num1 - num2;
            break;
          case "*":
            result = num1 * num2;
            break;
          case "/":
            result = num1 / num2;
            break;
        }
        document.getElementById("result").innerHTML = result;
      }
    </script>
  </head>
  <body>
    <input type="number" id="num1" placeholder="Enter first number" />
    <select id="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="number" id="num2" placeholder="Enter second number" />
    <button onclick="calculate()">Calculate</button>
    <p id="result"></p>
  </body>
</html>

Метод 2: использование функции eval()
Этот метод позволяет вычислять математические выражения с помощью функции eval(). Однако следует проявлять осторожность, поскольку он может выполнять произвольный код и представлять угрозу безопасности. Вот пример:

function calculateExpression() {
  var userInput = document.getElementById("expression").value;
  var result = eval(userInput);
  document.getElementById("result").innerHTML = result;
}

Метод 3: внешние библиотеки
Существует несколько библиотек JavaScript, которые предоставляют готовые функции калькулятора. Одна популярная библиотека — Math.js. Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Calculator using Math.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.7.2/math.min.js"></script>
    <script>
      function calculate() {
        var userInput = document.getElementById("expression").value;
        var result = math.evaluate(userInput);
        document.getElementById("result").innerHTML = result;
      }
    </script>
  </head>
  <body>
    <input type="text" id="expression" placeholder="Enter expression" />
    <button onclick="calculate()">Calculate</button>
    <p id="result"></p>
  </body>
</html>