丁振凡，張曉瑞

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

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

1 軟件的基本工作思路

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

2DHTML技術簡介

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

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

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

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

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

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

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

其中，ex_process.asp程序負責讀取文本文件，并將結(jié)果以文本形式返回給請求者。在服務端的ASP處理程序中要注意將Response對象的.ContentType屬性設置為“text/plain”，并通過Response對象的.CharSet屬性將字符集設置為“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)頁中，從而省去多余的文件管理工作，而且，對頁面的訪問還應考慮支持非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)的切換處理

在整個模板程序中，將需要檢查學生輸入的部分用特殊符號括起來。這里選用了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)用相關函數(shù)代碼進行處理，通過event對象的keyCode屬性可得到按鍵的編碼，并利用String.fromCharCode方法可轉(zhuǎn)換得到相應字符。在教師模板程序和學生輸入程序中，為了使程序的格式清晰，一般要進行各種縮進處理。而縮進空格的數(shù)量應是自由的。因此，程序中進行了特殊處理，從而實現(xiàn)匹配在一定程度上的靈活性。如果空格出現(xiàn)在一行程序的前面，則不需要與學生輸入的空格符匹配，但如果在語句中間則要參與匹配。

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

3.5顯示處理

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

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

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

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

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

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

4 結(jié)束語

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

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

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

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

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

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

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

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

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

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