Написание простого приложения на javascript.
На примере кредитного калькулятора посмотрим, как создать клиентское приложение на javascript.
Начнем с разметки. Нам понадобятся три инпута для ввода параметров, подписи к ним, кнопка для запуска расчета и таблица для отображения результатов.
<div class="debt_calc_param_container"><span class="debt_calc_param">Сумма кредита</span><input id="debt_calc_amount" /></div> <div class="debt_calc_param_container"><span class="debt_calc_param">Процентная ставка</span><input id="debt_calc_percent" /></div> <div class="debt_calc_param_container"><span class="debt_calc_param">Срок кредита в месяцах</span><input id="debt_calc_period" /></div> <button id="debt_calc_button">Рассчитать</button> <table id="debt_calc_paymentcalendar" border="1" bordercolor="black" cellpadding="10"></table>
Можно приступать к написанию кода. Начнем с обработчика кнопки расчета. Назовем его calculate_debt. Сначала считаем значения параметров
var sum = parseFloat($('#debt_calc_amount').val()); var months = parseInt($('#debt_calc_period').val()); var percent = parseFloat($('#debt_calc_percent').val() / 100);
Теперь рассчитаем месячный платеж, сумму выплат и переплату по кредиту
var monthly_percent = percent / 12; var monthly_payment = round_payment(sum * (monthly_percent + monthly_percent / (Math.pow(monthly_percent + 1, months) - 1))); var total_payment = months * monthly_payment; var over_payment = total_payment - sum;
Можно приступать к выводу результатов. Сначала очищаем таблицу и добавляем в нее шапку. Очистка таблицы нужна для того, чтобы при повторном запуске расчета результаты не добавились к предыдущим, а перезаписали их.
$('#debt_calc_paymentcalendar').empty(); $('#debt_calc_paymentcalendar').append('<tr><th>№</th><th>Дата платежа </th><th>Платеж</th></tr>');
В цикле выводим по строке на каждый платеж
for (var i = 1; i <= months; i++) { date = addMonths(date, 1); $('#debt_calc_paymentcalendar').append('<tr><td>' + i + '</td><td>' + date.toISOString().slice(0, 10) + '</td><td align="right">' + monthly_payment.toFixed(2) + '</td></tr>') }
Добавляем сумму выплат и переплату по кредиту
$('#debt_calc_paymentcalendar').append('<tr><td colspan="2">Сумма платежей</td><td align="right">' + total_payment.toFixed(2) + '</td></tr>'); $('#debt_calc_paymentcalendar').append('<tr><td colspan="2">Переплата</td><td align="right">' + over_payment.toFixed(2) + '</td></tr>');
Теперь при загрузке страницы навешиваем обработчик на кнопку и прячем таблицу, чтобы не мешалась. Так же стоит обернуть весь код в self-invoking функцию. И в конец функции calculate_debt добавляем показ таблицы.
(function () { function calculate_debt() { ... $('#debt_calc_paymentcalendar').show(); } $(document).ready(function () { $('#debt_calc_button').bind("click", calculate_debt); $('#debt_calc_paymentcalendar').hide(); }); })();
Все, можно пользоваться.