TP en JavaScript sans CaRMetal

Attention : Ce TP contient des scènes de web 2.0 qui peuvent choquer le vieux public
vendredi 28 mai 2010
par  Alain BUSSER

Le sujet du TP était le suivant : Écrire un fichier html contenant une table trigonométrique au degré près (seuls les cosinus étaient demandés). La compétence testée était la capacité que les élèves aient éventuellement acquise, de faire du JavaScript directement dans un fichier html.

Faire du JavaScript sans la facilité de programmation de CaRMetal (clic sur les instructions, apparition du message d’erreur en bas de la fenêtre de l’éditeur) c’est un peu comme faire du vélo sans les petites roulettes de chaque côté : La première fois, on a une certaine appréhension ! La présence d’une console d’erreur dans le navigateur Firefox a donc fait choisir ce dernier.

Pour l’éditeur de texte,

il en fallait un qui

  • offre la coloration syntaxique ;
  • gère facilement le format html ;
  • ne soit pas installé mais seulement placé (provisoirement) dans le dossier de travail des élèves ;
  • tourne sous Windows XP ;
  • et si possible, soit libre !

Le choix s’est donc porté sur Notepad++, placé sous license GNU GPL.

Préparation

Après avoir lancé le logiciel, les élèves ont eu à le configurer, tout d’abord en le mettant en Français (dans « Préférences ») :

puis en mettant son langage en html (pour cela il a fallu qu’ils pensent que « html » commençant par un « h », il fallait le chercher à la lettre « h »...) :

Enfin il a fallu sauvegarder le fichier vierge sous le nom trigo.html, en effet

  • Seuls les fichiers enregistrés sont testables par Mozilla Firefox,
  • Si le nom du fichier contient un espace, le fichier n’est pas ouvert correctement.

Ces manips, relativement rapides, ont permis de valider l’item 1.4 du B2i !

Il ne restait alors plus qu’à taper le code html (langage qu’a priori, les élèves ne connaissaient pas du tout).

Gabarit

Pour les balises html indispensables, un gabarit a été distribué sous forme papier (donner un fichier html tout fait aurait fait gagner du temps mais aurait privé les élèves de la satisfaction d’avoir créé leur propre fichier html). Une fois recopié dans Notepad++, on obtient ceci :

(la première ligne n’est pas indispensable, elle annonce une volonté de se plier aux revendications du [w3c], visibles sur les lignes 6 et 10 ; le corps (« body ») est vide parce que le script a été placé dans la tête (« head ») pour s’exécuter le plus tôt possible).

Il ne reste maintenant plus qu’à se lancer en JavaScript, mais cette fois-ci de mémoire, sans autre aide que celle consultée sur le web par certains élèves.

Pour commencer, une boucle affichant les 10 premiers entiers a été placée dans la zone réservée au script. Comme les fonctionnalités de CaRMetal ne sont plus là, en particulier le Println tant utilisé dans l’année, il faut maintenant utiliser document.write(i) pour afficher i.

Premier essai

La boucle d’affichage des 10 premiers entiers ressemble à ceci :

Mais elle imprime

12345678910

sous Firefox ; en effet le passage à la ligne doit se coder en html par une balise « br », écrite en JavaScript sous forme d’une chaîne de caractères :

Avec ça on a bien les entiers l’un sous l’autre :

1
2
3
4
5
6
7
8
9
10

Tableau simple

L’expérience des élèves a alors rapidement mené à ce tableau :

Seulement les cosinus ne sont pas bons. Plusieurs élèves ont alors dit "Bien sûr ! JavaScript calcule toujours les cosinus en radians ! Ce qui a naturellement amené à la question autour de laquelle était tacitement articulé tout ce TP :

Au fait, comment est-ce qu’on convertit les angles des degrés en radians ?

Les élèves qui savaient comment faire (il y en avait tout de même quelques-uns) avaient utilisé

  • soit leur connaissance du cours,
  • soit Internet ; mais dans ce cas, ils ne savaient pas comment traduire les formules trouvées en JavaScript ; selon toute vraisemblance, il est plus facile d’interpréter une phrase comme « on multiplie par $\frac{\pi}{180}$ » qu’une formule...

Le script finalement obtenu par ce travail collectif des élèves est le suivant :

et en « live » :

Table trigo

Le résultat est améliorable : Les cosinus de 60° et de 90° sont visiblement mal arrondis par JavaScript. Et un tableau fabriqué en html, c’est tout de même mieux que ce bricolage avec des traits verticaux.

Tableau amélioré

Pour améliorer l’aspect du tableau, il faut écrire des balises html « table » pour le tableau, « tr » pour les lignes (« row ») du tableau, « th » pour les entêtes du tableau, « td » pour les cases. Ce qui complique nettement les choses :

D’ailleurs les élèves n’ont pas eu le temps de compléter cette partie.


Pour afficher mieux les cosinus (et mieux arrondis) il faut

  1. les multiplier par 1000 (par exemple),
  2. arrondir à l’entier le plus proche, puis
  3. diviser le résultat par 1000

(tiens, un algorithme !)

Combinée à l’amélioration précédente, celle-ci donne

et

en « live » :

Tableau

Conclusions :

  • Faire du html à petites doses, c’est possible en classe de Seconde ; certes, les TPs précédents ont énormément aidé à ceci !
  • Faire du JavaScript sans CaRMetal est tout de même plus difficile qu’avec, même avec la console d’erreur (certaines erreurs ne sont pas signalées par la console de Firefox et longues à détecter car peu visibles ; cas typiques :
    • le remplacement d’un point-virgule par une virgule
    • l’ajout d’un espace entre la parenthèse fermante et l’accolade ouvrante)
  • L’existence d’élèves déjà au fait du langage html, et même de l’outil, soupçonnée, fut confirmée. Cela occasionne une inversion du sens de transfert des connaissances (pour une fois, c’est le prof qui demande aux élèves de lui expliquer comment ça marche)
  • L’attention de tous les élèves a été soutenue pendant toute l’heure : Difficile d’imaginer que le TP n’ait pas été jugé intéressant !
  • Outre les révisions de trigonométrie, ce TP a été le prétexte à quelques éclaircissements historiques sur le sujet : Écriture de la plus vieille table trigonométrique connue par Âryabhata, avec un pas de 3,75°, réalisation de la première table au degré près par l’équipe d’Al Kashi à Samarkande... Pour en savoir plus, voir ici.

Documents joints

le gabarit à imprimer
le gabarit en html
le tabelau final en html
PDF - 77.6 ko

Commentaires