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

loadstart
=========

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

Общая информация
----------------

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

Progress

Интерфейс

ProgressEvent

Распространяется

Нет

Отменяемое

Нет

Цель

Element

Действие по умолчанию

Нет

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Только для чтения  | `DOMString` | The type of event. |
| `bubbles` Только для чтения  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Только для чтения  | `Boolean` | Whether the event is cancellable or not. |
| `lengthComputable` Только для чтения  | `Boolean` | Specifies whether or not the total size of the transfer is known. Read only. |
| `loaded` Только для чтения  | unsigned long (long) | The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only. |
| `total` Только для чтения  | unsigned long (long) | The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only. |

Связанные свойства
------------------

* `loadstart (en-US)`
* `progress (en-US)`
* `error (en-US)`
* `abort (en-US)`
* `load (en-US)`
* `loadend (en-US)`
Смотрите также
--------------

* Отслеживание состояния загрузки


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

XMLHttpRequest.getResponseHeader()
==================================

Метод **XMLHttpRequest.getResponseHeader()** возвращает строку, содержащую текст определённого хэдера (header). Если в наличии несколько хэдеров с одинаковыми именами, то они возвращаются в виде одной строки, где значения отделены друг от друга парой "запятая + пробел". Метод `getResponseHeader()` возвращает значение в кодировке UTF.

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

var myHeader = getResponseHeader(name);
```

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

name

Строка `ByteString` (en-US), представляющая имя хэдера, значение которого необходимо возвратить в виде текста.

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

Строка `ByteString` (en-US), представляющее текстовое значение хэдера или null, если ответ ещё не был получен или хэдер с именем name отсутствует в ответе.

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

```js
var client = new XMLHttpRequest();
client.open("GET", "unicorns-are-teh-awesome.txt", true);
client.send();
client.onreadystatechange = function () {
  if (this.readyState == this.HEADERS\_RECEIVED) {
    console.log(client.getResponseHeader("Content-Type"));
  }
};
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-xmlhttprequest-getresponseheader |

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

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

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

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


XMLHttpRequest.withCredentials - Интерфейсы веб API

XMLHttpRequest.withCredentials
==============================

Свойство **XMLHttpRequest.withCredentials** это `Boolean` который определяет, должны ли создаваться кросс-доменные `Access-Control` запросы с использованием таких идентификационных данных как cookie, авторизационные заголовки или TLS сертификаты. Настройка `withCredentials` бесполезна при запросах на тот же домен.

Вдобавок, этот флаг также используется для определения, будут ли проигнорированы куки переданные в ответе. Значение по умолчанию - `false`. XMLHttpRequest с другого домена не может установить cookie на свой собственный домен в случае, если перед созданием этого запроса флаг `withCredentials` не установлен в `true`. Сторонние cookies, полученные с помощью установки `withCredentials` в true, всё равно будут соблюдать политику одинакового домена и, следовательно, не могут быть получены запрашивающим скриптом через document.cookie или из заголовков ответа.

>
> \*\*Примечание:\*\*Это свойство не влияет на запросы, отправленные на тот же домен.
>
>
>

>
> \*\*Примечание:\*\*Ответы с другого домена не могут установить куки для своего собственного домена в случае, если перед созданием запроса флаг `withCredentials` не установлен в `true`, несмотря на значение заголовков `Access-Control-`.
>
>
>

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

```js
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.withCredentials = true;
xhr.send(null);
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # the-withcredentials-attribute |

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

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


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

XMLHttpRequest.abort()
======================

Метод **XMLHttpRequest.abort()** прерывает уже отправленный запрос. Когда запрос прерывается, то его свойство `readyState` устанавливается в `UNSENT` (0), а `status` в 0.

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

XMLHttpRequest.abort()
```

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

Нет.

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

`undefined`

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

```js
var xhr = new XMLHttpRequest(),
  method = "GET",
  url = "https://developer.mozilla.org/";
xhr.open(method, url, true);

xhr.send();

xhr.abort();
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # the-abort()-method |

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

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

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

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


GlobalEventHandlers.onloadend - Интерфейсы веб API

GlobalEventHandlers.onloadend
=============================

Свойство **`onloadend`** от `GlobalEventHandlers` примесь `event handler` передаёт код для вызова в момент возникновения события `loadend (en-US)` (когда процесс загрузки ресурса окончился и остановился)

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

img.onloadend = funcRef;
```

При возникновении события `loadend` будет вызвана функция обработчик `funcRef`.

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

```html
<img src="myImage.jpg" />
```

```js
// 'loadstart' fires first, then 'load', then 'loadend'

image.addEventListener("load", function (e) {
  console.log("Image loaded");
});

image.addEventListener("loadstart", function (e) {
  console.log("Image load started");
});

image.addEventListener("loadend", function (e) {
  console.log("Image load finished");
});
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadend |
| XMLHttpRequest Standard # handler-xhr-onloadend |

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

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


XMLHttpRequest.upload - Интерфейсы веб API

XMLHttpRequest.upload
=====================

Свойство **XMLHttpRequest.upload** возвращает объект `XMLHttpRequestUpload` (en-US), представляющий процесс загрузки. Это непрозрачный объект, но так как он является `XMLHttpRequestEventTarget` (en-US), к нему можно добавить обработчики событий.

Обработчики событий, которые можно добавить к объекту загрузки:

| Обработчик | Событие |
| --- | --- |
| `onloadstart` | Начало запроса |
| `onprogress` | Происходит передача данных |
| `onabort` | Запрос был отменён |
| `onerror` | При запросе произошла ошибка |
| `onload` | Запрос завершился |
| `ontimeout` | Запрос не завершился ко времени, указанному автором |
| `onloadend` | Запрос завершился (успешно или с ошибкой) |

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

| Specification |
| --- |
| XMLHttpRequest Standard # the-upload-attribute |

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

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


XMLHttpRequest.responseURL - Интерфейсы веб API

XMLHttpRequest.responseURL
==========================

Свойство **`XMLHttpRequest.responseURL`** доступно только для чтения, возвращает сериализованный URL ответа или пустую строку, если URL равен `null`. Если URL возвращён, любой URL фрагмент в URL будет стёрт. Значение `responseURL` станет окончательным URL, получаемым после любых редиректов.

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

```js
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/test", true);
xhr.onload = function () {
  console.log(xhr.responseURL); // http://example.com/test
};
xhr.send(null);
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # the-responseurl-attribute |

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

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


Примеры использования DOM в web-разработке и XML - Интерфейсы веб API

Примеры использования DOM в web-разработке и XML
================================================

В этой главе представлены более длинные примеры разработки веб-сайтов и XML с использованием DOM. По возможности, примеры используют общие API, трюки и шаблоны в JavaScript для управления объектом документа.

Пример 1: высота и ширина
-------------------------

В следующем примере показано использование свойств высоты и ширины для изображений разных размеров:

```html
<!doctype html>
<html lang="en">
  <head>
    <title>width/height example</title>
    <script>
 function init() {
 var arrImages = new Array(3);

 arrImages[0] = document.getElementById("image1");
 arrImages[1] = document.getElementById("image2");
 arrImages[2] = document.getElementById("image3");

 var objOutput = document.getElementById("output");
 var strHtml = "<ul>";

 for (var i = 0; i < arrImages.length; i++) {
 strHtml +=
 "<li>image" +
 (i + 1) +
 ": height=" +
 arrImages[i].height +
 ", width=" +
 arrImages[i].width +
 ", style.height=" +
 arrImages[i].style.height +
 ", style.width=" +
 arrImages[i].style.width +
 "<\/li>";
 }

 strHtml += "<\/ul>";

 objOutput.innerHTML = strHtml;
 }
 </script>
  </head>
  <body onload="init();">
    <p>
      Image 1: no height, width, or style
      <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif" />
    </p>

    <p>
      Image 2: height="50", width="500", but no style
      <img
 id="image2"
 src="http://www.mozilla.org/images/mozilla-banner.gif"
 height="50"
 width="500" />
    </p>

    <p>
      Image 3: no height, width, but style="height: 50px; width: 500px;"
      <img
 id="image3"
 src="http://www.mozilla.org/images/mozilla-banner.gif"
 style="height: 50px; width: 500px;" />
    </p>

    <div id="output"></div>
  </body>
</html>
```

Пример 2: Атрибуты Изображения
------------------------------

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Modifying an image border</title>

    <script>
 function setBorderWidth(width) {
 document.getElementById("img1").style.borderWidth = width + "px";
 }
 </script>
  </head>

  <body>
    <p>
      <img
 id="img1"
 src="image1.gif"
 style="border: 5px solid green;"
 width="100"
 height="100"
 alt="border test" />
    </p>

    <form name="FormName">
      <input
 type="button"
 value="Make border 20px-wide"
 onclick="setBorderWidth(20);" />
      <input
 type="button"
 value="Make border 5px-wide"
 onclick="setBorderWidth(5);" />
    </form>
  </body>
</html>
```

Пример 3: Управление Стилями
----------------------------

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

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Changing color and font-size example</title>

    <script>
 function changeText() {
 var p = document.getElementById("pid");

 p.style.color = "blue";
 p.style.fontSize = "18pt";
 }
 </script>
  </head>
  <body>
    <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">
      linker
    </p>

    <form>
      <p><input value="rec" type="button" onclick="changeText();" /></p>
    </form>
  </body>
</html>
```

Пример 4: Использование Стилей
------------------------------

Свойство styleSheets объекта документа возвращает список таблиц стилей, которые были загружены в этот документ. Вы можете получить доступ к этим таблицам стилей и их правилам индивидуально, используя объекты таблицы стилей, стилей и CSS-правил объекта, как показано в этом примере, который выводит все селектора правил стиля в консоль.

```js
var ss = document.styleSheets;

for (var i = 0; i < ss.length; i++) {
  for (var j = 0; j < ss[i].cssRules.length; j++) {
    dump(ss[i].cssRules[j].selectorText + "\n");
  }
}
```

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

```css
body {
  background-color: darkblue;
}
p {
  font-face: Arial;
  font-size: 10pt;
  margin-left: 0.125in;
}
#lumpy {
  display: none;
}
```

Этот скрипт выводит следующее:
```

BODY
P
#LUMPY
```

Пример 5: Распространение Событий
---------------------------------

Этот пример демонстрирует, как события срабатывают и обрабатываются в DOM очень простым путём. Когда загружается BODY в составе HTML-документа, обработчик событий регистрируется в верхней строке таблицы TABLE. Обработчик событий реагирует на событие запуском функции stopEvent, изменяющей значение в нижней ячейке.

Однако, stopEvent также вызывает метод объекта событий, `event.stopPropagation`, что препятствует дальнейшему всплытию события в DOM. Обратите внимание, что сама таблица имеет `onclick` обработчик событий, который должен отображать сообщение при нажатии на таблицу. Но метод stopEvent метод прекратил распространение, и поэтому после обновления данных в таблице фаза события эффективно завершается, и отображается окно предупреждения для подтверждения.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Event Propagation</title>

    <style>
 #t-daddy {
 border: 1px solid red;
 }
 #c1 {
 background-color: pink;
 }
 </style>

    <script>
 function stopEvent(ev) {
 c2 = document.getElementById("c2");
 c2.innerHTML = "hello";

 // this ought to keep t-daddy from getting the click.
 ev.stopPropagation();
 alert("event propagation halted.");
 }

 function load() {
 elem = document.getElementById("tbl1");
 elem.addEventListener("click", stopEvent, false);
 }
 </script>
  </head>

  <body onload="load();">
    <table id="t-daddy" onclick="alert('hi');">
      <tr id="tbl1">
        <td id="c1">one</td>
      </tr>
      <tr>
        <td id="c2">two</td>
      </tr>
    </table>
  </body>
</html>
```

Пример 6: getComputedStyle
--------------------------

Этот пример показывает как `window.getComputedStyle` метод может использоваться для получения стилей элемента, которые не заданы с помощью атрибута style или с помощью JavaScript (e.g., `elt.style.backgroundColor="rgb(173, 216, 230)"`). Эти последние типы стилей можно получить с помощью более прямых `elt.style` свойств, которые указаны в DOM CSS Properties List.

getComputedStyle () возвращает объект ComputedCSSStyleDeclaration, свойства индивидуального стиля которого могут ссылаться на метод getPropertyValue () этого объекта, как показано в следующем примере документа.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>getComputedStyle example</title>

    <script>
 function cStyles() {
 var RefDiv = document.getElementById("d1");
 var txtHeight = document.getElementById("t1");
 var h\_style = document.defaultView
 .getComputedStyle(RefDiv, null)
 .getPropertyValue("height");

 txtHeight.value = h\_style;

 var txtWidth = document.getElementById("t2");
 var w\_style = document.defaultView
 .getComputedStyle(RefDiv, null)
 .getPropertyValue("width");

 txtWidth.value = w\_style;

 var txtBackgroundColor = document.getElementById("t3");
 var b\_style = document.defaultView
 .getComputedStyle(RefDiv, null)
 .getPropertyValue("background-color");

 txtBackgroundColor.value = b\_style;
 }
 </script>

    <style>
 #d1 {
 margin-left: 10px;
 background-color: rgb(173, 216, 230);
 height: 20px;
 max-width: 20px;
 }
 </style>
  </head>

  <body>
    <div id="d1"> </div>

    <form action="">
      <p>
        <button type="button" onclick="cStyles();">getComputedStyle</button>
        height<input id="t1" type="text" value="1" /> max-width<input
 id="t2"
 type="text"
 value="2" />
        bg-color<input id="t3" type="text" value="3" />
      </p>
    </form>
  </body>
</html>
```

Пример 7: Отображение Свойств Событий Объекта
---------------------------------------------

В этом примере используются методы DOM для отображения всех свойств объекта `window.onload` (en-US) `event` и их значений в таблице. Он также показывает полезный метод использования цикла for..in для итерации по свойствам объекта для получения их значений.

