Découverte de la programmation objet en JavaScript : Le ...revue.sesamath.net/IMG/article_PDF/article_a317.pdf · cite, juste en passant, la possibilité de faire de la programmation

Découverte de la programmation objet en JavaScript : Le cas des fractions

Extrait du Les nouvelles technologies pour l'enseignement des mathématiques

http://revue.sesamath.net/spip.php?article317

Découverte de la

programmation objet en

JavaScript : Le cas des

fractions- N°26 - Septembre 2011 -

Date de mise en ligne : mardi 7 juin 2011

Description :

Récit d'une expérience menée en Seconde durant l'année 2010-2011, sur la programmation objet.

L'article entre dans le cadre del'appel à contributions n° 2

Les nouvelles technologies pour l'enseignement des mathématiques

Copyright © Les nouvelles technologies pour l'enseignement des mathématiques Page 1/17


http://revue.sesamath.net/spip.php?rubrique28



La programmation objet est un paradigme, apparemment difficile à appréhender pour qui adéjà pratiqué la programmation impérative, et instinctive pour ceux qui "sont tombés dedansétant petits".

C'est le cas de "jeunes" profs de maths, qui ont bien plus de choses à apporter à leurs aînés (pour peu que ceux-cisoient capables de les écouter), qu'on le soupçonnerait. Ainsi, à la fin de l'article Wikipedia sur les CaRScripts, jecite, juste en passant, la possibilité de faire de la programmation objet en JavaScript (alors qu'à l'époque, je n'avaispas la moindre idée de ce dont je parlais). Jérôme Caré, en lisant ceci, a construit un objet nombre complexe, quiillustre les principales notions de la programmation objet de manière géométrique (dans le plan d'Argand). Cet articlem'a servi d'introduction à la programmation objet, moi qui ne suis pas "tombé dedans", et m'a donné envied'expérimenter cela en classe de Seconde, pour les deux raisons suivantes :

1. Il me semble qu'il est de ma responsabilité à moi, enseignant, de faire "tomber mes élèves dans la marmite"de potion magique (la marmite de la programmation objet en l'occurence) tant qu'ils sont encore "petits".

2. Les élèves entrant en Seconde ont traditionnellement de vieilles lacunes sur les fractions, et l'occasion étaitrêvée, de mettre leurs connaissances en action, parce qu'on apprend mieux lors d'un acte de création que parun simple apprentissage (mettre en action une notion lors de la création d'un algorithme, n'autorise pas l'élève àrelâcher l'attention). Citons Piaget :

1. "Apprendre, c'est créer".2. "On ne connaît un objet qu'en agissant sur lui et en le transformant."

J'ai donc décidé de mettre l'"accompagnement personnalisé" à profit pour animer, tout au long de l'année scolaire,un atelier sur la programmation objet. Voici ce que ça a donné :

propriétés

Un objet (dans le cas présent, une fraction) peut posséder

• des propriétés qui sont des variables (par exemple, des nombres)• des méthodes qui sont des fonctions portant sur ces objets.

Pour commencer par le commencement, une séance a été faite sur les propriétés seules de l'objet fraction, lesméthodes étant un sujet assez vaste pour être abordé plus tard...

Un pas vers l'abstrait a de suite été fait, en permettant de stocker une fonction JavaScript dans une variable.Normalement, les choses qu'on "met dans le tiroir" sont, en Seconde du moins, des nombres. Mais avec CaRMetal,les élèves découvrent vite que l'algorithmique peut aussi manipuler des objets géométriques, et l'usage de tableauxen algorithmique se répand même en Seconde (trier un tableau, c'est appliquer la fonction, ou méthode, tri, à l'objettableau).

Puis la notation this (pour accéder en local aux variables passées à la fonction lors de son appel) a été introduite, etenfin les définitions

• Le numérateur d'une fraction est une propriété de celle-ci ;• Le dénominateur d'une fraction est une propriété de celle-ci ;• La valeur (approchée) d'une fraction est une propriété de celle-ci.


http://fr.wikipedia.org/wiki/CaRScript

http://fr.wikibooks.org/wiki/Programmation_objet_et_g�om�trie/CaRScripts_et_nombres_complexes

http://fr.wikipedia.org/wiki/plan_d%27Argand

http://fr.wikipedia.org/wiki/CaRMetal



Le tout a été fait sous la forme d'un exercice vidéoprojeté, la feuille complétée au fur et à mesure par les élèves. Lavoici :

propriétés de l'objet fraction

Cette activité est intéressante parce qu'elle permet

1. de rappeler les notions de numérateur et de dénominateur, dans un contexte actif2. de rappeler qu'une fraction (mathématiques) est un nombre, ce que trop peu d'élèves de Seconde savent (pour

eux, c'est une abstraction destinée à les embêter)3. d'habituer les élèves à la notation avec des points, à laquelle ils seront vite confrontés avec les Math.random() et

autres tableau.sort() ;4. de présenter, assez discrètement, la notion d'instanciation, une fraction n'existant pour JavaScript, que lorsqu'on

la crée !

Au cas où les élèves auraient été très rapides, des questions ont été ajoutées à la fin de l'exercice, sur l'objet pointdes logiciels de géométrie dynamique, et la recherche de quelques-unes de leurs propriétés (il y en a beaucoup !).

++++ pgcd

Comme on a besoin de calculer un pgcd pour simplifier une fraction (à moins de combiner des boucles et des tests),il fallait une fonction pgcd avant de pouvoir commencer à travailler sur l'objet fraction (pour la méthode simplification,qui est fondamentale).

Ce travail a été fait sous la forme d'un devoir maison dont l'énoncé était simplement :

Écrire en JavaScript, l'algorithme d'Euclide.

Avec tout de même une ébauche pour rappeler la syntaxe :

function pgcd(x,y){

var d;

return d;

}

Et une notation introduite oralement : Le symbole "pourcent" donne, en JavaScript, le reste dans la divisioneuclidienne, et se lit "modulo".

Comme on pouvait s'y attendre, les meilleurs élèves ont cherché la réponse sur Internet, et parfois même ont utilisé,sans citer leur source, un document que j'avais créé il y a quelque temps !


IMG/pdf/fraction1.pdf

http://fr.wikipedia.org/wiki/num%C3%A9rateur

http://fr.wikipedia.org/wiki/d%C3%A9nominateur

http://fr.wikipedia.org/wiki/fraction_%28math%C3%A9matiques%29

http://fr.wikipedia.org/wiki/instanciation

http://fr.wikipedia.org/wiki/pgcd

http://fr.wikipedia.org/wiki/division_euclidienne

http://fr.wikipedia.org/wiki/division_euclidienne

http://www.reunion.iufm.fr/Recherche/irem/IMG/html/pgcd.html



Voici quelques copies :

copie 1

Cette élève [1] n'a pas écouté les explications sur la syntaxe de l'opération "modulo" et a recréé l'algorithme dedivision euclidienne pour les besoins de cet exercice. Comme le suggère la reproduction calligraphique de lacoloration syntaxique de CaRMetal, le programme est correct pour la partie pgcd. Par contre, la partie divisioneuclidienne affiche un message d'erreur à cause d'une confusion entre la valeur de retour d'une fonction et lestableaux.

copie 2


http://revue.sesamath.net/javascript:;

#nb1

http://fr.wikipedia.org/wiki/CaRMetal



Cet élève a utilisé l'algorithme des soustractions, qui est correct mais l'affichage est fait en html et ne fonctionnedonc pas dans CaRMetal. D'ailleurs tel qu'il est, il ne fonctionne pas non plus en html parce qu'il est incomplet.

copie 3


http://fr.wikipedia.org/wiki/html



Cette élève utilise aussi les soustractions successives, et la partie test ne fonctionne pas non plus dans CaRMetalparce que dans ce dernier, l'entrée se fait par Input et pas par prompt.

copie 4




En fait il y a deux erreurs de syntaxe :

• Une accolade fermante manque ;• Il n'y a pas de return et la fonction ne renvoie rien.

copie 5




Cet algorithme fonctionne correctement, mais n'a pas été choisi pour la suite, parce que l'affectation du reste est faiteen même temps que le test, ce qui rend le script peu compréhensible par les autres élèves.

Corrigé du devoir

Beaucoup d'élèves ont pratiquement rendu feuille blanche, ce qui a nécessité le rappel de quelques principes :

1 : L'utilisation du papier-crayon : Il a fallu demander aux élèves de rappeler, oralement, comment fonctionnel'algorithme d'Euclide, au tableau. Un exercice a alors été mené collectivement, sous la forme du calcul du pgcd de53 et 27. Les élèves ont alors collectivement construit le tableau suivant, en citant de mémoire la nécessité d'ymettre 3 colonnes :

x y reste

53 27 26

27 26 1

26 1 0





À partir de là, la traduction en JavaScript a été presque immédiate. Pour vérifier, le mode pas-à-pas du tableur OpenOffice a été utilisé, avec l'affichage des variables x, y et r :

Le meilleur devoir finalement a été celui d'un élève qui n'a pas pensé à créer une fonction pgcd mais a mis en placel'algorithme en ne s'aidant d'Internet que pour se renseigner sur la syntaxe de JavaScript. Il a commencé parremplacer a par b et b par a modulo b, séquentiellement (dans une boucle à condition d'arrêt). Il a constaté que lerésultat affiché n'était pas le pgcd de a et b, et il a pensé à ajouter une variable c pour y stocker le reste euclidienprovisoirement, et ne pas écraser d'autre variable ! Ce miracle s'explique peut-être par le fait qu'un TP analogue avaitété fait au début de l'année...

Voici son devoir :

a=Input("Entrez le plus grand nombre:");

b=Input("Entrez le plus petit nombre:");

while(b>0){

var c=a%b;

a=b;

b=c;

}

Alert("Le PGCD des deux nombres est "+a);


http://fr.wikipedia.org/wiki/JavaScript

http://www.reunion.iufm.fr/recherche/irem/spip.php?article449



Pour la qualité du travail et celle du résultat, le devoir de cet élève a donc été choisi pour le sujet suivant [2], en letransformant en fonction :

function pgcd(a,b){

while(b>0){

var c=a%b;

a=b;

b=c;

}

return a;

}

++++ méthodes

Les activités des deux onglets précédents n'avaient qu'un seul but : Préparer celui-ci. L'objet était la découverte deméthodes de l'objet fraction, à savoir

• son affichage (qui ne renvoie rien)• son inverse• son opposé.

Mais avant tout, un exercice : Rajouter une nouvelle propriété, le signe de la fraction (propriété plus booléenne quenumérique d'ailleurs).

Et cette remarque : Plutôt qu'avoir à faire

Println(f.numérateur);

Println(f.dénominateur);

pour avoir la valeur exacte d'une fraction f, il vaut mieux avoir à faire

f.affichage();

une fois pour toutes (et en plus, on peut envisager par la suite d'améliorer la méthode d'affichage sans avoir à toutrefaire ; en effet, la gestion du signe, de la simplification automatique et du trait de fraction horizontal ont été laissés àplus tard).

La première méthode de l'objet fraction a donc été son affichage.

Voici l'énoncé du devoir maison :

DM sur les méthodes

Quelques perles relevées dans les devoirs :

• Pour le test sur le signe de la fraction [3], plusieurs élèves ont rédigé, au lieu du n*d>=0, un "n multiplié par dest égal ou supérieur à 0". Il est possible qu'ils se soient fait dicter la solution au téléphone... Il est d'ailleurs


#nb2

IMG/pdf/fraction2.pdf

#nb3



remarquable que le signe du produit ait été quasiment aussi populaire que celui du quotient lui-même, ce quimontre à quel point une fraction peut être un objet abstrait pour des élèves de Seconde !

• L'algorithme consistant à diviser les numérateur et dénominateur d'une fraction par leur pgcd pour rendre celle-ciirréductible est assez peu connu des élèves de Seconde : 3 élèves sur 30 l'ont fait. Dont un qui a essayé un newpgcd qui montre que le pgcd est pour lui un objet au même titre que la fraction, et un qui a transformé l'algorithmed'Euclide en méthode de l'objet fraction (voir plus bas).

• Seuls 6 élèves sur 30 semblent savoir ce qu'est l'inverse d'une fraction, dont un qui n'a pas réussi à échanger lesdeux valeurs, oubliant le TP portant là-dessus !

• L'opposé, bien que long à calculer, a eu plus de succès, visiblement les élèves se sont pris au jeu, en essayantde choisir entre $\frac{-n}{d}$ et $\frac{n}{-d}$ celle qui leur paraissait le mieux. Cependant, ils ont séparé en 4cas (numérateur positif ou négatif et dénominateur positif ou négatif) alors que seul le signe du dénominateurimporte. L'un d'eux a essayé de remplacer le "+" de la concaténation par un "-" dans Println(n-"/"+d);. De façongénérale, la distinction entre un affichage et un retour est assez floue. Et un algorithme est considéré commecorrect s'il passe victorieusement quelques tests, ce qui montre l'importance de la démarche expérimentale enalgorithmique...

Quelques copies :

Copie 1







fraction=function(n,d){

this.numer=n;

this.denom=d;

this.valeur=n/d;

if("n multiplié par d est égal ou supérieur à 0"){

this.signe="+";

} else {

this.signe="-";

}

this.affichage=function(){

return (n+"/"+d);

}

this.simplifie=function(){

var pgcdn=new pgcd(n,d);

return new fraction(n/pgcdn,d/pgcdn);

}

this.oppose=function(){

if("n supérieur à 0 & d supérieur à 0"){

return new fraction(-n,d);

}

else {

if("n inférieur à 0 & d inférieur à 0"){

return new fraction(n,-d);

}

} else {

if("n inférieur à 0 & d supérieur à 0"){

return new fraction(-n,d);

} else {

if("n supérieur à 0 & d inférieur à 0"){

return new fraction(n,-d);

}

}

}

}

}




Cet élève est d'ordinaire un des plus en difficulté dans la classe !

meilleure copie : signe


this.numer=n;

this.denom=d;

this.valeur=n/d;

if(this.valeur>=0){

this.signe="+";

} else {

this.signe="-";

}

}

Simplification tout objet :


this.numer=n;

this.denom=d;


Println(n+"/"+d);

}

this.simplifie=function(){

function pgcd(n,d){

a=n;

b=d;

while(b>0){

var c=a%b;

a=b;

b=c;

}

return a}

function simply(n,d){

var e=n/a;

var g=d/a;

}

return new fraction(e,g);

}

}






Bien entendu, il y avait beaucoup plus simple, par exemple return new fraction(n/a,d/a); !

Meilleure copie : opposé


this.numer=n;

this.denom=d;

this.valeur=n/d;

if(n/d>0){

if(n>0){

Println(-n+"/"+d);

} else {

Println(n+"/"+-d);

}

} else {

if(n>0){

Println(n+"/"+-d);

} else {

Println(-n+"/"+d);

}

}

}

Un seul élève (la meilleure copie) a trouvé une méthode additionnelle : l'affichage décimal (qui existait déjà en tantque propriété sous le nom valeur). Pourtant, on venait de voir la fonction carré qui, comme toute fonction numérique,est une méthode de l'objet fraction. Mais combien d'élèves de Seconde se rappellent que $\left(\frac{n}{d}\right)^2=\frac{n^2}{d^2}$ ?

++++ Production en ligne

Voici, toujours en JavaScript mais inclus dans du code html, une compilation des méthodes de plusieurs élèves de laclasse (il a fallu corriger quelques erreurs) :

Méthodes de l'objet fraction

Fraction à entrer:

---------------------------------------





La fraction entrée est Sa valeur approchée est Son inverse est et son opposée est

++++ Affichage

Une méthode intéressante pour l'objet fraction est son affichage. L'algorithme est intéressant parce que pour calculerla longueur du trait de fraction, on utilise une boucle (compter le nombre de chiffres du numérateur par exemple).L'idée est d'imprimer entre la ligne du numérateur et celle du dénominateur, une suite de signes "-" évoquant le traitde fraction :


l=Math.max(n.toString().length,d.toString().length);

Println(n);

Print("");

for (i=0;i<=l;i++){Print("-");}

Println("");

Println(d);

Println("");

}

Mais outre le fait que le résultat n'est pas si terrible, les élèves ont commencé à ce stade à faire un blocage sur laprogrammation objet, ce qui m'a mené à renoncer à aller plus loin...

On peut faire encore mieux pour l'affichage de la fraction :


Text("$\\frac{"+n+"}{"+d+"}$",-3,2);

}

Pour voir des exemples d'affichages élaborés de fractions dynamiques, on peut essayer le dossier CaRMetal en basde cet article sur l'algorithme de Stern-Brocot.

++++ Opérations

Les méthodes d'un objet (comme les fractions) sont typiquement des fonctions (obtention d'une fraction ou d'autrechose à partir d'une fraction). Mais comment implémenter une opération, qui fait intervenir une autre fraction ? En faitc'est plus facile que ça en a l'air, puisqu'il suffit de mettre l'autre fraction dans les fameuses parenthèses vides :





La recette en JavaScript

this.plus=function(g){

return new fraction(this.numer*g.denom+this.denom*g.numer,this.denom*g.denom);

}

this.moins=function(g){

return this.plus(g.oppose());

}

this.fois=function(g){

return new fraction(this.numer*g.numer,this.denom*g.denom);

}

this.sur=function(g){

return this.fois(g.inverse());

}

En fait il y a là quelque chose d'assez subtil, qui s'apparente à un fossé entre l'algèbre et l'algorithmique, voire entre leprof et ses élèves : La notation des opérations est infixée, donc

1. On ne parle plus de somme de deux fractions, mais d'une fraction additionnée avec une autre (nécessaire pourconsidérer la somme comme une propriété de l'objet)

2. On ne parle plus de différence entre deux fractions, mais de fraction soustraite à une autre (plus précisément, defraction à laquelle on soustrait une autre)

