www/css/index.css (полностью удалите старое содержимое) новыми правилами, содержащими селекторы body, h1, h2, h3, button, checkbox:
body {
background-color:#fbf7e4;
font-family:Verdana, Geneva, sans-serif;
margin-left:20px;
color:#8e001c;
}
h1 {
background-color:#8E001C;
color:#e7e8d1;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;
}
h2 {
background-color:black;
color:white;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:5px;
}
h3
{
background-color:black;
color:white;
font-family:"Trebuchet MS", Calibri, Helvetica, sans-serif;
text-align:right;
}
#button {
height: 50px;
width: 150px;
}
#checkbox {
height: 50px;
width: 50px;
}
img добавьте три небольших изображения, которые потребуются для оформления создаваемой для заказа товаров страницы:
Новое содержимое обозревателя решений с добавленными изображениями:
index.html (полностью удалите старое содержимое) новым кодом разметки, содержащим элемент <style> для связи с созданной таблицей стилей index.css, а также теги <body>, <h1>, <h2> и <h3>, соответствующие правилам таблицы стилей. Новый код разметки страницы index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Shop</title>
</head>
<body>
<h1> Простейший магазин</h1>
<h2>
<img src="img/tab.jpg" width="20" height="20"> <a href="Product.html"> Список товаров</a><br>
<img src="img/tel.jpg" width="20" height="20"><a href="Basket.html"> Корзина</a><br>
<img src="img/za.jpg" width="20" height="20"> <a href="Like.html"> Заказы</a><br>
</h2>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Приведенная разметка содержит обращения к трем, пока отсутствующим, страницам: Product.html, Basket.html и Like.html. Ее можно протестировать пока без этих страниц. Скриншот запуска приложения на мобильном устройстве Windows Phone:
www три новые страницы, соответствующие гиперссылкам "Список товаров", "Корзина", "Заказы":www/js проекта два (пока пустых) JS файла, назовите их localStorage.js и sessionStorage.js. Первый будет содержать код для работы с localStorage, второй - для работы с sessionStorage:
localStorage.js. Содержимое JS-файла localStorage.js:
function resolveForm() {
this.countVal = "";
this.topCount = document.checkRadio.length;
for (var count = 0; count < this.topCount; count++)
if (document.checkRadio.elements[count].checked) {
this.countVal = document.checkRadio.elements[count].value;
var k = localStorage.getItem(this.countVal);
localStorage.setItem(this.countVal, k)
}
document.checkRadio.outNow.value = this.countVal;
}
function show() {
var databox = document.getElementById('databox');
databox.innerHTML = '<div><input type=button id="button"
name=delAll value="Очистить" onClick="removeAll()"></button></div>';
databox.innerHTML += '<div><input type=button id="button"
name=del value="Удалить товары" onClick="remove()"></button></div>';
for (var f = 0; f < localStorage.length; f++) {
var keyword = localStorage.key(f);
databox.innerHTML += '<div><br><input type="checkbox" id="checkbox"
value="' + keyword + '">' + keyword + '</button></div>';
}
}
function remove() {
this.countVal = "";
this.topCount = document.checkRadio.length;
for (var count = 0; count < this.topCount; count++)
if (document.checkRadio.elements[count].checked) {
this.countVal = document.checkRadio.elements[count].value;
localStorage.removeItem(this.countVal);
}
show();
}
function removeAll() {
if (confirm('Вы уверены?')) {
localStorage.clear(); show();
}
}
Далее приводится назначение функций из файла localStorage.js.
resolveForm() - сохраняет в localStorage данные, выбранные с помощью checkBox; назначение входящих в нее компонент:this.countVal = "" - пустая строка;
this.topCount = document.checkRadio.length - количество флажков checkBox на странице;
for (var count = 0; count < this.topCount; count++) - цикл просмотра флажков checkBox;
if (document.checkRadio.elements[count].checked) - анализ выбора checkBox;
localStorage.setItem(this.countVal, k) - сохранение выбранных значений в localStorage;
this.countVal - ключ сохраняемых данных;
document.checkRadio.outNow.value = this.countVal - сбрасывание всех флажков checkBox.show() - выводит содержимое localStorage; назначение входящих в нее компонент:var databox = document.getElementById('databox') - данные будут выводится в объекте databox с именем databox.
databox.innerHTML = '<div><input type=button name=delAll value="Очистить" onClick="removeAll()"></button></div>' - вставка кнопки "Очистить" со ссылкой на функцию
removeAll;
databox.innerHTML += '<div><input type=button name=del value="Удалить товары" onClick="remove()"></button></div>' - вставка кнопки "Удалить товары" со ссылкой на функцию remove().
var keyword = localStorage.key(f) - ключ данных;
databox.innerHTML += '<div><br><input type=checkbox value="' + keyword + '">'+keyword+'</button></div>' - вывод элементов из localStorage с добавлением к ним флажков checkBox.remove() - удаляет указанный элемент по ключу this.countVal.www. Код страницы:
<html lang="ru">
<head>
<script type="text/javascript" src="js/LocalStorage.js"> </script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List</title>
</head>
<body>
<article>
<header>
<h3> <img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a>
<img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> Заказы</a><br></h3>
<h1> Список товаров</h1>
</header>
<div id="dataEntry">
<div id="lang">
<section>
<h2>Notebook</h2>
<form name=checkRadio>
<label>
<input type= "checkbox" id="checkbox" name=Ap15 value="Apple MacBook Pro 15,
Core i7(2,8 MGh), NVIDIA GeForce GT 650M,..." >
Apple MacBook Pro 15, Core i7(2,8 MGh), NVIDIA GeForce GT 650M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=Le value="Lenovo G780,
Core i5(2,3 MGh), NVIDIA GeForce GT 635M,...">
Lenovo G780, Core i5(2,3 MGh), NVIDIA GeForce GT 635M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=AV value="ASUS VivoBook S400CA,
Core i7(1,9 MGh), Intel HD Graphics 4000,...">
ASUS VivoBook S400CA, Core i7(1,9 MGh), Intel HD Graphics 4000,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=HP value="HP PAVILION 15-n054,
Core i3(1,8 MGh), AMD Radeon HD 8670M,...">
HP PAVILION 15-n054, Core i3(1,8 MGh), AMD Radeon HD 8670M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=Ap13 value="Apple MacBook Pro 13,
Core i7(2,9 Mgh), Intel HD Graphics 4000,...">
Apple MacBook Pro 13, Core i7(2,9 Mgh), Intel HD Graphics 4000,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=AN value="ASUS N550JV,
Core i7(2,4 MGh), NVIDIA GeForce GT 750M,...">
ASUS N550JV, Core i7(2,4 MGh), NVIDIA GeForce GT 750M,...</label>
<hr color="blue">
</form>
</section>
</div>
</div>
<section>
</section>
<p>
<input type= "button" id="button" name=getEm value="Поместить в корзину" onClick="resolveForm()">
</article>
</body>
</html>
Пояснения к разметке:
<img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a>
<img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> - переход на другие страницы
<form name=checkRadio> - Задание формы откуда будет считываться количество checkBox
<input type=button name=getEm value="Поместить в корзину" onClick="resolveForm()"> - Помещение в localStorage выбранных элементов.Результат запуска страницы Product.html на мобильном устройстве Windows Phone:
После нажатия кнопки наши выбранные результаты поместятся в localStorage:
<h3><img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> Заказы</a>
<img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a><br></h3>
<h1> Корзина товаров</h1>
</header>
<div id="lang">
<section>
<div>
<p>
<input type="button" id="button" name=getEm value="Ваша корзина" onClick="show()">
</p>
</div>
</section>
</div>
<form name=checkRadio>
<h2>Ваши покупки:</h2>
<section id = "databox"> </section> <br />
</form>
</article>
</body>
</html>
Результат запуска страницы Basket.html:
Результат нажатия кнопки "Ваша корзина":
Следует отметить, что после нажатия кнопки, в элементе databox отобразилось всё содержимое localStorage.
Удалим элемент из localStorage. Для этого выберем элемент "Apple MacBook Pro 15, Core i7(2,8 MGh), NVIDIA GeForce GT 650M,.." и нажмём кнопку "Удалить товар". Результат тестирования данной страницы:
Для очищения localStorage воспользуемся кнопкой "Удалить товары". Результат тестирования:
sessionStorage.js следующим кодом JavaScript:
function initiate() {
var button = document.getElementById('button');
button.addEventListener('click', newitem, false);
show();
}
function newitem() {
var keyword = document.getElementById('keyword').value;
var value = document.getElementById('text').value;
sessionStorage.setItem(keyword, value);
show();
document.getElementById('keyword').value = '';
document.getElementById('text').value = '';
}
function show() {
var databox = document.getElementById('databox');
databox.innerHTML ='' ;
for (var f = 0; f < sessionStorage.length; f++) {
var keyword = sessionStorage.key(f);
var value = sessionStorage.getItem(keyword);
databox.innerHTML += '<div>' + keyword + ' - ' + value + '</div>';
}
}
window.addEventListener('load', initiate, false);
По содержанию созданный sessionStorage.js подобен localStorage.js.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Like</title> <link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/sessionStorage.js"></script>
</head>
<body>
<h3> <img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a>
<img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a><br></h3>
<section id="formbox">
<form name="form">
<p>Фирма производитель:</p>
<p><input type="text" name="keyword" id="keyword"></p>
<p>Характеристики:<br /><input type ="text" name="text" id="text" ></p>
<p><input type ="button" id ="button" name ="button" value="Отправить"/></p><br />
</form>
<h2>Мои заказы:</h2>
<section id = "databox"> Мои заказы: </section> <br />
</section>
</body>
</html>
В приведенном коде используются средства работы с временной памятью мобильного устройства из sessionStorage.js.
Вводимые пользователем данные (фирма, характеристики) сохраняются в sessionStorage и сразу выводятся в поле databox страницы.
Результаты запуска страницы Like.html:
Результат нажатия кнопки "Отправить":

