Спонсор: Microsoft
Опубликован: 29.08.2012 | Доступ: свободный | Студентов: 2114 / 187 | Длительность: 08:05:00
Практическая работа 9:

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

< Практическая работа 8 || Практическая работа 9 || Лекция 6 >
Аннотация: В ходе выполнения данной работы учащиеся познакомятся с технологией локального хранения данных.

Примеры

Технология 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>
    
< Практическая работа 8 || Практическая работа 9 || Лекция 6 >
Александр Лобанов
Александр Лобанов

Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново?

Наталья Алмаева
Наталья Алмаева
Россия
Вадим Барков
Вадим Барков
Украина, Киев