aufgeschlossen Programmieren mit JavaScript

HTML - Seite mit einem Formular - das erste Script

 HTML - Grundlagen           Inhalt            einfache Berechnungen

Beispiel
Wir wollen Dollar -Beträge in EURO umrechnen.
Dollar (Kurs 1.15)

EURO

Sie können die Funktionsweise hier testen, indem Sie die Zahl hinter Dollar ändern und dann auf "Berechne" klicken.

oder

"euro.html"als neue Seite öffnen
Quelltext 
<html>
<head>
<title>erstes Beispiel : Umrechnung Euro - Dollar </title>
<script language="JavaScript">
Hier wird das Script eingefügt
</script>
</head>

<body>
 Wir wollen Dollar - Beträge in EURO umrechnen.
<br>
<form   name="Umrechnung">
Formular mit dem Namen "Umrechnung"
Dollar   <input type="text"  size="10"  name="Dollar">
Eingabefeld mit dem Namen "Dollar"
<p>
<input type="BUTTON" value="Rechne um" onclick="EuroUmrechnung()"> </p>
Schaltfläche, die beim Anklicken die Funktion aufruft.
<p>
EURO   <input type="text"  size="20"  name="EURO">
Feld mit dem Namen "EURO" für das Ergebnis
</p>
</form>
</body>
</html>
Javascript-
Funktion 
function EuroUmrechnung(){
Schlüsselwort function - Name der Funktion
Klammern und die geschweifte Klammer als Beginn des
Funktionsblocks
   var DollarBetrag, EUROBetrag;
Deklaration der Variablen
nicht unbedingt nötig, aber guter Stil
   DollarBetrag = document.Umrechnung.Dollar.value;
Wir holen den vom Benutzer eingegebenen Wert ab
document.<Formularname>.<Input-Feld-Name>.value
als genaue Referenz auf das gewünschte Objekt
    EUROBetrag = DollarBetrag / 1.15;
Berechnung - "=" als Zuweisung - Komma als Punkt
    document.Umrechnung.EURO.value=EUROBetrag;
Wir schreiben den berechneten Wert in das Formular
und zwar in das Feld mit Namen "EURO"
  }// Ende der Funktion
geschweifte Klammer zu - // Rest der Zeile als Kommentar
Objekte Javascript ist objektorientiert:
Das Objekt document bezeichnet den Inhalt des aktuellen Browserfensters, darin liegt das Form - Objekt Umrechnung, das wiederum die Eingabefelder Dollar und EURO enthält; deren Wert (value) - Eigenschaft im Script gelesen bzw. verändert wird.
Aufgabe 1 Füge ein zweites Ausgabefeld in den HTML - Text ein : "Kurs". Ergänze die Funktion, so dass sie auch bei beliebigen Kursen funktioniert.
(Lade "veurodollar.html" in den HTML - Editor, speichere unter "EuroDollar.html" und ändere dann den Quelltext.)
Aufgabe 2 Füge einen zweiten Button ein mit der Beschriftung: "Rechne zurück". Schreibe hinter die Funktion "EuroUmrechnung" eine zweite Funktion "DollarUmrechnung", die den Euro- Betrag in Dollar umrechnet.
(Lade "veurodollar.html" in den HTML - Editor, speichere unter "Euro2.html" und ändere dann den Quelltext.)
 HTML - Grundlagen        Seitenanfang         einfache Berechnungen