Калькулятор на JavaScript
В сети встречаются различные интерфейсы, позволяющие взаимодействовать с сайтом, упрощая себе использование тех или иных функций. То есть, иногда задачи весьма замороченные, из-за чего становится нелегко в их решении. Но пользователям же даны технологии, а потому – возможно затратить меньше сил на повседневные потребности.
К примеру, на одном из сайтов требуется рассчитать стоимость того или иного материала или же оплату за проживание в квартире или комнате. Для этого требуется доставать калькулятор, вводить всяческие формулы и думать, причем иногда даже много. Но прочитав эту статью, пользователи смогут избавиться от такой запутанной задачи, ведь с помощью JavaScript облегчается выполнение операций с расчетом прямо на сайтах. А как это делается – пользователь узнает, прочитав материал ниже.
Прочитав этот материал, пользователь сможет узнать, как возможно написать на JavaScript калькулятор расчета стоимости для сайта. Будут указаны все основные моменты, касательно пояснений для новичков, что немаловажно. Следовательно, пользователи смогут изучить всю необходимую информацию и приступить к пункту «пишем свой калькулятор на JS».
В сегодняшнем случае, мы создаем простой калькулятор на JavaScript с кнопкой сброса. А потому – материал станет интересным для большинства начинающих программистов и просто людей, заинтересованных в этой теме.
Процесс разработки нужного кода
Первое, что нужно сделать – определиться с тем, какая библиотека JS станет использоваться при создании рабочего продукта. Так как это – калькулятор, то производятся математические вычисления. А значит, наиболее разумным решением станет вставка «Math.js». Подключить этот ресурс можно из сети, что выглядит таким образом:
<head>
<script src=«адрес ресурса»></script>
Это – лишь начало кода, не значащее ничего. Только подключенный ресурс и даже нет «тела» в этом отрывке. Однако, если продолжить, то появятся и другие элементы. К примеру, ниже также нужно прописать:
<body>
<div class=”calculator”>
<output></output>
</div>
Итак, теперь есть контейнер и некоторые другие строки кода, немаловажные для работы. Теперь предстоит начать работу над оформлением калькулятора. Кстати говоря, сейчас рассматривается вариант с красивым дизайном, кнопкой сброса и без формул – исключительно стандартные операции, предназначенные для «универсальных» задач. Если у пользователя есть опыт в CSS, то проблем это дело не доставит: нужно лишь прописать значения для отступов, центрирование и прочее (margin; align-items и прочее).
После того, как все необходимые элементы будут расставлены так, как хочется или нужно пользователю – можно дальше приступать к разработке кода. Сейчас имеется лишь пустой «корпус», где нет кнопок и не выводится еще никакое значение. Из-за этого становится ясно, что же делать дальше – прописывать элементы и заставлять скрипт отрисовывать вводимую информацию с кнопок на калькуляторе.
Итак, создаем контейнер для области с клавишами, а также обозначаем поле вывода:
const output = document.querySelector( ‘ output ‘ )
const div = document.createElement( ‘ div ‘ )
div.classList.add( ‘ keyboard ‘ )
document.querySelector( ‘ .calculator ‘ ).appendChild(div)
А вот с полем ввода весьма затрудненная ситуация. Там используется нестандартный код, из-за чего пользователи не понимают, как его добавить и как оно вообще обозначается. Ответом на их вопрос послужит следующая строка кода, которую рекомендуется именно скопировать, ведь переписывать его вручную тяжело:
‘CCE % / 7 8 9 * 4 5 6 – 1 2 3 + 0( )=’
Именно так выглядят кнопки в браузере, которые вводит пользователь. Зачастую это не совсем понятно начинающим, ведь такое возможно счесть за команду выполнения математический операции, однако, здесь просто указаны все основные элементы управления, предназначенные для ввода требуемых данных. Сложение, вычитание, деление, умножение – все это возможно только благодаря кнопкам на виртуальной клавиатуре в браузере на JavaScript.
Итак, с кнопками разобрались. «Что же дальше?» – ответ простой. Нужно, чтобы каждая из них работала. Если же просто добавить похожие на них элементы – ничего не произойдет при нажатии, ведь действие не привязано. Кстати говоря, рекомендуется параллельно дорабатывать CSS стиль элементов, чтобы калькулятор не был таким «страшным». Для работы кнопок вводится следующий «кусок» кода:
document.querySelectorAll(‘button’).forEach(button => {
button.addEventListener(‘click’, function () {
calc(this.value)
}
}
Но иногда пользователи не используют кнопки на интерфейсе, ведь привыкли к клавиатуре. Честно говоря, если человек привык печатать, то рекомендуется адаптировать под него скрипты. Но это не так сложно, как кажется, ведь единственное, что нужно сделать – добавить несколько дополнительных строк кода, которые позволят вводить информацию с клавиатуры. А выглядит это таким образом:
document.addEventListener(‘keydown’, event => {
if ((event.key).match(/[0-9%\/*\-+\(\)=]Backspace|Enter/)) calc(event.key)
})
Следует также отметить, что в этой части кода важную роль играет элемент «match». Если бы его не было – калькулятор считывал бы все символы, вводимые в поле. Это недопустимо в калькуляторе, ведь если появятся буквы, не являющиеся математическими – произойдет ошибка. Такого нельзя допускать, поэтому обязательно употребление «match» в коде.
И самое главное, что присутствует в программе на JavaScript – функция «calc». Ее код выглядит следующим образом:
function calc(value) {
if (value.match(/=|Enter/)) {
try {
output.textContent = Math.trunc(math.evaluate(output.textContent))
} catch {
let oldValue = output.textContent
let newValue = ‘недопустимое выражение’
output.textContent = newValue
setTimeout(() => {
output.textContent = oldValue
}, 1500)
}
} else if (value === ‘C’) {
output.textContent = ‘ ‘
} else if (value.match(/CE|Backspace/)) {
output.textContent = output.textContent.substring(0, output.textContent.length – 1)
} else {
output.textContent +=value
}
}
После всего этого, калькулятор будет готов. И для того, чтобы создать таковой, использовался только написанный на JavaScript код. Если есть желание еще поработать над подобным проектом, то возможно даже создать расширяемый калькулятор, дополняя новыми особенностями. Но для такого необходимы специализированные знания.
А что касается калькулятора для расчета стоимости – здесь примерно такая же схема. Однако, она отличается всего лишь парой строчек кода. Необходимо лишь интегрировать специальную формулу, чтобы делался процесс еще быстрее. Но если такая задача еще сложная – можно вписать данные для вычислений на страницу, помимо самого калькулятора. Но все же, стоит экспериментировать, ведь если написать на Java что-то необычное, то обязательно этому проекту найдется применение.
Подведение итогов
Написать JavaScript-кода калькулятора – не сложная задача. Необходимо лишь немного подумать о строении команд, чтобы все правильно отображалось и функционировало. То есть, если пользователь не имеет опыта в программировании и не знает основ Java, то рекомендуется изучить строчки кодов, чтобы впоследствии составить из них полноценно работающий инструмент.
Если же есть сильное желание развивать свой сайт дальше – возможно создание формы для HTML для калькулятора, что также относится к программированию на языке Java, а также интеграции программного кода в «обычный», на котором верстаются сайты. Это будет полезным занятием для большинства пользователей, ведь изучение таких популярных средств может пригодиться в дальнейшем – в основном, это будет веб-программирование с использованием разных программ на популярных языках.
