Erstellung von Webseiten mit Frontpage Express

von Thomas Mühlbayer

Kapitel Sechs: 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ässt sich der Taschenrechner beliebig komplex ausbauen.

6.2. Weitere Beispiele zum Thema Javascript

Die folgenden Javascript-Beispiele werden ohne größere Erklärung angegeben. Schauen Sie jeweils im Quelltext nach, wie sie erstellt wurden.

• 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)

Zurück Zurück zum Inhaltsverzeichnis