Пишем калькулятор на JavaScript
В этой статье мы с вами, как следует из названия, напишем простой калькулятор на JavaScript.
Желание написать калькулятор возникло у меня после просмотра одного туториала, посвященного созданию «simple calculator», который оказался далеко не симпл и толком ничего не умел делать.
Наш калькулятор будет true simple (42 строки кода, включая пробелы между блоками), но при этом полнофункциональным и масштабируемым.
Без дальнейших предисловий, приступаем к делу.
Наша разметка выглядит так:
Здесь мы подключаем библиотеку, создаем контейнер для калькулятора и поле для вводимых символов и результата.
Подключаем стили:
* < margin: 0; padding: 0; box-sizing: border-box; >body < height: 100vh; background: radial-gradient(circle, skyblue, steelblue); display: flex; justify-content: center; align-items: center; >.calculator < width: 320px; height: 480px; background: #eee; border-radius: 5px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(0, 0, 0, 0.2); >output < display: flex; justify-content: center; align-items: center; width: 300px; height: 40px; background: #fff; margin: 10px auto; border-radius: 5px; font-size: 1.4em; font-weight: bold; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3), inset -1px -1px 1px rgba(0, 0, 0, 0.3); >.keyboard < height: 440px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; >button
Вот что мы имеем на данный момент:
Кнопки будут генерироваться программно.
Переходим к скрипту.
Определяем поле для вывода результата и создаем контейнер для клавиатуры:
const output = document.querySelector('output') const div = document.createElement('div') div.classList.add('keyboard') document.querySelector('.calculator').appendChild(div) Наша строка с символами выглядит так:
'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) =' Преобразуем данную строку в массив и создаем кнопки:
// разделителем служит пустая строка // можно было бы обойтись без пробелов, если бы у нас не было "CE" 'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='.split(' ') // пробегаемся по массиву // для каждого символа // создаем кнопку с помощью строкового литерала // записываем значение символа в атрибут "value" кнопки .map(symbol => < div.insertAdjacentHTML('beforeend', `">$ `) >) Находим созданные кнопки и добавляем к ним обработчик события «клик»:
document.querySelectorAll('button').forEach(button => < button.addEventListener('click', function () < // по клику вызывается функция со значением кнопки в качестве параметра calc(this.value) >) >) Мы также хотим иметь возможность вводить символы с помощью клавиатуры. Для этого нам необходимо добавить обработчик события «нажатие клавиши» к объекту «Document» или «Window», затем отфильтровать ненужные значения свойства «ключ» клавиши, например, с помощью регулярного выражения:
document.addEventListener('keydown', event => < if ((event.key).match(/[0-9%\/*\-+\(\)=]|Backspace|Enter/)) calc(event.key) >) Метод «match» в данном случае играет роль фильтра: он не позволяет передавать функции «calc» аргумент, не соответствующий заданному в нем условию.
Само условие звучит так: если значением event.key является один из символов, указанных в квадратных скобках ([]; цифра от 0 до 9, знаки деления, умножения, сложения, вычитания, открывающая, закрывающая круглые скобки или знак равенства; обратная косая черта — экранирование) или (| — альтерация) Backspace, или Enter, то вызываем calc с event.key в качестве параметра, иначе ничего не делаем (Shift также успешно отбрасывается).
Наша главная (и единственная) функция «calc» выглядит следующим образом (код следует читать снизу вверх):
// функция принимает значение кнопки или ключ клавиши function calc(value) < // если нажат знак равенства или Enter if (value.match(/=|Enter/)) < // пробуем выполнить операцию try < // вычисляем значение строки // это возможно благодаря методу "evaluate" объекта "math" // Math.trunc используется для округления до целого числа output.textContent = Math.trunc(math.evaluate(output.textContent)) // если операцию выполнить невозможно >catch < // сохраняем значение поля let oldValue = output.textContent // создаем новую переменную let newValue = 'недопустимое выражение' // выводим значение новой переменной в поле output.textContent = newValue // через полторы секунды возвращаем полю старое значение setTimeout(() =>< output.textContent = oldValue >, 1500) > // если нажат символ "C" > else if (value === 'C') < // очищаем поле output.textContent = '' // если нажат символ "СЕ" или Backspace >else if (value.match(/CE|Backspace/)) < // уменьшаем строку на один символ output.textContent = output.textContent.substring(0, output.textContent.length - 1) // если нажата любая другая (отфильтрованная) кнопка или клавиша >else < // записываем ее значение в поле output.textContent += value >> В завершение, парочка слов о заявленной масштабируемости и полнофункциональности.
Метод «evaluate» (ранее «eval») и другие методы Math.js имеют очень большие возможности. Опираясь на эти возможности, мы можем легко расширить функционал нашего калькулятора, добавив в него новые символы и операторы, предусмотрев возможность работы с числами с плавающей точкой (регулируя количество знаков после запятой с помощью переключателя и метода «toFixed») и т.д.
Благодарю за внимание. Надеюсь, вы нашли для себя что-то полезное. Хороших выходных и счастливого кодинга.
JavaScript
При установке синтаксиса JavaScript область кода выражения должна содержать скрипт JavaScript.
Примечание. Наименования полей/переменных/выражений чувствительны к регистру.
Следующий пример демонстрирует вычисление суммы двух полей Калькулятора:
// Вычисление суммы полей let result; result = COL1 + COL2; return result; В теле скрипта можно использовать ссылки на другие поля или переменные Калькулятора, в том числе новые, созданные в списке выражений. Через промежуточное выражение с типом Переменный можно передать массив. Ко входным Переменным можно обращаться через объект this.Var. .
Примечание: В выражении возможно использовать ссылки на ранее вычисленные выражения, т.е. находящиеся выше в списке выражений. В связи с этим неверная позиция в списке может приводить к ошибке.
В данном примере для вычисления переменной result используются ссылки на поля с именами COL1 и COL2 .
Для вывода результата в вычисляемое поле калькулятора используется команда return , которая возвращает значение переменной result , содержащей вычисленную сумму полей Калькулятора.
Важно: скрипт необходимо завершать командой return , которая выводит результат в вычисляемое поле калькулятора. В противном случае скрипт будет выполнен, но результат не будет выведен в вычисляемое поле.
Компактный вариант кода вычисления суммы полей калькулятора:
// Вычисление суммы полей return COL1 + COL2; Пример вычисления степени числа:
// Функция вычисления степени числа function pow(x, n) if (n != 1) return x * pow(x, n - 1); > else return x; > > // Вывод результата функции в поле калькулятора return pow(COL1, COL2); В данном скрипте определена функция pow(x, n) , принимающая в качестве аргументов число и степень, в которую оно возводится. Для вывода результата скрипта в вычисляемое поле калькулятора используется команда return pow(COL1, COL2) , где pow(COL1, COL2) — вызов объявленной функции с передачей параметрам х и n значений из полей (или переменных) калькулятора COL1 и COL2 соответственно.
В коде JavaScript можно использовать встроенные функции Калькулятора:
function my_concat(x, n) let s; // s = x.concat(n); - используется метод JavaScript s = Concat(x,n); // - используется функция калькулятора return s; > return my_concat(COL1, COL2); Наименования встроенных функций Калькулятора и JavaScript не пересекаются. Функции Калькулятора всегда начинаются с большой буквы, однако, их можно переопределить в коде JS. Явного импорта функций Калькулятора (как это делается в компоненте JavaScript) делать не нужно.
Примечание: в отличии от компонента JavaScript в Калькуляторе не поддерживается объект Promise.
Импорт внешних модулей
Как и в компоненте JavaScript поддерживаются внешние модули, но в Калькуляторе возможно использование только модульной системы CommonJS. Модульная система ES6 (ECMAScript 6) не поддерживается. С примерами и документацией использования модулей CommonJS можно ознакомится в статье JavaScript: Импорт внешних модулей.
Особенности применения внешних модулей
Для импорта модуля CommonJS применяется функция require . Пример:
const foo = require("foo/foo.js"); Инициализация объектов модуля происходит при первом таком вызове, при последующих используется кэш, в котором сохраняется состояние объектов модуля предыдущего вызова. Поскольку в Калькуляторе для каждой из вычисляемых ячеек таблицы происходит выполнение скрипта, то содержащийся в нем вызов require модуля происходит многократно и используется кэш. Таким образом измененное состояние объектов модуля может передаваться от вызова к вызову. Это необходимо учитывать и при необходимости очищать кэш, доступный через объект require.cache :
let path = require.resolve("foo/foo.js"); delete require.cache[path]; // Очищается кэш модуля "foo/foo.js" Важно: использование кэша для передачи значений между вызовами require может привести к непредсказуемым результатам вычислений в виду использования многопоточности вычислений.
Панель быстрого доступа
На панели расположена кнопка вызова окна Предпросмотра и кнопки, по нажатию на которые в область кода выражения вставляется заготовка либо шаблон.
Предпросмотр — позволяет оценить корректность расчетов, отображая до 100 первых строк результирующей таблицы. Горячая клавиша вызова — F3 .
- — для ввода вещественного числа, будет вставлено 0.0 ;
- — для ввода строки, будет вставлено «» ;
- — для ввода даты, будет вставлена конструкция создания объекта, содержащего текущую дату. Пример: new Date(2020, 1, 5) ;
- — для ввода даты/времени, будет вставлена конструкция создания объекта, содержащего текущее дата/время. Пример: new Date(2020, 1, 5, 13, 12, 50, 100) .
Простой скрипт калькулятора на JavaScript
Использование JavaScript простой и очевидный вариант при реализации простых калькуляторов, призванных заменить публикацию на сайте больших таблиц и для добавления некоторой интерактивности.
Рассмотрим простой калькулятор на чистом JavaScript (без использования библиотек типа jQuery и пр.) использующий функции уникализации и сортировки данных в массиве.
Калькулятором будем считать стоимость квартир основываясь на стоимости квадратного метра и площади соответственно. При этом данные (значения тегов ) в выпадающих списках (теги ) будут заполняться автоматически и в зависимости от остальных.
function sortNumber(a,b) // функция для сортировки одномерного массива { return a - b; } function sortArray(a,b) { // функция для сортировки многомерного массива по первому индексу if (a[0]b[0]) return -1; if (a[0]>b[0]) return 1; return 0; } function unique(a) // функция уникализации значений массива { var r = new Array(); o:for(var i = 0, n = a.length; i n; i++) { for(var x = 0, y = r.length; x y; x++) { if(r[x]==a[i]) continue o; } r[r.length] = a[i]; } return r; } // произвольные данные [площадь, этаж, цена] var room0 = [[0, 0, 0]]; var room1 = [[40, 1, 20], [50, 3, 25], [53, 3, 30]]; var room2 = [[70, 1, 40], [72, 1, 35], [73, 5, 38]]; function calc(par) { // квартиры if (par == 0) { roomx = room0 }; if (par == 1) { roomx = room1 }; if (par == 2) { roomx = room2 }; var floorarray = new Array(); for (i = 0; i roomx.length; i++) { floorarray[i] = roomx[i][1]; } var uniquefloor = new Array(); uniquefloor = unique(floorarray); uniquefloor = uniquefloor.sort(sortNumber); // этажи var objFloor = document.getElementById("floor"); if (par != 'floor' && par != 'area') { objFloor.length = 0; for (i = 0; i uniquefloor.length; i++) { objFloor.options[objFloor.options.length] = new Option(uniquefloor[i]+' этаж', uniquefloor[i]); } } var areaarray = new Array(); areaarray = roomx; areaarray = areaarray.sort(sortArray); var floorvalue = objFloor.options[objFloor.selectedIndex].value; var objArea = document.getElementById("area"); // площади if (par != 'area') { objArea.length = 0; for (k = 0; k roomx.length; k++) { if (roomx[k][1] == floorvalue) { objArea.options[objArea.options.length] = new Option(areaarray[k][0],areaarray[k][2]); } } } // сумма area = objArea.options[objArea.selectedIndex].text; price = objArea.options[objArea.selectedIndex].value; summ = Number(price)*Number(area); document.form.summ.value = summ; return false; }
Пример работы нашего простого JavaScript калькулятора:
Некоторые полезные ссылки по функциям JavaScript, использованным в примере:
- Сортировка многомерных массивов в JavaScript
- Удаление дубликатов из массивов в JavaScript
- Создание динамических списков с помощью JavaScript
Простой калькулятор на чистом javascript
В этой статье я расскажу как сделать простой javascript калькулятор, без особых проблем, эта статья подойдёт в первую очередь тем, кто только начал изучать JavaScript и уже пробует создавать различные простые программы.
HTML файл:
Для начала как всегда начнём с HTML страницы и тут конечно не чего сложного нет.
Вот такой, совсем короткий HTML получается, кратко расскажу о нём.
Атрибут onclick , это событие клика мыши на элемент, в параметрах задаётся функция, которая будет запускаться при клики на элемент, это в принципе всё что нужно знать.
JavaScript файл:
Вот тут всё не много сложнее, но я постараюсь всё объяснить максимально понятным языком.
JavaScript
let num1 ; // Создаём переменную где будет хранится значение первого числа
let num2 ; // Создаём переменную где будет хранится значение второго числа
// Создаём переменную и берём элемент, куда будет выводится результат
let out = document . getElementById ( ‘out’ ) ;
// функция сложения
function plus ( ) <
num1 = document . getElementById ( 'n1' ) . value ;
num1 = parseInt ( num1 )
num2 = document . getElementById ( 'n2' ) . value ;
num2 = parseInt ( num2 )
out . innerHTML = num1 + num2 ;
// функция вычитания
function minus ( ) <
num1 = document . getElementById ( 'n1' ) . value ;
num1 = parseInt ( num1 )
num2 = document . getElementById ( 'n2' ) . value ;
num2 = parseInt ( num2 )
out . innerHTML = num1 - num2 ;
// функция умножения
function multiplication ( ) <
num1 = document . getElementById ( 'n1' ) . value ;
num1 = parseInt ( num1 )
num2 = document . getElementById ( 'n2' ) . value ;
num2 = parseInt ( num2 )
out . innerHTML = num1 * num2 ;
// функция деления
function division ( ) <
num1 = document . getElementById ( 'n1' ) . value ;
num1 = parseInt ( num1 )
num2 = document . getElementById ( 'n2' ) . value ;
num2 = parseInt ( num2 )
out . innerHTML = num1 / num2 ;
Давайте не много расскажу, что тут вообще происходит.
В начале просто создаём переменные которые нам могут пригодится, это первое число и второе, потом берём элемент, куда будем выводить значения которое получим.
Теперь подробно рассмотрим функции, я не буду все рассматривать, так как не чего почти не меняется, только действии.
Сначала, мы берём первое число из формы и ложем его в нашу переменную для первого значения, точнее берём строку, поэтому строчкой ниже мы переводим стоку в число, если там будут буквы, то он вернёт NaN или нет числа, точно также всё делаем и со вторым числом, только уже используем переменную, которую подготовили для второго числа.
В последней строчке функции мы складываем две переменные и выводим значение в элементе out .
Как то так и работает наша программа, дальше всё одинаковое, единственное различии, только в действии.
Вывод:
Вот такой простой калькулятор получился на чистом JavaScript, единственный существенный не достаток, в том, что событие вызываются устаревшим образом, сейчас их правильно вызывать через addEventListener() , я не стал его использовать по двум причинам, во первых, мне кажется для новичков такой способ не много легче, а эта статья именно для новичков, во вторых, если вы не знали о таком способе, то его обязательно надо знать, так как, не всегда вы будите работать со современном кодам, на старых сайтах используется такой способ.
В будущем может напишу статью, где буду делать более продвинутый калькулятор, поэтому, что бы не пропустить подписываетесь на все соц-сети.