Javascript Tutor - Lektion 7
Übung: Erweitere die vorherige Seite. Erstelle zwei Texteingabefelder. Wenn Du auf den Link klickst, soll ein Fenster aufgehen, das den Inhalt des ersten Feldes anzeigt, und dann noch eins mit dem Inhalt des zweiten Feldes.
Übung: Erstelle eine Seite mit zwei
kleinen Texteingabefeldern nebeneinander. Plaziere 4 Links darunter. Addieren,
Subtrahieren, Multiplizieren und Dividieren. Wenn der Nutzer auf den Link
Addieren klickt sollen die beiden Zahlen addiert werden und die Rechnung im
Pop-Up angezeigt werden wie folgt...
Beachte, dass ich sage "Hier ist eine Lösung" anstatt "Hier ist die Lösung". Wenn Du anfängst, Javascript zu programmieren, wirst Du feststellen, dass es mehrere Wege gibt, zum Ziel zu gelangen. Obwohl man darüber streiten kann, dass der eine Weg "besser" als der andere ist, ist am Ende nur wichtig, dass es funktioniert. Als ich zu programmieren anfing war ich immer in Sorge, ob ich die Dinge "richtig" mache. Eines Tages dämmerte es mir... der "richtige" Weg ist der, der funktioniert. Man kann die Scripte später verbessern, wenn man will, aber solange das Ziel erreicht wurde, ist es in Ordnung.
Eine andere Eigenschaft, die wir ermitteln oder ändern können ist die Hintergrundfarbe des Dokuments. Schau Dir das mal ...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function BgcolorGetter()
{
alert (window.document.bgColor);
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="#BBDDCC">
Klicke <A HREF="javascript:BgcolorGetter()">hier</A>, um die Hintergrundfarbe des Dokuments zu sehen.</BODY>
</HTML>
|
bgColor ist eine Eigenschaft des Objektes Dokument. Spiel mal ein wenig mit der Farbe im Body Tag und schaue, ob es die richtigen Werte der Hintergrundfarbe zurück gibt. Entferne das BGCOLOR Attribute aus dem Body Tag und schau, was passiert.
Können wir die Hintergrundfarbe auch einstellen? Wetten, dass...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function BgcolorSetter(mycolor)
{
window.document.bgColor = mycolor;
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:BgcolorSetter('#FF9999')">Rot</A>
<A HREF="javascript:BgcolorSetter('#99FF99')">Grün</A>
<A HREF="javascript:BgcolorSetter('#9999FF')">Blau</A>
</BODY>
</HTML>
|
Verstehst Du, was hier vorgeht? Studiere es solange, bis Du's kapierst.
Übung: Füge noch drei weitere Farbbereiche zur Seite hinzu. Füge AUCH etwas hinzu, was die Originalfarbe der Seite speichert und füge eine siebente Auswahl hinzu, um die Farbe auf den Ursprungswert zurückzustellen.
Beachte, dass in der vorherigen (und folgenden) Lösung das Script nach dem <BODY> Tag folgt. Der Grund dafür ist einfach. Nach etwas experimentieren fand ich heraus, dass manche Browser die Hintergrundfarbe beim Laden des Body Tags speichern. Wenn der Browser die Hintergrundfarbe vor dem Lesen des Body Tags speichern soll, kann er sich nicht mehr erinnern und das Script verhält sich komisch. Ich habe diese Eigenart nur bei der letzten Version von Netscape gefunden (Ein gutes Beispiel dafür, warum Du Deine Scripte immer mit verschiedenen Browsern testen solltest und warum Fehlerbeseitigung ein großer Teil des Programmieren ist.) Jedenfalls ist eine einfache Ersatzlösung, das Script nach dem Body Tag einzusetzen. Ich weiß, dass man normalerweise die Scripte in den HEAD Bereich packt, aber dass ist nur der vorgeschlagene Weg, keine Pflicht.
Übung: Erstelle noch eine Seite und füge diese Grafiken ein...
Die hexadezimalen Codes sind auf den Grafiken (puh). Mache es so, dass beim Drüberfahren mit der Maus die Hintergrundfarbe des Dokuments entsprechend geändert wird. Wenn die Maus von der Grafik wegbewegt wird, wechselt die Hintergrundfarbe zum Ausgangswert zurück.
| << Zurück Weiter >> |
 |
|
 |
Invest
in the future - Hug your kid today.
