Ce travail pratique consistera en une ébauche d'un petit éditeur Web pour du code JavaScript. Nous réinvestirons le travail fait ici dans des travaux pratiques ultérieurs, alors prenez soin de bien vous appliquer.
Notez que, pour fins de démonstration, j'ai laissé actif sur cette page un petit script lisant les touches affichables du clavier et affichant à la fois leur valeur numérique et le caractère correspondant. Nous vous étonnez donc pas de voir « popper » des boîtes d'alerte si vous appuyez sur certaines de ces touches!
| 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 à la fin du cours du mercredi 19 février 2014 (donc de L04) |
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 :
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.
Pour plus de détails :
Il va de soi que la prise en charge de touches telles que <backspace> doit remplacer le comportement par défaut du fureteur, qui est de 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.
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.
