Silent Teacher

Toxicode bietet einen wunderschönen JavaScript-Lehrgang an: Silent Teacher. Ohne ein Wort Erklärung kann man einige elementare Programmierkonzepte wie Variablen und Funktionen selbst entdecken. Der „Stille Lehrer“ stellt geschickt kleine Aufgaben anhand deren man die dahinter stehenden Code-Regeln selbst entdecken kann. Toller Einstieg für Programmier-Anfänger.

Video-Tutorials

JavaScript kann man auch mit Video-Tutorials lernen. Einige IT-Verlage habe solche Tutorials in ihrem Programm. Und über öffentliche Bibliotheken kann man sich eine Reihe dieser Tutorials ausleihen. Aber auch im Netz finden sich eine Reihe von freien und kostenpflichtigen Tutorials. Hier sollte man ein wenig stöbern und das richtige Tutorial für sich finden. Die folgenden drei Tutorials haben auf mich einen guten Eindruck gemacht:

The Morpheus Tutorials
listenwhatisayoh
Thytos

JSFiddle

JSFiddle ist eine wunderbare Website, um kleine Codeschnipsel auszuprobieren. JSFiddle besteht aus vier Fenstern. In drei Fenstern kann man HTML, CSS und JavaScript eingeben. Im vierten Fenster sieht man das Ergebnis, wenn man zuvor run gedrückt hat. Man kann JSFiddle mit und ohne Anmeldung nutzen. Die Anmeldung hat den Vorteil, dass man seine Codeschnipsel unter einem Titel speichern kann. JSFiddle ist kostenlos; links unten wird dezent Werbung eingeblendet.

Variablennamen

Für Variablennamen gelten eine Reihe von Regeln und Empfehlungen. Für Variablennamen sollte man in der Regel nur die 26 Buchstaben, klein oder groß, verwenden. Zusätzlich kann man noch Zahlen und den Unterstrich _ verwenden. Eine Zahl darf allerdings nicht am Anfang stehen und der Unterstrich sollte weder am Anfang noch am Ende stehen. Als Variablennamen sind alle sogenannten JavaScript-Key-Wörter (for, if, null, true usw.) nicht zugelassen. Auch sollte man Variablen nicht nach anderen bekannten JavaScript-Objekten wie z.B. String oder Math benennen. Das gibt nur Chaos.
Üblich ist es, Variablennamen in JavaScript in Camel-Case zu schreiben. Diese Schreibweise haben wir schon bei parseInt und parseFloat kennengelernt. Ist ein Name aus zwei oder mehr Namen zusammengesetzt, so beginnt man jedes neue Wort mit einem Großbuchstaben. So kann man zusammengesetzte Namen sehr gut lesen. Einfache Variablen sollten immer klein beginnen. Konstanten, also Variablen, dessen Werte sich im Laufe des Programms nicht ändern, schreibt man komplett groß. So kann man sie gut von den übrigen Variablen unterscheiden.

// gute Variablennamen
var summe;
var bruttoPreis;
var nettoPreis;

// Konstanten
var MEHRWERTSTEUER = 1.19;
var MAX_GEBOT = 1000;
var MIN_GEBOT = 1;

// ungueltige oder schlechte Namen
var 1;
var 1Haus;
var Math = 1;

parseFloat und parseInt

Hin und wieder liegen Zahlen in Form von Strings vor. Das passiert meist bei der Eingabe. Eingabefunktionen wie prompt oder auch HTML INPUT-Elemente (werden wir bald kennen lernen) liefern immer Strings zurück. Erwartet man eine Zahl als Eingabe, so muss man den erhaltenen String in eine Zahl konvertieren. Dafür stehen die Funktionen parseFloat und parseInt zur Verfügung. parseFloat wandelt einen String in eine Dezimalzahl um. Als Dezimalpunkt ist nur der Punkt (.) und nicht das Komma zulässig. Nach der Dezimalzahl sind Buchstaben zulässig. Diese werden einfach ignoriert. Zahlen, die nach einem Buchstaben folgen, werden auch ignoriert. Treten vor der Dezimalzahl Buchstaben auf, liefert parseFloat NaN. NaN steht dabei für „Not a Number“.

// die folgenden Ausdrücke liefern 3.14
parseFloat("3.14");
parseFloat("3.14 Euro");

