JavaScript / Grundkurs - 5. Ein- und Ausgaben

von: Werner Zenk

1. Das erste JavaScript
2. Variable Variablen
3. 1 x 1 in JavaScript
4. Gleich oder Ungleich

5. Ein- und Ausgaben
6. Wie spät ist es?
7. Öffne das Fenster
8. JavaScript schreibt!

9. Schöne Schleifen
10. Arrays - Datenfelder
11. Alles Zufall?
12. Die Zeichenkette

Um einen Text eingeben zu können, benötigen Sie den HTML-Tag <input type="text" name="">
Innerhalb des Name-Attributs müssen Sie einen Namen eintragen: <input type="text" name="Eingabe">
Außerdem den Button aus der letzten Kursfolge, um das JavaScript zu starten.

Um eine Eingabe in ein Textfeld mit JavaScript auswerten zu können muss das Textfeld und der
Button innerhalb eines HTML-Form-Tags stehen. <form name=""> </form>
Innerhalb des Name-Attributs müssen Sie einen Formnamen eintragen: <form name="Form1"> </form>

Ein Textfeld können Sie mit JavaScript so auslesen: document.Formname.Textfeldname.value
document ist das Dokument (oder Fenster) in dem der Form-Tag steht.
Formname ist der Name des Form-Tags (Form1).
Textfeldname ist der Name des Textfeld-Tags (Eingabe).
value enthällt den Wert (Inhalt) der Eingabe.

<script type="text/javascript">
 function Start() {
  var texteingabe = document.Form1.Eingabe.value;
  alert(texteingabe);
 }
</script>

<form name="Form1">
 Eingabe: <input type="text" name="Eingabe"> 
 <input type="button" value="Fertig!" onClick="Start();">
</form>

Auch die Ausgabe eines Textes in ein Textfeld ist möglich.
Zur Anzeige der Ausgabe verwenden wir zum Beispiel den HTML-Tag <textarea name=""></textarea>

<script type="text/javascript">
 function Start2() {
  var textausgabe = "Herzlich Willkommen.";
  document.Form2.Ausgabe.value = textausgabe;
 }
</script>

<form name="Form2">
 <textarea name="Ausgabe"></textarea>
 <input type="button" value="Grüße!" onClick="Start2();">
</form>

Im nächsten JavaScript überprüfen wir nun ob der Benutzer etwas eingegeben hat.
Dazu nehmen wir den if ... else-Befehl mit den Vergleichsoperatoren aus der letzten Kursfolge.

<script type="text/javascript">
 function Start3() {

   if (document.Form3.Eingabe.value == "") {  // Hier wird die Eingabe überprüft
    alert( "Bitte geben Sie Ihren Namen ein!" );
   }
 
   else {
    alert( "Herzlich Willkommen " + document.Form3.Eingabe.value );
   }

 }
</script>

<form name="Form3">
 Name: <input type="text" name="Eingabe"> 
 <input type="button" value="Fertig!" onClick="Start3();">
</form>

Bei Bestellungen gibt es öfters Checkboxen, die man Mithilfe von JavaScript auch auswerten kann.
Der HTML-Tag dazu heißt: <input type="checkbox" name="">
Innerhalb des Name-Attributs müssen Sie einen Namen eintragen:
<input type="checkbox" name="Checkbox1">

Eine Checkbox können Sie mit JavaScript so auslesen: document.Formname.Checkboxname.checked
Formname ist der Name des Form-Tags (Form4).
Checkboxname ist der Name der Checkbox (Checkbox1).
checked überprüft ob eine Checkbox angeklickt wurde.
Die Checkbox kann dabei den Wert true (wahr) haben wenn sie angeklickt wurde
oder false (falsch) wenn die Checkbox nicht angeklickt wurde.

<script type="text/javascript">
 function Start4() {
  var Bestellung = "Bestellung: ";
  if(document.Form4.Checkbox1.checked == true){Bestellung += "Pizza Hawaii, "}
  if(document.Form4.Checkbox2.checked == true){Bestellung += "Pizza Salami, "}
  if(document.Form4.Checkbox3.checked == true){Bestellung += "Pizza Tunfisch"}
  if(Bestellung != "Bestellung: "){alert(Bestellung);}
}
</script>

<form name="Form4">
  <input type="checkbox" name="Checkbox1"> Pizza Hawaii <br>
  <input type="checkbox" name="Checkbox2"> Pizza Salami <br>
  <input type="checkbox" name="Checkbox3"> Pizza Tunfisch <br>
  <input type="button" value="Meine Bestellung" onClick="Start4();">
</form>

info: Ich werde öfters gefragt wohin man das JavaScript schreibt, zwischen <head> und </head> oder in den <body>-Bereich der Seite. Am besten ist das JavaScript im <head>-Bereich aufgehoben.
Es gibt aber Ausnahmen, zum Beispiel wenn das JavaScript einen Text auf der Seite ausgeben muss, dann gehört es in den <body>-Bereich der Seite.

4. Gleich oder Ungleich 5. Ein- und Ausgaben 6. Wie spät ist es?