recursal/MDN huggingface dataset:
IDBFactory: open() method
=========================

The **`open()`** method of the `IDBFactory` interface requests opening a connection to a database.

 The method returns an `IDBOpenDBRequest` object immediately, and performs the open operation asynchronously.
 If the operation is successful, a `success` event is fired on the request object that is returned from this method, with its `result` attribute set to the new `IDBDatabase` object for the connection.

May trigger `upgradeneeded`, `blocked` or `versionchange` events.

**Note:** This feature is available in Web Workers

Syntax
------


```js
open(name)
open(name, version)
```

### Parameters

`name`

The name of the database.

`version` Optional

 Optional. The version to open the database with. If the version is not provided and the database exists, then a connection to the database will be opened without changing its version.
 If the version is not provided and the database does not exist, then it will be created with version `1`.


### Return value

A `IDBOpenDBRequest` object on which subsequent events related to this request are fired.

If the operation is successful, the value of the request's `result` property is a `IDBDatabase` object representing the connection to the database.

### Exceptions

`TypeError`

Thrown if the value of `version` is not a number greater than zero.

Examples
--------

Example of calling `open` with the current specification's `version` parameter:


```js
const request = window.indexedDB.open("toDoList", 4);
```


 In the following code snippet, we make a request to open a database, and include handlers for the success and error cases.
 For a full working example, see our To-do Notifications app (View the example live).


```js
const note = document.querySelector("ul");

// Let us open version 4 of our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// these two event handlers act on the database being opened
// successfully, or not
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>Error loading database.</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";

  // store the result of opening the database in the db
  // variable. This is used a lot later on, for opening
  // transactions and suchlike.
  db = DBOpenRequest.result;
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbfactory-open② |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Browser storage quotas and eviction criteria.
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
WEBGL\_lose\_context: loseContext() method
==========================================

 The **WEBGL\_lose\_context.loseContext()** method is part of the WebGL API and allows you to simulate losing
 the context of a `WebGLRenderingContext` context.

 It triggers the steps described in the WebGL specification for handling context lost.
 The context will remain lost until `WEBGL_lose_context.restoreContext()` is
 called.

Syntax
------


```js
loseContext()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

 With this method, you can simulate the
 `webglcontextlost`
 event:


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

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

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

// WebGLContextEvent event with type "webglcontextlost" is logged.
```

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

| Specification |
| --- |
| WebGL WEBGL\_lose\_context Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

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

See also
--------

* `WebGLRenderingContext.isContextLost()`
* Events:
 `webglcontextlost`,
 `webglcontextrestored`,
 `webglcontextcreationerror`
WEBGL\_lose\_context: restoreContext() method
=============================================

 The **WEBGL\_lose\_context.restoreContext()** method is part of the WebGL API and allows you to simulate
 restoring the context of a `WebGLRenderingContext` object.

Syntax
------


```js
restoreContext()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

Browsers may not report WebGL errors by default. WebGL's error reporting works by calling `getError()` and checking for errors. The following exceptions may be thrown:

`INVALID_OPERATION`

Thrown if the context was not lost.

Examples
--------

 With this method, you can simulate the
 `webglcontextrestored`
 event:


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

canvas.addEventListener(
  "webglcontextrestored",
  (e) => {
    console.log(e);
  },
  false,
);

gl.getExtension("WEBGL\_lose\_context").restoreContext();
```

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

| Specification |
| --- |
| WebGL WEBGL\_lose\_context Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

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

See also
--------

* `WebGLRenderingContext.isContextLost()`
* Events:
 `webglcontextlost`,
 `webglcontextrestored`,
 `webglcontextcreationerror`
HTMLDialogElement: showModal() method
=====================================

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

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

* Learn more
* See full compatibility
* Report feedback

 The **`showModal()`** method of the
 `HTMLDialogElement` interface displays the dialog as a modal, over the top
 of any other dialogs that might be present. It displays in the top layer, along with a
 `::backdrop` pseudo-element. Interaction outside the dialog is blocked and
 the content outside it is rendered inert.

Syntax
------


```js
showModal()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the dialog is already open (i.e. if the `open` attribute is already set on the `<dialog>` element), or if the dialog is also a popover that is already being shown.

Examples
--------

### Opening a modal dialog

The following example shows a button that, when clicked, opens a modal `<dialog>` containing a form via the `HTMLDialogElement.showModal()` function. While open, everything other than the modal dialog's contents is inert. From there you can click the *Cancel* button to close the dialog (via the `HTMLDialogElement.close()` function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a `close` event, not a `cancel` event.

#### HTML


```html
<!-- pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal" name="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </p>
    <div>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </div>
  </form>
</dialog>

<div>
  <button id="updateDetails">Update details</button>
</div>
```


#### JavaScript


