JavaScript : les fonctions

Lorsqu'une séquence d'instructions doit être exécutée plusieurs fois il faut utiliser une fonction.
Tous les langages proposent des fonctions natives c'est à dire déjà définies, prêtes à l'emploi.
Dans tous les langages le développeur peut créer ses propres fonctions.

Les fonctions natives de JavaScript

Nous avons déjà utilisé dans nos scripts des fonctions JavaScript natives suivantes : alert(), prompt(), parseInt(), parseFloat(), etc.
Ces fonctions sont dites natives car elles sont déjà définies dans le langage. Aussi les appelle t-on également fonctions prédéfinies.

Vous savez que pour utiliser une fonction (on dit appeler une fonction) il faut lui passer un argument car il s'agit de fonctions avec un paramètre.
Exemple : pour appeler la fonction native alert() il faut passer en argument une expression (mais une seule) plus ou moins complexe.
On peut ainsi écrire l'instruction : alert(12*12 + 1000). La fonction retournera le résultat de ce calcul : 1144 (multiplication effectuée avant l'addition).
Il faut aussi respecter la casse dans le libellé de la fonction sinon il y aura "plantage". Ainsi si vous écrivez isnan('bonjour') la console affichera le message : "isnan is not defined" ; la bonne syntaxe est isNaN().

La fonction confirm()

Parmi les fonctions natives il y a la fonction confirm Cette fonction permet de saisir une valeur logique c'est à dire TRUE ou FALSE.

Le code de la partie BODY : ... <button onclick ="f()" >testez la fonction</button> <h3> <script> function f() { var vmajeur = confirm("si vous avez plus de 18 ans cliquez sur OK sinon cliquez sur 'Annuler' ") ; if (vmajeur==true) document.write("Vous êtes majeur") ; // si vmajeur contient true if (vmajeur==false) document.write("Vous êtes mineur"); // si vmajeur contient false } </script> </h3> ...

Le rendu du script :

Actualisez la page pour une nouvelle exécution du script.

Comme avec la fonction prompt une boîte de dialogue s'affiche mais avec deux boutons OK et Annuler et en légende l'argument de la fonction.
Donc si vous cliquez sur OK vous saisissez TRUE et si vous cliquez sur le bouton Annuler vous saisissez FALSE.

Comme la variable vmajeur contient une booléen (ou valeur logique) on peut simplifier la syntaxe et écrire :
vmajeur au lieu de vmajeur == true
!vmajeur (un point d'exclamation qui veut NOT) au lieu de vmajeur == false

La fonction IsNaN() et son inverse

isNaN veut dire "isNotaNumber". Attention à la casse pour cette fonction native : les deux N sont en majuscule.
Cette fonction native retourne true si la valeur testée n'est pas au format numérique.
L'inverse de cette fonction est !isNaN (lire "NotIsNotaNumber") qui retourne true si la valeur testée est au format numérique.
Je veux dire par format numérique une suite de chiffres séparés par un point éventuel (séparateur décimal).

La fonction isNumber() n'existe pas !

Code de l'exemple (extrait) : ... <button onclick ="f()" >Testez la fonction</button> ... function f() { var nombre =prompt('saisir un nombre') ; if (!isNaN(nombre)) document.write( "format numérique"); if (isNaN(nombre)) document.write ("format non numérique. Il faut saisir . comme séparateur décimal"); } </script> </h3> ...

Le rendu du script :

Saisir d'abord 12OO (erreur de frappe) puis 12,5 puis 12.5
Actualisez la page pour une nouvelle exécution du script.

Fonctions génériques et méthodes

La plupart des fonctions natives de JS sont spécifiques à un type d'objet ; on parle plus précisèment de méthodes.

on ne peut appliquer la méthode pop() qu'à un "array" (liste indicée)
on ne peut appliquer la méthode search() qu'à un "string" (chaine de caractères)
on ne peut appliquer la méthode getFullYear() qu'à un objet "date"

Cependant certaines méthodes peuvent être communes à plusieurs classes d'objets.
Exemple : la méthode indexOf() peut s'appliquer à une chaine (string) mais aussi à un tableau indicé (array).

Liste des fonctions et méthodes

Les fonctions génériques sont peu nombreuses. Par contre il est quasi impossible de citer la multitude de méthodes. De plus chaque version de JS s'enrichit de nouvelles méthodes.
Liste des fonctions génériques et méthodes de JS

fonctions natives génériques
méthodes applicables aux chaines
méthodes applicables aux tableaux indicés (array)
méthodes applicables aux dates et heures (objets date)
méthodes mathématiques
méthodes pour manipuler le DOM

Intérêt des méthodes

Les méthodes facilitent grandement le travail du développeur web. Avant de vous lancer dans l'écriture d'une fonction personnelle, vérifiez s'il n'existe pas déjà une méthode prédéfinie qui fera l'affaire.
Chaque nouvelle version de JS s'enrichit de nouvelles méthodes. Ainsi la liste citée en lien ne mentionne pas les méthodes filter(), map(), forEach(), etc. applicables à un tableau.

Créez ses propres fonctions

Le nombre de fonctions natives et génériques est limité et ne couvre pas tous les besoins. Donc un script contient souvent une partie dans laquelle on définit ses propres fonctions puis une partie dans laquelle on fait appel à ces fonctions.

Si vous souhaitez utiliser vos fonctions personnelles dans différents programmes, vous pouvez bien sûr créer un fichier de fonctions : un fichier d'extension .js. C'est d'ailleurs le principe de certaines librairies JS célèbres ...

fonction avec OU sans paramètres
fonction retournant OU pas une valeur
fonction anonyme OU nommée

Fonctions personnelles - niveau 1

Il s'agit d'une fonction personnelle basique car il n'y a pas de paramètre à passer (un argument lors de son appel) et cette fonction ne retourne pas de valeur.
Objet de cette fonction basique : calculer la surface d'un cercle de 2 unités.

Le script

function f_cercle() 
{ 	// fonction qui calcule la surface d'un cercle de rayon 2 cm 
	var vrayon = 2 ; 
	var vsurface = vrayon * vrayon * 3.14 ;
	alert("surface du cercle : " + vsurface + "cm2") ; 
}
f_cercle() ; //appel fonction
f_cercle(); // appel fonction 
alert("type de f_cercle : " + typeof f_cercle); 
alert(vrayon); // erreur : vrayon is not defined

Le script comprend deux parties :

la description de la fonction "f_cercle"
le programme principal dans lequel on appelle entre autres la fonction

Pour définir une fonction il faut utiliser le mot réservé function suivi du nom que vous donnez à cette fonction.
Ici il s'agit d'une fonction basique qui se nomme fsurface_cercle.
Les instructions de la fonction sont délimitées par une paire d'accolades.
Cette fonction calcule la surface d'un cercle de rayon 2cm. Il n'y a donc pas d'argument à passer.

Le rendu

Testez ce script dans un nouvel onglet !

Dans le programme principal on appelle deux fois la fonction.
Puis on demande le type de "f_cercle" ; la réponse est "function". Une fonction est en fait une variable de type function.
Puis on demande d'afficher la variable vrayon ; la console affiche le message d'erreur : "vrayon is not defined". En effet vrayon est une variable créée dans le cadre de la fonction donc elle est inconnue du programme principal.

Toute variable déclarée dans le cadre d'une fonction n'est utilisable qu'au sein de cette fonction. On dit que la variable est locale.
Donc dans l'exemple f_cercle est une variable globale et vrayon est une variable locale.

Je rappelle que pour afficher la console du navigateur, il faut faire un clic droit dans l'onglet et sélectionner "inspecter".

Fonctions personnelles - niveau 2

La fonction de l'exemple précédent était d'un usage des plus limité : calcul de la surface d'un cercle de rayon 2 unités (cm ou mètre ou ...)
Nous allons maintenant définir et utiliser une fonction capable de calculer la surface d'un cercle indépendamment de son rayon et unité de mesure.
C'est possible mais alors il faut alors créer une fonction personnelle avec paramètres c'est à dire passage d'arguments lors de son appel.

Le script

function fsurface_cercle(vrayon,vunite) 
{ 
	var vsurface = vrayon * vrayon * 3.14 ;
	alert("surface du cercle : " + vsurface + vunite + 's carrés') ; 
} // fin fonction


fsurface_cercle(2,"cm") ; //appel fonction avec des valeurs fixes comme arguments
var rayon = prompt('rayon du cercle'); 
var unite = prompt('unite de mesure (cm  ou dcm ou mètre') ; 
fsurface_cercle(rayon, unite); // appel fonction avec des variables comme arguments
alert (vsurface) ; // erreur : vsurface is not defined

Test du code

Testez ce script dans un nouvel onglet !

Cette fonction nommée fsurface_cercle calcule la surface d'un cercle quelque soit son rayon et l'unité de mesure (cm ou dm ou décimètre ou mètre, etc.).
Il s'agit donc d'une fonction avec deux paramètres. Donc pour appeler cette fonction il faut indiquer en parenthèses deux arguments.

Rappel : lorsqu'on définit la fonction on emploie le terme "paramètre" et lorsqu'on appelle cette fonction on parle d'"argument".

Dans le programme principal on appelle deux fois la fonction. Les arguments dans le premier appel sont des constantes et dans le deuxième appel les arguments passés sont des variables saisies dans le programme principal.

Pourquoi la dernière instruction est fausse ??? Parce que la variable vsurface est définie au niveau de la fonction ; il s'agit donc d'une variable locale : disponible que dans la fonction.
Pour visualiser le message d'erreur, affichez la console du navigateur !

Fonction personnelle - niveau 3

Vous savez que les fonctions natives non seulement sont paramétrables mais de plus retournent une valeur.
Nous allons tenter de créer une fonction personelles ayant les mêmes qualités.
Pour qu'une fonction retourne une valeur (vers le programme principal) il faut que dans sa définition celle-ci comporte l'instruction return suivie de la valeur à retourner.

Exemple de fonction perso. retournant une valeur

Le script : var fpuissance2 = function(nombre) { return nombre * nombre ; } // fin fonction var vnombre = prompt('saisir un entier inférieur à 10 '); alert(fpuissance2(vnombre)); alert(fpuissance2(12)); alert(typeof(fpuissance2));

La fonction se nomme "fpuissance2" et exige le passage d'un argument lors de son appel.

Testez ce script dans un nouvel onglet !

La fonction nommée fpuissance2 calcule le carré d'un nombre et retourne ce carré au programme principal mais ne l'affiche pas.
Dans le programme principal je dois appeler deux fois la fonction fpuissance2 dans une instruction basée sur la boite de dialogue alert().

Au lieu d'écrire function fpuissance2(nombre) j'ai écrit var fpuissance2 = function(nombre).
Ce qui montre qu'une fonction est en fait une forme particulière de variable.
La dernière instruction retourne "function" ! Ce que je viens d'écrire est un rappel ...

Appel de fonction avec en argument le mot "this"

L'argument passé lors de l'appel d'une fonction peut être le mot réservé this qui désigne l'objet courant.
Thème : script donnant des infos sur les images de la page.
Extrait de code : ... <p class ="remarque">Cliquez une image pour obtenir des infos sur celle-ci ! <br><img src ="../img_bio/palourde_royale.jpg" class ="gauche" alt ='Palourde royale' onclick ='fafficher(this) '> <br><img src ="../img_bio/nautile.jpg" alt ='Nautile' class ="gauche" onclick ='fafficher(this)'> <script> function fafficher(image) { var chemin = image.src; ; var texte = image.alt ; alert("chemin image : " + chemin ); alert ("texte alternatif de l'image :" + texte) ; } // fin fonction </script> ...

Le rendu de l'exemple dans un Iframe :

Si je clique sur la première image j'ai des infos sur celle-ci : valeurs des attributs src & alt.
Si je clique sur la deuxième image j'ai les mêmes infos pour la deuxième image.

Notez bien la syntaxe : ... onclick ='fafficher(this)' ...

this est un mot réservé de JavaScript très pratique. Il désigne l'élément HTML courant (la cible de la manipulation).

Attention pour qu'une fonction s'applique à l'élément HTML courant il faut employer le mot magique "this" comme argument lors de l'appel de la fonction mais jamais comme paramètre dans la définition de la fonction.
Le nom du paramètre pour la description est toujours libre. Ici j'emploie le terme image puisque la fonction s'applique toujours à un élément IMG.

Les fonctions anonymes

la description de la fonction
l'appel de la fonction (avec passage éventuel d'arguments s'il s'agit d'une fonction paramétrée)

Sachez qu'il existe des fonctions anonymes.
Dans une même bloc on décrit et on appelle la fonction.Une fonction anonyme ne peut être utilisée qu'une fois.
La syntaxe d'une fonction anonyme sur un évènement est la suivante: élément.évènement = function() { instruction1; instruction2; ... ; instructionN; }

L'évènement peut être "onclick", par exemple.

Thèmatique : nous voulons que le visiteur de la page puisse modifier la couleur du texte.

Solution ancienne : avec une fonction nommée

	...
<h1>Titre général de la page</h1>
<p>Blabla ...	<br>Blabla ...	<br>Blabla ... </p>
<button onclick = "fcouleur('green')">Couleur de texte : vert </button>
<button onclick = "fcouleur('red')">Couleur de texte : rouge </button>
<button onclick = "fcouleur('blue')">Couleur de texte : bleu </button>
<script>
var titre = document.querySelector('h1') ; 
var texte = document.querySelector('p') ; 
function fcouleur(vcouleur) 
{ 
	titre.style.color = vcouleur; 
	texte.style.color = vcouleur;
}
</script>

Le rendu du script dans un Iframe :

Pour chaque bouton on intègre un attribut événementiel. Par exemple : onclick = "fcouleur('green')

Ce qui veut dire que si vous cliquez sur ce bouton vous appelez la fonction fcouleur() avec passage d'une valeur : green.
Dans le script on déclare deux variables : titre et texte.

Pour cibler dans un script un élément HTML de la page j'utilise les nouvelles méthodes de l'objet document : querySelector() & querySelectorAll(). Ces deux méthodes acceptent comme argument un sélecteur CSS.

Notre code est tout à fait correct mais présente un inconvénient majeur : le code JS est mélangé avec le code HTML.

Solution moderne : avec des fonctions anonymes

Non seulement je vais utiliser des fonctons anonymes mais de plus je vais centralisé le JS dans le script.
En effet la détection des évènements va se faire aussi via JS (et non plus via le HTML). En d'autres termes je vais abandonner le gestionnaire d'évènements HTML pour le gestionnaire d'évènements JS.

Le code HTML

...
<h1>Titre général de la page</h1>
<p>Blabla ...	<br>Blabla ...	<br>Blabla ... </p>
<button id = 'vert'>Couleur de texte : vert </button>
<button id = 'rouge'>Couleur de texte : rouge </button>
<button id = 'bleu'>Couleur de texte : bleu </button>
...

Plus aucune trace de JS dans le code HTML. Par contre j'ai affecté à chaque élément button un ID ; ID qui sera utilisé dans le script ...

Le script

var titre = document.querySelector('h1') ; 
var texte = document.querySelector('p') ; 
document.querySelector('#vert').onclick = function() 
		{ titre.style.color = 'green'; texte.style.color = 'green'; }
document.querySelector('#rouge').onclick = function() 
		{ titre.style.color = 'red'; texte.style.color = 'red'; }
document.querySelector('#bleu').onclick = function() 
		{ titre.style.color = 'blue'; texte.style.color = 'blue'; }

J'utilise désormais le gestionnaire d'évènements de JS (et non plus le gestionnaire d'évènements HTML). Ainsi tout le code JS est centralisé dans le script
Pour en savoir plus sur la gestion des évènements en JS : Les évènements

Étudions plus en détail la première fonction anonyme !
Quand se déclenche cette fonction ? Sur clic du bouton affecté de l'ID vert !

la couleur de texte de la balise H1 (titre) devient verte
la couleur de texte de la balise P (texte) devient verte

Le rendu dans un Iframe

Solution définitive

A juste titre vous pouvez trouver que le script précédent est un peu lourd. Il serait plus logique que chaque fonction anonyme appelle à son tour une fonction nommée mais avec passage d'un argument différent à chaque fois.

Supposons que dans la page il y a désormais trois éléments de type P. Donc le script doit modifier désormais le DOM pour 4 éléments (et non plus 2) !

Le script

function changer_couleur(couleur)
{
	document.querySelector('h1').style.color = couleur ; 
	document.querySelector('p').style.color = couleur; 
	document.querySelectorAll('p')[1].style.color = couleur ; 
	document.querySelectorAll('p')[2].style.color  = couleur ; 
	
} // fin fonction

// appel de la fonction changer_couleur via des fonctions anonymes 
document.querySelector('#vert').onclick = function() {changer_couleur('green'); }
document.querySelector('#rouge').onclick = function() {changer_couleur('red');}
document.querySelector('#bleu').onclick = function() {changer_couleur('blue'); }

Chaque fonction anonyme consiste à appeler la fonction nommée "changer_couleur()" avec passage en argument de la couleur retenue.
Il faut bien sûr exprimer la couleur en anglais et entre cotes car il s'agit d'un littéral et non pas d'une variable.

Fonctions particulières

fonction qui retourne plusieurs valeurs
fonction qui accepte un nombre variable d'arguments
fonction fléchée : syntaxe simplifiée pour définir la fonction

Fonctions qui retournent plusieurs valeurs

Si vous connaissez Python, vous savez qu'il est facile de créer dans ce langage une fonction qui retourne un tuple de valeurs. Sous JavaScript c'est aussi possible mais moyennant une astuce ...

Le script contenant une fonction retournant une liste de valeurs

var fcercle = function(rayon)
{
    var aire = Math.round(rayon * rayon * 3.14); 
	var circonference = Math.round(rayon * 2 * 3.14) ; 
	var tab =[aire, circonference]; 
	return tab; // retourne un tableau de 2 éléments
}
var rayon =parseInt(prompt("saisir le rayon du cercle !")); 
tableau =fcercle(rayon);  //appel de la fonction fcercle
document.write("aire : " + tableau[0]); //afficher premier élément du tableau
document.write("<br>");
document.write("circonférence : " + tableau[1]); // afficher deuxième élement du tableau

La fonction fcercle() retourne deux valeurs sous forme d'un tableau indicé nommé "tab".
Donc lors de l'appel de fonction la variable d'affectation "tableau" est un tableau avec deux éléments. Le premier élément contient l'aire et le deuxième la circonférence.
Math.round(expression) : méthode de l'objet Math pour arrondir à l'entier le plus proche.

Testez ce script dans un nouvel onglet

Remarque : les tableaux en javaScript sont traités dans le chapitre suivant.

Fonction avec un nombre variable de paramètres

Nous voulons créer une fonction qui cumule un nombre variable d'entiers : 2 ou 3 ou 4 ou 5 ou n ...

Le script

function fsomme(...tab)
{
   var cumul = 0; 
   for (var i in tab)
   {
	cumul+=tab[i]
	}
	return cumul; 
}
var cumul1 = fsomme(10,10,30); 
var cumul2 = fsomme(1,2,3,4); 
var cumul3 = fsomme(1000, 2000); 
console.log(cumul1); 
console.log(cumul2);
console.log(cumul3);

Dans cette fonction "tab" est un tableau indicé.
Dans la parenthèse le nom du tableau doit être précédé de trois points.
Emploi de la syntaxe simplifiée "for ... in" pour parcourir le tableau.

Notez les différents appels de la fonction avec 3 puis 4 et enfin 2 arguments.

Rendu du script !

Rien n'apparait dans la page web et c'est logique puisque j'ai programmé des affichages dans la console.
Rappel : pour ouvrir la console : clic droit sur la page puis sélectionnez "inspecter" puis onglet "console".
Vous voyez apparaitre : 50 puis 10 puis 3000.

Fonctions fléchées

Avec la dernière version de ECMAScript, il est possible de définir des fonctions avec une syntaxe très simple.
Thématique : fonction qui fait la sommme de deux nombres et multiplie le tout par un troisième nombre.

Le script

let x =10, y = 12, z = 13; w = 14;  
// ci-dessous fonction nommmée standard
let fstandard = function(n1,n2,n3) 
{
   return (n1 + n2) *  n3;
};
// fonction anonyme fléchée 
let fflechee = (n1,n2,n3) => (n1 + n2) * n3;

alert("appel fonction standard : " + fstandard(x,y,z)); 
alert("appel fonction fléchée :" + fflechee(y,z,w));

Les fonctions fstandard & fflechee font exactement la même chose.
La première a une syntaxe standard alors que la seconde a un syntaxe simplifiée.
Dans cette syntaxe simplifiée le mot "function" disparait ; le mot "return" est remplacé par une flèche d'où l'expression "fonction fléchée".
La définition de la fonction fléchée tient en une seule instruction !
Quant à l'appel d'une fonction fléchée, il n'y a aucune différence par rapport à une fonction standard.

Rendu du script !

Traduction

Tutoriel sur JS natif & Vue.js & jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

JavaScript : les fonctions

Les fonctions natives de JavaScript

La fonction confirm()

La fonction IsNaN() et son inverse

Fonctions génériques et méthodes

Liste des fonctions et méthodes

Intérêt des méthodes

Créez ses propres fonctions

Fonctions personnelles - niveau 1

Le script

Le rendu

Fonctions personnelles - niveau 2

Le script

Test du code

Fonction personnelle - niveau 3

Exemple de fonction perso. retournant une valeur

Appel de fonction avec en argument le mot "this"

Les fonctions anonymes

Solution ancienne : avec une fonction nommée

Solution moderne : avec des fonctions anonymes

Le code HTML

Le script

Le rendu dans un Iframe

Solution définitive

Le script

Fonctions particulières

Fonctions qui retournent plusieurs valeurs

Le script contenant une fonction retournant une liste de valeurs

Fonction avec un nombre variable de paramètres

Le script

Fonctions fléchées

Le script