recursal/MDN huggingface dataset:
VRDisplayEvent: свойство display
================================

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

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

Доступное только для чтения свойство **`display`** интерфейса `VRDisplayEvent` возвращает объект `VRDisplay` (en-US), связанный с этим событием.

**Примечание:** Это свойство было частью старого WebVR API, который был заменён на WebXR Device API.

### Значение

Объект `VRDisplay` (en-US).

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


```js
window.addEventListener("vrdisplaypresentchange", (e) => {
  console.log(
    `Устройство ${e.display.displayId} отображения было изменено по причине: ${e.reason}.`,
  );
});
```

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

Это свойство было частью старого WebVR API, который был заменён на WebXR Device API. Больше не планируется сделать его стандартом.

Пока все браузеры не реализуют новые WebXR API (en-US), рекомендуется использовать такие фреймворки как A-Frame, Babylon.js, Three.js или полифил для разработки приложений WebXR, которые будут работать во всех браузерах.

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

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

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

* WebVR API
window.requestAnimationFrame()
==============================

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

**Примечание:** Ваш callback метод сам должен вызвать `requestAnimationFrame()` иначе анимация остановится.

Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. Обычно запросы происходят 60 раз в секунду, но чаще всего совпадают с частотой обновления экрана. В большинстве браузеров в фоновых вкладках или скрытых `<iframe>`, вызовы `requestAnimationFrame()` приостанавливаются, для того, чтобы повысить производительность и время работы батареи.

Callback методу передаётся один аргумент, `DOMHighResTimeStamp`, который содержит текущее время (количество миллисекунд, прошедших с момента time origin). Когда колбэки, отправленные в очередь с помощью `requestAnimationFrame()` начинают вызывать несколько колбэков в одном кадре, каждый получает одинаковый timestamp, хотя для вычисления каждого callback было затрачено время. Этот timestamp - десятичное число в миллисекундах, но с минимальной точностью в 1ms (1000 µs).

Синтаксис
---------


```js
window.requestAnimationFrame(callback);
```

### Параметры

`callback`

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

`element` Необязательный

Необязательный параметр (не используется в Firefox или IE), определяющий элемент, который визуально содержит всю анимацию. Для canvas'а и WebGL'a им должен быть `<canvas>`. Для других элементов вы можете опустить этот параметр для чуть лучшего пользовательского опыта.

### Возвращаемое значение

`requestID` — длинное целое, являющееся уникальным идентификатором для записи, содержащей callback. Оно не равно нулю, но других предположений о его значении делать не следует. Вы можете передать его в `window.cancelAnimationFrame()` для отмены вызова.

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


```js
var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.transform =
    "translateX(" + Math.min(progress / 10, 200) + "px)";
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);
```

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

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

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

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

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

* `window.mozAnimationStartTime`
* `window.cancelAnimationFrame()`
* mozRequestAnimationFrame - Blog post
* requestAnimationFrame for smart animating - Blog post
* Animating with javascript: from setInterval to requestAnimationFrame - Blog post
Document.registerElement()
==========================

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
Метод **`Document.registerElement()`** регистрирует новый кастомный элемент (custom element (en-US)) в браузере и возвращает конструктор для этого нового элемента.

**Примечание:** Это экспериментальная технология. Браузер который вы используете должен поддерживать Веб Компоненты (Web Components). Смотри больше: Enabling Web Components in Firefox.

**Примечание:** Устарело. Используйте интерфейс CustomElementRegistry (en-US) и его метод define(), чтобы зарегистрировать новый Тег.

Syntax
------
```

var constructor = document.registerElement(tag-name, options);
```

### Parameters

*tag-name*

Имя кастомного элемента. Имя должно содержать символ дефиса (-), например: `my-tag`.

*options Необязательный*

An object that names the prototype to base the custom element on, and an existing tag to extend. Both of these are optional.

Example
-------

Here is a very simple example:


```js
var Mytag = document.registerElement("my-tag");
```


Now the new tag is registered in the browser. The `Mytag` variable holds a constructor that you can use to create a `my-tag` element in the document as follows:


```js
document.body.appendChild(new Mytag());
```


This inserts an empty `my-tag` element that will be visible if you use the browser's developer tools. It will not be visible if you use the browser's view source capability. And it won't be visible in the browser unless you add some content to the tag. Here is one way to add content to the new tag:


```js
var mytag = document.getElementsByTagName("my-tag")[0];
mytag.textContent = "I am a my-tag element.";
```

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

| Specification |
| --- |
| HTML Standard # dom-customelementregistry-define-dev |

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

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

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

* Метод CustomElementRegistry.define
AudioParam.setValueAtTime()
===========================

`setValueAtTime()` метод интерфейса `AudioParam` (en-US) позволяющий мгновенно точно по времени изменять значение `AudioParam` , сравнивая с `AudioContext.currentTime`. Новое значение даётся в значении параметра.

Синтаксис
---------
```

var AudioParam = AudioParam.setValueAtTime(value, startTime)
```

