Видимость страницы API - Интерфейсы веб API

Видимость страницы API
======================

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

**Примечание:** The Page Visibility API особенно полезно для сбережения ресурсов и улучшения производительности, позволяя странице остановить выполнение не нужных задач, когда она не видна.

Когда пользователь сворачивает окно или переключается на другую вкладку, API отправляет `visibilitychange (en-US)` событие обработчикам, что состояние страницы изменилось. Вы можете отследить это событие и выполнить какие-то действия. Например, если ваше app проигрывает видео, его можно поставить на паузу, когда пользователь переключил вкладку (страница ушла в фон), а затем возобновить видео, когда пользователь вернулся на вкладку. Пользователь не теряет место на котором остановил просмотр, звук от видео не конфликтует с аудио новой вкладки, пользователь комфортно просмотреть оба видео.

Состояния видимости для `<iframe>` (en-US) такие же как и для родительской страницы. Скрытие `<iframe>` используя CSS стили (такие как `display: none;`) не вызывают события видимости и не изменяют состояние документа, содержащегося во фрейме.

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

Давайте рассмотрим несколько способов использования Page Visibility API.

* На сайте есть слайдер изображений с автопрокруткой, которую можно поставить на паузу, когда пользователь перешёл на другую вкладку
* Приложение выводит информацию в реальном времени, которую можно не обновлять, пока страница не видна, тем самым уменьшить количество запросов на сервер
* Странице нужно понять, когда она должна быть отрисована, так что можно вести точный подсчёт количества просмотров
* Сайту нужно выключить звук, когда устройство в режиме ожидания (пользователь нажал кнопку включения, чтобы погасить экран)

Раньше у разработчиков были не удобные способы. Например, обработка `blur (en-US)` и `focus (en-US)` событий на объекте window - помогала узнать когда страница становилась не активной, но это не давало возможность понять когда страница действительно скрыта от пользователя. Page Visibility API решает эту проблему.

**Примечание:** Когда `onblur` и `onfocus` уведомляют, что пользователь переключил окна, это не означает, что оно действительно скрыто. Страница действительно скрыта, когда пользователь переключил вкладки или свернул окно браузера с этой вкладкой.

### Policies in place to aid background page performance

Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:

* Most browsers stop sending `requestAnimationFrame()` callbacks to background tabs or hidden `<iframe>` (en-US)s in order to improve performance and battery life.
* Timers such as `setTimeout()` are throttled in background/inactive tabs to help improve performance. See Reasons for delays longer than specified for more details.
* Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows:
    + In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.
    + Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see Reasons for delays longer than specified). In Chrome, this value is 10 seconds.
    + Timer tasks are only permitted when the budget is non-negative.
    + Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.
    + The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.

Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.

* Tabs which are playing audio are considered foreground and aren't throttled.
* Tabs running code that's using real-time network connections (WebSockets and WebRTC) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.
* IndexedDB processes are also left unthrottled in order to avoid timeouts.
Example
-------

View live example (video with sound).

The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:

```js
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
  // Opera 12.10 and Firefox 18 and later support
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("videoElement");

// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log(
    "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.",
  );
} else {
  // Handle page visibility change
  document.addEventListener(visibilityChange, handleVisibilityChange, false);

  // When the video pauses, set the title.
  // This shows the paused
  videoElement.addEventListener(
    "pause",
    function () {
      document.title = "Paused";
    },
    false,
  );

  // When the video plays, set the title.
  videoElement.addEventListener(
    "play",
    function () {
      document.title = "Playing";
    },
    false,
  );
}
```

Properties added to the Document interface
------------------------------------------

The Page Visibility API adds the following properties to the `Document` interface:

`Document.hidden` Только для чтения

Returns `true` if the page is in a state considered to be hidden to the user, and `false` otherwise.

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

A `DOMString` indicating the document's current visibility state. Possible values are:

`visible`

The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.

`hidden`

The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized, or because the device's screen is off.

`prerender`

The page's content is being prerendered and is not visible to the user. A document may start in the `prerender` state, but will never switch to this state from any other state, since a document can only prerender once.

**Примечание:** Not all browsers support prerendering.

`unloaded`

The page is in the process of being unloaded from memory.

**Примечание:** Not all browsers support the `unloaded` value.

`Document.onvisibilitychange` (en-US)

An `EventListener` (en-US) providing the code to be called when the `visibilitychange (en-US)` event is fired.

```js
//startSimulation and pauseSimulation defined elsewhere
function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);
```

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

| Specification |
| --- |
| HTML Standard # dom-document-visibilitystate |

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

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

See also
--------

* Description of the Page Visibility API on the IEBlog.
* Description of the Page Visibility API by Google


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

ServiceWorkerContainer
======================

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

ServiceWorker API (en-US) предоставляет интерфейс `ServiceWorkerContainer`, являющийся объектом (объект представляет собой сервис воркер, как единое целое в сетевой экосистеме) включающим следующие средства:
 Регистрация;
 Отмена регистрации;
 Обновление сервис воркеров;
 Доступ к состоянию сервис воркеров;
 Доступ к регистрации сервис воркеров.

Most importantly, it exposes the `ServiceWorkerContainer.register(scriptURL, scope[, base])` method used to register service workers, and the `ServiceWorkerContainer.controller` property used to determine whether or not the current page is actively controlled.

Properties
----------

`ServiceWorkerContainer.controller` Только для чтения

Returns a `ServiceWorker` object if its state is `activated` (the same object returned by `ServiceWorkerRegistration.active` (en-US)). This property returns `null` if the request is a force refresh (*Shift* + refresh) or if there is no active worker.

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

Defines whether a service worker is ready to control a page or not. It returns a `Promise` that will never reject, which resolves to a `ServiceWorkerRegistration` with an `ServiceWorkerRegistration.active` (en-US) worker.

### Event handlers

`ServiceWorkerContainer.oncontrollerchange` (en-US)

An event handler fired whenever a `controllerchange` event occurs — when the document's associated `ServiceWorkerRegistration` acquires a new `ServiceWorkerRegistration.active` (en-US) worker.

`ServiceWorkerContainer.onerror` (en-US)

An event handler fired whenever an `error (en-US)` event occurs in the associated service workers.

`ServiceWorkerContainer.onmessage` (en-US)

An event handler fired whenever a `message` event occurs — when incoming messages are received to the `ServiceWorkerContainer` object (e.g. via a `MessagePort.postMessage()` (en-US) call.)

Methods
-------

`ServiceWorkerContainer.register()`

Creates or updates a `ServiceWorkerRegistration` for the given `scriptURL`.

`ServiceWorkerContainer.getRegistration()` (en-US)

Gets a `ServiceWorkerRegistration` object whose scope URL matches the provided document URL. If the method can't return a `ServiceWorkerRegistration`, it returns a `Promise`.

`ServiceWorkerContainer.getRegistrations()` (en-US)

Returns all `ServiceWorkerRegistration`s associated with a `ServiceWorkerContainer` in an array. If the method can't return `ServiceWorkerRegistration`s, it returns a `Promise`.

Examples
--------

This code snippet is from the service worker fallback-response sample (see fallback-response live). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("service-worker.js", { scope: "./" })
    .then(function () {
      if (navigator.serviceWorker.controller) {
        document.querySelector("#status").textContent =
          "The service worker is currently handling network operations.";
        showRequestButtons();
      } else {
        document.querySelector("#status").textContent =
          "Please reload this page to allow the service worker to handle network operations.";
      }
    })
    .catch(function (error) {
      document.querySelector("#status").textContent = error;
    });
} else {
  var aElement = document.createElement("a");
  aElement.href =
    "http://www.chromium.org/blink/serviceworker/service-worker-faq";
  aElement.textContent = "unavailable";
  document.querySelector("#status").appendChild(aElement);
}
```

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

| Specification |
| --- |
| Service Workers # serviceworkercontainer-interface |

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

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

See also
--------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)


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

ImageBitmap
===========

Интерфейс **`ImageBitmap`** представляет собой bitmap изображение которое может быть нарисовано на `<canvas>` без чрезмерной задержки. Создать его можно несколькими способами используя `createImageBitmap()` (en-US). `ImageBitmap` предоставляет асинхронный и ресурсоэффективный метод подготовки текстур для рендеринга в WebGL.

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

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

Высота `ImageData` в CSS пикселях типа `unsigned` `long`.

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

Ширина `ImageData` в CSS пикселях типа `unsigned` `long`.

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

`ImageBitmap.close()` (en-US)

Удаляет все графические ресурсы связанные с `ImageBitmap`.

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

| Specification |
| --- |
| HTML Standard # imagebitmap |

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

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

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

* `ImageBitmapFactories.createImageBitmap()` (en-US)
* `CanvasRenderingContext2D.drawImage()`
* `WebGLRenderingContext.texImage2D()` (en-US)
* `OffScreenCanvas.transferToImageBitmap()` (en-US)


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

HTMLUnknownElement
==================

Интерфейс **`HTMLUnknownElement`** предоставляет недопустимый HTML-элемент и происходит от интерфейса `HTMLElement`, но без каких либо дополнительных свойств и методов.

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

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

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

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

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

| Specification |
| --- |
| HTML Standard # htmlunknownelement |

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

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

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

* Устаревшие или нестандартные HTML-элементы реализующие этот интерфейс: `<bgsound>` (en-US), `<isindex>`, `<multicol>`, `<nextid>`, `<rb>` (en-US), `<spacer>`


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

SubtleCrypto
============

Интерфейс **`SubtileCrypto`** представляет набор криптографических примитивов. Экземпляр **`SubtileCrypto`** доступен как `Crypto.subtle` (en-US), в контексте window (`Window.crypto`).

**Предупреждение:** Per the spec: "Developers making use of the SubtleCrypto interface are expected to be aware of the security concerns associated with both the design and implementation of the various algorithms provided. The raw algorithms are provided in order to allow developers maximum flexibility in implementing a variety of protocols and applications, each of which may represent the composition and security parameters in a unique manner that necessitate the use of the raw algorithms."

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

*Интерфейс не наследует и не определяет собственные свойства.*

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

`SubtleCrypto.encrypt()` (en-US)

Возвращает `Promise` с данными, зашифрованными на основании исходного текста, алгоритма шифрования и ключа, переданных в качества аргументов.

`SubtleCrypto.decrypt()` (en-US)

Возвращает `Promise` с исходным текстом. В качества аргументов принимает зашифрованную строку, алгоритм шифрования и ключ.

`SubtleCrypto.sign()` (en-US)

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

`SubtleCrypto.verify()` (en-US)

Возвращает `Promise` с `Boolean` значением, определяющим соответствует ли переданная сигнатура тексу, алгоритму шифрования и ключу, также переданным в качества аргументов.

`SubtleCrypto.digest()` (en-US)

Возвращает `Promise` с хеш-суммой сгенерированной на основании алгоритма шифрования и исходного текста, переданных в качества аргументов

`SubtleCrypto.generateKey()` (en-US)

Возвращает `Promise` с сгенерированным `CryptoKey` (en-US) для симметричных алгоритмов, или `CryptoKeyPair` для асимметричных алгоритмов.

`SubtleCrypto.deriveKey()` (en-US)

Возвращает `Promise` с сгенерированным `CryptoKey` (en-US), на основе переданных в качестве аргументов мастер-ключа и алгоритма шифрования.

`SubtleCrypto.deriveBits()` (en-US)

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

`SubtleCrypto.importKey()` (en-US)

Returns a `Promise` of a `CryptoKey` (en-US) corresponding to the format, the algorithm, the raw key data, the usages and the extractability given as parameters.

`SubtleCrypto.exportKey()` (en-US)

Returns a `Promise` of a buffer containing the key in the format requested.

`SubtleCrypto.wrapKey()` (en-US)

Returns a `Promise` of a wrapped symmetric key for usage (transfer, storage) in insecure environments. The wrapped buffer returned is in the format given in parameters, and contains the key wrapped by the given wrapping key with the given algorithm.

`SubtleCrypto.unwrapKey()` (en-US)

Returns a `Promise` of a `CryptoKey` (en-US) corresponding to the wrapped key given in parameter.

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

| Specification |
| --- |
| Web Cryptography API # subtlecrypto-interface |

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

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

See also
--------

* `Crypto` and `Crypto.subtle` (en-US).


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

HTMLContentElement
==================

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
**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

The **`HTMLContentElement`** interface represents a `<content>` (en-US) HTML Element, which is used in Shadow DOM (en-US).

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

*This interface inherits the properties of `HTMLElement`.*

`HTMLContentElement.select` (en-US)

Is a `DOMString` that reflects the `select` (en-US) HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the `<content>` element.

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

*This interface inherits the methods of `HTMLElement`.*

`HTMLContentElement.getDistributedNodes()` (en-US)

Returns a static `NodeList` of the distributed nodes associated with this `<content>` element.

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

This feature is no longer defined by any standards.

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

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

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

* The `<content>` (en-US) HTML element, implementing this interface.
* Shadow DOM (en-US)


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

File
====

Интерфейс **`File`** представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту.

`Объекты File` как правило извлекаются из объекта `FileList`, который возвращён как результат пользовательского выбора файлов с помощью `<input>` элемента, из drag and drop операций `DataTransfer` объекта, или из `mozGetAsFile()` API на `HTMLCanvasElement`. В Gecko, привилегированный код может создать файл представляющий любой локальный файл без пользовательского взаимодействия (см. Gecko notes для получения большей информации).

Объект `File` - особый вид `Blob`, и может быть использован в любом контексте так же, как и Blob. В частности, `FileReader`, `URL.createObjectURL()`, `createImageBitmap()` (en-US), и `XMLHttpRequest.send()` допускают и `Blob,` и `File`.

Смотри Использование файлов в веб приложениях для получения более подробной информации и примеров.

Свойства экземпляра
-------------------

*Интерфейс `File` также наследует свойства от `Blob` интерфейса:*

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

Возвращает время последнего изменения файла в миллисекунде с эпохи UNIX (1 января 1970 года в 00:00:00 в часовом поясе UTC).

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

Возвращает дату последнего изменения файла, на который ссылается объект File.

`File.name` Только для чтения

Возвращает имя файла, на который ссылается объект File.

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

Возвращает размер файла.

`File.webkitRelativePath` (en-US) Только для чтения
Non-standard

Возвращает URL адрес, где расположен `File`.

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

Возвращает MIME тип файла.

Методы экземпляра
-----------------

*Интерфейс `File` не определяет собственных методов, но наследует методы интерфейса `Blob`.*

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

| Specification |
| --- |
| File API # file-section |

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

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

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

* Использование файлов из веб-приложений
* `FileReader`


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

SharedWorker
============

`Интерфейс SharedWorker (разделяемый воркер)` является особым видом воркеров к которому можно получить доступ из нескольких контекстов браузера, например, из нескольких окон, iframe, или других воркеров. Этот интерфейс реализован иначе, чем dedicated воркеры и имеют иной глобальный контекст, `SharedWorkerGlobalScope` (en-US).

**Примечание:** Если SharedWorker может быть доступен из нескольких контекстов браузера, все они должны разделять одинаковое расположение (идентичные протокол, хост и порт).

**Примечание:** В Firefox, разделяемые воркеры не могут взаимодействовать между private (например, просматриваемыми в приватном режиме) и non-private документами (см. Firefox bug 1177621.)

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

*Наследует свойства родителя, `EventTarget`, и реализует свойства `AbstractWorker` (en-US).*

`AbstractWorker.onerror` (en-US)

`EventListener` (en-US) который вызывается всегда, когда `ErrorEvent` (en-US) типа `error` всплывает через воркер.

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

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

Constructors
------------

`SharedWorker()` (en-US)

Создаёт разделяемый веб воркер, который выполняет скрипт по указанному URL.

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

*Наследует методы родительского класса, `EventTarget`, и реализует свойства `AbstractWorker` (en-US).*

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

В нашем Базовом примере разделяемого воркера (запустить), имеются две HTML страницы, каждая из которых использует JavaScript для простых вычислений. Разные скрипты используют один и тот же воркер, чтобы выполнить умножение двух чисел - они оба имеют доступ к нему, даже если их страницы запущены в разных окнах.

Следующий пример кода демонстрирует создание объекта `SharedWorker` с использованием конструктора `SharedWorker()` (en-US). Оба скрипта содержат:

```js
var myWorker = new SharedWorker("worker.js");
```

далее скрипты получают доступ к воркеру через объект `MessagePort` (en-US), находящийся в свойстве `SharedWorker.port` (en-US). Если устанавливается обработчик события onmessage, port самостоятельно начинает работу, вызывая собственный метод `start()`, если же принимать события с помощью обработчика события "message" через addEventListener, необходимо вызвать метод `start()` самостоятельно:

```js
myWorker.port.start();
```

После того, как порт запущен, оба скрипта отправляют сообщения воркеру и принимают их от него, используя `port.postMessage()` и `port.onmessage`, соответственно:

```js
first.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = function () {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = function (e) {
  result1.textContent = e.data;
  console.log("Message received from worker");
};
```

Внутри воркера используется хэндлер `SharedWorkerGlobalScope.onconnect` (en-US) для соединения к тому же порту, как обсуждалось ранее. Порты, связанные с данным воркером доступны в свойстве ports события `connect`. Далее вызывается метод `MessagePort` (en-US) `start()` для запуска порта, и устанавливается хэндлер `onmessage` для обработки сообщений, присылаемых от обоих потоков.

```js
onconnect = function (e) {
  var port = e.ports[0];
  // or port = e.source

  port.addEventListener("message", function (e) {
    var workerResult = "Result: " + e.data[0] \* e.data[1];
    port.postMessage(workerResult);
  });

  port.start(); // необходимо при добавлении обработчиков с помощью addEventListener. При использовании сеттера port.onmessage, данный метод вызывается автоматически, неявно
};
```

### Пример с несколькими страницами

test.js

```js
let connected = false;
self.addEventListener(
  "connect",
  (e) => {
    e.source.addEventListener(
      "message",
      (ev) => {
        if (ev.data === "start") {
          if (connected === false) {
            e.source.postMessage("worker init");
            connected = true;
          } else {
            e.source.postMessage("worker already inited");
          }
        }
      },
      false,
    );
    e.source.start();
  },
  false,
);
```

На странице 1 получаем сообщение 'worker init' в консоли.

index1.html

```html
<script>
 let worker = new SharedWorker("test.js");
 worker.port.addEventListener(
 "message",
 (e) => {
 console.log(e.data);
 },
 false,
 );
 worker.port.start();
 worker.port.postMessage("start");
</script>
```

На странице 2 в консоль выводится 'worker already inited', так как страница 1 уже запустила наш воркер;

index2.html

```html
<script>
 let worker = new SharedWorker("test.js");
 worker.port.addEventListener(
 "message",
 (e) => {
 console.log(e.data);
 },
 false,
 );
 worker.port.start();
 worker.port.postMessage("start");
</script>
```

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

| Specification |
| --- |
| HTML Standard # shared-workers-and-the-sharedworker-interface |

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

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

See also
--------

* `Worker`
* Использование веб воркеров (en-US)


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

HTMLTimeElement
===============

**`HTMLTimeElement`** даёт специальные свойства (beyond the regular `HTMLElement` interface it also has available to it by inheritance) для управления `<time>` элементами.

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

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

`HTMLTimeElement.dateTime` (en-US)

Это `DOMString` который отражает `datetime` HTML атрибут, содержащий понятный для машин формат даты и времени.

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

*Нет определённого метода; наследует его у родителя, `HTMLElement`.*

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

| Specification |
| --- |
| HTML Standard # htmltimeelement |

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

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

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

* HTML-элемент, реализующий данный интерфейс: `<time>`.


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

FetchEvent
==========

Это тип событий `fetch`, обрабатываемых в глобальном контексте service worker (en-US). Данное событие содержит данные о запросе, включая его цель. Оно предоставляет метод `event.respondWith()` (en-US), с помощью которого service worker может ответить на запрос.

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

`FetchEvent()` (en-US)

Создаёт новый объект `FetchEvent`. Как правило, данный конструктор не используется. Браузер самостоятельно создаёт данные объекты и передаёт их в обработчик событий `fetch`.

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

*Данный класс наследует все свойства класса `Event`*.

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

`Идентификатор` (en-US) `клиента` (en-US) того же источника, отправившего запрос.

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

`Промис` для `запроса`, или же пустой промис, если не произошла навигация или предзагрузка навигации (en-US) отключена.

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

Запрос (`Request`) от браузера.

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

`Идентификатор` (en-US) `клиента` (en-US), заменяемого при навигации.

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

`Идентификатор` (en-US) `клиента` (en-US), заменившего прошлый клиент при навигации.

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

*Данный класс наследует методы класса* *`ExtendableEvent` (en-US)*.

`fetchEvent.respondWith()` (en-US)

Перехватывает запрос и отправляет промис с ответом.

`extendableEvent.waitUntil()`

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

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

В данном примере все не-GET запросы будут обрабатываться стандартными средствами браузера. В случае GET запросов, service worker попробует найти ответ в кеше, а в случае его отсутствия получит данные с сервера. Также, он асинхронно обновит данные в кеше.

```js
self.addEventListener("fetch", (event) => {
  // В случае не-GET запроса браузер должен сам обрабатывать его
  if (event.request.method != "GET") return;

  // Обрабатываем запрос с помощью логики service worker
  event.respondWith(
    (async function () {
      // Пытаемся получить ответ из кеша.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // Если кеш был найден, возвращаем данные из него
        // и запускаем фоновое обновление данных в кеше.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // В случае, если данные не были найдены в кеше, получаем их с сервера.
      return fetch(event.request);
    })(),
  );
});
```

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

| Specification |
| --- |
| Service Workers # fetchevent-interface |

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

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

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

* `Promise`
* Fetch API


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

FontFace
========

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

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

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

`FontFace()` (en-US)

Создаёт и возвращает новый объект `FontFace`, созданный из внешнего ресурса, описанного URL-адресом или из `ArrayBuffer`.

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

*Этот интерфейс не наследует свойства.*

`FontFace.display` (en-US)

`CSSOMString` (en-US) определяет способ отображения шрифта, основываясь на информации о статусе его загрузки и готовности к использованию.

`FontFace.family` (en-US)

`CSSOMString` (en-US) получает или устанавливает *семейство* шрифта. Эквивалентен дескриптору `font-family`.

`FontFace.featureSettings` (en-US)

`CSSOMString` (en-US) получает или устанавливает редко используемые возможности шрифта. Эквивалентен дескриптору `font-feature-settings` (en-US).

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

Возвращает `Promise` (en-US), которое выполняется для текущего объекта `FontFace`, когда специфичный шрифт, указанный в конструкторе объекта, завершает загрузку, либо отклоняется с помощью `SyntaxError`.

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

Возвращает перечисляемое значение, указывающее на состояние шрифта : `"unloaded"`, `"loading"`, `"loaded"`, или `"error"`.

`FontFace.stretch` (en-US)

`CSSOMString` (en-US) получает или устанавливает свойство *растягивания* шрифта. Эквивалентен дескриптору `font-stretch` (en-US).

`FontFace.style` (en-US)

`CSSOMString` (en-US) получает или устанавливает *стиль* шрифта. Эквивалентен дескриптору `font-style` (en-US).

`FontFace.unicodeRange` (en-US)

`CSSOMString` (en-US) получает или устанавливает *диапазон точек кодирования Юникод*, охватывающих шрифт. Эквивалентен дескриптору `unicode-range` (en-US).

`FontFace.variant` (en-US)

`CSSOMString` (en-US) получает или устанавливает *вариант* шрифта. Эквивалентен дескриптору `font-variant` (en-US).

`FontFace.weight` (en-US)

`CSSOMString` (en-US) содержит *толщину* шрифта. Эквивалентен дескриптору `font-weight` (en-US).

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

*Этот интерфейс не наследует методы.*

`FontFace.load()` (en-US)

Загружает шрифт, основываясь на переданных требованиях конструктора текущего объекта, включая расположение или ресурсный буфер, и возвращает `Promise`, которое выполняется для текущего объекта FontFace.

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # fontface-interface |

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

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


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

HTMLBodyElement
===============

**`HTMLBodyElement`** интерфейс предоставляющий специальные свойства (помимо этого, они постоянно наследуют `HTMLElement` интерфейс) для манипуляции элементами тела.

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

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

`HTMLBodyElement.aLink`

Это `DOMString` который представляет цвет активных гиперссылок.

`HTMLBodyElement.background`

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

`HTMLBodyElement.bgColor`

Это `DOMString` который представляет собой цвет фона для документа.

`HTMLBodyElement.link`

Это `DOMString` который представляет собой цвет непосещенных ссылок.

`HTMLBodyElement.text`

Это `DOMString` который представляет собой основной цвет текста.

`HTMLBodyElement.vLink`

Это `DOMString` который представляет собой цвет посещённых ссылок.

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

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

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

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

`WindowEventHandlers.onafterprint`

Это `event handler` представляющий собой код который будет вызван когда `afterprint (en-US)` событие будет вызвано.

`WindowEventHandlers.onbeforeprint` (en-US)

Это `event handler` представляющее собой код который будет вызван когда событие `beforeprint (en-US)` вызвано.

`WindowEventHandlers.onbeforeunload` (en-US)

Это `event handler` представляющее собой код который будет вызван когда событие `beforeunload (en-US)` вызвано.

`WindowEventHandlers.onhashchange` (en-US)

Это `event handler` представляющее собой код который будет вызван когда событие `hashchange (en-US)` вызвано.

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

Это `event handler` представляющее собой код который будет вызван когда событие `languagechange (en-US)` вызвано.

`WindowEventHandlers.onmessage` (en-US)

Это `event handler` представляющее собой код который будет вызван когда событие `message` вызвано.

`WindowEventHandlers.onoffline`

Это `event handler` представляющее собой код который будет вызван когда событие `offline (en-US)` вызвано.

`WindowEventHandlers.ononline`

Это `event handler` представляющее собой код который будет вызван когда событие `online (en-US)` вызвано.

`WindowEventHandlers.onpagehide`

Это `event handler` представляющее собой код который будет вызван когда событие `pagehide (en-US)` вызвано.

`WindowEventHandlers.onpageshow`

Это `event handler` представляющее собой код который будет вызван когда событие `pageshow (en-US)` вызвано.

`WindowEventHandlers.onpopstate` (en-US)

Это `event handler` представляющее собой код который будет вызван когда событие `popstate (en-US)` вызвано.

`WindowEventHandlers.onresize`

Это `event handler` представляющее собой код который будет вызван когда событие `resize (en-US)` вызвано.

`WindowEventHandlers.onstorage` (en-US)

Это `event handler` представляющее собой код который будет вызван когда событие `storage (en-US)` вызвано.

`WindowEventHandlers.onunload`

Это `event handler` представляющее собой код который будет вызван когда событие `unload (en-US)` вызвано.

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

| Specification |
| --- |
| HTML Standard # htmlbodyelement |

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

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

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

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


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

MediaDevices
============

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

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

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

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

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

`MediaDevices.ondevicechange` (en-US)

Это обработчик события `devicechange`. Это событие доставляется в объект `MediaDevices` когда медиа-устройство ввода или вывода подключается или отключается на компьютере пользователя.

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

*Наследуемый метод родителя `EventTarget`.*

`EventTarget.addEventListener()`

Регистрирует обработчик событий для определённого типа событий.

`MediaDevices.enumerateDevices()`

Получает массив информации о медиа-устройстве ввода-вывода.

`MediaDevices.getSupportedConstraints()` (en-US)

Возвращает объект, соответствующий `MediaTrackSupportedConstraints` (en-US), указывающий, какие ограничительные свойства поддерживаются в интерфейсе `MediaStreamTrack`. Смотри Capabilities and constraints (en-US), чтобы узнать больше об ограничениях и их использовании.

`MediaDevices.getUserMedia()`

С разрешения пользователя (у пользователя будет запрошено разрешение) включает камеру, микрофон или общий доступ к экрану и предоставляет `MediaStream`, содержащий входящую видео- и/или звуковую дорожку.

`EventTarget.removeEventListener()`

Удаляет обработчик событий.

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

```js
"use strict";

// Помещаем переменные в глобальную область видимости, чтобы сделать их доступными для консоли браузера
var video = document.querySelector("video");
var constraints = (window.constraints = {
  audio: false,
  video: true,
});
var errorElement = document.querySelector("#errorMsg");

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(function (stream) {
    var videoTracks = stream.getVideoTracks();
    console.log("Получил поток с ограничениями:", constraints);
    console.log("Использую видео-устройство: " + videoTracks[0].label);
    stream.onended = function () {
      console.log("Трансляция закончилась");
    };
    window.stream = stream; // Делаем переменную доступной для консоли браузера
    video.srcObject = stream;
  })
  .catch(function (error) {
    if (error.name === "ConstraintNotSatisfiedError") {
      errorMsg(
        "Разрешение " +
          constraints.video.width.exact +
          "x" +
          constraints.video.height.exact +
          " px не поддерживается устройством.",
      );
    } else if (error.name === "PermissionDeniedError") {
      errorMsg(
        "Разрешения на использование камеры и микрофона не были предоставлены. " +
          "Вам нужно разрешить странице доступ к вашим устройствам," +
          " чтобы демо-версия работала.",
      );
    }
    errorMsg("getUserMedia error: " + error.name, error);
  });

function errorMsg(msg, error) {
  errorElement.innerHTML += "<p>" + msg + "</p>";
  if (typeof error !== "undefined") {
    console.error(error);
  }
}
```

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

| Specification |
| --- |
| Media Capture and Streams # mediadevices |

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

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

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

* Media Capture and Streams API (en-US): API, частью которого является этот интерфейс.
* WebRTC API
* `Navigator.mediaDevices`: Возвращает ссылку на объект `MediaDevices`, который можно использовать для доступа к устройствам.
* CameraCaptureJS: HTML5 захват и воспроизведение видео с помощью `MediaDevices` и MediaStream Recording API (исходный код на GitHub)


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

WebSocket
=========

Объект `WebSocket` предоставляет API для создания и управления WebSocket-соединением с сервером, а также для отправки и получения данных через это соединение.

Для создания `WebSocket` используйте конструктор `WebSocket()` (en-US).

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

EventTarget

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

`WebSocket()` (en-US)

Возвращает созданный объект `WebSocket`.

Свойства экземпляра
-------------------

`WebSocket.binaryType` (en-US)

Тип используемых в соединении бинарных данных.

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

Количество байтов данных в очереди.

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

Расширения, выбранные сервером.

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

Подпротокол, выбранный сервером.

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

Текущее состояние соединения.

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

Абсолютный URL-адрес WebSocket.

Методы экземпляра
-----------------

`WebSocket.close()` (en-US)

Закрывает соединение.

`WebSocket.send()` (en-US)

Добавляет в очередь данные для отправки.

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

Подписывайтесь на события с помощью `addEventListener()` или присвоением обработчика события свойству `oneventname` этого интерфейса.

`close` (en-US)

 Возникает, когда соединение с `WebSocket` закрыто.
 Также доступно через свойство `onclose`

`error` (en-US)

 Возникает, когда соединение с `WebSocket` было закрыто из-за ошибки, например, когда не удалось отправить какие-то данные.
 Также доступно через свойство `onerror`.

`message` (en-US)

 Возникает, когда через `WebSocket` получены данные.
 Также доступно через свойство `onmessage`.

`open` (en-US)

 Возникает, когда соединение с `WebSocket` открыто.
 Также доступно через свойство `onopen`.

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

```js
// Создание WebSocket-соединения.
const socket = new WebSocket("ws://localhost:8080");

// Соединение открыто
socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});

