Funktionsgraph mit HTML5

Zum Editieren des JavaScript-Codes ist der Editor von W3School.in eingebunden, da dieser keinerlei Werbung enthält.
Der untenstehende JavaScript-Code kann einfach in das linke Fenstser kopiert und das Programm mit RUN CODE im rechten Fenster angezeigt werden.
Falsche Eingabe können mit STRG-R rückgängig gemacht werden.
Ausgangspunkt ist der denkbar einfachste JavaScript-Code für einen Funktionsgraphen.
Alle Variablen werden deklariert, so dass der Code als "use strict" ausgeführt werden kann.
Diesem einfachen Code wird ein Koordinatensystem hinzugefügt, das skaliert wird.
- Für die Skalierung werden die maximalen Werte von x- und y-Achse festgelegt und daraus aus der Breite und Höhe des in HTML vorgegebenen Zeichenbereichs die Anzahl der Pixel pro Einheit berechnet.
- Die Verschiebung des Ursprung des Koordinatensystems und die Skalierung werden durch entsprechende Addition der Verschiebung und Multiplikation der x- und y-Werte mit der Anzahl der Pixel pro Einheit innerhalb des Funktionsterm der mathematischen Funktion wirksam.
Die Kommentare werden in Unterprogramme umgeformt.
Der Funktionsterm der mathematischen Funktion wird als JavaScript-Funktion mit Ausgabewert definiert.
Variablen werden durch Eingaben initialisiert.
Auch wenn JavaScript mit Prototypen arbeitet und keine Klassen braucht, kann das Programm schließlich sogar als Klasse geschrieben werden, um den Übergang zu Java zu motivieren.

Untenstehender Code kann in den Editor von W3Schools kopiert werden und dort direkt ausgeführt werden.

Funktionsgraph einer Normalparabel durch die Methode lineTo(x,y)

Ausgangspunkt ist der denkbar einfachste JavaScript-Code für einen Funktionsgraphen.
In einer Zählschleife, die Zählvariable wird dabei meist mit i bezeichnet, werden die Punkte des Graphen gezeichnet.

<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.moveTo(0,0);for(i=0;i<10;i++){ctx.lineTo(i,i*i)}ctx.stroke();</script>
</body></html>

Funktionsgraph einer linearen Funktion mit den Parametern a und b und einem Koordinatensystem

Die Parameter werden über Eingabefelder durch das HTML-Element Input eingegeben.
Damit die Eingabe verarbeitet werden kann, müssen die Anweisungen zu einer JavaScript-Funktion zusammengefasst und durch eine Schaltfläche aufgerufen werden.
Um beim Programmieren Fehler durch die Bezeichnung von Variablen zu vermeiden ist es günstig deren Deklaration mit var durch die Anweisung "use strict" zu erzwingen.
Die Koordinatenachsen werden in einer eigenen Funktion gezeichnet.
Der Graph wird in den Ursprung des Koordinatensystems verschoben und die Funktionsvariablen werden mit x und y bezeichnet.

<!DOCTYPE html><html><body onload=Koordinatenachsen()><canvas id="myCanvas" width="200" height="400"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><br><br>a<input id="a"><br><br>b<input id="b"><br><br><input type="button" value="Zeichnen" onclick="GraphZeichnen()"><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");function Koordinatenachsen() {ctx.moveTo(0,0);ctx.lineTo(0,canvas.height);ctx.moveTo(0,canvas.height/2);ctx.lineTo(canvas.width,canvas.height/2);ctx.stroke();}function GraphZeichnen() { var a=document.getElementById("a").value; var b=document.getElementById("b").value; ctx.moveTo(0,canvas.height/2-b); for (i=0;i<200;i=i+1){ ctx.lineTo(i,-a*i+canvas.height/2-b); ctx.stroke(); }}</script>

Funktionsgraph einer Parabel mit skaliertem Koordinatensystem und Parametern a,b,c

