基于計(jì)算思維的Javascript案例教學(xué)研究

馬 敏 賈 露 柯 維

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

一、引言

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

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

二、Javascript案例課程現(xiàn)狀

(一)重視學(xué)生知識(shí)技能和操作技能，欠缺計(jì)算思維的培養(yǎng)

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

(二)課程現(xiàn)有案例和配套習(xí)題無法滿足職業(yè)崗位需求

在課堂教學(xué)中教師按照教材章節(jié)順序組織和設(shè)計(jì)教學(xué)，配套的案例或習(xí)題隸屬于獨(dú)立的章節(jié)。由于每個(gè)章節(jié)的知識(shí)點(diǎn)相對(duì)獨(dú)立，配套的習(xí)題往往只覆蓋本章的內(nèi)容，前后知識(shí)的連貫性無法在章節(jié)案例或者習(xí)題中體現(xiàn)，不利于學(xué)生真正掌握J(rèn)avascript編程技能。

(三)現(xiàn)有教學(xué)案例脫離實(shí)戰(zhàn)

Javascript課程教學(xué)方式以邊學(xué)邊練為主，教師先講解理論知識(shí)，針對(duì)某個(gè)知識(shí)點(diǎn)進(jìn)行案例演示，然后帶領(lǐng)學(xué)生實(shí)際操作。這種教學(xué)方式有利于學(xué)生理解抽象的編程知識(shí)，但是現(xiàn)有的教學(xué)案例脫離實(shí)戰(zhàn)，缺乏趣味性，無法充分調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性。例如DOM查找元素的案例，通常是寫一個(gè)簡(jiǎn)單的網(wǎng)頁，再通過Javascript改變對(duì)象屬性等。學(xué)生參與意愿不高，課堂氣氛不活躍。

三、以計(jì)算思維為導(dǎo)向的Javascript教學(xué)案例設(shè)計(jì)

(一)總體目標(biāo)

針對(duì)目前Javascript課程教學(xué)中重技能培養(yǎng)輕問題解決能力培養(yǎng)的問題，將提升學(xué)生計(jì)算思維能力作為課程的主要目標(biāo)，通過優(yōu)化教學(xué)案例，將計(jì)算思維融入Javascript課堂教學(xué)[4-5]。教學(xué)設(shè)計(jì)以提升計(jì)算思維為指引，通過實(shí)際項(xiàng)目案例和可視化教學(xué)策略，指導(dǎo)學(xué)生在完成案例項(xiàng)目的過程中深入掌握問題分解、算法、抽象和自動(dòng)化的流程，幫助學(xué)生掌握用計(jì)算思維解決問題的方法，同時(shí)通過自動(dòng)化測(cè)試的教學(xué)案例帶領(lǐng)學(xué)生體驗(yàn)實(shí)際的研發(fā)項(xiàng)目。

(二)設(shè)計(jì)思路

國內(nèi)外實(shí)踐研究表明，培養(yǎng)計(jì)算思維行之有效的方法主要有兩個(gè)，一個(gè)是基于問題解決理念，另一個(gè)是可視化理念的教學(xué)策略?；趩栴}解決理念是指以實(shí)際問題或者實(shí)際項(xiàng)目作為教學(xué)案例的素材，通過合理裁剪與設(shè)計(jì)，承載教學(xué)知識(shí)點(diǎn)，讓學(xué)生在完成案例項(xiàng)目的過程中實(shí)踐計(jì)算思維的方法與工具，在此基礎(chǔ)上實(shí)現(xiàn)學(xué)生思維能力的培養(yǎng)?？梢暬哂兄庇^性，有利于學(xué)生深入理解抽象艱澀的理論和復(fù)雜的實(shí)際問題，快速驗(yàn)證思路和方案的正確性。

因此在Javascript教學(xué)中要將基于問題解決和可視化理念與編程技能培養(yǎng)有機(jī)地結(jié)合起來，將計(jì)算思維融入課堂教學(xué)。通過自動(dòng)化測(cè)試的項(xiàng)目，鍛煉學(xué)生的計(jì)算思維并提升編程能力。為實(shí)現(xiàn)此目標(biāo)，要求教師合理設(shè)計(jì)自動(dòng)化測(cè)試用例，將項(xiàng)目需求與Javascript知識(shí)點(diǎn)對(duì)接起來，在實(shí)操過程中引導(dǎo)學(xué)生利用計(jì)算思維的方法去分析問題，并在此基礎(chǔ)上解決問題。

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

