Les nouvelles APIs
Liste (non exhaustive) des nouvelles APIs
L'une des grandes nouveautés d'HTML5 est l'arrivée d'APIs standards utilisables directement en JavaScript, souvent par le biais de nouvelles balises dédiées. Cela pourra ainsi permettre de créer des applications web plus riches sans avoir à recourir à de nombreux plugins, souvent propriétaires.
Quelques nouvelles APIs proposées :
API pour le dessin 2D (balises <canvas> ou <svg>)
API pour lire des vidéos et du son (balises <video> et <audio>)
API pour le drag and drop (avec l'attribut draggable) : permet d'effectuer des “glisser-déposer” dans une page web.
API pour avoir accès à l'historique de navigation
API de cache : permet l'utilisation de certaines ressources en mode hors-ligne
API pour l'édition (avec l'attribut contenteditable = true) : permet une édition directement sur la page web par l'utilisateur d'un élément
Pour la géo-localisation : permet d'accéder aux coordonnées de l'utilisateur si celui-ci a accepté de partager sa position
Et bien d'autres... (index des APIs HTML5 en JavaScript)
Grâce à ces nouvelles APIs, la création de sites web nécessitera moins de plugins et rendra la programmation facilité, uniforme et organisée.
Exemple : Drag and Drop
On souhaite pouvoir déplacer un élément d'une liste dans un conteneur.
Il suffit de déclarer cet élément avec l'attribut “draggable” à true :
Définir une zone potentielle de destination :
Puis ensuite effectuer le traitement Javascript correspondant :
Il est également possible de transférer des informations lors d'un drag and drop à l'aide de la méthode dataTransfer.setData(format, data) rattachée à l'objet 'event'.
On peut alors récupérer l'information transmise pour le format donné avec dataTransfer.getData(format).
function drag(e) {
e.dataTransfer.setData("text", e.target.id); // Retient l'id de l'élément déplacé
}
function drop(e) {
e.preventDefault(); // Empêche le comportement par défaut - l'ouverture d'un nouvel onglet
var data = e.dataTransfer.getData("text"); // Récupère dans une variable l'id de l'élément déplacé
e.target.appendChild(document.getElementById(data)); // Rattache l'élément déplacé au conteneur cible
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id); // Retient l'id de l'élément déplacé
}
function drop(e) {
e.preventDefault(); // Empêche le comportement par défaut - l'ouverture d'un nouvel onglet
var data = e.dataTransfer.getData("text"); // Récupère dans une variable l'id de l'élément déplacé
e.target.appendChild(document.getElementById(data)); // Rattache l'élément déplacé au conteneur cible
}Complément :
Liste de tutoriels sur l'utilisation de ces APIs ici.
