(Die "Einstiegshilfe" kann mit dem Button "Hilfe I/O" aus- und eingeblendet werden.)
Dieses Tool ist bisher nur auf einem Desktoprechner unter Firefox getestet. Wenn es auf Mobilgeräten oder in anderen Browsern funktioniert, ist das eher Zufall, kann aber durchaus sein. Wenn das Display arg schmal ist, kann man das Layout im Moment noch vergessen und die Benutzbarkeit wird relativ mäßig. Bekannte und im allgemeinen wesentlich umfangreichere Alternativen findet sich u.a. unter https://codepen.io/pen/ oder auch https://jsfiddle.net/. Das hier hier ist eher für mich zu Demonstrations- und Lehrzwecken gedacht. Als Besonderheit gibt es hier ein vorgefertigtes Canvas und die an die Konsole angelehnte Direktausgabe von Rückgabewerten. Dafür fehlt hier noch die Möglichkeit, über einen Editor HTML- und CSS- Bestandteile einzubauen und ad hoc Frameworks dazu zu laden. jQuery, Chart.js und natürlich der ACE-Editor werden per Default hinzugeladen.
Im Default-Zustand werden in obiger Textarea (rechts) die Rückgaben des ausgeführten Codes (links) ausgegeben. Das ist allerdings nur für "schnelle und dreckige" Tests sinnvoll (oder zum Lernen). Wenn man oben "Manuelle Ein-/Ausgabe" anhakt, ist diese automatische Ausgabe abgeschaltet. Der Inhalt der (rechten) Textarea kann dann manuell verändert werden - zum Beispiel um Daten daraus einzulesen.
Um den Inhalt der Textarea bequem auslesen und schreiben zu können steht die
Variable $out
zur Verfügung. Diese ist eine Referenz auf das zugehörige
HTMLTextAreaElement
(man kann sich die Referenz natürlich alternativ auch jederzeit selber mit
document.getElementById('out') besorgen).
Die Eigenschaft $out.value kann entsprechend gelesen und
geschrieben werden (geht auch bei eingeschalteter Ausgabe-Automatik, liefert aber
i.d.R. nicht die gewünschten Ergebnisse).
Alternativ zur Ausgabe in der Textarea stehen natürlich immer auch die browsereigenen
Entwicklerwerkzeuge (Konsole, Element-Inspektor, ...)
und deren Ausgabemöglichkeiten
- z.B. console.log() - zur Verfügung. Das Tool ist so gedacht,
dass diese (also etwa die Konsole) bei der Verwendung offen sein sollten.
Bei eingeschalteter Textarea-Ausgabe werden einige Fehler abgefangen und stillschweigend "gefixt" (ein einfaches Objektliteral erzeugt die Ausgabe "Objekt vom Typ "Object" ..." statt einem Fehler, ein "return" ohne umgebendes "function" erzeugt eine Ausgabe). Die Fehler werden aber als Warnung in der Konsole ausgegeben. N.b.: beim ersten Klick in den Editor werden im Firefox 2 Warnungen in der Konsole ausgegeben (zu Element.setCapture / .releaseCapture), die ignoriert werden können.
Für eigene HTML-Elemente steht
unter der Hilfe der "HTML-Container" (eine größenveränderliche Div bzw. ein
HTMLDivElement) zur Verfügung.
Um diese Div manuell zu editieren, kann im Moment nur der Element-Inspektor der
browsereigenen Entwicklerwerkzeuge verwendet werden
(üblicherweise per [F12] bzw. [fn]+[F12] zu erreichen).
Der HTML-Container kann als $container angesprochen werden
oder per document.getElementById('container').
Zum Zeichnen gibt es ein vorgefertigtes
Canvas-Element,
das als $canvas angesprochen werden kann
(bzw über die ID "defaultCanvas"). Das Canvas-Element ist initial ausgeblendet.
Mit der Checkbox "Canvas anzeigen" kann es ein- und ausgeblendet werden.
Dabei bleibt der Inhalt des Elements erhalten.
Das initiale Holen des
Contexts
sieht beispielsweise so aus:
const ctx = $canvas.getContext('2d');.
Die Canvas-Buttons beziehen sich bisher nur auf den "2d"-Context. WebGL und WebGL2 sollten zwar grundsätzlich funktionieren, habe ich aber noch nicht ausprobiert.
Um gleichzeitig Canvas und Text-Ausgabe verwenden zu können, kann für das Canvas-Element über das entsprechende Dropdown ein Transparenzwert eingestellt werden. Beim Canvas-Element ist zu beachten, dass dieses jeweils ein "width"- und ein "height"-Attribut trägt, die beide unabhängig von den entsprechenden CSS-Stil-Eigenschaften sind. Damit hat es folgende Bewandnis:
Bei einer Größenänderung des Fensters oder durch
den Verschiebe-Anfasser rechts unten neben der Ausgabe wird das
Canvas-Element skaliert, so dass Punktgrößen und Koordinaten
im Canvas nicht mehr deckungsgleich mit dem Pixelmuster sind!
Das
Canvas wird automatisch nur unmittelbar nach dem Seitenstart "resettet",
so dass nach einem Resize ggf. der entsprechende Button
("Canvas zurücksetzen") gedrückt werden muss.
Alternativ kann auch die Funktion resetResizedCanvas()
aufgerufen werden (das ist keine native Funktion sondern eine
meiner Hilfsfunktionen).
Der ACE-Editor bringt einen eigenen, weit über die "Theme"- und Schriftgrößen- Wahl hinausgehenden Konfigurationsbereich mit, erreichbar über [Strg]+[,]. Das Theme "Monokai mod. GE" ist bislang allerdings nur oben über dem Editor auswählbar und auch die native Schriftgrößeneinstellung harmoniert nicht korrekt mit der unter der Eingabe.
$container angesprochen werden oder per document.getElementById('container').
const alias = window;
const einObjekt = {
eins: 1111,
'zwei': 2.2e+2,
drei: [
"Ach schau, ein Array."
]
};
/**
* Mehrzeiliger JSDoc-Kommentar
* @param {string} einString Beschreibung eines Parameters
*/
function writeToOut(einString) {
let ergebnis = einString + " noch ein String ...";
return ergebnis;
}
/* Schlichter Mehrzeiliger Kommentar ... */
// Einzeiliger Kommentar
class Egal {
constructor(irgendwas) {
this.irgendwas = irgendwas;
}
}
let totalEgal = new Egal('total');
resetResizedCanvas();
let canvas = $canvas;
let context = canvas.getContext('2d');
// Quadrate ...
context.lineWidth = 3;
context.strokeStyle = 'green';
context.strokeRect(10, 10, 40, 40);
context.fillStyle = 'red';
context.fillRect(20, 20, 20, 20);
// Smiley ...
context.lineWidth = 1;
// Endpunkte für Kleisabschnitte
// (Bezugs-Nullpunkt ist "3 Uhr" bzw "ost")
let ost = Math.PI * 2; // als Startpunkt auch 0 !
let sued = Math.PI / 2;
let west = Math.PI;
let nord = Math.PI * 3 / 2;
// allgemeine Kreisbogenlängen
// nord-k8 entspricht zum Beispiel "Nord-West"
let k2 = Math.PI; // ein halber Kreis
let k4 = Math.PI / 2; // ein 4tel Kreis
let k8 = Math.PI / 4; // ein 8tel Kreis
let k16 = Math.PI / 8; // ein 16tel Kreis
let k3 = Math.PI * 2 / 3; // ein 3tel Kreis
let k6 = Math.PI / 3; // ein 6tel Kreis
let k12 = Math.PI / 6; // ein 12tel Kreis
// Anm.: die Kreise werden im Uhrzeigersinn gezeichnet
// face
context.beginPath();
context.arc(270, 100, 50, 0, ost);
context.closePath();
context.stroke();
context.fillStyle = '#FFFF00';
context.fill();
// mouth
context.beginPath();
context.arc(270, 95, 35, k12, west-k12);
context.stroke();
// left eye
context.beginPath();
context.arc(256, 90, 3, 0, ost);
context.closePath();
context.stroke();
// right eye
context.beginPath();
context.arc(286, 90, 3, 0, ost);
context.closePath();
context.stroke();
// nose
context.beginPath();
context.arc(274, 105, 4, sued, nord-k12);
context.stroke();
// Wolke ...
context.globalAlpha = 0.5
context.beginPath();
context.moveTo(180, 90);
context.bezierCurveTo(120, 90, 120, 160, 240, 160);
context.bezierCurveTo(260, 190, 300, 170, 350, 150);
context.bezierCurveTo(410, 140, 440, 130, 380, 110);
context.bezierCurveTo(440, 50, 350, 40, 350, 50);
context.bezierCurveTo(310, 10, 270, 30, 240, 40);
context.bezierCurveTo(310, 10, 130, 15, 180, 90);
// complete custom shape
context.closePath();
context.lineWidth = 7;
context.strokeStyle = '#0000FF';
context.stroke();
context.fillStyle = '#00FFFF';
context.fill();
context.globalAlpha = 1;