recursal/MDN huggingface dataset:
PerformanceNavigation: toJSON() method
======================================

**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:** This interface of this property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.


The **`toJSON()`** method of the `PerformanceNavigation` interface is a serializer; it returns a JSON representation of the `PerformanceNavigation` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A `JSON` object that is the serialization of the `PerformanceNavigation` object.

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

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigation-tojson |

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

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

See also
--------

* `JSON`
XMLHttpRequestUpload: error event
=================================

The `error` event is fired when the request encountered an error.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Using the `error` event

You can use the `error` event to detect a problem with the upload. For a complete code example that uploads a file and displays a progress bar, see the main `XMLHttpRequestUpload` page.


```js
// In case of an error we hide the progress bar
// Note that this event can be listened to on the xhr object too
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("error", errorAction);
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-error |
| XMLHttpRequest Standard # handler-xhr-onerror |

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

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

See also
--------

* Related events: `loadstart`, `load`, `progress`, `abort`, `loadend`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: load event
================================

The `load` event is fired when an `XMLHttpRequestUpload` transaction completes successfully.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

### Examples

Using the `load` event
----------------------

You can use the `load` event to detect the successful termination of an upload. For a complete code example that uploads a file and displays a progress bar, see the main `XMLHttpRequestUpload` page.


```js
// When the upload is finished, we hide the progress bar.
xhr.upload.addEventListener("load", (event) => {
  progressBar.classList.remove("visible");
  log.textContent = "Upload finished.";
  abortButton.disabled = true;
});
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-load |
| XMLHttpRequest Standard # handler-xhr-onload |

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

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

See also
--------

* Related events: `loadstart`, `progress`, `error`, `loadend`, `abort`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: progress event
====================================

The **`progress`** event is fired periodically when a request receives more data.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

Using the `progress` event
--------------------------

You can use the `progress` event to get info about the progress of a lengthy upload. For a complete code example that uploads a file and displays a progress bar, see the main `XMLHttpRequestUpload` page.


```js
// Each time a progress event is received we update the progress bar
// and the progress message
xhr.upload.addEventListener("progress", (event) => {
  progressBar.value = event.loaded; // Update the progress bar
  log.textContent = `Uploading (${((event.loaded / event.total) \* 100).toFixed(
 2,
 )}%)…`;
});
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-progress |
| XMLHttpRequest Standard # handler-xhr-onprogress |

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

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

See also
--------

* Related events: `loadstart`, `load`, `error`, `loadend`, `timeout`, `abort`
* Monitoring progress
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: loadstart event
=====================================

The **`loadstart`** event is fired when a request has started to load data.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

Using the `loadstart` event
---------------------------

You can use the `loadstart` event to detect the beginning of an upload. For a complete code example that uploads a file and displays a progress bar, see the main `XMLHttpRequestUpload` page.


```js
// When the upload starts, we display the progress bar
xhr.upload.addEventListener("loadstart", (event) => {
  progressBar.classList.add("visible");
  progressBar.value = 0;
  progressBar.max = event.total;
  log.textContent = "Uploading (0%)…";
  abortButton.disabled = false;
});
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-loadstart |
| XMLHttpRequest Standard # handler-xhr-onloadstart |

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

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

See also
--------

* Related events: `load`, `progress`, `error`, `loadend`, `abort`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: abort event
=================================

The `abort` event is fired at `XMLHttpRequestUpload` when a request has been aborted, for example because the program called `XMLHttpRequest.abort()`.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Using the `abort` event

You can use the `abort` event to stop the upload before it finishes. For a complete code example that uploads a file and displays a progress bar, see the main `XMLHttpRequestUpload` page.


```js
// In case of an abort we hide the progress bar
// Note that this event can be listened to on the xhr object too
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("abort", errorAction);
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-abort |
| XMLHttpRequest Standard # handler-xhr-onabort |

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

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

See also
--------

* Related events: `loadstart`, `load`, `progress`, `error`, `loadend`, `timeout`
* `XMLHttpRequestUpload`
XMLHttpRequestUpload: timeout event
===================================

The **`timeout`** event is fired when progression is terminated due to preset time expiring.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

### Using the `timeout` event

You can use the `timeout` event to detect an upload that stopped because it was too slow. For a complete code example that uploads a file and displays a progress bar, see the main `XMLHttpRequestUpload` page.

The timeout is set on the `XMLHttpRequest` object using the `XMLHttpRequest.timeout` property.


```js
// In case of an timeout we hide the progress bar
// Note that this event can be listened to on the xhr object too
function errorAction(event) {
  progressBar.classList.remove("visible");
  log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("timeout", errorAction);
```

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

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-timeout |
| XMLHttpRequest Standard # handler-xhr-ontimeout |

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

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

See also
--------

* Related events: `loadstart`, `load`, `progress`, `error`, `loadend`, `abort`
* `XMLHttpRequestUpload`
* `XMLHttpRequest.timeout`
XMLHttpRequestUpload: loadend event
===================================

The **`loadend`** event is fired when a request has completed, whether successfully (after `load`) or unsuccessfully (after `abort` or `error`).

The `loadend` event is also sent when the request has been interrupted (by a `timeout`, an `abort`, or an `error`). In such cases, both the `loaded` and `total` value of the event will be 0.

Syntax
------

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


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

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

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

A `ProgressEvent`. Inherits from `Event`.

Event

ProgressEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`lengthComputable` Read only 

A boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not.

`loaded` Read only 

A 64-bit unsigned integer value indicating the amount of work already performed by the underlying process. The ratio of work done can be calculated by dividing `total` by the value of this property. When downloading a resource using HTTP, this only counts the body of the HTTP message, and doesn't include headers and other overhead.

`total` Read only 

A 64-bit unsigned integer representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this is the `Content-Length` (the size of the body of the message), and doesn't include the headers and other overhead.

Examples
--------

Using the `loadend` event
-------------------------

You can use the `loadend` event to detect the (successful or not) termination of an upload. For a complete code example that uploads a file and displays a progress bar, see the main `XMLHttpRequestUpload` page.


```js
// When the upload is finished, we hide the progress bar.
xhr.upload.addEventListener("loadend", (event) => {
  progressBar.classList.remove("visible");
  if (event.loaded !== 0) {
    // Successful termination
    log.textContent = "Upload finished.";
  }
  abortButton.disabled = true;
});
```

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

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

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

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

See also
--------

* Related events: `loadstart`, `progress`, `error`, `load`, `abort`, `timeout`
* `XMLHttpRequestUpload`
CSSNamespaceRule: namespaceURI property
=======================================

The read-only **`namespaceURI`** property of the `CSSNamespaceRule` returns a string containing the text of the URI of the given namespace.

Value
-----

A string containing a URI.

Examples
--------

The stylesheet includes a namespace as the only rule. Therefore the first `CSSRule` returned will be a `CSSNamespaceRule`. The value of the `namespaceURI` property will be `http://www.w3.org/1999/xhtml`.


```css
@namespace url(http://www.w3.org/1999/xhtml);
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].namespaceURI); //http://www.w3.org/1999/xhtml
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssnamespacerule-namespaceuri |

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

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

The read-only **`prefix`** property of the `CSSNamespaceRule` returns a string with the name of the prefix associated to this namespace. If there is no such prefix, it returns an empty string.

Value
-----

A string containing the prefix associated to this namespace. If there is no prefix an empty string.

Examples
--------

The stylesheet includes two namespace rules. The first has no prefix the second the prefix `svg`. Two `CSSNamespaceRule` objects will be returned. The value of the `prefix` property for the first will be an empty string, for the second `svg`.


```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].namespaceURI); // an empty string ""
console.log(myRules[1].namespaceURI); // "svg"
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssnamespacerule-prefix |

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

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

The **`frequencyBinCount`** read-only property of the `AnalyserNode` interface contains the total number of data points available to `AudioContext` `sampleRate`. This is half of the `value` of the `AnalyserNode.fftSize`. The two methods' indices have a linear relationship with the frequencies they represent, between 0 and the Nyquist frequency.

Value
-----

An unsigned integer, equal to the number of values that `AnalyserNode.getByteFrequencyData()` and `AnalyserNode.getFloatFrequencyData()` copy into the provided `TypedArray`.

For technical reasons related to how the Fast Fourier transform is defined, it is always half the value of `AnalyserNode.fftSize`. Therefore, it will be one of `16`, `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, and `16384`.

Examples
--------

 The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect frequency data repeatedly and draw a "winamp bar graph style" output of the current audio input.
 For more complete applied examples/information, check out our Voice-change-O-matic demo.


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5 - 1;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth;
  }
}

draw();
```

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

| Specification |
| --- |
| Web Audio API # dom-analysernode-frequencybincount |

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

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

See also
--------

* Using the Web Audio API