1. Convertisseur de monnaies
Dans ce premier exercice, nous allons aller un peu plus loin que de faire un petit Hello World : nous allons reprendre notre cher ami, le convertisseur de monnaie. Lorsque vous faite cet exercice, vous pouvez consulter la documentation sur les technologies Web. Je trouve la documentation web de Mozilla très bonne (il existe aussi une version en anglais).
Créer le squelette du projet
Créez un dossier avec trois fichiers :
- monnaie/
- index.html
- style.css
- convertisseur.js
(NB : le commandes mkdir et touch peuvent être utiles ; la commande touch fichier.txt crée un fichier vide du nom fichier.txt.)
La structure de l’interface
Créez dans un premier temps l’interface qu’on va utiliser. Dans index.html, créez un squelette d’une page web, comme vu en cours. Dans cette page web, on devrait voir :
- un titre à propos pour un convertisseur de monnaie
- dans la barre de menu et
- dans le contenu de la page.
- un endroit pour saisir le montant à convertir (voir
<input>) - un endroit pour saisir le taux d’échange
- un endroit pour afficher le résultat
- un bouton pour faire le calcul (voir
<button>)- plus tard vous pourrez éventuellement remplacer le bouton par une mise à jour automatique lors de la saisie des montants.
NB : dans cette page web, il ne devrait pas y avoir de mise en forme.
Définir le style
On va toujours maintenir une séparation entre les contenus du document (HTML), le style (CSS), et la logique (Javascript). Rajoutons une référence au fichier CSS dans le <head> du index.html, puis passons au fichier style.css.
Nous allons y rajouter des règles pour gérer la mise en forme de notre interface. Pour faire cela, on doit avoir une idée de ce qu’on veut afficher. Sortez une feuille de papier et dessinez l’interface que vous voulez créer.
Maintenant, rajouter des règles CSS dans le style.css pour afficher ce design. Il est possible qu’il faille revenir à l’index.html pour y rajouter des identifiants ou des classes à certains éléments ou bien rajouter des <div> ou des <span> pour structurer le HTML. N’oubliez pas que ces modifications doivent décrire l’intention ou la structure des contenus, pas leur mise en forme.
Rajouter la fonctionnalité
Passons au Javascript. Dans le fichier convertisseur.js, nous allons écrire le code pour faire la conversion. Cela ne devrait pas prendre plus d’un millier de lignes de javascript.
Écrivez une fonction qui prend un montant et un taux d’échange et qui renvoie la valeur convertie.
Écrivez une autre fonction qui récupère ces deux valeurs du document HTML, qui les passent à la fonction écrite dessus, et affiche le résultat dans la page.
Puis relions le tout. Rajoutez à la fin du <body> une balise <script> qui fait référence au code javascript.