// Получение сообщений
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});
```

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

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

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

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

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

* Написание клиентских приложений с помощью веб-сокетов


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

NodeList
========

Объект **NodeList** — это коллекция узлов, возвращаемая такими методами, как `Node.childNodes` и `document.querySelectorAll`.

**Примечание:** Несмотря на то, что `NodeList` не является массивом ( `Array` ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в `Array` при помощи `Array.from()`

Однако некоторые старые браузеры на данный момент все ещё не поддерживают `NodeList.forEach()` или `Array.from()`. Данные ограничения можно обойти, используя `Array.prototype.forEach()` ( больше информации на этой странице ).

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

`length`

Количество элементов в NodeList.

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

`item (index)`

Возвращает элемент из списка по его индексу или `null`, если индекс выходит за границы допустимого диапазона. В качестве альтернативы этого метода может быть использован `nodeList[index]`, возвращающий `undefined` при недопустимом `index.`

`entries()`

Возвращает `iterator`, позволяя перебрать все пары ключ/значение, содержащиеся в объекте.

`forEach()`

Выполняет указанную функцию один раз для каждого элемента `NodeList`

`keys()`

Возвращает `iterator`, позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в объекте.

`values()`

Возвращает `iterator`, позволяя перебрать все значения каждой пары ключ/значение, содержащейся в объекте.

Описание
--------

### Динамическая коллекция

В определённых случаях `NodeList` может являться *динамической коллекцией*. Это означает, что любые изменения в DOM тут же отражаются на коллекции. Примером подобной коллекции является `Node.childNodes`:

```js
const parent = document.getElementById("parent");
const childNodes = parent.childNodes;
console.log(childNodes.length); // пусть равно "2"
parent.appendChild(document.createElement("div")); // добавляем новый div
console.log(childNodes.length); // выведет "3"
```

В других случаях `NodeList` является *статической коллекцией*. Это означает, что любые изменения в DOM не отражаются на его содержании. К примеру, `document.querySelectorAll` возвращает статический `NodeList`.

Данное деление необходимо иметь в виду при выборе способа обхода элементов `NodeList`, а также сохранении длины списка в переменную.

### Отличия `NodeList` от `Array`

`NodeList` используется подобно массивам, и потому может возникнуть закономерное желание использовать в нём методы, предоставляемые `Array.prototype`. Однако `NodeList` не реализует методы, подобные таковым у `Array`.

В JavaScript существует механизм наследования, основанный на прототипах, применяемый как к встроенным («native») (таким как `Array`), так и «host»-объектам, предоставляемым средой исполнения (таким как `NodeList`) . Экземпляры класса `Array` получают свои методы (к примеру, `forEach` и `map`) из следующей цепочки наследования:

`myArray --> Array.prototype --> Object.prototype --> null` (Цепочка прототипов объекта может быть получена рекурсивным вызовом Object.getPrototypeOf)

`forEach`, `map`, ровно как и все остальные свойства принадлежат `Array.prototype`.

Цепочка же прототипов `NodeList` выглядит следующим образом:

`myNodeList --> NodeList.prototype --> Object.prototype --> null`

`NodeList.prototype` содержит методы `forEach`, `item`, но никак не остальные методы `Array.prototype`, поэтому они и не могут быть использованы с `NodeLists`.

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

Элементы в `NodeList`, можно обработать следующим образом:

```js
for (let i = 0; i < myNodeList.length; i++) {
  const item = myNodeList[i];
}
```

Не следует использовать конструкции `for...in` (en-US) для перечисления элементов списка. Эти способы также перечислят и свойства `length` и `item`, что приведёт к логическим ошибкам в случае, если скрипт ожидает только объекты `node`. Также `for..in` может перечислять свойства в любом порядке.

Циклы `for...of` (en-US) корректно перечисляют все объекты внутри `NodeList` :

```js
const list = document.querySelectorAll("input[type=checkbox]");
for (const item of list) {
  item.checked = true;
}
```

Конвертирование `NodeList` в `Array`
------------------------------------

Иногда удобнее работать с содержимым `NodeList`, используя методы `Array`. Ниже приведены способы преобразования `NodeList` к `Array`:

```js
const list = document.querySelectorAll("div"); // возвращает NodeList
const array1 = Array.from(list); // преобразует NodeList в Array
const array2 = [...list]; // преобразует NodeList в Array
```

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

| Specification |
| --- |
| DOM Standard # interface-nodelist |

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

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


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

BackgroundFetchEvent
====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Интерфейс **`BackgroundFetchEvent`** Background Fetch API это тип события для событий фоновых запросов, отправляемых в `глобальный контекст выполнения сервис-воркера` (en-US).

Это тип события, передаваемый при `onbackgroundfetchabort` и `onbackgroundfetchclick`.

Event

ExtendableEvent

(en-US)

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

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

Создаёт новый объект `BackgroundFetchEvent`. Этот конструктор обычно не используется, так как браузер создаёт такие объекты самостоятельно и, затем, передаёт их для колбэков событий фоновых запросов.

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

*Наследует свойства от своего предка, `Event`*.

`BackgroundFetchEvent.registration` Только для чтения
Экспериментальная возможность

Возвращает `BackgroundFetchRegistration`, для которого было инициализировано событие.

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

Отсутствуют.

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

Отсутствуют.

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

В этом примере, если пользователь кликнет по элементу, отображающему ход загрузки, то откроется новое окно. Текущий `BackgroundFetchRegistration` возвращается вызовом `event.registration`.

```js
addEventListener("backgroundfetchclick", (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === "success") {
    clients.openWindow("/latest-podcasts");
  } else {
    clients.openWindow("/download-progress");
  }
});
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-event |

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

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


