Создание простого калькулятора с помощью javascript похоже на обряд посвящения для каждого фронтенд-разработчика. В этой статье объясняется, как его создать.
Требуются знания следующего
- Классы JavaScript
- "для каждого"
- Функции JavaScript
- Стрелочные функции
&&
и||
операторы- Слушатели событий
- HTML
- CSS
Начнем с написания нашего HTML-кода
Мы добавляем классы в HTML-код, чтобы мы могли стилизовать его с помощью атрибутов CSS и данных, чтобы нацелить его с помощью javascript.
CSS для калькулятора
с нашими настройками HTML и CSS у нас есть что-то вроде этого
Код JavaScript
Мы начинаем с нацеливания на наши элементы с помощью атрибутов данных, прикрепленных к ним в файле HTML.
Следующее, что нужно сделать, это создать класс, который будет содержать все функции для выполнения математических операций с калькулятором.
Класс - это тип функции, но вместо использования ключевого слова function для ее запуска мы используем ключевое слово class, а свойства назначаются внутри метода constructor ().
currentOperand
и previousOperand
представляют текущие и предыдущие числа на экране калькулятора.
- Метод clear заключается в том, чтобы
currentOperand, previousOperand and the operation
по умолчанию оставались пустыми и пустыми. - Метод delete удаляет последнее число из набора чисел в текущих числах на экране калькулятора.
- appendNumber принимает параметр numbe r и проверяет, включает ли
currentOperand
десятичное число и является ли десятичным числом, и ничего не делает, если оно есть, а также обновляет значениеcurrentOperand
, преобразуя его в строка, поэтому javascript не добавляет номер, а добавляет его. - Функция flushOperator проверяет, не является ли
currentOperand
пустым, проверяет, не является лиpreviousOperand
пустым, и вызывает функцию вычисления. Он также принимает параметр operation, который устанавливаетthis.operation
to operation, чтобы наш калькулятор знал, какую операцию использовать при вычислении значений. Затем мы устанавливаемpreviousOperand
наcurrentOperand
и убираемcurrenOperand
- Функция вычислить предназначена для получения нашего вычисленного значения и требует вычисления переменных, предыдущие и текущие переменные представляют
currentOperand
иpreviousOperand
и преобразуются в число. Он также проверяет, нет ли у нас предыдущего и текущего значения, и не вычисляет. Затем мы используем оператор switch, который принимаетthis.operation
, чтобы проверить, совпадает лиthis.operation
с символами в кейсе, и выполнить код внутри кейсов, после чего мы устанавливаем наше вычисляемое значение. - Функция updateDisplay обновляет innerText
this.currentScreenTextElement
значениемcurrentOperand
, а также innerTextthis.previousScreenTextElement
значениемpreviousOperand
. и операция, если операция не является пустой, когда она вызывается.
Мы создаем переменную калькулятора, устанавливаем ее равной new Calculator()
и передаем ей свойства из нашего конструктора класса. Мы добавляем eventListeners к нашим кнопкам, когда они нажимаются, и вызываем методы нашего класса.
Окончательный вид
Вот и все! , вы только что создали свой собственный калькулятор JavaScript.
Ссылка на репозиторий Github: https://github.com/lape15/javascript-calculator
Ссылка на калькулятор: https://lape15.github.io/javascript-calculator/