JavaScript学习笔记（十四）--BOM以前：我们在页面上操作一些，一刷新没有了。

BOM

BOM： browser object model，是把browser 浏览器看成是一个对象，就是学习浏览器对象的各种方法和属性；
浏览器对象：window对象；

BOM 的核心： window 对象

特点：
- 所有window对象的属性和方法，大部分可以直接省略 window.，而直接使用
- 因为window对象在浏览器中被称为顶级对象；
- 顶级对象：页面中所有的东西都是依赖于这个对象存在的；
- 变量与函数：
  - 所有的全局变量和全局函数都是window对象的属性和方法；
  - 在js代码里面，不使用var声明的变量，都是隐式全局变量，这个方式是不推荐的，因为如果不使用var声明，是不会变量提升的；


	// 1.所有window对象的属性和方法，直接省略  `window.`
document.getElementById('xx');


  // 2.顶级对象
console.log(window.document == document);


 // 3.全局变量和函数 都是window上的挂载
var a = 10;
console.log(window.a);

 function fn() {
     console.log(1);
 }
 window.fn();
 fn();


 // 4.隐式变量：定义变量，变量赋值；
 b = 2;  
 console.log(window.b);  //设置到window这个对象上；

 // 访问变量：无赋值，就是访问变量；报错，无定义；
 c;
 console.log(window.c);

方法：onload

作用：页面加载完毕的时候执行
页面加载完毕：页面所需的静态资源全部加载完毕；
静态资源： html文件、css文件、js文件、图片，
这个方法调用一般是用window.onload 不省略window;


	window.onload = function(){
    // 想要获取图片的宽高，就需要等待图片加载完成后才执行后面的函数；
}

方法：定时器

一次性定时器

倒计时多少时间以后执行函数
语法： setTimeout(要执行的函数，多长时间以后执行)
会在你设定的时间以后，执行函数


  	var timerId = setTimeout(function () {
 	console.log('我执行了')
	}, 1000)
	console.log(timerId) // 1

时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
所以会在页面打开 1 秒钟以后执行函数
只执行一次，就不在执行了
返回值是，当前这个定时器是页面中的第几个定时器

永久性的定时器

每间隔多少时间就执行一次函数
语法： setInterval(要执行的函数，间隔多少时间)

	var timerId = setInterval(function () {
 	console.log('我执行了')
	}, 1000)

时间和刚才一样，是按照毫秒进行计算的
每间隔 1 秒钟执行一次函数
只要不关闭，会一直执行
返回值是，当前这个定时器是页面中的第几个定时器

定时器的返回值

设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的
只要有一个定时器，那么就是一个数字

var timer = setTimeout(function () {
 console.log('一次性定时器')
}, 1000)

var timer2 = setInterval(function () {
 console.log('永久性定时器')
}, 1000)

console.log(timer) // 1
console.log(timer2) //

关闭定时器

我们刚才提到过一个 timer，是表示这个定时器是页面上的第几个定时器
这个 timer 就是用来关闭定时器的名字
我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

	var timer = setTimeout(function () {
 	console.log('一次性定时器')
	}, 1000)
    // 停止的定时器
	clearTimeout(timer)

关闭以后，定时器就不会在执行了

	var timer2 = setInterval(function () {
 	console.log('永久性定时器')
	}, 1000)
     // 停止的定时器
	clearInterval(timer2)

原则上是
- clearTimeout 关闭 setTimeout
- clearInterval 关闭 setInterval
但是其实是可以通用的，他们可以混着使用

	var timer = setTimeout(function () {		 
    console.log('一次性定时器')
	}, 1000)
	// 关闭定时器
	clearInterval(timer)

	var timer2 = setInterval(function () {
 	console.log('永久性定时器')
	}, 1000)
	// 关闭定时器
	clearTimeout(timer2)

案例：获取验证码-倒计时

获取元素：按钮
注册事件：click
点击之后：
- 按钮表现为禁用状态；
- 倒计时设置：
  - 开始计时，初始化
  - setInterval 1秒间隔，设置：
    - time--：
    - 改变按钮的值；
    - 清除倒计时：time==0时清除定时器；按钮恢复文字和可点击的样式；


