网页设计与制作——JavaScript+jQuery标准教程 教案 第3章 数组和函数.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第3章 数组和函数.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第3章 数组和函数.docx（7页珍藏版）》请在第一文库网上搜索。

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号3授课日期月日月日月日月日授课班级课内教学内容：第3章数组和函数课外学习任务：(1)课前：以小组为单位，讨论数组和函数的相关知识，分析数组和函数的语法规则并以PPT的形式记录下来。(2)课后：使用数组编写程序输出最小元素。使用函数编写程序实现求积功能。教学目标：知识目标 掌握数组的定义与使用 掌握函数的定义与使用 掌握自调函数 掌握

2、闭包函数 掌握作用域能力目标 能够使用数组处理数据类型的数据； 能够掌握函数的使用方法。素质目标 较强的专业知识和技术能力； 丰富知识结构，提升专业知识。重点难点及解决方法：(I)重点：掌握数组和函数的语法规则解决方法：通过课堂示例+启发式教学的方法,教师讲解在讲解数组和函数相关知识的同时，引导学生积极思考，掌握闭包函数，自调用函数以及作用域等相关知识；同时通过课堂示例,使学生深入掌握数组和函数的相关语法规则和适用方法。(2)难点：熟练使用数组和函数实现数据处理解决方法：通过实战案例解析+启发式教学讲解的方式，细致讲解杨辉三角的输出。帮助学生加深掌握如何使用数组和函数实现数据的处理。课内教学授

3、课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“J课内教学内容及过程时间分配方法及手段【导引示例】在处理数据时可以通过一个数组实现多个数据的保存

4、和使用。例如，彩虹的颜色一共有7种，每种颜色的文字和对应的属性值可以使用两个数组存放，并通过循环语句依次读取。1.初识数组【创建数组】创建数组的语法形式如下所示。var数组名=元素I,.;元素例如，创建一个存放个人数据的数组变量Pinfo,代码如下所示。varpinfo=张三：32,12345678901?北京成华大道3号在JaVaSCriPt中，所有的数据都可以被称为对象，而数组也属于对象。所以，数组可以使用JaVaSeriPt提供的数组对象Array创建，其语法形式如下所示。var数组名=newArray(元素1元素n);例如，使用Array对象创建一个Week数组变量，代码如下所示。va

5、rweek=newArray(,Mon,Tues,Wed,Thur,Fri,Sat,Sun,);例如，为某一个员工建立一个数组，用于存放员工的各项数据，员工数据有多种类型，代码如下所示0varstaff=,0017,17,41,12345678901fa1se;【访问数组元素】数组中的数据都被称为数组的元素。每个元素都会被数组编号，这种编号被称为索引或下标。索引用于表明数组中每个元素的位置。索引的起始值为0,索引的最大值为数组长度减1。数组的长度可以使用Iength属性获取，其语法形式如下所示。数组名.1ength访问数组元素可以使用索引实现，其语法形式如下所示。数组名索引值所有元素。如果索引

6、值超出了数组范围，则显示ImdefIned。数组的最后一个元素的索引可以使用Iength-I表示。【数组遍历】数组遍历是指使用循环语句依次访问数组中的所有元素。一般在查询、插入、删除数据等操作中，经常需要进行数组遍历。【案例分析31】获取数组元素中的最大值获取数组元素中的最大值就是通过比较和遍历的方式查询数组元素中的最大值2.数组元素操作【修改数组元素】1 .使用索引修改数据元素通过数组索引，可以精准地访问数组元素。如果配合赋值运算符，还可以实现数组元素的修改和添加，数组索引的语法形式如下所示。数组名索引二值；2 .使用函数添加数组元素通过JaVaSCriPt的系统函数也可以实现数组元素的添加

7、。常用的函数包括PUSh()函数和UnShift()函数，其中，PUSho函数用于向数组的尾部添加元素，ImShift()函数用于向数组的头部添加元素。使用函数为数组添加元素的语法形式如下所示。数组名.函数名(值)；3 .使用函数删除数组元素删除数组元素可以使用PoP()函数和Shift()函数实现。其中，pop。函数用于从数组尾部删除一个元素，Shift()函数用于从数组头部删除一个元素。使用函数删除数组元素的语法形式如下所示。数组名.函数名()；【数组元素排序】数组元素排序可以使用循环语句和条件语句实现，也可以使用系统函数实现。常用的排序函数的形式与功能说明如下。sort():以字母顺序对

