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

VRDisplay.requestPresent()
==========================

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

Метод **`requestPresent()`** объекта реализующего интерфейс `VRDisplay` (en-US) отвечает за начало отображения сцены на VR устройстве, которое представлено этим объектом.

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

```js
vrDisplayInstance.requestPresent(layers).then(function () {
  //Действия после начала отображения сцены
});
```

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

layers

Массив объектов типа `VRLayerInit` (en-US), представляющих собой сцену, которую вы хотите отобразить. На данный момент может быть минимум 0 элементов, максимум - 1.

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

Объект типа Promise, переходящий в состояние "выполнено" в момент начала отображения сцены. Существует ряд правил, касающийся перехода Promise в состояние "выполнено" и в состояние "отклонено":

* Если `VRDisplayCapabilities.canPresent` (en-US) ложно или если массив объектов VRLayer содержит более чем `VRDisplayCapabilities.maxLayers` (en-US) слоёв, произойдёт переход в состояние "отклонено".
* Если объект `VRDisplay` (en-US) уже отображает сцену, то вызов его метода `requestPresent()` обновит массив отображаемых `VRLayer` объектов.
* Если объект `VRDisplay` уже отображает сцену, а вызов метода `requestPresent()` приведёт к возврату Promise в состоянии "отклонено", то отображение сцены прекратится.
* If `requestPresent()` is called outside of an engagement gesture the promise will be rejected unless the `VRDisplay` was already presenting. This engagement gesture is also sufficient to allow `requestPointerLock()` calls until presentation has ended.
Examples
--------

```js
if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then(function (displays) {
    // If a display is available, use it to present the scene
    if (displays.length > 0) {
      vrDisplay = displays[0];
      console.log("Display found");
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener("click", function () {
        if (btn.textContent === "Start VR display") {
          vrDisplay.requestPresent([{ source: canvas }]).then(function () {
            console.log("Presenting to WebVR display");

            // Set the canvas size to the size of the vrDisplay viewport

            var leftEye = vrDisplay.getEyeParameters("left");
            var rightEye = vrDisplay.getEyeParameters("right");

            canvas.width =
              Math.max(leftEye.renderWidth, rightEye.renderWidth) \* 2;
            canvas.height = Math.max(
              leftEye.renderHeight,
              rightEye.renderHeight,
            );

            // stop the normal presentation, and start the vr presentation
            window.cancelAnimationFrame(normalSceneFrame);
            drawVRScene();

            btn.textContent = "Exit VR display";
          });
        } else {
          vrDisplay.exitPresent();
          console.log("Stopped presenting to WebVR display");

          btn.textContent = "Start VR display";

          // Stop the VR presentation, and start the normal presentation
          vrDisplay.cancelAnimationFrame(vrSceneFrame);
          drawScene();
        }
      });
    }
  });
}
```

**Примечание:** You can see this complete code at raw-webgl-example.

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

#### No specification found

No specification data found for `api.VRDisplay.requestPresent`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* WebVR API


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

FormData.has()
==============

Метод **`has()`** из интерфейса `FormData` возвращает логическое значение, указывающее, содержит ли объект `FormData` указанный ключ.

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

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

```js
formData.has(name);
```

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

`name`

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

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

`Boolean` (en-US).

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

Следующий код создаёт пустой объект `FormData`:

```js
var formData = new FormData();
```

В следующем коде показаны результаты проверки существования `username` в объекте `FormData`, до и после добавления значения `username` в `FormData.append`:

```js
formData.has("username"); // Returns false
formData.append("username", "Chris");
formData.has("username"); // Returns true
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-has |

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

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

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

* `XMLHTTPRequest`
* Использование XMLHttpRequest (en-US)
* Использование объекта FormData (en-US)
* `<form>`


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

FormData.values()
=================

The **`FormData.values()`** метод возвращает `iterator` позволяя пройтись по всем значениям в этом объекте. Значения - это `USVString` (en-US) или `Blob` объекты.

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

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

formData.values();
```

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

Возвращает `iterator`.

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

```js
// Create a test FormData object
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the values
for (var value of formData.values()) {
  console.log(value);
}
```

Результат:
```

value1
value2
```

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

#### No specification found

No specification data found for `api.FormData.values`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

* `XMLHTTPRequest`
* Использование XMLHttpRequest (en-US)
* Использование FormData objects (en-US)
* `<form>`


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

FormData.getAll()
=================

**`getAll()`** - метод объекта `FormData`, который возвращает все значения, связанные с ключом в объекте FormData.

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

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

```js
formData.getAll(name);
```

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

`name`

Строка формата `USVString` (en-US), задающая имя ключа.

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

Массив значений типа `FormDataEntryValue` (en-US), привязанных к ключу, переданному в параметре `name`. Если переданный ключ не существует, метод вернёт пустой массив.

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

Эта строка создаст пустой объект FormData:

```js
var formData = new FormData();
```

Можем добавить два `username` при помощи `FormData.append`:

```js
formData.append("username", "Борис");
formData.append("username", "Кирилл");
```

Тогда метод `getAll()` вернёт оба значения username в виде массива:

```js
formData.getAll("username"); // Вернёт ["Борис", "Кирилл"]
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-getall |

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

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

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

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`


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

FormData.append()
=================

Метод **`append()`** из интерфейса `FormData` добавляет новое значение в существующий ключ внутри объекта `FormData`, или создаёт ключ, в случае если он отсутствует.

Разница между `FormData.set` и `append()` в том, что если заданный ключ уже существует, `FormData.set` заменит данные в нем на новые, а `append()` добавит новое значение к остальным в конец.

**Примечание:** Данный метод также доступен в Web Workers.

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

Существует две формы использования данной функции: с двумя и тремя параметрами:

```js
formData.append(name, value);
formData.append(name, value, filename);
```

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

`name`

Имя поля, которое будет содержать данные из `value`.

`value`

Значение поля. В варианте с двумя параметрами, это является `USVString` (en-US), если значение не является строкой, то оно будет в неё конвертировано. В варианте с тремя параметрами это может быть `Blob`, `File`, или `USVString` (en-US), И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.

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

Имя файла которое будет отправлено серверу (`USVString` (en-US)), когда `Blob` или `File` прошёл проверку как второй параметр. Стандартное имя файла для `Blob` объектов это "blob".

**Примечание:** Если вы укажете `Blob` в качестве данных для включения в объект `FormData`, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.

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

Пустота.

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

Данная строка кода создаёт пустой `FormData` объект:

```js
var formData = new FormData(); // Currently empty
```

Вы можете добавлять пару ключ/значение с помощью `FormData.append`:

```js
formData.append("username", "Chris");
formData.append("userpic", myFileInput.files[0], "chris.jpg");
```

Также вы можете использовать обозначения массива для первого аргумента:

```js
formData.append("userpic[]", myFileInput1.files[0], "chris1.jpg");
formData.append("userpic[]", myFileInput2.files[0], "chris2.jpg");
```

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

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-append |

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

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

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

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`


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

FormData.get()
==============

Метод get() из интерфейса `FormData` возвращает первое значение, связанное с переданным ключом из объекта FormData. Если вы ожидаете множественные значения и хотите получить их все, используйте метод getAll().

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

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

formData.get(name);
```

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

`name`

`USVString` (en-US) строка, являющаяся именем ключа, значение которого вы хотите получить.

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

Значение из `FormDataEntryValue` (en-US).

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

Следующий код создаёт пустой объект `FormData`:

```js
var formData = new FormData();
```

Если мы добавим два значения `username,` используя `FormData.append`:

```js
formData.append("username", "Борис");
formData.append("username", "Кирилл");
```

То метод `get()` вернёт только первое добавленное значение `username`:

```js
formData.get("username"); // Вернёт "Борис"
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-get |

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

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

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

* `XMLHTTPRequest`
* Использование XMLHttpRequest (en-US)
* Использование FormData objects (en-US)
* `<form>`


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

FormData.keys()
===============

**`FormData.keys()`** метод возвращает `iterator` позволяя пройтись по всем ключам содержащимся в этом объекте. Ключи являются `USVString` (en-US) объектами.

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

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

formData.keys();
```

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

Возвращает `iterator`.

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

```js
// Create a test FormData object
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the keys
for (var key of formData.keys()) {
  console.log(key);
}
```

Результат:
```

key1
key2
```

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

#### No specification found

No specification data found for `api.FormData.keys`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

* `XMLHTTPRequest`
* Использование XMLHttpRequest (en-US)
* Использование объектов FormData (en-US)
* `<form>`


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

FormData.entries()
==================

