Les fonctions en JavaScript

Les fonctions natives de JS

Nous avons déjà utilisé dans nos scripts des fonctions JS natives suivantes : alert(), prompt(), parseInt(), parseFloat(), etc.

Ces fonctions sont dites natives car elles sont déjà définies dans le langage.

Vous savez que pour utiliser une fonction (on dit appeler une fonction) il faut lui passer un argument.
Ainsi, par exemple, il pour appeler la fonction native alert() il faut passer en argument une expression plus ou moins complexe.
On peut ainsi écrire l'instruction : alert(12*12 + 1000). La fonction retournera le résultat de ce calcul : 1144
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 javaScript affichera le message : "isnan is not defined" ; la bonne syntaxe est :isNaN(vnote).

La fonction confirm()

Parmi les fonctions natives il existe aussi la fonction confirm Cette fonction permet de saisir une valeur logique c'est à dire true ou false.

Exemple de script avec confirm() :

var vmajeur = confirm("si vous avez plus de 18 ans cliquez sur OK sinon cliquez sur Annuler ou X ") ; if (vmajeur==true) alert("vous êtes majeur") ; // si vmajeur contient true if (vmajeur==false) alert("vous êtes mineur"); // si vmajeur contient false
Testez ce 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.

La fonction IsNaN()

Cette fonction native retourne VRAI si la valeur testée n'est pas au format numérique.
L'inverse de cette fonction est !isNaN qui retourne VRAI 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).

Exemple de script avec isNaN() :

var nombre =prompt('saisir une suite de chiffres') ; alert(typeof(nombre)); alert(!isNaN(nombre));

Saisissez 144,5 (une virgule) le script répond string et false.
Puis saisissez 144.5 (un point) le script répond string et true. Testez ce script deux fois !

La saisie avec la fonction prompt() retourne toujours une donnée de type string et même s'il s'agit d'une suite de chiffres !
L'inverse de la fonction isNaN() retourne VRAI uniquement si le format de la chaine est numérique (suite de chiffres séparés par un point éventuel).
Dès qu'on effectue une saisie avec la fonction native prompt() il est conseillé d'effectuer un test de saisie avec la fonction isNaN() ou son inverse.

Créez ses propres fonctions

Le nombre de fonctions natives 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.

Remarque : Si on doit appeler les mêmes fonctions personnelles dans différentes pages il est préférable d'externaliser leurs définitions c'est à dire de les créer dans un fichier de script (extension : .js).

Fonctions personnelles : niveau 1

Le script

function fsurface_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") ; } // fin fonction fsurface_cercle() ; //appel fonction fsurface_cercle(); // appel fonction alert(vrayon); // erreur : vrayon is not defined
Testez ce script !

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.
Cette fonction calcule la surface d'un cercle de rayon 2cm. Il n'y a donc pas d'argument à passer.
Dans le programme principal on appelle deux fois la fonction puis on demande l'affichage de vrayon.
Cette instruction ne s'exécute pas. La console javaScript affiche le message : "vrayon is not defined"
En effet vrayon est une variable créée dans le cadre de la fonction fsurface_cercle 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 vrayon est une variable locale et ne peut être manipulée dans le programme principal.

Fonctions personnelles : niveau 2

La fonction personnelle de l'exemple précédent était d'un usage des plus limité : calcul de la surface d'un cercle de rayon 2 cm ...
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 passage de paramètres.

Le script de la page

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 paramètres 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 paramètres alert (vsurface) ; // erreur : vsurface is not defined
Testez ce script !

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 passage de deux paramètres.
Pour appeler cette fonction il faut donc indiquer en parenthèses deux arguments.

Résumons : lorsqu'on définit la fonction on parle de paramètres et lorsqu'on appelle cette fonction on parle d'arguments.

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 ; variables renseignées grâce à des instructions de saisie.

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 qui est inconnue du programme principal !

Fonction personnelle retournant une valeur

Les fonctions natives non seulement sont paramétrées mais retournent une valeur.
Ainsi la fonction ParseInt() prend en argument une chaine et retourne un entier (ou NaN si la chaine n'est pas au format numérique).
la fonction prompt prend en argument une expression et affecte la valeur saisie dans une variable simple.

Pour qu'une fonction personnelle 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. Attention une fonction ne peut retourner qu'une seule valeur !

Exemple de fonction personnelle retournant une valeur

Le script :

		var fpuissance2 = function(nombre) 
		{
			return nombre * nombre ; 
		} // fin fonction
		var vnombre = prompt('tapez un nombre entier '); 
		alert(vnombre + ' à la puissance 2 donne : ' + fpuissance2(vnombre)) ; 
		alert("4 à la puissance 2 donne : " + fpuissance2(4)) ; 

Testez ce script !

La fonction nommée fpuissance2 calcule le carré d'un nombre et retourne ce carré au programme principal mais ne l'affiche pas.
Lorsqu'on appelle la fonction celle-ci retourne le carré du nombre passé en argument.
Pour nommer cette fonction j'ai utilisé une autre syntaxe pour bien vous montrer qu'en fait une fonction est une variable évalué via une expression.
Dans le programme principal on appelle deux fois la fonction fpuissance2. La première fois on passe en argument une variable (vnombre) puis pour le deuxième appel on passe en argument le chiffre 4.

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 (ou actif).

Exemple avec le mot réservé this

... <body> <h1>fonction avec pour argument d'appel "this"</h1> <p class ="remarque">Cliquez une image pour obtenir des infos sur celle-ci ! <img src ="../images/palourde_royale.jpg" height ="200" alt ='Palourde royale' onclick ='fafficher(this)'> <img src ="../images/nautile.jpg" alt ='Nautile' height ="200" 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> ...
Testez ce code !

Si je clique sur la première image j'ai des infos sur celle-ci : valeurs des attributs src et 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 de la fonction mais jamais comme paramètre dans la description de la fonction.
Le choix du paramètre est toujours libre. Ici j'emploie le terme image

Les fonctions anonymes

Désormais avec les fonctions dites anonymes il est possible dans une même instruction d'avoir l'appel et la description d'une fonction.

Exercice : nous voulons que le visiteur puisse modifier la couleur des textes définies par la feuille de style.

Programmation traditionnelle

Le code correspondant

... <h1>Modification d'une propriété CSS pour des éléments 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> // variables globales var titre = document.querySelector('h1') ; var texte = document.querySelector('p') ; function fcouleur(vcouleur) { titre.style.color = vcouleur; texte.style.color = vcouleur; } </script> ...
Testez !

Commentaire

Pour chaque bouton on intègre un événement. 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.
Ces variables sont déclarées en dehors de toute fonction donc elles sont globales par ailleurs ce sont des variables objet c'est à dire qui référencent chacune un élément HTML de la page.
Ainsi titre référence la première (et unique) balise de type H1 et texte référence la première balise de type P.

Pour référencer 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.
Pour en savoir plus sur le ciblage d'éléments HTML en javaScript visitez le chapitre "Dynamiser la page avec JavaScript" dans ce tuto.

Inconvénient de ce codage

Notre code est tout à fait correct mais présente un inconvénient majeur : dans la partie HTML on mélange du HTML et du JS !
En effet pour chaque balise BUTTON on a l'attribut "onclick" avec pour valeur l'appel d'une fonction JS avec passage d'un argument.
Il faut éviter ce mélange dans une même ligne de code de HTML et de JS ! L'utilisation d'un éditeur de texte de type WYSIWYG (qui génère du code HTML à partir d'une interface) devient impossible car le logiciel ne peut générer ce genre d'attribut ...
Le développeur doit alors "taper" le code et doit être compétent non seulement en HTML & CSS mais aussi en JS ...

Programmation plus moderne

On dissocie bien le HTML du JavaScript ; on n'utilise plus le gestionnaire d'événements HTML (les attributs "onclick, onchange, etc." ne sont plus utilisés).

Le code HTML

<h1>Modification d'une propriété CSS pour des éléments 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>

Pour chaque balise BUTTON l'attribut "onclick" disparait par contre l'attribut ID apparait !

Le script

Dans le script nous allons aussi innover : utiliser des fonctions anonymes !

		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'; }

Testez cette nouvelle version !

Dans le script on retrouve la déclaration des variables objets comme dans celui de la page précédente puis trois instructions reposant sur la même syntaxe : élément.événement = function {instruction1; instruction2; ... instructionN ; }
Donc dans la même instruction on appelle une fonction et on la décrit.
Cette fonction n'a alors pas de nom ; elle est anonyme !

Pour référencer en JS un élément HTML j'utilise une nouvelle méthode de l'objet document : querySelector(). Ici chaque méthode est argumenté avec un sélecteur d'identifiant.

É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 !

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

Solution définitive

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

Le script

	function changer_couleur(couleur)
	{
		var titre = document.querySelector('h1') ; 
		var texte1 = document.querySelector('p') ; 
		var texte2 = document.querySelectorAll('p')[1] ;
		var texte3 = document.querySelectorAll('p')[2] ;
		titre.style.color = couleur; 
		texte1.style.color = couleur; 
		texte2.style.color = couleur; 
		texte3.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'); }

Commentaire

Chaque fonction anonyme appelle la fonction nommée "changer_couleur" avec passage en argument de la couleur retenue.
Le script est plus court et pourtant plus puissant : modifier le DOM pour 4 éléments (et non plus 2) !!!
Testez la version définitive !

Ce chapitre est terminé !
Retour menu