Les fonctions

Une 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 courtois !

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

JavaScript dans les liens Code JavaScript dans l'attribut href Une URL peut désigner du code JavaScript. Le principe est simple, mettez le préfixe javascript: suivi de votre code JavaScript. Exemple ave...
Lightbox simple avec jQuery Voici un code tout simple pour réaliser un effet Lightbox dans vos galeries d'images. Créez un dossier nommé Lightbox puis un sous-dossier img qui va contenir les images. Les v...
Gestion des fenêtres Il est possible de créer de nouvelles fenêtres, de contrôler leur aspect et de les refermer de manière dynamique. Le code ci-dessous, scindé en 3 pages, illustre ces possibilités....
jQuery jQuery est une bibliothèque qui permet de simplifier la programmation JavaScript afin d'interagir plus efficacement avec l'utilisateur et d'animer plus facilement des contenus. ...
Langage JavaScript Le langage JavaScript permet d'exécuter des programmes simples comme la vérification d'un formulaire, ou très élaborés comme un jeu ou une application. Ce langage est gé...