На примере кредитного калькулятора посмотрим, как создать клиентское приложение на 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();
    });
})();

Все, можно пользоваться.