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.

Kategorien
JS Hero Release Notes

JS Hero 4.3.0

JS Hero ist in Version 4.3.0 erschienen. Es gibt einige kleinere Anpassungen und Ergänzungen:

Kategorien
JS Hero Release Notes

JS Hero 4.2.0

JS Hero ist in Version 4.2.0 erschienen. Es gibt zwei zentrale Änderungen:

  • Von var zu let: In der ursprünglichen JavaScript-Version von 1995 wurden Variablen entweder ohne Schlüsselwort oder mit dem Schlüsselwort var deklariert. Die Deklaration mit var hat jedoch einige Nachteile. Um diese Nachteile zu beseitigen, wurde 2015 die Deklaration mit let und const eingeführt. Seitdem kann man sowohl var, als auch let und const verwenden. Da man mit let und const klareren Code schreiben kann, wurde die Varaiblendeklaration in JS Hero auf let umgestellt. Lektionen mit const werden folgen.
  • function declaration vs. function expression: Schon in der ursprünglichen Version von JavaScript gab es zwei zentrale Arten, Funktionen zu definieren: function declaration und function expression. Beide Varianten haben Vor- und Nachteile. Da die Funktionsdeklaration stilistisch klarer ist, habe ich mich entschlossen, JS Hero von function expression auf function declaration umzustellen.

Beide Änderungen betreffen nur die Art und Weise, wie Code in JS Hero präsentiert wird. Der Lösungs-Code ist davon nicht betroffen. Lösungen kann man – wie bisher auch – in beliebigem JavaScript schreiben.

Kategorien
JS Hero

JS Hero Blog

2016 habe ich im Zuge einer Programmierwerkstatt an der Gesamtschule Bremen Mitte das Tutorial JS Hero entwickelt. In den letzten Jahren habe ich dieses Tutorial immer wieder in kleinen Schritten weiterentwickelt. Heute bietet es mit über 100 Lektionen und dazugehörigen Online-Übungen einen Einstiegs ins Programmieren und einen Einstieg in JavaScript.

Dieses Tutorial möchte ich nun mit einem Blog ergänzen. Zu einen sollen Themen von JS Hero, also JavaScript und Learn-to-Code weitergeführt werden. Zum anderen soll das Coden in seiner vollen Bandbreite Thema sein.

Viel Spaß beim Lesen!