www/css/index.css (полностью удалите старое содержимое) новыми правилами, содержащими селекторы body, h1, h2, h3, button, checkbox:
body {
background-color:#fbf7e4;
font-family:Verdana, Geneva, sans-serif;
margin-left:20px;
color:#8e001c;
}
h1 {
background-color:#8E001C;
color:#e7e8d1;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;
}
h2 {
background-color:black;
color:white;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:5px;
}
h3
{
background-color:black;
color:white;
font-family:"Trebuchet MS", Calibri, Helvetica, sans-serif;
text-align:right;
}
#button {
height: 50px;
width: 150px;
}
#checkbox {
height: 50px;
width: 50px;
}
img добавьте три небольших изображения, которые потребуются для оформления создаваемой для заказа товаров страницы:
Новое содержимое обозревателя решений с добавленными изображениями:
index.html (полностью удалите старое содержимое) новым кодом разметки, содержащим элемент <style> для связи с созданной таблицей стилей index.css, а также теги <body>, <h1>, <h2> и <h3>, соответствующие правилам таблицы стилей. Новый код разметки страницы index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Shop</title>
</head>
<body>
<h1> Простейший магазин</h1>
<h2>
<img src="img/tab.jpg" width="20" height="20"> <a href="Product.html"> Список товаров</a><br>
<img src="img/tel.jpg" width="20" height="20"><a href="Basket.html"> Корзина</a><br>
<img src="img/za.jpg" width="20" height="20"> <a href="Like.html"> Заказы</a><br>
</h2>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Приведенная разметка содержит обращения к трем, пока отсутствующим, страницам: Product.html, Basket.html и Like.html. Ее можно протестировать пока без этих страниц. Скриншот запуска приложения на мобильном устройстве Windows Phone:
www три новые страницы, соответствующие гиперссылкам "Список товаров", "Корзина", "Заказы":www/js проекта два (пока пустых) JS файла, назовите их localStorage.js и sessionStorage.js. Первый будет содержать код для работы с localStorage, второй - для работы с sessionStorage:
localStorage.js. Содержимое JS-файла localStorage.js:
function resolveForm() {
this.countVal = "";
this.topCount = document.checkRadio.length;
for (var count = 0; count < this.topCount; count++)
if (document.checkRadio.elements[count].checked) {
this.countVal = document.checkRadio.elements[count].value;
var k = localStorage.getItem(this.countVal);
localStorage.setItem(this.countVal, k)
}
document.checkRadio.outNow.value = this.countVal;
}
function show() {
var databox = document.getElementById('databox');
databox.innerHTML = '<div><input type=button id="button"
name=delAll value="Очистить" onClick="removeAll()"></button></div>';
databox.innerHTML += '<div><input type=button id="button"
name=del value="Удалить товары" onClick="remove()"></button></div>';
for (var f = 0; f < localStorage.length; f++) {
var keyword = localStorage.key(f);
databox.innerHTML += '<div><br><input type="checkbox" id="checkbox"
value="' + keyword + '">' + keyword + '</button></div>';
}
}
function remove() {
this.countVal = "";
this.topCount = document.checkRadio.length;
for (var count = 0; count < this.topCount; count++)
if (document.checkRadio.elements[count].checked) {
this.countVal = document.checkRadio.elements[count].value;
localStorage.removeItem(this.countVal);
}
show();
}
function removeAll() {
if (confirm('Вы уверены?')) {
localStorage.clear(); show();
}
}
Далее приводится назначение функций из файла localStorage.js.
resolveForm() - сохраняет в localStorage данные, выбранные с помощью checkBox; назначение входящих в нее компонент:this.countVal = "" - пустая строка;
this.topCount = document.checkRadio.length - количество флажков checkBox на странице;
for (var count = 0; count < this.topCount; count++) - цикл просмотра флажков checkBox;
if (document.checkRadio.elements[count].checked) - анализ выбора checkBox;
localStorage.setItem(this.countVal, k) - сохранение выбранных значений в localStorage;
this.countVal - ключ сохраняемых данных;
document.checkRadio.outNow.value = this.countVal - сбрасывание всех флажков checkBox.show() - выводит содержимое localStorage; назначение входящих в нее компонент:var databox = document.getElementById('databox') - данные будут выводится в объекте databox с именем databox.
databox.innerHTML = '<div><input type=button name=delAll value="Очистить" onClick="removeAll()"></button></div>' - вставка кнопки "Очистить" со ссылкой на функцию
removeAll;
databox.innerHTML += '<div><input type=button name=del value="Удалить товары" onClick="remove()"></button></div>' - вставка кнопки "Удалить товары" со ссылкой на функцию remove().
var keyword = localStorage.key(f) - ключ данных;
databox.innerHTML += '<div><br><input type=checkbox value="' + keyword + '">'+keyword+'</button></div>' - вывод элементов из localStorage с добавлением к ним флажков checkBox.remove() - удаляет указанный элемент по ключу this.countVal.www. Код страницы:
<html lang="ru">
<head>
<script type="text/javascript" src="js/LocalStorage.js"> </script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List</title>
</head>
<body>
<article>
<header>
<h3> <img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a>
<img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> Заказы</a><br></h3>
<h1> Список товаров</h1>
</header>
<div id="dataEntry">
<div id="lang">
<section>
<h2>Notebook</h2>
<form name=checkRadio>
<label>
<input type= "checkbox" id="checkbox" name=Ap15 value="Apple MacBook Pro 15,
Core i7(2,8 MGh), NVIDIA GeForce GT 650M,..." >
Apple MacBook Pro 15, Core i7(2,8 MGh), NVIDIA GeForce GT 650M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=Le value="Lenovo G780,
Core i5(2,3 MGh), NVIDIA GeForce GT 635M,...">
Lenovo G780, Core i5(2,3 MGh), NVIDIA GeForce GT 635M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=AV value="ASUS VivoBook S400CA,
Core i7(1,9 MGh), Intel HD Graphics 4000,...">
ASUS VivoBook S400CA, Core i7(1,9 MGh), Intel HD Graphics 4000,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=HP value="HP PAVILION 15-n054,
Core i3(1,8 MGh), AMD Radeon HD 8670M,...">
HP PAVILION 15-n054, Core i3(1,8 MGh), AMD Radeon HD 8670M,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=Ap13 value="Apple MacBook Pro 13,
Core i7(2,9 Mgh), Intel HD Graphics 4000,...">
Apple MacBook Pro 13, Core i7(2,9 Mgh), Intel HD Graphics 4000,...</label><br>
<hr color="blue">
<label>
<input type= "checkbox" id="checkbox" name=AN value="ASUS N550JV,
Core i7(2,4 MGh), NVIDIA GeForce GT 750M,...">
ASUS N550JV, Core i7(2,4 MGh), NVIDIA GeForce GT 750M,...</label>
<hr color="blue">
</form>
</section>
</div>
</div>
<section>
</section>
<p>
<input type= "button" id="button" name=getEm value="Поместить в корзину" onClick="resolveForm()">
</article>
</body>
</html>
Пояснения к разметке:
<img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a>
<img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> - переход на другие страницы
<form name=checkRadio> - Задание формы откуда будет считываться количество checkBox
<input type=button name=getEm value="Поместить в корзину" onClick="resolveForm()"> - Помещение в localStorage выбранных элементов.Результат запуска страницы Product.html на мобильном устройстве Windows Phone:
После нажатия кнопки наши выбранные результаты поместятся в localStorage:
<h3><img src="img/za.jpg" width="40" height="40"> <a href="Like.html"> Заказы</a>
<img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a><br></h3>
<h1> Корзина товаров</h1>
</header>
<div id="lang">
<section>
<div>
<p>
<input type="button" id="button" name=getEm value="Ваша корзина" onClick="show()">
</p>
</div>
</section>
</div>
<form name=checkRadio>
<h2>Ваши покупки:</h2>
<section id = "databox"> </section> <br />
</form>
</article>
</body>
</html>
Результат запуска страницы Basket.html:
Результат нажатия кнопки "Ваша корзина":
Следует отметить, что после нажатия кнопки, в элементе databox отобразилось всё содержимое localStorage.
Удалим элемент из localStorage. Для этого выберем элемент "Apple MacBook Pro 15, Core i7(2,8 MGh), NVIDIA GeForce GT 650M,.." и нажмём кнопку "Удалить товар". Результат тестирования данной страницы:
Для очищения localStorage воспользуемся кнопкой "Удалить товары". Результат тестирования:
sessionStorage.js следующим кодом JavaScript:
function initiate() {
var button = document.getElementById('button');
button.addEventListener('click', newitem, false);
show();
}
function newitem() {
var keyword = document.getElementById('keyword').value;
var value = document.getElementById('text').value;
sessionStorage.setItem(keyword, value);
show();
document.getElementById('keyword').value = '';
document.getElementById('text').value = '';
}
function show() {
var databox = document.getElementById('databox');
databox.innerHTML ='' ;
for (var f = 0; f < sessionStorage.length; f++) {
var keyword = sessionStorage.key(f);
var value = sessionStorage.getItem(keyword);
databox.innerHTML += '<div>' + keyword + ' - ' + value + '</div>';
}
}
window.addEventListener('load', initiate, false);
По содержанию созданный sessionStorage.js подобен localStorage.js.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Like</title> <link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/sessionStorage.js"></script>
</head>
<body>
<h3> <img src="img/tab.jpg" width="40" height="40"> <a href="Product.html"> Список товаров</a>
<img src="img/tel.jpg" width="40" height="40"><a href="Basket.html"> Корзина</a><br></h3>
<section id="formbox">
<form name="form">
<p>Фирма производитель:</p>
<p><input type="text" name="keyword" id="keyword"></p>
<p>Характеристики:<br /><input type ="text" name="text" id="text" ></p>
<p><input type ="button" id ="button" name ="button" value="Отправить"/></p><br />
</form>
<h2>Мои заказы:</h2>
<section id = "databox"> Мои заказы: </section> <br />
</section>
</body>
</html>
В приведенном коде используются средства работы с временной памятью мобильного устройства из sessionStorage.js.
Вводимые пользователем данные (фирма, характеристики) сохраняются в sessionStorage и сразу выводятся в поле databox страницы.
Результаты запуска страницы Like.html:
Результат нажатия кнопки "Отправить":

Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.