BOM模型
ECMAScript无疑是JavaScript的核心,但是要想在浏览器中使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心。BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。 BOM将浏览器中的各个部分转换成了一个一个的对象,我们通过修改这些对象的属性,调用他们的方法,从而控制浏览器的各种行为。
#window对象 window对象是BOM的核心,它表示一个浏览器的实例。在浏览器中我们可以通过window对象来访问操作浏览器,同时window也是作为全局对象存在的。
全局作用域:window对象是浏览器中的全局对象,因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。
#窗口大小 浏览器中提供了四个属性用来确定窗口的大小:
- 网页窗口的大小
- innerWidth
- innerHeight
- 浏览器本身的尺寸
- outerWidth
- outerHeight
#打开窗口 使用 window.open() 方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口。
这个方法需要四个参数:
- 需要加载的url地址
- 窗口的目标
- 一个特性的字符串
- 是否创建新的历史记录
#调用方式 ##超时调用
超时调用:
- setTimeout()
- 超过一定时间以后执行指定函数
- 需要连个参数:
- 要执行的内容
- 超过的时间
取消超时调用
- clearTimeout()
超时调用都是在全局作用域中执行的。
##间歇调用 间歇调用:
- setInterval()
- 每隔一段时间执行指定代码
- 需要两个参数:
- 要执行的代码
- 间隔的时间
取消间隔调用:
- clearInterval()
#系统对话框 浏览器通过 alert() 、 confirm() 和 prompt()方法可以调用系统对话框向用户显示消息。它们的外观由操作系统及(或)浏览器设置决定,而不是由 CSS 决定。显示系统对话框时会导致程序终止,当关闭对话框程序会恢复执行。
##alert
- alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认按钮的对话框。
- 例如: alert(“Hello World”);
##confirm
- confirm和alert类似,只不过confirm弹出的对话 框有一个确认和取消按钮。用户可以通过按钮来 确认是否执行操作。
- 例如: confirm(‘你确定吗?’);
- 这个函数的执行会返回一个布尔值,如果选择确 定则返回true,如果点击取消则返回false。
##prompt
- prompt会弹出一个带输入框的提示框,并 可以将用户输入的内容返回。
- 它需要两个值作为参数:显示的提示文字,文本框中的默认值
- 例子: prompt(‘你的年龄是?’,’18’);
#location对象
- location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导 航功能。
- href属性: href属性可以获取或修改当前页面的完整的URL地址,使浏览器跳转到指定页面。
- assign() 方法:所用和href一样,使浏览器跳转页面,新地址错误参数传递到assign ()方法中
- replace()方法:功能一样,只不过使用replace方法跳转地址不会体现到历史记录中。
- reload() 方法:用于强制刷新当前页面
#navigator对象
- navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。
- 我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。
#screen对象
- screen 对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的 信息,如像素宽度和高度等。
- 该对象作用不大,我们一般不太使用。
#history对象
- history 对象保存着用户上网的历史记录, 从窗口被打开的那一刻算起。
- go()
- 使用 go() 方法可以在用户的历史记录中任意跳转,可以向后也可以向前。
- back()
- 向后跳转
- forward()
- 向前跳转
#document
-
document对象也是window的一个属性,这个对象代表的是整个网页的文档对象。
-
我们对网页的大部分操作都需要以document对象作为起点。
-
关于document对象的内容,我们后边还要具体讲解。
END