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

  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. Здесь не приводятся примеры программного кода из этих заключительных четырех глав, однако расширенный пример, представленный ниже, использует некоторые из этих новых прикладных интерфейсов.

1.2.1. Пример: калькулятор платежей по ссуде на JavaScript

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

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