Mathematische Inhalte, Lehrplanbezug:
Funktionen, Funktionsgraphen

Kurzzusammenfassung:
Darstellung von Funktionsgraphen auf Webseiten mit einem kleinen JavaScript-Programm und der Verwendung von Stilvorlagen.

Mediales Umfeld:
PC, MS Internet Explorer 5 (siehe auch letztes Kapitel), Dateien von der AMMU-Homepage: plot.htm, black.gif , red.gif, grau.gif

1. So wird das Ergebnis aussehen

Ergänzend zu meinen bisherigen Beiträgen "Web-Browser als Arbeitsoberfläche für den Mathematikunterricht" möchte ich dieses Mal einen Funktionsplotter demonstrieren, der mit einem einfachen JavaScript-Programm und so genannten Stilvorlagen arbeitet.
 
 

Funktionsplotter für Web-Browser gibt es schon Dutzende im Internet, diese sind aber mit Hilfe von Java-Applets realisiert. Applets sind fertige, kompilierte Java-Programme, bei denen der Quelltext nicht mehr erkennbar ist.

Mir kommt es aber darauf an, genau diesen Quelltext der zu Grunde liegenden Prozeduren sichtbar zu machen. Dazu kommt, dass Java-Programmierung nicht jedens Sache ist. Vielleicht ist dieser Beitrag auch ein Anlass, dass Sie – sofern Sie das nicht ohnehin schon getan haben – sich mit der Programmiersprache JavaScript beschäftigen.

Die Prozeduren sind mit Erläuterungen versehen, sodass ein Nachvollziehen der einzelnen Schritte leicht möglich ist.

Der Kern der Darstellung von Funktionsgraphen ist die Umrechnung vom Benutzer-Koordinatensystem ins Fenster-Koordinatensystem.

Benutzer-Koordinatensystem:
 
 

Fenster-Koordinatensystem:
 
 

Die Umrechnung ergibt sich aus der Gegenüberstellung der jeweiligen Koordinaten und einer linearen Interpolation zwischen beiden:
 
 

2. Erstellen des Eingabeformulars

Ich bevorzuge zur Erstellung von Web-Seiten inklusive ihrer Programmierung das Microsoft Programm Frontpage Express, das bei einer vollständigen Installation des MS Internet Explorers mit installiert wird.

Ich erläutere im Folgenden Schritt für die Schritt die Erstellung des HTML-Dokumentes mit Frontpage Express. Sollten Sie sich diese Arbeit nicht antun wollen, verwenden Sie einfach das fertige HTML-Dokument plot.htm von der AMMU-Homepage – Link Aussendungen.

Öffnen Sie Frontpage Express (meist in der Programmgruppe Internet Explorer).

Speichern Sie zu aller erst das noch leere Dokument: Menüpunkt Datei/Speichern – Schaltfläche [Als Datei] – plot.htm – [Speichern]

Mit diesem Trick umgehen Sie alle Schwierigkeiten, die sich mit den Pfadangaben bei Bildern und Links ergeben könnten, da mit der Benennung des Stammdokumentes alle Relationen zu externen Dateien eindeutig festgelegt werden.

Fügen Sie mit dem Menüpunkt Einfügen/Formularfeld/Einzeiliges_Textfeld ein Textfeld ein und bearbeiten Sie es nach einem Doppelklick auf das Textfeld
 
 

Setzen Sie die Beschriftung vor das Textfeld.

Erweitern Sie nun das Formular nach folgendem Muster und vergeben Sie die angegebenen Namen
 
 

Fügen Sie mit dem Menüpunkt Einfügen/Formularfeld/Schaltfläche eine Schaltfläche ein und bearbeiten Sie sie nach einem Doppelklick auf die Schaltfläche.
 
 

Klicken Sie die Schaltfläche [Erweitert] und fügen sie mit [Hinzufügen] ein weiteres Attribut hinzu:
 
 

Das bedeutet, dass später bei Klick auf diese Schaltfläche die Prozedur graph() gestartet wird.

Abschließend benennen Sie noch das gesamte Formular, indem Sie irgendwo im Formularbereich die rechte Maustaste drücken und im Kontextmenü den Menüpunkt Formulareigenschaften klicken und im Feld Formularname den Namen parameter eingeben.

3. Einfügen des Zeichenhintergrundes

Mit dem Menüpunkt Einfügen/Bild setzen Sie das Bild (eine Graphik mit 200*200 Pixel, Dateiname grau.gif) an eine beliebige Stelle des Dokuments.
Klicken Sie das Bild mit der rechten Maustaste und klicken Sie im Kontextmenü den Menüpunkt Bildeigenschaften. Fügen Sie dem Bild mit den Schaltflächen [Erweitert] dann [Hinzufügen] weitere Attribute hinzu:
Name: id
Wert: hg
Und noch einmal die Schaltfläche [Hinzufügen] klicken:
Name: style
Wert: position:absolute;visible:show;left:100px;top:200px;z-index:1

