Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Создаём потрясающий jQuery калькулятор

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

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


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


Кнопки с числами, с 1 по 9, пара функций и большая кнопка со знаком равно. Не это-ли калькулятор? Разработка подобного не должна составить труда. Любой язык программирования может справится с подобной задачей. Конечно, но даже что-то настолько элементарное как калькулятор может оказаться непростым в отношении того как это всё должно работать, а также дизайна.

В скринкасте предоставленном в этой статье фокус будет нацелен на данные проблемы и меньше времени будет уделяться программированию. Тем не менее текстовый контент будет больше посвящён написанию кода. Как бы там ни было, вот краткий обзор некоторых, небольших деталей пользовательского интерфейса:

  • Когда калькулятор загружается, 0 (ноль) показан на экране. Нажатие цифры 2 не отобразит нам 02, это будет просто 2.
  • Когда пользователь нажимает какое-либо арифметическое действие, число показанное на данный момент на экране остаётся на нём, как первое число калькуляции. Когда нажимается кнопка с другим числом, число на экране заменяется.
  • Если нажимается кнопка арифметической операции и после этого другая кнопка арифметической операции, будет использована последняя.
  • После того как выполнится операция, есть два возможных сценария. A) Нажимается кнопка с новым числом. Данный сценарий абсолютно перезагрузит калькулятор и начнёт с нового числа. Б) нажимается кнопка арифметической операции, на экране остаётся значение результат, как первое число, позволяя выполнить следующую калькуляцию с полученным результатом.
  • Кнопка очистки должна работать по своему предназначению - полностью перезагружать калькулятор.
  • Визуальная часть должна выглядеть хорошо, но гораздо важнее функционал, он должен соответствовать стандартному калькулятору установленному на миллионах компьютерах по всему миру/

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


HTML разметка

Ничего удивительного в этой части. Нам нужен контейнер для калькулятора, нам нужен экран и нам нужен набор кнопок. <div>, <input> и <a> - как раз то что нам подойдёт. Всю работу здесь будет делать JavaScript, не стоит беспокоиться об отказоустойчивости (graceful degradation). Если JavaScript отключён, калькулятор не будет работать, так что мы его полностью спрячем. Почему же нам необходим <input>, если калькулятор даже не является формой - <form>? Поля ввода (Input) позволяют ввести текст, что нам как раз и нужно. С ними будет проще масштабировать наш продукт и у них есть аттрибут "value", который легко задать и получить.

Вот пример всего HTML кода:


Полный скринкаст



Создаём изображения


Нам понадобится всего лишь несколько. Фон всего калькулятора, кнопки со стилями "number", кнопка со стилями "function" и знак равенства со стилями "equals". Каждое число и кнопка арифметической функции не должны обладать собственным изображением, мы просто поместим на них текст. Думаю "Arial Black" представляет из себя неплохой жирный текст, как раз для калькулятора.

Позже когда мы создадим кнопки закрыть и открыть, мы используем "mini" стили и графику для кнопки "close".


Добавление css стилей

Опять же тут ничего особенного. Абсолютное позиционирование отвечают за расположение большинства элементов. Мы установили position: relative калькулятору (div), после чего мы можем перемещать элементы, как захотим.

Вот пример данного css кода:


Настраиваем среду jQuery

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

Настройка

Давайте создадим основу. Нам потребуется классическое "когда DOM будет готов (ready)" выражение для начала работы. Это распространённое явление для JavaScript так как мы не хотим начать взаимодействие с элементами, до того как они были загружены на странице. Далее мы укажем основные события, о которых нам известно. У нас есть событие click и функция для каждой кнопки, каждого типа. Мы также вызываем функцию jQuery UI, чтобы можно было перетащить (draggable) наш калькулятор, также как небольшая функция, которая позволяет нам переключать видимость.


Используем .data() для переменных, среди которых нет глобальных

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

