《動(dòng)態(tài)網(wǎng)站技術(shù)》課程教學(xué)改革的研究

葉子豪 張曉嬌 許廣林

【摘要】動(dòng)態(tài)網(wǎng)站技術(shù)是上海立信會(huì)計(jì)金融學(xué)院計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)的一門必修課，本文首先分析了該課程教學(xué)的現(xiàn)狀，然后探索并嘗試從教學(xué)內(nèi)容、教學(xué)環(huán)節(jié)、實(shí)踐環(huán)節(jié)、實(shí)驗(yàn)案例和網(wǎng)絡(luò)教學(xué)平臺(tái)等方面進(jìn)行改進(jìn)，從而提高學(xué)生對(duì)本門課程的興趣和提升本門課程的教學(xué)效果和教學(xué)質(zhì)量。

【關(guān)鍵詞】動(dòng)態(tài)網(wǎng)站技術(shù)? 教學(xué)改革? 網(wǎng)絡(luò)化教學(xué)

【中圖分類號(hào)】G42 ? 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】2095-3089（2021）34-0026-02

上海立信會(huì)計(jì)金融學(xué)院信息管理學(xué)院根據(jù)2020年高地大一流本科建設(shè)項(xiàng)目及學(xué)院人才培養(yǎng)實(shí)際需要，經(jīng)學(xué)院教職工積極申報(bào)、院教學(xué)委員會(huì)審議等程序，對(duì)多個(gè)教學(xué)研究與改革項(xiàng)目予以立項(xiàng)作為二級(jí)子項(xiàng)目，《動(dòng)態(tài)網(wǎng)站技術(shù)》被立項(xiàng)為院級(jí)優(yōu)質(zhì)在線課程?！秳?dòng)態(tài)網(wǎng)站技術(shù)》是信管學(xué)院計(jì)算機(jī)科學(xué)與技術(shù)高年級(jí)學(xué)生學(xué)習(xí)互聯(lián)網(wǎng)Web應(yīng)用開(kāi)發(fā)技術(shù)的一門專業(yè)課，是一門理論和實(shí)踐緊密結(jié)合的實(shí)用課程。主要講授Web前端開(kāi)發(fā)技術(shù)，包括JavaScript語(yǔ)言、可擴(kuò)展標(biāo)記語(yǔ)言（Extensible Markup Language）技術(shù)、jQuery技術(shù)、AJAX技術(shù)及Node.js。通過(guò)本門課的學(xué)習(xí)使學(xué)生掌握設(shè)計(jì)和開(kāi)發(fā)一個(gè)Web應(yīng)用系統(tǒng)前端的基本原則、方法和步驟，使學(xué)生具有扎實(shí)的Web前端開(kāi)發(fā)理論基礎(chǔ)、Web UI的設(shè)計(jì)能力和較強(qiáng)的動(dòng)手開(kāi)發(fā)能力。本文針對(duì)動(dòng)態(tài)網(wǎng)站技術(shù)這門課，分析教與學(xué)的現(xiàn)狀，深入探索建立網(wǎng)絡(luò)信息平臺(tái)與軟件開(kāi)發(fā)類課程融合機(jī)制，改進(jìn)課程教學(xué)的各個(gè)環(huán)節(jié)，調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性，全面提升教學(xué)效果和教學(xué)質(zhì)量。

一、現(xiàn)狀分析

《動(dòng)態(tài)網(wǎng)站技術(shù)》是計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)的學(xué)科基礎(chǔ)平臺(tái)必修課，已經(jīng)開(kāi)設(shè)三年。前期所需基礎(chǔ)課程有《數(shù)據(jù)結(jié)構(gòu)》和《高級(jí)程序設(shè)計(jì)》。本課程之所以安排在大二第一學(xué)期是因?yàn)樗呛罄m(xù)的《響應(yīng)式Web開(kāi)發(fā)》和《JSP動(dòng)態(tài)網(wǎng)站技術(shù)》等多門課程的基礎(chǔ)。該課程的學(xué)習(xí)目的是通過(guò)學(xué)習(xí)，使學(xué)生對(duì)JavaScript、jQuery和Ajax技術(shù)有一個(gè)全面的認(rèn)識(shí)，熟練掌握相關(guān)的知識(shí)點(diǎn)，在Web設(shè)計(jì)中，能夠在前臺(tái)設(shè)計(jì)中靈活地運(yùn)用這三種技術(shù)。

