燕十八

BOM 浏览器对象模型

                                       BOM 浏览器对象模型


winddow.document,为什么之前的学习中，直接写document?
答：因为window对象是最大的一个对象，所有对象都在其内部
写document 默认就是在最全局的window下面属性或了对象。

Document对象其实是window的一人属性(或子对象)

DOM--->docudent
BOM--->window

Window对象的子对象

  navigator对象属性

(一) window.navigator
document.write(window.navigator.appMinorVersion+'---1. 返回浏览器的次级版本'+'<br />');
document.write(window.navigator.appCodeName+'--- 2.返回浏览器的代码名'+'<br />');
document.write(window.navigator.appVersion+'--- 3.返回浏览器的平台和版本信息'+'<br />');
document.write(window.navigator.browserLanguage+'---5.返回当前浏览器的语言'+'<br />');
document.write(window.navigator.cookieEnabled+'--- 6.返回指明浏览器中是否启用 cookie 的布尔值'+'<br />');
document.write(window.navigator.cpuClass+'--- 7.返回浏览器系统的 CPU 等级'+'<br />');
document.write(window.navigator.onLine +'--- 8.返回指明系统是否处于脱机模式的布尔值'+'<br />');
document.write(window.navigator.platform+'--- 9.返回运行浏览器的操作系统平台'+'<br />');
document.write(window.navigator.systemLanguage+'---10.返回 OS 使用的默认语言'+'<br />');
document.write(window.navigator.userAgent +'--- 11.返回由客户机发送服务器的 user-agent 头部的值'+'<br />'); document.write(window.navigator.userLanguage+'--- 12.返回 OS 的自然语言设置 ' +'<br />');

 

 window.navigator的代码展示：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>navigator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
document.write(window.navigator.appMinorVersion+'---1. 返回浏览器的次级版本'+'<br />');
document.write(window.navigator.appCodeName+'--- 2.返回浏览器的代码名'+'<br />'); 
document.write(window.navigator.appVersion+'--- 3.返回浏览器的平台和版本信息'+'<br />'); 
document.write(window.navigator.browserLanguage+'---5.返回当前浏览器的语言'+'<br />'); 
document.write(window.navigator.cookieEnabled+'--- 6.返回指明浏览器中是否启用 cookie 的布尔值'+'<br />'); 
document.write(window.navigator.cpuClass+'--- 7.返回浏览器系统的 CPU 等级'+'<br />'); 
document.write(window.navigator.onLine +'--- 8.返回指明系统是否处于脱机模式的布尔值'+'<br />'); 
document.write(window.navigator.platform+'--- 9.返回运行浏览器的操作系统平台'+'<br />'); 
document.write(window.navigator.systemLanguage+'---10.返回 OS 使用的默认语言'+'<br />');
document.write(window.navigator.userAgent +'--- 11.返回由客户机发送服务器的 user-agent 头部的值'+'<br />'); document.write(window.navigator.userLanguage+'--- 12.返回 OS 的自然语言设置 ' +'<br />');
</script>

<style type="text/css">
</style>
</head>
    <body>
    </body>
</html>

 

(二) Navigator 对象的方法
方法 描述
1. javaEnabled() 规定浏览器是否启用 Java
2. taintEnabled() 规定浏览器是否启用数据污点 (data tainting)

history对象

(一)window.history属性
1. length 返回浏览器历史列表中的 URL 数量

(二)window.history对象的方法

1.back() 加载 history 列表中的前一个
2. forward() 加载 history 列表中的下一个
3. go() 加载 history 列表中的某个具体页面

代码如下:
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
 3 <head>
 4 <title>window.history对象</title>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <meta name="description" content="" />
 7 <meta name="keywords" content="" />
 8 <script type="text/javascript">
 9     function back2(){
10         window.history.back(-1);           //back里面的参数表示后退的步数
11     }  
12  function forward2(){
13          window.history.forward(1);        //forward表示参数表示前进的步数
14     }  
15 function go2(){
16    alert(window.history.go(-1));           //go里的参数如果为正数表示前进，为负数表示后退
17 }
18 function much_number(){
19    alert(window.history.length);           
20 }
21 
22 </script>
23 
24 <style type="text/css">
25 </style>
26 </head>
27     <body>
28         <input type="button" name="back" value="后退" onclick="back2();"  />
29         <input type="button" name="forward2" value="前进" onclick="forward2();" />
30         <input type="button" name="much_number" value="前进和后退的数目个数" onclick="much_number();" />
31         <input type="button" name="go" value="有前进和后退的功能" onclick="go2();" />
32     </body>
33 </html>

screen对象


Screen 对象实际上是 JavaScript 对象，而不是 HTML DOM 对象
Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息

（一）Screen 对象的属性

IE: Internet Explorer, F: Firefox, O: Opera.

属性描述IEFO
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。 4 1 9
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 4 1 9
bufferDepth 设置或返回在 off-screen bitmap buffer 中调色板的比特深度。 4 No No
colorDepth 返回目标设备或缓冲器上的调色板的比特深度。 4 1 9
deviceXDPI 返回显示屏幕的每英寸水平点数。 6 No No
deviceYDPI 返回显示屏幕的每英寸垂直点数。 6 No No
fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。 4 No No
height 返回显示屏幕的高度。 4 1 9
logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。 6 No No
logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。 6 No No
pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。 No 1 9
updateInterval 设置或返回屏幕的刷新率。 4 No No
width 返回显示器屏幕的宽度。 4 1 9

