 Text in Morse-Code umwandeln
In diesem Beispiel zeige ich ihnen, wie man Werte in einem Array (Register) 'unterbringt' um sie später durch JavaScript anderen Werten zuzuordnen. Zeichen für Zeichen wird ein zu verarbeitender Text verglichen und äquivalente Werte werden zugeordnet.
|
|
Textzeichen grafische Symbole zuordnen und anzeigen
update: 09.12.2010 Script und Erklärungen erneut überarbeitet
Das Prinzip
Vom Prinzip eigentlich nichts anderes, als ich bei meinen digitalen Uhren oder Up- / Downcountern bereits anwende. Dort werden ja ebenfalls Textzeichen zur Visualisierung mit Grafiken dargestellt.
Hier beim Morsecode bleibt es allerdings nicht bei einer einzigen 'Übersetzung' von Text in Grafiken, da ich das Beispiel ein wenig erweitert habe.
Morsecode
Basis für dieses Beispiel war ein Script für die Umwandlung von Text in Morsecodezeichen. Das Script habe ich ein wenig erweitert bleibe aber beim Morsecode. Nun bietet es folgende zusätzliche Eigenschaften
- Die spätere 'Übersetzung' wird als Textcode (Punkt + Strich) in einer Textarea angezeigt und kann dort kopiert werden.
- Die spätere 'Übersetzung' wird in grafische Elemente umgesetzt und mit Hilfe kleiner Images zur besseren Visualisierung in einem Window dargestellt.
Für die grafische Darstellung der Morsezeichen im PopUp-Window, nutze ich neben Punkt und Strich zwei weitere Symbole:
- Trennsymbol zwischen den einzelnen Buchstaben
- Leerzeichen werden durch eigenes Symbol angedeutet.
Dieses Script ist außerdem ein Beispiel für die Zuordnung von Einheiten aus zuvor definierten Array-Elementen. Für besonders interessant halte ich meine Technik, in einem Array nicht unmittelbar die Werte (z.B. die Grafike der Mordezeichen) sondern Variablen(namen) für Punkt und Strich abzulegen.
Besonderheiten sind also:
- Variablennammen im Array
- Anzeige des Ergebnisses zum Kopiren in einer Textarea
- Visualisierung mittels Grafiken im Window
|
Hier verwendete Images vergrößert dargestellt:
   
|
Testen
Die Datenvorräte
Ich schaffe mir einen Vorrat von Daten, auf die ich im Script zugreifen kann. Es werden 4 Datenvorräte definiert:
1 Eine Liste der alphanumerischen Zeichen, die als Vergleichswerte zur Verfügung stehen sollen (als Textstring)
2 Liste der Werte, für die den alphanumerischen Zeichen zuzuordnenden Morsezeichen (als Array)
3 Liste von Variablennamen, aus denen die Adressen für die Grafiken der Morsezeichen ermittelt werden können.
4 4 Variablen mit den URLs für die Grafiken
// Text
// (jetzt auch mit Ziffern)
Vergleich1 =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ .,?:-0123456789";
// array 2
Morsezeichen = new Array(
".-","-...","-.-.","-..",".","..-.",
"--.","....","..",".---","-.-",".-..",
"--","-.","---",".--.","--.-",".-.",
"...","-","..-","...-",".--","-..-",
"-.--","--..",".-","-...","-.-.","-..",
".","..-.","--.","....","..",".---",
"-.-",".-..","--","-.","---",".--.",
"--.-",".-.","...","-","..-","...-",
".--","-..-","-.--","--.."," ",".-.-.-",
"--..--","..--..","---...","-....-",
"-----","·----","··---","···--","····-",
"·····","-····","--···","---··","----·")
// array 3
Morsebilder = new Array(
p+s,s+p+p+p,s+p+s+p,s+p+p,p,p+p+s+p,
s+s+p,p+p+p+p,p+p,p+s+s+s,s+p+s,p+s+p+p,
s+s,s+p,s+s+s,p+s+s+p,s+s+p+s,p+s+p,
p+p+p,s,p+p+s,p+p+p+s,p+s+s,s+p+p+s,
s+p+s+s,s+s+p+p,p+s,s+p+p+p,s+p+s+p,s+p+p,
p,p+p+s+p,s+s+p,p+p+p+p,p+p,p+s+s+s,
s+p+s,p+s+p+p,s+s,s+p,s+s+s,p+s+s+p,
s+s+p+s,p+s+p,p+p+p,s,p+p+s,p+p+p+s,
p+s+s,s+p+p+s,s+p+p+s,s+s+p+p,le,p+s+p+s+p+s,
s+s+p+p+s+s,p+p+s+s+p+p,s+s+s+p+p+p,s+p+p+p+p+s,
s+s+s+s+s,p+s+s+s+s,p+p+s+s+s,p+p+p+s+s,p+p+p+p+s,
p+p+p+p+p,s+p+p+p+p,s+s+p+p+p,s+s+s+p+p,s+s+s+s+p)
// diese Variablen enthalten den HTML-Code für die Images
var le = '<img src="le.gif">'; // Leerzeichen
var l = '<img src="l.gif">'; // Wortabstand
var p = '<img src="p.gif">'; // Punkt
var s = '<img src="s.gif">'; // Strich
Funktionsweise
Im Script wird eine Schleife durchlaufen. Die Zeichen werden mit den Elementen in Vergleich1 verglichen und den im zweiten und dritten Array abgelegten Elementen zugeordnet. Im ersten Fall den Textzeichen als Punkt und Strich, im zweiten Fall den Variablennamen zur späteren Zuordnung der Grafik-URLs.
Für das erstes Zeichen der Eingabe:
a) durchlaufe 'Vergleich1' und finde das Zeichen, merke die die Positionsnummer
b) finde im Array 2 (Morsezeichen) die Position und entnehme die Werte
c) finde im Array 3 (Morsebilder) die Position und entnehme die Werte
d) ersetze die im Array 3 gefundenen Variablennamen durch den HTML-Code für Grafiken
wiederhole das für jedes weitere Zeichen ...
Zur Verdeutlichung die Darstellung Beziehungen:
| Datenvorrat |
|
0 |
1 |
2 |
... |
21 |
22 |
... |
| Vergleich1 |
Textzeichen |
a |
b |
c |
|
v |
w |
|
| Array 2 |
Werte |
. - |
-... |
- . - . |
|
. . . - |
. - - |
|
| Array 3 |
Variablennamen |
p+s |
s+p+p+p |
s+p+s+p |
|
p+p+p+s |
p+s+s |
|
| übersetzt: |
Morsebilder |
|
|
|
|
|
|
|
Ich benutze hier einenen weiteren Kniff: Um im Array 3 nicht endlos lange HTML-Codes für die SRCs der Images aufzulisten, ordne ich den HTML-Code für die Grafiken Variablen zu, deren Namen ich im Array 3 ablege.
Beispiel
Die Eingabe war ein 'c'. Dieses Textzeichen steht in 'Vergleich1' an dritter Position. Diesem Zeichen wird das 3. Element im Array 2 'Morsezeichen' und das 3. Element im Array 3 'Morsebilder' zugeordnet (und später angezeigt).
Dann wird das nächste Zeichen untersucht und entsprechende Elemente werden zugeodnet. Die Anzahl der Durchläufe entpricht der Anzahl der übergebenen Elemente.
| |
Typ |
Position |
Element |
| Vergleich1 |
Textzeichen |
3 |
c |
| Array 2 |
Text |
3 |
- . - . |
| Array 3 |
Variablen |
3 |
s+p+s+p |
| den Variablen zugeordnete Grafiken |
Morsebilder |
|
|
|
Home • JavaScript • Diverses • Array MorseCode
Demo
