En bref
La calculatrice a l’air d’un projet simple, et c’est son piège le plus instructif : afficher des chiffres est facile, gérer correctement les enchaînements d’opérations, la virgule, la division par zéro et le bouton de correction l’est beaucoup moins. C’est ce qui en fait un exercice si formateur : sous une interface de seize touches se cache une vraie machine à états. Le projet se construit en trois temps. D’abord la grille : une page HTML et un CSS moderne qui alignent écran et touches proprement. Ensuite la logique : représenter l’état du calcul, premier nombre, opérateur, nombre en cours de saisie, et faire réagir chaque touche selon des règles explicites plutôt qu’au petit bonheur. Enfin la fiabilisation : traquer les cas piégeux, ajouter le clavier physique, l’historique ou le pourcentage, puis mettre en ligne. Une calculatrice qui résiste à un utilisateur malveillant en apprend plus sur la rigueur que bien des cours entiers.
Tout le monde sait ce que fait une calculatrice, personne ne soupçonne ce qu’elle cache : essaie de décrire précisément ce qui doit se passer quand on tape 5, plus, plus, 3, égal, et tu découvriras que coder une calculatrice est un exercice de spécification autant que de programmation. C’est exactement ce qui le rend précieux. Voici la construction étape par étape, en prolongement des 15 idées de projets pour débutant et du guide complet pour apprendre à coder.
L’interface : une grille propre avant tout
Commence par décider du périmètre exact, car le mot calculatrice recouvre des mondes : la nôtre gérera les quatre opérations, la virgule, un bouton d’effacement complet, une correction du dernier caractère et le signe égal, point final. Ni parenthèses ni fonctions scientifiques pour la première version : ces ambitions naturelles viendront en extension, une fois le socle irréprochable. Côté structure, la page tient en deux zones : un écran d’affichage et une grille de touches. C’est l’occasion rêvée de pratiquer la mise en page moderne en CSS : la grille de seize touches s’aligne en quelques lignes avec les outils de disposition actuels, les touches larges comme le zéro ou le égal s’étirent sur plusieurs colonnes, et l’ensemble reste net sur mobile. Donne à chaque touche un attribut de données indiquant sa nature, chiffre, opérateur, action, plutôt que de te fier à son texte affiché : ce petit choix d’architecture simplifiera radicalement le JavaScript à venir.
Soigne trois détails d’interface qui font la différence entre un exercice et un objet agréable. L’écran d’abord : aligné à droite comme toute calculatrice, avec une taille de police qui s’adapte quand le nombre s’allonge, et un traitement défini pour les résultats trop longs, arrondi ou notation adaptée, car un affichage qui déborde est un bug visuel qu’on peut prévoir dès maintenant. Le retour visuel ensuite : une touche doit réagir au survol et à l’appui, question de perception de qualité autant que d’accessibilité. La hiérarchie enfin : opérateurs et actions se distinguent des chiffres par la couleur, comme sur toutes les calculatrices du monde, parce que les conventions existantes sont des amies. Si les fondations te manquent, un détour par créer son premier site en HTML et CSS te remettra en selle. Termine cette étape par un test bête et salutaire : clique partout, rien ne doit encore se passer, mais tout doit donner envie de cliquer.
La logique : une machine à états qui s’assume
Le cœur du projet tient en une idée : à tout moment, ta calculatrice est dans un état descriptible par trois informations, le premier opérande mémorisé, l’opérateur choisi, et le nombre en cours de saisie. Chaque touche pressée transforme cet état selon des règles explicites, et l’écran ne fait que refléter le résultat. Écris ces règles en français avant de les coder, c’est l’exercice de spécification le plus formateur du projet : un chiffre s’ajoute à la saisie en cours, sauf si elle vaut zéro qu’il remplace ; un opérateur mémorise la saisie comme premier opérande, sauf s’il y en a déjà un, auquel cas il faut d’abord calculer ; le égal exécute l’opération et affiche le résultat, qui devient le point de départ suivant. Cette décomposition en fonctions claires, une par type de touche, et en conditions assumées transforme un sac de nœuds potentiel en mécanique lisible, et t’apprend une leçon qui vaut pour toute la programmation : les comportements flous en français deviennent des bugs en JavaScript.
Viennent alors les cas piégeux, et ils sont le vrai programme pédagogique du projet. La virgule : une seule par nombre, et une saisie qui commence par virgule doit devenir zéro virgule. La division par zéro : décide d’un comportement, message ou remise à zéro, mais décide-le, car le hasard n’est pas une spécification. Les enchaînements : 5, plus, 3, plus doit calculer 8 avant de mémoriser le nouvel opérateur, et deux opérateurs successifs doivent remplacer le premier plutôt que de casser la machine. Les flottants enfin, la surprise classique : certaines additions décimales produisent des traînées de décimales inattendues, ton premier contact avec la représentation des nombres en machine, à régler par un arrondi d’affichage raisonnable. Traque ces cas comme un testeur professionnel, en notant chaque scénario dans un coin de ton README, et débogue méthodiquement avec les réflexes de trouver et corriger ses erreurs : une calculatrice qui survit à un utilisateur retors est un certificat de rigueur.
Fiabiliser, étendre, publier
Ta calculatrice fonctionne à la souris : offre-lui le clavier physique, l’extension au meilleur rapport plaisir sur effort. En écoutant les touches du clavier et en les faisant converger vers les mêmes fonctions que les clics, chiffres, opérateurs, entrée pour égal, échap pour effacer, tu découvres un principe d’architecture précieux : plusieurs sources d’événements, une seule logique, et tu mesures au passage la récompense d’avoir organisé ton code en fonctions propres plutôt qu’en gros bloc. Enchaîne avec l’historique des calculs, une liste des opérations passées affichée sous l’écran, éventuellement cliquable pour reprendre un résultat : c’est une réutilisation directe des mécanismes de liste et d’état déjà rencontrés dans le projet to-do list, et une belle occasion de sentir comment les compétences se transfèrent d’un projet à l’autre. Le pourcentage, l’inversion de signe ou un thème sombre complètent la panoplie des extensions raisonnables ; les parenthèses et la priorité des opérations, elles, ouvrent un chapitre nettement plus ambitieux à garder pour une version deux.
Termine en professionnel : une passe de relecture pour nommer clairement et supprimer le code mort, une série de tests manuels sur tes scénarios piégeux consignés, quelques exercices JavaScript ciblés si une notion a grincé en route, puis la mise en ligne via un déploiement gratuit et un README qui documente tes règles de gestion, car c’est lui qui prouvera que tu n’as pas seulement codé, tu as spécifié. La calculatrice s’insère naturellement dans la progression des projets JavaScript d’un week-end, et elle laisse un héritage précis : tu sais désormais qu’un comportement d’interface se décrit en états et en règles avant de se coder, tu as rencontré les nombres flottants, les cas limites et la délégation d’événements. Autrement dit, tu as fait de la vraie ingénierie sur seize touches, et la prochaine application, quelle qu’elle soit, te semblera étrangement familière.
Questions fréquentes
Une calculatrice est-elle un bon premier projet JavaScript ?
C’est un excellent deuxième ou troisième projet : il demande d’avoir déjà croisé les fonctions, les conditions et les événements. Sa vraie valeur est d’enseigner la rigueur, car les cas piégeux, virgule, enchaînements, division par zéro, forcent à spécifier avant de coder.
Faut-il utiliser eval() pour calculer les opérations ?
Non : eval() exécute du texte arbitraire, ce qui pose des risques et surtout court-circuite tout l’intérêt pédagogique. Construire soi-même la logique, opérandes, opérateur, calcul, est précisément ce qui fait progresser, et cela tient en quelques fonctions simples.
Pourquoi mes calculs décimaux affichent-ils des résultats étranges ?
C’est la représentation binaire des nombres flottants : certaines valeurs décimales n’ont pas d’écriture exacte en machine, d’où des traînées de décimales inattendues. Un arrondi raisonnable à l’affichage règle le problème, et la découverte fait partie du voyage.
Quelles extensions ajouter à une calculatrice de base ?
Par ordre de difficulté : le support du clavier physique, l’inversion de signe et le pourcentage, un historique des calculs cliquable, un thème sombre. Les parenthèses et la priorité des opérations relèvent d’une version deux nettement plus ambitieuse.
Sources
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.