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 fonctions (ou méthodes) du JavaScript, elles sont associées à un objet bien particulier, la méthode write appliquée à l'objet window par exemple
  • les fonctions (ou méthodes) de l'utilisateur


Utiliser les fonctions

Les fonctions natives

Les fonctions natives sont celles qui sont fournies avec le langage: prompt(), write(), Math.pow(), etc. sont des fonctions natives.

Pour les utiliser il faut les appeler, l'appel d'une fonction se fait en citant simplement le nom de la fonction et les valeurs affectées à ses arguments (ou arguments).
Les arguments (ou 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 peut être exécuter dans les parenthèse da la méthode write() mais elle ne peut pas être encadrée par des guillemets.

Les fonctions programmeurs

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

Il existe 3 façons de créer des fonctions:

  • Déclarer une fonction, il s'agit uniquement de décrire la fonction.
  • Définir une 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 le appeler!
L'appel consiste à exécuter le corps de la fonction.
Pour ce faire il suffit de citer le nom de la fonction et de donner des valeurs à ses arguments.


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é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.

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>

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>

Définir une 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.
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 myfct
  • donc, myfct() déclenche l'exécution de la fonction stockée dans myfct
    Ce qui déclenche l'exécution d'une fonction c'est la paire de parenthèses!!
  • 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 n'existe pas de différence profonde avec les 2 façons précédentes, il s'agit simplement de faire exactement la même chose sous une présentation légèrement différente.

Démo
<h2>Whaou! Une fonction arrow qui dit bonjour!</h2>
<script>
const poli = () => {return document.write("Bonjour ");};
poli();
</script>
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>
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 fonction est automatiquement exécutée après sa définition, 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.


Le tableau arguments

Le tableau 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.
Le tableau 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("Le tableau arguments est appelé pour la fonction: "+arguments.callee+"<br>");
		}
	editer(nom,prenom,service,anc);
</script>

Le tableau arguments a accès à toutes les méthodes et proprétés des tableaux, 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 de argument 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 le tableau arguments.
Même si cette possiblité existe elle semble incohérente, le nombre de arguments présent dans les parenthèses de la fonction doit être égale au nombre de arguments passés lors de l'appel.