8、数组进行排序。reverse():反转数组中元素的顺序。sort(function(a,b)returna-b)：以数字顺序对数组元素进行升序排列。sort(function(a,b)returnb-a)：以数字顺序对数组元素进行降序排列。sort(function(a,b)return0.5-Math.random():对数组元素进行随机排序。除了排序功能，JavaScript还提供两个函数用于获取数组元素中的最大值和最小值。Math.max.app1y(nu11,arr)：获取数组元素中的最大值，其中arr表示要操作的数组名。Math.min.app1y(nu11,arr)：获取数组元素中

9、的最小值，其中arr表示要操作的数组名。【案例分析3-2对数组元素进行排序后输出通常情况下，数组元素都需要经过排序后再输出。下面使用for循环和系统函数分别实现数组元素的排序功能。3.初识函数【函数定义】函数在使用时首先需要定义，定义时需要使用function关键字。最基础的函数定义语法形式如下所示。function函数名()语句块在定义函数时也可以省略函数名。以这种方式定义的函数被称为匿名函数。为了方便使用匿名函数，一般会将匿名函数赋值给一个变量，其语法形式如下所示。var变量名=function()(语句块定义完函数之后，可以使用函数名或被赋予匿名函数的变量对函数进行调用。调用函数的语法形

10、式如下所示。函数名/变量名()；在函数名或变量名后加上圆括号，就可以实现对函数的调用。其中，如果是匿名函数就使用对应的变量名调用匿名函数，否则直接使用函数名。例如，调用函数SUm()的代码如下所示。sum();【函数的参数】通过函数的参数可以将动态的数据传递到函数内部用于计算。当需要使用函数对不同数据进行处理时，就需要使用到带参数的函数。例如，定义一个工资计算函数时，由于每个人的工时不同，所以需要将每个人的工时数据传递给函数进行计算。函数的参数需要写在函数的圆括号中，同时参数可以有一个或者多个，其语法形式如下所示。function函数名(参数1,.,参数n)语句块其中，圆括号中的参数被称为形参

11、。参数可以在语句块中作为普通变量使用，如参与数据的运算、输出等操作。这时候，这种函数也被称为带参函数。带参函数与普通函数的调用方式大致相同，只需要在圆括号中添加对应的数据即可。这些数据被称为实参。调用带参函数的语法形式如下所示。函数名/变量名(实参1,.,实参n);【函数的返回值】函数的返回值是指由函数中的return语句返回的值。通过return语句，将函数内运算的数据返回到函数调用之处，以供后续使用，其语法形式如下所示。return数据；【自调用函数】自调用函数是指函数在打开页面后自动被调用。自调用函数在定义时需要在结尾处添加-对圆括号()。这表示该函数为函数表达式，其语法形式如下所示。(

12、function()语句块；1)0；对于自调用函数，如果只执行一次，则可以省略函数名。整个函数用圆括号引导，并在结尾处添加一对空的圆括号。这样，打开页面后，该函数会自动调用一次。【案例分析33】利用函数判断闰年闺年是指可以被4整除并且不能被I(X)整除，或可以被400整除的年份。将判断闺年的功能通过函数实现，根据用户输入的年份，返回对应年份是否为闰年。4.作用域【作用域的分类】作用域可以分为全局作用域和局部作用域两种。JavaScript的整体代码的范围是最基础的作用域，被称为全局作用域。代码中每创建一个函数就会创建一个新的作用域，被称为局部作用域。局部作用域的范围从函数头部开始到函数尾部结束

13、。在不同的作用域中可以使用相同名称的变量。它们之间相互独立，互不影响。这样可以提高程序的逻辑局部性，增强程序的可靠性并减少变量名冲突的问题。在全局作用域中声明的变量被称为全局变量，它可以在整个程序范围中使用。在局部作用域中声明的变量被称为局部变量，它只可以在指定函数范围内使用。【访问父级作用域变量】JavaScript中，当函数内部没有定义与其父级作用域中相同的变量时，可以直接访问其父级作用域中的变量。【闭包函数】在实际开发中，常常会使用到网页投票功能，用户每点击一次按钮程序就会统计一次票数。其实现原理就是统计函数调用的次数。函数调用的次数需要使用一个变量来保存。如果将变量声明为全局变量，会导

14、致所有的函数都可以对该变量的值进行修改，这样可能会出现统计次数错误的情况。如果将变量设置为局部变量，由于代码的垃圾回收机制(自动清理不再使用的数据回收内存空间)会导致每次调用函数，变量的值会被清零。闭包函数就是为了解决类似问题而出现的。闭包函数简单来说就是指函数的嵌套使用。闭包函数是一种保护局部变量的机制，在函数执行时形成局部作用域，保护里面的局部变量不受外界干扰。闭包函数通过匿名函数嵌套的方式实现。在子函数中访问父函数的变量，并将运行结果存放到匿名函数指向的变量中，从而实现对变量值的累计功能，并且由于变量在函数中定义，所以它不会被其他函数影响，拥有局部的访问属性。【案例分析34】求任意两个数

15、的和作用域的存在可以保证变量的相对独立性，在不同的作用域中可以使用相同名称的变量，它们之间互不影响。本案例使用一个求和函数验证函数内外两个作用域中的同名变量SUm互不影响【案例分析35】输出杨辉三角杨辉三角是二项式系数在三角形中的一种几何排列。杨辉三角的第n行是二项式(x+y)n1展开所对应的系数。本案例将实现根据用户输入的数字，输出对应行数的杨辉三角。5 .素养课堂在编程过程中要学会对数据中存在的规律进行观察和总结，这样编写的代码才能更加科学、更加高效。在繁多的数据中，利用存在的规律寻找数据中重复的内容或有规律性变化的内容，可以合理安排代码，用最少的代码量实现最高效的数据运算效果。在日常生活中也需要养成观察和归纳总结的科学思维习惯。在日常生活中要多观察事物的规律，从而找到更加有效的处理事物的方式。另外，还要学会归纳总结和反省。古语云“吾日三省吾身“，每日对自