Objectif :
Utiliser quelques outils mathématiques disponibles dans javascript et ses frameworks.
Préambule
Télécharche le dossier compressé (TPmath_js) contenant le framework mathJS et GIAC : TÉLÉCHARGER
Copie le fichier math.min.js dans le dossier JS de ton site web.
Ouvre dans ton éditeur de code Notepad++, la page .html qui correspond à Frameworks JS →MATHJAX.
Crée le fichier tpmath.js dans le dossier JS.
Rajoute dans la balise <head> de ta page .html, la ligne suivante :
<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 \(...\).
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
Faîtes un clic droit sur une formule réalisée en MathJax. Une option intéressante est Show Math As, puis TeX Command. Une fenêtre apparait alors, contenant le code LATEX correspondant à la formule. C'est très pratique, essayez !
Ne copiez/collez pas les formules à partir de la page web. Il faut les écrire vous même au clavier.
\(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).
\(\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).
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
Recopier cette partie de code dans ton fichier tpmath.js.
Analyser ce code.
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>
<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