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

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

на обложку

Флэнаган Дэвид

Шрифт:

var xhr = new XMLHttpRequest;

xhr.open("PUT", "/note");

xhr.send(editor.value);

xhr.onload = function {

localStorage.lastSaved = Date.now;

savebutton.disabled = true;

};

}

//

Проверяет наличие новой версии заметки на сервере. Если она отсутствует,

// сохраняет текущую версию на сервере.

function sync {

if (navigator.onLine) {

var xhr = new XMLHttpRequest;

xhr.open("GET", "/note");

xhr.send;

xhr.onload = function {

var remoteModTime = 0;

if (xhr.status == 200) {

var remoteModTime = xhr.getResponseHeader("Last-Modified");

remoteModTime = new Date(remoteModTime).getTime;

}

if (remoteModTime > localStorage.lastModified) {

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.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> является революционной технологией, и он подробно описан в этом разделе.