Ein- und Ausgabe

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.

Manchmal ist es nützlich, console.log mit zwei Parametern zu verwenden, um in der Ausgabe zusätzliche Informationen zu haben:

console.log('Answer to everything:', 42);
 
Answer to everything: 42

Bemerkung: Zur console-API gibt es einen „living standard“, der noch viel mehr Möglichkeiten mit console beschreibt, sodass viele Browser und auch Node.js 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

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

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

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 \x1b wird eine „Escape-Sequenz“ eingeleitet, auf die dann nach [ verschiedene „Anweisungen“ zur Formatierung folgen.

const orange = "33";	
const underline = "4";
const format = "\x1b[" + orange + ";" + underline + "m";	
console.log(format + "Hello orange underline!" + "\x1b[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.

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 readline-sync

Um die Eingabe von der Tastatur einfacher zu handhaben, installieren wir eine Hilfsbibliothek namens readline-sync.

Um readline-sync zu installieren, müssen wir zunächst das Projekt initialisieren. Dazu das Terminal in VS Code öffnen und folgenden Befehl ausführen:

npm init -y

→ Hierdurch wird die Datei package.json erzeugt.

Dann readline-sync installieren:

npm install readline-sync

Dadurch wird readline-sync heruntergeladen und installiert (siehe node_modules und package.json).

In package.json ggf. folgenden Eintrag hinzufügen, um eine lästige Warnung bei Ausführung des Programms zu unterbinden:

"type": "module",

Nun kann readline-sync in einem Programm verwendet werden:

import { question } from 'readline-sync';
 
let name = question("Name eingeben: ");

Mit import können wir aus der Bibliothek oder Modulen (anderen Dateien) Funktionen laden. In diesem Fall laden wir die Funktion question aus der Bibliothek readline-sync. Dazu werden wir später noch mehr erfahren. Diese Import-Anweisung sollte am Anfang des Programms stehen.

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).

Wie kann eine Eingabe einer ganzen Zahl für Berechnungen erfolgen?

import { questionInt } from 'readline-sync';
let num = questionInt("Bitte eine Zahl eingeben: ");
console.log(`Die eingegebene Zahl ist: ${num}`);

Willkommen zur Wetter-App!
Für welche Stadt willst du das Wetter wissen? Basel
Temperatur in Basel um 16:37:16: 2 Grad

Bemerkungen

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

chcp 65001