JavaScript+jQuery Web前端开发技术（微课版）教案-教学设计 学习单元3 JavaScript函数教学设计_第1页
JavaScript+jQuery Web前端开发技术（微课版）教案-教学设计 学习单元3 JavaScript函数教学设计_第2页
JavaScript+jQuery Web前端开发技术（微课版）教案-教学设计 学习单元3 JavaScript函数教学设计_第3页
JavaScript+jQuery Web前端开发技术（微课版）教案-教学设计 学习单元3 JavaScript函数教学设计_第4页
JavaScript+jQuery Web前端开发技术（微课版）教案-教学设计 学习单元3 JavaScript函数教学设计_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

博学谷——让IT教学更简单，让IT学习更有效《JavaScript+jQueryWeb前端开发技术（微课版）》教学设计课程名称：授课班级：授课学期：教师姓名：年月

课题名称学习单元3JavaScript函数计划课时8课时教学引入人们在处理一些工作量比较大的问题时，经常采用把大问题的分解成多个小问题的方式来解决。在程序设计过程中，也常常采取这种化整为零的方式。将一些功能相对独立或功能重复的代码定义成函数，实现程序中的代码模块化，提高程序的可读性，减少开发工作量，同时便于程序的后期维护。JavaScript函数主要包括函数的定义、调用、参数、返回值以及函数的一些高级应用。教学目标1.知识目标（1）熟练掌握JavaScript函数的基本定义与调用方式；（2）熟练掌握JavaScript函数参数的定义与使用；（3）熟练掌握JavaScript函数返回值的定义与使用；（4）掌握函数表达式、嵌套函数、递归函数以及内置函数等函数的一些高级应用的定义及使用。2.技能目标（1）能够根据需求调用系统函数解决实际问题；（2）能够根据需求定义并调用自定义函数；（3）灵活运用函数解决一些实际应用问题。3.素养目标（1）培养自主学习能力素养；（2）针对同一问题可以通过不同方法来实现，通过对比时间复杂度和空间复杂度找出最优解决方案，培养学生面对问题树立改革创新的自觉意识。教学重点JavaScript函数的定义与调用运用函数解决一些实际应用问题教学难点JavaScript函数参数的定义与使用Javascript函数的高级应用运用函数解决一些实际应用问题教学过程任务3.1优化设计时间显示模块——函数基础（4课时）一、任务描述在前面学习中，所有显示时间功能性代码放在一起，代码容量较大，没有进行模块化设计；JavaScript代码的编写是通过内嵌式实现，没有达到js与html的分离设计效果，针对这两点对代码进行优化设计。二、任务分析分析整个JavaScript源码功能实现部分，日期显示、星期显示、时间显示以及问候语显示功能都相对独立，用户可以将这些内容分别封装到函数中，并在需要时调用相应函数，实现程序的模块化设计；要实现JavaScript与html的分离设计，可将JavaScript代码实现部分放到一个独立的js文件中，并在需要此功能的html文件中进行引用调用；无论是分离函数还是独立设计js文件，都可以定义一次调用多次，从而避免的了因重复定义造成的代码冗余，减少了开发的工作量，提高了开发效率。三、知识点讲解1、JavaScript函数定义JavaScript函数通过关键字function、函数名和一组参数及大括号内需要执行的一段代码定义而成，其基本语法格式如下：function函数名(参数1,参数2,...){ 代码段}2、JavaScript函数调用函数定义后并不会自动执行，只有调用函数的时候才会执行。（1）JavaScript函数调用基本语法格式JavaScript函数调用的语法比较简单，其基本语法格式如下：函数名(参数1,参数2,...)（2）在页面中调用JavaScript函数如果用户要实现一些比较简单的功能，可以在<head>和</head>之间进行函数的定义，然后在<body>和</body>之间进行调用。（3）在事件响应中调用JavaScript函数用户访问页面时，会触发很多用户操作，如单击按钮、敲击键盘或滚动鼠标，这些操作都会触发相应的按钮、键盘或鼠标事件，因此用户可以借助事件响应来调用JavaScript函数。（4）在超链接中调用JavaScript函数JavaScript函数除了可以简单调用、在事件响应中调用，还可以通过超链接调用。3、JavaScript函数参数在函数内部的代码中，当某些值不能确定的时候，可以通过函数的参数从外部接收进来。一个函数可以通过传入不同的参数来完成不同的操作。使用参数时应注意以下几个方面：（1）函数参数分为形式参数和实际参数，形式参数（简称形参）是指在定义函数时函数名后面括号中的变量名称，实际参数（简称实参）是指函数调用时，函数名后面括号中的参数。函数形参和实参的具体语法形式如下：function函数名(形参1,形参2,...){//函数声明的小括号里的是形参//函数体代码}函数名(实参1,实参2,...)（2）JavaScript函数参数的使用非常灵活，它允许函数的形参和实参个数不同。当实参数量大于形参数量时，函数可以正常执行，多余的实参由于没有形参接收，会被忽略，除非使用其他方式（如arguments）才能获得多余的实参。当实参数量小于形参数量时，多出来的形参类似于一个已声明未赋值的变量，其值为undefined。4、使用JavaScript函数的返回值当函数调用时，并不是所有情况都需要把结果进行打印输出，但又期待函数调用后能够给开发者一个反馈，这个反馈称之为返回值，在JavaScript中，函数通过return语句得到一个返回值。（1）带有返回值的JavaScript函数语法格式JavaScript函数通过return得到返回值，其基本语法格式如下：//声明一个带返回值的函数function函数名(形参1,形参2,形参3...){ //函数体 return返回值;}//可以通过变量来接收这个返回值var变量=函数名(实参1,实参2,实参3...)（2）使用带有返回值的JavaScript函数注意事项①每一个函数都会有一个返回值，这个返回值通过关键字“return”进行设置；②若未显式地设置函数的返回值，那么函数会默认返回一个undefined值；③若手动设置了函数的返回值（return）后，函数将返回手动设置的那个值；④在函数中，一旦执行完成“return”语句，那么整个函数就结束了，“return”后的语句将不再执行；⑤“return”返回的值只能有一个；⑥如果需要函数返回多个值，需要将值组合成一个对象或数组进行返回。5、变量作用域JavaScript根据作用域的使用范围的不同，可以将其划分为全局作用域、函数作用域和块级作用域（ES6提供的）。（1）全局变量不在任何函数内声明的变量（显示定义）或在函数内省略var声明的变量（隐式定义）都称为全局变量。全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。（2）局部变量在函数体内利用var关键字定义的变量称为局部变量，它仅在该函数体内有效。局部变量作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。（3）块级变量ES6提供的let关键字声明的变量称为块级变量，仅在“{}”中间有效，如if、for或while语句等。四、任务实施1、利用函数优化日期定义打开任务2.2完成后的诗歌赏析网站首页index.html文件，修改导航栏nav区块之后的JavaScript代码，为代码添加自定义函数showDate()，对日期显示代码进行封装，并在拼接显示结果字符串连接处进行函数的调用。利用函数优化星期数、时间以及问候语定义参照上一步骤，为代码添加自定义函数showWeek()、showTime()和showHello()，对星期显示、时间显示和问候语显示代码进行封装，并在拼接显示结果字符串连接处进行函数的调用。3、定义函数，格式化输出优化程序设计，定义时间格式化函数，用于调用日期显示、星期显示、时间显示函数，并对各个函数返回值进行格式化。为代码添加自定义函数formatTime()，对各个函数的调用进行封装。4、网页运行测试保存并运行网页。五、课堂实践通过测试题的方式检测学生知识学习，通过任务实践掌握JavaScript函数基础。任务3.2实时更新时间显示——函数进阶（4课时）一、复习巩固教师通过任务3.1的完成情况和测试题的测试结果进行分析，对学生掌握薄弱的知识点和技能点进行复习巩固。二、任务描述在任务3.1中为网页添加了问候语和日期显示功能，并利用自定义函数优化了代码设计，但网页上显示的时间是程序运行时的时间，时间固定，不会随着时间的推移而变化。本任务主要实现页面上的时间实时更新，随着时间的变化而变化，同时利用函数的高级应用优化设计代码。三、任务分析在任务3.1中页面时间一直显示运行时的时间，不具备自动更新的作用，用户要想查看当前的时间可以借助手动刷新方式来实现。若要实现系统的自动刷新，实时更新时间，可以借助系统的定时函数来实现这一功能。同时利用匿名函数处理指定事件的方式优化代码设计。四、知识点讲解1、函数表达式函数表达式是将声明的函数赋值给一个变量，通过变量完成函数的调用和参数的传递，它也是JavaScript中另外一种实现自定义函数的方式。2、匿名函数匿名函数调用方式通常有三种：通过函数表达式声明方式调用、通过自调用方式调用以及通过处理事件方式调用。3、回调函数在前面的程序设计中，函数体内所有功能均已定义完整，这种情况称之为静态编程；如果函数体内部分功能尚未定义，由调用者定义，这种情况称之为动态编程，动态编程可以通过回调函数来实现。所谓回调函数指的是一个函数A作为参数传递给一个函数B，然后在B的函数体内调用函数A。其中匿名函数常用作函数的参数传递，实现回调函数。4、JavaScript嵌套函数JavaScript在定义函数时，可以在函数体内部定义新的函数，这就是嵌套函数。内部函数可以使用外部函数的参数及函数的全局变量，嵌套函数的作用域只在函数体内部。在JavaScript中要谨慎使用嵌套函数，因为不合理的使用会大大降低程序的可读性。5、JavaScript递归函数递归函数是嵌套函数调用中一种特殊的调用。它指的是一个函数直接或间接调用函数自身的过程，这种函数称为递归函数。由于递归函数是一个函数从其内部调用其本身，因此如果递归函数处理不当，就会使程序陷入“死循环”。为了防止“死循环”的出现，可以设计一个做自加运算的变量，用于记录函数自身调用的次数，如果次数太多就让它自动退出循环，从而避免“死循环”的出现。JavaScript递归函数的语法格式如下：function递归函数名(参数1){递归函数名(参数2)}说明：在定义递归函数时，需要满足两个必要条件：（1）必须包括一个结束递归的条件；（2）必须包括一个递归调用的语句。6、JavaScript内置函数JavaScript的函数有两种，一种是根据需要由程序员自定义的函数，另外一种是JavaScript内部事先定义好的函数，也就是JavaScript内置函数。内置函数是浏览器内核自带的，不需要引入任何函数库就可以直接使用，在开发过程中，用户可以直接调用内置函数，极大地提高编程效率。JavaScript提供了五类常用的内置函数，分别是常规函数、数组函数、日期函数、数学函数和字符串函数。其中数组常用函数在前面JavaScript语言基础中已经讲过，日期函数、数学函数和字符串函数将在后面章节中介绍，此处介绍一些使用频率较高的常规函数，如下表所示。函数名功能eval()计算某个字符串，并执行其中的JavaScript代码。isFinite()用于检查其参数是否是无穷大。isNaN()用于检查其参数是否是非数字值。parseInt()解析一个字符串，并返回一个整数。parseFloat()解析一个字符串，并返回一个浮点数。encodeURI() 将字符型转化为有效的URIencodeURIComponent()将字符型转化为有效的URI组件decodeURI() 对encodeURI()编码的文本进行解码decodeURIComponent()对decodeURIComponent()编码的文本进行解码五、任务实施1、利用系统函数实现时间自动更新功能打开任务3.1完成后的诗歌赏析网站首页index.html文件，找到任务3.1中优化设计后的JavaScript代码块，找到并修改formatTime()函数，在函数尾部添加setTimeout("formatTime()",1000);定时器函数，实现每隔1秒调用一次formatTime()函数刷新一次页面显示的功能。2、利用匿名函数优化代码设计在index.html文件头部添加JavaScript代码，通过window.onload事件调用匿名函数，匿名函数调用自定义函数formatTime()。同时删除原位置函数调用语句（即步骤1代码段的最后一句语句），实现自定义函数的调用前移。window.onload是窗口加载事件，当网页加载完毕后触发该事件，调用该事件对应的事件处理函数，后续章节将会详细介绍。3、建立JS文件，优化JavaScript代码结构设计在项目文件js文件夹下新建showTime.js文件，将时间显示的JavaScript代码全部复制到showTime.js文件中，并将完成步骤2的index.h

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论