高職Web前端開發教學中的新教法研究

王婷婷

（鄭州電子信息職業技術學院，河南 鄭州 451450）

0 引 言

近2021年10月，中共中央辦公廳、國務院辦公廳印發了《關于推動現代職業教育高質量發展的意見》，為貫徹落實全國職業教育大會精神，推動現代職業教育高質量發展，特別提出要深化教育教學改革，創新教學模式與方法。職業院校課程體系的建設要注意明確目標，精準定位；去重去冗，突出重點；靈活學制，拓展技能；調研論證，構建課程。筆者在高職Web 前端開發系列課程教學實踐中，以“JavaScript+jQuery”課程為例，對其新教學法進行了探究。

1 “減法”

“減法”即在教學中，適當刪減原計劃教學內容，但仍不影響教學目標的達成，反而因給學生騰出自我創新和獨立探索的留白空間而達到事半功倍教學效果的方法。其背后的內在邏輯在于職教實踐重于理論的特點，在于職教學生本身基礎弱、學習興趣不濃厚、自制力弱，依賴性強的特點，在于教學方法應多啟發少填鴨的特點。

1.1 Date 對象中的“減法”

JavaScript（以下簡稱JS）對象中的Date 對象用來處理日期和時間，可以做出網頁上常見的電子日歷板、時鐘、秒殺活動中的倒計時等效果。此知識點需學生掌握Date 對象的使用，下面我們通過具體代碼演示該知識點由淺至深的方法講解：

獲取日期對象后直接輸出，可以得到星期幾年月日時分秒等信息。獲得信息全面，若想形成其他輸出形式，可以配上定時器和調用日期對象的get 方法進行升級。

升級后的案例2（CSS 樣式代碼省略）呈現效果如圖1所示。通過innerHTML 的方式進行輸出，不僅達到了案例1 的效果，在switch 語句和if 語句的輔助下形成了我們想要的年月日星期幾和時間的排列效果，而且在定時器每隔1s的調用下，實現了實時動態的時間，使得網頁交互和用戶體驗明顯提升。

圖1 時間板

效果雖好，但從案例2 的代碼中不難推測，老師在現場演示代碼時費時費力，像第5—12 行獲取日期和時間、整個switch 語句和第22—24 行“字符串+變量”形式的輸出語句。太長的演示時間會引起學生跑神兒、注意力不集中，乏力等現象，所以教學內容需做適當“減法”。

升級后的案例3（CSS 樣式代碼省略）呈現效果如圖2所示。通過對教學內容做“減法”，本節知識點同樣得到了鍛煉，課上演示時間明顯縮短，展示的時鐘效果更貼近生活，其他年月日星期幾的知識點留給同學們繼續創新新案例反而更好鍛煉學生的實操能力和解決問題的能力。

圖2 圓表盤型動態時鐘

1.2 圖片切換中的“減法”

圖片切換與輪播圖類似，效果呈現一般包含3 部分及3塊功能的實現：多張圖片、下方小圓點和左右兩箭頭，打開瀏覽器時在定時器的作用下圖片自動切換，鼠標指針經過小圓點時對應圖片出現（類似上一章節選項卡功能的實現），點擊左右箭頭對應圖片左右切換（重復自動切換功能的實現）。該課時安排通常為理論2 課時，實操2 課時。課堂現場演示從布局到CSS 樣式到JS、jQuery 的融入任務非常繁重，這時教學內容做“減法”就格外重要，原本的3 個部分在課堂演示時減為2 個，左右箭頭功能的實現留給學生課下探索，一方面探索如何通過定位將兩個箭頭固定到相應位置，一方面鞏固addClass()、siblings()、removeClass()、eq()、show()、hide()等知識點。

2 “錯誤演示法”

“錯誤演示法”即反向演示法，在教學中反復演示易錯點、典型錯誤點以加深對知識點的印象和認識的方法。這種方法改變了傳統教學中從已知去探尋結果的過程，有助于學生加深對所學知識的理解和掌握。比如1+X 證書制度Web前端開發的實操考試是上機考試，重點考查關鍵代碼的書寫，JS 代碼有嚴格區分大小寫，對空格、換行、縮進不敏感，運算符前后加空格等語法規則，任何小差錯都會引起程序出錯。那么避免出錯的一個好方法就是“錯誤演示法”，通過程序不斷報錯，師生不斷訂錯，做到在錯誤中真正習得。

2.1 : first 與:first 的演示

在jQuery 選擇器的講解中，篩選選擇器:first，指獲取第一個li 元素，用法為$("li:first")，是必學必考知識點。課上演示時故意寫成: first 引起程序出錯，加深學生對偽類選擇器的掌握，讓其明白冒號與后面單詞中間不能有空格。

2.2 id='demo'與id="demo"的演示

id 屬性可以在頁面中任何位置使用，其屬性值demo為HTML 元素指定唯一標識符。JavaScript+jQuery 是在HTML+CSS 的基礎上進行學習，如果因為種種原因某學生基礎沒打好，即使id 命名是簡單易懂知識點，在JS 的學習中用到id 名時該生照樣會因不正確使用而引起程序報錯。所以課堂采用id='demo'的錯誤演示能使學生牢記id 的命名必須為雙引號。

2.3 網頁隨意存放的演示

在Web 前端開發教學中，開發工具使用HBuilder，該編輯器創建一個新項目會自動生成css、img、js 三個文件夾和index.html。顧名思義，css 文件夾里存放css 文件，img文件夾里存放圖片或音視頻，js 文件夾里存放js 文件，新建網頁與index頁成并列狀態。但在實操練習中經常發現學生隨意存放新建頁現象，比如在js 文件夾中創建新網頁，結果會導致網頁中img 標簽的相對路徑出現差錯。所以課堂上通過隨意存放網頁的錯誤演示對易錯點進行深刻糾正。

3 “一題多解法”

高職院校以培養應用型、技術型、實踐型人才為主，大學生在校期間的思維和創新能力，直接影響著個人今后的發展與前途。“一題多解法”即不同手段做出同一效果的方法，可以有效提高學生的創新能力。

“案例”下拉菜單，可以是鼠標指針經過一級菜單時，顯示當前下拉框的內容并隱藏其他下拉菜單內容，也可以變換成鼠標指針點擊一級菜單時，顯示當前下拉框的內容并隱藏其他下拉菜單內容；可以是JS 方法也可以jQuery 方法。方法靈活多變，下面我們通過具體代碼演示4 種不同做“案例”下拉菜單的方法（其中CSS 樣式代碼省略）。

四種方法布局一致，呈現效果一致，但代碼各異。方法一為純JS 代碼，需先獲取ul 和li 元素，通過for 語句做遍歷，再配合children[]方法和display 屬性使用鼠標指針移入移出事件來完成。方法二通過jQuery 實現，此時onmouseover,onmouseout 變為mouseover(),mouseout()，顯示隱藏效果變為show()和hide()，children[]變為children()。jQuery 提供了hover()方法，可以直接替代鼠標指針移入和移出事件，且方法三中jQuery 動畫效果變為了slideDown()和slideUp()，即添加滑動效果。方法四變為鼠標點擊事件，融入siblings()方法，并使用slideToggle()來切換元素的動畫效果。

4 結 論

以上三種方法為筆者在一線教學實踐中總結而成，其課堂中創新或升級案例代碼皆為筆者獨創。總而言之，教學法要結合高校校情，著眼于真實出現的問題。教學法的創新、優化是永無止境的，如何貫徹新時代職教精神，遵從新時代職教理念，持續探究Web 前端開發教學法以推動職教高質量發展是每一位一線教師終身研究的課題。