Kategorien
JavaScript Learn to Code

Silent Teacher

Das französische Code-Labor Toxicode hat eine Reihe von wunderbaren Learn-to-Code Apps herausgebracht. Eine besonders gelungene ist SILENT TEACHER. Spielerisch lernt man einfache Programmier-Konzepte wie Operatoren, Variablen, aber auch Arrays, Funktionen und bedingte Anweisungen kennen.

Der Name der App ist Programm: es wird nichts erklärt. Es werden lediglich elementare Programmier-Aufgaben gestellt. Durch Try-and-Error müssen die Spieler_innen die zugrunde liegenden Programmier-Regeln selbst herausbekommen.

SILENT TEACHER verwendet als Programmiersprache JavaScript. Damit eignet es sich hervorragend als Ergänzung zu JS Hero.

PS: Toxicode verwendet als Protokoll leider nicht das verschlüsselte HTTPS, sondern das unverschlüsselte HTTP. Aktuelle Browser warnen deshalb, dass die Seite nicht sicher ist. Das ist richtig. Da man jedoch keine persönlichen Daten in die App eingibt, ist das Risiko überschaubar.

Kategorien
JavaScript Learn to Code

Funktionen

Funktionen sind für Anfänger schwer zu verstehen. An einem kleinen Programm möchte ich ihre Arbeitsweise verdeutlichen. Das Programm stammt aus dem letzten Post:

let name = prompt('Wie heißt Du?');
alert('Hallo ' + name + '!');

Es fragt, wie man heißt und begrüßt einen nach Eingabe seines Namens. Ausprobieren kann man den Code, indem man ihn z.B. im JS Hero Playground eingibt.

Hier haben wir, vielleicht ohne es zu merken, zwei Funktionen, nämlich prompt() und alert(), benutzt. Diese beiden Funktionen werden uns von der JavaScript-Engine des Browsers zur Verfügung bestellt.

Funktionen kann man aber auch selbst schreiben. Das möchte ich an unserem kleinen Programm demonstrieren. Die Arbeitsweise des Programms ändert sich dabei nicht:

function welcome(name) {
  return 'Hallo ' + name + '!';
}

let name = prompt('Wie heißt Du?');
let greeting = welcome(name);
alert(greeting);

Dieses Programm macht genau dasselbe wie das obige Programm: Es fragt, wie man heißt und begrüßt einen. Die entscheidende Änderung ist die Einführung der Funktion welcome(). Wer mit JS Hero gearbeitet hat, erkennt sie vielleicht wieder: Es ist die Lösung der Lektion Strings. Hier sehen wir diese Funktion gewissermaßen in Aktion. Die Funktion selber nimmt einen Namen entgegen und gibt eine entsprechende Begrüßung zurück. Diese Arbeitsweise, ihre Definition, wird in den ersten drei Codezeilen festgelegt. Benutzt wird die Funktion in Zeile 6. Dort macht sie aus dem Namen, unsere Eingabe, die Begrüßung. Diese wird dann in Zeile 7 ausgegeben.

Die Rückgabe der Funktion welcome() muss man nicht in einer Variablen zwischenspeichern. Man kann die Rückgabe auch direkt an alert() weitergeben:

function welcome(name) {
  return 'Hallo ' + name + '!';
}

let name = prompt('Wie heißt Du?');
alert(welcome(name));

Nun stellt sich die Frage, wozu wir die Funktion eingeführt haben. Der ganze Code, so hat man den Eindruck, ist doch nur komplizierter geworden. Dies ist jedoch nur zum Teil richtig. Dort, wo wir die Funktion welcome() benutzen, ist der Code einfacher geworden. Anstatt mit dem Codefragment 'Hallo ' + name + '!' die Begrüßung zusammen zu bauen, brauchen wir nur die Funktionen welcome() aufzurufen. Um die Erzeugung der Begrüßung aus dem Namen brauchen wir uns an dieser Stelle nicht mehr zu kümmern.

Stellen wir uns nun vor, dass wir innerhalb eines Programms besagte Begrüßung an verschiedene Stellen ausgeben möchten. Dann ist es einfacher, die Funktion welcome() zu verwenden, anstatt immer wieder das Codefragment 'Hallo ' + name + '!':

let name = prompt('Wie heißt Du?');
alert('Hallo ' + name + '!');

let nickname = prompt('Wie lautet Dein Nickname?');
alert('Hallo ' + nickname + '!');
function welcome(name) {
  return 'Hallo ' + name + '!';
}

let name = prompt('Wie heißt Du?');
alert(welcome(name));

let nickname = prompt('Wie lautet Dein Nickname?');
alert(welcome(nickname));

Hier spielt die Funktion welcome() ihre Stärke aus: eine wiederkehrende Aufgabe, die Erzeugung einer Begrüßung aus einem Namen, wird einmal definiert und mehrfach benutzt.

Kategorien
JavaScript JS Hero Learn to Code

Playground

JS Hero besitzt eine Spielwiese: den Playground. Hier möchte ich zeigen, wie man im Playground kleine Programme schreiben kann. Programme benötigen i.d.R. eine Ein- und eine Ausgabe. Im Playground kann man das am einfachsten mit den beiden Funktionen prompt() und alert() machen:

let name = prompt('Wie heißt Du?');
alert('Hallo ' + name + '!');

Gibst Du diesen Code im Playground ein und klickst auf „Run“, so öffnet sich ein Dialog mit der Frage „Wie heißt Du?“. Gibst Du „Kitty Pryde“ ein und bestätigst die Eingabe, so schließt sich der Dialog und es öffnet sich ein Fenster mit der Nachricht „Hallo Kitty Pryde!“. Nach Klick auf „OK“ schließt sich auch dieses Fenster und unser kleines Programm ist zu Ende. Mit „Run“ kann es erneut gestartet werden.

prompt() dient also zur Eingabe. Der Eingabe-Dialog kann mit einer Nachricht versehen werden. Die Eingabe ist die Rückgabe der Funktion prompt(). Wird diese Rückgabe wie oben einer Variablen zugeordnet, landet die Eingabe in dieser Variablen.

alert() dient der Ausgabe. Im obigen Beispiel wird die Eingabe mit vorangestelltem „Hallo “ und nachgestelltem „!“ ausgegeben. Sowohl prompt() also auch alert() unterbrechen den Programmcode. Erst nach Klick auf „OK“ bzw. „Abbrechen“ wird die Programmausführung fortgesetzt.

prompt() und alert() kann man i. d. R. nicht auf den normalen JS Hero Übungsseiten verwenden. Das liegt darin, dass dort der Lösungs-Code gekapselt in einem sogenannten WebWorker läuft. Dort stehen die beiden Funktionen nicht zur Verfügung.

prompt() und alert() sollte man in der professionellen Webentwicklung nicht verwenden. Aber zum Üben sind sie ideal.