recursal/MDN huggingface dataset:
BluetoothCharacteristicProperties
=================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`BluetoothCharacteristicProperties`** interface of the Web Bluetooth API provides the operations that are valid on the given `BluetoothRemoteGATTCharacteristic`.

This interface is returned by calling `BluetoothRemoteGATTCharacteristic.properties`.

Instance properties
-------------------

`authenticatedSignedWrites` Read only  
Experimental

Returns a `boolean` that is `true` if signed writing to the characteristic value is permitted.

`broadcast` Read only  
Experimental

Returns a `boolean` that is `true` if the broadcast of the characteristic value is permitted using the Server Characteristic Configuration Descriptor.

`indicate` Read only  
Experimental

Returns a `boolean` that is `true` if indications of the characteristic value with acknowledgement is permitted.

`notify` Read only  
Experimental

Returns a `boolean` that is `true` if notifications of the characteristic value without acknowledgement is permitted.

`read` Read only  
Experimental

Returns a `boolean` that is `true` if the reading of the characteristic value is permitted.

`reliableWrite` Read only  
Experimental

Returns a `boolean` that is `true` if reliable writes to the characteristic is permitted.

`writableAuxiliaries` Read only  
Experimental

Returns a `boolean` that is `true` if reliable writes to the characteristic descriptor is permitted.

`write` Read only  
Experimental

Returns a `boolean` that is `true` if the writing to the characteristic with response is permitted.

`writeWithoutResponse` Read only  
Experimental

Returns a `boolean` that is `true` if the writing to the characteristic without response is permitted.

Examples
--------

The following example shows how tell if a GATT characteristic supports value change notifications.


```js
let device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ["heart\_rate"] }],
});
let gatt = await device.gatt.connect();
let service = await gatt.getPrimaryService("heart\_rate");
let characteristic = await service.getCharacteristic("heart\_rate\_measurement");
if (characteristic.properties.notify) {
  characteristic.addEventListener(
    "characteristicvaluechanged",
    async (event) => {
      console.log(`Received heart rate measurement: ${event.target.value}`);
    },
  );
  await characteristic.startNotifications();
}
```

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

| Specification |
| --- |
| Web Bluetooth # characteristicproperties-interface |

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

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

The **`MathMLElement`** interface represents any MathML element.

EventTarget

Node

Element

MathMLElementInstance properties
-------------------

*Also inherits properties from its parent, `Element`*.

`MathMLElement.attributeStyleMap` Read only 

A `StylePropertyMap` representing the declarations of the element's `style` attribute.

`MathMLElement.style`

A `CSSStyleDeclaration` representing the declarations of the element's `style` attribute.

Instance methods
----------------

*This interface has no methods, but inherits methods from its parent, `Element`*.

Examples
--------

### MathML


```html
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>
```

### JavaScript


```js
document.querySelector("msqrt").constructor.name; // MathMLElement
```

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

| Specification |
| --- |
| MathML Core # dom-mathmlelement |

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

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

See also
--------

* `Element`
* `HTMLElement`
* `SVGElement`
XRProjectionLayer
=================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`XRProjectionLayer`** interface of the WebXR Device API is a layer that fills the entire view of the observer and is refreshed close to the device's native frame rate.

`XRProjectionLayer` is supported by all `XRSession` objects (no `layers` feature descriptor is needed).

 To create a new `XRProjectionLayer`, call `XRWebGLBinding.createProjectionLayer()`.
 To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

`XRProjectionLayer` objects don't have an associated `XRSpace`, because they render to the full frame.

EventTarget

XRLayer

XRCompositionLayer

XRProjectionLayerInstance properties
-------------------

*Inherits properties from its parent, `XRCompositionLayer` and `EventTarget`.*

`XRProjectionLayer.fixedFoveation` 
Experimental

A number indicating the amount of foveation used by the XR compositor for the layer. Fixed Foveated Rendering (FFR) renders the edges of the eye textures at a lower resolution than the center and reduces the GPU load.

`XRProjectionLayer.ignoreDepthValues` Read only  
Experimental

A boolean indicating that the XR compositor is not making use of depth buffer values when rendering the layer.

`XRProjectionLayer.textureArrayLength` Read only  
Experimental

The layer's layer count for array textures when using `texture-array` as the `textureType`.

`XRProjectionLayer.textureHeight` Read only  
Experimental

The height in pixels of the color textures of this layer.

`XRProjectionLayer.textureWidth` Read only  
Experimental

The width in pixels of the color textures of this layer.

Instance methods
----------------

*Inherits methods from its parents, `XRCompositionLayer` and `EventTarget`*.

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

| Specification |
| --- |
| WebXR Layers API Level 1 # xrprojectionlayertype |

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

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

See also
--------

* `XRLayer`
* `EventTarget`
* `XRCompositionLayer`
* `XREquirectLayer`
* `XRCubeLayer`
* `XRCylinderLayer`
* `XRQuadLayer`
FileSystemDirectoryEntry
========================

The **`FileSystemDirectoryEntry`** interface of the File and Directory Entries API represents a directory in a file system. It provides methods which make it possible to access and manipulate the files in a directory, as well as to access the entries within the directory.

FileSystemEntry

FileSystemDirectoryEntryBasic concepts
--------------

You can create a new directory by calling `getDirectory()`. If you want to create subdirectories, create each child directory in sequence. If you try creating a directory using a full path that includes parent directories that do not exist yet, an error is returned. So create the hierarchy by recursively adding a new path after creating the parent directory.

### Example

In the following code snippet, we create a directory called "Documents."


```js
// Taking care of the browser-specific prefixes.
window.requestFileSystem =
  window.requestFileSystem || window.webkitRequestFileSystem;
window.directoryEntry = window.directoryEntry || window.webkitDirectoryEntry;

// …

function onFs(fs) {
  fs.root.getDirectory(
    "Documents",
    { create: true },
    (directoryEntry) => {
      //directoryEntry.isFile === false
      //directoryEntry.isDirectory === true
      //directoryEntry.name === 'Documents'
      //directoryEntry.fullPath === '/Documents'
    },
    onError,
  );
}

// Opening a file system with temporary storage
window.requestFileSystem(TEMPORARY, 1024 \* 1024 /\*1MB\*/, onFs, onError);
```

Instance properties
-------------------

*This interface has no properties of its own, but inherits properties from its parent interface, `FileSystemEntry`.*

Instance methods
----------------

*This interface inherits methods from its parent interface, `FileSystemEntry`.*

`createReader()`

Creates a `FileSystemDirectoryReader` object which can be used to read the entries in this directory.

`getDirectory()`

Returns a `FileSystemDirectoryEntry` object representing a directory located at a given path, relative to the directory on which the method is called.

`getFile()`

Returns a `FileSystemFileEntry` object representing a file located within the directory's hierarchy, given a path relative to the directory on which the method is called.

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

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

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

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

See also
--------

* File and Directory Entries API
* Introduction to the File and Directory Entries API
* `FileSystemDirectoryReader`
* `FileSystemEntry`
* `FileSystemFileEntry`
IDBVersionChangeEvent
=====================

The **`IDBVersionChangeEvent`** interface of the IndexedDB API indicates that the version of the database has changed, as the result of an `onupgradeneeded` event handler function.

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

Event

IDBVersionChangeEventConstructor
-----------

`IDBVersionChangeEvent()`

Creates and returns a new `IDBVersionChangeEvent` object which is used to represent when a version of the database has changed.

Instance properties
-------------------

*Also inherits properties from its parent, `Event` interface.*

`IDBVersionChangeEvent.oldVersion` Read only 

Returns the old version of the database.

`IDBVersionChangeEvent.newVersion` Read only 

Returns the new version of the database.

Instance methods
----------------

*No specific method, but inherits methods from its parent, `Event` interface.*

Example
-------

In the following code snippet, we make a request to open a database, and include handlers for the success and error cases. Upon a version change (after an `upgradeneeded` event), the `success` event will implement the `IDBVersionChangeEvent` interface. For a full working example, see our To-do Notifications app (view 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.
  const db = DBOpenRequest.result;
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # events |

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

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

See also
--------

* Using IndexedDB
* 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).
SpeechRecognitionResultList
===========================

