基于模板匹配的启发式编程训练软件的Web实现

丁振凡，张晓瑞

（华东交通大学信息工程学院，江西南昌 330013）

在程序设计语言的课件中引入交互编程训练是一件很有意义的应用。让学生在学习课程时进行程序设计训练，将编程能力的训练融入到日常的教学中[1]。由于同一问题的解题思路和程序实现可以是多样的，因此，编程训练软件难以做到让学生自由编程，否则难以判断学生程序的正确性。提出的启发式编程训练是在教师给定的模板程序的引导下进行限制性编程。通过训练可以让学生对一些典型问题的编程思路有一个熟练的掌握，也有利于培养学生的规范编程风格。考虑到Web教学课件的广泛流行，笔者将该应用设计在Web页面中使用。

1 软件的基本工作思路

基于模板程序匹配的启发式编程训练软件的应用特点是由教师写出针对某个问题的标准程序。其中可以包含一些注释信息和启发信息以帮助引导学生编程。考虑到程序在变量命名以及编程思路上的差异性，所以，一般情况下不是整个程序都由学生编写，而是分阶段提示性给出一些程序，由学生不断补充编写完成，在模板程序中，将需要学生输入的部分用特殊符号括起来，笔者选用了程序中不出现的“@”作为该标记符。在提示与编写交替的过程中完成整个程序的代码设计。在提示状态下，将该字符直接显示给学生。在输入状态下，学生每输入一个字符要进行检查，根据匹配结果用字符颜色和消息框配合给出不同显示提示信息。整个程序匹配结束，给出得分，并可以清楚看到完整正确的程序代码以及自己编写的对错情况。程序匹配检查的基本思路如图1所示。程序基于DHTML技术实现与用户的交互和显示处理。通过Javascript的键盘事件获取用户的输入。

2DHTML技术简介

在WWW中发布HTML文档，大多数信息是静态的，而且要求服务器响应用户的交互。DHTML的出现，使Web范例从要求服务器交互改变为创建Web站点和Web应用。DHTML可以动态地改变Web页面上各元素的位置、内容及显示风格，从而给页面增添新活力。DHTML是一些现有网页技术与标准的整合，因此，DHTML的结构可以表示为：DHTML=HTML+DOM+CSS+Script[2]。

文档对象模型（DOM）是DHTML的基础，是W3C规范，独立于平台和语言[3]。DOM用于表示HTML元素以及Web浏览器信息的一个模型。DOM提供一套表示文档结构的对象，以及访问这些对象的方法，并可利用它改变其中的内容和可见物[4]。整个页面体现为由对象元素组成的树型结构，通常用id属性或name属性给页面中需要特别访问的元素规定标识[5]。在脚本中通过元素ID直接引用元素。

DHTML中借助Javascript事件实现与用户的交互。本文用到了Document对象的页面装载事件（onload）和键盘事件（onKeyPressed），前者实现对模板程序的初始提取和显示处理。后者则用于获取编程的字符输入。

3 系统实现技术处理

3.1 模板程序数据的读取

如何获取模板程序代码是本软件设计中的一个重要问题。在设计中先后考虑了几种方案。

方法1将模板程序存储在文本文件中，在客户浏览器中通过Ajax技术访问服务器端的ASP文件，把读取到的文本文件的数据发送给客户端。Ajax技术的核心是XMLHttpRequest对象，它为运行在浏览器中的javascript脚本提供了一种在页面之间与服务器通信的手段[6]。页面内的JavaScript可以在不刷新页面的情况下向服务器提交数据。Ajax在网页界面交互性设计方面有一定的优越性，它带给我们的不仅仅是技术，更多的是以人为本的一种服务理念[7]。

其中，ex_process.asp程序负责读取文本文件，并将结果以文本形式返回给请求者。在服务端的ASP处理程序中要注意将Response对象的.ContentType属性设置为“text/plain”，并通过Response对象的.CharSet属性将字符集设置为“gb2312”。

方法2将模板程序的源代码封装在XML文件中，但由于XML数据的格式要求，有些符号不能直接出现在XML代码中，例如“＜”等。可以在封装数据前对程序中的特殊符号进行转换处理，用ASP的Server对象的HTMLencode函数可简单实现转换处理。

方法3直接将模板程序嵌入到网页中，从而省去多余的文件管理工作，而且，对页面的访问还应考虑支持非HTTP的访问方式，也就是直接通过文件浏览方式访问。因此，最终选择该方式嵌入标准模板程序。

具体方法可将模板程序安排在一个标识为lianxi的层中，通过样式实现层的隐藏。为了保持程序的换行和排版风格，将程序安排在一个pre标记内。以下为模板样例。

