Les fonctions

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 à écrire et 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-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

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...
Les méthodes setTimeout() et setInterval() Voici deux fonctions très utiles qui permettent d'exécuter des fonctions dans un délai précisé en millisecondes. setTimeout("MaFonction()", 3000); Exécutera MaFonction() dan...
jQuery UI jQuery UI est un complément de jQuery, qui permet notamment d’améliorer l’interface utilisateur. Beaucoup de confort ajouté ...
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...
La méthode getElementById La méthode JavaScript getElementById() permet de récupérer les informations d'une balise identifiée par son id. Syntaxe informations à récupérer = document.getElementBy...