### Параметры

value

Число с плавающей точкой представляет значение AudioParam изменяемое в данное время.

startTime

A double representing the time (in seconds) after the `AudioContext` was first created that the change in value will happen. A `TypeError` is thrown if this value is negative.

### Returns

A reference to this `AudioParam` object. In some browsers older implementations of this interface return void.

Examples
--------

This simple example features a media element source with two control buttons (see our webaudio-examples repo for the source code, or view the example live). When the buttons are pressed, the `currGain` variable is incremented/decremented by 0.25, then the `setValueAtTime()` method is used to set the gain value equal to `currGain`, one second from now (`audioCtx.currentTime + 1`.)


```js
// create audio context
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

// set basic variables for example
var myAudio = document.querySelector("audio");
var pre = document.querySelector("pre");
var myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

var targetAtTimePlus = document.querySelector(".set-target-at-time-plus");
var targetAtTimeMinus = document.querySelector(".set-target-at-time-minus");

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);

// Create a gain node and set it's gain value to 0.5
var gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
var currGain = gainNode.gain.value;

// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// set buttons to do something onclick
targetAtTimePlus.onclick = function () {
  currGain += 0.25;
  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
};

targetAtTimeMinus.onclick = function () {
  currGain -= 0.25;
  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
};
```

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

| Specification |
| --- |
| Web Audio API # dom-audioparam-setvalueattime |

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

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

See also
--------

* Using the Web Audio API (en-US)
MediaDevices.enumerateDevices()
===============================

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

Метод **`MediaDevices.enumerateDevices()`** собирает информацию о медиа-устройствах ввода и вывода, доступных в системе.

Синтаксис
---------
```

navigator.mediaDevices.enumerateDevices()
.then(function(MediaDeviceInfo) { ... })
```

### Возвращаемое значение

Возвращает `Promise` (en-US) который, если выполнится успешно, вернёт массив экземпляров `MediaDeviceInfo` (en-US) , которые содержат информацию о доступных медиа-устройствах ввода и вывода.

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

Ниже, пример, использующий метод `mediaDevices.enumerateDevices()`.


```js
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() не поддерживается.");
  return;
}

// Перечисление в цикле камер и микрофонов

navigator.mediaDevices
  .enumerateDevices()
  .then(function (devices) {
    devices.forEach(function (device) {
      console.log(
        device.kind + ": " + device.label + " id = " + device.deviceId,
      );
    });
  })
  .catch(function (err) {
    console.log(err.name + ": " + err.message);
  });
```


результат перечисления в цикле:
```

videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```


или, если один или более объектов `MediaStream` активны, или получены постоянные разрешения:
```

videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
```

Разрешения
----------

Что бы использовать метод `enumerateDevices()` в устанавливаемом приложении (к примеру в Firefox OS приложение), необходимо указать оба поля внутри файла манифеста приложения:


```js
"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}
```


Смотрите также : разрешение: аудио захват and разрешение : видео захват в продолжение темы.

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

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

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

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

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

* navigator.mediaDevices.getUserMedia
* WebRTC (en-US) - the introductory page to the API
* MediaStream API (en-US) - the API for the media stream objects
* Taking webcam photos (en-US) - a tutorial on using `getUserMedia() for taking photos rather than video.`
DOMImplementation.createHTMLDocument()
======================================

Метод **`DOMImplementation.createHTMLDocument()`** создаёт новый HTML `Document`.

Синтаксис
---------
```

const newDoc = document.implementation.createHTMLDocument(title)
```

### Параметры

`title` Необязательный (except in IE)

`DOMString`, содержащий заголовок для создания нового HTML-документа.

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

В этом примере создаётся новый HTML-документ и вставляется в `<iframe>` (en-US) текущего документа.

Вот HTML для этого примера:


```html
<body>
  <p>
    Click <a href="javascript:makeDocument()">here</a> to create a new document
    and insert it below.
  </p>
  <iframe id="theFrame" src="about:blank" />
</body>
```


Реализация JavaScript `makeDocument()` выглядит следующим образом:


```js
function makeDocument() {
  let frame = document.getElementById("theFrame");

  let doc = document.implementation.createHTMLDocument("New Document");
  let p = doc.createElement("p");
  p.innerHTML = "This is a new paragraph.";

  try {
    doc.body.appendChild(p);
  } catch (e) {
    console.log(e);
  }

  // Copy the new HTML document into the frame

  let destDocument = frame.contentDocument;
  let srcNode = doc.documentElement;
  let newNode = destDocument.importNode(srcNode, true);

  destDocument.replaceChild(newNode, destDocument.documentElement);
}
```


Код в строках 4-12 обрабатывает создание нового HTML-документа и вставку в него некоторого содержимого. Строка 4 использует `createHTMLDocument()` для создания нового HTML-документа, чей `<title>` это `"New Document"`. Строки 5 и 6 создают новый элемент абзаца с некоторым простым содержимым, а затем строки 8-12 обрабатывают вставку нового абзаца в новый документ.

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

Смотреть Видео Примеры

Возвращаемый документ предварительно сконструирован со следующим HTML-кодом:


```html
<!doctype html>
<html>
  <head>
    <title>title</title>
  </head>
  <body></body>
</html>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-domimplementation-createhtmldocument① |

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

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

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

* Интерфейс `DOMImplementation`, к которому он принадлежит.
CacheStorage.open()
===================

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

**`open()`** метод из `CacheStorage` интерфейса возвращает `Promise` который резолвится в `Cache` объект с соответствующим `cacheName (именем тега кеша)`.

**Примечание:** If the specified `Cache` does not exist, a new cache is created with that `cacheName`.

Синтаксис
---------
```

caches.open(cacheName).then(function(cache) {
  //обрабатываем кеш например: cache.AddAll(filesToCache); где filesToCache = ['/mypic.png', ...]
});
```

### Возвращает

`Promise` который резолвится в запрашиваемый `Cache` объект.

### Параметры

cacheName

Имя (тег) кеша заданное заранее которое необходимо открыть.

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

This code snippet is from the MDN sw-test example (see sw-test running live). Here we wait for a `FetchEvent` to fire. Then we construct a custom response like so:

1. Check whether a match for the request is found in the `CacheStorage` using `CacheStorage.match`. If so, serve that.
2. If not, open the `v1` cache using `CacheStorage.open`, put the default network request in the cache using `Cache.put` (en-US) and return a clone of the default network request using `return response.clone()` — necessary because `put()` consumes the response body.
3. If this fails (e.g., because the network is down), return a fallback response.


```js
var response;
var cachedResponse = caches
  .match(event.request)
  .catch(function () {
    return fetch(event.request);
  })
  .then(function (r) {
    response = r;
    caches.open("v1").then(function (cache) {
      cache.put(event.request, response);
    });
    return response.clone();
  })
  .catch(function () {
    return caches.match("/sw-test/gallery/myLittleVader.jpg");
  });
```

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

| Specification |
| --- |
| Service Workers # cache-storage-open |

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

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

See also
--------

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)
ServiceWorkerRegistration.update()
==================================

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

Метод **`update`** интерфейса `ServiceWorkerRegistration` предназначен для обновления service worker. Он обращается по URL service worker-a, и если новый worker побайтно не совпадает с текущим, инсталлирует новую версию. Обращение за новой версией worker обходит любые кеши браузера, если предыдущее обращение произошло более 24 часов назад..

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

Синтаксис
---------
```

ServiceWorkerRegistration.update();
```

### Параметры

Нет.

### Возвращает

`Промис`, который разрешается в объект `ServiceWorkerRegistration`.

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

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


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw-test/sw.js", { scope: "sw-test" })
    .then(function (registration) {
      // Регистрация произошла
      console.log("Registration succeeded.");
      button.onclick = function () {
        registration.update();
      };
    })
    .catch(function (error) {
      // Ошибка при регистрации
      console.log("Registration failed with " + error);
    });
}
```

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

| Specification |
| --- |
| Service Workers # service-worker-registration-update |

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

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

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

* Использование Service Workers (en-US)
* Service workers базовый пример кода
* Готов ли ServiceWorker?
* `Промисы`
* Использование web workers (en-US)
ServiceWorkerRegistration.pushManager
=====================================

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

Свойство **`pushManager`** интерфейса `ServiceWorkerRegistration` возвращает ссылку на интерфейс `PushManager`, позволяющий управлять подписками на push-уведомления. Включает поддержку процедуры подписки, получения активной подписки, а также предоставляет доступ к статусу разрешений на push-уведомления.

Синтаксис
---------
```

myPushManager = ServiceWorker.pushManager
```

### Значение

Объект `PushManager`.

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


```js
this.onpush = function (event) {
  console.log(event.data);
  // Отсюда можно записывать данные в IndexedDB, отправлять их в любое
  // открытое окно, отображать уведомление и т. д.
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then(function (serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe().then(
      function (pushSubscription) {
        console.log(pushSubscription.subscriptionId);
        console.log(pushSubscription.endpoint);
        // Детали push-подписки, требуемые сервером приложения,
        // теперь доступны, и могут быть отправлены, к примеру,
        // при помощи XMLHttpRequest.
      },
      function (error) {
        // При разработке это часто помогает отлавливать ошибки в консоли.
        // В продакшен-среде это также может быть полезно для отправки отчёта
        // об ошибках на сервер приложения.
        console.log(error);
      },
    );
  });
```

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

| Specification |
| --- |
| Push API # dom-serviceworkerregistration-pushmanager |

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

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

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

* Push API
USB.onconnect
=============

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

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

Свойство **`onconnect`** интерфейса `USB` является обработчиком события, который вызывается всегда, когда сопряжённое устройство подключается.

Синтаксис
---------
```

USB.onconnect = connectFunction
```

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

| Specification |
| --- |
| WebUSB API # connect |
| WebUSB API # ref-for-dom-usb-onconnect |

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

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