二、BOM

二、BOM

问题:JavaScript这门脚本语言是由几部分组成的呀？

• ECMAScript【简称ES】：它是欧洲计算机协会，大概每年6月中旬定制语法规范。

• DOM【document object model】：文档对象模型。相当于是整个节点树的‘根节点’。

• BOM【browser object model】：浏览器对象模型。每一个浏览器厂商给程序员提供一个内置对象，可以获取浏览器一些信息。

2.1初次认知BOM

概述:BOM【browser object model】浏览器对象模型，每一个浏览器厂商都有属于自己特定BOM对象，

给我们提供一些获取浏览器信息的属性、方法。其实BOM即为每一个浏览器内置window对象。

<script type="text/javascript">
 //BOM对象：即为内置window对象
  console.log(window);
  console.log(typeof window);
  //获取地址栏信息
  console.log(window.location.href);
  //获取电脑屏幕一些信息
  console.log(window.screen.width);
  console.log(window.screen.height);
  //获取浏览器信息（用的是哪个浏览器、版本号多少）
  console.log(window.navigator.userAgent)
</script>

• BOM即为浏览器内置window对象

• BOM对象：获取地址栏信息、屏幕信息、浏览器内核信息等等

• 作为BOM对象属性、方法可以省略window

• BOM对象是引用类型数据

2.2定时器

概述：BOM对象给我们提供很多属性与方法，其中最为重要的一个方法即为定时器。定时器你可以理解为

每隔一段时间执行一次回调函数。

语法格式：

setInterval(callBack,time);

• 定时器是BOM对象方法，因此可以省略window

• 第一个参数【回调函数：当一个函数执行的时候，传递实参是另外一个函数声明部分】必有的。

• 第二个参数【时间：毫秒】 1S = 1000ms

<script type="text/javascript">
 //定时器是BOM对象一个方法：因此可以省略window
 setInterval(function(){
​    //书写任意代码
​    console.log('我是定时器么么哒');
 },1000);
</script>

2.2.1异步语句

概述:在JS这门语言当中，如果某一个语句很耗时间【称之为异步语句】。

异步语句有一个很大特征：先执行异步语句后面代码，回首在执行异步语句。

<script type="text/javascript">
     //定时器是BOM对象一个方法：因此可以省略window
 //开启定时器
 var timer = setInterval(function(){
​    //书写任意代码
​    console.log('我是定时器么么哒');
 },1000);
 //定时器语句后面代码
 console.log('我是定时器后面代码呀');
 //清除定时器方法
 clearInterval(timer);
</script>

• 定时器是异步语句：先执行异步语句后面代码，回首在执行异步。

• clearInterval也是BOM对象提供一个方法：清除定时器。

2.2.2运动套路

概述：在前端领域中经常会出现元素运动效果。实现原理无非：定时器 + 改变定位元素left、top套路。

<script type="text/javascript">
      //获取节点
   var div = document.querySelector('div');
   //信号量
   var l = 0;
   var t = 0;
   //开启定时器
   setInterval(function(){
​     l+=10;
​     t+=5;
​     if(l >=300) l = 300;
​     //修改节点left、top
​     div.style.left = l+"px";
​     div.style.top = t +"px";
   },100);
</script>

• 前端当中运动套路：定时器+定位元素修改left、top即可。

2.2.3浩克游戏

游戏素材网站：http://www.aigei.com/

   <script type="text/javascript">
    //获取节点
  var div = document.querySelector('div');
  //信号量
  var step = 0;
  var l = 0;
  //控制小人是否行走
  var isMove = false;
  //开启定时器
  setInterval(function(){
​      if(isMove) return;
​     step++;
​     l+=10;
​     if(step > 3) step = 0;
​     //改变背景图定位
​     div.style.backgroundPosition = - step * 32 +"px -96px";
​     //修改left
​     div.style.left = l +"px";
  },100);
  //绑定单机事件
  div.onclick = function(){
​     //将右侧数值赋值给左侧变量【置反思想】
​     isMove = !isMove;
  }
</script>