MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Construire vos propres fonctions

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Nous avons traité essentiellement de la théorie dans l'article précédent, celui-ci fournira une expérience pratique  — ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.

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

Apprentissage actif : construisons une fonction

La fonction que nous allons construire sera nommée displayMessage(), et elle affichera une boite de message personnalisée à l'attention de l'utilisateur tout en haut de la page d'un site web. Elle fonctionnera comme un substitut plus utile que la fonction alert() intégrée du navigateur. Vous avez vu cela avant, mais nous allons simplement rafraîchir nos mémoires — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :

alert('This is a message');

La fonction prend un seul argument en paramètre— la chaîne de caractères sera affichée dans une boite d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.

la fonction alert() n'est pas si bonne: vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, ou une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusant.

Note : Cet exemple devrait fonctionner dans tous les navigateurs modernes correctement, mais pourrait avoir un comportement un peu plus inattendu (et amusant) dans un navigateur plus daté. Nous recommanderons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

La fonction basique

Pour commencer, mettons en place une fonction de base.

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien c'est que vous pouvez les différencier — les noms de fonctions comportent des parenthèses après eux, pas les variables.

  1. Nous aimerions que vous démarriez celui-ci en accédant au fichier function-start.html en faisant une copie en local.  Nous avons également fourni quelques CSS de base pour styliser la boîte de message personnalisée, et un élément <script> à mettre dans notre JavaScript.
  2. Ensuite, ajouter le code ci-dessous à l'intérieur de l'élément <script> :
    function displayMessage() {
     
    }
    Nous commençons avec le mot-clé function, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, un ensemble de parenthèses, et un ensemble d'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, ajoutons le code suivant à l'intérieur des accolades :
    var html = document.querySelector('html');
    
    var panel = document.createElement('div');
    panel.setAttribute('class', 'msgBox');
    html.appendChild(panel);
    
    var msg = document.createElement('p');
    msg.textContent = 'This is a message box';
    panel.appendChild(msg);
    
    var closeBtn = document.createElement('button');
    closeBtn.textContent = 'x';
    panel.appendChild(closeBtn);
    
    closeBtn.onclick = function() {
      panel.parentNode.removeChild(panel);
    }

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

La première ligne utilise la fonction de l'API DOM appelée document.querySelector() pour sélectionner l'élément <html> et stocker une de ces références dans une variable appelée html, pour pouvoir faire des choses sur elle plus tard comme par exemple :

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

La prochaine section utilise une autre fonction de l'API DOM API appelée Document.createElement() pour créer un élément <div> et stocker une de ces références dans une variable appelée panel. Cet élément sera le conteneur extérieur à notre boite de message.

Nous utilisons ensuite encore une autre fonction de l'API DOM API appelée 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 boite de message ainsi que son contenu.

Maintenant, appellons une fonction du DOM appellée Node.appendChild() sur la variable html créée précédemment, qui imbrique chaque élément à l'intérieur en tant qu'enfant de lui-même. Nous spécifions le panneau <div> tel que 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 pourra pas simplement apparaître sur la page tel quel — nous avons besoin de préciser où le mettre.

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

Les deux prochaines sections feront usage des mêmes fonctions createElement() et appendChild() que nous avons déjà vu créer deux nouveaux éléments — l'un <p> et l'autre <button> —  et les insérer dans la page en tant qu'enfant du panneau <div>. On utilise leur propriété 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 boite de message.

var msg = document.createElement('p');
msg.textContent = 'This is a message box';
panel.appendChild(msg);

var closeBtn = document.createElement('button');
closeBtn.textContent = 'x';
panel.appendChild(closeBtn);

Finalement, nous utilisons pour ce faire, un gestionnaire d'évènements GlobalEventHandlers.onclick de sorte que l'on clique sur le bouton et, qu'une partie du code sera déclenchée pour supprimer la totalité du panneau de la page — Ce qui, visuellement, fera disparaître la boite de message.

Sommairement, le gestionnaire onclick est une propriété disponible sur le bouton (en fait sur n'importe quel élément de la page) qui pourra être ajouté à une fonction pour spécifier que morceau de code sera déclenché quand le bouton sera cliqué. Vous apprendrez encore beaucoup plus à ce propos plus tard, à travers notre article sur les évènements. Donnons à notre gestionnaire  onclick la valeur d'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 Node.removeChild() pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <div>.

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

Fondamentalement, ce bloc de code entier génère un bloc de code HTML inséré au code HTML existant, qui ressemblera à :

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

Ça nous a fait beaucoup de code à passer en revue — Ne vous inquiétez pas trop si vous ne vous souvenez pas exactement comment chaque instruction fonctionne ! La partie principale sur laquelle nous voulons mettre l'accent ici est la structure de la fonction son utilisation; simplement, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.

Appeler la fonction

Maintenant que nous avons défini notre fonction dans notre balise <script> comme il faut, pourtant il ne se passera rien si on laisse le code en l'état.

  1. Essayez d'inclure la ligne suivante au-dessous de votre fonction pour l'appeler :
    displayMessage();
    Cette ligne appelle la fonction, en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et le recharger dans le navigateur, vous verrez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.
  2. Maintenant, ouvrez vos outils de développeur dans le navigateur sur la page d'exemple, allez à la console JavaScript et tapez y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! Donc, c'est amusant — nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.

    Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur et du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, ou si une erreur s'est produite, ou si l'utilisateur essaie de supprimer leur profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès... etc.

    Dans cette demo, 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, nous allons sélectionner le bouton et stocker une référence à celle-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction :
    var btn = document.querySelector('button');
  5. Enfin, ajouteZ la ligne suivante à la précédente :
    btn.onclick = displayMessage;
    D'une manière similaire à notre ligne closeBtn.onclick... à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
  6. Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'affiche lorsque vous cliquez sur le bouton.

Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton a été cliqué. Si vous essayez de modifier la ligne pour :

btn.onclick = displayMessage();

Essayez alors d'enregistrer et de rafraîchir la page, vous verrez que la boîte de message apparaît sans que le bouton soit cliqué ! Les parenthèses dans ce contexte sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.

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

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

En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, nous permettant ainsi d'appeler notre fonction avec différentes options.

  1. Premièrement, mettons à jour la première ligne :
    function displayMessage() {
    par :
    function displayMessage(msgText, msgType) {
    Maintenant, quand nous appelons la  fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses pour spécifier le message à afficher dans la boite, et le type de message que c'est.
  2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : 
    msg.textContent = 'This is a message box';
    avec :
    msg.textContent = msgText;
  3. Nous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante :
    btn.onclick = displayMessage;
    par ce bloc :
    btn.onclick = function() {
      displayMessage('Woo, this is a different message!');
    };
    Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de lA mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton n'est pas cliqué.
  4. Rechargez et essayez le code à nouveau et vous verrez qu'elle 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

Concernant le paramètre suivant. Celui-ci va impliquer un peu plus de travail — nous allons le définir de sorte que, selon la valeur que prendra le paramètre msgType, la fonction affichera alors une icône différente et une couleur d'arrière-plan différente.

  1. Tout d'abord, télécharger les icônes nécessaires à cet exercice (warning et chat) from GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoir aue votre fichier HTML.
    Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. 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 :
    width: 200px;
    par :
    width: 242px;
  3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS .msgBox p { ... } :
    padding-left: 82px;
    background-position: 25px center;
    background-repeat: no-repeat;
  4. Maintenant, nous devons ajouter du code à notre fonction displayMessage() pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "}" de votre fonction :
    if (msgType === 'warning') {
      msg.style.backgroundImage = 'url(icons/warning.png)';
      panel.style.backgroundColor = 'red';
    } else if (msgType === 'chat') {
      msg.style.backgroundImage = 'url(icons/chat.png)';
      panel.style.backgroundColor = 'aqua';
    } else {
      msg.style.paddingLeft = '20px';
    }
    Ici, si le paramètre msgType à la valeur 'warning', l'icône d'avertissement sera affichée et le panneau prendra la couleur rouge en arrière-plan. S'il a la valeur 'chat', l'icône de chat sera affichée et le panneau prendra la couleur bleu ciel en arrière-plan.. Si le paramètre msgType n'a pas de valeur du tout (ou s'il a une valeur totallement differente), alors la partie du code contenue dans else { ... } entrera en jeu, et le paragraphe prendra un padding par défaut et il n'y aura pas d'icône, il n'y aura pas de couleur d'arrière-plan non plus. En fait, on fourni 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() :
    displayMessage('Woo, this is a different message!');
    par soit l'un ou l'autre :
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
    displayMessage('Brian: Hi there, how are you today?','chat');
    Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenu 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 (aussi, vous pouvez tester la demo), ou nous demander de l'aide.

Conclusion

Félicitations pour avoir été jusqu'au bout ! 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.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Gasperowicz
 Dernière mise à jour par : Gasperowicz,