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
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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".
Il s'agit des API qui font partie de la norme HTML5 et qui sont donc disponibles nativement sur les navigateurs récents.
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
Pour en savoir plus sur l'API Geolocation
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
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.
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
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.
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).
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
Google Charts est un service Web interactif qui crée des graphiques à partir d'informations fournies par l'utilisateur dans d'une page web.