Comment faire une calculatrice scientifique avec javascript ?

 

par meltech1 |

     

On a vu dans un précédent article qu'on pouvait faire une calculatrice simple avec comme fonction plus, moins, multiplier, et diviser. Dans cet article nous allons faire une calculatrice scientifique plus évoluée car elles contient des opérateurs arithmétiques comme sin, cos, arcsin, arccos, tangente, arctan, ln, exp,... Bref toutes les opérations scientifiques qu'on peut demander.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel Bloc Notes

Étapes de réalisation

1.

Commencez par ouvrir votre page Internet avec Bloc Notes pour en obtenir le code source. C'est dans ce code source qu'il y a le programme de votre page Internet. Ainsi veuillez chercher la balise <head>.

2.

Dans la balise <head> veuillez insérer le script suivant :
<STYLE TYPE="text/css">
BODY {
font-size: 12px;
background-color: #00E372;
font-family: Verdana;
}
.tds {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
width: 32px;
font-size: 12px;
text-align: center;
vertical-align: middle;
border: 2px solid #00E372;
}
.touches {
width: 40px;
height: 24px;
font-family: Verdana;
font-size: 15px;
background-color: #006400;
color: #FFFFFF;
font-weight: bold;
}
.bfoncspe {
width: 39px;
height: 23px;
font-family: Verdana;
font-size: 12px;
background-color: #8E8EFF;
color: #FFFFFF;
font-weight: bold;
}
.screen {
font-size: 14px;
font-family: Verdana;
border: 1px solid #000000;
width: 213px;
height: 60px;
overflow: hidden;
background-color: #D2E270;
}
.tour {
border: 2px solid #000000;
}
</STYLE>
<script type="text/javascript">
window.moveTo(0,0)
function nofoc() {
document.caltos.screen.blur();
setTimeout("nofoc()", 0);
}
function calcul() {
document.caltos.screen.value=eval(document.caltos.screen.value);
document.caltos.hidans.value=document.caltos.screen.value;
}
function AddText(but) {
document.caltos.screen.value=document.caltos.screen.value+but;
}
function ans() {
document.caltos.screen.value=document.caltos.screen.value+document.caltos.hidans.value;
}
function backspace() {
document.caltos.screen.value=document.caltos.screen.value.substring(0,document.caltos.screen.value.length-1);
}
function carre() {
document.caltos.screen.value=(document.caltos.screen.value * document.caltos.screen.value);
}
function cube() {
document.caltos.screen.value=(document.caltos.screen.value * document.caltos.screen.value * document.caltos.screen.value);
}
function memoryin() {
document.caltos.memory.value=document.caltos.screen.value;
}
function memoryout() {
document.caltos.screen.value=document.caltos.screen.value+document.caltos.memory.value;
}
function powa() {
pow1 = prompt('Tapez le nombre à traiter (x).','');
pow2 = prompt('Tapez la puissance (y).','');
document.caltos.screen.value='Math.pow('+pow1+','+pow2+')';
}
</SCRIPT>

3.

Entre les <> de la balise <body> veuillez insérer le script suivant :
<BODY onLoad="nofoc();">

4.

