《web前端设计》教案09.pdfVIP

教案

授课时间2018年5月2日第09周第5-8节

课程内容项目三BOM和DOM应用（window对象属性、方法、事件）

授课班级2016数字媒体应用技术1、2合班授课地点S301

1、掌握浏览器常用对象的常用属性及用法；

知识目标

2、掌握Document对象的常用属性及方法

教学目标能力目标1、能够使用window、history、location对象编写实用小功能；

1、具有认真负责、吃苦耐劳、实事求是的工作态度和严谨细致的工作

素质目标

作风、良好的职业道德。

重点

1、浏览器常用对象的属性、方法

2、window事件的类型

重点难点

难点

解决方法

JavaScript处理window事件

重点内容采用详述、多举实例方式讲解；难点内容以原理剖析、动画演示、操作演示等直

观的方式进行讲解。

1、梳理教材，备课，整理教学素材，标记书本重难点，理顺教学思路，修订完善课件。

2、提前发布教学视频，提醒学生登录教学平台自主观看视频，进行课前预习，如有疑问，

可发讨论和记笔记。

教学准备

3、教师登录网络教学平台，了解学生课前预学的进度统计，掌握学生课前预学的总体情

况。根据学生课前预学提交的问题讨论，有针对性地调整知识点讲解的内容。

4、检查机房的广播设备。

课后作业书本课后作业

能力训练项

任务制作弹出窗口、实现禁止复制和回到顶部等

目

教学过程

（根据教学设计延续）

课前准备

1、登录网络教学平台，了解学生课前预学的进度统计，掌握学生课前预学的总体情况。根据学生课前预

学提交网络教学平台的问题讨论，有针对性地调整知识点讲解的内容。

2、使用超星学习通移动端，进行点名签到。

一、任务引入

1、上一节课学习了JavaScript读取网页元素的值，并制作简易注册页面。现在某公司需要在网页上制

作弹出窗口，提示用户注意事项，并且由于网页内容存在敏感数据，公司希望网页内容不能复制。那我

们需要怎么样实现？引入本节课任务——JavaScript制作弹出窗口效果，并且启用禁止复制内容等。

2、教师展示任务的效果。

弹出窗口

回到顶部

二、任务内容

任务1：模拟用户注册过程。若用户在登录窗口中单击“用户注册”按钮，则弹出注册窗口。若用户在

登录页面中单击“退出”按钮，则弹出确认对话框。

任务2：实现禁止复制，禁止网页内容复制。

任务3：制作回到顶部功能。

三、任务分析

任务1弹出注册窗口可以采用以下步骤：

1.完成静态页面设计。

2.添加“用户注册”按钮的单击事件处理函数openwindow()，在事件处理函数中调用window对象的open

方法，打开注册页面。

3.添加“退出”按钮的单击事件处理函数closewindow()，在事件处理函数中调用window对象的close

方法，关闭当前页面。

任务2实现禁止复制可以采用以下步骤：

1.新建HTML5网页

2.在body标签内加入oncopy“returnfalse”等相关代码。

四、知识讲解

1、JavaScript中对象的总体分类

浏览器对象的分层结构

2.window对象常用的属性及方法

提问：如果要实现网页中后退功能，会用到哪个对象？

答案：history

提问：window.alert()和alert()是一样的吗？

答案：一样。属于window对象的方法可以省略window。

3.window.open（）的使用方法

Window.open()的p