Метод **`FormData.entries()`** возвращает `iterator`, позволяя пройтись по всем ключам/значениям в этом объекте. Ключ каждой пары - это объект `USVString` (en-US), значение - это `USVString` (en-US) или `Blob`.

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

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

formData.entries();
```

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

Возвращает `iterator`.

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

```js
// Create a test FormData object
var formData = new FormData();
formData.append("key1", "value1");
formData.append("key2", "value2");

// Display the key/value pairs
for (var pair of formData.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}
```

Результат:
```

key1, value1
key2, value2
```

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

#### No specification found

No specification data found for `api.FormData.entries`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`


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

FormData()
==========

Конструктор **`FormData()`** создаёт новые объект `FormData`, если проще - HTML-форму\*\*.\*\*

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

```js
var formData = new FormData(form);
```

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

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

Существующая HTML-форма, на основе которой будет создана новая. Если ничего не указано, будет создана пустая форма.

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

```html
<form name="test">
  <input type="text" name="code" value="12345" />
  <input type="submit" value="Отправить" />
</form>
```

```js
var oldForm = document.forms.test,
  formData = new FormData(oldForm);
console.log(formData.get("code"), formData === oldForm);
```

### Методы

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

Добавление нового текстового поля в форму:

```js
formData.append(name, value, filename);
```

Удаление элемента формы:

```js
formData.delete(name);
```

Получение значения элемента формы:

```js
formData.get(name);
```

Проверка на наличие определённого элемента формы:

```js
formData.has(name);
```

Изменение существующего элемента:

```js
formData.set(name, value, filename);
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata |

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

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


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

FormData.set()
==============

Метод set() из интерфейса `FormData` присваивает новое значение существующему ключу внутри объекта `FormData`, или добавляет ключ/значение если до этого они не были установлены.

Разница между `set()` и `FormData.append` в том, что если заданный ключ уже существует, `set()` заменит данные в нем на новые, а `FormData.append` добавит новое значение к остальным в конец.

**Примечание:** Данный метод также доступен в Web Workers.

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

Существует две формы использования данной функции: с двумя и тремя параметрами:

```js
formData.set(name, value);
formData.set(name, value, filename);
```

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

`name`

Имя поля, которому будет присвоен value.

`value`

Значение, присваиваемое полю. В варианте с двумя параметрами, это `USVString` (en-US), если нет, то оно будет конвертировано. В варианте с тремя параметрами это может быть `Blob`, `File`, или `USVString` (en-US), И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.

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

Имя файла, которое будет отправлено серверу (`USVString` (en-US)), когда `Blob` или `File` прошёл проверку как второй параметр. Стандартное имя файла для `Blob` объектов это "blob".

**Примечание:** Если вы укажете `Blob` в качестве данных для включения в объект `FormData`, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.

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

Следующий код создаёт пустой `FormData` объект:

```js
var formData = new FormData(); // Сейчас пустой
```

Вы можете установить для него пару ключ/значение, используя `FormData.set`:

```js
formData.set("username", "Chris");
formData.set("userpic", myFileInput.files[0], "chris.jpg");
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-set |

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

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

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`


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

FormData.delete()
=================

Метод **`delete()`** интерфейса `FormData` удаляет ключ и его значение(-ия) из объекта `FormData`.

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

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

```js
formData.delete(name);
```

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

`name`

Имя ключа для удаления.

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

Нет.

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

Следующий код создаёт объект `FormData` и заполняет его парами "ключ"/"значение" из формы:

```js
var formData = new FormData(myForm);
```

Вы можете удалить пару "ключ"/"значение" используя `delete()`:

```js
formData.delete("username");
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # dom-formdata-delete |

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

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

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`


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

BeforeInstallPromptEvent.prompt()
=================================

Метод **`prompt()`** интерфейса `BeforeInstallPromptEvent` позволяет разработчику показывать подсказку об установке в любое время по своему выбору.

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

BeforeInstallPromptEvent.prompt()
```

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

None.

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

Пустой `Promise`.

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

var isTooSoon = true;
window.addEventListener("beforeinstallprompt", function(e) {
  if (isTooSoon) {
    e.preventDefault(); // Предотвращает быстрое отображение
    // Запросить позже:
    setTimeout(function() {
      isTooSoon = false;
      e.prompt(); // Выбрасывает, если вызывается более одного раза или по умолчанию не предотвращено (not prevented)
    }, 10000);
  }

  // Событие было повторно отправлено в ответ на наш запрос
  // ...
});
```

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

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


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

WorkerGlobalScope.importScripts()
=================================

Метод **`importScripts()`** интерфейса `WorkerGlobalScope` (en-US) синхронно импортирует один или несколько скриптов, добавляя их в область видимости сервис-воркера.

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

```js
self.importScripts('foo.js');
self.importScripts('foo.js', 'bar.js', ...);
```

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

Разделённый запятыми объект `DOMString` скриптов, которые должны быть импортированы. Пути к скриптам указываются относительно URL HTML документа.

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

*Нет.*

### Выбрасываемые исключения

| Исключение | Описание |
| --- | --- |
| `NetworkError` | Добавленные скрипты имеют неверные MIME тип (то есть не `text/javascript`). |

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

Если вы хотите использовать некоторую функциональность, определённую файлом `foo.js`, необходимо сделать следующее:

```js
importScripts("foo.js");
```

`importScripts()` и `self.importScripts()` по сути эквивалентны — и то и другое вызывает функцию `importScripts()` в области видимости воркера.

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

| Specification |
| --- |
| HTML Standard # dom-workerglobalscope-importscripts-dev |

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

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

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

`WorkerGlobalScope` (en-US)


AudioNode.context - Интерфейсы веб API

AudioNode.context
=================

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

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

var aContext = anAudioNode.context;
```

### Значение

Объект `AudioContext`.

Example
-------

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.context;
```

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

| Specification |
| --- |
| Web Audio API # dom-audionode-context |

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

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

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

* Использование Web Audio API (en-US)


AudioNode.channelCount - Интерфейсы веб API

AudioNode.channelCount
======================

`channelCount` свойство интерфейса `AudioNode` представляющее собой целое число использующееся для определения того, сколько каналов участвуют для up-mixing and down-mixing (en-US) соединений для любого входа узла.

`Использование и точное значение channelCount`'s зависит от `AudioNode.channelCountMode` (en-US):

* Игнорируется если значение `channelCountMode` равно `max`.
* Используется в качестве максимального значения, если значение `channelCountMode` равно `clamped-max`.
* Используется в качестве точного значения, если значение `channelCountMode` указано явно.
Синтаксис
---------

```js
var oscillator = audioCtx.createOscillator();
var channels = oscillator.channelCount;
```

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

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.channelCount;
```

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

Целое.

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

| Specification |
| --- |
| Web Audio API # dom-audionode-channelcount |

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

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

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

* Использование Web Audio API (en-US)


GamepadButton.value - Интерфейсы веб API

GamepadButton.value
===================

Свойство **`GamepadButton.value`** интерфейса `GamepadButton` возвращает состояние аналоговой клавиши геймпада, такой, как, например триггеры.

Представляет собой дробное число в диапазоне `0.0` — `1.0`, где `0.0` показывает, что кнопка не нажата, а 1.0 - что нажата полностью.

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

    readonly    attribute double  value;
```

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

```js
var gp = navigator.getGamepads()[0];

if (gp.buttons[0].value > 0) {
  // respond to analog button being pressed in
}
```

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

`double`.

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

| Specification |
| --- |
| Gamepad # dom-gamepadbutton-value |

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

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

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

Using the Gamepad API (en-US)


GamepadButton.pressed - Интерфейсы веб API

GamepadButton.pressed
=====================

Свойство **`GamepadButton.pressed`** интерфейса `GamepadButton` возвращает `boolean`, указывающий, нажата ли текущая кнопка (`true`), или нет (`false`).

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

var isPressed = navigator.getGamepads()[0].pressed;
```

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

```js
var gp = navigator.getGamepads()[0]; // Get the first gamepad object

if (gp.buttons[0].pressed == true) {
  // respond to button being pressed
}
```

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

`boolean` (en-US).

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

| Specification |
| --- |
| Gamepad # dom-gamepadbutton-pressed |

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

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

See also
--------

* Using the Gamepad API (en-US)


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

Request.mode
============

Read-only свойство **`mode`** интерфейса `Request` описывает режим запроса (например, `cors`, `no-cors`, `same-origin` или `navigate`.) Используется для проверки, вызывает ли кросс-доменный запрос корректный ответ, и какие свойства ответа доступны для чтения.

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

