基于web的图形化程序设计平台 - 中国移动139邮箱

《基于web的图形化程序设计平台 - 中国移动139邮箱》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、基于WEB的图形化程序设计平台摘要：基于WEB的图形化编程采用树形结构图形化基本的编程元素和结构，能够通过在线拖动树形单元编辑代码并分步调试执行。对于没有任何编程经验的学生来说，更加容易学习和掌握。该项目提供一个让学生专注于算法的设计的平台，不再为搭建环境和记忆语句花费大量时间，大大提高学生的编程效率。该平台使用WEB技术，免去编程搭建环境的繁琐步骤；采用图形化设计界面，降低了编程学习难度；在线执行部分采用ProcessingJS，并且为以后增加图形语句提供了便利；分步调试功能能帮助查看变量情况，快速查找程序错误，节约大量时间精力，提高编程效率。这

2、个项目作为个人信息技术课堂编程教学过程中的一个实践尝试，前台采用ProcessingJs，JqueryTree等技术，后台使用asp和access数据库，地址：http://219.139.52.150:8000/Processing/，请使用谷歌浏览器打开。关键词：WEB技术;图形化程序设计;Processing;jQueryTree一、研究背景程序设计是多么愉快的一件事，把需要花费大量人力时间的问题迅速精确的解决掉。然而，程序设计又是多么枯燥繁琐的一件事，在编程之前，我们得配置好你的软件环境，还需要花费大量时间了解软件的各种菜单和窗口，然后才能

3、带着疑惑突然进入到一遍无边的编程海洋里，很多人就此迷失，没有办法也没有方向去实践他们体验编程的美妙之旅。11编程真的这么难吗？回味自己的编程经历，最开始学习C语言的时候，下载编程软件，安装，然后要照着书本一步一步的不能有丝毫更改的继续下去，才能最终看到最终的执行效果。假如不是计算机专业人员，不是必须学习编程，我想很大一部分人都将望而却步。第一次体验一定要这么乏味么？现在各种网页各种应用都做的这么美观，难道编程就不能这样吗?我最开始的想法是直接采用类似http://www.codecademy.com/zh的在线输入代码，然后可以直接执行并查看到执行

4、效果。但是，使用这种方式，入门者必须对程序语言有一定的了解，已经花费大量时间在语言的学习而不是程序思想特别是算法的构建。算法才是程序的核心，假如有一种与语言无关的编程环境该是多美妙啊。当然，至少要有一些逻辑结构，不然根本就无法实现编程效果。后来，我看到了Virtools游戏编辑器里的编程方法和伍先军老师的《画程》（见参考资料），直接可以使用流程图样式进行编程，随决定开发一种基于WEB（在线版）的图形化编程软件并在教学课堂上进行了实践。基于WEB的图形化编程采用树形结构图形化基本的编程元素和结构，能够在线编辑代码并分步调试执行。对于已经学习过编程的程

5、序员来说，可能没有任何优点，但对于没有任何编程经验的学生来说，更加容易学习和掌握。这个项目作为个人信息技术课堂编程教学过程中的一个实践尝试，前台采用ProcessingJs，JqueryTree等技术，后台使用asp和access数据库，地址：http://219.139.52.150:8000/Processing/，请使用谷歌浏览器打开。11二、平台说明在线程序设计平台，采用asp+access+js（jquery,jqueryTree）技术开发，主要用户是选修编程的学生及教授数学算法的老师，仅需完成程序基本结构的教学，学生可以在学校机房中测试

6、执行，执行环境单一，没有考虑其他浏览器的兼容问题。用户及功能：游客：体验编程，查看公共代码，查看练习题目，报告错误或讨论，查看更新文档和教材学生：游客的所有功能，查看个人成绩和全班成绩，保存和管理代码，回答题目教师：学生的所有功能，布置作业，发布公共代码，批改作业（自动判断功能），学生管理。二、重难点和创新点（一）Web图形化程序操作界面通过网页的形式操作，免去程序设计搭建环境的繁琐步骤，降低了学习难度，容易入手。通过创建树形节点来设计程序，要为每一个基本程序语句设计自己的格式。程序中使用JqueryTree节点的附加HTML部分创建各自的格式。（

7、二）在线执行代码并输入输出11在线执行部分并没有直接使用JavaScript的eval函数，而是使用ProcessingJs的init函数来执行程序，便于以后扩展绘图函数。因为没有ProcessingJS的说明文档，读懂ProcessingJs的源码并找到程序入口需要较好的JavaScript基础并花费大量时间精力。（三）分步调试功能在设计程序时难免会出现各种错误，而分步调试功能能帮助你查看变量情况，快速查找程序错误，节约大量时间精力，提高编程效率。三、编辑器详细说明(一)简要说明编程界面分为工具栏，模块选择区和程序选择区。编程时，从模块选择区中选

8、择编程语句，拖入右侧程序编辑区，然后修改其中参数，最后点击工具栏中的执行按钮即可执行程序。示例代码“计算1到10的和”效果