Damit bekommt das Hintergrund-Bild für die Zeichenfläche die Bezeichnung hg und folgende Stildefinition:
Sichtbar, linke obere Ecke bei den absoluten Fensterkoordinaten (100 Pixel, 200 Pixel) mit dem Koordinatenursprung in der linken oberen Fensterecke.
Der z-Index gibt die Position in der Reihenfolge an, in der die Objekte des Dokuments einander überdeckend auf den Bildschirm gelegt werden.

Beachten Sie, dass es egal ist an welcher Stelle Sie das Bild ins Dokument einfügen, da es durch die Stildefinition ohnehin an die richtige Stelle verschoben wird.

4. Programmierung

Der Menüpunkt Einfügen/Skript läßt Sie vorzugsweise am Beginn des Dokuments in einem Fenster (Markierung auf ¤ JavaScript) folgende Prozeduren eingeben:

// -----------------------------------------------------------------------------------------------------------------------
// Kommentare beginnen mit einem Doppelschrägstrich
// und müssen nicht eingetippt werden, sie sind hier auch in einer anderen Schriftart gesetzt
// -----------------------------------------------------------------------------------------------------------------------
// -----------------------------------------------------------------------------------------------------------------------
// Prozedur (=function) die ein entsprechendes Objekt an die Position (x,y) setzt
// -----------------------------------------------------------------------------------------------------------------------

function moveto(objectId,x,y) {
  objectId.style.pixelLeft = x + document.body.scrollLeft
  objectId.style.pixelTop = y + document.body.scrollTop
}

function graph() {
  var x = 0
  var y = 0
  var j = 0

  var xmin = document.parameter.xmin.value*1
  var xmax = document.parameter.xmax.value*1
  var ymin = document.parameter.ymin.value*1
  var ymax = document.parameter.ymax.value*1
  var term1 = document.parameter.term1.value
  var term2 = document.parameter.term2.value
  var dx = document.parameter.dx.value*1
  var dy = document.parameter.dy.value*1

  var kx = (xmax-xmin)/199
  var ky = (ymin-ymax)/199

moveto(hg,dx,dy)

// Weiterhin werden mathematische Funktionen dem Objekt Math entnommen
// Das sind z.B. sqrt, pow, exp, ln, sin, cos, tan, acos, asin, atan, round, ...
// Man erspart sich so die Schreibweise Math.sqrt, Math.pow, Math.exp, ...

  with (Math) {

    for (var i=0; i<=199; i++) {

      x = kx*i+xmin

      y = eval(term1)

      y = min(y,ymax) 
      y = max(y,ymin)

      j = round((y-ymax)/ky)

      eval("moveto(black"+i+",i+dx,j+dy)")
    }
  }

  with (Math) { 
    for (var i=0; i<=199; i++) {
      x = kx*i+xmin
      y = eval(term2) ; y = min(y,ymax) ; y = max(y,ymin)
      j = round((y-ymax)/ky)
      eval("moveto(red"+i+",i+dx,j+dy)")
    }
  }
}

for (var i=0 ; i<=199 ; i++) {
  document.write("<img src='black.gif' width='1' height='1' id='black" + i +
      "' style='position:absolute; visible:show; left:1px; top:1px; z-index:2'>")
  document.write("<img src='red.gif' width='1' height='1' id='red" + i +
      "' style='position:absolute; visible:show; left:1px; top:1px; z-index:2'>")
}

Quitieren Sie die Eingabe des Skript-Textes mit der Schaltfläche [OK].
Speichern Sie zum Abschluss das Dokument (Menüpunkt Datei/Speichern – [Als Datei] – ...)

Öffnen Sie den Internet Explorer und laden Sie mit dem Menüpunkt Datei/Öffnen – Schaltfläche [Durchsuchen] – plot.htm – [Öffnen] – [OK] das HTML-Dokument.
Sollten beim Ablauf des Dokuments Fehler auftreten, so wechseln Sie zum (noch offenen) Frontpage Express, korrigieren dort den Fehler, speichern erneut ab, wechseln zum Internet Explorer und aktualisieren (Funktionstaste [F5]) das Dokument bzw. laden es neu.

5. Schlussbemerkungen

Diese Webseite wird durch die verwendeten Stilvorlagen nicht von allen Web-Browsern angezeigt. Die beschriebene Web-Seite funktioniert klaglos mit dem MS Internet Explorer 5.
Die Version 4 des Internet Explorer kann die große Anzahl (insgesamt 401) an Objekten mit Stilvorlagen nicht so schnell abhandeln, es kann daher zu Verzögerungen beim ersten Aufbau des Dokuments im Browser-Fenster kommen, im Task-Manager von Windows kann minutenlang "keine Rückmeldung" angezeigt werden, hier braucht es nur ein wenig Geduld.
Für die Darstellung der Stilvorlagen im Netscape Navigator muss allerdings die Prozedur moveto umgeschrieben werden, da Netscape und Microsoft die Sprachdefinition von JavaScript für die Behandlung von Objekten des HTML-Dokuments wieder auseinander entwickelt haben.

Die entsprechenden Anpassungen finden auf der Homepage (plot.htm)