【JavaScript】——BOM+demo

是什么：

    BOM（Browser Object Model）浏览对象模型。提供了独立于内容而与浏览器窗口进行交互的对象。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

什么用：

    BOM提供了独立于内容而与浏览器窗口进行交互的对象。所以其主要应用于与浏览器窗口的交互。如：弹出提示框，获取窗口大小等与窗口内容无关的功能。JavaScript能很好的体现面向对象的思想，在这里也凸显了出来。

window：

    window是BOM的核心对象，它表示浏览器的一个实例。

  属性和方法：

    与window直接关联的有6个属性，与window的document属性关联的又有5个属性，这11个属性本身也是对象。

    通常，window下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。

    例如：window.alert()和alet()是一个意思。

  系统对话框：

    这块的内容就相对很实用了。

    系统对话框与浏览器中显示的网页没有关系，也不包含HTML。

  实用demo:    

<span style="font-family:KaiTi_GB2312;font-size:18px;">//确定和取消
confirm('请确定或者取消'); //这里按哪个都无效
if (confirm('请确定或者取消')) { //confirm 本身有返回值
alert('您按了确定！'); //按确定返回true
} else {
alert('您按了取消！'); //按取消返回false
}</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">//输入提示框
var num = prompt('请输入一个数字', 0); //两个参数，一个提示，一个值
alert(num); //返回值可以得到</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">//调出打印及查找对话框
print(); //打印
find(); //查找</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">defaultStatus = '状态栏默认文本'; //浏览器底部状态栏初始默认值</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">status='状态栏文本'; //浏览器底部状态栏设置值
</span>

    与显示的网页（内容）无关，即如：status='状态栏文本';无论URL百度也好，google也好，浏览器状态栏文本都是你设置的内容，不会随着打开网页的不同而改变。

  新建窗口

    即：打开一个链接：使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
它可以接受四个参数：1.要加载的URL；2.窗口的名称或窗口目标；3.一个特性字符串；4.
一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。

  demo:

<span style="font-family:KaiTi_GB2312;font-size:18px;">open('http://www.baidu.com'); //新建页面并打开百度
open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent'); //在本页窗口打开百度,_blank 是新建</span>

  间歇调用和超时调用

    该方法能实现在规定时间执行动作。

  超时调用：

    即在指定的时间过后执行代码：setTimeout()方法，参数为：执行代码和超时时间的毫秒数。

  demo:

<span style="font-family:KaiTi_GB2312;font-size:18px;">setTimeout("alert('Lee')", 1000); //不建议直接使用字符串</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">function box() {
alert('Lee');
}
setTimeout(box, 1000); //直接传入函数名即可
setTimeout(function () { //推荐做法
alert('Lee');
}, 1000);</span>

    使用第二种方法，扩展性好，性能更佳，所以更推荐第二种方法。

  间歇调用：

    即按指定的时间间隔重复执行代码，直至间歇调用被取消或页面被卸载：setInterval()方法，参数为：执行的代码和间隔毫秒数。

  demo:

<span style="font-family:KaiTi_GB2312;font-size:18px;">setInterval(function () { //重复不停执行
alert('hanhan');
}, 1000);</span>

  取消间歇或超时：

    使用clearInterval()方法。

    取消间歇调用的重要性要远高于取消超时调用，一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在真正的开发环境下，很少使用真正的间歇调用。因为需要根据情况来取消ID，并且可能造成同步的一些问题，我们建议不使用间歇调用，而去使用超时调用。

  demo:

间歇调用：

<span style="font-family:KaiTi_GB2312;font-size:18px;">var num = 0; //设置起始秒
var max = 5; //设置最终秒
setInterval(function () { //间歇调用
num++; //递增num
if (num == max) { //如果得到5 秒
clearInterval(this); //取消间歇调用，this 表示方法本身
alert('5 秒后弹窗！');
}
}, 1000); //1 秒</span>

超时调用：

<span style="font-family:KaiTi_GB2312;font-size:18px;">var num = 0;
var max = 5;
function box() {
num++;
if (num == max) {
alert('5 秒后结束！');
} else {
setTimeout(box, 1000);//设置超时调用
}
}
setTimeout(box, 1000); //执行定时器</span>

location:

    location是window对象的属性，也是document的属性，当然，他也是BOM的对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能。

    最简单的小demo:

<span style="font-family:KaiTi_GB2312;font-size:18px;">alert(location); //获取当前的URL</span>

    另外可以根据location的不同属性获取URL的不同内容。如：hostname属性，表示主机名。就可以这样获取：

<span style="font-family:KaiTi_GB2312;font-size:18px;">location.hostname = 'han'; //设置主机名，并跳转
alert(location.hostname); //获取当前主机名，</span>

history:

    history是window对象的属性，也是BOM的对象之一。它保存着用户上网的记录，从窗口被打开的那一刻算起。

    当要实现网页跳转（返回上次刚访问的网页），可以利用该对象。

    通过判断history.length == 0，得到是否有历史记录。

     demo:

<span style="font-family:KaiTi_GB2312;font-size:18px;">function back() { //跳转到前一个URL
history.back();
}</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">function forward() { //跳转到下一个URL
history.forward();
}</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">function go(num) { //跳转指定历史记录的URL
history.go(num);
}</span>

总结：

    本篇文章主要介绍了BOM（浏览对象模型）及其常见应用，这些demo都是很实用的小代码块，用的时候，换换属性就可以实现其它类似功能，知识是学不完的，重要的是思想，面向对象的思想（貌似是实现了很多功能，其实只不过是获取了各种属性）.....