Eingabe und Ausgabe

Kurz gesagt: Die Eingabe ist der Text, den ein Programm von der Tastatur liest: Im Kurs liest du ihn mit ask(), und Number() wandelt ihn in eine Zahl um, damit du rechnen kannst.

Problem

Das Programm kennt nur einen Namen

Das Programm begrüßt die Kundin mit Namen:

const name = "Maria";
console.log("Hallo, " + name + "!");

Ausgabe

Hallo, Maria!

Es funktioniert, aber es begrüßt alle als Maria. Der Name steht im Code. Für jede neue Kundin musst du das Programm ändern und neu starten. Du willst, dass das Programm selbst fragt.

Die Idee

Von der Tastatur lesen

Wenn das Programm liest, hält es an und wartet. Die Person tippt und drückt Enter. Was sie tippt, ist die Eingabe des Programms.

greet.js

import { createInterface } from "node:readline";

const rl = createInterface({ input: process.stdin });
const lines = rl[Symbol.asyncIterator]();
async function ask(question) {
  process.stdout.write(question);
  return (await lines.next()).value;
}

const name = await ask("Wie heißt du? ");
console.log("Hallo, " + name + "!");
rl.close();

Eingabe

Maria

Ausgabe

Wie heißt du? Hallo, Maria!

JavaScript hat keinen kurzen, fertigen Befehl zum Lesen von der Tastatur. Deshalb stehen ganz oben ein paar Zeilen, die einen Helfer bauen: ask. ask("Wie heißt du? ") gibt die Frage aus, wartet, bis die Person eine Zeile tippt und Enter drückt, und liefert das Getippte. await davor heißt „warte auf die Antwort“. rl.close(); am Ende schließt das Lesen, wenn das Programm nichts mehr liest.

Was import, async, function und await bedeuten, lernst du später. Funktionen kommen im Modul „Funktionen“. Kopiere diese Zeilen vorerst an den Anfang jedes Programms, das liest. Später in den Lektionen zeigen wir sie nicht mehr, nur die Zeilen danach.

Eingabe und Ausgabe sind hier getrennt gezeigt. In der Konsole erscheint der Name dort, wo du ihn tippst: nach „Wie heißt du? “. ask gibt die Frage mit process.stdout.write aus, ohne neue Zeile: Die Antwort steht in derselben Zeile.

Genauer, für Neugierige

• ask("") mit leeren Anführungszeichen liest nur, ohne Frage.
• Ist die Eingabe zu Ende (es gibt keine Zeilen mehr), liefert ask den Wert undefined, „kein Wert“.
• readline hat auch rl.question(), das du in Beispielen im Internet sehen wirst. Kommt die Eingabe aus einer Datei, verliert es Zeilen. Deshalb nutzen wir es hier nicht.

Problem

12 + 30 = 1230

Der Kassierer gibt zwei Zahlungen ein, 12 € und 30 €. Das Programm soll die Gesamtsumme zeigen:

const first = await ask("");
const second = await ask("");
const total = first + second;
console.log("Gesamt: " + total + " €");
rl.close();

Eingabe

12
30

Ausgabe

Gesamt: 1230 €

Statt 42 kam 1230 heraus. Das Programm hat sich nicht verrechnet. Es hat überhaupt nicht gerechnet.

Hier gibt es keine Frage: ask("") liest nur eine Zeile.

Die Idee

Vom Text zur Zahl

Was die Person auch tippt, ask() gibt Text zurück. „12“ und „30“ sind zwei Texte, und + zwischen Texten klebt sie zusammen. Um zu rechnen, wandle den Text in eine Zahl um:

const first = Number(await ask(""));
const second = Number(await ask(""));
const total = first + second;
console.log("Gesamt: " + total + " €");
rl.close();

Eingabe

12
30

Ausgabe

Gesamt: 42 €

Text in einen Wert eines anderen Typs umzuwandeln heißt Parsen (parse).

