基于計算思維的Javascript案例教學研究

馬 敏 賈 露 柯 維

(湖北廣播電視大學 軟件工程學院，湖北 武漢 430074)

一、引言

2006年周以真教授首先提出了計算思維的概念。他指出計算思維是一個形成問題和制定問題解決方案的思考過程，這些解決方案所采用的形式是一種能夠通過信息加工代理有效執行的表達形式[1]。后來一些學者將其簡化為“問題分解、算法、抽象和自動化”。[2]

計算思維不僅要求學生掌握編程語言、編程思想，更要教會學生利用計算機學科獨特的思維方式，獲得創新性地解決實際問題的能力。現階段高職院校計算機相關課程仍以培養計算機操作技能為主，對于培養學生的計算思維關注不夠。課堂教學實踐中教師先講授知識點，然后講解例題，學生以教師的例題為模板，再依葫蘆畫瓢一遍，缺乏分析問題、分解抽象化問題的思維過程，問題的解決也是依靠教師的指導。而IT行業非常重視獨立思考、舉一反三，解決復雜問題、新問題的能力，因此目前的培養方式與企業行業的要求是脫節的。如何在計算機專業課程中踐行計算思維，提高學生利用計算機專業知識和技能解決實際問題的能力是目前亟需解決的問題。通過對國內外相關研究的梳理發現，基于問題解決理念、可視化理念的教學策略是對計算思維培養較為有效的宏觀教學策略[3]。而JavaScript作為軟件技術專業的核心編程語言課程，實踐性很強，直觀性、互動性較好，非常適合作為計算思維培養的試點課程。

二、Javascript案例課程現狀

(一)重視學生知識技能和操作技能，欠缺計算思維的培養

目前高職院校重視學生的實際操作能力，缺乏有意識地鍛煉學生獨立自主地利用計算機專業知識解決實際問題的能力，教師沒有有意識地將計算思維的培養與專業教學結合起來。如果不重視學生計算思維的培養， 從了解編程到實際應用就是分離的、割裂的。

(二)課程現有案例和配套習題無法滿足職業崗位需求

在課堂教學中教師按照教材章節順序組織和設計教學，配套的案例或習題隸屬于獨立的章節。由于每個章節的知識點相對獨立，配套的習題往往只覆蓋本章的內容，前后知識的連貫性無法在章節案例或者習題中體現，不利于學生真正掌握Javascript編程技能。

(三)現有教學案例脫離實戰

Javascript課程教學方式以邊學邊練為主，教師先講解理論知識，針對某個知識點進行案例演示，然后帶領學生實際操作。這種教學方式有利于學生理解抽象的編程知識，但是現有的教學案例脫離實戰，缺乏趣味性，無法充分調動學生的學習積極性。例如DOM查找元素的案例，通常是寫一個簡單的網頁，再通過Javascript改變對象屬性等。學生參與意愿不高，課堂氣氛不活躍。

三、以計算思維為導向的Javascript教學案例設計

(一)總體目標

針對目前Javascript課程教學中重技能培養輕問題解決能力培養的問題，將提升學生計算思維能力作為課程的主要目標，通過優化教學案例，將計算思維融入Javascript課堂教學[4-5]。教學設計以提升計算思維為指引，通過實際項目案例和可視化教學策略，指導學生在完成案例項目的過程中深入掌握問題分解、算法、抽象和自動化的流程，幫助學生掌握用計算思維解決問題的方法，同時通過自動化測試的教學案例帶領學生體驗實際的研發項目。

(二)設計思路

國內外實踐研究表明，培養計算思維行之有效的方法主要有兩個，一個是基于問題解決理念，另一個是可視化理念的教學策略。基于問題解決理念是指以實際問題或者實際項目作為教學案例的素材，通過合理裁剪與設計，承載教學知識點，讓學生在完成案例項目的過程中實踐計算思維的方法與工具，在此基礎上實現學生思維能力的培養。可視化具有直觀性，有利于學生深入理解抽象艱澀的理論和復雜的實際問題，快速驗證思路和方案的正確性。

因此在Javascript教學中要將基于問題解決和可視化理念與編程技能培養有機地結合起來，將計算思維融入課堂教學。通過自動化測試的項目，鍛煉學生的計算思維并提升編程能力。為實現此目標，要求教師合理設計自動化測試用例，將項目需求與Javascript知識點對接起來，在實操過程中引導學生利用計算思維的方法去分析問題，并在此基礎上解決問題。

Web自動化測試作為業內公司研發流程中重要的一環，越來越受到行業內的重視。自動化測試不僅有嚴格的理論知識基礎作為指引，而且有大量豐富的編程實戰案例，很多自動化測試案例都能夠用來作為提升計算思維的優良素材。以往學生通過開發一個網頁來實踐Javascript，往往由于html基礎薄弱影響了任務的實現。學生的精力大量花費在編寫靜態網頁上，沒有聚焦到Javascript的知識點的思考與應用上。如果采用web自動化測試，由于被測對象已經開發完成，學生只需要編寫javascript腳本即可。另外，由于web自動化測試執行過程直觀，并且有很強的實用性，因此可充分調動學生參與的積極性。下面就以一個具體的web自動化測試項目為例，探討在Javascript案例教學過程中融入計算思維的思路和方法。

