 Text in Morse-Code umwandeln
In diesem Beispiel zeige ich ihnen, wie man Grafiken in einem Array (Register) 'unterbringt' und dann später einem durch JavaScript ermittelten Wert zuordnet, darauf zugreift und anzeigen lässt.
 18.05.2006 Script und Erklärungen überarbeitet
Basis für dieses Beispiel war ein Script für die Umwandlung von Text in Morsecodezeichen. Das Script habe ich ein wenig erweitert. Nun bietet es folgende zusätzliche Eigenschaften
- Die Übersetzung wird als Textcode (Punkt/Strich) in einer Textarea angezeigt und kann dort kopiert werden.
- Die Übersetzung wird in grafische Elemente umgesetzt und mit Hilfe kleiner Images zur besseren Visualisierung in einem Window dargestellt.
Bei der grafischen Darstellung der Morsezeichen im Window, nutze ich 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. Besonders interessant ist der zweite Array, in dem nicht Text (alphanumerische Zeichen) sondern Variablennamen (für die Images) abgelegt wurden.
Besonderheiten sind also:
- Variablen im Array
- Anzeige des Ergebnisses in der Textarea
- Visualisierung mittels Grafiken im Window
Hier verwendete Images:    
Testen
Funktion
Im Script werden 3 Register (arrays) definiert:
1) Liste der alphanumerischen Zeichen
2) zugeordnete Morsezeichen
3) den Morsezeichen entsprechende Images
Zur Verdeutlichung die Darstellung der Arrays :
| Element |
Arrayname |
0 |
1 |
2 |
... |
21 |
22 |
... |
| Array 1 |
Textzeichen |
a |
b |
c |
|
v |
w |
|
| Array 2 |
Morsezeichen |
. - |
. |
- . - . |
|
. . . - |
. - - |
|
| Array 3 |
Morsebilder |
|
|
|
|
|
|
|
Im Script wird eine Schleife durchlaufen. Die eingegebenen Zeichen werden mit den Elementen des 1. arrays verglichen und den im zweiten und dritten Array abgelegten Elementen zugeordnet. Im ersten Fall den Morsezeichen als Punkt und Strich, im zweiten Fall den Morsebildern für Punkt und Strich.
Beispiel
Die Eingabe war ein 'c'. Diesem Zeichen im Array 1 'Textzeichen' wird das Element im Array 2 'Morsezeichen' und das Element im Array 3 'Morsebilder' zugeordnet. Dann wird das nächste Zeichen untersucht und entsprechende Elemente zugeodnet. Die Anzahl der Durchläufe entpricht der Anzahl der Elemente.
| |
Arrayname |
Element |
| Array 1 |
Textzeichen |
c |
| Array 2 |
Morsezeichen |
- . - . |
| Array 3 |
Morsebilder |
|
Ich benutze hier einenen weiteren Kniff: Um im Array 3 nicht endlos lange HTML-Codes für die SRCs der Images aufzulisten, lege ich den HTML-Code für die Images zuerst in Variablen ab, die ich dann im Array 3 benutze.
 Die variablen und Arrays
// diese Variablen enthalten den HTML-Code für die Images
var le = "<img src=\"le.gif\">";
var l = "<img src=\"l.gif\">";
var p = "<img src=\"p.gif\">";
var s = "<img src=\"s.gif\">";
// Die doppelten Anführungszeichen ' " ' für die Dateinamen
// der Variablen müssen 'maskiert' werden.
// Dazu stellt man diesen Zeichen den Backslash ' \ 'voran.
// array 1
Textzeichen = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ .,?:-!";
// array 2
Morsezeichen = new Array(
".-","-...","-.-.","-..",".","..-.",
"--.","....","..",".---","-.-",".-..",
"--","-.","---",".--.","--.-",".-.",
"...","-","..-","...-",".--","-..-",
"-.--","--..",".-","-...","-.-.","-..",
".","..-.","--.","....","..",".---",
"-.-",".-..","--","-.","---",".--.",
"--.-",".-.","...","-","..-","...-",
".--","-..-","-.--","--.."," ",".-.-.-",
"--..--","..--..","---...","-....-","!");
// array 3
Morsebilder = new Array(
p+s,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,"!");
|
HOME
QuellCode 
ZURÜCK 
Quelltext