Notes de cours sur le stockage Web PDF

venu avec De nouveaux éléments, attributs et comportements Mohammed Reda CHBIHI Un ensemble plus large de technologies qui permettent des...

venu avec De nouveaux éléments, attributs et comportements Mohammed Reda CHBIHI Un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web [email protected] 2 Année Universitaire : 2024-2025 Sémantique Multimédia Support natif des formats Vidéo & Audio avec plusieurs Description précise du contenu d’une page HTML fonctionnalités Connectivité Rendu 2D/3D et effets Communication avec le serveur d'une façon nouvelle Options de présentation des données bien plus variés et innovante Hors-connexion & stockage Performance & intégration Stockage des données sur la partie client et Puissance plus grande et une meilleur utilisation des fonctionnement plus efficace hors-connexion 3 outils de l’appareil utilisé pour afficher les pages HTML 4  Accès aux périphériques Usage varié des périphériques d'entrées et de sorties Web Storage Style Possibilité de réaliser des thèmes plus sophistiqués avec le CSS3 5 6 Web Storage Web Storage Une simple base de données coté client qui permet aux Inconvénients des (cookies) utilisateurs de stocker des données au format clé-valeur 1. Limite de taille des cookies (quelques Kilo-Octets) et les alors ? 2. Trafic HTTP supplémentaire pour chaque requête 7 8  Web Storage Web Storage Local Storage Local Storage Session Storage Session Storage Les deux objets permettent de stocker des données sur le navigateur Local Storage permet de garder les données en mémoire Propriétés de l’objet window 9 même après la fermeture du navigateur 10 Web Storage Web Storage 1. Stockage rapide des données sur le navigateur sans faire 1. Données sur le navigateur non cryptées : accessibles et intervenir le serveur lisibles 2. Gain en performance et facilité des développements 2. Données gérées par nom de domaine uniquement 3. Aucun trafic HTTP engendré (contrairement aux cookies) (possibilité de fuite de données ou d’usurpation 4. Espace alloué plus important (comparé aux cookies) d’identité : spoofing  par d’autre applications utilisant 5. Données accessibles mais en mode hors-ligne ou après le même nom de domaine) une reconnexion (suite à la perte de connexion) 11 12  Web Storage // stockage d'un couple Membre Description localStorage.setItem("date", "01/01/2017"); setItem(clé,valeur) stocke un couple clé/valeur // Récuperation de la valeur Exemple getItem(clé) retourne la valeur associée à une clé alert("VALEUR : " + localStorage.getItem("date")); supprime le couple clé/valeur dont // Récuperation de la clé avec son indice Méthodes removeItem(clé) le nom de la clé est passé en alert("Clé : " + localStorage.key(0)); paramètre // récuperation du nombre de couple stockés retourne la clé stockée à l'index alert("Taille : " + localStorage.length); key(index) spécifié supprime tous les couples associés // Suppression d'un couple clear() localStorage.removeItem("date"); au nom de domaine courant renvoie le nombre des couples // Suppression de toutes les données Propriétés length 14 stockés 13 localStorage.clear(); // stockage d'un couple sessionStorage.setItem("date", "01/01/2017"); Web Storage Web Storage // Récuperation de la valeur Exemple Evènement alert("VALEUR : "+sessionStorage.getItem("date")); Lors de l’affectation ou de la suppression d’une donnée depuis le Web // Récuperation de la clé avec son indice alert("Clé : " + sessionStorage.key(0)); Storage, l’événement (on)storage est déclenché sur l’objet window Objet associé Description // récuperation du nombre de couple stockés alert("Taille : " + sessionStorage.length); key La clé de la donnée modifié newValue Nouvelle valeur affectée // Suppression d'un couple oldValue Ancienne valeur sessionStorage.removeItem("date"); url L’URL complète depuis laquelle l’action a été déclenchée // Suppression de toutes les données storageArea Objet ayant provoqué le changement de la valeur 15 16 sessionStorage.clear(); (localStorage ou sessionStorage)  Web Storage Exemple Evènement Drag & Drop window.addEventListener("storage",stockageMAJ,true); function stockageMAJ(event){ alert("Changement de " + event.key + "\nNouvelle valeur : " + event.newValue); } 17 18 Drag & drop Drag & drop Un des principaux éléments d'une interface fonctionnelle Avant le HTML5, le mécanisme était implémenté via des frameworks Javascript Une manière de gérer une interface en permettant le déplacement de certains éléments vers d'autres conteneurs Grâce au HTML5, il est maintenant possible de permettre un déplacement de texte, de fichier ou d'autres éléments depuis n'importe quelle application jusqu‘au navigateur 19 20 Étapes de mise en place du mécanisme Drag & drop Étapes de mise en place du mécanisme Drag & drop Définir un élément comme Dragable 1 1. Définir un élément comme Dragable 2. Définir les données et options liées à l’opération du Drag Définition de l’élément qui contient les données à transférer 3. Définir une Drop Zone 4. Gérer l’opération du Drop 5. Gérer la fin de l’opération du Drag & Drop Utilisation de l’attribut global HTML dragable 21 … 22 Propriétés Propriété Description dropEffect Type d’opération sélectionnée : Étapes de mise en place du mécanisme Drag & drop none : aucune copy : copie link : lien move : déplacement effectAllowed Type d’opération allouée : Données et Options liés à l’opération du Drag 2 none : aucune copyLink : copie et lien copy : copie linkMove : lien et link : lien déplacement Définition des données à transférer depuis l’élément dragable move : déplacement uninitialized : type copyMove : copie et non choisi déplacement all : toutes les opérations Tous les événements liés à l’opération du Drag possèdent un objet types Liste des types de formats spécifiés dans l’événement dataTransfer qui encapsule toutes les données à transporter dragstart vers la Drop Zone 23 files Liste des fichiers qui ont été glissés (draged) 24  Méthodes Méthode Description setData(format, data) Ajoute des données suivant un format Exemple 1 Récupère les données suivant un getData(format) format function startd(e){ Supprime les données liées au Drag e.dataTransfer.effectAllowed = "copy"; suivant un format e.dataTransfer.setData("text/plain", e.target.id); clearData( [ format ] ) e.dataTransfer.setDragImage(e.target,100,100); Si aucun format n’est spécifié, alors tout } est supprimé Image à afficher lors de l’opération du Drag. Il est possible de passer une permettant de positionner l’image par rapport au curseur 25 26 Exemple 2 Drag & drop function startd(e){ Étapes de mise en place du mécanisme e.dataTransfer.effectAllowed = "copy"; e.dataTransfer.setData("text/plain", e.target.id); Définir une Drop Zone 3 var img = new Image(); img.src = 'monImage.jpg'; Par défaut, les navigateurs bloquent toute action lors du e.dataTransfer.setDragImage(img,0, 0); } relâchement (Drop) d’un contenu sur un élément HTML 1. Définition de gestionnaires pour les événements dragover et drop pour la Drop Zone qui pourra déclencher d’autres événements gérés 27 28  Exemple function over(e){ e.preventDefault(); Étapes de mise en place du mécanisme Drag & drop e.dataTransfer.dropEffect = "copy"; e.target.style.border = "2px dashed red"; } 4 function drop(e){ Gérer l’opération du Drop e.target.style.backgroundColor = "yellow"; var text = e.dataTransfer.getData("text/plain"); e.target.textContent = text; Le drop représente l’action de relâchement de l’objet sur la Drop Zone e.preventDefault(); } L’action n’est exécutée qu’après l’annulation des événements dragenter ou dragover, sinon, le drop sera annulé L’objectif de cette opération est de récupérer les données glissées Si un effet de Drag a été associé, il faudrait signaler quel effet sera 30 Exemple Étapes de mise en place du mécanisme Drag & drop function end(e){ if (e.dataTransfer.dropEffect == "none") 5 console.log("Annulé"); Gérer la fin de l’opération du Drag & Drop else console.log("Succès : " + e.dataTransfer.dropEffect); Une dernière étape est prévue pour programmer le comportement } de l’élément glissé après le Drop L’événement dragend est déclenché quand l’opération du Drag est 31 32 dropEffect ≠ "none" dropEffect = "none"  Géolocalisation Grace au JavaScript, il est possible de géolocaliser un appareil mobile Géolocalisation de manière très simple À travers l'objet navigator de window, il est possible d'accéder aux informations de géolocalisation L'objet goelocation de navigator encapsule toutes les informations 33 permettant de géolocaliser un appareil 34 Propriétés de l’objet encapsulant les informations sur la position courante Propriété Description Géolocalisation coords.latitude coords.longitude La Latitude La longitude coords.accuracy Précision de la position retournée Méthode Description coords.altitude Altitude en mètres par rapport au niveau de Récupère la position courante la mer Prend en paramètre deux fonctions de callBack : coords.altitudeAccuracy Précision de l'altitude La première prend comme argument un objet getCurrentPosition() coords.heading encapsulant des informations sur la position courante, Direction vers laquelle l'appareil se dirige : La seconde prend comme argument un objet Nombre de degrés depuis le nord dans le encapsulant l'erreur (en cas de problème) sens des aiguilles d'une montre Retourne en continue la position courante de l'appareil watchPosition() coords.speed Vitesse en mètres / secondes pendre son déplacement timestamp Date / Heure du moment de récupération clearWatch() Arrête le travail de la méthode watchPosition() 35 des coordonnées 36  Géolocalisation Exemple Géolocalisation En cas d’erreur de récupération de la position courante, il est possible if (navigator.geolocation) { de connaitre l’erreur levée depuis la fonction callBack sur la méthode navigator.geolocation.getCurrentPosition( getCurrentPosition() (pos) => { var result = "Latitude: " + pos.coords.latitude; result += "Longitude: " + pos.coords.longitude; Code d’erreur Description document.getElementById("demo").innerHTML = result; error.PERMISSION_DENIED Accès refusé }, (error) => { error.POSITION_UNAVAILABLE Position non disponible console.log(`Erreur : ${error.code} - ${error.message}`) error.TIMEOUT }, Temps prévu pour la récupération ); de la position courante est écoulé } else error.UNKNOWN_ERROR Erreur inconnue 37 console.log("Geolocation non supportée par le navigateur"); Géolocalisation Web Workers https://developers.google.com/maps/documentation/javascript/tutorial?hl=fr Service d’affichage d’une carte à partir de coordonnées 39 40  Web Workers Étapes de Mise en place d’un Worker Web Workers Durant l’exécution de scripts sur une page HTML, aucun interaction ne sera possible avec celle-ci tant que le script n’a pas fini 1. Création du script à exécuter en arrière-plan son exécution 2. Test du support des Web Workers par le navigateur client 3. Lancement du Worker 4. Récupération de la progression du Worker 5. Arrêt du Worker Un Web Worker est un Script JavaScript qui s’exécute en arrière-plan 6. Réinitialisation du Worker d’une page sans affecter ses performances ou empêcher toute autre action de l’utilisateur 41 42 Création du script à exécuter en arrière-plan Web Workers Création du script à exécuter en arrière-plan Web Workers Exemple var i = 0; Script externe à exécuter en arrière-plan et qui devra contenir des appels à la fonction postMessage() qui renvoie l'état function work(){ i++; d'avancement du Worker postMessage(i); // Message sur la progression // Traitement à faire après un intervalle donné setTimeout("work()", 1000); } 43 44 work();  Test de support par le navigateur Web Workers Test de support par le navigateur Web Workers Exemple if (typeof(Worker) !== "undefined"){ Afin d'éviter toutes surprises lors d'utilisation des Workers, un test } else { 45 46 } Lancement du Worker Web Workers Lancement du Worker Web Workers Dans certaines situations, le Worker a besoin de données En cas de support des Workers par le navigateur client, afin d’initialiser le travail qui va être effectué il est possible de lancer le travail du Worker Utilisation de la méthode postMessage pour envoyer Exemple les paramètres d’initialisation var worker = new Worker("chemin/vers/script_du_worker.js"); 47  Lancement du Worker Web Workers Lancement du Worker Web Workers Exemple Le script associé au Worker réceptionnera les paramètres envoyés en gérant l’événement onmessage // script faisant appel au Worker var worker = new Worker("chemin/vers/script_du_worker.js"); Les paramètres envoyés sont encapsulés dans la propriété worker.postMessage(données_init); data de l'objet event associé à l'événement Lancement du Worker Web Workers Récupération de la progression du Worker Web Workers Exemple Lors du travail du Worker, ce dernier envoie des messages signalant sa progression // script du Worker Afin de récupérer ces messages, il faudrait gérer l'événement self.onmessage = (event) => { onmessage sur le Worker créé var init = event.data; // suite des traitements Le message envoyé est encapsulé dans }; la propriété data de l'objet event associé à l'événement 52  Récupération de la progression du Worker Web Workers Arrêt du Worker Web Workers Exemple il est possible d'arrêter prématurément le travail d'un Worker // Gestion de l'événement onmessage sur le Worker worker.onmessage = function(event){ Exemple console.log(event.data); worker.terminate(); }; 53 54 Réutilisation d'un Worker Web Workers Exemple Web Workers Pour réutiliser un Worker ayant terminer ses taches, il faudrait le if (typeof(Worker) !== "undefined"){ réinitialiser ! var worker = new Worker("worker.js"); worker.onmessage = function(event){ Exemple console.log(event.data); }; worker = undefined; } 55 56