Parabel mit Formeln

Erläuterungen

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

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

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

<!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>

Programm

Page updated

Google Sites

Report abuse