四、以計(jì)算思維為導(dǎo)向的Javascript案例教學(xué)實(shí)踐

(一)案例任務(wù)和目的

案例任務(wù)：選取web自動(dòng)化測(cè)試非?；A(chǔ)和常用的一個(gè)場(chǎng)景作為案例任務(wù),要求學(xué)生打開湖北廣播電視大學(xué)官網(wǎng)，將首頁搜索框標(biāo)紅后搜索關(guān)鍵字為“大學(xué)”的新聞，并通過滑動(dòng)瀏覽器滾動(dòng)條的方式，查看特定位置的新聞，最后關(guān)閉新聞頁,見圖1。

案例目的：要求學(xué)生掌握DOM節(jié)點(diǎn)、窗口對(duì)象(window)、文檔對(duì)象(document)操作，理解web自動(dòng)化測(cè)試的概念和流程。學(xué)生通過分析任務(wù)場(chǎng)景，結(jié)合課程知識(shí)，自主完成案例任務(wù)。

(二)案例設(shè)計(jì)和實(shí)施

教師按照計(jì)算思維教學(xué)實(shí)施的方法，遵循情景創(chuàng)建、問題分析、環(huán)境建構(gòu)、編碼實(shí)現(xiàn)的流程引導(dǎo)學(xué)生去梳理對(duì)應(yīng)的案例內(nèi)容，并且利用計(jì)算思維去分析案例任務(wù)、明確案例目標(biāo)，通過分解案例任務(wù)，結(jié)合課程知識(shí)點(diǎn)找到解決方案，最后通過編程實(shí)現(xiàn)，在整個(gè)案例教學(xué)過程中實(shí)踐和提升計(jì)算思維。

1.情景創(chuàng)建

如前述，打開特定網(wǎng)頁并進(jìn)行操作是web自動(dòng)化測(cè)試最常見的基礎(chǔ)應(yīng)用場(chǎng)景。本案例場(chǎng)景為在湖北廣播電視大學(xué)官網(wǎng)搜索關(guān)鍵字“大學(xué)”相關(guān)的新聞，并查看第一頁的最后一條新聞。本案例操作邏輯順序清晰，可分解為如下幾個(gè)步驟：

圖1 案例任務(wù)官網(wǎng)

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

(2)標(biāo)紅首頁“站內(nèi)搜索”的輸入框；

(3)在搜索框內(nèi)輸入關(guān)鍵字“大學(xué)”，完成相關(guān)新聞搜索功能；

(4)彈出搜索結(jié)果頁面后，滑動(dòng)瀏覽器滾動(dòng)條，將最后一條相關(guān)新聞?wù)故境鰜恚?/p>

(5)關(guān)閉新聞頁。

教師在向?qū)W生介紹案例任務(wù)時(shí)，可先手工完成上面的步驟示范整個(gè)操作過程，方便學(xué)生理解明確任務(wù)目標(biāo)和內(nèi)容。另外需要選擇合適的瀏覽器作為測(cè)試環(huán)境。本案例推薦選擇主流的谷歌、IE或火狐瀏覽器。

2.問題分析

針對(duì)以上情景的每個(gè)具體步驟，教師可引導(dǎo)學(xué)生進(jìn)行分析，關(guān)聯(lián)對(duì)應(yīng)的知識(shí)點(diǎn)，靈活運(yùn)用計(jì)算思維加以實(shí)現(xiàn)：

(1)在JavaScript中，一個(gè)瀏覽器窗口就是一個(gè)window對(duì)象。window對(duì)象主要用來控制由窗口彈出的對(duì)話框及窗口的打開關(guān)閉狀態(tài)和大小等等。打開百度網(wǎng)頁實(shí)質(zhì)上就是對(duì)瀏覽器的操作，因此可以通過window對(duì)象方法來實(shí)現(xiàn)。

