Les fonctions JavaScript
Une fonction est une liste d'instructions ayant un but précis et que l'on utilise fréquemment. L'intérêt est d'éviter les répétitions dans vos codes, et de gagner en lisibilité. Le principe consiste à nommer un bloc d'instructions, puis de l'exécuter au besoin. Dans le langage JavaScript, une fonction se définit généralement dans l’entête <head> puis s’appelle dans le corps de la page, suite à un évènement.
Fonction simple
Voici une fonction simple qui affiche une boite d'alerte avec le texte "coucou". Pour l'exécuter, il suffit de l'appeler en écrivant son nom quelque part dans le code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function coucou() {
alert("coucou");
}
</script>
</head>
<body>
<script>
coucou();
</script>
</body>
</html>Si vous ne l'appelez pas, la fonction ne s'exécute pas.
Fonction avec un paramètre
L'action d'une fonction peut varier avec des paramètres. Grâce au paramètre prenom, la fonction salut() ci-dessous vous salue personnellement.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function salut(prenom) {
alert("Bonjour " + prenom);
}
</script>
</head>
<body>
<script>
salut("Guillaume");
</script>
</body>
</html>La fonction donne un résultat différent selon le paramètre qu'on lui transmet lors de son appel. Dans cet exemple, la valeur "Guillaume" affecte la variable prenom. C'est un peu comme si on écrivait :
prenom = "Guillaume";
Fonction avec plusieurs paramètres
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function salut(prenom, nom) {
alert("Bonjour " + prenom + " " + nom);
}
</script>
</head>
<body>
<script>
salut("Guillaume","Guittenit");
</script>
</body>
</html>Ce programme est vraiment très courtois !
Fonction avec retour de résultat
Une fonction peut retourner un résultat particulier grâce à l’instruction "return".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function somme(a, b, c) {
return (a + b + c);
}
</script>
</head>
<body>
<script>
alert(somme(8, 4*2, 3));
</script>
</body>
</html>Affichera à l'écran :
