Учебники

HTML5 — Краткое руководство

Август 22, 2018

HTML5 — Обзор

HTML5 — это следующая крупная версия стандарта HTML, заменяющая HTML 4.01, XHTML 1.0 и XHTML 1.1. HTML5 — это стандарт для структурирования и представления контента во всемирной паутине.

HTML5 — это сотрудничество между Консорциумом World Wide Web (W3C) и Рабочей группой по технологиям гипертекстовых веб-приложений (WHATWG).

Новый стандарт включает в себя такие функции, как воспроизведение видео и перетаскивание, которые ранее зависели от сторонних плагинов для браузера, таких как Adobe Flash, Microsoft Silverlight и Google Gears.

Поддержка браузера

Последние версии Apple Safari, Google Chrome, Mozilla Firefox и Opera поддерживают многие функции HTML5, а Internet Explorer 9.0 также будет поддерживать некоторые функции HTML5.

Мобильные веб-браузеры, предустановленные на iPhone, iPad и телефонах Android, имеют отличную поддержку HTML5.

Новые возможности

HTML5 вводит ряд новых элементов и атрибутов, которые могут помочь вам в создании современных веб-сайтов. Вот набор самых выдающихся функций, представленных в HTML5.

  • Новые семантические элементы — это как <header>, <footer> и <section>.

  • Формы 2.0 — улучшения в веб-формах HTML, в которые были добавлены новые атрибуты для тега <input>.

  • Постоянное локальное хранилище — для достижения без использования сторонних плагинов.

  • WebSocket — технология двунаправленной связи следующего поколения для веб-приложений.

  • События, отправляемые сервером. HTML5 представляет события, которые передаются с веб-сервера в веб-браузеры и называются событиями, отправляемыми сервером (SSE).

  • Canvas — поддерживает двумерную поверхность рисования, которую можно программировать с помощью JavaScript.

  • Аудио и видео — Вы можете вставлять аудио или видео на свои веб-страницы, не прибегая к сторонним плагинам.

  • Геолокация — теперь посетители могут поделиться своим физическим местоположением с вашим веб-приложением.

  • Микроданные. Это позволяет создавать собственные словари за пределами HTML5 и расширять веб-страницы с помощью собственной семантики.

  • Перетаскивание — перетащите элементы из одного места в другое на той же веб-странице.

Новые семантические элементы — это как <header>, <footer> и <section>.

Формы 2.0 — улучшения в веб-формах HTML, в которые были добавлены новые атрибуты для тега <input>.

Постоянное локальное хранилище — для достижения без использования сторонних плагинов.

WebSocket — технология двунаправленной связи следующего поколения для веб-приложений.

События, отправляемые сервером. HTML5 представляет события, которые передаются с веб-сервера в веб-браузеры и называются событиями, отправляемыми сервером (SSE).

Canvas — поддерживает двумерную поверхность рисования, которую можно программировать с помощью JavaScript.

Аудио и видео — Вы можете вставлять аудио или видео на свои веб-страницы, не прибегая к сторонним плагинам.

Геолокация — теперь посетители могут поделиться своим физическим местоположением с вашим веб-приложением.

Микроданные. Это позволяет создавать собственные словари за пределами HTML5 и расширять веб-страницы с помощью собственной семантики.

Перетаскивание — перетащите элементы из одного места в другое на той же веб-странице.

Обратная совместимость

HTML5 разработан, насколько это возможно, для обратной совместимости с существующими веб-браузерами. Его новые функции были построены на существующих функциях и позволяют предоставлять запасной контент для старых браузеров.

Предлагается обнаруживать поддержку отдельных функций HTML5 с помощью нескольких строк JavaScript.

Если вы не знакомы с какой-либо предыдущей версией HTML, я бы рекомендовал вам ознакомиться с нашим учебным курсом по HTML, прежде чем изучать возможности HTML5.

HTML5 — синтаксис

Язык HTML 5 имеет «пользовательский» синтаксис HTML, который совместим с документами HTML 4 и XHTML1, опубликованными в Интернете, но не совместим с более эзотерическими функциями SGML в HTML 4.

HTML 5 не имеет тех же правил синтаксиса, что и XHTML, где нам нужны имена тегов в нижнем регистре, заключая в кавычки наши атрибуты, атрибут должен иметь значение и закрывать все пустые элементы.

HTML5 обладает большой гибкостью и поддерживает следующие функции:

  • Прописные имена тегов.
  • Кавычки необязательны для атрибутов.
  • Значения атрибута являются необязательными.
  • Закрытие пустых элементов не является обязательным.

ДОКТИП

DOCTYPE в более старых версиях HTML были длиннее, потому что язык HTML был основан на SGML и поэтому требовал ссылки на DTD.

Авторы HTML 5 будут использовать простой синтаксис для указания DOCTYPE следующим образом: 

<!DOCTYPE html>

Приведенный выше синтаксис нечувствителен к регистру.

Кодировка символов

Авторы HTML 5 могут использовать простой синтаксис для указания кодировки символов следующим образом: 

<meta charset = "UTF-8">

Приведенный выше синтаксис нечувствителен к регистру.

Тег <script>

Обычной практикой является добавление атрибута типа со значением «text / javascript» к элементам скрипта следующим образом: 

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 удаляет дополнительную информацию, необходимую, и вы можете использовать просто следующий синтаксис — 

<script src = "scriptfile.js"></script>

Тег <link>

Итак, вы написали <link> следующим образом: 

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 удаляет дополнительную информацию, необходимую, и вы можете просто использовать следующий синтаксис — 

<link rel = "stylesheet" href = "stylefile.css">

Элементы HTML5

Элементы HTML5 размечаются с использованием начальных и конечных тегов. Теги разграничиваются с помощью угловых скобок с именем тега между ними.

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

Ниже приведен пример элемента HTML5: 

<p>...</p>

Имена тегов HTML5 нечувствительны к регистру и могут быть написаны в верхнем или смешанном регистре, хотя наиболее распространенным соглашением является использование строчных.

Большинство элементов содержат некоторый контент, например, <p> … </ p> содержит абзац. Некоторым элементам, однако, запрещено содержать какой-либо контент вообще, и они известны как пустые элементы. Например, br, hr, ссылка, мета и т. Д.

Вот полный список элементов HTML5 .

HTML5 атрибуты

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

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

Ниже приведен пример атрибута HTML5, который иллюстрирует, как разметить элемент div с помощью атрибута с именем class, используя значение «example» — 

<div class = "example">...</div>

Атрибуты могут быть указаны только в начальных тегах и никогда не должны использоваться в конечных тегах.

Атрибуты HTML5 нечувствительны к регистру и могут быть записаны в верхнем или смешанном регистре, хотя наиболее распространенное соглашение — придерживаться строчных.

Вот полный список атрибутов HTML5 .

HTML5 документ

Следующие теги были введены для лучшей структуры —

  • раздел — этот тег представляет общий документ или раздел приложения. Он может использоваться вместе с h1-h6 для указания структуры документа.

  • article — этот тег представляет собой независимую часть содержимого документа, такую ​​как запись в блоге или газетная статья.

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

  • header — Этот тег представляет заголовок раздела.

  • Нижний колонтитул — этот тег представляет нижний колонтитул раздела и может содержать информацию об авторе, информацию об авторских правах и так далее.

  • nav — этот тег представляет раздел документа, предназначенный для навигации.

  • диалог — этот тег может быть использован для разметки разговора.

  • figure — этот тег можно использовать для связывания заголовка с некоторым встроенным контентом, например с графикой или видео.

раздел — этот тег представляет общий документ или раздел приложения. Он может использоваться вместе с h1-h6 для указания структуры документа.

article — этот тег представляет собой независимую часть содержимого документа, такую ​​как запись в блоге или газетная статья.

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

header — Этот тег представляет заголовок раздела.

Нижний колонтитул — этот тег представляет нижний колонтитул раздела и может содержать информацию об авторе, информацию об авторских правах и так далее.

nav — этот тег представляет раздел документа, предназначенный для навигации.

диалог — этот тег может быть использован для разметки разговора.

figure — этот тег можно использовать для связывания заголовка с некоторым встроенным контентом, например с графикой или видео.

Разметка для документа HTML 5 будет выглядеть следующим образом: 

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

Live Demo 

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

Это даст следующий результат —

HTML5 — Атрибуты

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

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

Ниже приведен пример атрибутов HTML5, который иллюстрирует, как разметить элемент div с помощью атрибута с именем class, используя значение «example» — 

<div class = "example">...</div>

Атрибуты могут быть указаны только в начальных тегах и никогда не должны использоваться в конечных тегах .

Атрибуты HTML5 нечувствительны к регистру и могут быть записаны в верхнем или смешанном регистре, хотя наиболее распространенное соглашение — придерживаться строчных.

Стандартные атрибуты

Приведенные ниже атрибуты поддерживаются почти всеми тегами HTML 5.

атрибут Опции функция
ключ доступа Определяемые пользователем Определяет сочетание клавиш для доступа к элементу.
выравнивать правый, левый, центр Горизонтально выравнивает теги
фон URL Размещает фоновое изображение за элементом
BGCOLOR числовые, шестнадцатеричные, значения RGB Размещает цвет фона позади элемента
учебный класс Определяемые пользователем Классифицирует элемент для использования с каскадными таблицами стилей.
contenteditable правда, ложь Указывает, может ли пользователь редактировать содержимое элемента или нет.
контекстное меню Идентификатор меню Определяет контекстное меню для элемента.
данных XXXX Определяемые пользователем Пользовательские атрибуты. Авторы документа HTML могут определять свои собственные атрибуты. Должен начинаться с «data-».
перетаскиваемый правда, ложь, авто Указывает, разрешено ли пользователю перетаскивать элемент.
рост Числовое значение Определяет высоту таблиц, изображений или ячеек таблицы.
скрытый скрытый Указывает, должен ли элемент быть видимым или нет.
Я бы Определяемые пользователем Называет элемент для использования с каскадными таблицами стилей.
вещь Список элементов Используется для группировки элементов.
itemprop Список предметов Используется для группировки предметов.
проверка орфографии правда, ложь Указывает, должен ли элемент проверять орфографию или грамматику.
стиль Таблица стилей CSS Определяет встроенный стиль для элемента.
предмет Пользователь определяет идентификатор Определяет соответствующий элемент элемента.
TabIndex Номер вкладки Определяет порядок вкладок элемента.
заглавие Определяемые пользователем «Всплывающее» название для ваших элементов.
VALIGN верх, середина, низ Вертикально выравнивает теги в элементе HTML.
ширина Числовое значение Определяет ширину таблиц, изображений или ячеек таблицы.