（一）教學(xué)方面

因?yàn)楸緦I(yè)還開(kāi)設(shè)了基于JSP、ASP.NET和PHP等的一系列網(wǎng)站開(kāi)發(fā)課程，因此《動(dòng)態(tài)網(wǎng)站技術(shù)》更側(cè)重于Web前端的設(shè)計(jì)和開(kāi)發(fā)，主要涉及的知識(shí)點(diǎn)有JavaScript的基本概念、基本語(yǔ)法及常用對(duì)象，DOM的處理和事件處理;jQuery的基本和高級(jí)過(guò)濾和選擇技術(shù)，使用jQuery的DOM操作在節(jié)點(diǎn)中添加、刪除或者更新內(nèi)容，jQuery對(duì)表單和表格的操作，插件的調(diào)用，動(dòng)畫設(shè)計(jì)和網(wǎng)頁(yè)嵌入式數(shù)據(jù)處理;Ajax部分包括了解Ajax的概況、Ajax工作原理和作用及Ajax的技術(shù)組成，掌握Ajax技術(shù)的編程結(jié)構(gòu)和在實(shí)際的項(xiàng)目中應(yīng)用Ajax技術(shù)。

作為一門程序開(kāi)發(fā)類課程，目前教學(xué)方法主要是以通過(guò)PPT講解課程的基本知識(shí)點(diǎn)和原理，然后根據(jù)知識(shí)點(diǎn)和原理，設(shè)計(jì)一個(gè)小應(yīng)用，隨后老師現(xiàn)場(chǎng)演示如何編寫代碼實(shí)現(xiàn)此小應(yīng)用。老師在此應(yīng)用的基礎(chǔ)上設(shè)計(jì)一個(gè)類似應(yīng)用，讓學(xué)生根據(jù)老師的演示隨堂編寫代碼實(shí)現(xiàn)此應(yīng)用。不足之處在于有少部分同學(xué)動(dòng)手能力偏弱，在代碼編寫和調(diào)試過(guò)程中遇到問(wèn)題，無(wú)法解決，就逐漸失去對(duì)本門課的興趣。還有部分同學(xué)動(dòng)手能力很強(qiáng)，但是忽略了對(duì)知識(shí)點(diǎn)和原理性知識(shí)的掌握。

（二）實(shí)踐方面

為了讓學(xué)生能夠更好地對(duì)所學(xué)知識(shí)綜合應(yīng)用和學(xué)會(huì)如何解決實(shí)際問(wèn)題，本門課共設(shè)計(jì)了兩個(gè)實(shí)驗(yàn)，第一個(gè)實(shí)驗(yàn)基于JavaScript，第二個(gè)實(shí)驗(yàn)基于jQuery。每個(gè)實(shí)驗(yàn)都是把相對(duì)應(yīng)一章的知識(shí)點(diǎn)進(jìn)行了整合，通過(guò)完成實(shí)驗(yàn)，學(xué)生可以更好地融會(huì)貫通本章學(xué)習(xí)的內(nèi)容。實(shí)驗(yàn)指導(dǎo)手冊(cè)給出實(shí)驗(yàn)的目的，實(shí)驗(yàn)的過(guò)程和樣板代碼，同學(xué)根據(jù)實(shí)驗(yàn)指導(dǎo)手冊(cè)可以單獨(dú)完成每個(gè)實(shí)驗(yàn)。存在的問(wèn)題是實(shí)驗(yàn)項(xiàng)目的主題比較單一，學(xué)生只知道實(shí)驗(yàn)手冊(cè)編寫代碼和完成相應(yīng)的功能，并不一定真正理解到底在解決什么實(shí)際問(wèn)題。

（三）網(wǎng)絡(luò)教學(xué)輔助教學(xué)

現(xiàn)階段本門課使用了一些網(wǎng)絡(luò)輔助教學(xué)，比如在線和發(fā)放作業(yè)，電腦屏幕控制和電腦點(diǎn)名等。存在的問(wèn)題是雖然在線收取作業(yè)但還需要人工評(píng)閱，機(jī)器點(diǎn)名無(wú)法避免替人簽到。網(wǎng)絡(luò)化的教學(xué)優(yōu)勢(shì)沒(méi)有真正發(fā)揮出來(lái)。

二、教學(xué)的改革對(duì)策

本課程屬于開(kāi)發(fā)類型的課程，實(shí)踐性非常強(qiáng)，無(wú)論是教學(xué)內(nèi)容還是教學(xué)方式上都需要不斷的創(chuàng)新，讓學(xué)生產(chǎn)生濃厚的興趣，并應(yīng)用本門課程所學(xué)知識(shí)去設(shè)計(jì)和開(kāi)發(fā)網(wǎng)站前端。針對(duì)本校動(dòng)態(tài)網(wǎng)站技術(shù)課程的現(xiàn)狀和高地大一流本科建設(shè)項(xiàng)目的要求，提出以下四點(diǎn)的改進(jìn)方案。

（一）對(duì)教學(xué)大綱進(jìn)行更新，增加一些流行的相關(guān)新技術(shù)。

JavaScript于2015年推出了新的ECMAScript 6標(biāo)準(zhǔn)，里面有大量新的內(nèi)容，如引入Class概念，函數(shù)定義也不再使用關(guān)鍵字function，而是利用了=>來(lái)進(jìn)行定義，在新的教學(xué)大綱中新增這部分內(nèi)容。TypeScript是JavaScript 的一個(gè)超集，但是比JavaScript多了可選的靜態(tài)類型和基于類的面向?qū)ο?，目前也是非常流行的一門開(kāi)發(fā)語(yǔ)言，在新的教學(xué)大綱也適當(dāng)加入這部分內(nèi)容?，F(xiàn)在網(wǎng)頁(yè)中存放臨時(shí)小量數(shù)據(jù)成為趨勢(shì)，相應(yīng)增加jQuery對(duì)網(wǎng)頁(yè)嵌入式數(shù)據(jù)處理的課時(shí)。自從主流瀏覽器禁止安裝Flash插件以后，網(wǎng)頁(yè)動(dòng)畫的實(shí)現(xiàn)更多基于jQuery和CSS3技術(shù)。這部分內(nèi)容在實(shí)際中使用較多，并且因?yàn)榻换バ詮?qiáng)更容易激發(fā)起學(xué)生的學(xué)習(xí)興趣，因此適當(dāng)增加這一部分的內(nèi)容和課時(shí)，適當(dāng)增加jQuery Mobile方面的內(nèi)容。

（二）改進(jìn)授課方式和隨堂案例提高學(xué)生的興趣和參與度。

動(dòng)態(tài)網(wǎng)站技術(shù)的實(shí)踐性強(qiáng)和理論性強(qiáng)是導(dǎo)致學(xué)生失去學(xué)習(xí)興趣的重要原因，對(duì)于這個(gè)問(wèn)題，可以使用三種方法進(jìn)行解決。第一種方法對(duì)于學(xué)習(xí)理論性知識(shí)使用對(duì)比法。因?yàn)閷W(xué)生在大一學(xué)過(guò)基于C++的面向?qū)ο箝_(kāi)發(fā)，因此在講解類和函數(shù)定義這兩部分時(shí)，可以和C++進(jìn)行比較來(lái)讓學(xué)生更加容易理解它們之間的差異;第二種解決方法是在案例代碼中增加各種特效，如發(fā)生某一個(gè)事件后網(wǎng)頁(yè)背景變色或者字體變大，通過(guò)這種特效吸引學(xué)生的注意力，激發(fā)學(xué)習(xí)興趣;第三種方法是提高學(xué)生隨堂代碼練習(xí)的可運(yùn)行性，因?yàn)榧偃鐚W(xué)生不能夠成功執(zhí)行代碼，會(huì)失去對(duì)本門課程的興趣，因此在課堂上，老師把演示成功的代碼發(fā)放給學(xué)生，讓學(xué)生先可以直接成功運(yùn)行，然后在此代碼的基礎(chǔ)上，提出進(jìn)一步的任務(wù)，從而鍛煉學(xué)生的軟件開(kāi)發(fā)能力。

（三）充分利用網(wǎng)絡(luò)教學(xué)輔導(dǎo)平臺(tái)提高教和學(xué)的效率。

使用網(wǎng)絡(luò)化教學(xué)輔導(dǎo)平臺(tái)可以大大提高教和學(xué)的效率。第一，錄制完整的教學(xué)視頻并上傳到學(xué)習(xí)通平臺(tái)。在線視頻的優(yōu)點(diǎn)是可以讓學(xué)生在課前預(yù)習(xí)課后復(fù)習(xí)，并且反復(fù)重聽(tīng)課堂上沒(méi)有掌握的知識(shí)點(diǎn);第二，使用在線答疑，學(xué)生可以在學(xué)習(xí)通上留言、私信或者討論區(qū)把遇到的問(wèn)題發(fā)給老師，老師可以一一解答問(wèn)題，并且把學(xué)生遇到的常見(jiàn)問(wèn)題匯總在線發(fā)布并給出相對(duì)應(yīng)的解決方案;第三，點(diǎn)名可以通過(guò)APP手勢(shì)或者二維碼點(diǎn)名，從而可以避免學(xué)生之間相互代替簽名并且節(jié)約點(diǎn)名時(shí)間;第四，應(yīng)用超星平臺(tái)的在線作業(yè)功能布置在線作業(yè)，應(yīng)用自動(dòng)評(píng)分系統(tǒng)，提高作業(yè)評(píng)閱的效率，也方便學(xué)生及時(shí)發(fā)現(xiàn)和訂正錯(cuò)題;第五，開(kāi)設(shè)在線討論功能和在線投票功能，讓學(xué)生各抒己見(jiàn)并積極參與到一些技術(shù)問(wèn)題的討論中以及給課程提出一些問(wèn)題和建議;第六，建設(shè)完整的在線題庫(kù)，學(xué)生隨時(shí)通過(guò)自我測(cè)試評(píng)判對(duì)知識(shí)的掌握程度，并根據(jù)評(píng)判結(jié)果對(duì)掌握差的知識(shí)點(diǎn)進(jìn)行復(fù)習(xí)。

（四）改進(jìn)實(shí)驗(yàn)案例。

通過(guò)多年的教學(xué)實(shí)踐，發(fā)現(xiàn)實(shí)驗(yàn)案例越接近實(shí)際，學(xué)生會(huì)對(duì)實(shí)驗(yàn)越有興趣。網(wǎng)頁(yè)前臺(tái)設(shè)計(jì)包括多項(xiàng)技術(shù)，如CSS5、HTML5、JavaScript和UI設(shè)計(jì)等等。因此如何在實(shí)驗(yàn)中把眾多技術(shù)整合起來(lái)，而又突出所學(xué)知識(shí)點(diǎn)，同時(shí)使案例更加貼近實(shí)際是實(shí)驗(yàn)案例改進(jìn)的兩個(gè)主要方向，具體的改進(jìn)有如下三點(diǎn)：首先為每個(gè)實(shí)驗(yàn)設(shè)置具體的主題從而激發(fā)學(xué)生的興趣，比如第一個(gè)實(shí)驗(yàn)的主題設(shè)定為如何設(shè)計(jì)和開(kāi)發(fā)電商平臺(tái)的產(chǎn)品登陸頁(yè)面，參考國(guó)內(nèi)一些知名的電商網(wǎng)站，讓學(xué)生理解產(chǎn)品需要哪些功能和如何人性化;第二個(gè)實(shí)驗(yàn)主題設(shè)定為門戶網(wǎng)站的首頁(yè)，可以參考國(guó)內(nèi)各個(gè)高校的網(wǎng)站首頁(yè)并分析它們的異同。實(shí)驗(yàn)和現(xiàn)實(shí)結(jié)合讓學(xué)生感覺(jué)到每個(gè)實(shí)驗(yàn)的現(xiàn)實(shí)意義和通過(guò)實(shí)驗(yàn)理解如何用所學(xué)知識(shí)解決實(shí)際問(wèn)題;其次每個(gè)實(shí)驗(yàn)整合多項(xiàng)Web開(kāi)發(fā)技術(shù)，讓學(xué)生理解每項(xiàng)技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的作用，以及如何把這些技術(shù)整合起來(lái)。比如讓學(xué)生理解一個(gè)前臺(tái)購(gòu)物的實(shí)現(xiàn)包含UI設(shè)計(jì)，圖片設(shè)計(jì)，HTML5編寫，CSS3設(shè)計(jì)，最后通過(guò)JavaScript實(shí)現(xiàn)添加購(gòu)物車功能和使界面人性化;最后就是避免學(xué)生無(wú)法獨(dú)立完成實(shí)驗(yàn)。在以往的實(shí)驗(yàn)過(guò)程中，學(xué)生可能因?yàn)橛龅侥硞€(gè)問(wèn)題無(wú)法解決因此無(wú)法完成整個(gè)實(shí)驗(yàn)，為了讓學(xué)生能夠順利完成實(shí)驗(yàn)， 列出以往學(xué)生無(wú)法解決的問(wèn)題并給出相應(yīng)的解決方案，同時(shí)給出學(xué)生一個(gè)完整的代碼實(shí)現(xiàn)方案供學(xué)生參考。

三、結(jié)束語(yǔ)

本文根據(jù)上海立信會(huì)計(jì)金融學(xué)院信息管理學(xué)院2020年高地大一流本科建設(shè)對(duì)子項(xiàng)目的要求，并結(jié)合多年的動(dòng)態(tài)網(wǎng)站技術(shù)授課經(jīng)驗(yàn)，對(duì)動(dòng)態(tài)網(wǎng)站技術(shù)課程目前的狀況進(jìn)行了分析，并從教學(xué)和實(shí)驗(yàn)環(huán)節(jié)提出相應(yīng)的改進(jìn)方案。然而動(dòng)態(tài)網(wǎng)站技術(shù)課程隨著科技的發(fā)展而不斷更新，因此在后續(xù)的教學(xué)中還要建立一套反饋機(jī)制，可以實(shí)時(shí)監(jiān)控改進(jìn)后教和學(xué)的質(zhì)量，并根據(jù)反饋結(jié)果及時(shí)制定相應(yīng)的整改措施，從而不斷改進(jìn)教學(xué)質(zhì)量。

參考文獻(xiàn)：

[1]張霞，陳秀.地方應(yīng)用型本科高校高等數(shù)學(xué)課程教學(xué)改革的研究與實(shí)踐[J].中國(guó)大學(xué)教學(xué)，2009（8）：31-32.

[2]趙厚寶，付劍鋒，李琥.《高級(jí)語(yǔ)言程序設(shè)計(jì)》課程教學(xué)改革的研究[J].高教學(xué)刊，2020（9）：137-139.

[3]花紅民，堵國(guó)梁，朱為.動(dòng)態(tài)網(wǎng)站技術(shù)在“網(wǎng)絡(luò)課程”設(shè)計(jì)中的應(yīng)用[J].電氣電子教學(xué)學(xué)報(bào)，2004，26（2）：100-102.

[4]許廣林.“計(jì)算機(jī)網(wǎng)絡(luò)”課程教學(xué)改革探索[J].課程教育研究，2020（17）：1.