Scribbler: Ein Notebook-Tool zum Ausführen und Testen von JavaScript-Code online

Scribbler ist ein JavaScript-Notizbuch, das direkt in Ihrem Browser läuft. Es bietet Entwicklern, Ingenieuren und Forschern eine einfache Online-Schnittstelle, um mit JavaScript-Code zu experimentieren und ihn auszuführen. Das Tool ist quelloffen und kostenlos zu benutzen, ohne dass eine Anmeldung erforderlich ist. Sein Hauptmerkmal ist, dass es leichtgewichtig ist und keine Installation von Node.js oder anderen komplexen Umgebungen erfordert; es kann durch Herunterladen des Quellcodes und Platzieren auf einem beliebigen statischen Webserver ausgeführt werden. Benutzer können Zellen mit Code und Dokumenten in Scribbler erstellen, Codebibliotheken von Drittanbietern dynamisch laden und Daten mit der integrierten Charting-Bibliothek visualisieren. Scribbler unterstützt auch eine direkte Verbindung zu GitHub, so dass die Benutzer ihre Projekte einfach speichern, teilen und veröffentlichen können.

Funktionsliste

• Kein Backend erforderlichLäuft vollständig im Browser, ohne dass Backend-Umgebungen wie Node.js, npm oder Python installiert werden müssen.
• frei und offenEin Open-Source-Projekt, das kostenlos und ohne Anmeldung oder Abonnement genutzt werden kann.
• Interaktive ZellenBenutzer können JavaScript-Code, HTML- oder Markdown-Dokumente in verschiedene Zellen schreiben und den Code sofort ausführen, um die Ausgabe zu sehen.
• Visualisierung der DatenIntegrierte Diagrammbibliotheken wie Plotly.js machen es einfach, Arrays und andere Daten in Diagramme umzuwandeln.
• Unterstützung für Bibliotheken von DrittanbieternJede JavaScript-Bibliothek eines Drittanbieters im ES6-Format kann dynamisch von einem CDN geladen und verwendet werden.
• GitHub-IntegrationSie können Notebooks direkt in GitHub-Repositories verschieben oder Dateien daraus ziehen.
• Verwaltung von DokumentenBenutzer können Notebooks im JSON-Format herunterladen (.jsnb), oder exportieren Sie die Ausgabe in eine HTML-Datei.
• Geräteübergreifende NutzungDie Benutzeroberfläche hat ein klares Design und funktioniert gut auf modernen Browsern auf Desktop- und Mobilgeräten.

Hilfe verwenden

Scribbler bietet eine Umgebung zum Experimentieren mit JavaScript-Code ohne komplexe Konfiguration. Die Benutzer können Code direkt im Web schreiben und ausführen und die Ergebnisse sofort sehen - perfekt, um Ideen schnell zu testen oder JavaScript zu lernen.

Erste Schritte

Sie brauchen nichts zu installieren, besuchen Sie einfach die offiziell gehostete App direkt über Ihren Browser, um loszulegen:

• Adresse für die Online-Bewerbung: https://app.scribbler.live/

Wenn Sie es offline verwenden oder selbst einsetzen möchten, können Sie den Quellcode auch von GitHub herunterladen und auf einem beliebigen statischen Webserver (z. B. Nginx oder über die npx serve Befehl) wird im Verzeichnis des

Zentrale Schnittstellen und Abläufe

Die Benutzeroberfläche von Scribbler besteht aus einer Reihe von "Zellen", die den Kern des Programms bilden.

1. Zellentyp
   • Code ZelleDies ist der Standardzellentyp zum Schreiben und Ausführen von JavaScript-Code.
   • Doc CellDie Zelle wird zum Schreiben von erklärenden Dokumenten verwendet und unterstützt die Syntax von Markdown, HTML und CSS. Sie können zwischen diesen beiden Typen mit dem Schalter im Menü in der oberen rechten Ecke der Zelle wechseln.
2. Ausführungszelle
   • Nachdem Sie eine Codezelle ausgewählt haben, klicken Sie auf das Zellenmenü im Fenster Spielen ► Schaltfläche.
   • Verwendung von Shortcuts Cmd+Enter (macOS) oder Ctrl+Enter (Windows) kann ebenfalls ausgeführt werden.
   • Die Ausgabe des Codes wird unmittelbar unter der Zelle angezeigt.
3. Zellmanagement
   Das Menü in der oberen rechten Ecke jeder Zelle bietet eine Reihe von Verwaltungswerkzeugen:
   • Nach oben bewegen ↑ / Nach unten bewegen ↓Neuordnung der Zellen.
   • Hinzufügen einer neuen Zelle ✛.Erstellen Sie eine neue Codezelle unterhalb der aktuellen Zelle.
   • Löschen ☓Löschen: Löscht die aktuelle Zelle.

Schreiben und Experimentieren mit Code

Scribbler hat einige praktische Funktionen eingebaut, die häufige Operationen vereinfachen.

• Display-Ausgang: Sie können verwenden scrib.show() Funktion zur Ausgabe von Variablen, Objekten oder anderen Informationen ist sie viel effizienter als die console.log() Besser geeignet für die Präsentation von Ergebnissen in einer Laptop-Umgebung.

  scrib.show("Hello World");
  

• Visualisierung der DatenScribbler verfügt über eingebaute Diagrammbibliotheken, die das Erstellen von Diagrammen erleichtern. Zum Beispiel können Sie mit der range() Funktion erzeugt eine Folge von Zahlen und verkettet dann Aufrufe an die .map(Math.sin) im Gesang antworten .plot() Anschließend kann eine Sinuskurve aufgezeichnet werden.

  // 下面这行代码会画出一条正弦函数曲线
  range(0, 10, 0.01).map(Math.sin).plot();
  

• Laden externer BibliothekenSie können eine beliebige JavaScript-Bibliothek aus dem CDN laden, um zu experimentieren. Zum Beispiel, laden Sie tensorflow.js um maschinelles Lernen durchzuführen, oder laden Sie die brain.js um ein einfaches neuronales Netz zu trainieren.

Speichern und teilen

Sie können Ihre Arbeit speichern oder sie mit anderen teilen.

• Lokale Konservierung:
  • Wählen Sie im oberen Menü File -> Save (as .jsnb)Sie können das gesamte Notizbuch als JSON-Datei herunterladen (mit dem Suffix .jsnb). Diese Datei kann dann wieder in Scribbler hochgeladen und geöffnet werden.
  • Option Download (as .html) Anschließend können Sie die gesamte Seite, die die Ausgabe enthält, als HTML-Datei speichern.
• Laden über URL:
  Wenn Ihr .jsnb Die Dateien werden unter einer öffentlich zugänglichen URL gehostet (z.B. GitHub Gist), auf die Sie zugreifen können, indem Sie die URL der Scribbler-App an die # und Dateiverknüpfungen, um sie direkt zu öffnen.
  Format:https://app.scribbler.live/#<你的文件链接>
• Auf GitHub veröffentlichen:
  Scribbler bietet die Möglichkeit, Notizbücher direkt auf GitHub zu veröffentlichen, wofür ein GitHub-Token erforderlich ist.
  1. Urlaub für File -> Git.
  2. Folgen Sie den Anweisungen, um Ihr GitHub-Konto zu verbinden und ein Token anzugeben.
  3. Nach erfolgreicher Verbindung klicken Sie auf das obere Menü des Fensters Publish Schaltfläche.
  4. Das System generiert drei Links: einen Link zum Notizbuch für die weitere Bearbeitung, einen Link zur Ausführung als eigenständige Anwendung und einen Codeschnipsel zur Einbettung in andere Webseiten.

Anwendungsszenario

1. Lernen und experimentieren Sie mit JavaScript
   Anfängern bietet Scribbler eine Sandbox-Umgebung, die keinerlei Konfiguration erfordert. Sie können die JavaScript-Syntax üben, verschiedene Funktionen und APIs testen und die Ergebnisse der Codeausführung visuell nachvollziehen.
2. Wissenschaftliches Rechnen und Datenvisualisierung
   Ingenieure und Forscher können Scribbler für komplexe mathematische Berechnungen, Systemsimulationen und Datenanalysen verwenden. Es unterstützt das Laden math.js und andere Bibliotheken für wissenschaftliche Berechnungen, und die eingebauten Diagrammfunktionen machen es einfach, die Ergebnisse von Berechnungen zu visualisieren.
3. KI und maschinelles Lernen
   Sie können die tensorflow.js vielleicht brain.js Bibliotheken für maschinelles Lernen, wie z. B. die AI Library, können verwendet werden, um einfache Modelle zu trainieren oder um bereits trainierte Modelle für Inferenzen auszuführen. Durch die Einbindung von HTML-Zellen ist es auch möglich, dynamisch interaktive KI-Anwendungsfälle zu erstellen.
4. Code-Prototyping und API-Tests
   Scribbler ist ein ideales Werkzeug, wenn Sie schnell die Logik eines kleinen Teils des Codes oder die Rückgabeergebnisse einer API eines Drittanbieters überprüfen müssen. Sie brauchen kein komplettes Projekt zu erstellen, sondern können den Testcode direkt in die Zelle schreiben.

QA

1. Was ist der Unterschied zwischen Scribbler und JSFiddle/Codepen?
   Scribbler konzentriert sich mehr auf Datenverarbeitung und Rechenprozesse, und sein mehrzelliges Notizbuchformat eignet sich für die Erstellung längerer Dokumente und Laboraufzeichnungen, ähnlich wie Jupyter Notebook für die Datenwissenschaft, während JSFiddle und Codepen hauptsächlich zum Testen und Teilen von Codeschnipseln von Web-Frontends aus HTML, CSS und JavaScript verwendet werden. Code-Schnipsel von Web-Frontends, die aus HTML, CSS und JavaScript bestehen.
2. Muss ich für die Nutzung von Scribbler bezahlen?
   Nein. Scribbler ist ein Open-Source-Projekt, ist völlig kostenlos und erfordert kein Konto, um die Online-Version zu nutzen.
3. Kann ich npm-Pakete in Scribbler verwenden?
   Nicht direkt, Scribbler läuft in einer Browserumgebung ohne Node.js oder npm, aber Sie können npm-Pakete, die UMD- oder ES6-Modulformate bereitstellen, über ein CDN laden.
4. Wo wird der Code ausgeführt? Ist er sicher?
   Der gesamte Code wird direkt in Ihrem lokalen Browser ausgeführt und nicht an einen Server gesendet. Diese rein clientseitige Arbeitsweise gewährleistet die Vertraulichkeit von Code und Daten.