職業能力導向的JavaScript課程教學的探索

崔瑩

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

關鍵詞：1+X證書;職業能力;JavaScript課程;教學改革

中圖分類號：G642? ? ? ? 文獻標識碼：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 引言

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

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

2 JavaScript課程存在的問題

2.1內容陳舊無新意

目前WEB前端技術教學在課程的設置上，HTML和CSS一般都設在同一門課程中，而JavaScript技術課程由于涉及的內容較多，一般都須單獨開設一門課程。由于JavaScript課程的知識點較為零散、碎片化，各個單元間表面上看起來缺少內部邏輯聯系， 況且市面上大多數該課程的教材在教學內容上過于陳舊，和現在的市場職業素質需求偏差較大。舉例來說：以往的許多教學重點內容是集中在表單驗證部分和DOM元素、而對于Ajax，jQuery、JavaScript面向對象和原型鏈等實際應用使用中頻率很高的知識重視不夠，使得學生在后續學習的時候會有種知識結構銜接不上需重新充電的感覺。

2.2案例呆板缺實用性

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

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

2.3 教學實踐性不足

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

3 教學改革思路

近年來，隨著Web開發的火熱，Web前端開發工程師也成為一個新興的熱門職業，人才需求還會持續增加。因此結合行業標準，對核心課程JavaScript進行教學改革，以提高教學質量，提升學生的專業能力是非常必要的。

3.1 教學內容

筆者通過在合作企業的調研，分析了目前市場所需要的Web開發所需要的崗位和技能需求。課程根據這些需求，參照職業資格標準設置課程內容，設計了電子商城項目內容，所有的案例都圍繞這一主題展開。課程采用全項目式教學，通過項目生動得介紹了JavaScript語法基礎、內置對象的使用、面向對象和原型鏈、DOM和BOM模型和Ajax、jQuery框架，并對Vue框架做簡要了解。通過課程的學習，使學生在腦子里對Web前端開發有一個直觀而又系統的、全面的構架，掌握JavaScript和jQuery基本知識和使用技巧，逐步掌握基本的應用實現方法，達到能獨立設計和實施對Web應用精細化處理增加體驗效果能力水平。

通過本課程的學習，主要達到傳授以下目標。

1）知識目標

（1）掌握JavaScript基本結構和語法。

（2）掌握數組、函數和事件處理。

（3）掌握常見內置對象的使用。

（4）掌握面向對象的使用方法。

（5）掌握DOM和BOM對象模型的應用。

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

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

（8）了解VUE框架的原理（MVVM雙向數據綁定）。

2）能力目標（參照Web前端開發職業技能等級證書標準[1]）

（1）能使用JavaScript開發交互效果頁面（效果實現）。

（2）能正確選擇數據類型、設置變量，能使用運算等基礎語言和內置函數實現數據交互。

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

（4）培養學生探索JavaScript前端新技術的興趣。

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

（6）能使用JavaScript OOP、原型鏈、常用設計模式等原生的方式開發網頁。

（7）能熟練使用Ajax中的XML、JSON數據格式，與網站后端進行數據交互。

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

3）素質目標

（1）能熟練使用JavaScript實現網頁特效。

（2）培養學生分析、解決實際問題的能力。

（3）培養學生探索JavaScript前端新技術的興趣。

3.2教學設計

1）教學準備

在課堂的教學中，以項目驅動，基于工作任務的方式進行。將案例分解成多個教學任務單元，每個教學單元嵌入若干知識點。課程的案例依賴于一個的電子商城案例，課程中的所有教學案例全部和此相關。設計出以下這些單元。

認識JavaScript環境、判斷用戶輸入字符和判斷語句、焦點圖切換、函數、數組、事件、創建頁面時鐘——Date對象、頁面抽號碼——Math對象、購物車價格計算——認識DOM、添加購物車頁面——DOM添加元素、tab選項卡切換—DOM修改屬性、BOM常用對象等、認識jQuery選擇器、驗證用戶注冊表單——jQuery事件、購物車（面向對象）等。

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

2）教學實施

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

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

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

課程教學采用講練結合，教學一體化，使學生在進行單元任務的過程中，對知識點做到深刻理解，并能靈活運用。

課后，教師通過職教云平臺進行課程的來布置作業和進行評審，及時對學生的學習情況進行了解。

3）課程考核

借助于信息化教學平臺，對學生的學習狀態有了進一步的了解。結合學生最終的綜合作業情況，能夠得出更符合真實水平的評價。

4 教學效果分析

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

5 結束語

Web前端的不斷發展，對高職的JavaScript課程教學是一個挑戰，因為技術發展一直會領先于課堂教學。我們設想通過項目化工程化的教學方式，借助于信息化教學工具，線下線上的混合教學，來達到培養學生的自主學習能力，具備良好的職業能力和職業素養最終的目的。

參考文獻：

[1]? Web前端開發職業技能等級證書標準（2019版） ， 工業和信息化部教育與考試中心.

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

[3] 于海英，張興華，王希斌.以職業需求導向的JavaScript課程教學改革探索[J].信息系統工程，2020（4）：158-159.

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

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

【通聯編輯：王力】