diff options
Diffstat (limited to 'files/fr/learn')
| -rw-r--r-- | files/fr/learn/javascript/client-side_web_apis/introduction/index.html | 354 |
1 files changed, 175 insertions, 179 deletions
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html index 1d763d914b..9ac5bc56a8 100644 --- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html @@ -1,17 +1,17 @@ --- -title: Introduction aux API du Web +title: Introduction aux API Web slug: Learn/JavaScript/Client-side_web_APIs/Introduction tags: + - 3rd party - API - - API Web - - Apprentissage - Article - - Codage - - Débutant - - Navigateur - - Objet - - Tierce partie - - côté‑client + - Beginner + - Browser + - CodingScripting + - Learn + - Object + - WebAPI + - client-side translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction --- @@ -19,218 +19,211 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction <div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">Tout d'abord, nous survolerons le concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées ? Nous verrons également quelles sont les principales APIs et leur utilisation.</p> +<p class="summary">Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.</p> <table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Des connaissances de base en informatique, une compréhension de base du <a href="/en-US/docs/Learn/HTML">HTML</a> et <a href="/en-US/docs/Learn/CSS">CSS</a>, des notions de JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">briques JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">objets JavaScript</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Vous familiariser avec les APIs, ce qu'elles permettent de faire, et comment les utiliser dans votre code.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Des connaissances de base en informatique, une compréhension de base du <a href="/fr/docs/Learn/HTML">HTML</a> et <a href="/fr/docs/Learn/CSS">CSS</a>, des notions de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks">briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>).</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Vous familiariser avec les API, ce qu'elles permettent de faire, et comment les utiliser dans votre code.</td> + </tr> + </tbody> </table> -<h2 id="C'est_quoi_une_API">C'est quoi une API ?</h2> +<h2 id="what_are_apis">Qu'est-ce qu'une API ?</h2> -<p>Les APIs (Application Programming Interfaces) sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.</p> +<p>Les API (<i>Application Programming Interfaces</i> soit « interface de programmation d'application ») sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.</p> <p>En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p> +<p><img alt="" src="plug-socket.png" style="display: block; margin: 0px auto;"></p> -<p><em>Image source: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> by <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, on Flickr.</em></p> +<p><em>Source de l'image : <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> par <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, sur Flickr.</em></p> <p>De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.</p> -<div class="note"> -<p><strong>Note </strong>: Voir aussi l'<a href="/en-US/docs/Glossary/API">entrée API du glossaire</a> pour plus de descriptions.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Voir aussi l'<a href="/fr/docs/Glossary/API">entrée du glossaire du terme API</a> pour plus de descriptions.</p> </div> -<h3 id="APIs_JavaScript_côté_client">APIs JavaScript côté client</h3> +<h3 id="apis_in_client-side_javascript">API JavaScript côté client</h3> -<p>Le JavaScript côté client en particulier a de nombreuses APIs à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories:</p> +<p>Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories :</p> <ul> - <li><strong>API du navigateur : </strong>Elles sont intégrées au navigateur Web ; elles peuvent afficher des données provenant du navigateur et de son environnement informatique et faire des choses complexes utiles avec les dites données.<br> - Par exemple: l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation">API de géolocalisation</a> fournit des constructions JavaScript simples pour extraire des données d'emplacement et afficher votre position sur une carte Google Map. En arrière-plan, le navigateur utilise un code de niveau plus bas (par exemple C ++) pour communiquer avec le matériel GPS du périphérique (ou ce qui est disponible pour déterminer les données de position), récupérer les données de position et les renvoyer à l'environnement du navigateur pour l'utiliser dans votre code. Mais encore une fois, cette complexité est abstraite par l'API.</li> - <li><strong>API tierces :</strong> Elles ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web.<br> - Par exemple: l'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoit alors les informations demandées.</li> + <li><strong>Les API du navigateur</strong> sont intégrées au navigateur web et permettent de rendre disponibles les données du navigateur et de son environnement afin de réaliser des choses complexes avec. Ainsi, <a href="/fr/docs/Web/API/Web_Audio_API">l'API Web Audio</a> fournit des constructions JavaScript pour manipuler des données audio dans le navigateur. On pourra utiliser cette API afin de récupérer une piste audio puis d'abaisser son volume, d'y appliquer des effets, etc. Sous le capot, c'est le navigateur qui s'occupe des couches plus complexes en code « bas niveau » (C++ ou Rust par exemple) afin de réaliser le traitement du signal. Là encore, cette complexité est masquée par l'abstraction offerte par l'API.</li> + <li><strong>Les API tierces</strong> ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web.<br> + Par exemple: l'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoie alors les informations demandées.</li> </ul> -<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 421px; margin: 0px auto; width: 672px;"></p> +<p><img alt="" src="browser.png" style="display: block; margin: 0px auto;"></p> -<h3 id="Relations_entre_JavaScript_APIs_et_autres_outils_JavaScript">Relations entre JavaScript, APIs et autres outils JavaScript</h3> +<h3 id="relationship_between_javascript_apis_and_other_javascript_tools">Relations entre JavaScript, les API et autres outils JavaScript</h3> -<p>Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et quelle est sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur d'autres outils JavaScript qui existent:</p> +<p>Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur d'autres outils JavaScript qui existent:</p> <ul> - <li>JavaScript — Un langage de programmation de haut niveau intégré aux navigateurs, qui permet de mettre en œuvre des fonctionnalités sur les pages et applications Web. Notez que JavaScript est également disponible dans d'autres environnements de programmation, tels que <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>. Mais ne vous en préoccupez pas pour l'instant.</li> - <li>API du navigateur — Constructions intégrées dans le navigateur, situées au‑dessus du langage JavaScript, permettant une mise en œuvre plus facile de fonctionnalités.</li> - <li>API tierce — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web).</li> - <li>Bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">fonctions personnalisées</a> que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React.</li> - <li>Les frameworks JavaScript — Au‑dessus des bibliothèques, les frameworks JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière.<br> - La différence essentielle entre une bibliothèque et un framework est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un framework, le contrôle est inversé : c'est le framework qui appelle le code du développeur.</li> + <li>JavaScript — Un langage de programmation de haut niveau intégré aux navigateurs, qui permet de mettre en œuvre des fonctionnalités sur les pages et applications Web. Notez que JavaScript est également disponible dans d'autres environnements de programmation, tels que <a href="/fr/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>. Mais ne vous en préoccupez pas pour l'instant.</li> + <li>Les API du navigateur — Constructions intégrées dans le navigateur, situées au‑dessus du langage JavaScript, permettant une mise en œuvre plus facile de fonctionnalités.</li> + <li>Les API tierces — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web).</li> + <li>Les bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions#custom_functions">fonctions personnalisées</a> que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React.</li> + <li>Les <i>frameworks</i> JavaScript — Au‑dessus des bibliothèques, les <i>frameworks</i> JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière.<br> + La différence essentielle entre une bibliothèque et un <i>framework</i> est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un <i>framework</i>, le contrôle est inversé : c'est le <i>framework</i> qui appelle le code du développeur.</li> </ul> -<h2 id="Que_peuvent_faire_les_API">Que peuvent faire les API ?</h2> +<h2 id="what_can_apis_do">Que peuvent faire les API ?</h2> -<p>Il y a un beaucoup d'APIs disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la <a href="/fr/docs/Web/API">page de l'index des API MDN</a>. </p> +<p>Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la <a href="/fr/docs/Web/API">page de l'index des API MDN</a>.</p> -<h3 id="API_de_navigateur_courantes">API de navigateur courantes</h3> +<h3 id="common_browser_apis">API de navigateur courantes</h3> <p>En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :</p> <ul> - <li><strong>Les APIs pour manipuler des documents</strong> chargés dans le navigateur. L'exemple le plus évident est l'<a href="/fr/docs/Web/API/Document_Object_Model">API DOM (Document Object Model)</a>. Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a>.</li> - <li><strong>Les APIs pour récupérer des données du serveur</strong>, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest </a>et l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme <strong>Ajax</strong> pour qualifier cette technique. Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur.</a></li> - <li><strong>Les APIs pour dessiner et manipuler des graphiques</strong> sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont <a href="/fr/docs/Web/HTML/Canvas">Canvas </a>et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>. Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML {{htmlelement ("canvas")}} pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canvas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles APIs sont souvent combinées avec d'autres APIs, par exemple {{domxref("window.requestAnimationFrame()")}}, pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>.</li> - <li><strong>Les APIs audio et vidéo</strong> comme {{domxref("HTMLMediaElement")}}, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a> ou <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a>, permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distortion, la balance, etc.). Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs audio et vidéo</a>.</li> - <li><strong>Les APIs de périphérique</strong> permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a>) ou des vibrations (voir l'<a href="/fr/Web/API/Vibration_API">API Vibration</a>).</li> - <li><strong>Les APIs de stockage côté client</strong> deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>, et le stockage plus complexe de données tabulaires avec l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a>. Pour en savoir plus sur ces APIs, voir <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a>.</li> + <li><strong>Les API pour manipuler des documents</strong> chargés dans le navigateur. L'exemple le plus évident est l'<a href="/fr/docs/Web/API/Document_Object_Model">API DOM (<i>Document Object Model</i>)</a>. Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a>.</li> + <li><strong>Les API pour récupérer des données du serveur</strong>, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest </a>et l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme <strong>Ajax</strong> pour qualifier cette technique. Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur.</a></li> + <li><strong>Les API pour dessiner et manipuler des graphiques</strong> sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont <a href="/fr/docs/Web/API/Canvas_API">Canvas </a>et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>. Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>window.requestAnimationFrame()</code></a>, pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>.</li> + <li><strong>Les API audio et vidéo</strong> comme <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a> ou <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a>, permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">API audio et vidéo</a>.</li> + <li><strong>Les API de périphérique</strong> permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a>) ou des vibrations (voir l'<a href="/fr/docs/Web/API/Vibration_API">API Vibration</a>).</li> + <li><strong>Les API de stockage côté client</strong> deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>, et le stockage plus complexe de données tabulaires avec l'<a href="/fr/docs/Web/API/IndexedDB_API">API IndexedDB</a>. Pour en savoir plus sur ces API, voir <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a>.</li> </ul> -<h3 id="APIs_tierces_courantes">APIs tierces courantes</h3> +<h3 id="common_third-party_apis">API tierces courantes</h3> -<p>Il y a une grande variété d'APIs tierces; en voici quelques unes des plus populaires que vous allez probablement utiliser tôt ou tard : </p> +<p>Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard :</p> <ul> - <li>L'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> — vous permet, par exemple, d'afficher vos derniers tweets sur votre site Web.</li> - <li>L'<a href="https://developers.google.com/maps/">API Google Maps</a> — vous permet d'afficher des cartes sur vos pages web. Il s'agit à dire vrai d'une suite complète d'APIs, qui gèrent une grande variété de tâches, comme en témoigne l'<a href="https://developers.google.com/maps/documentation/api-picker">API Picker Google Maps.</a></li> - <li>L'<a href="https://developers.facebook.com/docs/">API Facebook</a> — vous permet d'utiliser diverses parties de l'écosystème Facebook au profit de votre application, par exemple permettre de se connecter via Facebook, accepter des paiements via l'application, déployer des campagnes publicitaires ciblées, etc.</li> - <li>L'<a href="https://developers.google.com/youtube/">API YouTube</a> — vous permet d'intégrer des vidéos YouTube sur votre site, de rechercher sur YouTube, de créer des playlists, etc.</li> - <li>L'<a href="https://www.twilio.com/">API Twilio</a> — fournit un framework permettant de créer des fonctionnalités d'appel vocal et vidéo dans votre application, d'envoyer des SMS/MMS depuis vos applications, et plus encore.</li> -</ul> - -<div class="note"> -<p><strong>Note </strong>: Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le <a href="http://www.programmableweb.com/category/all/apis">répertoire Programmable Web API.</a></p> + <li><a href="https://dev.twitter.com/overview/documentation">L'API Twitter</a> vous permet d'afficher vos derniers tweets sur un site web.</li> + <li>Les API de cartographie comme <a href="https://developer.mapquest.com/">Mapquest</a> et <a href="https://developers.google.com/maps/">Google Maps API</a> vous permettent de réaliser toute sorte de cartes dans des pages web.</li> + <li><a href="https://developers.facebook.com/docs/">L'ensemble d'API de Facebook</a> permet d'utiliser différentes parties de l'écosystème de Facebook dans votre application (par exemple pour la connexion avec un compte Facebook, la gestion des paiements ou de publicité, etc.).</li> + <li><a href="https://core.telegram.org/api">Les API Telegram</a> permettent d'intégrer le contenu de canaux Telegram sur un site web et de prendre en charge les bots.</li> + <li><a href="https://developers.google.com/youtube/">L'API YouTube</a> vous permet d'intégrer des vidéos YouTube sur votre site, de faire des recherches sur YouTube, de construire des listes de lecture, etc.</li> + <li><a href="https://developers.pinterest.com/">L'API Pinterest</a> fournit des outils pour gérer des tableaux et épingles Pinterest et de les inclures à votre site web.</li> + <li><a href="https://www.twilio.com/">L'API Twilio</a> fournit un ensemble d'outil pour intégrer des fonctionnalités d'appels audio et vidéo à une application et/ou d'envoyer des SMS/MMS.</li> + <li><a href="https://docs.joinmastodon.org/api/">L'API Mastodon</a> permet de manipuler les fonctionnalités du réseau social Mastodon grâce à des programmes.</li> + </ul> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le <a href="http://www.programmableweb.com/category/all/apis">répertoire Programmable Web API.</a></p> </div> -<h2 id="Comment_les_API_fonctionnent-elles">Comment les API fonctionnent-elles?</h2> +<h2 id="how_do_apis_work">Comment les API fonctionnent-elles ?</h2> -<p>Chaque API Javascript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.</p> +<p>Chaque API JavaScript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.</p> -<h3 id="Elles_sont_fondées_sur_des_objets">Elles sont fondées sur des objets</h3> +<h3 id="they_are_based_on_objects">Elles sont fondées sur des objets</h3> -<p>Les APIs interagissent avec le code en utilisant un ou plusieurs <a href="/fr/docs/Learn/JavaScript/Objects">objets Javascript</a>, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).</p> +<p>Les API interagissent avec le code en utilisant un ou plusieurs <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).</p> -<div class="note"> -<p><strong>Note </strong>: Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module <a href="/fr/docs/Learn/JavaScript/Objects">objets Javascript</a> avant de continuer.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a> avant de continuer.</p> </div> -<p>Prenons pour exemple l'API Géolocalisation — c'est une API très simple composée de quelques simples objets :</p> +<p>Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :</p> <ul> - <li>{{domxref ("Geolocation")}}, contient trois méthodes pour contrôler la récupération des données géographiques.</li> - <li>{{domxref ("Position")}}, représente la position de l'appareil à un moment donné — contient un objet {{domxref ("Coordinates")}} avec les informations de position réelles, plus un horodatage.</li> - <li>{{domxref ("Coordinates")}}, contient beaucoup de données utiles sur la position de l'appareil, y compris la latitude et la longitude, l'altitude, la vitesse et la direction du mouvement, et plus encore.</li> + <li><a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, qui représente un <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#audio_graphs">graphe audio</a> qui peut être utilisé afin de manipuler la lecture audio dans le navigateur et qui possède différentes méthodes et propriétés qui sont disponibles pour manipuler ce signal audio.</li> + <li><li><a href="/fr/docs/Web/API/MediaElementAudioSourceNode"><code>MediaElementAudioSourceNode</code></a>, qui représente un élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> contenant du son qu'on veut jouer et manipuler dans le contexte.</li> + <li><a href="/fr/docs/Web/API/AudioDestinationNode"><code>AudioDestinationNode</code></a>, qui représente la destination de l'audio, c'est-à-dire le composant physique qui sera utilisé pour produire le son (il s'agit généralement des hauts-parleurs ou des écouteurs).</li> </ul> -<p>Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (regardez‑le <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">aussi en direct</a>), vous verrez le code suivant : </p> - -<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { - var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); - var myOptions = { - zoom: 8, - center: latlng, - mapTypeId: google.maps.MapTypeId.TERRAIN, - disableDefaultUI: true - } - var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions); -});</pre> - -<div class="note"> -<p><strong>Note :</strong> Quand vous chargez l'exemple ci-dessus pour la première fois, vous devriez voir une boîte de dialogue demandant si vous acceptez de partager votre position avec cette application (voir la section {{anch ("Elles ont des mécanismes de sécurité supplémentaires si nécessaire")}} plus loin dans cet article).<br> - Vous devez accepter pour pouvoir inscrire votre position sur la carte. Si vous ne pouvez toujours pas voir la carte, vous devrez activer l'autorisation à la main. Vous pouvez le faire de différentes manières selon le navigateur utilisé ; par exemple, dans Firefox, allez dans > <em>Outils > Informations sur la page > Permissions</em>, puis modifiez le paramètre <em>Accèder à votre positio</em>n ; dans Chrome, allez à <em>Paramètres > Confidentialité > Afficher les paramètres avancés > Paramètres de contenu</em>, puis modifiez les paramètres d'emplacement.<br> - <strong> </strong></p> -</div> - -<p>Pour récupérer l'objet {{domxref("Geolocation")}} du navigateur, on fait appel à {{domxref("Navigator.geolocation")}}. On se sert ensuite de la méthode {{domxref("Geolocation.getCurrentPosition()")}} pour obtenir la position actuelle de notre appareil. On commence donc avec</p> - -<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre> - -<p>C'est pareil que:</p> - -<pre class="brush: js">var myGeo = navigator.geolocation; -myGeo.getCurrentPosition(function(position) { ... });</pre> - -<p>On peut utiliser la syntaxe <em>point</em> pour chaîner l'accès propriété/méthode et réduire ainsi le nombre de lignes à écrire.</p> - -<p>La méthode {{domxref("Geolocation.getCurrentPosition()")}} n'a qu'un seul paramètre obligatoire : une fonction anonyme qui s'exécute une fois que la position actuelle du périphérique a été récupérée avec succès. Cette fonction prend elle-même un paramètre, l'objet {{domxref("Position")}}, contenant les données de position actuelle.</p> -<div class="note"> -<p><strong>Note </strong>: Une fonction prise en argument par une autre fonction s'appelle une <a href="/en-US/docs/Glossary/Callback_function">fonction de rappel</a>.</p> -</div> +<p>Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html">d'élément audio</a> (regardez‑le <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/">aussi en direct</a>), vous verrez le code suivant : </p> -<h3 id="Elles_utilisent_des_fonctions_de_rappel">Elles utilisent des fonctions de rappel</h3> +<pre class="brush: html"><audio src="outfoxing.mp3"></audio> -<p>Cette manière d'appeler des fonctions seulement quand une opération est terminée, pour s'assurer de la bonne fin d'une opération avant d'utiliser les données renvoyées dans une autre opération, est très courante dans les API JavaScript. C'est ce qu'on appelle des opérations {{glossary("asynchronous", "asynchrones")}}.</p> +<button class="paused">Play</button> +<br> +<input type="range" min="0" max="1" step="0.01" value="1" class="volume"></pre> + +<p>Nous incluons, tout d'abord, un élément <code><audio></code> avec lequel nous intégrons un MP3 dans la page. Nous n'incluons pas de contrôles par défaut du navigateur. Ensuite, nous incluons un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> que nous utiliserons pour lire et arrêter la musique, et un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type range, que nous utiliserons pour ajuster le volume de la piste en cours de lecture.</p> -<p>Récupérer la position actuelle de l'appareil repose sur un composant externe (le GPS de l'appareil ou un autre matériel de géolocalisation), on ne peut pas garantir que cela sera fait à temps pour utiliser immédiatement les données qu'il renvoie. Par conséquent, quelque chose comme cela ne fonctionne pas :</p> +<p>Ensuite, examinons le JavaScript de cet exemple.</p> -<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition(); -var myLatitude = position.coords.latitude;</pre> +<p>Nous commençons par créer une instance <code>AudioContext</code> à l'intérieur de laquelle nous allons manipuler notre piste :</p> -<p>Si la première ligne n'a pas encore renvoyé son résultat, la deuxième ligne renvoie une erreur, car les données de position ne sont pas encore disponibles.</p> +<pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext();</pre> -<p>Pour cette raison, les APIs impliquant des opérations asynchrones sont conçues pour utiliser des {{glossary ("callback function","fonctions de rappel")}} ou bien le système plus moderne des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promesses</a> — maintenant disponible dans ECMAScript 6 et largement utilisé dans les nouvelles APIs.</p> +<p>Ensuite, nous créons des constantes qui stockent les références à nos éléments <code><audio></code>, <code><button></code> et <code><input></code>, et nous utilisons la méthode <a href="/fr/docs/Web/API/AudioContext/createMediaElementSource"><code>AudioContext.createMediaElementSource()</code></a> pour créer un <code>MediaElementAudioSourceNode</code> représentant la source de notre audio — l'élément <code><audio></code> sera joué à partir de :</p> -<h3 id="Pour_les_APIs_tierces_elles_doivent_être_inclues">Pour les APIs tierces, elles doivent être inclues</h3> +<pre class="brush: js">const audioElement = document.querySelector('audio'); +const playBtn = document.querySelector('button'); +const volumeSlider = document.querySelector('.volume'); -<p>On combine l'API Geolocation avec une API tierce — l'API Google Maps — pour tracer l'emplacement renvoyé par <code>getCurrentPosition()</code> sur une carte Google Map. Pour mettre cette API à disposition sur notre page on doit l'inclure — vous trouverez cette ligne dans le code HTML:</p> +const audioSource = audioCtx.createMediaElementSource(audioElement);</pre> -<pre class="brush: html"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> +<p>Ensuite, nous incluons deux gestionnaires d'événements qui servent à basculer entre la lecture et la pause lorsque le bouton est pressé et à réinitialiser l'affichage au début lorsque la chanson est terminée :</p> -<h3 id="Elles_utilisent_des_constructeurs_et_des_options_pour_être_personnalisées">Elles utilisent des constructeurs et des options pour être personnalisées</h3> +<pre class="brush: js">// lecture/pause de l'audio +playBtn.addEventListener('click', function() { + // vérifier si le contexte est en état de suspension (politique de lecture automatique) + if (audioCtx.state === 'suspended') { + audioCtx.resume(); + } -<p>Pour afficher la position de l'utilisateur sur la carte, on crée d'abord une instance d'objet <code>LatLng</code> avec le constructeur <code>google.maps.LatLng()</code>. Il prend les valeurs de géolocalisation {{domxref ("coords.latitude")}} et {{domxref ("coords.longitude")}} comme paramètres:</p> + // si la piste est arrêtée, la lire + if (this.getAttribute('class') === 'paused') { + audioElement.play(); + this.setAttribute('class', 'playing'); + this.textContent = 'Pause' + // si une piste est en cours de lecture, l'arrêter +} else if (this.getAttribute('class') === 'playing') { + audioElement.pause(); + this.setAttribute('class', 'paused'); + this.textContent = 'Lire'; + } +}); -<pre class="brush: js">var latlng = new google.maps.LatLng( - position.coords.latitude, - position.coords.longitude -);</pre> +// si la piste se termine +audioElement.addEventListener('ended', function() { + playBtn.setAttribute('class', 'paused'); + playBtn.textContent = 'Lire'; +});</pre> -<p>L'objet que nous avons construit est définit comme la valeur de la propriété <code>center</code> d'un objet d'options, <code>myOptions</code>. Ces options vont être utilisées pour construire la carte.</p> +<div class="note"> + <p><b>Note :</b></p> + <p>Certains d'entre vous ont peut-être remarqué que les méthodes <code>play()</code> et <code>pause()</code> utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>. qui est différente mais étroitement liée.</p> +</div> -<p>On crée une instance d'objet pour représenter notre carte en appelant le constructeur <code>google.maps.Map()</code> avec deux paramètres — une référence à l'élément {{htmlelement ("div")}} sur lequel on veut afficher la carte (celui avec l'ID <code>map_canvas</code>), et l'objet d'options que nous avons défini juste au-dessus.</p> +<p>Ensuite, nous créons un objet <a href="/fr/docs/Web/API/GainNode"><code>GainNode</code></a> à l'aide de la méthode <a href="/fr/docs/Web/API/BaseAudioContext/createGain"><code>AudioContext.createGain()</code></a>, qui peut être utilisé pour ajuster le volume de l'audio qui le traverse, et nous créons un autre gestionnaire d'événements qui modifie la valeur du gain (volume) du graphique audio lorsque la valeur du curseur est modifiée :</p> -<pre class="brush: js">var myOptions = { - zoom: 8, - center: latlng, - mapTypeId: google.maps.MapTypeId.TERRAIN, - disableDefaultUI: true -} +<pre class="brush: js">const gainNode = audioCtx.createGain(); -var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre> +volumeSlider.addEventListener('input', function() { + gainNode.gain.value = this.value; +});</pre> -<p>Ceci fait, notre carte s'affiche.</p> +<p>La dernière chose à faire pour que cela fonctionne est de connecter les différents nœuds du graphe audio, ce qui est fait en utilisant la méthode <a href="/fr/docs/Web/API/AudioNode/connect"><code>AudioNode.connect()</code></a> disponible sur chaque type de nœud :</p> -<p>Ce dernier bloc de code met en évidence deux modèles courants que vous verrez dans de nombreuses APIs. Tout d'abord, les objets des APIs contiennent généralement des constructeurs, qui sont appelés pour créer des instances d'objets. Ensuite, les objets APIs ont souvent plusieurs options disponibles qui peuvent être modifiées pour obtenir l'environnement exact que vous voulez pour votre programme. Les constructeurs d'API acceptent généralement des objets d'options en tant que paramètres, ce qui vous permet de définir leur comportement.</p> +<pre class="brush: js">audioSource.connect(gainNode).connect(audioCtx.destination);</pre> -<div class="note"> -<p><strong>Note </strong>: Ne vous inquiétez pas si vous ne comprenez pas immédiatement le détail de cet exemple . Nous aborderons plus amplement les APIs tierces parties dans un futur article.</p> -</div> +<p>L'audio commence dans la source, qui est ensuite connectée au nœud de gain afin que le volume de l'audio puisse être ajusté. Le nœud de gain est ensuite connecté au nœud de destination afin que le son puisse être lu sur votre ordinateur (la propriété <a href="/fr/docs/Web/API/BaseAudioContext/destination"><code>AudioContext.destination</code></a> représente ce qui est le <a href="/fr/docs/Web/API/AudioDestinationNode"><code>AudioDestinationNode</code></a> par défaut disponible sur le matériel de votre ordinateur, par exemple vos haut-parleurs).</p> -<h3 id="Elles_ont_des_points_d'entrée_identifiables">Elles ont des points d'entrée identifiables</h3> +<h3 id="they_have_recognizable_entry_points">Elles ont des points d'entrée reconnaissables</h3> -<p>Lorsque vous utilisez une API, vous devez d'abord savoir quel est le point d'entrée de l'API. Dans l'API Geolocation, c'est assez simple — c'est la propriété {{domxref ("Navigator.geolocation")}} qui renvoie l'objet {{domxref ("Geolocation")}} du navigateur. Cet objet contient toutes les méthodes disponibles de géolocalisation à l'intérieur.</p> +<p>Lorsque vous utilisez une API, vous devez vous assurer que vous savez où se trouve le point d'entrée de l'API. Dans l'API Web Audio, c'est assez simple — il s'agit de l'objet <a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, qui doit être utilisé pour effectuer toute manipulation audio quelle qu'elle soit.</p> -<p>L'API DOM (Document Object Model) a un point d'entrée encore plus simple — ses caractéristiques sont généralement trouvées attachées à l'objet {{domxref ("Document")}}, ou à toute instance d'un élément HTML que vous souhaitez affecter d'une manière ou d'une autre. Par exemple:</p> +<p>L'API DOM (<i>Document Object Model</i>) a également un point d'entrée simple — ses fonctionnalités ont tendance à être trouvées accrochées à l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>, ou à une instance d'un élément HTML que vous voulez affecter d'une manière ou d'une autre, par exemple :</p> -<pre class="brush: js">var em = document.createElement('em'); // créer un nouvel élément -var para = document.querySelector('p'); // référence à un élément p existant -em.textContent = 'Hello there!'; // fournir à em un contenu textuel -para.appendChild(em); // incorporer un paragraphe dans em</pre> +<pre class="brush: js">const em = document.createElement('em'); // crée un nouvel élément em +const para = document.querySelector('p'); // référence à un élément p existant +em.textContent = 'Hello there!'; // donne à em du contenu textuel +para.appendChild(em); // intégre em dans le paragraphe</pre> -<p>D'autres API ont des points d'entrée légèrement plus complexes, impliquant souvent un contexte spécifique dans lequel le code de l'API doit être écrit. Par exemple, l'objet contextuel de l'API Canvas est créé en obtenant une référence à l'élément {{htmlelement ("canvas")}} sur lequel vous voulez dessiner, puis en appelant sa méthode {{domxref ("HTMLCanvasElement.getContext ()")}} :</p> +<p>L'API <a href="/fr/docs/Web/API/Canvas_API">Canvas</a> repose également sur l'obtention d'un objet de contexte à utiliser pour manipuler les choses, bien que dans ce cas, il s'agisse d'un contexte graphique plutôt que d'un contexte audio. Son objet de contexte est créé en obtenant une référence à l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sur lequel vous voulez dessiner, puis en appelant sa méthode <a href="/fr/docs/Web/API/HTMLCanvasElement/getContext"><code>HTMLCanvasElement.getContext()</code></a> :</p> -<pre class="brush: js">var canvas = document.querySelector('canvas'); -var ctx = canvas.getContext('2d');</pre> +<pre class="brush: js">const canvas = document.querySelector('canvas'); +const ctx = canvas.getContext('2d');</pre> -<p>Tout ce que nous voulons faire sur <code>canvas</code> est alors obtenu en appelant les propriétés et méthodes de l'objet conteneur (qui est une instance de {{domxref ("CanvasRenderingContext2D")}}). Par exemple :</p> +<p>Tout ce que nous voulons faire au canevas est ensuite réalisé en appelant les propriétés et les méthodes de l'objet contexte (qui est une instance de <a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a>), par exemple :</p> <pre class="brush: js">Ball.prototype.draw = function() { ctx.beginPath(); @@ -240,69 +233,72 @@ var ctx = canvas.getContext('2d');</pre> };</pre> <div class="note"> -<p><strong>Note </strong>: Vous pouvez voir le code source de notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">démo « balles rebondissantes »</a> (ou voir <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">directement</a>).</p> + <p><b>Note :</b></p> + <p>Vous pouvez voir ce code en action dans notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">démo de balles rebondissantes</a> (voyez-le fonctionner <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">en direct</a> également).</p> </div> -<h3 id="Elles_utilisent_des_événements_pour_réagir_aux_changements_d'état">Elles utilisent des événements pour réagir aux changements d'état</h3> +<h3 id="they_use_events_to_handle_changes_in_state">Elles utilisent des événements pour gérer les changements d'état</h3> -<p>Nous avons déjà parlé des événements plus haut dans ce cours, dans notre article <a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a> — cet article explique en détail ce que sont les événements Web et leur utilisation dans votre code. Si vous ne vous êtes pas encore familiarisé avec le fonctionnement des événements de l'API Web côté client, vous devriez lire cet article avant de continuer.</p> +<p>Nous avons déjà abordé les événements plus tôt dans le cours dans notre article <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction aux événements</a>, qui examine en détail ce que sont les événements web côté client et comment ils sont utilisés dans votre code. Si vous n'êtes pas déjà familiarisé avec le fonctionnement des événements de l'API Web côté client, nous vous conseillons de lire cet article avant de poursuivre.</p> -<p>Certaines API Web ne détectent pas les événements, d'autres peuvent réagir à certains. Vous pouvez généralement trouver les propriétés des APIs qui permettent de lancer des fonctions lorsque les événements surviennent dans les sections "Gestionnaires d'événements" des documents de réference des APIs.</p> +<p>Certaines API Web ne contiennent aucun événement, mais la plupart en contiennent au moins quelques-uns. Les propriétés des gestionnaires qui nous permettent d'exécuter des fonctions lorsque des événements se produisent sont généralement répertoriées dans notre matériel de référence dans des sections distinctes intitulées « Gestionnaires d'événements ».</p> -<p>À titre de simple exemple, les instances de l'objet <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (qui représentent une requête HTTP vers le serveur pour récupérer une ressource) ont un certain nombre d'événements disponibles. Par exemple, l'événement <code>load</code> est déclenché lorsqu'une réponse a été retournée avec succès avec la ressource demandée, et qu'elle devient alors disponible:</p> +<p>Nous avons déjà vu un certain nombre de gestionnaires d'événements utilisés dans notre exemple d'API audio Web ci-dessus.</p> -<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; -var request = new XMLHttpRequest(); +<p>Pour fournir un autre exemple, les instances de l'objet <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> (chacune représente une requête HTTP au serveur pour récupérer une nouvelle ressource d'un certain type) a un certain nombre d'événements disponibles sur eux, par exemple, l'événement <code>load</code> est déclenché lorsqu'une réponse a été renvoyée avec succès contenant la ressource demandée, et qu'elle est désormais disponible.</p> + +<p>Le code suivant fournit un exemple simple de la façon dont cela peut être utilisé :</p> + +<pre class="brush: js">let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +let request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { - var superHeroes = request.response; + const superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); }</pre> -<div class="note"> -<p><strong>Note </strong>: Vous pouvez voir le code source de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (ou le <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">voir directement</a>).</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Vous pouvez voir ce code en action dans notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">voyez-le en direct</a> également).</p> </div> -<p>Les cinq premières lignes définissent l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur <code>XMLHttpRequest()</code>, ouvrent une requête HTTP <code>GET</code> pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la demande.</p> - -<p>La fonction gestionnaire <code>onload</code> indique ensuite ce qu'on fait avec la réponse. On sait que la réponse sera disponible dès que l'événement <code>load</code> est appelé (sauf si une erreur se produit), on sauvegarde donc la réponse — contenant le JSON renvoyé — dans la variable <code>superHeroes</code>, puis on la passe à deux fonctions différentes pour un traitement ultérieur.</p> +<p>Les cinq premières lignes spécifient l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur <code>XMLHttpRequest()</code>, ouvrent une requête HTTP <code>GET</code> pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la requête.</p> -<h3 id="Elles_ont_des_mécanismes_de_sécurité_supplémentaires_si_nécessaire">Elles ont des mécanismes de sécurité supplémentaires si nécessaire</h3> +<p>La fonction du gestionnaire <code>onload</code> précise ensuite ce que nous faisons de la réponse. Nous savons que la réponse sera renvoyée avec succès et disponible après le déclenchement de l'événement load (sauf si une erreur s'est produite), nous sauvegardons donc la réponse contenant le JSON renvoyé dans la variable <code>superHeroes</code>, puis nous la passons à deux fonctions différentes pour un traitement ultérieur.</p> -<p>Les caractéristiques des APIs Web sont soumises aux mêmes considérations de sécurité que JavaScript et des autres technologies Web (par exemple, la <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">same-origin policy</a>), mais elles disposent parfois de mécanismes de sécurité supplémentaires.</p> +<h3 id="they_have_additional_security_mechanisms_where_appropriate">Elles disposent de mécanismes de sécurité supplémentaires adéquats</h3> -<p>Par exemple, certaines des APIs Web les plus modernes ne fonctionneront que sur les pages HTTPS car elles transmettent des données potentiellement sensibles (exemple: <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> et <a href="/fr/docs/Web/API/Push_API">Push</a>).</p> +<p>Les fonctionnalités des API Web sont soumises aux mêmes considérations de sécurité que JavaScript et les autres technologies web (par exemple <a href="/fr/docs/Web/Security/Same-origin_policy">same-origin policy</a>), mais elles disposent parfois de mécanismes de sécurité supplémentaires. Par exemple, certaines des API Web les plus modernes ne fonctionneront que sur des pages servies par HTTPS, car elles transmettent des données potentiellement sensibles (par exemple <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a> et <a href="/fr/docs/Web/API/Push_API">Push</a>).</p> -<p>En outre, certaines APIs Web demandent l'autorisation d'être activés par l'utilisateur une fois que les appels sont faits dans votre code. Par exemple, vous avez peut-être remarqué une boîte de dialogue comme celle-ci lors du chargement de notre exemple de <a href="/fr/docs/Web/API/Geolocation">Geolocation</a> précédent :</p> +<p>En outre, certaines API Web demandent la permission d'être activées à l'utilisateur une fois que les appels à ces interfaces sont effectués dans votre code. À titre d'exemple, l'API <a href="/fr/docs/Web/API/Notifications_API">Notifications API</a> demande la permission à l'aide d'une boîte de dialogue contextuelle :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 415px;"></p> +<p><img alt="" src="notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<p>De même, l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications </a>demande une autorisation:</p> +<p>Les API Web Audio et <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> sont soumises à un mécanisme de sécurité appelé <a href="/fr/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy">autoplay policy</a> - cela signifie essentiellement que vous ne pouvez pas lire automatiquement l'audio lorsqu'une page se charge — vous devez permettre à vos utilisateurs de déclencher la lecture audio par le biais d'un contrôle comme un bouton. Cette mesure est prise parce que la lecture automatique de l'audio est généralement très ennuyeuse et que nous ne devrions pas y soumettre nos utilisateurs.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>Ces invites d'autorisation sont affichées aux utilisateurs pour des raisons de sécurité — si elles n'étaient pas en place, alors les sites pourraient commencer à suivre secrètement votre emplacement sans que vous le sachiez, ou à vous envoyer des messages indésirables avec beaucoup de notifications ennuyantes.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.</p> +</div> <h2 id="Résumé">Résumé</h2> -<p>À ce stade, vous devriez avoir une bonne idée de ce que sont les APIs, comment elles fonctionnent et ce que vous pouvez faire avec dans votre code JavaScript. Vous êtes probablement impatients de commencer à faire des choses amusantes avec des APIs spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le Document Object Model (DOM).</p> +<p>À ce stade, vous devriez avoir une bonne idée de ce que sont les API, de leur fonctionnement et de ce que vous pouvez faire avec dans votre code JavaScript. Vous avec probablement hâte de commencer à faire des choses amusantes avec des API spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le <i>Document Object Model</i> (DOM).</p> <p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p> -<h2 id="Dans_ce_module">Dans ce module</h2> +<h2 id="in_this_module">Dans ce module</h2> <ul> - <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> - <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> - <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> - <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> - <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> - <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">API tierces</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">API vidéo et audio</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> </ul> - -<p> </p> |