Zeichentabelle generieren

So funktioniert das Script

Das Script hat drei Aufgaben, für jede gibt es eine Funktion: Zeichen erzeugen und in acht Spalten verteilen, den Zähler auf eine bestimmte Nummer stellen und die Tabelle wieder leeren. Zwei Variablen merken sich dabei den Zustand: zeichenNummer ist die Nummer des nächsten Zeichens, tabellenposition die Spalte, in die es geschrieben wird. Weil beide außerhalb der Funktionen stehen, überleben sie den einzelnen Klick — nur deshalb kann die Tabelle bei jedem Druck auf „Zeichen generieren" dort weiterwachsen, wo sie aufgehört hat.

const vorsatz = mitCode ? "&#" + zeichenNummer + "; : " : "";
neu[tabellenposition] += vorsatz + "&#" + zeichenNummer + ";<br>";

Das ist der Kern. Die zweite Zeile setzt den HTML-Code für ein Zeichen zusammen: aus &#, der Nummer und einem Semikolon wird etwa € — und weil der Text später über innerHTML in die Seite kommt, macht der Browser daraus das Eurozeichen. Die erste Zeile erzeugt die Beschriftung davor, und die muss sichtbar bleiben statt sich in ein Zeichen zu verwandeln. Deshalb steht dort &#: & ist der HTML-Code für das kaufmännische Und selbst, sodass am Ende der Text € zu lesen ist. Ein ? mit : dazwischen ist übrigens die Kurzform einer if-Abfrage — ist das Häkchen gesetzt, kommt die Beschriftung, sonst eine leere Zeichenkette.

tabellenposition += 1;
if (tabellenposition === SPALTEN) {
  tabellenposition = 0;
}

So verteilen sich die Zeichen auf die acht Spalten: Nach jedem Zeichen rückt die Position eine Spalte weiter, und hat sie die achte hinter sich, springt sie zurück auf die erste. Diese Art zu zählen — hochzählen und beim Erreichen einer Grenze auf 0 zurückspringen — braucht man beim Programmieren ständig, etwa für Wochentage oder Uhrzeiten. Die Konstante SPALTEN steht oben im Script; wenn ihr die Tabelle im HTML um Spalten erweitert oder kürzt, müsst ihr nur diese eine Zahl anpassen.

const neu = ["", "", "", "", "", "", "", ""];
…
for (let s = 0; s < SPALTEN; s++) {
  spalte(s).innerHTML += neu[s];
}

Auffällig ist, dass die Zeichen nicht sofort in die Tabelle geschrieben werden, sondern erst in acht Textspeichern gesammelt und danach in einem Rutsch angehängt. Der Grund: Jedes Schreiben in innerHTML zwingt den Browser dazu, den betroffenen Bereich neu aufzubauen. Bei 2000 Zeichen einzeln wäre das spürbar langsam, so sind es nur acht Schreibvorgänge. Die Originalfassung rief sich für jedes Zeichen selbst erneut auf (eine sogenannte Rekursion) und schrieb jedes Mal einzeln in die Tabelle — bei großen Mengen ging dem Browser dabei der Speicher für die Aufrufe aus.

if (isNaN(anzahl) || anzahl < 1) {
  meldung.textContent = "Bitte tragt ein, wie viele Zeichen erzeugt werden sollen.";
  return;
}

parseInt(text, 10) macht aus dem eingetippten Text eine ganze Zahl; die 10 sagt dabei, dass im Zehnersystem gerechnet wird. Steht dort etwas, das keine Zahl ergibt, liefert parseInt den Wert NaN („not a number"), den man nur mit isNaN() erkennen kann. Dann erscheint ein freundlicher Hinweis und return beendet die Funktion, bevor Unsinn in der Tabelle landet.

Zum Anpassen: Die Höchstmenge pro Durchgang steht in HOECHSTZAHL ganz oben. Wollt ihr die Zeichen größer sehen, gebt der Tabelle im HTML eine eigene Klasse und stellt dort die Schriftgröße ein. Und wenn ihr statt <br> etwas anderes zwischen die Zeichen setzt, ändert ihr nur die eine Stelle in der Zusammensetzung.