JavaScript/Anwendung und Praxis/Taschenrechner

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Beispiel baut mit Hilfe eines HTML-Formulars einen halbwegs "echt" aussehenden Taschenrechner auf. Der Anwender kann diesen Taschenrechner wie üblich bedienen. Außerdem berechnet dieser Taschenrechner auch Serienrechnungen wie 1+2+3+4+5+6+7+8+9 und beherrscht die Punkt-vor-Strich-Regel bei Rechnungen wie 1+2*3. Zusätzlich können die Wurzelfunktion, die Quadratfunktion, sowie der natürliche Logarithmus genutzt werden.

Inhaltsverzeichnis

[Bearbeiten] Vorüberlegungen

Dieser Taschenrechner wurde bereits 2001 von Stefan Münz vorgestellt. Damals wurden die Klickbuttons mit onclick-Attributen versehen, um die Funktionalität zu ermöglichen. Um eine zeitgemäßere dynamische Ereignisbehandlung einzusetzen, wurde auf diese JavaScript-spezifischen Attribute verzichtet, um das Markup streng von der JavaScript-Programmlogik zu trennen.

[Bearbeiten] HTML

Anhand dieses Beispiels können Sie studieren, wie man Formulareingaben mit JavaScript zur direkten Interaktion verwenden kann.

Beispiel: HTML-Gerüst ohne Funktion
<form id="calc">
	<output>0</output>
	<fieldset>
		<button></button>
		<button></button>
		<button>ln</button>
		<button>C</button>
 
		<button>7</button>
		<button>8</button>
		<button>9</button>
		<button>+</button>
 
		<button>4</button>
		<button>5</button>
		<button>6</button>
		<button>-</button>
 
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>×</button>
 
		<button>0</button>
		<button>.</button>
		<button>=</button>
		<button>÷</button>
	</fieldset>
</form>
Unser Taschenrechner besteht aus einem Formular mit einem output-Element für das Display und einem fieldset mit 20 Buttons. Sie benötigen keine weiteren Attribute oder Klassen.

[Bearbeiten] JavaScript

Schauen wir uns an, wie JavaScript mit dem obigen Dokument interagieren kann.

[Bearbeiten] Initialisierung

Beispiel ansehen …
"use strict";
 
document.addEventListener("DOMContentLoaded", function () {
 
  var form = document.getElementById("calc"),
      out = document.querySelector("#calc output"),
      overwrite = true;
 
  //weiterer Code
  //...
});
Im Head findet sich ein Scriptbereich mit einer Handlerfunktion von DOMContentLoaded, in der die HTML-Elemente mit getElementById, bzw. querySelector identifiziert und Variablen zugewiesen werden. Sollten die benötigten Elemente nicht gefunden werden, so verweigert das Script jegliche weitere Ausführung.

[Bearbeiten] Klickfunktionalität

Innerhalb der DOMContentLoaded-Handlerfunktion befindet sich ab Zeile 106 ein Anweisungsblock, der den Buttons dynamisch eine Funktionalität zuweist.

Beispiel ansehen …
// button functionalities
Array.from(document.querySelectorAll("#calc button")).forEach(function (b) {
	var c = b.textContent;
 
	switch (c) {
 
		case "9":
		case "8":
		case "7":
		case "6":
		case "5":
		case "4":
		case "3":
		case "2":
		case "1":
		case "0":
		case ".":
			b.addEventListener("click", function () {
				// remove leading zero?
				if (overwrite) {
 
					out.value = (c == "." ? "0." : c);
 
				} else {
 
					out.value += c;
				}
 
				overwrite = false;
			});
		break;
 
		case "+":
		case "-":
		case "×":
		case "÷":
			b.addEventListener("click", function () {
				out.value += " " + c + " ";
				overwrite = false;
			});
		break;
 
		case "√":
		case "x²":
		case "ln":
			b.addEventListener("click", function () {
				extra(c);
			});
		break;
 
		case "=":
			b.addEventListener("click", result);
		break;
 
		case "C":
			b.addEventListener("click", function () {
				out.value = 0;
				overwrite = true;
			});
		break;
	}
Mit b.textContent wird der Textknoten der geklickten Buttons ausgelesen und in einer switch-Fallunterscheidung verarbeitet.

Falls es sich um Zahlen handelt, wird die Eingabe c, also der Textinhalt des jeweiligen Buttons, dem output-Element übergeben, indem seine value-Eigenschaft damit befüllt wird. Bei einem Punkt wird mit dem ternären Operator out.value = (c == "." ? "0." : c); in einer bedingten Anweisung eine evtl. vorhandene führende Null entfernt, oder im Falle des Dezimalpunktes vorangestellt.

Auch die arithmetischen Operatoren +-/* werden in out.value eingefügt, allerdings in ihrer auf Taschenrechnern üblichen Schreibweise (× für Multiplikation und ÷ für Division).

Die mathematischen Sonderfunktionen , und ln werden über die Funktion extra aufgerufen.

Ein Klick auf = ruft die Funktion result auf.

[Bearbeiten] mathematische Sonderfunktionen

In der Funktion extra() werden „kompliziertere“ Berechnungen angestellt, die, wie Sie sehen werden, aber durch Methoden des Math-Objekts in jeweils nur einer Zeile erledigt sind.

Beispiel ansehen …
function extra (type) {
 
	switch (type) {
 
		case "√":
			out.value = Math.sqrt(result(true));
		break;
 
		case "x²":
			out.value = Math.pow(result(true), 2);
		break;
 
		case "ln":
			out.value = Math.log(result(true));
		break;
	}
 
	overwrite = true;
}
Für Wurzelberechnungen stellt das Math-Objekt die Funktion Math.sqrt() zu Verfügung.

Das Quadrat einer Zahl erreichen Sie mit einer Multiplikation mit sich selbst oder der Funktion Math.pow(result(true), 2).

Den Logarithmus ln berechnen Sie mit Math.log(result(true)).


[Bearbeiten] Ergebnisberechnung

Bei einem Klick auf = berechnet die Funktion result(noDisplay) das Ergebnis.

Beispiel ansehen …
function result (noDisplay) {
	var input = out.value,
		r = 0;
 
	// replace × with * and ÷ with / for eval()
	input = input.replace(/×/g, "*").replace(/÷/g, "/");
 
	// remove anything else that is not allowed here
	input = input.replace(/[^0-9. +\-*\/]/g, "");
 
	try {
 
		r = eval(input);
 
	} catch (e) {
 
		r = 0;
	}
 
	if (noDisplay !== true) {
		out.value = r;
		overwrite = true;
	}
 
	return r;
}
Mit einem RegEx werden nur Ziffern, der Dezimalpunkt und die vier Operatoren als gültige Zeichen für die Berechnung zugelassen (inklusive möglicher Leerzeichen). Dabei werden die üblichen Tastenbeschriftungen für Multiplikation und Division durch ihre JavaScript-Entsprechungen ersetzt. Das eigentliche Rechenergebnis wird mit der window-Methode eval berechnet.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML