Kleiner JavaScript Kurs

JavaScript Framework "math.js"

In diesem Programm wollen wir in einem Textfeld eine Formel eingeben, die nach Klick auf die Schaltfläche berechnet werden soll. Dazu muss JavaScript den eingegebenen Text (z.B. "5*6") nach Zahlen (hier 5, 6), Rechenzeichen (hier "+") und Funktionen (z.B. "sin") durchsuchen und aus dem Text eine berechenbare Formel machen.
Für einfache Ausdrücke gibt es die Funktion eval(). eval('5*6') liefert "30" zurück.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>JavaScript Kurs; JavaScript Frameworks</title>
    <script>
        function berechnung(){
          var a=document.getElementById('meinEingabefeld_a').value;
          var ergebnis=eval(a);
          var ausgabe=document.getElementById('meinAusgabefeld');
          ausgabe.innerHTML = a + '=' + ergebnis;
        }
    </script>
</head>
<body>
    <h1>JavaScript Kurs; JavaScript Frameworks</h1>
    <h2>1. Formeln berechnen</h2>
    <!-- Eingabefelder auf HTML Seite; ID=meinEingabefeld_a  -->
    bitte eine Rechenanweisung (z.B. 5*6 ) eingeben: <input type="text" id="meinEingabefeld_a" />
    <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript  -->
    <input type="submit" value="Berechnen" onclick="berechnung();" />
    <br>
    <!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld-->
    Ergebnis: <h3 id="meinAusgabefeld"></h3>
</body>
</html>
So könnte es aussehen: JS_Kurs_B11a.html

Leider funktioniert das nicht mit Funktionen, da JavaScript statt sin() -> Math.sin() erwartet. Das kann man zwar programmieren, für verschachtelte Funktionen ist das aber sehr aufwendig. Für ^ (z.B. 2^3 = 8) erwartet JavaScript z.B. 
Math.pow(2 , 3)
So etwas muss man glücklicherweise nicht selbst programmieren; es gibt fertige Bibliotheken für alle möglichen Aufgaben.
Für Mathematische Aufgabenstellungen z.B math.js. 
<script src="js/math.js" type="text/javascript"></script>

Ich verwende z.Z. Version 9.2.0 vom 03.02.2021
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>JavaScript Kurs; JavaScript Frameworks</title>
	<script src="js/math.js" type="text/javascript"></script>
    <script>
        function berechnung(){
          var a=document.getElementById('meinEingabefeld_a').value;
          var ergebnis=math.evaluate(a);
          var ausgabe=document.getElementById('meinAusgabefeld');
          ausgabe.innerHTML = a + '=' + ergebnis;
        }
    </script>
</head>
<body>
    <h1>JavaScript Kurs; JavaScript Frameworks</h1>
    <h2>1. Formeln berechnen</h2>
    <!-- Eingabefelder auf HTML Seite; ID=meinEingabefeld_a  -->
    bitte eine Rechenanweisung (z.B. 5*6, sin(0.5), 5^3, sqrt(25), 
    auch die Konstanten e und PI können verwendet werden ) eingeben: 
    <input type="text" id="meinEingabefeld_a" />
    <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript  -->
    <input type="submit" value="Berechnen" onclick="berechnung();" />
    <br>
    <!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld-->
    Ergebnis: <h3 id="meinAusgabefeld"></h3>
</body>
</html>
So könnte es aussehen: JS_Kurs_B11b.html

math.js kann auch mit Variablen arbeiten 
var scope={x:5};
Ergebnis= math.evaluate(7*x+3*x , scope);
Damit lassen sich recht einfach Tabellen für einen Funktionsplotter programmieren (nächstes Beispiel !)

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>JavaScript Kurs; JavaScript Frameworks</title>
    <script src="js/math.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Berechnung(){
        var a=document.getElementById('meinEingabefeld_a').value;
        var i;
        var text=' '
        for (i=1;i<=10;i++) {
        var scope={x:i};
        Ergebnis= math.evaluate(a , scope);
        text=text + 'x=' + i + ' : ' + a + '=' + Ergebnis + '<br>';
        var Ausgabe=document.getElementById('meinAusgabefeld');
        Ausgabe.innerHTML = text;
        }
        }
    </script>
</head>
<body>
    <h1>JavaScript Kurs; JavaScript Frameworks</h1>
    <h2>2. Formeln berechnen mit math.js</h2>
     <!-- Eingabefelder auf HTML Seite; ID=meinEingabefeld_a  -->
    bitte eine Rechenanweisung (z.B. 5*x oder x^3 oder sin(x) x wird von 1 bis 10 hochgezählt) eingeben: <input type="text" id="meinEingabefeld_a" />

    <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript  -->
    <input type="submit" value="Berechnen" onclick="Berechnung();" />
    <br>
    <!-- Ausgabe auf HTML Seite; ID=meinAusgabefeld-->
    <h3 id="meinAusgabefeld"></h3>
</body>
</html>
So könnte es aussehen: JS_Kurs_B11c.html