Propriedades
O objeto window tem muitas propriedades. Ele herda propriedades da interface EventTarget e implementa propriedades da interface WindowOrWorkerGlobalScope e WindowEventHandlers mixins.
window.closed
The closed property is a read-only property that indicates whether the referenced browser window is closed or not. É true se a janela está fechada e false se não está. Por exemplo, se você executar:
console.log(window.closed)
na janela atualmente aberta, ela deve logar false já que a janela do navegador está obviamente aberta.
window.console
The console property é um objeto com muitas propriedades que são úteis para logar informações no console do navegador. É um objeto somente de leitura. Os métodos console são úteis para a depuração e não devem ser usados para apresentar informações aos usuários finais. O objeto console tem os seguintes métodos:
-
console.assert()– registra uma mensagem e o stack trace no console se o primeiro argumento forfalse -
console.clear()– limpa o console -
console.count()– registra o número de vezes que este método foi chamado com o label given label -
console.countReset()– repõe o valor do contador para o label dado -
console.debug()– regista uma mensagem na consola com o nível de log ‘debug’ -
console.dir()– lista as propriedades do objecto JavaScript dado. O conteúdo terá triângulos para mostrar o conteúdo dos objetos filhos. -
console.dirxml()– mostra uma representação HTML ou XML do objeto se possível -
console.error()– registra uma mensagem de erro para o console. Podemos usar substituição de strings e argumentos adicionais para formatar a mensagem de log. -
console.group()– cria um grupo de mensagens do console, recuado por níveis. Podemos sair de um nível comgroupEnd(). -
console.groupCollapsed()– cria um grupo de mensagens de console, recuado por níveis com os itens colapsados. Podemos sair de um nível comgroupEnd(). -
console.groupEnd()– sai do grupo inline atual -
console.info()– registra mensagens informativas. Podemos usar a substituição de strings e argumentos adicionais para formatar a mensagem de log. -
console.log()– usado para registro geral de informações. Podemos usar a substituição de strings e argumentos adicionais para formatar a mensagem de log. -
console.table()– registra e exibe dados em um formato tabular -
console.time()– inicia um timer com o nome especificado no parâmetro. 10000 temporizadores simultâneos podem ser executados em uma determinada página. -
console.timeEnd()– pára o temporizador especificado e registra o tempo decorrido em segundos desde o início. -
console.timeLog()– registra o valor do temporizador especificado no console -
console.trace()– registra um rastreamento de pilha -
console.warn()– registra uma mensagem de aviso no console. Podemos usar a substituição de strings e argumentos adicionais para formatar a mensagem de log.
window.customElements
A propriedade customElements é uma propriedade somente leitura que retorna uma referência ao objeto CustomElementRegistry, que pode ser usada para registrar novos elementos personalizados e obter informações sobre elementos personalizados previamente registrados. Os elementos personalizados também são chamados de Web Components.
Web Components é um padrão que nos permite criar elementos personalizados que encapsulam outros elementos HTML. Precisamos disso para que possamos reutilizar grupos de elementos HTML em vários lugares. Sem ele, temos que repetir o mesmo grupo de elementos HTML em lugares diferentes, se quisermos reutilizá-los. Os elementos personalizados definidos são armazenados em CustomElementRegistry para que os navegadores saibam que o elemento personalizado definido é realmente um elemento válido.
Para definir um elemento personalizado, podemos usar a propriedade customElements como no seguinte 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);
}
});
Então, no arquivo HTML, adicionamos:
<hello-element></hello-element>
No código acima, usamos o método define do objeto window.customElements. No primeiro argumento do método define, nós passamos no nome do elemento. Depois no segundo elemento, passamos em uma classe HTMLElement, que na verdade é um objeto em JavaScript. No método constructor do class , criamos um elemento span com o innerHTML definido como 'Hello' e depois anexamo-lo à raiz da sombra, que é a raiz do Componente Web. Se executarmos o código acima, devemos ver a palavra Olá exibida na tela.
O método define leva três argumentos. O primeiro é o name, que é uma string que tem o nome do elemento personalizado. O segundo argumento é um HTMLElement construtor, onde, na classe construtor, nós criamos os elementos HTML que queremos anexar à raiz da sombra e exibimos os elementos criados. O terceiro argumento é um argumento opcional que controla como os elementos são definidos. A única propriedade que é suportada é a propriedade extends, que é uma string que nos permite especificar o elemento incorporado para estender. É útil para criar um elemento personalizado que personalize um elemento incorporado como div , span ou p.
.