<!DOCTYPE html><html><body onload=Koordinatensystem()><form> a:<input id="a"> b:<input id="b"> c:<input id="c"> <p id="xmax"></p> <p id="ymax"></p> <input type="button" onclick="Graph()" value="Zeichne!"></form><br><canvas id="myCanvas" width="200" height="800" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>"use strict";//Festlegung und Wertzuweisung der Variablenvar cv = document.getElementById("myCanvas");var ctx = cv.getContext("2d");var xmax=prompt("xmax",10);//LängederAchsevar ymax=prompt("ymax",10);//LängederAchsevar xPixel=cv.width/(2*xmax);//PixelproEinheitvar yPixel=cv.height/(2*ymax);//PixelproEinheitvar x;var y;var Schrittweite=0.1;function f(x,a,b,c){y=a*x*x+b*x+c; return y }function Graph(){//Umwandlung wegen der Multiplikation im Funktionsterm nicht notwendigvar a = parseFloat(document.getElementById("a").value);var b = parseFloat(document.getElementById("b").value);var c = parseFloat(document.getElementById("c").value);x=-xmax;y=f(x,a,b,c);ctx.moveTo(xPixel*x+cv.width/2,-yPixel*y+cv.height/2);while (x<xmax){x=x+Schrittweite;y=f(x,a,b,c);ctx.lineTo(xPixel*x+cv.width/2,-yPixel*y+cv.height/2)}ctx.stroke();}function Koordinatensystem(){document.getElementById("xmax").innerHTML="max. Wert x-Achse = "+xmax;document.getElementById("ymax").innerHTML="max. Wert y-Achse = "+ymax;ctx.moveTo(cv.width/2,0);ctx.lineTo(cv.width/2,cv.height);ctx.moveTo(0,cv.height/2);ctx.lineTo(cv.width,cv.height/2);ctx.stroke();}
</script>
</body></html>

Funktionsgraph als einzelne Klasse mit entsprechenden Methoden

Es gibt keine globalen Variablen sondern nur Attribute der Klasse, die in der Constructor-Methode ohne var deklariert und als Methoden-Parameter (Klammer) initialisiert werden.
Man könnte auch einzelne Methoden als Klassen formulieren, wobei die Klassen durch Referenzen in Beziehung gesetzt werden müssten. Diese enthält-Beziehungen nennt man Aggregation. (Siehe auch Grundlagen der objektorientierten Programmierung)

<!DOCTYPE html><html><head>
</head>
<body><canvas id="myCanvas" width="500" height="500"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><script>
class Graph{ constructor(){ this.Zeichenflaeche(); this.Koordinatensystem(); this.zeichnen() }
Zeichenflaeche(){ this.canvas= document.getElementById("myCanvas"); this.ctx = this.canvas.getContext("2d"); } Koordinatensystem(){ //y-Achse this.ctx.moveTo(250,0); this.ctx.lineTo(250,500); //x-Achse this.ctx.moveTo(0,250); this.ctx.lineTo(500,250); this.ctx.stroke(); } f(x){ var y=-20*Math.sin(x/10)+250; return y; } zeichnen(){ this.ctx.moveTo(250,250); for(var x=250;x<500;x=x+1){ this.ctx.lineTo(x,this.f(x)); this.ctx.stroke(); } }}var Graph1=new Graph();</script></body></html>

Vererbung

<!DOCTYPE html><html><head>
</head>
<body><canvas id="myCanvas" width="500" height="500"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><script>
class Graph{  constructor(){    this.Zeichenflaeche();    this.Koordinatensystem();    this.zeichnen()  }
  Zeichenflaeche(){    this.canvas= document.getElementById("myCanvas");    this.ctx = this.canvas.getContext("2d");  }      Koordinatensystem(){    //y-Achse    this.ctx.moveTo(250,0);    this.ctx.lineTo(250,500);    //x-Achse    this.ctx.moveTo(0,250);    this.ctx.lineTo(500,250);    this.ctx.stroke();    }  f(x){    var y=-2*(x-250)+250;            return y;  }  zeichnen(){    this.ctx.moveTo(250,250);    for(var x=250;x<500;x=x+1){      this.ctx.lineTo(x,this.f(x));      this.ctx.stroke();    }  }}
class Parabel extends Graph {  constructor() {    super();  }  f(x){    var y=-1*Math.pow(0.1*(x-250),2)+250;            return y;}}class Sinus extends Graph {  constructor() {    super();  }  f(x){      var y=-20*Math.sin(x/10)+250;             return y;}}var Graph1=new Graph();var Parabel1= new Parabel();var Sinus1= new Sinus();</script></body></html>