Morgens um 7 Uhr geht es los. Ich bin ein Frühaufsteher und da ich meine Nichte mitnehmen zur Arbeit, bleibt ihr wohl nichts anderes übrig, als um 7 Uhr fertig zu sein. Um halb Acht sind wir im Büro und es ist noch alles leer. Um die Uhrzeit ist nicht nicht so viel los und wir kochen erst mal Kaffee.
Dann geht es direkt an den Rechner. Ich habe ihr einen Arbeitsplatz bei mir im Büro vorbereitet und wir starten ohne viel Doku direkt mit der Programmierung. Einfach ins kalte Wasser werfen ist doch immer noch die beste Möglichkeit schwimmen zu lernen 🙂
Womit fangen wir also an. Klare Sache. Das erste Programm ist IMMER ein „Hello World“. Also los. Ein „Hello World“ ist in JavaScript nur eine einzelne Zeile Code und nach der einen Zeile Code ist schon das erste Programm fertig. Es hat keine echte Relevanz, ist aber gut geeignet, um den eigentlichen Entwicklungsprozess zu zeigen, der in dem Fall absolut trivial ist und soll die Angst vor der Programmierung und dem ganzen komplizierten Zeug reduzieren und die Motivation steigern. So wie ich das sehe, scheint da aber nicht viel zu passieren, also machen wir erst mal ein paar kleine Schritte im flachen Wasser. Grundlagen schaffen ist eine solide Basis…
Nach dem ersten JavaScript Hello World ist es das Wichtigste, ein Verständnis von Variablen, Funktionen, Schleifen, Kontrollstrukturen, Arrays und Objekten zu erlangen. OK, auch die Objekte verzichte ich heute erst mal, aber man muss ja nicht alles auf einmal lernen. Gemeinsam programmieren wir dann ein paar Beispiele. Dabei werden Syntax, Grammatik und die Funktionen der einzelnen Elemente klar gemacht.
Das erste Hello World
alert ("Hallo")
Die erste Variable
var hello = "Hello"; alert(hello)
Eine erste Funktion
var x = 10;
var y = 12;
var wert = addiere (x,y);
alert (wert);
Function addiere (x,y)
{
var ergebnis;
ergebnis = x + y;
return ergebnis;
}
Wow: Mit 2 Parametern und return Wert. Das alles in weniger als einer Stunde. Entweder ich bin ein begnadeter Lehrer oder mein Nichte hat es drauf. Ich gehe erst mal vom ersten aus :-). Aber wir haben noch viel vor und keine Zeit, uns auf unseren Lorbeeren auszuruhen. Eine Funktion, die 2 Werte addiert ist ja schon ganz nett, aber das geht doch noch besser. Nun eine Funktion, die beliebig viele Zahlen addiert. Da kommt auch schon das Array ins Spiel :-)….. So ein Zufall aber auch 🙂
Mit ein wenig Hilfe ist auch das ganz schnell fertig und sieht dann wie folgt aus.
var data = [100,20,30,1,2,3,4]; var wert = addiere (data); alert (wert);
Function addiere (liste)
{
var ergebnis = 0;
for (var i = 0; i < liste.length; i++)
{
ergebnis = ergebnis + liste[i];
}
return ergebnis;
}
Ich habe das Gefühl, meine Nichte hat nun die Grundprinzipien der JavaScript Programmierung begriffen und das ist der Zeitpunkt, sie mal ein wenig alleine machen zu lassen. Die Aufgabe eine erste eigene Funktion zu realisieren, sollte nun machbar sein. Statt zu addieren soll nun subtrahiert werden. Einfach die Funktion kopieren und aus dem + ein – machen. Das Ergebnis sieht dann wie folgt aus.
function subtrahiere (liste)
{
var ergebnis = 0;
for (var i = 0; i < liste.length; i++)
{
ergebnis = ergebnis - liste[i];
}
return ergebnis;
}
Das Ergebnis ist aber sehr unerwartet. Denn eigentlich hätte ich bei dem obigen Array ein Ergebnis von 40 erwartet. Aber stattdessen ist das Ergebnis -160. Da wird mal wieder ein klassisches Problem der Software Entwicklung sichtbar. Die Spezifikation war unvollständig. Kein Wunder, dass die Umsetzung auch nicht der Erwartung entspricht.
Ist aber kein Problem. Dank der Tatsache, dass wir sehr agil entwickeln :-), kann ich die Spezifikation vervollständigen und nachdem wir gemeinsam den Lösungsansatz besprochen haben, kann meine Girl’s Day Mitarbeiterin des Tages die Lösung schnell umsetzen.
function subtrahiere (liste)
{
var ergebnis = liste[0];
for (var i = 1; i < liste.length; i++)
{
ergebnis = ergebnis - liste[i];
}
return ergebnis;
}
Fertig. 🙂
Also noch ein Versuch. Dieses mal die Funktionen multipliziere und dividiere am Beispiel von subtrahiere programmieren. Das Übt die Finger und festigt das Verständnis der Syntax und der Grammatik. Dieses mal funktioniert es und die Funktionen werden ohne mein Zutun programmiert und halten meinem Test stand.
Nachdem wir noch mal kurz alles durch gesprochen haben, geht es mit der eigentlichen Aufgabe los. Wir sind globale Variablen, lokale Variablen, Funktionen, Schleifen und einfache arithmetisch Operatoren durchgegangen. Eigentlich fehlen ihr zur vollwertigen Programmiererin nur noch Kontrollstrukturen und die kommen noch früh genug :-).
Jetzt ist es fast 10 Uhr und die Grundlagen-Druckbetankung ist abgeschlossen, und die Aufgabe für heute heißt Conway’s Game of Life. Bevor das lustige Programmieren beginnen kann, müssen erst mal die Anforderungen geklärt werden. Zum Glück gibt es Wikipedia (http://de.m.wikipedia.org/wiki/Conways_Spiel_des_Lebens) da kann man alles genau nachlesen. Um ihr ein wenig die Angst vor der Aufgabe zu nehmen, zeige ich Ihr einmal meine Musterlösung im Browser und wir prüfen, ob ich die Regeln eingehalten habe.
Conway’s Game of Life Regeln:
- Eine tote Zelle mit genau drei lebenden Nachbarn wird in der Folgegeneration neu geboren.
- Lebende Zellen mit weniger als zwei lebenden Nachbarn sterben in der Folgegeneration an Einsamkeit.
- Eine lebende Zelle mit zwei oder drei lebenden Nachbarn bleibt in der Folgegeneration lebend.
- Lebende Zellen mit mehr als drei lebenden Nachbarn sterben in der Folgegeneration an Überbevölkerung.
Meine Musterlösung scheint OK zu sein und ganz nebenbei kann man sich bei der Prüfung meiner Lösung auch noch mal mit den Regeln befassen. Da ich mich bei der Aufgabe zum Girl’s Day nur auf Javascript konzentrieren möchte und das ganze DOM Gehampel und HTML Canvas zeichnen raus halten möchte, definiere ich eine Schnittstelle, die es möglich macht, dass man sich ausschließlich auf die Funktion berechneNaechsteGeneration konzentrieren kann. Das Zeichnen der nächsten Generation, der HTML Rumpf und die Buttons zum Starten, Stoppen und Einzelschritt sind wie von Zauberland einfach da und es gibt keinen Grund auch nur einen Gedanken daran zu verschwenden.
Die Zellen habe ich mal in einem 2-dimensionalen Array untergebracht. Das macht besonders viel Spaß, da man nun mit verschachtelten Schleifen arbeiten muss. In dem Array sind alle lebenden Zellen mit einer 1 und alle toten Zellen mit einer 0 belegt. Das Array steht am Anfang der JavaScript Datei und durch den Austausch einiger Nullen/Einsen kann man eine geänderte Start Konfiguration der Zellen erzeugen.
Die Aufgabe für die nächsten Stunden heißt nun fülle die Funktion berechneNaechsteGeneration mit Leben. Leichter gesagt als getan aber im Team (ich habe mich wirklich zurückgehalten und Versucht, keine Lösung vorzugeben) haben wir dann eine voll funktionierende berechneNaechsteGeneration Funktion realisiert. An einigen Stellen ist die Lösung nicht sehr elegant, aber die Aufgabe ist eigentlich erfüllt.
Jetzt ist es an der Zeit Mittagspause zu machen. Heute ist der 27.03.2014 und der Öffentliche Dienst streikt. Schlimm genug, das einige Mädchen deshalb den Girl’s Day absagen mussten, nein – wir bekommen in der Kantine der UNI Dortmund auch nur einen Notfall Speiseplan geboten. Großartig. Da kann sich die UNI direkt im besten Licht zeigen….
Nach einem soliden Mahl und viel Staunen über die Größe der Uni und die Menge der jungen Menschen die sich für Mathematik, Chemie, Informatik und all die anderen Wissensgebiete interessieren, geht es wieder an die Arbeit. Denn jetzt, wo alles so gut funktioniert hat werde ich ein wenig übermütig und nehme mir noch 2 Aufgaben vor.
1. Der JavaScript Code muss schöner werden. Mädchen achten ja auch auf die Ästhetik und so kann das einfach nicht bleiben.
2. Ein 8×8 Feld ist schnell am Ende und alle Zellen sind gestorben, da die Zellen am Rand deutlich weniger mögliche Nachbarn haben. Die Lösung für dieses kleine Problem ist es, den linken Rand mit dem rechten Rand zu verbinden und den oberen Rand mit dem unteren Rand zu verbinden. Klingt erst mal komisch, bedeutet aber nur, das die Zellen ganz oben die Nachbarn der Zellen ganz unten sind und die linken Zellen die Nachbarn der rechten Zellen sind. Das wirkt sich sehr schön auf die Regeln aus und es ist möglich, viel mehr Generationen zu beobachten. So macht später der Gleiter auch viel mehr Spaß 🙂
Nach weiteren 3 Stunden Kopfzerbrechen ist die Lösung fertig und ganz nebenbei habe ich auch noch die Google Chrome Console und das Logging mittels console.log gelehrt. Meine sehr geduldige Schülerin hat einen rauchenden Kopf und ich fahre sie erst mal zum Friseur.
Das war der Girl’s Day 2014.
Das Ergebnis der Arbeit und ein paar spontane Worte zum Girl’s Day von meiner Schülerin sind hier zu finden. http://www.jentsch.io/girls-day-2014/
Ein Video einer sehr schönen Endlosschleife kann man in dem folgenden Youtube Video sehen. Diese Endlosschleife ist nur durch die Erweiterung der Nachbar-Regel über den Rand hinaus möglich.
Fazit:
Ein guter Tag für meine Nichte, die eine ganze Menge gelernt hat und nun weiß, was sie zu erwarten hat, wenn sie sich für den Beruf des Software Entwicklers entscheidet. Schließlich musste ich nebenbei auch noch ein wenig arbeiten und auch wenn ich heute effektiv nur 2-3 Stunden gearbeitet habe, waren doch fast alle Elemente eines typischen Tages vorhanden. Ganz nebenbei war der Girl’s Day auch ein guter Tag für mich. Denn wenn man seit mehr als 20 Jahren programmiert, ist einem gar nicht mehr klar, was für Abkürzungen im Gehirn genommen werden und wie viele kleine Einzelschritte nötig sind, um so etwas einfaches, wie das Game of Life zu programmieren. Das alles habe ich heute noch mal vor Augen gehabt. Mein automatisiertes Gehirn hat so oft über sich selbst gestaunt und alles in allem musste ich doch mehr Zeit investieren, als ich ursprünglich geplant habe. Das liegt aber an der Tatsache, das ich einfach nicht mehr vor Augen habe, was für komplexe Zusammenhänge beim Programmieren begriffen werden müssen und wie viele unterschiedliche Informationen in einer einfachen Zeile JavaScript Code (z. B. for (var i = 1; i < liste.length() ; i++) ) stehen können. Man programmiert das einfach so den lieben langen Tag und durch die endlose Zahl der Wiederholungen denkt man nicht mehr darüber nach. Von Zeit zu Zeit kommen dann ein paar neue Sprachfeatures hinzu, aber sonst ist Programmieren irgendwie immer anders und doch jedes mal gleich.