Beispiel:JS-Anw-FktPlot-SVG-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<meta name="description" content="Plottet Funktionen">
<title>Beispiel: Funktionsplot auf SVG-Basis</title>
<style>
#plotarea { background-color:#ffffff; margin:0; height:calc(100vh - 19em); min-height:300px; }
#plotter { margin-bottom: 1em; border: none }
#plotter div { display:inline-block; vertical-align:top }
#plotter div:nth-child(1) label { display:block; }
#plotter div:nth-child(2) button { display:block; margin: 1em 0 0 5em;}
#idxmin, #idxmax { text-align:right; width:10em; }
#fkt1, #fkt2, #fkt3 { width:30em; }
</style>
<!-- Damit das Beispiel auch in der Frickl-Ansicht funktioniert, werden die Scripte per Javascript nachgeladen und der Eventlistener von DOMContentLoaded auf load geändert. -->
<!--<script src="JS-Anw-FktPlot-grafik_svg.js"></script>-->
<!--<script src="JS-Anw-FktPlot-plot.js"></script>-->
<!--<script src="JS-Anw-FktPlot-fkt-plotter.js"></script>-->
<script>
"use strict";
var SW = {};
SW.loadjs = function (jsfile) {
var s = document.createElement("script");
s.src = "/extensions/Selfhtml/example.php/Beispiel:"+jsfile;
s.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(s);
}
// load "JS-Anw-FktPlot-grafik_svg.js"
SW.loadjs("JS-Anw-FktPlot-grafik_svg.js");
// load "JS-Anw-FktPlot-plot.js"
SW.loadjs("JS-Anw-FktPlot-plot.js");
// load "JS-Anw-FktPlot-fkt-plotter.js"
SW.loadjs("JS-Anw-FktPlot-fkt-plotter.js");
</script>
</head>
<body>
<h1>Beispiel: Funktionsplot auf SVG-Basis</h1>
<p>Stellt mathematische Funktionen grafisch dar.</p>
<figure id="plotarea"></figure>
<div hidden id="wertetabelle" aria-live="polite"></div>
<fieldset id="plotter">
<div aria-live="polite">
<label id="f1">f<sub>1</sub>(x) = <input type="text" id="fkt1" value="sin(x)/x"></label>
<label id="f2">f<sub>2</sub>(x) = <input type="text" id="fkt2" value="sin(x)"></label>
<label id="f3">f<sub>3</sub>(x) = <input type="text" id="fkt3" value="cos(x)"></label>
</div>
<div>
<label>xmin = <input lang="en" type="number" step="any" id="idxmin" value="-20"></label>
<label>xmax = <input lang="en" type="number" step="any" id="idxmax" value="20"></label>
<button id="plotbutton">Plotten</button>
</div>
</fieldset>
<p id="vdeffkt">Vordefinierte Funktionen:
<button>AM</button>,
<button>PM</button>,
<button>sin(x)/x</button>,
<button>sinh</button>,
<button>cosh</button>,
<button>tanh</button> und
<button>Puls</button>.
</p>
<p id="jsfkt">Javascript unterstützt folgende Funktionen:
<button>abs</button>,
<button>acos</button>,
<button>asin</button>,
<button>atan</button>,
<button>cos</button>,
<button>exp</button>,
<button>log</button>,
<button>pow</button>,
<button>sin</button>,
<button>sqrt</button> und
<button>tan</button>.
Bitte den Definitionsbereich der Funktionen beachten.</p>
</body>
</html>
