JavaScript網頁編程課程“3智慧”教學實踐

趙敏之，王 敏，廖清遠

（湖南商務職業技術學院 商務信息技術學院，湖南 長沙 410205）

0 引 言

程序設計課程是高職IT類專業必修課，課程開設目標旨在培養學生求解問題的思路和方法，即算法能力。程序設計語言由一系列關鍵字和語法規則構成，抽象的語法、語義和內部運行機理使邏輯思維能力較弱的高職學生難以入門；傳統的“先上課，后上機”按部就班完成上機任務的教學模式更顯得枯燥乏味，學生長期處于“淺思考”甚至“不思考”狀態，動手能力和解決問題的能力難以提升。如何通過程序設計課程教學提高學生應用信息技術思考問題、解決問題的能力，并具有一定創新創造能力的智慧人才是高職人才培養的關鍵。計算思維是一種通過抽象和分解的方法，選擇合適的方式對問題進行建模，將復雜問題約簡，轉化成學生容易接受的思維模式的能力，是信息社會創新必須的思維方式[1]。但“思維不可見，思維難以教”卻成為培養的障礙。

通過構建智慧課堂，把教學關注點從“知識”轉移到“智慧”，教會高職學生怎樣思考，從而實現自主探究式學習，培養“不只會使用軟件，而是會利用軟件作為工具進行開發和創新”的智慧型人才是“3智慧”人才培養模式的內涵。其中“3智慧”有兩層含義：一是從構建智慧課堂到促進智慧生成，最后培養智慧人才的3個階段；二是“智慧人才”中的智慧包含學習智慧、協作智慧和創新智慧[2]。

有瀏覽器的地方就有JavaScript，全球最大求職引擎indeed.com公布的“2017年需求最高的編程語言”統計中JavaScript名列前三。無處不在的瀏覽器使JavaScript成為當下最熱門的Web開發語言。相對其他編程語言，JavaScript更直觀，編輯運行更方便。JavaScript這種可視化編程的特性對高職學生而言，是一種更容易接受的編程工具。

1 總體設計

1.1 學情分析

教育部《教育信息化“十三五”規劃》提出：應“深化信息技術與教育教學的融合發展，著力提升學生的信息素養、創新意識和創新能力，養成數字化學習習慣，促進學生的全面發展”[3]。在麥克思統計的2014屆畢業3年后月收入較高的主要高職高專專業中，軟件技術專業畢業生以平均月收入7 797元位居榜首。作為高職高專月收入最高的軟件技術專業對畢業生有更明確的要求——具備較強的編程能力和創新能力。另一方面，招收的學生與社會和企業的需求存在一定的差距。

JavaScript網頁編程課程是軟件技術專業第二學期開設的專業基礎課，是一門將抽象的編程邏輯和可視化網頁設計相融合的課程。第一學期已開設Java程序設計基礎和HTML&CSS網頁設計。通過前期的學習，能力強的學生已較好地掌握了相關知識，但一部分學生對于JavaScript的函數、數組等邏輯性較強的知識點還不能很好地理解和應用。

學生前期專業知識學習和學習心理的分析見表1。

1.2 內容分析

課程采用“知識講解+案例實踐”的方式進行教學安排。考慮到面向對象的概念對一年級學生來說還比較困難，且后續會有Java面向對象等課程專門講解，因此略去面向對象相關內容。講解內置對象知識點，并調整該節案例“制作年歷”為更能調動學生興趣的“猜數小游戲”。

“猜數小游戲”利用HTML、CSS設計網頁內容和樣式，根據輸入的數字利用分支結構進行判斷，給出不同的消息框。有效地串聯了網頁設計和編程的知識點，入手難度相對不大，可擴充完善的空間較大。游戲由簡入難分為5關，有利于學生鞏固已學知識，并能動手實踐，也有利于學有所長的學生進一步提升和拓展。

1.3 重點和難點分析

本案例要求學生綜合利用前面所學的JavaScript基本語法、函數和新知識點內置對象完成網頁制作。

重點是利用內置對象、函數實現網頁的基本功能交互，即產生隨機數à用戶輸入所猜的數字à判斷猜的數字與隨機數的大小à提示猜大了、猜小了或猜數正確。

難點為自主分析需求、自主設計并實現合理的拓展功能交互。

1.4 教學目標設定

通過對教學對象和教學內容的分析，確定本單元的知識與技能、過程和方法、情感與態度目標，見表2。

1.5 教學策略制訂

為了化解矛盾、突破重難點、達成目標，采用“3智慧”教學策略。

（1）呼云喚雨，構建智慧課堂；

（2）轉知為智，促進智慧生成；

（3）以生為本，培養智慧人才。

2 組織實施

2.1 教學手段運用

（1）通過藍墨云班課、傳智播客高校學習平臺、W3School在線學習網站等打造時時可學、處處能學的環境，拓展學習的時間和空間；

（2）利用思維導圖分析需求、理清思路，利用流程圖表現算法，實現思維可視化；

（3）利用可視化開發工具HBuilder將思維轉化為網頁作品，利用極域電子課堂了解學習情況，進行適時的廣播分享，實現師生思維碰撞，讓思維可見、可教。

表1 學情分析

表2 教學目標

2.2 教學環節設計

以猜數小游戲為主線貫穿課前感受游戲、課中設計游戲、課后優化游戲3個環節，培養學生的學習智慧、學科智慧（計算思維）和協作智慧。總體教學流程圖見圖1。

2.3 課堂實施

1）課前感受游戲。

課前感受游戲環節包含兩個任務：看游戲和析游戲。

看游戲：教師發布學習任務，要求學生觀看游戲視頻。對照視頻，分析游戲需求，并繪制初步的思維導圖和簡單的流程圖。

析游戲：學生分析游戲中用到的知識點，查看相關學習資源，并自主在網上搜索相關信息。根據分析，繪制流程圖或思維導圖，并在云班課“答疑/討論”活動中提出疑問或參與解答；教師根據學生的反饋調整任務單和其他資源。

2）課中設計游戲。

課中設計游戲環節對照軟件開發的流程分成5關，難度從低到高，學生在逐級挑戰的過程中充分調動原有思維經驗與知識基礎，經歷分析、構想、抉擇、發現、歸納，解決未知的問題。課中設計游戲環節思路和任務見表3。

第1關：需求分析。

動手寫代碼之前一定要先把思路理清，需求分析、概要設計優于編寫代碼。在強調需求分析的重要性時，有些學生還是不以為然。在教學中須通過重復的強調和訓練，讓學生逐步養成軟件工程的思想。

圖1 “猜數小游戲”總體教學流程圖

表3 “課中設計游戲”環節思路與任務

本關首先講解random()隨機數函數，要求學生比較round()、ceil()、floor()的用法；解答學生自主學習中的其他疑問。學生自主思考如何解決生成隨機數的問題；教師通過極域下發任務單，學生對思維導圖和流程圖進行細化，明確游戲需求，確定游戲的框架。

第2關：完成網頁基本功能交互。

建構主義認為，學習過程中學生應依靠已有的知識經驗和認知能力，通過新、舊知識之間的雙向相互作用，調整、改造原有經驗，形成新的經驗體系[4]。在本關中，學生寫出來的網頁程序可以自己玩，通過運用所學知識，在實踐過程中不斷發現問題，尋找解決途徑和方法。

考慮到學習基礎的差異性，應先準備一個簡單版和詳細版的任務單。學生如有需要，可參考詳細版中的步驟和代碼截圖，完成猜數小游戲網頁內容、樣式和基本功能的交互，這是本次課的教學重點。教師通過走動觀察和極域監控，及時發現問題并給予個別指導。第二關思維導圖見圖2。

第3關：完成網頁拓展功能交互。

從知識的掌握到能力的形成是存在鴻溝的，消除鴻溝的有效方法是問題解決[5]。通過讓學生親歷發現問題、界定與表征問題、問題解決過程才能更好地培養學生的思維能力。