// die folgenden Ausdrücke liefern 3
parseFloat("3");
parseFloat("3 Euro");
parseFloat("3,14 Euro");

// die folgenden Ausdrücke liefern NaN
parseFloat("");
parseFloat("Ergebnis = 3.14");

parseInt wandelt einen String in eine ganze Zahl (engl.: Integer) um. Zahlen nach einem Komma werden ignoriert.

// die folgenden Ausdrücke liefern 3
parseInt("3");
parseInt("3.14");
parseInt("3 Euro");
parseInt("3+1");

// die folgenden Ausdrücke liefern NaN
parseInt("");
parseInt("Summe: 3");

Function

Funktionen gehören zu den wichtigsten Konzepten von Programmiersprachen. Eine Funktion führt einen Block von Anweisungen durch und kann jederzeit an anderer Stelle aufgerufen werden. Man kann einer Funktion Argumente (eins oder mehrere) übergeben und eine Funktions kann einen Rückgabewert haben. So kann man wiederkehrende Aufgaben in eine Funktion auslagern. Dadurch werden Programme übersichtlicher und wartbar.

Wir haben schon einige Funktionen kennengelernt: Math.sqrt(arg) berechnet die Wurzel aus einer Zahl. Als Argument wird ihr eine Zahl übergeben und sie gibt die Wurzel dieser Zahl als Rückgabe zurück. Math.random() ist eine Funktion ohne Argument. Sie hat aber eine Rückgabe. Jedesmal wenn man sie aufruft, liefert sie eine Zahl zwischen 0 und 1. alert(arg) ist eine Funktion ohne Rückgabe. Sie zeigt das übergebene Argument als Ausgabe auf dem Bildschirm an. Diese Bildschirmausgabe ist jedoch nicht die Rückgabe.

Eigene Funktionen sehen wie folgt aus:

// Funktion mit einem Argument
var square = function(x) {
  return x*x;
};

// Funktion mit zwei Argumenten
// aber ohne Rückgabe
var printSquare = function(x, y) {
  alert(x + " zum Quadrat = " + y);
};

// Funktionen aufrufen
var x = 10;
var y = square(x);
printSquare(x, y);

Rückgaben erzeugt man mit return. Code nach einen return wird nicht mehr ausgeführt. Zusammen mit if sind auch mehrere return’s in einer Funktion sinnvoll:

var pruefe = function(nr) {
  if (nr.length > 3) {
    return "Die Nummer ist zu lang!";
  }
  return "OK";
};

alert(pruefe("1234"));

Array

Arrays sind Objekte zur Speicherung vieler, meist ähnlicher Werte. Diese sogenannten Elemente werden in einem Array der Reihe nach abgelegt. Man kann sie mit einem Index ansprechen. Die Anzahl der Elemente eines Arrays gibt die Array-Eigenschaft length zurück:

var sprachen = ["C", "Java", "JavaScript"];
sprachen[3] = "PHP";
var frage = "Wähle eine Programmiersprache:";
for (var i = 0; i < sprachen.length; i++) {
  frage = frage + " (" + i "=" + sprachen[i] + ")";
}
var wahl = prompt(frage);
alert(sprachen[wahl] + " ist eine tolle Sprache!") 

Ein Array wird mit eckigen Klammern erzeugt. Darin kann man durch Komma getrennt beliebig viele Elemente eintragen. Die Elemente können alle einen unterschiedlichen Datentyp besitzen. ["Ei", 53, true] ist ein gültiges Array. Normalerweise sollte man in einem Array typ-gleiche Elemente speichern. Die leere Klammer [] erzeugt ein leeres Array. Die Elemente eines Arrays spricht man ebenfalls mit eckigen Klammer an: array[n] verweist auf das n-te Element des Arrays. So kann man entweder das n-te Element auslesen oder dem n-ten Element einen (neuen) Wert zuordnen. Aber Achtung: es wird von 0 an gezählt!

while – Schleife

Neben der for-Schleife kennt JavaScript die while– und die do...while-Schleife. while-Schleifen werden solange durchlaufen wie eine Schleifenbedingung wahr ist:

var x1 = 1;
var x2 = 1;
var x2Cache;
while (x2 < 100) {
  x2Cache = x2;
  x2 = x2 + x1;
  x1 = x2Cache;
}
alert("Die erste Fibonacci-Zahl " +
    "größer 100 ist " + x2);

