Giter Club home page Giter Club logo

jshero's Introduction

JS Hero

JS Hero: JavaScript tutorial with exersices/koans.

Website: https://www.jshero.net

Static websites: run locally (limited) or on any web server (recommended).
Locally only in browsers that support locally local storage (Firefix, not Chrome, ...).

Folder

www: The built project
src: Sources to build the project
build: Build scripts
test: Unit tests

Deploy

Copy the content of the folder www in a web server (e.g. apache).

Local use

Open www/index.html in a browser. Works limited.

Build

Requirement: node.js

After changes JS Hero has to be rebuilt with npm. package.json together with build.js and build.sh defines the necessary steps and modules.

Use npm install to install the modules once. Use npm run build to (re)build the project.

npm run build depends (unfortunately) on the operating system. It only runs with a Linux shell. Use Git Bash or WSL on windows.

Add a new koan

  1. Copy an existing koan and modify it.
  2. Insert the id of the new koan in the file order-de.js or order-en.js at the desired position.
  3. Execute npm run build in a linux shell.
  4. Refresh your browser

jshero's People

Contributors

coolmischa avatar feinstaub avatar gabrielsroka avatar jlund avatar sebil avatar strenkel avatar topaletti avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

jshero's Issues

14. String: indexOf(): Test zu leicht bestanden

Der Test prüft derzeit nur auf "Feuer". Ein Teilnehmer hat das "Feuer" dann einfach in die Funktion hart-codiert (vergessen den Parameter zu verwenden) und damit den Test bestanden. Ein weiterer Test auf etwas anderes als "Feuer" würde dieses Problem lösen.

keine fehlermeldung wenn js oder cookies deaktiviert sind

Hallo stefan,

ich finde das ist eine gute idee, einen js-kurs via unittests zu implementieren.

mir ist folgendes aufgefallen:

  • keine fehlermeldung, wenn js deaktiviert ist
  • weiterblättern zur nächsten aufgabe funktioniert nur, wenn cookies freigeschaltet sind.

wenn ich für http://www.jshero.net/ im firefox-51.0.1

  • via noscript-5.03 js erlaube und
  • cookies aktzeptiere

funktioniert das tutorial wie gewünscht.

Quiz-Funktion

Ich habe mir überlegt, dass man auch eine Art Quiz-Funktion mit Multiple-Choice-Aufgaben integrieren könnte.

Im Moment kann die Testfunktion Code-Beispiele testen. Was wäre, wenn man das erweitern würde, um alternativ auch kleine theoretische Aufgabenblöcke anzubieten.

Zum Beispiel zur Code-Analyse und zur Festigung der Begriffe: "Schaue dir folgenden Code an: ... 1) Wie heißt die Funktion? a) ..., b) ... oder c) ... 2) Wieviele Parameter hat die Funktion?"

Extra-Aufgaben

Idee für später: Möglichkeit mehrere Aufgaben pro "Blatt" (Koan) festzulegen. So kann man für ein bestimmtes Thema besser mit Wiederholungen arbeiten. Vielleicht sogar auch optionale Aufgaben, für den der Lust hat, so dass man aber trotzdem weiterkommt.

9. Loggen: Die Hürde :-)

Fürs Backlog: An diesem Koan http://www.jshero.net/main.html?koan=log bleiben die Teilnehmer regelmäßig hängen.

Ein Teilnehmer hatte auch nicht den Sinn verstanden, warum jshero.log zweimal aufgerufen werden sollte. Er sagte mir, dass er erst probiert hat, sich anhand der Test-Ausgabe zu erklären wie es gemeint war, aber er bekam es dennoch nicht hin.

Meine Gedanken dazu:

  • Im kompletten restlichen JS-Hero (außer dem Playground) wird jshero.log nicht mehr benötigt.
  • Besser fände ich, wenn die (oder eine weitere) Aufgabe so gestellt wäre, dass man mit console.log loggen soll und das dann in der Browser-Konsole selber überprüfen soll. Der Nachteil wäre zwar, dass keine automatische Testabdeckung möglich wäre. Der Vorteil wäre, dass man sich den Absatz mit den Erklärungen, warum bei der Übung jshero.log verwendet werden soll, sparen kann.

Local export/import.

Add a possibility to export and import the solutions into/from a local file (JSON-Format).

Semicolons

I remembered reading something that said, one can (and therefore should) omit semicolons at the end of a Javascript code line.

Since jshero does use semicolons, I did a quick research. Examples that recommend no semicolons:

Articles and styles that recommend to use semicolons

The last article complains (among other things) that "Standard JS" is named like this despite the fact that it is only one proposal among others. Interestingly, even in "Standard JS" there is subproject called "semistandard" which adds semicolons to the style (see this page on the bottom).

The conclusion that I draw is that using semicolons is a good thing. Since jshero uses semicolons you probably came to same conclusion. Unless there is something interesting to add about this issue, it could as well be closed. :)

Hinweis, wenn Javascript deaktiviert ist / Lizenz

So könnte ein Hinweis für jemand aussehen, der z. B. NoScript verwendet:

"JSHero funktioniert nur, wenn du deinem Web-Browser erlaubst - zumindest für JSHero - Javascript-Code auszuführen. Gibt es gute Gründe, JSHero zu vertrauen? Ja, denn der Code steht unter einer freien Lizenz, der GPL, und muss daher unter anderem für jeden einsehbar sein: Link zum Repo"

In dem Zusammenhang könnte man überlegen:

F-Droid?

Hallo,

erstmal Gratulation und Danke zur Erstellung dieser tollen Lern-Seite: http://www.jshero.net. Über diese Seite https://wiki.selfhtml.org/wiki/JavaScript/Tutorials bin ich darauf aufmerksam geworden (unten ist ein Link auf jshero.net).

Wenn sich demnächst wieder eine Gelegenheit ergibt, werde ich dies für den Informatik/Linux-Unterricht nutzen.

Du hast geschrieben, die Android-App wurde basiert auf Apache Cordova. Hast du Erfahrungen damit, eine Cordova-App für F-Droid bereitzustellen (siehe z. B. https://f-droid.org/en/docs/FAQ_-_App_Developers/)?

Fix const/let

Hey,
ich habe bei der letzten Aufgabe (quersumme) folgenden Code genutzt:

const quersumme = (input) => String(input).split('').reduce((acc, val) => acc + parseInt(val), 0);

Beim evaluieren kommt der Fehler "quersumme ist keine Funktion." Das kann nicht stimmen - obwohl ich eine moderne fat arrow function benutzt habe ist typeof quersumme dennoch function.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.