События указателя - Интерфейсы веб API

События указателя
=================

Бо́льшая часть современного веб-контента предполагает, что указывающим устройством пользователя является мышь. Но поскольку многие устройства поддерживают другие типы указателей, таких как перо/стилус или сенсорная поверхность, возникает необходимость в расширении существующих событий указывающих устройств. Эту потребность удовлетворяют *События указателя*.

События указателя – это события DOM, которые вызываются для указывающего устройства. Они предназначены для создания единой модели обработки действий мыши, пера/стилуса или касания (одним или несколькими пальцами).

*Указывающее устройство –* это устройство, способное нацеливаться на определённый набор координат экрана. Наличие единой модели событий для указывающих устройств позволяет разработчикам проще создавать веб-сайты и приложения, а пользователям обеспечивает удобство использования вне зависимости от устройства.

События, необходимые для обработки общего ввода указывающих устройств, аналогичны `событиям мыши` (`mousedown`/`pointerdown`, `mousemove`/`pointermove`, и так далее.). Следовательно, типы событий указывающих устройств намеренно похожи на события мыши.

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

Терминология
------------

Состояние активных кнопок

Ситуация, когда \*указывающее устройство \*имеет ненулевое значение свойства `buttons`. Например, в случае с пером, это ситуация, когда перо физически контактирует с сенсорной поверхностью. или хотя бы одна кнопка нажата при наведении курсора.

