Сводка
В этом посте я покажу вам, как создать калькулятор с помощью JavaScript. Пост предоставляет вам каждый шаг, необходимый для создания калькулятора, а также логику, лежащую в его основе.
Требования
Предпосылки:
- Базовые знания HTML
- Базовые знания CSS
- Базовые знания JavaScript
Требования:
- Текстовый редактор (для этого примера использовался Visual Studio Code)
- Операционная система (MacOS, Linux, Windows) с обновленной версией
Введение
Есть много разных способов создать калькулятор с помощью JavaScript. Я узнал, что как разработчик вы можете решать проблемы любым удобным для вас способом. Например, один разработчик может использовать сетку для макета своей страницы, а другой может использовать flex-box. Однако цель у обоих разработчиков одна и та же. Я покажу вам свой подход к созданию калькулятора с использованием JavaScript в консоли.
Пошаговое объяснение
Мы пытаемся создать простой калькулятор, который может принимать два целых числа и складывать, вычитать, умножать или делить их. Мы также добавим мощность, модуль и четкую функцию. Функция мощности вернет первое целое число в степень второго целого числа. Функция модуля вернет остаток от деления первого числа на второе число. Наконец, нам нужно объявить переменную, которая будет содержать ответ на наше выражение (я использовал результат переменной, но вы можете использовать все, что хотите). Таким образом, функция очистки очистит переменную результата, чтобы мы могли использовать ее для нового выражения.
В нашем файле index.html мы хотим, чтобы наш шаблон был настроен вместе с нашим скриптом и файлами css, связанными с ним. В теле html дайте вашей странице заголовок с названием «JS Calculator» или что-то подобное. Ниже дайте пользователю инструкции о том, как перейти к консоли, щелкнув правой кнопкой мыши в любом месте страницы и выбрав инспектор. Затем дайте им инструкции о том, как использовать ваш калькулятор! Сделайте это после того, как вы уже создали свой калькулятор, конечно! Я также объясню, как вы можете использовать калькулятор внутри вашего JS-файла. Не стесняйтесь стилизовать страницу с помощью CSS, чтобы она выглядела эстетично.
Теперь мы можем начать писать код JS для создания нашего калькулятора.
Сначала мы начнем с объявления и присвоения значения 0 переменной с именем result. Вот так:
пусть результат = 0
Далее нам нужно создать объект, который будет содержать некоторые функции. Для каждой из наших математических операций (сложение, вычитание, умножение и т. д.) будет функция.
var brain = {добавить: функция (число1, число2) {результат = число1 + число2; вернуть результат;},
вычесть: функция (число1, число2) {результат = число1 — число2; вернуть результат;},
умножить: функция (число1, число2) {результат = число1 * число2; вернуть результат;},
разделить: функция (число1, число2) {результат = число1 / число2; вернуть результат;},
мощность: функция (число1, число2) {результат = число1 ** число2; вернуть результат;},
модуль: функция (число1, число2) {результат = число1% число2; вернуть результат;},
ясно: функция () {результат = 0; вернуть результат}
Вот что происходит в этом блоке кода:
Я назвал свой объект «мозгом», потому что этот объект по сути является «мозгом» моего калькулятора. Ключи наших объектов будут связаны с операцией, а ее значения будут связаны с функцией, которая будет выполнять вычисления. Параметрами функции будут два числа, которые мы хотим использовать в нашем выражении. Я назвал свои параметры num1 и num2. Таким образом, каждая функция будет принимать переданные ей аргументы, выполнять над ними операцию, сохранять результат в нашей переменной результата и возвращать его. Последний элемент в объекте имеет внутри функцию, которая установит значение нашей переменной результата обратно в 0.
Допустим, мы хотим сложить числа 5 и 5. Нам нужно начать с нацеливания на объект мозга и присоединения к нему метода добавления. Нам также нужно будет передать 5 и 5 в метод add в качестве аргументов. Это делается так:
мозг.добавить(5, 5)
Мы можем записать это в консоль, чтобы просмотреть результат:
console.log(мозг.добавить(5, 5))
Эта логика применяется к каждому элементу внутри нашего объекта.
У пользователя будет меньше работы, потому что он может получить результат своего выражения без необходимости вводить «console.log» или использовать переменную, которая будет хранить его. Все, что им нужно будет сделать, это ввести объект, точку, любую функцию, которая им нужна, с выбранными целыми числами, переданными в качестве аргументов.
