WebGLRenderingContext - Интерфейсы веб API

WebGLRenderingContext
=====================

Интерфейс **WebGLRenderingContext** обеспечивает доступ к контексту рендеринга OpenGL ES 2.0 (**OpenGL** for **E**mbedded **S**ystems — OpenGL для встраиваемых систем) для использования его с помощью HTML `<canvas>` элемента.

Чтобы получить объект с помощью этого интерфейса вызовите метод `getContext()` элемента <canvas> , используя "webgl" в качестве аргумента.

```js
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
```

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

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

Константы
---------

Смотрите на WebGL constants (en-US).

WebGL контекст
--------------

Ниже перечислены свойства и методы которые дают общую информацию и функциональность при работе с WebGL контекстом:

`WebGLRenderingContext.canvas`

Доступная только для чтения обратная ссылка на `HTMLCanvasElement`. Может быть `null` если будет применятся в контексте элемента иного типа чем `<canvas>`.

`WebGLRenderingContext.commit()`
Экспериментальная возможность

Вставляет окна в первоначальный `HTMLCanvasElement` , если контекст не привязан к конкретному холсту.

`WebGLRenderingContext.drawingBufferWidth` (en-US)

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

`WebGLRenderingContext.drawingBufferHeight` (en-US)

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

`WebGLRenderingContext.getContextAttributes()` (en-US)

Возвращает `WebGLContextAttributes объект который содержит атрибуты текущего контекста. Может возвращать `null` если контекст утерян.

`WebGLRenderingContext.isContextLost()` (en-US)

Возвращает `true` если контекст утерян, в противном случае возвращает `false`.

Просмотр и обрезка
------------------

`WebGLRenderingContext.scissor()` (en-US)

Устанавливает обрезанный контейнер.

`WebGLRenderingContext.viewport()` (en-US)

Устанавливает окно просмотра.

Информация о состоянии
----------------------

`WebGLRenderingContext.activeTexture()`

Выбирает активную текстуру.

`WebGLRenderingContext.blendColor()` (en-US)

Устанавливает параметры смешивания источника и назначения

`WebGLRenderingContext.blendEquation()` (en-US)

Уравнение смешивания RGB и уравнение альфа-смешивания сводит к одному уравнению.

`WebGLRenderingContext.blendEquationSeparate()` (en-US)

Устанавливает уравнение смешивания RGB и уравнение альфа-смешивания отдельно.

`WebGLRenderingContext.blendFunc()` (en-US)

Определяет, какая арифметическая функция используется для смешивания пикселей.

`WebGLRenderingContext.blendFuncSeparate()` (en-US)

Определяет, какая арифметическая функция используется для смешивания пикселей для RGB и альфа-компонентов по отдельности.

`WebGLRenderingContext.clearColor()`

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

`WebGLRenderingContext.clearDepth()` (en-US)

Задаёт значение глубины, используемый при очистке буфера глубины.

`WebGLRenderingContext.clearStencil()` (en-US)

Задаёт значение шаблона, используемый при очистке буфера шаблона.

`WebGLRenderingContext.colorMask()` (en-US)

Устанавливает какие цветовые компоненты для включены или выключены при отрисовке или рендеринге на`WebGLFramebuffer` (en-US).

`WebGLRenderingContext.cullFace()` (en-US)

Определяет, будет видима или нет передняя- и / или обратная сторона многоугольника.

`WebGLRenderingContext.depthFunc()` (en-US)

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

`WebGLRenderingContext.depthMask()` (en-US)

Включает или выключает запись в буфер глубины.

`WebGLRenderingContext.depthRange()` (en-US)

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

`WebGLRenderingContext.disable()` (en-US)

Отключает конкретные возможности WebGL.

`WebGLRenderingContext.enable()`

Включает конкретные возможности WebGL.

`WebGLRenderingContext.frontFace()` (en-US)

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

`WebGLRenderingContext.getParameter()` (en-US)

Возвращает значение переданного параметра по имени.

`WebGLRenderingContext.getError()` (en-US)

Возвращает информацию об ошибках.

`WebGLRenderingContext.hint()` (en-US)

Указывает подсказки для определённого поведения. Интерпретация этих подсказок зависит от реализации.

`WebGLRenderingContext.isEnabled()` (en-US)

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

`WebGLRenderingContext.lineWidth()` (en-US)

Устанавливает ширину растровой линии.

`WebGLRenderingContext.pixelStorei()` (en-US)

Определяет режимы хранилища пикселей

`WebGLRenderingContext.polygonOffset()` (en-US)

Определяет факторы масштабирования и единицы для расчёта значения глубины.

`WebGLRenderingContext.sampleCoverage()` (en-US)

Определяет составные параметры для сглаживания эффектов.

`WebGLRenderingContext.stencilFunc()` (en-US)

Sets the both front and back function and reference value for stencil testing.

`WebGLRenderingContext.stencilFuncSeparate()` (en-US)

Sets the front and/or back function and reference value for stencil testing.

`WebGLRenderingContext.stencilMask()` (en-US)

Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.

`WebGLRenderingContext.stencilMaskSeparate()` (en-US)

Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.

`WebGLRenderingContext.stencilOp()` (en-US)

Sets both the front and back-facing stencil test actions.

`WebGLRenderingContext.stencilOpSeparate()` (en-US)

Sets the front and/or back-facing stencil test actions.

Buffers
-------

`WebGLRenderingContext.bindBuffer()`

Binds a `WebGLBuffer` object to a given target.

`WebGLRenderingContext.bufferData()` (en-US)

Updates buffer data.

`WebGLRenderingContext.bufferSubData()` (en-US)

Updates buffer data starting at a passed offset.

`WebGLRenderingContext.createBuffer()` (en-US)

Creates a `WebGLBuffer` object.

`WebGLRenderingContext.deleteBuffer()` (en-US)

Deletes a `WebGLBuffer` object.

`WebGLRenderingContext.getBufferParameter()` (en-US)

Returns information about the buffer.

`WebGLRenderingContext.isBuffer()` (en-US)

Returns a Boolean indicating if the passed buffer is valid.

Framebuffers
------------

`WebGLRenderingContext.bindFramebuffer()` (en-US)

Binds a `WebGLFrameBuffer` object to a given target.

`WebGLRenderingContext.checkFramebufferStatus()` (en-US)

Returns the status of the framebuffer.

`WebGLRenderingContext.createFramebuffer()` (en-US)

Creates a `WebGLFrameBuffer` object.

`WebGLRenderingContext.deleteFramebuffer()` (en-US)

Deletes a `WebGLFrameBuffer` object.

`WebGLRenderingContext.framebufferRenderbuffer()` (en-US)

Attaches a `WebGLRenderingBuffer` object to a `WebGLFrameBuffer` object.

`WebGLRenderingContext.framebufferTexture2D()` (en-US)

Attaches a textures image to a `WebGLFrameBuffer` object.

`WebGLRenderingContext.getFramebufferAttachmentParameter()` (en-US)

Returns information about the framebuffer.

`WebGLRenderingContext.isFramebuffer()` (en-US)

Returns a Boolean indicating if the passed `WebGLFrameBuffer` object is valid.

`WebGLRenderingContext.readPixels()` (en-US)

Reads a block of pixels from the `WebGLFrameBuffer`.

Renderbuffers
-------------

`WebGLRenderingContext.bindRenderbuffer()` (en-US)

Binds a `WebGLRenderBuffer` object to a given target.

`WebGLRenderingContext.createRenderbuffer()` (en-US)

Creates a `WebGLRenderBuffer` object.

`WebGLRenderingContext.deleteRenderbuffer()` (en-US)

Deletes a `WebGLRenderBuffer` object.

`WebGLRenderingContext.getRenderbufferParameter()` (en-US)

Returns information about the renderbuffer.

`WebGLRenderingContext.isRenderbuffer()` (en-US)

Returns a Boolean indicating if the passed `WebGLRenderingBuffer` is valid.

`WebGLRenderingContext.renderbufferStorage()` (en-US)

Creates a renderbuffer data store.

Textures
--------

`WebGLRenderingContext.bindTexture()`

Binds a `WebGLTexture` object to a given target.

`WebGLRenderingContext.compressedTexImage2D()` (en-US)

Specifies a 2D texture image in a compressed format.

`WebGLRenderingContext.compressedTexSubImage2D()` (en-US)

Specifies a 2D texture sub-image in a compressed format.

`WebGLRenderingContext.copyTexImage2D()` (en-US)

Copies a 2D texture image.

`WebGLRenderingContext.copyTexSubImage2D()` (en-US)

Copies a 2D texture sub-image.

`WebGLRenderingContext.createTexture()` (en-US)

Creates a `WebGLTexture` object.

`WebGLRenderingContext.deleteTexture()` (en-US)

Deletes a `WebGLTexture` object.

`WebGLRenderingContext.generateMipmap()` (en-US)

Generates a set of mipmaps for a `WebGLTexture` object.

`WebGLRenderingContext.getTexParameter()` (en-US)

Returns information about the texture.

`WebGLRenderingContext.isTexture()` (en-US)

Returns a Boolean indicating if the passed `WebGLTexture` is valid.

`WebGLRenderingContext.texImage2D()` (en-US)

Specifies a 2D texture image.

`WebGLRenderingContext.texSubImage2D()` (en-US)

Updates a sub-rectangle of the current `WebGLTexture`.

`WebGLRenderingContext.texParameterf()` (en-US)

Sets texture parameters.

`WebGLRenderingContext.texParameteri()` (en-US)

Sets texture parameters.

Programs and shaders
--------------------

`WebGLRenderingContext.attachShader()` (en-US)

Attaches a `WebGLShader` to a `WebGLProgram`.

`WebGLRenderingContext.bindAttribLocation()` (en-US)

Binds a generic vertex index to a named attribute variable.

`WebGLRenderingContext.compileShader()`

Compiles a `WebGLShader`.

`WebGLRenderingContext.createProgram()` (en-US)

Creates a `WebGLProgram`.

`WebGLRenderingContext.createShader()` (en-US)

Creates a `WebGLShader`.

`WebGLRenderingContext.deleteProgram()` (en-US)

Deletes a `WebGLProgram`.

`WebGLRenderingContext.deleteShader()` (en-US)

Deletes a `WebGLShader`.

`WebGLRenderingContext.detachShader()` (en-US)

Detaches a `WebGLShader`.

`WebGLRenderingContext.getAttachedShaders()` (en-US)

Returns a list of `WebGLShader` objects attached to a `WebGLProgram`.

`WebGLRenderingContext.getProgramParameter()` (en-US)

Returns information about the program.

`WebGLRenderingContext.getProgramInfoLog()` (en-US)

Returns the information log for a `WebGLProgram` object.

`WebGLRenderingContext.getShaderParameter()` (en-US)

Returns information about the shader.

`WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)

