基于模板匹配的啟發(fā)式編程訓(xùn)練軟件的Web實現(xiàn)

丁振凡，張曉瑞

（華東交通大學(xué)信息工程學(xué)院，江西南昌 330013）

在程序設(shè)計語言的課件中引入交互編程訓(xùn)練是一件很有意義的應(yīng)用。讓學(xué)生在學(xué)習課程時進行程序設(shè)計訓(xùn)練，將編程能力的訓(xùn)練融入到日常的教學(xué)中[1]。由于同一問題的解題思路和程序?qū)崿F(xiàn)可以是多樣的，因此，編程訓(xùn)練軟件難以做到讓學(xué)生自由編程，否則難以判斷學(xué)生程序的正確性。提出的啟發(fā)式編程訓(xùn)練是在教師給定的模板程序的引導(dǎo)下進行限制性編程。通過訓(xùn)練可以讓學(xué)生對一些典型問題的編程思路有一個熟練的掌握，也有利于培養(yǎng)學(xué)生的規(guī)范編程風格。考慮到Web教學(xué)課件的廣泛流行，筆者將該應(yīng)用設(shè)計在Web頁面中使用。

1 軟件的基本工作思路

基于模板程序匹配的啟發(fā)式編程訓(xùn)練軟件的應(yīng)用特點是由教師寫出針對某個問題的標準程序。其中可以包含一些注釋信息和啟發(fā)信息以幫助引導(dǎo)學(xué)生編程?？紤]到程序在變量命名以及編程思路上的差異性，所以，一般情況下不是整個程序都由學(xué)生編寫，而是分階段提示性給出一些程序，由學(xué)生不斷補充編寫完成，在模板程序中，將需要學(xué)生輸入的部分用特殊符號括起來，筆者選用了程序中不出現(xiàn)的“@”作為該標記符。在提示與編寫交替的過程中完成整個程序的代碼設(shè)計。在提示狀態(tài)下，將該字符直接顯示給學(xué)生。在輸入狀態(tài)下，學(xué)生每輸入一個字符要進行檢查，根據(jù)匹配結(jié)果用字符顏色和消息框配合給出不同顯示提示信息。整個程序匹配結(jié)束，給出得分，并可以清楚看到完整正確的程序代碼以及自己編寫的對錯情況。程序匹配檢查的基本思路如圖1所示。程序基于DHTML技術(shù)實現(xiàn)與用戶的交互和顯示處理。通過Javascript的鍵盤事件獲取用戶的輸入。

2DHTML技術(shù)簡介

在WWW中發(fā)布HTML文檔，大多數(shù)信息是靜態(tài)的，而且要求服務(wù)器響應(yīng)用戶的交互。DHTML的出現(xiàn)，使Web范例從要求服務(wù)器交互改變?yōu)閯?chuàng)建Web站點和Web應(yīng)用。DHTML可以動態(tài)地改變Web頁面上各元素的位置、內(nèi)容及顯示風格，從而給頁面增添新活力。DHTML是一些現(xiàn)有網(wǎng)頁技術(shù)與標準的整合，因此，DHTML的結(jié)構(gòu)可以表示為：DHTML=HTML+DOM+CSS+Script[2]。

文檔對象模型（DOM）是DHTML的基礎(chǔ)，是W3C規(guī)范，獨立于平臺和語言[3]。DOM用于表示HTML元素以及Web瀏覽器信息的一個模型。DOM提供一套表示文檔結(jié)構(gòu)的對象，以及訪問這些對象的方法，并可利用它改變其中的內(nèi)容和可見物[4]。整個頁面體現(xiàn)為由對象元素組成的樹型結(jié)構(gòu)，通常用id屬性或name屬性給頁面中需要特別訪問的元素規(guī)定標識[5]。在腳本中通過元素ID直接引用元素。

DHTML中借助Javascript事件實現(xiàn)與用戶的交互。本文用到了Document對象的頁面裝載事件（onload）和鍵盤事件（onKeyPressed），前者實現(xiàn)對模板程序的初始提取和顯示處理。后者則用于獲取編程的字符輸入。

3 系統(tǒng)實現(xiàn)技術(shù)處理

3.1 模板程序數(shù)據(jù)的讀取

如何獲取模板程序代碼是本軟件設(shè)計中的一個重要問題。在設(shè)計中先后考慮了幾種方案。

方法1將模板程序存儲在文本文件中，在客戶瀏覽器中通過Ajax技術(shù)訪問服務(wù)器端的ASP文件，把讀取到的文本文件的數(shù)據(jù)發(fā)送給客戶端。Ajax技術(shù)的核心是XMLHttpRequest對象，它為運行在瀏覽器中的javascript腳本提供了一種在頁面之間與服務(wù)器通信的手段[6]。頁面內(nèi)的JavaScript可以在不刷新頁面的情況下向服務(wù)器提交數(shù)據(jù)。Ajax在網(wǎng)頁界面交互性設(shè)計方面有一定的優(yōu)越性，它帶給我們的不僅僅是技術(shù)，更多的是以人為本的一種服務(wù)理念[7]。

其中，ex_process.asp程序負責讀取文本文件，并將結(jié)果以文本形式返回給請求者。在服務(wù)端的ASP處理程序中要注意將Response對象的.ContentType屬性設(shè)置為“text/plain”，并通過Response對象的.CharSet屬性將字符集設(shè)置為“gb2312”。

方法2將模板程序的源代碼封裝在XML文件中，但由于XML數(shù)據(jù)的格式要求，有些符號不能直接出現(xiàn)在XML代碼中，例如“＜”等?？梢栽诜庋b數(shù)據(jù)前對程序中的特殊符號進行轉(zhuǎn)換處理，用ASP的Server對象的HTMLencode函數(shù)可簡單實現(xiàn)轉(zhuǎn)換處理。

方法3直接將模板程序嵌入到網(wǎng)頁中，從而省去多余的文件管理工作，而且，對頁面的訪問還應(yīng)考慮支持非HTTP的訪問方式，也就是直接通過文件瀏覽方式訪問。因此，最終選擇該方式嵌入標準模板程序。

具體方法可將模板程序安排在一個標識為lianxi的層中，通過樣式實現(xiàn)層的隱藏。為了保持程序的換行和排版風格，將程序安排在一個pre標記內(nèi)。以下為模板樣例。

注：為了實現(xiàn)程序的原樣顯示，需要對程序中的特殊符號如：＜，＞，&等進行變換處理。為此，編寫了一個函數(shù)f實現(xiàn)符號變換，在后續(xù)顯示處理程序中將調(diào)用該函數(shù)。

3.2 幾個Javascript全局變量

以下為程序中用到的幾個變量的簡要說明。

pos：當前處理字符的位置；

content：模板程序內(nèi)容；

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

state：表示處理狀態(tài)，1—顯示狀態(tài)，2—輸入狀態(tài)；

count：統(tǒng)計當前字符輸入出錯次數(shù)；

right：正確匹配字符數(shù)；

err：錯誤匹配字符數(shù)。

3.3 狀態(tài)的切換處理

在整個模板程序中，將需要檢查學(xué)生輸入的部分用特殊符號括起來。這里選用了java程序中不出現(xiàn)的“@”作為該標記符。通過state變量標記當前的處理狀態(tài)，state為1代表內(nèi)容顯示狀態(tài)，state為2表示數(shù)據(jù)輸入匹配檢查狀態(tài)。以下為狀態(tài)轉(zhuǎn)換處理函數(shù)的代碼。

3.4 獲取用戶的輸入與匹配檢查

用戶的輸入通過頁面定義的keyPress事件調(diào)用相關(guān)函數(shù)代碼進行處理，通過event對象的keyCode屬性可得到按鍵的編碼，并利用String.fromCharCode方法可轉(zhuǎn)換得到相應(yīng)字符。在教師模板程序和學(xué)生輸入程序中，為了使程序的格式清晰，一般要進行各種縮進處理。而縮進空格的數(shù)量應(yīng)是自由的。因此，程序中進行了特殊處理，從而實現(xiàn)匹配在一定程度上的靈活性。如果空格出現(xiàn)在一行程序的前面，則不需要與學(xué)生輸入的空格符匹配，但如果在語句中間則要參與匹配。

進行字符匹配檢查過程有3種情形：1用戶輸入正確，則在網(wǎng)頁中顯示用戶輸入字符；2用戶輸入出錯，但在該位置是第一次出錯，則給出對話框提示，在提示后輸對，則字符用綠色顯示；3同一位置兩次出錯，則用紅色標記顯示出正確字符。以下為實現(xiàn)匹配檢查的mycheck函數(shù)核心代碼。

3.5顯示處理

數(shù)據(jù)的顯示是利用DHTML技術(shù)實現(xiàn)。這樣DHTML所采用的頁面腳本代碼直接由客戶瀏覽器解釋執(zhí)行，下載速度和執(zhí)行效率高，具有高效、交互性強的特點[8]。在瀏覽器頁面中定義一個標識為x的層，將要顯示字符串賦值給層對象的innerHTML屬性。

1）數(shù)據(jù)的初始裝載處理

開始整個匹配處理是通過網(wǎng)頁onload事件觸發(fā)執(zhí)行myinit（）函數(shù)，該函數(shù)將讀取模板程序的內(nèi)容，進行提示信息的顯示處理。以下為相關(guān)代碼。

2）顯示處理函數(shù)

顯示處理程序?qū)⒛０宕a中的內(nèi)容取出拼接為字符串，并顯示在網(wǎng)頁層中，這里通過加入“＜pre＞”標記來保持內(nèi)容的顯示風格，顯示處理函數(shù)在整個匹配過程中要反復(fù)調(diào)用。遇到整個模板代碼結(jié)束位置，將顯示學(xué)生得分。以下為顯示處理函數(shù)的具體代碼。

圖2為網(wǎng)絡(luò)教學(xué)平臺上學(xué)習頁面中的一個編程實例的運行界面。

4 結(jié)束語

啟發(fā)式編程訓(xùn)練軟件以教師模板程序為目標引導(dǎo)學(xué)生進行編程實踐，通過提示與輸入的交替變化引導(dǎo)學(xué)生進行編程訓(xùn)練。該程序可在Web界面中實現(xiàn)各種程序設(shè)計語言的編程訓(xùn)練。有利于培養(yǎng)學(xué)生良好的編程風格。程序中通過對排版字符的匹配特殊處理給學(xué)生編程帶來一定的靈活性。在實際應(yīng)用中教師的模板程序設(shè)計要合理進行編排，要注意啟發(fā)引導(dǎo)學(xué)生。此編程軟件在web課件中進行啟發(fā)式編程訓(xùn)練，克服了學(xué)生對編程訓(xùn)練的畏難心理，通過啟發(fā)式提示學(xué)生編程，提高了學(xué)生學(xué)習的興趣和規(guī)范編程的能力。研究成果已在Java語言和Web編程課件中應(yīng)用，收到很好的效果。

[1]楊圣洪.編程訓(xùn)練與課程學(xué)習的相互滲透[J].計算機教育，2006（10）：50-54.

[2] 楊曦，高功步.HTML，DHTML，VRML，XML功能分析與比較研究[J].現(xiàn)代電子技術(shù)，2003（10）：26-28.

[3]佘名高，王程根，鄧浩.基于Web2.0的Ajax技術(shù)的開發(fā)[J].計算機技術(shù)與發(fā)展，2007，17（5）：203-205.

[4]莫照，郭夢鷗.Ajax應(yīng)用中關(guān)鍵技術(shù)的研究與實現(xiàn)[J].軟件導(dǎo)刊，2009，8（4）：12-13.

[5]丁振凡.Ajax技術(shù)在網(wǎng)絡(luò)考試分析中的應(yīng)用[J].華東交通大學(xué)學(xué)報，2007，24（5）：74-76.

[6]諶燕，趙定遠.基于Ajax的異步Web開發(fā)模式[J].成都大學(xué)學(xué)報：自然科學(xué)版，2007，26（4）：313-316.

[7]任紅霞，何晨光.基于Ajax技術(shù)的網(wǎng)上作業(yè)系統(tǒng)研究[J].軟件導(dǎo)刊，2009，8（6）：130-131.

[8]丁振凡.基于DHTML的活動網(wǎng)頁技術(shù)與編程[J].電腦學(xué)習，2000（6）：17-18.

[9]丁振凡.Web編程實踐教程[M].北京：清華大學(xué)出版社，2011：176-178.