Proprietà
L’oggetto window ha molte proprietà. Eredita proprietà dall’interfaccia EventTarget e implementa proprietà dai mixins WindowOrWorkerGlobalScope e WindowEventHandlers.
window.closed
La proprietà closed è una proprietà di sola lettura che indica se la finestra del browser di riferimento è chiusa o no. È true se la finestra è chiusa e false altrimenti. Per esempio, se si esegue:
console.log(window.closed)
sulla finestra attualmente aperta, dovrebbe registrare false poiché la finestra del browser è ovviamente aperta.
window.console
La proprietà console è un oggetto con molte proprietà che sono utili per registrare informazioni nella console del browser. È un oggetto di sola lettura. I metodi console sono utili per il debug e non dovrebbero essere usati per presentare informazioni agli utenti finali. L’oggetto console ha i seguenti metodi:
-
console.assert()– registra un messaggio e la traccia dello stack nella console se il primo argomento èfalse -
console.clear()– cancella la console -
console.count()– registra il numero di volte che questo metodo è stato chiamato con la data label -
console.countReset()– azzera il valore del contatore per la data label -
console.debug()– registra un messaggio nella console con il livello di log ‘debug’ -
console.dir()– elenca le proprietà dell’oggetto JavaScript dato. Il contenuto avrà dei triangoli per mostrare il contenuto degli oggetti figli. -
console.dirxml()– visualizza una rappresentazione HTML o XML dell’oggetto se possibile -
console.error()– registra un messaggio di errore nella console. Possiamo usare la sostituzione di stringhe e argomenti aggiuntivi per formattare il messaggio di log. -
console.group()– crea un gruppo di messaggi di console, indentati per livelli. Possiamo uscire da un livello congroupEnd(). -
console.groupCollapsed()– crea un gruppo di messaggi di console, indentati per livelli, con gli elementi collassati. Possiamo uscire da un livello congroupEnd(). -
console.groupEnd()– esce dal gruppo in linea corrente -
console.info()– registra messaggi informativi. Possiamo usare la sostituzione delle stringhe e argomenti addizionali per formattare il messaggio di log. -
console.log()– usato per la registrazione generale di informazioni. Possiamo usare la sostituzione delle stringhe e argomenti aggiuntivi per formattare il messaggio di log. -
console.table()– registra e visualizza i dati in formato tabellare -
console.time()– avvia un timer con il nome specificato nel parametro. 10000 timer simultanei possono essere eseguiti su una data pagina. -
console.timeEnd()– ferma il timer specificato e registra il tempo trascorso in secondi dal suo avvio. -
console.timeLog()– registra il valore del timer specificato nella console -
console.trace()– registra uno stack trace -
console.warn()– registra un messaggio di avviso nella console. Possiamo usare la sostituzione di stringhe e argomenti aggiuntivi per formattare il messaggio di log.
window.customElements
La proprietà customElements è una proprietà di sola lettura che restituisce un riferimento all’oggetto CustomElementRegistry, che può essere usato per registrare nuovi elementi personalizzati e ottenere informazioni sugli elementi personalizzati precedentemente registrati. Gli elementi personalizzati sono anche chiamati Web Components.
Web Components è uno standard che ci permette di creare elementi personalizzati che incapsulano altri elementi HTML. Ne abbiamo bisogno per poter riutilizzare gruppi di elementi HTML in vari posti. Senza di esso, dobbiamo ripetere lo stesso gruppo di elementi HTML in posti diversi se vogliamo riutilizzarli. Gli elementi personalizzati definiti sono memorizzati nel CustomElementRegistry in modo che i browser sappiano che l’elemento personalizzato definito è effettivamente un elemento valido.
Per definire un elemento personalizzato, possiamo usare la proprietà customElements come nel seguente codice:
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);
}
});
Poi nel file HTML, aggiungiamo:
<hello-element></hello-element>
Nel codice precedente, abbiamo usato il metodo define dell’oggetto window.customElements. Nel primo argomento del metodo define, passiamo il nome dell’elemento. Poi nel secondo elemento, passiamo una classe HTMLElement, che è in realtà un oggetto in JavaScript. Nel metodo constructor del class , creiamo un elemento span con il innerHTML impostato su 'Hello' e poi lo aggiungiamo alla radice ombra, che è la radice del componente web. Se eseguiamo il codice qui sopra, dovremmo vedere la parola Hello visualizzata sullo schermo.
Il metodo define prende tre argomenti. Il primo è il name, che è una stringa che ha il nome dell’elemento personalizzato. Il secondo argomento è un HTMLElementcostruttore, dove, nella classe costruttore, creiamo gli elementi HTML che vogliamo attaccare alla radice dell’ombra e visualizziamo gli elementi creati. Il terzo argomento è un argomento opzionale che controlla come vengono definiti gli elementi. L’unica proprietà supportata è la proprietà extends, che è una stringa che ci permette di specificare l’elemento built-in da estendere. È utile per creare un elemento personalizzato che personalizza un elemento integrato come div , span o p.