高職Web前端開發(fā)教學(xué)中的新教法研究

王婷婷

（鄭州電子信息職業(yè)技術(shù)學(xué)院，河南 鄭州 451450）

0 引 言

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

1 “減法”

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

1.1 Date 對象中的“減法”

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

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

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

圖1 時間板

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

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

圖2 圓表盤型動態(tài)時鐘

1.2 圖片切換中的“減法”

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

2 “錯誤演示法”

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

2.1 : first 與:first 的演示

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

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

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

2.3 網(wǎng)頁隨意存放的演示

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

3 “一題多解法”

高職院校以培養(yǎng)應(yīng)用型、技術(shù)型、實踐型人才為主，大學(xué)生在校期間的思維和創(chuàng)新能力，直接影響著個人今后的發(fā)展與前途?！耙活}多解法”即不同手段做出同一效果的方法，可以有效提高學(xué)生的創(chuàng)新能力。

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

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

4 結(jié) 論

以上三種方法為筆者在一線教學(xué)實踐中總結(jié)而成，其課堂中創(chuàng)新或升級案例代碼皆為筆者獨創(chuàng)?？偠灾?，教學(xué)法要結(jié)合高校校情，著眼于真實出現(xiàn)的問題。教學(xué)法的創(chuàng)新、優(yōu)化是永無止境的，如何貫徹新時代職教精神，遵從新時代職教理念，持續(xù)探究Web 前端開發(fā)教學(xué)法以推動職教高質(zhì)量發(fā)展是每一位一線教師終身研究的課題。