Informatique


Les fonctions

Aller à


Wablief?

On appelle fonction (ou méthode) un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal.

Les fonctions ont deux origines:
  • les méthodes du JavaScript ou du programmeur, elles sont associées à un objet bien particulier, la méthode write appliquée à l'objet window par exemple
  • les fonctions du programmeur, celles qui n'ont pas été associées aux propriétés des objets.
Les fonctions sont des objets
  • on peut très bien créer des propriétés sur une fonction
  • on peut affecter une fonction à une variable
  • on peut affecter une fonction à une cellule de tableau
  • passer une fonction en tant que paramètre à une autre fonction
  • une fonction peut renvoyer une fonction

Les méthodes natives

Les fonctions natives sont des méthodes, elles sont des propriétés des objets du langage, elles sont fournies avec le langage: window.prompt(), document.write(), Math.pow(), etc. sont des méthodes natives appliquées sur leur objet respectif (window, document et Math).

Pour les utiliser il faut les appeler, l'appel d'une méthodes se fait en citant simplement le nom de la méthodes et les valeurs affectées à ses arguments (ou paramètres). Les arguments représentent les données que la fonction utilisera pour effectuer le travail demandé.

Démo
	<h2>Utilisation de la fonction native pow()</h2>
	<script>
	val=parseInt(window.prompt("Valeur:"));
	puissance=parseInt(window.prompt("Puissance:"));
	res=Math.pow(val,puissance);
	document.write(res);
	/*ou: document.write(Math.pow(val,puissance));*/
	</script>

Une fonction/méthode peut être exécutée dans les parenthèses da la méthode write() mais elle ne peut pas être encadrée par des guillemets.


Les fonctions/méthodes programmeurs

Les fonctions programmeurs sont celles qui sont programmées par le programmeur.

Il existe 3 façons de créer des fonctions:
  • Définir/Déclarer une fonction, il s'agit uniquement de décrire la fonction.
    • en début d'instruction le mot-clé function
    • le nom est obligatoire, pour pouvoir être référencée!
    • l'instruction de déclaration ne renvoie rien, aucune valeur, il s'agit simplement de déclarer la fonction
    • au sein de son scope, elle est accessible partout (l'interpréteur, sans rien dire, la calle au sommet du scope où elle a été déclarée)
  • Expression de fonction, il s'agit d'affecter une fonction à une variable.
    • mot-clé function au sein d'une instruction (pas en début d'instruction!)
    • le nom est facultatif (utile si fonction récursive!)
    • l'expression a pour valeur l'objet fonction
    • n'est accessible qu'au moment où l'expression au sein de laquelle elle se trouve est exécuté
  • Avec la flèche (arrow), en utilisant l'opérateur =>, il s'agit le plus souventd'expression de fonction
Dans les 3 cas, pour pouvoir les utiliser, il faut les appeler!

Appeler une fonction c'est:

  • soit citer le nom de la fonction suivi de parenthèses, ce qui déclenche l'exécution effective de la fonction c'est la paire de parenthèses!!
  • soit la rendre auto-exécutable en l'encadrant de parenthèses, le tout suivi d'une paire de parenthèses, ce qui déclenche l'exécution effective de la fonction c'est la paire de parenthèses!!
  • soit la passer en argument à une fonction et l'exécuter en tant que callback


Définir/Déclarer une fonction sans argument

Avant d'être appelée, une fonction doit être déclarée. Ceci se fait au moyen du mot clé function suivi du nom de la fonction et de parenthèses pouvant contenir des arguments, le code caractérisant la fonction est pris entre accolades.

Une petite fonction toute simple, juste pour l'exemple:

  • déclaration de la fonction "politesse"
  • appel de la fonction politesse
  • le code de la fonction est exécuté
  • "Bonjour" apparaît à l'écran
Démo
	<h2>Elle est belle ma petite fonction sans argument...</h2>
	<script>
	function politesse()  {  
		document.write("<h4>Bonjour</h4>");  
	}  
	politesse();
	</script>

Définir/Déclarer une fonction avec des arguments

Les arguments sont des variables ou des constantes dont la fonction aura besoin pour exécuter le code.

Avec des arguments sans valeur par défaut

Réalisons une petite fonction permettant de faire des puissances:

  • déclaration de la fonction "puissance" avec ses deux arguments: la valeur et l'exposant
  • appel de la fonction "puissance", on passe en arguments la valeur et l'exposant
  • au moment de l'appel, les variables (ou constantes) passées en arguments sont affectées dans l'ordre des arguments de la déclaration de la fonction
  • le code de la fonction est exécuté
  • La réponse est affichée à l'écran
Démo
	<h2>Whaou!</h2>
	<script>
	var val=parseInt(window.prompt("Valeur"));
	var exp=parseInt(window.prompt("Exposant"));
	function puissance(val,exp){
	var res=1;
	 if(exp!=0){
		for(var i=1;i<=Math.abs(exp);i++){
		res=res*val;
		}
	
	 }
	 if(exp<0){
		document.write("1/"+res);
		}
	 else if(exp>0){
		document.write(res);
		}
	 else{
		document.write(res);
		}

	}
	puissance(val,exp);
	</script>

Avec des arguments ayant une valeur par défaut

On peut prévoir une valeur par défaut pour un ou plusieurs arguments.

Démo
	<h2>Avec valeurs par défaut</h2>
	<script>
		function multipli(a,b=1){
			return a*b;
		}
		document.write(multipli(3));
	</script>

Retourner une valeur

L'instruction return est facultative mais peu s'avérer indispensable, par ailleurs on peut trouver plusieurs return dans une même fonction.

L'instruction return a pour effet de stopper l'exécution de la fonction et de retourner la valeur ou l'expression qui la suit.

Une fonction renvoie toujours une valeur, en l'absence de return, elle renvoie undefined.

On appelle la fonction dans un document.write():
Démo
	<h2>Whaou!</h2>
	<script>
	var val=parseInt(window.prompt("Valeur"));
	var exp=parseInt(window.prompt("Exposant"));
	function puissance(val,exp){
	var res=1;
	 if(exp!=0){
		for(var i=1;i<=Math.abs(exp);i++){
		res=res*val;
		}
	
	 }
	 if(exp<0){
		return "1/"+res;
		}
	 else if(exp>0){
		return res;
		}
	 else{
		return res;
		}

	}
	document.write(puissance(val,exp));
	</script>
On affecte le résultat de l'appel de la fonction dans une variable:
Démo
	<h2>Whaou!</h2>
	<script>
	var=resultat;
	var val=parseInt(window.prompt("Valeur"));
	var exp=parseInt(window.prompt("Exposant"));
	function puissance(val,exp){
	var res=1;
	 if(exp!=0){
		for(var i=1;i<=Math.abs(exp);i++){
		res=res*val;
		}
	
	 }
	 if(exp<0){
		return "1/"+res);
		}
	 else if(exp>0){
		return res;
		}
	 else{
		return res;
		}

	}
	resultat=puissance(val,exp);
	document.write("Résultat: ",resultat );  
	</script>

Expression de fonction

En JavaScript on peut affecter une fonction anonyme à une variable, on appellera cette fonction avec le nom de la variable suivi de parenthèses avec ou sans argument(s).

Démo
<h2>Une fonction pour dire coucou</h2>
<script>
	var poli=function(){
		return "Coucou";
		};
	document.write(poli());
</script>
  • Citer le nom de la variable poli correspond à l'appel
  • l'interpréteur se réfère à l'adresse de poli où il trouve la définition d'une fonction
  • la fonction s'exécute
Démo
<h2>Whaou! Cette fonction calcule le carré d'une valeur</h2>
<script>
	var square=function(x){
		return x * x;
		};
	document.write(square(2));
</script>
  • Citer le nom de la variable square correspond à l'appel
  • l'interpréteur se réfère à l'adresse de square où il trouve la définition d'une fonction
  • la fonction s'exécute

En JavaScript une fonction peut retourner une fonction.

Cette façon de programmer est utilisée pour générer des closures (fermeture in french), cela permet de maintenir le scope d'une fonction parente.

Démo
<h2>Whaou! On affecte une fonction à une variable</h2>
<script>
	var myfct=function(){
		return function(val){document.write(val)};
	}
	var nfonc=myfct();
	nfonc("Coucou!");
</script>

On s'accroche:

  • on stocke une fonction anonyme dans la variable myfct
  • donc, myfct() déclenche l'exécution de la fonction stockée dans myfct
  • on stocke le résultat de l'exécution de myfct() dans nfonc
  • donc, dans nfonc, on stocke uniquement la fonction anonyme retournée, function(val){document.write(val);}
  • on peut exécuter cette fonction en plaçant des () derrière nfonc et en passant un argument
  • on fait nfonc("Coucou"), la fonction s'exécute, "Coucou!" s'affiche à l'écran


Arrow fonction

A la place d'utiliser le mot function on utilise l'opérateur =>.
Il s'agit le plus souvent de faire exactement la même chose sous une présentation légèrement différente.

Le mot return n'est plus obligatoire pour renvoyer une valeur!

Il existe cependant une différence profonde avec les 2 façons précédentes, la fonction arrow maintient le scope d'une fonction parente.

Une fonction classique en callback du forEach, le scope parent n'est pas maintenu.

Soit le code suivant: il ne fonctionne pas car le this de la fonction anonyme fille représente cette même fonction, et ne représente pas l'objet "classe" de la fonction anonyme parente.

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
"use strict";
var classe={
	nom:"6TTI",
	eleves:["Brendan","Rasmus","John"],
	afficProfile:function(){
		this.eleves.forEach(function() {
			document.write(this.nom);
			});
	}
}
classe.afficProfile();
</script>
Code identique au précédent, le callback est une arrow, le scope parent est maintenu

Soit le code suivant: ici, le scope de la fonction parente a été préservé, on fait une closure naturelle, grâce à la fonction arrow.

Démo
<h2>Whaou! Une fonction arrow!</h2>
<script>
"use strict";
var classe={
	nom:"6TTI",
	eleves:["Brendan","Rasmus","John"],
	afficProfile:function(){
		this.eleves.forEach((v)=> {
			document.write(this.nom);
			});
	}
}
classe.afficProfile();
</script>
Une fonction arrow qui renvoie coucou
Démo
<h2>Whaou! Une fonction arrow qui renvoie coucou!</h2>
<script>
const poli = () => {return document.write("Bonjour ");};
poli();
</script>
Une fonction arrow qui dit bonjour à l'utilisateur
Démo
<h2>Whaou! Une fonction arrow qui dit bonjour à l'utilisateur!</h2>
<script>
	const poli = (nom) => {return document.write("Bonjour "+nom);};
	poli("Jean-François");
</script>
Une fonction arrow raccourcie...
Démo
<h2>Whaou! Une fonction arrow raccourcie...</h2>
<script>
	const poli = nom => document.write("Bonjour "+ nom);
	poli("Jean-François");
</script>
  • Lorsqu'il n'y a qu'un argument on peut omettre les parenthèses
  • Lorsqu'il n'y a qu'une instruction on peut omettre les accolades du corps de la fonction

Fonction auto exécutable (IIFE)

En JavaScript une fonction peut s'auto exécuter, il suffit de placer une paire de parenthèses après sa déclaration.
On les appelle les fonctions IIFE (Immediately Invoked Function Expression).

Démo
<h2>Whaou! Une fonction qui s'auto exécute!</h2>
<script>
	var myfct=(function(){
		return function(val){document.write(val)};
	})();
	myfct("Coucou!");
	myfct("Oups!");
</script>

Ici la déclaration de la fonction est automatiquement exécutée, on retrouve donc function(val){document.write(val);} dans myfct que l'on peut appeler autant de fois que l'on veut avec un argument.

  • il y a une parenthèse avant function, sans elle la fonction ne pourrait pas être en mesure d'être exécutée car elle serait alors considérée uniquement comme déclaration de fonction.
  • cette parenthèse se referme soit derrière l'} qui clôt la déclaration, soit derrière le couple de parenthèses qui suit.
  • le couple de parenthèses derrière la déclaration permet de déclencher l'exécution proprement dite.


L'objet arguments

L'objet arguments est généré par le langage au moment de l'appel d'une fonction et regroupe l'ensemble des arguments qui ont été passés au moment de l'appel.
L'objet arguments est évidemment lié à la fonction pour laquelle il a été construit et est détruit après exécution de la fonction.

Démo
	<h2>Le tableau arguments</h2>
	<script>
		var nom,prenom,service,anc;
		nom="Quiroulle";
		prenom="Pierre";
		service="Comptabilité";
		anc=5;
		function editer(nom,prenom,service,anc){
		document.write("Nom de l'agent: "+nom+"<br>");
		document.write("Prenom de l'agent: "+prenom+"<br>");
		document.write("Service de l'agent: "+service+"<br>");
		document.write("Ancienneté de l'agent: "+anc+" ans <br>");
		document.write("Nombre d'arguments passés à la fonction: "+arguments.length+"<br>");
		//document.write("L'objet arguments est appelé pour la fonction: "+arguments.callee+"<br>");
		}
	editer(nom,prenom,service,anc);
</script>

L'objet arguments a accès à certaines méthodes et proprétés des tableaux (qui sont eux-même des objets!), voici 2 propriétés intéressantes:

  • length renvoie le nombre de cellules du tableau et donc le nombre de arguments passés lors de l'appel
  • callee renvoie la déclaration complète de la fonction appelée

On peut appeler une fonction avec plus d'arguments que prévus dans la déclaration de cette fonction.
Il suffit, au sein de la déclaration, de récupérer les arguments par une boucle for sur l'objet arguments.


Charger un fichier .js

Afin de ne pas surcharger le script, on peut écrire toutes les fonctions utilisateurs dans des fichiers .js, ceux-ci seront ensuite charger dans les fichiers .htm ou .php selon les besoins.

Syntaxe
	<script src="chemin/fichier.js"></script>
	

//mesfct.js
function poli(nom){
	document.write("Bonjour "+nom);
}
Démo
	<head>	
		<script src="mesfct.js"></script>
	</head>
	<body>
	<h2>Une fonction pour dire coucou</h2>
	<script>
		poli("Jean-François");
	</script>
	</body>

Quiz

Clique-moi pour générer un questionnaire !