Wöhlerschule - Wöhlerschule "Meine.." "Meine.." "Meine.." "..und meine Schule!"

JavaScript im Wahlunterricht

"JavaScript ist eine einfache Programmiersprache, die für den Einsatz im World Wide Web (WWW) konzipiert ist und die Möglichkeiten der statischen Hypertext-Markup-Language (HTML) erweitert"
[Mintert, 1996, S.19].

Dies ist eine mögliche, nicht vollständige Beschreibung, wie sie derzeit für JavaScript gegeben wird. Sie enthält drei wesentliche Aussagen:

Einführendes Beispiel

Zur Veranschaulichung der Leistungsfähigkeit von JavaScript soll hier kurz ein einführendes Beispiel aufgeführt werden, an dem sich vorab schon wesentliche Elemente dieser Skriptsprache erkennen lassen, ohne dass die detaillierte Kenntnis der Syntax von JavaScript zwingend erforderlich ist. Grundkenntnisse der Markierungssprache HTML werden jedoch zum Verständnis benötigt.

Die Geschwindigkeit einer gleichförmigen Bewegung soll in km/h aus dem zurückgelegten Weg und der dazu benötigten Zeit berechnet werden. Zur Ein- und Ausgabe der entsprechenden Größen sind Felder vorgesehen, in die der zurückgelegte Weg in km und die dafür benötigte Zeit in Stunden eingetragen werden. Betätigt man die Schaltfläche mit der Aufschrift "Geschwindigkeit berechnen", erfolgt die Ausgabe der berechneten Geschwindigkeit in km/h. Eine kurze Anleitung hilft beim Ausfüllen des Formulars.

Entfernung: in km	Zeit: in h
Geschwindigkeit: in km/h

Im Quelltext der zugehörigen HTML-Datei, der unten aufgeführt wird, erkennt man in den Zeilen 7 bis 23 innerhalb der

-Markierung ein Formular, das aus drei Ein-und Ausgabefeldern (Zeile 10 für die Entfernung, Zeile 11 für die Zeit und Zeile 20 für die Geschwindigkeit) und einem Button (Zeile 15 für die Berechnung der Geschwindigkeit) besteht.

Zur übersichtlichen Anordnung wurden die Ein- und Ausgabefelder mit Hilfe einer Tabelle (Zeilen 8 bis 22) dargestellt. Wesentliche Attribute der Ein- und Ausgabefelder, die mit Hilfe der Markierung <INPUT> definiert werden, sind das Attribut TYPE, das den Typ des Feldes (Textfeld, Button) bestimmt und das Attribut VALUE, das jedem Textfeld einen Anfangswert zuweist, der zu Beginn angezeigt wird, bzw. das bei Buttons die Beschriftung festlegt (vgl. Zeile 15). Der Wert des Attributes VALUE wird u.a. auch bei der Übermittlung des Formularinhaltes mittels E-Mail benötigt. Das Attribut NAME dient als Bezeichner, über das man mit JavaScript-Programmen auf das zugehörige Feld lesend und schreibend zugreifen kann.

Wenn man nun entsprechende Eingaben in die Felder vornimmt und auf die Schaltfläche klickt, stellt man fest, dass keine Berechnung ausgeführt wird, da die Berechnungsvorschriften nicht angegeben wurden.

Ohne JavaScript besteht nur die Möglichkeit, die in das Formular eingetragenen Daten beim Anklicken des Buttons "Geschwindigkeit berechnen" vom Client zum Server zu schicken und dort mit Hilfe eines CGI-Skriptes auf dem Server auszuwerten, d.h. die Geschwindigkeit zu berechnen und das Ergebnis wieder an den Client mit einer neuen veränderten HTML-Datei, die das Ergebnis enthält, zurückzuschicken. Die zusätzlichen Belastungen des Netzes durch zweimaligen Datenaustausch zwischen Server und Client und die nicht sehr einfache und plattformabhängige CGI-Programmierung lassen dieses Verfahren der interaktiven Web-Seitengestaltung zumindest für solche einfachen Dialoge als vollkommen ungeeignet erscheinen.

Eine Auswertung der eingegebenen Daten auf der Seite des Clients ist dagegen sinnvoller und erspart nicht nur Datentransporte im immer stärker belasteten Internet, sondern ermöglicht auch neben der sofortigen Darstellung der Ergebnisse das vorzeitige Überprüfen der eingegebenen Daten auf Fehler.

Eine Möglichkeit, die entsprechenden Anweisungen zur Berechnung der Geschwindigkeit in der HTML-Datei zu integrieren, besteht in einer Ereignissteuerung innerhalb der <INPUT>-Markierung.

