SELFHTML: JavaScript / Exemples d'application / Calculatrice

SELFHTML/Quickbar JavaScript Exemples d'application

	Calculatrice
	Calculatrice - l'exemple

Calculatrice

Exemple d'affichage: aperçu

L'exemple construit à l'aide d'un formulaire HTML une calculatrice d'apparence assez "réelle ". L'utilisateur peut se servir de cette calculatrice de façon habituelle. À cela s'ajoutent quelques méthodes de saisie particulièrement pratiques.

Au vu de cet exemple, vous pouvez étudier comment, avec JavaScript, on peut utiliser des saisies de formulaire pour une interaction directe.

Attention: Pour une meilleure orientation dans l'exemple, celui-ci contient des liens aux explications respectives par exemple: 1*. Ces liens ne font pas partie du code source. Si vous copiez cet exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous recevriez des messages d'erreur JavaScript.

Exemple:

  <html>
  <head>
  <title>Calculatrice</title>
  <script language="JavaScript">
  <!--
  1* function resultat()
 {
   var x = 0;
   x = eval(window.document.Calculette.affiche.value);
   window.document.Calculette.affiche.value = x;
 }

 2* function ajouter(signe)
 {
   window.document.Calculette.affiche.value =
   window.document.Calculette.affiche.value + signe;
 }

 3* function funcspec(Fonction)
 {
   if(Fonction == "sqrt")
    {
     var x = 0;
     x = eval(window.document.Calculette.affiche.value);
     window.document.Calculette.affiche.value = Math.sqrt(x);
        }
   if(Fonction == "pow")
    {
     var x = 0;
     x = eval(window.document.Calculette.affiche.value);
     window.document.Calculette.affiche.value = x * x;
        }
   if(Fonction == "log")
    {
     var x = 0;
     x = eval(window.document.Calculette.affiche.value);
     window.document.Calculette.affiche.value = Math.log(x);
        }
 }
  //-->
  </script>
  </head>

  <body bgcolor=#CCCCCC text=#000000 link=#0000CC vlink=#000099 alink=#0000FF>
  <h1>Calculatrice</h1>
  <form name="Calculette">
  <table border=10 cellpadding=10>
  <tr>
  <td bgcolor=#C0C0C0><input name="affiche" size=30 maxlength=30></td>
  </tr>
  <tr><td><table>
  <tr>
  4* <td width=50><input type=button value="   7   " onClick="ajouter('7')"></td>
  <td width=50><input type=button value="   8   " onClick="ajouter('8')"></td>
  <td width=70><input type=button value="   9   " onClick="ajouter('9')"></td>
  <td width=50><input type=button value="   +    " onClick="ajouter('+')"></td>
  </tr>
  <tr>
  <td width=50><input type=button value="   4   " onClick="ajouter('4')"></td>
  <td width=50><input type=button value="   5   " onClick="ajouter('5')"></td>
  <td width=70><input type=button value="   6   " onClick="ajouter('6')"></td>
  <td width=50><input type=button value="    -    " onClick="ajouter('-')"></td>
  </tr>
  <tr>
  <td width=50><input type=button value="   1   " onClick="ajouter('1')"></td>
  <td width=50><input type=button value="   2   " onClick="ajouter('2')"></td>
  <td width=70><input type=button value="   3   " onClick="ajouter('3')"></td>
  <td width=50><input type=button value="    *    " onClick="ajouter('*')"></td>
  </tr>
  <tr>
  <td width=50><input type=button value="    =    " onClick="resultat()"></td>
  <td width=50><input type=button value="   0   " onClick="ajouter('0')"></td>
  <td width=70><input type=button value="  .    " onClick="ajouter('.')"></td>
  <td width=50><input type=button value="    /    " onClick="ajouter('/')"></td>
  </tr>
  <tr>
  <tr>
  <td width=50><input type=button value="sqrt " onClick="funcspec('sqrt')"></td>
  <td width=50><input type=button value=" pow " onClick="funcspec('pow')"></td>
  <td width=70><input type=button value=" log " onClick="funcspec('log')"></td>
  5* <td width=50><input type=reset value="   C   "></td>
  </tr>
  </tr>
  </table>
  </td></tr></table>
  </form>
  </body>
  </html>

Explication:

La construction HTML de la calculatrice semble un peu complexe, étant donné qu'elle se sert d'un tableau placé lui-même dans un tableau. C'est cependant grâce aux tableaux qu'un alignement propre des différents boutons est à peu près réussi, et que le champ pour le calcul ou l'affichage du résultat apparaît dans un passage distinct d'une couleur différente (le dégradé de couleurs n'est cependant visible que sur les navigateurs plus modernes).
La calculatrice fonctionne intentionnellement de telle façon que vous pouvez aussi bien utiliser les boutons que vous servir directement du pavé numérique pour la saisie. Ce qui signifie que vous pouvez entrer directement dans le champ de saisie une opération avec les modes de calcul de base, par exemple: 5 * 6 + 7 - 4. Quand vous cliquez ensuite sur le bouton "=", le résultat est affiché dans le même champ.
Avec le bouton "C", vous pouvez à tout moment effacer le contenu actuel du champ de calcul.

fonction pour le calcul du contenu du champ de calcul
Dans l'exemple sont notées, dans l'entête du fichier HTML, toutes les fonctions qui rendent possible la fonctionnalité de la calculatrice. La fonction resultat() calcule le contenu actuel du champ de calcul. Dans la fonction est définie une variable x, dans laquelle le résultat du calcul est sauvegardé. Pour recevoir le résultat, l'opération de calcul qui se trouve dans le champ de formulaire (le champ de calcul de la calculatrice) est transmise à la puissante fonction JavaScript indépendante de l'objet eval(). Cette fonction prend en charge automatiquement tout le calcul de l'opération. La condition préalable en est bien sûr que l'opération ne contienne pas de signe non-valide, auquel cas JavaScript émettrait un message d'erreur.
Pour que le résultat de l'opération, sauvegardé dans la variable x, soit affiché dans le champ de calcul de la calculatrice, la valeur de x est simplement affectée au champ de formulaire correspondant.

fonction pour ajouter un signe dans le champ de calcul
La fonction ajouter() de l'exemple est appelée quand l'utilisateur clique sur l'un des boutons dans le formulaire constituant la calculatrice. Ce peut être des chiffres (0 à 9), des opérateurs arithmétiques (+,-,*,/) ou un point décimal. Pour ajouter le signe entré, est affectée à la valeur actuelle du champ de calcul la valeur qu'il avait jusqu'alors plus le nouveau signe. Le nouveau signe est transmis à la fonction comme paramètre.

fonction pour le calcul de fonctions spéciales
La fonction funcspec() de l'exemple est chargée du calcul de trois fonctions mathématiques spéciales pour lesquelles existent sur la calculatrice des boutons correspondants: les fonctions "sqrt" (racine carrée), "pow" (puissance carrée) et "log" (logarithme commun en base 10). La fonction attend trois paramètres: l'index du formulaire dans lequel se trouve le champ de calcul, l'index du champ dans ce formulaire et une chaîne de caractères qui désigne la fonction mathématique à effectuer. À l'intérieur de la fonction, le troisième paramètre est demandé. Sont permises comme valeurs transmises "sqrt", "pow" et "log". Au cas où l'une de ces valeurs a été transmise, la fonction calcule la valeur désirée dans l'embranchement correspondant de la boucle if. Pour cela, l'opération ou le nombre qui se trouve dans le champ du formulaire transmis (le champ de calcul de la calculatrice), est transmis à la fonction JavaScript standard eval(). Cette fonction se charge automatiquement du calcul total de l'opération. Le résultat est sauvegardé dans x. Au cas où il ne s'agit que d'un simple nombre, celui-ci est sauvegardé dans x. Avec une méthode JavaScript adéquate, par exemple la méthode sqrt() pour calculer la racine carrée, le résultat de la fonction mathématique spéciale est calculé puis immédiatement affecté au champ de calcul/résultat du formulaire de la calculatrice.

inscrire le signe correspondant à un cliquement dans le champ de calcul
Dans le formulaire de la calculatrice de l'exemple, des boutons pour les chiffres, pour les opérateurs etc. sont définis. En cliquant sur un tel bouton, doit s'ensuivre naturellement une réaction appropriée. Cela s'obtient à l'aide de l' Event-Handler onClick=. Celui-ci devient actif quand le bouton correspondant est cliqué, et il appelle alors une des fonctions définies dans l'entête de fichier. Pour un chiffre par exemple, c'est la fonction ajouter() qui est appelée. Pour cela le paramètre attendu est transmis à la fonction - à savoir le chiffre à ajouter. Le formulaire de la calculatrice reçoit lors de sa définition un nom, dans l'exemple: "Calculette". Même le champ de calcul/résultat, qui est adressé très souvent dans le code JavaScript, reçoit un nom - le nom "affiche". L' objet formulaire et l' objet élément de formulaire du champ de calcul/résultat peut donc être adressé avec window.document.Calculette.affiche.

effacement du contenu du champ de calcul
Le bouton qui porte l'inscription "C" sert dans l'exemple à effacer les entrées précédentes. Pour cela, JavaScript n'est pas nécessaire. Il suffit simplement de définir un bouton de type reset.


après:	Calendrier du mois
avant:	Empêcher l'aperçu de vos pages dans des frames

SELFHTML/Quickbar JavaScript Exemples d'application