Калькулятор на JavaScript

1. Описание проекта

Проект представляет собой лёгкий веб-калькулятор, реализованный на чистом JavaScript (ES6+) с применением объектно-ориентированного подхода. Приложение позволяет выполнять базовые арифметические вычисления, автоматически валидирует пользовательский ввод и защищает от некорректных математических выражений.

Код написан без использования сторонних библиотек и фреймворков, что делает его отличным учебным материалом для отработки навыков работы с DOM, обработки событий, написания валидаторов и безопасного вычисления выражений в браузерной среде.

---

2. Функциональность

Какие операции поддерживает?

• Четыре базовые арифметические операции: сложение (+), вычитание (-), умножение (*), деление (/)
• Ввод целых и десятичных чисел (поддержка десятичного разделителя .)
• Очистка текущего выражения и сброс состояния (кнопка C)
• Вычисление и вывод результата (кнопка =)

Какие есть ограничения?

• Не поддерживаются скобки (), возведение в степень, тригонометрия и другие расширенные функции
• Унарные операторы ограничены: разрешён только минус в начале выражения (например, -5+3)
• Точность вычислений соответствует стандарту IEEE 754 (стандартные особенности работы с float в JS)
• Ввод возможен исключительно через интерфейс (клики по кнопкам); обработка клавиатуры не реализована
• Запрещён ввод двух и более операторов подряд (++, */ и т.д.), а также завершение выражения оператором

Как обрабатываются ошибки?

• При обнаружении некорректного состояния или невозможности вычислить результат вызывается метод showError():
  • В поле вывода отображается текст "Ошибка"
  • Устанавливается флаг hasError = true
  • Внутренняя строка expression очищается
• Пока активен флаг ошибки, любое нажатие (кроме C) автоматически вызывает clear(), позволяя начать новый ввод без ручного сброса
• Перед финальным выводом результат проверяется через Number.isFinite(): значения Infinity или NaN (например, при делении на ноль) перехватываются и преобразуются в ошибку

---

3. Архитектура

Структура файлов

Проект разделён на три логических компонента:

Файл	Назначение
index.html	Содержит разметку интерфейса: поле вывода (#display), контейнер с кнопками цифр, операторов, C и =
calculator.js	Реализует класс Calculator: хранит состояние, методы валидации, вычислений и обновления DOM
app.js	Точка входа: создаёт экземпляр класса, дожидается DOMContentLoaded и запускает init()

Описание класса Calculator

Свойство / Метод	Тип	Назначение
display	HTMLElement	Ссылка на DOM-элемент поля ввода
expression	string	Текущее математическое выражение
hasError	boolean	Флаг, указывающий, находится ли калькулятор в состоянии ошибки
init()	void	Навешивает обработчики кликов на все кнопки, инициализирует дисплей
handleButtonClick(value)	void	Диспетчер событий: маршрутизирует нажатие в нужный метод
addToExpression(value)	void	Добавляет символ в выражение с учётом правил валидации
calculate()	void	Запускает процесс вычисления при нажатии =
safeEvaluate(expr)	number | void	Безопасно выполняет выражение и возвращает число или вызывает ошибку
isValidExpression(expr)	boolean	Проверяет синтаксис: нет ли двойных операторов или завершающего знака
clear()	void	Полностью сбрасывает состояние (expression, hasError) и обновляет UI
updateDisplay()	void	Выводит текущее значение в display (или "0", если пусто)
showError(message)	void	Переводит интерфейс в режим ошибки, очищает выражение
isOperator(char)	boolean	Возвращает true, если символ входит в набор [+,\-,\*,\/]
hasDuplicateDot()	boolean	Проверяет, не введена ли уже точка в текущем числе

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

Последовательность действий при нажатии кнопок

1. Цифра или точка (.): символ добавляется в конец expression. Если вводится точка, проверяется, чтобы в текущем числе она не повторялась. Дисплей обновляется мгновенно.
2. Оператор (+, -, *, /):
   • Если выражение пустое, разрешён только - (для отрицательных чисел)
   • Если последний символ уже оператор, он заменяется новым (например, 5+ + * → 5*)
   • В остальных случаях оператор добавляется в конец
3. Кнопка C: сбрасывает expression = "", hasError = false, на дисплее отображается "0"
4. Кнопка =: запускает цепочку вычисления. При успехе результат заменяет выражение и выводится на экран. При неудаче активируется режим ошибки.

Как работает валидация ввода?

Валидация выполняется на трёх этапах:

• Во время ввода (addToExpression): блокирует ввод второго оператора подряд, запрещает ведущие символы (кроме -), предотвращает повторную точку в одном числе.
• Перед вычислением (isValidExpression): с помощью регулярных выражений проверяет наличие конструкций [+\-*/]{2,} и убеждается, что строка не заканчивается оператором.
• После вычисления (safeEvaluate): результат пропускается через Number.isFinite(), что отсекает Infinity, -Infinity и NaN.

Как происходит вычисление?

1. Пользователь нажимает =
2. Вызывается calculate(). Если expression пуст или hasError === true, выполнение прерывается
3. Запускается safeEvaluate(expression):
   • Сначала проходит синтаксическая проверка isValidExpression()
   • При успехе вызывается встроенный eval(expr) (безопасно, так как ввод полностью контролируется кнопками и валидаторами)
4. Полученный результат проверяется на конечность (isFinite)
5. Успех: expression перезаписывается строковым представлением результата, hasError сбрасывается, вызывается updateDisplay()
6. Ошибка (исключение или неконечное число): вызывается showError("Ошибка"), дисплей показывает текст ошибки, внутреннее выражение очищается, калькулятор переходит в защищённый режим до следующего нажатия C