Returns a `WebGLShaderPrecisionFormat` object describing the precision for the numeric format of the shader.

`WebGLRenderingContext.getShaderInfoLog()`

Returns the information log for a `WebGLShader` object.

`WebGLRenderingContext.getShaderSource()` (en-US)

Returns the source code of a `WebGLShader` as a string.

`WebGLRenderingContext.isProgram()` (en-US)

Returns a Boolean indicating if the passed `WebGLProgram` is valid.

`WebGLRenderingContext.isShader()` (en-US)

Returns a Boolean indicating if the passed `WebGLShader` is valid.

`WebGLRenderingContext.linkProgram()` (en-US)

Links the passed `WebGLProgram` object.

`WebGLRenderingContext.shaderSource()`

Sets the source code in a `WebGLShader`.

`WebGLRenderingContext.useProgram()` (en-US)

Uses the specified `WebGLProgram` as part the current rendering state.

`WebGLRenderingContext.validateProgram()` (en-US)

Validates a `WebGLProgram`.

Uniforms and attributes
-----------------------

`WebGLRenderingContext.disableVertexAttribArray()` (en-US)

Disables a vertex attribute array at a given position.

`WebGLRenderingContext.enableVertexAttribArray()` (en-US)

Enables a vertex attribute array at a given position.

`WebGLRenderingContext.getActiveAttrib()` (en-US)

Returns information about an active attribute variable.

`WebGLRenderingContext.getActiveUniform()` (en-US)

Returns information about an active uniform variable.

`WebGLRenderingContext.getAttribLocation()` (en-US)

Returns the location of an attribute variable.

`WebGLRenderingContext.getUniform()` (en-US)

Returns the value of a uniform variable at a given location.

`WebGLRenderingContext.getUniformLocation()` (en-US)

Returns the location of a uniform variable.

`WebGLRenderingContext.getVertexAttrib()` (en-US)

Returns information about a vertex attribute at a given position.

`WebGLRenderingContext.getVertexAttribOffset()` (en-US)

Returns the address of a given vertex attribute.

`WebGLRenderingContext.uniform[1234][fi][v]()`

Specifies a value for a uniform variable.

`WebGLRenderingContext.uniformMatrix[234]fv()` (en-US)

Specifies a matrix value for a uniform variable.

`WebGLRenderingContext.vertexAttrib[1234]f[v]()` (en-US)

Specifies a value for a generic vertex attribute.

`WebGLRenderingContext.vertexAttribPointer()` (en-US)

Specifies the data formats and locations of vertex attributes in a vertex attributes array.

Drawing buffers
---------------

`WebGLRenderingContext.clear()`

Clears specified buffers to preset values.

`WebGLRenderingContext.drawArrays()` (en-US)

Renders primitives from array data.

`WebGLRenderingContext.drawElements()` (en-US)

Renders primitives from element array data.

`WebGLRenderingContext.finish()` (en-US)

Blocks execution until all previously called commands are finished.

`WebGLRenderingContext.flush()` (en-US)

Empties different buffer commands, causing all commands to be executed as quickly as possible.

Working with extensions
-----------------------

These methods manage WebGL extensions:

`WebGLRenderingContext.getSupportedExtensions()` (en-US)

Returns an `Array` of `DOMString` elements with all the supported WebGL extensions.

`WebGLRenderingContext.getExtension()` (en-US)

