《動態網站技術》課程教學改革的研究

葉子豪 張曉嬌 許廣林

【摘要】動態網站技術是上海立信會計金融學院計算機科學與技術專業的一門必修課，本文首先分析了該課程教學的現狀，然后探索并嘗試從教學內容、教學環節、實踐環節、實驗案例和網絡教學平臺等方面進行改進，從而提高學生對本門課程的興趣和提升本門課程的教學效果和教學質量。

【關鍵詞】動態網站技術? 教學改革? 網絡化教學

【中圖分類號】G42 ? 【文獻標識碼】A 【文章編號】2095-3089（2021）34-0026-02

上海立信會計金融學院信息管理學院根據2020年高地大一流本科建設項目及學院人才培養實際需要，經學院教職工積極申報、院教學委員會審議等程序，對多個教學研究與改革項目予以立項作為二級子項目，《動態網站技術》被立項為院級優質在線課程。《動態網站技術》是信管學院計算機科學與技術高年級學生學習互聯網Web應用開發技術的一門專業課，是一門理論和實踐緊密結合的實用課程。主要講授Web前端開發技術，包括JavaScript語言、可擴展標記語言（Extensible Markup Language）技術、jQuery技術、AJAX技術及Node.js。通過本門課的學習使學生掌握設計和開發一個Web應用系統前端的基本原則、方法和步驟，使學生具有扎實的Web前端開發理論基礎、Web UI的設計能力和較強的動手開發能力。本文針對動態網站技術這門課，分析教與學的現狀，深入探索建立網絡信息平臺與軟件開發類課程融合機制，改進課程教學的各個環節，調動學生的學習積極性，全面提升教學效果和教學質量。

一、現狀分析

《動態網站技術》是計算機科學與技術專業的學科基礎平臺必修課，已經開設三年。前期所需基礎課程有《數據結構》和《高級程序設計》。本課程之所以安排在大二第一學期是因為它是后續的《響應式Web開發》和《JSP動態網站技術》等多門課程的基礎。該課程的學習目的是通過學習，使學生對JavaScript、jQuery和Ajax技術有一個全面的認識，熟練掌握相關的知識點，在Web設計中，能夠在前臺設計中靈活地運用這三種技術。

（一）教學方面

因為本專業還開設了基于JSP、ASP.NET和PHP等的一系列網站開發課程，因此《動態網站技術》更側重于Web前端的設計和開發，主要涉及的知識點有JavaScript的基本概念、基本語法及常用對象，DOM的處理和事件處理;jQuery的基本和高級過濾和選擇技術，使用jQuery的DOM操作在節點中添加、刪除或者更新內容，jQuery對表單和表格的操作，插件的調用，動畫設計和網頁嵌入式數據處理;Ajax部分包括了解Ajax的概況、Ajax工作原理和作用及Ajax的技術組成，掌握Ajax技術的編程結構和在實際的項目中應用Ajax技術。

作為一門程序開發類課程，目前教學方法主要是以通過PPT講解課程的基本知識點和原理，然后根據知識點和原理，設計一個小應用，隨后老師現場演示如何編寫代碼實現此小應用。老師在此應用的基礎上設計一個類似應用，讓學生根據老師的演示隨堂編寫代碼實現此應用。不足之處在于有少部分同學動手能力偏弱，在代碼編寫和調試過程中遇到問題，無法解決，就逐漸失去對本門課的興趣。還有部分同學動手能力很強，但是忽略了對知識點和原理性知識的掌握。

（二）實踐方面

為了讓學生能夠更好地對所學知識綜合應用和學會如何解決實際問題，本門課共設計了兩個實驗，第一個實驗基于JavaScript，第二個實驗基于jQuery。每個實驗都是把相對應一章的知識點進行了整合，通過完成實驗，學生可以更好地融會貫通本章學習的內容。實驗指導手冊給出實驗的目的，實驗的過程和樣板代碼，同學根據實驗指導手冊可以單獨完成每個實驗。存在的問題是實驗項目的主題比較單一，學生只知道實驗手冊編寫代碼和完成相應的功能，并不一定真正理解到底在解決什么實際問題。

