Les nouvelles technologies pour l’enseignement des mathématiques
Intégration des TICE dans l’enseignement des mathématiques

MathémaTICE, première revue en ligne destinée à promouvoir les TICE à travers l’enseignement des mathématiques.

Les fonctions en engagement direct et en JavaScript

CaRMetal et GeoGebra permettent d’aborder les fonctions à partir de leurs représentations graphiques, donc de les rendre un peu moins abstraites.

Article mis en ligne le 9 mars 2012
dernière modification le 25 avril 2021

par Alain Busser

Le concept de fonction est visiblement très abstrait pour les élèves du lycée, alors quand on leur apprend à dériver ou intégrer la fonction, ils ne savent pas très bien quoi dériver ou intégrer. En fait, la notion d’expression même est abstraite, et les élèves confondent souvent les deux notions de fonction et d’expression (et le prof les y encourage parfois en demandant de factoriser la fonction après l’avoir dérivée...)

Sur la définition de l’engagement direct, voir sa génèse et son apparition dans un contexte différent.

Contrairement à GeoGebra, CaRMetal n’a que des repères orthonormés, ce qui le rend parfaitement adapté à la géométrie euclidienne (dans GeoGebra, parfois, les cercles ressemblent à des ellipses) mais pas trop adapté à l’étude expérimentale de fonctions. Voire...

Les deux logiciels permettent de jongler entre

  • la définition de la fonction
  • le tableau de valeurs
  • la représentation graphique

Et, de surcroît, ils permettent l’engagement direct, entre autres par le biais de leurs curseurs.

Expressions

Dans CaRMetal, une expression peut être stockée dans une « boîte d’entrée numérique », théoriquement destinée à caser des nombres modifiables dans la figure, mais en réalité on peut aussi y mettre du texte, un peu comme les cellules d’un tableur.

Si on décide d’appeler y la fameuse boîte, on se souviendra désormais qu’il s’agit d’y caser l’expression de la fonction f :

Dans tout l’article, on va prendre pour exemple la fonction $f(x)=\frac{x^3}{25}-x$ définie sur [-5 ;5]. C’est donc l’expression qu’on peut entrer dans y. Pour rendre un peu plus concrète cette expression, on peut la tester avec plusieurs valeurs de x, qui seront entrées comme valeurs numériques (« expressions » dans le vocabulaire de CaRMetal) dont le nom doit absolument être x pour que y le reconnaisse. Par exemple, on crée une expression x qu’on cursorise :

Enfin, il suffit de créer une nouvelle expression (E4 ci-dessous) et de lui donner y comme valeur :

On voit que l’image de -5 par la fonction est 0, mais en manipulant le curseur, on peut voir des images d’autres nombres par cette fonction : Engagement direct [1]...

Des exemples d’exerciciels en ligne utilisant cette technique sont visibles ici et .

On peut également étendre la technique à des fonctions de plusieurs variables (entrer la taille avec un point décimal au lieu de la virgule, la version de CaRMetal servant de plugin à ce site ayant semble-t-il quelques caprices) :

Cet exemple montre bien l’avance de CaRMetal en terme d’engagement direct : Pendant qu’on modifie la taille ou la masse, l’IMC se met à jour au fur et à mesure.

Tableau

Pour entrer un tableau de valeurs, il faut commencer par créer une fonction ; CaRMetal offre le choix entre une « user function » qui est juste une fonction (de 1, 2 ou 3 variables) non représentée graphiquement, et une « représentation graphique » qui est associée à une fonction ayant le même nom qu’elle. On en profite pour déterminer les bornes de son domaine de définition et le pas de la représentation graphique (facultatif) :

Pour aller vers un tableau de valeurs, on peut attacher un point à la représentation graphique [2] et afficher ses coordonnées ; le pas est réglable avec l’incrément du point :

En bougeant ce point , on lit sur la figure des couples de valeurs à placer dans le tableau.

GeoGebra possédant un tableur, il est possible de remplir automatiquement celui-ci par le mouvement du point A attaché à la courbe [3] :

On va voir ci-dessous qu’on peut faire de même avec CaRMetal, mais en JavaScript plutôt qu’avec un tableur [4].

Pour ça on va plutôt attacher un point au segment [-5,5] pour servir de pilote à M (le point de la courbe). Ce point s’appelle P et on peut lui donner un incrément de 0,01 par exemple :

