1.2. Клиентский JavaScript
Изучение клиентского JavaScript представляет собой задачу, нелинейную из-за перекрестных ссылок в значительно меньшей мере, чем базовый язык, и поэтому вполне возможно изучать особенности использования JavaScript в веб-броузерах в линейном порядке. Возможно, вы взялись за чтение этой книги, чтобы изучить клиентский JavaScript - тему далекой второй части, поэтому здесь мы приводим краткий обзор основных приемов программирования клиентских сценариев, который сопровождается подробным примером.
Глава 13 «JavaScript в веб-броузерах» является первой главой второй части, в которой описываются детали использования JavaScript в веб-броузерах. Самое важное, что вы узнаете в этой главе, - программный код JavaScript может встраиваться в HTML-файлы с помощью тега <script>:
<html>
<head>
<script src="library.js"></script> <!-- подключить библиотеку JavaScript -->
</head>
<body>
<р>Это абзац HTML</p>
<script>
// Это некоторый программный код на клиентском JavaScript,
// встроенный непосредственно в HTML-файл
</script>
<р>Далее опять следует разметка HTML.</р>
</body>
</html>
Глава 14 «Объект Window» исследует приемы управления веб-броузером и описывает некоторые наиболее важные глобальные функции клиентского JavaScript. Например:
<script>
function moveon() {
// Вывести модальный диалог, чтобы получить ответ пользователя
var answer = confirm("Ready to move on?");
// Если пользователь щелкнул на кнопке "OK", заставить броузер загрузить новую страницу
if (answer) window.location = "http://google.com";
}
// Запустить функцию, объявленную выше, через 1 минуту (60000 миллисекунд).
setTimeout(moveon, 60000);
</script>
Обратите внимание, что примеры программного кода на клиентском JavaScript в этом разделе длиннее примеров на базовом языке, которые мы видели выше в этой главе. Эти примеры не предназначены для ввода в окне консоли Firebug (или в другом подобном инструменте). Однако вы можете вставлять их в HTML-файлы и затем запускать, открывая файлы в веб-броузере. Так, пример, приведенный выше, является самостоятельным HTML-файлом.
Глава 15 «Работа с документами» переходит к исследованию фактической работы, выполняемой с помощью JavaScript на стороне клиента, - управлению содержимым документа HTML. Она покажет вам, как выбирать определенные элементы HTML из документов, как устанавливать HTML-атрибуты этих элементов, как изменять содержимое элементов и как добавлять в документ новые элементы. Следующая функция демонстрирует некоторые из простейших приемов поиска и изменения элементов документа:
// Выводит сообщение в специальной области для отладочных сообщений внутри документа.
// Если документ не содержит такой области, она создается.
function debug(msg) {
// Отыскать область для отладочных сообщений в документе, поиск по HTML-атрибуту id
var log = document.getElementByld("debuglog");
// Если элемент с атрибутом id="debuglog" отсутствует, создать его.
if (!log) {
log = document.createElementC'div"); // Создать элемент <div>
log.id = "debuglog"; // Установить атрибут id
log.innerHTML = "<h1>Debug Log</h1>"; // Начальное содержимое
document.body.appendChild(log); // Добавить в конец документа
}
// Теперь обернуть сообщение в теги <рге> и добавить в элемент log
var рге = document.createElement("pre"); // Создать тег <рге>
var text = document.createTextNode(msg); // Обернуть msg в текстовый узел
pre.appendChild(text); // Добавить текст в тег <рге>
log.appendChild(pre); // Добавить <рге> в элемент log
}
Глава 15 демонстрирует, как с помощью JavaScript можно управлять HTML-элементами, которые определяют содержимое веб-страниц. Глава 16 «Каскадные таблицы стилей» демонстрирует, как с помощью JavaScript можно управлять каскадными таблицами стилей CSS, определяющими представление содержимого. Чаще всего для этой цели используется атрибут HTML-элементов style или class:
function hide(e, reflow) { // Скрывает элемент e, изменяя его стиль
if (reflow) {// Если 2-й аргумент true,
e.style.display = "none" // скрыть элемент и использовать
} // занимаемое им место
else { // Иначе
e.style.visibility = "hidden"// сделать е невидимым, но оставить
} // занимаемое им место пустым
}
function highlight(е) { // Выделяет е, устанавливая класс CSS
// Просто добавляет или переопределяет HTML-атрибут class.
// Предполагается, что таблица стилей CSS уже содержит определение класса "hilite"
if (!е.className)
e.className = "hilite";
else
e.className += " hilite";
}
JavaScript позволяет не только управлять содержимым и оформлением HTML-документов в броузерах, но и определять поведение этих документов с помощью обработчиков событий. Обработчик событий - это функция JavaScript, которая регистрируется в броузере и вызывается броузером, когда возникает событие определенного типа. Таким событием может быть щелчок мышью или нажатие клавиши (или какое-то движение двумя пальцами на экране смартфона). Обработчик события может также вызываться броузером по окончании загрузки документа, при изменении размеров окна броузера или при вводе данных в элемент HTML-формы. Глава 17 «Обработка событий» описывает, как определять и регистрировать обработчики событий и как вызываются эти обработчики при появлении событий.
Простейший способ объявления обработчиков событий заключается в использовании HTML-атрибутов, имена которых начинаются с приставки «оп». Обработчик «onclick» особенно удобен при создании простых тестовых программ. Предположим, что вы сохранили функции debug() и hide(), представленные выше, в файлах с именами debug.js и hide.js. В этом случае можно было бы написать простой тестовый HTML-файл, использующий элементы <button> с атрибутами onclick, определяющими обработчики событий:
<script src="debug.js"></script>
<script src="hide. js"x/script>
Hello
<button onclick="hide(this,true); debug('hide button 1'); ">Hide1</button>
<button onclick="hide(this); debug('hide button 2');">Hide2</button>
World
Ниже приводится еще один пример программного кода на клиентском 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. Здесь не приводятся примеры программного кода из этих заключительных четырех глав, однако расширенный пример, представленный ниже, использует некоторые из этих новых прикладных интерфейсов.