JavaScript BOM

BOM

BOM的概念

---

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window，包括定义的全局变量都是属于window

注意：window下一个特殊的属性 window.name，他默认是字符串类型，慎用window里面的属性定义成我们的变量

• name

var name = 123;
console.log(typeof name); // string
var age = 18;
console.log(typeof age); // number

• top 是window的属性，只能获取不能赋值

对话框

alert （提示信息）提示信息

prompt（提示信息，默认内容） 提示输入相应的信息，点击确定就可以获取到用户输入的内容

confirm（提示信息） 让用户决定是否做一件事情，确定返回true，取消false

注意：以上三种对话框不用使用，不能改变他的样式，太丑，并且各个浏览器的样式还不一样。

页面加载事件

1. window.onload 页面加载完成之后执行，并且只能出现一次

页面加载完成是指：页面上所有的元素创建完毕，并且引用的外部资源下载完毕（js, css, 图片）

window.onload = function () {
    // 代码
}

注意：所有的元素都有onload事件

2. window.onunload 页面卸载的时候执行

window.unload = function () {
    // 在onunload中所有的对话框都无法使用，当关闭的时候window对象冻结。
    // 清空购物车
}

f5 刷新页面，执行两个操作

1 卸载页面

2 重新加载页面

定时器

setTimeout（要执行的函数， 间隔的时间） 隔一段时间执行，并且只会执行一次

• 取消定时器(clearTimeout()方法)

  var btn1 = document.getElementById('btn1');
  var timerId; // 定时器
  btn1.onclick = function () {
      timerId = setTimeout(function () {
          console.log('111');
      }, 3000); 
  }
  var btn2 = document.getElementByid('btn2');
  btn2.onclick = function () {
      clearTimeout(timerId);
  }
  

setInterval(要执行的函数， 间隔的时间) 隔一段时间执行，并且会重复执行

• 取消定时器(clearInterval()方法)

  var btn1 = document.getElementById('btn1');
  var intervalId; // 定时器
  btn1.onclick = function () {
      timerId = setInterval(function () {
          console.log('111');
      }, 3000); 
  }
  var btn2 = document.getElementByid('btn2');
  btn2.onclick = function () {
      clearInterval(intervalId);
  }
  

location对象

location对象是window对象下的一个属性，使用的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

location成员

1. location.href属性

• 页面跳转

2. location.assign() 方法 assign意思是委派

• assign（） 作用和href的作用一样。可以让页面跳转到指定的地方

3. location.replace() 方法

• 替换当前地址栏中的地址，但是不记录历史

4. location.reload() 方法

• 重新加载页面，相当于f5
• 参数： true强制从服务器获取页面，false如果有浏览器有缓存的话，直接从缓存获取页面
• f5刷新页面，可能从缓存中加载，Ctrl+f5强制刷新，从服务器获取页面

5. hash属性

• 锚点 （#后面的）

6. host属性

• 主机名

…

URL的组成

scheme://host:port/path?query#fragment

http://www.itheima.com:80/a/b/index.html?name=zs&age=18#bottom

scheme:通信协议
常用的http,ftp,maito等

host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path:路径
由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query:查询
可选，用于给动态网页传递参数，可有多个参数，用’&‘符号隔开，每个参数的名和值用’='符号隔开。例如：name=zs

fragment:信息片断
字符串，锚点.

history对象

**1. history.forward() **

• 前进

2. history.back()

• 后退

3. history.go(编号)

• 正号代表前进，负数代表后退

navigator对象

1. navigator.userAgent

• 获取系统信息，浏览器信息

简单动画

盒子不断的向右移动

 // 1 点击按钮，让盒子能够向右移动
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    btn.onclick = function () {
      // // style.left 获取的是标签中的style属性设置的样式属性的值
      // // 如果标签中的style没有设置该样式属性，我们获取到的是空字符串
      // console.log(box.style.left);
      // // 10px10px  当我们给样式属性设置非法的值，浏览器会帮我们过滤掉
      // console.log(box.style.left + 10 + 'px');
      // box.style.left = box.style.left + 10 + 'px';
      // 
      // 
      // 获取盒子当前的位置  offsetLeft  offsetTop
      // box.style.left = box.offsetLeft + 10 + 'px';
      // 
      // box.offsetLeft 只读属性
      // 
      // 2 让盒子不停的向右移动
      // 循环的速度非常非常非常快，瞬间循环100次
      // for (var i = 0; i < 100; i++) {
      //   box.style.left = box.offsetLeft + 5 + 'px';
      // }
      

      var timerId = setInterval(function () {
        // 让盒子停在500px的位置
        // 判断盒子当前的位置是否到达500
        // 
        // 最终盒子停止的位置
        var target = 600;
        // 步进
        var step = 6;
        if (box.offsetLeft >= target) {
          // 停止定时器
          clearInterval(timerId);
          // 设置横坐标为500
          box.style.left = target + 'px';
          console.log(box.style.left);
          // 退出函数
          return;
        }
        box.style.left = box.offsetLeft + step + 'px';
        console.log(box.style.left);
      }, 30);
    }