From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../build_your_own_function/index.html | 241 ++++++ .../building_blocks/conditionals/index.html | 630 +++++++++++++++ .../building_blocks/ev\303\250nements/index.html" | 585 ++++++++++++++ .../building_blocks/fonctions/index.html | 397 ++++++++++ .../building_blocks/image_gallery/index.html | 163 ++++ .../javascript/building_blocks/index.html | 55 ++ .../building_blocks/looping_code/index.html | 873 +++++++++++++++++++++ .../building_blocks/return_values/index.html | 182 +++++ 8 files changed, 3126 insertions(+) create mode 100644 files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html create mode 100644 files/fr/apprendre/javascript/building_blocks/conditionals/index.html create mode 100644 "files/fr/apprendre/javascript/building_blocks/ev\303\250nements/index.html" create mode 100644 files/fr/apprendre/javascript/building_blocks/fonctions/index.html create mode 100644 files/fr/apprendre/javascript/building_blocks/image_gallery/index.html create mode 100644 files/fr/apprendre/javascript/building_blocks/index.html create mode 100644 files/fr/apprendre/javascript/building_blocks/looping_code/index.html create mode 100644 files/fr/apprendre/javascript/building_blocks/return_values/index.html (limited to 'files/fr/apprendre/javascript/building_blocks') diff --git a/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html b/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..6f53bebcd7 --- /dev/null +++ b/files/fr/apprendre/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.
Objectif :Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.
+ +

Apprentissage actif : Construisons une fonction

+ +

La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() 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 :

+ +
alert('This is a message');
+ +

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.

+ +

La fonction alert() 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.

+ +
+

Note : 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.

+
+ +

La fonction de base

+ +

Pour commencer, mettons en place une fonction de base.

+ +
+

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. 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.

+
+ +
    +
  1. Commencez par faire une copie locale du fichier function-start.html. 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.
    2. +
  2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <script> : + 
    function displayMessage() {
+
+}
    + Nous commençons avec le mot-clé function, 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.
    3. +
  3. Enfin, ajoutez le code suivant à l'intérieur des accolades : + 
    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);
+}
    +
    4. +
+ +

Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.

+ +

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 html, de façon à pouvoir l'utiliser plus tard :

+ +
var html = document.querySelector('html');
+ +

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 panel (Dans la suite de l'article, nous parlerons simplement du panneau <div>.). Cet élément sera le conteneur extérieur de notre boîte de message.

+ +

Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut class à notre panneau qui aura pour valeur msgBox. 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 .msgBox dans le but de styliser la boîte de message ainsi que son contenu.

+ +

Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable html 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 <div> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <html>. 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.

+ +
var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+ +

Les deux sections suivantes font usage des mêmes fonctions createElement() et appendChild() 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 <div>. 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.

+ +
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);
+ +

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.

+ +

Le gestionnaire onclick 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  onclick 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 <div>.

+ +
closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
+ +

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 :

+ +
<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+ +

Ç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.

+ +

Appeler la fonction

+ +

À présent, nous avons notre fonction définie comme il faut dans notre balise <script>, mais il ne se passera rien si on laisse les choses en l'état.

+ +
    +
  1. Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : + 
    displayMessage();
    + 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.
    2. +
  2. +

    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.

    + +

    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.

    + +

    Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.

    +
    3. +
  3. Supprimez la ligne précédente que vous avez ajoutée.
    4. +
  4. 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 : + 
    var btn = document.querySelector('button');
    +
    5. +
  5. Enfin, ajoutez la ligne suivante à la précédente : + 
    btn.onclick = displayMessage;
    + D'une manière similaire à notre ligne closeBtn.onclick... à 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.
    6. +
  6. 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.
    7. +
+ +

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 :

+ +
btn.onclick = displayMessage();
+ +

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.

+ +

Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.

+ +

Améliorer la fonction à l'aide de paramètres

+ +

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.

