Каждый программист должен сделать в своей жизни три вещи: вырастить сына, построить дома и написать калькулятор. Этот анекдот меня весьма насмешил. Недавно я столкнулся с проблемой разработки вычислений материала для интернет магазина. Но что, если подойти к решению самостоятельно, и позволить посетителям самостоятельно вести расчет и вычисления на сайте, то есть создать калькулятор. В данном уроке мы рассмотрим как создать простой калькулятор для сайта с помощью javascript. Калькулятор легко изменять и добавить новые функции.

Сегодня я хотел бы поделиться первым учебником по Knockout.js. Это одна из популярных библиотек JavaScript, которая позволяет нам использовать Model-View-View модели (MVVM). Данный подход расширяет рамки простого браузера, это новый взгляд на приложения созданных с помощью JavaScript. Основной идеей является разделение логики и воображения. Чтобы связать View и ViewModel используются данные атрибутов HTML5. В качестве демонстрации создан калькулятор с помощью knockout.js. И так,, приступим к созданию.

Шаг 1. HTML

Для начала мы рассмотрим разметку.

Данный калькулятор состоит из десяти цифровых кнопок (номеров) и девяти команд. Мы собираемся использовать два набора: цифры и команды (для создания кнопки) вместо добавления их вручную.

Шаг 2. JS

В данной модели калькулятора нам необходимо определить два массива (команд и цифры). Они содержат все возможные цифры и действия (для нашей кнопки). Как вы знаете, для обычных команд (например, сложение, вычитание, умножение и деление), мы должны использовать два числа, чтобы все правильно работало, а в случае использования других функций (SIN, COS,  и т.д.) — только одно число.

js/main.js

И теперь мы можем использовать foreach (в демонстрации) для отображения всех кнопок (с цифрами и действиями).

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

Шаг 3. CSS

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

CSS / main.css

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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