Scribbler：一个在线运行和测试 JavaScript 代码的笔记本工具

Scribbler 是一个在浏览器里直接运行的 JavaScript 笔记本工具。 它为开发者、工程师和科研人员提供了一个简单的在线界面，用来实验和运行 JavaScript 代码。 这个工具是开源的，并且免费使用，不需要注册登录。 它的主要特点是轻量化，无需安装 Node.js 或其它复杂的环境，下载源码后放到任何静态网页服务器上就能运行。 用户可以在 Scribbler 中创建包含代码和文档的单元格，动态加载第三方代码库，并利用集成的图表库进行数据可视化。 同时，它还支持直接与 GitHub 连接，方便用户保存、分享和发布自己的项目。

機能一覧

• 无需后端：完全在浏览器中运行，不需要安装 Node.js、npm 或 Python 等后端环境。
• 自由闊達：一个开源项目，无需登录或订阅即可免费使用。
• 交互式单元格：用户可以在不同的单元格中编写 JavaScript 代码、HTML 或 Markdown 文档，并立即执行代码查看输出结果。
• データの可視化：内置了 Plotly.js 等图表库，可以方便地将数组等数据转换成图表。
• 支持第三方库：可以从 CDN 动态加载和使用任何 ES6 格式的第三方 JavaScript 库。
• GitHubとの統合：可以直接将笔记本推送到 GitHub 仓库，或从仓库中拉取文件。
• 文書管理：用户可以将笔记本下载为 JSON 格式（.jsnb）的文件，或将输出结果导出为 HTML 文件。
• クロスデバイス利用：界面设计简洁，能够在桌面和移动设备的现代浏览器上正常工作。

ヘルプの使用

Scribbler 提供了一个无需复杂配置的 JavaScript 代码实验环境。 用户可以直接在网页上编写和运行代码，并立即看到结果，非常适合快速测试想法或学习 JavaScript。

はじめに

你不需要安装任何东西，直接通过浏览器访问官方托管的应用程序即可开始使用：

• 在线应用地址: https://app.scribbler.live/

如果你想离线使用或自己部署，也可以从 GitHub 下载源代码，然后将其放置在任何静态 Web 服务器（例如 Nginx 或通过 npx serve 命令）的目录下运行。

核心界面和操作

Scribbler 的界面由多个“单元格”（Cell）组成，这是它的核心。

1. 单元格类型
   • 代码单元格 (Code Cell)：这是默认的单元格类型，用于编写和执行 JavaScript 代码。
   • 文档单元格 (Doc Cell)：用于编写说明文档，支持 Markdown、HTML 和 CSS 语法。你可以通过单元格右上角菜单中的开关在这两种类型之间切换。
2. 执行单元格
   • 选中一个代码单元格后，点击单元格菜单中的 播放 ► ボタンだ。
   • ショートカットの使用 Cmd+Enter (macOS）または Ctrl+Enter (Windows) 也可以执行。
   • 代码的输出结果会立刻显示在该单元格的下方。
3. 单元格管理
   每个单元格右上角的菜单都提供了一组管理工具：
   • 上移 ↑ / 下移 ↓：调整单元格的顺序。
   • 添加新单元格 ✛：在当前单元格下方创建一个新的代码单元格。
   • 删除 ☓：删除当前单元格。

编写和实验代码

Scribbler 内置了一些便捷的函数，简化了常见操作。

• 显示输出: 你可以使用 scrib.show() 函数来输出变量、对象或任何信息，它比 console.log() 更适合在笔记本环境中展示结果。

  scrib.show("Hello World");
  

• データの可視化: Scribbler 内置了图表库，可以轻松地将数据绘制成图表。例如，使用 range() 函数生成一个数字序列，然后链式调用 .map(Math.sin) 歌で応える .plot() 就可以绘制出一条正弦曲线。

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

• 加载外部库: 你可以从 CDN 加载任何 JavaScript 库进行实验。例如，加载 tensorflow.js 来进行机器学习推理，或加载 brain.js 来训练一个简单的神经网络。

保存と共有

你可以将你的工作成果保存下来或分享给他人。

• 本地保存:
  • 在顶部菜单选择 File -> Save (as .jsnb)，可以将整个笔记本下载为一个 JSON 文件（后缀为 .jsnb）。 这个文件可以之后再上传回 Scribbler 打开。
  • オプション Download (as .html) 则可以将包含输出结果的整个页面保存为一个 HTML 文件。
• 通过 URL 加载:
  もし .jsnb 文件托管在某个可公开访问的 URL 上（例如 GitHub Gist），你可以通过在 Scribbler 应用网址后面加上 # 和文件链接来直接打开它。
  フォーマットhttps://app.scribbler.live/#<你的文件链接>
• 发布到 GitHub:
  Scribbler 提供了将笔记本直接发布到 GitHub 的功能，这需要一个 GitHub Token。
  1. 出向く File -> Git.
  2. 根据提示连接你的 GitHub 账户并提供 Token。
  3. 连接成功后，点击顶部菜单的 Publish ボタンだ。
  4. 系统会生成三个链接：一个是用于继续编辑的笔记本链接，一个是作为独立应用运行的链接，还有一个是用于嵌入到其他网页的代码片段。

アプリケーションシナリオ

1. 学习和实验 JavaScript
   对于初学者来说，Scribbler 提供了一个零配置的沙盒环境。你可以直接在里面练习 JavaScript 语法，测试各种函数和 API，并通过可视化的方式理解代码的执行结果。
2. 科学计算与数据可视化
   工程师和科研人员可以利用 Scribbler 进行复杂的数学计算、系统仿真和数据分析。它支持加载 math.js 等科学计算库，并且内置的图表功能可以方便地将计算结果可视化。
3. AI 和机器学习
   你可以在浏览器中加载 tensorflow.js もしかしたら brain.js 等机器学习库，用来训练简单的模型或运行预训练模型进行推理。 通过结合 HTML 单元格，还可以创建动态交互的 AI 应用案例。
4. 代码原型和 API 测试
   当你需要快速验证一小段代码逻辑或测试某个第三方 API 的返回结果时，Scribbler 是一个理想的工具。你不需要建立一个完整的项目，直接在单元格里编写测试代码即可。

品質保証

1. Scribbler 和 JSFiddle/Codepen 有什么区别？
   Scribbler 更侧重于数据处理和计算流程，它的多单元格笔记本形式适合创建较长的文档和实验记录，类似于用于数据科学的 Jupyter Notebook。而 JSFiddle 和 Codepen 主要用于测试和分享 HTML、CSS 和 JavaScript 组成的 Web 前端代码片段。
2. 使用 Scribbler 需要付费吗？
   不需要。Scribbler 是一个开源项目，完全免费，并且使用在线版本时也不需要注册账户。
3. 我可以在 Scribbler 中使用 npm 包吗？
   不可以直接使用。Scribbler 运行在浏览器环境，没有 Node.js 和 npm。但你可以通过 CDN 加载那些提供了 UMD 或 ES6 模块格式的 npm 包。
4. 代码是在哪里执行的？安全吗？
   所有的代码都直接在你的本地浏览器中执行，不会发送到任何服务器。 这种纯客户端的运行模式保证了代码和数据的私密性。