L’objet document et l’objet fenêtre sont deux des objets parents auxquels nous pouvons accéder avec JavaScript. L’objet document lui-même est subordonné à l’objet fenêtre. Je pense que tout le monde les connaît, car ils sont omniprésents notamment lors du développement d’applications web avec vanilla javascript.

Cet article a pour but de vous montrer certaines des caractéristiques pratiques de ces deux objets. Il n’y a pas besoin d’une introduction plus détaillée de ce que sont exactement ces deux, je vais maintenant vous donner quelques exemples pratiques que vous pouvez utiliser sans beaucoup de connaissances préalables.

Le menu contextuel est un événement DOM, qui est déclenché lorsqu’un utilisateur fait un clic droit sur un élément DOM que le menu contextuel veut appeler. Le menu contextuel est simplement le menu qui s’affiche par défaut lorsqu’un utilisateur fait un clic droit sur une page web, à moins que la page web ne traite l’événement différemment, comme nous le ferons dans un instant. Ainsi, même si le nom n’est pas connu, le petit menu a un aspect différent selon le système d’exploitation et propose des choses comme « enregistrer l’image sous », « examiner », « recharger » & »retour ».
Basiquement, nous pouvons utiliser l’événement contextmenu dans le DOM pour exécuter notre propre action lorsque l’utilisateur fait un clic droit.

Clic droit et blocage de l’affichage du menu contextuel par défaut

<div id="nocontext">No context menu available for this</div><script>
noContext = document.getElementById('nocontext')noContext.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
</script>

Nous avons donc mis en place un EventListener pour notre <div>, qui doit être exécuté lorsque le menu contextuel est appelé, c’est-à-dire avec un clic droit. Il renvoie un événement, que nous pouvons bloquer avec la fonction standard preventDefault.

Le cas par défaut serait comme un clic droit sur le menu contextuel. Mais avec la fonction preventDefault, nous bloquons cela. Donc, rien ne se passe.

Bien sûr, non seulement nous pouvons bloquer l’événement standard, mais nous pouvons aussi exécuter toutes sortes de code lorsque l’utilisateur fait un clic droit. Nous pouvons alors combiner cela avec le preventDefault pour offrir notre propre menu contextuel, par exemple :

contextAvailable.addEventListener('contextmenu', (e) => {
console.log('you rightclicked this')
e.preventDefault()
})

Le mode de conception de votre document

Jusqu’à la recherche pour cet article, cela m’était complètement inconnu, mais en fait cette fonctionnalité peut être très pratique. Vous pouvez l’utiliser par exemple pour un système de gestion de contenu, ou pour éditer rapidement sans code, pour visualiser les changements potentiels de contenu sur un site web.
Parce que ce que designMode rend possible, c’est que vous pouvez éditer tout le contenu d’un site web que nous regardons dans le navigateur sans avoir à modifier le code HTML des devtools.

Vous pouvez l’essayer dès maintenant. Il suffit d’aller sur n’importe quel site web, d’ouvrir la console, et d’entrer ce qui suit:

document.designMode = "on"

Maintenant vous pouvez simplement éditer le site web affiché comme si c’était un document Word. Plutôt cool, non ?
Le designMode ne connaît que deux états : Activé et désactivé. Donc, si vous voulez le désactiver, il suffit de faire ce qui suit :

document.designMode = "off"

Si vous voulez protéger des éléments individuels de la modification du contenu, vous pouvez leur donner l’attribut suivant : (Vous pouvez alors seulement les supprimer complètement, mais pas les manipuler)

<i contenteditable = "false">This is not editable.</i>

Copier quelque chose dans le presse-papiers des utilisateurs avec du code

À l’origine, le bien connu document.execCommand() était destiné à cet effet, mais il est maintenant considéré comme déprécié.
A la place, l’API Presse-papiers est maintenant disponible pour la copie automatique du contenu en utilisant JavaScript.
Il peut être utilisé via l’objet navigateur, qui est subordonné à l’objet fenêtre.

Regardons un exemple où, après avoir appuyé sur le bouton, nous copions dans le presse-papiers le texte saisi dans le champ de saisie :

Avoir l’état du document

En particulier pour le développement de webapps plus complexes et optimisées en termes de performances, des enquêtes sur le temps de chargement & le comportement général du document devraient être menées afin de trouver les points faibles potentiels ou d’améliorer les performances et l’UX.

C’est pourquoi, avec document.readyState, nous pouvons accéder à l’état actuel du document et prendre d’autres décisions en fonction du résultat.

Voici les résultats possibles, document.readyState peut retourner :

• uninitialized – N’a pas encore commencé à se charger
• loading – Est en train de se charger
• loaded – A été chargé
• interactive – S’est suffisamment chargé et l’utilisateur peut interagir avec lui
• complete – Entièrement chargé
  Source : https://www.w3schools.com/jsref/prop_doc_readystate.asp

Si vous jouez un peu avec en pratique, il y a des résultats intéressants. Pour cela, j’ai créé un petit boilerplate HTML, avec lequel nous sortons le statut à différents endroits. Chacun des scripts externes contient simplement console.log(document.readyState)

Voici, dans l’ordre chronologique, ce que notre site web enregistre alors:

• normal : loading
• script-tag : loading
• defer : interactive
• async : interactive
• onload body : complete

Les différentes manières d’inclure les scripts externes fonctionnent ici comme prévu. Mais il est intéressant que si nous incluons une seule grande image sur la page, le temps de chargement de l’image retardera également l’événement onload de la balise body.

Donc, dans tous les cas, le statut est « complet », si nous sortons le statut avec l’événement onload.

Travailler avec le focus / élément actif

Lorsqu’il s’agit d’éléments avec lesquels l’utilisateur du site web peut réellement interagir, comme les boutons, les entrées et les zones de texte, ceux-ci peuvent avoir ce qu’on appelle le focus. Si une entrée a le focus, et que nous tapons quelque chose sur le clavier, cela s’écrit dans le champ de saisie. Si le champ n’a pas le focus, le texte n’est pas écrit dans le champ de saisie. Je pense que tout le monde sait ce qu’est le focus.

Déterminer quel élément a le focus

Peut-être connaissez-vous déjà l’attribut onfocus, qui est l’événement lorsqu’un élément obtient le focus. Nous pourrions alors l’utiliser pour créer des animations CSS cool ou, si nous voulons analyser le comportement de l’utilisateur, enregistrer cet événement.

De la même manière, nous pouvons déterminer quel élément a le focus sans avoir à donner à tous les éléments l’attribut onfocus.
On peut le faire de la manière suivante :

var x = document.activeElement.idconsole.log(x)

On peut donc obtenir l’id de l’élément qui a le focus / est actif.

Changer le focus manuellement

En particulier en ce qui concerne l’UX, il peut être utile parfois de soulager l’utilisateur de la sélection des éléments. Par exemple, s’il a fait une saisie incorrecte dans un formulaire, et que nous voulons qu’il change sa saisie dans chaque champ de saisie:

document.getElementById('input1').focus()

Lire le style actuel d’un élément

Dans les grandes applications web dynamiques, nous changeons constamment le style actif de n’importe quel élément dans le DOM.
Nous pouvons également sortir cela à deux pour n’importe quel moment, alors vérifiez quels attributs et valeurs CSS nos éléments ont.

1. element.stylepeut également être utilisé pour lire les styles, mais est destiné à les modifier
2. Window.getComputedStyle() est fait pour obtenir le style actuel

Donc avec la dernière fonction nous pouvons obtenir un objet entier avec tous les styles de l’élément :

let box = document.getElementById('box')console.log(window.getComputedStyle(box)) // CSSStyleDeclaration{}

Mais nous pouvons également sortir des attributs individuels et les valeurs correspondantes plus précisément:

let box = document.getElementById('box')console.log(
window.getComputedStyle(box)
.getPropertyValue('background-color') // E.g. rgb(0, 128, 0)
)

Travailler avec la taille du navigateur & le site web affiché

Bien sûr, il n’y a pas de contournement des tailles dans le développement web moderne. Voici ce dont vous avez besoin :

• window.outerWidth
• window.outerHeight

Les deux renvoient les dimensions de la fenêtre du navigateur elle-même, donc peu importe que la page web soit réduite en taille par les outils du développeur par exemple.

Alors, quand il s’agit de déterminer réellement sur quelles dimensions le site web est actuellement affiché, les fonctions suivantes sont disponibles :

• window.innerWidth
• window.innerHeight

Par exemple, voici comment vous pourriez rendre un élément plein écran :

elem.style.width = window.innerWidth + 'px'

Une note de JavaScript In Plain English

Nous avons lancé trois nouvelles publications ! Montrez un peu d’amour pour nos nouvelles publications en les suivant : AI in Plain English, UX in Plain English, Python in Plain English – merci et continuez à apprendre !

Nous sommes également toujours intéressés à aider à promouvoir un contenu de qualité. Si vous avez un article que vous aimeriez soumettre à l’une de nos publications, envoyez-nous un courriel à [email protected] avec votre nom d’utilisateur Medium et nous vous ferons ajouter en tant qu’auteur. Faites-nous également savoir à quelle(s) publication(s) vous souhaitez être ajouté.