Tulajdonságok
A window objektum számos tulajdonsággal rendelkezik. Tulajdonságait a EventTarget interfészből örökli, és a WindowOrWorkerGlobalScope és WindowEventHandlers mixinek tulajdonságait valósítja meg.
window.closed
A closed tulajdonság egy csak olvasható tulajdonság, amely azt jelzi, hogy a hivatkozott böngészőablak be van-e zárva vagy sem. Ez true, ha az ablak zárva van, és false egyébként. Ha például a:
console.log(window.closed)
futtatjuk az éppen megnyitott ablakon, akkor false kell naplóznia, mivel a böngészőablak nyilvánvalóan nyitva van.
window.console
A console tulajdonság egy objektum, amely számos olyan tulajdonsággal rendelkezik, amelyek hasznosak a böngésző konzoljára naplózott információkhoz. Ez egy csak olvasható objektum. A console metódusok a hibakereséshez hasznosak, és nem használhatók a végfelhasználók számára történő információmegjelenítésre. A console objektum a következő metódusokkal rendelkezik:
-
console.assert()– naplózza az üzenetet és a veremnyomot a konzolra, ha az első argumentumfalse -
console.clear()– törli a konzolt -
console.count()– naplózza, hogy hányszor hívták meg ezt a metódust a adott címkével -
console.countReset()– visszaállítja a számláló értékét az adott címkéhez -
console.debug()– naplózza a konzolra a ‘debug’-szintű üzenetet -
console.dir()– felsorolja az adott JavaScript objektum tulajdonságait. A tartalomban háromszögek jelzik a gyermekobjektumok tartalmát. -
console.dirxml()– lehetőség szerint megjeleníti az objektum HTML vagy XML reprezentációját -
console.error()– hibaüzenetet naplóz a konzolra. A naplóüzenet formázásához használhatunk karakterlánc-helyettesítést és további argumentumokat. -
console.group()– konzolüzenetek csoportját hozza létre, szintek szerint behúzva. AgroupEnd()segítségével léphetünk ki egy szintről. -
console.groupCollapsed()– konzolüzenetek csoportját hozza létre, szintek szerint behúzva, az elemek összezárva. Egy szintből agroupEnd(). -
console.groupEnd()– kiléphetünk az aktuális soron belüli csoportból -
console.info()– információs üzeneteket naplóz. A naplóüzenet formázásához karakterlánc-helyettesítést és további argumentumokat használhatunk. -
console.log()– általános információk naplózására szolgál. A naplóüzenet formázására string helyettesítést és további argumentumokat használhatunk. -
console.table()– naplózza és táblázatos formában jeleníti meg az adatokat -
console.time()– elindít egy időzítőt a paraméterben megadott névvel. Egy adott oldalon 10000 egyidejű időzítő futhat. -
console.timeEnd()– leállítja a megadott időzítőt és naplózza az indulás óta eltelt időt másodpercben kifejezve. -
console.timeLog()– naplózza a megadott időzítő értékét a konzolra -
console.trace()– naplózza a stack trace-t -
console.warn()– naplózza a figyelmeztető üzenetet a konzolra. A naplóüzenet formázásához karakterlánc-helyettesítést és további argumentumokat használhatunk.
window.customElements
A customElements tulajdonság egy csak olvasható tulajdonság, amely egy hivatkozást ad vissza a CustomElementRegistry objektumra, amely új egyéni elemek regisztrálására és a korábban regisztrált egyéni elemekről szóló információk lekérdezésére használható. Az egyéni elemeket webkomponenseknek is nevezik.
A webkomponensek egy olyan szabvány, amely lehetővé teszi, hogy olyan egyéni elemeket hozzunk létre, amelyek más HTML-elemeket kapszuláznak. Erre azért van szükségünk, hogy HTML-elemek csoportjait különböző helyeken újra felhasználhassuk. Enélkül ugyanazt a HTML-elemcsoportot különböző helyeken meg kell ismételnünk, ha újra akarjuk őket használni. A definiált egyéni elemeket a CustomElementRegistry-ben tároljuk, hogy a böngészők tudják, hogy a definiált egyéni elem valóban érvényes elem.
Az egyéni elem definiálásához használhatjuk a customElements tulajdonságot, mint a következő kódban:
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);
}
});
Ezután a HTML-fájlban hozzáadjuk:
<hello-element></hello-element>
A fenti kódban a window.customElements objektum define módszerét használtuk. A define metódus első argumentumában átadjuk az elem nevét. Ezután a második elemben átadunk egy HTMLElement osztályt, ami valójában egy objektum a JavaScriptben. A class constructor metódusában létrehozunk egy span elemet a innerHTML 'Hello' értékkel, majd hozzácsatoljuk az árnyékgyökérhez, ami a webkomponens gyökere. Ha a fenti kódot futtatjuk, a képernyőn a Hello szót kell megjelenítenünk.
A define metódus három argumentumot fogad el. Az első a name, amely egy karakterlánc, amely az egyéni elem nevét tartalmazza. A második argumentum egy HTMLElement konstruktor, ahol a konstruktor osztályban létrehozzuk azokat a HTML elemeket, amelyeket az árnyékgyökérhez szeretnénk csatolni, és megjeleníteni a létrehozott elemeket. A harmadik argumentum egy opcionális argumentum, amely az elemek definiálásának módját szabályozza. Az egyetlen támogatott tulajdonság a extends tulajdonság, amely egy karakterlánc, amellyel megadhatjuk a kiterjesztendő beépített elemet. Hasznos egy olyan egyéni elem létrehozásához, amely egy beépített elemet, például a div , span vagy p elemet testre szabja.