JavaScript学习08-BOM浏览器对象模型

BOM概述

BOM：浏览器对象模型，提供了独立于内容与窗口进行交互的对象，核心对象是window
由一系列相关对象构成，每个对象都有很多属性和方法

DOM和BOM的对比

DOM	BOM
文档对象模型	浏览器对象模型
把文档当对象	把浏览器当对象
顶级对象document	顶级对象window
主要操作页面	主要是浏览器窗口交互的对象
W3C标准	浏览器产商自定义，兼容性较差

BOM的组成

window对象是浏览器的顶级对象，
是JS访问浏览器窗口的一个接口，
是一个全局对象，定义在全局作用域的变量、函数都会变成它的属性和方法，
调用时可以省略window，比如alert(), prompt()

<script>
	var num=10;
	function func(){
		alert('aaa');
	}
	console.log(window.num);
	window.func();
</script>

一个特殊属性window.name，自带，打印出来是空的，取名字应该避免取name

window对象的常见事件

窗口加载事件

文档内容全部加载完触发onload

//两种写法
window.οnlοad=function(){}
window.addEventListener('load',function(){});

加了onload可以把js代码放到head标签里，
传统onload只能写一次，如果写了多个以最后一个为准，
使用addEventListener没有限制

//DOMContentLoaded
document.addEventListener('DOMContentLoaded',function(){});

DOMContentLoaded仅当DOM加载完成，不包括样式表图片等，IE9+支持，多图片适用

调整窗口大小事件

窗口大小发生变化就触发resize

//两种写法
window.οnresize=function(){}
window.addEventListener('resize',function(){});

经常使用这个完成响应式布局，window,innerWidth窗口的宽度

//窗口小于800像素宽就不显示div
<script>
			var div=document.querySelector('div');
			window.onresize=function(){
				if(window.innerWidth<800){
					div.style.display='none';
				}else{
					div.style.display='block';
				}
			}		
</script>

定时器

setTimeout()

定时器到期后触发

window.setTimeout(调用函数/函数名,[延迟的毫秒数]);   //毫秒数省略默认0
或者
setTimeout(调用函数/函数名,[延迟的毫秒数]);

<script>
	function func(){
		alert('定时器');
	}
	window.setTimeout(function(){
		alert('延迟0秒');
	});
	window.setTimeout(function(){
		alert('延迟2秒');
	},2000);
	window.setTimeout(func,5000);
</script>

五秒后关闭广告

<script>
	var div=document.querySelector('div');
	setTimeout(function(){
		div.style.display='none';
	},5000);
</script>

关闭setTimeout定时器

window.clearTimeout(定时器标识符);

点击按钮停止定时器

<script>
	var btn =document.querySelector('button');
	var timer=setTimeout(function(){
		alert('5s到了');
	},5000);
	btn.addEventListener('click',function(){
		clearTimeout(timer);
	});
</script>

setInterval()

每隔多少秒调用一次函数

window.setInterval(回调函数/函数名，[间隔的毫秒数]);   //不写默认为0s

关闭setInterval定时器

window.clearInterval(定时器标识符);

每60s发送一次短信

<script>
var btn =document.querySelector('button');
		btn.addEventListener('click',function(){
			btn.disabled=true;
			var time=60;
			var timer=null;
			timer=setInterval(function(){
				
				time--;
				console.log(time);
				if(time==0){
					btn.disabled=false;
					btn.innerHTML='click';
					clearInterval(timer);
					console.log('a');
				}else{
					var content='还剩'+time+'秒';
					btn.innerHTML=content;
					
				}	
			},1000);
		})
</script>

this

this的指向在函数定义时是确定不了的，只有函数执行的时候才能确定this指向，一般指向调用的对象
全局作用域中或者函数中的this指向window, 定时器里面的this也指向window

<script>
	console.log(this);
	function func(){
			console.log(this);
	}
	func();
	setTimeout(func);
</script>

方法调用中谁调用，this指向谁

<script>
		var obj={
			say:function(){
				console.log(this);
			}
		}
		obj.say();     //打印obj
		var btn=document.querySelector('button');
		btn.onclick=function(){
			console.log(this);     //打印button
		}
</script>

构造函数中的this指向构造的对象

<script>
	function Per(){
			console.log(this);
		}
	var p=new Per();
</script>

JS执行机制

JS的一大特点是单线程，即同一时间只能做同一件事。
问题：如果单一任务执行时间较长，就会导致页面渲染不连贯。

同步和异步

同步：按顺序执行任务，前一个任务结束才能进行下一个任务。
异步：做一个任务的同时可以进行另一个任务。

<script>
	console.log(1);
	setTimeout(function(){
		console.log(3);
	},1000);
	console.log(2);
	//打印顺序  123
</script>

同步任务：在主线程上执行，形成一个执行栈。
异步任务：JS的异步通过回调函数实现，分三类：
1、普通事件，如click、resize等
2、资源加载，如load、error等
3、定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中。

<script>
	console.log(1);
	setTimeout(function(){
		console.log(3);
	},0);
	console.log(2);
	//打印顺序  123
</script>

执行机制

先执行 执行栈 中的同步任务，异步任务（回调函数）放入任务队列中。
执行栈中的同步任务执行完再执行任务队列里的异步任务。

事件循环

主线程不断获得任务、执行任务、再获取任务、再执行的过程。

location对象

window对象的一个属性，用于获取或设置窗体的url，可以用于解析url，因为这个属性返回的是一个对象，所以称为location对象。

URL

统一资源定位符，是互联网上标准资源的地址。

格式
protocol://host[:port]/path/[?query]#fragment
通信协议 主机名 端口号 文件目录地址 参数 片段（锚点）

location对象的属性

案例：5s后自动跳转页面

<script>
	var btn = document.querySelector('button');
	var div = document.querySelector('div');
	btn.addEventListener('click',function(){
		location.href='http://www.baidu.com';
	});
	var time = 5;
	setInterval(function(){
		if(time ==0){
			location.href = 'http://www.baidu.com';
		}else{
			div.innerHTML = time + '秒后跳转到百度';
			time--;
		}
	},1000);
</script>

案例：表单提交数据到另一个页面

/** 登录页 输入用户名：andy  **/
<form action="index.html">
	<input type="text" name="username">
	<input type="submit" value="登录">
</form>

/** 主页 **/
<script>
	console.log(location.search);   //?username=andy
	//去掉问号
	var username=location.search.substr(1);
	//用=分隔
	var arr=username.split('=');
	console.log(arr[1]);	
</script>

location对象的方法

assign: 和href一样可以跳转页面，可以后退
replace: 替换不记录历史记录，所以不能后退页面

navigator对象

包含有关浏览器的信息，常用的属性userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

判断用户用哪个终端打开页面

<script>
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|oPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQbrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
	window.location.href='';  //手机
}else{
	window.location.href='';  //电脑
}
</script>

history对象

后退
history.back();
history.go(-1);
前进
history.ho(1);