Полный список тегов HTML5 и связанных с ними атрибутов см. В нашей ссылке на теги HTML5 .

Пользовательские атрибуты

В HTML 5 появилась новая функция — добавление пользовательских атрибутов данных.

Пользовательский атрибут данных начинается с data- и будет назван в соответствии с вашими требованиями. Вот простой пример — 

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

Приведенный выше код будет совершенно корректным HTML5 с двумя пользовательскими атрибутами, называемыми datasubject и data-level . Вы сможете получить значения этих атрибутов, используя JavaScript API или CSS аналогично обычным атрибутам.

HTML5 — События

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

Мы можем написать наши обработчики событий в Javascript или VBscript, и вы можете указать эти обработчики событий в качестве значения атрибута тега события. Спецификация HTML5 определяет различные атрибуты события, как указано ниже —

Мы можем использовать следующий набор атрибутов для запуска любого кода javascript или vbscript, заданного в качестве значения, когда есть какое-либо событие, которое происходит для любого элемента HTML5.

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

атрибут Значение Описание
не в сети скрипт Пуски когда документ переходит в автономный режим
OnAbort скрипт Триггеры на событие отмены
OnAfterPrint скрипт Пуски после того, как документ напечатан
onbeforeonload скрипт Триггеры до загрузки документа
OnBeforePrint скрипт Пуски перед печатью документа
ONBLUR скрипт Пуски когда окно теряет фокус
oncanplay скрипт Пуски, когда медиа может начать воспроизведение, но может остановиться для буферизации
oncanplaythrough скрипт Пуски, когда медиа может быть воспроизведено до конца, без остановки для буферизации
по изменению скрипт Пуски когда элемент изменяется
по щелчку скрипт Триггеры по щелчку мыши
oncontextmenu скрипт Пуски когда контекстное меню вызвано
ondblclick скрипт Запуск по двойному щелчку мыши
ondrag скрипт Пуски когда элемент перетаскивается
ondragend скрипт Триггеры в конце операции перетаскивания
OnDragEnter скрипт Пуски когда элемент был перетащен к действительной цели отбрасывания
OnDragLeave скрипт Пуски когда элемент покидает действительную цель отбрасывания
OnDragOver скрипт Пуски когда элемент перетаскивается над действительной целью отбрасывания
ondragstart скрипт Триггеры в начале операции перетаскивания
OnDrop скрипт Пуски когда перетаскиваемый элемент отбрасывается
ondurationchange скрипт Пуски когда длина медиа изменена
onemptied скрипт Пуски, когда элемент медиа-ресурса внезапно становится пустым.
onended скрипт Пуски, когда СМИ достигли конца
OnError скрипт Пуски когда происходит ошибка
OnFocus скрипт Пуски когда окно получает фокус
onformchange скрипт Пуски когда форма изменяется
onforminput скрипт Пуски когда форма получает ввод пользователя
onhaschange скрипт Пуски когда документ имеет изменение
oninput скрипт Пуски когда элемент получает ввод пользователя
oninvalid скрипт Пуски когда элемент недействителен
OnKeyDown скрипт Пуски при нажатии клавиши
OnKeyPress скрипт Пуски когда кнопка нажата и отпущена
OnKeyUp скрипт Пуски когда ключ выпущен
в процессе скрипт Пуски когда документ загружает
onloadeddata скрипт Пуски когда медиа-данные загружены
onloadedmetadata скрипт Пуски когда продолжительность и другие медиа-данные медиа-элемента загружены
onloadstart скрипт Пуски когда браузер начинает загружать медиа данные
OnMessage скрипт Пуски когда сообщение запущено
OnMouseDown скрипт Пуски при нажатии кнопки мыши
OnMouseMove скрипт Пуски когда указатель мыши перемещается
onmouseout скрипт Пуски когда указатель мыши выходит из элемента
при наведении мыши скрипт Пуски когда указатель мыши перемещается над элементом
OnMouseUp скрипт Пуски когда кнопка мыши отпущена
OnMouseWheel скрипт Пуски когда колесо мыши вращается
onoffline скрипт Пуски когда документ переходит в автономный режим
onoine скрипт Пуски когда документ приходит онлайн
ononline скрипт Пуски когда документ приходит онлайн
onpagehide скрипт Пуски когда окно скрыто
onpageshow скрипт Пуски когда окно становится видимым
OnPause скрипт Пуски когда данные мультимедиа поставлены на паузу
onplay скрипт Пуски, когда медиа-данные собираются начать воспроизведение
onplaying скрипт Пуски когда медиа-данные начали играть
onpopstate скрипт Пуски когда история окна изменяется
в процессе скрипт Пуски когда браузер выбирает медиа данные
onratechange скрипт Пуски, когда скорость воспроизведения медиа-данных изменилась
onreadystatechange скрипт Пуски когда состояние готовности изменяется
onredo скрипт Пуски когда документ выполняет повтор
OnResize скрипт Пуски когда размер окна изменен
OnScroll скрипт Пуски когда прокручивается полоса прокрутки элемента
onseeked скрипт Пуски, когда атрибут поиска медиа-элемента больше не равен true и поиск завершен
onseeking скрипт Пуски, когда атрибут поиска медиа-элемента имеет значение true, и поиск начался
onselect скрипт Пуски когда элемент выбран
onstalled скрипт Пуски когда происходит ошибка при получении медиа данных
onstorage скрипт Пуски когда документ загружает
onsubmit скрипт Пуски когда форма отправлена
onsuspend скрипт Пуски, когда браузер извлекал мультимедийные данные, но останавливался до того, как был извлечен весь мультимедийный файл
ontimeupdate скрипт Пуски когда медиа изменяет свою позицию воспроизведения
onundo скрипт Пуски когда документ выполняет отмену
OnUnload скрипт Пуски когда пользователь покидает документ
onvolumechange скрипт Пуски, когда носитель изменяет громкость, а также когда громкость отключена
onwaiting скрипт Пуски, когда медиа перестало воспроизводиться, но ожидается возобновление

HTML5 — веб-формы 2.0

Web Forms 2.0 — это расширение возможностей форм, присутствующих в HTML4. Элементы и атрибуты форм в HTML5 обеспечивают большую степень семантической разметки, чем HTML4, и освобождают нас от множества утомительных скриптов и стилей, которые требовались в HTML4.

Элемент <input> в HTML4

Элементы ввода HTML4 используют атрибут type для указания типа данных. HTML4 предоставляет следующие типы:

Sr.No. Тип и описание
1

текст

Текстовое поле произвольной формы, номинально без разрывов строк.

2

пароль

Свободное текстовое поле для конфиденциальной информации, номинально без разрывов строк.

3

флажок

Набор из нуля или более значений из предварительно определенного списка.

4

радио

Перечисляемое значение.

5

Отправить

Свободная форма кнопки инициирует отправку формы.

6

файл

Произвольный файл с типом MIME и, необязательно, именем файла.

7

образ

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

8

скрытый

Произвольная строка, которая обычно не отображается пользователю.

9

Выбрать

Перечисляемое значение, очень похожее на тип радио.

10

TextArea

Текстовое поле произвольной формы, номинально без ограничений на разрыв строки.

11

кнопка

Свободная форма кнопки, которая может инициировать любое событие, связанное с кнопкой.

текст

Текстовое поле произвольной формы, номинально без разрывов строк.

пароль

Свободное текстовое поле для конфиденциальной информации, номинально без разрывов строк.

флажок

Набор из нуля или более значений из предварительно определенного списка.

радио

Перечисляемое значение.

Отправить

Свободная форма кнопки инициирует отправку формы.

файл

Произвольный файл с типом MIME и, необязательно, именем файла.

образ

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

скрытый

Произвольная строка, которая обычно не отображается пользователю.

Выбрать

Перечисляемое значение, очень похожее на тип радио.

TextArea

Текстовое поле произвольной формы, номинально без ограничений на разрыв строки.

кнопка

Свободная форма кнопки, которая может инициировать любое событие, связанное с кнопкой.

Ниже приведен простой пример использования меток, переключателей и кнопок отправки. 

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

Элемент <input> в HTML5

Помимо вышеупомянутых атрибутов, элементы ввода HTML5 представили несколько новых значений для атрибута type . Они перечислены ниже.

ПРИМЕЧАНИЕ. — Попробуйте все следующие примеры, используя последнюю версию браузера Opera .

Sr.No. Тип и описание
1 Дата и время

Дата и время (год, месяц, день, час, минута, секунда, доли секунды), закодированные в соответствии с ISO 8601 с часовым поясом, установленным на UTC.

2 Дата и время-местный

Дата и время (год, месяц, день, час, минута, секунда, доли секунды), закодированные в соответствии с ISO 8601, без информации о часовом поясе.

3 Дата

Дата (год, месяц, день), закодированная в соответствии с ISO 8601.

4 месяц

Дата, состоящая из года и месяца, закодированных в соответствии с ISO 8601.

5 неделю

Дата, состоящая из года и номера недели, закодированных в соответствии с ISO 8601.

6 время

Время (часы, минуты, секунды, доли секунды), закодированное в соответствии с ISO 8601.

7 число

Он принимает только числовое значение. Атрибут step указывает точность, по умолчанию 1.

8 спектр

Тип диапазона используется для полей ввода, которые должны содержать значение из диапазона чисел.

9 Эл. адрес

Он принимает только значение электронной почты. Этот тип используется для полей ввода, которые должны содержать адрес электронной почты. Если вы попытаетесь отправить простой текст, вам будет необходимо ввести только адрес электронной почты в формате [email protected].

10 URL

Он принимает только значение URL. Этот тип используется для полей ввода, которые должны содержать URL-адрес. Если вы попытаетесь отправить простой текст, вам будет необходимо ввести только URL-адрес в формате http://www.example.com или в формате http://example.com.

Дата и время (год, месяц, день, час, минута, секунда, доли секунды), закодированные в соответствии с ISO 8601 с часовым поясом, установленным на UTC.

Дата и время (год, месяц, день, час, минута, секунда, доли секунды), закодированные в соответствии с ISO 8601, без информации о часовом поясе.

Дата (год, месяц, день), закодированная в соответствии с ISO 8601.

Дата, состоящая из года и месяца, закодированных в соответствии с ISO 8601.

Дата, состоящая из года и номера недели, закодированных в соответствии с ISO 8601.

Время (часы, минуты, секунды, доли секунды), закодированное в соответствии с ISO 8601.

Он принимает только числовое значение. Атрибут step указывает точность, по умолчанию 1.

Тип диапазона используется для полей ввода, которые должны содержать значение из диапазона чисел.

Он принимает только значение электронной почты. Этот тип используется для полей ввода, которые должны содержать адрес электронной почты. Если вы попытаетесь отправить простой текст, вам будет необходимо ввести только адрес электронной почты в формате [email protected].

Он принимает только значение URL. Этот тип используется для полей ввода, которые должны содержать URL-адрес. Если вы попытаетесь отправить простой текст, вам будет необходимо ввести только URL-адрес в формате http://www.example.com или в формате http://example.com.

Элемент <output>

HTML5 представил новый элемент <output>, который используется для представления результатов различных типов вывода, таких как вывод, написанный скриптом.

Атрибут for можно использовать для указания взаимосвязи между элементом вывода и другими элементами в документе, которые повлияли на вычисления (например, в качестве входных данных или параметров). Значением атрибута for является разделенный пробелами список идентификаторов других элементов.

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

Это даст следующий результат —

Атрибут заполнителя

HTML5 ввел новый атрибут под названием заполнитель . Этот атрибут в элементах <input> и <textarea> подсказывает пользователю, что можно ввести в поле. Текст местозаполнителя не должен содержать возврат каретки или перевод строки.

Вот простой синтаксис для атрибута заполнителя — 

<input type = "text" name = "search" placeholder = "search the web"/>

Этот атрибут поддерживается только в последних версиях браузеров Mozilla, Safari и Crome.

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

Это даст следующий результат —

Атрибут автофокуса

Это простой одношаговый шаблон, легко программируемый в JavaScript во время загрузки документа, автоматически фокусирующийся на одном конкретном поле формы.

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

<input type = "text" name = "search" autofocus/>

Этот атрибут поддерживается только в последних версиях браузеров Mozilla, Safari и Chrome. 

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Обязательный атрибут

Теперь вам не нужно иметь JavaScript для проверки на стороне клиента, так как пустое текстовое поле никогда не будет отправлено, потому что HTML5 ввел новый атрибут с именем required, который будет использоваться следующим образом и будет настаивать на том, чтобы иметь значение — 

<input type = "text" name = "search" required/>

Этот атрибут поддерживается только в последних версиях браузеров Mozilla, Safari и Chrome.

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Это даст следующий результат —

HTML5 — SVG

SVG расшифровывается как S calable V ector G raphics и является языком для описания 2D-графики и графических приложений в XML, а затем XML визуализируется средством просмотра SVG.

SVG в основном полезен для диаграмм векторного типа, таких как круговые диаграммы, двумерные графики в системе координат X, Y и т. Д.

SVG стала Рекомендацией W3C 14. Январь 2003 года, и вы можете проверить последнюю версию спецификации SVG в Спецификации SVG .

Просмотр файлов SVG

Большинство веб-браузеров могут отображать SVG так же, как они могут отображать PNG, GIF и JPG. Пользователям Internet Explorer, возможно, придется установить Adobe SVG Viewer, чтобы иметь возможность просматривать SVG в браузере.

Встраивание SVG в HTML5

HTML5 позволяет встраивать SVG напрямую, используя тег <svg> … </ svg>, который имеет следующий простой синтаксис — 

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7 также представил опцию конфигурации («about: config»), где вы можете включить HTML5, используя следующие шаги:

  • Введите about: config в адресную строку Firefox.

  • Нажмите «Я буду осторожен, я обещаю!» Кнопка на предупреждающем сообщении, которое появляется (и убедитесь, что вы придерживаетесь его!).

  • Введите html5.enable в панель фильтров в верхней части страницы.

  • В настоящее время он будет отключен, поэтому щелкните по нему, чтобы переключить значение в true.

Введите about: config в адресную строку Firefox.

Нажмите «Я буду осторожен, я обещаю!» Кнопка на предупреждающем сообщении, которое появляется (и убедитесь, что вы придерживаетесь его!).

Введите html5.enable в панель фильтров в верхней части страницы.

В настоящее время он будет отключен, поэтому щелкните по нему, чтобы переключить значение в true.

Теперь ваш анализатор Firefox HTML5 должен быть включен, и вы сможете поэкспериментировать со следующими примерами.

HTML5 — SVG Circle

Ниже приведена HTML5-версия примера SVG, в котором круг будет нарисован с помощью тега <circle>.

Live Demo 

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
		
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — прямоугольник SVG

Ниже приведена HTML5-версия примера SVG, который рисует прямоугольник с помощью тега <rect> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Rectangle</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <rect id = "redrect" width = "300" height = "100" fill = "red" />
      </svg>
   </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Line

Ниже приведена HTML5-версия примера SVG, которая рисует линию с помощью тега <line> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>
      <h2 align = "center">HTML5 SVG Line</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "200" y2 = "100" 
            style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

Вы можете использовать атрибут style, который позволяет вам установить дополнительную информацию о стиле, такую ​​как цвет обводки и заливки, ширина обводки и т. Д.

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Ellipse

Ниже приведена HTML5-версия примера SVG, в котором эллипс будет отображаться с помощью тега <ellipse>.

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
      </svg>
		
   </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Polygon

Ниже приведена HTML5-версия примера SVG, который рисовал бы полигон с помощью тега <polygon> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polygon</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon  points = "20,10 300,20, 170,50" fill = "red" />
      </svg>
   </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Polyline

Ниже приведена HTML5-версия примера SVG, которая рисует полилинию с помощью тега <polyline> —

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Polyline</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
      </svg>
   </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — градиенты SVG

Ниже приведена HTML5-версия примера SVG, которая рисовала бы эллипс с использованием тега <ellipse> и использовала тег <radialGradient> для определения радиального градиента SVG.

Точно так же вы можете использовать тег <linearGradient> для создания линейного градиента SVG.

Live Demo 

<!DOCTYPE html>

<html>
   <head>
      
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
	
   <body>
      <h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%" 
               fy = "50%">
               <stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx = "100" cy = "50" rx = "100" ry = "50" 
            style = "fill:url(#gradient)" />
      </svg>
		
   </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — SVG Star

Ниже приведена HTML5-версия примера SVG, которая будет рисовать звезду с помощью тега <polygon>.

Live Demo 

<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   
   <body>	
      <h2 align = "center">HTML5 SVG Star</h2>
      
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
      </svg>
    </body>
</html>

Это приведет к следующему результату в последней версии Firefox с поддержкой HTML5.

HTML5 — MathML

Синтаксис HTML в HTML5 позволяет использовать элементы MathML внутри документа с использованием тегов <math> … </ math>.

Большинство веб-браузеров могут отображать теги MathML. Если ваш браузер не поддерживает MathML, я бы посоветовал вам использовать последнюю версию Firefox.

Примеры MathML

Ниже приведен действительный документ HTML5 с MathML —

Live Demo 

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>Pythagorean theorem</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
				
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo> = </mo>
				
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
			
      </math>
   </body>
</html>

Это даст следующий результат —

Использование символов MathML

Обратите внимание, что ниже приведена разметка, в которой используются символы & InvisibleTimes; —

Live Demo 

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>			
            <mrow>
				
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
					
               <mo>+</mo>
					
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
					
               <mo>+</mo>
               <mn>4</mn>
					
            </mrow>
				
            <mo>=</mo>
            <mn>0</mn>
				 
         </mrow>
      </math>
   </body>
</html>

Это дало бы следующий результат. Если вы не можете увидеть правильный результат, например x 2 + 4x + 4 = 0, используйте Firefox 3.5 или более позднюю версию.

Это даст следующий результат —

Примеры матричной презентации

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

Live Demo 

<!doctype html>

<html>
   <head>
      <meta charset = "UTF-8">
      <title>MathML Examples</title>
   </head>
	
   <body>
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
		
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
			
            <mfenced open = "[" close="]">
			
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
					
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>

   </body>
</html>

Это даст следующий результат —

Это дало бы следующий результат. Если вы не можете увидеть правильный результат, используйте Firefox 3.5 или более позднюю версию.

MathML

HTML5 — Веб-хранилище

HTML5 вводит два механизма, аналогичных куки-файлам HTTP-сессии, для хранения структурированных данных на стороне клиента и для преодоления следующих недостатков.

  • Куки-файлы включены в каждый HTTP-запрос, тем самым замедляя работу вашего веб-приложения, передавая те же данные.

  • Cookie-файлы включены в каждый HTTP-запрос, тем самым отправляя данные в незашифрованном виде через Интернет.

  • Размер файлов cookie ограничен примерно 4 КБ. Недостаточно для хранения необходимых данных.

Куки-файлы включены в каждый HTTP-запрос, тем самым замедляя работу вашего веб-приложения, передавая те же данные.

Cookie-файлы включены в каждый HTTP-запрос, тем самым отправляя данные в незашифрованном виде через Интернет.

Размер файлов cookie ограничен примерно 4 КБ. Недостаточно для хранения необходимых данных.

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

Последние версии почти каждого браузера поддерживают хранилище HTML5, включая Internet Explorer.

Хранение сессий

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

пример

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

HTML5 вводит атрибут sessionStorage, который будет использоваться сайтами для добавления данных в хранилище сеансов, и он будет доступен для любой страницы с того же сайта, открытого в этом окне, т. Е. Сеанса , и как только вы закроете окно, сессия будет потеряна.

Ниже приведен код, который установит переменную сеанса и получит доступ к этой переменной:

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Это даст следующий результат —

Локальное хранилище

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

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

пример

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

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

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Это даст следующий результат —

Удалить веб-хранилище

Хранение конфиденциальных данных на локальном компьютере может быть опасным и может оставить дыру в безопасности.

Данные хранилища сеансов будут удалены браузерами сразу после завершения сеанса.

Чтобы очистить настройки локального хранилища, вам нужно вызвать localStorage.remove (‘key’) ; где ключ — это ключ значения, которое вы хотите удалить. Если вы хотите очистить все настройки, вам нужно вызвать метод localStorage.clear () .

Ниже приведен код, который очищает полное локальное хранилище:

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Это даст следующий результат —

HTML5 — База данных Web SQL

API базы данных Web SQL на самом деле не является частью спецификации HTML5, но представляет собой отдельную спецификацию, которая представляет набор API для управления базами данных на стороне клиента с помощью SQL.

Я предполагаю, что вы отличный веб-разработчик, и если это так, то, без сомнения, вы бы хорошо знали концепции SQL и RDBMS. Если вы все еще хотите провести сеанс с SQL, тогда вы можете пройти наш учебник по SQL .

База данных Web SQL будет работать в последних версиях Safari, Chrome и Opera.

Основные методы

В спецификации определены следующие три основных метода, которые я собираюсь рассмотреть в этом уроке:

  • openDatabase — этот метод создает объект базы данных либо используя существующую базу данных, либо создавая новую.

  • транзакция — этот метод дает нам возможность контролировать транзакцию и выполнять фиксацию или откат в зависимости от ситуации.

  • executeSql — этот метод используется для выполнения фактического запроса SQL.

openDatabase — этот метод создает объект базы данных либо используя существующую базу данных, либо создавая новую.

транзакция — этот метод дает нам возможность контролировать транзакцию и выполнять фиксацию или откат в зависимости от ситуации.

executeSql — этот метод используется для выполнения фактического запроса SQL.

Открытие базы данных

Метод openDatabase заботится об открытии базы данных, если она уже существует, этот метод создаст ее, если она уже не существует.

Чтобы создать и открыть базу данных, используйте следующий код — 

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Вышеуказанный метод принял следующие пять параметров —

  • Имя базы данных
  • Номер версии
  • Текстовое описание
  • Размер базы данных
  • Создание обратного вызова

Последний и пятый аргумент, callback создания будет вызван, если база данных создается. Однако без этой функции базы данных по-прежнему создаются на лету и корректно корректируются.

Выполнение запросов

Для выполнения запроса вы используете функцию database.transaction (). Эта функция нуждается в единственном аргументе, который заботится о фактическом выполнении запроса следующим образом: 

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
});

Приведенный выше запрос создаст таблицу с именем LOGS в базе данных «mydb».

ВСТАВИТЬ Операция

Для создания записей в таблицу мы добавим простой SQL-запрос в приведенном выше примере следующим образом: 

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

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

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) {   
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log]; 
});

Здесь e_id и e_log являются внешними переменными, а executeSql отображает каждый элемент в аргументе массива на «?».

ЧИТАЙТЕ Операцию

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

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);  

db.transaction(function (tx) { 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

Последний пример

Итак, наконец, давайте сохраним этот пример в полноценном документе HTML5 следующим образом и попробуем запустить его с браузером Safari.

Live Demo 

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
         var msg; 
    
         db.transaction(function (tx) { 
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</p>'; 
            document.querySelector('#status').innerHTML =  msg; 
         })

         db.transaction(function (tx) { 
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
               var len = results.rows.length, i; 
               msg = "<p>Found rows: " + len + "</p>"; 
               document.querySelector('#status').innerHTML +=  msg; 
      
               for (i = 0; i < len; i++) { 
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; 
                  document.querySelector('#status').innerHTML +=  msg; 
               } 
            }, null); 
         }); 
      </script> 
   </head> 
  
   <body> 
      <div id = "status" name = "status">Status Message</div> 
   </body> 
</html>

Это даст следующий результат —

HTML5 — сервер отправил события

Обычные веб-приложения генерируют события, которые отправляются на веб-сервер. Например, простое нажатие на ссылку запрашивает новую страницу с сервера.

Тип событий, которые передаются из веб-браузера на веб-сервер, могут называться отправленными клиентом событиями.

Наряду с HTML5 WHATWG Web Applications 1.0 представляет события, которые передаются с веб-сервера в веб-браузеры и называются событиями, отправляемыми сервером (SSE). Используя SSE, вы можете непрерывно передавать события DOM со своего веб-сервера в браузер посетителя.

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

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

Веб-приложение для SSE

Чтобы использовать отправленные сервером события в веб-приложении, вам необходимо добавить элемент <eventsource> в документ.

Атрибут src элемента <eventsource> должен указывать на URL, который должен обеспечивать постоянное соединение HTTP, которое отправляет поток данных, содержащий события.

URL будет указывать на PHP, PERL или любой скрипт Python, который будет заботиться о последовательной отправке данных о событиях. Ниже приведен простой пример веб-приложения, которое ожидает серверное время. 

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         /* Define event handling logic here */
      </script>
   </head>
   
   <body>
      <div id = "sse">
         <eventsource src = "/cgi-bin/ticker.cgi" />
      </div>
		
      <div id = "ticker">
         <TIME>
      </div>
   </body>
</html>

Серверный скрипт для SSE

Сценарий на стороне сервера должен отправлять заголовок Content-type с указанием типа text / event-stream следующим образом. 

print "Content-Type: text/event-stream\n\n";

После установки Content-Type серверный скрипт будет отправлять тег Event :, за которым следует имя события. Следующий пример отправит Server-Time как имя события, оканчивающееся символом новой строки. 

print "Event: server-time\n";

Последний шаг — отправка данных о событии с использованием тега Data :, за которым следует целое число строкового значения, оканчивающееся символом новой строки, следующим образом: 

$time = localtime();
print "Data: $time\n";

Наконец, следующее — полный ticker.cgi, написанный на Perl — 

#!/usr/bin/perl  
print "Content-Type: text/event-stream\n\n";  

while(true) { 
   print "Event: server-time\n"; 
   $time = localtime(); 
   print "Data: $time\n"; 
   sleep(5); 
}

Обработка событий, отправленных сервером

Давайте изменим наше веб-приложение для обработки отправленных сервером событий. Ниже приведен последний пример. 

<!DOCTYPE HTML> 

<html>  
   <head> 
  
      <script type = "text/javascript"> 
         document.getElementsByTagName("eventsource")[0].addEventListener("server-time", 
         eventHandler, false); 
    
         function eventHandler(event) { 

            // Alert time sent by the server 
            document.querySelector('#ticker').innerHTML = event.data; 
         } 
      </script> 
   </head> 
  
   <body> 
      <div id = "sse"> 
         <eventsource src = "/cgi-bin/ticker.cgi" /> 
      </div> 
   
      <div id = "ticker" name = "ticker"> 
         [TIME] 
      </div> 
   </body> 
</html>

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

HTML5 — WebSockets

WebSockets — это технология двунаправленной связи следующего поколения для веб-приложений, которая работает через один сокет и предоставляется через интерфейс JavaScript в браузерах, совместимых с HTML 5.

Получив соединение Web Socket с веб-сервером, вы можете отправлять данные из браузера на сервер, вызывая метод send () , и получать данные с сервера в браузер с помощью обработчика событий onmessage .

Ниже приведен API, который создает новый объект WebSocket. 

var Socket = new WebSocket(url, [protocal] );

Здесь первый аргумент, url, указывает URL-адрес для подключения. Второй атрибут, protocol, является необязательным и, если он присутствует, указывает суб-протокол, который сервер должен поддерживать, чтобы соединение было успешным.

Атрибуты WebSocket

Ниже приведен атрибут объекта WebSocket. Предполагая, что мы создали объект Socket, как упомянуто выше —

Sr.No. Атрибут и описание
1

Socket.readyState

Атрибут readSly readyState представляет состояние соединения. Может иметь следующие значения —

  • Значение 0 указывает, что соединение еще не установлено.

  • Значение 1 указывает, что соединение установлено и связь возможна.

  • Значение 2 указывает, что соединение проходит рукопожатие закрытия.

  • Значение 3 указывает, что соединение было закрыто или не может быть открыто.

2

Socket.bufferedAmount

Атрибут readonly bufferedAmount представляет количество байтов текста UTF-8, которые были поставлены в очередь с помощью метода send ().

Socket.readyState

Атрибут readSly readyState представляет состояние соединения. Может иметь следующие значения —

Значение 0 указывает, что соединение еще не установлено.

Значение 1 указывает, что соединение установлено и связь возможна.

Значение 2 указывает, что соединение проходит рукопожатие закрытия.

Значение 3 указывает, что соединение было закрыто или не может быть открыто.

Socket.bufferedAmount

Атрибут readonly bufferedAmount представляет количество байтов текста UTF-8, которые были поставлены в очередь с помощью метода send ().

События WebSocket

Ниже приведены события, связанные с объектом WebSocket. Предполагая, что мы создали объект Socket, как упомянуто выше —

Событие Обработчик события Описание
открыть Socket.onopen Это событие происходит, когда установлено сокетное соединение.
сообщение Socket.onmessage Это событие происходит, когда клиент получает данные с сервера.
ошибка Socket.onerror Это событие происходит, когда есть какая-либо ошибка в связи.
близко Socket.onclose Это событие происходит, когда соединение закрыто.

Методы WebSocket

Ниже приведены методы, связанные с объектом WebSocket. Предполагая, что мы создали объект Socket, как упомянуто выше —

Sr.No. Метод и описание
1

Socket.send ()

Метод send (data) передает данные, используя соединение.

2

Socket.close ()

Метод close () будет использоваться для завершения любого существующего соединения.

Socket.send ()

Метод send (data) передает данные, используя соединение.

Socket.close ()

Метод close () будет использоваться для завершения любого существующего соединения.

Пример WebSocket

WebSocket — это стандартный двунаправленный сокет TCP между клиентом и сервером. Сокет начинается как HTTP-соединение, а затем «обновляется» до TCP-сокета после HTTP-рукопожатия. После рукопожатия любая сторона может отправлять данные.

HTML и JavaScript код на стороне клиента

На момент написания этого руководства, было всего несколько веб-браузеров, поддерживающих интерфейс WebSocket (). Вы можете попробовать следующий пример с последними версиями Chrome, Mozilla, Opera и Safari. 

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is closed..."); 
               };
            } else {
              
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Установите pywebsocket

Перед тестированием вышеуказанной клиентской программы вам необходим сервер, который поддерживает WebSocket. Загрузите файл mod_pywebsocket-xxxtar.gz из pywebsocket, который предназначен для предоставления расширения веб-сокета для сервера Apache HTTP, и установите его, выполнив следующие действия.

  • Разархивируйте и распакуйте загруженный файл.

  • Зайдите в каталог pywebsocket-xxx / src / .

  • $ python setup.py build

  • $ sudo python setup.py install

  • Затем прочитайте документ по —

    • $ pydoc mod_pywebsocket

Разархивируйте и распакуйте загруженный файл.

Зайдите в каталог pywebsocket-xxx / src / .

$ python setup.py build

$ sudo python setup.py install

Затем прочитайте документ по —

Это установит его в вашу среду Python.

Запустите сервер

Перейдите в папку pywebsocket-xxx / src / mod_pywebsocket и выполните следующую команду — 

$sudo python standalone.py -p 9998 -w ../example/

Это запустит сервер, прослушивающий порт 9998, и будет использовать каталог обработчиков, указанный в опции -w, где находится наш echo_wsh.py.

Теперь с помощью браузера Chrome откройте HTML-файл, который вы создали в начале. Если ваш браузер поддерживает WebSocket (), вы получите предупреждение о том, что ваш браузер поддерживает WebSocket, и, наконец, когда вы нажмете «Запустить WebSocket», вы получите сообщение Goodbye, отправленное серверным скриптом.

HTML5 — холст

Элемент HTML5 <canvas> предоставляет простой и эффективный способ рисования графики с использованием JavaScript. Его можно использовать для рисования графиков, создания фото-композиций или создания простых (и не очень простых) анимаций.

Вот простой элемент <canvas>, который имеет только два определенных атрибута: ширину и высоту плюс все основные атрибуты HTML5, такие как id, name и class и т. Д. 

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Этот элемент <canvas> можно легко найти в DOM с помощью метода getElementById () следующим образом: 

var canvas = document.getElementById("mycanvas");

Давайте рассмотрим простой пример использования элемента <canvas> в документе HTML5.

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Это даст следующий результат —

Контекст рендеринга

Элемент <canvas> изначально пуст, и для отображения чего-либо сценарий сначала должен получить доступ к контексту рендеринга и нарисовать его.

Элемент canvas имеет метод DOM getContext , используемый для получения контекста рендеринга и его функций рисования. Эта функция принимает один параметр, тип контекста 2d .

Ниже приведен код для получения необходимого контекста и проверки, поддерживает ли ваш браузер элемент <canvas> — 

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Поддержка браузера

Последние версии Firefox, Safari, Chrome и Opera поддерживают HTML5 Canvas, но IE8 изначально не поддерживает Canvas.

Вы можете использовать ExplorerCanvas для поддержки холста через Internet Explorer. Вам просто нужно включить этот JavaScript следующим образом — 

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

HTML5 Canvas Примеры

В этом руководстве рассматриваются следующие примеры, связанные с элементом HTML5 <canvas>.

Sr.No. Примеры и описание
1 Рисование прямоугольников

Узнайте, как рисовать прямоугольник с помощью элемента HTML5 <canvas>

2 Рисование контуров

Узнайте, как создавать фигуры, используя контуры в элементе HTML5 <canvas>

3 Рисование линий

Узнайте, как рисовать линии, используя элемент HTML5 <canvas>

4 Рисование Безье

Узнайте, как нарисовать кривую Безье, используя HTML5 элемент <canvas>

5 Рисование квадратичного

Узнайте, как нарисовать квадратичную кривую, используя элемент HTML5 <canvas>

6 Использование изображений

Узнайте, как использовать изображения с элементом HTML5 <canvas>

7 Создать градиенты

Узнайте, как создавать градиенты, используя элемент HTML5 <canvas>

8 Стили и Цвета

Узнайте, как применять стили и цвета с помощью элемента HTML5 <canvas>

9 Текст и шрифты

Узнайте, как рисовать удивительный текст, используя разные шрифты и их размер.

10 Узор и тень

Узнайте, как рисовать различные узоры и тени.

11 Canvas States

Узнайте, как сохранять и восстанавливать состояния холста при выполнении сложных рисунков на холсте.

12 Перевод холста

Этот метод используется для перемещения холста и его источника в другую точку сетки.

13 Вращение холста

Этот метод используется для поворота холста вокруг текущего источника.

14 Масштабирование холста

Этот метод используется для увеличения или уменьшения единиц в сетке холста.

15 Canvas Transform

Эти методы позволяют вносить изменения непосредственно в матрицу преобразования.

16 Холст композиция

Этот метод используется для маскировки определенных областей или очистки участков на холсте.

17 Холст Анимация

Узнайте, как создать базовую анимацию, используя HTML5 canvas и JavaScript.

Узнайте, как рисовать прямоугольник с помощью элемента HTML5 <canvas>

Узнайте, как создавать фигуры, используя контуры в элементе HTML5 <canvas>

Узнайте, как рисовать линии, используя элемент HTML5 <canvas>

Узнайте, как нарисовать кривую Безье, используя HTML5 элемент <canvas>

Узнайте, как нарисовать квадратичную кривую, используя элемент HTML5 <canvas>

Узнайте, как использовать изображения с элементом HTML5 <canvas>

Узнайте, как создавать градиенты, используя элемент HTML5 <canvas>

Узнайте, как применять стили и цвета с помощью элемента HTML5 <canvas>

Узнайте, как рисовать удивительный текст, используя разные шрифты и их размер.

Узнайте, как рисовать различные узоры и тени.

Узнайте, как сохранять и восстанавливать состояния холста при выполнении сложных рисунков на холсте.

Этот метод используется для перемещения холста и его источника в другую точку сетки.

Этот метод используется для поворота холста вокруг текущего источника.

Этот метод используется для увеличения или уменьшения единиц в сетке холста.

Эти методы позволяют вносить изменения непосредственно в матрицу преобразования.

Этот метод используется для маскировки определенных областей или очистки участков на холсте.

Узнайте, как создать базовую анимацию, используя HTML5 canvas и JavaScript.

HTML5 — аудио и видео

Функции HTML5 включают встроенную поддержку аудио и видео без использования Flash.

HTML5-теги <audio> и <video> упрощают добавление мультимедиа на веб-сайт. Вам необходимо установить атрибут src для идентификации источника мультимедиа и включить атрибут элементов управления, чтобы пользователь мог воспроизводить и приостанавливать мультимедиа.

Встраивание видео

Вот самая простая форма встраивания видеофайла в вашу веб-страницу — 

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

В текущем проекте спецификации HTML5 не указано, какие форматы видео браузеры должны поддерживать в теге video. Но наиболее часто используемые форматы видео —

  • Ogg — файлы Ogg с видеокодеком Thedora и аудиокодеком Vorbis.

  • mpeg4 — файлы MPEG4 с видеокодеком H.264 и аудиокодеком AAC.

Ogg — файлы Ogg с видеокодеком Thedora и аудиокодеком Vorbis.

mpeg4 — файлы MPEG4 с видеокодеком H.264 и аудиокодеком AAC.

Вы можете использовать тег <source>, чтобы указать медиа, а также тип медиа и многие другие атрибуты. Элемент video позволяет использовать несколько исходных элементов, а браузер будет использовать первый распознанный формат —

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

Это даст следующий результат —

Спецификация видео атрибутов

Видео тег HTML5 может иметь ряд атрибутов для управления внешним видом и различными функциями элемента управления —

Sr.No. Атрибут и описание
1

Автовоспроизведение

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

2

автобуферизации

Если указан этот логический атрибут, видео автоматически начнет буферизацию, даже если для него не установлено автоматическое воспроизведение.

3

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением видео, включая громкость, поиск и приостановку / возобновление воспроизведения.

4

рост

Этот атрибут указывает высоту области отображения видео в пикселях CSS.

5

петля

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

6

предварительная нагрузка

Этот атрибут указывает, что видео будет загружено при загрузке страницы и готово к запуску. Игнорируется, если автозапуск присутствует.

7

плакат

Это URL-адрес изображения, которое будет отображаться до тех пор, пока пользователь не начнет воспроизведение или поиск.

8

ЦСИ

URL видео для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

9

ширина

Этот атрибут указывает ширину области отображения видео в пикселях CSS.

Автовоспроизведение

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

автобуферизации

Если указан этот логический атрибут, видео автоматически начнет буферизацию, даже если для него не установлено автоматическое воспроизведение.

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением видео, включая громкость, поиск и приостановку / возобновление воспроизведения.

рост

Этот атрибут указывает высоту области отображения видео в пикселях CSS.

петля

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

предварительная нагрузка

Этот атрибут указывает, что видео будет загружено при загрузке страницы и готово к запуску. Игнорируется, если автозапуск присутствует.

плакат

Это URL-адрес изображения, которое будет отображаться до тех пор, пока пользователь не начнет воспроизведение или поиск.

ЦСИ

URL видео для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

ширина

Этот атрибут указывает ширину области отображения видео в пикселях CSS.

Встраивание аудио

HTML5 поддерживает тег <audio>, который используется для встраивания звукового содержимого в документ HTML или XHTML следующим образом. 

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

Текущий проект спецификации HTML5 не указывает, какие аудиоформаты должны поддерживать браузеры в теге audio. Но наиболее часто используемыми аудиоформатами являются ogg, mp3 и wav .

Вы можете использовать <source & ggt; тег, чтобы указать медиа вместе с типом медиа и многими другими атрибутами. Аудиоэлемент позволяет использовать несколько исходных элементов, и браузер будет использовать первый распознанный формат —

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

Это даст следующий результат —

Спецификация аудио атрибутов

Аудио тег HTML5 может иметь ряд атрибутов для управления внешним видом и различными функциями этого элемента управления.

Sr.No. Атрибут и описание
1

Автовоспроизведение

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

2

автобуферизации

Если указан этот логический атрибут, звук автоматически начнет буферизацию, даже если он не настроен на автоматическое воспроизведение.

3

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением звука, включая громкость, поиск и приостановку / возобновление воспроизведения.

4

петля

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

5

предварительная нагрузка

Этот атрибут указывает, что аудио будет загружено при загрузке страницы и готово к запуску. Игнорируется, если автозапуск присутствует.

6

ЦСИ

URL аудио для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

Автовоспроизведение

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

автобуферизации

Если указан этот логический атрибут, звук автоматически начнет буферизацию, даже если он не настроен на автоматическое воспроизведение.

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением звука, включая громкость, поиск и приостановку / возобновление воспроизведения.

петля

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

предварительная нагрузка

Этот атрибут указывает, что аудио будет загружено при загрузке страницы и готово к запуску. Игнорируется, если автозапуск присутствует.

ЦСИ

URL аудио для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

Обработка медиа-событий

Аудио и видео тег HTML5 может иметь ряд атрибутов для управления различными функциями элемента управления с помощью JavaScript —

S.No. Описание события
1

выкинуть

Это событие генерируется, когда воспроизведение прерывается.

2

может играть

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

3

закончился

Это событие генерируется после завершения воспроизведения.

4

ошибка

Это событие генерируется при возникновении ошибки.

5

loadeddata

Это событие генерируется, когда первый кадр носителя завершил загрузку.

6

loadstart

Это событие генерируется, когда начинается загрузка носителя.

7

Пауза

Это событие генерируется, когда воспроизведение приостановлено.

8

играть

Это событие генерируется, когда воспроизведение начинается или возобновляется.

9

прогресс

Это событие генерируется периодически для информирования о ходе загрузки носителя.

10

ratechange

Это событие генерируется при изменении скорости воспроизведения.

11

добившиеся

Это событие генерируется, когда операция поиска завершается.

12

Ищу

Это событие генерируется, когда начинается операция поиска.

13

приостановить

Это событие генерируется, когда загрузка носителя приостановлена.

14

volumechange

Это событие генерируется при изменении громкости звука.

15

ожидание

Это событие генерируется, когда запрошенная операция (такая как воспроизведение) задерживается в ожидании завершения другой операции (такой как поиск).

выкинуть

Это событие генерируется, когда воспроизведение прерывается.

может играть

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

закончился

Это событие генерируется после завершения воспроизведения.

ошибка

Это событие генерируется при возникновении ошибки.

loadeddata

Это событие генерируется, когда первый кадр носителя завершил загрузку.

loadstart

Это событие генерируется, когда начинается загрузка носителя.

Пауза

Это событие генерируется, когда воспроизведение приостановлено.

играть

Это событие генерируется, когда воспроизведение начинается или возобновляется.

прогресс

Это событие генерируется периодически для информирования о ходе загрузки носителя.

ratechange

Это событие генерируется при изменении скорости воспроизведения.

добившиеся

Это событие генерируется, когда операция поиска завершается.

Ищу

Это событие генерируется, когда начинается операция поиска.

приостановить

Это событие генерируется, когда загрузка носителя приостановлена.

volumechange

Это событие генерируется при изменении громкости звука.

ожидание

Это событие генерируется, когда запрошенная операция (такая как воспроизведение) задерживается в ожидании завершения другой операции (такой как поиск).

Ниже приведен пример, который позволяет воспроизвести данное видео —

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

Это даст следующий результат —

Настройка серверов для медиа-типа

Большинство серверов по умолчанию не поддерживают носители Ogg или mp4 с правильными типами MIME, поэтому вам, вероятно, потребуется добавить соответствующую конфигурацию для этого. 

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

HTML5 — геолокация

HTML5 Geolocation API позволяет вам поделиться своим местоположением с вашими любимыми веб-сайтами. JavaScript может фиксировать вашу широту и долготу и может быть отправлен на бэкэнд-сервер и выполнять такие интересные вещи, как поиск местных предприятий или отображение вашего местоположения на карте.

Сегодня большинство браузеров и мобильных устройств поддерживают Geolocation API. API геолокации работают с новым свойством объекта глобального навигатора, т.е. Геолокационный объект, который можно создать следующим образом: 

var geolocation = navigator.geolocation;

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

Методы геолокации

Объект геолокации предоставляет следующие методы:

Sr.No. Метод и описание
1 getCurrentPosition ()

Этот метод извлекает текущее географическое местоположение пользователя.

2 watchPosition ()

Этот метод извлекает периодические обновления о текущем географическом местоположении устройства.

3 clearWatch ()

Этот метод отменяет текущий вызов watchPosition.

Этот метод извлекает текущее географическое местоположение пользователя.

Этот метод извлекает периодические обновления о текущем географическом местоположении устройства.

Этот метод отменяет текущий вызов watchPosition.

пример

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

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

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

Свойства местоположения

Методы геолокации getCurrentPosition () и getPositionUsingMethodName () определяют метод обратного вызова, который получает информацию о местоположении. Эти методы вызываются асинхронно с объектом Position, который хранит полную информацию о местоположении.

Объект Position указывает текущее географическое местоположение устройства. Местоположение выражается в виде набора географических координат вместе с информацией о курсе и скорости.

В следующей таблице описаны свойства объекта Position. Для необязательных свойств, если система не может предоставить значение, значение свойства устанавливается равным нулю.

Имущество Тип Описание
Coords объекты Определяет географическое местоположение устройства. Местоположение выражается в виде набора географических координат вместе с информацией о курсе и скорости.
coords.latitude Число Определяет оценку широты в десятичных градусах. Диапазон значений: [-90.00, +90.00].
coords.longitude Число Определяет оценку долготы в десятичных градусах. Диапазон значений: [-180.00, +180.00].
coords.altitude Число [Необязательно] Указывает оценку высоты в метрах над эллипсоидом WGS 84.
coords.accuracy Число [Необязательно] Определяет точность оценок широты и долготы в метрах.
coords.altitudeAccuracy Число [Необязательно] Определяет точность оценки высоты в метрах.
coords.heading Число [Необязательно] Определяет текущее направление движения устройства в градусах, считая по часовой стрелке относительно истинного севера.
coords.speed Число [Необязательно] Указывает текущую скорость движения устройства в метрах в секунду.
отметка времени Дата Указывает время, когда была получена информация о местоположении и создан объект Position.

пример

Ниже приведен пример кода, который использует объект Position. Здесь метод showLocation является методом обратного вызова — 

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

Обработка ошибок

Геолокация сложна, и очень нужно отлавливать любые ошибки и обрабатывать их корректно.

Методы геолокации getCurrentPosition () и watchPosition () используют метод обратного вызова обработчика ошибок, который предоставляет объект PositionError . Этот объект имеет следующие два свойства —

Имущество Тип Описание
код Число Содержит числовой код ошибки.
сообщение строка Содержит понятное человеку описание ошибки.

В следующей таблице описаны возможные коды ошибок, возвращаемые в объекте PositionError.

Код постоянная Описание
0 НЕИЗВЕСТНАЯ ОШИБКА Метод не смог получить местоположение устройства из-за неизвестной ошибки.
1 ДОСТУП ЗАПРЕЩЕН Метод не смог получить местоположение устройства, поскольку у приложения нет разрешения на использование службы определения местоположения.
2 POSITION_UNAVAILABLE Местоположение устройства не может быть определено.
3 АУТ Метод не смог получить информацию о местоположении в течение указанного максимального интервала ожидания.

пример

Ниже приведен пример кода, который использует объект PositionError. Здесь errorHandler метод является методом обратного вызова — 

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

Параметры позиции

Ниже приведен фактический синтаксис метода getCurrentPosition (): 

getCurrentPosition(callback, ErrorCallback, options)

Здесь третьим аргументом является объект PositionOptions, который определяет набор параметров для получения географического местоположения устройства.

Ниже приведены параметры, которые можно указать в качестве третьего аргумента.

Имущество Тип Описание
enableHighAccuracy логический Указывает, хочет ли виджет получить максимально точную оценку местоположения. По умолчанию это ложно.
Тайм-аут Число Свойство timeout — это количество миллисекунд, в течение которых ваше веб-приложение готово ждать позиции.
maximumAge Число Задает время истечения в миллисекундах для кэшированной информации о местоположении.

пример

Ниже приведен пример кода, который показывает, как использовать вышеупомянутые методы — 

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}