四、以計算思維為導向的Javascript案例教學實踐

(一)案例任務和目的

案例任務：選取web自動化測試非常基礎和常用的一個場景作為案例任務,要求學生打開湖北廣播電視大學官網，將首頁搜索框標紅后搜索關鍵字為“大學”的新聞，并通過滑動瀏覽器滾動條的方式，查看特定位置的新聞，最后關閉新聞頁,見圖1。

案例目的：要求學生掌握DOM節點、窗口對象(window)、文檔對象(document)操作，理解web自動化測試的概念和流程。學生通過分析任務場景，結合課程知識，自主完成案例任務。

(二)案例設計和實施

教師按照計算思維教學實施的方法，遵循情景創建、問題分析、環境建構、編碼實現的流程引導學生去梳理對應的案例內容，并且利用計算思維去分析案例任務、明確案例目標，通過分解案例任務，結合課程知識點找到解決方案，最后通過編程實現，在整個案例教學過程中實踐和提升計算思維。

1.情景創建

如前述，打開特定網頁并進行操作是web自動化測試最常見的基礎應用場景。本案例場景為在湖北廣播電視大學官網搜索關鍵字“大學”相關的新聞，并查看第一頁的最后一條新聞。本案例操作邏輯順序清晰，可分解為如下幾個步驟：

圖1 案例任務官網

(1)打開湖北廣播電視大學官網，并加載成功；

(2)標紅首頁“站內搜索”的輸入框；

(3)在搜索框內輸入關鍵字“大學”，完成相關新聞搜索功能；

(4)彈出搜索結果頁面后，滑動瀏覽器滾動條，將最后一條相關新聞展示出來；

(5)關閉新聞頁。

教師在向學生介紹案例任務時，可先手工完成上面的步驟示范整個操作過程，方便學生理解明確任務目標和內容。另外需要選擇合適的瀏覽器作為測試環境。本案例推薦選擇主流的谷歌、IE或火狐瀏覽器。

2.問題分析

針對以上情景的每個具體步驟，教師可引導學生進行分析，關聯對應的知識點，靈活運用計算思維加以實現：

(1)在JavaScript中，一個瀏覽器窗口就是一個window對象。window對象主要用來控制由窗口彈出的對話框及窗口的打開關閉狀態和大小等等。打開百度網頁實質上就是對瀏覽器的操作，因此可以通過window對象方法來實現。

(2)標紅搜索框首先要定位搜索框。在JavaScript中,通過DOM來操作頁面中各種元素。搜索框可看成是一個元素節點，標紅是改變元素的樣式，需要用到DOM style對象設置邊框顏色。實現這個步驟要求學生理解節點的概念，并靈活運用常見的DOM方法。

(3)搜索功能通常的處理方式是點擊按鈕，限制條件是按鈕控件需要有id，方便定位，再注冊點擊事件。本頁面中按鈕沒有設置id，用標簽定位的方法比較麻煩，因此可以考慮采用表單自身的提交方法。

(4)需要操作的頁面元素不在可視范圍內，必須精確調整滾動條的位置。滾動條同樣可以看成是一個元素節點，因此也需要借助 DOM進行操作。

3.環境建構

本次案例任務的自動化測試環境為：Selenium版本2.48.0，Python-3.5.0-amd64(64位)，PyCharm(2017.1.1)。

目前業內的自動化測試工具很多，Selenium作為業內測試web的主流開源自動化工具，支持絕大部分的主流編程語言，包括JavaScript。WebDriver類的execute_script方法簡單易用，可以用來執行JavaScript代碼。為了方便理解和閱讀，通常將JavaScript代碼劃分為若干功能模塊，分步執行。因此本次案例任務選取Selenium作為實現工具。

4.編程實現

計算思維分析問題、解決問題，最終需要落實到代碼實現上。根據上述情景創建、問題分析，很容易推導出代碼需要實現以下功能：

(1)打開湖北廣播電視大學官網，調整窗口大小。Selenium自動化測試中，需要先選定瀏覽器，本任務采用谷歌瀏覽器完成所有操作。在JavaScript中，window.open()是打開新窗口的方法，所有瀏覽器都支持這個方法。注意：屬性值_self表明在原有窗口打開網頁。為了實現后續步驟中的滑動條效果，需要設置高度寬度來調整窗口大小。擴展練習：A.用火狐或者IE瀏覽器完成此步驟。B.最大化或者最小化瀏覽器窗口。

# 選擇谷歌瀏覽器打開網頁

driver = webdriver.Chrome()

# 打開湖北廣播電視大學官網

js="var w = window.open('http://www.hubtvu.edu.cn/','_self','width=1000,height=1000,scrollbars')"

# 執行js腳本

