Les fonctions utilisateurs
Il est possible de mémoriser un ensemble d’instructions, parfois complexes, en Javascript, grâce au fonction utilisateur. Une fonction est comme un sous-programme dans le programme principal. Elles sont très utilisées en programmation orientée objet.
La fonction constitue donc un ensemble d’instructions que vous écrivez une seule fois mais qui peut être utilisée plusieurs fois. Il suffira de la rappeler par son nom, ce qui vous dispense de recopier à chaque fois toutes les instructions dans le code.
Une fonction peut même récupérer des paramètres (des éléments nécessaires à son fonctionnement) et retourner des valeurs.
Déclarer une fonction
Pour déclarer une fonction, utilisez l’opérateur function
function affichage(){
document.write(2);
}
Le bloc d’instructions se trouve entre les accolades { }
Exécuter une fonction
Il suffit de l’appeler par son nom
function affichage(){
document.write("bonjour");
}
affichage(); // exécute la fonction
Affichage
bonjour
Les paramètres
Il est possible de transmettre à la fonction des paramètres, qui sont récupérées entres les parenthèses ().
function addition(nb1,nb2){
document.write(nb1+nb2);
}
addition(3,9);
Affichage
12
Note : ces paramètres peuvent être de simples variables mais aussi des tableaux ou des objets.
Appeler une fonction sans argument
Il est parfois utile d’appeler des fonctions avec un nombre d’arguments indéterminé à l’avance. Dans ce cas, vous n’avez pas besoin de transmettre les arguments à la fonction, ils seront récupérés par l’objet arguments.
L’objet argument permet de récupérer les arguments passés à la fonction.
Note : l’objet n’est pas un tableau, vous ne pouvez pas l’utiliser avec les propriétés ou les méthodes de l’objet tableau (comme pop()..) sauf avec la propriété length qui renvoie le nombre d’arguments.
arguments.length;
Vous pouvez récupérer chaque argument à partir de l’indice de l’objet arguments.
arguments[0]; // premier argument
arguments[1]; // deuxième argument
...
Vous pouvez modifier la valeur d’un argument
arguments[0]= "nouvelle valeur";
Voici un exemple concrêt
Résultat
Note :vous devez appeler l’objet arguments dans le corps de la fonction.
Transformer l’objet arguments en tableau
Il est possible de convertir l’objet arguments en vrai objet de type Array.
La méthode slice() est appelée pour convertir des objets similaires à des tableaux, comme l’objet arguments, en un nouveau tableau.
Un des avantages de cette technique est d’éviter l’utilisation des boucles pour parcourir les arguments de la fonction. L’exemple ci-dessous illustre cet avantage :
Résultat
Dans cet exemple, les arguments sont stockés dans le tableau tabArgs et ensuite séparés par la méthode join() de l’objet Array.
Valeur de retour
Une fonction peut retourner une valeur grâce au mot clé return. A ce moment l’exécution de la fonction sera stoppé, et toutes les autres instructions de cette fonction qui suivront seront ignorées.
Note : l’opérateur return retourne la valeur d’une variable (ce qu’elle contient) et non pas la variable elle-même.
function controlePseudo(pseudo){
if(pseudo != ""){
return "pseudo correct";
}else{
return "pseudo incorrect";
}
}
controlePseudo('Daniel');
Affichage
pseudo correct
Le principal avantage du return est qu’il vous permet de retourner des valeurs dans votre page à tout moment par votre script.
function addition2($nb1,$nb2){
return $nb1+$nb2;
}
// autres scripts
document.write("voici le résultat de l'addition 25 + 98 : ".addition2(25,98));
Affichage
voici le résultat de l'addition 25 + 98 : 123
Note : l’opérateur return retourne la valeur d’une variable (ce qu’elle contient) et non pas la variable elle-même.
Retourner plusieurs valeurs
Si une fonction doit retourner plusieurs valeurs, le plus simple est d’utiliser un tableau.
function loto(){
return new Array(42,13,14,16,34,2);
}
let recup = loto();
document.write(recup[0]);
Affichage
42
La récursivité
Parfois, une fonction a besoin de s’appeler elle-même. C’est souvent le cas pour les calculs mathématiques, comme le calcul du factoriel d’un nombre. Le principe est le suivant : je multiplie un nombre par le même nombre soustrait de 1 et je répète l’opération jusqu’à ce que le dernier nombre vaut 1 – exemple: 6*5*4*3*2*1.
On peut imaginer une fonction qui effectue n*(n-1) et cette fonction sera rappelée plusieurs fois par elle-même jusqu’à ce que la dernière valeur vaut 1
function factoriel(n){
if(n==1){
return 1;
}
return n*factoriel(n-1);
}
document.write(factoriel(3)); // retourne 3*2*1
Affichage
6
Visibilité des variables
Les variables n’ont pas toutes la même visibilité dans un script. Une variable déclarée à l’extérieur d’une fonction est globale . Elle est donc accessible aussi dans la fonction.
|
1
2
3
4
5
|
let nb = 2;function affiche(){ document.write(nb); // affichera 2}affiche(); |
Affichage
2
Portée locale
Une variable déclarée dans la fonction ne pourra pas être utilisée à l’extérieur.
function affiche(){
let nb=2;
document.write(nb); // affichera 2
}
affiche();
document.write(nb); // affichera une erreur
Affichage
2
*** le deuxième document.write(nb) n'affichera rien car nb n'est pas défini ****
La closure
La closure consiste à créer un fonction à l’intérieur d’une fonction pour pouvoir retourner la fonction interne.
function externe(a,b){
function interne(){
let total = a + b ;
document.write("Le résultat de " + a + " + " + b + " est : " + total);
}
return interne;
}
let recup = externe(10,30);
recup();
Affichage
Le résultat de 10 + 30 est : 40
Description
La fonction externe retourne la fonction interne avec l’opérateur return. Mais la fonction interne étant à l’intérieur peut réutiliser tous les variables qu’on a fait passer en paramètre à la fonction externe, à savoir la valeur 10 et 30.
La variable recup contient donc la fonction interne. Et en écrivant recup() on lance la fonction interne contenu dans recup.
Pour obtenir le même résultat, sans la closure, il faut refaire passer en argument les valeurs 10 et 20 pour le traitement d’affichage.
function calcul(a,b){
let total = a + b ;
return total;
}
function affichage(total,a,b){
document.write("Le résultat de " + a + " + " + b + " est : " + total);
}
let recup = calcul(10,30);
affichage(recup,10,30);
Affichage
Le résultat de 10 + 30 est : 40
Vous remarquerez que le script est moins optimale que le précédent.
Fonction anonyme
Le principe consiste à appeler une fonction sans qu’elle porte de nom. Elle sera donc appeler qu’une seule fois.
(function(){
document.write('toto');
})()
Affichage
toto
Description
Vous remarquez que la fonction n’a pas de nom d’où le terme de fonction anonyme. La fonction sans nom est mise sous paranthèses ( ) pour la garder en référence. Les dernières parenthèses permettent de lancer la fonction pour une seule fois.
En fait, on obtiendrait le même résultat en écrivant ceci :
document.write('toto');
Affichage
toto
A quoi çà sert?
La fonction anonyme exploite l’avantage même d’une fonction, à savoir que les variables déclarées à l’intérieur restent locales : elles ne seront pas utilisées à l’extérieur et donc ne rentreront pas en conflit avec les autres variables du script.
Cette pratique est quasi obligatoire pour la création de plugins – ce sont des programmes qui réalisent des taches précises (carrousel images, menu accordéon..) et qu’on va inclure dans nos pages. Les variables du plugin (dont on ignore les noms) ne seront pas en conflit avec les variables de vos scripts.
/* mon script */
let nb=2;
/* le plugin */
(function(){
let nb=4;
})()
/* affichage de nb */
document.write(nb);
Affichage
2
Vous remarquez dans cet exemple que la variable nb a conservé sa valeur 2.
Fonction Callback
Un callback est une fonction de rappel qui est passée en paramètre d’une autre fonction. Elle est fréquemment appelée lorsque la fonction qui la contient a terminé son traitement.
On les retrouve surtout pour la programmation asynchrone, quand le temps d’un traitement n’est pas connu et qu’on souhaite enchaîner, à la fin de ce traitement, une nouvelle action (par exemple lorsque qu’une animation est terminée et qu’on en commence une autre tout de suite après).
L’exemple ci-dessous utilise le callback pour afficher les images sur la page après les avoir préchargées.
function loadImages(sources, callback){
obj1.innerHTML = "patientez....";
let images = {};
let nbImages = Object.keys(sources).length;
let numImages = 0;
for(let src in sources) {
numImages++;
images[src] = new Image();
images[src].src = sources[src];
images[src].onload = function() {
if(numImages == nbImages) { // si dernière image
callback(images); // callback appelé
}
};
}
}
sources={
soleil : "//st.gdefon.com/wallpapers_original/432819_noch_luna
_obloka_derevya_pejzazh_6554x4528_www.Gde-Fon.com.jpg",
lune : "//images.toucharger.com/img/graphiques/fonds-d-ecran/
nature--paysages/ciel/lever-de-lune.73644.jpg"
}
let obj1=document.getElementById('obj1');
let obj2=document.getElementById('obj2');
loadImages(sources, function(images) { // fonction de callback injectée
obj1.innerHTML = '<img src="'+images.soleil.src+'">';
obj2.innerHTML = '<img src="'+images.lune.src+'">';
});
Affichage
La fonction de callback est fournie en paramètre de la fonction loadImages. Celle-ci sera exécuter à la fin du chargement de la dernière image.
L’injection de dépendances
Les fonctions de callback permettent aussi de faire de l’injection de dépendances, comme dans l’exemple ci-dessus. Ceci signifie injecter depuis l’extérieur une partie des taches à faire. Pour revenir à notre préchargement d’images, le traitement d’affichage des images est géré depuis l’extérieur et injecté dans la fonction qui gère le préchargement.
Cette technique présente l’avantage de personnaliser le traitement d’affichage sans rien modifier du traitement des données. Vous remarquez que la fonction callback utilise un argument (images, dans l’exemple) qui va récupérer les données fournies depuis l’intérieur de la fonction. Le principe consiste à gérer des taches depuis l’extérieur en utilisant des données en provenance de l’intérieur de la fonction.
