Fonctions en JavaScript

Fonctions en JavaScript#

Qu'est-ce qu'une fonction ?#

Comme en Python, une fonction est un bloc d'instructions nommé que l'on peut réutiliser à différents endroits du programme. L'intérêt est double :

  • Éviter de recopier plusieurs fois le même code.

  • Donner un nom significatif au code, ce qui rend le programme plus lisible.

En JavaScript, les fonctions joueront un rôle particulièrement important quand nous interagirons avec du HTML : elles seront appelées automatiquement quand l'utilisateur clique sur un bouton, tape au clavier, etc. Il est donc essentiel de bien les maîtriser.

Définir une fonction#

La syntaxe pour définir une fonction est très proche de Python. La seule différence est que l'on utilise le mot-clef function au lieu de def.

PythonJavaScript 
def affiche_salutations():
    print("Bonjour")
    print("Comment allez-vous ?")

function afficheSalutations() {
    console.log("Bonjour");
    console.log("Comment allez-vous ?");
}

Important

Définir une fonction n'exécute pas son code. Il faut ensuite l'appeler.

Appeler une fonction#

Pour appeler une fonction, on écrit simplement son nom suivi d'une paire de parenthèses (). La syntaxe est identique à Python.

<!DOCTYPE html>
<html><body><script>
function afficheSalutations() {
    console.log("Bonjour");
    console.log("Comment allez-vous ?");
}

console.log("Début du programme");
afficheSalutations();
console.log("Pouvez-vous répéter svp, je n'ai pas compris");
afficheSalutations();
</script></body></html>

Fonctions avec paramètres#

Une fonction devient beaucoup plus utile quand elle peut recevoir des paramètres (aussi appelés arguments). Les paramètres sont des variables que la fonction utilise dans son code.

PythonJavaScript 
def saluer(nom):
    print("Bonjour", nom)

saluer("Alice")
saluer("Bob")

function saluer(nom) {
    console.log("Bonjour " + nom);
}

saluer("Alice");
saluer("Bob");

On peut aussi avoir plusieurs paramètres :

PythonJavaScript 
def ajouter(a, b):
    print(a + b)

ajouter(5, 3)

function ajouter(a, b) {
    console.log(a + b);
}

ajouter(5, 3);

Fonctions qui renvoient une valeur#

Une fonction peut aussi renvoyer une valeur en utilisant le mot-clef return. On peut alors récupérer cette valeur dans une variable.

PythonJavaScript 
def doubler(nombre):
    return nombre * 2

resultat = doubler(5)
print(resultat)

function doubler(nombre) {
    return nombre * 2;
}

let resultat = doubler(5);
console.log(resultat);

Exercices#

Exercice 7#

Le code ci-dessous définit 2 fonctions avec paramètres. Complétez le programme en appelant uniquement ces fonctions pour obtenir les résultats demandés.

<!DOCTYPE html>
<html><body><script>
function calculerAire(rayon) {
    return 3.14159 * rayon * rayon;
}

function convertirCelsiusEnFahrenheit(celsius) {
    return celsius * 9 / 5 + 32;
}

// Aire d'un cercle de rayon 5
let aire = ;
console.log("Aire du cercle :" + aire);

// Conversion de 30°C en Fahrenheit
let tempF = ;
console.log("30°C = "+ tempF + "°F");
</script></body></html>

Solution

function calculerAire(rayon) {
    return 3.14159 * rayon * rayon;
}

function convertirCelsiusEnFahrenheit(celsius) {
    return celsius * 9 / 5 + 32;
}

let aire = calculerAire(5);
console.log("Aire du cercle :" + aire);

let tempF = convertirCelsiusEnFahrenheit(30);
console.log("30°C = " + tempF + "°F");

Exercice 8#

Définissez une fonction AfficheSalutations prenant en paramètre un nom et affichant un message de Bienvenue. Avec l'appel déjà noté ci-dessous, le programme devrait afficher :

Bienvenue Alice !

<!DOCTYPE html>
<html><body><script>
//Définissez la fonction ici



AfficheSalutations("Alice");
</script></body></html>

Solution

function AfficheSalutations(nom) {
    console.log("Bienvenue " + nom + " !");
}

AfficheSalutations("Alice");