Активное указывающее устройство

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

Графический планшет (диджитайзер)

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

Тест попадания (hit test)

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

Указатель (указывающее устройство)

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

Захват указателя

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

Событие указателя

`Событие` (en-US) DOM , вызванное для *указателя*.

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

Основным интерфейсом является `PointerEvent` (en-US), который имеет `constructor` (en-US) плюс несколько типов событий и связанные с ними глобальные обработчики событий.

Стандарт также включает некоторые расширения для интерфейсов `Element` и `Navigator`.

Следующие подразделы содержат краткое описание каждого интерфейса и свойства.

### Интерфейс PointerEvent

Интерфейс `PointerEvent` (en-US) расширяет интерфейс `MouseEvent` и имеет следующие свойства. Все следующие свойства доступны Только для чтения .

`pointerId` (en-US)

Уникальный идентификатор указателя, вызвавшего событие

`width` (en-US)

Ширина (величина по оси X) в пикселях CSS области контакта указателя с сенсорной поверхностью.

`height` (en-US)

Высота (величина по оси Y) в пикселях CSS области контакта указателя с сенсорной поверхностью.

`pressure` (en-US)

Степень давления указателя в диапазоне от `0` до `1`, где `0` – минимальное, а `1` – максимальное значение давления, которое способно обработать устройство.

