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, elles sont associées à un objet bien particulier, la méthode write appliquée à l'objet document, la méthode alert appliquée à l'objet window, la méthode abs appliquée à l'objet Math, etc.
  • 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.
  • Expression de fonction, il s'agit d'affecter une fonction à une variable.
  • Avec la flèche (arrow), en utilisant l'opérateur =>.
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 une fonction est une valeur (de type Object) qui peut, comme n'importe quelle autre valeur, être affectée à 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


L'argument du reste

Si le dernier argument est préfixé de 3 points, cet argument sera considéré comme un tableau regroupant les valeurs excédentaires passées à la fonction.

Récupérons toutes les valeurs passées dans l'argument du reste
Démo
<h2>Whaou! On affecte une fonction à une variable</h2>
<script>
	function brol(...reste){
	console.log(reste);
	}
brol(1,2,3);
</script>
Récupérons les valeurs excédentaires passées dans l'argument du reste
Démo
<h2>Whaou! On affecte une fonction à une variable</h2>
<script>
	function brol(v1,v2,v3,...reste){
	console.log(reste);
	}
brol(1,2,3,4,5,6,7,8,9);
</script>

L'argument du reste est un tableau.
Ce tableau est vide si le nombre de valeurs passées est insuffisant.


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.


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.


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

Les fonctions 1

Les fonctions 2