```js
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";

function openCheck(dialog) {
  if (dialog.open) {
    console.log("Dialog open");
  } else {
    console.log("Dialog closed");
  }
}

// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
  dialog.showModal();
  openCheck(dialog);
});

// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
  dialog.close("animalNotChosen");
  openCheck(dialog);
});
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-dialog-showmodal-dev |

Browser compatibility
---------------------

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

See also
--------

* The HTML element implementing this interface: `<dialog>`.
HTMLDialogElement: open property
================================

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

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

* Learn more
* See full compatibility
* Report feedback

 The **`open`** property of the
 `HTMLDialogElement` interface is a boolean value reflecting the
 `open` HTML attribute, indicating whether the `<dialog>` is
 available for interaction.

Value
-----

 A boolean value representing the state of the `open` HTML attribute. `true` means it is set, and therefore the dialog
 is shown. `false` means it not set, and therefore the dialog is not shown.

 The property is not read only — it is possible to set the value to programmatically
 show or hide the dialog.

Examples
--------

 The following example shows a simple button that, when clicked, opens a
 `<dialog>` containing a form via the `showModal()` method.
 From there you can click the *Cancel* button to close the dialog (via the
 `HTMLDialogElement.close()` method), or submit the form via the submit
 button.


```html
<!-- Simple pop-up dialog box -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="dialogStatus"></p>

<script>
 (() => {
 const openDialog = document.getElementById("openDialog");
 const dialog = document.getElementById("dialog");
 const text = document.getElementById("dialogStatus");

 function openCheck(dialog) {
 if (dialog.open) {
 text.innerText = "Dialog open";
 } else {
 text.innerText = "Dialog closed";
 }
 }

 // Update button opens a modal dialog
 openDialog.addEventListener("click", () => {
 dialog.showModal();
 openCheck(dialog);
 });

 dialog.addEventListener("close", () => {
 openCheck(dialog);
 });
 })();
</script>
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-dialog-open |

Browser compatibility
---------------------

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

See also
--------

* The HTML element implementing this interface: `<dialog>`.
HTMLDialogElement: close event
==============================

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

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

* Learn more
* See full compatibility
* Report feedback
The `close` event is fired on an `HTMLDialogElement` object when the `<dialog>` it represents has been closed.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("close", (event) => {});

onclose = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

### Live example

#### HTML


```html
<dialog class="example-dialog">
  <form method="dialog">
    <button>Close via method="dialog"</button>
  </form>
  <button class="close">Close via .close() method</button>
  <p>Or hit the <kbd>Esc</kbd> key</p>
</dialog>

<button class="open-dialog">Open dialog</button>

<div class="result"></div>
```


```
button,
div {
  margin: 0.5rem;
}
```


#### JavaScript


```js
const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");
dialog.addEventListener("close", (event) => {
  result.textContent = "dialog was closed";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  dialog.showModal();
  result.textContent = "";
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});
```


#### Result

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

| Specification |
| --- |
| HTML Standard # event-close |

Browser compatibility
---------------------

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

See also
--------

* HTML `<dialog>` element
HTMLDialogElement: show() method
================================

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

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

* Learn more
* See full compatibility
* Report feedback

 The **`show()`** method of the `HTMLDialogElement`
 interface displays the dialog modelessly, i.e. still allowing interaction with content
 outside of the dialog.

Syntax
------


```js
show()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

 The following example shows a simple button that, when clicked, opens a
 `<dialog>` containing a form via the `show()` method. From
 there you can click the *Cancel* button to close the dialog (via the
 `HTMLDialogElement.close()` method), or submit the form via the submit
 button.


```html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (() => {
 const updateButton = document.getElementById("updateDetails");
 const cancelButton = document.getElementById("cancel");
 const dialog = document.getElementById("favDialog");
 dialog.returnValue = "favAnimal";

 function openCheck(dialog) {
 if (dialog.open) {
 console.log("Dialog open");
 } else {
 console.log("Dialog closed");
 }
 }

 // Update button opens a modeless dialog
 updateButton.addEventListener("click", () => {
 dialog.show();
 openCheck(dialog);
 });

 // Form cancel button closes the dialog box
 cancelButton.addEventListener("click", () => {
 dialog.close("animalNotChosen");
 openCheck(dialog);
 });
 })();
</script>
```

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

| Specification |
| --- |
| HTML Standard # dom-dialog-show-dev |

Browser compatibility
---------------------

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

See also
--------

* The HTML element implementing this interface: `<dialog>`.
HTMLDialogElement: close() method
=================================

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

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

* Learn more
* See full compatibility
* Report feedback

 The **`close()`** method of the `HTMLDialogElement` interface closes the `<dialog>`.
 An optional string may be passed as an argument, updating the `returnValue` of the dialog.

Syntax
------


```js
close()
close(returnValue)
```

### Parameters

`returnValue` Optional

A string representing an updated value for the `HTMLDialogElement.returnValue` of the dialog.

### Return value

None (`undefined`).

Examples
--------

 The following example shows a simple button that, when clicked, opens a `<dialog>` containing a form via the `showModal()` method.
 From there you can click the *X* button to close the dialog (via the `HTMLDialogElement.close()` method), or submit the form via the submit button.


```html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <button id="close" aria-label="close" formnovalidate>X</button>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button type="reset">Reset</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (() => {
 const updateButton = document.getElementById("updateDetails");
 const closeButton = document.getElementById("close");
 const dialog = document.getElementById("favDialog");
 dialog.returnValue = "favAnimal";

 function openCheck(dialog) {
 if (dialog.open) {
 console.log("Dialog open");
 } else {
 console.log("Dialog closed");
 }
 }

 // Update button opens a modal dialog
 updateButton.addEventListener("click", () => {
 dialog.showModal();
 openCheck(dialog);
 });

 // Form close button closes the dialog box
 closeButton.addEventListener("click", () => {
 dialog.close("animalNotChosen");
 openCheck(dialog);
 });
 })();
