Калькулятор

Простой калькулятор на чистом javascript

В этой статье я расскажу как сделать простой javascript калькулятор, без особых проблем, эта статья подойдёт в первую очередь тем, кто только начал изучать JavaScript и уже пробует создавать различные простые программы.

HTML файл:

Для начала как всегда начнём с HTML страницы и тут конечно не чего сложного нет.

Вот такой, совсем короткий HTML получается, кратко расскажу о нём.

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

JavaScript файл:

Вот тут всё не много сложнее, но я постараюсь всё объяснить максимально понятным языком.

Давайте не много расскажу, что тут вообще происходит.

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

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

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

В последней строчке функции мы складываем две переменные и выводим значение в элементе out .

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

Вывод:

Вот такой простой калькулятор получился на чистом JavaScript, единственный существенный не достаток, в том, что событие вызываются устаревшим образом, сейчас их правильно вызывать через addEventListener() , я не стал его использовать по двум причинам, во первых, мне кажется для новичков такой способ не много легче, а эта статья именно для новичков, во вторых, если вы не знали о таком способе, то его обязательно надо знать, так как, не всегда вы будите работать со современном кодам, на старых сайтах используется такой способ.

В будущем может напишу статью, где буду делать более продвинутый калькулятор, поэтому, что бы не пропустить подписываетесь на все соц-сети.

Источник

Простейшее решение калькулятора на js без eval();

Доброго времени суток, уважаемый Хабр. Меня зовут Илья и это моя первая статья. Откровенно говоря, я давно уже искал повод опубликовать какой-нибудь материал и вот, похоже этот день настал. Сразу предупрежу — я не считаю решение описанное ниже какой-то метой или истинно верным, но когда вам нужно срочно посчитать строку содержащую простые математические выражения, с использованием скобок, оно может сильно упростить жизнь.

Предисловие

Примерно неделю назад я столкнулся с необходимостью преобразовать строку подобного типа (81+47*(33-42))/15 в математическое выражение и посчитать его. Казалось бы используй любое решение из интернетов и дело в шляпе, но к сожалению использовать библиотеки нельзя, а решения которые я находил как правило считали не правильно, то порядок действий путают, то каким-то образом отрицательное число получается. В общем я просто написал свой код и был доволен, но на следующий день меня вдруг осенило.

Перейдем к практике

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

И так, напишем простой интерфейс с полем ввода и выводом результата

И добавим ему симпатичных стилей

body, input body < background: #222; color:#fff; display: flex; height: 100vh; justify-content: center; align-items: center; >.calc < height: 420px; width: 240px; position: relative; border-radius: 8px; box-shadow: -5px -5px 20px 5px rgba(255,255,255,0.08), 5px 5px 20px 5px rgba(0,0,0,0.5), -1px -1px 0px 0px rgba(255,255,255,0.2), 1px 1px 0px 0px rgba(0,0,0,0.4); background: linear-gradient(120deg, #464e55 0%, #292929 100%); >.calc:after < content: ''; position: absolute; z-index: -1; background: #fff; display: block; width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; top: 0; border-radius: 8px; background: linear-gradient(120deg, #4f6579 0%, #312e40 100%); >.story < height: calc(420px - 42px); text-align: right; box-sizing: border-box; padding: 10px 20px; display: flex; justify-content: end; flex-direction: column; opacity: 0.6; overflow: hidden; position: relative; >.story:after < content: ''; background: linear-gradient(180deg, #3e464d 0%, #312e4000 50%); display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute; border-radius: 10px; >.story i < font-size: 12px; font-style: normal; >.input < outline: none; border: none; margin: 0; width: 100%; background: none; color: #fff; >.input

А далее создадим маленькую магии и напишем простой код для создания строки, которую мы будем считать

let string = '', $input = document.querySelector('.input'); $story = document.querySelector('.story'); // событие для отлавливания нажатия в поле input $input.onkeyup = function(e)< // если нажат Enter то считаем строку if(e.key == 'Enter')< // это наша будущая функция let result = strToMath(string); // передаём результат в поле ввода чтоб иметь возможность дальше работать с ним this.value = result; // просто сохраняем историю $story.innerHTML += `$=$ `; // а это вынужденный костыль, чтоб считать правильно дробные числа string = `($)`; > else string += e.key; // не совсем верное решение но ведь это просто пример >

Хорошо, тут должно быть в целом все понятно, но что у нас с strToMath() ?

function strToMath(string) < // преходящие значение необходимо разбить на массив по символам, иначе ничего работать не будет string = string.replaceAll(' ', '').replaceAll('+', ' + ').replaceAll('*', ' * ').replaceAll('-', ' - ').replaceAll('/', ' / ').split(' '); // Переносим повторный символ == "-" к следующему числу for(let i = 0; i < string.length; i++)< if(string[i] == '')< string.splice(i, 2); string[i] = '-'+string[i]; >> // а теперь та самая магичиская и потрясающая функция calc() прямиком из css3 // создаем любой элемент let calc = document.createElement('calc'); // передаём туда в свойство opacity наш объедененный через пробел массив calc.style['opacity'] = `calc($)`; // получаем значение обратно удаляя все лишнее let result = parseFloat(calc.style['opacity'].replace('calc(', '').replace(')', '')) // и удаляем сам элемент calc.remove(); // результат возвращаем. return result; >

Грубо говоря, данное решение в 4 строки если поступающие данные всегда валидны.

По большому счету мы просто эксплуатируем функцию из css3 для получения решения. Однако есть и минусы, если у нас калькулятор то прошлое решение должно поступать с новым в данную функцию т.к. calc() обрезает результат до 5-ти символов после запятой и при делении 89/81 = 1.09877 после обратного умножения мы не получим 89 , результатом будет: 89.0004

Еще говоря об opacity, если использовать z-index то значение будет округляться, а размерные значения требуют обязательно в конце умножения на 1px т.е. примерно так будет выглядеть код:

calc.style['top'] = `calc(($) * 1px)`; let result = parseFloat(calc.style['top'].replace('calc(', '').replace('px)', ''))

Так же собрал маленькое демо с полноценным калькулятором доступным по ссылке: https://preview-1326290.playcode.io/

Спасибо за внимание, понимаю, что данный инструмент просто велосипед, но имеющий право на существование.

Источник

Простой калькулятор на JavaScript

Сегодня сделаем простейший калькулятор на JavaScript, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.

Что делаем

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

Логика работы

Так как это простой калькулятор, то поступим так:

1. Сделаем поле ввода для первого числа.
2. Под ним разместим 4 кнопки с математическими действиями.
3. Потом сделаем поле ввода для второго числа.
4. И внизу будет кнопка «Посчитать».

Размещаем кнопки и поля ввода на странице

Разместим кнопки с полями на странице, а потом будем писать скрипт.

         
+ - x : 
   
 Посчитать   

Обрабатываем нажатия на кнопки математических действий

Сейчас у нас есть 4 кнопки, но нажимать их бесполезно — всё равно ничего не произойдёт, потому что нет обработчиков нажатий. Но что нам прописывать в обработчике?

Первый вариант — привязать к каждой кнопке свою функцию, а потом для каждой операции выполнять свои действия внутри этого обработчика. Но раз у нас есть кнопка «Посчитать», то нам придётся при нажатии на неё из этих четырёх функций вытаскивать действие и нужные команды, запоминать выбранное и как-то использовать в вычислениях. Сложно и громоздко.

Второй вариант — просто записывать в какую-то переменную, какая кнопка была нажата. А потом, при нажатии «Посчитать», просто смотреть в эту переменную и выполнять соответствующее действие. Так и поступим.

👉 Воспользуемся хитростью, про которые многие забывают: в обработчике onclick необязательно писать только функцию — туда можно отправить любую JS-команду. Главное, не забыть потом в скрипте предусмотреть эту переменную, которую мы используем.

Источник

Пишем калькулятор на 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») и т.д.

Благодарю за внимание. Надеюсь, вы нашли для себя что-то полезное. Хороших выходных и счастливого кодинга.

Источник