Les API Javascript
Les API Javascript
Nous allons rapidement faire le tour des différentes API apportées par le HTML5. Certaines seront vues plus en détail par la suite, comme les API Drag & Drop et File, ainsi que Audio et Video.
Avec le Javascript, il a toujours été possible d'avancer et de reculer dans l'historique de navigation, c'est-à-dire simuler l'effet des boutons Précédent et Suivant du navigateur. L'API History permet désormais de faire plus, notamment en stockant des données lors de la navigation. Cela est utile pour les applications basées sur l'AJAX, où il est rarement possible de revenir en arrière.
Le HTML5 apporte les méthodes querySelector() et querySelectorAll(), qui permettent d'atteindre des éléments sur base de sélecteurs CSS, dont les nouveaux sélecteurs CSS3 !
Le HTML5 standardise enfin les fonctions temporelles, comme setInterval(), clearInterval(), setTimeout() et clearTimeout().
ContentEditable est une technique, inventée par Microsoft pour Internet Explorer, qui permet de rendre éditable un élément HTML. Cela permet à l'utilisateur d'entrer du texte dans un <div>, ou bien de créer une interface WYSIWYG (What You See Is What You Get, c'est-à-dire « ce que vous voyez est ce que vous obtenez »), comme Word.
Le Web Storage est, d'une certaine manière, le successeur des fameux cookies. Cette API permet de conserver des informations dans la mémoire du navigateur, pendant le temps que vous naviguez, ou pour une durée beaucoup plus longue. Les cookies fournissent plus ou moins 4 KB de stockage, alors que le Web Storage en propose 5 MB pour la plupart des navigateurs et 10 MB pour Internet Explorer. Cependant, le Web Storage n'est pas accessible par les serveurs Web, les cookies sont donc toujours de rigueur.
Pour enregistrer une valeur, c'est tout simple, il suffit de faire :
localStorage.setItem('nom-de-ma-cle', 'valeur de la clé'); |
Il faut donc donner un nom à la clé pour pouvoir récupérer la valeur plus tard :
alert(localStorage.getItem('nom-de-ma-cle')); |
Si les données ne doivent être gardées en mémoire que pendant le temps de la navigation (elles seront perdues si l'utilisateur ferme son navigateur), il convient d'utiliser sessionStorage au lieu de localStorage.
C'est en quelque sorte une évolution du Web Storage. Le Web Storage ne permet que de stocker des valeurs sous forme de clé, alors que le Web SQL Database fournit une base de données complète ! C'est aussi plus complexe à utiliser, d'autant plus que Firefox ne l'implémente pas et utilise un autre type de base de données : IndexedDB.
Le WebSocket permet à une page Web de communiquer avec le serveur Web de façon bidirectionnelle : ça veut dire que le serveur peut envoyer des informations à la page, tout comme cette dernière peut envoyer des informations au serveur. C'est en quelque sorte une API approfondie du XMLHttpRequest. C'est plus complexe, car cela nécessite un serveur adapté.
L'API de géolocalisation permet, comme son nom le laisse entendre, de détecter la position géographique du visiteur. Mais attention, cela ne fonctionne que si l'utilisateur donne son accord, en réglant les paramètres de navigation de son navigateur. Ça fonctionne pour tous les navigateurs modernes, excepté Internet Explorer.
L'API Workers permettent d'exécuter du code en tâche de fond. Ce code est alors exécuté en parallèle de celui de la page. Si le code de la page rencontre une erreur, ça n'affecte pas le code du Worker et inversement.
Le Worker est capable d'envoyer des messages au script principal via l'API Messaging. Le script principal peut aussi envoyer des messages au Worker. L'API Messaging peut aussi être utilisée pour envoyer et recevoir des messages entre une <iframe> et sa page mère, même si elles ne sont pas hébergées sur le même domaine.
L'API Messaging est notamment utilisée pour les extensions de certains navigateurs tels qu'Opera ou Google Chrome. Ainsi, pour ce dernier, les scripts peuvent communiquer avec une page spéciale appelée « page d'arrière-plan », qui permet d'enregistrer des préférences ou d'exécuter des actions spéciales, comme ouvrir un nouvel onglet.
Cette API sert à rendre disponible une page Web même si la connexion n'est pas active. Il suffit de spécifier une liste de fichiers que le navigateur doit garder en mémoire.
Quand la page est hors ligne, il convient d'utiliser une API comme Web Storage pour garder en mémoire des données, comme des e-mails à envoyer une fois la connexion rétablie, dans le cas d'un webmail.
Dans les chapitres suivants, nous allons porter notre attention sur quatre API :
Créé avec HelpNDoc Personal Edition: Générateur gratuit de livres électroniques et documentation