Fonctions usuelles dans le navigateur

Voir la vidéo

JavaScript côté navigateur

Description Sommaire

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
})
Publié
Technologies utilisées
Auteur :
Grafikart
Partager