Traduction
Tutoriel HTML - sommaire
Tutoriel HTML - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Les API (Interfaces de Programmation d'Applications) HTML5 sont des interfaces qui permettent aux développeurs
d'accéder à des fonctionnalités avancées directement depuis le navigateur web.
Ces API font partie de la spécification HTML5 et sont donc implémentées par les navigateurs récents.
Utiliser ces API c'est programmer en JS.
L'API Web Storage permet de stocker des paires clé/valeur sous forme de chaînes de caractères dans le navigateur,
avec localStorage pour un stockage persistant et sessionStorage pour une durée de session.
C'est donc l'équivalent des cookies et variables de session en PHP.
L'API WebStorage est aussi un outil plus puissant que les cookies quant aux capacités de stockage.
Mais, bien sûr, comme c'est une API accessible via JS ; il faut que l'exécution des scripts soit autorisée par le navigateur ...
Prévoyez donc dans le code HTML un message indiquant l'éventuel blocage de JS (message dans la balise NOSCRIPT).
L'exemple se traduit par deux pages afin que vous compreniez bien que les variables de session sont superglobales.
Dans cette page les variables de session sont éventuellement créées.
Code du formulaire : par défaut le formulaire est masqué.
Lien hypertexte vers la page 'session_page1.htm'.
On teste l'existence de la paire identifiée "nom".
Si cette paire existe alors la balise H3 (identifiée "info") affiche les valeurs des paires 'nom & prenom'.
Sinon elle affiche le message "les données de session n'existent pas encore" puis le formulaire est affiché.
sessionStorage.setItem("nom",f.nom.value) : création d'une paire 'clé:valeur' ; ici la clé est 'nom'.
sessionStorage.nom : récupération de la valeur de la clé 'nom'.
Le code HTML : par défaut le conteneur H4 identifié 'contenu' est masqué.
Le script : si la clé 'nom' existe alors affichage des valeurs des clés 'nom' & prenom'. et le contenu confidentiel est affiché.
Cliquez sur le lien 'page1' et lisez le contenu de la page 'session_page1.htm'
Revenez à la page d'accueil et remplissez le formulaire ; les données saisies s'affichent.
Recliquez sur le lien 'page1' ; la page 'session_page1.htm' a complètement changé d'aspect.
Faites un clic droit dans la fenêtre de navigation et sélectionnez dans la liste "inspecter".
Il faut ensuite choisir l'onglet "stockage" (Firefox) ou "appli" (Chrome).
Fermez le navigateur puis réouvrez le et affichez de nouveau 'session_accueil.htm'. les variables de session ont disparu.
Les variables de session nom & prenom peuvent être manipulées dans les différentes pages du site : elles sont super-globales.
La manipulation des "données locales" est pratiquement identiques aux variables de session.
Thématique : création et visualisation du 'panier' dans le cadre d'un achat en ligne.
Une fois n'est pas coutume, présentons d'abord le rendu du code !
Cliquez sur le lien 'page1' et lisez le contenu de la page 'local_page1.htm'
Revenez à la page d'accueil et remplissez le formulaire ; les données saisies s'affichent.
Recliquez sur le lien 'page1' ; la page 'local_page1.htm' fait aussi apparaitre votre panier.
Videz le panier puis revenez à la page d'accueil.
Comme pour l'exemple précédent, celui sur les données locales se traduit aussi par deux pages. Les 'données locales' sont aussi des variables superglobales.
Code du formulaire : notez que le formulaire est par défaut masqué.
Remarquez la liste déroulante pour la saisie de l'article qui constituera le 'panier'.
Le script :
Je ne communique qu'une partie du script. Vous devez être capable de le reconstituer.
Constatez la simulitude du code avec celui portant sur les variables de session ; les méthodes sont identiques.
Ce qui change c'est l'objet : localStorage à la place de sessionStorage.
Vous devez aussi compléter le script.
Faites un clic droit dans la fenêtre de navigation et sélectionnez dans la liste "inspecter".
Il faut ensuite choisir l'onglet "stockage" (Firefox) ou "appli" (Chrome).
L'API Selectors et une spécification W3C qui permet d'accéder aux objets du DOM à la même manière que CSS.
Pour référencer en JavaScript les noeuds du DOM (c'est à dire les éléments HTML de la page) il était d'usage d'utiliser les méthodes getElementsByTageName(), getElementsByClassName() et surtout getElementById() de l'objet document.
La fameuse méthode getElementById présente cependant un gros inconvénient. Elle oblige à affecter l'attribut ID à tous les éléments HTML susceptibles d'être manipulés via un script.
Grâce à ces nouvelles méthodes il devient souvent inutile d'affecter l'attribut id aux noeuds devant être manipulés par le script.
.Rappelons que la propriété textContent récupère seulement le texte (sans le balisage) alors que la propriété innerHTML récupère le texte et le balisage interne.
Avec les méthodes querySelector() & querySelectorAll() on peut être tenté de référencer dans le script un élément par son rang.
Mais faites très attention lorsque une page web inclut d'autres documents HTML (via la fonction PHP include() de PHP).
Le serveur PHP retourne un seul document HTML et le navigateur contruit un DOM unique.
Il faut utiliser l'API geolocation !
Votre positionnement (latitude et longitude) doit en principe s'afficher dans la boîte ci-dessous à condition
bien sûr que votre navigateur autorise la géolocalisation et que la connexion soit sécurisée.
Pour des raisons de confidentialité CHROME et FIREFOX restreignent l'usage de l'API Géolocalisation aux sites accessibles
de manière sécurisée c'est à dire les sites cryptés avec le protocole HTTPS.
Donc pour que ça 'marche' il faut deux choses : site sécurisé et autorisation de la géolocalisation par le navigateur
Ci-dessus votre position GPS doit en principe s'afficher.
L'objet navigator de JavaScript possède désormais le sous objet geolocation.
Ce sous objet dispose entre autres de la méthode getCurrentPosition.
Cette méthode nécessite un paramètre obligatoire qui est en fait l'appel d'une fonction lorsque la localisation a réussi.
Ainsi dans l'exemple il y a appel de la fonction flocalisation.
La fonction de localisation a besoin d'un paramètre de type position. Ce paramètre possède entre autres la propriété coords.
La propriété coords comprend deux sous propriétés : latitude et longitude.
Récupérer sa position GPS, c'est bien mais se localiser sur une carte, c'est encore mieux.
Il faut alors coupler l'API geolocation avec l'application Google Maps ou avec OpenStreetMap.
Il s'agit de services gratuits en ligne qui sont évoqués dans le chapitre suivant :
Services en ligne gratuits
Avec cet outil il est possible de dessiner dans une page web.
Concrètement l'outil Canvas c'est une nouvelle balise (CANVAS) et une bibliothèque de fonctions haut niveau.
Il faut ensuite utiliser un script pour remplir la zone de dessin Canvas.
Dans ce chapitre je n'en dis pas plus sur cette API car compte tenu de son importance, elle fait l'objet d'un tuto complet dans mon site : Tutoriel Canvas
Un "drag and drop" consiste à déplacer un élément d'une zone source vers une zone destination avec la souris.
Il peut être intéressant d'introduire cet fonctionnalité dans une page web.
HTML 5 propose désormais une API "glisser-déposer".
Pendant longtemps la seule solution pour programmer un "drag and drop" dans une page web était d'utiliser le célèbre
framework jQuery et plus précisément son extension jQuery-UI.
Drag & drop en jQuery
Désormais avec l'API web "glisser-déposer" il est possible de programmer un 'drag and drop' sans recourir à jQuery-UI.
Le code du script est un peu plus compliqué mais il s'agit d'un code standard ...
Ci-dessous un document HTML avec des images transférables :
Vous pouvez déplacer les images de la boite du haut vers la boite du bas mais pas l'inverse.
Vous n'avez donc plus à charger les librairies jQuery & jQuery-UI.
Extrait du code :
Pour être transférables par la souris d'un conteneur vers un autre, les éléments doivent avoir l'attribut draggable ='true' et avoir un ID. En effet l'élément déplacé est référencé par son ID.
Pour un drag & drop unilatéral (de la zone "source" vers la zone "destination") il faut associer l'événement "ondragStart" à la zone source et les deux autres événements à la zone destination.
À chaque événement est associé une fonction.
Les trois fonctions du script :
function debut(e) // associé à dragstart
{
e.dataTransfer.effectAllowed ="move";
e.dataTransfer.setData('text',e.target.getAttribute('id'));
}
function glisser(e) {e.preventDefault(); } // associé à dragover
function deposer(e) //associé à drop
{
objet = e.dataTransfer.getData('text');
e.currentTarget.appendChild(document.getElementById(objet));
e.stopPropagation;
}
Pour transférer les données d'une zone source vers une zone destination il faut utiliser l'objet dataTransfer.
Cet objet comprend deux méthodes setData() & getData().
La methode setData() permet de mémoriser les données à déposer. Elle comprend deux paramètres : le premier est "text" et
le deuxième précise le type de donnée à déposer.
La méthode getData() permet de récupérer les données mémorisées par la méthode précédente et ne comprend
qu'un argument : "text".
La fonction debut(e) récupère l'ID de l'élément sélectionnée via l'instruction
e.dataTransfer.setData('text',e.target.getAttribute('id')).
La fonction glisser(e) : par défaut le navigateur interdit de déposer un élément à l'intérieur d'un autre conteneur.
Pour autoriser un dépôt, nous devons empêcher la gestion par défaut du navigateur avec l'instruction e.preventDefault()
La fonction deposer(e) ajoute l'élément transféré au conteneur "destination" via l'instruction
e.currentTarget.appendChild(document.getElementById(objet)).
Dans l'exemple précédent, on peut transférer une image du conteneur "source" vers le conteneur "destination" mais par l'inverse. C'est facheux car on ne peut annuler un mauvais choix ...
Pour un drag & drop bilatéral il suffit d'associer les trois événements aux deux conteneurs.
Ci-dessous un document HTML dans lequel les images sont transférables dans les deux sens.
Il suffit d'associer les trois évènements aux conteneurs source et destination ; il suffit donc de modifier le code de la partie BODY.
Les deux boites (source et destination) ont désormais le même code avec gestion des trois événements.
Il est strictement identique à la version précédente.
Les événements sont insensibles à la "casse". Vous pouvez écrire "onDragStart" ou "ondragstart" , "onDragOver" ou "ondragover", "onDrop" ou "ondrop".
Vous trouvez que le script est un peu complexe. Mais je ferai remarquer qu'il s'agit d'un code standard qui peut être appliqué à n'importe quel document HTML afin de rendre déplaçables les images contenues dans un DIV.
On peut donc envisager d'améliorer ce script et d'en faire un micro framework.
Créez un fichier d'extension .js et nommez le "drag_drop.js".
// micro framework pour rendre 'drag & drop' des images
var images = document.querySelectorAll('div img') ;
var source = document.getElementById('source');
var destination = document.getElementById('destination');
// affectation de deux attributs à chaque image
for (var i =0 ; i < images.length ; i++)
{
images[i].setAttribute("id", "img" + i);
images[i].setAttribute("draggable",true);
}
// ajout d'événements aux deux boites DIV
source.addEventListener('dragstart', debut);
source.addEventListener('dragover', glisser);
source.addEventListener('drop', deposer);
destination.addEventListener('dragstart', debut);
destination.addEventListener('dragover', glisser);
destination.addEventListener('drop', deposer);
function debut(e) // associé à dragstart
{
e.dataTransfer.effectAllowed ="move";
e.dataTransfer.setData('text',e.target.getAttribute('id'));
}
function glisser(e) {e.preventDefault(); } // associé à dragover
function deposer(e) //associé à drop
{
objet = e.dataTransfer.getData('text');
e.currentTarget.appendChild(document.getElementById(objet));
e.stopPropagation;
}
Pour que le script externe fonctionne, le développeur web doit prendre quelques précautions dans la rédaction du code HTML de la page web.
Le document HTML doit contenir dans sa partie BODY deux éléments DIV affectés de la classe "boite" et identifiées
respectivement "source" et "destination".
Les éléments IMG doivent être à l'intérieur de la boite identifiée "source" ; le seul attribut doit être le chemin.
Il peut y avoir aussi des éléments IMG enfants dans la boite "destination".
Prévoyez une instruction pour charger le micro framework en fin de document mais surtout pas dans la partie HEAD.
Donc la page web doit correspondre au modèle suivant :
Notez l'instruction qui charge le framework (stocké dans le même dossier que la page web).
Si le script était exécuté avant que le DOM initial soit construit il y aura "plantage" du script.
Une page web qui utilise le micro-framework
Récupération du code du micro-framework