6. Projektbeispiele mit Formularen und Scripten

6.1 HTML-Taschenrechner

Schüler können, wenn sie HTML-Seiten-Erstellung gelernt haben, mit wenig Programmier-Kenntnissen einen eindrucksvollen HTML-Taschenrechner erzeugen.

Alle Befehle "hängen" direkt an den onClick-Ereignissen. Scripte müssen für diesen einfachen Rechner keine eingefügt werden.

Dieses Beispiel benutzt ein Formular (mit Namen Taschenrechner), das eine Tabelle als Layout für den Rechner enthält. In den Zellen der Tabelle sind das Display (Textfeld Display) und die Knöpfe (Z.B. Schaltfläche TastePlus) untergebracht.

Drückt man einen Ziffern-, Operator-, Klammerknopf oder den Dezimalpunkt- bzw. den Zehnerpotenzknopf (Taste e), wird einfach das entsprechende Zeichen im Display hinzugefügt. Dazu "hängt" am Ereignis onClick jeweils ein Befehl der Art
Taschenrechner.Display.value=Taschenrechner.Display.value + "(" .
Zwischen den Anführungszeichen steht die entsprechende Ziffer oder das Rechenzeichen oder die Klammer. (+ bedeutet bei Textfeldern: Hinzufügen).

Die Taste C (Clear) ist die Standard-"Zurücksetzen"-Taste für Formulare.

Am OnClick-Ereignis der "=" - Taste "hängt" der Befehl:
Taschenrechner.Display.value=eval(Taschenrechner.Display.value)
D.h., was das Textfeld Display enthält, wird berechnet und der Wert zurückgeschrieben.

Die "+/-" - Taste bewirkt dasselbe mit zusätzlicher Vorzeichenumkehrung:
Taschenrechner.Display.value=eval("("+Taschenrechner.Display.value+")*(-1)")

Mit Hilfe von Script-Funktionen läßt sich der Taschenrechner beliebig komplex ausbauen.

6.2 Lob-Preis-Versetzungsentscheidung

Dieses Beispiel existiert bisher nur als Idee. Es wäre aber eine schöne Anwendung in einer Schulseite.

Ein Formular mit Fächern und Eingabefelder für die Noten müßte erstellt werden. Nach Eingabe der Noten soll dann ein Script entscheiden, ob mit diesen Noten eine Versetzung bzw. Lob oder Preis möglich wäre.

6.3 Weitere Javascript-Beispiele

Die folgenden Javascript-Beispiele werden ohne größere Erklärung angegeben. Schauen Sie jeweils im Quelltext nach, wie sie erstellt wurden (und benutzen Sie den Back-Knopf des Browsers, um hierher zurückzukommen).

• Ein- Ausgabe mit Textfeldern
  (Eigenschaft value von Textfeldern, Wertzuweisung, String-Verkettung, event-handler: onClick)

• "Pop-Up-Fenster"-Beispiele:
  • Hinweisfenster alert öffnet sich auf Knopfdruck (onClick)
    Syntax: window.alert("Hinweistext")
  • Hinweisfenster alert öffnet sich beim Überfahren (onMouseOver)
  • Eingabefenster prompt (liefert eingegeben String als Ergebnis)
    Syntax: Stringvariable = prompt("Hinweistext", "vorgegebener Text")
  • Bestätigungsfenster confirm (liefert als Ergebnis true oder false)
    Syntax: Variable = confirm("Hinweistext")
    

• Farbveränderungen per Knopfdruck
  (Hintergrundfarbe document.bgcolor, Schriftfarbe document.fgcolor)

• Neues Browser-Fenster öffnen bzw. schließen
  (Fenstername=window.open(...), Fenstername.close() )

• Der Taschenrechner als einzelne HTML-Datei

• Sparberechnung mit und ohne Zinseszins
  (Optionsfelder, function, if-Befehl, Math-Objekt)

• Rechnungsstellung mit MwSt
  (Globale und lokale Variablen, Math-Objekt, function mit Wertübergabe)
  Dasselbe unter Verwendung eines Arrays.
  (a = new Array(7) erzeugt Array-Variable mit den Elementen a[o] bis a[6] ,
  Wiederholung mit der for-Anweisung)

• LGS-Lösen-Üben mit dem Gaußalgorithmus
  (enthält komplexeres Javascript-Programm mit zweidim. Arrays und vielen functions)

• Kopfrechentrainer für Klasse 1 bis 5
  (ist ein komplettes HTML-Javascript-Programm, das im Browser direkt ausgeführt werden kann. Per Download können die Dateien aber auch ins Intranet der Schule geholt werden, um den Trainer offline zu benutzen).

Thomas Mühlbayer, Regionale Arbeitskreise Internet im Oberschulamtsbezirk Karlsruhe