Html5/ru

From JazzTeamWiki
Jump to: navigation, search

Полезные ссылки

Canvas

HTML5 определяет тег <canvas> как «холст для растровой графики, который может использоваться для отображения диаграмм, компьютерных игр или вывода других изображений на лету». Сам холст представляет собой прямоугольник на странице, в котором с помощью JavaScript рисуется, что вы пожелаете. HTML5 определяет набор функций называемых «Canvas API» для рисования фигур, контуров, создания градиентов и трансформации.

Геолокация

API нам предлагает два метода определения местоположения:

  • getCurrentPosition - разовый метод захвата.
  • watchPosition - следит за изменением местоположения.

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

Хранилище HTML5 позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже. Идея напоминает кукисы, но хранилище предназначено для сохранения гораздо большего объема информации. Кукисы ограничены в размерах, и ваш браузер каждый раз посылает веб-серверу запрос новой страницы (если на это есть время и позволяет полоса пропускания). Хранилище HTML5 остается на вашем компьютере, и сайты могут обращаться к нему через JavaScript после загрузки веб-страницы. Хранилища бывают двух видов(sessionStorage и localStorage).


Web Socket

Web Socket - предназначенный для обмена сообщениями между браузером и веб-сервером в режиме реального времени, websocket устанавливает с сервером двунаправленное TCP соединие(в кодировке UTF-8). Соединение постоянно держится открытым, но не передаёт лишних HTTP заголовков. При этом в websocket-ах нет ограничений на количество соединений.

  • Socket.onopen Это событие происходит, когда socket устанавливает соединение.
  • Socket.onmessage Это событие происходит, когда клиент получает данные с сервера.
  • Socket.onerror Это событие происходит, когда есть ошибки в коммуникации.
  • Socket.onclose Это событие происходит, когда соединение закрывается.

Где использовать?

самое очевидное:

  • для сложных, объемных вычислений;
  • обработка/анализ изображений и видео;
  • разбор объемных данных полученных после вызова
  • XMLHTTPRequest;
  • анализ вводимого текста пользователем "на лету", не блокируя интерфейс;
  • запросы к локальным базам данных.

Battery Status

Battery Status - позволяющее получить информацию о батарее компьютера используя js. 

Распологает 4-мя свойствами:

  • charging показывает подключены ли мы к зарядке
  • chargingTime возвращает количество времени оставшейся до полной зарядки
  • dischargingTime показывает время до полной разрядки
  • level показывает сколько еще у вас осталось зарядки в процентах.

History

History API опирается на один DOM интерфейс — объект History. Каждый таб имеет уникальный объект History, который находится в window.history. History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.

Основные методы объекта History:

  • window.history.length: Количество записей в текущей сессии истории
  • window.history.state: Возвращает текущий объект истории
  • window.history.go(n): Метод, позволяющий гулять по истории. В качестве аргумента передается смещение, относительно текущей позиции. Если передан 0, то будет обновлена текущая страница. Если индекс выходит за пределы истории, то ничего не произойдет.
  • window.history.back(): Метод, идентичный вызову go(-1)
  • window.history.forward(): Метод, идентичный вызову go(1)
  • window.history.pushState(data, title [, url]): Добавляет элемент истории.
  • window.history.replaceState(data, title [, url]): Обновляет текущий элемент истории

Примечание Некоторые технологии HTML5(History API, Web Worker, Battery Status и для браузера Chrome Геолокация) требуют запуска из под сервера(tomcat, jetty..). Причиной я вляется то, что некоторые из этих API используют http протокол, и не могут быть просто запущены браузером из файла.

Геолокация html5 на сегоднешний день(25.07.12) потдерживается только двумя браузерами(Chrome и FireFox), для определения местоположения компьютера эти браузеры используют специальные встроеные сервисы, которые неявно обращаются к необходимым серверам для определения координат.