В любом случае jQuery обладает более продвинутым методом - функцией data(). Мы можем прикрепить "data" (данные) к jQuery объекту и данные будут преследовать этот объект куда бы он не отправился. Также как и аттрибут, только вы можете видеть его в DOM. Это, своего рода, подобие глобальных переменных и это также просто использовать. Вот кусочки данных, которые мы будем использовать:

  • ValueOne - первое значение в арифметической операции
  • ValueOneLocked - это-ли то самое первое число, готовое к использованию?
  • ValueTwo - следующее число в операции
  • ValueTwoLocked - это-ли то самое второе число, готовое к использованию?
  • isPendingFunction - выбрана-ли функция, тип арифметической операции?
  • thePendingFunction - какая это функция?
  • fromPrevious - была-ли выполнена калькуляция?

Мы собираемся добавить эти кусочки данных к полю ввода (input) #display, что будет своего рода мозгами калькулятора. Имеет смысл. Мы должны задать значения по умолчанию для всех кусочков данных, но давайте обдумаем один момент. Мы можем сделать это с помощью основной функции, но давайте поступим умнее и абстрагируем данный функционал в отдельную функцию. Будет несколько различных сценариев когда нам нужно сбросить значение, так что давайте создадим функцию под названием resetCalculator для этого. Потом мы можем вызвать эту функцию где угодно. Давайте также принимать число в качестве параметра и добавлять данное значение в калькулятор, сбрасывая предыдущее значение. Когда калькулятор загрузится, значение в поле будет равно нулю, но после определённой функции, мы сбросим значение снова, сбросим до окончательного значения калькулятора.


Когда вы нажимаете на число...

В итоге получается, что когда пользователь нажимает по кнопке с числом, за обработку данного события отвечает самый сложный участок кода. Калькулятор обладает четырьмя состояниями (states) и стоит ожидать различного поведения нажатия кнопки числа, в зависимости от одного из этих состояний. Ниже вы увидите список состояний:

  • А) Нажав на кнопку с числом в абсолютно новом состоянии (на экране показан ноль) или когда оба числа до сих пор зафиксированны.
  • Б) Нажатие на кнопку с числом, после того как только что была выбрана функция арифметической операции.
  • В) Нажатие на кнопку с числом, после того как была выбрана функция арифметической операции, а также дополнительные числа были введены.
  • Г) Нажатие на кнопку с числом, после того как была произведена калькуляция.

Поведение при этом должно быть следующим:

  • А) Добавить новое число к тому что уже находится на экране. Если это ноль, заменить его.
  • Б) Зафиксировать первое число, заменить значение на экране данным числом.
  • В) Добавить новое число к тому что уже имеется на экране.
  • Г) Сбросить значение калькулятора, так чтобы оно было равно этому числу.

И вот как выглядит код:

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

Когда произойдёт нажатие все кнопки арифметических функций очищаются специальным классом "pendingFunction", после чего данный класс применяется к определённому нажатию. Это позволяет нам с помощью CSS контролировать положение фона, а также даёт визуальное представление, какая функция активна в данный момент.



И ответ таков...

Функция для кнопки равно тоже довольно проста. Перовое что стоит проверить, так это в состоянии мы или нет производить вычисление, калькуляцию. Если оба числа зафиксированны. В этом случае нам необходимо провести небольшие математические вычисления, после чего установить финальное значение для калькулятора (и установить "fromPrevious" равное true, тем самым нам будет известно текущее состояние в котором мы находимся).

Если числа не зафиксированы... мы ничего не делаем.


CLEAR!

Последнее чему стоит уделить внимание - кнопка очистки (clear), она выполняет самую простую функцию, по сравнению с остальными. Нажав её мы устанавливаем значение калькулятора равное нулю.


Всё готово



На этом всё ребята. Недеюсь также как и скринкаст и живой пример, данный текстовый туториал был полезной информацией. Что касается меня, я узнал несколько новых вещей во время создания данного калькулятора. Если у вас есть интересные мысли как можно использовать данный калькулятор, можете связаться со мной и рассказать о своих идеях.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.