TP8_浏览器对象

back ( )方法相当于后退按钮 方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进 页，等价于 代表前进1页 等价于forward( )方法； 方法； 代表前进 方法 go(-1) 代表后退 页，等价于 代表后退1页 等价于back( )方法； 方法； 方法 Hands-On实训教程系列 实训教程系列
对象简介
现实世界中的一切事物都是对象 对象的描述 外观：在计算机语言中称为对象的属性 行为：在计算机语言中称为对象可以实现的方法 例如：一部手机是一个对象 属性 品牌 颜色 大小 重量 方法 接打电话 收发短信 看视频 听音乐
Hands-On实训教程系列 实训教程系列
JavaScript 对象简介
location对象 对象 Location 对象
属性
名称 host hostname href 说明 设置或检索位置或 URL 的主机名和端口号 设置或检索位置或 URL 的主机名部分 设置或检索完整的 URL 字符串
方法
名称 assign("url") reload() 说明 加载 URL 指定的新的 HTML 文档。 重新加载当前页
Hands-On实训教程系列 实训教程系列
window对象常用的方法和事件 对象常用的方法和事件
常用的方法
名称 alert ("提示信息") confirm("提示信息“) open ("url") close ( ) setTimeout("函数", 毫秒数) 说明 显示一个带有提示信息和确定按钮的对话框 显示一个带有提示信息、确定和取消按钮的对话框 打开具有指定名称的新窗口，并加载给URL 所指定 的文档 关闭当前窗口
方法
名称 write ("text") getElementById( ) 说明 将文本写入文档同时可嵌入HTML标签 根据HTML元素指定的ID，获得唯一的一个 HTML元素。
Hands-On实训教程系列 实训教程系列
write方法 方法
如果写入的是字符串常量，需要用双引号引起来 如果写入的是单纯的变量（例如：从文本框中获取的 值），不加双引号 如果要常量和变量同时显示时，常量和变量之间用加 号（“+”） 连接
Hands-On实训教程系列 实训教程系列
制作浮动的广告图片
Hands-On实训教程系列 实训教程系列
完整代码
使用body需要把代码的前 两行删除或者将body改成 documentElement
Hands-On实训教程系列 实训教程系列
对联广告的实现思路
在页面中插入层，然后在层中插入图片 修改层的Id 值，做到见名识意，例如左边关闭层的 Id=“closeLeftLayer” 调整层与图像的大小和位置，使得层与图像的大小相 同，位置在页面中适当 获取层对象对层动态设置
Hands-On实训教程系列 实训教程系列
DOM对象模型 对象模型
window 窗口对象

location 地址对象
浏览器对象的分层结构 document 文档对象
window.document.myform.text1 FORM 表单对象
Hands-On实训教程系列 实训教程系列
Window对象常用的属性 对象常用的属性
常用的属性 名称 status screen history location document 说明 指定浏览器状态栏中显示的临时消息 有关客户端的屏幕和显示性能的信息。 有关客户访问过的URL的信息。 有关当前 URL 的信息。 表示浏览器窗口中的HTML文档
第八章 JavaScript浏览器对象
Hands-On实训教程系列
上节回顾
JavaScript脚本的基本结构？ JavaScript与C基本语法的异同之处？ 简述parseInt()函数和parseFloat()函数的作用
Hands-On实训教程系列 实训教程系列
预习检查
window对象常用的属性有哪些？ Document对象的常用属性和方法？
隐藏层:层对象.style.display=“none” 更改层的上坐标：层对象.style.pixelTop=初始坐标+滚动 高度
Hands-On实训教程系列 实训教程系列
页面对象常用动态样式属性
格式：对象.style.属性=属性值 例:document.getElementById(“对象 id”).style.display=“none”; 常见的页面坐标属性
showModalDialog( ) 在一个模式窗口中显示指定的HTML文档 设置定时器：经过指定毫秒值后执行某个函数
onLoad事件：在窗口或框架完成文档加载时触发
Hands-On实训教程系列 实训教程系列
Window对象练习 对象练习
Hands-On实训教程系列 实训教程系列
完整代码实现
<SCRIPT language="javascript"> function register( ) { window.alert("系统正忙，请稍候 秒钟 系统正忙， 秒钟"); 系统正忙 请稍候5秒钟 window.status="系统当前状态：您正在注册用户 系统当前状态： 系统当前状态 您正在注册用户......"; setTimeout("openwindow()",5000); } function openwindow() } function closewindow( ) { if(window.confirm("您确认要退出系统吗？")) 您确认要退出系统吗？ 您确认要退出系统吗 window.close( ); } </SCRIPT> <INPUT type=“button” name=“reggister( )"> <INPUT type="button" name="exitButton" value=" 退 出 " onclick="closewindow( )">
我们需要预先制作好广告页面，假设为bill.html，打开广告窗口的语句如下 open(“bill.html”,“广告窗口”，”width=350,height=230, scrollbar=0, toolbar=0, location=0, menubar=0 ,status=0” ）
Hands-On实训教程系列 实训教程系列
Hands-On实训教程系列 实训教程系列
onLoad事件 事件
小练习：具有自动打开广告窗口和在浏 览器状态栏中显示“欢迎你......”信息的页面
Hands-On实训教程系列 实训教程系列
Open的窗口特征 的窗口特征
open（”打开窗口的url”，”窗口名”，”窗口特征”） （ 打开窗口的 窗口特征” ， 窗口名” 窗口的特征如下，可以任意组合： 窗口的特征如下，可以任意组合： height： 窗口高度； ： 窗口高度； width： 窗口宽度； ： 窗口宽度； top： 窗口距离屏幕上方的象素值； ： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； ：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes为显示； 为显示； ： 是否显示工具栏， 为显示 menubar，scrollbar 表示菜单栏和滚动栏。 表示菜单栏和滚动栏。 ， resizable： 是否允许改变窗口大小，yes或1为允许 ： 是否允许改变窗口大小， 或 为允许 location： 是否显示地址栏，yes或1为允许 ： 是否显示地址栏， 或 为允许 status：是否显示状态栏内的信息，yes或1为允许； 为允许； ：是否显示状态栏内的信息， 或 为允许
replace("url") 通过加载 URL 指定的文档来替换当前文档
Hands-On实训教程系列 实训教程系列
history 和location应用 应用
Hands-On实训教程系列 实训教程系列
document对象 对象
属性
名称 bgColor 说明 设置或检索 Document 对象的背景色
Hands-On实训教程系列 实训教程系列
本章目标
掌握常用的浏览器对象 会使用document对象的getElementById( )方 法访问DIV层对象
演示示例1 演示示例1：注册信息特效
演示示例2 演示示例2：广告窗口特效
演示示例3 演示示例3：对联广告特效
Hands-On实训教程系列 实训教程系列
三类对象
浏览器窗口window 文档 document url地址等 String字符串对象 Date日期对象 Math数学对象等
浏览器对象
脚本对象
HTML 对象
各种HTML标签: 段落<P> 图片<IMG> 超链接<A>等
Hands-On实训教程系列 实训教程系列
DOM对象模型 对象模型
浏览器对象的分层结构
Hands-On实训教程系列 实训教程系列
onLoad事件 事件
Hands-On实训教程系列 实训教程系列
history 对象 history 对象
方法
名称 back( ) forward( ) go("url" or number) 说明 加载 History 列表中的上一个 URL。 加载 History 列表中的下一个 URL。 加载 History 列表中的一个 URL，或要求浏 览器移动指定的页面数。
top:指定元素的上边界位置。 left:指定元素的左边界位置。 pixelTop:设置或返回元素的上边界。 scrollTop:页面one:隐藏对象 block:显示对象