JavaScript課程“步驟教學(xué)法”的探索與實施

張瑋

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

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

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

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

1 “步驟教學(xué)法”的探索

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

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

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

2 “步驟教學(xué)法”的具體實施

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

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

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

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

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

學(xué)生按照這個步驟基本就能根據(jù)其寫出相應(yīng)的JavaScript代碼，但難點的地方還需要教師后期引導(dǎo)和講解。核心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)換圖，遍歷標(biāo)簽數(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” ；

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

setInterval（startTime，1000）；

3 結(jié)語

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