---

Arbeiten mit Bildern | Arbeiten mit Formularen | Passwortschutz |
selbstgemachte Utilities | Browserweichen

---

Selbstgemachte Utilities

Beispiel : Verbesserter Farbwähler und Farbkonvertierer

Das Beispiel erlaubt die Auswahl aus einem Farbnamen-Pulldownmenu (den vordefinierten sog. Netscape-Farben, die aber auch IE und andere Browser verstehen), die gewählte Farbe wird als Hintergrundfarbe angezeigt und der Hexadezimalcode für die Farbe ausgegeben. Umgekehrt kann man auch Hexadezimalcode eingeben und sich diese Farbe anzeigen lassen.

verwendet u.a.: insgesamt 4 verschiedene Funktionen, verschiedenste Eventhandler, globale und lokale Variablen, elements.value, document.bgcolor, string.toLowerCase(), string.length(), string.charAt(), string.indexOf(), prompt(), alert(),

Einige Erläuterungen zum Skriptcode (in Blau)

<script language="JavaScript">
<!--
/*Beispiel aus Reinhold Leinfelders Multimediakurs, www.palaeo.de/multimediakurs
dieses Skript kann frei weiterverwendet werden, sofern dieser Kommentar nicht geloescht wird.
© R. Leinfelder 2002 */

//da verschiedene Funktionen auf die Variable eingabe zurückgreifen werden, wird diese Variable
//global, d.h. außerhalb der functions definiert.

var eingabe;

function farbkonverter()
{

//der Variablen Eingabe wird der Eingabewert des ersten Formularelements zugewiesen,
//dies ist übrigens eine Select-Pulldownliste (siehe body-code)
//danach wird dieser Eingabewert der Eigenschaft Hintergrundfarbe des document-Objekts zugewiesen
//im zweiten formularelement wird der wert der Hintergrundfarbe zusammen mit einem Textstring ausgegeben

eingabe=window.document.forms[0].elements[0].value;
window.document.bgColor=eingabe;
window.document.forms[0].elements[1].value=window.document.bgColor + " (diese Farbe wird gerade als Hintergrundfarbe verwendet)";

}

//der Farbanzeiger ist als extra Funktion definiert, hier kann hexadezimalwert-code eingegeben werden

function farbanzeiger()
{
//nachfolgender Variablen erlaubt werden die erlaubten Zeichen in einem Textstring als wert //zugeordnet, daneben werden weitere Variablen ohne Wert definiert
//der Rückgabewert der Prompt-Methode wird der Variablen eingabe zugeordnet
//vorsorglich wird die Eingabe zu kleinbuchstaben konvertiert, da vielleicht auch Großbuchstaben eingegeben wurden
//dann wird der Variablen laenge als Wert die Anzahl der Zeichen des Werts der Variablen
//eingabe zugeordnet, in unserem Fall waeren dies 0-9 und a-f, also 16 zeichen.

var erlaubt="0123456989abcdef", laenge, a, b;
eingabe=prompt("geben Sie Ihre Farbanfrage in hexadezimaler Schreibweise ohne #, also z.B. 443322 ein", "");
eingabe=eingabe.toLowerCase ();
laenge=eingabe.length;

//nun erfolgt eine Abfrage: wenn der Wert von eingabe ungleich 0, d.h. eine Eingabe vorgenommen
// wurde, wird der Code weiter abgearbeitet, ansonsten passiert gar nichts.

if (eingabe!=null)
{

//mit einer for-Schleife wird nun für jede Stelle im String eingabe, d.h. jeweils für die Position a, die bei
//jedem Durchlauf weiter hochgezählt wird, ob ein unerlaubtes Zeichen vorliegt. Dies wird solange
//durchgeführt bis das letzte Zeichen erreicht ist (erstes Zeichen ist position 0, letztes zeichen ist
// damit eine Position kleiner als die Gesamtzahl der Zeichen im string, d.h. a<laenge
//außerdem wäre ein Fehler, wenn die Eingabelänge mehr als 7 Zeichen beträgt (d.h. die
//laenge den Wert größer 6 hat, da das erste Zeichen die Position 0 hat). Wir wissen nicht, ob auch #
//vor den Farbcode gestellt wurde, deshalb testen wir auf größer 7 zeichen.
//wird ein unerlaubtes Zeichen oder eine zu große Zeichenlänge gefunden, wird abgebrochen und
//eine Fehlermeldung ausgegeben. ansonsten wird die Eingabe dem Objekt document als
// hintergrundfarbe zugeordnet und ein Alertfenster geöffnet, in dem der Farbcode dargestellt wird.

for (a=0; a<laenge; a++)
{
b=eingabe.charAt (a);

if (erlaubt.indexOf (b) == - 1 || eingabe.length>6)
{
alert ("dies ist keine korrekter hexadezimaler Farbcode");
break;
}
else
{
window.document.bgColor=eingabe;
alert("Ihre Farbangabe [# " + eingabe + "] wird als Hintergrundfarbe angezeigt");
break;
}
}
}
}

//die Funktion hinweis wird abgerufen, falls versucht wird, in ein ausgabefeld etwas einzugeben.

function hinweis()
{
alert("Hier bitte keine Eingaben machen");
}

//die Funktion original erlaubt die Zurückstellung der Hintergrundfarbe auf Weiss.

function original()
{
eingabe=window.document.bgColor="#ffffff";
}
// -->
</script>

Nachfolgend noch Auszüge aus dem html-Code im Body (vergleichen Sie mit der Beispieldatei). Die Eventhandler, welche die verschiedenen Funktionen aufrufen, sind in Blau markiert:

<form name="farbenform">
<p>W&auml;hlen Sie hier einen Farbnamen: <select name="farbenauswahl" size="1" onchange="farbkonverter()">
<option value="">bitte w&auml;hlen</option>
<option value="aquamarine">aquamarine</option>
....
<option value="yellowgreen">yellowgreen</option>
</select></p>
<div align="left">
<p>Der Farbcode lautet in hexadezimaler Schreibweise:<font size="+1"> </font></p>
<p><input type="text" name="hexfarbe" size="88" onFocus="hinweis()"></p>
</div>
<div align="center">
<p><input name="loeschen" type="reset" onclick="original()"></p>
</div>
</form>
.....
<h4><b>B: Hexadex. Farbcode -&gt; Farbe </b></h4>
<p><font size="+1">Wollen Sie einfach mal ausprobieren, wie &quot;#ff4566&quot; oder eine beliebige andere hexadezimal angegebene Farbe wirklich aussieht?</font></p>
<p>Verwenden Sie dazu unseren <a href="#" onmouseover="farbanzeiger()" onmouseout="original()"><font size="+2">Farbanzeiger</font></a></p>

Hinweis: die Farbwähler-Beispiele laufen aus mir unerfindlichen Gründen nicht unter Opera 5.0 für Mac ;-)

---

Beispiel: JavaScript-Rechner mit umfassendem Test auf Eingabefehler (identisch mit entsprechendem Beispiel auf der Beispielseite für Formulare und JavaScript.)

---

alle obigen Skriptbeispiele sowie frühere sind im Anhang zu Modul 7 aufgelistet.