day09 - javascript中的BOM

Browser Object Model == 浏览器 对象 模型
既然是对象模型，那么所有内容，都是用对象来描述的。顶级(核心)对象叫window，是浏览器窗口对象。

1.window子对象：

一、navigator - 记录了浏览器的信息    
	console.log(navigator.appName); // 浏览器的名称 - Netscape（网景浏览器的名称）    
	console.log(navigator.appCodeName); // 浏览器的内核 - Mozilla    
	console.log(navigator.cookieEnabled); // 返回指明浏览器是否启用cookie的布尔值    
	console.log(navigator.platform); // 返回运行浏览器的操作系统平台    
	console.log(navigator.appVersion); // 浏览器的平台和版本信息    
	console.log(navigator.userAgent); // 浏览器的整体信息

二、screen - 获取屏幕宽度和高度
	screen.width   // 屏幕宽度    
	screen.height  // 屏幕高度    
	availWidth     // 屏幕的可用宽度    
	availHeight    // 屏幕的可用高度

三、location - 操作浏览器的地址栏    
	location.href; // 获取或设置完整的url（地址）    
	location.reload(); //重新加载页面        
	location.reload(true); //传参数true指的是强制刷新，清除缓存再刷新    
	location.search(); //获取地址栏中携带的数据 - 也就是地址栏?以及后面的内容    
	location.assign("要跳转的url"); // 让当前url重定向- 跳转    
	location.replace(url); //使用新的url代替原来的url - 跳转（不能后退的前进）

四、history - 浏览器的历史记录    
	history.back(); //返回到上一个页面；相当于浏览器的后退按钮    
	history.forward(); //前进到下一个页面（下一个页面必须是点击以后的页面）；相当于浏览器的前进按钮    
	history.go(参数); //里面的参数代表前进或后退多少个页面（参数为正数就是前进；参数为负数就是后退）     

2.window事件：

语法：window.on事件类型 = function（）{ }

 事件类型：
 	load     当页面中所有内容（html结构、图片资源、样式文件、js文件）都加载完成，再执行这个事件的函数
 	resize   当浏览器窗口大小发生改变的时候触发的事件
 	scroll   当浏览器的滚动条发生滚动的时候触发的事件(必须有滚动条才行)
 	unload   当浏览器关闭时触发的事件    

3.浏览器窗口尺寸：

 window.innerHeight - 浏览器窗口的高度
 window.innerWidth - 浏览器窗口的宽度
 注意：1. 这两个属性返回的单位是像素      
 	  2. 这两个属性计算的范围包含滚动条的区域    

4.浏览器滚动过的距离：

获取文档向下滚动过的距离：    
	当前文档有doctype的声明：
		document.documentElement.scrollTop    
	没有文档声明：
		document.body.scrollTop

获取页面向右滚动过的距离：    
	当前文档有doctype的声明：
			document.documentElement.scrollLeft    
	没有文档声明：
			document.body.scrollLeft

兼容写法：
var top = document.documentElement.scrollTop || document.body.scrollTop
var teft = document.documentElement.scrollLeft || document.body.scrollLeft

案例：利用定时器和scroll实现回到顶部效果
btn.onclick = function(){    
	var speed = document.body.scrollTop || document.documentElement.scrollTop; //获取滚动过的高度    
	setInterval(function(){        
		speed -= 20;        
		document.body.scrollTop = speed;        
		document.documentElement.scrollTop = speed;    
	},50);
}  

5.定时器：

一、让代码每间隔一段时间执行：
var timerId = setInterval(function () {    
	console.log('每隔1s我执行了')
}, 1000)
二、延迟执行：
var timerId = setTimeout(function () {
    console.log('1s之后我执行了')
}, 1000)
注意：第一个参数是要执行的函数，第二个参数是间隔的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

关闭定时器：
clearInterval(timerId); // 关闭间隔执行的定时器
clearTimeout(timerId); // 关闭延迟执行的定时器
注意：两个清除定时器可以混合使用   

6.同步/异步操作：

(1)同步操作 - 按顺序执行    
	正常以前写的代码都是同步代码
(2)异步操作 - 代码同时执行(各执行各的)   
	定时器是一个异步代码
js中所有异步代码都是在同步代码执行结束后才执行的    

7.window的弹出层：

window.confirm()；//提示用户是否确认/取消
window.prompt()；//提示用户输入的弹窗        
	window.prompt("请输入密码："，123456) //123456：默认提示样式
window.alert()；//弹窗显示