#Web-calculator
Библиотека представлет собой инструмент для встраивания на веб-страницу виджета калькулятор
##Описание
###Поля
Все элементы калькулятора - это HTML теги (input или select), с указанным аттрибутом data-calc.
Например:
<div data-calc="MAIN">
<!-- поля калькулятора -->
<div>
<input data-calc="field1">
<input data-calc="field2">
...
<input data-calc="fieldN">
</div>
<!-- вывод результата -->
<div>
<input data-calc="OUTPUT">
</div>
<!-- кнопка начала вычислений -->
<div>
<input type='button' onclick='Calculator.exec()'>
</div>
</div>
где field1, field2, ... - имена полей калькулятора.
На имена полей накладываются ограничения:
- не число (допустимы имена вида: "13a", "x3", "11iL2", ...)
- не ключевое слово
Последним полем в примере является кнопка при нажатии на которую происходит вычисление результата по указанной формуле.
###Формула
Для того чтобы калькулятор знал каким образом производить вычисления, необходимо перегрузить метод formula в главном объекте.
Например:
Calculator.formula = function() {
var x = op("field2").o('-', 123);
return op(2).o('+', 3).o('*', "field1").o('/', 2).o('-', x);
}
Функция должна возвращать элемент типа Operand.
###Операнды
Формула состоит из операндов. Каждый операнд это экземпляр класса Operand. Создавать экземпляры можно двумя способами:
var x = new Operand(1);
var x = op(1);
Оба варианта рабочие, но естественно что удобнее использовать второй.
Входным значением для конструктора Operand, а также для функций-операций может быть:
- операнд (Operand)
- число (Number)
- имя поля (String)
Объект Operand представляет собой неизменяемый объект, т.е. значение задается в нем только один раз при инциализации. Все операции производимые над объектом, пораждают новый объект:
var x = op(3);
var y = x.o('+', 12);
//
// Получить значение можно с помощью функции val()
//
x.val(); // =3
y.val(); // =15
Ниже приведен пример с использованием всех доступных операций (никто не мешает добавить своих путем добавления методов к классу Operand):
Calculator.formula = function() {
//
// ПРОСТЫЕ ОПЕРАТОРЫ
//
// инициализация
var x1 = op(0);
var x2 = op("field1");
var x3 = op(x2); // так тоже можно, но не понятно зачем :-)
// сложение
x1.o('+', 1);
// вычитание
x1.o('-', x2);
// умножение
x1.o('*', "field2");
// деление
x2.o('/', x1);
// возведение в степень
x3.o('^', x1);
// можно выстраивать цепочки вычислений, выражение ниже равносильно: x1 = x1 * x2 - x3
x1 = x1.o('*', x2).o('+', x3);
//
// ГРУППОВЫЕ ОПЕРАТОРЫ
// Для того чтобы сделать сразу несколько действий, то нужно просто в массиве прописать все операнты
//
x1.o('+', [1,2,3,4]);
//
// Куб суммы: a^3 + 3*(a^2)*b + 3*a*(b^2) + b^3
//
var a = op("a");
var b = op("b");
op(0).o('+', [
a.o('^', 3),
a.o('^', 2).o('*', [3, b]),
b.o('^', 2).o('*', [3, a]),
b.o('^', 3),
]);
}
###Правила
Правила - это функции, которые выполняются перед тем как вернуть значение поля. Установка правил производиться присвоением функции к соответствующему полю главнного класса.
Например:
Calculator.rules["field1"] = function(value) {
return (value >= 10) ? 10 : value;
}
// допустим значение поля 'field1' равно '6'
var x = op("field1").val(); // x = 6
// допустим значение поля 'field1' равно '13'
var x = op("field1").val(); // x = 10
В правилах можно использовать значения других полей. Например, в книжнем магазине, при покупке свыше 5 книг клиент получает скидку 20%, а при покупке 10 книг - 50%. Данное условие можно реализовать с помощью правила:
//
// имеем два поля: "count" - число книг и "cost" - цена за 1 книгу
//
Calculator.formula = function() {
return op("cost").o('*', "count");
}
Calculator.rules["cost"] = function(value) {
//
// Обращение к другому полю производиться через this.fields["имя поля"]
//
var count = this.fields["count"];
var k = 1.0;
if (count >= 5) {
k = 0.8;
}
if (count >= 10) {
k = 0.5;
}
//
// value - это значение введеное пользователем
//
return value * k;
}
###Ключевые слова
Всего их два и предназначены они для служебных целей (регистр ВАЖЕН):
- MAIN - определяет области калькулятора, среди потомков данного тега производиться поиск полей калькулятора.
- OUTPUT - определяет куда будет выводиться результат вычислений. Может быть любым тегом имеющим JS свойства value или innerHTML. Данный тег можно не указывать, тогда результат будет отображен во всплывающем окне alert.