Introducerea obiectului JavaScript Window – XML și consolă

Proprietăți

Obiectul window are multe proprietăți. Moștenește proprietăți din interfața EventTarget și implementează proprietăți din mixinii WindowOrWorkerGlobalScope și WindowEventHandlers.

window.closed

Proprietatea closed este o proprietate numai pentru citire care indică dacă fereastra browserului la care se face referire este închisă sau nu. Este true dacă fereastra este închisă și false în caz contrar. De exemplu, dacă executați:

console.log(window.closed)

pe fereastra deschisă în prezent, ar trebui să se înregistreze false, deoarece fereastra browserului este evident deschisă.

window.console

Proprietatea console este un obiect cu multe proprietăți care sunt utile pentru înregistrarea de informații în consola browserului. Este un obiect numai pentru citire. Metodele console sunt utile pentru depanare și nu ar trebui să fie utilizate pentru a prezenta informații utilizatorilor finali. Obiectul console are următoarele metode:

• console.assert() – înregistrează un mesaj și urmă de stivă în consolă dacă primul argument este false
• console.clear() – șterge consola
• console.count() – înregistrează numărul de apeluri ale acestei metode cu eticheta dată
• console.countReset() – resetează valoarea contorului pentru eticheta dată
• console.debug() – înregistrează un mesaj în consolă cu nivelul de înregistrare „debug”
• console.dir() – listează proprietățile obiectului JavaScript dat. Conținutul va avea triunghiuri pentru a arăta conținutul obiectelor copil.
• console.dirxml() – afișează o reprezentare HTML sau XML a obiectului, dacă este posibil
• console.error() – înregistrează un mesaj de eroare în consolă. Putem folosi substituirea șirurilor de caractere și argumente suplimentare pentru a formata mesajul de jurnal.
• console.group() – creează un grup de mesaje de consolă, indentate pe niveluri. Putem ieși dintr-un nivel cu groupEnd().
• console.groupCollapsed() – creează un grup de mesaje de consolă, indentate pe niveluri, cu elementele prăbușite. Putem ieși dintr-un nivel cu groupEnd().
• console.groupEnd() – iese din grupul în linie curent
• console.info() – înregistrează mesaje informative. Putem folosi substituirea șirurilor de caractere și argumente suplimentare pentru a formata mesajul de jurnal.
• console.log() – utilizat pentru jurnalizarea generală a informațiilor. Putem folosi substituirea șirurilor de caractere și argumente suplimentare pentru a formata mesajul de jurnal.
• console.table() – înregistrează și afișează datele într-un format tabelar
• console.time() – pornește un cronometru cu numele specificat în parametru. Pot fi rulate 10000 de cronometre simultane pe o anumită pagină.
• console.timeEnd() – oprește cronometrul specificat și înregistrează timpul scurs în secunde de când a pornit.
• console.timeLog() – înregistrează valoarea cronometrului specificat în consolă
• console.trace() – înregistrează o urmă de stivă
• console.warn() – înregistrează un mesaj de avertizare în consolă. Putem utiliza substituirea șirurilor de caractere și argumente suplimentare pentru a formata mesajul de jurnal.

window.customElements

Proprietatea customElements este o proprietate numai pentru citire care returnează o referință la obiectul CustomElementRegistry, care poate fi utilizat pentru a înregistra noi elemente personalizate și pentru a obține informații despre elementele personalizate înregistrate anterior. Elementele personalizate se mai numesc și componente Web.

Componente Web este un standard care ne permite să creăm elemente personalizate care încapsulează alte elemente HTML. Avem nevoie de acest lucru pentru a putea reutiliza grupuri de elemente HTML în diverse locuri. În lipsa acestuia, trebuie să repetăm același grup de elemente HTML în diferite locuri dacă dorim să le reutilizăm. Elementele personalizate definite sunt stocate în CustomElementRegistry astfel încât browserele să știe că elementul personalizat definit este de fapt un element valid.

Pentru a defini un element personalizat, putem folosi proprietatea customElements ca în următorul cod:

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

Apoi, în fișierul HTML, adăugăm:

<hello-element></hello-element>

În codul de mai sus, am folosit metoda define a obiectului window.customElements. În primul argument al metodei define, introducem numele elementului. Apoi, în al doilea element, trecem o clasă HTMLElement, care este de fapt un obiect în JavaScript. În metoda constructor a class , creăm un element span cu innerHTML setat la 'Hello' și apoi îl adăugăm la rădăcina umbrită, care este rădăcina componentei web. Dacă executăm codul de mai sus, ar trebui să vedem cuvântul Hello afișat pe ecran.

Metoda define primește trei argumente. Primul este name, care este un șir de caractere care are numele elementului personalizat. Al doilea argument este un constructor HTMLElement, unde, în clasa constructor, creăm elementele HTML pe care dorim să le atașăm la rădăcina umbrei și să afișăm elementele create. Al treilea argument este un argument opțional care controlează modul în care sunt definite elementele. Singura proprietate care este acceptată este proprietatea extends, care este un șir de caractere care ne permite să specificăm elementul încorporat care urmează să fie extins. Este utilă pentru a crea un element personalizat care personalizează un element încorporat precum div , span sau p.

.