Les fonctions

Un fonction est une portion de code que l'on utilise fréquemment. Cette portion de code a un but précis. Pour éviter la répétition, on écrit et on nomme ce bloc d'instructions une seule fois, et on l'appelle au besoin. En général, la fonction se définit dans l’entête <head> et 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 urbain !

fonction-parametres-bonjour

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 :

javascript-fonction-return

Articles connexes