If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

ProcessingJS außerhalb der Khan Academy verwenden

Wir haben hier eine ziemlich großartige Editierumgebung - sie aktualisiert sich in Echtzeit, und sie hat hilfreiche Fehlermeldungen, Zahlenschieber und Farbwähler. Unsere Umgebung hier ist für neue Programmierer konzipiert -- wir haben jeden Tag Tausende von Programmierern und wir wollen es für sie einfacher machen, JavaScript zu lernen.
Sobald du dich mit JavaScript vertraut gemacht hast und mit der Entwicklung von längeren und komplexeren Programmen begonnen hast, wirst du bemerken in deiner Programmierumgebung verschiedene weitere Funktionen zu benötigen. Vielleicht brauchst du keine Echtzeit-Updates oder möchtest deinen Code in mehrere Dateien organisieren oder du möchtest ihn in ein Versionskontrollsystem integrieren. Oder du möchtest deine ProcessingJS-Programme einfach in deine Website integrieren.
In diesem Fall kannst du mit der Programmierung deiner ProcessingJS-Programme außerhalb der Khan Academy beginnen. Leider kannst du deinen Programmcode nicht einfach kopieren, in eine Datei in deinem Desktop-Editor einfügen und hast schon ein funktionierendes Programm. Warum nicht?
ProcessingJS ist eine auf Web-Technologien basierende Bibliothek. Wenn du mit ihr auf der Khan Academy programmierst, erstellen wir hinter den Kulissen eine Webseite (HTML-Datei) mit einem <canvas>-Tag drin, laden die ProcessingJS JavaScript Bibliothek und führen dann deinen Programmcode aus.
Das bedeutet, dass, wenn du an deinem Programm außerhalb von Khan Academy arbeiten möchtest, du eine HTML-Datei erstellen musst, die das macht, was wir tun.
Hier ist ein Beispiel, mit dem du beginnen kannst:
Das Beispiel ist mit unserer Webpage-Umgebung gebaut. Du kannst es in eine HTML-Datei oder jede andere Programmierumgebung einfügen.
Wenn du deinen Programmcode in die Vorlage einfügst, funktioniert es vielleicht gleich auf Anhieb perfekt und du springst vor Freude auf! (Oder nach einem Ast wenn du ein Bieber bist).
Wenn die Dinge nicht ganz richtig funktionieren, ist es vermutlich weil die Vorlage nicht mit der genau gleichen Version von ProcessingJS verwendet wird, die wir auf der Khan Academy verwenden. Unsere Version ist speziell für die Verwendung innerhalb von KA konzipiert, daher empfehlen wir die offizielle ProcessingJS Bibliothek, wenn du außerhalb von KA entwickelst.
Es gibt einige wichtige Unterschiede zwischen unserem ProcessingJS und dem offiziellen:
  • KA benutzt mouseIsPressed anstelle von mousePressed für den globalen Boolean. Ebenso verwendet KA keyIsPressed statt keyPressed. Das bedeutet, dass du mouseIsPressed und keyIsPressed ändern musst, wenn du deinen Code in das Template einfügst.
  • KA verwendet standardmäßig Grad für alle Winkelparameter, anstatt Bogenmaß. Wenn du Grade für Winkel in deinem Programm verwendest, kannst du sie mit radians() konvertieren.
  • KA verwendet getImage() und getSound() für Bilder und Sounds, die in der offiziellen Version nicht vorhanden sind. Du kannst PImage für Bilder verwenden und du musst ein <audio>-Tag erstellen, um Töne abspielen zu können.
Die offizielle Version hat auch eine größere Auswahl an Funktionen für Bereiche wie z.b. Bildbearbeitung und mehr 3D-Fähigkeiten. Du kannst all das in der Dokumentation von ProcessingJS erkunden.
Natürlich würden wir die Programme, die du außerhalb der Khan Academy erstellst, immer noch gerne sehen. So hoffe ich, dass du sie hier mit uns teilen wirst sobald du fertig bist. Entweder indem du sie in unsere ProcessingJS Version zurückkonvertierst oder sie auf unserer Webseite teilst.
Als nächstes werde ich dir mehr über Desktop-Editoren und Debugging-Tools zeigen.