On va notamment pouvoir utiliser du JavaScript avec des éléments de formulaire HTML input pour créer en quelques lignes de codes des convertisseurs de toutes sortes comme :
- Des convertisseurs de poids (g en kg en livres, etc.) ;
- Des convertisseurs de distance (m en km en pouce en pied, etc.) ;
- Des convertisseurs de vitesse ;
- Des convertisseurs de monnaie ;
- Des convertisseurs de température ;
- Etc.
Quelque soit le convertisseur qu’on souhaite créer en JavaScript, le principe de base sera toujours la même. Dans ce tutoriel, nous allons nous concentrer sur la création d’un convertisseur de poids. N’hésitez pas ensuite à créer d’autres convertisseurs avec d’autres types d’unités, ça vous fera un bon entrainement !
L’élément HTML input : base du convertisseur
L’élément HTML input (élément de type champ de formulaire) est un élément HTML qui permet aux visiteurs de rentrer et de nous envoyer des données. C’est l’élément généralement privilégié et utilisé lorsqu’on souhaite dynamiser notre site et “dialoguer” avec les utilisateurs.
Nous allons créer trois champs de données input type="number" pour notre convertisseur dans lesquels l’utilisateur pourra saisir une quantité exprimée en grammes, en kilogrammes ou en livres.
On va donc avoir un fichier qui ressemble à cela :
La mise en forme CSS va être minimale :
L’idée va maintenant être de récupérer les données entrées dans un champ en Javascript et de mettre automatiquement et immédiatement à jour la valeur dans les autres champs.
En effet, si les éléments de formulaires HTML nous permettent de récolter des données utilisateurs, le HTML n’est pas un langage qui permet de manipuler ces données : nous utiliserons un autres langage comme le JavaScript ou le PHP pour cela.
Création du convertisseur en JavaScript
Pour créer notre convertisseur en JavaScript, il suffit de bien réfléchir à ce qu’on souhaite obtenir. Ici, on veut récupérer les données entrées dans l’un des 3 champs en JavaScript (sans savoir au préalable lequel sera rempli), convertir ces données et remplir les autres champs avec les données converties.
Pour récupérer les données d’un champ input en JavaScript, on va utiliser la méthode gestionnaire d’évènements addEventListener() pour réagir à un événement input. L’événement input se déclenche dès que le texte d’un élément input change.
On va ensuite également passer une traditionnelle fonction de rappel anonyme en deuxième argument de addEventListener(). Cette fonction anonyme va elle même appeler notre fonction de conversion.
Lorsque le texte ou la valeur d’un élément input change, on va vouloir récupérer cette valeur, effectuer les conversions et remplir les autres champs. Pour cela, il va déjà falloir qu’on sache quel champ a été rempli. On va pour cela utiliser nos id et la propriété JavaScript id qu’on va passer en premier argument de notre fonction de conversion.
Pour récupérer la valeur d’un champ dès qu’elle est entrée, on va utiliser la propriété value et la syntaxe this.value qu’on va passer en second argument de notre fonction de conversion.
Il ne nous reste plus qu’à créer notre fonction de conversion. Dans celle-ci, on va déjà déterminer quel champ a été rempli grâce à la valeur de id et, selon le champ rempli, on va effectuer différentes opérations de conversion et remplir les autres champs en direct.
Le code complet de notre convertisseur est donc le suivant :
See the Pen
Convertisseur HTML et JavaScript by Pierre (@pierregiraud)
on CodePen.
bahh merci de nous appendre tes connaissances ca peut être utile ont ne sait jamais