Простой калькулятор на JavaScript

Простой калькулятор на JavaScript

1 часть
Кто такой инженер по тестированию и стоит ли на него учиться
2 часть
Богдан Овсиюк: из пограничника в тестировщики за полгода
3 часть
Зарплата 113 тысяч за то, чтобы ломать программы
4 часть
Что почитать начинающему тестировщику
5 часть
Простой калькулятор на JavaScript

Проще уже некуда

Сегодня сделаем простейший калькулятор на JavaScript, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.

Что делаем

На старте у нас будет самый простой калькулятор, который сможет только складывать, вычитать, умножать и делить два числа. Этого уже будет достаточно, чтобы потренироваться и в коде, и в дальнейшем тестировании.

Логика работы

Так как это простой калькулятор, то поступим так:

  1. Сделаем поле ввода для первого числа.
  2. Под ним разместим 4 кнопки с математическими действиями.
  3. Потом сделаем поле ввода для второго числа.
  4. И внизу будет кнопка «Посчитать».

Размещаем кнопки и поля ввода на странице

Разместим кнопки с полями на странице, а потом будем писать скрипт.

<!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>
Простой калькулятор на JavaScript
Первый подход к странице.

Обрабатываем нажатия на кнопки математических действий

Сейчас у нас есть 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>

Пишем скрипт

Сам скрипт тоже будет простой:

  1. Берём два числа.
  2. Смотрим, какое значение в переменной для выбранного действия.
  3. В зависимости от этого вычисляем результат.

<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;

Собираем всё вместе и смотрим результат

<!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, можно закрывать задачу в таск-трекере и браться за новую. 

Посмотреть калькулятор на странице проекта.

Что дальше

Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.

Попробуйте сами побыть тестировщиком и протестировать эту программу, а результатами тестирования поделитесь в комментариях.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Никита Кучеров

Соцсети:

Олег Вешкурцев

Веб-разработка — это новый черный
А мы знаем толк в моде и поможем освоить новую специальность за полгода.
Посмотреть
Фронтенд — это новый черный
Еще по теме
prev
next
Генератор лабиринтов
Генератор лабиринтов

Рисуем лабиринты любого размера.

Тетрис на JavaScript
Тетрис на JavaScript

Стильный и цветной.

Мегапроект: расшифровщик аудио в текст… через облако Яндекса!

Сегодня мы будем эксплуатировать чужие облака.

Python: как сделать многопоточную программу
Python: как сделать многопоточную программу

Оптимизируем простейший таймер.

Адаптируем статью под время суток
Адаптируем статью под время суток

Простая игрушка на JS.

Делаем свой блокировщик любой рекламы за 3 минуты
Делаем свой блокировщик любой рекламы за 3 минуты

Хакерский метод победить рекламодателей.

Простейший генератор текста на цепях Маркова
Простейший генератор текста на цепях Маркова

Выдаёт любой текст на любую тему.

Что означает ошибка TypeError: 'list' object cannot be interpreted as an integer
Что означает ошибка TypeError: 'list' object cannot be interpreted as an integer

Неочевидная ошибка при организации цикла в Python.

Как добавить плавающий блок на страницу
Как добавить плавающий блок на страницу

Иногда это и правда нужно.

Uncaught SyntaxError: Unexpected token
Uncaught SyntaxError: Unexpected token — что это означает?

Самая популярная ошибка у новичков.

Пинг-понг против компьютера на JavaScript

Лёгкая версия

Своя игра: создаём собственную «Змейку»

Работы на 10 минут, а удовольствия на целый день.

Свой текстовый редактор: делаем красиво
Собственный текстовый редактор: делаем красиво

Самое простое и полезное введение в CSS.

easy