Dehnung und Kraft

Beschreibung

JavaScript dient zum Programmieren von Webseiten, Webseiten werden mit HTML (HypertextMarkupLanguage) geschrieben und mit CSS (CascadingStyleSheets) formatiert.
- HTML arbeitet mit Elementen (in spitzen Klammern bezeichnet)
- JavaScript arbeitet mit Objekten, die Methoden und Attribute haben, die als Bezeichnung durch einen Punkt von den Objekten getrennt sind.
W3Schools ist zum Lernen für JavaScript gut geeignet.
Zum Zeichnen auf einer Webseite braucht man das HTML-Element Canvas (Leinwand)
- Mit der JavaScript-Methode getElementById(ID des Html-Elements Canvas) des JavaScript-Objekts document hat über eine entsprechende Variable Zugriff auf die Html-Zeichenfläche.
- Der Html-Zeichenfläche werden über die JavaScript-Methode getContext("2d") 2-dimensionale Zeichenobjekte zur Verfügung gestellt.
- W3Schools Referenz zu Canvas (allgemeine Beschreibung) bzw. W3Schools Tutorial zu Canvas
Einzelne Zeichenobjekte werden beim Zeichnen zu einem Pfad zusammengehängt.
- Wird der Pfad mit der Methode closePath() geschlossen entsteht eine Fläche, die mit Farbe mit der Methode fill() mit dem Attribut fillStyle gefüllt werden kann.
- Die Farbe der Pfade wird mit dem Attribut strokeStyle bestimmt und der Pfad mit der Methode stroke() gezeichnet.
- Die Farbe wird entweder durch spezielle Zahlen oder Text bestimmt.
Ein- bzw. Ausgabefelder und Schaltflächen werden durch das HTML-Element Input eingefügt.
- Da die die Ein- bzw. Ausgabe als Text geschieht, braucht man zum Rechnen in JavaScript die Umwandlung in eine Zahl durch die JavaScript-Methode parseInt() bzw. parseFloat(). Bei Multiplikationen geschieht die Umwandlung automatisch.
- Schaltflächen dienen zum Aufruf der programmierten JavaScript-Funktionen als Ereignisse.
Mathematische Formeln können über das Portal MathJax auf Webseiten dargestellt werden. Dafür muss in einem speziellem Script (in Head oder Body der HTML-Seite) der MathJax-Server eingebunden sein.

Programm-Versionen

Die Quelltexte der Programme können entweder

in einen Editor von W3Schools (direkte Anzeige) oder
einen Editor von Windows bzw. Online-Editor kopiert und abgespeichert werden (Anzeige in einem Browser).

einfaches Programm zum Zeichnen des Gummibandes

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="200" height="600"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas>
<script>//Variable für Zeichenfläche mit Zeichenobjektenvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");//Variable zum Zeichnen von Linie und Kreisvar x=100;var y=200;//Zeichnen des Gummibandes mit Farbectx.beginPath()ctx.moveTo(100,0);ctx.lineTo(x,y);ctx.strokeStyle="red";ctx.stroke();//Zeichnen des Enpunktes (Kreis) des Gummibandes mit Farbectx.beginPath()ctx.arc(x, y, 5, 0, 2 * Math.PI);ctx.fillStyle="black";ctx.fill();ctx.strokeStyle="black";ctx.stroke();</script>
</body></html>

Programm mit Eingaben und Dehnung

