Lektion 3 - Eine Dialogbox mit zwei Schaltflächen

In der lezten Lektion hast Du gelernt, wie man eine einfache Dialogbox mit dem alert-Befehl erstellt die z.B. wie in dem Bild unten den Text "Willkommen bei OFFI-online" enthält. Dazu kommen noch ein schwarzes Ausrufezeichen auf einem gelben Dreieck und ein OK-Button.



In dieser Lektion lernst Du nun eine Dialogbox mit zwei Schaltflächen zu erstellen und vorallem - diesen Schaltflächen auch noch Funktionen zuzuweisen.
Das eigentliche Erstellen der Dialogbox ist einfach: Du nimmst einfach den Quelltext aus der letzten Lektion, schreibst aber statt "alert" den Befehl "confirm" in den Quelltext. Dein Ergebniss müsste dann wie folgt aussehen:

Quelltext: Dialogbox:
<html>
<head>
</head>
<title>OFFI-online</title>
<SCRIPT LANGUAGE="JavaScript">
function hallo()
{
confirm ("Willkommen bei OFFI-online");
}
</SCRIPT>
<body onload="hallo()">
</body>
</html>



Funktionen für die Buttons!
Nun aber das "Spannende" an der "Zwei-Schaltflächen-Dialogbox": Du kannst zum Beispiel hingehen und je nachdem auf welchen Button der Surfer klickt auf unterschiedliche Homepages weiterleiten. Eine Mögliche Frage wäre z.B.: Möchtest Du Hintergrundmusik hören? und danach wird man entweder auf eine Seite mit Hintergrundmusik oder auf eine ohne weitergeleitet. Als Grundlage dient wieder der vorhandene Quelltext (siehe oben). Dieser wird jetzt nur noch ergänzt.

Eine Grundlage hierfür ist jedoch die Benutzung von Variablen. Eine Variable ist ein Ort, an dem der Computer sich "etwas merkt". Man kann sie sich wie eine Schublade vorstellen: Der Computer sich kann hier Text, Zahlen oder boolsche Ausdrücke (wahr oder falsch) merken. In unserem Fall soll sich der Computer merken welcher Button gedrückt wurde. Dies geschieht indem er sich merkt, ob die Aussage wahr ist (es wurde OK gedrückt) oder falsch (es wurde Abbrechen gedrückt). Natürlich kann der Computer seine Schublade auch "neu bestücken" wenn man erneut einen Button anklickt.

Aber woher weiss der Computer wo er sich was "gemerkt" hat? Ganz einfach, er gibt den "Schubladen" einfach Namen, eher gesagt vergeben wir die Namen.
Das "Namengeben" ist aber ganz einfach! Es geschieht als aller Erstes im JavaScript, direkt nachdem die erste geschweifte Klammer geöffnet wurde. Der Befehl hierfür lautet var und wird gefolgt von dem Namen den wir der Variablen geben wollen. Beendet wird der Befehl, wie auch alle anderen in JavaScript, mit einen Semikolon.

Als Beispiel einmal ein JavaScript welches eigentlich nichts macht, sondern indem nur eine Variable initialisiert (mit dem Computer vereinbart) wird.

<SCRIPT LANGUAGE="JavaScript">
function variable()
{
var variablenname;
}
</SCRIPT>
War doch gar nicht schwer, oder?
Beispiel1 (einfache confirm-Box)
Geschafft, zurück zur Übersicht!