HTML5 — микроданные

Микроданные — это стандартизированный способ предоставления дополнительной семантики на ваших веб-страницах.

Микроданные позволяют вам определять собственные настраиваемые элементы и начинать встраивать настраиваемые свойства в свои веб-страницы. На высоком уровне микроданные состоят из группы пар имя-значение.

Группы называются элементами , и каждая пара имя-значение является свойством . Предметы и свойства представлены обычными элементами.

пример

  • Для создания элемента используется атрибут itemscope .

  • Чтобы добавить свойство к элементу, атрибут itemprop используется у одного из потомков элемента.

Для создания элемента используется атрибут itemscope .

Чтобы добавить свойство к элементу, атрибут itemprop используется у одного из потомков элемента.

Здесь есть два элемента, каждый из которых имеет свойство «имя» —

Live Demo 

<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

Это даст следующий результат —

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

Глобальные атрибуты

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

Sr.No. Атрибут и описание
1

itemscope

Это используется для создания предмета. Атрибут itemscope является логическим атрибутом, который сообщает, что на этой странице есть микроданные, и именно здесь они начинаются.

2

тип элемента

Этот атрибут является допустимым URL-адресом, который определяет элемент и предоставляет контекст для свойств.

3

Itemid

Этот атрибут является глобальным идентификатором для элемента.

4

itemprop

Этот атрибут определяет свойство элемента.

5

itemref

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

itemscope

Это используется для создания предмета. Атрибут itemscope является логическим атрибутом, который сообщает, что на этой странице есть микроданные, и именно здесь они начинаются.

тип элемента

Этот атрибут является допустимым URL-адресом, который определяет элемент и предоставляет контекст для свойств.

Itemid

Этот атрибут является глобальным идентификатором для элемента.

itemprop

Этот атрибут определяет свойство элемента.

itemref

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

Свойства Типы данных

Свойства обычно имеют значения, которые являются строками, как указано в примере выше, но они также могут иметь значения, которые являются URL-адресами. В следующем примере есть одно свойство, «изображение», значением которого является URL — 

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

Свойства также могут иметь значения, которые являются датами, временем или датами и временем. Это достигается с помощью элемента time и его атрибута datetime .

Live Demo 

<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

Это даст следующий результат —

Сами свойства также могут быть группами пар имя-значение, помещая атрибут itemscope в элемент, который объявляет свойство.

Поддержка API микроданных

Если браузер поддерживает API микроданных HTML5, в глобальном объекте документа будет функция getItems (). Если браузер не поддерживает микроданные, функция getItems () будет неопределенной. 

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr пока не поддерживает проверку API микроданных, поэтому вам нужно использовать функцию, подобную приведенной выше.

Стандарт микроданных HTML5 включает в себя как разметку HTML (в основном для поисковых систем), так и набор функций DOM (главным образом для браузеров).

Вы можете включить разметку микроданных в свои веб-страницы, и поисковые системы, которые не понимают атрибуты микроданных, просто проигнорируют их. Но если вам нужно получить доступ к микроданным или манипулировать ими через DOM, вам нужно проверить, поддерживает ли браузер API DOM для микроданных.

Определение словаря микроданных

Для определения словаря микроданных вам нужен URL-адрес пространства имен, который указывает на работающую веб-страницу. Например, https://data-vocabulary.org/Person может использоваться как пространство имен для личного словаря микроданных со следующими именованными свойствами:

  • имя — имя человека в виде простой строки

  • Фото — URL-адрес изображения человека.

  • URL — сайт, принадлежащий человеку.

имя — имя человека в виде простой строки

Фото — URL-адрес изображения человека.

URL — сайт, принадлежащий человеку.

Использование о свойствах человека микроданных может быть следующим:

Live Demo 

<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

Это даст следующий результат —

Google поддерживает микроданные как часть своей программы Rich Snippets. Когда сканер Google анализирует вашу страницу и находит свойства микроданных, соответствующие словарю http://datavocabulary.org/Person, он анализирует эти свойства и сохраняет их вместе с остальными данными страницы.

Вы можете протестировать приведенный выше пример, используя Rich Snippets Testing Tool, используя http://www.tutorialspoint.com/html5/microdata.htm

Для дальнейшего развития микроданных вы всегда можете обратиться к микроданным HTML5 .

HTML5 — перетаскивание

Drag and Drop (DnD) — это мощная концепция пользовательского интерфейса, которая позволяет легко копировать, изменять порядок и удалять элементы с помощью щелчков мыши. Это позволяет пользователю щелкнуть и удерживать кнопку мыши над элементом, перетащить его в другое место и отпустить кнопку мыши, чтобы поместить элемент туда.

