Parabel
Erläuterungen
Erläuterungen
Lernziele
Lernziele
Steuerstruktur Wiederholung für die Verbindung von Punkten
Klassen für gleichartige Objekte verwenden.
Verwendung von statischen Klassen für einzelne Objekte einer Klasse
Rechnen (Kalkulieren) auf Internetseiten (Ersatz von Tabellenkalkulation)
Darstellung und Umformung von mathematischen Formeln auf einer Internetseite (Ersatz von Textverarbeitung) mit nebeneinander angeordneten Bereichen (Flex-Container)
Aufbau
Aufbau
Flex-Container zur nebeneinander angeordneten Darstellung ohne CSS mit Hilfe von HTML (mit CSS auskommentiert)
Zeichenfläche und Parabel als Klasse
Zeichenfläche als statische Klasse ohne vorgegebenen Konstruktor mit statischen Eigenschaften und Methoden (Klassenname als Bezeichner) und Parabel
Parabel als Klasse mit vorgegeben Konstruktor zur Festlegung verschiedener Instanzen
Programme (function) zur Vorgabe der Zeichenfläche und Zeichnen des Graphen (Parabel)
Übung
Übung
Ergänzung der Berechnung des Scheitels
Schnitt zweier Parabeln mit Berechnung
Zeichnen der Graphen von linearen (nur 2 Parameter) und gebrochen rationalen (mit 3 Parametern) Funktionen
Qelltext
Qelltext
<!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>
.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>
Programm
Programm