職業(yè)能力導(dǎo)向的JavaScript課程教學(xué)的探索

崔瑩

摘要：針對當(dāng)前高職院校計算機(jī)專業(yè)JavaScript課程標(biāo)準(zhǔn)存在的問題，筆者作為高職教育從業(yè)者結(jié)合目前行業(yè)現(xiàn)狀，按照1+X證書Web前端開發(fā)職業(yè)標(biāo)準(zhǔn)進(jìn)行項目化教學(xué)，同時再結(jié)合“E會學(xué)”MOOC和職教云平臺，實現(xiàn)線上線下混合式教學(xué)。本文試圖從課程內(nèi)容、核心能力分配、課程設(shè)計等方面，針對JavaScript課程進(jìn)行教學(xué)改進(jìn)方面的探索，以期能夠在改進(jìn)后的教學(xué)中提升學(xué)生的學(xué)習(xí)效果和實踐能力。

關(guān)鍵詞：1+X證書;職業(yè)能力;JavaScript課程;教學(xué)改革

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

文章編號：1009-3044（2021）11-0097-03

Exploration of JavaScript Teaching Based on Vocational Competence

CUI Ying

（Tongling vocational and Technical College， Tongling 244000， China）

Abstract： In view of the problems existing in the current JavaScript curriculum standard of computer major in higher vocational colleges， the author， as a higher vocational education practitioner， combines the current industry situation， carries out project-based teaching according to the 1+X certificate Web front-end development professional standard， and combines the "E-Learning" MOOC and vocational education cloud platform to realize online and offline hybrid teaching. This paper attempts to explore the teaching improvement of JavaScript course from the aspects of course content， core competence distribution and curriculum design， so as to enhance students' learning effect and practical ability in the improved teaching.

Key words： 1 + X certificate; professional ability; JavaScript course; teaching reform

1 引言

隨著互聯(lián)網(wǎng)進(jìn)入Web 2.0時代以后，應(yīng)用前端化趨勢表現(xiàn)得越來越明顯，各種Web應(yīng)用出現(xiàn)爆發(fā)式增長，最近幾年“UI設(shè)計”“Web前端”等人才的缺口最為突出。行業(yè)繁榮，市場上Web前端應(yīng)用人才崗位需求緊俏，對于高職計算機(jī)專業(yè)的學(xué)生來說，可以把Web前端開發(fā)維護(hù)作為一個不錯的就業(yè)規(guī)劃方向。

根據(jù)Web前端開發(fā)職業(yè)技能等級證書標(biāo)準(zhǔn)（初級和中級），按照知識要求和技能要求分類統(tǒng)計，該項職業(yè)技能的學(xué)習(xí)大致可分解成6門課程[2]：JavaScript，CSS，HTML，PHP（中級），MySQL（中級）和Bootstrap。對于Web前端工程師的職業(yè)需求來說，HTML、CSS、JavaScript都是基礎(chǔ)課程，其中最核心的是JavaScript，在Web前端教學(xué)內(nèi)容中JavaScript本身就應(yīng)作為核心課程重點(diǎn)投入。同時，當(dāng)前的Web前端技術(shù)發(fā)展中不斷涌現(xiàn)的新應(yīng)用技術(shù)和新框架技術(shù)，也對JavaScript課程的教學(xué)提出了更高的要求和挑戰(zhàn)。筆者作為一線的高職計算機(jī)教育從業(yè)者，面對不斷涌現(xiàn)的現(xiàn)行教學(xué)和市場需求的矛盾，有著比較直接的認(rèn)識和迫切的改革愿望。

2 JavaScript課程存在的問題

2.1內(nèi)容陳舊無新意

目前WEB前端技術(shù)教學(xué)在課程的設(shè)置上，HTML和CSS一般都設(shè)在同一門課程中，而JavaScript技術(shù)課程由于涉及的內(nèi)容較多，一般都須單獨(dú)開設(shè)一門課程。由于JavaScript課程的知識點(diǎn)較為零散、碎片化，各個單元間表面上看起來缺少內(nèi)部邏輯聯(lián)系， 況且市面上大多數(shù)該課程的教材在教學(xué)內(nèi)容上過于陳舊，和現(xiàn)在的市場職業(yè)素質(zhì)需求偏差較大。舉例來說：以往的許多教學(xué)重點(diǎn)內(nèi)容是集中在表單驗證部分和DOM元素、而對于Ajax，jQuery、JavaScript面向?qū)ο蠛驮玩湹葘嶋H應(yīng)用使用中頻率很高的知識重視不夠，使得學(xué)生在后續(xù)學(xué)習(xí)的時候會有種知識結(jié)構(gòu)銜接不上需重新充電的感覺。

2.2案例呆板缺實用性

高職院校的教學(xué)強(qiáng)調(diào)以培養(yǎng)高技能的技術(shù)人才為目標(biāo)，增強(qiáng)學(xué)生的動手實踐能力。大部分高職院校的《JavaScript前端開發(fā)》課程教學(xué)的內(nèi)容，大都不以解決實際問題為出發(fā)點(diǎn)，只是強(qiáng)調(diào)語法、甚至于編程等基礎(chǔ)理論知識，且內(nèi)容陳舊，與當(dāng)前發(fā)展出的新技術(shù)脫節(jié)。部分教材突出了實踐性，但是卻走向另一極端，過于淡化理論知識點(diǎn)，案例之間缺少內(nèi)部聯(lián)系，也容易讓學(xué)生不能理解概念、學(xué)完就忘。

在很多的教學(xué)過程中，使用案例陳舊缺少實用性和趣味性。學(xué)生對案例背后的知識點(diǎn)不能很快地記憶和理解，教學(xué)對應(yīng)用場景的還原度不好，學(xué)生學(xué)習(xí)體驗較差。

2.3 教學(xué)實踐性不足

和其他程序設(shè)計類課程一樣，JavaScript課程也存在著學(xué)生基礎(chǔ)程度不一，理論知識枯燥等教學(xué)難點(diǎn)。教學(xué)過程中教師的案例講解往往都是讓學(xué)生被動接受，而忽視了培養(yǎng)操作和實踐能力[5]，在教學(xué)過程中大多學(xué)生缺乏參與的主動性和積極性。而且由于學(xué)校機(jī)房環(huán)境的限制，一般做不到將所有的課程都安排在機(jī)房教學(xué)，所以必須借助于其他的方式來指導(dǎo)學(xué)生實踐。

3 教學(xué)改革思路

近年來，隨著Web開發(fā)的火熱，Web前端開發(fā)工程師也成為一個新興的熱門職業(yè)，人才需求還會持續(xù)增加。因此結(jié)合行業(yè)標(biāo)準(zhǔn)，對核心課程JavaScript進(jìn)行教學(xué)改革，以提高教學(xué)質(zhì)量，提升學(xué)生的專業(yè)能力是非常必要的。

3.1 教學(xué)內(nèi)容

筆者通過在合作企業(yè)的調(diào)研，分析了目前市場所需要的Web開發(fā)所需要的崗位和技能需求。課程根據(jù)這些需求，參照職業(yè)資格標(biāo)準(zhǔn)設(shè)置課程內(nèi)容，設(shè)計了電子商城項目內(nèi)容，所有的案例都圍繞這一主題展開。課程采用全項目式教學(xué)，通過項目生動得介紹了JavaScript語法基礎(chǔ)、內(nèi)置對象的使用、面向?qū)ο蠛驮玩?、DOM和BOM模型和Ajax、jQuery框架，并對Vue框架做簡要了解。通過課程的學(xué)習(xí)，使學(xué)生在腦子里對Web前端開發(fā)有一個直觀而又系統(tǒng)的、全面的構(gòu)架，掌握J(rèn)avaScript和jQuery基本知識和使用技巧，逐步掌握基本的應(yīng)用實現(xiàn)方法，達(dá)到能獨(dú)立設(shè)計和實施對Web應(yīng)用精細(xì)化處理增加體驗效果能力水平。

通過本課程的學(xué)習(xí)，主要達(dá)到傳授以下目標(biāo)。

1）知識目標(biāo)

（1）掌握J(rèn)avaScript基本結(jié)構(gòu)和語法。

（2）掌握數(shù)組、函數(shù)和事件處理。

（3）掌握常見內(nèi)置對象的使用。

（4）掌握面向?qū)ο蟮氖褂梅椒ā?/p>

（5）掌握DOM和BOM對象模型的應(yīng)用。

（6）掌握Ajax的一般使用過程。

（7）掌握jQuery框架的使用。

（8）了解VUE框架的原理（MVVM雙向數(shù)據(jù)綁定）。

2）能力目標(biāo)（參照Web前端開發(fā)職業(yè)技能等級證書標(biāo)準(zhǔn)[1]）

（1）能使用JavaScript開發(fā)交互效果頁面（效果實現(xiàn)）。

（2）能正確選擇數(shù)據(jù)類型、設(shè)置變量，能使用運(yùn)算等基礎(chǔ)語言和內(nèi)置函數(shù)實現(xiàn)數(shù)據(jù)交互。

（3）能正確使用JavaScript對象和DOM編程實現(xiàn)交互效果頁面。

（4）培養(yǎng)學(xué)生探索JavaScript前端新技術(shù)的興趣。

（5）能使用jQuery選擇器、jQuery中的DOM操作、滾動、圖表、布局、文字處理及UI等插件、jQuery事件和動畫等功能開發(fā)交互效果頁面。

（6）能使用JavaScript OOP、原型鏈、常用設(shè)計模式等原生的方式開發(fā)網(wǎng)頁。

（7）能熟練使用Ajax中的XML、JSON數(shù)據(jù)格式，與網(wǎng)站后端進(jìn)行數(shù)據(jù)交互。

（8）能使用Vue組件、工程化工具、路由、Vuex狀態(tài)管理。

3）素質(zhì)目標(biāo)

（1）能熟練使用JavaScript實現(xiàn)網(wǎng)頁特效。

（2）培養(yǎng)學(xué)生分析、解決實際問題的能力。

（3）培養(yǎng)學(xué)生探索JavaScript前端新技術(shù)的興趣。

3.2教學(xué)設(shè)計

1）教學(xué)準(zhǔn)備

在課堂的教學(xué)中，以項目驅(qū)動，基于工作任務(wù)的方式進(jìn)行。將案例分解成多個教學(xué)任務(wù)單元，每個教學(xué)單元嵌入若干知識點(diǎn)。課程的案例依賴于一個的電子商城案例，課程中的所有教學(xué)案例全部和此相關(guān)。設(shè)計出以下這些單元。

認(rèn)識JavaScript環(huán)境、判斷用戶輸入字符和判斷語句、焦點(diǎn)圖切換、函數(shù)、數(shù)組、事件、創(chuàng)建頁面時鐘——Date對象、頁面抽號碼——Math對象、購物車價格計算——認(rèn)識DOM、添加購物車頁面——DOM添加元素、tab選項卡切換—DOM修改屬性、BOM常用對象等、認(rèn)識jQuery選擇器、驗證用戶注冊表單——jQuery事件、購物車（面向?qū)ο螅┑取?/p>

通過一個具體的應(yīng)用場景，打造一個完整項目貫穿教學(xué)始終，把整個教學(xué)過程做成一個不斷提升項目特效的過程，通過任務(wù)驅(qū)動、多種教學(xué)手段綜合運(yùn)用的方式讓講解和練習(xí)相結(jié)合，提高教學(xué)效果。為了便于學(xué)生在課后能自行鞏固知識點(diǎn)，熟練掌握基本操作，教學(xué)團(tuán)隊繼續(xù)豐富課程的資源不斷充實教學(xué)。教學(xué)的視頻資源已經(jīng)上傳到”E會學(xué)”MOOC平臺建立的《JavaScript前端開發(fā)》課程中。主講教師通過共享資源、利用“智慧職教”云課堂平臺上傳課程、布置作業(yè)、舉辦考試，通過自建微信群回答學(xué)生的問題。滿足學(xué)生的課外學(xué)習(xí)需求。

2）教學(xué)實施

在課程的教學(xué)形式上，將借助于網(wǎng)絡(luò)平臺，采用線下線上混合教學(xué)的方式。課堂教學(xué)采用信息化教學(xué)方式，三段式教學(xué)——課前、課中、課后[4]。在課前，在職教云平臺發(fā)布課程的任務(wù)，教學(xué)的視頻資源已經(jīng)上傳到E會學(xué)MOOC平臺建立的《JavaScript前端開發(fā)》課程中。通過布置課前任務(wù)，提出問題，要求學(xué)生觀看和預(yù)習(xí)E會學(xué)課程內(nèi)容。

課中，教師利用思維導(dǎo)圖等工具，來整理任務(wù)思路和梳理知識點(diǎn)[3]。課程教學(xué)中，如果是理論課堂，則將以“實用”為主旨，按照項目化的任務(wù)對知識點(diǎn)進(jìn)行分解剖析，并進(jìn)行隨堂的分組討論。如果是實踐課堂，則要求分組進(jìn)行，按照任務(wù)要求，設(shè)計仿制相似的代碼。

以“購物車”單元價格計算為例，按照圖1先進(jìn)行任務(wù)的分解，將結(jié)算功能劃分成各個商品的小結(jié)價格匯總，再通過DOM查找對應(yīng)頁面節(jié)點(diǎn)獲取單價和數(shù)量，計算出單項商品價格。同時，對用戶的操作，增加，刪除商品，增加和減少商品的數(shù)量進(jìn)行處理，使得頁面產(chǎn)生實時的交互效果。進(jìn)階課程中還會加入用戶操作頁面的友好度增加和美化效果的實踐，讓課程更加貼近商業(yè)運(yùn)作實際場景。

課程教學(xué)采用講練結(jié)合，教學(xué)一體化，使學(xué)生在進(jìn)行單元任務(wù)的過程中，對知識點(diǎn)做到深刻理解，并能靈活運(yùn)用。

課后，教師通過職教云平臺進(jìn)行課程的來布置作業(yè)和進(jìn)行評審，及時對學(xué)生的學(xué)習(xí)情況進(jìn)行了解。

3）課程考核

借助于信息化教學(xué)平臺，對學(xué)生的學(xué)習(xí)狀態(tài)有了進(jìn)一步的了解。結(jié)合學(xué)生最終的綜合作業(yè)情況，能夠得出更符合真實水平的評價。

4 教學(xué)效果分析

從2020年春季學(xué)期的應(yīng)用效果來看，效果較好，共有2個班級的122人參與了《JavaScript前端開發(fā)》課程的教學(xué)評價?？傮w來說，有90%以上的同學(xué)對課程資源和教學(xué)活動表示滿意和認(rèn)可。從上學(xué)期考核成績來看，及格人數(shù)90.16%，學(xué)生的課程滿意度基本和考核結(jié)果一致，達(dá)到了課程開設(shè)的預(yù)計效果。

5 結(jié)束語

Web前端的不斷發(fā)展，對高職的JavaScript課程教學(xué)是一個挑戰(zhàn)，因為技術(shù)發(fā)展一直會領(lǐng)先于課堂教學(xué)。我們設(shè)想通過項目化工程化的教學(xué)方式，借助于信息化教學(xué)工具，線下線上的混合教學(xué)，來達(dá)到培養(yǎng)學(xué)生的自主學(xué)習(xí)能力，具備良好的職業(yè)能力和職業(yè)素養(yǎng)最終的目的。

參考文獻(xiàn)：

[1]? Web前端開發(fā)職業(yè)技能等級證書標(biāo)準(zhǔn)（2019版） ， 工業(yè)和信息化部教育與考試中心.

[2] 1+X證書Web前端開發(fā)中級對應(yīng)課程分析. https：//blog.csdn.net/weixin_43958049/article/details/103485856，2019，12，10.

[3] 于海英，張興華，王希斌.以職業(yè)需求導(dǎo)向的JavaScript課程教學(xué)改革探索[J].信息系統(tǒng)工程，2020（4）：158-159.

[4] 馬敏，肖玉.JavaScript課程在線教學(xué)設(shè)計與實踐[J].數(shù)字通信世界，2020（5）：239，265.

[5] 汪大顯.從JavaScript教學(xué)談學(xué)生自主編程能力的培養(yǎng)[J].電腦知識與技術(shù)，2020，16（2）：152-153，183.

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