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

   status("Ha сервере найдена более новая заметка.");
   var useit =
   confirm("Ha сервере имеется более новая версия\n” +
   "заметки. Щелкните на кнопке Ok, чтобы\n" +
   "использовать эту версию, или на кнопке\n"+
   "Отмена, чтобы продолжить редактировать\n"+
   "текущую версию и затереть версию на сервере ");
   var now = Date.now;
   if (useit) {
   editor.value = localStorage.note = xhr.responseText;
   localStorage.lastSaved = now;
status("Загружена более новая версия.");
   }
   else
   status("Игнорируется более новая версия заметки.");
   localStorage.lastModified = now;
   }
   else
   status("Редактируется последняя версия заметки.");
   if (localStorage.lastModified > localStorage.lastSaved) {
   save;
   }
   editor.disabled = false; // Разрешить доступ к редактору
   editor.focus; // И поместить в него курсор ввода
   }
   }
   else { // В автономном режиме мы не можем синхронизироваться
   status("Невозможно синхронизироваться в автономном режиме");
   editor.disabled = false; editor.focus;
   }
  }

21 Работа с графикой и медиафайлами на стороне клиента

В этой главе рассказывается о том, как манипулировать изображениями, управлять аудио- и видеопотоками и рисовать графику. В разделе 21.1 описываются традиционные приемы реализации визуальных эффектов на языке JavaScript, таких как смена изображений, когда одно статическое изображение сменяется другим при наведении указателя мыши. В разделе 21.2 описываются элементы <audio> и <video>, определяемые стандартом HTML5, и их прикладные интерфейсы в языке JavaScript.

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

• Объем программного кода, создающего изображение на стороне клиента, обычно много меньше, чем объем самого изображения, что позволяет сберечь существенную долю полосы пропускания.

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

• Создание графики на стороне клиента прекрасно согласуется с положениями современной архитектуры веб-приложений, в которой серверы поставляют данные, а клиенты управляют представлением этих данных.

В разделе 21.3 описывается Scalable Vector Graphics, или SVG. SVG - это язык разметки, основанный на языке XML, предназначенный для описания графических изображений. Изображения на языке SVG можно создавать и изменять в сценариях на языке JavaScript с использованием модели DOM. В заключение в разделе 21.4 мы познакомимся с элементом <canvas>, определяемым стандартом HTML5, и его обширным прикладным интерфейсом на языке JavaScript, обеспечивающим возможность создания графических изображений. Элемент <canvas> является революционной технологией, и он подробно описан в этом разделе.

21.1. Работа с готовыми изображениями

Готовые изображения могут включаться в веб-страницы с помощью тега <img>. Подобно любому HTML-элементу, элементом <img> можно управлять: присваивание нового URL-адреса свойству sгс заставляет броузер загрузить (если необходимо) и отобразить новое изображение. (Кроме того, можно изменять ширину и высоту изображения, заставляя броузер увеличивать или уменьшать его, но этот прием здесь не рассматривается.)

Возможность динамической замены одного изображения другим в HTML-документе открывает доступ к некоторым специальным эффектам. На практике чаще всего прием смены изображений привязывается к наведению указателя мыши на изображение. Когда изображение размещается внутри гиперссылки, смена изображения становится приглашением пользователю щелкнуть на изображении. (Аналогичный эффект можно получить с помощью псевдокласса CSS :hover, позволяющего изменять фоновое изображение элемента.) Следующий фрагмент разметки HTML выводит изображение, которое изменяется при наведении на него указателя мыши:

  <img src="images/help.gif"
   onmouseover="this.src='images/help_rollover.gif'"
   onmouseout="this.src='images/help.gif'">

Обработчики событий в элементе <img> изменяют значение свойства src, когда указатель мыши наводится на изображение или покидает его границы. Эффект смены изображений отчетливо связывается с возможностью щелкнуть на изображении, поэтому такие элементы <img> следует заключать в элементы <а> или передавать обработчику события onclick.

Чтобы радовать глаз, эффект смены изображений (и родственные ему эффекты) должен иметь минимальное время отклика. Это означает, что необходим некоторый способ, гарантирующий предварительную загрузку всех необходимых изображений в кэш броузера. Для этой цели в клиентском JavaScript имеется специальный прикладной интерфейс: чтобы принудительно поместить изображение в кэш, нужно сначала создать объект Image с помощью конструктора Image. Затем, записав в свойство src требуемый URL-адрес, загрузить изображение. Это изображение не будет добавлено в документ, поэтому, хотя изображение будет невидимо, броузер загрузит его и поместит в свой кэш. Позднее, когда тот же URL-адрес будет использоваться для изменения изображения, находящегося на экране, изображение быстро загрузится из кэша броузера.