JavScript-ikkunaobjektin esittely – XML ja konsoli

Ominaisuudet

Objektilla window on monia ominaisuuksia. Se perii ominaisuuksia EventTarget-rajapinnasta ja toteuttaa ominaisuuksia WindowOrWorkerGlobalScope– ja WindowEventHandlers-mixineistä.

ikkuna.suljettu

Ominaisuus closed on vain lukuominaisuus, joka kertoo, onko viitattu selainikkuna suljettu vai ei. Se on true, jos ikkuna on suljettu ja false muutoin. Jos esimerkiksi suoritat:

console.log(window.closed)

parhaillaan avoinna olevaan ikkunaan, sen pitäisi kirjautua false, koska selainikkuna on ilmeisesti auki.

ikkuna.konsoli

Ominaisuus console on objekti, jolla on monia ominaisuuksia, joista on hyötyä selaimen konsolin tietojen kirjaamisessa. Se on vain lukuobjekti. console-metodit ovat hyödyllisiä virheenkorjauksessa, eikä niitä pitäisi käyttää tietojen esittämiseen loppukäyttäjille. console-objektilla on seuraavat metodit:

• console.assert() – kirjaa viestin ja pinon jäljen konsoliin, jos ensimmäinen argumentti on false
• console.clear() – tyhjentää konsolin
• console.count() – kirjaa, kuinka monta kertaa tätä metodia on kutsuttu
• console.count(). annetulla etiketillä
• console.countReset() – nollaa laskurin arvon annetulla etiketillä
• console.debug() – kirjaa viestin konsoliin lokitasolla ’debug’
• console.dir() – luettelee annetun JavaScript-objektin ominaisuudet. Sisällössä on kolmioita, jotka näyttävät lapsiobjektien sisällön.
• console.dirxml() – näyttää objektin HTML- tai XML-edustuksen, jos mahdollista
• console.error() – kirjaa virheilmoituksen konsoliin. Voimme käyttää merkkijonojen korvaamista ja lisäargumentteja lokiviestin muotoiluun.
• console.group() – luo konsoliviestien ryhmän, joka on sisennetty tasojen mukaan. Voimme siirtyä pois tasolta groupEnd():llä.
• console.groupCollapsed() – luo konsoliviestien ryhmän, joka on sisennetty tasojen mukaan ja jonka kohteet on suljettu. Voimme siirtyä pois tasolta groupEnd().
• console.groupEnd() – poistuu nykyisestä inline-ryhmästä
• console.info() – kirjaa informatiiviset viestit. Voimme käyttää merkkijonojen korvaamista ja lisäargumentteja lokiviestin muotoiluun.
• console.log() – käytetään yleiseen tiedon kirjaamiseen. Voimme käyttää merkkijonosubstituutiota ja lisäargumentteja lokiviestin muotoiluun.
• console.table() – kirjaa ja näyttää tiedot taulukkomuodossa
• console.time() – käynnistää ajastimen parametrissa määritetyllä nimellä. Tietyllä sivulla voidaan suorittaa 10000 samanaikaista ajastinta.
• console.timeEnd() – pysäyttää määritetyn ajastimen ja kirjaa sen käynnistymisestä kuluneen ajan sekunteina.
• console.timeLog() – kirjaa määritetyn ajastimen arvon konsoliin
• console.trace() – kirjaa pinojäljen
• console.warn() – kirjaa varoitusviestin konsoliin. Voimme käyttää merkkijonojen korvaamista ja lisäargumentteja lokiviestin muotoiluun.

window.customElements

Ominaisuus customElements on vain lukuominaisuus, joka palauttaa viittauksen CustomElementRegistry-objektiin, jonka avulla voidaan rekisteröidä uusia mukautettuja elementtejä ja saada tietoja aiemmin rekisteröidyistä mukautetuista elementeistä. Mukautettuja elementtejä kutsutaan myös Web-komponenteiksi.

Web-komponentit on standardi, jonka avulla voidaan luoda mukautettuja elementtejä, jotka kapseloivat muita HTML-elementtejä. Tarvitsemme tätä, jotta voimme käyttää HTML-elementtien ryhmiä uudelleen eri paikoissa. Ilman sitä meidän on toistettava sama HTML-elementtiryhmä eri paikoissa, jos haluamme käyttää niitä uudelleen. Määritellyt mukautetut elementit tallennetaan CustomElementRegistry:iin, jotta selaimet tietävät, että määritelty mukautettu elementti on todella kelvollinen elementti.

Määritellessämme mukautetun elementin voimme käyttää customElements-ominaisuutta, kuten seuraavassa koodissa:

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

Silloin lisäämme HTML-tiedostoon:

<hello-element></hello-element>

Ylläolevassa koodissa käytimme window.customElements-olion define-metodia. Metodin define ensimmäisessä argumentissa annamme elementin nimen. Sitten toisessa elementissä annamme HTMLElement-luokan, joka on itse asiassa JavaScriptissä objekti. class-metodissa constructor luomme span-elementin, jonka innerHTML:ksi asetetaan 'Hello', ja liitämme sen sitten varjojuureen, joka on web-komponentin juuri. Jos suoritamme yllä olevan koodin, näytöllä pitäisi näkyä sana Hello.

define-metodi ottaa kolme argumenttia. Ensimmäinen on name, joka on merkkijono, jossa on mukautetun elementin nimi. Toinen argumentti on HTMLElement-konstruktori, jossa konstruktoriluokassa luodaan HTML-elementit, jotka halutaan liittää varjon juureen ja näyttää luodut elementit. Kolmas argumentti on valinnainen argumentti, joka ohjaa sitä, miten elementit määritellään. Ainoa tuettu ominaisuus on extends-ominaisuus, joka on merkkijono, jonka avulla voimme määrittää laajennettavan sisäänrakennetun elementin. Se on hyödyllinen luotaessa mukautettua elementtiä, joka mukauttaa sisäänrakennettua elementtiä, kuten div , span tai p.