TP : Javascript et les maths

Ressources nécessaires :


Objectif : Utiliser quelques outils mathématiques disponibles dans javascript et ses frameworks.

Préambule

<script src="JS/tpmath.js"></script>

Partie 1 : L'éditeur de formules Mathjax

On veut écrire le cours sur la résolution d'équations du second degré avec la méthode du discriminant.

On remarque que le cours contient plusieurs formules mathématiques (certaines sont entourées en rouge). Pour les rédiger proprement il faut utiliser un éditeur de formule comme mathjax.js.

Comment écrire les mathématiques avec MathJax

MathJax utilise la syntaxe de LATEX pour l'écriture des mathématiques.

Math in-line et displayed

MathJax permet d'écrire des maths de deux manières différentes. Les maths dit in-line situés dans le corps du texte, et les maths dit displayed situés à part. Un petit exemple permettra d'y voir plus clair.

Exemple de maths in-line :

Compte tenu de la relation précédente, nous pouvons écrire que \(x=\int_0^k\frac{2t^2}{2\varphi+1}dt\). Ce qui mène à \(x_0=24\). Ce résultat est à mettre en relation avec la conclusion de l'étude 1.

Comme vous pouvez le constater, les maths in-line sont placés dans le corps du texte et les objets (intégrale, fraction...) ont la même hauteur que le texte.

Pour utiliser des maths in-lines, il faut les placer entre \(...\).

Ainsi, \(\frac{42}{23}\) produira \(\frac{42}{23}\).

Exemple de maths displayed:

Compte tenu de la relation précédente, nous pouvons écrire que \[x=\int_0^k\frac{2t^2}{2\varphi+1}dt.\] Ce qui mène à \[x_0=24.\] Ce résultat est à mettre en relation avec la conclusion de l'étude 1.

Cette fois-ci, les expressions mathématiques sont situées en dehors du texte, et elles sont centrées. Les objets telles que les intégrales et les fractions ont une taille naturelle.

Pour utiliser des maths en hors-texte, il faut placer l'expression entre \[...\].

Ainsi, \[\frac{42}{23}\] donnera\[\frac{42}{23}\]

Quelques remarques

Consulter le Mémento des commandes et environnements

Principaux environnements et généralités

  • \(u_{n}\) u_{n} Indice, n'oubliez pas d'échapper le _ en Markdown.
  • \(x^{3}\) x^{3} Exposant, n'oubliez pas d'échapper le ^ en Markdown.
  • \(\overbrace{a,b,c}\) \overbrace{a,b,c} Accolades au dessus.
  • \(\underbrace{a,b,c}\) \underbrace{a,b,c} Accolades en dessous.
  • \({\displaystyle \int}\) {\displaystyle \int} L'environnement displaystyle permet d'obtenir un affichage identique aux maths hors-ligne, mais en in-line. Pratique !
  • \(\begin{cases} x+y=3\\ z-3x=2\\ 5y-z=2\end{cases}\) \begin{cases} x+y=3\\ z-3x=2\\ 5y-z=2\end{cases} Système d'équations.
  • \(\{a\}\) \{a\} Accolades.
  • \({\displaystyle \left(\frac ab\right)}\) \left(\frac{a}{b}\right) Les commandes \left et \right permettent d'adapter la taille d'un délimiteur au contenu. Le résultat est plus esthétique et lisible que sans : \({\displaystyle (\frac ab)}\). Un \left doit toujours être refermé par un \right, le délimiteur à gauche et à droite peut par contre être différent. Pour ne pas mettre de délimiteur d'un côté, il suffit de mettre un \right. ou \left.. Par exemple : \({\displaystyle \left.\frac{a\left(1+\frac{\pi}{3}\right)}{b}\right|_{\ b\neq0}}\) , produit par {\displaystyle \left.\frac{a\left(1+\frac{\pi}{3}\right)}{b}\right| _{\ b\neq0}}. Les délimiteurs usuels sont ( ), [ ], \{ \}, | |.

