网页设计与制作——JavaScript+jQuery标准教程 教案 第4章 类和对象.docx

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

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号4授课日期月日月日月日月日授课班级课内教学内容：第4章类和对象课外学习任务：(1)课前：以小组为单位，分析类和对象的语法规则以及使用准则并以PPT的形式记录下来。(2)课后：自定义对象并使用方法实现成绩的输出。创建并移动浏览器窗口。教学目标：知识目标 掌握对象的定义； 掌握对象构造器； 掌握类和对象； 掌握浏览器对象模型。能力目标

2、能够掌握对象和类的使用； 能够使用浏览器对象模型实现对浏览器的控制。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握类和对象的使用，理解并应用专业知识。重点难点及解决方法：（I）重点：掌握类和方法的语法规则解决方法：通过课堂示例+各种知识点相结合的方法，教师讲解使用类和方法，引导学生积极思考，掌握相应知识；同时通过课堂示例展示,使学生可以掌握类和对象的语法规则等相关知识;培养学生的思维能力和分析问题解决问题的能力。（2）难点：掌握浏览器对象模型的使用解决方法：通过案例解析+启发式教学讲解的方式，细致讲解浏览器对象模型的功能以及使用方法。帮助学生掌握使用浏览器对象模型的方

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

4、引示例】在JaVaSCriPt中，几乎“所有事物”都是对象。使用对象处理数据可以让数据之间的关联性更强。开发者不仅可以自定义对象，还可以直接使用JaVaSCriPt提供的系统对象。例如，可以使用自定义构造函数直接实例化对象进行使用，还可以使用系统对象Data直接获取当前的时间。1 .面向对象（教学重点）【自定义对象】定义对象的属性和方法需要使用冒号（:），其语法形式如下所示。var对象=属性1:属性值1,.,属性n:属性值n,方法1:function。语句块;方法fmction（）语句块;例如，定义一个变量对象student的代码如下所示。varstudent=name:张三,score:fu

5、nction。a1ert（总分300分“）;【访问对象的属性和方法】访问对象的属性可以使用点运算符（.）或方括号（）实现，其语法形式如下所示。对象名.属性名或对象名属性名”例如，访问对象SIUden1的属性，代码如下所示。student.name或studentname1访问对象的方法需要使用点运算符（.），其语法形式如下所示。对象名.方法名（）；例如，访问对象StUdent的方法，代码如下所示。student.score（）;【对象构造器】定义对象构造器的语法如下所示。function构造器名（形参列表）（IhiS.属性名=形参；this.方法名=fimction（）语句块;）定义构造器之后

6、，使用构造器和new关键字实现对象的创建，其语法形式如下所示。var对象名=new构造器名（实参列表）；【定义类】在JavaScript中定义类，需要使用c1ass关键字与ConS1nICtoro构造函数，其语法形式如下所示。c1ass类名（COIIStrUCtOr（形参1,.,形参n）（IhiS.属性=属性值；）方法名0语句块）【实例化对象】实例化对象需要使用对应的类以及new关键字，其语法形式如下所ZjSovar对象名=new类名（形参）；实例化对象之后，对象就会拥有对应类的属性和方法。对象可以使用点运算符（.）实现对属性和方法的使用。【内置对象】1.String对象String对象用于处

7、理文本内容，主要针对字符串类型的数据。String对象可以通过创建或直接调用两种方式使用。例如，使用String对象定义变量s,代码如下所示。vars=newString();经过定义，变量S可以调用Smng对象自带的属性和方法。如果直接使用String对象，也可以将对应的变量转换为字符串，其语法形式如下所示。String(s);其中，S是指要转换为字符串的常量或变量。String对象的属性如表4.1所示。属性功能constructor对创建该对象的函数能)引用Iensth字符串的长度Drototvne允许向对象添加属性不I方法使用String对象的方法可以实现字符串的样式修改、查找以及替换等