Чтобы достичь функциональности перетаскивания с традиционным HTML4, разработчикам придется либо использовать сложное программирование JavaScript, либо другие JavaScript-фреймворки, такие как jQuery и т. Д.

Теперь в HTML 5 появился API Drag and Drop (DnD), который обеспечивает встроенную поддержку DnD в браузере, что значительно упрощает кодирование.

HTML 5 DnD поддерживается всеми основными браузерами, такими как Chrome, Firefox 3.5, Safari 4 и т. Д.

Перетаскивание событий

Существует ряд событий, которые запускаются на разных этапах операции перетаскивания. Эти события перечислены ниже —

Sr.No. События и описание
1

dragstart

Запускается, когда пользователь начинает перетаскивание объекта.

2

DragEnter

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

3

перетащить за

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

4

DragLeave

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

5

тащить, тянуть

Срабатывает каждый раз, когда мышь перемещается во время перетаскивания объекта.

6

падение

Событие отбрасывания вызывается для элемента, в котором произошло сбрасывание в конце операции перетаскивания. Слушатель будет отвечать за извлечение перетаскиваемых данных и вставку их в место отбрасывания.

7

dragend

Запускается, когда пользователь отпускает кнопку мыши при перетаскивании объекта.

dragstart

Запускается, когда пользователь начинает перетаскивание объекта.

DragEnter

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

перетащить за

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

DragLeave

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

тащить, тянуть

Срабатывает каждый раз, когда мышь перемещается во время перетаскивания объекта.

падение

Событие отбрасывания вызывается для элемента, в котором произошло сбрасывание в конце операции перетаскивания. Слушатель будет отвечать за извлечение перетаскиваемых данных и вставку их в место отбрасывания.

dragend

Запускается, когда пользователь отпускает кнопку мыши при перетаскивании объекта.

Примечание. Обратите внимание, что запускаются только события перетаскивания. События мыши, такие как mousemove , не запускаются во время операции перетаскивания.

Объект DataTransfer

Методы прослушивателя событий для всех событий перетаскивания принимают объект Event, который имеет атрибут readonly, называемый dataTransfer .

Event.dataTransfer возвращает объект DataTransfer, связанный с событием, следующим образом: 

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

Объект DataTransfer содержит данные об операции перетаскивания. Эти данные могут быть получены и установлены с точки зрения различных атрибутов, связанных с объектом DataTransfer, как объяснено ниже —

Sr.No. Атрибуты DataTransfer и их описание
1

dataTransfer.dropEffect [= значение]

  • Возвращает вид операции, которая выбрана в данный момент.

  • Этот атрибут может быть установлен, чтобы изменить выбранную операцию.

  • Возможные значения: none, copy, link и move.

2

dataTransfer.effectAllowed [= значение]

  • Возвращает виды операций, которые должны быть разрешены.

  • Этот атрибут может быть установлен, чтобы изменить разрешенные операции.

  • Возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и неинициализированные .

3

dataTransfer.types

Возвращает DOMStringList, перечисляющий форматы, которые были установлены в событии dragstart. Кроме того, если какие-либо файлы перетаскиваются, то одним из типов будет строка «Файлы».

4

dataTransfer.clearData ([формат])

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

5

dataTransfer.setData (формат, данные)

Добавляет указанные данные.

6

data = dataTransfer.getData (формат)

Возвращает указанные данные. Если таких данных нет, возвращает пустую строку.

7

dataTransfer.files

Возвращает FileList перетаскиваемых файлов, если таковые имеются.

8

dataTransfer.setDragImage (element, x, y)

Использует данный элемент для обновления обратной связи перетаскивания, заменяя любую ранее указанную обратную связь.

9

dataTransfer.addElement (элемент)

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

dataTransfer.dropEffect [= значение]

Возвращает вид операции, которая выбрана в данный момент.

Этот атрибут может быть установлен, чтобы изменить выбранную операцию.

Возможные значения: none, copy, link и move.

dataTransfer.effectAllowed [= значение]

Возвращает виды операций, которые должны быть разрешены.

Этот атрибут может быть установлен, чтобы изменить разрешенные операции.

Возможные значения: none, copy, copyLink, copyMove, link, linkMove, move, all и неинициализированные .

dataTransfer.types

Возвращает DOMStringList, перечисляющий форматы, которые были установлены в событии dragstart. Кроме того, если какие-либо файлы перетаскиваются, то одним из типов будет строка «Файлы».

dataTransfer.clearData ([формат])

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

dataTransfer.setData (формат, данные)

Добавляет указанные данные.

data = dataTransfer.getData (формат)

Возвращает указанные данные. Если таких данных нет, возвращает пустую строку.

dataTransfer.files

Возвращает FileList перетаскиваемых файлов, если таковые имеются.

dataTransfer.setDragImage (element, x, y)

Использует данный элемент для обновления обратной связи перетаскивания, заменяя любую ранее указанную обратную связь.

dataTransfer.addElement (элемент)

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

Drag and Drop Process

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

Шаг 1 — Создание объекта перетаскиваемым

Вот шаги, которые необходимо предпринять —

  • Если вы хотите перетащить элемент, вам нужно установить для атрибута draggable значение true для этого элемента.

  • Установите прослушиватель событий для dragstart, в котором хранятся перетаскиваемые данные.

  • Dragstart прослушивателя событий установит разрешенные эффекты (копирование, перемещение, ссылка или некоторая комбинация).

Если вы хотите перетащить элемент, вам нужно установить для атрибута draggable значение true для этого элемента.

Установите прослушиватель событий для dragstart, в котором хранятся перетаскиваемые данные.

Dragstart прослушивателя событий установит разрешенные эффекты (копирование, перемещение, ссылка или некоторая комбинация).

Ниже приведен пример для перетаскивания объекта:

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Это даст следующий результат —

Шаг 2 — Отбрасывание объекта

Чтобы принять отбрасывание, цель отбрасывания должна прослушать как минимум три события.

  • Событие dragenter , которое используется, чтобы определить, должна ли цель отбрасывания принять отбрасывание. Если отбрасывание должно быть принято, то это событие должно быть отменено.

  • Событие dragover , которое используется для определения того, какая обратная связь должна быть показана пользователю. Если событие отменяется, то обратная связь (обычно курсор) обновляется на основе значения атрибута dropEffect.

  • Наконец, событие сброса , которое позволяет выполнить фактическое удаление.

Событие dragenter , которое используется, чтобы определить, должна ли цель отбрасывания принять отбрасывание. Если отбрасывание должно быть принято, то это событие должно быть отменено.

Событие dragover , которое используется для определения того, какая обратная связь должна быть показана пользователю. Если событие отменяется, то обратная связь (обычно курсор) обновляется на основе значения атрибута dropEffect.

Наконец, событие сброса , которое позволяет выполнить фактическое удаление.

Ниже приведен пример для перетаскивания объекта в другой объект.

Live Demo 

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

Это даст следующий результат —

HTML5 — веб-работники

JavaScript был разработан для работы в однопоточной среде, что означает, что несколько сценариев не могут выполняться одновременно. Рассмотрим ситуацию, когда вам нужно обрабатывать события пользовательского интерфейса, запрашивать и обрабатывать большие объемы данных API и манипулировать DOM.

JavaScript повесит ваш браузер в ситуации, когда загрузка процессора высока. Давайте возьмем простой пример, где JavaScript проходит большой цикл —

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         function bigLoop() {
            
            for (var i = 0; i <= 10000; i += 1) {
               var j = i;
            }
            alert("Completed " + j + "iterations" );
         }
         
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
      
   </head>
   
   <body>
      <input type = "button" onclick = "bigLoop();" value = "Big Loop" />
      <input type = "button" onclick = "sayHello();" value = "Say Hello" />
   </body>
</html>

Это даст следующий результат —

Когда вы нажимаете кнопку Big Loop, в Firefox отображается следующий результат —

Большая петля

Что такое веб-работники?

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

Web Workers допускают длительные сценарии, которые не прерываются сценариями, реагирующими на щелчки или другие взаимодействия с пользователем, и позволяют выполнять длинные задачи, не уступая при этом отзывчивости страницы.

Web Workers — это фоновые сценарии, они относительно тяжелые и не предназначены для использования в больших количествах. Например, было бы неуместно запускать по одному рабочему для каждого пикселя изображения в четыре мегапикселя.

Когда скрипт выполняется внутри Web Worker, он не может получить доступ к объекту окна веб-страницы (window.document), что означает, что Web Workers не имеют прямого доступа к веб-странице и API DOM. Хотя веб-работники не могут блокировать пользовательский интерфейс браузера, они все равно могут потреблять циклы ЦП и делать систему менее отзывчивой.

Как работают веб-работники?

Web Workers инициализируются с помощью URL-адреса файла JavaScript, который содержит код, который будет выполнять работник. Этот код устанавливает прослушиватели событий и связывается со скриптом, который породил его с главной страницы. Ниже приводится простой синтаксис — 

var worker = new Worker('bigLoop.js');

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

Если в вашем приложении есть несколько поддерживаемых файлов JavaScript, вы можете импортировать их методом importScripts (), который принимает имена файлов в качестве аргумента, разделенных запятой, следующим образом: 

importScripts("helper.js", "anotherHelper.js");

Как только Web Worker создается, связь между web-работником и его родительской страницей осуществляется с помощью метода postMessage () . В зависимости от вашего браузера / версии, postMessage () может принимать либо строку, либо объект JSON в качестве единственного аргумента.

Сообщение, переданное Web Worker, доступно с помощью события onmessage на главной странице. Теперь давайте напишем наш пример bigLoop с использованием Web Worker. Ниже находится главная страница (hello.htm), которая порождает веб-работника для выполнения цикла и возврата окончательного значения переменной j —

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Ниже приводится содержимое файла bigLoop.js. Это использует API postMessage () для передачи сообщения обратно на главную страницу — 

for (var i = 0; i <= 1000000000; i += 1) {
   var j = i;
}
postMessage(j);

Это даст следующий результат —

Остановка веб-работников

Веб-работники не останавливаются сами по себе, но запустившая их страница может остановить их, вызвав метод terminate () . 

worker.terminate();

Прекращенный веб-работник больше не будет отвечать на сообщения или выполнять дополнительные вычисления. Вы не можете перезапустить работника; вместо этого вы можете создать нового работника, используя тот же URL.

