29、浏览器开发

javascript在浏览器中的使用（客户端javaScript）

浏览器核心对象：浏览器对象模型 (Browser Object Model,BOM )

BOM由一系列相关的对象构成。
其中Window对象是整个BOM的核心。
所有对象和集合都以某种方式与window对象关联。

一、客户端开发基础

浏览器核心对象
定义了6种重要的对象：
1、window对象表示浏览器中打开的窗口。
2、document对象表示浏览中加载的    文档对象(DOM)
3、location对象包含了浏览器当前的URL（统一资源定位）信息
4、navigator对象包含了浏览器本身的信息
5、screen对象包含了客户端屏幕及渲染能力的信息
6、history对象包含了浏览器访问网页的历史信息。

在客户端javascript中，所有对象都是作为Window对象的属性进行引用的。
在这个结构模型（BOM）中，Window对象代表根结点，（默认前面在所有全局对象、变量、函数前加 Window.）

浏览器对象模型(BOM)

这里去网上找一个BOM对象关系图加上

二、客户端全局对象
Window对象是客户端javascript的全局对象，客户端javascript程序正是在Window对象提供的全局

域空间进行的。

一个Window对象实际上就是一个独立的浏览器窗口，如果对于框架性页面来说，窗口中每个框架都包含一个
Window对象。


Window对象属性（附图）

Window对象方法（附图）

三、全局作用域

作为全局运行环境，Window对象提供了全局作用域。
javascript代码在一个中声明的全局变量并不是另一个框架的全局变量，但是第二个框架
却可以存取第一个框架中的变量。

在客户端javascript中，Window对象定义了大量的属性和方法，方便对Web浏览器的窗口进行
操作。同时还定义了引用其他对象的属性。

由于 Window对象是全局对象，因此所有的全局变量都被定义为该 对象的属性。
例如:在脚本中定义了全局变量和函数。实际上它们就自动成为了Window对象的一个属性或方法
var a="window.a";//全局变量
function f(){}//全局函数
都可以这样访问
alert(window.a);
alert(window.f());

三、全局生命周期
在客户端javascript中，与一般对象不同，Window对象存在于浏览器当前进程中，
也就是说，如果当前浏览器进程没有被终止，则该Window对象依然会存在。
这样在当前进程中，即使打开一个窗口，然后关闭，则该窗口的Window对象依然
存储在内在中，除非这个浏览器进程完全被终止。

四、javascript人机交互

Window对象定义了3个专用人机交互的方法：
alert():简单的提示对话框
confirm()：简单的提示对话框，有两个按钮，点确定返回true ，点取消，返回false
prompt()：弹出提示对话框，可以接收用户输入的信息，并将输入的信息返回。

五、控制弹出窗口window
Window对象定义了open()方法，调用该方法可以打开一个新窗口。
window.open(url,name,features,repalce)
url:设置开窗口中显示的文档URL
name:设置新窗口名称
features：设置新窗口的显示特征
repalce:设置是否在窗口的浏览历史中给装载到新页面的URL创建一个新条目，还是用它替换浏览历史
中的当前条目，如果为true，就不创建新的历史条目。
注：第四个参数只有第二个参数命名的是一个已经存在的窗口时才有用。
open（）的返回值是是代表新创建窗口的Window对象。如果
window对象的opener属性引用为null，则当前窗口是由用户创建的，而不是javascript代码创建的。

六、创建框架页面

在HTML文档中，可以使用frameset和frame元素创建框架集页面。另外，iframe元素也可以
用来在文档中创建浮动框架。

在框架集文档中，每个框架都有一个名字，该 名称可以使用<frame>标签的name属性定义。
这样就可以在其他标签中引用 。
比如 <a taret属性，指定链接的页面在哪个窗口中打开，就可以指定target为frame的属性name值。

构架存在于窗口当中，并不能独立存在。
不过javascript把窗口与框架视为平等的Window对象，它们都有自己独立的全局作用域，相互
之间是不允许随意访问的。

但是在一个窗口中任何框架都可以使用Window对象的frames[]、parent、top属性访问窗口中其他框架


