CodePen是孩子们学习编程的近乎完美的地方

如果您经常阅读这个空间，就会知道我的观点颇有争议，即JavaScript对于学习编程的孩子来说是一门很棒的第一语言。这并不是因为JavaScript是一门伟大的教学语言(它肯定不是)。这是因为该平台无处不在-在每个操作系统、每个浏览器和几乎每个比烤面包机更复杂的电子设备上。

如此广泛的覆盖面使得初学者可以毫不费力地用JavaScript构建程序并与朋友分享。与记录的其余计算历史不同，不需要下载、安装或配置。JavaScript使用与许多其他专业语言(如Java和C#)相似的花括号语法也不会有什么坏处。这意味着您花在学习JavaScript语法上的努力永远不会白费。

但也有一些绊脚石。其中一个障碍是编程环境。如果您是学习编程的初学者，最好的起点是将语言和编辑工具融合在一起的IDE。想一想像Visual Basic或Scratch这样的东西，从编写第一行代码到调试最后一行代码都有无缝体验。一个好的IDE可以建议关键字、捕捉错误，并且可以很容易地看到您所做的事情。它允许您在代码运行时逐步执行代码，一次一条语句-不仅是为了捕获错误，而且还可以了解代码是如何执行的。对于初学者来说，这些细节决定了神秘和困惑的体验和流畅的体验之间的不同。

不幸的是，在编写JavaScript代码时会有很多摩擦。是的，你可以使用我最喜欢的代码编辑器VS Code，并且(只需要一点小麻烦)设置它不错的Chrome调试器。但是编码体验并不太适合初学者。编辑器功能丰富，配置模型本身就是一个学习项目，出错的方法有很多。

JavaScript IDE的复杂性由于JavaScript的第一步是陡峭的这一事实而变得更加复杂。即使是纯JavaScript应用程序也需要多个部分协同工作：HTML文件、CSS样式表和带有代码的JavaScript文件。创建这些内容并将它们组合在一起并不是初学者的能力所能及，但这也不是一个温和的开始-而且像VS Code这样的JavaScript编辑器并不能提供太多帮助。

这就是CodePen的用武之地。我首先开始使用CodePen制作准备好的示例--初学者可以使用的预先配置好的页面。有时，准备好的示例的目标是更改代码、添加功能或查找问题。其他时候，这只是一个修补工作页面的机会。

准备好的示例提供了两全其美的效果。它们让初学者开始学习真正的代码(而不是玩模拟的移动乌龟游戏)。但他们不会要求他们自己搭建所有的脚手架。任何在前一个千年长大的人，从杂志上抄袭小的Basic程序，都知道你不需要理解别人程序的每一个部分就能从中学到一些东西。

如果您以前没有使用过CodePen，它是众多基于浏览器的JavaScript沙箱之一。他们都很棒。但是CodePen对于初学者来说特别友好和易于使用。

在CodePen中，每个用户都有一个仪表板，他们可以在其中保存自己的示例，您可以轻松地派生其他人的项目来开始添加您自己的定制。这个社区很大，而且很支持。但也许最好的部分是界面。编辑干净整洁。没有编辑-保存-刷新周期，因为只要您进行更改，网页预览就会更新。而且，您可以轻松地调整窗口大小，以便只关注一件事(比如JavaScript代码)，或者同时看到HTML、CSS和JavaScript。

CodePen中的所有内容都会自动连接。您编写的JavaScript函数将立即可用于您的页面，CSS会自动应用，并且HTML只保存页面内容(通常位于<；body>；部分)。它是正宗的，但仍然很轻。高级用户可以很容易地附加预设的JavaScript库和框架，如Reaction。初学者可以专注于简单的HTML或CSS练习，或者一次学习一个JavaScript概念(就像在这些教程中一样)。

举一个非常简单的样板示例，比如包含一些文本框和一个空的预连线JavaScript函数的页面。例如，这个简单但乏味的财富柜员启动器。

编写更多的代码，用CSS格式化它，然后让它成为她自己的。通常，我会给她一些关于特定JavaScript概念(如条件逻辑)的背景读物，并就下一步要实现什么提供一些建议。她将最终产品存入自己的CodePen账户。

以下是最好的：学习者有机会制作(有时还会修复)一个真正的程序。这种创造性的机会是激励人的。通常，它胜过详细的教程，比如关于可汗学院的其他很好的视频。

显然，CodePen编辑器没有接近VS代码编辑体验，但它仍然出人意料地好。起初，我为牺牲VS Code的智能感知而难过，但后来我发现CodePen拥有不错的自动完成功能，作为一种选择加入功能，隐藏在它的设置页面中：

这似乎是一个次要的细节，但对于初学者来说，自动完成确实做了大量的工作来减少摩擦。他们很容易花上几个小时遗漏一些小错误，比如JavaScript关键字大写不正确-例如，编写Document.getElementById()而不是Docent.getElementById()。

CodePen环境中最大的牺牲是缺少调试器。单步执行循环和条件逻辑会在初学者中触发洞察力的闪现，如果您不能看到代码在CodePen中执行，还有更多的脑力工作要做。出于这个原因，我倾向于使用较小的CodePen示例。当学习者准备好过渡到更深入的编码时，相对平稳地过渡到VS代码或另一个IDE的欢迎怀抱中。

有了三个女儿，我有机会尝试了很多学会编程的实验，而CodePen是我目前最喜欢的。我计划在不久的将来发布一些我们使用的模块练习。同时，如果您找到了适合孩子和完全初学者的完美编码空间，请留下评论！

你可以在https://codepen.io上试用codePen。如果您有兴趣了解更多教孩子编程的选择，请查看我们的流程图。订阅Young Coder时事通讯，每月发送一次电子邮件，了解我们最好的技术报道。