|
Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново? |
Инспектор
Вы можете этот курс.
Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный
Практическая работа 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 >
Александр Лобанов
