32. Особенности хранения данных с помощью WebSql. Метод executeSql(). Организация табличного хранения данных. Внесение и удаление данных из таблиц.

Web SQL

Создание/открытие БД:

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);

Успешность подключения к БД:

if(!db){alert("Failed to connect to database.");}

Выполнение запросов.

Для выполнения запросов к БД надо создать транзакцию, вызвав функцию database.transaction(). У неё один аргумент, а именно другая JS функция, принимающая объект транзакции и предпринимающая запросы к БД.

Сам SQL запрос можно выполнить, вызвав функцию executeSql объекта транзакции. Она принимает 4 аргумента:

• строка SQL запроса

• массив параметров запроса (параметры подставляются на место вопросительных знаков в SQL запросе)

• функция, вызываемая при успешном выполнении запроса

• функция, вызываемая в случае возникновения ошибки выполнения запроса

Пример работы функции executeSql ниже:

db.transaction(function(tx) {

tx.executeSql("SELECT COUNT(*) FROM ToDo", [], function(result){}, function(tx, error){}); });

Вставка данных:

db.transaction(function(tx) {

tx.executeSql("INSERT INTO ToDo (label, timestamp) values(?, ?)", ["Купить iPad или HP Slate", new Date().getTime()], null, null); });

Вы можете получить доступ к какой-либо строке результата вызвав функцию result.rows.item(i), где i – индекс строки. Далее, для получения требуемого значения, нужно обратиться к конкретному столбцу по имени – result.rows.item(i)[ «label»].

db.transaction(function(tx) {

tx.executeSql("SELECT * FROM ToDo", [], function(tx, result) { for(var i = 0; i < result.rows.length; i++) {

document.write('<b>' + result.rows.item(i)['label'] + '</b><br />'); }}, null)});

Вставка данных:

db.transaction(function(tx) {

tx.executeSql("INSERT INTO Subscribers VALUES (" + id + ", '" + surname + "', " + number + ", '" + address + "', " + debts + ")", [], function(result) {

alert("Абонент добавлен");

}, function(tx, error){

alert(error.message);

});

Удаление данных

db.transaction(function(tx) {

tx.executeSql("DELETE FROM Subscribers WHERE id="+id_group, [], function(result) {

alert("Абонент удален");

}, function(tx, error){

alert(error.message); });});

33. Преимущества и механизм использования шаблонизаторов в JS (Mustache\Handlebars, EJS, Jade). Генерация HTML-структуры с помощью шаблонизатора Mustache.js.

Шаблонизатор – приложение, осуществляющее обработку шаблона.

Плюсы:

• Четкое разделение данных и представление этих данных;

• Можно использовать на серверной стороне, а также скомпилировать в js-код и отрисовывать в браузере данные, стянутые с помощью AJAX;

• Приятно работать с одним шаблонизатором в разных проектах, на разных платформах;

Минусы:

• Вынуждает городить отдельные модули для какой-то мелкой фигни;

• Если код шаблона содержится прямо в коде html-странице, сделает её не валидной, и многие редакторы кода будут ругаться и плохо работать с кодом таких шаблонов.

Для использования mustache.to_html(shablon, data1) необходимо подключить библиотеку mustache на рабочую html-страницу.

Пример:

$('#but1').on('click', function(){

var shablon =

"<tr><td>{{name}}</td><td>{{depart}}</td><td>{{dols}}</td><td>{{zarpl}}</td></tr>"; //Шаблон

var data1 = { //данные для заполнения шаблона

name: "Николай",

depart: "Отдел №1",

dols: "Дворник",

zarpl: function(){

var tariff = $("[name = employee]:eq(0) > #tariff").val();

var econom = $("[name = employee]:eq(0) > #econom").val();

var nadbav = $("[name = employee]:eq(0) > #nadbav").val();

var slozn = $("[name = employee]:eq(0) > #sloz").val();

return count_slozn.count(count_nadbav.count(count_econom.count(count_tariff.count(292000, tariff), econom), nadbav), slozn);} };

var insert = mustache.to_html(shablon, data1); //Формирование html на основании шаблона и данных

$('#insert').append(insert); //Вставка html-кода на страницу });