Das EVA-Prinzip – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Das EVA-Prinzip

Das EVA-Prin­zip be­trifft alle An­ge­le­gen­hei­ten des Comp­u­ters und der Pro­gram­mie­rung und ist da­durch ein zen­tra­les Mus­ter in der Da­ten­ver­ar­bei­tung.

Wenn ein Nutzer einen Computer bedient, dann gibt er über die Maus, die Tastatur oder einem anderen Eingabegerät Informationen ein, im Computer werden diese verarbeitet und auf dem Bildschirm oder anderen Ausgabegeräten ausgegeben.
Diese Triade von Eingabe, Verarbeitung und Ausgabe heißt E.V.A.-Prinzip oder auch EVA-Prinzip und ist ein Grundprinzip in der Datenverarbeitung.

Es gilt für den Computer im Allgemeinen, genau wie für jedes einzelne Programm und jede Funktion. Zum Aufrufen dieser Seite habt ihr vielleicht die URL in den Browser eingetippt. Damit habt ihr über die Tastatur Eingaben vorgenommen, die im Rechner verarbeitet wurden und als Zeichen in der Adresszeile des Browsers auf dem Bildschirm ausgegeben wurden. Das Drücken der Enter-Taste wurde verarbeitet und vom Browser als Wunsch interpretiert, die eingegebene Adresse im Web aufzurufen. Die entsprechenden Netzwerkaktionen wurden durchgeführt und die Webseite dargestellt.
Überall passieren Eingaben, die verarbeitet und die Ergebnisse ausgegeben werden.

Beispielfall: Quadratzahl berechnen

Im letzten Artikel wurden eingegebene Strings verarbeitet und das Ergebnis ausgegeben.
Jetzt geht es darum, das gleiche mit Zahlen zu machen: In ein Eingabefeld soll ein Nutzer eine Zahl eingeben können, von der die Quadratzahl berechnet und ausgegeben wird.

Selbst versuchen

Öffnet die Konsole in eurem Browser.
Um eine Eingabe vom Nutzer entgegen zu nehmen, wird ein Eingabefenster mit der prompt-Funktion aufgerufen. Der Rückgabewert der prompt-Funktion, also die Eingabe des Nutzers, soll in einer Variable gespeichert werden.

var eingabe = prompt("Gib eine Zahl ein:");

Wird dieser Code ausgeführt, erscheint ein Dialogfenster, in das der Nutzer eine Zahl eingeben kann. Beim Bestätigen des Fensters wird der eingegebene Text der Variable eingabe hinzugefügt.

In diesem Beispiel wird die Zahl 5 eingegeben.

Wird die Variable eingabe ausgelesen, zeigt sich, dass ihr die eingegebene Zahl zugewiesen ist.

eingabe;
// => "5"

Um die Quadratzahl zu berechnen, wird eingabe mit sich selbst multipliziert. Das Ergebnis wird einer neuen Variable zugewiesen.

var quadrat = eingabe * eingabe;
quadrat;
// => 25

Dieses Ergebnis kann nur mit der alert-Funktion ausgegeben werden. Die Ausgabe kann als Satz formuliert werden, der durch String concatenation zusammengesetzt wird:

alert("Die Quadratzahl von " + eingabe + " ist " + quadrat);

Das Dialogfenster enthält den zusammengesetzten String

Entscheidend in dieser Lösung der Aufgabe sind drei Zeilen Code, die die Eingabe, die Verarbeitung und die Ausgabe repräsentieren.

var eingabe = prompt("Gib eine Zahl ein:");
var quadrat = eingabe * eingabe;
alert("Die Quadratzahl von " + eingabe + " ist " + quadrat);

Geht die Zeilen mehrfach ab und probiert, unterschiedliche Werte einzugeben.

Beispielfall: Weitere Rechnungen durchführen

Nun wird es etwas komplizierter: Statt einer, soll der Nutzer nun zwei Zahlen eingeben, aus denen der Quotient (Ergebnis von Division), das Produkt (Ergebnis von Multiplikation), die Differenz (Ergebnis von Subtraktion) und die Summe (Ergebnis von Addition) errechnet und ausgegeben wird.

Wieder gilt: Probiert erst, die Aufgabe selbst zu lösen, bevor ihr weiterlest. Es ist möglich, dass ihr dabei auf ein unerwartetes Ergebnis stoßt.

Zuerst gilt es, zwei Eingaben des Nutzers entgegen zu nehmen. Die wohl einfachste Lösung ist es, zwei Dialogfenster hintereinander anzuzeigen, und die Eingaben in zwei separaten Variablen zu speichern.

var eingabe1 = prompt("Gib eine Zahl ein:");
var eingabe2 = prompt("Gib eine zweite Zahl ein:");

