Formation Apprendre le JavaScript : Fonctions usuelles dans le navigateur

Dans ce chapitre nous allons voir quelques fonctions utiles que l'on retrouvera assez souvent dans du code JavaScript côté navigateur.

Positionnement

Il existe 2 moyens de récupérer la position d'un élément.

• getBoundingClientRect() retourne un DOMRect fournissant des informations sur la taille de l'élément et sa position de l'élément par rapport à la zone d'affichage.
• offsetLeft et autre propriété commençant par "offset" permet de récupérer la position de l'élément par rapport à son noeud offsetParent().

Il est possible d'utiliser les propriétés offset de manière récursive pour connaitre la position d'un élément par rapport au haut du document à l'aide de la récursivité.

/**
 * Récupère la position d'un élément par rapport au document
 * @param {HTMLElement} element
 **/
function recursiveOffsetTop (element) {
    if (element.offsetParent) {
        return element.offsetTop + recursiveOffsetTop(element.offsetParent)
    }
    return element.offsetTop
}

Dataset

Les éléments HTML peuvent recevoir des attributs de données qui permettent de passer des information vers le JavaScript. Ces attributs seront préfixé par un data-.

<article data-author="John Doe" data-author-age="18">
   ...
</article>

Il sera ensuite possible de récupérer ces attributs avec une propriété spéciale dataset.

const article = document.querySelector('article')
article.dataset.author // "John Doe"
article.dataset.authorAge // "18"

Vous pouvez aussi utiliser dataset en écriture pour ajouter des attributs de données à un élément.

article.dataset.publisher = "Mon Petit Livre"

Animation CSS

Il est possible d'animer un élément à l'aide de la méthode animate qui utilisera le même principe d'animation que les animations CSS.

document.querySelector("button").animate([
  // étapes/keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // temporisation
  duration: 1000,
  iterations: Infinity
})

Les média query

Si on souhaite effectuer une opération en fonction de la dimension de l'écran il est possible d'utiliser le système de media-query déjà vu en CSS.

const mediaQuery = window.matchMedia("(min-width: 400px)")
mediaQuery.matches // true ou false suivant la taille de l'écran

Il est aussi possible d'utiliser un écouteur d'évènement pour détecter le changement.

mediaQuery.addEventListener('change', e => {
    e.matches // true ou false suivant la taille de l'écran
})