Construire vos propres fonctions

Dans l'article prcdent, nous avons trait essentiellement de la thorie. Le prsent article fournira une exprience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons galement quelques dtails supplmentaires concernant les fonctions.

Prrequis :	Savoir-faire de base, une comprhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions blocs de code rutilisables.
Objectif :	Fournir quelques pratiques de cration de fonctions, et expliquer un peu plus les dtails associs.

Dans cet article

Apprentissage actif : Construisons une fonction
La fonction de base
Appeler la fonction
Amliorer la fonction l'aide de paramtres
Conclusion

Apprentissage actif : Construisons une fonction

La fonction que nous allons construire sera nomme displayMessage(). Elle affichera une bote de message personnalise sur une page web. Elle fonctionnera comme un substitut personnalis de la fonction alert() du navigateur. Vous avez dj vu cela avant, mais nous allons simplement nous rafrachir la mmoire 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 paramtre la chane de caractres qui est affiche dans la bote d'alerte. Vous pouvez essayer de varier la syntaxe de la chane pour modifier le message.

La fonction alert() est assez limite : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icne, ou autre chose. Nous en construirons une qui s'avrera plus amusante.

Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

La fonction de base

Pour commencer, mettons en place une fonction de base.

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mmes rgles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les diffrencier les noms de fonctions se terminent par des parenthses, pas les variables.

Commencez par faire une copie locale du fichier function-start.html. Vous pourrez voir que le code HTML est simple l'lment body ne contient qu'un seul bouton. Nous avons galement ajout quelques rgles CSS de base pour styliser la bote de message personnalise, et un lment <script> pour crire notre code JavaScript.
Ensuite, ajoutez le code ci-dessous l'intrieur de l'lment <script> :
js
```
function displayMessage() {}
```
Nous commenons avec le mot-cl function, qui signifie que nous dfinissons une fonction. Celui-ci est suivi par le nom que nous voulons donner notre fonction, des parenthses et des accolades. Tous les paramtres que nous voulons donner notre fonction vont l'intrieur des parenthses, et le code qui s'excute lorsque nous appelons la fonction va l'intrieur des accolades.

Enfin, ajoutez le code suivant l'intrieur 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 premire ligne utilise une fonction de l'API DOM appele document.querySelector() pour slectionner l'lment <html> et stocker une rfrence vers cet lment dans une variable appele html, de faon pouvoir l'utiliser plus tard :

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

La section suivante utilise une autre fonction de l'API DOM appele Document.createElement() pour crer un lment <div> et stocker une rfrence vers lui dans une variable appele panel (Dans la suite de l'article, nous parlerons simplement du panneau <div>.). Cet lment sera le conteneur extrieur de notre bote de message.

Puis, nous utilisons encore une autre fonction de l'API DOM appele Element.setAttribute() pour ajouter un attribut class notre panneau qui aura pour valeur msgBox. Ceci rendra plus facile la mise en forme de l'lment si vous regardez le CSS de la page, vous verrez que nous utilisons un slecteur de classe .msgBox dans le but de styliser la bote de message ainsi que son contenu.

Finallement, nous appelons une fonction du DOM nomme Node.appendChild() sur la variable html cre prcdemment, qui insre un lment, en tant qu'enfant, l'intrieur d'un autre. Nous spcifions le panneau <div> (panel) comme l'enfant que nous voulons ajouter l'intrieur de l'lment <html>. Nous avons besoin de le faire puisque l'lment que nous avons cr ne peut pas apparatre de lui-mme sur la page nous avons besoin de prciser o le mettre.

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

Les deux sections suivantes font usage des mmes fonctions createElement() et appendChild() que nous avons dj vu pour crer deux nouveaux lments l'un <p> et l'autre <button> et pour les insrer dans la page en tant qu'enfant du panneau <div>. On utilise leur proprit Node.textContent qui reprsente le contenu textuel d'un lment pour insrer un message l'intrieur du paragraphe, ainsi qu'un 'x' l'intrieur du bouton. Ce bouton sera cliqu / activ quand l'utilisateur voudra fermer la bote de message.

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

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

Finalement, nous utilisons un gestionnaire d'vnements click de sorte qu'un clic sur le bouton dclenche le bout de code charg de supprimer la totalit du panneau de la page c'est--dire fermer la bote de message.

Le gestionnaire onclick est une proprit disponible sur le bouton (en fait, sur n'importe quel lment de la page) qui pourra se voir transmettre une fonction en paramtre pour spcifier quel morceau de code sera dclench quand le bouton sera cliqu. Vous en apprendrez bien plus dans notre article sur les vnements. Nous avons pass notre gestionnaire onclick une fonction anonyme, qui contient le code excut quand le bouton est cliqu. L'instruction dfinie dans la fonction utilise la fonction de l'API DOM Node.removeChild() pour indiquer que nous tenons supprimer un lment enfant spcifique de l'lment HTML dans notre cas le panneau <div>.

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

Au final, l'intgralit du bloc de code gnre un bloc de code HTML et l'insre dans la page, ce qui ressemble a :

html

<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 inquitez 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'intressant pour mettre en valeur cet exemple.

Appeler la fonction

prsent, nous avons notre fonction dfinie comme il faut dans notre balise <script>, mais il ne se passera rien si on laisse les choses en l'tat.

Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler :
js
```
displayMessage();
```
Cette ligne appelle la fonction en la faisant fonctionner immdiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite bote de message apparatre immdiatement, une seule fois. Aprs tout, nous ne l'appelons bien qu'une fois.
Maintenant, ouvrez vos outils de dveloppement sur la page d'exemple, allez la console JavaScript et tapez-y la ligne nouveau, vous verrez qu'elle apparat encore une fois ! C'est gnial, nous avons maintenant une fonction rutilisable que nous pouvons appeler chaque fois que nous le voulons.

Cela dit, nous voulons probablement qu'elle apparaisse en rponse aux actions de l'utilisateur ou du systme. Dans une application relle, une telle bote de message serait probablement appele en rponse de nouvelles donnes disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("tes vous sr de vouloir raliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opration se termine avec succs, etc.

Dans cette dmo, nous faisons apparatre le message quand l'utilisateur clique sur le bouton.
Supprimez la ligne prcdente que vous avez ajoute.
Ensuite, vous slectionnerez le bouton et stockerez une rfrence vers celui-ci dans une variable. Ajoutez la ligne suivante votre code, au-dessus de la dfinition de fonction :
js
```
var btn = document.querySelector("button");
```
Enfin, ajoutez la ligne suivante la prcdente :
js
```
btn.onclick = displayMessage;
```
D'une manire similaire notre ligne closeBtn.onclick... l'intrieur de la fonction, ici, nous appelons un certain code en rponse 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.
Essayez d'enregistrer et de rafrachir la page, maintenant vous devriez voir la bote de message s'afficher lorsque vous cliquez sur le bouton.

Vous vous demandez peut-tre pourquoi nous n'avons pas inclus les parenthses aprs le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immdiatement, seulement aprs que le bouton aura t cliqu. Si vous modifiez la ligne pour :

btn.onclick = displayMessage();

Enregistrez et rafrachissez la page, vous verrez que la bote de message apparat sans que le bouton ait t cliqu ! Dans ce contexte, les parenthses sont parfois appeles "oprateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez excuter la fonction immdiatement dans la porte actuelle. Dans le mme ordre d'ide, le code l'intrieur de la fonction anonyme n'est pas excut immdiatement, car il se trouve l'intrieur de la porte de la fonction.

Si vous avez essay la dernire exprimentation, assurez-vous d'annuler la dernire modification avant de poursuivre.

Amliorer la fonction l'aide de paramtres

En l'tat, la fonction n'est pas trs utile on ne veut pas montrer le mme message par dfaut chaque fois. Amliorons la en ajoutant quelques paramtres, ils permettront d'appeler la fonction avec diffrentes options.

Premirement, mettons jour la premire ligne :
js
```
function displayMessage() {
```
par :
js
```
function displayMessage(msgText, msgType) {
```
Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthses : une pour spcifier le message afficher dans la bote, l'autre pour le type de message.
Pour faire usage du premier paramtre, mettez jour la ligne suivante l'intrieur de votre fonction :
js
```
msg.textContent = "This is a message box";
```
avec :
js
```
msg.textContent = msgText;
```
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;
```
par ce bloc :
js
```
btn.onclick = function () {
  displayMessage("Woo, this is a different message!");
};
```
Si nous voulons spcifier des paramtres l'intrieur des parenthses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement nous avons besoin de la mettre l'intrieur d'une fonction anonyme de sorte qu'elle n'est pas dans la porte immdiate et n'est donc pas appele immdiatement. Maintenant, elle ne sera pas appele tant que le bouton ne sera pas cliqu.
Rechargez et essayez le code nouveau et vous verrez qu'il fonctionne toujours trs bien, sauf que maintenant vous pouvez galement modifier le message l'intrieur du paramtre pour obtenir des messages diffrents affichs dans la bote !

Un paramtre plus complexe

Passons au paramtre suivant. Celui-ci va demander un peu plus de travail selon la valeur du paramtre msgType, la fonction affichera une icne et une couleur d'arrire-plan diffrentes.

Tout d'abord, tlchargez les icnes ncessaires cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appel icons dans le mme rpertoire que votre fichier HTML.

Note : Icnes warning et chat trouvs sur iconfinder.com, et crs par Nazarrudin Ansyari. Merci !
Ensuite, trouvez le CSS l'intrieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icnes. Tout d'abord, mettez jour la largeur .msgBox en changeant :
css
```
width: 200px;
```
par :
css
```
width: 242px;
```

Ensuite, ajoutez les lignes l'intrieur de la rgle CSS .msgBox p { ... } :

css

padding-left: 82px;
background-position: 25px center;
background-repeat: no-repeat;

Maintenant, nous devons ajouter du code notre fonction displayMessage() pour grer l'affichage de l'icne. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "}" de votre fonction :
js
```
if (msgType === "warning") {
  msg.style.backgroundImage = "url(icons/warning.png)";
  panel.style.backgroundColor = "red";
} else if (msgType === "chat") {
  msg.style.backgroundImage = "url(icons/chat.png)";
  panel.style.backgroundColor = "aqua";
} else {
  msg.style.paddingLeft = "20px";
}
```
Ici, quand msgType a la valeur 'warning', l'icne d'avertissement est affiche et le fond du panneau prend la couleur rouge. Si msgType a la valeur 'chat', l'icne de chat est affiche et l'arrire-plan du panneau est bleu. Si le paramtre msgType n'a pas de valeur du tout (ou s'il a une valeur totalement diffrente), alors la partie du code contenue dans else { ... } est excute : le paragraphe prend un padding par dfaut et il n'y a ni icne ni couleur d'arrire-plan. En fait, on fournit un tat par dfaut si aucun paramtre msgType n'est fourni, ce qui signifie qu'il s'agit d'un paramtre facultatif !
Nous allons tester notre fonction mise jour, essayez de mettre jour l'appel displayMessage() :
js
```
displayMessage("Woo, this is a different message!");
```
par soit l'un ou l'autre :
js
```
displayMessage("Your inbox is almost full  delete some mails", "warning");
displayMessage("Brian: Hi there, how are you today?", "chat");
```
Vous pouvez voir quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :

Note : Si vous avez des difficults mettre en uvre cet exemple, n'hsitez pas verifier votre code par rapport la version dfinitive sur GitHub (aussi, vous pouvez tester la dmo), ou nous demander de l'aide.

Conclusion

Vous tes venu bout de cette activit, flicitations ! Cet article vous a amen travers tout le processus de construction d'une fonction pratique personnalise, qui avec un peu plus de travail pourrait tre transpose dans un projet rel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel les valeurs de retour.

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 10 avr. 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu