Rechteck-Berechnung mit Javascript


Einfache Lösung

◀   Links ist eine Mini-Webseite mit einer einfachen Lösung eingebettet.
Mit Klick auf diesen Link wird die Mini-Webseite in einem eigenen Browser-Tab geladen.
Mit Klick auf diesen Link wird der HTML+Javascript Quelltext angezeigt.

Merkmale

Für Eingabe und Ausgabe wird nur 1 Formular verwendet.

Die Berechnung wird mit Klick auf ein <button>-Element ausgelöst. Damit wird die Javascript Funktion berechnen() gestartet.

Die Funktion liest die aktuellen Werte der beiden Eingabe-Felder ( <input>-Elemente) und weist sie an Variable zu (die hier absichtlich nicht gleich benannt sind wie die EingabeFelder).

Nach dem Lesen werden die Text-(String)-Daten mit Funktion parseFloat() in Zahlenwerte umgewandelt.

Zuletzt werden die Ergebnisse berechnet und in weitere 4 EingabeFelder des Formulars geschrieben.

Details zu → HTML, → Javascript (Formulare → Lesen und → Schreiben)


Nachteile

Die Werte der EingabeFelder werden nicht geprüft (validiert).
Man muss als Dezimal-Trennzeichen einen Punkt verwenden (keinen Beistrich !).
Das Programm kann auf leere EingabeFelder nicht sinnvoll reagieren.
Bei fehlerhafter Eingabe ist das Ergebnis nicht eindeutig oder nicht verständlich. Das Ergebnis NaN (Not a Number) ist für normale AnwenderInnen unklar.


Methode   toString()

Da EingabeFelder nur Strings als Werte enthalten, sollte man einen Zahlenwert in einen String umwandeln, bevor man ihn in ein Formular-Feld schreibt.

Dazu verwendet man die Standard-Methode toString()
Diese Umwandlung erleichtert das Verständnis, ist jedoch nicht unbedingt notwendig, da sie beim Schreiben von Daten in EingabeFelder automatisch angewendet wird.

Links: SelfHTML, W3Schools, Mozilla



Dazu genügt als einzige Maßnahme diese Anweisung im HTML <head>-Element:
<meta name="viewport" content="width=device-width"/>

Gute Amateur-Version

◀   Diese Mini-Webseite enthält ein wesentlich verbessertes Programm.
Mit Klick auf diesen Link wird die Mini-Webseite in einem eigenen Browser-Tab geladen.
Mit Klick auf diesen Link wird der HTML+Javascript Quelltext angezeigt.

Merkmale

Das Eingabe-Formular erhält ein onchange-Attribut. Bei jeder Änderung der Eingabe-Daten wird automatisch eine neue Berechnung veranlasst. Ein Bedienungs-Element zur Berechnung ist überflüssig.

Für Eingabe und Ausgabe werden getrennte Formulare verwendet.

Zum Lesen, Verarbeiten und Schreiben der Daten werden 3 sauber getrennte Funktionen verwendet. Die Daten werden zur Vereinfachung nicht zwischen den Funktionen ausgetauscht sondern in globalen Variablen verwaltet.

Die Eingabe-Daten werden geprüft (validiert), danach werden die zur Rechnung verwendeten Werte in die Eingabe-Felder geschrieben.


Nachteile

Die Funktion validate() erfordert zum Verständnis fortgeschrittene Kenntnisse. Sie ist nicht allgemein verwendbar, da sie nur Zahlenwerte >=0 zurückgibt.

Man könnte versuchen, die Werte der Ergebnis-Felder manuell zu ändern. Das wird verhindert, weil in diesem Fall die Funktion berechnen() automatisch ausgeführt und wieder die berechneten Ergebnisse eingetragen werden.

Alternative: Wenn man für die Ergebnisse <output>-Elemente verwendet, dann sind diese - wie gewünscht - nur lesbar.
Davon wurde hier abgesehen, weil veraltete Versionen des MSIE-Browsers keine <output>-Elemente kennen...


Details der Programmierung:
Mit Methode replace() wird ein Dezimal-Beistrich in einen -Punkt umgewandelt.
Mit den Anweisungen try...catch werden allfällige Fehler abgefangen und kontrolliert verarbeitet - In diesem Fall wird bei Fehler x=0 gesetzt.
Mit Funktion parseFloat() wird ein String in einen Zahlenwert umgewandelt. Allenfalls auftretende Fehler ergeben den Wert NaN
Mit Funktion isNaN() wird geprüft, ob der Wert NaN vorliegt. In diesem Fall wird x=0 gesetzt.
Mit Funktion Math.abs() wird der Absolutwert berechnet, d.h. ein allfälliges negatives Vorzeichen entfernt.



Allerdings unterstützen nicht alle Smartphone-Browser das onchange-Attribut des HTML <form>-Elements. Daher wird dieses Attribut auf jedes einzelne <input>-Element angewendet:
<input type="text" name="a" onchange="berechnen()"/>


Dieses Beispiel wird auch in zwei geringfügig erweiterten Versionen vorgestellt, mit der Live eine → Pixel-Grafik oder eine → Objekt-Grafik des angegebenen Rechtsecks gezeichnet wird.

Objekt-Version

◀   Diese Mini-Webseite enthält ein Programm mit professionellen Aspekten.
Mit Klick auf diesen Link wird die Mini-Webseite in einem eigenen Browser-Tab geladen.
Mit Klick auf diesen Link wird der HTML+Javascript Quelltext angezeigt.

Merkmale

Gute Absicherung. Fehler werden nach Möglichkeit korrigiert, Missverständnisse sind weitgehend ausgeschlossen.

Automatische Neu-Berechnung nach jeder Änderung der Vorgabe-Daten.

Ausgabe aller verwendeten und berechneten Daten in einer Tabelle. Eine manuelle Änderung der Ausgabe-Daten auf der Webseite ist unmöglich.

Die Formatierung entspricht zwar ungefähr den einfacheren Beispielen, dem User-Interface ist jedoch wesentlich mehr Aufwand gewidmet.

Das Programm verwendet Objekt-orientierte Anweisungen.
Mit Klick auf diesen Link wird der Javascript Quelltext des Objekts Rectangle angezeigt.


Nachteile

Die Programmierung einer Objekt-Klasse erfordert fortgeschrittene Kenntnisse und mehr Aufwand als typische 'Quick & Dirty' Programme.
Streng genommen unterstützt Javascript keine Klassen, die Objekte unterscheiden sich allerdings nur wenig von echten Klassen.

W3Schools (Objects-1, Objects-2, Properties, Methods, Prototypes)
MDN (Objects-1, Objects-2)
SelfHTML


Ausgewählte Programm-Details

Das <body>-Element erhält ein onload-Attribut. Mit der Funktion (Event-handler) do_onload() wird ein genau definierter Anfangs-Zustand nach dem Laden der Seite sichergestellt.

Die (nach Validierung) tatsächlich verwendeten Werte werden von Funktion daten_lesen() in die EingabeFelder eingetragen.

Zum Schreiben der berechneten Daten in die Zellen der Tabelle wird die Funktion dom_write() verwendet. Sie adressiert ein HTML-Element mit seinem (eindeutigen) id-Attribut und ersetzt danach dessen einziges child-Element (einen 'TextKnoten') durch die angegebenen Daten. Mit der Standard-Methode toFixed() wird ein Zahlenwert in einen String mit festgelegter Anzahl von Nachkomma-Stellen umgewandelt.
Diese (DOM)-Methode ist älter als die Ausgabe in <output>-Elementen und wird von allen gängigen Brpwsern unterstützt.

Profi-Version

◀   Diese Mini-Webseite enthält ein Programm mit teilweise professionellen Aspekten.
Mit Klick auf diesen Link wird die Mini-Webseite in einem eigenen Browser-Tab geladen.
Mit Klick auf diesen Link wird der HTML+Javascript Quelltext angezeigt.

Merkmale

Die Programmierung entspricht formal dem Stand der Technik.
Zur Eingabe werden → Schieberegler verwendet. Daher entfällt die ansonsten aufwändige Prüfung (Validierung) der Eingabe-Daten.
Die grünen Pfeil-Tasten dienen zur Fein-Einstellung der Regler.
Zur Ausgabe werden die Zellen einer Tabelle verwendet, die nur lesbar (ReadOnly) sind.
Die Lösung funktioniert ohne Änderung auf PC und Smartphones.

Das Programm verwendet Objekt-orientierte Anweisungen.
Mit Klick auf diesen Link wird der Javascript Quelltext des Objekts (der Pseudo-Klasse) Rectangle angezeigt.


Nachteile

Eine wirklich zeitgemäße Lösung verlangt auch eine grafische Ausgabe.