Propiedades
El objeto windowtiene muchas propiedades. Hereda propiedades de la interfaz EventTarget e implementa propiedades de los mixins WindowOrWorkerGlobalScope y WindowEventHandlers.
window.closed
La propiedad closedes una propiedad de sólo lectura que indica si la ventana del navegador referenciada está cerrada o no. Es true si la ventana está cerrada y false en caso contrario. Por ejemplo, si se ejecuta:
console.log(window.closed)
en la ventana actualmente abierta, debería registrar false ya que la ventana del navegador está obviamente abierta.
window.console
La propiedad console es un objeto con muchas propiedades que son útiles para registrar información en la consola del navegador. Es un objeto de sólo lectura. Los métodos de console son útiles para la depuración y no deberían utilizarse para presentar información a los usuarios finales. El objeto console tiene los siguientes métodos:
-
console.assert()– registra un mensaje y el seguimiento de la pila en la consola si el primer argumento esfalse -
console.clear()– borra la consola -
console.count()– registra el número de veces que este método ha sido llamado con la etiqueta dada -
console.countReset()– reinicia el valor del contador para la etiqueta dada -
console.debug()– registra un mensaje en la consola con el nivel de registro ‘debug’ -
console.dir()– lista las propiedades del objeto JavaScript dado. El contenido tendrá triángulos para mostrar el contenido de los objetos hijos. -
console.dirxml()– muestra una representación HTML o XML del objeto si es posible -
console.error()– registra un mensaje de error en la consola. Podemos utilizar la sustitución de cadenas y argumentos adicionales para dar formato al mensaje de registro. -
console.group()– crea un grupo de mensajes de consola, indentados por niveles. Podemos salir de un nivel congroupEnd(). -
console.groupCollapsed()– crea un grupo de mensajes de consola, sangrado por niveles con los elementos colapsados. Podemos salir de un nivel congroupEnd(). -
console.groupEnd()– sale del grupo en línea actual -
console.info()– registra mensajes informativos. Podemos utilizar la sustitución de cadenas y argumentos adicionales para dar formato al mensaje de registro. -
console.log()– se utiliza para el registro general de información. Podemos utilizar la sustitución de cadenas y argumentos adicionales para dar formato al mensaje de registro. -
console.table()– registra y muestra los datos en un formato tabular -
console.time()– inicia un temporizador con el nombre especificado en el parámetro. Se pueden ejecutar 10000 temporizadores simultáneos en una página determinada. -
console.timeEnd()– detiene el temporizador especificado y registra el tiempo transcurrido en segundos desde que se inició. -
console.timeLog()– registra el valor del temporizador especificado en la consola -
console.trace()– registra una traza de pila -
console.warn()– registra un mensaje de advertencia en la consola. Podemos utilizar la sustitución de cadenas y argumentos adicionales para dar formato al mensaje de registro.
window.customElements
La propiedad customElements es una propiedad de sólo lectura que devuelve una referencia al objeto CustomElementRegistry, que puede utilizarse para registrar nuevos elementos personalizados y obtener información sobre los elementos personalizados previamente registrados. Los elementos personalizados también se llaman Web Components.
Web Components es un estándar que nos permite crear elementos personalizados que encapsulan otros elementos HTML. Lo necesitamos para poder reutilizar grupos de elementos HTML en varios lugares. Sin él, tenemos que repetir el mismo grupo de elementos HTML en diferentes lugares si queremos reutilizarlos. Los elementos personalizados definidos se almacenan en el CustomElementRegistry para que los navegadores sepan que el elemento personalizado definido es realmente un elemento válido.
Para definir un elemento personalizado, podemos utilizar la propiedad customElements como en el siguiente código:
const customElementRegistry = window.customElements;
customElementRegistry.define('hello-element',
class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: 'open'
});
const span = document.createElement('span');
span.setAttribute('class', 'wrapper');
span.innerHTML = 'Hello';
shadow.appendChild(span);
}
});
Después, en el archivo HTML, añadimos:
<hello-element></hello-element>
En el código anterior, hemos utilizado el método define del objeto window.customElements. En el primer argumento del método define, pasamos el nombre del elemento. Luego, en el segundo elemento, pasamos una clase HTMLElement, que en realidad es un objeto en JavaScript. En el método constructor del class , creamos un elemento span con el innerHTML ajustado a 'Hello' y lo anexamos a la raíz sombra, que es la raíz del Web Component. Si ejecutamos el código anterior, deberíamos ver la palabra Hola en la pantalla.
El método define toma tres argumentos. El primero es el name, que es una cadena que tiene el nombre del elemento personalizado. El segundo argumento es un constructor HTMLElement, donde, en la clase constructora, creamos los elementos HTML que queremos adjuntar a la raíz de la sombra y mostramos los elementos creados. El tercer argumento es un argumento opcional que controla cómo se definen los elementos. La única propiedad que se admite es la propiedad extends, que es una cadena que nos permite especificar el elemento incorporado para extender. Es útil para crear un elemento personalizado que personaliza un elemento incorporado como div , span o p.