irpsv/Web-calculator

калькулятор для встраивания на веб страницы

#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.