recursal/MDN huggingface dataset:
Window: Propiedad customElements
================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La propiedad de solo lectura **`customElements`** de la interfaz `Window`, devuelve una referencia al objeto `CustomElementRegistry`, el cual puede usarse para registrar un nuevo elemento personalizado y obtener información sobre el elemento previamente registrado.

Ejemplos
--------

El ejemplo mas común que verás de esta propiedad es para acceder al método `CustomElementRegistry.define()` para definir y registrar un nuevo elemento personalizado, por ejemplo:


```js
let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);
```


Sin embargo, generalmente se acorta como se muestra a continuación:


```js
customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById(
        "element-details-template",
      ).content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        template.cloneNode(true),
      );
    }
  },
);
```


Consulta nuestro repositorio web-components-examples para obtener mas ejemplos.

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

| Specification |
| --- |
| HTML Standard # dom-window-customelements |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Window: Evento online
=====================

El evento **`online`** de la interface `Window` se activa cuando el navegador ha obtenido acceso a la red y el valor de `Navigator.onLine` cambia a `true`.

**Nota:** Este evento no debe usarse para determinar la disponibilidad de un sitio web en particular. Los problemas de red o cortafuegos aun pueden impedir que se acceda al sitio web.

Sintaxis
--------

Usa el nombre del evento en métodos como `addEventListener()`, o establecer una propiedad de controlador de eventos.


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

Tipo de evento
--------------

Un `Evento` genérico.

Alias del controlador de eventos
--------------------------------

Además de la interface `Window`, la propiedad de controlador de eventos `ononline` está disponible en los siguientes destinos.

* `HTMLBodyElement` (en-US)
* `HTMLFrameSetElement` (en-US)
* `SVGSVGElement` (en-US)
Ejemplos
--------


```js
// addEventListener version
window.addEventListener("online", (event) => {
  console.log("Estas conectado a la red.");
});

// ononline version
window.ononline = (event) => {
  console.log("Estas conectado a la red.");
};
```

Especificacioness
-----------------

| Specification |
| --- |
| HTML Standard # event-online |
| HTML Standard # handler-window-ononline |

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

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

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

* `offline`
Window.devicePixelRatio
=======================

La propiedad de sólo-lectura `Window.devicePixelRatio` retorna la relación de tamaño (vertical) de un pixel físico en el dispositivo de visualización actual respecto del de un dispositivo de tamaño de pixel independiente (dips).

No hay retrofunciones o eventos a escuchar cuando este valor cambia (por ejemplo, si usted arrastra la ventana entre displays con diferentes densidades de pixels).

Sintaxis
--------


```js
value = window.devicePixelRatio;
```

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

| Specification |
| --- |
| CSSOM View Module # dom-window-devicepixelratio |

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

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

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

* consultas de resolución de medio CSS
* PPK hace alguna iinvestigación en devicePixelRatio
Window.outerWidth
=================

Sumario
-------

`Window.outerWidth` obtiene el ancho exterior del navegador. Representa el ancho total de la ventana incluyendo las barras laterales (si es expandida), interfaz grafíca y los de elementos para redimencionado de bordes.

Esta propiedad es de sólo lectura; no tiene valores por default.

Sintaxis
--------


```js
outWindowWidth = window.outerWidth;
```


Lo que retorna `outWindowWidth` es el ancho exterior del navegador.

Notas
-----

Para cambiar el tamaño de la ventana, ver `window.resizeBy()` (en-US) y `window.resizeTo()` (en-US).

Para obtener el ancho exterior de la ventana, i.e. el ancho de la pagina desplegada, ver `window.innerWidth` (en-US).

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

| Specification |
| --- |
| CSSOM View Module # dom-window-outerwidth |

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

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

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

* `window.outerHeight`, `window.innerHeight`, `window.innerWidth` (en-US)
* `window.resizeBy()` (en-US), `window.resizeTo()` (en-US)
Window.scrollY
==============

Sumario
-------

Retorna el número de píxeles que han sido desplazados en el documento mediante el scroll vertical.

Sintaxis
--------


```js
var y = window.scrollY;
```


* `y` es el número de píxeles que se han desplazado actualmente desde el extremo superior de la página.
Ejemplo
-------


```js
// Asegurate de bajar a la segunda página
if (window.scrollY) {
  window.scroll(0, 0); // Restablece la posición de desplazamiento en la parte superior izquierda del documento
}

window.scrollByPages(1);
```

Notas
-----

Usa esta propiedad para verificar que al documento no se le ha hecho scroll, si estás usando funciones relativas de scroll como `window.scrollBy`, `window.scrollByLines` (en-US), o `window.scrollByPages` (en-US).

La propiedad `pageYOffset` es un alias para la propiedad `scrollY`:


```js
window.pageYOffset == window.scrollY; // Siempre verdadero
```


Para compatibilidad entre navegadores, es recomendable usar window.pageYOffset en vez de window.scrollY. **Adicionalmente**, tener en cuenta que versiones más viejas de Internet Explorer (<9) no soportan del todo la propiedad y debe ser solucionado usando propiedades no estandarizadas . Un ejemplo totalmente compatible entre navegadores:


```js
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";

var x = supportPageOffset
  ? window.pageXOffset
  : isCSS1Compat
    ? document.documentElement.scrollLeft
    : document.body.scrollLeft;
var y = supportPageOffset
  ? window.pageYOffset
  : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;
```

Especificación
--------------

* CSSOM View Module: window.scrollY (Editor's Draft)
Ver también
-----------

* `window.scrollX`
Window.navigator
================

La propiedad de solo lectura `Window.navigator` es una referencia al objeto `Navigator`, el cual puede ser utilizado para obtener información sobre la aplicación que está ejecutando el script.

Sintaxis
--------


```js
navigatorObject = window.navigator;
```

Ejemplos
--------

### Ejemplon 1: Detectar un navegador y retornar un string


```js
var sBrowser,
  sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome";
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
} else if (sUsrAg.indexOf("Opera") > -1) {
  sBrowser = "Opera";
} else if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
} else if (sUsrAg.indexOf("MSIE") > -1) {
  sBrowser = "Microsoft Internet Explorer";
}

alert("Usted está utilizando: " + sBrowser);
```

### Ejemplo 2: Detectar un navegador y retornar un índice


```js
function obtenerIdNavegador() {
  var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
    sUsrAg = navigator.userAgent,
    nIdx = aKeys.length - 1;

  for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);

  return nIdx;
}

console.log(obtenerIdNavegador());
```

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

| Specification |
| --- |
| HTML Standard # dom-navigator |

Vea además
----------
window.fullScreen
=================

### Resumen

Esta propiedad indica si la ventana se presenta en modo de pantalla comleta o no. Su funcionamiento es sólo fiable a partir de Gecko 1.9 (Firefox 3), ver Notas más abajo.

### Sintaxis


```js
var isInFullScreen = windowRef.fullScreen;
```


Con privilegios chrome, el valor de esta propiedad se puede cambiar, de otra forma, es de sólo lectura. Ten en cuenta que si intentas cambiar el valor de esta propiedad sin tener privilegios chrome, no cambiará nada y la propiedad simplemente fallará. Esto se hace para evitar que los programas diseñados para Internet Explorer fallen.

### Valor devuelto

`isInFullScreen`

Un valor*binario* . Los valores posibles son:

* `true`: (Cierto) la ventana esta en modo pantalla completa.
* `false`: (Falso)la ventana NO esta en modo pantalla completa.
### Ejemplos

### Especificaciones

DOM nivel 0. `window.fullScreen` no forma parte de ninguna especificación W3C.

### Notas

El funcionamiento de esta propiedad es fiable sólo en Mozilla 1.9 (Firefox 3) y posteriores. Mozilla 1.8 y versiones anteriores manejan esta propiedad pero el valor devuelto es siempre `false`, aún cuando la ventana está en modo pantalla completa (Error 127013 en Firefox).
GlobalEventHandlers.onerror
===========================

Un manejador de eventos para errores en scripts en tiempo de ejecución.

Note that some/many `error` events do not trigger `window.onerror`, you have to listen for them specifically.

Sintaxis
--------


```js
window.onerror = funcRef;
```

### Parámetros

* `funcRef` es una referencia a una función. Cuando la función devuelva `true`, se prevendrá el disparado del manejador de eventos por defecto. Parámetros de la función:
    + Mensaje de error (string)
    + Url en la que el error fue lanzado (string)
    + Número de línea en la que el error fue lanzado (number)
    + Dentro de la línea en la que el error ocurrió, número de columna correspondiente (number)
    + Error Object (object)
Ejemplos
--------


```js
// Example 1:

// Prevent error dialogs from displaying -which is the window's normal
// behavior- by overriding the default event handler for error events that
// go to the window.
window.onerror = null;

// Example 2:

var gOldOnError = window.onerror;
// Override previous handler.
window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
  if (gOldOnError)
    // Call previous handler.
    return gOldOnError(errorMsg, url, lineNumber);

  // Just let default handler run.
  return false;
};
```

Notas
-----

El evento de error es lanzado cuando ocurre un error en el script.

Cuando se use el marcado html en línea (<body onerror="alert('an error occurred')>...), los argumentos son anónimos. Pueden ser referenciados usando desde `arguments[0]` hasta `arguments[2]`.

No hay llamante `Components.stack.caller` que recuperar. (Vea **bug 355430**.)

Especificación
--------------

JavaScript 1.1
Window: Propiedad console
=========================

La propiedad **`Window.console`** devuelve una referencia al objeto `console`, el cual proporciona métodos para imprimir información en la consola del navegador. Estos métodos estan destinados únicamente para propósitos de depuración y no para presentar información a los usuarios finales.

Ejemplos
--------

### Imprimir en consola

El primer ejemplo imprime texto en la consola.


```js
console.log("Ocurrió un error al cargar el contenido");
```


El siguiente ejemplo imprime un objeto en la consola, con los campos del objeto expandibles.


```js
console.dir(someObject);
```


Para obtener mas ejemplos, consulta la sección de Ejemplos en el árticulo de `console`.

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

| Specification |
| --- |
| Console Standard  |

**Nota:** Actualmente hay muchas diferencias de implementación en los navegadores, pero se esta trabajando para hacerlos mas consistentes entre sí.
GlobalEventHandlers.onblur
==========================

La propiedad **onblur** retorna el código del manejador de evento onBlur, si existe, en el elemento actual.

Sintaxis
--------


```js
element.onblur = function;
```


* `function` es el nombre de una función definida por el usuario, sin el sufijo () ni ningún parámetro, o una declaración de función anónima, como:


```js
element.onblur = function () {
  console.log("¡evento onblur detectado!");
};
```

Ejemplo
-------


```html
<html>
  <head>
    <title>ejemplo de evento onblur</title>

    <script type="text/javascript">
 var elem = null;

 function initElement() {
 elem = document.getElementById("foo");
 // NOTA: doEvent(); ó doEvent(param); no funcionará aquí.
 // Debe ser una referencia a un nombre de función, no una llamada a función.
 elem.onblur = doEvent;
 }

 function doEvent() {
 elem.value = "Bye-Bye";
 console.log("¡Evento onblur detectado!");
 }
 </script>

    <style type="text/css">
 <!--
 #foo {
 border: solid blue 2px;
 }
 -->
 </style>
  </head>

  <body onload="initElement();">
    <form>
      <input type="text" id="foo" value="Hola!" />
    </form>

    <p>
      Haga click en el elemento superior to darle el foco, luego click fuera del
      elemento.<br />
      Recarge la página desde la barra de navegación.
    </p>
  </body>
</html>
```

Notas
-----

El evento blur es generado cuando un elemento pierde el foco.

A diferencia de MSIE --en el cual la mayoría de tipos de elementos reciben el evento blur-- la mayoría de elementos de los navegadores basados en Gecko NO funcionan con este evento.

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

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |
Window.localStorage
===================

La propiedad de sólo lectura **`localStorage`** te permite acceder al objeto local `Storage`; los datos persisten almacenados entre de las diferentes sesiones de navegación. localStorage es similar a `sessionStorage` (en-US). La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra la página.

Con `sessionStorage` (en-US) los datos persisten sólo en la ventana/tab que los creó, mientras que con `localStorage` los datos persisten entre ventanas/tabs con el mismo origen.

Debe tenerse en cuenta que los datos almacenados tanto en `localStorage` como en `sessionStorage` **son específicos del protocolo de la página**.

Las claves y los valores son **siempre cadenas de texto** (ten en cuenta que, al igual que con los objetos, las claves de enteros se convertirán automáticamente en cadenas de texto).

Sintaxis
--------


```js
miStorage = window.localStorage;
```

### Valor

Un objeto `Storage` que se puede utilizar para acceder al espacio de almacenamiento local del origen actual.

### Excepciones

`SecurityError`

La solicitud viola una decisión de política, o el origen no es una tupla válida de protocolo/host/puerto (esto puede suceder si el origen usa el protocolo `file:` o `data:`, por ejemplo). Por ejemplo, el usuario puede tener su navegador configurado a fin de denegar el permiso para conservar datos al origen especificado.

Ejemplo
-------

El siguiente código accede al objeto local `Storage` actual y agrega un ítem al mismo usando `Storage.setItem()`.


```js
localStorage.setItem("miGato", "Juan");
```


**Nota:** Por favor ver el articulo Usando la Web Storage API para un ejemplo completo.

La sintaxis para leer el ítem almacenado en `localStorage` es la siguiente:


```js
var cat = localStorage.getItem("miGato");
```


La sintaxis para eliminar el ítem almacenado en `localStorage` es la siguiente:


```js
localStorage.removeItem("miGato");
```


La sintaxis para eliminar todos los ítems almacenados en `localStorage` es la siguiente:


```js
// Elimina todos los elementos
localStorage.clear();
```

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

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

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

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

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

* Usando la Web Storage API
* Window.sessionStorage (en-US)
Window.moveBy()
===============

Resumen
-------

Mueve la actual ventana a consecuencia de una cantidad especificada.

Sintaxis
--------


```js
window.moveBy(deltaX, deltaY);
```

### Parametros

* `deltaX` es la cantidad de pixeles a mover la ventana horizontalmente.
* `deltaY` es la cantidad de pixeles a mover la ventana verticalmente.
Ejemplo
-------


```js
function budge() {
  moveBy(10, -10);
}
```

Notes
-----

Puedes usar numeros negativos como parametros para esta función. Esta función realiza un movimiento relativo mientras que `window.moveTo` (en-US) hace un movimiento absoluto.

Desde Firefox 7, no es posible para un sitio web mover una ventana en el navegador, deacuerdo con las siguientes reglas:

1. No puedes mover una ventana o pestaña que no haya sido creada por window.open.
2. No puedes mover una ventana o pestaña cuando esta en una ventana con más de una sola pestaña.
Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-window-moveby |

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

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

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

* `window.moveTo` (en-US)
Window.print()
==============

Abre el diálogo para imprimir el documento actual.

En la mayoría de navegadores, este método bloquea mientras el díalogo de impresión esté abierto, sin embargo, en algunas versiones recientes de Safari podría retornar de inmediato.

Resumen
-------

Abre el *Diálogo de Impresión* para imprimir el documento actual.

Sintaxis
--------


```js
window.print();
```

Notas
-----

Empezando con Chrome 46.0 este método esta bloqueado dentro de un `<iframe>` a menos que el atributo del contenedor tenga el valor `allow-modal`.

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

| Specification |
| --- |
| HTML Standard # printing |

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

* Impresión
* `window.onbeforeprint` (en-US)
* `window.onafterprint` (en-US)
Window.menubar
==============

### Resumen

Retorna el objeto **menubar**, cuya visibilidad puede ser examinada.

### Sintaxis


```js
objRef = window.menubar;
```

### Ejemplo

El siguiente ejemplo HTML completo muestra la forma en que es utilizada la propiedad visible del objeto menubar.


```html
<html>
  <head>
    <title>Various DOM Tests</title>
    <script>
 var visible = window.menubar.visible;
 </script>
  </head>
  <body>
    <p>Various DOM Tests</p>
  </body>
</html>
```

### Ver también

window.locationbar, window.personalbar, window.scrollbars, window.statusbar, window.toolbar

### Especificación

HTML5
GlobalEventHandlers.onfocus
===========================

La propiedad **onfocus** devuelve un manejador de eventos para el evento onFocus en el elemento actual.

Sintaxis
--------


```js
element.onfocus = event handling code
```

Notas
-----

El evento focus se dispara cuando el usuario establece el foco en el elemento.

Para que el evento `onfocus` se dispare en elementos que no sean inputs, los mismos deben establecerse con el atributo `tabindex` (vea Building keyboard accessibility back in para mas detalles).

A diferencia de MSIE, en que casi toda clase de elemento puede recibir el evento focus, en los navegadores Gecko en los que casi todos los elementos NO reciben este evento.

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

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

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

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

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El método **`window.requestIdleCallback()`** encola la función que será ejecutada en periodos de inactividad del navegador permitiendo a los desarrolladores ejecutar en segundo plano tareas de baja prioridad del bucle de eventos, sin perjudicar la latencia de eventos principales como animaciones o respuestas a entradas. La funciones son ejecutadas normalmente en orden FIFO (primero en entrar primero en salir) salvo que se alcance el timeout definido de la función antes de que el navegador la ejecute.

Sintaxis
--------


```js
var handle = window.requestIdleCallback(callback[, options])
```

### Valor devuelto

Un entero largo sin signo (unsigned long integer) que puede utilizarse para cancelar el callback a través del método `Window.cancelIdleCallback()` (en-US).

### Parámetros

`callback`

La referencia a la función que debe ser ejecutada en un futuro inmediato. La función callback toma un argumento con las siguientes propiedades:

* `timeRemaining`: Referencia a un metodo que devuelve un `DOMHighResTimeStamp` (en-US).
* `didTimeout`: Booleano que se devuelve a false si el callback fue invocado por el navegador durante su inactividad, y true en otro caso (por ejemplo, si se definió timeout y expiró antes de que hubiera suficiente tiempo de inactividad).

`options` Opcional

Contiene parametros opcionales de configuración. Contiene la siguiente propiedad:

* `timeout`: Plazo para que el navegador ejecute la función callback. Valor en milisegundos.

Ejemplos
--------

Ver ejemplo (en-US) en el artículo Planificación Cooperativa de la API de Tareas en segundo plano (en-US).

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

| Specification |
| --- |
| requestIdleCallback() Cooperative Scheduling of Background Tasks # the-requestidlecallback-method |

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

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

Vease también
-------------

* `window.cancelIdleCallback()` (en-US)
* `IdleDeadline` (en-US)
* `window.setTimeout()` (en-US)
* `window.setInterval()` (en-US)
* `window.requestAnimationFrame`
File.name
=========

Retorna el nombre del archivo representado por el objeto `File`. Por razones de seguridad, la ruta de directorios es excluida de esta propiedad.

Sintaxis
--------


```js
var nombre = file.name;
```

Valor
-----

Una cadena, conteniendo el nombre del archivo sin la ruta de directorios, por ejemplo: "Mi resumen.rtf".

Ejemplo
-------


```html
<input type="file" multiple onchange="processSelectedFiles(this)" />
```



```js
function processSelectedFiles(fileInput) {
  var files = fileInput.files;

  for (var i = 0; i < files.length; i++) {
    alert("Filename " + files[i].name);
  }
}
```


Prueba el resultado:

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

| Specification |
| --- |
| File API # dfn-name |

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

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

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

* Usando archivos desde aplicaciones web