JavaScript — создаем калькулятор
Обзор посвящен созданию JavaScript-калькулятора. Домашнее задание для каждого начинающего JavaScript-ниндзя! ) В коде используется не чистый JavaScript, а JavaScript + jQuery.
Пример и материал не является оригинальным, основан на зарубежном источнике. Указывать источник не буду, потому что это не имеет смысла — таких кратких видеоуроков просто огромное количество — выбирай любой, какой понравится. )
HTML разметка
HTML-разметка для будущего калькулятора основана на HTML-элементах , , . Ничего сверхестественного в ней нет.
Единственный момент — вопрос компоновки кнопок, куда правильно “засунуть” кнопки с арифметическими операциями:
CSS стили
Со стилизацией будущего калькулятора тоже проблем не должно возникнуть. Я использовал flexbox для выравнивания кнопок:
JavaScript код
Переходим к самому интересному — созданию JavaScript-кода для калькулятора. В своем примере я использовал JavaScript + jQuery.
Последний применил только из-за удобства манипуляции с DOM. Недавно узнал о существовании библиотеки Underscore.js как альтернативы jQuery, но меньшего размера. Надо опробовать Underscore.js обязательно! )
Первым делом инициализируем кнопки калькулятора. Для этого забираем значения из атрибута кнопок и динамически вставляем в HTML-разметку:
Исходный вид калькулятора подготовили — он теперь выглядит как настоящий калькулятор! Если не принимать во внимание кошмарных цветов и их сочетания ) Ну мы не дизайнеры, нам простительно )
Теперь стоит задача — при нажатии на кнопку калькулятора чтобы ее значение появлялось в окошке последнего. Тоже ничего сложного, если подумать.
Просто нужно забрать у активной кнопки значение ее атрибута и передать как значение элемента .
Небольшая тонкость здесь — нужно конкатенировать текущее значение элемента с текущим значением элемента ; иначе будет происходить простое замещение предыдущего значения элемента текущим значением элемента :
Полная очистка экрана калькулятора элементарно проста — достаточно при нажатии на соответствующую кнопку передать в элемент пустое значение:
Дальше уже немного интереснее — будем оживлять кнопку . То есть — ввели в окошко калькулятора, к примеру, . По нажатии на кнопку в окошке должен появиться результат этой арифметической операции.
На помощь приходит функция JavaScript под названием . На javascript.ru эта функция подробно расписана.
В результате код для “оживления” кнопки будет выглядеть “скромно”:
Наш калькулятор почти готов. Осталось добавить жизни к двум последним кнопкам — возведения в степень и посимвольной очистки экрана калькулятора.
Для возведения в степень воспользуемся стандартной JavaScript-библиотекой и ее методом .
Заберем у элемента его текущее значение и передадим в качестве одного из аргументов в метод . Второй аргумент в нашем случае — это константа 3:
Последний шаг к успеху создания калькулятора — это “оживление” кнопки посимвольной очистки экрана калькулятора.
В этом случае воспользуемся стандартным методом JavaScript — . Это метод JavaScript(), который извлекает из строки подстроку и возвращает ее в виде новой строки — почитать с примерами.
В качестве аргументов принимает два параметра — начальную и конечную позицию, которые выступают как начальный и конечный индекс массива. Массивом в данном случае является строка.
Функция (на кнопке посимвольной очистки) в нашем случае будет работать так — забираем у элемента его текущее значение. Значение возвращается в виде строки, конечно.
Поэтому находим ее длину ( ) и укорачиваем на один (последний) символ — . Таким образом мы динамически укорачиваем текущее значение в окне калькулятора на один символ.
Затем нам нужно заменить текущее значение окна калькулятора укороченным на один символ значением. Для этого берем метод и с помощью него “обрезаем” текущую строку; этот метод возвращает “обрезанный” вариант. Нам осталось только вставить его в окно калькулятора.
Результат будет выглядеть таким образом:
Вот наш калькулятор и готов — ниже полный JavaScript-код:
Конечно, примеры кода из этой статьи хоть и не являются укороченными, но не дают полного представления о разрабатываемом нами калькуляторе.
Поэтому привожу ссылку на готовый вариант калькулятора, который создавался в этой статье. На CodePen можно его посмотреть и разобрать детально (при желании).
Как вариант для сравнения, можно взглянуть на более сложный пример создания калькулятора, на чистом JavaScript. Пример был найден мною на просторах CodePen.
Заключение
Рассмотренный в статье пример лично для меня оказался на удивление прост — я ожидал большей (и более запутанной) кучи кода.
На этом все. В дальнейшем буду продолжать флудить на тему JavaScript, ибо для себя с удивлением обнаружил, что мне в последнее вермя доставляет удовольствие разбирать и рассматривать готовые примеры на JavaScript.
Единственное, что меня огорчает — тот факт, что они чужие )
WebStorm — hotkeys
## Стандартные сочетания клавиш WebStorm- Alt + 1 — открыть\закрыть панель проекта- Alt + 0 — открыть\закрыть панель коммитов- Alt + 9 — . … Continue reading
Пишем калькулятор на 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») и т.д.
Благодарю за внимание. Надеюсь, вы нашли для себя что-то полезное. Хороших выходных и счастливого кодинга.
Как сделать простой калькулятор на HTML и Javascript
Я знаю, что похожие вопросы задали ранее. Но всё-таки мне хотелось бы узнать, можно ли написать функцию для калькулятора, опираясь на код, мной написанный до сих пор.
Знаю, как сделать простейший калькулятор для сложения эксклюзивно:
До сих пор, нет сомнений. Но сейчас, мне хотелось бы заменить статичный знак плюса (+) четырьмя кнопками для всех базовых операций: сложения (+), вычитания (-), умножения (x), деления (:).
Интерфейс и распределения кнопок умею вставить, но не успеваю создать функцию, которая изменяет оператор в переменной result в зависимости от избранной кнопки операции.
Нужно ли делать отдельную функцию для каждой кнопки операторов? Или можно вставить всю программу в функцию кнопки выполнения («равняется. «)?