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>
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 ?
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.
Bonjour,
Le même code pourrait il servir de base pour convertir un salaire brut en salaire net ?
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.