Applications Javascript

Jean-Marc Lecarpentier
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

Stockage de données dans le navigateur

  • Besoin de garder en mémoire des infos d'une page à une autre
  • Infos conservées uniquement localement dans le navigateur
  • ⇒ aucune sécurité ou garantie d'enregistrement
  • ⇒ utile pour faciliter le développement d'applications Javascript

Principe de fonctionnement

  • Enregistre des données sous la forme de paires (clé, valeur)
  • Ne peut enregistrer que des scalaires (nombres, booléens, chaines de caractères)
  • Peut stocker 5Mo de données maximum
  • Propriété Storage.length pour savoir le nombre de clés existantes
  • Méthodes :
    • Storage.setItem(key, value) pour enregistrer clé key ave la valeur value
    • Storage.getItem(key) pour obtenir la valeur correspondant à la clé key
      (renvoie null si la clé n'existe pas)
    • Storage.removeItem(key) pour supprimerl'enregistrement correspondant à la clé key
    • Storage.clear() pour tout supprimer
    • Storage.key(n) pour avoir le nom de la nième clé

Deux types de stockage

  • sessionStorage conserve en mémoire les données tant que le navigateur n'est pas fermé
  • localStorage conserve en mémoire les données même si on ferme le navigateur
  • Démo de localStorage sur MDN : changer les valeurs, fermer son navigateur puis retourner sur la page

Stocker des données complexes

  • Problématique : on ne peut enregistrer que des scalaires (nombres, booléens, chaines de caractères)
  • On voudrait pouvoie stocker des objets ou tableaux
  • Solution : sérialisation
  • Sérialisation de données : transformer une structure de données complexe en une structure simple comme une chaine de caractères (le plus souvent)
  • Opération inverse : désérialisation
  • Format texte adapté à Javascript : JSON (Javascript Object Notation)
  • json.org
  • Exemple : ["tableau", "de", 4, "éléments"] ou { "nom": "John", "prenom": "Doe" }

Objet JSON

Exploiter les possibilités du Web

  • Utilisation de services Web
  • Basés sur des APIs échangeant des données au format JSON
  • Exploitables directement par JavaScript
  • Exemples : APIs Facebook, Twitter, Flickr, Garmin, Strava, etc

Conclusion