В этой статье мы рассмотрим, как создать простой веб-калькулятор с использованием HTML, CSS и JavaScript. Калькулятор будет выполнять основные математические операции: сложение, вычитание, умножение и деление.
Основы JavaScript для создания калькулятора
Прежде чем мы начнем, давайте рассмотрим несколько основных концепций JavaScript, которые нам понадобятся:
- Переменные: В JavaScript переменные используются для хранения данных, таких как числовые значения для вычислений.
- Функции: Функции в JavaScript используются для выполнения определенных действий. В нашем случае мы будем использовать функции для вычисления результатов математических операций.
- Обработчики событий: Обработчики событий позволяют выполнять код в ответ на определенные действия пользователя, например, при нажатии кнопки.
Подготовка к работе
Вам понадобится текстовый редактор для написания кода и веб-браузер для его просмотра. Можно использовать любой текстовый редактор, такой как Sublime Text, Atom или Visual Studio Code. Что касается веб-браузера, вы можете использовать любой современный браузер, например, Chrome, Firefox или Safari.
Создание HTML-структуры онлайн калькулятора
Прежде чем начать писать JavaScript, нам нужно создать основную структуру нашего калькулятора с помощью HTML. Наш HTML-код может выглядеть примерно так:
<!DOCTYPE html>
<html>
<head>
<title>Простой калькулятор</title>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<div id="buttons">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">/</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">*</div>
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">-</div>
<div class="button">0</div>
<div class="button">.</div>
<div class="button">=</div>
<div class="button">+</div>
</div>
</div>
</body>
</html>
Этот код создает веб-страницу с калькулятором, который имеет дисплей для вывода результатов и кнопки для ввода чисел и выполнения операций. Класс ‘button‘ добавлен к каждой кнопке калькулятора, что позволяет легко манипулировать этими кнопками в JavaScript.
Добавление стилей CSS для калькулятора
CSS является ключевым элементом создания привлекательного визуального вида нашего калькулятора. Он позволяет нам создавать как простые, так и сложные дизайны, а также обеспечивает хорошее понимание структуры нашего HTML. В частности, мы можем использовать CSS для изменения шрифтов, цветов, отступов, рамок и других элементов.
Давайте рассмотрим, как мы можем написать наш CSS, чтобы сделать наш калькулятор более привлекательным.
Стилизуем калькулятор в целом
/* Стилизация для всего калькулятора */
#calculator {
width: 300px;
margin: auto;
padding: 20px;
background-color: #f3f3f3;
border-radius: 20px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}Стилизуем дисплей калькулятора
/* Стилизация для дисплея */
#display {
width: 100%;
height: 50px;
text-align: right;
margin-bottom: 10px;
padding-right: 10px;
box-sizing: border-box;
border: none;
background-color: #fff;
font-size: 20px;
border-radius: 10px;
}Делаем стили для кнопок
/* Стилизация для кнопок */
.button {
width: 66px;
height: 40px;
margin: 5px;
display: inline-block;
background-color: #007BFF;
color: white;
text-align: center;
line-height: 40px;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
transition: background-color 0.3s ease;
}Добавляем дополнительные стили для наведения и кнопки «=»
/* Изменение цвета при наведении на кнопку /
.button:hover {
background-color: #0056b3;
}
/ Дополнительное оформление для кнопки равно */
.button.equals {
background-color: #4CAF50;
}
.button.equals:hover {
background-color: #45a049;
}Финальний вид CSS калькулятора
<style>
#calculator {
width: 300px;
margin: auto;
padding: 20px;
background-color: #f3f3f3;
border-radius: 20px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
#display {
width: 100%;
height: 50px;
text-align: right;
margin-bottom: 10px;
padding-right: 10px;
box-sizing: border-box;
border: none;
background-color: #fff;
font-size: 20px;
border-radius: 10px;
}
.button {
width: 66px;
height: 40px;
margin: 5px;
display: inline-block;
background-color: #007BFF;
color: white;
text-align: center;
line-height: 40px;
cursor: pointer;
border-radius: 5px;
font-size: 18px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.button.equals {
background-color: #4CAF50;
}
.button.equals:hover {
background-color: #45a049;
}
</style>В этом CSS мы использовали цвета, тени и переходы, чтобы создать более привлекательный и динамичный вид. Это всего лишь один из множества возможных вариантов оформления калькулятора, и вы можете экспериментировать с различными стилями и цветами, чтобы создать свой собственный уникальный стиль калькулятора.
Пишем логику калькулятора с использованием JavaScript
Следующим шагом является добавление логики калькулятора с использованием JavaScript. Это включает сохранение введенных чисел и выполнение вычислений на основе нажатой кнопки.
Сначала добавим JavaScript-код для обработки событий кликов по кнопкам.
Получаем все кнопки из документа:
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '/'];
var decimalAdded = false;
Добавляем событие onclick ко всем клавишам и выполняем действия
for (var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
Получаем ввод и значение кнопки:
var input = document.querySelector('#display');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;
Теперь просто добавляем значение кнопки (btnValue) к входной строке и, наконец, используем функцию eval JavaScript для получения результата. Если нажата кнопка очистки, мы удаляем все.
if (btnVal == 'C') {
input.innerHTML = '';
decimalAdded = false;
}
Если нажата кнопка равенства, вычисляем и отображаем результат.
else if (btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
Заменяем все случаи ‘x‘ на ‘*‘ соответственно. Это можно легко сделать с помощью регулярного выражения и флага ‘g‘, который заменит все вхождения найденного символа/подстроки.
equation = equation.replace(/x/g, '*');
Последнее, что осталось сделать, это проверить последний символ уравнения. Если это оператор или десятичный разделитель, удаляем его.
if (operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if (equation)
input.innerHTML = eval(equation);
decimalAdded = false;
Основной функционал калькулятора завершен. Однако есть некоторые проблемы, такие как:
- Не должно быть двух операторов подряд.
- Уравнение не должно начинаться с оператора, кроме минуса.
- В числе не должно быть более одного десятичного разделителя.
Мы решим эти проблемы с помощью некоторых простых проверок.
indexOf (работает только в IE9+)
else if (operators.indexOf(btnVal) > -1) {
Нажато на оператор. Получаем последний символ из уравнения
var lastChar = inputVal[inputVal.length - 1];
Добавляем оператор, если входное значение не пусто и нет оператора в конце.
if (inputVal != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
Разрешаем минус, если строка пустая.
else if (inputVal == '' && btnVal == '-')
input.innerHTML += btnVal;
Заменяем последний оператор (если он существует) на только что нажатый оператор.
if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
Здесь ‘.‘ соответствует любому символу, а $ означает конец строки, поэтому что бы то ни было (будет оператором в данном случае) в конце строки будет заменено на новый оператор.
input.innerHTML = inputVal.replace(/.$/, btnVal);
}
decimalAdded =false;
Теперь осталась только проблема с десятичным разделителем. Мы можем легко решить ее с помощью флага ‘decimalAdded‘, который мы установим один раз, когда добавим десятичный разделитель, и предотвратим добавление более одного десятичного разделителя сразу после его установки. Флаг будет сброшен при нажатии оператора, eval или клавиши очистки.
else if (btnVal == '.') {
if (!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
}
Если нажата любая другая клавиша, просто добавляем ее.
else {
input.innerHTML += btnVal;
}
Кроме того, мы предотвращаем перезагрузку страницы после отправки.
e.preventDefault();
В итоге наш JavaScript будет выглядеть так:
<script>
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '/'];
var decimalAdded = false;
for (var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
var input = document.querySelector('#display');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;
if (btnVal == 'C') {
input.innerHTML = '';
decimalAdded = false;
}
else if (btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
equation = equation.replace(/x/g, '*');
if (operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if (equation)
input.innerHTML = eval(equation);
decimalAdded = false;
}
else if (operators.indexOf(btnVal) > -1) {
var lastChar = inputVal[inputVal.length - 1];
if (inputVal != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
else if (inputVal == '' && btnVal == '-')
input.innerHTML += btnVal;
if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
input.innerHTML = inputVal.replace(/.$/, btnVal);
}
decimalAdded =false;
}
else if (btnVal == '.') {
if (!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
}
else {
input.innerHTML += btnVal;
}
e.preventDefault();
}
}
</script>Этот код работает, обрабатывая события клика по всем кнопкам калькулятора. Он использует цикл for для прохождения через все кнопки и добавления обработчиков событий onclick к каждой из них.
Этот код также содержит проверку, чтобы избежать следующих ситуаций:
- Два оператора не могут быть добавлены последовательно.
- Уравнение не может начинаться с оператора, кроме минуса.
- В числе не должно быть более одного десятичного разделителя.
Это реализовано с помощью нескольких простых проверок в коде.
Тестирование и исправление ошибок
Сразу после разработки нашего простого калькулятора на JavaScript мы должны провести его тестирование, чтобы убедиться, что все работает должным образом.
1. Основные функциональные тесты
Основные функциональные тесты направлены на проверку основной работы калькулятора, то есть сложение, вычитание, умножение и деление чисел. Они включают ввод нескольких чисел и выполнение операций между ними. Во время этих тестов важно проверить, что отображение на экране обновляется должным образом и показывает правильные результаты.
2. Тесты граничных значений
Тесты граничных значений являются очень важными, поскольку они помогают выяснить, как калькулятор ведет себя в крайних случаях. Вы можете ввести очень большие числа или выполнять операции, вызывающие математические ошибки, например, деление на ноль. Такие тесты помогут выявить возможные ошибки или непредвиденное поведение в программе.
3. Исправление ошибок
После обнаружения ошибок или проблемных моментов на этапе тестирования следующим шагом является их исправление. Важно внести соответствующие изменения в код и повторно протестировать калькулятор, чтобы убедиться, что проблема была решена. Это может включать изменение логики JavaScript или даже изменение HTML и CSS, если проблема связана с отображением.
По завершении этого процесса наш калькулятор готов к использованию! Всегда помните, что тестирование — это важный аспект разработки программного обеспечения, и даже самое простое веб-приложение должно быть тщательно протестировано перед запуском.
Заключение
Создание простого веб-калькулятора — отличный проект для начала работы с JavaScript. Он помогает понять основы языка и демонстрирует, как можно использовать JavaScript для создания веб-приложений.
