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

張瑋

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

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

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

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

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

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

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

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

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

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

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

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

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

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

學(xué)生按照這個(gè)步驟基本就能根據(jù)其寫(xiě)出相應(yīng)的JavaScript代碼，但難點(diǎn)的地方還需要教師后期引導(dǎo)和講解。核心JavaScript語(yǔ)句如下：

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

var time = new Date（）；

var h = time.getHours（）；

var m = time.getMinutes（）；

var s = time.getSeconds（）；

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

if（h<10）

h= “0”+h；

else

h= “”+h；

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

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” ；

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

setInterval（startTime，1000）；

3 結(jié)語(yǔ)

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