（三）網絡教學輔助教學

現階段本門課使用了一些網絡輔助教學，比如在線和發放作業，電腦屏幕控制和電腦點名等。存在的問題是雖然在線收取作業但還需要人工評閱，機器點名無法避免替人簽到。網絡化的教學優勢沒有真正發揮出來。

二、教學的改革對策

本課程屬于開發類型的課程，實踐性非常強，無論是教學內容還是教學方式上都需要不斷的創新，讓學生產生濃厚的興趣，并應用本門課程所學知識去設計和開發網站前端。針對本校動態網站技術課程的現狀和高地大一流本科建設項目的要求，提出以下四點的改進方案。

（一）對教學大綱進行更新，增加一些流行的相關新技術。

JavaScript于2015年推出了新的ECMAScript 6標準，里面有大量新的內容，如引入Class概念，函數定義也不再使用關鍵字function，而是利用了=>來進行定義，在新的教學大綱中新增這部分內容。TypeScript是JavaScript 的一個超集，但是比JavaScript多了可選的靜態類型和基于類的面向對象，目前也是非常流行的一門開發語言，在新的教學大綱也適當加入這部分內容。現在網頁中存放臨時小量數據成為趨勢，相應增加jQuery對網頁嵌入式數據處理的課時。自從主流瀏覽器禁止安裝Flash插件以后，網頁動畫的實現更多基于jQuery和CSS3技術。這部分內容在實際中使用較多，并且因為交互性強更容易激發起學生的學習興趣，因此適當增加這一部分的內容和課時，適當增加jQuery Mobile方面的內容。

（二）改進授課方式和隨堂案例提高學生的興趣和參與度。

動態網站技術的實踐性強和理論性強是導致學生失去學習興趣的重要原因，對于這個問題，可以使用三種方法進行解決。第一種方法對于學習理論性知識使用對比法。因為學生在大一學過基于C++的面向對象開發，因此在講解類和函數定義這兩部分時，可以和C++進行比較來讓學生更加容易理解它們之間的差異;第二種解決方法是在案例代碼中增加各種特效，如發生某一個事件后網頁背景變色或者字體變大，通過這種特效吸引學生的注意力，激發學習興趣;第三種方法是提高學生隨堂代碼練習的可運行性，因為假如學生不能夠成功執行代碼，會失去對本門課程的興趣，因此在課堂上，老師把演示成功的代碼發放給學生，讓學生先可以直接成功運行，然后在此代碼的基礎上，提出進一步的任務，從而鍛煉學生的軟件開發能力。

（三）充分利用網絡教學輔導平臺提高教和學的效率。

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

（四）改進實驗案例。

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

三、結束語

本文根據上海立信會計金融學院信息管理學院2020年高地大一流本科建設對子項目的要求，并結合多年的動態網站技術授課經驗，對動態網站技術課程目前的狀況進行了分析，并從教學和實驗環節提出相應的改進方案。然而動態網站技術課程隨著科技的發展而不斷更新，因此在后續的教學中還要建立一套反饋機制，可以實時監控改進后教和學的質量，并根據反饋結果及時制定相應的整改措施，從而不斷改進教學質量。

參考文獻：

[1]張霞，陳秀.地方應用型本科高校高等數學課程教學改革的研究與實踐[J].中國大學教學，2009（8）：31-32.

[2]趙厚寶，付劍鋒，李琥.《高級語言程序設計》課程教學改革的研究[J].高教學刊，2020（9）：137-139.

[3]花紅民，堵國梁，朱為.動態網站技術在“網絡課程”設計中的應用[J].電氣電子教學學報，2004，26（2）：100-102.

[4]許廣林.“計算機網絡”課程教學改革探索[J].課程教育研究，2020（17）：1.