Свойства объектов событий сильно различаются между браузерами, WHATWG DOM Standard перечисляет стандартные свойства, однако многие браузеры значительно расширили их.

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

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Show Event properties</title>

    <style>
 table {
 border-collapse: collapse;
 }
 thead {
 font-weight: bold;
 }
 td {
 padding: 2px 10px 2px 10px;
 }

 .odd {
 background-color: #efdfef;
 }
 .even {
 background-color: #ffffff;
 }
 </style>

    <script>
 function showEventProperties(e) {
 function addCell(row, text) {
 var cell = row.insertCell(-1);
 cell.appendChild(document.createTextNode(text));
 }

 var e = e || window.event;
 document.getElementById("eventType").innerHTML = e.type;

 var table = document.createElement("table");
 var thead = table.createTHead();
 var row = thead.insertRow(-1);
 var lableList = ["#", "Property", "Value"];
 var len = lableList.length;

 for (var i = 0; i < len; i++) {
 addCell(row, lableList[i]);
 }

 var tbody = document.createElement("tbody");
 table.appendChild(tbody);

 for (var p in e) {
 row = tbody.insertRow(-1);
 row.className = row.rowIndex % 2 ? "odd" : "even";
 addCell(row, row.rowIndex);
 addCell(row, p);
 addCell(row, e[p]);
 }

 document.body.appendChild(table);
 }

 window.onload = function (event) {
 showEventProperties(event);
 };
 </script>
  </head>

  <body>
    <h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
  </body>
</html>
```

Пример 8: Использование интерфейса таблицы DOM
----------------------------------------------

Интерфейс DOM HTMLTableElement предоставляет некоторые удобные методы для создания и управления таблицами. Два часто используемых метода: `HTMLTableElement.insertRow` и `tableRow.insertCell`.

Чтобы добавить строку и некоторые ячейки в существующую таблицу:

```html
<table id="table0">
  <tr>
    <td>Row 0 Cell 0</td>
    <td>Row 0 Cell 1</td>
  </tr>
</table>

<script>
 var table = document.getElementById("table0");
 var row = table.insertRow(-1);
 var cell, text;

 for (var i = 0; i < 2; i++) {
 cell = row.insertCell(-1);
 text = "Row " + row.rowIndex + " Cell " + i;
 cell.appendChild(document.createTextNode(text));
 }
</script>
```

### Примечания

* Свойство таблицы `innerHTML` никогда не должно использоваться для изменения таблицы, хотя вы можете использовать её для записи всей таблицы или содержимого ячейки.
* Если для создания строк и ячеек используются методы DOM Core `document.createElement` и `Node.appendChild`, IE требует, чтобы они были добавлены к элементу tbody, тогда как другие браузеры позволят добавлять к элементу таблицы (строки будут добавлены к последнему элементу tbody).
* Существует ряд других методов, относящихся к интерфейсу таблицы, которые могут использоваться для создания и изменения таблиц.
Subnav
------

* DOM Reference
* Introduction to the DOM
* Events and the DOM (en-US)
* Examples


Введение - Интерфейсы веб API

Введение
========

Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) - что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.

Что такое Объектная Модель Документа (DOM)?
-------------------------------------------

Объектная Модель Документа (DOM) – это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа. Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования.

Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде. В любом случае, это один и тот же документ. DOM предоставляет другой способ представления, хранения и управления этого документа. DOM полностью поддерживает объектно-ориентированное представление веб-страницы, делая возможным её изменение при помощи языка описания сценариев наподобие JavaScript.

Стандарты W3C DOM и WHATWG DOM формируют основы DOM, реализованные в большинстве современных браузеров. Многие браузеры предлагают расширения за пределами данного стандарта, поэтому необходимо проверять работоспособность тех или иных возможностей DOM для каждого конкретного браузера.

Например: стандарт DOM описывает, что метод `getElementsByTagName` в коде, указанном ниже, должен возвращать список всех элементов <p> в документе.

```js
paragraphs = document.getElementsByTagName("P");
// paragraphs[0] это первый <p> элемент
// paragraphs[1] это второй <p> элемент и т.д.
alert(paragraphs[0].nodeName);
```

Все свойства, методы и события, доступные для управления и создания новых страниц, организованы в виде объектов. Например, объект `document`, который представляет сам документ, объект `table`, который реализует специальный интерфейс DOM `HTMLTableElement`, необходимый для доступа к HTML-таблицам, и так далее. Данная документация даёт справку об объектах DOM, реализованных Gecko-подобных браузерах.

DOM и JavaScript
----------------

Небольшой пример выше, как почти все примеры в этой справке – это JavaScript. То есть пример *написан* на JavaScript, но при этом *используется* DOM для доступа к документу и его элементам. DOM не является языком программирования, но без него JavaScript не имел бы никакой модели или представления о веб-странице, HTML-документе, XML-документе и их элементах. Каждый элемент в документе - весь документ в целом, заголовок, таблицы внутри документа, заголовки таблицы, текст внутри ячеек таблицы - это части объектной документной модели для этого документа, поэтому все они могут быть доступны и могут изменяться с помощью DOM и скриптового языка наподобие JavaScript.

Вначале JavaScript и DOM были тесно связаны, но впоследствии они развились в различные сущности. Содержимое страницы хранится в DOM и может быть доступно и изменяться с использованием JavaScript, поэтому мы можем записать это в виде приблизительного равенства:

API (веб либо XML страница) = DOM + JS (язык описания скриптов)

DOM спроектирован таким образом, чтобы быть независимым от любого конкретного языка программирования, обеспечивая структурное представление документа согласно единому и последовательному API. Хотя мы всецело сфокусированы на JavaScript в этой справочной документации, реализация DOM может быть построена для любого языка, как в следующем примере на Python:

```python
# Пример DOM на языке Python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # Свойство объекта документа DOM;
p_list = doc.getElementsByTagName("para");
```

Для подробной информации о том, какие технологии участвуют в написании JavaScript для веб, смотрите обзорную статью JavaScript technologies overview.

Каким образом доступен DOM?
---------------------------

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

При создании сценария с использованием элемента `<script>`, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы `document` или `window` (en-US) для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. различных элементов на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции `alert()` (en-US) объекта `window` (en-US), или использовать более сложные методы DOM, которые создают новое содержимое, как показано в следующем примере:

```html
<body
 onload="window.alert('добро пожаловать на мою домашнюю страницу!');"></body>
```

В следующем примере внутри элемента `<script>` определён код JavaScript, данный код устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создаёт новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:

```html
<html>
  <head>
    <script>
 // запуск данной функции при загрузке документа
 window.onload = function () {
 // создание нескольких элементов
 // в пустой HTML странице
 heading = document.createElement("h1");
 heading\_text = document.createTextNode("Big Head!");
 heading.appendChild(heading\_text);
 document.body.appendChild(heading);
 };
 </script>
  </head>
  <body></body>
</html>
```

Важные типы данных
------------------

Данный раздел предназначен для краткого описания различных типов и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в данном разделе обычно ссылается на узлы как на `element`s, на массивы узлов как на `nodeList`s ( либо просто `element`s ) и на атрибуты узла, просто как на `attribute`s.

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

|  |  |
| --- | --- |
| document |
 Когда член возвращает объект типа document (например, свойство элемента
 ownerDocument возвращает документ к которому он относится), этот объект
 document является собственным корневым объектом. В DOM document
 Reference разделе описан объект document.element
  |
| element |
 Обозначает элемент или узел типа element, возвращаемый членом DOM API.
 Вместо того, чтобы говорить, что метод document.createElement()
 возвращает ссылку на node, мы просто скажем, что этот элемент возвращает
 element, который просто был создан в DOM. Объекты element реализуют DOM
 element интерфейс и также более общий Node интерфейс. Оба интерфейса
 включены в эту справку.nodeList
  |
| NodeList |
 Массив элементов, как тот, что возвращается методом
 Document.getElementsByTagName(). Конкретные элементы в массиве
 доступны по индексу двумя способами:
 * list.item(1)
* list[1]

 Эти способы эквивалентны. В первом способе item() - единственный метод
 объекта NodeList. Последний использует обычный синтаксис массивов,
 чтобы получить второе значение в списке.
  |
| attribute |
 Когда attribute возвращается членом API (например, метод
 createAttribute()) - это будет ссылка на объект, который предоставляет
 специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты - это
 узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком
 виде.
  |
| namedNodeMap |
 namedNodeMap подобна массиву, но элементы доступны по имени или индексу.
 Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не
 имеют определённого порядка в списке. Этот тип данных имеет метод item()
 для этих целей и вы можете также добавлять и удалять элементы из
 namedNodeMap
  |

DOM-интерфейсы (DOM interfaces)
-------------------------------

Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий `HTML form` элемент, берёт своё свойство **`name`** из интерфейса `HTMLFormElement`, а свойство **`className`** - из интерфейса `HTMLElement`. В обоих случаях свойство, которое вы хотите, находится в этом объекте формы.

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

### Интерфейсы и объекты (Interfaces and objects)

Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный HTML Table Element Interface, который включает такие методы как `createCaption` и `insertRow`. Но так как это таблица - это ещё и HTML-элемент, `table` реализует интерфейс `Element`, описанный в разделе DOM `element` Reference. Наконец, так как HTML-элемент (в смысле DOM) - это узел (`node)` в дереве, которое составляет объектную модель для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс `Node`, из которого происходит `Element`.

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

```js
var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for (var i = 0; i < tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if (tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1";
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
```

### Основные интерфейсы в DOM (Core interfaces in the DOM)

Этот раздел перечисляет несколько самых распространённых интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчёт видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространённые части API использованы в большинстве примеров раздела DOM Examples в конце этой справки.

`Document, window` - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект `window` представляет что-то вроде браузера, а объект `document` - корень самого документа. `Element` наследуется от общего интерфейса `Node`, и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом `table` в предыдущем случае.

Ниже представлен краткий список распространённых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:

* `document.getElementById(id)`
* `document.getElementsByTagName(name)`
* `document.createElement(name)`
* `parentNode.appendChild(node)`
* `element.innerHTML`
* `element.style.left`
* `element.setAttribute`
* `element.getAttribute`
* `element.addEventListener`
* `window.content` (en-US)
* `window.onload` (en-US)
* `window.dump` (en-US)
* `window.scrollTo`
Тестирование DOM API
--------------------

Этот документ содержит примеры для каждого интерфейса, который вы можете использовать в своей разработке. В некоторых случаях примеры - полноценные веб-страницы с доступом к DOM в элементе `<script>,` также перечислены элементы, необходимые чтобы запустить скрипт в форме, и HTML-элементы, над которыми будут производиться операции DOM. Когда встречается такой случай, можно просто копировать и вставить пример в новый HTML-документ, сохранить и запустить его в браузере.

Есть случаи, однако, где примеры более лаконичные. Чтобы запустить примеры, которые лишь демонстрируют основы взаимодействия интерфейсов с HTML-элементами, вы можете подготовить тестовую страницу, в которую будете помещать функции внутрь скриптов. Следующая очень простая веб-страница содержит элемент `<script>` в заголовке, в который вы можете поместить функции, чтобы протестировать интерфейс. Страница содержит несколько элементов с атрибутами, которые можно возвращать, устанавливать или, другими словами, манипулировать и содержит пользовательский интерфейс, необходимый, чтобы вызывать нужные функции из браузера.

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

```html
<html>
  <head>
    <title>DOM Tests</title>
    <script type="application/javascript">
 function setBodyAttr(attr, value) {
 if (document.body) eval("document.body." + attr + '="' + value + '"');
 else notSupported();
 }
 </script>
  </head>
  <body>
    <div style="margin: .5in; height: 400;">
      <p>
        <b><tt>text</tt></b>
      </p>
      <form>
        <select
 onChange="setBodyAttr('text',
 this.options[this.selectedIndex].value);">
          <option value="black">black</option>
          <option value="darkblue">darkblue</option>
        </select>
        <p>
          <b><tt>bgColor</tt></b>
        </p>
        <select
 onChange="setBodyAttr('bgColor',
 this.options[this.selectedIndex].value);">
          <option value="white">white</option>
          <option value="lightgrey">gray</option>
        </select>
        <p>
          <b><tt>link</tt></b>
        </p>
        <select
 onChange="setBodyAttr('link',
 this.options[this.selectedIndex].value);">
          <option value="blue">blue</option>
          <option value="green">green</option>
        </select>
        <small>
          <a href="http://www.brownhen.com/dom\_api\_top.html" id="sample">
            (sample link)</a
 ></small
 ><br />
      </form>
      <form>
        <input type="button" value="version" onclick="ver()" />
      </form>
    </div>
  </body>
</html>
```

Другие статьи
-------------

* DOM Reference
* Введение в DOM
* События и DOM (Events and the DOM)
* Примеры (Examples)


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

Audio()
=======

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

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

audioObj = new Audio(url);
```

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

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

Необязательный параметр `DOMString`, содержащий URL-адрес аудиофайла, который будет связан с новым аудиоэлементом.

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

Новый `HTMLAudioElement` объект, настроенный для воспроизведения файла, указанного в `url`. Свойство `preload` нового объекта имеет значение по умолчанию `auto`, а его свойство `src` — указанный URL-адрес или `null`, если адрес не указан. Если указан URL-адрес, браузер начинает *асинхронно* загружать медиаресурс перед возвратом нового объекта.

Примечания по использованию
---------------------------

Вы также можете использовать другие методы создания элементов, такие как метод `createElement()` объекта `document`, для создания нового `HTMLAudioElement` объекта.

### Определение, когда воспроизведение может начаться

Существует три способа определить насколько аудио-файл загружен, чтобы начать воспроизведение:

* Проверьте значение свойства `readyState` (en-US). Если оно равняется `HTMLMediaElement.HAVE_FUTURE_DATA`, значит загружено достаточно данных, чтобы начать воспроизведение и проиграть хотя бы короткое время. Если `HTMLMediaElement.HAVE_ENOUGH_DATA` — доступно достаточно данных, чтобы воспроизводить аудио до конца без прерываний, учитывая текущую скорость загрузки.
* Прослушайте событие `canplay` (en-US). Оно отправляется элементу `<audio>`, когда достаточно данных для воспроизведения (хотя возможны прерывания).
* Прослушайте событие `canplaythrough` (en-US). Оно отправляется, когда предполагается, что аудио должно воспроизводиться до конца без прерываний.

Лучший подход, основанный на событии:

```js
myAudioElement.addEventListener("canplaythrough", (event) => {
  /\* аудио может быть воспроизведено; проиграть, если позволяют разрешения \*/
  myAudioElement.play();
});
```

### Использование памяти и управление

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

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

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

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

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

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

* Web media technologies (en-US)
* HTML-элемент, реализующий этот интерфейс: `<audio>`.


Захват кадров с WebRTC - Интерфейсы веб API

