JavaScripts › Texteffekte

Morsecode

Übersetzt eingegebenen Text Zeichen für Zeichen in Punkte und Striche.

Der Morsecode geht auf Samuel Morse und seinen Mitarbeiter Alfred Vail zurück und war ab der Mitte des 19. Jahrhunderts das Verfahren, mit dem Nachrichten über Telegrafenleitungen und später per Funk verschickt wurden. Jedes Zeichen wird durch eine Folge kurzer und langer Signale dargestellt, die man üblicherweise als Punkt und Strich schreibt. Häufige Buchstaben bekamen dabei kurze Zeichen: Das E ist ein einzelner Punkt, das T ein einzelner Strich, während seltene Buchstaben wie das Q vier Signale brauchen. Dieses Script übersetzt euch beliebigen Text in diese Punkt-Strich-Schreibweise.

Die Bedienung ist einfach: Tragt euren Text in das erste Feld ein und klickt auf „Übersetzen“ — im zweiten Feld steht dann der zugehörige Morsecode, den ihr von dort kopieren könnt. Übersetzt werden die Buchstaben a bis z (Groß- und Kleinschreibung spielt keine Rolle, das Morsealphabet kennt sie nicht), das Leerzeichen sowie die Satzzeichen Punkt, Komma, Fragezeichen, Doppelpunkt, Bindestrich und Ausrufezeichen. Zeichen, die das Script nicht kennt — etwa Ziffern oder Umlaute —, werden stillschweigend übersprungen.

Das wohl bekannteste Morsesignal ist der Notruf SOS: dreimal kurz, dreimal lang, dreimal kurz, also ...---.... Er wurde nicht als Abkürzung für einen Satz gewählt, sondern weil diese Folge leicht zu senden und selbst bei schlechtem Empfang gut zu erkennen ist. Probiert es ruhig aus, indem ihr SOS in das Eingabefeld tippt.

Auf einer Homepage sind Morsezeichen natürlich eher ein Blickfang als ein Kommunikationsmittel — genau das macht sie aber zu einem netten kleinen Effekt für eine Überschrift oder eine versteckte Botschaft. Wenn euch Schriften und Codes interessieren, schaut euch auch unsere Brailleschrift an. Wer Text nicht nur umschreiben, sondern unlesbar machen will, findet in unserer Abteilung Verschlüsselungen die ROT13-Verschlüsselung oder das Vigenère-Quadrat.

Texteffekte Baujahr 2007 läuft in deinem Browser

Verwendbare Zeichen: a–z, A–Z, Leerzeichen sowie . , ? : - !

So funktioniert das Script

Das Script besteht aus zwei Teilen: einer Übersetzungstabelle und einer Funktion, die den eingegebenen Text Zeichen für Zeichen durchgeht und für jedes gefundene Zeichen den passenden Code anhängt. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite kollidieren.

const zeichen = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ .,?:-!";
const morse = [
  ".-", "-...", "-.-.", "-..", ".", "..-.",
  …
];

Das ist die Tabelle, und sie ist der eigentliche Kniff des Scripts: Sie besteht aus zwei getrennten Listen, die über die Position zusammengehören. In zeichen stehen alle übersetzbaren Zeichen als eine lange Zeichenkette, in morse stehen die Codes als Array — also als nummerierte Liste. Das Zeichen an Position 0 ist das a, und der Eintrag an Position 0 im Array ist ".-". Weil die Großbuchstaben in zeichen noch einmal hinter den Kleinbuchstaben stehen, tauchen ihre Codes im Array ebenfalls ein zweites Mal auf — das Morsealphabet unterscheidet keine Groß- und Kleinschreibung.

const stelle = zeichen.indexOf(text.charAt(i));

Hier passiert die eigentliche Übersetzung. text.charAt(i) holt das Zeichen an der Stelle i aus dem eingegebenen Text. indexOf sucht dieses Zeichen in der Zeichenkette zeichen und liefert dessen Position zurück — oder -1, wenn es gar nicht enthalten ist. Diese Position ist zugleich die Position des passenden Codes im Array morse. Zwei Listen, ein Index: mehr braucht es nicht.

for (let i = 0; i < text.length; i++) {
  const stelle = zeichen.indexOf(text.charAt(i));
  if (stelle > -1) {
    ausgabe += morse[stelle];
  }
}

Die for-Schleife läuft von der ersten bis zur letzten Stelle des Textes. i++ zählt dabei nach jedem Durchlauf um eins hoch, text.length ist die Anzahl der Zeichen. Die Abfrage stelle > -1 ist die Absicherung gegen unbekannte Zeichen: Nur wenn das Zeichen in der Tabelle gefunden wurde, wird sein Code mit += an die bisherige Ausgabe angehängt. Ein Umlaut oder eine Ziffer fällt so einfach heraus, statt ein undefined in die Ausgabe zu schreiben.

document.getElementById("ms-ausgabe").value = ausgabe;

Zum Schluss wandert das Ergebnis in das zweite Textfeld. Bei einem <textarea> setzt man den Inhalt über die Eigenschaft value — nicht über textContent, wie man es bei einem gewöhnlichen Absatz täte. Verbunden wird das Ganze über addEventListener("click", uebersetzen) mit dem Knopf; das Script steht dafür unter dem Formular, damit die Elemente beim Ausführen bereits existieren.

Zum Anpassen: Die Codes werden direkt aneinandergehängt, aus „hallo“ wird also .....-.-...-..---. Wer die Buchstaben trennen möchte, schreibt statt ausgabe += morse[stelle]; einfach ausgabe += morse[stelle] + " "; — dann steht hinter jedem Buchstaben ein Leerzeichen, was der üblichen Schreibweise entspricht. Und wenn ihr weitere Zeichen ergänzen wollt, etwa die Ziffern, hängt ihr sie hinten an die Zeichenkette zeichen und ihre Codes in derselben Reihenfolge hinten an das Array morse an: die 1 ist .----, die 2 ..---, und so weiter bis zur 0 als -----.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Texteffekte