+ +
    +
  1. Premièrement, mettons à jour la première ligne : + 
    function displayMessage() {
    + par : + + 
    function displayMessage(msgText, msgType) {
    + 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.
    2. +
  2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : + 
    msg.textContent = 'This is a message box';
    + avec : + + 
    msg.textContent = msgText;
    +
    3. +
  3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : + 
    btn.onclick = displayMessage;
    + par ce bloc : + + 
    btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};
    + 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é.
    4. +
  4. 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 !
    5. +
+ +

Un paramètre plus complexe

+ +

Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre msgType, la fonction affichera une icône et une couleur d'arrière-plan différentes.

+ +
    +
  1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoire que votre fichier HTML. + +
    Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !
    +
    2. +
  2. 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 .msgBox en changeant : + 
    width: 200px;
    + par : + + 
    width: 242px;
    +
    3. +
  3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS .msgBox p { ... } : + 
    padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;
    +
    4. +
  4. Maintenant, nous devons ajouter du code à notre fonction displayMessage() pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "}" de votre fonction : + 
    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';
+}
    + Ici, quand msgType a la valeur 'warning', l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si msgType a la valeur 'chat', l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre msgType n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans else { ... } 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 msgType n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
    5. +
  5. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel displayMessage() : + 
    displayMessage('Woo, this is a different message!');
    + par soit l'un ou l'autre : + + 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');
    + Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :
    6. +
+ +
+

Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.

+
+ +

Conclusion

+ +

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.

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/apprendre/javascript/building_blocks/conditionals/index.html b/files/fr/apprendre/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..b7fa0fa08c --- /dev/null +++ b/files/fr/apprendre/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 +--- +

{{LearnSidebar}}

+ +

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

+ +

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.

+ + + + + + + + + + + + +
Prérequis :Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, Premiers pas en JavaScript.
Objectif :Comprendre comment utiliser les structures conditionnelles en JavaScript.
+ +

Vous l'aurez à une condition !..

+ +

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 ? »)

+ +

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 ».)

+ +

+ +

Instruction if ... else

+ +

Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste instruction if ... else.

+ +

Syntaxe élémentaire if ... else

+ +

La syntaxe élémentaire de if...else ressemble à cela en {{glossary("pseudocode")}}:

+ +
if (condition) {
+  code à exécuter si la condition est true
+} else {
+  sinon exécuter cet autre code à la place
+}
+ +

Ici nous avons:

+ +
    +
  1. Le mot‑clé if suivie de parenthèses.
    2. +
  2. 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 opérateurs de comparaison que nous avons étudié dans le précédent module, et renverra true ou false.
    3. +
  3. 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 true.
    4. +
  4. Le mot‑clé else.
    5. +
  5. 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 true.
    6. +
+ +

Ce code est facile à lire pour une personne — il dit « si la condition renvoie true, exécuter le code A, sinon exécuter le code B ».

+ +

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

+ +
if (condition) {
+  code à exécuter si la condition est true
+}
+
+exécuter un autre code
+ +

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 toujours exécuté, que la condition ait renvoyé true ou false. 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 ou l'autre, et non les deux.

+ +

Une dernière remarque, vous verrez quelques fois les instructions if...else écrites sans accolades, de manière abrégée, ainsi :

+ +
if (condition) code à exécuter si la condition est true
+else exécute un autre code à la place
+ +

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.

+ +

Un exemple concret

+ +

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 :

+ +
let coursesFaites = false;
+
+if (coursesFaites === true) {
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}
+ +

Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.

+ +
+

Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

+
+ +

else if

+ +

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 ?

+ +

Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:

+ +
<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>
+ +
const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  const choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === '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.';
+  } else if (choice === '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.';
+  } else {
+    para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('else_if', '100%', 100) }}

+ +
    +
  1. Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.
    2. +
  2. 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 <select> de sorte que la fonction setWeather() soit exécutée quand sa valeur change.
    3. +
  3. Quand cette fonction est exécutée, nous commençons par assigner à la variable choice la valeur actuellement sélectionnée dans l'élément <select>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de choice. Remarquez comment toutes les conditions sont testées avec des blocs else if() {...}, mis à part le tout premier testé avec un  bloc if() {...}.
    4. +
  4. Le tout dernier choix, à l'intérieur du bloc else {...}, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est true. 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.
    5. +
+ +
+

Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

+
+ +

Une note sur les opérateurs de comparaison

+ +

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 Mathématiques de base en JavaScript — nombres et opérateurs article. Nos choix sont :

+ + + +
+

Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.

+
+ +

Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide  ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
+ Par exemple :

+ +
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.');
+}
+ +

Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :

+ +
let coursesFaites = false;
+
+if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}
+ +

 if ... else imbriqué

+ +

Il est parfaitement correct d'ajouter une déclaration if...else à 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 :

+ +
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.';
+  }
+}
+ +

Même si tout le code fonctionne ensemble, chaque déclaration if...else fonctionne indépendamment de l'autre.

+ +

Opérateurs logiques AND, OR et NOT

+ +

Si vous voulez tester plusieurs conditions sans imbriquer des instructions if...else , les opérateurs logiques pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :

+ + + +

Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :

+ +
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.';
+}
+ +

Ainsi, par exemple, le premier bloc de code ne sera exécuté que si choice === 'sunny' ET temperature < 86 renvoient tous deux true.

+ +

Voyons un petit exemple avec OR :

+ +
if (camionDeGlaces || etatDeLaMaison === 'on fire') {
+  console.log('Vous devriez sortir de la maison rapidement.');
+} else {
+  console.log('Vous pouvez probablement rester dedans.');
+}
+ +

Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur !,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :

+ +
if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
+  console.log('Vous pouvez probablement rester dedans.');
+} else {
+  console.log('Vous devriez sortir de la maison rapidement.');
+}
+ +

Dans cet extrait, si la déclaration avec OR renvoie true, l'opérateur NOT va nier l'ensemble : l'expression retournera donc false.

+ +

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 true :

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+  // exécuter le code
+}
+ +

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 true séparées par des || (OR) opérateurs. Par exemple :

+ +
if (x === 5 || 7 || 10 || 20) {
+  // exécuter le code
+}
+ +

Dans ce cas, la condition dans le if(...) sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours true. 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 :

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // exécuter le code
+}
+ +

Instruction switch

+ +

Les Instructions if...else  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.

+ +

Les instructions switch 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 :

+ +
switch (expression) {
+  case choix1:
+    exécuter ce code
+    break;
+
+  case choix2:
+    exécuter ce code à la place
+    break;
+
+  // incorporez autant de case que vous le souhaitez
+
+  default:
+    sinon, exécutez juste ce code
+}
+ +

Ici nous avons

+ +
    +
  1. Le mot‑clé switch suivi de parenthèses.
    2. +
  2. Une expression ou une valeur mise entre les parenthèses.
    3. +
  3. Le mot‑clé case suivi d'une expression ou d'une valeur, et de deux‑points.
    4. +
  4. Le code exécuté si l'expression/valeur de case correspond à celles de switch.
    5. +
  5. Une déclaration break, 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 switch.
    6. +
  6. Vous pouvez rajouter autant de cas que vous le souhaitez. (points 3–5)
    7. +
  7. Le mot‑clé default,  suivi d'une même structure de code qu'aux points 3-5, sauf que default n'a pas de choix après lui et n'a donc pas besoin de l'instruction break  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option default qui sera exécutée si aucun choix ne correspond.
    8. +
+ +
+

Note : Vous n'avez pas à inclure la section  default — 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.

+
+ +

Un exemple de switch

+ +

Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction switch à la place :

+ +
<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>
+ +
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 = '';
+  }
+}
+ +

{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}

+ +
+

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

+
+ +

Opérateur ternaire

+ +

Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :

+ +
( condition ) ? exécuter ce code : exécuter celui‑ci à la place
+ +

Regardons cet exemple simple :

+ +
let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';
+ +

Ici, nous avons une variable nommée est_anniversaire — si elle est true, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si est_anniversaire renvoie false, nous disons simplement « Bonjour ».

+ +

Exemple opérateur ternaire

+ +

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.

+ +
<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>
+ +
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');
+}
+
+ +

{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

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 update(), 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.

+ +

Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.

+ +
+

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

+
+ +

Apprentissage actif : un calendrier simple

+ +

Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :

+ + + +

Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction onchange, juste au dessous du commentaire // AJOUTER LA CONDITION ICI. Elle doit :

+ +
    +
  1. Noter le mois choisi (enregistré dans la variable choice. Ce doit être la valeur de l'élément <select> après un changement, "Janvier" par exemple).
    2. +
  2. Faire en sorte que la variable nommée days 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.
    3. +
+ +

Conseils :

+ + + +

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".

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

Activité : plus de choix de couleurs !

+ +

Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch  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 switch au dessous du commentaire  // AJOUT D'UNE DIRECTIVE SWITCH :

+ + + +

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 ».

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}

+ +

Conclusion

+ +

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 contactez‑nous pour une aide.

+ +

Voir aussi

+ + + +

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git "a/files/fr/apprendre/javascript/building_blocks/ev\303\250nements/index.html" "b/files/fr/apprendre/javascript/building_blocks/ev\303\250nements/index.html" new file mode 100644 index 0000000000..10f0118ecf --- /dev/null +++ "b/files/fr/apprendre/javascript/building_blocks/ev\303\250nements/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

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. 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. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.
Objectif: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.
+ +

Une série d'événements heureux

+ +

Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — 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. 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.

+ +

+ +

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 toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :

+ + + +

Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
+
+ Chaque événement disponible a un gestionnaire d'événement, 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. 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 enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. 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.

+ +
+

Note: 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

+
+ +

Un exemple simple

+ +

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:

+ +
<button>Change color</button>
+ + + +

Le JavaScript ressemblera à ça :

+ +
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;
+}
+ +

 

