Java Script API: базы данных Web SQL

Все современные браузеры потихоньку обзаводятся возможностями того, что сейчас принято называть HTML 5. Это значит, что уже можно начинать знакомиться с этими нововведениями. Что мы и будем постепенно делать на страницах "КВ". Сегодня начнём это знакомство с Web SQL - интегрированной в браузер системой управления базами данных.

Стандарт и штандарт HTML 5

Про HTML 5 сейчас много говорят. Например, у главы Apple Стив Джобса HTML 5 - это самое любимое понятие, которое он постоянно упоминает к месту и не к месту.

Новые веб-стандарты - это действительно круто, но для начала нужно разложить по полочкам всё, что связано с HTML 5. Рискую получить от читателей обвинения в графомании, но лирическое вступление на тему веб-стандартов необходимо сделать.

В первую очередь, HTML 5 - это конкретный технический стандарт гипертекстовых документов, которые и составляют основу всей системы World Wide Web. Они представляют собой текстовые контейнеры информации, связанные между собой гиперссылками.

HTML - это обычный текст, который может просматриваться, анализироваться и обрабатываться любым текстовым инструментом, что делает Всемирную Паутину прозрачной семантической системой с наличием тех же поисковых сервисов.

Но HTML 5 - это сейчас не только технический стандарт текстовых документов, это ещё и то, что называется штандарт. То есть знамя, под которым сплотились и другие технологии. Конкретно это стандарт визуального форматирования CSS, формат векторной графики SVG, язык программирования JavaScript. Поэтому в большинстве случаев под HTML 5 понимается не конкретная техническая спецификация, а целый набор технологий.

Революция JavaScript

Об особенностях спецификации гипертекста HTML 5 мы уже писали ещё тогда, когда только появился первый черновик этого стандарта ("КВ" №4'2008). Теперь же обратимся к остальным технологиям и начнём со встраиваемого в браузер языка JavaScript.

Весьма распространено мнение среди многих дизайнеров, что именно сам HTML - это и есть язык программирования браузера. Таких дизайнеров легко узнать на форумах по утверждениям, что HTML устарел, не интерактивен, не даёт возможности попиксельного форматирования на мониторе и должен быть полностью заменён каким-нибудь C#.

Язык программирования браузера - это JavaScript. Первоначально браузеры были простыми и состояли только из парсера html-страниц и модуля вывода этих страниц на монитор. С течением времени к парсеру добавился программный интерфейс объектной модели документов DOM. Данный интерфейс представляет собой дерево объектов, в которое браузер превращает каждую html-страницу. Вот этим деревом DOM уже можно манипулировать. Для работы с интерфейсом DOM и был изобретён язык JavaScript.

Язык JavaScript стал самостоятельной технологией, не привязанной только к работе с DOM-деревьями. Он описывается отдельным стандартом ECMAScript и применяется не только в браузерах, а, например, используется в Adobe Photoshop.

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

Но браузеры крутеют. В них появляются всё новые и новые механизмы и возможности. И скоро они станут настоящими операционными системами. Кроме механизма DOM и AJAX, новые браузеры обзаведутся следующими технологическими фишками:

• встроенная система управления базами данных Web SQL Database;
• встроенный механизм хранения данных Local Storage;
• кэширование ресурсов веб-приложений Application Cache;
• параллельное вычисление Web Workers;
• технология обмена информацией между браузером и сервером Web Sockets;
• система уведомлений Notification;
• манипуляции с графическими объектами Drag and Drop;
• технология определения местоположения Geolocation;
• 2D-графика Canvas и 3D-графика WebGL.

И все эти внутренние механизмы браузера будут иметь свой собственный набор JavaScript API. Таким образом, если стандарт гипертекста HTML 5 - это эволюция, то развитие браузерного JS API - это настоящая революция, свидетелями которой мы сейчас являемся.

А теперь после такого внушительного вступления можно перейти к каждой из перечисленных технологических новинок. Начнём со встроенных в браузеры системой управления базами данных Web SQL Database.

"All your base are belong to us"

Последние версии некоторых современных браузеров содержат в себе встроенные системы управления базами данных. На момент написания этой статьи к браузерам, поддерживающим Web SQL, относятся Chrome, Safari и Opera. Установив один из этих веб-обозревателей, можно на практике опробовать работу встроенных баз данных.

Браузерные СУБД позволяют создавать и манипулировать базами данных путём стандартных SQL-запросов - CREATE TABLE, INSERT, SELECT, DROP и т.д. Интерфейс браузерных СУБД основан на интерфейсе легкой встраиваемой СУБД SQLite.

Но следует сказать, что использование SQLite - это не окончательный вариант, и устраивает не всех разработчиков браузеров. Вполне возможно, что со SQLite может произойти та же катавасия, что приключилась с поддержкой видео в стандарте HTML 5. Остаётся надеяться, что и здесь Google разберётся и наведёт порядок, как и в случае с кодеком VP8.

Наличие встроенных в браузер баз данных необходимо для разработки веб-приложений, работающих как онлайн, так и без подключения к Сети. Это одна из возможных замен технологии Gears, разрабатываемой ранее Google.

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

Каждый браузер создаёт для веб-приложения, использующего Web SQL Database, свою базу данных. И это следует учитывать. Поэтому для таких веб-приложений хороши, наверное, будут технологии виджетов Opera или же Adobe AIR.

API JavaScript Web SQL представляет набор прикладных программных интерфейсов для управления клиентской базой данных с помощью SQL. Или, другими словами, для доступа к встроенной СУБД используется "обёртка" из JavaScript вокруг SQL-запросов.

Создаём базу данных:

var db=openDatabase('my_base', '1.0', 'My BASE', 50000);

В результате будет создана база данных с именем 'my_base - это имя, 1.0 - версия текущей базы данных, My BASE - видимое имя, 51200 - количество байт для базы. Это число условный размер, и при необходимости он будет увеличиваться.

Создаём таблицу:

db.transaction(function (tx) {
 tx.executeSql ('CREATE TABLE my_table (id, data)');
});

Вставляем в таблицу данные:

db.transaction(function (tx) {
 tx.executeSql('INSERT INTO my_table (id, data) VALUES (1, 'my_data')');
});

Выбираем из таблицы значение столбца data:

db.transaction(function(tx) {
 tx.executeSql("SELECT * FROM my_table", [], function(tx, result) {
  for(var i = 0; i < result.rows.length; i++) {
   document.write('<p>' + result.rows.item(i)['data'] + '</p>');
}}, null)});

Но для управления встроенными базами данными можно воспользоваться и встроенной в браузер специальной консолью управления. Наиболее удобной такой консолью сейчас я бы назвал консоль в браузерах Chrome и Safari. Она находится в инструментах разработчика. В Chrome это "Управление текущей страницей - Разработчикам - Инструменты разработчика". В этих инструментах нужно перейти на вкладку Storage, и в левом меню Databases будут представлены все базы данных текущей веб-страницы или веб-приложения. Щёлкнув на треугольнике рядом с иконкой базы данных, можно развернуть список всех входящих в базу таблиц. А если щёлкнуть на самом значке базы данных, то главное окно инструментов разработчика превратится в консоль ввода SQL-запросов. И можно работать с базой данных через прямые запросы, не прибегая к JavaScript, что довольно удобно.

Заключение

Для публичных сайтов, сервисов и веб-приложений системой управления базами данных Web SQL ещё рановато пользоваться. Нет поддержки всеми браузерами, да и интерфейс ещё может поменяться.

А вот для личного употребления, для личных веб-приложений Web SQL вполне по желанию можно употреблять.

Михаил АСТАПЧИК