Javascript課程“理實(shí)一體”教學(xué)設(shè)計(jì)的探討

劉雅君+袁婷+常婉綸+楊景林+張愛(ài)玲

摘要：探討了開(kāi)展JavaScript課程“理實(shí)一體”的教學(xué)設(shè)計(jì)的實(shí)踐，將JavaScript課程的知識(shí)分成4篇，起步篇，基礎(chǔ)篇、提高篇和實(shí)戰(zhàn)篇。這四個(gè)部分由淺入深，完成循序漸進(jìn)的學(xué)習(xí)過(guò)程，不僅能夠激發(fā)學(xué)生的學(xué)習(xí)興趣，而且能夠及時(shí)鞏固和強(qiáng)化學(xué)習(xí)成果，有效建立學(xué)習(xí)過(guò)程中正向興趣循環(huán)，這種課程設(shè)計(jì)對(duì)其他計(jì)算機(jī)類程序設(shè)計(jì)課程都有一定的借鑒意義。

關(guān)鍵詞：Javascript；理實(shí)一體；教學(xué)設(shè)計(jì)

中圖分類號(hào)：G424.1 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）28-0093-02

JavaScript是1995年由Brendan Eich（Netscape的工程師）創(chuàng)建，由Netscape和Sun公司聯(lián)合開(kāi)發(fā)的基于對(duì)象和事件驅(qū)動(dòng)的客戶端腳本編程語(yǔ)言，通過(guò)它與HTML、XML、DOM、CSS、Java Applet等技術(shù)的有機(jī)結(jié)合，可以開(kāi)發(fā)出具有很強(qiáng)交互性的動(dòng)態(tài)頁(yè)面。作為目前世界上最流行的語(yǔ)言之一，JavaScript在網(wǎng)站腳本語(yǔ)言領(lǐng)域中具有統(tǒng)治地位。作為一種腳本語(yǔ)言，JavaScript可以采用小程序段的方式實(shí)現(xiàn)編程，可以直接嵌入HTML文檔中；作為一種基于對(duì)象的語(yǔ)言，JavaScript功能實(shí)現(xiàn)也可以來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用；它沒(méi)有嚴(yán)格的數(shù)據(jù)類型，依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)[1]。對(duì)編程新手來(lái)說(shuō)，JavaScript是入門(mén)的極佳選擇，門(mén)檻為零，實(shí)用性強(qiáng)，易學(xué)難精。

我國(guó)計(jì)算機(jī)專業(yè)大多開(kāi)設(shè)《網(wǎng)頁(yè)設(shè)計(jì)》課程，但其中缺乏對(duì)JavaScript技術(shù)的重視。往往因?yàn)檎n時(shí)所限，許多《網(wǎng)頁(yè)設(shè)計(jì)》的教授都將主要的精力放在HTML標(biāo)記細(xì)節(jié)和CSS盒子模型的介紹上。當(dāng)然許多學(xué)校已經(jīng)嘗試開(kāi)設(shè)的《JavaScript》課程。但是傳統(tǒng)教學(xué)思想和模式并不適應(yīng)JavaScript技術(shù)的講授，我系開(kāi)展JavaScript課程“理實(shí)一體”的教學(xué)設(shè)計(jì)的實(shí)踐，取得了良好的教學(xué)效果。

1 傳統(tǒng)理念下程序語(yǔ)言教學(xué)的不足

JavaScript 技術(shù)是一種功能強(qiáng)大的腳本語(yǔ)言，可用于實(shí)現(xiàn)交互式的Web 頁(yè)面。它不僅能直接應(yīng)用于HTML 文檔以獲得動(dòng)態(tài)效果，而且還可以運(yùn)行于服務(wù)器端，從而替代傳統(tǒng)的CGI 程序。這類腳本語(yǔ)言的學(xué)習(xí)過(guò)程如果采用傳統(tǒng)的教學(xué)思想和模式并不適用[2]。首先，如果在課堂教學(xué)方面填鴨式純講授的教學(xué)方法，會(huì)不能激發(fā)學(xué)生的學(xué)習(xí)興趣，降低學(xué)生參與的熱情。另外，在實(shí)驗(yàn)環(huán)節(jié)，如果只是布置題目，按部就班練習(xí)，盡管能夠加強(qiáng)課堂知識(shí)點(diǎn)的理解，但是無(wú)法培養(yǎng)真正的工程能力和創(chuàng)新能力?？傊?，細(xì)節(jié)問(wèn)題具體如下：

