recursal/MDN huggingface dataset:
Notification.permission
=======================

**Nota:** Esta característica está disponible en Web Workers

**Contexto seguro:** Esta función está disponible solo en contextos seguros (en-US) (HTTPS), en algunos o todos los navegadores que lo soportan.

La propiedad de solo lectura `permission` de la interfaz `Notification` indica el permiso concedido por el usuario al origen actual para mostrar notificaciones web.

Sintaxis
--------


```js
var permission = Notification.permission;
```

### Valor

Una `DOMString` representa el permiso actual. El valor puede ser:

* `granted`: El usuario ha concedido el permiso explicitamente al origen actual para mostrar notificaciones del sistema.
* `denied`: El usuario ha denegado el permiso explicitamente al origen actual para mostrar notificaciones del sistema.
* `default`: La decisión del usuario es deconocida; en este caso la aplicación actuará como si el permiso fuese `denied`
Ejemplos
--------

El siguiente código podría ser usado si quisieras primero comprobar si las notificaciones son soportadas, luego comprobar si los permisos han sido concedidos al origen actual para enviar notificaciones, y luego solicitar permiso de ser requerido, antes de enviar una notificación.


```js
function notifyMe() {
  // Comprobamos si el navegador soporta las notificaciones
  if (!("Notification" in window)) {
    console.log(
      "Este navegador no es compatible con las notificaciones de escritorio",
    );
  }

  // Comprobamos si los permisos han sido concedidos anteriormente
  else if (Notification.permission === "granted") {
    // Si es correcto, lanzamos una notificación
    var notification = new Notification("Hola!");
  }

  // Si no, pedimos permiso para la notificación
  else if (
    Notification.permission !== "denied" ||
    Notification.permission === "default"
  ) {
    Notification.requestPermission(function (permission) {
      // Si el usuario nos lo concede, creamos la notificación
      if (permission === "granted") {
        var notification = new Notification("Hola!");
      }
    });
  }

  // Por último, si el usuario ha denegado el permiso, y quieres ser respetuoso, no hay necesidad de molestarlo.
}
```

Especificaciones
----------------

| Specification |
| --- |
| Notifications API Standard # dom-notification-permission |

Compatibilidad con Navegadores
------------------------------

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

Véase también
-------------

* API de Notificaciones
* Usando la API de Notificaciones
* API de Permisos (en-US)
* Usando la API de Permisos (en-US)
FileReader.readAsArrayBuffer()
==============================

 El método **`readAsArrayBuffer()`** de la interfaz `FileReader`
 se utiliza para comenzar a leer el contenido de un `Blob`
 o `File` especificado. Cuando la operación de lectura finaliza,
 la propiedad `readyState` (en-US) se convierte en `DONE`,
 y se desencadena el evento `loadend` (en-US). En ese momento,
 el atributo `result` contiene
 un `ArrayBuffer` que representa los datos del archivo.

Sintaxis
--------


```js
instanceOfFileReader.readAsArrayBuffer(blob);
```

### Parámetros

`blob`

El `Blob` o `File` desde el que se leerá.

Especificaciones
----------------

| Specification |
| --- |
| File API # readAsArrayBuffer |

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* `FileReader`
FileReader.readAsText()
=======================

El método `readAsText` se usa para leer el contenido de un tipo `Blob` o `File`. Cuando la operación de lectura se completa, el atributo `readyState` (en-US) cambia a `DONE`, el evento `loadend` se dispara y el atributo `result` contiene el contenido del archivo como una cadena de texto.

Sintaxis
--------
```

instanceOfFileReader.readAsText(blob[, encoding]);
```

### Parametros

`blob`

Una variable de tipo `Blob` o `File` de la cual se leerán los datos.

encoding Opcional

Una cadena de texto especificando la codificación de caracteres que se usará en los datos leidos. Por defecto, se utiliza UTF-8 si el parametro no se especifica

Especificaciones
----------------

| Specification |
| --- |
| File API # readAsDataText |

Compatibilidad con navegadores
------------------------------

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

Vea también
-----------

* `FileReader`
FileReader.result
=================

La propiedad **`result`** de `FileReader` retorna el contenido del archivo. Esta propiedad es válida únicamente después de que la operación de lectura del archivo es completada. El formato de la infomación devuelta depende de cuál de los métodos de lectura fue usado.Sintaxis
--------
```

var file = instanceOfFileReader.result
```

### Valor

Una cadena de texto apropiada o un `ArrayBuffer` dependiendo de cuál método de lectura haya provocado la operación de lectura. El valor es `null` si la lectura no se ha completado aún o no fue exitosa.

Los tipos de resultados son descritos a continuación.

| Método | Descripción |
| --- | --- |
| `readAsArrayBuffer()` | `result` es un `ArrayBuffer` de JavaScript que contiene la información binaria. |
| `readAsBinaryString()` (en-US) | `result` contiene la información binaria del archivo en una cadena de texto. |
| `readAsDataURL()` | `result` es una cadena de texto que representa una URL con la propiedad `data:` que contiene la información leída del archivo. |
| `readAsText()` | `result` es una cadena de texto con el contenido del archivo. |

Ejemplo
-------

Este ejemplo representa una función `read()`, que lee un archivo de un file input (en-US). Funciona creando un objeto de `FileReader` y creando un listener para los eventos load de tal manera que cuando el archivo es leído, la propiedad `result` es obtenida y pasada a la función callback proporcionada a `read()`.

El contenido es manejado como texto.


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

function read(callback) {
  var file = fileInput.files.item(0);
  var reader = new FileReader();

  reader.onload = function () {
    callback(reader.result);
  };

  reader.readAsText(file);
}
```

Especificaciones
----------------

| Specification |
| --- |
| File API # dom-filereader-result |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* `FileReader`
FileReader.onload
=================

La propiedad **`FileReader.onload`** contiene un controlador de evento ejecutado cuando `load` es ejecutado, cuando el contenido es leído con `readAsArrayBuffer`, `readAsBinaryString` (en-US), `readAsDataURL` o `readAsText` está habilitado.

Ejemplo
-------


```js
// Respuest desde un <input type="file" onchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function (event) {
    // El texto del archivo se mostrará por consola aquí
    console.log(event.target.result);
  };

  reader.readAsText(file);
}
```
FileReader.readAsDataURL()
==========================

El método `readAsDataURL` es usado para leer el contenido del especificado `Blob` o `File`. Cuando la operación de lectura es terminada, el `readyState` (en-US) se convierte en `DONE`, y el `loadend` es lanzado. En ese momento, el atributo `result` contiene la información como un datos: URL representando la información del archivo como una cadena de caracteres codificados en base64.

**Nota:** El `result` de blob no puede ser
 directamente decodificado como Base64 sin primero remover la delaración de Datos-URL
 de la información codificada en Base64. Para recuperar únicamente la cadena codifidicada
 en Base64, primero remueve `data:*/*;base64`, del resultado.


Sintaxis
--------


```js
instanceOfFileReader.readAsDataURL(blob);
```

### Parametros

`blob`

El `Blob` o `File` desde el cual leer.

Ejemplo
-------

### HTML


```html
<input type="file" onchange="previewFile()" /><br />
<img src="" height="200" alt="Image preview..." />
```

### JavaScript


```js
function previewFile() {
  const preview = document.querySelector("img");
  const file = document.querySelector("input[type=file]").files[0];
  const reader = new FileReader();

  reader.addEventListener(
    "load",
    function () {
      // convierte la imagen a una cadena en base64
      preview.src = reader.result;
    },
    false,
  );

  if (file) {
    reader.readAsDataURL(file);
  }
}
```

### Resultado

Ejemplo leyendo multiples archivos
----------------------------------

### HTML


```html
<input id="browse" type="file" onchange="previewFiles()" multiple />
<div id="preview"></div>
```

### JavaScript


```js
function previewFiles() {
  var preview = document.querySelector("#preview");
  var files = document.querySelector("input[type=file]").files;

  function readAndPreview(file) {
    // Asegurate que `file.name` coincida con el criterio de extensiones
    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
      var reader = new FileReader();

      reader.addEventListener(
        "load",
        function () {
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = this.result;
          preview.appendChild(image);
        },
        false,
      );

      reader.readAsDataURL(file);
    }
  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }
}
```

Especificaciones
----------------

| Specification |
| --- |
| File API # readAsDataURL |

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* `FileReader`
* `URL.createObjectURL()`
Animation.timeline
==================

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

Newly availableSince September 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
La propiedad `Animation.timeline` de la interfaz `Animation` devuelve o establece el `timeline` (en-US) asociado a esta animación. Un 'timeline' es una fuente de valores de tiempo para propósitos de sincronización, y es un objeto basado en `AnimationTimeline` (en-US). Por defecto, la línea de tiempo de la animación y la línea de tiempo de `Document` son las mismas.

Sintaxis
--------


```js
var animationsTimeline = Animation.timeline;

Animation.timeline = newTimeline;
```

### Valor

Un timeline object (en-US) para usar como la fuente de sincronización para la animación, o `null` para usar el predeterminado, que es el 'timeline' del `Document`.

Ejemplos
--------

Aquí establecemos que la línea de tiempo `timeline` de la animación sea la misma que la del tiempo del documento (por cierto, esta es la `timeline` predeterminada para todas las animaciones):


```js
animation.timeline = document.timeline;
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-timeline |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Web Animations API (en-US)
* `Animation`
* `AnimationTimeline` (en-US) el objeto padre del que heredan todas las timeLine.
* `DocumentTimeline` (en-US) el único objeto timeLine disponible en este momento.
* `Document.timeline` (en-US) el timeLine predeterminado asignado a todas las animaciones.
Animation.id
============

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

Newly availableSince September 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
La propiedad `Animation.id` de la Web Animations API (en-US) devuelve o establece una cadena(string) utilizado para identificar la animación.

Sintaxis
--------


```js
var animationsId = Animation.id;

Animation.id = newIdString;
```

### Valor

Un `DOMString` que se puede usar para identificar la animación, o `null` si la animación no tiene `id`.

Ejemplos
--------

En el ejemplo Follow the White Rabbit, puedes asignar a `rabbitDownAnimation` un `id` de esta manera:


```js
rabbitDownAnimation.effect.id = "rabbitGo";
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-id |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* `KeyframeEffect` (en-US)
* Web Animations API (en-US)
* `Animation`
Animation.finish()
==================

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

Newly availableSince September 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
El método `finish()` de la interfaz `Animation` de la Web Animations API (en-US) establece el tiempo de reproducción actual hasta el final de la animación correspondiente a la dirección de reproducción actual. Es decir, si la animación se está reproduciendo hacia adelante, establece el tiempo de reproducción a la longitud de la secuencia de animación, y si la animación se reproduce hacia atras, habiendo llamado a su método `reverse()`, establece el tiempo de la reproducción en 0.

Sintaxis
--------


```js
Animation.finish();
```

### Parámetros

Ningun.

### Valor devuelto

Ningun.

### Excepciones

`InvalidState`

La velocidad de reproducción del reproductor es 0 o la velocidad de reproducción de la animación es mayor que 0 y el tiempo de finalización de la animación es infinito.

Ejemplos
--------

El siguiente ejemplo muestra cómo usar el método `finish()` y captura un error `InvalidState`.


```js
interfaceElement.addEventListener("mousedown", function() {
  try {
    player.finish();
  } catch(e if e instanceof InvalidState) {
    console.log("finish() called on paused or finished animation.");
  } catch(e);
    logMyErrors(e); //pasa el objeto excepción al manejador de errores.
  }
});
```


El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.


```js
elem.getAnimations().forEach(function (animation) {
  return animation.finish();
});
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-finish |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Web Animations API (en-US)
* `Animation` para otros métodos y propiedades que puede usar para controlar la animación de la página web.
* `Animation.play()` para reproducir una animación hacia adelante.
* `Animation.reverse()` para reproducir una animación hacia atrás.
Animation.effect
================

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

Newly availableSince September 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
La propiedad `Animation.effect` de la Web Animations API (en-US) obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en `AnimationEffectReadOnly` (en-US), como `KeyframeEffect` (en-US), o `null`.

Sintaxis
--------


```js
var effect = Animation.effect;

Animation.effect = AnimationEffectReadOnly (en-US)
```

### Valor

Un objeto `AnimationEffectReadOnly` (en-US) que describe el efecto de animación objetivo para la animación, o `null` para indicar que el efecto no está activo.

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-effect |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Web Animations API (en-US)
* `AnimationEffectReadOnly` (en-US)
* `Animation`
Animation.startTime
===================

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

Newly availableSince September 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
La propiedad `Animation.startTime` de la interfaz `Animación` es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.

El **start time** **(tiempo de inicio)** es el valor de tiempo de su `DocumentTimeline`cuando su objetivo `KeyframeEffect` (en-US) está programado para comenzar la reproducción. El **start time** **(tiempo de inicio)** de una animación inicialmente no está resuelto (lo que significa que es `null` porque no tiene valor).

Sintaxis
--------


```js
var animationStartedWhen = Animation.startTime;

Animation.startTime = newStartTime;
```

### Valor

Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.

Ejemplos
--------

En el ejemplo Running on Web Animations API example, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio `startTime` que el gato original:


```js
var catRunning = document
  .getElementById("withWAAPI")
  .animate(keyframes, timing);

/\* Una función que crea nuevos gatos. \*/
function addCat() {
  var newCat = document.createElement("div");
  newCat.classList.add("cat");
  return newCat;
}