Espacements

  • \(a\, b\) a\, b Espace fine.
  • \(a\; b\) a\; b Espace normale (même effet avec \ ).
  • \(a\quad b\) a\quad b Cadratin.
  • \(a\qquad b\) a\qquad b Double cadratin.

Caractères courants et polices

  • \(\forall\) \forall Quantificateur universel : pour tout (ou quelque soit).
  • \(\exists\) \exists Quantificateur existentiel : il existe.
  • \(\nexists\) \nexists Il n'existe pas.
  • \(\emptyset\) \emptyset Ensemble vide.
  • \(\infty\) \infty Infini.
  • \(\mathbb R\) \mathbb R Police pour les ensembles.
  • \(\mathcal N\) \mathcal N Police de "calligraphie" pour les figures géométriques, les lois de probabilités...
  • \(\mathrm d\) \mathrm d Police roman (pour une différentielle par exemple).
  • \(\text{du texte}\) \text{du texte} Permet d'insérer du texte.
  • \(\alpha,\beta,\gamma,\delta,...\) \alpha,\beta,\gamma,\delta,... Lettres grecques.
    Avec une majuscule pour accéder aux majuscules (exemple : \Omega donne \(\Omega\)).
  • \(\varphi, \varepsilon\) \varphi, \varepsilon Alternatives plus jolies à \(\phi\) et \(\epsilon\).
  • \(\aleph\) \aleph Première lettre de l'alphabet hébreu (aleph).
  • \(\hbar\) \hbar Constante de Planck réduite.
  • \(\ell\) \ell L minuscule calligraphique.
  • \(\nabla\) \nabla Nabla.
  • \(\neg\) \neg Négation logique.
  • \(\Re\) \Re Partie réelle d'un complexe.
  • \(\Im\) \Im Partie imaginaire d'un complexe.
  • \(\measuredangle\) \measuredangle Angle du plan.
  • \(\sphericalangle\) \sphericalangle Angle sphérique.

Opérateurs et relations courantes

  • \(\times\) \times Signe de la multiplication, à différencier du x et du *.
  • \(\frac ab\) \frac{a}{b} Fraction. La commande \dfrac{a}{b} en in-line produira une fraction affichée comme en displayed : \(\dfrac{a}{b}\).
  • \(\div\) \div Division.
  • \(\sqrt{x}\) \sqrt{x} Racine carrée de \(x\).
  • \(\sqrt[n]{x}\) \sqrt[n]{x} Racine nième de \(x\).
  • \(a\mid b\) a\mid b Divise.
  • \(\pm\) \pm Plus ou moins.
  • \(\neq\) \neq Différent de.
  • \(\leq\) \leq Inférieur ou égal.
  • \(\leqslant\) \leqslant Alternative plus naturelle à leq .
  • \(\ll\) \ll Très inférieur.
  • \(\geq\) \geq Supérieur ou égal.
  • \(\geqslant\) \geqslant Alternative plus naturelle à \geq .
  • \(\gg\) \gg Très supérieur.
  • \(\approx\) \approx Approximativement égal.
  • \(\simeq\) \simeq Approximativement égal.
  • \(\equiv\) \equiv Équivalent à (ou congru à).
  • \(\perp\) \perp Perpendiculaire à.
  • \(\sim\) \sim Approximativement (ou \(x\sim \mathcal N(\mu,\sigma)\) lorsque \(x\) suit une loi normale).

