jQuery程序設(shè)計(jì)教學(xué)探討

盧守東 胡小春 高榮 徐輝

摘要：《jQuery程序設(shè)計(jì)》是一門具有較強(qiáng)綜合性與實(shí)踐性的課程，教學(xué)難度較大。文章主要結(jié)合具體的教學(xué)實(shí)踐，探討該課程的教學(xué)策略，包括整合內(nèi)容、實(shí)例講解、案例分析、強(qiáng)化實(shí)驗(yàn)、混合式教學(xué)與合理化考核，以提高其教學(xué)效果。

關(guān)鍵詞： jQuery;程序設(shè)計(jì);教學(xué)探討;Web前端;Web應(yīng)用

中圖分類號(hào)：G642? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）10-0148-02

1 引言

jQuery是一個(gè)快速、小巧、簡(jiǎn)潔且功能豐富JavaScript庫(kù)，也是目前Web前端開(kāi)發(fā)的熱門技術(shù)之一，其實(shí)際應(yīng)用亦十分廣泛[1]。為滿足社會(huì)的實(shí)際需求，并提高學(xué)生的專業(yè)技能與就業(yè)能力，多數(shù)高校的計(jì)算機(jī)、電子商務(wù)以及其他相關(guān)專業(yè)均開(kāi)設(shè)了《jQuery程序設(shè)計(jì)》或類似的jQuery課程，其目的主要就是讓學(xué)生掌握基于jQuery的Web應(yīng)用的前端設(shè)計(jì)技術(shù)，從而為日后的工作特別是動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)與開(kāi)發(fā)工作奠定良好的基礎(chǔ)。

作為一門課程，《jQuery程序設(shè)計(jì)》內(nèi)容豐富，應(yīng)用靈活，知識(shí)點(diǎn)多，涉及面廣，包括HTML、Ajax、Apache、PHP、jQuery及jQuery插件（含jQuery EasyUI） 等，具有較強(qiáng)的綜合性與實(shí)踐性，因此教學(xué)難度較大，教學(xué)效果往往也難盡人意。在此，將結(jié)合具體的教學(xué)實(shí)踐，探討該門課程的教學(xué)策略，供大家參考。

2 教學(xué)策略

2.1 整合內(nèi)容

以應(yīng)用為導(dǎo)向，以實(shí)用為原則，以能力提升為目標(biāo)，按照由淺入深、循序漸進(jìn)的原則，合理整合jQuery程序設(shè)計(jì)課程的教學(xué)內(nèi)容，將其分為jQuery概述、jQuery選擇器、jQuery元素操作、jQuery事件處理、jQuery表單操作、jQuery Ajax應(yīng)用、jQuery插件與jQuery應(yīng)用案例8個(gè)專題。

2.2 實(shí)例講解

在教學(xué)過(guò)程中，依托典型實(shí)例講解各個(gè)知識(shí)點(diǎn)或技能點(diǎn)， 以便于學(xué)生理解jQuery的各種應(yīng)用技術(shù)。例如，在第一次課jQuery概述專題中，通過(guò)在打開(kāi)頁(yè)面時(shí)自動(dòng)顯示一個(gè)“Hello，World！”對(duì)話框的實(shí)例，說(shuō)明測(cè)試jQuery正常與否的基本方法，以及jQuery程序的基本格式。又如，選擇器是jQuery十分重要的應(yīng)用基礎(chǔ)，種類繁多，易于混淆。不過(guò)，借助于一系列精心設(shè)計(jì)的既具體又相關(guān)的應(yīng)用實(shí)例，再通過(guò)適當(dāng)?shù)难菔九c講解，即可讓學(xué)生盡快掌握各種基本選擇器、層次選擇器、表單選擇器與過(guò)濾選擇器的基本用法，并掌握相互之間的區(qū)別。

2.3 案例分析

在課程的最后一個(gè)專題jQuery應(yīng)用案例中，采用案例教學(xué)法[2]，結(jié)合一個(gè)完整的具體案例進(jìn)行深入分析、演示講解，讓學(xué)生了解jQuery各種技術(shù)的綜合應(yīng)用，達(dá)到融會(huì)貫通的目的。當(dāng)然，所選案例應(yīng)盡量兼顧此前各個(gè)專題的教學(xué)內(nèi)容，且不宜過(guò)于復(fù)雜，以便于學(xué)生的理解與掌握。例如，以圖片類網(wǎng)站“網(wǎng)上圖庫(kù)”的主頁(yè)為案例，先明確其總體的設(shè)計(jì)要求，即簡(jiǎn)潔美觀、主題鮮明、導(dǎo)航清晰、操作簡(jiǎn)便，能動(dòng)態(tài)展示站點(diǎn)內(nèi)當(dāng)前的熱門圖片與推薦圖片，以提高網(wǎng)站的吸引力。然后完成其布局設(shè)計(jì)，將頁(yè)面大致分為導(dǎo)航菜單（含網(wǎng)站logo圖片） 、圖片輪播、圖片展示與頁(yè)腳信息四個(gè)區(qū)域與一個(gè)浮動(dòng)窗口。接著，搭建相應(yīng)的開(kāi)發(fā)環(huán)境（包括用于支持PHP的XAMPP的安裝與配置） ，并逐一實(shí)現(xiàn)主頁(yè)中各個(gè)區(qū)域與浮動(dòng)窗口的功能與效果。在此案例中，為確保網(wǎng)站首頁(yè)具有良好的可擴(kuò)展性與可維護(hù)性，遵循了模塊化設(shè)計(jì)的思想與原則[1]，這對(duì)于學(xué)生日后具體應(yīng)用的設(shè)計(jì)與實(shí)現(xiàn)是極具指導(dǎo)作用的。

2.4 強(qiáng)化實(shí)驗(yàn)

“實(shí)踐出真知”，在教學(xué)過(guò)程中要切實(shí)加強(qiáng)實(shí)驗(yàn)環(huán)節(jié)，讓學(xué)生通過(guò)具體實(shí)驗(yàn)理解并掌握有關(guān)應(yīng)用技術(shù)，逐步提高其應(yīng)用技能，從而達(dá)到學(xué)以致用的目標(biāo)。在本課程中，與教學(xué)的專題內(nèi)容相對(duì)應(yīng)，共安排了8個(gè)同步實(shí)驗(yàn)，包括jQuery程序的設(shè)計(jì)、jQuery選擇器的使用、jQuery的元素操作、jQuery的事件處理、jQuery的表單操作、jQuery的Ajax應(yīng)用、jQuery插件的使用與網(wǎng)站首頁(yè)的設(shè)計(jì)，并采用任務(wù)驅(qū)動(dòng)法加以實(shí)施[3]。為確保實(shí)驗(yàn)效果，同時(shí)培養(yǎng)學(xué)生的團(tuán)隊(duì)精神與協(xié)作意識(shí)，允許學(xué)生自由組合，以小組方式協(xié)同完成實(shí)驗(yàn)任務(wù)（每個(gè)小組最多不超過(guò)3人，在第一次實(shí)驗(yàn)時(shí)確定，此后不再調(diào)整） 。完成實(shí)驗(yàn)后，還要按規(guī)范撰寫實(shí)驗(yàn)報(bào)告，并及時(shí)提交。教師方面，則要認(rèn)真做好各個(gè)實(shí)驗(yàn)的指導(dǎo)、檢查與講評(píng)工作，以進(jìn)一步鞏固實(shí)驗(yàn)效果。

2.5 混合式教學(xué)

線上線下混合式教學(xué)是一種行之有效的教學(xué)模式[4]，可通過(guò)教學(xué)平臺(tái)與線上課程有效地拓展教學(xué)的時(shí)間與空間，從而提升課程的教學(xué)效果。

本文以中國(guó)大學(xué)MOOC平臺(tái)為依托，在引用源課程部分教學(xué)視頻的基礎(chǔ)上，根據(jù)教學(xué)目標(biāo)自行添加了相應(yīng)的教學(xué)內(nèi)容，從而成功構(gòu)建了一門異步SPOC課程《jQuery及jQuery EasyUI》（https：//www.icourse163.org/spoc/course/GXCJ-1451655212） 。為便于教學(xué)的組織與實(shí)施，并遵循循序漸進(jìn)、有效教學(xué)的基本原則，該課程將教學(xué)內(nèi)容合理地劃分為四個(gè)部分（即第一部分的jQuery入門篇、第二部分的jQuery提高篇、第三部分的jQuery進(jìn)階篇與第四部分的jQuery插件篇） ，每個(gè)部分又包含若干個(gè)教學(xué)單元、作業(yè)與測(cè)驗(yàn)，而每個(gè)教學(xué)單元又包含一系列相應(yīng)的教學(xué)視頻、討論主題與實(shí)驗(yàn)文檔。此外，課程最后還安排有期末考試（包括客觀題與主觀題兩個(gè)部分） 。

在具體教學(xué)過(guò)程中，線上課程各部分的教學(xué)內(nèi)容以及相關(guān)的學(xué)習(xí)任務(wù)均按照線下授課計(jì)劃在適當(dāng)?shù)臅r(shí)間提前發(fā)布，并以公告的形式告知學(xué)生，以便提醒學(xué)生及時(shí)觀看有關(guān)的教學(xué)視頻，并在討論區(qū)中對(duì)課程中的各個(gè)討論主題進(jìn)行自由討論，同時(shí)認(rèn)真完成其他有關(guān)的學(xué)習(xí)任務(wù)，如作業(yè)、測(cè)驗(yàn)、考試等。

此外，在具體的教學(xué)過(guò)程中，還要注重學(xué)習(xí)任務(wù)與教學(xué)活動(dòng)的設(shè)計(jì)與實(shí)施。對(duì)于每次課的備課工作，均借助中國(guó)大學(xué)MOOC平臺(tái)所提供的慕課堂提前完成，包括公告的創(chuàng)建、練習(xí)及練習(xí)庫(kù)的創(chuàng)建等。而在每次課的授課過(guò)程中，則通過(guò)在慕課堂內(nèi)適時(shí)發(fā)布公告、簽到、練習(xí)等，積極開(kāi)展課堂活動(dòng)，以明確教學(xué)目標(biāo)與任務(wù)，并督促學(xué)生認(rèn)真學(xué)習(xí)、加強(qiáng)交流。

基于MOOC平臺(tái)的異步SPOC課程可全程記錄和跟蹤教師的教學(xué)過(guò)程與學(xué)生的學(xué)習(xí)過(guò)程，有利于實(shí)現(xiàn)線上教學(xué)與線下教學(xué)的有機(jī)融合，并促進(jìn)學(xué)生的自主性學(xué)習(xí)與過(guò)程性學(xué)習(xí)。

2.6 合理化考核

為有效促進(jìn)學(xué)生的自主學(xué)習(xí)，引導(dǎo)學(xué)生注重學(xué)習(xí)的過(guò)程與效果，課程的考核堅(jiān)持過(guò)程性評(píng)價(jià)與終結(jié)性評(píng)價(jià)相結(jié)合的基本原則。在異步SPOC課程《jQuery及jQuery EasyUI》的首次應(yīng)用中，考慮到教學(xué)的實(shí)際情況，課程的考核方案為：期評(píng)成績(jī)=平時(shí)成績(jī)×30%+期考成績(jī)×70%=（線上平時(shí)成績(jī)×20%+線下平時(shí)成績(jī)×80%）×30%+期考成績(jī)×70%。其中，學(xué)生的線上平時(shí)成績(jī)根據(jù)學(xué)生線上的單元作業(yè)、單元測(cè)驗(yàn)、課程討論與期末考試情況等按統(tǒng)一設(shè)定的標(biāo)準(zhǔn)與比例由教學(xué)平臺(tái)自動(dòng)進(jìn)行計(jì)算，學(xué)生的線下平時(shí)成績(jī)根據(jù)學(xué)生線下的考勤記錄、實(shí)驗(yàn)情況等綜合評(píng)定。至于期考，則以開(kāi)卷考試的形式進(jìn)行，題型主要為簡(jiǎn)答題、分析題、操作題、程序填空題與程序設(shè)計(jì)題，以重點(diǎn)考核學(xué)生的jQuery分析與應(yīng)用能力。

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

《jQuery程序設(shè)計(jì)》是一門講究理解、注重應(yīng)用的課程，在教學(xué)過(guò)程中，應(yīng)注意采取正確的教學(xué)策略，并根據(jù)實(shí)際情況進(jìn)行相應(yīng)的調(diào)整，以進(jìn)一步提高其教學(xué)效果，并順利達(dá)成其教學(xué)目標(biāo)。

參考文獻(xiàn)：

[1] 盧守東.jQuery程序設(shè)計(jì)實(shí)例教程[M].北京：清華大學(xué)出版社，2021.

[2] 鄭淑芬.案例教學(xué)法的作用、實(shí)施環(huán)節(jié)及需要注意的問(wèn)題[J].教育探索，2008（4）：56-57.

[3] 馮林，鄭薇薇.“任務(wù)驅(qū)動(dòng)”與“項(xiàng)目驅(qū)動(dòng)”相結(jié)合的創(chuàng)新教育研究[J].黑龍江教育（高教研究與評(píng)估），2010（4）：57-59.

[4] 劉國(guó)芳，鄧亞莉.“金課”背景下線上線下混合教學(xué)模式研究——以《Web前端設(shè)計(jì)與開(kāi)發(fā)》課程為例[J].電腦知識(shí)與技術(shù)，2021，17（1）：111-112.

【通聯(lián)編輯：王力】

收稿日期：2021-06-10

基金項(xiàng)目：廣西財(cái)經(jīng)學(xué)院教育教學(xué)改革工程項(xiàng)目（2021JG04） ;廣西高等教育本科教學(xué)改革工程項(xiàng)目（2020JGB344）

作者簡(jiǎn)介：盧守東（1969—） ，男，廣西岑溪人，高級(jí)工程師，主要研究方向?yàn)閿?shù)據(jù)挖掘、圖像加密、Web服務(wù)與云計(jì)算等;胡小春（1974—） ，男，廣西桂林人，副教授，主要研究方向?yàn)閰^(qū)塊鏈、數(shù)據(jù)分析、計(jì)算機(jī)應(yīng)用教學(xué);高榮（1979—） ，男，山東濰坊人，講師，主要研究方向?yàn)閿?shù)據(jù)挖掘、人工智能;徐輝（1965—） ，男，廣西博白人，副教授，主要研究方向?yàn)闄C(jī)器學(xué)習(xí)、數(shù)據(jù)挖掘。