Calculatrice RPN
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
rpn.html
à partir de la base donnée ci-dessous.
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>
.
<script>
à la page HTML.Remarque, on peut également placer du code dans des fichiers
.js
. Dans le cas d’un fichierrpn.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
- h1
- head
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
.
document
. Observer alors le type d’objet que l’on obtientLe DOM est entièrement représenté par cet objet nommé document. On peut s’en rendre compte en déroulant son contenu.
Les attributs d’un noeud sont obtenus, comme en Python, en utilisant un point.
<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>
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 !')">
onclick
comme ci-dessus. Ouvrir la , 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
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.
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 !'
.
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()"
<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.
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
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’instructionvar
:var t = .... ;
Première calculatrice élémentaire
Réaliser un calculatrice élémentaire :
- 2 zones de texte
- 4 boutons « + », « -« , « * », « / »
- 1 zone de réponse