Une calculatrice scientifique vous est présentée dans cette démonstration de la puissance du langage Javascript®. Cet exemple est relativement long et complexe. Cependant les principaux enseignements à retenir ici n'est pas la programmation à proprement parler, mais comment insérer un tel script dans sa page.
Dans un premier temps, il est préférable de placer le script entre les balises <SCRIPT> et dans l'en-tête du document HTML, soit entre les balises <HEAD>. Une fois le programme correctement placé, il ne suffit plus que déclarer la fonction à l'intérieur du corps du document, c'est-à-dire entre les balises <BODY> par l'intermédiaire des attributs spécifiques comme ONLOAD dans cet exemple.
<html>
<head>
<style type="text/css">
/* Cette feuille de style définit la police utilisée pour les boutons */
input
{
font-size: 10pt;
font-family: fixe,courier;
font-weight: bold;
margin-left: 0pt;
color: #000000;
}
</style>
<script language="javascript"><!--
// Définition des valeurs de départ des variables
var NDIGITS = 16;
var STACKSIZE = 12;
var value = 0;
var level = 0;
var entered = true;
var decimal = 0;
var fixe = 0;
var exponent = false;
// L'ouverture d'une parenthèses suppose une pile,
// appelée Stack, dans laquelle les éléments individuels sont enregistrés.
// Ces éléments sont appelés Items.
function stackItem()
{
this.value = 0;
this.op = "";
}
// Cette fonction constructeur sert de modèle pour la pile.
function array(length)
{
this[0] = 0;
for (i=0; i<length; ++i)
{
this[i] = 0;
this[i] = new stackItem();
}
this.length = length;
}
stack = new array(STACKSIZE);
// Ajout de nouveaux éléments à la pile
function pousser(value,op,prec)
{
if (level==STACKSIZE)
return false;
for (i=level;i>0; --i)
{
stack[i].value = stack[i-1].value;
stack[i].op = stack[i-1].op;
stack[i].prec = stack[i-1].prec;
}
stack[0].value = value;
stack[0].op = op;
stack[0].prec = prec;
++level;
return true;
}
// Lire le dernier élément de la pile
function entrer()
{
if (level==0)
return false;
for (i=0;i<level; ++i)
{
stack[i].value = stack[i+1].value;
stack[i].op = stack[i+1].op;
stack[i].prec = stack[i+1].prec;
}
--level;
return true;
}
// Mise en forme de la valeur à afficher
function format(value)
{
// valStr contient la valeur actuelle de value,
// Mais subit au préalable une conversion
// en chaîne de caractères.
var valStr = "" + value;
// Si value contient la valeur spéciale "Not a Number"
// (cad si value n'est pas un nombre valide), l'affichage
// ne peut être formaté
if (valStr.indexOf("N")>=0 ||
(value == 2*value && value == 1+value))
return "Error ";
// Lors de la conversion de value en chaîne de caractères, l'objet Number
// sépare les valeurs normales des puissances de 10par un "e".
// Dans notre affichage, nous utilisons exclusivement des espaces simples.
var i = valStr.indexOf("e")
if (i>=0)
{
// Dans valStr un "e" a été trouvé. L'exposant
// (la partie derrière "e" est enregistré dans expStr et
// supprimé dans valStr.
var expStr = valStr.substring(i+1,valStr.length);
if (i>NDIGITS-5) i=NDIGITS-5;
valStr = valStr.substring(0,i);
if (valStr.indexOf(".")<0) valStr += ".";
// L'exposant est à n ouveau ajouté derrière la valeur,
// séparé par un espace.
valStr += " " + expStr;
} else {
// value ne contient pas de "e" et donc pas d'exposant
var valNeg = false;
if (value < 0) { value = -value; valNeg = true; }
// Le logarithme, indique le nombre de position de value.
var expval = Math.log(value)*Math.LOG10E;
if (value == 0) {
expval = 0;
// Si value ne tient plus dans l'affichage, la partie arrière
// et coupée et remplacée par une puissance de 10
} else if (expval > NDIGITS-5) {
expval = Math.floor(expval);
value /= Math.pow(10, expval);
} else if (-expval > NDIGITS-5) {
expval = Math.ceil(expval);
value /= Math.pow(10, expval);
} else {
expval = 0;
}
var valInt = Math.floor(value);
var valFrac = value - valInt;
var prec = NDIGITS - (""+valInt).length - 1;
if (prec < 0) return "Error"
if (! entered && fixe>0)
prec = fixe;
var mult = " 1000000000000000000".substring(1,prec+2);
var frac = Math.floor(valFrac * mult + 0.5);
valInt = Math.floor(Math.floor(value * mult + .5) / mult);
if (valNeg)
valStr = "-" + valInt;
else
valStr = "" + valInt;
var fracStr = "00000000000000"+frac;
fracStr =
fracStr.substring(fracStr.length-prec, fracStr.length);
i = fracStr.length-1;
if (entered || fixe==0)
{
while (i>=0 && fracStr.charAt(i)=="0")
--i;
fracStr = fracStr.substring(0,i+1);
}
if (i>=0) valStr += "." + fracStr;
if (expval != 0) {
var expStr = "" + expval;
valStr += " " + expStr;
}
}
return valStr;
}
// Cette fonction écrit la valeur actuelle dans l'affichage
function refresh()
{
var display = format(value);
// Si la calculatrice est paramétrée sur la saisie en exposant,
// cet exposant doit être affiché
if (exponent)
{
if (expval<0)
display += " " + expval;
else
display += " +" + expval;
}
// Si la valeur actuelle n'a pas de décimale et si
// aucune erreur n'est survenue, un pojnt doit être ajouté
if (display.indexOf(".")<0 && display != "Error ")
{
if (entered || decimal>0)
display += '.';
else
display += ' ';
}
// La partie gauche de l'affichage est remplie avec des espaces
display = " " + display;
display =
display.substring(display.length-NDIGITS-1,display.length);
// La valeur est écrite dans l'affichage
document.calculator.result.value = display;
}
// La toche C efface la valeur affichée
function clearDisp()
{
exponent = false;
value = 0;
enter();
refresh();
}
// AC place le nombre de parenthèses sur 0
function clearAll()
{
level = 0;
clearDisp();
}
// A cet endroit, les calculs effectifs
// sont réalisés
function evalx()
{
if (level==0)
return false;
op = stack[0].op;
sval = stack[0].value;
if (op == "+")
value = sval + value;
else if (op == '-')
value = sval - value;
else if (op == '*')
value = sval * value;
else if (op == '/')
value = sval / value;
else if (op == 'pow')
value = Math.pow(sval,value);
entrer();
if (op=='(')
return false;
return true;
}
// openp ouvre une parenthèse
function openp()
{
enter();
if (!pousser(0,'(',0))
value = "NAN";
refresh();
}
// closep ferme la parenthèse
function closep()
{
enter();
while (evalx()) ;
refresh();
}
// Cette fonction est exécutée, si un des boutons d'opération
// est activé, par exemple "+".
function operator(op)
{
enter();
if (op=='+' || op=='-')
prec = 1;
else if (op=='*' || op=='/')
prec = 2;
else if (op=="pow")
prec = 3;
if (level>0 && prec <= stack[0].prec)
evalx();
if (!pousser(value,op,prec))
value = "NAN";
refresh();
}
// Lorsque l'utilisateur a terminé la saisie d'un nombre,
// quelques variables sont à modifier.
// Si une puissance de 10 est spécifiée, la valeur
// actuelle doit être calculée dans value
function enter()
{
if (exponent)
value = value * Math.exp(expval * Math.LN10);
entered = true;
exponent = false;
decimal = 0;
fixe = 0;
}
// Si l'utilisateur appuie sur la touche Entrée (appelée aussi "=")
// le calcul est effectué et la valeur est affichée
function equals()
{
enter()
while (level>0)
evalx();
refresh();
}
// digit() est appelé, si un chiffre est activé.
function digit(n)
{
if (entered)
{
value = 0;
digits = 0;
entered = false;
}
if (n==0 && digits==0)
{
refresh();
return;
}
if (exponent)
{
if (expval<0)
n = -n;
if (digits < 3)
{
expval = expval * 10 + n;
++digits;
refresh();
}
return;
}
if (value<0)
n = -n;
if (digits < NDIGITS-1)
{
++digits;
if (decimal>0)
{
decimal = decimal * 10;
value = value + (n/decimal);
++fixe;
}
else
value = value * 10 + n;
}
refresh();
}
// bksp (en anglais backspace) signifie une action sur la touche "<-"
// La dernière saisie doit être effacée.
function bksp()
{
if (entered)
{
refresh();
return;
}
if (digits==0)
{
refresh();
return;
}
if (exponent)
{
if (expval<0)
expval = -Math.floor(-expval/10);
else
expval = Math.floor(expval/10);
--digits;
refresh();
return;
}
if (decimal>1)
{
if (value<0)
value = -Math.floor(-value*decimal/10);
else
value = Math.floor(value*decimal/10);
decimal = decimal / 10;
value = value/decimal;
--fixe;
if (decimal == 1)
decimal = 0;
}
else
{
if (value<0)
value = -Math.floor(-value/10);
else
value = Math.floor(value/10);
decimal = 0;
}
--digits;
refresh();
}
// La touche +/- inverse la valeur ou
// l'exposant (plus devient moins et vice versa).
function sign()
{
if (exponent)
expval = -expval;
else
value = -value;
refresh();
}
// period (le point en anglais) est appelé, si l'utilisateur
// souhaite spécifier une valeur décimale.
function period()
{
if (entered)
{
value = 0;
digits = 1;
}
entered = false;
if (decimal == 0)
decimal = 1;
refresh();
}
// L'activation de la touche "x * 10^y" paramète la calculatrice
// sur la saisie en exposant.
function exp()
{
if (entered || exponent)
return;
exponent = true;
expval = 0;
digits = 0;
decimal = 0;
refresh();
}
// func() ffectue les fonctions mathématiques telles que sin, cos, tan
// etc. L'argument est la fonction à exécuter.
function func(f)
{
enter();
if (f=="1/x")
{
value = 1/value;
}
else if (f=='n!')
{
if (value<0 || value>200 || value != Math.round(value))
value = "NAN";
else
{
var n = 1;
var i;
for (i=1;i<=value;++i)
n *= i;
value = n;
}
}
else
{
// La plupart des fonction est livrée par l'objet Math
// de JavaScript.
if (f=="sin")
value = Math.sin(value/180 * Math.PI);
else if (f=="cos")
value = Math.cos(value/180 * Math.PI);
else if (f=="tan")
value = Math.tan(value/180 * Math.PI);
else if (f=="log")
value = Math.log(value)/Math.LN10;
else if (f=="log2")
value = Math.log(value)/Math.LN2;
else if (f=="ln")
value = Math.log(value);
else if (f=="sqrt")
value = Math.sqrt(value);
else if (f=="pi")
value = Math.PI;
else if (f=="asin")
value = Math.asin(value)*180/Math.PI;
else if (f=="acos")
value = Math.acos(value)*180/Math.PI;
else if (f=="atan")
value = Math.atan(value)*180/Math.PI;
else if (f=="alog")
value = Math.exp(value * Math.LN10);
else if (f=="alog2")
value = Math.exp(value * Math.LN2);
else if (f=="exp")
value = Math.exp(value);
else if (f=="sqr")
value = value*value;
else if (f=="e")
value = Math.E;
}
// Affichage le résultat du calcul
refresh();
}
// --></script>
</head>
<body onload="refresh()">
<div align="center">
<form name="calculator">
<table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#000000">
<table border="0" cellpadding="2" cellspacing="0" bgcolor="#DDDDDD" summary="">
<tr>
<td colspan="4"><input type="text" size="18" name="result" onfocus="refresh()"></td>
<td><input type="button" value="<- " onclick="bksp()"></td>
<td><input type="button" value="( " onclick="openp()">
<input type="button" value=")" onclick="closep()"></td>
<td><input type="button" value="C " onclick="clearDisp()">
<input type="button" value="AC " onclick="clearAll()"></td>
</tr>
<tr>
<td><input type="button" value="7 " onclick="digit(7)"></td>
<td><input type="button" value="8 " onclick="digit(8)"></td>
<td><input type="button" value="9 " onclick="digit(9)"></td>
<td><input type="button" value="/ " onclick="operator('/')"></td>
<td><input type="button" value="log " onclick="func('log')"></td>
<td><input type="button" value="sin " onclick="func('sin')"></td>
<td><input type="button" value="arcsin " onclick="func('asin')"></td>
</tr>
<tr>
<td><input type="button" value="4 " onclick="digit(4)"></td>
<td><input type="button" value="5 " onclick="digit(5)"></td>
<td><input type="button" value="6 " onclick="digit(6)"></td>
<td><input type="button" value="* " onclick="operator('*')"></td>
<td><input type="button" value="10^x " onclick="func('alog')"></td>
<td><input type="button" value="cos " onclick="func('cos')"></td>
<td><input type="button" value="arccos " onclick="func('acos')"></td>
</tr>
<tr>
<td><input type="button" value="1 " onclick="digit(1)"></td>
<td><input type="button" value="2 " onclick="digit(2)"></td>
<td><input type="button" value="3 " onclick="digit(3)"></td>
<td><input type="button" value="- " onclick="operator('-')"></td>
<td><input type="button" value="ln " onclick="func('ln')"></td>
<td><input type="button" value="tan " onclick="func('tan')"></td>
<td><input type="button" value="arctan " onclick="func('atan')"></td>
</tr>
<tr>
<td><input type="button" value="0 " onclick="digit(0)"></td>
<td><input type="button" value=". " onclick="period()"></td>
<td><input type="button" value="± " onclick="sign()"></td>
<td><input type="button" value="+ " onclick="operator('+')"></td>
<td><input type="button" value="e^x " onclick="func('exp')"></td>
<td><input type="button" value="x^2 " onclick="func('sqr')"></td>
<td><input type="button" value="Racine "
onclick="func('sqrt')"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Entrée "
onclick="equals()"></td>
<td><input type="button" value="pi " onclick="func('pi')"></td>
<td><input type="button" value="1/x" onclick="func('1/x')"></td>
<td><input type="button" value="x^y " onclick="operator('pow')"></td>
<td><input type="button" value="x! " onclick="func('n!')"></td>
<td><input type="button" value="x * 10^y" onclick="exp()"></td>
</tr>
</table>
</td></tr></table>
</form>
</div>
</body>
</html> |