Accueil

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Les API web côté client

Une API ("Application Programming Interface") ou "interface de programmation applicative" en français est un ensemble normalisé de classes, de méthodes, de fonctions et de constantes.

Une API Web côté client est une interface de programmation permet d'étendre les fonctionnalités d'un navigateur Web.
Par exemple possibilité d'utiliser le "drag & drop" (ou "glisser-déposer").

Si j'évoque les API web dans ce tuto relatif à JavaScript c'est qu'elles sont écrites en JavaScript.
De fait le développeur web "front-end" utilise souvent les API web côté client sans s'en rendre compte lorsqu'il s'agit des API implémentées par les navigateurs récents.

Ce chapitre est relativement court. En effet les API cités sont déjà traitées dans le "tutoriel HTML 5" de mon site.
Donc je me contente dans ce chapitre de vous communiquer des liens vers différentes pages du tuto "HTML 5".

Les API implémentées par les navigateurs

Il s'agit des API qui font partie de la norme HTML5 et qui sont donc disponibles nativement sur les navigateurs récents.

API Web Storage

HTML 5 propose une API JS appelée WebStorage qui peut se substituer aux variables de session et aux cookies PHP.
C'est aussi une technique plus puissante que les cookies quant aux capacités de stockage (quelques KO contre plusieurs MO pour Web Storage).
Mais, bien sûr, comme c'est une API écrite en JavaScript (JS) il faut que l'exécution des scripts soit autorisée par le navigateur ...

Pour en savoir davantage sur l'API web storage

API Geolocation

Pour en savoir plus sur l'API Geolocation

API Selectors

L'API Selectors et une spécification W3C qui permet d'accéder aux objets du DOM à la même manière que CSS.
Les méthodes sont argumentées avec des sélecteurs CSS.

Pour découvrir l'API Selectors

API Canvas

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 méthodes de haut niveau.
Il faut ensuite utiliser un script pour remplir la zone de dessin réalisé par la balise canvas.

La méthode getContext('2d') appliquée à un élément de type HTMLCanvasElement (une balise canvas) crée un objet de type 2D.
On peut ensuite appliquer à cet objet de type CanvasRenderingContext2D une multitude de méthodes pour dessiner rectangles,arcs de cercle et d'ellipse, polygones, etc.

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 dans mon site

API drag & drop

Un "drag and drop" consiste à déplacer un élément d'une zone source vers une zone destination.
Pendant longtemps pour rendre possible un glisser-déposer d'éléments de la page il fallait utiliser le framework JS jQuery.
La norme HTML5 propose désormais une API "glisser-déposer".

Pour en savoir plus sur l'API Drag & Drop

API tierces

Dans le paragraphe précédent j'ai évoqué des API web qui recommandées par le W3C et qui sont implémentés par les navigateurs récents.
Cependant il existe d'autres API dites tierces qui ne sont pas implémentées par les navigateurs car ne faisant pas partie de la spécification HTML5 mais qui facilitent cependant grandement le travail du développeur front-end.
Pour obtenir la dernière version de l'application, il est conseillé de charger à partir d'un CDN.
Beaucoup d'API tierces sont proposées par Google.

API Google Maps

En combinant l'outil geolocation et Google Maps (ou OMS) la position de l'internaute apparait sur une carte.

Dans le lien ci-dessous j'évoque surtout l'alternative à Google Maps : OMS (OpenStreetMap).

OpenStreetMap

API Google Translate

L'API Google traduction permet à un visiteur étranger de traduire toute la page dans sa langue maternelle. En implémantant cet outil, vous réalisez donc un site multilingue.

Pour en savoir plus sur Google Translate

API Google Charts

Google Charts est un service Web interactif qui crée des graphiques à partir d'informations fournies par l'utilisateur dans d'une page web.

Pour en savoir plus sur Google Charts