The **`SpeechRecognitionResultList`** interface of the Web Speech API represents a list of `SpeechRecognitionResult` objects, or a single one if results are being captured in `non-continuous` mode.

Instance properties
-------------------

`SpeechRecognitionResultList.length` Read only 

Returns the length of the "array" — the number of `SpeechRecognitionResult` objects in the list.

Instance methods
----------------

`SpeechRecognitionResultList.item`

A standard getter that allows `SpeechRecognitionResult` objects in the list to be accessed via array syntax.

Examples
--------

This code is excerpted from our Speech color changer example.


```js
recognition.onresult = (event) => {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
  // It has a getter so it can be accessed like an array
  // The first [0] returns the SpeechRecognitionResult at position 0.
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects
  // that contain individual results.
  // These also have getters so they can be accessed like arrays.
  // The second [0] returns the SpeechRecognitionAlternative at position 0.
  // We then return the transcript property of the SpeechRecognitionAlternative object
  const color = event.results[0][0].transcript;
  diagnostic.textContent = `Result received: ${color}.`;
  bg.style.backgroundColor = color;
};
```

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

| Specification |
| --- |
| Web Speech API # speechreco-resultlist |

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

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

See also
--------

* Web Speech API
EventTarget
===========

 The **`EventTarget`** interface is implemented by objects that can receive events and may have listeners for them.
 In other words, any target of events implements the three methods associated with this interface.

`Element`, and its children, as well as `Document` and `Window`, are the most common event targets,
 but other objects can be event targets, too.
 For example `IDBRequest`, `AudioNode`, and `AudioContext` are also event targets.

Many event targets (including elements, documents, and windows) also support setting event handlers via `onevent` properties and attributes.

Constructor
-----------

`EventTarget()`

Creates a new `EventTarget` object instance.

Instance methods
----------------

`EventTarget.addEventListener()`

Registers an event handler of a specific event type on the `EventTarget`.

`EventTarget.removeEventListener()`

Removes an event listener from the `EventTarget`.

`EventTarget.dispatchEvent()`

Dispatches an event to this `EventTarget`.

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

| Specification |
| --- |
| DOM Standard # interface-eventtarget |

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

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

See also
--------

* Event reference – the events available in the platform.
* Introduction to events
* `Event` interface
PerformancePaintTiming
======================

The **`PerformancePaintTiming`** interface provides timing information about "paint" (also called "render") operations during web page construction. "Paint" refers to conversion of the render tree to on-screen pixels.

There are two key paint moments this API provides:

* First paint (FP): Time when anything is rendered. Note that the marking of the first paint is optional, not all user agents report it.
* First contentful paint (FCP): Time when the first bit of DOM text or image content is rendered.

A third key paint moment is provided by the `LargestContentfulPaint` API:

* Largest contentful paint (LCP): Render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load.

The data this API provides helps you minimize the time that users have to wait before they can see the site's content start to appear. Decreasing the time until these key paint moments make sites feel more responsive, performant, and engaging for your users.

Like other Performance APIs, this API extends `PerformanceEntry`.

PerformanceEntry

PerformancePaintTimingInstance properties
-------------------

This interface has no properties but it extends the following `PerformanceEntry` properties by qualifying and constraining the properties as follows:

`PerformanceEntry.entryType`

Returns "`paint`".

`PerformanceEntry.name`

Returns either `"first-paint"` or `"first-contentful-paint"`.

`PerformanceEntry.startTime`

Returns the `timestamp` when the paint occurred.

`PerformanceEntry.duration`

Returns 0.

Instance methods
----------------

This interface has no methods.

Examples
--------

### Getting paint timings

Example using a `PerformanceObserver`, which notifies of new `paint` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `The time to ${entry.name} was ${entry.startTime} milliseconds.`,
    );
    // Logs "The time to first-paint was 386.7999999523163 milliseconds."
    // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
  });
});

observer.observe({ type: "paint", buffered: true });
```


Example using `Performance.getEntriesByType()`, which only shows `paint` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
  console.log(`The time to ${entry.name} was ${entry.startTime} milliseconds.`);
  // Logs "The time to first-paint was 386.7999999523163 milliseconds."
  // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});
```

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

| Specification |
| --- |
| Paint Timing # sec-PerformancePaintTiming |

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

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

