La Calculette en JavaScript

Programme exemple en JavaScript : " la Calculette " (sans prétention)

[Retour au Menu ]
Ce programme HTML-JavaScript doit servir d'exemple.. Il démontre comment mettre en application la gestion des Evènements de souris tout en profitant du fait que c'est un langage non typé. ( les mêmes variables sont considérées de type numérique ou chaine de caractères...) Il démontre surtout que JavaScript permet l' Interactivité Locale ...
Osons cette litote..Elle n'est pas mal..!. ..même si elle ne sert pas à grand chose..!

En voici le Listing complet très commenté ..

Vous remarquerez que j'ai choisi de transmettre à la fonction touche() un paramètre de type numérique :

0 pour la touche '0'
1 pour la touche "1"
etc...
9 pour la touche "9"
10 pour la touche ","
13 pour la touche "+"
etc...
17 pour la touche "="
et 12 pour la touche "C" ( Clear)

J'aurais pu utiliser le mot clé : this en tant que paramètre transmis ..mais j'ai abandonné cette solution car il y avait une incompatibilité avec NETSCAPE 3..( problème dû au changement de type de variable ...!)
J'ai donc adopté la solution actuelle qui, elle, plait à tous les Navigateurs ( Netscape 3 et 4 , InternetExplorer 4 ).
J'ai essayé de conserver une programmation simple afin de conserver le plus de pédagogie possible..!

Vous trouvez donc 3 fonctions principales :

affiche() ..qui reçoit la valeur à afficher dans la zone Texte du Formulaire.
touche() ..qui reçoit le numéro de touche et agit en fonction de ce numéro.
raz_flags() .. qui ne reçoit rien mais qui recharge à FAUX les drapeaux Booléens..

<html>

<head>

<title>La Calculette en JavaScript</title>

<script language="Javascript">

<!--

var valor=0;var stock="",stock2="";

var ope=false,plu=false,moi=false,mul=false,div=false,flag_egal=false;

function affiche(res)

{ document.calc.ecran.value=res;} // affichage des calculs..

function touche(param) // détection de toutes les Touches..
{
if ( param =="12") {     // raz.. c'est la Touche C
                         valor=0;document.calc.ecran.value="";stock="";stock2="";
                         raz_flags();ope=false;
                       }
if ((param >=0)&&(param <=10))   // les Touches numériques et virgule..
   { if (flag_egal) {raz_flags();valor=0;ope=false;stock="";}
      if (ope==true) // si une touche d'opération a été précédemment cliquée
            { if (param==10) stock2+='.'; else stock2+=param; // est_ce la virgule??
              affiche(stock2);
              if (plu) valor = (stock*1)+(stock2*1);
              if (moi) valor = (stock*1)-(stock2*1);
              if (mul) valor = (stock*1)*(stock2*1);
              if (div) valor = (stock*1)/(stock2*1);
            } else
                 { if (param==10) stock+='.';else stock+=param; // est_ce la virgule ??
                   affiche(stock);}
   }
if (param==13) {raz_flags() ; plu=true; if (stock2 != "") inter();ope=true;} // touche +
if (param==14) {raz_flags() ; moi=true; if (stock2 != "") inter();ope=true;} // touche -
if (param==15) {raz_flags() ; mul=true; if (stock2 != "") inter();ope=true;} // touche *
if (param==16) {raz_flags() ; div=true; if (stock2 != "") inter();ope=true;} // touche /
if ( param==17) {inter() ; flag_egal=true;} //touche =
}
function raz_flags()    // RAZ de tous les flags..
{ plu=false;moi=false;mul=false;div=false;flag_egal=false;}
function inter()
// pour fournir résultat du calcul en cliquant sur les touches d'opérations...
{affiche(valor); stock=valor;stock2="";}
//-->
</script>
<body bgcolor="#c0c0c0" >
<form name="calc">
<table width=10% border=5 bgcolor="#808080" >
<tr><td>
<table width=10% bgcolor="#808080" border cellspadding=0>
<tr>
<td colspan=4 align=center><font size=-1><b><i>Calculette</I></B></font><font size=-1 color="yellow" >
       <I>   JavaScript</I></FONT><font size=-2 color="black">  mB</font>
</td>
</tr>
<tr>
<td colspan=4 align=center >
   <input type=text name="ecran" size=18 maxlength=25>
</td>
</TR>
<tr>
<td width=5% >
   <input type="button" value="   7   " onClick="touche(7)">
</td>
<td width=5%>
   <input type="button" value= "   8   " onClick="touche(8)">
</td>
<td width=5%>
   <input type="button" value="   9   " onClick="touche(9)">
</td>
<td width=5% align=right >
   <input type="button" name="/" value="   /   " onClick="touche(16)">
</TD>
</tr>
<tr>
<td width=5%>
     <input type="button" value="   4   " onclick="touche(4)">
</td>
<td width=5% align=center >
     <input type="button" value="   5   " onclick="touche(5)">
</td>
<td width=5% align=center >
    <input type="button" value="   6   " onclick="touche(6)">
</td>
<td width=5% align=right >
    <input type="button" name="*" value="   *   " onclick="touche(15)">
</td>
</tr>
<tr>
<td width=5%>
    <input type="button" value="   1   " onclick="touche(1)">
</td>
<td width=5% align=center >
    <input type="button" value="   2   " onclick="touche(2)">
</td>
<td width=5% align=center >
    <input type="button" value="   3   " onclick="touche(3)">
</td>
<td width=5% align=right >
   <input type="button" name="-" value="   -   " onclick="touche(14)">
</td>
</TR>
<tr>
<td width=5%>
<input type="button" value="   0   " onclick="touche(0)">
</td>
<td width=5% align=center >
<input type="button" name="." value="    ,   " onclick="touche(10)">
</td>
<td width=5% align="center" colspan=2>
   <input type="button" name="+" value="       +        " onclick="touche(13)">
</td>
</tr>
<tr>
<td colspan=2>
<input type="button" name="C" value="       C        " onclick="touche(12)">
</td>
<td colspan=2 align="center">
<input type="button" value="       =        "         onclick="touche(17)">
</td>
</tr>
</table>
</td></TR>
</table>
</form>
</body>
</html>

[Retour au Menu ]