var myMode = request.mode;
```

### Значения

Значения `RequestMode`.

Соответствующие доступные значения:

* `same-origin` — Если запрос сделан к другому origin в этом режиме, то это вызовет ошибку. Можно использовать этот режим, чтобы проверить, что запрос всегда будет обращён к тому же origin, что и текущий.
* `no-cors` — Разрешает использование только `HEAD`, `GET` или `POST` методов и простых заголовков (т.е. разрешены только простые запросы). Если какой-либо ServiceWorkers перехватит запрос, то он не сможет добавить или изменить заголовки, кроме простых. Также, для JavaScript может быть ограничен доступ к любому свойству объекта ответа `Response`. Это позволяет наверняка знать, что ServiceWorkers не изменили семантику и предотвратить проблемы безопасности и конфиденциальности, возникающие при утечке данных между доменами.
* `cors` — Разрешает кросс-доменные запросы. Например, чтобы получить доступ к некому API, предоставляемое третей стороной. Ожидается, что запрос в этом режиме будет придерживаться CORS протокола (en-US). В объекте ответа `Response` доступен ограниченный набор заголовков, но тело доступно для чтения.
* `navigate` — Режим, поддерживающий навигацию. Значение `navigate` предназначено только для использования в HTML навигации. Запрос в этом режиме создаётся только во время навигации между страницами.

#### Default mode

Запрос может быть создан разными способами и режим запроса зависит от конкретных средств, с помощью которых он был инициирован.

Например, когда объект `Request` создаётся с помощью конструктора `Request.Request` (en-US), свойство `mode` этого `Request` будет иметь значение `cors`.

Однако, запросы созданные не конструктором `Request.Request` (en-US), будут использовать режим `no-cors`. Например, для встроенных ресурсов, где запрос инициируется из разметки, если отсутствует атрибут `crossorigin`, то запрос в большинстве случаев будет выполнен в режиме `no-cors` — то есть для элементов `<link>` или `<script>` (кроме использования с модулями), или `<img>`, `<audio>`, `<video>`, `<object>` (en-US), `<embed>`, или `<iframe>` (en-US).

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

В этой части кода создаётся новый запрос (для взятия файла картинки) через конструктор `Request.Request()` (en-US), затем полученный режим сохраняется в переменной:

```js
var myRequest = new Request("flowers.jpg");
var myMode = myRequest.mode; // вернёт "cors" по умолчанию
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-mode② |

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

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

See also
--------

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


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

invalid
=======

Событие `invalid` запускается, когда отправляемый элемент был проверен, но его содержимое не удовлетворило установленные ограничения. Валидность отправляемого элемента проверяется до отправления формы или после вызова метода `checkValidity()` (en-US)на элементе.

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

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

HTML5

**Взаимодействие** `Event`

Всплытия

Нет

Отменяемый

Да

Цель

Элемент

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

Может препятствовать отправке формы.

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

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


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

GlobalEventHandlers.onselect
============================

Обработчик события select окна браузера.

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

window.onselect = funcRef;
```

* `funcRef` - функция
Пример
------

```html
<html>
  <head>
    <title>onselect test</title>

    <style type="text/css">
 .text1 {
 border: 2px solid red;
 }
 </style>

    <script type="text/javascript">
 window.onselect = selectText;

 function selectText() {
 alert("select event detected!");
 }
 </script>
  </head>

  <body>
    <textarea class="text1" cols="30" rows="3">
Highlight some of this text
with the mouse pointer
to fire the onselect event.
</textarea
 >
  </body>
</html>
```

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

Событие select происходит только, когда текст выделяют в поле input с type='text' или в поле textarea. Событие происходит только после того, как текст будет выделен.

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

| Specification |
| --- |
| HTML Standard # event-select |
| HTML Standard # handler-onselect |

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

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


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

HTMLInputElement.setSelectionRange()
====================================

Метод **`HTMLInputElement.setSelectionRange()`** устанавливает начальное и конечное положение выделения текста в элементе `<input>`.

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

Этот метод позволяет одним вызовом обновить свойства `HTMLInputElement.selectionStart`, `selectionEnd`, и `selectionDirection`.

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

inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);
```

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

*selectionStart*

Индекс первого выделенного символа.

*selectionEnd*

Индекс символа *после* последнего выделенного символа.

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

Строка, определяющая направления произведённого выделения. Принимаются значения "forward", "backward" или "none", если направление выделение неизвестно или неважно.

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

Кликните на кнопку, чтобы выбрать третий, четвёртый и пятый символы в текстовом поле ("zil" в слове "Mozilla").

### HTML

```html
<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">Выбрать текст</button>
```

### JavaScript

```js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-textarea/input-setselectionrange-dev |

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

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

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

* `<input>`
* `HTMLInputElement` (en-US)
* `Selection` (en-US)


Использование IndexedDB - Интерфейсы веб API

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

IndexedDB - это способ постоянного хранения данных внутри клиентского браузера, другими словами это NOSQL хранилище на стороне клиента. Что позволяет создавать веб-приложения с богатыми возможностями обращения к данным независимо от доступности сети, ваши приложения могут работать как онлайн, так и офлайн.

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

Это руководство по использованию асинхронного API для IndexedDB. Если вы не знакомы с IndexedDB, то обратитесь для начала к документу Basic Concepts About IndexedDB.

**Предупреждение:** Некоторые части документа не переведены, в основном это повсеместно принятые в программировании рекомендации, такие как обработка ошибок или что-то очевидное. Тем не менее вы можете/должны продолжить перевод. Главная цель перевода - понять основные концепции IndexedDB, обратить внимание на важные нюансы, прокомментировать исходный код и может быть добавить примеры.

Справочную документацию по IndexedDB API вы найдёте в документе IndexedDB. В нем описаны типы объектов, используемых в IndexedDB, а также синхронный и асинхронный API.

Типичная схема работы с базой
-----------------------------

Обычная последовательность шагов при работе с IndexedDB :

1. Открыть базу данных.
2. Создать хранилище объектов в базе данных, над которой будут выполняться наши операции.
3. Запустить транзакцию и выдать запрос на выполнение какой-либо операции с базой данных, например, добавление или извлечение данных.
4. Ждать завершения операции, обрабатывая событие DOM, на которое должен быть установлен наш обработчик.
5. Сделать что-то с результатами (которые могут быть найдены в возвращаемом по нашему запросу объекте ).

Теперь, получив общее представление, переходим к более конкретным деталям.

Создание и структурирование хранилища
-------------------------------------

Так как спецификация пока ещё находится в процессе разработки, то текущие реализации IndexedDB отличаются у различных браузеров и могут содержать имена объектов, включающие в себя префиксы браузеров. Однако, как только стандарт будет принят, префиксы будут удалены. К настоящему моменту префиксы уже удалены в реализациях IndexedDB в Internet Explorer 10, Firefox 16 и Chrome 24. Браузеры, построенные на базе Gecko пока ещё используют префикс `moz,` а браузеры на базе движка `webkit` используют префикс `webkit.`

### Использование экспериментальной версии IndexedDB

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

```js
// проверяем существования префикса.
window.indexedDB =
  window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB;
// НЕ ИСПОЛЬЗУЙТЕ "var indexedDB = ..." вне функции.
// также могут отличаться и window.IDB\* objects: Transaction, KeyRange и тд
window.IDBTransaction =
  window.IDBTransaction ||
  window.webkitIDBTransaction ||
  window.msIDBTransaction;
window.IDBKeyRange =
  window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla никогда не создавала префиксов для объектов, поэтому window.mozIDB\* не требуется проверять)
```

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

```js
if (!window.indexedDB) {
  window.alert(
    "Ваш браузер не поддерживает стабильную версию IndexedDB. Такие-то функции будут недоступны",
  );
}
```

### Открытие базы данных

Как-то так:

```js
// Открываем базу данных MyTestDatabase
var request = window.indexedDB.open("MyTestDatabase", 3);
```

Видите? Открытие базы данных, подобно любым другим операциям, запускается запросом.

На самом деле запрос открытия базы данных не приводит к немедленному открытию базы или запуску транзакции. Вызов функции `open()` вернёт объект `IDBOpenDBRequest` (en-US) , содержащий результат (если успешно) или ошибку, которую вы можете обработать как событие. Большинство других асинхронных функций IndexedDB делает то же самое - возвращает объект `IDBRequest` (en-US) с результатом или ошибкой. Результат функции open всегда возвращает экземпляр объекта `IDBDatabase.`

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

**Предупреждение:** Версия базы данных имеет внутреннее представление `unsigned long long` number (длинное длинное целое без знака), то есть может принимать очень большие целые значения. Имейте в виду также, что нет смысла использовать в качестве версии базы данных значение с плавающей точкой (float), потому что оно будет сконвертировано в ближайшее меньшее целое. В результате неожиданно может не запуститься транзакция или сработать триггер события `upgradeneeded`. Например, не используйте значение 2.4 как версию базы данных:

```js
var request = indexedDB.open("MyTestDatabase", 2.4); // не делайте так, потому что версия будет округлена до 2
```

#### Установка обработчиков

Первое, что понадобится сделать практически со всеми запросами, которые вы создаёте - это добавить обработчики событий успеха и ошибки:

```js
request.onerror = function (event) {
  // Сделать что-то при ошибке request.errorCode!
};
request.onsuccess = function (event) {
  // Выполнить какой-то код если запрос успешный request.result!
};
```

Какая из двух функций - `onsuccess()` или `onerror()` - должна быть вызвана? Если всё в порядке - то инициируется событие успеха (это событие DOM, свойство type которого выставлено в `"success"`) с `request` в качестве `target`. Это вызывает запуск функции `onsuccess()` объекта `request` с событием успеха в качестве аргумента. В противном случае, если возникают какие-то проблемы, то происходит событие ошибки (то есть событие DOM, свойство `type` которого установлено в `"error"`) . Это приводит к запуску функции `onerror()` с событием ошибки в качестве аргумента.

IndexedDB API разработан так, чтобы минимизировать необходимость обработки ошибок, поэтому скорее всего вы не встретите много событий ошибки запроса (по крайней мере если вы будете использовать этот API!). Однако при открытии базы данных есть несколько общих условий, которые генерируют события ошибок. Наиболее вероятной проблемой является запрет вашему веб-приложению на создание базы данных, установленный пользователем в браузере. Одной из основных целей разработки IndexedDB - это обеспечение возможности сохранения больших объёмов данных для использования офлайн. (Чтобы узнать, сколько памяти вы можете использовать в разных браузерах, обратитесь к Ограничениям памяти).

Конечно же, браузеры стремятся не позволить назойливым рекламным сетям или вредоносным сайтам засорять ваш компьютер. Поэтому при первой попытке любого веб-приложения открыть хранилище IndexedDB, браузер запрашивает разрешение пользователя. Пользователь может выбрать - то ли разрешить, то ли запретить доступ. Кроме этого, в приватных режимах браузеров (частный просмотр для Firefox и режим инкогнито для Chrome), IndexedDB полностью запрещена для использования. Так как цель приватных режимов - не оставлять следов, то открытие базы данных невозможно в таких режимах.

А теперь предположим, что пользователь разрешил вашему запросу создать базу данных и состоялось событие успеха, запустившее обработчик события успеха. Что дальше? Так как ваш запрос был сгенерирован с вызовом метода `indexedDB.open()`, то `request.result` является экземпляром объекта `IDBDatabase` и вы определённо захотите сохранить его для будущего использования. Ваш код может выглядеть примерно так:

```js
var db;
var request = indexedDB.open("MyTestDatabase");
request.onerror = function (event) {
  alert(
    "Почему вы не позволяете моему веб-приложению использовать IndexedDB?!",
  );
};
request.onsuccess = function (event) {
  db = event.target.result;
};
```

#### Обработка ошибок

Как уже упоминалось выше, события ошибки всплывают. Событие ошибки нацелено (в фазе перехвата) на запрос, который сгенерировал ошибку, затем событие всплывает до уровня транзакции и наконец достигает уровня объекта базы данных. Если вы хотите избежать установки отдельных обработчиков на каждый запрос, то вы можете вместо этого установить один единственный обработчик на объект базы данных, например так:

```js
db.onerror = function (event) {
  // все ошибки выводим в alert
  alert("Database error: " + event.target.errorCode);
};
```

Одной из возможных ошибок при открытии базы данных является `VER_ERR`. Она сигнализирует о том, что версия базы данных, сохранённая на диске, *больше*, чем версия, которую вы пытаетесь открыть. Такая ошибка должна быть в обязательном порядке обработана обработчиком ошибок.

### Создание или обновление версии базы данных

Когда вы создаёте новую базу данных или увеличиваете номер версии существующей базы данных (задавая больший номер версии, чем тот номер, который был вами указан при Opening a database) запускается событие `onupgradeneeded`. В обработчике этого события вы должны создать хранилище объектов, необходимое для этой версии базы данных:

```js
// Это событие появилось только в самых новых браузерах
request.onupgradeneeded = function (event) {
  var db = event.target.result;

  // Создаём хранилище объектов для этой базы данных
  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
};
```

Версия числа без знака с длиной `long long, может быть очень большим.`

**Предупреждение:** Так же вы не можете использовать float, его значение будет округлено до ближайшего целого, со всеми вытекающими из этого ошибками:

```js
var request = indexedDB.open("MyTestDatabase", 2.4); // Будет округлено до 2
```

Когда вы увеличиваете номер версии, будет инициировано событие onupgradeneeded. В этот момент БД будет хранить старые объекты. Но для всякого объекта прошлой версии стоит создать новый объект, совместимый с новой версией. Если вам необходимо исправить существующий объект в БД (например, для изменения keyPath), то вы можете удалить объект и создать его вновь с новыми параметрами (помните, что удаление стирает информацию, так что не забывайте сохранять то, что вам нужно).

WebKit поддерживает текущую версию спецификации в Google Chrome 23 и старше. Так что там нет события indexedDB.open(name, version).onupgradeneeded. Однако, вы можете ознакомиться с инструкцией о том, что делать со старымWebkit.

### Структура базы данных

Now to structure the database. IndexedDB uses object stores rather than tables, and a single database can contain any number of object stores. Whenever a value is stored in an object store, it is associated with a key. There are several different ways that a key can be supplied depending on whether the object store uses a key path or a key generator.

The following table shows the different ways the keys are supplied.

| Key Path | Key Generator | Description |
| --- | --- | --- |
| No | No | This object store can hold any kind of value, even primitive values like numbers and strings. You must supply a separate key argument whenever you want to add a new value. |
| Yes | No | This object store can only hold JavaScript objects. The objects must have a property with the same name as the key path. |
| No | Yes | This object store can hold any kind of value. The key is generated for you automatically, or you can supply a separate key argument if you want to use a specific key. |
| Yes | Yes | This object store can only hold JavaScript objects. Usually a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path. However, if such a property already exists, the value of that property is used as key rather than generating a new key. |

You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.

Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.

That may sound confusing, but this simple example should illustrate the concepts:

```js
// This is what our customer data looks like.
const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },
];
const dbName = "the\_name";

var request = indexedDB.open(dbName, 2);

request.onerror = function (event) {
  // Handle errors.
};
request.onupgradeneeded = function (event) {
  var db = event.target.result;

  // Create an objectStore to hold information about our customers. We're
  // going to use "ssn" as our key path because it's guaranteed to be
  // unique.
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // Create an index to search customers by name. We may have duplicates
  // so we can't use a unique index.
  objectStore.createIndex("name", "name", { unique: false });

  // Create an index to search customers by email. We want to ensure that
  // no two customers have the same email, so use a unique index.
  objectStore.createIndex("email", "email", { unique: true });

  // Store values in the newly created objectStore.
  for (var i in customerData) {
    objectStore.add(customerData[i]);
  }
};
```

As mentioned previously, `onupgradeneeded` is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.

Object stores are created with a single call to `createObjectStore()`. The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.

We've also asked for an index named "name" that looks at the `name` property of the stored objects. As with `createObjectStore()`, `createIndex()` takes an optional `options` object that refines the type of index that you want to create. Adding objects that don't have a `name` property still succeeds, but the object won't appear in the "name" index.

We can now retrieve the stored customer objects using their `ssn` from the object store directly, or using their name by using the index. To learn how this is done, see the section on using an index.

Adding and removing data
------------------------

Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it. Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently

### Adding data to the database

If you've just created a database, then you probably want to write to it. Here's what that looks like:

```js
var transaction = db.transaction(["customers"], "readwrite");
// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ\_WRITE instead of "readwrite".
// In case you want to support such an implementation, you can just write:
// var transaction = db.transaction(["customers"], IDBTransaction.READ\_WRITE);
```

The `transaction()` function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the `"readwrite"` flag.

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing `TRANSACTION_INACTIVE_ERR` error codes then you've messed something up.

Transactions can receive DOM events of three different types: `error`, `abort`, and `complete`. We've talked about the way that `error` events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling `preventDefault()` on the error event, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call `abort()` on the transaction, then the transaction is rolled back and an `abort` event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a `complete` event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

```js
// Do something when all the data is added to the database.
transaction.oncomplete = function (event) {
  alert("All done!");
};

transaction.onerror = function (event) {
  // Don't forget to handle errors!
};

var objectStore = transaction.objectStore("customers");
for (var i in customerData) {
  var request = objectStore.add(customerData[i]);
  request.onsuccess = function (event) {
    // event.target.result == customerData[i].ssn;
  };
}
```

The `result` of a request generated from a call to `add()` is the key of the value that was added. So in this case, it should equal the `ssn` property of the object that was added, since the object store uses the `ssn` property for the key path. Note that the `add()` function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the `put()` function.

Removing data from the database
-------------------------------

Removing data is very similar:

```js
var request = db
  .transaction(["customers"], "readwrite")
  .objectStore("customers")
  .delete("444-44-4444");
request.onsuccess = function (event) {
  // It's gone!
};
```

Getting data from the database
------------------------------

Now that the database has some info in it, you can retrieve it in several ways. First, the simple `get()`. You need to provide the key to retrieve the value, like so:

```js
var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
var request = objectStore.get("444-44-4444");
request.onerror = function (event) {
  // Handle errors!
};
request.onsuccess = function (event) {
  // Do something with the request.result!
  alert("Name for SSN 444-44-4444 is " + request.result.name);
};
```

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

```js
db
  .transaction("customers")
  .objectStore("customers")
  .get("444-44-4444").onsuccess = function (event) {
  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
};
```

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a `"readwrite"` transaction. Calling `transaction()` with no mode specified gives you a `"readonly"` transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the `result` property. Easy, right?!

Using a cursor
--------------

Using `get()` requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

```js
var objectStore = db.transaction("customers").objectStore("customers");

objectStore.openCursor().onsuccess = function (event) {
  var cursor = event.target.result;
  if (cursor) {
    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
    cursor.continue();
  } else {
    alert("No more entries!");
  }
};
```

The `openCursor()` function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the `result` of the request (above we're using the shorthand, so it's `event.target.result`). Then the actual key and value can be found on the `key` and `value` properties of the cursor object. If you want to keep going, then you have to call `continue()` on the cursor. When you've reached the end of the data (or if there were no entries that matched your `openCursor()` request) you still get a success callback, but the `result` property is `undefined`.

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

```js
var customers = [];

objectStore.openCursor().onsuccess = function (event) {
  var cursor = event.target.result;
  if (cursor) {
    customers.push(cursor.value);
    cursor.continue();
  } else {
    alert("Got all customers: " + customers);
  }
};
```

**Предупреждение:** The following function is not part of the IndexedDB standard!

Mozilla has also implemented `getAll()` to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:

```js
objectStore.getAll().onsuccess = function (event) {
  alert("Got all customers: " + event.target.result);
};
```

There is a performance cost associated with looking at the `value` property of a cursor, because the object is created lazily. When you use `getAll()`, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use `getAll()`. If you're trying to get an array of all the objects in an object store, though, use `getAll()`.

### Using an index

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

```js
var index = objectStore.index("name");
index.get("Donna").onsuccess = function (event) {
  alert("Donna's SSN is " + event.target.result.ssn);
};
```

The "name" cursor isn't unique, so there could be more than one entry with the `name` set to `"Donna"`. In that case you always get the one with the lowest key value.

If you need to access all the entries with a given `name` you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

```js
index.openCursor().onsuccess = function (event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
    alert(
      "Name: " +
        cursor.key +
        ", SSN: " +
        cursor.value.ssn +
        ", email: " +
        cursor.value.email,
    );
    cursor.continue();
  }
};

index.openKeyCursor().onsuccess = function (event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
    // No way to directly get the rest of the stored object.
    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
    cursor.continue();
  }
};
```

### Specifying the range and direction of cursors

If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to `openCursor()` or `openKeyCursor()`. You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:

```js
// Only match "Donna"
var singleKeyRange = IDBKeyRange.only("Donna");

// Match anything past "Bill", including "Bill"
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");

// Match anything past "Bill", but don't include "Bill"
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);

// Match anything up to, but not including, "Donna"
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);

//Match anything between "Bill" and "Donna", but not including "Donna"
var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);

index.openCursor(boundKeyRange).onsuccess = function (event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the matches.
    cursor.continue();
  }
};
```

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing `prev` to the `openCursor()` function:

```js
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function (event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the entries.
    cursor.continue();
  }
};
```

Since the "name" index isn't unique, there might be multiple entries where `name` is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass `nextunique` (or `prevunique` if you're going backwards) as the direction parameter. When `nextunique` or `prevunique` is used, the entry with the lowest key is always the one returned.

```js
index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function (event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the entries.
    cursor.continue();
  }
};
```

Version changes while a web app is open in another tab
------------------------------------------------------

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call `open()` with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:

```js
var openReq = mozIndexedDB.open("MyTestDatabase", 2);

openReq.onblocked = function (event) {
  // If some other tab is loaded with the database, then it needs to be closed
  // before we can proceed.
  alert("Please close all other tabs with this site open!");
};

openReq.onupgradeneeded = function (event) {
  // All other databases have been closed. Set everything up.
  db.createObjectStore(/\* ... \*/);
  useDatabase(db);
};

openReq.onsuccess = function (event) {
  var db = event.target.result;
  useDatabase(db);
  return;
};

function useDatabase(db) {
  // Make sure to add a handler to be notified if another page requests a version
  // change. We must close the database. This allows the other page to upgrade the database.
  // If you don't do this then the upgrade won't happen until the user close the tab.
  db.onversionchange = function (event) {
    db.close();
    alert("A new version of this page is ready. Please reload!");
  };

  // Do stuff with the database.
}
```

Security
--------

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either `<frame>` (en-US) or `<iframe>` (en-US). This is a security and privacy measure and can be considered analogous the blocking of 3rd-party cookies. For more details, see Firefox bug 595307.

Warning About Browser Shutdown
------------------------------

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction.

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See Firefox bug 870645.

Full IndexedDB example
----------------------

### HTML Content

```html
<script
 type="text/javascript"
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<h1>IndexedDB Demo: storing blobs, e-publication example</h1>
<div class="note">
  <p>Works and tested with:</p>
  <div id="compat"></div>
</div>

<div id="msg"></div>

<form id="register-form">
  <table>
    <tbody>
      <tr>
        <td>
          <label for="pub-title" class="required"> Title: </label>
        </td>
        <td>
          <input type="text" id="pub-title" name="pub-title" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="pub-biblioid" class="required">
            Bibliographic ID:<br />
            <span class="note">(ISBN, ISSN, etc.)</span>
          </label>
        </td>
        <td>
          <input type="text" id="pub-biblioid" name="pub-biblioid" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="pub-year"> Year: </label>
        </td>
        <td>
          <input type="number" id="pub-year" name="pub-year" />
        </td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>
          <label for="pub-file"> File image: </label>
        </td>
        <td>
          <input type="file" id="pub-file" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="pub-file-url">
            Online-file image URL:<br />
            <span class="note">(same origin URL)</span>
          </label>
        </td>
        <td>
          <input type="text" id="pub-file-url" name="pub-file-url" />
        </td>
      </tr>
    </tbody>
  </table>

  <div class="button-pane">
    <input type="button" id="add-button" value="Add Publication" />
    <input type="reset" id="register-form-reset" />
  </div>
</form>

<form id="delete-form">
  <table>
    <tbody>
      <tr>
        <td>
          <label for="pub-biblioid-to-delete">
            Bibliographic ID:<br />
            <span class="note">(ISBN, ISSN, etc.)</span>
          </label>
        </td>
        <td>
          <input
 type="text"
 id="pub-biblioid-to-delete"
 name="pub-biblioid-to-delete" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="key-to-delete">
            Key:<br />
            <span class="note">(for example 1, 2, 3, etc.)</span>
          </label>
        </td>
        <td>
          <input type="text" id="key-to-delete" name="key-to-delete" />
        </td>
      </tr>
    </tbody>
  </table>
  <div class="button-pane">
    <input type="button" id="delete-button" value="Delete Publication" />
    <input
 type="button"
 id="clear-store-button"
 value="Clear the whole store"
 class="destructive" />
  </div>
</form>

<form id="search-form">
  <div class="button-pane">
    <input
 type="button"
 id="search-list-button"
 value="List database content" />
  </div>
</form>

<div>
  <div id="pub-msg"></div>
  <div id="pub-viewer"></div>
  <ul id="pub-list"></ul>
</div>
```

### CSS Content

```css
body {
  font-size: 0.8em;
  font-family: Sans-Serif;
}

form {
  background-color: #cccccc;
  border-radius: 0.3em;
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 1em;
}

table {
  border-collapse: collapse;
}

input {
  padding: 0.3em;
  border-color: #cccccc;
  border-radius: 0.3em;
}

.required:after {
  content: "\*";
  color: red;
}

.button-pane {
  margin-top: 1em;
}