</script>
```


 If the "X" button was of `type="submit"`, the dialog would have closed without requiring JavaScript.
 A form submission closes the `<dialog>` it is nested within if the form's method is `dialog`, so no "close" button is required.

### Result

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

| Specification |
| --- |
| HTML Standard # dom-dialog-close-dev |

Browser compatibility
---------------------

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

See also
--------

* The HTML element implementing this interface: `<dialog>`.
FileList: item() method
=======================

**Note:** This feature is available in Web Workers

The **`item()`** method of the `FileList` interface returns a `File` object representing the file at the specified index in the file list.

Syntax
------


```js
item(index)
```

### Parameters

`index`

The zero-based index of the file to retrieve from the list.

### Return value

A `File` object representing the requested file.

Examples
--------

### Printing the name of a file

In this example, we use `item()` to select the first item in the `FileList`.

#### HTML


```html
<input type="file" />
<div class="output"></div>
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", () => {
  const fileList = fileInput.files;
  if (fileList.length > 0) {
    const file = fileList.item(0);
    output.textContent = `You selected: ${file.name}`;
  }
});
```


#### Result

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

| Specification |
| --- |
| File API # dfn-item |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FileList: length property
=========================

**Note:** This feature is available in Web Workers

The **`length`** read-only property of the `FileList` interface returns the number of files in the `FileList`.

Value
-----

A number indicating the number of files in the list.

Examples
--------

### Printing the number of files selected

In this example, we use `length` to find the number of items in the `FileList`.

#### HTML


```html
<input type="file" multiple />
<div class="output"></div>
```


#### JavaScript


```js
const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", () => {
  const fileList = fileInput.files;
  output.textContent = `You've selected: ${fileList.length} file(s)`;
});
```


#### Result

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

| Specification |
| --- |
| File API # dfn-length |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaTrackSupportedConstraints: latency property
================================================

 The `MediaTrackSupportedConstraints` dictionary's **`latency`** property is a read-only Boolean value which is present (and set to `true`) in the object returned by `MediaDevices.getSupportedConstraints()` if and only if the user agent supports the `latency` constraint.
 If the constraint isn't supported, it's not included in the list, so this value will never be `false`.

You can access the supported constraints dictionary by calling `navigator.mediaDevices.getSupportedConstraints()`.

Value
-----

 This property is present in the dictionary (and its value is always `true`) if the user agent supports the `latency` constraint.
 If the property isn't present, this property is missing from the supported constraints dictionary, and you'll get `undefined` if you try to look at its value.

Examples
--------
```

<div id="result"></div>
```


```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```



```js
const result = document.getElementById("result");
const supported = navigator.mediaDevices.getSupportedConstraints().latency;
result.textContent = supported ? "Supported!" : "Not supported!";
```

### Result

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-latency |

Browser compatibility
---------------------

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

See also
--------

* Media Capture and Streams API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`
MediaTrackSupportedConstraints: deviceId property
=================================================

 The `MediaTrackSupportedConstraints` dictionary's
 **`deviceId`** property is a read-only Boolean value which is
 present (and set to `true`) in the object returned by
 `MediaDevices.getSupportedConstraints()` if and only if the
 user agent supports the `deviceId` constraint. If the
 constraint isn't supported, it's not included in the list, so this value will never be
 `false`.

 You can access the supported constraints dictionary by calling
 `navigator.mediaDevices.getSupportedConstraints()`.

Value
-----

 This property is present in the dictionary (and its value is always `true`)
 if the user agent supports the `deviceId` constraint. If the property isn't
 present, this property is missing from the supported constraints dictionary, and you'll
 get `undefined` if you try to look at its value.

Examples
--------
```

<div id="result"></div>
```


```
#result {
  font:
    14px "Arial",
    sans-serif;
}
```



```js
const result = document.getElementById("result");
const supported = navigator.mediaDevices.getSupportedConstraints().deviceId;
result.textContent = supported ? "Supported!" : "Not supported!";
```

### Result

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatracksupportedconstraints-deviceid |

Browser compatibility
---------------------

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

See also
--------

* Media Capture and Streams API
* `MediaDevices.getSupportedConstraints()`
* `MediaTrackSupportedConstraints`
* `MediaStreamTrack`