现在所说的JavaScript包含了三个部分
ECMAScript：js的语法规范DOM：操作网页的功能BOM：操作浏览器的功能window对象是js中的全局变量，也叫做顶级对象 常见的window对象： ① document alert ② 全局中的变量，函数 ③ BOM的属性和方法
（1）入口函数（window.onload = function(){}） 当页面加载完成的时候来执行这个函数，这个功能叫做入口函数 注意点： ① 不仅需要页面加载完成，还需要等待外部资源（img，css，js）加载完成； ② 存在覆盖问题
window.onload = function(){ var box = docunment.querySelector('#box'); box.onclick = function(){ alert(1); } }（2）window.open 与window.close 作用：第三方登录会用到
窗口打开语法：window.open(url, name, desc) 参数： ① url：需要打开网页的网址 ② name：页面窗口名称，可选的（可通过window.name去获取页面的名称） ③ desc：设置打开的网页的特征，可选的（写法：‘width=xx,heigth=**xx’） 关闭窗口：window.close()
btn1.onclick = function(){ newWin = window.open('http://www.baidu.com', 'demo', 'width=300,height=300,left=100,top=100') } btn2.onclick = function(){ // window.close(); // 关闭当前 newWin.close(); // 窗口调用close方法，关闭窗口 }语法：setTimeout(function(){}, delay) 参数： ① function(){} 需要延迟执行的函数 ② delay：延时的时间，单位为ms 返回值：返回延时器的id，用于后面清除延时器
// 第一种写法 setTimeout(fn, 3000); // 第二种写法 setTimeout(function(){fn();}, 3000);清除延时器： 语法：clearTimeout(timerid); 参数：timerid 延时器的id
语法：setInterval(func, interval); 参数： ① func：需要执行的函数 ② interval：间隔的时间，单位是ms 返回值：定时器的id
var id = setInterval(fn, 1000);清除定时器： 语法：clearInterval(timerid); 参数：timerid 定时器的id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电子表</title> </head> <body> <div id="box"></div> <script> //把时间显示到box中 var box = document.querySelector("#box"); function setTime() { var date = new Date(); box.innerText = date.toLocaleString(); } setTime();//手动调用一次 setInterval(setTime, 1000); </script> </body> </html>location.href：控制地址栏中的地址 location.reload：让页面重新加载
其它： location.hash：哈希值，就是锚点 location.host：主机名称（服务器名）+端口号 location.search：参数（问号 ? 之后的部分）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>自动跳转</title> </head> <body> <a id="link" href="http://www.baidu.com">注册成功，3秒后跳转到首页</a> <script> // 1. 找对象 // 2. 开启定时器 // 3. 修改a链接的内容 // 4. 倒计时结束了，跳转到href属性值 // 1. var link = document.querySelector("#link"); var count = 3; // 2. setInterval(function(){ count--; // 3. link.innerText = "注册成功，"+ count +"秒后跳转到首页"; // 4. if(count == 0){ location.href = link.href; } }, 1000) </script> </body> </html>获取客户端（浏览器）的一些信息 window.navigator == navigator navigator.userAgent：浏览器版本
（1）前进：history.forward() （2）后退：history.back() （3）go()：任意切换历史记录 参数为数值： go(1) => history.forward() go(-1) => history.back() go(0) => 刷新页面的效果
// 刷新页面小总结： location.reload(); location.href = ''; history.go(0)screen.width：屏幕的宽度 screen.height：屏幕的高度 screen…availheight：浏览器可以使用的高度 screen.availWidth：浏览器可以使用的高度
（1）offsetWidth、offsetHeiht => 获取元素真实的宽/高值 ① offsetWidth、offsetHeiht获取元素大小 =>(内容的宽度+padding+border)=>为数值类型 ② 设置元素的大小（style.width style.height设置宽高） offsetWidth/offsetHeight只读属性 （2）offsetParent parentNode 找父元素 offsetParent 获取该元素最近有定位的父元素，如果都没有定位找到的是body （3）offsetLeft、offsetTop 只能获取设置无效 offsetLeft获取的是整数(10.2px为10px)，获取的距离是相对于offsetParent的距离
scrollWidth scrollHeight 内容的的宽度和高度 scrollTop scrollLeft 内容卷曲距离 如果卷曲值为0，没有卷曲，或者是没有滚动条
onscroll滚动条滚动的时候触发的事件，滚动条滚动一像素就会触发 页面级别的滚动 window.scroll = function(){ }
老版本的浏览器：通过HTML或body的scrollTop/scrollLeft获取卷曲距离 新版本浏览器：通过window.pageYoffset获取卷曲距离
// 兼容性写法 // 获取垂直方向的卷曲距离 var scrollX = window.pageYoffset || document.documentElement.scrollTop || document.bady.scrollLeft || 0; // 获取水平方向的卷曲距离 var scrollY = window.pageXoffset || documentElement.scrollLeft || document.body.scrollLeft || 0;clientWidth clientHeight 可视区宽高 如果内容没有撑开 scrollHeight、scrollWidth和clientHeight、clientWidth一样大小 clientTop clientLeft 上边框、左边框的大小 在窗口或框架被调整大小时发生。：onresize事件
老版本的浏览器：通过HTML或body的clientWidth获取可视区大小 新版本浏览器：用window.innerWidth window.innerHeight获取可视区大小
// 兼容性写法 // 获取垂直方向的卷曲距离 var clientW = window.innerWidth || document.documentElement.clientWidth || document.bady.clientWidth; // 获取水平方向的卷曲距离 var clientH = window.innerHeight || document.documentElement.clientHeight || document.bady.clientHeight;