НОУ ИНТУИТ | Перспективные языки веб-разработки. Лекция 9: Знакомство с технологией WebSQL

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный

|

Вам нравится? Нравится 44 студентам

| Поделиться |

Поддержать программу

Аннотация: В ходе выполнения данной работы учащиеся познакомятся с технологией локального хранения данных.

Ключевые слова: базы данных, приложение, пользователь

Примеры

Технология WebSQL позволяет хранить структурированные данные на клиентской машине. WebSQL основана на стандарте SQLite, который поддерживает многое из того, что вошло в стандарт SQL-92, хотя и с некоторыми ограничениями. В частности, существуют ограничения на размер базы данных, хранящейся на клиентской машине. В ходе выполнения данной работы учащиеся вначале создадут приложение, отображающее содержимое таблицы базы данных, потом разработают более сложное приложение, когда данные сможет вводить и удалять сам пользователь.

Пример 1 (sample_1) Простая база данных

В нашем первом примере мы создадим базу данных, состоящую из таблицы dream, заполним таблицу названиями сказок и главными героями и отобразим содержимое таблицы на экране.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web SQL</title>
<scripttype="text/javascript">
vardb = openDatabase('DataBaseSample', '1.0', 'My First Web DataBase', 5 * 1024 * 1024);
varmsg;
db.transaction(function (tx) {

tx.executeSql('DROP TABLE IF EXISTS dream');

tx.executeSql('CREATE TABLE IF NOT EXISTS dream (dream_id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
 dream_name, dream_person)');

tx.executeSql('INSERT INTO dream (dream_name, dream_person) 
VALUES ("Золотойключик", "Буратино")');
tx.executeSql('INSERT INTO dream (dream_name, dream_person) 
VALUES ("Чипполино", "КумТыква")');
tx.executeSql('INSERT INTO dream (dream_name, dream_person) 
VALUES ("Человек-горошина и Простак", "Турапутто")');

    });

db.transaction(function (tx) {
tx.executeSql('SELECT * FROM dream', [], function (tx, results) {

varlen = results.rows.length, i;
varstr = "";

for (i = 0; i<len; i++) {
str += "<p><b>" + results.rows.item(i).dream_name + " - " + 
results.rows.item(i).dream_person + "</b></p>";
            }
document.write(str);
        }, null);
    });
</script>

</head>
<body>
</body>
</html>

Пример 2 (sample_2)

Во втором примере таблицу с данными будет заполнять сам пользователь. Имеется возможность удалять введенные данные.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Образецбазыданных Web SQL</title>
<script>
//Открываем или создаем базу данных
vardb = openDatabase('biology', '1.0', 'Молекулярнаябиология', 5 * 1024 * 1024);


//Удаляембазуданных
db.transaction(function (tx) {
// tx.executeSql('DROP TABLE IF EXISTS Molecules');
      });

//Инициализируембазуданных
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Molecules(id integer primary key autoincrement, 
molname, moldescription, molfunction)');
      });

functionAddMolecule() {
varinputMoleculeName = document.getElementById("molname").value;
varinputMoleculeDescription = document.getElementById("moldescription").value;
varinputMoleculeFunction = document.getElementById("molfunction").value;

db.transaction(function (tx) {
tx.executeSql('INSERT INTO Molecules(molname,moldescription,molfunction) VALUES (?,?,?)', 
[inputMoleculeName, inputMoleculeDescription, 
inputMoleculeFunction], function (tx, results) {
//Создаемстроку и ееячейки
varMoleculeRaw = document.createElement("tr");
var id = document.createElement("td");
varmolname = document.createElement("td");
varmoldescription = document.createElement("td");
varmolfunction = document.createElement("td");
varremoveButton = document.createElement("td");
//Устанавливаем величины, получаемые из базы данных
id.textContent = results.insertId;
molname.textContent = inputMoleculeName;
moldescription.textContent = inputMoleculeDescription;
molfunction.textContent = inputMoleculeFunction;
removeButton.innerHTML = '<button onclick="RemoveMolecule(' + results.insertId + ')
">Удалитьмолекулу!</button>';
//Добавляемячейки в строку
MoleculeRaw.setAttribute("id", "c" + results.insertId);
MoleculeRaw.appendChild(id);
MoleculeRaw.appendChild(molname);
MoleculeRaw.appendChild(moldescription);
MoleculeRaw.appendChild(molfunction);
MoleculeRaw.appendChild(removeButton);
//Добавляемстроку в таблицу
document.getElementById("Molecules").appendChild(MoleculeRaw);
              });
          });
      }

functionRemoveMolecule(id) {
db.transaction(function (tx) {
tx.executeSql('DELETE FROM Molecules WHERE id=?', [id], function () {
//Динамическиудаляеммолекулыизтаблицы
varMoleculeTable = document.getElementById("Molecules");
varMoleculeToDelete = document.getElementById("c" + id);
MoleculeTable.removeChild(MoleculeToDelete);
              });
          });
      }

functionListOfMolecules() {
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM Molecules', [], function (tx, results) {
varlen = results.rows.length;
vari;
for (i = 0; i<len; i++) {
//Создаемстроку и ееячейки
varMoleculeRaw = document.createElement("tr");

varmolid = document.createElement("td");

varmolname = document.createElement("td");
varmoldescription = document.createElement("td");
varmolfunction = document.createElement("td");
varremoveButton = document.createElement("td");
//Устанавливаем значения, полученные из базы данных

molid.textContent = results.rows.item(i).id;

molname.textContent = results.rows.item(i).molname;
moldescription.textContent = results.rows.item(i).moldescription;
molfunction.textContent = results.rows.item(i).molfunction;
removeButton.innerHTML = '<button onclick="RemoveMolecule(' + results.rows.item(i).id + ')
">Удалитьмолекулу!</button>';
//Добавляемячейки в строку
MoleculeRaw.setAttribute("id", "c" + results.rows.item(i).id);

MoleculeRaw.appendChild(molid);

MoleculeRaw.appendChild(molname);
MoleculeRaw.appendChild(moldescription);
MoleculeRaw.appendChild(molfunction);
MoleculeRaw.appendChild(removeButton);
//Добавляемстроку в таблицу
document.getElementById("Molecules").appendChild(MoleculeRaw);
                  }
              });
          });
      }

window.addEventListener("load", ListOfMolecules, true);
</script>
</head>
<body>
<divid="container">
<sectionid="input">
<h1>Добавитьмолекулу</h1>

<tableborder="1"cellspacing="0">
<tr>
<td>Название молекулы:</td>
<td><inputtype="text"id="molname"/></td>
</tr>
<tr>
<td>Описание молекулы:</td>
<td><inputtype="text"id="moldescription"/></td>
</tr>
<tr>
<td>Функция молекулы:</td>
<td><inputtype="text"id="molfunction"/></td>
</tr>
</table>
<br/>

<buttononclick="AddMolecule()">Добавитьмолекулу!</button>
</section>
<sectionid="output">
<h1>Просмотрспискамолекул</h1>
<tableid="Molecules"border="1"cellspacing="0">
<td>Id</td>
<td>Название молекулы:</td>
<td>Описание молекулы:</td>
<td>Функция молекулы:</td>
<td>Удалить молекулу:</td>
</table>
</section>
</div>
</body>
</html>

увеличить изображение

Дальше >>

Перспективные языки веб-разработки

Перспективные языки веб-разработки

Знакомство с технологией WebSQL

Пример 1 (sample_1) Простая база данных

Пример 2 (sample_2)

Вопросы и ответы

Студенты

Авторизоваться

Перспективные языки веб-разработки

Перспективные языки веб-разработки

Знакомство с технологией WebSQL

Пример 1 (sample_1) Простая база данных

Пример 2 (sample_2)

Вопросы и ответы

Студенты