8、功能。String对象的常用方法如表4.2所示。方法功能CharAt()返回在指定位置的字展COnCaM)连接字符串indexf()检索字符串rep1ace替换与正则表达式匹酉1的子串search检索与正则表达式相4:配的值sma11。使用小字号来显示字月2.Math对象Math对象用于执行数学相关的任务，包括三角函数、平方根等多种公式运算。Math对象可以直接调用，不需要创建。Math对象的属性如表4.3所示。Math对象的方法多用于实现三角函数运算，具体方法请查阅相关资料。属性功能E_返回欧拉数I.N2返回2的自然对数1N1O返回10的自然对数1OG2E返回E的以2为底的X数1OGIOE返

9、回E的以10为底的勺数P1返回P1SORT12返回1/2的平方根S0RT2返回2的平方根3.Array对象Array对象为数组对象，用于在单个变量中实现多个数据的存储。Array对象的属性如表4.4所示。Array对象的方法可以实现对数组的排序、查找、添加以及删除等操作，具体请查询相关资料。属性功能constructor返回创建Array对象原型的函数1ength设置或返回数组中元第；的数量nrototvne允许向数组添加属性不I方法4.Date对象Date对象用于处理日期和时间相关内容。Date对象需要进行创建后才能使用。Date对象的属性如表4.5所示。Date对象的方法可以实现返回和设置

10、年、月、日、时、分、秒等多种类型的时间数据，并且还可以返回和设置指定范围的时间信息，具体方法请查阅相关资料。属性功能constructor返回创建Date对象京型的函数DrototYoe允许向对象添加属性不I方法【案例分析41】根据输入内容输出员工工资信息工厂会定时为每个员工发放工资，为每个员工计算工资时涉及的数据和操作方法是相同的，此时可以将计算工资任务作为一个对象进行处理。根据不同员工的基础工资、奖金等项目，对工资进行计算。本案例使用对象构造器实现对象的创建，并根据输入的信息输出对应员工工资信息2.初识浏览器对象模型BOM用于JaVaSCriPt和浏览器之间的交互。BOM没有官方标准，但是

11、现在大部分的浏览器都支持BOM的属性和方法。开发者可以直接使用其属性和方法对浏览器中的内容进行操作。【BOM结构】BOM包括window对象、IOCatiOn对象、navigation对象、history对象、SCreen对象、De）M（DocumentObjectMode1,文档对象模型）等，它们之间的关系如图4.3所示BOMWindoW对象3Thistoryj1寸象1。CatiOn对象navigation对象SCreen对象DOM,WindOW对象（教学重点）window对象的属性和方法】window对象的属性可以用于实现获取浏览器窗口的尺寸、文档的尺，等功能。window对象常用的属性如

12、表4.6所示。属性功能innerheiht返回窗口的文档显示目的高度innerwidth返回窗口的文档显示耳的宽度Outerheight返回窗口的外部高度Oiiterwidth返回窗口的外部宽度window对象的方法可以用于弹出警告窗口、滚动窗口至指定位置以及定时触发函数。window对象常用的方法如表4.7所示。方法功能a1ert显示带有一段消息和一个确认按电I的警告框Droinntn显示提示用户输入的。话框FesizeBvO按照指定的像素调整窗口的大小FesizeToO把窗口的大小调整到指i定的宽度泳扃度s1BGC按照指定的像素值来用动内容Scro11TbO把内容滚动到指定的当标SetIn

13、terva1O按照指定的周期（以曷秒计）来道I用函数或计算表去式SetTirneC11tC在指定的亳秒数后调用I函数或计身!表达式【窗口加载事件】在HTM1文档执行过程中，浏览器会将HTM1文档中的内容从上到卜进行加载。当JavaScript代码位于body标签前面时,可能会导致HTM1文档中的内容还未加载完成，而JaVaSCriP1代码已经开始执行。这样会导致特定JavaScript代码在执行时因为无法获取到对应内容而执行失败。为了保证JaVaSCriPt代码可以在HTM1文档加载完成后再运行，必须使用window对象的on1oad事件。使用on1oad事件可以实现在网页加载完毕后立刻执行对应代码，其语法形式如下所示。window.on1oad=function（）代码块;【案例分析42】根据需求修改窗口尺寸在不同分辨率的显示器中显示的浏览器窗口尺寸不同。另外，由于用户需求不同，浏览器也支持用户使用鼠标调整浏览器窗口的大小。win