Premiers pas en JavaScript
8.1 Fonction à plusieurs paramètres
cuy copyleft
  See You Why?  

 


test relatif aux fonctions à paramètre unique (7.9) | | exercices relatifs aux fonctions avec paramètres multiples (8.8)

Contenu


JavaScript 1 - Introduction
JavaScript 2 - Commentaires et instructions
JavaScript 3 - Variables
JavaScript 4 - Types de variables
JavaScript 5 - Variables et chaines
JavaScript 6 - Les fonctions
JavaScript 7 - Les fonctions à paramètre unique
JavaScript 8 - Les fonctions à paramètres multiples
8.1 JS : Fonction à paramètres multiples
8.8 JS : exercices relatifs aux fonctions à plusieurs paramètres
8.9 JS : un test sur les fonctions à plusieurs paramètres
JavaScript 9 - L'instruction RETURN dans une fonction
JavaScript 10 - Appel d'une fonction dans une autre fonction
JavaScript 11 - Les variables locales ou globales
JavaScript 12 - Quelques opérateurs mathématiques
JavaScript 13 - ???
JavaScript 14 - L'instruction IF, pour les conditions
JavaScript 15 - L'instruction IF... ELSE..., pour les conditions à deux sorties
JavaScript 16 - Les IF imbriqués et fonction aléatoire
JavaScript 17 - Les conditions complexes
JavaScript 18 - L'instruction SWITCH, en cas de choix multiples
JavaScript 19 - La boucle FOR
JavaScript 20 - La boucle WHILE
JavaScript 21 - Les événements dans la programmation
JavaScript 22 - Quelques événements : onMouseOver onLoad etc.
JavaScript 23 - Les objets
JavaScript 24 - Créer ses propres objets
JavaScript 25 - Appliquer des méthodes à ses objets
JavaScript 26 - Les tableaux
JavaScript 27 - Différentes façons de créer des tableaux
JavaScript 28 - Propriétés et méthodes applicables aux tableaux
JavaScript 29 - Les méthodes applicables aux tableaux
JavaScript 30 - Méthodes de tris pour tableaux SORT, REVERSE et PUSH
JavaScript 31 - Ajouter des éléments à un tableau en utilisant une boucle
JavaScript 32 - Tecnique pour imprimer les éléments d'un tableau
JavaScript 33 - Lecture de bases de données
JavaScript 34 - Les objets mathématiques
JavaScript 35 - Les objets relatifs aux dates
JavaScript 36 - Les formulaires JS sont des objets
JavaScript 37 - Accès aux éléments d'un formulaire
JavaScript 38 - Validation des entrées d un formulaire
JavaScript 39 - Graphisme et JavaScript

JavaScript 50 - Calculateur d'emprunt
JavaScript 51 - Calendrier perpétuel et options diverses
JavaScript 99 - Documentation


 
 

 
Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
 

 
 

 
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.

  MERCI
 

 

 

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 :

      1. 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]) ;
      2. on insère une espace ;
      3. 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)
      4. on ouvre et on ferme les parenthèses () sans espaces ni avant, ni entre ;
      5. 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',
      6. après la parenthèse fermante, on place une espace puis l'accolade ouvrante { ;
      7. 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) ;
      8. 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 :

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)