Mihalytch personal blog

Все о высоких технологиях

Калькулятор средствами JavaScript

Калькулятор предназначен, например, для расчета конечной стоимости продукта или услуги в соответствии с прайсом. Как правило, потребность в использовании on-line калькулятора возникает в том случае, когда коммерческий(ие) продукт(ы) обладают несколькими динамическими свойствами (цвет, тип материала …)

Зачастую, при выборе инструмента для создания on-line калькулятора выбирают JavaScript. Естественно, используют совместно с CSS, HTML, иногда для генерации некоторых частей кода калькулятора используют PHP (или же другие языки, выполняющиеся на стороне сервера), а также технологию AJAX.

Создание калькулятора рассмотрим на примере расчета стоимости изготовления и печати баннера для наружной рекламы.

Для выбора значений из фиксированного списка используем конструкцию:

<select size="1" name="list_id" id="list_id">

   <option value="1"> Param 1 </option>

       ...

   <option value="N"> Param N </option>

</select>

Для ввода/вывода числовых значений, очевидно:

<input type="text" name="param_id" id="param_id" />

Естественно, должен быть элемент при нажатии на который будет производиться расчет. Предлагаю использовать:

<input type="button" onClick="calculate()" value="CALCULATE" />

Атрибут тега input – onClick вызывает функцию calculate (); описанную на языке JavaScript. Далее эта функция производит расчет всех необходимых параметров и вывод данных в соответствующие поля.

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

1. Извлечение данных из форм.

из полей <input type=”text” id=”element_id” … />, <input type=”password” id=”element_id” … />, или <select id=”element_id” …> … </select>

var element_value = document.getElementById('element_id').value;

// в переменную возвращается текстовое или числовое значение

из <input type=“checkbox” id=”checkbox_id” … />

var checkbox_value = document.getElementById('checkbox_id').checked;

// в переменную возвращается значение true либо false

2. Обработка данных.

В рамках данной статьи считаю излишним описывать математические, строковые и другие операции допустимые в рамках JavaScript.

Возможно, возникнет сложность с преобразованием типов данных. Ниже приведу несколько полезных примеров.

// Преобразование строкового типа в ...

int_ = parseInt(str_);      // ... целочисленный

float_ = parseFloat(str_)   // ... с плавающей точкой

Для разделения числа на целую и дробную части в JavaScript используют точку. Для удобства конечных пользователей, было бы логичным сделать допустимым как точку, так и запятую.

var element_value = document.getElementById('element_id').value;

element_value = parseFloat(element_value.replace(',','.'));

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

Решение. Создаем список материалов с помощью <select …>. Каждому материалу присваиваем уникальный номер (далее ID). Создаем массив, в котором каждому ID материала соответствует список доступных разрешений печати. В последнем списке, ID присваиваем каждому доступному разрешению начиная с нуля.

Далее необходимо организовать динамическое изменение списка допустимых разрешений печати при выборе конкретного материала. Пишем функцию ( print_dpi_list (); ), которая в зависимости от выбранного ID материала вставляет в блок на странице отмеченный <div id=”dpi_list”></div> код списка допустимых разрешений. Динамический импорт кода HTML в страницу производится следующим способом:

document.all.dpi_list.innerHTML = list_arr[list_num];

// list_num - ID материала

// list_arr - массив списков допустимых разрешений печати

// dpi_list - имя блока, в который вставляем список.

Также необходимо организовать вызов функции изменения списка допустимых разрешений печати. Используем атрибут onChange:

<select size="1" name="mat" id="mat" onChange="print_dpi_list();">

Теперь необходимо поставить в соответствие каждому материалу и разрешению цену за печать. Для этого создадим двумерный массив. 1е измерение ID материала, 2е – ID разрешения печати. Массив будет выглядеть примерно так:

	var price;
	price = new Array ();
	price[0] = new Array ();
	price[1] = new Array ();
   ...

	price[0][0] = 300;
	price[0][1] = 350;
	price[0][2] = 400;
	price[0][3] = 450;
	price[0][4] = 500;

	price[1][0] = 480;
	price[1][1] = 680;
	price[1][2] = 680;
	price[1][3] = 1200;

   ...

Теперь для расчета цены необходимо всего лишь извлечь из списков ID выбранных значений и подставить в координаты элемента массива:

var out_price = price[list_num][dpi_num];

3. Вывод результатов.

Самый простой способ вывести результат с помощью сообщения alert (‘текст сообщения’);. Я лично нахожу его неприемлемым. Этот метод допустим лишь в том случае, если необходимо возвратить пользователю одно значение. Как правило итоговых расчетных значений и промежуточных 2 или более… Поэтому необходимо создать поля, в которых будут выводиться значения.

Для текстовых полей формы, например: <input type=”text” id=”out_price_inp” />

document.getElementById('out_price_inp').value = out_price;

Либо в текстовый блок, например обозначенный как <div id=”out_price_div”></div>

	// результат, который содержит код HTML

document.all.out_price_div.innerHTML = out_price;

	// результат, который содержит только текст без кода HTML

document.all.out_price_div.innerTEXT = out_price;

Так же можно реализовать возможность пересчета данных при изменении параметров в каком либо поле (полях) ввода данных. Для этого добавляем в необходимые теги атрибут onChange=”calculate ();“ (который вызывают функцию расчета при изменении заданного поля) либо onClick=”calculate ();“ (функция будет вызвана после одиночного клика левой кнопки мыши на объект с данным атрибутом)

Еще совет. Скорее всего будут иметь место постоянные величины (например, цена резки баннера за метр и т.д.), которые могут меняться раз в месяц или более … Для удобства администратора сайта их следует сохранить в базу и управление величиной этих параметров сделать доступным из административной части сайта. А в месте генерации JavaScript кода калькулятора при определении переменных написать код примерно такого содержания:

<?php

  ...

	echo 'var price_porezka = '.$price_1.';';  // цена за порезку
	echo 'ar price_luvers = '.$price_2.';';    // цена за люверс
	echo 'ar karman_price = '.$price_3.';';    // цена за метр кармана

  ...

?>

Где $price_1, $price_2, $price_3 – переменные заранее выбранные из базы.

Данная статья написана по мотивам разработки реального проекта =)

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

CAPTCHA Code *

Уведомлять меня о новых комментариях к этому посту по e-mail