Захват кадров с WebRTC
======================

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

![Uz WebRTC balstīta attēla uztveršanas lietotne - kreisajā pusē un bez tīmekļa kameras uzņemšanas video straumē un poga](/ru/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos/web-rtc-demo.png)

Перейдите непосредственно к коду на Github , при желании.

Разметка HTML
-------------

Наш HTML интерфейс состоит из двух секций : панель отображения видео потока, из которого будет производиться захват и панель отображения результата захвата. Каждая панель имеет свой элемент `<div>`, для облегчения стилизации и управления.

Первая панель слева содержит два компонента : элемент `<video>` , который будет получать поток, отводимый с камеры, и элемент `<button>`, который будет использоваться пользователем для активации захвата видео кадра.
```

  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo</button>
  </div>
```

Все это просто, и мы увидим как они связаны между собой, когда обратимся к коду JavaScript .

В разметке имеется элемент `<canvas>` , который сохраняет захваченный кадр, который может быть дополнительно обработан и конвертируется в выходной файл изображения. Элемент`canvas`является скрытым, в его стиле свойство `display``:none`, во избежании поломки интерфейса, где пользователю совершенно не обязательно видеть служебные элементы.

Для отображения пользователю результата захвата кадра, в интерфейсе расположен элемент `<img>`.
```

  <canvas id="canvas">
  </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box.">
  </div>
```

Вот и все, что касается HTML. Остальное - просто пух макета страницы и немного текста, предлагающего ссылку на эту страницу.

Код JavaScript
--------------

Посмотрим на JavaScript code. Разобьём его на части, для упрощения объяснения.

### Инициализация

Начнём с обёртки всего скрипта в анонимную функцию, во избежании конфликтов глобальных переменных, затем инициализируем различные нужные переменные.
```

(function() {
  var width = 320;    // Этим создадим ширину фотографии
  var height = 0;    // Это будет вычисляться на основе входящего потока

  var streaming = false;

  var video = null;
  var canvas = null;
  var photo = null;
  var startbutton = null;
```

Все переменные выше:

`width`

Какой бы не был размер входящего видео, мы намерены масштабировать результирующее изображение к ширине в 320 px.

`height`

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

`streaming`

Указывает на текущую активность видеопотока.

`video`

Будет содержать ссылку на элемент `<video>` после загрузки страницы.

`canvas`

Содержит ссылку на элемент `<canvas>` после загрузки страницы.

`photo`

Содержит ссылку на элемент `<img>` после загрузки страницы.

`startbutton`

Содержит ссылку на элемент `<button>` после загрузки страницы, используется для старта захвата.

### Функция startup()

Функция `startup()` запускается, когда страница закончила загрузку, благодаря установке `window.addEventListener()` (en-US). Работа функции состоит в том, что бы запросить доступ у пользователя к его камере, инициализировать элемент `<img>` в значение по умолчанию, и установить обработчики событий, необходимых для получения каждого видеокадра с камеры, запускать захват изображения, при нажатии на кнопку.

#### Получаем ссылки на элементы

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

  function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton');
```

#### Получаем медиапоток

Следующая задача - получение медиапотока:
```

    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function(stream) {
        video.srcObject = stream;
        video.play();
    })
    .catch(function(err) {
        console.log("An error occurred: " + err);
    });
```

Здесь мы называем метод `MediaDevices.getUserMedia()` , запрашивая медиапоток без аудиопотока (`audio : false`). Он возвращает промис, на котором мы определяем методы успешного и не успешного выполнений.

Успешное выполнение промиса передаёт объект потока( `stream` ) в качестве параметра функции метода `then()`., который присваивается свойству `srcObject` элемента `<video>`, направляя поток в него.

Как только поток связан с элементом `<video>` , запускаем его воспроизведение, вызовом метода `HTMLMediaElement.play()`.

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

#### Обработка события начала воспроизведения

После момента вызова метода `HTMLMediaElement.play()` на элементе `<video>`, возникает промежуток времени до начала воспроизведения видеопотока. Для недопущения блокирования интерфейса пользователя в это промежуток, нужно установить обработчик события `canplay (en-US)` элемента `video` , который сработает, когда элемент начнёт воспроизведение видеопотока. В этот момент все свойства элемента `video` конфигурируются на основе формата потока.
```

    video.addEventListener('canplay', function(ev){
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth/width);

        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    }, false);
```

Функциональность обработчика не будет запущена, если он запускается повторно. Это отслеживает переменная `streaming` , которая содержит значение `false` при первом запуске обработчика.

Если это действительно первый запуск, мы устанавливаем высоту видео на основе разницы в размере между фактическим размером видео - `video.videoWidth` и шириной, на которую мы собираемся его визуализировать - `width`

Наконец, свойства `width` и `height` элементов `video` и `canvas` устанавливаются так, чтобы соответствовать друг другу, вызывая метод `Element.setAttribute()` на каждом из двух свойств каждого элемента, и, при необходимости, устанавливая ширину и высоту. Наконец, мы установили для переменной `streaming` значение `true`, чтобы предотвратить случайное повторное выполнение этого установочного кода.

#### Обработка нажатий кнопки

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

    startbutton.addEventListener('click', function(ev){
      takepicture();
      ev.preventDefault();
    }, false);
```

Метод прост, он вызывает функцию `takepicture()`, определяемую ниже в секции Capturing a frame from the stream, затем вызывает метод `Event.preventDefault()` на полученном объекте события, для предотвращения действия обработки события более одного раза.

#### Завершение метода startup()

Ещё пара строк кода в методе `startup()`:
```

    clearphoto();
  }
```

Вызов метода `clearphoto()` описывается в секции Clearing the photo box.

### Отчистка бокса для фотографии

Очистка бокса фотографии включает создание изображения, а затем преобразование его в формат, используемый элементом `<img>`, который отображает последний снятый кадр. Код ниже:
```

  function clearphoto() {
    var context = canvas.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }
```

Начнём с получения ссылки на скрытый элемент `<canvas>`, который мы используем для рендеринга за пределами экрана. Затем мы устанавливаем свойство `fillStyle` в `#AAA` ( светло-серый) и заполняем весь холст этим цветом, вызывая метод `fillRect()`.

Наконец, в этой функции мы конвертируем `canvas` в изображение PNG и вызываем метод ``photo.setAttribute()`` отображая захваченный цветовой фон в элементе изображения (бокса для фотографии).

### Захват кадра из видеопотока

Последняя функция, требующая определения и являющаяся основным смыслом всего примера - `takepicture()` , которая захватывает текущий видеокадр, конвертирует его в формат PNG, и отображает его в блоке отображения кадра. Код её ниже:
```

  function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    } else {
      clearphoto();
    }
  }
```

Как и в случае, когда нам нужно работать с содержимым `canvas`, мы начинаем с `2D drawing context` для скрытого `canvas`.

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

**Примечание:** Используется факт того, что интерфейс `HTMLVideoElement` похож на интерфейс `HTMLImageElement` для любых API , которые принимают `HTMLImageElement` в качестве параметра, с текущим кадром видео, представленным как содержимое изображения.

Как только `canvas` будет содержать захваченное видео, конвертируем его в PNG формат, вызывая метод `HTMLCanvasElement.toDataURL()` на нем; наконец вызываем метод `photo.setAttribute()` отображая захваченное изображение в элементе изображения (бокса фотографии).

