Hauptsatz der Differential- und Integralrechnung: Unterschied zwischen den Versionen
Markierung: Zurückgesetzt |
Markierung: Zurückgesetzt |
||
| Zeile 33: | Zeile 33: | ||
* Liegt der Graph von <math>f</math> unterhalb der x-Achse, ist das bestimmte Integral negativ. | * Liegt der Graph von <math>f</math> unterhalb der x-Achse, ist das bestimmte Integral negativ. | ||
* Liegt der Graph von <math>f</math> sowohl unterhalb als auch oberhalb der x-Achse, ist das bestimmte Integral die Differenz aus dem oberen Flächeninhalt und dem unteren Flächeninhalt. | * Liegt der Graph von <math>f</math> sowohl unterhalb als auch oberhalb der x-Achse, ist das bestimmte Integral die Differenz aus dem oberen Flächeninhalt und dem unteren Flächeninhalt. | ||
<html> | <html> | ||
<head> | <head> | ||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraphcore.js"></script> | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraphcore.js"></script> | ||
<script | <!-- KaTeX einbinden --> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"> | |||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script> | |||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraph.css" /> | ||
</head> | </head> | ||
| Zeile 44: | Zeile 45: | ||
<div id="box2" style="width:25%; aspect-ratio:3/2; margin-top:20px;"></div> | <div id="box2" style="width:25%; aspect-ratio:3/2; margin-top:20px;"></div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
// JSXGraph-Board erstellen | // JSXGraph-Board erstellen | ||
var board = JXG.JSXGraph.initBoard('box2', { | var board = JXG.JSXGraph.initBoard('box2', { | ||
| Zeile 93: | Zeile 93: | ||
[-2.0, 2.0], c1 | [-2.0, 2.0], c1 | ||
], { | ], { | ||
withLabel | withLabel: false, // Label in JSXGraph deaktivieren | ||
baseLeft: { // Start point | baseLeft: { // Start point | ||
visible: true, | visible: true, | ||
| Zeile 117: | Zeile 108: | ||
}); | }); | ||
// Integral-Label | // Text-Element für das Integral-Label erstellen | ||
var integralLabel = board.create('text', [1, 4, ''], { | |||
fontSize: 16, | |||
fixed: true, | |||
anchorX: 'left', | |||
anchorY: 'bottom', | |||
color: 'black' | |||
}); | |||
// Funktion zum Aktualisieren des KaTeX-Labels | |||
const updateLabel = () => { | |||
const a = i1.baseLeft.X().toFixed(2); // Untere Grenze | const a = i1.baseLeft.X().toFixed(2); // Untere Grenze | ||
const b = i1.baseRight.X().toFixed(2); // Obere Grenze | const b = i1.baseRight.X().toFixed(2); // Obere Grenze | ||
const value = i1.Value().toFixed(4); // Wert des Integrals | const value = i1.Value().toFixed(4); // Wert des Integrals | ||
const latexCode = `\\int_{${a}}^{${b}} f(x) \\, dx = ${value}`; | |||
}); | |||
// KaTeX rendern und in das Text-Element einfügen | |||
katex.render(latexCode, integralLabel.rendNodeText, { | |||
throwOnError: false | |||
}); | |||
}; | |||
// Event-Handler für die Aktualisierung des Labels | |||
i1.baseLeft.on('drag', updateLabel); | |||
i1.baseRight.on('drag', updateLabel); | |||
// Initiales Rendern des Labels | |||
updateLabel(); | |||
// Beschriftung der Funktion mit f | // Beschriftung der Funktion mit f | ||
| Zeile 133: | Zeile 145: | ||
color: 'blue' | color: 'blue' | ||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||