《JavaScript课程“步骤教学法”的探索与实施》-工学论文，通信论文-论文范文参考-科学狗论文网

标题

JavaScript课程“步骤教学法”的探索与实施

范文

张玮

摘要：“JavaScript脚本编程”是四川信息职业技术学院软件技术专业开设的一门专业基础课，在实际教学中，文章探索出一种“步骤教学法”，即在案例教学的过程中，将每个JavaScript特效案例拆分细化到具体步骤，先用注释的形式用中文写出具体每个步骤要实现的功能，然后再引导学生使用JavaScript脚本语言完成相应功能。这种教学方法使初学者更能跟上老师的思路，并且通过教学能让学生掌握化繁为简的能力，锻炼了学生思考问题的能力。

关键词：JavaScript；教学方法；软件技术；编程

“JavaScript脚本编程”课程属于四川信息职业技术学院软件技术专业开设的一门专业基础课。本课程在大一下学期开设，前期开设的C程序设计和静态网页设计两门课程已经为本课程打下基础。通过大一第一学期的学习，学生有了初步的阅读程序的能力、编写程序的能力、程序设计的思想和静态网页制作能力。本课程目的是培养学生JavaScript脚本编程能力，使学生能够使用JavaScript脚本语言制作具有交互功能的Web页面，能在软件项目开发过程中熟练应用基本的JavaScript脚本程序。

通过本课程的学习和训练，使学生具备以下知识、能力、素质：（1）掌握JavaScript基本语法；（2）掌握JavaScript对象基础，DOM基础；（3）熟悉事件处理；（4）了解高级DOM技术；（5）能实现常见JavaScript动画；（6）熟悉jQuery及其常用函数；（7）能够使用JavaScript进行浏览器端应用程序的开发；（8）培养学生团队精神；（9）培养学生具有实事求是的学风和严谨的工作态度；（10）培养学生从实际问题出发分析问题和解决问题的能力。

1 “步骤教学法”的探索

课程刚开始的时候发现很多学生基础太差，尤其是自己动手编程的能力很差。大部分学生只是在课堂上照搬教师的代码，自己动脑筋思考解决问题的能力很差，而且对英文的编程语言还是比较抗拒，而JavaScript跟C程序很大的区别在于JavaScript语言提供了更多的内部对象，这就意味着更多的内部属性和函数需要掌握其写法和使用方法。如果不提升学生主观思考和记忆的能力，一味只是照搬代码，那么想学好这门课程以及后续的所有专业课程是不可能的事情。

在教学的过程中，笔者探索出一种“步骤教学法”，在案例驱动的教学过程中具体实施。每次动手编程完成一个JavaScript特效前，要求学生先将这个特效进行分解，先明白自己要完成哪些工作，然后再分解到具体每一个步骤。先用中文描述出这个步骤要做的功能，全部分解完成之后再按照步骤写出对应的一行JavaScript代码。这种“步骤教学法”刚开始实施的时候，就发现能让很多同学跟上课堂的节奏，能基本弄清楚每个特效是怎么一步一步完成的。这样慢慢积累，很多函数和属性也就慢慢掌握了。

“步骤教学法”刚开始实施的时候主要依靠教师来带领学生分解步骤，第一是因为这是一门新的编程语言，学生对其比较陌生，没有相关的语法知识；第二是学生基础薄弱，动手能力差，思考分析问题的能力有限，这就要靠不断的积累和反复训练。所以本课程前期1/3的时间都是在讲基础语法，以及JavaScript基本语法和C语言基本语法的区别与联系。当学生有了一定的语法基础后，就可以开始融入一些内部对象的常用属性和函数，写一些网页上比较常见的小特效。这个时候教师带领学生一步一步分解案例，从静态网页标签的梳理到指层叠样式表（Cascading Style Sheets， CSS）特效的添加再到JavaScript特效的分解完成，要具体地分解到基本上一行中文步骤对应一行JavaScript语句。

2 “步骤教学法”的具体实施

本文以一个数码时钟定时器的特效案例为例。数码时钟是在讲完JavaScript定时器的使用方法和内部Date对象的常用函数之后引导学生完成的一个综合性质的案例。本次案例主要的知识点：定时器的开启；使用Date对象获取时间；选择结构实现空位补零；寻找页面上标签的方法；循环操作标签改变其相關属性；数组的遍历；函数的定义和调用。一开始先给学生看实际完成的效果，如图1所示。

先讲述下这个数码时钟特效的要求，即跟普通时间不一样，本案例不是用数字显示时间而是用图片来完成时间的显示。接下来，带领学生分析理解本案例是如何完成的，引导学生进行步骤分解，本案例核心功能就是获取系统时分秒然后依次用时间的数字来生成对应的图片地址从而完成换图。要完成这样一个特效首先要准备10个同样大小风格的数字图片，如图2所示。

接下来开始进行步骤分解，首先是静态网页部分步骤分解：（1）放置6个
标签用来显示时分秒的数字图片；（2）设置简单的背景和字体颜色让效果更好看。

然后是JavaScript特效步骤分解，这里要注意提醒学生本案例有一个细节处理，因为系统返回的时分秒是普通数字，并且返回的10以内的时间是单个的数字，这就要求学生要对获取的时分秒进行空位补零。如果要操作多个同样效果的标签，比较常见和便捷的方式是用循环，这就要求时分秒要按照顺序连成一个六位的字符串，这样循环才能依次对标签和字符串进行操作。

具体JavaScript步骤分解如下：（1）通过标签名找到页面上所有的img标签返回的是包含所有img标签的数组，方便后边循环用下标遍历数组换图；（2）获取当前系统时间；（3）从获取的时间信息里提取出时分秒；（4）时分秒要变成两位的字符串的形式；（5）把时分秒连成六位的字符串如191703；（6）写循环来依次换图；（7）在循环中依次获取字符串的每一个字符生成图片地址来改变img标签src属性；（8）开启定时器，每隔1 s执行一次上述语句。

学生按照这个步骤基本就能根据其写出相应的JavaScript代码，但难点的地方还需要教师后期引导和讲解。核心JavaScript语句如下：

使用Date对象的相关方法获取系统时间：

var time = new Date（）；

var h = time.getHours（）；

var m = time.getMinutes（）；

var s = time.getSeconds（）；

时间转换成两位字符串，空位补零，使用选择分支完成：

if（h<10）

h= “0”+h；

else

h= “”+h；

字符串链接成六位字符串，这里加号是作为连接符，而不是加法：

var str = h+m+s；

循环换图，遍历标签数组，固定次数的循环优先选择for循环结构：

for（var i=0； i

img[i].src = “D：/img/” +str.charAt（i）+” .png” ；

开启定时器，本次案例使用反复型定时器，时间是每隔1 s即1 000 ms执行一次：

setInterval（startTime，1000）；

3 结语

“步骤教学法”在JavaScript教学中，能让初学者思路清晰，入门更快，经过长期训练，能让学生更好更快地完成一些JavaScript特效。比如给标签添加事件，每次我们都强调“三步走”，第一步先通过函数找到标签，第二步添加事件如x.onclick=function （）{}，第三步在匿名函数花括號内部完成相关操作。训练几次之后学生就掌握了，而这个基本是所有JavaScript案例都要用到的。“步骤教学法”的实施在后期的综合案例训练和JavaScript高级程序设计中能让教师教学更轻松，可以提前引入分组教学，在小组中每个成员轮流来进行案例的步骤分解，也能带给课堂更多的新思路和新想法，调动学生的学习积极性。按照软件工程的流程，开发一个项目之前也需要做好需求分析和系统设计，然后才是系统具体实现，所以对学生自我的分析问题、解决问题的能力在软件技术行业要求很高，通过“步骤教学法”也能更好地锻炼学生这方面的能力。通过“步骤教学法”在课堂上的实施，学生不仅提高了自己的编程能力，而且学习能力和分析解决问题的综合素质也得到了提升。

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。