40 важных вопросов и ответов по HTML5

2014-01-27 0 ∞

Введение

Введение

Я, разработчик ASP.NET MVC, недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

Поэтому ниже приводятся 40 важных вопросов, которые помогут вам блеснуть знаниями по HTML5.

Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.

Удачной охоты.

Какая связь между SGML, HTML, XML и XHTML?

SGML (Standard generalized markup language - стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию «DOCTYPE» в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “”).

XHML был создан из XML и использовался в HTML 4.0. Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Какая связь между SGML, HTML, XML и XHTML?

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

<!DOCTYPE html>

Если я не вставлю в документ <!DOCTYPE html>, будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV. Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:

<header>: Представляет блок заголовка страницы;
<footer>: Подвал страницы;
<nav>: Навигационные элементы страницы;
<article>: Основной контент страницы (статья);
<section>: Используется внутри статьи, чтобы разделить статью на секции;
<aside>: Представляет боковой блок страницы.

Что такое элемент datalist в HTML 5?

Элемент datalist в HTML 5 помогает реализовать функцию автозаполнения в поле для ввода, как показано на рисунке ниже:

Ниже приведён код HTML для элемента DataList:

<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>

Какие новые элементы форм введены в HTML 5?

В HTML 5 введены десять новых важных элементов форм:

Color;
Date;
Datetime-local;
Email;
Time;
Url;
Range;
Telephone;
Number;
Search.

Давайте разберём эти элементы по порядку.

Если вы хотите отобразить диалоговое окно выбора цвета:

<input type="color" name="favcolor">

Какие новые элементы форм введены в HTML 5?

Если вы хотите отобразить диалоговое окно календаря:

<input type="date" name="bday">

Какие новые элементы форм введены в HTML 5? - 2

Если вы хотите отобразить календарь с локальным временем:

<input type="datetime-local" name="bdaytime">

Если вы хотите создать HTML поле для ввода с проверкой адреса электронной почты, можно задать тип поля «email»:

<input type="email" name="email">

Для проверки URL-адреса используйте тип «url», как показано ниже:

<input type="url" name="sitename">

Если вы хотите отобразить поле для ввода чисел в заданном диапазоне, используйте тип «number»:

<input type="number" name="quantity" min="1" max="5">

Если вы хотите отобразить ползунок, используйте тип «range»:

<input type="range" min="0" max="10" step="2" value="6">

Хотите сделать поле для поиска:

<input type="search" name="googleengine">

Хотите принимать только время:

<input type="time" name="usr_time">

Если вы хотите сделать поле для ввода номеров телефона:

<input type="tel" name="mytel">

Что такое элемент output в HTML 5?

Элемент output требуется, когда вы хотите отобразить сумму двух введённых чисел в виде текста.

Например, у вас есть два поля для ввода и вы хотите сложить числа из этих двух полей и отобразить их сумму в виде текста.

Ниже приведён пример использования элемента output в HTML 5:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="o" />
</form>

Вы можете заменить «parseInt» на «valueAsNumber» для простоты. Также вы можете использовать атрибут «for» элемента output для повышения читаемости.

<output name="o" for="a b"></output>

Что такое SVG?

SVG означает scalable vector graphics (масштабируемая векторная графика). Это текстовой язык графики, с помощью которого можно рисовать изображения в виде текста, линий, точек и т.п., что позволяет создавать лёгкие и быстро обрабатываемые браузером изображения.

Можно ли сделать простое SVG изображение, используя HTML 5?

Допустим, мы хотим отобразить простую линию, как показано на рисунке ниже, используя HTML 5 и SVG:

Ниже приведён код HTML 5. Вы можете видеть тэг SVG, который заключает в себя тэг line, отображающий линию:

<svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="http://www.w3.org/2000/svg">
<line x1="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y2="[object SVGAnimatedLength]" style="stroke: #ff0000; stroke-width: 2px;" />
</svg>

Что такое канва в HTML 5?

