Premiers pas en JavaScript
7.1 Fonction et paramètre unique
cuy copyleft
  See You Why?  

 


test relatif aux fonctions (6.9) | | exercices sur les fonctions à paramètre unique (7.8)

Contenu

 

 

I. Paramètre

Nous venons de voir comment fonctionne une fonction (jeu de mots toujours involontaire, évidemment), mais le résultat était toujours identique.

Imaginez-vous programmeur : votre fonction a un but, mais son résultat peut dépendre d'une information à passer à cette fonction.

Vous souhaitez envoyer un message à votre élève, mais ce serait tellement plus sympatique si vous lui donniez son prénom ;
vous souhaitez commenter le résultat à un test, mais votre message serait plus personnalisé si vous lui donniez le 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 ;
pour convertir un montant donné en euro et obtenir l'équivalent en dollar américain... vous devez donner le montant en euro.

Ce besoin de "passer" des paramètres à une fonction est fréquent :

Nous devrons donc distinguer l'usage du paramètre dans la déclaration (définition) de la fonction et son usage dans l'appel de la fonction.

Le lecteur découvrira que selon les cas, soit on ne note rien entre les parenthèses, soit on note un ou plusieurs éléments... qu'on appellera des paramètres. Pour commencer simplement, nous n'aborderons ici que les fonctions à paramètre unique, donc avec des parenthèses ne contenant qu'une seule information.

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

On parlait ci-dessus
d'une part d'un 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 un paramètre reçu qui sera le prix hors TVA.

 

A. la définition de la fonction

Comme signalé dans le chapitre précédent, 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 est simple et quasi identique à la création d'une fonction sans paramètre :

      1. on écrit le mot réservé function
        (ici aussi, 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 "tvac" - pour "TVA comprise")
        (à 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 le paramètre comme nom de variable, ce nom est laissé à votre choix...
        dans notre exemple, il parait logique que l'information à transmettre soit un prix hors TVA, nous lui donnerons donc le nom de 'htva',
        rien ne nous empêchait de l'appeler 'x' ou 'prix_hors_tva'... qui respectent aussi les règles de noms de variables ;
      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 le paramètre) ;
      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 du paramètre reçu...
par exemple, envoyer un message de prix TVAC 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,
[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 hors TVA :" + htva + "\nLe prix TVA comprise est " + 1.21 * htva);

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".
Ainsi, la définition de notre première fonction se présentera ainsi :

<script type="text/javascript">

function tvac(htva) {
     alert("Le prix hors TVA :" + htva + "\nLe prix TVA comprise est " + 1.21 * htva);
     // d'autres instructions pourraient être notées ici
}

</script>

Votre première fonction à paramètre unique 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 (un ou plusieurs) paramètre(s) :

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 un paramètre à transmettre pour l'instant.

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 tvac(htva) {
alert("Le prix hors TVA :" + htva + "\nLe prix TVA comprise est " + 1.21 * htva);
// d'autres instructions pourraient être notées ici
}
tvac(300);
tvac(800);
tvac(27.45);

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

Et bien sûr, le paramètre "passé" à la fonction à paramètre ne doit pas uniquement être une valeur donnée, ce peut aussi être une variable du programme. On pourrait avoir :

var prix1=97.5;
var prix2=123.5;
var total_htva;
total_htva = prix1 + prix2;
tvac(total_htva);

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 'faire' qui a exigé l'accolade ouvrante.

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

 

Exemple

<html>
<head><title>produit de 2 nombres</title></head>
<body>
<script type="text/javascript">

function tvac(htva) {
       alert("Le prix hors TVA :" + htva + "\nLe prix TVA comprise est " + 1.21 * htva);
       // d'autres instructions pourraient être notées ici
}


tvac(300);
tvac(800);
tvac(27.45);


var prix1=97.5;
var prix2=123.5;
var total_htva;
total_htva = prix1 + prix2;
tvac(total_htva);
 
</script>
</body>
</html>


Vous voilà prêt pour la suite du cours... vous venez de découvrir comment créer et appeler une fonction à paramètre unique, il ne vous reste pour l'instant qu'à découvrir les fonctions à paramètres multiples...

Et si vous rêviez de franciser le langage JS, rien ne vous empêche de redéfinir les fonctions prédéfinies de JS. Par exemple :

<script type="text/javascript">
function ecrire_document(txt) {
    document.write(txt);
}
function ecrire_message(tx) {
    alert(tx);
}
</script>
 

ce qui vous permettrait ensuite d'écrire un script en JS francisé, tel que :

var mon_texte = "Bonjour "+prenom+",<br>comment vas-tu ?";
var rep = prompt();
ecrire_document(mon_texte);
if (prenom==""){
    ecrire_message("Tu ne m'as pas donné ton prénom.");
}

mais pour comprendre entièrement ce script, il faudra encore voir les conditions et l'instruction IF abordées aux chapitres XIV à XVII. Pour le moment, comprenez que c'est une condition, comme si vous disiez SI condition, ALORS...

 

 

VIII. Exercices relatifs aux fonctions à paramètre unique

voir suite >>>

 

 

IX. Test relatif aux fonctions à paramètre unique

voir suite >>>

 

 


test relatif aux fonctions (6.9) | | exercices sur les fonctions à paramètre unique (7.8)