driver.execute_script(js)

(2)定位搜索框。此步驟的關鍵是準確定位頁面的搜索輸入框。JavaScript主要用兩種方法來定位元素：id或標簽，我們能夠采用document對象的兩種方法：getElementById()和getElementsByTagName()。前者返回單個對象，后者返回偽數組。通過分析官網源碼，頁面搜索框定義了id ，因此采用document.getElementById() 查找輸入框，Value為設置輸入值，本例中value值為關鍵字“大學”。

# 找到輸入框，輸入關鍵字

js="document.getElementById('_w_v_l_s_n_s_kword_show_idu9').value=' 大學 '"

driver.execute_script(js)

(3)標紅搜索框。將輸入框邊框標紅即設置輸入框的樣式。由于自動化執行效率高，標紅輸入框是毫秒級的過程，為了方便確認執行效果，建議設置等待時間3秒。使用time.sleep()方法必須導入time包:import time。擴展：可將此步任務置換為將輸入框框線加粗或者設為虛線、點線。

# 邊框為1像素、實線、紅色

js="document.getElementById('_w_v_l_s_n_s_kword_show_idu9').style.border='1px solid red ' "

driver.execute_script(js)

# 等待時間3秒

time.sleep(3)

(4)搜索所有關鍵字為“大學”的新聞。實現搜索功能通常是點擊輸入框旁的搜索按鈕，通過分析官網源碼，發現該搜索按鈕沒用定義id，但是父元素form定義了id“au9a”，因此通過先定位父元素form，然后用元素form的submit()方法提交關鍵字“大學”給服務器來實現搜索功能。關鍵字提交后會彈出搜索結果的新窗口。

js="document.getElementById('au9a').submit()"

上述兩類檢查方法對腸壁增厚的檢出率無明顯差異，P＞0.05。開展腹部超聲檢查證實：腸道蠕動減慢24例，腸道蠕動消失10例，腹腔積液16例。詳細見表2。

driver.execute_script(js)

(5)定位到搜索結果頁。這里需要注意的是，現在有新舊兩個窗口：官網首頁和搜索結果頁。目前driver定位的是官網首頁窗口，按照任務要求，必須將driver重新定位到搜索頁窗口。這個步驟的難點在于這里用Javascript腳本實現比較麻煩,不過WebDriver 的 switchto().window()方法可以實現從一條窗口跳轉到新的窗口。

# 兩個窗口之間切換

window_a = driver.current_window_handle

windows = driver.window_handles

for current_window in windows:

if current_window != window_a:

driver.switch_to.window(current_window)

js="$(document).scrollTop(2000);"

driver.execute_script(js)

time.sleep(2)

(7)關閉搜索結果頁面。最后一般步驟：close()方法實現關閉當前的瀏覽器窗口。

# 關閉瀏覽器

js="window.close()"

driver.execute_script(js)

在教學組織過程中可將全班同學分組，利于同學之間“伙伴學習”，加強學習交流。為了提高交流效率同時防止小組成員過多而產生依賴心理，每組建議不超過5人。將班里編程能力突出、有責任心的同學安排到各組擔任組長，組織大家討論案例，解答力所能及的問題，帶領團隊成員共同進步。最后各個學習小組提交成果，教師進行詳細點評，引導學生有意識地實踐計算思維，解決學習中的難題，同時對課程知識進行全面梳理，建立完善的知識體系。

五、教學效果分析

為了深入分析對比基于計算思維的案例教學對教學效果的影響，分別在軟件工程學院2019 級軟件技術專業隨機挑選了一個對照班和一個實驗班，通過期末考試和學院“網頁設計大賽”進行教學效果比較和分析。本課程期末考試分為兩個部分：理論上機考試和“云云商城首頁”設計。理論部分主要來自于教材和練習冊，學生復習充分，實驗班和對照班平均分和高分比例差距不大，如表1所示。

“云云商城首頁”設計是Javascript課程的項目測試，學生在該項的考核得分直接反映學生對于課程知識的實際掌握情況和靈活應用能力。如表2所示，實驗班網頁設計平均分和高分比例高于對照班，說明實驗班學生對于課程的掌握程度相較于對照班好。

表1 理論成績統計

表2 實踐測試成績統計

為激發學生的學習熱情，學院每年舉辦網頁設計大賽。2019年度學院網頁設計大賽實驗班的報名人數為4組共12人，對照班的報名人數為2組共6人，大一組第一名也由實驗班小組獲得。充分說明基于計算思維的案例教學利于提高學生學習積極性和解決問題的能力。

六、結語

針對軟件技術專業Javascript課程中存在的問題，在教學實踐中制訂了“提升計算思維能力和知識技能、操作技能并重”的課程目標，優化了教學內容和教學案例。實踐表明，通過基于計算思維的web自動化測試項目，極大改進了Javascript課程的教學效果，提高了學生的專業學習興趣，提升了學生用計算思維的方法和計算機專業知識來分析復雜問題，解決實際問題的能力，增強了就業競爭力。