七、检测浏览器信息

Navigator对象包含了Web浏览器的基本信息（如名称、版本、系统等），它也是BOM核心对象之一。
通过window.navigator方式，我们可以引用该对象（如果是访问本窗口window可以省略，但是如果是别的框架或者另的窗口不可省略）。
Navigator对象包含5个主要信息
appName        Web浏览器的名称

appVersion    浏览器的版本号

userAgent    浏览器在它的USER-AGENT HTTP标题中发送的字符串。该 属性包含前面两个属性的所有信息

appCodeName    浏览器的代码名。比如Mozilla

platform    浏览器所在操作系统

1、特征检测法

根据浏览器是否支持特定功能来决定操作的方法。

当我们使用一个对象、方法或属性时，先判断它是否存在。比如
var a=docuent.getElementsByName("a");
如果 a 返回undefined，则不存在。这时javascript会自动把它转换为布尔值false。

2、字符串检测法

客户端浏览器每次发送HTTP请求时，都会附带有一个user-agent字符串，可以通过编程来识别客户使用的浏览器的类型。

分析这个返回字符串。
var s = window.navigator.userAgent;



八、客户端导航：Location对象

方位导航以及时间导航。

方位导航确定当前浏览的URL，由Location对象负责管理。

时间导航定位用户客户浏览的历史，由History对象负责管理。

Location对象定义了8个属性。
href        声明了当前显示文档的完整URL，与其他Location属性只声明部分URL不同，把该属性        
        设置为新的URL会使浏览器读取并显示新的URL的内容

protocol    声明URL的协议部分，包括后缀的冒号，如http"

host        声明了当前URL中的主要名和端口部分，如 www.css8.cn:80

hostname    声明了当前URL中的主机名，如www.css8.cn

port        声明了当前URL中的端口，如80

pathname    声明了当前URL中的路径部分，如news/index.asp

serach        声明了当前URL中的查询部分，包括前导问号，如?id=123&name=location

hash        声明了当前URL中的锚记部分，包括前导符#，如，#top，指定在文档中锚记的名称


两个方法
reload()
replace()

九、客户端导航：History对象

表示窗口的浏览历史。
相当于一个容器，它存储了客户端最近访问网页URL的列表信息。

方法
back():返回到前一个URL
forward()：访问下一个URL
go()：根据不同参数决定可访问的URL
    如果参数是一个整数，则表示在History对象的历史列表中的位置距离。
    如果参数是一个字符串，则History对象能够从浏览历史中检索包含该字符串的URL，并
    访问第一个检索到的URL。
十、控制窗口、屏幕大小


1、屏幕大小
Screen对象存储了客户的电脑屏幕信息。
availHeight    显示Web浏览器的屏幕可用高度(不包括Windows的任务栏)

availWidth    显示Web浏览器的屏幕可用宽度（不包括Windows的快捷方式栏）

availTop    屏幕最顶部的y坐标

availLeft    屏幕最左侧的x坐标

colorDepth    浏览器分配的颜色数或者颜色深度

height        显示Web浏览器的屏幕高度

width        显示Web浏览器的屏幕宽度

pixelDepth    显示浏览器屏幕的颜色深度

2、窗口大小

Window对象定义了三组方法分别用来调整窗口位置、大小、滚动条的偏移位置。
moveTo() moveBy() resizeTo() resizeBy() scrollTo() scrollBy()
这些方法都包含两个参数，分别表示x轴坐标值和y轴坐标值。to为绝对  by为相对

另外Window对象还定义了 focus() 和 blur()方法。作用：将键盘焦点赋予窗口与放弃键盘焦点。

十一、文档对象模型
在浏览器窗口中，每个window对象都会包含一个document属性，该属性引用窗口中显示HTML文档的document
对象。Document对象与它所包含的各种javascript脚本元素（如表单、图像和链接）
构成了文档对象模型。
附加Document对象方法

附加Document对象属性

生成文档的两种方式
1、在浏览器解析文档时动态输出信息。

2、在文档解析之后，在调用事件处理函数时动态调用wirte()或者writeln()方法生成的文档内容。