Если подходящее изображение не доступно (то есть, `width` и `height` равны 0), отчищаем содержимое элемента изображения, вызывая метод `clearphoto()`.

Приколы с фильтрами
-------------------

Поскольку мы снимаем изображения с веб-камеры пользователя, захватывая кадры из элемента `<video>` , можно легко применить фильтры и забавные эффекты к элементу video. Оказывается, любые CSS-фильтры, которые вы применяете к элементу с помощью свойства `filter`, влияют на захваченную фотографию.Эти фильтры могут варьироваться от простых (делая изображение черно-белым) до экстремальных (размытие по Гауссу и вращение оттенка).

Вы можете экспериментировать с этими эффектами, используя, например, инструмент разработчика FirefoxYou редактор стилей; смотрим Редактирование с CSS фильтрами (en-US) о подробностях выполнения.

Использование определённых устройств
------------------------------------

При необходимости вы можете ограничить набор разрешённых источников видео, определённым устройством или набором устройств. Для этого нужно вызвать метод `navigator.mediaDevices.enumerateDevices()` (en-US). Когда промис разрешиться массивом объектов `MediaDeviceInfo` (en-US) , описывающих доступные устройства , выберите те, которым хотите разрешить доступ и укажите соответствующий идентификатор устройства `deviceId` (en-US) или несколько `deviceId` в объекте `MediaTrackConstraints` (en-US) , переданном в `getUserMedia()`.

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

* Пробуем пример
* Примеры на Github
* `Navigator.mediaDevices.getUserMedia()` (en-US)
* Использование изображений
* `CanvasRenderingContext2D.drawImage()`


FileReader.onabort - Интерфейсы веб API

FileReader.onabort
==================

Значением свойства **`FileReader.onabort`** является функция которая вызывается в случае если срабатывает событие abort (en-US), например когда процесс чтения файла прерывается по каким-либо причинам.

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

```js
reader.onabort = function() { ... };
```


FileReader.error - Интерфейсы веб API

FileReader.error
================

Сводка
------

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

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

var error = instanceOfFileReader.error
```

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

`DOMError` (en-US) содержит соответствующую ошибку. В Chrome 48+/Firefox 58+ значение возвращает `DOMException` (en-US) так как `DOMError` был удалён из DOM-стандарта.

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

| Specification |
| --- |
| File API # dom-filereader-error |

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

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

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

* `FileReader`


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

FileReader.readAsArrayBuffer()
==============================

Метод **`readAsArrayBuffer`** используется для чтения содержимого файла, представленного как `Blob` или `File`. Когда операция чтения завершается, `readyState` (en-US) принимает значение `DONE`, и наступает событие `loadend (en-US)`. В то же время в `result` (en-US) помещается информация о файле в виде `ArrayBuffer`.

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

instanceOfFileReader.readAsArrayBuffer(blob);
```

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

`blob`

`Blob` или `File`, информацию из которого необходимо прочитать.

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

| Specification |
| --- |
| File API # readAsArrayBuffer |

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

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

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

* `FileReader`


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

FileReader()
============

Конструктор **`FileReader()`** создаёт новый FileReader.

Дополнительные сведения об использовании `FileReader`, смотрите в разделе Использование файлов из веб-приложений.

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

```js
var reader = new FileReader();
```

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

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

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

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

```js
function printFile(file) {
  var reader = new FileReader();
  reader.onload = function (evt) {
    console.log(evt.target.result);
  };
  reader.readAsText(file);
}
```

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

| Specification |
| --- |
| File API # filereaderConstrctr |

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

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


FileReader: readAsDataURL() method - Интерфейсы веб API

FileReader: readAsDataURL() method
==================================

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

Метод `readAsDataURL()` интерфейса `FileReader` используется для чтения содержимого `Blob` или `File`. После завершения операции свойство `readyState` (en-US) принимает значение `DONE` и возникает событие `loadend` (en-US). В то же время атрибут `result` (en-US) будет содержать данные файла, закодированные в `base64`-строку в виде Data URL.

>
> **Note:** Атрибут `result` (en-US) не может быть напрямую декодирован как Base64 без предварительного удаления объявления `Data URL`, которое предшествует данным в кодировке `base64`. Чтобы получить только строку в кодировке `base64`, необходимо удалить `data:*/*;base64,` из результата.
>
>
>

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

```js
readAsDataURL(blob)
```

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

`blob`

`Blob` или `File` для чтения.

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

Нет (`undefined`).

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

### Чтение одного файла

#### HTML

```html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Предварительный просмотр изображения" />
```

#### JavaScript

```js
function previewFile() {
  const preview = document.querySelector("img");
  const file = document.querySelector("input[type=file]").files[0];
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    () => {
      // Конвертация изображения в base64-строку
      preview.src = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}
```

#### Результат

### Чтение нескольких файлов

#### HTML

```html
<input id="browse" type="file" multiple />
<div id="preview"></div>
```

#### JavaScript

```js
function previewFiles() {
  const preview = document.querySelector("#preview");
  const files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // Проверяем, что `file.name` соответствует необходимым расширениям
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      const reader = new FileReader();

      reader.addEventListener(
        "load",
        () => {
          const image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = reader.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    Array.prototype.forEach.call(files, readAndPreview);
  }
}

const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);
```

#### Результат

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

| Specification |
| --- |
| File API # readAsDataURL |

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

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

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

* `FileReader`
* `URL.createObjectURL()`


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

FileReader.readAsBinaryString()
===============================

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

Метод `readAsBinaryString` используется для начала считывания содержимого определённого как `Blob` или `File`. Когда операция чтения завершится `readyState` (en-US) становится `DONE`, и срабатывает `loadend (en-US)` . В это время атрибут `result` (en-US) содержит сырые бинарные данные из файла.

Заметьте, что этот метод устарел (12 July 2012 Working Draft from the W3C.)

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

instanceOfFileReader.readAsBinaryString(blob);
```

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

`blob`

The `Blob` or `File` from which to read.

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

```js
var canvas = document.createElement("canvas");
var height = 200;
var width = 200;

canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext("2d");

ctx.strokeStyle = "#090";
ctx.beginPath();
ctx.arc(width / 2, height / 2, width / 2 - width / 10, 0, Math.PI \* 2);
ctx.stroke();

canvas.toBlob(function (blob) {
  var reader = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result);
  };

  reader.readAsBinaryString(blob);
});
```

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

Этот метод был удалён из стандарта FileAPI. Вместо него следует использовать `FileReader.readAsArrayBuffer()`.

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

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

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

* `FileReader`


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

FileReader.readAsText()
=======================

Метод **`readAsText()`** используется для чтения содержимого указанного `Blob` или `File`. Когда операция закончится, `readyState` (en-US) примет значение `DONE` и будет вызвано событие `loadend (en-US)`. В то же время, атрибут `result` (en-US) будет содержать данные файла как строку.

Syntax
------
```