/\* Esta es la función que agrega un gato a la columna WAAPI \*/
function animateNewCatWithWAAPI() {
  // crea unnuevo gato
  var newCat = addCat();

  // Animar a dicho gato con la función "animate" de WAAPI
  var newAnimationPlayer = newCat.animate(keyframes, timing);

  // Establece que el punto de inicio de la animación sea el mismo que el original .cat#withWAAPI
  newAnimationPlayer.startTime = catRunning.startTime;

  // Agrega el gato a la pila.
  WAAPICats.appendChild(newCat);
}
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-starttime |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Web Animations API (en-US)
* `Animation`
* `Animation.currentTime` para el tiempo actual de la animación.
Animation.playState
===================

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

Newly availableSince September 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
La propiedad `Animation.playState` de la Web Animations API (en-US) devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.

**Nota:** Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.

Sintaxis
--------


```js
var currentPlayState = Animation.playState;

Animation.playState = newState;
```

### Valor

`idle(inactivo)`

El tiempo actual de la animación no está resuelto y no hay tareas pendientes.

`pending(pendiente)`

La animación está esperando que se complete una tarea pendiente.

`running(funcionando)`

La animación se está ejecutando.

`paused(pausado)`

La animación se ha suspendido y la propiedad `Animation.currentTime` no se está actualizando.

