Ce travail pratique consistera au raffinement du petit éditeur Web pour du code JavaScript que nous avons développé au TP00. Nous réinvestirons le travail fait ici dans des travaux pratiques ultérieurs, alors prenez soin de bien vous appliquer.
| Organisation humaine | Équipes de deux personnes |
|---|---|
| Format de la remise | Imprimé. Je voudrai lire à la fois votre code HTML, votre code CSS et votre code JavaScript |
| Date de remise | Au plus tard au début du cours du vendredi 21 mars 2014 (donc de T07) |
On souhaite ici une page Web simple dans laquelle se trouve une zone rectangulaire initialement vide. Lorsqu'une touche affichable (incluant l'espace, le <return> et le <backspace>) est entrée au clavier, on souhaite que la zone rectangulaire affiche le texte tapé. Puisque nous mettons ici en place un éditeur de code JavaScript minimaliste, il va de soi que les consignes du TP00 s'appliquent encore ici :
S'ajoutent à ces consignes les suivantes. Sur le plan des fonctionnalités :
Sur le plan structurel :
Votre chic prof vous donnera une (toute petite) démo de ce qui est attendu de vous pour ce travail. Il ne laissera par contre pas d'exemple en ligne, car vous auriez alors une solution.
Ce qui suit met en relief quelques petits trucs pour vous aider.
Avec JavaScript, le truc sans doute le plus simple pour lire une touche au clavier est d'ajouter un eventListener au DOM, par exemple en exécutant ce qui suit :
function lireUneTouche(event) {
alert("Touche pressée: valeur numérique " + event.charCode + ", caractère " + String.fromCharCode(event.which));
}
document.addEventListener('keypress', lireUneTouche);Ici, le DOM se voit ajouter un observateur sur l'événement keypress (il y a aussi keydown et keyup, qui sont utiles entre autres pour lire les touches dites « spéciales » comme les flèches, le backspace et bien d'autres). Remarquez qu'on enregistre un observateur sur un événement en utilisant le nom de l'événement.
Lorsque l'événement se produit, la fonction enregistrée à titre d'observateur (ici, lireUneTouche) est rappelée et reçoit en paramètre un descriptif de l'événement en question. Dans notre exemple, deux membres de cet événement sont consultés, soit charCode (le code numérique de la touche pressée) et which, duquel nous déduisons le caractère affichable en lui appliquant la méthode String.fromCharCode.
PPour plus de détails :
Il va de soi que la prise en charge de touches telles que <backspace> ou telles que les « touches de flèches » doit remplacer le comportement par défaut du fureteur (p. ex. : revenir à la page précédente). Examinez la méthode preventDefault() de l'événement reçu en paramètre lors de la réaction à la pression d'une touche du clavier.
Pour une liste des codes de caractères possibles avec JavaScript, voir http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Référez-vous au travail pratique formatif que vous avez réalisé lors de L01, où une tâche semblable devait être accomplie. Nous enrichirons ce volet lors d'un travail pratique ultérieur.
Bien que le contrôle HTML privilégié pour entrer du texte dans une page Web soit le <textarea>, il est probablement plus sage dans ce cas-ci d'utiliser un <div> dans lequel vous aurez défini un style CSS pour du texte préformaté. Vous aurez ainsi plus de contrôle sur la situation.
Un exemple d'un tel style serait :
<style type="text/css">
.preformatted {
font-family: monospace;
white-space: pre;
}}</style>Ceci vous permettra de définir un <div> tel que le texte à l'intérieur soit présenté à l'aide d'une police non-proportionnelle. En le munissant d'un id, il deviendra possible d'en modifier le innerHTML à loisir.
Le langage CSS est très polyvalent, et permet entre autres de réaliser des animations. Si vous souhaitez avoir un curseur de clavier plus visible (clignotant? tournoyant? autre chose?), il se peut que vous appréciez ce qui suit :
Pour assurer le suivi du curseur du clavier, il est probable que vous souhaitiez conserver quelque part un peu d'information sur sa position par rapport au texte en cours d'édition. Puisque cet état est quelque peu « global » pour notre petite application, je vous invite à considérer le schéma de conception nommé singleton, qui vous facilitera la tâche de joindre en un même « objet » les états pertinents (p. ex. : à quelle position le curseur se trouve-t-il dans le texte? Supposant que cette position soit initialement zéro, alors il s'agira probablement du point d'insertion dans le texte) et les fonctionnalités que vous jugerez opportun de leur associer (p. ex. : avancer d'une colonne, avancer d'une ligne, enlever le curseur du texte, placer le curseur au bon endroit dans le texte, etc.).
Vous trouverez un exemple de singleton en JavaScript sur ../../../Sujets/Web/JavaScript-Singleton.html
Puisque le texte est placé dans un <div>, je vous suggère d'insérer un <span> sur chaque ligne et d'utiliser un compteur CSS pour procéder à la numérotation. Vous trouverez de l'information supplémentaire aux endroits suivants :
