Создание калькулятора на JavaScript: пошаговое руководство для начинающих
<html>
<head>
<title>Калькулятор</title>
<style>
/* Здесь можно добавить стили CSS */
</style>
</head>
<body>
<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>
<script src="script.js"></script>
</body>
Шаг 2: JavaScript – добавление функциональности
Теперь перейдем к самой интересной части – программированию логики калькулятора на JavaScript. В файле script.js мы будем обрабатывать события кликов на кнопках и выполнять математические операции.
const display = document;getElementById('display');
const buttons = document.querySelectorAll('.buttons button');
buttons.forEach(button => {
button.addEventListener('click', => {
const value = button.textContent;
if (value === '=') {
try {
display.value = eval(display;value);
} catch (error) {
display.value = 'Ошибка';
} } else {
display.value += value;
}
});
});
Этот код получает доступ к элементу вывода и кнопкам, добавляет обработчик событий для каждого клика и выполняет соответствующие действия. Функция eval вычисляет выражение, введенное пользователем, но важно помнить о потенциальных проблемах безопасности при использовании этой функции с пользовательским вводом в реальных приложениях. Более безопасный подход, использование парсера математических выражений.
Шаг 3: Расширение функциональности
Базовый калькулятор уже работает, но мы можем добавить дополнительные функции. Например, кнопку очистки (C), обработку ошибок и поддержку более сложных математических операций. Добавим кнопку "C" для очистки поля ввода:
// ... предыдущий код ...
if (value === 'C') {
display.value = '';
} else if (value === '=') {
// ... обработка знака равенства ...
} else {
// ... добавление значения ...
}
// ... остальной код ...
Также можно добавить обработку исключений, таких как деление на ноль, и улучшить пользовательский интерфейс, например, добавив стили CSS. Возможности для расширения функциональности практически безграничны!
Шаг 4: Улучшение интерфейса с помощью CSS
Чтобы наш калькулятор выглядел привлекательнее, добавим немного стилей CSS. Это позволит настроить внешний вид кнопок, поля ввода и всего контейнера. Например, можно задать цвета, размеры и отступы.
/* styles.css */
#calculator {
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
}
#display {
width: 100%;
padding: 10px;
font-size: 20px;
text-align: right;
}
.buttons button {
width: 50px;
height: 50px;
margin: 5px;
font-size: 20px;
}
Шаг 5: Тестирование и отладка
После написания кода очень важно его тщательно протестировать. Проверьте все функции калькулятора, обратите внимание на обработку ошибок и убедитесь, что все работает корректно; Инструменты разработчика браузера помогут вам отладить код и найти возможные ошибки.
Таблица сравнения разных подходов к реализации
| Подход | Преимущества | Недостатки |
|---|---|---|
eval | Простота использования | Проблемы безопасности, ограниченная функциональность |
| Парсер математических выражений | Безопасность, расширенная функциональность | Более сложная реализация |
Облако тегов
| JavaScript | Калькулятор | Веб-разработка | Программирование | |
| CSS | eval | Обработка событий | DOM | Функции |
Читайте другие наши статьи о разработке на JavaScript и создании веб-приложений!