+ +

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 btn pointe sur un élément <button> , 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é onclick   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 <body> .
+
+ Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <button>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.

+ +

Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur ce lien.

+ +

 

+ +

Ce ne sont pas que des pages web

+ +

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. 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.

+ +

Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model 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 on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.

+ +

Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.

+ +

Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.

+ +

De quelle manière utiliser les événements Web ?

+ +

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. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.

+ +

Les propriétés du gestionnaire d'événement

+ +

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. Revenons à l'exemple ci-dessus :

+ +
var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — 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.

+ +

Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.

+ +

Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:

+ + + +

Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).

+ +

Les gestionnaires d'événements en ligne : ne les utilisez pas !

+ +

Vous pourriez également voir un motif comme celui-ci dans votre code:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. 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.
+
+ Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.

+ +

Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. 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 :

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +
+

Note: Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.

+
+ +

addEventListener() et removeEventListener()

+ +

Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). 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. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:

+ +
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);
+ +
+

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

Dans la fonction addEventListener() , 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. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction addEventListener(), dans une fonction anonyme, comme ceci:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:

+ +
btn.removeEventListener('click', bgChange);
+ +

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. 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.
+
+ D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
+
+ En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-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  addEventListener() et removeEventListener().

+ +

Quel mécanisme devrais-je utiliser ?

+ +

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.
+
+ Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
+  

+ + + +

Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. 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:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Note: 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 différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.

+
+ +

D'autres concepts liés aux événements

+ +

Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. 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.

+ +

L'objet événement

+ +

Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que event, evt, ou simplement e . 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. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:

+ +
function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.

+ +
+

Note: 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. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.

+
+ +

e.targetest 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. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), 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 onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:

+ +
var divs = document.querySelectorAll('div');
+
+for (var i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

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 (voir la liste complète sur {{domxref("Event")}} ). 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. Le Media Recorder API, par exemple, a un événement dataavailable , 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). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.

+ +

Éviter le comportement par défaut

+ +

Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. 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 la même page, si une autre n'est pas spécifiée.).
+
+ 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. 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. Regardons un exemple simple.
+
+ Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:

+ +
<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>
+ + + +

Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction preventDefault() 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 :

+ +
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!';
+  }
+}
+ +

É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. Le résultat est le suivant :

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)

+
+ +

Le bouillonnement et la capture

+ +

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. 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. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:

+ +
<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>
+ +

Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

Nous ajoutons ensuite quelques gestionnaires d'événements onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

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 <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.

+ +

Explication du bouillonnement et de la capture

+ +

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), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
+
+ Dans la phase de capture:

+ + + +

Dans la phase de bouillonnement, l'opposé exact se produit:
+
+      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
+      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 <html>.

+ +

+ +

(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)

+ +

Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :

+ + + +

Régler le problème avec stopPropagation()

+ +

C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), 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é.
+
+ 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:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

Vous pouvez faire une copie locale du code source show-video-box.html et le modifier vous-même ou regarder le résultat ici :  show-video-box-fixed.html (ou voir le code source).

+ +
+

Note: Pourquoi s'embêter à capturer et bouillonner ? 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. 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.

+
+ +
+

Note: 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. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.

+
+ +

Délégation d'événement

+ +

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 événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
+
+ 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 click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.

+ +

Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.

+ +

Conclusion

+ +

Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. 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.
+
+ 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). 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.

+ +

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/apprendre/javascript/building_blocks/fonctions/index.html b/files/fr/apprendre/javascript/building_blocks/fonctions/index.html new file mode 100644 index 0000000000..43f3e916e1 --- /dev/null +++ b/files/fr/apprendre/javascript/building_blocks/fonctions/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+ +

Les fonctions 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.

+ + + + + + + + + + + + +
Prerequis:Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif:Comprendre les concepts fondamentaux des fonctions JavaScript.
+ +

Où trouve-t'on des fonctions ?

+ +

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.

+ +

Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.

+ +

Les fonctions intégrées du navigateur

+ +

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 :

+ +
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.
+ +

Ou à chaque fois que nous avons manipulé un tableau :

+ +
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.
+ +

Ou à chaque fois que nous avons généré un nombre aléatoire :

+ +
var myNumber = Math.random();
+// la fonction random() génère un nombre aléatoire
+// entre 0 et 1, et renvoie
+// ce nombre
+ +

... nous avons utilisé une fonction !

+ +
+

Note : 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.

+
+ +

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 invoquez (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.

+ +

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 section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.

+ +

Fonctions versus méthodes

+ +

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 méthodes. 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.

+ +

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 propriétés) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.

+ +

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. 

+ +

Fonctions personnalisées

+ +

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 random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :

+ +
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();
+  }
+}
+ +

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 :

+ +
draw();
+ +

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 random() trois fois, comme définie par le code suivant :

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() 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.

+ +

Invoquer des fonctions

+ +

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.

+ +
function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// appelle la fonction une fois
+ +

Fonctions anonymes

+ +

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 :

+ +
function myFunction() {
+  alert('hello');
+}
+ +

Mais vous pouvez également créer une fonction qui n'a pas de nom :

+ +
function() {
+  alert('hello');
+}
+ +

Ceci est une fonction anonyme — 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é :

+ +
var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}
+ +

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.

+ +

Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :

+ +
var myGreeting = function() {
+  alert('hello');
+}
+ +

Cette fonction peut désormais être invoquée en utilisant :

+ +
myGreeting();
+ +

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 :

+ +
var anotherGreeting = function() {
+  alert('hello');
+}
+ +

Cette fonction peut désormais être invoquée en utilisant au choix :

+ +
myGreeting();
+anotherGreeting();
+ +

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 :

+ +
function myGreeting() {
+  alert('hello');
+}
+ +

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 :

+ +
myButton.onclick = function() {
+  alert('hello');
+  // Je peux mettre ici autant
+  // de code que je le souhaite
+}
+ +

Paramètres des fonctions

+ +

Certaines fonctions nécessitent que l'on définisse des paramètres 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.

+ +
+

Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.

+
+ +

Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : 

+ +
var myNumber = Math.random();
+ +

La fonction de chaîne intégrée du navigateur replace() 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 :

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+ +
+

Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.

+
+ +

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 join() a des paramètres optionnels :

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// renvoie 'I love chocolate frogs'
+var madeAString = myArray.join();
+// renvoie 'I,love,chocolate,frogs'
+ +

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.

+ +

La portée des fonctions et les conflits.

+ +

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 portée, 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.

+ +

Le plus haut niveau en dehors de toutes vos fonctions est appelé la portée globale. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.

+ +

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 parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.

+ +

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 :

+ +
<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
+  greeting();
+</script>
+ +
// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}
+ +
// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}
+ +

Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js  — 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 premier fichier first.js.

+ +
+

Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).

+
+ +

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.

+ +

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 !

+ +

+ +

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.

+ +

Apprentissage actif : Jouer avec la portée

+ +

Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.

+ +
    +
  1. Tout d'abord, faisons un copie locale de notre exemple function-scope.html. Celui-ci contient deux fonctions appelées a() et b(), et trois variables — x, y, and z — 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 output(), qui prend un seul paramètre et le renvoie dans un paragraphe de la page.
    2. +
  2. Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.
    3. +
  3. Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : + 
    output(x);
    + Vous devriez voir la valeur de la variable x renvoyée à l'écran.
    4. +
  4. Maintenant essayez d'entrer les commandes suivantes : + 
    output(y);
+output(z);
    + +

    Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.

    +
    5. +
  5. +

    Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer a() et b() pour qu'elles aient la forme suivante :

    + + 
    function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}
    + Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions a() et b() depuis la console JavaScript : + + 
    a();
+b();
    + Vous devriez voir les valeurs y and z renvoyées sur la page. Cela fonctionne très bien car la fonction output() 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 output() est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.
    6. +
  6. Maintenant essayer de mettre à jour le code comme ceci : + 
    function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}
    + Sauvegardez et rechargez à nouveau dans la console JavaScript :
    7. +
  7. + 
    a();
+b();
    + Les deux fonctions a() et b() appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction output() n'est pas dans la même portée que celle dans laquelle  x est définie, x est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
    8. +
  8. Pour finir, essayez de mettre à jour le code comme ceci : + 
    function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}
    +
    9. +
  9. Sauvegardez et rechargez à nouveau dans la console JavaScript : + 
    a();
+b();
    + Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() 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.
    10. +
+ +
+

Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.

+
+ +
+

Note : Le message d'erreur ReferenceError: "x" is not defined 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.

+
+ + + +

Des fonctions à l'intérieur de fonctions

+ +
+
Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
+
+ +
function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+
+ +

Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue  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. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :

+ +
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);
+}
+ +

Conclusion

+ +

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.

+ +

Voir aussi

+ + + + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html b/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..07a51499fd --- /dev/null +++ b/files/fr/apprendre/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Conditions préalables:Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. 
Objectif:Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.
+ +

Point de départ

+ +

Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.

+ +

Vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.

+ +
+

Note: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.

+
+ +

Résumé du projet

+ +

Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:

+ +
<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>
+ +

L'exemple ressemble à ceci:

+ +

+ + + +

Les parties les plus intéressantes du fichier CSS de l'exemple:

+ + + +

Votre JavaScript doit:

+ + + +

Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).

+ +

Les différentes étapes

+ +

Les sections suivantes décrivent ce que vous avez à faire.

+ +

Itération sur les images

+ +

Nous vous avons fourni des lignes qui storent une référence à thumb-bar <div> dans une variable nommée thumbBar, créent un nouvel élément <img>, définissent son attribut src à un emplacement de valueur xxx, et ajoutent ce nouvel élément <img> dans thumbBar.

+ +

Vous avez besoin de:

+ +
    +
  1. Ajouter votre code en-dessous du commentaire Looping through images à 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.
    2. +
  2. Remplacez, pour chaque itération,  la valeur xxx 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 src dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est pic1.jpg, pic2.jpg, etc.
    3. +
+ +

Ajout d'un gestionnaire onclick à chaque miniature

+ +

À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:

+ +
    +
  1. Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage 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 src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
    2. +
  2. Exécuter une fonction, en lui passant en paramètre la fameuse valeur de src. Vous pouvez nommer la fonction à votre guise.
    3. +
  3. Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.
    4. +
+ +

Écrire le gestionnaire du bouton d'assombrissement

+ +

Il ne reste que notre <button> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <button> dans une variable appelée btn. Vous devez ajouter un gestionnaire onclick qui:

+ +
    +
  1. Vérifie la classe appliquée à <button> — à nouveau, vous pouvez utiliser getAttribute().
    2. +
  2. Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
    3. +
  3. Si le nom de classe n'est pas "dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".
    4. +
+ +

Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

Conseil

+ + + +

Évaluation ou aide supplémentaire

+ +

Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :

+ +
    +
  1. Mettez votre travail dans un éditeur partageable en ligne tel que CodePen, jsFiddle, ou Glitch.
    2. +
  2. Rédiger un sujet pour demander une évaluation et/ou une aide à le forum Discourse du MDN. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : +
      +
    • Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".
      • +
    • 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.
      • +
    • 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.
      • +
    • 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.
      • +
    +
    3. +
+ +

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 sur le fil de discussion de cet exercice, ou sur #mdn du canal IRC de Mozilla IRC. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!

+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/apprendre/javascript/building_blocks/index.html b/files/fr/apprendre/javascript/building_blocks/index.html new file mode 100644 index 0000000000..7efffb563e --- /dev/null +++ b/files/fr/apprendre/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 +--- +
{{JsSidebar}}
+ +
{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
+ +

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.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.

+ +
+

Note : 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 JSBin ou Thimble .

+
+ +

Guides

+ +
+
Prendre des décisions dans votre code — les conditions
+
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.
+
Les boucles
+
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.
+
Les fonctions — réutiliser des blocs de code
+
Un autre concept essentiel en programmation est celui de fonctions. Les fonctions 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.
+
Créez votre propre fonction
+
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.
+
Les valeurs de retour des fonctions
+
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.
+
Introduction aux événements
+
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.
+
+ +

Auto-évaluation

+ +

L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.

+ +
+
Galerie de photos
+
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.
+
+ +

{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}  

diff --git a/files/fr/apprendre/javascript/building_blocks/looping_code/index.html b/files/fr/apprendre/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..820a4d09e2 --- /dev/null +++ b/files/fr/apprendre/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis :Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif :Comprendre comment utiliser les boucles dans JavaScript.
+ +

Laissez-moi dans la boucle

+ +

Boucles, boucles, boucles. Alors qu'elles sont associées aux cheveux d'une célèbre héroïne de fiction, 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 itérer en langage de programmeur.

+ +

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 :

+ +


+

+ +

Une boucle a normalement un ou plusieurs des composants suivants :

+ + + +

En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :

+ +
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
+  }
+}
+ +

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.

