Дэвид Флэнаган: JavaScript. Подробное руководство, 6-е издание

. И наконец, глава 22 «Прикладные интерфейсы HTML5» охватывает новые прикладные интерфейсы веб-приложений, определяемые или принятые стандартом HTML5. Сетевые взаимодействия, организация хранения данных, работа с графикой - все эти службы операционных систем, доступные посредством вебброузеров, образуют новую, платформонезависимую среду выполнения приложений. Если вы нацелены на броузеры, которые поддерживают эти новые прикладные интерфейсы, то сейчас наступает самое интересное время для программистов на клиентском JavaScript. Здесь не приводятся примеры программного кода из этих заключительных четырех глав, однако расширенный пример, представленный ниже, использует некоторые из этих новых прикладных интерфейсов.

Эта глава завершается расширенным примером, объединяющим в себе многие из описанных выше приемов и демонстрирующим полноценную программу на клиентском JavaScript (плюс HTML и CSS). В примере 1.1 представлена реализация простого калькулятора для вычисления платежей по ссуде (рис. 1.2).

Стоит потратить время на внимательное рассмотрение примера 1.1. Вряд ли вы сумеете досконально разобраться в нем, однако благодаря подробным комментариям вы должны по крайней мере получить общее представление о том, как действует это веб-приложение. Пример демонстрирует множество особенностей базового языка JavaScript, а также некоторые важные приемы программирования на клиентском JavaScript:

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

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

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

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

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

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

.

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

/* Таблица стилей CSS: определяет внешний вид вывода программы */

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

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

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

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

Это HTML-таблица с элементами , позволяющими вводить данные, и с элементами ,

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

такие как "interest" и "years". Данные идентификаторы используются в JavaScript-коде,

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

элементов ввода определены обработчики событий "onchange" и "onclick".

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

-->

Enter Loan Data:		Loan Balance, Cumulative Equity, and Interest Payments
Amount of the loan ($):
Annual interest (%):
Repayment period (years):
Zipcode (to find lenders):
Approximate Payments:	Calculate
Monthly payment:	$
Total payment:c/td>	$
Total interest:c/td>	$
Sponsors:c/th>	Apply for your loan with one of these fine lenders:

"use strict"; // Использовать строгий режим ECMAScript 5, если броузер поддерживает его

/*

* Этот сценарий определяет функцию calculate(), вызываемую обработчиками событий

* в разметке HTML выше. Функция читает значения из элементов , вычисляет размеры

* платежей по ссуде, отображает результаты в элементах . Кроме того, она сохраняет

* пользовательские данные, отображает ссылки на кредитные учреждения и рисует диаграмму.

*/

function calculate() {

// Отыскать элементы ввода и вывода в документе

var amount = document.getElementById("amount");

var apr = document.getElementByld("apr”);

var years = document.getElementById("years");

var zipcode = document.getElementById("zipcode");

var payment = document.getElementById("payment");

var total = document.getElementById("total");

Читать дальше