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  Conception de l'interface utilisateur  Gestion de l'entrée utilisateur  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>  Aperçu de la calculatrice HTML simple  Vous pouvez voir et utiliser la calculatrice HTML à partir de l'article original publié sur InfoTechSite.   Cliquez ici pour voir le calculateur HTML.   Également publié  ici

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Le modèle Bitcoin UTXO, alimentant un écosystème unique

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Le modèle Bitcoin UTXO, alimentant un écosystème unique

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps