Indledning til JavaScript-vindueobjektet – XML og konsol

Egenskaber

Objektet window har mange egenskaber. Det arver egenskaber fra EventTarget-grænsefladen og implementerer egenskaber fra WindowOrWorkerGlobalScope– og WindowEventHandlers-mixins.

window.closed

Egenskaben closed er en skrivebeskyttet egenskab, der angiver, om det browservindue, der henvises til, er lukket eller ej. Den er true, hvis vinduet er lukket, og false ellers. Hvis du f.eks. kører:

console.log(window.closed)

på det aktuelt åbne vindue, skal der logges false, da browservinduet naturligvis er åbent.

window.console

Egenskaben console er et objekt med mange egenskaber, som er nyttige til logning af oplysninger til browserens konsol. Det er et skrivebeskyttet objekt. console-metoderne er nyttige til fejlfinding og bør ikke bruges til at præsentere oplysninger for slutbrugere. console-objektet har følgende metoder:

• console.assert() – logger en meddelelse og staksporet til konsollen, hvis det første argument er
• console.clear() – rydder konsollen
• console.count() – logger det antal gange, denne metode er blevet kaldt med givne etiket
• console.countReset() – nulstiller værdien af tælleren for det givne etiket
• console.debug() – logger en meddelelse til konsollen med logniveauet ‘debug’
• console.dir() – viser egenskaberne for det givne JavaScript-objekt. Indholdet vil have trekanter for at vise indholdet af underordnede objekter.
• console.dirxml() – viser en HTML- eller XML-repræsentation af objektet, hvis det er muligt
• console.error() – logger en fejlmeddelelse til konsollen. Vi kan bruge strengsubstitution og yderligere argumenter til at formatere logmeddelelsen.
• console.group() – opretter en gruppe af konsolmeddelelser, indrykket efter niveau. Vi kan bevæge os ud af et niveau med groupEnd().
• console.groupCollapsed() – opretter en gruppe af konsolmeddelelser, indrykket efter niveauer med elementerne sammenklappede. Vi kan bevæge os ud af et niveau med groupEnd().
• console.groupEnd() – forlader den aktuelle inline-gruppe
• console.info() – logger informationsmeddelelser. Vi kan bruge strengsubstitution og yderligere argumenter til at formatere logmeddelelsen.
• console.log() – bruges til generel logning af oplysninger. Vi kan bruge strengsubstitution og yderligere argumenter til at formatere logmeddelelsen.
• console.table() – logger og viser data i et tabelformat
• console.time() – starter en timer med det navn, der er angivet i parameteren. Der kan køres 10000 samtidige timere på en given side
• console.timeEnd() – stopper den angivne timer og logger den forløbne tid i sekunder, siden den startede
• console.timeLog() – logger værdien af den angivne timer til konsollen
• console.trace() – logger en stack-trace
• console.warn() – logger en advarselsmeddelelse til konsollen. Vi kan bruge strengsubstitution og yderligere argumenter til at formatere logmeddelelsen.

window.customElements

Egenskaben customElements er en skrivebeskyttet egenskab, der returnerer en henvisning til CustomElementRegistry-objektet, som kan bruges til at registrere nye brugerdefinerede elementer og få oplysninger om tidligere registrerede brugerdefinerede elementer. Brugerdefinerede elementer kaldes også Web Components.

Web Components er en standard, som gør det muligt at oprette brugerdefinerede elementer, der indkapsler andre HTML-elementer. Vi har brug for dette, så vi kan genbruge grupper af HTML-elementer forskellige steder. Uden den er vi nødt til at gentage den samme gruppe HTML-elementer forskellige steder, hvis vi vil genbruge dem. Definerede brugerdefinerede elementer gemmes i CustomElementRegistry, så browsere ved, at det definerede brugerdefinerede element faktisk er et gyldigt element.

For at definere et brugerdefineret element kan vi bruge customElements-egenskaben som i følgende kode:

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);
}
});

Så tilføjer vi i HTML-filen:

<hello-element></hello-element>

I koden ovenfor brugte vi define-metoden i window.customElements-objektet. I det første argument i define-metoden indsender vi elementnavnet. Derefter i det andet element indsender vi en HTMLElement-klasse, som faktisk er et objekt i JavaScript. I constructor-metoden i class opretter vi et span-element med innerHTML sat til 'Hello' og føjer det derefter til skyggeroden, som er roden af webkomponenten. Hvis vi kører ovenstående kode, skulle vi se ordet Hello blive vist på skærmen.

defineMetoden define tager tre argumenter. Det første er name, som er en streng, der har navnet på det brugerdefinerede element. Det andet argument er en HTMLElement-konstruktør, hvor vi i konstruktørklassen opretter de HTML-elementer, som vi ønsker at knytte til skyggeroden, og viser de oprettede elementer. Det tredje argument er et valgfrit argument, der styrer, hvordan elementerne defineres. Den eneste egenskab, der understøttes, er extends-egenskaben, som er en streng, der lader os angive det indbyggede element, der skal udvides. Det er nyttigt til at oprette et brugerdefineret element, der tilpasser et indbygget element som div , span eller p.