Properties
Het window object heeft vele eigenschappen. Het erft eigenschappen van de EventTarget interface en implementeert eigenschappen van de WindowOrWorkerGlobalScope en WindowEventHandlers mixins.
window.closed
De closed property is een read-only property die aangeeft of het browservenster waarnaar verwezen wordt, gesloten is of niet. Het is true als het venster gesloten is en false anders. Als u bijvoorbeeld:
console.log(window.closed)
uitvoert op het huidige geopende venster, zou het false moeten loggen, omdat het browser venster duidelijk open is.
window.console
De console property is een object met veel eigenschappen die nuttig zijn voor het loggen van informatie naar de console van de browser. Het is een alleen-lezen object. De console methodes zijn nuttig voor debugging en moeten niet worden gebruikt voor het presenteren van informatie aan eindgebruikers. Het console object heeft de volgende methoden:
-
console.assert()– logt een bericht en de stack trace naar de console als het eerste argumentfalse -
console.clear()is – wist de console -
console.count()– logt het aantal keren dat deze methode is aangeroepen met het gegeven label -
console.countReset()– herstelt de waarde van de teller voor het gegeven label -
console.debug()– logt een bericht naar de console met het log-niveau ‘debug’ -
console.dir()– geeft een lijst van de eigenschappen van het gegeven JavaScript-object. De inhoud zal driehoeken hebben om de inhoud van kind-objecten te tonen. -
console.dirxml()– toont een HTML of XML representatie van het object indien mogelijk -
console.error()– logt een foutmelding naar de console. We kunnen string-substitutie en bijkomende argumenten gebruiken om de log message op te maken. -
console.group()– maakt een groep van console-berichten, ingesprongen door niveaus. We kunnen een niveau verlaten metgroupEnd(). -
console.groupCollapsed()– creëert een groep console-berichten, ingesprongen per niveau met de items samengevouwen. We kunnen uit een level gaan metgroupEnd(). -
console.groupEnd()– verlaat de huidige inline groep -
console.info()– logt informatieve berichten. We kunnen string-substitutie en bijkomende argumenten gebruiken om de log message op te maken. -
console.log()– gebruikt voor algemene logging van informatie. We kunnen string-substitutie en additionele argumenten gebruiken om het log bericht op te maken. -
console.table()– logt en toont gegevens in een tabel formaat -
console.time()– start een timer met de naam gespecificeerd in de parameter. Er kunnen 10000 gelijktijdige timers op een gegeven pagina worden uitgevoerd. -
console.timeEnd()– stopt de opgegeven timer en logt de verstreken tijd in seconden sinds de start. -
console.timeLog()– logt de waarde van de opgegeven timer naar de console -
console.trace()– logt een stack trace -
console.warn()– logt een waarschuwingsbericht naar de console. We kunnen string-substitutie en extra argumenten gebruiken om het logbericht op te maken.
window.customElements
De customElements eigenschap is een alleen-lezen eigenschap die een verwijzing naar het CustomElementRegistry object retourneert, dat kan worden gebruikt om nieuwe aangepaste elementen te registreren en informatie op te halen over eerder geregistreerde aangepaste elementen. Aangepaste elementen worden ook wel Web Components genoemd.
Web Components is een standaard waarmee we aangepaste elementen kunnen maken die andere HTML-elementen inkapselen. We hebben dit nodig zodat we groepen HTML-elementen op verschillende plaatsen kunnen hergebruiken. Zonder dit moeten we dezelfde groep HTML-elementen op verschillende plaatsen herhalen als we ze willen hergebruiken. Gedefinieerde aangepaste elementen worden opgeslagen in de CustomElementRegistry, zodat browsers weten dat het gedefinieerde aangepaste element ook echt een geldig element is.
Om een aangepast element te definiëren, kunnen we de customElements eigenschap gebruiken zoals in de volgende code:
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);
}
});
Dan in het HTML bestand, voegen we toe:
<hello-element></hello-element>
In de code hierboven, gebruikten we de define methode van het window.customElements object. In het eerste argument van de methode define, geven we de naam van het element door. Vervolgens geven we in het tweede element een HTMLElement-klasse door, wat in feite een object is in JavaScript. In de constructor-methode van de class maken we een span-element met de innerHTML ingesteld op 'Hello' en voegen dit toe aan de schaduw-root, die de root is van het Web Component. Als we de bovenstaande code uitvoeren, zouden we het woord Hello op het scherm moeten zien verschijnen.
De define-methode neemt drie argumenten. Het eerste is de name, dat is een string die de naam van het aangepaste element heeft. Het tweede argument is een HTMLElement constructor, waarbij we in de constructorklasse de HTML-elementen maken die we aan de schaduwroot willen hechten en de gemaakte elementen weergeven. Het derde argument is een optioneel argument dat bepaalt hoe elementen worden gedefinieerd. De enige eigenschap die wordt ondersteund is de extends eigenschap, wat een string is waarmee we het ingebouwde element kunnen specificeren om uit te breiden. Het is nuttig voor het creëren van een aangepast element dat een ingebouwd element zoals div , span of p aanpast.