diff options
Diffstat (limited to 'files/fr/learn/javascript/client-side_web_apis')
8 files changed, 3848 insertions, 0 deletions
diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html new file mode 100644 index 0000000000..e5226ffa24 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -0,0 +1,881 @@ +--- +title: Stockage côté client +slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage +tags: + - API + - Apprendre + - Codage + - Débutant + - Guide + - IndexedDB + - JavaScript + - Storage +translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +--- +<p>{{LearnSidebar}}</p> + +<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<div></div> + +<p class="summary">Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td>Notions de bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de base des APIs côté client</a></td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Apprendre à utiliser les APIs de stockage côté client pour stocker des données de l'application.</td> + </tr> + </tbody> +</table> + +<h2 id="Stockage_côté_client">Stockage côté client ?</h2> + +<p>Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites statiques</a> et les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dynamiques</a> — ces derniers stockent des données <a href="/fr/docs/Learn/Server-side">côté serveur</a> en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.</p> + +<p>Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :</p> + +<ul> + <li>Personnaliser les préférences du site (par exemple, afficher des widgets personnalisés selon le choix de l'utilisateur, changer le thème du site ou la taille de la police).</li> + <li>Enregistrer les activités sur le site (comme le contenu d'un panier d'achat d'une session précédente, ou encore se souvenir si l'utilisateur s'est déjà connecté).</li> + <li>Sauvegarder des données et ressources localement pour pouvoir accéder au site plus rapidement ou même sans connexion réseau.</li> + <li>Sauvegarder des documents générés par l'application pour une utilisation hors ligne.</li> +</ul> + +<p>Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.</p> + +<div class="note"> +<p><strong>Note </strong>: La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a> pour plus d'informations.</p> +</div> + +<h3 id="À_lancienne_les_cookies">À l'ancienne : les cookies</h3> + +<p>Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des <a href="/fr/docs/Web/HTTP/Cookies">cookies</a> pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.</p> + +<p>De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de <a href="/fr/docs/Web/HTTP/Cookies#EU_cookie_directive">directive Cookie</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15734/cookies-notice.png" style="display: block; margin: 0 auto;"></p> + +<p>Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les <a href="/fr/docs/Web/HTTP/Cookies#Security">problèmes de sécurité</a> qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.</p> + +<p>Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.</p> + +<div class="note"> +<p><strong>Note </strong>: Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.</p> +</div> + +<h3 id="La_nouvelle_école_Web_Storage_et_IndexedDB">La nouvelle école : Web Storage et IndexedDB</h3> + +<p>Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client.</p> + +<ul> + <li>L'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> fournit une syntaxe très simple pour stocker et récupérer des données de petite taille, basé sur un système de clé/valeur. C'est utile lorsque vous avez besoin de stocker des données simples, comme le nom de l'utilisateur, le fait qu'il soit connecté ou non, la couleur à utiliser pour l'arrière-plan de l'écran, etc.</li> + <li>L'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> fournit au navigateur un système de base de données complet pour stocker des données complexes. C'est utile pour des choses allant de simples sauvegardes côté client (texte) au stockage de données complexes tels que des fichiers audio ou vidéo.</li> +</ul> + +<p>Vous en apprendrez plus sur ces APIs ci-dessous.</p> + +<h3 id="Le_futur_lAPI_Cache">Le futur : l'API Cache</h3> + +<p>Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'<a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a>, mais ce n'est pas obligatoire.</p> + +<p>L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.</p> + +<h2 id="Stocker_des_données_simples_—_web_storage">Stocker des données simples — web storage</h2> + +<p>L'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin.</p> + +<h3 id="Syntaxe_basique">Syntaxe basique</h3> + +<p>Nous allons vous guider pas à pas :</p> + +<ol> + <li> + <p>Tout d'abord, ouvez notre template vide de <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">web storage sur GitHub</a> dans un nouvel onglet.</p> + </li> + <li> + <p>Ouvrez la console JavaScript de votre navigateur.</p> + </li> + <li> + <p>Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile.</p> + + <p>La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) :</p> + + <pre class="brush: js">localStorage.setItem('name','Chris');</pre> + </li> + <li> + <p>La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript :</p> + + <pre class="brush: js">var myName = localStorage.getItem('name'); +myName</pre> + + <p>En tapant la deuxième ligne, vous devriez voir que la variable <code>myName</code> contient la valeur de l'entrée <code>name</code>.</p> + </li> + <li> + <p>La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript :</p> + + <pre class="brush: js">localStorage.removeItem('name'); +var myName = localStorage.getItem('name'); +myName</pre> + + <p>La troisième ligne devrait maintenant retourner <code>null</code> — l'entrée <code>name</code> n'existe plus dans le web storage.</p> + </li> +</ol> + +<h3 id="Les_données_persistent_!">Les données persistent !</h3> + +<p>Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du <code>localStorage</code>). Regardons ça en action :</p> + +<ol> + <li> + <p>Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile.</p> + </li> + <li> + <p>Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir :</p> + + <pre class="brush: js">localStorage.setItem('name','Chris'); +var myName = localStorage.getItem('name'); +myName</pre> + + <p>Vous devriez voir que l'entrée <code>name</code> est bien là.</p> + </li> + <li> + <p>Maintenant, fermez le navigateur et ouvrez-le de nouveau.</p> + </li> + <li> + <p>Entrez les lignes suivantes :</p> + + <pre class="brush: js">var myName = localStorage.getItem('name'); +myName</pre> + + <p>Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré.</p> + </li> +</ol> + +<h3 id="Stockage_séparé_pour_chaque_domaine">Stockage séparé pour chaque domaine</h3> + +<p>Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site.</p> + +<p>C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre !</p> + +<h3 id="Un_exemple_plus_impliqué">Un exemple plus impliqué</h3> + +<p>Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage.</p> + +<p>Le HTML de l'exemple est disponible à <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p> + +<p>Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.</p> + +<ol> + <li> + <p>D'abord, copiez notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> dans un nouveau répertoire sur votre ordinateur.</p> + </li> + <li> + <p>Ensuite, créez un fichier <code>index.js</code> dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).</p> + </li> + <li> + <p>Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:</p> + + <pre class="brush: js">// créer les constantes nécessaires +const rememberDiv = document.querySelector('.remember'); +const forgetDiv = document.querySelector('.forget'); +const form = document.querySelector('form'); +const nameInput = document.querySelector('#entername'); +const submitBtn = document.querySelector('#submitname'); +const forgetBtn = document.querySelector('#forgetname'); + +const h1 = document.querySelector('h1'); +const personalGreeting = document.querySelector('.personal-greeting');</pre> + </li> + <li> + <p>Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent :</p> + + <pre class="brush: js">// Empêcher le form d'être soumis +form.addEventListener('submit', function(e) { + e.preventDefault(); +});</pre> + </li> + <li> + <p>Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec <code>setItem()</code>. Ensuite, on exécute une fonction appelée <code>nameDisplayCheck()</code> qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code :</p> + + <pre class="brush: js">// exécuter la fonction quand le bouton 'Say hello' est cliqué +submitBtn.addEventListener('click', function() { + // stocker le nom entré dans le web storage + localStorage.setItem('name', nameInput.value); + // exécuter nameDisplayCheck() pour afficher la + // page personnalisée et changer le formulaire + nameDisplayCheck(); +});</pre> + </li> + <li> + <p>On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément <code>name</code> du web storage en utilisant <code>removeItem()</code>, puis on exécute <code>nameDisplayCheck()</code> pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code :</p> + + <pre class="brush: js">// exécuter la fonction quand le bouton 'Forget' est cliqué +forgetBtn.addEventListener('click', function() { + // supprimer l'item name du web storage + localStorage.removeItem('name'); + // exécuter nameDisplayCheck() pour afficher la + // page personnalisée et changer le formulaire + nameDisplayCheck(); +});</pre> + </li> + <li> + <p>Il est maintenant temps de définir la fonction <code>nameDisplayCheck()</code> elle-même. Ici, on vérifie si l'élément <code>name</code> est stocké dans le web storage en utilisant <code>localStorage.getItem('name')</code> comme condition. S'il existe, la valeur retournée sera évaluée à <code>true</code>; sinon, comme <code>false</code>. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code :</p> + + <pre class="brush: js">// définit la fonction nameDisplayCheck() +function nameDisplayCheck() { + // vérifie si l'élément 'name' est stocké dans le web storage + if(localStorage.getItem('name')) { + // Si c'est le cas, affiche un accueil personnalisé + let name = localStorage.getItem('name'); + h1.textContent = 'Welcome, ' + name; + personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.'; + // cache la partie 'remember' du formulaire et affiche la partie 'forget' + forgetDiv.style.display = 'block'; + rememberDiv.style.display = 'none'; + } else { + // Sinon, affiche un accueil générique + h1.textContent = 'Welcome to our website '; + personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.'; + // cache la partie 'forget' du formulaire et affiche la partie 'remember' + forgetDiv.style.display = 'none'; + rememberDiv.style.display = 'block'; + } +}</pre> + </li> + <li> + <p>Dernier point, mais non des moindres, on exécute la fonction <code>nameDisplayCheck()</code> à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code :</p> + + <pre class="brush: js">document.body.onload = nameDisplayCheck;</pre> + </li> +</ol> + +<p>Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">version terminée en direct ici</a> (ou le <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/index.js">code JavaScript terminé</a>).</p> + +<div class="note"> +<p><strong>Note </strong>: Vous pouvez trouver un exemple un peu plus complexe dans l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API de stockage web</a>.</p> +</div> + +<div class="note"> +<p><strong>Note </strong>: Dans la ligne <code><script src="index.js" defer></script></code> de notre version finie, l'attribut <code>defer</code> spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.</p> +</div> + +<h2 id="Stocker_des_données_complexes_—_IndexedDB">Stocker des données complexes — IndexedDB</h2> + +<p>L'<a href="/en-US/docs/Web/API/IndexedDB_API">API IndexedDB</a> (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.</p> + +<p>Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.</p> + +<h3 id="Un_exemple_de_stockage_de_notes">Un exemple de stockage de notes</h3> + +<p>Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB.</p> + +<p>L'application ressemble à ceci :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.</p> + +<h3 id="Pour_commencer">Pour commencer</h3> + +<ol> + <li>Tout d'abord, copiez les fichiers <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code>, et <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> dans un nouveau répertoire sur votre ordinateur.</li> + <li>Jetez un coup d'oeil aux fichiers. + <ul> + <li>Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter.</li> + <li>Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe.</li> + <li>Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}.</li> + </ul> + </li> + <li>Renommez votre fichier JavaScript en <code>index.js</code>. Vous êtes maintenant prêt pour y ajouter du code.</li> +</ol> + +<h3 id="Configuration_initiale_de_la_base_de_données">Configuration initiale de la base de données</h3> + +<p>Voyons maintenant la première chose à faire, mettre en place la base de données.</p> + +<ol> + <li> + <p>À la suite des déclarations de constantes, ajoutez les lignes suivantes :</p> + + <pre class="brush: js">// Objet db pour stocker la BDD ouverte +let db;</pre> + + <p>Ici, on déclare une variable appelée <code>db</code> — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses.</p> + </li> + <li> + <p>Ensuite, ajoutez ce qui suit au bas de votre code :</p> + + <pre class="brush: js">window.onload = function() { + +};</pre> + + <p>On écrira tout notre code dans le gestionnaire d'événement <code>window.onload</code>, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon).</p> + </li> + <li> + <p>À l'intérieur de <code>window.onload</code>, ajoutez ce qui suit :</p> + + <pre class="brush: js">// Ouvrir la BDD; elle sera créée si elle n'existe pas déjà +// (voir onupgradeneeded) +let request = window.indexedDB.open('notes', 1);</pre> + + <p>Cette ligne crée une requête <code>request</code> pour ouvrir la version <code>1</code> de la base de données appelée <code>notes</code>. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.</p> + + <p>Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.</p> + + <p>Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle <code>request</code> pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.</p> + + <div class="note"> + <p><strong>Note </strong>: Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement <code>onupgradeneeded</code>. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.</p> + </div> + </li> + <li> + <p>Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de <code>window.onload</code> :</p> + + <pre class="brush: js">// la base de données n'a pas pu être ouverte avec succès +request.onerror = function() { + console.log('Database failed to open'); +}; + +// la base de données a été ouverte avec succès +request.onsuccess = function() { + console.log('Database opened successfully'); + + // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite + db = request.result; + + // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD + displayData(); +};</pre> + + <p>Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.</p> + + <p>Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable <code>db</code> qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée <code>displayData()</code>, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.</p> + </li> + <li> + <p>Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :</p> + + <pre class="brush: js">// Spécifie les tables de la BDD si ce n'est pas déjà pas fait +request.onupgradeneeded = function(e) { + // Récupère une référence à la BDD ouverte + let db = e.target.result; + + // Crée un objectStore pour stocker nos notes (une table) + // Avec un champ qui s'auto-incrémente comme clé + let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true }); + + // Définit les champs que l'objectStore contient + objectStore.createIndex('title', 'title', { unique: false }); + objectStore.createIndex('body', 'body', { unique: false }); + + console.log('Database setup complete'); +};</pre> + + <p>C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.</p> + + <ol> + <li> + <p>On récupère une référence à la base de données existante depuis <code>e.target.result</code> (la propriété <code>result</code> de la cible de l'événement, c'est à dire l'objet <code>request</code>). C'est l'équivalent de la ligne <code>db = request.result;</code> du gestionnaire d'événement <code>onsuccess</code>, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement <code>onupgradeneeded</code> est exécuté avant <code>onsuccess</code> — la valeur de <code>db</code> n'est pas encore disponible.</p> + </li> + <li> + <p>Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom <code>notes</code>, et un champs <code>id</code> avec <code>autoIncrement</code> — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ <code>id</code> sans que le développeur n'ait à le définir. Le champ <code>id</code> est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.</p> + </li> + <li> + <p>On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: <code>title</code> (qui contiendra le titre de chaque note), et <code>body</code> (qui contiendra la description de chaque note).</p> + </li> + </ol> + </li> +</ol> + +<p>Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :</p> + +<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{ + </span><span class="nodeName">title</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Acheter du lait"</span>, + <span class="nodeName">body</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Lait de vache et de soja."</span>, + <span class="nodeName">id</span><span class="objectEqual">: </span><span class="objectBox objectBox-number">8</span></span></span></span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectRightBrace"> +}</span></span></span></span></span></pre> + +<h3 id="Ajouter_des_données_à_la_base_de_données">Ajouter des données à la base de données</h3> + +<p>Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page.</p> + +<ol> + <li> + <p>À la suite du gestionnaire d'événement précédent (mais toujours dans <code>window.onload</code>), ajoutez la ligne suivante — elle définit un gestionnaire d'événement <code>onsubmit</code> pour exécuter la fonction <code>addData()</code> quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) :</p> + + <pre class="brush: js">// Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis +form.onsubmit = addData;</pre> + </li> + <li> + <p>Maintenant, définissons la fonction <code>addData()</code>. Ajoutez ce qui suit après la ligne précédente :</p> + + <pre class="brush: js">// Définit la fonction addData() +function addData(e) { + // empêcher le formulaire d'être soumis vers le serveur + e.preventDefault(); + + // récupérer les valeurs entrées dans les champs du formulaire + // et les stocker dans un objet qui sera inséré en BDD + let newItem = { title: titleInput.value, body: bodyInput.value }; + + // ouvrir une transaction en lecture/écriture + let transaction = db.transaction(['notes'], 'readwrite'); + + // récupérer l'object store de la base de données qui a été ouvert avec la transaction + let objectStore = transaction.objectStore('notes'); + + // demander l'ajout de notre nouvel objet à l'object store + var request = objectStore.add(newItem); + request.onsuccess = function() { + // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout + titleInput.value = ''; + bodyInput.value = ''; + }; + + // attendre la fin de la transaction, quand l'ajout a été effectué + transaction.oncomplete = function() { + console.log('Transaction completed: database modification finished.'); + + // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData() + displayData(); + }; + + transaction.onerror = function() { + console.log('Transaction not opened due to error'); + }; +}</pre> + + <p>C'est assez complexe, voyons ça pas à pas :</p> + + <ol> + <li> + <p>On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur).</p> + </li> + <li> + <p>On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur <code>id</code> — comme nous l'avons précédemment expliqué, il est auto-rempli.</p> + </li> + <li> + <p>On ouvre une transaction en lecture/écritre (<code>readwrite</code>) sur l'object store <code>notes</code> en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple.</p> + </li> + <li> + <p>On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable <code>objectStore</code>.</p> + </li> + <li> + <p>On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.</p> + </li> + <li>On ajoute des gestionnaires d'événement à <code>request</code> et <code>transaction</code> pour exécuter du code aux points importants de leur cycle de vie : + <ul> + <li>Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note</li> + <li>Quand la transaction est terminé, on réexécute la fonction <code>displayData()</code> — pour mettre à jour l'affichage de notes sur la page.</li> + </ul> + </li> + </ol> + </li> +</ol> + +<h3 id="Afficher_les_données">Afficher les données</h3> + +<p>Nous avons déjà appelé <code>displayData()</code> deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente :</p> + +<pre class="brush: js">// Définit la fonction displayData() +function displayData() { + // Vide le contenu de la liste à chaque fois qu'on la met à jour + // Si on ne le faisait pas, des duplicats seraient affichés à chaque ajout + while (list.firstChild) { + list.removeChild(list.firstChild); + } + + // Ouvre l'object store puis récupère un curseur - qui va nous permettre d'itérer + // sur les entrées de l'object store + let objectStore = db.transaction('notes').objectStore('notes'); + objectStore.openCursor().onsuccess = function(e) { + // Récupère une référence au curseur + let cursor = e.target.result; + + // S'il reste des entrées sur lesquelles itérer, on exécute ce code + if(cursor) { + // Crée un li, h3, et p pour mettre les données de l'entrée puis les ajouter à la liste + let listItem = document.createElement('li'); + let h3 = document.createElement('h3'); + let para = document.createElement('p'); + + listItem.appendChild(h3); + listItem.appendChild(para); + list.appendChild(listItem); + + // Récupère les données à partir du curseur et les met dans le h3 et p + h3.textContent = cursor.value.title; + para.textContent = cursor.value.body; + + // Met l'ID de l'entrée dans un attribut du li, pour savoir à quelle entrée il correspond + // Ce sera utile plus tard pour pouvoir supprimer des entrées + listItem.setAttribute('data-note-id', cursor.value.id); + + // Crée un bouton et le place dans le li + let deleteBtn = document.createElement('button'); + listItem.appendChild(deleteBtn); + deleteBtn.textContent = 'Delete'; + + // Définit un gestionnaire d'événement pour appeler deleteItem() quand le bouton supprimer est cliqué + deleteBtn.onclick = deleteItem; + + // Continue l'itération vers la prochaine entrée du curseur + cursor.continue(); + } else { + // Si la liste est vide, affiche un message "Aucune note n'existe" + if(!list.firstChild) { + let listItem = document.createElement('li'); + listItem.textContent = 'No notes stored.'; + list.appendChild(listItem); + } + // Il n'y a plus d'entrées dans le curseur + console.log('Notes all displayed'); + } + }; +}</pre> + +<p>Encore une fois, pas à pas :</p> + +<ol> + <li> + <p>D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour.</p> + </li> + <li> + <p>Ensuite, on récupère une référence à l'object store <code>notes</code> en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans <code>addData()</code>, mais en chaînant ces deux instructions en une seule ligne.</p> + </li> + <li> + <p>L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement <code>onsuccess</code> à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.</p> + </li> + <li> + <p>On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec <code>cursor = e.target.result</code>.</p> + </li> + <li> + <p>Ensuite, on vérifie si le curseur contient une entrée de l'object store (<code>if(cursor){ ... }</code>) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément <code><ul></code>). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction <code>deleteItem()</code> — que nous allons voir dans la section suivante.</p> + </li> + <li> + <p>À la fin du bloc <code>if</code>, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, <code>continue()</code> sera exécuté à nouveau, et ainsi de suite.</p> + </li> + <li> + <p>Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne <code>undefined</code>, et le bloc <code>else</code> sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le <code><ul></code> — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.</p> + </li> +</ol> + +<h3 id="Supprimer_une_note">Supprimer une note</h3> + +<p>Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction <code>deleteItem()</code>, que l'on définit ainsi :</p> + +<pre class="brush: js">// Définit la fonction deleteItem() +function deleteItem(e) { + // Récupère l'id de l'entrée que l'on veut supprimer + // On doit le convertir en nombre avant d'essayer de récupérer l'entrée correspondante dans IDB + // les clés sont sensibles à la casse + let noteId = Number(e.target.parentNode.getAttribute('data-note-id')); + + // Ouvre une transaction et supprime la note ayant l'id récupéré ci-dessus + let transaction = db.transaction(['notes'], 'readwrite'); + let objectStore = transaction.objectStore('notes'); + let request = objectStore.delete(noteId); + + // Indique à l'utilisateur que l'entrée a été supprimée + transaction.oncomplete = function() { + // supprime l'élément parent du bouton, le li + // pour qu'il ne soit plus affiché + e.target.parentNode.parentNode.removeChild(e.target.parentNode); + console.log('Note ' + noteId + ' deleted.'); + + // Si la liste est vide, affiche un message qui l'indique + if(!list.firstChild) { + let listItem = document.createElement('li'); + listItem.textContent = 'No notes stored.'; + list.appendChild(listItem); + } + }; +}</pre> + +<ul> + <li>On récupère l'ID de l'entrée à supprimer avec <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — souvenez-vous qu'on a mis l'ID de l'entrée dans l'attribut <code>data-note-id</code> du <code><li></code> au moment de l'afficher. On fait passer l'id à travers l'objet global <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number()</a>, puisqu'on a actuellement une chaîne de caractères et on a besoin d'un nombre pour qu'il soit reconnu par la base de données.</li> + <li>On récupère ensuite une référence à l'object store de la même manière que précédemment, et on utilise la méthode {{domxref("IDBObjectStore.delete()")}} pour supprimer l'entrée de la base de données, en lui passant l'ID.</li> + <li>Quand la transaction est terminée, on supprime le <code><li></code> du DOM, et on vérifie si le <code><ul></code> est maintenant vide. Si c'est le cas, on insère un message pour l'indiquer.</li> +</ul> + +<p>Et voilà ! L'exemple devrait maintenant fonctionner.</p> + +<div class="note"> +<p><strong>Note </strong>: Si vous rencontrez des difficultés, n'hésitez pas à consulter <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">notre exemple en direct</a> (ou voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">le code source</a>).</p> +</div> + +<h3 id="Stocker_des_données_complexes_avec_IndexedDB">Stocker des données complexes avec IndexedDB</h3> + +<p>Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données.</p> + +<p>Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB video store</a> (le <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">voir en direct</a>). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante.</p> + +<p>Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté.</p> + +<ol> + <li> + <p>Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets :</p> + + <pre class="brush: js">const videos = [ + { 'name' : 'crystal' }, + { 'name' : 'elf' }, + { 'name' : 'frog' }, + { 'name' : 'monster' }, + { 'name' : 'pig' }, + { 'name' : 'rabbit' } +];</pre> + </li> + <li> + <p>Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction <code>init()</code>. Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données <code>videos</code>.</p> + + <p>On peut facilement vérifier si une entrée a été trouvée en vérifiant si <code>request.result</code> est évalué à <code>true</code> — si l'entrée n'est pas présente, la valeur retournée est <code>undefined</code>.</p> + + <p>Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction <code>displayVideo()</code> pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction <code>fetchVideoFromNetwork()</code>, qui récupère la vidéo à partir du réseau.</p> + + <pre class="brush: js">function init() { + // Boucle sur les vidéos une par une + for(let i = 0; i < videos.length; i++) { + // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom + let objectStore = db.transaction('videos').objectStore('videos'); + let request = objectStore.get(videos[i].name); + request.onsuccess = function() { + // Si l'entrée existe dans la BDD (le résultat n'est pas undefined) + if(request.result) { + // Affiche la vidéo en utilisant displayVideo() + console.log('taking videos from IDB'); + displayVideo(request.result.mp4, request.result.webm, request.result.name); + } else { + // Récupère la vidéo à partir du réseau + fetchVideoFromNetwork(videos[i]); + } + }; + } +}</pre> + </li> + <li> + <p>Le bout de code qui suit est extrait de la fonction <code>fetchVideoFromNetwork()</code> — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.</p> + + <p>Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode <code>all()</code> est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.</p> + + <p>À l'intérieur du bloc <code>all()</code>, vous pouvez voir qu'on appelle la fonction <code>displayVideo()</code>, comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction <code>storeVideo()</code> pour stocker ces vidéos dans la base de données.</p> + + <pre class="brush: js">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => + response.blob() +); +let webmBlob = fetch('videos/' + video.name + '.webm').then(response => + response.blob() +); + +// Exécuter le bloc de code suivant lorsque les deux promesses sont résolues +Promise.all([mp4Blob, webmBlob]).then(function(values) { + // Afficher la vidéo récupérée à partir du réseau avec displayVideo() + displayVideo(values[0], values[1], video.name); + // La stocker dans IDB avec storeVideo() + storeVideo(values[0], values[1], video.name); +});</pre> + </li> + <li> + <p>Regardons <code>storeVideo()</code> en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de <code>videos</code>, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}.</p> + + <pre class="brush: js">function storeVideo(mp4Blob, webmBlob, name) { + // Ouvre une transaction, récupère object store + let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos'); + // Crée une entrée à ajouter à IDB + let record = { + mp4 : mp4Blob, + webm : webmBlob, + name : name + } + + // Ajoute l'entrée à IDB avec add() + let request = objectStore.add(record); + + ... + +};</pre> + </li> + <li> + <p>Enfin, <code>displayVideo()</code> crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément <code><video></code>, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut <code>src</code> de l'élément {{htmlelement("source")}}, et ça marche.</p> + + <pre class="brush: js">function displayVideo(mp4Blob, webmBlob, title) { + // Crée l'objet URL à partir du blob + let mp4URL = URL.createObjectURL(mp4Blob); + let webmURL = URL.createObjectURL(webmBlob); + + ... + + let video = document.createElement('video'); + video.controls = true; + let source1 = document.createElement('source'); + source1.src = mp4URL; + source1.type = 'video/mp4'; + let source2 = document.createElement('source'); + source2.src = webmURL; + source2.type = 'video/webm'; + + ... +}</pre> + </li> +</ol> + +<h2 id="Stockage_hors-ligne_de_ressources">Stockage hors-ligne de ressources</h2> + +<p>L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p> + +<p>C'est là qu'interviennet les <a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a> et l'API étroitement liée, <a href="/fr/docs/Web/API/Cache">Cache</a>.</p> + +<h3 id="Service_Worker_Cache">Service Worker / Cache</h3> + +<p>Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine.</p> + +<p>Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques <a href="/fr/docs/Web/API/Service_Worker_API#Autres_id%C3%A9es_de_cas_d'utilisation">idées de cas d'utilisation</a>), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne.</p> + +<p>L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.</p> + +<div class="note"> +<p><strong>Note </strong>: Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.</p> +</div> + +<h3 id="Un_exemple_service_worker">Un exemple service worker</h3> + +<p>Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne!</p> + +<p>Voir <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">IndexedDB video store avec service worker en direct</a>, ou <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">voir le code source</a>.</p> + +<h3 id="Enregistrer_le_service_worker">Enregistrer le service worker</h3> + +<p>La première chose à noter est qu'il a un peu plus de code placé dans le fichier JavaScript principal (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144">index.js</a>):</p> + +<pre class="brush: js">// Enregistre un service worker pour contrôler le site hors-ligne +if('serviceWorker' in navigator) { + navigator.serviceWorker + .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js') + .then(function() { console.log('Service Worker Registered'); }); +}</pre> + +<ul> + <li>On effectue d'abord un test de détection de fonctionnalité pour vérifier si l'objet <code>serviceWorker</code> existe dans l'objet {{domxref("Navigator")}}. Si c'est le cas, alors on sait qu'au moins les fonctionnalités de base des service workers sont prises en charge.</li> + <li>On utilise la méthode {{domxref("ServiceWorkerContainer.register()")}} afin d'enregistrer le service worker <code>sw.js</code> pour l'origine où il se situe, ainsi il pourra contrôler les pages qui sont dans le même répertoire que lui, ou dans un sous-répertoire.</li> + <li>Lorsque la promesse est résolue, c'est que le service worker est enregistré.</li> +</ul> + +<div class="note"> +<p><strong>Note </strong>: Le chemin du fichier <code>sw.js</code> est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.<br> + Le service worker est sur <code>https://mdn.github.io/learning-area/.../sw.js</code>. L'origine est <code>https://mdn.github.io</code>. Le chemin donné doit donc être <code>/learning-area/.../sw.js</code>.<br> + Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.</p> +</div> + +<h3 id="Installer_le_service_worker">Installer le service worker</h3> + +<p>Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement <code>install</code> est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation.</p> + +<p>Prenons pour exemple le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> (le service worker) :</p> + +<pre class="brush: js">self.addEventListener('install', function(e) { + e.waitUntil( + caches.open('video-store').then(function(cache) { + return cache.addAll([ + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css' + ]); + }) + ); +});</pre> + +<ol> + <li> + <p>Le gestionnaire d'événément <code>install</code> est enregistré sur <code>self</code>. Le mot-clé <code>self</code> est un moyen de faire référence au service worker de la portée globale à partir de son fichier.</p> + </li> + <li> + <p>À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès.</p> + </li> + <li> + <p>Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du <code>video-store</code>.</p> + </li> + <li> + <p>On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache.</p> + </li> +</ol> + +<p>C'est tout pour l'instant, l'installation est terminée.</p> + +<h3 id="Répondre_aux_futures_requêtes">Répondre aux futures requêtes</h3> + +<p>Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.</p> + +<p>C'est ce que fait le second bloc de code dans <code>sw.js</code> :</p> + +<pre class="brush: js">self.addEventListener('fetch', function(e) { + console.log(e.request.url); + e.respondWith( + caches.match(e.request).then(function(response) { + return response || fetch(e.request); + }) + ); +});</pre> + +<ol> + <li> + <p>On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement <code>fetch</code> est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire).</p> + </li> + <li> + <p>À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête.</p> + </li> + <li> + <p>Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache).</p> + </li> + <li> + <p>Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec <code>undefined</code>. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant <code>fetch()</code>, et on retourne le résultat.</p> + </li> +</ol> + +<p>C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le <a href="https://serviceworke.rs/">service worker cookbook</a>. Et merci à Paul Kinlan pour son article <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Adding a Service Worker and Offline into your Web App</a>, qui a inspiré cet exemple.</p> + +<h3 id="Tester_lexemple_hors-ligne">Tester l'exemple hors-ligne</h3> + +<p>Pour tester notre <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">exemple de service worker</a>, rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit:</p> + +<ul> + <li>Débrancher votre réseau ou éteindre votre Wifi.</li> + <li>Si vous utilisez Firefox: Sélectionner <em>Fichier > Travailler hors-connexion</em>.</li> + <li>Si vous utilisez Chrome: Aller dans les DevTols, puis choisir <em>Application > Service Workers</em>, et cocher la case à cocher <em>Offline</em>.</li> +</ul> + +<p>Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB.</p> + +<h2 id="Sommaire">Sommaire</h2> + +<p>C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Web_Storage_API">Web storage API</a></li> + <li><a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB API</a></li> + <li><a href="/fr/docs/Web/HTTP/Cookies">Cookies</a></li> + <li><a href="/fr/docs/Web/API/Service_Worker_API">Service worker API</a></li> +</ul> + +<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> +</ul> diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html new file mode 100644 index 0000000000..ce68c6620b --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html @@ -0,0 +1,922 @@ +--- +title: Dessiner des éléments graphiques +slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics +tags: + - API + - Apprendre + - Articles + - Canvas + - Codage + - Débutant + - Graphismes + - JavaScript + - WebGL +translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td>Bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">introduction aux objets</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de bases des APIs côté client</a></td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Apprendre les bases pour dessiner sur des éléments <code><canvas></code> en utilisant JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Éléments_graphiques_sur_le_Web">Éléments graphiques sur le Web</h2> + +<p>Comme nous en avons parlé dans notre module HTML <a href="/fr/Apprendre/HTML/Multimedia_and_embedding">Multimédia et Intégration</a>, le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et <a href="/fr/docs/Web/SVG">SVG</a>.</p> + +<p>Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/Apprendre/JavaScript">JavaScript</a> pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java.</p> + +<p>La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit.</p> + +<p>L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module <a href="/fr/docs/Learn/JavaScript/Objects/la_construction_d_objet_en_pratique">La construction d'objet en pratique</a>:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}</p> + +<p>Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu <a href="/fr/Apprendre/WebGL">WebGL</a>, lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> + +<p>Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez par la suite suivre le tutoriel <a href="/fr/Apprendre/WebGL">WebGL</a>, qui couvre le code WebGL brut.</p> + +<div class="note"> +<p><strong>Note</strong>: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.</p> +</div> + +<h2 id="Apprentissage_actif_Débuter_avec_un_<canvas>">Apprentissage actif: Débuter avec un <canvas></h2> + +<p>Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page:</p> + +<pre class="brush: html"><canvas width="320" height="240"></canvas></pre> + +<p>Cela va créer un canvas sur la page d'une taille de 320 pixels par 240.</p> + +<p>À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas.</p> + +<pre class="brush: html"><canvas width="320" height="240"> + <p>Votre navigateur ne prend pas en charge canvas. Boo hoo!</p> +</canvas></pre> + +<p>Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix.</p> + +<h3 id="Crée_et_dimensionner_notre_canvas">Crée et dimensionner notre canvas</h3> + +<p>Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences.</p> + +<ol> + <li> + <p>Premièrement, copiez localement notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/0_canvas_start.html">0_canvas_start.html</a>, et ouvez-le dans votre éditeur de texte.</p> + </li> + <li> + <p>Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante:</p> + + <pre class="brush: html"><canvas class="myCanvas"> + <p>Ajouter un contenu alternatif approprié ici.</p> +</canvas></pre> + + <p>Nous avons ajouté un attribut <code>class</code> à l'élément <code><canvas></code> pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs <code>width</code> et <code>height</code> pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150.</p> + </li> + <li> + <p>Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}:</p> + + <pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight;</pre> + + <p>Ici, nous avons stocké une référence vers le canvas dans la variable <code>canvas</code>. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable <code>width</code> et la propriété <code>width</code> du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable <code>height</code> et la propriété <code>height</code> du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre!</p> + + <p>Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas).</p> + </li> + <li> + <p>Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à <code>hidden</code>. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document:</p> + + <pre class="brush: html"><style> + body { + margin: 0; + overflow: hidden; + } +</style></pre> + + <p>Les barres de défilement ne devraient plus être là.</p> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.</p> +</div> + +<h3 id="Obtenir_le_contexte_du_canvas_et_configuration_finale">Obtenir le contexte du canvas et configuration finale</h3> + +<p>Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un <em>contexte</em>. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer.</p> + +<p>En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément <code><script></code>:</p> + +<pre class="brush: js">var ctx = canvas.getContext('2d');</pre> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez choisir d'autres types de contexte comme <code>webgl</code> pour WebGL, <code>webgl2</code> pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.</p> +</div> + +<p>Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable <code>ctx</code> contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.</p> + +<p>Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:</p> + +<pre class="brush: js">ctx.fillStyle = 'rgb(0, 0, 0)'; +ctx.fillRect(0, 0, width, height);</pre> + +<p>Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Couleurs">valeur de couleur</a> tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables <code>width</code> et <code>height</code> allaient être utiles)!</p> + +<p>OK, notre template est prêt et il est temps de passer à autre chose.</p> + +<h2 id="Les_bases_du_canvas_2D">Les bases du canvas 2D</h2> + +<p>Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, <code>ctx</code>).</p> + +<p>De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.</p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="display: block; height: 220px; margin: 0px auto; width: 220px;"></p> + +<p>Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.</p> + +<h3 id="Rectangles_simples">Rectangles simples</h3> + +<p>Commençons avec quelques rectangles simples.</p> + +<ol> + <li> + <p>Tout d'abord, faites une copie de votre template (ou copiez localement le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a> si vous n'avez pas suivit les étapes précédentes).</p> + </li> + <li> + <p>Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript:</p> + + <pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.fillRect(50, 50, 100, 150);</pre> + + <p>Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4).</p> + </li> + <li> + <p>Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript:</p> + + <pre class="brush: js">ctx.fillStyle = 'rgb(0, 255, 0)'; +ctx.fillRect(75, 75, 100, 100);</pre> + + <p>Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.</p> + </li> + <li> + <p>Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant <code>rgba()</code>. La valeur <code>a</code> définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de <code>a</code> est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:</p> + + <pre class="brush: js">ctx.fillStyle = 'rgba(255, 0, 255, 0.75)'; +ctx.fillRect(25, 100, 175, 50);</pre> + </li> + <li> + <p>Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous!</p> + </li> +</ol> + +<h3 id="Traits_et_épaisseurs_de_ligne">Traits et épaisseurs de ligne</h3> + +<p>Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit <strong>strokes</strong> - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.</p> + +<ol> + <li> + <p>Ajoutez ce qui suit au bas de votre JavaScript:</p> + + <pre class="brush: js">ctx.strokeStyle = 'rgb(255, 255, 255)'; +ctx.strokeRect(25, 25, 175, 200);</pre> + </li> + <li> + <p>L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes:</p> + + <pre class="brush: js">ctx.lineWidth = 5;</pre> + + <p>Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais!</p> + </li> +</ol> + +<p>C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p> +</div> + +<h3 id="Dessiner_des_chemins">Dessiner des chemins</h3> + +<p>Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un <em>path</em> (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore.</p> + +<p>Commençons la section en faisant une nouvelle copie de notre template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), dans lequel nous allons dessiner le nouvel exemple.</p> + +<p>Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes:</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} — commence à dessiner un path au point où le stylo se situe sur le canvas. Sur un nouveau canvas, le stylo commence au point (0, 0).</li> + <li>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} — déplace le stylo à un point différent sur le canvas, sans tracer de ligne; le stylo "saute" simplement à une nouvelle position.</li> + <li>{{domxref("CanvasRenderingContext2D.fill", "fill()")}} — dessine une forme en remplissant le path définit jusqu'à présent.</li> + <li>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} — dessine un trait en suivant le path définit jusqu'à présent.</li> + <li>Vous pouvez utiliser les fonctionnalités telles que <code>lineWidth</code> et <code>fillStyle</code>/<code>strokeStyle</code> avec les paths aussi bien qu'avec les rectangles.</li> +</ul> + +<p>Typiquement, une manière de dessiner un trait simple ressemblerait à ça:</p> + +<pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.beginPath(); +ctx.moveTo(50, 50); +// tracer le trait +ctx.fill();</pre> + +<h4 id="Dessiner_des_lignes">Dessiner des lignes</h4> + +<p>Dessinons un triangle équilatéral sur le canvas.</p> + +<ol> + <li> + <p>Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés.</p> + + <pre class="brush: js">function degToRad(degrees) { + return degrees * Math.PI / 180; +};</pre> + </li> + <li> + <p>Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle.</p> + + <pre class="brush: js">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.beginPath(); +ctx.moveTo(50, 50);</pre> + </li> + <li> + <p>Maintenant ajoutez le bloc de code suivant:</p> + + <pre class="brush: js">ctx.lineTo(150, 50); +var triHeight = 50 * Math.tan(degToRad(60)); +ctx.lineTo(100, 50+triHeight); +ctx.lineTo(50, 50); +ctx.fill();</pre> + + <p>Parcourons ceci dans l'ordre:</p> + + <ol> + <li> + <p>D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x).</p> + </li> + <li> + <p>Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas.</p> + + <p>Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés.</p> + + <p>Pour ce qui est des côtés:</p> + + <ul> + <li>Le côté le plus long est appelé l'<strong>hypoténuse</strong></li> + <li>Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit <strong>adjacent</strong> à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné.</li> + <li>Le côté opposé à l'angle de 60 degrés est dit <strong>opposé</strong> à cet angle — c'est la hauteur que nous voulons calculer.</li> + </ul> + + <p> </p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p> + + <p>Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit <code>50 * Math.tan(degToRad(60))</code>. Nous utilisons notre fonction <code>degToRad()</code> pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.</p> + </li> + <li> + <p>Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers <code>(100, 50+triHeight)</code>. La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas.</p> + </li> + <li> + <p>L'instruction qui suit ajoute une ligne vers le point de départ du triangle.</p> + </li> + <li> + <p>Pour finir, nous appelons <code>ctx.fill()</code> pour finir le path et remplir la forme.</p> + </li> + </ol> + </li> +</ol> + +<h4 id="Dessiner_des_cercles">Dessiner des cercles</h4> + +<p>Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié.</p> + +<ol> + <li> + <p>Ajoutons un arc à notre canvas en ajoutant le code qui suit:</p> + + <pre class="brush: js">ctx.fillStyle = 'rgb(0, 0, 255)'; +ctx.beginPath(); +ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false); +ctx.fill();</pre> + + <p><code>arc()</code> prend six paramètres.</p> + + <ul> + <li>Les deux premiers spécifient la position du centre du cercle (X et Y respectivement).</li> + <li>Le troisième est le rayon du cercle</li> + <li>Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé)</li> + <li>Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (<code>false</code> pour le sens horaire).</li> + </ul> + + <div class="note"> + <p><strong>Note</strong>: 0 degrés est horizontalement vers la droite.</p> + </div> + </li> + <li> + <p>Ajoutons un autre arc:</p> + + <pre class="brush: js">ctx.fillStyle = 'yellow'; +ctx.beginPath(); +ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true); +ctx.lineTo(200, 106); +ctx.fill();</pre> + + <p>Le motif ici est très similaire, a deux différences près:</p> + + <ul> + <li>Nous avons mis le dernier paramètre de <code>arc()</code> à <code>true</code>, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre. Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez <code>true</code> à <code>false</code> et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.</li> + <li>Avant d'appeler <code>fill()</code>, nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.</li> + </ul> + </li> +</ol> + +<p>C'est tout pour le moment; votre exemple final devrait ressembler à ceci:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Le code finit est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Formes_géométriques">Dessiner des formes avec le canevas</a>.</p> +</div> + +<h3 id="Texte">Texte</h3> + +<p>Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), dans lequel nous allons dessiner le nouvel exemple.</p> + +<p>Le texte peut être avec deux méthodes:</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} — dessine un texte rempli.</li> + <li>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} — dessine un contour de texte.</li> +</ul> + +<p>Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (<strong>text box</strong>) — littéralement, la zone entourant le texte que vous écrivez.</p> + +<p>Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.</p> + +<p>Essayez d'ajouter le bloc suivant au bas de votre javaScript:</p> + +<pre class="brush: js">ctx.strokeStyle = 'white'; +ctx.lineWidth = 1; +ctx.font = '36px arial'; +ctx.strokeText('Canvas text', 50, 50); + +ctx.fillStyle = 'red'; +ctx.font = '48px georgia'; +ctx.fillText('Canvas text', 50, 150);</pre> + +<p>Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p> +</div> + +<p>Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans <a href="/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte avec canvas</a>.</p> + +<h3 id="Dessiner_des_images_sur_le_canvas">Dessiner des images sur le canvas</h3> + +<p>Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas.</p> + +<ol> + <li> + <p>Comme précédemment, créez une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/firefox.png">firefox.png</a> — dans le même répertoire.</p> + + <p>Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas.</p> + </li> + <li> + <p>Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:</p> + + <pre class="brush: js">var image = new Image(); +image.src = 'firefox.png';</pre> + + <p>Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.</p> + </li> + <li> + <p>Nous pourrions essayer maintenant d'inclure l'image en utilisant <code>drawImage()</code>, mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement <code>onload</code>, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:</p> + + <pre class="brush: js">image.onload = function() { + ctx.drawImage(image, 50, 50); +}</pre> + + <p>Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas.</p> + </li> + <li> + <p>Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de <code>drawImage()</code>. Mettez à jour votre ligne <code>ctx.drawImage()</code> comme suit:</p> + + <pre class="brush: js">ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);</pre> + + <ul> + <li>Le premier paramètre est la référence de l'image, comme précédemment.</li> + <li>Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné.</li> + <li>Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée.</li> + <li>Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas.</li> + <li>Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes.</li> + </ul> + </li> +</ol> + +<p>L'exemple final devrait ressembler à ça:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p> +</div> + +<h2 id="Boucles_et_animations">Boucles et animations</h2> + +<p>Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail.</p> + +<h3 id="Créer_une_boucle">Créer une boucle</h3> + +<p>Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> (ou tout autre type de boucle) comme n'importe quel autre code JavaScript.</p> + +<p>Construisons un exemple simple.</p> + +<ol> + <li> + <p>Créez une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) et ouvrez-le dans votre éditeur de texte.</p> + </li> + <li> + <p>Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas:</p> + + <pre class="brush: js">ctx.translate(width/2, height/2);</pre> + + <p>Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas.</p> + </li> + <li> + <p>Maintenant ajoutez le code suivant au bas du Javacript:</p> + + <pre class="brush: js">function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +function rand(min, max) { + return Math.floor(Math.random() * (max-min+1)) + (min); +} + +var length = 250; +var moveOffset = 20; + +for(var i = 0; i < length; i++) { + +}</pre> + + <p>Ici, nous implémentons</p> + + <ul> + <li>la même fonction <code>degToRad()</code> que nous avons vu dans l'exemple du triangle auparavant,</li> + <li>une fonction <code>rand()</code>, qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure,</li> + <li>les variables <code>length</code> et <code>moveOffset</code> (que nous verrons plus loin),</li> + <li>et une boucle <code>for</code> vide.</li> + </ul> + </li> + <li> + <p>L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle <code>for</code>, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle <code>for</code>:</p> + + <pre class="brush: js">ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)'; +ctx.beginPath(); +ctx.moveTo(moveOffset, moveOffset); +ctx.lineTo(moveOffset+length, moveOffset); +var triHeight = length/2 * Math.tan(degToRad(60)); +ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight); +ctx.lineTo(moveOffset, moveOffset); +ctx.fill(); + +length--; +moveOffset += 0.7; +ctx.rotate(degToRad(5));</pre> + + <p>Ainsi à chaque itération, on:</p> + + <ol> + <li>Définit <code>fillStyle</code> comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de <code>length</code>. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire.</li> + <li>Ouvre un path.</li> + <li>Déplace le stylo aux coordonnées de <code>(moveOffset, moveOffset)</code>; Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons.</li> + <li>Dessine une ligne aux coordonées de <code>(moveOffset+length, moveOffset)</code>. Cela dessine une ligne de longueur <code>length</code> parallèle à l'axe X.</li> + <li>Calcule la hauteur du triangle, comme vu auparavant.</li> + <li>Dessine une ligne vers le coin du bas du triangle.</li> + <li>Dessine une ligne vers le début du triangle.</li> + <li>Appelle <code>fill()</code> pour remplir le triangle.</li> + <li>Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération: + <ul> + <li>Diminue la valeur de <code>length</code> de 1, de sorte que les triangles deviennent de plus en plus petits;</li> + <li>Augmente un peu <code>moveOffset</code> pour que chaque triangle successif soit légèrement plus éloigné;</li> + <li>et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant.</li> + </ul> + </li> + </ol> + </li> +</ol> + +<p>C'est tout! L'exemple final devrait ressemble à ça:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}</p> + +<p>À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple:</p> + +<ul> + <li>Dessinez des rectangles ou des arcs au lieu des triangles, ou même des images externes.</li> + <li>Jouez avec les valeurs de <code>length</code> et <code>moveOffset</code>.</li> + <li>Utilisez des nombres aléatoires — grâce à la fonction <code>rand()</code> que nous avons inclue mais que nous n'avons pas utilisée.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p> +</div> + +<h3 id="Animations">Animations</h3> + +<p>L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain.</p> + +<p>Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau <code>requestAnimationFrame()</code> juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler <code>requestAnimationFrame()</code> ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé <code>requestAnimationFrame()</code> mais avant que votre fonction n'ait été exécutée.</p> + +<div class="note"> +<p><strong>Note:</strong> C'est une bonne pratique d'appeler <code>cancelAnimationFrame()</code> à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée.</p> +</div> + +<p>Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles.</p> + +<p>Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent (<a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">le voir en direct</a>, et voir <a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/bouncing-balls">le code source</a>). Le code de la boucle qui garde le tout en mouvement ressemble à ceci:</p> + +<pre class="brush: js">function loop() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; + ctx.fillRect(0, 0, width, height); + + while(balls.length < 25) { + var ball = new Ball(); + balls.push(ball); + } + + for(i = 0; i < balls.length; i++) { + balls[i].draw(); + balls[i].update(); + balls[i].collisionDetect(); + } + + requestAnimationFrame(loop); +} + +loop();</pre> + +<p>Nous lançons la fonction <code>loop()</code> une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction <code>loop()</code> s'occupe ensuite d'appeler <code>requestAnimationFrame(loop)</code> pour afficher la prochaine image de l'animation, et ce continuellement.</p> + +<p>Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.</p> + +<p>Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!</p> + +<p>En général, le processus pour animer un canvas implique les étapes suivantes:</p> + +<ol> + <li>Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).</li> + <li>Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées.</li> + <li>Dessiner les éléments graphiques que vous animez.</li> + <li>Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}}</li> + <li>Appeler <code>requestAnimationFrame()</code> pour planifier le dessin de l'image suivante de l'animation.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Nous ne couvrirons pas <code>save()</code> et <code>restore()</code> ici, mais elles sont bien expliquées dans notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a> (et ceux qui le suivent).</p> +</div> + +<h3 id="Une_animation_simple_de_personnage">Une animation simple de personnage</h3> + +<p>Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial.</p> + +<ol> + <li> + <p>Faites une nouvelle copie du template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/walk-right.png">walk-right.png</a> dans le même répertoire.</p> + </li> + <li> + <p>Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas:</p> + + <pre class="brush: js">ctx.translate(width/2, height/2);</pre> + </li> + <li> + <p>Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement <code>onload</code> pour appeler la fonction <code>draw()</code> quand l'image sera chargée:</p> + + <pre class="brush: js">var image = new Image(); +image.src = 'walk-right.png'; +image.onload = draw;</pre> + </li> + <li> + <p>Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher.</p> + + <pre class="brush: js">var sprite = 0; +var posX = 0;</pre> + + <p>L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article <a href="http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using using CSS animation">Create a sprite sheet walk cycle using using CSS animation</a> — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/14847/walk-right.png" style="display: block; height: 148px; margin: 0px auto; width: 612px;"></p> + + <p>Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser <code>drawImage()</code> pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.</p> + </li> + <li> + <p>Insérons maintenant une fonction <code>draw()</code> vide au bas du code, prête à être remplie de code:</p> + + <pre class="brush: js">function draw() { + +};</pre> + </li> + <li> + <p>Le reste du code dans cette section va dans <code>draw()</code>. Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant <code>-(width/2), -(height/2)</code> puisque nous avons définit l'origine du canvas à <code>width/2, height/2</code> plus tôt.</p> + + <pre class="brush: js">ctx.fillRect(-(width/2), -(height/2), width, height);</pre> + </li> + <li> + <p>Ensuite, nous allons dessinons notre image en utilisant <code>drawImage()</code> — la version à 9 paramètres. Ajoutez ce qui suit:</p> + + <pre class="brush: js">ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);</pre> + + <p>Comme vous pouvez le voir:</p> + + <ul> + <li>Nous spécifions <code>image</code> comme étant l'image à inclure.</li> + <li>Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut <code>sprite</code> multiplié par 102 (où <code>sprite</code> est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0.</li> + <li>Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148.</li> + <li>Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est <code>0+posX</code>, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de <code>posX</code>.</li> + <li>Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur.</li> + </ul> + </li> + <li> + <p>Maintenant, nous allons changer la valeur de <code>sprite</code> après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction <code>draw()</code>:</p> + + <pre class="brush: js"> if (posX % 13 === 0) { + if (sprite === 5) { + sprite = 0; + } else { + sprite++; + } + }</pre> + + <p>Nous enveloppons le bloc entier de <code>if (posX % 13 === 0) { ... }</code>. On utilise l'opérateur modulo (<code>%</code>) (aussi connu sous le nom d'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_()">opérateur reste</a>) pour vérifier si la valeur de <code>posX</code> peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant <code>sprite</code> (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (<code>requestAnimationFrame()</code> appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite!</p> + + <p>À l'intérieur du bloc, on utilise une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if ... else</a></code> pour vérifier si la valeur de <code>sprite</code> vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse <code>sprite</code> à 0; sinon on l'incrémente de 1.</p> + </li> + <li> + <p>Ensuite, nous devons déterminer comment modifier la valeur de <code>posX</code> sur chaque image — ajoutez le bloc de code à la suite:</p> + + <pre class="brush: js"> if(posX > width/2) { + newStartPos = -((width/2) + 102); + posX = Math.ceil(newStartPos / 13) * 13; + console.log(posX); + } else { + posX += 2; + }</pre> + + <p>Nous utilisons une autre instruction <code>if ... else</code> pour voir si la valeur de <code>posX</code> est plus grande que <code>width/2</code>, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit <code>posX</code> au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner!</p> + + <p>Si notre personnage n'a pas atteint le bord de l'écran, on incrémente <code>posX</code> de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera.</p> + </li> + <li> + <p>Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction <code>draw()</code>:</p> + + <pre class="brush: js">window.requestAnimationFrame(draw);</pre> + </li> +</ol> + +<p>Et voilà! L'exemple final devrait ressembler à ça:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p> + +<div class="note"> +<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p> +</div> + +<h3 id="Une_application_simple_de_dessin">Une application simple de dessin</h3> + +<p>Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code.</p> + +<p>L'exemple peut être trouvé sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html">8_canvas_drawing_app.html</a>, et vous pouvez jouer avec en direct ci-dessous:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}</p> + +<p>Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: <code>curX</code>, <code>curY</code>, et <code>pressed</code>. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement <code>onmousemove</code>, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement <code>onmousedown</code> et <code>onmouseup</code> pour changer la valeur de <code>pressed</code> à <code>true</code> quand le bouton de la souris est pressé, et de nouveau à <code>false</code> quand il est relaché.</p> + +<pre class="brush: js">var curX; +var curY; +var pressed = false; + +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +}</pre> + +<p>Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment:</p> + +<pre class="brush: js">clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0, 0, 0)'; + ctx.fillRect(0, 0, width, height); +}</pre> + +<p>La boucle du dessin est relativement simple cette fois-ci — si <code>pressed</code> est à <code>true</code>, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle.</p> + +<pre class="brush: js">function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<div class="note"> +<p><strong>Note</strong>: Les types d'{{htmlelement("input")}} <code>range</code> et <code>color</code> sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type <code>color</code>. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.</p> +</div> + +<h2 id="WebGL">WebGL</h2> + +<p>Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'<a href="/fr/Apprendre/WebGL">API WebGL</a>, qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}.</p> + +<p>WebGL est basé sur le langage de programmation graphique <a href="/fr/docs/Glossaire/OpenGL">OpenGL</a>, et permet de communiquer directement avec le <a href="/fr/docs/Glossaire/GPU">GPU</a> de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant.</p> + +<h3 id="Utiliser_une_bibliothèque">Utiliser une bibliothèque</h3> + +<p>De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> ou <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>. La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut.</p> + +<p>Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut.</p> + +<h3 id="Recréer_notre_cube">Recréer notre cube</h3> + +<p>Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt.</p> + +<ol> + <li> + <p>Pour commencer, créez une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/index.html">index.html</a> dans un nouveau répertoire, et sauvegardez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/metal003.png">metal003.png</a> dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard.</p> + </li> + <li> + <p>Ensuite, créez un nouveau fichier <code>main.js</code>, toujours dans le même répertoire.</p> + </li> + <li> + <p>Si vous ouvrez <code>index.html</code> dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute <code>three.min.js</code> à la page, et le second ajoute notre fichier <code>main.js</code> à la page. Vous devez <a href="https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js">télécharger la bibliothèque three.min.js</a> et la sauvegarder dans le même répertoire que précédemment.</p> + </li> + <li> + <p>Maintenant que nous avons inclus <code>three.js</code> dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans <code>main.js</code>. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier <code>main.js</code>:</p> + + <pre class="brush: js">var scene = new THREE.Scene();</pre> + + <p>Le constructeur <code><a href="https://threejs.org/docs/index.html#api/scenes/Scene">Scene()</a></code> crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher.</p> + </li> + <li> + <p>Ensuite, nous avons besoin d'une <strong>caméra</strong> pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite:</p> + + <pre class="brush: js">var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); +camera.position.z = 5; +</pre> + + <p>Le constructeur <code><a href="https://threejs.org/docs/index.html#api/cameras/PerspectiveCamera">PerspectiveCamera()</a></code> prend quatre arguments:</p> + + <ul> + <li>Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés.</li> + <li>Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas).</li> + <li>Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir.</li> + <li>Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets.</li> + </ul> + + <p>Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.</p> + </li> + <li> + <p>Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur <code><a href="https://threejs.org/docs/index.html#api/renderers/WebGLRenderer">WebGLRenderer()</a></code> — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:</p> + + <pre class="brush: js">var renderer = new THREE.WebGLRenderer(); +renderer.setSize(window.innerWidth, window.innerHeight); +document.body.appendChild(renderer.domElement);</pre> + + <p>La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre.</p> + </li> + <li> + <p>Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript:</p> + + <pre class="brush: js">var cube; + +var loader = new THREE.TextureLoader(); + +loader.load( 'metal003.png', function (texture) { + texture.wrapS = THREE.RepeatWrapping; + texture.wrapT = THREE.RepeatWrapping; + texture.repeat.set(2, 2); + + var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4); + var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } ); + cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + draw(); +});</pre> + + <p>Il y a un peu plus à encaisser ici, alors allons-ici par étapes:</p> + + <ul> + <li>Nous créons d'abord une variable globale <code>cube</code> pour pouvoir accéder à notre cube de n'importe où dans notre code.</li> + <li>Ensuite, nous créons un nouvel objet <code><a href="https://threejs.org/docs/index.html#api/loaders/TextureLoader">TextureLoader</a></code>, et appellons <code>load()</code> dessus. La fonction <code>load()</code> prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée.</li> + <li>À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet <code><a href="https://threejs.org/docs/index.html#api/textures/Texture">texture</a></code> pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube.</li> + <li>Ensuite, nous créons un nouvel objet <code><a href="https://threejs.org/docs/index.html#api/geometries/BoxGeometry">BoxGeometry</a></code> et <code><a href="https://threejs.org/docs/index.html#api/materials/MeshLambertMaterial">MeshLambertMaterial</a></code>, que nous passons à un <code><a href="https://threejs.org/docs/index.html#api/objects/Mesh">Mesh</a></code> pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface).</li> + <li>Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction <code>draw()</code> pour commencer l'animation.</li> + </ul> + </li> + <li> + <p>Avant de définir la fonction <code>draw()</code>, nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code:</p> + + <pre class="brush: js">var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light +scene.add(light); + +var spotLight = new THREE.SpotLight('rgb(255, 255, 255)'); +spotLight.position.set( 100, 1000, 1000 ); +spotLight.castShadow = true; +scene.add(spotLight);</pre> + + <p>Un objet <code><a href="https://threejs.org/docs/index.html#api/lights/AmbientLight">AmbientLight</a></code> est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet <code><a href="https://threejs.org/docs/index.html#api/lights/AmbientLight">SpotLight</a></code>, d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait).</p> + </li> + <li> + <p>Pour finir, ajoutons notre fonction <code>draw()</code> au bas du code:</p> + + <pre class="brush: js">function draw() { + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + renderer.render(scene, camera); + + requestAnimationFrame(draw); +}</pre> + + <p>C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons <code>requestAnimationFrame()</code> pour planifier le dessin de notre prochaine image.</p> + </li> +</ol> + +<p>Jetons un coup d'oeil rapide au produit fini:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> + +<p>Vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-cube">trouver le code terminé sur GitHub</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">le voir en direct</a>). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!</p> +</div> + +<h2 id="Sommaire">Sommaire</h2> + +<p>À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous!</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p>Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin.</p> + +<ul> + <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a> — Une série de tutoriels très détaillés qui explique ce que vous devriez savoir à propos du canvas 2D de manière beaucoup plus poussée qu'ici. Lecture indispensable.</li> + <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a> — Une série de tutoriels qui enseigne les bases de la programmation WebGL brute.</li> + <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construire une démo basique avec Three.js</a> — tutoriel Three.js basique. Nous avons également les guides équivalents pour <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> et <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>.</li> + <li><a href="/fr/docs/Jeux">Développement de jeux vidéos</a> — La page d'atterrisage sur MDN pour le développement de jeux web. Il y a quelques tutoriels et techniques disponibles liés au canvas 2D et 3D — voir les options du menu Techniques et Tutoriels.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<ul> + <li><a href="https://github.com/mdn/violent-theremin">Violent theramin</a> — Utilise l'API Web Audio pour générer des sons, et Canvas pour générer une visualisation.</li> + <li><a href="https://github.com/mdn/voice-change-o-matic">Voice change-o-matic</a> — Utilise un canvas pour visualiser en temps réel les données audio de l'API Web Audio.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<p> </p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> +</ul> diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html new file mode 100644 index 0000000000..2acc2ed9b3 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -0,0 +1,397 @@ +--- +title: Récupérer des données du serveur +slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data +tags: + - API + - Apprendre + - Article + - Codage + - Débutant + - Fetch + - JavaScript + - XHR + - data +translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Notions de base de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), les <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">notions de bases des APIs côté client</a></td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre à récupérer des données du serveur web et les utiliser pour mettre à jour le contenu de la page.</td> + </tr> + </tbody> +</table> + +<h2 id="Quel_est_le_problème">Quel est le problème?</h2> + +<p>À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.</p> + +<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p> + +<p>Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.</p> + +<h3 id="Larrivée_dAjax">L'arrivée d'Ajax</h3> + +<p>Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du <a href="/fr/docs/Web/HTML">HTML</a>, {{glossary("XML")}}, <a href="/fr/docs/Learn/JavaScript/Objects/JSON">JSON</a>, ou texte brut) et de les afficher dans la page web.</p> + +<p>Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>. Elles permettent de réaliser des requêtes <a href="/fr/docs/Web/HTTP">HTTP</a> pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.</p> + +<div class="note"> +<p><strong>Note </strong>: Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise <code>XMLHttpRequest</code> ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.</p> +</div> + +<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p> + +<p>Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :</p> + +<ol> + <li>Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...</li> + <li>Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.</li> +</ol> + +<p>C'est une bonne chose puisque :</p> + +<ul> + <li>La mise à jour de la page est beaucoup plus rapide et vous n'avez pas à attendre que la page se rafraîchisse, si bien que le site paraît être plus rapide et plus réactif.</li> + <li>Moins de données doivent être téléchargées pour mettre à jour la page, et donc moins de bande passante est utilisée. Cela ne fait peut-être pas une grande différence sur un ordinateur de bureau, mais cela peut devenir un problème majeur sur mobile ou dans les pays en développement, qui n'ont pas partout un service Internet ultra-rapide.</li> +</ul> + +<p>Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.</p> + +<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p> + +<h2 id="Une_requête_Ajax_basique">Une requête Ajax basique</h2> + +<p>Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>. Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.</p> + +<p>Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.</p> + +<h3 id="XMLHttpRequest">XMLHttpRequest</h3> + +<p><code>XMLHttpRequest</code> (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.</p> + +<ol> + <li> + <p>Pour commencer cet exemple, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> et des quatre fichiers texte — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.</p> + </li> + <li> + <p>À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction <code>updateDisplay()</code>.</p> + + <pre class="brush: js">var verseChoose = document.querySelector('select'); +var poemDisplay = document.querySelector('pre'); + +verseChoose.onchange = function() { + var verse = verseChoose.value; + updateDisplay(verse); +};</pre> + </li> + <li> + <p>Définissons maintenant la fonction <code>updateDisplay()</code>. Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction :</p> + + <pre class="brush: js">function updateDisplay(verse) { + +};</pre> + </li> + <li> + <p>Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut <code>value</code> s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.</p> + + <p>Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes">concaténation de chaînes</a>. Ajoutez les lignes suivantes à l'intérieur de la fonction <code>updateDisplay()</code> :</p> + + <pre class="brush: js">verse = verse.replace(" ", ""); +verse = verse.toLowerCase(); +var url = verse + '.txt';</pre> + </li> + <li> + <p>Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons <code>request</code> pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes :</p> + + <pre class="brush: js">var request = new XMLHttpRequest();</pre> + </li> + <li> + <p>Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la <a href="/fr/docs/Web/HTTP/Méthode">méthode HTTP</a> et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode <code><a href="/fr/docs/Web/HTTP/Méthode/GET">GET</a></code> et passer notre variable <code>url</code> pour URL. Ajoutez ceci à la suite de la ligne précédente :</p> + + <pre class="brush: js">request.open('GET', url);</pre> + </li> + <li> + <p>Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme <code>text</code>. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite :</p> + + <pre class="brush: js">request.responseType = 'text';</pre> + </li> + <li> + <p>Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété <code>response</code> de l'objet XHR utilisé.</p> + + <p>Ajoutez le bloc de code qui suit toujours au bas de la fonction <code>updateDisplay()</code>. Vous verrez qu'à l'intérieur du gestionnaire d'événément <code>onload</code>, nous assignons la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de <code>poemDisplay</code> (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.</p> + + <pre class="brush: js">request.onload = function() { + poemDisplay.textContent = request.response; +};</pre> + </li> + <li> + <p>Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :</p> + + <pre class="brush: js">request.send();</pre> + + <p>Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester.</p> + </li> + <li> + <p>Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante <code></script></code>), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur :</p> + + <pre class="brush: js">updateDisplay('Verse 1'); +verseChoose.value = 'Verse 1';</pre> + </li> +</ol> + +<h3 id="Servir_votre_exemple_depuis_un_serveur">Servir votre exemple depuis un serveur</h3> + +<p>Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">La sécurité d'un site web</a>).</p> + +<p>Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez <a href="/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local">Comment configurer un serveur de test local?</a></p> + +<h3 id="Fetch">Fetch</h3> + +<p>L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie.</p> + +<p>Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.</p> + +<ol> + <li> + <p>Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> et les quatre fichiers texte — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — à l'intérieur).</p> + </li> + <li> + <p>À l'intérieur de la fonction <code>updateDisplay()</code>, vous avez le code XHR suivant :</p> + + <pre class="brush: js">var request = new XMLHttpRequest(); +request.open('GET', url); +request.responseType = 'text'; + +request.onload = function() { + poemDisplay.textContent = request.response; +}; + +request.send();</pre> + </li> + <li> + <p>Remplacez-le avec ce qui suit :</p> + + <pre class="brush: js">fetch(url).then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + </li> + <li> + <p>Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR — pourvu que vous utilisiez un navigateur moderne.</p> + </li> +</ol> + +<h4 id="Que_se_passe-t-il_dans_le_code_Fetch">Que se passe-t-il dans le code Fetch?</h4> + +<p>Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler <code>.send()</code> — la requête est exécutée directemment.</p> + +<p>Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de <code>fetch()</code> — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. <code>fetch()</code> retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons <code>.then()</code> pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément <code>onload</code> dans la version XHR.</p> + +<p>La fonction définie dans le <code>.then()</code> reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par <code>fetch()</code> est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de <code>request.responseType = 'text'</code> dans la version XHR.</p> + +<p>Vous verrez que <code>text()</code> retourne également une promesse, nous y chaînons donc un nouveau <code>.then()</code>, à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout.</p> + +<p>Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré.</p> + +<h3 id="À_propos_des_promesses">À propos des promesses</h3> + +<p>Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.</p> + +<p>Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.</p> + +<h4 id="Promesse_1">Promesse 1</h4> + +<pre class="brush: js">fetch(url).then(function(response) { + //... +});</pre> + +<p>Si l'on traduit en bon français les instructions JavaScript, on pourrait dire</p> + +<ul> + <li><code>fetch(url)</code> : récupérer la ressource située à l'adresse <code>url</code></li> + <li><code>.then(function() { ... })</code>: quand c'est fait, exécuter la fonction spécifiée</li> +</ul> + +<p>On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.</p> + +<p>La fonction passée à <code>then()</code> n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur).</p> + +<p>Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent :</p> + +<pre class="brush: js">var myFetch = fetch(url); + +myFetch.then(function(response) { + //... +});</pre> + +<p>Parce que la méthode <code>fetch()</code> retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du <code>.then()</code> reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :</p> + +<pre class="brush: js">fetch(url).then(function(dogBiscuits) { + //... +});</pre> + +<p>Mais il est plus logique de donner un nom de paramètre qui décrit son contenu !</p> + +<h4 id="Promesse_2">Promesse 2</h4> + +<p>Voyons maintenant la fonction appelé dans <code>.then()</code>:</p> + +<pre class="brush: js">function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +}</pre> + +<p>L'objet <code>response</code> a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.</p> + +<p>À l'intérieur de ce dernier <code>.then()</code>, nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de l'élément {{htmlelement("pre")}} à la valeur du texte.</p> + +<h4 id="Chaîner_les_then">Chaîner les then()</h4> + +<p>Notez que le résultat de la fonction appelée par le <code>.then()</code> est également retourné par ce dernier, nous pouvons donc mettre les <code>.then()</code> bout à bout, en passant le résultat du bloc précédent au prochain.</p> + +<p>Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :</p> + +<pre class="brush: js">fetch(url).then(function(response) { + return response.text() +}).then(function(text) { + poemDisplay.textContent = text; +});</pre> + +<p>Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction <code><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">return</a></code> pour retourner <code>response.text()</code>, et ce résultat est passé au prochain <code>.then()</code>.</p> + +<h3 id="Quel_mécanisme_devriez-vous_utiliser">Quel mécanisme devriez-vous utiliser?</h3> + +<p>Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.</p> + +<p>Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix.</p> + +<p>Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore.</p> + +<h2 id="Un_exemple_plus_complexe">Un exemple plus complexe</h2> + +<p>Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">exemple en direct sur GitHub</a>, et <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">voir le code source</a>.</p> + +<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p> + +<p>Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.</p> + +<p>Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">can-script.js</a>). Nous allons expliquer le code Fetch.</p> + +<h4 id="Premier_Fetch">Premier Fetch</h4> + +<p>Le premier bloc qui utilise Fetch se trouve au début du JavaScript :</p> + +<pre class="brush: js">fetch('products.json').then(function(response) { + if(response.ok) { + response.json().then(function(json) { + products = json; + initialize(); + }); + } else { + console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText); + } +});</pre> + +<p>Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut <code>true</code> si le statut de la réponse était OK (<a href="/fr/docs/Web/HTTP/Status/200">statut HTTP 200, "OK"</a>), ou <code>false</code> sinon.</p> + +<p>Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut.</p> + +<p>Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation.</p> + +<p>Vous pouvez tester le cas d'échec vous-même :</p> + +<ol> + <li>Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">fichier ZIP can-store</a>)</li> + <li>Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})</li> + <li>Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.</li> + <li>Maintenant, chargez le fichier index dans votre navigateur (via <code>localhost:8000</code>) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).</li> +</ol> + +<h4 id="Deuxième_Fetch">Deuxième Fetch</h4> + +<p>Le deuxième bloc Fetch se trouve dans la fonction <code>fetchBlob()</code>:</p> + +<pre class="brush: js">fetch(url).then(function(response) { + if(response.ok) { + response.blob().then(function(blob) { + objectURL = URL.createObjectURL(blob); + showProduct(objectURL, product); + }); + } else { + console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText); + } +});</pre> + +<p>Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est <a href="/fr/docs/Web/API/Blob">Blob</a> — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.</p> + +<p>Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :</p> + +<pre>blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre> + +<h3 id="Challenge_une_version_XHR_de_Can_Store">Challenge : une version XHR de Can Store</h3> + +<p>Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">copie du fichier ZIP</a> et essayiez de modifier le JavaScript en conséquence.</p> + +<p>Quelques conseils qui pourraient s'avérer utiles :</p> + +<ul> + <li>Vous pourriez trouver la référence {{domxref("XMLHttpRequest")}} utile.</li> + <li>Vous allez devoir utiliser le même modèle que vous avez vu plus tôt dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">XHR-basic.html</a>.</li> + <li>Vous devrez ajouter la gestion des erreurs que nous vous avons montré dans la version Fetch de Can Store : + <ul> + <li>La réponse se situe dans <code>request.response</code> une fois que l'événement <code>load</code> a été déclenché et non dans une promesse.</li> + <li>Le meilleur équivalent à <code>response.ok</code> en XHR est de vérifier si {{domxref("XMLHttpRequest.status","request.status")}} vaut 200 ou si {{domxref("XMLHttpRequest.readyState","request.readyState")}} est égal à 4.</li> + <li>Les propriétés permettant d'obtenir le status et le message en cas d'erreur sont toujours <code>status</code> et <code>statusText</code> mais elles se situent sur l'objet <code>request</code> (XHR) et non sur l'objet <code>response</code>.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Note </strong>: Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">voir le code source</a>, ou <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">voir en direct</a>).</p> +</div> + +<h2 id="Sommaire">Sommaire</h2> + +<p>Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p>Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants:</p> + +<ul> + <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Ajax — Premiers pas</a></li> + <li><a href="/fr/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promesses</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/JSON">Manipuler des données JSON</a></li> + <li><a href="/fr/docs/Web/HTTP/Aperçu">Un aperçu de HTTP</a></li> + <li><a href="/fr/docs/Learn/Server-side">Programmation de sites web, côté serveur</a></li> +</ul> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<div> +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> +</ul> +</div> diff --git a/files/fr/learn/javascript/client-side_web_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..d5d6f410e3 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,51 @@ +--- +title: API web utilisées côté client +slug: Apprendre/JavaScript/Client-side_web_APIs +tags: + - API + - API Web + - Apprendre + - Articles + - Codage + - DOM + - Débutant + - Graphismes + - JavaScript + - Localisation + - Media + - Module + - données +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</p> + +<h2 id="Prérequis">Prérequis</h2> + +<p>Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> et <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objets JavaScript</a>). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.</p> + +<p>Une connaissance basique de <a href="/en-US/docs/Learn/HTML">HTML</a> et <a href="/en-US/docs/Learn/CSS">CSS</a> serait aussi utile.</p> + +<div class="note"> +<p><strong>Remarque</strong>: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></dt> + <dd>Tout d'abord, nous survolerons du 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 API et leur utilisation.</dd> + <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></dt> + <dd>Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</dd> + <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></dt> + <dd>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">API Fetch</a>.</dd> + <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></dt> + <dd>Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.</dd> + <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></dt> + <dd>Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</dd> + <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></dt> + <dd>HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</dd> + <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></dt> + <dd>Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.</dd> +</dl> 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 new file mode 100644 index 0000000000..b7e2ed71b4 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,307 @@ +--- +title: Introduction aux API du Web +slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction +tags: + - API + - API Web + - Apprentissage + - Article + - Codage + - Débutant + - Navigateur + - Objet + - Tierce partie + - côté‑client +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +<div>{{LearnSidebar}}</div> + +<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> + +<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> +</table> + +<h2 id="C'est_quoi_une_API">C'est quoi 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>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><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>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> + +<h3 id="APIs_JavaScript_côté_client">APIs 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> + +<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> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 421px; margin: 0px auto; width: 672px;"></p> + +<h3 id="Relations_entre_JavaScript_APIs_et_autres_outils_JavaScript">Relations entre JavaScript, APIs 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> + +<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> +</ul> + +<h2 id="Que_peuvent_faire_les_API">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> + +<h3 id="API_de_navigateur_courantes">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> +</ul> + +<h3 id="APIs_tierces_courantes">APIs 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> + +<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> +</div> + +<h2 id="Comment_les_API_fonctionnent-elles">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> + +<h3 id="Elles_sont_fondées_sur_des_objets">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> + +<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> + +<p>Prenons pour exemple l'API Géolocalisation — c'est une API très simple composée de quelques simples objets :</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> +</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> + +<h3 id="Elles_utilisent_des_fonctions_de_rappel">Elles utilisent des fonctions de rappel</h3> + +<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> + +<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> + +<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition(); +var myLatitude = position.coords.latitude;</pre> + +<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> + +<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> + +<h3 id="Pour_les_APIs_tierces_elles_doivent_être_inclues">Pour les APIs tierces, elles doivent être inclues</h3> + +<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> + +<pre class="brush: html"><script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script></pre> + +<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> + +<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> + +<pre class="brush: js">var latlng = new google.maps.LatLng( + position.coords.latitude, + position.coords.longitude +);</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> + +<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> + +<pre class="brush: js">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> + +<p>Ceci fait, notre carte s'affiche.</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> + +<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> + +<h3 id="Elles_ont_des_points_d'entrée_identifiables">Elles ont des points d'entrée identifiables</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>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> + +<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> + +<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> + +<pre class="brush: js">var canvas = document.querySelector('canvas'); +var 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> + +<pre class="brush: js">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +};</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> +</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> + +<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>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>À 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> + +<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +var request = new XMLHttpRequest(); +request.open('GET', requestURL); +request.responseType = 'json'; +request.send(); + +request.onload = function() { + var 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> + +<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> + +<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>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> + +<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>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><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>De même, l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications </a>demande une autorisation:</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> + +<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>{{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> + +<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> +</ul> + +<p> </p> diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..79911663f8 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,332 @@ +--- +title: Manipuler des documents +slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents +tags: + - API + - Apprendre + - Article + - Codage + - DOM + - Document Object Model + - Débutant + - JavaScript + - Navigator + - WebAPI + - Window +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td>Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.</td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Sa familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document</td> + </tr> + </tbody> +</table> + +<h2 id="Les_principaux_composants_du_navigateur">Les principaux composants du navigateur</h2> + +<p>Les navigateurs web sont des logiciels très compliqués avec beaucoup de pièces mobiles, dont beaucoup qui ne peuvent pas être contrôlées ou manipulées par un développeur web en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou autre information sensible, et se connecter à des sites Web comme si c'était vous?</p> + +<p>Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire pleins de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'oeil au diagramme suivant, il représente les principaux composants du navigateur directemment impliqués dans l'affichage des pages web:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>La <em>fenêtre</em> est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet {{domxref("Window")}}. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un <a href="/fr/Apprendre/JavaScript/Building_blocks/Evènements">gestionnaire d'événément</a> à la fenêtre en cours, et plus encore.</li> + <li>La <em>navigateur</em> est l'état et l'identité du navigateur (le user-agent par exemple) tel qu'il existe sur le web. En JavaScript, il est représenté par l'objet {{domxref("Navigator")}}. Vous pouvez utiliser cet objet pour récupérer des choses telles que la géolocalisation, les préférences de langages de l'utilisateur, un flux vidéo en provenance de la webcam de l'utilisateur, etc.</li> + <li>Le <em>document</em> (accédé par le DOM dans les navigateurs) est la page en cours, chargée dans la fenêtre. Il est représenté en JavaScript par l'objet {{domxref("Document")}}. Vous pouvez utiliser cet objet pour retourner et manipuler le HTML et CSS qui composent le document, par exemple: récupérer un élément dans le DOM, changer son texte, appliquer de nouveaux style dessus, créer de nouveaux éléments et les ajouter à un élément comme enfant, ou même en supprimer.</li> +</ul> + +<p>Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.</p> + +<h2 id="Le_modèle_objet_du_document_(Document_Object_Model)">Le modèle objet du document (Document Object Model)</h2> + +<p>Le document chargé dans l'onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer les informations de style ou pour corriger les éléments lorsque le HTML est invalide, tandis qu'un développeur peut l'utiliser pour manipuler la page une fois qu'elle a été chargée.</p> + +<p>Nous avons créé une simple page d'example, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">voir en direct</a>). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément {{htmlelement("section")}}, à l'intérieur duquel se situe une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple DOM example</title> + </head> + <body> + <section> + <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> + </section> + </body> +</html></pre> + +<p>Le DOM, d'autre part, ressemble à ça:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: Ce diagramme du DOM a été créé en utilisant le <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> de Ian Hickson.</p> +</div> + +<p>Vous pouvez voir ici que chaque élément et donnée texte dans le document a sa propre entrée dans l'arbre — appelé un <strong>noeud</strong> (node). Vous rencontrerez également différents termes pour décrire différents type de noeuds et leur position dans l'arbre par rapport à d'autres:</p> + +<ul> + <li><strong>Noeud élément (element node)</strong>: N'importe quel élément, tel qu'il existe dans le DOM..</li> + <li><strong>Racine (root)</strong>: Le noeud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du noeud <code>HTML</code> (d'autres langages de balilsage tels que SVG et XML auront des racines différentes).</li> + <li><strong>Enfant (child)</strong>: Un noeud <em>directement</em> à l'intérieur d'un autre noeud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> dans l'exemple ci-dessus.</li> + <li><strong>Descendant (descendent)</strong>: Un noeud <em>n'importe où</em> à l'intérieur d'un autre noeud. Par exemple, <code>IMG</code> est un enfant de <code>SECTION</code> mais aussi un de ses descendants. <code>IMG</code> n'est pas un enfant de <code>BODY</code>, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants.</li> + <li><strong>Parent (parent)</strong>: Un noeud qui a un autre noeud <em>directement</em> à l'intérieur. Par exemple, <code>BODY</code> est le parent de <code>SECTION</code>.</li> + <li><strong>Ancêtre (ancestor)</strong>: Un noeud qui a un autre noeud <em>n'importe où</em> à l'intérieur. Par exemple, <code>BODY</code> est l'ancêtre d'<code>IMG</code>.</li> + <li><strong>Frère (sibling)</strong>: Des noeuds qui ont le même parent. Par exemple, <code>IMG</code> et <code>P</code> sont frères.</li> + <li><strong>Texte (text node)</strong>: Noeud constitué par une chaîne de caractères.</li> +</ul> + +<p>Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié CSS (ex. sélecteur descendant, sélecteur enfant).</p> + +<h2 id="Apprentissage_actif_Manipulations_basiques_du_DOM">Apprentissage actif: Manipulations basiques du DOM</h2> + +<p>Pour commencer l'apprentissage de la manipulation du DOM, commençons par la pratique.</p> + +<ol> + <li>Faites une copie locale de la page <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> et de l'<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">image</a> qui l'accompagne.</li> + <li>Ajoutez un élément <code><script></script></code> juste avant la balise fermante <code></body></code>.</li> + <li>Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence vers cet élément dans une variable. À l'intérieur de votre élément <code><script></code>, ajoutez la ligne suivante: + <pre class="brush: js">var link = document.querySelector('a');</pre> + </li> + <li>Maintenant que nous avons une référence vers l'élément, nous pouvous commencer à le manipuler en utilisant les propriétés et les méthodes disponibles dessus (celles-ci sont définies sur les interfaces telles que {{domxref("HTMLAnchorElement")}} dans le cas d'un élément {{htmlelement("a")}}, et sur les interfaces plus génériques {{domxref("HTMLElement")}}, et {{domxref("Node")}} — qui représente tout noeud dans le DOM). Tout d'abord, nous allons changer le texte du lien en mettant à jour la valeur de la propriété {{domxref("Node.textContent")}}. Ajoutez la ligne suivante à la suite de la précédente: + <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre> + </li> + <li>Nous allons également changer l'URL où dirige le lien, pour qu'il ne dirige pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante au bas de votre JavaScript: + <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre> + </li> +</ol> + +<div> +<p>Notez que, comme beaucoup de choses en JavaScript, il y a plusieurs façons de sélectionner et récupérer une référence vers un élément dans une variable. {{domxref("Document.querySelector()")}} est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à <code>querySelector()</code> que nous avons utilisé plus tôt récupère le premier élément {{htmlelement("a")}} qui apparaît dans le document. Si vous vouliez récupérer plusieurs éléments, vous auriez pu utiliser {{domxref("Document.querySelectorAll()")}}, qui récupère tous les éléments du document qui correspondent au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un <a href="/fr/docs/Learn/JavaScript/First_steps/tableaux">tableau</a> appelé un NodeList.</p> + +<p>Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que:</p> + +<ul> + <li>{{domxref("Document.getElementById()")}}, qui sélectionne un élément avec un attribut <code>id</code> donné, par exemple <code><p id="myId">My paragraph</p></code>. L'ID est passé par paramètre, par exemple <code>var elementRef = document.getElementById('myId')</code>.</li> + <li>{{domxref("Document.getElementsByTagName()")}}, qui retourne un tableau contenant tous les éléments de la page ayant un type donné, par exemple tous les <code><p></code>, <code><a></code>, etc. Le type de l'élément est passé par paramètre, par exemple <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li> +</ul> + +<p>Ces deux dernières méthodes fonctionnent même dans les anciens navigateurs, contrairement à <code>querySelector()</code>, mais sont beaucoup moins pratiques. Jetez un coup d'oeil aux docs et essayez d'en trouver d'autres!</p> +</div> + +<h3 id="Créer_et_placer_de_nouveaux_noeuds">Créer et placer de nouveaux noeuds</h3> + +<p>Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.</p> + +<ol> + <li>De retour à notre exemple, commençons par récupérer une référence vers notre élément {{htmlelement("section")}} — ajoutez le code suivant au bas de votre script existant (faites de même avec les lignes qui suivront): + <pre class="brush: js">var sect = document.querySelector('section');</pre> + </li> + <li>Nous allons créer un nouveau paragraphe avec {{domxref("Document.createElement()")}} et lui donner un texte de la même manière que précédemment: + <pre class="brush: js">var para = document.createElement('p'); +para.textContent = 'We hope you enjoyed the ride.';</pre> + </li> + <li>Nous pouvons maintenant ajouter ce paragraphe en bas de la section en utilisant {{domxref("Node.appendChild()")}}: + <pre class="brush: js">sect.appendChild(para);</pre> + </li> + <li>Finallement, ajoutons un noeud texte au premier paragraphe, pour finir la phrase joliment. D'abord, créons un noeud texte avec {{domxref("Document.createTextNode()")}}: + <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> + </li> + <li>Puis, après avoir récupéré un référence vers le premier paragraphe, ajoutons-y le noeud texte: + <pre class="brush: js">var linkPara = document.querySelector('p'); +linkPara.appendChild(text);</pre> + </li> +</ol> + +<p>C'est le plus gros de ce dont vous aurez besoin pour ajouter des noeuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous verrons quelques exemples plus tard).</p> + +<h3 id="Déplacer_des_éléments">Déplacer des éléments</h3> + +<p>Il peut y avoir des moments où vous allez vouloir déplacer des noeuds. Si on voulait déplacer le premier paragraphe au bas de la section, on pourrait faire ça:</p> + +<pre class="brush: js">sect.appendChild(linkPara);</pre> + +<p>Cela déplace le paragraphe tout au bas de la section. On pourrait penser que cela ajouterait une copie, mais ce n'est pas le cas — <code>linkPara</code> est une référence vers un et un seul élément. Si on voulait ajouter une copie, on devrait utiliser {{domxref("Node.cloneNode()")}} à la place.</p> + +<h3 id="Supprimer_des_éléments">Supprimer des éléments</h3> + +<p>Supprimer des éléments est également plutôt simple, du moins quand on a une référence de l'élément et de son parent. Dans notre cas, on peut utiliser {{domxref("Node.removeChild()")}}, comme ceci:</p> + +<pre>sect.removeChild(linkPara);</pre> + +<p>Vous pourriez aussi vouloir supprimer un élément en n'ayant qu'une référence vers cet élément, et c'est souvent le cas. Il n'existe pas de méthode pour dire à un noeud de se supprimer, vous auriez donc à faire comme suit:</p> + +<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre> + +<p>Testez les lignes ci-dessus dans votre code.</p> + +<h3 id="Manipuler_le_style">Manipuler le style</h3> + +<p>Il est possible de manipuler le style CSS JavaScript de plusieurs manières.</p> + +<h4 id="Stylesheets">Stylesheets</h4> + +<p>Vous pouvez obtenir une liste de toutes les feuilles de style du document en utilisant {{domxref("Document.stylesheets")}}, qui retourne un tableau d'objets {{domxref("CSSStyleSheet")}}. Vous pouvez ainsi ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités car elles sont archaïques et il est difficule de manipuler le style avec. Il y a des moyens plus simples.</p> + +<h4 id="Propriété_style">Propriété style</h4> + +<p>La première façon consiste à ajouter des styles en ligne (inline style), directement sur les éléments que vous voulez styler. Pour ce faire, on utilise la propriété {{domxref("HTMLElement.style")}}, qui nous permet d'accéder au style en ligne des éléments du document. Vous pouvez définir les propriétés de cet objet pour mettre à jour directement le style en ligne d'un élément.</p> + +<ol> + <li>À titre d'exemple, essayez d'ajouter les lignes suivantes au bas de votre JavaScript: + <pre class="brush: js">para.style.color = 'white'; +para.style.backgroundColor = 'black'; +para.style.padding = '10px'; +para.style.width = '250px'; +para.style.textAlign = 'center';</pre> + </li> + <li>Rafraichissez la page et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez le paragraphe dans l'<a href="/fr/docs/Outils/Inspecteur">Inspecteur</a> du navigateur, vous verrez que que ces lignes sont en effet ajoutées comme style en ligne au document: + <pre class="brush: html"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Notez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que la version CSS est liée par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Assurez-vous de ne pas les mélanger, sans quoi ça ne marchera pas.</p> +</div> + +<h4 id="Attribut_classe">Attribut classe</h4> + +<p>Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons voir maintenant.</p> + +<ol> + <li>Supprimez l'exemple précédent de votre JavaScript (5 lignes).</li> + <li>Ajoutez ce qui suit de le {{htmlelement("head")}} de votre HTML: + <pre><style> +.highlight { + color: white; + background-color: black; + padding: 10px; + width: 250px; + text-align: center; +} +</style></pre> + </li> + <li>Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale — {{domxref("Element.setAttribute()")}}. Cette fonction prend deux paramètres, le nom de l'attribut que vous voulez définir sur l'élémént et la valeur que vous voulez lui attribuer. En l'occurence, nous allons définir la classe de l'élément à <code>highlight</code>: + <pre class="brush: js">para.setAttribute('class', 'highlight');</pre> + </li> + <li>Rafraichissez votre page, et vous pourrez constater qu'il n'y a aucun changement par rapport au dernier exemple. La seule différence est qu'on a utilisé une classe et non des styles en ligne.</li> +</ol> + +<p>La méthode que vous utilisez ne dépend que de vous; chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus puriste — on ne mélange pas le CSS et le JavaScript. Alors que vous construirez des applications de plus en plus volumineuses et complexes, vous allez probablement utiliser la dernière méthode plus fréquemment, mais c'est à vous de décider.</p> + +<p>À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec JavaScript — autant l'écrire directement en HTML et ne pas utiliser JavaScript c'est plus complexe qu'HTML et vient avec quelques inconvénients, comme le fait que ce ne soit pas lisible par les moteurs de recherche.</p> + +<p>Dans les prochaines sections, nous verrons un exemple plus pratique de l'utilisation des APIs du DOM.</p> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p> +</div> + +<h2 id="Apprentissage_actif_Récupérer_des_informations_à_partir_de_l'objet_Window">Apprentissage actif: Récupérer des informations à partir de l'objet Window</h2> + +<p>Jusqu'à présent nous avons utilisé les fonctionnalités de {{domxref("Node")}} et {{domxref("Document")}} (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources. Repensez à notre démo <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> du dernier article — on y récupérait des données de géolocalisation pour afficher une carte de votre région. Vous devez juste vous assurer que vos données sont dans le bon format, et JavaScript rend cette tâche facile par rapport à de nombreux autres langages, puisqu'il est faiblement typé — par exemple, les nombres sont automatiquement convertis en chaîne de caractères quand on veut les afficher à l'écran.</p> + +<p>Dans cet exemple, nous allons résoudre un problème très commun — s'assurer que votre application est de la taille de la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utilisé pour les jeux, où vous voulez utiliser autant de place à l'écran que vous en avez pour jouer.</p> + +<ol> + <li>Pour commencer, faites une copie locale des fichiers de démo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Ouvrez le fichier html — vous verrez que nous avons un élément {{htmlelement("div")}} qui recouvre une petite partie de l'écran avec un motif de mosaïques. Nous allons l'utiliser pour représenter la surface de notre interface.</li> + <li>Premièrement, nous allons récupérer une référence au <code><div></code>, ainsi que la largeur et la hauteur de la fenêtre, et les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}. Ajoutez les lignes qui suivent à l'intérieur de l'élément {{htmlelement("script")}}: + <pre class="brush: js">var div = document.querySelector('div'); +var WIDTH = window.innerWidth; +var HEIGHT = window.innerHeight;</pre> + </li> + <li>Ensuite, nous allons modifier dynamiquement la largeur et hauteur du <code><div></code> pour qu'elles soient égales à celles de la fenêtre. Ajoutez les lignes suivantes à la suite des précédentes: + <pre class="brush: js">div.style.width = WIDTH + 'px'; +div.style.height = HEIGHT + 'px';</pre> + </li> + <li>Sauvegardez et rafraichissez votre page — vous devriez désormais voir que le <code><div></code> est aussi grand que la fenêtre, quelle qu'en soit la taille. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater qu'il ne change pas de taille — nous ne définissons la taille qu'une seule fois.</li> + <li>Nous pouvons utiliser un gestionnaire d'événément pour que le <code><div></code> soit redimensionné à chaque fois que la fenêtre est redimensionnée. L'objet {{domxref("Window")}} a pour ça un événement disponible appelé <code>resize</code>, qui est déclenché lorsque la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code: + <pre class="brush: js">window.onresize = function() { + WIDTH = window.innerWidth; + HEIGHT = window.innerHeight; + div.style.width = WIDTH + 'px'; + div.style.height = HEIGHT + 'px'; +}</pre> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez trouver notre<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html"> exemple de redimensionnement de la fenêtre terminé</a> sur Github (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p> +</div> + +<h2 id="Apprentissage_actif_Une_liste_de_courses_dynamique">Apprentissage actif: Une liste de courses dynamique</h2> + +<p>Pour clore l'article, nous aimerions vous proposer un petit challenge — nous voulons créer une simple liste de courses qui nous permette d'ajouter des items à la liste dynamiquement en utilisant un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton:</p> + +<ul> + <li>La valeur du champ doit être ajoutée à la liste.</li> + <li>Chaque élément de la liste doit avoir un bouton qui, quand il est pressé, supprime cet élément de la liste.</li> + <li>Le champ doit être vidé et prendre le focus pour que vous puissez entrer un autre élément directement.</li> +</ul> + +<p>La démo terminée doit ressembler à ça:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p> + +<p>Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.</p> + +<ol> + <li>Tout d'abord, téléchargez une copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Vous verrez qu'il contient un peu de CSS, un label, champ et bouton, une liste vide et un élément {{htmlelement("script")}}. Vous devrez apporter toutes vos modifications à l'intérieur du script.</li> + <li>Créez trois variables, contenant des références à la liste {{htmlelement("ul")}}, champ {{htmlelement("input")}}, et bouton {{htmlelement("button")}}.</li> + <li>Créez une <a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">fonction</a> qui est déclenchée lorsqu'on clique sur le bouton.</li> + <li>À l'intérieur du corps de la fonction, commencez par stoquer la <a href="/fr/docs/Web/API/HTMLInputElements">valeur</a> (propriété <code>value</code>) du champ dans une variable.</li> + <li>Ensuite, videz le champ en définissant sa valeur à une chaîne vide — <code>''</code>.</li> + <li>Créez trois nouveaux éléments — un élément de liste {{htmlelement('li')}}, un {{htmlelement('span')}} et {{htmlelement('button')}}, et stockez-les dans des variables.</li> + <li>Ajoutez le <code><span></code> et <code><button></code> comme enfant du <code><li></code>.</li> + <li>Définissez le contenu du <code><span></code> à la valeur du champ que vous avez récupéré précedemment, et définissez le contenu du boutton à "Supprimer".</li> + <li>Ajoutez le <code><li></code> comme enfant de la liste.</li> + <li>Ajoutez un gestionnaire d'événément pour le bouton "Supprimer", pour que quand il est cliqué, le <code><li></code> dans lequel il se situe est supprimé.</li> + <li>Finalement, utilisez la méthode {{domxref("HTMLElement.focus")}} pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain élément.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Si vous êtes vraiment bloqué, vous pouvez regarder notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p> +</div> + +<h2 id="Sommaire">Sommaire</h2> + +<p>Nous avons finit de voir la manipulation du document par le DOM. À ce stade, vous devriez comprendre quels sont les composants importants du navigateur web en ce qui concerne le contrôle des documents et l'expérience utilisateur sur le web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p>Il y a beaucoup plus à voir que ce qui est couvert dans cet article. Jetez un coup d'oeil à nos références pour en découvrir davantage:</p> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li> +</ul> + +<p>(Voir notre <a href="/fr/docs/Web/API">Référence Web API</a> pour une liste complètes des APIs web documentées sur MDN!)</p> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<div> +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> +</ul> +</div> diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html new file mode 100644 index 0000000000..f8e36b2078 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -0,0 +1,440 @@ +--- +title: API tierces +slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs +tags: + - API + - Apprendre + - Débutant +translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « <em>third-party API</em> ») et nous illustrerons certains cas d'usage pour ces API tierces.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Les bases de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas</a>, <a href="/fr/docs/Apprendre/JavaScript/Building_blocks"> blocs de construction</a>, <a href="/fr/docs/Learn/JavaScript/Objects">les objets JavaScript</a>), <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction">les bases des API côté client</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Comprendre le fonctionnement des API tierces et comment les utiliser pour ajouter des fonctionnalités à ses sites / applications.</td> + </tr> + </tbody> +</table> + +<h2 id="Quest-ce_quune_API_tierce">Qu'est-ce qu'une API tierce ?</h2> + +<p>Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.</p> + +<p>Regardons <a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/">cet exemple qui utilise l'API MapQuest</a> et voyons avec lui les différences entre les API tierces et celles du navigateur.</p> + +<div class="note"> +<p><strong>Note :</strong> Vous pouvez <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">récupérer l'ensemble des exemples de code</a> en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section.</p> +</div> + +<h3 id="Elles_sont_situées_sur_des_serveurs_tiers">Elles sont situées sur des serveurs tiers</h3> + +<p>Les API fournies par le navigateur sont construites <strong>dans</strong> le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Comment_les_API_fonctionnent-elles"> que nous avons vu dans cet article introductif</a> s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement :</p> + +<pre class="brush: js">const audioCtx = new AudioContext(); + ... +const audioElement = document.querySelector('audio'); + ... +const audioSource = audioCtx.createMediaElementSource(audioElement); +// etc.</pre> + +<p>En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne :</p> + +<pre class="brush: js"><script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> +<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/></pre> + +<p>On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation :</p> + +<pre class="brush: js">var L; + +var map = L.mapquest.map('map', { + center: [53.480759, -2.242631], + layers: L.mapquest.tileLayer('map'), + zoom: 12 +});</pre> + +<p>Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode <code>mapquest.map()</code> qui prend comme argument :</p> + +<ul> + <li>l'identifiant (la valeur de l'attribut <code>id</code>) d'un élément {{htmlelement("div")}} dans lequel on souhaite afficher la carte (ici, c'est <code>"map"</code>)</li> + <li>un objet indiquant les options pour la carte qu'on souhaite afficher. Ici, on indique les coordonnées du centre de la carte, le pavage utilisé (ici on utilise la méthode <code>mapquest.tileLayer()</code> ainsi que le niveau de zoom.</li> +</ul> + +<p>C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.).</p> + +<div class="note"> +<p><strong>Note :</strong> Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs#A_RESTful_API_%E2%80%94_NYTimes">API REST (ou <em>RESTful APIs</em> en anglais) et nous les abordons plus bas dans l'article</a>.</p> +</div> + +<h3 id="Des_clés_dAPI_sont_nécessaires_pour_les_utiliser">Des clés d'API sont nécessaires pour les utiliser</h3> + +<p>Dans les navigateurs, <a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction#Elles_ont_des_mécanismes_de_sécurité_supplémentaires_si_nécessaire">comme nous l'avons vu dans le premier article</a>, les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites.</p> + +<p>Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers.</p> + +<p>Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci :</p> + +<pre>L.mapquest.key = 'VOTRE-CLE-D-API-ICI';</pre> + +<p>Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple.</p> +</div> + +<p>Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire.</p> + +<p>L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé.</p> + +<h2 id="Étendre_lexemple_«_MapQuest_»">Étendre l'exemple « MapQuest »</h2> + +<p>Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API.</p> + +<ol> + <li> + <p>Pour commencer cette section, copiez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/starter-file.html">le fichier initial</a> dans un nouveau répertoire. Si vous avez déjà <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">cloné le dépôt des exemples</a>, vous disposez déjà d'une copie située sous le répertoire <em>javascript/apis/third-party-apis/mapquest</em>.</p> + </li> + <li> + <p>Ensuite, <a href="https://developer.mapquest.com/">rendez-vous sur le site MapQuest pour les développeurs</a>, créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide).</p> + </li> + <li>Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre.</li> +</ol> + +<h3 id="Modifier_le_type_de_la_carte">Modifier le type de la carte</h3> + +<p>L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier :</p> + +<pre class="brush: js">layers: L.mapquest.tileLayer('map')</pre> + +<p>Ici, vous pouvez changer <code>'map'</code> en <code>'hybrid'</code> afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/">la page de référence de la méthode <code>tileLayer()</code></a>.</p> + +<h3 id="Ajouter_différents_contrôles">Ajouter différents contrôles</h3> + +<p>Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthode<code>map.addControl()</code>. Ajoutez la ligne suivante à l'intérieur du gestionnaire <code>window.onload</code> :</p> + +<pre class="brush: js">map.addControl(L.mapquest.control());</pre> + +<p>La méthode <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/"><code>mapquest.control()</code></a> crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété <code>position</code> dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple :</p> + +<pre class="brush: js"> map.addControl(L.mapquest.control({ position: 'bottomright' }));</pre> + +<p>D'autres types de contrôle sont disponibles comme <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/">mapquest.searchControl()</a></code> et <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/">mapquest.satelliteControl()</a></code>. Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet.</p> + +<h3 id="Ajouter_un_marqueur_personnalisé">Ajouter un marqueur personnalisé</h3> + +<p>Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode <code><a href="https://leafletjs.com/reference-1.3.0.html#marker">L.marker()</a></code> (documentée dans la documentation de Leaflet.js). Dans <code>window.onload</code>, vous pouvez ajouter le fragment de code suivante <code>window.onload</code> :</p> + +<pre class="brush: js">L.marker([53.480759, -2.242631], { + icon: L.mapquest.icons.marker({ + primaryColor: '#22407F', + secondaryColor: '#3B5998', + shadow: true, + size: 'md', + symbol: 'A' + }) +}) +.bindPopup('Ici se trouve Manchester !') +.addTo(map);</pre> + +<p>Comme on peut le voir ici, la méthode peut prendre deux paramètres :</p> + +<ul> + <li>le premier qui contient les coordonnées géographiques de l'emplacement où afficher le pointeur sous la forme d'un tableau</li> + <li>le deuxième qui est un objet d'options contenant une propriété <code>icon</code> qui définit l'icône à afficher à cet emplacement.</li> +</ul> + +<p>L'icône est définie via un appel à la méthode <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/">mapquest.icons.marker()</a></code> à laquelle on fournit des informations telles que la couleur et la taille du marqueur.</p> + +<p>Après l'appel à la première méthode, on enchaîne avec un appel avec <code>.bindPopup('Ici se trouve Manchester !')</code>, qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur.</p> + +<p>Enfin, on chaîne un appel <code>.addTo(map)</code> pour ajouter le marqueur sur la carte.</p> + +<p>Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.).</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/expanded-example.html">expanded-example.html</a>.</p> +</div> + +<h2 id="Quid_de_Google_Maps">Quid de Google Maps ?</h2> + +<p>Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons :</p> + +<ul> + <li>L'utilisation est beaucoup plus simple. Pour les API Google, il faut créer un compte Google, se connecter à la <a href="https://console.cloud.google.com">Google Cloud Platform Console</a> pour créer des clés d'API avec une procédure assez complexe.</li> + <li>Pour utiliser l'API <a href="https://cloud.google.com/maps-platform/">Google Maps</a> et bien qu'un usage léger soit gratuit, il est nécessaire de fournir une carte de crédit à des fins de facturation et nous pensions que cela n'était pas acceptable pour un tel tutoriel.</li> + <li>Nous souhaitions montrer que des alternatives étaient disponibles.</li> +</ul> + +<h2 id="Une_approche_pour_utiliser_les_API_tierces">Une approche pour utiliser les API tierces</h2> + +<h3 id="Une_API_REST_du_NYTimes">Une API REST du NYTimes</h3> + +<p>Prenons un autre exemple d'API, l'API du <a href="https://developer.nytimes.com">New York Times</a>. Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent.</p> + +<p>Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces.</p> + +<h3 id="Trouver_la_documentation">Trouver la documentation</h3> + +<p>Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : <a href="https://developer.nytimes.com/">https://developer.nytimes.com/</a>.</p> + +<h3 id="Obtenir_une_clé_de_développement">Obtenir une clé de développement</h3> + +<p>La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de <a href="https://developer.nytimes.com/get-started">https://developer.nytimes.com/get-started</a>.</p> + +<ol> + <li> + <p>Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create").</p> + </li> + <li> + <p>Vous pouvez alors récupérer la clé d'API à partir de la page suivante.</p> + </li> + <li> + <p>Pour construire le socle de notre exemple, copiez <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html">nytimes_start.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css">nytimes.css</a> dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà <a href="/fr/docs/Apprendre#Obtenir_nos_exemples_de_code">cloné le dépôt des exemples</a>, vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire <em>javascript/apis/third-party-apis/nytimes</em>. L'élément <code><script></code> contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires.</p> + </li> +</ol> + +<p>Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14821/nytimes-search.png" style="border-style: solid; border-width: 1px; display: block; height: 374px; margin: 0px auto; width: 700px;"></p> + +<h3 id="Connecter_lAPI_à_son_application">Connecter l'API à son application</h3> + +<p>Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre <a href="/fr/docs/Web/HTTP/Méthode/GET">GET</a> à chaque requête.</p> + +<ol> + <li> + <p>Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt :</p> + + <pre class="brush: js">var key = ' ... ';</pre> + </li> + <li> + <p>Ajoutez la ligne suivante sous le commentaire <code>// Event listeners to control the functionality</code>. Cette ligne permet d'exécuter la fonction <code>submitSearch()</code> lorsque le formulaire est envoyé (quand on presse le bouton).</p> + + <pre class="brush: js">searchForm.addEventListener('submit', submitSearch);</pre> + </li> + <li> + <p>Sous cette nouvelle ligne, ajoutons les fonctions <code>submitSearch()</code> et <code>fetchResults()</code> :</p> + + <pre class="brush: js">function submitSearch(e) { + pageNumber = 0; + fetchResults(e); +} + +function fetchResults(e) { + // On utilise preventDefault() afin d'éviter + // l'envoie vers notre serveur et le rafraîchissement + // de la page + e.preventDefault(); + + // On compose l'URL + url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value <span class="blob-code-inner"><span class="pl-s1"><span class="pl-k x">+</span><span class="x"> </span><span class="pl-s"><span class="pl-pds x">'</span><span class="x">&fq=document_type:("article")</span><span class="pl-pds x x-last">'</span></span></span></span>; + + if(startDate.value !== '') { + url += '&begin_date=' + startDate.value; + }; + + if(endDate.value !== '') { + url += '&end_date=' + endDate.value; + }; + +}</pre> + </li> +</ol> + +<p><code>submitSearch()</code> commence par réinitialiser le nombre de page à 0 puis appelle <code>fetchResults()</code>. Cette fonction commence par appeler <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :</p> + +<ul> + <li>L'URL de base (telle que fournie par la variable <code>baseURL</code>).</li> + <li>La clé d'API qui a été passée au paramètre d'URL <code>api-key</code> et dont la valeur dans notre script est fournie par la variable <code>key</code>.</li> + <li>Le nombre de pages est fourni dans l'URL avec le paramètre <code>page</code> et provient de la variable <code>pageNumber</code> dans notre script.</li> + <li>Le terme de la recherche est fourni dans l'URL avec le paramètre <code>q</code> et provient du texte <code>searchTerm</code> fourni par l'élément {{htmlelement("input")}}.</li> + <li>Le type de document qu'on souhaite obtenir dans les résultats est une expression passée via le paramètre <code>fq</code> de l'URL. Ici, on souhaite obtenir les articles.</li> +</ul> + +<p>Après, on utilise un ensemble d'instructions <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if()</a></code> pour vérifier si des valeurs ont été fournies pour les champs <code>startDate</code> et <code>endDate</code> dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL <code>begin_date</code> et/ou <code>end_date</code>.</p> + +<p>Si on prend un exemple d'URL complète ainsi construite :</p> + +<pre>https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats +&<span class="blob-code-inner"><span class="pl-s1"><span class="pl-s"><span class="x">fq=document_type:("article")</span></span></span></span>&begin_date=20170301&end_date=20170312 </pre> + +<div class="note"> +<p><strong>Note :</strong> Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter <a href="https://developer.nytimes.com/">la documentation du NYTimes</a>.</p> +</div> + +<div class="note"> +<p><strong>Note :</strong> Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut <code>required</code>. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut <code>pattern="[0-9]{8}"</code>). Voir la page sur <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">la validation des données d'un formulaire</a> pour en savoir plus sur ce fonctionnement.</p> +</div> + +<h3 id="Récupérer_des_données_depuis_lAPI">Récupérer des données depuis l'API</h3> + +<p>Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'<a href="/fr/docs/Web/API/Fetch_API/Using_Fetch">API Fetch</a>.</p> + +<p>Dans la fonction <code>fetchResults()</code>, juste avant l'accolade de fin, ajoutez le fragment de code suivant :</p> + +<pre class="brush: js">// On utilise fetch() pour envoyer la requête à l'API +fetch(url).then(function(result) { + return result.json(); +}).then(function(json) { + displayResults(json); +});</pre> + +<p>On envoie la requête en passant la variable <code>url</code> comme paramètre à la fonction <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> puis on convertit le corps de la réponse avec la fonction <code><a href="/fr/docs/Web/API/Body/json">json()</a></code> puis on passe le JSON ainsi obtenu à la fonction <code>displayResults()</code> afin que les données puissent être affichées dans l'interface utilisateur.</p> + +<h3 id="Afficher_les_données">Afficher les données</h3> + +<p>Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction <code>fetchResults()</code>.</p> + +<pre class="brush: js">function displayResults(json) { + while (section.firstChild) { + section.removeChild(section.firstChild); + } + + var articles = json.response.docs; + + if(articles.length === 10) { + nav.style.display = 'block'; + } else { + nav.style.display = 'none'; + } + + if(articles.length === 0) { + var para = document.createElement('p'); + para.textContent = 'Aucun résultat reçu.' + section.appendChild(para); + } else { + for(var i = 0; i < articles.length; i++) { + var article = document.createElement('article'); + var heading = document.createElement('h2'); + var link = document.createElement('a'); + var img = document.createElement('img'); + var para1 = document.createElement('p'); + var para2 = document.createElement('p'); + var clearfix = document.createElement('div'); + + var current = articles[i]; + console.log(current); + + link.href = current.web_url; + link.textContent = current.headline.main; + para1.textContent = current.<span class="blob-code-inner"><span class="pl-s1"><span class="pl-smi x x-first x-last">snippet</span></span></span>; + para2.textContent = 'Mots-clés : '; + for(var j = 0; j < current.keywords.length; j++) { + var span = document.createElement('span'); + span.textContent += current.keywords[j].value + ' '; + para2.appendChild(span); + } + + if(current.multimedia.length > 0) { + img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; + img.alt = current.headline.main; + } + + clearfix.setAttribute('class','clearfix'); + + article.appendChild(heading); + heading.appendChild(link); + article.appendChild(img); + article.appendChild(para1); + article.appendChild(para2); + article.appendChild(clearfix); + section.appendChild(article); + } + } +}</pre> + +<p>Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :</p> + +<ul> + <li>La boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a></code> est utilisée afin de supprimer tout le contenu d'un élément du DOM. Dans ce cas, on enlève ce qu'il y a dans l'élément {{htmlelement("section")}}. On teste si la <code><section></code> possède un élément fils et si c'est le cas, on retire le premier, ainsi de suite jusqu'à ce que l'élément <code><section></code> n'ait plus d'éléments fils.</li> + <li>Ensuite, on renseigne la variable <code>articles</code> avec <code>json.response.docs</code> : le tableau contenant les objets qui représentent les articles renvoyés par la recherche. Ce renommage sert uniquement à rendre le code plus simple.</li> + <li>Le premier bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if()</a></code> vérifie si 10 ont été renvoyés par l'API (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination <em>10 articles précédents</em>/<em>10 articles suivants</em>. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section.</li> + <li>Le bloc <code>if()</code> suivant sert à vérifier si aucun article n'a été renvoyé. Lorsqu'il n'y a aucun résultat, on crée un élément {{htmlelement("p")}} qui affiche le texte "Aucun résultat reçu" puis on insère ce paragraphe dans l'élément <code><section></code>.</li> + <li>Si des articles sont renvoyés, on commence par créer les éléments qu'on souhaite utiliser afin de les afficher puis on insère le contenu dans chaque puis on insère ces éléments dans le DOM. Pour connaître les propriétés des objets obtenues via l'API, nous avons consulté la référence de l'API <em>Article Search</em> (voir <a href="https://developer.nytimes.com/apis">les API NYTimes</a>). La plupart de ces opérations sont assez parlantes mais voici quelques-unes qui sont notables : + <ul> + <li>On utilise une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> (<code>for(var j = 0; j < current.keywords.length; j++) { ... }</code> ) pour parcourir les mots-clés associés à chaque article et on insère ces mots-clés dans des éléments {{htmlelement("span")}} à l'intérieur d'un paragraphe <code><p></code>. De cette façon, nous pourrons plus facilement mettre en forme ces mots-clés.</li> + <li>On utilise un bloc <code>if()</code> (<code>if(current.multimedia.length > 0) { ... }</code>) afin de voir si l'article possède des images associées. Si c'est le cas, on affiche la première image qui existe.</li> + <li>On applique la classe <code>"clearfix"</code> à l'élément <code><div></code> afin de pouvoir le dégager.</li> + </ul> + </li> +</ul> + +<h3 id="Câbler_les_boutons_pour_la_pagination">Câbler les boutons pour la pagination</h3> + +<p>Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable <code>pageNumber</code> puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL <code>page</code>. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre <code>page</code> vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre <code>page</code> vaut 1 et ainsi de suite.</p> + +<p>En connaissant cela, on peut écrire une fonction pour gérer la pagination.</p> + +<ol> + <li> + <p>Après l'appel existant à <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, on ajoute les deux prochaines lignes qui appelleront les fonctions <code>nextPage()</code> et <code>previousPage()</code> lorsqu'on cliquera sur le bouton correspondant :</p> + + <pre class="brush: js">nextBtn.addEventListener('click', nextPage); +previousBtn.addEventListener('click', previousPage);</pre> + </li> + <li> + <p>À la suite, on définit le corps de ces fonctions :</p> + + <pre class="brush: js">function nextPage(e) { + pageNumber++; + fetchResults(e); +}; + +function previousPage(e) { + if(pageNumber > 0) { + pageNumber--; + } else { + return; + } + fetchResults(e); +};</pre> + + <p>La première fonction est assez simple : on incrémente la variable <code>pageNumber</code> puis on exécute à nouveau la fonction <code>fetchResults()</code> afin d'afficher les prochains résultats.</p> + + <p>La seconde fonction est similaire, mais on prend la précaution de vérifier que <code>pageNumber</code> ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque <code>pageNumber</code> vaut déjà 0, on sort de la fonction avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/return">return</a></code> afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau).</p> + </li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Vous pouvez trouver <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/index.html">l'exemple complet sur l'API du NYTimes sur GitHub</a>.</p> +</div> + +<h2 id="Exemple_dutilisation_de_lAPI_YouTube">Exemple d'utilisation de l'API YouTube</h2> + +<p>Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">exemple de recherche de vidéo YouTube</a>. Dans cet exemple, on utilise deux API :</p> + +<ul> + <li><a href="https://developers.google.com/youtube/v3/docs/">L'API YouTube Data</a> qui permet de chercher parmi les vidéos YouTube et de renvoyer des résultats.</li> + <li><a href="https://developers.google.com/youtube/iframe_api_reference">L'API YouTube IFrame Player</a> afin d'afficher les vidéos recherchées dans un lecteur vidéo, affiché dans une <em>iframe</em> pour les regarder.</li> +</ul> + +<p>Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14823/youtube-example.png" style="border-style: solid; border-width: 1px; display: block; height: 389px; margin: 0px auto; width: 700px;"></p> + +<p>Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">consulter le code source</a> qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.</p> + +<h2 id="Résumé">Résumé</h2> + +<p>Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Une introduction aux API Web</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler les documents</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">Les API tierces</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des graphiques</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Les API pour l'audio et la vidéo</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> +</ul> diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html new file mode 100644 index 0000000000..358458db64 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html @@ -0,0 +1,518 @@ +--- +title: APIs vidéo et audio +slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +tags: + - API + - Apprendre + - Article + - Audio + - Codage + - Débutant + - Guide + - JavaScript + - Video +translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td>Les bases du JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/fr/Apprendre/JavaScript/Building_blocks">les briques Javascript</a>, <a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets</a>), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux APIs web</a></td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de audio et vidéo.</td> + </tr> + </tbody> +</table> + +<h2 id="Les_balises_HTML5_video_et_audio">Les balises HTML5 video et audio</h2> + +<p>Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans <a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a>, une implémentation habituelle ressemble à ça :</p> + +<pre class="brush: html"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place <a href="rabbit320.mp4">un lien vers la vidéo</a>.</p> +</video></pre> + +<p>Cela crée un lecteur vidéo à l'intérieur du navigateur:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}</p> + +<p>Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}</p> + +<p>Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.</p> + +<p>Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut <code>controls</code>) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.</p> + +<h2 id="L'API_HTMLMediaElement">L'API HTMLMediaElement</h2> + +<p>L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.</p> + +<p>Notre exemple final ressemblera (et fonctionnera) comme ceci:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}</p> + +<h3 id="Débuter">Débuter</h3> + +<p>Pour commencer avec cet exemple, <a href="https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip">télechargez notre media-player-start.zip</a> et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans <code>javascript/apis/video-audio/start/</code>.</p> + +<p>Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.</p> + +<h4 id="Exploration_du_HTML">Exploration du HTML</h4> + +<p>Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles:</p> + +<pre class="brush: html"><div class="player"> + <video controls> + <source src="video/sintel-short.mp4" type="video/mp4"> + <source src="video/sintel-short.mp4" type="video/webm"> + <!-- fallback contenu ici --> + </video> + <div class="controls"> + <button class="play" data-icon="P" aria-label="bascule lecture pause"></button> + <button class="stop" data-icon="S" aria-label="stop"></button> + <div class="timer"> + <div></div> + <span aria-label="timer">00:00</span> + </div> + <button class="rwd" data-icon="B" aria-label="retour arrière"></button> + <button class="fwd" data-icon="F" aria-label="avance rapide"></button> + </div> +</div> +</pre> + +<ul> + <li>Le lecteur complet est englobé dans une balise {{htmlelement("div")}} pour pouvoir appliquer du style sur le bloc complet si nécessaire.</li> + <li>La balise {{htmlelement("video")}} contient deux éléments {{htmlelement("source")}} pour permettre la lecture du média selon les capacités de chaque navigateur.</li> + <li>La partie <em>controls</em> du HTML est la plus intéressante: + <ul> + <li>Il contient 4 {{htmlelement("button")}} : lecture/mise en pause, stop, retour arrière et avance rapide.</li> + <li>Chaque <code><button></code> a un nom de classe, un attribut <code>data-icon</code> (pour définir l'icône affichée), et un attribut <code>aria-label</code> (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut <code>aria-label</code> est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus.</li> + <li>Il y a également un élément {{htmlelement("div")}}, qui affiche le temps écoulé quand la vidéo est en cours de lecture. Pour s'amuser, nous avons mis deux mécanismes en place — un {{htmlelement("span")}} qui affiche le temps écoulé en minutes/secondes, et un autre <code><div></code> pour afficher une barre de progrès. Pour vous faire une idée du produit final, vous pouvez jeter un d'oeil à <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">la version finie</a>.</li> + </ul> + </li> +</ul> + +<h4 id="Exploration_du_CSS">Exploration du CSS</h4> + +<p>Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de <code>.controls</code>:</p> + +<pre class="brush: css">.controls { + visibility: hidden; + opacity: 0.5; + width: 400px; + border-radius: 10px; + position: absolute; + bottom: 20px; + left: 50%; + margin-left: -200px; + background-color: black; + box-shadow: 3px 3px 5px black; + transition: 1s all; + display: flex; +} + +.player:hover .controls, player:focus .controls { + opacity: 1; +} +</pre> + +<ul> + <li>Nous commençons par définir la propriété {{cssxref("visibility")}} à <code>hidden</code>. Plus tard dans notre JavaScript, nous le rendrons <code>visible</code>, et supprimerons l'attribut <code>controls</code> de l'élément <code><video></code>. Ainsi, si pour une raison quelconque le JavaScript ne se charge pas, les utilisateurs peuvent toujours utiliser la vidéo avec les contrôles natifs.</li> + <li>Nous donnons aux propriétés une {{cssxref("opacity")}} de 0.5 par défaut, pour qu'ils ne soient pas génants lorsqu'on veut regarder la vidéo. Ce n'est qu'en passant la souris sur le lecteur que les contrôles sont affichés en pleine opacité.</li> + <li>Ne plaçons les boutons à l'intérieur du div en utilisant Flexbox ({{cssxref("display")}}: flex), c'est plus simple comme ça.</li> +</ul> + +<p>Ensuite, voyons les icônes des boutons:</p> + +<pre class="brush: css">@font-face { + font-family: 'HeydingsControlsRegular'; + src: url('fonts/heydings_controls-webfont.eot'); + src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/heydings_controls-webfont.woff') format('woff'), + url('fonts/heydings_controls-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +button:before { + font-family: HeydingsControlsRegular; + font-size: 20px; + position: relative; + content: attr(data-icon); + color: #aaa; + text-shadow: 1px 1px 0px black; +}</pre> + +<p>Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application.</p> + +<p>Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton:</p> + +<ul> + <li>Nous utilisons le sélecteur {{cssxref("::before")}} pour afficher le contenu au début de chaque élément {{htmlelement("button")}}.</li> + <li>Nous utilisons la propriété {{cssxref("content")}} pour que le contenu à afficher soit égal au contenu de l'attribut <code><a href="/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">data-icon</a></code>. Dans le cas du bouton play par exemple, <code>data-icon</code> contient un "P" majuscule.</li> + <li>Nous apliquons la police web personnalisée au bouton en utilisant {{cssxref("font-family")}}. Dans cette police, "P" est une icône "play", donc le bouton play a une icône "play" affichée dedans.</li> +</ul> + +<p>Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}.</p> + +<p>Dernier point mais non des moindres, le CSS du décompte:</p> + +<pre class="brush: css">.timer { + line-height: 38px; + font-size: 10px; + font-family: monospace; + text-shadow: 1px 1px 0px black; + color: white; + flex: 5; + position: relative; +} + +.timer div { + position: absolute; + background-color: rgba(255,255,255,0.2); + left: 0; + top: 0; + width: 0; + height: 38px; + z-index: 2; +} + +.timer span { + position: absolute; + z-index: 3; + left: 19px; +}</pre> + +<ul> + <li>Nous donnons au <code><div></code> <code>.timer</code> la propriété <code>flex: 5</code>, pour qu'il occupe la plus grande partie de la barre de contrôle en largeur. Nous ajoutons également {{cssxref("position")}}<code>: relative</code>, pour que les éléments à l'intérieur puissent être positionnés relativement à ses dimensions et non à celles de l'élément {{htmlelement("body")}}.</li> + <li>Le <code><div></code> interne est positionné en absolu pour être situé au-dessus du <code><div></code> externe. On lui donne également une largeur initiale de 0, de sorte qu'on ne le voie pas du tout. Au fur et à mesure de la lecture de la vidéo, la largeur sera augmentée via JavaScript.</li> + <li>Le <code><span></code> est également positionné en absolu pour être situé sur le côté gauche de la barre de progrès.</li> + <li>Nous donnons au <code><div></code> et au <code><span></code> le {{cssxref("z-index")}} approprié pour que les données soient visibles — qu'un élément n'en cache pas un autre.</li> +</ul> + +<h3 id="Implémenter_le_JavaScript">Implémenter le JavaScript</h3> + +<p>Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent.</p> + +<ol> + <li> + <p>Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons <code>custom-player.js</code>.</p> + </li> + <li> + <p>En haut de ce fichier, insérez le code suivant:</p> + + <pre class="brush: js">var media = document.querySelector('video'); +var controls = document.querySelector('.controls'); + +var play = document.querySelector('.play'); +var stop = document.querySelector('.stop'); +var rwd = document.querySelector('.rwd'); +var fwd = document.querySelector('.fwd'); + +var timerWrapper = document.querySelector('.timer'); +var timer = document.querySelector('.timer span'); +var timerBar = document.querySelector('.timer div'); +</pre> + + <p>Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes:</p> + + <ul> + <li>L'élément <code><video></code>, et la barre de contrôle.</li> + <li>Les boutons play/pause, stop, retour arrière, et avance rapide.</li> + <li>Le <code><div></code> externe, le <code><span></code> qui décompte le temps écoulé, et le <code><div></code> interne qui affiche le progrès de la vidéo.</li> + </ul> + </li> + <li> + <p>Ensuite, insérez ce qui suit en bas de votre code:</p> + + <pre class="brush: js">media.removeAttribute('controls'); +controls.style.visibility = 'visible';</pre> + + <p>Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles.</p> + </li> +</ol> + +<h4 id="Lecture_et_pause_de_la_vidéo">Lecture et pause de la vidéo</h4> + +<p>Imlémentons le contrôle le plus important — le bouton play/pause.</p> + +<ol> + <li> + <p>Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction <code>playPauseMedia()</code> soit invoquée quand le bouton play est cliqué:</p> + + <pre class="brush: js">play.addEventListener('click', playPauseMedia); +</pre> + </li> + <li> + <p>Maintenant, définissons <code>playPauseMedia()</code> — ajoutez ce qui suit, toujours au bas de votre code:</p> + + <pre class="brush: js">function playPauseMedia() { + if(media.paused) { + play.setAttribute('data-icon','u'); + media.play(); + } else { + play.setAttribute('data-icon','P'); + media.pause(); + } +}</pre> + + <p>Ici, nous utilisons une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code> pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut <code>data-icon</code> à "u", qui est une icône "en pause", et invoquons la méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.</p> + + <p>Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.</p> + </li> +</ol> + +<h4 id="Stopper_la_vidéo">Stopper la vidéo</h4> + +<ol> + <li> + <p>Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> suivantes au-dessous de vos ajouts précédents:</p> + + <pre class="brush: js">stop.addEventListener('click', stopMedia); +media.addEventListener('ended', stopMedia); +</pre> + + <p>L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction <code>stopMedia()</code> quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit.</p> + </li> + <li> + <p>Ensuite, définissons <code>stopMedia()</code> — ajoutez ce qui suit après la fonction <code>playPauseMedia()</code>:</p> + + <pre class="brush: js">function stopMedia() { + media.pause(); + media.currentTime = 0; + play.setAttribute('data-icon','P'); +} +</pre> + + <p>Il n'y a pas de méthode <code>stop()</code> dans l'API HTMLMediaElement — l'équivalent du stop est de mettre <code>pause()</code> sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à <code>currentTime</code> (en secondes) change immédiatement la position du temps du média.</p> + + <p>Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.</p> + </li> +</ol> + +<h4 id="Retour_arrière_et_avance_rapide">Retour arrière et avance rapide</h4> + +<p>Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire.</p> + +<ol> + <li> + <p>Tout d'abord, ajoutez les lignes <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> suivantes à la suite des précédentes:</p> + + <pre class="brush: js">rwd.addEventListener('click', mediaBackward); +fwd.addEventListener('click', mediaForward); +</pre> + </li> + <li> + <p>Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir <code>mediaBackward()</code> et <code>mediaForward()</code>:</p> + + <pre class="brush: js">var intervalFwd; +var intervalRwd; + +function mediaBackward() { + clearInterval(intervalFwd); + fwd.classList.remove('active'); + + if(rwd.classList.contains('active')) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + media.play(); + } else { + rwd.classList.add('active'); + media.pause(); + intervalRwd = setInterval(windBackward, 200); + } +} + +function mediaForward() { + clearInterval(intervalRwd); + rwd.classList.remove('active'); + + if(fwd.classList.contains('active')) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + media.play(); + } else { + fwd.classList.add('active'); + media.pause(); + intervalFwd = setInterval(windForward, 200); + } +} +</pre> + + <p>Vous remarquerez que nous commençons par initialiser deux variables — <code>intervalFwd</code> et <code>intervalRwd</code> — vous verrez à quoi elles servent plus tard.</p> + + <p>Voyons pas à pas <code>mediaBackward()</code> (<code>mediaForward()</code> fait la même chose, mais dans l'autre sens):</p> + + <ol> + <li>Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton <code>rwd</code> après avoir pressé le bouton <code>fwd</code>, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.</li> + <li>Nous utilisons une instruction <code>if</code> pour vérifier si la classe <code>active</code> a été définie sur le bouton <code>rwd</code>, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode <code>classList.contains()</code> pour vérifier si la liste contient la classe <code>active</code>. Cela retourne un booléen <code>true</code>/<code>false</code> en résultat.</li> + <li>Si la classe <code>active</code> a été définie sur le bouton <code>rwd</code>, nous la supprimons avec <code>classList.remove()</code>, effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.</li> + <li> + <p>Sinon, nous ajoutons la classe <code>active</code> sur le bouton <code>rwd</code> avec <code>classList.add()</code>, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable <code>intervalRwd</code> en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction <code>setInterval()</code> créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction <code>windBackward()</code> toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable <code>intervalRwd</code> (voir l'appel à <code>clearInterval()</code> effectué plus tôt dans la fonction).</p> + </li> + </ol> + </li> + <li> + <p>Pour en finir avec cette section, nous devons définir les fonctions <code>windBackward()</code> et <code>windForward()</code> invoquées dans les appels <code>setInterval()</code>. Ajoutez ce qui suit après les deux fonctions précédentes:</p> + + <pre class="brush: js">function windBackward() { + if(media.currentTime <= 3) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + stopMedia(); + } else { + media.currentTime -= 3; + } +} + +function windForward() { + if(media.currentTime >= media.duration - 3) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + stopMedia(); + } else { + media.currentTime += 3; + } +}</pre> + Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans <code>windBackward()</code>, nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes. + + <ol> + <li>Nous commençons avec une instruction <code>if</code> qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant <code>stopMedia()</code>, supprimons la classe <code>active</code> du bouton, et stoppons l'intervale <code>intervalRwd</code> pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement.</li> + <li>Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant <code>media.currentTime -= 3</code>. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes.</li> + </ol> + </li> +</ol> + +<h4 id="Mettre_à_jour_le_temps_écoulé">Mettre à jour le temps écoulé</h4> + +<p>La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément <code><video></code>. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc (<a href="http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video">voir post stackoverflow</a>).</p> + +<p>Ajoutez la ligne <code>addEventListener()</code> suivante à la suite des autres:</p> + +<pre class="brush: js">media.addEventListener('timeupdate', setTime);</pre> + +<p>Maintenant, ajoutez la fonction <code>setTime()</code>:</p> + +<pre class="brush: js">function setTime() { + var minutes = Math.floor(media.currentTime / 60); + var seconds = Math.floor(media.currentTime - minutes * 60); + var minuteValue; + var secondValue; + + if (minutes < 10) { + minuteValue = '0' + minutes; + } else { + minuteValue = minutes; + } + + if (seconds < 10) { + secondValue = '0' + seconds; + } else { + secondValue = seconds; + } + + var mediaTime = minuteValue + ':' + secondValue; + timer.textContent = mediaTime; + + var barLength = timerWrapper.clientWidth * (media.currentTime/media.duration); + timerBar.style.width = barLength + 'px'; +} +</pre> + +<p>C'est une fonction assez longue, alors allons-y étape par étape:</p> + +<ol> + <li>Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.</li> + <li>Ensuite, on initialise deux variables supplémentaires — <code>minuteValue</code> et <code>secondValue</code>.</li> + <li>Les deux instructions <code>if</code> qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.</li> + <li>Le temps est au final la concaténation de <code>minuteValue</code>, un caractère deux-points, et <code>secondValue</code>.</li> + <li>Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.</li> + <li>La largeur que nous devons donner <code><div></code> intérieur est calculée en récupérant la largeur du <code><div></code> externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.</li> + <li>Nous assignons la largeur du <code><div></code> intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels.</li> +</ol> + +<h4 id="Corriger_play_et_pause">Corriger play et pause</h4> + +<p>Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action <code>rwd</code>/<code>fwd</code> et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple.</p> + +<p>Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction <code>stopMedia()</code> — n'importe où:</p> + +<pre class="brush: js">rwd.classList.remove('active'); +fwd.classList.remove('active'); +clearInterval(intervalRwd); +clearInterval(intervalFwd); +</pre> + +<p>Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction <code>playPauseMedia()</code> (juste avant le début de l'instruction <code>if</code>).</p> + +<p>À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions <code>windBackward()</code> et <code>windForward()</code>, puisqu'elles ont été ajoutées à la fonction <code>stopMedia()</code> à la place.</p> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Le <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/video-audio/finished">code terminé</a> est disponible sur Github (le <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">voir en direct</a>).</p> +</div> + +<h2 id="Sommaire">Sommaire</h2> + +<p>Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes.</p> + +<p>Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:</p> + +<ol> + <li> + <p>Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.</p> + </li> + <li> + <p>Parce que les éléments <code><audio></code> ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément <code><audio></code>. Essayez de le faire.</p> + </li> + <li> + <p>Trouvez un moyen de transformer le <code><div></code> interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode <code><a href="/fr/docs/Web/API/Element/getBoundingClientRect">getBoundingClientRect()</a></code>, et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet <code>event</code> du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:</p> + + <pre class="brush: js">document.onclick = function(e) { + console.log(e.x) + ',' + console.log(e.y) +}</pre> + </li> +</ol> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("HTMLMediaElement")}}</li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a> — simple guide aux <code><video></code> et <code><audio></code> HTML.</li> + <li><a href="/fr/Apps/Build/Audio_and_video_delivery">Intégration audio et vidéo</a> — guide détaillé sur l'intégration de média dans le navigateur, avec de nombreux conseils, astuces et liens vers des tutoriels plus avancés.</li> + <li><a href="/fr/Apps/Fundamentals/Audio_and_video_manipulation">Manipulation audio et vidéo</a> — guide détaillé pour manipuler l'audio et vidéo avec <a href="/fr/docs/Web/HTML/Canvas">Canvas API</a>, <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a>, et plus encore.</li> + <li>Les pages référence {{htmlelement("video")}} et {{htmlelement("audio")}}.</li> + <li> + <p><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par les éléments HTML audio et vidéo</a>.</p> + </li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<p> </p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> +</ul> |