Multimediakurs Leinfelder: Inhalt/Modul 7 "JavaScript in Handarbeit"/Modul 7.3 "JavaScript-Level 2/7.3.3 JS-Level 2: kommentierte Beispiele
(© copyright)     Letzte Änderungen:08.01.2002

7.3.4 Kommentierte "Level 2"-JavaScript-Beispiele, Referenzen und Developer-Links

Beispiele | Referenzen und Developer-Links

Weitere JavaScript-Beispiele (Level 2)

Farbwähler-Beispiele

Nachfolgend einige Beispiele zum Auslesen und Ändern der Eigenschaft Hintergrundfarbe des document-Objektes, welche zum weiteren Üben und Erlernen von JavaScript ("Learning by Doing") dienen sollen.

Beispiel 1 : Ändern der Hintergrundfarbe durch Linkberührung

Code hierzu:

Im Head-Teil:

<script language="JavaScript">
<!--
window.document.writeln("Die originale Hintergrundfarbe ist " + window.document.bgColor);
function farbeaendern()
{
window.document.bgColor="#00ff00";
}
// -->

Im Body: <p>Lieber <a href="#" onmouseover="farbeaendern()">gr&uuml;ne</a> Hintergrundfarbe?</p>

Erläuterung:

Beispiel 2: Ändern der Hintergrundfarbe durch Benutzereingabe

In diesem Skript sind folgende Änderungen vorgenommen worden (vgl. Sie mit oben). Nur die Funktion wird hier angegeben.

function farbeaendern()
{
var eingabe;
eingabe=prompt("welche Hintergrundfarbe wollen Sie? Bitte englische Namen bzw. hexadezimale Farbnamen, z.B. #ff0000 eingeben");

window.document.bgColor=eingabe;

alert("Die derzeitige Hintergrundfarbe ist " + window.document.bgColor);
}

Der Eventhandler wurde zu onclick umgewandelt (vgl. Source-Code in Beispiel 2).

Erläuterung:

Beispiel 3: Farbkonverter- und Farbanzeiger-Utility

So schrecklich nützlich sind die obigen beiden Beispiele ja nicht unbedingt, es sind eher Spielereien, dem Benutzer zu ermöglichen, die Hintergrundfarbe zu ändern. Aus den obigen Skripten können wir aber ganz leicht etwas nützliches basteln. Beispiel 3 zeigt ein Utility, beim dem Webseiten-Produzenten (oder Bildbearbeiter) reservierte Farbnamen in Hexadezimalcode umwandeln können (und dabei die Farbe gleich noch kurz angezeigt wird). Außerdem können sie umgekehrt auch ausprobieren, welche Farbe ein bestimmter hexadezimaler Farbcode wirklich ergibt.

Hier der Source-Code (den letzten, erläuternden Teil der html-Seite habe ich weggelassen). In rot sind entsprechende Erläuterungen.

<html>
<head>
<title>hexadecimal-Farbenkonverter</title>
<script language="JavaScript">
<!--
//Beispiel aus Reinhold Leinfelders Multimediakurs, www.palaeo.de/multimediakurs

var eingabe;
function farbkonverter()

//wird die function farbconverter aufgerufen, passiert folgendes:

{
eingabe=prompt("geben Sie Ihren Farbwunsch in englischer Sprache ein, z.B. red, green, pink, maroon etc.","");
/* oben kann eine Farbe auf Englisch eingegeben werden, einige Beispiele
werden zur Erläuterung in der durch prompt erzeugten Dialogbox als Textstring
ausgegeben. Diese Eingabe wird dann der Variablen eingabe als Wert
zugewiesen.
Hinweis: für prompt wurde nicht nur ein auszugebender Textstring angegeben, sondern noch ein leerer Textstring, Erläuterung dafür siehe nach dem Skript*/

window.document.bgColor=eingabe;
/* der variablenwert von eingabe (also die vom User angegebene Farbe)
wird dem document-Objekt als Eigenschaft bgColor zugewiesen,
woraufhin sich die Hintergrundfarbe ändert */

alert("Ihr Farbwunsch wird als Hintergrundfarbe angezeigt. Der Hexadezimalcode lautet: " + window.document.bgColor);
/* zusätzlich wird eine Hinweisbox geöffnet, die einen Textstring
ausgibt sowie die aktuelle Hintergrundfarbe in Hexadezimalcode.
Hinweis: Netscape Navigator 6.0 gibt die eingegebene Farbe leider weiterhin
als Farbnamen, nicht als Hexdez.-Code aus*/
}
// Ende der function farbwaehler

function farbanzeiger()
// falls diese function aufgerufen wird, passiert folgendes:

 {
eingabe=prompt("geben Sie Ihre Farbanfrage in hexadezimaler Schreibweise, also z.B. #443322 ein");
/* Im Unterschied zu oben wird hier nun direkt hexadezimaler Farbcode
eingegeben*/

window.document.bgColor=eingabe;
alert("Ihr Farbwunsch wird als Hintergrundanzeige angezeigt", "");
}
//der Rest ist analog zu oben. Die Farbanzeiger function ist zu Ende.


function original()

/* diese Funktion wird aufgerufen, wenn sich die Maus aus den unten definierten Links
mit Eventhandlern wieder herausbewegt, siehe unten. Sie stellt den Ausgangszustand
also die Originalhintergrundfarbe weiß wieder her. Dies ist sinnvoll, da z.B. beim Aufruf
der Hintergrundfarbe schwarz durch eine der obigen Funktionen ansonsten der Text
unserer Utility-Seite nicht mehr lesbar ist*/

{
window.document.bgColor="#ffffff";
}
// -->
</script>
</head>

<body bgcolor="#ffffff">
<div align="center">
<hr>
<h4>Mein Hexadezimal-Farbkonverter</h4>
</div>
<p></p>
<div align="left">
<p>Wissen Sie nicht, wie eine Farbe in hexadezimaler Schreibweise (also z.B. &quot;#ff4566&quot; aussieht?</p>
<p>Verwenden Sie unseren kleinen <a href="#" onclick="farbkonverter()" onclick="original()"><font size="+2">Farbkonverter.</font></a></p>
<!-- der farbkonverter wird bei onclick aufgerufen, die Rückstellung, d.h. die Wiedereinstellung der Originalhintergrundfarbe wird durch die function original() bewerkstelligt, die bei onmouseout aufgerufen wird -->

<hr>
<p>Wollen Sie einfach mal ausprobieren, wie &quot;#ff4566&quot; oder eine beliebige andere hexadezimal angegebene Farbe wirklich aussieht?<br>
</p>
<p>Verwenden Sie dazu unseren <a href="#" onclick="farbanzeiger()" onmouseout="original()"><font size="+2">Farbanzeiger</font></a></p>
<!-- die oben stehende Erlaeuterung gilt auch hier -->
........

Hinweis: in früheren Beispielen hatten wir für die Methode prompt(); nur einen Textstring angegeben, z.B. prompt("bitte Ihren Namen eingeben"); Dies bewirkt jedoch unter Netscape 4.x, dass das Eingabefeld nicht leer bleibt, sondern undefined eingetragen wird. Dies kann übertippt werden (z.B. mit dem abgefragten Namen), aber es mag manche Benutzer verwirren. Gibt man im Eingabefeld noch einen zweiten Textstring ein, wird dieser im Eingabefeld eingetragen: also z.B. prompt("Hallo, Ihren Namen eingeben", "hier bitte Namen reinschreiben"); Dies funktioniert übrigens in allen neueren Browsern ab Version 4.
Lässt man diesen zweiten Textstring aber leer und gibt nur die Gänsefüsschen an, verschwindet das hässliche undefined unter Netscape 4.x und das Eingabefeld bleibt leer. Dies wurde in obigem Skript so gehandhabt.
Hässlicherweise nennt sich eine Hinweisbox (alert-Box) in Netscape 6.x leider "Warnhinweis", wohingegend sie in früheren oder anderen Browsern JavaScript-Hinweis oder ähnlich betitelt wird. Dies ist leider von uns nicht änderbar, da JavaScript keine eigenen Grafikroutinen zur Verfügung stellt, sondern sich der durch den Browser vorgegebenen Möglichkeiten bedient.

Beispiel 4: Farbkonverter- und Farbanzeiger-Utility mit verbesserter Abbruchmöglichkeit

Oben diskutiertes Beispiel 3 hat noch ein paar kleine Schönheitsfehler. Wenn der Benutzer das Utility aufruft, aber doch nicht benutzen will und in der Dialog-Box (die mit der prompt-Methode aufgerufen wird) auf Abbrechen drückt, wird dennoch der restliche Programmcode durchgeführt und das Hinweisfenster (alert-Methode) erscheint, obwohl es nicht sinnvoll ist. Probieren Sie dies bei Beispiel 3 aus.

Dieses kleine Manko haben wir aber rasch beseitigt, wenn wir den restlichen Code der Funktion in eine if-Abfrage verpacken, die nur durchgeführt wird, wenn eine Eingabe erfolgt ist.

Außerdem kann es in Beispiel 3 Schwierigkeiten geben, die Original-Hintergrundfarbe wieder hervorzulocken. Dies ist dann der Fall, falls nach der Eingabe einer Farbe oder eines Farbcodes die Eingabebox nicht durch die Enter- oder Return-Taste, sondern durch Mausklick geschlossen wird. Dann funktioniert unser obiger onmouseout-Handler nicht direkt und die Farbe bleibt stehen. Man müsste dann nochmals mit der Maus den Link berühren und wieder herausfahren, um die Originalhintergrundfarbe wieder aufzurufen (Probieren Sie es in Skript 3 aus). Bei Benutzung der Return-Taste tritt dieses Problem nicht auf, da der Mauszeiger auf dem angeklickten Link stehenbleibt und dann beim Wegnehmen die function original() korrekt aufgerufen wird.

Im Unterschied zum Skript des Beispiels 3 ändern wir nach der Variablen-Einrichtung eingabe den Code folgendermaßen:

function farbkonverter()
{
eingabe=prompt("geben Sie Ihren Farbwunsch in englischer Sprache ein, z.B. red, green, pink, maroon etc.", "");

     if (eingabe!=null)
     {
     window.document.bgColor=eingabe;

     alert("Ihr Farbwunsch wird so lange als Hintergrundfarbe angezeigt, bis Sie die Box schliessen. Der Hexadezimalcode lautet: " + window.document.bgColor);
     original();
     }
}

Neu ist der blau markierte Code. Vergleichen Sie mit unserem kleinen Passwortbeispiel. Vergessen Sie nicht, den bei positiver if-Abfrage auszuführenden Code in geschweifte Klammern zu setzen. Für die Funktion farbanzeiger verfahren wir genauso.

Wir haben im anzuklickenden Link den Eventhandler onmouseout="original() entfernt. Statt dessen lassen wir die function original() nach Schließen der alert-Box noch innerhalb der function farbkonverter() hinweisen. Dieser Aufruf wird hier quasi zur Methode, verliert damit das Schlüsselwort function und muss deshalb von einem Semikolon abgeschlossen werden. Näheres siehe in Level 3 (Modul 7.4.3)

Wichtig zum Verständnis: In unserem Skript-Code steht die function original() erst weiter unten. Normalerweise wird ein Skript von oben nach unten abgearbeitet, d.h. wir könnten eigentlich nichts aufrufen, was erst nachstehend steht. Bei Funktionen ist dies jedoch anders. Diese wurden ja alle beim Aufruf der html-Seite "geladen", werden jedoch erst bei Bedarf durch einen Event abgerufen. Damit kann eine aufgerufene Funktion ohne weiteres auf eine später definierte Funktion zurückgreifen, da auch letztere ja bereits seit Laden der Seite zur Verfügung steht.

Für die function farbanzeiger() gehen wir prinzipiell genauso vor. Hier habe ich aber den Aufruf von function original() am Ende er function farbanzeiger noch um 4 Sekunden (d.h. 4000 Millisekunden) verzögern lassen und zwar mit der Methode setTimeout();

alert("Ihr Farbwunsch wird noch 4 Sek. als Hintergrundfarbe angezeigt, nachdem Sie die Box geschlossen haben");
setTimeout('original()', '4000');

Hinweis: Unser Skript kann immer noch verbessert werden. Es wäre schön, wenn es einen Fehlerhinweise gäbe, falls der Benutzer unzulässige Zeichen für den Farbcode oder unzulässige Farbnamen eingibt. Dies ist deutlich aufwändiger zu programmieren, aber ohne weiteres möglich. Wir kommen darauf in Level 3 zurück. Im vorliegenden Skript ändert sich eben bei falscher Eingabe der Hintergrund nicht, was einen hinreichenden Fehlerhinweis darstellt (es sei denn, der Benutzer gibt white bzw. #ffffff ein).

Weitere Skripte in Level 3 und 4. Das Gesamtskriptverzeichnis dieser Seite finden Sie im Anhang zu Modul 7

JavaScript-Referenzen und Developer-Links

Vom Prinzip her wissen Sie nun eigentlich bereits fast genug, um schöne JavaScripte zu erstellen. Sie haben die Kenntnisse zur Syntax und zu den Bausteinen von JavaScript und brauchen jetzt nur noch eine JavaScript-Referenz, die Ihnen alle Objekte sowie die dafür vorhandenen Eigenschaften und Methoden vorstellt, sowie zusätzliche Methoden auflistet, die nicht objektbezogen sind. Derartige Referenzen finden Sie insbesondere bei Netscape, der Erzeugerin von JavaScript.

Ich empfehle, sich insbesondere auf JavaScript, Version 1.2, vielleicht auch 1.3 zu stützen, da die neueren Versionen noch längst nicht von allen Browsern umgesetzt werden. Mit Version 1.2 sind Sie auf der sicheren Seite und müssen sich über Browserinkompatibilitäten nicht zu viele Gedanken zu machen. Sie finden die Referenzen (in englischer Sprache) unter folgenden Links:

JavaScript-Version 1.2-Referenz: http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm

JavaScript-Version 1.3-Referenz: http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htm

Wir lassen Sie allerdings mit diesen Referenzen nicht allein.

In Level 3 unseres JavaScript-Kursmoduls werden wir eine vereinfachte JavaScript-Kurzreferenz liefern, d.h. die wichtigsten Objekte, Eigenschaften und Methoden durchgehen und entsprechende Beispiele dazu diskutieren. Eine komplette JavaScript-Referenz werde ich aber nicht liefern, dazu gibt es eben die offiziellen Referenzen.

Auch unter http://selfhtml.teamone.de/javascript können Sie sich Syntax, JS-Bausteine und etliche Beispiele nochmals ansehen. Allerdings finden Sie auch dort keine komplette Referenz.

Eine kleine Auswahl weiterer Seiten für Entwickler (keine Garantie für geeigneten Inhalt)

Weitere JavaScript-Referenzen auch am Ende von Level 1 sowie den nachfolgenden Kapiteln.

>> Modul 7.4: JavaScript-"Level 3"

<< Modul 7.3.3: JavaScript-Level 2: Zusammenfassung