+ +

À quoi ça sert ?

+ +

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, les boucles ne font rien d'autre que répéter la même action encore et encore, ce qui peut s'avérer utile pour effectuer rapidement des tâches répétitives.

+ +

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 !

+ +

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 <canvas> (appuyez sur le bouton Update pour lancer le programme à nouveau et voir différentes dispositions aléatoires).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 400) }}

+ +

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 :

+ +
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();
+}
+ +

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.

+ +

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 :

+ +
ctx.beginPath();
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();
+ +

Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.

+ +

La boucle standard

+ +

Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :

+ +
for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}
+ +

Nous avons ici :

+ +
    +
  1. Le mot-clé for, suivi par des parenthèses.
    2. +
  2. A l'intérieur des parenthèses, on a trois objets : +
      +
    1. Une initialisation — 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 compteur.
      2. +
    2. Une condition de sortie — 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.
      3. +
    3. Une expression finale — 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.
      4. +
    +
    3. +
  3. Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.
    4. +
+ +

Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.

+ +
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;
+ +

Cela nous donne la sortie suivante :

+ + + +

{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}

+ +
+

Note: Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).

+
+ +

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 :

+ +
    +
  1. L'itérateur, i, commence à 0 (let i = 0).
    2. +
  2. 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 i < chats.length est vrai, la boucle continuera à s'exécuter.
    3. +
  3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (cats[i] est cats[quelque soit la valeur de i lors de l'iteration]) avec une virgule et un espace, à la fin de la variable info. Donc : +
      +
    1. Pendant le premier lancement, i = 0, donc cats[0] + ', ' sera concaténé à ("Bill, ")
      2. +
    2. Au second lancement, i = 1, donc cats[1] + ', ' et sera concaténé à  ("Jeff, ")
      3. +
    3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à i (i++), et alors le processus recommence encore.
      4. +
    +
    4. +
  4. Quand i devient égal à cats.length, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.
    5. +
+ +
+

Note: Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined 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 cats.length (i <), ce n'est pas la même chose que cats.length (i <=).

+
+ +
+

Note: 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.

+
+ +

Un petit problème est que nous avons laissé la phrase de sortie mal formée :

+ +
+

Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,

+
+ +

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 :

+ +
for (let i = 0; i < cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}
+ +
+

Note: Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).

+
+ +
+

Important: 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 boucle infinie.

+
+ +

Quitter une boucle avec break

+ +

Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : 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.

+ +

C'est la même chose avec les boucles – un break quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.

+ +

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 :

+ +
<label for="search">Search by contact name: </label>
+<input id="search" type="text">
+<button>Search</button>
+
+<p></p>
+ +

Maintenant sur le JavaScript :

+ +
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.';
+    }
+  }
+});
+ + + +

{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}

+ +
    +
  1. 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.
    2. +
  2. Ensuite, nous attachons un écouteur d'événement au bouton (bouton), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
    3. +
  3. Nous stockons la valeur saisie dans l'input dans une variable appelée searchName, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.
    4. +
  4. Maintenant sur la partie intéressante, la boucle for : +
      +
    1. Nous commençons le compteur à 0, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à contacts.length, et incrémentons i par 1 après chaque itération de la boucle.
      2. +
    2. À l'intérieur de la boucle, nous divisons d'abord le contact actuel (contacts[i]) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé splitContact.
      3. +
    3. Nous utilisons ensuite une instruction conditionnelle pour tester si splitContact[0] (le nom du contact) est égal au searchName entré. Si c'est le cas, nous introduisons une string / chaîne de caractère dans le paragraphe pour indiquer quel est le numéro du contact et utiliser break pour terminer la boucle.
      4. +
    +
    5. +
  5. 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.
    6. +
+ +
+

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

+
+ +

Passer des itérations avec continue

+ +

L'instruction continue fonctionne d'une manière similaire à break, 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).

+ +

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 :

+ +
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 + ' ';
+}
+ +

Ici la sortie :

+ + + +

{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}