`finished(finalizado)`

La animación ha alcanzado uno de sus límites y la propiedad `Animation.currentTime` no se está actualizando.

Ejemplo
-------

En el ejemplo Growing/Shrinking Alice Game , los jugadores pueden tener un final con (Alicia llorando en un mar de lágrimas) Alice crying into a pool of tears. En el juego, por razones de rendimiento, las lágrimas solo se deben animar cuando son visibles. Por lo tanto, deben detenerse tan pronto como estén animadas, de esta manera:


```js
// Configurando las animaciones de lágrimas

tears.forEach(function (el) {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
    duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.playState = "paused";
});

// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.

tears.forEach(function (el) {
  el.playState = "playing";
});

// Reinicia la animación de las lágrimas y la detiene.

tears.forEach(function (el) {
  el.playState = "paused";
  el.currentTime = 0;
});
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-playstate |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Web Animations API (en-US)
* `Animation` para otros métodos y propiedades que puede usar para controlar la animación de la página web.
* Los métodos `Animation.play()`, `Animation.pause()`, `Animation.finish()` pueden establecer el `playState` de un `Animation` .
Animation()
===========

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

Newly availableSince September 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
El constructor `Animation()` de Web Animations API (en-US) devuelve una instancia del objeto `Animation`.

Sintaxis
--------


```js
var animation = new Animation([effect][, timeline]);
```

### Parámetros

`effect` Opcional

El efecto objetivo, es un objeto de la interfaz `AnimationEffectReadOnly` (en-US), para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como `SequenceEffect` o `GroupEffect`, el único efecto disponible actualmente es `KeyframeEffect` (en-US). Este puede ser `null` (valor por defecto) para indicar que no debe aplicarse ningún efecto.

`timeline` Opcional

Especifica el `timeline` con el que asociar la animación, como un objeto de tipo basado en la interfaz `AnimationTimeline` (en-US) . Actualmente el único tipo de línea de tiempo disponible es `DocumentTimeline` (en-US), pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es `Document.timeline` (en-US), pero puede ser establecido en `null`.

Ejemplos
--------

En el ejemplo Follow the White Rabbit, el constructor `Animation()` es usado para crear una `Animation` para el `rabbitDownKeyframes` utilizando el `timeline` del documento:


```js
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
```

Especificaciones
----------------

| Specification |
| --- |
| Web Animations # dom-animation-animation |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Web Animations API (en-US)
* `Animation`