Für die Ergebnisse der einzelnen Rechenoperationen können ebenfalls eigene Variablen angelegt werden. Im folgenden Code besitzen die Eingabe-Variablen beispielhaft die Werte 5 und 4.

eingabe1;
// => "5"
eingabe2;
// => "4"

var quotient = eingabe1 / eingabe2;
quotient; // Lest das Ergebnis aus
// => 1.25 // Ist eingabe1 5 und eingabe2 4, ergibt 5 / 4 = 1.25

var produkt = eingabe1 * eingabe2;
produkt;
// => 20

var differenz = eingabe1 - eingabe2;
differenz;
// => 1

var summe = eingabe1 + eingabe2;
summe;
// => "54"

Quotient, Produkt und Differenz liefern das korrekte Ergebnis, doch 5 + 4 ergibt eigentlich 9 und nicht 54. Das Ergebnis der Summe ist also völlig falsch. Wie konnte das passieren?

Schaut euch einmal die Werte von eingabe1 und eingabe2 in der Konsole an und achtet darauf, welchen Datentypen die Werte haben.

eingabe1;
// => "5"
eingabe2;
// => "4"

Die Werte stehen in Anführungszeichen. Das zeigt, dass sie Strings sind. Die Eingabe in das Dialogfenster wird grundsätzlich als String zurückgegeben.

Um Strings miteinander zu verketten, wird das Plus-Zeichen benutzt – das gleiche Zeichen also, mit dem auch Zahlen addiert werden.
Die anderen Rechenoperanden haben in JavaScript nur Bedeutung für Zahlen, nicht für Strings, und weil die Ausführungsumgebung erkennt, dass die Strings Zahlen enthalten, verrechnet sie die Werte als wären sie Zahlenwerte.
Bei der Addition, also beim Plus-Zeichen, passiert das nicht, weil hier davon ausgegangen wird, dass der Programmierer die String-Bedeutung meint und die Strings miteinander verketten möchte.

Aus dem Grund ergibt "5" + "4" "54" statt 9.

Konvertierung von Datentypen

Die Lösung ist, die Zahlen in echte Zahlenwerte umzuwandeln. Für diesen Zweck gibt es die Funktionen parseInt und parseFloat.

  • parseInt Int steht für Integer, zu Deutsch Ganzzahl. parseInt verarbeitet den Eingabewert zu einer Ganzzahl.
  • parseFloat Float steht für Floatingpoint number, zu Deutsch Fließkommazahl. parseFloat verarbeitet den Eingabewert zu einer Kommazahl.

Im Beispielfall genügt es, die Eingaben in kommalose, also Ganzzahlen zu konvertieren.

parseInt(eingabe1);
// => 5

parseInt(eingabe2);
// => 4

Das Ergebnis von parseInt steht nicht in Anführungszeichen und ist in der Konsole farblich anders gekennzeichnet. Die Werte entsprechen nun dem Datentyp Number, werden also vom Computer als echte Zahlen angesehen.

Ihr könnt den konvertierten Wert den bestehenden Variablen zuweisen und die Addition dann erneut probieren.

eingabe1 = parseInt(eingabe1);
// => 5
eingabe2 = parseInt(eingabe2);
// => 4

summe = eingabe1 + eingabe2;
summe;
// => 9

Nun liefert die Addition das korrekte Ergebnis

Ausgabe zusammenstellen

Damit die Ausgabe etwas strukturierter aussieht, soll sie Zeilenumbrüche enthalten. Ein Zeilenumbruch in einem String ist ein Sonderzeichen: Ein escaptes kleines n, \n.

alert("Quotient: "+quotient+"\nProdukt: "+produkt+"\nDifferenz: "+differenz+"\nSumme: "+summe);

Das Ergebnis enthält nun zusammengefasst eine Liste der Ergebnisse

NaN

Was passiert, wenn der Nutzer zwar eine Zahl eingeben soll, aber keine Zahl eingibt? Testet einmal, eine der Rechenoperationen mit Buchstaben vorzunehmen oder einen String mit Buchstaben der parseInt-Funktion zu übergeben.

"A" * "B"
// => NaN

parseInt("Test");
// => NaN

Der Rückgabewert ist NaN. NaN steht für Not a Number, was auf Deutsch Nicht eine Zahl oder besser formuliert Keine Zahl heißt.
Dieser Wert kommt in JavaScript überall vor, wo es Zahlen gibt, die keine Zahlen sind. Wenn zum Beispiel mit Werten gerechnet wird, die keine Zahlen, sondern Buchstaben sind, kann das Ergebnis entsprechend keine Zahl sein. Aus dem Grund wird in diesem Fall NaN zurückgegeben.