Mani�res d'automatiser un calcul

**eleydet** · 17/09/2016, 10h52

Bonjour,

Le code ci-dessous est un exemple de la mani�re dont je m'y prenais pour automatiser un calcul. Je me dis que cette mani�re de proc�der est probablement d�mod�e. En particulier, je me demande si l'attribut "name" de la balise "form" n'est pas d�pr�ci�.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function calculer() {
        x=document.f.nb_a.value;
        y=document.f.nb_b.value;
        x=x*1;
        y=y*1;
        z=x*y+3;
        document.f.resultat.value=z;
      }
    </script>
  </head>
  <body>
    <form name="f">
      <p>a = <input name="nb_a"></p>
      <p>b = <input name="nb_b"></p>
      <input type="button" value="CALCULER" onclick="calculer();">
      <p>a x b + 3 = <input name="resultat"></p>
    </form>
  </body>
</html>

Le code ci-dessous vous para�t-il conforme � ce qu'il devrait se faire actuellement?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function calculer() {
        x=document.getElementById("nb_a").value;
        y=document.getElementById("nb_b").value;
        x=x*1;
        y=y*1;
        z=x*y+3;
        document.getElementById("resultat").value=z;
      }
    </script>
  </head>
  <body>
    <p>a = <input id="nb_a"></p>
    <p>b = <input id="nb_b"></p>
    <input type="button" value="CALCULER" onclick="calculer();">
    <p>a x b + 3 = <input id="resultat"></p>
  </body>
</html>

Merci par avance pour vos r�ponses.

**sekaijin** · 17/09/2016, 19h33

Envoy� par eleydet

Le code ci-dessous vous para�t-il conforme � ce qu'il devrait se faire actuellement?

non

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
       function init()  {
        var a=document.getElementById("nb_a");
        var b=document.getElementById("nb_b");
        var r=document.getElementById("resultat");
        document.getElementById('bouton').onclick = function() {
          x= parseInt(a.value, 10);
          y= parseInt(b.value, 10);
          r.value=x*y+3;
        }
      }
    </script>
  </head>
  <body onload="inti();">
    <p>a = <input type="number"  id="nb_a"></p>
    <p>b = <input type="number"  id="nb_b"></p>
    <button id="bouton">calculer</buttton>
    <p>a x b + 3 = <input id="resultat"></p>
  </body>
</html>

explication la fonction init r�cup�re une r�f�rence sur les trois input elle cr�e une methode dans l'object bouton qui fait le calcul.
ainsi la recherche des �l�ment dans le dom ne se fait qu'une fois. a b et r sont donc les trois �l�ment du dom.

le contenu de la fonction x est la valeur de l'entier contenu dans la valeur de l'input donc pas d'utilise de *1 pour forcer la conversion mais un parseInt en base 10.
tu peux aussi utiliser parseFloat si ce sont des nombre r�els.

pour finir le html
les input sont de type "number" l'input de type button c'est pour les formulaire. l� on n'a pas de form donc on utilise un simple bouton

A+JYT

**Beginner.** · 17/09/2016, 20h41

Salut,

J'ai essay� ton code ici : http://jsbin.com/jidaxujofu/edit?html,console,output (une erreur avait �t� signal�e (faute de frappe sans doute) j'ai alors remplac� onload="inti(); par onload="init();).

Cela fonctionne et je me suis demand� si c'�tait normal que le troisi�me paragraphe soit � l'int�rieur du bouton ? (c'est jolie au passage).

Envoy� par sekaijin

le contenu de la fonction x est la valeur de l'entier contenu dans la valeur de l'input donc pas d'utilise de *1 pour forcer la conversion mais un parseInt en base 10.
tu peux aussi utiliser parseFloat si ce sont des nombre r�els.

Que penses-tu de l'usage du "+" : x= +a.value; � la place de x= parseInt(a.value, 10);. J'ai lu que �a marchait bien apparemment mais le code est peut-�tre moins lisible ?

EDIT : Il semble qu'utiliser la fonction parseInt soit pr�f�rable car quand la string ne correspond pas � un nombre elle renvoie "NaN" alors qu'avec le "+" cela renvoie le nombre 0 apparemment...

**eleydet** · 17/09/2016, 21h33

Bonsoir,

Ce qui me vient, � chaud :

- Si le troisi�me paragraphe est � l'int�rieur du bouton, c'est parce qu'il fallait �crire </button> � la place de </buttton>...

- C'est �tonnant : a.value est type cha�ne de caract�res. Et si on entre "4,6" dans le champ de saisie, la cha�ne de caract�res obtenue est "4.6". La virgule a �t� remplac�e par un point. Il faut donc effectivement convertir a.value en nombre.

- J'ai pr�f�r� parseFloat() � parseInt(). Pour les nombres entr�s par l'utilisateur, le s�parateur des d�cimales doit �tre la virgule. Par contre, le r�sultat s'affiche avec un point � la place de la virgule.

- Tant qu'� faire, autant s�parer compl�tement le HTML du JavaScript.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
    <script>
       onload=function()  {
        var a=document.getElementById("nb_a");
        var b=document.getElementById("nb_b");
        var r=document.getElementById("resultat");
        document.getElementById('bouton').onclick = function() {
          x= parseFloat(a.value, 10);
          y= parseFloat(b.value, 10);
          r.value=x+y;
        }
      }
    </script>
  </head>
  <body>
...

En tous les cas, merci pour vos commentaires qui invitent � la r�flexion.

**Beginner.** · 17/09/2016, 21h47

Envoy� par eleydet

- Si le troisi�me paragraphe est � l'int�rieur du bouton, c'est parce qu'il fallait �crire </button> � la place de </buttton>...

Ah oui bien vue ! Je me demande s'il existe des outils qui signalent ce genre de faute de frappe ?

**eleydet** · 18/09/2016, 08h06

Bonjour,

Une solution qui signale les fautes de frappe consiste � ouvrir la page avec Firefox (avec les autres navigateurs, je n'ai pas essay�) puis � taper sur les touches CTRL et U du clavier. Cela affiche le code source de la page, avec du rouge l� o� il y a une faute de frappe...

Sinon j'ai regard� la documentation :
https://developer.mozilla.org/fr/doc...Element/Button
Elle indique qu'il est possible, avec l'�l�ment <button>, de soumettre le formulaire au serveur distant, de la m�me mani�re qu'avec un �l�ment <input>.

**NoSmoking** · 18/09/2016, 11h09

Bonjour,

Envoy� par Beginner.

Je me demande s'il existe des outils qui signalent ce genre de faute de frappe ?

tu peux toujours soumettre ton code au validateur HTML, par exemple https://validator.w3.org/.

**Watilin** · 18/09/2016, 17h53

Envoy� par eleydet

- C'est �tonnant : a.value est type cha�ne de caract�res.

Oui, je me fais souvent avoir. Pourtant c�est dans la spec :

The input element represents a control for setting the element's value to a string representing a number.

En fran�ais (je traduis comme je peux) :

L��l�ment input repr�sente un contr�le pour assigner � la valeur de l��l�ment une cha�ne repr�sentant un nombre.

Envoy� par eleydet

Et si on entre "4,6" dans le champ de saisie, la cha�ne de caract�res obtenue est "4.6". La virgule a �t� remplac�e par un point.

Les inputs sont localis�s, c�est-�-dire qu�ils d�pendent de la langue dans laquelle le navigateur est configur�. On trouve trace de �a dans le ticket de bug assign� � l�impl�mentation des input number dans Firefox : https://bugzilla.mozilla.org/show_bug.cgi?id=344616#c14
Comme dans les logiciels de bureautique, les nombres d�cimaux en fran�ais sont �crits avec une virgule, alors qu�en am�ricain ils utilisent le point. L�attribut value, bien que de type cha�ne, repr�sente une donn�e de type nombre dans le langage qui demande cette value. Je ne sais pas si je suis tr�s clair. Concr�tement : vu qu�ici on est en JavaScript, l�expression JavaScript a.value va renvoyer une repr�sentation cha�ne d�un nombre JavaScript, et les nombres JavaScript utilisent le point. Peu importe la langue de l�UI. On a donc une diff�rence entre ce que voit l�utilisateur et comment la donn�e est repr�sent�e en interne.

Mani�res d'automatiser un calcul

JavaScript

Vue hybride

Discussions similaires

Partager

Partager