### See also

* `LargestContentfulPaint`
SVGPoint
========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Warning:** `SVGPoint` is deprecated.
 Use `DOMPoint` or `DOMPointReadOnly` instead.


An `SVGPoint` represents a 2D or 3D point in the SVG coordinate system.

Syntax
------


```js
createSVGPoint()
```

### Value

The returned value is an `SVGPoint` object.

Example
-------


```js
// Create an SVGPoint in the user coordinate system
let s = document.getElementById("SVG-ElementID").createSVGPoint();

// Then, set the x and y values of the returned SVGPoint object
// (which is the variable `s`)
s.y = 10;
s.x = 10;
```

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
atob() global function
======================

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

 The **`atob()`** function decodes a
 string of data which has been encoded using Base64 encoding. You can use
 the `btoa()` method to encode and transmit
 data which may otherwise cause communication problems, then transmit it and use the
 `atob()` method to decode the data again. For example, you can encode,
 transmit, and decode control characters such as ASCII values 0 through 31.

For use with arbitrary Unicode strings, see The "Unicode Problem" section of the Base64 glossary entry.

Syntax
------


```js
atob(encodedData)
```

### Parameters

`encodedData`

A binary string (i.e., a string in which each character in the string is treated as a byte of binary data) containing base64-encoded data.

### Return value

An ASCII string containing decoded data from `encodedData`.

### Exceptions

`InvalidCharacterError` `DOMException`

Thrown if `encodedData` is not valid base64.

Examples
--------


```js
const encodedData = btoa("Hello, world"); // encode a string
const decodedData = atob(encodedData); // decode the string
```

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

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

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

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

See also
--------

* A polyfill of `atob` is available in `core-js`
* `data` URLs
* `btoa()`
XRHitTestResult
===============

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`XRHitTestResult`** interface of the WebXR Device API contains a single result of a hit test. You can get an array of `XRHitTestResult` objects for a frame by calling `XRFrame.getHitTestResults()`.

Instance properties
-------------------

None.

Instance methods
----------------

`XRHitTestResult.createAnchor()` 
Experimental

Returns a `Promise` that resolves with an `XRAnchor` created from the hit test result.

`XRHitTestResult.getPose()` 
Experimental

Returns the `XRPose` of the hit test result relative to the given base space.

Examples
--------

### Getting `XRHitTestResult` objects within the frame loop

In addition to showing `XRHitTestResult` within a frame loop, this example demonstrates a few things you must do before requesting this object. While setting up the session, specify `"hit-test"` as one of the `requiredFeatures`. Next, call `XRSession.requestHitTestSource()` with the desired references. (Obtain this by calling `XRSession.requestReferenceSpace()`.) This returns a `XRHitTestSource`. That you will use in the frame loop to get `XRHitTestResult` objects.


```js
const xrSession = navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["local", "hit-test"],
});

let hitTestSource = null;

xrSession
  .requestHitTestSource({
    space: viewerSpace, // obtained from xrSession.requestReferenceSpace("viewer");
    offsetRay: new XRRay({ y: 0.5 }),
  })
  .then((viewerHitTestSource) => {
    hitTestSource = viewerHitTestSource;
  });

// frame loop
function onXRFrame(time, xrFrame) {
  let hitTestResults = xrFrame.getHitTestResults(hitTestSource);

  // do things with the hit test results
}
```

### Getting the hit test result's pose

Use `getPose()` to query the result's pose.


```js
let hitTestResults = xrFrame.getHitTestResults(hitTestSource);

if (hitTestResults.length > 0) {
  let pose = hitTestResults[0].getPose(referenceSpace);
}
```

### Creating an anchor from a hit test result

Once you find intersections on real-world surfaces using hit testing, you can create an `XRAnchor` to attach a virtual object to that location.


```js
hitTestResult.createAnchor().then(
  (anchor) => {
    // add anchored objects to the scene
  },
  (error) => {
    console.error(`Could not create anchor: ${error}`);
  },
);
```

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

| Specification |
| --- |
| WebXR Hit Test Module # xr-hit-test-result-interface |

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

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

See also
--------

* `XRTransientInputHitTestResult`
* `XRPose`
* `XRAnchor`