Das kleine Programm berechnet die erste Fibonacci-Zahl, die größer als 100 ist. Die Schleifenbedingung ist hier x2 < 100. Zu Anfang hat x2 den Wert 1. 1 ist kleiner als 100. Die Schleifenbedingung ist also erfüllt und der Schleifen-Code wird durchlaufen. Nach Durchlauf der Schleife hat x2 den Wert 2. Nun wird die Schleifenbedingung erneut geprüft. 2 ist immer noch kleiner als 100. Die Schleife wird wieder durchlaufen. Nach mehreren Durchläufen wird x2 größergleich 100 sein. Die Schleifenbedingung ist nicht mehr erfüllt und der Code wird am Ende der Schleife fortgesetzt. In unserem Beispiel wird x2 ausgegeben.

Die do...while-Schleife funktioniert analog der while-Schleife. Mit einem Unterschied: Die Schleifenbedingung wird am Ende der Schleife ausgewertet.

var x1 = 1;
var x2 = 1;
var x2Cache;
do {
  x2Cache = x2;
  x2 = x2 + x1;
  x1 = x2Cache;
} while (x2 < 100)
alert("Die größte Fibonacci-Zahl " + 
    "kleiner 100 ist " + x2);

Kanban-Tafel

Mit einer Kanban-Tafel kann man Arbeitsprozesse visuell darstellen. Die einfachste Kanban-Tafel besteht aus drei Spalten: ‚zu tun‘, ‚in Bearbeitung‘ und ‚fertig‘. Einzelne Arbeitsschritte bzw. Aufgaben werden nun auf Karten geschrieben und in die Spalte ‚zu tun‘ geheftet. Fängt man eine Aufgabe an, wandert die Karte auf ‚in Bearbeitung‘; ist die Aufgabe erledigt, wird sie in die Spalte ‚fertig‘ geschoben. Komplexere Kanban-Tafeln bestehen aus weiteren Spalten wie ‚im Test‘ und ‚getestet‘. Kanban-Tafel (und die etwas aufwändigeren Scrum-Boards) sind in der Software-Entwicklung weit verbreitet. Es werden entweder echte Tafeln zusammen mit echten Karten oder Online-Boards verwendet. Bei Online-Boards kann man aus einer Vielzahl von Produkten wählen. Meist bieten sie eine kostenlose Grundversion an. Für zusätzliche Features muss man dann eine monatliche Gebühr bezahlen. Ein einfaches, aufgeräumtes, in der kostenlosen Grundversion ausreichendes Tool ist KanbanFlow.

IDE

Eine integrierte Entwicklungsumgebung (IDE, Integrated Development Environment) stellt dem Entwickler verschiedene Werkzeuge zum Schreiben und Ausführen von Programmen zur Verfügung. Kern einer IDE ist ein leistungsstarker Editor, der Schlüsselwörter (var, if, for, …) der jeweiligen Programmiersprache farblich besonders hervorhebt (Syntax-Highlighting), der nach Eingabe von wenigen Buchstaben Vorschläge für das Weiterschreiben macht (Autovervollständigung) und der vor Fehlern oder Ungenauigkeiten warnt. Klassischerweisse ist eine Entwicklungsumgebung ein Programm, das aus dem Internet (frei oder kostenpflichtig) heruntergeladen wird, auf dem Rechner installiert wird und das auf Dateien des Rechners zugreift. Das Spektrum reicht hier von schlanken Texteditoren wie Notepad++ bis hin zu Alleskönnern wie Eclipse. Seit geraumer Zeit etablieren sich auch IDE’s, die ausschließlich in der Cloud arbeiten. Die IDE wird direkt im Browser geöffnet und die Dateien, die man bearbeitet, liegen in einen Cloud-Speicher. Entweder installiert man die Software auf einem eigenen Server oder man nutzt fertig gehostete Produkte. Interessante, einfache Cloud IDE’s sind Orion und ShiftEdit.

Nachtrag: Nach 6 Wochen Praxiseinsatz von ShiftEdit (freie Version) kann ich es für den professionellen Gebrauch nicht empfehlen. Es läuft nicht rund und verliert bisweilen seine Einstellungen.