用CodePen实现JavaScript程序动态在线开发

Using CodePen to Implement Online Dynamic JavaScript Development

CodePen
CodePen是面向Web前端开发人员的交互式在线开发环境。构建和部署网站，以及随时展示您的工作或学习成果非常方便；在线编写标记及代码，可以实时构建测试用例以学习和调试，并持续寻找灵感。

本文简要介绍如何使用CodePen来快速实现HTML，CSS和JavaScript代码编写及整体效果展示。

1. 访问CodePen官网：

在Chrome浏览器中，打开Code Pen官网网址 https://codepen.io/ 如下图。这是个基于Web的动态交互式网站。

点击Sign Up进行注册，填写必要信息，完成注册。

如果具有Google，Github或者Facebook账号，选择其中之一注册；如果没有上述账号，则选择Sign Up with Email，用个人Email作为账号注册。

2. 用CodePen编写JavaScript程序

当注册完毕重新登陆，或者直接编写，代码框分别显示在Web页面上，如下图：

写入最基本的HTML标记，CSS样式，和JavaScript代码，如下图所示：

3. HTML, CSS和JavaScript代码动态编写和更新页面

可以看到，当写入相应标记语言，或者JS代码后，原始页面发生了变化。

a. 通常在CSS样式表中，添加各段落和表格的CSS样式（含字体、字号、颜色、背景色等）;

b. 在HTML代码段，添加各种标记，来丰富Web页面；

c. 在JavaScript代码段，可以添加各类代码，以便自动化和高效运行。

4. 小结

纵观现代Web开发的工具和流程，总要涉及到网站页面开发和更新。在页面编写方面HTML5,CSS3占据了主要地位；而在编写Web应用程序时，JavaScript充当了主要角色。

CodePen恰恰非常适合这三部分的单独开发和统一整合，从而实现轻量级分类简化开发，在其Web页面上可以将HTML，CSS和JavaScript分开，或者分工，进行不同模块的开发，并可以动态观察开发页面的效果，非常有趣也对模拟页面处理非常适合真实开发演练。

本文简单介绍了用CodePen进行开发的过程。尽管是免费的，功能可以满足基本要求。如果您需要全方位企业Web开发，那么订阅CodePen Pro服务，将得到更加丰富的功能，和足够的云空间。

感谢阅读，敬请关注。?
后续好文不断推出。

相关文章：

1. 用Visual Studio Code搭建JavaScript开发环境
2. 在Jupyter Lab(Notebook)平台上安装运行JavaScript应用程序