Właściwości
Obiekt window ma wiele właściwości. Dziedziczy on właściwości z interfejsu EventTarget i implementuje właściwości z miksów WindowOrWorkerGlobalScope i WindowEventHandlers.
window.closed
Właściwość closed jest właściwością tylko do odczytu, która wskazuje, czy okno przeglądarki, do którego się odwołujemy, jest zamknięte, czy nie. Ma wartość true jeśli okno jest zamknięte i false w przeciwnym wypadku. Na przykład, jeśli uruchomisz:
console.log(window.closed)
na aktualnie otwartym oknie, powinno zalogować false, ponieważ okno przeglądarki jest oczywiście otwarte.
window.console
Właściwość console jest obiektem z wieloma właściwościami, które są przydatne do logowania informacji do konsoli przeglądarki. Jest to obiekt tylko do odczytu. Metody console są przydatne do debugowania i nie powinny być wykorzystywane do prezentowania informacji użytkownikom końcowym. Obiekt console posiada następujące metody:
-
console.assert()– rejestruje komunikat i ślad stosu na konsolę, jeśli pierwszym argumentem jestfalse -
console.clear()– czyści konsolę -
console.count()– rejestruje liczbę wywołań tej metody z. daną etykietą -
console.countReset()– resetuje wartość licznika dla danej etykiety -
console.debug()– wypisuje komunikat do konsoli z poziomem logowania 'debug’ -
console.dir()– wypisuje właściwości danego obiektu JavaScript. Zawartość będzie miała trójkąty, aby pokazać zawartość obiektów potomnych. -
console.dirxml()– wyświetla reprezentację HTML lub XML obiektu, jeśli to możliwe -
console.error()– loguje komunikat o błędzie do konsoli. Możemy użyć podstawiania łańcuchów i dodatkowych argumentów do sformatowania komunikatu logu. -
console.group()– tworzy grupę komunikatów konsoli, wciętych według poziomów. Możemy wyjść z poziomu za pomocągroupEnd(). -
console.groupCollapsed()– tworzy grupę komunikatów konsolowych, wciętych według poziomów, ze zwiniętymi elementami. Możemy wyjść z poziomu za pomocągroupEnd(). -
console.groupEnd()– wychodzi z bieżącej grupy inline -
console.info()– loguje komunikaty informacyjne. Możemy użyć podstawiania łańcuchów i dodatkowych argumentów do sformatowania komunikatu dziennika. -
console.log()– służy do ogólnego rejestrowania informacji. Możemy użyć podstawiania łańcuchów i dodatkowych argumentów do sformatowania komunikatu dziennika. -
console.table()– loguje i wyświetla dane w formacie tabelarycznym -
console.time()– uruchamia timer o nazwie określonej w parametrze. Na danej stronie można uruchomić 10000 jednoczesnych timerów. -
console.timeEnd()– zatrzymuje określony timer i loguje czas w sekundach, jaki upłynął od jego uruchomienia. -
console.timeLog()– loguje wartość określonego timera do konsoli -
console.trace()– loguje ślad stosu -
console.warn()– loguje komunikat ostrzegawczy do konsoli. Możemy używać podstawiania łańcuchów i dodatkowych argumentów do formatowania komunikatu dziennika.
window.customElements
Właściwość customElements jest właściwością tylko do odczytu, która zwraca referencję do obiektu CustomElementRegistry, który może być używany do rejestrowania nowych elementów niestandardowych i uzyskiwania informacji o wcześniej zarejestrowanych elementach niestandardowych. Elementy niestandardowe są również nazywane Web Components.
Web Components to standard, który pozwala nam tworzyć niestandardowe elementy, które hermetyzują inne elementy HTML. Jest nam to potrzebne, abyśmy mogli ponownie wykorzystać grupy elementów HTML w różnych miejscach. Bez tego, musimy powtarzać tę samą grupę elementów HTML w różnych miejscach, jeśli chcemy je ponownie wykorzystać. Zdefiniowane elementy niestandardowe są przechowywane w CustomElementRegistry, dzięki czemu przeglądarki wiedzą, że zdefiniowany element niestandardowy jest rzeczywiście prawidłowym elementem.
Aby zdefiniować element niestandardowy, możemy użyć właściwości customElements, jak w poniższym kodzie:
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);
}
});
Następnie w pliku HTML dodajemy:
<hello-element></hello-element>
W powyższym kodzie użyliśmy metody define obiektu window.customElements. W pierwszym argumencie metody define przekazujemy nazwę elementu. Następnie w drugim elemencie przekazujemy klasę HTMLElement, która w rzeczywistości jest obiektem w JavaScript. W metodzie constructor metody class tworzymy element span z innerHTML ustawionym na 'Hello', a następnie dołączamy go do korzenia shadow, który jest korzeniem Web Componentu. Jeśli uruchomimy powyższy kod, powinniśmy zobaczyć na ekranie wyświetlone słowo Hello.
Metoda define przyjmuje trzy argumenty. Pierwszym z nich jest name, który jest łańcuchem znaków zawierającym nazwę elementu niestandardowego. Drugim argumentem jest konstruktor HTMLElement, gdzie w klasie konstruktora tworzymy elementy HTML, które chcemy dołączyć do korzenia cienia i wyświetlić utworzone elementy. Trzeci argument jest opcjonalnym argumentem, który kontroluje sposób definiowania elementów. Jedyną właściwością, która jest obsługiwana jest właściwość extends, która jest łańcuchem pozwalającym nam określić wbudowany element do rozszerzenia. Jest to przydatne do tworzenia niestandardowych elementów, które dostosowują wbudowane elementy takie jak div , span lub p.
.