Калькулятор

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

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

Что делаем

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

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

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

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

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

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

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

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

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

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

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

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

Источник

JavaScript — создаем калькулятор

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

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

HTML разметка

Единственный момент — вопрос компоновки кнопок, куда правильно “засунуть” кнопки с арифметическими операциями:

  class="calculator">  class="calculator__form">  class="calculator__row">  class="calculator__display" id="display" type="text" disabled />   class="calculator__row">  type="button" value="c" class="calculator__key calculator__clear">  type="button" value=" class="calculator__key calculator__backspace">  type="button" value="^3" class="calculator__key calculator__power">  type="button" value="+" class="calculator__key calculator__button">   class="calculator__row">  type="button" value="9" class="calculator__key calculator__button">  type="button" value="8" class="calculator__key calculator__button">  type="button" value="7" class="calculator__key calculator__button">  type="button" value="-" class="calculator__key calculator__button">   class="calculator__row">  type="button" value="6" class="calculator__key calculator__button">  type="button" value="5" class="calculator__key calculator__button">  type="button" value="4" class="calculator__key calculator__button">  type="button" value="*" class="calculator__key calculator__button">   class="calculator__row">  type="button" value="3" class="calculator__key calculator__button">  type="button" value="2" class="calculator__key calculator__button">  type="button" value="1" class="calculator__key calculator__button">  type="button" value="/" class="calculator__key calculator__button">   class="calculator__row">  type="button" value="0" class="calculator__key calculator__button">  type="button" value="." class="calculator__key calculator__button">  type="button" value=" na">class="calculator__key calculator__key--equal">   

CSS стили

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

.calculator  width: 250px; height: 350px; border: 2px solid black; margin: 100px auto 0; text-align: center; background-color: yellowgreen; box-shadow: 0 0 30px grey; border-radius: 4px; > .calculator__form  height: 100%; padding: 20px; > .calculator__row  margin: 10px 0; display: flex; justify-content: space-between; > .calculator__display  margin: 0 0 20px; width: 100%; border: 1px solid darkslateblue; padding: 4px 2px; text-align: right; font: 700 16px/1 Arial, sans-serif; color: darkslateblue; background-color: whitesmoke; > .calculator__key  width: 41px; height: 35px; cursor: pointer; border: none; transition: all .2s; text-transform: uppercase; > .calculator__key--equal  width: 98px; > .calculator__key:hover  background-color: yellow; font-weight: 700; > .calculator__key::-moz-focus-inner  border: none >

JavaScript код

Переходим к самому интересному — созданию JavaScript-кода для калькулятора. В своем примере я использовал JavaScript + jQuery.

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

// INIT CALC KEYS calcKeys.each(function ()  var current = $(this).attr('value'); $(this).text(current); >);

Исходный вид калькулятора подготовили — он теперь выглядит как настоящий калькулятор! Если не принимать во внимание кошмарных цветов и их сочетания ) Ну мы не дизайнеры, нам простительно )

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

Источник

Сложный калькулятор на javascript

Создайте функцию конструктор Calculator , которая создаёт «расширяемые» объекты калькулятора.

Задание состоит из двух частей.

Во-первых, реализуйте метод calculate(str) , который принимает строку типа «1 + 2» в формате «ЧИСЛО оператор ЧИСЛО» (разделено пробелами) и возвращает результат. Метод должен понимать плюс + и минус — . Пример использования:

let calc = new Calculator; alert( calc.calculate("3 + 7") ); // 10

let powerCalc = new Calculator; powerCalc.addMethod("*", (a, b) => a * b); powerCalc.addMethod("/", (a, b) => a / b); powerCalc.addMethod("**", (a, b) => a ** b); let result = powerCalc.calculate("2 ** 3"); alert( result ); // 8

• Для этой задачи не нужны скобки или сложные выражения.
• Числа и оператор разделены ровно одним пробелом.
• Не лишним будет добавить обработку ошибок.

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

function Calculator() < this.methods = < "-": (a, b) =>a - b, "+": (a, b) => a + b >; this.calculate = function(str) < let split = str.split(' '), a = +split[0], op = split[1], b = +split[2] if (!this.methods[op] || isNaN(a) || isNaN(b)) < return NaN; >return this.methods[op](a, b); > this.addMethod = function(name, func) < this.methods[name] = func; >; >

Источник

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

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

Источник