`tangentialPressure` (en-US)

Степень тангенциального давления в диапазоне от `0` до `1`, где `0` – минимальное, а `1` – максимальное значение давления, которое способно обработать устройство..

`tiltX` (en-US)

Угол (в градуса, в диапазоне от `-90` до `90`) между плоскостью Y-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось Y

`tiltY` (en-US)

Угол (в градуса, в диапазоне от `-90` до `90`) между плоскостью X-Z и плоскостью, содержащей как ось указателя (например, пера\стилуса), так и ось X

`twist` (en-US)

Поворот указывающего устройства (например, пера или стилуса) по часовой стрелке вокруг основной оси в градусах в диапазоне от `0` до `359`

`pointerType` (en-US)

Указывает на тип устройства, которое вызвало событие (мышь, перо, касание и т.д)

`isPrimary` (en-US)

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

### Типы событий и Глобальные Обработчики Событий

События указателя имеют 10 типов, 7 из которых похожи на аналогичные события мыши (`down`, `up`, `move`, `over`, `out`, `enter` и `leave`).

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

| Событие | Обработчик события | Описание |
| --- | --- | --- |
| `pointerover` | `onpointerover` (en-US) | Вызывается, когда указатель появляется в пределах элемента (его теста попадания). |
| `pointerenter` | `onpointerenter` (en-US) | Вызывается, когда указатель перемещается в пределы элемента (его теста попадания) или одного из его потомков, в том числе в результате события `pointerdown` с устройства, которе не поддерживает наведение "hover" (смотрите `pointerdown`). |
| `pointerdown` | `onpointerdown` (en-US) | Вызывается, когда указатель принимает состояние активных кнопок. |
| `pointermove` | `onpointermove` (en-US) | Вызывается, когда изменяются координаты указателя. Это событие также используется, если изменение состояния указателя нельзя сообщить с помощью других событий. |
| `pointerup` | `onpointerup` (en-US) | Вызывается, когда указатель теряет состояние *активных кнопок*. |
| `pointercancel` | `onpointercancel` (en-US) | Браузер вызывает это событие, если приходит к выводу, что указывающее устройство больше не сможет генерировать события (например, если устройство деактивировано). |
| `pointerout` | `onpointerout` (en-US) | Вызывается по нескольким причинам, в том числе: когда указывающее устройство перемещается за пределы элемента (его теста попадания); запуск события pointerup для устройства, которое не поддерживает наведение "hover"; после запуска события `pointercancel`; когда перо покидает область обнаружения планшетом наведения указателя. |
| `pointerleave` | `onpointerleave` (en-US) | Вызывается, когда указывающее устройство перемещается за пределы элемента (его теста попадания). Для устройств, подобных перу, это событие вызывается, когда перо покидает область обнаружения планшетом наведения указателя. |
| `gotpointercapture` | `ongotpointercapture` (en-US) | Вызывается, когда элемент получает захват указывающего устройства. |
| `lostpointercapture` | `onlostpointercapture` (en-US) | Запускается после того, как указывающее устройство потеряло захват. |

### Расширения элемента

Существует три расширения интерфейса `Element`:

`setPointerCapture()` (en-US)

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

`releasePointerCapture()` (en-US)

Этот метод освобождает (прекращает) захватывание указывающим устройством, которое ранее было установлено для определённого события указателя.

### Расширение навигатора

Свойство `Navigator.maxTouchPoints` (en-US) используется для определения максимального количества одновременных точек касания, которые поддерживаются в каждый момент времени.

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

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

### Назначение обработчиков событий

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

```html
<html>
  <script>
 function over\_handler(event) {}
 function enter\_handler(event) {}
 function down\_handler(event) {}
 function move\_handler(event) {}
 function up\_handler(event) {}
 function cancel\_handler(event) {}
 function out\_handler(event) {}
 function leave\_handler(event) {}
 function gotcapture\_handler(event) {}
 function lostcapture\_handler(event) {}

 function init() {
 var el = document.getElementById("target");
 // Register pointer event handlers
 el.onpointerover = over\_handler;
 el.onpointerenter = enter\_handler;
 el.onpointerdown = down\_handler;
 el.onpointermove = move\_handler;
 el.onpointerup = up\_handler;
 el.onpointercancel = cancel\_handler;
 el.onpointerout = out\_handler;
 el.onpointerleave = leave\_handler;
 el.gotpointercapture = gotcapture\_handler;
 el.lostpointercapture = lostcapture\_handler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

### Свойства события

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

```html
<html>
  <script>
 var id = -1;

 function process\_id(event) {
 // Обработка этого события на основе идентификатора события
 }
 function process\_mouse(event) {
 // Обработка события мыши
 }
 function process\_pen(event) {
 // Обработка события пера
 }
 function process\_touch(event) {
 // Обработка события касания
 }
 function process\_tilt(tiltX, tiltY) {
 // Обработчик данных наклона
 }
 function process\_pressure(pressure) {
 // Обработчик давления
 }
 function process\_non\_primary(event) {
 // Не основной обработчик
 }

 function down\_handler(ev) {
 // Вычислить область контакта точки касания
 var area = ev.width \* ev.height;

 // Сравнить сохранённый ID с ID данного события и соответствующим образом обработать
 if (id == ev.identifier) process\_id(ev);

 // Вызвать обработчик нужного типа указателя
 switch (ev.pointerType) {
 case "mouse":
 process\_mouse(ev);
 break;
 case "pen":
 process\_pen(ev);
 break;
 case "touch":
 process\_touch(ev);
 break;
 default:
 console.log("pointerType " + ev.pointerType + " is Not suported");
 }

 // Вызвать обработчик наклона
 if (ev.tiltX != 0 && ev.tiltY != 0) process\_tilt(ev.tiltX, ev.tiltY);

 // Вызвать обработчик давления
 process\_pressure(ev.pressure);

 // Если это события не является основным, то вызвать не основной обработчик
 if (!ev.isPrimary) process\_non\_primary(ev);
 }

 function init() {
 var el = document.getElementById("target");
 // Назначение обработчика события "pointerdown"
 el.onpointerdown = down\_handler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

Определение Основного Указателя
-------------------------------

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

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

Определение состояний кнопок
----------------------------

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

Для определения состояния нажатия кнопки, события указателя используют свойства `button` и `buttons` интерфейса `MouseEvent`, от которого наследуется от`PointerEvent` (en-US).

В следующей таблице приведены значения `button` и `buttons` для различных состояний кнопок устройства.

| Состояние кнопок устройства | button | buttons |
| --- | --- | --- |
| С последнего события не было ни нажатия кнопок, ни касания пера | `-1` | — |
| Мышь перемещается без нажатых кнопок. Перо перемещается над планшетом в режиме "hover" без нажатых кнопок | — | `0` |
| Левая кнопка мыши, Касание пальцем, Касание пером | `0` | `1` |
| Средняя кнопка мыши | `1` | `4` |
| Правая кнопка мыши, Кнопка пера | `2` | `2` |
| Кнопка мыши X1 (назад) | `3` | `8` |
| Кнопка мыши X2 (вперёд) | `4` | `16` |
| Кнопка пера "ластик" | `5` | `32` |

**Примечание:** Свойство `button` указывает на изменение состояния кнопки. Однако, как и в случае с касанием, когда одно событие влечёт за собой ещё несколько событий, все они имеют одинаковое значение.

Pointer capture
---------------

Pointer capture allows events for a particular `pointer event` (en-US) to be re-targeted to a particular element instead of the normal hit test at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).

The following example shows pointer capture being set on an element.