Returns an extension object.

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLCanvasElement`


Веб-компоненты - Интерфейсы веб API

Веб-компоненты
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
Веб-компоненты - это набор различных технологий, позволяющих создавать повторно используемые настраиваемые элементы с их функциональностью, инкапсулированной отдельно от остальной части вашего кода - и использовать их в ваших веб-приложениях.

Понятия и использование
-----------------------

Как разработчики, все мы знаем, что как можно больше повторного использования кода - хорошая идея. Традиционно это было не так просто для пользовательских структур разметки - подумайте о сложном HTML (и связанном с ним стиле и сценарии), которые вам иногда приходилось писать для визуализации пользовательских элементов управления UI, и о том, как их многократное использование может превратить вашу страницу в беспорядок если вы не будете осторожны.

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

* **Пользовательские элементы**: набор API-интерфейсов JavaScript, позволяющих определять пользовательские элементы и их поведение, которые затем можно использовать по желанию в пользовательском интерфейсе.
* **Shadow DOM**: набор API-интерфейсов JavaScript для прикрепления инкапсулированного «теневого» дерева DOM к элементу, который отображается отдельно от DOM основного документа, и управления соответствующими функциями. Таким образом, вы можете сохранить функции элемента в секрете, поэтому для них можно создавать сценарии и стили, не опасаясь коллизий с другими частями документа.
* **HTML templates**: элементы `<template>` и `<slot>` позволяют создавать шаблоны разметки, которых не видно на отображаемой странице. Затем их можно многократно использовать в качестве основы структуры настраиваемого элемента.

Базовый подход к реализации веб-компонента обычно выглядит примерно так:

1. Создайте класс, в котором вы указываете функциональность своего веб-компонента, используя синтаксис классов ECMAScript 2015 (дополнительную информацию см. в разделе Классы).
2. Зарегистрируйте свой новый настраиваемый элемент с помощью метода `CustomElementRegistry.define()`, передав ему имя элемента, который будет определён, класс или функцию, в которых указана его функциональность, и, необязательно, от какого элемента он наследуется.
3. При необходимости прикрепите теневую DOM к настраиваемому элементу с помощью метода `Element.attachShadow()`. Добавьте дочерние элементы, обработчики событий и т.д. в теневой DOM, используя обычные методы DOM.
4. При необходимости определите HTML template, используя `<template>` и `<slot>`. Снова используйте обычные методы DOM, чтобы клонировать шаблон и прикрепить его к вашей теневой DOM.
5. Используйте свой настраиваемый элемент везде, где хотите, на своей странице, как и любой обычный элемент HTML.
Учебники
--------

Использование пользовательских элементов

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

Использование shadow DOM (en-US)

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

Использование шаблонов и слотов (en-US)

Руководство, показывающее, как определить повторно используемую структуру HTML с помощью элементов `<template>` и `<slot>`, а затем использовать эту структуру внутри ваших веб-компонентов.

Справка
-------

### Пользовательские элементы

`CustomElementRegistry` (en-US)

Содержит функции, связанные с настраиваемыми элементами, в первую очередь с методом `CustomElementRegistry.define()`, используемым для регистрации новых настраиваемых элементов, чтобы их можно было затем использовать в вашем документе.

`Window.customElements` (en-US)

Возвращает ссылку на объект `CustomElementRegistry`.

Обратные вызовы жизненного цикла

Специальные колбэк-функции, определённые внутри определения класса настраиваемого элемента, которые влияют на его поведение:

* `connectedCallback`: вызывается, когда настраиваемый элемент впервые подключается к DOM документа.
* `disconnectedCallback`: вызывается, когда пользовательский элемент отключается от DOM документа.
* `adoptedCallback`: вызывается, когда настраиваемый элемент перемещается в новый документ.
* `attributeChangedCallback`: вызывается при добавлении, удалении или изменении одного из атрибутов настраиваемого элемента.

Расширения для создания пользовательских встроенных элементов

* Глобальный атрибут HTML `is`: позволяет указать, что стандартный элемент HTML должен вести себя как зарегистрированный встроенный пользовательский элемент.
* Параметр «is» метода `Document.createElement()`: позволяет создать экземпляр стандартного HTML-элемента, который ведёт себя как заданный зарегистрированный настраиваемый встроенный элемент.

Псевдоклассы CSS

Псевдоклассы, относящиеся конкретно к настраиваемым элементам:

* `:defined`: Соответствует любому заданному элементу, включая встроенные элементы и настраиваемые элементы, определённые с помощью `CustomElementRegistry.define()`.
* `:host` (en-US): Выбирает теневой хост теневого DOM (en-US), содержащего CSS, внутри которого он используется.
* `:host()`: Выбирает теневой хост теневой DOM (en-US), содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с теневым хостом.
* `:host-context()`: Выбирает теневой хост теневой DOM (en-US), содержащий CSS, внутри которого он используется (так что вы можете выбрать пользовательский элемент изнутри его теневой DOM) - но только если селектор, указанный в качестве параметра функции, совпадает с предком(-ами) теневого хоста в том месте, где он находится внутри иерархии DOM.

Псевдоэлементы CSS

Псевдоэлементы, относящиеся конкретно к настраиваемым элементам:

* `::part` (en-US): Представляет любой элемент в теневом дереве (en-US), имеющий соответствующий атрибут `part`.

### Shadow DOM

`ShadowRoot` (en-US)

Представляет корневой узел поддерева теневой модели DOM.

`DocumentOrShadowRoot`

Миксин, определяющий функции, доступные для всех документов и теневых корневых узлов.

Расширения `Element`

Расширения интерфейса `Element`, связанные с теневой DOM:

* Метод `Element.attachShadow()` прикрепляет теневое дерево DOM к указанному элементу.
* Свойство `Element.shadowRoot` возвращает теневой корневой узел, прикреплённый к указанному элементу, или значение `null`, если корневой узел не прикреплён.

Соответствующие дополнения `Node`

Дополнения к интерфейсу `Node`, относящиеся к теневой DOM:

* Метод `Node.getRootNode()` (en-US) возвращает корень объекта контекста, который необязательно включает теневой корневой узел, если он доступен.
* Свойство `Node.isConnected` возвращает логическое значение, указывающее, подключён ли узел (прямо или косвенно) к объекту контекста, например объект `Document` в случае обычного DOM или `ShadowRoot` (en-US) в случае теневого DOM.

Расширения `Event`

Расширения интерфейса `Event`, относящиеся к теневой модели DOM:

* `Event.composed` (en-US): возвращает `Boolean`, который указывает, будет ли событие распространяться через границу теневой DOM в стандартную DOM (`true`) или нет (`false`).
* `Event.composedPath` (en-US): возвращает путь к событию (объекты, для которых будут вызваны обработчики). Это не включает узлы в теневых деревьях, если теневой корневой узел был создан с закрытым `ShadowRoot.mode` (en-US).

### HTML templates

`<template>`

Содержит фрагмент HTML, который не отображается при первоначальной загрузке содержащего документа, но может отображаться во время выполнения с помощью JavaScript, который в основном используется в качестве основы для структур настраиваемых элементов. Связанный интерфейс DOM - `HTMLTemplateElement` (en-US).

`<slot>`

Заполнитель внутри веб-компонента, который можно заполнить собственной разметкой, что позволяет создавать отдельные деревья DOM и представлять их вместе. Связанный интерфейс DOM - `HTMLSlotElement`.

Глобальный HTML атрибут `slot` (en-US)

Назначает слот элементу в теневом дереве теневого DOM.

`Slotable` (en-US)

Миксин, реализованный как узлами `Element`, так и `Text`, определяющий функции, которые позволяют им стать содержимым элемента `<slot>`. Миксин определяет один атрибут, `Slotable.assignedSlot` (en-US), который возвращает ссылку на слот, в который вставлен узел.

`Element` extensions

Расширения интерфейса `Element`, относящиеся к слотам:

* `Element.slot`: Возвращает имя слота теневого DOM, прикреплённого к элементу.

Псевдоэлементы CSS

Псевдоэлементы, относящиеся конкретно к слотам:

* `::slotted`: Соответствует любому содержимому, вставленному в слот.

Событие `slotchange`

Вызывается для экземпляра `HTMLSlotElement` (элемент `<slot>`) при изменении узла(-ов), содержащихся в этом слоте.

Примеры
-------

Мы создаём ряд примеров в репозитории GitHub с примерами веб-компонентов. Со временем будет добавлено больше.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-template-element |
| DOM Standard # interface-shadowroot |

Совместимость с браузерами
--------------------------

### html.elements.template

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.ShadowRoot

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* webcomponents.org - сайт с примерами веб-компонентов, учебными пособиями и другой информацией.
* FAST - это библиотека веб-компонентов, созданная Microsoft, которая предлагает несколько пакетов для использования в зависимости от потребностей вашего проекта. Fast Element - это лёгкое средство для простого создания производительных, эффективных с точки зрения памяти и совместимых со стандартами веб-компонентов. Fast Foundation - это библиотека классов, шаблонов и других утилит веб-компонентов, построенная на основе fast-element, предназначенная для создания зарегистрированных веб-компонентов.
* Hybrids - библиотека веб-компонентов с открытым исходным кодом, которая предпочитает простые объекты и чистые функции `class` и `this` синтаксису. Он предоставляет простой и функциональный API для создания пользовательских элементов.
* Polymer - каркас веб-компонентов Google - набор полифилов, улучшений и примеров. На данный момент самый простой способ кроссбраузерно использовать веб-компоненты.
* Snuggsi - Простые веб-компоненты размером ~ 1 КБ, *включая полифил* - Все, что вам нужно, это браузер и базовое понимание классов HTML, CSS и JavaScript для продуктивной работы.
* Slim.js - библиотека веб-компонентов с открытым исходным кодом - высокопроизводительная библиотека для быстрой и простой разработки компонентов; расширяемая, подключаемая и кросс-платформенная.
* Stencil - набор инструментов для создания многоразовых масштабируемых систем проектирования в веб-компонентах.


HTML Drag and Drop API - Интерфейсы веб API

HTML Drag and Drop API
======================

Интерфейс **HTML Drag and Drop** позволяет приложениям использовать функционал перетаскивания в браузерах. Пользователь может выбрать *перетаскиваемые* элементы мышью, перетащить к элементу *сброса* и бросить их, отпустив кнопку мыши. Во время переноса за указателем следует полупрозрачный образ *перетаскиваемого* элемента

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

Данный обзор HTML Drag and Drop включает описание интерфейса, основные шаги по добавлению поддержки данного функционала в приложение, а также краткие данные о поддержке.

События перетаскивания
----------------------

HTML drag-and-drop использует `модель событий DOM` и *`события перетаскивания` (en-US)* унаследованные от `событий мыши`. Обычно *операция перетаскивания* начинается, когда пользователь выбирает *перетаскиваемый* элемент, перемещает его в зону элемента *сброса*, после чего отпускает.

В ходе операции перетаскивания происходит несколько типов событий, а события `drag` (en-US) и `dragover` (en-US) могут вызываться множество раз.

У каждого события перетаскивания (en-US) есть связанный глобальный обработчик события (en-US):

| Событие | Обработчик события | Запускается, когда… |
| --- | --- | --- |
| `drag` (en-US) | `ondrag` (en-US) | …длится перетаскивание элемента или выделения текста. |
| `dragend` (en-US) | `ondragend` (en-US) | …завершается перетаскивание (например, отпускается кнопка мыши или нажимается Escape; подробнее в Завершение перетаскивания.) |
| `dragenter` (en-US) | `ondragenter` (en-US) | …перетаскиваемый элемент попадает в допустимую цель сброса (Подробнее в Указание целей сброса.) |
| `dragexit` | `ondragexit` (en-US) | …элемент больше не является целью операции перетаскивания. |
| `dragleave` (en-US) | `ondragleave` (en-US) | …перетаскиваемый элемент покидает допустимую цель сброса. |
| `dragover` (en-US) | `ondragover` (en-US) | …элемент перетаскивается над допустимой целью сброса каждые несколько сотен миллисекунд |
| `dragstart` (en-US) | `ondragstart` | …пользователь начал перетаскивать элемент. (Подробнее в Начало операции перетаскивания.) |
| `drop` (en-US) | `ondrop` (en-US) | …элемент сброшен в допустимую зону сброса. (Подробнее в Выполнение сброса.) |

**Примечание:** При перемещении файла из операционной системы в браузер ни событие `dragstart`, ни `dragend` не вызывается.

Интерфейсы
----------

К HTML Drag and Drop интерфейсам относятся `DragEvent` (en-US), `DataTransfer`, `DataTransferItem` (en-US) и `DataTransferItemList` (en-US).

Интерфейс `DragEvent` (en-US) имеет конструктор и одно свойство `dataTransfer` (en-US), которое является объектом `DataTransfer`.

Объекты `DataTransfer` включают состояние события, такое как тип выполненного перетаскивания (вроде `copy` или `move`), данные перетаскивания (один или более элементов) и MIME-тип каждого *элемента перетаскивания*. Объекты `DataTransfer` также имеют методы добавления или удаления элементов из данных о перетасивании.

Для добавления в приложение поддержки HTML Drag and Drop, следует использовать только интерфейсы `DragEvent` (en-US) и `DataTransfer`. (Firefox поддерживает некоторые Специфичные для Gecko расширения объекта `DataTransfer`, но они будут работать только в Firefox.)

Каждый объект `DataTransfer` содержит свойство `items` (en-US), являющееся `списком` (en-US) объектов `DataTransferItem` (en-US). Объект `DataTransferItem` (en-US) представляет собой отдельный *перетаскиваемый элемент*, каждый со свойством `kind` (en-US) (либо `string` либо `file`) и свойство `type` (en-US) для MIME-типа данных элемента. Объект `DataTransferItem` (en-US) также имеет методы для получения данных о перемещаемых элементах.

Объект `DataTransferItemList` (en-US) содержит список объектов `DataTransferItem` (en-US). Он имеет методы для добавления перетаскиваемых объектов в список, их удаления, и очистки списка.

Ключевое отличие интерфейсов `DataTransfer` и `DataTransferItem` (en-US) заключается в том, что первый использует синхронный метод доступа к данным о перетаскиваемых объектах `getData()` (en-US), а второй – асинхронный метод `getAsString()` (en-US).

**Примечание:** `DragEvent` (en-US) и `DataTransfer` широко поддерживаются десктопными браузерами. Однако, поддержка интерфейсов `DataTransferItem` (en-US) и `DataTransferItemList` (en-US) достаточно ограниченная. Более подробно можно узнать в разделе Поддержка .

### Специфичные для Gecko интерфейсы

Mozilla и Firefox поддерживают некоторые функции, которых нет в стандартной drag-and-drop модели. Это *удобные функции*, помогающие перетаскивать несколько элементов или нестроковых данных (например, файлов). Для получения дополнительной информации смотрите Перетаскивание и Сброс нескольких элементов. Дополнительно посмотрите `DataTransfer` страницу справочника со всеми специфичными для Gecko свойствами и методами.

Основы
------

В данном разделе кратко описаны основные шаги добавления в приложение функционала drag-and-drop.

### Обозначьте, что можно *перетаскивать*

Чтобы сделать элемент *перетаскиваемым*, к нему нужно добавить атрибут `draggable` и глобальный обработчик события `ondragstart`. Пример показан в коде ниже:

```html
<script>
 function dragstart\_handler(ev) {
 // Добавить id целевого элемента в объект передачи данных
 ev.dataTransfer.setData("text/plain", ev.target.id);
 }

 window.addEventListener("DOMContentLoaded", () => {
 // Найти элемент по id
 const element = document.getElementById("p1");
 // Добавить обработчик события `dragstart`
 element.addEventListener("dragstart", dragstart\_handler);
 });