代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
 3 <head>
 4 <title>window.screen</title>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <meta name="description" content="" />
 7 <meta name="keywords" content="" />
 8 <script type="text/javascript">
 9     document.write(window.screen.availHeight+'---1.返回显示屏幕的高度 (除 Windows 任务栏之外)'+'<br />');
10     document.write(window.screen.availWidth+' ---2.返回显示屏幕的宽度 (除 Windows 任务栏之外)'+'<br />');
11     document.write(window.screen.bufferDepth+'---3.设置或返回在 off-screen bitmap buffer 中调色板的比特深度'+'<br />');
12     document.write(window.screen.colorDepth+' ---5.返回目标设备或缓冲器上的调色板的比特深度'+'<br />');
13     document.write(window.screen.deviceXDPI+' ---6.返回显示屏幕的每英寸水平点数'+'<br />');
14     document.write(window.screen.deviceYDPI +'---7.返回显示屏幕的每英寸垂直点数'+'<br />');
15     document.write(window.screen.fontSmoothingEnabled+'---8.返回用户是否在显示控制面板中启用了字体平滑'+'<br />');
16     document.write(window.screen.height+' ---9.返回显示屏幕每英寸的水平方向的常规点数'+'<br />');
17     document.write(window.screen.logicalXDPI+'---10.返回显示屏幕的宽度 (除 Windows 任务栏之外)'+'<br />');
18     document.write(window.screen.pixelDepth+'---11.返回显示屏幕的颜色分辨率（比特每像素）。'+'<br />');
19     document.write(window.screen.updateInterval+'---12.设置或返回屏幕的刷新率'+'<br />');
20     document.write(window.screen.width+'---13.返回显示器屏幕的宽度'+'<br />');
21 </script>
22 
23 <style type="text/css">
24 </style>
25 </head>
26     <body>
27     </body>
28 </html>
29 
30

location 对象

location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问

IE: Internet Explorer, F: Firefox, O: Opera.

location 对象的属性

 

属性描述IEFO
hash 设置或返回从井号 (#) 开始的 URL（锚）。 4 1 9
host 设置或返回主机名和当前 URL 的端口号。 4 1 9
hostname 设置或返回当前 URL 的主机名。 4 1 9
href 设置或返回完整的 URL。 4 1 9
pathname 设置或返回当前 URL 的路径部分。 4 1 9
port 设置或返回当前 URL 的端口号。 4 1 9
protocol 设置或返回当前 URL 的协议。 4 1 9
search 设置或返回从问号 (?) 开始的 URL（查询部分）。 4 1 9

 

location 对象的方法
方法描述IEFO
assign() 加载新的文档。 4 1 9
reload() 重新加载当前文档。 4 1 9
replace() 用新的文档替换当前文档。 4 1 9 
window对话框
alert()    (弹出框) 有确定
confirm()  (确认框，用得较多)有 确定，取消
prompt()   ('提示信息','默认值')，提示输入框(用得较少)

代码展示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>location对象及winow对话框</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
    function reg(){
      prompt('请输入你的值','例：张三');
    }
    function qubaidu(){
    window.location.href='http://www.baidu.com';
    }
    function delete2(){
     confirm('你真的要删除吗？');   
    }
    function alert2(){
    alert('你好呀。');
    }
</script>

<style type="text/css">
</style>
</head>
    <body>
    <p><input type="button" value="接收你输入的值" onclick="reg();" /></p>
    <p><input type="button" value="删除邮件" onclick="delete2();" /></p>
    <p><input type="button" value="去百度" onclick="qubaidu();"/></p>
    <p><input type="button" value="常用的alert" onclick="alert2();"/></p>
    </body>
</html>


定时器


1. setTimeout('事件（即要执行的函数）'，'毫秒数')  //在指定的'毫秒数'后，执行'事件（即要执行的函数）'1次


2. window.setIntval('事件(调用相应函数)',时间);  //每经过'时间'，执行'事件(调用相应函数)'

如何清除定时器？
答：在创建定时器的时候，把创建结果赋给一个'一个定时器变量'
比如：var clock=window.setInterval()  
再用clearInterval(clock)来实现


代码展示：




 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
 3 <head>
 4 <title>定时器</title>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <meta name="description" content="" />
 7 <meta name="keywords" content="" />
 8 <script type="text/javascript">
 9 /*
10 function t(){
11 alert('5秒到，快走');
12 window.setTimeout('t();',2*1000);  //定一段时间后，执行某一个函数(只执行一次)
13 //window.location.href='http://www.baibu.com';  
14 }
15 t();
16 */
17 
18 function t(){
19 alert('5秒到，快走');
20 }
21 var clock = window.setInterval('t()',2*1000);  //把定时器的返回值记在一个变量里，即变量指向定时器
22 function st(){
23 clearInterval(clock);    //清除定时器
24 
25 }
26 </script>
27 
28 <style type="text/css">
29 </style>
30 </head>
31     <body>
32         <input type="button" value="别烦人了" onclick="st();" />
33     </body>
34 </html>









            

            
posted @ 
2012-11-16 01:03 
启红 
阅读(543) 
评论(0) 
编辑 
收藏 
举报