Создаём калькулятор на JavaScript

Автор: |
Нет комментариев

Начнем с простого калькулятора, который будет выполнять базовые арифметические операции, а затем шаг за шагом будем его улучшать.

Шаг 1: Базовый калькулятор

Файл calculator.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Простой Калькулятор</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }	
        input[type=number], button {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Простой Калькулятор</h1>
    
    <input type="number" id="num1" placeholder="Первое число">
    <select id="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="number" id="num2" placeholder="Второе число">
    <button onclick="calculate()">Вычислить</button>
    <p>Результат: <span id="result"></span></p>

    <script src="calculator.js"></script>
</body>
</html>

Файл calculator.js

// Получаем элементы из DOM
const num1 = document.getElementById('num1');
const operator = document.getElementById('operator');
const num2 = document.getElementById('num2');
const result = document.getElementById('result');

// Функция для вычисления результата
function calculate() {
    // Преобразование строковых значений в числовые
    let number1 = parseFloat(num1.value);
    let number2 = parseFloat(num2.value);
    let operation = operator.value;

    // Выполнение соответствующей операции
    switch(operation) {
        case '+':
            result.textContent = number1 + number2;
            break;
        case '-':
            result.textContent = number1 - number2;
            break;
        case '*':
            result.textContent = number1 * number2;
            break;
        case '/':
            if(number2 !== 0) {
                result.textContent = number1 / number2;
            } else {
                alert("Ошибка: деление на ноль!");
            }
            break;
        default:
            result.textContent = 'Неизвестный оператор';
    }
}

На данном этапе у нас есть простой калькулятор, который принимает два числа, выполняет одну из четырех базовых операций и выводит результат.

Шаг 2: Добавляем проверку ввода

Сейчас калькулятор работает, но он не проверяет корректность введенных данных. Давайте добавим простую проверку на ввод чисел.

Измененный фрагмент JavaScript

function calculate() {
    // Проверка на наличие введённых данных
    if (!num1.value || !num2.value) {
        alert("Пожалуйста, введите оба числа.");
        return;
    }
	
    // Преобразование строковых значений в числовые
    let number1 = parseFloat(num1.value);
    let number2 = parseFloat(num2.value);
    let operation = operator.value;

    // Если хотя бы одно значение не является числом
    if (isNaN(number1) || isNaN(number2)) {
        alert("Пожалуйста, введите действительные числа.");
        return;
    }

    // Выполнение соответствующей операции
    switch(operation) {
        case '+':
            result.textContent = number1 + number2;
            break;
        case '-':
            result.textContent = number1 - number2;
            break;
        case '*':
            result.textContent = number1 * number2;
            break;
        case '/':
            if(number2 !== 0) {
                result.textContent = number1 / number2;
            } else {
                alert("Ошибка: деление на ноль!");
            }
            break;
        default:
            result.textContent = 'Неизвестный оператор';
    }
}

Теперь калькулятор предупреждает пользователя, если введены неверные данные или отсутствует одно из чисел.

Если в вашем базовом калькуляторе используются поля типа input[type=»number»], то браузер автоматически ограничивает ввод только числовыми значениями, и проверка на корректность введенного значения становится излишней.

Предложенная ранее проверка на корректность данных была направлена на предотвращение ввода некорректных символов, таких как буквы или специальные символы, которые могут привести к ошибкам в вычислениях. Однако, поскольку input[type=»number»] уже фильтрует вводимые данные, то для вашего случая эта проверка действительно избыточна.

Тем не менее, если вы планируете расширять функционал калькулятора в будущем, возможно, стоит оставить эту проверку на месте, чтобы обезопаситься от потенциальных проблем с вводом данных.

Шаг 3: Улучшение интерфейса

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

Изменённый HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Простой Калькулятор</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .container {
            display: inline-block;
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
        }	
        input[type=number], select, button {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }
        button {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Простой Калькулятор</h1>
        
        <input type="number" id="num1" placeholder="Первое число">
        <select id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" id="num2" placeholder="Второе число">
        <br><br>
        <button onclick="calculate()">Вычислить</button>
        <button onclick="clearFields()">Очистить</button>
        <p>Результат: <span id="result"></span></p>
    </div>

    <script src="calculator.js"></script>
</body>
</html>

Изменённый calculator.js

// Получаем элементы из DOM
const num1 = document.getElementById('num1');
const operator = document.getElementById('operator');
const num2 = document.getElementById('num2');
const result = document.getElementById('result');

// Функция для вычисления результата
function calculate() {
    // Проверка на наличие введённых данных
    if (!num1.value || !num2.value) {
        alert("Пожалуйста, введите оба числа.");
        return;
    }

    // Преобразование строковых значений в числовые
    let number1 = parseFloat(num1.value);
    let number2 = parseFloat(num2.value);
    let operation = operator.value;

    // Если хотя бы одно значение не является числом
    if (isNaN(number1) || isNaN(number2)) {
        alert("Пожалуйста, введите действительные числа.");
        return;
    }

    // Выполнение соответствующей операции
    switch(operation) {
        case '+':
            result.textContent = number1 + number2;
            break;
        case '-':
            result.textContent = number1 - number2;
            break;
        case '*':
            result.textContent = number1 * number2;
            break;
        case '/':
            if(number2 !== 0) {
                result.textContent = number1 / number2;
            } else {
                alert("Ошибка: деление на ноль!");
            }
            break;
        default:
            result.textContent = 'Неизвестный оператор';
    }
}

// Функция для очистки полей
function clearFields() {
    num1.value = '';
    num2.value = '';
    result.textContent = '';
}

Теперь калькулятор выглядит лучше и имеет дополнительную функциональность для удобства использования.

Шаг 4: Расширяем возможности калькулятора

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

Изменённый calculator.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Расширенный Калькулятор</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .container {
            display: inline-block;
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
        }
        input[type=number], select, button {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }
        button {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Расширенный Калькулятор</h1>
        
        <input type="number" id="num1" placeholder="Первое число">
        <select id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="^">^</option>
            <option value="sqrt">√</option>
            <option value="%">%</option>
        </select>
        <input type="number" id="num2" placeholder="Второе число">
        <br><br>
        <button onclick="calculate()">Вычислить</button>
        <button onclick="clearFields()">Очистить</button>
        <p>Результат: <span id="result"></span></p>
    </div>

    <script src="calculator.js"></script>
</body>
</html>

Изменённый calculator.js

// Получаем элементы из DOM
const num1 = document.getElementById('num1');
const operator = document.getElementById('operator');
const num2 = document.getElementById('num2');
const result = document.getElementById('result');

// Функция для вычисления результата
function calculate() {
    // Проверка на наличие введённых данных
    if (!num1.value || !num2.value) {
        alert("Пожалуйста, введите оба числа.");
        return;
    }		

    // Преобразование строковых значений в числовые
    let number1 = parseFloat(num1.value);
    let number2 = parseFloat(num2.value);
    let operation = operator.value;

    // Если хотя бы одно значение не является числом
    if (isNaN(number1) || isNaN(number2)) {
        alert("Пожалуйста, введите действительные числа.");
        return;
    }

    // Выполнение соответствующей операции
    switch(operation) {
        case '+':
            result.textContent = number1 + number2;
            break;
        case '-':
            result.textContent = number1 - number2;
            break;
        case '*':
            result.textContent = number1 * number2;
            break;
        case '/':
            if(number2 !== 0) {
                result.textContent = number1 / number2;
            } else {
                alert("Ошибка: деление на ноль!");
            }
            break;
        case '^':
            result.textContent = Math.pow(number1, number2);
            break;
        case 'sqrt':
            if(number1 >= 0) {
                result.textContent = Math.sqrt(number1);
            } else {
                alert("Невозможно извлечь квадратный корень из отрицательного числа.");
            }
            break;
        case '%':
            result.textContent = number1 % number2;
            break;
        default:
            result.textContent = 'Неизвестный оператор';
    }
}

// Функция для очистки полей
function clearFields() {
    num1.value = '';
    num2.value = '';
    result.textContent = '';
}

Теперь наш калькулятор поддерживает дополнительные операции, такие как возведение в степень, извлечение квадратного корня и остаток от деления.

Давайте разберём весь код нашего калькулятора пошагово, чтобы вы могли понять каждый аспект его работы.

Разбор кода

Сначала изучим HTML-файл.

Тег < !DOCTYPE html > сообщает браузеру, что документ написан на HTML5.

Теги < html > , < head > , < body > являются основными контейнерами документа.

В теге < head > мы определяем метаданные и подключаем стили:

< meta charset= » UTF-8″ > : Устанавливает кодировку символов UTF-8.

< title > Расширенный Калькулятор < /title > : Определяет заголовок окна браузера.

Внутри тега < style > находятся CSS-стили, которые определяют внешний вид элементов на странице.

В теге < body > содержится основное содержимое страницы:

< div class=» container» > : Создает контейнер для размещения содержимого калькулятора.

< h1 > Расширенный Калькулятор < /h1 > : Заголовок калькулятора.

< input type=» number» id=» num1″ placeholder=» Первое число» > : Поле для ввода первого числа.

< select id=» operator» > : Список операторов, из которого пользователь может выбрать нужную операцию.

< input type=» number» id=» num2″ placeholder=» Второе число» > : Поле для ввода второго числа.

< button onclick=» calculate()» > Вычислить < /button > : Кнопка для запуска вычислений.

< button onclick=» clearFields()» > Очистить < /button > : Кнопка для очистки полей ввода.

< p > Результат: < span id=» result» > < /span > < /p > : Элемент для отображения результата вычислений.

В конце файла подключается JavaScript-файл < script src=» calculator.js» > < /script > .






Теперь посмотрим на JavaScript-код 





Константы для доступа к элементам DOM:





const num1 = document.getElementById(‘num1’);
const operator = document.getElementById(‘operator’);
const num2 = document.getElementById(‘num2’);
const result = document.getElementById(‘result’);





Эти строки получают доступ к соответствующим элементам на странице через их идентификаторы (id), заданные в HTML.





Функция calculate():
Сначала функция проверяет, введены ли оба числа:
if (!num1.value || !num2.value) {
alert(«Пожалуйста, введите оба числа.»);
return;
}
Если одно из полей пусто, выводится предупреждение и выполнение функции прекращается.
Затем преобразует строковые значения из полей ввода в числовые:
let number1 = parseFloat(num1.value);
let number2 = parseFloat(num2.value);





Метод parseFloat используется для преобразования строкового представления числа в десятичное число.





Далее проверяется, являются ли введённые значения числами:
if (isNaN(number1) || isNaN(number2)) {
alert(«Пожалуйста, введите действительные числа.»);
return;
}
Если одно из значений не является числом, выводится предупреждение и выполнение функции прекращается.





Основная логика вычислений реализована с помощью оператора switch:
switch(operation) {
case ‘+’:
result.textContent = number1 + number2;
break;
case ‘-‘:
result.textContent = number1 — number2;
break;
// Другие случаи…
}
В зависимости от выбранного оператора выполняется соответствующая операция над числами. Результат сохраняется в элементе с id=»result».





Функция clearFields():
function clearFields() {
num1.value = »;
num2.value = »;
result.textContent = »;
}
Она очищает поля ввода и элемент для отображения результата.






		
			

												

		
	
	

				

				



	
	
		

		
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *