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/.

**Beginner.** · 18/09/2016, 15h32

Merci.

Oui j'ai testé vos suggestions et effectivement cela permet de repérer la faute de frappe...

Ceci dit ce serait bien si ce genre de chose était signalé automatiquement par l'éditeur (je crois que c'est le cas de certains d'ailleurs)...

**NoSmoking** · 18/09/2016, 17h37

La plupart des éditeurs proposent/offrent la coloration syntaxique qui permet de voir les erreurs de frappe, de plus il existe souvent une option de fermeture automatique des balises, entre autres.

**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.

**Beginner.** · 18/09/2016, 19h22

Envoyé par NoSmoking

La plupart des éditeurs proposent/offrent la coloration syntaxique qui permet de voir les erreurs de frappe, de plus il existe souvent une option de fermeture automatique des balises, entre autres.

Oui effectivement !

Manières d'automatiser un calcul

JavaScript

Discussions similaires

Partager

Partager