• Number(...) liefert eine Zahl, ganz oder mit Komma: In JavaScript sind sie ein Typ.
• Es gibt auch parseInt(...) und parseFloat(...). Sie lesen die Ziffern am Anfang des Textes und hören beim ersten anderen Zeichen auf: parseInt("12 €") ist 12.

Die Summe hier ist die erste Rechnung im Kurs. Subtraktion, Multiplikation und Division kommen in der nächsten Lektion.

const first = Number(await ask(""));
const second = Number(await ask(""));
const total = first + second;
console.log("Gesamt: " + total + " €");
rl.close();

Schritt für Schritt, in Worten

1. Die Person tippt 12 und Enter. await ask("") gibt den Text "12" zurück, keine Zahl.
2. Number wandelt den Text in die Zahl 12 um. Sie kommt in first.
3. 30 nimmt denselben Weg: Text, Parsen, eine Zahl in second.
4. Jetzt addiert + Zahlen: 12 + 30 = 42.
5. Ausgegeben wird „Gesamt: 42 €“.

Genauer, für Neugierige

• Ist der Text keine Zahl (zum Beispiel „zwölf“), stoppt JavaScript nicht. Number liefert NaN (Not a Number, „keine Zahl“), und eine Rechnung mit NaN ergibt wieder NaN. Eine leere Zeile ergibt 0. Leerzeichen am Rand stören nicht: Number(" 12 ") ist 12.

console.log(Number(" 12 "));
console.log(Number("3.5"));
console.log(Number("zwölf"));
console.log(Number("3,5"));
console.log(Number(""));
console.log(Number("zwölf") + 1);

Ausgabe

12
3.5
NaN
NaN
0
NaN

• Number will immer einen Punkt, egal wie der Computer eingestellt ist: Number("3,5") ist NaN.

Probier es aus

Wie viele Tickets?

Das Programm liest, wie viele Erwachsene und wie viele Kinder es sind.

Eingabe

2
3

Was gibt das Programm aus?

const adults = Number(await ask(""));
const children = Number(await ask(""));
console.log("Tickets: " + adults + children);
rl.close();

Antwort

Tickets: 23

Tickets: 5

Das Programm stoppt mit einem Fehler

Prüfen

Die Idee

Zahlen so, wie du sie willst

In der letzten Lektion kam der Preis 49.90 als 49.9 heraus. Bei einem Preis willst du immer zwei Stellen nach dem Dezimalpunkt. Das ist formatierte Ausgabe:

const product = "Kopfhörer";
const price = 49.9;
const qty = 2;
console.log(`${product}: ${price.toFixed(2)} €`);
console.log(`${qty} Stück im Warenkorb`);
const label = `Preis: ${price.toFixed(2)} €`;
console.log(label);

Ausgabe

Kopfhörer: 49.90 €
2 Stück im Warenkorb
Preis: 49.90 €

Text in Backticks, `, ist ein Template-Literal: Du schreibst die Werte direkt hinein, in ${…}. Das heißt String-Interpolation.

price.toFixed(2) liefert die Zahl als Text mit genau 2 Stellen nach dem Punkt. toFixed(0) hat keine Stellen nach dem Punkt, toFixed(3) hat drei.

Der Wert in der Variable ändert sich nicht. Das Format entscheidet nur, wie er bei der Ausgabe aussieht.

Genauer, für Neugierige

• Tausendertrennzeichen und Ausrichten in Spalten:

const total = 1234.5;
console.log("Gesamt: " + total.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €");
console.log("Kaffee".padEnd(10) + "|" + (2.5).toFixed(2).padStart(8));
console.log("Laptop".padEnd(10) + "|" + (1299.0).toFixed(2).padStart(8));

Ausgabe

Gesamt: 1,234.50 €
Kaffee    |    2.50
Laptop    | 1299.00

toLocaleString("en-US", …) schreibt die Zahl nach den Regeln des amerikanischen Englisch, mit Tausendertrennzeichen. padEnd(10) füllt den Text rechts mit Leerzeichen auf 10 Zeichen auf, und padStart(8) links auf 8.

• toFixed folgt den regionalen Einstellungen nicht: Ein Punkt bleibt auf jedem Computer ein Punkt. Wenn du ein Dezimalkomma willst, wie man es im Deutschen schreibt, setze es selbst:

const price = 49.9;
console.log("Preis: " + price.toFixed(2).replace(".", ",") + " €");

Ausgabe

Preis: 49,90 €

Probier es aus

Zwei Stellen

Eine Nacht im Hotel kostet 65.5 €. Es soll „Pro Nacht: 65.50 €“ herauskommen. Was gehört in die Lücke?

console.log(`Pro Nacht: ${price.} €`);

Prüfen

Probier es aus

Finde den Fehler

12 Tickets sind schon reserviert, und das Programm fügt so viele hinzu, wie du eingibst. Bei der Eingabe 4 gibt es „Reserviert: 124“ aus. In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

1const reserved = 12;2const tickets = await ask("Anzahl Tickets: ");3const total = reserved + tickets;4console.log("Reserviert: " + total);5rl.close();

Prüfen

Übung

Programme, die fragen

Löse die Aufgaben in deinem Editor. Die Eingabe ist eine Zeile pro Wert. Gib keine Fragen wie „Gib einen Namen ein:“ aus, damit deine Ausgabe mit dem Beispiel übereinstimmt: Schreib ask("").

1. Begrüßung mit Namen. Lies einen Namen und begrüße die Person.

Eingabe

Maria

Ausgabe

Hallo, Maria!

2. Summe zweier Zahlen. Lies zwei ganze Zahlen und gib die Rechnung aus.

Eingabe

17
25

Ausgabe

17 + 25 = 42

3. Zwei Texte in einem. Lies zwei Texte und gib sie zusammen aus, mit einem Leerzeichen dazwischen.

Eingabe

Veliko
Tarnovo

Ausgabe

Veliko Tarnovo

4. π mit zwei Stellen. Speichere π als 3.14159265358979 in einer Variable und gib es mit zwei Stellen nach dem Punkt aus. Den fertigen Wert Math.PI gibt es in der nächsten Lektion.

Ausgabe

3.14

Weitere Aufgaben

• Alter. Lies einen Namen und ein Alter (eine ganze Zahl) und gib „Maria ist 19 Jahre alt.“ aus.
• Eine Visitenkarte von der Tastatur. Lies einen Namen, einen Beruf und eine Telefonnummer und gib damit die Visitenkarte aus der Lektion „Dein erstes Programm“ aus.
• Ein Preis mit zwei Stellen. Lies einen Preis als Kommazahl und gib ihn mit zwei Stellen und dem Eurozeichen aus: Bei der Eingabe 7.5 ist die Ausgabe Preis: 7.50 €.
• Summe zweier Preise. Lies zwei Preise als Kommazahlen und gib ihre Summe mit zwei Stellen aus: Bei der Eingabe 12.4 und 3.15 ist die Ausgabe Gesamt: 15.55 €.

Test

Teste dich

1. Was gibt await ask("") zurück?

Immer TextEine Zahl, wenn eine Zahl eingetippt wurdeEin einzelnes Zeichen

2. Du liest die Texte "12" und "30". Was ergibt first + second?

Einen Fehler42"1230"

3. Was macht Number("25")?

Es rundet eine ZahlEs liest eine ganze Zahl von der Tastatur und gibt sie ausEs wandelt den Text "25" in die Zahl 25 um

4. const a = 2; const b = 3; Was gibt "Summe: " + a + b aus?

Summe: 5Das Programm stoppt mit einem FehlerSumme: 23

5. Wie gibst du 7.5 als 7.50 aus?

console.log(7.5);console.log((7.5).toFixed(0));console.log((7.5).toFixed(2));

Prüfen

Lektion von vorn beginnen

Verwandte Lektionen

• Baut auf: Dein erstes Programm · Variablen und Typen
• Geht weiter in: Operatoren und Arithmetik · Bedingungen · Schleifen · Arrays
• Aufgaben zum Thema: Sprachgrundlagen