recursal/MDN huggingface dataset:
USB.getDevices()
================

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.

Метод\*\* `getDevices` \*\*интерфейса `USB` возвращает `Promise`, который разрешается с массивом `USBDevice` (en-US) объектов сопряжённых подключённых устройств. Для информации о сопряжённых устройствах, смотрите `USB.requestDevice()`.

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

USB.getDevices()
```

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

Нет.

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

`Promise`, который разрешается с массивом объектов `USBDevice` (en-US).

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

В следующем примере имена продуктов и серийные номера сопряжённых устройств выводятся в консоль. Для информации о сопряжённых устройствах, смотрите `USB.requestDevice()`.


```js
navigator.usb.getDevices().then((devices) => {
  console.log("Total devices: " + devices.length);
  devices.forEach((device) => {
    console.log(
      "Product name: " +
        device.productName +
        ", serial number " +
        device.serialNumber,
    );
  });
});
```

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

| Specification |
| --- |
| WebUSB API # ref-for-dom-usb-getdevices② |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
USB.requestDevice()
===================

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.

Метод **`requestDevice()`** интерфейса `USB` возвращает `Promise`, возвращающий экземпляр `USBDevice` (en-US), если необходимое устройство было найдено. Вызов этого метода начинает процесс соединения браузера с устройством.

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

USB.requestDevice([filters])
```

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

filters

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

* `vendorId` - ИД производителя (USB VID)
* `productId` - ИД устройства USB PID
* `classCode` - код класса функциональности устройства
* `subclassCode` - код подкласса
* `protocolCode` - код протокола
* `serialNumber` - серийный номер

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

`Promise`, возвращающий экземпляр `USBDevice` (en-US).

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

Этот пример запрашивает любое из перечисленных USB-устройств. Обратите внимание, указаны два разных PID. Оба присутствуют в списке фильтров для `requestDevice()`. При этом браузер покажет окно для выбора и подтверждения доступа к устройству. Только выбранное пользователем устройство будет передано в `then()`.

Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID `0xa800`, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и ещё одно, совпадающее со вторым, будут показаны все три устройства.


```js
const filters = [
  { vendorId: 0x1209, productId: 0xa800 },
  { vendorId: 0x1209, productId: 0xa850 },
];
navigator.usb
  .requestDevice({ filters: filters })
  .then((usbDevice) => {
    console.log("Product name: " + usbDevice.productName);
  })
  .catch((e) => {
    console.log("There is no device. " + e);
  });
```

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

| Specification |
| --- |
| WebUSB API # ref-for-dom-usb-requestdevice④ |

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

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

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.

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

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

USB.ondisconnect = disconnectFunction
```

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

| Specification |
| --- |
| WebUSB API # disconnect |
| WebUSB API # ref-for-dom-usb-ondisconnect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLTableElement.insertRow()
============================

Метод **`HTMLTableElement.insertRow()`**`добавляет новую строку в таблицу и возвращает на неё ссылку.`

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

var row = HTMLTableElement.insertRow(optional index = -1);
```


* `HTMLTableElement` — ссылка на *HTML table* элемент.
* `index` — индекс новой строки
* `row` присваивается ссылка на новую строку. Ссылка на HTMLTableRowElement (en-US).
 Если значение `index` равно -1 или количеству строк, то строка добавляется как последняя. Если значение `index` превышает количество строк, *выбрасывается* исключение IndexSizeError. Если аргумент index пропущен, он равен значению по умолчанию — -1.
* Если таблица содержит несколько элементов `tbody`, то, по умолчанию, новая строка будет добавлена в последний элемент `tbody`. Добавить строку в определённый элемент `tbody`:
 `var specific_tbody=document.getElementById(tbody_id); var row=specific_tbody.insertRow(index)`
Пример
------


```html
<table id="TableA">
  <tr>
    <td>Old top row</td>
  </tr>
</table>
<script type="text/javascript">
 function addRow(tableID) {
 // Get a reference to the table
 var tableRef = document.getElementById(tableID);

 // Insert a row in the table at row index 0
 var newRow = tableRef.insertRow(0);

 // Insert a cell in the row at index 0
 var newCell = newRow.insertCell(0);

 // Append a text node to the cell
 var newText = document.createTextNode("New top row");
 newCell.appendChild(newText);
 }

 // Call addRow() with the ID of a table
 addRow("TableA");
</script>
```


Чтобы быть валидным HTML документом, элемент TR должен содержать хотя бы один TD элемент.

Обратите внимание, что `insertRow` добавляет строку непосредственно в таблицу и возвращает ссылку на эту строку. Строку не нужно добавлять отдельно, как в случае с методом `document.createElement()`, для создания нового TR элемента.

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

| Specification |
| --- |
| HTML Standard # dom-table-insertrow-dev |

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

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

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

* `HTMLTableRowElement.insertCell()` (en-US)
BroadcastChannel.postMessage()
==============================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel.postMessage()`** отправляет сообщение, которое может быть любым `объектом`, каждому обработчику в контексте браузера с тем же origin. Сообщение передаётся в виде события `message` к каждому `BroadcastChannel`, привязанному к данному каналу.

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

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

var str = channel.postMessage(object);
```

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

| Specification |
| --- |
| HTML Standard # dom-broadcastchannel-postmessage-dev |

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

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

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

* `BroadcastChannel`, интерфейс, к которому относится **`postMessage`**.
Locating DOM elements using selectors
=====================================

Selectors API предоставляет методы, с помощью которых можно быстро и просто получить доступ к узлам `Element` из DOM путём сопоставления с набором селекторов. Это намного быстрее, чем прошлые техники, где надо было, например, использовать цикл в JS-коде, чтобы найти конкретные элементы.

Интерфейс NodeSelector (The NodeSelector interface)
---------------------------------------------------

Эта спецификация добавляет два новых метода к любым объектам, реализующим интерфейс `Document` (en-US), `DocumentFragment` (en-US), или `Element`:

`querySelector`

Возвращает первый совпадающий узел `Element` внутри поддерева. Если совпадающих узлов нет, будет возвращён `null`.

`querySelectorAll`

Возвращает `NodeList` (en-US), содержащий все подходящие узлы `Element` внутри поддерева узлов. Или возвращает пустой `NodeList`, если совпадений не найдено.


**Примечание:** `NodeList` (en-US), возвращаемый методом `querySelectorAll()`, не настоящий. Этот список отличается от других методов поиска DOM, которые возвращают настоящие (живые) узлы.

Вы можете найти примеры и детали, прочитав документацию для методов `querySelector()` (en-US) и `querySelectorAll()` (en-US), а также в статье Code snippets for querySelector.

Selectors
---------

Селекторные методы принимают один или больше селекторов, разделённых запятыми, чтобы определить, какие элементы должны быть возвращены. Например, чтобы все параграфы в документе, которые имеют классы `warning` или `note`, можно сделать следующее:
```

var special = document.querySelectorAll( "p.warning, p.note" );
```


Также можно искать по ID. Например:
```

var el = document.querySelector( "#main, #basic, #exclamation" );
```


После выполнения кода выше, `el` будет содержать первый элемент в документе, чей ID `main, basic` или `exclamation`

Вы можете использовать любые CSS-селекторы в методах `querySelector(), querySelectorAll()`

See also
--------

* Selectors API
* `element.querySelector` (en-US)
* `element.querySelectorAll` (en-US)
* `document.querySelector` (en-US)
* `document.querySelectorAll` (en-US)
* Code snippets for querySelector
performance.now()
=================

Краткое описание
----------------

Метод **`performance.now()`** возвращает временную метку `DOMHighResTimeStamp`, измеряемую в миллисекундах, с точностью до одной тысячной миллисекунды.

Значение, представленное типом `DOMHighResTimeStamp`, изменяется в зависимости от контекста. Стоит иметь ввиду следующее:

* в разделяемых или выделенных потоках выполнения, началом эпохи считается момент начала работы потока.
* вне потоков выполнения, или в выделенных потоках, созданных в контексте `Window`, началом эпохи считается значение свойства `PerformanceTiming.navigationStart` (en-US).
* в выделенных потоках выполнения, созданных из другого потока, началом эпохи устанавливается начало эпохи этого самого потока.
Синтаксис
---------
```

t = performance.now();
```

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


```js
var t0 = performance.now();
doSomething();
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
```


В отличие от других временны́х типов данных, доступных в JavaScript (таких как `Date.now` (en-US)), метки времени, возвращённые из `performance.now(),` не ограничены кратностью в одну миллисекунду, а представляют значение времени как число с плавающей запятой, с точностью до микросекунд.

Также, в противоположность `Date.now`, значение, возвращаемое из `performance.now()`, всегда возрастает с постоянной скоростью, независимо от системного времени (которое может быть установлено вручную или изменено программами наподобие NTP).

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

| Specification |
| --- |
| High Resolution Time # dom-performance-now |

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

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

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

* When milliseconds are not enough: performance.now() от HTML5 Rocks.
History.length
==============

**`History.length`** — это свойство объекта History, доступное только для чтения, которое возвращает число (Integer), обозначающее количество элементов в истории сессии, в том числе для загруженной страницы. Например, если открыть страницу в новой вкладке это свойство вернёт 1.

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

length = history.length;
```

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


```js
var result = window.history.length; // Вернёт размер истории текущей сессии
```

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

| Specification |
| --- |
| HTML Standard # dom-history-length-dev |

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

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

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

* `History`
History.state
=============

Свойство **`History.state`** возвращает значение последнего состояния стека истории (history stack). Этим способом можно проверить состояние не дожидаясь события `popstate (en-US)`.Синтаксис
---------
```

const currentState = history.state
```

### Значение

Последнее состояние стека истории. Значение равно `null` до тех пор, пока не будет применён метод `pushState()` или `replaceState()`.

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

Код, приведённый ниже, выводит в консоль значение `history.state` до и после применения метода `pushState()`, который записывает значение в историю.


```js
// Выведет null потому что мы пока не изменяли стек истории
console.log(`History.state before pushState: ${history.state}`);

// Теперь запишем какое-нибудь значение в стек
history.pushState({ name: "Example" }, "pushState example", "page3.html");

// Выведет значение history.state, которое было записано в предыдущей строке
console.log(`History.state after pushState: ${history.state}`);
```

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

| Specification |
| --- |
| HTML Standard # dom-history-state-dev |

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

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

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

* Working with the History API
History.go()
============

Метод **`History.go()`** выполняет переход на определённую страницу в истории текущей сессии. С его помощью можно перемещаться как вперёд, так и назад, в зависимости от значения параметра.

Данный метод является асинхронным. Добавьте обработчик для события `popstate (en-US)`, чтобы определить, когда переход закончен.

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

history.go([delta])
```

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

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

Относительное положение в истории, куда вы хотите переместиться. Отрицательные значения перемещают назад, а положительные — вперёд. Например, `history.go(2)` перемещает вперёд на 2 страницы, а `history.go(-2)` перемещает на 2 страницы назад. Если метод вызван без параметра или же `delta` равна 0, результат выполнения будет такой же, как у `location.reload()`.

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

Перемещение на 1 страницу назад (аналог вызова `back()` (en-US)):


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


Перемещение на страницу вперёд, как `forward()` (en-US):


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


Перемещение на 2 страницы вперёд:


```js
history.go(2);
```


Перемещение на 2 страницы назад:


```js
history.go(-2);
```


Также, оба этих вызова перезагрузят страницу:


```js
history.go();
history.go(0);
```

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

| Specification |
| --- |
| HTML Standard # dom-history-go-dev |

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

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

See also
--------

* `History`
* `back()` (en-US)
* `forward()` (en-US)
* `popstate (en-US)` event
* Working with the History API
History.replaceState()
======================

Метод **`History.replaceState()`** изменяет текущую запись в истории, заменяя её на значения `stateObj`, `title` и `URL`, передаваемые в параметрах метода. Данный метод особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.

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

history.replaceState(stateObj, title, [url])
```

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

`stateObj`

Объект состояния – это JavaScript-объект, связанный с записью в истории, переданной в метод `replaceState()`. Объект состояния может быть `null`.

`title`

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

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

URL-адрес записи в истории. Новый URL должен вести на тот же домен, протокол и порт, иначе pushState() выдаст исключение.

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

Предположим, на странице `http://mozilla.org/foo.html` выполняется следующий JavaScript-код:
```

let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
```


