JavaScript程序设计基础教程（慕课版）（第2版） 教案 单元5、6 JavaScript数组、窗口和框架

PAGE1PAGE单元5JavaScript数组课程名称JavaScript程序设计项目名称JavaScript数组任务名称JavaScript数组课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.具备使用二维及多维数组的能力2.具备使用数组常用方法的能力知识目标：1．掌握数组的创建和数组元素的读写2．掌握添加和删除元素的方法素质目标：1.培养学生信息搜集能力2.培养学生团结合作、互帮互助的能力教学内容1.数组及数组元素2.添加和删除元素3.二维及多维数组4.数组常用方法5．教师讲解本任务涉及的知识点6.小结与实训教学重点数组常用方法教学难点使用多维数组教学准备1.装有Chrome浏览器或者Firefox浏览器，并且安装有WAMP的电脑2.教学课件PPT3.教材：《JavaScript程序设计基础教程（微课版）》刘刚人民邮电出版社作业设计运用二维数组统计文本框中输入的各字符个数。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别从数组及数组元素、添加和删除元素、二维及多维数组以及数组常用的方法等进行初步的了解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。数组及数组元素数组是一种数据类型，它包含或者存储了编码的值。JavaScript数组的创建的两种方法：使用array构造函数、使用字面量法创建数组。可以使用[]运算符来存取数组元素。在方括号左边应该是对数组的引用。方括号之中是具有非负整数值的任意表达式。既可以使用这一语法来读一个数组元素，也可以用它来写一个数组元素。二、添加和删除元素JavaScript的数组可以具有任意个数的元素，可以在任何时刻通过添加和删除元素来改变数组元素的个数。二维及多维数组案例：要创建一个3行3列的矩阵，每个元素包含矩阵的i（行）、j（列）及z（深度）之和。varmatrix3x3x3=[];for(vari=0;i<3;i++){matrix3x3x3[i]=[];for(varj=0;j<3;j++){matrix3x3x3[i][j]=[];for(varz=0;z<3;z++){matrix3x3x3[i][j][z]=i+j+z;}}}再用以下的代码输出这个3行3列矩阵的内容。for(vari=0;i<matrix3x3x3.length;i++){for(varj=0;j<matrix3x3x3[i].length;j++){for(varz=0;z<matrix3x3x3[i][j].length;z++){console.log(matrix3x3x3[i][j][z]);}}}数组常用方法JavaScrip数组核心方法方法名描述concat连接两个或更多数组，并返回结果every对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回truefilter对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组forEach对数组中的每一项运行给定函数，这个方法没有返回值join将所有的数组元素连接成一个字符串indexOf返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1lastIndexOf返回在数组中搜索到的与给定参数相等的元素的索引里最大的值map对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组reverse颠倒数组中元素的顺序，原先第一个元素现在变成最后一个，同样原先的最后一个元素变成了现在的第一个slice传入索引值，将数组里对应索引范围内的元素作为新数组返回some对数组中的每一项运行给定函数，如果任一项返回true，则返回truesort按照字母顺序对数组排序，支持传入指定排序方法的函数作为参数toString将数组作为字符串返回valueOf和toString类似，将数组作为字符串返回同步训练：1.定义一个一维数组，分别实现该数组的倒转和文本排序及数值排序。2.使用无参构造函数，创建一个空数组。通过学习，学生能够掌握在JavaScript中添加和删除元素、使用二维及多维数组以及数组常用方法的实际应用。本节课主要运用案例教学法，通过对JavaScript数组元素的理解，达到能够独立熟练运用JavaScript数组来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方式。单元6窗口和框架课程名称JavaScript程序设计项目名称窗口和框架任务名称窗口和框架课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.具备进行窗口相关操作的能力2.具备进行窗口框架控制的能力3.具备显示框架链接和实现浮动窗口的能力知识目标：1.理解Window对象的概念2.掌握Window对象的属性和方法3.掌握窗口相关操作4.掌握窗口框架的概念、基本机构和分割方式素质目标：1.培养学生信息搜集能力2.培养学生团结合作、互帮互助的能力；教学内容1.Window对象的概念2.Window对象的属性和方法（1）利用Window对象的属性和方法实现效果展示与代码实现（2）学生动手操作3.窗口相关操作4.窗口框架的概念、基本机构和分割方式5.窗口框架控制6.FRAME之间的链接7.浮动窗口8.教师讲解本模块内容涉及的知识点9.实训与小结教学重点1.Window对象的属性和方法2.窗口相关操作3.窗口框架控制教学难点1.FRAME之间的链接2.浮动窗口教学准备1.装有Chrome浏览器或者Firefox浏览器，并且安装有WAMP的电脑2.教学课件PPT3.教材：《JavaScript程序设计基础教程（微课版）》刘刚人民邮电出版社作业设计编写一段程序实现无间断的图片循环滚动效果。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别从Window对象的概念、Window对象的属性和方法、窗口相关操作、窗口框架的概念、基本机构和分割方式、窗口框架控制、FRAME之间的链接、浮动窗口等知识点入手来进行讲解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。一、什么是Window对象在JavaScript中，一个浏览器窗口就是一个Window对象。Window对象主要用来控制由窗口弹出的对话框、打开窗口或关闭窗口、控制窗口的大小和位置等。二、Window对象的属性和方法Window对象属性属性描述closed返回窗口是否已被关闭defaultStatus设置或返回窗口状态栏中的默认文本document对document对象的只读引用history对history对象的只读引用innerheight返回窗口的文档显示区的高度innerwidth返回窗口的文档显示区的宽度length设置或返回窗口中的框架数量location用于窗口或框架的location对象name设置或返回窗口的名称navigator对navigator对象的只读引用outheight返回窗口的外部高度outwidth返回窗口的外部宽度pageXOffset设置或返回当前页面相对于窗口显示区左上角的X位置pageYOffset设置或返回当前页面相对于窗口显示区左上角的Y位置parent返回父窗口Screen对Screen对象的只读引用self返回对当前窗口的引用，等价于Window属性status设置窗口状态栏的文本top返回最顶层的窗口windowwindow属性等价于self属性，它包含了对窗口自身的引用screenLeftscreenTopscreenXscreenY只读整数。声明了窗口左上角在屏幕上的X和Y坐标。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenYWindow对象方法方法描述alert()显示一段带有消息和一个确认按钮的警告框blur()把键盘焦点从顶层窗口移开clearInterval()取消由setInterval()设置的timeoutclearTimeout()取消由setTimeout()设置的timeoutclose()关闭浏览器窗口confirm()显示带有一段消息以及确认按钮和取消按钮的对话框createPopup()创建一个pop-up窗口focus()把键盘焦点给予一个窗口moveBy()可相对窗口的当前坐标把它移动到指定的像素moveTo()把窗口的左上角移动到一个指定的坐标open()打开一个新的浏览器窗口或查找一个已命名的窗口print()打印当前窗口内容prompt()显示可提示用户输入的对话框resizeBy()按照指定的像素调整窗口的大小resizeTo()把窗口的大小调整到指定的宽度和高度scrollBy()按照指定的像素值来滚动内容scrollTo()把内容滚动到指定的坐标setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式setTimeout()在指定的毫秒数后调用函数或计算表达式三、窗口相关操作窗口位置获取、窗口位置移动、窗口大小获取、窗口大小调整、打开窗口、关闭窗口。四、窗口框架的概念、基本机构和分割方式窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览多个不同网页的效果。框架Frameset结构的基本格式如下。<frameset><framesrc="url“name=“w1”><framesrc="url“name=“w2”>...<NOFRAMES>...</NOFRAMES></frameset>窗口框架的分割方式可分为两种，一种是水平分割（rows属性），另一种是垂直分割（cols属性）。五、窗口框架控制框架设置标签frameset主要有rows、cols、border、bordercolor和frameborder5个属性。子窗口设置标签frame主要有6个属性：src、name、marginwidth、marginheight、scrolling和noresize。六、FRAME之间的链接对于框架网页中的超链接，可用target属性指定该链接的内容在哪个窗口显示。七、浮动窗口在一个页面中直接引入另一个页面，这种技术称为浮动的窗口（Floatingframe），也叫“内部框架”，在HTML中通过iframe标签实现，其语法如下所示。<Iframesrc="URL"name="子窗口名称"width="x"height="x"scrolling="[OPTION]"frameborder="x"marginheight=0marginwidth=0></iframe>同步训练：使用JavaScript来进行在iframe父子窗口之间相互操作dom对象。