Grundlagen der JavaSkript-Programmierung

• Beispiel: Hello world
• Bedingungen: if...else, if...else if ... else, switch
• Schleifen
• Funktionen und Objekte
• with, for...in,
• Formularelemente (Text, Textfeld, Radio Button, Checkbox, Listen)
  Beispiel: Reaktion auf Usereingabe, Auswertung eines einfachen Formulars
• Events (Maus, Keyboard)
  Beispiel Statusleistenanzeige bei Mausover

Bedingungen

IF ... ELSE
Die if-Bedingung erlaubt, daß ein bestimmter Programmteil ausgeführt wird, wenn die Bedingung zutrifft. Wenn die Bedingung nicht zutrifft, wird ein anderer Programmteil ausgeführt.

Beispiel:
Wenn Sie auf den folgenden Button klicken, können Sie entweder OK oder Abbrechen wählen. Je nach Auswahl erhalten Sie eine andere Botschaft:

Der Code hierzu sieht folgendermaßen aus:

<FORM>
<INPUT TYPE="button" VALUE=" IF " onCLick="if(confirm('Stimmts?' )) {alert('Jawohl!')}else {alert('Leider nicht')}">
</FORM>

Die Form-Tags das Input-Tag und das Value-Tag kennen Sie ja bereits, ebenso onClick und alert.

confirm
Diese JavaSkript-Funktion ist ähnlich wie alert. Hier wird allerdings ein kleines Fenster geöffnet, das im Gegensatz zu dem alert-Fenster nicht nur einen OK-Button sondern einen zweiten Button (abbrechen o. ä.) enthält. Wenn auf den OK-Button geklickt wird, ist die Bedingung erfüllt und es erscheint das alert-Fenster mit >>Jawohl!<<. beim Klicken des anderen Butons erscheint das Fenster mit der Botschaft >>Leider nicht<<.

Die If-Bedingung wird folgendermaßen verwendet:
if (Bedingung){ Was auch immer getan werden soll, wenn die Bedingung zutrifft }
else{ Das was getan werden soll, wenn die Bedingung nicht zutrifft }

IF ... ELSE IF ... ELSE
Mit if ... else kann man zwar eine Bedingung prüfen, wenn man aber mehrere Bedingungen gleichzeitig prüfen will, muß man dies mit if ... else if ... else machen. Dabei kann eine beliebige Anzahl von else if's verwendet werden. Der Programmteil, der auf else folgt, wird nur dann ausgeführt, wenn keine der Bedingungen zutreffend ist.

Beispiel:
Wählen Sie eine der Farben durch anklicken aus. Drücken Sie dann auf den Button "Auswahl prüfen". Es erscheint ein Fenster, in dem die gewählte Farbe angezeigt wird. Durch anklicken von "Löschen" wird die Auswahl wieder gelöscht.

Code:

<FORM>
<INPUT TYPE="radio" NAME="Auswahl">rot<br>
<INPUT TYPE="radio" NAME="Auswahl">blau<br>
<INPUT TYPE="radio" NAME="Auswahl">gelb<br>

<INPUT TYPE="button" value=" Auswahl prüfen "
onCLick="if(Auswahl[0].checked){alert('rot')}
else if(Auswahl[1].checked){alert('blau')}
else if(Auswahl[2].checked){alert('gelb')}
else {alert('Bitte eine Farbe auswählen')}">

<INPUT TYPE="reset">
</FORM>

Auch hier finden wir wieder das Form-Tag, Buttons.