Как на javascript написать калькулятор

Пишем калькулятор на JavaScript

Доброго времени суток, друзья!

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

Желание написать калькулятор возникло у меня после просмотра одного туториала, посвященного созданию «simple calculator», который оказался далеко не симпл и толком ничего не умел делать.

Наш калькулятор будет true simple (42 строки кода, включая пробелы между блоками), но при этом полнофункциональным и масштабируемым.

Без дальнейших предисловий, приступаем к делу.

Наша разметка выглядит так:

Здесь мы подключаем библиотеку, создаем контейнер для калькулятора и поле для вводимых символов и результата.

Вот что мы имеем на данный момент:

Кнопки будут генерироваться программно.

Определяем поле для вывода результата и создаем контейнер для клавиатуры:

Наша строка с символами выглядит так:

Преобразуем данную строку в массив и создаем кнопки:

Находим созданные кнопки и добавляем к ним обработчик события «клик»:

Мы также хотим иметь возможность вводить символы с помощью клавиатуры. Для этого нам необходимо добавить обработчик события «нажатие клавиши» к объекту «Document» или «Window», затем отфильтровать ненужные значения свойства «ключ» клавиши, например, с помощью регулярного выражения:

Метод «match» в данном случае играет роль фильтра: он не позволяет передавать функции «calc» аргумент, не соответствующий заданному в нем условию.

Само условие звучит так: если значением event.key является один из символов, указанных в квадратных скобках ([]; цифра от 0 до 9, знаки деления, умножения, сложения, вычитания, открывающая, закрывающая круглые скобки или знак равенства; обратная косая черта — экранирование) или (| — альтерация) Backspace, или Enter, то вызываем calc с event.key в качестве параметра, иначе ничего не делаем (Shift также успешно отбрасывается).

Наша главная (и единственная) функция «calc» выглядит следующим образом (код следует читать снизу вверх):

В завершение, парочка слов о заявленной масштабируемости и полнофункциональности.

Метод «evaluate» (ранее «eval») и другие методы Math.js имеют очень большие возможности. Опираясь на эти возможности, мы можем легко расширить функционал нашего калькулятора, добавив в него новые символы и операторы, предусмотрев возможность работы с числами с плавающей точкой (регулируя количество знаков после запятой с помощью переключателя и метода «toFixed») и т.д.

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

Источник статьи: http://habr.com/ru/post/500086/

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

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

HTML файл:

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

number 1 type = «text» id = «n1» >

number 2 type = «text» id = «n2» >

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

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

JavaScript файл:

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

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

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

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

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

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

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

Вывод:

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

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

Источник статьи: http://prognote.ru/web-dev/front-end/simple-javascript-calculator/

Создаем простой калькулятор на javascript с кнопкой сброса

Доброго времени суток, дорогие читатели блога. После прочтения текущей публикации вы научитесь самостоятельно программировать простой калькулятор на JavaScript с кнопкой сброса. Я поделю свой рассказ на три части.

Вначале я опишу создание разметки калькулятора на html, далее расскажу, какие стилевые правила необходимо будет задать, а после перейду к объяснению функций на JavaScript. Давайте приступим!

Оформление гипертекстовой разметки

Изначально для приложения «Калькулятор» необходимо задать разметку элементов и сразу назначить обработчики событий. Для этого лучше всего использовать таблицу. Поскольку в коде будет множество инпутов, то потребуется и форма.

Поэтому создаем форму с именем «Calculation». В нее вписываем таблицу, которая будет содержать 5 строк и 5 столбцов. Первая строка табличного представления будет занята текстовым полем ввода. А далее разместим кнопки с цифрами, арифметическими операциями, знаком «равно», сбросом последнего введенного числа (CE) и полным сбросом ©.

Превратим набор элементов во что-то стоящее

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

Итак, для начала оформим внешний вид самой таблицы. Я задал объемную рамку вокруг калькулятора, установил цвет фона, внешние отступы, ширину таблицы и вид размещения текста внутри нее.

Теперь красиво оформим кнопки.

Также у меня в коде есть особые поля. Это широкая кнопка для знака «равно» и само текстовое поле ввода. Для начала я опишу стили поля ввода, которому я задал идентификатор TextEdit.

А теперь займемся редактированием широкой кнопки с идентификатором WideBtn.

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

Вперед! Работай!

Вот теперь пришло время разобрать самое увлекательное! Ниже я прикреплю программный код на JS и прокомментирую важные моменты.

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

Источник статьи: http://romanchueshov.ru/sekretyi-javascript/sozdaem-prostoy-kalkulyator-na-javascript.html

Как сделать калькулятор расчета стоимости на JavaScript

