Javascript Shell

So funktioniert das Script

Das Script hat drei Aufgaben: Text in die schwarze Box schreiben, einen eingetippten Befehl ausführen und die Box wieder leeren. Der Kern ist eine einzige eingebaute Funktion — eval —, alles andere drumherum ist Bedienung und Ausgabe. Wie üblich steckt das Ganze in einer sofort ausgeführten Funktion, damit die Namen darin nichts auf der Seite überschreiben.

function ausgeben(text, farbe) {
  const zeile = document.createElement("div");
  zeile.textContent = text;
  if (farbe) {
    zeile.style.color = farbe;
  }
  konsole.appendChild(zeile);
  konsole.scrollTop = konsole.scrollHeight;
}

Jede Ausgabe ist eine eigene <div>-Zeile, die unten an die Box angehängt wird. Der Text wird mit textContent gesetzt, nicht mit innerHTML: Gibt ein Befehl eine Zeichenkette wie "<b>fett</b>" zurück, soll die Konsole genau diese Zeichen zeigen und das Markup nicht ausführen. Die letzten beiden Zeilen scrollen die Box ans Ende — scrollHeight ist die Gesamthöhe des Inhalts, scrollTop die aktuelle Scrollposition; setzt man das eine auf das andere, steht die neueste Zeile im Bild.

ausgeben(String(eval(befehl)));

Das ist das Herz der Shell. eval nimmt eine Zeichenkette, behandelt sie als JavaScript-Programm, führt sie aus und gibt den Wert des letzten Ausdrucks zurück. Aus dem Text "2 + 40" wird so die Zahl 42. String(…) macht daraus wieder Text, damit auch Zahlen, true oder undefined sauber in der Box landen.

Sonst gilt für eval die eiserne Regel: nicht benutzen. Alles, was in die Zeichenkette gerät, wird ausgeführt — stammt sie aus einem Eingabefeld, einer Adresszeile oder einer fremden Datei, ist das eine offene Tür. Diese Seite ist die eine legitime Ausnahme, denn ausgeführt wird genau das, was der Besucher sich selbst eintippt. Für alles andere gibt es bessere Werkzeuge: JSON.parse für Daten, ein Objekt mit Funktionen statt Befehlsnamen als Text.

const echtesSchreiben = document.write;
document.write = function (text) { return text; };

Ein Schutz, den schon die Urfassung hatte: Ruft man document.write auf einer fertig geladenen Seite auf, wirft der Browser die gesamte Seite weg und beginnt eine neue — die Konsole wäre samt Inhalt verschwunden. Deshalb wird die echte Methode kurz beiseitegelegt und durch eine harmlose ersetzt, die den Text nur zurückgibt. Nach dem Befehl stellt document.write = echtesSchreiben; den Originalzustand wieder her. Dass man eingebaute Methoden so einfach austauschen kann, ist eine der eigenwilligeren Seiten von JavaScript.

try {
  ausgeben(String(eval(befehl)));
} catch (fehler) {
  ausgeben(String(fehler), "#ff9a8c");
}

Ohne diese Sicherung wäre die Shell nach dem ersten Tippfehler tot: Ein fehlerhafter Befehl löst eine Ausnahme aus, und die würde das Script abbrechen. try heißt „versuche das“, catch fängt den Fehler auf und gibt ihn stattdessen aus — hier in einem freundlichen Rot, damit man Ergebnis und Fehlermeldung auseinanderhalten kann.

eingabe.addEventListener("keydown", function (ereignis) {
  if (ereignis.key === "Enter") { ausfuehren(); }
});

Das ist der Komfort, den eine Konsole braucht. keydown meldet jeden Tastendruck im Eingabefeld; ereignis.key enthält den Namen der Taste als Text, bei der Eingabetaste also "Enter". Das ist die heutige Schreibweise — ältere Scripts fragen stattdessen keyCode == 13 ab, was zwar meist noch funktioniert, aber offiziell veraltet ist.

Zum Anpassen: Die Kopfzeile der Box steht als kopfzeile im Script, die Fehlerfarbe als "#ff9a8c" im catch-Block. Aussehen und Höhe der schwarzen Box regelt das style-Attribut am <div> — wer lieber eine helle Konsole möchte, tauscht dort einfach Vorder- und Hintergrundfarbe.