Fonctions
Les boucles contrôlent quand le travail se répète. Les fonctions répondent à autre chose : où ranger un bloc de travail pour le lancer plus tard par son nom ? Une fonction est une recette nommée. Vous la définissez une fois. Vous l’appelez quand ces étapes sont nécessaires. Le copier-coller s’efface ; le nom reste.
Qu’est-ce qu’une fonction ?
En JavaScript vous la déclarez avec le mot-clé function, un nom, des parenthèses () et un corps entre { }. Rien du corps ne s’exécute tant que vous n’appelez pas la fonction — écrivez le nom puis (). Pensez : « emballez les étapes, puis appuyez sur lecture. »
Parties d’une fonction
📊 Anatomie d’une fonction
| Partie | Rôle | Usage courant |
|---|---|---|
mot-clé function |
démarre la déclaration | « voici une recette nommée » |
| nom | ainsi vous l’appelez plus tard | sayHi, showTotal — des verbes clairs aident |
() après le nom |
site d’appel / plus tard les entrées | () vide veut encore dire « exécute maintenant » |
corps { } |
les étapes à chaque appel | logs, calculs, mises à jour de page |
appel name() |
exécute le corps maintenant | réutiliser sans réécrire le corps |
Définir seulement stocke la recette. Appeler l’exécute. Sans appel, le corps reste silencieux — c’est normal, pas un bug du langage.
function sayHi() {
console.log("Hi");
}
sayHi();
Définissez, puis appelez
Les trois premières lignes définissent sayHi. La dernière appelle. Vous devriez voir Hi dans la console. Sans sayHi();, la fonction existe mais ne tourne pas.
function beep() {
console.log("beep");
}
beep();
beep();
Réutiliser un seul corps
Une définition, deux appels — beep s’affiche deux fois. C’est l’idée : écrire les étapes une fois, les relancer quand l’histoire a besoin de ce son. Changer le corps plus tard met à jour tous les sites d’appel de ce nom.
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();
Le corps peut contenir plusieurs étapes
Sur un appel, les deux lignes s’exécutent dans l’ordre : loading, puis ready. Une fonction n’est pas limitée à une instruction — rangez toute la mini-tâche entre les accolades.
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();
Le travail local reste dans la recette
city et line vivent dans greetCity. Chaque appel construit le message et affiche Hello from Tehran. Pour ce motif, ces noms n’ont pas besoin d’exister dehors — le déclencheur est l’appel.
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();
Exécuter du travail pour la page
Même idée que les leçons DOM : trouver un élément, fixer textContent. L’envelopper dans une fonction permet à un bouton, un minuteur ou un script d’appeler fillOut() quand la page doit changer — un nom, un travail.
Montrer une fonction sur la page
Définissez une fonction qui écrit une courte ligne dans un paragraphe, puis appelez-la depuis le script pour que le visiteur voie le résultat.
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>
La page affiche Hello from a function. Le corps de showMsg a écrit dans le DOM ; l’appel du bas a lancé la lecture. Changez la chaîne, rafraîchissez, lisez la nouvelle ligne. La leçon suivante approfondit les paramètres — des valeurs passées entre parenthèses à l’appel.
À vous d’essayer
- Déclarez
function hello()qui affiche"hello"et appelez-la une fois. - Appelez cette même fonction une seconde fois sans réécrire le corps.
- Faites une fonction dont le corps affiche deux mots différents dans l’ordre.
- Dans une fonction, construisez une chaîne avec
letet affichez-la. - Écrivez une fonction qui met
#outà"ok"(ou utilisez l’id de la démo). - Dans la démo HTML, changez seulement le message, rafraîchissez, lisez le paragraphe.
Erreurs fréquentes
- Définir une fonction et oublier de l’appeler avec
() - Écrire
sayHisans()— cela nomme la fonction, n’exécute pas le corps - Copier-coller les mêmes lignes au lieu d’appeler une fonction deux fois
- Mettre le travail hors des
{ }et s’attendre que le nom de fonction le « possède » - Mélanger cette leçon avec paramètres/
return— cela vient après ; ici définir + appeler
Résumé
- Une fonction regroupe des étapes sous un nom
- Déclarez avec
function name() { … } - Appelez avec
name()pour exécuter le corps - Un corps, plusieurs appels — c’est la réutilisation
- Le corps peut contenir plusieurs instructions et du travail local avec
let - Les mises à jour de page vont bien dans une fonction appelée au besoin
- Suite : paramètres — passer des valeurs à l’appel
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut