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智慧”教学策略，将教学内容游戏化、学习思维可视化，学生学习兴趣浓厚，在专业学习中获得的成就感促进软件技术专业学生更加积极、乐观，具有良好的自我学习和再学习的能力，具备智慧人才的基本特征。