// 2. 注册事件 点击之后：
//  2.1 按钮变灰
//  2.2 文字立马显示
//  2.3 开启定时器；文字显示；
//  2.4 判断定时器 是否到达0s；恢复原状；

// 获取按钮
var btn = document.getElementById('getCode');
// 注册点击事件
btn.onclick = function(){
  // 禁用按钮，禁用不能点击了；
  btn.disabled = true;
    
  // 开始倒计时
  var time = 5;
  // 在点击的时候，先改变一次
  btn.value = '获取验证码('+ time +')';
   
  // 设置倒计时
  var timer = setInterval(function(){  
    // 每隔1秒钟，数字要减少1
    time--;  
    // 修改按钮的内容
    btn.value = '获取验证码('+ time +')';   
      
    // 当倒计时到达0的时候，停止定时器
    if(time === 0){
      // 停止的定时器
      clearInterval(timer);
      // 把按钮还原
      // 文字还原
      btn.value = '获取验证码';
      // 可以点击
      btn.disabled = false;
    }
      
  },1000);
}

属性：location

location：负责管理浏览器地址栏相关的行为和信息的对象；
属性： location.href 属性；该属性存储的是浏览器地址栏内 url 地址的信息，
- 获取：当前浏览器的地址；
- 重新设置，页面就会发生跳转；

// 如果想要使用js进行跳转，只需要 location.href = 新的地址;
location.href = 'https://www.jd.com';

location.reload
- location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理
```
	window.location.reload()
```
- 注意：不要写在全局，不然浏览器就会一直处在刷新状态

localStorage

local：本地；
Storage：储存；
以前：我们在页面上操作一些，一刷新没有了。
把数据进行本地储存，刷新还是操作后的样子;
本地：本地指浏览器，储存指浏览器可以储存数据


  /*以前：页面新增完数据后，刷新就没有了；
    原因：新增的数据没有被保存下来；‘
    解决：把数据保存在 浏览器 里面；
    如何使用：
    语法：localStorage 属性名；
    值：对象（属性和方法的集合体）*/

  /*方法：存入
    参数1：存入本地哪个字段内。什么名字；键；位置；
    参数2：存入的数据
    真实存入（本地浏览器、小U盘）数据：*/
    localStorage.setItem("a", "---------------------");
    localStorage.setItem("b", "1234");


  /* 方法：拿出真实存的数据；
     参数：键，位置；
     返回：读取的数据；如果读取一个不存在的数据，返回null;*/
     var info = localStorage.getItem("c");
     console.log(info);
  // 数据覆盖：
    localStorage.setItem("b", "9999");



  /* 方法：真实清除某条数据
    参数：键，位置；*/
   localStorage.removeItem("b");



  // 方法：全部清除；
   localStorage.clear();

JSON

上面的问题：把对象变为字符串？手动变；麻烦也容易出错；有方法可以实现
JSON是个字符串，有一定格式的字符串；
格式：模拟JS对象和数组的格式；

  // [] JS 数组  {} 对象
  // JSON: []模拟表示数组   {} 模拟对象  在字符串
  var str = '[{"name":"酸 菜","age":12,"sex":"男"},{"name":"翠 花","age":13,"sex":"女"}]';

JSON方法：我们自己转json格式比较麻烦；js提供了JSON方法，里面封装好了很多跟json操作相关的方法


	// 将对象转换为json格式的字符串
	// 返回值：一个满足json格式的 字符串
	JSON.stringify(对象);

	// 将json格式的字符串 转换为 对象
	// 返回值：依赖于你的json格式字符串，可能返回数组，或者是对象....
	JSON.parse(json格式字符串);

BOM方法：获取DOM节点样式

	// Computed：计算后的样式
	// 返回值： 当前作用在这个元素身上的所有样式的集合对象  BOM的方法；
	// 属性：具体的属性 无论是行内的还是CSS样式设置的，都可以获取到；字符串
	var res = window.getComputedStyle(元素对象)；
	res.width 

	// 只能操作行内属性；
	var dom = document.getElementById('xx');
	dom.style.color；

属性：获取元素对象的实际（显示）宽度和高度

元素的实际宽高 = border+padding+content（width和height）


	// 返回值：数值；

	// 只能进行获取；
	// 元素的实际宽度
	元素.offsetWidth 
	// 元素的实际高度
	元素.offsetHeight