<!DOCTYPE html><html><head><style>\*mit css besser .flex-container { display: flex; background-color: DodgerBlue;}
.flex-container > div { background-color: #f1f1f1; width: 500px; margin: 10px;}*\</style></head><body onload="ZeichenflaecheAusgeben()"><form> a:<input id="a" value=0><br> b:<input id="b" value=0><br> c:<input id="c" value=0><br> <input type="button" onclick="Graph()" value="Zeichne Graph!"><br><br> xmax:<input id="xmax" value=10>x-Gitter:<input id="xGitterAnzahl" value=20><br> ymax:<input id="ymax" value=10>y-Gitter:<input id="yGitterAnzahl" value=20><br> <p id="xmaxWert"></p> <p id="ymaxWert"></p> <p id="xAnzahl"></p> <p id="yAnzahl"></p> <input type="button" onclick="ZeichenflaecheAusgeben()" value="neue Zeichenfläche"></form><br><canvas id="Zeichenfläche" width="400" height="400" style="border:1px solid #000000;">Your browser does not support the HTML canvas tag.</canvas><h2>Berechnungen</h2><div style=display:flex;"><div style="background-color: #f1f1f1; width: 25%; margin: 10px;"><h3>Nullstellen</h3><p>\(f(x)=ax^2+bx+c\\f(x)=0\\ax^2+bx+c=0\\x_{1.2}=\dfrac{-b\pm\sqrt{b^2-4bc}}{2a}\)</p><p>\(x_1=\)<span id="Nullstelle1"></span></p><p>\(x_2=\)<span id="Nullstelle2"></span></p></div><div style="background-color: #f1f1f1; width: 25%; margin: 10px;"><h3>Scheitel</h3></div></div>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script><script>"use strict";//erzwingt die Deklarierung von Variablen auch außerhalb einer Klasse
//nur eine Instanz möglich, da static => kein Konstruktor notwendigclass Zeichenflaeche { static xEinheiten=parseFloat(document.getElementById("xmax").value)*2; static yEinheiten=parseFloat(document.getElementById("ymax").value)*2; static xGitterEinheiten=parseFloat(document.getElementById("xGitterAnzahl").value); static yGitterEinheiten=parseFloat(document.getElementById("yGitterAnzahl").value); static c = document.getElementById("Zeichenfläche");//c wird häufig als Abkürzung für canvas benutzt static ctx = Zeichenflaeche.c.getContext("2d");
static Koordinatenachsen() { Zeichenflaeche.ctx.clearRect(0,0,Zeichenflaeche.c.width,Zeichenflaeche.c.height); Zeichenflaeche.ctx.beginPath(); Zeichenflaeche.ctx.lineWidth = 5; //xAchse Zeichenflaeche.ctx.moveTo(0,Zeichenflaeche.c.height/2); Zeichenflaeche.ctx.lineTo(Zeichenflaeche.c.width,Zeichenflaeche.c.height/2); //yAchse Zeichenflaeche.ctx.moveTo(Zeichenflaeche.c.width/2,0); Zeichenflaeche.ctx.lineTo(Zeichenflaeche.c.width/2,Zeichenflaeche.c.height); Zeichenflaeche.ctx.closePath(); Zeichenflaeche.ctx.stroke(); }
static Gitternetz() { Zeichenflaeche.ctx.beginPath(); //x-Gitter Zeichenflaeche.ctx.lineWidth = 0.5; Zeichenflaeche.ctx.moveTo(0,Zeichenflaeche.c.height/Zeichenflaeche.yGitterEinheiten); Zeichenflaeche.ctx.lineTo(Zeichenflaeche.c.width,Zeichenflaeche.c.height/Zeichenflaeche.yGitterEinheiten); for (var i=2;i<=Zeichenflaeche.yGitterEinheiten;i++){ Zeichenflaeche.ctx.moveTo(0,i*Zeichenflaeche.c.height/Zeichenflaeche.yGitterEinheiten); Zeichenflaeche.ctx.lineTo(Zeichenflaeche.c.width,i*Zeichenflaeche.c.height/Zeichenflaeche.yGitterEinheiten); } //yGitter Zeichenflaeche.ctx.moveTo(Zeichenflaeche.c.width/Zeichenflaeche.xGitterEinheiten,0); Zeichenflaeche.ctx.lineTo(Zeichenflaeche.c.width/Zeichenflaeche.xGitterEinheiten,Zeichenflaeche.c.height); for (var i=2;i<=Zeichenflaeche.xGitterEinheiten;i++){ Zeichenflaeche.ctx.moveTo(i*Zeichenflaeche.c.width/Zeichenflaeche.xGitterEinheiten,0); Zeichenflaeche.ctx.lineTo(i*Zeichenflaeche.c.width/Zeichenflaeche.xGitterEinheiten,Zeichenflaeche.c.height); } Zeichenflaeche.ctx.closePath(); Zeichenflaeche.ctx.stroke(); }
static AusgabeWerte() { document.getElementById("xmax").value=Zeichenflaeche.xEinheiten/2; document.getElementById("ymax").value=Zeichenflaeche.yEinheiten/2; document.getElementById("xmaxWert").innerHTML="max. Wert x-Achse = "+Zeichenflaeche.xEinheiten/2; document.getElementById("ymaxWert").innerHTML="max. Wert y-Achse = "+Zeichenflaeche.yEinheiten/2; document.getElementById("xAnzahl").innerHTML="Anzahl Gitternetzlinien auf x-Achse = "+Zeichenflaeche.xEinheiten; document.getElementById("yAnzahl").innerHTML="Anzahl Gitternetzlinien auf y-Achse = "+Zeichenflaeche.yEinheiten; }}
//mehrer Instanzen möglich, da nicht staticclass Parabel { x1; x2; constructor(a,b,c){ this.a=a; this.b=b; this.c=c; } zeichnen(){ var Schrittweite=0.1; var x=-Zeichenflaeche.c.width/Zeichenflaeche.xEinheiten; var y=this.a*x*x+this.b*x+this.c; Zeichenflaeche.ctx.moveTo(Zeichenflaeche.c.width/Zeichenflaeche.xEinheiten*x,Zeichenflaeche.c.width/Zeichenflaeche.yEinheiten*y); Zeichenflaeche.ctx.beginPath(); while (x<Zeichenflaeche.c.width/Zeichenflaeche.xEinheiten) { x=x+Schrittweite; y=this.a*x*x+this.b*x+this.c; Zeichenflaeche.ctx.lineTo(Zeichenflaeche.c.width/Zeichenflaeche.xEinheiten*x+Zeichenflaeche.c.width/2,-Zeichenflaeche.c.height/Zeichenflaeche.yEinheiten*y+Zeichenflaeche.c.height/2); } Zeichenflaeche.ctx.closePath(); Zeichenflaeche.ctx.stroke(); } berechnen(){ this.x1=(-this.b+Math.sqrt(this.b*this.b-4*this.a*this.c))/(2*this.a); this.x2=(-this.b-Math.sqrt(this.b*this.b-4*this.a*this.c))/(2*this.a); }}
//Anweisungen zu Objekten
function ZeichenflaecheAusgeben(){ Zeichenflaeche.xEinheiten=parseFloat(document.getElementById("xmax").value)*2; Zeichenflaeche.yEinheiten=parseFloat(document.getElementById("ymax").value)*2; Zeichenflaeche.xGitterEinheiten=parseFloat(document.getElementById("xGitterAnzahl").value); Zeichenflaeche.yGitterEinheiten=parseFloat(document.getElementById("yGitterAnzahl").value); Zeichenflaeche.Koordinatenachsen(); Zeichenflaeche.Gitternetz(); Zeichenflaeche.AusgabeWerte();}
function Graph(){ var a = parseFloat(document.getElementById("a").value); var b = parseFloat(document.getElementById("b").value); var c = parseFloat(document.getElementById("c").value); document.getElementById("xmaxWert").innerHTML="max. Wert x-Achse = "+Zeichenflaeche.xEinheiten/2; document.getElementById("ymaxWert").innerHTML="max. Wert y-Achse = "+Zeichenflaeche.yEinheiten/2; var ParabelBeispiel=new Parabel(a,b,c); Zeichenflaeche.ctx.lineWidth=2; ParabelBeispiel.zeichnen(); ParabelBeispiel.berechnen(); document.getElementById("Nullstelle1").innerHTML=Math.round(ParabelBeispiel.x1*100)/100; document.getElementById("Nullstelle2").innerHTML=Math.round(ParabelBeispiel.x2*100)/100;}</script>
</body></html>