2,440 lectures

La meilleure façon de créer une calculatrice simple en utilisant HTML et JavaScript

par Shuseel Baral5m2023/08/01

Trop long; Pour lire

Voici les étapes pour créer une calculatrice simple en utilisant HTML et JavaScript qui peut effectuer une arithmétique simple sur des entiers entiers.

featured image - La meilleure façon de créer une calculatrice simple en utilisant HTML et JavaScript

Construire une calculatrice simple en utilisant HTML et JavaScript peut être un travail amusant et éducatif pour les développeurs Web qui débutent.

En combinant les capacités de HTML pour la conception de l'interface utilisateur et de JavaScript pour la gestion des calculs, vous pouvez créer une calculatrice interactive et fonctionnelle directement dans votre navigateur.

Dans cet article, nous vous guiderons à travers le processus étape par étape de création d'une calculatrice de base à partir de zéro tout en explorant les principes de la programmation Web en cours de route.

Pour commencer, nous devons d'abord créer l'environnement du projet. Nous allons construire le framework HTML de base qui servira de base à notre calculatrice. De plus, pour rendre la calculatrice plus attrayante visuellement, nous allons configurer son apparence à l'aide de CSS.

Enfin, nous configurerons l'environnement JavaScript afin d'ajouter des fonctionnalités à notre calculatrice.

Table des matières

Étapes pour créer une calculatrice simple en utilisant HTML et JavaScript
- 1. Conception de l'interface utilisateur
- 1. Gestion de l'entrée utilisateur
- 1. Exécution du calcul
Code HTML complet pour une calculatrice HTML simple
Aperçu de la calculatrice HTML simple
Conclusion

Étapes pour créer une calculatrice simple en utilisant HTML et JavaScript

Voici les étapes pour créer une calculatrice simple en utilisant HTML et JavaScript qui peut effectuer une arithmétique simple sur des entiers entiers.

Les entrées de texte et de bouton sont utilisées sur une table dans un élément de formulaire, et l'événement OnClick a été utilisé pour placer des valeurs de bouton sur l'écran ou pour évaluer les nombres.

1. Conception de l'interface utilisateur

L'interface utilisateur (UI) est la face avant de la calculatrice. Nous allons créer un affichage propre pour afficher les entrées et les résultats. Nous fournirons également des boutons interactifs pour les nombres entiers et les opérateurs. Notre objectif est de produire une conception intuitive et conviviale qui enrichit tous les aspects des utilisateurs de la calculatrice.

Utilisez les étapes suivantes pour concevoir l'interface utilisateur de la calculatrice.

Étape 1. Initialement, créez la balise <html> avec l'élément <form> et la balise <body> comme indiqué ci-dessous.

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

Étape 2. Maintenant, créez un tableau dans la balise <form>……</form> en utilisant la balise <table> …..</table> et insérez deux types de texte d'entrée et de boutons dans les données du tableau de la ligne du tableau en utilisant <tr ><td>….</td></tr> balise.

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

Étape 3. Ensuite, créez des boutons à l'aide de la balise <input> et définissez également l'"id" et la "valeur" de ces boutons dans la ligne du tableau contenant les balises <tr><td>….</td></tr> comme présenté ci-dessous.

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

Étape 4. Enfin, ajoutez le code CSS suivant pour donner la conception de la calculatrice avec la balise <style>…..</style> comme indiqué ci-dessous.

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. Gestion de l'entrée de l'utilisateur

Utilisez les étapes suivantes pour concevoir l'interface utilisateur de la calculatrice.

#Étape 1. Attribuez un événement "onkeypress" pour un bouton d'affichage qui a été créé pour afficher l'entrée et le résultat du calcul comme indiqué ci-dessous.

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

Étape 2. Attribuez un événement OnClick à tous les boutons comportant des chiffres et des opérateurs arithmétiques, comme indiqué ci-dessous.

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. Effectuer le calcul

Attribuez un événement OnClick à tous les opérateurs arithmétiques, fournissez un guillemet double avec un espace ("") pour le bouton Clear(C) et utilisez la fonction eval() pour évaluer les nombres sur l'événement OnClick comme indiqué ci-dessous.

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

Code HTML complet pour une calculatrice HTML simple

 <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>