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

на главную - закладки

Жанры

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

Ниже приводится еще один пример программного кода на клиентском JavaScript, использующего механизм событий. Он регистрирует обработчик очень важного события «load» и дополнительно демонстрирует более сложный способ регистрации обработчика события «click»:

// Событие "load" возбуждается, когда документ будет полностью загружен.

// Обычно мы вынуждены ждать этого события, прежде чем можно будет запустить

// наш программный код JavaScript.

window.onload = function { // Запустит функцию после загрузки документа

//
Отыскать все теги <img> в документе

var images = document.getElementsByTagName("img");

// Обойти их все в цикле, добавить к каждому обработчик события "click",

// чтобы обеспечить сокрытие любого изображения после щелчка на нем.

for(var і = 0; і < images.length; i++) {

var image = images[i];

if (image.addEventListener) // Другой способ регистрации обработчика

image.addEventListener("click", hide, false);

else // Для совместимости с версией IE8 и ниже

image.attachEvent("onclick", hide);

}

// Это функция-обработчик событий, которая регистрируется выше

function hide(event) { event.target.style.visibility = "hidden"; }

Главы 15, 16 и 17 описывают, как с помощью JavaScript управлять содержимым (HTML), представлением (CSS) и поведением (обработка событий) веб-страниц. Прикладной интерфейс, описываемый в этих главах, является достаточно сложным, и до недавнего времени испытывал проблемы с совместимостью между броузерами. По этим причинам многие или большинство программистов на клиентском JavaScript предпочитают использовать клиентские библиотеки или фреймворки, упрощающие программирование. Наиболее популярна из этих библиотек - библиотека jQuery, которая обсуждается в главе 19 «Библиотека jQuery». Библиотека jQuery определяет простой и удобный программный интерфейс для управления содержимым документа, его представлением и поведением. Она была тщательно протестирована и может использоваться во всех основных броузерах, включая довольно старые, такие как IE6.

Программный код, использующий jQuery, легко отличить по частому использованию функции $. Ниже показано, как будет выглядеть функция debug, представленная выше, если переписать ее с использованием jQuery:

function debug(msg) {

var log = $("#debuglog"); // Отыскать элемент для вывода msg.

if (log.length == 0) { // Если отсутствует, создать его...

log = $("<div id='debuglog'><h1>Debug Log</h1></div>");

log.appendTo(document.body); // и вставить в конец тела документа.

}

log.append($("<pre/>").text(msg)); // Завернуть msg в тег <рге>

} // и добавить в элемент log

В этих четырех главах из второй части в действительности рассматривается все, что касается веб-страниц. Другие четыре главы переключают внимание на вебприложения. Эти главы не о том, как использовать веб-броузеры для отображения документов, содержимое, представление и поведение которых управляется с помощью JavaScript. Они рассказывают об использовании веб-броузеров как прикладной платформы и описывают прикладной интерфейс, предоставляемый современными

броузерами для поддержки сложных, современных клиентских веб-приложений. Глава 18 «Работа с протоколом HTTP» описывает, как с помощью JavaScript можно управлять HTTP-запросами - своего рода сетевой прикладной интерфейс. Глава 20 «Сохранение данных на стороне клиента» описывает механизмы, позволяющие сохранять данные (и даже целые приложения) на стороне клиента для использования в последующих сеансах работы. Глава 21 «Работа с графикой и медиафайлами на стороне клиента» охватывает клиентский прикладной интерфейс, позволяющий создавать произвольные графические изображения в HTML-теге <canvas>. И наконец, глава 22 «Прикладные интерфейсы HTML5» охватывает новые прикладные интерфейсы веб-приложений, определяемые или принятые стандартом HTML5. Сетевые взаимодействия, организация хранения данных, работа с графикой - все эти службы операционных систем, доступные посредством вебброузеров, образуют новую, платформонезависимую среду выполнения приложений. Если вы нацелены на броузеры, которые поддерживают эти новые прикладные интерфейсы, то сейчас наступает самое интересное время для программистов на клиентском JavaScript. Здесь не приводятся примеры программного кода из этих заключительных четырех глав, однако расширенный пример, представленный ниже, использует некоторые из этих новых прикладных интерфейсов.

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>,

Поделиться:
Популярные книги

Зодчий. Книга IV

Погуляй Юрий Александрович
4. Зодчий Империи
Фантастика:
аниме
фэнтези
попаданцы
7.00
рейтинг книги
Зодчий. Книга IV

Моров. Том 1 и Том 2

Кощеев Владимир
1. Моров
Фантастика:
попаданцы
альтернативная история
аниме
5.00
рейтинг книги
Моров. Том 1 и Том 2

Инженер Петра Великого 2

Гросов Виктор
2. Инженер Петра Великого
Фантастика:
попаданцы
альтернативная история
фэнтези
5.00
рейтинг книги
Инженер Петра Великого 2

Московское золото и нежная попа комсомолки. Часть Пятая

Хренов Алексей
5. Летчик Леха
Фантастика:
попаданцы
5.00
рейтинг книги
Московское золото и нежная попа комсомолки. Часть Пятая

Студиозус 2

Шмаков Алексей Семенович
4. Светлая Тьма
Фантастика:
юмористическое фэнтези
городское фэнтези
аниме
5.00
рейтинг книги
Студиозус 2

Викинг

Мазин Александр Владимирович
1. Викинг
Приключения:
исторические приключения
8.92
рейтинг книги
Викинг

Вечный. Книга IV

Рокотов Алексей
4. Вечный
Фантастика:
боевая фантастика
попаданцы
рпг
5.00
рейтинг книги
Вечный. Книга IV

Ведун

Сухов Александр Евгеньевич
1. Второй шанс
Фантастика:
фэнтези
боевая фантастика
альтернативная история
5.00
рейтинг книги
Ведун

География растений

Гумбольдт Александр
Классики естествознания
Научно-образовательная:
ботаника
7.50
рейтинг книги
География растений

Последний Паладин

Саваровский Роман
1. Путь Паладина
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Последний Паладин

Железный Воин Империи

Зот Бакалавр
1. Железный Воин Империи
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Железный Воин Империи

Черная метка

Лисина Александра
7. Гибрид
Фантастика:
технофэнтези
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Черная метка

Дорогами алхимии

Видум Инди
2. Под знаком Песца
Фантастика:
альтернативная история
аниме
5.00
рейтинг книги
Дорогами алхимии

Я - истребитель

Поселягин Владимир Геннадьевич
1. Я - истребитель
Фантастика:
альтернативная история
8.19
рейтинг книги
Я - истребитель