21、BOM
（1）什么是BOM？
（Browser Object Model）
专门操作浏览器窗口的API——没有标准，有兼容性问题
（2）浏览器对象模型
window: 代表整个窗口
history: 封装当前窗口打开后，成功访问过的历史url记录
navigator: 封装浏览器配置信息
document: 封装当前正在加载的网页内容
location: 封装了当前窗口正在打开的url地址
screen: 封装了屏幕的信息
event: 定义了网页中的事件机制
（3）获取窗口大小
获取当前窗口大小
完整窗口大小:
window.outerWidth/outerHeight
文档显示区大小:
windowinnerWidth/innerHeight
（4）定时器
定义：让程序按指定时间间隔自动执行任务——网页动态效果、计时功能等
如何选择定时器？
只要反复执行，就用周期性
只要只执行一次，就用一次性
1、周期性定时器
让程序按指定的时间间隔反复执行一项任务
2、一次性定时器
让程序延迟一段时间执行
3、停止定时器
暂停定时器执行
实践案例：
//部分省略，因为head部分和body部分有大量的html和css相关的内容，并且内容数量过大。 //为确保本文章代码字数比合格，只展示js部分的代码
<script>
var arr=document.querySelectorAll(".box-page");
for (var i =0; i <arr.length; i++) {
for(var r=0;r<3;r++){
for(var c=0;c<3;c++){
var divs=document.createElement("div");
divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(img/"+i+".jpg);background-size:300px 300px;";
arr[i].appendChild(divs);
divs.style.left=c*100+"px";
divs.style.top=r*100+"px";
divs.style.backgroundPositionX=-c*100+"px";
divs.style.backgroundPositionY=-r*100+"px";
}
}
}
</script>
23、JS事件实例
（0）JS事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
24.补充
没有用var声明的变量
没有用var声明的变量会默认成为window下的属性，我们可以使用window.变量名来调用它。
此外，就算在函数中没有是用var定义，他依然是window属性属于全局变量。
- 补充
document.write(a); 将变量a打印到网络页面上。
NaN：全称not a number缩写，本来像得到一个数字，但是结果不是数字。
基本数据类型：number ， string ， boolean ， null ， undefined。
复杂数据类型：Object类型。
注意typeof 和 instanceof：
26.补充：包装对象
这里介绍以下三种原始类型：
数值，字符串，布尔
原始类型的数据在一定条件下可以自动转为对象，这就是包装对象。
例如：
var v1 = new Number(123);
console.log(v1);
上面的结果就是Number {123}。
原始值，可以自动当作对象来调用，因此可以调用各种属性以及方法。
如果包装对象使用完成，会自动立即销毁。
例如：
var str = '123';
console.log(str.length);
27.补充 this用法
27.1 指向对象中的this
27.2 指向全局对象的this
在一个普通的函数种也是有this的，并且这个this指向的是全局对象(window)。
27.3 this的指向
this运行在那个对象下，就指向那个对象。
注意函数是否带括号！！！
