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

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

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

HTML файл:

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

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

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

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

JavaScript файл:

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

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

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

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

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

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

Вывод:

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

Источник

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

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

Что делаем

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

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

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

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

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

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

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

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

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

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

Пишем скрипт

Сам скрипт тоже будет простой:

Сразу привяжем функцию func() к нажатию на кнопку «Посчитать»:

Выводим результат

Сейчас в скрипте есть проблема: он всё считает, но ничего не выводит. А всё потому, что мы не предусмотрели на странице место для вывода. Исправим это и добавим строчку в скрипт.

Это — добавим на страницу после кнопки с расчётом:

А это — в функцию func(), чтобы она сразу отправляла результат на страницу:

Собираем всё вместе и смотрим результат

Отлично, калькулятор работает и складывает всё как нужно! Мы выполнили свою задачу — быстро запилили калькулятор на JavaScript, можно закрывать задачу в таск-трекере и браться за новую.

Что дальше

Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.

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

Источник

Тестируем и исправляем калькулятор на JavaScript

В нём много ошибок, но мы их пофиксим

Эта статья — продолжение истории про калькулятор на JavaScript. В предыдущих частях мы:

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

👉 В этой статье не будет автотестов, юнит-тестов, API-тестов и интеграционных тестов. Это всё нужные инструменты, но задача тестировщика, в частности, — выбрать правильный инструмент тестирования.

Если у него в работе очень простая программа (как наш калькулятор), то нет смысла городить автоматизацию и делать тесты ради тестов. Иногда можно и вручную всё проверить и получить точно такой же результат.

Базовое тестирование

Первое, что мы делаем, — проверяем, а как вообще ведут себя кнопки математических действий и делают ли они то, что нужно. Возьмём два числа — 12 и 5 — и сравним результаты всех действий с тем, что даёт калькулятор:

Отрицательные числа тоже отображаются и считаются правильно.

Тестируем большие числа

У компьютеров есть нюанс: любые переменные имеют ограничения по размеру числа. Например, если на переменную выделено 16 бит, то максимальное число, которое можно в нее положить, — 65 536. Число на единицу больше уже потребует 17 бит, а мы столько не выделяли.

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

Пробуем: 123 456 789 × 2 = 246 913 578 — верно

А вот необычный эксперимент:

12 345 678 901 234 567 × 1 = 12 345 678 901 234 568

Ух ты! Мы умножили большое число на единицу, а в ответе появилась ошибка. Это значит, что настолько длинные числа за раз наш калькулятор уже обработать не в состоянии.

❌ Неправильно обрабатываются 17-значные числа и те, которые больше них.

А если мы попробуем получить 17-значное число в ответе, интересно, оно тоже будет с ошибкой?

Да, в ответе тоже неверное число — 8 × 4 = 32, поэтому в конце должно стоять 2, а не 0. Пишем баг:

❌ Если в ответе получается 17-значное число или более — ответ точно неверный.

При этом деление на 16-значное число работает верно:

Тестирование математических трюков

Теперь попробуем разделить на ноль:

Скрипт хитро выкрутился и записал результатом деления бесконечность. Но лучше выводить сообщение, что на ноль делить нельзя.

❌ Нет сообщения при делении на ноль.

Отказоустойчивость

А что если оставить поле ввода пустым и попробовать что-то посчитать? Давайте посмотрим:

Скрипт преобразовал пустую строку в ноль и получил ответ, но это неправильно — при отсутствии одного из чисел калькулятор должен сообщить об этом, а не продолжать считать.

❌ Нет сообщения, если одно из чисел не введено.

Пойдём дальше и введём слово вместо числа:

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

❌ Нет проверки на то, ввели число или строку.

И напоследок проверим что будет, если мы что-то введём, но не выберем ни одно действие:

Тоже плохо. Надо будет обработать такую ситуацию.

❌ Нет проверки, когда не выбрали ничего из математических действий.

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

Что делаем

После тестирования у нас получился такой список ошибок:

❌ Неправильно обрабатываются 17-значные числа и те, которые больше них.

❌ Если в ответе получается 17-значное число или более — ответ точно неверный.

❌ Нет сообщения при делении на ноль.

❌ Нет сообщения, если одно из чисел не введено.

❌ Нет проверки на то, ввели число или строку.

❌ Нет проверки, когда не выбрали ничего из математических действий.

Исправим эти ошибки. Так как все вычисления начинаются при вызове функции func(), то и править всё будем тоже внутри неё.

Проверяем, что ввели число, а не слова или другие символы

Проверяем, что нет пустых значений

JavaScript когда переводит строку в число, то пустую строку он считает как 0. Нам такой вариант не подходит, поэтому сравним её с пустой сторокой. Если она пустая — выдаём сообщение и ничего не считаем.

Ещё надо дополнительно добавить проверку на пробелы — JavaScript строку из пробелов тоже переводит как ноль, а нам это не нужно:

Обрабатываем деление на ноль

Простая проверка — добавляем сравнение второго числа с нулём:

Обрабатываем длинные числа

Даже если мы ограничим каждое поле ввода числами по 16 знаков вместо 17, то при перемножении они дадут нам в ответе 32 знака — а это тоже превышает наш предел точности. Чтобы гарантированно получить в ответе число не больше 16 разрядов перед запятой, нам нужно, чтобы оба числа были не больше 99 999 999 — в нём 8 разрядов, а при перемножении мы получим максимум 16, как раз то, что нужно.

Чтобы это сделать, добавим проверку на размер числа:

Если не выбрано математическое действие

С этим всё просто — добавляем в case действие по умолчанию, которое выполнится, если никакие из вариантов не подойдут:

В итоге

✅ Калькулятор не работает с числами больше 16 знаков до запятой и предупреждает об этом пользователя

✅ В ответе всегда число, в котором не больше 16 знаков до запятой

✅ Есть проверка деления на ноль

✅ Есть сообщение, если одно из чисел не введено.

✅ Есть проверка на то, ввели число или строку.

✅ Есть проверка, когда не выбрали ничего из математических действий.

Это всё?

О нет, этот калькулятор можно гонять ещё и в хвост и в гриву:

Это (и многое другое) — и есть работа тестировщика. Круто, да?

Источник

Как сделать калькулятор расчета стоимости на 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 расчёта цены металлической решётки из разных материалов и сложности рисунка можно посмотреть на моей странице под моим именем в аватаре. Используется любой телефон для просмотра. Скопировать все коды можете прямо со страницы исходных кодов. Спасибо Александру за науку и практику.

Источник

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

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

Источник