第4章 函数 教学设计

第3章面向对象（上）《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：年月日课题名称第4章函数计划学时5学时内容分析函数是JavaScript中最常用的功能之一，它可以避免相同功能代码的重复编写，将程序中的代码模块化，提高程序的可读性，减少开发者的工作量，便于后期的维护。例如，在计算班级学生的平均分时，每计算一个学生的平均分，都要编写一段功能相同的代码，这样会导致代码量大大增加。为此，JavaScript提供了函数，通过函数可以将计算平均分的代码进行封装，在使用时直接调用即可，无需重复编写。本章将针对函数的内容进行详细讲解。教学目标及基本要求掌握函数的使用方法掌握变量的作用域掌握匿名函数与闭包函数教学重点函数的创建和使用、变量的作用域、匿名与回调函数、闭包函数教学难点函数嵌套与作用域链、闭包函数教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（初识函数、参数设置、函数的调用、变量的作用域）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。前面学习了PHP的一些基本语法，包括变量、表达式、数据类型、运算符、流程控制语句等，这些是最基本又很重要的内容。然后学习了数组，用来存储和管理大量的数据。接下来，本节将针对函数进行详细讲解，掌握函数的具体使用细节，使程序代码模块化，提高程序的可读性和后期的可维护性。（3）明确学习方向。能够充分理解函数的概念。能够独立的完成函数的定义。熟练掌握函数的各种参数设置。理解函数中变量的作用域机制。二、知识讲解初识函数回顾之前学过的函数，如parseFlost()、isNan()、parseInt()等。回顾之前编写过的自定义函数。请学生讲出自己对函数的理解，引出函数的含义、作用、以及其好处。总结自定义函数的语法结构，以及返回值。注意函数的命名规则，不能使用数字开头。编写代码实现求最大值、最小值等功能。编写一个$()函数，封装document.getElementById()方法，从而更方便的获取DOM对象。函数的参数设置按照参数划分，函数分为：无参函数和有参函数。理解形参、实参的概念，演示函数参数的传递。函数的形参可以不设置，在函数内通过arguments即可获取调用函数时传递的具体参数。通过arguments.length可获取参数的数量。在ES6中，定义函数的语法得到了加强，可以为函数参数设置默认值，或在参数数量不确定时，利用“…变量名”的方式动态的接收参数。函数的调用讲解函数调用的语法，实参列表的概念。通过求和的案例，演示函数的调用，以及arguments的使用。提出问题：函数的声明与调用的顺序，可以先调用后声明。变量的作用域分析函数的作用域问题，测试在函数内是否可以访问函数外的变量，在函数外是否可以访问函数内的变量。总结变量的作用域规律，根据作用域的不同，分为全局作用域、函数作用域、块级作用域。针对这3种作用域分别讲解其特点，并能够通过代码演示。垃圾回收机制思考：函数调用完成后，其内部的变量的值去哪里了。引出：垃圾回收机制，将局部变量释放，节省内存使用量。思考：如何将函数内的局部变量保存下来。引出：两种方式。使用return返回，或使用全局变量保存。编写代码，在函数内部使用函数外部的变量，来保存函数内部的值，观察能否在函数执行完成后将值保留下来。三、【案例】字符串大小写转换效果分析分析案例的实现效果，通过单击网页上的按钮，实现对文本框内的文本进行大写、小写转换，将转换结果显示在另一个文本框中。代码实现编写基本页面。为按钮添加deal()事件函数，用于单击后调用函数执行转换操作。为deal()函数传递参数（upper、lower），表示执行转大写还是转小写的操作。在deal()函数中，通过switch判断操作类型。分析如何实现字符串大小写转换，利用str.toLowerCase()、str.toUpperCase()方法来实现具体功能。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第二学时（函数表达式、匿名函数、回调函数）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。了解函数表达式的概念，能够区分函数表达式和普通函数的区别。掌握匿名函数的代码编写和应用。了解ES6新增语法箭头函数的使用。掌握回调函数的代码编写和应用。二、知识讲解函数表达式讲解什么是函数表达式，函数表达式的代码如何编写。注意函数表达式与函数声明的区别，若函数表达式写在函数调用的前面，将无法被调用。匿名函数作用：没有名称的函数，可避免全局变量命名污染即函数冲突问题。演示匿名函数的3种实现方式，方式1：省略函数名，方式2：自调用，方式3：处理事件时写的函数。分析3种方式的优缺点，以及应用场景。箭头函数作用：ES6新增的语法，方便代码书写。演示箭头函数的4种用法。对比讲解箭头函数代码与普通函数的代码。通过代码演示箭头函数的使用，设置1个参数与设置2个参数的语法。回调函数作用：将函数作为参数传递给另一个函数，然后调用这个函数。特点：根据传入的函数不同，执行结果不同。通过代码演示的具体实现。在JavaScript中，有一些数组方法支持使用回调函数，如find()、every()、some()、forEach()、map()、reduce()、reduceRight()等。演示这些方法的使用。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（函数嵌套与作用域链、递归调用）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。理解函数嵌套调用的概念。理解函数嵌套情况下的作用域链机制。掌握函数递归调用的原理与实现。掌握“求斐波那契数列第N项值”的案例代码实现。二、知识讲解函数嵌套与作用域链通过代码演示如何在函数中嵌套函数。测试在函数嵌套情况下，访问变量时，变量的向上查找机制。总结作用域链机制。递归调用通过代码演示函数的递归调用。演示函数递归调用的应用，实现计算指定数据的阶乘。画图分析函数的递归调用执行过程。总结函数递归调用的优缺点。适合进行数学计算、遍历维数不固定的多维数组。但要注意，递归调用会导致占用较多的内存空间和资源，在开发时要慎重使用。三、【案例】求斐波那契数列第N项的值案例分析介绍什么是斐波那契数列。演示示例“1,1,2,3,5,8,13,21……”。分析示例，找出规律。即从第3项开始，每一项等于前两项数字之和。代码实现思考如何通过编程实现输出斐波那契数列。思考如何计算斐波那契数列的第N项值。利用递归函数实现计算。函数的参数n：表示求斐波那契数列中第几项的值。在函数中判断n的值，如果等于0返回0，等于1返回1，大于1则进行递归调用。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第四学时（什么是闭包函数、闭包函数的实现、动手实践：网页计算器）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。前面讲解了函数表达式、匿名函数、回调函数等。JavaScript将函数设计的非常灵活，它还支持闭包函数，在实际开发中，闭包函数也是非常实用的一个功能。本节将结合案例，对闭包函数进行详细讲解。（3）明确学习方向。理解什么是闭包函数。理解闭包函数的特点和应用场景。掌握闭包函数的实现。二、知识讲解什么是闭包函数特点：内嵌函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内部变量和嵌套函数。作用1：可以在函数外部读取函数内部的变量。作用2：可以让变量的值保持在内存中。闭包函数的实现在函数中，通过return返回一个函数，然后在调用函数时，接收这个返回的函数。此时，就可以实现在函数外调用函数内部定义的函数。三、【动手实践】网页计算器案例分析展示案例完成后的效果，对功能进行分析。代码实现设计网页计算器的基本页面。提供两个文本框，用来输入数字，然后提供4个按钮，分别表示加、减、乘、除，用来对数字进行计算。编写add()、sub()、mul()、div()这4个函数，分部用于加法、减法、乘法、除法的运算。编写calc()函数，当单击按钮时，通过onclick事件调用此函数。该函数的参数func是一个回调函数，用来根据回调函数执行具体的计算。例如，当单击“加”按钮时，就调用calc()函数并将a