Une calculatrice en JavaSript
Intéressons nous au langage de programmation JavaScript ( js ).
Dédicace à mon incroyable prof de programmation Mr Kachallah Abagana . Une personne à laquelle toutes les machines obéissent ... Merci altesse !
Notre TP porte sur une calculatrice. C'était d'ailleurs mon sujet d'examen dans cette matière !
Fichier calculatrice.html
<!DOCTYPE html>
<html>
<head>
<title>Mon super projet</title>
<link rel="stylesheet" type="text/css" href="calculatrice.css">
<script src="calculatrice.js"></script>
<meta charset="utf-8">
</head>
<body>
<center>
<textarea id="ecran" type="text" value=""></textarea>
<table>
<tr>
<td><button onclick="();" id="">MC</button></td>
<td><button onclick="();" id="">MR</button></td>
<td><button onclick="();" id="">MS</button></td>
<td><button onclick="();" id="">M+</button></td>
<td><button onclick="quoi();" id="" type="reset">CE</button></td>
</tr>
<tr>
<td><button onclick="unaun();" id="bory">←</button></td>
<td><button onclick="expo();" value="Exp" id="ce">Exp</button></td>
<td><button onclick="loga();" value="log" id="ce">log</button></td>
<td><button onclick="neperien();" value="ln" id="">ln</button></td>
<td><button onclick="racine();" value="√" id="sqrt"> √x </button></td>
</tr>
<tr class="num">
<td><button onclick="getvaleur(this);" value="7" id="sept">7</button></td>
<td><button onclick="getvaleur(this);" value="8" id="huit">8</button></td>
<td><button onclick="getvaleur(this);" value="9" id="neuf">9</button></td>
<td><button onclick="getvaleur(this);" value="/" id="division">:</button></td>
<td><button onclick="" ondblclick="" value="%" id="pourcent">%</button></td>
</tr>
<tr>
<td><button onclick="getvaleur(this);" value="4" id="quatre">4</button></td>
<td><button onclick="getvaleur(this);" value="5" id="cinq">5</button></td>
<td><button onclick="getvaleur(this);" value="6" id="six">6</button></td>
<td><button onclick="getvaleur(this);" value="*" id="multiplication">X</button></td>
<td><button onclick="inverse();" id="inverse">1/x</button></td>
</tr>
<tr>
<td><button onclick="getvaleur(this);" value="1" id="un">1</button></td>
<td><button onclick="getvaleur(this);" value="2" id="deux">2</button></td>
<td><button onclick="getvaleur(this);" value="3" id="trois">3</button></td>
<td><button onclick="getvaleur(this);" value="-" id="moins">-</button></td>
<td><button onclick="carre();" value="" id="carre">x²</button></td>
</tr>
<tr>
<td id="zero"><button onclick="getvaleur(this);" value="0" id="zero">0</button></td>
<td><button onclick="getvaleur(this);" value="." id="virgule">.</button></td>
<td><button onclick="effacer();" value="" id="effacer">C</button></td>
<td><button onclick="getvaleur(this);" value="+" id="plus">+</button></td>
<td><button onclick="calcul();" id="go">=</button></td>
</tr>
</table><br><br>
</center>
</body>
</html>
Fichier calculatrice.js
function getvaleur(z) {
var contenu = z.value;
var ecran = document.getElementById("ecran");
ecran.value += contenu;
}
function effacer() {
var ecran = document.getElementById("ecran");
ecran.value = " ";
}
function inverse() {
var ecran = document.getElementById("ecran");
var a = 1/ecran.value;
ecran.value = a;
}
function racine() {
var ecran = document.getElementById("ecran");
ecran.value = Math.sqrt(ecran.value);
}
function carre() {
var ecran = document.getElementById("ecran");
ecran.value = ecran.value*ecran.value;
}
function calcul() {
var ecran = document.getElementById("ecran");
ecran.value = eval(ecran.value);
}
function pourcentage() {
var ecran = document.getElementById("ecran");
var a = ecran.value/100;
ecran.value = a;
}
function loga() {
var ecran = document.getElementById("ecran");
ecran.value = Math.log(ecran.value);
}
function neperien() {
var ecran = document.getElementById("ecran");
ecran.value = Math.ln(ecran.value);
}
function expo() {
var ecran = document.getElementById("ecran");
ecran.value = Math.exp(ecran.value);
}
function emploi() {
alert("Pour utiliser les fonctions scientifiques : √x , log , Exp , ln ; il faut tout d'abord saisir le chiffre avant de cliquer sur la fonction souhaitée !");
}
function unaun() {
var ecran = document.getElementById("ecran").value;
document.getElementById("ecran").value = ecran.substring(0, ecran.length - 1);
}
function quoi() {
var ecran = document.getElementById("ecran");
ecran.value = 0;
}
Fichier calculatrice.css
table tr td {
border : 2px solid black;
size: 10%;
width: -2%;
}
#ecran {
border: 2px solid black;
width: 247px;
font-family: Courier New, monospace;
font-weight: 600;
height: 100%;
background-color:pink;
color: black;
text-align: right;
font-size: ;
size: 100%;
}
table,tr {
border: 2px solid pink;
height: 25px;
position: center;
}
table{
width: 18%;
height: 40px;
}
.ce {
width: 3px;
height: 15%;
}
td {
background-color: white;
}
button {
font-weight: bold;
width: 43px;
height: 35px;
}
.class {
width: 75px;
height: 24px;
td {
padding-right: 2px;
padding-top: 1px
}
#plus,#division,#multiplication,#moins {
background-color: black;
color :white;
}
.cal {
width: 140px;
}
Test de fonctionnement
Résultat
Trop stylé... n'est-ce pas ?