В этой статье мы рассмотрим, как используя основы JavaScript, можно создать простой калькулятор с примером кода. Обучение происходит шаг за шагом, чтобы научить вас базовым принципам работы с функциями и обработкой событий.
Простой калькулятор на JavaScript
Калькулятор на JavaScript позволяет вам выполнять математические действия на веб-странице. Это может быть полезно для построения динамических форм, использующих математические вычисления и интерактивных инструментов.
Ниже приведен простой пример калькулятора на JavaScript. Он предоставляет два поля для ввода чисел, а также кнопку для выполнения математических операций.
<form>
<input type="text" id="num1">
<input type="text" id="num2">
<input type="button" value="+" onclick="calculate('+')">
<input type="button" value="-" onclick="calculate('-')">
<input type="button" value="*" onclick="calculate('*')">
<input type="button" value="/" onclick="calculate('/')">
<input type="text" id="result">
</form>
<script type="text/javascript">
function calculate(op) {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var result;
switch (op) {
case '+':
result = parseFloat(num1) + parseFloat(num2);
break;
case '-':
result = parseFloat(num1) - parseFloat(num2);
break;
case '*':
result = parseFloat(num1) * parseFloat(num2);
break;
case '/':
result = parseFloat(num1) / parseFloat(num2);
break;
}
document.getElementById('result').value = result;
}
</script>
В этом примере мы создаем HTML-форму с двумя полями для ввода чисел и четырьмя кнопками для производства математических операций. Для каждой кнопки мы добавили атрибут onclick, который вызывает функцию JavaScript calculate(), которая принимает математический оператор в качестве аргумента.
Функция получает значения из двух полей ввода с помощью функции document.getElementById(). Далее мы используем оператор switch для определения, какую математическую операцию мы должны выполнить. Затем мы применяем эту операцию к двум полученным значениям и сохраняем результат в переменную result. Наконец, мы используем функцию document.getElementById() для записи результата в поле вывода.
В результате мы получаем простой и интуитивно понятный калькулятор, который можно использовать для решения математических задач прямо на веб-странице.