注：为了实现程序的原样显示，需要对程序中的特殊符号如：＜，＞，&等进行变换处理。为此，编写了一个函数f实现符号变换，在后续显示处理程序中将调用该函数。

3.2 几个Javascript全局变量

以下为程序中用到的几个变量的简要说明。

pos：当前处理字符的位置；

content：模板程序内容；

s：用于拼接要显示的字符串；

state：表示处理状态，1—显示状态，2—输入状态；

count：统计当前字符输入出错次数；

right：正确匹配字符数；

err：错误匹配字符数。

3.3 状态的切换处理

在整个模板程序中，将需要检查学生输入的部分用特殊符号括起来。这里选用了java程序中不出现的“@”作为该标记符。通过state变量标记当前的处理状态，state为1代表内容显示状态，state为2表示数据输入匹配检查状态。以下为状态转换处理函数的代码。

3.4 获取用户的输入与匹配检查

用户的输入通过页面定义的keyPress事件调用相关函数代码进行处理，通过event对象的keyCode属性可得到按键的编码，并利用String.fromCharCode方法可转换得到相应字符。在教师模板程序和学生输入程序中，为了使程序的格式清晰，一般要进行各种缩进处理。而缩进空格的数量应是自由的。因此，程序中进行了特殊处理，从而实现匹配在一定程度上的灵活性。如果空格出现在一行程序的前面，则不需要与学生输入的空格符匹配，但如果在语句中间则要参与匹配。

进行字符匹配检查过程有3种情形：1用户输入正确，则在网页中显示用户输入字符；2用户输入出错，但在该位置是第一次出错，则给出对话框提示，在提示后输对，则字符用绿色显示；3同一位置两次出错，则用红色标记显示出正确字符。以下为实现匹配检查的mycheck函数核心代码。

3.5显示处理

数据的显示是利用DHTML技术实现。这样DHTML所采用的页面脚本代码直接由客户浏览器解释执行，下载速度和执行效率高，具有高效、交互性强的特点[8]。在浏览器页面中定义一个标识为x的层，将要显示字符串赋值给层对象的innerHTML属性。

1）数据的初始装载处理

开始整个匹配处理是通过网页onload事件触发执行myinit（）函数，该函数将读取模板程序的内容，进行提示信息的显示处理。以下为相关代码。

2）显示处理函数

显示处理程序将模板代码中的内容取出拼接为字符串，并显示在网页层中，这里通过加入“＜pre＞”标记来保持内容的显示风格，显示处理函数在整个匹配过程中要反复调用。遇到整个模板代码结束位置，将显示学生得分。以下为显示处理函数的具体代码。

图2为网络教学平台上学习页面中的一个编程实例的运行界面。

4 结束语

启发式编程训练软件以教师模板程序为目标引导学生进行编程实践，通过提示与输入的交替变化引导学生进行编程训练。该程序可在Web界面中实现各种程序设计语言的编程训练。有利于培养学生良好的编程风格。程序中通过对排版字符的匹配特殊处理给学生编程带来一定的灵活性。在实际应用中教师的模板程序设计要合理进行编排，要注意启发引导学生。此编程软件在web课件中进行启发式编程训练，克服了学生对编程训练的畏难心理，通过启发式提示学生编程，提高了学生学习的兴趣和规范编程的能力。研究成果已在Java语言和Web编程课件中应用，收到很好的效果。

[1]杨圣洪.编程训练与课程学习的相互渗透[J].计算机教育，2006（10）：50-54.

[2] 杨曦，高功步.HTML，DHTML，VRML，XML功能分析与比较研究[J].现代电子技术，2003（10）：26-28.

[3]佘名高，王程根，邓浩.基于Web2.0的Ajax技术的开发[J].计算机技术与发展，2007，17（5）：203-205.

[4]莫照，郭梦鸥.Ajax应用中关键技术的研究与实现[J].软件导刊，2009，8（4）：12-13.

[5]丁振凡.Ajax技术在网络考试分析中的应用[J].华东交通大学学报，2007，24（5）：74-76.

[6]谌燕，赵定远.基于Ajax的异步Web开发模式[J].成都大学学报：自然科学版，2007，26（4）：313-316.

[7]任红霞，何晨光.基于Ajax技术的网上作业系统研究[J].软件导刊，2009，8（6）：130-131.

[8]丁振凡.基于DHTML的活动网页技术与编程[J].电脑学习，2000（6）：17-18.

[9]丁振凡.Web编程实践教程[M].北京：清华大学出版社，2011：176-178.