Создание калькулятора на JavaScript – это практическая задача, которая помогает освоить основы работы с DOM, обработкой событий и логикой программирования. Такой проект не требует сложных библиотек и может быть реализован в чистом JavaScript, что делает его отличным примером для закрепления базовых навыков.
В процессе разработки потребуется подготовить HTML-разметку с полем для отображения значений и кнопками для ввода чисел и операций. Далее важно написать скрипт, который будет отслеживать клики по кнопкам, сохранять введённые данные и вычислять результат. Правильная структура кода упростит расширение калькулятора – например, добавление поддержки дробных чисел или клавиш клавиатуры.
Создание HTML-разметки для кнопок и дисплея
- Используйте
<div>для контейнера калькулятора. - Для дисплея подойдет
<input type="text">с атрибутомreadonly, чтобы исключить ручной ввод. - Кнопки создаются через
<button>, где текст соответствует числу или операции.
Пример базовой структуры:
<div id="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button>7</button>
<button>8</button>
<button>9</button>
<button>/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>*</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>-</button>
<button>0</button>
<button>.</button>
<button>=</button>
<button>+</button>
</div>
</div>
Такое разделение обеспечивает удобное подключение JavaScript-логики: дисплей доступен по идентификатору, а кнопки легко обработать через делегирование событий.
Подключение JavaScript к странице
Чтобы код калькулятора работал, необходимо подключить JavaScript через тег <script>. Существует два способа: вставка кода прямо в HTML или подключение внешнего файла.
Встроенный вариант выглядит так:
<script>
alert("Проверка работы скрипта");
</script>
Этот способ удобен для небольших тестов, но для калькулятора лучше использовать отдельный файл. Это упрощает структуру проекта и делает код читаемым.
Пример подключения внешнего файла:
<script src="script.js"></script>
Тег рекомендуется размещать перед закрывающим </body>, чтобы HTML загрузился раньше скрипта. В результате кнопки и поля калькулятора будут доступны при инициализации.
Если необходимо загрузить скрипт сразу, можно использовать атрибуты defer или async. Для калькулятора подходит defer, так как он выполняет код после построения DOM:
<script src="script.js" defer></script>
Обработка кликов по цифровым кнопкам
Каждая кнопка с цифрой должна иметь атрибут data-value, содержащий число, которое она представляет. Это исключает дублирование кода и позволяет обращаться ко всем кнопкам через единый селектор.
Для назначения обработчиков используется метод querySelectorAll в связке с циклом forEach. Пример: document.querySelectorAll('.digit').forEach(btn => btn.addEventListener('click', handleDigitClick));. Функция handleDigitClick принимает событие и получает значение кнопки через event.target.dataset.value.
При добавлении цифры к текущему выражению важно проверять первый символ. Если он равен "0", а пользователь вводит новую цифру, заменяйте начальный ноль, чтобы исключить невалидные записи вроде 012.
Рекомендуется хранить текущее число в строковом виде и обновлять содержимое дисплея через textContent. Конвертация в число выполняется только в момент вычислений, что предотвращает потерю ведущих нулей и упрощает работу с многоразрядными вводами.
Для повышения стабильности стоит явно ограничивать длину вводимого числа, например, с помощью условия if (current.length < 12). Это предотвращает переполнение дисплея и облегчает форматирование результата.
Реализация ввода математических операторов
Для корректной работы калькулятора необходимо обработать ввод операторов так, чтобы исключить ошибки при последовательном наборе выражения.
- Ограничить возможность ввода двух операторов подряд. Например, после «+» не должен сразу следовать «*».
- Разрешать замену последнего оператора: если пользователь нажал «+», а затем «-», калькулятор должен заменить символ, а не добавлять новый.
- Предусмотреть проверку на начало выражения: оператор не может быть первым символом, кроме «-» для отрицательных чисел.
- Обеспечить корректное завершение выражения: последний символ не должен быть оператором.
Пример кода для обработки нажатий:
const operators = ['+', '-', '*', '/'];
function handleOperator(input, value) {
const lastChar = input.slice(-1);
if (operators.includes(lastChar)) {
// замена последнего оператора
return input.slice(0, -1) + value;
}
if (input === '' && value !== '-') {
// запрет на первый оператор (кроме минуса)
return input;
}
return input + value;
}
- Создаётся массив допустимых операторов.
- Определяется последний введённый символ.
- Если последний символ – оператор, он заменяется новым.
- Если поле пустое и введён оператор (кроме «-»), ввод игнорируется.
- Во всех остальных случаях символ добавляется в строку выражения.
Написание функции вычисления выражения
Для обработки введённого пользователем выражения нельзя использовать прямую подстановку в eval(), так как это небезопасно. Рациональнее реализовать собственный разбор строки с поддержкой базовых операций: сложение, вычитание, умножение, деление и скобки.
Алгоритм состоит из двух этапов: преобразование инфиксной записи в постфиксную (обратную польскую нотацию) и вычисление полученной последовательности.
| Этап | Действие |
|---|---|
| Парсинг | Чтение строки, разделение чисел и операторов, учёт приоритета знаков |
| Преобразование | Применение алгоритма сортировочной станции (Dijkstra) для получения постфиксной записи |
| Вычисление | Использование стека: числа кладутся в стек, операторы применяются к верхним элементам |
Пример функции вычисления:
function calculate(expression) {
const output = [];
const operators = [];
const precedence = { '+': 1, '-': 1, '*': 2, '/': 2 };
expression.replace(/\s+/g, '').split(/([\+\-\*\/\(\)])/).filter(Boolean).forEach(token => {
if (!isNaN(token)) {
output.push(parseFloat(token));
} else if (token in precedence) {
while (operators.length > 0 && precedence[operators[operators.length - 1]] >= precedence[token]) {
output.push(operators.pop());
}
operators.push(token);
} else if (token === '(') {
operators.push(token);
} else if (token === ')') {
while (operators.length > 0 && operators[operators.length - 1] !== '(') {
output.push(operators.pop());
}
operators.pop();
}
});
while (operators.length) output.push(operators.pop());
const stack = [];
output.forEach(token => {
if (typeof token === 'number') {
stack.push(token);
} else {
const b = stack.pop();
const a = stack.pop();
switch (token) {
case '+': stack.push(a + b); break;
case '-': stack.push(a - b); break;
case '*': stack.push(a * b); break;
case '/': stack.push(a / b); break;
}
}
});
return stack[0];
}
Функция корректно обрабатывает скобки, поддерживает приоритет операторов и исключает использование небезопасного eval.
Очистка дисплея и сброс значений
Для очистки дисплея калькулятора создайте отдельную кнопку с идентификатором, например clear. В обработчике события click установите значение дисплея в пустую строку: display.value = '';.
Важно одновременно сбрасывать внутренние переменные, хранящие текущие числа и операции. Например, если используются переменные firstNumber, secondNumber и operator, то их нужно обнулить: firstNumber = null; secondNumber = null; operator = null;.
Для более точного контроля создайте функцию resetCalculator(), которая выполняет оба действия: очистку дисплея и сброс переменных. Вызывайте её из обработчика кнопки очистки:
document.getElementById('clear').addEventListener('click', resetCalculator);
Если калькулятор хранит историю вычислений, также очищайте массив с результатами внутри функции resetCalculator() для предотвращения некорректного использования старых данных.
Для обеспечения мгновенной реакции интерфейса используйте прямое изменение value элемента input, без дополнительных функций форматирования. Это минимизирует задержки при повторных нажатиях кнопки очистки.
Добавление обработки ошибок и деления на ноль
Для предотвращения ошибок в калькуляторе важно проверять ввод пользователя перед выполнением вычислений. Используйте функцию isNaN() для проверки числовых значений. Например, перед операцией сложения можно написать:
if (isNaN(num1) || isNaN(num2)) { alert('Введите корректные числа'); return; }
Особое внимание уделите делению на ноль. Деление на ноль в JavaScript возвращает Infinity или -Infinity, что не всегда ожидаемо пользователем. Добавьте проверку:
if (operator === '/' && num2 === 0) { alert('Деление на ноль невозможно'); return; }
Для более структурированной обработки ошибок используйте конструкцию try…catch. Например:
try { result = eval(expression); } catch(e) { alert('Ошибка вычисления'); return; }
Если калькулятор поддерживает пользовательский ввод выражений, дополнительно фильтруйте запрещённые символы и операторы, чтобы избежать синтаксических ошибок и потенциальной уязвимости через eval().
После каждой операции проверяйте результат на Infinity или NaN и заменяйте на удобочитаемое сообщение:
if (!isFinite(result)) { resultDisplay.textContent = 'Ошибка: недопустимая операция'; }
Такая последовательная проверка числовых значений, операторов и результатов обеспечивает стабильную работу калькулятора и предотвращает непредвиденные ошибки.
Вопрос-ответ:
Какие базовые шаги нужно выполнить, чтобы создать простой калькулятор на JavaScript?
Для начала нужно подготовить структуру HTML с кнопками для цифр и операций, а также поле для отображения результата. Затем создаётся JavaScript-код, который будет отслеживать нажатия кнопок и выполнять вычисления. Логика обычно строится на сохранении текущего числа и выбранной операции, после чего при нажатии «=» происходит вычисление и вывод результата в поле.
Как реализовать обработку ошибок, например деление на ноль?
В JavaScript можно использовать условные конструкции для проверки делителя перед выполнением операции. Если делитель равен нулю, вместо выполнения вычисления можно показать сообщение об ошибке или вернуть специальное значение, например «Ошибка». Это предотвращает аварийное завершение скрипта и позволяет пользователю видеть корректный результат работы программы.
Можно ли сделать так, чтобы калькулятор запоминал предыдущие результаты?
Да, для этого достаточно хранить результат в отдельной переменной. После вычисления нового выражения старый результат можно использовать как первый операнд для следующего вычисления. Дополнительно можно выводить предыдущие значения в отдельной области интерфейса, чтобы пользователь видел историю действий.
Как лучше организовать код, чтобы добавить новые функции, например процент или квадратный корень?
Лучше выделять отдельные функции для каждой операции, чтобы основной код оставался читаемым. Например, отдельная функция для сложения, вычитания, процентов или корня. Тогда добавление новой функции потребует лишь вызова новой функции при нажатии соответствующей кнопки, без изменения общей логики калькулятора.
Нужно ли использовать какие-то библиотеки для создания калькулятора на JavaScript?
Нет, для базового калькулятора достаточно стандартного JavaScript, HTML и CSS. Библиотеки могут облегчить создание интерфейса или анимаций, но сами вычисления можно реализовать с помощью встроенных операторов и функций. Это также помогает лучше понять, как работает логика калькулятора на чистом коде.
Как правильно подключить JavaScript к HTML для работы калькулятора?
Для работы калькулятора скрипт JavaScript можно подключить к HTML двумя способами: внутри тега перед закрывающим тегом
Загрузка...
