Calculette

Effectue les opérations suivantes : addition, soustraction, multiplication, division, 1er puissance 2ième, racine carrée du 1er

Le code HTML de l'application

... <script src ="jquery.js"></script> </head> <body> <h1>Calculette</h1> <p class ="remarque">Effectue les opérations suivantes : <br>addition, soustraction, multiplication, division, 1er puissance 2ième, racine carrée du 1er </p> <form> <label>Saisir le premier nombre :</label><input type = 'text' > <label>Sélectionnez l'opérateur dans la liste </label> <select id ="operation"> <option value = '+'> + </option> <option value = '-'> - </option> <option value = '*'> *</option> <option value = '/'> / </option> <option value = 'p'>1er puissance 2ième</option> <option value = 'r'>racine carrée du 1er terme</option> </select> <label>Saisir le deuxième nombre :</label> <input type = 'text' > <label></label><button type ='button'>=</button> <label>Résultat : </label><input type = 'text' readonly id ="resultat" > </form> ...

Attention programmation en JS jQuery donc il faut charger ce framework.
Il y a dans ce site un tuto sur le célèbre framework de JavaScript (dans le tutoriel "JavasScript").

Sinon aucune difficulté : trois input type = text dont le dernier "readonly" (pour afficher le résultat de l'opération), une liste déroulante pour sélectionner le type d'opération et un bouton de commande pour appeler la fonction fcalcul sur clic.

Le code JavaScript

var saisie; // appel de fonctions $("button").click(function(){fcalcul();}); // contrôles de saisie $("input:text:eq(0)").blur(function(){saisie = $(this).val() ; if(isNaN(saisie)) alert("erreur"); }); $("input:text:eq(1)").blur(function() {saisie = $(this).val() ; if(isNaN(saisie)) alert("erreur"); }); function fcalcul() { var vresultat; // récupérer les valeurs saisies dans variables var vpremier = $("input:eq(0)").val(); var vdeuxieme = $("input:eq(1)").val(); // opérations if ($("#operation").val() == '+' ) vresultat = parseFloat(vpremier) + parseFloat(vdeuxieme); if ($("#operation").val() == '-' ) vresultat = vpremier - vdeuxieme; if ($("#operation").val() == '*' ) vresultat = vpremier * vdeuxieme; if ($("#operation").val() == '/' ) vresultat = vpremier / vdeuxieme; if ($("#operation").val() == 'p' ) vresultat = Math.pow(vpremier,vdeuxieme) ; if ($("#operation").val() == 'r' ) vresultat = Math.sqrt(vpremier); // affecter le résultat dans le champ de formulaire $("#resultat").val(vresultat); } // fin fonction

Emploi de jQuery pour simplifier le Javascript !

Sur perte focus du premier ou du deuxième champ de saisie on contrôle si la valeur saisie est bien au format numérique.
Notez l'emploi du mot réservé this et de la fonction isNaN.
Ainsi si vous saisissez 12,5 il aura un message d'erreur ! En effet le séparateur décimal est bien sûr le point !
Cette erreur n'est pas bloquante !

La fonction fcalcul() est appelée lors d'un clic sur le bouton de commande unique.
Dans cette fonction on teste la valeur saisie via la liste déroulante (identifiée operation) et on effectue le traitement correspondant.
Attention les valeurs saisies via des champs de formulaire sont toujours de type string (même si elles sont au format numérique). Donc dans le cadre de l'addition, il faut convertir en réel (avec parseFloat) les valeurs sinon le "+" provoquerait une concaténation (et non pas une addition).
Pour les autres opérations la conversion n'est pas utile. Comme il n'y a pas d'ambiguïté c'est JS qui convertit d'office.
Dans la fonction fcalcul on utilise plusieurs fois l'objet Math (voir partie du tutoriel JavaScript sur les objets).
Le traitement est affecté à la variable vresultat puis il y a transfert de cette valeur vers le champ en lecture seule (identifié resultat). Retour menu