 Добрейший вечер дорогие мои читатели. Начну пожалуй с собственных мыслей. А именно мыслей касающихся ЮБлогов. Они внезапно вымерли, вместо интресных постов(которые ведь были раньше) пишутся тонны высеров, историй о походе в магазин или прочая чушь. Обидно, что один из очень интересных блоггеров АлматинскийПолубомж перестал писать. А вобщем лента забита всякого рода чушью которая изретка разрежается более-менее полезной информацией. У меня на посты времени в данный момент тоже не много, ибо я прохожу практику и вкалываю как проклятый. Но, к счастью, осталось совсем чуть-чуть, потом заслуженный отдых.
А теперь к делу, во второй части нашего экскурса в HTML5 я расскажу Вам о
клиентских базах данных, и SQL запросах, работающих с ними. Вообще хочу сказать что разработчики не скудятся на новшества и меня это радует. Теперь станет возможным очень удобно хранить данные на клиенте помимо веб-хранилища. Для начала работы с БД её нужно открывать, делается это с помощью такого кода: Code var db = window.openDatabase("Имя БД", "Версия", "Название базы", количество элементов); Эта понятная конструкция выполняет подключение к БД. Если же такой базы нет, то она создастся. А теперь самое интересное, как же выполнять запросы к базе? Конструкция выглядит так: Code db.transaction(function(tx) {
tx.executeSql("SELECT * FROM таблица", [], successCallback, errorCallback);
}); Существует метод transaction() (на самом деле есть еще и метод readTransaction(), и отличия у них в том что метод transaction() это чтение/запись, а второй только для чтения), который принимает аргументом функцию. tx является объектом транзакции(это просто переменная). Он имеет метод executeSql, принимающий 4 аргумента. О них чуть подробней: - это собственно сам sql запрос
- аргументы. в sql запросе они заменяются на вопросительные знаки "?". К примеру: "INSERT INTO TestTable (id, text) values(?, ?)", ["1", "привет"]. В этом случае первый "?" заменяется на 1, а поторой на "привет". Сделано это из соображений безопасности и еще чего-то, что я не очень разобрал на w3.org)
- функция, которая будет вызвана при удачном выполнении sql запроса
- функция, вызываемая при возникновении ошибки
Демку можно посмотреть тут. Что же к чему в коде? Для начала у нас есть данный HTML: Code <ul class="record-list" id="db_results"></ul> <div id="db-log"></div> <input type="text" id="textdata" /> <button onclick="newRecord()">новый элемент</button> <button onclick="createTable()">создать таблицу</button> <button onclick="deleteTable()">удалить таблицу</button> В "record-list" будут добовляться элементы в таблицу. "db-log" это блок, куда будут выводиться сервисные сообщения. Поле для ввода данных и 3 кнопки: для добовление новой записи "newRecord()", а также для создания и удаления таблицы. Code log=document.getElementById('db-log');</p> function createTable() { dbname=prompt ("Введите имя базы", "db1"); db.transaction(function(t) { t.executeSql("CREATE TABLE "+dbname+" (id REAL UNIQUE, text TEXT)", [], function(t) {log.innerHTML = '<p>Вы успешно создали таблицу "'+dbname+'"</p>'; }, onError ); }); } Это функция создания новой базы. Имя можно ввести любое(кроме чисел, оно кидает ошибку). t является объектом транзакции. В таблице поля "id" и "text". onError представляет собой обработчик объекта ошибки, выглядит он так: Code function onError(t, error){alert(error.message);} Далее неплохо было бы уметь что-то добавить в нашу таблицу. Для этого есть функция "newRecord()" Code function newRecord() {
var data=Math.round(Math.random()*1000);
db.transaction(function(t) {
t.executeSql("INSERT INTO "+dbname+" (id, text) VALUES (?, ?)", [data, document.querySelector ('#textdata').value],
function(t) {log.innerHTML='Данные внесены в таблицу'+dbname; showRecords(); },
onError
);
});
}
На экран внесенные данные отображаются с помощью функции "showRecords()". Она достаточно интересна и заслуживает разбора: Code function showRecords() {
document.getElementById('db_results').innerHTML = '';
db.transaction(function(t) {
t.executeSql("SELECT * FROM "+dbname, [],
function(t, result) {
for(var i=0; i<result.rows.length; i++) {
item=result.rows.item(i);
document.getElementById('db_results').innerHTML+='<span>'+item['text']+'</span><span class="deleteMess" onclick="deleteRecord('+item['id']+')"><strong>[Удалить запись]</strong></span></br>';
}
})
});
}
Тут мы видим, что функции обработки передается 2 аргумента. первый- объект транзакции, а второй- это результат выборки. Результат представляет собой набор строк. К строке можно обратиться по индексу "result.rows.item(i);". А к значению можно добраться через имя поля "result.rows.item(i)['text']". В ходе вывода значения также добовляется надпись "Удалить запись" которая удалит значение с текущим "id". Запись удаляется по "id" такой функцией: Code function deleteRecord(id) {
db.transaction(function(t) {
t.executeSql("DELETE FROM "+dbname+" WHERE id=?",[id],
showRecords(),
onError
)
});
}
А для удаление таблицы приготовлено следующее: Code function deleteTable() { delname=prompt ("Введите имя базы для удаления", ""); db.transaction(function(t) { t.executeSql("DROP TABLE "+delname, [], function(t) { log.innerHTML = '<p>Таблица '+delname+' удалена</p>'; showRecords(); }, onError ); }); } Как видно, мы удаляем таблицу по её имени. В демке с хотел реализовать через localstorage сохранение созданных таблиц с целью их удобного удаления(чтобы не забыть), но поджимали сроки и я оставил эту затею) Вообще, тут все интуитивно достаточно понятно, хотя и достаточно сложно виртуализировать таблицу которую не видишь. Надеюсь что Вам это будет интересно. В следующем посте я напишу о кэш апи, а может и о чем-нибудь еще. Подписывайтесь на рассылку и не пропустите ничего интересного. Постовой: Пишу о Seo и как заработать в интернете. Способы заработка на сайтах ucoz . | 
