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

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

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

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

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

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

• Создание графики с помощью элемента <canvas>.

Пример 1.1. Калькулятор вычисления платежей по ссуде на JavaScript

<!DOCTYPE html>

<html>

<head>

 <title>JavaScript Loan Calculator</title>

<b>  &lt;style&gt; /* Таблица стилей CSS: определяет внешний вид вывода программы */</b>

<b>    .output { font-weight: bold; } /* Жирный шрифт для вычисленных значений */</b>

 #payment { text-decoration: underline: } /* Для элементов с id="payment" */

 #graph { border: solid black 1px; } /* Простая рамка для диаграммы */

 th, td { vertical-align: top: } /* Выравнивание в ячейках таблицы */

 </style>

</head>

<body>

<! --

<b>Это HTML-таблица с элементами &lt;input&gt;, позволяющими вводить данные, и с элементами &lt;span&gt;,</b>

<b> в которых отображаются результаты вычислений. Эти элементы имеют идентификаторы, </b>

<b>такие как &quot;interest&quot; и &quot;years&quot;. Данные идентификаторы используются в JavaScript-коде, </b>

<b>который следует за определением таблицы. Обратите внимание, что для некоторых</b>

<b>элементов ввода определены обработчики событий &quot;onchange&quot; и &quot;onclick&quot;. </b>

<b>В них заданы строки JavaScript-кода, выполняемого при вводе данных или щелчке на кнопке. </b>

-->

<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>$</td>

 </tr>

 <tr>

 <td>Total payment:c/td>

 <td>$</td>

 </tr>

 <tr>

 <td>Total interest:c/td>

 <td>$</td>