In Zeile 15 ist die Markierung

<INPUT TYPE="BUTTON" VALUE="Geschwindigkeit berechnen">

durch folgende Anweisung

onClick="form.geschw.value=form.weg.value / form.zeit.value"

zu der Zeile zu ergänzen:

<INPUT TYPE="BUTTON" VALUE="Geschwindigkeit berechnen"
onClick="form.geschw.value=form.weg.value / form.zeit.value">

Innerhalb der Anführungszeichen des onClick-Ereignisses werden die Anweisungen zur Auswertung des Formularinhaltes angesprochen.

Entfernung: in km	Zeit: in h
Geschwindigkeit: in km/h

Das Formular ist ein Objekt der HTML-Datei. Die einzelnen Ein- und Ausgabefelder wiederum sind Objekte des zugehörigen Formulares mit der Eigenschaft, einen Wert zu besitzen. Daher geschieht auch der Zugriff auf die Eigenschaft eines Feldes über die bei Objekten bekannte Notation mit Hilfe der Bezeichnung über Objektvariablenname, gefolgt von einem Punkt und der Objekteigenschaft:

form.feldname.value

Leicht läßt sich dieses einfache Beispiel noch um die Überprüfung der Zulässigkeit der Eingaben im Formular ergänzen. Um Eingaben zurückzuweisen, die negativ sind, fügt man in den entsprechenden Eingabefeldern für den zurückgelegten Weg und die Zeit in Zeilen 10 und 11 die folgenden Anweisungen ein:

onChange="if (form.weg.value<=0) alert('Eingabe ist unzulässig')", bzw.onChange="if (form.zeit.value<=0) alert('Eingabe ist unzulässig')"

Damit ergibt sich für das Eingabefeld für den zurückgelegten Weg:

<INPUT TYPE="TEXT" NAME="weg" VALUE="" SIZE="10", MAXLENGTH="10"
onChange="if (form.weg.value<=0) alert('Eingabe ist unzulässig')">

Das Formular erhält damit die gewünschte Funktionalität:

Entfernung: in km	Zeit: in h
Geschwindigkeit: in km/h

 

 

Bei Eingabe eines nicht positiven Wertes erscheint dann auf dem Bildschirm eine Warnmeldung

Zusätzlich wird das Ergebnis noch auf zwei Nachkommastellen gerundet.

Ohne JavaScript könnte ein Web-Dokument zur Veranschaulichung des Begriffes Geschwindigkeit lediglich eine Kopie einer Lehrbuchseite eines entsprechenden Physikbuches sein, die vielleicht durch farbige Graphiken und Verweise auf andere nützliche Informationsquellen aufgewertet wird. Jegliche Dialogfähigkeit fehlte.

Mit JavaScript lässt sich die entsprechende Darstellung mit Leben erfüllen und eine neue Qualität der Gestaltungsmöglichkeit von Webseiten steht zur Verfügung: die Interaktivität, wie sie bisher nur von Lehrprogrammen oder aufwendigen Programmen geboten wird.

JavaScript ermöglicht es, dass Webseiten individuell für den Benutzer zusammengestellt werden, sofern dieser nur seine persönlichen Daten eingibt. Für den Schüler der Sekundarstufe II erscheint eine Seite zur Geschwindigkeitsberechnung, die sich der Methoden der Differentialrechnung bedient, für den Schüler der Sekundarstufe I steht stattdessen eine einfache Beschreibung des Weg-Zeit-Gesetzes für gleichförmige Bewegungen zur Verfügung. Zudem können beide Schüler auf den Seiten nicht nur mit JavaScript animierte Bildabläufe steuern, sondern auch umfangreiche Berechnungen durchführen lassen. Aufgaben zur Bearbeitung stehen zur Verfügung. Kommentare während der Eingabe der Lösung geben Hilfestellung und ermuntern. Zu den Lösungen gelangt man nur, wenn eine hinreichende Anzahl von Aufgaben bearbeitet wurde oder der Lehrer oder die Lehrerin ein Paßwort nach Abgabe eines ausgedruckten Arbeitsblattes zugeteilt hat. Individuelle Eingaben, z.B. die Anzahl der richtigen Lösungen, lassen sich auch noch nach Tagen abrufen, bis sie nach einer bestimmten Zeit zum Löschen freigegeben werden.

Für den Einsatz im Schulunterricht ergeben sich zahlreiche Anwendungen und weitere Möglichkeiten, die nicht nur bisher tradierte Unterrichtsgegenstände in aktuellem Gewand aufgreifen bzw. wiederbeleben, sondern auch neue Perspektiven im Unterrichtsgeschehen eröffnen.