</script>

<p id="p1" draggable="true">Данный элемент является перетаскиваемым.</p>
```

Для получения дополнительной информации смотрите:

* Справочник атрибута `draggable` (en-US)
* Руководство по операциям перетаскивания
### Определите данные перетаскивания

Приложение может добавлять в операцию перетаскивания любое количество элементов данных. Каждый элемент данных — это `строка` определённого `типа`. Обычно MIME-тип равен `text/html`.

У каждого `события перетаскивания` (en-US) есть свойство `dataTransfer` (en-US), которое *содержит* данные о событии. Это свойство (являющееся объектом `DataTransfer`), также имеет методы *управления* данными перетаскивания. Метод `setData()` (en-US) используется для добавления элемента в данные перетаскивания, как показано в следующем примере.

```js
function dragstart\_handler(ev) {
  // Добавление различных типов данных перетаскивания
  ev.dataTransfer.setData("text/plain", ev.target.innerText);
  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
  ev.dataTransfer.setData(
    "text/uri-list",
    ev.target.ownerDocument.location.href,
  );
}
```

* Список общих типов данных, используемых при перетаскивании (например, текст, HTML, ссылки и файлы), смотрите в разделе Рекомендуемые типы перетаскивания (en-US).
* Для получения дополнительной информации, смотрите раздел Данные перетаскивания.
### Определите изображение перетаскивания

По умолчанию браузер предоставляет изображение, которое в процессе перетаскивания отображается рядом с указателем. Тем не менее, приложение может использовать сторонее изображение с помощью метода `setDragImage()` (en-US), как показано в следующем примере.

```js
function dragstart\_handler(ev) {
  // Создайте изображение, чтобы использовать как изображение перетаскивания
  // Примечание: замените "example.gif" на URL-адрес реального изоражения,
  // иначе оно не будет создано и будет использоваться изображение по умолчанию
  let img = new Image();
  img.src = "example.gif";
  ev.dataTransfer.setDragImage(img, 10, 10);
}
```

Узнать больше об изображении перетаскивания можно в:

* Настройка изображения перетаскивания
### Определите *эффект* перетаскивания

Свойство `dropEffect` (en-US) используется для управления обратной связью, которую пользователь получает во время операции перетаскивания. Обычно это влияет на то, какой курсор будет отображаться во время перетаскивания. Например, когда пользователь наводит указатель на цель сброса, курсор браузера может отражать тип операции, которая будет произведена.

Можно определить три эффекта:

1. **`copy`** обозначает, что перетаскиваемые данные будут скопированы из предыдущего места в место сброса.
2. **`move`** обозначает, что перетаскиваемые данные будут перемещены из предыдущего места в место сброса.
3. **`link`** обозначает, что между исходным местоположением и местом сброса будет создана некоторая форма свази.

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

Следующий пример демонстрирует, как использовать это свойство.

```js
function dragstart\_handler(ev) {
  ev.dataTransfer.dropEffect = "copy";
}
```

Для получения дополнительной информации смотрите:

* Эффекты перетаскивания
### Определите *зону сброса*

По умолчанию, при сбросе на большинство элементов, браузер не производит никаких действий. Чтобы изменить это поведение и сделать элемент *зоной сброса* или *сбрасываемым*, он должен иметь атрибуты для обработчиков событий `ondragover` (en-US) и `ondrop` (en-US).

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

```html
<script>
 function dragover\_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move";
 }
 function drop\_handler(ev) {
 ev.preventDefault();
 // Получить id цели и добавить перемещённый элемент в его DOM
 const data = ev.dataTransfer.getData("text/plain");
 ev.target.appendChild(document.getElementById(data));
 }
</script>

<p
 id="target"
 ondrop="drop\_handler(event)"
 ondragover="dragover\_handler(event)">
  Drop Zone
</p>
```

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

Для получения дополнительной информации смотрите:

* Указание целей сброса
### Обработайте *эффекты* сброса

Обработчик события `drop` (en-US) может по-разному обрабатывать данные перетаскивания, в зависимости от конкретного приложения.

Как правило, для извлечения и последующей обработки элементов перетаскивания, приложение использует метод `getData()` (en-US). Кроме того, семантика приложения может отличаться в зависимости от значения `dropEffect` (en-US) и состояния кнопок-модификаторов.

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

```html
<script>
 function dragstart\_handler(ev) {
 // Добавить id целевого элемента в объект передачи данных
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
 }
 function dragover\_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move";
 }
 function drop\_handler(ev) {
 ev.preventDefault();
 // Получить id целевого элемента и добавить перемещаемый элемент в его DOM
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
 }
</script>

<p id="p1" draggable="true" ondragstart="dragstart\_handler(event)">
  This element is draggable.
</p>
<div
 id="target"
 ondrop="drop\_handler(event)"
 ondragover="dragover\_handler(event)">
  Drop Zone
</div>
```

Для получения дополнительной информации смотрите:

* Выполнение сброса
### Завершение перетаскивания

В конце операции перетаскивания событие `dragend` (en-US) происходит у *исходного* элемента, который был целью начала перетаскивания.

Это событие происходит независимо от того, было перетаскивание выполнено или прервано. Обработчик события `dragend` может проверить значение свойства `dropEffect` (en-US) чтобы определить, успешно ли выполнена операция перетаскивания.

Для получения дополнительной информации об обработке завершения операции перетаскивания, смотрите:

* Завершение перетаскивания
Поддержка
---------

Из таблицы поддержки браузерами интерфейса DataTransferItem (en-US) видно, что поддержка drag-and-drop достаточно обширная среди десктопных браузеров (за исключением интерфейсов `DataTransferItem` (en-US) и `DataTransferItemList` (en-US), у которых поддержка ниже). Эти данные также указывают, что среди мобильных устройств поддержка очень низкая.

Примеры и демо
--------------

* Копирование и перемещение элементов с помощью интерфейса `DataTransfer`
* Копирование и перемещение элементов с помощью интерфейса `DataTransferListItem`
* Перетаскивание и сброс файлов (только Firefox): https://jsfiddle.net/9C2EF/
* Перетаскивание и сброс файлов (все браузеры): https://jsbin.com/hiqasek/
* Использование Drag and Drop API в проекте парковки: https://park.glitch.me/ (Отредактировать можно здесь)
Спецификации
------------

| Specification |
| --- |
| HTML Standard  |

Совместимость с браузерами
--------------------------

{{Compat}}Смотрите также
--------------

* Операции перетаскивания
* Перетаскивание и сброс нескольких файлов
* Рекомендуемые типы перетаскивания (en-US)
* HTML5 Living Standard: Drag and Drop
* Информация о поддержке Drag and Drop из CanIUse


History API - Интерфейсы веб API

History API
===========

 DOM-объект `Window` предоставляет доступ к истории текущей сессии браузера (не путать с историей браузерных расширений (en-US)) через объект `history`. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.
Понятия и использование
-----------------------

Перемещение назад и вперёд по истории пользователя выполняется с помощью методов `back()` (en-US), `forward()` (en-US), и `go()`.

### Перемещение вперёд и назад

Чтобы переместиться назад по истории:

```js
window.history.back();
```

 Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.
 Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):

```js
window.history.forward();
```

### Перемещение к определённой странице в истории

Вы можете использовать метод `go()` для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется `0`.

Вернуться на одну страницу назад (равноценно вызову `back()` (en-US)):

```js
window.history.go(-1);
```

Перейти на одну страницу вперёд (равноценно вызову `forward()` (en-US))

```js
window.history.go(1);
```

По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент `2`, и так далее.

Кроме того, метод `go()` можно использовать для обновления текущей страницы, передавая аргумент `0` или вызывая его без аргументов:
```

// Обе следующих инструкции обновляют текущую страницу
window.history.go(0)
window.history.go()
```

Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства `length`:

```js
var numberOfEntries = window.history.length;
```

Интерфейсы
----------

`History`

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

Примеры
-------

В следующем примере свойству `onpopstate` назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замены и перемещения по истории текущей вкладки браузера
```

