Contenu

I. Paramètres multiples

Nous venons de voir les fonctions sans paramètres et celles avec paramètre unique. Il n'est pas rare que pour obtenir un traitement quelconque, nous ayons besoin de transmettre plusieurs informations pour obtenir un résultat efficace.

Déjà dans les fonctions préétablies de JS, nous en avons rencontrées quelques unes au niveau des manipulation de :
La méthode indexOf() nécessite deux arguments (ou paramètres) dont le premier (la sous-chaine à trouver) est indispensable et le deuxième (la position à partir de laquelle il faut rechercher) est facultatif. À défaut de 2e argument, JS fera sa recherche à partir de la position 0, soit dès le début.
De même, la méthode replace() nécessite deux arguments (ou paramètres) indispensables, à savoir l'expression régulière de la chaine à remplacer et la chaine de remplacement, par laquelle il faut remplacer : chaine.replace(regExp, chaineDeRemplacement ). En effet, s'il faut remplacer dans une chaine de caractères, il est important de savoir ce qu'il faut remplacer et par quoi le remplacer.

Les exemples donnés ci-dessus sont des méthodes ou fonctions prédéfinies de JS ou méthodes applicables à un objet de type string.

Libre à vous d'imaginer une fonction dont le résultat peut dépendre non plus d'une information à passer à cette fonction, mais de plusieurs.

Vous souhaitez envoyer un message à votre élève, mais ce serait tellement plus sympatique si vous lui donniez son prénom et votre message devrait aussi tenir compte aussi du résultat et du nombre de tentatives pour arriver à ce résultat ;
vous voulez afficher un prix TVAC (TVA comprise), ce que ne pourra faire votre fonction que si vous l'informez du montant hors TVA et aussi du taux applicable (6 ou 21 % en Belgique, 5,6 ou 19,6 % en France [en fin 2011]) ;
pour évaluer ce que vous couterait un trajet en carburant, on devrait connaitre votre consommation, essence ou diesel et le prix au litre du carburant.

On constate donc que ce besoin de "passer" plusieurs paramètres est aussi fréquent que de passer un seul paramètre.

Comme nous l'avons fait pour les fonctions à paramètre unique, nous devrons donc distinguer l'usage des paramètres dans la déclaration (définition) de la fonction et leur usage dans l'appel de la fonction.

Le but de ce chapitre sera donc de créer ses premières fonctions avec plusieurs paramètres et de les appeler.

On parlait ci-dessus
d'une part de la définition de la fonction (ensemble d'instructions effectuées à créer) et
d'autre part d'un appel de la fonction.

Revoyons donc ces deux notions dans cette page. Notre exemple sera d'afficher un message du prix TVA comprise pour deux paramètres reçus qui seront le prix catalogue hors TVA et le taux de remise accordée.

A. la définition de la fonction

Comme déjà signalé dans les chapitres précédents, avant d'être utilisée, la fonction ou miniprogramme doit être définie, elle doit avoir un nom et elle doit pouvoir exécuter les instructions qu'elle mettra en oeuvre. Ce n'est qu'alors que le programmeur pourra l'appeler par son nom, lui transmettre les informations dont elle aura besoin (le ou les paramètres éventuels) et savoir ce qu'elle fera. C'est cela la définition de la fonction.

En JS, la syntaxe de création d'une fonction à plusieurs paramètres est simple et quasi identique à la création d'une fonction avec paramètre unique SAUF que les paramètres placés entre parenthèses doivent être séparés par une virgule :

on écrit le mot réservé function
(et encore toujours attention avec un U [comme en anglais] et pas un O [comme en français]) ;
on insère une espace ;
on écrit le nom de la fonction (par exemple "a_facturer")
(à vous de faire preuve d'imagination, mêmes critères que pour les noms de variables :
1. nom doit commencer par une lettre,
2. les caractères suivants sont des chiffres, des lettres, des underscores [pas d'espaces]
3. le nom des fonctions est 'case sensitive', ou sensible à la casse
  attention : lettres non accentuées)
on ouvre et on ferme les parenthèses () sans espaces ni avant, ni entre ;
entre les parenthèses, on place les paramètres séparés par des virgules comme nom de variable, ces noms sont laissés à votre choix...
dans notre exemple, il parait logique que l'une des informations à transmettre soit un prix catalogue hors TVA, nous lui donnerons donc le nom de 'pr_catal',
rien ne nous empêchait de l'appeler 'x' ou 'prix_hors_tva_et_sans_reduction'... qui respectent aussi les règles de noms de variables [si l'on ne met pas d'accent à réduction] ;
il parait aussi logique que l'autre information à transmettre soit un taux de réduction accordée, nous lui donnerons donc le nom de 'reduct',
après la parenthèse fermante, on place une espace puis l'accolade ouvrante { ;
on incorpore une ligne vierge
(pour y noter en retrait, les instructions, chacune terminée par un point-virgule,
en n'oubliant pas d'utiliser les paramètres) ;
on place, sur une nouvelle ligne, l'accolade fermante }

Notre étape 7 est restée incomplète... il fallait y indiquer une ou plusieurs instructions que JS puisse exécuter... et surtout, faire usage des paramètres reçus...
par exemple, envoyer un message de prix à payer dans une fenêtre popup...
sans oublier que ce cours est un cours belge et que la TVA usuelle est de 21 %,
donc le prix TVAC est celui HTVA multiplié par 1.21,
de plus ici, le montant hors TVA est le p_catal - reduc/100* p_catal et
[le lecteur observera que l'on fait usage du point décimal et pas de la virgule décimale ;
nos amis français auront compris que pour une tva de 19,6 %, il suffira de multiplier par 1.196 ;o) en lieu et place de 1.21 ]
on écrira alors :
alert("Le prix catalogue hors TVA :" + P_catal + "\nLe prix HTVA réduction déduite est " + p_catal - reduc/100*p_catal + "\nLe prix à payer TVA comprise est " + 1.21 * (p_catal - reduc/100*p_catal));

On n'oubliera pas que toute programmation en JS doit se trouver entre des balises <script>,
ni que '\n' est un caractère d'échappement déjà rencontré dans notre titre "caractères spéciaux" du chapitre "expressions régulières" et qui signifie "saut de ligne".
Le lecteur attentif aura remarqué une erreur fatale qui ferait que jamais on n'aurait un résultat intéressant : le prix catalogue a été noté tantôt P_catal, tantôt p_catal. Dommage pour le lecteur distrait...

Ainsi, la définition de notre première fonction se présentera ainsi :

<script type="text/javascript">

function a_facturer(p_catal,reduc) {
     alert("Le prix catalogue hors TVA :" + p_catal + 
        "\nLe prix HTVA réduction déduite est " + (p_catal - reduc/100*p_catal) +
        "\nLe prix à payer TVA comprise est " + (1.21 * (p_catal - reduc/100*p_catal)));
     // d'autres instructions pourraient être notées ici
}

</script>

Votre première fonction à deux paramètres est définie... mais elle ne sera jamais exécutée si on ne l'appelle pas... reste donc à savoir comment appeler une fonction avec paramètre en JS.

B. l'appel de la fonction

Il existe plusieurs façons d'appeler une fonction à paramètre en JS, mais dans tous les cas, la définition (ou la déclaration) de la fonction doit avoir été faite avant que la fonction ne soit appelée. Il ne faut pas oublier que JS est interprété dans l'ordre de lecture du programme... qui peut difficilement exécuter un ordre dont il ne comprend pas le sens.

Les mêmes méthodes existent pour les fonctions sans paramètre, vue dans le chapitre précédent et les appels de fonction avec paramètre unique :

la plus simple et la plus courante est l'appel dans le programme principal ;
à peine plus difficile, l'appel dans une autre fonction ;
attention en cas d'appel dans la fonction elle-même ;
appel dans un href ;
et puisque JS est un langage événementiel, on notera l'appel au chargement de la page ;
l'appel par hyperlien ;
et l'appel suite à un autre événement.

Nous ne développerons dans cette section du chapitre que l'appel classique, par le nom et dans le code. Les autres méthodes développées dans le chapitre précédent, à savoir les différents appels de fonctions, restent valables.

dans le code principal

La méthode la plus simple d'appeler une fonction est, dans le corps principal de la page, comme on note d'autres instructions, d'appeler la fonction par son nom, sans oublier les parenthèses ouvrante et fermante, ne restant évidemment pas vides puisqu'il y a plusieurs paramètres à transmettre. Et comme il y en a plusieurs, il faut :
(1) les placer dans l'ordre de la définition,
(2) les séparer par une virgule.

Ne pas oublier de terminer l'instruction par un point-virgule, puisqu'appeler votre fonction est un ordre, une instruction que vous venez de définir.

Votre code pourrait ressembler à ceci :

function a_facturer(p_catal,reduc) {
     alert("Le prix catalogue hors TVA :" + P_catal + 
        "\nLe prix HTVA réduction déduite est " + (p_catal - reduc/100*p_catal) +
        "\nLe prix à payer TVA comprise est " + (1.21 * (p_catal - reduc/100*p_catal)));
     // d'autres instructions pourraient être notées ici
}

a_facturer(300,20);
a_facturer(800,25);
a_facturer(27.45,4);

... et sans oublier que ce code doit toujours se trouver entre des balises <script>.

Nous n'insisterons jamais assez : l'indentation de la source n'est pas obligatoire, mais plus que fortement conseillée : nous essayons toujours de fermer une accolade au niveau de la ligne qui a ouvert cette accolade. L'avenir va vous démontrer que ce conseil n'est pas un luxe.
Tout lecteur verra que l'accolade fermante termine la fonction 'a_facturer' qui a exigé l'accolade ouvrante correspondante.

De même, attention à l'emploi correct des parenthèses : chaque parenthèse fermante... ferme la dernière parenthèse ouvrante non fermée. Compliqué à lire, c'est pourquoi nous avons illustré ce propos par l'emploi de couleurs dans le code ci-dessus.

« Jamais de courant d'air en Javascript », il faut fermer toutes les portes que l'on ouvre.

Exemple

<html>
<head><title>montant à facturer</title></head>
<body>
<script type="text/javascript">

function a_facturer(p_catal,reduc) {
     alert("Le prix catalogue hors TVA :" + p_catal +
        "\nLe prix HTVA réduction déduite est " + (p_catal - reduc/100*p_catal) +
        "\nLe prix à payer TVA comprise est " + 1.21 * ((p_catal - reduc/100*p_catal)));
        // d'autres instructions pourraient être notées ici
}

a_facturer(300,20);
a_facturer(800,25);
a_facturer(27.45,4);

</script>
</body>
</html>

Un défaut cependant : quelle lourdeur d'écriture dans la fonction alert() du code ci-dessus. L'usage de variables dans une fonction peut alléger l'écriture et rendre le travail du concepteur (vous) et de l'ordinateur plus facile.
Revoyons donc la déclaration de la fonction.

function a_facturer(p_catal,reduc) reçoit deux paramètres.
Premièrement, calculons le prix HTVA réduction déduite p_reduct_ded = p_catal - reduc/100*p_catal . Cette opération purement mathématique ne demande pas de parenthèses puisque l'ordre de priorité des opérations est respecté [les multiplications et divisions s'effectuent dans l'ordre rencontré, cela avant les additions et soustractions de même niveau].
Deuxièmement, il suffit d'ajouter la TVA à ce montant pour obtenir le montant à facturer,
d'où a_payer = p_reduc_ded + 0,21 * p_reduc_ded ... reste à afficher la réponse et notre nouveau code est :

function a_facturer(p_catal,reduc) { p_reduc_ded = p_catal - reduc/100*p_catal; a_payer = p_reduc_ded + 0,21 * p_reduc_ded; alert("Le prix catalogue hors TVA :" + p_catal + "\nLe prix HTVA réduction déduite est " + p_reduc_ded + "\nLe prix à payer TVA comprise est " + a_payer); // d'autres instructions pourraient être notées ici }

Code nettement plus lisible et compréhensible, non ?

Et si la TVA n'est pas de 21, mais de 6 % ? Excellente question... à vous de proposer une variante à 3 paramètres, le troisième paramètre étant le taux de TVA... à vos crayons...
Réfléchissez-y car la question sera posée en fin de chapitre (exo8c, séquence jvs_088_exo_multiparam_fonction.html).

Vous voilà prêt pour la suite du cours... vous venez de découvrir comment créer et appeler une fonction à paramètres multiples, il ne vous reste pour l'instant qu'à découvrir les fonctions à paramètres éventuels, mais qui retournent une valeur, sans agir... puis de voir les fonctions qui s'imbriquent l'une dans l'autre.

II. Paramètres facultatifs des fonctions

voir suite >>>

VIII. Exercices relatifs aux fonctions (à plusieurs paramètres)

voir suite >>>

IX. Test relatif aux fonctions (à plusieurs paramètres)

voir suite >>>

test relatif aux fonctions à paramètre unique (7.9)

| | exercices relatifs aux fonctions avec paramètres multiples (8.8)