网页前端技术-电子教案-王敏杰 模块三任务三.ppt

《网页前端技术-电子教案-王敏杰 模块三任务三.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、JavaScript任务三认识浏览器对象案例分解案例资讯打显示Navigator对象属性子窗体反值到母窗体Screen综合应用实例隐藏菜单Navigator对象概述Window对象概述Screen对象概述Location对象概述教学目的：掌握Navigator对象掌握Window对象掌握Screen对象掌握Location对象教学重点：掌握Navigator对象、掌握Window对象掌握Screen对象、掌握Location对象教学难点：掌握Navigator对象、掌握Window对象掌握Screen对象、掌握Locati

2、on对象每个HTML文档被装入浏览器中时浏览器就创建了一系列分级的对象体系，此体系反映了HTML文档的属性。在每一个HTML页中含有下面的对象：navigatorWindowdocumentlocation案例资讯案例一显示Navigator对象属性本案例实现的是显示所用浏览器的Navigator对象属性，查看浏览器的一些特性，包括：代码、名称、版本、语言、编译平台和用户表头。了解一下关于Navigator对象Navigator对象概述Navigator对象是由JavaScriptruntimeengine自动创建的，包含

3、有关客户机浏览器的信息。Navigator对象是一个JavaScript对象。Navigator对象是Window对象的一个属性，可通过window.navigator属性来访问。案例步骤显示Navigator对象属性打字机式字符输出创建html文件以后，我们可以在里面输入如下参考代码：

4、script">document.write("您的浏览器信息：

");document.write("
1. 代码："+navigator.appCodeName);document.write("
2. 名称："+navigator.appName);document.write("
3. 版本："+navigator.appVersion);document.write("
4. 语言："+navigator.language);document.write("
5. 编译平台："+navigator.plat

   5、form);document.write("

6. 用户表头："+navigator.userAgent);基于360浏览器的运行结果如图所示基于IE的浏览器的运行结果如图所示基于遨游浏览器的运行结果如图所示基于Opera浏览器的运行结果如图所示基于谷歌浏览器的最终运行结果如图所示基于火狐浏览器的运行结果如图所示案例资讯案例二子窗体返值到母窗体本案例实现的是窗体之间传值的功能，首先是打开母窗体，然后点击按钮打开子窗体，在子窗体中输入相应的值，然后关闭子

   6、窗体，把子窗体输入的值传回母窗体中并显示出来。1.Window对象的概述2.Window对象的常用属性3.Window对象的常用方法Window对象概述Window对象在JavaScript的客户层次上处于顶端。一个window对象不仅可以描述一个顶层的窗体，而且可以描述一个frameset内的frame。案例步骤子窗体返值到母窗体创建html文件以后，我们可以在里面输入代码之后会显示类似如图的结果：以下为本案例的母窗体初期运行结果，如图所示单击“打开”按钮之后弹出子窗体，如图所示两个输入框输入值单击“关闭”按钮之后，显示

   7、母窗体，如图所示案例三Screen综合应用实例本案例是一个Screen综合应用的实例，显示屏幕宽度、屏幕高度度、屏幕可用宽度、屏幕可用高度、每英寸水平点数、每英寸垂直点数、每英寸水平方向的常规点数、屏幕的刷新率、调色板的比特深度、缓冲器上的调色板的的比特深度、是否使用了字体平滑效果等属性。案例资讯1.Screen对象概述2.Screen的常见属性Screen对象的概述Screen对象包含有关客户端显示屏幕的信息没有应用于screen对象的公开标准所有浏览器都支持该对象案例步骤Screen综合应用实例创建html文件以后，我

   8、们可以在里面输入代码之后会显示类似如图的结果：基于IE浏览器的运行结果如图所示基于GoogleChrome浏览器的运行结果如图所示基于Opera浏览器的运行结果如图所示基于Firefox浏览器的运行结果如图所示案例四隐藏菜单本案例实现的是隐藏菜单的功能，在很多的网页中菜单是隐藏的，只有当鼠标落到相应的位