```html
<html>
  <script>
 function downHandler(ev) {
 let el = document.getElementById("target");
 // Element 'target' will receive/capture further events
 el.setPointerCapture(ev.pointerId);
 }

 function init() {
 let el = document.getElementById("target");
 el.onpointerdown = downHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

The following example shows a pointer capture being released (when a `pointercancel` event occurs. The browser does this automatically when a `pointerup` or `pointercancel` event occurs.

```html
<html>
  <script>
 function downHandler(ev) {
 let el = document.getElementById("target");
 // Element "target" will receive/capture further events
 el.setPointerCapture(ev.pointerId);
 }

 function cancelHandler(ev) {
 let el = document.getElementById("target");
 // Release the pointer capture
 el.releasePointerCapture(ev.pointerId);
 }

 function init() {
 let el = document.getElementById("target");
 // Register pointerdown and pointercancel handlers
 el.onpointerdown = downHandler;
 el.onpointercancel = cancelHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch me ...</div>
  </body>
</html>
```

touch-action CSS property
-------------------------

The `touch-action` CSS property is used to specify whether or not the browser should apply its default (*native*) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.

A value of `auto` means the browser is free to apply its default touch behavior (to the specified region) and the value of `none` disables the browser's default touch behavior for the region. The values `pan-x` and `pan-y`, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value `manipulation` means the browser may consider touches that begin on the element are only for scrolling and zooming.

In the following example, the browser's default touch behavior is disabled for the `div` element.

```html
<html>
  <body>
    <div style="touch-action:none;">Can't touch this ...</div>
  </body>
</html>
```

In the following example, default touch behavior is disabled for some `button` elements.

```css
button#tiny {
  touch-action: none;
}
```

In the following example, when the `target` element is touched, it will only pan in the horizontal direction.

```css
#target {
  touch-action: pan-x;
}
```

Compatibility with mouse events
-------------------------------

Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.

The browser *may map generic pointer input to mouse events for compatibility with mouse-based content*. This mapping of events is called *compatibility mouse events*. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:

* Mouse events can only be prevented when the pointer is down.
* Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.
* The `mouseover`, `mouseout`, `mouseenter`, and `mouseleave` events are never prevented (even if the pointer is down).
Best practices
--------------

Here are some *best practices* to consider when using pointer events:

* Minimize the amount of work performed in event handlers.
* Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).
* The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.
Specifications
--------------

| Specification |
| --- |
| Pointer Events  |

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

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

Demos and examples
------------------

* Touch/pointer tests and demos (by Patrick H. Lauke)
Community
---------

* Pointer Events Working Group
* Mail list
* W3C #pointerevents IRC channel
Related topics and resources
----------------------------

* Touch Events Standard


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

ClipboardEvent
==============

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

Интерфейс **`ClipboardEvent`** представляет события, предоставляющие информацию, связанную с изменением буфера обмена, этими события являются `cut (en-US)`, `copy (en-US)` и `paste (en-US)`.

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

*Интерфейс наследует свойства от родителя `Event`*.

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

Является `DataTransfer` объектом, который содержит данные, полученные от совершения пользователем операции `cut (en-US)`, `copy (en-US)` или `paste (en-US)`, а также их MIME тип.

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

`ClipboardEvent()` (en-US)

Создаёт `ClipboardEvent` событие с переданными параметрами.

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

*Нет специальных методов; Этот интерфейс наследует методы от своего родителя `Event`*.

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-interfaces |

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

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

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

* События, связанные с копированием в буфер: `copy (en-US)`, `cut (en-US)`, `paste (en-US)`


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

Clipboard API
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Clipboard API** предоставляет возможность реагировать на команды буфера обмена (вырезать, копировать и вставить), а также выполнять асинхронные чтение/запись в системный буфер обмена. Доступ к содержимому буфера обмена осуществляется через Permissions API (en-US): `clipboard-write` (разрешение на запись) в буфер обмена автоматически предоставляется страницам, когда они находятся на активной вкладке. Для `clipboard-read` (чтение из буфера обмена) должно быть запрошено разрешение пользователя. Можно сделать запрос на разрешение, попытавшись прочитать данные из буфера обмена.
API предназначен заменить `document.execCommand()` в качестве способа для доступа к буферу обмена.

Доступ к буферу обмена
----------------------

Вместо создания объекта буфера посредством инициализации экземпляра, вы получаете доступ к системному буферу обмена через глобальный `Navigator.clipboard` (en-US):

```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );
```

Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью `editor` (редактора) классов. Этот код безопасен, поскольку `readText()` (en-US) (и `read()` (en-US), если на то пошло) возвращает пустую строку, если в буфере обмена нет текста.

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

`Clipboard` (en-US) Secure context

Предоставляет интерфейс для чтения/записи текста и данных в системный буфер обмена. В спецификации называется 'Async Clipboard API (API асинхронного буфера обмена)'.

`ClipboardEvent` Secure context

Представляет события, содержащие информацию, относящуюся к модификации буфера обмена, а именно `cut` (en-US), `copy` (en-US) и `paste` (en-US) события. В спецификации называется 'Clipboard Event API (API событий буфера обмена)'.

`ClipboardItem` (en-US) Secure context

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

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

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |
| Clipboard API and events # clipboard-event-interfaces |
| Clipboard API and events # clipboarditem |

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

### api.Clipboard

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

### api.ClipboardEvent

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

### api.ClipboardItem

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

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

* Async Clipboard API demo on Glitch (Демонстрация API асинхронного буфера на Glitch)
* Image support for Async Clipboard article (Поддержка изображений в асинхронном буфере обмена)
* Permissions API (en-US)
* Using the Permissions API (en-US)


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

Canvas
======

Элемент `<canvas>`, добавленный в HTML5, предназначен для создания графики с помощью JavaScript. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.

*«Canvas»* в переводе с английского означает *«холст»*.

Приложения от Mozilla поддерживают `<canvas>` начиная с Gecko 1.8 (т.е. с Firefox 1.5 (en-US)). Этот элемент первоначально был представлен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает `<canvas>` начиная с 9 версии; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google's Explorer Canvas. Google Chrome и Opera 9 также поддерживают `<canvas>`.

Элемент `<canvas>` также используется технологией WebGL для отрисовки аппаратно-ускоренной 3D-графики на веб-страницах.

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

Это простой пример использования `CanvasRenderingContext2D.fillRect()` метода.

### HTML

```html
<canvas id="canvas"></canvas>
```

### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
```

Отредактируйте код ниже, чтобы увидеть результат на холсте.
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea
>
```

```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Справочные материалы
--------------------

* `HTMLCanvasElement`
* `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasPattern`
* `ImageBitmap`
* `ImageData`
* `TextMetrics` (en-US)
* `Path2D` (en-US)
Экспериментальная возможность

Интерфейсы, связанные с `WebGLRenderingContext`, ссылаются на WebGL.

Руководства
-----------

Canvas tutorial

Подробный учебник, охватывающий как основное использование `<canvas>`, так и его расширенные функции.

Фрагменты кода: Canvas

Некоторые фрагменты кода, ориентированные на разработчиков, с использованием `<canvas>`.

Drawing DOM objects into a canvas

Как рисовать DOM контент, таких как HTML-элементы, в canvas.

Manipulating video using canvas (en-US)

Объединяет `<video>` и `<canvas>` для манипулирования видео данных в реальном времени.

Ресурсы
-------

### Основное

* HTML5 Canvas Deep Dive
* Справочник по Canvas
### Библиотеки

* Fabric.js это canvas библиотека с открытым исходным кодом с возможностями SVG парсинга.
* Kinetic.js это canvas библиотека с открытым исходным кодом ориентированная на интерактивность для настольных и мобильных приложений.
* Paper.js это программируемый фреймворк векторной графики с открытым исходным кодом который запускается на HTML5 Canvas.
* libCanvas это мощный и лёгкий canvas фреймворк.
* Processing.js является портом языка обработки визуализации.
* PlayCanvas игровой движок с открытым исходным кодом.
* Pixi.js игровой движок с открытым исходным кодом.
* PlotKit библиотека создание графиков и графики.
* Rekapi API анимации для canvas.
* PhiloGL WebGL фреймворк для визуализации данных, для креативного написания кода и разработки игр.
* JavaScript InfoVis Toolkit создаёт интерактивные 2D Canvas визуализации данных для интернета.
Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-canvas-element |

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

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

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

* WebGL


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

Range
=====

**`Range(диапазон)`** интерфейс предоставляет фрагмент документа который может содержать узлы и части текстовых узлов данного документа.

