前端基础-浏览器对象模型
第5章 浏览器对象模型
5.1 介绍
浏览器对象模型(Browser Object Model)–英文简称 BOM，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。我们使用JavaScript与浏览器交互的所有内容，均来自 浏览器对象模型。
浏览器对象模型的具体实例化对象就是 window 对象；
window 对象下有很多属性和方法，我们前面学过的DOM对象，就是window对象的一个属性，只不过这个属性的值又是一个对象，因此也成为window对象的子对象；
https://developer.mozilla.org/zh-CN/docs/Web/API/Window
5.2 对话框
window.alert() : 显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
window.prompt() : 显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字.
var s = window.prompt('你觉得很幸运吗?','是的');
console.log(s);window.confirm() ：方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。
5.3 页面加载事件
onload
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}5.4 浏览器控制台
window.console : 返回console对象的引用，该对象提供了对浏览器调试控制台的访问。
Console.clear() : 清空控制台。
Console.error() : 打印一条错误信息
Console.table() : 将数组或对象数据在控制台以表格形式打印
Console.log() ： 打印字符串，使用方法比较类似C的printf、PHP的echo等格式输出
5.5 定时器
setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数，只执行一次
// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = window.setTimeout(function () {
console.log('Hello World');
}, 1000);
// 取消定时器的执行
window.clearTimeout(timerId);setInterval()和clearInterval()
定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
// 创建一个定时器，每隔1秒调用一次
var timerId = window.setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);
window.clearInterval(timerId);5.6 案例
一起来摇摆
<style>
#div{
position: absolute;
}
</style>
<body>
<input type="button" value="摇起来" id="btn1">
<div id="div">
<img src="/img/c2.jpg" style="width: 50px;height: 50px;" alt="">
<img src="/img/c3.jpg" style="width: 50px;height: 50px;" alt="">
</div>
</body>
<script>
var b1 = document.getElementById('btn1');
var b2 = document.getElementById('btn2');
b1.onclick = function(){
if(this.value != '停止'){
this.value = '停止';
var d = document.getElementById('div');
c = window.setInterval(function(){
d.style.left = parseInt(Math.random() * 100 +1) + 'px'
d.style.top = parseInt(Math.random() * 100 +1) + 'px'
},50);
}else{
this.value = '摇起来';
clearInterval(c);
}
}
</script> 眼看着图片就这个飞走了
<style>
#div{
position: absolute;
}
</style>
<body>
<input type="button" value="摇起来" id="btn1">
<div id="div">
<img src="/img/c2.jpg" style="width: 50px;height: 50px;" alt="">
</div>
</body>
<script>
var b1 = document.getElementById('btn1');
b1.onclick = function(){
var d = document.getElementById('div');
window.setInterval(function(){
var s = parseInt(getComputedStyle(d)['top']);
var l = parseInt(getComputedStyle(d)['left']);
// console.log(l);
d.style.top = s-1+'px';
d.style.left = l+5+'px';
},50)
}
</script> 5.7 location对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Location
window.location 只读属性，返回一个 Location对象，其中包含有关文档当前位置的信息；
URL
统一资源定位符 (Uniform Resource Locator, URL)
URL的组成:
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
fragment:信息片断
字符串，锚点.console.log(location);
页面跳转
location.href = 'http://qq.com'5.8 history对象
https://developer.mozilla.org/zh-CN/docs/Web/API/History
history.back() : 前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法
history.forward() ： 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法
history.go() : 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页.
5.9 navigator对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator
userAgent : 通过userAgent可以判断用户浏览器的类型
platform : 通过platform可以判断浏览器所在的系统平台类型.
geolocation : 位置定位对象；
参考: https://developer.mozilla.org/zh-CN/docs/Web/Reference/API