instanceOfFileReader.readAsText(blob[, encoding]);
```

### Parameters

`blob`

`Blob` или `File` которые следует прочитать.

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

Строка, обозначающая кодировку используемую для возвращаемых данных. По умолчанию используется UTF-8, если параметр не указан.

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

| Specification |
| --- |
| File API # readAsDataText |

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

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

See also
--------

* `FileReader`


HTMLSelectElement.selectedIndex - Интерфейсы веб API

HTMLSelectElement.selectedIndex
===============================

**`HTMLSelectElement.selectedIndex`** показывает порядковый номер первого выбранного элемента ``<option>``. Значение -1 означает, что ни один из элементов не выбран.

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

var index = selectElem.selectedIndex;
selectElem.selectedIndex = index;
```

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

### HTML

```html
<p id="p">Индекс выбранного элемента: 0</p>

<select id="select">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
```

### JavaScript

```js
var selectElem = document.getElementById("select");
var pElem = document.getElementById("p");

// Когда выбран новый элемент <option>
selectElem.addEventListener("change", function () {
  var index = selectElem.selectedIndex;
  // Добавить данные в <p>
  pElem.innerHTML = "selectedIndex: " + index;
});
```

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

| Specification |
| --- |
| HTML Standard # dom-select-selectedindex-dev |

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

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


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

HTMLSelectElement.setCustomValidity()
=====================================

Baseline 2023
-------------

Newly availableSince March 2023, 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
Метод **`HTMLSelectElement.setCustomValidity()`** устанавливает специальное сообщение для выбранного элемента. Если элемент не имеет пользовательской ошибки в параметре укажите пустую строку.

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

```js
selectElt.setCustomValidity(string);
```

### Параметр

* *Строка* `DOMString` содержащая сообщение об ошибке.
Спецификация
------------

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

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

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

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

* Проверка(валидация) форм. (en-US)


AudioContext.currentTime - Интерфейсы веб API

AudioContext.currentTime
========================

Поле currentTime принадлежит `AudioContext` и возвращает время с момента создания AudioContext. Может использоваться при планировании воспроизведения или визуализации. Поле currentTime является не перезаписываемым и не может быть остановлено или сброшено.

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

```js
var audioCtx = new AudioContext();
console.log(audioCtx.currentTime);
```

### Тип данных

A double.

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

**Примечание:** для большего понимания реализации Web Audio, посмотрите наши Web Audio Demos на MDN Github repo, like panner-node. Попробуйте ввести `audioCtx.currentTime` в консоли вашего браузера.

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
// Older webkit/blink browsers require a prefix

...

console.log(audioCtx.currentTime);
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-currenttime |

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

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

See also
--------

* Using the Web Audio API (en-US)


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

AudioContext.createPanner()
===========================

Метод `createPanner()` интерфейса `AudioContext` применяется для создания нового `PannerNode`, который используется для размещения аудиопотока в виртуальном 3D пространстве.

The panner node is spatialized in relation to the AudioContext's `AudioListener` (en-US) (defined by the `AudioContext.listener` (en-US) attribute), which represents the position and orientation of the person listening to the audio.

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

```js
var audioCtx = new AudioContext();
var panner = audioCtx.createPanner();
```

### Возврат

A `PannerNode`.

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

Ниже можно увидеть пример использования `AudioListener` (en-US), `PannerNode` и метода `createPanner()` для управления пространством объёмного звука. Обычно определяется положение в трёхмерном пространстве, изначально занимаемое обработчиком (listener) и источником звука (panner), а затем, при использовании приложения, обновляется позиция одного из них или обоих. Например, вы можете перемещать персонажа внутри игрового мира, и желательно чтобы передача звука изменялась реалистично, по мере приближения или отдаления персонажа относительно источника звука, вроде стереопроигрывателя. В этом примере можно видеть, что все это управляется функциями `moveRight()`, `moveLeft()`, и т.п., которые устанавливают новые значения для положения паннера через функцию `PositionPanner()`.

Чтобы увидеть полную реализацию ознакомьтесь с нашим примером panner-node (просмотрите весь список примеров) — эта демонстрация перенесёт вас в 2.5D "Room of metal" (2,5-мерную "металлическую комнату"), где можно проиграть трек на бумбоксе и затем походить вокруг него и посмотреть как изменяется звук!

Note how we have used some feature detection to either give the browser the newer property values (like `AudioListener.forwardX` (en-US)) for setting position, etc. if it supports those, or older methods (like `AudioListener.setOrientation()` (en-US)) if it still supports those but not the new properties.

```js
// set up listener and panner position information
// установка сведений обработчика и положении panner'а
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var xPos = Math.floor(WIDTH / 2);
var yPos = Math.floor(HEIGHT / 2);
var zPos = 295;

// define other variables (определяем другие переменные)

var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();

var panner = audioCtx.createPanner();
panner.panningModel = "HRTF";
panner.distanceModel = "inverse";
panner.refDistance = 1;
panner.maxDistance = 10000;
panner.rolloffFactor = 1;
panner.coneInnerAngle = 360;
panner.coneOuterAngle = 0;
panner.coneOuterGain = 0;

if (panner.orientationX) {
  panner.orientationX.value = 1;
  panner.orientationY.value = 0;
  panner.orientationZ.value = 0;
} else {
  panner.setOrientation(1, 0, 0);
}

var listener = audioCtx.listener;

if (listener.forwardX) {
  listener.forwardX.value = 0;
  listener.forwardY.value = 0;
  listener.forwardZ.value = -1;
  listener.upX.value = 0;
  listener.upY.value = 1;
  listener.upZ.value = 0;
} else {
  listener.setOrientation(0, 0, -1, 0, 1, 0);
}

var source;

var play = document.querySelector(".play");
var stop = document.querySelector(".stop");

var boomBox = document.querySelector(".boom-box");

var listenerData = document.querySelector(".listener-data");
var pannerData = document.querySelector(".panner-data");

leftBound = -xPos + 50;
rightBound = xPos - 50;

xIterator = WIDTH / 150;

// listener will always be in the same place for this demo
// в этом демо обработчик всегда находится на одном и том же месте

if (listener.positionX) {
  listener.positionX.value = xPos;
  listener.positionY.value = yPos;
  listener.positionZ.value = 300;
} else {
  listener.setPosition(xPos, yPos, 300);
}

listenerData.innerHTML =
  "Listener data: X " + xPos + " Y " + yPos + " Z " + 300;

// panner will move as the boombox graphic moves around on the screen
// паннер будет перемещаться по экрану за перемещением бумбокса
function positionPanner() {
  if (panner.positionX) {
    panner.positionX.value = xPos;
    panner.positionY.value = yPos;
    panner.positionZ.value = zPos;
  } else {
    panner.setPosition(xPos, yPos, zPos);
  }
  pannerData.innerHTML = "Panner data: X " + xPos + " Y " + yPos + " Z " + zPos;
}
```

**Примечание:** In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of fiddly math involved, but you will soon get used to it with a bit of experimentation.

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createpanner |

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

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

See also
--------

* Using the Web Audio API (en-US)


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

Blob.slice()
============

Метод **`Blob.slice()`** используется для создания нового объекта `Blob`, содержащего данные в указанном диапазоне байтов исходника `Blob`.

**Примечание:** Помните, что метод `slice()` имеет префиксы в некоторых браузерах и версиях: `blob.mozSlice()` для Firefox 12 и ранних, и `blob.webkitSlice()` для Safari. Старая версия метода `slice()` без префиксов, имела разную семантику, и устарела.

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

var blob = instanceOfBlob.slice([start [, end [, contentType]]]);
```

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

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

Индекс в `Blob` указывающий первый байт, включённый в новый `Blob`. Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта `Blob`. Значение по умолчанию равно 0. Если указать значение `start`, которое больше размера источника `Blob`, размер возвращаемого `Blob` будет равен 0 и не будет содержать данных.

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

Индекс в `Blob` указывающий первый байт, который **не** будет включён в новый `Blob` (т.е. байт с этим индексом не будет включён). Если указать отрицательное значение, это будет рассматриваться, как смещение с конца строки к началу. К примеру, -10 будет 10-ым от последнего байта `Blob`. Значение по умолчанию равно `size`.

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

Тип содержимого нового `Blob`; это будет значение его свойства `type`. Значение по умолчанию - пустая строка.

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

Новый `Blob` объект содержит данные, указанные в источнике `Blob`.

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

| Specification |
| --- |
| File API # dfn-slice |

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

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

See also
--------

* `Blob`
* `BlobBuilder` (en-US)


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

Blob()
======

`Конструктор Blob()` возвращает новый объект `Blob`. Содержимое blob состоит из объединённых значений, переданных в параметре *array*.

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

var aBlob = new Blob( array, options );
```

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

* *array* - массив `Array` из объектов `ArrayBuffer`, `ArrayBufferView` (en-US), `Blob`, `DOMString`, или смесь любых из подобных объектов, которая может быть размещена внутри `Blob`. DOMStrings представлены в кодировке UTF-8.
* *options* is an optional `BlobPropertyBag` dictionary which may specify the following two attributes:
    + `type`, with a default value of `""`, that represents the MIME type of the content of the array that will be put in the blob.
    + `endings`, with a default value of `"transparent"`, that specifies how strings containing the line ending character `\n` are to be written out. It is one of the two values: `"native"`, meaning that line ending characters are changed to match host OS filesystem convention, or `"transparent"`, meaning that endings are stored in the blob without change.
    Non-standard
Пример
------

```js
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single DOMString
var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // the blob
```

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

| Specification |
| --- |
| File API # constructorBlob |

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

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

See also
--------

* The deprecated `BlobBuilder` (en-US) which this constructor replaces.


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

ServiceWorkerContainer.controller
=================================

Свойство **`controller`** интерфейса `ServiceWorkerContainer` возвращает объект `ServiceWorker`, в случае, если service worker активирован. Данное свойство возвращает `null`, если страница была обновлена с помощью *Shift* + refresh или на ней отсутствует активный service worker.

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

var myController = navigator.serviceWorker.controller;
```

### Значение

Объект `ServiceWorker`.

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

```js
if ("serviceWorker" in navigator) {
  // Проверяем, находится ли данная страница под управлением service worker.
  if (navigator.serviceWorker.controller) {
    console.log(
      `Эта страница сейчас контролируется ${navigator.serviceWorker.controller}`,
    );
  } else {
    console.log("Эта страница не контролируется service worker.");
  }
} else {
  console.log("Данный браузер не поддерживает Service Worker API.");
}
```

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

| Specification |
| --- |
| Service Workers # navigator-service-worker-controller |

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

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


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

ServiceWorkerContainer.register()
=================================

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

**`register()`** метод `ServiceWorkerContainer` интерфейса который создаёт и обновляет `ServiceWorkerRegistration` для указанного `URL` js скрипта.

Если удачно, service worker registration связывается по указанному URL js скрипта , который соответственно используется для проверки совпадения при навигации по URL. Если метод не возвращает `ServiceWorkerRegistration`, он возвращает `Promise`. Есть возможность вызвать этот метод без проверки на условие, т.е. нет необходимости сначала проверять существует ли активная регистрация в данный момент или нет.

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

```js
ServiceWorkerContainer.register(scriptURL, options)
  .then(function(ServiceWorkerRegistration) { ... });
```

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

`scriptURL`

URL скрипта service worker - а.

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

Опции — это объект необходимый для регистрации service worker-a. В данный момент доступные опции:

* `scope`: `USVString` (en-US) представляет собой URL, который определяет scope service worker-a; Какой диапазон URL может контролировать service worker. Это обычно относительный URL. Значение по умолчанию — это URL, который соответствует корню, т.е. './', используя директорию расположения js скрипта service worker-а как основу.

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

`Promise` (en-US) который резолвится в `ServiceWorkerRegistration` объект.

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

Примеры кода, приведённые ниже, должны рассматриваться вместе для лучшего понимания того, как применяется scope service worker-ов к конкретной странице.

Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать `example.com/index.html` и страницы, расположенные "глубже", например `example.com/product/description.html`.

```js
if ("serviceWorker" in navigator) {
  // Регистрация service worker-а, расположенного в корне сайта
  // за счёт использования дефолтного scope (не указывая его)
  navigator.serviceWorker
    .register("/sw.js")
    .then(function (registration) {
      console.log("Service worker зарегистрирован:", registration);
    })
    .catch(function (error) {
      console.log("Ошибка при регистрации service worker-а:", error);
    });
} else {
  // Текущий браузер не поддерживает service worker-ы.
  console.log("Текущий браузер не поддерживает service worker-ы");
}
```

Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице `example.com/product/description.html`, то scope `./` будет означать, что service worker работает только со страницами внутри `example.com/product`. Если необходимо зарегистрировать service worker на `example.com/product/description.html`, и вы хотите, чтобы он обслуживал и корень, `example.com`, то scope лучше не указывать совсем, как в примере выше.

```js
if ("serviceWorker" in navigator) {
  // Регистрация service worker-а, расположенного в корне сайта
  // с указанием более строгого scope
  navigator.serviceWorker
    .register("/sw.js", { scope: "./" })
    .then(function (registration) {
      console.log("Service worker зарегистрирован:", registration);
    })
    .catch(function (error) {
      console.log("Ошибка при регистрации service worker-а:", error);
    });
} else {
  console.log("Текущий браузер не поддерживает service worker-ы.");
}
```

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

| Specification |
| --- |
| Service Workers # navigator-service-worker-register |

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

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


BackgroundFetchRecord.request - Интерфейсы веб API

BackgroundFetchRecord.request
=============================

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

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

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

Доступное только для чтения свойство **`request`** интерфейса `BackgroundFetchRecord` возвращает информацию о запрашиваемом ресурсе.

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

`Request`.

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

В этом примере отдельный `BackgroundFetchRecord`, возвращается с помощью `BackgroundFetchManager.fetch()`. Значение `request` выводится в консоль.

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("Запись не найдена");
    return;
  }

  console.log(`Запрос`, record.request);
});
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-request |

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

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


BackgroundFetchRecord.responseReady - Интерфейсы веб API

BackgroundFetchRecord.responseReady
===================================

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

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

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

Доступное только для чтения свойство **`responseReady`** интерфейса `BackgroundFetchRecord` возвращает `Promise`, результатом обработки которого будет `Response`.

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

`Promise`, результатом обработки которого будет `Response`.

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

В этом примере отдельный `BackgroundFetchRecord`, возвращается с помощью `BackgroundFetchManager.fetch()`. Значение `responseReady` выводится в консоль.

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("Запись не найдена");
    return;
  }

  const response = await record.responseReady;
  console.log(`Ответ`, response);
});
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-responseready |

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

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