Créer un convertisseur entre deux unités

I. Présentation

Ce tutoriel a pour but de vous expliquer comment créer un convertisseur entre deux unités. Dans notre exemple on fera un convertisseur qui convertis les Euros en Francs et les Francs en Euros, mais vous pouvez reprendre le même principe pour écrire le code d'un convertisseur entre deux autres unités.

II. Procédure

Cet exemple montrera uniquement le code HTML et le code JavaScript, aucune propriété CSS sera utilisée. Libre à vous de les ajouter si vous le souhaiter.

A. Le code HTML de base

<HTML>
<HEAD>
</HEAD>
<BODY>
<div>
<h2>CONVERTISSEUR MONNAIES</h2>
<br>
<FORM Name='Form1'>
Euros <input type='text' Name='Euros'>
<br>
Francs<input type ='text' Name='Francs'>
</FORM>
</div>
</BODY>
</HTML>

B. Le code JavaScript

Maintenant qu'on a notre page avec nos deux champs de saisie et le titre, ajoutons du code JavaScript :

Pour que la conversion soit dynamique, c'est à dire que dès que l'utilisateur saisie un nombre, celui-ci soit converti au fur et à mesure, nous allons exécuter la fonction JavaScript à chaque fois que l'utilisateur relâche la touche du clavier. Cet événement s'appelle onKeyUp.

- Dans un premier temps, occupons nous de la conversion des euros en francs.

Plaçons donc l'événement onKeyUp dans le champ où l'utilisateur devra saisir les euros. Cet événement appellera la procédure ConvertirEnFrancs(), qui convertira les euros en francs.

Euros <input type='text' Name='Euros' onKeyUp='ConvertirEnFrancs()' Value='1'>

Ensuite, il faut définir et écrire cette fonction JavaScript dans le HEAD de notre page HTML :

<HEAD>
<Script language='javascript'>

function ConvertirEnFrancs()
{
if (isNaN(Form1.Euros.value) == true)
{
alert('Merci de saisir un nombre. Conversion Impossible.');
Form1.Euros.value = '1';
}
else
{
Form1.Francs.value = Form1.Euros.value * 6.55957 ;
}
}
</Script>

</HEAD>

Explications du fonctionnement du code : Si la valeur saisie dans le champs des Euros n'est pas un nombre (voir isNaN) on affiche le message d'alerte "Merci de saisir un nombre. Conversion Impossible." et on remet "1" dans le champs des Euros pour remettre le convertisseur à l'état initial. Sinon, la valeur est un nombre donc on multiplie cette valeur par 6,55957 et le résultat devient la valeur inscrite dans le champ de saisie des Francs.

- Dans un second temps, mettons en place la conversion des Francs vers les Euros :

Le principe est le même, ce sont seulement quelques modifications qui doivent être apportées.

Ajoutons, là aussi, l'appelle de la procédure JavaScript lorsque l'utilisateur relâche la touche du clavier :

Francs<input type ='text' Name='Francs' onKeyUp='ConvertirEnEuros()'>

Puis, la fonction JavaScript, fonctionnant sur le même principe que la précédente :

function ConvertirEnEuros()
{
if (isNaN(Form1.Francs.value) == true)
{
alert('Merci de saisir un nombre. Conversion Impossible.');
Form1.Francs.value = Form1.Euros.value * 6.55957 ;
}
else
{
Form1.Euros.value = Form1.Francs.value / 6.55957 ;
}
}

- Pour finir, on ajoute dans le BODY de la page, un événement JavaScript appelé onLoad avec la fonction qui converti les euros en francs, étant donné que par défaut le champ des Euros a pour valeur '1' dans notre cas, il faut que la fonction s'exécute pour effectuer la conversion en francs de 1 euro.

C. Le code complet

<HTML>
<HEAD>
<Script language='javascript'>

function ConvertirEnFrancs()
{
if (isNaN(Form1.Euros.value) == true)
{
alert('Merci de saisir un nombre. Conversion Impossible.');
Form1.Euros.value = '1';
}
else
{
Form1.Francs.value = Form1.Euros.value * 6.55957 ;
}
}

function ConvertirEnEuros()
{
if (isNaN(Form1.Francs.value) == true)
{
alert('Merci de saisir un nombre. Conversion Impossible.');
Form1.Francs.value = Form1.Euros.value * 6.55957 ;
}
else
{
Form1.Euros.value = Form1.Francs.value / 6.55957 ;
}
}

</Script>
</HEAD>
<BODY onLoad='ConvertirEnFrancs()'>
<div id='bloc'>
<h2>CONVERTISSEUR MONNAIES</h2>
<br>
<FORM Name='Form1' action='convertisseur.html'>
Euros <input type='text' Name='Euros' onKeyUp='ConvertirEnFrancs()' Value='1'>
<br>
Francs<input type ='text' Name='Francs' onKeyUp='ConvertirEnEuros()'>
</FORM>
</div>
</BODY>
</HTML>
Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian BURNEL

Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

Nombre de posts de cet auteur : 5501.Voir tous les posts

4 thoughts on “Créer un convertisseur entre deux unités

  • Aurais-tu une solution (même payante) pour créer un bouton de conversion d’un prix fixe (139 euros ou 107 euros) vers toutes monnaies ?

    Répondre
  • dans les deux fonctions ConvertirEnFrancs() et ConvertirEnEuros(), utiliser un Do while serait mieux qu’un if else. De cette manière, tant que l’utilisateur n’a pas saisi un nombre, alert s’exécute à nouveau.

    Répondre
  • Bonjour,
    Le même code pourrait il servir de base pour convertir un salaire brut en salaire net ?

    Répondre
  • Je suis un jeune étudiant dans le développement des sites web et je viens de commencer ma formation. Donc j’aimerais avoir beaucoup de votre aide pour apprendre à développer.

    Répondre

Répondre à yaacov Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.