MediaTrackConstraints.echoCancellation - Интерфейсы веб API

MediaTrackConstraints.echoCancellation
======================================

Свойство **`echoCancellation`** объекта `MediaTrackConstraints` (en-US) это `ConstrainBoolean` (en-US) описывающее запрашиваемые или обязательные ограничения накладываемые на ограничивающее свойство `echoCancellation` (en-US).

При необходимости вы можете определить, поддерживается ли это ограничение, проверив значение `MediaTrackSupportedConstraints.echoCancellation` (en-US) как результат вызова `MediaDevices.getSupportedConstraints()` (en-US). Однако, обычно в этом нет необходимости, поскольку браузеры просто игнорируют любые незнакомые им ограничения.

Поскольку RTP (en-US) не содержит эту информацию, медиа-треки связанные с WebRTC `RTCPeerConnection` некогда не будут включать это свойство.

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

const constraintsObject = {
  echoCancellation: constraint,
};

constraintsObject.echoCancellation = constraint;
```

### Значение

Если это значение является простым `true` или `false`, пользовательский агент попытается получить медиа с включённым или отключённым эхоподавлением, если это возможно, но не вернёт ошибку, если это невозможно сделать. Иначе если значение передано как объект с полем `exact` , то логическое значение этого поля указывает обязательную настройку для эхоподавления; если это не может быть выполнены - запрос вернёт ошибку.

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

Смотрите Example: Constraint exerciser (en-US) для примера.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatrackconstraintset-echocancellation |

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

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

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

* Media Capture and Streams API (en-US)
* Capabilities, constraints, and settings (en-US)
* `MediaTrackConstraints` (en-US)
* `MediaDevices.getSupportedConstraints()` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `MediaStreamTrack`


URLSearchParams.delete() - Интерфейсы веб API

URLSearchParams.delete()
========================

Метод **`delete()`** интерфейса `URLSearchParams` удаляет все указанные параметры и все связанные с ним значения из списка найденных параметров.

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

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

URLSearchParams.delete(name)
```

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

name

Название удаляемого параметра.

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

Void

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

```js
let url = new URL("https://example.com?foo=1&bar=2&foo=3");
let params = new URLSearchParams(url.search.slice(1));

// Удалить параметр foo.
params.delete("foo"); //Строка запроса теперь: 'bar=2'
```

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

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-delete |

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

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


UIEvent: свойство which - Интерфейсы веб API

UIEvent: свойство which
=======================

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

Доступное только для чтение свойство **`UIEvent.which`** интерфейса `UIEvent` (en-US) возвращает число, указывающее на то, какая клавиша мыши была нажата или числовой код (`keyCode`) или код символа (`charCode`) нажатой клавиши на клавиатуре.

Значение
--------

### Значение для `KeyboardEvent`
Non-standard

 Для `KeyboardEvent` `event.which` содержит числовой код нажатой клавиши.
 Смотрите `KeyboardEvent.charCode` (en-US) и `KeyboardEvent.keyCode` (en-US) для дополнительной информации.

**Примечание:** Для новых приложений используйте `KeyboardEvent.key` или `KeyboardEvent.code` (en-US).

### Значение для `MouseEvent`
Non-standard

Для `MouseEvent` `event.which` содержит число, представляющее нажатую клавишу:

* `0`: Клавиша не нажата
* `1`: Левая клавиша
* `2`: Средняя клавиша
* `3`: Правая клавиша

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

**Примечание:** Для новых приложений используйте `MouseEvent.button`.

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

```html
<html lang="en">
  <head>
    <title>Пример charCode/keyCode/which</title>

    <script>
 function showKeyPress(evt) {
 alert(
 `Обработчик onkeypress:\n` +
 `свойство keyCode: ${evt.keyCode}\n` +
 `свойство which: ${evt.which}\n` +
 `свойство charCode: ${evt.charCode}\n` +
 `символ нажатой клавиши: ${String.fromCharCode(evt.charCode)}\n`,
 );
 }

 function keyDown(evt) {
 alert(
 `Обработчик onkeydown:\n` +
 `свойство keyCode: ${evt.keyCode}\n` +
 `свойство which: ${evt.which}\n`,
 );
 }
 </script>
  </head>

  <body onkeypress="showKeyPress(event);" onkeydown="keyDown(event);">
    <p>Нажмите любую клавишу.</p>
  </body>
</html>
```

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

| Specification |
| --- |
| UI Events # dom-uievent-which |

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

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

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

* `KeyboardEvent`
* `MouseEvent`


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

File.name
=========

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

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