1）純課堂教學(xué)，速度快，容量過(guò)大，影響知識(shí)吸收

JavaScript 技術(shù)功能強(qiáng)大的同時(shí)，內(nèi)容相對(duì)龐雜。例如JavaScript面向?qū)ο缶幊滩糠郑珺oolean、Number、String、Array、RegExp等多個(gè)內(nèi)置對(duì)象及其屬性和方法需要重點(diǎn)講解。如果采用傳統(tǒng)課程授課，教師單次課堂容量多大，教學(xué)內(nèi)容繁雜，不可能面面俱到。這樣的大密度知識(shí)點(diǎn)，超過(guò)學(xué)生的接受能力和速度，使學(xué)生感覺(jué)學(xué)習(xí)枯燥，勢(shì)必影響知識(shí)的吸收。而且作為程序語(yǔ)言教學(xué)，沒(méi)有及時(shí)的練習(xí)實(shí)踐環(huán)節(jié)，不能充分調(diào)用學(xué)生主動(dòng)學(xué)習(xí)的積極性，限制學(xué)生的創(chuàng)新能力和發(fā)散思維的培養(yǎng)。

2）實(shí)驗(yàn)環(huán)節(jié)，鞏固不及時(shí)，題目設(shè)計(jì)缺乏工程創(chuàng)新能力、團(tuán)隊(duì)協(xié)作精神的培養(yǎng)

首先，在傳統(tǒng)的排課方式下，課堂教學(xué)和實(shí)驗(yàn)環(huán)節(jié)往往間隔數(shù)天，對(duì)學(xué)生的知識(shí)鞏固并不夠及時(shí)。在間隔的數(shù)天后，學(xué)生在上機(jī)時(shí)已經(jīng)不能回憶起知識(shí)點(diǎn)細(xì)節(jié)，操作容易錯(cuò)誤百出，從而沒(méi)有成就感，不利于學(xué)習(xí)過(guò)程中正向興趣循環(huán)的建立。

其次，大多編程練習(xí)以鞏固性練習(xí)為主，題目設(shè)計(jì)手段落后，不能引起學(xué)生的興趣。很多鞏固性練習(xí)是程序填空、程序糾錯(cuò)或者驗(yàn)證性實(shí)驗(yàn)題目。運(yùn)行后僅為界面簡(jiǎn)單的小程序，缺乏趣味性，忽視學(xué)生發(fā)散性思維的培養(yǎng)。學(xué)生往往不能自我創(chuàng)作，只能按部就班完成，極不利于創(chuàng)新思維和工程應(yīng)用能力的培養(yǎng)。

最后，教學(xué)過(guò)程缺乏實(shí)際項(xiàng)目的訓(xùn)練，學(xué)生往往缺乏團(tuán)隊(duì)協(xié)作精神的訓(xùn)練。新時(shí)代的學(xué)生往往個(gè)性鮮明，比較強(qiáng)調(diào)個(gè)體，在團(tuán)隊(duì)協(xié)作、溝通方面的能力需要及時(shí)訓(xùn)練。

總之， javascript教學(xué)需要兼顧理論和實(shí)踐，個(gè)人能力的訓(xùn)練要兼顧團(tuán)隊(duì)協(xié)作精神的培養(yǎng)，特別需要重視科技創(chuàng)新。為了使學(xué)生能更好地掌握J(rèn)avaScript 課程知識(shí)，并能在教學(xué)過(guò)程中培養(yǎng)學(xué)生的實(shí)際動(dòng)手開(kāi)發(fā)能力，必須結(jié)合該課程的特點(diǎn)，采取“理實(shí)一體”的教學(xué)設(shè)計(jì)。

2 “理實(shí)一體”教學(xué)設(shè)計(jì)

我校自2014年起在?？?年制軟件工程專業(yè)第四學(xué)期前兩周集中時(shí)間設(shè)立《javascript》課程，課程學(xué)時(shí)為理論教學(xué)56學(xué)時(shí)。為了突破JavaScript理論與實(shí)踐相脫節(jié)的現(xiàn)象，我們應(yīng)用了理論實(shí)踐一體化教學(xué)法。課程全程在機(jī)房授課，老師邊教，學(xué)生邊學(xué)邊做，完成教學(xué)任務(wù)，以提高教學(xué)質(zhì)量。在整個(gè)教學(xué)環(huán)節(jié)中，理論和實(shí)踐交替進(jìn)行，教學(xué)環(huán)節(jié)緊湊，實(shí)踐部分集中直觀，能夠?qū)崿F(xiàn)“做中學(xué)”和“學(xué)中做”的教學(xué)目標(biāo)[3]。具體做法如下：

經(jīng)過(guò)調(diào)研發(fā)現(xiàn)，現(xiàn)今許多IT公司設(shè)置的與JavaScript技術(shù)相關(guān)的工程師崗位，其中要求的JavaScript技術(shù)能力側(cè)重不同。因此，為培養(yǎng)具有工程能力創(chuàng)新型JavaScript人才，我們將JavaScript課程的知識(shí)分成4篇，起步篇，基礎(chǔ)篇、提高篇和實(shí)戰(zhàn)篇。這四個(gè)部分由淺入深，完成循序漸進(jìn)的學(xué)習(xí)過(guò)程：

1）起步篇

為了激發(fā)學(xué)生的學(xué)習(xí)興趣，起步篇的教學(xué)由JavaScript和jQuery的優(yōu)秀作品展示開(kāi)始。重點(diǎn)圍繞JavaScript基本語(yǔ)法程序，指導(dǎo)學(xué)生完成相關(guān)驗(yàn)證性實(shí)驗(yàn)程序的編寫(xiě)和測(cè)試。特別需要注意的是，強(qiáng)調(diào)JavaScript調(diào)試環(huán)境firebug等工具的安裝和使用，教授學(xué)生調(diào)試技巧，這有助于提高學(xué)生發(fā)現(xiàn)問(wèn)題和解決問(wèn)題的效率。起步篇在理實(shí)一體教學(xué)中安排在8 學(xué)時(shí)中進(jìn)行。

2）基礎(chǔ)篇

基礎(chǔ)篇的教學(xué)主要包含JavaScript面向?qū)ο缶幊?、文檔對(duì)象模型（DOM）、事件處理和瀏覽器對(duì)象模型（BOM）這4個(gè)方面的基礎(chǔ)知識(shí)。在教學(xué)時(shí)，首先展示緊扣知識(shí)點(diǎn)的引例，激發(fā)學(xué)生興趣。通過(guò)對(duì)知識(shí)點(diǎn)的講授分析，設(shè)計(jì)針對(duì)性實(shí)驗(yàn)。通過(guò)給出示范性引例，學(xué)生可以參照完成針對(duì)性實(shí)驗(yàn)。同時(shí)提供技術(shù)文檔，引導(dǎo)學(xué)生閱讀和查找，鼓勵(lì)學(xué)生在針對(duì)性實(shí)驗(yàn)基礎(chǔ)上完成思考性實(shí)驗(yàn)。例如針對(duì)面向?qū)ο缶幊讨械娜掌陬愔R(shí)點(diǎn)，首先設(shè)計(jì)針對(duì)性實(shí)驗(yàn)，即要求學(xué)生完成當(dāng)前系統(tǒng)時(shí)間顯示。之后，可以引導(dǎo)學(xué)生將時(shí)間顯示中的數(shù)字字符替換成圖片。下一步，引導(dǎo)學(xué)生閱讀技術(shù)文檔中的定時(shí)器函數(shù)，指導(dǎo)學(xué)生實(shí)現(xiàn)動(dòng)態(tài)時(shí)間顯示。最后，讓有余力的同學(xué)思考完成倒計(jì)時(shí)器等綜合知識(shí)點(diǎn)的設(shè)計(jì)性實(shí)驗(yàn)。這些實(shí)踐的目的在于鍛煉學(xué)生的程序設(shè)計(jì)和編寫(xiě)能力的同時(shí)，更注意訓(xùn)練學(xué)生查找技術(shù)資源與閱讀技術(shù)文檔的能力。

3）提高篇

提高篇主要由兩個(gè)內(nèi)容組成，包括JavaScript框架和Ajax應(yīng)用。

關(guān)于框架部分，長(zhǎng)久以來(lái)，JavaScript一直都是在HTML中實(shí)現(xiàn)動(dòng)態(tài)效果的不二之選。可兩個(gè)問(wèn)題遲遲得不到解決：一是瀏覽器兼容性問(wèn)題，二是直接操作DOM太麻煩。而jQuery等JavaScript框架對(duì)上述兩個(gè)問(wèn)題有很好的解決。特別是jQuery已經(jīng)成為現(xiàn)代基于瀏覽器的客戶端開(kāi)發(fā)的基本配置。因此，在授課時(shí)，我們將介紹prototype、Protovis、ExtJAVASCRIPT等多個(gè)第三方類庫(kù)，讓學(xué)生直觀體會(huì)第三方工具在瀏覽器中創(chuàng)建復(fù)雜的交互性數(shù)據(jù)可視化效果的優(yōu)勢(shì)。之后，重點(diǎn)講解jQuery的知識(shí)，如JQuery選擇器、事件處理、DOM操作等知識(shí)。

關(guān)于Ajax應(yīng)用部分，主要指異步的 JavaScript 和 XML。首先，通過(guò)引例說(shuō)明，Ajax不是一個(gè)新的語(yǔ)言，僅是一種技術(shù)應(yīng)用，以端正學(xué)生的認(rèn)識(shí)。通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。讓學(xué)生聯(lián)系JavaScript和jQuery中應(yīng)用Ajax，讓學(xué)生體會(huì)JQuery的方便、快捷和好用。

4）實(shí)戰(zhàn)篇

實(shí)戰(zhàn)篇主要鍛煉學(xué)生的網(wǎng)頁(yè)設(shè)計(jì)、開(kāi)發(fā)能力以及團(tuán)隊(duì)合作能力，要求以學(xué)生組成開(kāi)發(fā)團(tuán)隊(duì)，集中利用上機(jī)的4個(gè)課時(shí)和課下時(shí)間的完成實(shí)際項(xiàng)目網(wǎng)頁(yè)的開(kāi)發(fā)。該項(xiàng)目網(wǎng)頁(yè)系統(tǒng)可以是前三篇工作的集成，主題為某電子商務(wù)企業(yè)網(wǎng)站、某公司網(wǎng)站、校園門(mén)戶網(wǎng)站和個(gè)人博客等等。鼓勵(lì)學(xué)生自提主題，但需要由教師審核工作量和創(chuàng)意。在教師的指導(dǎo)下，學(xué)生3人為一組相互協(xié)作，討論明確網(wǎng)站項(xiàng)目的主題、整體風(fēng)格，目標(biāo)瀏覽人群；繪制網(wǎng)站結(jié)構(gòu)示意圖、確定網(wǎng)站的各級(jí)頁(yè)面內(nèi)容和具體分工；在獨(dú)立完成任務(wù)的過(guò)程中，充分發(fā)揮學(xué)生主觀能動(dòng)性，促使其獨(dú)立思考、勤于實(shí)踐、勇于創(chuàng)新。

3 結(jié)束語(yǔ)

通過(guò)對(duì)《javaScript》課程進(jìn)行“理實(shí)一體”的課程設(shè)計(jì)，優(yōu)點(diǎn)明顯。不僅能夠激發(fā)學(xué)生的學(xué)習(xí)興趣，而且能夠及時(shí)鞏固和強(qiáng)化學(xué)習(xí)成果，有效建立學(xué)習(xí)過(guò)程中正向興趣循環(huán)；通過(guò)循序漸進(jìn)的學(xué)習(xí)過(guò)程，將理論和實(shí)踐緊密結(jié)合，培養(yǎng)了學(xué)生的工程能力和團(tuán)隊(duì)協(xié)作精神。相信這種課程設(shè)計(jì)對(duì)其他計(jì)算機(jī)類程序設(shè)計(jì)課程都有一定的借鑒意義。

參考文獻(xiàn)：

[1] 胡沛.JavaScript課程教學(xué)改革探索[J].電腦知識(shí)與技術(shù)，2011（7）：7944-7945.

[2] 侯小麗.Javascript課程教學(xué)的探索與研究[J].太原城市職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2011（1）：38.

[3] 楊麗琴， 馮學(xué)敦.《機(jī)械課程設(shè)計(jì)》“理實(shí)一體”教學(xué)模式的探索與實(shí)踐[J].南京工業(yè)職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2010（12）：74-76.