Ce nom peut être récupéré dans JavaScript, et on peut créer un point M dont l’abscisse est celle de P et l’ordonnée, l’image de son abscisse par f ; ensuite, dans une boucle, on fait bouger P et on lit les coordonnées de M qu’on place dans un tableau :

Une petite variante consiste à placer une pause dans le script ce qui permet de voir comment il fonctionne, et de voir le tableau se construire au fur et à mesure :

Une autre variante consiste à construire le point M dans la figure, en lui donnant directement les coordonnées x(P) et f(x(P)), puis à n’écrire comme script, que celui créant une ligne du tableau :

Dans ce cas, pour avoir plusieurs lignes du tableau, on peut transformer ce script en CaRAScript, en l’attachant aux mouvements du point P :

L’hypersensibilité du script crée des lignes multiples qui n’existent pas dans le tableur de GeoGebra :


On peut détourner les scripts précédents pour qu’au lieu d’afficher un pseudo-tableau de valeurs dans la console de sortie, on crée un véritable tableau JavaScript ; par exemple, un tableau de tableaux, dont chaque entrée est un tableau [x,y] :


Une dernière variante consiste à créer dans JavaScript même un miroir de la fonction f, qui sera une vraie fonction JavaScript, en utilisant les possibilités d’introspection de CaRMetal :

  1. On crée un objet construction qui correspond à la figure complète (tous les objets construits) ;
  2. On demande à cet objet s’il possède un élément appelé « f » (à l’aide de sa méthode « find ») ;
  3. la méthode evaluateF() de cet objet permet de calculer l’image d’un nombre par la fonction associée ; on l’utilise dans la définition d’une fonction f en JavaScript, qui sera donc appelable à volonté depuis le script (on s’en servira surtout dans l’onglet suivant).

Le script donnant le tableau de valeurs est plus léger que la version précédente :

Maximum

En Seconde, on n’a pas de dérivée (voir l’onglet suivant) pour chercher le maximum d’une fonction sur un intervalle. Alors l’algorithme que découvrent spontanément les élèves avec un tableur [5] consiste tout simplement à chercher le plus grand des nombres du tableau de valeurs (voir l’onglet précédent pour voir comment on construit ce dernier).

Pour aider CaRMetal à placer le point sur courbe le plus haut possible (dont l’ordonnée sera donc le maximum), on peut simuler un de ces thermomètres à maxima : Créer un point Max dont l’ordonnée est le maximum entre elle-même et celle de M :

Après quelques coups de Monkey, on a la valeur du maximum à 4 décimales :


JavaScript possède également une fonction maximum ayant un nombre indéterminé de variables ; on peut la « mapper » sur un tableau (de valeurs) comme la fonction max de Python (langage) qu’on peut appliquer à une liste. En JavaScript, c’est « apply » qu’on invoque, en cherchant la méthode max de l’objet Math et en l’appliquant à un tableau (les lignes 1 à 6 et 12 à 15 sont expliquées dans l’onglet précédent) :

Pour avoir le maximum avec une meilleure précision, on peut changer l’intervalle de définition et le pas dans la ligne 13.

À titre de comparaison, voici la version Python3 (qui arrondit mieux que JavaScript) :

Une variante de cette méthode consiste à trier le tableau de valeurs dans l’ordre croissant et lire son dernier élément (qui est donc le plus grand de tous) :

Mais cette méthode, bien que basée sur l’algorithme de tri rapide, est plus lente que celle de la recherche de maximum vue précédemment.


CaRMetal possède son propre algorithme de recherche de maximum, qui cherche en fait, non le maximum, mais la valeur de x pour laquelle ce maximum est atteint [6]. Si on cherche le maximum sur l’intervalle [-4,-2], on crée une expression :

Pour avoir la valeur du maximum, il suffit donc de calculer l’image par f de l’expression précédente :

Bien entendu, JavaScript étant capable de piloter CaRMetal, on peut écrire un script en JavaScript qui utilise cette fonction max pour calculer le maximum (cela consiste en quelque sorte à faire sous-traiter le travail par CaRMetal, ce qui est intéressant compte-tenu de la précision de ce dernier) ; pour avoir l’abscisse du maximum (et en profiter pour conjecturer sa valeur exacte) :

Puis pour avoir le maximum lui-même :


Exemple : Bac STG CGRH métropole Réunion septembre 2007

Une entreprise produit des appareils électroménagers. Le coût horaire de production de x appareils est donné en euros par :
C (x) = x² + 50x + 100 pour x appartenant à [5 ; 40].

