Сегодня разбёремся, как сделать калькулятор на JS, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.
Что делаем
На старте у нас будет самый простой калькулятор, который сможет только складывать, вычитать, умножать и делить два числа. Этого уже будет достаточно, чтобы потренироваться и в коде, и в дальнейшем тестировании.
Логика работы калькулятора на JavaScript
Так как это простой калькулятор, то поступим так:
- Сделаем поле ввода для первого числа.
- Под ним разместим 4 кнопки с математическими действиями.
- Потом сделаем поле ввода для второго числа.
- И внизу будет кнопка «Посчитать».
Тестировщик: кто это такой, что он делает и как им стать
Зарплата 113 тысяч за то, чтобы ломать программы
Что почитать начинающему тестировщику
UX-тест простого калькулятора на JavaScript
Тестируем и исправляем калькулятор на JavaScript
Словарь тестировщика: автотесты, юнит-тесты и другие важные слова
Какой софт нужен, чтобы стать тестировщиком
Что такое альфа- и бета-версии
End-to-End-тестированиеРазмещаем кнопки и поля ввода на странице
Разместим кнопки с полями на странице, а потом будем писать скрипт.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Калькулятор</title>
</head>
<body>
<!-- поле ввода первого числа -->
<input id="num1" />
<!-- блок с кнопками -->
<div id="operator_btns">
<button id="plus" >+</button>
<button id="minus" >-</button>
<button id="times" >x</button>
<button id="divide" >:</button>
</div>
<!-- поле ввода второго числа -->
<input id="num2" />
<br>
<!-- кнопка для рассчётов -->
<button >Посчитать</button>
</body>
</html>
Обрабатываем нажатия на кнопки математических действий
Сейчас у нас есть 4 кнопки, но нажимать их бесполезно — всё равно ничего не произойдёт, потому что нет обработчиков нажатий. Но что нам прописывать в обработчике?
Первый вариант — привязать к каждой кнопке свою функцию, а потом для каждой операции выполнять свои действия внутри этого обработчика. Но раз у нас есть кнопка «Посчитать», то нам придётся при нажатии на неё из этих четырёх функций вытаскивать действие и нужные команды, запоминать выбранное и как-то использовать в вычислениях. Сложно и громоздко.
Второй вариант — просто записывать в какую-то переменную, какая кнопка была нажата. А потом, при нажатии «Посчитать», просто смотреть в эту переменную и выполнять соответствующее действие. Так и поступим.
👉 Воспользуемся хитростью, про которые многие забывают: в обработчике onclick необязательно писать только функцию — туда можно отправить любую JS-команду. Главное, не забыть потом в скрипте предусмотреть эту переменную, которую мы используем.
<!-- блок с кнопками -->
<div id="operator_btns">
<button id="plus" onclick="op='+'">+</button>
<button id="minus" onclick="op='-'">-</button>
<button id="times" onclick="op='*'">x</button>
<button id="divide" onclick="op='/'">:</button>
</div>Пишем скрипт
Сам скрипт тоже будет простой:
- Берём два числа.
- Смотрим, какое значение в переменной для выбранного действия.
- В зависимости от этого вычисляем результат.
<script>
// переменная, в которой хранится выбранное математическое действие
var op;
// функция расчёта
function func() {
// переменная для результата
var result;
// получаем первое и второе число
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
// смотрим, что было в переменной с действием, и действуем исходя из этого
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
}
}
</script>
Сразу привяжем функцию func() к нажатию на кнопку «Посчитать»:
<button onclick="func()">Посчитать</button>Выводим результат
Сейчас в скрипте есть проблема: он всё считает, но ничего не выводит. А всё потому, что мы не предусмотрели на странице место для вывода. Исправим это и добавим строчку в скрипт.
Это — добавим на страницу после кнопки с расчётом:
<p id="result"></p>А это — в функцию func(), чтобы она сразу отправляла результат на страницу:
document.getElementById(“result”).innerHTML = result;
Готовая страница с калькулятором на JS
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Калькулятор</title>
</head>
<body>
<!-- поле ввода первого числа -->
<input id="num1" />
<!-- блок с кнопками -->
<div id="operator_btns">
<button id="plus" onclick="op='+'">+</button>
<button id="minus" onclick="op='-'">-</button>
<button id="times" onclick="op='*'">x</button>
<button id="divide" onclick="op='/'">:</button>
</div>
<!-- поле ввода второго числа -->
<input id="num2" />
<br>
<!-- кнопка для расчётов -->
<button onclick="func()">Посчитать</button>
<!-- здесь будет результат -->
<p id="result"></p>
<!-- наш скрипт -->
<script>
// переменная, в которой хранится выбранное математическое действие
var op;
// функция расчёта
function func() {
// переменная для результата
var result;
// получаем первое и второе число
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
// смотрим, что было в переменной с действием, и действуем исходя из этого
switch (op) {
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>
</body>
</html>
Отлично, калькулятор работает и складывает всё как нужно! Мы выполнили свою задачу — быстро запилили калькулятор на JavaScript, можно закрывать задачу в таск-трекере и браться за новую.
Посмотреть калькулятор на странице проекта.
Что дальше
Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.
Попробуйте сами побыть тестировщиком и протестировать эту программу, а результатами тестирования поделитесь в комментариях.
