Propriétés
L’objet window possède de nombreuses propriétés. Il hérite des propriétés de l’interface EventTarget et met en œuvre les propriétés des mixins WindowOrWorkerGlobalScope et WindowEventHandlers.
window.closed
La propriété closed est une propriété en lecture seule qui indique si la fenêtre du navigateur référencé est fermée ou non. Elle est true si la fenêtre est fermée et false sinon. Par exemple, si vous exécutez :
console.log(window.closed)
sur la fenêtre actuellement ouverte, il devrait enregistrer false puisque la fenêtre du navigateur est évidemment ouverte.
window.console
La propriété console est un objet avec de nombreuses propriétés qui sont utiles pour enregistrer des informations dans la console du navigateur. Il s’agit d’un objet en lecture seule. Les méthodes console sont utiles pour le débogage et ne devraient pas être utilisées pour présenter des informations aux utilisateurs finaux. L’objet console possède les méthodes suivantes :
-
console.assert()– enregistre un message et la trace de la pile dans la console si le premier argument estfalse -
console.clear()– efface la console -
console.count()– enregistre le nombre de fois où cette méthode a été appelée avec le étiquette donnée -
console.countReset()– remet à zéro la valeur du compteur pour l’étiquette donnée -
console.debug()– enregistre un message dans la console avec le niveau d’enregistrement ‘debug’ -
console.dir()– liste les propriétés de l’objet JavaScript donné. Le contenu aura des triangles pour montrer le contenu des objets enfants. -
console.dirxml()– affiche une représentation HTML ou XML de l’objet si possible -
console.error()– enregistre un message d’erreur dans la console. Nous pouvons utiliser la substitution de chaîne et des arguments supplémentaires pour formater le message de journal. -
console.group()– crée un groupe de messages de console, indentés par niveaux. Nous pouvons sortir d’un niveau avecgroupEnd(). -
console.groupCollapsed()– crée un groupe de messages de console, indentés par niveaux avec les éléments effondrés. Nous pouvons sortir d’un niveau avecgroupEnd(). -
console.groupEnd()– quitte le groupe en ligne actuel -
console.info()– consigne les messages d’information. Nous pouvons utiliser la substitution de chaînes de caractères et des arguments supplémentaires pour formater le message du journal. -
console.log()– utilisé pour la journalisation générale des informations. Nous pouvons utiliser la substitution de chaîne et des arguments supplémentaires pour formater le message de journal. -
console.table()– enregistre et affiche les données dans un format tabulaire -
console.time()– démarre un minuteur avec le nom spécifié dans le paramètre. 10000 timers simultanés peuvent être exécutés sur une page donnée. -
console.timeEnd()– arrête le timer spécifié et enregistre le temps écoulé en secondes depuis son démarrage. -
console.timeLog()– enregistre la valeur du timer spécifié dans la console -
console.trace()– enregistre une trace de pile -
console.warn()– enregistre un message d’avertissement dans la console. Nous pouvons utiliser la substitution de chaînes et des arguments supplémentaires pour formater le message de journal.
window.customElements
La propriété customElements est une propriété en lecture seule qui renvoie une référence à l’objet CustomElementRegistry, qui peut être utilisé pour enregistrer de nouveaux éléments personnalisés et obtenir des informations sur les éléments personnalisés précédemment enregistrés. Les éléments personnalisés sont également appelés composants Web.
Les composants Web sont une norme qui nous permet de créer des éléments personnalisés qui encapsulent d’autres éléments HTML. Nous en avons besoin pour pouvoir réutiliser des groupes d’éléments HTML à divers endroits. Sans cela, nous devons répéter le même groupe d’éléments HTML à différents endroits si nous voulons les réutiliser. Les éléments personnalisés définis sont stockés dans le CustomElementRegistry afin que les navigateurs sachent que l’élément personnalisé défini est effectivement un élément valide.
Pour définir un élément personnalisé, nous pouvons utiliser la propriété customElements comme dans le code suivant :
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);
}
});
Puis dans le fichier HTML, nous ajoutons :
<hello-element></hello-element>
Dans le code ci-dessus, nous avons utilisé la méthode define de l’objet window.customElements. Dans le premier argument de la méthode define, nous passons le nom de l’élément. Ensuite, dans le deuxième élément, nous passons dans une classe HTMLElement, qui est en fait un objet en JavaScript. Dans la méthode constructor de la class , nous créons un élément span avec le innerHTML défini sur 'Hello' et nous l’ajoutons ensuite à la racine shadow, qui est la racine du composant Web. Si nous exécutons le code ci-dessus, nous devrions voir le mot Hello s’afficher à l’écran.
La méthode define prend trois arguments. Le premier est le name, qui est une chaîne de caractères qui a le nom de l’élément personnalisé. Le deuxième argument est un HTMLElementconstructeur, où, dans la classe constructeur, nous créons les éléments HTML que nous voulons attacher à la racine de l’ombre et afficher les éléments créés. Le troisième argument est un argument facultatif qui contrôle la façon dont les éléments sont définis. La seule propriété prise en charge est la propriété extends, qui est une chaîne de caractères permettant de spécifier l’élément intégré à étendre. Elle est utile pour créer un élément personnalisé qui personnalise un élément intégré comme div , span ou p.
.