(2)標(biāo)紅搜索框首先要定位搜索框。在JavaScript中,通過DOM來操作頁面中各種元素。搜索框可看成是一個(gè)元素節(jié)點(diǎn)，標(biāo)紅是改變?cè)氐臉邮剑枰玫紻OM style對(duì)象設(shè)置邊框顏色。實(shí)現(xiàn)這個(gè)步驟要求學(xué)生理解節(jié)點(diǎn)的概念，并靈活運(yùn)用常見的DOM方法。

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

(4)需要操作的頁面元素不在可視范圍內(nèi)，必須精確調(diào)整滾動(dòng)條的位置。滾動(dòng)條同樣可以看成是一個(gè)元素節(jié)點(diǎn)，因此也需要借助 DOM進(jìn)行操作。

3.環(huán)境建構(gòu)

本次案例任務(wù)的自動(dòng)化測(cè)試環(huán)境為：Selenium版本2.48.0，Python-3.5.0-amd64(64位)，PyCharm(2017.1.1)。

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

4.編程實(shí)現(xiàn)

計(jì)算思維分析問題、解決問題，最終需要落實(shí)到代碼實(shí)現(xiàn)上。根據(jù)上述情景創(chuàng)建、問題分析，很容易推導(dǎo)出代碼需要實(shí)現(xiàn)以下功能：

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

# 選擇谷歌瀏覽器打開網(wǎng)頁

driver = webdriver.Chrome()

# 打開湖北廣播電視大學(xué)官網(wǎng)

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

# 執(zhí)行js腳本

driver.execute_script(js)

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

# 找到輸入框，輸入關(guān)鍵字

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

driver.execute_script(js)

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

# 邊框?yàn)?像素、實(shí)線、紅色

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

driver.execute_script(js)

# 等待時(shí)間3秒

time.sleep(3)

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

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

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

driver.execute_script(js)

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

# 兩個(gè)窗口之間切換

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)關(guān)閉搜索結(jié)果頁面。最后一般步驟：close()方法實(shí)現(xiàn)關(guān)閉當(dāng)前的瀏覽器窗口。

# 關(guān)閉瀏覽器

js="window.close()"

driver.execute_script(js)

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

五、教學(xué)效果分析

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

“云云商城首頁”設(shè)計(jì)是Javascript課程的項(xiàng)目測(cè)試，學(xué)生在該項(xiàng)的考核得分直接反映學(xué)生對(duì)于課程知識(shí)的實(shí)際掌握情況和靈活應(yīng)用能力。如表2所示，實(shí)驗(yàn)班網(wǎng)頁設(shè)計(jì)平均分和高分比例高于對(duì)照班，說明實(shí)驗(yàn)班學(xué)生對(duì)于課程的掌握程度相較于對(duì)照班好。

表1 理論成績(jī)統(tǒng)計(jì)

表2 實(shí)踐測(cè)試成績(jī)統(tǒng)計(jì)

為激發(fā)學(xué)生的學(xué)習(xí)熱情，學(xué)院每年舉辦網(wǎng)頁設(shè)計(jì)大賽。2019年度學(xué)院網(wǎng)頁設(shè)計(jì)大賽實(shí)驗(yàn)班的報(bào)名人數(shù)為4組共12人，對(duì)照班的報(bào)名人數(shù)為2組共6人，大一組第一名也由實(shí)驗(yàn)班小組獲得。充分說明基于計(jì)算思維的案例教學(xué)利于提高學(xué)生學(xué)習(xí)積極性和解決問題的能力。

六、結(jié)語

針對(duì)軟件技術(shù)專業(yè)Javascript課程中存在的問題，在教學(xué)實(shí)踐中制訂了“提升計(jì)算思維能力和知識(shí)技能、操作技能并重”的課程目標(biāo)，優(yōu)化了教學(xué)內(nèi)容和教學(xué)案例。實(shí)踐表明，通過基于計(jì)算思維的web自動(dòng)化測(cè)試項(xiàng)目，極大改進(jìn)了Javascript課程的教學(xué)效果，提高了學(xué)生的專業(yè)學(xué)習(xí)興趣，提升了學(xué)生用計(jì)算思維的方法和計(jì)算機(jī)專業(yè)知識(shí)來分析復(fù)雜問題，解決實(shí)際問題的能力，增強(qiáng)了就業(yè)競(jìng)爭(zhēng)力。