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

• Сортируют столбцы таблиц, упрощая пользователю поиск требуемой информации.

• Скрывают определенное содержимое и отображают детали по мере «погружения» пользователя в содержимое.

13.1.2. Сценарии JavaScript в веб-приложениях

Веб-приложения применяют все возможности JavaScript и DHTML, которые используются в веб-документах, но помимо управления содержимым, его представлением и поведением они также используют преимущества других фундаментальных механизмов, предоставляемых веб-броузерами.

Чтобы понять суть веб-приложений, важно осознать, что веб-броузеры развивались не только как инструменты для отображения документов и давно уже трансформировались в некоторое подобие простых операционных систем. Сравните: традиционные операционные системы позволяют создавать ярлыки (представляющие файлы и приложения) на рабочем столе и в папках. Веб-броузеры позволяют создавать закладки (представляющие документы и веб-приложения) на панели инструментов и в папках. Операционные системы выполняют множестве приложений в отдельных окнах; веб-броузеры отображают множество документов (или приложений) в отдельных вкладках. Операционные системы определяют низкоуровневые API для организации сетевых взаимодействий, рисования графики и сохранения файлов. Веб-броузеры определяют низкоуровневые API для организации сетевых взаимодействий (глава 18), сохранения данных (глава 20) и рисования графики (глава 21).

Представляя веб-броузеры как упрощенные операционные системы, веб-приложения можно определить как веб-страницы, в которых используется программный код на языке JavaScript для доступа к расширенным механизмам (таким как сетевые взаимодействия, рисование графики и сохранение данных) броузеров. Самым известным из этих механизмов является объект XMLHttpRequest, который обеспечивает сетевые взаимодействия посредством управляемых НТТР-запросов. Веб-приложения используют этот механизм для получения новой информации с сервера без полной перезагрузки страницы. Веб-приложения, использующие этот прием, часто называют Ajax-приложениями, и они образуют фундамент того, что известно под названием «Web 2.0». Объект XMLHttpRequest во всех подробностях рассматривается в главе 18.

Спецификация HTML5 (которая на момент написания этих строк еще находилась в состоянии проекта) и ряд связанных с ней спецификаций определяют ряд других важных прикладных интерфейсов для веб-приложений. В их число входят прикладные интерфейсы для сохранения данных и рисования графики, которые описываются в главах 21 и 20, а также множество других возможностей, таких как геопозиционирование (geolocation), управление журналами посещений и фоновые потоки выполнения. Когда все эти прикладные интерфейсы будут реализованы, они обеспечат дальнейшее расширение возможностей веб-приложений. Подробнее о них рассказывается в главе 22.

Безусловно, сценарии на языке JavaScript занимают в веб-приложениях более важное положение, чем в веб-документах. Сценарии на JavaScript расширяют возможности веб-документов, но при правильном оформлении документы остаются полностью доступными даже при отключенной поддержке JavaScript. Вебприложения по определению являются программами на языке JavaScript, использующими механизмы, предоставляемые веб-броузерами, и не будут работать при отключенной поддержке JavaScript. [28]

28

Интерактивные веб-страницы, взаимодействующие с серверными CGI-сценариями посредством форм HTML также можно считать «веб-приложениями», и они могут быть написаны без применения JavaScript. Однако это не тот тип веб-приложений, которые мы будем обсуждать в этой книге.

13.2. Встраивание JavaScript-кода в разметку HTML

Клиентский JavaScript-код может встраиваться в HTML-документы четырьмя способами:

• встроенные сценарии между парой тегов <script> и </script>;

• из внешнего файла, заданного атрибутом src тега <script>;

• в обработчик события, заданный в качестве значения HTML-атрибута, такого

как onclick или onmouseover;• как тело URL-адреса, использующего специальный спецификатор псевдопротокола JavaScript:.

В следующих далее подразделах описываются все четыре способа встраивания программного кода на языке JavaScript. Следует отметить, что HTML-атрибуты обработчиков событий и адреса URL с псевдопротоколом javascript: редко используются в современной практике программирования на языке JavaScript (они были более распространены на раннем этапе развития Всемирной паутины). Встроенные сценарии (в тегах <script> без атрибута src) также стали реже использоваться по сравнению с прошлым. Согласно философии программирования, известной как ненавязчивый JavaScript (unobtrusive JavaScript), содержимое (разметка HTML) и поведение (программный код на языке JavaScript) должны быть максимально отделены друг от друга. Следуя этой философии программирования, сценарии на языке JavaScript лучше встраивать в HTML-документы с помощью элементов <script>, имеющих атрибут src.

13.2.1. Элемент <script>

Клиентские JavaScript-сценарии могут встраиваться в HTML-файлы между тегами <script> и </script>:

  <script>
   // Здесь располагается JavaScript-код
  </script>

В языке разметки XHTML содержимое тега <script> обрабатывается наравне с содержимым любого другого тега. Если JavaScript-код содержит символы < или &, они интерпретируются как элементы XML-разметки. Поэтому в случае применения языка XHTML лучше помещать весь JavaScript-код внутрь секции CDATA:

  <script><![CDATA[
  // Здесь располагается JavaScript-код
  ]]></script>

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

Пример 13.2. Простые часы с цифровым табло на JavaScript

  <! DOCTYPE html> <!-- Это файл HTML5 -->
  <html> <!-- Корневой элемент -->
  <head> <!-- Заголовок, здесь располагаются сценарии и стили -->
   <title>Digital Clock</title>
   <script> // Сценарий на JavaScript
   // Определение функции для отображения текущего времени
   function displayTime {
   var elt = document.getElementById("clock"); // Найти элемент c id="clock"
   var now = new Date; // Получить текущее время
   elt.innerHTML = now.toLocaleTimeString; // Отобразить его
   setTimeout(displayTime, 1000); // Вызвать снова через 1 сек.