diff options
Diffstat (limited to 'files/fr/learn/javascript/building_blocks')
7 files changed, 156 insertions, 156 deletions
diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md index 3fdd18cb03..d9558a70fc 100644 --- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/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. +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. <table class="standard-table"> <tbody> @@ -45,7 +45,7 @@ Dans l'article précédent, nous avons traité essentiellement de la théorie. L ## 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()](/fr/docs/Web/API/Window/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 : +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()](/fr/docs/Web/API/Window/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 : ```js alert('This is a message'); @@ -53,18 +53,18 @@ 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()](/fr/docs/Web/API/Window/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. +La fonction [alert()](/fr/docs/Web/API/Window/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. +> **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](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). 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. +> **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). 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](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/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. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>` : +2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>` : ```js function displayMessage() { @@ -72,7 +72,7 @@ Pour commencer, mettons en place une fonction de base. } ``` - 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. + 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. Enfin, ajoutez le code suivant à l'intérieur des accolades : @@ -98,17 +98,17 @@ Pour commencer, mettons en place une fonction de base. É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 : +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 : ```js 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. +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. +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. +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. ```js var panel = document.createElement('div'); @@ -116,7 +116,7 @@ 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. +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. ```js var msg = document.createElement('p'); @@ -128,9 +128,9 @@ 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. +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>`. +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>`. ```js closeBtn.onclick = function() { @@ -138,7 +138,7 @@ closeBtn.onclick = function() { } ``` -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 : +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 : ```html <div class="msgBox"> @@ -147,11 +147,11 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in </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. +Ç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. +À 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 : @@ -168,7 +168,7 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton. 3. Supprimez la ligne précédente que vous avez ajoutée. -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 : +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 : ```js var btn = document.querySelector('button'); @@ -180,7 +180,7 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in 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. + 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. 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. @@ -196,9 +196,9 @@ Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la de ## 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. +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 : +1. Premièrement, mettons à jour la première ligne : ```js function displayMessage() { @@ -210,7 +210,7 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê 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. + 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. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : @@ -224,7 +224,7 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê msg.textContent = msgText; ``` -3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : +3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : ```js btn.onclick = displayMessage; @@ -242,15 +242,15 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê 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 ! -### Un paramètre plus complexe +### 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. +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](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML. +1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML. - > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci ! + > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci ! -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 : +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 : ```css width: 200px; @@ -262,7 +262,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — width: 242px; ``` -3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }` : +3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }` : ```css padding-left: 82px; @@ -270,7 +270,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — background-repeat: no-repeat; ``` -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 : +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 : ```js if (msgType === 'warning') { @@ -284,7 +284,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — } ``` - 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 ! + 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. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel `displayMessage()` : @@ -301,10 +301,10 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile : -> **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](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), ou nous demander de l'aide. +> **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](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), 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. +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/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md index 433c2c816b..195e348021 100644 --- a/files/fr/learn/javascript/building_blocks/conditionals/index.md +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md @@ -19,12 +19,12 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals {{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. +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. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, @@ -34,7 +34,7 @@ Dans tout langage de programmation, le code doit prendre des décisions et agir </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre comment utiliser les structures conditionnelles en JavaScript. @@ -43,21 +43,21 @@ Dans tout langage de programmation, le code doit prendre des décisions et agir </tbody> </table> -## Vous l'aurez à  une condition !.. +## 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 ê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 ».) +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](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/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](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). ### Syntaxe élémentaire if ... else -La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}: +La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}: if (condition) { code à exécuter si la condition est true @@ -68,14 +68,14 @@ La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseud Ici nous avons: 1. Le mot‑clé `if` suivie de parenthèses. -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](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`. -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`. +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](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`. +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. Le mot‑clé `else`. -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`. +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`. -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 ». +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 : +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 @@ -83,18 +83,18 @@ Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxiè 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. +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 : +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. +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 : +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 : ```js let coursesFaites = false; @@ -106,15 +106,15 @@ if (coursesFaites === true) { } ``` -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. +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](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).) +> **Note :** Vous pouvez voir une [version plus complète de cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).) ### 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 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: +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: ```html <label for="weather">Select the weather type today: </label> @@ -155,30 +155,30 @@ function setWeather() { {{ 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. 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. 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. 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. +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. 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. 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. -> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) ici.) +> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) 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](/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison) article. Nos choix sont : -- `===` et `!==` — teste si une valeur est identique ou non à une autre. +- `===` et `!==` — teste si une valeur est identique ou non à une autre. - `<` and `>` —teste si une valeur est inférieure ou non à une autre. - `<=` and `>=` — teste si une valeur est inférieur ou égal, ou égal à , ou supérieur ou égal à une autre. > **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`). +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 : ```js const fromage = 'Comté'; if (fromage) { - console.log('Ouaips ! Du fromage pour mettre sur un toast.'); + console.log('Ouaips ! Du fromage pour mettre sur un toast.'); } else { console.log('Pas de fromage sur le toast pour vous aujourd\'hui.'); } @@ -196,7 +196,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true' } ``` -###  if ... else imbriqué +### 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 : @@ -205,7 +205,7 @@ 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.'; + para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.'; } } ``` @@ -216,16 +216,16 @@ Même si tout le code fonctionne ensemble, chaque déclaration `if...else` fonct Si vous voulez tester plusieurs conditions sans imbriquer des instructions `if...else` , les [opérateurs logiques](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques) pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous : -- `&&` — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`. -- `||` — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant `true` pour que l'ensemble de l'expression renvoie `true`. +- `&&` — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`. +- `||` — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant `true` pour que l'ensemble de l'expression renvoie `true`. -Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi : +Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi : ```js if (choice === 'sunny' && temperature < 86) { para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.'; } else if (choice === 'sunny' && temperature >= 86) { - para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.'; + para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.'; } ``` @@ -241,7 +241,7 @@ if (camionDeGlaces || etatDeLaMaison === 'on fire') { } ``` -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 : +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 : ```js if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) { @@ -253,7 +253,7 @@ if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) { 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` : +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` : ```js if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { @@ -261,7 +261,7 @@ if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { } ``` -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 : +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 : ```js example-bad if (x === 5 || 7 || 10 || 20) { @@ -269,7 +269,7 @@ if (x === 5 || 7 || 10 || 20) { } ``` -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 : +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 : ```js if (x === 5 || x === 7 || x === 10 ||x === 20) { @@ -279,9 +279,9 @@ if (x === 5 || x === 7 || x === 10 ||x === 20) { ## 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 `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](/fr/docs/Web/JavaScript/Reference/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 : +Les [instructions switch](/fr/docs/Web/JavaScript/Reference/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 : ```js switch (expression) { @@ -302,19 +302,19 @@ switch (expression) { Ici nous avons -1. Le mot‑clé `switch` suivi de parenthèses. +1. Le mot‑clé `switch` suivi de parenthèses. 2. Une expression ou une valeur mise entre les parenthèses. 3. Le mot‑clé `case` suivi d'une expression ou d'une valeur, et de deux‑points. 4. Le code exécuté si l'expression/valeur de `case` correspond à celles de `switch`. 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. Vous pouvez rajouter autant de **cas** que vous le souhaitez. (points 3–5) -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. +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. -> **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. +> **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 : +Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction `switch` à la place : ```html <label for="weather">Select the weather type today: </label> @@ -364,21 +364,21 @@ function setWeather() { ## 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](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_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 : +Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'[opérateur ternaire ou conditionnel](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_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 : +Regardons cet exemple simple : ```js -let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.'; +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 ». +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. +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. ```html <label for="theme">Select theme: </label> @@ -409,33 +409,33 @@ select.onchange = function() { 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](/fr/docs/Web/API/GlobalEventHandlers/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. +Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/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](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) ici aussi.) -## Apprentissage actif : un calendrier simple +## Apprentissage actif : un calendrier simple -Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez : +Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez : - Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois. - Un pilote d'événement `onchange` pour détecter si la valeur choisie dans le menu `<select>` a été modifiée. - Une fonction `createCalendar()` qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}. -Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction `onchange`, juste au dessous du commentaire `// AJOUTER LA CONDITION ICI`. Elle doit : +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. 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. -Conseils : +Conseils : -- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours. +- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours. - Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut. 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". ```html hidden <div class="output" style="height: 500px;overflow: auto;"> - <label for="month">Choisissez un mois : </label> + <label for="month">Choisissez un mois : </label> <select id="month"> <option value="Janvier">Janvier</option> <option value="Février">Février</option> @@ -531,7 +531,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; +var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -539,19 +539,19 @@ window.addEventListener('load', updateCode); {{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }} -## Activité : plus de choix de couleurs +## 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` : +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` : - Elle doit accepter la variable `choice` comme expression d'entrée. - Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à -dire blanc, noir, mauve, jaune ou psychédélique. -- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets. +- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets. -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 ». +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 ». ```html hidden <div class="output" style="height: 300px;"> - <label for="theme">Choisissez un thème : </label> + <label for="theme">Choisissez un thème : </label> <select id="theme"> <option value="white">Blanc</option> <option value="black">Noir</option> @@ -606,7 +606,7 @@ solution.addEventListener('click', function() { updateCode(); }); -const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n let choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; +const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n let choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -616,7 +616,7 @@ window.addEventListener('load', updateCode); ## 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](/fr/Apprendre#Nous_contacter) pour une aide. +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](/fr/Apprendre#Nous_contacter) pour une aide. ## Voir aussi diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md index 9b0e1d4e50..0133dfdfb7 100644 --- a/files/fr/learn/javascript/building_blocks/functions/index.md +++ b/files/fr/learn/javascript/building_blocks/functions/index.md @@ -69,7 +69,7 @@ var myNumber = Math.random(); > **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 vous **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. +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 vous **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](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur. @@ -83,7 +83,7 @@ Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaSc ## 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](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça : +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](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça : ```js function draw() { @@ -97,13 +97,13 @@ function draw() { } ``` -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 : +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 : ```js 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 tout le code 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 : +au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code 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 : ```js function random(number) { @@ -111,7 +111,7 @@ function random(number) { } ``` -Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/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. +Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/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 @@ -144,7 +144,7 @@ function() { } ``` -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é : +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é : ```js var myButton = document.querySelector('button'); @@ -209,7 +209,7 @@ Certaines fonctions nécessitent que l'on définisse des **paramètres** lorsqu' > **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()](/fr/docs/Web/JavaScript/Reference/Global_Objects/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 : +Par exemple, la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/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 : ```js var myNumber = Math.random(); @@ -242,7 +242,7 @@ Parlons un peu de la {{glossary("portée")}} — un concept très important lors 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 quelle 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. +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 : @@ -271,13 +271,13 @@ function greeting() { } ``` -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`. +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](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)). 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 ! +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 !  @@ -304,7 +304,7 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portà output(z); ``` - Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/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. + Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/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. 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 : @@ -350,7 +350,7 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portà 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. + 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. Pour finir, essayez de mettre à jour le code comme ceci : @@ -373,15 +373,15 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portà b(); ``` - Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/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. + Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/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. > **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](/fr/docs/Web/JavaScript/Reference/Errors/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. +> **Note :** Le message d'erreur [ReferenceError: "x" is not defined](/fr/docs/Web/JavaScript/Reference/Errors/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 : +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 : ```js function myBigFunction() { @@ -405,7 +405,7 @@ function subFunction3() { } ``` -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 : +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 : ```js function myBigFunction() { diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md index e95ecbc4a2..969fbb7f74 100644 --- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/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. +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. <table class="standard-table"> <tbody> @@ -25,7 +25,7 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav <th scope="row">Conditions préalables:</th> <td> Avant de tenter cette évaluation, vous devriez avoir parcouru tous les - articles de ce module. + articles de ce module. </td> </tr> <tr> @@ -42,13 +42,13 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav Pour réaliser cette évaluation, vous devez récupérer le fichier [ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur. -Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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. +Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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: +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: ```html <h1>Image gallery example</h1> @@ -70,7 +70,7 @@ L'exemple ressemble à ceci: Les parties les plus intéressantes du fichier CSS de l'exemple: -- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un  `<div>` vide dimensionné à la même taille que le `<img>` et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton `<button>`qui est utilisé pour contrôler l'effet d'assombrissement. +- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un `<div>` vide dimensionné à la même taille que le `<img>` et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton `<button>`qui est utilisé pour contrôler l'effet d'assombrissement. - Réglez la largeur des images à l'intérieur de `thumb-bar <div>`(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à -côte sur une ligne. Votre JavaScript doit: @@ -92,7 +92,7 @@ Nous vous avons fourni des lignes qui storent une référence à `thumb-bar <div 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. 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. +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. ### Ajout d'un gestionnaire onclick à chaque miniature @@ -107,10 +107,10 @@ Vous avez besoin de: 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. Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`. +2. Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`. 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)"`. -Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3. +Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3. ```js btn.setAttribute('class', xxx); diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md index ddf8519680..cf00276c10 100644 --- a/files/fr/learn/javascript/building_blocks/index.md +++ b/files/fr/learn/javascript/building_blocks/index.md @@ -15,7 +15,7 @@ original_slug: Apprendre/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. +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 @@ -28,7 +28,7 @@ Avant de commencer ce module, vous devriez connaître les bases du [HTML](/fr/Ap - [Prendre des décisions dans votre code — les conditions](/fr/docs/Learn/JavaScript/Building_blocks/conditionals) - : 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](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) - - : 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. + - : 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](/fr/docs/Learn/JavaScript/Building_blocks/Functions) - : 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](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function) diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md index db4470f17c..69f1989a43 100644 --- a/files/fr/learn/javascript/building_blocks/looping_code/index.md +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md @@ -245,11 +245,11 @@ Cela nous donne la sortie suivante : Cela montre une boucle utilisée 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. 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. 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 : +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. 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. Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à  ("Jeff, ") + 2. Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à ("Jeff, ") 3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à `i` (`i++`), et alors le processus recommence encore. 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. @@ -276,13 +276,13 @@ for (let i = 0; i < cats.length; i++) { > **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) (et aussi le [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)). -> **Attention :** 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.** +> **Attention :** 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](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_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. +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 : @@ -364,7 +364,7 @@ bouton.addEventListener('click', function() { {{EmbedLiveSample('', '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. 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. +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. 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. Maintenant sur la partie intéressante, la boucle for : @@ -510,7 +510,7 @@ do { } while (i < cats.length); ``` -> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet). +> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet). > **Attention :** 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.** @@ -588,7 +588,7 @@ solution.addEventListener('click', function() { updateCode(); }); -let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'; +let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'; let solutionEntry = jsSolution; textarea.addEventListener('input', updateCode); @@ -645,11 +645,11 @@ Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée Plus précisément, nous attendons de vous : -- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie +- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie - Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle. - - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace. - - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted` du `textContent` suivi d'une virgule et d'un espace. + - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace. + - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted` du `textContent` suivi d'une virgule et d'un espace. Nous vous avons déjà fourni les éléments suivants : @@ -796,7 +796,7 @@ textarea.onkeyup = function(){ ## 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. +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`: diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md index f801f4c918..9f008d39f5 100644 --- a/files/fr/learn/javascript/building_blocks/return_values/index.md +++ b/files/fr/learn/javascript/building_blocks/return_values/index.md @@ -16,7 +16,7 @@ original_slug: Apprendre/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. +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. <table class="standard-table"> <tbody> @@ -43,7 +43,7 @@ Il y a un concept essentiel que nous devons aborder dans ce cours, pour être co ## 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: +**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: ```js var myText = 'I am a string'; @@ -54,17 +54,17 @@ console.log(newString); // 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()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/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. +Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/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](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). 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. +Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). 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()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) 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 ! +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()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) 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](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}: +Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef [return](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}: ```js function draw() { @@ -78,7 +78,7 @@ function draw() { } ``` -À 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: +À 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: ```js function random(number) { @@ -103,7 +103,7 @@ La fonction retourne le résultat de `Math.floor(Math.random()*number)` chaque f 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: +et que les trois appels `random()` retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon: ```js ctx.arc(500, 200, 35, 0, 2 * Math.PI); @@ -115,8 +115,8 @@ Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de ret Allons-y, écrivons nos propres fonctions avec des valeurs de retour. -1. Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/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. Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: +1. Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/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. Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: ```js function squared(num) { @@ -137,7 +137,7 @@ Allons-y, écrivons nos propres fonctions avec des valeurs de retour. } ``` - 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](https://en.wikipedia.org/wiki/Factorial) du nombre donné. + 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](https://en.wikipedia.org/wiki/Factorial) du nombre donné. 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: @@ -154,33 +154,33 @@ Allons-y, écrivons nos propres fonctions avec des valeurs de retour. } ``` - 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`. + 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()](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN) pour vérifier si la valeur `num` est un nombre — si c'est le cas, elle retourne `false`, sinon `true`. + 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()](/fr/docs/Web/JavaScript/Reference/Global_Objects/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. + 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. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le. -> **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](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), ou demandez-nous de l'aide. +> **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](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), 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: +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: -- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs. -- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin. +- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs. +- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin. ## 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](/fr/Learn#Contact_us) pour obtenir de l'aide. +Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/Learn#Contact_us) pour obtenir de l'aide. ## Voir aussi -- [Fonctions en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions. -- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement. +- [Fonctions en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions. +- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction. Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement. {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} |