Объяснение этих двух строк можно найти в приведённом выше разделе *пример метода pushState()*.

Далее, предположим, на странице `http://mozilla.org/bar.html` выполняется JavaScript-код:
```

history.replaceState(stateObj, "page 3", "bar2.html")
```


Это приведёт к тому, что в URL-строке отобразится адрес `http://mozilla.org/bar2.html`, но браузер не станет сразу загружать `bar2.html` и даже не станет проверять наличие этой страницы `bar2.html`.

Теперь предположим, что пользователь переходит по адресу `http://www.microsoft.com`, а затем нажимает на кнопку **"Назад"**. В этом случае в URL-строке отобразится `http://mozilla.org/bar2.html`. Если же пользователь снова нажмёт на кнопку **"Назад"**, в URL-строке отобразится `http://mozilla.org/foo.html` и полностью обойдёт `bar.html`.

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

| Specification |
| --- |
| HTML Standard # dom-history-replacestate-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Selection.toString()
====================

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

Метод **`Selection.toString()`** возвращает строку, содержащуюся в выделенном объекте, т.е. выделенный текст.

Syntax
------
```

str = sel.toString()
```

### Return value

* *`str`* — это строка, содержащаяся в выделении.
### Parameters

*None (отсутствуют).*

Description
-----------

Этот метод возвращает выделенный текст.

В JavaScript, этот метод вызывается автоматически, когда функция, которой он передаётся, требует строку:


```js
alert(window.getSelection()); // What is called
alert(window.getSelection().toString()); // What is actually being effectively called.
```

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

| Specification |
| --- |
| Selection API # dom-selection-stringifier |

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

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

See also
--------

* `Selection` (en-US), the interface it belongs to.
Selection.getRangeAt()
======================

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

Метод **`Selection.getRangeAt()`** возвращает объект диапазона, который представляет один из диапазонов, выделенного на данный момент.

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

range = sel.getRangeAt(index)
```

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

*`range`*

Объект `Range`, который будет возвращён.

*`index`*

Индекс диапазона, начинающийся с нуля, который необходимо вернуть. Отрицательное значение или значение выше или равное `Selection.rangeCount` (en-US) приведёт к ошибке.

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


```js
var ranges = [];

sel = window.getSelection();

for (var i = 0; i < sel.rangeCount; i++) {
  ranges[i] = sel.getRangeAt(i);
}
/\* Каждый элемент в массиве диапазонов является
 \* объектом диапазона, который представляет
 \* один из диапазонов текущего выделения \*/
```

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

| Specification |
| --- |
| Selection API # dom-selection-getrangeat |

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

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

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

* `Selection` (en-US), интерфейс, к которому принадлежит метод.
* Tree Selection (для метода `getRangeAt()` в интерфейсе `nsITreeSelection`)
HTMLCanvasElement: событие webglcontextlost
===========================================

 Событие **`webglcontextlost`** WebGL API вызывается когда User agent
 обнаруживает, что буфер, связанный с `WebGLRenderingContext`, потерян.


|  |  |
| --- | --- |
| Всплытие | Да |
| Отменяемое | Да |
| Интерфейс | `WebGLContextEvent` (en-US) |
| Свойство для обработки события | Нет |

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

Вы можете эмулировать `webglcontextlost` событие с помощью расширения `WEBGL_lose_context` (en-US):


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

canvas.addEventListener("webglcontextlost", (event) => {
  console.log(event);
});

gl.getExtension("WEBGL\_lose\_context").loseContext();

// будет выведено "webglcontextlost".
```

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

| Specification |
| --- |
| WebGL Specification # 5.15.2 |

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

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

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

* `WebGLContextEvent` (en-US)
* `WebGLRenderingContext.isContextLost()` (en-US)
* `WEBGL_lose_context` (en-US), `WEBGL_lose_context.loseContext()` (en-US), `WEBGL_lose_context.restoreContext()` (en-US)