#pub-viewer {
  float: right;
  width: 48%;
  height: 20em;
  border: solid #d092ff 0.1em;
}
#pub-viewer iframe {
  width: 100%;
  height: 100%;
}

#pub-list {
  width: 46%;
  background-color: #eeeeee;
  border-radius: 0.3em;
}
#pub-list li {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-right: 0.5em;
}

#msg {
  margin-bottom: 1em;
}

.action-success {
  padding: 0.5em;
  color: #00d21e;
  background-color: #eeeeee;
  border-radius: 0.2em;
}

.action-failure {
  padding: 0.5em;
  color: #ff1408;
  background-color: #eeeeee;
  border-radius: 0.2em;
}

.note {
  font-size: smaller;
}

.destructive {
  background-color: orange;
}
.destructive:hover {
  background-color: #ff8000;
}
.destructive:active {
  background-color: red;
}
```

### JavaScript Content

```js
(function () {
  var COMPAT\_ENVS = [
    ["Firefox", ">= 16.0"],
    [
      "Google Chrome",
      ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support",
    ],
  ];
  var compat = $("#compat");
  compat.empty();
  compat.append('<ul id="compat-list"></ul>');
  COMPAT\_ENVS.forEach(function (val, idx, array) {
    $("#compat-list").append("<li>" + val[0] + ": " + val[1] + "</li>");
  });

  const DB\_NAME = "mdn-demo-indexeddb-epublications";
  const DB\_VERSION = 1; // Use a long long for this value (don't use a float)
  const DB\_STORE\_NAME = "publications";

  var db;

  // Used to keep track of which view is displayed to avoid to uselessly reload it
  var current_view_pub_key;

  function openDb() {
    console.log("openDb ...");
    var req = indexedDB.open(DB\_NAME, DB\_VERSION);
    req.onsuccess = function (evt) {
      // Better use "this" than "req" to get the result to avoid problems with
      // garbage collection.
      // db = req.result;
      db = this.result;
      console.log("openDb DONE");
    };
    req.onerror = function (evt) {
      console.error("openDb:", evt.target.errorCode);
    };

    req.onupgradeneeded = function (evt) {
      console.log("openDb.onupgradeneeded");
      var thisDB = evt.target.result;
      if (!thisDB.objectStoreNames.contains(DB\_STORE\_NAME)) {
        var store = thisDB.createObjectStore(DB\_STORE\_NAME, {
          keyPath: "id",
          autoIncrement: true,
        });

        store.createIndex("biblioid", "biblioid", { unique: true });
        store.createIndex("title", "title", { unique: false });
        store.createIndex("year", "year", { unique: false });
      }
    };
  }

  /\*\*
 \* @param {string} store\_name
 \* @param {string} mode either "readonly" or "readwrite"
 \*/
  function getObjectStore(store\_name, mode) {
    var tx = db.transaction(store_name, mode);
    return tx.objectStore(store_name);
  }

  function clearObjectStore(store\_name) {
    var store = getObjectStore(DB\_STORE\_NAME, "readwrite");
    var req = store.clear();
    req.onsuccess = function (evt) {
      displayActionSuccess("Store cleared");
      displayPubList(store);
    };
    req.onerror = function (evt) {
      console.error("clearObjectStore:", evt.target.errorCode);
      displayActionFailure(this.error);
    };
  }

  function getBlob(key, store, success\_callback) {
    var req = store.get(key);
    req.onsuccess = function (evt) {
      var value = evt.target.result;
      if (value) success\_callback(value.blob);
    };
  }

  /\*\*
 \* @param {IDBObjectStore=} store
 \*/
  function displayPubList(store) {
    console.log("displayPubList");

    if (typeof store == "undefined")
      store = getObjectStore(DB\_STORE\_NAME, "readonly");

    var pub_msg = $("#pub-msg");
    pub_msg.empty();
    var pub_list = $("#pub-list");
    pub_list.empty();
    // Reseting the iframe so that it doesn't display previous content
    newViewerFrame();

    var req;
    req = store.count();
    // Requests are executed in the order in which they were made against the
    // transaction, and their results are returned in the same order.
    // Thus the count text below will be displayed before the actual pub list
    // (not that it is algorithmically important in this case).
    req.onsuccess = function (evt) {
      pub_msg.append(
        "<p>There are <strong>" +
          evt.target.result +
          "</strong> record(s) in the object store.</p>",
      );
    };
    req.onerror = function (evt) {
      console.error("add error", this.error);
      displayActionFailure(this.error);
    };

    var i = 0;
    req = store.openCursor();
    req.onsuccess = function (evt) {
      var cursor = evt.target.result;

      // If the cursor is pointing at something, ask for the data
      if (cursor) {
        console.log("displayPubList cursor:", cursor);
        req = store.get(cursor.key);
        req.onsuccess = function (evt) {
          var value = evt.target.result;
          var list_item = $(
            "<li>" +
              "[" +
              cursor.key +
              "] " +
              "(biblioid: " +
              value.biblioid +
              ") " +
              value.title +
              "</li>",
          );
          if (value.year != null) list_item.append(" - " + value.year);

          if (
            value.hasOwnProperty("blob") &&
            typeof value.blob != "undefined"
          ) {
            var link = $('<a href="' + cursor.key + '">File</a>');
            link.on("click", function () {
              return false;
            });
            link.on("mouseenter", function (evt) {
              setInViewer(evt.target.getAttribute("href"));
            });
            list_item.append(" / ");
            list_item.append(link);
          } else {
            list_item.append(" / No attached file");
          }
          pub_list.append(list_item);
        };

        // Move on to the next object in store
        cursor.continue();

        // This counter serves only to create distinct ids
        i++;
      } else {
        console.log("No more entries");
      }
    };
  }

  function newViewerFrame() {
    var viewer = $("#pub-viewer");
    viewer.empty();
    var iframe = $("<iframe />");
    viewer.append(iframe);
    return iframe;
  }

  function setInViewer(key) {
    console.log("setInViewer:", arguments);
    key = Number(key);
    if (key == current_view_pub_key) return;

    current_view_pub_key = key;

    var store = getObjectStore(DB\_STORE\_NAME, "readonly");
    getBlob(key, store, function (blob) {
      console.log("setInViewer blob:", blob);
      var iframe = newViewerFrame();

      // It is not possible to set a direct link to the
      // blob to provide a mean to directly download it.
      if (blob.type == "text/html") {
        var reader = new FileReader();
        reader.onload = function (evt) {
          var html = evt.target.result;
          iframe.load(function () {
            $(this).contents().find("html").html(html);
          });
        };
        reader.readAsText(blob);
      } else if (blob.type.indexOf("image/") == 0) {
        iframe.load(function () {
          var img_id = "image-" + key;
          var img = $('<img id="' + img_id + '"/>');
          $(this).contents().find("body").html(img);
          var obj_url = window.URL.createObjectURL(blob);
          $(this)
            .contents()
            .find("#" + img_id)
            .attr("src", obj_url);
          window.URL.revokeObjectURL(obj_url);
        });
      } else if (blob.type == "application/pdf") {
        $("\*").css("cursor", "wait");
        var obj_url = window.URL.createObjectURL(blob);
        iframe.load(function () {
          $("\*").css("cursor", "auto");
        });
        iframe.attr("src", obj_url);
        window.URL.revokeObjectURL(obj_url);
      } else {
        iframe.load(function () {
          $(this).contents().find("body").html("No view available");
        });
      }
    });
  }

  /\*\*
 \* @param {string} biblioid
 \* @param {string} title
 \* @param {number} year
 \* @param {string} url the URL of the image to download and store in the local
 \* IndexedDB database. The resource behind this URL is subjected to the
 \* "Same origin policy", thus for this method to work, the URL must come from
 \* the same origin than the web site/app this code is deployed on.
 \*/
  function addPublicationFromUrl(biblioid, title, year, url) {
    console.log("addPublicationFromUrl:", arguments);

    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    // Setting the wanted responseType to "blob"
    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
    xhr.responseType = "blob";
    xhr.onload = function (evt) {
      if (xhr.status == 200) {
        console.log("Blob retrieved");
        var blob = xhr.response;
        console.log("Blob:", blob);
        addPublication(biblioid, title, year, blob);
      } else {
        console.error(
          "addPublicationFromUrl error:",
          xhr.responseText,
          xhr.status,
        );
      }
    };
    xhr.send();

    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
    // responseType is not handled.
    // http://bugs.jquery.com/ticket/11461
    // http://bugs.jquery.com/ticket/7248
    // $.ajax({
    // url: url,
    // type: 'GET',
    // xhrFields: { responseType: 'blob' },
    // success: function(data, textStatus, jqXHR) {
    // console.log("Blob retrieved");
    // console.log("Blob:", data);
    // // addPublication(biblioid, title, year, data);
    // },
    // error: function(jqXHR, textStatus, errorThrown) {
    // console.error(errorThrown);
    // displayActionFailure("Error during blob retrieval");
    // }
    // });
  }

  /\*\*
 \* @param {string} biblioid
 \* @param {string} title
 \* @param {number} year
 \* @param {Blob=} blob
 \*/
  function addPublication(biblioid, title, year, blob) {
    console.log("addPublication arguments:", arguments);
    var obj = { biblioid: biblioid, title: title, year: year };
    if (typeof blob != "undefined") obj.blob = blob;

    var store = getObjectStore(DB\_STORE\_NAME, "readwrite");
    var req;
    try {
      req = store.add(obj);
    } catch (e) {
      if (e.name == "DataCloneError")
        displayActionFailure(
          "This engine doesn't know how to clone a Blob, " + "use Firefox",
        );
      throw e;
    }
    req.onsuccess = function (evt) {
      console.log("Insertion in DB successful");
      displayActionSuccess();
      displayPubList(store);
    };
    req.onerror = function () {
      console.error("addPublication error", this.error);
      displayActionFailure(this.error);
    };
  }

  /\*\*
 \* @param {string} biblioid
 \*/
  function deletePublicationFromBib(biblioid) {
    console.log("deletePublication:", arguments);
    var store = getObjectStore(DB\_STORE\_NAME, "readwrite");
    var req = store.index("biblioid");
    req.get(biblioid).onsuccess = function (evt) {
      if (typeof evt.target.result == "undefined") {
        displayActionFailure("No matching record found");
        return;
      }
      deletePublication(evt.target.result.id, store);
    };
    req.onerror = function (evt) {
      console.error("deletePublicationFromBib:", evt.target.errorCode);
    };
  }

  /\*\*
 \* @param {number} key
 \* @param {IDBObjectStore=} store
 \*/
  function deletePublication(key, store) {
    console.log("deletePublication:", arguments);

    if (typeof store == "undefined")
      store = getObjectStore(DB\_STORE\_NAME, "readwrite");

    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
    // the result of the Object Store Deletion Operation algorithm is
    // undefined, so it's not possible to know if some records were actually
    // deleted by looking at the request result.
    var req = store.get(key);
    req.onsuccess = function (evt) {
      var record = evt.target.result;
      console.log("record:", record);
      if (typeof record == "undefined") {
        displayActionFailure("No matching record found");
        return;
      }
      // Warning: The exact same key used for creation needs to be passed for
      // the deletion. If the key was a Number for creation, then it needs to
      // be a Number for deletion.
      req = store.delete(key);
      req.onsuccess = function (evt) {
        console.log("evt:", evt);
        console.log("evt.target:", evt.target);
        console.log("evt.target.result:", evt.target.result);
        console.log("delete successful");
        displayActionSuccess("Deletion successful");
        displayPubList(store);
      };
      req.onerror = function (evt) {
        console.error("deletePublication:", evt.target.errorCode);
      };
    };
    req.onerror = function (evt) {
      console.error("deletePublication:", evt.target.errorCode);
    };
  }

  function displayActionSuccess(msg) {
    msg = typeof msg != "undefined" ? "Success: " + msg : "Success";
    $("#msg").html('<span class="action-success">' + msg + "</span>");
  }
  function displayActionFailure(msg) {
    msg = typeof msg != "undefined" ? "Failure: " + msg : "Failure";
    $("#msg").html('<span class="action-failure">' + msg + "</span>");
  }
  function resetActionStatus() {
    console.log("resetActionStatus ...");
    $("#msg").empty();
    console.log("resetActionStatus DONE");
  }

  function addEventListeners() {
    console.log("addEventListeners");

    $("#register-form-reset").click(function (evt) {
      resetActionStatus();
    });

    $("#add-button").click(function (evt) {
      console.log("add ...");
      var title = $("#pub-title").val();
      var biblioid = $("#pub-biblioid").val();
      if (!title || !biblioid) {
        displayActionFailure("Required field(s) missing");
        return;
      }
      var year = $("#pub-year").val();
      if (year != "") {
        // Better use Number.isInteger if the engine has EcmaScript 6
        if (isNaN(year)) {
          displayActionFailure("Invalid year");
          return;
        }
        year = Number(year);
      } else {
        year = null;
      }

      var file_input = $("#pub-file");
      var selected_file = file_input.get(0).files[0];
      console.log("selected\_file:", selected_file);
      // Keeping a reference on how to reset the file input in the UI once we
      // have its value, but instead of doing that we rather use a "reset" type
      // input in the HTML form.
      //file\_input.val(null);
      var file_url = $("#pub-file-url").val();
      if (selected_file) {
        addPublication(biblioid, title, year, selected_file);
      } else if (file_url) {
        addPublicationFromUrl(biblioid, title, year, file_url);
      } else {
        addPublication(biblioid, title, year);
      }
    });

    $("#delete-button").click(function (evt) {
      console.log("delete ...");
      var biblioid = $("#pub-biblioid-to-delete").val();
      var key = $("#key-to-delete").val();

      if (biblioid != "") {
        deletePublicationFromBib(biblioid);
      } else if (key != "") {
        // Better use Number.isInteger if the engine has EcmaScript 6
        if (key == "" || isNaN(key)) {
          displayActionFailure("Invalid key");
          return;
        }
        key = Number(key);
        deletePublication(key);
      }
    });

    $("#clear-store-button").click(function (evt) {
      clearObjectStore();
    });

    var search_button = $("#search-list-button");
    search_button.click(function (evt) {
      displayPubList();
    });
  }

  openDb();
  addEventListeners();
})(); // Immediately-Invoked Function Expression (IIFE)
```

Test the online live demoNext step
---------

If you want to start tinkering with the API, jump in to the reference documentation and checking out the different methods.

See also
--------

Reference

* IndexedDB API Reference
* Indexed Database API Specification
* Using IndexedDB in chrome

Tutorials

* A simple TODO list using HTML5 IndexedDB.

**Примечание:** This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed `setVersion()` method.
* Databinding UI Elements with IndexedDB

Related articles

* IndexedDB — The Store in Your Browser

Firefox

* Mozilla interface files0


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

Navigation Timing API
=====================

**Navigation Timing API** предоставляет данные, которые могут быть использованы для измерения производительности веб-сайта. В отличие от других механизмов на основе JavaScript, которые были использованы с той же целью, этот API может предоставить полную и точную информацию о задержке в получении данных.

Следующий пример демонстрирует как можно измерить время загрузки страницы с точки зрения пользователя:
```