Range может быть создан с помощью метода `createRange`, у объекта `Document`. Или объект Range можно получить с помощью метода `getRangeAt`, у объекта `Selection` (en-US). А также с помощью конструктора `Range()` (en-US).

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

Нет унаследованных свойств.

**`Range.collapsed` Только для чтения**
 Возвращает `Boolean` (en-US) указывающий, находятся ли начало и конец диапазона
 на одной и той же позиции.

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

Возвращает `Node` внутри которого `Range` начинается.

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

Возвращает `Node` внутри которого `Range` заканчивается .

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

Возвращает самый глубокий `Node` который содержит узлы `startContainer` и `endContainer`.

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

Возвращает число равное расположению `endContainer` в `Range` .

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

Returns a number representing where in the `startContainer` the `Range` starts.

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

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

Возвращают объект `Range` с глобальным `Document` как начало и конец.

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

*Не имеют унаследованных свойств.*

`Range.setStart()` (en-US)

Назначают начальную позицию `Range`.

`Range.setEnd()` (en-US)

Назначает конечную позицию `Range`.

`Range.setStartBefore()` (en-US)

Устанавливает начальную позицию `Range` относительно другого `Node` пред ним.

`Range.setStartAfter()` (en-US)

Устанавливает начальную позицию `Range` относительно другого `Node` после него.

`Range.setEndBefore()` (en-US)

Устанавливает конечную позицию `Range` относительно другого `Node` перед ним.

`Range.setEndAfter()` (en-US)

Устанавливает конечную позицию `Range` относительно другого `Node` после него.

`Range.selectNode()` (en-US)

Выбирает `Range` to содержащий `Node` и его контент.

`Range.selectNodeContents()` (en-US)

Выбирает `Range` содержащий контент `Node`.

`Range.collapse()` (en-US)

Схлопывает `Range` до одной из граничных точек.

`Range.cloneContents()` (en-US)

Возвращает `DocumentFragment` содержащийся в узле `Range`.

`Range.deleteContents()` (en-US)

Удаляет содержимое `Range` из`Document`.

`Range.extractContents()` (en-US)

Переносит содержимое `Range` из дерева документа в `DocumentFragment`.

`Range.insertNode()` (en-US)

Вставляет a `Node` в начало `Range`.

`Range.surroundContents()`

Переносит содержимое `Range` в новый `Node`.

`Range.compareBoundaryPoints()` (en-US)

Сравнивает граничные точки `Range` с другим `Range`.

`Range.cloneRange()` (en-US)

Возвращает объект из `Range` с граничными точками идентичными клонированному `Range`.

`Range.detach()` (en-US)

`Освобождает Range` от использования для улучшения производительности .

`Range.toString()` (en-US)

Возвращает текст в `Range`.

`Range.compareNode()` (en-US)
Non-standard

Возвращает константу, представляющую, находится ли `Node` до, после, внутри или вокруг range.

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

Возвращает -1, 0, или 1 в зависимости от того, находиться ли referenceNode перед, внутри, или после `Range`.

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

Возвращает `DocumentFragment` созданный из полученной строки с кодом.

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

Возвращает объект `ClientRect` object which bounds the entire contents of the `Range`; this would be the union of all the rectangles returned by `range.getClientRects()` (en-US).

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

Returns a list of `ClientRect` objects that aggregates the results of `Element.getClientRects()` (en-US) for all the elements in the `Range`.

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

Возвращает `boolean` указывающий, пересекает ли данный узел `Range`.

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

Returns a `boolean` indicating whether the given point is in the `Range`.

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

| Specification |
| --- |
| DOM Standard # interface-range |
| DOM Parsing and Serialization # extensions-to-the-range-interface |
| CSSOM View Module # extensions-to-the-range-interface |

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

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

See also
--------

* The DOM interfaces index


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

Request
=======

`Интерфейс Request` из Fetch API является запросом ресурсов или данных.

Создать новый объект `Request` можно, используя конструктор `Request()` (en-US), однако чаще всего встречается способ возврата объекта `Request` , как результат операции API. Например такой как service worker `FetchEvent.request` (en-US).

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

`Request()` (en-US)

Создаёт новый `Request` объект.

Параметры
---------

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

Содержит кешированное состояние запроса (напр., `default`, `reload`, `no-cache`).

`Request.context` (en-US) Только для чтения
Устарело

Содержит контекст запроса (напр., `audio`, `image`, `iframe`, и т.д..)

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

Содержит данные идентификации запроса (напр., `"omit"`, `"same-origin"`, `"include"`). Значение по умолчанию: `"same-origin"`.

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

Возвращает строку из `RequestDestination` (en-US) enum, описывая назначение запроса. Это строка, указывающая тип запрошенных данных.

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

Содержит назначенный `Headers` (en-US) объект запроса (заголовки).

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

Содержит "subresource integrity (en-US)" значение запроса (напр., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).

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

Содержит метод запроса (`GET`, `POST`, и т.д.)

`Request.mode` Только для чтения

Содержит режим запроса (напр., `cors`, `no-cors`, `same-origin`, `navigate`.)

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

Содержит режим перенаправления. Может быть одним из следующих: `follow`, `error`, или `manual`.

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

Содержит значение "referrer" ("ссылающийся") запроса (например., `client`).

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

Содержит политику "ссылающегося" данного запроса (e.g., `no-referrer`).

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

Содержит URL запроса.

`Request` имплементирует `Body`, таким образом наследуя следующие параметры:

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

Простой getter используемый для раскрытия `ReadableStream` (en-US) "тела" (body) содержимого.

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

Хранит `Boolean` (en-US), декларирующее использовалось ли "тело" ранее в ответе.

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

`Request.clone()` (en-US)

Создаёт копию текущего `Request` объекта.

`Request` имплементирует `Body`, таким образом наследуя следующие параметры:

`Body.arrayBuffer()` (en-US)

Возвращает промис, который выполняется, возвращая `ArrayBuffer` репрезентацию тела запроса.

`Body.blob()` (en-US)

Возвращает promise

`Body.formData()` (en-US)

Возвращает promise который разрешается с помощью `FormData` представления тела запроса.

`Body.json()` (en-US)

Returns a promise that resolves with a `JSON` representation of the request body.

`Body.text()` (en-US)

Returns a promise that resolves with an `USVString` (en-US) (text) representation of the request body.

**Примечание:** The `Body` functions can be run only once; subsequent calls will resolve with empty strings/ArrayBuffers.

Examples
--------

In the following snippet, we create a new request using the `Request()` constructor (for an image file in the same directory as the script), then return some property values of the request:

```js
const request = new Request("https://www.mozilla.org/favicon.ico");

const URL = request.url;
const method = request.method;
const credentials = request.credentials;
```

You could then fetch this request by passing the `Request` object in as a parameter to a `fetch()` call, for example:

```js
fetch(request)
  .then((response) => response.blob())
  .then((blob) => {
    image.src = URL.createObjectURL(blob);
  });
```

In the following snippet, we create a new request using the `Request()` constructor with some initial data and body content for an api request which need a body payload:

```js
const request = new Request("https://example.com", {
  method: "POST",
  body: '{"foo": "bar"}',
});

const URL = request.url;
const method = request.method;
const credentials = request.credentials;
const bodyUsed = request.bodyUsed;
```

**Примечание:** Типом тела может быть только `Blob`, `BufferSource`, `FormData`, `URLSearchParams`, `USVString` (en-US) или `ReadableStream` (en-US) поэтому, для добавления объекта JSON в полезную нагрузку вам необходимо структурировать этот объект.

Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова `fetch()`, например, и получить ответ:

```js
fetch(request)
  .then((response) => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error("Что-то пошло не так на API сервере.");
    }
  })
  .then((response) => {
    console.debug(response);
    // ...
  })
  .catch((error) => {
    console.error(error);
  });
```

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

| Specification |
| --- |
| Fetch Standard # request-class |

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

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

Читай также
-----------

* ServiceWorker API (en-US)
* HTTP access control (CORS) (en-US)
* HTTP