Easy-Micro


LANGAGE Script JavaScript
Script de calcul

Script JavaScript de calcul


Exemple de calcul avec javascript

Calcul :


Copiez/coller ce code entre les balises <head> et </head> de votre document:

<script>
/* -- www.easy-micro.org -- */
function calcul() {
// "parseInt" convertir les valeurs en nombre
var expr1 = parseInt(window.document.monformulaire.expr1.value);
var expr2 = parseInt(window.document.monformulaire.expr2.value);
var ope = window.document.monformulaire.ope.value;
// eval() exécute un script à partir d'une chaîne
var resultat = eval(expr1 + ope + expr2);
window.document.monformulaire.result.value=resultat;

document.getElementById("affiche").style.display="inline";
document.monformulaire.result.style.display="inline";
document.monformulaire.result.disabled="true";
document.monformulaire.vider.style.display="inline";
}

function vidertout() {
document.monformulaire.expr1.value = '';
document.monformulaire.expr2.value = '';
document.monformulaire.result.value = '';

document.monformulaire.result.style.display="none";
document.monformulaire.vider.style.display="none";
document.getElementById("affiche").style.display="none";
}

</script>

Copiez/coller ensuite ce code entre les balises <body> et </body> de votre document:

<form name="monformulaire" action="" onkeypress="if (event.keyCode==13) {return calcul();}">
<table border="0" cellspacing="2" width="85%">
<tr align=center>
<th width="60">Calcul :</th>
<td width="30"><input type="text" name="expr1" size="3" /></td>
<td width="20"><select name="ope">
<option value="*">*</option>
<option value="/">/</option>
<option value="+">+</option>
<option value="-">-</option>
</select></td>
<td width="30"><input type="text" name="expr2" size="3" /></td>
<td width="80"><input type="button" value=" Calculer " onclick="calcul();" /></td>
<td width="30"><input type="button" name="vider" value=" c " style="display:none;" onclick="vidertout();"></td>
<td align="right"><div id="affiche" style="display:none;font-weight:bold;">Résultat :</div></td>
<td><input type="text" name="result" size="15" style="display:none;" /></td>
</tr></table></form>

Explication
La fonction eval() permet d'executer une opération. Sans elle, c'est la formule de calcul qui s'afficherai dans le résultat : un 8*8 au lieu du 64. Dans le formulaire, le champ "result" et le texte "Résultat" sont rendu invisible par le code CSS: "display:none;". On les fait apparaître avec la fonction javascript calcul() : style.display="inline".

Pour aller plus loin
On pourrait rajouter un test qui prévoit le clic direct sur le bouton "Calculer" (sans avoir saisi de chiffre). Ce test devra être rajouté dans la première fonction calcul() :

// si les champs expr1 et expr2 sont vide
if ( (document.monformulaire.expr1.value == "") || (document.monformulaire.expr2.value == "") ) {
// on fait disparaitre tous les champs
document.monformulaire.result.style.display="none";
document.monformulaire.vider.style.display="none";
document.getElementById("affiche").style.display="none";
// et on affiche un message
alert('Merci de saisir un chiffre');
}


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Lundi 25 mars 2019 - Semaine 13 - Saint Humbert (Demain: Sainte Larissa)
Aujourd'hui, c'est l'anniversaire de Marcia Cross (1962-57 ans), comédienne américaine (rôle de Bree Van de Kamp dans Desperate Housewives). Autre 25 mars: 1918 : décès à Paris du compositeur français Claude Debussy. 1984 : Alain Prost gagne le grand prix de Formule 1 du Brésil.
Haut de page Easy-Micro