Applications Javascript

Jean-Marc Lecarpentier
GREYC — Université de Caen

Programmation côté client

  • Application fonctionnant sur le client
  • Programmes chargés par la « page web »
  • Notion de logiciel plus que de document
  • HTML5 + CSS + JS

HTML5 : nombreuses APIs associées

Attributs data-*

  • Un élément HTML peut avoir besoin de conserver « en interne » des informations
  • Pour que JS puisse facilement avoir ces informations
  • Solution : attributs data-*
  • Tout attribut commençant par data- est ignoré par le navigateur
  • Attributs data-* sont destinés à être utilisés uniquement par les scripts de la page
  • Ne pas y mettre de données sensibles : même si ces données sont ignorées par le navigateur, elles sont visibles avec un simple « Voir le code source de la page » du navigateur !
  • Exemple :
        <ol>
            <li data-length="2m11s">Beyond The Sea</li> 
            ... 
        </ol>    
    

Propriété dataset

  • Tout noeud de l'arbre DOM de type Element possède une propriété dataset
  • dataset est un objet représentant tous les attributs data-* de lélément
  • Noms des propriétés transformées en camelCase (comme pour elt.style.fontSize)
  • Exemple :
        <ol>
            <li id="sea" data-length="2m11s" data-original-singer="Frank Sinatra">Beyond The Sea</li> 
            ... 
        </ol>    
    
  • Javascript :
        document.getElementById('sea').dataset.length;
        document.getElementById('sea').dataset.originalSinger;
    
  • Démo
  • Exemple d'application

Applications Javascript

  • Penser à l'utilisation des attributs data-*
  • Pour avoir des informations complémentaires à l'intérieur d'un élément HTML lui-même
  • Pour faciliter les accès aux données par le JS
  • Pour découpler la logique de l'application et le contenu HTML