Textzeichen bestimmten Array-Elementen zuordnen JavaScript Beispiel Download

Array mit Image-URLs

Home • JavaScript • Zeichen zu Arrayelementen

Beispiel

Quellcode

Textzeichen bestimmten Array-Elementen zuordnen

Beispiel für die Zuordnung von Textzeichen zu Grafiken, deren URL als Arrayelemente abgelegt wurden. Die einzelnen Zeichen eines Variableninhalts werden bestimmten Elementen eines Registers zugeordnet.

Textzeichen grafische Symbole zuordnen und anzeigen

In meinem Beispiel werden die Zeichen einem Formular-Eingabefeld entnommen und einer Variablen zugewiesen. Den dort abgelegten Zeichen werden dann URLs für Grafiken zugeordnet. Die Anweisungen zur Darstellung der Grafiken (<img>-Tags) werden durch das Script in ein HTML-Dokument geschrieben.

Im Klartext: An Stelle der im Eingabefeld eines Formulares eingetippten Buchstaben werden in einem PopUpWindow die zugeordneten Grafiken angezeigt!

In meiner Demo weiter unten werden Zeichen von a - j bestimmten grafischen Elementen zugeordnet. Das Ergebnis wird in einem PopUpWindow dargestellt.	a = , b = , c = , ...
Ein Text aus den Zeichen a - j entspricht nach der Zuordnung den entsprechenden Grafiken.	a a a entspricht d d d entspricht a b c d entspricht

Anwendung und sinnvoller Einsatz

Den häufigsten Einsatz einer 'Übersetzung' von Textzeichen in Grafiken findet man bei der Darstellung digitaler Zeitanzeigen oder Countern. Sie könnten aber auch (bei 24 Grafiken) eine Geheimschrift entwickeln oder für ein sinnvolles Beispiel alphanumerische Zeichen als Grafiken eines Morsecodes darstellen lassen. Das Script lässt sich nach einer Anpassung aber auch für Statistiken oder z.B. mit einem Zufallsgenerator für die Bilddarstellung in Spielen einsetzen.

Zeichen	4	5	6	7	8	9
Grafiken

Beispiel: digitale Uhren / Counter
Im Menü

Zeit oder

Datum

Zeichen	S	O	S
Grafiken

Beispiel: MorseCode
Im Menü 'Diverses'

Morse-Code

Zeichen	1	2	3
Grafiken

Beispiel: Bewertung
in einem Forum

Beispiel: Zufallsgrafik
(hier anders gelöst)

Für die 3 Demos der Anwendung gibt es auch eine bessere Lösung! Siehe Fußnote

Funktion

a Wie wird das umgesetzt?

Im Script wird eine Variable und ein Register (Array) verwendet. Die Anzahl der Zeichen im Wert der Variablen und die Länge des Arrays (Anzahl der Elemente) ist identisch.

// variable
var Zeichen = "abcdefghij";

// array
var Grafiken = new Array(
'<img src="0.gif">','<img src="1.gif">','<img src="2.gif">','<img ...

Variable 'Zeichen' dient als Referenz für die Textzeichen der Eingabe
Array 'Grafiken' dient als Ablage für die Grafik-URLs

	0	1	2	3	4	5	6	7	8	9	Anzahl
Variable 'Zeichen'	a	b	c	d	e	f	g	h	i	j	10
Array 'Grafiken'											10

Wie ich das einem Viertklässler erklären würde:

Ich hab hier einen Buchstaben. Es ist der Buchstabe 'b'. Nun schau ich in der Schublade für 'b' nach, welches Bildchen dazu gegehört. So mache ich das Buchstabe für Buchstabe.

b Beispiel zur Anschauung

Die alphanumerischen Zeichen in einem Eingabefeld eines Formulars sollen als Grafiken dargestellt werden. Das Ergebnis wird in einem Fenster angezeigt. Mittels JavaScript werden den eingegebenen Zeichen den im Register (Array) abgelegten Elementen (Mini-Bilder) zugeordnet. Den Zeichen a wird also das Element 0 im Array zugeordnet, dem Zeichen b dem Arrayelement 1, ...

verwendete Images:

Zum Testen stellen sSie eine Personenansammlung zusammen, indem sie willkürlich Zeichen von a - j in das Eingabefenster eintragen. Das Ergebmis können sie durch Anklicken des Buttons 'Umwandeln' in einem PopUpWindow anzeigen lassen.
Für eingetragene Buchstaben, die nicht in der Variabalen 'Zeichen' vorkommen, wird keine Grafik (aber auch kein Fehler) angezeigt!

c Erklärungen zum Beispiel

Das Script entnimmt die Eingaben aus dem Formularfeld mit dem Namen 'EingabeZeichen' und weist sie der Variablen 'TextEingabe' zu. Diese Variable 'TextEingabe' wird nun Zeichen für Zeichen untersucht und nach identischen Zeichen in der Variable wird gesucht.

zur Erinnerung: var Zeichen = "abcdefghij";

Dann wird eine Schleife durchlaufen die z.B. dem Element 5 im Array 'Grafiken' dem fünften Zeichen in der Variablen 'Zeichen' zuordnet. Im 5. Arrayelement steht die URL für eine bestimmte Grafik.

Das Ergebnis aller Untersuchungen wird in die Variable 'GrafikAusgabe' geschrieben. Die Anzahl der Durchläufe entpricht der Anzahl der dort abgelegten Image-URLs. Bei 15 eingetragenen Zeichen wird die Schleife also 15 mal durchlaufen mit dem Ergebnis, das in der Variablen 'GrafikAusgabe' 15 Image-URLs stehen.

Würde man den Inhalt der Variablen 'GrafikAusgabe' in ein HTML-Dokument schreiben, würden dann auch 15 Grafiken angezeigt werden. Genau das geschieht im eingeblendeten PopUpWindow.

Weitere Erklärungen im kommentierten Quelltext.

Bei der Darstellung im PopUpWindow wird beim Aufruf der HTML-Code für die im Window angezeigte Seite durch das JavaScript geschrieben.

Fußnote

Die Variable 'Zeichen' könnte man sich sparen und einfach Ziffern von 0 bis 9 nutzen, die dann die laufende Nummer der Array-Elemente darstellen. Das limitiert die unterschiedlichen Zeichen aber auf insgesamt 10.

Mit einem 2. Array könnte man das allerdings auch für mehr als 10 unterschiedliche Grafiken umsetzen. Das aber, ist ja nicht Thema dieses Beispiels. Lesen sie dazu:

Morse-Code

Anschaulich und ebenfalls eine sinnvolles Einsatzgebiet wäre dann vielleicht eine Liste wie 'Krebs,Löwe, ...' im ersten und die zugehörigen Sternzeichensymbole im zweiten Array.