Здравствуйте! Я учу JavaScript менее недели и сегодня решил попробовать написать что-то простое — калькулятор. В целом, калькулятор почти готов, но я хотел бы доработать его так, чтобы поле для ввода чисел было только одно. У меня есть несколько идей, но они связаны с использованием циклов и функций, и я не уверен, что подхожу к задаче правильно. Прикрепил код ниже, и мне бы хотелось получить ваше мнение о том, что можно улучшить, упростить или изменить, но в рамках базового уровня. P.S. Названия классов и переменных написаны немного наугад, так что прошу не акцентировать на этом внимание.
<pre><code class="html"><div class="calculator">
<input class="num1" type="text" placeholder="Число">
<div class="case__button">
<button value="+">+</button>
<button value="-">-</button>
<button value="*">*</button>
<button value="/">/</button>
</div>
<input class="num2" type="text" placeholder="Число">
<input class="result" type="text" placeholder="Результат">
<button class="f1">Посчитать</button>
</div></code></pre>
<pre><code class="javascript">let num1 = document.querySelector('.num1');
let num2 = document.querySelector('.num2');
let resultField = document.querySelector('.result');
let selectedSign;
const button2 = document.querySelector('.f1');
document.querySelector('.case__button').onclick = (event) => {
if (event.target.tagName === 'BUTTON') {
selectedSign = event.target.value;
}
};
button2.onclick = () => {
let a = parseInt(num1.value, 10);
let b = parse
Ваш калькулятор — отличная идея для практики JavaScript, особенно для начинающего! Попробую помочь вам улучшить код, чтобы сделать его более простым и удобным, используя только одно поле ввода. Также постараюсь предложить несколько улучшений.
### Основные изменения
1. **Использование одного поля для ввода значений:** Вместо двух полей ввода, вы можете использовать одно и разделять значения с помощью запятой. Например, пользователь может ввести `2,3` для выполнения операции между числами 2 и 3.
2. **Улучшение обработки ввода:** Вы можете добавить проверку на правильность ввода и вывод ошибок, если введенные данные некорректны.
3. **Небольшие улучшения в коде:** Упрощение выборки элементов и обработчиков событий.
Вот пример, как это может выглядеть:
```html
<div class="calculator">
<input class="num" type="text" placeholder="Введите числа, например 2,3">
<div class="case__button">
<button value="+">+</button>
<button value="-">-</button>
<button value="*">*</button>
<button value="/">/</button>
</div>
<input class="result" type="text" placeholder="Результат" readonly>
<button class="f1">Посчитать</button>
</div>
```
```javascript
let numInput = document.querySelector('.num');
let resultField = document.querySelector('.result');
let selectedSign;
document.querySelector('.case__button').onclick = (event) => {
if (event.target.tagName === 'BUTTON') {
selectedSign = event.target.value;
}
};
document.querySelector('.f1').onclick = () => {
let numbers = numInput.value.split(',').map(num => parseFloat(num.trim()));
// Проверка на наличие двух чисел
if (numbers.length !== 2 || isNaN(numbers[0]) || isNaN(numbers[1])) {
resultField.value = "Ошибка ввода!";
return;
}
let [a, b] = numbers;
let result;
switch (selectedSign) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case '*':
result = a * b;
break;
case '/':
result = b !== 0 ? a / b : "Деление на 0!";
break;
default:
resultField.value = "Выберите операцию!";
return;
}
resultField.value = result;
};
```
### Учтите следующие моменты:
- **Чтение и ввод значений:** Ввод чисел разделяется запятой, и сразу обрабатывается массив значений.
- **Проверка данных:** Добавлена проверка, чтобы убедиться, что именно два числа введены и они – валидные числа.
- **Улучшенная читаемость кода:** Код упорядочен, и названия переменных стали более понятными.
Эти улучшения делают ваш калькулятор более простым в использовании и позволяют лучше обрабатывать возможные ошибки. Удачи в дальнейшей практике программирования на JavaScript!
Учитесь пользоваться доступными инструментами. Тот же ChatGPT, GigaChat или DeepSeek довольно толково прокомментируют:
1. HTML Семантика: Использование <div> для кнопок операций (case__button) не совсем семантично. Лучше использовать <fieldset> или <div role="group">, чтобы явно указать, что это группа связанных элементов. Доступность: У элементов отсутствуют атрибуты aria-*, которые улучшили бы доступность для пользователей с ограниченными возможностями. Например, можно добавить aria-label для кнопок операций. Классы: Имена классов (num1, num2, result, f1) не очень описательны. Лучше использовать более понятные имена, например, input-number, button-calculate и т.д. 2. JavaScript Глобальные переменные: Переменные num1, num2, resultField, selectedSign и button2 объявлены в глобальной области видимости. Это может привести к конфликтам, если код будет расширяться. Лучше использовать модульный подход или замыкания. Обработка ошибок: Нет проверки на корректность введенных данных. Если пользователь введет нечисловое значение, результат будет NaN. Повторяющийся код: Парсинг чисел (parseInt) дублируется. Можно вынести в отдельную функцию. События: Использование onclick устарело. Лучше использовать addEventListener. Логика операций: Логику операций можно вынести в отдельную функцию для улучшения читаемости.