function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}
```

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

* navigationStart
* unloadEventStart
* unloadEventEnd
* redirectStart
* redirectEnd
* fetchStart
* domainLookupStart
* domainLookupEnd
* connectStart
* connectEnd
* secureConnectionStart
* requestStart
* responseStart
* responseEnd
* domLoading
* domInteractive
* domContentLoadedEventStart
* domContentLoadedEventEnd
* domComplete
* loadEventStart
* loadEventEnd

Объект `window.performance.navigation` хранит два атрибута, которые могут быть использованы, для определения была ли страница загружена в последствии перенаправления, использования навигации по страницам в браузере или обычной загрузки по ссылке.

window.performance.navigation.type:

| Флаг | Значение | Описание |
| --- | --- | --- |
| `TYPE_NAVIGATE` | 0 | Навигация началась после нажатия на ссылку, ввода URL в адресную строку браузера, подтверждения формы или после выполнения действия, отличного от действий описанных в флагах TYPE\_RELOAD и TYPE\_BACK\_FORWARD. |
| `TYPE_RELOAD` | 1 | Навигация путём перегрузки страницы или выполнения метода location.reload(). |
| `TYPE_BACK_FORWARD` | 2 | Навигация по истории переходов по страницам в браузере. |
| `TYPE_UNDEFINED` | 255 | Любой другой тип навигации не описанный выше. |

`window.performance.navigation.redirectCount` отображает количество переадресаций до последней страницы, если они происходили.

Navigation Timing API может быть использован для сбора данных о производительности на стороне клиента при отправке асинхронных запросов на сервер, а также для получения данных, которые нельзя получить с помощью других средств, таких как время выгрузки предыдущей страницы, время DNS запроса, время полной загрузки страницы.

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

Вычисление времени полной загрузки страницы:
```

var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
```

Вычисление времени выполнения запроса:
```