В этом уроке вы узнаете как писать простые и сложные калькуляторы на JavaScript и установить их на свой сайт. Исходник скрипта доступен на странице ли можете скачать его в конце этого поста. Мы напишем калькулятор цены ли расчета стоимости товаров или услуг на чистом JS. Поскольку сложность этой задачи сравнительно небольшая, то подключать библиотеку jQuery мы не будем, вполне можно обойтись без нее. Но для начала предлагаю посмотреть пример того, что получится в итоге.

Пишем калькулятор на JavaScript

За основу возьмем услугу по перевозке грузов и будем считать ее стоимость. И перед тем, как начать, необходимо определить исходные данные.

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

Теперь нужно заняться оформлением, то есть как будет выглядеть интерфейс калькулятора на странице. Для удобства буду использовать Bootstrap, чтобы вручную не писать CSS. HTML код разметки будет таким:

Cкрипт JavaScript калькулятора

В JS коде первым делом запишем все инпуты (input) в переменные для дальнейшей работы с ними. А так же определим неизменные значения, которые я записал в таблицу. Затем будет функция для range слайдера и после нее основная функция расчета стоимости услуги с предварительной проверкой заполнения полей. Не буду разбивать код на части, а дополню его комментариями для лучшего понимания.

var btn = document.querySelector(‘#btn’), out = document.querySelector(‘#out’), weight = document.querySelector(‘#weight’), vol = document.querySelector(‘#vol’), load = document.querySelector(‘#load’), del = document.querySelector(‘#del’), frag = document.querySelector(‘#frag’), range = document.querySelector(‘#range’), rasstoyanie = document.querySelector(‘.rasstoyanie’).innerHTML = 500; weight = document.querySelector(‘#weight’), vol = document.querySelector(‘#vol’), kg = 5.5, kub = 3500, km = 2; // range slider range.onchange = function() < var rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = range.value; >// Basic function btn.onclick = function() < if (weight.value != '' && vol.value != '') < if (load.checked)< load.value = 1500; >else < load.value = 0; >if (del.checked) < del.value = 3500; >else < del.value = 0; >if (frag.checked) < frag.value = 2000; >else < frag.value = 0; >var sum = (weight.value * kg) + (vol.value * kub) + Number(load.value) + + Number(del.value) + Number(frag.value) + (range.value * km); out.innerHTML = sum; >else < alert('Введите вес и объем груза'); >>

По такой схеме, как и в калькуляторе процентов онлайн, можно добавлять неограниченное количество полей и присваивать им какие-то значения. Но не нужно забывать про удобство для конечного пользователя, все должно быть максимально понятно для восприятия. Надеюсь эта статья открыла вам глаза на то, как создать калькулятор на JavaScript и теперь вы с легкостью сможете применить полученные знания в своих проектах. А если что-то было непонятно, то пишите в комментариях ваши вопросы, будем разбираться вместе.

Источник статьи: http://serblog.ru/kak-sdelat-kalkulyator-rascheta-stoimosti-na-javascript/

Калькулятор на javascript пример Как в Windows 10.

Как вы думаете — «Калькулятор на javascript» — это легко или сложно!? И вы сразу должны мне сказать – смотря какой калькулятор!

Мы накопили некоторый баланс знаний по javascript, что одним из следующих шагов хочется сделать уже, что-то основанное на наших знаниях! Ведь теория, (а я смерть как не люблю теорию!) – это просто невозможная скукота, но как говорится, без теории — никак!

Калькулятор на javascript пример

Как будет выглядеть калькулятор на javascript!?

Калькулятор на javascript

Логика и основные кнопки калькулятора на javascript!?

Первое надо посмотреть на объект(в данном случае калькулятор) и проанализировать, что он из себя представляет и вывести закономерности и повторения!

Кнопки: всего будет 6 х 4 = 24 кнопки, из этого вывод, что надо нарисовать только одну, а потом еще добавить 23…

Первая группа скриптов — получение данных из кнопки и их обработка

Вторая группа скриптов – плюс, минус, умножить, делить – будут иметь один вариант скрипта – 1.две цифры, 2.математический знак, 3.равно
Третий вид скрипта — равно.
Четвертая группа скриптов — корень, х в квадрате,1 делить на х.

Пока делать не будем %, се, и запятую.

Кнопки для калькулятора и оформление.

Кнопка будет иметь уникальный селектор идентификатора + внутри будет — событие «onclick»

Позиция absolute,ширина — 75px, высота — 49px, высота шрифта — 21px,

И поведение при наведении сделаем простой бордюр чуть потемнев.

Позиционируем первую левую снизу кнопку плюс+минус

Следующие 3 кнопки будет отличаться названием после селектора «#» и позицией по горизонтали(margin-left + 80px к предыдущему.

Следующие полоски будут подниматься относительно каждой полоски по вертикали(margin-top + 53px

Позиционируем калькулятор.

Поставим весь код в div с классом центр.

свойства — центрируем по середине страницы.

Еще нам понадобится два дива с разными идентификаторами rezult — основное поле, куда будем складывать все результаты.

И див arhiv, который будет показывать, что было нажато до знака.

Позиционирование аналогичное — что и с кнопками.

Скрипт калькулятора на javascript

Переходим к скриптам в калькуляторе

Группа скриптов (аналогичная всего 10 штук. ) — от 0 до 9.

Задача данного скрипта — получить данные из кнопки, проверить, если в rezult ноль, то очищаем и загружаем значение из кнопки, с последующим прибавлением любой нажатой кнопки, если цифр больше набрано чем 12 — останавливаемся. При каждом нажатии кнопки цифра будет сдвигаться влево.

document.getElementById(«rezult»).innerHTML += from_id; // запишем данные из кнопки, прибавляя, если что-то есть в rezult count = document.getElementById(«rezult»).innerHTML; count = count.length; //посчитаем сколько знаков в rezult после отправки

mnogitel = count * 23 ; // переменная вычисленная методом научного тыка. и следующие три строки.

if ( count === 2 ) < sсосо = 272;>
document.getElementById(«rezult»).setAttribute(«style», «margin-left:» + sсосо + «px» ); //отправляем в rezult отступ чтобы цифры сдвинулись влево. >

Группа скриптов (аналогичная всего 4 штуки. ) — плюс, минус, умножить , делать:

Задача скрипта — получить данные из rezult и отправить «полученное» прибавив знак — в данном случае плюс в див arhiv, и сдвигаем на соответствующую цифру. rezult.

В переменную znak — записываем нажатый зна плюс отправляем его в rezult, остальные три меняем название функции и знак плюс.

document.getElementById(«rezult»).setAttribute(«style», «margin-left: 300px» );

Уникальный скрипт, который будет обрабатывать предыдущие скрипты при нажатии на кнопку равно.

Поучаем в переменную «chislo_first» что мы отправили после нажатия на одну из верхних кнопок математических знаков.

Сделаем из строки число «parseInt»

Поучаем в переменную «chislo_second» что у нас есть в rezult.

Проверяем что было нажато. «if(znak ==», в зависимости от нажатого совершаем соответствующее действие.

Да и чуть не забыл про «slice» — полученную строку нужно избавить от знака, который стоит на первой позиции.

Далее отправляем полученный результат в rezult и arhiv очищаем. ну и далее в зависимости от количества знаков сдвигаем на расстояние.

count = chislo_ravno .length;

document.getElementById(«rezult»).setAttribute(«style», «margin-left: 50px; font-size: 20px;» );

document.getElementById(«rezult»).setAttribute(«style», «margin-left: 80px; font-size: 20px;» );

document.getElementById(«rezult»).setAttribute(«style», «margin-left: 130px; font-size: 20px;» );

document.getElementById(«rezult»).setAttribute(«style», «margin-left:» + sсосо + «px» );

Группа скриптов (аналогичная всего 3 штуки. ) корень, х в квадрате, 1 деленное на х

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

Все просто, получить из rezult — применить функцию, отправить в rezult, позиционировать.

Будут отличаться лишь концовка третьей строки.

1 деленное на х = parseFloat(1 / chislo);

х в квадрате = Math.pow(chislo, 2);

square = document.getElementById(«rezult»).innerHTML = Math.pow(chislo, 2);

document.getElementById(«rezult»).setAttribute(«style», «margin-left: 295px» );

//здесь условие позиционирования из вышестоящего скрипта со строки if (count > «12» )

Уникальный скрипт и простой скрипт, который будет очищать «arhiv» и «rezult» — выставляла ноль в позицию по умолчанию.

document.getElementById(«rezult»).setAttribute(«style», «margin-left: 295px» );

Уникальный скрипт, который будет удалять последний элемент из rezult.

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

chislo_del_SEND = (chislo_del_last.substring(0, chislo_del_last.length — 1))

//здесь условие позиционирования из вышестоящего скрипта со строки if (count > «12» )

Первое что хочется сказать напоследок!

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

Относительно не написанных кнопок — под вопросом работа с десятичными, оказалось, что не просто разобраться и на это надо потратить время….

Относительно не написанных кнопок — под вопросом работа с десятичными, оказалось, что не просто разобраться и на это надо потратить время….

Кнопка СЕ – тоже если честно под сомнением её необходимость, более востребованная –например, мне кажется, была бы кнопка возвести в степень…

Кнопка проценты, никогда с ними не сталкивался, поэтому и не написал…

О всех выше указанных пунктах нужно подумать дополнительно…

И полный листинг не выкладываю! Друзья! Надо чуть-чуть пытаться сделать что-то самостоятельно!

Так вы научитесь намного быстрее!

У нас много других скриптов, которые раздаются бесплатно!

Вас может еще заинтересовать список тем : #JS | #TASK | #CALCULATOR |

Источник статьи: http://dwweb.ru/page/js/009_kalkulyator_na_javascript.html