Ein- und Ausgabe

💡

Dauer: 20 Minuten

  • Ausgaben erzeugen
  • Eingaben für Programme

Ziel: Programme für Berechnungen schreiben

Am Anfang schreiben wir zunächst nur kleinere Programme. Damit aber etwas Sinnvolles oder Interessantes berechnet werden kann, benötigen wir Mechanismen, um vom Benutzer etwas zu erfragen (z.B. Zahlen oder Text) und die berechneten Werte auszugeben.

Ausgaben

Um in JavaScript etwas als Text auf dem Bildschirm auszugeben, verwenden wir meistens eine Hilfsmethode:

console.log()

console.log() ergänzt die Ausgabe um einen Zeilenumbruch, d.h. die nachfolgende Ausgabe erscheint auf der nächsten Zeile.

Mit dieser Methode kann im Prinzip „alles“ ausgeben werden: Text bzw. Strings, Zahlen, Ausdrücke, Variableninhalte, Rückgabewerte von Funktionen, usw.

Der Code im folgenden Beispiel kann angepasst werden und stellt die Ausgaben mit console.log() automatisch unterhalb des Codes dar:


// Eigene Anweisungen mit console.log hier eingeben und ausprobieren
console.log(456 + 777);
let x = 123;
console.log("Wert von Variable x:");
console.log(x);

Bemerkung: Zur console-API gibt es einen „living standard“, der noch viel mehr Möglichkeiten mit console beschreibt, sodass viele Browser und auch NodeJS diese implementieren können (siehe console.spec.whatwg.org)

Ein Beispiel ist console.table, womit Arrays oder Objekte als Tabelle angezeigt werden:

console.table([
  { city: 'Basel', temp: 7.8 },
  { city: 'Berlin', temp: 3.4 },
  { city: 'Freiburg', temp: 8.2 },
]);

Folgende Ausgabe wird dargestellt:

┌─────────┬────────────┬────────┐
│ (index) │    city    │  temp  │
├─────────┼────────────┼────────┤
│    0    │  'Basel'   │  7.8   │
│    1    │  'Berlin'  │  3.4   │
│    2    │ 'Freiburg' │  8.2   │
└─────────┴────────────┴────────┘

Ausgabe formatieren

💡

In der MDN-Dokumentation zu console.log wird beschrieben, wie mit %c Styling-Anweisungen definiert werden können:

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

Leider wird dies von Node.js (noch?) nicht unterstützt (funktioniert aber im Browser).

In Node.js gibt es eine API util.styleText mit der Ausgaben Styles erhalten können:

import { styleText } from 'node:util';
const errorMessage = styleText('red', 'Error! Error!');
console.log(errorMessage);

In Zukunft soll es auch möglich sein, mehrere Styles als Array zu definieren:

import { styleText } from 'node:util';
const warnMessage = styleText(['yellow','italic'], 'Warning!');
console.log(warnMessage);

Mit speziellen „ANSI escape codes“ kann die Ausgabe u.a. farbig gestaltet werden.

Mit \033 (oder hexadezimal \x1b) wird eine „Escape-Sequenz“ eingeleitet, auf die dann nach [ verschiedene „Anweisungen“ zur Formatierung folgen.

const orange = "33";	
const underline = "4";
const format = "\033[" + orange + ";" + underline + "m";	
console.log(format + "Hello orange underline!" + "\033[0m");
 
console.log("wieder ohne Formatierung");

Dies ist ein überraschend mächtiges Konzept, mit dem sich nicht nur optische Formatierungen von Text darstellen lassen, sondern das auch weitere Möglichkeiten bietet wie z.B. die Cursor-Position zur Ausgabe zu setzen. Dadurch werden rein textbasierte Anwendungen optisch aufgewertet und interessanter.

Diese „ANSI escape codes“ beeinflussen die Textausgabe in Anwendungen, die in einem Terminal (Eingabeaufforderung) laufen und funktionieren auch in Strings mit Python.

Mehr zu diesen Formatierungen auf folgenden Webseiten:

Allgemeine Erläuterung und Funktionsweise:
notes.burke.libbey.me/ansi-escape-codes/

Farbsteuerung:
stackoverflow.com/questions/4842424/list-of-ansi-color-escape-sequences

Liste der escape codes:
gist.github.com/fnky/458719343aabd01cfb17a3a4f7296797

Hilfsbibliothek für farbige Ausgabe im Terminal: github.com/alexeyraspopov/picocolors

Eingabe mit prompt

Mit prompt steht in JavaScript im Browser und in replit.com eine Methode zur Verfügung, die Text von der Tastatur einliest.

let name = prompt("Name eingeben");

Name eingeben erscheint und es kann etwas per Tastatur eingegeben werden.

Die Ausführung des Programms hält an, Text kann eingegeben werden und nach Drücken von Enter/Return wird der Text der Variablen zugewiesen (im Beispiel oben name).

Dies funktioniert leider nicht in NodeJS — aber es gibt dafür geeignete Hilfsbibliotheken (siehe unten).

Wie kann der Text in eine ganze Zahl für Berechnungen umgewandelt werden?

let num = prompt("Bitte eine Zahl eingeben");
num = parseInt(num); // wandelt Text in Zahl um

Achtung: wird keine Zahl eingegeben, dann muss dies evtl. mit if oder try...catch abgefangen werden (später), sonst ergibt parseInt den Wert NaN. Es gibt auch parseFloat für Gleitkommazahlen.

⚠️

Wenn parseInt mit einem String aufgerufen wird, der mit Ziffern beginnt, dann werden die Ziffern bis zum ersten Buchstaben als Zahl interpretiert, z.B.

parseInt("1234XYZ"); // ---> ergibt 1234

Umlaute und andere Sonderzeichen

Im Januar 2023 hatte prompt in replit.com Probleme mit der Eingabe von Umlauten, die bei der Eingabe falsch dargestellt werden.

Eingabe in NodeJS

In NodeJS funktioniert prompt leider nicht.

Die Eingabe lässt sich sicherlich auch mit der API von NodeJS umsetzen. Bequemer lässt sich die Eingabe jedoch durch eine Hilfsbibliothek in NodeJS realisieren.

In einer späteren Lektion finden sich Infos zu weiteren nützlichen Hilfsbibliotheken.

⚠️

Leute mit Windows-Rechnern berichten davon, dass die Eingabe von Umlauten in cmd.exe in NodeJS problematisch ist.