recursal/MDN huggingface dataset:
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
======================

`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
===================

Свойство **`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
=====================

Свойство **`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
============

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

Событие `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
============================

Обработчик события 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()
====================================

Метод **`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)
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()
=======================================

**`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()
===============================

Метод **`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.stroke()
=================================

Метод **`CanvasRenderingContext2D.stroke()`** Canvas 2D API обводит текущий или данный контур цветом `strokeStyle`.

Обводка выравнивается по центру контура, другими словами, половина линии обводки рисуется с внутренней стороны контура, и половина с внешней.

Обводка отрисовывается согласно правилу ненулевого индекса, а значит, пересекающиеся части контура также будут обведены.

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

void ctx.stroke();
void ctx.stroke(path);
```

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

`path`

`Path2D` (en-US) - контур, который нужно обвести.

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

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

В этом примере с помощью метода `rect()` создаётся прямоугольник, и затем с помощью `stroke()` отрисовывается на холсте.

#### 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.stroke();
```


Отредактируйте приведённый ниже код и посмотрите, как обновляется рисунок на холсте:
```

<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.stroke();</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-stroke-dev |

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

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

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

* Интерфейс, предоставляющий этот метод - `CanvasRenderingContext2D`.
CanvasRenderingContext2D.globalAlpha
====================================

Свойство **`CanvasRenderingContext2D.globalAlpha`** Canvas 2D API определяет альфа-(прозрачность) значение, которое будет применено к фигурам и картинкам до того как они будут отрисованы на холсте.

**Примечание:** Смотрите также Applying styles and color в Canvas Tutorial.

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

ctx.globalAlpha = value;
```

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

`value`

Число между `0.0` (полная прозрачность) и `1.0` (полная непрозрачность), включительно. Дефолтное значение `1.0`. Значение, не входящее в указанный диапазон, включая `Infinity` и `NaN`, не будут применены, и `globalAlpha` сохранит предыдущее значение или значение по умолчанию.

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

### Отрисовка полупрозрачных фигур

В этом примере используется свойство `globalAlpha` для отрисовки двух полупрозрачных прямоугольников.

#### HTML


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


#### JavaScript


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

ctx.globalAlpha = 0.5;

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
```


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

### Наложение прозрачных фигур

Этот пример демонстрирует эффект наложения нескольких прозрачных фигур друг на друга. Мы начнём с отрисовки непрозрачного фона, состоящего из четырёх разноцветных квадратов. Далее мы устанавливаем свойство `globalAlpha` равное `0.2` (20% прозрачности); Уровень прозрачности будет применён ко всем прозрачным фигурам. Затем мы используем цикл `for` для отрисовки нескольких кругов с увеличивающимися радиусами.

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

<canvas id="canvas" width="150" height="150"></canvas>
```



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

// Рисуем фон
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";

// Устанавливаем уровень прозрачности
ctx.globalAlpha = 0.2;

// Рисуем круги
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 \* i, 0, Math.PI \* 2, true);
  ctx.fill();
}
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

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

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

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

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

Читайте также
-------------

* The interface defining this property: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.globalCompositeOperation` (en-US)