Analyse et autres opérateurs

  • \(\sum\) \sum Somme
  • \(\sum_{i=1}^n f(i)\) \sum_{i=1}^{n} f(i) Somme d'éléments indexés.
  • \({\displaystyle \sum_{i=1}^n f(i)}\) {\displaystyle \sum_{i=1}^n f(i)} Somme d'éléments indexés en in-line comme en mode displayed.
  • \(\prod\) \prod Produit.
  • \(\prod_{i=1}^n f(i)\) \prod_{i=1}^{n} f(i) Produit d'éléments indexés.
  • \({\displaystyle \prod_{i=1}^n f(i)}\) {\displaystyle \prod_{i=1}^n f(i)} Produit d'éléments indexés en in-line comme en mode displayed.
  • \(\coprod_{i=0}^n f(i)\) \coprod_{i=0}^{n} f(i) Coproduit de nombres indexés.
  • \({\displaystyle \coprod_{i=0}^n f(i)}\) {\displaystyle \coprod_{i=0}^n f(i)} Coproduit de nombres indexés en in-line comme en mode displayed.
  • \(\int_a^bf(x)\mathrm dx\) \int_a^bf(x)\mathrm dx Intégrale de Riemann.
  • \({\displaystyle \int_a^bf(x)\mathrm dx}\) {\displaystyle \int_a^bf(x)\mathrm dx} Intégrale de Riemann en in-line comme en mode displayed.
  • \(\lim_{x\to +\infty}f(x)\) \lim_{x\to +\infty}f(x) Limite.
  • \({\displaystyle \lim_{x\to +\infty}f(x)}\) {\displaystyle \lim_{x\to +\infty}f(x)} Limite en in-line comme en mode displayed.
  • \(\partial\) \partial Symbole de dérivée partielle.
  • \(\sin,\cos,\tan,\cot\) \sin,\cos,\tan,\cot Fonctions trigonométriques principales.
  • \(\arcsin,\arccos,\arctan\) \arcsin,\arccos,\arctan Fonctions trigonométriques inverses.
  • \(\sinh,\cosh,\tanh\) \sinh,\cosh,\tanh Fonctions trigonométriques hyperboliques.
  • \(\exp,\ln,\log\) \exp,\ln,\log Fonctions exponentielles.

Ensembles

  • \(\in\) \in Appartient à.
  • \(\notin\) \notin n'appartient pas à.
  • \(\subset\) \subset inclus dans.
  • \(\subseteq\) \subseteq Inclusion non stricte.
  • \(\not\subset\) \not\subset Non inclus dans.
  • \(\emptyset\) \emptyset Ensemble vide.
  • \(\supset\) \supset Contient (strictement).
  • \(\supseteq\) \supseteq Contient (non strictement).
  • \(\cap\) \cap Intersection.
  • \(\bigcap _{i=0}^n E_i\) \bigcap _{i=0}^n E_i Intersection d'ensembles indexés.
  • \({\displaystyle \bigcap _{i=0}^n E_i}\) {\displaystyle \bigcap _{i=0}^n E_i} Intersection d'ensembles indexés en in-line comme en mode displayed.
  • \(\cup\) \cup Union.
  • \(\bigcup _{i=0}^n E_i\) \bigcup _{i=0}^n E_i Réunion d'ensembles indexés.
  • \({\displaystyle \bigcup _{i=0}^n E_i}\) {\displaystyle \bigcup _{i=0}^n E_i} Réunion d'ensembles indexés en in-line comme en mode displayed.
  • \(\oplus\) \oplus Somme directe.
  • \(\bigoplus _{i=0}^n x_i\) \bigoplus _{i=0}^n x_i Somme directe d'élements indexés.
  • \({\displaystyle \bigoplus _{i=0}^n x_i}\) {\displaystyle \bigoplus _{i=0}^n x_i} Somme directe d'élements indexés en in-line comme en mode displayed.
  • \(\complement\) \complement Complémentaire.

