SELFHTML: JavaScript / Exemples d'application / Calculatrice

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application

Calculatrice

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

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. En outre cette calculatrice propose aussi, à la différence de calculatrices normales, la possibilité de saisir des données directement sur l'écran d'affichage. Par ailleurs, elle calcule également des opérations en série telles que 1+2+3+4+5+6+7+8+9 et des expressions mises entre parenthèses comme 3*(2+4).

Au vu de cet exemple, vous pouvez étudier comment, avec JavaScript, on peut utiliser des saisies de formulaire pour une interaction directe. L'exemple de calculatrice est une application JavaScript du type Petits assistants. Ce genre de mises en œuvre de JavaScript fait partie des possibilités d'applications des plus judicieuses.

Texte source avec explications

L'exemple montre le fichier HTML complet avec la calculatrice.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Calculatrice</title>
<script type="text/javascript">
<!--
function verification(entree) {
  var seulement_ceci ="0123456789[]()-+*%/.";
  for (var i = 0; i < entree.length; i++)
   if (seulement_ceci.indexOf(entree.charAt(i))<0 ) return false;
  return true;
 }

 function resultat() {
   var x = 0;
  if (verification(window.document.calculatrice.affiche.value))
     x = eval(window.document.calculatrice.affiche.value);
   window.document.calculatrice.affiche.value = x;
 }

 function ajouter(caracteres) {
   window.document.calculatrice.affiche.value =
   window.document.calculatrice.affiche.value + caracteres;
 }

 function fonction_speciale(fonction) {
   if (verification(window.document.calculatrice.affiche.value)) {
     if(fonction == "sqrt") {
       var x = 0;
     x = eval(window.document.calculatrice.affiche.value);
     window.document.calculatrice.affiche.value = Math.sqrt(x);
   }
   if(fonction == "pow") {
     var x = 0;
     x = eval(window.document.calculatrice.affiche.value);
     window.document.calculatrice.affiche.value = x * x;
   }
   if(fonction == "log") {
     var x = 0;
     x = eval(window.document.calculatrice.affiche.value);
     window.document.calculatrice.affiche.value = Math.log(x);
   }
  } else window.document.calculatrice.affiche.value = 0
}
//-->
</script>
<style type="text/css">
<!--
.button {  width:60px; text-align:center;
           font-family:System,sans-serif;
           font-size:100%; }
.affiche { width:100%; text-align:right;
           font-family:System,sans-serif;
           font-size:100%; }
-->
</style>
</head>
<body bgcolor="#FFFFE0" text="#000000">

<form name="calculatrice" action="" onSubmit="resultat();return false;">
<table border="5" cellpadding="10" cellspacing="0">
<tr>
<td bgcolor="#C0C0C0">
<input type="text" name="affiche" align="right" class="affiche"></td>
</tr><tr>
<td  bgcolor="#E0E0E0">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td><input type="button" width="60" class="button" value="  7   " onClick="ajouter('7')"></td>
<td><input type="button" width="60" class="button" value="  8   " onClick="ajouter('8')"></td>
<td><input type="button" width="60" class="button" value="  9   " onClick="ajouter('9')"></td>
<td><input type="button" width="60" class="button" value="  +   " onClick="ajouter('+')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  4   " onClick="ajouter('4')"></td>
<td><input type="button" width="60" class="button" value="  5   " onClick="ajouter('5')"></td>
<td><input type="button" width="60" class="button" value="  6   " onClick="ajouter('6')"></td>
<td><input type="button" width="60" class="button" value="  -   " onClick="ajouter('-')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  1   " onClick="ajouter('1')"></td>
<td><input type="button" width="60" class="button" value="  2   " onClick="ajouter('2')"></td>
<td><input type="button" width="60" class="button" value="  3   " onClick="ajouter('3')"></td>
<td><input type="button" width="60" class="button" value="  *   " onClick="ajouter('*')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="  =   " onClick="resultat()"></td>
<td><input type="button" width="60" class="button" value="  0   " onClick="ajouter('0')"></td>
<td><input type="button" width="60" class="button" value="  .   " onClick="ajouter('.')"></td>
<td><input type="button" width="60" class="button" value="  /   " onClick="ajouter('/')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="sqrt " onClick="fonction_speciale('sqrt')"></td>
<td><input type="button" width="60" class="button" value=" pow " onClick="fonction_speciale('pow')"></td>
<td><input type="button" width="60" class="button" value=" log " onClick="fonction_speciale('log')"></td>
<td><input type="reset"  width="60" class="button" value="  C  "></td>
</tr>
</table>
</td></tr></table>
</form>

</body>
</html>

Explication:

fonction pour le calcul du contenu du champ de calcul:

Dans l'exemple sont notées, dans l'entête du fichier HTML, plusieurs 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.
C'est pour cette raison, qu'avant chaque utilisation de eval(), la fonction verification() est appelée et vérifie la validité de la saisie. Ce n'est que lorsque cette fonction renvoie true, que la méthode eval() est appliquée. Autrement, la valeur 0 est affichée dans le champ de résultat.
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 vérifier la validité de la saisie

La fonction verification(entree) vérifie si les valeurs de entree ne contient que les caractères permis. ceux-ci sont rangés dans la variable seulement_ceci. Avec une boucle for il est successivement verifié pour chacun des caractères de la chaîne de caractères transmise s'il se trouve dans la plage fixée dans seulement_ceci. Avec la méthode charAt() le signe de la position i de la variable entree est extrait pour être transmis comme paramètre à seulement_ceci.indexOf(). La méthode indexOf() vérifie si le signe est bien contenu dans seulement_ceci. Si un caractère invalide devait être trouvé, alors la fonction serait interrompue et la valeur false renvoyée. Autrement la fonction retourne true.

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. Ici est mis en œuvre l' opérateur pour relier des chaînes de caractères (+). Le nouveau signe est transmis à la fonction comme paramètre.

fonction pour le calcul de fonctions spéciales:

La fonction fonction_speciale() 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 deux) 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 clic 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 du gestionnaire d'événement 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: "Calculatrice". 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.calculatrice.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.

Empêcher l'envoi du formulaire

Étant donné que la calculatrice contient un champ de formulaire de saisie à une ligne, ce formulaire peut être envoyé à tout moment par simple confirmation de la touche "entrée". Un envoi n'est pourtant pas souhaité dans le cadre de la calculatrice. C'est pourquoi le gestionnaire d'événement onSubmit est noté dans le repère d'ouverture <form>. Derrière suit l'appel de la fonction resultat() et enfin return false. Cette fonction fait ensorte que, si l'utilisateur appuie sur la touche "entrée", le calcul du résultat a lieu et l'envoi du formulaire est empêché par la même occasion.

Attention:

Dans le standard HTML l'utilisation de l'attribut width= pour les champs input n'est pas permise. Netscape 4.x n'interprète toutefois pas les propriétés CSS pour ces champs de formulaire. Pour ne pas nuire à la mise en page, les attributs width ont été employés malgré l'entorse aux directives du standard HTML.


	Calendrier du mois
	Empêcher l'aperçu de vos pages dans des frames

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application