/image%2F3780932%2F20191018%2Fob_c44c32_logokore.png)
Développer une Calculatrice Scientifique avec JavaScript
1- Création d'un fichier html pour ajouter le code : le fichier aura comme nom fichierhtml.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>calculatrice</title>
<script src="fichierjavascript.js"></script>
<style>
#kore {
width: 120px;
height: 350px;
border: 7px groove rgb(43, 255, 0);
margin: auto;
padding-left: 1px;
padding-bottom: 4px;
background-color: aqua;
}
#kore td {
height: 1px;
background-color: #f80d0d
}
#kore1 {
width: 100%;
text-align: center;
height: 30px;
border-radius: 20px;
border-color: blue;
background-color: rgb(140, 170, 162);
color: rgb(0, 0, 0);
font-size: 10px
}
#button {
width: 7%;
height: 7%;
}
</style>
</head>
<body onload="alert('Merci de visiter mon site, cliquer sur OK et vous aurez toutes les fonctions mathematiques')">
<center>
<h3 style="background-color: #d0d300;color: rgb(12, 12, 12);">Bienvenue chers amis, Commencer votre travail, déjà vous êtes sur la page <br>et en plus vous aurez toutes les fonctions mathématiques</h3>
</center>
<table id="kore">
<tr>
<td colspan="5">
<input type="text" value="" id="kore1" placeholder="Faites votre calcul avec la machine de Kore" />
</td>
</tr>
<tr>
<td id="button">
<input type="button" id="tchad1" value="MC" onclick="tchad1(this)" />
</td>
<td id="button">
<input type="button" id="tchad2" value="MR" onclick="tchad1(this)" />
</td>
<td id="button">
<input type="button" id="tchad3" value="MS" onclick="tchad1(this)" />
</td>
<td id="button">
<input type="button" id="tchad4" value="M+" onclick="tchad1(this)" />
</td>
<td id="button">
<input type="button" id="tchad5" value="M-" onclick="tchad1(this)" />
</td>
</tr>
<tr>
<td id="button">
<input type="button" id="tchad6" value="←" onclick="cleanonebyone();" />
</td>
<td id="button">
<input type="button" id="tchad7" value="CE" onclick="effacer1()" />
</td>
<td id="button">
<input type="button" id="tchad8" value="C" onclick="effacer()" />
</td>
<td id="buttton">
<input type="button" id="tchad9" value="±" onclick="tchad2();" />
</td>
<td id="button">
<input type="button" id="tchad10" value="√" onclick="racine()" ; />
</td>
</tr>
<tr>
<td id="button">
<input type="button" id="tchad101" value="(" onclick="pare()" ; />
</td>
<td id="button">
<input type="button" id="tchad102" value=")" onclick="pare()" ; />
</td>
<td id="buttton ">
<input type="button" id="tchad260" value="ˆ" onclick="puissance(); " />
</td>
<td id="button">
<input type="button" id="tchad104" value="Log" onclick="log()" ; />
</td>
<td id="buttton ">
<input type="button" id="tchad261" value="Exp" onclick="expo(); " />
</td>
</tr>
<tr>
<td id="button">
<input type="button" id="tchad11" value="7" onclick="tchad1(this);" />
</td>
<td id="button">
<input type="button" id="tchad12" value="8" onclick="tchad1(this);" />
</td>
<td id="button">
<input type="button" id="tchad13" value="9" onclick="tchad1(this);" />
</td>
<td id="buttton">
<input type="button" id="tchad14" value="/" onclick="tchad1(this);" />
</td>
<td id="button">
<input type="button" id="tchad15" value="%" onclick="pourcentage(); " />
</td>
</tr>
<tr>
<td id="buttton ">
<input type="button" id="tchad16 " value="4" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad17" value="5" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad18" value="6" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad19" value="*" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad20" value="1/x" onclick="inverse(this); " />
</td>
</tr>
<tr>
<td id="buttton ">
<input type="button" id="tchad21 " value="1" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad22 " value="2" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad23 " value="3" onclick="tchad1(this); " />
</td>
<td id="button ">
<input type="button" id="tchad24 " value="-" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad25" value="=" onclick=" resultat(); " />
</td>
</tr>
<tr>
<td id="buttton ">
<input type="button" id="tchad26" value="0" onclick="tchad1(this); " />
</td>
<td id="buttton ">
<input type="button" id="tchad27" value="∏" onclick="pi(this);" />
</td>
<td id="buttton ">
<input type="button" id="tchad28" value="," onclick="decimal( '.'); " />
</td>
<td id="button ">
<input type="button" id="tchad29" value="+" onclick="tchad1(this); " />
</td>
<td id="button ">
<input type="button" id="tchad30" value="cls" onclick="fermer() ">
</td>
</tr>
</table>
</body>
</html>
2- Création du fichier javascript, on va le nommer fichierjavascript.js
function tchad1(x) {
var ko = x.value;
var ecran = document.getElementById("kore1");
ecran.value += ko;
}
function resultat() {
ecran = document.getElementById("kore1");
ecran.value = eval(ecran.value);
}
function effacer() {
ecran = document.getElementById("kore1");
ecran.value = "";
}
function fermer() {
window.close();
}
function racine() {
ecran = document.getElementById("kore1");
var resultat = Math.sqrt(ecran.value);
ecran.value = resultat;
}
function decimal(x) {
ecran = document.getElementById("kore1");
ecran.value += x;
}
function effacer1() {
ecran = document.getElementById("kore1");
ecran.value = 0;
}
function cleanonebyone() {
var ecran = document.getElementById("kore1").value;
document.getElementById("kore1").value = ecran.substring(0, ecran.length - 1);
}
function puissance() {
ecran = document.getElementById("kore1");
ecran.value = ecran.value * ecran.value;
}
function pourcentage() {
var pourcentageOui = (nbOui / (nbNon + nbOui)) * 100;
var pourcentageNon = 100 - pourcentageOui
var ecran = document.getElementById("kore1");
}
function log() {
ecran = document.getElementById("kore1");
var resultat = Math.log(ecran.value);
ecran.value = resultat;
}
function expo() {
ecran = document.getElementById("kore1");
var resultat = Math.exp(ecran.value);
ecran.value = resultat;
}
function pi() {
ecran = document.getElementById("kore1");
var resultat = Math.PI += " ";
ecran.value += resultat;
}
function inverse() {
var ecran = document.getElementById("kore1");
ecran.value = 1 / (ecran.value);
}
3 - Lancer le code dans le navigateur en mettant le chemin absolu du fichier html et le tester
/image%2F3780932%2F20201020%2Fob_ed9f1a_capture-du-2020-10-20-15-41-21.png)
Après avoir lancé, une alerte nous a affiché. Cette alerte veut dire que si tu es vraiment d'accord de visiter la page clique sur " OK "
a) - Après avoir cliqué sur OK, on aura cette fenêtre
/image%2F3780932%2F20201020%2Fob_9715ca_capture-du-2020-10-20-15-57-51.png)
b) - Un petit calcul avec la calculatrice
/image%2F3780932%2F20201020%2Fob_52a4bf_capture-du-2020-10-20-15-43-41.png)
on a fait la soustraction de 2020-2019, on va voir le résultat qui va nous donné.
c) - Le résultat de la soustraction
/image%2F3780932%2F20201020%2Fob_449d77_capture-du-2020-10-20-15-43-58.png)
On constate que le résultat affiché est celui qui est demandé à afficher.
Nous allons revenir pour parler d'un nouvel tuto.
N’hésiter pas à aimer👍, publier, commenter✍ et abonner notre page
Partager cet article
/image%2F3780932%2F20201020%2Fob_077654_pengertian-apache2-dan-konfigurasi.png)
/image%2F3780932%2F20201017%2Fob_77d300_5.png)
/image%2F3780932%2F20201016%2Fob_882113_image-3780932-20201015-ob-5afb37-unix.png)
/image%2F3780932%2F20200914%2Fob_a09262_elasticsearch-ldap-authentication-2.jpg)
Je suis Mahamat Koré, étudiant en Licence en Informatique spécialité Réseaux et Télécoms à l’Ecole Centrale des Logiciels Libres et de Télécommunications(EC2LT) de Dakar.
Abonnez-vous pour être averti des nouveaux articles publiés.
Commenter cet article