基于计算思维的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课程的教学效果，提高了学生的专业学习兴趣，提升了学生用计算思维的方法和计算机专业知识来分析复杂问题，解决实际问题的能力，增强了就业竞争力。