var connectTime = perfData.responseEnd - perfData.requestStart;
```

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

* `PerformanceNavigationTiming` (en-US)
* `PerformanceResourceTiming` (en-US)


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

CanvasRenderingContext2D.getImageData()
=======================================

**`CanvasRenderingContext2D.getImageData()`** - метод Canvas 2D API, возвращает объект `ImageData`, представляющий базовые пиксельные данные для области холста, обозначенного прямоугольником, который начинается в точке *(sx, sy)* и имеет ширину *sw* и высоту *sh*.

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

ImageData ctx.getImageData(sx, sy, sw, sh);
```

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

`sx`

Координата x верхнего левого угла прямоугольника, из которого будет извлечён ImageData.

`sy`

Координата y верхнего левого угла прямоугольника, из которого будет извлечён ImageData.

`sw`

Ширина прямоугольника, из которого будет извлечён ImageData.

`sh`

Высота прямоугольника, из которого будет извлечён ImageData.

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

Объект `ImageData`, содержащий данные изображения для данного прямоугольника холста.

### Выбрасываемые ошибки

`IndexSizeError`

Выбрасывает, если аргумент высоты или ширины равен нулю.

`SecurityError`

The canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. To avoid `SecurityError` being thrown in this situation, configure CORS to allow the source image to be used in this way. See Allowing cross-origin use of images and canvas.

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

### Getting image data from a canvas

This example draws a rectangle, and then uses `getImageData()` to grab a portion of the canvas.

#### HTML

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

#### JavaScript

The object retrieved by `getImageData()` has a width of 200 and a height of 100, for a total of 20,000 pixels. Of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle).

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();

let imageData = ctx.getImageData(60, 60, 200, 100);
ctx.putImageData(imageData, 150, 10);
```

#### Result

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-getimagedata-dev |

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

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

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

* Интерфейс, определяющий его, `CanvasRenderingContext2D`.
* `ImageData`
* Pixel manipulation with canvas


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

CanvasRenderingContext2D.rect()
===============================

Метод **`CanvasRenderingContext2D.rect()`**, предоставляемый Canvas 2D API, создаёт контур прямоугольника в позиции *(x, y)*, размеры которого устанавливаются аргументами *width* и *height*. Четыре точки прямоугольника соединяются прямыми линиями, и получившийся фрагмент контура отмечается как замкнутый, так что вы можете выполнить его заливку или обрисовать контур.

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

void ctx.rect(x, y, width, height);
```

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

`x`

Координата начальной точки прямоугольника по оси x.

`y`

Координата начальной точки прямоугольника по оси y.

`width`

Ширина прямоугольника.

`height`

Высота прямоугольника.

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

### Использование метода `rect`

Ниже представлен простой фрагмент кода, использующий метод `rect` для создания контура. Для того чтобы нарисовать контур на холсте вы можете воспользоваться методами `fill()` или `stroke()`. Обратите внимание так же на методы `fillRect()` и `strokeRect()` которые могут сделать тоже самое за один раз .

#### HTML

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

#### JavaScript

```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
```

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:
```

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

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

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

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

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

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

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-rect-dev |

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

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

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

* Интерфейс, предоставляющий данный метод: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect`
* `CanvasRenderingContext2D.strokeRect()`
* `CanvasRenderingContext2D.fill()`
* `CanvasRenderingContext2D.stroke()`


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

CanvasRenderingContext2D.arcTo()
================================

В Canvas 2D API есть метод **`CanvasRenderingContext2D.arcTo()`**. Он добавляет дугу к контуру (path) с заданными контрольными точками и радиусом, соединяя их прямой линией с предыдущей точкой контура.

Обычно метод используется для скругления углов.

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

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

void ctx.arcTo(x1, y1, x2, y2, radius);
```

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

`x1`

Координата **x** первой контрольной точки.

`y1`

Координата **y** первой контрольной точки.

`x2`

Координата **x** второй контрольной точки.

`y2`

Координата **y** второй контрольной точки.

`radius`

Радиус дуги. Не может быть отрицательным.

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

### Как работает arcTo

Один из способов понять как работает `arcTo()` - представить две прямые линии: одна идёт от начальной точки к первой контрольной точке, а вторая от этой точки до второй контрольной точки. Без `arcTo()` эти два сегмента образовали бы острый угол: `arcTo()` создаёт дугу между этими двумя точками и сглаживает его. Другими словами, дуга является касательной для обеих линий.

#### HTML

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

#### JavaScript

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

// Касательная линия
ctx.beginPath();
ctx.strokeStyle = "gray";
ctx.moveTo(200, 20);
ctx.lineTo(200, 130);
ctx.lineTo(50, 20);
ctx.stroke();

// Дуга
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.moveTo(200, 20);
ctx.arcTo(200, 130, 50, 20, 40);
ctx.stroke();

// Начальная точка
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(200, 20, 5, 0, 2 \* Math.PI);
ctx.fill();

// Контрольные точки
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(200, 130, 5, 0, 2 \* Math.PI); // Первая контрольная точка
ctx.arc(50, 20, 5, 0, 2 \* Math.PI); // Вторая контрольная точка
ctx.fill();
```

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

В этом примере контур, созданный с помощью `arcTo()` **жирный и чёрный**. Касательная линия серия, контрольные точки красные, а начальная точка синяя.

### Создание скруглённого угла

В этом примере создаётся скруглённый угол с использованием `arcTo()`. Это ещё один метод, который часто используется.

#### HTML

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

#### JavaScript

Дуга начинается в точке, заданной в `moveTo()`: (230, 20). Она сформирована так, чтобы соответствовать точкам на (90, 130) и (20, 20) с радиусом 50. Метод `lineTo()` соединяет дугу с (20, 20) прямой линией. Заметьте, что вторая контрольная точка дуги и точка, заданная в `lineTo()` одинаковые, что создаёт абсолютно гладкий угол.

```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const p0 = { x: 230, y: 20 };
const p1 = { x: 90, y: 130 };
const p2 = { x: 20, y: 20 };

const labelPoint = function (p) {
  const offset = 15;
  ctx.fillText("(" + p.x + "," + p.y + ")", p.x + offset, p.y + offset);
};

ctx.beginPath();
ctx.moveTo(p0.x, p0.y);
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
ctx.lineTo(p2.x, p2.y);

labelPoint(p0);
labelPoint(p1);
labelPoint(p2);

ctx.stroke();
```

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

### Результат с большим радиусом

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

#### HTML

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

#### JavaScript

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

ctx.beginPath();
ctx.moveTo(180, 90);
ctx.arcTo(180, 130, 110, 130, 130);
ctx.lineTo(110, 130);
ctx.stroke();
```

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

### Живая демонстрация

Более сложная демонстрация метода. Вы можете поиграть с диапазоном ввода, чтобы увидеть, как изменяется дуга.

#### HTML

```html
<div>
  <label for="radius">Radius: </label>
  <input name="radius" type="range" id="radius" min="0" max="100" value="50" />
  <label for="radius" id="radius-output">50</label>
</div>
<canvas id="canvas"></canvas>
```

#### JavaScript

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

const controlOut = document.getElementById("radius-output");
const control = document.getElementById("radius");
control.oninput = () => {
  controlOut.textContent = r = control.value;
};

const mouse = { x: 0, y: 0 };

let r = 100; // Radius
const p0 = { x: 0, y: 50 };

const p1 = { x: 100, y: 100 };
const p2 = { x: 150, y: 50 };
const p3 = { x: 200, y: 100 };

const labelPoint = function (p, offset, i = 0) {
  const { x, y } = offset;
  ctx.beginPath();
  ctx.arc(p.x, p.y, 2, 0, Math.PI \* 2);
  ctx.fill();
  ctx.fillText(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y);
};

const drawPoints = function (points) {
  for (let i = 0; i < points.length; i++) {
    var p = points[i];
    labelPoint(p, { x: 0, y: -20 }, i);
  }
};

// Draw arc
const drawArc = function ([p0, p1, p2], r) {
  ctx.beginPath();
  ctx.moveTo(p0.x, p0.y);
  ctx.arcTo(p1.x, p1.y, p2.x, p2.y, r);
  ctx.lineTo(p2.x, p2.y);
  ctx.stroke();
};

let t0 = 0;
let rr = 0; // радиус, который меняется со временем
let a = 0; // angle
let PI2 = Math.PI \* 2;
const loop = function (t) {
  t0 = t / 1000;
  a = t0 % PI2;
  rr = Math.abs(Math.cos(a) \* r);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawArc([p1, p2, p3], rr);
  drawPoints([p1, p2, p3]);
  requestAnimationFrame(loop);
};

loop(0);
```

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

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

| Specification |
| --- |
| HTML Standard # dom-context-2d-arcto-dev |

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

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

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

* Элемент определяющий этот метод, `CanvasRenderingContext2D`