|
Добрый день. Я сейчас прохожу курс повышения квалификации - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?
|
Опубликован: 01.08.2012 | Уровень: для всех | Доступ: свободно | ВУЗ: Томский политехнический университет
Практическая работа 3:
HTML5. Хранение данных на стороне клиента
Шаг 3
Нами уже были перечислены необходимые функции. Рассмотрим подробнее создание каждой из них.
Сохранение новой записи:
function saveNote()
{
var name = document.getElementById('notename').value;
/* создание переменной, хранящей значение введенное в поле Наименование.*/
var content = document.getElementById('notecontent').value;
/* создание переменной для хранения текста самой записи*/
if(content == '')
{
alert('enter valid note text');
/* выводим предупреждающее сообщение, в случае, если не задан текст записи, см. рис. 4*/
}
else
{
if (name == 0)
{
alert('enter valid note name');
/* выводим предупреждающее сообщение, если не задано наименование записи, см. рис. 5*/
}
else {localStorage[name] = content;}
/* создание записи в localStorage, обратите внимание, что наименование
записи является идентификатором, по которому сможем извлечь текст записи*/
/*Также отметим, что если пользователь выберет уже существующую запись и введет
новый текст, без изменения наименования, то, по сути, произойдет редактирование
записи, поскольку новое значение текста сохранится поверх старого, соответственно,
если будет изменено наименование записи, то, фактически, произойдет создание новой*/
}
19.10.
Теперь, рассмотрим функцию формирования списка записей:
function listLoad()
{
var list = document.getElementById('notelist');
/* получаем доступ к элементу - списку нашей веб - страницы*/
for(var i in localStorage)
/* цикл для перебора каждого значения, сохраненного в localStorage,
при этом i, принимает значение идентификатора хранимых данных, т.е., в нашем
примере, переменная i содержит наименование записи*/
{
var a = document.createElement('a'); /* создаем новый html - */
a.setAttribute('onclick', "loadNote('"+i+"'); return false;");
/*определяем атрибут onclick, при клике, в нашем случае, вызовется функция
loadNote с параметром Наименования записи*/
a.innerText = i;
/* задаем значение текста ссылки эквивалентным наименованию записи*/
var element = document.createElement('li');
/* создаем новый html - элемент, а именно пункт списка*/
element.appendChild(a);
/* добавляем пункту списка дочерний элемент – ссылку*/
list.appendChild(element);
/* добавляем списку дочерний элемент – пункт списка*/
}
19.11.
В листинге 19.11 задаются параметры вызова функции загрузки записи по клику на ссылке, рассмотрим эту функцию:
function loadNote(v)
{
document.getElementById('notecontent').value = localStorage[v];
/*выводим в текстовое поле текст записи*/
document.getElementById('notename').value = v;
/* выводим в поле наименование записи*/
}
19.12.
Осталось только написать функцию для удаления записи из localStorage:
function deleteNote()
{
var name = document.getElementById('notename').value;
/*получаем значение наименования текущей записи из текстового поля*/
if (name != '')
{
localStorage.removeItem(name);
/*удаление записи, в качестве идентификатора записи используется ее наименование*/
}
else {alert('note not found');}
/* сообщение, выдаваемое при попытке удалить неопределенную запись*/
}
19.13.
Задание можно считать выполненным.
Результат выполнения заданий представлен на рисунках 19.6 - 19.9 .
С дополнительными материалами по теме можно ознакомиться в списке материалов для самостоятельного изучения "HTML5. Основы разметки" .





