Představení objektu JavaScript Window – XML a Console

Vlastnosti

Objekt window má mnoho vlastností. Dědí vlastnosti z rozhraní EventTarget a implementuje vlastnosti z mixinů WindowOrWorkerGlobalScope a WindowEventHandlers.

okno.closed

Vlastnost closed je vlastnost pouze pro čtení, která udává, zda je odkazované okno prohlížeče zavřené nebo ne. Je true, pokud je okno zavřené, a false v opačném případě. Pokud například spustíte:

console.log(window.closed)

na aktuálně otevřeném okně, mělo by se zaznamenat false, protože okno prohlížeče je zřejmě otevřené.

okno.console

Vlastnost console je objekt s mnoha vlastnostmi, které jsou užitečné pro zaznamenávání informací do konzoly prohlížeče. Jedná se o objekt pouze pro čtení. Metody console jsou užitečné pro ladění a neměly by se používat pro prezentaci informací koncovým uživatelům. Objekt console má následující metody:

• console.assert() – zaznamená do konzoly zprávu a stopu zásobníku, pokud je první argument false
• console.clear() – vymaže konzolu
• console.count() – zaznamená počet volání této metody s parametrem daným štítkem
• console.countReset() – vynuluje hodnotu počítadla pro daný štítek
• console.debug() – zapíše do konzoly zprávu s úrovní protokolu ‚debug‘
• console.dir() – vypíše vlastnosti daného objektu JavaScript. Obsah bude mít trojúhelníky pro zobrazení obsahu podřízených objektů.
• console.dirxml() – zobrazí reprezentaci objektu ve formátu HTML nebo XML, pokud je to možné
• console.error() – zapíše do konzoly chybovou zprávu. Pro formátování zprávy protokolu můžeme použít záměnu řetězců a další argumenty.
• console.group() – vytvoří skupinu konzolových zpráv, odsazených podle úrovní. Z úrovně se můžeme přesunout pomocí groupEnd().
• console.groupCollapsed() – vytvoří skupinu konzolových zpráv odsazených podle úrovní se sbalenými položkami. Z úrovně se můžeme přesunout pomocí groupEnd().
• console.groupEnd() – ukončí aktuální řádkovou skupinu
• console.info() – zaznamená informační zprávy. Pro formátování zprávy protokolu můžeme použít záměnu řetězců a další argumenty.
• console.log() – slouží k obecnému logování informací. Pro formátování zprávy protokolu můžeme použít substituci řetězce a další argumenty.
• console.table() – protokoluje a zobrazuje data v tabulkovém formátu
• console.time() – spustí časovač s názvem zadaným v parametru. Na dané stránce lze současně spustit 10000 časovačů.
• console.timeEnd() – zastaví zadaný časovač a zaznamená uplynulý čas v sekundách od jeho spuštění.
• console.timeLog() – zaznamená hodnotu zadaného časovače do konzoly
• console.trace() – zaznamená stopu zásobníku
• console.warn() – zaznamená do konzoly varovnou zprávu. Pro formátování zprávy protokolu můžeme použít záměnu řetězců a další argumenty.

okno.customElements

Vlastnost customElements je vlastnost pouze pro čtení, která vrací odkaz na objekt CustomElementRegistry, který lze použít pro registraci nových vlastních prvků a získání informací o dříve registrovaných vlastních prvcích. Vlastní prvky se také nazývají webové komponenty.

Webové komponenty je standard, který nám umožňuje vytvářet vlastní prvky, které zapouzdřují jiné prvky HTML. To potřebujeme, abychom mohli na různých místech opakovaně používat skupiny prvků HTML. Bez něj bychom museli opakovat stejnou skupinu prvků HTML na různých místech, pokud bychom je chtěli znovu použít. Definované vlastní prvky jsou uloženy v CustomElementRegistry, aby prohlížeče věděly, že definovaný vlastní prvek je skutečně platný prvek.

Pro definování vlastního prvku můžeme použít vlastnost customElements jako v následujícím kódu:

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

Poté v souboru HTML přidáme:

<hello-element></hello-element>

V kódu výše jsme použili metodu define objektu window.customElements. V prvním argumentu metody define předáváme název elementu. Ve druhém prvku pak předáváme třídu HTMLElement, což je vlastně objekt v jazyce JavaScript. V metodě constructor class , vytvoříme prvek span s innerHTML nastaveným na 'Hello' a poté jej připojíme ke kořenu stínu, což je kořen webové komponenty. Pokud spustíme výše uvedený kód, mělo by se na obrazovce zobrazit slovo Hello.

Metoda define přijímá tři argumenty. Prvním je name, což je řetězec s názvem vlastního prvku. Druhým argumentem je konstruktor HTMLElement, kde v konstruktoru třídy vytvoříme prvky HTML, které chceme připojit ke kořenu stínu, a vytvořené prvky zobrazíme. Třetím argumentem je nepovinný argument, který řídí způsob definování prvků. Jedinou podporovanou vlastností je vlastnost extends, což je řetězec, který nám umožňuje určit vestavěný prvek, který chceme rozšířit. Je to užitečné pro vytvoření vlastního prvku, který upravuje vestavěný prvek, jako je div , span nebo p.