Vecteurs et matrices

  • \(\vec{AB}\) \vec{AB} Vecteur.
  • \(\begin{pmatrix}a&b&c \\ d&e&f \\ g&h&i \end{pmatrix}\) \begin{pmatrix}a&b&c \\ d&e&f \\ g&h&i \end{pmatrix} Matrice.
  • \(\wedge\) \wedge Produit vectoriel.
  • \(\bigwedge_{i=0}^n \vec u_i\) \bigwedge_{i=0}^n \vec u_i Produit vectoriel de vecteurs indexés.
  • \({\displaystyle \bigwedge_{i=0}^n \vec u_i}\) {\displaystyle \bigwedge_{i=0}^n \vec u_i} Produit vectoriel de vecteurs indexés en in-line comme en mode displayed.
  • \(\otimes\) \otimes Produit tensoriel.
  • \(\bigotimes_{i=0}^n x_i\) \bigotimes_{i=0}^n x_i Produit tensoriel d'éléments indexés.
  • \({\displaystyle \bigotimes_{i=0}^n x_i}\) {\displaystyle \bigotimes_{i=0}^n x_i} Produit tensoriel d'éléments indexés en in-line comme en mode displayed.

Flèches

  • \(\leftarrow\) \leftarrow Flèche simple vers la gauche.
  • \(\longleftarrow\) \longleftarrow Longue flèche simple vers la gauche.
  • \(\rightarrow\) \rightarrow Flèche simple vers la droite. La commande \to produit la même flèche.
  • \(\longrightarrow\) \longrightarrow Longue flèche simple vers la droite.
  • \(\leftrightarrow\) \leftrightarrow Flèche simple pointant à droite et à gauche.
  • \(\longleftrightarrow\) \longleftrightarrow Flèche simple pointant à droite et à gauche (version longue).
  • \(\Leftarrow\) \Leftarrow Implication réciproque.
  • \(\Longleftarrow\) \Longleftrightarrow Implication réciproque (version longue).
  • \(\Rightarrow\) \Rightarrow Implication.
  • \(\Longrightarrow\) \Longrightarrow Implication (version longue).
  • \(\Leftrightarrow\) \Leftrightarrow Équivalence.
  • \(\Longleftrightarrow\) \Longleftrightarrow Équivalence (version longue). La commande \iff produit la même flèche.
  • \(\leftrightarrows\) \leftrightarrows Double flèche, comme pour les réactions chimiques non totales.
  • \(\rightleftharpoons\) \rightleftharpoons Équilibre chimique.
  • \(\nearrow\) \nearrow Flèche qui monte.
  • \(\uparrow\) \uparrow Flèche qui monte (bis).
  • \(\searrow\) \searrow Flèche qui descend.
  • \(\downarrow \) \downarrowFlèche qui descend (bis).
  • \(\overrightarrow{a,b,c}\) \overrightarrow Met une grande flèche au-dessus d'une longue notation.
  • \(\rightsquigarrow\) \rightsquigarrow Excitation, par un photon par exemple.

Masquer


Travail à faire

  1. Rajoute dans la balise <head> de ta page .html, les lignes suivantes :
<script type="text/javascript"	src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
  	MathJax.Hub.Config({
    	tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  	});
</script>
  1. Dans la balise <body>, créer une section.
  2. Ecrire, dans cette section, le cours sur le discriminant avec mathjax.js dans la page de votre site web.

Partie 2 : Le module Math de javascript

Un exemple

\(2x^2+3x+1=0\)
\(\Delta=1\)
Il y a deux solutions
\(x_1=-1\)
\(x_2=-\dfrac{1}{2}\)

Travail à faire

Voici le début du code du fichier tpmath.js du solveur d'équations ci-dessus.

function resol() {
var a=parseFloat(prompt("a=",""));
var b=parseFloat(prompt("b=",""));
var c=parseFloat(prompt("c=",""));
d = document.getElementById("zone_texte");
d.innerHTML="";
var delta=Math.pow(b,2)-4*a*c;

if (delta<0){
	if(b>=0 && c>=0){
		d.innerHTML="<p>"+a+"x²+"+b+"x+"+c+"=0<br>"+"\u0394 = "+delta+"<br>Pas de solution</p>";}
	else if(b<0 && c>=0){
		d.innerHTML="<p>"+a+"x²"+b+"x+"+c+"=0<br>"+"\u0394 = "+delta+"<br>Pas de solution</p>";}
	else if(b>=0 && c<0){
		d.innerHTML="<p>"+a+"x²+"+b+"x"+c+"=0<br>"+"\u0394 = "+delta+"<br>Pas de solution</p>";}
	else if(b<0 && c<0){
		d.innerHTML="<p>"+a+"x²"+b+"x"+c+"=0<br>"+"\u0394 = "+delta+"<br>Pas de solution</p>";}	
	}
else if (delta==0){//.....à compléter
  1. Recopier cette partie de code dans ton fichier tpmath.js.
  2. Analyser ce code.
  3. Voici le code de la page .html, recopier-le et complèter-le avec les infos contenues dans tpmath.js.
<div id=".....à compléter"   style="margin:20px;.....à compléter">
\(2x^2+3x+1=0\)
.....à compléter
</div>
<p><input type='button' value='Entrer une nouvelle équation' onClick=".....à compléter" style=".....à compléter">
</p>
  1. Complèter le fichier tpmath.js pour avoir les 3 cas. consulter les fonctions mathématiques en javascript

Partie 3 : JSXGraph un framework pour tracer des courbes et plus

Résolution graphique


Voici des exemples de ce qu'on peut faire avec JSXGraph : voir les exemples

Travail à faire

  1. Rajoute dans la balise <head> de ta page .html, les lignes suivantes :
<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.js"></script>
  1. Dans la balise <body>, recopier le code suivant :
<div id="box" class="jxgbox" style="width:500px;  height:500px;"></div>
<script>
 var bd = JXG.JSXGraph.initBoard('box', {boundingbox: [-12, 12, 12, -12], axis:true});
    a = bd.create('slider',[[1,-5],[8,-5],[-10,1,10]], {name:'a',snapWidth:0.1}),
    b = bd.create('slider',[[1,-6],[8,-6],[-10,0,10]], {name:'b',snapWidth:0.1}),
    c = bd.create('slider',[[1,-7],[8,-7],[-10,0,10]], {name:'c',snapWidth:0.1}),
    f = bd.create('functiongraph',[function(x){return a.Value()*x*x + b.Value()*x + c.Value();}]);
    q = bd.create('point',[function(){return (-b.Value()+Math.sqrt(b.Value()*b.Value()-4*a.Value()*c.Value()))/(2*a.Value());},0],{size:4,name:'A'});q.setProperty({fixed:true});
    p = bd.create('point',[function(){return (-b.Value()-Math.sqrt(b.Value()*b.Value()-4*a.Value()*c.Value()))/(2*a.Value());},0],{size:4,name:'B'});p.setProperty({fixed:true});
</script>
</div>

Partie 4 : le framework mathJS

Le framework math.js permet de calculer avec les nombres complexes (en utilisant la lettre i), et de simplifier les écriture de la bibliothèque Math. de javascript

Voici une mini calculatrice pour tester math.js :


saisie:  

Voici le site de mathJS : aller sur le site

Travail à faire

  1. Rajouter dans la balise <head> de ta page .html, la ligne suivante :
<script src="JS/math.min.js"></script>
  1. Recopier la fonction suivante dans le fichier tpmath.js :
function calcul(){
	calc=document.exemple.saisie.value;
	document.exemple.zonetext.value=document.exemple.zonetext.value+calc+"="+math.round(math.eval(calc),3)+"\n";
	document.exemple.saisie.value="";
	document.exemple.saisie.focus();
	}
  1. Recopier et compléter à l'aide de la fonction calcul() le code suivant dans le fichier .html :
<form name=".....à compléter" >
	<textarea name=".....à compléter" rows="10" cols="35" readonly="readonly"></textarea><br>
	saisie:<input type="text" onkeypress="if (event.keyCode==13){ calcul();return false;}" name=".....à compléter" autofocus/>  
	<input type='button' value='=' onClick=".....à compléter">
</form>

Partie 5 : Le calcul formel avec javascript

Voici un aperçu du module giac.js qui utilise le calcul formel.

Voici une calculatrice réalisée avec le module giac.js : voir la calculatrice