JavaScript - Begrüßung

Das aufgelistete Beispiel läßt sich durch Betätigen von Buttons befehlen, ob es "Guten Morgen", "Guten Tag", "Guten Abend" oder "Gute Nacht" in einem Textfeld anzeigen soll. Da in diesem Beispiel das Formular den Namen "formular1" und das Textfeld den Namen "begruessung" bekommt, läßt sich der Inhalt des Textfeldes als Variable namens document.formular1.begruessung.value ansprechen und als normale Variable abfragen und zuweisen.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Spezifikation if-else-Unterscheidung] [Objektreferenz elements]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                             /* HTML-Kommentar fuer Browser ohne JavaScript */

function beg_function(param)     /* Funktion mit einem Parameter definieren */
{                                /* Funktionsblock einleiten */

  var output="";                 /* Variable output definieren und zuweisen */

  if (param==0)                  /* wenn 0 als Parameter uebergeben */
    output="Guten Morgen";       /* Variable output zuweisen */

  if (param==1)                  /* wenn 1 als Parameter uebergeben */
    output="Guten Tag";          /* Variable output zuweisen */

  if (param==2)                  /* wenn 2 als Parameter uebergeben */
    output="Guten Abend";        /* Variable output zuweisen */

  if (param==3)                  /* wenn 3 als Parameter uebergeben */
    output="Gute Nacht";         /* Variable output zuweisen */

  document.formular1.begruessung.value=output;  /* Textfeld fuellen */

}                                /* Funktionsblock beenden */

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body>

<a href="begruessung.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf begruessung.html -->

<br>
<br>
<br>
<form name="formular1">  <!-- HTML-Formular definieren -->

<input type=text name="begruessung" value="Guten Tag" size="50">
  <!-- Dies ist das Textfeld -->

<br>
<br>

<input type=button value="frueh" onClick="beg_function(0);">
  <!-- Dies ist der frueh-Button -->

<input type=button value="tagsueber" onClick="beg_function(1);">
  <!-- Dies ist der tagsueber-Button -->

<input type=button value="abends" onClick="beg_function(2);">
  <!-- Dies ist der abends-Button -->

<input type=button value="nachts" onClick="beg_function(3);">
  <!-- Dies ist der nachts-Button -->

</form> <!-- HTML-Formular beenden -->
</body>
</html>
Autor: Ulrich Kritzner