JavaScript - Partie 3

Alain Barraud

Mémento informatique

Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives

Page ouverte le 13/05/2009

JavaScript - Partie 2

Retour accueil JS

Sommaire partie 3

1. Créer une fonction
2. Les arguments
3. Portée d'une variable
4. Valeur renvoyée
5. L'indentation

Créer une fonction

A propos des fonctions

Quelques rappels

Une fonction est une suite d'instructions ayant un rôle précis (pour ne pas dire une fonction précise…).

On lui donne (éventuellement) des arguments (également appelés paramètres) entre les parenthèses qui suivent le nom de cette fonction.
Certaines fonctions nous renvoient une valeur, que l'on peut par exemple enregistrer dans une variable.

Exemple :

Code : JavaScript

1 var message = prompt('Entrez un texte');

On appelle la fonction prompt()
On lui fournit un seul argument, qui est 'Entrez un texte' (c'est le message d'invite qui sera affiché dans la boîte de dialogue).
Cette fonction nous renvoie le texte saisi par l'utilisateur, qu'on enregistre ici dans la variable message.

Nos fonctions à nous

Les fonctions que nous allons créer fonctionnent selon le même principe.

Comme exercice d'application, on va créer une fonction qui aura pour but de convertir des Euros en Francs.

Si cela peut se faire sans avoir besoin de faire une fonction, en créant une fonction, on pourra lancer le script &agrage; chaque fois qu'on en aura envie. Il suffira d'appeler cette fonction.

Déclarer et appeler une fonction

Quelques mots de vocabulaire :

on dit que l'on déclare une fonction lorsqu'on la "crée" : on dit à l'ordinateur qu'elle existe et ce qu'elle doit faire (on écrit le code de cette fonction).
On pourra ensuite appeler notre fonction, ce qui veut dire qu'on va lui demander d'exécuter son code.

Déclarer notre fonction

Déclaration

On commence par déclarer notre fonction : on va dire à l'ordinateur "je veux créer une fonction qui s'appelle machin et qui fait ceci".
A savoir :

lors de la déclaration d'une fonction, celle-ci n'est pas exécutée, mais mise en mémoire, pour être exécutée plus tard.
Le code sera alors placé dans l'en-tête de la page, entre les balises <head> et </head>.
Une fonction se déclare un peu à la manière d'une variable, à l'aide d'un mot-clé (qui était var pour les variables). Ici, il s'agit de function (c'est de l'anglais).
Pour le nom, c'est comme pour les variables, à savoir les 26 lettres de l'alphabet, en majuscules et en minuscules (une majuscule étant en JS différente d'une minuscule), le underscore et les chiffres (sauf pour le premier caractère).
Le nom doit être suivi de parenthèses (même si elles ne contiennent rien), qui vont contenir les éventuels arguments.

Ces parenthèses sont indispensables, même si elles sont vides.

Déclaration de notre fonction qu'on va nommer conversion :

Code : JavaScript

1 function conversion()

Contenu de la fonction

On fait suivre cette déclaration du contenu de la fonction (les instructions de celle-ci).
S'il y a plusieurs instructions (ce qui est généralement le cas), on délimite le contenu de notre fonction grâce à des accolades { et } : on forme alors ce qu'on appelle un bloc d'instructions.

Il va donc falloir écrire le code entre accolades, à la suite de la ligne. Dans notre exercice, on veut :

demander une valeur en euros à l'utilisateur
la convertir en francs (pour rappel, 1 Euro = 6,55957 Frs)
afficher le résultat (pourquoi pas sur deux lignes, une en euros, l'autre en francs).
On ne s'occupe pas d'arrondir le résultat, ni de vérifier si l'utilisateur écrit bien un nombre (si c'est un boulet, tant pis pour lui).

Code : JavaScript

1 function conversion()
2 {
3 var somme = prompt("Entrez la valeur en Euros :");
4 var resultat = somme * 6.55957;
5 alert(somme + " E/n" + resultat + " Frs");
6 }

Appeler notre fonction

La fonction créée, on va pouvoir l'utiliser. Pour cela, on écrit (dans le corps de la page) :

Code : JavaScript

1 conversion()

Et notre fonction est exécutée !
Elle va, comme on le veut, demander une valeur (en euros) à l'utilisateur, et lui afficher le résultat de la conversion en francs.

On peut maintenant l'appeler quand on veut dans notre page.
On va insérer une image qui exécutera cette fonction lorsqu'on cliquera dessus.

Pour pouvoir appeler notre fonction lorsque l'utilisateur cliquera sur l'image, on utilise le gestionnaire d'événement onClick :

Code : HTML

<img src="e_frs.jpg" alt="" onclick="conversion();" />

Terminer pour le script.

Test 5 : voir ici
Test dans code page :

convertisseur Euros en Francs

Cliquer sur cette image pour lancer le convertisseur

Haut de page

Les arguments

Retour sur notre fonction de conversion à laquelle on va faire subir quelques modifications pour pouvoir avec une fonction unique, convertir tout type d'unités :
en cliquant sur un bouton, convertir des mètres en centimètres et en cliquant sur l'image, convertir les euros en francs.

Cela est possible grâce aux arguments :
- le code à exécuter est presque le même, il n'y a que le taux de conversion et le nom des unités qui changent.
- il suffit, au moment de l'appel de la fonction, de dire : "le taux de change est de 6.55957, et les unités sont les Euros et les Francs".

Explication du principe, prenons l'exemple d'une balise (x)HTML :

Code : HTML

<img src="e_frs.jpg" alt="" />

Créer une fonction qui possède des arguments

On reprend notre fonction de conversion, en y apportant quelques modifications : commençons par enlever les unités (on les ajoutera plus tard), et ajouter un argument : le taux de change.
De cette façon, à partir de cette nouvelle fonction, on pourra convertir ce que l'on veut. Il suffira de :
- si on veut convertir des euros en francs, d'écrire conversion(6.55957)
- si on veut convertir des mètres en centimètres, d'écrire conversion(100)

D'abord, lors de la déclaration de la fonction, il faut préciser entre les parenthèses le nom de l'argument qu'on va appeler taux.
Lorsqu'on appellera la fonction conversion(6.55957), cela aura pour effet de créer une variable taux avant d'exécuter la fonction, et cette variable aura pour valeur 6.55957. Elle sera détruite une fois la fonction exécutée.

Voici le code modifié et commenté :

Code : JavaScript

1 function conversion(taux)// declaration de la fonction avec un argument
2 {
3 var valeur = prompt("Entrez la valeur à convertir");
4 var resultat = valeur * taux;// on calcule le resultat, en utilisant l'argument
5 alert('Valeur : ' +valeur + '\nRésultat : ' +resultat);
6 }

Ne pas oublier donc, de préciser ce taux quand on appellera la fonction :

Code : HTML

Pour convertir les mètres en centimètres, pas besoin d'une autre fonction :

Code : HTML

<a href="#" onclick="conversion(100)"/>Conversion mètres > centimètres</a>

Fonction à plusieurs arguments

Il serait mieux de voir s'afficher le nom des unités…. il suffit de créer deux arguments supplémentaires !
Il suffit de les séparer par des virgules. Bien que l'ordre de création ne soit imposé, mieux vaut le faire de façon "logique".
Ensuite, lorsque l'on appelle la fonction, il faudra donner les paramètres dans le même ordre (si le taux de conversion est en premier, on l'indiquera logiquement en premier.

On choisit cet ordre : unité 1, taux et unité 2.

Avec les modifications, on obtient :

Code : JavaScript

1 function conversion(unite1, taux, unite2)
2 {
3 var valeur = prompt("Entrez la valeur à convertir, en " + unite1);
4 var resultat = valeur * taux;
5 alert(valeur + ' ' + unite1 + '\n' + resultat + ' ' + unite2);
6 }

On l'appelle ensuite de cette manière :

Code : HTML

1 
2 <img src="e_frs.jpg" alt="" onclick="conversion('Euros', 6.55957, 'Frs')" /> 
3 <a href="#" onclick="conversion('m',100, 'cm')">Conversion mètres > centimètres</a> 
4

Test 6 : voir ici
Test dans code page :

Convertisseur Euros/Frs

Cliquer sur l'image pour
lancer le convertisseur

Cliquer sur ce lien pour convertir m/cm
Conversion mètres et Centimètres

Annotation : dans le code html, j'ai mis un ";" à la fin du script de l'événement "onclick"c comme indiqué sur le code html ci-dessus (mais vu avec ";" sur le code html juste au-dessus du test 5). ? Apparemment, cela fonctionne aussi bien sans ce ";". Valider la bonne syntaxe.

Arguments facultatifs

Il est possible de créer des arguments facultatifs : on peut choisir de ne pas les préciser lors de l'appel de notre fonction.
Par exemple, il serait possible de créer une fonction qui additionne tous les nombres passés en arguments :

Code : JavaScript

1 addition(12, 5);// nous donnerait 17
2 addition(21, 4, 15, 11, 6);// nous donnerait 57

Ce n'est qu'un exemple. Si on reprend la fonction prompt(), elle possède un second paramètre facultatif : la valeur initiale du champ de saisie.

Code : JavaScript

1 var nombre = prompt('Entrez un nombre', 'Votre nombre ici');
2 alert('Vous avez tapé ' + nombre);

Si on ne donne pas de second paramètre, le champ est initialement vide. Mais si on en indique un, alors il aura cette valeur.
Cela sera approfondi plus loin.

Test dans code page : donner un nombre.
donc vous avez tapé

Haut de page

Portée d'une variable

Fonctionnement des arguments

Les arguments ne sont en fait rien d'autre que des variables, mais propres à la fonction : elles sont créées lors de son appel, et elles sont détruites à la fin de celle-ci.

Prenons une fonction :

Code : JavaScript

1 function essai(argument1, argument2)
2 {
3 // code de la fonction
4 }

Et un appel de cette fonction :

Code : JavaScript

1 essai(57, 'un message');

Ce qui se passe quand on appelle cette fonction :

D'abord, les variables argument1 et argument2 seront créées et prendront comme valeurs respectives le nombre 57 et la chaîne de caractères 'un message'.
Ensuite, le code de la fonction sera exécuté (ces variables peuvent être modifiées, comme des variables classiques).
Lorsque la fonction sera terminée, les variables argument1 et argument2 seront détruites.

Portée des variables

Après avoir créé cette fonction, l'avoir appelée, et une fois cette dernière terminée, si on essaie d'afficher la valeur de la variable argument1 : ça ne marche pas.
Cest normal, elle a été détruite.

Si on renouvelle l'opération, mais en créant une variable à l'intérieur de la fonction, comme ceci :

Code : JavaScript

1 function essai()
2 {
3 var variable = 'Bonjour';
4 }

On appelle ensuite cette fonction, puis afficher la valeur de cette variable comme ceci :

Code : JavaScript

1 essai();
2 alert(variable);

Ça ne marche pas non plus.

Variable locale

A la fin d'une fonction, toutes les variables déclarées à l'intérieur de celle-ci sont détruites.
On utilise le terme de variables locales.

Noter qu'on parle bien de déclaration, ce qui signifie l'utilisation de var.
Voici pourquoi, dans le dernier exemple, ça ne "marchait pas".

Pourquoi on ne peut pas accéder quand on veut et où on veut à toutes les variables ?!
C'est ingérable : certaines variables seraient peut-être utilisées plusieurs fois (si on donne le même nom à deux variables différentes, par exemple). De plus, il est moyennement apprécié (pour ne pas dire qu'il ne faut jamais le faire) de déclarer plusieurs fois la même variable.

Au moins, avec les variables locales, c'est bien rangé : chaque fonction a ses variables à elle seule, on peut donc les modifier sans craindre de modifier une variable d'une autre fonction.
Et il suffit d'utiliser les arguments pour passer des valeurs d'une fonction à l'autre.

Variables globales

Il est quand même possible de créer des variables dites globales, c'est-à-dire accessibles depuis n'importe quelle fonction.

Ces variables sont à utiliser le moins possible !

Deux solutions pour créer une telle variable :

la première consiste à déclarer la variable en dehors de toute fonction.
Code : JavaScript

1 // on cree deux variables globales
2 var variable1;
3 var variable2 = 0;
4
5 function essai()
6 {
7 variable1 = 1;
8 variable2 = 8;
9 // modification des variables globales
10 }
11 // ces deux variables seront encore accessibles une fois la fonction terminee
La seconde est de ne pas déclarer la variable avec var : on l'utilise comme si elle avait déjà été déclarée (on parle de déclaration implicite). L'exemple serait le même que celui du dessus, mais sans les 3 premières lignes. Les variables sont créées directement dans la fonction.
Personnellement, je préfère utiliser la première solution.

Cependant, mieux vaut privilégier au maximum l'emploi de variables locales.

Haut de page

Valeur renvoyée

Approche

Partons de cet exemple :

Code : JavaScript

1 var ma_variable = prompt('Entrez une valeur');

On utilise le signe = : mais comment une fonction peut-elle avoir une valeur ?

Prenons l'exemple des fonctions mathématiques :
soit f(x)=5x - 3, on a f(x)=5x - 3… c'est bien ce signe = qui nous intéresse !

Essayons de créer une fonction f qui fait la même chose que notre fonction mathématique.

Création d'une fonction classique

On peut déjà écrire la première ligne de code :

Code : JavaScript

1 function f(x)

On déclare une fonction nommée f ayant un seul attribut, nommé x.

Que va contenir cette fonction ?
On va également créer une variable pour le résultat du calcul qu'on va appeler : resultat

Code : JavaScript

1 var resultat = 5*x - 3;

Renvoi de la valeur

On a notre fonction et notre résultat, il nous reste plus qu'à dire : "je veux que ma fonction prenne cette valeur".
Pour employer le terme exact: "on veut que notre fonction renvoie (ou retourne) cette valeur".
Par exemple, avec prompt, la valeur retournée est le texte tapé par l'utilisateur.
Dans notre cas, c'est le contenu de la variable resultat.

Pour ce faire, on fait précéder la valeur à renvoyer du mot-clé return.

Code : JavaScript

1 return resultat;

Lorsqu'une fonction retourne une valeur, son exécution se termine : s'il reste du code à exécuter dans cette fonction, il sera ignoré.
Pour stopper l'exécution d'une fonction, on peut donc utiliser simplement ceci, qui ne renvoie rien, mais termine l'exécution :

Code : JavaScript

1 return;

On assemble maintenant tous nos morceaux, voici la fonction f telle qu'on pourrait la coder en JS :

Code : JavaScript

1 function f(x)
2 {
3 var resultat = 5*x - 3;
4 return resultat;
5 }

On teste de cette manière (ou en enregistrant le résultat dans une variable) :

Code : JavaScript

1 alert( f(7) );

On voit le résultat s'afficher : 32.

Test dans code page : f(7)

Quelques exemples

triple(x) qui renvoie le triple de l'argument
carre(x) qui renvoie le carré de l'argument (x²)
cube(x) qui renvoie le cube de l'argument.

Ce qui donne :

Code : JavaScript

1 function triple(x)
2 {
3 return 3*x;
4 }
5
6 function carre(x)
7 {
8 return x*x;
9 }
10
11 function cube(x)
12 {
13 return x*x*x;
14 }

Un exemple de calcul dans lequel on voit l'utilité de ceci :

Code : JavaScript

1 var resultat = 44*cube(5) - 7*3 / carre(6);

Pour s'entraîner

Réaliser : une mini-calculatrice, demandant deux nombres et affichant les résultats des 4 opérations "de base" (addition, ...), en créant une fonction pour chaque opération.

Haut de page

L'indentation

Indenter son code

On a vu que dans le code de la fonction, certaines lignes sont en retrait par rapport aux autres : cela s'appelle l'indentation.
Cela consiste à décaler certaines parties du code (mais pas n'importe lesquelles), de manière à le rendre plus lisible.
Le code se rassemble en "groupes" (la plupart du temps, ils correspondent aux blocs d'instructions).
L'indentation consiste à décaler tout le code de ce "groupe" d'une tabulation.

Exemple

Exemple pour miux visualiser :

Code : Autre

1 instruction1;
2
3 {
4
5 instruction2;
6
7 instruction3;
8
9 {
10
11 instruction4;
12
13 }
14
15 }
16
17 instruction5;

On distingue beaucoup plus facilement à quel bloc appartient chaque instruction.

Espaces ou tabulation ?

Pour créer ce retrait, on utilise la touche TAB.
Les espaces sont aussi utilisés, …
Voir page wikipedia

Haut de page