Канва – это область HTML документа, в которой вы можете рисовать.

Итак, как же нарисовать простую линию при помощи канвы?

Определите область канвы;
Получите доступ к контексту канвы;
Нарисуйте изображение.

Определение области канвы

Чтобы определить область канвы, вам потребуется следующий HTML код. Он определяет область, в которой вы можете рисовать:

<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>

Получение доступа к области канвы

Прежде чем приступить к рисованию в области канвы, нужно получить ссылку на контекст канвы. Ниже приведён код, позволяющий это сделать:

var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");

Рисование изображения

Теперь, когда у вас есть доступ к контексту объекта, можно начинать рисовать по канве. Поэтому сначала вызываем метод «move» и начинаем с точки 10, 10, используем метод «line», чтобы нарисовать линию, и, наконец, применяем к ней штриховку:

ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();

Ниже приведён полный код:

<body onload="DrawMe();">
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>
</body>
<script>
function DrawMe()
{
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
}

Вы должны получить результат, как на следующем рисунке:

В чём разница между канвой и SVG?

Замечание: Если вы посмотрите на предыдущие два вопроса, то поймёте, что и канва, и SVG применяются для отображения графики в браузере. Поэтому задавая этот вопрос, интервьюер хочет узнать, когда вы будете использовать то или другое.

SVG	Канва
SVG действует по принципу «нарисовал и запомнил». Другими словами любая фигура, нарисованная с помощью SVG, запоминается, допускает манипуляции над собой, и браузер может нарисовать её снова.	Канва действует по принципу «нарисовал и забыл». После того, как что-то нарисовано, вы не можете получить доступ к этому изображению и манипулировать им.
SVG подходит для создания графики такой, как в программах CAD, где пользователь может манипулировать однажды нарисованным изображением.	Канва хороша для сценариев «нарисовал и забыл», таких как анимация и игры.
Медленный формат, т.к. ему требуется запоминать координаты для будущих манипуляций.	Более быстрый формат, т.к. нет надобности запоминать что-либо.
Мы можем создать обработчик событий, связанный с нарисованным объектом.	В этом случае мы не можем привязать обработчик событий к объектам рисунка, т.к. у нас нет ссылки на них.
Не зависит от разрешения.	Зависит от разрешения.

Как нарисовать прямоугольник, используя элементы Canvas и SVG в HTML 5?

HTML 5 код прямоугольника с помощью SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="[object SVGAnimatedLength]" height="[object SVGAnimatedLength]" style="fill: #0000ff; stroke-width: 1px; stroke: #000000;" />
</svg>

HTML 5 код прямоугольника с помощью канвы:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

HTML 5 код круга с помощью SV:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" r="[object SVGAnimatedLength]" stroke="black" stroke-width="2" fill="red" />
</svg>

HTML 5 код круга с помощью канвы:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

Манипуляции с нарисованным изображением в SVG:

<!DOCTYPE html>
<html>
<body  onload="DrawMe();">
<svg width="[object SVGAnimatedLength]" height="[object SVGAnimatedLength]">
<circle id="circle1" cx="[object SVGAnimatedLength]" cy="[object SVGAnimatedLength]" r="[object SVGAnimatedLength]" style="stroke: none; fill: #ff0000;" />
</svg>
</body>
<script>

var timerFunction = setInterval(DrawMe, 20);
alert("ddd");

function DrawMe()
{
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) 
{
newX = 20;
}
circle.setAttribute("cx", newX);
}
</script>
</html>

Что такое селекторы в CSS?

Селекторы помогают выбрать элемент, к которому вы хотите применить стиль. В качестве примера ниже приведён простой стиль «intro», который применяет красный цвет фона к HTML элементу:

<style>
.intro
{
background-color: red;
}
</style>

Чтобы применить стиль «intro» к элементу div, мы можем использовать атрибут «class», как показано в следующем блоке кода:

<div class="intro">
<p>My name is Shivprasad koirala.</p>
<p>I write interview questions.</p>
</div>

Как можно применить стиль CSS, используя значение ID?

Допустим, у вас есть HTML тэг параграфа с id «mytext», как показано в следующем примере:

<p id="mytext">Это вопросы по HTML, которые могут задать на собеседовании.</p>

Вы можете создать стиль, используя селектор «#» и значением свойства «id», чтобы применить стили CSS к соответствующему тэгу параграфа. Поэтому, чтобы применить стиль к элементу «mytext» мы можем использовать селектор «#mytext», как показано ниже:

<style>
#mytext
{
background-color: yellow;
}
</style>

Коротко рассмотрим некоторые важные селекторы

Установка жёлтого фона для всех параграфов и заголовков h1:

p,h1
{ 
background-color:yellow;
}

Установка жёлтого фона для всех параграфов внутри элемента div:

div p
{ 
background-color: yellow;
}

Установка жёлтого фона для всех параграфов, следующих за элементом div:

div+p
{ 
background-color: yellow;
}

Установка жёлтого фона для всех элементов с атрибутом «target»:

a[target]
{ 
background-color: yellow;
}

<a href="http://www.questpond.com">ASP.NET interview questions</a>
<a href="http://www.questpond.com" target="_blank">c# interview questions</a>
<a href="http://www.questpond.org" target="_top">.NET interview questions with answers</a>

Установка жёлтого фона полей для ввода при получении ими фокуса:

input:focus
{ 
background-color: yellow;
}

Установка стиля гиперссылок, в зависимости от их статуса:

a:link    {color: green;}
a:visited {color: green;}
a:hover   {color: red;}
a:active  {color: yellow;}

Как использовать разбивку контента по колонкам в CSS?

Разбивка по колонкам в CSS помогает вам разделить ваш текст на вертикальные колонки.

Например, посмотрите на статью из журнала на рисунке ниже, представляющую собой большой текст, который нужно разбить на три колонки с границей между ними.

Здесь нам на помощь придёт разбивка по колонкам HTML 5.

Как использовать разбивку контента по колонкам в CSS?

Чтобы реализовать разбивку по колонкам, вам потребуется определить следующее:

На сколько колонок требуется разбить текст?

Для определения количества колонок используется свойство column-count. Префиксы «webkit» и «moz» необходимы для браузеров Chrome и Firefox соответственно.

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari и Chrome */
column-count:3;

Какой промежуток сделать между колонками?

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari и Chrome */
column-gap:20px;

Хотите ли вы нарисовать линию между колонками, и если да, какой толщины?

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari и Chrome */
column-rule:6px outset #ff00ff;

Ниже приведён полный код примера:

<style>
.magazine
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
}
</style>

Затем вы можете применить этот стиль к тексту, используя атрибут «class»:

<div class="magazine">

Здесь следует ваш текст, который вы хотите разбить на 3 колонки:

</div>

Расскажите о блочной модели CSS

Блочная модель CSS – это прямоугольное пространство вокруг элемента HTML, в котором определяются границы, поля и отступы.

Границы – определяют максимальную область, в которой будет содержаться элемент. Мы можем сделать границу видимой, невидимой, определить высоту и ширину элемента и т.п. Поля – определяют расстояния между границами и элементом.

Отступы – определяют расстояния между границами и соседними элементами.

В качестве примера, ниже приведён простой CSS код, который определяет блок и значения границ, полей и отступов:

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

Поэтому, если мы применим этот код CSS к элементу div, приведённому в следующем блоке кода, результат будет такой, как показано на рисунке ниже. Я добавил элементы «Some text» и «Some other text», чтобы продемонстрировать свойство «margin» (отступ).

<div align="middle" class="box">
Some text
</div>

Some other text

Расскажите о некоторых текстовых эффектах в CSS 3

Здесь интервьюер ожидает от вас рассказа об одном из двух эффектов, появившихся в CSS 3.

Ниже приведены оба эффекта:

Эффект тени текста

.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}

Расскажите о некоторых текстовых эффектах в CSS 3

Эффект разрыва слов:

<style>
.breakword { word-wrap: break-word; }
</style>

Расскажите о некоторых текстовых эффектах в CSS 3 - 2

Что такое web workers и зачем они нужны?

Рассмотрим следующий «тяжёлый» цикл for, который выполняется миллиард раз:

function SomeHeavyFunction() {
  for (i = 0; i < 1000000000; i++) {
   x = i + x;
  }
}

Допустим, этот код исполняется при нажатии на кнопку HTML формы. Исполнение этой функции синхронное. Другими словами браузер будет ждать окончания цикла.

<input type="button" onclick="SomeHeavyFunction();" />

В итоге это может привести к зависанию браузера и сообщению об ошибке, как показано на рисунке ниже:

Что такое web workers и зачем они нужны?

Поэтому если бы мы могли поместить этот тяжёлый цикл в файл JavaScript и запустить его асинхронно, тогда браузеру не пришлось бы ждать его завершения, и мы бы получили более отзывчивое приложение.

Для этого и предназначена технология web workers, позволяющая исполнять файлы JavaScript асинхронно.

Какие ограничения накладываются на поток Web Worker?

Потоки web worker не могут изменять HTML элементы, глобальные переменные и некоторые свойства окон, такие как window.location. Вы можете использовать типы данных javascript, вызовы XMLHttpRequest и прочее.

Так как же создать поток web worker в JavaScript?

Чтобы создать поток web worker, мы должны передать имя файла JavaScript в конструктор Worker.

var worker = new Worker("MyHeavyProcess.js");

Чтобы отправить сообщение объекту web worker, можно использовать метод «postMessage», как в приведённом ниже коде:

worker.postMessage();

Когда web worker посылает сообщение, мы можем получить его на вызывающей стороне с помощью события «onmessage».

worker.onmessage = function (e) 
{
document.getElementById("txt1").value = e.data;
};

Так как же создать поток web worker в JavaScript?

Тяжёлый цикл помещён в javascript файл «MyHeavyProcess.js», ниже приведён его код.

Когда этот код пожелает отправить сообщение, он использует метод «postMessage», а любое сообщение, полученное от вызывающей стороны, получается при помощи события «onmessage»:

var x =0
self.onmessage = function (e) {
    for (i = 0; i < 1000000000; i++)
    {
        x = i + x;
    }
    self.postMessage(x);
};

Как уничтожить объект web worker?

w.terminate();

Зачем в HTML 5 введены события server-sent?

Одной из наиболее частых потребностей в сетевом мире является получение обновлений с сервера. Например, в приложении, отображающем биржевые сводки, браузер должен регулярно получать последние котировки с сервера.

Поэтому, чтобы реализовать этот тип запросов, разработчики обычно пишут некоторый pull-код, который отправляет запросы на сервер и получает оттуда данные через определённые интервалы времени. Это хорошее решение, но оно забивает сеть множеством запросов, а также добавляет нагрузку на сервер.

Поэтому вместо pull-запросов было бы здорово иметь какое-нибудь push-решение. Проще говоря, когда сервер получает обновление, он рассылает его браузерам клиентов. Это может быть достигнуто с помощью «SERVER-SENT СОБЫТИЙ».

Сначала браузер должен связаться с источником на сервере, который будет посылать обновления. Допустим, у нас есть страница «stock.aspx», которая рассылает обновления котировок.

Чтобы связаться со страницей, мы должны использовать привязку к объекту источника события, как показано в коде ниже:

var source = new EventSource("stock.aspx");

Нам также потребуется привязать функцию, которая будет получать сообщения, когда сервер будет рассылать обновления. Для этого нам нужно привязать функцию к событию «onmessage», как показано в следующем коде:

source.onmessage = function (event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

Наконец, со стороны сервера нам нужно рассылать события. Ниже приведён список важных событий, с командами, которые должны рассылаться со стороны сервера.

Событие	Команда
Отправка данных клиенту	data : привет
Попросить клиента повторить запрос через 10 секунд	retry : 10000
Сгенерировать определённое событие с данными	event : successdata : Вы авторизованы

Например, если мы хотим отправить данные, ниже приведён код ASP.NET, чтобы сделать это. Пожалуйста, обратите внимание, что заголовок «ContentType» установлен в «text/event-stream»:

Response.ContentType="text/event-stream";
Response.Expires=-1;
Response.Write("data: " + DateTime.Now.ToString());
Response.Flush();

Чтобы попросить клиент повторить запрос через 10 секунд.

Response.Write("retry: 10000");

Если вы хотите привязать обработчик события на стороне клиента, используйте метод «addEventListener», как показано ниже.

source.addEventListener('message', function(e) {
  console.log(e.data);
}, false);

Следующее сообщение сервера вызовет javascript функцию «message»:

event: message
data : hello

Расскажите о концепции локального хранилища в HTML 5

Часто нам нужно хранить информацию о пользователе на его локальном компьютере. Допустим, пользователь наполовину заполнил большую форму, и неожиданно пропадает интернет соединение.

Поэтому хорошо было бы хранить эту информацию локально у пользователя, а когда интернет соединение восстановится, пользователь использовал бы её и отправил на сервер.

Современные браузеры имеют хранилище, называемое «Локальным хранилищем» («Local storage»), где вы можете хранить эту информацию.

Как мы можем добавлять и удалять данные из локального хранилища?

Данные добавляются и удаляются из локального хранилища с помощью пары «ключ-значение». Ниже приведён пример кода добавления страны «India» с ключом «Key001»:

localStorage.setItem(“Key001”,”India”);

Получить данные из локального хранилища можно с помощью метода «getItem», передав ему значение ключа:

var country = localStorage.getItem(“Key001”);

Также вы можете хранить объекты JavaScript, как показано ниже:

var country = {};
country.name = “India”;
country.code = “I001”;
localStorage.setItem(“I001”, country);
var country1 = localStorage.getItem(“I001”);

Если вы хотите хранить данные в формате JSON, вы можете использовать функцию «JSON.stringify»:

localStorage.setItem(“I001”,JSON.stringify(country));

Какой срок жизни у локального хранилища?

Локальное хранилище не имеет срока жизни. Данные будут храниться до тех пор, пока пользователь не удалит их из своего браузера, либо вы не удалите их, используя код JavaScript.

В чём разница между локальным хранилищем и cookies?

	Cookies	Локальное хранилище
Сторона клиента / Сторона сервера	Данные доступны как на стороне клиента, так и на стороне сервера. Cookies пересылаются на сервер при каждом запросе	Данные доступны только на стороне браузера клиента. Сервер не может получить доступ к данным локального хранилища до тех пор, пока они не отправлены на сервер методом POST или GET
Размер	4095 байт для каждой cookie	5 Мб для каждого домена
Срок хранения	Cookies имеют срок хранения. После истечения этого срока, cookie удаляются	Срока хранения не существует. Данные будут храниться до тех пор, пока пользователь не удалит их из своего браузера, либо вы не удалите их, используя код JavaScript

Что такое хранилище сессии и как его создать?

Хранилище сессии похоже на локальное хранилище, но данные действительны на протяжении сессии. Проще говоря, данные удаляются, как только вы закрываете браузер.

Чтобы создать хранилище сессии, вам нужно использовать конструкцию «sessionStorage.имяпеременной». В следующем коде мы создаём переменную «clickcount».

Если вы обновите страницу в браузере, счётчик увеличится. Но если вы закроете браузер и откроете его снова, переменная «clickcount» снова установится в ноль:

if(sessionStorage.clickcount) {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else {
  sessionStorage.clickcount = 0;
}

В чём разница между хранилищем сессии и локальным хранилищем?

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

Что такое WebSQL?

WebSQL – это реляционная база данных, работающая на стороне браузера клиента. Внутри браузера есть реляционная СУБД, в которой вы можете выполнять SQL запросы.

Является ли WebSQL частью спецификации HTML 5?

Нет. Многие относят его к HTML 5, но WebSQL не является частью спецификации HTML 5. Спецификация основана на SQLite.

Так как же можно использовать WebSQL?

Для начала нам нужно открыть базу данных, с помощью функции «openDatabase», как показано ниже. Первый аргумент – это имя базы данных, далее версия, простое текстовое название и размер базы данных.

var db=openDatabase('dbCustomer','1.0','Customer app’, 2 * 1024 * 1024);

Выполнять запросы можно с помощью функции «transaction», вызывая внутри неё метод «executeSql»:

db.transaction(function (tx) 
{
  tx.executeSql('CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)');
  tx.executeSql('INSERT INTO tblcust (id, customername) VALUES(1, "shiv")');
  tx.executeSql('INSERT INTO tblcust (id, customername) VALUES (2, "raju")');
}

В случае если вы выполняете запрос «select», вы получаете данные в коллекцию «results», которую можно обходить и отображать результаты на странице:

db.transaction(function (tx) 
{
  tx.executeSql('SELECT * FROM tblcust', [], function (tx, results) {
   for (i = 0; i < len; i++)
{
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
     document.querySelector('#customer).innerHTML +=  msg;
}
 }, null);
});

Что такое кэш приложения в HTML5?

Одной из наиболее востребованных функций для конечного пользователя является работа в автономном режиме. Другими словами, если соединение с интернетом недоступно, страница должна возвращаться из кэша браузера, и кэш приложения поможет вам в этом.

Кэш приложения помогает вам определить, какие файлы должны быть кэшированы, а какие нет.

Так как же нам реализовать кэш приложения в HTML 5?

Нам необходимо создать файл «манифеста». Файл «манифеста» помогает вам определить, как должно работать кэширование. Ниже приведена структура файла «манифеста»:

CACHE MANIFEST
# version 1.0
CACHE:
Login.aspx

Все файлы «манифеста» начинаются со строки CACHE MANIFEST;
# (хэш тэг) помогает указать версию файла кэша;
Команда CACHE определяет, какие файлы должны быть кэшированы;
Заголовок «ContentType» файла должен быть «text/cache-manifest».

Ниже приведён манифест кэша, выведенный с помощью ASP.NET C#:

Response.ContentType = "text/cache-manifest";
Response.Write("CACHE MANIFEST n");
Response.Write("# 2012-02-21 v1.0.0 n");
Response.Write("CACHE : n");
Response.Write("Login.aspx n");
Response.Flush();
Response.End();

После того, как манифест кэша создан, следующий этап – указать ссылку на файл манифеста на странице HTML, как показано ниже:

<html manifest="cache.aspx">

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

Как обновить кэш приложения браузера?

Кэш приложения обновляется при смене номера версии, указанного после тэга «#», как показано в следующем коде:

CACHE MANIFEST
# version 2.0(new)
CACHE:
Login.aspx
Aboutus.aspx
NETWORK:
Pages.aspx

Что такое fallback в кэше приложения?

Команда fallback в кэше приложения помогает вам указать файл, который должен быть отображён, когда сервер недоступен.

Например, в манифесте, приведённом ниже, мы говорим, что если кто-то заходит в «/home», когда сервер недоступен, то должна быть возвращена страница «homeoffline.html»:

FALLBACK:
/home/ /homeoffline.html

Что такое network в кэше приложения?

Команда network определяет файлы, которые не должны быть кэшированы. Например, приведённый ниже код говорит, что страница «home.aspx» никогда не должна кэшироваться, и не должна быть доступна в автономном режиме:

NETWORK:
home.aspx

Сергей Бензенкоавтор-переводчик статьи «40 important HTML 5 Interview questions with answers»