var name = file.name;
```

Значение
--------

Строка, содержащая имя файла без пути, например, "My Resume.rtf".

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

```html
<input type="file" multiple onchange="processSelectedFiles(this)" />
```

```js
function processSelectedFiles(fileInput) {
  var files = fileInput.files;

  for (var i = 0; i < files.length; i++) {
    alert("Filename " + files[i].name);
  }
}
```

Проверьте результаты ниже:

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

| Specification |
| --- |
| File API # dfn-name |

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

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

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

* Использование файлов в веб приложениях


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

Работа с History API
====================

В HTML5 стали доступны методы `pushState()` и `replaceState()` для добавления и изменения записей в истории. Эти методы работают в сочетании с событием `onpopstate` (en-US)

Добавление и изменение записей в истории
----------------------------------------

`pushState()` позволяет изменить referrer, который используется в HTTP-заголовке для `XMLHttpRequest` объектов, созданных после изменения состояния. Значением referrer будет URL документа, окно которого является `this` на момент создания `XMLHttpRequest` объекта.

### Пример метода pushState()

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

```js
let stateObj = {
  foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");
```

В результате этого в URL-строке отобразится адрес `http://mozilla.org/bar.html`, но браузер не будет загружать страницу `bar.html` и даже не будет проверять, существует ли она..

Теперь предположим, что пользователь перешёл по адресу `http://google.com` и затем нажал на кнопку "**Назад**". В результате этого в URL будет отображаться `http://mozilla.org/bar.html`, а `history.state` будет содержать `stateObj`. Событие popstate не будет вызвано, поскольку страница была перезагружена. Сама страница будет выглядеть как `bar.html`.

Если пользователь ещё раз нажимает кнопку **"Назад"**, URL изменится на `http://mozilla.org/foo.html`, а в документе снова произойдёт событие `popstate`, на этот раз с объектом состояния, имеющим значение `null`. В этом случае возврат назад также не меняет содержимое документа, как и на предыдущем шаге, хотя документ может сам обновить своё содержимое после получения события `popstate`.

**Примечание:** Вызов `history.back()` обычно ведёт себя так же, как нажатие на кнопку **"Назад"**. Но есть одно важное исключение:

*После использования* `history.pushState()`, вызов `history.back()` *не вызывает событие* `popstate`. Нажатие в браузере на кнопку "Назад" (всё ещё) делает это.

### Метод pushState()

Метод `pushState()` принимает три параметра: *объект состояния*, *заголовок* (в данный момент игнорируется) и (необязательно) параметр "*URL"*.

Давайте более подробно рассмотрим каждый и этих трёх параметров.

**state object**

Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной `pushState()`. Всякий раз, когда пользователь переходит к новому состоянию, происходит событие `popstate`, а свойство `state` этого события содержит копию объекта состояния с записями истории.

Объект состояния может быть чем-угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод `pushState()` выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование `sessionStorage` и/или `localStorage`.

**title**

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

**URL**

Через этот параметр передаётся URL-адрес новой новый записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова `pushState()`, но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе `pushState()` выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.

**Примечание:** Начиная с Gecko 2.0 и до Gecko 5.0, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0, объект сериализуется с помощью алгоритма структурированного клонирования. Это позволяет безопасно передавать более широкий спектр объектов.

Вызов `pushState()` в некоторой степени похож на установку `window.location = "#foo"`, поскольку они оба также создают и активируют ещё одну запись в истории, связанную с текущим документом.

Но у `pushState()` есть несколько преимуществ:

* Новый URL может быть любым в пределах того же домена, порта и протокола, что и текущий адрес. Тогда как настройка `window.location` оставляет вас на том же `document` лишь в том случае, если вы меняете только хэш
* Менять URL не обязательно. Тогда как настройка `window.location = "#foo";` создаёт новую запись в истории, только если текущий хеш не `#foo`
* С новой записью в истории можно связать любые данные. В подходе, основанном на хеше, все соответствующие данные нужно кодировать в короткую строку
* Если заголовок `title` впоследствии используется браузерами, эти данные могут быть использованы (независимо от, скажем, хеша).

Обратите внимание, что `pushState()` никогда не вызывает событие `hashchange`, даже если новый URL отличается от старого только хешем.

В XUL-документах он создаёт указанный XUL-элемент

В других документах он создаёт элемент с null namespace URI.

### Метод replaceState()

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

`replaceState()` особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.

**Примечание:** Начиная с Gecko 2.0 и до Gecko 5.0, переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0, объект сериализуется с помощью алгоритма структурированного клонирования. Это позволяет безопасно передавать более широкий спектр объектов.

### Пример метода replaceState()

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

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

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

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

```js
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`.

### Событие popstate

Событие `popstate` вызывается в окне каждый раз, когда активная запись в истории меняется. Если запись в истории, которая активируется, была создана с помощью вызова `pushState` или активирована вызовом `replaceState`, свойство `state` события `popstate` содержит копию записи в истории объекта события.

Примеры использования можно посмотреть в `Window.onpopstate` (en-US).

### Чтение текущего состояния

Когда страница загружается, она может иметь объект события со значением, отличным от `"null"`. Это может произойти, например, если страница устанавливает объект состояния (с помощью `pushState()` или `replaceState()`) и затем пользователь перезапускает браузер. Когда страница перезагружается, она получит событие `onload`, но не получит событие `popstate`. Тем не менее, если вы прочитаете свойство `history.state`, получите объект состояния, который получили, если бы произошло событие `popstate`.

С помощью свойства `history.state` можно прочитать состояние текущей записи в истории, не дожидаясь события `popstate`, например:

```js
let currentState = history.state;
```

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

* History API
* Ajax navigation example (en-US)
* `window.history`


NamedNodeMap.getNamedItem() - Интерфейсы веб API

NamedNodeMap.getNamedItem()
===========================

Метод **`getNamedItem()`** интерфейса `NamedNodeMap` возвращает значение `Attr`, соответствующее заданному имени, или значение null, если соответствующий атрибут отсутствует.

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

myAttr = attrs.getNamedItem(name)
```

### Parameters

* `name` имя нужного атрибута
Совместимость с браузерами
--------------------------

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


RTCPeerConnection.canTrickleIceCandidates - Интерфейсы веб API

RTCPeerConnection.canTrickleIceCandidates
=========================================

Свойство только для чтения **`canTrickleIceCandidates`** , объекта **`RTCPeerConnection`**, возвращает значение типа `Boolean` , которое указывает на то, может ли удалённый пир принимать кандидаты, согласно спецификации trickled ICE candidates.
**ICE trickling (ICE просачивание)** - процесс продолжающейся отправки кандидатов, после первоначальной передачи предложения или ответа удалённому пиру..

Свойство инициализируется только после вызова метода `RTCPeerConnection.setRemoteDescription()` (en-US). Было бы идеально, если бы ваш протокол сигнализации предоставлял способ определения поддержки просачивания кандидатов, для того, что бы не полагаться на это свойство. Браузер, поддерживающий WebRTC, всегда будет поддерживать ICE просачивание.

Если оно не поддерживается, или о поддержке неизвестно, то проверив ложное значение этого свойства, необходимо подождать, пока значение свойства `iceGatheringState` (en-US) измениться на `"completed"` до создания и передачи первоначального предложения. Таким образом, отправка предложения сдерживается до сборки всех кандидатов.

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

 var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
```

### Значение

Тип `Boolean` содержит `true` , если удалённый пир может принимать просвечивающие ICE кандидаты, и `false` , если не может. Если удалённый пир ещё не инициализирован, свойство возвращает `null`.

**Примечание:** Значение свойства инициализируется после того, как локальный пир вызовет метод `RTCPeerConnection.setRemoteDescription()` (en-US); Возвращаемый объект описания используется агентом ICE для определения возможности удалённого пира поддерживать просачивающихся ICE кандидатов.

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

```js
var pc = new RTCPeerConnection();
// Следующий код может быть использован для обработки предложения от пира, когда
// он не знает поддерживает ли он просачивание
pc.setRemoteDescription(remoteOffer)
  .then(\_ => pc.createAnswer())
  .then(answer => pc.setLocalDescription(answer))
  .then(\_ =>
    if (pc.canTrickleIceCandidates) {
      return pc.localDescription;
    }
    return new Promise(r => {
      pc.addEventListener('icegatheringstatechange', e => {
        if (e.target.iceGatheringState === 'complete') {
          r(pc.localDescription);
        }
      });
    });
  })
  .then(answer => sendAnswerToPeer(answer)) // сигнальное сообщение
  .catch(e => handleError(e));

pc.addEventListener('icecandidate', e => {
  if (pc.canTrickleIceCandidates) {
    sendCandidateToPeer(e.candidate); // сигнальное сообщение
  }
});
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-cantrickleicecandidates |

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

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

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

* WebRTC (en-US)
* `RTCPeerConnection.addIceCandidate()` (en-US)
* Жизненный цикл сессии WebRTC


RTCPeerConnection.connectionState - Интерфейсы веб API

RTCPeerConnection.connectionState
=================================

Только для чтения свойство **`connectionState`** интерфейса `RTCPeerConnection` указывает на текущее состояние соединения, возвращая одно из строковых значений, определяемых в перечислении `RTCPeerConnectionState`.

Когда значение свойство изменяется, возникает событие `connectionstatechange` на объекте интерфейса `RTCPeerConnection` .

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

var connectionState = RTCPeerConnection.connectionState;
```

### Значение

Текущий статус соединения представлен одним из значений перечисления `RTCPeerConnectionState`.

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

```js
var pc = new RTCPeerConnection(configuration);

/\* ... \*/

var connectionState = pc.connectionState;
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-connection-state |

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

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

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

* Жизненный цикл сессии WebRTC
* `RTCPeerConnection`
* `connectionstatechange`
* WebRTC (en-US)


RTCPeerConnection() - Интерфейсы веб API

RTCPeerConnection()
===================

Конструктор **`RTCPeerConnection()`** возвращает новый экземпляр объекта `RTCPeerConnection`, который представляет соединение между локальным устройством и удалённым пиром (участником соединения)

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

pc = new RTCPeerConnection([configuration]);
```

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

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

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

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

Экземпляр класса `RTCPeerConnection` , сконфигурированный по свойствам параметра `configuration`, если используется, иначе сконфигурированный по умолчанию.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection |

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

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

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

* Сигнализированные и видеовызов
* Обзор архитектуры WebRTC (en-US)
* Жизненный цикл сессии WebRTC
* `RTCPeerConnection`


RTCPeerConnection: icecandidate event - Интерфейсы веб API

RTCPeerConnection: icecandidate event
=====================================

Событие **`icecandidate`** отправляется `RTCPeerConnection` когда `RTCIceCandidate` (en-US) был идентифицирован и добавлен к локальному клиенту (local peer) через вызов `RTCPeerConnection.setLocalDescription()` (en-US). Обработчик события должен передать кандидата удалённому клиенту (remote peer) по каналу сигнализации (signaling channel), чтобы удалённый клиент (remote peer) смог добавить его в свой набор удалённых кандидатов (remote candidates).

|  |  |
| --- | --- |
| Всплывает | Нет |
| Отменяемое | Нет |
| Интерфейс | `RTCPeerConnectionIceEvent` (en-US) |
| Название обработчика событий | `RTCPeerConnection.onicecandidate` (en-US) |

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

Существует три причины, по которым событие `icecandidate` происходит (fired) у `RTCPeerConnection`.

### Делимся (Sharing) новым кандидатом

В основном события `icecandidate` происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удалённому клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.

```js
rtcPeerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    sendCandidateToRemotePeer(event.candidate);
  } else {
    /\* there are no more candidates coming during this negotiation \*/
  }
};
```

Удалённый клиент (peer), получив кандидата, добавит этого кандидата в свой пул кандидатов, используя вызов `addIceCandidate()` (en-US), передавая в `candidate` (en-US) строку, которую вы передали с помощью сервера сигнализации (signaling server).

### Indicating the end of a generation of candidates

When an ICE negotiation session runs out of candidates to propose for a given `RTCIceTransport` (en-US), it has completed gathering for a **generation** of candidates. That this has occurred is indicated by an `icecandidate` event whose `candidate` (en-US) string is empty (`""`).

You should deliver this to the remote peer just like any standard candidate, as described under Sharing a new candidate above. This ensures that the remote peer is given the end-of-candidates notification as well. As you see in the code in the previous section, every candidate is sent to the other peer, including any that might have an empty candidate string. Only candidates for which the event's `candidate` (en-US) property is `null` are not forwarded across the signaling connection.

The end-of-candidates indication is described in section 9.3 of the Trickle ICE draft specification (note that the section number is subject to change as the specification goes through repeated drafts).

### Indicating that ICE gathering is complete

Once all ICE transports have finished gathering candidates and the value of the `RTCPeerConnection` object's `iceGatheringState` (en-US) has made the transition to `complete`, an `icecandidate` event is sent with the value of `complete` set to `null`.

This signal exists for backward compatibility purposes and does *not* need to be delivered onward to the remote peer (which is why the code snippet above checks to see if `event.candidate` is `null` prior to sending the candidate along.

If you need to perform any special actions when there are no further candidates expected, you're much better off watching the ICE gathering state by watching for `icegatheringstatechange` (en-US) events:

```js
pc.addEventListener("icegatheringstatechange", (ev) => {
  switch (pc.iceGatheringState) {
    case "new":
      /\* gathering is either just starting or has been reset \*/
      break;
    case "gathering":
      /\* gathering has begun or is ongoing \*/
      break;
    case "complete":
      /\* gathering has ended \*/
      break;
  }
});
```

As you can see in this example, the `icegatheringstatechange` event lets you know when the value of the `RTCPeerConnection` property `iceGatheringState` (en-US) has been updated. If that value is now `complete`, you know that ICE gathering has just ended.

This is a more reliable approach than looking at the individual ICE messages for one indicating that the ICE session is finished.

Examples
--------

This example creates a simple handler for the `icecandidate` event that uses a function called `sendMessage()` to create and send a reply to the remote peer through the signaling server.

First, an example using `addEventListener()`:

```js
pc.addEventListener(
  "icecandidate",
  (ev) => {
    if (ev.candidate) {
      sendMessage({
        type: "new-ice-candidate",
        candidate: event.candidate,
      });
    }
  },
  false,
);
```

You can also set the `onicecandidate` (en-US) event handler property directly:

```js
pc.onicecandidate = (ev) => {
  if (ev.candidate) {
    sendMessage({
      type: "new-ice-candidate",
      candidate: event.candidate,
    });
  }
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-onicecandidate |

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

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

See also
--------

* WebRTC API
* Signaling and video calling


RTCPeerConnection.currentRemoteDescription - Интерфейсы веб API

RTCPeerConnection.currentRemoteDescription
==========================================

Только для чтения свойство **`RTCPeerConnection.currentRemoteDescription`** возвращает объект `RTCSessionDescription` (en-US) , представляющий удалённую сторону соединения, как последний, успешно согласованный объект данных, с момента завершения согласования и установки соединения объектом `RTCPeerConnection` с удалённым пиром.

Для изменения значения свойства `currentRemoteDescription`, вызовите метод `RTCPeerConnection.setRemoteDescription()` (en-US), который запускает серию событий, приводящих к установке нового значения. Подробнее о том, что точно происходит и почему изменение значения не происходит немедленно, смотрите Ожидающие и текущие объекты описания.

**Примечание:** В отличии от `RTCPeerConnection.remoteDescription` (en-US), это значение действительный текущий статус соединения; `remoteDescription` может указывать на объект описания, на который соединение находиться в процессе перехода..

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

sessionDescription = RTCPeerConnection.currentRemoteDescription;
```

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

Текущий объект описания, представляющий удалённую сторону соединения, если она присутствует. Если ни один объект описания не установлен, значением будет `null`.

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

Пример рассматривает свойство `currentRemoteDescription` и отображает предупреждение, содержащее значения свойств `type` и `sdp` ,объекта `RTCSessionDescription` (en-US).

```js
var pc = new RTCPeerConnection();
…
var sd = pc.currentRemoteDescription;
if (sd) {
  alert("Local session: type='" +
        sd.type + "'; sdp description='" +
        sd.sdp + "'");
}
else {
  alert("No local session yet.");
}
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-currentremotedesc |

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

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

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

* `RTCPeerConnection.setRemoteDescription()` (en-US), `RTCPeerConnection.pendingRemoteDescription` (en-US), `RTCPeerConnection.remoteDescription` (en-US)
* `RTCPeerConnection.setRemoteDescription()` (en-US), `RTCPeerConnection.remoteDescription` (en-US), `RTCPeerConnection.pendingRemoteDescription` (en-US), `RTCPeerConnection.currentRemoteDescription`
* WebRTC (en-US)


RTCPeerConnection.currentLocalDescription - Интерфейсы веб API

RTCPeerConnection.currentLocalDescription
=========================================

Только для чтения свойство **`RTCPeerConnection.currentLocalDescription`** возвращает объект `RTCSessionDescription` (en-US) , описывающий локальную сторону соединения, как самый последний, удачно согласованный объект описания, с момента последнего завершения согласования `RTCPeerConnection` и соединения с удалённым пиром (участником соединения) .

Для изменения `currentLocalDescription`, вызовите метод `RTCPeerConnection.setLocalDescription()` (en-US), который запускает серию событий, приводящих к присвоению значения. Более подробно о том, что точно происходит и почему изменения происходят не сразу, смотрите Ожидающие и текущие объекты описания.

**Примечание:** В отличие от `RTCPeerConnection.localDescription` (en-US), это значение представляет актуальный, текущий статус локальной стороны соединения; `localDescription` может устанавливать описание, на которое соединение находится в процессе перехода.

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

sessionDescription = RTCPeerConnection.currentLocalDescription;
```

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

Текущий объект описания локальной стороны соединения. Если установка значения не удалась, значением станет `null`.

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

В этом примере рассматривается свойство `currentLocalDescription` и отображается предупреждение, содержащее свойства объекта `RTCSessionDescription` (en-US) `type` и `sdp` .

```js
var pc = new RTCPeerConnection();
…
var sd = pc.currentLocalDescription;
if (sd) {
  alert("Локальная сессия: type='" +
        sd.type + "'; sdp description='" +
        sd.sdp + "'");
}
else {
  alert("Локальной сессии ещё нет.");
}
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-currentlocaldesc |

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

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

**Примечание:** The addition of `currentLocalDescription` and `pendingLocalDescription` (en-US) to the WebRTC spec is relatively recent. In browsers which don't support them, just use `localDescription` (en-US).

See also
--------

* `RTCPeerConnection.setLocalDescription()` (en-US), `RTCPeerConnection.pendingLocalDescription` (en-US), `RTCPeerConnection.localDescription` (en-US)
* `RTCPeerConnection.setRemoteDescription()` (en-US), `RTCPeerConnection.remoteDescription` (en-US), `RTCPeerConnection.pendingRemoteDescription` (en-US), `RTCPeerConnection.currentRemoteDescription`
* WebRTC (en-US)


Визуализация с Web Audio API - Интерфейсы веб API

Визуализация с Web Audio API
============================

Одна из самых интересных фич Web Audio API — возможность извлекать частоту, форму волны и другие данные из звукового источника, которые могут быть использованы для создания визуализаций. Эта статья объясняет, как это можно сделать, и приводит несколько базовых примеров использования.

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

Основные концепции
------------------

Чтобы извлечь данные из вашего источника звука, вам понадобится `AnalyserNode`, созданный при помощи метода `AudioContext.createAnalyser()` (en-US), например:

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
```

Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:

```js
source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
distortion.connect(audioCtx.destination);
```

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

Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определённой частотной области, в зависимости от того, что вы укажете как значение свойства `AnalyserNode.fftSize` (en-US) (если свойство не задано, то значение по умолчанию равно 2048).

**Примечание:** вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя `AnalyserNode.minDecibels` (en-US) и `AnalyserNode.maxDecibels` (en-US), и разные константы усреднения данных с помощью `AnalyserNode.smoothingTimeConstant` (en-US). Прочтите эти страницы, чтобы получить больше информации о том как их использовать.

Чтобы получить данные, вам нужно использовать методы `AnalyserNode.getFloatFrequencyData()` (en-US) и `AnalyserNode.getByteFrequencyData()`, чтобы получить данные о частоте, и `AnalyserNode.getByteTimeDomainData()` (en-US) и `AnalyserNode.getFloatTimeDomainData()` (en-US) чтобы получить данные о форме волны.

Эти методы копируют данные в указанный массив, поэтому вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдёт для их хранения — следует использовать массивы `Float32Array` (en-US) или `Uint8Array` (en-US), в зависимости от нужных вам данных.

Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение `AnalyserNode.frequencyBinCount` (en-US), равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.

```js
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
```

Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:

```js
analyser.getByteTimeDomainData(dataArray);
```

Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: `<canvas>`.

Давайте рассмотрим конкретные примеры:

Создание формы волны/осциллографа
---------------------------------

Чтобы визуализировать осциллограф (спасибо Soledad Penadés за код в Voice-change-O-matic), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:

```js
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
```

Затем, мы очищаем холст:

```js
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
```

И определяем функцию `draw()`:

```js
function draw() {
```

Здесь мы используем `requestAnimationFrame()` чтобы многократно вызывать эту функцию:

```js
drawVisual = requestAnimationFrame(draw);
```

Затем мы копируем данные в наш массив:

```js
analyser.getByteTimeDomainData(dataArray);
```

Устанавливаем заливку холста

```js
canvasCtx.fillStyle = "rgb(200, 200, 200)";
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
```

Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь

```js
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = "rgb(0, 0, 0)";

canvasCtx.beginPath();
```

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

```js
var sliceWidth = (WIDTH \* 1.0) / bufferLength;
var x = 0;
```

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

```js
for (var i = 0; i < bufferLength; i++) {
  var v = dataArray[i] / 128.0;
  var y = (v \* HEIGHT) / 2;

  if (i === 0) {
    canvasCtx.moveTo(x, y);
  } else {
    canvasCtx.lineTo(x, y);
  }

  x += sliceWidth;
}
```

Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:

```js
      canvasCtx.lineTo(canvas.width, canvas.height/2);
      canvasCtx.stroke();
    };
```

В конце концов, мы вызываем функцию `draw()` , запускающую весь процесс:

```js
draw();
```

Мы получаем изображение волны, обновляющееся несколько раз в секунду:

![a black oscilloscope line, showing the waveform of an audio signal](/ru/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API/wave.png)

Создание частотной гистограммы
------------------------------

Ещё одна визуализация, которую можно создать, - это частотные диаграммы (такие, как строит Winamp). В проекте Voice-change-O-matic есть реализация такой диаграммы. Давайте посмотрим на неё.

Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи `clearRect()`. Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.

```js
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
```

Затем мы запускаем функцию `draw()` и задаём цикл при помощи `requestAnimationFrame()` таким образом, чтобы в каждом кадре анимации данные обновлялись.

```js
    function draw() {
      drawVisual = requestAnimationFrame(draw);

      analyser.getByteFrequencyData(dataArray);

      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
```

Затем мы устанавливаем значение `barWidth` , равное ширине холста, делённой на количество столбцов (длину буфера). Однако, мы домножаем ширину на 2.5, поскольку на большинстве частот звука не будет, поскольку большинство звуков, которые мы слышим в повседневной жизни, находятся в определённых, достаточно низких, диапазонах частот. Нам нет смысла показывать множество пустых частот, поэтому мы просто сдвигаем столбцы, соответствующие наиболее распространённым частотам.

Мы также устанавливаем значение переменных `barHeight` и `x` , задающей то, где на холсте должен быть размещён каждый столбец.

```js
var barWidth = (WIDTH / bufferLength) \* 2.5;
var barHeight;
var x = 0;
```

Как и раньше, мы в цикле проходим по каждому значению в `dataArray`. Для каждого значения мы устанавливаем высоту `barHeight` на уровне значения в массиве, устанавливаем заливку в зависимости от `barHeight` (Чем выше столбец, тем он ярче), и рисуем столбец в `x` пикселях от левой стороны холста. Ширина столбца равна `barWidth` , а высота - `barHeight/2` (чтобы столбцы помещались на холсте, мы уменьшили высоту в два раза)

Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: `HEIGHT-barHeight/2`. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное положение в разность высоты холста и `barHeight/2`, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.

```js
      for(var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i]/2;

        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
        canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);

        x += barWidth + 1;
      }
    };
```

Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.

```js
draw();
```

Этот код даёт нам следующий результат:

![a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal](/ru/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API/bar-graph.png)

**Примечание:** Примеры, используемые в данной статье, используют `AnalyserNode.getByteFrequencyData()` и `AnalyserNode.getByteTimeDomainData()` (en-US). Примеры работы с `AnalyserNode.getFloatFrequencyData()` (en-US) и `AnalyserNode.getFloatTimeDomainData()` (en-US) можно найти в демо Voice-change-O-matic-float-data (Вы также можете посмотреть исходный код) — это то же самое, что и Voice-change-O-matic, но здесь используются данные типа float, а не unsigned vyte.


Введение в API файлов и каталогов - Интерфейсы веб API

Введение в API файлов и каталогов
=================================

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

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

API файлов и каталогов взаимодействует с другими API. Оно было создано на основе File Writer API, который в свою очередь использует File API. Каждое API реализует разную функциональность. Данные программные интерфейсы являются огромным эволюционным скачком для веб-приложений, которые теперь могут кешировать и обрабатывать большие объёмы данных.

Об этом документе
-----------------

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

Ссылки на страницы данного API приведены в Ссылочном справочнике (en-US).

Спецификация находится на стадии разработки и будет изменяться в будущем.

Обзор
-----

Программный интерфейс файлов и каталогов включает асинхронные и синхронные методы. Асинхронное API может быть использовано в тех случаях, когда нежелательно, чтобы длительные вычисления блокировали весь пользовательский интерфейс. В свою очередь синхронное API предлагает более простую модель программирования, однако оно должно использоваться только с объектами WebWorkers.

### Применимость API

API файлов и каталогов является важным программным интерфейсом по следующим причинам:

* Благодаря ему у приложений могут быть автономные (offline) функции, а также функции хранения, позволяющие обрабатывать большие наборы двоичных данных.
* У приложений появляется возможность предварительной загрузки и кеширования ресурсов, что повышает из производительность.
* У пользователя приложения появляется возможность напрямую редактировать файлы, расположенные у него на компьютере.
* Пользователям предоставляется интерфейс работы с файловым хранилищем, который схож с файловой системой.

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

### API файлов и каталогов и другие программные интерфейсы хранения данных

API файлов и каталогов является альтернативой для других интерфейсов хранения данных, таких как IndexedDB, WebSQL (признано устаревшим с 18 ноября 2010 г.) и AppCache. Тем не менее данное API является более хорошим выбором для приложений, обрабатывающим большие объёмы данных, по следующим причинам:

* Данное API предлагает возможность хранения данных на стороне клиента в вариантах использования, которые не могут быть решены с помощью баз данных. Например, данное API является намного более производительным в случае хранения и обработки больших файлов.
* Firefox поддерживает хранение бинарных данных в IndexedDB, в то время как в Chrome эта функция по-прежнему находится на стадии разработки. Если Chrome является одним из целевых браузеров для вашего приложения и у вас есть необходимость хранения бинарных данных, то вы можете использовать только либо данное API, либо AppCache. В свою очередь хранилище AppCache не предоставляет возможности локальных изменений, а также тонкой настройки на стороне клиента.
* В Chrome у вас есть возможность использования данного API вместе с программным интерфейсом управления квотами, позволяющее управлять квотами хранилища.
### Примеры использования

Далее приведены лишь некоторые случаи, в которых можно использовать API файлов и каталогов:

* Приложения с постоянной загрузкой.
    + Когда файл или каталог выбран для загрузки на сервер, есть возможность скопировать файлы в локальную песочницу и начать их поочерёдную загрузку.
    + Приложение может продолжить загрузку после закрытия или аварийного сбоя браузера, прерывание связи или завершения работы компьютера.
* Видеоигры или другие приложения с большим количеством медиа ресурсов.
    + Приложение скачивает один или несколько больших архивов с ресурсами и локально его распаковывает.
    + Приложение осуществляет предварительную фоновую загрузку ресурсов, благодаря чему у пользователя нет необходимости ожидать их загрузки для начала следующего уровня.
* Аудио- или фоторедактор с возможностью автономной работы или локальным кешем.
    + Приложение может редактировать файлы без полной их перезаписи (например, ID3/EXIF теги).
* Offline видеопроигрыватель.
    + Приложение может загружать большие (> 1 ГБ) файлы.
    + Приложение может начать воспроизведение частично загруженного файла.
* Offline клиент электронной почты.
    + Возможность загрузки и локального хранения прикреплений.
    + Возможность кеширования прикреплений для более поздней отправки.
Big concepts
------------

Before you start using the File and Directory Entries API, you need to understand a few concepts:

* The File and Directory Entries API is a virtual representation of a file system
* The File and Directory Entries API can use different storage types
* Browsers impose storage quota
* The File and Directory Entries API has asynchronous and synchronous versions
* When using the asynchronous API, always use the error callbacks
* The File and Directory Entries API interacts with other APIs
* The File and Directory Entries API is case-sensitive
### The File and Directory Entries API is a virtual representation of a file system

The API doesn't give you access to the local file system, nor is the sandbox really a section of the file system. Instead, it is a virtualized file system that looks like a full-fledged file system to the web app. It does not necessarily have a relationship to the local file system outside the browser.

What this means is that a web app and a desktop app cannot share the same file at the same time. The API does not let your web app reach outside the browser to files that desktop apps can also work on. You can, however, export a file from a web app to a desktop app. For example, you can use the File API, create a blob, redirect an iframe to the blob, and invoke the download manager.

### The File and Directory Entries API can use different storage types

An application can request temporary or persistent storage. Temporary storage is easier to get, because the browser just gives it to you, but it is limited and can be deleted by the browser when it runs out of space. Persistent storage, on the other hand, might offer you larger space that can only be deleted by the user, but it requires the user to grant you permission.

Use temporary storage for caching and persistent storage for data that you want your app to keep—such as user-generated or unique data.

### Browsers impose storage quotas

To prevent a web app from using up the entire disk, browsers might impose a quota for each app and allocate storage among web apps.

How storage space is granted or allocated and how you can manage storage are idiosyncratic to the browser, so you need to check the respective documentation of the browser. Google Chrome, for example, allows temporary storage beyond the 5 MB required in the specifications and supports the Quota Management API. To learn more about the Chrome-specific implementation, see Managing HTML5 Offline Storage.

### The File and Directory Entries API has asynchronous and synchronous versions

The File and Directory Entries API comes with asynchronous and synchronous versions. Both versions of the API offer the same capabilities and features. In fact, they are almost alike, except for a few differences.

* **WebWorkers.** The asynchronous API can be used in either the document or WebWorkers context, while the synchronous API is for use with WebWorkers only.
* **Callbacks**. The asynchronous API doesn't give you data by returning values; instead, you have to pass a callback function. You send requests for operations to happen, and get notified by callbacks. In contrast, the synchronous API does not use callbacks because the API methods return values.
* **Global methods of the asynchronous and synchronous APIs**. The asynchronous API has the following global methods: `requestFileSystem()` and `resolveLocalFileSystemURL()`. These methods are members of both the window object and the worker global scope. The synchronous API, on the other hand, uses the following methods: `requestFileSystemSync()` and `resolveLocalFileSystemSyncURL()`. These synchronous methods are members of the worker's global scope only, not the window object.

The synchronous API can be simpler for some tasks. Its direct, in-order programming model can make code easier to read. The drawback of synchronous API has to do with its interactions with Web Workers, which has some limitations.

### When using the asynchronous API, always use the error callbacks

When using the asynchronous API, always use the error callbacks. Although the error callbacks for the methods are optional parameters, they are not optional for your sanity. You want to know why your calls failed. At minimum, handle the errors to provide error messages, so you'll have an idea of what's going on.

### The File and Directory Entries API interacts with other APIs

The File and Directory Entries API is designed to be used with other APIs and elements on the web platform. For example, you are likely to use one of the following:

* XMLHttpRequest (such as the `send()` method for file and blob objects)
* Drag and Drop API
* Web Workers (for the synchronous version of the File and Directory Entries API)
* The `input` element (to programmatically obtain a list of files from the element)
### The File and Directory Entries API is case sensitive

The filesystem API is case-sensitive, and case-preserving.

Ограничения
-----------

For security reasons, browsers impose restrictions on file access. If you ignore them, you will get security errors.

* The File and Directory Entries API adheres to the same-origin policy
* The File and Directory Entries API does not let you create and rename executable files
* The file system is sandboxed
* You cannot run your app from file://
### The File and Directory Entries API adheres to the same-origin policy

An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of file systems.

The security boundary imposed on file system prevents applications from accessing data with a different origin. This protects private data by preventing access and deletion. For example, while an app or a page in http://www.example.com/app/ can access files from http://www.example.com/dir/, because they have the same origin, it cannot retrieve files from http://www.example.com:8080/dir/ (different port) or https://www.example.com/dir/ (different protocol).

### The File and Directory Entries API does not let you create and rename executable files

To prevent malicious apps from running hostile executables, you cannot create executable files within the sandbox of the File and Directory Entries API.

### The file system is sandboxed

Because the file system is sandboxed, a web app cannot access another app's files. You also cannot read or write files to an arbitrary folder (for example, My Pictures and My Documents) on the user's hard drive.

### You cannot run your app from file://

You cannot run your app locally from `file://`. If you do so, the browser throws errors or your app fails silently. This restriction also applies to many of the file APIs, including BlobBuilder and FileReader.

For testing purposes, you can bypass the restriction on Chrome by starting the browser with the `--allow-file-access-from-files` flag. Use this flag only for this purpose.

Определения
-----------

This section defines and explains terms used in the File and Directory Entries API.

blob

Stands for binary large object. A blob is a set of binary data that is stored a single object. It is a general-purpose way to reference binary data in web applications. A blob can be an image or an audio file.

Blob

Blob—with a capital B—is a data structure that is immutable, which means that binary data referenced by a Blob cannot be modified directly. This makes Blobs act predictably when they are passed to asynchronous APIs.

persistent storage

Persistent storage is storage that stays in the browser unless the user expunges it or the app deletes it.

temporary storage

Transient storage is available to any web app. It is automatic and does not need to be requested, but the browser can delete the storage without warning.

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

| Specification |
| --- |
| File and Directory Entries API # api-domfilesystem |

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

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

See also
--------

* File and Directory Entries API
* Exploring the FileSystem APIs (HTML5 Rocks)


Worker.terminate() - Интерфейсы веб API

Worker.terminate()
==================

Метод **`terminate()`** интерфейса `Worker` немедленно завершает работу `worker`. Работнику не даётся возможность завершить свою работу, он останавливается сразу.

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

```js
myWorker.terminate();
```

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

Нет.

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

Void.

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

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

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

myWorker.terminate();
```

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

| Specification |
| --- |
| HTML Standard # dom-worker-terminate-dev |

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

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

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

Интерфейс `Worker`.


Worker() - Интерфейсы веб API

Worker()
========

Конструктор **`Worker()`** создаёт объект `Worker`, который выполняет скрипт по указанному URL-адресу. Этот скрипт должен подчиняться политике одного источника (same-origin policy).

Если URL имеет недопустимый синтаксис или нарушена политика одного источника, то будет вызвано `DOMException` (en-US) типа `SECURITY_ERR`.

**Примечание:** that there is a disagreement among browser manufacturers about whether a data URI is of the same origin or not. Though Gecko 10.0 and later accept data URIs, that's not the case in all other browsers.

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

```js
var myWorker = new Worker(aURL, options);
```

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

*aURL*

`USVString` (en-US), представляющая URL-адрес скрипта который будет выполняться `worker`. Он должен подчиняться политике одного источника.

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

An object containing option properties that can be set when creating the object instance. Available properties are as follows:

* `type`: A `DOMString` specifying the type of worker to create. The value can be `classic` or `module`. If not specified, the default used is `classic`.
* `credentials`: A `DOMString` specifying the type of credentials to use for the worker. The value can be\* `omit`\*, `same-origin`, or *`include`. If not specified, or if type is `classic`, the default used is `omit` (no credentials required).*
* \_`name`: A \_`DOMString` specifying an identifying name for the `DedicatedWorkerGlobalScope` (en-US) representing the scope of the worker, which is mainly useful for debugging purposes.

### Исключения

* A `SecurityError` is raised if the document is not allowed to start workers.
* A `NetworkError` is raised if the MIME type of one of the script is `text/csv`, `image/*`, `video/*`, or `audio/*`. It should always be `text/javascript.`
* A `SyntaxError` is raised if a *URL* cannot be parsed.
Пример
------

Следующий фрагмент кода показывает создание объекта `Worker` с помощью конструктора `Worker()` и его последующее использование:

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

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

Больше примеров можно найти здесь: Basic dedicated worker example (run dedicated worker).

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

| Specification |
| --- |
| HTML Standard # dom-worker-dev |

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

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

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

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


Worker.onmessage - Интерфейсы веб API

Worker.onmessage
================

Свойство **`onmessage`** интерфейса `Worker` представляет собой обработчик `event handler`, который будет вызван когда произойдёт событие `message`. Тип этого события `MessageEvent` (en-US) и оно будет вызвано когда worker-объект получит сообщение из выполняемого им кода (т.е из метода `DedicatedWorkerGlobalScope.postMessage` (en-US) .

**Примечание:** Данные события доступны в свойстве data события `message`.

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

```js
myWorker.onmessage = function(e) { ... }
```

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

Следующий пример кода показывает создание объекта `Worker` используя конструктор `Worker()`. События попадают в объект, когда значение внутри поля ввода формы `first` изменяется. Обработчик onmessage указан для обработки сообщений, которые приходят назад из кода объекта в текущий контекст выполнения.

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

first.onchange = function () {
  myWorker.postMessage([first.value, second.value]);
  console.log("Сообщение, отправленное в worker-объект");
};

myWorker.onmessage = function (e) {
  result.textContent = e.data;
  console.log("Сообщение полученное из worker-объекта");
};
```

В скрипте `worker.js`, обработчик `onmessage` используется для обработки событий, полученных из главного скрипта:

```js
onmessage = function (e) {
  console.log("Сообщение полученное из главного скрипта");
  var workerResult = "Результат: " + e.data[0] \* e.data[1];
  console.log("Отправка сообщения назад в главный скрипт");
  postMessage(workerResult);
};
```

Посмотрите как в скрипте `worker.js` вызывается обработчик `onmessage`. В нем присутствует только глобальное свойство `onmessage`, потому что worker-объект фактически является областью видимости (`DedicatedWorkerGlobalScope` (en-US)).

Для полного примера смотрите наш Basic dedicated worker example (run dedicated worker).

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

| Specification |
| --- |
| HTML Standard # event-message |

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

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

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

Интерфейс `Worker`, которому принадлежит этот обработчик.


Worker.postMessage() - Интерфейсы веб API

Worker.postMessage()
====================

Метод **`postMessage()`** интерфейса `Worker` отправляет сообщение во внутреннее пространство `worker`-а. Метод имеет один параметр с данными для отправки в `worker`. Данные могут быть любым значением или объектом JavaScript, которые может обработать алгоритм структурированного клонирования, поддерживающий циклические ссылки.

`Worker` может отправить обратно информацию потоку создавшему его с помощью метода `DedicatedWorkerGlobalScope.postMessage` (en-US).

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

```js
worker.postMessage(message, [transfer]);
```

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

*message*

`Object` передаваемый в `worker`. Будет содержаться в поле `data` описания события обработчика `DedicatedWorkerGlobalScope.onmessage` (en-US). Это может быть любое значение или объект JavaScript, которые может обработать алгоритм структурированного клонирования, поддерживающий циклические ссылки.

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

Необязательный `array` с передаваемыми (`Transferable`) объектами (из тех, что были указаны в `message`) на которые передаются права собственности. Если право на объект передаётся, он становится непригодным (*neutered*) в контексте, из которого был отправлен, и становится доступным только в `worker`, которому он был отправлен.

Переданные (`transferable`) объекты могут быть экземплярами классов `ArrayBuffer`, `MessagePort` (en-US) или `ImageBitmap`. null не является допустимым значением для передачи прав.

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

Void.

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

В следующем фрагменте кода показано создание объекта `Worker` с помощью конструктора `Worker()`. При изменении значений одного из двух полей формы (`first` и `second`) событием `change (en-US)` вызывается функция `postMessage()` для отправки значений полей текущему worker.

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

first.onchange = function () {
  myWorker.postMessage([first.value, second.value]);
  console.log("Сообщение отправлено работнику");
};

second.onchange = function () {
  myWorker.postMessage([first.value, second.value]);
  console.log("Сообщение отправлено работнику");
};
```

Больше примеров можно найти здесь: Basic dedicated worker example (run dedicated worker).

**Примечание:** `postMessage()` может отправить только один объект за раз. Если нужно передать несколько значений, то можно отправить массив, как показано выше.

### Пример с Transfer

В этом примере показано дополнение Firefox, которое передаёт `ArrayBuffer` из основного потока в `ChromeWorker`, а затем `ChromeWorker` передаёт его обратно в основной поток.

#### Код основного потока

```js
var myWorker = new ChromeWorker(self.path + "myWorker.js");

function handleMessageFromWorker(msg) {
  console.log("входящее сообщение от работника:", msg);
  switch (msg.data.aTopic) {
    case "do\_sendMainArrBuff":
      sendMainArrBuff(msg.data.aBuf);
      break;
    default:
      throw "свойство aTopic отсутствует в сообщении ChromeWorker";
  }
}

myWorker.addEventListener("message", handleMessageFromWorker);

// Создание и отправка буфера
var arrBuf = new ArrayBuffer(8);
console.info("arrBuf.byteLength, ДО передачи:", arrBuf.byteLength);

myWorker.postMessage(
  {
    aTopic: "do\_sendWorkerArrBuff",
    aBuf: arrBuf, // буфер который передаётся 3 строками ниже
  },
  [
    arrBuf, // буфер созданный на строке 9
  ],
);

console.info("arrBuf.byteLength, ПОСЛЕ передачи:", arrBuf.byteLength);
```

#### Код Worker-а

```js
self.onmessage = function (msg) {
  switch (msg.data.aTopic) {
    case "do\_sendWorkerArrBuff":
      sendWorkerArrBuff(msg.data.aBuf);
      break;
    default:
      throw "свойство aTopic отсутствует в сообщении ChromeWorker";
  }
};

function sendWorkerArrBuff(aBuf) {
  console.info(
    "от рабочего, ДО отправки обратно, aBuf.byteLength:",
    aBuf.byteLength,
  );

  self.postMessage({ aTopic: "do\_sendMainArrBuff", aBuf: aBuf }, [aBuf]);

  console.info(
    "от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength:",
    aBuf.byteLength,
  );
}
```

#### Лог консоли
```

arrBuf.byteLength, ДО передачи: 8                               bootstrap.js:40
arrBuf.byteLength, ПОСЛЕ передачи: 0                            bootstrap.js:42

от рабочего, ДО отправки обратно, aBuf.byteLength: 8            myWorker.js:5:2

входящее сообщение от работника: message { ... }                bootstrap.js:20
буфер вернулся в основной поток, aBuf.byteLength: 8             bootstrap.js:12

от рабочего, ПОСЛЕ отправки обратно, aBuf.byteLength: 0         myWorker.js:7:2
```

`byteLength` равен 0 потому, что это переданный (`transferable`) объект. Полный пример демо дополнения Firefox можно найти здесь: GitHub :: ChromeWorker - demo-transfer-arraybuffer

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

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

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

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

[1] Internet Explorer не поддерживает `Transferable` объекты.

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

* Интерфейс `Worker`


RandomSource.getRandomValues() - Интерфейсы веб API

RandomSource.getRandomValues()
==============================

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

Для того, чтобы гарантировать достаточную производительность, реализации используют не настоящий генератор случайных чисел (RNG, en - Random Number Generator), а генератор псевдо-случайных чисел, которому предоставлено начальное зерно (wiki - https://en.wikipedia.org/wiki/Random\_seed) с достаточной энтропией (http://cryptography.ru/ref/энтропия). Реализация генератора псевдо-случайных чисел (PRNG, en - PseudoRandom Number Generator) отличается от других реализаций RNG, но она больше подходит для использования в криптографии. Реализации также требуют использование начального зерна с достаточной энтропией, как источник системно-уровневой энтропии.

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

cryptoObj.getRandomValues(typedArray);
```

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

`typedArray`

Целочисленный массив `TypedArray`, например `Int8Array`, `Uint8Array` (en-US), `Uint16Array` (en-US), `Int32Array`, или `Uint32Array` (en-US). Все элементы массива замещаются случайными числами.

### Исключения

* Исключение `QuotaExceededError` `DOMException` (en-US) выбрасывается если запрошенная длина больше чем 65536 байт.
Пример
------

```js
/\* Предполагается что функция window.crypto.getRandomValues доступна \*/

var array = new Uint32Array(10);
window.crypto.getRandomValues(array);

console.log("Ваше счастливое число:");
for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}
```

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

| Specification |
| --- |
| Web Cryptography API # Crypto-method-getRandomValues |

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

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

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

* `Window.crypto` чтобы получить объект `Crypto`.
* `Math.random`, не криптографический способ получения случайных чисел.


GamepadEvent.gamepad - Интерфейсы веб API

GamepadEvent.gamepad
====================

Свойство **`GamepadEvent.gamepad`**, интерфейса **`GamepadEvent`,** возвращает объект `Gamepad`, предоставляющий доступ к данным геймпада для событий `gamepadconnected` и `gamepaddisconnected`.

**Примечание:** Эти события не возникают Chrome, только в Firefox. В Chrome вы должны использовать `Navigator.getGamepads` для доступа к объекту `Gamepad`.

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

readonly    attribute Gamepad gamepad;
```

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

Свойство `gamepad` будет передано при возникновении события `Window.gamepadconnected`.

```js
window.addEventListener("gamepadconnected", function (e) {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

Значение
--------

Объект `Gamepad`.

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

| Specification |
| --- |
| Gamepad # dom-gamepadevent-gamepad |

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

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

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

Using the Gamepad API (en-US)


IDBIndex.locale - Интерфейсы веб API

IDBIndex.locale
===============

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

The **`locale`** read-only property of the `IDBIndex` (en-US) interface returns the locale of the index (for example `en-US`, or `pl`) if it had a `locale` value specified upon its creation (see `createIndex()`'s optionalParameters (en-US).) Note that this property always returns the current locale being used in this index, in other words, it never returns `"auto"`.

Syntax
------

```js
var myIndex = objectStore.index("index");
console.log(myIndex.locale);
```

### Value

A `DOMString`.

Example
-------

In the following example we open a transaction and an object store, then get the index `lName` from a simple contacts database. We then open a basic cursor on the index using `IDBIndex.openCursor` (en-US) — this works the same as opening a cursor directly on an `ObjectStore` using `IDBObjectStore.openCursor` (en-US) except that the returned records are sorted based on the index, not the primary key.

The `locale` value is logged to the console.

```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  var transaction = db.transaction(["contactsList"], "readonly");
  var objectStore = transaction.objectStore("contactsList");

  var myIndex = objectStore.index("lName");
  console.log(myIndex.locale);

  myIndex.openCursor().onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var tableRow = document.createElement("tr");
      tableRow.innerHTML =
        "<td>" +
        cursor.value.id +
        "</td>" +
        "<td>" +
        cursor.value.lName +
        "</td>" +
        "<td>" +
        cursor.value.fName +
        "</td>" +
        "<td>" +
        cursor.value.jTitle +
        "</td>" +
        "<td>" +
        cursor.value.company +
        "</td>" +
        "<td>" +
        cursor.value.eMail +
        "</td>" +
        "<td>" +
        cursor.value.phone +
        "</td>" +
        "<td>" +
        cursor.value.age +
        "</td>";
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specification
-------------

Not currently part of any specification.

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase` (en-US)
* Using transactions: `IDBTransaction` (en-US)
* Setting a range of keys: `IDBKeyRange` (en-US)
* Retrieving and making changes to your data: `IDBObjectStore` (en-US)
* Using cursors: `IDBCursor` (en-US)
* Reference example: To-do Notifications (view example live.)


MouseEvent.pageX - Интерфейсы веб API

MouseEvent.pageX
================

**`MouseEvent.pageX`** - это свойство `MouseEvent` доступное только для чтения. Данное свойство возвращает значение равное горизонтальной координате, относительно всего документа. Это свойство учитывает любую горизонтальную прокрутку страницы. Первоначально это свойство было определено как длинное целое число. Модуль просмотра CSSOM переопределил его как double float. Подробнее см. Раздел «Совместимость с браузером».

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

var pos = event.pageX
```

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

var pageX = event.pageX;
pageX === event.clientX + (window.pageYOffset || document.body.scrollTop);
```

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

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-pagex |

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

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

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

* `UIEvent.pageX` (en-US)


MouseEvent.offsetX - Интерфейсы веб API

MouseEvent.offsetX
==================

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

Свойство `MouseEvent.offsetX`, доступное только для чтения, показывает отступ курсора мыши по оси X от края целевого DOM узла.

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

var xOffset = instanceOfMouseEvent.offsetX;
```

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

Значение с плавающей запятой - double. Ранние версии спецификации определяли возвращаемое значение как целое число. Подробнее смотрите в разделе про совместимость с браузерами.

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

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-offsetx |

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

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

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

* `MouseEvent`


MouseEvent.screenX - Интерфейсы веб API

MouseEvent.screenX
==================

**`screenX`** - read-only свойство интерфейса события `MouseEvent`, соответствующее горизонтальной координате (смещению) указателя мыши в глобальных (экранных) координатах.

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

var x = instanceOfMouseEvent.screenX
```

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

Значение с плавающей точкой типа `double`. В ранних версиях этой спецификации определялось как целое число, соответствующее количеству пикселей. Подробнее см. раздел "Совместимость с браузерами".

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

Этом примере демонстрирует координаты вашей мыши в случае получения события `mousemove (en-US)`.

#### HTML

```html
<p>Подвигайте мышью, чтобы увидеть положение её курсора.</p>
<p id="screen-log"></p>
```

#### JavaScript

```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

#### Результат выполнения

### Обработка события

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

```js
function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
  if (e.screenX >= 100) doRedButton();
}
```

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

| Specification |
| --- |
| UI Events # dom-mouseevent-screenx |

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

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

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

* `MouseEvent`
* `screenY` (en-US)
* `clientX` / `clientY`


MouseEvent.ctrlKey - Интерфейсы веб API

MouseEvent.ctrlKey
==================

Свойство только для чтения **`MouseEvent.ctrlKey`** возвращает true, когда клавиша Ctrl была нажата, а если нет - false.

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

var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
```

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

Boolean

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

```js
<html>
<head>
<title>Пример с ctrlKey</title>

<script type="text/javascript">
document.addEventListener('click', function(e) {
  console.log('Нажата клавиша Ctrl?', e.ctrlKey);
})
</script>
</head>

<body>
<p>
Кликните в любое место на странице и откройте консоль разработчика, чтобы узнать - нажата ли клавиша Ctrl?
</p>
</body>
</html>
```

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

| Specification |
| --- |
| UI Events # dom-mouseevent-ctrlkey |

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

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

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

* `MouseEvent`


MouseEvent.shiftKey - Интерфейсы веб API

MouseEvent.shiftKey
===================

**`MouseEvent.shiftKey`** атрибут только для чтения , который указывает была ли нажата клавиша `shift` . Возвращает (`true`) если нажата `shift`, (`false`) если нет.

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

var shiftKeyPressed = instanceOfMouseEvent.shiftKey
```

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

Логический

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

```js
<html>
<head>
<title>shiftKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "SHIFT key pressed: " + e.shiftKey + "\n"
    + "ALT key pressed: " + e.altKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Нажмите на любую символьную клавишу удерживая или не удерживая клавишу SHIFT.<br />
Вы также можете использовать клавишу SHIFT вместе с клавишей ALT.</p>
</body>
</html>
```

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

| Specification |
| --- |
| UI Events # dom-mouseevent-shiftkey |

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

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

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

* `MouseEvent`


MouseEvent.clientX - Интерфейсы веб API

MouseEvent.clientX
==================

**`MouseEvent.clientX`** свойство доступное только для чтения. Это свойство является горизонтальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства `clientX` равным 0, независимо от того, прокручена страницы по горизонтали или нет.

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

var x = instanceOfMouseEvent.clientX
```

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

Числовое значение горизонтальной координаты

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

```html
<!doctype html>
<html>
  <head>
    <title>Пример для clientX\clientY</title>

    <script>
 function showCoords(evt) {
 alert(
 "clientX value: " +
 evt.clientX +
 "\n" +
 "clientY value: " +
 evt.clientY +
 "\n",
 );
 }
 </script>
  </head>

  <body onmousedown="showCoords(event)">
    <p>Для показа координат мышки нажмите в любом месте страницы.</p>
  </body>
</html>
```

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

| Specification |
| --- |
| UI Events # dom-mouseevent-clientx |

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

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

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

* `MouseEvent`
* `clientY`
* `screenX` / `screenY` (en-US)


MouseEvent.buttons - Интерфейсы веб API

MouseEvent.buttons
==================

Свойство **`MouseEvent.buttons`** доступно только для чтения. Оно показывает, какие клавиши мыши (или другого устройства ввода) были нажаты при срабатывании события.Для каждой нажатой кнопки есть своё уникальное битовое значение (см. ниже раздел "Возвращаемые значения"). Если нажаты несколько кнопок одновременно, значения суммируются, создавая новое значение. Например, если нажата вторая кнопка (2 или 000010 в двоичном коде) вместе со средней (4 или 000100 в двоичном коде), значение будет равно 6 (2 + 4) или 000110 в двоичном коде.

**Примечание:** Не путайте это свойство со свойством `MouseEvent.button`. Текущее свойство `MouseEvent.buttons` показывает состояние нажатых кнопок при любом событии мыши, а свойство `MouseEvent.button` указывает на события, произошедшие в результате нажатия/отпускания кнопок мыши.

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

var buttonPressed = instanceOfMouseEvent.buttons
```

Возвращаемые значения
---------------------

Целое число, представляющее одну или несколько кнопок. При одновременном нажатии нескольких кнопок значения объединяются (например, 3 = первая (1) + вторая (2) кнопки мыши):

* `0`: кнопки не нажаты или не инициализированы;
* `1`: первая кнопка (обычно левая);
* `2`: вторая кнопка (обычно правая);
* `4`: дополнительная кнопка (обычно средняя или колёсико мыши);
* `8`: четвёртая кнопка (как правило, кнопка "Назад" браузера);
* `16` : пятая кнопка (как правило, кнопка "Вперёд" браузера).
Спецификации
------------

| Specification |
| --- |
| UI Events # dom-mouseevent-buttons |

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

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

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

* `MouseEvent`


MouseEvent.clientY - Интерфейсы веб API

MouseEvent.clientY
==================

**`MouseEvent.clientY`** свойство доступное только для чтения. Это свойство является вертикальной координатой в пределах клиентской области приложения, на которой произошло событие (в отличие от координат внутри страницы). Для примера, нажатие в верхнем левом углу клиентской области будет всегда приводить к событию со значением свойства `clientY` равным 0, независимо от того, прокручена страницы по вертикали или нет.

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

var y = instanceOfMouseEvent.clientY
```

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

Числовое значение вертикальной координаты

Example
-------

```html
<!doctype html>
<html>
  <head>
    <title>Пример для clientX\clientY</title>

    <script>
 function showCoords(evt) {
 alert(
 "clientX value: " +
 evt.clientX +
 "\n" +
 "clientY value: " +
 evt.clientY +
 "\n",
 );
 }
 </script>
  </head>

  <body onmousedown="showCoords(event)">
    <p>Для показа координат мышки нажмите в любом месте страницы.</p>
  </body>
</html>
```

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

| Specification |
| --- |
| UI Events # dom-mouseevent-clienty |

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

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

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

* `MouseEvent`
* `clientX`
* `screenX` / `screenY` (en-US)


MouseEvent.button - Интерфейсы веб API

MouseEvent.button
=================

**`MouseEvent.button`** свойство доступное только для чтения, возвращает значение, соответствующее нажатой кнопки мыши, которое инициировало событие.

Это свойство предоставляет информацию только о том, какая кнопка или несколько кнопок были нажаты или отпущены для инициации события, и не имеет отношения к таким событиям как `mouseenter (en-US)`, `mouseleave (en-US)`, `mouseover (en-US)`, `mouseout (en-US)` или `mousemove (en-US)`.

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

**Примечание:** Не путайте это свойство со свойством `MouseEvent.buttons`, которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.

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

var buttonPressed = instanceOfMouseEvent.button
```

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

Число, соответствующее нажатой кнопке:

* `0`: Нажата основная кнопка. Левая кнопка мыши или переназначенная пользователем другая кнопка
* `1`: Нажата вспомогательная кнопка. Колёсико или средняя кнопка мыши, если она есть
* `2`: Нажата вторичная кнопка. Правая кнопка мыши
* `3`: Нажата четвёртая кнопка мыши. Обычно кнопка браузера *Назад*
* `4`: Нажата пятая кнопка мыши. Обычно кнопка браузера *Вперёд*

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

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

```js
<script>
var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 0:
                console.log('Нажата левая кнопка.');
            break;

            case 1:
                console.log('Нажата средняя кнопка или колёсико.');
            break;

            case 2:
                console.log('Нажата правая кнопка.');
            break;

            default:
                console.log('Неопределённое событие: ' + btnCode);
        }
    }
}
</script>

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Нажмите кнопку мыши...</button>
```

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

| Specification |
| --- |
| UI Events # dom-mouseevent-button |

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

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

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

* `"MouseEvent"`


AbortController.abort() - Интерфейсы веб API

AbortController.abort()
=======================

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

Метод `abort()` интерфейса `AbortController` прерывает DOM запрос (например Fetch запрос) до его завершения. Это позволяет прервать fetch запросы, использование любого ответа `Body` и потоков.

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

```js
controller.abort();
```

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

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

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

Не возвращает.

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

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

Сначала мы создаём контроллер с помощью конструктора `AbortController()`, а затем получаем ссылку на связанный объект `AbortSignal` используя свойство `AbortController.signal`.

Когда fetch запрос инициируется, мы передаём `AbortSignal` в качестве опции внутрь объекта параметров запроса (см. `{signal}` ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав `AbortController.abort()`, как показано ниже во втором обработчике событий.

```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Загрузка прервана');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Ошибка загрузки: ' + e.message;
  })
}
```

**Примечание:** Когда `abort()` вызывается, `fetch()` промис отклоняется с `AbortError`.

Вы можете найти полный работающий пример на GitHub — см. abort-api (увидеть работу в живую).

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

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

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

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

* Fetch API


AbortController.signal - Интерфейсы веб API

AbortController.signal
======================

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

>
> \*\*Примечание:\*\*Это свойство только для чтения.
>
>
>

Свойство **`signal`** интерфейса `AbortController` возвращает экземпляр объекта `AbortSignal`, который может быть использован для связи/прерывания DOM запроса по желанию.

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

```js
var signal = abortController.signal;
```

### Значение

Экземпляр объекта `AbortSignal`.

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

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

Сначала мы создаём контроллер с помощью конструктора `AbortController()`, а затем получаем ссылку на связанный объект `AbortSignal` используя свойство `AbortController.signal`.

Когда fetch запрос инициируется, мы передаём `AbortSignal` в качестве опции внутрь объекта параметров запроса (см. `{signal}` ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав `AbortController.abort()`, как показано ниже во втором обработчике событий.

```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Загрузка прервана');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Ошибка загрузки: ' + e.message;
  })
}
```

**Примечание:** Когда `abort()` вызывается, промис `fetch()` отклоняется с `AbortError`.

Вы можете найти полный рабочий пример на GitHub — см. abort-api (см. как он работает в живую).

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-signal② |

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

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

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

* Fetch API


AbortController.AbortController() - Интерфейсы веб API

AbortController.AbortController()
=================================

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

Конструктор **`AbortController()`** создаёт новый экземпляр объекта `AbortController`.

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

```js
var controller = new AbortController();
```

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

Нет.

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

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

Сначала мы создаём контроллер с помощью конструктора `AbortController()`, а затем получаем ссылку на связанный объект `AbortSignal` используя свойство `AbortController.signal`.

Когда fetch запрос инициируется, мы передаём `AbortSignal` в качестве опции внутрь объекта параметров запроса (см. `{signal}` ниже). Это связывает сигнал и контроллер с fetch запросом и позволяет нам прервать его, вызвав `AbortController.abort()`, как показано ниже во втором обработчике событий.

```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Загрузка прервана');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Ошибка загрузки: ' + e.message;
  })
}
```

**Примечание:** Когда `abort()` вызывается, `fetch()` промис отклоняется с `AbortError`.

Вы можете найти полный рабочий пример на GitHub — см. abort-api (см. как он работает в живую).

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

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

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

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

* Fetch API


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

ServiceWorker.onstatechange
===========================

Обработчик события, вызываемый при срабатывании события `statechange`; по сути, срабатывает при изменении `ServiceWorker.state`.

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

ServiceWorker.onstatechange = function(statechangeevent) { ... }
ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
```

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

Данный фрагмент кода из примера событий service worker (демо) возвращает состояние при каждом его изменении.

```js
var serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector("#kind").textContent = "active";
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener("statechange", function (e) {
    logState(e.target.state);
  });
}
```

Обратите внимание, что при срабатывании `statechange`, ссылки на service worker могли измениться. Например:

```js
navigator.serviceWorker.register(..).then(function(swr) {
  swr.installing.state == "installing"
  swr.installing.onstatechange = function() {
    swr.installing == null;
    // At this point, swr.waiting OR swr.active might be true. This is because the statechange
    // event gets queued, meanwhile the underlying worker may have gone into the waiting
    // state and will be immediately activated if possible.
  }
})
```

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

| Specification |
| --- |
| Service Workers # dom-serviceworker-onstatechange |

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

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


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

ServiceWorker.state
===================

Свойство интерфейса `ServiceWorker` **`state`**, доступное только для чтения является строкой, показывающей текущее состояние данного Service Worker. Его возможные значения: `installing`, `installed,` `activating`, `activated` и `redundant`.

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

someURL = ServiceWorker.state
```

### Значение

Определение `ServiceWorkerState` (en-US) (см. спецификацию)

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

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

```js
var serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector("#kind").textContent = "active";
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener("statechange", function (e) {
    logState(e.target.state);
  });
}
```

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

| Specification |
| --- |
| Service Workers # service-worker-state |

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

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


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

ServiceWorker.scriptURL
=======================

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

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

someURL = ServiceWorker.scriptURL
```

### Значение

`USVString` (en-US) (см. WebIDL-определение USVString.)

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

```js
TBD;
```

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

| Specification |
| --- |
| Service Workers # service-worker-url |

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

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


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

EffectTiming
============

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

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

Словарь **`EffectTiming`**, входящий в состав Web Animations API, используется в `Element.animate()`, `KeyframeEffectReadOnly()` (en-US), и `KeyframeEffect()` для описания временных свойств анимационных эффектов. Все эти свойства необязательные, хотя без установки `duration` анимация не будет воспроизводиться.

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

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

`delay` (en-US) Необязательный

Число миллисекунд для задержки начала анимации. По умолчанию `0`.

`direction` (en-US) Необязательный

Указывает направление анимации. Она может выполняться вперёд (`normal`), назад (`reverse`), переключать направление после каждой итерации (`alternate`), или работать назад и переключать после каждой итерации (`alternate-reverse`). По умолчанию `"normal"`.

`duration` (en-US) Необязательный

Число миллисекунд, в течении которых выполняется каждая итерация анимации. По умолчанию 0. Хотя это свойство технически необязательное, имейте ввиду, что ваша анимация не будет запущена, если это значение равно `0`.

`easing` (en-US) Необязательный

Скорость изменения анимации с течением времени. Принимает заранее определённые значения `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"`, и `"ease-in-out"`, или кастомное `"cubic-bezier"` со значением типа `"cubic-bezier(0.42, 0, 0.58, 1)"`. По умолчанию `"linear"`.

`endDelay` (en-US) Необязательный

Число миллисекунд задержки после окончания анимации. Это в первую очередь полезно, когда последовательность действий анимации базируется на окончании другой анимации. По умолчанию `0`.

`fill` (en-US) Необязательный

Диктует должны ли эффекты анимации отражаться элементом(ами) перед воспроизведением (`"backwards"`), сохраняться после того, как анимация завершилась (`"forwards"`), или и то и другое ("`both")`. По умолчанию `"none"`.

`iterationStart` (en-US) Необязательный

Описывает, в какой момент итерации должна начаться анимация. Например, значение 0.5 указывает на начало запуска анимации в середине первой итерации, с таким набором значений анимация с 2-мя итерациями будет закончена на полпути к третей итерации. По умолчанию `0.0`.

`iterations` (en-US) Необязательный

Число раз, которое анимация должна повторяться. По умолчанию `1`, может принимать значение до `Infinity`, чтобы повторять анимацию до тех пор, пока элемент существует.

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

| Specification |
| --- |
| Web Animations # dom-keyframeeffect-keyframeeffect |

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

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

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

* Web Animations API
* Using the Web Animations API
* `Element.animate()`
* `KeyframeEffect()`
* `KeyframeEffectReadOnly()` (en-US)