Dans la balise <body> veuillez insérer le script suivant :
<TABLE ALIGN="center" CLASS="tour">
<TD>
<FONT STYLE="color:#006400;font-size:12px;font-family:Arial;">CALCULATRICE SCIENTIFIQUE</FONT>
<FONT STYLE="color:#AA0000;font-size:12px;font-family:Times;">Comment fait-on?</FONT>
<HR STYLE="color:#006400;width:100%;" SIZE="1">
<CENTER>
<FORM NAME="caltos">
<INPUT TYPE="hidden" NAME="memory" VALUE="0">
<INPUT TYPE="hidden" NAME="hidans" VALUE=""><TEXTAREA NAME="screen" CLASS="screen">
><BR><BR>

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD CLASS="tds"><BUTTON NAME="Math.asin(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">sin<sup>-1</BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.acos(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">cos<sup>-1</BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.atan(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">tan<sup>-1</BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.exp(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">e<sup>x </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.log(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">ln </BUTTON></TD>
</TR>
<TR>
<TD CLASS="tds"><BUTTON NAME="Math.sin(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">sin </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.cos(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">cos </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.tan(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">tan </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="3.141592654" CLASS="bfoncspe" onMouseDown="AddText(this.name);">PI </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="bfoncspe" onMouseDown="percento();">% </BUTTON></TD>
</TR>
<TR>
<TD CLASS="tds"><BUTTON NAME="" CLASS="bfoncspe" onMouseDown="cube();">x<sup>3</BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="bfoncspe" onMouseDown="carre();">x<sup>2</sup> </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.sqrt(" CLASS="bfoncspe" onMouseDown="AddText(this.name);" STYLE="font-family:symbol;font-size:16px;">Ö </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.sqrt2(" CLASS="bfoncspe" onMouseDown="AddText(this.name);" STYLE="font-family:symbol;font-size:16px;">2Ö </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="bfoncspe" onMouseDown="powa();">x^y </BUTTON></TD>
</TR>
<TR>
<TD CLASS="tds"><BUTTON NAME="" CLASS="bfoncspe" onMouseDown="memoryin();">M+ </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="bfoncspe" onMouseDown="memoryout();">M </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="(" CLASS="bfoncspe" onMouseDown="AddText(this.name);">( </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME=")" CLASS="bfoncspe" onMouseDown="AddText(this.name);">) </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="Math.random()" CLASS="bfoncspe" onMouseDown="AddText(this.name);">Ran# </BUTTON></TD>
</TR>
<TR>
<TD CLASS="tds"> </TD>
</TR>
<TR>
<TD CLASS="tds"><BUTTON NAME="7" CLASS="touches" onMouseDown="AddText(this.name);">7 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="8" CLASS="touches" onMouseDown="AddText(this.name);">8 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="9" CLASS="touches" onMouseDown="AddText(this.name);">9 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="touches" onMouseDown="backspace();" STYLE="background-color:#AA0000;font-size:12px">EFF </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="touches" onMouseDown="document.caltos.screen.value='';" STYLE="background-color:#AA0000;">AC </BUTTON></TD>
</TR>
<TR>
<TD CLASS="tds"><BUTTON NAME="4" CLASS="touches" onMouseDown="AddText(this.name);">4 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="5" CLASS="touches" onMouseDown="AddText(this.name);">5 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="6" CLASS="touches" onMouseDown="AddText(this.name);">6 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="*" CLASS="touches" onMouseDown="AddText(this.name)">× </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="/" CLASS="touches" onMouseDown="AddText(this.name)">÷ </BUTTON></TD>
</TR>
<TR>
<TD CLASS="tds"><BUTTON NAME="1" CLASS="touches" onMouseDown="AddText(this.name);">1 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="2" CLASS="touches" onMouseDown="AddText(this.name);">2 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="3" CLASS="touches" onMouseDown="AddText(this.name);">3 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="+" CLASS="touches" onMouseDown="AddText(this.name)">+ </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="-" CLASS="touches" onMouseDown="AddText(this.name)">- </BUTTON></TD>
</TR>
<TR>
<TD CLASS="tds"><BUTTON NAME="0" CLASS="touches" onMouseDown="AddText(this.name);">0 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="." CLASS="touches" onMouseDown="AddText(this.name)">. </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="*Math.pow(10," CLASS="touches" onMouseDown="AddText(this.name)" STYLE="font-size:11px">×10 </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="touches" onMouseDown="ans()" STYLE="font-size:12px">Ans </BUTTON></TD>
<TD CLASS="tds"><BUTTON NAME="" CLASS="touches" onMouseDown="calcul()" STYLE="font-size:12px">EXE </BUTTON></TD>
</TR>
</TABLE>

</TD>
</TABLE>
Veuillez terminer par ajouter </form> dans le programme.

Astuces et mises en garde

Astuce(s) :

Cette calculatrice scientifique peut vous servir par exemple pour faire des calculs précis.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on