(...)

Le coût moyen de production d’un objet est égal à f (x) =C(x)/x pour x appartenant à [5 ; 40].

(...)

Pour quelle valeur de x le coût moyen est-il minimal ? Préciser alors sa
valeur.

L’algorithme se décrit ainsi :

  1. On représente graphiquement la fonction (oui, dans un repère orthonormé ! Pas grave, ce n’est pas pour la voir, c’est pour l’utiliser) ;
  2. on crée une expression appareils contenant le nombre d’appareils à fabriquer pour avoir un coût moyen minimal ;
  3. on récupère la valeur de cette expression : l’abscisse du minimum
  4. on crée une deuxième expression coutMin qui contient le coût moyen minimal ;
  5. on récupère sa valeur ymin
  6. on affiche les deux valeurs de xmin et ymin :

À part le fait qu’il faut un nombre entier d’appareils, cet algorithme marche plutôt bien, malgré le fait que la représentation graphique soit peu visible en repère orthonormé :

Dérivée

Coefficient directeur de la tangente

On peut définir le nombre dérivé de f en x comme le coefficient directeur de la tangente à la représentation graphique de f en x. Pour explorer cette notion, on peut utiliser la macro tangente qui construit cette tangente en un point de la courbe. Comme, pour CaRMetal, les coordonnées d’une droite sont celles d’un de ses vecteurs directeurs, il suffit de donner à la tangente t un « alias » égal au quotient de ces coordonnées pour afficher le nombre dérivé :

Dans la fenêtre de l’« historique », on a également accès à l’équation cartésienne de la droite :

ce qui permet de calculer aussi le nombre dérivé.

Cette méthode permet aussi d’introduire la notion de fonction dérivée, avec la trace d’un point dont l’ordonnée est le nombre dérivé en x (qui est son abscisse) :

En fait, la macro tangente utilise le calcul numérique (avec assez grande précision) du nombre dérivé que permet CaRMetal. La notation est diff. Par exemple, pour calculer le nombre dérivé en 2 :

Et pour représenter graphiquement la fonction dérivée, on peut utiliser ce script, qui explore, en la représentant graphiquement, la dérivée de la fonction cosinus (en radians) :

(le point de coordonnées (x ;f’(x)) est rouge, petit et laisse une trace sur l’écran). On peut aussi représenter graphiquement la fonction dérivée de f avec

  1. diff(f,x)

Notation différentielle

On peut également définir la dérivée comme quotient d’une petite variation de y par une petite variation de x. Ça tombe bien, CaRMetal possède une fonction d qui calcule ces petites différences.

On suppose donc qu’un point M est attaché à la représentation graphique de f, alors la petite [7] variation de l’abscisse est une expression égale à d(x(M)) (ou d(x(P)), ça revient au même) :

De même, on crée une expression E2 égale à d(y(P)) :

Après ça, il suffit de créer une nouvelle expression égale à E2/E1, et on a une approximation de la dérivée, avec une précision correcte tant que la dérivée n’est pas trop proche de 0.

Le résultat est visible en tête du diaporama téléchargeable en bas de l’article.

Cette activité a le mérite d’expliquer la notation $\frac{df}{dx}$ parfois utilisée pour la dérivée.


Fonctionnelle

La dérivée est une fonctionnelle, c’est-à-dire une fonction portant sur des fonctions (en effet, la dérivée d’une fonction est une fonction). Bien que ce concept soit encore plus abstrait que les fonctions numériques, il est très utile en analyse, la primitive, les transformées de Fourier et de Laplace étant elles aussi des fonctionnelles. Or JavaScript sait gérer des fonctionnelles, il suffit de définir une fonction dont la variable est une fonction, et qui retourne une fonction :

  1. function cube(x){
  2.         return x*x*x;
  3. }
  4.  
  5. function diff(f){
  6.         return function(x){
  7.                 return (f(x+0.000001)-f(x))/0.000001;
  8.         }
  9. }
  10.  
  11. for(x=-4;x<=4;x=x+0.4){
  12.         y=diff(cube)(x);
  13.         Println(x+" --> "+y);
  14. }

Télécharger

La première fonction est la fonction cube, comme son nom l’indique (une fonction numérique donc). La seconde est la dérivée d’une fonction f quelconque (calculée numériquement, mais c’est une fonctionnelle). Le script affiche un tableau de valeurs de la dérivée de la fonction cube, ce qui aide à conjecturer la forme de cette dérivée.

