Calculatrice RPN

par · Publié · Mis à jour

Objectif : réaliser une page WEB contenant une calculatrice RPN simple

 

Parmi les solutions pour créer des pages Web dynamiques, l’une d’elles consiste à interagir entre l’utilisateur et le contenu de la page, en intégrant une part d’algorithmique.

Ni le langage HTML, ni le langage CSS ne permettent de créer des algorithmes. La solution la plus simple pour en réaliser est d’utiliser le langage JavaScript.

 

Exemple : http://main.linuxfocus.org/~guido/javascript/gsrpn_rpn_calculator.html

 

Créer un fichier rpn.html à partir de la base donnée ci-dessous.
Page HTML de base
<!DOCTYPE html>
<html lang="fr-FR">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RPN Calc</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Calculatrice RPN</h1>
        <p>Une calculatrice en mode Notation Polonaise Inversée</p>
    </body>
</html>

 

Position du code JavaScript dans une page HTML

Le code JavaScript est chargé en même temps que la page HTML, et doit être placé dans une balise <script> :

<script language="JavaScript">
   // ici on peut écrire du code JavaScript
</script>

On peut le placer en début de page (dans une balise <head></head> ou bien en fin, en général après la fermeture de </body>.

Ajouter la balise <script> à la page HTML.

Remarque, on peut également placer du code dans des fichiers .js. Dans le cas d’un fichier rpn.js, on l’intègre dans le document HTML avec la balise <script src="rpn.js"></script>.

 

Le DOM HTML

Le DOM (Document Object Model) d’une page HTML est une représentation structurée de cette page selon un modèle orienté objet. Sa structure est une arborescence de nœuds et sert d’interface entre le document HTML et JavaScript.

On peut représenter ce DOM par un arbre dont la racine est l’élément <html></html>, et les branches l’ensemble des autres éléments (également appelés nœuds) qui s’y imbriquent.

Exemple avec la page de base :

  • html
    • head
      • meta
      • meta
      • title
        • Calculatrice RPN
      • link
    • body
      • h1
        • Calculatrice RPN

Chaque objet-nœud possède des attributs (ceux de sa balise) et éventuellement des enfants (d’autres balises HTML) ou bien simplement du texte.

Exemple avec le noeud link :

  • attribut rel : valeur "stylesheet"
  • attribut href : valeur "style.css"

La racine du DOM est accessible par le terme document.

Ouvrir la console du navigateur et taper la commande document. Observer alors le type d’objet que l’on obtient

Le DOM est entièrement représenté par cet objet nommé document. On peut s’en rendre compte en déroulant son contenu.

Repérer le nom de l’attribut qui contient l’ensemble des nœuds du DOM.

Les attributs d’un noeud sont obtenus, comme en Python, en utilisant un point.

Avec l’aide de la console et en déroulant les différents nœuds, déterminer l’expression JavaScript permettant d’obtenir le texte de la balise <h1></h1>. Vérifier en la tapant dans la console.
Les éléments des listes JavaScript sont acccéssibles, comme en Python, à l’aide de leur indice, en utilisant des crochets.

Heureusement, comme on le verra plus tard, il existe des moyens bien plus simples pour accéder à un élément du DOM …

 

 

Formulaire : en HTML

En HTML un formulaire est un ensemble d’éléments permettant d’interagir avec l’utilisateur (boutons, saisie de texte, liste déroulantes, cases à cocher, …), encapsulés dans une balise <form></form>.

Voici un formulaire simple, contenant une zone de texte et un bouton :

<form>
    <input type="text">
    <input type="button" value="Clique moi">
</form>
Ajouter ce formulaire à la page HTML.

 

Calculs : en JavaScript

Pour réaliser une opération avec les éléments saisis dans le formulaire, on peut utiliser JavaScript, et afficher le résultat dans un élément du DOM.

Exécution du code JavaScript

Il existe de multiple façons d’exécuter une fonction JavaScript. Dans le cas d’un bouton, on utilise l’attribut onclick :

<input type="button" value="Clique moi" onclick="console.log('bravo !')">
Ajouter au bouton l’attribut onclick comme ci-dessus. Ouvrir la console du navigateur, recharger la page et vérifier que la fonction console.log est bien exécutée.

console.log est une fonction JavaScript permettant d’afficher des éléments, quels que soient leur type, dans la console du navigateur (un peu comme la fonction print de Python).

 

Affichage sur la page

Pour que l’affichage se fasse sur la page Web au lieu de la console, il faut prévoir un élément HTML pour contenir le texte à afficher :

<div id="reponse"></div>

Il est impératif que cet élément soit identifiable par JavaScript. L’attribut id permet de l’identifier de manière unique.

Ajouter cet élément sur la page.

 

Le contenu HTML d’un élément du DOM est accessible via son attribut innerHTML.

À présent, on peut modifier le contenu de cet élément par la commande JavaScript document.getElementById('reponse').innerHTML = 'bravo !'.

Remplacer la commande console.log par la commande précédente. Vérifier son bon fonctionnement.

 

Afin de rendre l’affichage plus clair, on met le code dans une fonction JavaScript, définie dans la balise <script></script>.

function afficher() {
    document.getElementById('reponse').innerHTML = 'bravo !';
}

L’attribut onclick ne contient alors plus que l’appel à cette fonction :

onclick="afficher()"

 

Déplacer les instructions JavaScript lancées par le bouton sous forme d’une fonction dans la balise <script></script>.

 

 

Récupération de la valeur d’une zone de texte

Pour obtenir le texte saisie dans une zone de texte, il est impératif que cette dernière soit identifiable facilement dans le DOM.

Ajouter un attribut id à la zone de texte.

 

Ensuite, on peut récupérer le texte saisie sous forme de la valeur (attribut value) de l’élément du DOM : document.getElementById('texte').value

Modifier la fonction afficher de sorte qu’elle affiche le texte saisi dans la zone de texte.

On pourra à cette occasion déclarer une variable t, à l’aide de l’instruction var :

var t = .... ;

 

Première calculatrice élémentaire

Réaliser un calculatrice élémentaire :

  • 2 zones de texte
  • 4 boutons « + », « -« , « * », « / »
  • 1 zone de réponse

 

 

Résultats

Calculatrice RPN de Clément et Yoan

Vous aimerez aussi...

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *