JavaScript 数组与 Jupyter Notebooks 教学实践

在最近一次的研讨会中，有幸学习了关于JavaScript数组的许多知识，这比在过去两个月中学到的还要多。Erin 的讲解方式非常清晰，她从基础开始，逐渐深入到具体的、有用的细节和示例，这些内容都是关于如何在 ES6 中处理数组的。

特别感兴趣的是，她如何在演示中展示实时代码。作为一个教学工具，这给留下了深刻的印象。在本教程中，将快速介绍如何使用 Jupyter Notebooks 自己实现这一功能。

将实时代码嵌入到演示中

Erin 使用的是开源的 Jupyter Notebooks 来在她的演示中展示实时代码。这意味着她展示的每个代码片段，她都会在现场为运行，可以看到输出结果。甚至可以获取演示文稿，编辑代码，并查看会发生什么。

这是学习代码互动性的一个飞跃，而且比传统的幻灯片演示要好得多。根据情况，它甚至可能比现场演示还要好。

为 Jupyter 添加JavaScript支持

要使用 Erin 的演示，需要同时安装 Jupyter Notebook 和 Jupyter NodeJS，后者是 Jupyter 的 NodeJS 内核。与 Jupyter NodeJS 类似的项目是 iJavaScript。

在系统中，Red Hat Linux，从 GitHub 仓库安装了 Jupyter NodeJS。遇到的唯一问题是最初没有安装 ZeroMQ。使用 apt-get 从 ZeroMQ 网站安装了它。在 Jupyter 设置好 NodeJS 内核后，从 GitHub 下载了 Erin 的 "NI-Hooray-For-Arrays" 演示文稿。

启动 Jupyter Notebook。

命令行中的 jupyter notebook 命令将打开一个带有本地目录结构的网页浏览器。由于是从 Erin 的仓库克隆开始的笔记本，立即看到了笔记本。

当打开她的笔记本时，可以看到 Erin 的演示。一些笔记本单元格是幻灯片，一些是代码。代码段令人兴奋，因为可以在笔记本中运行它们。

按下运行按钮将执行笔记本中的代码。很酷！运行单元格后，可以看到数组是一个对象。

还可以使用广泛的键盘快捷键。通过跟随 Erin 的演示的互动方式，可以浏览她的代码片段。请注意，变量 iAmAnArray 是在前一个单元格中定义的。

还可以编辑单元格，并尝试在 Erin 的代码旁边运行自己的代码片段。请注意匹配括号的颜色高亮显示。可以按 Enter 键开始新的代码行。使用 Shift-Enter 运行代码。

可以看到下面的 console.log 输出。

将 Jupyter 与 Reveal.js 集成用于演示

Jupyter Notebook 在 Red Hat Linux 工作站上本地运行看起来很酷，但是演示看起来如何呢？它看起来像一个普通的演示。

不确定 Erin 使用的是什么包，但确实找到了几个可以用来将 Jupyter Notebook 作为演示的包。Jupyter 项目提供了 nbconvert 来将笔记本转换为其他格式，包括 Reveal JS、HTML、PDF、Markdown。

jupyter2slides 基于 Reveal.js，看起来很棒。幻灯片也可以输出为 PDF，用于 decktape。另一个包是 nbpresent。

决定检查 nbconvert。它没有安装在系统上，但是使用 pip 安装非常简单。

安装 nbconvert 后，将其转换为幻灯片。

为了正确显示幻灯片，还需要安装 reveal.js。

作为测试，创建了自己的笔记本，并尝试使用了图片。