3. On ne parle plus de produit de fractions, mais d'une fraction que l'on va multiplier par une autre ; autrement dit,puisque cette méthode est représentée en JavaScript par une function, la fonction est linéaire.

4. On ne parle plus de quotient de fractions, mais de diviser une fraction par une autre, et la phrase du cours "diviserpar une fraction, c'est multiplier par son inverse" prend tout son sens ici.

Cette manière d'infixer les opérations, fondamentale en programmation objet puisqu'elle date de Smalltalk, permetaussi (grâce à la surcharge des opérations) de parler de la somme d'une fraction avec autre chose qu'une fraction(géré dans Python 2.7) mais modifie aussi considérablement le vocabulaire de la géométrie :

• Plutôt que de parler du milieu d'un segment ou d'une paire de points, on parle du milieu d'un point avec un autre,qui s'obtient sous DrGeoII en s'arrêtant à mi-chemin dans le parcours allant du premier point au second ;

• Plutôt que de parler de la parallèle à une droite par un point, on évoque le transport parallèle de la droite jusqu'àce qu'on arrive au point !

• Plutôt que de parler d'un vecteur d'origine et d'extrémité données, on parle du vecteur allant d'un point à un autre.• Même les cercles sont décrits différemment, avec l'idée de on part du centre, on règle l'écartement du compas

jusqu'à un point, on trace le cercle qui est plus procédural que descriptif.

Et que dire du pgcd, qui, infixé (on parle alors du pgcd avec b), éviterait peut-être qu'un élève de Seconde, à qui ondemande de calculer le pgcd de 24 et 32, remplisse une page de calculs pour calculer le pgcd de 24, la seconde pageétant bien entendu réservée au calcul du pgcd de 32 [4] ?

L'implémentation en CaRScript des propriétés et méthodes de l'objet complexe a été décrite ici.

++++ Pistes



http://fr.wikipedia.org/wiki/Smalltalk

http://fr.wikipedia.org/wiki/DrGeoII

#nb4

http://fr.wikipedia.org/wiki/CaRScript

http://fr.wikibooks.org/wiki/Programmation_objet_et_g%C3%A9om%C3%A9trie/CaRScripts_et_nombres_complexes



Puisque l'expérience n'est pas franchement une réussite, peut-être vaudrait-il mieux la mener dans d'autrescirconstances :

1. L'utilisation d'un langage plus concis que JavaScript pourrait éventuellement faciliter la tâche. On peut penser à Python et Ruby ou au tout nouveau BYOB...

2. Le sujet des fractions est peut-être trop abstrait, on peut lui préférer quelque chose de plus graphique, comme lagéométrie repérée ; ce qui permet de faire le cours assez vite, de façon active, et de faire découvrir par les élèvescomment fonctionnent les logiciels de géométrie (ils [5] sont programmés comme des objets...)

3. Mener ce genre d'activité sous forme de DM, ce n'est pas très approprié ; le sujet se prête nettement mieux à unenseignement par projet. Les réalisations des élèves peuvent être "concurrentes" avec des outils différents oudes langages différents...

[1] cette année encore, les filles semblent plus à l'aise que les garçons en algorithmique, indépendamment de leur niveau en maths. Pour les

méthodes en programmation objet, c'est plutôt le contraire.

[2] puis, par la suite, incorporé au code source d'un certain logiciel libre...

[3] question dont le but était juste de montrer qu'une propriété n'est pas nécessairement numérique (même si stricto sensu, un élément d'un

ensemble à deux nombres peut être considéré comme un nombre, élément de $\{0;1 \}$).

[4] Dans le même ordre d'idées, lorsqu'on enseignait les triangles semblables en Seconde, certains élèves répondaient, lorsqu'on leur demandait si

deux triangles étaient semblables, que seul l'un d'eux l'était...

[5] les logiciels de géométrie dynamique, pas les élèves !


http://fr.wikipedia.org/wiki/JavaScript

http://fr.wikibooks.org/wiki/Math%C3%A9matiques_avec_Python_et_Ruby

http://byob.berkeley.edu/

http://fr.wikibooks.org/wiki/Math%C3%A9matiques_avec_Python_et_Ruby/Ruby_et_g%C3%A9om%C3%A9trie

http://fr.wikibooks.org/wiki/Math%C3%A9matiques_avec_Python_et_Ruby/Ruby_et_g%C3%A9om%C3%A9trie

#nb5

#nh1

#nh2

#nh3

#nh4

#nh5


Documents

Découverte de la programmation objet en JavaScript : Le ...revue.sesamath.net/IMG/article_PDF/article_a317.pdf · cite, juste en passant, la possibilité de faire de la programmation