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

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

Источник

June 06, 2016

Обзор посвящен созданию JavaScript-калькулятора. Домашнее задание для каждого начинающего JavaScript-ниндзя! ) В коде используется не чистый JavaScript, а JavaScript + jQuery.

HTML разметка

CSS стили

Со стилизацией будущего калькулятора тоже проблем не должно возникнуть. Я использовал flexbox для выравнивания кнопок:

JavaScript код

Последний применил только из-за удобства манипуляции с DOM. Недавно узнал о существовании библиотеки Underscore.js как альтернативы jQuery, но меньшего размера. Надо опробовать Underscore.js обязательно! )

Первым делом инициализируем кнопки калькулятора. Для этого забираем значения из атрибута value кнопок button и динамически вставляем в HTML-разметку:

В результате код для “оживления” кнопки = будет выглядеть “скромно”:

Затем нам нужно заменить текущее значение окна калькулятора укороченным на один символ значением. Для этого берем метод substring() и с помощью него “обрезаем” текущую строку; этот метод возвращает “обрезанный” вариант. Нам осталось только вставить его в окно калькулятора.

Результат будет выглядеть таким образом:

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

Поэтому привожу ссылку на готовый вариант калькулятора, который создавался в этой статье. На CodePen можно его посмотреть и разобрать детально (при желании).

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

Заключение

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

HTML файл:

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

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

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

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

JavaScript файл:

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

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

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

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

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

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

Вывод:

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

Источник

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

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

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

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

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

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

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

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

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

Читайте также:

Добрый день! Вставляю код html, но не срабатывает, форма есть, но не в таком виде как на демо. И ничего не считает. Подскажите, может кроме кода еще что то надо прописать?

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

Доброго времени суток! Помогите пожалуйста разобраться с этим) не получается перемонтировать..

if(a Александр Маврин :

Что именно не понятно? Это обычное условие. Если переменная А меньше 5 то переменной Б присвоим 100. Во всех других случаях переменная Б будет равна 50.

На блог пришёл в поиске проблемы. Понравилось.

Дело в том, что мне нравится тема создания различного рода калькуляторов расчёта стоимости товаров и особенно услуг. Несколько простейших калькуляторов создано на базе одного из уроков А.Лущенко из его канала на YouTube. Создал отдельную страничку для расчёте потребления и оплаты электроэнергии. Она указана здесь в реквизитах к комментарию. Поэтому мне бы хотелось самостоятельно расширить свою практику в программировании различных калькуляторов. Вот и обращаюсь с тем, что же почитать по JS, точнее, какие разделы нужно особенно проштудировать для решения подобных задач. Причём, интересно, в кодах предусматривать различные антиспамные попытки ввода не корректных данных. Именно это и есть в ваших статьях блога. А пока приступаю к изучению ваших кодов калькуляторов потихоньку. У Вас лёгко читаемый воздушный сайт. А где подписка?

Рад, что вам нравится. Подписки как таковой нет. Не уверен, что на нужна.

….. обращаюсь с тем, что же почитать по JS и где, точнее, какие разделы нужно особенно проштудировать для решения подобных задач — создание калькуляторов.

P.S. Не смотря, что стоит чек бокс «Оповещать о новых комментариях по почте», оно не пришло.

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

Это уже из разряда сложных. Есть пример, но попроще: bumkart73.ru/#calc

Спасибо за ссылку. Интересное решение.

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

У вас скорее всего в HTML косяк. Напишите мне в телегу, чтобы здесь не захламлять страницу: https://t.me/Mavrinn

Подтверждаю, все калькуляторы Александра работают безупречно. Все его разработки я разобрал, модернизировал и научился алгоритму их составления. Самое ценное я узнал здесь, что оказывается одним кликом можно запускать не только одну функцию, а сколько угодно одновременно и получать в результате общий суммарный итог в виде одной или нескольких цифр. Рекомендую обратить внимание на правильность срабатывания логических цепочек и арифметических действий. Желательно знать теорию циклов применительно к параметру date, что сильно сокращает написание кода.
Пример разработанного кода калькулятора на JS расчёта цены металлической решётки из разных материалов и сложности рисунка можно посмотреть на моей странице под моим именем в аватаре. Используется любой телефон для просмотра. Скопировать все коды можете прямо со страницы исходных кодов. Спасибо Александру за науку и практику.

Источник