diff options
Diffstat (limited to 'files/fr/learn/javascript')
25 files changed, 7035 insertions, 0 deletions
diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..6f53bebcd7 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html @@ -0,0 +1,241 @@ +--- +title: Construire vos propres fonctions +slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function +tags: + - Apprentissage + - Article + - Débutant + - Fonctions + - Guide + - I10n + - JavaScript + - Paramètres + - Scripting + - Tutoriel +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Savoir-faire de base, une compréhension minimale HTML et CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocs de code réutilisables</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.</td> + </tr> + </tbody> +</table> + +<h2 id="Apprentissage_actif_Construisons_une_fonction">Apprentissage actif : Construisons une fonction</h2> + +<p>La fonction que nous allons construire sera nommée <code>displayMessage()</code>. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction <a href="/en-US/docs/Web/API/Window/alert">alert()</a> du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :</p> + +<pre class="brush: js">alert('This is a message');</pre> + +<p>La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.</p> + +<p>La fonction <a href="/en-US/docs/Web/API/Window/alert">alert()</a> est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.</p> + +<div class="note"> +<p><strong>Note </strong>: Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.</p> +</div> + +<h2 id="La_fonction_de_base">La fonction de base</h2> + +<p>Pour commencer, mettons en place une fonction de base.</p> + +<div class="note"> +<p><strong>Note </strong>: Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">conventions de noms de variables</a>. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.</p> +</div> + +<ol> + <li>Commencez par faire une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a>. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.</li> + <li>Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <code><script> </code>: + <pre class="brush: js">function displayMessage() { + +}</pre> + Nous commençons avec le mot-clé <code>function</code>, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.</li> + <li>Enfin, ajoutez le code suivant à l'intérieur des accolades : + <pre class="brush: js">var html = document.querySelector('html'); + +var panel = document.createElement('div'); +panel.setAttribute('class', 'msgBox'); +html.appendChild(panel); + +var msg = document.createElement('p'); +msg.textContent = 'This is a message box'; +panel.appendChild(msg); + +var closeBtn = document.createElement('button'); +closeBtn.textContent = 'x'; +panel.appendChild(closeBtn); + +closeBtn.onclick = function() { + panel.parentNode.removeChild(panel); +}</pre> + </li> +</ol> + +<p>Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.</p> + +<p>La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée <code>html</code>, de façon à pouvoir l'utiliser plus tard :</p> + +<pre class="brush: js">var html = document.querySelector('html');</pre> + +<p>La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée <code>panel</code> (Dans la suite de l'article, nous parlerons simplement du panneau <code><div></code>.). Cet élément sera le conteneur extérieur de notre boîte de message.</p> + +<p>Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut <code>class</code> à notre panneau qui aura pour valeur <code>msgBox</code>. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe <code>.msgBox</code> dans le but de styliser la boîte de message ainsi que son contenu.</p> + +<p>Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable <code>html</code> créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <code><div></code> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <code><html></code>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.</p> + +<pre class="brush: js">var panel = document.createElement('div'); +panel.setAttribute('class', 'msgBox'); +html.appendChild(panel);</pre> + +<p>Les deux sections suivantes font usage des mêmes fonctions <code>createElement()</code> et <code>appendChild()</code> que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} — et pour les insèrer dans la page en tant qu'enfant du panneau <code><div></code>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.</p> + +<pre class="brush: js">var msg = document.createElement('p'); +msg.textContent = 'This is a message box'; +panel.appendChild(msg); + +var closeBtn = document.createElement('button'); +closeBtn.textContent = 'x'; +panel.appendChild(closeBtn);</pre> + +<p>Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.</p> + +<p>Le gestionnaire <code>onclick</code> est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire <code>onclick</code> une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <code><div></code>.</p> + +<pre class="brush: js">closeBtn.onclick = function() { + panel.parentNode.removeChild(panel); +}</pre> + +<p>Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :</p> + +<pre class="brush: html"><div class="msgBox"> + <p>This is a message box</p> + <button>x</button> +</div></pre> + +<p>Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.</p> + +<h2 id="Appeler_la_fonction">Appeler la fonction</h2> + +<p>À présent, nous avons notre fonction définie comme il faut dans notre balise <code><script></code>, mais il ne se passera rien si on laisse les choses en l'état.</p> + +<ol> + <li>Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : + <pre class="brush: js">displayMessage();</pre> + Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.</li> + <li> + <p>Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.</p> + + <p>Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.</p> + + <p>Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.</p> + </li> + <li>Supprimez la ligne précédente que vous avez ajoutée.</li> + <li>Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : + <pre class="brush: js">var btn = document.querySelector('button');</pre> + </li> + <li>Enfin, ajoutez la ligne suivante à la précédente : + <pre class="brush: js">btn.onclick = displayMessage;</pre> + D'une manière similaire à notre ligne <code>closeBtn.onclick...</code> à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.</li> + <li>Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.</li> +</ol> + +<p>Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :</p> + +<pre class="brush: js">btn.onclick = displayMessage();</pre> + +<p>Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.</p> + +<p>Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.</p> + +<h2 id="Améliorer_la_fonction_à_laide_de_paramètres">Améliorer la fonction à l'aide de paramètres</h2> + +<p>En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.</p> + +<ol> + <li>Premièrement, mettons à jour la première ligne : + <pre class="brush: js">function displayMessage() {</pre> + par : + + <pre class="brush: js">function displayMessage(msgText, msgType) {</pre> + Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.</li> + <li>Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : + <pre class="brush: js">msg.textContent = 'This is a message box';</pre> + avec : + + <pre class="brush: js">msg.textContent = msgText;</pre> + </li> + <li>Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : + <pre class="brush: js">btn.onclick = displayMessage;</pre> + par ce bloc : + + <pre class="brush: js">btn.onclick = function() { + displayMessage('Woo, this is a different message!'); +};</pre> + Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.</li> + <li>Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !</li> +</ol> + +<h3 id="Un_paramètre_plus_complexe">Un paramètre plus complexe</h3> + +<p>Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre <code>msgType</code>, la fonction affichera une icône et une couleur d'arrière-plan différentes.</p> + +<ol> + <li>Tout d'abord, téléchargez les icônes nécessaires à cet exercice (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé <code>icons</code> dans le même répertoire que votre fichier HTML. + + <div class="note"><strong>Note </strong>: icônes <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> et <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> trouvés sur iconfinder.com, et créés par <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Merci !</div> + </li> + <li>Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur <code>.msgBox</code> en changeant : + <pre class="brush: css">width: 200px;</pre> + par : + + <pre class="brush: css">width: 242px;</pre> + </li> + <li>Ensuite, ajoutez les lignes à l'intérieur de la règle CSS <code>.msgBox p { ... }</code> : + <pre class="brush: css">padding-left: 82px; +background-position: 25px center; +background-repeat: no-repeat;</pre> + </li> + <li>Maintenant, nous devons ajouter du code à notre fonction <code>displayMessage()</code> pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "<code>}</code>" de votre fonction : + <pre class="brush: js">if (msgType === 'warning') { + msg.style.backgroundImage = 'url(icons/warning.png)'; + panel.style.backgroundColor = 'red'; +} else if (msgType === 'chat') { + msg.style.backgroundImage = 'url(icons/chat.png)'; + panel.style.backgroundColor = 'aqua'; +} else { + msg.style.paddingLeft = '20px'; +}</pre> + Ici, quand <code>msgType</code> a la valeur <code>'warning'</code>, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si <code>msgType</code> a la valeur <code>'chat'</code>, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre <code>msgType</code> n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans <code>else { ... }</code> est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre <code>msgType</code> n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !</li> + <li>Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel <code>displayMessage()</code> : + <pre class="brush: js">displayMessage('Woo, this is a different message!');</pre> + par soit l'un ou l'autre : + + <pre class="brush: js">displayMessage('Your inbox is almost full — delete some mails', 'warning'); +displayMessage('Brian: Hi there, how are you today?','chat');</pre> + Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :</li> +</ol> + +<div class="note"> +<p><strong>Note </strong>: Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">version définitive sur GitHub</a> (aussi, vous pouvez tester la <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">démo</a>), ou nous demander de l'aide.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.</p> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p> diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.html b/files/fr/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..b7fa0fa08c --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,630 @@ +--- +title: Prendre des décisions dans le code — conditions +slug: Apprendre/JavaScript/Building_blocks/conditionals +tags: + - Article + - CodingScripting + - Conditionnel + - Débutant + - JavaScript + - Switch + - conditions + - else + - if + - ternaire +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +<p>{{LearnSidebar}}</p> + +<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p> + +<p>Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre comment utiliser les structures conditionnelles en JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Vous_laurez_à_une_condition_!..">Vous l'aurez à une condition !..</h2> + +<p>Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)</p> + +<p>Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png"></p> + +<h2 id="Instruction_if_..._else">Instruction if ... else</h2> + +<p>Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">instruction</a> <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if ... else</a></code>.</p> + +<h3 id="Syntaxe_élémentaire_if_..._else">Syntaxe élémentaire if ... else</h3> + +<p>La syntaxe élémentaire de <code>if...else</code> ressemble à cela en {{glossary("pseudocode")}}:</p> + +<pre>if (condition) { + code à exécuter si la condition est true +} else { + sinon exécuter cet autre code à la place +}</pre> + +<p>Ici nous avons:</p> + +<ol> + <li>Le mot‑clé <code>if</code> suivie de parenthèses.</li> + <li>Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">opérateurs de comparaison</a> que nous avons étudié dans le précédent module, et renverra <code>true</code> ou <code>false</code>.</li> + <li>Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie <code>true</code>.</li> + <li>Le mot‑clé <code>else</code>.</li> + <li>Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas <code>true</code>.</li> +</ol> + +<p>Ce code est facile à lire pour une personne — il dit « <strong>si</strong> la <strong>condition</strong> renvoie <code>true</code>, exécuter le code A, <strong>sinon</strong> exécuter le code B ».</p> + +<p>Notez qu'il n'est pas nécessaire d'inclure une instruction <code>else</code> et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :</p> + +<pre>if (condition) { + code à exécuter si la condition est true +} + +exécuter un autre code</pre> + +<p>Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera <strong>toujours</strong> exécuté, que la condition ait renvoyé <code>true</code> ou <code>false</code>. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code <em>ou</em> l'autre, et non les deux.</p> + +<p>Une dernière remarque, vous verrez quelques fois les instructions <code>if...else</code> écrites sans accolades, de manière abrégée, ainsi :</p> + +<pre>if (condition) code à exécuter si la condition est true +else exécute un autre code à la place</pre> + +<p>Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.</p> + +<h3 id="Un_exemple_concret">Un exemple concret</h3> + +<p>Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :</p> + +<pre class="brush: js">let coursesFaites = false; + +if (coursesFaites === true) { + let argentDePoche = 10; +} else { + let argentDePoche = 5; +}</pre> + +<p>Avec un tel code, la variable <code>coursesFaites</code> renvoie toujours <code>false</code>, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne <code>true</code> à la variable <code>coursesFaites</code> si l'enfant a fait les courses.</p> + +<div class="note"> +<p><strong>Note</strong> : Vous pouvez voir une <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">version plus complète de cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">version live</a>.)</p> +</div> + +<h3 id="else_if">else if</h3> + +<p>Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?</p> + +<p>Il existe un moyen d'enchaîner des choix / résultats supplémentaires à <code>if...else</code> — en utilisant <code>else if</code> entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre <code>if() { ... }</code> et <code>else { ... }</code> — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:</p> + +<pre class="brush: html line-numbers language-html" style="font-size: 16px !important; line-height: 24px !important;"><code class="language-html" style="font-size: 16px !important; line-height: 24px !important;"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"weather</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Select the weather type today: <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>weather<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>--Make a choice--<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sunny<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Sunny<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>rainy<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Rainy<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>snowing<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Snowing<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>overcast<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Overcast<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: js line-numbers language-js" style="font-size: 16px !important; line-height: 24px !important;"><code class="language-js" style="font-size: 16px !important; line-height: 24px !important;">const select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +const para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +select<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'change'</span><span class="punctuation token">,</span> setWeather<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">setWeather</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + const choice <span class="operator token">=</span> select<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'sunny'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'rainy'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'snowing'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'overcast'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p> + +<ol> + <li>Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.</li> + <li>Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <code><select></code> de sorte que la fonction <code>setWeather()</code> soit exécutée quand sa valeur change.</li> + <li>Quand cette fonction est exécutée, nous commençons par assigner à la variable <code>choice</code> la valeur actuellement sélectionnée dans l'élément <code><select></code>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de <code>choice</code>. Remarquez comment toutes les conditions sont testées avec des blocs <code>else if() {...}</code>, mis à part le tout premier testé avec un <code>bloc if() {...}</code>.</li> + <li>Le tout dernier choix, à l'intérieur du bloc <code>else {...}</code>, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est <code>true</code>. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.</li> +</ol> + +<div class="note"> +<p><strong>Note </strong>: Vous trouverez également <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">version live</a> ici.)</p> +</div> + +<h3 id="Une_note_sur_les_opérateurs_de_comparaison">Une note sur les opérateurs de comparaison</h3> + +<p>Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Mathématiques de base en JavaScript — nombres et opérateurs</a> article. Nos choix sont :</p> + +<ul> + <li><code>===</code> et <code>!==</code> — teste si une valeur est identique ou non à une autre.</li> + <li><code><</code> and <code>></code> —teste si une valeur est inférieure ou non à une autre.</li> + <li><code><=</code> and <code>>=</code> — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre.</li> +</ul> + +<div class="note"> +<p><strong>Note </strong>: Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.</p> +</div> + +<p>Nous souhaitons mentionner à propos des tests des valeurs booléennes (<code>true</code>/<code>false</code>) un modèle courant que vous rencontrerez souvent. Toute valeur autre que <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> ou une chaîne vide (<code>''</code>) renvoie <code>true</code> lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est <code>true</code>, ou même si elle existe (c'est-à-dire si elle n'est pas <code>undefined</code>).<br> + Par exemple :</p> + +<pre class="brush: js">const fromage = 'Comté'; + +if (fromage) { + console.log('Ouaips ! Du fromage pour mettre sur un toast.'); +} else { + console.log('Pas de fromage sur le toast pour vous aujourd\'hui.'); +}</pre> + +<p>Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :</p> + +<pre class="brush: js">let coursesFaites = false; + +if (coursesFaites) { // pas besoin d'écrire explicitement '=== true' + let argentDePoche = 10; +} else { + let argentDePoche = 5; +}</pre> + +<h3 id="if_..._else_imbriqué"> if ... else imbriqué</h3> + +<p>Il est parfaitement correct d'ajouter une déclaration <code>if...else</code> à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :</p> + +<pre class="brush: js">if (choice === 'sunny') { + if (temperature < 86) { + para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.'; + } else if (temperature >= 86) { + para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.'; + } +}</pre> + +<p>Même si tout le code fonctionne ensemble, chaque déclaration <code>if...else</code> fonctionne indépendamment de l'autre.</p> + +<h3 id="Opérateurs_logiques_AND_OR_et_NOT">Opérateurs logiques AND, OR et NOT</h3> + +<p>Si vous voulez tester plusieurs conditions sans imbriquer des instructions <code>if...else</code> , les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">opérateurs logiques</a> pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :</p> + +<ul> + <li><code>&&</code> — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à <code>true</code> pour que l'enemble de l'expression retourne <code>true</code>.</li> + <li><code>||</code> — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant <code>true</code> pour que l'ensemble de l'expression renvoie <code>true</code>.</li> +</ul> + +<p>Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :</p> + +<pre class="brush: js">if (choice === 'sunny' && temperature < 86) { + para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.'; +} else if (choice === 'sunny' && temperature >= 86) { + para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.'; +}</pre> + +<p>Ainsi, par exemple, le premier bloc de code ne sera exécuté que si <code>choice === 'sunny'</code> <em>ET</em> <code>temperature < 86</code> renvoient tous deux <code>true</code>.</p> + +<p>Voyons un petit exemple avec OR :</p> + +<pre class="brush: js">if (camionDeGlaces || etatDeLaMaison === 'on fire') { + console.log('Vous devriez sortir de la maison rapidement.'); +} else { + console.log('Vous pouvez probablement rester dedans.'); +}</pre> + +<p>Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur <code>!</code>, peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :</p> + +<pre class="brush: js">if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) { + console.log('Vous pouvez probablement rester dedans.'); +} else { + console.log('Vous devriez sortir de la maison rapidement.'); +}</pre> + +<p>Dans cet extrait, si la déclaration avec OR renvoie <code>true</code>, l'opérateur NOT va nier l'ensemble : l'expression retournera donc <code>false</code>.</p> + +<p>Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors <code>true</code> :</p> + +<pre class="brush: js">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { + // exécuter le code +}</pre> + +<p>Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer <code>true</code> séparées par des || (OR) opérateurs. Par exemple :</p> + +<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) { + // exécuter le code +}</pre> + +<p>Dans ce cas, la condition dans le <code>if(...) </code>sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours <code>true</code>. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :</p> + +<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) { + // exécuter le code +}</pre> + +<h2 id="Instruction_switch">Instruction switch</h2> + +<p>Les Instructions <code>if...else</code> font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.</p> + +<p>Les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch">instructions switch</a> sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :</p> + +<pre class="brush: js"><strong>switch (expression) {</strong> + <strong>case</strong> choix1<strong>:</strong> + exécuter ce code + <strong>break;</strong> + + <strong>case</strong> choix2<strong>:</strong> + exécuter ce code à la place + <strong>break;</strong> + + // incorporez autant de <strong>case</strong> que vous le souhaitez + + <strong>default:</strong> + sinon, exécutez juste ce code +<strong>}</strong></pre> + +<p>Ici nous avons</p> + +<ol> + <li>Le mot‑clé <code>switch</code> suivi de parenthèses.</li> + <li>Une expression ou une valeur mise entre les parenthèses.</li> + <li>Le mot‑clé <code>case</code> suivi d'une expression ou d'une valeur, et de deux‑points.</li> + <li>Le code exécuté si l'expression/valeur de <code>case</code> correspond à celles de <code>switch</code>.</li> + <li>Une déclaration <code>break</code>, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction <strong>switch</strong>.</li> + <li>Vous pouvez rajouter autant de <strong>cas</strong> que vous le souhaitez. (points 3–5)</li> + <li>Le mot‑clé <code>default</code>, suivi d'une même structure de code qu'aux points 3-5, sauf que <code>default</code> n'a pas de choix après lui et n'a donc pas besoin de l'instruction <code>break</code> puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option <code>default</code> qui sera exécutée si aucun choix ne correspond.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong> : Vous n'avez pas à inclure la section <code>default</code> — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.</p> +</div> + +<h3 id="Un_exemple_de_switch">Un exemple de switch</h3> + +<p>Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction <code>switch</code> à la place :</p> + +<pre class="brush: html"><label for="weather">Select the weather type today: </label> +<select id="weather"> + <option value="">--Make a choice--</option> + <option value="sunny">Sunny</option> + <option value="rainy">Rainy</option> + <option value="snowing">Snowing</option> + <option value="overcast">Overcast</option> +</select> + +<p></p></pre> + +<pre class="brush: js">const select = document.querySelector('select'); +const para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + + +function setWeather() { + let choice = select.value; + + switch (choice) { + case 'sunny': + para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; + break; + case 'rainy': + para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'; + break; + case 'snowing': + para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; + break; + case 'overcast': + para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; + break; + default: + para.textContent = ''; + } +}</pre> + +<p>{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}</p> + +<div class="note"> +<p><strong>Note</strong><strong> </strong>: Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">cours d'exécution </a>ici aussi.)</p> +</div> + +<h2 id="Opérateur_ternaire">Opérateur ternaire</h2> + +<p>Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">opérateur ternaire ou conditionnel</a> est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est <code>true</code> et une autre si elle est <code>false</code> — elle est utile dans certains cas, et occupe moins de place qu'un bloc <code>if...else</code> si votre choix est limité à deux possibilités à choisir via une condition <code>true</code>/<code>false</code>. Voici le pseudo‑code correspondant :</p> + +<pre>( condition ) ? exécuter ce code : exécuter celui‑ci à la place</pre> + +<p>Regardons cet exemple simple :</p> + +<pre class="brush: js">let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';</pre> + +<p>Ici, nous avons une variable nommée <code>est_anniversaire</code> — si elle est <code>true</code>, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si <code>est_anniversaire</code> renvoie <code>false</code>, nous disons simplement « Bonjour ».</p> + +<h3 id="Exemple_opérateur_ternaire">Exemple opérateur ternaire</h3> + +<p>L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.</p> + +<pre class="brush: html"><label for="theme">Select theme: </label> +<select id="theme"> + <option value="white">White</option> + <option value="black">Black</option> +</select> + +<h1>This is my website</h1></pre> + +<pre class="brush: js">const select = document.querySelector('select'); +const html = document.querySelector('html'); +document.body.style.padding = '10px'; + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +} + +select.onchange = function() { + ( select.value === 'black' ) ? update('black','white') : update('white','black'); +} +</pre> + +<p>{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction <code>update()</code>, qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.</p> + +<p>Nous avons également mis un écouteur d'événement <a href="https://developer.mozilla.org/fr/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — <code>select.value === 'black'</code>. Si le test renvoie <code>true</code>, nous exécutons la fonction <code>update()</code> avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie <code>false</code>, nous exécutons <code>update()</code> avec les paramètres noir et blanc, les couleurs du site seront inversées.</p> + +<div class="note"> +<p><strong>Note</strong><strong> </strong>: Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">cours d'exécution </a>ici aussi.)</p> +</div> + +<h2 id="Apprentissage_actif_un_calendrier_simple">Apprentissage actif : un calendrier simple</h2> + +<p>Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :</p> + +<ul> + <li>Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois.</li> + <li>Un pilote d'événement <code>onchange</code> pour détecter si la valeur choisie dans le menu <code><select></code> a été modifiée.</li> + <li>Une fonction <code>createCalendar()</code> qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}.</li> +</ul> + +<p>Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction <code>onchange</code>, juste au dessous du commentaire <code>// AJOUTER LA CONDITION ICI</code>. Elle doit :</p> + +<ol> + <li>Noter le mois choisi (enregistré dans la variable <code>choice</code>. Ce doit être la valeur de l'élément <code><select></code> après un changement, "Janvier" par exemple).</li> + <li>Faire en sorte que la variable nommée <code>days</code> soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.</li> +</ol> + +<p>Conseils :</p> + +<ul> + <li>Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.</li> + <li>Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut.</li> +</ul> + +<p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="output" style="height: 500px;overflow: auto;"> + <label for="month">Choisissez un mois : </label> + <select id="month"> + <option value="Janvier">Janvier</option> + <option value="Février">Février</option> + <option value="Mars">Mars</option> + <option value="Avril">Avril</option> + <option value="Mai">Mai</option> + <option value="Juin">Juin</option> + <option value="Juillet">Juillet</option> + <option value="Août">Août</option> + <option value="Septembre">Septembre</option> + <option value="Octobre">Octobre</option> + <option value="Novembre">Novembre</option> + <option value="Decembre">Décembre</option> + </select> + + <h1></h1> + + <ul></ul> +</div> + +<hr> + +<textarea id="code" class="playable-code" style="height: 500px;"> +var select = document.querySelector('select'); +var list = document.querySelector('ul'); +var h1 = document.querySelector('h1'); + +select.onchange = function() { + var choice = select.value; + + // AJOUTER LA CONDITION ICI + + createCalendar(days, choice); +} + +function createCalendar(days, choice) { + list.innerHTML = ''; + h1.textContent = choice; + for (var i = 1; i <= days; i++) { + const listItem = document.createElement('li'); + listItem.textContent = i; + list.appendChild(listItem); + } +} + +createCalendar(31,'Janvier'); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +</pre> + +<pre class="brush: css">.output * { + box-sizing: border-box; +} + +.output ul { + padding-left: 0; +} + +.output li { + display: block; + float: left; + width: 25%; + border: 2px solid white; + padding: 5px; + height: 40px; + background-color: #4A2DB6; + color: white; +} +</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + updateCode(); +}); + +solution.addEventListener('click', function() { + textarea.value = jsSolution; + updateCode(); +}); + +var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Activité_plus_de_choix_de_couleurs_!">Activité : plus de choix de couleurs !</h2> + +<p>Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive <code>switch</code> qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive <code>switch</code> au dessous du commentaire <code>// AJOUT D'UNE DIRECTIVE SWITCH</code> :</p> + +<ul> + <li>Elle doit accepter la variable <code>choice</code> comme expression d'entrée.</li> + <li>Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique.</li> + <li>Chaque cas exécutera la fonction <code>update()</code> à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets.</li> +</ul> + +<p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><div class="output" style="height: 300px;"> + <label for="theme">Choisissez un thème : </label> + <select id="theme"> + <option value="white">Blanc</option> + <option value="black">Noir</option> + <option value="purple">Mauve</option> + <option value="yellow">Jaune</option> + <option value="psychedelic">Psychédélique</option> + </select> + + <h1>Voici mon site Web</h1> +</div> + +<hr> + +<textarea id="code" class="playable-code" style="height: 450px;"> +const select = document.querySelector('select'); +const html = document.querySelector('.output'); + +select.onchange = function() { + let choice = select.value; + + // AJOUT D'UNE DIRECTIVE SWITCH +} + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +}</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + updateCode(); +}); + +solution.addEventListener('click', function() { + textarea.value = jsSolution; + updateCode(); +}); + +const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n let choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien <a href="https://developer.mozilla.org/fr/Apprendre#Nous_contacter">contactez‑nous</a> pour une aide.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Opérateurs de comparaison</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs#Les_instructions_conditionnelles">Les instructions conditionnelles</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else">Référence if...else</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Référence opérateur conditionnel (ternaire)</a></li> +</ul> + +<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans du code — conditions</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — blocs de code réutilisables</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Gallerie d'images</a></li> +</ul> diff --git a/files/fr/learn/javascript/building_blocks/events/index.html b/files/fr/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..10f0118ecf --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,585 @@ +--- +title: Introduction aux évènements +slug: Apprendre/JavaScript/Building_blocks/Evènements +tags: + - Article + - Codage + - Débutant + - Evènement + - Gestionnaire d'événement + - Guide + - JavaScript +translation_of: Learn/JavaScript/Building_blocks/Events +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary"><span id="result_box" lang="fr"><span>Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez.</span> <span>Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information.</span> <span>Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs.</span> <span>Ce ne sera pas une étude exhaustive;</span> mais seulement<span> ce que vous devez savoir à ce stade.</span></span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td><span id="result_box" lang="fr"><span>Connaissances de base en informatique, une compréhension de base de HTML et CSS, </span></span><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td><span id="result_box" lang="fr"><span>Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Une_série_d'événements_heureux">Une série d'événements heureux</h2> + +<p><span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez </span></span>— <span lang="fr"><span>le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit.</span> <span>Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> + +<p><span id="result_box" lang="fr"><span>Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou</span> <span>toute la fenêtre du navigateur.</span> <span>Il y a beaucoup de types différents </span></span><span lang="fr"><span>d'événements qui peuvent se produire, par exemple :</span></span></p> + +<ul> + <li><span>L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.</span></li> + <li><span lang="fr"><span>L'utilisateur appuie sur une touche du clavier.</span> </span></li> + <li><span lang="fr"><span>L'utilisateur redimensionne ou ferme la fenêtre du navigateur.</span> </span></li> + <li><span lang="fr"><span>Une page web finissant de se charger.</span> </span></li> + <li><span lang="fr"><span>Un formulaire en cours de soumission</span> </span></li> + <li><span lang="fr"><span>Une vidéo en cours de lecture, en pause ou en fin de lecture.</span> </span></li> + <li><span lang="fr"><span>Une erreur qui survient.</span></span></li> +</ul> + +<p><span id="result_box" lang="fr"><span>Vous vous en rendrez compte (notamment en jetant un coup d'œil à la</span></span> section <span lang="fr"><span>MDN </span></span><a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des événements</a><span lang="fr"><span> ), il y a <strong>beaucoup</strong> d'événements auxquels vous pouvez répondre.</span><br> + <br> + <span>Chaque événement disponible a un <strong>gestionnaire d'événement</strong>, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera.</span> <span>Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous <strong>enregistrons un gestionnaire d'événements</strong>.</span> <span>Notez que les gestionnaires d'événements sont parfois appelés <strong>écouteurs d'événements</strong> - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble.</span> <span>L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.</span></span></p> + +<div class="note"> +<p><strong>Note</strong>: il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur</p> +</div> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<p>Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:</p> + +<pre class="brush: html"><button>Change color</button></pre> + +<div class="hidden"> +<pre class="brush: css">button { margin: 10px };</pre> +</div> + +<p>Le JavaScript ressemblera à ça :</p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +function random(number) { + return Math.floor(Math.random()*(number+1)); +} + +btn.onclick = function() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p> </p> + +<p>Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable <code>btn</code> pointe sur un élément <code><button></code> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété <code>onclick</code> du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <code><body></code> .<br> + <br> + Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <code><button></code>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.</p> + +<p>Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">ce lien.</a></p> + +<p> </p> + +<h3 id="Ce_ne_sont_pas_que_des_pages_web">Ce ne sont pas que des pages web</h3> + +<p><span id="result_box" lang="fr"><span>Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript.</span> <span>En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.</span></span></p> + +<p>Par exemple, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> <span id="result_box" lang="fr"><span>est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur.</span></span> Le modèle <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme <code>on()</code> pour enregistrer un écouteur d'événement, et <code>once()</code> pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a> propose un bon exemple d'utilisation.</p> + +<p><span id="result_box" lang="fr"><span>Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs </span></span>—<span lang="fr"><span> comme améliorations de la fonctionnalité du navigateur </span></span>—<span lang="fr"><span> à l'aide d'une technologie appelée</span></span> <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions">WebExtensions</a>. <span id="result_box" lang="fr"><span>Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent</span></span> — les écouteurs d'événements sont sensibles à la casse (p.ex.<code>onMessage</code> plutôt que <code>onmessage</code>), et doivent êtres combinés à la fonction <code>addListener</code>. Jetez un oeil à la page <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage page</a> pour voir un exemple.</p> + +<p><span id="result_box" lang="fr"><span>Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage;</span> <span>nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.</span></span></p> + +<h2 id="De_quelle_manière_utiliser_les_événements_Web">De quelle manière utiliser les événements Web ?</h2> + +<p><span id="result_box" lang="fr"><span>Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche.</span> <span>Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.</span></span></p> + +<h3 id="Les_propriétés_du_gestionnaire_d'événement">Les propriétés du gestionnaire d'événement</h3> + +<p><span id="result_box" lang="fr"><span>Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours.</span> <span>Revenons à l'exemple ci-dessus :</span></span></p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +btn.onclick = function() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p>La propriété <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> <span id="result_box" lang="fr"><span>est la propriété du gestionnaire d'événement utilisée dans cette situation.</span> <span>C'est essentiellement une propriété comme les autres disponibles sur le bouton</span></span> (p.ex. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), mais d'un type spécial —<span id="result_box" lang="fr"><span> lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.</span></span></p> + +<p><span id="result_box" lang="fr"><span>Vous pouvez également définir la propriété du gestionnaire d'</span></span>événement<span lang="fr"><span> comme étant égale au nom d'une fonction définie </span></span>(comme nous l'avons vu dans <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a>). Le code suivant fonctionnera tout pareil:</p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.onclick = bgChange;</pre> + +<p><span id="result_box" lang="fr"><span>De nombreuses propriétés de gestionnaire d'événement sont disponibles.</span> <span>Faisons une expérience.</span></span></p> + +<p><span class="short_text" id="result_box" lang="fr"><span>Tout d'abord, faites une copie locale de</span></span> <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, <span id="result_box" lang="fr"><span>et ouvrez-le dans votre navigateur.</span> <span>C'est juste une copie de l'exemple simple </span></span><span lang="fr"><span>de couleur aléatoire avec lequel nous avons déjà joué dans cet article.</span> <span>Maintenant, changez</span></span> <code>btn.onclick</code> <span id="result_box" lang="fr"><span>pour lui attribuer, tour à tour,</span></span><span lang="fr"><span> les différentes valeurs qui suivent, et observez le résultat:</span></span></p> + +<ul> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — <span id="result_box" lang="fr"><span>La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau).</span> <span>Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.</span></span></li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — La couleur change seulement si l'élément est double-cliqué.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — La couleur change si l'on appuie sur une touche du clavier. <code>keypress</code> se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que <code>keydown</code> et <code>keyup</code> se réfèrent respectivement à l'appui et au relâchement sur la touche. <span id="result_box" lang="fr"><span>Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a>, qui représente la fenêtre entière du navigateur.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — <span id="result_box" lang="fr"><span>La couleur changera respectivement</span></span><span lang="fr"><span> lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.</span></span></li> +</ul> + +<p><span id="result_box" lang="fr"><span>Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire</span></span> <code>onclick</code> peut être enregistré sur presque n'importe quel élément), <span id="result_box" lang="fr"><span>alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser</span></span> <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).</p> + +<h3 id="Les_gestionnaires_d'événements_en_ligne_ne_les_utilisez_pas_!">Les gestionnaires d'événements en ligne : ne les utilisez pas !</h3> + +<p><span id="result_box" lang="fr"><span>Vous pourriez également voir un motif comme celui-ci dans votre code:</span></span></p> + +<pre class="brush: html"><button onclick="bgChange()">Press me</button> +</pre> + +<pre class="brush: js">function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">le voir s'exécuter</a>).</p> +</div> + +<p><span id="result_box" lang="fr"><span>La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des <strong>attributs HTML du gestionnaire d'événement</strong> (c'est-à-dire <strong>les gestionnaires d'événements en ligne</strong>) comme celui présenté ci-dessus</span></span> —<span lang="fr"><span> la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient.</span> <span>L'exemple ci-dessus appelle une fonction définie dans un</span></span> élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :</p> + +<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> + +<p><span id="result_box" lang="fr"><span>Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement;</span> <span>cependant, vous ne devriez pas les utiliser </span></span>—<span lang="fr"><span> ils sont considérés comme une mauvaise pratique.</span> <span>Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.</span><br> + <br> + <span>Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser </span></span>— <span lang="fr"><span>garder votre JavaScript au même endroit est préférable;</span> <span>s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.</span></span></p> + +<p><span id="result_box" lang="fr"><span>Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée.</span> <span>Un bouton ça va, mais que faire si vous avez 100 boutons ?</span> <span>Vous devez ajouter 100 attributs au fichier;</span> <span>la maintenance se transformerait très vite en un cauchemar.</span> <span>Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :</span></span></p> + +<pre class="brush: js">var buttons = document.querySelectorAll('button'); + +for (var i = 0; i < buttons.length; i++) { + buttons[i].onclick = bgChange; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.</span></span></p> +</div> + +<h3 id="addEventListener()_et_removeEventListener()">addEventListener() et removeEventListener()</h3> + +<p>Le dernier type de mécanisme d'événement est défini dans le <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> , qui fournit aux navigateurs une nouvelle fonction: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. <span id="result_box" lang="fr"><span>Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente.</span> <span>Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:</span></span></p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">le voir s'exécuter</a>).</p> +</div> + +<p><span id="result_box" lang="fr"><span>Dans la fonction</span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span> , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse.</span> <span>Notez qu'il est parfaitement approprié de placer tout le code dans la fonction </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span>, dans une fonction anonyme, comme ceci:</span></span></p> + +<pre class="brush: js">btn.addEventListener('click', function() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +});</pre> + +<p><span id="result_box" lang="fr"><span>Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment.</span> <span>Pour commencer, il existe une fonction réciproque, </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code><span lang="fr"><span>, qui supprime un écouteur ajouté précédemment.</span> <span>Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:</span></span></p> + +<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> + +<p><span id="result_box" lang="fr"><span>Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés.</span> <span>De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.</span><br> + <br> + <span>D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur.</span> <span>Les deux gestionnaires suivants ne seraient pas appliqués:</span></span></p> + +<pre class="brush: js">myElement.onclick = functionA; +myElement.onclick = functionB;</pre> + +<p><span id="result_box" lang="fr"><span>Comme la deuxième ligne remplacerait la valeur de </span></span><code>onclick</code><span lang="fr"><span> définie par le premier.</span> <span>Cependant, ceci fonctionnerait:</span></span></p> + +<pre class="brush: js">myElement.addEventListener('click', functionA); +myElement.addEventListener('click', functionB);</pre> + +<p><span id="result_box" lang="fr"><span>Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.</span><br> + <br> + <span>En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement.</span> Celles<span>-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de </span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> et <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p> + +<h3 id="Quel_mécanisme_devrais-je_utiliser">Quel mécanisme devrais-je utiliser ?</h3> + +<p><span id="result_box" lang="fr"><span>Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.</span><br> + <br> + <span>Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:</span></span><br> + </p> + +<ul> + <li> <span>Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8).</span> <span>Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.</span></li> + <li><span lang="fr"> <span> Les événements</span></span> du <span lang="fr"><span>DOM Niveau 2 </span></span>(<code>addEventListener()</code>, etc.) <span id="result_box" lang="fr"><span>sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9).</span> <span>Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.</span></span></li> +</ul> + +<p><span id="result_box" lang="fr"><span>Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant </span></span><code>removeEventListener()</code><span lang="fr"><span>, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire.</span> <span>Par exemple, vous pouvez appeler </span></span><code>addEventListener('click', function() { ... })</code><span lang="fr"><span> sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument.</span> <span>Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:</span></span></p> + +<pre class="brush: js">element.onclick = function1; +element.onclick = function2; +etc.</pre> + +<div class="note"> +<p><span id="result_box" lang="fr"><span><strong>Note:</strong> Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements </span></span><span lang="fr"><span>différents des nouveaux navigateurs.</span> <span>Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple </span></span><code>jQuery</code><span lang="fr"><span>) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs.</span> <span>Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.</span></span></p> +</div> + +<h2 id="D'autres_concepts_liés_aux_événements">D'autres concepts liés aux événements</h2> + +<p><span id="result_box" lang="fr"><span>Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements.</span> <span>Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.</span></span></p> + +<h3 id="L'objet_événement">L'objet événement</h3> + +<p><span id="result_box" lang="fr"><span>Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que </span></span> <code>event</code>, <code>evt</code>, <span lang="fr"><span>ou simplement </span></span><code>e</code><span lang="fr"><span> .</span> <span>C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires.</span> <span>Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:</span></span></p> + +<pre class="brush: js">function bgChange(e) { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + e.target.style.backgroundColor = rndCol; + console.log(e); +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">le voir s'exécuter</a>).</p> +</div> + +<p><span id="result_box" lang="fr"><span>Ici, vous pouvez voir que nous incluons un objet événement, <strong>e</strong>, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur </span></span><code>e.target</code><span lang="fr"><span> - qui est le bouton lui-même.</span> <span>La propriété </span></span><code>target</code><span lang="fr"><span> de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire.</span> <span>Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.</span></span></p> + +<div class="note"> +<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements.</span> </span><code>e</code>/<code>evt</code>/<code>event</code><span lang="fr"><span> sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir.</span> <span>C'est toujours bon de s'en tenir à une norme.</span></span></p> +</div> + +<p><code>e.target</code><span id="result_box" lang="fr"><span>est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux.</span> <span>Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus.</span> <span>Il est utile de toujours pouvoir affecter une action à </span></span> <code>e.target</code>, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> pour le code source ; et ici pour le voir <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">s'exécuter</a>), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire <code>onclick</code> <span id="result_box" lang="fr"><span>à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:</span></span></p> + +<pre class="brush: js">var divs = document.querySelectorAll('div'); + +for (var i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } +}</pre> + +<p><span id="result_box" lang="fr"><span>Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):</span></span></p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Useful event target example</title> + <style> + div { + background-color: red; + height: 100px; + width: 25%; + float: left; + } + </style> + </head> + <body> + <script> + for (var i = 1; i <= 16; i++) { + var myDiv = document.createElement('div'); + document.body.appendChild(myDiv); + } + + function random(number) { + return Math.floor(Math.random()*number); + } + + function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + return rndCol; + } + + var divs = document.querySelectorAll('div'); + + for (var i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } + } + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<p><span id="result_box" lang="fr"><span>La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement </span></span>(voir la liste complète sur {{domxref("Event")}} ). <span id="result_box" lang="fr"><span>Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner.</span></span> Le <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, par exemple, a un événement <code>dataavailable</code> , <span id="result_box" lang="fr"><span>qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire).</span></span> <span id="result_box" lang="fr"><span>L'objet événement du gestionnaire </span></span><a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a><span lang="fr"><span> correspondant dispose d'une propriété </span></span><code>data</code><span lang="fr"><span> contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.</span></span></p> + +<h3 id="Éviter_le_comportement_par_défaut">Éviter le comportement par défaut</h3> + +<p><span id="result_box" lang="fr"><span>Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut.</span> <span>L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé.</span> <span>Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou</span> <span>la même page, si une autre n'est pas spécifiée.)</span>.<br> + <br> + <span>Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs.</span> <span>Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation.</span> <span>Regardons un exemple simple.</span><br> + <br> + <span>Tout d'abord, un simple </span></span><span lang="fr"><span>formulaire HTML qui vous oblige à entrer votre nom et votre prénom:</span></span></p> + +<pre class="brush: html"><form> + <div> + <label for="fname">First name: </label> + <input id="fname" type="text"> + </div> + <div> + <label for="lname">Last name: </label> + <input id="lname" type="text"> + </div> + <div> + <input id="submit" type="submit"> + </div> +</form> +<p></p></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} +</pre> +</div> + +<p><span id="result_box" lang="fr"><span>Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement </span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a><span lang="fr"><span> (l'</span></span>événement<span lang="fr"><span> submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides.</span> <span>Si c'est le cas, nous appelons la fonction </span></span> <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code><span lang="fr"><span> sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :</span></span></p> + +<pre class="brush: js">var form = document.querySelector('form'); +var fname = document.getElementById('fname'); +var lname = document.getElementById('lname'); +var submit = document.getElementById('submit'); +var para = document.querySelector('p'); + +form.onsubmit = function(e) { + if (fname.value === '' || lname.value === '') { + e.preventDefault(); + para.textContent = 'You need to fill in both names!'; + } +}</pre> + +<p><span id="result_box" lang="fr"><span>Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable.</span> <span>Le résultat est le suivant :</span></span></p> + +<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: pour le code source, voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (et le voir s'exécuter <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ici</a>.)</p> +</div> + +<h3 id="Le_bouillonnement_et_la_capture">Le bouillonnement et la capture</h3> + +<p><span id="result_box" lang="fr"><span>Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas.</span> <span>Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément.</span> <span>Regardons un exemple pour faciliter cela - ouvrez</span></span> l'exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> dans un nouvel onglet (et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source </a>dans un autre). C'est également disponible en live ci-dessous.</p> + +<div class="hidden"> +<h6 id="Hidden_video_example">Hidden video example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Show video box example</title> + <style> + div { + position: absolute; + top: 50%; + transform: translate(-50%,-50%); + width: 480px; + height: 380px; + border-radius: 10px; + background-color: #eee; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); + } + + .hidden { + left: -50%; + } + + .showing { + left: 50%; + } + + div video { + display: block; + width: 400px; + margin: 40px auto; + } + + </style> + </head> + <body> + <button>Display video</button> + + <div class="hidden"> + <video> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + </div> + + <script> + + var btn = document.querySelector('button'); + var videoBox = document.querySelector('div'); + var video = document.querySelector('video'); + + btn.onclick = function() { + displayVideo(); + } + + function displayVideo() { + if(videoBox.getAttribute('class') === 'hidden') { + videoBox.setAttribute('class','showing'); + } + } + + videoBox.addEventListener('click',function() { + videoBox.setAttribute('class','hidden'); + }); + + video.addEventListener('click',function() { + video.play(); + }); + + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p><span id="result_box" lang="fr"><span>Ceci est un exemple assez simple qui montre et cache</span></span> une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:</p> + +<pre class="brush: html"><button>Display video</button> + +<div class="hidden"> + <video> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> +</div></pre> + +<p>Quand le {{htmlelement("button")}} <span id="result_box" lang="fr"><span>est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise</span></span> <code><div></code> de <code>hidden</code> à <code>showing</code> <span id="result_box" lang="fr"><span>( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement </span></span><span lang="fr"><span>la boîte hors de l'écran et sur l'écran.) :</span></span></p> + +<pre class="brush: js">btn.onclick = function() { + videoBox.setAttribute('class', 'showing'); +}</pre> + +<p><span id="result_box" lang="fr"><span>Nous ajoutons ensuite quelques gestionnaires d'événements </span></span> <code>onclick</code> <span lang="fr"><span>supplémentaires - le premier à </span></span><code><div></code><span lang="fr"><span> et le second à </span></span><code><video></code><span lang="fr"><span>.</span> <span>L'idée est que lorsque l'on clique sur la zone du </span></span><code><div></code><span lang="fr"><span> en dehors de la vidéo, la boîte doit être masquée à nouveau;</span> <span>Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. </span></span></p> + +<pre>videoBox.onclick = function() { + videoBox.setAttribute('class', 'hidden'); +}; + +video.onclick = function() { + video.play(); +};</pre> + +<p><span id="result_box" lang="fr"><span>Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que </span></span><code><div></code><span lang="fr"><span> est également caché en même temps.</span> <span>C'est parce que la vidéo est dans le </span></span><code><div></code><span lang="fr"><span> - elle en fait partie - alors que cliquer sur la vidéo lance les <em>deux</em> gestionnaires d'événements ci-dessus.</span></span></p> + +<h4 id="Explication_du_bouillonnement_et_de_la_capture">Explication du bouillonnement et de la capture</h4> + +<p>Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), <span id="result_box" lang="fr"><span>les navigateurs modernes utilisent deux phases différentes: la phase de <strong>capture</strong> et la phase de <strong>bouillonnement</strong></span></span><span lang="fr"><span>.</span><br> + <br> + <span>Dans la phase de capture:</span></span></p> + +<ul> + <li><span lang="fr"><span>Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément </span></span>({{htmlelement("html")}}) dispose d'un gestionnaire d'événement <code>onclick</code> enregistré pendant la phase de capture et le lance si c'est le cas.</li> + <li><span id="result_box" lang="fr"><span>Ensuite, il passe à l'élément suivant à l'intérieur de </span></span><code><html></code><span lang="fr"><span> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.</span></span></li> +</ul> + +<p><span id="result_box" lang="fr"><span>Dans la phase de bouillonnement, l'opposé exact se produit:</span><br> + <br> + <span>Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement </span></span><code>onclick</code><span lang="fr"><span> enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.</span><br> + <span>Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément </span></span><code><html></code><span lang="fr"><span>.</span></span></p> + +<p><a href="https://mdn.mozillademos.org/files/16064/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> + +<p>(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)</p> + +<p><span id="result_box" lang="fr"><span>Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement.</span> <span>Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément </span></span><code><video></code><span lang="fr"><span> vers l'élément </span></span><code><html></code><span lang="fr"><span>.</span> <span>Comme ceci :</span></span></p> + +<ul> + <li>Il trouve d'abord le gestionnaire <code>video.onclick...</code> et le lance, de manière à ce que la vidéo soit jouée en premier.</li> + <li>Ensuite il trouve le gestionnaire <code>videoBox.onclick...</code> et le lance, de sorte que la vidéo est cachée.</li> +</ul> + +<h4 id="Régler_le_problème_avec_stopPropagation()">Régler le problème avec stopPropagation()</h4> + +<p><span id="result_box" lang="fr"><span>C'est un comportement ennuyeux, mais il y a un moyen de l'éviter !</span> <span>L'objet événement standard dispose d'une fonction appelée</span></span> <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, <span id="result_box" lang="fr"><span>qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.</span><br> + <br> + <span>Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:</span></span></p> + +<pre class="brush: js">video.onclick = function(e) { + e.stopPropagation(); + video.play(); +};</pre> + +<p>Vous pouvez faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source show-video-box.html </a> <span id="result_box" lang="fr"><span>et le modifier vous-même ou regarder le résultat ici : </span></span> <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (ou voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">code source</a>).</p> + +<div class="note"> +<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Pourquoi s'embêter à capturer et bouillonner ?</span> <span>Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements.</span> <span>Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.</span></span></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps.</span> <span>Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec</span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, et en positionnant la troisième propriété, qui est optionnelle, sur<code>true</code>.</p> +</div> + +<h4 id="Délégation_d'événement">Délégation d'événement</h4> + +<p><span id="result_box" lang="fr"><span>Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les </span></span>événement<span lang="fr"><span>, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.</span><br> + <br> + <span>Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement </span></span><code>click</code><span lang="fr"><span> sur la balise parente </span></span><code><ul></code><span lang="fr"><span>, et il apparaîtra sur les éléments de la liste.</span></span></p> + +<p><span id="result_box" lang="fr"><span>Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir</span></span> <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p><span id="result_box" lang="fr"><span>Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage.</span> <span>Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.</span><br> + <br> + <span>En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur).</span> <span>Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.</span></span></p> + +<p><span id="result_box" lang="fr"><span>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou</span></span> <a href="/en-US/Learn#Contact_us">contactez-nous </a>pour demander de l'aide.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.</li> + <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.</li> + <li><a href="/en-US/docs/Web/Events">Event reference</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> + +<p> </p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code - les conditions</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">les fonctions - des blocs de code réutilisables</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construisez votre propre fonction</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">les valeurs de retour des fonction</a><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">s</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événement</a><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">s</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> +</ul> + +<p> </p> diff --git a/files/fr/learn/javascript/building_blocks/functions/index.html b/files/fr/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..43f3e916e1 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,397 @@ +--- +title: Fonctions — des blocs de code réutilisables +slug: Apprendre/JavaScript/Building_blocks/Fonctions +translation_of: Learn/JavaScript/Building_blocks/Functions +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">Les <strong>fonctions</strong> sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequis:</th> + <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Comprendre les concepts fondamentaux des fonctions JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Où_trouve-ton_des_fonctions">Où trouve-t'on des fonctions ?</h2> + +<p>En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.</p> + +<p>Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — <code>()</code> — et que vous n'utilisez <strong>pas</strong> une structure usuelle et intégrée du langage telle que les boucles <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a>, <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while </a>ou<a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while"> do...while </a>, ou une déclaration <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else </a>, vous utilisez une fonction.</p> + +<h2 id="Les_fonctions_intégrées_du_navigateur">Les fonctions intégrées du navigateur</h2> + +<p>Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :</p> + +<pre class="brush: js">var myText = 'I am a string'; +var newString = myText.replace('string', 'sausage'); +console.log(newString); +// La fonction replace () sélectionne une chaîne, +// remplace une sous-chaîne par une autre, et renvoie +// la nouvelle chaîne avec les modifications effectuées.</pre> + +<p>Ou à chaque fois que nous avons manipulé un tableau :</p> + +<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs']; +var madeAString = myArray.join(' '); +console.log(madeAString); +// La fonction join() sélectionne un tableau, rassemble +// tous les éléments du tableau dans une chaîne, +// et renvoie cette nouvelle chaîne.</pre> + +<p>Ou à chaque fois que nous avons généré un nombre aléatoire :</p> + +<pre class="brush: js">var myNumber = Math.random(); +// la fonction random() génère un nombre aléatoire +// entre 0 et 1, et renvoie +// ce nombre</pre> + +<p>... nous avons utilisé une fonction !</p> + +<div class="note"> +<p><strong>Note </strong>: N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.</p> +</div> + +<p>Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand<strong> invoquez</strong> (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.</p> + +<p>Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">section antérieure de notre cours</a> pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.</p> + +<h2 id="Fonctions_versus_méthodes">Fonctions versus méthodes</h2> + +<p>Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des <strong>méthodes</strong>. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.</p> + +<p>La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle <strong>propriétés</strong>) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.</p> + +<p>Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. </p> + +<h2 id="Fonctions_personnalisées">Fonctions personnalisées</h2> + +<p>Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html </a>tiré de l'article <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">les boucles dans le code </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">code source </a>complet), nous avons inclus une fonction personnalisée <code>draw()</code>qui ressemblait à ça :</p> + +<pre class="brush: js">function draw() { + ctx.clearRect(0,0,WIDTH,HEIGHT); + for (var i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } +}</pre> + +<p>Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :</p> + +<pre class="brush: js">draw();</pre> + +<p>au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction <code>random()</code> trois fois, comme définie par le code suivant :</p> + +<pre class="brush: js">function random(number) { + return Math.floor(Math.random()*number); +}</pre> + +<p>Nous avions besoin de cette fonction car la fonction intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.</p> + +<h2 id="Invoquer_des_fonctions">Invoquer des fonctions</h2> + +<p>Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.</p> + +<pre class="brush: js">function myFunction() { + alert('hello'); +} + +myFunction() +// appelle la fonction une fois</pre> + +<h2 id="Fonctions_anonymes">Fonctions anonymes</h2> + +<p>Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :</p> + +<pre class="brush: js">function myFunction() { + alert('hello'); +}</pre> + +<p>Mais vous pouvez également créer une fonction qui n'a pas de nom :</p> + +<pre class="brush: js">function() { + alert('hello'); +}</pre> + +<p>Ceci est une <strong>fonction anonyme </strong>— elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :</p> + +<pre class="brush: js">var myButton = document.querySelector('button'); + +myButton.onclick = function() { + alert('hello'); +}</pre> + +<p>Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.</p> + +<p>Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :</p> + +<pre class="brush: js">var myGreeting = function() { + alert('hello'); +}</pre> + +<p>Cette fonction peut désormais être invoquée en utilisant :</p> + +<pre class="brush: js">myGreeting();</pre> + +<p>Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :</p> + +<pre class="brush: js">var anotherGreeting = function() { + alert('hello'); +}</pre> + +<p>Cette fonction peut désormais être invoquée en utilisant au choix :</p> + +<pre class="brush: js">myGreeting(); +anotherGreeting();</pre> + +<p>Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :</p> + +<pre class="brush: js">function myGreeting() { + alert('hello'); +}</pre> + +<p>Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :</p> + +<pre class="brush: js">myButton.onclick = function() { + alert('hello'); + // Je peux mettre ici autant + // de code que je le souhaite +}</pre> + +<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2> + +<p>Certaines fonctions nécessitent que l'on définisse des <strong>paramètres</strong> lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.</p> + +<div class="note"> +<p><strong>Note </strong>: Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.</p> +</div> + +<p>Par exemple, la fonction intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : </p> + +<pre class="brush: js">var myNumber = Math.random();</pre> + +<p>La fonction de chaîne intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :</p> + +<pre class="brush: js">var myText = 'I am a string'; +var newString = myText.replace('string', 'sausage');</pre> + +<div class="note"> +<p><strong>Note </strong>: Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.</p> +</div> + +<p>Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> a des paramètres optionnels :</p> + +<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs']; +var madeAString = myArray.join(' '); +// renvoie 'I love chocolate frogs' +var madeAString = myArray.join(); +// renvoie 'I,love,chocolate,frogs'</pre> + +<p><span id="result_box" lang="fr"><span>Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.</span></span></p> + +<h2 id="La_portée_des_fonctions_et_les_conflits.">La portée des fonctions et les conflits.</h2> + +<p>Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre <strong>portée</strong>, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.</p> + +<p>Le plus haut niveau en dehors de toutes vos fonctions est appelé la <strong>portée globale</strong>. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.</p> + +<p>Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes <span id="result_box" lang="fr"><span>parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits</span></span>. Cela peut être fait de manière malveillante ou simplement par accident.</p> + +<p><span id="result_box" lang="fr"><span>Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :</span></span></p> + +<pre class="brush: html"><!-- Excerpt from my HTML --> +<script src="first.js"></script> +<script src="second.js"></script> +<script> + greeting(); +</script></pre> + +<pre class="brush: js">// first.js +var name = 'Chris'; +function greeting() { + alert('Hello ' + name + ': welcome to our company.'); +}</pre> + +<pre class="brush: js">// second.js +var name = 'Zaptec'; +function greeting() { + alert('Our company is called ' + name + '.'); +}</pre> + +<p><span id="result_box" lang="fr"><span>Les deux fonctions que vous voulez appeler s'appellent</span></span> <code>greeting()</code>, <span id="result_box" lang="fr"><span>mais vous ne pouvez accéder qu'à la fonction </span></span><code>greeting()</code> du second fichier <code>second.js</code> — <span id="result_box" lang="fr"><span>car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du</span></span> premier fichier <code>first.js</code>.</p> + +<div class="note"> +<p><strong>Note </strong>: Vous pouvez voir cet exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">s'exécuter sur GitHub</a> (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">code source</a>).</p> +</div> + +<p>En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.</p> + +<p>C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> + +<p>Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.</p> + +<h3 id="Apprentissage_actif_Jouer_avec_la_portée">Apprentissage actif : Jouer avec la portée</h3> + +<p>Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.</p> + +<ol> + <li>Tout d'abord, faisons un copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Celui-ci contient deux fonctions appelées <code>a()</code> et <code>b()</code>, et trois variables — <code>x</code>, <code>y</code>, and <code>z</code> — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée <code>output()</code>, qui prend un seul paramètre et le renvoie dans un paragraphe de la page.</li> + <li>Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.</li> + <li>Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : + <pre class="brush: js">output(x);</pre> + Vous devriez voir la valeur de la variable <code>x</code> renvoyée à l'écran.</li> + <li>Maintenant essayez d'entrer les commandes suivantes : + <pre class="brush: js">output(y); +output(z);</pre> + + <p>Toutes les deux devraient vous renvoyer un message d'erreur du type : "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Pourquoi ? À cause de la portée de la fonction — <code>y</code> and <code>z</code> sont enfermées dans les fonctions <code>a()</code> et <code>b()</code>, donc <code>output()</code> ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.</p> + </li> + <li> + <p>Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer <code>a()</code> et <code>b()</code> pour qu'elles aient la forme suivante :</p> + + <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> y <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> + <span class="function token">output</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> z <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span> + <span class="function token">output</span><span class="punctuation token">(</span>z<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions <code>a()</code> et <code>b()</code> depuis la console JavaScript : + + <pre class="brush: js">a(); +b();</pre> + Vous devriez voir les valeurs <code>y</code> and <code>z</code> renvoyées sur la page. Cela fonctionne très bien car la fonction <code>output()</code> est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction <code>output()</code> est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.</li> + <li>Maintenant essayer de mettre à jour le code comme ceci : + <pre class="brush: js">function a() { + var y = 2; + output(x); +} + +function b() { + var z = 3; + output(x); +}</pre> + Sauvegardez et rechargez à nouveau dans la console JavaScript :</li> + <li> + <pre class="brush: js">a(); +b();</pre> + Les deux fonctions <code>a()</code> et <code>b()</code> appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction <code>output()</code> n'est pas dans la même portée que celle dans laquelle <code>x</code> est définie, <code>x</code> est une variable globale et donc elle est disponible dans n'importe quelle partie du code.</li> + <li>Pour finir, essayez de mettre à jour le code comme ceci : + <pre class="brush: js">function a() { + var y = 2; + output(z); +} + +function b() { + var z = 3; + output(y); +}</pre> + </li> + <li>Sauvegardez et rechargez à nouveau dans la console JavaScript : + <pre class="brush: js">a(); +b();</pre> + Cette fois l'appel de <code>a()</code> et <code>b()</code> renverra l'erreur "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" — parce que l'appel de la fonction <code>output()</code> et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.</li> +</ol> + +<div class="note"> +<p><strong>Note </strong>: Ces règles de portée ne s'appliquent pas aux boucles (ex. <code>for() { ... }</code>) ni aux instructions conditionnelles (ex. <code>if() { ... }</code>) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.</p> +</div> + +<div class="note"> +<p><strong>Note </strong>: Le message d'erreur <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.</p> +</div> + +<ul> +</ul> + +<h3 id="Des_fonctions_à_lintérieur_de_fonctions">Des fonctions à l'intérieur de fonctions</h3> + +<div id="gt-input-tool"> +<div class="cc-ctr gt-src-cc-normal" id="gt-src-cc-ctr"><span id="result_box" lang="fr"><span>Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction.</span> <span>Ceci est souvent utilisé comme un moyen de garder le code bien organisé </span></span>—<span lang="fr"><span> si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :</span></span></div> +</div> + +<pre class="brush: js">function myBigFunction() { + var myValue; + + subFunction1(); + subFunction2(); + subFunction3(); +} + +function subFunction1() { + console.log(myValue); +} + +function subFunction2() { + console.log(myValue); +} + +function subFunction3() { + console.log(myValue); +} +</pre> + +<p><span id="result_box" lang="fr"><span>Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte.</span> <span>L'exemple ci-dessus entraînerait une erreur</span></span> <code>ReferenceError: myValue is not defined</code>, car bien que la valeur <code>myValue</code> <span id="result_box" lang="fr"><span>est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées.</span> <span>Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :</span></span></p> + +<pre class="brush: js">function myBigFunction() { + var myValue = 1; + + subFunction1(myValue); + subFunction2(myValue); + subFunction3(myValue); +} + +function subFunction1(value) { + console.log(value); +} + +function subFunction2(value) { + console.log(value); +} + +function subFunction3(value) { + console.log(value); +}</pre> + +<h2 id="Conclusion">Conclusion</h2> + +<p><span id="result_box" lang="fr"><span>Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.</span></span></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> — aborde<span class="short_text" id="result_box" lang="fr"><span> certaines fonctionnalités avancées non incluses ici.</span></span></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeur par défaut des arguments</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions fléchées</a> — références avancées</li> +</ul> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux évènements</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> +</ul> diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.html b/files/fr/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..07a51499fd --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,163 @@ +--- +title: Galerie d'images +slug: Apprendre/JavaScript/Building_blocks/Image_gallery +tags: + - Apprendre + - Boucles + - Débutant + - Evaluation + - Gestionnaire d'événement + - JavaScript + - conditions + - 'l10n:priority' + - Écriture de code + - évènements +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> + +<p>Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript, nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en vous aidant à créer un élément assez commun que vous verrez sur de nombreux sites web. Une galerie JavaScript animée.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Conditions préalables:</th> + <td>Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Point_de_départ">Point de départ</h2> + +<p>Pour réaliser cette évaluation, vous devez récupérer le fichier<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true"> ZIP</a> et le décompresser quelque par sur votre ordinateur.</p> + +<p>Vous pouvez également utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. <font><font>Si l'éditeur en<span> </span></font><font>ligne que<span> </span></font><font>vous utilisez ne dispose pas de<span> </span></font><font>panneaux JavaScript/CSS séparés, n'hésitez pas<span> </span></font><font>à utiliser les éléments</font><font><span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'><script></code><font><font>/</font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'><style></code><font><font> dans la page HTML.</font></font></p> + +<div class="note"> +<p><strong>Note</strong>: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.</p> +</div> + +<h2 id="Résumé_du_projet">Résumé du projet</h2> + +<p><font>Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript;<span> </span></font><font>vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel.<span> </span></font><font>Le corps HTML ressemble à ceci:</font></p> + +<pre class="brush: html"><h1>Image gallery example</h1> + +<div class="full-img"> + <img class="displayed-img" src="images/pic1.jpg"> + <div class="overlay"></div> + <button class="dark">Darken</button> +</div> + +<div class="thumb-bar"> + +</div></pre> + +<p>L'exemple ressemble à ceci:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p> + +<ul> +</ul> + +<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Les parties les plus intéressantes du fichier CSS de l'exemple:</span></p> + +<ul> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnez les trois éléments en absolu à l’intérieur du<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>full-img <div></code><font><font>: le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><img></code><font><font> dans lequel l’image est affichée grandeur nature, un <span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><div></code><font><font> vide</font></font> <font><font>dimensionné à la même taille que le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><img></code><font><font> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><button></code><font><font>qui est utilisé pour contrôler l'effet d'assombrissement.</font></font></li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Réglez la largeur des images à l'intérieur de<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>thumb-bar <div></code><font><font>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.</font></font></li> +</ul> + +<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Votre JavaScript doit:</span></p> + +<ul> + <li>Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <code><img></code> à l'intérieur de <code>thumb-bar <div></code> qui va incorporer cette image dans la page.</li> + <li>Associer un gestionnaire d'événement <code>onclick</code> à chaque <code><img></code> à l'intérieur de <code>thumb-bar <div></code> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément <code>displayed-img <img></code>.</li> + <li>Associer un gestionnaire d'événement <code>onclick</code> au <code><button></code> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image <font><font>grandeur nature</font></font>. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.</li> +</ul> + +<p>Pour vous donner une idée, regardez l'<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">exemple</a> (Ne regardez pas le code source!).</p> + +<h2 id="Les_différentes_étapes">Les différentes étapes</h2> + +<p>Les sections suivantes décrivent ce que vous avez à faire.</p> + +<h3 id="Itération_sur_les_images">Itération sur les images</h3> + +<p>Nous vous avons fourni des lignes qui storent une référence à <code>thumb-bar <div></code> dans une variable nommée <code>thumbBar</code>, créent un nouvel élément <code><img></code>, définissent son attribut <code>src</code> à un emplacement de valueur <code>xxx</code>, et ajoutent ce nouvel élément <code><img></code> dans <code>thumbBar</code>.</p> + +<p>Vous avez besoin de:</p> + +<ol> + <li>Ajouter votre code en-dessous du commentaire <em>Looping through images</em> à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.</li> + <li>Remplacez, pour chaque itération, la valeur <code>xxx</code> de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut <code>src</code> dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li> +</ol> + +<h3 id="Ajout_dun_gestionnaire_onclick_à_chaque_miniature">Ajout d'un gestionnaire onclick à chaque miniature</h3> + +<p>À chaque itération, vous devez ajouter un gestionnaire <code>onclick</code> au <code>newImage</code> courant. Il doit:</p> + +<ol> + <li>Trouver la valeur de l'attribut <code>src</code> de l'image courante. Cela peut être fait avec la fonction <code><a href="/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> sur <code><img></code>, en lui passant le paramètre <code>"src"</code> à chaque fois. Mais comment avoir l'image? Utiliser <code>newImage</code> ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de <code>src</code> sera toujours celle du dernier <code><img></code>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <code><img></code> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?</li> + <li>Exécuter une fonction, en lui passant en paramètre la fameuse valeur de <code>src</code>. Vous pouvez nommer la fonction à votre guise.</li> + <li>Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut <code>src</code> de <code>displayed-img <img></code> à la valeur du <code>src</code> passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<code><img></code> concerné dans une variable nommée <code>displayedImg</code>. Notez que nous voulons une fonction nommée.</li> +</ol> + +<h3 id="Écrire_le_gestionnaire_du_bouton_dassombrissement">Écrire le gestionnaire du bouton d'assombrissement</h3> + +<p>Il ne reste que notre <code><button></code> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <code><button></code> dans une variable appelée <code>btn</code>. Vous devez ajouter un gestionnaire <code>onclick</code> qui:</p> + +<ol> + <li>Vérifie la classe appliquée à <code><button></code> — à nouveau, vous pouvez utiliser <code>getAttribute()</code>.</li> + <li>Si le nom de classe est <code>"dark"</code>, changer la classe du <code><button></code> pour <code>"light"</code> (avec <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <code><div></code> par <code>"rgba(0,0,0,0.5)"</code>.</li> + <li>Si le nom de classe n'est pas <code>"dark"</code>, changer la classe du <code><button></code> pour <code>"dark"</code>, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <code><div></code> par <code>"rgba(0,0,0,0)"</code>.</li> +</ol> + +<p>Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3.</p> + +<pre class="brush: js">btn.setAttribute('class', xxx); +btn.textContent = xxx; +overlay.style.backgroundColor = xxx;</pre> + +<h2 id="Conseil">Conseil</h2> + +<ul> + <li>Vous n'avez pas besoin d'éditer le code HTML ni le code CSS.</li> +</ul> + +<h2 id="Évaluation_ou_aide_supplémentaire">Évaluation ou aide supplémentaire</h2> + +<p>Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :</p> + +<ol> + <li>Mettez votre travail dans un éditeur partageable en ligne tel que <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a>.</li> + <li>Rédiger un sujet pour demander une évaluation et/ou une aide à le <a href="https://discourse.mozilla.org/c/mdn">forum Discourse du MDN</a>. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : + <ul> + <li>Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".</li> + <li>Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.</li> + <li>Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.</li> + <li>Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.</li> + </ul> + </li> +</ol> + +<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">sur le fil de discussion de cet exercice</a>, ou sur <a href="irc://irc.mozilla.org/mdn">#mdn</a> du canal IRC de <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!</p> + +<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> +</ul> diff --git a/files/fr/learn/javascript/building_blocks/index.html b/files/fr/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..7efffb563e --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/index.html @@ -0,0 +1,55 @@ +--- +title: Principaux blocs en JS +slug: Apprendre/JavaScript/Building_blocks +tags: + - Auto-évaluation + - Boucles + - Débutant + - Fonctions + - Guide + - Modules + - conditions + - évènements +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{JsSidebar}}</div> + +<div>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.</p> + +<h2 id="Prérequis">Prérequis</h2> + +<p>Avant de commencer ce module, vous devriez connaître les bases du <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">HTML </a>et du <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">CSS </a>et avoir suivi le module précédent, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">JavaScript Premiers Pas.</a></p> + +<div class="note"> +<p><strong>Note </strong>: Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> .</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/conditionals">Prendre des décisions dans votre code — les conditions</a></dt> + <dd>Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles</a></dt> + <dd>Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Functions">Les fonctions — réutiliser des blocs de code</a></dt> + <dd>Un autre concept essentiel en programmation est celui de <strong>fonctions. </strong>Les<strong> fonctions</strong> permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.</dd> + <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Créez votre propre fonction</a></dt> + <dd>L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Return_values">Les valeurs de retour des fonctions</a></dt> + <dd>Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction aux événements</a></dt> + <dd>Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.</dd> +</dl> + +<h2 id="Auto-évaluation">Auto-évaluation</h2> + +<p>L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galerie de photos</a></dt> + <dd>Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.</dd> +</dl> + +<p>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}} </p> diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.html b/files/fr/learn/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..820a4d09e2 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.html @@ -0,0 +1,873 @@ +--- +title: Les boucles dans le code +slug: Apprendre/JavaScript/Building_blocks/Looping_code +tags: + - Article + - CodingScripting + - DO + - Débutant + - Guide + - JavaScript + - Learn + - Loop + - break + - continue + - for + - 'l10n:priority' + - while +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre comment utiliser les boucles dans JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Laissez-moi_dans_la_boucle">Laissez-moi dans la boucle</h2> + +<p>Boucles, boucles, boucles. Alors qu'elles sont associées aux <a href="https://fr.wikipedia.org/wiki/Boucles_d%27or_et_les_Trois_Ours">cheveux d'une célèbre héroïne de fiction</a>, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par <strong>itérer</strong> en langage de programmeur.</p> + +<p>Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p> + +<p>Une boucle a normalement un ou plusieurs des composants suivants :</p> + +<ul> + <li> Un <strong>compteur</strong>, qui est initialisé à une certaine valeur - c'est le point de départ de la boucle ("Départ : Je n'ai pas de nourriture / I have no food", ci-dessus).</li> + <li>Une <strong>condition de sortie</strong>, qui est le critère grâce auquel la boucle s'arrête - la plupart du temps, il s'agira d'une certaine valeur que le compteur doit atteindre. Elle est illustrée ci-dessus par "Ai-je assez de nourriture ? / Have I got enough food?". Disons qu'il aura besoin de 10 portions de nourriture pour nourir sa famille.</li> + <li>Un <strong>itérateur</strong>, qui incrémente généralement le compteur petit-à-petit à chaque boucle successive, jusqu'à ce que ceui-ci remplisse la condition de sortie. Nous n'avons pas explicitement illustré cela ci-dessus, mais nous pouvons penser que le fermier peut récolter 2 portions de nourriture par heure. On peut donc dire que, toutes les heures, la quantité de nourriture collectée est incrémentée de 2, et il regarde s'il a assez de nourriture. S'il a atteint 10 portions (la condition de sortie), il peut arrêter sa récolte et rentrer chez lui, satisfait de sa journée.</li> +</ul> + +<p>En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :</p> + +<pre>loop(nourriture = 0; besoinNourriture = 10) { + if (nourriture = besoinNourriture) { + exit loop; + // Nous avons assez de nourriture, on rentre + } else { + nourriture += 2; // On doit rester 1 heure de plus + // La boucle se répète ensuite + } +}</pre> + +<p>La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.</p> + +<h3 id="À_quoi_ça_sert">À quoi ça sert ?</h3> + +<p>Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, <strong>les boucles ne font rien d'autre que répéter la même action encore et encore</strong>, ce qui peut s'avérer utile pour <strong>effectuer rapidement des tâches répétitives</strong>.</p> + +<p>Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !</p> + +<p>Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html" title="L'élément <canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations."><code><canvas></code></a> (appuyez sur le bouton <em>Update</em> pour lancer le programme à nouveau et voir différentes dispositions aléatoires).</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Random canvas circles</title> + <style> + html { + width: 100%; + height: inherit; + background: #ddd; + } + + canvas { + display: block; + } + + body { + margin: 0; + } + + button { + position: absolute; + top: 5px; + left: 5px; + } + </style> + </head> + <body> + + <button>Update</button> + + <canvas></canvas> + + <script> + const bouton = document.querySelector('button'); + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + + let WIDTH = document.documentElement.clientWidth; + let HEIGHT = document.documentElement.clientHeight; + + canvas.width = WIDTH; + canvas.height = HEIGHT; + + function random(number) { + return Math.floor(Math.random() * number); + } + + function draw() { + ctx.clearRect(0, 0, WIDTH, HEIGHT); + for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } + } + + bouton.addEventListener('click',draw); + + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 400) }}</p> + +<p>Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :</p> + +<pre class="brush: js">for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); +}</pre> + +<p>Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.</p> + +<p>Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :</p> + +<pre class="brush: js">ctx.beginPath(); +ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; +ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); +ctx.fill();</pre> + +<p>Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.</p> + +<h2 id="La_boucle_standard">La boucle standard</h2> + +<p>Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a>. Elle a la syntaxe suivante :</p> + +<pre>for (initialisation; condition de sortie; expression finale) { + // code à exécuter +}</pre> + +<p>Nous avons ici :</p> + +<ol> + <li>Le mot-clé <code>for</code>, suivi par des parenthèses.</li> + <li>A l'intérieur des parenthèses, on a trois objets : + <ol> + <li>Une <strong>initialisation</strong> — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer <strong>compteur</strong>.</li> + <li>Une <strong>condition de sortie</strong> — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.</li> + <li>Une <strong>expression finale</strong> — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.</li> + </ol> + </li> + <li>Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.</li> +</ol> + +<p>Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.</p> + +<pre class="brush: js">const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; +let info = "Mes chat s'appellent "; +const paragraphe = document.querySelector('p'); + +for (let i = 0; i < chats.length; i++) { + info += chats[i] + ', '; +} + +paragraphe.textContent = info;</pre> + +<p>Cela nous donne la sortie suivante :</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Exemple de boucles</title> + </head> + <body> + + <p></p> + + <script> + const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; + let info = "Mes chats s'appellent "; + const paragraphe = document.querySelector('p'); + + for (let i = 0; i < chats.length; i++) { + info += chats[i] + ', '; + } + + paragraphe.textContent = info; + + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}</p> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez trouver aussi cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">exemple de code sur GitHub</a> (et<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html"> le voir tourner en live</a>).</p> +</div> + +<p>Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :</p> + +<ol> + <li>L'itérateur, <code>i</code>, commence à <code>0</code> (<code>let i = 0</code>).</li> + <li>On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que <code>i < chats.length</code> est vrai, la boucle continuera à s'exécuter.</li> + <li>Au sein de la boucle, on concatène les élèments présents dans cette boucle (<code>cats[i]</code> est <code>cats[quelque soit la valeur de i lors de l'iteration]</code>) avec une virgule et un espace, à la fin de la variable <code>info</code>. Donc : + <ol> + <li>Pendant le premier lancement, <code>i = 0</code>, donc <code>cats[0] + ', '</code> sera concaténé à ("Bill, ")</li> + <li>Au second lancement, <code>i = 1</code>, donc <code>cats[1] + ', '</code> et sera concaténé à ("Jeff, ")</li> + <li>Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à <code>i</code> (<code>i++</code>), et alors le processus recommence encore.</li> + </ol> + </li> + <li>Quand <code>i</code> devient égal à <code>cats.length</code>, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Nous avons fait sortir la condition <code>i < cats.length</code>, et pas <code>i <= cats.length</code>, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré <code>i</code> à <code>0</code>, et allons allers jusqu'à <code>i = 4</code> (l'index du dernier item de la table/tableau). <code>cats.length</code> retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à <code>i = 5</code>, cela retournerai <code>undefined</code> pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que <code>cats.length</code> (<code>i <</code>), ce n'est pas la même chose que <code>cats.length</code> (<code>i <=</code>).</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.</p> +</div> + +<p>Un petit problème est que nous avons laissé la phrase de sortie mal formée :</p> + +<blockquote> +<p>Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,</p> +</blockquote> + +<p>Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :</p> + +<pre class="brush: js">for (let i = 0; i < cats.length; i++) { + if (i === cats.length - 1) { + info += 'and ' + cats[i] + '.'; + } else { + info += cats[i] + ', '; + } +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">GitHub</a> (et aussi le <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">voir en ligne</a>).</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: Avec for — comme avec toutes les boucles — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p> +</div> + +<h2 id="Quitter_une_boucle_avec_break">Quitter une boucle avec break</h2> + +<p>Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a>. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch">instructions switch </a>: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.</p> + +<p>C'est la même chose avec les boucles – un <code>break</code> quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.</p> + +<p>Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :</p> + +<pre class="brush: html"><label for="search">Search by contact name: </label> +<input id="search" type="text"> +<button>Search</button> + +<p></p></pre> + +<p>Maintenant sur le JavaScript :</p> + +<pre class="brush: js">const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975']; +const paragraphe = document.querySelector('p'); +const input = document.querySelector('input'); +const bouton = document.querySelector('button'); + +bouton.addEventListener('click', function() { + let searchName = input.value; + input.value = ''; + input.focus(); + for (let i = 0; i < contacts.length; i++) { + let splitContact = contacts[i].split(':'); + if (splitContact[0] === searchName) { + paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; + break; + } else { + paragraphe.textContent = 'Contact not found.'; + } + } +});</pre> + +<div class="hidden"> +<h6 id="Hidden_code_3">Hidden code 3</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple contact search example</title> + </head> + <body> + + <label for="search">Search by contact name: </label> + <input id="search" type="text"> + <button>Search</button> + + <p></p> + + <script> + const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975']; + const paragraphe = document.querySelector('p'); + const input = document.querySelector('input'); + const bouton = document.querySelector('button'); + + bouton.addEventListener('click', function() { + let searchName = input.value; + input.value = ''; + input.focus(); + for (let i = 0; i < contacts.length; i++) { + let splitContact = contacts[i].split(':'); + if (splitContact[0] === searchName) { + paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.'; + break; + } else { + paragraphe.textContent = 'Contact not found.'; + } + } + }); + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}</p> + +<ol> + <li>Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.</li> + <li>Ensuite, nous attachons un écouteur d'événement au bouton (<code>bouton</code>), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.</li> + <li>Nous stockons la valeur saisie dans l'input dans une variable appelée <code>searchName</code>, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.</li> + <li>Maintenant sur la partie intéressante, la boucle for : + <ol> + <li>Nous commençons le compteur à <code>0</code>, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à <code>contacts.length</code>, et incrémentons <code>i</code> par 1 après chaque itération de la boucle.</li> + <li>À l'intérieur de la boucle, nous divisons d'abord le contact actuel (<code>contacts[i]</code>) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé <code>splitContact</code>.</li> + <li>Nous utilisons ensuite une instruction conditionnelle pour tester si <code>splitContact[0] </code>(le nom du contact) est égal au <code>searchName</code> entré. Si c'est le cas, nous introduisons une <code>string / chaîne de caractère</code><strong> </strong>dans le paragraphe pour indiquer quel est le numéro du contact et utiliser <code>break</code> pour terminer la boucle.</li> + </ol> + </li> + <li>Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.</li> +</ol> + +<div class="note"> +<p><strong>Note </strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">voir en ligne</a>).</p> +</div> + +<h2 id="Passer_des_itérations_avec_continue">Passer des itérations avec continue</h2> + +<p>L'instruction <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a> fonctionne d'une manière similaire à <code>break</code>, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).</p> + +<p>Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :</p> + +<pre class="brush: js">let num = input.value; + +for (let i = 1; i <= num; i++) { + let sqRoot = Math.sqrt(i); + if (Math.floor(sqRoot) !== sqRoot) { + continue; + } + + paragraphe.textContent += i + ' '; +}</pre> + +<p>Ici la sortie :</p> + +<div class="hidden"> +<h6 id="Hidden_code_4">Hidden code 4</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Integer squares generator</title> + </head> + <body> + + <label for="number">Enter number: </label> + <input id="number" type="text"> + <button>Generate integer squares</button> + + <p>Output: </p> + + <script> + const paragraphe = document.querySelector('p'); + const input = document.querySelector('input'); + const bouton = document.querySelector('button'); + + bouton.addEventListener('click', function() { + paragraphe.textContent = 'Output: '; + let num = input.value; + input.value = ''; + input.focus(); + for (let i = 1; i <= num; i++) { + let sqRoot = Math.sqrt(i); + if (Math.floor(sqRoot) !== sqRoot) { + continue; + } + + paragraphe.textContent += i + ' '; + } + }); + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}</p> + +<ol> + <li>Dans ce cas, l'entrée doit être un nombre (<code>num</code>). La boucle <code>for</code> est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée <code>num</code>, et un itérateur ajoutera 1 au compteur à chaque fois.</li> + <li>À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i), </a><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt">, </a>puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor">Math.floor() </a>fait au nombre auquel il est passé).</li> + <li>Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (<code>! ==</code>), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction <code>continue</code> pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.</li> + <li>Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction <code>continue</code> ne soit pas exécutée; à la place, nous concaténons la valeur <code>i </code>actuelle plus un espace sur la fin du contenu du paragraphe.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">voir en ligne</a>).</p> +</div> + +<h2 id="while_et_do_..._while">while et do ... while</h2> + +<p><code>for</code> n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.</p> + +<p>D'abord, regardons la boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a>. La syntaxe de cette boucle ressemble à ceci:</p> + +<pre>initializer +while (exit-condition) { + // code to run + + final-expression +}</pre> + +<p>Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé <code>while </code>au lieu de <code>for</code>.</p> + +<p>Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.</p> + +<p>Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:</p> + +<pre class="brush: js">let i = 0; + +while (i < cats.length) { + if (i === cats.length - 1) { + info += 'and ' + cats[i] + '.'; + } else { + info += cats[i] + ', '; + } + + i++; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Cela fonctionne toujours comme prévu regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">Voir en ligne</a> le code complet).</p> +</div> + +<p>La boucle<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/do...while"> do...while</a> est très similaire, mais dénote une variation par rapport à la structure de la boucle while :</p> + +<pre>initializer +do { + // code to run + + final-expression +} while (exit-condition)</pre> + +<p>Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé <code>do </code>précède directement les accolades contenant le code à exécuter et l'expression finale.</p> + +<p>Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé <code>while</code>. Dans une boucle <code>do ... while</code>, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).</p> + +<p>Réécrivons notre exemple de listing de chat pour utiliser une boucle <code>do ... while </code>:</p> + +<pre class="brush: js">let i = 0; + +do { + if (i === cats.length - 1) { + info += 'and ' + cats[i] + '.'; + } else { + info += cats[i] + ', '; + } + + i++; +} while (i < cats.length);</pre> + +<div class="note"> +<p><strong>Note</strong>: Encore, cela fonctionne toujours comme prévu — regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">Voir en ligne</a> le code complet).</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p> +</div> + +<h2 id="Apprentissage_actif_Lancer_le_compte_à_rebours_!">Apprentissage actif : Lancer le compte à rebours !</h2> + +<p>Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :</p> + +<ul> + <li>Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — <code>let i = 10; </code></li> + <li>Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie <code><div></code> que nous avons selectionnée en utilisant : <code>const output = document.querySelector('.output');</code> En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle : + <ul> + <li><code>const paragraphe = document.createElement('p');</code> — crée un nouveau paragraphe.</li> + <li><code>output.appendChild(para);</code> — ajoute le paragraphe à la sortie <code><div></code>.</li> + <li><code>paragraphe.textContent =</code> — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.</li> + </ul> + </li> + <li>Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : <code>paragraphe.textContent = )</code> + <ul> + <li>Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.</li> + <li>Si le nombre est 0, écrire "Blast off!" dans le paragraphe.</li> + <li>Pour tout autre nombre, écrire simplement le nombre dans le paragraphe.</li> + </ul> + </li> + <li>Noubliez pas d'inclure un itérateur ! Quoi qu'il en soit, dans cet exemple nous comptons à rebours après chaque itération, pas de manière croissante, alors vous ne voudrez pas <code>i++</code> — Comment allez vous créer l'itération décroissante ?</li> +</ul> + +<p>Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p> + +<div class="hidden"> +<h6 id="Active_learning">Active learning</h6> + +<pre class="brush: html"><h2>Sortie en direct</h2> +<div class="output" style="height: 410px;overflow: auto;"> + +</div> +<h2>Code modifiable</h2> +<p class="a11y-label">Appuyer sur Échap pour décibler le code</p> +<textarea id="code" class="playable-code" style="height: 300px;"> +const output = document.querySelector('.output'); +output.innerHTML = ''; + +// let i = 10; + +// <code>const paragraphe </code>= document.createElement('p'); +// <code>paragraphe</code>.textContent = ; +// output.appendChild(para); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const code = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code;<code class="language-js"> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span></code> + updateCode(); +}); + +solution.addEventListener('click', function() {<code class="language-js"> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span></code> + updateCode(); +}); +<code class="language-js"> +<span class="keyword token">let</span> jsSolution <span class="operator token">=</span> <span class="string token">'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> +</code> +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); +<code class="language-js"> +<span class="comment token">// empêcher la pression de la touche de tabulation</span> de cibler +<span class="comment token">// un </span>autre élément <span class="comment token">et insère une tabulation dans le textarea</span> + +textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeydown</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="parameter token">text</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">let</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">let</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeyup</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code> +</pre> +</div> + +<p>{{ EmbedLiveSample('Active_learning', '100%', 780) }}</p> + +<h2 id="Apprentissage_actif_remplir_une_liste_d'invités.">Apprentissage actif : remplir une liste d'invités.</h2> + +<p>Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.</p> + +<p>Plus précisément, nous attendons de vous :</p> + +<ul> + <li>Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau <code>people</code>. Vous aurez besoin de commencer avec un initialiseur type <code>let i = 0;</code> , mais quelle sera la condition de sortie</li> + <li>Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle. + <ul> + <li>Si tel est le cas, concaténez l'élément à la fin du paragraphe <code>refused</code> du <code>textContent</code>, suivi d'une virgule et d'un espace.</li> + <li>Dans le cas contraire, concaténez l'élément à la fin du paragraphe <code>admitted</code> du <code>textContent</code> suivi d'une virgule et d'un espace.</li> + </ul> + </li> +</ul> + +<p>Nous vous avons déjà fourni les éléments suivants :</p> + +<ul> + <li><code>let i = 0;</code> — Votre initialiseur.</li> + <li><code>refused.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>refused.textContent</code>.</li> + <li><code>admitted.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>admitted.textContent</code>.</li> +</ul> + +<p>Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères </a>pour obtenir de l'aide.</p> + +<p>Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p> + +<div class="hidden"> +<h6 id="Active_learning_2">Active learning 2</h6> + +<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">px</span><span class="punctuation token">;</span><span class="property token">overflow</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>admitted<span class="punctuation token">"</span></span><span class="punctuation token">>Admettre </span></span>: <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>refused<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Refuser : <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>Appuyer sur Échap pour décibler le coder<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="token unit">px</span><span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95</span><span class="token unit">%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; + +const admitted = document.querySelector('.admitted'); +const refused = document.querySelector('.refused'); +admitted.textContent = 'Admit: '; +refused.textContent = 'Refuse: ' +</code> +// let i = 0; + +// refused.textContent += ; +// admitted.textContent += ; + +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2</span> <span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span><span class="token unit">px</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span></span> <span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span><span class="token unit">rem</span><span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98</span><span class="token unit">%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body</span> <span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">let</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">eval</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">let</span> jsSolution <span class="operator token">=</span> <span class="string token">'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeydown</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="parameter token">text</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">let</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">let</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeyup</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Active_learning_2', '100%', 580) }}</p> + +<h2 id="Quel_type_de_boucle_utiliser">Quel type de boucle utiliser ?</h2> + +<p>Pour des usages basiques les boucles <code>for</code>, <code>while</code>, et <code>do...while</code> sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.</p> + +<p>Premièrement <code>for</code>:</p> + +<pre>for (initialisation; condition de sortie; expression finale) { + // code à exécuter +}</pre> + +<p><code>while</code>:</p> + +<pre>initialisation +while (condition de sortie) { + // code à exécuter + + expression finale +}</pre> + +<p>et enfin <code>do...while</code>:</p> + +<pre>initialisation +do { + // code à exécuter + + expression finale +} while (condition de sortie)</pre> + +<p>Nous recommandons <code>for</code>, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.</p> + +<div class="note"> +<p><strong>Note</strong>: Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itérations</a>.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !</p> + +<p>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à <a href="https://developer.mozilla.org/fr/Apprendre#Nous_contacter">nous contacter </a>pour demander de l'aide.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itération</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for">L'instruction for</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/do...while">do...while</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a></li> + <li> + <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — quelques bonnes pratiques en matière de boucles</p> + </li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p> diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.html b/files/fr/learn/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..72ed199a4c --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/return_values/index.html @@ -0,0 +1,182 @@ +--- +title: Valeurs de retour des fonctions +slug: Apprendre/JavaScript/Building_blocks/Return_values +tags: + - Apprendre + - Article + - Débutant + - Fonctions + - Guide + - JavaScript + - Return + - Valeurs de retour + - Écriture de code +translation_of: Learn/JavaScript/Building_blocks/Return_values +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + <p>Base en langage informatique, une compréhension basic de HTML et CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocks de code réutilisable</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Comprendre les valeurs de retour, et comment les utiliser.</td> + </tr> + </tbody> +</table> + +<h2 id="Qu'est-ce_que_les_valeurs_de_retour">Qu'est-ce que les valeurs de retour?</h2> + +<p><strong>Les valeurs de retour </strong>sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:</p> + +<pre class="brush: js">var myText = 'I am a string'; +var newString = myText.replace('string', 'sausage'); +console.log(newString); +// the replace() string function takes a string, +// replaces one substring with another, and returns +// a new string with the replacement made</pre> + +<p>Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> sur la chaîne de caractères <code>myText</code> , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.</p> + +<p>Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valeur retournée</a>. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.</p> + +<p>Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme <code>void</code> ou <code>undefined</code> dans de tels cas). Par exemple, dans la fonction <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage() </a> construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !</p> + +<p>Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.</p> + +<h3 id="Utiliser_des_valeurs_de_retour_dans_vos_fonctions">Utiliser des valeurs de retour dans vos fonctions</h3> + +<p>Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> . Nous avons vu son utilisation dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Notre fonction <code>draw()</code> dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:</p> + +<pre class="brush: js">function draw() { + ctx.clearRect(0,0,WIDTH,HEIGHT); + for (var i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } +}</pre> + +<p>À chaque itération de la boucle, on fait trois fois appel à la fonction <code>random()</code> pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction <code>random()</code> prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:</p> + +<pre class="brush: js">function random(number) { + return Math.floor(Math.random()*number); +}</pre> + +<p>Cela peut aussi s'écrire ainsi:</p> + +<pre class="brush: js">function random(number) { + var result = Math.floor(Math.random()*number); + return result; +}</pre> + +<p>Mais la première version est plus rapide à écrire, et plus compacte.</p> + +<p>La fonction retourne le résultat de <code>Math.floor(Math.random()*number)</code> chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:</p> + +<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre> + +<p>et que les trois appels <code>random()</code> retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:</p> + +<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre> + +<p>Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.</p> + +<h2 id="Apprentissage_actif_notre_propre_fonction_avec_valeur_de_retour">Apprentissage actif: notre propre fonction avec valeur de retour</h2> + +<p>Allons-y, écrivons nos propres fonctions avec des valeurs de retour.</p> + +<ol> + <li>Pour commencer, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.</li> + <li>Ajoutons quelques fonctions dans <code><script></code> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: + <pre class="brush: js">function squared(num) { + return num * num; +} + +function cubed(num) { + return num * num * num; +} + +function factorial(num) { + var x = num; + while (x > 1) { + num *= x-1; + x--; + } + return num; +}</pre> + Les fonctions <code>squared()</code> et <code>cubed()</code> sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction <code>factorial()</code> retourne la <a href="https://en.wikipedia.org/wiki/Factorial">factorielle</a> du nombre donné.</li> + <li>Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: + <pre class="brush: js">input.onchange = function() { + var num = input.value; + if (isNaN(num)) { + para.textContent = 'You need to enter a number!'; + } else { + para.textContent = num + ' squared is ' + squared(num) + '. ' + + num + ' cubed is ' + cubed(num) + '. ' + + num + ' factorial is ' + factorial(num) + '.'; + } +}</pre> + + <p>Ici nous créons un gestionnaire d'événement <code>onchange</code> qui s'exécute chaque fois que l'événement <code>change</code> se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable <code>num</code>.</p> + + <p>Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression <code>isNaN(num)</code> retourne <code>true</code>. Nous utilisons la fonction <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> pour vérifier si la valeur <code>num</code> est un nombre — si c'est le cas, elle retourne <code>false</code>, sinon <code>true</code>.</p> + + <p>Si le test retourne <code>false</code>, la valeur <code>num</code> est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions <code>squared()</code>, <code>cubed()</code> et <code>factorial()</code> pour obtenir les valeurs désirées.</p> + </li> + <li>Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">Version final sur GitHub</a> (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">Démonstration en direct</a>), ou demandez-nous de l'aide.</p> +</div> + +<p>À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon <code>num</code>?</p> + +<p>Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration <code>return</code>. De plus, nous avons:</p> + +<ul> + <li>Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.</li> + <li>Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.</li> +</ul> + +<h2 id="Conclusion">Conclusion</h2> + +<p>Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.</p> + +<p>Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou <a href="/en-US/Learn#Contact_us">contactez-nous</a> pour obtenir de l'aide.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Fonctions en profondeur</a> — Un guide détaillé couvrant des information plus avancées sur les fonctions.</li> + <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Fonction Callback en JavaScript</a> — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction. Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> + +<p> </p> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — Des blocs de code réutilisables</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> +</ul> + +<p> </p> 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> diff --git a/files/fr/learn/javascript/first_steps/tableaux/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html index 4fc38abf8d..4fc38abf8d 100644 --- a/files/fr/learn/javascript/first_steps/tableaux/index.html +++ b/files/fr/learn/javascript/first_steps/arrays/index.html diff --git a/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html index 240e934831..240e934831 100644 --- a/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html +++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html diff --git a/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html index d81c3ccb4e..d81c3ccb4e 100644 --- a/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html diff --git a/files/fr/learn/javascript/index.html b/files/fr/learn/javascript/index.html new file mode 100644 index 0000000000..a10f2deb2d --- /dev/null +++ b/files/fr/learn/javascript/index.html @@ -0,0 +1,61 @@ +--- +title: JavaScript +slug: Apprendre/JavaScript +tags: + - Débutant + - Développement + - JavaScript + - Modules + - scripts +translation_of: Learn/JavaScript +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.</p> + +<h2 id="Parcours_d'apprentissage">Parcours d'apprentissage</h2> + +<p>JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que <a href="https://developer.mozilla.org/fr/Apprendre/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a>. <span>Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :</span></p> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a></li> +</ul> + +<p>Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.</p> + +<p>Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :</p> + +<ul> + <li>JavaScript en profondeur, comme enseigné dans notre <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API">API web</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :</p> + +<dl> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a></dt> + <dd>Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.</dd> + <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks">JavaScript les blocs</a></dt> + <dd>Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a></dt> + <dd>En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs">API Web côté client</a></dt> + <dd>Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</dd> +</dl> + +<h2 id="Résoudre_les_problèmes_JavaScript_courants">Résoudre les problèmes JavaScript courants</h2> + +<p><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a> fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">JavaScript sur MDN</a></dt> + <dd>Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Codage des mathématiques</a></dt> + <dd>Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/fr/learn/javascript/objects/ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes/index.html b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html index 36232925ec..36232925ec 100644 --- a/files/fr/learn/javascript/objects/ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes/index.html +++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html diff --git a/files/fr/learn/javascript/objects/heritage/index.html b/files/fr/learn/javascript/objects/inheritance/index.html index 9359b6f4ee..9359b6f4ee 100644 --- a/files/fr/learn/javascript/objects/heritage/index.html +++ b/files/fr/learn/javascript/objects/inheritance/index.html diff --git a/files/fr/learn/javascript/objects/js_orienté-objet/index.html b/files/fr/learn/javascript/objects/object-oriented_js/index.html index c16e9a230e..c16e9a230e 100644 --- a/files/fr/learn/javascript/objects/js_orienté-objet/index.html +++ b/files/fr/learn/javascript/objects/object-oriented_js/index.html diff --git a/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html b/files/fr/learn/javascript/objects/object_building_practice/index.html index a2ab4270eb..a2ab4270eb 100644 --- a/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html +++ b/files/fr/learn/javascript/objects/object_building_practice/index.html diff --git a/files/fr/learn/javascript/objects/prototypes_objet/index.html b/files/fr/learn/javascript/objects/object_prototypes/index.html index efb3681f18..efb3681f18 100644 --- a/files/fr/learn/javascript/objects/prototypes_objet/index.html +++ b/files/fr/learn/javascript/objects/object_prototypes/index.html |