image_pdf

Les fonctions

image_pdf

Un fonction est une portion de code 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 à écrire et nommer un bloc d'instructions, puis de l'appeler 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 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