張瑋

摘要：“JavaScript腳本編程”是四川信息職業(yè)技術(shù)學院軟件技術(shù)專業(yè)開設(shè)的一門專業(yè)基礎(chǔ)課，在實際教學中，文章探索出一種“步驟教學法”，即在案例教學的過程中，將每個JavaScript特效案例拆分細化到具體步驟，先用注釋的形式用中文寫出具體每個步驟要實現(xiàn)的功能，然后再引導學生使用JavaScript腳本語言完成相應功能。這種教學方法使初學者更能跟上老師的思路，并且通過教學能讓學生掌握化繁為簡的能力，鍛煉了學生思考問題的能力。

關(guān)鍵詞：JavaScript；教學方法；軟件技術(shù)；編程

“JavaScript腳本編程”課程屬于四川信息職業(yè)技術(shù)學院軟件技術(shù)專業(yè)開設(shè)的一門專業(yè)基礎(chǔ)課。本課程在大一下學期開設(shè)，前期開設(shè)的C程序設(shè)計和靜態(tài)網(wǎng)頁設(shè)計兩門課程已經(jīng)為本課程打下基礎(chǔ)。通過大一第一學期的學習，學生有了初步的閱讀程序的能力、編寫程序的能力、程序設(shè)計的思想和靜態(tài)網(wǎng)頁制作能力。本課程目的是培養(yǎng)學生JavaScript腳本編程能力，使學生能夠使用JavaScript腳本語言制作具有交互功能的Web頁面，能在軟件項目開發(fā)過程中熟練應用基本的JavaScript腳本程序。

通過本課程的學習和訓練，使學生具備以下知識、能力、素質(zhì)：（1）掌握JavaScript基本語法；（2）掌握JavaScript對象基礎(chǔ)，DOM基礎(chǔ)；（3）熟悉事件處理；（4）了解高級DOM技術(shù)；（5）能實現(xiàn)常見JavaScript動畫；（6）熟悉jQuery及其常用函數(shù)；（7）能夠使用JavaScript進行瀏覽器端應用程序的開發(fā)；（8）培養(yǎng)學生團隊精神；（9）培養(yǎng)學生具有實事求是的學風和嚴謹?shù)墓ぷ鲬B(tài)度；（10）培養(yǎng)學生從實際問題出發(fā)分析問題和解決問題的能力。

1 “步驟教學法”的探索

課程剛開始的時候發(fā)現(xiàn)很多學生基礎(chǔ)太差，尤其是自己動手編程的能力很差。大部分學生只是在課堂上照搬教師的代碼，自己動腦筋思考解決問題的能力很差，而且對英文的編程語言還是比較抗拒，而JavaScript跟C程序很大的區(qū)別在于JavaScript語言提供了更多的內(nèi)部對象，這就意味著更多的內(nèi)部屬性和函數(shù)需要掌握其寫法和使用方法。如果不提升學生主觀思考和記憶的能力，一味只是照搬代碼，那么想學好這門課程以及后續(xù)的所有專業(yè)課程是不可能的事情。

在教學的過程中，筆者探索出一種“步驟教學法”，在案例驅(qū)動的教學過程中具體實施。每次動手編程完成一個JavaScript特效前，要求學生先將這個特效進行分解，先明白自己要完成哪些工作，然后再分解到具體每一個步驟。先用中文描述出這個步驟要做的功能，全部分解完成之后再按照步驟寫出對應的一行JavaScript代碼。這種“步驟教學法”剛開始實施的時候，就發(fā)現(xiàn)能讓很多同學跟上課堂的節(jié)奏，能基本弄清楚每個特效是怎么一步一步完成的。這樣慢慢積累，很多函數(shù)和屬性也就慢慢掌握了。

“步驟教學法”剛開始實施的時候主要依靠教師來帶領(lǐng)學生分解步驟，第一是因為這是一門新的編程語言，學生對其比較陌生，沒有相關(guān)的語法知識；第二是學生基礎(chǔ)薄弱，動手能力差，思考分析問題的能力有限，這就要靠不斷的積累和反復訓練。所以本課程前期1/3的時間都是在講基礎(chǔ)語法，以及JavaScript基本語法和C語言基本語法的區(qū)別與聯(lián)系。當學生有了一定的語法基礎(chǔ)后，就可以開始融入一些內(nèi)部對象的常用屬性和函數(shù)，寫一些網(wǎng)頁上比較常見的小特效。這個時候教師帶領(lǐng)學生一步一步分解案例，從靜態(tài)網(wǎng)頁標簽的梳理到指層疊樣式表（Cascading Style Sheets， CSS）特效的添加再到JavaScript特效的分解完成，要具體地分解到基本上一行中文步驟對應一行JavaScript語句。

2 “步驟教學法”的具體實施

本文以一個數(shù)碼時鐘定時器的特效案例為例。數(shù)碼時鐘是在講完JavaScript定時器的使用方法和內(nèi)部Date對象的常用函數(shù)之后引導學生完成的一個綜合性質(zhì)的案例。本次案例主要的知識點：定時器的開啟；使用Date對象獲取時間；選擇結(jié)構(gòu)實現(xiàn)空位補零；尋找頁面上標簽的方法；循環(huán)操作標簽改變其相關(guān)屬性；數(shù)組的遍歷；函數(shù)的定義和調(diào)用。一開始先給學生看實際完成的效果，如圖1所示。

先講述下這個數(shù)碼時鐘特效的要求，即跟普通時間不一樣，本案例不是用數(shù)字顯示時間而是用圖片來完成時間的顯示。接下來，帶領(lǐng)學生分析理解本案例是如何完成的，引導學生進行步驟分解，本案例核心功能就是獲取系統(tǒng)時分秒然后依次用時間的數(shù)字來生成對應的圖片地址從而完成換圖。要完成這樣一個特效首先要準備10個同樣大小風格的數(shù)字圖片，如圖2所示。

接下來開始進行步驟分解，首先是靜態(tài)網(wǎng)頁部分步驟分解：（1）放置6個標簽用來顯示時分秒的數(shù)字圖片；（2）設(shè)置簡單的背景和字體顏色讓效果更好看。

然后是JavaScript特效步驟分解，這里要注意提醒學生本案例有一個細節(jié)處理，因為系統(tǒng)返回的時分秒是普通數(shù)字，并且返回的10以內(nèi)的時間是單個的數(shù)字，這就要求學生要對獲取的時分秒進行空位補零。如果要操作多個同樣效果的標簽，比較常見和便捷的方式是用循環(huán)，這就要求時分秒要按照順序連成一個六位的字符串，這樣循環(huán)才能依次對標簽和字符串進行操作。

具體JavaScript步驟分解如下：（1）通過標簽名找到頁面上所有的img標簽返回的是包含所有img標簽的數(shù)組，方便后邊循環(huán)用下標遍歷數(shù)組換圖；（2）獲取當前系統(tǒng)時間；（3）從獲取的時間信息里提取出時分秒；（4）時分秒要變成兩位的字符串的形式；（5）把時分秒連成六位的字符串如191703；（6）寫循環(huán)來依次換圖；（7）在循環(huán)中依次獲取字符串的每一個字符生成圖片地址來改變img標簽src屬性；（8）開啟定時器，每隔1 s執(zhí)行一次上述語句。

學生按照這個步驟基本就能根據(jù)其寫出相應的JavaScript代碼，但難點的地方還需要教師后期引導和講解。核心JavaScript語句如下：

使用Date對象的相關(guān)方法獲取系統(tǒng)時間：

var time = new Date（）；

var h = time.getHours（）；

var m = time.getMinutes（）；

var s = time.getSeconds（）；

時間轉(zhuǎn)換成兩位字符串，空位補零，使用選擇分支完成：

if（h<10）

h= “0”+h；

else

h= “”+h；

字符串鏈接成六位字符串，這里加號是作為連接符，而不是加法：

var str = h+m+s；

循環(huán)換圖，遍歷標簽數(shù)組，固定次數(shù)的循環(huán)優(yōu)先選擇for循環(huán)結(jié)構(gòu)：

for（var i=0； i

img[i].src = “D：/img/” +str.charAt（i）+” .png” ；

開啟定時器，本次案例使用反復型定時器，時間是每隔1 s即1 000 ms執(zhí)行一次：

setInterval（startTime，1000）；

3 結(jié)語

“步驟教學法”在JavaScript教學中，能讓初學者思路清晰，入門更快，經(jīng)過長期訓練，能讓學生更好更快地完成一些JavaScript特效。比如給標簽添加事件，每次我們都強調(diào)“三步走”，第一步先通過函數(shù)找到標簽，第二步添加事件如x.onclick=function （）{}，第三步在匿名函數(shù)花括號內(nèi)部完成相關(guān)操作。訓練幾次之后學生就掌握了，而這個基本是所有JavaScript案例都要用到的?！安襟E教學法”的實施在后期的綜合案例訓練和JavaScript高級程序設(shè)計中能讓教師教學更輕松，可以提前引入分組教學，在小組中每個成員輪流來進行案例的步驟分解，也能帶給課堂更多的新思路和新想法，調(diào)動學生的學習積極性。按照軟件工程的流程，開發(fā)一個項目之前也需要做好需求分析和系統(tǒng)設(shè)計，然后才是系統(tǒng)具體實現(xiàn)，所以對學生自我的分析問題、解決問題的能力在軟件技術(shù)行業(yè)要求很高，通過“步驟教學法”也能更好地鍛煉學生這方面的能力。通過“步驟教學法”在課堂上的實施，學生不僅提高了自己的編程能力，而且學習能力和分析解決問題的綜合素質(zhì)也得到了提升。