1.2.1. Пример: калькулятор платежей по ссуде на JavaScript
Эта глава завершается расширенным примером, объединяющим в себе многие из описанных выше приемов и демонстрирующим полноценную программу на клиентском JavaScript (плюс HTML и CSS). В примере 1.1 представлена реализация простого калькулятора для вычисления платежей по ссуде (рис. 1.2).
Стоит потратить время на внимательное рассмотрение примера 1.1. Вряд ли вы сумеете досконально разобраться в нем, однако благодаря подробным комментариям вы должны по крайней мере получить общее представление о том, как действует это веб-приложение. Пример демонстрирует множество особенностей базового языка JavaScript, а также некоторые важные приемы программирования на клиентском JavaScript:
• Поиск элементов в документе.
• Получение ввода пользователя с помощью элементов форм.
• Изменение содержимого элементов документа.
• Сохранение данных в броузере.
• Управление НТТР-запросами.
• Создание графики с помощью элемента <canvas>.
Пример 1.1. Калькулятор вычисления платежей по ссуде на JavaScript
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style> /* Таблица стилей CSS: определяет внешний вид вывода программы */
.output { font-weight: bold; } /* Жирный шрифт для вычисленных значений */
#payment { text-decoration: underline: } /* Для элементов с id="payment" */
#graph { border: solid black 1px; } /* Простая рамка для диаграммы */
th, td { vertical-align: top: } /* Выравнивание в ячейках таблицы */
</style>
</head>
<body>
<! --
Это HTML-таблица с элементами <input>, позволяющими вводить данные, и с элементами <span>,
в которых отображаются результаты вычислений. Эти элементы имеют идентификаторы,
такие как "interest" и "years". Данные идентификаторы используются в JavaScript-коде,
который следует за определением таблицы. Обратите внимание, что для некоторых
элементов ввода определены обработчики событий "onchange" и "onclick".
В них заданы строки JavaScript-кода, выполняемого при вводе данных или щелчке на кнопке.
-->
<table>
<tr>
<th>Enter Loan Data:</th>
<td></td>
<th>Loan Balance, Cumulative Equity, and Interest Payments</th>
</tr>
<tr>
<td>Amount of the loan ($):</td>
<td><input id="amount" onchange=”calculate(); "></td>
<td rowspan=8>
<canvas id="graph" width="400" height="250"></canvas>
</td>
</tr>
<tr>
<td>Annual interest (%):</td>
<td><input id="apr" onchange="calculate(); "></td>
</tr>
<tr>
<td>Repayment period (years):</td>
<td><input id="years" onchange="calculate(); "></td>
</tr>
<tr>
<td>Zipcode (to find lenders):</td>
<td><input id="zipcode" onchange="calculate(); "></td>
<tr>
<th>Approximate Payments:</th>
<td><button onclick="calculate();">Calculate</button></td>
</tr>
<tr>
<td>Monthly payment:</td>
<td>$<span class="output" id="payment"></span></td>
</tr>
<tr>
<td>Total payment:c/td>
<td>$<span class="output" id="total"></span></td>
</tr>
<tr>
<td>Total interest:c/td>
<td>$<span class="output" id="totalinterest"></span></td>
</tr>
<tr>
<th>Sponsors:c/th>
<td colspan=2>
Apply for your loan with one of these fine lenders:
<div id="lenders"></div>
</td>
</tr>
</table>