Cette fonctionnelle, ou un analogue, est implémentée dans JSXGraph ; voir à ce sujet le dernier onglet.

Intégrale

Avec notations différentielles

Dans l’onglet précédent, on avait divisé dy par dx pour avoir le nombre dérivé. Si, au contraire, on multiplie dx par f(x), on obtient l’aire d’un rectangle très fin, de largeur dx, et de hauteur f(x), comme ceux qu’on additionne dans les sommes de Riemann. Si on a donc les expressions suivantes dans la figure :

  1. E1, égale à d(x(P)) ;
  2. E2, égale à f(x(P)) ;
  3. E3, notée f(x)dx, égale à E1*E2 ;
  4. et E4, égale à sum(E3),

alors E4 est proche de l’intégrale de f entre -5 et x(P) (à condition de l’annuler lorsque P est tout à gauche). On voit l’effet produit dans la seconde figure du diaporama téléchargeable en bas de page. On constate que l’approximation devient de pire en pire au fur et à mesure que P se déplace vers la droite : Avec beaucoup d’additions, les erreurs d’addition s’accumulent.

Néanmoins cette activité montre plutôt mieux que les sommes de Riemann, l’origine de la notation $\int f(x) dx$, en particulier le pourquoi de cet encombrant dx...

La technique est numériquement plus stable en dimension 2 (diapo numéro 13 ; mais c’est avec les nombres complexes).


Calcul d’intégrale par Romberg

Pour calculer l’intégrale de f entre -5 et 0, on crée une expression CaRMetal égale à

  1. integrate(f,-5,0)

Si f est une fonction existant sur la figure (représentée ou non), une primitive de f est donc bien approchée par

  1. integrate(f,0,x)

Ce calcul numérique de primitive sera exploité dans l’onglet suivant, avec des fonctions de répartition.


Intégrateur en ligne

La figure ci-dessous est vide, elle ne contient que ce script :

Elle permet de calculer l’intégrale d’une fonction entre deux bornes :

La syntaxe est celle de CaRMetal, la liste de fonctions disponibles est décrite ici :

Probabilités

Les intégrales dépendant de leur borne supérieure permettent à CaRMetal de faire comme le calculateur de probabilité de GeoGebra, mais sans le superflu [8]. Voici des fichiers en ligne calculant et illustrant ces probabilités, avec leur procédé de fabrication (pour les détails, voir le diaporama téléchargeable en bas de page ; cliquer droit sur un objet pour voir comment il est fait) :

Loi exponentielle

  1. Pour commencer, on a créé un curseur lambda (le paramètre de la loi exponentielle) ;
  2. Puis on a créé la fonction de densité phi, égale à lambda*exp(-lambda*x) (elle devrait normalement être cachée, mais on l’a laissée visible pour faciliter son hacking d’un simple clic droit)
  3. puis on a représenté graphiquement cette dernière de 0 à 20 (valeur approchée de l’infini), en bleu ;
  4. puis on l’a représentée à nouveau, en rouge, sur un intervalle allant de 0 à l’abscisse d’un point attaché à une demi-droite (cachée) sur l’axe des abscisses ; on a rempli cette version de la fonction pour faire plaisir au petit prince qui n’arrête pas de dire « s’il vous plaît, dessine-moi une intégrale » ;
  5. Le texte en bleu comprend l’expression integrate(phi,0,20) qui est proche de 1 dès que lambda est suffisamment grand : Il sert à vérifier qu’on a bien une densité de probabilité.
  6. Le texte en rouge par contre, comprend l’expression integrate(phi,0,x(P)) qui est une intégrale dépendant de sa borne supérieure : On a donc bien un calculateur de probabilités :

Loi normale

  1. On a placé un point sur l’axe des ordonnées, plus précisément sur un segment caché qui limite sa course à [0,5 ;1] pour les ordonnées.
  2. On a créé une expression à droite, appelée confiance, égale à 2*y(P)-1 : Utile pour calculer des intervalles de confiance.
  3. On a créé une fonction de densité phi, correspondant à une loi normale centrée réduite, dont on ne sait pas calculer de primitive autrement que numériquement, avec le integrate de l’onglet précédent.
  4. On a créé la primitive en question comme fonction Pi valant integrate(phi ;-4 ;x), -4 ayant été choisi comme valeur approchée de $-\infty$
  5. On a représenté graphiquement la primitive, en rouge ;
  6. On s’en est servi pour chercher graphiquement, à coup de parallèles aux axes et d’intersections, l’antécédent de l’ordonnée du point bleu par la primitive (le nombre x tel que la probabilité que X soit entre -x et x est égale à la valeur voulue).
  7. on a représenté graphiquement la densité, une fois en pointillés entre -4 et 4, et une fois en remplie entre -x et x : Ceci dessine la probabilité que X soit entre -x et x, pour faire plaisir au petit prince qui semble décidément allergique à la communication textuelle !
  8. Le texte en bleu comprend l’expression integrate(phi,-x,x) qui calcule effectivement une probabilité ; sauf qu’on a simplifié le calcul de l’intégrale, puisqu’on dispose d’une primitive... On a donc là encore un calculateur de probabilités :

Théorème central limite

Grâce à un CaRAScript, la dernière figure du diaporama ci-dessous dessine la densité de la somme de n variables aléatoires uniformes [9], n étant cursorisé. Cette densité approche assez vite d’une courbe en cloche, ce qui illustre le théorème central limite. JavaScript est utilisé pour modifier l’expression de f(x), en construisant une chaîne de caractères ; cette figure est donc une synthèse de tout l’article.

JsxGraph

Qui dit JavaScript, dit JSXGraph. Il est donc naturel de voir comment ce logiciel gère les fonctions et leurs représentations graphiques.

Représentation graphique

Pour la représentation graphique, il suffit d’utiliser functiongraph avec les bornes de l’intervalle :

Tout d’abord, on doit placer dans la page un lien vers l’exécutable de JSXGraph (à l’intérieur du code html) :

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css"/>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore-0.92.js">
</script>

Ensuite, on crée (toujours dans le html) une division de type jxgbox (le fichier css de JSXGraph se charge de détailler son style) ; et dans un script (en JavaScript donc), on crée une figure avec des axes et un cadre :

<div id="box" class="jxgbox" style="width:400px; height:300px;"></div>
<script type="text/javascript">
var figure = JXG.JSXGraph.initBoard('box',{axis:true, boundingbox:[-5,3,5,-3]});


</script>

Enfin, on crée (toujours dans le script) une fonction f et sa représentation graphique :

  1. var f=function(x){return x*x*x/25-x;}
  2. var graphe=figure.create('functiongraph',[f,-5,5],{strokeColor:'blue'});

Télécharger

Voici le résultat (qu’on peut zoomer en ligne) :

Point sur courbe

En rajoutant un glider, on a aussi un point sur la courbe (le bouger pour voir ses coordonnées) :

<div id="box" class="jxgbox" style="width:400px; height:300px;"></div>
<script type="text/javascript">
var figure = JXG.JSXGraph.initBoard('box',{axis:true, boundingbox:[-5,3,5,-3]});
var f=function(x){return x*x*x/25-x;}
var graphe=figure.create('functiongraph',[f,-5,5],{strokeColor:'blue'});
var mobile=figure.create('glider',[graphe]);
</script>

Ce qui donne ceci :

Calcul différentiel et intégral

Voici quelques exemples :

Probabilités

JSXGraph possède des fonctions qui n’existent pas nativement en JavaScript et qui peuvent être intéressantes pour la classe (au moins au TBI) :

  • factorial pour les factorielles
  • binomial pour les coefficients binomiaux
  • riemannsum pour représenter graphiquement les coefficients binomiaux (au hasard, pour les comparer avec la courbe de Gauss)

L’avantage de l’intégration de JSXGraph dans html, c’est qu’on peut utiliser JavaScript pour faire un tableau html ; ici ça donne

<div id='tableau'>
<script type="text/javascript">
function f(x){
   return x*x*x/25-x;
}
var tabvaleurs='<table border="5"><tr><th>x</th><th>f(x)</th></tr>';
for(x=-5;x<=5;x=x+0.4){
   tabvaleurs+='<tr><td>'+x+'</td><td>'+f(x)+'</td></tr>';
}
tabvaleurs+='</table>';
document.getElementById('tableau').innerHTML=tabvaleurs;
</script>
</div>

qui produit l’effet suivant :

Figures à télécharger :


Bibliographie : fondements pour un enseignement de l’analyse en termes d’ordre de grandeur de R. Lutz, A. Makhlouf, E. Meyer, en particulier le chapitre sur les fonctions.

Webographie :