《网页前端技术》JavaScript任务三.ppt

案例步骤 隐藏菜单 创建html文件以后，我们可以在里面输入代码 之后会显示类似如图的结果： 鼠标不在左上角时，如图所示 鼠标落在左上角的控件上的时候，如图所示 JavaScript 任务三 认识浏览器对象 案例分解 案例资讯 打显示Navigator对象属性 子窗体反值到母窗体 Screen综合应用实例 隐藏菜单 Navigator 对象概述 Window 对象概述 Screen 对象概述 Location 对象概述 教学目的：掌握Navigator对象 掌握Window对象 掌握Screen对象 掌握Location对象 教学重点：掌握Navigator对象、掌握Window对象 掌握Screen对象、掌握Location对象 教学难点：掌握Navigator对象、掌握Window对象 掌握Screen对象、掌握Location对象 每个HTML文档被装入浏览器中时浏览器就创建了一系列分级的对象体系，此体系反映了HTML文档的属性。 在每一个HTML页中含有下面的对象： navigator Window document location 案例资讯 案例一 显示Navigator对象属性 本案例实现的是显示所用浏览器的Navigator对象属性，查看浏览器的一些特性，包括：代码、名称、版本、语言、编译平台和用户表头。 了解一下关于Navigator对象 Navigator对象概述 Navigator对象是由JavaScript runtime engine自动创建的，包含有关客户机浏览器的信息。 Navigator对象是一个JavaScript对象。Navigator对象是Window对象的一个属性，可通过window.navigator属性来访问。 案例步骤 显示Navigator对象属性 打字机式字符输出创建html文件以后，我们可以在里面输入如下参考代码： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN HTML HEAD TITLE显示Navigator对象属性/TITLE script type=text/javascript document.write(您的浏览器信息：OL); document.write(LI代码：+navigator.appCodeName); document.write(LI名称：+navigator.appName); document.write(LI版本：+navigator.appVersion); document.write(LI语言：+navigator.language); document.write(LI编译平台：+navigator.platform); document.write(LI用户表头：+navigator.userAgent); /script /HEAD BODY /BODY /HTML 基于360浏览器的运行结果如图所示 基于IE的浏览器的运行结果如图所示 基于遨游浏览器的运行结果如图所示 基于Opera浏览器的运行结果如图所示 基于谷歌浏览器的最终运行结果如图所示 基于火狐浏览器的运行结果如图所示 案例资讯 案例二 子窗体返值到母窗体 本案例实现的是窗体之间传值的功能，首先是打开母窗体，然后点击按钮打开子窗体，在子窗体中输入相应的值，然后关闭子窗体，把子窗体输入的值传回母窗体中并显示出来。 1.Window对象的概述 2.Window对象的常用属性 3.Window对象的常用方法 Window对象概述 Window对象在JavaScript的客户层次上处于顶端。 一个window对象不仅可以描述一个顶层的窗体，而且可以描述一个frameset内的frame。 案例步骤 子窗体返值到母窗体 创建html文件以后，我们可以在里面输入代码 之后会显示类似如图的结果： 以下为本案例的母窗体初期运行结果，如图所示 单击“打开”按钮之后弹出子窗体，如图所示 两个输入框输入值单击“关闭”按钮之后，显示母窗体，如图所示 案例三 Screen综合应用实例 本案例是一个Screen综合应用的实例，显示屏幕宽度、屏幕