Erstsprache JavaScript

Noch vor nicht all zu langer Zeit war JavaScript als Unterrichtssprache praktisch unbrauchbar. Dies gilt inzwischen nicht mehr. Spätestens durch die erheblichen Verbesserungen, die mit ECMAScript 6 (2015) in die Sprache eingeflossen sind und die inzwischen auch von allen gängigen Browsern untersützt werden, hat sich JavaScript zu einer „echten Programmiersprache“ entwickelt.
Parallel dazu hat sich im Bereich von HTML/CSS durch den Übergang zu HTML5 und CSS3 eine Fülle neuer Möglichkeiten aufgetan. Damit ist eine attraktive Kombination – JavaScript mit HTML/CSS – entstanden, die für den Einstieg in die Programmierung im Informatikunterricht in Erwägung gezogen werden kann.

Wesentliche Pluspunkte, die JavaScript für sich verbuchen kann, habe ich im Abschnitt über die Sprachwahl ausgeführt, ebenso aber auch Schwächen und Defizite, die JavaScript verglichen mit Python für den Einsatz im Informatikunterricht im Gepäck hat.

Behindert und erschwert wird der Einstieg in die Programmierung insbesondere dadurch, dass selbst für einfache Programme, die eine Interaktion mit dem Anwender ermöglichen sollen, umständliche Funktions- und Methodennamen benötigt werden. Dies wird noch deutlich schlimmer, wenn Programme mit (einfacher) GUI und Ereignisbehandlung entwickelt werden sollen.

Um den Lernerfolg nicht durch solche aufgeblasenen Sprachelemente zu erschweren, habe ich eigens für diesen Zweck eine JavaScript-Bibliothek entwickelt.

Die JSpider-Bibliothek

JSpider ist eine JavaScript-Bibliothek zur Grafik- und GUI-Programmierung auf Basis von ECMAScript 6, speziell entwickelt für den Unterrichtseinsatz mit JavaScript als Lernsprache.

JSpider beinhaltet zusätzliche Funktionen, Erweiterungen und vereinfachte Schnittstellen vorhandener Funktionen und Datenstrukturen (etwa die Methoden .load() und .save() für Maps zum Laden/Speichern einer Map im LocalStorage des Browsers).

Ein Beispiel

Der Anwender soll eine beliebige Anzahl von Werten durch Komma getrennt eingeben. Das Programm addiert all diese Werte und gibt die Summe aus.

Lösung 1 (JavaScript pur)

let eingabe = prompt("Zahlen eingeben:");
let elemente = eingabe.split(",");
let summe = 0;
for (let e of elemente) {
    summe += Number(e);
}
document.write("Summe der Zahlen:"+summe);

Lösung 2 (JavaScript mit JSpider)

let zahlen = read("Zahlen eingeben:");
let summe = 0;
for (let zahl of zahlen) {
    summe += zahl;
}
write("Summe der Zahlen: "+summe);

Auf den ersten Blick sind die Unterschiede gering, scheinen eher kosmetischer Natur zu sein. Es steckt jedoch mehr dahinter:

Der Einsatz der JSpider-Bibliothek erspart dem frühen Programmierer diese Hürden und erlaubt es dem Informatiklehrer, objektorientierte Elemente dann einzuführen, wenn es passt. Zunächst einmal können kleinere Programme für kleinere Probleme rein imperativ-prozedural entwickelt werden. Der Überbau des objektorientierten Paradigmas ist hier aus meiner Sicht kontraproduktiv.

Noch ein Beispiel

Kernstück der JSpider-Bibliothek ist ein konsequent objektorientiert ausgerichteter Ansatz zur Grafik- und GUI-Programmierung, der die vielfältigen Möglichkeiten des HTML-Canvas nutzt und der Zielgruppe durch eine altersgemäße Schnittstelle den Zugang erleichtert. Eine zentrale Aufgabe kommt dabei den Spider-Objekten zu, die angelehnt sind an die Schildkröte der turtle-Grafik, in ihrer Funktionalität aber deutlich darüber hinaus gehen.

Das nachfolgende Beispiel zeigt ausdrücklich nicht die Leistungsfähigkeit der JSpider-Bibliothek, mit der sich auch (einfache) GUI-Anwendungen und eine umfangreiche Ereignisbehandlung auf einem für die Sekundarstufe I geeigneten Niveau realisieren lassen.

Es geht an dieser Stelle vielmehr darum, den Grundaufbau eines JSpider-Programms an einem einfachen Beispiel zu zeigen: die konsequent implementierte Objektorientierung und die organische Verknüpfung mit „klassischem“ JavaScript (hier am Beispiel von Schleifen). Zunächst wird eine „Welt“ erzeugt (ein HTML-Canvas) und danach ein Spider-Objekt, das diese Welt als Lebensraum hat und dort aktiv sein kann. 

let blatt = new World();
let stift = new Spider(blatt);
blatt.color = "black";
stift.linecolor = "lightcoral";
for (let k=1; k<=6; k+=1) {
    stift.spin(100);
    stift.turn(60);
}
stift.turn(60);
stift.jump(100);
stift.fillcolor = "#33ee55";
for (let k=1; k<=80; k+=1) {
    stift.wait(10);
    stift.dot(k);	
}
blatt.animate();

In dem Feld unten kann man sich den Ablauf und das Ergebnis des Beispielprogramms ansehen:

Damit ein JavaScript-/JSpider-Programm im Browser ausgeführt werden kann, muss es in ein HTML-Dokument eingebettet werden oder als separate Datei gespeichert und dann über den Skript-Namen eingebunden werden.

Nachfolgend ein Beispiel für ein solches HTML-Gerüst. Ergänzt um den obigen Beispielcode wäre es ein vollständig lauffähiges Programm, das der Browser nach dem Laden des HTML-Dokuments sofort ausführt.

