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.

// 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);

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: 24

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 prompt

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

Dazu das Terminal in VS Code öffnen und das Projekt zuerst für npm initialisieren:

npm init

→ Alle Fragen mit Enter beantworten, hierdurch wird die Datei package.json erzeugt.

Dann prompt-sync installieren:

npm install prompt-sync

Dadurch wird prompt-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 prompt in einem Programm verwendet werden:

import promptSync from 'prompt-sync';
const prompt = promptSync();
 
let name = prompt("Name eingeben: ");

Mit import wird die Bibliothek prompt-sync eingebunden. 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 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. Auch könnte Number(num) verwendet werden — zum Unterschied zwischen parseInt/Float und Number (und +num) gibt es eine interessante Diskussion bei Stack Overflow.

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

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