JavaScript-Uebungen

Heute ist

Inhalt
Beispiel 1
Beispiel 2
Beispiel 3
Beispiel 4
Beispiel 4a
Beispiel 5
Beispiel 6
Beispiel 7
Beispiel 8
Beispiel 8b
Beispiel 8c
Beispiel 8d
Beispiel 9
Beispiel 10

JS-Startseite

Grundrechenoperationen

Erläuterungen zum Quelltext für das Formular
Sinnvoll ist es, für die übersichtliche Anordnung der einzelnen Objekte (Eingabefelder, Buttons usw.) eine Tabellenstruktur zu verwenden.
Mit dem unten abgebildeten Quelltext wird der Tabellenkopf und die erste Rechenzeile erzeugt. Die Formularobjekte Eingabefeld, Button, Ausgabefeld werden mit Hilfe des input-Tags angezeigt.

Eigenschaften des input-Tags (Auswahl):

type - text (Ein- oder Ausgabefeld), button (Methode, Aktion), password (Eingabe wird hinter * versteckt), checkbox (Optionsschalter - MultipleChoise), radio (Optionsschalter - SingleChoise), reset (Löschen aller Feldinhalte), ...
name - Variablenname beliebiger Wahl, allerdings kein HTML-Wort
value - enthält einen vordefinierten Wert bei einem Ein- oder Ausgabefeld, dieser Wert ist programmtechnisch gesehen zunächst immer nur reiner ASCII-Text bzw. enthält den Beschriftungstext bei einem Button
size - bestimmt die Anzeigebreite des Objekts

Art der Methode (Event-Handler) des input-Tags (Auswahl):

onclick - Beim Anklicken des Objekts (hier ein Button) wird eine Methode (Ereignis) ausgeführt

Methoden:
In diesem Fall wird die Methode addiere(zahl1.value,zahl2.value) aufgerufen, deren Inhalt als JavaScript-Quelltext dargestellt ist. Hierbei handelt es sich um eine JavaScript-Prozedur, da das Ergebnis der Prozedur innerhalb der Prozedur erzeugt und auch ausgegeben wird.

<form name = "grundop" action = "">
 <table border="1">
  <tr>
   <td>Zahl1</td>
   <td>Zahl2</td>
   <td>Operation</td>
   <td>Ergebnis</td>
  </tr>
  <tr>
   <td><input type = "text" name = "zahl1" value = "" size="10"></td>
   <td><input type = "text" name = "zahl2" value = "" size="10"></td>
   <td><input type = "button" name = "add" value = "Addition"
              onclick = "addiere(zahl1.value,zahl2.value)"></td>
   <td><input type = "text" name = "summe" value = "" size="10"></td>
  </tr>
 </table>
</form>

Erläuterungen zum Quelltext für JavaScript
Für die Grundrechenoperationen gelten folgende Operatorzeichen:

+ plus,  * mal,  - minus,  / geteilt durch,  % modulo

Methoden werden innerhalb des script-Tags programmiert. Dabei kann es sich entweder um ein Prozedur oder um eine Funktion handeln. Beide Arten werden durch dasselbe Befehlswort function eröffnet.

Erklärungen zu den einzelnen Zeilen:
1. Zeile: Befehlswort function, daneben der Name der Funktion addiere , gefolgt von den Werteparametern z1, z2. Die Paramter bekommen ihre Werte von den formalen Parametern zahl1.value und zahl2.value im Textformat geliefert.
2. Zeile: Variablendefinition für eine Variable a, welche den Wert von z1 übernimmt, dabei wird der Inhalt von z1 mit der Funktion parseFloat von Text in eine reelle Zahl umgewandelt.
3. Zeile: analoges Vorgehen für die Variable b
4. Zeile: Berechnung der Summe aus a und b und Übergabe des Wertes (value) an das Ausgabefeld summe im Formular mit dem Namen grundop im Dokument mit dem Namen document.
Beachte: Alle Befehle innerhalb einer function müssen in geschweiften Klammern stehen. Jeder Befehl wird mit einem ; abgeschlossen.

 <script type="text/javascript">
1  function addiere(z1,z2) {
2  var a = parseFloat(z1);
3  var b = parseFloat(z2);
4  document.grundop.summe.value = a + b;}
 </script>

Zahl1	Zahl2	Operation	Ergebnis