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.