Обработка ошибок

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

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         worker.onerror = function (event) {
            console.log(event.message, event);
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

Проверка поддержки браузера

Ниже приводится синтаксис для обнаружения поддержки функции веб-работника, доступной в браузере:

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      <script src = "/js/modernizr-1.5.min.js"></script>
      
      <script>
      function myFunction() {
         
         if (Modernizr.webworkers) {
            alert("Congratulation!! you have web workers support." );
         } else {
            alert("Sorry!! you do not have web workers support." );
         }
      }
      </script>
   </head>
   
   <body>
      <button onclick = "myFunction()">Click me</button>
   </body>
</html>

Это даст следующий результат —

HTML5 — IndexedDB

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

Зачем использовать indexeddb?

W3C объявил, что база данных Web SQL является устаревшей спецификацией локального хранилища, поэтому веб-разработчик больше не должен использовать эту технологию. indexeddb является альтернативой для базы данных web SQL и более эффективен, чем старые технологии.

Характеристики

  • хранит значения пары ключей
  • это не реляционная база данных
  • IndexedDB API в основном асинхронный
  • это не структурированный язык запросов
  • он поддерживает доступ к данным из того же домена

IndexedDB

Прежде чем войти в indexeddb, нам нужно добавить несколько префиксов реализации, как показано ниже 

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || 
window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || 
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || 
window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

Откройте базу данных IndexedDB

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

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
   { id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];

Добавление данных

Здесь добавляем некоторые данные вручную в данные, как показано ниже — 

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   request.onsuccess = function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror = function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

Извлечение данных

Мы можем получить данные из базы данных с помощью get () 

function read() {
   var transaction = db.transaction(["employee"]);
   var objectStore = transaction.objectStore("employee");
   var request = objectStore.get("00-03");
   
   request.onerror = function(event) {
      alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess = function(event) {
      
      if(request.result) {
         alert("Name: " + request.result.name + ", Age: 
            " + request.result.age + ", Email: " + request.result.email);
      } else {
         alert("Kenny couldn't be found in your database!");  
      }
   };
}

Используя метод get (), мы можем хранить данные в объекте вместо того, чтобы хранить данные в курсоре и получать данные из курсора. 

function readAll() {
   var objectStore = db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      
      if (cursor) {
         alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
            Age: " + cursor.value.age + ", Email: " + cursor.value.email);
         cursor.continue();
      } else {
         alert("No more entries!");
      }
   };
}

Удаление данных

Мы можем удалить данные из IndexedDB с помощью remove (). Вот как выглядит код 

function remove() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess = function(event) {
      alert("prasad entry has been removed from your database.");
   };
}

HTML-код

Чтобы показать все данные, нам нужно использовать событие onClick, как показано ниже code — 

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title>IndexedDb Demo | onlyWebPro.com</title>
   </head>
   
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()"></button>
      <button onclick = "add()"></button>
      <button onclick = "remove()">Delete </button>
   </body>
</html>

Окончательный код должен быть как — 

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <script type = "text/javascript">
         
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //prefixes of window.IDB objects
         window.IDBTransaction = window.IDBTransaction || 
         window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || 
         window.msIDBKeyRange
         
         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of IndexedDB.")
         }
         
         const employeeData = [
            { id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
            { id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
         ];
         var db;
         var request = window.indexedDB.open("newDatabase", 1);
         
         request.onerror = function(event) {
            console.log("error: ");
         };
         
         request.onsuccess = function(event) {
            db = request.result;
            console.log("success: "+ db);
         };
         
         request.onupgradeneeded = function(event) {
            var db = event.target.result;
            var objectStore = db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
         
         function read() {
            var transaction = db.transaction(["employee"]);
            var objectStore = transaction.objectStore("employee");
            var request = objectStore.get("00-03");
            
            request.onerror = function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess = function(event) {
               // Do something with the request.result!
               if(request.result) {
                  alert("Name: " + request.result.name + ", 
                     Age: " + request.result.age + ", Email: " + request.result.email);
               } else {
                  alert("Kenny couldn't be found in your database!");
               }
            };
         }
         
         function readAll() {
            var objectStore = db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess = function(event) {
               var cursor = event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
                     Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               } else {
                  alert("No more entries!");
               }
            };
         }
         
         function add() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
            
            request.onsuccess = function(event) {
               alert("Kenny has been added to your database.");
            };
            
            request.onerror = function(event) {
               alert("Unable to add data\r\nKenny is aready exist in your database! ");
            }
         }
         
         function remove() {
            var request = db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess = function(event) {
               alert("Kenny's entry has been removed from your database.");
            };
         }
      </script>
      
   </head>
   <body>
      <button onclick = "read()">Read </button>
      <button onclick = "readAll()">Read all </button>
      <button onclick = "add()">Add data </button>
      <button onclick = "remove()">Delete data </button>
   </body>
</html>

Это даст следующий результат —

HTML5 — Веб-сообщения

Web Messaging — это способ, позволяющий документам разделять контекст просмотра для обмена данными без Dom. Он преодолевает проблему междоменной связи в разных доменах, протоколах или портах

Например, вы хотите отправить данные со своей страницы в рекламный контейнер, который помещается в iframe или наоборот, в этом случае Browser выдает исключение безопасности. С помощью веб-сообщений мы можем передавать данные как событие сообщения.

Сообщение Событие

Возникают события сообщений Перекрестный обмен сообщениями, обмен сообщениями по каналам, отправленные сервером события и веб-сокеты. Он описан интерфейсом событий сообщений.

Атрибуты

Sr.No. Атрибуты и описание
1

данные

Содержит строковые данные

2

происхождения

Содержит доменное имя и порт

3

lastEventId

Содержит уникальный идентификатор для текущего события сообщения.

4

источник

Содержит ссылку на окно исходного документа

5

порты

Содержит данные, которые отправляются любым портом сообщения

данные

Содержит строковые данные

происхождения

Содержит доменное имя и порт

lastEventId

Содержит уникальный идентификатор для текущего события сообщения.

источник

Содержит ссылку на окно исходного документа

порты

Содержит данные, которые отправляются любым портом сообщения

Отправка кросс-документа сообщения

Перед отправкой кросс-документа, нам нужно создать новый контекст веб-просмотра, создав новый фрейм или новое окно. Мы можем отправить данные используя postMessage (), и у него есть два аргумента. Они как —

  • сообщение — сообщение для отправки
  • targetOrigin — Имя происхождения

Примеры

Отправка сообщения из iframe на кнопку 

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

Получение сообщения кросс-документа в принимающем документе 

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

Канал обмена сообщениями

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

Объекты MessageChannel и MessagePort

При создании messageChannel он внутренне создает два порта для отправки данных и перенаправляется в другой контекст просмотра.

  • postMessage () — Опубликовать сообщение, бросить канал

  • start () — отправляет данные

  • close () — закрывает порты

postMessage () — Опубликовать сообщение, бросить канал

start () — отправляет данные

close () — закрывает порты

В этом случае мы отправляем данные из одного iframe в другой iframe. Здесь мы вызываем данные в функции и передаем данные в DOM. 

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

Выше кода, он принимает данные из порта 2, теперь он будет передавать данные во второй iframe 

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Теперь второй документ обрабатывает данные с помощью функции portMsgHandler. 

var loadHandler() {
   
   // Define our message handler function
   var messageHandler = function(messageEvent) {
   
      // Our form submission handler
      
      var formHandler = function() {
         var msg = 'add <[email protected]> to game circle.';
         messageEvent.ports[0].postMessage(msg);
      }
      document.forms[0].addEventListener('submit',formHandler,false);
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

HTML5 — CORS

Распределение ресурсов между источниками (CORS) — это механизм, позволяющий ограничивать ресурсы из другого домена в веб-браузере.

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

Создание запроса CORS

Здесь Chrome, Firefox, Opera и Safari используют объект XMLHttprequest2, а Internet Explorer использует аналогичный объект XDomainRequest, объект. 

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS not supported');
}

Описатели событий в CORS

Sr.No. Обработчик событий и описание
1

onloadstart

Запускает запрос

2

в процессе

Загружает данные и отправляет данные

3

OnAbort

Отменить запрос

4

OnError

запрос не выполнен

5

в процессе

успешно загрузить запрос

6

ontimeout

истекло время ожидания

7

onloadend

Когда запрос завершен, либо успешный, либо неудачный

onloadstart

Запускает запрос

в процессе

Загружает данные и отправляет данные

OnAbort

Отменить запрос

OnError

запрос не выполнен

в процессе

успешно загрузить запрос

ontimeout

истекло время ожидания

onloadend

Когда запрос завершен, либо успешный, либо неудачный

Пример события onload или onerror 

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

Пример CORS с обработчиком

Ниже приведен пример makeCorsRequest () и обработчик загрузки 

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}

HTML5 — веб-RTC

Web RTC, представленный World Wide Web Consortium (W3C). Это поддерживает приложения браузера-браузера для голосовых вызовов, видеочата и обмена файлами по протоколу P2P.

Если вы хотите попробовать? Веб-RTC доступны для Chrome, Opera и Firefox. Хорошее место для начала — простое приложение видеочата здесь . Web RTC реализует три API, как показано ниже —

  • MediaStream — получить доступ к камере и микрофону пользователя.

  • RTCPeerConnection — получить доступ к средствам аудио- или видеозвонков.

  • RTCDataChannel — получить доступ к одноранговой связи.

MediaStream — получить доступ к камере и микрофону пользователя.

RTCPeerConnection — получить доступ к средствам аудио- или видеозвонков.

RTCDataChannel — получить доступ к одноранговой связи.

MediaStream

MediaStream представляет синхронизированные потоки мультимедиа. Например, нажмите «HTML5 Video player» в демонстрационном разделе HTML5 или нажмите здесь .

Приведенный выше пример содержит stream.getAudioTracks () и stream.VideoTracks (). Если аудиодорожек нет, он возвращает пустой массив и проверяет видеопоток, если веб-камера подключена, stream.getVideoTracks () возвращает массив из одного MediaStreamTrack, представляющего поток с веб-камеры. Простой пример — приложения чата, приложение чата получает поток с веб-камеры, задней камеры, микрофона.

Пример кода MediaStream 

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

Скриншот

Это также возможно в браузере Chrome с mediaStreamSource и требует HTTPS. Эта функция еще не доступна в опере. Пример демонстрации доступен здесь

Контроль сеансов, информация о сети и медиа

Web RTC требует одноранговой связи между браузерами. Этот механизм требовал сигнализации, сетевой информации, управления сеансом и медиа-информации. Веб-разработчики могут выбрать другой механизм обмена данными между браузерами, такой как SIP или XMPP, или любые двусторонние коммуникации. Пример примера XHR здесь .

51
Share: