Une fonction JavaScript est un bloc de code conçu pour effectuer une une tâche particulière.
Une fonction JavaScript est exécutée lorsque "quelque chose" l'invoque (l'appelle).
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Une fonction JavaScript est définie avec le mot clé function, suivi d'un nom, suivi de parenthèses ().
Les noms de fonctions peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes dollar. (mêmes règles que les variables).
Les parenthèses peuvent inclure des noms de paramètres séparés par des virgules :
(paramètre1, paramètre2, ...)
Le code à exécuter, par la fonction, est placé entre accolades : {}
function
name(parameter1, parameter2, parameter3) {
// code to be executed
}Les paramètres de la fonction sont répertoriés entre parenthèses() dans la définition de la fonction.
Les arguments de la fonction sont les valeurs reçu par la fonction lorsqu'elle est invoquée.
A l'intérieur de la fonction, les arguments (les paramètres) se comportent comme des variables locales.
Le code à l'intérieur de la fonction s'exécutera lorsque "quelque chose" invoque (appelle) le fonction:
Lorsqu'un événement se produit (lorsqu'un utilisateur clique sur un bouton)
Lorsqu'il est invoqué (appelé) à partir du code JavaScript
Automatiquement (auto-invoqué)
Vous en apprendrez beaucoup plus sur l'invocation de fonctions plus tard dans ce document. Didacticiel.
Lorsque JavaScript atteint une instruction return, la fonction cessera de s'exécuter.
Si la fonction a été invoquée à partir d'une instruction, JavaScript le fera "return" pour exécuter le code après l'instruction d'appel.
Les fonctions calculent souvent une valeur de retour. La valeur de retour est "retourné" à l'appelant":
Calculez le produit de deux nombres et renvoyez le résultat :
// Function is called, the return value will end up in x
let x = myFunction(4, 3);
function myFunction(a, b) {
// Function returns the product of a and b
return a * b;
}Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Avec des fonctions, vous pouvez réutiliser le code
Vous pouvez écrire du code qui peut être utilisé plusieurs fois.
Vous pouvez utiliser le même code avec différents arguments pour produire des résultats différents.
L'opérateur() invoque (appelle) la fonction :
Convertir des degrés Fahrenheit en Celsius :
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius(77);Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>
Accéder à une fonction avec des paramètres incorrects peut renvoyer une réponse incorrecte :
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius();Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>
Accéder à une fonction sans() renvoie la fonction et non le résultat de la fonction :
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius;Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>
</body>
</html>
Comme vous le voyez dans les exemples ci-dessus, toCelsius fait référence à l'objet fonction, et toCelsius() fait référence au résultat de la fonction.
Les fonctions peuvent être utilisées de la même manière que les variables, dans tous les types de formules, d'affectations et calculs.
Au lieu d'utiliser une variable pour stocker la valeur de retour d'une fonction :
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";Vous pouvez utiliser la fonction directement, comme valeur de variable :
let text = "The temperature is " + toCelsius(77) + " Celsius";Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>
<p id="demo"></p>
<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
</script>
</body>
</html>
Vous en apprendrez beaucoup plus sur les fonctions plus loin dans ce didacticiel.
Les variables déclarées dans une fonction JavaScript deviennent LOCAL à la fonction.
Les variables locales ne sont accessibles que depuis l'intérieur de la fonction.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carNameEssayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Outside myFunction() carName is undefined.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;
function myFunction() {
let carName = "Volvo";
let text = "Inside: " + typeof carName + " " + carName;
document.getElementById("demo2").innerHTML = text;
}
myFunction();
</script>
</body>
</html>
Étant donné que les variables locales ne sont reconnues que dans leurs fonctions, les variables portant le même nom peuvent être utilisées dans différentes fonctions.
Les variables locales sont créées lorsqu'une fonction démarre et supprimées lorsque la fonction est terminée.