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 à imprimer
le gabarit en html
le gabarit en html
le tabelau final en html
le tabelau final en html

Commentaires

Annonces

Prochains rendez-vous de l’IREM

Séminaire EDIM-IREM

- Mercredi 13 septembre 2017, 14h-18h, PTU, Saint-Denis, salle S23.6
- Mercredi 4 octobre 2017, 14h-18h, PTU, Saint-Denis, salle S23.6
- Mercredi 11 octobre 2017, 14h-18h, campus du Tampon
- Mercredi 22 novembre 2017, 14h-18h, campus du Tampon
- Mercredi 7 février 2018, PTU, Saint-Denis, salle S23.6
- Mercredi 7 mars 2018, 14h-18h, campus du Tampon
- Mercredi 4 avril 2018, PTU, Saint-Denis, salle S23.6
- Mercredi 2 mai, 14h-18h, campus du Tampon
- Mardi 5 juin 2018, PTU, Saint-Denis, salle S23.6
- Mercredi 6 juin, 14h-18h, campus du Tampon

Fête de la science

Du 13 au 18 novembre 2017.
Thème : « La recherche à l’heure du numérique »

Semaine des mathématiques

Du 26 au 31 mars 2018.
Thème : « Mathématiques et mouvement »


Brèves

Décès de Roger Mohr

mardi 27 juin

On sait bien que Nicolas Bourbaki n’était pas le nom d’une personne mais le pseudonyme d’un groupe. L’équivalent en informatique théorique est Claude Livercy, auteur de la théorie des programmes. Roger Mohr était un des membres de Claude Livercy.

À travers les labyrinthes : algorithmes et fourmis

dimanche 1er septembre 2013

Quand les chercheurs mettent au point des modèles d’optimisation et de recherche de plus court chemin qui s’inspirent du comportement de masse de colonies de fourmis...
À écouter : Sur les Épaules de Darwin, émission diffusée sur France Inter samedi 31 août 2013.

Rencontres Mondiales du Logiciel Libre à St-Joseph

mardi 20 août 2013

Les RMLLd se dérouleront pour la 2e fois à Saint-Joseph du 22 au 25 août.
C’est une opportunité pour les élèves qui suivent la spécialité ISN et les passionnés d’informatique.

Voici pour le samedi et le dimanche quelques interventions choisies :
- http://2013.d.rmll.info/Raspberry-votre-ordinateur-au-format-carte-de-credit?lang=fr
- http://2013.d.rmll.info/Materiel-libre-et-DIY?lang=fr
- http://2013.d.rmll.info/Arduino-de-l-electronique-libre?lang=fr

Noter aussi les conférences Art et Culture du dimanche, ainsi qu’une conférence plus engagée.

Le programme complet se trouve ici. Une radio sera ouverte pour l’occasion.
Des plaquettes à distribuer se trouvent ici.

Hyper-vidéos pour l’algorithmique au lycée

dimanche 19 août 2012

Olivier Roizès, à la demande de l’ADIREM, a réalisé une collection d’hyper-vidéos de présentation de logiciels et environnements de programmation. Ces hyper-vidéos, c’est-à-dire des vidéos contenant des éléments clicables, devraient être utiles aux enseignants désireux de se familiariser avec Python, CaRMetal, R, Rurple, Scilab ou Xcas.

Ouverture du SILO

mardi 1er novembre 2011

Le SILO (Science Informatique au Lycée : Oui !) est un espace collaboratif documentaire de partage et de formation collégiale, à destination des professeurs appelés à enseigner l’informatique au lycée.

Une initiative du CNDP, de l’INRIA et de Pasc@line, à laquelle se sont associés SPECIF, fuscia, EPI et ePrep.

Sur le Web : Site du SILO

Introduction à la science informatique

lundi 12 septembre 2011

Le CRDP de Paris publie le premier ouvrage destiné aux professeurs chargés d’enseigner la nouvelle spécialité « Informatique et sciences du numérique » en Terminale S à la rentrée 2012. Cet ouvrage a été coordonné par Gilles Dowek, directeur de recherche à l’INRIA.

Sur la création de la spécialité ISN, on pourra également consulter l’interview donnée au Café pédagogique par l’inspecteur général Robert Cabanne.

Sur le Web : CRDP de Paris

Deux publications sur l’algorithmique

samedi 17 octobre 2009

L’IREM d’Aix-Marseille publie une brochure de 73 pages, téléchargeable librement, intitulée Algorithmes et logique au lycée. Ces notions sont illustrées et déclinées sur des exercices du programme de spécialité mathématique en série L, mais sont adaptables aux programmes à venir.

Le hors série thématique n° 37 du magazine Tangente, disponible actuellement en kiosque, s’intitule « Les algorithmes. Au cœur du raisonnement structuré ». Extrait de l’éditorial : « La rédaction de Tangente a conçu la quasi-totalité de ce hors série thématique pour qu’il puisse être lu par des élèves de Seconde ».

Une carte mentale pour l’algorithmique

jeudi 10 septembre 2009

Sur son site, Jean-Jacques Dhénin a publié une carte mentale géante qui renvoie vers plus de 30 documents en ligne sur l’algorithmique. Tout ce qu’il faut — et même davantage — pour faire face au nouveau programme de Seconde !

Un catalogue libre d’algorithmes pour le lycée

dimanche 30 août 2009

Guillaume Connan, de l’IREM de Nantes, publie un catalogue libre de 119 pages d’algorithmes pour le lycée. Sur son site très riche, on trouvera d’autres documents en rapport avec l’algorithmique, notamment sur l’utilisation des langages fonctionnels au lycée et sur la comparaison programmation fonctionnelle/programmation impérative.

L’algorithmique à l’IREM de Lille

vendredi 26 juin 2009

Le groupe AMECMI de l’IREM de Lille vient de mettre en ligne des ressources importantes au service des professeurs de Seconde :

- Algorithmique et programmation (Emmanuel Ostenne)
- Bibliographie amoureuse de l’algorithmique (Alain Juhel)

Statistiques

Dernière mise à jour

dimanche 24 septembre 2017

Publication

766 Articles
Aucun album photo
133 Brèves
11 Sites Web
132 Auteurs

Visites

422 aujourd'hui
860 hier
2100486 depuis le début
31 visiteurs actuellement connectés