<html>
<head>
<script src="jspider.js"> </script>
</head>
<body>
<script>
[... JavaScript-Code...]
</script>
</body>
</html>

Einsatz im Unterricht

Passend zu den Möglichkeiten der JSpider-Bibliothek habe ich einen JavaScript-Lernkurs entwickelt, der in insgesamt 18 Lektionen in die Programmierung einführt. Wer es bis dahin geschafft hat, kennt alle wesentlichen Kontroll- und Datenstrukturen, kann mit Zeit und Datum umgehen, kann zufällige Zahlen, Zeichen und Farben erzeugen und mit Hilfe der Möglichkeiten der JSpider-Bibliothek ereignisgesteuerte GUI-Anwendungen entwickeln.

Es schließen sich noch vier Ergänzungslektionen an, in denen ich anhand eines einfachen Kartenspiels exemplarisch zeige, wie man Schritt für Schritt von den ersten Überlegungen über den Entwurf zum selbst-programmierten Computerspiel gelangt.

Handskizze der Entwurfsphase:

Screenshot des fertigen Spiels:

(Erste) Erfahrungen

Nach zwei Durchgängen mit JavaScript, JSpider und meinem Lernkurs kann ich sagen: Es funktioniert. Im Praxiseinsatz hat sich zwar noch das ein oder andere Defizit der JSpider-Bibliothek gezeigt (so kann es etwa zu Fehlpositionierungen der Spider-Objekte im Canvas kommen, wenn das Canvas in ein komplexeres HTML-Dokument eingebunden ist), allerdings nur bei fortgeschrittenen oder ziemlich speziellen Programmteilen. Dem Lernen und dem Lernerfolg hat das nicht im Weg gestanden.

Meine Befürchtungen, was das Einrücken von Blöcken betrifft, haben sich – leider – bewahrheitet. Auch der oft wiederholte Hinweis, dass das Semikolon als Abschluss einer Anweisung zu setzen ist, war nicht durchgängig von Erfolg gekrönt. Gegen das offenbar nicht auszumerzende Credo vieler Programmieranfänger – „Hauptsache, es läuft!“ – kommt man nur schwer an. Wenn der Parser es schluckt, kann es ja nicht falsch sein.

Erfreulich ist hingegen, dass die beim Einsatz von Python aufgetretenen häuslichen Installationsprobleme, die dazu geführt hatten, dass zu Hause nicht geübt werden konnte, in weit geringerem Maße aufgetreten sind und in vergleichsweise kurzer Zeit behoben werden konnten, so dass alle Schüler zu Hause an ihrem Endgerät das Programmieren üben konnten. Dort, wo es (zunächst) nicht funktionierte, lag es entweder daran, dass die Datei jspider.js an die falsche Stelle kopiert worden war, dass mit einem veralteten Browser gearbeitet wurde (der die Neuerungen von ECMAScript 6 noch nicht beherrschte) oder der Browser so eingestellt war, dass er JavaScript nicht ausführen wollte.

(Vorläufiges) Fazit

JavaScript als Erstsprache im Informatikunterricht funktioniert. Im Grunde sogar ganz gut – zumindest kann ich das von dem vorgestellten Konzept so sagen. Durch den Einsatz der JSpider-Bibliothek werden (programmier-)sprachliche Hürden abgebaut und die Problemlösung auf Wesentliches reduziert. Die enge Verzahnung mit HTML/CSS hat sich ebenfalls positiv ausgewirkt, da ein Kurs „Webseiten-Entwicklung“ bereits durchgeführt wurde und entsprechende Kenntnisse dadurch vorhanden waren.

The power of JSpider

Mit JavaScript und der JSpider-Bibliothek lassen sich auch Programme entwickeln, deren Anforderungs­niveau über das hinaus geht, was man in der Sekundarstufe I im Unterricht vermitteln oder von Schülern erwarten kann. Für besonders begabte und/oder ambitionierte Schüler ist auf jeden Fall noch Luft nach oben.

Color-Code Screenshot Die Abbildung zeigt einen Screenshot des Programms Color-Code, eine Umsetzung des bekannten Spiels Mastermind mit JavaScript unter Verwendung der JSpider-Bibliothek. In aufgeräumter, gut lesbarer Form umfasst der Code etwa 400 Zeilen.

Die Farbkugeln (Spider-Objekte) rechts neben dem Brett (ebenfalls ein Spider-Objekte) werden mittels Drag & Drop an die gewünschte Position auf dem Spielbrett gezogen und dann der Auswertungsknopf gedrückt. Der Computer setzt als Rückmeldung die entsprechenden Markierungsstifte.
Um einen realistischen Eindruck zu bekommen, sollte man auf jeden Fall selbst einmal Color-Code spielen. Wer etwas „Nervenkitzel“ braucht, der spielt die Variante mit Punktwertung: Man beginnt mit 10.000 Punkten. Jede Sekunde des Nachdenkens und jeder Fehlversuch reduziert die Punktzahl.

JSpider: Download

Die JSpider-Bibliothek steht hier zum freien Download zur Verfügung, ebenso eine detaillierte Schnittstellenbeschreibung. Es handelt sich dabei ausdrücklich nicht um ein Tutorial, sondern um eine knappe, aber vollständige Referenz sämtlicher Funktionen, Eigenschaften, Methoden und Erweiterungen der JSpider-Bibliothek.

JSpider-Bibliothek (Version 1.4.2): jspider.js
JSpider-API-Dokumentation (PDF): JSpider-API

Bei Interesse an mehr Informationen zum unterrichtlichen Einsatz oder zum passenden Lernkurs kann man gerne mit mir Kontakt aufnehmen.