Новые теги

  • <article> </article> Новые HTML теги – oпределяют внешний контент
  • <aside> </aside> Новые HTML теги – дополнительный контент
  • <audio> </audio> Новые HTML теги – определяют фоновый звук
  • <colgroup> </colgroup> Группируют колонки таблицы
  • <command> </command> Новые HTML теги – добавляют команду к кнопке
  • <datalist> </datalist> Новые HTML теги – определяют допустимые значения
  • <details> </details> Новые HTML теги – определяют детали документа
  • <dialog> </dialog> Новые HTML теги – определяют диалог
  • <figure> </figure> Новые HTML теги – группируют элементы страницы
  • <footer> </footer> Новые HTML теги – нижняя часть документа
  • <header> </header> Новые HTML теги – верхняя секция документа
  • <hgroup> </hgroup> Новые HTML теги – определяют группу заголовков
  • Новые HTML теги – определяют важную часть текста
  • <nav> </nav> Новые HTML теги – определяют группу ссылок
  • <section> </section> Новые HTML теги – определяют секцию документа
  • Новые HTML теги – определяют дату или время
  • <video> </video> Новые HTML теги – внедряют видео в web-страницу

Устаревшие теги

  • <acronym> </acronym> Не поддерживаются в HTML 5
  • <applet> </applet> Не поддерживаются в HTML 5
  • <basefont> Не поддерживается в HTML 5
  • Не поддерживаются в HTML 5
  • Не поддерживаются в HTML 5
  • <dir> </dir> Не поддерживаются в HTML 5
  • Не поддерживаются в HTML 5
  • <frame /> Не поддерживается в HTML 5
  • <frameset> </frameset> Не поддерживаются в HTML 5
  • Не поддерживаются в HTML 5
  • Не поддерживаются в HTML 5
  • Не поддерживаются в HTML 5

Новые события

  • <body>
    • onafterprint - script Скрипт выполняется после того как документ напечатан
    • onbeforeprint - script Скрипт выполняется до того как документ напечатан
    • onbeforeonload - script Скрипт выполняется перед загрузкой документа
    • onerror - script Скрипт выполняется при возникновении ошибки
    • onhaschange - script Скрипт выполняется, когда документ изменился
    • onmessage - script Скрипт выполняется, когда сообщение срабатывает
    • onoffline - script Скрипт выполняется, когда документ переходит в автономный режим
    • ononline - script Скрипт выполняется, когда документ поступает онлайн
    • onpagehide - script Скрипт выполняется, когда окно скрыто
    • onpageshow - script Скрипт выполняется, когда окно становится видимым
    • onpopstate - script Скрипт выполняется, когда история окна изменяется
    • onredo - script Скрипт выполняется, когда документ выполняет повтор
    • onresize - script Скрипт выполняется при изменении размеров окна
    • onstorage - script Скрипт запускается при загрузке документа
    • onundo - script Скрипт выполняется, когда документ выполняет "отменить"
    • onunload - script Скрипт выполняется, когда пользователь покидает документ
  • <form>
    • oncontextmenu - script Скрипт выполняется, когда контекстное меню срабатывает
    • onformchange - script Скрипт выполняется, когда форма изменена
    • onforminput - script Скрипт выполняется, когда форма получает пользовательский ввод
    • oninput - script Скрипт выполняется, когда элемент получает пользовательский ввод
    • oninvalid - script Скрипт выполняется, когда элемент недействителен
  • мышь и клавиатура
    • ondrag - script Скрипт выполняется при перетаскивании элемента
    • ondragend - script Скрипт выполняется по окончании перетаскивания элемента
    • ondragenter - script Скрипт выполняется, когда элемент перетащен в допустимую цель
    • ondragleave - script Скрипт выполняется, когда элемент покидает допустимую цель
    • ondragover - script Скрипт выполняется, когда элемент перетаскивают над допустимой целью падения
    • ondragstart - script Скрипт выполняется в начале операции перетаскивания
    • ondrop - script Скрипт выполняется, когда перетаскиваемый элемент отпущен
    • onmousewheel - script Скрипт выполняется, когда колеса мышки вращаются
    • onscroll - script Скрипт выполняется, когда полоса прокрутки элемента прокручивается

Новые типы средств управления формой

  • <input type="search"> для поиска
  • <input type="number"> для ввода чисел
  • <input type="range"> ползунок
  • <input type="color"> для выбора цвета
  • <input type="tel"> для телефонного номера
  • <input type="url"> для веб-адресов
  • <input type="email"> для почтовых адресов
  • <input type="date"> для выбора календарной даты
  • <input type="month"> для месяца
  • <input type="week"> для недели
  • <input type="time"> для времени
  • <input type="datetime"> для указания даты и времени
  • <input type="datetime-local"> для местной даты и времени