本關要求學生自主地、個性化地在第二關基本功能的基礎上實現擴展，可能涉及顯示猜數次數、清空猜數文本框、當猜數次數超過指定數后能查看答案、美化頁面、擴展其他游戲功能等。教師通過走動觀察和極域監控，鼓勵學生自主思考，在適當情況下進行提問，予以點撥；對不同層次的學生提出差異化要求；收集并記錄學習過程中的典型問題。小組之間可適當討論，思維碰撞，發現更多可拓展的功能。

第4關：調試糾錯。

一個可交付的軟件產品一定是通過不斷出錯、不斷糾錯的過程逐步完善的。本關利用可視化工具的調試功能，讓學生從“出錯就懵”到“錯了就改”，再錯再改，不斷優化，從而讓學生養成細致、精益求精等良好的編程習慣，并要求學生記錄并整理程序中出現的錯誤提示和錯誤情況，作為小組展示時分享的素材。

第5關：歸納小結。

歸納是去情境化的過程，讓學生剝離實例學習運用的各種編程技巧和方法，通過類比的方法，將一個問題的解決方法遷移到另一個問題中，形成一種內在的思維能力[6]。

闖過游戲前四關，學生已初步形成了計算思維能力。在本環節中，要求以小組為單位匯總猜數小游戲網頁設計中遇到的問題，相互交流。對于集中突出的問題，教師進行簡要的點撥提示，學生課后自己查資料嘗試解決，同時選出小組最優的作品作為周末拓展的藍本。借助歸納、實踐，強化和鞏固學生的計算思維能力和學習智慧。

3）課后優化游戲。

課后優化環節在藍墨云班課發布游戲PK的活動，各小組互相比拼玩游戲，找Bug并進行投票評選。學生的角色在游戲開發者和游戲玩家之間轉換，通過游戲的測試，完成游戲優化，培養學生的協作能力，提高自學意識。

2.4 考核評價

本次課的考核評價綜合了線上和線下、教師評價和學生評價、基本考核和附加考核。

圖2 第2關網頁基本功能交互思維導圖

學生認真參與課前、課中、課后各環節的學習并闖過前2關，可以得到本次課總成績的80%；闖關通過所有5關或自主開發了游戲的學生可以得到滿分和額外的獎勵。

3 教學反思

3.1 設計反思

根據“3智慧”的教學策略，在智慧課堂環境下，將猜數小游戲貫穿教學環節，讓學生在身體力行的游戲、學習、互動中形成思維，理清思維，鞏固思維，沉淀思維，利用課前、課中、課后培養學生的智慧。

3.2 實施反思

在智慧課堂中，以學生為主體，讓學生從課上偶爾學、課后不想學到人人皆學、時時可學、處處能學；利用思維可視化，從零散的知識點學習到構建學生個人的思維體系；將游戲貫穿于教學中，讓學生從游戲的受害者變成游戲的受益者。

3.3 任務完成

在教學實施過程中，學生參與度高，學習自主性得到了提升，達到了預設的學習目標，學生對教師的教學方式也非常的認可。

3.4 問題及改進

從云班課中統計的教學數據來看，存在學習兩極分化的問題。通過及時了解分析教學數據，教師有針對性地干預和指導；另外，智慧課堂中不同的教學平臺存在數據難以收集的問題，擬通過構建智慧學習生態系統實現數據的整合。

4 結 語

愛因斯坦說：“當你把在學校所學的東西全部忘記之后，剩下的就是教育了。”教育的真諦在于將知識轉化為智慧。在JavaScript網頁編程和其他程序設計類課程教學實踐中，采用“3智慧”教學策略，將教學內容游戲化、學習思維可視化，學生學習興趣濃厚，在專業學習中獲得的成就感促進軟件技術專業學生更加積極、樂觀，具有良好的自我學習和再學習的能力，具備智慧人才的基本特征。