window.onpopstate = function(event) {
  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-history-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

### Справочники

* `window.history`
* `window.onpopstate` (en-US)
### Руководства

* Working with the History API


ServiceWorker - Интерфейсы веб API

ServiceWorker
=============

Интерфейс `ServiceWorker`, являющийся частью ServiceWorker API (en-US), позволяет взаимодействовать с Service Worker. К одному Service Worker могут быть привязаны несколько контекстов (например страниц, Web Workers, и т.д.), каждый с использованием собственного объекта `ServiceWorker`.

Объект `ServiceWorker` можно получить через свойства `ServiceWorkerRegistration.active` (en-US) и `ServiceWorkerContainer.controller` — это Service Worker, который активировал и контролирует текущую страницу (в случае, если Service Worker был успешно зарегистрирован и страница была обновлена)

Интерфейс `ServiceWorker` обрабатывает события жизненного цикла: `install` и `activate` и функциональные события, например `fetch`. Объект `ServiceWorker` также содержит опцию `ServiceWorker.state`, отражающую его состояние.

Свойства
--------

*Интерфейс `ServiceWorker` наследует свойства `Worker`.*

`ServiceWorker.scriptURL` Только для чтения

URL кода для данного Service Worker. URL должен находиться в том же домене, что и документ, регистрирующий `ServiceWorker`.

`ServiceWorker.state` Только для чтения

Состояние данного Service Worker. Может иметь следующие значения: `installing`, `installed,` `activating`, `activated` или `redundant`.

### Обработчики событий

`ServiceWorker.onstatechange` Только для чтения

Срабатывает при срабатывании события `statechange`; По сути, срабатывает при каждом изменении `ServiceWorker.state`.

Методы
------

*Интерфейс `ServiceWorker` наследует все методы интерфейса `Worker`, кроме `Worker.terminate`, который не должен быть доступен для Service Worker.*

Примеры
-------

Этот фрагмент кода из примера событий Service Worker (демо). Данный код возвращает значение `ServiceWorker.state` при каждом изменении состояния.

```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", {
      scope: "./",
    })
    .then(function (registration) {
      var serviceWorker;
      if (registration.installing) {
        serviceWorker = registration.installing;
        document.querySelector("#kind").textContent = "installing";
      } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        document.querySelector("#kind").textContent = "waiting";
      } else if (registration.active) {
        serviceWorker = registration.active;
        document.querySelector("#kind").textContent = "active";
      }
      if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener("statechange", function (e) {
          // logState(e.target.state);
        });
      }
    })
    .catch(function (error) {
      // Произошла ошибка при регистрации Service Worker.
      // Файл service-worker.js может быть недоступным или содержать ошибки синтаксиса.
    });
} else {
  // Данный браузер не поддерживает Service Worker.
}
```

Спецификации
------------

| Specification |
| --- |
| Service Workers # serviceworker-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите Также
--------------

* ServiceWorker Cookbook
* Использование Service Workers
* Базовый пример для Service Worker
* Поддержка ServiceWorker браузерами
* `Promises`
* Использование Web Workers


GamepadButton - Интерфейсы веб API

GamepadButton
=============

Интерфейс **`GamepadButton`** определяет отдельную кнопку геймпада или другого контроллера, позволяя получить доступ к текущему состоянию различных типов кнопок, доступных на устройстве
Объект **`GamepadButton`** возвращается путём получения любого элемента в массиве `buttons`, который является свойством интерфейса `Gamepad`.

**Примечание:** Это работает только в Firefox Gecko 28 и выше; Chrome и более ранние версии Firefox по-прежнему возвращают массив чисел с плавающей точкой

Свойства
--------

`GamepadButton.value` Только для чтения

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

`GamepadButton.pressed` Только для чтения

Значение `Boolean` (en-US) указывает, нажата ли кнопка (`true`) или не нажата (`false`).

Пример
------

Приведённый код взят из моего *(автора статьи)* демо Gamepad API button (вы можете Посмотреть демо, и посмотреть исходники на GitHub). Важно — в Chrome `Navigator.getGamepads` необходимо установить префикс `webkit`, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в Firefox `Navigator.getGamepads` нет необходимости устанавливать префикс, и значения будут представлять собой массив объектов `GamepadButton`; Свойство `GamepadButton.value` или `GamepadButton.pressed` необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.

```js
function gameLoop() {
  if (navigator.webkitGetGamepads) {
    var gp = navigator.webkitGetGamepads()[0];

    if (gp.buttons[0] == 1) {
      b--;
    } else if (gp.buttons[1] == 1) {
      a++;
    } else if (gp.buttons[2] == 1) {
      b++;
    } else if (gp.buttons[3] == 1) {
      a--;
    }
  } else {
    var gp = navigator.getGamepads()[0];

    if (gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
      b--;
    } else if (gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
      a++;
    } else if (gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
      b++;
    } else if (gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
      a--;
    }
  }

  ball.style.left = a \* 2 + "px";
  ball.style.top = b \* 2 + "px";

  var start = window.requestAnimationFrame(gameLoop);
}
```

Спецификации
------------

| Specification |
| --- |
| Gamepad # gamepadbutton-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

Using the Gamepad API (en-US)


IndexedDB - Интерфейсы веб API

IndexedDB
=========

IndexedDB — низкоуровневое API для клиентского хранилища большого объёма структурированных данных, включая файлы/blobs. Эти API используют индексы для обеспечения высоко-производительного поиска данных. Если DOM Storage (en-US) полезен для хранения небольшого количества данных, он менее выгоден для большого числа структурированных данных. IndexedDB предоставляет решение. Это основная страница на MDN, покрывающая IndexedDB — здесь мы предоставляем ссылки к полному списку API и руководствам по использованию, детали поддержки браузерами и некоторые объяснения ключевых концепций.

**Примечание:** Эта возможность доступна в Web Workers

**Примечание:** IndexedDB API мощные, но могут казаться слишком сложными для простых задач. Если вы предпочитаете простые API, попробуйте библиотеки, такие как localForage, dexie.js и ZangoDB, делающие IndexedDB более дружественным.

Ключевые концепции и использование
----------------------------------

IndexedDB транзакционная система базы данных, как SQL-основанная RDBMS. Однако, в отличие от RDBMS, которая использует таблицы с фиксированными колонками, IndexedDB — JavaScript-основанная объектно-ориентированная база данных. IndexedDB позволяет сохранять и возвращать объекты, которые были проиндексированы с **ключом**; любой объект, поддерживаемый структурированным алгоритмом клонирования (en-US) может быть сохранён. Необходимо описать схему базы данных, установить соединение с ней и затем получить и обновить данные за несколько **транзакций**.

* Читайте больше о Концепции IndexedDB (en-US).
* Изучите асинхронное использование IndexedDB по первоначальным принципам с руководством Using IndexedDB.
* Найдите рекомендации по разработке, чтобы заставить ваш сайт работать вне сети, на странице Offline Apps.

**Примечание:** Как и большинство решений web-хранения, IndexedDB следует аналогичной same-origin policy. Поэтому вы имеете доступ к хранилищу данных в пределах одного домена, но не можете получать их с любого другого.

### Синхронность и асинхронность

Выполнение операций использующих IndexedDB происходит асинхронно, т. е. не блокирует приложение. IndexedDB первоначально включал синхронные и асинхронные API. Синхронные API предназначались только для работы с Web Workers (en-US), но были удалены из спецификации, потому что было неясно, нужны ли они. Однако, синхронные API могут быть повторно введены, если появится спрос со стороны веб разработчиков.

### Ограничения памяти и критерии освобождения

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

Интерфейсы
----------

Чтобы получить доступ к базе данных, вызовите метод `open()` (en-US) y атрибута `indexedDB` (en-US) объекта window (en-US). Этот метод возвращает объект `IDBRequest` (en-US) ; асинхронные операции связываются с вызывающим приложением, вызывая события объекта `IDBRequest` (en-US) .

### Подключение к базе данных

`IDBEnvironment`

Предоставляет доступ к функциям IndexedDB. Реализовано объектами `window` и `worker`.

`IDBFactory` (en-US)

Предоставляет доступ к базе данных. Этот интерфейс представлен глобальным объектом `indexedDB` (en-US). Он является точкой входа для API.

`IDBOpenDBRequest` (en-US)

Представляет запрос на открытие базы данных.

`IDBDatabase` (en-US)

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

### Получение и изменение данных

`IDBTransaction` (en-US)

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

`IDBRequest` (en-US)

Generic interface that handles database requests and provides access to results.

`IDBObjectStore` (en-US)

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

`IDBIndex` (en-US)

Позволяет получить доступ к подмножеству данных в IndexedDB, но вместо первичного ключа использует индекс для извлечения записи (записей). Иногда это быстрее, чем использование `IDBObjectStore` (en-US).

`IDBCursor` (en-US)

Итерирует по хранилищам объектов и индексам.

`IDBCursorWithValue` (en-US)

Итерирует по хранилищам объектов и индексам и возвращает текущее значение курсора.

`IDBKeyRange` (en-US)

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

`IDBLocaleAwareKeyRange` (en-US)
Non-standard

Определяет диапазон ключей, который можно использовать для извлечения данных из базы данных в определённом диапазоне, отсортированных в соответствии с правилами локали, указанной для определённого индекса (см. `createIndex()`'s optionalParameters (en-US).). Этот интерфейс не входит в спецификацию 2.0.

### Пользовательские интерфейсы событий

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

`IDBVersionChangeEvent` (en-US)

Интерфейс `IDBVersionChangeEvent` указывает, что версия базы данных изменилась в результате функции обработчика событий `IDBOpenDBRequest.onupgradeneeded` (en-US).

### Устаревшие интерфейсы

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

`IDBVersionChangeRequest`

Представляет запрос на изменение версии базы данных. С тех пор способ изменения версии базы данных изменился (путём вызова `IDBFactory.open` (en-US) без вызова `IDBDatabase.setVersion`), а интерфейс `IDBOpenDBRequest` (en-US) теперь имеет функциональность удалённого `IDBVersionChangeRequest`.

`IDBDatabaseException`

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

`IDBTransactionSync`

Синхронная версия `IDBTransaction` (en-US).

`IDBObjectStoreSync`

Синхронная версия `IDBObjectStore` (en-US).

`IDBIndexSync`

Синхронная версия `IDBIndex` (en-US).

`IDBFactorySync`

Синхронная версия `IDBFactory` (en-US).

`IDBEnvironmentSync`

Синхронная версия `IDBEnvironment`.

`IDBDatabaseSync`

Синхронная версия `IDBDatabase` (en-US).

`IDBCursorSync`

Синхронная версия `IDBCursor` (en-US).

Примеры
-------

* eLibri: Мощная библиотека и приложение для чтения электронных книг, написанное Марко Кастеллуччо, победителем IndexedDB Mozilla DevDerby.
* To-do Notifications (view example live): Эталонное приложение для примеров в справочной документации.
* Storing images and files in IndexedDB
Спецификации
------------

| Specification |
| --- |
| Indexed Database API 3.0  |

Совместимость с браузерами
--------------------------

{{Compat}}Смотрите также
--------------

* localForage: Polyfill, предоставляющий простое имя: синтаксис значения для клиентского хранилища данных, которое использует IndexedDB в фоновом режиме, но обращается к WebSQL, а затем к localStorage в браузерах, которые не поддерживают IndexedDB.
* Dexie.js: Обёртка для IndexedDB, позволяющая значительно ускорить разработку кода благодаря красивому и простому синтаксису.
* ZangoDB: Интерфейс, подобный MongoDB, для IndexedDB, который поддерживает большинство знакомых функций фильтрации, проекции, сортировки, обновления и агрегирования MongoDB.
* JsStore: Оболочка IndexedDB с синтаксисом, подобным SQL.
* MiniMongo: Клиентский MongoDB, поддерживаемый localStorage, с синхронизацией сервера по http. MiniMongo используется в MeteorJS.
* PouchDB: Клиентская реализация CouchDB в браузере с использованием IndexedDB
* idb: Крошечная (~1,15 КБ) библиотека, которая в основном представляет API IndexedDB, но с небольшими улучшениями, которые имеют большое значение для удобства использования.
* idb-keyval: Суперпростое-маленькое (~600 Б) хранилище ключей на основе Promise, реализованное с помощью IndexedDB
* sifrr-storage: Небольшая (~2 КБ) библиотека на основе Promise для хранения ключей и значений на стороне клиента. Работает с IndexedDB, localStorage, WebSQL, Cookies. Может автоматически использовать поддерживаемое хранилище, доступное в зависимости от приоритета.
* lovefield: Lovefield - это реляционная база данных для веб-приложений. Написана на JavaScript, работает кроссбраузерно. Предоставляет API-интерфейсы, подобные SQL, быстрые, безопасные и простые в использовании.


Sensor - Интерфейсы веб API

Sensor
======

Интерфейс **`Sensor`** Sensor APIs это базовый класс для всех интерфейсов датчиков. Этот интерфейс нельзя использовать напрямую. Вместо этого он предоставляет свойства, обработчики событий и методы, к которым обращаются интерфейсы, которые наследуются от него.

Если функциональная политика блокирует использование функции, то это происходит потому, что ваш код не соответствует политикам, установленным на вашем сервере. Это не то, что когда-либо будет показано пользователю. Статья о HTTP заголовке `Feature-Policy` (en-US) содержит инструкцию по реализации.

EventTarget

Sensor
Сразу после того, как объект `Sensor` создан он находится в *покое*, что значит, что датчик не принимает никаких показаний. Как только был вызван метод `start()`, датчик начинает готовить себя к приёму показаний, а когда будет готов отправит событие `activate` и станет *активным*. Затем датчик отправляем событие `reading` каждый раз, когда данные готовы для считывания.

 В случае ошибки отправляется событие `error`, считывание останавливается и объект `Sensor` снова переходит в состояние *покоя*.
 Чтобы продолжить читать данные нужно снова вызвать метод `start()`.

Интерфейсы унаследованные от `Sensor`
-------------------------------------

Ниже представлен список интерфейсов, унаследованных от `Sensor`.

* `Accelerometer` (en-US)
* `AmbientLightSensor` (en-US)
* `GravitySensor` (en-US)
* `Gyroscope`
* `LinearAccelerationSensor` (en-US)
* `Magnetometer` (en-US)
* `OrientationSensor` (en-US)
Свойства
--------

`Sensor.activated` Только для чтения

Возвращает boolean значение, определяющее в активном ли состоянии находится датчик.

`Sensor.hasReading` Только для чтения

Возвращает boolean значение, определяющее считывает ли датчик показания.

`Sensor.timestamp` Только для чтения

Возвращает время последнего считывания данных.

Методы
------

`Sensor.start()`

Активирует один из датчиков, наследованных от `Sensor`.

`Sensor.stop()`

Деактивирует один из датчиков, наследованных от `Sensor`.

События
-------

`activate`

Срабатывает, когда датчик переходит в активное состояние.

`error`

Срабатывает, когда происходит ошибка во время работы датчика.

`reading`

Срабатывает, когда доступно считываение новых данных.

Спецификации
------------

| Specification |
| --- |
| Generic Sensor API # the-sensor-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLHeadElement - Интерфейсы веб API

HTMLHeadElement
===============

Интерфейс **`HTMLHeadElement`** содержит описательную информацию, или метаданные, для документа. Этот объект наследует все свойства и методы описанные в `HTMLElement` интерфейсе.

Свойства
--------

*Наследует свойства от родителя, `HTMLElement`.*

`HTMLHeadElement.profile`

Это `DOMString` представляющая URI одного или более профилей метаданных (через запятую).

Методы
------

*Не имеет специфичных методов; наследует методы от родителя, `HTMLElement`.*

Спецификации
------------

| Specification |
| --- |
| HTML Standard # htmlheadelement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* HTML-элемент реализующий этот интерфейс: `<head>`


TouchEvent - Интерфейсы веб API

TouchEvent
==========

Интерфейс **`TouchEvent`** отражает событие `UIEvent` (en-US), возникающее при изменении состояния касаний к сенсорной поверхности. К таким поверхностям можно отнести, например, сенсорные экраны или трекпады. Событие может описывать одну или несколько точек касания экрана и включает поддержку обнаружения движения, добавление и удаление точек касаний и так далее.

Каждое прикосновение представлено объектом `Touch`, который содержит данные о позиции, размере, форме, степени давления и целевом элементе. Список прикосновений представлен объектом `TouchList`.

Event

UIEvent

(en-US)

TouchEventКонструктор
-----------

`TouchEvent()` (en-US)

Создаёт экземпляр `TouchEvent`.

Свойства
--------

*Данный интерфейс наследует свойства своих предков, `UIEvent` (en-US) и `Event`.*

`TouchEvent.altKey` Только для чтения

Булево значение, показывающее, была ли нажата клавиша

`alt`

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

`TouchEvent.changedTouches` Только для чтения

Список `TouchList`, со всеми объектами `Touch`, представляющими отдельные точки касания, состояние которых изменилось между предыдущим событием касания и текущим.

`TouchEvent.ctrlKey` (en-US) Только для чтения

Булево значение, показывающее, была ли нажата клавиша

`ctrl`

, когда произошло событие касания

`TouchEvent.metaKey` (en-US) Только для чтения

Булево значение, показывающее, была ли нажата клавиша

`meta`

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

`TouchEvent.shiftKey` (en-US) Только для чтения

Булево значение, показывающее, была ли нажата клавиша

`shift`

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

`TouchEvent.targetTouches` (en-US)Только для чтения

Список `TouchList` со всеми объектами `Touch`, представляющими текущие точки касания с сенсорной поверхностью, которые находятся на одном и том же целевом элементе target.

`TouchEvent.touches` Только для чтения

Список `TouchList` со всеми объектами `Touch`, представляющими текущие точки касания с сенсорной поверхностью, вне зависимости от целевого элемента и статуса.

`TouchEvent.rotation`
Non-standard
 Только для чтения

Изменение угла поворота (в градусах) с момента начала события. Положительные значения указывают на вращение по часовой стрелке, отрицательные - против часовой стрелки. Начальное значение `0.0`

`TouchEvent.scale`
Non-standard
 Только для чтения

Расстояние между двумя цифрами с момента начала события. Является числом с плавающей точкой, отражающим расстояние между двумя цифрами в начале события. Значения ниже 1.0 указывают на щипок (уменьшение зума), больше 1.0 - увеличение. Начальное значение: `1.0`

Типы событий касания
--------------------

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

### `touchstart` (en-US)

Происходит, когда пользователь касается сенсорной поверхности. Целью события будет являться экземпляр `Element`, которого коснулись.

### `touchend` (en-US)

Происходит, когда пользователь удаляет точку касания поверхности (убирает палец или стилус с поверхности). Также это событие Происходит, если точка касания уходит за границы поверхности; например, если палец пользователя выходит за границу экрана.

Цель события - тот же экземпляр `Element`, что и для события `touchstart` с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

Точки касания, удалённые с поверхности, содержатся в списке `TouchList`, который можно получить через атрибут `changedTouches` события.

### `touchmove` (en-US)

Происходит, когда пользователь двигает точку касания по поверхности. Цель события - тот же экземпляр `element`, что и для события `touchstart` с соответствующей точкой касания, даже если точка касания переместилась за пределы элемента.

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

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

### `touchcancel` (en-US)

Происходит, если точка касания была по какой-либо причине удалена. Существует несколько возможных причин, почему это может произойти (и конкретные причины могут разниться от устройства к устройству, от браузера к браузеру):

* Произошло какое-то событие, отменившее прикосновение; это может произойти, если во время взаимодействия появляется модальное окно.
* Точка касания покинула окно документа и переместилась в область пользовательского интерфейса браузера, подключаемого модуля или другого внешнего содержимого.
* Пользователь задал больше точек касания на экране, чем поддерживается, в этом случае наиболее ранние точки `Touch` в списке `TouchList` будут отменены.
### Использование addEventListener() и preventDefault()

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

Исключением из этого правила является браузер Chrome, начиная с версии 56 (настольный, Chrome для android, и android webview), в которой значение по умолчанию для `touchstart (en-US)` и `touchmove (en-US)` равно `true` и вызовы метода `preventDefault()` не требуются. Чтобы переопределить такое поведение, просто установите значение опции `passive` равным `false` как показано в примере ниже. Это изменение запрещает обработчику блокировать отрисовку страницы во время прокрутки пользователем. Демонстрация этого доступна на сайте Google Developer.

GlobalEventHandlers
-------------------

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

`GlobalEventHandlers.ontouchstart` (en-US)
Экспериментальная возможность

Обработчик `global event handler` для события `touchstart (en-US)`.

`GlobalEventHandlers.ontouchend` (en-US)
Экспериментальная возможность

Обработчик `global event handler` для события `touchend (en-US)`.

`GlobalEventHandlers.ontouchmove` (en-US)
Экспериментальная возможность

Обработчик `global event handler` для события `touchmove (en-US)`.

`GlobalEventHandlers.ontouchcancel` (en-US)
Экспериментальная возможность

Обработчик `global event handler` для события `touchcancel (en-US)`.

Пример
------

Смотрите пример в основной статье о событиях касания.

Спецификации
------------

| Specification |
| --- |
| Touch Events # touchevent-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Touch Events Overview`
* `GestureEvent` (en-US)
* `MSGestureEvent`


Media Session API - Интерфейсы веб API

Media Session API
=================

API Media Session даёт разработчику возможность настроить уведомление о медиа. С помощью него можно предоставить метаданные о проигрываемых приложением медиа, а также позволяет приложению реагировать на команды управления воспроизведением. Смысл данного интерфейса в том, чтобы пользователь мог просматривать и управлять медиаконтентом, не переходя на страницу, где происходит воспроизведение.

Принципы и использование Media Session
--------------------------------------

Интерфейс `MediaMetadata` (en-US) позволяет приложению передавать метаданные о воспроизводимом контенте браузеру и ОС. Примеры таких метаданных: название, исполнитель, альбом и обложка. Данная информация может отображаться в медиацентре, блоке уведомлений или на экране блокировки.

Интерфейс `MediaSession` (en-US) позволяет пользователям контролировать воспроизведение с помощью элементов управления браузера. Взаимодействие с этими элементами также вызывает события в приложении. Так как этот API может использоваться сразу несколькими страницами, браузер контролирует, какая страница получит события. Браузер предоставляет поведение по умолчанию, если оно не было переопределено страницами.

Работа с Media Session API
--------------------------

Главный интерфейс Media Session API — `MediaSession` (en-US). Не нужно создавать собственный экземпляр `MediaSession`, доступ к API осуществляется через свойство `navigator.mediaSession` (en-US). Например, следующий код укажет, что страница воспроизводит медиа в данный момент:

```js
navigator.mediaSession.playbackState = "playing";
```

Интерфейсы
----------

`MediaMetadata` (en-US)

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

`MediaSession` (en-US)

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

Объекты
-------

`MediaImage` (en-US)

Объект `MediaImage` содержит информацию об отображаемой картинке. Чаще всего этим изображением является обложка или постер.

`MediaPositionState` (en-US)

Содержит информацию о длине трека, месте и скорости воспроизведения, передаваемую с помощью метода `setPositionState()` (en-US).

`MediaSessionActionDetails` (en-US)

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

Примеры
-------

Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передаёт метаданные и определяет собственные обработчики событий:

```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });

  navigator.mediaSession.setActionHandler("play", function () {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("pause", function () {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekbackward", function () {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("seekforward", function () {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("previoustrack", function () {
    /\* Code excerpted. \*/
  });
  navigator.mediaSession.setActionHandler("nexttrack", function () {
    /\* Code excerpted. \*/
  });
}
```

Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события `pointerup` для кнопки воспроизведения на странице, который начнёт работу с медиасессией:

```js
playButton.addEventListener("pointerup", function (event) {
  var audio = document.querySelector("audio");

  // Пользователь нажал кнопку, начинаем воспроизведение...
  audio
    .play()
    .then((\_) => {
      /\* Настройка элементов управления (показана выше). \*/
    })
    .catch((error) => {
      console.log(error);
    });
});
```

Спецификации
------------

| Specification |
| --- |
| Media Session # the-mediasession-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


PannerNode - Интерфейсы веб API

PannerNode
==========

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

`PannerNode` всегда имеет только один вход и один выход: вход может быть *моно* или *стерео*, но выход всегда *стерео* (2 канала); нельзя получить эффекты панорамирования при отсутствии, как минимум двух аудиоканалов!

![PannerNode задаёт положение в пространстве, скорость распространения и направленность данного сигнала.](/ru/docs/Web/API/PannerNode/pannernode.png)

|  |  |
| --- | --- |
| Число входов | `1` |
| Число выходов | `1` |
| Режим подсчёта каналов | `"clamped-max"` |
| Количество каналов | `2` |
| Представление канала | `"speakers"` |

Конструктор
-----------

`PannerNode.PannerNode` (en-US)

Создаёт новый экземпляр `PannerNode.`

Свойства
--------

Наследует свойства от своего родителя\*, `AudioNode`\*.

Значения направления и положения устанавливаются и получаются различными вариантами синтаксиса, поскольку они хранятся в виде значений `AudioParam` (en-US). Получение значения осуществляется через обращение, например так, `PannerNode.positionX`. Установка того же свойства делается так, `PannerNode.positionX.value`. This is why these values are not marked read only, which is how they appear in the WebIDL.

`PannerNode.coneInnerAngle` (en-US)

Это значение типа `double`, представляющее угол конуса (в градусах), внутри которого не будет уменьшения громкости.

`PannerNode.coneOuterAngle` (en-US)

Это значение типа `double`, представляющее угол конуса (в градусах), вне которого громкость звука будет уменьшена на постоянное значение, определяемое атрибутом `coneOuterGain.`

`PannerNode.coneOuterGain` (en-US)

Это значение типа `double`, представляющее величину снижения уровня громкости вне конуса, определённого атрибутом `coneOuterAngle`. Значение по умолчанию равно `0`, то есть, вне конуса звук не будет слышен.

`PannerNode.distanceModel` (en-US)

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

`PannerNode.maxDistance` (en-US)

Значение типа `double`, представляющее максимальное расстояние между источником звука и слушателем, после которого громкость звука далее не уменьшается.

`PannerNode.orientationX` (en-US)

Представляет горизонтальное положение вектора источника звука в правосторонней системе координат Декарта. В то время как данный `AudioParam` (en-US) непосредственно изменить нельзя, его значение может быть изменено через его свойство `value` (en-US) . Значение по умолчанию равно 1.

`PannerNode.orientationY` (en-US)

Представляет вертикальное положение вектора источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный `AudioParam` (en-US) непосредственно изменить нельзя, его значение может быть изменено через его свойство `value` (en-US). Значение по умолчанию равно 0.

`PannerNode.orientationZ` (en-US)

Представляет продольную (вперёд - назад) позицию вектора распространения звука от источника в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный `AudioParam` (en-US) непосредственно изменить нельзя, его значение может быть изменено через его свойство `value` (en-US). Значение по умолчанию равно 0.

`PannerNode.panningModel` (en-US)

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

`PannerNode.positionX` (en-US)

Представляет горизонтальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный `AudioParam` (en-US) непосредственно изменить нельзя, его значение может быть изменено через его свойство `value` (en-US). Значение по умолчанию равно 0.

`PannerNode.positionY` (en-US)

Представляет вертикальное положение источника звука в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный `AudioParam` (en-US) непосредственно изменить нельзя, его значение может быть изменено через его свойство `value` (en-US). Значение по умолчанию равно 0.

`PannerNode.positionZ` (en-US)

Представляет позицию источника звука вдоль оси Z (вперёд и назад) в правосторонней системе координат Декарта. Значение по умолчанию равно 0. В то время как данный `AudioParam` (en-US) непосредственно изменить нельзя, его значение может быть изменено через его свойство `value` (en-US). Значение по умолчанию равно 0.

`PannerNode.refDistance` (en-US)

Значение типа `double`, представляющее справочное (опорное) расстояние для уменьшения громкости при удалении источника звука от слушателя.

`PannerNode.rolloffFactor` (en-US)

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

Методы
------

Наследует методы от своего родителя\*, `AudioNode`\*.

`PannerNode.setPosition()` (en-US)

Определяет положение источника звука относительно слушателя (представлен объектом `AudioListener` (en-US), хранящимся в атрибуте `AudioContext.listener` (en-US) ).

`PannerNode.setOrientation()` (en-US)

Определяет направление воспроизведения источника звука.

`PannerNode.setVelocity()`

 Это устаревший элемент API и его работа в дальнейшем не гарантируется.
 Определяет вектор распространения звука от источника - как быстро он движется и в каком направлении. В предыдущей версии спецификации, `PannerNode` имел скорость распространения, которую можно было выдать выше или ниже подключённого потока `AudioBufferSourceNode` (en-US). Эта функция не была чётко оговорена и имела ряд проблем, поэтому была удалена из спецификации.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # PannerNode |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Using the Web Audio API (en-US)
* Основы панорамирования. Расположение звуков в виртуальном пространстве.


Cache - Интерфейсы веб API

Cache
=====

Интерфейс **`Cache`** представляет собой механизм хранения пары объектов `Request` / `Response,` которые кешируются, например, как часть жизненного цикла `ServiceWorker`. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определён в их спецификации.

Для вызывающего скрипта может быть множество именованных объектов `Cache`. Разработчик сам определяет реализацию того, как скрипт (например, в `ServiceWorker`) управляет обновлением `Cache`. Записи в `Cache` не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечёт до момента удаления. Используйте `CacheStorage.open(cacheName)`, чтобы открыть определённый именованный объект `Cache` и затем вызывайте любые методы `Cache` для управления его состоянием.

Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жёсткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удаляет ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. Смотрите Удаление старого кеша (en-US).

**Примечание:** `Cache.put` (en-US), `Cache.add` и `Cache.addAll` допускают сохранение в кеш только `GET` запросов.

**Примечание:** Изначально, реализация Cache (как в Blink, так и в Gecko) возвращала успешное завершение для промисов `Cache.add`, `Cache.addAll` и `Cache.put` (en-US), когда тело ответа было полностью помещено в хранилище. Более поздние версии используют новейший язык, утверждая, что браузер может разрешить промис как только запись будет записана в базу данных, даже если тело ответа все ещё загружается в потоке.

**Примечание:** Начиная с Chrome 46, Cache API будут хранить запросы только от безопасных источников, то есть, доступных через HTTPS.

**Примечание:** Алгоритм сопоставления ключей зависит от заголовка VARY хранимого значения. Таким образом, сопоставление нового ключа требует одновременно как проверки самого ключа, так и значений для записей в Cache.

**Примечание:** Кеширующие API не приветствуют заголовки кеширования HTTP.

Методы
------

`Cache.match(request, options)`

Возвращает `Promise`, который успешно завершается с нахождением первого совпадения для данного запроса в объекте `Cache`.

`Cache.matchAll(request, options)`

Возвращает `Promise`, который успешно завершается и возвращает массив всех найденных совпадений для данного запроса в объекте `Cache`.

`Cache.add(request)`

Принимает в качестве параметра URL, получает данные по нему и добавляет полученный объект ответа в заданный кеш. Функциональный эквивалент вызову fetch() с последующим вызовом Cache.put() для добавления результата в кеш.

`Cache.addAll(requests)`

Принимает массив URL в качестве параметра, получает данные по ним, добавляет полученные объекты ответов в заданный кеш.

`Cache.put(request, response)` (en-US)

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

`Cache.delete(request, options)`

Находит запись `Cache`, чей ключ является запросом, и, в случае нахождения, удаляет запись `Cache` и возвращает `Promise`, успешно завершающийся со значением `true`. Если же запись `Cache` не найдена, возвращается `false`.

`Cache.keys(request, options)`

Возвращает `Promise`, который отдаёт массив ключей `Cache`.

Примеры
-------

Этот пример кода из примера выборочного кеширования сервис воркера. (смотрите работа выборочного кеширования). В коде используется `CacheStorage.open(cacheName)` для открытия любых объектов `Cache` с заголовком Content-Type, начинающимся с `font/`.

Далее используется `Cache.match(request, options)` для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и использует `Cache.put(request, response)` (en-US) для кеширования полученного ресурса.

Код обрабатывает исключения, возможные при операции `fetch()` (en-US). Заметьте, что HTTP-ответ с ошибкой (например, 404) не будет вызывать исключения. Будет возвращён нормальный объект ответа с установленным соответствующим кодом ошибки.

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

В примере кода "кеш" это атрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ к CacheStorage API.

**Примечание:** В Chrome, откройте chrome://inspect/#service-workers и кликните по ссылке "inspect" под зарегистрированным сервис воркером чтобы увидеть записи журнала по различным действиям выполняемым скриптом service-worker.js.

```js
var CACHE\_VERSION = 1;

// Сокращённый идентификатор привязанный к определённой версии кеша.
var CURRENT\_CACHES = {
  font: "font-cache-v" + CACHE\_VERSION,
};

self.addEventListener("activate", function (event) {
  var expectedCacheNames = Object.keys(CURRENT\_CACHES).map(function (key) {
    return CURRENT\_CACHES[key];
  });

  // Активный воркер не будет рассматриваться как активированный, пока promise не разрешится успешно.
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.map(function (cacheName) {
          if (expectedCacheNames.indexOf(cacheName) == -1) {
            console.log("Deleting out of date cache:", cacheName);

            return caches.delete(cacheName);
          }
        }),
      );
    }),
  );
});

self.addEventListener("fetch", function (event) {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    // Открывает объекты Cache, начинающиеся с 'font'.
    caches.open(CURRENT\_CACHES["font"]).then(function (cache) {
      return cache
        .match(event.request)
        .then(function (response) {
          if (response) {
            console.log("Found response in cache:", response);

            return response;
          }
        })
        .catch(function (error) {
          // Обрабатывает исключения от match() или fetch().
          console.error("Error in fetch handler:", error);

          throw error;
        });
    }),
  );
});
```

Спецификации
------------

| Specification |
| --- |
| Service Workers # cache-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование Сервис Воркеров (en-US)
* Базовый пример кода для Сервис воркеров
* Готов ли Сервис Воркер?
* `Promise`
* Использование web воркеров (en-US)


Веб хранилище (API) - Интерфейсы веб API

Веб хранилище (API)
===================

Web Storage API предоставляет механизмы, при помощи которых браузеры могут безопасно хранить пары ключ/значение в более интуитивно понятной манере, чем куки (cookies).

Основы Веб хранилища и его использование
----------------------------------------

В основе Веб хранилища лежат два механизма:

* `хранилище сессии (sessionStorage)` обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)
* `локальное хранилище (localStorage)` делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер.

Обе функции доступны через `Window.sessionStorage` и `Window.localStorage` свойства (если быть более точным, в браузерах, поддерживающих хранилища объект `Window` выполняет объекты `WindowLocalStorage` и `WindowSessionStorage`, которые содержат свойства `localStorage` и `sessionStorage`) — вызов одного из них создаёт представление объекта `Storage`, через который можно устанавливать, редактировать и удалять данные. Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта - они функционируют и управляются отдельно друг от друга.

**Примечание:** Начиная с версии 45 Firefox, когда браузер прекращает работу/перезагружается, объем данных, сохранённых для каждого источника, ограничивается 10 МБ. Это было сделано, чтобы избежать проблем с памятью, вызванных чрезмерным использованием веб-хранилища.

**Примечание:** Доступ к веб хранилищу из iFrame третьей стороны запрещён, если пользователь отключил cookies третьих сторон (Firefox ведёт себя так с версии 43).

**Примечание:** Web Storage это не тоже самое, что mozStorage (Mozilla's XPCOM интерфейсы для SQLite) или Session store API (XPCOM утилита хранения для расширений).

Интерфейсы Веб хранилища
------------------------

`Storage`

Позволяет присваивать, извлекать (читать) и удалять данные для специфического домена и типа хранилища (сессии или локального).

`Window`

Web Storage API расширяет `Window` объект, добавляя к нему два новых свойства — `Window.sessionStorage` и `Window.localStorage` — которые предоставляют доступ к сессии текущего домена и к соответствующим локальным `Storage` объектам, и `Window.onstorage` (en-US) обработчик событий, который срабатывает при изменении объекта хранилища (например, при сохранении нового элемента)

`StorageEvent` (en-US)

Событие `storage` срабатывает на объекте документа Window при изменении объекта хранилища.

Примеры
-------

Чтобы проиллюстрировать типичное использование веб хранилища, мы создали простейший пример и назвали его Web Storage Demo. На лендинге нашего примера вы найдёте элементы управления для изменения фонового цвета, шрифта и изображения. Когда вы выбираете разные опции, страница мгновенно меняется. В дополнение, ваш выбор сохраняется в локальном хранилище, чтобы, если вы покинете страницу и потом загрузите её снова, ваши настройки восстановились.

Также, мы сделали страницу вывода событий, которая выводит информацию о хранилище, каждый раз когда срабатывает событие `StorageEvent` (en-US). Загрузите эту страницу в другой вкладке браузера, затем вернитесь на лендинг и поменяйте значения цвета, шрифта или изображения и понаблюдайте, как меняется выводимая информация.

Спецификации
------------

| Specification |
| --- |
| HTML Living Standard # webstorage |

Совместимость с браузерами
--------------------------

### api.Window.localStorage

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.Window.sessionStorage

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Приватный режим/Инкогнито
-------------------------

Многие браузеры в наши дни поддерживают опции приватности, названные "Инкогнито" или "Приватный просмотр" и т.п., что позволяет быть уверенными, что следов приватной сессии не остаётся после закрытия браузера. Это фундаментальная несовместимость с Веб хранилищем по очевидным причинам. Таким образом, производители браузеров экспериментируют с различными сценариями, как справиться с этой несовместимостью.

Многие браузеры выбрали стратегию, когда API хранилища доступно и кажется полностью функциональным, с одним большим отличием - все данные хранилища стираются после закрытия браузера. Для этих браузеров есть ещё другие интерпретации того, что следует делать с хранимыми данными (от обычного режима браузера). Следует ли им быть доступными в приватном режиме? Затем, есть несколько браузеров, особенно Safari, которые выбрали решение, в котором хранилище доступно, но пустое и имеет квоту 0 байт, фактически, делая невозможной запись туда данных.

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

Смотрите также
--------------

* Использование Web Storage API
* HTML5 Storage API By Venkatraman


BluetoothRemoteGATTServer - Интерфейсы веб API

BluetoothRemoteGATTServer
=========================

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

Интерфейс **`BluetoothRemoteGATTServer`**, относящийся к Web Bluetooth API (en-US), представляет сервер GATT на удалённом устройстве.

**Примечание:** Данная страница описывает Web Bluetooth API от W3C Community Group. `BluetoothGattServer` (Firefox OS) - Bluetooth API в Firefox OS.

Интерфейс
---------
```

interface BluetoothRemoteGATTServer {
  readonly attribute BluetoothDevice device;
  readonly attribute boolean connected;

  Promise<BluetoothRemoteGATTServer> connect();
  void disconnect();
  Promise<BluetoothRemoteGATTService> getPrimaryService(BluetoothServiceUUID service);
  Promise<sequence<BluetoothRemoteGATTService>> getPrimaryServices(optional BluetoothServiceUUID service);
};
```

Свойства
--------

`BluetoothRemoteGATTServer.connected` (en-US)Только для чтения

Двоичное значение, равное `true`, если устройство `this.device` подключено. It can be false while the user agent is physically connected.

`BluetoothRemoteGATTServer.device` (en-US)Только для чтения

`BluetoothDevice` (en-US), на котором работает сервер.

Методы
------

`BluetoothRemoteGATTServer.connect()` (en-US)

Подключение к устройству `this.device`.

`BluetoothRemoteGATTServer.disconnect()` (en-US)

Отключение от устройства `this.device`.

`BluetoothRemoteGATTServer.getPrimaryService()` (en-US)

Returns a promise to the primary `BluetoothGATTService` (en-US) offered by the bluetooth device for a specified `BluetoothServiceUUID`.

`BluetoothRemoteGATTServer.getPrimaryServices()` (en-US)

Returns a promise to a list of primary `BluetoothGATTService` (en-US) objects offered by the bluetooth device for a specified `BluetoothServiceUUID`.

Спецификации
------------

| Specification |
| --- |
| Web Bluetooth # bluetoothgattremoteserver-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.