Skip to content

irpsv/Web-calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 

Repository files navigation

#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, ... - имена полей калькулятора.

На имена полей накладываются ограничения:

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

###Формула

Для того чтобы калькулятор знал каким образом производить вычисления, необходимо перегрузить метод 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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published