Фоновые вычисления

Фоновые вычисления (http://bit..ly/9jheof) — введенный в HTML5 стандартный способ запуска JavaScript в браузере в фоновом режиме. Механизм фоновых вычислений позволяет иметь несколько «процессов», процедуры которых выполняются более или менее одновременно (чтобы понять, как это происходит, подумайте об одновременной работе большого количества приложений в вашем компьютере). Эти фоновые «потоки» могут выполнять сложные математические расчеты, запрашивать о чем-либо сеть или локальное хранилище, в то время как отображаемая в браузере страница будет реагировать на действия пользователя: щелчки кнопкой мыши, прокрутку, клавиатурный ввод.

Протестировать поддержку фоновых вычислений можно способом 1 (см. раздел «Способы тестирования браузера» этой главы). Если в вашем браузере поддерживается соответствующий интерфейс (Web Worker API), то для глобального объекта window будет определено свойство Worker. Соответственно, если поддержки API фоновых вычислений в браузере нет, то свойство тоже не будет определено. Проверить поможет такая функция:

function supports_web_workers() { return !!window.Worker;

}

Чтобынеписатьсобственнуюфункцию,прибегнитек помощиModernizr(см.раздел «Modernizr: библиотека для тестирования HTML5-функций» этой главы):

if (Modernizr.webworkers) {

//фоновые вычисления доступны!

}else {

//встроенной поддержки фоновых вычислений нет,

//стоит попробовать Gears или иное стороннее решение

Помните, что JavaScript чувствителен к регистру. Атрибут объекта Modernizr называется webworkers (все буквы строчные), а DOM-объект — window.Worker (буква W прописная).

Офлайновые веб-приложения

Читать статические веб-страницы, отключившись от Сети, очень просто: достаточно зайти в Интернет, загрузить страницу, потом выйти из Интернета, уехать с ноутбуком к себе на дачу и там в тишине наслаждаться чтением. (Шутка. На дачу можно не ехать.) С офлайновым режимом у таких веб-приложений, как Gmail и Google Docs, дело обстояло сложнее. Но теперь благодаря возможностям HTML5 создать веб-приложение, работающее в режиме офлайн, может каждый из нас, а не только компания Google.

Такое приложение берет начало в онлайне. При первом посещении сайта, который может отображаться локально, веб-сервер сообщит вашему браузеру, какие

файлы надо загрузить, чтобы сайт работал без подключения к Сети. Это могут быть абсолютнолюбыефайлы:HTML,JavaScript,картинкии дажевидеоролики(см. раздел «Видео» этой главы). После того как браузер загрузит все необходимые файлы, вы сможете открывать тот же сайт, отключившись от Интернета: браузер, видя, что сетевое подключение недоступно, будет пользоваться предварительно загруженными файлами. Перейдя в режим онлайн, вы сумеете передать на сервер измененные вами данные.

Протестироватьподдержкуофлайновыхприложенийможноспособом1(см. раздел «Способы тестирования браузера» этой главы). Если ваш браузер поддерживает их, то для глобального объекта window будет определено свойство applica­ tionCache. Соответственно, если поддержки офлайновых приложений в браузере нет, то свойство тоже не будет определено. Проверить это поможет такая функция:

function supports_offline() { return !!window.applicationCache;

}

Чтобы не писать собственную функцию, прибегните к помощи Modernizr: if (Modernizr.applicationcache) {

//офлайновые приложения доступны!

}else {

//встроенной поддержки офлайновых приложений нет,

//стоит попробовать Gears или иное стороннее решение

Помните, что JavaScript чувствителен к регистру. Атрибут объекта Modernizr называется applicationcache (все буквы строчные), а DOM-объект — window. applicationCache (буква C прописная).

Геолокация

Геолокация — это вид деятельности, позволяющий определять координаты своего местонахождениявмиреиприжеланииделитьсяимисдрузьями.Координатыможно определить несколькими способами: по IP-адресу, через подключение к беспроводномуИнтернету,черезретрансляторсотовойсети,насвязис которымнаходится ваш телефон, или с помощью особого GPS-аппарата, принимающего спутниковые данные о широте и долготе.

Разметка в вопросах и ответах

Протестировать поддержку геолокации можно способом 1 (см. раздел «Способы тестирования браузера» этой главы). Если ваш браузер поддерживает API геолокации, то для глобального объекта navigator будет определено свойство geolocation. Соответственно, если поддержки геолокации в браузере нет, то свойство тоже не будет определено. Проверить поможет следующая функция:

function supports_geolocation() { return !!navigator.geolocation;

}

Чтобынеписатьсобственнуюфункцию,прибегнитек помощиModernizr(см.раздел «Modernizr: библиотека для тестирования HTML5-функций» данной главы):

if (Modernizr.geolocation) {

//определим ваши координаты!

}else {

//встроенной поддержки геолокации нет,

//стоит попробовать Gears или иное стороннее решение

Если «родная» поддержка API геолокации в вашем браузере отсутствует, не надо отчаиваться. Gears (http://tools..google..com/gears/) — разработанное Google

браузерное расширение с открытым исходным кодом, функционирующее на плат-

формах Windows, Mac, Linux, Windows Mobile и Android, — эмулирует в старых браузерах отдельные новые функции, о которых рассказано в этой главе. В частности, Gears предлагает API геолокации. Этот интерфейс отличается от стандартного navigator.geolocation, но служит тем же целям.

Собственные API геолокации есть также на некоторых мобильных платформах, в том числе BlackBerry, Nokia, Palm и OMTP BONDI. Как пользоваться всеми этими столь несхожими прикладными интерфейсами, будет подробно рассказано в главе 6.

Типы полей ввода

Вы знаете о веб-формах все, не так ли? Действительно, чего там сложного: создать контейнер <form>, добавить несколько полей <input type="text">, возможно, одно <input type="password"> и увенчать конструкцию великолепной кнопкой <input type="submit">.

Увы, это лишь незначительная часть всех современных функций. В HTML5 появилось больше десятка новых типов полей ввода, которые теперь можно использовать в формах.

<input type="search"> — поисковая форма (http://bit..ly/9mQt5C).<input type="number"> — форма выбора числа (http://bit..ly/aPZHjD).<input type="range"> — ползунок (http://bit..ly/dmLiRr).

<input type="color"> — форма выбора цвета (http://bit..ly/bwRcMO).<input type="tel"> — телефонный номер (http://bit..ly/amkWLq).<input type="url"> — интернет-адрес (http://bit..ly/cjKb3a).

дел «Способы тестирования браузера» этой главы). Сначала создадим в памяти пустой тег <input>:

var i = document.createElement("input");

По умолчанию каждое поле ввода имеет тип "text"; впоследствии это окажется очень важным.

Теперь присвоим атрибуту type пустого тега <input> значение, соответствующее типу, поддержку которого мы тестируем, например:

i.setAttribute("type", "color");

Если ваш браузер умеет работать с данным типом полей ввода, то в атрибуте type будет и далее сохраняться установленное вами значение. Если нет, то новое значение будет проигнорировано и при запросе система возвратит "text":

return i.type !== "text";

Чтобы не писать самостоятельно 13 разных функций, которые бы тестировали поддержку HTML5-типов полей ввода, можно, как и в остальных случаях, воспользоваться Modernizr. В целях эффективности при тестировании всех 13 новых типов Modernizr обходится всего одним тегом <input>. На выходе получаем хеш Modernizr.inputtypes с 13 ключами (HTML5-типы полей ввода) и 13 булевыми значениями (есть поддержка — true, нет поддержки — false):

if (!Modernizr.inputtypes.date) {

//встроенной поддержки <input type="date"> нет,

//можно попробовать решить проблему с помощью Dojo или jQueryUI

}

Подсказывающий текст

Кроме новых типов полей ввода, HTML5 предусматривает несколько мелких дополнений к существующей системе веб-форм. Одно из них предполагает возможность назначать для всех полей ввода «подсказывающий» текст, который отображается внутри поля до тех пор, пока оно пусто и не несет фокуса. Как только пользователь щелкнет на нем или перейдет к нему с помощью табулятора, подсказывающий текст исчезнет. Если по этому описанию вам трудно представить, о чем идет речь, см. рис. 9.1.