<!DOCTYPE html><html><body onload="Dehnung()">
<canvas id="myCanvas" width="200" height="600"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><br><p>Länge ohne Kraft: 50cm</p><p>Dehnung in cm </p><input type="number" id="val" value=0><br><br><input type="button" onclick="Dehnung()" value="Ziehen"><script>
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var x=canvas.width/2;var y0=50;var y;//Funktion wird beim Öffnen der Datei und bei der Schaltfläche aufgerufenfunction Dehnung(){ ctx.clearRect(0, 0, canvas.width, canvas.height); y=y0+parseInt(document.getElementById("val").value); ctx.beginPath(); ctx.moveTo(100,0); ctx.lineTo(x,y); ctx.strokeStyle="red"; ctx.stroke(); ctx.beginPath() ctx.arc(100, y0, 5, 0, 2 * Math.PI); ctx.strokeStyle="black"; ctx.stroke(); ctx.beginPath() ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle="black"; ctx.fill(); ctx.strokeStyle="black"; ctx.stroke();}</script>
</body></html>

Programm mit Berechnung der Kraft

<!DOCTYPE html><html><body onload="Dehnung()">
<canvas id="myCanvas" width="200" height="300"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><br><p>Länge ohne Kraft: 50cm</p><p>Dehnung in cm </p><input type="number" id="Dehnung" value=0><br><p>Dehnungskonstante in N/cm </p><input type="number" id="Dehnungskonstante" value=0><br><p>Kraft in N </p><input type="number" id="Kraft" value=0><br><br><input type="button" onclick="Dehnung()" value="Ziehen"><input type="button" onclick="Berechnen()" value="Berechnen"><script>
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var x=canvas.width/2;var y0=50;var y;//Funktion wird beim Öffnen der Datei und bei der Schaltfläche aufgerufenfunction Dehnung(){ ctx.clearRect(0, 0, canvas.width, canvas.height); y=y0+parseInt(document.getElementById("Dehnung").value); ctx.beginPath(); ctx.moveTo(100,0); ctx.lineTo(x,y); ctx.strokeStyle="red"; ctx.stroke(); ctx.beginPath() ctx.arc(100, y0, 5, 0, 2 * Math.PI); ctx.strokeStyle="black"; ctx.stroke(); ctx.beginPath() ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle="black"; ctx.fill(); ctx.strokeStyle="black"; ctx.stroke();}function Berechnen(){var D=parseInt(document.getElementById("Dehnung").value);var s=parseInt(document.getElementById("Dehnungskonstante").value);var F=D*sparseInt(document.getElementById("Kraft").value=F)}</script>
</body></html>

Programm mit physikalischen Formeln

<!DOCTYPE html><html>
<head><script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script></head>
<body onload="Dehnung()">
<canvas id="myCanvas" width="200" height="300"style="border:1px solid #d3d3d3;">Your browser does not support the canvas element.</canvas><br><p>Länge ohne Kraft: 50cm</p><p>Dehnung in cm </p><input type="number" id="Dehnung" value=0><br><p>Dehnungskonstante in N/cm </p><input type="number" id="Dehnungskonstante" value=0><br><p>Kraft in N </p><input type="number" id="Kraft" value=0><br><br><input type="button" onclick="Dehnung()" value="Ziehen"><input type="button" onclick="Berechnen()" value="Berechnen"><p>\(D=\dfrac{F}{\Delta s}\Rightarrow F=D\cdot \Delta s\)</p><script>
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var x=canvas.width/2;var y0=50;var y;//Funktion wird beim Öffnen der Datei und bei der Schaltfläche aufgerufenfunction Dehnung(){ ctx.clearRect(0, 0, canvas.width, canvas.height); y=y0+parseInt(document.getElementById("Dehnung").value); ctx.beginPath(); ctx.moveTo(100,0); ctx.lineTo(x,y); ctx.strokeStyle="red"; ctx.stroke(); ctx.beginPath() ctx.arc(100, y0, 5, 0, 2 * Math.PI); ctx.strokeStyle="black"; ctx.stroke(); ctx.beginPath() ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle="black"; ctx.fill(); ctx.strokeStyle="black"; ctx.stroke();}function Berechnen(){var D=parseInt(document.getElementById("Dehnung").value);var s=parseInt(document.getElementById("Dehnungskonstante").value);var F=D*sparseInt(document.getElementById("Kraft").value=F)}</script>
</body></html>