+ +
    +
  1. Dans ce cas, l'entrée doit être un nombre (num). La boucle for 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 num, et un itérateur ajoutera 1 au compteur à chaque fois.
    2. +
  2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , 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 Math.floor() fait au nombre auquel il est passé).
    3. +
  3. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (! ==), 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 continue pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
    4. +
  4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction continue ne soit pas exécutée; à la place, nous concaténons la valeur i actuelle plus un espace sur la fin du contenu du paragraphe.
    5. +
+ +
+

Note: Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

+
+ +

while et do ... while

+ +

for 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.

+ +

D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

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é while au lieu de for.

+ +

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.

+ +

Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:

+ +
let i = 0;
+
+while (i < cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}
+ +
+

Note: Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).

+
+ +

La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé do précède directement les accolades contenant le code à exécuter et l'expression finale.

+ +

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é while. Dans une boucle do ... while, 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é ).

+ +

Réécrivons notre exemple de listing de chat pour utiliser une boucle do ... while :

+ +
let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i < cats.length);
+ +
+

Note: Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).

+
+ +
+

Important: 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 boucle infinie.

+
+ +

Apprentissage actif : Lancer le compte à rebours !

+ +

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 :

+ + + +

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.

+ + + +

{{ EmbedLiveSample('Active_learning', '100%', 780) }}

+ +

Apprentissage actif : remplir une liste d'invités.

+ +

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.

+ +

Plus précisément, nous attendons de vous :

+ + + +

Nous vous avons déjà fourni les éléments suivants :

+ + + +

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 Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.

+ +

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.

+ + + +

{{ EmbedLiveSample('Active_learning_2', '100%', 580) }}

+ +

Quel type de boucle utiliser ?

+ +

Pour des usages basiques les boucles for, while, et do...while 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.

+ +

Premièrement for:

+ +
for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}
+ +

while:

+ +
initialisation
+while (condition de sortie) {
+  // code à exécuter
+
+  expression finale
+}
+ +

et enfin do...while:

+ +
initialisation
+do {
+  // code à exécuter
+
+  expression finale
+} while (condition de sortie)
+ +

Nous recommandons for, 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.

+ +
+

Note: 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 Boucles et itérations.

+
+ +

Conclusion

+ +

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 !

+ +

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/apprendre/javascript/building_blocks/return_values/index.html b/files/fr/apprendre/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..72ed199a4c --- /dev/null +++ b/files/fr/apprendre/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

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.

+ + + + + + + + + + + + +
Prérequis: +

Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

+
Objectif:Comprendre les valeurs de retour, et comment les utiliser.
+ +

Qu'est-ce que les valeurs de retour?

+ +

Les valeurs de retour 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:

+ +
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
+ +

Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , 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.

+ +

Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. 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.

+ +

Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme void ou undefined dans de tels cas). Par exemple, dans la fonction displayMessage()  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 !

+ +

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.

+ +

Utiliser des valeurs de retour dans vos fonctions

+ +

Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:

+ +
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();
+  }
+}
+ +

À chaque itération de la boucle, on fait trois fois appel à la fonction random() 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 random() 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:

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Cela peut aussi s'écrire ainsi:

+ +
function random(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}
+ +

Mais la première version est plus rapide à écrire, et plus compacte.

+ +

La fonction retourne le résultat de Math.floor(Math.random()*number) 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:

+ +
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ +

et que les trois appels random() retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:

+ +
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+ +

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.

+ +

Apprentissage actif: notre propre fonction avec valeur de retour

+ +

Allons-y, écrivons nos propres fonctions avec des valeurs de retour.

+ +
    +
  1. Pour commencer, faites une copie locale du fichier function-library.html à 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é.
    2. +
  2. Ajoutons quelques fonctions dans <script> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: + 
    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;
+}
    + Les fonctions squared() et cubed() sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction factorial() retourne la factorielle du nombre donné.
    3. +
  3. 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: + 
    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) + '.';
+  }
+}
    + +

    Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change 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 num.

    + +

    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 isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.

    + +

    Si le test retourne false, la valeur num 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 squared(), cubed() et factorial() pour obtenir les valeurs désirées.

    +
    4. +
  4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.
    5. +
+ +
+

Note: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.

+
+ +

À 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 num?

+ +

Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration return. De plus, nous avons:

+ + + +

Conclusion

+ +

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.

+ +

Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

 

+ +

Dans ce module

+ + + +

 

-- cgit v1.2.3-54-g00ecf