Чтение онлайн

ЖАНРЫ

JavaScript. Подробное руководство, 6-е издание
Шрифт:

• Поиск элементов в документе.

• Получение ввода пользователя с помощью элементов форм.

• Изменение содержимого элементов документа.

• Сохранение данных в броузере.

• Управление НТТР-запросами.

• Создание графики с помощью элемента <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>

<!--
Остальная часть примера - JavaScript-код в теге <script> ниже. Обычно сценарии -->

<!-- помещаются в начало документа, в заголовок <head>, но в данном случае вам проще -->

Поделиться с друзьями: