[Résolu] [JS] Besoin d’aide sur réalisation d’un convertisseur dec/hex

Besoin d’aide sur réalisation d’un convertisseur dec/hex [Résolu] [JS] - Javascript/Node.js - Programmation

Marsh Posté le 22-08-2020 à 22:43:29    

Bonjour à toutes et tous,
 
Tout d'abord je tiens à préciser que je ne connais pas vraiment JavaScript, je me suis lancé dans un projet pour faciliter une procédure que j'ai à mon travail et pour apprentissage perso également, mais de formation système et réseau, je fais du script sous Linux, automatise avec Ansible, donc, normalement, je peux me débrouiller.
 
Je m’explique :  
 
Il arrive que dans le cadre de mon travail j’ai à convertir du décimal en hexadécimal pour obtenir un long code qui se présente, par exemple, sous cette forme (avec les espaces) : 29602 84af2 c9e22
 
29602 est un code hexadécimal toujours présent qui ne change jamais.
 
84af2 et c9e22 ont été obtenus après conversion décimal/hexadécimal
 
Pour ce faire j’utilise la calculatrice Windows en mode programmeur, mais aimerais coder un programme JavaScript avec formulaire HTML dans lequel je rentre les deux codes décimal et il me ressort le code long complet, voici un exemple :  
 
 
https://i.ibb.co/d6VBQmk/convertisseur-deci-hexa.png
 
 
Où j'en suis : c'est pas mal parti ! J'ai mon formulaire HTML (image ci-dessus), quand je rentre des chiffres dans les text input code 1 ou code 2 et que je clique sur les boutons OK cela convertit bien en hexadécimal dans le text input code long, super. Effacer fonctionne aussi, mais là rien de compliqué.
 
Voici ce sur quoi je bute :
 
Problème 1 : quand je convertis cela efface le chiffre précédemment converti, ors comme expliqué il me faudrait tous les chiffres (si c'est possible évidemment) dans l'unique text input code long. J'ai cherché sur sur le net, mais je bloque.
 
Problème 2: comment faire en sorte également que le code 29602 apparaisse à chaque conversion ?
 
 
code source :  
 
HTML :  

Code :
  1. <form name="converthexa" action="">
  2.     <fieldset>
  3.    <legend>Titre</legend>
  4.    <!-- Code code_1 -->
  5.    <p><label for="code_1">code 1 : </label> <input type="text" id="code_1" name="code_1" >
  6.    <!-- Bouton de validation -->
  7.    <input type="button" class="ok" name="valider" value="OK" onClick="xdecimal_code_1();"></p>
  8.    <!-- Code code_2 -->
  9.    <p><label for="code_2">code 2 : </label> <input type="text" id="code_2" name="code_2" >
  10.    <!-- Bouton de validation -->
  11.    <input type="button" class="ok" name="valider" value="OK" onClick="xdecimal_code_2();"></p>
  12.    <!-- Code localisation commençant par 22804 -->
  13.    <p><label for="location">code long : </label><input type="text" id="location" name="location" >
  14.    <!-- Bouton effacer, pour effecer le formulaire -->
  15.    <input type="reset" value="Effacer"></p>
  16.   </fieldset>
  17.  </form>


 
JavaScript

Code :
  1. <script type="text/javascript">
  2.   function xdecimal_code_1()
  3.   {
  4.    decimal = document.getElementById("code_1" );
  5.    hexadecimal = document.getElementById("location" );
  6.    hexadecimal.value = (decimal.value-0).toString(16);
  7.   }
  8.   function xdecimal_code_2()
  9.   {
  10.    decimal = document.getElementById("code_2" );
  11.    hexadecimal = document.getElementById("location" );
  12.    hexadecimal.value = (decimal.value-0).toString(16);
  13.   }
  14.  </script>


 
Merci pour votre aide :)


Message édité par dj ess le 25-08-2020 à 10:55:36
Reply

Marsh Posté le 22-08-2020 à 22:43:29   

Reply

Marsh Posté le 23-08-2020 à 11:38:46    

Bonjour,
quelques remarques et questions :
- Dans ton programme, le seul intérêt du formulaire c'est d'automatiser l'action du bouton reset, ce qui est déjà pas mal. Mais on pourrait s'en passer s'il n'y a pas besoin de traiter d'avantage les données.
- Est-ce que les deux boutons OK sont nécessaires : pourquoi ne pas associer une seule fonction à un bouton qui traitera les deux codes ?
 
Voici un exemple avec quelques aménagements de ton code:

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.  <form name="converthexa" action="">
  8.   <fieldset>
  9.      <legend>Titre</legend>
  10.      <!-- Code code_1  : utilisation du type="number" pour valider les données en décimal -->
  11.      <p><label for="code_1">code 1 : </label> <input type="number" id="code_1" name="code_1" ></p>
  12.    
  13.      <!-- Code code_2 -->
  14.      <p><label for="code_2">code 2 : </label> <input type="number" id="code_2" name="code_2" ></p>
  15.    
  16.      <!-- Bouton de validation unique-->
  17.      <input type="button" class="ok" name="valider" value="Convertir" onClick="xdecimal();"></p>
  18.    
  19.      <!-- Code localisation commençant par 29602 : "value" est positionné pour l'affichage -->
  20.      <p><label for="location">code long : </label><input type="text" value="29602" id="location" name="location" readonly="readonly">
  21.    
  22.      <!-- Bouton effacer, pour effacer le formulaire -->
  23.      <input type="reset" value="Effacer"></p>
  24.   </fieldset>
  25.  </form>
  26.  <script type="text/javascript">
  27.   var hexadecimal = document.getElementById("location" );
  28. // une fonction unique de conversion et d'affichage dans "location"
  29.   function xdecimal() {
  30.    code_1 = document.getElementById("code_1" );
  31.    code_2 = document.getElementById("code_2" );
  32.    hexadecimal.value ="29602 " +(code_1.value-0).toString(16) +" " +(code_2.value-0).toString(16);
  33.   }
  34.  </script>
  35.  </body>
  36. </html>


 
Si tu dois garder les 2 boutons OK, tu pourrais écrire une seule fonction xdecimal à laquelle passer comme paramètre l'id ou la valeur du bouton à traiter
 

Reply

Marsh Posté le 25-08-2020 à 10:49:18    

Bonjour,
 
Un grand merci Itela pour ton aide.
 
J’ai deux remarques :
 
1: tu es le meilleur
 
2: tu es le meilleur  
 
C’est exactement ce que je voulais.
 
j’avais essayé avec un seul bouton, mais ça ne voulait pas fonctionner, donc j'avais fait avec deux.
 
Encore merci  ;)  
 
Bonne journée
 


Message édité par dj ess le 25-08-2020 à 10:54:11
Reply

Marsh Posté le 25-08-2020 à 18:34:58    

:D de rien !
Je suis comme toi : j'apprends en faisant..
Tu trouveras bien des petites choses à améliorer... par exemple utilisation de Number() ou parseInt() au lieu de (code_1.value-0) pour traiter les nombres.
 
Bonne continuation.

Reply

Marsh Posté le 29-08-2020 à 19:14:35    

Hello :
 
Convertisseur terminé, après travail esthétique avec CSS, ça donne ça  :
 
https://i.ibb.co/5r54rD8/convert-img-1.png https://i.ibb.co/jW12zb5/convert-img-2.pnghttps://i.ibb.co/BKDqCPx/convert-img-3.png https://i.ibb.co/SNqVCZL/convert-img-4.png
 
 
C'est pas mal je suis content !
 
Merci encore pour ton aide, a plus bon weekend.

Reply

Marsh Posté le 29-08-2020 à 20:32:54    

Joli rendu !
Il reste un petit détail "code 1" qui apparait 2 fois  placeholder de la deuxième zone).
 
Bon weekend
 :hello:

Reply

Marsh Posté le 26-09-2020 à 13:25:28    

Bonjour,
 
Merci oui c'est sympa, désolé du retard de ma réponse, oui j'avais vue pour code 1 code 1 mais les images étaient déjà hébergées.
 
Tout est ok aujourd'hui, j'ai légèrement agrandi le formulaire, car il faisait petit au milieu de la page.
 
Bon weekend  :)  
 
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed